/*
 * Correctifs de mise en page appliqués à tout le site.
 *
 * Cette feuille est chargée après les styles générés par Avada : à
 * spécificité égale, c'est elle qui l'emporte. Les sélecteurs restent donc
 * volontairement simples, sans « !important ».
 */

/* --------------------------------------------------------------------------
 * 1. Libellé des boutons : aligné sur le sens de lecture
 *
 * Avada centre le texte de tous ses boutons (« .fusion-button{text-align:center} »).
 * Sur un libellé d'une seule ligne cela ne se voit pas — le bouton épouse son
 * texte. Dès qu'il passe à la ligne, en revanche, le centrage saute aux yeux :
 * « Parlons de votre projet » dans une colonne étroite, ou un bouton pleine
 * largeur sur mobile.
 *
 * « start » suit la direction du document : à gauche en français, à droite
 * dans la version arabe (<html dir="rtl">), sans deuxième règle à maintenir.
 * ------------------------------------------------------------------------ */
.fusion-button,
.fusion-button .fusion-button-text,
.fusion-button .awb-button__text {
	text-align: start;
}

/* --------------------------------------------------------------------------
 * 2. Réalisations : un rail horizontal
 *
 * Les quatre cartes occupent chacune un tiers de la rangée : trois tiennent,
 * la quatrième retombe seule à la ligne suivante. Plutôt que de les rétrécir
 * ou d'en cacher une, on les aligne sur un rail qui défile.
 *
 * Mesuré sur le site : les cartes gardent un tiers de largeur de 641 px
 * jusqu'à 1024 px, donc l'orpheline est là sur tablette aussi, pas seulement
 * sur grand écran. Le rail couvre donc toute cette plage — trois cartes de
 * front au-dessus de 1025 px, deux en dessous. À 640 px et moins, Avada passe
 * les colonnes en pleine largeur : la piste redevient une simple pile et rien
 * ne change sur téléphone.
 *
 * Le balisage est posé par helala.js : sans JavaScript, les colonnes restent
 * dans la rangée d'origine et la page s'affiche comme avant.
 * ------------------------------------------------------------------------ */
.helala-rail {
	width: 100%;
	position: relative;
	/* Les colonnes d'en-tête de la rangée portent un ordre explicite — titre,
	   chapô, bouton. Les cartes n'en portaient aucun, donc zéro : elles
	   remontaient au niveau du titre sur tablette, avant le chapô censé les
	   présenter. Depuis qu'elles sont regroupées, c'est le rail qui est
	   l'enfant de la rangée : c'est donc à lui de passer en dernier. */
	order: 3;
}

.helala-rail__piste {
	display: flex;
	flex-wrap: wrap;
}

.helala-rail__nav {
	display: none;
}

@media only screen and (min-width: 641px) {

	.helala-rail__piste {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		/* Le liseré de mise au point du clavier ne doit pas être rogné. */
		padding-block: 3px;
		/* La barre de défilement native ferait doublon avec les flèches. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.helala-rail__piste::-webkit-scrollbar {
		display: none;
	}

	/* Le quart de carte qui dépasse est ce qui dit au lecteur qu'il y a une
	   suite, avant même qu'il ne remarque les flèches : deux cartes de front
	   sur tablette, trois sur grand écran (voir plus bas). */
	.helala-rail__piste > .fusion-layout-column {
		flex: 0 0 calc(100% / 2.25);
		width: calc(100% / 2.25);
		max-width: none;
		scroll-snap-align: start;
	}

	.helala-rail__nav {
		display: flex;
		align-items: center;
		/* Le compteur à gauche, les flèches à droite : la barre du bas tient
		   la même largeur que la piste et l'encadre au lieu de flotter. */
		justify-content: space-between;
		margin-top: 20px;
	}

	.helala-rail__fleches {
		display: flex;
		gap: 10px;
	}

	/* Les flèches empruntent la couleur du texte de la section : elles restent
	   lisibles aussi bien sur le bleu marine des réalisations que sur un fond
	   clair, sans avoir à décliner une variante par page. */
	.helala-rail__fleche {
		width: 44px;
		height: 44px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid currentColor;
		border-radius: 50%;
		background: transparent;
		color: inherit;
		cursor: pointer;
		opacity: 0.55;
		transition: opacity 0.2s ease, background-color 0.2s ease;
	}

	.helala-rail__fleche:hover,
	.helala-rail__fleche:focus-visible {
		opacity: 1;
		background-color: rgba(127, 127, 127, 0.18);
	}

	.helala-rail__fleche[disabled] {
		opacity: 0.2;
		cursor: default;
	}

	.helala-rail__fleche svg {
		width: 18px;
		height: 18px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* En arabe, la flèche « suivant » doit pointer vers la gauche. */
	[dir="rtl"] .helala-rail__fleche svg {
		transform: scaleX(-1);
	}
}

@media (prefers-reduced-motion: reduce) {

	.helala-rail__piste {
		scroll-behavior: auto;
	}
}

@media only screen and (min-width: 1025px) {

	.helala-rail__piste > .fusion-layout-column {
		flex-basis: calc(100% / 3.25);
		width: calc(100% / 3.25);
	}
}

/* --------------------------------------------------------------------------
 * 3. Anneau de mise au point  —  règle 7.1
 *
 * Le thème pose « fusion-disable-outline » sur le <body> et quinze règles de
 * la feuille servie écrivent « outline: 0 » sur « :focus » — boutons, champs
 * de formulaire, liens du menu déroulant. Quelqu'un qui navigue au clavier ne
 * sait plus où il se trouve, et c'est la page de contact qui en souffre le
 * plus : un formulaire dont on ne voit pas le champ actif est un formulaire
 * qu'on abandonne. Critère 2.4.7, niveau AA.
 *
 * « :focus-visible » plutôt que « :focus » : l'anneau apparaît pour qui
 * navigue au clavier et reste invisible au clic à la souris — c'est
 * précisément la gêne qui avait fait couper l'option.
 *
 * Deux pixels et un décalage, pour satisfaire le critère 2.4.11 de WCAG 2.2 :
 * l'indicateur doit valoir au moins un contour de 2 px et contraster à 3:1.
 * Le bleu d'action donne 5,88:1 sur blanc.
 * ------------------------------------------------------------------------ */
/* « !important » est ici délibéré, et c'est le seul de cette feuille. Le thème
   étale « outline: 0 » sur une quinzaine de sélecteurs longs, certains plus
   spécifiques que tout ce qu'on peut écrire raisonnablement ici — vérifié à la
   tabulation : sans cette forcée, les liens recevaient l'anneau mais ni les
   boutons ni les champs du formulaire de contact. Une règle d'accessibilité ne
   doit pas dépendre de l'issue d'un concours de spécificité. */
.fusion-body :focus-visible,
.fusion-disable-outline :focus-visible,
.fusion-disable-outline .fusion-button:focus-visible,
.fusion-disable-outline .button:focus-visible,
.fusion-disable-outline input:focus-visible,
.fusion-disable-outline select:focus-visible,
.fusion-disable-outline textarea:focus-visible,
.fusion-disable-outline [tabindex]:focus-visible {
	/* Propriétés détaillées plutôt que le raccourci : un raccourci qui contient
	   un var() est résolu d'un bloc, et s'il échoue c'est la déclaration
	   entière qui tombe. Écrites séparément, la largeur et le style tiennent
	   même si la couleur est remplacée ailleurs. */
	outline-width: 2px !important;
	outline-style: solid !important;
	outline-color: #2862BD !important;
	outline-offset: 2px !important;
	border-radius: 2px;
}

/* Piège mesuré au passage, noté pour la prochaine fois : les champs du
   formulaire portent « transition: all .2s ease ». Une sonde qui lit leur
   style 90 ms après la tabulation les surprend au milieu de la transition et
   rapporte un anneau de 1,41 px là où il en fait 2 — de quoi croire à un
   conflit de cascade qui n'existe pas. On laisse la transition finir avant de
   mesurer. */

/* Sur le marine, le bleu d'action tombe à 1,93:1 : l'anneau y serait invisible.
   On bascule au blanc, qui donne 11,37:1 sur ce fond. */
.fusion-fullwidth[style*="--awb-background-color:var(--awb-color7)"] :focus-visible,
.fusion-fullwidth[style*="background-color:rgb(33, 58, 98)"] :focus-visible,
.fusion-fullwidth[style*="#213A62"] :focus-visible,
.fusion-fullwidth[style*="#213a62"] :focus-visible {
	outline-color: #ffffff !important;
}

/* --------------------------------------------------------------------------
 * 4. Mouvement réduit  —  règle 4.5
 *
 * Avada ne tient compte de « prefers-reduced-motion » que pour ses onglets,
 * ses témoignages, ses titres animés et ses blocs repliables. Les vingt-six
 * animations d'entrée de la page d'accueil, elles, tournent quand même :
 * vérifié, « fadeInRight » 1,6 s et « fadeInUp » 1,5 s étaient encore en cours
 * d'exécution avec le réglage actif.
 *
 * On ne met pas tout à zéro — un bloc qui surgit sans transition donne
 * l'impression d'un défaut d'affichage. On garde le fondu, on supprime le
 * déplacement, on raccourcit à 150 ms.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

	.fusion-body [data-animationtype],
	.fusion-body .fusion-animated {
		animation-name: fadeIn !important;
		animation-duration: .15s !important;
		animation-delay: 0s !important;
	}

	.fusion-body *,
	.fusion-body *::before,
	.fusion-body *::after {
		transition-duration: .15s !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
 * 5. Longueur des lignes  —  règle 2.4
 *
 * Mesuré : médiane à 41 caractères sur l'accueil, maximum à 180 ; et sur la
 * page À propos, vingt-six paragraphes au-delà de 80. Le plafond s'applique
 * partout — dans une colonne de carte il ne change rien, puisque la colonne
 * est déjà plus étroite que 68 caractères.
 *
 * Le bloc reste calé au début de la ligne ; il n'est recentré que si son texte
 * l'était, sans quoi on décalerait des paragraphes alignés à gauche.
 * ------------------------------------------------------------------------ */
.fusion-text p,
.fusion-text ul,
.fusion-text ol {
	max-width: 68ch;
}

/* Un bloc dont le texte était centré doit le rester : sans cette reprise, le
   plafond le collerait au début de la ligne. Les colonnes étroites, elles, ne
   voient aucune différence — elles sont déjà plus étroites que 68 caractères. */
.fusion-text.text-align-center p,
.fusion-text.md-text-align-center p,
.fusion-text.sm-text-align-center p,
[style*="text-align:center"] .fusion-text p,
.fusion-text[style*="text-align:center"] p,
.fusion-text.text-align-center ul,
.fusion-text.text-align-center ol {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
 * 6. Taille de saisie  —  règle 2.5
 *
 * En dessous de 16 px, iOS agrandit la page dès qu'on touche un champ, et le
 * visiteur perd le formulaire de vue au moment précis où il allait le remplir.
 * Le plancher ne s'applique qu'aux champs : le reste de l'échelle est libre.
 * ------------------------------------------------------------------------ */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
	font-size: max(16px, 1em);
}

/* --------------------------------------------------------------------------
 * 7. Gouttière minimale  —  règle 5.4 : écart constaté, non corrigé ici
 *
 * Mesuré aux quatre largeurs de contrôle : la rangée de contenu laisse 23 px
 * de marge à 390, 16 à 768, 65 à 1440 — mais 11 seulement à 1024 px, et la
 * page Contact descend à -10 px en dessous de 1440.
 *
 * Tentative abandonnée : plafonner la largeur de la rangée par une règle de
 * cette feuille reste sans effet, parce qu'Avada écrit cette largeur en style
 * en ligne sur l'élément — ce qui bat n'importe quel sélecteur. La corriger
 * demanderait soit un « !important » de plus, soit de toucher au réglage de
 * largeur du conteneur dans les options du thème. Cinq pixels à une seule
 * largeur ne valent ni l'un ni l'autre : l'écart est noté, pas masqué.
 * ------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
 * 8. Constats de la revue visuelle, tour 12
 * ------------------------------------------------------------------------ */

/* 8a. Le bouton secondaire n'avait pas de forme.
 *
 * Mesuré : fond « rgba(255,240,235,0) », donc entièrement transparent, et une
 * bordure de 0 px. Seul le texte bleu signalait qu'il se passait quelque chose,
 * pour un rapport de 1,05:1 entre la surface du bouton et la page. Sur le
 * premier écran mobile, c'était le seul bloc cliquable visible.
 *
 * On lui rend un contour. Le sélecteur vise la valeur transparente écrite en
 * ligne par le thème : les boutons pleins, eux, ne sont pas touchés. */
a.fusion-button[style*="--button_gradient_top_color:rgba(255,240,235,0)"],
a.fusion-button[style*="--button_gradient_top_color:rgba(255, 240, 235, 0)"],
a.fusion-button[style*="--button_gradient_top_color:rgba(255,255,255,0)"] {
	border-width: 1px;
	border-style: solid;
	border-color: var(--awb-color5);
}

/* 8b. Aucun libellé de bouton ne se coupe en deux lignes.
 *
 * Mesuré au tour 12 : « Nous contacter » tenait dans une boîte de 139 × 74 px
 * pour deux mots, alors que 178 px étaient libres à sa gauche ; « Parlons de
 * votre projet » se cassait de même dans la section des réalisations.
 *
 * La première tentative visait « .fusion-header », qui n'existe pas sur ce
 * site : l'en-tête est une section du constructeur Avada, pas le balisage
 * classique du thème. D'où une règle qui ne s'appliquait à rien. On vise donc
 * le bouton lui-même, partout.
 *
 * L'alignement du libellé reste « start » — c'est une demande explicite, pas
 * un défaut : voir la règle 1 en tête de cette feuille. */
.fusion-button {
	white-space: nowrap;
}

/* 8c. Le bouton de retour en haut : traité dans la migration 022.
 *
 * La règle écrite ici au tour 12 ne pouvait pas gagner : le thème l'habille
 * par « .to-top-container #toTop », plus spécifique qu'un simple « #toTop ».
 * Sa couleur et son arrondi viennent d'options du thème — c'est là qu'on les
 * change, plutôt qu'en surenchérissant sur les sélecteurs. */

/* 8d. Les cases à cocher du formulaire faisaient 15 px de côté.
 *
 * Le critère 2.5.8 de WCAG 2.2 demande 24 px au minimum, et sur un téléphone
 * tenu d'une main, viser 15 px entre deux options espacées de 31 px produit
 * des erreurs de sélection. On agrandit la case et on aère les options. */
.fusion-form-field input[type="checkbox"],
.fusion-form-field input[type="radio"],
.fusion-form-checkbox input,
.fusion-form-radio input {
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	accent-color: var(--awb-color5);
}

.fusion-form-field label,
.fusion-form-checkbox label,
.fusion-form-radio label {
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

/* 8e. Dans une rangée de cartes, les boutons s'alignent sur le bas.
 *
 * Mesuré : sur quatre rangées de Services et Produits, le bouton d'une carte
 * se retrouvait 31 px plus haut que ses voisins, simplement parce que son
 * texte tenait sur une ligne de moins. Les cartes, elles, se terminent bien à
 * la même hauteur. Dans une grille de tarifs, l'œil compare ligne à ligne :
 * un bouton qui flotte plus haut se lit comme un défaut de montage.
 *
 * On pousse donc le dernier bloc de la carte vers le bas quand ce bloc est un
 * bouton. « :has() » est disponible dans tous les navigateurs depuis 2023. */
.fusion-column-wrapper.fusion-content-layout-column {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.fusion-column-wrapper.fusion-content-layout-column > div:last-child:has(> .fusion-button) {
	margin-top: auto;
}

/* 8f. Le bouton d'envoi du formulaire faisait 1 200 px de large.
 *
 * Pour un libellé de 190 px, il perdait sa forme de bouton et devenait une
 * barre. Sous 1024 px la pleine largeur reste le bon choix : on ne borne
 * qu'au-dessus. */
@media only screen and (min-width: 1025px) {

	.fusion-form-form-wrapper .fusion-button,
	.fusion-form-submit-field .fusion-button {
		max-width: 320px;
	}
}

/* 8g. L'astérisque des champs obligatoires ne se souligne pas.
 *
 * Celui de « Budget du projet » était rendu en pointillés, parce qu'il est
 * balisé « abbr » — le navigateur y voit une abréviation et promet une
 * explication au survol, qui n'existe pas. */
.fusion-form-field abbr,
.fusion-form-label abbr {
	text-decoration: none;
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
 * 9. Constats de la revue visuelle, tour 14
 * ------------------------------------------------------------------------ */

/* 9a. Le retour en haut avait disparu sur les fonds marine — effet de bord.
 *
 * La migration 022 lui a donné le marine de la charte, ce qui règle le gris du
 * thème sur fond clair mais le rend invisible là où il passe le plus de temps :
 * le formulaire de contact, la section des réalisations, le pied de page. Un
 * contrôle d'interface doit garder 3:1 avec son fond.
 *
 * On lui ajoute un filet d'or clair : 5,92:1 sur le marine, où il devient la
 * seule limite visible ; sur fond blanc c'est le remplissage marine qui porte
 * le contraste, à 11,37:1. Une seule valeur couvre les deux cas. */
#toTop {
	border: 1px solid #D4B87A;
}

/* 9b. Les quatre expertises démarraient leur paragraphe à deux hauteurs.
 *
 * « Sites web » et « Publicité en ligne » tiennent sur une ligne, les deux
 * autres sur deux : 27 px d'écart, en dents de scie sur toute la rangée. On
 * réserve la place de deux lignes au titre pour que les quatre paragraphes
 * partent du même point. Sous 1025 px les colonnes s'empilent et la question
 * ne se pose plus. */
@media only screen and (min-width: 1025px) {

	/* On vise le titre qui suit immédiatement une illustration : c'est la
	   définition d'une carte sur ce site, et ça évite d'ajouter de la hauteur
	   sous les titres de section, qui n'en ont pas besoin. Tous les niveaux,
	   parce que les cartes de l'accueil et celles de Services n'emploient pas
	   le même. */
	/* Hauteur réservée, et rien d'autre.
	   La première version passait aussi ces titres en « flex » pour les caler
	   en bas de leur boîte. Effet de bord mesuré sur téléphone : le titre,
	   devenu conteneur flex, se rétrécissait sur son plus long mot — 195 px
	   dans une colonne de 286 — et « Référencement » se coupait en deux au
	   milieu. Le calage en bas ne valait pas ça. */
	.fusion-image-element + .fusion-title h2,
	.fusion-image-element + .fusion-title h3,
	.fusion-image-element + .fusion-title h4,
	.fusion-image-element + .fusion-title h5 {
		min-height: 2.4em;
	}
}

/* 9c. La case à cocher était posée 7 px sous l'axe de son libellé.
 *
 * La règle du tour 12 mettait le libellé en flex, mais la case n'est pas dans
 * le libellé : les deux sont frères. C'est donc leur conteneur qu'il faut
 * aligner. */
.fusion-form-checkbox,
.fusion-form-radio,
.fusion-form-field .option-inline {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* 9d. L'astérisque pointillé, deuxième tentative.
 *
 * Le sélecteur du tour 13 ne visait que les « abbr » à l'intérieur d'un champ
 * ou d'un libellé de formulaire ; celui de « Budget du projet » est ailleurs
 * dans l'arbre. On neutralise la décoration sur tous les « abbr » du site :
 * aucun n'en a besoin, et le pointillé promet une explication au survol qui
 * n'existe nulle part ici. */
abbr,
abbr[title] {
	text-decoration: none;
	border-bottom: 0;
	cursor: inherit;
}

/* --------------------------------------------------------------------------
 * 10. Constats de la revue visuelle, tour 15
 * ------------------------------------------------------------------------ */

/* 10a. Un titre ne peut plus déborder de sa boîte.
 *
 * Garde-fou posé après une correction qui a mal tourné : lier « pas un
 * intermédiaire » par des espaces insécables, pour éviter un orphelin sur
 * mobile, a rendu la chaîne insécable au sens propre. Mesure à 390 px : le h1
 * demandait 481 px dans une boîte de 330, et se retrouvait coupé à l'écran.
 * Les insécables ont été retirés ; cette règle fait qu'un titre trop long ne
 * pourra plus jamais sortir de sa colonne, quelle qu'en soit la cause. */
h1, h2, h3, h4, h5, h6,
.fusion-title-heading {
	overflow-wrap: break-word;
}

/* 10b. L'astérisque des champs obligatoires, troisième tentative.
 *
 * Mesuré : il ne reste qu'un seul « abbr » sur la page de contact, et sa
 * décoration calculée vaut « underline » — donc une règle plus spécifique que
 * tout ce qu'on peut écrire raisonnablement ici gagne. Pour une propriété
 * cosmétique sur un seul élément, la forcer coûte moins cher que de continuer
 * à chercher laquelle. */
abbr,
abbr[title],
.fusion-form-field abbr,
.fusion-form-label abbr {
	text-decoration-line: none !important;
	border-bottom: 0 !important;
	cursor: inherit;
}

/* 10c. Les titres de cartes d'articles reviennent à la police de titre.
 *
 * Sur la page de contact, « Derniers articles » est en Syne comme toutes les
 * sections, mais les trois titres d'articles qui suivent étaient en DM Sans —
 * deux familles pour un même niveau, à deux cents pixels d'écart. Les cartes
 * de réalisations et de services, elles, sont bien en Syne. */
.fusion-post-card .fusion-title-heading,
.fusion-post-card h2,
.fusion-post-card h3,
.fusion-post-card h4,
.fusion-blog-layout-grid .entry-title,
.fusion-post-content .entry-title {
	font-family: var(--h2_typography-font-family), 'Syne', sans-serif;
}

/* --------------------------------------------------------------------------
 * 11. Premier écran de l'accueil — piste B
 *
 * La promesse en pleine largeur et centrée, les deux appels à l'action au
 * centre juste dessous, puis une bande de trois réalisations légendées.
 *
 * Avada enveloppe chaque bouton dans son propre bloc : deux boutons à la
 * suite s'empilent donc verticalement. Les rendre « inline-block » les remet
 * côte à côte, et le centrage de la colonne s'occupe du reste — sans inventer
 * de rangée interne, qui est précisément ce qui coinçait l'ancien bouton dans
 * une demi-colonne.
 * ------------------------------------------------------------------------ */
.helala-hero-mot {
	text-align: center;
}

/* Les deux appels à l'action côte à côte, centrés.
 *
 * Deux tentatives ont échoué avant celle-ci, et la cause vaut d'être notée :
 * la règle 8e, celle qui colle les boutons en bas des cartes, met le
 * conteneur de colonne en « flex » partout. Or un enfant de conteneur flex ne
 * peut pas être « inline-block » — le navigateur le repasse en bloc, et les
 * boutons s'empilent. Vérifié dans la page : le sélecteur touchait bien ses
 * deux éléments et la déclaration était bien chargée, l'affichage calculé
 * valait quand même « block ».
 *
 * Plutôt que de lutter contre ce flex, on s'en sert : la colonne devient une
 * rangée qui revient à la ligne, chaque bloc prend toute la largeur, et seuls
 * les deux boutons gardent leur largeur propre. Ils se retrouvent donc côte à
 * côte et centrés, sans dépendre de qui gagne la cascade. */
.helala-hero-mot .fusion-column-wrapper {
	display: flex;
	/* « !important » sur ce seul mot-clé, et voici pourquoi : le sens de la
	   colonne est posé par un style qu'Avada génère dans la page, donc après
	   cette feuille. Mesuré : « flex-flow » calculé valait « column wrap » —
	   le retour à la ligne venait bien d'ici, le sens non. */
	flex-direction: row !important;
	flex-wrap: wrap;
	/* Même origine, même remède : la classe « fusion-flex-justify-content-
	   flex-start » qu'Avada pose sur ce conteneur calait les deux boutons à
	   gauche au lieu de les centrer. */
	justify-content: center !important;
	align-content: flex-start;
	gap: 0 12px;
}

/* Le titre sur deux lignes équilibrées plutôt qu'une longue et un mot seul.
   « balance » répartit, la largeur maximale borne. Au-dessus de 640 px
   seulement : sur un téléphone, 18 caractères donneraient six lignes. */
.helala-hero-mot .fusion-title-heading {
	text-wrap: balance;
}

@media only screen and (min-width: 641px) {

	/* La largeur va sur le bloc de titre, pas sur le titre lui-même : mesuré,
	   « margin-inline: auto » posé sur le h1 ne passait pas — Avada lui impose
	   ses marges — et le titre restait calé à gauche, décentré de 200 px par
	   rapport à tout le reste du premier écran. Le bloc, lui, est un élément
	   de la rangée flex : le centrage de celle-ci s'en charge tout seul. */
	.helala-hero-mot .fusion-title {
		max-width: 18ch;
	}
}

.helala-hero-mot .fusion-column-wrapper > * {
	flex: 0 0 100%;
}

.helala-hero-mot .fusion-column-wrapper > div:has(> .fusion-button) {
	flex: 0 0 auto;
}

/* 52 caractères : plus court que la règle générale à 68, parce qu'un
   paragraphe centré se lit moins bien qu'un paragraphe aligné — l'œil doit
   retrouver un début de ligne qui se déplace à chaque fois. */
.helala-hero-mot .fusion-text p {
	max-width: 52ch;
	margin-inline: auto;
}

/* La ligne de preuve tient sur une seule ligne : elle est faite de trois
   mentions courtes séparées par des points médians, pas d'un paragraphe.
   Le sélecteur reprend le préfixe de la colonne, sans quoi il perd contre la
   borne à 52 caractères juste au-dessus. */
.helala-hero-mot .helala-preuve p {
	max-width: none;
}

.helala-preuve p {
	/* 16 px, pas 15 : c'est la seule ligne du premier écran qui traite le prix
	   et l'engagement, elle ne doit pas se lire comme une mention légale. */
	color: var(--awb-color6);
	font-size: 16px;
}

.helala-preuve strong {
	color: var(--awb-color7);
	font-weight: 700;
}

.helala-legende p {
	color: var(--awb-color6);
	text-align: center;
	margin: 0;
}

.helala-hero-carte .fusion-imageframe img {
	border-radius: 8px;
	box-shadow: 0 14px 34px -18px rgba(18, 24, 33, .45);
}

/* Sur téléphone, deux boutons côte à côte ne tiennent pas : on les empile en
   pleine largeur, ce qui en fait aussi des cibles confortables au pouce. */
@media only screen and (max-width: 640px) {

	.helala-hero-mot .fusion-column-wrapper > div:has(> .fusion-button) {
		flex: 0 0 100%;
		margin-bottom: 12px;
	}

	.helala-hero-mot .fusion-column-wrapper > div:has(> .fusion-button) .fusion-button {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
 * 12. Réalisations : la fiche projet — piste C de la planche de choix
 *
 * Le carrousel montrait quatre captures légendées, centrées, sans rien dire
 * de ce qui avait été fait. Un visiteur qui se demande « est-ce qu'il sait
 * monter une boutique en ligne ? » devait cliquer pour le savoir.
 *
 * Chaque carte est devenue une fiche : un numéro, la capture, le nom, ce que
 * c'est, puis trois étiquettes techniques. Les quatre ensemble disent que les
 * projets ne sortent pas tous du même moule — deux sites en Next.js, une
 * boutique PrestaShop, une boutique WooCommerce.
 *
 * L'essentiel de l'habillage n'est pas ici : le filet doré est porté par les
 * attributs de bordure de la colonne, et les pastilles par du style en ligne
 * dans le contenu, comme le lien « Voir le site » l'était déjà. La section
 * tient donc sans cette feuille — ce qui a servi le jour où l'API
 * d'hébergement est tombée alors que le contenu, lui, était déjà en ligne.
 *
 * Ne restent ici que les trois choses qu'un style en ligne ne sait pas dire.
 * ------------------------------------------------------------------------ */

/* « left » en dur dans le contenu serait faux en arabe. « start » suit la
   direction du document, comme pour les libellés de boutons (section 1). */
.helala-rea .fusion-title,
.helala-rea .fusion-text,
.helala-rea .fusion-text p {
	text-align: start;
}

/* Les descriptions font une ou deux lignes selon le projet. Sans hauteur
   réservée, les étiquettes et les liens des quatre fiches ne s'alignent pas.
   Une hauteur minimale, et rien d'autre : le « display: flex » du tour 14
   avait rétréci les titres sur leur plus long mot et coupé « Référencement »
   en deux. */
@media only screen and (min-width: 641px) {

	.helala-rea-desc {
		min-height: 2.8em;
	}
}

/* Le compteur est créé par helala.js : il n'a pas de contenu à habiller en
   ligne. « 01 / 04 » dit le volume avant qu'on ait fait défiler quoi que ce
   soit, là où deux flèches ne disent rien. */
.helala-rail__compte {
	/* DM Sans à chiffres tabulaires plutôt qu'une chasse fixe du système, qui
	   changeait de dessin d'un appareil à l'autre. Doré : 6:1 sur le marine,
	   là où le blanc à 62 % restait sous le seuil de lecture. */
	font-variant-numeric: tabular-nums;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .08em;
	color: #D4B87A;
	margin: 0;
}

/* --------------------------------------------------------------------------
 * 13. Bandeau du menu au marine — piste 1 de la planche de choix
 *
 * Le fond, la couleur du menu, celle des boutons, la hauteur et le logo blanc
 * sont tous passés dans le gabarit « Global Header ». Le logo devait venir
 * d'une migration sur l'option « logo » d'Avada ; l'API d'hébergement étant
 * tombée, il a été posé en dur dans le gabarit — ce qui vaut mieux de toute
 * façon, puisqu'il partage désormais son fichier avec le pied de page.
 *
 * Ne restent ici que les deux choses qu'un réglage d'Avada ne sait pas dire.
 * ------------------------------------------------------------------------ */

/* La page courante se signale par un filet doré posé sous le libellé. Avada
   ne propose que la couleur du texte : à lui seul, le doré sur marine ne
   suffit pas à distinguer la page active d'un simple survol. */
.fusion-tb-header .fusion-menu > li.current-menu-item > a::after,
.fusion-tb-header .fusion-menu > li.current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	height: 2px;
	background: #D4B87A;
}

.fusion-tb-header .fusion-menu > li > a {
	position: relative;
}

/* La taille du bouton « Nous contacter » est réglée avec tous les autres,
   section 15. */

/* --------------------------------------------------------------------------
 * 14. Constats de la revue visuelle, tour 17 — accueil
 * ------------------------------------------------------------------------ */

/* 14a. Les deux boutons du premier écran se touchaient sur grand écran.
   La règle « gap » de la section 11 était écrasée par la feuille générée
   d'Avada, qui écrit la sienne après la nôtre : écart mesuré « normal ». */
.helala-hero-mot .fusion-column-wrapper {
	column-gap: 12px !important;
}

@media only screen and (min-width: 641px) {

	.helala-hero-mot .helala-preuve {
		margin-top: 12px;
	}
}

/* 14b. Sur le marine, le bouton du menu mobile était un carré blanc à angles
   vifs. Même arrondi que les autres boutons blancs de l'en-tête. */
.fusion-tb-header .awb-menu__m-toggle {
	border-radius: 8px;
}

@media only screen and (min-width: 641px) {

	/* 14c. Compteur et flèches regroupés à droite, 16 px d'écart : 1 100 px
	   les séparaient, et plus personne ne les lisait comme une commande. */
	.helala-rail__nav {
		justify-content: flex-end;
		gap: 16px;
	}

	/* Contour doré plein au lieu du blanc à 55 % : la flèche « suivant » avait
	   un cercle plus sombre que son fond. L'état désactivé reste atténué. */
	.helala-rail__fleche {
		border-color: #D4B87A;
		color: #FFFFFF;
		opacity: 1;
	}

	.helala-rail__fleche[disabled] {
		opacity: .35;
	}

	.helala-rail__fleche:hover,
	.helala-rail__fleche:focus-visible {
		background-color: rgba(212, 184, 122, .16);
	}

	/* 14d. La quatrième fiche était coupée net au milieu d'un mot, au bord du
	   conteneur. Un fondu de 96 px en fait une suite annoncée plutôt qu'un
	   débordement. helala.js le retire quand on arrive au bout. */
	.helala-rail:not(.helala-rail--fin) .helala-rail__piste {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 96px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 96px), transparent);
	}
}

/* 14e. Un même rapport d'image pour les quatre fiches. Recadrées sur leur
   encre, les captures n'ont plus toutes la même proportion — Hamza, rognée
   de sa bande claire, est plus basse — et les noms des fiches ne tombaient
   plus sur la même ligne. On cadre sur le haut de la page capturée, qui porte
   le logo et le titre du site. */
.helala-rea .fusion-imageframe img {
	aspect-ratio: 676 / 446;
	object-fit: cover;
	object-position: top center;
	width: 100%;
}

/* --------------------------------------------------------------------------
 * 15. Un seul gabarit de bouton pour tout le site
 *
 * Mesuré sur l'accueil : treize boutons, sept hauteurs de 43 à 65 px, trois
 * tailles de texte (14, 15, 18 px), deux arrondis (8 et 13 px). Avada les tire
 * de quatre tailles de thème (« medium », « large », « xlarge », et la valeur
 * par défaut du formulaire), réglées bouton par bouton dans le contenu.
 *
 * Plutôt que de retoucher chaque bouton et de recommencer au prochain ajout,
 * on impose ici une seule taille : 48 px de haut, texte 16 px, 28 px de marge
 * horizontale, arrondi 8 px. La largeur suit le libellé — seule la hauteur,
 * le texte et la forme sont communs.
 *
 * « !important » est nécessaire : Avada écrit les marges et la taille de texte
 * en variables CSS dans l'attribut style de chaque bouton, et une variable en
 * ligne l'emporte sur toute règle de feuille.
 * ------------------------------------------------------------------------ */
.fusion-button,
.fusion-form-submit-field .fusion-button,
.fusion-form button[type="submit"] {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	height: 48px !important;
	padding: 0 28px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	border-radius: 8px !important;
}

.fusion-button .fusion-button-text,
.fusion-button .awb-button__text {
	font-size: 16px !important;
	line-height: 1.2 !important;
}

/* Le champ e-mail à côté de « S'inscrire » prend la même hauteur : le bouton
   de 65 px et le champ de 70 px n'étaient alignés ni en haut ni en bas. */
.fusion-form .fusion-form-field input[type="email"],
.fusion-form .fusion-form-field input[type="text"] {
	height: 48px;
	min-height: 48px;
}

/* --------------------------------------------------------------------------
 * 16. Sur mobile, ce qui est seul sur sa ligne est centré
 *
 * Mesuré sur l'accueil à 390 px : onze éléments seuls sur leur ligne et calés
 * à gauche — titres de section, boutons « Un projet ? Parlons-en. »,
 * « Parlons de votre projet », « En savoir plus sur nous », les trois
 * « Lire l'article » — avec jusqu'à 158 px de vide à droite. Sous 641 px tout
 * s'empile sur une seule colonne : un bloc calé à gauche n'y répond plus à
 * rien, alors que le premier écran, lui, est centré.
 *
 * On centre donc titres, textes et boutons de chaque colonne empilée. Restent
 * alignés au sens de lecture : les fiches projet (numéro, étiquettes et lien
 * forment une fiche qui se lit comme un tableau), les formulaires et les
 * listes.
 *
 * Au-dessus de 640 px, les sections en deux colonnes gardent leur alignement :
 * centrer le seul bouton sous un paragraphe aligné à gauche décalerait les
 * bords au lieu de les régler.
 * ------------------------------------------------------------------------ */
@media only screen and (max-width: 640px) {

	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-title,
	.fusion-tb-footer .fusion-title {
		justify-content: center !important;
		text-align: center !important;
	}

	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-title .title-heading-left,
	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-title h1,
	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-title h2,
	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-title h3,
	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-title h4 {
		text-align: center !important;
	}

	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-text,
	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-text p {
		text-align: center !important;
	}

	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-text ul,
	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-text ol,
	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-text li {
		text-align: start !important;
	}

	/* Le bouton est dans un bloc pleine largeur : c'est le bloc qu'on centre. */
	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-column-wrapper > div:has(> .fusion-button),
	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-button-wrapper,
	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-post-cards .fusion-button {
		text-align: center !important;
		justify-content: center !important;
		align-self: stretch;
	}

	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-column-wrapper > div:has(> .fusion-button) > .fusion-button {
		margin-inline: auto;
	}

	/* Images et icônes seules : centrées dans leur colonne. */
	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-image-element,
	#wrapper .fusion-layout-column:not(.helala-rea) .fontawesome-icon {
		text-align: center !important;
		margin-inline: auto !important;
	}

	/* Les formulaires restent lisibles de haut en bas, alignés au sens de lecture. */
	#wrapper .fusion-form,
	#wrapper .fusion-form .fusion-text,
	#wrapper .fusion-form .fusion-text p {
		text-align: start !important;
	}
}

/* --------------------------------------------------------------------------
 * 17. Constats de la revue visuelle, tour 19 (1/5) — accueil
 * ------------------------------------------------------------------------ */

/* 17a. « S'inscrire » occupait toute sa colonne de formulaire (171 px pour un
   libellé de 75 px, 283 px sur mobile) : seul bouton dont la largeur ne
   suivait pas le libellé. */
.fusion-form-submit-field .fusion-button,
.fusion-form button[type="submit"] {
	width: auto !important;
	min-width: 0 !important;
}

@media only screen and (max-width: 640px) {

	.fusion-form-submit-field > div {
		text-align: center !important;
	}

	/* 17b. Dans une colonne en flex « rangée », le bloc du bouton se
	   rétrécissait à la taille du bouton : plus rien à centrer dedans.
	   Largeur 100 % et base automatique — surtout pas « flex: 0 0 100% » :
	   dans une colonne en flex vertical, ce 100 % devient une hauteur. Écrit
	   ainsi au tour 19, il a fait réclamer au bloc du bouton toute la hauteur
	   des cartes d'articles (image poussée hors cadre) et de la section « Une
	   agence qui démarre » (texte par-dessus la section précédente). */
	#wrapper .fusion-layout-column:not(.helala-rea) .fusion-column-wrapper > div:has(> .fusion-button) {
		flex-basis: auto !important;
		width: 100% !important;
	}
}

/* 17c. Les titres des cartes d'articles étaient en DM Sans : seul bloc de la
   page dont les titres n'étaient pas en Syne. */
.fusion-post-cards .fusion-title-heading,
.fusion-post-cards .fusion-title-heading a {
	font-family: "Syne", "Trebuchet MS", sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;
}

@media only screen and (max-width: 640px) {

	.fusion-post-cards .fusion-title-heading,
	.fusion-post-cards .fusion-title-heading a {
		font-size: 20px !important;
	}
}

/* --------------------------------------------------------------------------
 * 18. Constats de la revue visuelle, tour 20 (2/5) — accueil
 * ------------------------------------------------------------------------ */
@media only screen and (max-width: 640px) {

	/* 18a. Dans une colonne en mise en page « rangée » (flex horizontal),
	   blocs de texte et titres se rétrécissent à leur contenu et restent
	   calés à gauche : « Pourquoi travailler avec nous » occupait 247 px sur
	   291, centre décalé de 22 px, malgré « text-align: center ». Même remède
	   que 17b : la largeur, jamais la base flex. */
	#wrapper .fusion-content-layout-row:not(.helala-rea *) > .fusion-text,
	#wrapper .fusion-content-layout-row:not(.helala-rea *) > .fusion-title {
		width: 100% !important;
		flex-basis: auto !important;
	}
}

/* --------------------------------------------------------------------------
 * 19. Constats de la revue visuelle, tour 21 (3/5) — accueil
 * ------------------------------------------------------------------------ */
@media only screen and (max-width: 640px) {

	/* 19a. Les fiches projet étaient l'exception de la section 16 : restées
	   calées à gauche à 31 px, entre une introduction centrée et une section
	   centrée. La demande est de centrer tout élément seul sur sa ligne : on
	   centre donc aussi numéro, nom, description, étiquettes et lien. Le
	   filet doré, en pleine largeur, ne bouge pas. */
	.helala-rea .fusion-title,
	.helala-rea .fusion-title .fusion-title-heading,
	.helala-rea .fusion-text,
	.helala-rea .fusion-text p {
		text-align: center !important;
		justify-content: center !important;
	}

	.helala-rea .helala-rea-tags {
		justify-content: center !important;
	}
}

/* --------------------------------------------------------------------------
 * 20. Finitions, tour 22 (4/5) — accueil
 * ------------------------------------------------------------------------ */

/* 20a. Titres d'expertise sur deux hauteurs : « Référencement (SEO) » et
   « Applications sur mesure » passent sur deux lignes, les deux autres non,
   et les descriptions partaient en dents de scie (28 px d'écart). La règle 9b
   réservait déjà deux lignes, mais derrière une image : ici le titre suit une
   icône. Hauteur minimale seulement — jamais de « display: flex » (voir 9b). */
@media only screen and (min-width: 1025px) {

	.fb-icon-element + .fusion-title h3 {
		min-height: 2.4em;
	}
}

/* 20b. Fiches : la capture Hamza, plus large que les autres, était rognée
   (coins et pastille WhatsApp coupés). « contain » la montre entière dans le
   même cadre ; les trois autres ont déjà le bon rapport et ne changent pas. */
.helala-rea .fusion-imageframe img {
	object-fit: contain;
}

/* 20c. Copyright : la règle de longueur de ligne (section 5) rétrécit le
   paragraphe, qui restait collé à gauche pendant que son texte se centrait
   dedans — début à x 320, ni sous le logo ni au centre. On centre le
   paragraphe, et « pretty » évite « réservés. » seul sur sa ligne. Les
   lignes de coordonnées portent leur marge en ligne et ne bougent pas. */
.fusion-tb-footer .fusion-text p {
	margin-inline: auto;
	text-wrap: pretty;
}

@media only screen and (max-width: 640px) {

	/* 20d. Ligne de preuve : les points médians restaient accrochés en fin de
	   ligne. Sur mobile, un argument par ligne, sans séparateur. */
	.helala-preuve .helala-sep {
		display: none;
	}

	.helala-preuve p > span[style*="nowrap"] {
		display: block;
	}

	/* 20e. Les trois grandes captures (« Notre façon de travailler »,
	   « Transparence des prix », « Proximité locale ») faisaient 286, 325 et
	   300 px. Même largeur : toute la colonne. */
	.helala-capture,
	.helala-capture img {
		width: 100% !important;
		max-width: none !important;
	}

	/* 20f. Remplacé par la section 23 (rythme vertical). */

	/* 20g. « Parlons de votre projet » était à 20 px du filet doré de la
	   première fiche : il semblait lui appartenir. */
	.helala-rail {
		margin-top: 28px;
	}
}

/* 21. Remplacé par la section 23 (rythme vertical). */

/* --------------------------------------------------------------------------
 * 22. Premier écran sur mobile : la bande de réalisations en grille 2 × 2
 *
 * Les quatre captures s'empilaient en pleine largeur : environ 1 000 px de
 * défilement avant « Notre savoir-faire », pour des images reprises en détail
 * plus bas dans « Nos réalisations ». En grille de deux, la bande tient en
 * un demi-écran et garde son rôle : prouver d'un coup d'œil.
 *
 * Rangée flex horizontale : « width » et base automatique (voir 17b).
 * ------------------------------------------------------------------------ */
@media only screen and (max-width: 640px) {

	#wrapper .fusion-layout-column.helala-hero-carte {
		width: 50% !important;
		flex-basis: auto !important;
		padding-inline: 6px;
		margin-top: 12px;
	}

	.helala-hero-carte .helala-legende p {
		font-size: 13px !important;
		line-height: 1.35;
	}
}

/* --------------------------------------------------------------------------
 * 23. Rythme vertical de l'accueil — une seule grille
 *
 * Mesuré (audit/espacements.js) : entre deux sections, 199 à 342 px de vide
 * sur bureau et 107 à 249 px sur mobile. Chaque conteneur Avada portait sa
 * propre combinaison de marges et de remplissages — 128, 116, 104, 96, 8vw —
 * et elles s'additionnaient d'une section à l'autre.
 *
 * La grille, désormais aussi celle de la relecture (agent revue-ui) :
 *
 *                                   bureau   tablette   mobile
 *   entre deux sections               96        80        64
 *   dans une bande de couleur         96        80        64
 *   surtitre → titre                  12        10         8
 *   titre → texte                     20        18        16
 *   texte → bouton                    32        28        24
 *   icône → titre                     24        20        16
 *
 * Sections blanches : la moitié de l'écart en haut et en bas, aucune marge —
 * deux sections voisines font donc un écart entier. Bandes de couleur :
 * l'écart entier à l'intérieur, la moitié à l'extérieur. Les classes
 * « helala-sec » et « helala-bande » sont posées dans le contenu.
 *
 * Les écarts de texte sont réglés sur l'encre visible : une ligne de 18 px à
 * 1,72 d'interligne porte déjà 6 px de blanc au-dessus et au-dessous de ses
 * lettres, qu'on retranche des marges.
 * ------------------------------------------------------------------------ */
:root {
	--helala-sec: 96px;
	--helala-surtitre: 4px;
	--helala-titre-texte: 10px;
	--helala-texte-bouton: 24px;
	--helala-icone-titre: 24px;
}

@media only screen and (max-width: 1024px) {

	:root {
		--helala-sec: 80px;
		--helala-surtitre: 4px;
		--helala-titre-texte: 8px;
		--helala-texte-bouton: 24px;
		--helala-icone-titre: 20px;
	}
}

@media only screen and (max-width: 640px) {

	:root {
		--helala-sec: 64px;
		--helala-surtitre: 2px;
		--helala-titre-texte: 6px;
		--helala-texte-bouton: 16px;
		--helala-icone-titre: 16px;
	}
}

/* Sections. */
#main .fusion-fullwidth.helala-sec {
	padding-top: calc(var(--helala-sec) / 2) !important;
	padding-bottom: calc(var(--helala-sec) / 2) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

#main .fusion-fullwidth.helala-sec.helala-bande:not(.helala-bande--photo) {
	padding-top: var(--helala-sec) !important;
	padding-bottom: var(--helala-sec) !important;
	margin-top: calc(var(--helala-sec) / 2) !important;
	margin-bottom: calc(var(--helala-sec) / 2) !important;
}

/* Le premier écran garde son départ sous l'en-tête. */
#main .fusion-fullwidth.helala-sec--hero {
	padding-top: calc(var(--helala-sec) / 2) !important;
}

/* La dernière section touche le pied, qui est une bande : pas de marge du
   contenu principal en plus. */
#main {
	padding-bottom: 0 !important;
}

.fusion-tb-footer .fusion-fullwidth {
	padding-top: var(--helala-sec) !important;
	padding-bottom: var(--helala-sec) !important;
	margin-top: calc(var(--helala-sec) / 2) !important;
}

/* Surtitre → titre. */
#wrapper .helala-sec .fusion-text:has(+ .fusion-title) {
	margin-bottom: var(--helala-surtitre) !important;
}

#wrapper .helala-sec .fusion-text:has(+ .fusion-title) p {
	margin-bottom: 0 !important;
}

#wrapper .helala-sec .fusion-text + .fusion-title {
	margin-top: 0 !important;
}

/* Titre → texte, titre → grille d'articles. */
#wrapper .helala-sec .fusion-title:has(+ .fusion-text),
#wrapper .helala-sec .fusion-title:has(+ .fusion-post-cards) {
	margin-bottom: var(--helala-titre-texte) !important;
}

#wrapper .helala-sec .fusion-title + .fusion-text {
	margin-top: 0 !important;
}

/* Texte → bouton, sur toutes les largeurs (remplace 20f/21a/21b, qui ne
   valaient que sur mobile). */
#wrapper .helala-sec:not(.helala-sec--hero) .fusion-text:has(+ div > .fusion-button) {
	margin-bottom: 0 !important;
}

#wrapper .helala-sec:not(.helala-sec--hero) .fusion-text:has(+ div > .fusion-button) p:last-child {
	margin-bottom: 0 !important;
}

#wrapper .helala-sec:not(.helala-sec--hero) .fusion-column-wrapper > .fusion-text + div:has(> .fusion-button) {
	margin-top: var(--helala-texte-bouton) !important;
}

#wrapper .helala-sec:not(.helala-sec--hero) .fusion-column-wrapper > .fusion-text + div:has(> .fusion-button) > .fusion-button {
	margin-top: 0 !important;
}

/* Icône → titre. */
#wrapper .helala-sec .fb-icon-element {
	margin-bottom: var(--helala-icone-titre) !important;
}

#wrapper .helala-sec .fb-icon-element + .fusion-title {
	margin-top: 0 !important;
}

/* 23b. Titre → texte quand une variante de titre masquée (mobile ou bureau)
   s'intercale : la règle ci-dessus ne voyait pas le texte. Pied de page
   compris, qui n'est pas une « helala-sec ». */
#wrapper .helala-sec .fusion-title:has(+ .fusion-title + .fusion-text),
.fusion-tb-footer .fusion-title:has(+ .fusion-text) {
	margin-bottom: var(--helala-titre-texte) !important;
}

#wrapper .helala-sec .fusion-title + .fusion-title + .fusion-text,
.fusion-tb-footer .fusion-title + .fusion-text {
	margin-top: 0 !important;
}

/* 23c. Fiches projet : la hauteur réservée de 9b (titre après image) ne
   concerne pas des noms d'une ligne — 39 px entre le nom et la description.
   L'image prend en revanche l'écart icône → titre de la grille. */
.helala-rea .fusion-title h1,
.helala-rea .fusion-title h2,
.helala-rea .fusion-title h3,
.helala-rea .fusion-title h4,
.helala-rea .fusion-title h5 {
	min-height: 0 !important;
}

#wrapper .helala-rea .fusion-image-element + .fusion-title {
	margin-top: var(--helala-icone-titre) !important;
}

/* 23d. Titres d'expertise : la réservation de deux lignes (20a) creusait
   45 px sous les titres courts. À 20 px, les quatre titres tiennent sur une
   ligne : plus besoin de réserver, les descriptions s'alignent d'elles-mêmes. */
@media only screen and (min-width: 1025px) {

	.fb-icon-element + .fusion-title h3 {
		min-height: 0 !important;
		font-size: 20px !important;
		white-space: nowrap;
	}
}

/* 23e. Fins de section : marges résiduelles du dernier élément (paragraphe,
   dernière fiche, grille d'articles, cartes du premier écran) — 56 à 162 px
   sous le contenu au lieu de la demi-grille. */
#wrapper .helala-sec .fusion-column-wrapper > .fusion-text:last-child,
#wrapper .helala-sec .fusion-column-wrapper > .fusion-text:last-child p:last-child,
#wrapper .helala-sec .fusion-post-cards,
#wrapper .helala-sec .fusion-post-cards .fusion-grid,
#wrapper .helala-sec .helala-rail,
#wrapper .helala-rail__piste > .helala-rea:last-child {
	margin-bottom: 0 !important;
}

#wrapper .helala-sec .fusion-builder-row > .fusion-layout-column:last-child,
#wrapper .helala-sec .fusion-builder-row > .helala-rail:last-child {
	margin-bottom: 0 !important;
}

/* 23f. Variantes de titre (mobile / bureau) : le titre visible est souvent le
   second. Il gardait 12 px de marge haute après un surtitre ou une icône —
   20 px de surtitre → titre sur mobile, 35 px d'icône → titre sur bureau. */
#wrapper .helala-sec .fusion-text + .fusion-title + .fusion-title,
#wrapper .helala-sec .fb-icon-element + .fusion-title + .fusion-title {
	margin-top: 0 !important;
}

#wrapper .helala-sec .fusion-text:has(+ .fusion-title + .fusion-title) {
	margin-bottom: var(--helala-surtitre) !important;
}

#wrapper .helala-sec .fusion-text:has(+ .fusion-title + .fusion-title) p {
	margin-bottom: 0 !important;
}

/* 23g. Balises de titre et premier paragraphe sans marge propre : l'écart
   appartient à l'élément, pas à la balise (29 à 33 px au pied de page). */
#wrapper .helala-sec .fusion-title :is(h1, h2, h3, h4, h5, h6),
.fusion-tb-footer .fusion-title :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

#wrapper .helala-sec .fusion-text p:first-child,
.fusion-tb-footer .fusion-text p:first-child {
	margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
 * 24. Relecture stricte, tour 24
 * ------------------------------------------------------------------------ */

/* 24a. GRAVE — sur mobile, bouton « Un projet ? Parlons-en. » collé à la
   capture Hamza, texte collé à la capture Horion. 23e remettait à zéro la
   marge de la dernière colonne du code, qui est affichée au-dessus de l'image
   sous 641 px. Un écart de rangée fixe remplace désormais toutes les marges
   de colonnes empilées. */
@media only screen and (max-width: 640px) {

	#wrapper .helala-sec:not(.helala-sec--hero) > .fusion-builder-row {
		row-gap: 32px;
	}

	#wrapper .helala-sec:not(.helala-sec--hero) > .fusion-builder-row > .fusion-layout-column,
	#wrapper .helala-sec:not(.helala-sec--hero) > .fusion-builder-row > .helala-rail {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/* Expertises : une tuile de 127 px par service faisait 1 360 px pour
	   quatre descriptions. Tuile de 64 px, et 32 px entre services (écart de
	   rangée ci-dessus). */
	#wrapper .helala-sec .fb-icon-element .icon-wrapper,
	#wrapper .helala-sec .fb-icon-element .fontawesome-icon {
		width: 64px !important;
		height: 64px !important;
		line-height: 64px !important;
		font-size: 26px !important;
		border-radius: 16px !important;
	}
}

/* 24b. Interlignage du texte courant : 1,8 doublait à l'œil chaque marge de la
   grille. 1,6 pour DM Sans, 1,1 pour les titres Syne ; les variables de la
   section 23 ont été réduites d'autant. */
#wrapper .fusion-text p,
.fusion-tb-footer .fusion-text p {
	line-height: 1.6;
}

#wrapper .fusion-title :is(h1, h2, h3, h4) {
	line-height: 1.1 !important;
}

/* 24c. Plus de mot seul en dernière ligne de titre (« Notre / savoir-faire »,
   « Nos / réalisations », « … / locale »). */
#wrapper .fusion-title :is(h1, h2, h3, h4, h5),
#wrapper .fusion-title-heading {
	text-wrap: balance;
}

/* 24d. Tuiles d'icône : 126 px pour les expertises, 100 px pour « Proximité
   locale ». Une seule taille. */
@media only screen and (min-width: 641px) {

	#wrapper .helala-sec .fb-icon-element .icon-wrapper,
	#wrapper .helala-sec .fb-icon-element .fontawesome-icon {
		width: 100px !important;
		height: 100px !important;
		line-height: 100px !important;
	}
}

/* 24e. « Transparence des prix » : la capture partait 69 px sous le titre et
   le bouton était centré sous un texte aligné à gauche. Colonnes alignées en
   haut, bouton aligné à gauche. */
@media only screen and (min-width: 641px) {

	#wrapper .helala-bande--offre .fusion-builder-row {
		align-items: flex-start !important;
	}

	#wrapper .helala-bande--offre .fusion-builder-row > .fusion-layout-column {
		align-self: flex-start !important;
	}

	#wrapper .helala-bande--offre .fusion-column-wrapper > div:has(> .fusion-button) {
		text-align: start !important;
	}
}

/* --------------------------------------------------------------------------
 * 25. Relecture stricte, tour 26 — toutes les pages
 * ------------------------------------------------------------------------ */

/* 25a. Deux bandes de même fond qui se suivent (À propos : « Le savoir-faire »
   puis « Nos engagements ») : 221 px de vide et une coupure blanche au milieu
   d'un même aplat. La seconde porte « helala-bande--jointe » : une seule
   bande, un seul écart de grille entre les deux blocs. */
#main .fusion-fullwidth.helala-sec.helala-bande:has(+ .helala-bande--jointe) {
	margin-bottom: 0 !important;
	padding-bottom: calc(var(--helala-sec) / 2) !important;
}

#main .fusion-fullwidth.helala-sec.helala-bande.helala-bande--jointe {
	margin-top: 0 !important;
	padding-top: calc(var(--helala-sec) / 2) !important;
}

/* 25b. Colonnes d'une section : Avada laisse 20 à 40 px de marge sous chaque
   colonne, y compris la dernière rangée — « L'histoire » finissait à 116 px
   de son bord au lieu de 96. Un écart de rangée fixe, à toutes les largeurs
   (24a le faisait déjà sous 641 px). */
@media only screen and (min-width: 641px) {

	#wrapper .helala-sec:not(.helala-sec--hero) > .fusion-builder-row {
		row-gap: 32px;
	}

	#wrapper .helala-sec:not(.helala-sec--hero) > .fusion-builder-row > .fusion-layout-column,
	#wrapper .helala-sec:not(.helala-sec--hero) > .fusion-builder-row > .helala-rail {
		margin-bottom: 0 !important;
	}
}

/* 25c. Cartes d'articles (gabarit Avada 225) : image à 25 px du bord, texte à
   45, 40 px sous l'image, 51 px de vide sous « Lire l'article », et un bouton
   débordant de 10 px à gauche. Image à fond perdu en haut de carte, une seule
   marge de 24 px (20 sur mobile) pour tout le reste. */
#wrapper .fusion-post-cards .post-card > .fusion-column-wrapper {
	--helala-carte: 24px;
	padding: 0 0 var(--helala-carte) !important;
	overflow: hidden;
}

#wrapper .fusion-post-cards .post-card .fusion-post-card-image {
	margin: 0 0 var(--helala-carte) !important;
}

#wrapper .fusion-post-cards .post-card .fusion-post-card-image img {
	border-radius: 0 !important;
}

#wrapper .fusion-post-cards .post-card .fusion-column-wrapper > :not(.fusion-post-card-image) {
	margin-left: var(--helala-carte) !important;
	margin-right: var(--helala-carte) !important;
	width: auto !important;
}

#wrapper .fusion-post-cards .post-card .fusion-separator {
	display: none !important;
}

#wrapper .fusion-post-cards .post-card .fusion-text p:last-child {
	margin-bottom: 0 !important;
}

#wrapper .fusion-post-cards .post-card .fusion-column-wrapper > div:has(> .fusion-button) {
	margin-top: var(--helala-carte) !important;
	text-align: start;
}

#wrapper .fusion-post-cards .post-card .fusion-button {
	margin: 0 !important;
}

/* Titre de section → grille : 10 px, les cartes semblaient appartenir au
   titre. 32 px, 24 sur mobile. */
#wrapper .helala-sec .fusion-title:has(+ .fusion-post-cards) {
	margin-bottom: 32px !important;
}

@media only screen and (max-width: 640px) {

	#wrapper .fusion-post-cards .post-card > .fusion-column-wrapper {
		--helala-carte: 20px;
	}

	/* 40 px entre cartes empilées : 24. */
	#wrapper .fusion-post-cards .post-card {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}

	#wrapper .fusion-post-cards .fusion-grid {
		margin-top: -12px !important;
		margin-bottom: -12px !important;
	}

	#wrapper .helala-sec .fusion-title:has(+ .fusion-post-cards) {
		margin-bottom: 24px !important;
	}
}

/* 25d. Surtitres : quatre dessins pour un même rôle (capitales bleues de 19 px,
   bas de casse de 18 px, capitales de 13 px espacées, noir avec émoji). Un
   seul : 14 px, capitales espacées, graisse 500. La couleur reste celle du
   contenu sur les bandes (or clair sur marine) ; bleu d'action ailleurs. */
#wrapper .helala-sec .fusion-text:has(+ .fusion-title) p,
#wrapper .helala-sec .fusion-text:has(+ .fusion-title + .fusion-title) p {
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 500 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	/* Court par nature : le plafond de 68ch (section 5) décalait un surtitre
	   centré de 87 px vers la gauche. */
	max-width: none !important;
}

#wrapper .helala-sec:not(.helala-bande) .fusion-text:not([style*="--awb-text-color"]):has(+ .fusion-title) p,
#wrapper .helala-sec:not(.helala-bande) .fusion-text:not([style*="--awb-text-color"]):has(+ .fusion-title + .fusion-title) p {
	color: #2862BD !important;
}

/* Les cartes d'articles ont leur propre surtitre (la catégorie) : hors règle. */
#wrapper .fusion-post-cards .fusion-text p {
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* 25e. En-tête : le bouton « Nous contacter » (184 px) débordait de sa colonne
   (139 px) et finissait à 1 395 px, 45 px au-delà du bord du contenu. */
@media only screen and (min-width: 1025px) {

	.fusion-tb-header .fusion-builder-row > .fusion-layout-column:last-child:not(:first-child) > .fusion-column-wrapper {
		align-items: flex-end !important;
	}
}

/* 25f. Pied de page : contenu à 115 px du bord quand les sections partent de
   90, et un titre 12 px plus bas que le logo et le bouton voisins. */
@media only screen and (min-width: 641px) {

	.fusion-tb-footer .fusion-builder-row > .fusion-layout-column:first-child {
		padding-left: 0 !important;
	}

	.fusion-tb-footer .fusion-builder-row > .fusion-layout-column:last-child {
		padding-right: 0 !important;
	}

	.fusion-tb-footer .fusion-title {
		margin-top: 0 !important;
	}
}

/* 25g. Le bouton « haut de page » recouvrait le bord des cartes (1 318 →
   1 365 px). Collé au bord de la fenêtre. */
#toTop.fusion-top-top-link,
.to-top-container #toTop {
	right: 16px !important;
}

/* 25h. « Voir le site → » : 16 px de haut pour un lien sortant. 44 px de zone
   utile sans changer la mise en page. */
.helala-rea-lien a {
	display: inline-block;
	padding-block: 14px;
	margin-block: -14px;
}

/* 25i. Carrousel des réalisations : la quatrième carte coupée par un fondu
   passait pour un défaut. Trois cartes entières sur grand écran, deux sur
   tablette, 32 px entre elles ; la quatrième arrive par les flèches. */
@media only screen and (min-width: 641px) {

	.helala-rail__piste {
		column-gap: 32px;
	}

	.helala-rail__piste > .fusion-layout-column {
		flex-basis: calc((100% - 32px) / 2) !important;
		width: calc((100% - 32px) / 2) !important;
		padding-inline: 0 !important;
	}

	.helala-rail:not(.helala-rail--fin) .helala-rail__piste {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

@media only screen and (min-width: 1025px) {

	.helala-rail__piste > .fusion-layout-column {
		flex-basis: calc((100% - 64px) / 3) !important;
		width: calc((100% - 64px) / 3) !important;
	}
}

/* 25j. Titres principaux : plus de coupure au trait d'union (« Contactez- /
   nous »). */
#wrapper .fusion-title :is(h1, h2) {
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* 25k. Premier écran : le bouton ajouté sous le texte d'introduction (À propos,
   Services, Produits) touchait le paragraphe — 0 px sur À propos, 24 px
   ailleurs. L'accueil a son propre gabarit (section 11) et reste hors règle. */
#wrapper .helala-sec--hero .fusion-layout-column:not(.helala-hero-mot) .fusion-column-wrapper > .fusion-text:has(+ div > .fusion-button) p:last-child {
	margin-bottom: 0 !important;
}

#wrapper .helala-sec--hero .fusion-layout-column:not(.helala-hero-mot) .fusion-column-wrapper > .fusion-text + div:has(> .fusion-button) {
	margin-top: var(--helala-texte-bouton) !important;
}

/* 25l. Sur mobile, les captures des sections pleine largeur (« Notre méthode »
   sur Services, l'appel final de Produits) gardaient la marge gauche de 32 px
   du bureau et aucune à droite : image collée au bord droit, décentrée de
   16 px. Même marge des deux côtés. */
@media only screen and (max-width: 640px) {

	#wrapper .helala-sec .fusion-column-wrapper:has(> .fusion-image-element):not(:has(> .fusion-text, > .fusion-title)) {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}

/* --------------------------------------------------------------------------
 * 26. Relecture stricte, tour 28
 * ------------------------------------------------------------------------ */

/* 26a. GRAVE — les tailles de titre posées dans le contenu (60 / 56 px) valaient
   aussi sur mobile : « Contactez-nou / s », « intermédi / aire », et le bouton
   d'À propos repoussé sous la ligne de flottaison. Sous 641 px : h1 36, h2 de
   section 32. Les titres de carte (colonne à fond) gardent leur taille. Un mot
   trop long déborde plutôt que d'être coupé : ça se voit en recette. */
@media only screen and (max-width: 640px) {

	#wrapper .helala-sec .fusion-title h1 {
		font-size: 36px !important;
	}

	#wrapper .helala-sec .fusion-layout-column:not([style*="--awb-bg-color"]):not(.helala-rea) > .fusion-column-wrapper > .fusion-title h2 {
		font-size: 32px !important;
	}
}

#wrapper .fusion-title :is(h1, h2, h3) {
	overflow-wrap: normal !important;
	word-break: normal !important;
}

/* 26b. Surtitre → titre : 18 à 20 px d'encre à encre (grille 12). L'interligne
   de 1,4 du surtitre et sa marge de 4 px s'ajoutaient au blanc du titre. */
#wrapper .helala-sec .fusion-text:has(+ .fusion-title) p,
#wrapper .helala-sec .fusion-text:has(+ .fusion-title + .fusion-title) p {
	line-height: 1.2 !important;
}

#wrapper .helala-sec .fusion-text:has(+ .fusion-title),
#wrapper .helala-sec .fusion-text:has(+ .fusion-title + .fusion-title) {
	margin-bottom: 0 !important;
}

/* 26c. Deux bandes de couleur qui se suivent : une rayure blanche de 48 px entre
   elles (marine → bleu pâle, marine → marine), qu'on lisait comme un raté. Les
   bandes se touchent. Même chose entre la dernière bande et le pied, marine. */
#main .fusion-fullwidth.helala-sec.helala-bande:has(+ .helala-bande) {
	margin-bottom: 0 !important;
}

#main .fusion-fullwidth.helala-bande + .fusion-fullwidth.helala-sec.helala-bande {
	margin-top: 0 !important;
}

#main .fusion-fullwidth.helala-sec.helala-bande.helala-sec--fin {
	margin-bottom: 0 !important;
}

body:has(#main .helala-bande.helala-sec--fin) .fusion-tb-footer .fusion-fullwidth {
	margin-top: 0 !important;
}

/* 26d. Tuiles d'icône : 24a et 24d visaient « .fb-icon-element .icon-wrapper »,
   alors que la tuile est l'élément lui-même (i.fb-icon-element). Elles
   mesuraient toujours 126 px, contre 100 pour « Proximité locale ». */
#wrapper .helala-sec i.fb-icon-element {
	width: 100px !important;
	height: 100px !important;
	line-height: 100px !important;
	font-size: 40px !important;
}

@media only screen and (max-width: 640px) {

	#wrapper .helala-sec i.fb-icon-element {
		width: 64px !important;
		height: 64px !important;
		line-height: 64px !important;
		font-size: 26px !important;
		margin-bottom: 16px !important;
	}
}

/* 26e. Bande photo « Notre savoir-faire » : 48 px avant les expertises au lieu
   de 96. Elle prend la demi-marge extérieure des bandes, comme les autres. */
#main .fusion-fullwidth.helala-sec.helala-bande--photo {
	margin-top: calc(var(--helala-sec) / 2) !important;
	margin-bottom: calc(var(--helala-sec) / 2) !important;
}

/* 26f. Carrousel : chaque colonne gardait sa marge Avada de 23 px de part et
   d'autre — 78 px entre cartes. La piste se cale sur le contenu des colonnes
   d'en-tête (titre à gauche, bouton à droite), flèches comprises. */
@media only screen and (min-width: 641px) {

	.helala-rail__piste > .fusion-layout-column > .fusion-column-wrapper {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.helala-rail {
		padding-inline: 24px;
	}
}

/* Sur mobile, les trois colonnes d'en-tête de la bande s'empilaient avec leurs
   remplissages : 54 px titre → texte, 69 px texte → bouton. */
@media only screen and (max-width: 640px) {

	#wrapper .helala-sec:has(> .fusion-builder-row > .helala-rail) > .fusion-builder-row {
		row-gap: 16px;
	}

	#wrapper .helala-sec:has(> .fusion-builder-row > .helala-rail) > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	#wrapper .helala-sec:has(> .fusion-builder-row > .helala-rail) > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper > .fusion-title,
	#wrapper .helala-sec:has(> .fusion-builder-row > .helala-rail) > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper > .fusion-text,
	#wrapper .helala-sec:has(> .fusion-builder-row > .helala-rail) > .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper > .fusion-text p {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	#wrapper .helala-sec:has(> .fusion-builder-row > .helala-rail) > .fusion-builder-row > .fusion-layout-column:has(.fusion-button) {
		margin-top: 8px !important;
	}

	#wrapper .helala-sec:has(> .fusion-builder-row > .helala-rail) .helala-rail {
		margin-top: 16px !important;
	}
}

/* 26g. Cartes d'articles, suite de 25c : « Lire l'article » gardait le
   remplissage de bouton (28 px de retrait) et flottait à trois hauteurs d'une
   carte à l'autre ; catégories en noir ; 60 px entre cartes sur À propos. */
#wrapper .fusion-post-cards .post-card .fusion-button {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#wrapper .fusion-post-cards .post-card .fusion-column-wrapper > div:has(> .fusion-button) {
	margin-top: auto !important;
	padding-top: var(--helala-carte);
}

#wrapper .fusion-post-cards .post-card .fusion-text:first-of-type a {
	color: #2862BD !important;
}

@media only screen and (min-width: 641px) {

	#wrapper .fusion-post-cards .post-card {
		padding: 16px !important;
	}

	#wrapper .fusion-post-cards .fusion-grid {
		margin: -16px !important;
	}
}

/* 26h. Pied de page : 25f ôtait un remplissage qui n'existait pas. Le retrait
   venait du conteneur (8 % de chaque côté) et de la marge Avada des colonnes.
   Conteneur calé sur la même colonne de 1 260 px que les sections, dernière
   colonne poussée à droite ; sur mobile, 32 px entre blocs. */
@media only screen and (min-width: 1025px) {

	.fusion-tb-footer .fusion-fullwidth {
		padding-left: max(30px, calc((100% - 1260px) / 2)) !important;
		padding-right: max(30px, calc((100% - 1260px) / 2)) !important;
	}

	.fusion-tb-footer .fusion-builder-row {
		max-width: none !important;
	}

	.fusion-tb-footer .fusion-builder-row > .fusion-layout-column:has(.fusion-button) {
		margin-left: auto !important;
	}
}

@media only screen and (max-width: 640px) {

	.fusion-tb-footer .fusion-builder-row {
		row-gap: 32px;
	}

	.fusion-tb-footer .fusion-builder-row > .fusion-layout-column {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}

/* 26i. Bandeau d'annonce : texte à x 215, ni centré ni aligné, et deux arcs de
   la démonstration dans les coins. Centré, sans motif. */
.fusion-tb-header .fusion-fullwidth:first-child {
	background-image: none !important;
}

.fusion-tb-header .fusion-fullwidth:first-child .fusion-builder-row > .fusion-layout-column:only-child > .fusion-column-wrapper {
	justify-content: center !important;
	align-items: center !important;
	text-align: center !important;
}

.fusion-tb-header .fusion-fullwidth:first-child .fusion-text p {
	margin-inline: auto !important;
}

/* 26j. Grilles de cartes à fond (packs, produits) : 51 px entre colonnes, 32
   entre rangées, boutons en escalier. 32 px dans les deux sens, bords des
   cartes sur le conteneur, bouton en pied de carte. */
@media only screen and (min-width: 641px) {

	#wrapper .helala-sec .fusion-builder-row:has(> .fusion-layout-column[style*="--awb-bg-color"]) {
		margin-left: -16px !important;
		margin-right: -16px !important;
	}

	#wrapper .helala-sec .fusion-layout-column[style*="--awb-bg-color"] > .fusion-column-wrapper {
		margin-left: 16px !important;
		margin-right: 16px !important;
	}

	#wrapper .helala-sec .fusion-layout-column[style*="--awb-bg-color"] > .fusion-column-wrapper > .fusion-text + div:has(> .fusion-button) {
		margin-top: auto !important;
		padding-top: var(--helala-texte-bouton);
	}
}

/* 26k. Cases à cocher du formulaire : 13 px, bordure à 1,8:1 sur le marine,
   5 px sous l'axe du libellé. */
#main .fusion-form input[type="checkbox"],
#main .fusion-form input[type="radio"] {
	width: 20px !important;
	height: 20px !important;
	accent-color: #2862BD;
	vertical-align: middle;
}

/* 26l. Grilles de cartes, suite de 26j : la rangée Avada a une largeur imposée
   (100 % + 50 px) ; la marge de 16 px décalait les cartes de 9 px hors du
   conteneur (81 → 1 359). La rangée prend exactement 100 % + 32 px. Et la
   colonne-séparateur qui force le retour à la ligne des packs (30 px de haut,
   bureau seulement) ajoutait son écart de rangée au sien : 94 px entre rangées.
   Elle ne compte plus que pour un écart. */
@media only screen and (min-width: 641px) {

	#wrapper .helala-sec .fusion-builder-row:has(> .fusion-layout-column[style*="--awb-bg-color"]) {
		width: calc(100% + 32px) !important;
		max-width: 1292px !important;
		margin-left: max(-16px, calc((100% - 1292px) / 2)) !important;
		margin-right: max(-16px, calc((100% - 1292px) / 2)) !important;
	}

	#wrapper .helala-sec .fusion-builder-row > .fusion-layout-column:has(> .fusion-column-wrapper > .fusion-separator):not(:has(> .fusion-column-wrapper > :not(.fusion-separator):not(.fusion-clearfix))):has(+ .fusion-layout-column[style*="--awb-bg-color"]) {
		/* Trois cartes remplissent déjà la rangée : le retour à la ligne est
		   automatique. Réduite à zéro, elle comptait encore pour une ligne. */
		display: none !important;
	}
}

/* Pied de page : bouton et coordonnées calés sur le bord droit du contenu
   (1 318 → 1 350 px). */
@media only screen and (min-width: 1025px) {

	.fusion-tb-footer .fusion-builder-row > .fusion-layout-column:has(.fusion-button) > .fusion-column-wrapper {
		align-items: flex-end !important;
	}
}

/* --------------------------------------------------------------------------
 * 27. Relecture stricte, tour 30
 * ------------------------------------------------------------------------ */

/* 27a. Premier écran : 20, 40 ou 80 px entre l'en-tête et la section selon la
   page (remplissage de page propre à chacune dans Avada) — le surtitre tombait
   à 70, 90 ou 128 px. Aucun remplissage de page ; le premier écran porte seul
   son départ, un écart de grille entier. */
#main {
	padding-top: 0 !important;
}

#main .fusion-fullwidth.helala-sec--hero {
	padding-top: var(--helala-sec) !important;
}

/* 27b. Catégorie des cartes d'articles : 26g visait « .fusion-text:first-of-type »,
   qui ne désigne rien ici (le premier bloc est l'image). Le lien de catégorie
   lui-même. */
#wrapper .fusion-post-cards .post-card a[href*="/category/"] {
	color: #2862BD !important;
}

/* 27c. « Lire l'article » sur mobile : le bloc du bouton prenait 100 % de la
   carte en plus de ses marges de 20 px — débord à droite, lien centré 20 px à
   côté de l'axe. */
#wrapper .fusion-post-cards .post-card .fusion-column-wrapper > div:has(> .fusion-button) {
	width: calc(100% - 2 * var(--helala-carte)) !important;
	max-width: calc(100% - 2 * var(--helala-carte)) !important;
}

/* 27d. Bande « Nos réalisations » : conteneur à 8 % de marge (115 → 1 325 px)
   quand toutes les autres sections sont sur 90 → 1 350. Même calage que le
   pied de page (26h). */
@media only screen and (min-width: 1025px) {

	/* La bande déborde de 30 px de chaque côté (marge négative d'Avada) :
	   on les rend au remplissage. */
	#main .fusion-fullwidth.helala-sec:has(> .fusion-builder-row > .helala-rail) {
		padding-left: calc(max(30px, (100% - 1260px) / 2) + 30px) !important;
		padding-right: calc(max(30px, (100% - 1260px) / 2) + 30px) !important;
	}

	#main .fusion-fullwidth.helala-sec:has(> .fusion-builder-row > .helala-rail) > .fusion-builder-row {
		max-width: none !important;
	}
}

/* Sur mobile, texte → bouton restait à 64 px : le bouton garde ses marges de
   bloc dans sa colonne. Et titre → texte à 28 px d'encre. */
@media only screen and (max-width: 640px) {

	#wrapper .helala-sec:has(> .fusion-builder-row > .helala-rail) > .fusion-builder-row {
		row-gap: 8px;
	}

	#wrapper .helala-sec:has(> .fusion-builder-row > .helala-rail) > .fusion-builder-row > .fusion-layout-column:has(.fusion-button) {
		margin-top: 16px !important;
	}

	#wrapper .helala-sec:has(> .fusion-builder-row > .helala-rail) > .fusion-builder-row > .fusion-layout-column:has(.fusion-button) :is(div, .fusion-button) {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	#wrapper .helala-sec:has(> .fusion-builder-row > .helala-rail) .helala-rail {
		margin-top: 24px !important;
	}
}

/* 27e. Lettre d'information : 116 px de remplissage sous la colonne (réglage
   de contenu), 215 px de marine vide sous la dernière ligne. */
#wrapper .helala-bande--offre .fusion-column-wrapper {
	padding-bottom: 0 !important;
}

/* 27f. Cartes à fond : illustration → titre à 33-35 px (grille 24 / 16). */
#wrapper .helala-sec .fusion-layout-column[style*="--awb-bg-color"] .fusion-image-element {
	margin-bottom: 24px !important;
}

#wrapper .helala-sec .fusion-layout-column[style*="--awb-bg-color"] .fusion-image-element + .fusion-title {
	margin-top: 0 !important;
}

@media only screen and (max-width: 640px) {

	#wrapper .helala-sec .fusion-layout-column[style*="--awb-bg-color"] .fusion-image-element {
		margin-bottom: 16px !important;
	}
}

/* 27g. Produits : la bande des cartes partait d'un bleu pâle et se fondait dans
   le blanc — sans bord visible, l'écart de bande se lisait comme un trou. */
.page-id-2027 #main .fusion-fullwidth.helala-sec.helala-bande {
	background-image: none !important;
	background-color: #F3F6FB !important;
}

/* 27h. Cases à cocher : la case visible est le « ::before » du libellé (13 px,
   bordure blanche à 30 %), l'input est transparent. 20 px, bordure or clair,
   centrée sur la ligne du libellé. */
#main .fusion-form-checkbox label {
	display: inline-flex !important;
	align-items: center;
}

#main .fusion-form-checkbox label::before {
	width: 20px !important;
	height: 20px !important;
	min-width: 20px;
	border: 2px solid #D4B87A !important;
	border-radius: 4px;
	box-sizing: border-box;
	position: static !important;
	transform: none !important;
	margin-right: 10px !important;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
 * 28. Relecture stricte, tour 31
 * ------------------------------------------------------------------------ */

/* 28a. Bande « Nos réalisations », bureau : la colonne du bouton gardait 32 px
   de marge de bloc au-dessus du bouton — la plus haute des trois colonnes,
   elle fixait le départ de la bande à 129 px au lieu de 96. */
@media only screen and (min-width: 641px) {

	#wrapper .helala-sec:has(> .fusion-builder-row > .helala-rail) > .fusion-builder-row > .fusion-layout-column:has(.fusion-button) :is(div, .fusion-button) {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* 28b. Date → nom dans les entrées du parcours : 6 px d'encre, la date collait
   au titre. 26b avait retiré la marge de tous les surtitres ; les titres de
   carte (h4) en gardent une. */
#wrapper .helala-sec .fusion-text:has(+ .fusion-title :is(h4, h5)) {
	margin-bottom: 8px !important;
}

/* --------------------------------------------------------------------------
 * 29. Formulaire de contact lisible sur le marine
 *
 * Signalé par Bachir le 17/09 : « le form n'est pas vraiment visible ».
 * Mesuré : champs sans fond ni cadre, un seul trait bas en blanc à 30 %
 * (≈ 1,9:1 sur #16294A, seuil 3:1 pour un composant), texte indicatif en blanc
 * à 50 %. La lettre d'information de l'accueil, sur le même marine, a des
 * champs blancs pleins : même dessin ici, un seul modèle de champ pour le site.
 * ------------------------------------------------------------------------ */
#main .helala-bande form.fusion-form .fusion-form-input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#main .helala-bande form.fusion-form .fusion-form-range-value {
	background-color: #FFFFFF !important;
	color: #121821 !important;
	border: 1px solid #FFFFFF !important;
	border-radius: 8px !important;
	min-height: 48px;
	box-shadow: none !important;
}

#main .helala-bande form.fusion-form .fusion-form-input::placeholder {
	color: #5B6677 !important;
	opacity: 1;
}

/* Pictogrammes téléphone et enveloppe : blancs, ils disparaissaient dans le
   champ devenu blanc. Gris texte, lisible (5,8:1). */
#main .helala-bande form.fusion-form .fusion-form-input-with-icon .awb-form-icon,
#main .helala-bande form.fusion-form .fusion-form-input-with-icon i {
	color: #5B6677 !important;
	z-index: 1;
}

/* Survol et mise au point : le bleu d'action en bordure, en plus de l'anneau
   global (section 3). */
#main .helala-bande form.fusion-form .fusion-form-input:not([type="range"]):not([type="checkbox"]):hover,
#main .helala-bande form.fusion-form .fusion-form-input:not([type="range"]):not([type="checkbox"]):focus {
	border-color: #2862BD !important;
}

/* Libellés et légendes : blanc plein, graisse 500. */
#main .helala-bande form.fusion-form .fusion-form-range-field > label,
#main .helala-bande form.fusion-form legend .label {
	color: #FFFFFF !important;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
 * 30. Finition du front
 * ------------------------------------------------------------------------ */

/* 30a. Paragraphes vides que WordPress ajoute autour des blocs Avada (retours à
   la ligne du contenu) : 20 px de marge chacun. Sous la dernière section de
   Contact et de Produits, ils poussaient le pied 20 px plus bas qu'ailleurs ;
   au-dessus du surtitre de ces deux mêmes pages, ils décalaient le premier
   écran de 20 px. */
#main .post-content > p:empty,
#main .fusion-text > p:empty {
	display: none !important;
}

/* 30b. Colonne-séparateur suivie d'une rangée sans fond (arguments de
   Produits) : elle doit rester pour forcer le retour à la ligne — sans elle,
   les arguments se logent à côté de la 4e carte — mais ses 30 px portaient
   l'écart à 126 px. Hauteur nulle : il ne reste que l'écart de rangée. */
@media only screen and (min-width: 1025px) {

	#wrapper .helala-sec .fusion-builder-row > .fusion-layout-column:has(> .fusion-column-wrapper > .fusion-separator):not(:has(> .fusion-column-wrapper > :not(.fusion-separator):not(.fusion-clearfix))):not(:has(+ .fusion-layout-column[style*="--awb-bg-color"])) {
		height: 0 !important;
		min-height: 0 !important;
		overflow: hidden;
	}
}

/* 30c. Retirée au tour 32 : visant « les colonnes sans fond », elle ne touchait
   pas le parcours (fond blanc déclaré) et collait l'icône des arguments de
   Produits à leur filet. Remplacée par 31a. */

/* 30d. Lettre d'information, mobile : 36 px entre le texte, le champ, le bouton
   et la mention. Champ et bouton forment une seule action : 12 px. */
@media only screen and (max-width: 640px) {

	#wrapper .helala-bande--offre form.fusion-form .fusion-builder-row {
		row-gap: 12px !important;
	}

	#wrapper .helala-bande--offre form.fusion-form .fusion-layout-column,
	#wrapper .helala-bande--offre form.fusion-form .fusion-form-field {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	#wrapper .helala-bande--offre .fusion-form-form-wrapper {
		margin-bottom: 16px !important;
	}
}

/* --------------------------------------------------------------------------
 * 31. Relecture finale, tour 32
 * ------------------------------------------------------------------------ */

/* 31a. Parcours d'À propos, mobile : les entrées portent un fond blanc sur une
   section blanche — 32 px de remplissage invisibles de part et d'autre, 105 px
   entre deux étapes. Sans fond visible, pas de remplissage vertical. */
@media only screen and (max-width: 640px) {

	#wrapper .helala-sec:not(.helala-bande) .fusion-layout-column[style*="--awb-bg-color:#FFFFFF"] > .fusion-column-wrapper {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* 31b. Grille d'articles : la marge négative basse qui compense le remplissage
   des cartes (26g) était écrasée par 23e — 16 px de trop sous les articles
   (12 sur mobile), avant « Transparence des prix » et « Parlons de votre
   projet ». */
@media only screen and (min-width: 641px) {

	#wrapper .helala-sec .fusion-post-cards .fusion-grid {
		margin-bottom: -16px !important;
	}
}

@media only screen and (max-width: 640px) {

	#wrapper .helala-sec .fusion-post-cards .fusion-grid {
		margin-bottom: -12px !important;
	}
}

/* 31c. Colonnes vides (réglées pour le bureau, sans contenu sur mobile) : dans
   une rangée empilée, chacune ajoutait un écart de 32 px — 82 px entre
   « Nos derniers articles » et les cartes sur mobile. */
@media only screen and (max-width: 640px) {

	#wrapper .helala-sec > .fusion-builder-row > .fusion-layout-column:not(:has(> .fusion-column-wrapper > :not(.fusion-clearfix))) {
		display: none !important;
	}
}

/* 31d. Premier titre d'une colonne : 12 px de marge haute Avada — la section
   « Parlons de votre projet », sans surtitre, démarrait 12 px plus bas que les
   autres. */
#wrapper .helala-sec .fusion-column-wrapper > .fusion-title:first-child {
	margin-top: 0 !important;
}

/* 31e. Produits : arguments dans la même rangée que les cartes (26l).
   Bureau : marges Avada de 25 px, bords à 99 / 1 341 au lieu de 90 / 1 350 —
   même marge de 16 px que les cartes. Mobile : collés à la 4e carte comme une
   cinquième (32 px) ; un écart de section (64 px). */
@media only screen and (min-width: 641px) {

	#wrapper .helala-sec .fusion-builder-row:has(> .fusion-layout-column[style*="--awb-bg-color"]) > .fusion-layout-column:not([style*="--awb-bg-color"]) > .fusion-column-wrapper {
		margin-left: 16px !important;
		margin-right: 16px !important;
	}
}

@media only screen and (max-width: 640px) {

	#wrapper .helala-sec .fusion-layout-column[style*="--awb-bg-color"] + .fusion-layout-column:not([style*="--awb-bg-color"]) {
		margin-top: 32px !important;
	}
}

/* 31f. Bande détachée : deux marines différents qui se touchent (formulaire uni,
   réalisations en dégradé) laissaient une couture nette. La bande porte sa
   demi-marge de part et d'autre, comme face à du blanc. */
#main .fusion-fullwidth.helala-sec.helala-bande:has(+ .helala-bande--detachee) {
	margin-bottom: calc(var(--helala-sec) / 2) !important;
}

#main .fusion-fullwidth.helala-bande + .fusion-fullwidth.helala-sec.helala-bande.helala-bande--detachee {
	margin-top: calc(var(--helala-sec) / 2) !important;
}

/* 31g. Séparateur des coordonnées (« 06 … · WhatsApp · contact@ ») : le point
   médian finissait ou ouvrait une ligne sur mobile. Sous 641 px, une
   coordonnée par ligne, sans séparateur. */
@media only screen and (max-width: 640px) {

	.helala-sep {
		display: block;
		height: 0;
		overflow: hidden;
	}
}

/* --------------------------------------------------------------------------
 * 32. Revue visuelle, boucle de 3 tours — tour 1
 * ------------------------------------------------------------------------ */

/* 32a. Un seul corps pour un titre de section : 40 / 44 (typographie.md).
   « À propos » en mêlait deux — trois titres à 40 px, quatre à 56 —, et
   « Nos derniers articles » comme « Parlons de votre projet » restaient à 56
   sur l'accueil, le contact et « À propos », à quatre points du h1 (60 px).
   Le corps vient d'une variable posée en ligne sur chaque bloc de titre ;
   l'attribut ne cible que les blocs à 56 px, jamais les titres de carte (20 px).
   Sur mobile, les deux variantes valaient déjà 32 px : rien ne change. */
#main .fusion-title.fusion-title-size-two[style*="clamp(32px, 3.9vw, 56px)"] {
	--awb-font-size: clamp(32px, 2.8vw, 40px) !important;
}

/* 32b. Étiquettes techniques des fiches : pastille à contour sur l'accueil et
   le contact, texte nu sur « Services » — même composant, le contour vivait
   dans le style en ligne d'une page et pas des autres. Même valeur que celle
   de l'accueil, donc rien ne bouge là où elle existe déjà. */
.helala-rea .helala-rea-tags > span {
	border: 1px solid rgba(255, 255, 255, .28);
}

/* --------------------------------------------------------------------------
 * 33. Revue visuelle, boucle de 3 tours — tour 2
 * ------------------------------------------------------------------------ */

/* 33a. Titres des cartes d'articles : interligne de 33 px pour 22 px de corps
   (30 pour 20 sur mobile), soit 1,5, quand tous les autres titres de carte
   suivent la charte à 1,1 (h3 20/22). Trois lignes de titre pesaient 99 px au
   lieu de 73 ; la carte perd 35 px de hauteur, le lien « Lire l'article »
   reste aligné en bas (26g). */
#wrapper .fusion-post-cards .fusion-title-heading,
#wrapper .fusion-post-cards .fusion-title-heading a {
	line-height: 1.1 !important;
}

/* 33b. Cases à cocher du formulaire : depuis 27h la case visible est le
   « ::before » du libellé, un élément de sa ligne flex, mais Avada garde le
   remplissage de 24 px qu'il réservait à l'ancienne case posée en absolu. La
   case dessinée partait à x 144 quand champs et titre de question sont à 120
   (84 contre 60 sur mobile). L'input transparent reste calé à gauche : la zone
   de clic ne change pas, le libellé entier reste cliquable. */
#main .fusion-form-checkbox label {
	padding-left: 0 !important;
}

/* 33c. /produits/ sur mobile : le bloc des arguments suivait la dernière carte
   à 32 px, l'écart de deux cartes voisines, alors que la rupture entre le
   catalogue et l'argumentaire vaut un écart de section (64 px) — 97 px sur
   bureau. Sur bureau, rien ne change. */
@media only screen and (max-width: 640px) {

	#wrapper .fusion-layout-column:not(.helala-principe) + .fusion-layout-column.helala-principe {
		margin-top: 32px !important;
	}
}

/* 34a. Sous-menu « Nos collaborateurs » (bureau) : les liens étaient en 13 px
   quand le menu principal est à 17 px. Les couleurs, elles, tiennent la charte
   (texte #212934 sur blanc, 14,7:1 ; survol #2862BD sur bleu à 5 %, 5,4:1) :
   seule la taille change, avec une hauteur de ligne qui garde l'entrée à 44 px. */
#wrapper .awb-menu__sub-a {
	font-size: 15px !important;
	line-height: 20px !important;
}

/* 35a. Contact : le bloc du formulaire (marine) gardait une marge de 48 px en
   haut et en bas, et « Nos réalisations » (marine aussi) la même au-dessus :
   deux blocs foncés séparés par une bande blanche de 49 px, juste sous le
   bouton d'envoi. Le bloc du formulaire n'a plus de marge basse, le bloc
   suivant plus de marge haute ; les 96 px de remplissage interne restent. */
/* La règle 17 pose la moitié de l'écart de section à l'extérieur de chaque
   bande de couleur, avec un identifiant « #main » : il faut le même poids pour
   la battre. Deux bandes voisines se touchent, sans bande blanche. */
.page-id-21 #main .fusion-fullwidth.helala-sec.helala-bande:has(.fusion-form) {
	margin-bottom: 0 !important;
}

.page-id-21 #main .fusion-fullwidth.helala-sec.helala-bande:has(.fusion-form) + .fusion-fullwidth.helala-sec.helala-bande {
	margin-top: 0 !important;
}

/* 35b. Services : les cinq cartes ont un titre d'une ligne, mais la règle 9b
   leur réservait deux lignes (2,4 em) pour caler des textes que rien ne
   compare : 35 px de la ligne du titre à celle du texte, contre 13 sur
   Produits, où les titres à deux lignes justifient la réserve. */
.page-id-23 .fusion-image-element + .fusion-title h2,
.page-id-23 .fusion-image-element + .fusion-title h3,
.page-id-23 .fusion-image-element + .fusion-title h4,
.page-id-23 .fusion-image-element + .fusion-title h5 {
	min-height: 0;
}

/* 36a. Contact : une fois la bande blanche retirée (35a), les deux bandes marine
   cumulaient 96 + 96 px de remplissage, soit 225 px de vide sous le bouton
   d'envoi. Chacune cède la moitié de son remplissage côté jonction : l'écart
   retombe à 96 px sur bureau et à 64 px sur mobile, comme entre deux sections. */
.page-id-21 #main .fusion-fullwidth.helala-sec.helala-bande:has(.fusion-form) {
	padding-bottom: calc(var(--helala-sec) / 2) !important;
}

.page-id-21 #main .fusion-fullwidth.helala-sec.helala-bande:has(.fusion-form) + .fusion-fullwidth.helala-sec.helala-bande {
	padding-top: calc(var(--helala-sec) / 2) !important;
}

/* 36b. Mobile : les colonnes empilées du pied de page et les quatre expertises
   de l'accueil restaient à 32 px l'une de l'autre, l'écart de deux cartes, soit
   50 px et 38 px d'un texte à l'élément suivant une fois l'interligne compté.
   Ce ne sont pas des cartes : 12 px dans le pied de page, 20 px pour les
   expertises. */
@media only screen and (max-width: 640px) {

	.fusion-footer-widget-area .fusion-fullwidth .fusion-builder-row {
		row-gap: 12px !important;
	}

	.page-id-5 #wrapper .fusion-builder-row:has(.fb-icon-element + .fusion-title) {
		row-gap: 20px !important;
	}
}

/* --------------------------------------------------------------------------
 * 34. Sous-menus : même couleur au survol qu'au repos
 * Demande de Bachir, 1er octobre 2026. Avada passait le texte au bleu et
 * teintait le fond de la ligne au survol (rgba(40,97,189,.05)). On fige les
 * deux sur leur valeur de repos (texte rgb(33,41,52), fond blanc), au survol
 * comme au clavier. Le menu principal garde son survol.
 * ------------------------------------------------------------------------ */
.fusion-tb-header .awb-menu__sub-li,
.fusion-tb-header .awb-menu__sub-li:hover,
.fusion-tb-header .awb-menu__sub-li:focus-within {
	background-color: #fff !important;
}

.fusion-tb-header .awb-menu__sub-a,
.fusion-tb-header .awb-menu__sub-a:hover,
.fusion-tb-header .awb-menu__sub-a:focus,
.fusion-tb-header .awb-menu__sub-a:active,
.fusion-tb-header .current-menu-item > .awb-menu__sub-a,
.fusion-tb-header .awb-menu__sub-li:hover > .awb-menu__sub-a {
	color: rgb(33, 41, 52) !important;
	background-color: transparent !important;
}

/* --------------------------------------------------------------------------
 * 37. Mouvement, niveau 2 (voir helala.js, même numéro, et
 * design-system/01-fondations/mouvement.md). Les états de départ ne
 * s'appliquent qu'aux éléments marqués par le script, et le script ne marque
 * que ce qui est sous la ligne de flottaison : sans JavaScript, rien ne bouge
 * et tout est visible.
 * ------------------------------------------------------------------------ */

/* 1. Titres mot par mot. Le masque laisse passer les jambages. */
.h-titre .h-mot {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: .12em;
	margin-bottom: -.12em;
}
.h-titre .h-mot > span {
	display: inline-block;
	transform: translateY(108%);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--i, 0) * 45ms);
}
.h-titre.h-in .h-mot > span {
	transform: none;
}

/* 2. Cascade de colonnes. */
.h-cas {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .4s ease, transform .4s ease;
	transition-delay: calc(var(--i, 0) * 70ms);
}
.h-cas.h-in {
	opacity: 1;
	transform: none;
}

/* 3. Captures en profondeur : décalage lié au défilement, sans script.
   Navigateurs sans animation-timeline : la capture reste immobile. */
@supports (animation-timeline: view()) {
	.helala-capture img,
	.helala-rea .fusion-imageframe img {
		animation: h-profondeur linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}
	@keyframes h-profondeur {
		from { transform: translateY(14px); }
		to   { transform: translateY(-14px); }
	}
}

/* 4. Bouton magnétique : le retour au repos est amorti. */
.h-aimant {
	transition: transform .25s cubic-bezier(.2, .7, .2, 1), background-color .2s linear, border-color .2s linear !important;
	will-change: transform;
}

/* 5. Fondu entre les pages du site (Chrome, Edge ; ignoré ailleurs). */
@view-transition {
	navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .25s;
}

/* Moins d'animations : fondu de 0,15 s, aucun déplacement. */
@media (prefers-reduced-motion: reduce) {
	.h-cas {
		transform: none;
		transition: opacity .15s linear;
		transition-delay: 0s;
	}
	.helala-capture img,
	.helala-rea .fusion-imageframe img {
		animation: none !important;
	}
	@view-transition {
		navigation: none;
	}
}

/* --------------------------------------------------------------------------
 * 38. Pages d'étude de cas (migration 036) : /realisations/ et ses trois
 * pages. Couleurs du design system : marine #213A62, bleu d'action #2862BD,
 * bleu pâle #F3F6FB, trait #E2E2E2.
 * ------------------------------------------------------------------------ */
.helala-etude-chapo {
	font-size: 1.2em;
	line-height: 1.6;
	max-width: 68ch;
	color: #212934;
}
.helala-etude-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 28px;
}
.helala-etude-tags span {
	border: 1px solid #E2E2E2;
	border-radius: 100px;
	padding: 4px 12px;
	font-size: .85em;
	color: #213A62;
	background: #F3F6FB;
}
.helala-etude-captures {
	display: grid;
	grid-template-columns: 1fr minmax(140px, 22%);
	gap: 24px;
	align-items: end;
	margin: 8px 0 40px;
}
.helala-etude-captures figure {
	margin: 0;
}
.helala-etude-captures img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid #E2E2E2;
	box-shadow: 0 24px 50px rgba(33, 58, 98, .14);
}
.helala-etude-mobile img {
	border-radius: 22px;
}
@media only screen and (max-width: 640px) {
	.helala-etude-captures {
		grid-template-columns: 1fr;
	}
	.helala-etude-mobile {
		max-width: 220px;
		margin-inline: auto !important;
	}
}
.helala-etude-mesures {
	width: 100%;
	max-width: 560px;
	border-collapse: collapse;
	margin: 8px 0 8px;
}
.helala-etude-mesures th,
.helala-etude-mesures td {
	padding: 10px 12px;
	border-bottom: 1px solid #E2E2E2;
	text-align: start;
}
.helala-etude-mesures td {
	font-weight: 700;
	color: #213A62;
	white-space: nowrap;
}
.helala-etude-note {
	font-size: .85em;
	color: #5B6677;
	max-width: 68ch;
}
.helala-etude-site {
	font-weight: 700;
	color: #2862BD;
}
.helala-etude-cta {
	margin-top: 40px;
	padding: 28px;
	border-radius: 16px;
	background: #213A62;
	color: #FFFFFF;
}
.helala-etude-cta p {
	color: #FFFFFF;
	margin: 0 0 14px;
}
.helala-etude-bouton {
	display: inline-block;
	background: #FFFFFF;
	color: #213A62 !important;
	font-weight: 700;
	padding: 12px 22px;
	border-radius: 8px;
	text-decoration: none;
}
.helala-etudes-liste {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.helala-etudes-liste a {
	display: grid;
	gap: 8px;
	text-decoration: none;
	color: #212934;
}
.helala-etudes-liste img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid #E2E2E2;
	transition: transform .3s ease;
}
.helala-etudes-liste a:hover img {
	transform: translateY(-4px);
}
.helala-etudes-liste strong {
	font-size: 1.15em;
	color: #213A62;
}
@media (prefers-reduced-motion: reduce) {
	.helala-etudes-liste img {
		transition: none;
	}
}

/* 38b. Titre principal des études de cas, ajouté par la migration 037. */
.helala-etude-h1 {
	margin: clamp(32px, 6vw, 72px) 0 18px !important;
	font-size: clamp(30px, 4.2vw, 52px) !important;
	line-height: 1.1 !important;
	color: #213A62;
	max-width: 22ch;
}

/* 38c. Questions fréquentes (migration 039). */
.helala-faq {
	display: grid;
	gap: 10px;
	max-width: 820px;
	margin-bottom: 36px;
}
.helala-faq details {
	border: 1px solid #E2E2E2;
	border-radius: 12px;
	padding: 0 18px;
	background: #FFFFFF;
}
.helala-faq details[open] {
	background: #F3F6FB;
}
.helala-faq summary {
	cursor: pointer;
	font-weight: 700;
	color: #213A62;
	padding: 16px 0;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.helala-faq summary::-webkit-details-marker {
	display: none;
}
.helala-faq summary::after {
	content: "+";
	color: #2862BD;
	font-size: 1.3em;
	line-height: 1;
}
.helala-faq details[open] summary::after {
	content: "−";
}
.helala-faq details p {
	margin: 0 0 16px;
	color: #212934;
	max-width: 68ch;
}

/* --------------------------------------------------------------------------
 * 39. Pré-diagnostic (code court [helala_prediagnostic], page 040).
 * ------------------------------------------------------------------------ */
.hp-form {
	display: grid;
	gap: 18px;
	max-width: 860px;
}
.hp-form fieldset {
	border: 1px solid #E2E2E2;
	border-radius: 14px;
	padding: 20px;
	margin: 0;
	background: #FFFFFF;
}
.hp-form legend {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: #213A62;
	padding-inline: 6px;
}
.hp-form legend span {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #213A62;
	color: #FFFFFF;
	font-size: .85em;
}
.hp-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 8px;
	margin-top: 10px;
}
.hp-choix {
	position: relative;
	display: block;
	cursor: pointer;
}
.hp-choix input {
	position: absolute;
	opacity: 0;
	inset: 0;
	cursor: pointer;
}
.hp-choix span {
	display: block;
	border: 1px solid #E2E2E2;
	border-radius: 10px;
	padding: 12px 14px;
	min-height: 46px;
	color: #212934;
	transition: border-color .2s linear, background-color .2s linear;
}
.hp-choix input:checked + span {
	border-color: #2862BD;
	background: #F3F6FB;
	font-weight: 700;
	color: #213A62;
}
.hp-choix input:focus-visible + span {
	outline: 3px solid #2862BD;
	outline-offset: 2px;
}
.hp-champ {
	display: grid;
	gap: 6px;
	margin-top: 12px;
	font-size: .9em;
	color: #5B6677;
	font-weight: 600;
}
.hp-champ input {
	border: 1px solid #E2E2E2;
	border-radius: 10px;
	padding: 12px;
	min-height: 46px;
	font: inherit;
	font-weight: 400;
	color: #121821;
}
.hp-aide {
	font-size: .85em;
	color: #5B6677;
	margin: 8px 0 0;
}
.hp-piege {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.hp-conseil {
	border-radius: 14px;
	padding: 20px 22px;
	background: #F3F6FB;
	border-inline-start: 4px solid #2862BD;
}
.hp-conseil p {
	margin: 0 0 10px;
	color: #212934;
}
.hp-conseil-titre {
	font-weight: 700;
	color: #213A62 !important;
}
.hp-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}
.hp-envoyer {
	background: #2862BD;
	color: #FFFFFF;
	border: 0;
	border-radius: 8px;
	padding: 14px 24px;
	min-height: 48px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.hp-envoyer:hover {
	background: #213A62;
}
.hp-wa {
	font-weight: 700;
	color: #2862BD;
}
.hp-retour {
	border-radius: 14px;
	padding: 20px 22px;
	max-width: 860px;
}
.hp-ok {
	background: #F3F6FB;
	border-inline-start: 4px solid #2862BD;
}
.hp-ko {
	background: #FFF4F2;
	border-inline-start: 4px solid #B3261E;
}
/* Lien secondaire sur le bloc marine des études de cas : or clair, 5,92:1. */
.helala-etude-lien-clair {
	color: #D4B87A !important;
	font-weight: 600;
	margin-inline-start: 14px;
}

/* --------------------------------------------------------------------------
 * 40. En-tête : le menu tient sur une ligne depuis l'ajout de « Réalisations »
 * (migration 038). Mesuré le 1er octobre : à 1440 px, « Contact » passait sous
 * le bouton « Nous contacter » (31 px de recouvrement) ; vers 1100 px, il
 * passait à la ligne. Le lien « Contact » double le bouton voisin : il est
 * masqué sur ordinateur et reste dans le menu replié du mobile. Entre 1025 et
 * 1365 px, l'écart entre les entrées passe de 4,5 % à 2,5 %.
 * ------------------------------------------------------------------------ */
@media only screen and (min-width: 1025px) {
	.fusion-tb-header .awb-menu__main-li:has(> a[href$="/contact/"]) {
		display: none !important;
	}
}
@media only screen and (min-width: 1025px) and (max-width: 1365px) {
	.fusion-tb-header .awb-menu {
		--awb-gap: 2.5% !important;
	}
}
/* 40b. 1100 px : « Nos collaborateurs » chevauchait encore le bouton de 23 px. */
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
	.fusion-tb-header .awb-menu {
		--awb-gap: 1.2% !important;
	}
	.fusion-tb-header .awb-menu__main-a {
		font-size: 15px !important;
	}
}

/* --------------------------------------------------------------------------
 * 41. Pages de contenu (études de cas, FAQ, pré-diagnostic, expertises) :
 * la ligne ne dépasse plus 68 caractères (design-system/01-fondations/
 * typographie.md). Les puces des études couraient sur toute la largeur.
 * ------------------------------------------------------------------------ */
.post-content:has(> .helala-etude-h1) > :is(p, ul, ol, h2, h3) {
	max-width: 68ch;
}
.helala-etapes {
	padding-inline-start: 1.2em;
}
.helala-etapes li {
	margin-bottom: 10px;
}
.helala-etapes li::marker {
	color: #2862BD;
	font-weight: 700;
}
/* Titres des quatre expertises de l'accueil, devenus des liens (migration 041). */
.helala-lien-expertise {
	color: inherit !important;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .3s ease;
}
.helala-lien-expertise:hover,
.helala-lien-expertise:focus-visible {
	background-size: 100% 2px;
}
@media (prefers-reduced-motion: reduce) {
	.helala-lien-expertise {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * 42. Pages par métier (migration 047) : grille de six cartes sur /metiers/,
 * ligne des expertises liées, lien depuis les pages d'expertise.
 * ------------------------------------------------------------------------ */
.helala-metiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin: 32px 0 48px;
}
.helala-metier-carte {
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 24px;
	border: 1px solid #E2E2E2;
	border-radius: 12px;
	background: #FFFFFF;
	color: #212934 !important;
	text-decoration: none !important;
	transition: border-color .3s ease, transform .3s ease;
}
.helala-metier-carte strong {
	font-size: 1.15em;
	color: #213A62;
}
.helala-metier-carte span {
	line-height: 1.55;
}
.helala-metier-carte:hover,
.helala-metier-carte:focus-visible {
	border-color: #2862BD;
	transform: translateY(-3px);
}
.helala-metier-services,
.helala-lien-metiers {
	margin-top: 28px;
	font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
	.helala-metier-carte {
		transition: none;
	}
	.helala-metier-carte:hover,
	.helala-metier-carte:focus-visible {
		transform: none;
	}
}

/* 43. Page « Comment ça se passe » (migration 048) : cinq étapes numérotées. */
.helala-processus {
	list-style: none;
	padding: 0;
	margin: 40px 0;
	display: grid;
	gap: 28px;
}
.helala-processus li {
	padding: 0 0 24px 24px;
	border-left: 2px solid #E2E2E2;
}
.helala-processus li:last-child {
	padding-bottom: 0;
}
.helala-processus h2 {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 10px;
}
.helala-processus-n {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: #213A62;
	color: #FFFFFF;
	font-size: .7em;
}
.helala-processus-note {
	color: #213A62;
	font-weight: 500;
}

/* 44. Bouton WhatsApp flottant (class-whatsapp.php). Vert officiel, glyphe
   blanc : 1,98:1 seulement pour le glyphe, mais c'est un logo de marque
   reconnu ; l'étiquette accessible porte le sens. Bas à gauche, le bas à
   droite étant tenu par « haut de page ». 56 px de zone utile. */
.helala-wa {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 9990;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #FFFFFF !important;
	box-shadow: 0 8px 24px rgba(33, 41, 52, .25);
	transition: transform .2s ease;
}
.helala-wa:hover,
.helala-wa:focus-visible {
	transform: translateY(-3px);
}
.helala-wa:focus-visible {
	outline: 3px solid #213A62;
	outline-offset: 3px;
}
@media print {
	.helala-wa {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.helala-wa {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * 45. Colonne de texte qui mordait sur la capture voisine (accueil « Notre
 * façon de travailler », Services « Notre méthode », Produits « Un doute sur
 * le produit adapté ? »). Le gabarit Avada lui donne un retrait négatif de
 * 20 px (--awb-spacing-left-large:-20px), pensé pour un texte posé sur une
 * carte ; ici le texte n'a pas de fond et passait sous l'image, de 1 280 à
 * 1 770 px. Retrait annulé, et un vrai blanc entre l'image et le texte.
 * ------------------------------------------------------------------------ */
@media only screen and (min-width: 1025px) {
	#main .fusion-layout-column[style*="spacing-left-large:-20px"] > .fusion-column-wrapper,
	#main .fusion-layout-column[style*="spacing-left-large: -20px"] > .fusion-column-wrapper {
		margin-left: 0 !important;
		padding-left: clamp(32px, 3.5vw, 64px) !important;
	}
}

/* --------------------------------------------------------------------------
 * 46. Bande « Notre savoir-faire » : elle portait une photo de fond, retirée
 * en 1.82.0 (c'était l'image qui retardait l'affichage). Restait une carte
 * seule à gauche et une moitié vide. La moitié droite reçoit la marguerite
 * de la marque, en filigrane (SVG en ligne, 1 Ko, aucune requête).
 * Ordinateur seulement : sous 1025 px la carte prend toute la largeur.
 * ------------------------------------------------------------------------ */
@media only screen and (min-width: 1025px) {
	#main .fusion-fullwidth.helala-bande--photo {
		position: relative;
		overflow: hidden;
	}
	#main .fusion-fullwidth.helala-bande--photo::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 9%;
		width: min(22vw, 320px);
		aspect-ratio: 1;
		transform: translateY(-50%);
		pointer-events: none;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23213A62' fill-opacity='.09'%3E%3Cellipse cx='100' cy='42' rx='17' ry='38'/%3E%3Cellipse cx='100' cy='42' rx='17' ry='38' transform='rotate(45 100 100)'/%3E%3Cellipse cx='100' cy='42' rx='17' ry='38' transform='rotate(90 100 100)'/%3E%3Cellipse cx='100' cy='42' rx='17' ry='38' transform='rotate(135 100 100)'/%3E%3Cellipse cx='100' cy='42' rx='17' ry='38' transform='rotate(180 100 100)'/%3E%3Cellipse cx='100' cy='42' rx='17' ry='38' transform='rotate(225 100 100)'/%3E%3Cellipse cx='100' cy='42' rx='17' ry='38' transform='rotate(270 100 100)'/%3E%3Cellipse cx='100' cy='42' rx='17' ry='38' transform='rotate(315 100 100)'/%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='26' fill='%23D4B87A' fill-opacity='.55'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	#main .fusion-fullwidth.helala-bande--photo > .fusion-builder-row {
		position: relative;
		z-index: 1;
	}
}

/* 47. Rail des réalisations : la capture Hamza (1200 x 701) était moins haute
   que celles de Naghma et Ouafae (1600 x 1050) — 233 px contre 263 à
   1 770 px. Même cadre pour les trois, calé en haut de la capture, là où se
   trouvent l'en-tête et le titre du site. */
.helala-rea .fusion-imageframe img {
	aspect-ratio: 16 / 10.5;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: top center;
}

/* --------------------------------------------------------------------------
 * 48. Revue front du 2 octobre 2026, tour 2.
 * ------------------------------------------------------------------------ */

/* 48a. Titres équilibrés, plus de mot seul en dernière ligne (15 cas relevés). */
#main h1, #main h2, #main h3, .fusion-tb-page-title-bar h1 {
	text-wrap: balance;
}
#main p, #main li {
	text-wrap: pretty;
}

/* 48b. Bouton WhatsApp sur mobile : il masquait le début des lignes et le
   « © » du pied de page à gauche. À droite (pas de « haut de page » sur
   mobile), 48 px, et le pied de page réserve sa place. */
@media only screen and (max-width: 1024px) {
	.helala-wa {
		left: auto;
		right: 12px;
		bottom: 12px;
		width: 48px;
		height: 48px;
	}
	.helala-wa svg {
		width: 26px;
		height: 26px;
	}
	.fusion-tb-footer {
		padding-bottom: 72px;
		/* Revue du 3 octobre : la réserve laissait voir le fond blanc. */
		background-color: #213A62;
	}
}

/* 48c. Pied de page : les coordonnées partaient 38 px à droite du bouton
   qu'elles accompagnent. Même bord droit pour les deux. */
@media only screen and (min-width: 1025px) {
	.fusion-tb-footer .fusion-layout-column:has(.fusion-button) .fusion-text {
		text-align: right;
	}
}

/* 48d. Articles : métadonnées héritées du thème en anglais (« By », « Tags: »,
   « 0 Comments ») et formulaire de commentaires anglais. Commentaires fermés
   par la migration 051 ; on garde la seule catégorie, libellée en français. */
.single-post .fusion-meta-tb .fusion-tb-author,
.single-post .fusion-meta-tb .fusion-tb-tags,
.single-post .fusion-meta-tb .fusion-tb-comments,
.single-post .fusion-meta-tb .fusion-meta-tb-sep,
.single-post .fusion-comments-tb {
	display: none !important;
}
.single-post .fusion-meta-tb .fusion-tb-categories {
	font-size: 0;
}
.single-post .fusion-meta-tb .fusion-tb-categories::before {
	content: "Catégorie\00a0: ";
	font-size: 15px;
}
.single-post .fusion-meta-tb .fusion-tb-categories a {
	font-size: 15px;
}
/* En-tête d'article sur mobile : date collée à l'en-tête (5 px), chapô centré
   sur un axe décalé de 16 px. Aligné à gauche comme les autres pages. */
@media only screen and (max-width: 640px) {
	.single-post .fusion-tb-page-title-bar .fusion-layout-column:first-child {
		padding-top: 32px;
	}
	.single-post .fusion-tb-page-title-bar :is(h1, p, .fusion-text) {
		text-align: left !important;
	}
	.single-post .fusion-tb-page-title-bar .fusion-text {
		width: 100% !important;
		max-width: none !important;
		padding-right: 0 !important;
	}
}

/* 48e. Pages de contenu (expertises, métiers, process, études, FAQ) : une
   seule colonne de lecture. « 68ch » mesurait le chiffre zéro, plus large
   que la lettre moyenne : on lisait 85 à 105 caractères par ligne. 680 px
   donnent environ 68 caractères à cette taille. Chapô, corps, FAQ et
   bandeau d'appel partagent le même bord droit ; les grilles (métiers,
   réalisations) prennent toute la largeur. */
.post-content:has(> .helala-etude-h1) > :is(p, ul, ol, h2, h3, .helala-faq, .helala-etude-cta, .helala-processus),
.helala-etude-chapo,
.helala-faq {
	max-width: 680px;
}
.post-content:has(> .helala-etude-h1) > ul.helala-etudes-liste {
	max-width: none;
}
.post-content:has(> .helala-etude-h1) > h2 {
	margin: 56px 0 20px !important;
}
.post-content:has(> .helala-etude-h1) > h2 + :is(p, ul, ol) {
	margin-top: 0 !important;
}
.helala-etude-cta {
	margin-top: 64px;
	padding: 32px;
}
.helala-etude-bouton {
	line-height: 1.3;
	min-height: 48px;
	box-sizing: border-box;
}
@media only screen and (max-width: 640px) {
	.helala-etude-chapo {
		font-size: 18px;
		line-height: 1.55;
	}
	.post-content:has(> .helala-etude-h1) > h2 {
		margin: 40px 0 16px !important;
	}
	.helala-etude-cta {
		margin-top: 48px;
		padding: 28px 20px;
	}
	.helala-etude-bouton {
		display: block;
		width: 100%;
		text-align: center;
		white-space: nowrap;
		padding: 14px 16px;
	}
	.helala-etude-lien-clair {
		display: block;
		margin-top: 16px;
		text-align: center;
	}
}

/* 48f. Métiers : grille 3 + 3 au lieu de 4 + 2, 32 px entre cartes, et une
   invite visible : on voyait des encadrés, pas des liens. */
@media only screen and (min-width: 1025px) {
	.helala-metiers {
		grid-template-columns: repeat(3, 1fr);
	}
}
.helala-metiers {
	gap: 32px;
}
.helala-metier-carte::after {
	content: "Voir ce que nous faisons\00a0→";
	margin-top: 8px;
	color: #2862BD;
	font-weight: 600;
}
.helala-metier-carte:hover,
.helala-metier-carte:focus-visible {
	box-shadow: 0 8px 24px rgba(33, 58, 98, .08);
}

/* 48g. Comment ça se passe : la frise était cinq blocs à bordure, coupés de
   27 px, pastilles à côté du trait. Un trait continu, les pastilles dessus. */
.helala-processus {
	position: relative;
	gap: 0;
	padding-left: 44px !important;
}
.helala-processus::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: #E2E2E2;
}
.helala-processus li {
	position: relative;
	border-left: 0;
	padding: 0 0 32px 0 !important;
}
.helala-processus li:last-child {
	padding-bottom: 0 !important;
}
.helala-processus h2 {
	position: relative;
	display: block;
	margin: 0 0 10px !important;
}
.helala-processus-n {
	position: absolute;
	left: -44px;
	top: .05em;
	width: 32px;
	height: 32px;
	font-size: 15px;
	line-height: 1;
	font-family: inherit;
}
/* Les engagements ne sont pas des liens : couleur du texte, filet or. */
.helala-processus-note {
	color: #212934;
	font-weight: 600;
	border-left: 3px solid #D4B87A;
	padding-left: 12px;
}

/* --------------------------------------------------------------------------
 * 49. Bande « Notre savoir-faire » : scène animée des quatre expertises
 * (helala.js, section 49). Remplace la marguerite fixe de la 46, qui reste en
 * repli sans JavaScript. Séquence jouée une fois à l'arrivée : la marguerite
 * s'ouvre, les fils se tracent, les cartes arrivent, une perle parcourt
 * chaque fil, puis la petite scène de chaque carte. Aucune boucle. Exception
 * assumée à « transform et opacity seulement » : le tracé des fils anime
 * stroke-dashoffset (quatre chemins, une fois). Dès 1 040 px : en dessous,
 * Avada passe la carte de gauche en tablette (jusqu'à 666 px de large) et la
 * scène la recouvrirait ; la marguerite fixe de la 46 reste.
 * ------------------------------------------------------------------------ */
@media only screen and (min-width: 1040px) {
	#main .fusion-fullwidth.helala-bande--photo.hx-a-scene::after {
		content: none;
	}
	.hx-scene {
		--mx: 0;
		--my: 0;
		position: absolute;
		top: 50%;
		/* Bord droit sur celui de la grille (1 260 px centrés, 30 px au moins). */
		right: max(30px, calc((100% - 1260px) / 2));
		width: min(46%, 620px);
		aspect-ratio: 620 / 380;
		transform: translateY(-50%);
		z-index: 2;
		container-type: inline-size;
	}
	.hx-fils {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		overflow: visible;
		transform: translate(calc(var(--mx) * 3px), calc(var(--my) * 3px));
		transition: transform .5s ease-out;
	}
	.hx-fil {
		fill: none;
		stroke: #B28E54;
		stroke-opacity: .75;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
	}
	.hx-perle-svg {
		fill: #2862BD;
		opacity: 0;
	}

	/* Tuile du logo, centrée. */
	.hx-tuile {
		position: absolute;
		left: 41.6%;
		top: 36.3%;
		width: 16.8%;
		aspect-ratio: 1;
		border-radius: 22%;
		background: #213A62;
		box-shadow: 0 14px 34px rgba(33, 58, 98, .28);
	}
	.hx-tuile svg {
		display: block;
		width: 100%;
		height: 100%;
		transform: translate(calc(var(--mx) * 5px), calc(var(--my) * 5px));
		transition: transform .5s ease-out;
	}
	.hx-petale {
		fill: #fff;
		transform-box: view-box;
		transform-origin: 32px 32px;
	}
	.hx-coeur {
		fill: #B28E54;
		transform-box: fill-box;
		transform-origin: center;
	}
	.hx-onde {
		position: absolute;
		left: 41.6%;
		top: 36.3%;
		width: 16.8%;
		aspect-ratio: 1;
		box-sizing: border-box;
		border-radius: 50%;
		border: 2px solid #D4B87A;
		opacity: 0;
		pointer-events: none;
	}

	/* Cartes des expertises. */
	.hx-carte {
		position: absolute;
		width: 32.3%;
		height: 24.2%;
		display: block;
		text-decoration: none !important;
		color: inherit;
		--dx: 0px;
		--dy: 0px;
	}
	.hx-c1 { left: 0; top: 4.2%; --dx: 40px; --dy: 30px; }
	.hx-c2 { right: 0; top: 4.2%; --dx: -40px; --dy: 30px; }
	.hx-c3 { left: 0; bottom: 4.2%; --dx: 40px; --dy: -30px; }
	.hx-c4 { right: 0; bottom: 4.2%; --dx: -40px; --dy: -30px; }
	.hx-p {
		display: flex;
		align-items: center;
		gap: clamp(8px, 2cqw, 14px);
		height: 100%;
		box-sizing: border-box;
		padding: 0 clamp(10px, 2.6cqw, 16px);
		background: #fff;
		border: 1px solid #E2E2E2;
		border-radius: 14px;
		box-shadow: 0 10px 28px rgba(33, 58, 98, .10);
		transform: translate(calc(var(--mx) * 8px), calc(var(--my) * 8px));
		transition: transform .5s ease-out, translate .25s ease, box-shadow .25s ease, border-color .25s ease;
	}
	.hx-carte:hover .hx-p,
	.hx-carte:focus-visible .hx-p {
		translate: 0 -4px;
		border-color: #2862BD;
		box-shadow: 0 16px 34px rgba(33, 58, 98, .16);
	}
	.hx-carte:focus-visible {
		outline: none;
	}
	.hx-carte:focus-visible .hx-p {
		outline: 3px solid #2862BD;
		outline-offset: 3px;
	}
	.hx-icone {
		flex: none;
		width: clamp(34px, 7.4cqw, 46px);
		aspect-ratio: 1;
		border-radius: 12px;
		background: #F3F6FB;
	}
	.hx-icone svg {
		display: block;
		width: 100%;
		height: 100%;
		overflow: visible;
	}
	.hx-texte {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}
	.hx-titre {
		font-family: "DM Sans", sans-serif;
		font-weight: 600;
		font-size: clamp(12px, 2.3cqw, 14px);
		line-height: 1.2;
		color: #213A62;
	}
	.hx-voir {
		font-family: "DM Sans", sans-serif;
		font-weight: 500;
		font-size: clamp(11px, 2.1cqw, 13px);
		color: #2862BD;
	}
	.hx-voir span {
		display: inline-block;
		transition: transform .2s ease;
	}
	.hx-carte:hover .hx-voir span {
		transform: translateX(3px);
	}

	/* Le résultat : le chiffre d'affaires du client, sous la marguerite, entre
	   les deux cartes du bas (fil vertical de la tuile à la carte). */
	.hx-ca {
		position: absolute;
		left: 34.7%;
		width: 30.6%;
		top: 75.3%;
		height: 24.7%;
	}
	.hx-ca-p {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		height: 100%;
		box-sizing: border-box;
		padding: clamp(6px, 1.6cqw, 10px) clamp(8px, 2cqw, 12px);
		background: #fff;
		border: 1px solid #D4B87A;
		border-radius: 14px;
		box-shadow: 0 10px 28px rgba(33, 58, 98, .12);
		transform: translate(calc(var(--mx) * 8px), calc(var(--my) * 8px));
		transition: transform .5s ease-out;
	}
	.hx-ca-graphe {
		display: block;
		width: 100%;
		height: auto;
		overflow: visible;
	}
	.hx-ca-sol { fill: none; stroke: #E2E2E2; stroke-width: 1.5; }
	.hx-barre { fill: #C7D9F5; transform-box: fill-box; transform-origin: center bottom; }
	.hx-barre:nth-child(5), .hx-barre:nth-child(6) { fill: #2862BD; }
	.hx-ca-courbe { fill: none; stroke: #B28E54; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
	.hx-ca-fleche { fill: #B28E54; transform-box: fill-box; transform-origin: center; }
	.hx-ca-titre {
		font-family: "DM Sans", sans-serif;
		font-weight: 600;
		font-size: clamp(11px, 2.1cqw, 13px);
		line-height: 1.2;
		color: #213A62;
		text-align: center;
		white-space: nowrap;
	}
	.hx-pret .hx-fil-ca { animation: hx-trace .4s ease-out 3.2s both paused; }
	.hx-pret .hx-ca { animation: hx-carte .55s cubic-bezier(.2, .9, .3, 1.15) 3.35s both paused; --dx: 0px; --dy: -24px; }
	.hx-pret .hx-barre { animation: hx-monte .45s cubic-bezier(.3, 1.4, .5, 1) calc(3.9s + var(--k) * .1s) both paused; }
	.hx-pret .hx-ca-courbe { animation: hx-trace .6s ease-out 4.45s both paused; }
	.hx-pret .hx-ca-fleche { animation: hx-pop .35s cubic-bezier(.3, 1.8, .5, 1) 4.95s both paused; }
	.hx-pret.hx-joue :is(.hx-fil-ca, .hx-ca, .hx-barre, .hx-ca-courbe, .hx-ca-fleche) {
		animation-play-state: running;
	}

	/* Dessins des icônes. */
	.hx-trait { fill: none; stroke: #213A62; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
	.hx-plein { fill: #213A62; }
	.hx-bloc { fill: #2862BD; transform-box: fill-box; transform-origin: left center; }
	.hx-b2, .hx-b3 { fill: #C7D9F5; }
	.hx-pin { fill: #2862BD; transform-box: fill-box; transform-origin: center bottom; }
	.hx-pin-c { fill: #fff; transform-box: fill-box; transform-origin: center; }
	.hx-ombre { fill: #213A62; opacity: .18; transform-box: fill-box; transform-origin: center; }
	.hx-cible { fill: #2862BD; transform-box: fill-box; transform-origin: center; }
	.hx-dore { fill: none; stroke: #B28E54; stroke-linecap: round; }
	.hx-dore-plein { fill: #B28E54; }
	.hx-piste { fill: #E2E2E2; }
	.hx-piste-on { fill: #2862BD; }
	.hx-bouton { fill: #fff; stroke: #213A62; stroke-width: 1.2; transform: translateX(8px); }
	.hx-notif { fill: #B28E54; transform-box: fill-box; transform-origin: center; }

	/* Chorégraphie : chaque animation attend, figée sur sa première image,
	   que la scène entre dans le champ de vision (classe hx-joue). */
	.hx-pret .hx-tuile { animation: hx-tuile .55s cubic-bezier(.2, .8, .3, 1) 0s both paused; }
	.hx-pret .hx-petale { animation: hx-petale .55s cubic-bezier(.3, 1.45, .5, 1) calc(.3s + var(--k) * .06s) both paused; }
	.hx-pret .hx-coeur { animation: hx-pop .45s cubic-bezier(.3, 1.6, .5, 1) .85s both paused; }
	.hx-pret .hx-fil { animation: hx-trace .6s ease-out calc(1s + var(--k) * .12s) both paused; }
	.hx-pret .hx-carte { animation: hx-carte .55s cubic-bezier(.2, .9, .3, 1.15) calc(1.25s + var(--k) * .12s) both paused; }
	.hx-pret .hx-onde { animation: hx-onde 1.2s ease-out 3.1s both paused; }
	.hx-pret .hx-bloc { animation: hx-bloc .45s cubic-bezier(.2, .8, .3, 1) 2.35s both paused; }
	.hx-pret .hx-b2 { animation-delay: 2.5s; }
	.hx-pret .hx-b3 { animation-delay: 2.62s; }
	.hx-pret .hx-pin { animation: hx-pin .6s cubic-bezier(.3, 1.5, .5, 1) 2.5s both paused; }
	.hx-pret .hx-pin-c { animation: hx-pop .35s ease-out 2.95s both paused; }
	.hx-pret .hx-ombre { animation: hx-pop .6s ease-out 2.5s both paused; }
	.hx-pret .hx-fleche { animation: hx-fleche .45s cubic-bezier(.5, 0, .7, .4) 2.65s both paused; }
	.hx-pret .hx-cible { animation: hx-pop .4s cubic-bezier(.3, 1.8, .5, 1) 3.08s both paused; }
	.hx-pret .hx-t1 { animation: hx-bascule .35s ease-in-out 2.8s both paused; }
	.hx-pret .hx-p1 { animation: hx-allume .35s ease-in-out 2.8s both paused; }
	.hx-pret .hx-t2 { animation: hx-bascule .35s ease-in-out 3s both paused; }
	.hx-pret .hx-p2 { animation: hx-allume .35s ease-in-out 3s both paused; }
	.hx-pret .hx-notif { animation: hx-pop .4s cubic-bezier(.3, 1.8, .5, 1) 3.25s both paused; }
	.hx-pret.hx-joue :is(.hx-tuile, .hx-petale, .hx-coeur, .hx-fil, .hx-carte, .hx-onde, .hx-bloc, .hx-pin, .hx-pin-c, .hx-ombre, .hx-fleche, .hx-cible, .hx-bouton, .hx-piste-on, .hx-notif) {
		animation-play-state: running;
	}

	/* Survol : la scène de la carte se rejoue (même dessin, autre nom). */
	.hx-scene .hx-rejoue .hx-bloc { animation: hx-bloc-b .45s cubic-bezier(.2, .8, .3, 1) 0s both running; }
	.hx-scene .hx-rejoue .hx-b2 { animation-delay: .12s; }
	.hx-scene .hx-rejoue .hx-b3 { animation-delay: .24s; }
	.hx-scene .hx-rejoue .hx-pin { animation: hx-pin-b .6s cubic-bezier(.3, 1.5, .5, 1) 0s both running; }
	.hx-scene .hx-rejoue .hx-ombre { animation: hx-pop-b .6s ease-out 0s both running; }
	.hx-scene .hx-rejoue .hx-fleche { animation: hx-fleche-b .45s cubic-bezier(.5, 0, .7, .4) 0s both running; }
	.hx-scene .hx-rejoue .hx-cible { animation: hx-pop-b .4s cubic-bezier(.3, 1.8, .5, 1) .42s both running; }
	.hx-scene .hx-rejoue .hx-t1 { animation: hx-bascule-b .35s ease-in-out 0s both running; }
	.hx-scene .hx-rejoue .hx-p1 { animation: hx-allume-b .35s ease-in-out 0s both running; }
	.hx-scene .hx-rejoue .hx-t2 { animation: hx-bascule-b .35s ease-in-out .15s both running; }
	.hx-scene .hx-rejoue .hx-p2 { animation: hx-allume-b .35s ease-in-out .15s both running; }
	.hx-scene .hx-rejoue .hx-notif { animation: hx-pop-b .4s cubic-bezier(.3, 1.8, .5, 1) .35s both running; }
}

@keyframes hx-tuile { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes hx-petale { from { transform: rotate(-50deg) scale(0); } to { transform: none; } }
@keyframes hx-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes hx-monte { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hx-pop-b { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes hx-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hx-carte { from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes hx-onde { 0% { opacity: 0; transform: scale(1); } 12% { opacity: .7; } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes hx-bloc { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hx-bloc-b { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hx-pin { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes hx-pin-b { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes hx-fleche { from { opacity: 0; transform: translate(18px, -18px); } to { opacity: 1; transform: none; } }
@keyframes hx-fleche-b { from { opacity: 0; transform: translate(18px, -18px); } to { opacity: 1; transform: none; } }
@keyframes hx-bascule { from { transform: translateX(0); } to { transform: translateX(8px); } }
@keyframes hx-bascule-b { from { transform: translateX(0); } to { transform: translateX(8px); } }
@keyframes hx-allume { from { opacity: 0; } to { opacity: 1; } }
@keyframes hx-allume-b { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
 * 50. Section « Un seul interlocuteur » : les deux illustrations réunies en
 * une scène animée (helala.js, section 50). La première colonne image reçoit
 * la scène et prend la place des deux sur ordinateur ; la seconde est masquée.
 * Séquence d'environ 6,5 s, jouée une fois : conversation, fil vers le code,
 * code qui s'écrit, fil vers le site, site qui se construit, pastille « en
 * ligne ». Exception assumée à « transform et opacity » : stroke-dashoffset
 * pour le tracé des deux fils, une fois.
 * ------------------------------------------------------------------------ */
.hy-col .fusion-imageframe,
.fusion-layout-column.hy-cache {
	display: none !important;
}
@media only screen and (min-width: 1025px) {
	.fusion-layout-column.hy-col {
		--awb-width-large: 50% !important;
		--awb-spacing-right-large: 0px !important;
	}
}
.hy-scene {
	--mx: 0;
	--my: 0;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(22, 41, 74, .18);
}
.hy-svg {
	display: block;
	width: 100%;
	height: auto;
}
.hy-par {
	transform: translate(calc(var(--mx) * var(--p) * 2px), calc(var(--my) * var(--p) * 2px));
	transition: transform .5s ease-out;
}
.hy-fil {
	fill: none;
	stroke: #D4B87A;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}
.hy-perle {
	fill: #fff;
	opacity: 0;
}
.hy-tape {
	opacity: 0;
}
.hy-bulle,
.hy-maq,
.hy-etape,
.hy-bloc,
.hy-badge,
.hy-onde {
	transform-box: fill-box;
	transform-origin: center;
}
.hy-ligne {
	transform-box: fill-box;
	transform-origin: left center;
}
.hy-onde {
	opacity: 0;
}

/* Chorégraphie : figée sur la première image jusqu'à l'entrée dans le champ. */
.hy-pret .hy-tel { animation: hy-entre .6s cubic-bezier(.2, .8, .3, 1) 0s both paused; }
.hy-pret .hy-pc { animation: hy-entre .6s cubic-bezier(.2, .8, .3, 1) .2s both paused; }
.hy-pret .hy-site { animation: hy-entre .6s cubic-bezier(.2, .8, .3, 1) .35s both paused; }
.hy-pret .hy-bulle { animation: hy-bulle .4s cubic-bezier(.3, 1.4, .5, 1) var(--d) both paused; }
.hy-pret .hy-tape1 { animation: hy-tape .6s ease 1s both paused; }
.hy-pret .hy-tape2 { animation: hy-tape .6s ease 2.3s both paused; }
.hy-pret .hy-f1 { animation: hy-trace .7s ease-out 3s both paused; }
.hy-pret .hy-maq { animation: hy-bulle .45s cubic-bezier(.3, 1.4, .5, 1) 3.25s both paused; }
.hy-pret .hy-e1 { animation: hy-pop .4s cubic-bezier(.3, 1.7, .5, 1) 3.35s both paused; }
.hy-pret .hy-e2 { animation: hy-pop .4s cubic-bezier(.3, 1.7, .5, 1) 3.7s both paused; }
.hy-pret .hy-ligne { animation: hy-ligne .28s ease-out calc(3.85s + var(--k) * .11s) both paused; }
.hy-pret .hy-curseur { animation: hy-clignote .5s steps(1) 4.75s 4 both paused; }
.hy-pret .hy-f2 { animation: hy-trace .5s ease-out 4.7s both paused; }
.hy-pret .hy-bloc { animation: hy-bloc .4s cubic-bezier(.3, 1.3, .5, 1) calc(5.2s + var(--k) * .12s) both paused; }
.hy-pret .hy-badge { animation: hy-pop .45s cubic-bezier(.3, 1.8, .5, 1) 5.95s both paused; }
.hy-pret .hy-onde { animation: hy-onde 1.1s ease-out 6.1s both paused; }
.hy-pret.hy-joue :is(.hy-tel, .hy-pc, .hy-site, .hy-bulle, .hy-tape, .hy-fil, .hy-maq, .hy-etape, .hy-ligne, .hy-curseur, .hy-bloc, .hy-badge, .hy-onde) {
	animation-play-state: running;
}

/* Survol : le code se réécrit et le site se reconstruit (autres noms). */
.hy-pret.hy-rejoue .hy-ligne { animation: hy-ligne-b .22s ease-out calc(var(--k) * .06s) both running; }
.hy-pret.hy-rejoue .hy-bloc { animation: hy-bloc-b .4s cubic-bezier(.3, 1.3, .5, 1) calc(.5s + var(--k) * .1s) both running; }
.hy-pret.hy-rejoue .hy-badge { animation: hy-pop-b .45s cubic-bezier(.3, 1.8, .5, 1) 1s both running; }
.hy-pret.hy-rejoue .hy-onde { animation: hy-onde-b 1.1s ease-out 1.1s both running; }

@keyframes hy-entre { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hy-bulle { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes hy-tape { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hy-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hy-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes hy-pop-b { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes hy-ligne { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hy-ligne-b { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hy-clignote { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes hy-bloc { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes hy-bloc-b { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes hy-onde { 0% { opacity: 0; transform: scale(1); } 12% { opacity: .8; } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes hy-onde-b { 0% { opacity: 0; transform: scale(1); } 12% { opacity: .8; } 100% { opacity: 0; transform: scale(2.6); } }

/* --------------------------------------------------------------------------
 * 51. Section « Joignable, vraiment » : scène globe, canaux et horloge à la
 * place de la capture Naghma (helala.js, section 51). Séquence d'environ
 * 4,5 s, jouée une fois ; arcs et sonnerie rejoués au survol. Exception
 * assumée à « transform et opacity » : stroke-dashoffset pour les arcs et la
 * plage horaire.
 * ------------------------------------------------------------------------ */
.fusion-imageframe.hz-remplace {
	display: none !important;
}
.hz-scene {
	--mx: 0;
	--my: 0;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(22, 41, 74, .18);
}
.hz-svg {
	display: block;
	width: 100%;
	height: auto;
}
.hz-par {
	transform: translate(calc(var(--mx) * var(--p) * 2px), calc(var(--my) * var(--p) * 2px));
	transition: transform .5s ease-out;
}
.hz-grille {
	fill: none;
	stroke: #fff;
	stroke-opacity: .12;
	stroke-width: 1;
}
.hz-arc {
	fill: none;
	stroke: #D4B87A;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}
.hz-fil {
	stroke-dasharray: .02 .025;
	stroke-opacity: .9;
}
.hz-perle {
	fill: #fff;
	opacity: 0;
}
.hz-onde {
	opacity: 0;
}
.hz-globe,
.hz-point,
.hz-epingle,
.hz-onde,
.hz-canal,
.hz-horloge,
.hz-jour,
.hz-notif,
.hz-rec,
.hz-sonne {
	transform-box: fill-box;
	transform-origin: center;
}
.hz-epingle {
	transform-origin: center bottom;
}
.hz-aiguille {
	transform: rotate(315deg);
}
.hz-jour {
	opacity: 1;
}

/* Chorégraphie. */
.hz-pret .hz-globe { animation: hz-globe .7s cubic-bezier(.2, .8, .3, 1) 0s both paused; }
.hz-pret .hz-epingle { animation: hz-epingle .6s cubic-bezier(.3, 1.5, .5, 1) .6s both paused; }
.hz-pret .hz-onde { animation: hz-onde 1.1s ease-out 1.1s both paused; }
.hz-pret .hz-arc { animation: hz-trace .6s ease-out calc(1.3s + var(--k, 0) * .2s) both paused; }
.hz-pret .hz-point { animation: hz-pop .4s cubic-bezier(.3, 1.7, .5, 1) calc(1.8s + var(--k) * .2s) both paused; }
.hz-pret .hz-fil { animation: hz-apparait .4s ease 2.7s both paused; }
.hz-pret .hz-canal { animation: hz-canal .55s cubic-bezier(.2, .9, .3, 1.1) calc(1.9s + var(--k) * .18s) both paused; }
.hz-pret .hz-sonne { animation: hz-sonne .5s ease-in-out 2.8s 2 both paused; }
.hz-pret .hz-notif { animation: hz-pop .4s cubic-bezier(.3, 1.8, .5, 1) 3.75s both paused; }
.hz-pret .hz-rec { animation: hz-clignote .6s steps(1) 3.2s 3 both paused; }
.hz-pret .hz-horloge { animation: hz-canal .55s cubic-bezier(.2, .9, .3, 1.1) 2.5s both paused; }
.hz-pret .hz-plage { animation: hz-trace 1s ease-in-out 3.1s both paused; }
.hz-pret .hz-aiguille { animation: hz-aiguille 1s ease-in-out 3.1s both paused; }
.hz-pret .hz-jour { animation: hz-jour .3s ease calc(3.5s + var(--k) * .09s) both paused; }
.hz-pret.hz-joue :is(.hz-globe, .hz-epingle, .hz-onde, .hz-arc, .hz-point, .hz-canal, .hz-sonne, .hz-notif, .hz-rec, .hz-horloge, .hz-plage, .hz-aiguille, .hz-jour) {
	animation-play-state: running;
}

/* Survol : les arcs se retracent, le téléphone resonne. */
.hz-pret.hz-rejoue .hz-arc { animation: hz-trace-b .5s ease-out calc(var(--k, 0) * .12s) both running; }
.hz-pret.hz-rejoue .hz-fil { animation: hz-trace-b .5s ease-out .2s both running; }
.hz-pret.hz-rejoue .hz-onde { animation: hz-onde-b 1s ease-out 0s both running; }
.hz-pret.hz-rejoue .hz-sonne { animation: hz-sonne-b .5s ease-in-out .3s 2 both running; }

@keyframes hz-globe { from { opacity: 0; transform: scale(.85) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes hz-epingle { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes hz-onde { 0% { opacity: 0; transform: scale(1); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes hz-onde-b { 0% { opacity: 0; transform: scale(1); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes hz-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hz-trace-b { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hz-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes hz-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes hz-canal { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes hz-sonne { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@keyframes hz-sonne-b { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@keyframes hz-clignote { 0% { opacity: 1; } 50% { opacity: .15; } }
@keyframes hz-aiguille { from { transform: rotate(120deg); } to { transform: rotate(315deg); } }
@keyframes hz-jour { from { opacity: .2; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
 * 52. Section « Un prix, dès le premier échange » : scène devis = facture à
 * la place de la capture Ouafae (helala.js, section 52). Aucun montant : les
 * prix sont des barres. Environ 4,8 s, une fois ; lignes et « = » rejoués au
 * survol. Exception assumée : stroke-dashoffset pour le petit fil.
 * ------------------------------------------------------------------------ */
.fusion-imageframe.hq-remplace {
	display: none !important;
}
.hq-scene {
	--mx: 0;
	--my: 0;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}
/* La scène est carrée : sur ordinateur, centrée en hauteur face au texte et à
   la lettre d'information, plus de vide sous elle. */
@media only screen and (min-width: 1025px) {
	#main .fusion-row .fusion-layout-column:has(> .fusion-column-wrapper .hq-scene) {
		align-self: center !important;
	}
}
.hq-svg {
	display: block;
	width: 100%;
	height: auto;
}
.hq-par {
	transform: translate(calc(var(--mx) * var(--p) * 2px), calc(var(--my) * var(--p) * 2px));
	transition: transform .5s ease-out;
}
.hq-fil {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}
.hq-onde {
	opacity: 0;
}
.hq-bulle,
.hq-devis,
.hq-facture,
.hq-coche-fond,
.hq-egal,
.hq-onde,
.hq-tampon {
	transform-box: fill-box;
	transform-origin: center;
}
.hq-libelle,
.hq-montant,
.hq-total {
	transform-box: fill-box;
	transform-origin: left center;
}
.hq-montant,
.hq-total {
	transform-origin: right center;
}

/* Chorégraphie. */
.hq-pret .hq-bulle { animation: hq-pop .45s cubic-bezier(.3, 1.5, .5, 1) 0s both paused; transform-origin: left bottom; }
.hq-pret .hq-fil { animation: hq-trace .4s ease-out .45s both paused; }
.hq-pret .hq-devis { animation: hq-monte .55s cubic-bezier(.2, .8, .3, 1) .6s both paused; }
.hq-pret .hq-devis .hq-coche-fond { animation: hq-pop .35s cubic-bezier(.3, 1.8, .5, 1) calc(1.2s + var(--k) * .3s) both paused; }
.hq-pret .hq-devis .hq-coche { animation: hq-apparait .2s ease calc(1.35s + var(--k) * .3s) both paused; }
.hq-pret .hq-devis .hq-libelle { animation: hq-barre .3s ease-out calc(1.2s + var(--k) * .3s) both paused; }
.hq-pret .hq-devis .hq-montant { animation: hq-barre .3s ease-out calc(1.35s + var(--k) * .3s) both paused; }
.hq-pret .hq-devis .hq-total { animation: hq-barre .45s ease-out 2.5s both paused; }
.hq-pret .hq-facture { animation: hq-glisse .6s cubic-bezier(.2, .9, .3, 1.1) 3s both paused; }
.hq-pret .hq-facture .hq-coche-fond { animation: hq-pop .3s cubic-bezier(.3, 1.8, .5, 1) calc(3.45s + var(--k) * .08s) both paused; }
.hq-pret .hq-facture .hq-coche { animation: hq-apparait .2s ease calc(3.5s + var(--k) * .08s) both paused; }
.hq-pret .hq-facture .hq-libelle,
.hq-pret .hq-facture .hq-montant { animation: hq-barre .25s ease-out calc(3.45s + var(--k) * .08s) both paused; }
.hq-pret .hq-facture .hq-total { animation: hq-barre .35s ease-out 3.85s both paused; }
.hq-lien { opacity: 1; }
.hq-pret .hq-lien { animation: hq-apparait .5s ease 3.9s both paused; }
.hq-pret .hq-egal { animation: hq-pop .45s cubic-bezier(.3, 1.8, .5, 1) 4.2s both paused; }
.hq-pret .hq-onde { animation: hq-onde 1.1s ease-out 4.35s both paused; }
.hq-pret .hq-tampon { animation: hq-tampon .4s cubic-bezier(.5, 0, .5, 1.4) 4.6s both paused; }
.hq-pret.hq-joue :is(.hq-bulle, .hq-fil, .hq-lien, .hq-devis, .hq-facture, .hq-coche-fond, .hq-coche, .hq-libelle, .hq-montant, .hq-total, .hq-egal, .hq-onde, .hq-tampon) {
	animation-play-state: running;
}

/* Survol : les deux documents se recochent ensemble, le « = » repart. */
.hq-pret.hq-rejoue .hq-coche-fond { animation: hq-pop-b .3s cubic-bezier(.3, 1.8, .5, 1) calc(var(--k) * .1s) both running; }
.hq-pret.hq-rejoue .hq-total { animation: hq-barre-b .35s ease-out .45s both running; }
.hq-pret.hq-rejoue .hq-onde { animation: hq-onde-b 1s ease-out .6s both running; }

@keyframes hq-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes hq-pop-b { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes hq-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hq-monte { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hq-glisse { from { opacity: 0; transform: translateX(46px) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes hq-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes hq-barre { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hq-barre-b { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hq-onde { 0% { opacity: 0; transform: scale(1); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes hq-onde-b { 0% { opacity: 0; transform: scale(1); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes hq-tampon { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
 * 54. Icônes des quatre expertises : le dessin de la scène à la place du
 * glyphe Font Awesome (helala.js, section 54). Le cercle d'Avada reste.
 * Et, revue du 3 octobre : sous les illustrations recadrées des cartes
 * Services et Produits, le bas du disque laisse 18 px transparents à 287 px
 * de large ; l'écart visible image → titre était de 42 px pour 24. On retire
 * ces 18 px de la marge (ordinateur, où la largeur est connue).
 * ------------------------------------------------------------------------ */
.fontawesome-icon.helala-ic-svg::before {
	content: none !important;
}
.fontawesome-icon.helala-ic-svg {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.fontawesome-icon.helala-ic-svg svg {
	width: 58%;
	height: 58%;
	display: block;
}
@media only screen and (min-width: 1025px) {
	#wrapper .helala-sec .fusion-layout-column[style*="--awb-bg-color"] .fusion-image-element:has(img[src*="-recadree"]):not(:has(img[src*="illu-produit-"])),
	#main .fusion-image-element:has(img[src*="-recadree"]):not(:has(img[src*="illu-produit-"])) {
		margin-bottom: 6px !important;
	}
}

/* 55. Liens légaux du pied de page (helala.js, section 55). */
.helala-legal a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.helala-legal a:hover,
.helala-legal a:focus-visible {
	color: #D4B87A;
}

/* --------------------------------------------------------------------------
 * 56. Scènes « Une méthode éprouvée », « Comment se déroule un projet » et
 * « Un doute sur le produit adapté ? » (helala.js, section 56). Mécanique
 * commune : un élément « .an » porte son animation en variables (--a nom,
 * --d délai, --t durée, --o origine). Exception assumée à « transform et
 * opacity » : stroke-dashoffset pour les tracés.
 * ------------------------------------------------------------------------ */
.fusion-imageframe.hs-remplace {
	display: none !important;
}
.hs-scene {
	--mx: 0;
	--my: 0;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(22, 41, 74, .18);
}
.hs-svg {
	display: block;
	width: 100%;
	height: auto;
	transform: translate(calc(var(--mx) * 5px), calc(var(--my) * 5px)) scale(1.015);
	transition: transform .6s ease-out;
}
.hs-svg .an {
	transform-box: fill-box;
	transform-origin: var(--o, center);
}
.hs-pret .an {
	animation: var(--a) var(--t, .5s) cubic-bezier(.2, .8, .3, 1) var(--d, 0s) both paused;
}
.hs-pret.hs-joue .an {
	animation-play-state: running;
}
.hs-pret.hs-reset .an {
	animation: none !important;
}
.hs-svg [style*="hs-route"] {
	transform-box: view-box;
}
.hs-pret [style*="hs-route"],
.hs-pret [style*="hs-balaye"] {
	animation-timing-function: ease-in-out;
}

@keyframes hs-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes hs-monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes hs-glisse { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes hs-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes hs-trace { from { stroke-dashoffset: 1; stroke-dasharray: 1; } to { stroke-dashoffset: 0; stroke-dasharray: 1; } }
@keyframes hs-barre { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hs-onde { 0% { opacity: 0; transform: scale(1); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes hs-loupe { 0% { opacity: 0; transform: translate(-34px, -8px); } 30% { opacity: 1; } 60% { transform: translate(-12px, 6px); } 100% { opacity: 1; transform: none; } }
@keyframes hs-route {
	0%, 12% { transform: translateX(-510px); }
	27%, 39% { transform: translateX(-340px); }
	54%, 66% { transform: translateX(-170px); }
	81%, 100% { transform: translateX(0); }
}
@keyframes hs-balaye {
	0% { opacity: 0; transform: translateY(-80px); }
	10% { opacity: 1; transform: translateY(-80px); }
	35% { transform: translateY(0); }
	55% { transform: translateY(80px); }
	75% { transform: translateY(160px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
 * 57. Page Réalisations refaite (migration 060) : repères, fiches avec
 * étiquettes, mesures et deux liens, « ce qu'ils ont en commun ».
 * ------------------------------------------------------------------------ */
.helala-rea-surtitre {
	margin: clamp(32px, 6vw, 72px) 0 -8px !important;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #2862BD;
}
.helala-rea-surtitre + .helala-etude-h1 {
	margin-top: 12px !important;
}
.helala-rea-reperes {
	list-style: none;
	margin: 32px 0 48px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.helala-rea-reperes li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 18px 20px;
	background: #F3F6FB;
	border-radius: 12px;
	border-left: 3px solid #B28E54;
}
.helala-rea-reperes strong {
	font-family: var(--h2_typography-font-family), 'Syne', sans-serif;
	font-size: 34px;
	line-height: 1;
	color: #213A62;
	white-space: nowrap;
}
.helala-rea-reperes span {
	font-size: 15px;
	line-height: 1.45;
	color: #5B6677;
}
.helala-rea-grille {
	display: grid;
	gap: 28px;
}
.helala-rea-fiche {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 32px;
	align-items: center;
	padding: 24px;
	background: #FFFFFF;
	border: 1px solid #E2E2E2;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(33, 58, 98, .06);
}
/* wpautop laisse un <p> vide entre l'image et le corps : il prenait une
   cellule de la grille et décalait le corps sous l'image. Les grilles de
   repères et de points communs sortent de la colonne de lecture (48e). */
.helala-rea-fiche > p:empty {
	display: none;
}
.post-content:has(> .helala-etude-h1) > ul:is(.helala-rea-reperes, .helala-rea-communs) {
	max-width: none;
}
.helala-rea-fiche:nth-child(even) .helala-rea-image {
	order: 2;
}
.helala-rea-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	border: 1px solid #E2E2E2;
	transition: transform .3s ease;
}
.helala-rea-image:hover img {
	transform: translateY(-4px);
}
.helala-rea-corps h2 {
	margin: 0 0 10px !important;
	font-size: clamp(24px, 2.4vw, 30px) !important;
	line-height: 1.15 !important;
}
.helala-rea-corps h2 a {
	color: #213A62;
	text-decoration: none;
}
.helala-rea-corps > p {
	margin: 0 0 14px;
	color: #212934;
}
.helala-rea-mesures {
	display: flex;
	gap: 28px;
	margin: 6px 0 18px;
	padding: 14px 0 0;
	border-top: 1px solid #E2E2E2;
}
.helala-rea-mesures dt {
	font-size: 13px;
	color: #5B6677;
}
.helala-rea-mesures dd {
	margin: 2px 0 0;
	font-size: 20px;
	font-weight: 700;
	color: #213A62;
}
.helala-rea-liens {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 0 !important;
}
.helala-rea-liens a {
	font-weight: 600;
	color: #2862BD;
	text-decoration: none;
}
.helala-rea-liens a:first-child {
	padding: 10px 18px;
	border-radius: 8px;
	background: #2862BD;
	color: #FFFFFF;
}
.helala-rea-liens a:hover {
	text-decoration: underline;
}
.helala-rea-h2 {
	margin: 64px 0 20px !important;
}
.helala-rea-communs {
	list-style: none;
	margin: 0 0 48px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.helala-rea-communs li {
	display: grid;
	gap: 6px;
	padding: 20px;
	border: 1px solid #E2E2E2;
	border-radius: 12px;
	border-top: 3px solid #2862BD;
}
.helala-rea-communs strong {
	color: #213A62;
	font-size: 17px;
}
.helala-rea-communs span {
	color: #5B6677;
	font-size: 15px;
	line-height: 1.5;
}
@media only screen and (max-width: 900px) {
	.helala-rea-reperes,
	.helala-rea-communs {
		grid-template-columns: 1fr 1fr;
	}
	.helala-rea-fiche {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 16px;
	}
	.helala-rea-fiche:nth-child(even) .helala-rea-image {
		order: 0;
	}
}
@media only screen and (max-width: 560px) {
	.helala-rea-reperes,
	.helala-rea-communs {
		grid-template-columns: 1fr;
	}
}
@media (prefers-reduced-motion: reduce) {
	.helala-rea-image img {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * 58. Section « La différence » de l'accueil (migration 067, après l'audit
 * comparé avec pasteship.io) : comparatif Ailleurs / Avec Helala, ligne du
 * suivi mensuel, audit express en deux champs. Couleurs du référentiel :
 * marine #213A62 sur blanc, gris texte #5B6677 (5,74:1), bleu action #2862BD
 * pour la seule coche et le bouton.
 * ------------------------------------------------------------------------ */
.hd-comparatif {
	max-width: 960px;
	margin-bottom: 40px;
}
.hd-entetes,
.hd-lignes li {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.hd-entetes {
	padding: 0 20px 12px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.hd-entetes .hd-eux { color: #5B6677; }
.hd-entetes .hd-nous { color: #213A62; }
.hd-lignes {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #E2E2E2;
	border-radius: 14px;
	overflow: hidden;
	background: #FFFFFF;
}
.hd-lignes li {
	padding: 18px 20px;
	margin: 0;
	line-height: 1.5;
}
.hd-lignes li + li {
	border-top: 1px solid #E2E2E2;
}
.hd-lignes .hd-eux,
.hd-lignes .hd-nous {
	position: relative;
	padding-inline-start: 30px;
}
.hd-lignes .hd-eux {
	color: #5B6677;
}
.hd-lignes .hd-nous {
	color: #213A62;
	font-weight: 600;
}
.hd-lignes .hd-eux::before,
.hd-lignes .hd-nous::before {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	font-weight: 700;
}
.hd-lignes .hd-eux::before {
	content: "\2715";
	color: #5B6677;
}
.hd-lignes .hd-nous::before {
	content: "\2713";
	color: #2862BD;
}
.hd-suivi {
	margin: 20px 0 0;
	padding: 16px 20px;
	border-radius: 14px;
	background: #F3F6FB;
	border-inline-start: 4px solid #2862BD;
	color: #212934;
}
.hd-suivi strong {
	color: #213A62;
}
.hd-audit {
	max-width: 960px;
	border: 1px solid #E2E2E2;
	border-radius: 14px;
	padding: 24px;
	background: #FFFFFF;
}
.hd-audit-titre {
	margin: 0;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: #213A62;
}
.hd-audit-champs {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: end;
	gap: 12px;
	margin-bottom: 4px;
}
.hd-audit .hp-envoyer {
	white-space: nowrap;
}
.hd-audit .hp-envoyer:focus-visible,
.hd-audit .hp-champ input:focus-visible {
	outline: 3px solid #2862BD;
	outline-offset: 2px;
}
.hd-comparatif .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
@media only screen and (max-width: 800px) {
	.hd-entetes {
		display: none;
	}
	.hd-lignes li {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.hd-audit-champs {
		grid-template-columns: 1fr;
	}
	.hd-audit .hp-envoyer {
		width: 100%;
	}
}
/* 58 bis. Mesuré après la mise en ligne : la règle de longueur de ligne
 * (68ch) bridait la liste et la ligne de suivi à 837 px ; et le conteneur,
 * recopié de « Conseils »,
 * peint ses liens en encre (#000). Corrigé ici, pour cette section seule. */
.hd-comparatif {
	margin-top: 16px;
}
.hd-comparatif .hd-lignes,
.hd-comparatif .hd-suivi {
	max-width: none;
}
.hd-audit .hp-aide a {
	color: #2862BD !important;
	font-weight: 600;
	text-decoration: underline;
}
/* 58 ter. Sous 640 px, la feuille centre les <p> des fusion_text (règle
 * #wrapper … .fusion-text p, voulue pour tout le site) : la section la suit.
 * Seule la marge haute de la ligne de suivi, retirée par Avada, est reprise. */
.hd-comparatif p.hd-suivi {
	margin-top: 20px !important;
}

/* 59. Pages de service illustrées (migration 070, Bachir 12 oct. : « aucune
   page qu'avec du texte »). Illustration de tête dans la colonne restée vide
   à droite de la largeur de lecture (680 px), encadré « En bref »,
   prestations en cartes à pictogramme, galerie des quatre réalisations.
   Dessins : illustrations/services.py. */
.helala-svc-tete {
	margin: clamp(24px, 5vw, 56px) auto 0;
	width: min(240px, 60vw);
}
.helala-svc-tete img {
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width: 1099px) {
	.post-content > .helala-svc-tete + .helala-etude-h1 {
		margin-top: 20px !important;
	}
}
@media (min-width: 1100px) {
	.helala-svc-tete {
		float: right;
		width: clamp(340px, 30vw, 440px);
		margin: clamp(32px, 6vw, 72px) 0 24px 40px;
	}
}
.helala-svc-bref {
	max-width: 680px;
	margin: 32px 0 0;
	padding: 24px 28px 8px;
	background: #F3F6FB;
	border-radius: 12px;
	border-left: 4px solid #2862BD;
}
.helala-svc-bref h2 {
	margin: 0 0 12px !important;
	font-size: 1.3em !important;
}
.helala-svc-grille,
.helala-svc-galerie {
	clear: both;
	display: grid;
	gap: 20px;
	margin: 8px 0 12px;
}
.helala-svc-grille {
	grid-template-columns: 1fr;
}
/* Colonnes choisies selon le nombre de cartes (générateur) : 6 = 3 + 3,
   8 = 4 + 4, 4 = 2 + 2, jamais une carte seule sur sa ligne quand on peut
   l'éviter. */
@media (min-width: 640px) {
	.helala-svc-grille {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1000px) {
	.helala-svc-grille--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1200px) {
	.helala-svc-grille--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}
.helala-svc-carte {
	padding: 24px;
	background: #FFFFFF;
	border: 1px solid #E2E2E2;
	border-radius: 12px;
}
.helala-svc-picto {
	display: block;
	width: 72px;
	height: 72px;
}
.helala-svc-carte h3 {
	margin: 14px 0 8px !important;
	font-size: 1.12em !important;
	line-height: 1.3 !important;
	color: #213A62;
}
.helala-svc-carte p {
	margin: 0 !important;
	font-size: .97em;
}
.helala-svc-galerie {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-bottom: 20px;
}
.helala-svc-site {
	display: grid;
	gap: 10px;
	align-content: start;
	text-decoration: none;
	color: #212934;
}
.helala-svc-site img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid #E2E2E2;
	transition: transform .3s ease;
}
.helala-svc-site:hover img,
.helala-svc-site:focus-visible img {
	transform: translateY(-4px);
}
.helala-svc-site strong {
	display: block;
	font-size: 1.1em;
	color: #213A62;
}
@media (prefers-reduced-motion: reduce) {
	.helala-svc-site img {
		transition: none;
	}
}
@media (max-width: 639px) {
	.helala-svc-bref {
		padding: 20px 18px 4px;
	}
	.helala-svc-bref ul {
		padding-left: 18px;
	}
	.helala-svc-carte {
		padding: 20px;
	}
}

/* 60. Pages de service, revue visuelle du 12 oct. (tour 1). Rythme : sections
   à 58–69 px → 96 px (64 px mobile), gouttières 20 → 32 px, titres de carte
   réservés sur deux lignes pour que les textes d'une rangée partent ensemble,
   illustration de tête réduite sur mobile pour que le titre remonte, h2 mobile
   ramenés sous le h1, date de mise à jour détachée du bloc d'appel. */
.post-content:has(> .helala-svc-tete) > h2 {
	margin-top: 96px !important;
	text-wrap: balance;
}
.post-content:has(> .helala-svc-tete) > .helala-etude-h1 {
	text-wrap: balance;
}
.helala-svc-grille,
.helala-svc-galerie {
	gap: 32px;
}
@media (min-width: 1000px) {
	.helala-svc-grille--3 .helala-svc-carte h3,
	.helala-svc-grille--4 .helala-svc-carte h3 {
		min-height: 2.6em;
	}
}
.helala-maj {
	margin-top: 32px !important;
}
@media (max-width: 639px) {
	.post-content:has(> .helala-svc-tete) > h2 {
		margin-top: 64px !important;
		font-size: 26px !important;
		line-height: 1.2 !important;
	}
	.helala-svc-tete {
		width: 128px;
		margin-top: 16px;
	}
	.post-content > .helala-svc-tete + .helala-etude-h1 {
		margin-top: 16px !important;
	}
	.helala-svc-grille,
	.helala-svc-galerie {
		gap: 24px;
	}
}

/* 60 bis. Tour 2 de la revue. La hauteur réservée aux titres de carte creusait
   50 px sous les titres courts et ne suffisait pas au titre GEO de 4 lignes :
   les cartes passent en subgrid (icône, titre, texte), chaque rangée prend la
   hauteur de son plus long titre. Le paragraphe vide laissé par wpautop entre
   l'icône et le titre sort de la grille. */
.helala-svc-carte > .helala-svc-picto + p {
	display: none;
}
@media (min-width: 640px) {
	.helala-svc-carte {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		row-gap: 0;
	}
}
@media (min-width: 1000px) {
	.helala-svc-grille--3 .helala-svc-carte h3,
	.helala-svc-grille--4 .helala-svc-carte h3 {
		min-height: 0;
	}
}
/* Bloc d'appel au rythme des sections, marges intérieures égales. */
.post-content:has(> .helala-svc-tete) > .helala-etude-cta {
	margin-top: 96px;
}
.helala-etude-cta > p:last-child {
	margin-bottom: 0;
}
/* Listes à puces au même retrait que les listes numérotées. */
.post-content:has(> .helala-svc-tete) > ul {
	padding-left: 1.35em;
}
@media (max-width: 639px) {
	.post-content:has(> .helala-svc-tete) > .helala-etude-cta {
		margin-top: 64px;
	}
	.post-content > .helala-svc-tete + .helala-etude-h1 {
		margin-top: 4px !important;
	}
	.helala-maj {
		margin-bottom: 0 !important;
	}
	.helala-etude-lien-clair {
		margin-inline-start: 0;
	}
}
/* Le <p> que wpautop pose autour du JSON-LD ajoutait ≈ 34 px de vide avant le
   pied de page (102 px CSS mesurés sur mobile). Masqué : le script reste lu. */
.post-content > p:has(> script[type="application/ld+json"]:only-child) {
	display: none;
}

/* 61. Décisions de la revue du 12 oct. (Bachir : « choisis ce qui te semble le
   mieux pour mon business »). */

/* Appel en tête des pages de service (migration 072). */
.helala-svc-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	margin: 28px 0 0 !important;
}
.helala-svc-actions .helala-svc-bouton {
	background: #213A62;
	color: #FFFFFF !important;
}
.helala-svc-actions .helala-svc-bouton:hover,
.helala-svc-actions .helala-svc-bouton:focus-visible {
	background: #2862BD;
}
.helala-svc-lien {
	color: #2862BD !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.helala-nobr {
	white-space: nowrap;
}
@media (max-width: 639px) {
	.helala-svc-actions {
		margin-top: 20px !important;
	}
}

/* Dernière rangée de cartes centrée quand elle est incomplète (réseaux
   sociaux : 7 cartes sur 4 colonnes ; services personnalisés : 5 sur 3).
   La grille passe sur un pas double (chaque carte couvre deux pistes), ce
   qui permet de décaler les cartes restantes d'une demi-carte. */
@media (min-width: 640px) {
	.helala-svc-grille {
		grid-template-columns: repeat(4, 1fr);
	}
	.helala-svc-carte {
		grid-column: span 2;
	}
}
/* La règle « deux colonnes » ne vaut que là où la grille en a deux, sinon elle
   l'emporte (spécificité) sur les règles à trois et quatre colonnes. */
@media (min-width: 640px) and (max-width: 999px) {
	.helala-svc-carte:last-child:nth-child(2n+1) {
		grid-column: 2 / span 2;
	}
}
@media (min-width: 1000px) and (max-width: 1199px) {
	.helala-svc-grille--4 > .helala-svc-carte:last-child:nth-child(2n+1) {
		grid-column: 2 / span 2;
	}
}
@media (min-width: 1000px) {
	.helala-svc-grille--3 {
		grid-template-columns: repeat(6, 1fr);
	}
	.helala-svc-grille--3 > .helala-svc-carte {
		grid-column: span 2;
	}
	.helala-svc-grille--3 > .helala-svc-carte:last-child:nth-child(3n+1) {
		grid-column: 3 / span 2;
	}
	.helala-svc-grille--3 > .helala-svc-carte:nth-last-child(2):nth-child(3n+1) {
		grid-column: 2 / span 2;
	}
}
@media (min-width: 1200px) {
	.helala-svc-grille--4 {
		grid-template-columns: repeat(8, 1fr);
	}
	.helala-svc-grille--4 > .helala-svc-carte {
		grid-column: span 2;
	}
	.helala-svc-grille--4 > .helala-svc-carte:last-child:nth-child(4n+1) {
		grid-column: 4 / span 2;
	}
	.helala-svc-grille--4 > .helala-svc-carte:nth-last-child(2):nth-child(4n+1) {
		grid-column: 3 / span 2;
	}
	.helala-svc-grille--4 > .helala-svc-carte:nth-last-child(3):nth-child(4n+1) {
		grid-column: 2 / span 2;
	}
}

/* /conseils/ : des cartes plutôt qu'une liste à puces. */
.helala-conseils {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	max-width: 1000px;
	margin: 0 0 8px !important;
	padding: 0 !important;
	list-style: none !important;
}
.helala-conseils > li {
	position: relative;
	margin: 0 !important;
	padding: 24px 26px;
	background: #FFFFFF;
	border: 1px solid #E2E2E2;
	border-radius: 12px;
	list-style: none !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.helala-conseils > li::marker {
	content: "";
}
.helala-conseils > li:hover,
.helala-conseils > li:focus-within {
	border-color: #2862BD;
	box-shadow: 0 12px 28px -18px rgba(33, 58, 98, .45);
}
.helala-conseils > li p {
	margin: 0 !important;
}
.helala-conseils > li p + p {
	margin-top: 8px !important;
	color: #5B6677;
	font-size: .95em;
}
.helala-conseils a {
	color: #213A62 !important;
	text-decoration: none;
}
/* Toute la carte est cliquable. */
.helala-conseils a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}
.helala-conseils a:focus-visible {
	outline: none;
}
.helala-conseils > li:focus-within {
	outline: 3px solid #2862BD;
	outline-offset: 2px;
}
.post-content > h2 + .helala-conseils {
	margin-top: 20px !important;
}
.post-content > .helala-conseils + h2 {
	margin-top: 72px !important;
	text-wrap: balance;
}
@media (max-width: 639px) {
	.helala-conseils {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.helala-conseils > li {
		padding: 20px;
	}
	.post-content > .helala-conseils + h2 {
		margin-top: 52px !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	.helala-conseils > li {
		transition: none;
	}
}

/* Un seul style pour l'action principale sur fond marine : le bouton du pied
   de page prend le blanc du bouton d'en-tête. */
.fusion-tb-footer a.fusion-button[href*="/contact"] {
	background: #FFFFFF !important;
	border-color: #FFFFFF !important;
}
.fusion-tb-footer a.fusion-button[href*="/contact"] .fusion-button-text {
	color: #213A62 !important;
}
.fusion-tb-footer a.fusion-button[href*="/contact"]:hover {
	background: #F3F6FB !important;
}
/* Liens du pied de page jamais coupés en deux. */
.fusion-tb-footer .fusion-text a {
	white-space: nowrap;
}

/* Bulle WhatsApp sur mobile : plus discrète (44 px, plus près du bord), elle
   masque moins de fins de ligne. */
@media only screen and (max-width: 639px) {
	.helala-wa {
		right: 10px;
		bottom: 10px;
		width: 44px;
		height: 44px;
	}
	.helala-wa svg {
		width: 24px;
		height: 24px;
	}
}


/* 62. Pages de service sur grand écran. Bachir, 15 oct. : « trop de vide à
   droite », puis la colonne centrée de 760 px jugée trop étroite : « développe
   les paragraphes pour qu'ils prennent plus d'espace à gauche et à droite ».
   Au-delà de 1 100 px, titres, paragraphes, listes et questions fréquentes
   prennent toute la largeur du contenu, alignés sur les grilles de cartes.
   Exception assumée au plafond de 68 caractères (design-system/01-fondations/
   typographie.md). Sous 1 100 px, rien ne change. */
@media (min-width: 1100px) {
	.post-content:has(> .helala-svc-tete) > .helala-svc-bref ~ :is(h2, p, ul, ol, .helala-faq, .helala-etude-cta) {
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		margin-inline: 0 !important;
	}
	.post-content:has(> .helala-svc-tete) > .helala-svc-bref ~ .helala-faq details p {
		max-width: none;
	}
}

/* 62 bis. Questions fréquentes : le <summary> était en flex, et chaque mot
   insécable (<span class="helala-nobr">, migration 072) y devenait un élément
   espacé du suivant par 16 px plus le space-between — « Combien de temps
   … faut-il … pour créer ». Le texte reste en ligne, le « + » se place à part. */
.helala-faq summary {
	display: block;
	position: relative;
	padding-right: 32px;
}
.helala-faq summary::after {
	position: absolute;
	right: 0;
	top: 14px;
}