/* Bloc "mcleod/methode" : frise des six étapes + palier de décision (assets/svg/methode-frise.svg).
   Couleurs du dessin exclusivement par classe de rôle (m-*), jamais en dur dans le SVG — seuls les
   tokens theme.json sont consommés ici.

   UN SEUL SEUIL, en container query sur la largeur du bloc (container "methode"), jamais sur la
   fenêtre : à partir de 979px de bloc, deux colonnes (texte + frise) ; en dessous, la frise et le
   panneau interactif sont masqués, la liste verticale (repli sans JS, toujours dans le DOM) devient
   le seul affichage. 979px = largeur de bloc où la frise (colonnes 5 à 12 + débord jusqu'au bord de
   la fenêtre, voir plus bas) passe sous 673,6px, soit des libellés (10,6 unités du viewBox de 680)
   sous 10,5px effectifs — le rendu validé à 1180px de fenêtre avant cette grille. Calcul, débord =
   root padding (32px) tant que le bloc n'a pas atteint wideSize : frise = (2/3)·W − md/3 + 32,
   donc W = 1,5 × (673,6 + 32/3 − 32) = 978,4. Une condition de container query n'accepte ni var()
   ni token : la valeur est écrite en dur (978/979px, cinq occurrences dans ce fichier, deux dans
   style.css pour À propos), à recalculer si md, la répartition 4/8, le root padding ou le critère
   de lisibilité changent. Bloc = fenêtre − 64px sous wideSize : bascule à ~1043px de fenêtre. */

/* Conteneur à wideSize (1292px), pas contentSize (1126px, hérité par défaut de l'ancêtre
   is-layout-constrained — core/post-content). Deux classes (0,2,0) : bat sans ambiguïté la règle
   du cœur `.is-layout-constrained > :where(...)` (0,1,0, :where ne compte pas), quel que soit
   l'ordre de chargement des feuilles — même recette que .section-etudes > .etudes.
   Container "methode" : source unique du seuil ci-dessus. Aucun descendant position:fixed (la
   containment de layout en ferait le bloc conteneur, voir CLAUDE.md). */
.wp-block-mcleod-methode.methode {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	container: methode / inline-size;
}

.wp-block-mcleod-methode {
	padding-block: var(--wp--preset--spacing--xl);
	/* Fondu croisé entre panneaux (view.js), mêmes valeurs que les témoignages. */
	--methode-fondu-duree: 300ms;
	--methode-fondu-courbe: ease;
}

.methode__grille {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	align-items: start;
}

.methode__colonne-texte {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

/* .eyebrow (classe globale, style.css du thème) n'a pas de marge propre : elle hérite du margin
   par défaut du navigateur sur <p> (~1em), qui s'ajoutait au gap/margin-top voulus ici en plus —
   scopé au bloc, jamais une modification de la classe globale elle-même. */
.wp-block-mcleod-methode .eyebrow {
	margin: 0;
}

.methode__accroche {
	margin: 0;
}

/* Empile les SEPT panneaux (mcleod_methode_panneaux_html()) dans la MÊME cellule de grille : la
   hauteur de `.methode__etat` se cale sur le panneau le plus haut, qu'il soit visible ou non
   (`visibility:hidden` continue de peser dans le calcul, contrairement à `display:none`) — elle ne
   bouge donc plus jamais quand la position active change, et les flèches/le CTA qui suivent dans le
   DOM ne bougent plus avec elle. */
.methode__etat {
	display: grid;
}

.methode__panneau {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
}

.methode__ligne-badge {
	display: block;
}

/* Pastille de texte, contour (jamais un fond plein : ce n'est pas un bouton). `inline-block`, pas
   `inline-flex` : le contenu mélange du texte brut et deux <span>, un flex container créerait des
   items anonymes autour de ce texte et un `gap` y ajouterait un espacement en double. */
.methode__badge {
	display: inline-block;
	width: fit-content;
	margin: 0;
	padding-block: var(--wp--preset--spacing--xs);
	padding-inline: var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 9999px;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.04em;
}

.methode__verbe {
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

/* Compteur ("1/6" pour une étape, "PALIER" pour le palier) : seul segment du pill en accent. */
.methode__badge-compteur {
	color: var(--wp--preset--color--accent);
}

/* Filets décoratifs (desktop uniquement, voir media query plus bas) : masqués par défaut pour ne
   rien ajouter au rendu tablette/mobile. */
.methode__filet,
.methode__filet-bas {
	display: none;
}

.methode__phrase {
	margin: 0;
	font-size: var(--wp--preset--font-size--chapo);
}

.methode__livrable {
	margin: 0;
}

/* Lien "En savoir plus" (étapes uniquement, voir inc/bloc-methode.php) : partagé entre le panneau
   desktop (.methode__panneau) et la liste mobile (.methode__liste-texte), style hérité tel quel de
   `styles.elements.link` (theme.json) — accent, souligné, "simple lien hypertexte" demandé. Seul
   l'écart avant lui est propre à ce bloc, les deux conteneurs étant déjà en `gap` par ailleurs. */
.methode__lien-plus {
	margin-top: var(--wp--preset--spacing--sm);
}

.methode__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
	margin-top: var(--wp--preset--spacing--xs);
	max-width:30rem;
	flex-direction:row-reverse;
	justify-content:flex-end;
}

.methode__nav {
	display: flex;
	gap: var(--wp--preset--spacing--xs);
}

/* Flèches précédent/suivant : pastille ronde au token `cible`, fond `surface`. Icône incluse EN
   LIGNE par le PHP (mcleod_methode_icone_fleche(), fill="currentColor" déjà dans le fichier) plutôt
   qu'en mask-image externe — plus robuste, aucune dépendance à une ressource chargée à part. */
.methode__fleche {
	width: var(--wp--preset--dimension--cible);
	height: var(--wp--preset--dimension--cible);
	border-radius: 9999px;
	border: 0;
	padding: 0;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.methode__fleche svg {
	width: 40%;
	height: 40%;
}

.methode__precedent svg {
	transform: rotate(180deg);
}

/* Survol : même traitement que .etudes__fleche/.temoignages__suivant-precedent (style.css du thème) —
   fond surface -> contrast, sans transition (aucune des trois n'en porte). */
.methode__fleche:hover {
	background-color: var(--wp--preset--color--contrast);
}

.methode__fleche:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Illustration : décorative (aria-hidden posé par le PHP), la frise elle-même est masquée sous
   le seuil du bloc (979px de bloc, voir l'en-tête) — remplacée par .methode__liste, ci-dessous. */
.methode__frise {
	display: none;
	position: relative;
}

@container methode (min-width: 979px) {
	.methode__frise {
		display: block;
	}
}

.methode__frise svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Boutons créés par le script (view.js), jamais présents sans JS — sans lui, la frise reste une
   illustration statique, déjà pourvue de tous ses libellés. */
.methode__boutons {
	position: absolute;
	inset: 0;
}

.methode__bouton-etape {
	position: absolute;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.methode__bouton-etape:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-mcleod-methode .m-etape {
		transition: opacity 0.4s ease;
	}

	.wp-block-mcleod-methode .m-pastille-groupe {
		transition: transform 0.5s ease;
	}
}

/* État initial, posé en classe par le serveur (mcleod_methode_construire_svg()) sur la première
   étape du DOM — opacité 1, déjà la valeur par défaut du SVG, mais explicite plutôt qu'implicite :
   une classe réelle, pas seulement l'absence d'opacité contraire. Les autres étapes reçoivent leur
   opacité réduite directement en style inline (même mécanisme que activer() en JS), jamais via une
   classe équivalente : pas besoin d'une règle supplémentaire ici pour elles. */
.wp-block-mcleod-methode .m-etape.is-active {
	opacity: 1;
}

/* Couleurs du dessin, par classe de rôle (jamais une couleur en dur dans le fichier SVG). */
.wp-block-mcleod-methode .m-marche {
	fill: var(--wp--preset--color--accent-2);
}

/* Étape 06 : la marche se perd vers la transparence (jamais une marche pleine comme les autres —
   c'est la dernière, rien n'y "monte" après elle). Le dégradé référencé par #m-fondu (<defs>, dans
   le SVG inline) n'a pas besoin d'être déclaré ici, seul son id compte : une référence `url(#…)`
   résout contre le document courant, pas contre la feuille de style qui la pose. */
.wp-block-mcleod-methode .m-fondu {
	fill: url(#m-fondu);
}

.wp-block-mcleod-methode .m-fondu-debut {
	stop-color: var(--wp--preset--color--accent-2);
}

.wp-block-mcleod-methode .m-fondu-fin {
	stop-color: var(--wp--preset--color--accent-2);
	stop-opacity: 0;
}

.wp-block-mcleod-methode .m-montee {
	fill: color-mix(in srgb, var(--wp--preset--color--accent-2), white 22%);
}

.wp-block-mcleod-methode .m-palier {
	fill: var(--wp--preset--color--accent);
}

/* Motif décoratif de la face du palier (assets/svg/methode-frise.svg, .m-palier-motif) : corail
   légèrement plus clair que la face qui le porte, pour rester lisible sans détonner. */
.wp-block-mcleod-methode .m-palier-motif {
	fill: color-mix(in srgb, var(--wp--preset--color--accent), white 15%);
}

.wp-block-mcleod-methode .m-palier-montee {
	fill: color-mix(in srgb, var(--wp--preset--color--accent), white 30%);
}

.wp-block-mcleod-methode .m-plaque {
	fill: var(--wp--preset--color--surface);
}

.wp-block-mcleod-methode .m-palier-titre {
	fill: var(--wp--preset--color--accent);
}

.wp-block-mcleod-methode .m-palier-texte {
	fill: var(--wp--preset--color--base);
}

.wp-block-mcleod-methode .m-chiffre,
.wp-block-mcleod-methode .m-surtitre,
.wp-block-mcleod-methode .m-libelle {
	fill: var(--wp--preset--color--contrast);
}

.wp-block-mcleod-methode .m-chiffre,
.wp-block-mcleod-methode .m-surtitre,
.wp-block-mcleod-methode .m-libelle,
.wp-block-mcleod-methode .m-palier-titre,
.wp-block-mcleod-methode .m-palier-texte {
	font-family: var(--wp--preset--font-family--body);
}

.wp-block-mcleod-methode .m-hachure {
	fill: var(--wp--preset--color--line);
}

/* Anneau extérieur et tige (.m-pastille-trait) : filets fins, sans aucun remplissage.
   `vector-effect: non-scaling-stroke` garde l'épaisseur à 1px quelle que soit l'échelle de la
   pastille (transform appliqué par le script au défilement). */
.wp-block-mcleod-methode .m-pastille-trait {
	fill: none;
	stroke: var(--wp--preset--color--contrast);
	stroke-width: 1px;
	vector-effect: non-scaling-stroke;
}

/* Disque central : plein (la coche a été retirée du fichier, remplacée par le picto ci-dessous). */
.wp-block-mcleod-methode .m-pastille {
	fill: var(--wp--preset--color--accent-3);
	stroke: none;
}

/* Variante "cycliste" (#cycliste, élément alternatif à #pastille — attribut elementMobile) : le
   personnage et le vélo, seule forme propre à ce groupe (l'anneau/tige et le disque réutilisent
   .m-pastille-trait/.m-pastille ci-dessus, inchangés). */
.wp-block-mcleod-methode .m-cycliste {
	fill: var(--wp--preset--color--surface);
}

/* Picto au centre du disque (SEPT groupes empilés par le PHP, un par position de la séquence — voir
   inc/bloc-methode.php, mcleod_methode_injecter_pictos()) : un seul visible à la fois, géré par
   style="opacity:0" posé par le PHP au repos puis par view.js au clic. `color` (pas `fill`) : les
   icônes elles-mêmes portent fill="currentColor" sur leurs <path>, c'est cette couleur héritée qui
   doit valoir `base`, jamais une surcharge de fill qui écraserait currentColor à la place. */
.wp-block-mcleod-methode .methode__picto {
	color: var(--wp--preset--color--base);
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-mcleod-methode .methode__picto {
		transition: opacity 0.2s ease;
	}
}

/* Sous le seuil du bloc uniquement : la liste (ci-dessous) devient le seul affichage. Masque le panneau
   interactif (pill, phrase, livrable) et les actions de la frise (flèches + CTA de cette rangée) —
   sans ça, le même contenu apparaissait deux fois (panneau ET liste) sur mobile. Placé en premier
   dans cette section, avant la liste elle-même, pour lire les deux faces du même seuil dans l'ordre. */
@container methode (max-width: 978px) {
	.methode__etat,
	.methode__actions {
		display: none;
	}
	.methode__badge{border:none; padding-inline: 0;}
	.methode__liste-phrase{font-size:18px!important;}
	/* Annule le gap flex de .methode__liste-texte (--methode-liste-texte-gap) pour CE bord seulement :
	   le gap s'applique uniformément entre les 4 enfants (pill/phrase/"Vous repartez avec"/livrable),
	   une marge négative égale et opposée ramène à 0 juste après "Vous repartez avec", sans toucher
	   aux deux autres écarts. !important nécessaire : .methode__liste p{margin:0} (une classe + un
	   élément, plus spécifique qu'une classe seule) l'emporterait sinon sur ce margin-bottom. */
	.methode__liste-livrable-titre{font-weight:600 !important; opacity:.6; margin-bottom: calc(var(--methode-liste-texte-gap) * -1) !important;}
	.methode__liste-livrable-titre:after{content:":"; margin-left:.25em;}

}

/* Liste : repli sans JS (sous le seuil, visible, remplace la frise) ET contenu complet pour les moteurs/
   lecteurs d'écran à toute largeur (masquée visuellement au-dessus du seuil — classe équivalente à
   .screen-reader-text, scopée à ce seuil puisqu'elle redevient le rendu visible en dessous).

   Sous le seuil cette liste est désormais le SEUL affichage : le panneau interactif et les actions de
   la frise sont masqués à ce seuil (media query ci-dessus), la liste porte son propre CTA
   (.methode__liste-cta, en fin de liste).

   ZONE DE RÉGLAGES — toutes les valeurs ci-dessous pilotent la liste mobile, à ajuster ici plutôt que
   dans chaque règle qui les consomme (même principe que les "Réglage unique, custom properties..."
   déjà en usage ailleurs dans ce thème, ex. FAQ, diaporama). Valeurs de départ = presets theme.json
   les plus proches de la demande initiale ; libre de les changer pour un autre preset, ou — pour
   celles qui n'ont pas d'équivalent exact (pastille ~40px, graisse 500) — une valeur littérale.
   Déclarées sur `.wp-block-mcleod-methode` (la section entière), pas sur `.methode__liste` : le CTA
   de fin de liste (.methode__liste-cta) est un FRÈRE du <ol>, pas un descendant — des custom
   properties posées sur `.methode__liste` ne lui seraient jamais accessibles (l'héritage CSS ne
   remonte ni ne traverse les frères). Aucun effet desktop : les seuls sélecteurs qui les consomment
   sont ceux de la liste mobile, déjà invisibles au-dessus du seuil. */
.wp-block-mcleod-methode {
	--methode-liste-pastille: var(--wp--preset--dimension--cible); /* diamètre de la pastille (~40px demandé, "cible" = 44px, le plus proche) */
	--methode-liste-picto: 55%; /* taille du picto dans la pastille, relative à son diamètre */
	--methode-liste-anneau: var(--wp--preset--color--muted); /* couleur de l'anneau (pastille normale) */
	--methode-liste-disque: var(--wp--preset--color--accent-3); /* couleur du disque (pastille normale) */
	--methode-liste-picto-couleur: var(--wp--preset--color--base); /* couleur du picto (pastille normale) */
	--methode-liste-fil: var(--wp--preset--color--line); /* couleur du fil vertical */
	--methode-liste-colonne-gap: var(--wp--preset--spacing--sm); /* écart horizontal pastille <-> texte */
	--methode-liste-texte-gap: var(--wp--preset--spacing--xs); /* écart vertical pill / phrase / "Vous repartez avec" / livrable */
	--methode-liste-etape-gap: var(--wp--preset--spacing--md); /* écart vertical entre deux étapes */
	--methode-liste-pill-taille: var(--wp--preset--font-size--eyebrow); /* taille du pill ("1/6 Cadrer") */
	--methode-liste-corps-taille: var(--wp--preset--font-size--md); /* taille de la phrase et du livrable */
	--methode-liste-corps-couleur: var(--wp--preset--color--foreground); /* couleur de la phrase et du livrable */
	--methode-liste-livrable-titre-graisse: 500; /* "Vous repartez avec" — demandé explicitement, aucun preset fontWeight ne couvre 500 (300/leger et 600/strong seuls existent) */
	--methode-liste-palier-fond: var(--wp--preset--color--accent); /* fond du bandeau palier */
	--methode-liste-palier-texte: var(--wp--preset--color--base); /* couleur du texte (et de la bordure du pill) dans le palier */
	--methode-liste-palier-padding: var(--wp--preset--spacing--sm); /* padding interne du bandeau palier */
	--methode-liste-palier-radius: var(--wp--preset--spacing--xs); /* arrondi du bandeau palier */
	--methode-liste-cta-gap: var(--wp--preset--spacing--lg); /* écart avant le CTA de fin de liste */
}

.methode__liste {
	margin: var(--wp--preset--spacing--lg) 0 0;
	padding: 0;
	/* Largeur de lecture de la liste (version sans schéma), une seule colonne à toute largeur. Sans
	   effet au-dessus du seuil : la liste y est réduite à 1px (masquage accessible, plus bas). */
	max-width: var(--wp--preset--dimension--mesure-liste);
	list-style: none;
	display: flex;
	flex-direction: column;
	/* Pas de `gap` flex entre les <li> : l'écart entre deux étapes est porté par le padding-bottom de
	   chaque <li> (voir .methode__liste > li), seule façon d'offrir une boîte à travers laquelle le
	   fil vertical puisse continuer jusqu'à la pastille suivante. */
	gap: 0;
}

.methode__liste p {
	margin: 0;
}

/* Écart entre deux étapes, en padding (jamais en marge) : l'élément qui porte le fond coloré du
   palier (.methode__liste-palier-bandeau, voir plus bas) est un enfant distinct de ce <li>, pas le
   <li> lui-même — cet écart reste donc toujours transparent, même pour l'étape qui précède ou suit
   le palier. */
.methode__liste > li {
	position: relative;
	padding-bottom: var(--methode-liste-etape-gap);
}

.methode__liste > li:last-child {
	padding-bottom: 0;
}

/* Structure d'une étape : grille à deux colonnes, pastille étroite à gauche (largeur = diamètre de
   la pastille), texte à droite. */
.methode__liste-etape {
	display: grid;
	grid-template-columns: var(--methode-liste-pastille) 1fr;
	column-gap: var(--methode-liste-colonne-gap);
	align-items: start;
}

.methode__liste-texte {
	display: flex;
	flex-direction: column;
	gap: var(--methode-liste-texte-gap);
}

/* Pastille ronde, jamais ovale : anneau 1px en bordure, disque plein en fond (`box-sizing:border-
   box`, aucun espace entre les deux). Le picto (voir mcleod_methode_liste_pastille()) hérite sa
   couleur de `color`, jamais un fill surchargé qui casserait currentColor. */
.methode__liste-pastille {
	box-sizing: border-box;
	width: var(--methode-liste-pastille);
	height: var(--methode-liste-pastille);
	border-radius: 50%;
	border: 1px solid var(--methode-liste-anneau);
	background: var(--methode-liste-disque);
	color: var(--methode-liste-picto-couleur);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

/* `fill:currentColor` forcé ici, jamais laissé au seul attribut `fill="currentColor"` porté par les
   fichiers de la collection "yvan" : le contenu réel de la page (vérifié en base) utilise des pictos
   `core/*` (bibliothèque native de wp_get_icon()), dont les <path> n'ont AUCUN attribut fill — le
   SVG retombe alors sur le noir par défaut de la spec, invisible sur le disque base du palier
   (censé être en accent). Scopé à cette seule pastille, jamais à .methode__picto (frise desktop,
   hors périmètre de cette session) : le même écart y est invisible par coïncidence (`base`, la
   couleur voulue, est déjà quasi noir), signalé sans être corrigé ici. */
.methode__liste-pastille svg path {
	fill: currentColor;
}

.methode__liste-pastille svg {
	width: var(--methode-liste-picto);
	height: var(--methode-liste-picto);
}

/* Pastille du palier, inversée : anneau et disque dans la MÊME couleur (texte du palier) — le
   "cercle" devient un disque uni sur le bandeau accent, le picto reste la seule forme distincte
   (fond du palier, réutilisé en couleur de picto pour l'effet d'inversion). */
.methode__liste-pastille--inverse {
	border-color: white;
	background: white;
	color: var(--methode-liste-palier-fond);
}

/* Fil vertical (1px) : part du bas de la pastille et descend jusqu'au bord bas du <li> — qui
   coïncide avec le haut de la pastille suivante puisque le gap entre étapes est nul (voir
   .methode__liste). Jamais posé sur l'étape qui précède le palier ni sur le palier lui-même
   (`has-fil` n'y est jamais ajouté, voir inc/bloc-methode.php) : le fil s'interrompt au niveau du
   bandeau, demandé explicitement. */
.methode__liste-etape.has-fil::after {
	content: "";
	position: absolute;
	top: var(--methode-liste-pastille);
	bottom: 0;
	left: calc(var(--methode-liste-pastille) / 2 - 0.5px);
	width: 1px;
	background: var(--methode-liste-fil);
}

/* Pill : réutilise tel quel le badge du panneau desktop (.methode__badge/-compteur/.methode__verbe,
   voir inc/bloc-methode.php) pour rester au même format — seule la taille de police change ici.
   Deux classes : bat sans ambiguïté la règle de base `.methode__badge{font-size:sm}` quel que soit
   l'ordre de chargement, sans toucher au panneau desktop (ancêtre différent). */
.methode__liste .methode__badge {
	font-size: var(--methode-liste-pill-taille);
}

/* Phrase et livrable : aucune règle dédiée n'existait avant cette session (hérité du corps de texte
   global) — rendues explicites ici pour être réglables, mêmes valeurs qu'avant (aucun changement de
   rendu). "Vous repartez avec" partage la même taille/couleur, avec sa propre graisse en plus. */
.methode__liste-phrase,
.methode__liste-livrable-titre,
.methode__liste-livrable {
	font-size: var(--methode-liste-corps-taille);
	color: var(--methode-liste-corps-couleur);
}

.methode__liste-livrable-titre {
	font-weight: var(--methode-liste-livrable-titre-graisse);
}

/* Palier : le fond coloré, le padding et le radius sont portés par ce DIV enfant, jamais par le
   <li> lui-même (voir .methode__liste > li ci-dessus) — sinon l'écart avant l'étape suivante serait
   coloré au lieu de rester transparent. Même grille à deux colonnes que .methode__liste-etape. */
.methode__liste-palier-bandeau {
	display: grid;
	grid-template-columns: var(--methode-liste-pastille) 1fr;
	column-gap: var(--methode-liste-colonne-gap);
	align-items: start;
	padding: var(--methode-liste-palier-padding);
	background: var(--methode-liste-palier-fond);
	color: var(--methode-liste-palier-texte);
	border-radius: var(--methode-liste-palier-radius);
}
.methode__liste-palier-bandeau .methode__liste-texte{
	gap:0;
}
/* Bordure du pill en couleur du palier plutôt que `line` (règle par défaut de .methode__badge) : sur
   ce fond accent, `line` serait quasi invisible — tout, texte compris, reste dans la même couleur. */
.methode__liste-palier-bandeau .methode__badge {
	border-color: var(--methode-liste-palier-texte);
}
.methode__liste-palier-bandeau{
		color:white;
	}
	.methode__liste-palier-bandeau .methode__liste-palier-titre{
		font-size:2rem;
	}

@container methode (max-width: 978px) {
	.methode__liste-palier-bandeau {
		padding-bottom: var(--wp--preset--spacing--md);
	}
}

@container methode (min-width: 979px) {
	.methode__liste,
	.methode__liste-cta {
		/* position/clip en !important : seules les deux propriétés qui FONT le masquage (clip n'a
		   d'effet que sur un élément position:absolute) — sans ça, toute classe de même spécificité
		   posée ailleurs sur .methode__liste-cta (ex. .bouton-survol--pilote, qui pose position:
		   relative pour son propre calque) rend le clip inerte et fait réapparaître le bouton dans
		   le flux, en dernier enfant de la section, tronqué par le height:1px resté actif. Vécu :
		   boutons-survol.js, charge après ce fichier, gagnait sur position à spécificité égale. */
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: 0;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap;
		border: 0;
	}
	.methode__liste-palier-bandeau{
		color:white;
	}
	.methode__liste-palier-bandeau .methode__liste-palier-titre{
		font-size:2rem;
	}
}

/* CTA de la liste mobile : seul déclencheur de contact restant sous le seuil, une fois le panneau
   interactif et les actions de la frise masqués (media query en tête de cette section). */
.methode__liste-cta {
	display: block;
	width: fit-content;
	margin-top: var(--methode-liste-cta-gap);
}

/* Deux colonnes (au-dessus du seuil, voir l'en-tête du fichier) : vraie grille à 12 colonnes,
   gouttière md, comme le reste du thème (Étude de cas, pied de page), plus une 13e piste pour le
   DÉBORD : la frise occupe les colonnes 5 à 12 ET cette piste, jusqu'au bord droit de la fenêtre.
   La grille est élargie de la largeur du débord (width, aucune marge négative) : elle dépasse du
   bloc vers la droite seulement (bloc en ltr, grille calée à gauche). Débord = distance du bord
   droit du bloc au bord de la fenêtre = (100vw − 100cqw) / 2 (bloc centré dans la fenêtre :
   root padding de chaque côté, puis centrage à wideSize). La 13e piste vaut ce débord moins une
   gouttière (la gouttière qui la précède fait le reste) : les 12 colonnes gardent exactement leur
   largeur sans débord. Limite connue, déjà présente avec l'ancien margin-right : 100vw inclut une
   barre de défilement classique (Windows), la grille dépasserait alors de sa moitié.

   Le texte occupe les colonnes 1 à 7, sur la MÊME rangée : les deux éléments se chevauchent par
   placement explicite (grid-row:1), le texte au-dessus (z-index de grid-item, sans position).
   Seuls l'eyebrow et l'accroche utilisent cette largeur : ils passent dans le coin haut gauche de
   la frise, vide (l'escalier monte du bas gauche au haut droit). Tout ce qui suit (panneau, filet
   bas, actions) est borné aux colonnes 1 à 4 (--methode-largeur-texte) : l'étape 01, le palier et
   leurs hachures, en bas à gauche de la frise, ne passent jamais sous le texte (vérifié par test
   de toucher sur les formes du SVG).

   Ce bloc est volontairement placé en DERNIER dans le fichier : plusieurs des règles de base
   ci-dessus redéclarent les MÊMES propriétés sans condition de largeur — à spécificité égale, la
   règle la plus TARDIVE l'emporte. */
@container methode (min-width: 979px) {
	.methode__grille {
		/* Réglages de la grille, déclarés une fois : nombre de colonnes, gouttière, colonnes du texte
		   courant. Consommés par la grille ET par --methode-largeur-texte (même formule que l'en-tête
		   de l'Étude de cas, --etude-entete-colonnes). Changer --methode-gouttiere ou la répartition
		   impose de recalculer le seuil de la container query (en-tête du fichier). */
		--methode-colonnes: 12;
		--methode-gouttiere: var(--wp--preset--spacing--md);
		--methode-colonnes-texte: 4;
		--methode-largeur-texte: calc((100cqw - (var(--methode-colonnes) - 1) * var(--methode-gouttiere)) / var(--methode-colonnes) * var(--methode-colonnes-texte) + (var(--methode-colonnes-texte) - 1) * var(--methode-gouttiere));
		--methode-debord: calc((100vw - 100cqw) / 2);
		width: calc(100% + var(--methode-debord));
		grid-template-columns: repeat(var(--methode-colonnes), minmax(0, 1fr)) max(0px, calc(var(--methode-debord) - var(--methode-gouttiere)));
		gap: var(--methode-gouttiere);
		/* start, pas center : la frise est plus haute que la colonne de texte — "center" centrait le
		   texte sur la hauteur de la frise, créant un grand vide au-dessus de lui. */
		align-items: start;
	}

	.methode__colonne-texte {
		grid-column: 1 / span 7;
		grid-row: 1;
		/* Remplace le `gap` uniforme (base) par des marges différenciées par paire. */
		gap: 0;
		z-index: 1;
		max-width: 55ch;
	}

	.methode__frise {
		/* Colonne qui suit les --methode-colonnes-texte du texte (5 pour 4) : un numéro de ligne de
		   grille n'accepte pas calc() de façon fiable dans tous les moteurs, écrit en clair. */
		grid-column: 5 / -1;
		grid-row: 1;
		z-index: 0;
	}

	/* Mise en forme de la colonne texte — presets theme.json uniquement (settings.typography.
	   fontSizes / settings.spacing.spacingSizes), tableau de correspondance validé par Yvan avant
	   écriture. Deux presets n'existent pas pour les repères demandés, non inventés :
	   - graisse 500 pour "Vous repartez avec" (seuls 300/leger et 600/strong existent) : laissé à
	     la graisse héritée (400), jamais une valeur en dur non validée ;
	   - disques de flèche ~58px (aucun dimensionSize proche) : les flèches suivent désormais la
	     hauteur RÉELLE du CTA (stretch flex + aspect-ratio:1), voir .methode__fleche plus bas. */
	.methode__accroche {
		/* surtitre -> accroche : 1rem — stack (« Rythme texte ») est le seul preset spacingSizes
		   qui vaut 1rem. */
		margin-top: var(--wp--preset--spacing--stack);
		font-size: var(--wp--preset--font-size--lg) !important;
		line-height: 1.15;
	}

	.methode__etat {
		margin-top: var(--wp--preset--spacing--md);
	}

	.methode__panneau {
		gap: 0;
		max-width: min(30rem, var(--methode-largeur-texte));
	}

	.methode__ligne-badge {
		display: flex;
		align-items: center;
	}

	.methode__badge {
		font-size: var(--wp--preset--font-size--eyebrow);
	}

	/* Part du bord droit du pill (gap:0 sur .methode__ligne-badge) jusqu'au bord droit de la
	   colonne (élargie, voir .methode__colonne-texte) : flex:1 plutôt qu'un positionnement absolu
	   mesuré, centré verticalement par align-items:center sur la ligne. */
	.methode__filet {
		display: block;
		flex: 1;
		height: 1px;
		background: var(--wp--preset--color--line);
	}

	/* Phrase, livrable et filet du bas : jamais élargis comme le pill — c'est justement ce qui
	   garde le texte loin de la pastille de l'étape 01 et de la marche de l'étape 02 (toutes deux
	   verticalement sous le niveau du pill, jamais sous celui de l'accroche/eyebrow/pill eux-mêmes,
	   vérifié par getScreenCTM() aux deux bornes du media query). */
	.methode__phrase {
		margin-top: var(--wp--preset--spacing--md);
		font-size: var(--wp--preset--font-size--intro);
		line-height: 1.4;
	}

	.methode__livrable {
		margin-top: var(--wp--preset--spacing--sm);
		font-size: var(--wp--preset--font-size--md);
		line-height: 1.55;
	}

	.methode__filet-bas {
		display: block;
		height: 1px;
		background: var(--wp--preset--color--line);
		/* Fin du livrable -> filet : moitié de l'espacement précédent (md), pas un preset existant
		   coïncidant par hasard — la relation "divisé par deux" doit rester vraie si md change. */
		margin-top: calc(var(--wp--preset--spacing--md));
		max-width: min(30rem, var(--methode-largeur-texte));
	}

	.methode__actions {
		margin-top: var(--wp--preset--spacing--md);
		max-width: min(30rem, var(--methode-largeur-texte));
	}

	/* CTA : mêmes presets que les autres boutons du site (styles.elements.button), posés ici en
	   dur pour rester lisible sans aller chercher dans theme.json — valeurs identiques, pas une
	   surcharge. Plus de hauteur forcée (cible) : sa hauteur devient NATURELLE (padding + ligne de
	   texte), et ce sont les flèches qui s'y calent, pas l'inverse. */
	.methode__cta {
		padding-block: var(--wp--preset--spacing--xs);
		padding-inline: var(--wp--preset--spacing--sm);
	}

	/* Cercles dont la hauteur suit celle du CTA (stretch, voir .methode__actions) : plus de
	   largeur/hauteur fixes au token `cible` — aspect-ratio:1 dérive la largeur de cette hauteur
	   pour rester un cercle, quelle que soit la hauteur réelle du CTA. */
	/* Cercles à la même hauteur que le CTA : même formule que son propre box model (padding bloc +
	   une ligne de texte à la taille sm), jamais une valeur mesurée à la main. 1.625 = line-height
	   racine du thème (aucune variable CSS ne l'expose — déjà dupliquée ailleurs dans ce fichier/
	   le thème pour la même raison, ex. FAQ). `align-items:stretch` + `aspect-ratio:1` essayé
	   d'abord (plus "déclaratif" : pas de formule dupliquée) puis ABANDONNÉ, mesuré en défaut :
	   un bouton sans dimension propre, `width/height:auto` + `aspect-ratio` imbriqué dans deux
	   niveaux de stretch (.methode__actions > .methode__nav > .methode__fleche), converge vers une
	   taille qui grandit avec la largeur disponible plutôt que vers la hauteur du CTA — mesuré
	   190px à 1081px, 253px à 1440px au lieu de ~47px. Le calc() ci-dessous est déterministe, aucun
	   risque de ce type. */
	.methode__fleche {
		width: auto;
		height: calc(2 * var(--wp--preset--spacing--xs) + var(--wp--preset--font-size--sm) * 1.625);
		aspect-ratio: 1;
	}
}