/* =========================================================================
   FIZZE 1.0.0 — feuille d'identite.

   Ce fichier ne porte AUCUN contenu : il habille des blocs WordPress natifs.
   Les valeurs de base (couleurs, tailles, espacements, polices) viennent de
   theme.json ; on n'en reecrit ici que des alias courts `--fz-*` et les
   compositions que theme.json ne sait pas exprimer (halos, panneaux
   translucides, registre defilant, en-tete reactif, motion).

   Grammaire de la page : LE REGISTRE — deux cotes, un filet entre les deux,
   des libelles en petites capitales, un vide assume cote client.

   Ordre : 1 alias · 2 base · 3 primitives · 4 en-tete · 5 hero · 6 registre
   7 situations · 8 CTA marine · 9 pied de page · 10 blog · 11 motion
   12 retour en haut · 13 responsive · 14 reduced-motion · 15 Contact
   16 tiroir mobile · 17 colonnes a libelle · 18 cartes d'offre
   19 Creative Upgrade (Accueil) · 20 Services · 21 sous-menu Services (en-tete)
   ========================================================================= */

/* ---------- 1. Alias -------------------------------------------------- */

:root {
	--fz-white: var(--wp--preset--color--white, #FFFFFF);
	--fz-surface: var(--wp--preset--color--surface, #F9FAFB);
	--fz-cream: var(--wp--preset--color--cream, #F7F1E8);
	--fz-ink: var(--wp--preset--color--ink, #111827);
	--fz-muted: var(--wp--preset--color--muted, #6B7280);
	--fz-border: var(--wp--preset--color--border, #E5E7EB);
	--fz-border-blue: var(--wp--preset--color--border-blue, #BFCFF8);
	--fz-blue: var(--wp--preset--color--blue, #2563EB);
	--fz-blue-hi: var(--wp--preset--color--blue-hi, #3B66F0);
	--fz-blue-steel: var(--wp--preset--color--blue-steel, #1E3A8A);
	--fz-blue-hover: #1D4ED8;
	--fz-navy: var(--wp--preset--color--navy, #0B1230);
	--fz-on-navy: var(--wp--preset--color--on-navy, #E7ECFB);
	--fz-on-navy-muted: var(--wp--preset--color--on-navy-muted, #9FB0DE);
	--fz-warm: var(--wp--preset--color--warm, #E2711D);

	--fz-head: var(--wp--preset--font-family--heading, Arial, Helvetica, sans-serif);
	--fz-body: var(--wp--preset--font-family--body, sans-serif);

	--fz-ease: var(--wp--custom--ease, cubic-bezier(0.4, 0, 0.2, 1));
	--fz-gut: var(--wp--custom--gut, clamp(1.25rem, 5vw, 3rem));
	--fz-wrap: var(--wp--custom--wrap, 1260px);
	--fz-h1: var(--wp--preset--font-size--display, clamp(2.6rem, 5.4vw, 5rem));
	--fz-h2: var(--wp--preset--font-size--section, clamp(2.3rem, 5vw, 4.2rem));
	--fz-sec: var(--wp--preset--spacing--60, clamp(2.5rem, 5vw, 4.75rem));
	--fz-sec-in: var(--wp--preset--spacing--40, clamp(1.25rem, 2.6vw, 2.15rem));
	--fz-panel-r: var(--wp--custom--radius--panel, 22px);
	--fz-lbl: var(--wp--custom--label--size, 0.6875rem);
	--fz-track: var(--wp--custom--label--track, 0.18em);
	--fz-hdr-h: var(--wp--custom--header-height, 4.25rem);
	/* Le repere des pages commence au meme rythme sous l'en-tete fixe. */
	--fz-marker-offset: clamp(1.75rem, 4.5vh, 3.25rem);

	/* Filets et surfaces du registre, sur marine. */
	--fz-hair: rgba(191, 207, 248, 0.18);
	--fz-glass: rgba(255, 255, 255, 0.04);

	/*
	 * LES CARTES SOMBRES FIZZE — grammaire canonique.
	 *
	 * Le registre du hero (« 1 / 23 ») et les panneaux d'information
	 * (« Sur la page Contact », « Les trois moments », « Si vous hesitez
	 * encore ») racontent des choses differentes : ils ne partagent NI leur
	 * composition, NI leurs dimensions, NI leur nombre de colonnes, et cela
	 * doit rester vrai. Ils partagent en revanche une meme MATIERE, decrite
	 * par les jetons ci-dessous : une carte sombre qui ne les utiliserait
	 * pas serait, par construction, d'une autre famille.
	 */
	/*
	 * Seconde passe : la famille etait juste, mais encore trop effacee sur le
	 * marine. On ne touche ni au langage ni au nombre de variantes — on monte
	 * d'un cran les trois valeurs qui decident de la PRESENCE : la surface se
	 * detache un peu plus du fond, le filet devient franc, le separateur
	 * interne suit. Aucun halo, aucune ombre spectaculaire : la carte se voit
	 * parce que son bord se lit, pas parce qu'elle brille.
	 */
	--fz-card-bg: rgba(255, 255, 255, 0.07);
	--fz-card-bd: rgba(191, 207, 248, 0.42);
	--fz-card-sep: rgba(191, 207, 248, 0.3);
	--fz-card-r: var(--wp--custom--radius--panel, 22px);
	--fz-card-accent: #8FB0FF;
	--fz-card-shadow:
		0 38px 78px -44px rgba(2, 5, 18, 0.9),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);

	/*
	 * Les TROIS NIVEAUX DE LECTURE sur marine. La hierarchie se joue sur la
	 * typographie — taille, graisse, casse — et jamais sur l'effacement :
	 * aucun de ces jetons n'est transparent. Un texte secondaire est plus
	 * discret parce qu'il est plus petit, pas parce qu'il se dissout dans
	 * le fond. C'est tout le defaut que cette grammaire corrige.
	 */
	--fz-lvl-a: var(--fz-white);
	--fz-lvl-b: var(--fz-on-navy);
	--fz-lvl-c: var(--fz-on-navy-muted);

	/*
	 * LA CARTE CLAIRE partage la parente, pas la peau : meme logique de
	 * hierarchie, meme accent bleu, meme finesse de filet, mais un rayon a
	 * elle — plus serre, et volontairement asymetrique (cf. section 17).
	 */
	--fz-card-r-lite: 12px;

	/*
	 * Le gris de texte du theme (#6B7280) passe AA sur le blanc (4,83) mais
	 * PAS sur le creme (4,31) : la carte claire, qui prend le creme pour
	 * fond sur les sections blanches, a donc son propre gris — le cran
	 * au-dessous dans la meme famille. 6,73 sur creme, 7,56 sur blanc.
	 */
	--fz-muted-strong: #4B5563;
}

/* ---------- 2. Base --------------------------------------------------- */

/*
 * Le defilement fluide est desactive par defaut : c'est lui qui fait
 * echouer le saut d'ancre natif du navigateur au chargement direct d'une
 * URL avec `#ancre` (THEME-SERVICES-003). Le navigateur lance ce saut avant
 * que la mise en page ne soit stabilisee (polices, media) ; une animation
 * de defilement fluide vise alors une position qui devient obsolete en
 * cours de route et n'est jamais corrigee, contrairement a un saut instantane
 * que le navigateur reessaie de lui-meme. `fizze.js` ajoute la classe
 * `fizze-smooth-scroll` une fois la page stabilisee : les liens d'ancre
 * cliques par la suite (ex. « Voir la suite » dans les accordeons) retrouvent
 * un defilement fluide, sans jamais l'imposer au chargement initial.
 */
html { scroll-behavior: auto; }
html.fizze-smooth-scroll { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* L'en-tete fixe ne doit pas recouvrir une cible d'ancre. */
:target { scroll-margin-top: calc(var(--fz-hdr-h) + 1rem); }

:where(a):focus-visible,
:where(button):focus-visible,
:where(summary):focus-visible {
	outline: 3px solid var(--fz-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Le gabarit : l'en-tete est fixe, le contenu commence dessous — sauf quand la
   page s'ouvre sur un hero, qui monte volontairement sous l'en-tete. */
.fizze-main { padding-top: var(--fz-hdr-h); }
.fizze-main:has(.fizze-hero) { padding-top: 0; }
.fizze-has-hero .fizze-main { padding-top: 0; }

/* Connecte, WordPress ajoute sa barre d'administration en haut de l'ecran :
   l'en-tete fixe se place dessous plutot que derriere. */
.admin-bar .fizze-hdr { top: var(--wp-admin--admin-bar--height, 32px); }

/*
 * ... mais seulement tant que cette barre est elle-meme fixe. Sous 782 px,
 * WordPress la repasse en `position: absolute` : elle defile avec la page.
 * L'en-tete, lui, restait decale de 46 px en permanence, et le contenu
 * defilait a nu dans la bande laissee au-dessus de lui.
 *
 * Des que le defilement commence (`is-stuck`, au-dela de 80 px), la barre
 * d'administration est deja sortie de l'ecran : l'en-tete peut reprendre
 * le haut. Au repos il garde sa place sous la barre, qui reste donc
 * cliquable. Deconnecte, aucune de ces regles ne s'applique.
 */
@media screen and (max-width: 782px) {
	.admin-bar .fizze-hdr.is-stuck { top: 0; }
}

/*
 * WordPress applique le `blockGap` du theme en `margin-block-start` a chaque
 * enfant direct de `.wp-site-blocks`. Entre la partie d'en-tete, le <main> et
 * la partie de pied de page, cela ouvrait deux bandes blanches de 20 px : une
 * tout en haut de la page, une juste avant le pied de page. Le rythme entre
 * ces trois blocs est porte par les sections elles-memes, pas par le gap.
 */
.wp-site-blocks > * { margin-block-start: 0; }

/*
 * Le meme defaut, un cran plus bas. Dans le contenu d'une page, WordPress
 * applique aussi le `blockGap` en `margin-block-start` a chaque section de
 * pleine largeur : 20 px de corps de page laisses a nu ENTRE deux surfaces.
 * Entre deux sections blanches cela ne se voyait pas ; entre le beige de
 * « Rester accompagne » et le marine de « Et maintenant », cela dessinait la
 * fine bande blanche signalee — et il y en avait une entre CHAQUE section.
 *
 * Une section de pleine largeur porte son propre rythme vertical dans son
 * `padding-block` : elle n'a jamais besoin d'un gap, et deux surfaces qui se
 * suivent doivent se toucher.
 */
:where(.entry-content, .fizze-main) > .alignfull { margin-block-start: 0; }

/*
 * L'AXE DE LA COLONNE.
 *
 * Les mises en page « contraintes » de WordPress centrent tout enfant plus
 * etroit que la largeur de contenu, avec `margin-inline: auto !important`.
 * Les blocs FIZZE volontairement courts (chapeau, note, liste de principes)
 * doivent rester alignes a gauche : c'est la seule raison du `!important`
 * qui suit, et il ne touche que des classes FIZZE explicites.
 *
 * Mais « a gauche » ne veut pas dire au bord du CONTENEUR : il veut dire sur
 * l'axe de la COLONNE, celui du surtitre, du titre et des accordeons. Un
 * `margin-inline-start: 0` les collait au bord de la section, soit 34 px a
 * gauche de tout le reste a 1440 px — c'est tout le decalage que Miguel
 * voyait, sur l'Accueil comme sur les quatre sections de Services.
 *
 * L'ecart a rattraper est exactement la moitie de ce que la colonne laisse
 * libre dans la section. Quand la section est plus etroite que la colonne,
 * `max()` ramene la valeur a zero et le bloc redevient simplement a gauche.
 * Une seule regle, aucune marge locale par section.
 */
:where(.is-layout-constrained) > .fizze-intro,
:where(.is-layout-constrained) > .is-style-fizze-intro,
:where(.is-layout-constrained) > .fizze-note,
:where(.is-layout-constrained) > .is-style-fizze-note,
:where(.is-layout-constrained) > .is-style-fizze-nope-list,
:where(.is-layout-constrained) > .fizze-q-out {
	margin-inline: max(0px, (100% - var(--fz-wrap)) / 2) auto !important;
}

/* ---------- 3. Primitives reutilisables ------------------------------- */

/* Le libelle du registre : la signature typographique de FIZZE. */
.fizze-lbl,
.is-style-fizze-lbl,
.fizze-ftr__col-title,
.fizze-next-dt {
	font-size: var(--fz-lbl);
	font-weight: 800;
	letter-spacing: var(--fz-track);
	text-transform: uppercase;
	line-height: 1.3;
}

.fizze-kicker,
.is-style-fizze-kicker {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fz-blue);
	margin-bottom: 0.75rem;
}

.fizze-h2 { margin-bottom: 0.85rem; }

.fizze-intro,
.is-style-fizze-intro {
	font-size: var(--wp--preset--font-size--large, clamp(1.05rem, 1rem + 0.5vw, 1.4rem));
	color: var(--fz-muted);
	max-width: 36ch;
	margin-bottom: var(--fz-sec-in);
}

.fizze-lede {
	font-size: var(--wp--preset--font-size--medium, clamp(1.05rem, 1rem + 0.45vw, 1.3rem));
	color: var(--fz-on-navy-muted);
	max-width: 46ch;
	margin-bottom: 2rem;
}
.fizze-lede strong { color: var(--fz-white); font-weight: 700; }

/* La note a pastille : « ca commence par un message ». */
.fizze-note,
.is-style-fizze-note {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	max-width: 44ch;
	margin: 1.4rem 0 0;
	color: var(--fz-on-navy-muted);
}
.fizze-note::before,
.is-style-fizze-note::before {
	content: '';
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background: var(--fz-warm);
	translate: 0 -2px;
}

.is-style-fizze-display {
	font-family: var(--fz-head);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.02;
	font-size: clamp(1.5rem, 3.2vw, 2.4rem);
}

/* Surfaces, proposees aussi comme styles de blocs dans l'inspecteur. */
.is-style-fizze-surface-navy {
	background: var(--fz-navy);
	color: var(--fz-on-navy);
}
/*
 * LE GRIS SUR CREME. `--fz-muted` (#6B7280) donne 4,83:1 sur blanc — AA — mais
 * seulement 4,31:1 sur le creme : sous le seuil, mesure sur `.fizze-intro` et
 * sur les notes `has-muted-color` de cette section (THEME-VISUAL-010, §15).
 *
 * Plutot que d'assombrir le token partout — ce qui alourdirait aussi le texte
 * secondaire des sections blanches, ou le rapport est deja correct — on
 * redefinit ici DEUX variables en parallele, `--fz-muted` ET le preset
 * WordPress `--wp--preset--color--muted`. Une seule ne suffit pas : la
 * substitution d'un `var()` imbrique dans une propriete personnalisee se fige
 * au moment ou CETTE propriete est elle-meme declaree (ici, `--fz-muted` a
 * ete calculee une fois pour toutes a la racine) — redefinir seulement la
 * source ne fait donc rien pour tout ce qui consomme `--fz-muted`. Les deux
 * variables sont donc mises a jour ensemble, ce qui couvre a la fois l'alias
 * (utilise par la quasi-totalite des composants) et `.has-muted-color`
 * (classe generee par WordPress, qui lit directement le preset).
 *
 * Les boites qui posent leur propre fond opaque a l'interieur de cette
 * section (`.has-background` : les listes et paragraphes muted y vivent
 * deja sur blanc, pas sur creme) restaurent les deux valeurs d'origine,
 * puisque leur contraste y est deja conforme et qu'il ne doit pas devenir
 * plus sombre que necessaire.
 */
.is-style-fizze-surface-cream {
	background: var(--fz-cream);
	--fz-muted: var(--fz-muted-strong);
	--wp--preset--color--muted: var(--fz-muted-strong);
}
.is-style-fizze-surface-cream .has-background {
	--fz-muted: #6B7280;
	--wp--preset--color--muted: #6B7280;
}

.is-style-fizze-panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 1px solid var(--fz-card-bd);
	border-radius: var(--fz-card-r);
	background: var(--fz-card-bg);
	backdrop-filter: blur(10px);
	box-shadow: var(--fz-card-shadow);
	padding: clamp(1.35rem, 3vw, 2rem);
	color: var(--fz-lvl-b);
}
/*
 * Le liseret d'accent, repris du registre ou il disait « ce panneau est
 * eclaire par le haut ». C'est la signature commune des cartes sombres :
 * elle les fait lire comme des parentes sans rien imposer de ce qu'elles
 * racontent a l'interieur.
 */
.is-style-fizze-panel::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--fz-blue-hi) 20%, #A8C4FF 50%, var(--fz-blue-hi) 80%, transparent);
	opacity: 0.9;
}

/*
 * Le titre de la carte : un libelle, donc NIVEAU C — mais reellement lisible.
 * `font-size` est repete ici : la regle de corps ci-dessous porte un selecteur
 * de type et l'emporterait sinon sur `.fizze-lbl`, qui n'en a pas. Le titre
 * doit rester a l'echelle du libelle, pas a celle du texte courant.
 */
.is-style-fizze-panel > .fizze-lbl {
	font-size: var(--fz-lbl);
	color: var(--fz-lvl-c);
	margin: 0 0 1.15rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--fz-card-sep);
}

/*
 * Les entrees de la carte. En clair — les sections creme de Services, ou
 * cette classe sert treize fois — elles restent bleues : le bleu FIZZE y
 * attire sans jamais manquer de contraste. Sur marine, ce meme bleu tombait
 * a 2,7:1 contre le fond. Le bleu y devient donc un FILET d'accent, et le
 * texte remonte au niveau A.
 */
.fizze-next-dt { color: var(--fz-blue-hi); margin-bottom: 0.4rem; }
.is-style-fizze-panel .fizze-next-dt {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	color: var(--fz-lvl-a);
	margin-bottom: 0.45rem;
}
.is-style-fizze-panel .fizze-next-dt::before {
	content: '';
	width: 14px;
	height: 2px;
	flex: none;
	border-radius: 2px;
	background: var(--fz-card-accent);
}

/*
 * Le texte courant d'une carte sombre se lit a une seule taille, quelle que
 * soit la page. Le panneau de l'Accueil portait `has-small-font-size` (14 px)
 * la ou ceux de Services etaient au corps normal (17 px) : deux cartes de la
 * meme famille ne peuvent pas parler a deux voix. Le `!important` est le seul
 * moyen de reprendre la main sur la regle de preset de WordPress, qui est
 * elle-meme `!important` ; il ne s'applique qu'a l'interieur d'une carte.
 */
.is-style-fizze-panel p { font-size: 0.9375rem; line-height: 1.6; }
.is-style-fizze-panel p.has-small-font-size { font-size: 0.9375rem !important; }
.is-style-fizze-panel .fizze-next-dt + p { margin-top: 0; }

/* La note de pied : NIVEAU C — discrete par la taille, pas par l'effacement. */
.fizze-next-foot {
	margin: 1.25rem 0 0;
	padding-top: 0.85rem;
	border-top: 1px solid var(--fz-card-sep);
	color: var(--fz-lvl-c);
}
.is-style-fizze-panel p.fizze-next-foot,
.is-style-fizze-panel p.fizze-next-foot.has-small-font-size { font-size: 0.875rem !important; }

/*
 * Boutons : theme.json donne la couleur et le rayon, on ajoute le relief et
 * le mouvement. La teinte de survol monte par le bas — reprise directe du
 * prototype HOME-V3-003, ou le bouton « se remplit » au lieu de changer de
 * couleur d'un coup.
 */
.wp-block-button__link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	line-height: 1.2;
	transition: transform 0.25s var(--fz-ease), box-shadow 0.25s var(--fz-ease),
		border-color 0.25s var(--fz-ease), color 0.25s var(--fz-ease);
}
.wp-block-button__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--fz-blue-hover);
	transform: translateY(101%);
	transition: transform 0.35s var(--fz-ease);
}
.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after { transform: translateY(0); }
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -12px rgba(37, 99, 235, 0.95);
}
.wp-block-button__link:active { transform: translateY(0); }

/*
 * Boutons Outline (contour) : au repos ils gardent leur reglage Gutenberg
 * (contour + texte encre), mais le remplissage au survol doit monter en
 * bleu FIZZE — pas le bleu WordPress herite — et le texte doit passer au
 * blanc pour rester lisible. Le focus clavier suit le meme etat que le
 * survol ; l'anneau de focus generique (ligne ~81) reste la garantie
 * d'accessibilite independante de la couleur. Le CTA d'en-tete de hero
 * (.fizze-lnk) porte aussi is-style-outline mais suit un langage visuel a
 * part — lien souligne, pas bouton contour — donc il reste exclu ici.
 */
.wp-block-button.is-style-outline:not(.fizze-lnk) .wp-block-button__link::after {
	background: var(--fz-blue);
}
.wp-block-button.is-style-outline:not(.fizze-lnk) .wp-block-button__link:hover,
.wp-block-button.is-style-outline:not(.fizze-lnk) .wp-block-button__link:focus-visible {
	color: var(--fz-white) !important;
	border-color: var(--fz-blue) !important;
}
.wp-block-button.is-style-outline:not(.fizze-lnk) .wp-block-button__link:active {
	border-color: var(--fz-blue-hover) !important;
}
.wp-block-button.is-style-outline:not(.fizze-lnk) .wp-block-button__link:active::after {
	background: var(--fz-blue-hover);
}

/*
 * Rayon du CTA principal : aligne sur la reference reelle du bouton
 * "Nous contacter" du site V2 (theme fizze-v2/theme.json, styles.elements
 * .button.border.radius = var(--wp--custom--radius--sm) = 6px), au lieu du
 * rayon pilule herite de theme.json qui reste la norme des boutons
 * secondaires Outline (accordeons, fizze-lnk).
 */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	border-radius: var(--wp--custom--radius--cta);
}

/*
 * ... et les boutons Outline le suivent desormais. Le rayon pilule restait le
 * seul endroit du site ou un bouton ne ressemblait pas a un bouton FIZZE.
 * Seul `.fizze-lnk` reste dehors : ce n'est pas un bouton contour mais un
 * lien souligne. Le caractere secondaire de l'Outline continue de venir de
 * son contour, de son corps de texte et de son remplissage au survol — pas
 * de sa forme.
 */
.wp-block-button.is-style-outline:not(.fizze-lnk) .wp-block-button__link {
	border-radius: var(--wp--custom--radius--cta);
}

.fizze-btn-lg .wp-block-button__link { padding: 1.05rem 2rem; font-size: 1.0625rem; }

/*
 * La pilule de l'en-tete. Elle doit lire comme un bouton de barre de
 * navigation : compacte, haute de 38 px, jamais plus grande que le
 * mot-symbole. Les proportions sont fixees explicitement (hauteur, padding
 * optique, graisse, interlettrage) pour qu'elle ne suive pas l'echelle des
 * CTA de contenu.
 */
.fizze-hdr__cta .wp-block-button__link {
	min-height: 38px;
	display: inline-flex;
	align-items: center;
	padding: 0 1.15rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.005em;
	white-space: nowrap;
	box-shadow: 0 6px 18px -10px rgba(37, 99, 235, 0.75);
}
.fizze-hdr__cta .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(37, 99, 235, 0.9); }

/* Le CTA secondaire : un lien souligne, pas un second bouton. */
.fizze-lnk .wp-block-button__link {
	background: transparent;
	border: 0;
	border-bottom: 2px solid rgba(231, 236, 251, 0.35);
	border-radius: 0;
	padding: 0 0 2px;
	color: var(--fz-on-navy);
	box-shadow: none;
	font-weight: 700;
}
.fizze-lnk .wp-block-button__link::after { content: none; }
.fizze-lnk .wp-block-button__link:hover {
	border-bottom-color: var(--fz-on-navy);
	color: var(--fz-white);
	background: transparent;
	transform: none;
	box-shadow: none;
}

/* ---------- 4. En-tete ------------------------------------------------ */

/*
 * L'en-tete a DEUX etats dessines, pas un accident de defilement.
 *
 * Etat haut  — aucune barre : l'en-tete est fondu dans le hero. Un voile
 *              marine degrade (`::before`) descend depuis le bord superieur
 *              pour garantir la lisibilite au-dessus du halo, sans jamais
 *              dessiner d'arete visible.
 * Etat colle — la barre prend corps : verre teinte, flou, et un filet
 *              horizontal en degrade qui s'etire depuis le centre. La teinte
 *              suit la page : marine au-dessus d'un hero (aucune inversion de
 *              contraste), blanche sur une page ordinaire.
 *
 * Les deux etats partagent la meme hauteur : rien ne saute, seul le fond
 * apparait. La classe `is-stuck` est posee par fizze.js. L'en-tete n'a pas
 * d'etat masque : il reste a l'ecran pendant tout le defilement.
 */
.fizze-hdr {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	width: 100%;
	transition: transform 0.45s var(--fz-ease), background-color 0.45s var(--fz-ease),
		box-shadow 0.45s var(--fz-ease), backdrop-filter 0.45s var(--fz-ease);
}
.fizze-hdr__in {
	position: relative;
	z-index: 1;
	padding-block: 0.9rem;
	min-height: var(--fz-hdr-h);
}

/* Le voile du haut : present uniquement tant que la barre n'a pas pris corps. */
.fizze-hdr::before {
	content: '';
	position: absolute;
	inset: -1px 0 auto;
	height: calc(var(--fz-hdr-h) + 2.5rem);
	pointer-events: none;
	background: linear-gradient(rgba(6, 10, 28, 0.62), rgba(6, 10, 28, 0.22) 55%, rgba(6, 10, 28, 0));
	opacity: 0;
	transition: opacity 0.45s var(--fz-ease);
}
body:has(.fizze-hero) .fizze-hdr:not(.is-stuck)::before,
.fizze-has-hero .fizze-hdr:not(.is-stuck)::before { opacity: 1; }

/* Le filet de la barre collee : il s'ouvre depuis le centre. */
.fizze-hdr::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--fz-border-blue) 15%, var(--fz-border-blue) 85%, transparent);
	opacity: 0;
	transform: scaleX(0.2);
	transition: opacity 0.45s var(--fz-ease), transform 0.6s var(--fz-ease);
}
.fizze-hdr.is-stuck::after { opacity: 0.85; transform: scaleX(1); }

/*
 * UN SEUL VERRE, SUR TOUTES LES PAGES.
 *
 * Il y avait ici DEUX surfaces declarees, choisies par la PAGE : verre blanc
 * sur une page ordinaire (Contact), verre marine des que la page s'ouvrait
 * par un hero (Accueil, Services). Ce n'etait donc ni un effet du
 * `backdrop-filter` laissant transparaitre le contenu, ni une classe
 * accidentelle : c'etaient deux composants differents.
 *
 * Et comme le choix etait porte par la page et non par le defilement, la
 * barre marine restait marine sur tout le blanc qui suit le hero, c'est-a-dire
 * sur l'essentiel de l'Accueil et de Services. Le visiteur voyait bien deux
 * en-tetes, sans que le contenu derriere l'explique.
 *
 * La barre collee n'a plus qu'une identite : verre blanc, partout.
 */
/*
 * FIX-04 : le verre (fond + `backdrop-filter`) vit sur `::before`, jamais
 * directement sur `.fizze-hdr` — voir §19.9 pour la raison exacte (un
 * `backdrop-filter` sur `.fizze-hdr` en ferait le bloc conteneur du tiroir,
 * qui est un DESCENDANT reel de cet element, des que `.is-stuck` s'active).
 */
.fizze-hdr.is-stuck {
	box-shadow: 0 10px 30px -22px rgba(17, 24, 39, 0.5);
}
.fizze-hdr.is-stuck::before {
	inset: 0;
	height: 100%;
	opacity: 1;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: saturate(1.6) blur(16px);
}

.fizze-brand { text-decoration: none; }
.fizze-brand .wp-block-site-logo img { border-radius: 6px; }
.fizze-wordmark a,
.fizze-wordmark a:hover { text-decoration: none; color: inherit; }

.fizze-hdr .wp-block-navigation a { text-decoration: none; }
/*
 * La navigation de bureau tenait en 15 px a cote d'un logo de 20 px et d'un
 * CTA de 16 px : elle s'effacait. Un cran de plus (16 px, graisse 650) lui
 * rend sa presence sans la mettre au niveau du CTA, qui reste le seul
 * element plein de la barre. Le selecteur de langue suit d'un demi-cran :
 * il accompagne la navigation, il ne la concurrence pas.
 */
.fizze-hdr .wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 650;
	font-size: 1rem;
}
/*
 * Selecteur de langue : un bouton-divulgation (pas un menu ARIA complet —
 * il n'y a qu'une poignee de liens, deja focalisables au clavier). L'etat
 * ouvert est porte par `[data-open]` sur le conteneur, pose par fizze.js.
 */
.fizze-hdr {
	--fz-header-dropdown-radius: 14px;
	--fz-header-dropdown-border: rgba(17, 24, 39, 0.18);
	--fz-header-dropdown-shadow: 0 16px 32px -12px rgba(17, 24, 39, 0.24);
	--fz-header-dropdown-padding: 0.5rem;
	--fz-header-dropdown-item-hover: #f7f1e8;
}
.fizze-langsel { position: relative; }
.fizze-langsel__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 86px;
	height: 40px;
	padding: 3px 12px 3px 8px;
	justify-content: center;
	border: 1px solid rgba(17, 24, 39, .18);
	border-radius: 9px;
	background: rgba(17, 24, 39, .035);
	color: inherit;
	font: inherit;
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color 0.2s var(--fz-ease), border-color 0.2s var(--fz-ease);
}
.fizze-langsel__icon { width: 18px; height: 18px; flex: none; }
.fizze-langsel[data-open] .fizze-langsel__btn,
.fizze-langsel__btn:hover { background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.25); }
.fizze-langsel__btn:focus-visible { outline: 2px solid var(--fz-blue); outline-offset: 2px; }

.fizze-langsel__menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 172px;
	max-width: calc(100vw - 2rem);
	padding: var(--fz-header-dropdown-padding);
	border-radius: var(--fz-header-dropdown-radius);
	background: var(--fz-white);
	border: 1px solid var(--fz-header-dropdown-border);
	box-shadow: var(--fz-header-dropdown-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	pointer-events: none;
	transition: opacity 0.16s var(--fz-ease), transform 0.16s var(--fz-ease);
}
.fizze-langsel[data-open] .fizze-langsel__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
.fizze-langsel__item {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.5rem 0.65rem;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--fz-ink);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
a.fizze-langsel__item:hover,
a.fizze-langsel__item:focus-visible { background: var(--fz-header-dropdown-item-hover); color: var(--fz-ink); }
.fizze-langsel__item.is-active { color: var(--fz-ink); font-weight: 700; }
.fizze-langsel__item.is-active::after { content: ''; width: 0.4rem; height: 0.4rem; margin-left: auto; border-radius: 50%; background: var(--fz-blue); }
.fizze-langsel__item.is-disabled { color: var(--fz-muted); cursor: not-allowed; }
.fizze-langsel__label { display: none; }
.fizze-langsel__soon { font-size: 0.6875rem; font-weight: 600; opacity: 0.55; }

/*
 * Deux regimes de couleur, decides par l'ETAT de la barre.
 *
 * Au repos, sur une page ouverte par un hero marine, la barre est un voile
 * sur du marine : elle ecrit en clair. Des qu'elle prend corps, elle devient
 * du verre blanc : elle ecrit en sombre. Le texte et le fond basculent
 * ensemble, dans la meme transition de 0,45 s — la barre ne s'inverse pas,
 * elle prend forme. C'est ce couplage qui manquait a la bascule pilotee par
 * le seul defilement, et qui la faisait lire comme un accident.
 */
.fizze-hdr { color: var(--fz-ink); }
.fizze-hdr .wp-block-navigation .wp-block-navigation-item__content { color: var(--fz-muted); }
.fizze-hdr .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--fz-blue); }
.fizze-hdr .fizze-langsel__btn { color: var(--fz-muted); }
.fizze-hdr .fizze-langsel__btn:hover { color: var(--fz-blue); }

body:has(.fizze-hero) .fizze-hdr:not(.is-stuck),
.fizze-has-hero .fizze-hdr:not(.is-stuck) { color: var(--fz-white); }

body:has(.fizze-hero) .fizze-hdr:not(.is-stuck) .wp-block-navigation .wp-block-navigation-item__content,
.fizze-has-hero .fizze-hdr:not(.is-stuck) .wp-block-navigation .wp-block-navigation-item__content { color: var(--fz-on-navy-muted); }

body:has(.fizze-hero) .fizze-hdr:not(.is-stuck) .fizze-langsel__btn,
.fizze-has-hero .fizze-hdr:not(.is-stuck) .fizze-langsel__btn { color: var(--fz-on-navy-muted); }

body:has(.fizze-hero) .fizze-hdr:not(.is-stuck) .fizze-langsel__btn:hover,
.fizze-has-hero .fizze-hdr:not(.is-stuck) .fizze-langsel__btn:hover { color: var(--fz-blue-hi); }

body:has(.fizze-hero) .fizze-hdr:not(.is-stuck) .wp-block-navigation .wp-block-navigation-item__content:hover,
.fizze-has-hero .fizze-hdr:not(.is-stuck) .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--fz-blue-hi); }

/* Le menu mobile de WordPress reste celui de WordPress ; on ne regle que la
   lisibilite du declencheur et la surface de l'ecran deplie. */
.fizze-hdr .wp-block-navigation__responsive-container-open,
.fizze-hdr .wp-block-navigation__responsive-container-close { color: currentColor; }
/*
 * Les couleurs du panneau deplie viennent du bloc de navigation lui-meme
 * (attributs `overlayBackgroundColor` / `overlayTextColor`, cf.
 * parts/header.html). WordPress imprime en effet une regle par defaut
 * `.wp-block-navigation:not(.has-background) ... .is-menu-open` plus
 * specifique que tout ce que le theme peut ecrire ici : lui disputer le
 * fond ne menait qu'a un panneau blanc avec des liens blancs. Le theme
 * ne regle donc plus que le rythme et la typographie.
 */
/*
 * FIX-03 — L'ESPACE AU-DESSUS D'ACCUEIL. Le bouton Close est `position:
 * absolute; top:0`, donc INDEPENDANT de ce padding — il ne pousse jamais
 * le contenu, et rien ne l'oblige a etre degage par lui. Ce padding-top
 * etait donc un vide pur, sans lien avec la respiration reelle du bouton
 * (qui mesure ~46px), et grimpait jusqu'a 80px sur les hauteurs courantes
 * (12vh plafonne a 5rem) — mesure confirmee : Accueil commencait exactement
 * ou le padding finissait, sans aucune raison de mise en page. Reduit a une
 * respiration qui degage clairement Close (dont le cercle mesure ~46px de
 * diametre) sans lui laisser un etage vide au-dessus de la navigation —
 * mesure avant/apres a 800px de haut : 80px -> 64px.
 */
.fizze-hdr .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: clamp(3.25rem, 8vh, 4rem);
}
.fizze-hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--fz-head);
	font-weight: 900;
	letter-spacing: -0.03em;
	font-size: clamp(1.6rem, 7vw, 2.4rem);
	/*
	 * Les liens de l'en-tete sont gris ; deplies sur le marine, ils doivent
	 * repasser en blanc. La couleur de texte du bloc ne suffit pas : elle
	 * est heritee, et la regle grise du theme cible l'ancre directement.
	 *
	 * Le selecteur nomme le bloc DEUX fois (`.wp-block-navigation.fizze-nav`)
	 * pour une seule raison : passer au-dessus des deux regimes de couleur de
	 * la barre, dont le plus specifique compte cinq classes. Le tiroir est
	 * toujours du marine, quel que soit l'etat de la barre derriere lui.
	 */
	color: var(--fz-white);
}
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--fz-white);
}
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--fz-blue-hi);
}

/* ---------- 5. Hero --------------------------------------------------- */

.fizze-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--fz-navy);
	color: var(--fz-on-navy);
	padding-block: clamp(7.5rem, 16vh, 10rem) clamp(2.25rem, 4.5vw, 3.5rem);
}
/*
 * Deux sources de lumiere, pas une. Le halo principal sort du titre ; une
 * seconde lueur plus froide passe derriere le registre, a droite. Le bas de
 * la surface est assombri pour asseoir la section : c'est ce qui donne de la
 * profondeur sans ajouter un seul element de contenu.
 */
.fizze-hero::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -32%;
	left: 50%;
	translate: -50% 0;
	width: min(1500px, 160vw);
	aspect-ratio: 1;
	pointer-events: none;
	background:
		radial-gradient(closest-side, rgba(76, 118, 255, 0.46), transparent 68%),
		radial-gradient(closest-side, rgba(30, 58, 138, 0.55), transparent 76%);
}
.fizze-hero::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 55% at 88% 42%, rgba(59, 102, 240, 0.22), transparent 70%),
		linear-gradient(rgba(11, 18, 48, 0) 55%, rgba(4, 7, 22, 0.65));
}

.fizze-hero-grid { gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

/* Le surtitre gagne un filet : il ancre le bloc de texte a gauche. */
.fizze-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fz-on-navy-muted);
	margin-bottom: 1.35rem;
}
.fizze-eyebrow::before {
	content: '';
	width: clamp(18px, 3vw, 34px);
	height: 2px;
	flex: none;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--fz-blue-hi), rgba(143, 176, 255, 0.2));
}

.fizze-hero-title {
	font-size: var(--fz-h1);
	color: var(--fz-white);
	margin: 0 0 1.6rem;
	/* Le titre est massif : une ombre tres diffuse le detache du halo. */
	text-shadow: 0 24px 60px rgba(4, 7, 22, 0.45);
}
/* Les lignes accentuees : surlignage natif Gutenberg, degrade cote FIZZE. */
.fizze-hero-title mark {
	background: linear-gradient(100deg, #5B87FF, #A8C4FF 72%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: none;
}

/* ---------- 6. Le registre ------------------------------------------- */

/*
 * Le registre est la signature du hero : c'est lui qui demontre la promesse.
 * Il doit donc se voir. Trois leviers, tous graphiques : un panneau qui a du
 * relief (degrade, filet clair, ombre portee, liseret de lumiere en haut),
 * une frontiere centrale qui se lit comme une frontiere, et des compteurs
 * traites comme des chiffres d'affiche.
 */
.fizze-ledger {
	position: relative;
	isolation: isolate;
	/*
	 * Le halo bleu du hero est a son maximum DERRIERE le registre : un
	 * panneau qui ne fait qu'eclaircir s'y dissout au lieu de s'en detacher.
	 * Un fond propre, legerement plus sombre que la lueur, le pose enfin
	 * comme un objet sur le hero — et remonte au passage le contraste de
	 * tout ce qu'il contient. Le degrade clair d'origine reste par-dessus :
	 * c'est lui qui donne le relief.
	 */
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.022) 60%, rgba(255, 255, 255, 0.04)),
		linear-gradient(rgba(6, 11, 32, 0.42), rgba(6, 11, 32, 0.56));
	border: 1px solid var(--fz-card-bd);
	border-radius: var(--fz-card-r);
	overflow: hidden;
	backdrop-filter: blur(10px);
	box-shadow: var(--fz-card-shadow);
	gap: 0;
	margin: 0;
	transition: border-color 0.35s var(--fz-ease), box-shadow 0.35s var(--fz-ease);
}
.fizze-ledger:hover {
	border-color: rgba(191, 207, 248, 0.56);
	box-shadow:
		0 50px 100px -46px rgba(2, 5, 18, 0.95),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Le liseret d'accent : le panneau est eclaire par le haut. */
.fizze-ledger::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--fz-blue-hi) 20%, #A8C4FF 50%, var(--fz-blue-hi) 80%, transparent);
	opacity: 0.9;
}

.fizze-ledger-col {
	padding: clamp(1.35rem, 2.6vw, 2rem);
	min-width: 0;
	display: flex;
	flex-direction: column;
}
/* La frontiere : un degrade, plus lumineux au milieu du panneau. */
.fizze-ledger-you {
	border-right: 0;
	position: relative;
}
.fizze-ledger-you::after {
	content: '';
	position: absolute;
	inset: 0 -0.5px 0 auto;
	width: 1px;
	pointer-events: none;
	background: linear-gradient(rgba(191, 207, 248, 0.12), rgba(143, 176, 255, 0.55), rgba(191, 207, 248, 0.12));
}
.fizze-ledger-us { background: rgba(6, 10, 30, 0.42); }

.fizze-ledger .fizze-lbl {
	color: var(--fz-lvl-c);
	margin: 0 0 1.1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--fz-card-sep);
}
.fizze-ledger ul { list-style: none; margin: 0; padding: 0; }
.fizze-ledger li {
	font-size: 0.9375rem;
	color: var(--fz-lvl-b);
	padding: 0.32rem 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Chaque ligne absorbee par FIZZE porte sa petite marque. */
/*
 * QA-LAUNCH-LOCAL-002 / A-02 — une entree plus longue que la colonne passe a
 * la ligne au lieu d'etre coupee par des points de suspension (les phrases
 * portugaises sont plus longues que les francaises). Meme regle que celle
 * posee sous 781px, etendue a toutes les largeurs.
 */
.fizze-ledger-us li { padding-left: 0.95rem; position: relative; white-space: normal; text-overflow: clip; }
.fizze-ledger-us li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.95em;
	width: 6px;
	height: 1px;
	background: rgba(143, 176, 255, 0.65);
}
/* « Votre metier. » : la seule ligne du client, a l'echelle d'un titre. */
.fizze-ledger-mine li {
	font-family: var(--fz-head);
	font-weight: 900;
	letter-spacing: -0.025em;
	/* Assez grand pour peser face aux 23 lignes d'en face, assez mesure pour
	   tenir sur une ligne a la largeur de la colonne. */
	font-size: clamp(1.4rem, 2.45vw, 2rem);
	line-height: 1.02;
	color: var(--fz-white);
	white-space: normal;
	padding: 0;
}
/*
 * « et rien d'autre » : cette ligne porte la moitie de l'argument du cote
 * client, et elle tombait a 2,6:1 contre le fond. Elle reste la plus calme
 * de la colonne — italique, petite — mais elle se lit.
 */
.fizze-ledger-nothing {
	margin: 0.6rem 0 0;
	font-style: italic;
	color: var(--fz-lvl-c);
}
/*
 * Les compteurs. Ils portent tout l'argument (1 contre 23) : ils sont donc
 * traites comme des chiffres d'affiche, pas comme une legende.
 */
.fizze-ledger-count {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	margin: 1.25rem 0 0;
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--fz-card-sep);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--fz-lvl-c);
}
.fizze-ledger-count strong {
	font-family: var(--fz-head);
	font-weight: 900;
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	line-height: 0.85;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--fz-white);
	margin: 0;
}
.fizze-ledger-you .fizze-ledger-count { color: var(--fz-border-blue); }
.fizze-ledger-you .fizze-ledger-count strong {
	color: #8FB0FF;
	text-shadow: 0 0 28px rgba(91, 135, 255, 0.55);
}

/* La pile defile en boucle. fizze.js duplique la liste pour un raccord
   invisible ; sans JS, la boucle tourne quand meme avec un saut. */
.fizze-ledger-scroll {
	/*
	 * FIX-03 — diagnostic : sur la composition desktop (>=1100px), c'est
	 * cette hauteur (« Notre cote » qui defile), pas la colonne de texte,
	 * qui decidait de la hauteur totale du Hero (CSS Grid : la ligne 3, qui
	 * porte le registre en `grid-row: 3 / 7`, s'etend pour lui faire de la
	 * place, et le reste du Hero suit). Resserrer les marges de la colonne
	 * de texte n'avait donc aucun effet sur le total tant que ce nombre
	 * restait inchange. Reduit et rendu sensible a la hauteur de viewport.
	 *
	 * FIX-04 — plancher redescendu (150px -> 130px) : une fenetre Chrome
	 * Windows reelle a 100% de zoom, sur un ecran "1366x768", n'offre PAS
	 * 768px de hauteur utile (`window.innerHeight`) — la barre de titre/
	 * onglets/adresse du navigateur ET la barre des taches Windows en
	 * retranchent environ 100-140px, ce qu'aucun test par viewport simule
	 * (DevTools, iframe) ne reproduit. Le plancher a 150px empechait ce
	 * terme en `vh` de continuer a suivre une fenetre reelle plus courte
	 * que prevu ; 130px laisse la formule respirer un peu plus bas tout en
	 * gardant assez de lignes lisibles dans le degrade.
	 */
	height: clamp(130px, 20vh, 220px);
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.fizze-ledger-scroll ul { animation: fizze-pile 40s linear infinite; }
.fizze-ledger-scroll.is-seamless ul { animation-name: fizze-pile-half; }
.fizze-ledger-scroll:hover ul,
.fizze-ledger-scroll:focus-within ul { animation-play-state: paused; }
@keyframes fizze-pile { to { transform: translateY(-100%); } }
@keyframes fizze-pile-half { to { transform: translateY(-50%); } }

/* ---------- 7. Situations (core/details) ------------------------------ */

.fizze-phrase {
	background: var(--fz-white);
	padding-block: var(--fz-sec);
}
.fizze-section { padding-block: var(--fz-sec); }

/*
 * Le filet de separation etait un plein trait de la couleur des bordures du
 * theme : sur quatre ou cinq questions empilees, cela faisait autant de
 * barres pleine largeur et une bonne part du poids du composant. Il devient
 * un cheveu. Ouvert, il passe au bleu FIZZE : c'est la seule marque dont
 * l'element actif a besoin — pas d'une carte autour de la reponse.
 */
.wp-block-details.is-style-fizze-q {
	border-top: 1px solid rgba(17, 24, 39, 0.08);
	margin: 0;
	padding: 0;
	transition: border-color 0.3s var(--fz-ease);
}
.wp-block-details.is-style-fizze-q:last-of-type { border-bottom: 1px solid rgba(17, 24, 39, 0.08); }
.wp-block-details.is-style-fizze-q[open] { border-top-color: var(--fz-blue); }

/*
 * Respiration apres la reponse (THEME-ACCORDION-004) : le bloc global de
 * WordPress (`:root :where(.is-layout-flow) > :last-child { margin-block-end:
 * 0; }`) neutralise systematiquement la marge basse du dernier enfant du
 * contenu — meme specificite que nos classes (`:where()` = 0), mais imprime
 * apres notre feuille de style, donc gagnant en cascade. Toute marge posee
 * sur le dernier enfant (paragraphe, liste, bouton...) est donc ecrasee, quel
 * que soit son type. La respiration doit donc venir du conteneur lui-meme
 * (padding), pas d'une marge d'enfant : uniquement quand l'accordeon est
 * ouvert, pour ne pas espacer les accordeons fermes.
 */
.is-style-fizze-q[open] { padding-bottom: var(--fz-sec-in); }

.is-style-fizze-q > summary {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	padding: clamp(1rem, 2vw, 1.4rem) 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--fz-head);
	/*
	 * La question montait a 40 px en graisse 900, avec un interlignage de
	 * 1,06 et un tracking tres serre : a l'echelle d'un H2, pour un element
	 * qui n'est pas un titre de section. Elle garde sa graisse — c'est la
	 * voix FIZZE — mais redescend d'un cran net et respire. La hierarchie
	 * avec le H2 qui la surplombe redevient lisible.
	 */
	font-weight: 900;
	letter-spacing: -0.015em;
	line-height: 1.22;
	font-size: clamp(1.1rem, 1.9vw, 1.5rem);
	color: var(--fz-ink);
	transition: color 0.25s var(--fz-ease);
}
.is-style-fizze-q > summary::-webkit-details-marker { display: none; }
/*
 * Le guillemet decoratif — hors du texte editable, et hors de la grille de
 * contenu (THEME-SERVICES-003) : il occupait auparavant sa propre colonne
 * (`auto 1fr auto`), ce qui decalait le texte de la question d'environ 48px
 * par rapport au kicker/H2/chapeau de la section. Il vit maintenant dans la
 * marge laterale de la page (`right: 100%`, en dehors de la boite du
 * <summary>), pour que le texte demarre sur le meme axe que le reste du
 * contenu tout en gardant le marqueur visible. La marge (`--fz-gut`) est
 * toujours d'au moins ~39px des que ce marqueur est affiche (il est masque
 * sous 782px, ou elle se resserre), largement assez pour son gabarit.
 */
.is-style-fizze-q > summary::before {
	content: '\00AB';
	position: absolute;
	/* Aligne sur la PREMIERE LIGNE de la question, pas sur le bord de la
	   boite : le <summary> ouvre par son padding, et le guillemet flottait
	   au-dessus du texte depuis qu'il avait cesse d'etre massif. */
	top: clamp(1rem, 2vw, 1.4rem);
	right: 100%;
	margin-right: 0.55rem;
	font-family: var(--fz-head);
	font-weight: 900;
	/*
	 * Il pesait presque autant que la question. Reduit de moitie et pose sur
	 * la premiere ligne, il redevient ce qu'il est : une marque de citation,
	 * pas un element de composition.
	 */
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	line-height: 1.5;
	color: var(--fz-border-blue);
	transition: color 0.25s var(--fz-ease);
}
/* Le + qui pivote en ×. */
.is-style-fizze-q > summary::after {
	content: '';
	grid-column: 3;
	width: 28px;
	height: 28px;
	flex: none;
	margin-top: 0.15rem;
	/*
	 * Le cercle borde attirait l'oeil autant que la question. Il perd son
	 * contour au repos pour une surface a peine posee, et ses traits
	 * s'affinent. Le mecanisme et la bascule bleue a l'ouverture — valides en
	 * THEME-ACCORDION-004 — ne changent pas.
	 */
	border: 1px solid transparent;
	border-radius: 50%;
	background-color: rgba(17, 24, 39, 0.05);
	background-image: linear-gradient(var(--fz-ink), var(--fz-ink)), linear-gradient(var(--fz-ink), var(--fz-ink));
	background-size: 11px 1.5px, 1.5px 11px;
	background-position: center, center;
	background-repeat: no-repeat;
	transition: background-color 0.3s var(--fz-ease), border-color 0.3s var(--fz-ease), transform 0.3s var(--fz-ease);
}
/*
 * La reaction au survol tient en trois riens simultanes : la question se
 * teinte, le guillemet s'allume, le marqueur se remplit. Aucun mouvement,
 * aucune ombre — le composant reste calme sous la souris.
 */
.is-style-fizze-q > summary:hover { color: var(--fz-blue-steel); }
.is-style-fizze-q > summary:hover::before,
.is-style-fizze-q > summary:focus-visible::before { color: var(--fz-blue); }
.is-style-fizze-q > summary:hover::after,
.is-style-fizze-q > summary:focus-visible::after,
.is-style-fizze-q[open] > summary::after {
	border-color: var(--fz-blue);
	background-color: var(--fz-blue);
	background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
}
.is-style-fizze-q[open] > summary::before { color: var(--fz-blue); }
.is-style-fizze-q[open] > summary::after { transform: rotate(135deg); }

/* Le contenu s'ouvre sans a-coup (fizze.js mesure la hauteur reelle). */
.is-style-fizze-q[open] > *:not(summary) { animation: fizze-open 0.32s var(--fz-ease) both; }
@keyframes fizze-open {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

/* Le registre a l'echelle intime : votre part / notre part, dans la reponse. */
.fizze-q-grid {
	padding-left: clamp(2.4rem, 5vw, 4rem);
	max-width: 62rem;
	margin-bottom: 1.25rem;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}
.fizze-q-grid .fizze-lbl {
	color: var(--fz-muted);
	margin: 0 0 0.6rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--fz-border);
}
.fizze-q-you .fizze-lbl { color: var(--fz-blue); border-bottom-color: var(--fz-border-blue); }
.fizze-q-you p:last-child { color: var(--fz-ink); font-weight: 600; font-size: 1.0625rem; margin: 0; }
.fizze-q-us p:last-child { color: var(--fz-muted); margin: 0; }
.fizze-q-us em { font-style: normal; font-weight: 700; color: var(--fz-blue); }
.fizze-q-out {
	margin: 0 0 clamp(1.25rem, 2.5vw, 2rem) clamp(2.4rem, 5vw, 4rem);
	padding-left: 1rem;
	border-left: 3px solid var(--fz-blue);
	color: var(--fz-ink);
	font-weight: 600;
	max-width: 62ch;
}
/*
 * Les boutons d'une reponse d'accordeon sont centres dans la reponse. Le
 * reglage de justification pose bloc par bloc dans Gutenberg disait « a
 * gauche » : la composition interne de l'accordeon appartient au composant,
 * pas a chaque contenu, et neuf blocs identiques n'ont pas a porter neuf
 * fois la meme decision.
 */
.is-style-fizze-q .wp-block-buttons {
	justify-content: center;
	margin-top: clamp(1.1rem, 2.4vw, 1.6rem);
}

.fizze-phrase-foot { margin: 1.25rem 0 0; color: var(--fz-muted); }
.fizze-phrase-foot a { color: var(--fz-blue); font-weight: 700; }

/* Listes « on ne fera pas », proposees comme style de bloc sur core/list. */
.is-style-fizze-nope-list { list-style: none; padding: 0; max-width: 58ch; }
.is-style-fizze-nope-list li {
	position: relative;
	padding: clamp(0.8rem, 1.8vw, 1.15rem) 0 clamp(0.8rem, 1.8vw, 1.15rem) 2.4rem;
	border-bottom: 1px solid rgba(17, 24, 39, 0.1);
	font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
	font-weight: 600;
}
.is-style-fizze-nope-list li::before {
	content: '\00D7';
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 2px solid var(--fz-warm);
	border-radius: 50%;
	color: var(--fz-warm);
	font-size: 0.9rem;
	line-height: 1;
}

/* Listes de registre, en clair. */
.is-style-fizze-ledger-list { list-style: none; padding: 0; }
.is-style-fizze-ledger-list li {
	position: relative;
	padding: 0.35rem 0 0.35rem 1.6rem;
	font-size: 0.9375rem;
	color: var(--fz-muted);
	border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}
.is-style-fizze-ledger-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1em;
	width: 8px;
	height: 1px;
	background: var(--fz-border-blue);
}

/* ---------- 8. CTA sur marine ---------------------------------------- */

.fizze-contact {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--fz-navy);
	color: var(--fz-on-navy);
	padding-block: var(--fz-sec);
}
.fizze-contact::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: -5%;
	bottom: -30%;
	width: min(1000px, 100vw);
	aspect-ratio: 1;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(59, 102, 240, 0.25), transparent 70%);
}
.fizze-contact .fizze-kicker { color: var(--fz-on-navy-muted); }
.fizze-contact .fizze-h2 { color: var(--fz-white); }
.fizze-contact-grid { gap: clamp(2rem, 5vw, 4rem); align-items: flex-start; }

/* ---------- 9. Pied de page ------------------------------------------ */

.fizze-ftr {
	background: #070C20;
	color: var(--fz-on-navy-muted);
	border-top: 1px solid rgba(191, 207, 248, 0.1);
	padding-block: clamp(2rem, 4vw, 3rem) 0;
}
.fizze-ftr__top { gap: 28px; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); justify-content: flex-start; }
.fizze-ftr .fizze-wordmark a { color: var(--fz-white); }
.fizze-ftr__desc { line-height: 1.6; max-width: 34ch; margin: 1rem 0 0; }
.fizze-ftr__mail a { color: var(--fz-white); text-decoration: none; }
.fizze-ftr__mail a:hover { text-decoration: underline; }
/*
 * Sans la colonne Langue, deux colonnes de liens ne remplissaient plus le
 * rang : etirees a parts egales avec la marque (34/33/33), elles laissaient
 * beaucoup de vide autour de trois liens courts. La marque devient la zone
 * principale (elle absorbe l'espace disponible, `!important` necessaire pour
 * passer au-dessus du `flex-basis:34%` pose en ligne par le bloc Colonnes) ;
 * Explorer et Entreprise deviennent deux colonnes fixes et compactes, serrees
 * l'une contre l'autre plutot qu'etalees.
 */
.fizze-ftr__brandcol { flex: 1 1 auto !important; max-width: 460px; }
.fizze-ftr__col { flex: 0 0 148px !important; max-width: 148px; }
.fizze-ftr__col-title {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--fz-white);
	margin: 0 0 1rem;
}
.fizze-ftr__links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.fizze-ftr__links li { color: var(--fz-on-navy-muted); }
.fizze-ftr__links a { text-decoration: none; transition: color 0.18s var(--fz-ease); }
.fizze-ftr__links a:hover { color: var(--fz-white); }
.fizze-ftr__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-block: 22px;
	gap: 16px;
}
.fizze-ftr__bottom p { margin: 0; }

/* ---------- 10. Blog, archives, pages ordinaires --------------------- */

.fizze-pagehead .fizze-kicker { margin-bottom: 0.5rem; }
.fizze-pagehead .wp-block-post-date {
	color: var(--fz-blue);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.fizze-pagehead .wp-block-post-date a { text-decoration: none; }

.fizze-card { border-top: 1px solid var(--fz-border); padding-top: 1.1rem; }
.fizze-card .wp-block-post-title a { text-decoration: none; }
.fizze-card .wp-block-post-title a:hover { color: var(--fz-blue); }
/* Extrait sur le creme (LAUNCH-VISUAL-002) : #6B7280 y fait 4,25:1, le cran du dessous 6,65. */
.fizze-card .wp-block-post-excerpt { color: var(--fz-muted-strong); }
.fizze-pagination { margin-top: var(--fz-sec-in); font-weight: 700; }
.fizze-pagination a { text-decoration: none; color: var(--fz-blue); }

/*
 * L'echelle d'affichage du hero (67 px pour un H2) est faite pour des titres
 * de section, pas pour ponctuer un article. Dans un contenu editorial on
 * redescend d'un cran — sauf pour les titres qui portent explicitement une
 * classe FIZZE, et jamais sur les gabarits pleine largeur (`--bare`), ou les
 * compositions gardent leur echelle.
 */
.fizze-main:not(.fizze-main--bare) .wp-block-post-content h2:not([class*="fizze-"]) {
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
}
.fizze-main:not(.fizze-main--bare) .wp-block-post-content h3:not([class*="fizze-"]) {
	font-size: clamp(1.25rem, 2vw, 1.6rem);
}

/* Le contenu long d'un article ou d'une page garde la mesure de lecture,
   sans que le theme impose de conteneur rigide aux blocs alignes. */
.fizze-main .wp-block-post-content > p,
.fizze-main .wp-block-post-content > ul,
.fizze-main .wp-block-post-content > ol { max-width: 68ch; }
.fizze-main .wp-block-post-content > ul,
.fizze-main .wp-block-post-content > ol { padding-left: 1.25rem; }

/* ---------- 11. Motion ------------------------------------------------ */

/*
 * Deux signatures, et rien d'autre : les blocs de premier ecran entrent une
 * fois au chargement, les sections suivantes se levent a l'approche. Les
 * classes `is-in` sont posees par fizze.js ; sans JS tout est deja visible.
 */
.fizze-js .fizze-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.75s var(--fz-ease), transform 0.75s cubic-bezier(0.16, 0.84, 0.24, 1);
}
.fizze-js .fizze-reveal.is-in { opacity: 1; transform: none; }

/*
 * L'entree du hero, en cinq temps : surtitre, titre, chapeau, CTA, note. Le
 * titre a sa propre animation — un peu plus ample et legerement floue au
 * depart — pour qu'il soit le sommet du mouvement et pas une ligne de plus.
 */
.fizze-js .fizze-hero .fizze-hero-say > * {
	animation: fizze-enter 0.9s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
.fizze-js .fizze-hero .fizze-hero-say > *:nth-child(1) { animation-delay: 0.08s; }
.fizze-js .fizze-hero .fizze-hero-say > *:nth-child(2) {
	animation-name: fizze-enter-title;
	animation-duration: 1.1s;
	animation-delay: 0.18s;
}
.fizze-js .fizze-hero .fizze-hero-say > *:nth-child(3) { animation-delay: 0.42s; }
.fizze-js .fizze-hero .fizze-hero-say > *:nth-child(4) { animation-delay: 0.54s; }
.fizze-js .fizze-hero .fizze-hero-say > *:nth-child(5) { animation-delay: 0.64s; }

@keyframes fizze-enter {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: none; }
}
@keyframes fizze-enter-title {
	from { opacity: 0; transform: translateY(34px) scale(0.985); filter: blur(9px); }
	to { opacity: 1; transform: none; filter: blur(0); }
}

/*
 * Le registre arrive en dernier et se pose : il monte, s'ouvre legerement en
 * echelle, puis son liseret d'accent s'etire. La pile ne commence a defiler
 * qu'une fois le panneau en place — sinon le mouvement se lit avant l'objet.
 */
.fizze-js .fizze-hero .fizze-ledger {
	animation: fizze-enter-panel 1s cubic-bezier(0.16, 0.84, 0.24, 1) 0.5s both;
}
.fizze-js .fizze-hero .fizze-ledger::before {
	animation: fizze-accent 0.9s var(--fz-ease) 1.15s both;
}
.fizze-js .fizze-hero .fizze-ledger-scroll ul { animation-delay: 1.2s; }
@keyframes fizze-enter-panel {
	from { opacity: 0; transform: translateY(28px) scale(0.975); }
	to { opacity: 1; transform: none; }
}
@keyframes fizze-accent {
	from { opacity: 0; transform: scaleX(0.1); }
	to { opacity: 0.9; transform: scaleX(1); }
}

/*
 * Le compteur « notre cote » s'egrene une fois, a l'arrivee : c'est la seule
 * animation de la page qui raconte quelque chose — la pile qui s'accumule du
 * cote de FIZZE. Le nombre reste ecrit dans Gutenberg ; fizze.js le lit dans
 * le DOM et compte jusqu'a lui.
 */
.fizze-ledger-count strong { transition: color 0.4s var(--fz-ease); }
.fizze-js .fizze-ledger-count.is-counting strong { color: #A8C4FF; }

/* ---------- 12. Retour en haut --------------------------------------- */

/*
 * Fonction du thème, pas de la page : le bouton est pose par `wp_footer` et
 * fonctionne sur n'importe quel contenu assez long. Il vit en bas a droite,
 * la ou le regard se dirige naturellement pres de la scrollbar.
 */
.fizze-top {
	position: fixed;
	right: clamp(0.9rem, 2.5vw, 1.6rem);
	bottom: clamp(0.9rem, 2.5vw, 1.6rem);
	z-index: 55;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(191, 207, 248, 0.5);
	border-radius: 50%;
	background: rgba(11, 20, 54, 0.92);
	backdrop-filter: saturate(1.4) blur(10px);
	color: var(--fz-white);
	cursor: pointer;
	/*
	 * Un liseret clair a l'exterieur, une ombre portee franche : le bouton est
	 * fixe et passe donc au-dessus de sections claires ET foncees. Le liseret
	 * le detache du marine, l'ombre le detache du blanc. Sans cette paire, il
	 * disparaissait sur la section Contact et se cherchait sur le reste.
	 */
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.16),
		0 12px 28px -12px rgba(2, 5, 18, 0.85);
	/* Absent tant qu'il ne sert a rien : ni visible, ni focusable. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(0.94);
	transition: opacity 0.35s var(--fz-ease), transform 0.35s var(--fz-ease),
		visibility 0.35s linear, background-color 0.25s var(--fz-ease),
		border-color 0.25s var(--fz-ease);
}
.fizze-top.is-in {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.fizze-top:hover,
.fizze-top:focus-visible {
	background: var(--fz-blue);
	border-color: var(--fz-blue);
	transform: translateY(-2px);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.24),
		0 16px 32px -12px rgba(37, 99, 235, 0.8);
}
/* La fleche : deux filets, pas une police d'icones. */
.fizze-top::before {
	content: '';
	width: 11px;
	height: 11px;
	margin-top: 3px;
	border-top: 2.5px solid currentColor;
	border-left: 2.5px solid currentColor;
	border-radius: 1px;
	transform: rotate(45deg);
	transition: transform 0.25s var(--fz-ease);
}
.fizze-top:hover::before { transform: rotate(45deg) translate(1px, 1px); }

/* Sur une page claire, le bouton se fonce pour rester lisible. */
body:not(:has(.fizze-hero)) .fizze-top {
	background: rgba(17, 24, 39, 0.92);
	border-color: rgba(255, 255, 255, 0.24);
}

/* ---------- 13. Responsive ------------------------------------------- */

/*
 * Le hero lache sa double colonne avant le reste : le titre massif a besoin
 * d'air. Gutenberg genere pour chaque bloc Colonnes une classe
 * `.wp-container-*` qui impose `flex-wrap: nowrap` au-dessus de 782 px ; les
 * `!important` qui suivent servent uniquement a reprendre la main sur elle.
 */
@media (max-width: 1180px) {
	:root { --fz-h1: clamp(2.8rem, 9vw, 5.5rem); }

	.fizze-hero-grid { flex-wrap: wrap !important; gap: clamp(1.75rem, 4vw, 2.75rem); }
	.fizze-hero-grid > .wp-block-column { flex-basis: 100% !important; }
	.fizze-hero-say { max-width: 46rem; }
	.fizze-lede { max-width: 54ch; }
	.fizze-ledger { max-width: 46rem; }
	.fizze-ledger-scroll { height: 170px; }
}

@media (max-width: 1024px) {
	.fizze-contact-grid { flex-wrap: wrap !important; }
	.fizze-contact-grid > .wp-block-column { flex-basis: 100% !important; }
	.fizze-contact-say { max-width: 46rem; }
	.fizze-contact-grid .is-style-fizze-panel { max-width: 36rem; }
	.fizze-q-grid { gap: 1.25rem; }
}

@media (max-width: 781px) {
	.fizze-hero { padding-top: clamp(5.5rem, 15vh, 7rem); }

	/*
	 * Le registre s'empile : l'asymetrie se lit mieux de haut en bas, et
	 * cote a cote les lignes de « Notre cote » etaient coupees des 390 px.
	 * Le double selecteur est necessaire : la composition demande des
	 * colonnes non empilees, ce qui fait porter a WordPress un
	 * `.wp-block-columns.is-not-stacked-on-mobile` qu'il faut depasser.
	 */
	.wp-block-columns.fizze-ledger { display: block; }
	.fizze-ledger-you { border-right: 0; border-bottom: 1px solid rgba(191, 207, 248, 0.28); }
	/* La frontiere verticale n'a plus de sens une fois les cotes empiles. */
	.fizze-ledger-you::after { display: none; }
	/* Pleine largeur : les lignes peuvent revenir a la ligne plutot que d'etre
	   coupees — la plus longue depassait de quelques pixels. */
	.fizze-ledger-us li { white-space: normal; text-overflow: clip; }
	.fizze-ledger-scroll { height: 150px; }

	.fizze-hero-cta { flex-direction: column; align-items: stretch; }
	.fizze-hero-cta .wp-block-button,
	.fizze-hero-cta .wp-block-button__link { width: 100%; text-align: center; }
	/* Le lien secondaire perd son filet : etire, il lisait mal. */
	.fizze-hero-cta .fizze-lnk .wp-block-button__link { border-bottom: 0; }

	.is-style-fizze-q > summary { grid-template-columns: 1fr auto; }
	.is-style-fizze-q > summary::before { display: none; }
	.fizze-q-grid, .fizze-q-out { padding-left: 0; margin-left: 0; }

}

/* ---------- 14. Reduced motion --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	/* !important : doit l'emporter sur `html.fizze-smooth-scroll`, plus
	   specifique, si jamais la classe etait posee malgre la preference. */
	html { scroll-behavior: auto !important; }

	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.fizze-js .fizze-reveal { opacity: 1; transform: none; }
	.fizze-js .fizze-hero .fizze-hero-say > *,
	.fizze-js .fizze-hero .fizze-ledger,
	.fizze-js .fizze-hero .fizze-ledger::before {
		opacity: 1;
		transform: none;
		filter: none;
		animation: none;
	}
	.fizze-js .fizze-hero .fizze-ledger::before { opacity: 0.9; }
	.fizze-hero-title { text-shadow: none; }

	/* Le bouton de retour en haut apparait, mais sans glissement. */
	.fizze-top { transform: none; }
	.fizze-top.is-in { transform: none; }
	.fizze-top:hover,
	.fizze-top:focus-visible { transform: none; }

	/* La boucle du registre devient une liste consultable. */
	.fizze-ledger-scroll ul { animation: none; }
	.fizze-ledger-scroll {
		height: auto;
		max-height: 250px;
		overflow-y: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ---------- 15. Page Contact (Fluent Forms) -------------------------- */

/*
 * Fluent Forms fournit le moteur du formulaire ; cette section fournit
 * l'experience FIZZE : une feuille posee sur la page, des chapitres
 * numerotes, des cartes de choix, des champs au meme niveau de finition
 * que le reste du site. Aucun composant n'est recree : on habille le
 * balisage que le plugin produit deja.
 *
 * Tout est porte par `.fzc-sheet` ou `.fzc-hero` : rien ici ne peut
 * deborder sur un autre formulaire du site.
 */

.fzc-hero,
.fzc-body,
.fzc-ov {
	--fzc-field-radius: 8px;
	--fzc-rail: 44px;
	--fzc-rail-gap: 18px;
	--fzc-blue-wash: rgba(37, 99, 235, 0.05);
	--fzc-ring: rgba(37, 99, 235, 0.12);
	--fzc-lift: 0 2px 6px rgba(17, 24, 39, 0.05), 0 24px 48px -20px rgba(17, 24, 39, 0.16);
}

/* --- Hero ------------------------------------------------------------- */

.fzc-hero {
	padding-top: clamp(2.5rem, 6vw, 4.5rem);
	padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
	text-align: center;
}
.fzc-hero > .fizze-kicker { margin-bottom: 0.9rem; }
.fzc-hero__title {
	font-size: clamp(2.3rem, 5.6vw, 3.6rem);
	line-height: 1.02;
	margin: 0;
}
.fzc-hero > .fzc-hero__lede {
	margin: 1.1rem auto 0;
	max-width: 52ch;
	font-size: clamp(1rem, 0.97rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--fz-muted);
}
.fzc-hero__facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 22px;
	margin: 1.9rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--fz-muted);
}
.fzc-hero__fact { display: inline-flex; align-items: center; gap: 8px; }
.fzc-hero__fact svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--fz-blue); }

/* --- La feuille ------------------------------------------------------- */

.fzc-body { padding-bottom: var(--fz-sec); }
.fzc-sheet {
	background: var(--fz-white);
	border: 1px solid var(--fz-border);
	border-radius: var(--wp--custom--radius--panel);
	box-shadow: var(--fzc-lift);
	padding: clamp(26px, 4.4vw, 52px);
}
.fzc-sheet .fluentform,
.fzc-sheet .frm-fluent-form { margin: 0; }

/*
 * La colonne du parcours est une marge posee sur chaque groupe. Le
 * fieldset porte un `padding: 0 !important` en style en ligne : un
 * padding sur lui serait ignore, quoi qu'on ecrive ici.
 */
.fzc-sheet .frm-fluent-form > fieldset { position: relative; }
.fzc-sheet .frm-fluent-form .ff-el-group,
.fzc-sheet .frm-fluent-form .ff_submit_btn_wrapper {
	margin-left: calc(var(--fzc-rail) + var(--fzc-rail-gap));
}

/* --- Chapitres -------------------------------------------------------- */

.fzc-sheet .fzc-chapterwrap { margin-bottom: 0; }
.fzc-sheet .fzc-chapterwrap + .ff-el-group { margin-top: 22px; }
.fzc-sheet .ff-el-group + .fzc-chapterwrap { margin-top: clamp(34px, 4vw, 48px); }

.fzc-chapter { position: relative; }
.fzc-chapter__mark {
	position: absolute;
	top: -2px;
	left: calc((var(--fzc-rail) + var(--fzc-rail-gap)) * -1);
	width: 34px;
	height: 34px;
	margin-left: calc((var(--fzc-rail) - 34px) / 2);
	border-radius: 50%;
	background: var(--fz-white);
	border: 1.5px solid var(--fz-border);
	color: var(--fz-muted);
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
/*
 * Le trait de liaison du parcours est un fond, pas un element.
 *
 * Il a d'abord ete fait de pseudo-elements absolus d'une hauteur fixe
 * genereuse, avec un cache sur le dernier chapitre. Un element absolu
 * participe a la zone de defilement du document : le trait de 2400 px du
 * chapitre 3 ajoutait presque 1000 px de blanc apres le pied de page. Un
 * fond, lui, ne peut jamais depasser sa boite.
 *
 * Le degrade est donc pose sur le fieldset, du premier chapitre jusqu'en
 * bas ; les deux sections finales (« ce qui se passe ensuite » et
 * l'envoi) le recouvrent avec leur propre fond blanc.
 */
.fzc-sheet .frm-fluent-form > fieldset {
	background-image: linear-gradient(var(--fz-border), var(--fz-border));
	background-repeat: no-repeat;
	background-size: 1.5px calc(100% - 38px);
	background-position: calc(var(--fzc-rail) / 2 - 0.75px) 38px;
}

.fzc-chapter__title {
	font-family: var(--fz-head);
	font-weight: 800;
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
	padding-top: 3px;
}
.fzc-chapter__hint {
	margin: 0.6rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--fz-muted);
	max-width: 52ch;
}

/* --- Champs ----------------------------------------------------------- */

.fzc-sheet .ff-el-group { margin-bottom: 0; }
.fzc-sheet .ff-el-group + .ff-el-group { margin-top: 20px; }

.fzc-sheet .ff-el-input--label label {
	display: block;
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--fz-ink);
	margin: 0 0 7px;
}
.fzc-sheet .ff-el-is-required label::after { color: var(--fz-blue) !important; }

.fzc-sheet .ff-el-help-message {
	font-size: 0.8438rem;
	line-height: 1.55;
	color: var(--fz-muted);
	/* Le plugin met ces textes en italique ; V2 les garde en romain. */
	font-style: normal;
	margin: -1px 0 9px;
	max-width: 56ch;
}

.fzc-sheet input[type="text"],
.fzc-sheet input[type="email"],
.fzc-sheet input[type="tel"],
.fzc-sheet input[type="url"],
.fzc-sheet textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--fz-body);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--fz-ink);
	background: var(--fz-white);
	border: 1.5px solid var(--fz-border);
	border-radius: var(--fzc-field-radius);
	padding: 12px 14px;
	transition: border-color 0.16s var(--fz-ease), box-shadow 0.16s var(--fz-ease);
	appearance: none;
}
.fzc-sheet input::placeholder,
.fzc-sheet textarea::placeholder { color: #9CA3AF; opacity: 1; }
.fzc-sheet input[type="text"]:hover,
.fzc-sheet input[type="email"]:hover,
.fzc-sheet input[type="url"]:hover,
.fzc-sheet textarea:hover { border-color: #D5DAE2; }
.fzc-sheet input[type="text"]:focus,
.fzc-sheet input[type="email"]:focus,
.fzc-sheet input[type="url"]:focus,
.fzc-sheet textarea:focus {
	outline: none;
	border-color: var(--fz-blue);
	box-shadow: 0 0 0 3px var(--fzc-ring);
}
.fzc-sheet textarea { min-height: 170px; resize: vertical; }

/*
 * Prenom / Nom cote a cote. Le pourcentage se calcule sur le fieldset,
 * qui est plus large que l'espace reellement disponible : on retire donc
 * explicitement la colonne du parcours et la gouttiere.
 */
@media (min-width: 601px) {
	/*
	 * Flottants et non `inline-block` : deux blocs en ligne laisseraient
	 * passer l'espace blanc du HTML entre eux, et la paire ne tiendrait
	 * plus sur une ligne.
	 */
	.fzc-sheet:not(.fzc-sheet--services) .frm-fluent-form .fzc-f--prenom,
	.fzc-sheet:not(.fzc-sheet--services) .frm-fluent-form .fzc-f--nom {
		float: left;
		width: calc((100% - var(--fzc-rail) - var(--fzc-rail-gap) - 14px) / 2);
	}
	.fzc-sheet:not(.fzc-sheet--services) .frm-fluent-form .fzc-f--nom { margin-left: 12px; }
	.fzc-sheet:not(.fzc-sheet--services) .frm-fluent-form .fzc-f--email { clear: both; }
}

/* Champ facultatif : dit clairement qu'on peut passer son chemin. */
.fzc-sheet .fzc-f--site-url .ff-el-input--label label::after,
.fzc-sheet .fzc-f--telephone .ff-el-input--label label::after {
	content: 'facultatif';
	font-family: var(--fz-body);
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--fz-muted);
	margin-left: 6px;
}

/* --- Cartes de choix -------------------------------------------------- */

.fzc-sheet .fzc-label-hidden > .ff-el-input--label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-input--content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check { margin: 0; }
.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check:last-child { grid-column: 1 / -1; }

.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 13px;
	height: 100%;
	box-sizing: border-box;
	padding: 16px 16px 16px 15px;
	background: var(--fz-white);
	border: 1.5px solid var(--fz-border);
	border-radius: var(--wp--custom--radius--card);
	cursor: pointer;
	font-weight: 400;
	transition: border-color 0.18s var(--fz-ease), background 0.18s var(--fz-ease),
		box-shadow 0.18s var(--fz-ease), transform 0.18s var(--fz-ease);
}
.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label::before {
	content: '';
	width: 34px;
	height: 34px;
	border-radius: 8px;
	border: 1px solid var(--fz-border);
	background-image: var(--fzc-choice-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 17px 17px;
	transition: background-color 0.18s var(--fz-ease), border-color 0.18s var(--fz-ease);
}
/* L'input reste focusable mais invisible : la carte entiere est la cible. */
.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label > span:not([class]) { min-width: 0; }
.fzc-choice__t {
	display: block;
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 0.96875rem;
	line-height: 1.25;
	color: var(--fz-ink);
}
.fzc-choice__d {
	display: block;
	margin-top: 4px;
	font-size: 0.84375rem;
	line-height: 1.45;
	color: var(--fz-muted);
}
.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label:hover {
	border-color: var(--fz-border-blue);
	background: var(--fzc-blue-wash);
	transform: translateY(-1px);
}
.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label:hover::before { border-color: var(--fz-border-blue); }
.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label:has(:checked) {
	border-color: var(--fz-blue);
	background: var(--fzc-blue-wash);
	box-shadow: 0 0 0 3px var(--fzc-ring);
	transform: none;
}
.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label:has(:checked)::before {
	background-color: var(--fz-blue);
	border-color: var(--fz-blue);
	background-image: var(--fzc-choice-icon-on, var(--fzc-choice-icon));
}
.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label:has(:focus-visible) {
	outline: 3px solid var(--fz-blue);
	outline-offset: 3px;
}

/* Une icone par carte : elles disent la nature du projet avant la lecture. */
.fzc-sheet .fzc-f--projet .ff-el-form-check:nth-child(1) .ff-el-form-check-label {
	--fzc-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280'%3E%3Cpath d='M10 2.2l1.6 4.2 4.2 1.6-4.2 1.6L10 13.8 8.4 9.6 4.2 8l4.2-1.6L10 2.2z' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
	--fzc-choice-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF'%3E%3Cpath d='M10 2.2l1.6 4.2 4.2 1.6-4.2 1.6L10 13.8 8.4 9.6 4.2 8l4.2-1.6L10 2.2z' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fzc-sheet .fzc-f--projet .ff-el-form-check:nth-child(2) .ff-el-form-check-label {
	--fzc-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280'%3E%3Crect x='2.5' y='3.5' width='15' height='13' rx='2' stroke-width='1.4'/%3E%3Cpath d='M2.5 7.3h15' stroke-width='1.4'/%3E%3C/svg%3E");
	--fzc-choice-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF'%3E%3Crect x='2.5' y='3.5' width='15' height='13' rx='2' stroke-width='1.4'/%3E%3Cpath d='M2.5 7.3h15' stroke-width='1.4'/%3E%3C/svg%3E");
}
.fzc-sheet .fzc-f--projet .ff-el-form-check:nth-child(3) .ff-el-form-check-label {
	--fzc-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280'%3E%3Cpath d='M4.6 6.5h10.8l-.9 9a1.4 1.4 0 01-1.4 1.3H6.9a1.4 1.4 0 01-1.4-1.3l-.9-9z' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M7.4 8.3V5.9a2.6 2.6 0 015.2 0v2.4' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	--fzc-choice-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF'%3E%3Cpath d='M4.6 6.5h10.8l-.9 9a1.4 1.4 0 01-1.4 1.3H6.9a1.4 1.4 0 01-1.4-1.3l-.9-9z' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M7.4 8.3V5.9a2.6 2.6 0 015.2 0v2.4' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.fzc-sheet .fzc-f--projet .ff-el-form-check:nth-child(4) .ff-el-form-check-label {
	--fzc-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280'%3E%3Ccircle cx='8.7' cy='8.7' r='5.2' stroke-width='1.4'/%3E%3Cpath d='M12.6 12.6L17 17' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	--fzc-choice-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF'%3E%3Ccircle cx='8.7' cy='8.7' r='5.2' stroke-width='1.4'/%3E%3Cpath d='M12.6 12.6L17 17' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.fzc-sheet .fzc-f--projet .ff-el-form-check:nth-child(5) .ff-el-form-check-label {
	--fzc-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280'%3E%3Cpath d='M3.2 5.6a2 2 0 012-2h9.6a2 2 0 012 2v6a2 2 0 01-2 2H8l-4.8 3.4V5.6z' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
	--fzc-choice-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF'%3E%3Cpath d='M3.2 5.6a2 2 0 012-2h9.6a2 2 0 012 2v6a2 2 0 01-2 2H8l-4.8 3.4V5.6z' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Choix courts en pastilles (site existant, langue, telephone) ----- */

.fzc-sheet .fzc-f--site-existant .ff-el-input--content,
.fzc-sheet .fzc-f--langue .ff-el-input--content,
.fzc-sheet .fzc-f--par-telephone .ff-el-input--content,
.fzc-sheet .fzc-f--pills .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
/*
 * Avec le placement « apres le libelle », Fluent Forms rend le texte
 * d'aide A L'INTERIEUR du conteneur des options : il devient donc un
 * element flex comme les choix, et les pousse sur le cote. Il doit
 * occuper sa propre ligne pour que les pastilles reviennent sous la
 * question, groupees a gauche.
 */
.fzc-sheet .ff-el-input--content > .ff-el-help-message {
	flex: 0 0 100%;
	grid-column: 1 / -1;
	margin: 0;
	/*
	 * La mesure confortable de 56ch appliquee aux textes d'aide laissait
	 * ici assez de place sur la ligne pour qu'une premiere pastille vienne
	 * se glisser a cote du texte : la ligne doit etre prise en entier.
	 */
	max-width: 100%;
}
/*
 * `display: flex` et pas le bloc par defaut : l'etiquette est en
 * `inline-flex`, elle reposait donc sur une ligne de texte et son
 * conteneur gagnait la place des jambages — quelques pixels de decalage
 * vertical entre deux pastilles voisines.
 */
.fzc-sheet .fzc-f--site-existant .ff-el-form-check,
.fzc-sheet .fzc-f--langue .ff-el-form-check,
.fzc-sheet .fzc-f--par-telephone .ff-el-form-check,
.fzc-sheet .fzc-f--pills .ff-el-form-check { margin: 0; display: flex; }

.fzc-sheet .fzc-f--site-existant .ff-el-form-check-label,
.fzc-sheet .fzc-f--langue .ff-el-form-check-label,
.fzc-sheet .fzc-f--par-telephone .ff-el-form-check-label,
.fzc-sheet .fzc-f--pills .ff-el-form-check-label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 16px;
	background: var(--fz-white);
	border: 1.5px solid var(--fz-border);
	border-radius: var(--wp--custom--radius--pill);
	font-size: 0.9375rem;
	cursor: pointer;
	transition: border-color 0.16s var(--fz-ease), background 0.16s var(--fz-ease);
}
.fzc-sheet .fzc-f--par-telephone .ff-el-form-check-label { border-radius: var(--wp--custom--radius--card); }
.fzc-sheet .fzc-f--site-existant .ff-el-form-check-label:hover,
.fzc-sheet .fzc-f--langue .ff-el-form-check-label:hover,
.fzc-sheet .fzc-f--par-telephone .ff-el-form-check-label:hover,
.fzc-sheet .fzc-f--pills .ff-el-form-check-label:hover { border-color: var(--fz-border-blue); }
.fzc-sheet .fzc-f--site-existant .ff-el-form-check-label:has(:checked),
.fzc-sheet .fzc-f--langue .ff-el-form-check-label:has(:checked),
.fzc-sheet .fzc-f--par-telephone .ff-el-form-check-label:has(:checked),
.fzc-sheet .fzc-f--pills .ff-el-form-check-label:has(:checked) {
	border-color: var(--fz-blue);
	background: var(--fzc-blue-wash);
	color: var(--fz-blue-steel);
	font-weight: 600;
}
.fzc-sheet .fzc-f--site-existant .ff-el-form-check-input,
.fzc-sheet .fzc-f--langue .ff-el-form-check-input,
.fzc-sheet .fzc-f--par-telephone .ff-el-form-check-input,
.fzc-sheet .fzc-f--pills .ff-el-form-check-input { accent-color: var(--fz-blue); margin: 0; }

/* --- Ce qui se passe ensuite ----------------------------------------- */

/*
 * Les deux sections de cloture reprennent toute la largeur de la feuille
 * (marge a zero, colonne du parcours reprise en padding) : leur fond
 * blanc masque ainsi la fin du filet vertical, et leur filet de
 * separation traverse la feuille entiere. Elles sont collees l'une a
 * l'autre — l'ecart est un padding, pas une marge — pour qu'aucun bout
 * de trait ne reapparaisse entre les deux.
 */
.fzc-sheet .frm-fluent-form .fzc-nextwrap,
.fzc-sheet .frm-fluent-form .fzc-submitnote,
.fzc-sheet .frm-fluent-form .ff_submit_btn_wrapper {
	margin-left: 0;
	padding-left: calc(var(--fzc-rail) + var(--fzc-rail-gap));
	position: relative;
	background: var(--fz-white);
}
.fzc-sheet .frm-fluent-form .fzc-nextwrap,
.fzc-sheet .frm-fluent-form .fzc-submitnote { border-top: 1px solid var(--fz-border); }
.fzc-sheet .frm-fluent-form .fzc-nextwrap {
	margin-top: clamp(30px, 4vw, 42px);
	padding-top: clamp(26px, 3.4vw, 36px);
}
.fzc-next__title {
	margin: 0 0 18px;
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fz-muted);
}
.fzc-next__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.fzc-next__step { padding-left: 16px; border-left: 2px solid var(--fz-border-blue); }
.fzc-next__step b {
	display: block;
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--fz-ink);
}
.fzc-next__step span {
	display: block;
	margin-top: 5px;
	font-size: 0.8438rem;
	line-height: 1.5;
	color: var(--fz-muted);
}

/* --- Envoi ------------------------------------------------------------ */

/*
 * La phrase rassurante est un champ HTML du formulaire, pas le message
 * d'aide du bouton : ce plugin n'affiche jamais ce dernier. Elle reste
 * donc modifiable depuis Fluent Forms comme n'importe quel contenu.
 */
.fzc-sheet .frm-fluent-form .fzc-submitnote {
	margin-top: clamp(28px, 3.6vw, 38px);
	padding-top: clamp(24px, 3vw, 32px);
}
.fzc-submitnote__text {
	margin: 0;
	font-size: 0.8438rem;
	line-height: 1.5;
	color: var(--fz-muted);
	max-width: 46ch;
}
/* LEGAL-001F : mention d'information sous la phrase rassurante, avec son lien vers la politique de confidentialité. */
.fzc-submitnote__text + .fzc-submitnote__text { margin-top: 10px; }
.fzc-submitnote__text a {
	color: var(--fz-blue-ink);
	text-underline-offset: 3px;
}

.fzc-sheet .ff_submit_btn_wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	/* collee a la note : l'ecart est un padding, pour ne pas rouvrir le filet */
	margin-top: 0;
	padding-top: 16px;
}
/*
 * Le groupe porte un clearfix (`::before`/`::after` en `display: table`).
 * Dans un conteneur flex, ces deux pseudo-elements deviennent des
 * elements flex a part entiere : ils decalaient le bouton vers la droite
 * d'une gouttiere fantome. Ils n'ont ici rien a nettoyer.
 */
.fzc-sheet .frm-fluent-form .ff_submit_btn_wrapper::before,
.fzc-sheet .frm-fluent-form .ff_submit_btn_wrapper::after { content: none; }
.fzc-sheet .ff-btn-submit {
	order: 1;
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	padding: 15px 30px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--fz-blue) !important;
	color: var(--fz-white) !important;
	box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.45);
	transition: background-color 0.18s var(--fz-ease), box-shadow 0.18s var(--fz-ease),
		transform 0.18s var(--fz-ease);
}
.fzc-sheet .ff-btn-submit:hover {
	background-color: var(--fz-blue-hover) !important;
	box-shadow: 0 10px 22px -6px rgba(29, 78, 216, 0.55);
	transform: translateY(-1px);
}
.fzc-sheet .ff-btn-submit:active { transform: translateY(0); }
.fzc-sheet .ff_submit_btn_wrapper .ff-el-help-message {
	order: 2;
	margin: 0;
	max-width: 34ch;
	font-size: 0.8438rem;
	line-height: 1.5;
	color: var(--fz-muted);
}

/* --- Confirmation d'envoi -------------------------------------------- */

/*
 * La confirmation prend la place du formulaire dans la meme feuille : le
 * parcours se termine la ou il a commence. Le conteneur du plugin ne sert
 * plus que de point d'accroche, toute la mise en page vit dans `.fzc-done`.
 */
.fzc-sheet .ff-message-success {
	border: 0;
	padding: 0;
	background: none;
	color: var(--fz-ink);
}

/*
 * Densite et rythme repris de tres pres de la confirmation Contact V2 —
 * mission de convergence CONTACT-V3-005 : memes marges, meme carte de
 * resume grisee, meme respiration entre les blocs. Seuls les tokens
 * changent (couleurs, rayons, polices du design system V3).
 */
.fzc-done {
	max-width: 34rem;
	margin-inline: auto;
	text-align: center;
	padding-block: clamp(0.5rem, 2vw, 1.5rem);
}
/*
 * CONTACT-V3-001-FIX02 : l'avatar a quitte la confirmation.
 *
 * Decision produit : tant que la nouvelle version de Fino n'est pas
 * validee, aucune nouvelle utilisation de la mascotte. Le point d'entree
 * visuel devient typographique — `.fzc-done__hi`, « Merci. », pose au-dessus
 * du titre. Un mot dit la meme chose qu'un portrait, et ne depend d'aucun
 * arbitrage en cours.
 */
.fzc-done__hi {
	margin: 0 0 0.35rem;
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	line-height: 1.2;
	color: var(--fz-blue);
}
.fzc-done__title {
	font-family: var(--fz-head);
	font-weight: 800;
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--fz-ink);
	margin: 0;
}
.fzc-done__lead {
	margin: 1rem auto 0;
	max-width: 42ch;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--fz-muted);
}
/*
 * L'adresse ne doit jamais forcer un debordement sur un petit ecran, sans
 * pour autant se couper en deux quand la place ne manque pas :
 * `break-word` ne coupe que si le mot seul ne tient pas sur sa ligne,
 * la ou `anywhere` coupait des qu'il pouvait raccourcir la ligne.
 */
.fzc-done__lead strong {
	color: var(--fz-ink);
	font-weight: 600;
	overflow-wrap: break-word;
}
.fzc-done__signature {
	margin: 1.1rem 0 0;
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--fz-blue-hover);
}

/*
 * CONTACT-V3-001-FIX01 : le resume a ete retire.
 *
 * Il relisait au visiteur ce qu'il venait d'ecrire, a partir de champs du
 * formulaire generique qui n'existent plus dans le formulaire canonique.
 * La question qui reste apres l'envoi n'est pas « qu'est-ce que j'ai dit »
 * — il vient de l'ecrire — mais « et maintenant ? ». C'est a celle-la que
 * la confirmation repond desormais, avec `.fzc-done__next`.
 */
.fzc-done__note {
	margin: 1.375rem auto 0;
	max-width: 42ch;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--fz-muted);
}
/*
 * LA LIGNE DE CLOTURE.
 *
 * « Prochaine etape » n'est pas une carte de plus : c'est une ligne posee
 * entre deux filets, qui repond a la seule question restante — ce qui se
 * passe maintenant, et par quel canal. Deux filets et non une surface : la
 * confirmation doit rester une page, pas un recu.
 */
.fzc-done__next {
	margin-top: 1.75rem;
	padding: 1.1rem 0;
	border-top: 1px solid var(--fz-border);
	border-bottom: 1px solid var(--fz-border);
}
.fzc-done__next-lbl {
	margin: 0;
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fz-muted);
}
.fzc-done__next-txt {
	margin: 0.45rem 0 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--fz-ink);
}
/*
 * Meme prudence que sur `.fzc-done__lead` : l'adresse ne doit jamais
 * deborder, sans se couper en deux des qu'elle le pourrait.
 */
.fzc-done__next-txt strong { font-weight: 600; overflow-wrap: break-word; }

/*
 * LES DEUX SORTIES, ET LEUR HIERARCHIE.
 *
 * Elles ne disent pas la meme chose. « Decouvrir nos conseils » est une
 * continuation pour qui veut encore comprendre ; « Retour a l'accueil » est
 * la sortie de qui considere son parcours termine. La premiere garde donc
 * la pilule, la seconde reprend le CTA secondaire du theme (section 3) :
 * un lien souligne, pas un second bouton.
 *
 * La pilule reste a filet, jamais pleine : le visiteur vient de nous
 * ecrire, ce n'est pas le moment de lui vendre autre chose.
 */
.fzc-done__actions {
	margin-top: 1.625rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 20px;
}
.fzc-done__go {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.8rem 1.6rem;
	box-sizing: border-box;
	border: 1.5px solid var(--fz-border-blue);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--fz-white);
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--fz-blue);
	text-decoration: none;
	transition: border-color 0.16s var(--fz-ease), background 0.16s var(--fz-ease);
}
.fzc-done__go:hover { border-color: var(--fz-blue); background: var(--fzc-blue-wash); }
.fzc-done__home {
	display: inline-flex;
	align-items: center;
	/* Le lien reste une cible tactile pleine, meme sans pilule. */
	min-height: 44px;
	padding: 0 0.25rem;
	border: 0;
	background: none;
	font-family: var(--fz-head);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--fz-muted);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: var(--fz-border);
	cursor: pointer;
	transition: color 0.16s var(--fz-ease), text-decoration-color 0.16s var(--fz-ease);
}
.fzc-done__home:hover { color: var(--fz-ink); text-decoration-color: currentColor; }

/* --- Question simple : la sortie de secours -------------------------- */

.fzc-direct {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 32px);
	border: 1px solid var(--fz-border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--fz-surface);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
}
.fzc-direct__title {
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	line-height: 1.2;
	margin: 0;
	flex-basis: 100%;
}
.fzc-direct > .fzc-direct__text {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--fz-muted);
	max-width: 46ch;
}
.fzc-direct__mail { margin: 0; }
.fzc-direct__mail a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1.5px solid var(--fz-border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--fz-white);
	font-family: var(--fz-head);
	font-weight: 700;
	color: var(--fz-blue);
	text-decoration: none;
	transition: border-color 0.16s var(--fz-ease), background 0.16s var(--fz-ease);
}
.fzc-direct__mail a:hover { border-color: var(--fz-border-blue); background: var(--fzc-blue-wash); }

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 860px) {
	.fzc-next__list { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 768px) {
	.fzc-sheet { padding: 22px 18px; }
	.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-input--content { grid-template-columns: 1fr; }
	.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label { padding: 15px 14px; }
	.fzc-sheet .ff_submit_btn_wrapper { flex-direction: column; align-items: stretch; }
	.fzc-sheet .ff-btn-submit { width: 100%; }
	.fzc-sheet .ff_submit_btn_wrapper .ff-el-help-message { max-width: none; text-align: center; }
}

/*
 * Sous 600 px le rail couterait trop de largeur au formulaire : la
 * pastille repasse au-dessus du titre et le filet disparait.
 */
@media (max-width: 600px) {
	.fzc-sheet .frm-fluent-form .ff-el-group,
	.fzc-sheet .frm-fluent-form .ff_submit_btn_wrapper { margin-left: 0; }
	/* Plus de colonne de parcours : plus de trait a masquer, ni a reserver. */
	.fzc-sheet .frm-fluent-form > fieldset { background-image: none; }
	.fzc-sheet .frm-fluent-form .fzc-nextwrap,
	.fzc-sheet .frm-fluent-form .fzc-submitnote,
	.fzc-sheet .frm-fluent-form .ff_submit_btn_wrapper { padding-left: 0; }
	.fzc-chapter { padding-top: 42px; }
	.fzc-chapter__mark { top: 0; left: 0; margin-left: 0; width: 30px; height: 30px; font-size: 0.8125rem; }
	.fzc-chapter::before,
	.fzc-chapter--3::after { display: none; }
	.fzc-sheet .fzc-f--prenom,
	.fzc-sheet .fzc-f--nom { display: block; width: 100%; margin-left: 0; }
	.fzc-direct { flex-direction: column; align-items: flex-start; }
	.fzc-direct__mail a { width: 100%; justify-content: center; box-sizing: border-box; }
}

@media (prefers-reduced-motion: reduce) {
	.fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label:hover,
	.fzc-sheet .ff-btn-submit:hover { transform: none; }
}

/*
 * LE DEPART PROGRESSIF.
 *
 * Les etapes 2 et 3 du formulaire sont revelees par la logique conditionnelle
 * de Fluent Forms — c'est elle qui doit decider, parce qu'elle seule dispense
 * aussi de validation les champs caches. Le bouton d'envoi, lui, n'est pas un
 * champ : le plugin ne sait pas le conditionner. Tant qu'aucune carte n'est
 * choisie, il n'a rien a envoyer, et le proposer serait promettre un envoi
 * qui echouerait sur un champ requis invisible.
 *
 * `:has()` lit l'etat reel du groupe de boutons radio : aucune classe a
 * poser, aucun script. La regle ne peut que masquer, jamais bloquer — un
 * navigateur sans `:has()` retrouve simplement le bouton visible, et la
 * validation de Fluent Forms reste la garantie de fond.
 */
.fzc-sheet:not(.fzc-sheet--services) form:not(:has(input[name="projet"]:checked)) .ff_submit_btn_wrapper {
	display: none;
}

/* ---------- 16. Le tiroir mobile ------------------------------------- */

/*
 * Sous le point de rupture de WordPress (600 px), `fizze.js` (section 10)
 * DEPLACE le selecteur de langue et le CTA « Nous contacter » dans le
 * panneau de la navigation. Ils ne sont pas dupliques : ce sont les memes
 * noeuds que sur le bureau, et tout le comportement du tiroir reste celui du
 * bloc natif. Cette section ne fait donc que les habiller a leur nouvelle
 * place — d'ou des selecteurs fondes sur la POSITION et non sur une media
 * query, qui reprendrait un point de rupture dont le theme n'est pas
 * proprietaire.
 *
 * Le tiroir reste une navigation : quatre destinations, de l'air, une sortie
 * evidente. Rien d'autre n'y entre.
 */

/*
 * FIX-04 — LA VRAIE SOURCE DU VIDE. FIX-03 ne reduisait que le padding-top
 * du conteneur EXTERIEUR (`.is-menu-open`, ajuste 80px -> 64px) en le
 * croyant seul responsable — mais mesure faite dans le vrai tiroir, un
 * SECOND padding-top, du coeur WordPress cette fois et jamais touche par
 * le theme, s'ajoute par-dessus sur ce conteneur INTERIEUR :
 * `calc(24px + 2rem)` = 56px. Les deux se cumulaient (64 + 56 = 120px avant
 * Accueil). Le bouton Close est positionne (`position: absolute; top:0`)
 * relativement au conteneur EXTERIEUR (verifie par mesure : son bord haut
 * coincide au pixel pres avec le sommet du padding exterieur, jamais avec
 * celui du conteneur interieur) — reduire uniquement le padding interieur
 * fait donc remonter la navigation sans deplacer Close d'un pixel.
 *
 * FIX-05 — DERNIER AJUSTEMENT. Le 2rem pose en FIX-04 laissait encore trop
 * d'air avant Accueil au jugement visuel. Remis a plat sans supposer que
 * la cause etait encore la meme : mesure refaite sur l'etat FIX-04, le
 * seul padding-top restant sur ce conteneur INTERIEUR etait bien ce 2rem
 * (32px) — rien d'autre au-dessus d'Accueil. Supprime entierement
 * (0). Close reste inchange (sa position depend du padding-top du
 * conteneur EXTERIEUR, jamais de celui-ci) : Accueil remonte de 32px,
 * dans la cible visuelle de -30 a -40px. Accueil se retrouve au meme y
 * que le sommet de Close, sans collision (colonnes horizontalement
 * disjointes, verifie par mesure et par capture d'ecran).
 */
.fizze-hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp(1.75rem, 6vh, 2.75rem);
	width: 100%;
	padding-top: 0;
}

/* 1-2. La navigation principale : a gauche, aeree, jamais centree. */
.fizze-hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: clamp(0.85rem, 2.5vh, 1.35rem);
	width: 100%;
}

/*
 * 3. La langue. Elle devient une rangee pleine largeur et reprend son
 * libelle : dans la barre, l'icone seule suffisait faute de place ; dans le
 * tiroir, il y a la place de nommer les choses.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .fizze-langsel {
	order: 2;
	width: 100%;
	padding-top: clamp(1.25rem, 4vh, 1.75rem);
	border-top: 1px solid var(--fz-card-sep);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .fizze-langsel__btn {
	width: 100%;
	height: auto;
	padding: 0.85rem 0.9rem;
	justify-content: flex-start;
	gap: 0.7rem;
	font-size: 1rem;
	letter-spacing: 0;
	color: var(--fz-on-navy-muted);
	border-color: var(--fz-card-sep);
	background: var(--fz-card-bg);
	border-radius: 10px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .fizze-langsel__icon { width: 20px; height: 20px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .fizze-langsel__label { display: inline; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .fizze-langsel__current {
	display: inline;
	margin-left: auto;
	color: var(--fz-white);
	font-weight: 800;
	letter-spacing: 0.06em;
}
/* Le menu se deplie sous le bouton, sur toute sa largeur. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .fizze-langsel__menu {
	left: 0;
	right: 0;
	min-width: 0;
	max-width: none;
}

/*
 * 4. Le CTA. Il reste le CTA principal du site — bleu FIZZE, texte blanc,
 * rayon canonique de 6 px — et non un lien de navigation de plus. Il est
 * simplement pousse en dernier et etire : c'est la derniere chose que l'on
 * lit, et la plus facile a atteindre au pouce.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .fizze-hdr__cta {
	order: 3;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .fizze-hdr__cta .wp-block-button,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .fizze-hdr__cta .wp-block-button__link {
	width: 100%;
	text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .fizze-hdr__cta .wp-block-button__link {
	padding-block: 1rem;
	font-size: 1.0625rem;
}

/* La sortie : une cible franche, pas une croix perdue dans le coin. */
.fizze-hdr .wp-block-navigation__responsive-container-close {
	padding: 10px;
	border-radius: 50%;
	border: 1px solid var(--fz-card-sep);
	color: var(--fz-white);
}
.fizze-hdr .wp-block-navigation__responsive-container-close:hover,
.fizze-hdr .wp-block-navigation__responsive-container-close:focus-visible {
	background: var(--fz-card-bg);
	border-color: var(--fz-border-blue);
}

/* ---------- 17. Les colonnes a libelle -------------------------------- */

/*
 * LA CARTE CLAIRE — la version en plein jour des cartes sombres.
 *
 * Plusieurs sections opposent des categories cote a cote : ce qui est de
 * votre cote et ce qui est du notre, ce que vous gardez / ce que nous
 * reprenons / ce qui peut venir plus tard, ce qui part au lancement et ce
 * qui vient ensuite.
 *
 * LE COMPOSANT EST NOMME, PAS DEVINE. La premiere version le reconnaissait a
 * sa structure — une colonne ouverte par un libelle FIZZE. C'etait elegant et
 * c'etait faux : le registre du hero est exactement cela, une colonne ouverte
 * par « Votre cote ». Il s'est donc habille en carte blanche au milieu du
 * marine, avec ses textes clairs devenus illisibles. Un selecteur structurel
 * ne peut pas distinguer deux intentions qui ont la meme forme ; une classe,
 * si. `.fizze-cardcol` est posee sur les dix colonnes concernees et sur
 * elles seules.
 *
 * LA SIGNATURE. Le coin superieur gauche reste vif quand les trois autres
 * sont arrondis, et le filet d'accent s'y pose a fleur — la carte se lit
 * comme une fiche onglet, pas comme un rectangle de plus. La surface prend
 * le contrepied de son fond : creme sur le blanc, blanche sur le creme. Le
 * bleu ne sert qu'a l'accent et au libelle.
 */
.fizze-cardcol {
	position: relative;
	isolation: isolate;
	background: var(--fz-cream);
	border: 1px solid rgba(17, 24, 39, 0.09);
	/* L'asymetrie est le trait le plus reconnaissable du composant. */
	border-radius: 0 var(--fz-card-r-lite) var(--fz-card-r-lite) var(--fz-card-r-lite);
	padding: clamp(1.35rem, 2.6vw, 1.85rem);
}
/* Sur le creme, la carte passe au blanc : meme ecart, teinte inversee. */
.is-style-fizze-surface-cream .fizze-cardcol { background: var(--fz-white); }

/*
 * Le filet d'accent : court, epais, pose sur le coin vif. C'est le meme
 * geste que le liseret des cartes sombres — mais la ou le marine demandait
 * une lumiere qui traverse toute la carte, le fond clair demande un point
 * d'appui. Meme vocabulaire, autre phrase.
 */
.fizze-cardcol::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	width: 38px;
	height: 3px;
	pointer-events: none;
	background: var(--fz-blue);
}

/* Le libelle : la cle de lecture de la carte, et le seul autre bleu. */
.fizze-cardcol > .fizze-lbl {
	color: var(--fz-blue);
	margin: 0 0 0.9rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(17, 24, 39, 0.1);
}
/* Le titre de la categorie garde la mesure d'un sous-titre, pas d'un titre
   de section : trois colonnes ne sont pas trois pages. */
.fizze-cardcol > h3 {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.2;
	margin: 0 0 0.7rem;
}
.fizze-cardcol > p { color: var(--fz-muted-strong); }
.fizze-cardcol > p:last-child { margin-bottom: 0; }

/*
 * Dans une carte claire, le bleu est deja pris par le libelle. Une entree
 * `.fizze-next-dt` qui resterait bleue sous lui donnerait deux capitales
 * bleues empilees et aucune hierarchie : elle repasse donc a l'encre et
 * recoit le petit filet bleu des cartes sombres. Le systeme dit alors la
 * meme chose des deux cotes : libelle = bleu, entree = encre + filet,
 * texte = gris.
 */
.fizze-cardcol .fizze-next-dt {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--fz-ink);
	margin-top: 1.1rem;
	margin-bottom: 0.35rem;
}
.fizze-cardcol .fizze-next-dt::before {
	content: '';
	width: 14px;
	height: 2px;
	flex: none;
	border-radius: 2px;
	background: var(--fz-blue);
}
.fizze-cardcol .fizze-next-dt + p { margin-top: 0; }

/*
 * Empilees, les cartes doivent rester separees : le filet suffit, mais il
 * leur faut l'air que le `blockGap` des colonnes ne donne plus une fois la
 * rangee repliee.
 */
@media (max-width: 781px) {
	.wp-block-columns:has(> .fizze-cardcol) { gap: 1rem; }
}

/* ---------- 18. Les cartes d'offre ------------------------------------ */

/*
 * TROIS OFFRES, PAS TROIS COLONNES DE TEXTE.
 *
 * Essentiel / Professionnel / Premium Boutique ne comparent pas des
 * categories — elles comparent des ENGAGEMENTS : un nom, un prix, des
 * conditions, une promesse, des capacites. Cinq natures d'information dans
 * une meme carte, la ou `.fizze-cardcol` n'en porte que trois.
 *
 * LE COMPOSANT EST NOMME, PAS DEVINE (cf. section 17, et la regression du
 * registre du hero). `.fizze-offer` est pose explicitement sur les trois
 * groupes concernes ; aucune regle ci-dessous n'atteint un bloc par sa
 * seule forme.
 *
 * LA SIGNATURE — LE COIN VIF ET L'ACCENT QUI DESCEND. `.fizze-cardcol` ouvre
 * son coin superieur GAUCHE et y pose un accent HORIZONTAL. La fiche d'offre
 * ouvre son coin superieur DROIT et y pose un accent VERTICAL. Meme alphabet
 * — un angle vif, un trait bleu court a cet angle — tourne d'un quart. On
 * reconnait la parente sans confondre les deux composants : l'une raconte une
 * responsabilite, l'autre est une fiche qu'on compare.
 *
 * DEUX ZONES, PAS TROIS PLATEAUX. La premiere version separait identite,
 * promesse et capacites par trois bandes pleine largeur : la carte se lisait
 * comme un tableau. La promesse rejoint desormais le bloc d'identite, qu'elle
 * CLOT ; un seul filet reste, celui qui ouvre les capacites. Celles-ci
 * prennent le creme — un fond en retrait pour un sommaire, quand ce qui
 * decide (nom, prix, promesse) garde le blanc franc de la carte.
 *
 * HAUTEURS NATURELLES. La version precedente alignait les bas de cartes en
 * `subgrid` et payait cet alignement 61 px de vide sous Essentiel et 107 px
 * sous Professionnel. Ce mecanisme est retire : Premium Boutique porte une
 * capacite de plus, elle a donc le droit d'etre plus haute. Le haut, lui,
 * reste aligne tout seul — les trois blocs d'identite ont la meme structure
 * et la meme reserve de fanion, donc la meme hauteur, sans aucune grille.
 */

.wp-block-columns.fizze-offers {
	gap: clamp(0.9rem, 1.6vw, 1.35rem);
	/* Les cartes prennent leur hauteur propre et se calent en haut. */
	align-items: start !important;
}

.fizze-offer {
	--fz-offer-pad: clamp(1.15rem, 1.9vw, 1.5rem);
	--fz-offer-accent-h: 48px;
	--fz-offer-accent-w: 3px;
	position: relative;
	background: var(--fz-white);
	/*
	 * LE BORD TIENT LE PIED DE LA CARTE. Les capacites prennent le creme,
	 * c'est-a-dire la couleur de la section : sans un bord franc, le bas de
	 * la carte se dissoudrait dans la page. C'est le contour, pas une ombre
	 * portee, qui fait tenir l'objet.
	 */
	border: 1px solid rgba(17, 24, 39, 0.14);
	/* Le coin superieur droit reste vif ; c'est la moitie de la signature. */
	border-radius: 16px 0 16px 16px;
	/*
	 * LA PROFONDEUR EST UN POIDS, PAS UN VOL. Deux couches : un contact tres
	 * court qui pose la carte sur la page, et une diffusion large et tres
	 * diluee qui lui donne son epaisseur. Aucune des deux ne la fait flotter.
	 */
	box-shadow:
		0 1px 2px rgba(17, 24, 39, 0.06),
		0 12px 26px -18px rgba(17, 24, 39, 0.3);
	/* Le creme des capacites doit s'arreter net sur les angles arrondis. */
	overflow: hidden;
	transition:
		border-color 180ms var(--fz-ease),
		box-shadow 180ms var(--fz-ease);
}

/* L'accent vertical, a fleur du coin vif. */
.fizze-offer::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: var(--fz-offer-accent-w);
	height: var(--fz-offer-accent-h);
	pointer-events: none;
	background: var(--fz-blue);
	transition: height 180ms var(--fz-ease);
}

/*
 * L'OFFRE CENTRALE. Un degre de presence supplementaire, pas un autre
 * dessin : le meme accent, plus large et plus long, et un bord teinte. Rien
 * ne grandit, rien ne se souleve, et les deux autres restent des cartes
 * pleines. L'information reste portee par le texte « Notre offre centrale » —
 * la couleur ne dit rien qu'il ne dise deja.
 */
.fizze-offer--central {
	--fz-offer-accent-h: 92px;
	--fz-offer-accent-w: 4px;
	border-color: rgba(37, 99, 235, 0.34);
}

/*
 * LA REACTION AU POINTEUR. La carte n'est pas un lien et ne doit pas en avoir
 * l'air : pas de curseur main, pas de deplacement, pas d'echelle. Elle
 * s'epaissit legerement et son accent descend d'un cran — un changement qu'on
 * ressent plus qu'on ne le remarque. Sous `hover: hover` uniquement : sur
 * tactile, rien de tout cela n'existe et rien n'en depend.
 */
@media (hover: hover) {
	.fizze-offer:hover {
		border-color: rgba(17, 24, 39, 0.24);
		box-shadow:
			0 1px 2px rgba(17, 24, 39, 0.07),
			0 18px 34px -18px rgba(17, 24, 39, 0.36);
	}
	.fizze-offer--central:hover { border-color: rgba(37, 99, 235, 0.55); }
	.fizze-offer:hover::before { height: calc(var(--fz-offer-accent-h) + 22px); }
}

/* --- Zone 1 : l'identite (blanc) --------------------------------------- */

.fizze-offer__head {
	position: relative;
	/* Le haut reserve la hauteur du fanion sur les TROIS cartes : c'est ce
	   qui aligne les trois noms et les trois prix, sans aucune grille. */
	padding: 2.05rem var(--fz-offer-pad) 1.15rem;
}

.fizze-offer .fizze-offer__flag {
	position: absolute;
	top: 0.95rem;
	left: var(--fz-offer-pad);
	right: var(--fz-offer-pad);
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	color: var(--fz-blue);
}

/*
 * Le nom porte la carte. Le prix le suit de pres sans lui disputer la place :
 * il etait a 34,4 px contre 27,2 px pour le nom, ce qui faisait trois masses
 * typographiques empilees sous un titre de section deja tres present. Il
 * reste immediatement visible, d'un cran au-dessus du nom, pas de trois.
 */
.fizze-offer__head > h3 {
	margin: 0 0 0.2rem;
	font-size: clamp(1.35rem, 1.85vw, 1.65rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.fizze-offer__head > .is-style-fizze-display {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 2.05vw, 1.85rem);
	color: var(--fz-ink);
	font-variant-numeric: tabular-nums;
}

/*
 * Delai, corrections, formation : secondaires, jamais minuscules. `balance`
 * repartit les deux lignes a egalite au lieu de laisser un mot seul en
 * seconde ligne — c'est ce qui faisait varier la coupure d'une carte a
 * l'autre et donnait une phrase grise flottante.
 */
.fizze-offer__facts {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--fz-muted-strong);
	font-variant-numeric: tabular-nums;
	text-wrap: balance;
}

/*
 * LA PROMESSE CLOT L'IDENTITE. Elle avait sa propre bande blanche, haute
 * comme un en-tete, et la carte comptait trois plateaux. Elle est desormais
 * la derniere ligne du bloc d'identite : c'est l'ecart au-dessus d'elle, sa
 * graisse et sa mesure courte qui la designent, pas une bande.
 */
.fizze-offer__promise {
	margin: 0.95rem 0 0;
	font-size: clamp(1rem, 1.2vw, 1.08rem);
	line-height: 1.35;
	color: var(--fz-ink);
	max-width: 30ch;
	text-wrap: balance;
}
.fizze-offer__promise strong { font-weight: 700; }

/* --- Zone 2 : les capacites (creme) ------------------------------------ */

/*
 * Le creme met les capacites en retrait — c'est un sommaire, pas ce qui
 * decide. Sur la section creme, la carte blanche porte donc un pied de la
 * couleur de la page : elle reste lisible parce que son bord et son ombre
 * la tiennent, et le contraste se joue la ou il sert, en haut.
 */
.fizze-offer__caps {
	padding: 1.05rem var(--fz-offer-pad) 1.2rem;
	background: var(--fz-cream);
	border-top: 1px solid rgba(17, 24, 39, 0.09);
}

/*
 * LES ENTREES BLEUES NE SONT PAS DES CAPITALES. La petite capitale FIZZE est
 * faite pour un libelle de deux ou trois mots ; ces entrees-la sont des
 * phrases de six a huit mots. Mises en capitales a 12 px, elles se lisaient
 * comme des metadonnees et se sautaient. Dans cette famille — et dans elle
 * seule — elles sont des amorces : bas de casse, grasses, bleues.
 *
 * L'amorce et sa description ont la MEME mesure : seules la graisse et la
 * couleur les separent. C'est ce qui les fait lire comme une seule unite au
 * lieu de deux lignes superposees.
 */
.fizze-offer .fizze-offer__caps .fizze-next-dt {
	margin: 0 0 0.15rem;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
	color: var(--fz-blue);
}
.fizze-offer .fizze-offer__caps .fizze-next-dt + p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--fz-muted-strong);
}

/* Un filet fin entre deux capacites : assez pour separer, jamais pour
   redecouper la carte en bandes. */
.fizze-offer .fizze-offer__caps > .fizze-next-dt:not(:first-child) {
	margin-top: 0.7rem;
	padding-top: 0.7rem;
	border-top: 1px solid rgba(17, 24, 39, 0.08);
}

/* --- Empilement -------------------------------------------------------- */

/*
 * EMPILEES, LES TROIS CARTES NE SE COMPARENT PLUS : elles se lisent l'une
 * apres l'autre. La reserve de fanion n'a alors plus de raison d'etre sur
 * les deux cartes qui n'en portent pas — elle n'y serait qu'un vide.
 */
@media (max-width: 781px) {
	.fizze-offer__head { padding-top: 1.15rem; }
	.fizze-offer--central .fizze-offer__head { padding-top: 2.05rem; }
}

/*
 * MOUVEMENT REDUIT. Rien a ajouter ici : la section 14 coupe deja toutes les
 * transitions du site, pseudo-elements compris, avec `!important`. Une regle
 * locale serait morte, et ferait croire a une exception qui n'existe pas.
 * L'etat de survol reste atteint, simplement sans duree — il ne porte aucune
 * information, il n'en manque donc aucune.
 */

/* ---------- 19. Creative Upgrade 01 — la direction editoriale ---------- */

/*
 * UNE GENERATION VISUELLE, PROUVEE SUR L'ACCUEIL.
 *
 * Cette section ne remplace rien de ce qui precede : elle le surclasse sur
 * l'Accueil (`.home`), et dans l'en-tete et le pied de page, qui sont communs
 * a toutes les pages. Services et Contact gardent leur habillage valide ; la
 * difference est acceptee le temps de prouver la direction.
 *
 * LES QUATRE DECISIONS.
 *  1. Le display passe au serif (Fraunces, variable), le texte reste en DM Sans.
 *     Le contraste entre une voix expressive et une voix fonctionnelle fait
 *     le caractere editorial ; le noir 900 d'Arial criait sans nuance.
 *     (01B : Instrument Serif, trop condense et trop fin, se lisait mal en
 *     grand comme en phrase. Fraunces garde la voix serif, avec de vraies
 *     graisses et une taille optique qui l'epaissit aux petits corps.)
 *  2. Le blanc pur cede a l'ivoire, le marine a l'anthracite. Le bleu FIZZE
 *     ne peint plus les surfaces : il ACCENTUE (italiques, bulles, CTA).
 *  3. Rythme clair -> sombre -> clair -> sombre : hero ivoire, phrases
 *     anthracite, contact ivoire, pied de page anthracite.
 *  4. Moins de cartes : le registre, le panneau Contact et les accordeons
 *     deviennent des compositions a filets, pas des boites.
 *
 * LA SIGNATURE MOTION : LA BULLE. FIZZE, c'est l'effervescence. Un point bleu
 * qui MONTE puis SE POSE avec un leger depassement : devant les micro-libelles,
 * en point final du mot-symbole du pied de page, sous le lien de navigation
 * survole, et dans les CTA dont le remplissage nait d'une bulle qui gonfle.
 * Un seul geste, toujours le meme, jamais en boucle.
 */

:root {
	--fz-paper: var(--wp--preset--color--paper, #F4F0E8);
	--fz-paper-deep: var(--wp--preset--color--paper-deep, #EAE3D6);
	--fz-anth: var(--wp--preset--color--anthracite, #15161A);
	--fz-serif: var(--wp--preset--font-family--display, Georgia, serif);

	/* Encre et gris chauds : 16,4:1 et 6,2:1 sur l'ivoire. */
	--fz-ink-w: #1A1917;
	--fz-mute-w: #5C584F;
	/* Sur anthracite : 15,6:1 et 7,3:1. */
	--fz-on-anth: #EEEAE2;
	--fz-on-anth-mute: #A9A59C;
	--fz-rule-w: rgba(26, 25, 23, 0.16);
	--fz-rule-d: rgba(238, 234, 226, 0.14);
	--fz-blue-ink: #1D4ED8;
	--fz-blue-soft: #8FB0FF;

	--fz-out: cubic-bezier(0.16, 1, 0.3, 1);
	--fz-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

	--fz-arrow-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

body.home { background: var(--fz-paper); color: var(--fz-ink-w); }
.home ::selection { background: var(--fz-blue); color: #fff; }

/* --- 19.1 La bulle et le micro-libelle --------------------------------- */

.home .fizze-eyebrow::before,
.home .fizze-kicker::before,
.home .fizze-ledger .fizze-lbl::before,
.home .fizze-contact .is-style-fizze-panel > .fizze-lbl::before,
.fizze-ftr__kicker::before {
	content: '';
	display: inline-block;
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--fz-blue);
	transition: transform 0.8s var(--fz-pop), opacity 0.3s var(--fz-ease);
}

.home .fizze-eyebrow,
.home .fizze-kicker,
.fizze-ftr__kicker {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--fz-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.3;
}

/* --- 19.2 En-tete ------------------------------------------------------- */

/*
 * Plus d'air au repos, plus compact une fois colle : la barre se resserre au
 * lieu de seulement prendre un fond. Le verre devient ivoire, le filet un
 * cheveu d'encre — plus de lueur bleue.
 */
.fizze-hdr__in { transition: padding 0.5s var(--fz-out), min-height 0.5s var(--fz-out); }
.fizze-hdr.is-stuck .fizze-hdr__in { padding-block: 0.5rem; min-height: 3.6rem; }
.fizze-hdr.is-stuck {
	box-shadow: none;
}
/* FIX-04 : meme raison qu'en §19.2 base — le verre reste sur `::before`. */
.fizze-hdr.is-stuck::before {
	background: rgba(244, 240, 232, 0.92);
	backdrop-filter: saturate(1.3) blur(18px);
}
.fizze-hdr::after { background: var(--fz-rule-w); }
.fizze-hdr.is-stuck::after { opacity: 1; }

.fizze-hdr { color: var(--fz-ink-w); }
.fizze-hdr .fizze-wordmark {
	font-family: var(--fz-body);
	font-weight: 800;
	font-size: 1.0625rem;
	letter-spacing: 0.08em;
}

.fizze-hdr .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--fz-ink-w);
	transition: color 0.25s var(--fz-ease);
}
.fizze-hdr .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--fz-ink-w); }

/* La bulle sous le lien : elle monte au survol, et reste posee sous la page courante. */
.fizze-hdr .wp-block-navigation__container .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -0.6rem;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: var(--fz-blue);
	opacity: 0;
	transform: translateY(7px) scale(0.2);
	transition: transform 0.55s var(--fz-pop), opacity 0.2s var(--fz-ease);
}
.fizze-hdr .wp-block-navigation__container .wp-block-navigation-item__content:hover::after,
.fizze-hdr .wp-block-navigation__container .wp-block-navigation-item__content:focus-visible::after,
.fizze-hdr .wp-block-navigation__container .current-menu-item > .wp-block-navigation-item__content::after,
.fizze-hdr .wp-block-navigation__container [aria-current="page"]::after {
	opacity: 1;
	transform: none;
}
/* Dans le tiroir, la bulle n'a pas de sens sous un titre de 50 px. */
.fizze-hdr .is-menu-open .wp-block-navigation-item__content::after { display: none; }

.fizze-hdr .fizze-langsel__btn { color: var(--fz-mute-w); }
.fizze-hdr .fizze-langsel__btn:hover { color: var(--fz-ink-w); }
.fizze-langsel[data-open] .fizze-langsel__btn,
.fizze-langsel__btn:hover { background: rgba(26, 25, 23, 0.06); border-color: var(--fz-rule-w); }

/*
 * Le CTA d'en-tete : encre pleine, pilule, bulle bleue au survol. Le
 * selecteur long passe au-dessus du rayon canonique de 6 px (section 3).
 */
.fizze-hdr .fizze-hdr__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	min-height: 40px;
	padding: 0 1.2rem;
	border-radius: 999px;
	background: var(--fz-ink-w);
	color: var(--fz-paper);
	font-weight: 600;
	box-shadow: none;
}
.fizze-hdr__cta .wp-block-button__link:hover {
	transform: none;
	box-shadow: none;
	color: #fff;
}
.fizze-hdr__cta .wp-block-button__link::after,
.home .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	inset: auto;
	top: 50%;
	left: 50%;
	width: 2.6rem;
	height: 2.6rem;
	margin: -1.3rem 0 0 -1.3rem;
	border-radius: 50%;
	background: var(--fz-blue);
	transform: scale(0);
	transition: transform 0.6s var(--fz-out);
}
.fizze-hdr__cta .wp-block-button__link:hover::after,
.fizze-hdr__cta .wp-block-button__link:focus-visible::after { transform: scale(4.8); }

/* Sur un hero marine (Services), au repos, la barre ecrit toujours en clair. */
body:not(.home):has(.fizze-hero) .fizze-hdr:not(.is-stuck) .wp-block-navigation__container .wp-block-navigation-item__content,
.fizze-has-hero:not(.home) .fizze-hdr:not(.is-stuck) .wp-block-navigation__container .wp-block-navigation-item__content { color: var(--fz-on-navy); }
body:not(.home):has(.fizze-hero) .fizze-hdr:not(.is-stuck) .fizze-hdr__cta .wp-block-button__link,
.fizze-has-hero:not(.home) .fizze-hdr:not(.is-stuck) .fizze-hdr__cta .wp-block-button__link { background: var(--fz-paper); color: var(--fz-ink-w); }
body:not(.home):has(.fizze-hero) .fizze-hdr:not(.is-stuck) .fizze-hdr__cta .wp-block-button__link:hover,
.fizze-has-hero:not(.home) .fizze-hdr:not(.is-stuck) .fizze-hdr__cta .wp-block-button__link:hover { color: #fff; }

/*
 * L'Accueil s'ouvre sur de l'ivoire : ni voile, ni texte clair. `body.home`
 * et non `.home` : il faut passer au-dessus de `body:has(.fizze-hero)`.
 */
body.home .fizze-hdr:not(.is-stuck) { color: var(--fz-ink-w); }
body.home .fizze-hdr:not(.is-stuck)::before { opacity: 0; }
body.home .fizze-hdr:not(.is-stuck) .wp-block-navigation .wp-block-navigation-item__content { color: var(--fz-ink-w); }
body.home .fizze-hdr:not(.is-stuck) .fizze-langsel__btn { color: var(--fz-mute-w); }
body.home .fizze-hdr:not(.is-stuck) .fizze-langsel__btn:hover { color: var(--fz-ink-w); }

/* Le tiroir : anthracite, destinations en serif. */
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--fz-serif);
	font-weight: 500;
	letter-spacing: -0.025em;
	font-size: clamp(2.2rem, 10vw, 3rem);
	line-height: 1;
	color: var(--fz-on-anth);
}
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus { color: var(--fz-blue-soft); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .fizze-hdr__cta .wp-block-button__link {
	background: var(--fz-paper);
	color: var(--fz-ink-w);
	min-height: 52px;
	justify-content: center;
}

/* --- 19.3 Boutons de l'Accueil : la pilule a bulle ---------------------- */

/*
 * Le CTA principal porte une pastille flechee. Au survol, une bulle d'encre
 * nait sous la pastille et gonfle jusqu'a remplir le bouton ; la fleche
 * pivote vers le haut. Pas de saut, pas d'ombre bleue : le mouvement est
 * interne au bouton.
 */
.home .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.45rem 0.45rem 0.45rem 1.6rem;
	border-radius: 999px;
	background: var(--fz-blue);
	color: #fff;
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.005em;
	box-shadow: none;
}
.home .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link::before {
	content: '';
	order: 2;
	flex: none;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: #fff var(--fz-arrow-blue) center / 1.05rem no-repeat;
	transition: transform 0.55s var(--fz-pop);
}
.home .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	left: auto;
	right: 0.45rem;
	margin: -1.3rem 0 0;
	background: var(--fz-ink-w);
}
.home .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.home .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	transform: none;
	box-shadow: none;
	color: #fff;
}
.home .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::after,
.home .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible::after { transform: scale(19); }
.home .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::before,
.home .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible::before { transform: rotate(-45deg) scale(1.04); }

/* Le lien secondaire : un soulignement qui se retire, puis revient. */
.home .fizze-lnk .wp-block-button__link,
.home .fizze-lnk .wp-block-button__link:hover {
	border: 0;
	padding: 0 0 4px;
	color: var(--fz-ink-w);
	font-weight: 600;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
.home .fizze-lnk .wp-block-button__link:hover,
.home .fizze-lnk .wp-block-button__link:focus-visible {
	color: var(--fz-blue-ink);
	animation: fz-underline 0.75s var(--fz-out);
}
@keyframes fz-underline {
	0% { background-position: 100% 100%; background-size: 100% 1px; }
	45% { background-position: 100% 100%; background-size: 0 1px; }
	46% { background-position: 0 100%; background-size: 0 1px; }
	100% { background-position: 0 100%; background-size: 100% 1px; }
}

/* --- 19.4 Hero : l'affiche --------------------------------------------- */

/*
 * LOT2A — RYTHME VERTICAL. Le premier viewport desktop (1366x768 a 1920x1080)
 * coupait le registre en plein milieu de sa liste : la composition du hero
 * n'avait pas le temps de se lire avant le bord de l'ecran. Les respirations
 * `vh`/`vw` de cette affiche etaient calibrees pour de grands ecrans hauts ;
 * sur une hauteur reelle de bureau, elles s'additionnaient a plus de 500px de
 * vide avant meme d'atteindre le registre. On resserre ici cinq intervalles
 * (tete de page, surtitre, titre, chapeau, note) sans toucher a l'echelle du
 * H1 : c'est le rythme qui bouge, pas la voix.
 *
 * LOT2A-FIX-01 — la premiere passe n'allait pas assez loin : a 1366x768 le
 * bas du hero (881px) restait sous le pli (768px), la Bande Metiers n'etait
 * donc jamais visible sans scroll. Nouveau critere : la Bande doit entrer,
 * au moins partiellement, dans le premier viewport desktop — y compris le
 * plus bas (1366x768). Les memes six intervalles sont resserres une seconde
 * fois, plus fortement ; le H1 garde sa taille, seul son interligne se
 * resserre legerement (0.96 -> 0.91) en dernier recours.
 */
.home .fizze-hero {
	background: var(--fz-paper);
	color: var(--fz-ink-w);
	/* La Bande Metiers suit desormais immediatement le hero (§19.11) : la
	   respiration de sortie n'a plus besoin de porter seule la transition.
	   FIX-05 — +14px sur la respiration Header -> surtitre : FIX-04 a rendu
	   le Hero robuste a la vraie hauteur de fenetre (registre + H1 suivent
	   desormais `vh`, voir le bloc `max-height:760px` plus bas, volontairement
	   PAS touche ici), ce qui degage la marge necessaire pour redonner un peu
	   d'air a ce point precis sans remettre en cause cette robustesse.
	   Mesure : Bande Mots reste 100% visible aux 4 gabarits desktop, y
	   compris a hauteur reelle reduite (~650px sur un ecran "1366x768"). */
	padding-block: calc(var(--fz-hdr-h) + clamp(0.3rem, 1vh, 0.6rem) + 14px) clamp(0.3rem, 0.6vw, 0.5rem);
}
/* Une seule lueur, tres basse : la bulle en grand, hors champ en haut a droite. */
.home .fizze-hero::before {
	top: max(-40vw, -560px);
	left: auto;
	right: max(-18vw, -260px);
	translate: none;
	width: min(70vw, 980px);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(37, 99, 235, 0.13), rgba(37, 99, 235, 0.04) 55%, transparent 72%);
}
.home .fizze-hero::after { content: none; }

.home .fizze-eyebrow {
	color: var(--fz-mute-w);
	/* Le surtitre introduit le hero : il doit se lire comme son premier mot,
	   pas comme une section a lui seul (LOT2A, resserre encore en FIX-01). */
	margin: 0 0 clamp(0.25rem, 0.5vw, 0.4rem);
}
/* Le filet s'etire jusqu'au bord : l'affiche a sa ligne de tete. */
.home .fizze-eyebrow::after {
	content: '';
	flex: 1;
	height: 1px;
	margin-left: 0.6rem;
	background: var(--fz-rule-w);
	transform-origin: 0 50%;
}

.home .fizze-hero-title {
	font-family: var(--fz-serif);
	font-weight: 540;
	font-size: clamp(2.55rem, 12.4vw, 4.6rem);
	/*
	 * FIX-02 — la ligne serree de FIX-01 (0.91) etait la vraie cause de la
	 * collision signalee par la validation humaine : a cet interlignage, les
	 * descendantes de « en plus. » depassent visuellement la boite de ligne
	 * du H1 et mordent le filet superieur du registre (la grille ne peut pas
	 * compter cette encre hors boite dans la hauteur de sa ligne). On revient
	 * a un interlignage sur, et c'est desormais la TAILLE du H1 — reduction
	 * moderee autorisee par la mission — qui porte l'economie de hauteur.
	 */
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--fz-ink-w);
	text-shadow: none;
	margin: 0 0 clamp(0.5rem, 1vw, 0.75rem);
}
.home .fizze-hero-title mark {
	font-style: italic;
	font-weight: 480;
	letter-spacing: -0.03em;
	color: var(--fz-blue);
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
}

.home .fizze-lede {
	color: var(--fz-mute-w);
	font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
	line-height: 1.6;
	max-width: 42ch;
	/*
	 * FIX-03 — le vrai ecart mesure entre le H1 et ce paragraphe (54px a
	 * 1366px de large) etait presque le double de ce que declaraient nos
	 * propres regles (marge du H1 + marge basse d'ici) : le `blockGap`
	 * global de theme.json (1.25rem) s'ajoute en `margin-top` sur ce
	 * paragraphe car il n'est pas le premier enfant de sa colonne — et ne
	 * fusionne pas avec la marge du H1 dans ce contexte. On neutralise
	 * cette marge non voulue plutot que de continuer a reduire des regles
	 * qui n'etaient pas la vraie cause.
	 */
	margin-top: 0;
	margin-bottom: clamp(0.25rem, 0.5vw, 0.45rem);
}
.home .fizze-lede strong { color: var(--fz-ink-w); font-weight: 600; }
/* FIX-03 : meme constat que pour `.fizze-lede` — le `blockGap` global posait 20px non voulus ici. */
.home .fizze-hero-cta { gap: 1rem 2rem; margin-top: 0.5rem; }
.home .fizze-note { color: var(--fz-mute-w); margin-top: 0.25rem; }

@media (min-width: 782px) {
	/* FIX-02 : reduction moderee (~10%) — le H1 garde son impact, mais porte
	   maintenant l'essentiel de l'economie de hauteur du Hero (cf. ci-dessus).
	   FIX-04 : le terme `8.2vw` seul ne reagit qu'a la LARGEUR — sur un ecran
	   "1366x768" tres large mais dont la fenetre Chrome reelle offre bien
	   moins de hauteur utile que 768px (chrome du navigateur + barre des
	   taches Windows, jamais reproduits par un viewport simule), le H1
	   restait bloque a sa taille maximale independamment de cette hauteur
	   reelle plus courte, et poussait la Bande Mots hors du premier ecran.
	   `min(8.2vw, 13vh)` fait suivre le plus contraignant des deux axes,
	   sans media query par resolution : robuste sur n'importe quelle fenetre
	   reelle, pas seulement les quatre gabarits testes. */
	.home .fizze-hero-title { font-size: clamp(2.9rem, min(8.2vw, 13vh), 7.2rem); }
	/* Deux lignes au lieu de quatre : « Le numerique en moins. / Les clients en plus. » */
	.home .fizze-hero-title br:nth-of-type(odd) { display: none; }
}

/*
 * LA COMPOSITION DE L'AFFICHE (>= 1100 px). Le bloc Colonnes reste celui de
 * Gutenberg ; seule sa mise en page change. La colonne de texte se dissout
 * (`display: contents`) pour que le surtitre et le titre occupent toute la
 * largeur, tandis que chapeau, CTA et note tiennent cinq colonnes sur douze
 * et que le registre s'installe, decale, a droite.
 */
@media (min-width: 1100px) {
	.home .fizze-hero-grid {
		display: grid !important;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: auto auto auto auto auto 1fr;
		column-gap: clamp(1rem, 2vw, 2rem);
		row-gap: 0;
		align-items: start;
	}
	.home .fizze-hero-grid > .fizze-hero-say { display: contents; }
	.home .fizze-hero-grid .fizze-eyebrow { grid-column: 1 / -1; grid-row: 1; }
	.home .fizze-hero-grid .fizze-hero-title { grid-column: 1 / -1; grid-row: 2; }
	.home .fizze-hero-grid .fizze-lede { grid-column: 1 / span 5; grid-row: 3; }
	.home .fizze-hero-grid .fizze-hero-cta { grid-column: 1 / span 5; grid-row: 4; }
	.home .fizze-hero-grid .fizze-note { grid-column: 1 / span 5; grid-row: 5; }
	.home .fizze-hero-grid > .wp-block-column:has(> .fizze-ledger) {
		grid-column: 7 / -1;
		grid-row: 3 / 7;
		max-width: none;
	}
}

/*
 * FIX-04 — SOUS 760px de hauteur REELLE. `min(8.2vw, 13vh)` sur le H1 (et le
 * `20vh` du registre, plus bas) suivent deja la hauteur disponible, mais pas
 * assez fort pour une fenetre Chrome Windows reelle : sur un ecran affiche
 * "1366x768" par son gestionnaire d'ecran, `window.innerHeight` reel une fois
 * la fenetre maximisee tourne plutot autour de 630-700px (barre d'onglets +
 * barre d'adresse du navigateur, PUIS barre des taches Windows — aucune des
 * deux n'existe dans un viewport simule ou un `resize` DevTools, qui fixent
 * `innerHeight` a la valeur nominale). Mesure sur ce meme gabarit : a 768px
 * (nominal, ce que les tests precedents croyaient tester), la Bande est deja
 * entierement visible ; a 650px (fenetre reelle plausible sur cet ecran),
 * elle ne l'etait qu'a 15px avant ce correctif. Ce point de rupture unique —
 * pas un correctif par resolution — resserre encore le H1 et le registre
 * uniquement quand la hauteur reelle l'exige, quelle que soit la largeur.
 */
@media (min-width: 1100px) and (max-height: 760px) {
	.home .fizze-hero-title { font-size: clamp(2.5rem, min(7.6vw, 10vh), 6.4rem); }
	.fizze-ledger-scroll { height: clamp(100px, 15vh, 200px); }
	.home .fizze-hero { padding-block: calc(var(--fz-hdr-h) + clamp(0.1rem, 0.4vh, 0.3rem)) clamp(0.15rem, 0.3vw, 0.3rem); }
	.home .fizze-lede { margin-bottom: 0.15rem; }
	.home .fizze-hero-cta { margin-top: 0.3rem; }
}

/* --- 19.5 Le registre, en filets --------------------------------------- */

.home .fizze-ledger {
	background: none;
	border: 0;
	border-top: 2px solid var(--fz-ink-w);
	border-bottom: 1px solid var(--fz-rule-w);
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	overflow: visible;
	max-width: none;
}
.home .fizze-ledger::before { content: none; }
.home .fizze-ledger:hover { border-color: var(--fz-ink-w); border-bottom-color: var(--fz-rule-w); box-shadow: none; }
.home .fizze-ledger-col { padding: 1.35rem 0 1.25rem; }
.home .fizze-ledger-you { flex: 0 0 40% !important; padding-right: clamp(1.25rem, 2.6vw, 2.25rem); }
.home .fizze-ledger-you::after { background: var(--fz-rule-w); }
.home .fizze-ledger-us { background: none; padding-left: clamp(1.25rem, 2.6vw, 2.25rem); }

.home .fizze-ledger .fizze-lbl {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--fz-mute-w);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 1.25rem;
}
.home .fizze-ledger .fizze-lbl::before { width: 0.4rem; height: 0.4rem; }
.home .fizze-ledger-us .fizze-lbl::before { background: var(--fz-ink-w); }

.home .fizze-ledger li { color: var(--fz-ink-w); font-size: 0.9375rem; }
.home .fizze-ledger-us li::before { background: var(--fz-blue); opacity: 0.55; }
.home .fizze-ledger-mine li {
	font-family: var(--fz-serif);
	font-weight: 520;
	font-size: clamp(1.9rem, 2.8vw, 2.45rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--fz-ink-w);
}
.home .fizze-ledger-nothing {
	font-family: var(--fz-serif);
	font-style: italic;
	font-size: 1.15rem !important;
	color: var(--fz-mute-w);
	margin-top: 0.5rem;
}
.home .fizze-ledger-count,
.home .fizze-ledger-you .fizze-ledger-count {
	border-top: 1px solid var(--fz-rule-w);
	color: var(--fz-mute-w);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
}
.home .fizze-ledger-count strong,
.home .fizze-ledger-you .fizze-ledger-count strong {
	font-family: var(--fz-serif);
	font-weight: 460;
	font-size: clamp(2.7rem, 4vw, 3.9rem);
	letter-spacing: -0.04em;
	line-height: 0.8;
	color: var(--fz-ink-w);
	text-shadow: none;
}
.home .fizze-ledger-you .fizze-ledger-count strong,
.fizze-js .home .fizze-ledger-count.is-counting strong { color: var(--fz-blue); }

/*
 * FIX-01 — la Bande Metiers touchait directement la salle sombre : sans
 * marge, elle se lisait comme la bordure superieure de la section noire
 * plutot que comme un element ivoire a part entiere. Une respiration
 * courte mais nettement perceptible separe maintenant les deux, sans
 * recreer un ocean : le fond de page (ivoire) se voit dans l'intervalle.
 */
.home .fizze-bm { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* --- 19.6 Les phrases : la salle sombre -------------------------------- */

/*
 * FIX-02 — la validation humaine juge les deux grandes respirations NOIRES
 * (avant « 01 — LÀ OÙ ÇA COMMENCE », apres « Ecrivez-nous la votre. »)
 * encore trop hautes, d'environ moitie. Seul le padding-block change ici :
 * aucune propriete de la mecanique d'expansion (view-timeline, animation,
 * plage, accordeons, numerotation, contenu) n'est touchee — la mission
 * autorise explicitement ce paramètre comme « respiration verticale vide »,
 * distinct de l'effet spectaculaire qui reste verrouille.
 *
 * FIX-03 — la validation humaine confirme que le DEBUT est desormais correct,
 * mais juge la FIN encore trop vide malgre la reduction ci-dessus (mesure :
 * 80px entre le dernier contenu et la sortie du noir a 1920px de large).
 * Seul le bas est resserre une seconde fois ; le haut n'est pas touche
 * (mission : « ne modifie pas inutilement le debut »).
 */
.home .fizze-phrase {
	position: relative;
	isolation: isolate;
	background: transparent;
	color: var(--fz-on-anth);
	padding-top: clamp(2.25rem, 5.5vw, 5rem);
	padding-bottom: clamp(1.25rem, 3vw, 2.5rem);
	view-timeline: --fz-room block;
}
/*
 * La surface est un calque, pas le fond de la section : c'est ce qui permet
 * a la transition clair -> sombre de s'ouvrir comme une piece dont on pousse
 * la porte (cf. 19.10), sans jamais deplacer le texte.
 */
.home .fizze-phrase::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--fz-anth);
	transform-origin: 50% 0;
}

.home .fizze-phrase-grid { gap: clamp(2.5rem, 6vw, 6rem); align-items: flex-start !important; }
.home .fizze-phrase-head { align-self: flex-start; }
@media (min-width: 1024px) {
	.home .fizze-phrase-head { position: sticky; top: calc(var(--fz-hdr-h) + 2.5rem); }
}
@media (max-width: 1023.98px) {
	.home .fizze-phrase-grid { flex-wrap: wrap !important; }
	.home .fizze-phrase-grid > .wp-block-column { flex-basis: 100% !important; }
	.home .fizze-phrase-head { max-width: 40rem; }
}

.home .fizze-phrase .fizze-kicker { color: var(--fz-on-anth-mute); margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.home .fizze-phrase .fizze-kicker::before { background: var(--fz-blue-soft); }
.home .fizze-phrase .fizze-h2 {
	font-family: var(--fz-serif);
	font-weight: 500;
	font-size: clamp(2.3rem, 4.1vw, 4.1rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--fz-on-anth);
	margin: 0 0 1.5rem;
}
.home .fizze-phrase .fizze-intro {
	color: var(--fz-on-anth-mute);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
	max-width: 30ch;
	margin: 0;
}

/* Les lignes : un cheveu qui se trace, un numero, une question en serif. */
.home .fizze-phrase-list { counter-reset: fz-q; }
.home .fizze-phrase .wp-block-details.is-style-fizze-q {
	counter-increment: fz-q;
	border: 0;
	background: linear-gradient(var(--fz-rule-d), var(--fz-rule-d)) 0 0 / 100% 1px no-repeat;
	transition: background-size 1.1s var(--fz-out);
}
.home .fizze-phrase .wp-block-details.is-style-fizze-q:last-of-type {
	border: 0;
	box-shadow: inset 0 -1px 0 var(--fz-rule-d);
}
.home .fizze-phrase .wp-block-details.is-style-fizze-q[open] {
	background-image: linear-gradient(var(--fz-blue-soft), var(--fz-blue-soft));
}

.home .fizze-phrase .is-style-fizze-q > summary {
	grid-template-columns: 2.75rem 1fr auto;
	gap: 0 clamp(0.75rem, 2vw, 1.25rem);
	padding: clamp(1.25rem, 2.4vw, 1.85rem) 0;
	/*
	 * 01B — LISIBILITE. Ces phrases se SCANNENT : le visiteur doit s'y
	 * reconnaitre d'un coup d'oeil. Graisse moyenne, taille optique automatique
	 * (Fraunces epaissit ses deliés a ce corps), interlignage ouvert et un corps
	 * un cran plus calme. Rien d'autre ne change dans la section.
	 */
	font-family: var(--fz-serif);
	font-weight: 500;
	font-optical-sizing: auto;
	font-size: clamp(1.2rem, 1.62vw, 1.5rem);
	line-height: 1.26;
	letter-spacing: -0.012em;
	color: var(--fz-on-anth);
	background: linear-gradient(90deg, rgba(143, 176, 255, 0.09), rgba(143, 176, 255, 0) 75%) 0 0 / 0 100% no-repeat;
	transition: color 0.3s var(--fz-ease), background-size 0.7s var(--fz-out);
}
.home .fizze-phrase .is-style-fizze-q > summary:hover { color: #fff; background-size: 100% 100%; }
.home .fizze-phrase .is-style-fizze-q > summary::before {
	content: counter(fz-q, decimal-leading-zero);
	display: block;
	position: static;
	margin: 0;
	padding-top: 0.75em;
	font-family: var(--fz-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	color: var(--fz-on-anth-mute);
	font-variant-numeric: tabular-nums;
}
.home .fizze-phrase .is-style-fizze-q > summary:hover::before,
.home .fizze-phrase .is-style-fizze-q > summary:focus-visible::before,
.home .fizze-phrase .is-style-fizze-q[open] > summary::before { color: var(--fz-blue-soft); }
.home .fizze-phrase .is-style-fizze-q > summary::after {
	width: 34px;
	height: 34px;
	margin-top: 0.05rem;
	background-color: rgba(238, 234, 226, 0.08);
	background-image: linear-gradient(var(--fz-on-anth), var(--fz-on-anth)), linear-gradient(var(--fz-on-anth), var(--fz-on-anth));
	transition: background-color 0.3s var(--fz-ease), transform 0.5s var(--fz-pop);
}
.home .fizze-phrase .is-style-fizze-q > summary:hover::after,
.home .fizze-phrase .is-style-fizze-q > summary:focus-visible::after,
.home .fizze-phrase .is-style-fizze-q[open] > summary::after {
	border-color: transparent;
	background-color: var(--fz-blue);
	background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
}
.home .fizze-phrase .is-style-fizze-q > summary:hover::after { transform: rotate(90deg); }
.home .fizze-phrase .is-style-fizze-q[open] > summary::after { transform: rotate(135deg); }

/* La reponse s'aligne sur la question, pas sur le numero. */
.home .fizze-phrase { --fz-q-indent: calc(2.75rem + clamp(0.75rem, 2vw, 1.25rem)); }
.home .fizze-phrase .fizze-q-grid { padding-left: var(--fz-q-indent); }
.home .fizze-phrase .fizze-q-grid .fizze-lbl { color: var(--fz-on-anth-mute); border-bottom-color: var(--fz-rule-d); }
.home .fizze-phrase .fizze-q-you .fizze-lbl { color: var(--fz-blue-soft); border-bottom-color: rgba(143, 176, 255, 0.35); }
.home .fizze-phrase .fizze-q-you p:last-child { color: var(--fz-on-anth); }
.home .fizze-phrase .fizze-q-us p:last-child { color: var(--fz-on-anth-mute); }
.home .fizze-phrase .fizze-q-us em { color: var(--fz-blue-soft); }
.home .fizze-phrase .fizze-q-out {
	margin-left: var(--fz-q-indent);
	border-left: 2px solid var(--fz-blue-soft);
	color: var(--fz-on-anth);
	font-family: var(--fz-serif);
	font-style: italic;
	font-weight: 420;
	font-size: clamp(1.15rem, 1.5vw, 1.35rem);
	line-height: 1.35;
}
.home .fizze-phrase .is-style-fizze-q .wp-block-buttons {
	justify-content: flex-start;
	padding-left: var(--fz-q-indent);
}
.home .fizze-phrase .is-style-outline .wp-block-button__link {
	border: 1px solid rgba(238, 234, 226, 0.32);
	border-radius: 999px;
	color: var(--fz-on-anth);
	padding: 0.7rem 1.2rem;
}
.home .fizze-phrase .is-style-outline .wp-block-button__link,
.home .fizze-phrase .is-style-outline .wp-block-button__link:hover { transform: none; box-shadow: none; }

.home .fizze-phrase-foot {
	margin-top: 2rem;
	padding-left: var(--fz-q-indent);
	color: var(--fz-on-anth-mute);
}

/* Les liens texte sur fond sombre : un trait qui se trace, jamais un simple changement de couleur. */
.home .fizze-phrase-foot a,
.fizze-ftr__links a,
.fizze-ftr__big a {
	color: var(--fz-on-anth);
	font-weight: 500;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.5s var(--fz-out), color 0.25s var(--fz-ease);
}
.home .fizze-phrase-foot a { background-size: 100% 1px; }
.home .fizze-phrase-foot a:hover { color: var(--fz-blue-soft); animation: fz-underline 0.75s var(--fz-out); }
.fizze-ftr__links a:hover,
.fizze-ftr__links a:focus-visible { color: var(--fz-on-anth); background-size: 100% 1px; }

/* --- 19.7 Contact : la derniere page de l'affiche ---------------------- */

/*
 * FIX-01 — entree et sortie de cette section retravaillees independamment.
 * Le haut portait, cumule avec le padding-bottom (non touche) de la section
 * sombre qui precede, plusieurs centaines de pixels d'ivoire avant le premier
 * mot de « 03 — ON Y VA » ; le bas portait la meme respiration avant le
 * Footer. On ne touche pas a `.home .fizze-phrase` (verrouillee) : seule
 * cette section, qui n'a pas de contrainte d'animation, absorbe la
 * reduction — dans les deux sens.
 */
.home .fizze-contact {
	background: var(--fz-paper);
	color: var(--fz-ink-w);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.home .fizze-contact::before {
	left: max(-25vw, -360px);
	bottom: max(-40vw, -520px);
	width: min(80vw, 1000px);
	background: radial-gradient(closest-side, rgba(37, 99, 235, 0.1), transparent 70%);
}
/* `!important` : Gutenberg impose `align-items: normal !important` aux Colonnes. */
.home .fizze-contact-grid { align-items: flex-end !important; }
.home .fizze-contact .fizze-kicker { color: var(--fz-mute-w); margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.home .fizze-contact .fizze-h2 {
	font-family: var(--fz-serif);
	font-weight: 520;
	font-size: clamp(2.6rem, 5.9vw, 5.9rem);
	line-height: 0.98;
	letter-spacing: -0.035em;
	color: var(--fz-ink-w);
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.home .fizze-contact .fizze-lede { color: var(--fz-mute-w); max-width: 46ch; }
.home .fizze-contact .fizze-lede strong { color: var(--fz-ink-w); font-weight: 600; }
.home .fizze-contact .fizze-note { color: var(--fz-mute-w); }

/*
 * 01B — LA CONVERSATION. La moitie droite paraissait vide : la fiche
 * « Sur la page Contact » tenait en bas, petite, face a un titre massif. Or
 * elle raconte exactement ce que la section promet — ca commence par un
 * message. Elle devient donc un ECHANGE ecrit : deux bulles, la votre puis
 * la notre, avec le texte deja present dans Gutenberg et rien d'autre.
 * La bulle FIZZE retrouve ici son autre sens : la bulle de dialogue.
 *
 * Mecanique : la fiche passe en grille ; ses deux pseudo-elements dessinent
 * les deux bulles derriere les paragraphes, places ligne a ligne. Le
 * placement suit l'ordre des six paragraphes de CETTE fiche nommee (libelle,
 * entree, texte, entree, texte, pied) : il ne s'applique a aucune autre.
 */
@media (min-width: 1025px) {
	.home .fizze-contact-grid { align-items: center !important; }
}
.home .fizze-contact::before {
	left: auto;
	right: max(-20vw, -300px);
	bottom: auto;
	top: 50%;
	translate: 0 -50%;
	width: min(70vw, 900px);
	background: radial-gradient(closest-side, rgba(37, 99, 235, 0.11), transparent 70%);
}
.home .fizze-contact .is-style-fizze-panel {
	/*
	 * 01C — decalage accentue : la premiere bulle (prospect) doit lire
	 * clairement a gauche, la seconde (FIZZE) clairement a droite. La
	 * variable pilote a la fois l'indentation ET, via les nth-child ci-dessous,
	 * la largeur de chevauchement entre les deux — c'est elle seule qui decide
	 * du contraste de position entre les deux interlocuteurs.
	 * FIX-01 — la validation humaine demandait encore plus de separation :
	 * chaque bulle recule un peu plus de son cote (largeur inchangee dans sa
	 * fabrication, seule cette variable bouge), sans toucher couleurs,
	 * queues, contenu ni motion.
	 */
	--fz-tail: clamp(3rem, 8vw, 7rem);
	display: grid;
	grid-template-columns: var(--fz-tail) minmax(0, 1fr) var(--fz-tail);
	align-content: start;
	max-width: 37rem;
	margin-left: auto;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	overflow: visible;
	color: var(--fz-ink-w);
}
.home .fizze-contact .is-style-fizze-panel > * { margin: 0; min-width: 0; }

.home .fizze-contact .is-style-fizze-panel > :nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
.home .fizze-contact .is-style-fizze-panel > :nth-child(2) { grid-column: 1 / 3; grid-row: 2; }
.home .fizze-contact .is-style-fizze-panel > :nth-child(3) { grid-column: 1 / 3; grid-row: 3; }
.home .fizze-contact .is-style-fizze-panel > :nth-child(4) { grid-column: 2 / 4; grid-row: 4; }
.home .fizze-contact .is-style-fizze-panel > :nth-child(5) { grid-column: 2 / 4; grid-row: 5; }
.home .fizze-contact .is-style-fizze-panel > :nth-child(6) { grid-column: 2 / 4; grid-row: 6; }

/* Les deux bulles : la votre, claire, queue a gauche ; la notre, anthracite, queue a droite. */
.home .fizze-contact .is-style-fizze-panel::before,
.home .fizze-contact .is-style-fizze-panel::after {
	content: '';
	position: static;
	inset: auto;
	height: auto;
	opacity: 1;
	z-index: -1;
	pointer-events: none;
}
.home .fizze-contact .is-style-fizze-panel::before {
	grid-column: 1 / 3;
	grid-row: 2 / 4;
	background: #FFFDF8;
	border: 1px solid var(--fz-rule-w);
	border-radius: 22px 22px 22px 6px;
	box-shadow: 0 18px 40px -30px rgba(26, 25, 23, 0.35);
	transform-origin: 0 100%;
}
.home .fizze-contact .is-style-fizze-panel::after {
	grid-column: 2 / 4;
	grid-row: 4 / 6;
	margin-top: 0.9rem;
	background: var(--fz-anth);
	border-radius: 22px 22px 6px 22px;
	box-shadow: 0 22px 44px -28px rgba(21, 22, 26, 0.55);
	transform-origin: 100% 100%;
}

.home .fizze-contact .is-style-fizze-panel > .fizze-lbl {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--fz-mute-w);
	border-bottom: 0;
	padding: 0 0 1.25rem;
}
.home .fizze-contact .is-style-fizze-panel > .fizze-lbl::before { width: 0.4rem; height: 0.4rem; }

.home .fizze-contact .is-style-fizze-panel .fizze-next-dt {
	display: block;
	padding: 1.35rem 1.6rem 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--fz-blue-ink);
}
.home .fizze-contact .is-style-fizze-panel .fizze-next-dt::before { content: none; }
.home .fizze-contact .is-style-fizze-panel > :nth-child(4) { margin-top: 0.9rem; color: var(--fz-blue-soft); }

/* Le message lui-meme, dans la voix display : c'est une phrase, pas une legende. */
.home .fizze-contact .is-style-fizze-panel > :nth-child(3),
.home .fizze-contact .is-style-fizze-panel > :nth-child(5) {
	padding: 0.5rem 1.6rem 1.5rem;
	font-family: var(--fz-serif);
	font-size: clamp(1.15rem, 1.65vw, 1.5rem) !important;
	font-weight: 420;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--fz-ink-w);
}
.home .fizze-contact .is-style-fizze-panel > :nth-child(5) { color: var(--fz-on-anth); }

.home .fizze-contact .is-style-fizze-panel p.fizze-next-foot {
	padding: 1rem 0.25rem 0;
	border-top: 0;
	text-align: right;
	font-size: 0.875rem !important;
	color: var(--fz-mute-w);
}

@media (max-width: 1024px) {
	/*
	 * FIX-02 — la carte NOTRE PART (sombre) est ancree, via la grille interne
	 * du panneau, au bord DROIT du panneau lui-meme : `max-width: 34rem`
	 * laissait ~130-150px de large inutilises entre le panneau et le bord de
	 * la colonne sur tablette (768-1024px), quand `margin-left: 0` (ci-dessous)
	 * empeche de recentrer le bloc pour recuperer cet espace sans deplacer la
	 * carte VOTRE PART (claire, correctement placee, ancree au bord GAUCHE du
	 * meme panneau). Elargir le panneau — sans toucher sa position — laisse
	 * la carte sombre s'etendre vers cet espace, sans bouger la carte claire.
	 * Sans effet sur mobile reel (<600px), ou le panneau est deja plus etroit
	 * que le viewport quelle que soit cette valeur.
	 *
	 * FIX-03 — elargir le panneau ne suffisait pas : la carte sombre touchait
	 * bien le bord de la colonne, mais l'ecart RELATIF entre les deux cartes
	 * (`--fz-tail`, ~61px a 768px de large — la meme formule qu'au bureau,
	 * jamais recalibree pour cette largeur) restait faible face a des cartes
	 * larges de ~610px : les deux bulles semblaient toujours sur le meme axe.
	 * `--fz-tail` est donc desormais plus genereux specifiquement sur cette
	 * plage (jusqu'a +40 % a 768px), ce qui, meme a largeur de panneau egale,
	 * retrecit chaque carte et accentue leur decalage gauche/droite.
	 *
	 * FIX-04 — nouveau critere geometrique : l'ecart bord-gauche-carte-claire
	 * <-> bord-gauche-colonne doit se lire comme l'ecart bord-droit-carte-
	 * sombre <-> bord-droit-colonne. Mesure : a 768px les deux ecarts sont
	 * bien a 0 (`max-width: 44rem` = 704px couvre alors toute la colonne),
	 * mais a 820px la colonne fait ~723px (19px non couverts) et a 1024px
	 * ~913px (209px non couverts) — et comme le panneau est aligne a GAUCHE
	 * (`margin-left: 0`, jamais `auto`, ci-dessous), tout cet espace non
	 * couvert s'accumule d'un seul cote : a DROITE, ou vit justement la carte
	 * sombre. `max-width: 44rem` etait donc lui-meme la cause du decalage —
	 * pas `--fz-tail` — des que la colonne depassait cette largeur fixe.
	 * Le panneau couvre maintenant TOUJOURS 100% de sa colonne : les deux
	 * ecarts valent alors 0 a n'importe quelle largeur tablette, par
	 * construction, sans avoir besoin de deviner un nombre de pixels.
	 */
	.home .fizze-contact .is-style-fizze-panel {
		margin: clamp(2rem, 6vw, 3rem) 0 0;
		max-width: 100%;
		--fz-tail: clamp(4rem, 11vw, 6.5rem);
	}
}

/* --- 19.8 Pied de page : la fermeture de marque ------------------------ */

/*
 * 01B — UNE SEULE FERMETURE. Le mot-symbole venait APRES le copyright, rogne
 * par le bas de page : on croyait a un second pied de page, ou a un bug. Il
 * devient une BANDE DE SIGNATURE : entier, pose sur un filet, a gauche ; et
 * la ligne legale vient se caler sur sa ligne de base, a droite. Une seule
 * rangee finale, lue comme une signature au bas d'une lettre. L'ordre visuel
 * est porte par `order` : le balisage editable ne bouge pas.
 */
/*
 * FIX-01 — le Footer restait identitairement juste (email, wordmark, point
 * bleu, nav, copyright : rien ne change ci-dessous) mais la validation
 * humaine le trouvait trop aere verticalement. Quatre paddings/margins
 * cumulaient plus de 360px d'espace pur a 1440px de large ; ils sont
 * resserres d'environ 40% dans cette passe, la meme table que la mission
 * distingue entre « avant le Footer » (traite en §19.7, cf. .home
 * .fizze-contact) et « dans le Footer » (ici).
 */
.fizze-ftr {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--fz-anth);
	color: var(--fz-on-anth-mute);
	border-top: 0;
	padding-block: clamp(2rem, 4.5vw, 3.5rem) 0;
}
/* En colonne flex, les marges automatiques de la mise en page contrainte retreciraient chaque rangee. */
.fizze-ftr > * { width: 100%; box-sizing: border-box; }
.fizze-ftr > .fizze-ftr__close { order: 1; }
.fizze-ftr > .fizze-ftr__top { order: 2; }
.fizze-ftr > .fizze-ftr__mark { order: 3; }
.fizze-ftr > .fizze-ftr__bottom { order: 4; }
.fizze-ftr__close {
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
	border-bottom: 1px solid var(--fz-rule-d);
}
.fizze-ftr__kicker { color: var(--fz-on-anth-mute); margin: 0 0 clamp(1rem, 2.5vw, 1.75rem); }
.fizze-ftr__kicker::before { background: var(--fz-blue-soft); }
.fizze-ftr__big {
	margin: 0;
	font-family: var(--fz-serif);
	/* 01C : un cran en dessous de 01B (6,4rem -> 5,5rem) — toujours le CTA
	   principal du Footer, mais qui respire mieux avec la signature en dessous.
	   FIX-02 : encore un cran (-12 %, 5,5rem -> 4,75rem).
	   FIX-03 : la validation humaine juge la reduction FIX-02 insuffisante —
	   l'email dominait toujours le Footer face au logo, aux colonnes et a la
	   signature. Coupe nette (-32 % supplementaires, 4,75rem -> 3,25rem) pour
	   que la hierarchie se lise clairement : signature `FIZZE.` > email > reste. */
	font-size: clamp(1.35rem, 5vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.035em;
}
.fizze-ftr__big a { font-weight: 540; background-size: 0 2px; background-position: 0 94%; }
.fizze-ftr__big a::after {
	content: '\2192' / '';
	display: inline-block;
	margin-left: 0.18em;
	font-size: 0.55em;
	vertical-align: 0.3em;
	color: var(--fz-blue-soft);
	transition: transform 0.55s var(--fz-pop);
}
.fizze-ftr__big a:hover,
.fizze-ftr__big a:focus-visible { background-size: 100% 2px; }
.fizze-ftr__big a:hover::after,
.fizze-ftr__big a:focus-visible::after { transform: translateX(0.12em) rotate(-45deg); }
/* L'adresse est deja la, en grand : la petite ligne de la colonne marque se tait. */
.fizze-ftr:has(.fizze-ftr__close) .fizze-ftr__mail { display: none; }

.fizze-ftr .fizze-wordmark a { color: var(--fz-on-anth); letter-spacing: 0.08em; font-weight: 800; }
.fizze-ftr__desc { color: var(--fz-on-anth-mute); }
.fizze-ftr__col-title {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--fz-on-anth-mute);
}
.fizze-ftr__links li { color: var(--fz-on-anth-mute); }
.fizze-ftr__bottom { border-top-color: var(--fz-rule-d); color: var(--fz-on-anth-mute); }

/*
 * 01C — LA SIGNATURE, PAS UN TITRE. En 01B, le grand « FIZZE. » empruntait
 * la voix editoriale (Fraunces) : il se lisait comme un gros titre de plus,
 * pas comme la marque. Le vrai wordmark FIZZE existe deja, deux fois, dans
 * ce meme Footer (`.fizze-hdr .fizze-wordmark` / `.fizze-ftr .fizze-wordmark
 * a` — DM Sans, graisse 800, tracking +0,08em) : cette signature reprend
 * exactement cette identite, agrandie, jamais une police display.
 * Fraunces reste la voix editoriale du reste du site ; elle ne signe jamais
 * la marque elle-meme.
 */
.fizze-ftr__mark {
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	/*
	 * FIX-05 — l'espace sous « Cookies » cumulait DEUX respirations qui ne
	 * fusionnent jamais : `.fizze-ftr__top` porte deja un `margin-bottom`
	 * (le meme role que `.fizze-ftr__close` joue avant lui) ; en layout flex
	 * en colonne, les marges entre elements adjacents ne se fusionnent
	 * JAMAIS (contrairement au flux normal), donc ce `margin-top` s'ajoutait
	 * integralement au-dessus (44px + 32px = 76px mesures avant le filet de
	 * separation). Retire : `.fizze-ftr__top` reste la seule source de cette
	 * respiration, exactement comme pour le bloc precedent.
	 */
	margin: 0;
	padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(0.85rem, 1.6vw, 1.3rem);
	border-top: 1px solid var(--fz-rule-d);
	font-family: var(--fz-body);
	font-weight: 800;
	/* Sous 782 px, le mot remplit la colonne (rapport largeur/corps mesure pour DM Sans, tracking inclus). */
	font-size: calc((100vw - 2 * var(--fz-gut)) / 2.5);
	line-height: 0.86;
	letter-spacing: 0.015em;
	color: var(--fz-on-anth);
	user-select: none;
	pointer-events: none;
}
.fizze-ftr > .fizze-ftr__mark + .fizze-ftr__bottom,
.fizze-ftr:has(> .fizze-ftr__mark) > .fizze-ftr__bottom { border-top: 0; padding-top: 0; }

@media (min-width: 782px) {
	.fizze-ftr { --fz-mark-pad: clamp(0.85rem, 1.6vw, 1.3rem); }
	.fizze-ftr__mark { font-size: clamp(6.5rem, 13.5vw, 11.5rem); padding-bottom: var(--fz-mark-pad); }
	/* La ligne legale rejoint la signature : a droite, sur sa ligne de base. */
	.fizze-ftr:has(> .fizze-ftr__mark) > .fizze-ftr__bottom {
		position: absolute;
		right: max(var(--fz-gut), (100% - var(--fz-wrap)) / 2);
		bottom: calc(var(--fz-mark-pad) - 0.2rem);
		width: auto;
		max-width: 45%;
		margin: 0 !important;
		padding: 0;
		justify-content: flex-end;
	}
}
.fizze-ftr__word { display: inline-block; }
.fizze-bubble {
	display: inline-block;
	flex: none;
	width: 0.09em;
	height: 0.09em;
	margin-left: 0.03em;
	border-radius: 50%;
	background: var(--fz-blue);
	transition: transform 1s var(--fz-pop) 0.35s, opacity 0.4s var(--fz-ease) 0.35s;
}

/* --- 19.9 Langage motion ------------------------------------------------ */

/*
 * Tout ce qui suit n'existe que sous `.fizze-js` (pose dans <head> par le
 * theme, retire si fizze.js ne s'annonce pas) et hors mouvement reduit.
 * Sans script, la page est complete et immobile.
 */

/* Lignes de titre : chaque ligne monte de derriere son propre masque. */
.fz-line {
	display: inline-block;
	vertical-align: top;
	overflow: clip;
	/* Jambages et italiques debordent : on agrandit le masque sans bouger le texte. */
	padding: 0.06em 0.1em 0.16em;
	margin: -0.06em -0.1em -0.16em;
}
.fz-line__in { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
	/*
	 * L'en-tete tombe en place, a peine. FIX-03 — `backwards` empechait bien
	 * la matrice de `transform` de PERSISTER apres la fin de l'animation,
	 * mais pas pendant : entre le chargement de la page et la fin des 0.95s
	 * (delai + duree), `.fizze-hdr__in` porte un `transform` actif (meme
	 * `backwards` l'applique avant le demarrage). Or `.wp-block-navigation__
	 * responsive-container` (le tiroir) est un DESCENDANT de `.fizze-hdr__in`
	 * et sa position `fixed` (regle coeur de WordPress) prend alors cet
	 * ancetre transforme comme bloc conteneur au lieu du viewport — le tiroir
	 * se retrouve confine a la hauteur de la barre, avec son propre scroll
	 * interne, exactement le bug remonte par la validation humaine (ouverture
	 * du menu dans la toute premiere seconde du chargement de l'Accueil).
	 * `fz-drop` anime maintenant `top` (sur `.fizze-hdr__in`, deja en
	 * `position: relative`) au lieu de `transform: translateY()` : meme effet
	 * visuel, mais `top` ne cree jamais de bloc conteneur pour les
	 * descendants en `position: fixed`.
	 */
	.fizze-js .home .fizze-hdr__in { animation: fz-drop-top 0.9s var(--fz-out) 0.05s backwards; }

	/* Hero : tant que fizze.js n'a pas decoupe le titre, il ne se peint pas. */
	.fizze-js .home .fizze-hero-title:not(.fz-split) { opacity: 0; }
	.fizze-js .home .fizze-hero .fizze-hero-say > *,
	.fizze-js .home .fizze-hero .fizze-ledger::before { animation: none; }
	.fizze-js .home .fizze-hero-title.fz-split .fz-line__in {
		animation: fz-rise 1.15s var(--fz-out) both;
		animation-delay: calc(0.18s + var(--i, 0) * 0.11s);
	}
	/* L'italique arrive un temps apres et se redresse : l'accent se lit comme un geste. */
	.fizze-js .home .fizze-hero-title.fz-split mark {
		display: inline-block;
		animation: fz-lean 1.3s var(--fz-out) both;
		animation-delay: calc(0.32s + var(--i, 0) * 0.11s);
	}

	.fizze-js .home .fizze-hero .fizze-eyebrow { animation: fz-fade-x 0.8s var(--fz-out) 0.1s both; }
	.fizze-js .home .fizze-eyebrow::before { animation: fz-bubble 0.9s var(--fz-pop) 0.2s both; }
	.fizze-js .home .fizze-eyebrow::after { animation: fz-draw 1.4s var(--fz-out) 0.3s both; }

	.fizze-js .home .fizze-hero .fizze-lede { animation: fz-fade-y 0.9s var(--fz-out) 0.62s both; }
	.fizze-js .home .fizze-hero .fizze-hero-cta { animation: fz-fade-y 0.9s var(--fz-out) 0.74s both; }
	.fizze-js .home .fizze-hero .fizze-hero-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link::before { animation: fz-bubble 0.8s var(--fz-pop) 1s backwards; }
	.fizze-js .home .fizze-hero .fizze-note { animation: fz-fade-y 0.9s var(--fz-out) 0.86s both; }

	/* Le registre se leve par un rideau, puis ses deux libelles font monter leur bulle. */
	.fizze-js .home .fizze-hero .fizze-ledger { animation: fz-curtain 1.2s var(--fz-out) 0.7s both; }
	.fizze-js .home .fizze-hero .fizze-ledger .fizze-lbl::before { animation: fz-bubble 0.8s var(--fz-pop) 1.25s both; }
	.fizze-js .home .fizze-hero .fizze-ledger-us .fizze-lbl::before { animation-delay: 1.38s; }

	/* --- Revelations au scroll (fizze.js pose data-fz, puis is-in) --- */

	.fizze-js [data-fz="fade"] {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.9s var(--fz-out), transform 1s var(--fz-out);
		transition-delay: var(--fz-d, 0s);
	}
	.fizze-js [data-fz="fade"].is-in { opacity: 1; transform: none; }

	/*
	 * SITE-009. Les cartes « Travailler ensemble » (`.fizze-svc-else
	 * .fizze-cardcol`) entrent l'une apres l'autre (decalage --fz-d pose par
	 * fizze.js) puis reagissent au survol. L'entree est une ANIMATION et non
	 * une transition : une fois terminee (fill `backwards`, jamais `forwards`),
	 * la carte retombe sur ses valeurs de base et le survol reste libre, sans
	 * le delai du decalage. Hors de ce bloc (mouvement reduit) rien n'est
	 * masque. Empilees (< 782 px), le decalage est reduit de moitie : chaque carte arrive surtout seule, au defilement.
	 */
	.fizze-js [data-fz="card"] { opacity: 0; }
	.fizze-js [data-fz="card"].is-in {
		opacity: 1;
		animation: fz-card-in 0.85s var(--fz-out) var(--fz-d, 0s) backwards;
	}
	@media (max-width: 781.98px) {
		.fizze-js [data-fz="card"].is-in { animation-delay: calc(var(--fz-d, 0s) * 0.5); }
	}

	.fizze-svc-else .fizze-cardcol {
		transition: transform 0.4s var(--fz-out), box-shadow 0.4s var(--fz-out), border-color 0.3s ease;
	}
	.fizze-svc-else .fizze-cardcol::before { transition: width 0.4s var(--fz-out); }
	@media (hover: hover) and (pointer: fine) {
		.fizze-svc-else .fizze-cardcol:hover,
		.fizze-svc-else .fizze-cardcol:focus-within {
			transform: translateY(-5px);
			border-color: rgba(37, 99, 235, 0.32);
			box-shadow: 0 16px 32px -16px rgba(17, 24, 39, 0.24), 0 3px 8px rgba(17, 24, 39, 0.06);
		}
		/* Le filet d'accent s'allonge : le bleu se fait plus present, la palette ne change pas. */
		.fizze-svc-else .fizze-cardcol:hover::before,
		.fizze-svc-else .fizze-cardcol:focus-within::before { width: 64px; }
	}

	.fizze-js [data-fz="lines"] .fz-line__in {
		transform: translateY(110%);
		transition: transform 1.1s var(--fz-out);
		transition-delay: calc(var(--fz-d, 0s) + var(--i, 0) * 0.1s);
	}
	.fizze-js [data-fz="lines"].is-in .fz-line__in { transform: none; }

	.fizze-js [data-fz="label"] {
		opacity: 0;
		transform: translateX(-10px);
		transition: opacity 0.7s var(--fz-out), transform 0.9s var(--fz-out);
	}
	.fizze-js [data-fz="label"]::before { opacity: 0; transform: translateY(0.9rem) scale(0.2); }
	.fizze-js [data-fz="label"].is-in { opacity: 1; transform: none; }
	.fizze-js [data-fz="label"].is-in::before { opacity: 1; transform: none; transition-delay: 0.12s; }

	/* Les lignes d'accordeon : le cheveu se trace, puis la question apparait. */
	.fizze-js .home .fizze-phrase [data-fz="row"] { background-size: 0 1px; transition-delay: var(--fz-d, 0s); }
	.fizze-js .home .fizze-phrase [data-fz="row"] > summary {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.8s var(--fz-out), transform 0.9s var(--fz-out), color 0.3s var(--fz-ease), background-size 0.7s var(--fz-out);
		transition-delay: calc(var(--fz-d, 0s) + 0.18s), calc(var(--fz-d, 0s) + 0.18s), 0s, 0s;
	}
	.fizze-js .home .fizze-phrase [data-fz="row"].is-in { background-size: 100% 1px; }
	.fizze-js .home .fizze-phrase [data-fz="row"].is-in > summary { opacity: 1; transform: none; }

	/*
	 * La conversation s'ecrit : votre bulle se pose, puis la notre repond. Les
	 * bulles montent avec le rebond de la signature ; le texte les suit.
	 */
	.fizze-js [data-fz="thread"]::before,
	.fizze-js [data-fz="thread"]::after {
		opacity: 0;
		transform: translateY(14px) scale(0.94);
		transition: opacity 0.5s var(--fz-out), transform 0.8s var(--fz-pop);
	}
	.fizze-js [data-fz="thread"] > * {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 0.6s var(--fz-out), transform 0.8s var(--fz-out);
	}
	.fizze-js [data-fz="thread"].is-in::before,
	.fizze-js [data-fz="thread"].is-in::after,
	.fizze-js [data-fz="thread"].is-in > * { opacity: 1; transform: none; }
	.fizze-js [data-fz="thread"].is-in::before { transition-delay: 0.1s; }
	.fizze-js [data-fz="thread"].is-in > :nth-child(2),
	.fizze-js [data-fz="thread"].is-in > :nth-child(3) { transition-delay: 0.25s; }
	.fizze-js [data-fz="thread"].is-in::after { transition-delay: 0.75s; }
	.fizze-js [data-fz="thread"].is-in > :nth-child(4),
	.fizze-js [data-fz="thread"].is-in > :nth-child(5) { transition-delay: 0.9s; }
	.fizze-js [data-fz="thread"].is-in > :nth-child(6) { transition-delay: 1.15s; }

	/* LE POINT FINAL : le mot-symbole se leve, puis la bulle monte et se pose. */
	.fizze-js [data-fz="mark"] .fizze-bubble { opacity: 0; transform: translateY(0.7em) scale(0.2); }
	.fizze-js [data-fz="mark"].is-in .fizze-bubble { opacity: 1; transform: none; }
	.fizze-js [data-fz="mark"] .fizze-ftr__word {
		opacity: 0;
		transform: translateY(0.2em);
		transition: opacity 1s var(--fz-out), transform 1.4s var(--fz-out);
	}
	.fizze-js [data-fz="mark"].is-in .fizze-ftr__word { opacity: 1; transform: none; }
}

@keyframes fz-rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes fz-card-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fz-lean {
	from { transform: translateX(-0.12em) skewX(10deg); opacity: 0.15; }
	to { transform: none; opacity: 1; }
}
@keyframes fz-fade-y { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fz-fade-x { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
/* FIX-03 : `top` plutot que `transform` — voir §19.9 ci-dessus pour la raison. */
@keyframes fz-drop-top { from { opacity: 0; top: -14px; } to { opacity: 1; top: 0; } }
@keyframes fz-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* LA BULLE : elle monte, depasse a peine, et se pose. */
@keyframes fz-bubble {
	0% { opacity: 0; transform: translateY(0.9rem) scale(0.2); }
	55% { opacity: 1; }
	100% { opacity: 1; transform: none; }
}
@keyframes fz-curtain {
	from { clip-path: inset(0 0 100% 0); transform: translateY(18px); }
	to { clip-path: inset(0 0 0 0); transform: none; }
}

/* --- 19.10 La transition clair -> sombre ------------------------------- */

/*
 * La salle sombre des phrases s'ouvre quand on y entre : sa surface part
 * legerement en retrait, aux angles arrondis, et gagne toute la largeur a
 * mesure que la section monte dans l'ecran. Pilote par le defilement lui-meme
 * (scroll-driven animations, CSS pur) : aucun ecouteur, aucun calcul. Un
 * navigateur qui ne connait pas `view-timeline` affiche directement la surface
 * pleine largeur.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.home .fizze-phrase::before {
			animation: fz-room linear both;
			animation-timeline: --fz-room;
			animation-range: entry 0% entry 80%;
		}
	}
}
@keyframes fz-room {
	from { transform: scaleX(0.92); border-radius: 48px 48px 0 0; }
	to { transform: none; border-radius: 0; }
}

/* --- 19.11 Petits ecrans et mouvement reduit --------------------------- */

@media (max-width: 781px) {
	.home .fizze-hero { padding-top: calc(var(--fz-hdr-h) + 2.25rem); }
	/* Sur tablette, la pilule garde sa taille ; elle ne s'etire qu'au pouce (< 480 px). */
	.home .fizze-hero-cta { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
	.home .fizze-hero-cta .wp-block-button,
	.home .fizze-hero-cta .wp-block-button .wp-block-button__link { width: auto; }
	.home .fizze-hero-cta .fizze-lnk .wp-block-button__link { text-align: left; }
	.home .fizze-ledger { margin-top: 1rem; }
	.home .fizze-ledger-you,
	.home .fizze-ledger-us { padding-inline: 0; }
	.home .fizze-ledger-you { border-bottom: 1px solid var(--fz-rule-w); }

	.home .fizze-phrase { --fz-q-indent: 0px; }
	.home .fizze-phrase .is-style-fizze-q > summary { grid-template-columns: 1.9rem 1fr auto; gap: 0 0.6rem; }
	.home .fizze-phrase .is-style-fizze-q > summary::before { display: block; }
	.home .fizze-phrase .fizze-q-out { padding-left: 1rem; }
	.home .fizze-contact .is-style-fizze-panel { margin-top: 1.5rem; }
}

@media (max-width: 479.98px) {
	.home .fizze-hero-cta { align-items: stretch; }
	.home .fizze-hero-cta .wp-block-button:not(.fizze-lnk),
	.home .fizze-hero-cta .wp-block-button:not(.fizze-lnk) .wp-block-button__link { width: 100%; }
	.home .fizze-hero-cta .wp-block-button:not(.fizze-lnk) .wp-block-button__link { text-align: left; font-size: 1rem; line-height: 1.3; padding-left: 1.35rem; }
	.home .fizze-hero-cta .fizze-lnk { align-self: flex-start; }
}

@media (min-width: 782px) and (max-width: 1099.98px) {
	.home .fizze-hero-say { max-width: none; }
	.home .fizze-lede { max-width: 50ch; }
	.home .fizze-ledger { max-width: 44rem; margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.fz-line__in,
	.home .fizze-hero-title mark { transform: none !important; }
	.fizze-js [data-fz],
	.fizze-js [data-fz]::before,
	.fizze-js [data-fz] .fizze-bubble,
	.fizze-js [data-fz] .fizze-ftr__word,
	.fizze-js [data-fz] > summary,
	.fizze-js [data-fz="thread"] > *,
	.fizze-js [data-fz="thread"]::after { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.home .fizze-phrase .wp-block-details.is-style-fizze-q { background-size: 100% 1px !important; }
}

/* ---------- 20. Services — la page de la traduction ------------------- */

/*
 * SERVICES-001. La page Services prolonge la generation visuelle prouvee sur
 * l'Accueil (section 19) : meme ivoire, meme anthracite, meme Fraunces pour
 * la voix editoriale, meme bulle bleue pour la signature motion. Elle ne la
 * copie pas : l'Accueil est une AFFICHE (un registre, une salle sombre, une
 * conversation) ; Services est une TRADUCTION.
 *
 * LA REGLE DE SURFACE, ET C'EST LA SIGNATURE DE CETTE PAGE :
 *
 *     surface claire  = le client parle    (index du hero, citation, exemple)
 *     surface sombre  = FIZZE repond       (les quatre panneaux de reponse)
 *
 * Cette regle se tient d'un bout a l'autre. Elle explique pourquoi Services
 * n'a AUCUNE section entierement sombre, contrairement a l'Accueil : le noir
 * n'y est pas une piece ou l'on entre, c'est une VOIX qui prend la parole
 * quatre fois. Le dernier bloc sombre de la page est donc le pied de page.
 *
 * Tout ce qui suit est porte par `body:has(.fizze-svc-hero)` ou par une
 * classe `fizze-svc-*`. Aucune regle de la section 19 (`.home`), de
 * l'en-tete, du pied de page ou de la page Contact n'est modifiee : sans la
 * page Services dans le document, cette section n'existe pas.
 *
 * L'en-tete n'a besoin d'aucune regle ici. En l'absence de `.fizze-hero`
 * dans le contenu, la barre est deja exactement dans l'etat qu'elle prend
 * sur l'Accueil au repos : encre sur ivoire, sans voile marine (section 4,
 * `body:has(.fizze-hero)` ne s'applique pas).
 */

body:has(.fizze-svc-hero) {
	background: var(--fz-paper);
	color: var(--fz-ink-w);
}
body:has(.fizze-svc-hero) ::selection { background: var(--fz-blue); color: #fff; }

/* Le hero monte sous l'en-tete fixe, comme sur l'Accueil. */
.fizze-main:has(.fizze-svc-hero) { padding-top: 0; }

/* --- 20.1 Micro-libelles : la bulle, comme partout ailleurs ------------ */

.fizze-svc-eyebrow,
.fizze-svc-kicker,
.fizze-svc-index .fizze-lbl,
.fizze-svc-answer .fizze-lbl,
.fizze-svc-door__say .fizze-lbl,
.fizze-svc-sample .fizze-lbl {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	font-family: var(--fz-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--fz-mute-w);
}
.fizze-svc-eyebrow::before,
.fizze-svc-kicker::before,
.fizze-svc-index .fizze-lbl::before,
.fizze-svc-answer .fizze-lbl::before,
.fizze-svc-door__say .fizze-lbl::before,
.fizze-svc-sample .fizze-lbl::before {
	content: '';
	display: inline-block;
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--fz-blue);
	transition: transform 0.8s var(--fz-pop), opacity 0.3s var(--fz-ease);
}
/* Le surtitre du hero tire son filet jusqu'au bord, comme sur l'Accueil. */
.fizze-svc-eyebrow::after {
	content: '';
	flex: 1;
	height: 1px;
	margin-left: 0.6rem;
	background: var(--fz-rule-w);
	transform-origin: 0 50%;
}
/* Sur l'anthracite, le libelle passe au bleu clair : meme regle qu'en 19.6. */
.fizze-svc-answer .fizze-lbl { color: var(--fz-blue-soft); }
.fizze-svc-answer .fizze-lbl::before { background: var(--fz-blue-soft); }

/* --- 20.2 Voix editoriale ---------------------------------------------- */

.fizze-svc-title,
.fizze-svc-h2 {
	font-family: var(--fz-serif);
	font-weight: 520;
	line-height: 1.02;
	letter-spacing: -0.033em;
	color: var(--fz-ink-w);
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}
/*
 * Sur telephone, les lignes redigees ne tiennent plus : elles se cassent, et
 * la casse naturelle laisse des mots seuls en fin de titre. `text-wrap:
 * balance` repartit alors les lignes a peu pres egalement. Sans effet au
 * bureau, ou aucune ligne redigee ne se casse (mesure a 1024, 1100, 1280,
 * 1366, 1440 et 1920 px) : la propriete n'a rien a equilibrer.
 */
.fizze-svc-title,
.fizze-svc-h2,
.fizze-svc-title .fz-line__in,
.fizze-svc-h2 .fz-line__in { text-wrap: balance; }

.fizze-svc-title mark,
.fizze-svc-h2 mark {
	font-style: italic;
	font-weight: 470;
	letter-spacing: -0.028em;
	color: var(--fz-blue);
	background: none;
}

/*
 * Le H1 de Services est volontairement d'un cran SOUS celui de l'Accueil
 * (7,2rem la-bas) : c'est la deuxieme page d'une meme publication, pas une
 * seconde couverture — et la place gagnee revient a l'index des quatre
 * situations, qui doit se lire dans le meme ecran.
 */
.fizze-svc-title { font-size: clamp(2.2rem, 9.8vw, 3.9rem); }
@media (min-width: 782px) {
	.fizze-svc-title { font-size: clamp(2.7rem, min(5.5vw, 11vh), 4.7rem); }
}

.fizze-svc-h2 { font-size: clamp(1.75rem, 2.95vw, 2.6rem); }

.fizze-svc-lede {
	color: var(--fz-mute-w);
	font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.2rem);
	line-height: 1.62;
	max-width: 46ch;
	margin-top: 0;
	margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
}
.fizze-svc-lede strong { color: var(--fz-ink-w); font-weight: 600; }
.fizze-svc-note { color: var(--fz-mute-w); margin: 0.9rem 0 0; }

/* --- 20.3 Les boutons : la pilule a bulle, comme sur l'Accueil --------- */

/*
 * Meme composant, meme geste : la bulle d'encre nait sous la pastille et
 * remplit le bouton. Le selecteur ne peut pas etre mutualise avec celui de
 * la section 19 sans le desancrer de `.home` ; il est donc redit ici pour
 * Services, a l'identique, plutot que d'elargir une regle verrouillee.
 */
body:has(.fizze-svc-hero) .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.45rem 0.45rem 0.45rem 1.6rem;
	border-radius: 999px;
	background: var(--fz-blue);
	color: #fff;
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.005em;
	box-shadow: none;
}
body:has(.fizze-svc-hero) .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link::before {
	content: '';
	order: 2;
	flex: none;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: #fff var(--fz-arrow-blue) center / 1.05rem no-repeat;
	transition: transform 0.55s var(--fz-pop);
}
body:has(.fizze-svc-hero) .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	inset: auto;
	top: 50%;
	left: auto;
	right: 0.45rem;
	width: 2.6rem;
	height: 2.6rem;
	margin: -1.3rem 0 0;
	border-radius: 50%;
	background: var(--fz-ink-w);
	transform: scale(0);
	transition: transform 0.6s var(--fz-out);
}
body:has(.fizze-svc-hero) .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
body:has(.fizze-svc-hero) .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	transform: none;
	box-shadow: none;
	color: #fff;
}
body:has(.fizze-svc-hero) .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::after,
body:has(.fizze-svc-hero) .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible::after { transform: scale(19); }
body:has(.fizze-svc-hero) .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::before,
body:has(.fizze-svc-hero) .fizze-main .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible::before { transform: rotate(-45deg) scale(1.04); }

/* Le lien secondaire : le soulignement qui se retire puis revient (19.3). */
body:has(.fizze-svc-hero) .fizze-lnk .wp-block-button__link,
body:has(.fizze-svc-hero) .fizze-lnk .wp-block-button__link:hover {
	border: 0;
	padding: 0 0 4px;
	color: var(--fz-ink-w);
	font-weight: 600;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
body:has(.fizze-svc-hero) .fizze-lnk .wp-block-button__link:hover,
body:has(.fizze-svc-hero) .fizze-lnk .wp-block-button__link:focus-visible {
	color: var(--fz-blue-ink);
	animation: fz-underline 0.75s var(--fz-out);
}

/* Le bouton contour de la section « Je ne sais pas » : un filet d'encre. */
.fizze-svc-else__cta .wp-block-button__link {
	border: 1px solid rgba(26, 25, 23, 0.32);
	border-radius: 999px;
	padding: 0.7rem 1.3rem;
	color: var(--fz-ink-w);
	background: transparent;
	font-weight: 600;
	box-shadow: none;
}
.fizze-svc-else__cta .wp-block-button__link:hover,
.fizze-svc-else__cta .wp-block-button__link:focus-visible {
	border-color: var(--fz-ink-w);
	background: var(--fz-ink-w);
	color: var(--fz-paper);
	transform: none;
	box-shadow: none;
}

/* --- 20.4 Le hero : l'affirmation, et l'index des quatre --------------- */

.fizze-svc-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--fz-paper);
	color: var(--fz-ink-w);
	padding-block: calc(var(--fz-hdr-h) + clamp(1.75rem, 4.5vh, 3.25rem)) clamp(2.25rem, 4.5vw, 3.75rem);
}
/*
 * La lueur eclaire l'INDEX, pas le titre : sur l'Accueil elle tombe derriere
 * l'affiche, ici elle designe l'endroit ou le visiteur doit se reconnaitre.
 */
.fizze-svc-hero::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 50%;
	right: max(-22vw, -320px);
	translate: 0 -50%;
	width: min(68vw, 880px);
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(37, 99, 235, 0.13), rgba(37, 99, 235, 0.04) 55%, transparent 72%);
}

.fizze-svc-hero__grid { gap: clamp(2.25rem, 5vw, 4.5rem); align-items: center !important; }

.fizze-svc-index { margin: 0; }
.fizze-svc-index__list {
	counter-reset: fz-ix;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--fz-ink-w);
}
.fizze-svc-index__list li {
	counter-increment: fz-ix;
	margin: 0;
	border-bottom: 1px solid var(--fz-rule-w);
}
.fizze-svc-index__list a {
	display: grid;
	grid-template-columns: 2.1rem minmax(0, 1fr) 1.1rem;
	align-items: baseline;
	gap: 0 0.65rem;
	padding: clamp(0.8rem, 1.5vw, 1.05rem) 0;
	text-decoration: none;
	color: var(--fz-ink-w);
	font-family: var(--fz-serif);
	font-weight: 500;
	font-optical-sizing: auto;
	font-size: clamp(1rem, 1.18vw, 1.15rem);
	line-height: 1.32;
	letter-spacing: -0.01em;
	transition: color 0.3s var(--fz-ease);
}
.fizze-svc-index__list a::before {
	content: counter(fz-ix, decimal-leading-zero);
	font-family: var(--fz-body);
	font-size: 0.7rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.12em;
	color: var(--fz-mute-w);
	transition: color 0.3s var(--fz-ease);
}
/* La bulle FIZZE en bout de ligne : elle monte et se pose au survol. */
.fizze-svc-index__list a::after {
	content: '';
	align-self: center;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--fz-blue);
	opacity: 0;
	transform: translateY(0.55rem) scale(0.2);
	transition: transform 0.55s var(--fz-pop), opacity 0.25s var(--fz-ease);
}
.fizze-svc-index__list a:hover,
.fizze-svc-index__list a:focus-visible { color: var(--fz-blue-ink); }
.fizze-svc-index__list a:hover::before,
.fizze-svc-index__list a:focus-visible::before { color: var(--fz-blue-ink); }
.fizze-svc-index__list a:hover::after,
.fizze-svc-index__list a:focus-visible::after { opacity: 1; transform: none; }

.fizze-svc-index__foot {
	margin: 1.15rem 0 0;
	color: var(--fz-mute-w);
}
.fizze-svc-index__foot a {
	color: var(--fz-ink-w);
	font-weight: 600;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	transition: color 0.25s var(--fz-ease);
}
.fizze-svc-index__foot a:hover { color: var(--fz-blue-ink); animation: fz-underline 0.75s var(--fz-out); }

/* --- 20.5 Les quatre portes ------------------------------------------- */

/*
 * Pas de cartes. Une porte est une RANGEE : a gauche la situation du client
 * (titre editorial + les lignes ou le visiteur se reconnait), a droite la
 * reponse FIZZE, sur anthracite.
 *
 * FIX-01 — cette position est desormais FIXE pour les quatre portes, et non
 * plus alternee. La validation humaine de SERVICES-001 montre que
 * l'alternance gauche/droite, bien que graphiquement interessante, forcait
 * une reorientation a chaque porte : le visiteur devait reapprendre le sens
 * de lecture a chaque fois. La grammaire est maintenant unique et apprise
 * des la porte 01 : VOUS NOUS DITES (gauche) -> FIZZE REPOND (droite). La
 * variete de la page reste portee par le contenu, le rythme et le motion —
 * pas par la position.
 */
/*
 * FIX-02 — QUATRE CHAPITRES, UNE SEULE PONCTUATION. Diagnostic avant
 * modification : la sequence portait deja un filet devant CHAQUE porte
 * (`.fizze-svc-door__grid`, border-top ci-dessous, jamais reserve a la
 * porte 01) — ce n'est donc pas un filet qui manquait entre les portes.
 * Ce qui differait reellement, mesure dans le DOM : l'entree et les trois
 * transitions porte-a-porte respiraient a 157-161px, quand FIX-01 avait
 * resserre la seule sortie (porte 04 -> section suivante) a 101px pour lui
 * donner une fin nette. Le rythme n'etait donc homogene qu'a une extremite.
 *
 * Cause exacte de l'ecart : chaque porte portait SA PROPRE respiration
 * haute (`padding-block`, symmetrique haut/bas) EN PLUS de celle de son
 * `__grid` interne — deux paddings empiles avant chaque filet, la ou la
 * sortie FIX-01 n'en garde qu'un. Plutot que de superposer un second
 * systeme, la respiration haute de `.fizze-svc-door` est retiree : le
 * filet et le padding-top de `__grid` (deja en place, inchanges) portent
 * desormais SEULS chaque entree de porte — exactement le mecanisme deja
 * valide pour la sortie. La respiration basse (fermeture de chaque porte)
 * ne change pas : c'est elle qui donne au filet suivant sa matiere.
 */
.fizze-svc-door {
	background: var(--fz-paper);
	color: var(--fz-ink-w);
	padding-top: 0;
	padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}
.fizze-svc-door__grid {
	gap: clamp(2rem, 4.5vw, 4rem) !important;
	align-items: flex-start !important;
	border-top: 1px solid var(--fz-rule-w);
	padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.fizze-svc-door__say .fizze-lbl { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

.fizze-svc-sit {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fizze-svc-sit li {
	position: relative;
	margin: 0;
	padding: 0.62rem 0 0.62rem 1.45rem;
	border-bottom: 1px solid var(--fz-rule-w);
	color: var(--fz-ink-w);
	font-size: 0.9875rem;
	line-height: 1.5;
}
.fizze-svc-sit li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Le filet du registre, a l'echelle d'une ligne : une marque, pas une puce. */
.fizze-svc-sit li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.32em;
	width: 0.7rem;
	height: 1px;
	background: var(--fz-blue);
	opacity: 0.7;
}

/*
 * FIX-01 — la reponse est toujours a droite : le coin bas-droit (6px) est
 * donc systematiquement le coin sec de la queue, dans les quatre portes.
 * L'ancienne variante `.is-flipped` (queue a gauche) n'a plus d'usage.
 */
.fizze-svc-answer {
	background: var(--fz-anth);
	color: var(--fz-on-anth);
	border-radius: var(--fz-panel-r) var(--fz-panel-r) 6px var(--fz-panel-r);
	padding: clamp(1.5rem, 2.8vw, 2.15rem);
	box-shadow: 0 26px 52px -34px rgba(21, 22, 26, 0.55);
}
/*
 * RYTHME PAR LA SURFACE (FIX-02, ajustee en FIX-03). Quatre panneaux
 * identiques, meme colonne : la repetition devenait perceptible en
 * parcourant la page entiere. La position (droite, LOCKED par FIX-01) ne
 * bouge pas ; seule la TEINTE alterne, entre deux surfaces qui
 * appartiennent deja toutes deux a FIZZE — jamais une couleur inventee
 * pour l'occasion :
 *
 *   porte 01, 03 — `--fz-anth`        (anthracite, le sombre de l'Accueil)
 *   porte 02, 04 — `--fz-blue-steel`  (bleu acier, deja dans la palette du
 *                   theme.json, alias en section 1)
 *
 * FIX-03 — `--fz-navy` (retenu en FIX-02) restait trop proche de
 * l'anthracite : les deux sont des bleu-nuit quasi noirs (luminance 0,0072
 * contre 0,0081 — un ecart de 12 %, imperceptible en parcourant la page).
 * `--fz-blue-steel` a une luminance de 0,0514, soit ~6 a 7 fois plus clair
 * qu'anthracite ET navy : l'alternance se voit enfin a distance normale,
 * sans devenir pastel ni concurrencer l'ivoire de la page (0,87) ou le
 * bleu d'accent vif (`--fz-blue`, utilise pour les CTA — jamais comme
 * fond de panneau).
 *
 * Contrastes reverifies pour ce fond precis (les seuls tons reellement
 * employes DANS `.fizze-svc-answer` — verification faite sur le CSS
 * source, `--fz-on-anth-mute` n'y sert jamais, l'ecarter n'etait donc pas
 * necessaire) : `--fz-on-anth` (texte principal) 8,63 ; `--fz-blue-soft`
 * (citation et micro-label) 4,84 — AA largement respecte pour les deux,
 * aucune regle de texte n'a besoin d'etre dupliquee.
 *
 * Alternance retenue : 01 anthracite / 02 acier / 03 anthracite / 04 acier
 * — toujours deux surfaces, aucun cinquieme traitement.
 */
.fizze-svc-door-steel .fizze-svc-answer {
	background: var(--fz-blue-steel);
	box-shadow: 0 26px 52px -34px rgba(12, 22, 56, 0.5);
}
.fizze-svc-answer__txt {
	margin: 0 0 clamp(1.1rem, 2vw, 1.5rem);
	color: var(--fz-on-anth);
	font-size: clamp(1rem, 0.97rem + 0.22vw, 1.1rem);
	line-height: 1.62;
}
/*
 * La ligne de sortie : la meme voix que « Vous repartez avec… » de l'Accueil
 * (19.6), c'est le meme role editorial — la promesse tenue, en une ligne.
 */
.fizze-svc-out {
	margin: 0;
	padding-left: 1rem;
	border-left: 2px solid var(--fz-blue-soft);
	color: var(--fz-on-anth);
	font-family: var(--fz-serif);
	font-style: italic;
	font-weight: 420;
	font-size: clamp(1.08rem, 1.35vw, 1.26rem);
	line-height: 1.38;
}
.fizze-svc-aside {
	margin: 1.15rem 0 0;
	color: var(--fz-mute-w);
	line-height: 1.55;
}

/* --- 20.6 « Je ne sais pas ce qu'il me faut » --------------------------- */

/*
 * Troisieme surface, et la seule respiration de la page : ni ivoire ni noir.
 * C'est le moment ou la page cesse de proposer des portes et accueille celui
 * qui n'en prend aucune ; le changement de fond dit exactement cela.
 *
 * FIX-01 — ENTREE/SORTIE DE LA SEQUENCE DES QUATRE PORTES. Mesure reelle a
 * 1440px (DOM, contenu a contenu) : l'entree (note du Hero -> chapeau de la
 * porte 01) mesurait 161px, portee par le filet de `.fizze-svc-door__grid`
 * (border-top) qui casse le vide a mi-parcours. La sortie (aside de la
 * porte 04 -> chapeau de cette section) mesurait 176px, MAIS sans aucun
 * filet : rien n'y marque la fin de la sequence, et le glissement de teinte
 * (`--fz-paper` -> `--fz-paper-deep`, deux ivoires tres proches) est presque
 * imperceptible. Le vide se lisait donc comme plus long qu'il ne l'etait
 * reellement — c'est ce que la validation humaine signale, pas un simple
 * ecart de pixels. Un filet identique a celui de l'entree resout la lecture
 * sans avoir besoin de creuser l'ecart de hauteur davantage ; `margin-top`
 * (l'equivalent du blanc SEUL, avant tout filet ou padding) est retire au
 * profit de ce filet + d'un padding-top aligne sur celui de la porte 01
 * (`.fizze-svc-door__grid`, clamp(1.75rem,3.5vw,2.75rem)) : la sortie retombe
 * ainsi a 101px mesures (contre 161px a l'entree) — plus courte, mais avec
 * le meme repere visuel (le filet) qu'a chaque frontiere de porte, ce qui
 * est ce qui manquait reellement : la lecture perceptuelle, verifiee a
 * l'oeil, se lit desormais comme une fin de sequence nette et volontaire,
 * pas comme un vide qui traine.
 */
.fizze-svc-else {
	background: var(--fz-paper-deep);
	color: var(--fz-ink-w);
	border-top: 1px solid var(--fz-rule-w);
	padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
	padding-bottom: clamp(2.75rem, 6vw, 5rem);
}
.fizze-svc-else__grid { gap: clamp(1.75rem, 4.5vw, 4rem); align-items: flex-start !important; }
.fizze-svc-else .fizze-svc-h2 {
	font-size: clamp(1.8rem, 3.1vw, 2.9rem);
	margin-bottom: 0;
}
.fizze-svc-else__txt {
	color: var(--fz-mute-w);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.18rem);
	line-height: 1.62;
	max-width: 52ch;
}
.fizze-svc-else__txt strong { color: var(--fz-ink-w); font-weight: 600; }
.fizze-svc-else__cta { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

/*
 * Paragraphes a l'axe dans une section sans colonnes (page A propos). Sur
 * Services, `.fizze-svc-lede` et `.fizze-svc-else__txt` vivent dans une
 * colonne, ou leur `max-width` n'a aucun effet de centrage. Poses ici
 * directement sous la section (mise en page « constrained »), Gutenberg leur
 * donne `margin-inline: auto !important` et la mesure de 46/52ch les recentre,
 * en retrait du kicker, du titre et du bouton. Ils reprennent donc le bord
 * gauche du contenu (`--fz-wrap`, la meme mesure que `contentSize`), sans
 * jamais passer sous zero. Le `!important` repond a celui du coeur ; la
 * regle ne vise que ces trois enfants directs.
 */
.fizze-svc-hero > .fizze-svc-lede,
.fizze-svc-else > .fizze-svc-else__txt,
.fizze-svc-end > .fizze-svc-lede {
	margin-left: max(0px, calc((100% - var(--fz-wrap)) / 2)) !important;
	margin-right: auto !important;
}

/*
 * Titres de carte et sous-titres de section : la voix serif des titres du
 * site (meme famille et meme graisse que `.fzc-direct__title`, la carte de
 * secours de Contact), et non le jeton `heading` (Arial 900) herite du
 * theme. Tailles inchangees ; `balance` evite le mot seul en fin de titre,
 * comme pour `.fizze-svc-h2`.
 */
.fizze-svc-else .fizze-cardcol > h3,
.fizze-svc-else > h3 {
	font-family: var(--fz-serif);
	font-weight: 520;
	letter-spacing: -0.022em;
	color: var(--fz-ink-w);
	text-wrap: balance;
}
.fizze-svc-else > h3 {
	font-size: clamp(1.4rem, 2.2vw, 1.8rem);
	line-height: 1.12;
	margin: clamp(2rem, 4vw, 3rem) 0 0.75rem;
}

/* --- 20.7 La sortie : un premier message suffit ------------------------ */

.fizze-svc-end {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--fz-paper);
	color: var(--fz-ink-w);
	padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
}
.fizze-svc-end::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: max(-22vw, -320px);
	bottom: max(-32vw, -420px);
	width: min(72vw, 900px);
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(37, 99, 235, 0.1), transparent 70%);
}
.fizze-svc-end__grid { gap: clamp(2rem, 5vw, 4.5rem); align-items: center !important; }
.fizze-svc-end .fizze-svc-h2 { font-size: clamp(2.3rem, 5.1vw, 4.4rem); }
.fizze-svc-end .fizze-svc-lede { max-width: 48ch; }

/*
 * L'exemple de message : une bulle CLAIRE, queue en bas a gauche. C'est le
 * visiteur qui parle — la regle de surface de cette page (voir l'entete de
 * section) veut donc qu'elle soit claire, et non anthracite comme les quatre
 * reponses. Meme famille que la bulle « Votre part » de l'Accueil.
 */
.fizze-svc-sample {
	max-width: 34rem;
	margin-left: auto;
	padding: clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.1rem, 2vw, 1.4rem);
	background: #FFFDF8;
	border: 1px solid var(--fz-rule-w);
	border-radius: var(--fz-panel-r) var(--fz-panel-r) var(--fz-panel-r) 6px;
	box-shadow: 0 18px 40px -30px rgba(26, 25, 23, 0.35);
}
.fizze-svc-sample__txt {
	margin: 0;
	font-family: var(--fz-serif);
	font-weight: 420;
	font-size: clamp(1.12rem, 1.6vw, 1.42rem);
	line-height: 1.38;
	letter-spacing: -0.01em;
	color: var(--fz-ink-w);
}
.fizze-svc-sample__foot {
	margin: 1.1rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--fz-rule-w);
	text-align: right;
	color: var(--fz-mute-w);
}

/* --- 20.8 Responsive --------------------------------------------------- */

/*
 * Le point de rupture est 1024 px et non celui de Gutenberg (782 px) : entre
 * les deux, une porte tiendrait bien en deux colonnes, mais le panneau de
 * reponse y descendrait sous 300 px de large — la reponse deviendrait plus
 * etroite que la situation qu'elle traite. Meme choix qu'en 19.6 pour les
 * phrases de l'Accueil.
 */
@media (max-width: 1023.98px) {
	.fizze-svc-hero__grid,
	.fizze-svc-door__grid,
	.fizze-svc-else__grid,
	.fizze-svc-end__grid { flex-wrap: wrap !important; }
	.fizze-svc-hero__grid > .wp-block-column,
	.fizze-svc-door__grid > .wp-block-column,
	.fizze-svc-else__grid > .wp-block-column,
	.fizze-svc-end__grid > .wp-block-column { flex-basis: 100% !important; }

	.fizze-svc-hero__grid { align-items: flex-start !important; }
	.fizze-svc-hero__say { max-width: 40rem; }
	.fizze-svc-index { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
	.fizze-svc-sample { max-width: 100%; margin-left: 0; }
	.fizze-svc-end__grid { align-items: flex-start !important; }
	/* Empilee, la reponse porte la meme queue que la bulle du visiteur. */
	.fizze-svc-answer {
		border-radius: var(--fz-panel-r) var(--fz-panel-r) var(--fz-panel-r) 6px;
	}
}

@media (min-width: 1024px) {
	/* La reponse arrive APRES la situation : elle est posee un cran plus bas. */
	.fizze-svc-door__ans { margin-top: clamp(1.5rem, 3.5vw, 3.25rem); }
}

@media (max-width: 599.98px) {
	.fizze-svc-cta { flex-direction: column; align-items: stretch; gap: 1.1rem; }
	.fizze-svc-cta .wp-block-button:not(.fizze-lnk),
	.fizze-svc-cta .wp-block-button:not(.fizze-lnk) .wp-block-button__link { width: 100%; }
	body:has(.fizze-svc-hero) .fizze-main .fizze-svc-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
		text-align: left;
		font-size: 1rem;
		line-height: 1.3;
		padding-left: 1.35rem;
	}
	.fizze-svc-cta .fizze-lnk { align-self: flex-start; }
	.fizze-svc-index__list a { grid-template-columns: 1.75rem minmax(0, 1fr) 0.9rem; gap: 0 0.5rem; }
}

/* ---------- 21. En-tete — sous-menu Services (FIX-01) ------------------ */

/*
 * SERVICES-001-FIX-01. Le lien `Services` gagne quatre sous-entrees vers les
 * quatre portes de la page, portees par le bloc natif `core/navigation-
 * submenu` (contenu : `wp_navigation` #29 « fizze-en-tete »). Rien n'est
 * hardcode en JavaScript : le bloc fournit deja le comportement (ouverture
 * au survol ET au clic sur le chevron, clavier, Echap, fermeture au clic
 * exterieur) via l'Interactivity API du coeur — ce theme ne fait qu'habiller
 * ce que WordPress construit, exactement comme pour le selecteur de langue
 * (`.fizze-langsel__menu`, section 4), dont ce panneau reprend la meme
 * grammaire : meme rayon, meme ombre, memes proportions d'item — seul le
 * jeu de couleurs change (anthracite/`--fz-on-anth`, au lieu de blanc/encre),
 * car ce panneau herite `overlayBackgroundColor`/`overlayTextColor` du bloc
 * de navigation lui-meme (memes attributs que le tiroir mobile).
 *
 * CE QUE CETTE SECTION NE FAIT PAS : elle ne redeclare jamais `opacity`,
 * `visibility`, `height` ni `width` sur `.wp-block-navigation__submenu-
 * container` — ce sont exactement les quatre proprietes par lesquelles le
 * coeur WordPress bascule l'ouverture/fermeture (survol, focus, ou
 * `aria-expanded`). Leur redeclarer ici referait, moins bien, un mecanisme
 * qui fonctionne deja. Cette section n'ajoute que l'habillage (couleurs,
 * rayon, ombre, typographie) et une legere translation d'entree.
 */

/* Le lien `Services` garde son survol/etat courant habituels (section 19.2) ;
   seul le petit chevron, hors de ce systeme de classe, suit la meme couleur. */
.fizze-hdr .wp-block-navigation-submenu__toggle {
	color: inherit;
	cursor: pointer;
}
.fizze-hdr .has-child:hover > .wp-block-navigation-submenu__toggle,
.fizze-hdr .wp-block-navigation-submenu__toggle:hover,
.fizze-hdr .wp-block-navigation-submenu__toggle:focus-visible,
.fizze-hdr .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
	color: var(--fz-blue);
}
.fizze-hdr .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon svg {
	transition: transform 0.25s var(--fz-ease);
}
.fizze-hdr .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/*
 * FIX-02 — POSITIONNEMENT, ROOT CAUSE. Le panneau apparaissait sous
 * « Accueil » : `.fizze-hdr` porte une navigation justifiee a droite et le
 * coeur WordPress ancre alors le sous-menu avec `right:0`. Ce selecteur
 * explicite depasse cette regle du coeur et fournit une base stable ; la
 * geometrie desktop commune de la section 26.1 centre ensuite le panneau
 * sur le `<li>` Services, qui contient le lien visible et son chevron.
 */
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	top: 100%;
	left: 0;
	right: auto;
	min-width: 300px;
	padding: 0.4rem 0.6rem 0.5rem;
	border-radius: var(--fz-header-dropdown-radius);
	/*
	 * FIX-04 — DETACHEMENT. Mesure : le fond du panneau (`--fz-paper`,
	 * rgb(244,240,232)) est EXACTEMENT identique au fond de la page sur
	 * l'Accueil (`body.home{background:var(--fz-paper)}`) — meme valeur au
	 * pixel pres. Le panneau n'a donc jamais eu que le filet et l'ombre pour
	 * se detacher, et les deux etaient trop discrets pour ce cas precis
	 * (filet a 16% d'opacite, ombre a spread -20px/flou 48px). Renforces
	 * tous les deux, sans toucher au fond ni aux dimensions : filet a 30%
	 * (toujours un cheveu, jamais un trait), ombre plus resserree et un peu
	 * plus marquee (flou 32px au lieu de 48, spread -12px au lieu de -20,
	 * opacite 0,38 au lieu de 0,3) — une ombre de contact plus nette plutot
	 * qu'un halo plus large.
	 */
	border: 1px solid var(--fz-header-dropdown-border);
	box-shadow: var(--fz-header-dropdown-shadow);
}
/* Le panneau Services est ancré au parent de navigation ; sa hauteur
 * naturelle était inférieure aux surfaces Identité/Langues de 40 px, ce qui
 * plaçait son bord supérieur quelques pixels trop haut. */
@media (min-width: 600px) {
	.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__container > .wp-block-navigation-submenu {
		min-height: 40px;
		align-items: center;
	}
}
/*
 * BUG HOVER, ROOT CAUSE (FIX-02, preserve en FIX-03). Le panneau ouvrait
 * autrefois avec `top: calc(100% + 0.6rem)` : une bande de ~9-10px sans
 * rien de hoverable separait le declencheur du panneau. Un pointeur qui
 * descend a vitesse humaine la traverse et perd le survol avant d'atteindre
 * le menu — l'Interactivity API du coeur (`pointerleave`) referme alors le
 * sous-menu. La geometrie desktop commune ajoute desormais 3 px d'air et
 * les couvre avec un pont limite a la largeur exacte du declencheur : le
 * trajet vertical reste continu sans agrandir sa hitbox horizontalement.
 */

/*
 * FIX-03 — UN DROPDOWN, PAS UNE LISTE. Le panneau precedent etait fonctionnel
 * (position et hover corriges en FIX-02) mais visuellement generique : quatre
 * lignes de texte, sans rien qui le distingue d'un sous-menu WordPress
 * ordinaire. Il reprend ici, en miniature, le langage DEJA etabli par l'index
 * du Hero Services (`.fizze-svc-index__list`, section 20.4) — numeros a deux
 * chiffres, voix editoriale Fraunces, bulle bleue qui monte au survol : le
 * meme systeme, pas un nouveau. Ce n'est pas une coincidence de style : le
 * dropdown devient litteralement une version compacte de la question que
 * Services pose deja dans son Hero (« qu'est-ce qui vous amene ? »), rendue
 * accessible depuis n'importe quelle page via le Header.
 *
 * Le micro-label est un texte genere (`::before`), jamais lu par un lecteur
 * d'ecran comme contenu essentiel — les quatre liens portent seuls
 * l'information reelle, deja accessible sans lui. Purement editorial.
 */
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-container::before {
	content: "Qu\2019 est-ce qui vous am\00e8ne\00a0?";
	display: block;
	padding: 0.55rem 0.75rem 0.6rem;
	margin-bottom: 0.15rem;
	border-bottom: 1px solid var(--fz-rule-w);
	font-family: var(--fz-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--fz-mute-w);
}
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	counter-reset: fz-sub;
}
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	counter-increment: fz-sub;
}
/* Filet entre les entrees — jamais avant la premiere, le label/separateur du dessus suffit deja. */
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-container > .wp-block-navigation-item + .wp-block-navigation-item {
	border-top: 1px solid var(--fz-rule-w);
}
@media (prefers-reduced-motion: no-preference) {
	.fizze-hdr .wp-block-navigation__submenu-container { transform: translateY(-4px); }
	@media (hover: hover) {
		.fizze-hdr .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
			transform: none;
		}
	}
	.fizze-hdr .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		transform: none;
	}
	.fizze-hdr .wp-block-navigation__submenu-container { transition: opacity 0.16s var(--fz-ease), transform 0.2s var(--fz-out); }
}
@media (prefers-reduced-motion: reduce) {
	/* Sans transform du tout : le coeur bascule deja opacite/visibilite instantanement (regle @media not (prefers-reduced-motion)). */
	.fizze-hdr .wp-block-navigation__submenu-container { transform: none; }
}

/*
 * FIX-02 — SURFACE CLAIRE. Le panneau anthracite (herite de
 * `overlayBackgroundColor`, meme attribut que le tiroir mobile) est jugee
 * trop massive pour une simple liste de quatre liens. Il passe en ivoire —
 * `--fz-paper`, le meme jeton que l'Accueil et le Hero Services, pas une
 * couleur inventee pour l'occasion. Les classes `has-background
 * has-anthracite-background-color` que le bloc imprime sur ce `<ul>`
 * restent dans le DOM (elles pilotent aussi le tiroir mobile, hors sujet
 * ici) ; cette regle les recouvre juste par specificite, comme la position
 * ci-dessus.
 *
 * Nommer le bloc deux fois ne suffisait PAS pour la couleur du texte :
 * `body.home .fizze-hdr:not(.is-stuck) ... .wp-block-navigation-item__content`
 * (section 19.2, l'Accueil au repos) est a la MEME specificite de classes
 * (5) que cette regle, et l'emporte quand meme — un selecteur de TYPE
 * (`body`) departage une egalite de classes en faveur de celui qui en
 * porte un, quelle que soit sa position dans le fichier. La classe finale
 * est donc doublee (`.wp-block-navigation-item__content.wp-block-navigation-item__content`),
 * exactement la technique que le coeur WordPress emploie lui-meme pour la
 * meme raison (`.wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}`).
 */
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	/* `!important` necessaire : `.has-anthracite-background-color` (imprimee par
	   le bloc via `overlayBackgroundColor`) est elle-meme en `!important` —
	   meme constat deja fait pour les presets WordPress ailleurs dans ce fichier
	   (section 3, tailles de texte). Le tiroir mobile garde son anthracite
	   intact : cette regle ne cible que le panneau de bureau. */
	background: var(--fz-paper) !important;
}
/*
 * Chaque entree reprend la grille numero/texte/bulle de l'index du Hero
 * (2 colonnes fixes + 1 colonne fluide), a une echelle compacte pour le
 * Header : Fraunces au lieu de DM Sans, numero `decimal-leading-zero`
 * genere par compteur, bulle bleue qui monte au survol — jamais de fond
 * plein, jamais de carte : la separation vient du filet, pas d'une boite.
 */
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr) 0.85rem;
	align-items: baseline;
	gap: 0 0.6rem;
	padding: 0.7rem 0.75rem;
	border-radius: 0;
	color: var(--fz-ink-w);
	font-family: var(--fz-serif);
	font-weight: 500;
	font-optical-sizing: auto;
	font-size: 0.9375rem;
	line-height: 1.3;
	letter-spacing: -0.008em;
	transition: color 0.25s var(--fz-ease);
}
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content::before {
	content: counter(fz-sub, decimal-leading-zero);
	font-family: var(--fz-body);
	font-size: 0.6875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.1em;
	color: var(--fz-mute-w);
	transition: color 0.25s var(--fz-ease);
}
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content::after {
	content: '';
	position: static;
	inset: auto;
	align-self: center;
	width: 0.4rem;
	height: 0.4rem;
	margin: 0;
	border-radius: 50%;
	background: var(--fz-blue);
	opacity: 0;
	transform: translateY(0.5rem) scale(0.2);
	transition: transform 0.5s var(--fz-pop), opacity 0.2s var(--fz-ease);
}
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	background: transparent;
	color: var(--fz-blue-ink);
}
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover::before,
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible::before {
	color: var(--fz-blue-ink);
}
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover::after,
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible::after {
	opacity: 1;
	transform: none;
}
.fizze-hdr .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
}

/*
 * DANS LE TIROIR MOBILE : pas de second niveau a deplier. Les quatre liens
 * sont montres directement sous « Services », sans chevron ni etat replie —
 * la simplicite demandee (§25 du mandat) plutot qu'une arborescence a deux
 * clics. Le declencheur du sous-menu (survol/clic/aria-expanded) n'a aucun
 * sens dans un tiroir deja ouvert au clic : il est neutralise ici, pas dans
 * la regle desktop ci-dessus.
 */
.fizze-hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: none;
}
/*
 * FIX-02 — REGRESSION EVITEE, FIX-03 — ETENDUE. Les regles de bureau
 * ci-dessus (position, habillage ivoire, puis en FIX-03 le micro-label et
 * la numerotation) sont renforcees en specificite pour depasser les regles
 * du coeur (`.items-justified-right...`, 5 classes). Sans y reprendre
 * garde, cela suffit aussi a passer AU-DESSUS des regles de tiroir : le
 * meme `.wp-block-navigation__submenu-container` existe dans les DEUX
 * contextes (coeur WordPress reutilise `.wp-block-navigation__container`
 * a l'identique dans le panneau deplie). Chaque ajout cote bureau doit donc
 * etre EXPLICITEMENT annule ici, avec une specificite au moins egale — le
 * bloc est nomme deux fois (`.wp-block-navigation.fizze-nav`) et la classe
 * finale doublee, meme convention qu'ailleurs dans cette section.
 */
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	position: static;
	opacity: 1;
	visibility: visible;
	height: auto;
	width: 100%;
	min-width: 0;
	transform: none;
	margin: 0.5rem 0 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent !important;
	gap: 0.15rem;
	counter-reset: none;
}
/* Le micro-label « Qu'est-ce qui vous amene ? » n'a pas sa place ici : Services est deja le titre du groupe. */
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container::before {
	content: none;
}
/*
 * FIX-03 — AXE COMMUN AVEC ACCUEIL. Le coeur WordPress reutilise la
 * variable `--navigation-layout-align` (posee par l'attribut `justifyContent:
 * "right"` du bloc) pour aligner le `<li>` d'un sous-menu a DROITE dans le
 * tiroir (`.has-child.open-always{ align-items: var(--navigation-layout-
 * align) }`) — alors que la regle du theme pour la navigation principale
 * (plus haut, « a gauche, aeree, jamais centree ») force deja `flex-start`
 * pour tout le reste. Resultat mesure avant correctif : Accueil a gauche
 * (x=20), Services aligne a DROITE de sa propre boite (x=172 sur 290px de
 * large) — les deux semblaient appartenir a deux compositions differentes,
 * exactement le symptome remonte. Un seul axe, partage par les deux.
 */
.fizze-hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu,
.fizze-hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	align-items: flex-start;
}
/*
 * FIX-02 — HIERARCHIE. Meme raison qu'au bureau ci-dessus : le bloc nomme
 * deux fois pour passer au-dessus de la regle blanche du tiroir (section
 * 19.2). Taille reduite (1,0625rem -> 0,9375rem, en dessous du corps de
 * texte courant du site) pour que les quatre situations se lisent
 * clairement comme un second niveau sous « Services » (35px, Fraunces,
 * blanc plein) et non comme quatre entrees principales de plus — la
 * distinction typographique (taille, police, couleur attenuee) porte toute
 * la hierarchie, sans indentation qui risquerait un debordement a 320px.
 */
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: block;
	padding: 0.65rem 0 0.65rem 1.1rem;
	border-top: 0;
	border-left: 2px solid var(--fz-card-sep);
	border-radius: 0;
	font-family: var(--fz-body);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: -0.005em;
	color: var(--fz-on-anth-mute);
}
/* Le numero, le point et la bulle du bureau n'ont pas d'equivalent ici : le filet a gauche suffit a regrouper les quatre situations sous Services. */
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content::before,
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content::after {
	content: none;
}
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	background: transparent;
	color: var(--fz-blue-soft);
	border-left-color: var(--fz-blue-soft);
}

/* ---------- 22. Contact — le mode Services --------------------------- */

/*
 * CONTACT-SERVICES-001. La page Contact porte deux parcours : le generique,
 * inchange, et celui qui arrive depuis une porte de la page Services. Le
 * serveur decide lequel des deux est rendu (voir `fizze_contact_mode_blocks`
 * dans functions.php) : cette section n'a donc rien a masquer, elle habille
 * seulement les trois composants que le parcours Services ajoute.
 *
 * Tout le reste — feuille, chapitres, champs, cartes de choix, pastilles,
 * confirmation — est celui de la section 15, reutilise tel quel. La section
 * 15 a simplement ete elargie a deux endroits : les cartes de choix
 * acceptent desormais `.fzc-f--besoins` a cote de `.fzc-f--projet`, et les
 * pastilles de choix court acceptent la classe generique `.fzc-f--pills`.
 * Aucune declaration n'a ete recopiee.
 */

/* --- Les cartes de situation ------------------------------------------ */

/*
 * Cinq situations, cinq pictogrammes. Ils appartiennent a ce formulaire :
 * les icones du formulaire generique disent d'autres choses, et les faire
 * servir deux fois aurait lie deux parcours qui doivent pouvoir evoluer
 * separement.
 */
.fzc-sheet .fzc-f--besoins .ff-el-form-check:nth-child(1) .ff-el-form-check-label {
	--fzc-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280'%3E%3Crect x='2.5' y='3.5' width='15' height='13' rx='2' stroke-width='1.4'/%3E%3Ccircle cx='7.4' cy='7.8' r='1.4' stroke-width='1.3'/%3E%3Cpath d='M3.2 13.4l3.9-3.2 3.1 2.5 2.6-2 4 3.3' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--fzc-choice-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF'%3E%3Crect x='2.5' y='3.5' width='15' height='13' rx='2' stroke-width='1.4'/%3E%3Ccircle cx='7.4' cy='7.8' r='1.4' stroke-width='1.3'/%3E%3Cpath d='M3.2 13.4l3.9-3.2 3.1 2.5 2.6-2 4 3.3' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fzc-sheet .fzc-f--besoins .ff-el-form-check:nth-child(2) .ff-el-form-check-label {
	--fzc-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280'%3E%3Cpath d='M4.6 6.5h10.8l-.9 9a1.4 1.4 0 01-1.4 1.3H6.9a1.4 1.4 0 01-1.4-1.3l-.9-9z' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M7.4 8.3V5.9a2.6 2.6 0 015.2 0v2.4' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	--fzc-choice-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF'%3E%3Cpath d='M4.6 6.5h10.8l-.9 9a1.4 1.4 0 01-1.4 1.3H6.9a1.4 1.4 0 01-1.4-1.3l-.9-9z' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M7.4 8.3V5.9a2.6 2.6 0 015.2 0v2.4' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.fzc-sheet .fzc-f--besoins .ff-el-form-check:nth-child(3) .ff-el-form-check-label {
	--fzc-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280'%3E%3Ccircle cx='8.7' cy='8.7' r='5.2' stroke-width='1.4'/%3E%3Cpath d='M12.6 12.6L17 17' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	--fzc-choice-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF'%3E%3Ccircle cx='8.7' cy='8.7' r='5.2' stroke-width='1.4'/%3E%3Cpath d='M12.6 12.6L17 17' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.fzc-sheet .fzc-f--besoins .ff-el-form-check:nth-child(4) .ff-el-form-check-label {
	--fzc-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280'%3E%3Ccircle cx='10' cy='10' r='7' stroke-width='1.4'/%3E%3Cpath d='M10 5.8V10l2.8 1.7' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--fzc-choice-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF'%3E%3Ccircle cx='10' cy='10' r='7' stroke-width='1.4'/%3E%3Cpath d='M10 5.8V10l2.8 1.7' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fzc-sheet .fzc-f--besoins .ff-el-form-check:nth-child(5) .ff-el-form-check-label {
	--fzc-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280'%3E%3Ccircle cx='10' cy='10' r='7' stroke-width='1.4'/%3E%3Cpath d='M8.1 7.9a2 2 0 013.8.7c0 1.4-2 1.7-2 2.9' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='9.9' cy='14.1' r='.9' fill='%236B7280' stroke='none'/%3E%3C/svg%3E");
	--fzc-choice-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF'%3E%3Ccircle cx='10' cy='10' r='7' stroke-width='1.4'/%3E%3Cpath d='M8.1 7.9a2 2 0 013.8.7c0 1.4-2 1.7-2 2.9' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='9.9' cy='14.1' r='.9' fill='%23FFFFFF' stroke='none'/%3E%3C/svg%3E");
}

/* --- Le budget : un curseur, sans composant a part -------------------- */

/*
 * Cinq paliers sur un rail, et une sortie explicite en dessous.
 *
 * Ce sont de vrais boutons radio : la fleche du clavier passe d'un palier au
 * suivant, le lecteur d'ecran annonce un groupe de choix, et le champ reste
 * un champ Fluent Forms ordinaire — aucun composant sur mesure, aucune
 * dependance ajoutee, aucune valeur qui dependrait d'un script. Le geste du
 * curseur est rendu par la forme (un rail, des pastilles, un palier qui
 * grossit quand il est choisi), pas par un `input[type=range]`, qui aurait
 * demande du JavaScript pour traduire un nombre en palier commercial.
 *
 * Le rail est un fond du conteneur, pas un element : il ne peut pas
 * participer a la zone de defilement de la page (meme lecon qu'en 15).
 */
.fzc-sheet .fzc-f--budget .ff-el-input--content {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	position: relative;
	padding-top: 6px;
	background-image: linear-gradient(var(--fz-border), var(--fz-border));
	background-repeat: no-repeat;
	background-size: calc(80% - 2px) 2px;
	background-position: center 19px;
}
.fzc-sheet .fzc-f--budget .ff-el-form-check { margin: 0; }
.fzc-sheet .fzc-f--budget .ff-el-form-check-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
	padding: 4px 3px 10px;
	text-align: center;
	cursor: pointer;
	font-family: var(--fz-body);
	font-weight: 400;
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--fz-muted);
	transition: color 0.16s var(--fz-ease);
}
/* La pastille du palier. Son halo blanc interrompt le rail proprement. */
.fzc-sheet .fzc-f--budget .ff-el-form-check-label::before {
	content: '';
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--fz-white);
	border: 2px solid var(--fz-border);
	box-shadow: 0 0 0 5px var(--fz-white);
	transition: background 0.18s var(--fz-ease), border-color 0.18s var(--fz-ease),
		transform 0.18s var(--fz-ease);
}
/* L'input reste focusable mais invisible : le palier entier est la cible. */
.fzc-sheet .fzc-f--budget .ff-el-form-check-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.fzc-sheet .fzc-f--budget .ff-el-form-check-label:hover { color: var(--fz-ink); }
.fzc-sheet .fzc-f--budget .ff-el-form-check-label:hover::before { border-color: var(--fz-border-blue); }
/*
 * Le palier choisi doit se lire d'un coup d'oeil, de loin : c'est la seule
 * valeur que le visiteur relit avant d'envoyer.
 */
.fzc-sheet .fzc-f--budget .ff-el-form-check-label:has(:checked) {
	color: var(--fz-blue-steel);
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 0.9375rem;
}
.fzc-sheet .fzc-f--budget .ff-el-form-check-label:has(:checked)::before {
	background: var(--fz-blue);
	border-color: var(--fz-blue);
	transform: scale(1.25);
}
.fzc-sheet .fzc-f--budget .ff-el-form-check-label:has(:focus-visible) {
	outline: 3px solid var(--fz-blue);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--card);
}

/*
 * « Je ne sais pas encore » n'est pas un palier : ce n'est pas un montant
 * plus bas que le premier, c'est une autre reponse. Elle quitte donc le rail
 * et reprend la forme des pastilles de choix court du reste du formulaire.
 */
.fzc-sheet .fzc-f--budget .ff-el-form-check:last-child {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: 22px;
}
.fzc-sheet .fzc-f--budget .ff-el-form-check:last-child .ff-el-form-check-label {
	flex-direction: row;
	gap: 9px;
	padding: 11px 16px;
	background: var(--fz-white);
	border: 1.5px solid var(--fz-border);
	border-radius: var(--wp--custom--radius--pill);
	font-size: 0.9375rem;
}
.fzc-sheet .fzc-f--budget .ff-el-form-check:last-child .ff-el-form-check-label::before {
	width: 11px;
	height: 11px;
	box-shadow: none;
}
.fzc-sheet .fzc-f--budget .ff-el-form-check:last-child .ff-el-form-check-label:hover {
	border-color: var(--fz-border-blue);
}
.fzc-sheet .fzc-f--budget .ff-el-form-check:last-child .ff-el-form-check-label:has(:checked) {
	border-color: var(--fz-blue);
	background: var(--fzc-blue-wash);
	font-size: 0.9375rem;
}
.fzc-sheet .fzc-f--budget .ff-el-form-check:last-child .ff-el-form-check-label:has(:checked)::before {
	transform: none;
}

/*
 * CONTACT-UNIFIED-001 : le bouton d'envoi n'attend plus qu'une situation
 * soit choisie.
 *
 * En 001 il etait masque tant qu'aucune carte n'etait cochee — les champs
 * requis etaient alors caches, et proposer l'envoi aurait promis une
 * soumission vouee a echouer. Depuis Services, une carte arrivait toujours
 * cochee : le cas ne se presentait jamais.
 *
 * Sur `/contact/` en acces direct, il devient au contraire le cas ordinaire.
 * Un visiteur qui raconte sa situation sans avoir choisi de carte
 * descendait jusqu'au bas d'un formulaire sans bouton, et sans rien qui le
 * lui explique : une impasse silencieuse, exactement ce que la mecanique
 * anti-blocage de FIX01 existe pour eviter.
 *
 * Le bouton reste donc la. Si aucune situation n'est choisie, c'est Fluent
 * Forms qui le dit, sur le champ concerne, dans ses propres mots — et « Je
 * ne sais pas encore exactement ce qu'il me faut » est toujours une reponse
 * possible.
 */

/* --- Le CTA des portes Services --------------------------------------- */

/*
 * Chaque porte de la page Services se termine desormais par une invitation.
 * Elle vit dans le panneau de reponse — c'est FIZZE qui parle — et garde le
 * bouton plein du theme : sur l'anthracite, le bleu FIZZE est deja la
 * couleur d'accent du panneau.
 */
.fizze-svc-answer .fizze-svc-door__cta {
	margin-top: clamp(1.4rem, 2.4vw, 1.9rem);
}
/*
 * Le bouton plein du theme est bleu. Deux des quatre panneaux de reponse le
 * sont aussi (`.fizze-svc-door-steel`) : le CTA y disparaissait purement et
 * simplement. Il passe donc a l'ivoire, la seule teinte qui tienne sur les
 * deux fonds sombres de la page, et le survol inverse l'encre en bleu au
 * lieu de remplir en bleu.
 */
/*
 * Le selecteur reprend celui de la regle qu'il doit battre (20.x, le bouton
 * plein de la page Services) : sans ses ancetres, il perdait en specificite
 * et le bouton restait bleu.
 */
body:has(.fizze-svc-hero) .fizze-main .fizze-svc-answer .fizze-svc-door__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--fz-paper);
	color: var(--fz-ink-w);
	box-shadow: none;
}
/*
 * Le panneau de reponse est etroit (une colonne sur deux) : au corps des CTA
 * de contenu, l'invitation se cassait en deux lignes dont la seconde tenait
 * un mot. Un cran plus bas, elle tient sur une ligne jusqu'au tres petit
 * ecran, ou la pile prend le relais.
 */
body:has(.fizze-svc-hero) .fizze-main .fizze-svc-answer .fizze-svc-door__cta .wp-block-button__link {
	font-size: 0.9375rem;
	padding-left: 1.25rem;
}
body:has(.fizze-svc-hero) .fizze-main .fizze-svc-answer .fizze-svc-door__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	background: var(--fz-white);
}
body:has(.fizze-svc-hero) .fizze-main .fizze-svc-answer .fizze-svc-door__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
body:has(.fizze-svc-hero) .fizze-main .fizze-svc-answer .fizze-svc-door__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	color: var(--fz-blue-hover);
	box-shadow: 0 16px 34px -14px rgba(8, 12, 30, 0.75);
}

@media (max-width: 768px) {
	/*
	 * Sous 768 px, cinq paliers cote a cote deviendraient cinq colonnes de
	 * deux caracteres. Le rail cede la place a une pile de pastilles : meme
	 * champ, memes valeurs, meme clavier — seule la forme change.
	 */
	.fzc-sheet .fzc-f--budget .ff-el-input--content {
		grid-template-columns: 1fr;
		gap: 10px;
		padding-top: 0;
		background-image: none;
	}
	.fzc-sheet .fzc-f--budget .ff-el-form-check-label {
		flex-direction: row;
		gap: 10px;
		padding: 12px 16px;
		text-align: left;
		background: var(--fz-white);
		border: 1.5px solid var(--fz-border);
		border-radius: var(--wp--custom--radius--pill);
		font-size: 0.9375rem;
	}
	.fzc-sheet .fzc-f--budget .ff-el-form-check-label::before {
		box-shadow: none;
		flex: none;
	}
	.fzc-sheet .fzc-f--budget .ff-el-form-check-label:has(:checked) {
		border-color: var(--fz-blue);
		background: var(--fzc-blue-wash);
		font-size: 0.9375rem;
	}
	.fzc-sheet .fzc-f--budget .ff-el-form-check:last-child {
		margin-top: 4px;
		justify-self: stretch;
	}
	.fizze-svc-answer .fizze-svc-door__cta .wp-block-button,
	.fizze-svc-answer .fizze-svc-door__cta .wp-block-button__link { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.fzc-sheet .fzc-f--budget .ff-el-form-check-label:has(:checked)::before { transform: none; }
}

/* ---------- 23. Le panneau immersif de Services ---------------------- */

/*
 * CONTACT-SERVICES-002. Depuis une porte de Services, le CTA n'envoie plus
 * le visiteur remplir un formulaire ailleurs : il ouvre une conversation
 * par-dessus la page qu'il etait en train de lire. Services reste visible
 * derriere, et fermer le panneau le ramene exactement ou il en etait.
 *
 * Le panneau n'est PAS une modale marketing : c'est une surface laterale
 * large (68 % au bureau, plein ecran au telephone) qui laisse le formulaire
 * respirer aux memes mesures que sur la page Contact.
 *
 * Il reutilise INTEGRALEMENT l'habillage de la section 15 : son conteneur
 * porte `.fzc-sheet .fzc-sheet--services`, et la declaration de variables
 * en tete de section 15 a ete elargie a `.fzc-ov`. Cette section ne fait
 * que trois choses : la coque (fond attenue, panneau, barre de fermeture),
 * la revelation progressive, et la sortie apres envoi.
 *
 * Sans JavaScript, `.fzc-ov` reste en `display: none` : le groupe est
 * invisible, non focusable, et les liens des portes font ce qu'ils ont
 * toujours fait — mener a `/contact/?besoin=...`.
 */

.fzc-ov {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1200;
}
.fzc-ov.is-open { display: block; }

/* Le voile : Services reste perceptible, simplement mis en retrait. */
.fzc-ov::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(21, 22, 26, 0.5);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.28s var(--fz-ease);
}
.fzc-ov.is-open::before { opacity: 1; }

/* --- Le panneau ------------------------------------------------------- */

.fzc-ov .fzc-ov__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(68%, 960px);
	max-width: 100%;
	box-sizing: border-box;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/* La feuille de la section 15 devient une surface pleine hauteur. */
	border: 0;
	border-radius: 0;
	box-shadow: -24px 0 60px -30px rgba(12, 16, 32, 0.55);
	padding: 0 clamp(20px, 3.4vw, 54px) clamp(40px, 6vw, 72px);
	transform: translateX(3%);
	opacity: 0;
	transition: transform 0.32s var(--fz-ease), opacity 0.24s var(--fz-ease);
}
.fzc-ov.is-open .fzc-ov__panel {
	transform: none;
	opacity: 1;
}

/* --- La barre de fermeture -------------------------------------------- */

/*
 * Elle est collee en haut du panneau : le formulaire est long, et « Fermer »
 * ne doit jamais demander de remonter. Le mot est ecrit — une croix seule
 * ne se comprend pas de tout le monde.
 */
.fzc-ov__bar {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	/*
	 * CONTACT-UNIFIED-001 : la bande porte desormais aussi l'indicateur de
	 * progression, a gauche. Une seule bande collee, jamais deux — et « ×
	 * Fermer » garde sa place, a droite, pendant tout le parcours.
	 */
	justify-content: space-between;
	align-items: center;
	gap: clamp(12px, 2vw, 24px);
	margin: 0 calc(clamp(20px, 3.4vw, 54px) * -1);
	padding: 12px clamp(20px, 3.4vw, 54px);
	background: var(--fz-white);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var(--fz-ease), box-shadow 0.2s var(--fz-ease);
}
/* Le filet n'apparait qu'une fois le contenu passe dessous. */
.fzc-ov__panel.is-scrolled .fzc-ov__bar {
	border-bottom-color: var(--fz-border);
	box-shadow: 0 10px 20px -18px rgba(17, 24, 39, 0.5);
}
.fzc-ov__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 9px 18px;
	border: 1.5px solid var(--fz-border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--fz-white);
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1;
	color: var(--fz-ink);
	cursor: pointer;
	transition: border-color 0.16s var(--fz-ease), background 0.16s var(--fz-ease),
		color 0.16s var(--fz-ease);
}
.fzc-ov__close span {
	font-size: 1.25rem;
	line-height: 1;
	/* La croix est decorative : le mot porte le sens. */
	margin-top: -2px;
}
.fzc-ov__close:hover {
	border-color: var(--fz-border-blue);
	background: var(--fzc-blue-wash);
	color: var(--fz-blue-steel);
}
.fzc-ov__close:focus-visible {
	outline: 3px solid var(--fz-blue);
	outline-offset: 3px;
}
/*
 * Quand un clic a cote est refuse parce que le formulaire est deja entame,
 * la commande se signale une seconde : le visiteur voit ou se trouve la
 * sortie au lieu de ne rien voir se passer.
 */
.fzc-ov__close.is-nudged {
	border-color: var(--fz-blue);
	background: var(--fzc-blue-wash);
	box-shadow: 0 0 0 4px var(--fzc-ring);
}

/* --- L'introduction contextualisee ------------------------------------ */

.fzc-ov__intro {
	padding-top: clamp(4px, 1vw, 12px);
	padding-bottom: clamp(22px, 3vw, 34px);
	margin-bottom: clamp(22px, 3vw, 34px);
	border-bottom: 1px solid var(--fz-border);
}
.fzc-ov__title {
	font-family: var(--fz-head);
	font-weight: 800;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--fz-ink);
	margin: 0;
}
/* Une seule phrase d'accueil survit : celle du besoin transmis. */
.fzc-ov__lede { display: none; }
.fzc-ov[data-fzc-besoin="image"] .fzc-ov__ctx--image,
.fzc-ov[data-fzc-besoin="boutique"] .fzc-ov__ctx--boutique,
.fzc-ov[data-fzc-besoin="visibilite"] .fzc-ov__ctx--visibilite,
.fzc-ov[data-fzc-besoin="simplifier"] .fzc-ov__ctx--simplifier {
	display: block;
	margin: 0.9rem 0 0;
	max-width: 54ch;
	font-size: clamp(1rem, 0.97rem + 0.25vw, 1.0625rem);
	line-height: 1.6;
	color: var(--fz-muted);
}

/* --- La revelation progressive ---------------------------------------- */

/*
 * Le formulaire ne s'ouvre pas comme un dossier. A l'ouverture, le visiteur
 * voit l'accueil, les situations et l'invitation a raconter — rien d'autre.
 * Les precisions, le budget puis les coordonnees arrivent ensuite, au fil de
 * ce qu'il fait (voir la section 12 de fizze.js pour les declencheurs).
 *
 * `!important` est indispensable : Fluent Forms pose `display: block` EN
 * LIGNE sur les groupes que sa logique conditionnelle vient de reveler.
 * Sans lui, une precision conditionnelle apparaitrait avant son tour.
 *
 * CONTACT-UNIFIED-001 : le crochet n'est plus le panneau mais
 * `data-fzc-flow`, pose par fizze.js sur la surface qui porte la
 * conversation — le panneau sur Services, la feuille sur `/contact/`. Une
 * seule regle sert donc les deux portes, et sans JavaScript aucun groupe
 * n'est masque nulle part : le formulaire s'affiche entier.
 */
[data-fzc-flow] [data-fzc-step]:not(.is-revealed) { display: none !important; }

[data-fzc-flow] [data-fzc-step].is-revealed {
	animation: fzc-ov-reveal 0.42s var(--fz-ease) both;
}
@keyframes fzc-ov-reveal {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* --- La sortie apres envoi -------------------------------------------- */

/*
 * CONTACT-V3-001-FIX01. Le lien « Retour a l'accueil » etait remplace par
 * un bouton « Revenir aux services ». La confirmation a desormais deux
 * destinations reelles — les conseils et l'accueil — et le retour a
 * Services reste assure par « × Fermer », qui ne quitte jamais la bande
 * collee. Le remplacement a donc ete retire de fizze.js, et l'habillage
 * qui le rattrapait ici avec lui : il n'y a plus de bouton a faire passer
 * pour un lien.
 */

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1024px) {
	.fzc-ov .fzc-ov__panel { width: min(86%, 820px); }
}

@media (max-width: 768px) {
	/*
	 * Au telephone, le panneau prend tout l'ecran : une surface laterale y
	 * couterait de la largeur de lecture sans rien apporter. `100dvh` suit
	 * la barre d'adresse qui se retracte ; `inset: 0` reste le repli des
	 * navigateurs qui ne connaissent pas l'unite.
	 */
	.fzc-ov .fzc-ov__panel {
		width: 100%;
		height: 100dvh;
		border-radius: 0;
		box-shadow: none;
		padding-left: 18px;
		padding-right: 18px;
		transform: translateY(2%);
	}
	.fzc-ov.is-open .fzc-ov__panel { transform: none; }
	.fzc-ov__bar {
		margin-left: -18px;
		margin-right: -18px;
		padding-left: 18px;
		padding-right: 18px;
	}
	.fzc-ov::before { backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * Sans mouvement, tout reste exact : le panneau est simplement la, et
	 * une section revelee apparait sans transition. Rien dans l'experience
	 * ne depend d'une animation pour se comprendre.
	 */
	.fzc-ov::before,
	.fzc-ov .fzc-ov__panel {
		transition: none;
		transform: none;
	}
	[data-fzc-flow] [data-fzc-step].is-revealed { animation: none; }
}

/* --- La page derriere -------------------------------------------------- */

/*
 * Le verrou de defilement fige le document a la position exacte qu'il
 * occupait : `position: fixed` plus un `top` negatif egal au defilement en
 * cours. fizze.js restitue les deux a la fermeture. La compensation de
 * largeur evite le sursaut lateral quand la barre de defilement disparait.
 */
html.fzc-ov-locked,
body.fzc-ov-locked {
	overflow: hidden;
}
body.fzc-ov-locked {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
}

/* --- Les cartes de situation : dire que plusieurs choix sont possibles -- */

/*
 * Retour humain de 001 : la couleur seule ne dit pas qu'une carte se coche.
 * Une vraie case, en haut a droite de chaque carte, le dit d'un coup d'oeil
 * — et dit aussi qu'on peut en cocher plusieurs. Elle n'est posee que sur
 * `.fzc-f--besoins` : les cartes du formulaire generique sont des boutons
 * radio, un choix unique, ou une case serait un contresens.
 */
.fzc-sheet .fzc-f--besoins .ff-el-form-check-label {
	position: relative;
	padding-right: 46px;
}
.fzc-sheet .fzc-f--besoins .ff-el-form-check-label::after {
	content: '';
	position: absolute;
	top: 16px;
	right: 15px;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 1.5px solid var(--fz-border);
	border-radius: 5px;
	background: var(--fz-white) no-repeat center;
	background-size: 12px 12px;
	transition: background-color 0.18s var(--fz-ease), border-color 0.18s var(--fz-ease);
}
.fzc-sheet .fzc-f--besoins .ff-el-form-check-label:hover::after { border-color: var(--fz-border-blue); }
.fzc-sheet .fzc-f--besoins .ff-el-form-check-label:has(:checked)::after {
	background-color: var(--fz-blue);
	border-color: var(--fz-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
	.fzc-sheet .fzc-f--besoins .ff-el-form-check-label { padding-right: 44px; }
	.fzc-sheet .fzc-f--besoins .ff-el-form-check-label::after { top: 15px; right: 13px; }
}

/* ---------- 24. L'indicateur de progression -------------------------- */

/*
 * CONTACT-UNIFIED-001. La revelation progressive evite de montrer toute la
 * complexite d'un coup ; l'indicateur evite l'effet inverse — un formulaire
 * dont on ne voit jamais la fin. Les deux vont ensemble :
 *
 *     ne pas montrer toute la complexite immediatement
 *     ne jamais cacher la longueur globale du parcours
 *
 * Ce n'est PAS un tunnel : aucune etape ne se clique, il n'y a ni Suivant ni
 * Precedent, et rien ne bloque. L'indicateur decrit, il ne commande pas.
 *
 * Il est pose par fizze.js (section 12) dans la bande collee du panneau, a
 * cote de « × Fermer », ou en tete de la feuille sur `/contact/`. Dans les
 * deux cas il reste visible pendant tout le remplissage, y compris trois
 * mille pixels plus bas.
 */

.fzc-prog {
	flex: 1 1 auto;
	min-width: 0;
}
.fzc-prog[hidden] { display: none; }

.fzc-prog__head {
	margin: 0;
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 0.8125rem;
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: var(--fz-muted);
}
/* Deux ecritures de la meme information ; une seule est affichee a la fois. */
.fzc-prog__compact { display: none; }

.fzc-prog__steps {
	display: flex;
	align-items: center;
	margin: 7px 0 0;
	padding: 0;
	list-style: none;
}
.fzc-prog__step {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	font-size: 0.6875rem;
	line-height: 1.25;
	color: var(--fz-muted);
}
/* Le trait qui relie une etape a la precedente. */
.fzc-prog__step + .fzc-prog__step::before {
	content: '';
	flex: 1 1 auto;
	min-width: 12px;
	height: 2px;
	margin: 0 8px;
	border-radius: 2px;
	background: var(--fz-border);
	transition: background-color 0.24s var(--fz-ease);
}
/*
 * FIX01 : le trait se remplit quand l'etape PRECEDENTE est reellement
 * renseignee — jamais parce qu'on est descendu jusque-la. Une ligne qui
 * avance au defilement promet un avancement que personne n'a fait.
 */
.fzc-prog__step.is-done + .fzc-prog__step::before {
	background: var(--fz-blue);
}

.fzc-prog__dot {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border: 2px solid var(--fz-border);
	border-radius: 50%;
	background: var(--fz-white) no-repeat center;
	background-size: 9px 9px;
	transition: background-color 0.2s var(--fz-ease), border-color 0.2s var(--fz-ease),
		box-shadow 0.2s var(--fz-ease), transform 0.2s var(--fz-ease);
}
.fzc-prog__name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*
 * FIX01. Deux informations independantes, portees par deux signes
 * differents — et jamais par la seule couleur :
 *
 *   ou je suis     l'anneau bleu, et le libelle en gras ;
 *   ce que j'ai    la coche, ✓, dans la pastille.
 *
 * Une etape peut donc etre l'une, l'autre, ou les deux a la fois. Chaque
 * etape porte en plus son etat ecrit, voir `.fzc-prog__state`.
 */
.fzc-prog__step.is-done .fzc-prog__dot {
	background-color: var(--fz-blue);
	border-color: var(--fz-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
}
/* Ou l'on se trouve : un anneau, pose sur l'etat de remplissage quel qu'il soit. */
.fzc-prog__step.is-current .fzc-prog__dot {
	border-color: var(--fz-blue);
	box-shadow: 0 0 0 4px var(--fzc-ring);
	transform: scale(1.1);
}
/* Consultee mais pas encore renseignee : le point est plein, sans coche. */
.fzc-prog__step.is-current:not(.is-done) .fzc-prog__dot {
	background-color: var(--fz-blue);
}
.fzc-prog__step.is-current {
	font-weight: 700;
	color: var(--fz-ink);
}
.fzc-prog__step.is-done { color: var(--fz-ink); }

/*
 * L'etat de chaque etape et l'annonce du changement : invisibles a l'oeil,
 * lus par les lecteurs d'ecran. L'information de progression ne depend donc
 * ni de la couleur, ni de la position, ni d'une animation.
 */
.fzc-prog__state,
.fzc-prog__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Sur `/contact/` : une bande collee sous l'en-tete ----------------- */

/*
 * L'en-tete FIZZE est `position: fixed` : la bande se cale exactement
 * dessous, jamais par-dessus. Elle epouse la largeur de la feuille — d'ou
 * les marges negatives egales au `padding` de `.fzc-sheet` — et arrondit
 * les deux coins du haut pour rester la feuille, pas un bandeau rapporte.
 */
.fzc-prog--page {
	position: sticky;
	top: calc(var(--fz-hdr-h) + 10px);
	z-index: 4;
	margin: calc(clamp(26px, 4.4vw, 52px) * -1) calc(clamp(26px, 4.4vw, 52px) * -1)
		clamp(24px, 3.2vw, 34px);
	padding: 12px clamp(26px, 4.4vw, 52px);
	background: var(--fz-white);
	border-bottom: 1px solid var(--fz-border);
	border-radius: var(--wp--custom--radius--panel) var(--wp--custom--radius--panel) 0 0;
}

/* Connecte, l'en-tete descend de la hauteur de la barre d'administration. */
.admin-bar .fzc-prog--page {
	top: calc(var(--fz-hdr-h) + var(--wp-admin--admin-bar--height, 32px) + 10px);
}
/*
 * ... mais sous 782 px cette barre n'est plus fixe : elle defile avec la
 * page, et l'en-tete reprend le haut de l'ecran. Meme raison qu'au §1.
 */
@media screen and (max-width: 782px) {
	.admin-bar .fzc-prog--page { top: calc(var(--fz-hdr-h) + 10px); }
}

/* --- Dans le panneau : la bande partagee avec « × Fermer » ------------- */

.fzc-prog--bar {
	padding-block: 1px;
}

/* --- La version compacte ---------------------------------------------- */

/*
 * Deux situations la demandent, et elles n'ont rien a voir l'une avec
 * l'autre :
 *
 *   - le panneau, des que le contenu passe sous la bande : l'indicateur
 *     s'efface au profit du formulaire, sans jamais disparaitre ;
 *   - toute largeur inferieure a 1024 px dans le panneau, et 768 px partout :
 *     cinq intitules compresses sur un telephone ne sont lisibles pour
 *     personne. « 3/5 · Quelques precisions » l'est.
 *
 * Elle conserve toujours les deux choses qui comptent : ou l'on se trouve,
 * et combien d'etapes compte le parcours.
 */
@media (max-width: 1024px) {
	.fzc-prog--bar .fzc-prog__full { display: none; }
	.fzc-prog--bar .fzc-prog__compact { display: inline; }
	.fzc-prog--bar .fzc-prog__name { display: none; }
	.fzc-prog--bar .fzc-prog__step { flex: 1 1 0; }
}

.fzc-ov__panel.is-scrolled .fzc-prog--bar .fzc-prog__full { display: none; }
.fzc-ov__panel.is-scrolled .fzc-prog--bar .fzc-prog__compact { display: inline; }
.fzc-ov__panel.is-scrolled .fzc-prog--bar .fzc-prog__name { display: none; }
.fzc-ov__panel.is-scrolled .fzc-prog--bar .fzc-prog__step { flex: 1 1 0; }
.fzc-ov__panel.is-scrolled .fzc-prog--bar .fzc-prog__steps { margin-top: 6px; }

@media (max-width: 768px) {
	.fzc-prog__full { display: none; }
	.fzc-prog__compact { display: inline; }
	.fzc-prog__name { display: none; }
	.fzc-prog__step { flex: 1 1 0; }
	.fzc-prog__step + .fzc-prog__step::before { margin: 0 5px; min-width: 8px; }
	.fzc-prog__dot { width: 13px; height: 13px; background-size: 8px 8px; }
	.fzc-prog__head { font-size: 0.75rem; }
	.fzc-prog__steps { margin-top: 6px; }

	/*
	 * Au telephone, la bande doit rendre au formulaire chaque pixel qu'elle
	 * ne merite pas — clavier virtuel ouvert, la hauteur utile fond.
	 */
	.fzc-prog--page {
		margin-bottom: clamp(20px, 5vw, 26px);
		padding-top: 9px;
		padding-bottom: 9px;
		top: calc(var(--fz-hdr-h) + 6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fzc-prog__dot,
	.fzc-prog__step + .fzc-prog__step::before { transition: none; }
	.fzc-prog__step.is-current .fzc-prog__dot { transform: none; }
}

/* ---------- 25. Contact V3 — la conversation editoriale --------------- */

/*
 * CONTACT-V3-001. La mecanique du Contact est gelee : un seul formulaire
 * canonique, une seule revelation progressive, une seule progression. Cette
 * section ne touche a RIEN de tout cela. Elle fait entrer le parcours dans
 * la generation visuelle prouvee sur l'Accueil (section 19) puis sur
 * Services (section 20) — et qui s'arretait, jusqu'ici, aux portes du
 * Contact.
 *
 * LE PRINCIPE, ET IL TIENT EN UNE PHRASE : on ne recrit pas les sections
 * 15, 22, 23 et 24 — on leur change de TERRAIN.
 *
 * Ces quatre sections sont ecrites entierement en jetons (`--fz-white`,
 * `--fz-border`, `--fz-muted`, `--fz-ink`). Les redefinir sur les trois
 * racines du Contact — `.fzc-hero`, `.fzc-body`, `.fzc-ov` — suffit a faire
 * passer tout le formulaire du blanc froid a l'ivoire chaud, sans recopier
 * une seule declaration et sans un seul `!important`. Le reste de cette
 * section ne traite plus que ce qu'un jeton ne peut pas dire : la voix
 * serif, la composition, et les quelques surfaces qui doivent devenir du
 * papier pour continuer a interrompre le filet du parcours.
 *
 * LES CINQ DECISIONS.
 *  1. Le Contact quitte la grande feuille blanche. Le fond devient l'ivoire
 *     du site, la feuille disparait comme boite : ce qui donne la
 *     profondeur, ce sont les champs — de vraies surfaces claires posees
 *     sur le papier — et plus une ombre portee.
 *  2. La voix editoriale entre : Fraunces pour le titre de page, les cinq
 *     titres de chapitre, les numeros du fil narratif et la confirmation.
 *     Les libelles de champ restent en DM Sans : c'est la voix
 *     fonctionnelle, et elle doit le rester.
 *  3. Le haut de page passe a gauche, avec le surtitre a bulle et son
 *     filet. Aucun hero marketing : le titre, une phrase, un filet, et le
 *     formulaire commence.
 *  4. La progression devient architecturale — un cheveu d'encre, des
 *     pastilles fines, l'accent bleu reserve a ce qui est REELLEMENT
 *     renseigne. Ni barre de telechargement, ni tunnel.
 *  5. « Je ne sais pas encore exactement ce qu'il me faut » cesse d'etre
 *     une cinquieme carte identique aux quatre autres : elle garde le
 *     systeme (icone, case, etats) mais prend un filet pointille et la voix
 *     serif. C'est une reponse, pas une situation.
 *
 * PORTEE. Tout ce qui suit descend de `.fzc-hero`, `.fzc-body`, `.fzc-ov`
 * ou de `body:has(.fzc-hero)`. Sans la page Contact et sans le panneau
 * immersif dans le document, cette section n'existe pas — l'Accueil,
 * Services, le blog et l'administration ne voient rien.
 */

/* --- 25.1 Le terrain : l'ivoire, et les jetons chauds ------------------ */

/*
 * Les valeurs sont ecrites EN CLAIR, jamais `var(--fz-paper)` ou
 * `var(--fz-mute-w)`. Une variable qui en reference une autre se fige a la
 * valeur calculee la ou elle est declaree (piege releve en THEME-VISUAL-011)
 * et les quatre sections consommatrices deviendraient dependantes de l'ordre
 * de declaration. Les litteraux sont ceux de la section 19 :
 *
 *   #FFFDF8             le blanc chaud des surfaces (panneau Contact, 19)
 *   #1A1917             l'encre chaude        16,4:1 sur l'ivoire
 *   #5C584F             le gris chaud          6,2:1 sur l'ivoire,
 *                                              6,8:1 sur #FFFDF8
 *   rgba(26,25,23,.16)  le filet d'encre  =  `--fz-rule-w`
 *
 * Le gris #6B7280 du theme ne passait PAS AA sur l'ivoire (4,31:1) : le
 * remplacer ici corrige d'un coup tous les textes d'aide, tous les libelles
 * secondaires et toute la progression.
 */
.fzc-hero,
.fzc-body,
.fzc-ov {
	--fz-white: #FFFDF8;
	--fz-ink: #1A1917;
	--fz-muted: #5C584F;
	--fz-border: rgba(26, 25, 23, 0.16);
	--fz-surface: #EAE3D6;
	--fzc-field-radius: 10px;
	--fzc-blue-wash: rgba(37, 99, 235, 0.06);
	--fzc-ring: rgba(37, 99, 235, 0.14);
	/* La feuille n'est plus une boite : elle n'a plus d'ombre a porter. */
	--fzc-lift: none;
	/*
	 * LA MESURE DU CONTACT. Le haut de page et la feuille partagent une
	 * seule colonne : c'est elle qui fait tenir la composition une fois la
	 * feuille devenue transparente. Une valeur unique, deux consommateurs —
	 * ils ne peuvent plus diverger.
	 */
	--fzc-measure: 860px;
}

body:has(.fzc-hero) {
	background: var(--fz-paper);
	color: var(--fz-ink-w);
}
body:has(.fzc-hero) ::selection { background: var(--fz-blue); color: #fff; }

/* --- 25.2 Le haut de page : court, a gauche, editorial ----------------- */

/*
 * Le visiteur est venu ecrire, pas lire une affiche. Le haut de page tient
 * donc en trois elements — surtitre, titre, une phrase — et rend la main au
 * formulaire. Il passe a gauche : centre, il ressemblait a l'en-tete d'un
 * formulaire ; a gauche, il appartient a la meme composition que le reste
 * du site.
 */
.fzc-hero {
	text-align: left;
	padding-top: clamp(2.2rem, 5vw, 3.6rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.2rem);
}
.fzc-hero > .fizze-kicker {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.1rem;
	font-family: var(--fz-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.3;
	color: var(--fz-mute-w);
}
/* La bulle FIZZE : meme signe qu'a l'Accueil, au pied de page et sur Services. */
.fzc-hero > .fizze-kicker::before {
	content: '';
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--fz-blue);
}
.fzc-hero > .fizze-kicker::after {
	content: '';
	flex: 1;
	height: 1px;
	margin-left: 0.6rem;
	background: var(--fz-rule-w);
}
.fzc-hero .fzc-hero__title {
	font-family: var(--fz-serif);
	font-weight: 520;
	font-size: clamp(2.5rem, 5.6vw, 4.2rem);
	line-height: 1.02;
	letter-spacing: -0.033em;
	color: var(--fz-ink-w);
	text-wrap: balance;
}
/*
 * Tous les elements du haut de page prennent la mesure du Contact : ils se
 * calent alors exactement sur le bord gauche de la feuille, et la page n'a
 * plus qu'un seul axe.
 */
.fzc-hero > * { max-width: var(--fzc-measure); }
/*
 * LA PHRASE D'ACCROCHE, ET LE SEUL `!important` DE LA SECTION.
 *
 * WordPress centre en `!important` tout enfant d'un conteneur contraint
 * plus etroit que la mesure du groupe. La phrase garde une vraie mesure de
 * lecture (48ch) : elle etait donc centree sous un titre cale a gauche, et
 * son decalage changeait avec la largeur de la fenetre.
 *
 * La marge gauche reprend donc, a la main, le calcul que WordPress ferait
 * pour la colonne : la phrase se cale sur le meme axe que le titre, quelle
 * que soit la largeur. Sous la mesure, `max()` la ramene a zero.
 */
.fzc-hero > .fzc-hero__lede {
	margin-top: 1.15rem !important;
	margin-bottom: 0 !important;
	margin-left: max(0px, calc((100% - var(--fzc-measure)) / 2)) !important;
	margin-right: auto !important;
	max-width: 48ch;
	font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.1875rem);
	line-height: 1.65;
	color: var(--fz-mute-w);
}
/*
 * Les trois faits ne sont pas un argumentaire : ils repondent aux trois
 * questions qu'on se pose avant d'ecrire a un inconnu. Un filet les separe
 * du titre et annonce le formulaire.
 */
.fzc-hero .fzc-hero__facts {
	justify-content: flex-start;
	gap: 8px 22px;
	margin-top: clamp(1.5rem, 3vw, 2.1rem);
	padding-top: clamp(1rem, 2vw, 1.3rem);
	border-top: 1px solid var(--fz-rule-w);
	font-size: 0.8125rem;
	color: var(--fz-mute-w);
}
/*
 * CONTACT-V3-001-FIX01 : ils ne sont plus que deux.
 *
 * La mention de langue est partie — FIZZE repond dans la langue du site,
 * l'ecrire n'apprenait rien. Deux phrases separees par une gouttiere de
 * 28 px se lisaient comme une seule : un filet les rend a leur statut de
 * garanties distinctes. C'est le meme filet que partout ailleurs, et il
 * marche pour deux elements comme il marcherait pour quatre.
 *
 * Seulement quand ils tiennent sur une ligne : empiles, un filet a gauche
 * ne separerait plus rien.
 */
@media (min-width: 601px) {
	.fzc-hero .fzc-hero__fact + .fzc-hero__fact {
		padding-left: 22px;
		border-left: 1px solid var(--fz-rule-w);
	}
}

/* --- 25.3 La feuille devient une page --------------------------------- */

/*
 * Plus de carte blanche bordee et ombree : le formulaire vit directement
 * sur le papier. La profondeur vient du changement de surface — les champs
 * et les cartes sont clairs, le fond est ivoire — et non d'une ombre.
 */
body:has(.fzc-hero) .fzc-sheet {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	max-width: var(--fzc-measure);
}
body:has(.fzc-hero) .fzc-body { padding-bottom: clamp(3rem, 7vw, 6rem); }

/*
 * Les surfaces qui doivent INTERROMPRE le filet vertical du parcours
 * prennent la couleur du papier, et non plus le blanc : la pastille de
 * chapitre, la note d'envoi et la zone du bouton. Elles masquent le filet
 * exactement comme avant — seule la teinte change.
 */
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-chapter__mark,
:is(.fzc-body, .fzc-ov) .fzc-sheet .frm-fluent-form .fzc-nextwrap,
:is(.fzc-body, .fzc-ov) .fzc-sheet .frm-fluent-form .fzc-submitnote,
:is(.fzc-body, .fzc-ov) .fzc-sheet .frm-fluent-form .ff_submit_btn_wrapper {
	background: var(--fz-paper);
}

/* --- 25.4 Le fil narratif : cinq chapitres ---------------------------- */

/*
 * Les cinq titres portent le recit : ils passent au serif, a l'echelle d'un
 * vrai titre de section, et respirent nettement plus qu'avant. Les numeros
 * deviennent des chiffres graves dans le papier, bleus — le fil vertical
 * les traverse et s'interrompt derriere eux.
 *
 * Ce fil reste LOCAL : il structure le contenu. L'indicateur colle en haut
 * reste GLOBAL : il dit ou l'on en est. Les deux ne se ressemblent pas, et
 * c'est voulu.
 */
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-chapter__title {
	font-family: var(--fz-serif);
	font-weight: 520;
	font-size: clamp(1.5rem, 2.7vw, 2.05rem);
	line-height: 1.06;
	letter-spacing: -0.028em;
	color: var(--fz-ink-w);
	padding-top: 1px;
	text-wrap: balance;
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-chapter__hint {
	margin-top: 0.55rem;
	font-size: 0.96875rem;
	line-height: 1.6;
	color: var(--fz-mute-w);
	max-width: 54ch;
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-chapter__mark {
	top: -1px;
	border: 1px solid var(--fz-rule-w);
	font-family: var(--fz-serif);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--fz-blue-ink);
}

/* La respiration entre chapitres : c'est elle qui fait le rythme narratif. */
:is(.fzc-body, .fzc-ov) .fzc-sheet .ff-el-group + .fzc-chapterwrap { margin-top: clamp(44px, 5.6vw, 72px); }
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-chapterwrap + .ff-el-group { margin-top: 26px; }
:is(.fzc-body, .fzc-ov) .fzc-sheet .ff-el-group + .ff-el-group { margin-top: 24px; }

/* --- 25.5 Les champs : des surfaces claires sur le papier ------------- */

:is(.fzc-body, .fzc-ov) .fzc-sheet .ff-el-input--label label {
	font-size: 0.9375rem;
	color: var(--fz-ink-w);
	margin-bottom: 8px;
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .ff-el-help-message { color: var(--fz-mute-w); }
:is(.fzc-body, .fzc-ov) .fzc-sheet input[type="text"],
:is(.fzc-body, .fzc-ov) .fzc-sheet input[type="email"],
:is(.fzc-body, .fzc-ov) .fzc-sheet input[type="tel"],
:is(.fzc-body, .fzc-ov) .fzc-sheet input[type="url"],
:is(.fzc-body, .fzc-ov) .fzc-sheet textarea {
	border-width: 1px;
	border-color: var(--fz-rule-w);
	padding: 13px 15px;
	color: var(--fz-ink-w);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet input[type="text"]:hover,
:is(.fzc-body, .fzc-ov) .fzc-sheet input[type="email"]:hover,
:is(.fzc-body, .fzc-ov) .fzc-sheet input[type="url"]:hover,
:is(.fzc-body, .fzc-ov) .fzc-sheet textarea:hover { border-color: rgba(26, 25, 23, 0.32); }
:is(.fzc-body, .fzc-ov) .fzc-sheet input[type="text"]:focus,
:is(.fzc-body, .fzc-ov) .fzc-sheet input[type="email"]:focus,
:is(.fzc-body, .fzc-ov) .fzc-sheet input[type="url"]:focus,
:is(.fzc-body, .fzc-ov) .fzc-sheet textarea:focus {
	border-color: var(--fz-blue);
	box-shadow: 0 0 0 4px var(--fzc-ring);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet input::placeholder,
:is(.fzc-body, .fzc-ov) .fzc-sheet textarea::placeholder { color: #8E887C; }

/* --- 25.6 Le recit : le moment central -------------------------------- */

/*
 * C'est le champ qui decide de la qualite d'une demande : c'est la que le
 * visiteur explique sa situation avec ses mots. Il doit donc avoir la taille
 * de ce qu'on lui demande — de la hauteur, de la marge interieure, un corps
 * agreable a ecrire ET a relire, et un focus qui ne laisse aucun doute sur
 * l'endroit ou l'on ecrit.
 */
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-f--description textarea {
	min-height: clamp(190px, 24vw, 250px);
	padding: 18px 20px;
	font-size: 1.0625rem;
	line-height: 1.7;
	border-radius: 14px;
}

/* --- 25.7 Les cartes de situation ------------------------------------- */

/*
 * Le rayon asymetrique — coin superieur gauche vif — est celui de la carte
 * claire du theme (section 17). Les cartes du Contact ne sont donc pas une
 * famille de plus : ce sont les memes cartes, avec un contenu de choix.
 *
 * L'etat choisi ne prend plus un halo exterieur de 3 px : sur le papier il
 * se lisait comme un anneau de focus, et les deux etats devenaient
 * indistinguables au clavier. Il double son filet vers l'INTERIEUR — la
 * carte s'epaissit sans bouger d'un pixel, le focus garde son anneau a lui.
 */
:is(.fzc-body, .fzc-ov) .fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-input--content { gap: 14px; }
:is(.fzc-body, .fzc-ov) .fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label {
	background: var(--fz-white);
	border: 1px solid var(--fz-rule-w);
	border-radius: 0 var(--fz-card-r-lite) var(--fz-card-r-lite) var(--fz-card-r-lite);
	padding: 18px 18px 18px 17px;
	column-gap: 14px;
}
:is(.fzc-body, .fzc-ov) .fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label::before {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	border-color: var(--fz-rule-w);
	background-color: rgba(26, 25, 23, 0.035);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .fzc-choice__t {
	font-size: 1rem;
	color: var(--fz-ink-w);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .fzc-choice__d {
	margin-top: 5px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--fz-mute-w);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label:hover {
	border-color: rgba(37, 99, 235, 0.45);
	background: var(--fz-white);
	transform: translateY(-1px);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label:has(:checked) {
	border-color: var(--fz-blue);
	background: var(--fzc-blue-wash);
	box-shadow: inset 0 0 0 1px var(--fz-blue);
}

/* La case de multi-selection : meme filet chaud que la carte. */
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-f--besoins .ff-el-form-check-label { padding-right: 50px; }
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-f--besoins .ff-el-form-check-label::after {
	top: 18px;
	right: 17px;
	border: 1px solid var(--fz-rule-w);
	border-radius: 6px;
}

/* --- 25.8 « Je ne sais pas encore » : une reponse, pas une situation --- */

/*
 * Elle appartient au meme systeme — meme icone, meme case, memes etats —
 * mais elle ne dit pas la meme chose que les quatre autres. Son filet
 * devient pointille, sa surface reste le papier, et son intitule prend la
 * voix serif : c'est une phrase qu'on prononce, pas une categorie qu'on
 * choisit. Cochee, elle redevient une carte pleine comme les autres : ce
 * qui est choisi se lit toujours de la meme facon.
 */
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-f--besoins .ff-el-form-check:last-child .ff-el-form-check-label {
	align-items: center;
	background: transparent;
	border-style: dashed;
	border-radius: var(--fz-card-r-lite);
	padding-block: 17px;
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-f--besoins .ff-el-form-check:last-child .fzc-choice__t {
	font-family: var(--fz-serif);
	font-weight: 500;
	font-size: 1.0625rem;
	letter-spacing: -0.012em;
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-f--besoins .ff-el-form-check:last-child .ff-el-form-check-label:has(:checked) {
	border-style: solid;
	background: var(--fzc-blue-wash);
}

/* --- 25.9 Le budget --------------------------------------------------- */

/*
 * Le halo qui decoupe le rail derriere chaque palier etait blanc : il
 * devient le papier. Rien d'autre ne change — memes paliers, memes
 * montants, meme champ.
 */
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-f--budget .ff-el-form-check-label::before {
	border-width: 1.5px;
	box-shadow: 0 0 0 5px var(--fz-paper);
}
/* ... sauf « Je ne sais pas encore », hors rail : il n'a rien a decouper. */
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-f--budget .ff-el-form-check:last-child .ff-el-form-check-label::before {
	box-shadow: none;
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-f--budget .ff-el-form-check:last-child .ff-el-form-check-label {
	border-width: 1px;
	border-color: var(--fz-rule-w);
}

/* --- 25.10 Les coordonnees et l'envoi --------------------------------- */

/*
 * Apres cinq chapitres, la derniere etape doit se voir finir. Nom et
 * entreprise passent cote a cote — la formule de largeur est celle,
 * eprouvee, de la paire Prenom / Nom de la section 15 — et l'adresse
 * reprend seule la ligne suivante. Trois lignes, et c'est termine.
 */
@media (min-width: 760px) {
	:is(.fzc-body, .fzc-ov) .fzc-sheet .frm-fluent-form .fzc-f--nom,
	:is(.fzc-body, .fzc-ov) .fzc-sheet .frm-fluent-form .fzc-f--entreprise {
		float: left;
		width: calc((100% - var(--fzc-rail) - var(--fzc-rail-gap) - 14px) / 2);
	}
	:is(.fzc-body, .fzc-ov) .fzc-sheet .frm-fluent-form .fzc-f--entreprise { margin-left: 12px; }
	:is(.fzc-body, .fzc-ov) .fzc-sheet .frm-fluent-form .fzc-f--email { clear: both; }
}

:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-submitnote__text { color: var(--fz-mute-w); }
:is(.fzc-body, .fzc-ov) .fzc-sheet .ff_submit_btn_wrapper { padding-top: 22px; }
:is(.fzc-body, .fzc-ov) .fzc-sheet .ff-btn-submit {
	font-size: 1.0625rem;
	padding: 17px 34px;
	box-shadow: 0 10px 24px -14px rgba(37, 99, 235, 0.55);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .ff-btn-submit:hover {
	box-shadow: 0 14px 30px -14px rgba(29, 78, 216, 0.6);
}

/* --- 25.11 La confirmation -------------------------------------------- */

/*
 * Le conteneur de confirmation du plugin portait encore SON ombre — la
 * section 15 lui avait retire fond, filet et marge interieure, mais pas
 * `box-shadow`. Invisible sur le blanc, elle dessinait sur l'ivoire le
 * fantome exact de l'ancienne feuille : un cadre de 860 px autour du
 * remerciement. C'est le dernier endroit ou Fluent Forms se voyait.
 */
:is(.fzc-body, .fzc-ov) .fzc-sheet .ff-message-success { box-shadow: none; }

:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done { padding-block: clamp(1rem, 3vw, 2.5rem); }
/*
 * « Merci. » est un SIGNAL, pas un second titre : il reste nettement sous
 * l'echelle de « On a de quoi commencer. », prend la voix serif du site et
 * l'encre bleue. Il ouvre la phrase que le titre termine.
 */
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done__hi {
	font-family: var(--fz-serif);
	font-weight: 520;
	letter-spacing: -0.02em;
	color: var(--fz-blue-ink);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done__title {
	font-family: var(--fz-serif);
	font-weight: 520;
	letter-spacing: -0.03em;
	line-height: 1.04;
	color: var(--fz-ink-w);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done__lead,
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done__note { color: var(--fz-mute-w); }
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done__lead strong { color: var(--fz-ink-w); }
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done__signature { color: var(--fz-blue-ink); }

/* La ligne de cloture : deux filets d'encre, et la bulle FIZZE en tete. */
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done__next {
	border-top-color: var(--fz-rule-w);
	border-bottom-color: var(--fz-rule-w);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done__next-lbl {
	font-family: var(--fz-body);
	font-weight: 600;
	color: var(--fz-mute-w);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done__next-lbl::before {
	content: '';
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	margin-right: 0.6rem;
	vertical-align: 0.06em;
	border-radius: 50%;
	background: var(--fz-blue);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done__next-txt { color: var(--fz-ink-w); }

/* Les deux sorties : la pilule a filet bleu, et le lien souligne. */
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done__go {
	border-color: rgba(37, 99, 235, 0.45);
	color: var(--fz-blue-ink);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done__go:hover {
	border-color: var(--fz-blue);
	background: var(--fzc-blue-wash);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done__home {
	color: var(--fz-mute-w);
	text-decoration-color: var(--fz-rule-w);
}
:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-done__home:hover {
	color: var(--fz-ink-w);
	text-decoration-color: currentColor;
}

/* --- 25.11 bis L'etat de succes de la page ---------------------------- */

/*
 * CONTACT-V3-001-FIX02. Une fois la demande partie, le haut de page ne doit
 * plus s'adresser a quelqu'un qui n'a pas encore ecrit.
 *
 * Le titre reste — c'est le titre de la page, et « Parlons de votre projet. »
 * suivi de « Merci. » se lit comme la suite d'une meme conversation. Le
 * surtitre reste aussi : il situe la page. Disparaissent en revanche les deux
 * contenus qui preparaient au formulaire : la phrase d'accroche, et les trois
 * — desormais deux — faits pratiques.
 *
 * `:has()` fait tout le travail : la confirmation vit dans `.fzc-body`, qui
 * est un FRERE de `.fzc-hero`, hors de portee d'un selecteur de voisinage.
 * Remonte au `body`, la relation redevient exprimable, et rien n'est masque
 * tant que `.fzc-done` n'existe pas. Aucun script : le masquage suit
 * exactement la presence de la confirmation dans le document.
 *
 * `body:has(.fzc-hero)` garde la regle sur la page Contact : dans le panneau
 * immersif, ou `.fzc-done` apparait aussi, il n'y a pas de haut de page a
 * masquer.
 */
body:has(.fzc-hero):has(.fzc-done) .fzc-hero__lede,
body:has(.fzc-hero):has(.fzc-done) .fzc-hero__facts {
	display: none;
}
/*
 * Le haut de page a perdu deux tiers de sa hauteur : sans cela, il resterait
 * l'espace reserve a ce qui n'est plus la.
 *
 * Le filet qui separait le haut de page du formulaire etait porte par les
 * faits pratiques : il est parti avec eux. La feuille le reprend — a la
 * MEME mesure, donc sur le meme axe que le titre — et l'ecart entre les deux
 * titres redevient une respiration voulue, pas un reste.
 */
body:has(.fzc-hero):has(.fzc-done) .fzc-hero {
	padding-bottom: clamp(1.5rem, 3vw, 2.2rem);
}
body:has(.fzc-hero):has(.fzc-done) .fzc-body .fzc-sheet {
	border-top: 1px solid var(--fz-rule-w);
	padding-top: clamp(1.9rem, 4vw, 3rem);
}
body:has(.fzc-hero):has(.fzc-done) .fzc-body .fzc-sheet .fzc-done {
	padding-top: 0;
}
/*
 * Le panneau a son propre haut de page, et le meme defaut : la phrase
 * d'accueil contextualisee se termine par « vous pouvez modifier ou
 * completer votre choix » — une invitation qui n'a plus d'objet une fois la
 * demande partie. Elle disparait donc comme celle de la page ; le titre du
 * panneau et son filet restent, ils situent la conversation.
 */
.fzc-ov:has(.fzc-done) .fzc-ov__lede {
	display: none;
}

/* --- 25.12 La sortie de secours --------------------------------------- */

.fzc-body .fzc-direct {
	background: rgba(26, 25, 23, 0.035);
	border: 1px solid var(--fz-rule-w);
	border-radius: 0 var(--fz-card-r-lite) var(--fz-card-r-lite) var(--fz-card-r-lite);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}
.fzc-body .fzc-direct__title {
	font-family: var(--fz-serif);
	font-weight: 520;
	letter-spacing: -0.022em;
	color: var(--fz-ink-w);
}
.fzc-body .fzc-direct > .fzc-direct__text { color: var(--fz-mute-w); }
.fzc-body .fzc-direct__mail a {
	background: transparent;
	border: 1px solid var(--fz-rule-w);
	color: var(--fz-blue-ink);
}
.fzc-body .fzc-direct__mail a:hover {
	border-color: rgba(37, 99, 235, 0.45);
	background: var(--fzc-blue-wash);
}

/* --- 25.13 La progression : fine, architecturale ---------------------- */

/*
 * La logique ne bouge pas d'une ligne : `current` dit ou l'on est, `level`
 * ce qui est ouvert, `done[]` ce qui est reellement renseigne — et la coche
 * ne signifie jamais « vous avez defile jusque-la ». Seule la representation
 * change.
 *
 * Le trait passe de 2 px a un cheveu : ce n'est pas une barre de
 * telechargement, c'est le meme filet que partout ailleurs sur le site. Le
 * bleu n'y apparait que derriere une etape REELLEMENT remplie.
 */
:is(.fzc-body, .fzc-ov) .fzc-prog__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--fz-body);
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fz-mute-w);
}
/* La bulle, encore : c'est elle qui dit que ce bandeau est de FIZZE. */
:is(.fzc-body, .fzc-ov) .fzc-prog__head::before {
	content: '';
	flex: none;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--fz-blue);
}
:is(.fzc-body, .fzc-ov) .fzc-prog__step {
	font-size: 0.6875rem;
	color: var(--fz-mute-w);
}
:is(.fzc-body, .fzc-ov) .fzc-prog__step + .fzc-prog__step::before {
	height: 1px;
	border-radius: 0;
	background: var(--fz-rule-w);
}
:is(.fzc-body, .fzc-ov) .fzc-prog__step.is-done + .fzc-prog__step::before { background: var(--fz-blue); }
:is(.fzc-body, .fzc-ov) .fzc-prog__dot {
	width: 12px;
	height: 12px;
	border-width: 1.5px;
	border-color: var(--fz-rule-w);
	background-color: var(--fz-paper);
	background-size: 8px 8px;
}
:is(.fzc-body, .fzc-ov) .fzc-prog__step.is-current .fzc-prog__dot { box-shadow: 0 0 0 3px var(--fzc-ring); }
:is(.fzc-body, .fzc-ov) .fzc-prog__step.is-current,
:is(.fzc-body, .fzc-ov) .fzc-prog__step.is-done { color: var(--fz-ink-w); }

/* La bande collee de `/contact/` : du papier, un filet, rien de plus. */
.fzc-body .fzc-prog--page {
	margin: 0 -12px clamp(24px, 3.2vw, 32px);
	padding: 11px 12px;
	background: var(--fz-paper);
	border-radius: 0;
	border-bottom: 1px solid var(--fz-rule-w);
}
/*
 * L'en-tete se RESSERRE une fois collee (section 19.2) : elle devient plus
 * courte que `--fz-hdr-h`, et il restait une vingtaine de pixels entre son
 * bas et le haut de la bande — une meurtriere par laquelle les titres de
 * chapitre defilaient un a un. Aucune valeur fixe ne peut refermer une
 * hauteur qui change : la bande porte donc une avancee de papier au-dessus
 * d'elle, qui suit sa position collee quoi qu'il arrive.
 */
.fzc-body .fzc-prog--page::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 26px;
	background: var(--fz-paper);
}

/* --- 25.14 Le panneau immersif ---------------------------------------- */

/*
 * Le panneau cesse d'etre une fenetre blanche posee sur la page : il prend
 * le papier du site, et le voile passe a l'anthracite. Ce qui s'ouvre n'est
 * pas une modale d'application — c'est une couche de conversation FIZZE,
 * avec Services qui continue d'exister derriere.
 */
.fzc-ov::before { background: rgba(21, 22, 26, 0.62); }
.fzc-ov .fzc-ov__panel {
	background: var(--fz-paper);
	box-shadow: -30px 0 90px -50px rgba(8, 10, 20, 0.8);
}
.fzc-ov .fzc-ov__bar { background: var(--fz-paper); }
.fzc-ov .fzc-ov__panel.is-scrolled .fzc-ov__bar {
	border-bottom-color: var(--fz-rule-w);
	box-shadow: none;
}
.fzc-ov .fzc-ov__intro { border-bottom-color: var(--fz-rule-w); }
.fzc-ov .fzc-ov__title {
	font-family: var(--fz-serif);
	font-weight: 520;
	font-size: clamp(1.9rem, 3.2vw, 2.7rem);
	line-height: 1.03;
	letter-spacing: -0.033em;
	color: var(--fz-ink-w);
	text-wrap: balance;
}

/*
 * « × Fermer » reste ecrit, reste a droite, reste haut de 44 px. Il perd
 * seulement son fond plein : sur le papier, un filet suffit — et la
 * progression, a gauche, redevient l'element dominant de la bande.
 */
.fzc-ov .fzc-ov__close {
	background: transparent;
	border: 1px solid var(--fz-rule-w);
	font-size: 0.875rem;
	color: var(--fz-ink-w);
	/*
	 * CONTACT-V3-001-FIX01 : la bande est en `space-between`. Une fois la
	 * demande envoyee, l'indicateur de progression se retire — et la
	 * commande, restee seule, sautait de la droite a la gauche au moment
	 * meme ou le visiteur cherche la sortie. Elle garde sa place.
	 */
	margin-left: auto;
}
.fzc-ov .fzc-ov__close:hover {
	border-color: rgba(26, 25, 23, 0.34);
	background: rgba(26, 25, 23, 0.05);
	color: var(--fz-ink-w);
}
.fzc-ov .fzc-ov__close.is-nudged {
	border-color: var(--fz-blue);
	background: var(--fzc-blue-wash);
}

/* --- 25.15 Responsive -------------------------------------------------- */

@media (max-width: 768px) {
	.fzc-body .fzc-prog--page {
		margin-left: -12px;
		margin-right: -12px;
		padding-top: 9px;
		padding-bottom: 9px;
	}
	:is(.fzc-body, .fzc-ov) .fzc-sheet :is(.fzc-f--projet, .fzc-f--besoins) .ff-el-form-check-label {
		padding: 16px 16px 16px 15px;
	}
	:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-f--besoins .ff-el-form-check-label { padding-right: 48px; }
	:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-f--besoins .ff-el-form-check-label::after { top: 16px; right: 15px; }
	:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-f--description textarea { min-height: 180px; padding: 16px; }
}

/*
 * Sous 600 px la colonne du parcours disparait (section 15) : le chiffre
 * repasse au-dessus du titre, et il n'a plus de filet a interrompre.
 */
@media (max-width: 600px) {
	:is(.fzc-body, .fzc-ov) .fzc-sheet .fzc-chapter__mark { top: 0; font-size: 0.9375rem; }
	:is(.fzc-body, .fzc-ov) .fzc-sheet .ff-el-group + .fzc-chapterwrap { margin-top: clamp(36px, 8vw, 48px); }
	.fzc-hero .fzc-hero__title { font-size: clamp(2.15rem, 9.5vw, 2.9rem); }
}

/* ---------- 26. La page 404 ------------------------------------------- */

/*
 * 404-V3-001. Se tromper de chemin ne doit pas donner l'impression d'etre
 * sorti du site. La page d'erreur reprend donc exactement le terrain du
 * Contact V3 — l'ivoire, l'encre chaude, Fraunces, le filet — et la meme
 * mesure de colonne. L'en-tete et le pied de page sont ceux du site : le
 * gabarit les appelle, il ne les recopie pas.
 *
 * Elle dit trois choses, dans cet ordre : ou l'on est (404), ce qui s'est
 * passe, et les deux endroits ou aller. Rien de plus : une erreur n'est pas
 * un moment pour proposer quoi que ce soit.
 *
 * AUCUNE MASCOTTE. La page se tient entierement par la typographie et les
 * filets — elle ne depend d'aucun arbitrage en cours sur Fino.
 *
 * Tout descend de `.fizze-404` ou de `body:has(.fizze-404)` : sans le
 * gabarit d'erreur dans le document, cette section n'existe pas.
 *
 * COUT : zero. Pas de script, pas d'image, pas de police de plus — la page
 * n'utilise que ce que le site charge deja.
 */

/*
 * Memes litteraux qu'en section 25, et pour la meme raison : une variable
 * qui en reference une autre se fige a la valeur calculee la ou elle est
 * declaree. Le gris chaud #5C584F donne 6,2:1 sur l'ivoire, la ou le gris du
 * theme n'en donnait que 4,3.
 */
.fizze-404 {
	--fz-ink: #1A1917;
	--fz-muted: #5C584F;
	--fz-border: rgba(26, 25, 23, 0.16);
	--fizze-404-measure: 860px;
}

body:has(.fizze-404) {
	background: var(--fz-paper);
	color: var(--fz-ink-w);
}
body:has(.fizze-404) ::selection { background: var(--fz-blue); color: #fff; }

.fizze-404 {
	padding-top: clamp(3.5rem, 9vw, 7rem);
	padding-bottom: clamp(4rem, 10vw, 8rem);
	text-align: left;
}
.fizze-404 > * { max-width: var(--fizze-404-measure); }

/* --- Le repere -------------------------------------------------------- */

/*
 * « 404 » n'est pas un titre : c'est une coordonnee. Il prend donc la forme
 * des micro-libelles du site — bulle bleue, capitales espacees, filet tire
 * jusqu'au bord de la colonne.
 */
.fizze-404 .fizze-404__lbl {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.2rem;
	font-family: var(--fz-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.3;
	color: var(--fz-mute-w);
}
.fizze-404 .fizze-404__lbl::before {
	content: '';
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--fz-blue);
}
.fizze-404 .fizze-404__lbl::after {
	content: '';
	flex: 1;
	height: 1px;
	margin-left: 0.6rem;
	background: var(--fz-rule-w);
}

/* --- Le titre et la phrase -------------------------------------------- */

.fizze-404 .fizze-404__title {
	margin: 0;
	font-family: var(--fz-serif);
	font-weight: 520;
	font-size: clamp(2.5rem, 5.6vw, 4.2rem);
	line-height: 1.02;
	letter-spacing: -0.033em;
	color: var(--fz-ink-w);
	text-wrap: balance;
}
/*
 * Meme piege qu'au haut de page du Contact (section 25.2) : WordPress centre
 * en `!important` tout enfant d'un conteneur contraint plus etroit que la
 * mesure du groupe. La phrase garde une mesure de lecture, sa marge gauche
 * refait donc a la main le calcul de la colonne — elle se cale sur le meme
 * axe que le titre, quelle que soit la largeur.
 */
.fizze-404 .fizze-404__lede {
	margin-top: 1.2rem !important;
	margin-bottom: 0 !important;
	margin-left: max(0px, calc((100% - var(--fizze-404-measure)) / 2)) !important;
	margin-right: auto !important;
	max-width: 52ch;
	font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.1875rem);
	line-height: 1.65;
	color: var(--fz-mute-w);
}

/* --- Les deux sorties -------------------------------------------------- */

/*
 * Meme grammaire qu'a la fin du parcours Contact, et pour la meme raison :
 * une sortie principale en pilule a filet, une sortie secondaire en lien
 * souligne (le CTA secondaire du theme, section 3). La plupart des visiteurs
 * veulent simplement reprendre leur navigation — Contact est une aide, pas la
 * destination imposee de toute erreur.
 *
 * Le filet au-dessus separe les actions du texte sans ajouter de surface.
 */
.fizze-404 .fizze-404__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: clamp(1.6rem, 3vw, 2.2rem);
	border-top: 1px solid var(--fz-rule-w);
}
.fizze-404 .fizze-404__go {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.8rem 1.6rem;
	box-sizing: border-box;
	border: 1.5px solid rgba(37, 99, 235, 0.45);
	border-radius: var(--wp--custom--radius--pill);
	background: #FFFDF8;
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--fz-blue-ink);
	text-decoration: none;
	transition: border-color 0.16s var(--fz-ease), background 0.16s var(--fz-ease);
}
.fizze-404 .fizze-404__go:hover {
	border-color: var(--fz-blue);
	background: rgba(37, 99, 235, 0.06);
}
.fizze-404 .fizze-404__alt {
	display: inline-flex;
	align-items: center;
	/* Le lien reste une cible tactile pleine, meme sans pilule. */
	min-height: 44px;
	padding: 0 0.25rem;
	font-family: var(--fz-head);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--fz-mute-w);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: var(--fz-rule-w);
	transition: color 0.16s var(--fz-ease), text-decoration-color 0.16s var(--fz-ease);
}
.fizze-404 .fizze-404__alt:hover {
	color: var(--fz-ink-w);
	text-decoration-color: currentColor;
}
.fizze-404 .fizze-404__go:focus-visible,
.fizze-404 .fizze-404__alt:focus-visible {
	outline: 3px solid var(--fz-blue);
	outline-offset: 3px;
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 600px) {
	.fizze-404 { padding-top: clamp(2.5rem, 9vw, 3.5rem); }
	.fizze-404 .fizze-404__title { font-size: clamp(2.15rem, 9.5vw, 2.9rem); }
	/*
	 * Empilees, les deux sorties gardent leur hierarchie : la pilule prend
	 * la largeur, le lien reste un lien — jamais un second bouton pleine
	 * largeur, qui les mettrait a egalite.
	 */
	.fizze-404 .fizze-404__actions { flex-direction: column; align-items: flex-start; }
	.fizze-404 .fizze-404__go { width: 100%; justify-content: center; }
}

/* ==========================================================================
   26. MON COMPTE — l'entree privee de FIZZE (SEC-AUTH-001)
   ==========================================================================

 * Gabarit `page-mon-compte`, balisage emis par le plugin fizze-auth
 * (`.fizze-acct*`). Le plugin porte la logique, cette section la presentation.
 *
 * MEME LANGAGE QUE LA 404 ET LE CONTACT : ivoire, encre chaude, micro-libelle
 * a bulle bleue, titre en Fraunces, filets fins, une pilule bleue. Pas de
 * carte : le formulaire se tient sur la page, ses champs sont des filets.
 *
 * Tout descend de `.fizze-acct` ou de `body:has(.fizze-acct)`. Ajout seul :
 * aucune regle existante n'est modifiee. Memes litteraux qu'en section 25
 * (une variable qui en reference une autre se fige a la valeur declaree).
 */

.fizze-acct {
	--fz-ink: #1A1917;
	--fz-muted: #5C584F;
	--fz-border: rgba(26, 25, 23, 0.16);
	--fizze-acct-form: 28rem;
}

body:has(.fizze-acct) {
	background: var(--fz-paper);
	color: var(--fz-ink-w);
}
body:has(.fizze-acct) ::selection { background: var(--fz-blue); color: #fff; }

.fizze-acct {
	padding-top: clamp(3.5rem, 9vw, 7rem);
	padding-bottom: clamp(4rem, 10vw, 8rem);
	text-align: left;
}
.fizze-acct .fizze-acct__in { max-width: 860px; }

/* --- Repere, titre, phrase ------------------------------------------- */

.fizze-acct .fizze-acct__lbl {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.2rem;
	font-family: var(--fz-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--fz-mute-w);
}
.fizze-acct .fizze-acct__lbl::before {
	content: '';
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--fz-blue);
}
.fizze-acct .fizze-acct__lbl::after {
	content: '';
	flex: 1;
	height: 1px;
	margin-left: 0.6rem;
	background: var(--fz-rule-w);
}

.fizze-acct .fizze-acct__title {
	margin: 0;
	font-family: var(--fz-serif);
	font-weight: 520;
	font-size: clamp(2.5rem, 5.6vw, 4.2rem);
	line-height: 1.02;
	letter-spacing: -0.033em;
	color: var(--fz-ink-w);
	text-wrap: balance;
}
.fizze-acct .fizze-acct__lede {
	margin: 1.2rem 0 0;
	max-width: 46ch;
	font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.1875rem);
	line-height: 1.65;
	color: var(--fz-mute-w);
}

/* --- Messages ---------------------------------------------------------- */

.fizze-acct .fizze-acct__msg {
	margin: 1.8rem 0 0;
	max-width: var(--fizze-acct-form);
	padding: 0.15rem 0 0.15rem 1rem;
	border-left: 2px solid var(--fz-blue);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--fz-ink-w);
}
/* Un rouge chaud, jamais le rouge d'alerte generique : AA sur l'ivoire (7:1). */
.fizze-acct .fizze-acct__msg--error { border-left-color: #A32A1C; color: #8A2217; }
.fizze-acct .fizze-acct__msg--success { border-left-color: #2F6B3F; }

/* --- Formulaire -------------------------------------------------------- */

.fizze-acct .fizze-acct__form {
	max-width: var(--fizze-acct-form);
	margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}
.fizze-acct .fizze-acct__msg + .fizze-acct__form { margin-top: 1.4rem; }

.fizze-acct .fizze-acct__field {
	position: relative;
	margin: 0 0 1.5rem;
}
.fizze-acct .fizze-acct__label {
	display: block;
	margin: 0 0 0.2rem;
	font-family: var(--fz-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--fz-mute-w);
}
.fizze-acct .fizze-acct__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	margin: 0;
	padding: 0.55rem 0;
	border: 0;
	border-bottom: 1.5px solid rgba(26, 25, 23, 0.4);
	border-radius: 0;
	background: transparent;
	font-family: var(--fz-body);
	/* 16px minimum : iOS ne zoome pas au focus. */
	font-size: 1.0625rem;
	color: var(--fz-ink-w);
	transition: border-color 0.16s var(--fz-ease), box-shadow 0.16s var(--fz-ease);
}
.fizze-acct .fizze-acct__input:hover { border-bottom-color: var(--fz-ink-w); }
.fizze-acct .fizze-acct__input:focus-visible {
	outline: none;
	border-bottom-color: var(--fz-blue);
	box-shadow: 0 1.5px 0 0 var(--fz-blue);
}
.fizze-acct .fizze-acct__input[aria-invalid="true"] { border-bottom-color: #A32A1C; }
.fizze-acct .fizze-acct__field.has-reveal .fizze-acct__input { padding-right: 5.5rem; }

.fizze-acct .fizze-acct__reveal {
	position: absolute;
	right: 0;
	bottom: 0;
	min-height: 48px;
	padding: 0 0.1rem 0 0.75rem;
	border: 0;
	background: transparent;
	font-family: var(--fz-head);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--fz-blue-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	cursor: pointer;
}
.fizze-acct .fizze-acct__reveal:focus-visible {
	outline: 3px solid var(--fz-blue);
	outline-offset: 2px;
}

.fizze-acct .fizze-acct__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem 1.5rem;
	margin: -0.4rem 0 0;
}
.fizze-acct .fizze-acct__check {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 44px;
	font-size: 0.9375rem;
	color: var(--fz-mute-w);
	cursor: pointer;
}
.fizze-acct .fizze-acct__check input {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--fz-blue);
}
.fizze-acct .fizze-acct__check input:focus-visible {
	outline: 3px solid var(--fz-blue);
	outline-offset: 3px;
}

/* --- Actions : meme grammaire que la 404 -------------------------------- */

.fizze-acct .fizze-acct__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
	margin-top: clamp(1.4rem, 3vw, 2rem);
}
.fizze-acct .fizze-acct__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.8rem 1.9rem;
	box-sizing: border-box;
	border: 1.5px solid var(--fz-blue);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--fz-blue);
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 0.9375rem;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.16s var(--fz-ease), border-color 0.16s var(--fz-ease);
}
.fizze-acct .fizze-acct__go:hover {
	background: var(--fz-blue-hover);
	border-color: var(--fz-blue-hover);
}
.fizze-acct .fizze-acct__alt {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.25rem;
	font-family: var(--fz-head);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--fz-mute-w);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: var(--fz-rule-w);
	transition: color 0.16s var(--fz-ease), text-decoration-color 0.16s var(--fz-ease);
}
.fizze-acct .fizze-acct__alt:hover {
	color: var(--fz-ink-w);
	text-decoration-color: currentColor;
}
.fizze-acct .fizze-acct__go:focus-visible,
.fizze-acct .fizze-acct__alt:focus-visible {
	outline: 3px solid var(--fz-blue);
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.fizze-acct { padding-top: clamp(2.5rem, 9vw, 3.5rem); }
	.fizze-acct .fizze-acct__title { font-size: clamp(2.15rem, 9.5vw, 2.9rem); }
	.fizze-acct .fizze-acct__form .fizze-acct__go { width: 100%; }
	.fizze-acct .fizze-acct__form .fizze-acct__actions { flex-direction: column; align-items: stretch; }
	.fizze-acct .fizze-acct__form .fizze-acct__alt { justify-content: center; }
}

/* ---------- 26.1 L'entree Connexion / Mon compte de l'en-tete -----------
 *
 * Bloc `fizze/account-link` du plugin fizze-auth. Un lien de navigation, pas
 * un second CTA : meme graisse et meme taille que les destinations de la
 * barre, memes regimes de couleur (accueil, page a hero, barre collee).
 * Dans le tiroir mobile, fizze.js le deplace avec la langue et le CTA.
 */
.fizze-hdr .fizze-hdr__login { display: flex; align-items: center; }
.fizze-hdr .fizze-hdr__login-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.15rem;
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--fz-ink-w);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s var(--fz-ease);
}
.fizze-hdr .fizze-hdr__login-link:hover { color: var(--fz-blue); }
.fizze-hdr__identity { position: relative; }
.fizze-hdr .fizze-hdr__identity-trigger { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--fz-ink-w); font: 500 0.9375rem var(--fz-body); cursor: pointer; white-space: nowrap; }
.fizze-hdr__identity-trigger > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fizze-hdr .fizze-hdr__identity-trigger:hover { color: var(--fz-blue); }
.fizze-hdr .fizze-hdr__identity-trigger:focus-visible, .fizze-hdr .fizze-hdr__identity-menu a:focus-visible { outline: 2px solid var(--fz-blue); outline-offset: 3px; }
.fizze-hdr__avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #f7f1e8; color: #111827; font-size: 13px; font-weight: 650; object-fit: cover; }
.fizze-hdr__identity-menu { display: none; position: absolute; z-index: 100; top: 100%; right: 0; width: min(320px, calc(100vw - 32px)); padding: var(--fz-header-dropdown-padding); border: 1px solid var(--fz-header-dropdown-border); border-radius: var(--fz-header-dropdown-radius); background: #fff; box-shadow: var(--fz-header-dropdown-shadow); color: #111827; }
.fizze-hdr__identity[data-open] .fizze-hdr__identity-menu { display: grid; }
.fizze-hdr__identity-summary { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; overflow-wrap: anywhere; }
.fizze-hdr__identity-summary strong, .fizze-hdr__identity-summary small { display: block; }
.fizze-hdr__identity-summary small { color: #5b6472; font-size: 12px; }
.fizze-hdr__identity-menu a { display: block; padding: 10px 8px; border-radius: 7px; color: #111827; text-decoration: none; }
.fizze-hdr__identity-menu a:hover { background: var(--fz-header-dropdown-item-hover); color: #111827; }
.fizze-hdr__identity-menu .fizze-hdr__identity-logout { border-top: 1px solid #e3e0d9; border-radius: 0; margin-top: 4px; }
.fizze-hdr .fizze-hdr__login-link,
.fizze-hdr .fizze-hdr__identity-trigger {
	border: 1px solid rgba(17, 24, 39, .18);
	border-radius: 9px;
	background: rgba(17, 24, 39, .035);
	transition: color .2s var(--fz-ease), border-color .2s var(--fz-ease), background-color .2s var(--fz-ease);
}
.fizze-hdr .fizze-hdr__login-link { box-sizing: border-box; height: 40px; min-height: 40px; padding: 3px 14px; }
.fizze-hdr .fizze-hdr__identity-trigger { min-height: 40px; padding: 3px 12px 3px 5px; }
.fizze-hdr .fizze-hdr__identity-trigger .fizze-hdr__avatar { width: 32px; height: 32px; }
.fizze-hdr .fizze-hdr__login-link:hover,
.fizze-hdr .fizze-hdr__identity-trigger:hover,
.fizze-hdr__identity[data-open] .fizze-hdr__identity-trigger { border-color: var(--fz-blue); background: rgba(37, 99, 235, .06); }
.fizze-hdr__identity-summary { padding: 8px 8px 14px; border-bottom: 1px solid #e3e0d9; }
.fizze-hdr__identity-summary strong { font-size: 14px; line-height: 1.35; }
.fizze-hdr__identity-summary small { margin-top: 3px; line-height: 1.4; }
.fizze-hdr__identity-actions { display: grid; gap: 2px; padding-top: 8px; }
.fizze-hdr__identity-menu .fizze-hdr__identity-logout { margin-top: 0; border-top: 0; color: #5b6472; }
body:not(.home):has(.fizze-hero) .fizze-hdr:not(.is-stuck) .fizze-hdr__identity-trigger,
.fizze-has-hero:not(.home) .fizze-hdr:not(.is-stuck) .fizze-hdr__identity-trigger { color: var(--fz-on-navy); }
.fizze-hdr .fizze-hdr__login-link:focus-visible { outline: 2px solid var(--fz-blue); outline-offset: 3px; border-radius: 4px; }
body:not(.home):has(.fizze-hero) .fizze-hdr:not(.is-stuck) .fizze-hdr__login-link,
.fizze-has-hero:not(.home) .fizze-hdr:not(.is-stuck) .fizze-hdr__login-link { color: var(--fz-on-navy); }
body:not(.home):has(.fizze-hero) .fizze-hdr:not(.is-stuck) .fizze-hdr__login-link:hover,
.fizze-has-hero:not(.home) .fizze-hdr:not(.is-stuck) .fizze-hdr__login-link:hover { color: var(--fz-blue-hi); }
body:not(.home):has(.fizze-hero) .fizze-hdr:not(.is-stuck) .fizze-hdr__login-link,
body:not(.home):has(.fizze-hero) .fizze-hdr:not(.is-stuck) .fizze-hdr__identity-trigger,
.fizze-has-hero:not(.home) .fizze-hdr:not(.is-stuck) .fizze-hdr__login-link,
.fizze-has-hero:not(.home) .fizze-hdr:not(.is-stuck) .fizze-hdr__identity-trigger { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); }

/* Tiroir : une rangee pleine largeur entre la navigation et la langue. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .fizze-hdr__login {
	order: 1;
	width: 100%;
}
.fizze-hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .fizze-hdr__login-link {
	width: 100%;
	min-height: 48px;
	padding: 0;
	font-family: var(--fz-body);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--fz-white);
}
.fizze-hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .fizze-hdr__login-link:hover,
.fizze-hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .fizze-hdr__login-link:focus-visible,
.fizze-hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .fizze-hdr__login-link:active { color: var(--fz-white); }
.fizze-hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .fizze-hdr__login-link { width: auto; padding: 0 14px; border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); }
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .fizze-hdr__login:not(.fizze-hdr__identity) { width: fit-content; align-self: flex-start; }
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation__responsive-container.is-menu-open .fizze-hdr__identity { flex-direction: column; align-items: stretch; }
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation__responsive-container.is-menu-open .fizze-hdr__identity-trigger { width: 100%; min-height: 44px; color: var(--fz-white); justify-content: flex-start; }
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation__responsive-container.is-menu-open .fizze-hdr__identity-trigger { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); }
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation__responsive-container.is-menu-open .fizze-hdr__identity-menu { position: static; inset: auto; width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 4px; box-shadow: none; transform: none; }

/* HEADER-001 — chaque dropdown possède son propre contexte d'ancrage.
 * Le panneau est centré sur le déclencheur réel ; le pont ne couvre que les
 * 3 px verticaux et conserve exactement la largeur de ce déclencheur. */
@media (min-width: 600px) {
	.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__container > .wp-block-navigation-submenu {
		position: relative;
	}
	.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__container > .wp-block-navigation-submenu::after,
	.fizze-hdr__identity::after,
	.fizze-langsel::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 3px;
		transform: none;
	}
	.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__container > .wp-block-navigation-submenu::after {
		z-index: 4;
	}
	.fizze-hdr .wp-block-navigation.fizze-nav .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
		top: calc(100% + 3px);
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}
	.fizze-hdr__identity::after,
	.fizze-langsel::after {
		z-index: 99;
	}
	.fizze-hdr__identity-menu {
		top: calc(100% + 3px);
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}
	.fizze-langsel__menu {
		top: calc(100% + 3px);
		left: 50%;
		right: auto;
		transform: translate(-50%, -4px);
	}
	.fizze-langsel[data-open] .fizze-langsel__menu {
		transform: translate(-50%, 0);
	}
}

/* HEADER-002 — le mode du header depend de sa capacite reelle, jamais d'un
 * breakpoint viewport metier. Le gabarit inerte conserve en permanence la
 * composition desktop sur une ligne ; il est mesurable mais ne participe ni
 * a la peinture, ni au focus, ni a l'arbre d'accessibilite. */
.fizze-js .fizze-hdr:not([data-header-layout]) .fizze-hdr__end:not(.fizze-hdr__measure) {
	visibility: hidden;
}
.fizze-hdr .fizze-hdr__measure {
	display: flex !important;
	position: absolute !important;
	top: 0;
	left: 0;
	width: max-content !important;
	max-width: none !important;
	height: auto !important;
	flex-wrap: nowrap !important;
	visibility: hidden !important;
	pointer-events: none !important;
}
.fizze-hdr .fizze-hdr__measure .fizze-nav,
.fizze-hdr .fizze-hdr__measure .wp-block-navigation__responsive-container,
.fizze-hdr .fizze-hdr__measure .wp-block-navigation__responsive-container-content,
.fizze-hdr .fizze-hdr__measure .wp-block-navigation__container {
	display: flex !important;
	position: relative !important;
	inset: auto !important;
	width: max-content !important;
	max-width: none !important;
	height: auto !important;
	flex-wrap: nowrap !important;
}
.fizze-hdr .fizze-hdr__measure .wp-block-navigation__responsive-container-open,
.fizze-hdr .fizze-hdr__measure .wp-block-navigation__responsive-container-close {
	display: none !important;
}

/* Le bloc Navigation garde son drawer natif ; HEADER-002 choisit seulement
 * lequel de ses deux rendus est actif. Ces regles depassent volontairement
 * le breakpoint 600 px imprime par le coeur WordPress. */
.fizze-hdr[data-header-layout="compact"] .fizze-nav > .wp-block-navigation__responsive-container-open {
	display: flex;
}
.fizze-hdr[data-header-layout="compact"] .fizze-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) {
	display: none;
}
.fizze-hdr[data-header-layout="compact"] .fizze-nav > .wp-block-navigation__responsive-container.is-menu-open {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: auto;
}
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: block;
}
.fizze-hdr[data-header-layout="desktop"] .fizze-nav > .wp-block-navigation__responsive-container-open {
	display: none;
}
/* Au-dessus de 600 px, les finitions desktop de HEADER-001 existent encore
 * dans la cascade. Le mode compact les neutralise explicitement dans le
 * drawer, sans changer leur rendu desktop valide. */
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu::after,
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation__responsive-container.is-menu-open .fizze-hdr__identity::after,
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation__responsive-container.is-menu-open .fizze-langsel::after {
	content: none;
}
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	position: static;
	inset: auto;
	width: 100%;
	transform: none;
}
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation__responsive-container.is-menu-open .fizze-langsel__menu {
	top: 100%;
	left: 0;
	right: 0;
	transform: translateY(-4px);
}
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation__responsive-container.is-menu-open .fizze-langsel[data-open] .fizze-langsel__menu {
	transform: none;
}

/* HEADER-005 — La grammaire du drawer suit exclusivement la structure
 * Navigation : tout enfant direct est de niveau 1, tout enfant du sous-menu
 * est de niveau 2. Le regime compact est explicite afin de neutraliser les
 * alignements desktop encore actifs au-dessus de 600 px. */
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	align-items: flex-start;
}
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
	padding-inline-start: 1.5rem;
}
.fizze-hdr[data-header-layout="compact"] .wp-block-navigation.fizze-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
	padding-inline-start: 0.75rem;
}

/* HEADER-001-FINAL — le sélecteur Langues reste discret au repos et au survol.
 * Son contour seul signale l'état ouvert ; la géométrie du menu reste inchangée. */
@media (min-width: 600px) {
	.fizze-hdr .fizze-langsel__btn,
	.fizze-hdr .fizze-langsel__btn:hover {
		border-color: transparent;
		background: transparent;
		box-shadow: none;
		color: var(--fz-mute-w);
	}
	.fizze-hdr .fizze-langsel[data-open] .fizze-langsel__btn {
		border-color: var(--fz-header-dropdown-border);
		background: transparent;
	}
	body:has(.fizze-hero) .fizze-hdr:not(.is-stuck) .fizze-langsel__btn,
	body:has(.fizze-hero) .fizze-hdr:not(.is-stuck) .fizze-langsel__btn:hover,
	.fizze-has-hero .fizze-hdr:not(.is-stuck) .fizze-langsel__btn,
	.fizze-has-hero .fizze-hdr:not(.is-stuck) .fizze-langsel__btn:hover {
		color: var(--fz-on-navy-muted);
	}
	/* L'Accueil utilise la barre claire : il reprend le neutre public et ne
	 * doit pas heriter du regime reserve aux heros marines. */
	body.home .fizze-hdr:not(.is-stuck) .fizze-langsel__btn,
	body.home .fizze-hdr:not(.is-stuck) .fizze-langsel__btn:hover {
		color: var(--fz-mute-w);
	}
}

/* ---------- 27. Repere de section sous l'en-tete ---------------------- */

/*
 * Les quatre pages commencent avec le meme repere editorial. Les deux
 * heroes qui passent sous l'en-tete portent sa hauteur eux-memes ; Contact
 * et Mon compte la recoivent deja de `.fizze-main`.
 */
.home .fizze-hero,
.fizze-svc-hero { padding-top: calc(var(--fz-hdr-h) + var(--fz-marker-offset)); }

.fzc-hero,
.fizze-acct { padding-top: var(--fz-marker-offset); }

/* ---------- 28. Grille publique large -------------------------------- */

/*
 * Contact et Mon compte gardent leurs compositions de lecture, mais leur
 * repere retrouve le cadre large deja porte par l'Accueil et Services.
 */
.fzc-hero > .fizze-kicker { max-width: var(--fz-wrap); }

.fizze-acct { --fizze-acct-content: 860px; }
.fizze-acct .fizze-acct__in { max-width: var(--fz-wrap); }
.fizze-acct .fizze-acct__in > :not(.fizze-acct__lbl) {
	max-width: var(--fizze-acct-content);
	margin-inline: auto;
}


/* ---------- 29. Formulaire rapide (CONTACT-002C, repris par CONTACT-002E) ---- */

/*
 * Les regles de champs, de bouton, d'erreur et de confirmation du formulaire
 * rapide. Depuis CONTACT-002E il vit sur sa PAGE (`/contact-rapide/`), dans
 * `.fzc-quick.fzc-quick--page` (section 30) : la carte depliable de 002C, son
 * bouton et son panneau n'existent plus.
 *
 * La confirmation n'emprunte PAS `.fzc-done` : la section 25 replie le haut de
 * la page des qu'un `.fzc-done` existe, ce qui n'a pas de sens ici.
 */
.fzc-quick .ff-el-form-control { scroll-margin-top: calc(var(--fz-hdr-h) + 1rem); }
.fzc-quick .fluentform,
.fzc-quick .frm-fluent-form { margin: 0; }

/* --- Les champs : les memes surfaces que la feuille du formulaire principal --- */

.fzc-quick .ff-el-group { margin: 0 0 18px; }
.fzc-quick .ff-el-input--label label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--fz-ink-w);
}
/* L'asterisque reste lisible sur la carte grisee : le bleu d'encre atteint 4,5:1 (le bleu vif, non). */
.fzc-quick .ff-el-is-required label::after { color: var(--fz-blue-ink) !important; }
.fzc-quick input[type="text"],
.fzc-quick input[type="email"],
.fzc-quick textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 13px 15px;
	font-family: var(--fz-body);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--fz-ink-w);
	background: var(--fz-white);
	border: 1px solid var(--fz-rule-w);
	border-radius: var(--fzc-field-radius);
	transition: border-color 0.16s var(--fz-ease), box-shadow 0.16s var(--fz-ease);
	appearance: none;
}
.fzc-quick textarea { min-height: 7.5rem; resize: vertical; }
.fzc-quick input:hover,
.fzc-quick textarea:hover { border-color: rgba(26, 25, 23, 0.32); }
.fzc-quick input[type="text"]:focus,
.fzc-quick input[type="email"]:focus,
.fzc-quick textarea:focus {
	outline: none;
	border-color: var(--fz-blue);
	box-shadow: 0 0 0 4px var(--fzc-ring);
}
.fzc-quick .ff-el-form-control::placeholder { color: #8E887C; opacity: 1; }

/* Erreurs : lisibles sur l'ivoire (le rouge par defaut du plugin n'atteint pas 4,5:1). */
.fzc-quick .ff-el-is-error .ff-el-form-control { border-color: #B42318; }
.fzc-quick .ff-el-is-error .ff-el-form-control:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.14); }
.fzc-quick .ff-el-group .error,
.fzc-quick .ff-el-group .text-danger,
.fzc-quick .ff-errors-in-stack,
.fzc-quick .ff-errors-in-stack .error {
	margin-top: 6px;
	font-size: 0.875rem;
	line-height: 1.45;
	color: #B42318;
}

.fzc-quick .ff_submit_btn_wrapper { margin: 4px 0 0; }
.fzc-quick .ff-btn-submit {
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	padding: 15px 30px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--fz-blue) !important;
	color: var(--fz-white) !important;
	box-shadow: 0 10px 24px -14px rgba(37, 99, 235, 0.55);
	cursor: pointer;
	transition: background-color 0.18s var(--fz-ease), box-shadow 0.18s var(--fz-ease);
}
.fzc-quick .ff-btn-submit:hover {
	background-color: var(--fz-blue-hover) !important;
	box-shadow: 0 14px 30px -14px rgba(29, 78, 216, 0.6);
}
.fzc-quick .ff-btn-submit:focus-visible {
	outline: 2px solid var(--fz-blue);
	outline-offset: 3px;
}

/* --- Mention d'information et confirmation ---------------------------- */

.fzc-quick__legal {
	margin: 18px 0 0;
	max-width: 52ch;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--fz-mute-w);
}
.fzc-quick__legal a {
	color: var(--fz-blue-ink);
	text-underline-offset: 3px;
}
/* La question est partie : la mention a servi, la confirmation reste seule. */
.fzc-quick:has(.fzc-qdone) .fzc-quick__legal { display: none; }

.fzc-quick .ff-message-success {
	border: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	color: var(--fz-ink-w);
}
.fzc-qdone { padding-block: 2px; }
.fzc-qdone:focus,
.fzc-qdone [tabindex="-1"]:focus { outline: none; }
.fzc-qdone__hi {
	margin: 0 0 0.3rem;
	font-family: var(--fz-serif);
	font-weight: 520;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--fz-blue-ink);
}
.fzc-qdone__lead {
	margin: 0;
	max-width: 46ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--fz-mute-w);
	overflow-wrap: anywhere;
}
.fzc-qdone__lead strong { font-weight: 600; color: var(--fz-ink-w); }

@media (max-width: 600px) {
	.fzc-quick .ff-btn-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.fzc-quick input,
	.fzc-quick textarea,
	.fzc-quick .ff-btn-submit { transition: none; }
}

/* ---------- 30. Contact a deux parcours (CONTACT-002E) ----------------------- */

/*
 * La page Contact propose deux choix. « Parler de mon projet » deplie la
 * feuille du formulaire complet (`#projet`, `.fzc-project`) ; « Poser une
 * question » est un vrai lien vers la page de contact rapide.
 *
 * Les modes restent decides par le SERVEUR (CONTACT-SERVICES-001) : le bloc de
 * choix porte `fzc-only-generic`, que `fizze_contact_mode_blocks()` retire des
 * qu'un `?besoin=` valide est recu ; `fzc-mode-besoin` (classe de <body>) ouvre
 * alors le panneau sans JavaScript. Sans JavaScript, le formulaire complet est
 * toujours visible : `fizze-js` est le seul interrupteur du repli.
 *
 * Aucune couleur, police ni rayon nouveau : les jetons et les formes du
 * theme (carte `.fzc-direct`, pastille de `.ff-btn-submit`, pastille a filet
 * du bouton de 002C).
 */
/* --- 30.1 Le choix : deux cartes sur la surface de `.fzc-direct` ---------- */

.fzc-choice { margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); }
.fzc-choice__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 20px);
}
/* Le groupe WordPress pose une marge de flux sur le second enfant : les deux cartes doivent rester alignees. */
.fzc-choice__grid > .fzc-choice__card { margin: 0; }
.fzc-choice__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 28px);
	background: rgba(26, 25, 23, 0.035);
	border: 1px solid var(--fz-rule-w);
	border-radius: 0 var(--fz-card-r-lite) var(--fz-card-r-lite) var(--fz-card-r-lite);
	transition: border-color 0.16s var(--fz-ease), background 0.16s var(--fz-ease);
}
.fzc-choice__title {
	margin: 0;
	font-family: var(--fz-serif);
	font-weight: 520;
	font-size: clamp(1.25rem, 2.2vw, 1.55rem);
	line-height: 1.2;
	letter-spacing: -0.022em;
	color: var(--fz-ink-w);
}
.fzc-choice__text {
	flex: 1;
	margin: 0;
	max-width: 40ch;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--fz-mute-w);
}
.fzc-choice__act { margin: 8px 0 0; }
.fzc-choice__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--fz-head);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s var(--fz-ease), border-color 0.18s var(--fz-ease), box-shadow 0.18s var(--fz-ease);
}
/* Le projet est le parcours principal : meme pastille bleue que « Envoyer ». */
.fzc-choice__cta--primary {
	border: 0;
	background: var(--fz-blue);
	color: var(--fz-white);
	box-shadow: 0 10px 24px -14px rgba(37, 99, 235, 0.55);
}
.fzc-choice__cta--primary:hover { background: var(--fz-blue-hover); }
/* La question est le parcours court : meme pastille a filet que « Poser une question » de 002C. */
.fzc-choice__cta--secondary {
	border: 1px solid var(--fz-rule-w);
	background: transparent;
	color: var(--fz-blue-ink);
}
.fzc-choice__cta--secondary:hover { border-color: rgba(37, 99, 235, 0.45); background: var(--fzc-blue-wash); }
.fzc-choice__cta:focus-visible { outline: 2px solid var(--fz-blue); outline-offset: 3px; }
.fzc-choice__cta[aria-expanded]::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.fzc-choice__cta[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.fzc-choice__card--question .fzc-choice__cta::after { content: "\2192"; font-weight: 400; }
/* Etat choisi : la carte du projet prend le filet bleu et le lavis des cartes de situation. */
.fzc-choice__card.is-selected { border-color: rgba(37, 99, 235, 0.45); background: var(--fzc-blue-wash); }

/* --- 30.2 Le panneau projet : la feuille existante, repliee ou ouverte ----- */

.fzc-project { scroll-margin-top: calc(var(--fz-hdr-h) + 1.25rem); }
.fzc-project:focus { outline: none; }
html.fizze-js body:not(.fzc-mode-besoin) .fzc-project:not(.is-open) { display: none; }
/* La confirmation du formulaire complet remplace aussi le choix : plus de carte au-dessus du « Merci ». */
body:has(.fzc-done) .fzc-choice { display: none; }

/* --- 30.3 La page de contact rapide : le formulaire sur le papier ---------- */

.fzc-quick--page { max-width: var(--fzc-measure); }
.fzc-quick--page .ff-el-group,
.fzc-quick--page .fzc-quick__legal { max-width: 600px; }
.fzc-quick--page .ff-el-group { margin-bottom: 22px; }
.fzc-quick--page .ff-el-group.ff_submit_btn_wrapper { margin-top: 8px; }
.fzc-quick--page .fzc-quick__legal { margin-top: 20px; }
.fzc-quick__back { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; }
.fzc-quick__back a {
	font-family: var(--fz-head);
	font-weight: 600;
	color: var(--fz-blue-ink);
	text-underline-offset: 4px;
}
.fzc-quick__back a::after { content: " \2192"; }
.fzc-quick__back a:focus-visible { outline: 2px solid var(--fz-blue); outline-offset: 3px; }
.fzc-quick--page:has(.fzc-qdone) .fzc-quick__legal { display: none; }

/* --- 30.4 Mobile ------------------------------------------------------------ */

@media (max-width: 720px) {
	.fzc-choice__grid { grid-template-columns: 1fr; }
	.fzc-choice__cta { width: 100%; }
	.fzc-choice__text { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fzc-choice__card, .fzc-choice__cta { transition: none; }
}

/* ---------- 31. Tableaux des pages Cookies : cartes sous 600 px (LEGAL-001H) ---------- */

/*
 * Quatre colonnes ne tiennent pas dans 335 px : la colonne « Duree » (la duree
 * de conservation) sortait du cadre et n'etait presque pas visible. Sous 600 px,
 * chaque ligne devient une carte ; le libelle de colonne precede chaque valeur.
 *
 * Le balisage vient de `fizze_legal_table_cards()` (functions.php) : classe
 * `fizze-legal-table` sur le bloc, `data-label` sur chaque cellule (lu dans les
 * <th>, donc deja traduit), roles ARIA de tableau. Aucun autre tableau du site
 * n'est concerne ; au-dessus de 600 px, le rendu d'origine est inchange.
 *
 * Les en-tetes <th> ne sont pas retires de l'arbre d'accessibilite : ils sont
 * seulement ecrases a 1 px (technique « visually hidden »), pas en display:none.
 */
@media (max-width: 599px) {
	.fizze-legal-table { overflow-x: visible; }

	.fizze-legal-table table,
	.fizze-legal-table tbody,
	.fizze-legal-table tr,
	.fizze-legal-table td {
		display: block;
		width: auto;
		min-width: 0;
		border: 0;
	}

	.fizze-legal-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.fizze-legal-table tr {
		margin: 0 0 0.875rem;
		padding: 1rem 1.0625rem;
		border: 1px solid var(--fz-rule-w);
		border-radius: 12px;
		background: var(--fz-paper-deep);
	}
	.fizze-legal-table tbody tr:last-child { margin-bottom: 0; }

	.fizze-legal-table td {
		padding: 0;
		overflow-wrap: anywhere;
		color: var(--fz-ink-w);
	}
	.fizze-legal-table td + td { margin-top: 0.75rem; }

	.fizze-legal-table td::before {
		content: attr(data-label);
		/* Le libelle est deja porte par l'en-tete de colonne : on ne le fait pas lire deux fois. */
		content: attr(data-label) / "";
		display: block;
		margin: 0 0 0.2rem;
		font-family: var(--fz-body);
		font-size: var(--fz-lbl);
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: var(--fz-track);
		text-transform: uppercase;
		color: var(--fz-mute-w);
	}
}

/* ---------- 32. Retour en haut : ne couvre plus la ligne legale du pied de page (LEGAL-001H) ---------- */

/*
 * A partir de 782 px, la ligne « © 2026 FIZZE… » est calee a droite, sur la
 * ligne de base de la signature, jusqu'au bord de la grille. Le bouton fixe
 * occupe ce meme coin quand on arrive en bas de page. On garde donc la ligne
 * a gauche de la zone du bouton : sa marge a droite (position + largeur du
 * bouton + 0,75 rem de respiration) est un plancher, jamais un recul si la
 * marge de la grille est deja plus grande. Aucune autre regle du bouton ne bouge.
 */
@media (min-width: 782px) {
	.fizze-ftr:has(> .fizze-ftr__mark) > .fizze-ftr__bottom {
		right: max(
			var(--fz-gut),
			(100% - var(--fz-wrap)) / 2,
			calc(clamp(0.9rem, 2.5vw, 1.6rem) + 48px + 0.75rem)
		);
	}
}

/* ---------- 33. Conditions generales de vente : sommaire et densite de lecture (LEGAL-CGV-001H) ---------- */

/*
 * Tout descend de `.fizze-cgv`, groupe pose autour du contenu des deux pages
 * CGV (FR et PT) : aucune autre page, y compris les six pages juridiques
 * existantes, n'est touchee. Ajout seul, aucune regle existante n'est modifiee.
 *
 * AUDIT (LEGAL-CGV-001H §2) : le texte courant des pages hérite de
 * clamp(1rem, 0.96rem + 0.25vw, 1.125rem) (17,9 px a 1009 px, 16,3 px a
 * 375 px) avec un interligne de 1,65 ; les paragraphes s'etendent a 68ch,
 * soit environ 100 caracteres par ligne (mesure sur les metriques de DM Sans) ; les H2 de contenu font 1,6 a 2,3 rem
 * avec l'interligne 0,94 du theme. Pour un document contractuel de 22 articles,
 * on resserre : corps a 1 rem (16 px) sur tous les formats, interligne 1,6,
 * mesure de 34rem (environ 74 caracteres), H2 de 19 a 21 px, interligne 1,25,
 * filet de separation entre articles. La famille de caracteres, les couleurs
 * et les liens sont ceux du theme.
 *
 * Les ancres `#article-NN` heritent du decalage global `:target` (en-tete fixe).
 */
.fizze-cgv {
	font-size: 1rem;
	line-height: 1.6;
	/*
	 * Filets de la page (LAUNCH-VISUAL-002) : #E5E7EB faisait 1,24:1 sur le
	 * blanc, 1,09:1 sur le creme, soit invisible. Meme encre translucide que
	 * les filets des pages creme (1,23:1) : la page garde le trait qu'elle avait.
	 */
	--fz-cgv-rule: rgba(17, 24, 39, 0.1);
}
.fizze-cgv > p,
.fizze-cgv > ul {
	max-width: 34rem;
	margin-block: 0 0.85rem;
}
.fizze-cgv > ul {
	padding-left: 1.25rem;
}
.fizze-cgv > ul > li + li { margin-top: 0.3rem; }

.fizze-main:not(.fizze-main--bare) .wp-block-post-content .fizze-cgv > h2.wp-block-heading {
	max-width: 34rem;
	margin: 2.25rem 0 0.7rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--fz-cgv-rule);
	font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.3125rem);
	line-height: 1.25;
}

/*
 * Correctif A1 (LEGAL-CGV-001I) : le filet bas du sommaire suffit ; le premier
 * article, qui le suit directement, n'a pas de filet haut (sinon deux traits
 * paralleles de longueurs differentes). Le selecteur reprend celui de la
 * regle precedente, en y ajoutant `.fizze-cgv-toc +`, pour en depasser la
 * specificite ; les filets entre les autres articles sont conserves.
 */
.fizze-main:not(.fizze-main--bare) .wp-block-post-content .fizze-cgv > .fizze-cgv-toc + h2.wp-block-heading {
	margin-top: 1.5rem;
	padding-top: 0;
	border-top: 0;
}

/* Le sommaire : un repere, plus compact que le texte contractuel. */
.fizze-cgv-toc {
	max-width: none;
	margin: 1.5rem 0 0.5rem;
	padding-block: 1.1rem 0.6rem;
	border-block: 1px solid var(--fz-cgv-rule);
}
.fizze-cgv-toc__title {
	margin: 0 0 0.8rem;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* #6B7280 ne passe plus AA sur le creme (4,25) : le cran du dessous, 6,65. */
	color: var(--fz-muted-strong);
}
.fizze-cgv-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1rem;
	line-height: 1.4;
}
.fizze-cgv-toc__list li {
	margin: 0;
	break-inside: avoid;
}
.fizze-cgv-toc__list a {
	display: block;
	padding-block: 0.3rem;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.fizze-cgv-toc__list a:hover { color: var(--fz-blue); }
@media (min-width: 720px) {
	.fizze-cgv-toc__list {
		columns: 2;
		column-gap: 2.5rem;
		font-size: 0.9375rem;
	}
}

/*
 * Titre des pages legales (LAUNCH-VISUAL-002). Les pages legales (mentions,
 * confidentialite, cookies, CGV, FR et PT) passent par le gabarit `page.html`
 * et son H1 heritait des « Titres FIZZE » (Arial 900) ; toutes les autres
 * pages publiques ecrivent leur H1 en Fraunces, graisse 520, interligne 1,02,
 * approche -0,033em (voir `.fzc-hero__title`, `.fizze-svc-title`). Meme voix
 * ici, taille et couleur inchangees. `body.fizze-legal` est pose par
 * `fizze_body_classes()` : aucune autre page ne bouge.
 */
body.fizze-legal .fizze-pagehead .wp-block-post-title {
	font-family: var(--fz-serif);
	font-weight: 520;
	line-height: 1.02;
	letter-spacing: -0.033em;
}
/*
 * Et leurs H2 (LAUNCH-VISUAL-003) : la voix des H2 d'un Conseil, l'autre page
 * de lecture longue (Fraunces 520, interligne 1,12, approche -0,026em, voir
 * `.fizze-conseil`). Tailles, marges, couleur et filets inchanges ; les CGV
 * gardent leur interligne de 1,25, fixe par leur regle plus specifique.
 */
body.fizze-legal .fizze-main .wp-block-post-content h2:not([class*="fizze-"]) {
	font-family: var(--fz-serif);
	font-weight: 520;
	line-height: 1.12;
	letter-spacing: -0.026em;
}

/* ==========================================================================
   22. Conseils (CONTENT-CONSEILS-001B)

   Archive `/conseils/` et `/pt/conselhos/`, article, carte « Dernier Conseil »
   de l'Accueil. Aucun contenu ici : la page reprend le hero `fizze-svc-*`
   (donc sa voix, son mouvement et son regime clair), les cartes et l'article
   n'ajoutent que ce qu'un texte long demande. Aucun JavaScript.
   ========================================================================== */

/* --- 22.1 Archive : la liste ------------------------------------------- */

.fizze-conseils {
	background: var(--fz-paper);
	color: var(--fz-ink-w);
	padding-top: 0;
	padding-bottom: clamp(3rem, 6vw, 5.5rem);
}
.fizze-conseils__list {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)) !important;
	gap: clamp(1.75rem, 3.2vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.fizze-conseils__list > li { margin: 0; min-width: 0; }

.fizze-conseil-card {
	position: relative;
	height: 100%;
	border-top: 2px solid var(--fz-ink-w);
	padding-top: 1.1rem;
}
.fizze-conseil-card .wp-block-post-featured-image {
	margin: 0 0 1rem;
}
.fizze-conseil-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 14px;
}
.fizze-conseil-card__date,
.fizze-conseil-date {
	margin: 0 0 0.6rem;
	font-family: var(--fz-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--fz-mute-w);
}
.fizze-conseil-card .fizze-conseil-card__title {
	margin: 0 0 0.7rem;
	font-family: var(--fz-serif);
	font-weight: 520;
	font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem);
	line-height: 1.14;
	letter-spacing: -0.022em;
	color: var(--fz-ink-w);
	text-wrap: balance;
}
.fizze-conseil-card__title a {
	color: inherit;
	text-decoration: none;
}
/* Le titre est le lien principal : sa zone couvre toute la carte. */
.fizze-conseil-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}
.fizze-conseil-card:hover .fizze-conseil-card__title a,
.fizze-conseil-card__title a:focus-visible { color: var(--fz-blue); }
.fizze-conseil-card__title a:focus-visible {
	outline: 2px solid var(--fz-blue);
	outline-offset: 4px;
}
.fizze-conseil-card .wp-block-post-excerpt {
	margin: 0;
	color: var(--fz-mute-w);
	font-size: 1rem;
	line-height: 1.6;
}
.fizze-conseil-card .wp-block-post-excerpt__excerpt { margin: 0; }

.fizze-conseils .fizze-pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
	font-weight: 600;
}
.fizze-conseils .fizze-pagination a { color: var(--fz-blue); }
.fizze-conseils__empty {
	margin: 0;
	max-width: 46ch;
	color: var(--fz-mute-w);
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* --- 22.2 Article ------------------------------------------------------- */

.fizze-conseil-back a {
	color: inherit;
	text-decoration: none;
}
.fizze-conseil-back a::before {
	content: '\2190';
	margin-right: 0.5em;
	font-weight: 400;
}
.fizze-conseil-back a:hover,
.fizze-conseil-back a:focus-visible { color: var(--fz-blue); }
.fizze-conseil-hero .fizze-svc-title { max-width: 22ch; }
/*
 * QA-LAUNCH-LOCAL-002 / A-01 — deux axes seulement : le bord du contenu pour
 * le hero (surtitre, titre, date), la colonne de lecture pour le corps, le
 * bloc de fin et la navigation. En mise en page « constrained », le coeur
 * centre le titre avec sa mesure de 22ch ; il reprend ici le bord gauche du
 * contenu, comme `.fizze-svc-hero > .fizze-svc-lede` (section 20.2).
 */
.fizze-conseil-hero > .fizze-svc-title {
	margin-left: max(0px, calc((100% - var(--fz-wrap)) / 2)) !important;
	margin-right: auto !important;
}
.fizze-conseil-hero .fizze-conseil-date { margin-bottom: 0; }

.fizze-conseil-body {
	background: var(--fz-paper);
	color: var(--fz-ink-w);
	padding-top: clamp(0.5rem, 2vw, 1.5rem);
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
	padding-inline: var(--fz-gut);
}
.fizze-conseil-body .wp-block-post-featured-image { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.fizze-conseil-body .wp-block-post-featured-image img { display: block; width: 100%; height: auto; }

.fizze-conseil .wp-block-post-content {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	line-height: 1.72;
	color: var(--fz-ink-w);
}
/*
 * A-01 — une seule largeur de colonne pour tout ce qui se lit : la meme valeur
 * sert au corps, au bloc de fin et a la navigation, donc un seul bord gauche.
 * Les H2, les listes et le chapeau la rejoignent, le bloc de fin aussi.
 *
 * QA-LAUNCH-LOCAL-002 / A-05 — 42rem = 672px. La largeur precedente (820px, le
 * `contentSize` du theme, plafond de la regle commune aux contenus longs
 * `.fizze-main .wp-block-post-content > p { max-width: 68ch }`) donnait 83 a
 * 90 caracteres par ligne en mediane sur desktop ; 42rem en donne ~69 (80 au
 * plus, WCAG 1.4.8). En rem et non en ch : l'unite `ch` change avec la police
 * de chaque element et ferait reculer l'axe commun du bloc de fin.
 */
.fizze-conseil { --fz-conseil-col: 42rem; }
.fizze-main.fizze-conseil .wp-block-post-content > * { max-width: var(--fz-conseil-col); }
.fizze-conseil .wp-block-post-content > p.fizze-conseil-lead {
	color: var(--fz-mute-w);
	font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
	line-height: 1.55;
}
.fizze-main.fizze-conseil .wp-block-post-content h2:not([class*="fizze-"]) {
	margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 0.8rem;
	font-family: var(--fz-serif);
	font-weight: 520;
	font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.1rem);
	line-height: 1.12;
	letter-spacing: -0.026em;
	color: var(--fz-ink-w);
	text-wrap: balance;
}
.fizze-conseil .wp-block-post-content li { margin-bottom: 0.45em; }
.fizze-conseil .wp-block-post-content strong { font-weight: 650; }
.fizze-conseil .wp-block-post-content a { color: var(--fz-blue); text-underline-offset: 0.18em; }

.fizze-conseil-end {
	background: var(--fz-paper);
	color: var(--fz-ink-w);
	padding: clamp(1.5rem, 3vw, 2.5rem) var(--fz-gut) clamp(3rem, 6vw, 5rem);
}
.fizze-conseil-end > * { max-width: var(--fz-conseil-col); }
.fizze-conseil-end__txt {
	margin: 0 0 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--fz-mute-w);
}
.fizze-conseil-end__cta { margin-bottom: clamp(2rem, 4vw, 3rem); }
.fizze-conseil-nav {
	gap: 1rem 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--fz-rule-w);
	font-size: 0.9375rem;
}
.fizze-conseil-nav .post-navigation-link-previous,
.fizze-conseil-nav .post-navigation-link-next { flex: 1 1 16rem; margin: 0; }
.fizze-conseil-nav .post-navigation-link-next { text-align: right; }
.fizze-conseil-nav a { color: var(--fz-ink-w); text-underline-offset: 0.18em; }
.fizze-conseil-nav a:hover,
.fizze-conseil-nav a:focus-visible { color: var(--fz-blue); }
.fizze-conseil-nav .post-navigation-link__label { color: var(--fz-mute-w); }

/* --- 22.3 Accueil : « Dernier Conseil » --------------------------------- */

.home .fizze-lastconseil {
	background: var(--fz-paper);
	color: var(--fz-ink-w);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
/* Aucun article publie dans la langue : ni carte, ni espace, ni lien. */
.home .fizze-lastconseil:not(:has(.wp-block-post)) { display: none; }
.fizze-lastconseil .wp-block-post-template { margin: 0; padding: 0; }
.fizze-lastconseil .wp-block-post { margin: 0; }
.fizze-lastconseil__card {
	display: grid;
	grid-template-columns: minmax(10rem, 0.28fr) minmax(0, 1fr);
	grid-template-areas: 'kicker title' 'date excerpt' '. actions';
	column-gap: clamp(2rem, 5vw, 5rem);
	row-gap: 0.75rem;
	/* A-04 : la carte occupe toute la colonne, comme les sections voisines (pas de largeur locale). */
	padding: clamp(1.5rem, 3.5vw, 3rem);
	border: 1px solid var(--fz-ink-w);
	border-left: 5px solid var(--fz-blue);
	border-radius: var(--fz-card-r-lite);
	background: var(--fz-paper-deep);
}
.fizze-lastconseil__card > * { margin: 0; }
.fizze-lastconseil .fizze-kicker { grid-area: kicker; align-self: end; color: var(--fz-blue-steel); }
.fizze-lastconseil .fizze-conseil-card__date { grid-area: date; align-self: start; margin: 0; }
.fizze-lastconseil .wp-block-post-title {
	grid-area: title;
	font-family: var(--fz-serif);
	font-weight: 520;
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem);
	line-height: 1.1;
	letter-spacing: -0.028em;
	color: var(--fz-ink-w);
	text-wrap: balance;
}
.fizze-lastconseil .wp-block-post-title a { color: inherit; text-decoration: none; }
.fizze-lastconseil .wp-block-post-title a:hover,
.fizze-lastconseil .wp-block-post-title a:focus-visible { color: var(--fz-blue); }
.fizze-lastconseil .wp-block-post-excerpt {
	grid-area: excerpt;
	max-width: 62ch;
	color: var(--fz-mute-w);
	font-size: 1.0625rem;
	line-height: 1.6;
}
.fizze-lastconseil .wp-block-post-excerpt__excerpt { margin: 0; }
.fizze-lastconseil__actions {
	grid-area: actions;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	padding-top: clamp(0.75rem, 2vw, 1.5rem);
}
.fizze-lastconseil__actions > * { margin: 0; }
.fizze-lastconseil .wp-block-read-more,
.fizze-lastconseil__all-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0.7rem 1.35rem;
	border: 1.5px solid var(--fz-blue);
	border-radius: var(--wp--custom--radius--cta);
	/* A-03 : DM Sans comme les autres boutons (`--fz-head` est l'Arial des titres du theme). */
	font: 700 0.9375rem/1.25 var(--fz-body);
	text-decoration: none;
	transition: background 0.2s var(--fz-ease), color 0.2s var(--fz-ease), border-color 0.2s var(--fz-ease);
}
.fizze-lastconseil .wp-block-read-more { background: var(--fz-blue); color: var(--fz-white); }
.fizze-lastconseil .wp-block-read-more:hover,
.fizze-lastconseil .wp-block-read-more:focus-visible { background: var(--fz-blue-hover); border-color: var(--fz-blue-hover); color: var(--fz-white); }
.fizze-lastconseil__all-link { background: transparent; color: var(--fz-blue-steel); border-color: var(--fz-blue-steel); }
.fizze-lastconseil__all-link:hover,
.fizze-lastconseil__all-link:focus-visible { background: var(--fz-blue-steel); color: var(--fz-white); }
.fizze-lastconseil .wp-block-read-more:focus-visible,
.fizze-lastconseil__all-link:focus-visible { outline: 3px solid var(--fz-ink-w); outline-offset: 3px; }
@media (max-width: 740px) {
	.fizze-lastconseil__card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: 'kicker' 'date' 'title' 'excerpt' 'actions';
		row-gap: 0.7rem;
	}
	.fizze-lastconseil .fizze-kicker { align-self: auto; }
	.fizze-lastconseil .wp-block-post-title { font-size: clamp(1.75rem, 6.5vw, 2.5rem); }
}
@media (max-width: 420px) {
	.fizze-lastconseil__actions { align-items: stretch; flex-direction: column; }
	.fizze-lastconseil__actions > *,
	.fizze-lastconseil .wp-block-read-more,
	.fizze-lastconseil__all-link { width: 100%; }
}
/* Tant que les blocs LOCAL n'ont pas ete migres, conserver le rendu initial. */
.home .fizze-lastconseil:not(:has(.fizze-lastconseil__actions)) {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 2.5vw, 2rem);
}
.fizze-lastconseil__card:not(:has(.fizze-lastconseil__actions)) {
	display: grid;
	grid-template-columns: none;
	grid-template-areas: none;
	gap: 0.15rem;
	max-width: 46rem;
	border: 0;
	border-top: 2px solid var(--fz-ink-w);
	border-radius: 0;
	background: transparent;
	padding: 1.25rem 0 0;
}
.fizze-lastconseil__card:not(:has(.fizze-lastconseil__actions)) .fizze-kicker,
.fizze-lastconseil__card:not(:has(.fizze-lastconseil__actions)) .fizze-conseil-card__date,
.fizze-lastconseil__card:not(:has(.fizze-lastconseil__actions)) .wp-block-post-title,
.fizze-lastconseil__card:not(:has(.fizze-lastconseil__actions)) .wp-block-post-excerpt { grid-area: auto; }
.fizze-lastconseil__card:not(:has(.fizze-lastconseil__actions)) .fizze-kicker { color: var(--fz-mute-w); margin-bottom: 0.9rem; }
.fizze-lastconseil__card:not(:has(.fizze-lastconseil__actions)) .fizze-conseil-card__date { margin-bottom: 0.5rem; }
.fizze-lastconseil__card:not(:has(.fizze-lastconseil__actions)) .wp-block-post-title {
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	margin-bottom: 0.7rem;
}
.fizze-lastconseil__all { margin-top: 1rem !important; font-weight: 600; }
.fizze-lastconseil__all a { color: var(--fz-blue); text-underline-offset: 0.18em; }

/* --- 22.4 Accueil : « 02 - Une réalisation » (PROOF-001) ------------------ */

/*
 * Section entre la salle sombre « 01 » et la carte « Dernier Conseil » : la
 * réalisation Etna Pizza. Validée en prototype (PROOF-001-PROTO), reprise ici
 * telle quelle. Aucun jeton redéfini : --fz-paper, --fz-paper-deep,
 * --fz-ink-w, --fz-mute-w, --fz-rule-w, --fz-blue, --fz-serif, --fz-pop,
 * --fz-out, --fz-card-r-lite, --fz-anth.
 *
 * Grammaire reprise de l'Accueil : mêmes colonnes 38 / 62 que « 01 », micro-
 * libellé à bulle, titre Fraunces, lignes à filet fin (ni badge ni carte),
 * la carte « Dernier Conseil » restant la seule surface encadrée. Le visuel
 * (ordinateur + smartphone, captures publiques d'etnapizza.ch) garde ses
 * proportions naturelles : width/height déclarés, jamais de object-fit.
 */

.home .fizze-proof {
	position: relative;
	background: var(--fz-paper);
	color: var(--fz-ink-w);
	padding-top: clamp(3rem, 6.5vw, 6rem);
	/* « Réalisation puis expertise » : la section se rapproche volontairement de la carte Conseil. */
	padding-bottom: clamp(0.5rem, 1.5vw, 1.5rem);
}

.home .fizze-proof-grid { gap: clamp(2.5rem, 6vw, 6rem); align-items: flex-start !important; }
@media (max-width: 1023.98px) {
	.home .fizze-proof-grid { flex-wrap: wrap !important; }
	.home .fizze-proof-grid > .wp-block-column { flex-basis: 100% !important; }
	.home .fizze-proof-head { max-width: 40rem; }
}

/* --- Colonne de gauche : qui, et en une phrase ------------------------- */

.home .fizze-proof .fizze-kicker {
	color: var(--fz-mute-w);
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.home .fizze-proof .fizze-h2 {
	font-family: var(--fz-serif);
	font-weight: 520;
	font-size: clamp(2.3rem, 4.1vw, 4.1rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--fz-ink-w);
	margin: 0 0 clamp(1.25rem, 2.4vw, 1.75rem);
}

.fizze-proof-hook {
	margin: 0 0 1.1rem;
	max-width: 24ch;
	font-family: var(--fz-serif);
	font-weight: 480;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--fz-ink-w);
	text-wrap: balance;
}

.home .fizze-proof .fizze-intro {
	margin: 0;
	max-width: 36ch;
	color: var(--fz-mute-w);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
	line-height: 1.55;
}

/* --- Colonne de droite : ce qui a été fait ------------------------------ */

.fizze-proof-body .fizze-lbl {
	margin: 0 0 1rem;
	color: var(--fz-mute-w);
}

.fizze-proof-list.wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--fz-rule-w);
}
.fizze-proof-list.wp-block-list > li {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2vw, 1.25rem);
	min-height: 3.5rem;
	margin: 0;
	padding: clamp(0.8rem, 1.5vw, 1.1rem) 0;
	border-bottom: 1px solid var(--fz-rule-w);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3rem);
	font-weight: 500;
	line-height: 1.3;
	color: var(--fz-ink-w);
}
.fizze-proof-list.wp-block-list > li::before {
	content: '';
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--fz-blue);
}

.fizze-proof-foot {
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	max-width: 40ch;
	font-family: var(--fz-serif);
	font-style: italic;
	font-weight: 440;
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
	line-height: 1.32;
	letter-spacing: -0.01em;
	color: var(--fz-ink-w);
	text-wrap: pretty;
}

/* --- Visuel : captures réelles de la carte des pizzas d'Etna ------------
   Ordinateur + smartphone, le smartphone légèrement superposé. Les images
   gardent leurs proportions naturelles (largeur et hauteur déclarées, jamais
   de object-fit qui rogne ou étire). Sans visuel, on retire simplement ce bloc du contenu. */

.fizze-proof-shot { max-width: 34rem; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; }

.fizze-proof-shot__devices { display: flex; align-items: flex-end; padding-bottom: 1.25rem; }

.fizze-proof-shot__desktop {
	flex: none;
	width: 76%;
	border: 1px solid var(--fz-ink-w);
	border-radius: var(--fz-card-r-lite);
	background: #fff;
	overflow: hidden;
	box-shadow: 0 34px 60px -44px rgba(26, 25, 23, 0.55);
}
.fizze-proof-shot__bar {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.2rem 0.55rem;
	background: var(--fz-paper-deep);
	border-bottom: 1px solid var(--fz-rule-w);
}
.fizze-proof-shot__bar > span:not(.fizze-proof-shot__url) {
	width: 0.36rem;
	height: 0.36rem;
	border-radius: 50%;
	border: 1px solid var(--fz-mute-w);
}
.fizze-proof-shot__url {
	margin-left: 0.35rem;
	padding: 0.04rem 0.55rem;
	border: 1px solid var(--fz-rule-w);
	border-radius: 999px;
	font-size: 0.65rem;
	line-height: 1.25;
	color: var(--fz-mute-w);
}
.fizze-proof-shot img { display: block; width: 100%; height: auto; }

.fizze-proof-shot__phone {
	position: relative;
	z-index: 1;
	flex: none;
	width: 24.4%;
	margin-left: -4%;
	margin-bottom: -1.25rem;
	padding: 0.3rem;
	border-radius: 1.1rem;
	background: var(--fz-anth);
	box-shadow: 0 30px 50px -28px rgba(26, 25, 23, 0.65);
}
.fizze-proof-shot__phone img { border-radius: 0.8rem; }

/* Variante laptop (THEME-PROOF-LAPTOP-001, prototype) : desktop seulement.
   Le cadre « fenêtre de navigateur » devient un écran à fine bordure sombre,
   la base et la charnière sont de simples pseudo-éléments. Pour revenir à la
   fenêtre, supprimer ce bloc ; en colonne unique la fenêtre reste telle quelle. */
@media (min-width: 782px) {
	.fizze-proof-shot__desktop {
		position: relative;
		overflow: visible;
		margin-bottom: 0.7rem;
		padding: 0.4rem 0.4rem 0.5rem;
		border: 0;
		border-radius: 0.8rem 0.8rem 0.2rem 0.2rem;
		background: var(--fz-anth);
		box-shadow: 0 30px 50px -34px rgba(26, 25, 23, 0.6);
	}
	/* Barre d'adresse (THEME-PROOF-LAPTOP-002) : la barre existante, resserrée, dans l'écran. */
	.fizze-proof-shot__bar {
		padding: 0.18rem 0.5rem;
		border-radius: 0.4rem 0.4rem 0 0;
		background: #efede8;
	}
	.fizze-proof-shot__url {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		background: #fff;
		color: #5a5852;
	}
	.fizze-proof-shot__url::before {
		content: "";
		width: 0.34rem;
		height: 0.3rem;
		border-radius: 0.06rem;
		background: currentColor;
		opacity: 0.7;
	}
	.fizze-proof-shot__desktop img { border-radius: 0 0 0.1rem 0.1rem; }
	/* Base */
	.fizze-proof-shot__desktop::before {
		content: "";
		position: absolute;
		left: -4%;
		right: -4%;
		top: 100%;
		height: 0.7rem;
		border-radius: 0 0 0.9rem 0.9rem / 0 0 0.6rem 0.6rem;
		background: linear-gradient(#e3e0d9, #bcb8af);
		box-shadow: 0 18px 28px -16px rgba(26, 25, 23, 0.5);
	}
	/* Charnière */
	.fizze-proof-shot__desktop::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 100%;
		width: 16%;
		height: 0.28rem;
		transform: translateX(-50%);
		border-radius: 0 0 0.4rem 0.4rem;
		background: #a6a29a;
	}
}

/* Colonne unique : l'ordinateur prend toute la largeur (lisible), le smartphone
   passe dessous et le chevauche d'un cran, à gauche (là où la capture n'a que
   la colonne de catégories : ni prix ni bouton n'est masqué). */
@media (max-width: 781.98px) {
	.fizze-proof-shot__devices { display: block; padding-bottom: 0; }
	.fizze-proof-shot__desktop { width: 100%; }
	.fizze-proof-shot__phone { width: min(64%, 15rem); margin: -2.5rem auto 0 0; }
}

/* --- Lien vers le site réel d'Etna --------------------------------------
   Dernier élément de la section, après la clôture. Bouton Outline de l'Accueil (même recette que « Voir les formules de
   création » dans « 01 », transposée sur ivoire) : pilule à contour, texte
   encre, remplissage bleu au survol et au focus clavier (règle commune du
   thème ; le fond est fixé transparent ici pour ne pas dépendre de l'ordre
   des feuilles de style globales), flèche haut-droite qui signale un site externe. Cible tactile
   de 44 px au moins. Pas de saut ni d'ombre bleue : le calme de l'Accueil. */

.fizze-proof-cta { margin: clamp(1.5rem, 2.8vw, 2.25rem) 0 0; }
.home .fizze-proof-cta .is-style-outline .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 2.75rem;
	padding: 0.7rem 1.25rem;
	border: 1px solid var(--fz-ink-w);
	border-radius: 999px;
	color: var(--fz-ink-w);
	font-size: 1rem;
	font-weight: 600;
}
.home .fizze-proof-cta .is-style-outline .wp-block-button__link,
.home .fizze-proof-cta .is-style-outline .wp-block-button__link:hover,
.home .fizze-proof-cta .is-style-outline .wp-block-button__link:focus { transform: none; box-shadow: none; background: transparent; }
.home .fizze-proof-cta .is-style-outline .wp-block-button__link::before {
	content: '';
	order: 2;
	flex: none;
	width: 0.95em;
	height: 0.95em;
	background: currentColor;
	-webkit-mask: var(--fz-arrow-ext) center / contain no-repeat;
	mask: var(--fz-arrow-ext) center / contain no-repeat;
	transition: transform 0.55s var(--fz-pop);
}
.home .fizze-proof-cta .is-style-outline .wp-block-button__link:hover::before,
.home .fizze-proof-cta .is-style-outline .wp-block-button__link:focus-visible::before { transform: translate(0.12em, -0.12em); }
.fizze-proof-cta { --fz-arrow-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E"); }

/* Texte réservé aux lecteurs d'écran (annonce du nouvel onglet). */
.fizze-proof-cta .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Apparition : un geste, une fois, jamais en boucle ------------------
   Gardée par `data-reveal`, posé par le script : sans lui (ou sans
   mouvement autorisé), tout reste visible. */

@media (prefers-reduced-motion: no-preference) {
	.fizze-proof[data-reveal] .fizze-proof-list.wp-block-list > li {
		border-bottom-color: transparent;
		background: linear-gradient(var(--fz-rule-w), var(--fz-rule-w)) 0 100% / 0% 1px no-repeat;
		transition: background-size 1.1s var(--fz-out);
		transition-delay: calc(var(--i, 0) * 70ms);
	}
	.fizze-proof[data-reveal] .fizze-proof-list.wp-block-list > li::before {
		transform: scale(0);
		transition: transform 0.8s var(--fz-pop);
		transition-delay: calc(var(--i, 0) * 70ms + 150ms);
	}
	.fizze-proof[data-reveal="in"] .fizze-proof-list.wp-block-list > li { background-size: 100% 1px; }
	.fizze-proof[data-reveal="in"] .fizze-proof-list.wp-block-list > li::before { transform: scale(1); }

	/* Visuels : l'ordinateur monte, le smartphone suit 200 ms après (transform + opacity seulement). */
	.fizze-proof-shot[data-reveal] .fizze-proof-shot__desktop,
	.fizze-proof-shot[data-reveal] .fizze-proof-shot__phone {
		opacity: 0;
		transition: opacity 1.1s var(--fz-out), transform 1.1s var(--fz-out);
	}
	.fizze-proof-shot[data-reveal] .fizze-proof-shot__desktop { transform: translateY(16px); }
	.fizze-proof-shot[data-reveal] .fizze-proof-shot__phone {
		transform: translateY(18px) rotate(1.5deg);
		transition-delay: 200ms;
	}
	.fizze-proof-shot[data-reveal="in"] .fizze-proof-shot__desktop,
	.fizze-proof-shot[data-reveal="in"] .fizze-proof-shot__phone { opacity: 1; transform: none; }
}
.fizze-proof-list.wp-block-list > li:nth-child(1) { --i: 0; }
.fizze-proof-list.wp-block-list > li:nth-child(2) { --i: 1; }
.fizze-proof-list.wp-block-list > li:nth-child(3) { --i: 2; }
.fizze-proof-list.wp-block-list > li:nth-child(4) { --i: 3; }
.fizze-proof-list.wp-block-list > li:nth-child(5) { --i: 4; }
.fizze-proof-list.wp-block-list > li:nth-child(6) { --i: 5; }
.fizze-proof-list.wp-block-list > li:nth-child(7) { --i: 6; }