/* ============================================================================
   C-19 — habillage des formulaires Contact Form 7.

   Feuille mise en file a l echelle du site : elle sert la page de devis, et
   servira la reconstruction de Contact.

   Pourquoi elle existe. V-CF7 a mesure qu un formulaire CF7 pose dans une page
   Elementor n est atteint que par TROIS regles CF7 du theme, sur les vingt
   qu il porte : .wpcf7-spinner, .wpcf7-form p et .wpcf7-form br. Les dix-sept
   autres sont prefixees par un ancetre qu aucune page Elementor ne fournit
   — .newsletterpopup, .contact, .contact-us-form, #bwp-main — ou visent des
   classes que CF7 6.1.7 n emet plus. Aucune regle du theme ne style un champ
   ni un bouton : le formulaire sortirait en controles natifs du navigateur.

   Rien du theme parent n est modifie ici, y compris ses six regles mortes.

   Consequence de « .wpcf7-form p{display:contents} », que l on CONSERVE : les
   paragraphes de CF7 ne forment plus de boite, donc ils n apportent plus aucun
   espacement. L espacement vertical est pose explicitement ci-dessous, sur les
   elements qui deviennent les enfants directs du formulaire.
   ========================================================================= */

/* --------------------------------------------------------- 1. Le formulaire */

/* La largeur est posee sur la COLONNE qui porte le formulaire, non sur le
   formulaire : les champs font ainsi 100 % de leur colonne, sans qu une ligne
   de saisie s etire sur 1 140 px, ou l oeil perd le debut du champ. */
.smg-devis-formulaire .elementor-widget-shortcode {
	max-width: 780px;
}

.wpcf7 {
	width: 100%;
}

.wpcf7-form {
	display: flex;
	flex-direction: column;
	position: relative;
}

/* ------------------------------------------------------------ 2. Libelles */

.wpcf7-form label {
	display: block;
	margin: 18px 0 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #333333;
}

.wpcf7-form > label:first-of-type {
	margin-top: 0;
}

.wpcf7-form .smg-requis {
	margin-left: 3px;
	color: #218663;
}

/* -------------------------------------------------------------- 3. Champs */

.wpcf7-form-control-wrap {
	display: block;
}

.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	background: #ffffff;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	color: #333333;
	box-sizing: border-box;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.wpcf7-form .wpcf7-textarea {
	min-height: 140px;
	resize: vertical;
}

.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):focus {
	border-color: #218663;
	box-shadow: 0 0 0 3px rgba(33, 134, 99, .18);
	outline: none;
}

.wpcf7-form .wpcf7-form-control::placeholder {
	color: #8a8a8a;
}

.wpcf7-form .wpcf7-not-valid {
	border-color: #c0392b;
}

/* --------------------------------------------------------- 4. Acceptation */

/* Hors contexte .newsletterpopup : les regles de liste du theme y sont
   enfermees et ne descendent pas jusqu ici. */
.wpcf7-form .smg-consentement {
	display: block;
	margin: 22px 0 0;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
	display: block;
	margin: 0;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: #218663;
}

/* ------------------------------------------------------------- 5. Bouton */

/* Aligne sur le .btn du theme : fond sombre, texte clair, rayon 25 px,
   retraits genereux. Le survol reprend le vert de la charte, comme
   .digic-child-quote-button. */
.wpcf7-form .wpcf7-submit {
	align-self: flex-start;
	margin-top: 24px;
	padding: 12px 30px;
	border: 1px solid #000000;
	border-radius: 25px;
	background: #000000;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	cursor: pointer;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus {
	border-color: #218663;
	background: #218663;
	color: #ffffff;
}

.wpcf7-form .wpcf7-submit:focus-visible {
	outline: 3px solid #333333;
	outline-offset: 2px;
}

/* Etat inactif. CF7 desactive le bouton pendant l envoi ; sans cette regle il
   garderait l apparence d un bouton cliquable. */
.wpcf7-form .wpcf7-submit:disabled {
	border-color: #8a8a8a;
	background: #8a8a8a;
	cursor: not-allowed;
}

.wpcf7-form .wpcf7-submit:disabled:hover {
	border-color: #8a8a8a;
	background: #8a8a8a;
}

/* ----------------------------------------------------------- 6. Messages */

/* Sous leurs noms ACTUELS. Le theme vise .wpcf7-validation-errors et
   .wpcf7-acceptance-missing, classes de CF7 4.x que 6.1.7 n emet plus. */
.wpcf7-form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 12px 16px;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.5;
}

.wpcf7-form.sent .wpcf7-response-output {
	border-color: #218663;
	color: #1a6b4f;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
	border-color: #c0392b;
	color: #c0392b;
}

.wpcf7-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: #c0392b;
}

/* Le theme pose .wpcf7-spinner en position absolue, calee a droite. Dans un
   formulaire en colonne, elle se retrouverait a l oppose du bouton : on la
   remet dans le flux, a cote de lui. */
.wpcf7-form .wpcf7-spinner {
	position: relative;
	right: auto;
	align-self: flex-start;
	margin: 12px 0 0 14px;
}

/* ------------------------------------------------ 7. Mention sous le formulaire */

/* Meme mention sur le devis et sur Contact : une seule regle, deux classes,
   plutot qu un bloc duplique. */
.smg-devis-mention,
.smg-contact-mention {
	margin-top: 18px;
	font-size: 13px;
	line-height: 1.6;
	color: #636363;
}

/* ------------------------------------------------------------ 8. Telephone */

@media (max-width: 767px) {
	.wpcf7 {
		max-width: none;
	}

	.wpcf7-form label {
		margin-top: 16px;
	}

	.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
		font-size: 16px; /* sous 16px, iOS agrandit la page a la mise au point */
	}

	.wpcf7-form .wpcf7-submit {
		align-self: stretch;
		width: 100%;
		text-align: center;
	}
}

/* ============================================================================
   9. Bande des huit editeurs, hors page d accueil.

   La geometrie est celle de C-13.1, reprise a l identique depuis
   digic-child/css/accueil.css : huit cellules sur une rangee au-dessus de
   1199 px, quatre de 735 a 1199, deux en dessous de 734, et les hauteurs par
   marque, posees en max-height sur la moyenne geometrique des rapports natifs.

   Pourquoi elle est ici et non dans accueil.css : cette derniere n est mise en
   file que sur la page d accueil et tous ses selecteurs sont prefixes .home.
   Le prefixe « body:not(.home) » garantit qu aucune de ces regles n atteint
   l accueil, qui est fige : les deux jeux ne se rencontrent jamais.
   ========================================================================= */

body:not(.home) .smg-editeurs .smg-editeurs-grille {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	align-items: center;
	gap: 8px;
}

body:not(.home) .smg-editeurs .smg-editeurs-cellule {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 5px 4px;
	background: #f2f2f2;
	border-radius: 10px;
}

body:not(.home) .smg-editeurs .smg-editeurs-cellule img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
}

body:not(.home) .smg-editeurs .smg-editeurs-cellule--adobe img { max-height: 26px; }
body:not(.home) .smg-editeurs .smg-editeurs-cellule--microsoft img { max-height: 24px; }
body:not(.home) .smg-editeurs .smg-editeurs-cellule--autodesk img { max-height: 17px; }
body:not(.home) .smg-editeurs .smg-editeurs-cellule--kaspersky img { max-height: 24px; }
body:not(.home) .smg-editeurs .smg-editeurs-cellule--drweb img { max-height: 26px; }
body:not(.home) .smg-editeurs .smg-editeurs-cellule--eset img { max-height: 30px; }
body:not(.home) .smg-editeurs .smg-editeurs-cellule--bitdefender img { max-height: 20px; }
body:not(.home) .smg-editeurs .smg-editeurs-cellule--zoom img { max-height: 24px; }

@media (max-width: 1199px) {
	body:not(.home) .smg-editeurs .smg-editeurs-grille {
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
	}
}

@media (max-width: 734px) {
	body:not(.home) .smg-editeurs .smg-editeurs-grille {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	body:not(.home) .smg-editeurs .smg-editeurs-cellule {
		padding: 5px 2px;
	}
}

/* ============================================================================
   10. C-20V — page Contact : composition en cinq zones verticales.

   REMPLACE la section 10 de C-20, qui habillait une colonne laterale de
   coordonnees. Cette colonne n existe plus : la page est desormais une suite
   de zones pleine largeur — introduction, formulaire, « Comment nous
   joindre » sur fond gris, horaires (zone retiree en H-1), partenaires.
   Les regles de l ancienne
   section sont donc supprimees et non desactivees : aucune classe
   .smg-contact-corps, .smg-contact-colonne-*, .smg-contact-adresses,
   .smg-contact-liens ni .smg-contact-horaires n est plus emise.

   PERIMETRE. Les sections 1 a 9 ne sont pas touchees : elles habillent le
   formulaire lui-meme et la bande des editeurs, et servent AUSSI la page de
   devis 101072, qui est figee. Tout ce qui suit est borne par une classe de
   zone propre a Contact — .smg-contact-formulaire, .smg-contact-joindre,
   .smg-editeurs--filet — de sorte qu aucune regle
   n atteigne 101072. Aucun selecteur d identifiant Elementor, aucune classe
   partagee avec l accueil.

   Charte : le vert #218663 ne sert qu aux pictogrammes, aux valeurs
   reellement cliquables et au filet sous les titres de zone. Les titres
   restent noirs. Filets et bordures en #E9E9E9, valeur du theme parent
   (186 occurrences dans digic/css/template.css).
   ========================================================================= */

/* --------------------------------------------- 10.1 Titres de zone */

/* Centres, noirs, souligne d un filet vert court. Le filet est un ::after
   plutot qu un element : rien a ajouter dans le contenu. */
.smg-contact-intro .smg-zone-titre,
.smg-contact-formulaire .smg-zone-titre,
.smg-contact-joindre .smg-zone-titre {
	margin-bottom: 22px;
	text-align: center;
}

.smg-contact-intro .smg-zone-titre h2,
.smg-contact-formulaire .smg-zone-titre h2,
.smg-contact-joindre .smg-zone-titre h2 {
	position: relative;
	margin: 0;
	padding-bottom: 12px;
	color: #000000;
}

.smg-contact-intro .smg-zone-titre h2::after,
.smg-contact-formulaire .smg-zone-titre h2::after,
.smg-contact-joindre .smg-zone-titre h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 48px;
	height: 3px;
	margin-left: -24px;
	border-radius: 2px;
	background: #218663;
}

/* ------------------------------------------------ 10.2 Zone 1, accroche */

/* Sous 75 signes par ligne : au-dela, l oeil perd le debut de la ligne
   suivante. 680 px a la taille de corps du theme y correspond. */
.smg-contact-accroche {
	max-width: 680px;
	margin-inline: auto;
	text-align: center;
}

.smg-contact-accroche p {
	margin: 0;
	line-height: 1.7;
	color: #636363;
}

/* ------------------------------------------- 10.3 Zone 2, le formulaire */

/* 880 px, arbitrage de Guissguiss. La largeur est posee sur le widget, et non
   sur le formulaire : les champs font 100 % de la largeur ainsi donnee. */
.smg-contact-formulaire .elementor-widget-shortcode,
.smg-contact-formulaire .elementor-widget-text-editor {
	max-width: 880px;
	margin-inline: auto;
}

/* Appariement des champs sur deux rangs.

   Le formulaire CF7 est INVARIANT : l appariement est obtenu en CSS seul. La
   structure a ete mesuree avant d ecrire ces regles — le formulaire a dix
   enfants directs : un <fieldset class="hidden-fields-container"> en
   display:none, huit <p>, puis .wpcf7-response-output. Les <p> portent, dans
   l ordre, your-name, nom-societe, your-email, telephone, objet,
   your-message, puis le consentement et le bouton. Les champs caches etant
   enfermes dans le fieldset masque, la grille ne recolte aucune cellule
   fantome.

   Les <p> repassent en display:block, ce qui annule le display:contents que
   la section 1 conserve : c est necessaire pour que label et champ forment
   UNE cellule. L espacement vertical, qui reposait sur les enfants directs du
   flex, est donc repose ici sur les <p>. Ces regles ne valent que dans
   .smg-contact-formulaire ; la page de devis garde le comportement en
   colonne de la section 1. */
.smg-contact-formulaire .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	align-items: start;
}

.smg-contact-formulaire .wpcf7-form > p {
	display: block;
	margin: 0 0 14px;
}

.smg-contact-formulaire .wpcf7-form > p > label {
	margin-top: 0;
}

/* objet, message, consentement, bouton et le message de reponse occupent la
   largeur entiere ; seuls les quatre premiers champs sont apparies. */
.smg-contact-formulaire .wpcf7-form > fieldset,
.smg-contact-formulaire .wpcf7-form > p:nth-of-type(n + 5),
.smg-contact-formulaire .wpcf7-form > .wpcf7-response-output,
.smg-contact-formulaire .wpcf7-form > .screen-reader-response {
	grid-column: 1 / -1;
}

.smg-contact-formulaire .wpcf7-form > .smg-consentement {
	margin-top: 8px;
}

.smg-contact-formulaire .wpcf7-form > .smg-envoi {
	margin-bottom: 0;
}

.smg-contact-formulaire .smg-contact-mention {
	margin-top: 14px;
}

/* --------------------------------- 10.4 Zone 3, « Comment nous joindre » */

/* PLEINE LARGEUR sans artifice. La section Elementor occupe deja toute la
   fenetre sur le gabarit digic/page.php — mesure 0.3 : 1425 px a gauche 0,
   aucun conteneur ancetre ne la borne — et c est le .elementor-container
   interne, plafonne a 1440 px, qui borne le contenu. Le fond declare sur la
   section va donc bord a bord de lui-meme. Ni 100vw, ni marge negative, ni
   position detournee : rien qui puisse provoquer un defilement horizontal. */

.smg-contact-joindre .smg-joindre-rang {
	max-width: 1100px;
	margin-inline: auto;
}

/* Un filet fin separe les implantations des moyens de contact. */
.smg-contact-joindre .smg-joindre-rang--moyens {
	margin-top: 26px;
	padding-top: 26px;
	border-top: 1px solid #e9e9e9;
}

/* Rang 1 — les deux implantations, cote a cote. */
.smg-joindre-lieux {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 40px;
}

.smg-joindre-lieu p {
	margin: 0;
}

.smg-joindre-nom {
	display: flex;
	align-items: baseline;
	gap: 9px;
	font-weight: 600;
	color: #000000;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.smg-joindre-adresse {
	margin-top: 5px !important;
	padding-left: 24px;
	font-size: 14px;
	line-height: 1.65;
	color: #636363;
}

/* Rang 2 — les quatre moyens, colonnes homogenes. */
.smg-joindre-moyens {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* C-20V.1 — les deux lignes d une colonne partagent le meme axe gauche.

   Mesure faite avant correction : AUCUN text-align: center n etait herite — la
   section, la colonne Elementor, le widget et la grille sont tous a « left ».
   Le decalage venait du retrait de 24 px pose ici en C-20V, qui alignait la
   valeur sous le LIBELLE (x 186,5) plutot que sous le PICTOGRAMME (x 162,5).
   Ce retrait est donc supprime, et l alignement est affirme une fois sur le
   conteneur de colonne plutot que repete sur chacune des deux lignes.

   Le rang 1, ou .smg-joindre-adresse garde son retrait pour se caler sous le
   nom du lieu, n est pas concerne. */
.smg-joindre-moyen {
	text-align: left;
}

.smg-joindre-moyen p {
	margin: 0;
}

.smg-joindre-etiquette {
	display: flex;
	align-items: baseline;
	gap: 9px;
	font-size: 13px;
	color: #636363;
}

.smg-joindre-valeur {
	margin-top: 4px !important;
	font-size: 15px;
	line-height: 1.5;
}

.smg-joindre-valeur a {
	color: #218663;
	text-decoration: none;
	word-break: break-word;
}

.smg-joindre-valeur a:hover,
.smg-joindre-valeur a:focus {
	text-decoration: underline;
}

/* Les pictogrammes, Font Awesome 4 deja mise en file par le theme parent
   (digic/inc/loader.php). Largeur fixe pour que les libelles s alignent. */
.smg-joindre-nom .fa,
.smg-joindre-etiquette .fa {
	flex: 0 0 15px;
	font-size: 15px;
	color: #218663;
	text-align: center;
}

/* ------------------------------------------- 10.5 Zone 4, les horaires */

/* H-1 — zone retiree de la page, ses regles avec elle (.smg-horaires,
   .smg-horaires-jour, .smg-horaires-jour--ferme et le titre de
   .smg-contact-horaires en 10.1). Mesure H-1 : aucune autre page ne les
   emploie, ni en base ni dans le HTML rendu. */

/* ---------------------------------------- 10.6 Zone 5, filet en tete */

.smg-editeurs--filet {
	border-top: 1px solid #e9e9e9;
}

/* ------------------------------------------- 10.7 Largeurs reduites */

/* 900 px — les quatre moyens de contact passent en 2 x 2 avant de devenir
   illisibles. (H-1 : le palier 1199 px et les regles des horaires sont
   retires avec la zone.) */
@media (max-width: 900px) {
	.smg-joindre-moyens {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px 20px;
	}
}

/* 767 px — telephone. Les paires de champs sont defaites et les
   implantations s empilent. */
@media (max-width: 767px) {
	.smg-contact-formulaire .wpcf7-form {
		grid-template-columns: 1fr;
	}

	.smg-joindre-lieux {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.smg-joindre-moyens {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ============================================================================
   11. C-21V / C-21V.1 — page À propos 99398.

   Six zones posees par tools/c21-build-page-a-propos.php, chacune dans une
   section Elementor portant .smg-apropos :

     Z1 bandeau panoramique (image de fond de section),
     Z2 presentation (blanc), Z3 « Ce que nous faisons » (#F2F2F2),
     Z4 « Nos solutions » et bande DakarWeb (blanc),
     Z5 « Qui sommes-nous » (#F2F2F2), Z6 « Identite de l entreprise » (blanc).

   PERIMETRE. Toutes les regles sont bornees par .smg-apropos, que seul ce
   generateur pose : rien n atteint Contact ni le devis, qui chargent la meme
   feuille. Aucun selecteur d identifiant d element Elementor. Deux exceptions,
   justifiees en 11.1 et conditionnees a la presence d une zone de cette page :
   la levee du retrait haut sous la barre de titre (Z1) et celle de la marge
   du pied de page (Z6).

   Composants repris de l accueil, sous cette classe et aux memes valeurs —
   accueil.css n est mise en file que sur l accueil et ses selecteurs sont
   tous prefixes .home :
     Z3 — barre de reassurance (icon-box) : pictogramme 26 px #218663 a
          gauche du titre, ecart 14 px, titre Poppins 600 #333 ;
     Z4 — carte Guides (C-10.1) : carte blanche, rayon 10, retrait
          20 / 20 / 24 / 20, panneau 16/9 de rayon 6 au cadre hors flux,
          lien editorial vert pousse en bas de carte ;
          cadre produit (C-4.1 / C-6) : fond #F2F2F2, visuel entier borne,
          marge interieure en pourcentage.
   Boutons de Z6 : ceux du bouton d envoi de Contact (section 5).

   Charte : Poppins seule, vert #218663 pour les liens, les filets et les
   accents, fonds blanc et #F2F2F2, aucune ombre, aucune transition, aucun
   titre en capitales. Rayons 10 px pour les panneaux, 6 px pour les visuels.
   ========================================================================= */

/* ------------------------------------------ 11.1 Zones, rythme, largeur */

/* Rythme vertical 80 / 64 / 48 px. Largeur de contenu 1100 px, celle de
   Contact C-20V mesuree sur la page (.smg-joindre-rang et .smg-horaires).
   La regle d Elementor (.elementor-section.elementor-section-boxed >
   .elementor-container) pese trois classes : celle-ci en pese autant et vient
   apres elle dans la cascade. */
.elementor-section.smg-apropos {
	padding: 80px 20px;
}

.elementor-section.smg-apropos--blanc {
	background-color: #ffffff;
}

.elementor-section.smg-apropos--gris {
	background-color: #f2f2f2;
}

.elementor-section.smg-apropos > .elementor-container {
	max-width: 1100px;
}

/* Pas de vide supplementaire avant le pied de page. Le pied porte une marge
   haute de 60 px sur tout le site (mesure C-21V : « #bwp-footer », dans
   template.css, parent comme enfant ; aucun ancetre du contenu ne porte de retrait
   bas) : elle s ajoutait aux 80 px de Z6. Le selecteur reprend l identifiant
   pour peser plus que la regle du theme. Seule regle de la section qui vise
   un element hors de .smg-apropos ; elle reste conditionnee a la presence de
   Z6, donc a cette page, et n atteint ni Contact ni le devis. */
body:has(.smg-apropos-z6) #bwp-footer {
	margin-top: 0;
}

/* Z1 colle sous la barre de titre. Le blanc de 35 px est la marge basse de
   la barre (mesure C-21V.1 : « .bwp-main .page-title », template.css). La
   barre n est pas un ancetre du contenu mais un frere de son conteneur :
   aucune classe du generateur ne l atteint en descendant. La regle est donc
   conditionnee, comme celle du pied, a la presence de Z1.
   C-22.1 : le bandeau de la FAQ 100663 (.smg-faq-bandeau, section 12)
   reprend Z1 et partage cette regle. */
body:has(.smg-apropos-z1) .bwp-main .page-title,
body:has(.smg-faq-bandeau) .bwp-main .page-title {
	margin-bottom: 0;
}

/* Z1 — bandeau bord a bord. La section occupe deja toute la largeur utile :
   aucun conteneur ancetre n est borne (mesure C-21V.1, .container a 1440 px
   a gauche 0). Ni 100vw, ni marge negative, ni stretch_section. L image, sa
   taille « cover » et sa position par appareil sont des reglages Elementor
   de la section ; seules la hauteur et l absence de retrait sont posees ici.
   Rayon 0 : bandeau bord a bord. Partage par le bandeau de la FAQ (C-22.1). */
.elementor-section.smg-apropos-z1,
.elementor-section.smg-faq-bandeau {
	height: 360px;
	padding: 0;
	border-radius: 0;
}

/* 72 px entre le bandeau et Z2, en bureau. */
.elementor-section.smg-apropos-z2 {
	padding-top: 72px;
}

/* --------------------------------------------------------- 11.2 Textes */

/* 68 signes par ligne au plus : la largeur est posee en em, donc proportionnelle
   au corps de chaque paragraphe. Mesure C-21V : 33 em laissaient passer 72
   signes a 16 px ; 31 em les ramenent sous 68. #636363 sur blanc donne
   5,9:1 et sur #F2F2F2 5,4:1 : AA. */
.smg-apropos p {
	max-width: 31em;
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.7;
	color: #636363;
}

.smg-apropos a {
	color: #218663;
	text-decoration: none;
}

.smg-apropos a:hover,
.smg-apropos a:focus {
	text-decoration: underline;
}

/* Titres de zone : filet vert de 40 x 3 px au-dessus, aligne a gauche. Sur
   les H2 de zone seulement ; aucun H3 n en porte (C-21V.1). */
.smg-apropos .smg-apropos-h2 {
	margin: 0 0 28px;
	color: #000000;
	text-transform: none;
}

.smg-apropos .smg-apropos-h2::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: 16px;
	border-radius: 2px;
	background: #218663;
}

.smg-apropos .smg-apropos-h3 {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
	color: #333333;
	text-transform: none;
}

/* ----------------------------------------------------- 11.3 Z2 presentation */

/* 4/12 - 8/12. La ligne de lecture reste bornee a 31 em (11.2) : la place
   gagnee a droite resserre l ecart entre colonnes, elle n allonge pas les
   lignes. */
.smg-apropos-z2-grille {
	display: grid;
	grid-template-columns: 4fr 8fr;
	gap: 32px;
	align-items: start;
}

.smg-apropos-z2-titre .smg-apropos-h2 {
	margin-bottom: 0;
}

/* Le filet du H2 (3 px + 16 px) precede le titre : la colonne de texte est
   abaissee d autant, pour que le haut du H2 et la premiere ligne de
   l introduction soient alignes. */
.smg-apropos-z2-texte {
	padding-top: 19px;
}

.smg-apropos .smg-apropos-intro {
	font-size: 18px;
	line-height: 1.6;
	color: #333333;
}

.smg-apropos-z2-texte p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------ 11.4 Z3 ce que nous faisons */

.smg-activites {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.smg-activite {
	padding: 24px 20px;
	border-radius: 10px;
	background: #ffffff;
}

.smg-activite__tete {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.smg-activite__tete .fa {
	flex: 0 0 30px;
	font-size: 26px;
	line-height: 1;
	color: #218663;
	text-align: center;
}

.smg-apropos .smg-activite h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: #333333;
	text-transform: none;
}

.smg-apropos .smg-activite p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
}

/* ---------------------------------------------------- 11.5 Z4 solutions */

.smg-apropos .smg-apropos-chapeau {
	margin-bottom: 28px;
}

.smg-solutions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* Carte Guides : colonne de flex, pour que le lien se pose en bas de carte
   quelle que soit la longueur du texte.

   Sans retrait. Sur l accueil, la carte blanche se detache d un fond gris ;
   ici la zone est blanche, la carte est invisible, et son retrait de 20 px
   ne faisait que decaler panneaux et textes par rapport au titre de zone
   (mesure C-21V a 1440). Le panneau gris porte seul le contour. */
.smg-solution {
	display: flex;
	flex-direction: column;
	padding: 0;
	border-radius: 10px;
	background: #ffffff;
}

/* Panneau 16/9, cadre hors flux : sa taille est definie par construction et
   les pourcentages qu il porte se resolvent tous (acquis C-10.1). */
.smg-solution__visuel {
	position: relative;
	width: 100%;
	margin-bottom: 16px;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	background: #f2f2f2;
}

/* Marge interieure en pourcentage de la largeur du panneau, comme les cadres
   produits : le logo garde la meme part du cadre a toutes les largeurs. */
.smg-solution__cadre {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12% 16%;
}

.smg-solution__cadre img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

/* Carte Securite : quatre logos dans un seul cadre, deux par deux. */
.smg-solution__cadre--grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 10% 12%;
	padding: 10% 12%;
}

.smg-solution__cellule {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	height: 100%;
}

.smg-apropos .smg-solution__titre {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: #333333;
	text-transform: none;
}

.smg-apropos .smg-solution__statut {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #218663;
}

.smg-apropos .smg-solution__texte {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.65;
}

.smg-apropos .smg-solution__lien {
	align-self: flex-start;
	margin-top: auto;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* En ligne, et non en inline-block : aucun blanc ne la separe du dernier mot,
   elle ne peut donc plus passer seule a la ligne (mesure C-21V, carte
   Securite a 1440). */
.smg-solution__fleche {
	display: inline;
	margin-left: 7px;
}

/* Bande « Noms de domaine et hebergement » : composant propre a cette
   fonction. Panneau #F2F2F2 de rayon 10 ; pictogramme au langage de Z3 dans
   sa propre colonne, H3 et texte dans un seul bloc a sa droite ; bouton a
   droite, centre verticalement, a la pilule unique de la page. */
.smg-domaines {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-top: 48px;
	padding: 32px 40px;
	border-radius: 10px;
	background: #f2f2f2;
}

/* Le bloc prend toute la place laissee par le bouton : sans cela il se
   resserrait a 768 px sur une trentaine de signes par ligne (mesure
   C-21V.1). La borne de lecture reste celle du paragraphe, 31 em. */
.smg-domaines__corps {
	flex: 1 1 0;
	min-width: 0;
	display: grid;
	grid-template-columns: 30px 1fr;
	column-gap: 14px;
	align-items: center;
}

.smg-domaines__corps .fa {
	grid-column: 1;
	grid-row: 1;
	font-size: 26px;
	line-height: 1;
	color: #218663;
	text-align: center;
}

.smg-apropos .smg-domaines__titre {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
	color: #333333;
	text-transform: none;
}

.smg-apropos .smg-domaines__texte {
	grid-column: 2;
	margin: 8px 0 0;
}

.smg-apropos .smg-domaines__bouton {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ------------------------------------------- 11.6 Z5 qui sommes-nous */

/* Texte pose directement sur le gris, sans panneau. */
.smg-valeurs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-bottom: 56px;
}

.smg-valeur p,
.smg-histoire > p {
	margin-bottom: 0;
}

/* Frise : trois colonnes egales, un point centre dans chacune. Le trait est
   porte par la liste elle-meme et va du centre de la premiere colonne a
   celui de la derniere, soit de 1/6 a 5/6 de sa largeur. Points identiques :
   aucun jalon n est mis en valeur. */
.smg-apropos .smg-frise {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.smg-apropos .smg-frise::before {
	content: "";
	position: absolute;
	top: 5px;
	left: calc(100% / 6);
	right: calc(100% / 6);
	height: 2px;
	background: #218663;
}

.smg-frise__jalon {
	position: relative;
	margin: 0;
	padding: 28px 12px 0;
	text-align: center;
	list-style: none;
}

.smg-frise__jalon::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: #218663;
}

.smg-frise__annee {
	display: block;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	color: #218663;
}

.smg-frise__libelle {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.5;
	color: #333333;
}

/* ---------------------------------------------- 11.7 Z6 identite */

/* Grille de definitions sur toute la largeur de contenu, lue ligne par
   ligne : trois elements par rangee, chacun libelle au-dessus de sa valeur,
   sous un filet de 1 px. */
.smg-apropos .smg-identite {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px 32px;
	max-width: none;
	margin: 0 0 32px;
}

.smg-identite__ligne {
	padding-top: 12px;
	border-top: 1px solid #e9e9e9;
}

.smg-identite dt {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: #636363;
}

.smg-identite dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #333333;
}

.smg-apropos .smg-identite__phrase {
	margin-bottom: 14px;
	color: #333333;
}

.smg-apropos .smg-identite__boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: none;
	margin: 0;
}

/* Style du bouton d envoi de Contact C-20V (section 5), sans transition. */
.smg-apropos .smg-apropos-bouton {
	display: inline-block;
	padding: 12px 30px;
	border: 1px solid #000000;
	border-radius: 25px;
	background: #000000;
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	text-decoration: none;
}

.smg-apropos .smg-apropos-bouton:hover,
.smg-apropos .smg-apropos-bouton:focus {
	border-color: #218663;
	background: #218663;
	color: #ffffff;
	text-decoration: none;
}

.smg-apropos .smg-apropos-bouton:focus-visible {
	outline: 3px solid #333333;
	outline-offset: 2px;
}

/* ------------------------------------------- 11.8 Largeurs reduites */

@media (max-width: 1199px) {
	.elementor-section.smg-apropos {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.elementor-section.smg-apropos-z1,
	.elementor-section.smg-faq-bandeau {
		height: 280px;
		padding: 0;
	}
}

@media (max-width: 991px) {
	.smg-activites,
	.smg-solutions {
		grid-template-columns: repeat(2, 1fr);
	}

	.smg-apropos .smg-identite {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.elementor-section.smg-apropos {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.elementor-section.smg-apropos-z1,
	.elementor-section.smg-faq-bandeau {
		height: 200px;
		padding: 0;
	}

	.smg-apropos-z2-texte {
		padding-top: 0;
	}

	.smg-apropos .smg-identite {
		grid-template-columns: 1fr;
	}

	/* Bande DakarWeb : pictogramme et H3 sur une ligne, puis le texte, puis
	   le bouton aligne a gauche. */
	.smg-domaines {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding: 24px 20px;
	}

	.smg-apropos .smg-domaines__texte {
		grid-column: 1 / -1;
		margin-top: 12px;
	}

	.smg-apropos-z2-grille,
	.smg-valeurs {
		grid-template-columns: 1fr;
	}

	.smg-apropos-z2-grille {
		gap: 24px;
	}

	.smg-valeurs {
		gap: 32px;
		margin-bottom: 40px;
	}

	.smg-activites,
	.smg-solutions {
		grid-template-columns: 1fr;
	}

	/* Frise verticale : trait a gauche, annees en 24 px, libelles a droite du
	   point. Le trait de la liste cede la place a un trait par jalon, qui
	   descend de son point jusqu au point suivant — 14 px sous le haut du
	   jalon suivant, centre de son point. */
	.smg-apropos .smg-frise {
		grid-template-columns: 1fr;
	}

	.smg-apropos .smg-frise::before {
		display: none;
	}

	.smg-frise__jalon {
		padding: 0 0 24px 28px;
		text-align: left;
	}

	.smg-frise__jalon:last-child {
		padding-bottom: 0;
	}

	.smg-frise__jalon::before {
		top: 8px;
		left: 0;
		margin-left: 0;
	}

	.smg-frise__jalon::after {
		content: "";
		position: absolute;
		top: 14px;
		bottom: -14px;
		left: 5px;
		width: 2px;
		background: #218663;
	}

	.smg-frise__jalon:last-child::after {
		display: none;
	}

	.smg-frise__annee {
		font-size: 24px;
	}

	.smg-apropos .smg-apropos-bouton {
		width: 100%;
		text-align: center;
	}

	.smg-apropos .smg-domaines__bouton {
		width: auto;
	}
}

/* ============================================================================
   12. C-22 — page FAQ 100663.

   Sept sections posees par tools/c22-build-page-faq.php, chacune dans une
   section Elementor portant .smg-faq : l introduction (blanc), puis une
   section par rubrique, fonds #F2F2F2 et blanc alternes, titre en H2 et
   questions en accordeons (modele WAI-ARIA APG, comportement dans
   js/faq.js).

   PERIMETRE. Toutes les regles sont bornees par .smg-faq, que seul ce
   generateur pose. Aucun selecteur d identifiant d element Elementor. Une
   exception, justifiee en 12.1 et conditionnee a la presence de la derniere
   rubrique : la levee de la marge du pied de page.

   C-22.1 — bandeau panoramique en tete, classe racine .smg-faq-bandeau :
   composant Z1 de 99398, dont les regles de la section 11 (hauteurs,
   retrait nul, barre de titre) sont partagees par regroupement de
   selecteurs. Le texte superpose est pose en 12.1 bis.

   Langage de la section 11 (99398) : rythme 80 / 64 / 48 px, largeur de
   contenu 1100 px, H2 au filet vert, Poppins seule, vert #218663 pour les
   liens, aucune ombre, aucune transition, aucun titre en capitales. Rayon
   10 px pour les panneaux. Anneau de focus : celui de C-8 (accueil.css,
   7 quater).
   ========================================================================= */

/* ------------------------------------------ 12.1 Zones, rythme, largeur */

.elementor-section.smg-faq {
	padding: 80px 20px;
}

.elementor-section.smg-faq--blanc {
	background-color: #ffffff;
}

.elementor-section.smg-faq--gris {
	background-color: #f2f2f2;
}

.elementor-section.smg-faq > .elementor-container {
	max-width: 1100px;
}

/* Pas de vide supplementaire avant le pied de page : meme cause et meme
   remede qu en 11.1. Mesure C-22 a 1440 : 80 px de retrait de la derniere
   rubrique, puis 60 px de marge haute de « #bwp-footer », soit 140 px de
   blanc. Seule regle de la section qui vise un element hors de .smg-faq ;
   conditionnee a la presence de la rubrique JetBrains, donc a cette page. */
body:has(.smg-faq-jetbrains) #bwp-footer {
	margin-top: 0;
}

/* L introduction suit le bandeau (C-22.1) : l ecart reprend la transition
   Z1 -> Z2 de 99398, 72 px en bureau, puis 64 et 48 px par le retrait
   general de .smg-faq aux largeurs reduites. */
.elementor-section.smg-faq-introduction {
	padding-top: 72px;
	padding-bottom: 56px;
}

/* --------------------------------------------- 12.1 bis Bandeau (C-22.1) */

/* Le bandeau est le composant Z1 de 99398 : hauteurs 360 / 280 / 200 px,
   absence de retrait et levee de la marge de la barre de titre sont
   partagees avec .smg-apropos-z1 en section 11. Seul le texte superpose est
   pose ici.

   Le cadre suit le bord gauche du contenu des rubriques : conteneur de
   1140 px moins 20 px de retrait, soit le bord du conteneur de 1100 px
   des sections .smg-faq a toutes les largeurs. */
.elementor-section.smg-faq-bandeau > .elementor-container {
	max-width: 1140px;
	height: 100%;
}

.smg-faq-bandeau .smg-faq-bandeau__cadre {
	display: flex;
	align-items: center;
	height: 360px;
	padding: 0 20px;
}

/* Sur l aplat vert, a gauche du visage et sous le trait lumineux, a toutes
   les largeurs. Noir sur le vert le plus sombre de la zone : contraste
   mesure au compte rendu de C-22.1, au-dessus de 4,5:1 sans voile. Poppins
   600, sans capitales ni ombre. */
.smg-faq-bandeau .smg-faq-bandeau__texte {
	max-width: none;
	margin: 0;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.2;
	color: #000000;
}

/* --------------------------------------------------------- 12.2 Textes */

/* 68 signes par ligne au plus, comme en 11.2 : #636363 sur blanc 5,9:1,
   sur #F2F2F2 5,4:1. */
.smg-faq p {
	max-width: 31em;
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.7;
	color: #636363;
}

.smg-faq .smg-faq-intro {
	max-width: 38em;
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: #333333;
}

.smg-faq a {
	color: #218663;
	text-decoration: underline;
}

.smg-faq a:hover,
.smg-faq a:focus {
	text-decoration: none;
}

/* Le numero ne se coupe pas entre ses groupes de chiffres. */
.smg-faq .smg-faq-numero {
	white-space: nowrap;
}

.smg-faq .smg-faq-h2 {
	margin: 0 0 28px;
	color: #000000;
	text-transform: none;
}

.smg-faq .smg-faq-h2::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: 16px;
	border-radius: 2px;
	background: #218663;
}

/* ---------------------------------------------------- 12.3 Accordeons */

/* Une colonne de panneaux, bornee a 860 px : la question tient sur une ou
   deux lignes, la reponse garde sa borne de 31 em. */
.smg-faq-liste {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 860px;
}

.smg-faq-element {
	border-radius: 10px;
	background: #f2f2f2;
}

.smg-faq--gris .smg-faq-element {
	background: #ffffff;
}

.smg-faq .smg-faq-question {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	text-transform: none;
}

/* Le bouton occupe toute la largeur du panneau : toute la ligne de la
   question est cliquable. Les proprietes du bouton du theme sont remises a
   plat (fond, bordure, capitales, hauteur). La marge de defilement laisse la
   question visible sous l en-tete quand un fragment l ouvre. */
.smg-faq .smg-faq-bouton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 20px 24px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #333333;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	scroll-margin-top: 100px;
}

.smg-faq .smg-faq-bouton:hover {
	background: transparent;
	color: #218663;
}

/* Anneau de C-8 : filet blanc puis vert fonce, au clavier seulement. */
.smg-faq .smg-faq-bouton:focus {
	outline: none;
}

.smg-faq .smg-faq-bouton:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff, 0 0 0 5px #1a6b4f;
}

/* Indicateur d ouverture, decoratif (aria-hidden) : un plus trace par deux
   traits, dont le vertical disparait quand le panneau est ouvert. Pilote par
   aria-expanded, seul etat de verite. */
.smg-faq-indicateur {
	position: relative;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}

.smg-faq-indicateur::before,
.smg-faq-indicateur::after {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	width: 16px;
	height: 2px;
	border-radius: 1px;
	background: #218663;
}

.smg-faq-indicateur::after {
	transform: rotate(90deg);
}

.smg-faq-bouton[aria-expanded="true"] .smg-faq-indicateur::after {
	display: none;
}

.smg-faq-reponse {
	padding: 0 24px 20px;
}

.smg-faq-reponse[hidden] {
	display: none;
}

.smg-faq .smg-faq-reponse p:last-child {
	margin-bottom: 0;
}

/* LOT-5 (PO-5a) — liste dans une reponse : corps et rythme des paragraphes
   de 12.2 ; sans cette regle, le theme la rend en 13 px, sans marge basse. */
.smg-faq .smg-faq-reponse ul {
	max-width: 31em;
	margin: 0 0 16px;
	padding-left: 1.5em;
	font-size: 16px;
	line-height: 1.7;
	color: #636363;
	list-style: disc;
}

.smg-faq .smg-faq-reponse li {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: #636363;
}

/* ------------------------------------------- 12.4 Largeurs reduites */

@media (max-width: 1199px) {
	.elementor-section.smg-faq {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.elementor-section.smg-faq-introduction {
		padding-top: 64px;
		padding-bottom: 48px;
	}

	.smg-faq-bandeau .smg-faq-bandeau__cadre {
		height: 280px;
	}

	.smg-faq-bandeau .smg-faq-bandeau__texte {
		font-size: 32px;
	}
}

@media (max-width: 767px) {
	.elementor-section.smg-faq {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.elementor-section.smg-faq-introduction {
		padding-top: 48px;
		padding-bottom: 40px;
	}

	/* Deux lignes, « Foire aux » puis « questions », dans l aplat vert. */
	.smg-faq-bandeau .smg-faq-bandeau__cadre {
		height: 200px;
	}

	.smg-faq-bandeau .smg-faq-bandeau__texte {
		max-width: 6em;
		font-size: 26px;
	}

	.smg-faq .smg-faq-intro {
		font-size: 17px;
	}

	.smg-faq .smg-faq-bouton {
		padding: 16px 18px;
		font-size: 16px;
	}

	.smg-faq-reponse {
		padding: 0 18px 18px;
	}
}