/* ==========================================================================
   Graph'Web Studio - layout.css
   Ossature du site : header, footer, et sections de la page d'accueil.
   Fait le pont vers le design system theme.json et applique le focus accessible.
   ========================================================================== */

/* SOCLE : le padding est COMPRIS dans la largeur, jamais ajouté par-dessus.
   Sans cette règle, « width:100% + padding » déborde de la valeur du padding :
   .wrap faisait 495px dans un parent de 451 (44px de trop), sur TOUTES les pages,
   et l'erreur s'empile à chaque conteneur imbriqué (223px sur un single d'article).
   Les maquettes Claude Design la portent (« *{box-sizing:border-box} ») : le design
   a été validé AVEC. Perdue au portage des sections vers le thème, retrouvée le 16/07/2026.
   NE JAMAIS RETIRER. À poser en PREMIER sur tout nouveau thème client. Pièges #26/#27. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ==========================================================================
   PALIERS RESPONSIVE — l'architecture du site, posée le 17/07/2026.
   Trois zones, deux frontières. Ne pas en inventer une quatrième sans raison.

     > 1100      DESKTOP    grilles 12 colonnes, 3 cartes, menu horizontal
     700 – 1100  TABLETTE   grilles de sections effondrées, cartes sur 2 colonnes,
                            menu burger
     < 700       TÉLÉPHONE  tout en 1 colonne, gouttières minces (22px)

   POURQUOI CES CHIFFRES (mesurés au navigateur, pas estimés) :
   Le seuil unique valait 920. Or la Galaxy Tab S8 Ultra en PORTRAIT annonce 924 :
   elle ratait la frontière de QUATRE pixels et recevait le desktop, cassé, sur une
   tablette tenue verticalement. 1030 (le minimum mesuré du menu) aurait été le même
   piège six pixels plus loin : l'iPad Pro 12,9" portrait fait 1024.

   RÈGLE : un seuil se pose dans un VIDE, jamais sur la largeur d'un appareil courant.
   Les largeurs à connaître AVANT de choisir un chiffre :
     ~400 téléphone · 810 iPad portrait · 924 Galaxy Tab Ultra portrait ·
     1024 iPad Pro 12,9" portrait · 1280 portable · 1480 Galaxy Tab Ultra paysage
   (1480 dépasse le --max de 1460 : en paysage la tablette mérite le desktop, rien à faire.)

   EXCEPTIONS ASSUMÉES, ne pas « harmoniser » sans lire :
   - .cards-2 / .cards-3 : palier PROPRE (700), pas 1100. À 924, deux cartes côte à côte
     sont validées. Les aligner sur les grilles casserait ce qui marche.
   - .hero-reveal .layer (mot fantôme) : reste à 920, intention non élucidée, à voir à froid.
   ========================================================================== */

/* Alias : les noms de variables de la maquette pointent vers les presets
   theme.json (source unique, reutilisable par client). */
:root {
	--ink: var(--wp--preset--color--encre);
	--ink-2: var(--wp--preset--color--encre-relief);
	--card-solid: var(--wp--preset--color--carte);
	--card: #1f113fcc;
	--text: var(--wp--preset--color--texte);
	--text-strong: var(--wp--preset--color--titre);
	--text-dim: var(--wp--preset--color--lavande);
	--text-mute: var(--wp--preset--color--lavande-attenuee);
	--accent: var(--wp--preset--color--sauge);
	--accent-soft: var(--wp--preset--color--sauge-douce);
	--accent-light: var(--wp--preset--color--sauge-claire);
	--pill: var(--wp--preset--color--sauge);
	--line: #ffffff1a;
	--line-soft: #faf6e30f;
	--glass: rgba(255, 255, 255, 0.04);
	--glass-border: rgba(255, 255, 255, 0.10);
	--radius: 18px;
	--max: 1460px;
	/* Largeur mobile des boutons CTA empilés (hero, carte formule, contact...) : figée,
	   pas la pleine largeur. Calée serré sur le plus long libellé « Découvrir les offres ».
	   Source unique pour tous les hero du site — cf. recette methode-gws/passe-responsive §8. */
	--cta-mobile-w: 230px;
}

/* Sélection de texte : couleur charte (sauge) au lieu du bleu natif du navigateur. */
::selection { background: var(--accent); color: var(--ink); }
::-moz-selection { background: var(--accent); color: var(--ink); }

/* Ancre de nav : compense le header collant, la cible ne passe pas dessous.
   Vaut pour toutes les ancres (#offres, #realisations, #apropos, #faq, #contact). */
html {
	scroll-padding-top: 48px;
}

/* Glissement doux vers les ancres, sauf si le visiteur limite les animations
   (prefers-reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Focus : souris = pas de contour (bug Chrome) ; clavier = lisere sauge (WCAG 2.4.7 / RGAA). */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	box-shadow: none;
}
a,
button {
	-webkit-tap-highlight-color: transparent;
}

/* Conteneur pleine largeur */
.wrap {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 clamp(24px, 4.5vw, 90px);
}

/* ---------- Header ---------- */
header {
	position: sticky;
	top: 0;
	z-index: 10;
	padding: 18px 0;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var(--glass-border);
	border-radius: 40px;
	padding: 4px 14px 4px 22px;
	background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
	-webkit-backdrop-filter: blur(16px) saturate(1.15);
	backdrop-filter: blur(16px) saturate(1.15);
}
.brand {
	display: flex;
	align-items: center;
}
.brand img {
	height: 60px;
	width: auto;
	display: block;
}
.nav {
	display: flex;
	gap: 26px;
	font-size: 13.5px;
	color: var(--text-dim);
}
.nav a {
	transition: color .2s;
}
.nav a:hover {
	color: var(--accent);
}
.nav-right {
	display: flex;
	align-items: center;
	gap: 18px;
}

/* Menu deroulant Offres */
.nav-item {
	position: relative;
	display: flex;
	align-items: center;
}
.nav-item > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.nav-item .caret {
	opacity: .5;
	font-size: 11px;
	transition: transform .22s;
}
.nav-item:hover .caret {
	transform: rotate(180deg);
	opacity: .8;
}
.dropdown {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 248px;
	padding: 8px;
	background: rgba(31, 17, 63, .95);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 16px;
	-webkit-backdrop-filter: blur(22px) saturate(1.1);
	backdrop-filter: blur(22px) saturate(1.1);
	box-shadow: 0 24px 50px -20px #000000bb;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	z-index: 30;
}
.dropdown::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}
.nav-item:hover .dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.dd-row {
	display: block;
	padding: 9px 14px;
	border-radius: 11px;
	transition: background .18s;
}
.dd-row:hover {
	background: #ffffff0a;
}
.dd-row .dd-t {
	display: block;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 15px;
	font-weight: 500;
	color: var(--text-strong);
	margin-bottom: 2px;
	transition: color .18s ease;
}
.dd-row:hover .dd-t {
	color: var(--accent);
}
.dd-row .dd-s {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.dd-sep {
	height: 1px;
	background: var(--line-soft);
	margin: 6px 14px;
}
/* Le jumeau du menu mobile : posé dans le markup, éteint ici, rallumé sous 1100px. */
.dd-sep-mobile {
	display: none;
}
.dd-row.feat {
	background: linear-gradient(120deg, #24134566, transparent);
}
.dd-row.feat:hover {
	background: linear-gradient(120deg, #2e1a5588, transparent);
}
.dd-row.feat .dd-s {
	color: var(--accent);
}

/* Bouton CTA */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 13.5px;
	font-weight: 500;
	border: 1px solid rgba(155, 196, 165, .40);
	border-radius: 40px;
	padding: 11px 16px 11px 20px;
	color: var(--text);
	background: transparent;
	transition: all .2s;
	text-decoration: none;
	white-space: nowrap;
}
.btn .ic {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #ffffff14;
	font-size: 13px;
}
.btn.primary {
	background: var(--pill);
	color: #15082f;
	border-color: transparent;
	font-weight: 500;
}
.btn.primary .ic {
	background: #15082f;
	color: var(--accent-light);
}
.btn.primary:hover {
	background: #c4ddca;
}

/* Burger (mobile) : masque en desktop */
.nav-burger {
	display: none;
}

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

/* Gouttière du site : marges MINCES réservées au vrai téléphone (< 700), et non
   jusqu'à 920 comme avant (17/07/2026). Ce que faisait l'ancien seuil : 22px à 451
   là où le clamp donne déjà 24 (la règle ne servait donc à rien sur un téléphone),
   22px à 900 là où le clamp donne 40, puis 41px à 921 — un saut du simple au double
   pour UN pixel d'écran, masqué jusqu'ici par l'explosion du layout au même endroit.
   Au-dessus de 700, le clamp reprend et respire seul (22 → 31 à 700 : imperceptible). */
@media (max-width: 700px) {
	.wrap {
		padding: 0 22px;
	}
}

/* PALIER MENU — 1100px, et NON 920 ni 1030 (mesuré au navigateur le 17/07/2026).
   Mesures d'Alexandra : le menu CASSE à 1014 (« À propos » se brise en deux lignes),
   et n'est « acceptable » qu'à partir de 1030 (avant ça, le CTA colle « Contact »).
   1030 serait un piège : l'iPad Pro 12,9" en portrait fait 1024, soit 6px de marge —
   exactement l'erreur qu'on vient de payer avec 920 vs les 924 de la Galaxy Tab Ultra.
   1100 pose le seuil dans un VIDE : 924 et 1024 reçoivent le burger avec de la marge,
   1280 et plus gardent le menu complet. Un burger sur fenêtre étroite est propre ; un
   menu horizontal qui tient « tout juste » est une casse en attente (un lien de plus,
   un libellé rallongé, une police un peu large).
   RÈGLE GÉNÉRALE : un seuil se pose dans un vide, jamais sur la largeur d'un appareil
   courant. Vérifier la liste des largeurs réelles AVANT de choisir un chiffre. */
@media (max-width: 1100px) {
	.navbar {
		flex-wrap: wrap;
	}
	.nav-burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 42px;
		height: 42px;
		margin-left: auto;
		padding: 0 8px;
		background: none;
		border: none;
		cursor: pointer;
	}
	.nav-burger span {
		display: block;
		height: 2px;
		width: 22px;
		background: var(--text);
		border-radius: 2px;
		transition: transform .25s, opacity .25s;
	}
	.navbar.menu-open .nav-burger span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.navbar.menu-open .nav-burger span:nth-child(2) {
		opacity: 0;
	}
	.navbar.menu-open .nav-burger span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
	.nav,
	.nav-right {
		display: none;
		flex-basis: 100%;
	}
	/* Menu déplié : tout centré (demande d'Alexandra, 17/07/2026). */
	.nav {
		flex-direction: column;
		align-items: center;
		gap: 6px;
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid var(--line-soft);
		/* HIÉRARCHIE REMISE À L'ENDROIT (repéré par Alexandra le 17/07). En desktop, le
		   sous-menu est une carte flottante SÉPARÉE : personne ne compare sa typo à celle
		   de la barre. Déplié, tout tombe dans la même colonne et l'inversion saute aux
		   yeux — les pages principales étaient à 13,5px en lavande atténuée, leurs
		   sous-items à 15px gras en crème. Les enfants avaient l'air d'être les parents.
		   RÈGLE : deux niveaux stylés dans des contextes séparés en desktop doivent être
		   RECOMPARÉS une fois empilés en mobile. */
		font-size: 17px;
		color: var(--text-strong);
	}
	/* Le sous-menu déplié en permanence (cf. nav.js) fait tomber les trois entrées
	   « Offres » dans la même colonne que les pages principales. En desktop, la carte
	   flottante les tient à part et l'accroche en petites capitales sert de respiration ;
	   ici elle ajoute une ligne de bruit sous chaque lien et alourdit un menu déjà long.
	   On la masque, et on retire la graisse du titre : les entrées principales sont en
	   poids normal, un enfant plus gras qu'un parent inversait la hiérarchie. */
	.dd-row .dd-t {
		font-size: 14px;
		font-weight: 400;
	}
	.dd-row .dd-s {
		display: none;
	}
	.dd-sep-mobile {
		display: block;
	}
	.nav-right {
		margin-top: 26px;   /* respiration entre « Contact » et le CTA (était 12px) */
		justify-content: center;
		flex-wrap: wrap;
	}
	.navbar.menu-open .nav,
	.navbar.menu-open .nav-right {
		display: flex;
	}
	/* Le bas de la pilule collait au CTA : le padding de 4px suffit quand le menu est
	   REPLIÉ (la pilule est fine), pas quand il est déplié. Scopé sur .menu-open pour
	   ne rien changer à l'état fermé. */
	.navbar.menu-open {
		padding-bottom: 22px;
	}
	.nav-item {
		flex-direction: column;
		align-items: center;
	}
	/* LE BUG DU SOUS-MENU (17/07/2026). Une media query n'ajoute AUCUNE spécificité :
	   « .nav-item:hover .dropdown » (0,3,0) bat « .dropdown » (0,1,0) même ici. Or le
	   navigateur applique :hover au TOUCHER. Résultat : le sous-menu Offres recevait le
	   « translateX(-50%) » prévu pour le desktop (où il le centre sous le bouton), se
	   décalait d'une demi-largeur et SORTAIT DE L'ÉCRAN par la gauche. Il faut donc
	   neutraliser le hover ICI, à spécificité égale ou supérieure — poser « transform:
	   none » sur « .dropdown » seul ne suffit pas.
	   RÈGLE : quand un état (:hover, :focus) porte une transformation en desktop, penser
	   à l'annuler explicitement dans le bloc mobile. Le désactiver sur l'élément nu ne
	   l'atteint pas. */
	.nav-item:hover .dropdown,
	.dropdown {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		min-width: 0;
		margin-top: 6px;
		/* padding symétrique : l'ancienne indentation à gauche (0 0 0 12px) marquait la
		   hiérarchie quand le menu était aligné à gauche ; centrée, elle décalerait tout
		   le sous-menu de 12px vers la droite. La hiérarchie reste lisible par la typo
		   (titre blanc + libellé mono gris), pas par le retrait. */
		padding: 0;
		background: transparent;
		border: none;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.dd-row {
		text-align: center;
	}
}

/* Accessibilite : mouvement reduit */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* ---------- Footer ---------- */
footer {
	position: relative;
	z-index: 1;
	border-top: 1px solid var(--line-soft);
	padding: 70px 0 40px;
	margin-top: 30px;
}
/* Footer volontairement plus large que le corps (max 1460) : socle premium.
   ~90% de la largeur => gouttières ~5% (env. 3 cm sur un écran ~59 cm),
   plafonnées à 1900px pour ne pas éparpiller les colonnes sur écran très large. */
footer .wrap {
	width: 90%;
	max-width: 1900px;
	padding: 0;
}
.foot-grid {
	display: grid;
	grid-template-columns: 1.9fr 1fr 1fr 1fr 1.3fr;
	gap: 30px;
	margin-bottom: 50px;
}
.foot-brand {
	margin-bottom: 14px;
}
.foot-brand img {
	height: 82px;
	width: auto;
	display: block;
}
.foot-slogan {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--text-strong);
}
.foot-slogan .it {
	font-style: italic;
	color: var(--accent);
}
.foot-desc {
	margin-top: 16px;
	max-width: 330px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--text-dim);
}
.foot-col h4 {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: .2em;
	color: var(--text-mute);
	text-transform: uppercase;
	margin-bottom: 18px;
	font-weight: 400;
}
.foot-col a {
	display: block;
	font-size: 14px;
	color: var(--text-dim);
	padding: 5px 0;
	transition: color .2s;
}
.foot-col a:hover {
	color: var(--accent);
}
/* « flex-wrap » plutôt qu'un palier : la ligne du bas ne contient que deux blocs, elle
   passe donc l'un sous l'autre pile quand ils ne tiennent plus côte à côte, quelle que
   soit la largeur. Une fois enroulée, « space-between » n'a plus qu'un bloc par ligne :
   il le colle à gauche, exactement comme le ferait un « align-items: flex-start ». */
.foot-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 24px;
	padding-top: 24px;
	border-top: 1px solid var(--line-soft);
	flex-wrap: wrap;
	gap: 14px;
}
.mono {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.foot-legal {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}
.foot-legal a {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-dim);
	transition: color .2s;
}
.foot-legal a:hover {
	color: var(--accent);
}

@media (max-width: 1100px) {
	/* La marque reprend toute la largeur, et les quatre colonnes de liens se rangent
	   dessous. « auto-fit » plutôt qu'un palier, et voici pourquoi : ce qui commande la
	   largeur d'une colonne ici, ce n'est pas l'écran, c'est « contact@graphwebstudio.com »
	   (colonne « Me joindre »), le plus long insécable du footer. Un palier fixe à quatre
	   colonnes le ferait déborder bien avant d'atteindre 700. Avec « minmax », le
	   navigateur en met autant qu'il peut sans jamais passer sous le minimum : quatre au
	   large, puis trois, deux, une. Aucune largeur de bascule à deviner, aucun débordement.
	   Le 190px est une estimation de la longueur de l'e-mail : si tu le vois se couper,
	   c'est ce chiffre qu'il faut monter, et lui seul. */
	/* FLEX, et pas Grid, pour une raison précise : les quatre colonnes de liens ne se
	   divisent pas toujours en rangées pleines. À trois colonnes, la quatrième est seule sur
	   sa rangée — et GRID NE SAIT PAS CENTRER UNE RANGÉE INCOMPLÈTE : il colle l'orpheline
	   en colonne 1. Aucun sélecteur ne permet de rattraper le coup, puisque le nombre de
	   colonnes est décidé par le navigateur, pas écrit ici. Flex, lui, centre nativement sa
	   dernière rangée. Même logique qu'avant, donc mêmes largeurs de bascule : « flex-basis »
	   de 190px joue le rôle du « minmax », et « flex-grow » celui du « 1fr ».
	   Le desktop (> 1100) reste en Grid : ses colonnes y sont pleines et dessinées. */
	.foot-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		/* Centrage demandé par Alexandra (17/07). Posé sur le conteneur, donc hérité : il
		   vaut aussi bien pour la colonne unique du téléphone que pour chaque colonne
		   au-dessus, sans règle par cas. Le desktop n'est pas concerné : la marque y est le
		   bloc de GAUCHE d'une composition horizontale, la centrer n'aurait pas de sens. */
		text-align: center;
	}
	.foot-brand-block {
		flex: 1 1 100%;
	}
	.foot-col {
		flex: 1 1 190px;
	}
	/* Deux pièges que « text-align » ne règle pas, parce qu'il n'agit que sur du contenu EN
	   LIGNE, jamais sur la boîte elle-même :
	   - le logo est en « display: block » : il se centre par ses marges, pas autrement ;
	   - « .foot-desc » garde son plafond de lisibilité (330px), et sans marges auto le texte
	     se centrerait À L'INTÉRIEUR d'un bloc de 330px resté collé à gauche. */
	.foot-brand img,
	.foot-desc {
		margin-left: auto;
		margin-right: auto;
	}
	/* La ligne du bas suit le reste. Toujours pas de palier : « center » + « wrap » les
	   groupe au centre tant qu'ils tiennent côte à côte, et les empile centrés sinon. */
	.foot-bottom,
	.foot-legal {
		justify-content: center;
	}
	/* Sur mobile/tablette, on rend au footer des gouttières confortables. */
	footer .wrap {
		width: auto;
		padding: 0 clamp(20px, 5vw, 40px);
	}
}

/* ==========================================================================
   Home : sections de la page d'accueil (contenu dans le post_content)
   ========================================================================== */

/* Fahkwang display + label mono à puce (repris de la maquette) */
.display {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -.03em;
	color: var(--text-strong);
}
.mono.dot::before {
	content: "\25CF";
	color: var(--accent);
	font-size: 8px;
	vertical-align: middle;
	margin-right: 9px;
}

/* CTA fantôme (bouton secondaire) : liseré sauge + point central accent */
.btn:not(.primary):not(.solid):hover {
	border-color: rgba(155, 196, 165, .85);
	background: rgba(155, 196, 165, .08);
}
.btn:not(.primary):not(.solid) .ic {
	color: var(--accent);
	background: rgba(155, 196, 165, .14);
	box-shadow: 0 0 6px rgba(155, 196, 165, .28);
}

/* ---------- Hero (version statique : effets ajoutés à la passe JS) ---------- */
.hero {
	padding: 30px 0 70px;
	min-height: 88vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}
.hero-top {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 8vh;
	position: relative;
	z-index: 2;
}
.hero h1 {
	margin: 0;
	font-size: clamp(44px, 5.9vw, 92px);
	line-height: 1.04;
	letter-spacing: -.038em;
	/* Élasticité minimale : un mot très long (édité par le client) casse la ligne
	   au lieu de déborder. La vraie passe d'élasticité viendra après la revue. */
	overflow-wrap: break-word;
	text-wrap: balance;
	/* Statique : pas de contrainte de largeur (sinon chaque segment re-wrappe).
	   La largeur à 60 % + l'étirement par ligne reviendront avec la passe JS (rect-title). */
}
.hero-main {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: end;
}
.hero-sub {
	margin-top: 30px;
	max-width: min(430px, 100%);
	font-size: 18px;
	color: var(--text-dim);
	font-style: italic;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 300;
}
.hero-cta {
	margin-top: 38px;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.hero-proofs {
	display: flex;
	gap: 26px;
	margin-top: 26px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--text-dim);
}
.hero-proofs span {
	display: flex;
	align-items: center;
	gap: 8px;
}
.hero-proofs span::before {
	content: "\2713";
	color: var(--accent);
	font-size: 12px;
}
.hero-meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 14px;
	row-gap: 10px;
	align-items: center;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 12px;
	color: var(--text);
	padding-bottom: 8px;
}
/* Chaque méta (libellé + valeur) devient transparente pour la grille : ses deux
   éléments passent en items directs de .hero-meta -> la colonne des libellés se
   dimensionne au plus long libellé de la PAGE (plancher 62px), et toutes les valeurs
   s'alignent. Identique éditeur (valeur en <span class="v">) et front. */
.hero-meta > div {
	display: contents;
}
.hero-meta .k {
	color: var(--text-dim);
	letter-spacing: .12em;
	font-size: 10px;
	text-transform: uppercase;
	min-width: 62px;
	text-align: left;
}
.hero-foot {
	margin-top: 8vh;
	padding-top: 22px;
	border-top: 1px solid var(--line-soft);
	position: relative;
	z-index: 2;
}
.hero-foot-row {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 1150px;
	margin: 0 auto;
}

/* Dans l'éditeur seulement : le hero ne réserve pas 88vh (l'iframe d'édition est
   plus courte que la fenêtre) et l'aperçu n'a pas besoin de la pleine hauteur.
   .editor-styles-wrapper n'existe que dans l'éditeur -> inerte sur le front. */
.editor-styles-wrapper .hero {
	min-height: auto;
}

/* Moule v2 : les eyebrows du hero deviennent de vrais core/paragraph, comptés par
   les analyseurs SEO (la méta et le pied restent du décor : mini-blocs hero-meta et
   hero-foot, frontière du 01/08/2026). Reset de la marge pour un rendu identique
   aux anciens spans, éditeur ET front (la typo vient des classes, inchangées). */
.hero-top p {
	margin: 0;
}

/* Éditeur v2 : le .wrap est la zone InnerBlocks (gws-layout débride ses enfants
   directs, cause B du §5). Le hero-foot-row, lui, a un max-width VOULU (1150) :
   ré-affirmation éditeur, spécificité > primitive (piège #12). Inerte sur le front
   (déjà identique). */
.editor-styles-wrapper .hero-foot-row {
	max-width: 1150px;
	margin-inline: auto;
}

/* Le hero garde sa composition à DEUX COLONNES (contenu à gauche, métas en colonne à droite)
   jusqu'à 901. Ce seuil était à 1100, soit environ 200px trop haut : mesuré sur les captures
   d'Alexandra à 1101, la colonne des métas ne fait que ~150px et l'élément le plus large de la
   colonne gauche (la ligne des coches) ~550px, pour 830px disponibles. En additionnant contenu
   + gouttière + métas + marges du site, la composition tient jusqu'à ~890px. On empile donc
   seulement à partir de 900, et 900 est un palier DÉJÀ présent dans cette feuille (formulaire
   de Contact) : on n'en ajoute pas un nouveau. Décidé avec Alexandra le 18/07, sur son
   intuition « là où on a la place, on met les métas sur le côté ».
   NB : le seuil du titre étiré est dans hero-effects.js et vaut 700, indépendant de celui-ci.
   Le passer à 900 ne touche donc pas au titre. */
@media (max-width: 900px) {
	.hero-main {
		grid-template-columns: 1fr;
	}
	/* Empilées, les métas passent en LIGNE. La largeur minimale de 62px des libellés existe
	   pour aligner les valeurs en colonne dans la version à deux colonnes ; dans une ligne
	   horizontale elle ne sert plus à rien et creuse des trous inégaux (le vide après
	   « SITE », signalé par Alexandra à 701). On la neutralise, et on espace les PAIRES bien
	   plus que les deux mots d'une même paire (30px contre 8px) : on lit alors trois blocs,
	   et non six mots à la file. */
	.hero-meta {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 14px 30px;
	}
	.hero-meta > div {
		display: flex;
		gap: 8px;
		align-items: center;
	}
	.hero-meta .k {
		min-width: 0;
	}
}

/* ==========================================================================
   Respiration (ouverture) : phrase-manifeste centree entre le hero et les Offres.
   Section « standard » du moule = natif + CSS (core/group verrouille contentOnly).
   ========================================================================== */
.pad-open {
	padding: 72px clamp(24px, 4.5vw, 90px) 18px;
}
.open-line {
	max-width: 1020px;
	margin: 0 auto;
	text-align: center;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 46px);
	line-height: 1.2;
	letter-spacing: -.028em;
	color: var(--text-strong);
}
.open-line em,
.open-line .it {
	font-style: italic;
	color: var(--accent);
}
/* Téléphone : la respiration respirait TROP (72px au-dessus). On resserre haut et bas. */
@media (max-width: 700px) {
	.pad-open {
		padding-top: 28px;
		padding-bottom: 8px;
	}
}

/* ==========================================================================
   Section 02 — Positionnement (Hybride léger : en-tête décor PHP + corps blocs core).
   Le blockGap flow des core/group est neutralisé sur les conteneurs de mise en page
   (`> * { margin-block: 0 }`) : l'espacement est porté par gap / padding / marges
   explicites, comme dans la maquette.
   ========================================================================== */
.posi-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
	max-width: 1150px;
	margin: 22px auto 0;
}
.posi-split > * { margin-block: 0; }
/* Éditeur : la primitive gws-layout retire le max-width de TOUS les enfants directs
   d'un conteneur gws-layout. Or .posi-split a un max-width VOULU (centrage à 1150).
   On le re-affirme ici, avec une spécificité supérieure à la primitive (3 classes),
   sinon la section s'étale et se colle à gauche dans l'éditeur. Inerte sur le front. */
.editor-styles-wrapper .posi-inner .posi-split {
	max-width: 1150px;
	margin-inline: auto;
}
.posi-accroche {
	display: flex;
	flex-direction: column;
	gap: 34px;
}
.posi-accroche > * { margin-block: 0; }
.posi-kick {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-mute);
	margin: 0 0 16px;
}
.posi-lie {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(21px, 2.3vw, 27px);
	line-height: 1.3;
	color: var(--text-dim);
	max-width: 460px;
	margin: 0;
}
.posi-lie s {
	text-decoration: line-through;
	text-decoration-color: rgba(138, 148, 168, .55);
	text-decoration-thickness: 1px;
}
.posi-belief {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.28;
	color: var(--text-strong);
	max-width: 460px;
	margin: 0;
}
.posi-belief em {
	font-style: italic;
	color: var(--accent);
}
.posi-proofs {
	display: flex;
	flex-direction: column;
}
.posi-proofs > * { margin-block: 0; }
.proof {
	position: relative;
	padding: 30px 0;
	border-top: 1px solid rgba(250, 246, 227, .10);
}
.proof:first-child {
	border-top: none;
	padding-top: 0;
}
.proof:last-child {
	padding-bottom: 0;
}
.proof-cat {
	padding-left: 40px;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-dim);
	margin: 0 0 12px;
}
.proof-t {
	position: relative;
	padding-left: 40px;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.08;
	letter-spacing: -.022em;
	color: var(--text-strong);
	margin: 0;
}
.proof-t::before {
	content: "";
	position: absolute;
	left: 1px;
	top: .56em;
	transform: translateY(-50%);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 12px rgba(155, 196, 165, .6);
}
.proof-t em {
	font-style: italic;
	color: var(--accent);
}
.proof-desc {
	padding-left: 40px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 14px;
	line-height: 1.72;
	color: var(--text-dim);
	max-width: 480px;
	margin: 13px 0 0;
}
/* 800 et non 1100 : rien ici n'a de largeur figée, les 2 colonnes ne sont bornées que par le
   confort de lecture. À 800, chacune fait encore 340px (gouttière comprise), largeur de lecture
   parfaitement tenable. À 1100, on empilait alors qu'il restait 425px par colonne à 1000 : tout
   le côté droit était perdu. Audit des paliers du 18/07, même défaut que la réassurance. */
@media (max-width: 800px) {
	.posi-split {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}
/* Variante en-tête centré sans numéro (ex. section « Face à l'IA » de la page À propos).
   headCentered=true sur le bloc gws/positionnement. */
.posi--head-centered .sh-eyebrow {
	justify-content: center;
}
.posi--head-centered .sh-eyebrow .num {
	display: none;
}
.posi--head-centered .sh-title {
	text-align: center;
	margin-bottom: 60px;
}

/* ==========================================================================
   Hero Hybride (LABO) : blocs core restylés au design GWS.
   Ajouts SCOPÉS uniquement -> Route A (Accueil #6, classes .btn / .hero-proofs span)
   reste intacte. À retirer avec le bloc si l'Hybride n'est pas retenu.
   ========================================================================== */

/* Colonne éditable (H1 + sous-titre + CTA + preuves) = 1re cellule de .hero-main.
   min-width:0 empêche la grille de déborder si un mot du H1 est très long. */
.hero-left {
	min-width: 0;
}

/* CTA : le style va sur le <a> interne des core/button, pas sur .btn (§5.6). */
.hero-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 13.5px;
	font-weight: 500;
	border: 1px solid rgba(155, 196, 165, .40);
	border-radius: 40px;
	padding: 11px 16px 11px 20px;
	color: var(--text);
	background: transparent;
	transition: all .2s;
	text-decoration: none;
	white-space: normal;
}
.hero-cta .wp-block-button__link:hover {
	border-color: rgba(155, 196, 165, .85);
	background: rgba(155, 196, 165, .08);
}
/* Icône ronde recréée en CSS (core/button n'insère pas de span propre) : point
   central pour le secondaire, flèche pour le primaire. Décoratif -> ::after. */
.hero-cta .wp-block-button__link::after {
	content: "\25CF";
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 11px;
	color: var(--accent);
	background: rgba(155, 196, 165, .14);
	box-shadow: 0 0 6px rgba(155, 196, 165, .28);
}
/* Variante primaire (register_block_style core/button 'primary' -> is-style-primary). */
.hero-cta .is-style-primary .wp-block-button__link {
	background: var(--pill);
	color: #15082f;
	border-color: transparent;
}
.hero-cta .is-style-primary .wp-block-button__link:hover {
	background: #c4ddca;
}
.hero-cta .is-style-primary .wp-block-button__link::after {
	content: "\2192";
	background: #15082f;
	color: var(--accent-light);
	box-shadow: none;
}

/* Preuves en core/list (<ul class="wp-block-list hero-proofs"><li>) : réinitialiser
   la puce et le padding que le cœur ajoute, garder la coche accent. */
.hero-proofs {
	list-style: none;
	padding: 0;
}
.hero-proofs li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.hero-proofs li::before {
	content: "\2713";
	color: var(--accent);
	font-size: 12px;
}

/* ---------- Élasticité : repli fin sous 700px (la maquette le prévoit) ---------- */
@media (max-width: 700px) {
	/* HERO TÉLÉPHONE — tout le contenu SOUS le titre passe en présentation « téléphone »
	   (demande d'Alexandra, 17/07) : centrage d'ensemble, boutons de largeur égale, méta en
	   3 colonnes, pied sur une ligne. ⚠ À REVOIR dans la bande 600-700 : elle anticipe que le
	   centré n'y sera peut-être plus idéal. Seuil provisoire à 700 (zone téléphone), pas de
	   4e palier inventé pour l'instant. */

	/* Accroches du haut : empilées et centrées. La 1re porte une puce, pas la 2de : callées
	   à gauche, leurs textes ne démarraient pas au même endroit (effet bancal). */
	.hero-top {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
	}

	/* Description : centrée, plafond de lisibilité conservé (margin auto centre la BOÎTE,
	   text-align centre le texte dedans — les deux, cf. la leçon des plafonds). */
	.hero-sub {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	/* CTA : en LIGNE, à leur largeur NATURELLE, mais CENTRÉS comme tout le reste du hero
	   téléphone. Ils étaient empilés et étirés à largeur égale dès 700, alors qu'ils tiennent
	   côte à côte bien plus bas (mesuré : la paire la plus longue du site demande ~410px).
	   L'empilement à largeur égale ne revient donc que sous 560, dans le bloc « EMPILEMENT
	   DES CTA » en fin de feuille, qui centralise ce comportement pour TOUS les groupes de
	   boutons du site. Ne pas remettre de règle d'empilement ici. */
	.hero-cta {
		justify-content: center;
	}

	/* Preuves (✓) : chaque ligne centrée, et resserrées (26px d'interligne était trop). */
	.hero-proofs {
		justify-content: center;
		gap: 12px;
	}

	/* Méta : 3 colonnes, chacune eyebrow au-dessus / valeur (claire) en dessous, centrées.
	   Remplace le flex-row du palier 1100 (ce bloc vient après lui → il gagne). */
	.hero-meta {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* Colonnes alignées en HAUT : sans ça, le align-items:center de base centrait chaque
		   colonne verticalement, et comme les valeurs ont des hauteurs différentes (1, 2, 3
		   lignes), les libellés SUJETS / TON / SOURCES tombaient à des hauteurs différentes. */
		align-items: start;
		gap: 18px 10px;
	}
	.hero-meta > div {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}
	.hero-meta .k {
		text-align: center;
		min-width: 0;
	}
	/* La VALEUR aussi centrée : sinon, quand elle passe sur plusieurs lignes, ses lignes
	   restent calées à gauche (cas des valeurs longues du blog). */
	.hero-meta .v {
		text-align: center;
	}

	/* Pied de hero : MÊME grille que .hero-meta juste au-dessus (3 colonnes égales, même
	   espacement de colonne, contenu centré). En space-between, le 1er était collé à gauche et
	   le 3e à droite : ça ne coïncidait avec la méta qu'à 372, où les 3 mots remplissent la
	   largeur. L'écart se creusait dès qu'on élargissait (constaté à 450). La grille supprime
	   la coïncidence : les 2 rangées sont calées sur les mêmes colonnes à toute largeur. */
	.hero-foot-row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		text-align: center;
	}
	/* Moins d'air entre la méta et le pied : « margin-top: 8vh » (≈ 67px sur un grand
	   téléphone) creusait un vide sur mobile. 34px suffisent à séparer les deux zones. */
	.hero-foot {
		margin-top: 34px;
	}
}

/* ==========================================================================
   Hero : effets signature (rect-title tricolore + mot fantôme au faisceau).
   Portés de la maquette « design-retenu ». render.php structure le H1 en lignes
   (.fitline l1/l2/l3) ; hero-effects.js (front) étire chaque ligne et révèle.
   L'éditeur garde un H1 normal (les effets ne tournent pas à l'édition).
   ========================================================================== */

/* rect-title : H1 étiré ligne à ligne, 3 couleurs par position. */
.hero h1.rect-title {
	width: 60%;                 /* repli sans JS ; le JS cale à 60 % exact de la zone de lecture */
	margin: 0;
	overflow: hidden;
	padding-bottom: .15em;      /* place pour les jambages (j, g, p, q, y) de la derniere ligne, sinon rognees par overflow:hidden */
}
.rect-title .fitline {
	display: block;
	line-height: 1.0;
	letter-spacing: -.035em;
	color: var(--text-strong);  /* l1 : crème */
	white-space: normal;        /* repli sans JS : le titre s'enroule, reste lisible */
}
.rect-title .fitline.l2 {
	font-style: italic;
	color: var(--accent);       /* l2 : sauge */
}
.rect-title .fitline.l3 {
	color: var(--text-dim);     /* l3 : violet (lavande claire) */
	margin-top: .06em;
}
/* Avec JS (classe « jsfit » posée par le thème) : lignes non enroulées (étirées
   par le JS) et masquées jusqu'au calage (anti-flash), puis révélées en cascade. */
.jsfit .rect-title .fitline {
	white-space: nowrap;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}
.jsfit .rect-title .l1 { transition-delay: .05s; }
.jsfit .rect-title .l2 { transition-delay: .20s; }
.jsfit .rect-title .l3 { transition-delay: .35s; }
.rect-title.fitted .fitline,
.jsfit-ready .rect-title .fitline {   /* .fitted = calé par le JS ; jsfit-ready = repli 1,5 s */
	opacity: 1;
	transform: none;
}
/* Mobile (< 700 px) : le titre est RE-DÉCOUPÉ en sous-lignes par le JS, et chaque
   sous-ligne est étirée comme le sont les lignes du desktop (17/07/2026).
   Pourquoi le JS et pas le contenu : les lignes du H1 viennent des retours à la ligne
   tapés dans l'éditeur (render.php les transforme en .fitline l1/l2/l3, d'où les trois
   couleurs). Il n'y a donc qu'UN découpage pour deux besoins — 3 lignes en desktop,
   5 ou 6 sur un téléphone. Le JS re-coupe DANS chaque .fitline : les sous-lignes héritent
   de la couleur de leur ligne d'origine, et le tricolore survit sans rien dupliquer.
   Le contenu, lui, ne bouge pas : Yoast compte le même texte, l'éditeur montre le même H1. */
/* ⚠ « .hero h1.rect-title » plus haut porte « width: 60% » et vaut (0,2,1) : DEUX classes
   ET un élément. Un « .rect-title.split » (0,2,0) perd contre lui, et le titre reste dans
   une boîte de 60% pendant que le JS l'étire sur 100% — l'overflow: hidden (posé pour les
   jambages) tranche alors le dépassement. Il faut donc reprendre le « .hero h1 » ici.
   Même leçon que le sous-menu du menu déplié le même jour : une classe de plus ne suffit
   pas quand la règle d'en face a un élément dans son sélecteur. */
.hero h1.rect-title.split {
	width: 100%;
}
.rect-title.split .sl {
	display: block;   /* .sl joue en mobile le rôle que .fitline joue en desktop : une ligne
	                     étirée. La mesure se fait toujours sur le .t, resté inline. */
}
/* Repli mobile sans découpage (titre contenant du balisage) : empilé, sans étirement.
   Même correction de spécificité que « .split » ci-dessus : ce « width: 100% » ne s'est
   JAMAIS appliqué depuis l'origine — le titre s'enroulait dans 60% de la largeur sur
   mobile, ce qui le faisait paraître étriqué sans que rien ne le signale. */
.hero h1.rect-title.stack {
	width: 100%;
}
.rect-title.stack .fitline {
	white-space: normal;
	font-size: clamp(36px, 8.5vw, 60px);
	line-height: 1.06;
}

/* Mot fantôme + faisceau lumineux (décor de fond du hero, aria-hidden). */
.hero-reveal {
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	--mx: -300px;
	--my: -300px;
	/* RAYON DU FAISCEAU — variable, parce qu'un rayon FIXE n'est pas le même effet selon
	   l'écran. 360px sur 1460px de large = un quart de l'écran : on voit un faisceau
	   balayer. Les mêmes 360px sur un téléphone de 390px = un halo de 720px de diamètre :
	   il couvre TOUT, en permanence, et l'effet de balayage disparaît — la lumière paraît
	   statique. Ce n'est pas la durée qui fait ça, c'est la taille. (Défaut vu à l'œil par
	   Alexandra le 17/07 ; 360px = 24,7% de 1460, d'où les 25vw du repli.)

	   18/07 : le rayon devient PROPORTIONNEL partout, au lieu d'être fixe avec des rustines par
	   palier. « min(25vw, 360px) » vaut 360px au-delà de ~1440 (le repère desktop, inchangé) et
	   suit les 25% en dessous. Le halo garde donc la même proportion à toute largeur, et les
	   sauts aux frontières de paliers disparaissent. Avant, à 701 le rayon fixe faisait 51% de
	   la largeur (halo plus large que l'écran, lumière statique, constaté par Alexandra), et
	   même à 1100 il en faisait 33%, soit un tiers de plus que le repère. */
	--halo-r: min(25vw, 360px);
}
.hero-reveal .glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle var(--halo-r) at var(--mx) var(--my),
		rgba(220, 210, 242, .22) 0%, rgba(175, 158, 210, .11) 40%, transparent 74%);
}
.hero-reveal .layer {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-style: italic;
	font-size: clamp(200px, 20vw, 460px);
	line-height: .82;
	letter-spacing: -.05em;
	white-space: nowrap;
	user-select: none;
	padding-top: 60px;
}
.hero-reveal .layer.dim {
	color: rgba(250, 246, 227, .035);
}
.hero-reveal .layer.bright {
	opacity: 0;
	color: rgba(220, 210, 242, .42);
	-webkit-mask-image: radial-gradient(circle var(--halo-r) at var(--mx) var(--my), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, 0) 82%);
	        mask-image: radial-gradient(circle var(--halo-r) at var(--mx) var(--my), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, 0) 82%);
}
/* L'éditeur ne joue pas les effets : on masque ce décor de fond à l'édition
   (le mot fantôme reste éditable via le panneau « Décor »). */
.editor-styles-wrapper .hero-reveal {
	display: none;
}
/* Sous 920 : on retire le PLANCHER du clamp (200px) sans changer la pente. « 34vw » faisait
   grossir le mot quand l'écran rétrécissait — à 920 il donnait 313px, soit ~1127px de mot pour
   920px d'écran, débordant des deux côtés. « 20vw » est la pente même du desktop, enfin libre
   de descendre : le mot occupe 72% de la largeur à TOUTE taille, sa proportion de référence.
   (Correction trouvée en juillet pour le téléphone, étendue ici à la bande 700-920 le 18/07,
   sur constat d'Alexandra à 701.) */
@media (max-width: 920px) {
	.hero-reveal .layer {
		font-size: 20vw;
	}
}
/* TÉLÉPHONE — le décor remis d'aplomb (17/07, sur constat d'Alexandra à 390).
   Ce bloc doit rester APRÈS celui de 920 : les deux s'appliquent sous 700, et c'est le
   dernier qui doit gagner.

   LE MOT. La règle des 34vw ci-dessus le fait GROSSIR à mesure que l'écran rétrécit : à
   390 elle donne 132px, où « présence » mesure ~475px — le mot déborde des deux côtés et
   se retrouve tronqué. Retirer la règle ne suffirait pas, ce serait pire : le plancher du
   clamp (200px) prendrait le relais et le mot ferait ~720px. Il faut donc « 20vw » SANS
   plancher — la pente même du desktop, enfin libre de descendre. À 390 : 78px, le mot
   mesure ~280px, il tient, et il occupe 72% de la largeur : exactement sa proportion en
   desktop. Le décor redevient le même d'un bout à l'autre du site.

   LE RAYON DU FAISCEAU. 25vw au lieu de 360px fixes (voir « --halo-r » plus haut).

   ⚠ RÉSOLU le 18/07 (passe tablette). Le mot débordait AUSSI entre 700 et 920 : la règle du
   palier 920 est passée de « 34vw » à « 20vw », la même pente. Le « font-size: 20vw » ci-dessous
   est donc devenu redondant avec elle ; on le garde explicite pour que le téléphone reste juste
   même si quelqu'un retouche le palier 920. */
@media (max-width: 700px) {
	.hero-reveal {
		--halo-r: 25vw;
	}
	.hero-reveal .layer {
		font-size: 20vw;
		/* LE MOT SE POSE SUR LA DESCRIPTION. « --ghost-pad » est calculé par hero-effects.js
		   (centre de la description moins la demi-hauteur du mot). Il FAUT « flex-start » :
		   avec « align-items: center », le centrage absorberait la moitié du padding et le
		   mot n'irait qu'à mi-chemin. Le « padding-top: 60px » du desktop est donc remplacé,
		   pas complété. Repli à 0 si le JS ne tourne pas : le mot reste en haut du hero,
		   visible et inoffensif (c'est du décor, aria-hidden). */
		align-items: flex-start;
		padding-top: var(--ghost-pad, 0px);
	}
}
/* ==========================================================================
   01 — Offres (blocs gws/offres + gws/offre-carte)
   Portee fidelement de la maquette « design-retenu » (section #f01).
   Sans .reveal / .words / aimant : ces effets viendront a la passe site-wide.
   ========================================================================== */

/* Section pleine largeur : respiration verticale + « sol » lumineux (decor de fond). */
.pad {
	padding: 90px 0;
}
/* Téléphone : on resserre l'intervalle entre sections. Le HAUT (90px) reste — c'est
   l'espace au-dessus des titres, validé (= le gap respiration → section 01). On ne touche
   QUE le bas : 8px, la même valeur que le bas du hero (.pad-open). Résultat : chaque
   transition entre sections = 8 + 90 = 98px, uniforme, calée sur ce repère. Vaut aussi
   pour la dernière section → footer (la carte « Appel découverte » remonte). */
@media (max-width: 700px) {
	.pad {
		padding-bottom: 8px;
	}
}
.stage {
	position: relative;
}
.stage::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	inset: 0;
	background: linear-gradient(to bottom,
		transparent 0%,
		rgba(178, 168, 208, .05) 24%,
		rgba(178, 168, 208, .08) 52%,
		rgba(178, 168, 208, .05) 80%,
		transparent 100%);
}

/* Corps de section : grille 12 colonnes. MEME rendu editeur et front, car aucun
   element n'est en position absolue (c'etait la seule cause du decalage editeur).
   En-tete a gauche (8 col) + note a droite (4 col, alignee en haut) ; 2 cartes
   cote a cote (6 col chacune) ; panneau pleine largeur. */
.stage-body {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 22px;
	row-gap: 0;
	align-items: start;
}
.stage-body > .sh-eyebrow { grid-column: 1 / 9; }
.stage-body > .sh-title { grid-column: 1 / 8; }
.stage-body > .sh-note { grid-column: 9 / 13; align-self: start; }
.stage-body > .card { grid-column: span 6; margin-top: 54px; align-self: stretch; }
.stage-body > .allin-block { grid-column: 1 / -1; }

/* En-tete de section (norme partagee : chiffre + eyebrow, grand titre, note a droite). */
.sh-eyebrow {
	display: flex;
	align-items: baseline;
	gap: 18px;
}
.sh-eyebrow .num {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 400;
	font-size: 62px;
	line-height: .8;
	letter-spacing: -.04em;
	color: var(--accent);
}
.sh-eyebrow .lbl {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.sh-title {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: clamp(40px, 4.8vw, 60px);
	line-height: 1.02;
	letter-spacing: -.032em;
	color: var(--text-strong);
	margin: 18px 0 0;
}
.sh-title em,
.sh-title .it {
	font-style: italic;
	color: var(--accent);
}
.sh-note {
	margin: 0 0 0 auto;
	max-width: 300px;
	padding-top: 8px;
	text-align: right;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 300;
	font-size: 19px;
	line-height: 1.4;
	color: var(--text-dim);
}
.sh-note em,
.sh-note .it {
	color: var(--accent);
	font-style: italic;
}
/* Éditeur : la primitive gws-layout retire les max-width des enfants d'un conteneur
   de layout ; on ré-affirme la largeur boxée de la note à droite pour garder
   éditeur = front (piège #12). Spécificité (0,3,0) > primitive (0,2,0). */
.editor-styles-wrapper .gws-layout .sh-note {
	max-width: 300px;
	margin-left: auto;
}

/* Cartes d'offre : verre, ombre de contact statique, elevation au survol. */
.card {
	display: flex;
	flex-direction: column;
	padding: 26px 26px 30px;
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
	-webkit-backdrop-filter: blur(16px) saturate(1.15);
	backdrop-filter: blur(16px) saturate(1.15);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07),
		-9px 12px 20px -14px rgba(0, 0, 0, .4),
		-3px 5px 9px -6px rgba(0, 0, 0, .3);
	transition: border-color .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
}
.card:hover {
	transform: translateY(-5px);
	border-color: var(--accent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 42px 70px -34px rgba(0, 0, 0, .7);
}
.card-top {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	/* Réserve la hauteur du badge « Le plus demandé » dans TOUTES les cartes, même sans
	   badge : sinon la carte à badge (F·02) a un .card-top plus haut et sa description .who
	   descend plus bas que celle des cartes sans badge (1 et 3). 26px = hauteur de la pilule
	   (font 9,5px + padding 5px haut/bas). Cale les 3 descriptions au même niveau. */
	min-height: 26px;
}
/* Corps de carte : colonne flexible qui remplit la carte. Le titre et la description
   se groupent en haut (ecart serre sous le label), seul le bouton est pousse en bas
   (margin-top: auto), ce qui garde les « Decouvrir » alignes entre les deux cartes. */
.card-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.card h3 {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: 27px;
	margin: 34px 0 12px;
	color: var(--text-strong);
	letter-spacing: -.028em;
}
.card h3 em,
.card h3 .it {
	font-style: italic;
	color: var(--accent);
}
.card p {
	margin: 0 0 22px;
	font-size: 14.5px;
	color: var(--text-dim);
}
/* Bouton « Decouvrir » : vrai bloc-bouton (core/button, texte ET lien editables),
   restyle en lien-fleche (pas une pilule). Le rond fleche est recree en ::after,
   comme pour le hero (core/button n'insere pas de span d'icone). */
.card-cta {
	margin-top: auto;
}
.card-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--accent);
	text-decoration: none;
}
.card-cta .wp-block-button__link::after {
	content: "\2192";
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--accent);
	background: var(--accent);
	color: #15082f;
	font-size: 13px;
	transition: transform .35s ease;
}
.card-cta .wp-block-button__link:hover::after {
	transform: rotate(-45deg);
}

/* ============================================================================
   Grille des pages Offres (gws/offre-grille + gws/offre-carte-prix + gws/prix).
   En-tête partagé (même patron que .stage-body / .reass-body : titre à gauche,
   note à droite), puis une rangée de cartes en pleine largeur : cards-3 pour
   Formats, cards-2 pour Refontes.
   ========================================================================== */
.grille-body {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 22px;
	row-gap: 0;
	align-items: start;
}
.grille-body > .sh-eyebrow { grid-column: 1 / 9; }
.grille-body > .sh-title { grid-column: 1 / 8; }
.grille-body > .sh-note { grid-column: 9 / 13; align-self: start; }
.grille-body > .cards-3,
.grille-body > .cards-2 { grid-column: 1 / -1; margin-top: 54px; }
/* Parité éditeur : gws-layout retire le max-width des enfants directs ; la rangée de
   cartes reste pleine largeur (elle porte sa propre grille interne). Inerte sur le front. */
.editor-styles-wrapper .grille-body .cards-3,
.editor-styles-wrapper .grille-body .cards-2 { max-width: none; }

/* Grilles de cartes. */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.cards-2 .card { min-height: 260px; }

/* « Pour qui » : petit label mono au-dessus du titre de la carte. */
.card .who {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-mute);
	margin-bottom: 18px;
}

/* Prix : ligne alignée à DROITE de la carte, devise APRÈS le montant (890 €). */
.price {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 8px;
	margin: 0 0 14px;
}
.price .from {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.price .amt {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-size: 34px;
	font-weight: 400;
	color: var(--text-strong);
	letter-spacing: -.02em;
}
.price .amt .cur {
	font-size: 20px;
	color: var(--accent);
}

/* Puces de caractéristiques : la classe feat-list s'ajoute au wp-block-list du core. */
.card ul.feat-list {
	list-style: none;
	margin: 6px 0 22px;
	padding: 0;
}
.card ul.feat-list li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 9px;
	font-size: 13.5px;
	color: var(--text-dim);
	line-height: 1.5;
}
.card ul.feat-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 8px rgba(155, 196, 165, .6);
}

/* Carte mise en avant (« Le plus demandé ») : distinction par le BADGE seulement.
   Le liseré vert est réservé au survol (.card:hover), comme toutes les cartes — pas de
   liseré statique (corrigé le 10/07/2026, valait pour #70 vitrine, #77 Confort, #80 Croissance). */
.card .badge {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #15082f;
	background: var(--pill);
	padding: 5px 11px;
	border-radius: 999px;
}

/* Effondrement TABLETTE (1100) : la grille de section passe en flux, et les 3 cartes
   tombent à 2 colonnes — à 924 (Galaxy Tab Ultra en portrait), trois colonnes donnent
   des cartes de ~265px, intenable. */
@media (max-width: 1100px) {
	.grille-body { display: block; }
	.grille-body > .cards-3,
	.grille-body > .cards-2 { margin-top: 40px; }
	.cards-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Effondrement TÉLÉPHONE (700) : une seule colonne, PARTOUT. Les cartes ne suivent pas
   le seuil des grilles de sections, et c'est délibéré : à 924, deux cartes côte à côte
   sont validées par Alexandra (captures du 17/07/2026). Les faire tomber à 1100 avec le
   reste casserait ce qui marche déjà. Elles gardent donc leurs colonnes jusqu'ici.
   Ce bloc doit rester APRÈS celui de 1100 : sous 700 les deux s'appliquent, et c'est le
   dernier qui doit gagner. */
@media (max-width: 700px) {
	.cards-3,
	.cards-2 { grid-template-columns: 1fr; }
}

/* LA CARTE ORPHELINE (repéré par Alexandra le 19/07/2026, pages Création et Maintenance).
   Trois cartes dans deux colonnes : la troisième reste seule en colonne 1 et laisse toute la
   colonne 2 vide. Un vide d'un seul côté se lit comme un oubli, un vide symétrique se lit
   comme une intention : on la centre, à sa largeur de colonne.
   POURQUOI PAS l'étaler sur les deux colonnes : son contenu (titre, prix, trois puces) est
   dessiné pour une colonne étroite et flotterait sur 900px. Surtout, elle prendrait
   visuellement le dessus sur la carte « Le plus demandé », qui est la DEUXIÈME. La mise en
   page dirait le contraire du message.
   SÉLECTEUR VOLONTAIREMENT GÉNÉRIQUE : « dernier enfant, de rang impair » = la dernière carte
   seulement quand elle se retrouve seule sur sa rangée. Il s'adapte donc au nombre de cartes
   (3 → il agit ; 4 → il ne fait rien) au lieu de viser « la troisième », qui deviendrait faux
   le jour où une page en ajoute une.
   La largeur reprend le calcul de la colonne : la carte s'étend sur les deux colonnes pour
   pouvoir être centrée, puis on lui rend la largeur d'UNE (moitié de la grille, gouttière de
   22px déduite — la valeur du « gap » de .cards-3 juste au-dessus).
   Scopé au-dessus de 701 : sous ce seuil la grille n'a plus qu'une colonne, et cette règle y
   réduirait la carte de moitié.
   SCOPÉ À .grille-body (19/07, après coup) : la page Maintenance a AUSSI une grille .cards-3,
   mais suivie d'un bandeau « tout compris ». Y centrer la carte orpheline donnait paire / seule
   / seule, sans rythme. Cette page a sa propre réponse (grille 2x2, voir la section niveaux) et
   ne doit donc PAS hériter du centrage. */
@media (min-width: 701px) and (max-width: 1100px) {
	.grille-body .cards-3 > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - 22px) / 2);
	}
}

/* Page tout compris (#80) — « La formule, en deux volets » (design Claude Design, piste D).
   Deux cartes « menu » en verre poli (création / hébergement + maintenance) : titre blanc,
   sous-titre serif italique, lignes d'offre (gws/offre-ligne) séparées par un filet sauge,
   drapeau sauge sur l'offre phare, prix aligné à DROITE (montant Fahkwang, € sauge après le
   chiffre). Réutilise la grille .cards-2 de .grille-body pour la mise côte à côte.
   NB verre poli : liseré verre standard + relief sauge AU SURVOL (règle du 10/07 : pas de
   liseré sauge statique). Le caractère sauge vient des filets et des drapeaux. */
.mcard {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 38px 30px;
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
	-webkit-backdrop-filter: blur(16px) saturate(1.15);
	backdrop-filter: blur(16px) saturate(1.15);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07),
		-9px 12px 20px -14px rgba(0, 0, 0, .4),
		-3px 5px 9px -6px rgba(0, 0, 0, .3);
	transition: border-color .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
}
.mcard:hover {
	transform: translateY(-5px);
	border-color: var(--accent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 42px 70px -34px rgba(0, 0, 0, .7);
}
/* Titre de carte EN BLANC (Geist, capitales espacées) + sous-titre serif italique. */
/* Titre de carte au MÊME niveau que le titre d'offre habituel (.card h3 : Fahkwang 27px,
   casse normale) — les capitales espacées en 13px faisaient une simple étiquette, sous-
   dimensionnée à côté des cartes « One page / Vitrine ». Le texte en base est déjà en casse
   normale (« La création »), donc rien à changer côté contenu. */
.mcard-title {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-size: 27px;
	font-weight: 400;
	letter-spacing: -.028em;
	color: var(--text-strong);
	margin: 0 0 10px;
}
/* Option mot-en-vert italique, comme les titres d'offres (si Alexandra marque un mot). */
.mcard-title em,
.mcard-title .it {
	font-style: italic;
	color: var(--accent);
}
.mcard-sub {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 300;
	font-size: 18px;
	color: var(--text-dim);
	margin: 0 0 22px;
}
/* Une ligne d'offre : nom à gauche (+ drapeau), prix poussé à droite. Filet sauge ENTRE
   les lignes seulement (pas au-dessus de la première). */
.oline {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 15px 0;
	/* PASSAGE À LA LIGNE AUTORISÉ PARTOUT, sans seuil. Le prix est en « nowrap » à 26px : sans
	   ça, la largeur MINIMALE de la ligne dépasse celle de la carte, or la colonne « 1fr » de
	   .cards-2 ne peut pas descendre sous le min-content de son contenu. La carte déborde donc,
	   et avec elle toute la page : les fonds pleine largeur s'arrêtent à la fenêtre pendant que
	   le contenu continue, ce qui donne un « sol coupé » et un décalage général sur TOUTES les
	   sections de la page, pas seulement celle-ci.
	   « wrap » ne fait rien tant que la ligne tient : sur grand écran, aucun effet. Cette règle
	   n'a donc aucune raison de porter un seuil. Elle en portait un (700) depuis le 17/07, et
	   c'était le pire endroit possible : à 700 UNE carte occupe 640px, mais à 701 les deux sont
	   côte à côte et chacune tombe à 308px. Le correctif s'arrêtait exactement là où sa cause
	   devenait la plus forte. Repéré par Alexandra le 19/07/2026 sur la page Tout compris. */
	flex-wrap: wrap;
}
.oline + .oline {
	border-top: 1px solid rgba(155, 196, 165, .22);
}
.oline-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 17px;
	color: var(--text-strong);
}
/* Astérisque de renvoi (Essentiel*) vers la note de bas de carte : petite, sauge. */
.oline-name sup {
	font-size: .6em;
	color: var(--accent);
	margin-left: 1px;
}
/* Rappel de l'astérisque devant la note du bas : parenthèses en violet (couleur du foot),
   étoile seule en sauge. */
.mcard-foot .foot-ast {
	color: var(--accent);
}
/* Drapeau : pastille sauge pleine, texte encre (mono capitales) — « Le + demandé ». */
.oline-flag {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #15082f;
	background: var(--accent);
	padding: 3px 9px;
	border-radius: 20px;
	white-space: nowrap;
}
/* Prix : poussé à droite, montant Fahkwang, € APRÈS le chiffre en sauge, mentions en mono. */
.oline-price {
	margin-left: auto;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-size: 26px;
	font-weight: 400;
	color: var(--text-strong);
	letter-spacing: -.01em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
/* Montant à largeur fixe, aligné à droite : les nombres s'alignent à droite et, du coup,
   les mentions « dès » qui les précèdent tombent toutes à la même verticale (créa). */
.oline-amt {
	display: inline-block;
	min-width: 5ch;
	text-align: right;
}
.oline-pre {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-mute);
	margin-right: 8px;
}
.oline-cur {
	color: var(--accent);
	margin-left: 3px;
	font-size: 17px;
}
.oline-per {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	color: var(--text-dim);
	margin-left: 5px;
}
/* Note de bas de carte (serif italique). */
.mcard-foot {
	margin: 20px 0 0;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 300;
	font-size: 14px;
	color: var(--text-dim);
}

/* Il y avait ici un bloc « max-width: 700px » qui posait « .oline { flex-wrap: wrap } ».
   Il est REMONTÉ dans la règle de base le 19/07/2026, sans seuil : voir le commentaire de
   .oline. Le box-sizing global n'a jamais rien pu faire pour ce cas : ce n'est pas du padding,
   c'est du contenu qui refuse de se réduire. */

/* ============================================================================
   Section « Le modèle, en clair » (gws/modele + gws/box + gws/prix).
   En-tête partagé (titre à gauche, note à droite) comme .grille-body ; puis le
   corps .tc-model en pleine largeur : split-top (colonnes « création / maintenance »
   + tableau d'exemple chiffré) puis proofs3 (3 preuves). Le tableau réutilise la
   brique gws/prix (.price) pour les montants, restylée dans .ea. Débridage éditeur :
   chaque grille imbriquée porte « gws-layout » (anti-#3), plus filets de sûreté.
   Portée depuis passation-pages/pages.css, adaptée aux tokens du thème.
   ========================================================================== */
.modele-body {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 22px;
	row-gap: 0;
	align-items: start;
}
.modele-body > .sh-eyebrow { grid-column: 1 / 9; }
.modele-body > .sh-title { grid-column: 1 / 8; }
.modele-body > .sh-note { grid-column: 9 / 13; align-self: start; }
.modele-body > .tc-model { grid-column: 1 / -1; margin-top: 54px; }

/* Corps : deux colonnes (texte | tableau d'exemple). */
.tc-model .split-top {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: 70px;
	align-items: center;
}

/* Colonnes « La création / La maintenance ». */
.tc-model .mk .k {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--accent-soft);
	margin: 0 0 14px;
}
.tc-model .mk p {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 300;
	font-size: 23px;
	line-height: 1.4;
	letter-spacing: -.01em;
	color: var(--text-strong);
	margin: 0;
}
.tc-model .mk p em { font-style: italic; color: var(--accent); }
.tc-model .mk + .mk { margin-top: 30px; }

/* Tableau d'exemple chiffré. */
.tc-model .extbl .ec {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-mute);
	margin: 0 0 8px;
}
.tc-model .extbl .er {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: baseline;
	padding: 24px 2px;
	border-top: 1px solid var(--line-soft);
}
.tc-model .extbl .er:first-of-type { border-top: 1px solid var(--line); }
.tc-model .chip {
	display: inline-block;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 9px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent-soft);
	border: 1px solid rgba(155, 196, 165, .3);
	border-radius: 999px;
	padding: 5px 11px;
	margin: 0 0 12px;
}
.tc-model .chip.mut { color: var(--text-mute); border-color: var(--glass-border); }
.tc-model .ed .er-t {
	display: block;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: 22px;
	letter-spacing: -.02em;
	color: var(--text-strong);
	margin: 0;
}
.tc-model .ed .er-d {
	display: block;
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--text-dim);
	line-height: 1.5;
}

/* Colonne prix : réutilise la brique gws/prix (.price), restylée en pile à droite. */
.tc-model .ea { text-align: right; white-space: nowrap; }
.tc-model .ea .price { display: block; margin: 0; gap: 0; }
.tc-model .ea .price .from {
	display: block;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 9.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-mute);
	margin: 0 0 6px;
}
.tc-model .ea .price .amt {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-size: 30px;
	color: var(--text-strong);
	letter-spacing: -.02em;
	line-height: .9;
}
.tc-model .ea .price .amt .cur { font-size: 18px; color: var(--accent); }
.tc-model .ea .mo {
	display: block;
	margin: 8px 0 0;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 9.5px;
	letter-spacing: .06em;
	color: var(--accent-soft);
}

/* Ligne total. */
.tc-model .extbl .er.tot {
	border-top: 1.5px solid rgba(155, 196, 165, .4);
	align-items: center;
	padding-top: 28px;
}
.tc-model .extbl .er.tot .ed .er-t { font-size: 24px; }
.tc-model .extbl .er.tot .ea .price .from { color: var(--text-mute); }
.tc-model .extbl .er.tot .ea .price .amt { font-size: 46px; color: var(--accent); letter-spacing: -.03em; }
.tc-model .extbl .er.tot .ea .price .amt .cur { font-size: 25px; }

/* Preuves (réutilise la base .proof / .proof-cat / .proof-t / .proof-desc). */
.tc-model .proofs3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 44px;
	margin-top: 60px;
	padding-top: 48px;
	border-top: 1px solid var(--line);
}
.tc-model .proofs3 .proof { padding: 0; border: none; }
.tc-model .proofs3 .proof-cat { margin-bottom: 12px; }
.tc-model .proofs3 .proof-t { font-size: 22px; }
.tc-model .proofs3 .proof-desc { max-width: none; font-size: 13.5px; }
/* Ici (et seulement ici) : pas de point vert, textes centrés dans chaque colonne. */
.tc-model .proofs3 .proof-t::before { display: none; }
.tc-model .proofs3 .proof-cat,
.tc-model .proofs3 .proof-t,
.tc-model .proofs3 .proof-desc {
	padding-left: 0;
	text-align: center;
}

/* Parité éditeur : gws-layout débride déjà les enfants directs (chaque grille porte
   « gws-layout ») ; filets de sûreté pour les conteneurs qui pourraient rester plafonnés
   à ~520px dans l'éditeur. Inertes sur le front (.editor-styles-wrapper n'y existe pas). */
.editor-styles-wrapper .modele-body .tc-model,
.editor-styles-wrapper .tc-model .split-top,
.editor-styles-wrapper .tc-model .extbl,
.editor-styles-wrapper .tc-model .er,
.editor-styles-wrapper .tc-model .proofs3 { max-width: none; }

/* Effondrement mobile. */
/* Le haut du modèle garde ses 2 colonnes jusqu'à 851, et non 1101 : à 850 elles font encore
   355 et 303px. Les 3 « preuves » en dessous restent, elles, calées sur 1100 : à 850 elles
   tomberaient à 229px chacune, ce qui est trop étroit. Deux composants de la même section,
   deux contraintes différentes, donc deux paliers. Audit du 18/07. */
@media (max-width: 850px) {
	.tc-model .split-top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 1100px) {
	.modele-body { display: block; }
	.modele-body > .tc-model { margin-top: 40px; }
	.tc-model .proofs3 { grid-template-columns: 1fr; gap: 32px; }
	/* Le plafond rendu. En desktop, « .proofs3 .proof-desc » se voit retirer son max-width
	   (l. 1775) et c'est légitime : la colonne ne fait que ~350px, le plafond ne mordrait
	   jamais. Mais ICI les 3 colonnes deviennent une seule : sans plafond, la description
	   s'étirait sur toute la largeur (~180 caractères par ligne à 1099, plus du double du
	   lisible). C'est LA leçon des plafonds : un max-width retiré parce que « la colonne est
	   déjà étroite » redevient indispensable dès que la colonne disparaît.
	   « margin-inline » et pas seulement « max-width » : le texte est centré (l. 1782), donc
	   la BOÎTE doit l'être aussi, sinon il se centre à l'intérieur d'un bloc collé à gauche. */
	.tc-model .proofs3 .proof-desc {
		max-width: 480px;
		margin-inline: auto;
	}
}

/* Panneau « Tout compris ». */
.allin-connect {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 34px 0 18px;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.allin-connect::before {
	content: "";
	height: 1px;
	width: 38px;
	background: var(--line);
}
.allin {
	padding: 34px 40px;
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
	-webkit-backdrop-filter: blur(16px) saturate(1.15);
	backdrop-filter: blur(16px) saturate(1.15);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
		-9px 12px 20px -14px rgba(0, 0, 0, .4),
		-3px 5px 9px -6px rgba(0, 0, 0, .3);
	transition: border-color .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
}
.allin:hover {
	transform: translateY(-5px);
	border-color: var(--accent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 42px 70px -34px rgba(0, 0, 0, .65);
}
.allin .mono {
	margin-bottom: 0;
}
.allin h2 {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: 30px;
	margin: 34px 0 12px;
	color: var(--text-strong);
	letter-spacing: -.028em;
}
.allin h2 em,
.allin h2 .it {
	font-style: italic;
	color: var(--accent);
}
.allin p {
	margin: 0;
	max-width: 900px;
	font-size: 14px;
	color: var(--text-dim);
}
/* Corps du panneau : texte a gauche, boutons a droite (2 colonnes), sans absolue,
   donc identique editeur/front. */
.allin-body {
	display: grid;
	grid-template-columns: 1fr auto;
	/* Ligne du titre figee a sa propre hauteur (min-content) : la colonne des boutons,
	   plus haute, ne peut plus etirer la ligne du titre et injecter de l'air autour de
	   lui. Le surplus de hauteur va dans la 2e ligne (auto), sous la description. Ainsi
	   les marges du titre (34 / 12) rendent comme dans les cartes. */
	grid-template-rows: min-content auto;
	column-gap: 40px;
	align-items: start;
}
.allin-body > h2,
.allin-body > p {
	grid-column: 1;
}
.allin-body > .allin-cta {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
}

/* Boutons du panneau : vrais blocs-boutons (texte ET lien editables), empiles,
   style pilule (ghost + solide) repris du hero. */
.allin-cta {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}
/* Boutons du panneau a largeur egale : le conteneur (grille, colonne auto) se cale
   sur le plus large, les deux boutons s'y etirent (align-items: stretch + width 100 %). */
.allin-cta .wp-block-button {
	width: 100%;
}
.allin-cta .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 12px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 13.5px;
	font-weight: 500;
	border: 1px solid rgba(155, 196, 165, .40);
	border-radius: 40px;
	padding: 11px 16px 11px 20px;
	color: var(--text);
	background: transparent;
	transition: all .2s;
	text-decoration: none;
}
.allin-cta .wp-block-button__link:hover {
	border-color: rgba(155, 196, 165, .85);
	background: rgba(155, 196, 165, .08);
}
.allin-cta .wp-block-button__link::after {
	content: "\25CF";
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 11px;
	color: var(--accent);
	background: rgba(155, 196, 165, .14);
	box-shadow: 0 0 6px rgba(155, 196, 165, .28);
}
.allin-cta .is-style-primary .wp-block-button__link {
	background: var(--pill);
	color: #15082f;
	border-color: transparent;
}
.allin-cta .is-style-primary .wp-block-button__link:hover {
	background: #c4ddca;
}
.allin-cta .is-style-primary .wp-block-button__link::after {
	content: "\2192";
	background: #15082f;
	color: var(--accent-light);
	box-shadow: none;
}

/* Editeur : le « sol » (fond decoratif pleine largeur) masque a l'edition. C'est un
   fond, pas une difference de structure : toute la mise en page reste identique
   editeur / front. */
.editor-styles-wrapper .stage::before {
	display: none;
}

/* PRIMITIVE DU MOULE (editeur seulement) : l'editeur plafonne chaque bloc a une
   largeur max par defaut (~520px, cf. Computed), ce que le front n'a pas -> dans une
   grille, les enfants (cartes, colonnes) ne remplissent pas leur cellule (trop etroits,
   trou au milieu). On neutralise ce plafond sur les enfants directs de tout conteneur
   de mise en page GWS marque « gws-layout ». Ecrit une fois : toute section future qui
   met « gws-layout » sur sa grille en herite automatiquement. .editor-styles-wrapper
   n'existe pas sur le front -> regle inerte cote visiteur. */
.editor-styles-wrapper .gws-layout > * {
	max-width: none;
}

/* Responsive de base (le peaufinage mobile complet viendra a la passe mobile dediee). */
@media (max-width: 1100px) {
	/* .stage-body est le SEUL cas du thème où les cartes vivent DIRECTEMENT dans la
	   grille 12 colonnes (« grid-column: span 6 » = deux par ligne) au lieu d'un
	   sous-conteneur .cards-2. Toutes les autres grilles ont leurs enfants en
	   « 1 / -1 » : les effondrer ne leur fait rien. Ici, « display: block » tue la
	   grille, les span 6 ne veulent plus rien dire et les cartes s'empilent —
	   régression introduite puis repérée par Alexandra le 17/07/2026, à 924 où les
	   deux cartes de l'accueil étaient validées côte à côte.
	   Donc on GARDE la grille jusqu'à 700 : seul l'en-tête passe pleine largeur, les
	   cartes conservent leurs deux colonnes. L'effondrement réel attend le téléphone. */
	.stage-body > .sh-eyebrow,
	.stage-body > .sh-title,
	.stage-body > .sh-note {
		grid-column: 1 / -1;
	}
	.stage-body > .card {
		margin-top: 22px;
	}
	/* La note passe à gauche sous le titre, mais GARDE son plafond de lisibilité
	   (300px dessinés). Le « max-width: none » est descendu au bloc 700 : sur un
	   téléphone la fenêtre fait déjà le plafond, en zone tablette elle étirerait la
	   note sur 1000px. Même correctif que .contact-left p et .call-card. */
	.sh-note {
		margin-left: 0;
		padding-top: 14px;
		text-align: left;
	}
	.allin-body {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}
	.allin-body > .allin-cta {
		grid-column: 1;
		grid-row: auto;
	}
	/* CARTE REPLIÉE : les 2 boutons passent CÔTE À CÔTE, à leur largeur naturelle.
	   L'empilement avec étirement (flex-direction: column + align-items: stretch +
	   width: 100%) est le design de la COLONNE ÉTROITE de droite, où il est juste. Hérité
	   tel quel par la carte repliée, il donnait deux boutons pleine largeur empilés au
	   milieu d'une carte largement assez large pour les mettre sur une ligne. Constaté par
	   Alexandra le 18/07 : « ça, c'est juste pas possible ».
	   L'empilement revient sous 560 seulement, voir « EMPILEMENT DES CTA » en fin de feuille. */
	.allin-cta {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.allin-cta .wp-block-button {
		width: auto;
	}
}

/* L'effondrement RÉEL de .stage-body : seulement au téléphone. Sa grille tient
   jusqu'ici parce que ses cartes y vivent en « span 6 » (deux par ligne) — voir le
   bloc 1100 juste au-dessus. Ce bloc doit rester APRÈS lui : sous 700, les deux
   s'appliquent et c'est le dernier qui doit gagner. */
@media (max-width: 700px) {
	.stage-body {
		display: block;
	}
	/* Les boutons de la carte « une seule formule » sont traités dans le bloc « EMPILEMENT
	   DES CTA » en fin de feuille, avec tous les autres, et à 560 et non 700. */
}

/* =======================================================================
   §03 RÉALISATIONS — carousel de tuiles projet (méthode Hybride full).
   En-tête sur la grille partagée (comme les Offres), piste défilante en
   gws/box (.reals-track), tuiles gws/realisation-carte. Décor, pastilles
   et image rendus en PHP.
   ======================================================================= */

/* En-tête : même grille 12 colonnes que .stage-body (eyebrow + titre à gauche,
   note à droite), puis la piste et les contrôles en pleine largeur. */
.reals-body {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 22px;
	row-gap: 0;
	align-items: start;
}
.reals-body > .sh-eyebrow { grid-column: 1 / 9; }
.reals-body > .sh-title { grid-column: 1 / 8; }
.reals-body > .sh-note { grid-column: 9 / 13; align-self: start; }
.reals-body > .reals-track { grid-column: 1 / -1; margin-top: 54px; }
.reals-body > .reals-controls { grid-column: 1 / -1; }

/* La piste : 2 tuiles visibles, défilement horizontal aimanté, ascenseur masqué.
   La marge basse laisse respirer l'ombre en L des tuiles (sinon rognée par l'overflow). */
.reals-track {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	/* PAS de scroll-snap : scroll-snap-type (mandatory OU proximity) casse le LCP de
	   l'accueil. Le re-snap declenche par le chargement asynchrone des images empeche
	   Chrome de figer un LCP -> NO_LCP (prouve par bissection le 13/07/2026). Le bouton
	   « Projet suivant » aligne deja chaque tuile via scrollBy. Voir recette cwv-no-lcp. */
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 6px 2px 34px;
}
.reals-track::-webkit-scrollbar { display: none; }
.reals-track > .real { flex: 0 0 calc((100% - 22px) / 2); }

/* Une tuile projet : image en couche de fond, voile, pastille de statut, bloc d'infos.
   L'image peut venir d'un vrai core/image (version B : <img> avec alt/srcset/lazy) ou,
   en repli, d'un fond CSS (.real-shot). La superposition est gérée en flex + order +
   z-index (aucun conteneur absolu), pour que l'image (fond) et le nom (core/heading
   compté SEO) cohabitent proprement dans le même conteneur. */
.real { display: flex; flex-direction: column; }
.real-media {
	position: relative;
	aspect-ratio: 16 / 10;
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color .35s ease, box-shadow .5s ease;
}
.real:hover .real-media {
	transform: translateY(-4px);
	border-color: var(--accent);
	box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .7);
}
/* Couche image (fond), trois formes possibles, toutes en couche 0 plein cadre :
   - .real-shot        : span à background CSS (repli des anciennes tuiles) ;
   - .real-media > figure : vrai bloc image core (si jamais utilisé) ;
   - .real-shot-img    : <img> rendu par wp_get_attachment_image depuis la médiathèque
                         (version retenue : alt de la médiathèque, srcset, lazy natifs). */
.real-shot,
.real-media > figure,
.real-shot-img {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}
.real-shot {
	background: radial-gradient(120% 100% at 40% 20%, #2e1a5255, #0d0620);
	background-size: cover;
	background-position: center;
	filter: brightness(.9);
	transform: scale(1.03);
	transition: filter .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.real-media > figure img,
.real-shot-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: brightness(.9);
	transform: scale(1.03);
	transition: filter .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.real:hover .real-shot,
.real:hover .real-media > figure img,
.real:hover .real-shot-img { filter: brightness(1); transform: scale(1.08); }
.real-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, .5) 74%, rgba(0, 0, 0, .85) 100%);
}
/* Voile violet d'unification (toute l'image) : ramène des captures très différentes
   dans la charte et tempère la teinte verte de certaines. Il DISPARAÎT au survol pour
   révéler l'image réelle. Absolu -> hors du flux flex (n'affecte pas l'ordre des infos).
   Le voile noir du bas (.real-scrim) reste, lui, pour la lisibilité du titre/lien. */
.real-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #160a2e;
	opacity: .38;
	transition: opacity .5s ease;
	pointer-events: none;
}
.real:hover .real-media::before {
	opacity: 0;
}
.real .tag {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 3;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent);
	border: 1px solid var(--accent);
	border-radius: 30px;
	padding: 7px 13px;
	background: rgba(21, 8, 47, .35);
}
.real .tag-live { color: #15082f; background: var(--pill); border-color: transparent; }
/* Bloc d'infos superposé (bas de tuile) : enfants flex de .real-media, réordonnés
   (numéro/catégorie, puis nom, puis lien) et remontés au-dessus du voile par z-index.
   Le nom est un core/heading (compté SEO), d'où le sélecteur .real-media > .wp-block-heading. */
.real-line {
	position: relative;
	z-index: 3;
	order: 1;
	display: flex;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.real-media > .wp-block-heading,
.real-media > h3 {
	position: relative;
	z-index: 3;
	order: 2;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: 25px;
	color: #fff;
	margin: 12px 0 0;
}
.real-link {
	position: relative;
	z-index: 3;
	order: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--accent);
	font-size: 13.5px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .5s ease, opacity .45s ease, margin-top .5s ease;
}
.real:hover .real-link { max-height: 40px; opacity: 1; margin-top: 14px; }
/* Flèche diagonale en SVG (le caractère ↗ s'affichait en emoji bleu sur Windows/Chrome).
   stroke:currentColor -> elle prend la couleur sauge du lien. */
.real-link .ic-arrow { width: 13px; height: 13px; flex: none; }
/* Focus : souris sans contour fantôme, clavier avec liseré visible (WCAG 2.4.7 / RGAA). */
.real-link:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.real-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: none; }

/* Contrôles : bouton « Projet suivant » aligné à droite, pastille ronde animée. */
.reals-controls { display: flex; justify-content: flex-end; margin-top: 26px; }
.reals-next {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--accent);
}
.reals-next .ic {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--accent);
	color: #15082f;
	border: 1px solid var(--accent);
	font-size: 13px;
	transition: transform .35s ease;
}
.reals-next:hover .ic { transform: translateX(3px); }
.reals-next:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.reals-next:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: none; }

/* La 03 pose ses tuiles sur le « sol » lumineux de .stage : ombre en L (pas d'inset
   blanc, tuiles opaques), pic du sol recentré au milieu des tuiles. */
.stage .real-media {
	box-shadow: -9px 12px 20px -14px rgba(0, 0, 0, .4), -3px 5px 9px -6px rgba(0, 0, 0, .3);
}
.reals.stage::before {
	background: linear-gradient(to bottom,
		transparent 0%,
		rgba(178, 168, 208, .05) 22%,
		rgba(178, 168, 208, .08) 50%,
		rgba(178, 168, 208, .05) 78%,
		transparent 100%);
}

/* Repli mobile léger (le peaufinage complet viendra à la passe mobile dédiée). */
@media (max-width: 1100px) {
	.reals-body { display: block; }
	.reals-body > .reals-track { margin-top: 28px; }
	.reals-track > .real { flex: 0 0 82%; }
}

/* =======================================================================
   §04 RÉASSURANCE — accroche + grille de 6 points (méthode Hybride légère).
   En-tête sur la grille partagée (comme les Offres / Réalisations) : eyebrow
   et titre à gauche, note à droite. Puis l'accroche pleine largeur et la grille
   de points en 2 colonnes. Puces en ::before, donc les titres restent des blocs
   core comptés par le SEO. Aucun élément en position absolue (parité éditeur=front).
   ======================================================================= */
.reass-body {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 22px;
	row-gap: 0;
	align-items: start;
}
.reass-body > .sh-eyebrow { grid-column: 1 / 9; }
.reass-body > .sh-title { grid-column: 1 / 8; }
.reass-body > .sh-note { grid-column: 9 / 13; align-self: start; }
.reass-body > .reass-lead { grid-column: 1 / -1; margin-top: 30px; }
.reass-body > .reass-grid { grid-column: 1 / -1; }

/* La primitive gws-layout retire le max-width de tous les enfants directs dans
   l'éditeur. On réaffirme les largeurs VOULUES (accroche 760, grille 1150) avec
   une spécificité supérieure, sinon elles s'étalent à l'édition. Inerte sur le front. */
.editor-styles-wrapper .reass-body .reass-lead { max-width: 760px; }
.editor-styles-wrapper .reass-body .reass-grid { max-width: 1150px; margin-inline: auto; }

.reass-lead {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.28;
	max-width: 760px;
	color: var(--text-strong);
	margin: 0;
}
.reass-lead em,
.reass-lead .it {
	font-style: italic;
	color: var(--accent);
}
.reass-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 72px;
	max-width: 1150px;
	margin: 64px auto 0;
}
.rpoint {
	position: relative;
	padding: 34px 0;
	border-top: 1px solid rgba(250, 246, 227, .10);
}
.rpoint:nth-child(1),
.rpoint:nth-child(2) {
	border-top: none;
	padding-top: 0;
}
.rpoint-t {
	position: relative;
	padding-left: 40px;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.08;
	letter-spacing: -.022em;
	color: var(--text-strong);
	margin: 0;
}
.rpoint-t::before {
	content: "";
	position: absolute;
	left: 1px;
	top: .56em;
	transform: translateY(-50%);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 12px rgba(155, 196, 165, .6);
}
.rpoint-d {
	padding-left: 40px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 14px;
	line-height: 1.72;
	color: var(--text-dim);
	max-width: 430px;
	margin: 13px 0 0;
}
@media (max-width: 1100px) {
	.reass-body { display: block; }
}
/* La GRILLE des puces garde ses 2 colonnes jusqu'à 951, et non 1101. Elle basculait en une
   seule colonne dès 1100, laissant tout le côté droit vide sur 400px de large (constaté par
   Alexandra le 18/07, même défaut que le hero : un palier réglé trop haut).
   D'OÙ VIENT LE 950, qui n'est pas arbitraire : la contrainte est le plus long titre de puce,
   « Vous n'êtes pas prisonnier », qui demande ~400px dans sa colonne (puce et son retrait de
   40px compris). Deux colonnes de 400px + la gouttière de 72px + les marges du site tombent
   à ~950. En dessous, ces titres passeraient sur deux lignes : c'est là qu'est la limite, pas
   dans la place disponible. */
@media (max-width: 950px) {
	.reass-grid {
		grid-template-columns: 1fr;
		column-gap: 0;
		margin-top: 40px;
	}
	/* En une colonne, la 2e puce n'est plus en tête de rangée : elle retrouve son filet. */
	.rpoint:nth-child(2) {
		border-top: 1px solid rgba(250, 246, 227, .10);
		padding-top: 34px;
	}
}

/* =======================================================================
   §05 À PROPOS — portrait + bio/CTA + credo (méthode Hybride full).
   En-tête sur la grille 12 colonnes partagée (note à droite), puis le corps
   en 3 colonnes (portrait / bio+actions / credo). Portrait = sous-bloc média
   gws/apropos-photo (imgId -> wp_get_attachment_image). Section sur le sol
   .stage. Aucun élément absolu -> parité éditeur=front.
   ======================================================================= */
.apropos-body {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 22px;
	row-gap: 0;
	align-items: start;
}
.apropos-body > .sh-eyebrow { grid-column: 1 / 9; }
.apropos-body > .sh-title { grid-column: 1 / 8; }
.apropos-body > .sh-note { grid-column: 9 / 13; align-self: start; }
.apropos-body > .ap-body { grid-column: 1 / -1; margin-top: 60px; }

/* Corps 3 colonnes. max-width réaffirmé dans l'éditeur (gws-layout retire les
   max-width des enfants directs, piège #12). */
.ap-body {
	display: grid;
	grid-template-columns: 280px 1fr 300px;
	gap: 60px;
	align-items: center;
	/* width:100% — sinon, en enfant de grille à marges auto, .ap-body rétrécit à la
	   largeur de son contenu (~1130px) au lieu de s'étirer jusqu'au plafond. width:100%
	   lui rend le comportement du bloc de la maquette : remplir, plafonner à 1320, centrer. */
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}
.editor-styles-wrapper .apropos-body .ap-body { max-width: 1320px; margin-inline: auto; }

/* Zone 1 — macaron portrait (le sous-bloc gws/apropos-photo rend .ap-photo). */
.ap-photo {
	position: relative;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: radial-gradient(120% 120% at 35% 25%, rgba(255, 250, 235, .06), rgba(31, 17, 63, .55) 52%, #0d0620 100%);
	box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .7);
}
.ap-photo::after {
	content: "";
	position: absolute;
	inset: -9px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .08);
	pointer-events: none;
}
.ap-photo .ph {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: .22em;
	color: var(--text-mute);
}
.ap-photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Moule v2 : le portrait est un core/image (figure > img) dans .ap-photo. Même
   cadrage que l'ancien .ap-photo-img, éditeur ET front. */
.ap-photo figure {
	margin: 0;
	width: 100%;
	height: 100%;
}
.ap-photo figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Sur le sol .stage : ombre en L (comme les tuiles Réalisations). */
.stage .ap-photo {
	box-shadow: inset 0 1px 0 rgba(255, 250, 235, .06),
		-9px 12px 20px -14px rgba(0, 0, 0, .4),
		-3px 5px 9px -6px rgba(0, 0, 0, .3);
}

/* Zone 2 — bio + actions. */
.ap-mid { justify-self: center; max-width: 430px; }
.ap-bio {
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.72;
	color: var(--text);
	max-width: 430px;
	margin: 0;
}
.ap-bio em,
.ap-bio .hi {
	font-style: italic;
	color: var(--accent);
}
.ap-actions {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-top: 36px;
	flex-wrap: wrap;
}
.ap-actions .wp-block-button { margin: 0; }
/* « Prendre contact » = bouton secondaire (look .btn), point central en ::after. */
.ap-actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 13.5px;
	font-weight: 500;
	border: 1px solid rgba(155, 196, 165, .40);
	border-radius: 40px;
	padding: 11px 16px 11px 20px;
	color: var(--text);
	background: transparent;
	transition: all .2s;
	text-decoration: none;
	white-space: normal;
}
.ap-actions .wp-block-button__link:hover {
	border-color: rgba(155, 196, 165, .85);
	background: rgba(155, 196, 165, .08);
}
.ap-actions .wp-block-button__link::after {
	content: "\25CF";
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 11px;
	color: var(--accent);
	background: rgba(155, 196, 165, .14);
	box-shadow: 0 0 6px rgba(155, 196, 165, .28);
}
/* « Lire la suite » = lien fléché (is-style-more) : on retire le chrome du bouton,
   flèche dans son rond en ::after, rotation au survol. */
.ap-actions .is-style-more .wp-block-button__link {
	border: none;
	background: none;
	padding: 0;
	gap: 14px;
	font-size: 15px;
	color: var(--accent);
}
.ap-actions .is-style-more .wp-block-button__link:hover {
	background: none;
}
.ap-actions .is-style-more .wp-block-button__link::after {
	content: "\2192";
	width: 26px;
	height: 26px;
	color: #15082f;
	background: var(--accent);
	border: 1px solid var(--accent);
	box-shadow: none;
	transition: transform .35s ease;
}
.ap-actions .is-style-more .wp-block-button__link:hover::after {
	transform: rotate(-45deg);
}

/* Zone 3 — credo sur épine. */
.ap-credo { position: relative; padding-left: 30px; }
.ap-credo::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, rgba(155, 196, 165, .1), rgba(155, 196, 165, .65), rgba(155, 196, 165, .1));
}
.ap-credo .kick {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-dim);
	margin: 0 0 22px;
}
.ap-credo .val {
	display: block;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: 38px;
	line-height: 1.18;
	letter-spacing: -.03em;
	color: var(--text-strong);
	margin: 0;
}
.ap-credo .val.it {
	font-style: italic;
	color: var(--accent);
}

/* Sol lumineux de la section (même esprit que Réalisations). */
.apropos.stage::before {
	background: linear-gradient(to bottom,
		transparent 0%,
		rgba(178, 168, 208, .05) 26%,
		rgba(178, 168, 208, .08) 56%,
		rgba(178, 168, 208, .05) 84%,
		transparent 100%);
}

/* SOUS 1100 : une seule colonne, TOUT CENTRÉ. C'est le traitement du téléphone, étendu à
   toute la bande tablette.
   POURQUOI, APRÈS AVOIR ESSAYÉ AUTRE CHOSE (18/07, deux tentatives rejetées par Alexandra) :
   trois colonnes sont impossibles sous 1100, le portrait (280px) et le credo (300px) étant
   FIGÉS, le texte du milieu tombait à ~300px dès 1101. Deux colonnes échouent de deux façons :
   portrait seul sur une rangée, il flotte au milieu de ~290px de vide de chaque côté ; portrait
   à gauche du reste, la colonne de droite (texte + boutons + credo, ~600px de haut) laisse un
   grand vide SOUS lui. Dans les deux cas le trou est seulement déplacé.
   LA VRAIE CAUSE : cette section n'a pas assez de matière pour remplir 800 à 1100px en
   colonnes. Un portrait, cinq lignes, deux boutons et trois mots ne font pas deux colonnes
   équilibrées. On cesse donc de vouloir remplir la largeur.
   POURQUOI CENTRER RÈGLE LE PROBLÈME : un vide SYMÉTRIQUE se lit comme une intention, un vide
   d'un seul côté comme un oubli. C'est ce qui gênait Alexandra depuis le début, et c'est elle
   qui a proposé le centrage. */
/* TABLETTE : grille 2 x 2, d'après le croquis d'Alexandra du 18/07.
     portrait | credo
     texte    | boutons

   POURQUOI CET APPARIEMENT-LÀ, ET PAS UN AUTRE. C'est LA clé de cette section, trouvée par
   Alexandra après quatre tentatives ratées de ma part (portrait seul sur une rangée ; portrait
   face au texte avec le credo dessous ; portrait face à texte + boutons + credo ; photo | texte
   puis boutons | credo). Toutes échouaient pour la même raison, que je cherchais du mauvais
   côté : je raisonnais en LARGEURS alors que le problème était en HAUTEURS.
   Les quatre blocs mesurent environ 240px (portrait), 250 (credo), 150 (texte) et 190
   (boutons). Mes essais mettaient systématiquement le portrait face au TEXTE, soit 240 contre
   150, et le credo se retrouvait orphelin quelque part : le vide changeait de coin sans jamais
   disparaître. En appariant portrait AVEC credo et texte AVEC boutons, les deux rangées ont
   enfin des hauteurs comparables. LEÇON : dans une grille, ce sont les hauteurs qui décident,
   pas les largeurs. NE PAS réapparier autrement sans Alexandra. */
@media (max-width: 1100px) {
	.apropos-body { display: block; }
	/* COLONNES À LA LARGEUR DE LEUR CONTENU, et c'est L'ENSEMBLE qui est centré
	   (justify-content). Avec deux colonnes ÉGALES et un contenu centré dans chacune, les
	   marges extérieures ne peuvent PAS être égales : le texte fait 430px, le credo nettement
	   moins, donc celui de gauche déborde plus vers l'extérieur. C'est arithmétique, pas un
	   réglage à ajuster (constaté par Alexandra le 18/07). En dimensionnant les colonnes sur
	   leur contenu et en centrant le bloc entier, les marges deviennent égales par
	   construction, quelles que soient les largeurs. Le « minmax(0, ...) » laisse les colonnes
	   se resserrer quand la place manque, au lieu de déborder. */
	.ap-body {
		grid-template-columns: minmax(0, max-content) minmax(0, max-content);
		justify-content: center;
		gap: 56px 72px;
		align-items: center;
		justify-items: center;
		margin-top: 40px;
	}
	/* .ap-mid devient TRANSPARENT pour la grille : sa bio et ses boutons passent en items
	   directs, ce qui permet de les poser dans deux cellules différentes sans toucher au
	   post_content. Même procédé que .hero-meta > div. */
	.ap-mid { display: contents; }
	.ap-photo   { grid-column: 1; grid-row: 1; width: 240px; height: 240px; }
	.ap-bio     { grid-column: 1; grid-row: 2; max-width: 430px; margin: 0; text-align: center; }
	/* « margin-top: 36px » annulée : elle servait à espacer les boutons du texte quand ils
	   étaient juste en dessous, dans la même boîte. Dans une cellule séparée, elle ne fait plus
	   que les décaler vers le bas et casse leur centrage vertical face au texte. */
	.ap-actions {
		grid-column: 2;
		grid-row: 2;
		flex-direction: column;
		align-items: center;
		margin-top: 0;
	}
	/* Le filet vertical du credo est décoratif et se place à GAUCHE : il n'a plus de sens une
	   fois le bloc centré. On le retire et on centre le texte. */
	.ap-credo {
		grid-column: 2;
		grid-row: 1;
		padding-left: 0;
		text-align: center;
	}
	.ap-credo::before { display: none; }
}
/* TÉLÉPHONE : la grille 2 x 2 ne tient plus, tout s'empile et se centre. .ap-mid REDEVIENT une
   boîte, sinon la bio et les boutons resteraient éclatés dans des cellules qui n'existent plus. */
@media (max-width: 700px) {
	.ap-body {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.ap-mid { display: block; justify-self: center; text-align: center; }
	.ap-photo,
	.ap-bio,
	.ap-actions,
	.ap-credo {
		grid-column: auto;
		grid-row: auto;
	}
	.ap-bio { margin-inline: auto; }
	/* On REMET la marge de 36px annulée au palier 1100 : là-haut les boutons avaient leur
	   propre cellule de grille, ici ils sont de nouveau collés sous le texte dans .ap-mid,
	   et sans elle ils le touchent. Repéré par Alexandra le 19/07/2026. */
	.ap-actions { flex-direction: row; justify-content: center; margin-top: 36px; }
}
/* Il y avait ici un bloc « max-width: 700px » qui centrait la section pour le téléphone.
   Il est devenu REDONDANT le 18/07 : le centrage est remonté au palier 1100 ci-dessus, qui
   s'applique donc aussi au téléphone. Deux sources pour un même réglage finissent toujours
   par diverger, on n'en garde qu'une. Le rendu téléphone validé par Alexandra est inchangé. */

/* =======================================================================
   PAGE À PROPOS — sections propres à la page /a-propos/ (méthode Hybride).
   Gabarit = notre .wrap : les largeurs custom de la maquette Claude Design
   sont écartées, le contenu respire jusqu'à nos marges au lieu d'être boxé
   au centre. Chaque section porte une classe .apropos-* pour scoper.
   ======================================================================= */

/* Ce qui me guide (gws/guide) : libellé centré + 3 valeurs à filet. */
.apropos-guide .g-lbl {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--text-mute);
	text-align: center;
	margin: 0 0 44px;
}
.apropos-guide .g-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(30px, 4vw, 60px);
}
.apropos-guide .g-col {
	border-top: 1px solid var(--line);
	padding-top: 26px;
	text-align: center;
}
.apropos-guide .g-col .cv {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: 28px;
	letter-spacing: -.02em;
	color: var(--text-strong);
	margin: 0;
}
.apropos-guide .g-col .cv em,
.apropos-guide .g-col .cv .it {
	font-style: italic;
	color: var(--accent);
}
.apropos-guide .g-col .cd {
	font-family: var(--wp--preset--font-family--geist);
	font-size: 14.5px;
	line-height: 1.68;
	color: var(--text-dim);
	margin: 16px 0 0;
}
@media (max-width: 820px) {
	.apropos-guide .g-cols {
		grid-template-columns: 1fr;
		gap: 30px;
		/* ON « BOXE » (demande d'Alexandra, 19/07/2026). En colonne unique, les trois blocs
		   s'étiraient d'un bord à l'autre : une phrase de deux lignes traversait 745px, et les
		   filets de séparation avec elle. Ça ne se lisait plus comme une colonne.
		   560px, la MÊME valeur que les colonnes de prose de la section « Parcours » juste en
		   dessous. Ce n'est pas un chiffre au hasard : ces deux sections se suivent, leur donner
		   le même axe fait lire la page comme une seule colonne au lieu de deux blocs sans
		   rapport. Le plafond ne mord qu'au-delà de ~615px de fenêtre, donc il ne change rien au
		   téléphone déjà validé, et il entre en action pile là où Alexandra le demandait. */
		max-width: 560px;
		margin-inline: auto;
	}
}
/* Téléphone : « Ce qui me guide » est la section qui SUIT DIRECTEMENT le hero. Le hero
   pose déjà 70px sous lui, donc ses 90px de .pad portaient l'écart à 160px, alors que
   toutes les autres transitions du site valent 98px. On reprend le calcul de la
   respiration de l'accueil (70 + 28 = 98) pour retomber sur le repère commun. */
@media (max-width: 700px) {
	.apropos-guide {
		padding-top: 28px;
	}
}
/* AU-DESSUS DE 700 : on resserre les deux respirations qui encadrent « Ce qui me guide »
   (constat d'Alexandra, 19/07/2026, à toutes les largeurs de la bande).
   LE RYTHME DU SITE, pour situer : `.pad` vaut 90px en haut et en bas, donc une transition
   entre deux sections vaut 180px au-dessus de 700. Sur téléphone, le bas tombe à 8px et la
   transition vaut 98px, calée sur le bas du hero. Ces 180px ne se voient nulle part ailleurs
   parce que les autres sections sont denses ; ici, « Ce qui me guide » se termine par une
   phrase courte et centrée, et la section suivante s'ouvre sur un chapô tout aussi aéré. Deux
   blocs légers séparés par 180px de vide, ça ne se lit plus comme une respiration mais comme
   un trou.
   60px, soit les deux tiers de 90 : la transition passe de 180 à 120, et l'écart sous le hero
   de 160 à 130. On reste nettement au-dessus des 98px du téléphone, donc la hiérarchie
   téléphone / grand écran est préservée.
   Le seuil à 701 est justifié et non hérité : sous 700, le site a SON PROPRE rythme (98px),
   qu'Alexandra a validé et qui ne doit pas bouger.
   ⚠ PORTÉE VOLONTAIREMENT LIMITÉE À CETTE PAGE. La question de savoir si 180px est trop grand
   PARTOUT sur grand écran reste ouverte : c'est une décision de charte, pas une retouche. */
@media (min-width: 701px) {
	.apropos-guide { padding-top: 60px; padding-bottom: 60px; }
	.apropos-parcours { padding-top: 60px; }
}

/* Parcours (gws/parcours) : 2 colonnes texte encadrant le portrait rond, sur le sol.
   Placement explicite en grille (texte | portrait | texte) : l'ordre du DOM (portrait
   rendu en premier) n'impose pas l'ordre visuel. */
.apropos-parcours .ap-prose2 {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto auto;
	align-items: start;
	gap: clamp(32px, 4vw, 58px);
}
/* Bio : chapô pleine largeur au-dessus du trio (parcours | portrait | promesse).
   Rangée 1 = la bio (les 3 colonnes) ; rangée 2 = le trio inchangé. */
.apropos-parcours .ap-bio-lead {
	grid-column: 1 / -1;
	grid-row: 1;
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 300;
	font-size: clamp(20px, 2.1vw, 24px);
	line-height: 1.5;
	letter-spacing: -.015em;
	color: var(--text-strong);
}
.apropos-parcours .ap-bio-lead em,
.apropos-parcours .ap-bio-lead .it {
	font-style: italic;
	color: var(--accent);
}
.apropos-parcours .side-l {
	grid-column: 1;
	grid-row: 2;
}
.apropos-parcours .parcours-mid {
	grid-column: 2;
	grid-row: 2;
	align-self: center;
	text-align: center;
}
.apropos-parcours .side-r {
	grid-column: 3;
	grid-row: 2;
	text-align: right;
}
.apropos-parcours .side .kick {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #b9a9d6; /* violet demandé par le handoff (distinct du sauge) */
	margin: 0 0 14px;
}
.apropos-parcours .side .lead {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 300;
	font-size: clamp(20px, 2.2vw, 23px);
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--text-strong);
	margin: 0 0 14px;
}
.apropos-parcours .side .lead em,
.apropos-parcours .side .lead .it {
	font-style: italic;
	color: var(--accent);
}
.apropos-parcours .side p {
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 300;
	font-size: 16.5px;
	line-height: 1.8;
	color: var(--text);
	margin: 0;
}
.apropos-parcours .rnd {
	width: 190px;
	height: 190px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin: 0 auto;
	border: 1px solid var(--glass-border);
	box-shadow: inset 0 1px 0 rgba(255, 250, 235, .08), -6px 10px 24px -14px rgba(0, 0, 0, .6);
	filter: saturate(.98);
}
.apropos-parcours .stamp-line {
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.apropos-parcours .stamp-line b {
	color: var(--accent);
	font-weight: 400;
}
@media (max-width: 820px) {
	.apropos-parcours .ap-prose2 {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.apropos-parcours .ap-bio-lead {
		grid-column: 1;
		grid-row: auto;
		order: -1; /* la bio reste en tête de la pile mobile */
		max-width: 100%;
	}
	.apropos-parcours .side-l,
	.apropos-parcours .parcours-mid,
	.apropos-parcours .side-r {
		grid-column: 1;
		grid-row: auto;
	}
	/* Seules les colonnes de prose passent à gauche ; .parcours-mid garde son
	   centrage par défaut pour que le portrait ET le nom (.stamp-line) restent centrés.
	   AJOUT DU 19/07/2026 : le BLOC est désormais centré, mais son TEXTE reste calé à gauche.
	   La distinction fait tout. Alexandra constatait qu'après une photo centrée, des blocs de
	   prose plaqués à gauche font désordre, et elle a raison : c'est la POSITION du bloc qui
	   jurait, pas l'alignement des lignes. Centrer les lignes elles-mêmes (comme la section
	   « Ce qui me guide », où le texte fait deux lignes) donnerait ici des paragraphes de CINQ
	   lignes en drapeau des deux côtés, illisibles.
	   560px : ~65 caractères par ligne à 16,5px, la zone de lecture confortable. À 820, ces
	   paragraphes en faisaient près de 90. Et c'est la MÊME valeur que la section « Ce qui me
	   guide » juste au-dessus, pour que les deux partagent un axe.
	   AUCUN SEUIL ÉCRIT, et c'est voulu : le plafond ne mord qu'au-delà de ~615px de fenêtre,
	   donc il n'agit de lui-même qu'à partir du 600 signalé par Alexandra, et ne touche pas au
	   téléphone déjà validé. Un réglage qui se déclenche par sa propre mesure n'a pas besoin
	   qu'on lui invente une borne. */
	.apropos-parcours .side-l,
	.apropos-parcours .side-r {
		text-align: left;
		max-width: 560px;
		margin-inline: auto;
	}
	/* Empilé, le bloc identité (portrait + nom) touchait presque « Le parcours » :
	   le seul écart était le gap de grille. On le détache un peu. */
	.apropos-parcours .parcours-mid {
		margin-bottom: 16px;
	}
}

/* IA · cible + citation (gws/ia-cible) : prose centrée + citation, sur le sol.
   Largeur de lecture conservée (long paragraphe + citation), centrée dans .wrap. */
.apropos-ia-cible .ia-more {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}
/* Grand titre « Vous n'achetez pas un site… » agrandi (design Claude Design,
   remonté sur notre échelle : gabarit .wrap, pas les 1180px de la maquette). */
.apropos-ia-cible .ia-more .lead {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: clamp(38px, 4vw, 54px);
	line-height: 1.08;
	letter-spacing: -.03em;
	color: var(--text-strong);
	margin: 0;
}
.apropos-ia-cible .ia-more .lead em,
.apropos-ia-cible .ia-more .lead .it {
	font-style: italic;
	color: var(--accent);
}
.apropos-ia-cible .ia-more .body {
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 300;
	font-size: 17.5px;
	line-height: 1.9;
	color: var(--text-dim);
	max-width: 720px;
	margin: 44px auto 0;
}
/* Citation encadrée par deux filets sauge (double trait fin) — design Claude Design. */
.apropos-ia-cible .ia-obj {
	position: relative;
	margin: 76px auto 0;
	max-width: 1000px;
	padding: 52px 40px 56px;
	border: 0;
	border-top: 1px solid rgba(155, 196, 165, .42);
	border-bottom: 1px solid rgba(155, 196, 165, .42);
	text-align: center;
}
.apropos-ia-cible .ia-obj::before,
.apropos-ia-cible .ia-obj::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(155, 196, 165, .22);
}
.apropos-ia-cible .ia-obj::before { top: 6px; }
.apropos-ia-cible .ia-obj::after { bottom: 6px; }
.apropos-ia-cible .ia-obj p {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(23px, 2.4vw, 33px);
	line-height: 1.4;
	color: var(--text-strong);
	max-width: 900px;
	margin: 0 auto;
}
.apropos-ia-cible .ia-obj em,
.apropos-ia-cible .ia-obj .it {
	color: var(--accent);
}
@media (max-width: 820px) {
	.apropos-ia-cible .ia-obj {
		margin-top: 60px;
		padding: 44px 6px 48px;
	}
	.apropos-ia-cible .ia-more .body {
		font-size: 16px;
	}
}

/* ============================================================
   Section « site hybride » — page Créer (centrée, colonnes
   auto-équilibrées). Design Claude Design, intégré 13/07/2026.
   Jetons de notre charte ; polices en variables ; largeurs
   remontées sur notre échelle (corps lisible ~1240).
   ============================================================ */
.hyb-wrap { text-align: center; }
.hyb-kick { display: inline-block; margin-bottom: 26px; }
.hyb-title { font-family: var(--wp--preset--font-family--fahkwang); font-weight: 400; font-size: clamp(40px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -.032em; color: var(--text-strong); max-width: 1200px; margin: 0 auto; }
.hyb-title .it { font-style: italic; color: var(--accent); }
.hyb-merge { display: flex; align-items: center; justify-content: center; gap: 26px; margin: 56px auto 8px; flex-wrap: wrap; }
.hyb-node { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; width: 230px; height: 130px; border-radius: 20px; border: 1px solid var(--glass-border); background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); backdrop-filter: blur(12px) saturate(1.15); -webkit-backdrop-filter: blur(12px) saturate(1.15); }
.hyb-node .k { font-family: var(--wp--preset--font-family--geist-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-mute); }
.hyb-node .v { font-family: var(--wp--preset--font-family--fahkwang); font-size: 23px; color: var(--text-strong); }
.hyb-node.hy { border-color: rgba(155,196,165,.42); background: linear-gradient(135deg, rgba(155,196,165,.16), rgba(155,196,165,.05)); }
.hyb-node.hy .v { color: var(--accent); }
.hyb-op { font-family: var(--wp--preset--font-family--fahkwang); font-size: 30px; color: var(--accent-soft); }
.hyb-body { columns: 2; column-gap: 64px; column-rule: 1px solid var(--line-soft); max-width: 1240px; margin: 54px auto 0; text-align: left; }
.hyb-body p { font-family: var(--wp--preset--font-family--geist); font-size: 17px; line-height: 1.78; color: var(--text-dim); margin: 0; }
.hyb-body p + p { margin-top: 0; }
.hyb-close { max-width: 1040px; margin: 56px auto 0; }
.hyb-close p { font-family: var(--wp--preset--font-family--fahkwang); font-weight: 400; font-size: clamp(28px, 2.9vw, 40px); line-height: 1.22; letter-spacing: -.02em; color: var(--text-strong); }
.hyb-close .it { font-style: italic; color: var(--accent); }
/* LA RANGÉE DE L'ÉQUATION — trois paliers, et le principe qui les gouverne : c'est la
   COMPOSITION qui s'adapte, pas la CARTE. Une carte dessinée à 230px qu'on étire à 314px
   n'est plus la même carte. Constaté par Alexandra le 19/07/2026 : à 800, les cartes étirées
   devenaient grossières alors qu'elles sont fines à 1101.

   AU-DESSUS DE 940 : rien à faire, les trois tiennent EN LIGNE à leur taille de bureau. Les
   cartes sont à taille fixe (230x130) : la rangée demande 834px (3x230 + les deux opérateurs
   + 4 gouttières de 26px), soit ~917px de fenêtre. Le palier valait 1100 : il coupait 180px
   trop tôt, encore un réflexe. On descend à 940 sans s'asseoir sur la limite physique.

   601-940 : l'équation se PLIE. « Codé + WordPress » sur la première ligne, « = » sur la
   deuxième, « Hybride » centré sur la troisième. Cette ligne-là ne demande que ~585px de
   fenêtre, elle tient donc largement jusqu'à 600.
   Le « = » est le DERNIER <span> de la rangée (les cartes sont des <div>, les opérateurs des
   <span>) : lui donner toute la largeur force le passage à la ligne sans toucher au balisage. */
@media (min-width: 601px) and (max-width: 940px) {
	.hyb-merge > .hyb-op:last-of-type { width: 100%; }
}

/* 600 ET MOINS : la ligne « carte + carte » ne rentre plus. Tout s'empile, chaque opérateur
   sur sa propre ligne, et les cartes reprennent une largeur relative pour ne pas déborder.
   C'est le réglage validé par Alexandra à 372 le 18/07 : il ne change pas, il se contente de
   ne plus déborder sur toute la zone tablette. */
@media (max-width: 600px) {
	.hyb-merge { gap: 16px; }
	.hyb-node { width: calc(50% - 40px); min-width: 150px; }
	.hyb-op { width: 100%; }
}
/* Le TEXTE en 2 colonnes passe à 1 seule à 800, et non 1100. Comme le positionnement, rien
   n'y est figé : la seule borne est le confort de lecture, et à 800 chaque colonne fait encore
   332px. Le filet séparateur et le plafond de 640px suivent la bascule, ils n'ont de sens
   qu'en colonne unique. Audit des paliers du 18/07. */
@media (max-width: 800px) {
	.hyb-body { columns: 1; column-rule: none; max-width: 640px; }
}

/* =======================================================================
   06 FAQ (Hybride full) — accordéon natif <details> (zéro JavaScript).
   Section gws/faq (coquille + en-tête décor + pied) ; sous-bloc gws/faq-item
   (question H3 + réponse paragraphe, comptés SEO, séparés au rendu PHP dans
   <summary> et .faq-a). Numéros = compteur CSS. Aucun élément absolu -> parité.
   ======================================================================= */
.faq-body {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 22px;
	row-gap: 0;
	align-items: start;
}
.faq-body > .sh-eyebrow { grid-column: 1 / 9; }
.faq-body > .sh-title { grid-column: 1 / 8; }
.faq-body > .sh-note { grid-column: 9 / 13; align-self: start; }
.faq-body > .faq { grid-column: 1 / -1; }
.faq-body > .faq-foot { grid-column: 1 / -1; }

/* Liste accordéon. counter-reset : source des numéros 01-05 (décor). width:100% ->
   piège #16 (enfant de grille à marges auto : sans ça il rétrécit à son contenu au
   lieu de remplir jusqu'à 1150). max-width réaffirmé en éditeur (piège #12). */
.faq {
	counter-reset: faqcount;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 1150px;
	margin: 64px auto 0;
}
.editor-styles-wrapper .faq-body .faq { max-width: 1150px; margin-inline: auto; }

.faq-item,
.faq-item-edit {
	counter-increment: faqcount;
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	background: rgba(255, 255, 255, .04);
	transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.faq-item[open] {
	border-color: rgba(155, 196, 165, .40);
	background: rgba(255, 255, 255, .05);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 34px 56px -32px rgba(0, 0, 0, .6);
}
.faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 30px;
	padding: 28px 30px 28px 36px;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Focus : souris pas de contour (bug Chrome) ; clavier contour visible (WCAG 2.4.7). */
.faq-item summary:focus:not(:focus-visible) { outline: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 20px; }

.faq-num {
	flex: none;
	width: 24px;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--accent);
}
.faq-num::before { content: counter(faqcount, decimal-leading-zero); }

.faq-item .faq-q,
.faq-item-edit .faq-q {
	margin: 0;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-size: 23px;
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1.25;
	color: var(--text-strong);
}
.faq-item summary .faq-q { flex: 1; }

.faq-sign {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid var(--glass-border);
	color: var(--accent);
	font-size: 20px;
	line-height: 1;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.faq-sign::before { content: "+"; }
.faq-item[open] .faq-sign { background: var(--accent); color: #15082f; border-color: transparent; }
.faq-item[open] .faq-sign::before { content: "\2212"; }
.faq-item summary:hover .faq-sign { background: var(--accent); color: #15082f; border-color: transparent; }

.faq-a {
	padding: 2px 60px 30px 90px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 15.5px;
	color: var(--text-dim);
	line-height: 1.75;
	max-width: 880px;
}
.faq-a p { margin: 0; }
.faq-a a { color: var(--accent); font-weight: 400; text-decoration: none;
	background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat;
	background-position: 0 100%; background-size: 0% 1px; transition: background-size .7s cubic-bezier(.2, .7, .2, 1); }
.faq-a a:hover { background-size: 100% 1px; }
.faq-a a:focus:not(:focus-visible) { outline: none; }
.faq-a a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Pied « Toutes les questions ». width:100% -> piège #16 (comme .faq). */
.faq-foot {
	width: 100%;
	max-width: 1150px;
	margin: 48px auto 0;
}
.editor-styles-wrapper .faq-body .faq-foot { max-width: 1150px; margin-inline: auto; }

/* Lien fléché « carte » (pied FAQ + réutilisable ailleurs) : flèche dans un rond accent. */
.card-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--accent);
	font-weight: 500;
}
.card-link .ic {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--accent);
	color: #15082f;
	border: 1px solid var(--accent);
	font-size: 13px;
	transition: transform .35s ease;
}
.card-link:hover .ic { transform: rotate(-45deg); }
.card-link:focus:not(:focus-visible) { outline: none; }
.card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* Aperçu éditeur du sous-bloc : le front est un <details> (accordéon) ; dans l'éditeur
   on montre une carte « ouverte » éditable (question au-dessus, réponse en dessous). */
.faq-item-edit .faq-edit-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 30px 0 36px;
}
.faq-item-edit .faq-edit-top .faq-sign::before { content: "\2212"; }
.faq-item-edit .faq-edit-inner { padding: 8px 60px 26px 90px; }
.faq-item-edit .faq-edit-inner .faq-q { margin: 0 0 12px; }
.faq-item-edit .faq-edit-inner p {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 15.5px;
	color: var(--text-dim);
	line-height: 1.75;
	max-width: 880px;
}

/* Responsive doux (le réglage fin est en passe mobile). */
@media (max-width: 1100px) {
	.faq-body { display: block; }
	.faq,
	.faq-foot { max-width: none; }
	.faq-item summary { gap: 18px; padding: 22px 20px; }
	.faq-a { padding: 0 22px 24px 22px; }
	.faq-item-edit .faq-edit-top { padding: 20px 20px 0; }
	.faq-item-edit .faq-edit-inner { padding: 8px 22px 22px; }
}

/* Téléphone : la pastille +/- de 42px était lourde (surtout le « − » plein, ouvert). On la
   réduit à 34px, et on aligne le summary en HAUT : la pastille (et le numéro) se posent à
   hauteur de la première ligne au lieu de flotter au centre d'une question multi-lignes.
   Toute la ligne <summary> reste cliquable → aucune perte de cible tactile. */
@media (max-width: 700px) {
	.faq-item summary { align-items: flex-start; }
	.faq-sign { width: 34px; height: 34px; font-size: 17px; }
}

/* =======================================================================
   FAQ — MODE PAGE (page /faq/) : accordéon en 4 familles sur le sol .stage.
   Scopé sur la classe .faq-cat (propre au mode page) : la FAQ de la home reste
   intacte, et le style s'applique à l'identique sur le front ET dans l'éditeur.
   ======================================================================= */
/* Intertitre de famille : petit libellé mono, pleine largeur dans la grille.
   Scopé sur .faq-cat, classe PROPRE au mode page (la FAQ de la home n'en a pas)
   -> s'applique à l'identique sur le front ET dans l'éditeur, sans dépendre d'un id. */
.faq-body > .faq-cat { grid-column: 1 / -1; }
.faq-cat {
	max-width: 1150px;
	margin: 46px auto 0;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.faq-cat:first-child { margin-top: 0; }
/* La liste suit son intertitre avec un peu d'air : le .faq qui suit un intertitre
   (annule la marge de 64px de la home, sans toucher la FAQ home sans .faq-cat). */
.faq-cat + .faq { margin-top: 30px; }
/* Numérotation CONTINUE 01 -> 18 : reset au corps, pas de reset sur les familles. */
.faq-body { counter-reset: faqcount; }
.faq-cat ~ .faq { counter-reset: none; }

/* =======================================================================
   Mini-CTA de clôture (« Une autre question ? ») : centré, filet en haut.
   ======================================================================= */
.cta-mini-sec { text-align: center; border-top: 1px solid var(--line); }
.cta-mini-sec .wrap { max-width: 820px; }
.cta-mini-sec .sh-title { margin: 0 auto; }
.cta-mini {
	max-width: 640px;
	margin: 22px auto 0;
}
.cta-mini p {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-dim);
}
.cta-mini .wp-block-buttons { justify-content: center; margin-top: 26px; }

/* =======================================================================
   07 Contact (Hybride léger) — grille 2 colonnes : texte + 2 CTA à gauche,
   carte « Appel découverte » à droite (tout en blocs core, décor en CSS).
   Section sur le sol .stage. En-tête en flux (pas une grille) -> la grille de
   contact garde son max-width sur le front (pas de piège #16).
   ======================================================================= */
.contact-body > .sh-title { max-width: 620px; }
.contact-body > .contact-grid { margin-top: 44px; }

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 430px;
	gap: clamp(40px, 5vw, 80px);
	align-items: center;
	width: 100%;
	max-width: 1150px;
	margin: 0 auto;
}
.editor-styles-wrapper .contact-body .contact-grid { max-width: 1150px; margin-inline: auto; }

/* Colonne gauche : deux paragraphes en Fahkwang italique, accents verts, puis les CTA. */
.contact-left p {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(20px, 2vw, 25px);
	line-height: 1.38;
	color: var(--text-strong);
	max-width: 480px;
	margin: 0;
}
.contact-left p + p { margin-top: 14px; }
.contact-left p em { color: var(--accent); font-style: italic; }

/* CTA (mêmes boutons que l'À propos, flèche/point inversés). */
.contact-btns {
	display: flex;
	gap: 14px;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-top: 46px;
}
.contact-btns .wp-block-button { margin: 0; }
/* « Prendre contact » = bouton secondaire (contour), point vert en ::after. */
.contact-btns .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text);
	background: transparent;
	border: 1px solid rgba(155, 196, 165, .40);
	border-radius: 40px;
	padding: 11px 16px 11px 20px;
	transition: all .2s ease;
}
.contact-btns .wp-block-button__link:hover {
	border-color: rgba(155, 196, 165, .85);
	background: rgba(155, 196, 165, .08);
}
.contact-btns .wp-block-button__link::after {
	content: "\25CF";
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 8px;
	color: var(--accent);
	background: rgba(155, 196, 165, .14);
	box-shadow: 0 0 6px rgba(155, 196, 165, .28);
}
/* « Réserver votre appel » = bouton primaire (vert plein), flèche dans un rond sombre. */
.contact-btns .is-style-primary .wp-block-button__link {
	color: #15082f;
	background: var(--pill);
	border-color: transparent;
}
.contact-btns .is-style-primary .wp-block-button__link:hover { background: #c4ddca; }
.contact-btns .is-style-primary .wp-block-button__link::after {
	content: "\2192";
	font-size: 13px;
	color: var(--accent-light);
	background: #15082f;
	box-shadow: none;
}

/* Carte « Appel découverte » (colonne droite). Texte éditable ; look (verre, badge
   pilule, puces vertes, filets) ici. Ombre en L quand sur le sol .stage. */
.call-card {
	border: 1px solid var(--glass-border);
	border-radius: 26px;
	padding: 32px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
	box-shadow: inset 0 1px 0 rgba(255, 250, 235, .06), 0 40px 80px -40px rgba(0, 0, 0, .7);
}
.stage .call-card {
	box-shadow: inset 0 1px 0 rgba(255, 250, 235, .06),
		-9px 12px 20px -14px rgba(0, 0, 0, .4),
		-3px 5px 9px -6px rgba(0, 0, 0, .3);
}
.call-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.call-head .call-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: 26px;
	color: var(--text-strong);
}
.call-badge {
	margin: 0;
	flex: none;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	padding: 7px 13px;
	border: 1px solid rgba(155, 196, 165, .35);
	border-radius: 999px;
}
.call-meta { margin-top: 22px; }
.call-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 13px 0;
	border-top: 1px solid rgba(250, 246, 227, .06);
}
.call-k {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.call-v { margin: 0; font-size: 15px; color: var(--text-strong); text-align: right; }
.call-talk { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(250, 246, 227, .10); }
.call-talk-t {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.call-talk .wp-block-list { list-style: none; margin: 16px 0 0; padding: 0; }
.call-talk li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 12px;
	font-size: 14.5px;
	color: var(--text-dim);
	line-height: 1.5;
}
.call-talk li:last-child { margin-bottom: 0; }
.call-talk li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 8px rgba(155, 196, 165, .6);
}

/* Sol lumineux violet de la section (comme À propos / Réalisations). */
.contact-section.stage::before {
	background: linear-gradient(to bottom,
		transparent 0%,
		rgba(178, 168, 208, .05) 26%,
		rgba(178, 168, 208, .08) 56%,
		rgba(178, 168, 208, .05) 84%,
		transparent 100%);
}

/* La grille se dépile, MAIS le texte et la carte gardent leur largeur DESSINÉE
   (480px pour le texte, 430px pour la carte : les valeurs du desktop, cf. le
   « 1fr 430px » de .contact-grid). Sans ça, la carte fait 850px sur un écran de 850 —
   le DOUBLE de ce que le design prévoit — et le texte part en lignes de 120 caractères.
   Repéré par Alexandra le 17/07/2026 (« à 850 ça devient un peu n'importe quoi »).
   Les plafonds ne se retirent qu'au TÉLÉPHONE (bloc 700), là où la fenêtre EST le
   plafond. C'est le sens qu'avait la règle quand ce bloc valait 920 : sous ce seuil il
   n'y avait que des téléphones. Depuis qu'il vaut 1100, retirer le plafond ici étirerait
   le texte sur toute la zone tablette. */
/* 900 et non 1100, mais PAS plus bas, et la raison est propre à cette section : la carte
   d'appel de droite est FIGÉE à 430px, elle ne rétrécit jamais. Elle mange donc une part
   croissante à mesure qu'on se resserre. Il reste 430px au texte à 1000, 344px à 900, mais
   plus que 258px à 800 : c'est là qu'est la limite, et elle est plus haute que celle des
   sections à colonnes souples (800). Audit des paliers du 18/07. */
@media (max-width: 900px) {
	.contact-grid { grid-template-columns: 1fr; gap: 40px; }
	.call-card { max-width: 430px; }
}

/* 776-900 — LA CARTE RETROUVE UNE VOISINE (idée d'Alexandra, 19/07/2026).
   Dans la grille d'origine, la carte est FIGÉE à 430px et ne rétrécit jamais : c'était donc
   le TEXTE qui payait tout le resserrement (344px à 900, 258px à 800), et c'est ce qui avait
   fixé le palier à 900. En SORTANT le texte de la colonne — il passe pleine largeur, comme le
   titre — ce n'est plus lui qui commande la limite mais les BOUTONS, qui demandent bien moins
   de place. La composition à deux colonnes survit donc plus bas que 900.
   .contact-left passe en « display: contents » : ses trois enfants (2 paragraphes + les CTA)
   deviennent des items de grille posables séparément, sans toucher au post_content. Même
   procédé que .ap-mid et .hero-meta > div.
   PLANCHER À 776, et pas plus bas. Mesuré sur les captures d'Alexandra : le bouton le plus
   large (« Réserver votre appel ») fait 200px, et la colonne qui reste aux boutons vaut 236px
   à 776 puis passe sous 200px vers 735. Ça « rentrerait » donc encore à 740 — avec 3px de
   marge. Un seuil posé sur la limite physique donne une mise en page contrainte : on garde les
   36px de respiration que l'œil d'Alexandra a validés.
   MÊME MARGE HAUTE (46px) sur les boutons ET sur la carte : avec des marges égales, le
   « align-items: center » centre EXACTEMENT les deux boutons sur la hauteur de la carte. Sans
   ça, les boutons courts face à une carte très haute rejouent le déséquilibre de la section
   « Faisons connaissance » (18/07).
   Tout est scopé sur .contact-grid : .contact-btns est un composant PARTAGÉ (404, bandeau CTA
   de gws/methode). Non scopé, on empilerait leurs boutons au passage.
   Boutons EMPILÉS donc de MÊME LARGEUR (230px) : règle du site depuis le 17/07, deux largeurs
   différentes l'une sur l'autre se voient immédiatement. */
/* PLAFOND MONTÉ DE 900 À 956 le 19/07/2026, sur constat d'Alexandra. Au-dessus de 900, la
   mise en page d'origine reprenait la main (texte ET boutons dans la colonne de gauche), mais
   cette colonne ne vaut que 345px à 901 : les deux CTA demandent 383px côte à côte, donc ils se
   repliaient l'un sous l'autre EN GARDANT LEUR LARGEUR NATURELLE (200px et 169px). Empilés et
   inégaux : exactement ce que la règle du site interdit depuis le 17/07.
   On ne rustine pas ce ruban de 55px, on le SUPPRIME : la cause qui justifie la composition
   ci-dessous — la colonne de gauche ne peut plus porter le texte ET les boutons — est vraie de
   901 à 956 aussi. 957 est la première largeur où les deux CTA tiennent côte à côte, donc la
   première où la mise en page d'origine refonctionne réellement. Borne relevée par Alexandra.

   ⚠ POURQUOI « 956.98 » ET NON « 956 ». La largeur d'une fenêtre n'est PAS un entier : avec la
   mise à l'échelle d'un écran Windows, ce que les outils affichent « 956 » vaut réellement 956,4.
   Une borne posée sur l'entier (`max-width: 956px`) laisse donc échapper 956,4, la mise en page
   du bureau reprend la main, et ses boutons se replient à leur largeur naturelle : trou d'UN
   pixel, à un seul endroit, constaté par Alexandra le 19/07/2026 (955 bon, 957 bon, 956 non).
   Toute borne haute qui doit se raccorder à la règle suivante s'écrit donc en `.98`. */
@media (min-width: 776px) and (max-width: 956.98px) {
	.contact-grid {
		grid-template-columns: minmax(0, 1fr) 430px;
		column-gap: 40px;
		row-gap: 0;
		align-items: center;
	}
	.contact-grid .contact-left { display: contents; }
	.contact-grid .contact-left p { grid-column: 1 / -1; max-width: none; }
	.contact-grid .contact-btns {
		grid-column: 1;
		flex-direction: column;
		align-items: center;
		margin-top: 46px;
	}
	.contact-grid .contact-btns .wp-block-button {
		width: 100%;
		max-width: var(--cta-mobile-w);
	}
	.contact-grid .contact-btns .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
	.contact-grid .call-card { grid-column: 2; margin-top: 46px; }
}

/* TOUT CE QUI EST EMPILÉ (jusqu'à 775) — au-delà de 775 il n'y a plus la place d'apposer les
   boutons à la carte : la colonne tomberait vers 190px, sous les 200px du bouton vert. Tout
   reste donc empilé, mais on CENTRE les boutons et la carte au lieu de les laisser plaqués à
   gauche : un vide d'un seul côté se lit comme un oubli, un vide symétrique se lit comme une
   intention. Demande d'Alexandra, 19/07/2026.
   PAS DE BORNE BASSE, ET C'EST LE POINT IMPORTANT. La règle a d'abord été écrite en
   « 701-775 », ce qui donnait un site qui inversait l'ordre à 701 et le rétablissait à 699.
   Or l'argument (« on découvre la carte, ensuite on décide ») ne parle pas de largeur d'écran :
   il est vrai à 372 comme à 775. Un seuil ne se justifie que par une contrainte de place ;
   ici il n'y en a aucune. Étendu au téléphone sur décision d'Alexandra le 19/07/2026.
   ORDRE DE LECTURE INVERSÉ : la carte passe AVANT les boutons. On découvre ce que contient
   l'appel, ensuite seulement on décide de le réserver — un CTA posé avant l'argument demande
   de trancher sans avoir lu. Le HTML garde son ordre (texte, CTA, carte) : c'est l'affichage
   qui bascule, via « order » sur les items de grille. .contact-left redevient transparent pour
   que ses CTA soient un item à part entière, sinon ils resteraient prisonniers du texte.
   row-gap remis à 0 : les deux paragraphes deviennent des rangées séparées et hériteraient
   sinon des 40px de gouttière au lieu de leurs 14px. Chaque écart est donc porté par une marge
   (14px entre les paragraphes, 40px avant la carte, 46px avant les boutons). */
@media (max-width: 775px) {
	.contact-grid { row-gap: 0; }
	.contact-grid .contact-left { display: contents; }
	/* Plafond de 480px retiré : il servait à protéger le texte quand il partageait la rangée
	   avec la carte. Seul sur sa ligne, il doit s'étirer comme la prose des autres sections
	   (constaté par Alexandra à 761 le 19/07). ~70 caractères par ligne à 775, dans la zone
	   de lecture confortable, et c'est déjà ce que fait le bloc téléphone sous 700. */
	.contact-grid .contact-left p { max-width: none; }
	.contact-grid .call-card { order: 1; margin: 40px auto 0; }
	.contact-grid .contact-btns { order: 2; justify-content: center; }
}

@media (max-width: 700px) {
	.contact-body > .sh-title { max-width: none; }
	.contact-left p { max-width: none; }
	.call-card { max-width: none; padding-bottom: 24px; }
	/* Les boutons .contact-btns sont traités dans le bloc « EMPILEMENT DES CTA » en fin de
	   feuille, avec tous les autres, et à 560 et non 700. */
}

/* ============================================================================
   Section « Comment on travaille » (gws/methode) : en-tête (eyebrow + titre à
   gauche) sur la même grille 12 colonnes que .grille-body, puis une rangée
   d'étapes. Chaque étape = un numéro (COMPTEUR CSS, jamais saisi) + titre H4 +
   description. Filet fin au-dessus de chaque étape.
   ========================================================================== */
.method-body {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 22px;
	row-gap: 0;
	align-items: start;
}
.method-body > .sh-eyebrow { grid-column: 1 / 9; }
.method-body > .sh-title { grid-column: 1 / 8; }
.method-body > .steps { grid-column: 1 / -1; margin-top: 44px; }
.method-body > .sh-note { grid-column: 9 / 13; align-self: start; }

.method-body .steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(24px, 3vw, 44px);
	counter-reset: methodstep;
}
.method-body .step {
	counter-increment: methodstep;
}
.method-body .step::before {
	content: counter(methodstep, decimal-leading-zero);
	display: block;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 400;
	font-size: 30px;
	letter-spacing: -.03em;
	line-height: .8;
	color: var(--accent);
}
.method-body .step h4 {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: 21px;
	letter-spacing: -.02em;
	color: var(--text-strong);
	margin: 16px 0 10px;
}
.method-body .step p {
	font-family: var(--wp--preset--font-family--geist);
	font-size: 14px;
	line-height: 1.62;
	color: var(--text-dim);
	margin: 0;
}

/* Responsive de base (peaufinage à la passe mobile dédiée). */
@media (max-width: 1100px) {
	.method-body { display: block; }
	.method-body > .steps { margin-top: 36px; }
	.method-body .steps { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 700px) {
	.method-body .steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Variantes de « Comment on travaille » (gws/methode) — finale À propos.
   --centered : en-tête centré, sans numéro (le corps passe en bloc centré).
   --timeline : étapes en pastilles numérotées reliées par un filet horizontal.
   + bande CTA (.method-cta) en pied. COULEURS = thème (site sombre), jamais
   celles de la maquette Claude Design (fond clair trompeur).
   ========================================================================== */

/* En-tête centré (sans numéro). */
.method-body--centered {
	display: block;
	text-align: center;
}
.method-body--centered > .sh-eyebrow { justify-content: center; }
.method-body--centered > .sh-eyebrow .num { display: none; }
.method-body--centered > .sh-title { grid-column: auto; }

/* Étapes en frise : filet horizontal derrière les pastilles. */
.method-body--timeline > .steps { position: relative; margin-top: 60px; }
.method-body--timeline .steps::before {
	content: "";
	position: absolute;
	top: 23px;
	left: 12.5%;
	right: 12.5%;
	height: 1px;
	background: rgba(255, 255, 255, .16);
	z-index: 0;
}
.method-body--timeline .step { position: relative; z-index: 1; text-align: center; }
/* La pastille reprend le compteur CSS, cercle à liseré, fond = sol pour couper le filet. */
.method-body--timeline .step::before {
	content: counter(methodstep, decimal-leading-zero);
	width: 46px;
	height: 46px;
	margin: 0 auto 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 50%;
	background: var(--ink);
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 400;
	font-size: 17px;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--accent);
}
.method-body--timeline .step h4 { margin-top: 0; }
.method-body--timeline .step p { max-width: 30ch; margin: 0 auto; }

/* Bande CTA de pied (finale) : accroche + deux pastilles-liens. */
.method-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(22px, 3vw, 44px);
	margin-top: clamp(60px, 8vw, 104px);
}
.method-cta-lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(22px, 2.3vw, 30px);
	letter-spacing: -.02em;
	color: var(--text-dim);
}
.method-cta-lead strong { font-weight: 400; color: var(--text-strong); }
/* Boutons = composant standard du site : on réutilise .contact-btns (accueil section 07),
   primaire vert + flèche, secondaire ghost + point vert. Rien à redéfinir, juste recentrer. */
.method-cta .contact-btns { margin-top: 0; justify-content: center; }

/* Responsive : le filet n'a de sens qu'en frise large ; on l'enlève et on empile le CTA. */
@media (max-width: 1100px) {
	.method-body--timeline .steps::before { display: none; }
	.method-cta { flex-direction: column; text-align: center; }
}

/* DÈS QUE LA FRISE CONTINUE S'ÉTEINT (1100), on rappelle la continuité par un court filet DE
   PART ET D'AUTRE de chaque pastille. La barre est centrée sur le chiffre ; son MILIEU est
   transparent (dégradé) et plus large que la pastille (46px + ~6px de marge) : le filet
   s'arrête à ~6px du cercle, sans le toucher.
   ⚠ CE BLOC VALAIT 700, ET C'ÉTAIT UN TROU. Le filet continu (.steps::before) s'éteint à 1100
   parce que les étapes passent sur deux rangées, mais le filet de remplacement ne s'allumait
   qu'à 700 : entre 701 et 1100, les pastilles n'avaient AUCUN filet. Repéré par Alexandra le
   19/07/2026. Les deux seuils doivent rester ÉGAUX : l'un remplace l'autre, ils ne peuvent pas
   être éteints en même temps. */
@media (max-width: 1100px) {
	.method-body--timeline .step::after {
		content: "";
		position: absolute;
		top: 23px;
		left: 50%;
		transform: translateX(-50%);
		width: 152px;
		height: 1px;
		background: linear-gradient(to right,
			rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, .16) 47px,
			transparent 47px, transparent 105px,
			rgba(255, 255, 255, .16) 105px, rgba(255, 255, 255, .16) 152px);
		z-index: -1;
	}
}

/* ============================================================================
   Section « Niveaux » de maintenance (gws/niveaux) : même en-tête 12 colonnes que
   .grille-body. Le sélecteur d'engagement (billing3) et la grille de cartes sont des
   ENFANTS DIRECTS de .niveaux-body (même structure éditeur ET front). Les positions
   sont fixées par grid-row EXPLICITE : ainsi le sélecteur reste au-dessus des cartes
   quel que soit l'ordre du DOM (le front le rend avant les cartes, l'éditeur après —
   le contenu InnerBlocks étant un flux qu'on ne peut pas fendre côté éditeur). Le
   conteneur porte data-bill : il décide quel prix (per-year / -six / -none) est visible.
   ========================================================================== */
.niveaux-body {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 22px;
	row-gap: 0;
	align-items: start;
}
.niveaux-body > .sh-eyebrow { grid-column: 1 / 9; grid-row: 1; }
.niveaux-body > .sh-note { grid-column: 9 / 13; grid-row: 1 / 3; align-self: start; }
.niveaux-body > .sh-title { grid-column: 1 / 8; grid-row: 2; }
.niveaux-body > .billing3 { grid-column: 1 / -1; grid-row: 3; justify-self: end; margin-top: 8px; }
.niveaux-body > .cards-3 { grid-column: 1 / -1; grid-row: 4; margin-top: 26px; }

/* Prix multi-états : suffixe « /mois » et bascule par data-bill (sur .niveaux-body). */
.price .per {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	color: var(--text-dim);
}
.per-year, .per-six, .per-none { display: none; }
.niveaux-body[data-bill="year"] .per-year { display: inline; }
.niveaux-body[data-bill="six"] .per-six { display: inline; }
.niveaux-body[data-bill="none"] .per-none { display: inline; }

/* Sélecteur d'engagement (billing3) — capsule segmentée (design Claude Design « .sw1 »).
   Rendu <button> sur le front, aperçu <span class="bl3-item"> en éditeur. Mécanique data-bill
   inchangée (portée par .niveaux-body, cf. niveaux-billing.js). */
.billing3 {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px;
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	background: var(--glass);
}
.billing3 button,
.billing3 .bl3-item {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-dim);
	background: none;
	border: none;
	padding: 11px 22px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: color .2s ease, background .2s ease;
}
.billing3 button:hover:not(.on) { color: var(--text-strong); }
.billing3 button.on,
.billing3 .bl3-item.on { color: #15082f; background: var(--pill); }
.billing3 button:focus:not(:focus-visible) { outline: none; }
.billing3 button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Bandeau « tout compris » segmenté sous les cartes de niveaux (#77). Design Claude Design,
   variante « cadre vert / fond violet » : 4 segments séparés par des filets sauge, la phrase
   (flex:1) étire le bandeau. CTA = flèche dans un ROND PLEIN (choix GWS, pas le cercle vide).
   Rendu par gws/niveaux si tcNote non vide. */
.niveaux-body > .tc-strip { grid-column: 1 / -1; grid-row: 5; margin-top: 22px; }
.tc-strip {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--glass-border);
	border-radius: 30px;
	background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
	-webkit-backdrop-filter: blur(16px) saturate(1.15);
	backdrop-filter: blur(16px) saturate(1.15);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07),
		-9px 12px 20px -14px rgba(0, 0, 0, .4),
		-3px 5px 9px -6px rgba(0, 0, 0, .3);
	transition: border-color .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
}
/* Survol : liseré vert + léger relevé, comme les cartes principales. */
.tc-strip:hover {
	transform: translateY(-5px);
	border-color: var(--accent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 42px 70px -34px rgba(0, 0, 0, .7);
}
.tc-strip > * { padding: 28px 40px; text-align: center; }
/* Filets séparateurs sauge : hauteur FIXE identique, centrée verticalement (indépendante de la
   hauteur du segment) → les trois traits ont exactement la même dimension, coupés haut et bas. */
.tc-strip .tc-seg { position: relative; }
.tc-strip .tc-seg::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 68px;
	background: rgba(155, 196, 165, .32);
}
/* 1 · kicker mono */
.tc-strip .tc-kick {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--accent-soft);
	line-height: 1.7;
	white-space: nowrap;
}
.tc-strip .tc-kick b { display: block; color: var(--text-mute); font-weight: 400; }
/* 2 · prix (label mono + montant serif, € APRÈS le chiffre) */
.tc-strip .tc-price { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.tc-strip .tc-lab {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.tc-strip .tc-amt {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	letter-spacing: -.02em;
	color: var(--text-strong);
	font-size: 40px;
	line-height: .85;
}
.tc-strip .tc-amt .tc-cur { color: var(--accent); margin-left: 2px; font-size: 22px; }
.tc-strip .tc-amt .tc-per {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-dim);
	margin-left: 4px;
}
/* 3 · phrase serif (flex:1 → remplit la ligne) */
.tc-strip .tc-desc {
	flex: 1;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.35;
	color: var(--text-dim);
}
.tc-strip .tc-desc .tc-em { color: var(--accent); font-style: italic; }
/* 4 · CTA — flèche dans un ROND PLEIN (choix GWS ; s'éclaircit + pivote au survol). */
.tc-strip .tc-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; }
.tc-strip .tc-cta-txt {
	font-family: var(--wp--preset--font-family--geist);
	font-size: 14px;
	font-weight: 600;
	color: var(--accent);
	white-space: nowrap;
}
.tc-strip .tc-arrow {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--accent);
	border: 1px solid transparent;
	color: #15082f;
	font-size: 14px;
	flex: none;
	transition: transform .3s ease, background .3s ease;
}
.tc-strip .tc-cta:hover .tc-arrow { background: var(--accent-light); transform: rotate(-45deg); }
.tc-strip .tc-cta:focus:not(:focus-visible) { outline: none; }
.tc-strip .tc-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 10px; }

/* Responsive : le bandeau se replie, filets horizontaux. NB : la règle sur .cards-3 ici
   n'est qu'une MARGE, pas sa grille (celle-ci a son palier propre, voir bloc « cartes »). */
@media (max-width: 1100px) {
	.niveaux-body { display: block; }
	/* Le sélecteur reste À DROITE, comme sur grand écran. Sur la grille il y était poussé par
	   « justify-self: end », une propriété de GRILLE : dès que .niveaux-body repasse en flux
	   ici, elle perd son support et le sélecteur retombait à gauche sans que rien ne le signale
	   (repéré par Alexandra le 19/07/2026). En flux, l'équivalent est une marge gauche
	   automatique — mais elle n'agit QUE sur une boîte de niveau bloc : d'où « flex » et non
	   « inline-flex », avec « fit-content » pour qu'il garde sa largeur de contenu. */
	.niveaux-body > .billing3 {
		display: flex;
		width: fit-content;
		margin: 18px 0 18px auto;
	}
	.niveaux-body > .cards-3 { margin-top: 22px; }
	.niveaux-body > .tc-strip { margin-top: 22px; }
	.tc-strip { flex-wrap: wrap; }
	.tc-strip .tc-desc::before,
	.tc-strip .tc-cta-seg::before { display: none; }
	.tc-strip .tc-desc { flex: 1 1 100%; border-top: 1px solid rgba(155, 196, 165, .32); }
	.tc-strip .tc-cta-seg { flex: 1 1 100%; border-top: 1px solid rgba(155, 196, 165, .32); }
}

/* =======================================================================
   701-1100 — LA GRILLE 2 x 2 (demande d'Alexandra, 19/07/2026 : « que la carte
   tout compris passe à côté de Sérénité, que mon œil voie deux et deux »).

   LE PROBLÈME. Trois cartes de niveau + un bandeau « tout compris ». En deux
   colonnes, les cartes donnaient paire / orpheline, puis le bandeau : l'œil
   lisait paire, seule, seule. Aucun rythme, et la troisième carte ne se lisait
   plus comme le troisième niveau d'une comparaison.
   Les réponses simples ont toutes été éliminées par la mesure : trois de front
   ne survivent pas sous ~1010 (cartes à 265px à 924, rejeté le 17/07) ; une
   seule colonne donnerait des cartes de 1000px à 1099 ; la carte orpheline en
   pleine largeur ne passe qu'en bas de bande.

   LA SOLUTION. Le bandeau n'est pas DANS la grille des cartes, c'est un frère.
   On rend .cards-3 transparente pour la grille (display: contents, même procédé
   que .ap-mid et .contact-left) : ses trois cartes deviennent des cellules de
   .niveaux-body, et le bandeau se place naturellement en quatrième. 2 x 2.

   ⚠ LES PLACEMENTS DU BUREAU DOIVENT ÊTRE ANNULÉS, un par un. .sh-note est posée
   en « grid-column: 9 / 13 » : dans une grille à DEUX colonnes, cette valeur
   fabriquerait des colonnes implicites 3 à 12 et ferait exploser la mise en page.
   C'est pour l'éviter que le bloc 1100 se contentait d'un « display: block ».
   ======================================================================= */
@media (min-width: 701px) and (max-width: 1100px) {
	.niveaux-body {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 22px;
		row-gap: 0;
		align-items: stretch;
	}
	/* En-tête : pleine largeur, et on REPREND la main sur les placements du bureau. */
	.niveaux-body > .sh-eyebrow,
	.niveaux-body > .sh-title,
	.niveaux-body > .sh-note,
	.niveaux-body > .billing3 {
		grid-column: 1 / -1;
		grid-row: auto;
	}
	.niveaux-body > .sh-note { margin-left: 0; }
	/* Les trois cartes deviennent des cellules de .niveaux-body. */
	.niveaux-body > .cards-3 { display: contents; }
	.niveaux-body > .cards-3 > .card { margin-top: 22px; }
	/* Le bandeau devient la QUATRIÈME cellule : plus de pleine largeur, plus de rangée figée. */
	.niveaux-body > .tc-strip {
		grid-column: auto;
		grid-row: auto;
		margin-top: 22px;
	}

	/* LE BANDEAU DEVIENT UNE CARTE. Il est dessiné horizontalement (quatre segments côte à
	   côte, filets VERTICAUX). Dans une colonne de 333px (à 756) à 489px (à 1099), il doit
	   devenir vertical, avec des filets HORIZONTAUX. Ce n'est pas un repli, c'est une seconde
	   version de l'élément : on annule donc le « flex-wrap » du bloc ci-dessus, qui supposait
	   encore une rangée. */
	.tc-strip {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}
	.tc-strip > * { padding: 22px 26px; }
	/* Un seul filet, horizontal, entre deux segments consécutifs : plus lisible que quatre
	   règles séparées, et ça vaut quel que soit le nombre de segments. */
	.tc-strip .tc-seg::before { display: none; }
	.tc-strip .tc-desc,
	.tc-strip .tc-cta-seg { flex: 0 1 auto; border-top: none; }
	/* UN SEUL filet, et il est porté par le KICKER (bord inférieur), pas par le prix (bord
	   supérieur). La nuance décide de tout : le prix reçoit juste en dessous une marge haute
	   automatique pour se centrer, et un filet posé sur LUI descendrait avec lui, jusqu'à
	   flotter au milieu de la carte. Sur le kicker, il reste calé sous l'intitulé. */
	.tc-strip .tc-kick { border-bottom: 1px solid rgba(155, 196, 165, .32); }
	/* Le bloc sous le filet (prix, phrase, bouton) se CENTRE sur la hauteur restante. La carte
	   est étirée à la hauteur de Sérénité, sa voisine de rangée, donc il y a du vide à répartir.
	   Deux marges automatiques, une au-dessus du prix et une sous le bouton, se partagent ce
	   vide à parts égales : c'est le seul moyen de centrer un GROUPE d'éléments frères sans les
	   envelopper dans une boîte, donc sans toucher au balisage. Demande d'Alexandra, 19/07/2026. */
	.tc-strip .tc-price { margin-top: auto; }
	.tc-strip .tc-cta-seg { margin-bottom: auto; }
}

/* Téléphone : les segments s'empilent vraiment. Deux finitions manquaient. */
@media (max-width: 700px) {
	/* 1) Résidu : le filet vertical à gauche du PRIX traînait sur le bord de la carte une
	   fois empilé (desc et cta le retiraient déjà à 1100, pas le prix). On le retire aussi. */
	.tc-strip .tc-price::before { display: none; }
	/* 2) Kicker et prix en pleine largeur : leur contenu, déjà centré, se centre alors DANS
	   la carte au lieu de se coller à gauche → tout le bandeau « tout compris » est centré. */
	.tc-strip .tc-kick,
	.tc-strip .tc-price { flex: 1 1 100%; }
}

/* ============================================================================
   Section « Me contacter » (gws/me-contacter + gws/formulaire + gws/box).
   En-tête aligné à gauche ; grille formulaire | coordonnées ; réassurance.
   Portée de passation-pages (pages.css + <style> de page-contact.html), adaptée
   aux tokens du thème, scopée .mc-body, avec débridage éditeur (anti-#3).
   ========================================================================== */
.mc-body { display: block; position: relative; }
.mc-body > .sh-eyebrow { margin-bottom: 6px; margin-left: 4px; }
.mc-body .sh-title { max-width: none; margin-top: 10px; margin-left: -4px; }
.mc-body .b-sub {
	position: absolute;
	top: 24px;
	right: 0;
	width: 300px;
	max-width: 40%;
	text-align: right;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 15.5px;
	color: var(--text-dim);
	line-height: 1.6;
	margin: 0;
}
.mc-body .b-sub em { font-style: italic; color: var(--accent); }

/* Grille : formulaire (gauche) + coordonnées (droite). */
.mc-body .b-grid {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: clamp(30px, 3.2vw, 52px);
	align-items: stretch;
	margin-top: 46px;
}

/* Carte formulaire (verre poli).
   ⚠ min-width: 0 — SANS LUI, LA PROPORTION 1.2fr / .8fr DE .b-grid N'EST PAS RESPECTÉE. Une piste
   `fr` vaut `minmax(auto, 1fr)` : elle ne descend jamais sous le min-content de son contenu. Les
   champs (input sans largeur déclarée = ~200px intrinsèques chacun, deux par ligne) faisaient
   déborder cette colonne d'environ 70px, PRIS sur la colonne des coordonnées. Mesuré sur les
   captures d'Alexandra à 941 : 556 / 205 au lieu de 487 / 325, et l'adresse e-mail coupée en
   plein milieu faute de place. La carte de droite n'était pas trop petite, elle était volée. */
.mc-body .form-wrap {
	min-width: 0;
	border: 1px solid var(--glass-border);
	border-radius: 26px;
	padding: 34px 34px 30px;
	background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
	backdrop-filter: blur(16px) saturate(1.15);
	-webkit-backdrop-filter: blur(16px) saturate(1.15);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), -9px 12px 30px -18px rgba(0, 0, 0, .55);
}
.mc-body .form-wrap .fh { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.mc-body .form-wrap .fh h3 { font-family: var(--wp--preset--font-family--fahkwang); font-weight: 400; font-size: 24px; color: var(--text-strong); margin: 0; }
.mc-body .form-wrap .fsub { font-family: var(--wp--preset--font-family--geist); font-size: 14.5px; line-height: 1.6; color: var(--text-dim); margin: 0 0 26px; }

/* Bannière succès / erreur (PRG). */
.mc-body .form-notice { border-radius: 12px; padding: 14px 18px; margin: 0 0 22px; font-family: var(--wp--preset--font-family--geist); font-size: 14.5px; line-height: 1.5; }
.mc-body .form-notice.ok { border: 1px solid rgba(155, 196, 165, .45); background: rgba(155, 196, 165, .10); color: var(--accent-light); }
.mc-body .form-notice.ko { border: 1px solid rgba(226, 150, 150, .45); background: rgba(226, 150, 150, .09); color: #e6a0a0; }

/* Champs. */
/* Même chaîne que .form-wrap : minmax(0, 1fr) et min-width: 0 à chaque étage, sinon la largeur
   intrinsèque des champs remonte jusqu'à .b-grid et écrase la colonne des coordonnées. */
.mc-body .form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.mc-body .field { min-width: 0; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.mc-body .field.full { grid-column: 1 / -1; }
.mc-body .field label { font-family: var(--wp--preset--font-family--geist-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); }
.mc-body .field input,
.mc-body .field textarea {
	min-width: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 15px;
	color: var(--text-strong);
	background: rgba(13, 6, 32, .5);
	border: 1px solid var(--glass-border);
	border-radius: 12px;
	padding: 13px 15px;
	transition: border-color .2s, background .2s;
}
.mc-body .field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
/* Focus des champs : la bordure passe au sauge ET s'épaissit à 2px.
   Pourquoi PAS d'outline détaché ici, contrairement aux liens et aux boutons : sur un champ de
   saisie, les navigateurs déclenchent :focus-visible même au clic et au tap (l'élément attend une
   frappe clavier). Un liseré détaché reviendrait donc à réintroduire l'encadré au clic et au tap
   sur mobile, retiré exprès du site. L'épaississement, lui, ne dépend d'aucune modalité.
   Pourquoi la couleur ne suffisait pas : un signal purement chromatique est invisible pour qui
   distingue mal le vert du gris (WCAG 1.4.1), et 1px est sous le seuil d'épaisseur (WCAG 2.4.11).
   Le padding est réduit d'1px pour absorber le pixel de bordure : le texte saisi ne bouge pas. */
.mc-body .field input:focus,
.mc-body .field textarea:focus {
	outline: none;
	border-color: var(--accent);
	border-width: 2px;
	padding: 12px 14px;
	background: rgba(13, 6, 32, .75);
}

/* Autofill Chrome/Safari : garder le fond sombre du champ (sinon fond bleu natif). */
.mc-body .field input:-webkit-autofill,
.mc-body .field input:-webkit-autofill:hover,
.mc-body .field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--text-strong);
	caret-color: var(--text-strong);
	-webkit-box-shadow: 0 0 0 100px #1e1235 inset;
	box-shadow: 0 0 0 100px #1e1235 inset;
	border: 1px solid var(--glass-border);
	border-radius: 12px;
	transition: background-color 9999s ease-in-out 0s;
}
/* Champ auto-rempli PUIS focalisé : la règle d'autofill ci-dessus réimpose border:1px, il faut
   donc y remettre l'épaisseur de focus, sinon ce cas perd son indicateur. */
.mc-body .field input:-webkit-autofill:focus { border-color: var(--accent); border-width: 2px; padding: 12px 14px; }

/* Confirmation d'envoi : remplace le formulaire (le formulaire disparaît au succès). */
.mc-body .form-done { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 2px 20px; }
.mc-body .form-done-ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(155, 196, 165, .14); border: 1px solid rgba(155, 196, 165, .45); color: var(--accent-light); font-size: 21px; margin-bottom: 8px; }
.mc-body .form-done-t { font-family: var(--wp--preset--font-family--fahkwang); font-weight: 400; font-size: 23px; color: var(--text-strong); margin: 0; }
.mc-body .form-done-s { font-family: var(--wp--preset--font-family--geist); font-size: 15px; line-height: 1.6; color: var(--text-dim); margin: 0; max-width: 46ch; }
/* Au succès, on masque aussi l'invite (titre + intro) : la carte ne montre que la confirmation. */
.mc-body .form-wrap:has(.form-done) .fh,
.mc-body .form-wrap:has(.form-done) .fsub { display: none; }

/* Honeypot : hors écran (pas display:none, piège plus de bots). */
.mc-body .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Ligne d'envoi (le <button> reprend le look .btn.primary du thème). */
.mc-body .form-submit { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; flex-wrap: wrap; }
.mc-body .form-micro { font-family: var(--wp--preset--font-family--geist-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.mc-body .form-micro b { color: var(--accent-soft); font-weight: 400; }
.mc-body .gws-form .btn { cursor: pointer; }

/* Menu déroulant custom (type de projet). */
.mc-body .gw-field-select { position: relative; min-width: 0; }
.mc-body .gw-select { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-family: var(--wp--preset--font-family--geist); font-size: 15px; color: var(--text-strong); background: rgba(13, 6, 32, .5); border: 1px solid var(--glass-border); border-radius: 12px; padding: 13px 15px; transition: border-color .2s, background .2s; }
.mc-body .gw-select:hover { border-color: rgba(155, 196, 165, .5); }
/* Souris : pas de contour qui traîne après le clic (bug Chrome). */
.mc-body .gw-select:focus:not(:focus-visible) { outline: none; }
/* Clavier : liseré sauge, comme les liens et les boutons du site. */
.mc-body .gw-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-color: var(--accent); }
.mc-body .gw-select.is-open { border-color: var(--accent); background: rgba(13, 6, 32, .75); }
.mc-body .gw-select-val.ph { color: var(--text-mute); }
.mc-body .gw-select-caret { color: var(--accent); font-size: 11px; transition: transform .25s ease; }
.mc-body .gw-select.is-open .gw-select-caret { transform: rotate(180deg); }
.mc-body .gw-list { list-style: none; margin: 8px 0 0; padding: 6px; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: linear-gradient(135deg, #241345, #180b30); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 44px -20px rgba(0, 0, 0, .75); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.mc-body .gw-list.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mc-body .gw-list li { font-family: var(--wp--preset--font-family--geist); font-size: 14.5px; color: var(--accent); padding: 11px 13px; border-radius: 9px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.mc-body .gw-list li:hover { background: rgba(155, 196, 165, .14); color: var(--accent-light); }
/* Option parcourue au clavier. Le focus du navigateur reste sur le champ (aria-activedescendant),
   donc rien ne montrerait où on en est sans cette classe. Même rendu que le survol souris. */
.mc-body .gw-list li.is-active { background: rgba(155, 196, 165, .14); color: var(--accent-light); }

/* Colonne coordonnées (cartes verre poli). */
.mc-body .b-aside { display: flex; flex-direction: column; gap: 18px; }
.mc-body .b-mini {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 1px solid var(--glass-border);
	border-radius: 18px;
	padding: 26px 28px;
	background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
	backdrop-filter: blur(16px) saturate(1.15);
	-webkit-backdrop-filter: blur(16px) saturate(1.15);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), -9px 12px 20px -14px rgba(0, 0, 0, .4);
}
.mc-body .b-mini .k { display: flex; align-items: center; gap: 11px; font-family: var(--wp--preset--font-family--geist-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 14px; }
.mc-body .b-mini .k::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(155, 196, 165, .6); }
.mc-body .b-mini .v { font-family: var(--wp--preset--font-family--fahkwang); font-weight: 400; font-size: 21px; letter-spacing: -.01em; color: var(--text-strong); line-height: 1.3; margin: 0; }
.mc-body .b-mini .v.mail { font-size: 17px; word-break: break-all; }
.mc-body .b-mini .v a { color: inherit; text-decoration: none; }
.mc-body .b-mini .v-sub { display: block; font-family: var(--wp--preset--font-family--geist); font-size: 13.5px; color: var(--text-dim); margin: 9px 0 0; line-height: 1.55; }
.mc-body .b-mini .wp-block-button { margin: 0; }
.mc-body .b-mini .is-style-more .wp-block-button__link { border: none; background: none; padding: 0; margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--wp--preset--font-family--geist); font-size: 13.5px; font-weight: 500; color: var(--accent); }
.mc-body .b-mini .is-style-more .wp-block-button__link:hover { background: none; }
.mc-body .b-mini .is-style-more .wp-block-button__link::after { content: "\2192"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #15082f; font-size: 12px; transition: transform .35s ease; }
.mc-body .b-mini .is-style-more .wp-block-button__link:hover::after { transform: rotate(-45deg); }

/* Réassurance sous la grille. */
.mc-body .contact-reass { margin-top: 46px; padding-top: 32px; border-top: 1px solid var(--line); text-align: center; }
.mc-body .contact-reass .cr-main { font-family: var(--wp--preset--font-family--fahkwang); font-style: italic; font-weight: 300; font-size: clamp(19px, 2vw, 24px); line-height: 1.4; color: var(--text-strong); margin: 0; }
.mc-body .contact-reass .cr-main strong { font-style: normal; font-weight: 400; color: var(--accent); }
.mc-body .contact-reass .cr-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; margin: 20px 0 0; }
.mc-body .contact-reass .cr-pill { position: relative; padding-left: 20px; margin: 0; font-family: var(--wp--preset--font-family--geist-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.mc-body .contact-reass .cr-pill::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(155, 196, 165, .6); }

/* Sol recentré sous la section formulaire (le pic par défaut tombe trop haut). */
#form.stage::before {
	background: linear-gradient(to bottom, transparent 0%, rgba(178, 168, 208, .04) 40%, rgba(178, 168, 208, .09) 70%, rgba(178, 168, 208, .05) 90%, transparent 100%);
}

/* Parité éditeur (anti-#3) : gws-layout débride les enfants directs ; filets de sûreté. */
.editor-styles-wrapper .mc-body .b-grid,
.editor-styles-wrapper .mc-body .form-wrap,
.editor-styles-wrapper .mc-body .b-aside { max-width: none; }

/* Effondrement tablette : le formulaire prend toute la largeur, les coordonnées passent dessous.
   Le seuil n'est pas rond, et c'est voulu. Ce qui le commande, c'est l'ADRESSE E-MAIL de la carte
   « Contact par écrit » : 26 caractères insécables, ~260px mesurés sur les captures d'Alexandra
   du 19/07. À 901 la colonne de droite ne faisait que 258px de texte : il manquait DEUX pixels et
   l'adresse se coupait en plein milieu (« contact@graphwebstu / dio.com »). Il faut 907 pour
   qu'elle passe tout juste, 940 pour qu'elle respire. On évite 920-930 : la Galaxy Tab d'Alexandra
   fait 924, et un seuil ne se pose jamais sur la largeur d'un appareil réel.
   ⚠ Ce seuil et celui du bloc « cartes en deux colonnes » plus bas sont les DEUX FACES de la même
   bascule : ils sont rigoureusement égaux et bougent ENSEMBLE, sinon il reste une bande morte. */
@media (max-width: 940.98px) {
	.mc-body .b-grid { grid-template-columns: 1fr; }
}

/* Le chapô, lui, a sa PROPRE cause, sans rapport avec l'adresse e-mail : épinglé en position
   absolue en haut à droite du titre, il RECOUVRAIT le titre dès que la place manquait. Son seuil
   vit donc sa vie à 900. Ne PAS l'« harmoniser » avec celui du dessus : deux causes différentes,
   deux seuils différents. Remis au flux, il suit le titre dans le DOM et se pose juste en dessous,
   aligné à gauche comme sur les autres pages. */
@media (max-width: 900px) {
	.mc-body .b-sub {
		position: static;
		width: auto;
		max-width: none;
		text-align: left;
		margin-top: 18px;
	}
}

/* Les trois cartes de contact, une fois passées sous le formulaire, se rangent en DEUX colonnes
   au lieu de s'étirer chacune sur toute la largeur (des cartes de 819px pour trois lignes de
   texte : du vide, rien d'autre).
   Pourquoi deux et pas trois, alors que trois cartes appellent une rangée de trois : à 701, trois
   de front ne laissent que 144px de texte par carte, pour une adresse qui en réclame 260. Même en
   descendant sa taille, il faudrait 13px pour la faire tenir, c'est-à-dire la rendre illisible.
   Trois est impossible, mesuré, pas supposé.
   La troisième, seule sur sa ligne, se centre à mi-largeur : même figure que les cartes de prix
   de Création et Maintenance. Un vide symétrique se lit comme une intention, un vide d'un seul
   côté se lit comme un oubli. */
@media (min-width: 701px) and (max-width: 940.98px) {
	.mc-body .b-aside {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}
	.mc-body .b-aside > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - 18px) / 2);
	}
	/* Deux colonnes à 701 laissent 252px de texte, l'adresse en veut 260 : il manque 8px. C'est
	   une adresse, pas un titre : elle descend d'un cran et tout tient, jusqu'en haut de la bande. */
	.mc-body .b-mini .v.mail { font-size: 15px; }

	/* Contenu centré dans la carte. En colonne de droite (bureau) le texte se cale à gauche parce
	   qu'il longe le formulaire : il a un bord à suivre. Ici les cartes sont posées en rangée sous
	   le formulaire, dont la troisième centrée : plus aucun bord commun ne justifie l'alignement à
	   gauche, et le texte calé d'un côté d'une carte large lit comme un oubli. Les deux lignes en
	   flex (la pastille et le bouton) ne suivent pas text-align, elles se centrent à part. */
	.mc-body .b-mini { text-align: center; }
	.mc-body .b-mini .k { justify-content: center; }
	.mc-body .b-mini .wp-block-buttons { justify-content: center; }
}

/* Téléphone : quand la mention « Réponse sous 48 h » et le bouton ne tiennent plus sur une
   ligne, le bouton passe seul à la ligne suivante et le space-between le colle à GAUCHE.
   La marge automatique l'envoie contre la marge droite. Sans effet quand les deux tiennent
   sur la même ligne (space-between l'y plaçait déjà). */
@media (max-width: 700px) {
	.mc-body .form-submit .btn { margin-left: auto; }

	/* Nom / E-mail et Téléphone / Type de projet s'empilent ICI, et pas avant. Ils étaient
	   empilés dès 900, c'est-à-dire exactement là où le formulaire est le PLUS large (pleine
	   largeur, ~819px), et gardés côte à côte au-dessus de 900, là où sa colonne est la plus
	   ÉTROITE (~440px). C'était à l'envers. Tant que le formulaire est pleine largeur les deux
	   champs tiennent largement (283px chacun à 701) ; au téléphone, la fenêtre décide. */
	.mc-body .form-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Blog : liste des articles (template home.html, bloc gws/blog-liste).
   Repris de la maquette page-blog.html, TOUT scopé sous .gws-blog pour éviter
   la collision avec la classe WordPress générique .post (post_class()).
   ========================================================================== */
.gws-blog .it { font-style: italic; color: var(--accent); }

/* Ouverture (respiration) */
.gws-blog .p-open { padding: 56px 0 18px; }
.gws-blog .p-open.center { padding: 64px 0 22px; text-align: center; }
.gws-blog .p-open .lbl { font-family: var(--wp--preset--font-family--geist-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 22px; }
.gws-blog .p-open .line { font-family: var(--wp--preset--font-family--fahkwang); font-weight: 400; font-size: clamp(26px, 3.4vw, 50px); line-height: 1.14; letter-spacing: -.028em; color: var(--text-strong); max-width: 24ch; margin: 0 auto; }

/* Filtres de catégorie */
/* Pastilles de filtre alignées à DROITE (demande d'Alexandra, 19/07/2026, constatée à 860 et
   861). Sans seuil, et c'est délibéré : l'en-tête du blog est en FLUX SIMPLE, pas sur une grille
   12 colonnes comme les autres sections. Eyebrow, titre, note et pastilles s'empilent donc de la
   même façon à TOUTES les largeurs. Les mettre à droite sur la seule bande tablette fabriquerait
   une incohérence entre le bureau et le reste, sans qu'aucune contrainte de place la justifie.
   NB : sur grand écran la note (.sh-note) est déjà poussée à droite par sa marge automatique ;
   les pastilles viennent donc s'aligner sous elle. */
.gws-blog .filters { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: 6px 0 34px; }
.gws-blog .filters button { font-family: var(--wp--preset--font-family--geist-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--glass-border); background: transparent; border-radius: 30px; padding: 9px 18px; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.gws-blog .filters button:not(.on):hover { color: var(--accent); border-color: rgba(155, 196, 165, .85); background: rgba(155, 196, 165, .08); }
.gws-blog .filters button.on { color: #15082f; background: var(--pill); border-color: transparent; }

/* Grille + cartes d'articles */
.gws-blog .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gws-blog .post { display: flex; flex-direction: column; border: 1px solid var(--glass-border); border-radius: var(--radius); overflow: hidden; background: var(--card); transition: transform .35s ease, border-color .35s ease; }
.gws-blog .post:hover { transform: translateY(-4px); border-color: var(--accent); }
.gws-blog .post .thumb { display: block; aspect-ratio: 16 / 10; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.gws-blog .post .thumb .fill { position: absolute; inset: 0; background: radial-gradient(120% 100% at 30% 20%, #2e1a5266, #0d0620); background-size: cover; background-position: center; transition: transform .5s ease; }
.gws-blog .post:hover .thumb .fill { transform: scale(1.04); }
.gws-blog .post .thumb .cat { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--wp--preset--font-family--geist-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(155, 196, 165, .4); border-radius: 30px; padding: 6px 11px; background: #1a0c36cc; }
.gws-blog .post .body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.gws-blog .post .meta { font-family: var(--wp--preset--font-family--geist-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 14px; }
.gws-blog .post h3 { font-family: var(--wp--preset--font-family--fahkwang); font-weight: 400; font-size: 21px; line-height: 1.16; letter-spacing: -.02em; color: var(--text-strong); margin: 0 0 12px; }
.gws-blog .post h3 a { color: inherit; text-decoration: none; }
.gws-blog .post h3 a:hover { color: var(--accent); }
.gws-blog .post .body > p { font-size: 14px; color: var(--text-dim); line-height: 1.62; margin: 0 0 20px; }
.gws-blog .post .more { margin-top: auto; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--accent); font-weight: 500; text-decoration: none; }
.gws-blog .post .more .ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #15082f; font-size: 12px; transition: transform .35s ease; }
.gws-blog .post:hover .more .ic { transform: rotate(-45deg); }
.gws-blog .post.is-hidden { display: none; }

/* Article vedette (2 colonnes, disposition horizontale) */
.gws-blog .post.lead-post { grid-column: span 2; flex-direction: row; }
.gws-blog .post.lead-post .thumb { flex: 0 0 46%; aspect-ratio: auto; border-bottom: none; border-right: 1px solid var(--line); }
.gws-blog .post.lead-post .body { padding: 34px; }
.gws-blog .post.lead-post h3 { font-size: 29px; }
.gws-blog .post.lead-post .body > p { font-size: 15px; }

/* En-têtes de section du blog : puce verte (modèle .mono.dot du hero) au lieu du
   chiffre 01/02. Blog UNIQUEMENT ; les autres pages gardent leur numéro de section. */
.gws-blog .sh-eyebrow .num { display: none; }
.gws-blog .sh-eyebrow .lbl::before {
	content: "\25CF";
	color: var(--accent);
	font-size: 8px;
	vertical-align: middle;
	margin-right: 9px;
}

/* Correctif accueil : la section « Derniers articles » de l'accueil réutilise .gws-blog
   pour ses cartes, donc la règle ci-dessus (puce verte à la place du chiffre, voulue pour
   le blog DÉDIÉ uniquement) fuyait sur l'accueil et masquait son numéro de section. On
   rétablit le numéro et on retire la puce, uniquement sous .gws-derniers. Le blog dédié
   n'est pas touché (aucune modif de la règle .gws-blog ci-dessus). */
.gws-derniers .sh-eyebrow .num { display: block; }
.gws-derniers .sh-eyebrow .lbl::before { content: none; }

/* Mini-CTA (repris de la home) */
.gws-blog .cta-mini-sec .sh-eyebrow { justify-content: center; }
.gws-blog .cta-mini-sec .sh-title { max-width: none; text-align: center; }
.gws-blog .cta-mini { max-width: 720px; margin: 0 auto; text-align: center; }
.gws-blog .cta-mini > p { font-family: var(--wp--preset--font-family--fahkwang); font-style: italic; font-weight: 300; font-size: clamp(19px, 2vw, 24px); line-height: 1.42; color: var(--text-dim); margin: 0 auto; max-width: 54ch; }
.gws-blog .cta-mini .btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
/* Les 2 liens .btn du mini-CTA du blog (composant maison, PAS des .wp-block-button) sont
   traités dans le bloc « EMPILEMENT DES CTA » en fin de feuille, avec tous les autres. */

/* Effondrement mobile du blog */
@media (max-width: 860px) {
	.gws-blog .blog-grid { grid-template-columns: 1fr; }
	.gws-blog .post.lead-post { grid-column: auto; flex-direction: column; }
	.gws-blog .post.lead-post .thumb { flex: auto; aspect-ratio: 16 / 10; border-right: none; border-bottom: 1px solid var(--line); }
	.gws-blog .post.lead-post .body { padding: 26px 24px; }
	/* La description (.sh-note) collait à la première carte (0 de marge basse). On aère. */
	.gws-blog .sh-note { margin-bottom: 30px; }
}

/* Accueil : section « Derniers articles » (bloc gws/derniers-articles). Réutilise les
   cartes .gws-blog ; ajoute juste l'espacement de l'en-tête et le lien « voir tous »
   centré sous la grille (motif flèche-pastille du site, rotation au survol). */
.gws-derniers .dn-grid { margin-top: 44px; }
/* DEUX articles et non trois (choix d'Alexandra, 19/07/2026 — valeur par défaut du bloc
   passée à 2 dans block.json). La grille .blog-grid est dessinée pour TROIS colonnes : sans
   cette règle, les deux cartes se posent à gauche et la troisième colonne reste vide.
   COLLAPSE À 700 ET NON À 860. Le 860 de .blog-grid vient de la page Blog, où il faut loger
   TROIS cartes ; à deux, la contrainte n'est plus la même : chaque carte vaut encore ~330px à
   700, largeur parfaitement tenable. On aligne donc cette section sur le seuil téléphone du
   site plutôt que d'hériter d'un palier calculé pour un autre nombre de colonnes.
   Placée APRÈS le bloc 860 : à spécificité égale, c'est la dernière règle qui gagne. */
@media (min-width: 701px) {
	.gws-blog .dn-grid { grid-template-columns: repeat(2, 1fr); }
}
.gws-derniers .dn-all { margin-top: 42px; text-align: right; }
.gws-derniers .dn-all-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--wp--preset--font-family--geist); font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; }
.gws-derniers .dn-all-link .ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #15082f; font-size: 12px; transition: transform .35s ease; }
.gws-derniers .dn-all-link:hover .ic { transform: rotate(-45deg); }

/* ==========================================================================
   Blog : page d'un article (single.html, bloc gws/article).
   FEUILLE DE LECTURE = carte blanche CONTENUE (max-width centrée) posée sur le
   fond violet du site. Elle n'est PAS pleine largeur et ne peut donc pas déborder :
   tout ce qui l'entoure (menu au scroll, « à lire aussi », footer) reste sur le
   violet du body. Mesures reprises du single Graph'Art.
   ========================================================================== */
/* IMPORTANT : `.single-post` est AUSSI la classe que WordPress pose sur <body>
   pour un article (body.single-post). Sans le :not(body), cette règle peint le
   <body> entier en blanc → toute la page devient blanche. On exclut donc le body :
   seule la carte (le <div class="single-post">) reçoit ces styles. */
.single-post:not(body) {
	--art-bg: #ffffff;
	--art-ink: #1b2436;
	--art-body: var(--wp--preset--color--encre);  /* violet signature GWS (encre #15082f) — typo du texte */
	--art-2nd: #5a6273;
	--art-3rd: #8a8478;
	--art-accent: #6f9c7c;            /* sauge (titres, nom) — éclairci d'un cran vs #5f8b6d (test), à trancher */
	--art-violet: #6f6386;            /* violet des petits labels (lavande atténuée) — à ajuster */
	--art-body-soft: #281c46;         /* encre adoucie d'un cran (corps + gras) — lisible, moins « lourd » que #15082f */
	--art-rule: rgba(27, 36, 54, .14);
	--art-rule-strong: rgba(27, 36, 54, .30);
	position: relative;
	/* La gouttière de la feuille (17/07/2026). Sans le calc, « max-width + margin:auto »
	   ne contient la carte qu'AU-DESSUS de 1240 : en dessous elle fait 100% et colle aux
	   deux bords, alors que le commentaire ci-dessus dit l'inverse (« carte CONTENUE,
	   PAS pleine largeur »). Le calc tient à TOUTES les largeurs, sans media query :
	   sous 1240 il laisse 16px de violet de chaque côté, au-dessus le max-width reprend
	   la main et rien ne bouge. */
	width: calc(100% - 32px);
	max-width: 1240px;
	margin: 0 auto;
	background: var(--art-bg);        /* carte blanche contenue */
	color: var(--art-body);
}
.single-post:not(body) * { box-sizing: border-box; }

/* Menu : sur les pages d'article, la pilule reçoit un fond violet (au lieu du
   verre blanc translucide, invisible sur la feuille blanche). Scopé body.single :
   aucun impact sur les autres pages. */
body.single .navbar { background: var(--card); }
/* Menu article : on retire le flou du <header> conteneur (blur 8px, ~18px de
   padding) qui débordait sous la pilule et voilait le haut du CTA au scroll.
   La pilule .navbar garde son propre flou. Scopé body.single : aucun autre impact. */
body.single header { -webkit-backdrop-filter: none; backdrop-filter: none; }
.single-post .reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--art-accent); z-index: 1000; transition: width .1s linear; }

/* Conteneurs internes : centrés dans la feuille (carte élargie à 1240px). */
.single-post__top-bar,
.single-post__header,
.single-post__hero,
.single-post__layout { max-width: 1240px; margin: 0 auto; }

/* Fil d'Ariane */
.single-post__top-bar { padding: 40px clamp(24px, 5vw, 48px) 0; }
.single-post__crumb { font-family: var(--wp--preset--font-family--geist-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--art-violet); }
.single-post__crumb-link { color: var(--art-violet); text-decoration: none; }
.single-post__crumb span { margin: 0 8px; opacity: .6; }

/* En-tête */
.single-post__header { padding: 54px clamp(24px, 5vw, 48px) 30px; }
.single-post__kicker { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--wp--preset--font-family--geist-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--art-violet); margin-bottom: 26px; }
.single-post__kicker-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.single-post__title { font-family: var(--wp--preset--font-family--fahkwang); font-weight: 400; font-size: clamp(38px, 5.4vw, 64px); line-height: 1.03; letter-spacing: -.025em; color: var(--art-accent); margin: 0; }
.single-post__title em { font-style: italic; color: var(--art-accent); }
.single-post__lede { font-family: var(--wp--preset--font-family--fahkwang); font-weight: 300; font-style: italic; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.45; color: var(--art-body); opacity: .85; margin: 28px 0 0; }
.single-post__byline { display: flex; align-items: center; gap: 14px; margin-top: 42px; }
.single-post__byline-avatar { width: 46px; height: 46px; border-radius: 50%; background-color: #d8d2c4; background-size: cover; background-position: center; flex: 0 0 auto; }
.single-post__byline-txt { display: flex; flex-direction: column; }
.single-post__byline-name { font-family: var(--wp--preset--font-family--fahkwang); font-size: 16px; color: var(--art-accent); }
.single-post__byline-meta { margin-top: 2px; font-family: var(--wp--preset--font-family--geist-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--art-violet); }

/* Image d'en-tête */
.single-post__hero { padding: 44px clamp(24px, 5vw, 48px) 0; }
.single-post__hero-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }

/* Layout corps + colonne latérale (grille : 750 | gouttière | 300) */
.single-post__layout { display: grid; grid-template-columns: minmax(0, 750px) minmax(40px, 1fr) 300px; align-items: start; padding: 72px clamp(24px, 5vw, 48px) 96px; }
.single-post__body { grid-column: 1; min-width: 0; font-family: var(--wp--preset--font-family--geist); }
.single-post__sidebar { grid-column: 3; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 22px; max-height: calc(100vh - 128px); }
/* La carte CTA garde sa taille ; seul le sommaire absorbe le manque de place (voir plus bas). */
.single-post__sidebar > :not(.single-post__toc) { flex: 0 0 auto; }

/* Corps (typographie de lecture, encre foncée sur blanc) */
/* Corps de lecture : TOUS les paragraphes du corps, imbriqués ou non — parité avec l'éditeur,
   qui style « .editor-styles-wrapper p » en descendant (editor-article.css). L'ancien « > p » ne
   visait que les enfants directs : un paragraphe glissé dans une colonne / « Médias et texte » /
   groupe retombait sur la typo brute et « ne suivait pas la charte ». Les paragraphes à style propre
   (citation, accordéon, libellé « Partager ») gagnent par leur spécificité plus forte. */
.single-post__body p { font-size: 17px; font-weight: 300; line-height: 1.78; color: var(--art-body-soft); margin: 0 0 26px; }
.single-post__body li { font-size: 17px; font-weight: 300; }
.single-post__body h2 { font-family: var(--wp--preset--font-family--fahkwang); font-weight: 400; font-size: clamp(27px, 3.1vw, 36px); line-height: 1.12; letter-spacing: -.02em; color: var(--art-accent); margin: 56px 0 20px; scroll-margin-top: 90px; }
.single-post__body h3 { font-family: var(--wp--preset--font-family--fahkwang); font-weight: 400; font-size: 22px; color: var(--art-accent); margin: 38px 0 14px; scroll-margin-top: 90px; }
.single-post__body ul, .single-post__body ol { margin: 0 0 26px; padding-left: 22px; color: var(--art-body); font-size: 17.5px; line-height: 1.78; }
.single-post__body li { margin-bottom: 10px; }
.single-post__body li::marker { color: var(--art-accent); }
.single-post__body strong { color: var(--art-body); font-weight: 500; }
/* Liens du corps d'article. Le soulignement qui se déployait au survol a été retiré le
   07/08/2026 : il se télescopait avec l'anneau du curseur, deux effets au même endroit. Le survol
   assombrit la couleur ET épaissit le glyphe, et l'anneau grossit normalement, comme partout.
   ⚠ L'épaississement passe par `text-shadow` et NON par `font-weight` : changer la graisse
   modifie la métrique, donc décale les mots suivants à chaque survol. Ici rien ne bouge.
   ⚠ Ne PAS « corriger » l'absence de soulignement au repos en croyant à un oubli d'accessibilité :
   le lien sauge tient un contraste de 6:1 avec le texte encre, très au-dessus du seuil de 3:1 que
   WCAG 1.4.1 demande pour se passer de soulignement, et un signal apparaît bien au survol (ici)
   comme au focus clavier (règle générale `a:focus-visible`). Le soulignement permanent a été
   écarté par Alexandra : avec l'anneau par-dessus, il chargeait la ligne. */
.single-post__body p a, .single-post__body li a {
	color: var(--art-accent);
	text-decoration: none;
	transition: color .25s ease, text-shadow .25s ease;
}
.single-post__body p a:hover, .single-post__body li a:hover {
	color: #2f5d40;
	/* Ombre DOUBLÉE, pas élargie : deux passes à .35px renforcent le trait sans étaler le flou.
	   Un seul rayon plus large rendrait le texte cotonneux au lieu de le rendre plus gras. */
	text-shadow: 0 0 .35px currentColor, 0 0 .35px currentColor;
}

/* Citation : Piste 3 (Claude Design) — barre latérale + léger dégradé horizontal, encre
   sur la feuille blanche (fini la carte violette pleine « verrue »). Deux teintes :
   SAUGE par défaut ; pour passer une citation en violet, ajouter la classe .is-violet
   au bloc. Cible le <blockquote> natif de l'article et son <cite> (source facultative). */
.single-post__body blockquote {
	position: relative;
	margin: 38px 0;
	padding: 24px 32px 24px 34px;
	border-radius: 14px;
	box-shadow: none;
	background: linear-gradient(90deg, rgba(94, 155, 110, .12), rgba(94, 155, 110, 0) 72%);
}
.single-post__body blockquote::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid #5e9b6e;
	border-right: 0;
	border-radius: 14px;   /* épouse les angles gauches de la carte */
	/* la barre verticale monte, amorce la courbe de l'angle, PUIS se fond en dégradé :
	   le voile horizontal garde le trait vertical + le début de la courbe, et fait
	   fondre la suite (haut ET bas) */
	-webkit-mask: linear-gradient(90deg, #000 0, #000 5px, transparent 16px);
	        mask: linear-gradient(90deg, #000 0, #000 5px, transparent 16px);
}
.single-post__body blockquote p {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 400;
	font-size: 21px;
	line-height: 1.5;
	color: var(--art-body);
	margin: 0;
}
.single-post__body blockquote cite {
	display: block;
	margin-top: 13px;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-style: normal;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #4f8a5f;
}
/* Variante VIOLET (sur .is-violet) — même structure, teinte violette. */
.single-post__body blockquote.is-violet { background: linear-gradient(90deg, rgba(74, 47, 122, .10), rgba(74, 47, 122, 0) 72%); }
.single-post__body blockquote.is-violet::before { border-color: #4a2f7a; }
.single-post__body blockquote.is-violet cite { color: #6a4fa0; }

/* Mini-FAQ de fin d'article : blocs « Détails » natifs (<details class="wp-block-details">)
   stylés en accordéons à la charte de la FAQ de l'accueil, transposés sur la feuille blanche
   (encre sur blanc au lieu de crème sur violet). Numéro | question | signe +/-, sans JS
   (l'ouverture/fermeture est native, comme sur l'accueil). Le contenu de l'article n'est pas
   touché : on ne stylise que le balisage généré par le bloc « Détails ». */
.single-post__body { counter-reset: artfaq; }
.single-post__body .wp-block-details {
	counter-increment: artfaq;
	margin: 0;
	border: 1px solid var(--art-rule);
	border-radius: 18px;
	background: transparent;   /* repos : neutre (le fond violet faisait « gadget ») */
	transition: border-color .25s ease, background .25s ease;
}
.single-post__body .wp-block-details + .wp-block-details { margin-top: 14px; }
.single-post__body .wp-block-details[open] {
	border-color: var(--art-rule-strong);
	background: rgba(111, 156, 124, .05);
}
.single-post__body .wp-block-details summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 17px 26px 17px 30px;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: 20px;
	letter-spacing: -.02em;
	line-height: 1.3;
	color: var(--art-body);
}
.single-post__body .wp-block-details summary::-webkit-details-marker { display: none; }
/* Numéro 01, 02… en mono sauge (comme l'accueil). */
.single-post__body .wp-block-details summary::before {
	content: counter(artfaq, decimal-leading-zero);
	flex: none;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--art-accent);
}
/* Signe +/- dans un rond, poussé à droite ; se remplit de sauge à l'ouverture/au survol. */
.single-post__body .wp-block-details summary::after {
	content: "+";
	flex: 0 0 auto;
	margin-left: auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--art-rule-strong);
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 19px;
	line-height: 1;
	color: var(--art-accent);
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.single-post__body .wp-block-details[open] summary::after { content: "\2212"; }
.single-post__body .wp-block-details[open] summary::after,
.single-post__body .wp-block-details summary:hover::after {
	background: #aecfb5;         /* sauge pastel, un cran plus pâle que le bouton (le fond blanc le fait paraître plus vert) */
	color: #15082f;              /* glyphe encre (comme l'accueil / le bouton) */
	border-color: transparent;
}
/* Focus clavier visible (WCAG 2.4.7) ; souris sans contour (bug Chrome). */
.single-post__body .wp-block-details summary:focus:not(:focus-visible) { outline: none; }
.single-post__body .wp-block-details summary:focus-visible { outline: 2px solid var(--art-accent); outline-offset: -4px; border-radius: 18px; }
/* Réponse (paragraphes du bloc « Détails »). */
.single-post__body .wp-block-details > :not(summary) { margin: 0; padding: 0 30px 26px 30px; }
.single-post__body .wp-block-details p { font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--art-body-soft); }
/* Téléphone : MÊME correction que la FAQ des pages (.faq-item), qu'elle ne pouvait pas recevoir
   ici puisque le balisage est celui du bloc « Détails » natif, pas le nôtre. À cette largeur une
   question tient sur 4 ou 5 lignes : le numéro et la pastille +/- flottaient au milieu. On aligne
   le summary en HAUT et on réduit la pastille (38 -> 34px), comme .faq-sign. */
@media (max-width: 700px) {
	.single-post__body .wp-block-details summary { align-items: flex-start; }
	.single-post__body .wp-block-details summary::after { width: 34px; height: 34px; font-size: 17px; }
}

/* Partage : boutons GHOST violet (fond transparent, bordure + icône violet),
   remplissage violet au survol. Sur la feuille blanche. */
.single-post__share { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--art-rule); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* .single-post__body devant : bat la règle globale « .single-post__body p » (spécificité). */
.single-post__body .single-post__share-label { font-family: var(--wp--preset--font-family--geist-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--art-2nd); margin: 0; }
.single-post__share-buttons { display: flex; gap: 10px; }
.single-post__share-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: transparent; border: 1.5px solid var(--art-body); color: var(--art-body); transition: background .2s, color .2s, transform .2s; }
.single-post__share-btn svg { width: 19px; height: 19px; fill: currentColor; }
.single-post__share-btn:hover { background: var(--art-body); color: #fff; transform: translateY(-2px); }

/* Colonne latérale : encart d'appel .gws-cta (design Claude Design, hifi).
   Composant autonome, scopé .gws-cta (vars locales --gws-*). Le titre 3 lignes
   est étiré par single-post.js pour remplir la largeur (effet « rectangle »). */
.gws-cta { --gws-ink: #1c0f3a; --gws-ink-deep: #15082f; --gws-cream: #fffdf2; --gws-sage: #bcdcc4; --gws-violet: #9a8eaa; --gws-mute: #8b83a6; }
.gws-cta * { box-sizing: border-box; }
.gws-cta { position: relative; display: block; border-radius: 20px; overflow: hidden; padding: 30px; text-decoration: none;
	background: linear-gradient(168deg, #22133f 0%, var(--gws-ink) 46%, #180b34 100%);
	border: 1px solid rgba(255, 255, 255, .09);
	box-shadow: 0 2px 0 rgba(255, 255, 255, .05) inset, -12px 16px 34px -20px rgba(16, 6, 38, .6), -4px 6px 14px -8px rgba(16, 6, 38, .42);
	font-family: var(--wp--preset--font-family--geist);
	transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.gws-cta:hover { transform: translateY(-4px);
	box-shadow: 0 2px 0 rgba(255, 255, 255, .06) inset, -16px 22px 44px -22px rgba(16, 6, 38, .7), -6px 8px 18px -10px rgba(16, 6, 38, .48); }
.gws-cta .gws-halo { position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background: radial-gradient(60% 45% at 92% 4%, rgba(155, 196, 165, .16) 0%, transparent 60%); }
.gws-cta > * { position: relative; z-index: 1; }

.gws-cta .gws-eyebrow { display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap;
	font-family: var(--wp--preset--font-family--geist-mono); font-size: 9px; font-weight: 500; letter-spacing: .1em;
	text-transform: uppercase; color: var(--gws-violet); }
.gws-cta .gws-eyebrow .gws-sep { opacity: .5; }
.gws-cta .gws-sub { text-align: center; margin-top: 13px; font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--gws-sage); }
.gws-cta .gws-nowrap { white-space: nowrap; }

.gws-cta .gws-title { display: block; width: 100%; margin: 20px 0 4px; overflow: hidden; }
.gws-cta .gws-line { display: block; white-space: nowrap; line-height: 1.0; letter-spacing: -.035em;
	font-family: var(--wp--preset--font-family--fahkwang); font-weight: 400; }
.gws-cta .gws-line.l1 { color: var(--gws-cream); }
.gws-cta .gws-line.l2 { font-style: italic; color: var(--gws-sage); }
.gws-cta .gws-line.l3 { color: var(--gws-mute); margin-top: .05em; }
/* anti-flash : lignes masquées tant que le JS n'a pas calé les tailles */
.gws-cta.gws-jsfit .gws-line { opacity: 0; transform: translateY(10px);
	transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.gws-cta .gws-title.gws-fitted .gws-line { opacity: 1; transform: none; }
.gws-cta .gws-title .l1 { transition-delay: .05s; } .gws-cta .gws-title .l2 { transition-delay: .18s; } .gws-cta .gws-title .l3 { transition-delay: .30s; }

.gws-cta .gws-proof { border-radius: 14px; padding: 18px 20px; margin-top: 22px; display: grid; gap: 12px;
	background: linear-gradient(135deg, rgba(155, 196, 165, .12) 0%, rgba(255, 255, 255, .02) 60%);
	border: 1px solid rgba(155, 196, 165, .22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
	transition: border-color .35s; }
.gws-cta:hover .gws-proof { border-color: rgba(155, 196, 165, .42); }
.gws-cta .gws-pf { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; font-weight: 500;
	line-height: 1.35; color: var(--gws-cream); }
.gws-cta .gws-ck { flex: none; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
	font-size: 11px; margin-top: 1px; background: rgba(155, 196, 165, .16); color: var(--gws-sage); }

.gws-cta .gws-btn { position: relative; display: flex; align-items: center; justify-content: center;
	margin-top: 22px; padding: 16px 60px 16px 30px; border-radius: 999px;
	font-family: var(--wp--preset--font-family--geist); font-weight: 600; font-size: 15px; letter-spacing: .01em; color: #14082c;
	background: var(--pill); transition: background .25s; }
.gws-cta .gws-btn .gws-ic { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 15px;
	background: var(--gws-ink-deep); color: var(--gws-sage); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.gws-cta:hover .gws-btn { background: #c4ddca; }
.gws-cta:hover .gws-btn .gws-ic { transform: translateY(-50%) translateX(4px); }
/* Petit téléphone : « Découvrir les offres » manquait de quelques pixels sous 375px, passait sur
   deux lignes et la pastille doublait de hauteur. On ne réduit NI le texte NI la flèche : on rend
   16px au libellé en resserrant les marges intérieures. Le padding droit (54px) reste supérieur à
   la place occupée par la flèche (right 8px + 38px = 46px), qui est en position absolue. */
@media (max-width: 700px) {
	.gws-cta .gws-btn { padding-left: 20px; padding-right: 54px; }
}

@media (prefers-reduced-motion: reduce) {
	.gws-cta, .gws-cta * { transition: none !important; }
	.gws-cta.gws-jsfit .gws-line { opacity: 1; transform: none; }
}

/* Sommaire : SUR BLANC, filet sauge sur la section active. */
.single-post__toc { border-top: 1px solid var(--art-rule); padding-top: 22px; visibility: hidden; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.single-post__toc-label { font-family: var(--wp--preset--font-family--geist-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--art-body-soft); margin: 0 0 16px; }
/* Maillon intermédiaire de la chaîne flex : sans lui, le viewport n'est pas borné. */
.single-post__toc-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Le viewport prend la place restante et défile. max-height = filet de sécurité absolu :
   il ne peut jamais dépasser la hauteur d'écran (sticky top:96px + marge basse), même si
   la chaîne flex venait à ne pas contraindre. */
/* position: relative INDISPENSABLE : la barre latérale est sticky (donc « positionnée »).
   Sans ce relative, offsetTop des items du sommaire se mesure depuis la barre (carte CTA
   comprise) et le JS scrolle le sommaire tout en bas à l'arrivée. Ici, le zéro repart du viewport. */
.single-post__toc-viewport { position: relative; overflow-y: auto; flex: 1 1 auto; min-height: 0; max-height: calc(100vh - 128px); }
.single-post__toc-list { list-style: none; margin: 0; padding: 0; }
.single-post__toc-item--h3 { padding-left: 14px; }
.single-post__toc-link { display: block; padding: 9px 0 9px 14px; font-family: var(--wp--preset--font-family--geist); font-size: 13.5px; line-height: 1.4; color: var(--art-body-soft); border-left: 2px solid var(--art-rule); transition: color .2s, border-color .2s; }
.single-post__toc-link:hover { color: var(--art-accent); }
.single-post__toc-item--current > .single-post__toc-link { color: var(--art-accent); border-left-color: var(--art-accent); font-weight: 500; background: rgba(155, 196, 165, .12); border-radius: 0 8px 8px 0; }
.single-post__toc-counter { font-family: var(--wp--preset--font-family--geist-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--art-body-soft); margin: 16px 0 0; }
.single-post__toc-counter b { color: var(--art-body-soft); }

/* Articles liés — HORS de la feuille blanche : sur le fond violet du site (tokens GWS). */
.single-post__more { max-width: 1240px; margin: 0 auto; padding: 70px clamp(24px, 5vw, 48px) 96px; }
.single-post__more-label { font-family: var(--wp--preset--font-family--geist-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 32px; }
.single-post__more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; }
.single-post__more-image { display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; background-color: var(--card); border: 1px solid var(--glass-border); margin-bottom: 16px; transition: transform .4s ease, border-color .3s ease; }
.single-post__more-item:hover .single-post__more-image { transform: scale(1.02); border-color: var(--accent); }
.single-post__more-meta { display: block; font-family: var(--wp--preset--font-family--geist-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.single-post__more-title { display: block; font-family: var(--wp--preset--font-family--fahkwang); font-weight: 400; font-size: 21px; line-height: 1.18; color: var(--text-strong); }
.single-post__more-item:hover .single-post__more-title { color: var(--accent); }

@media (max-width: 900px) {
	/* minmax(0, 1fr) et NON « 1fr » : « 1fr » vaut « minmax(auto, 1fr) », et cet « auto »
	   interdit à la colonne de descendre sous la taille minimale de son contenu. Or la
	   colonne latérale s'empile ICI, et sa carte CTA a des lignes en white-space:nowrap
	   dont le JS calcule la police pour remplir la largeur : le contenu figeait la colonne
	   à 467px dans un parent de 451 (16/07/2026). Le min-width:0 sur la sidebar fait la
	   même chose au niveau de l'élément (minmax contraint la colonne, pas l'élément
	   qu'elle porte : un grid item garde son min-width:auto). Il faut les DEUX. Piège #27. */
	.single-post__layout { grid-template-columns: minmax(0, 1fr); }
	.single-post__body { grid-column: auto; }
	.single-post__sidebar { grid-column: auto; position: static; margin-top: 32px; min-width: 0; }
	.single-post__toc { display: none; }
	.single-post__more-grid { grid-template-columns: 1fr; }
	/* LE CTA GARDE UNE LARGEUR DE CARTE (constat d'Alexandra à 776 et 900, 19/07/2026).
	   Il est dessiné pour la colonne latérale de 300px. Empilé dans le flux, il s'étirait
	   jusqu'à ~800px, soit près du TRIPLE, et le phénomène s'amplifiait avec l'écran :
	   titre démesuré, bouton en bandeau. Il écrasait l'article au lieu de l'accompagner.
	   L'amplification vient du JS (single-post.js) : il étire les trois lignes du titre pour
	   REMPLIR la largeur de la carte. Plus la carte est large, plus le titre grossit. Le
	   plafond suffit donc à tout régler — le script écoute le redimensionnement et recalcule
	   la police tout seul, aucune modification de JavaScript nécessaire (vérifié).
	   430px et non 300 : c'est la largeur de carte du site (celle de .call-card et du ticket
	   des Réalisations, tous deux plafonnés à cette valeur aujourd'hui). Ses 300px d'origine
	   sont la mesure d'une COLONNE LATÉRALE, pas d'une carte posée seule dans une page. */
	.single-post__sidebar .gws-cta { max-width: 430px; margin-inline: auto; }
	/* La barre de partage se CENTRE elle aussi (demande d'Alexandra, 19/07/2026) : elle
	   annonce la carte qui la suit, elle doit donc partager son axe. Calée à gauche au-dessus
	   d'une carte centrée, elle se lisait comme un élément détaché. */
	.single-post__share { justify-content: center; }
}

/* 601-900 — LE CTA EN CARTE HORIZONTALE (piste demandée par Alexandra le 19/07/2026, pour
   comparer avec la carte verticale plafonnée ci-dessus, qu'on ne défait pas).
   POURQUOI. Le plafond de 430px règle la démesure mais pas le VIDE : à 853, il reste 175px de
   blanc de chaque côté. Son constat : la carte verticale tient jusqu'à 500-600, au-delà elle
   flotte. Au lieu de la laisser s'étirer (ce qui regrossit le titre) ou de la laisser seule au
   milieu, on change sa FORME. Même principe que la rangée « Codé + WordPress » de la page
   Création et que le bandeau « tout compris » de Maintenance : c'est la composition qui
   s'adapte, pas l'élément.
   LA COMPOSITION : les deux lignes d'en-tête en pleine largeur, puis le TITRE à gauche et la
   liste de preuves à DROITE au lieu d'en dessous, puis le bouton en pied sur toute la largeur.
   Le titre n'occupe donc plus que 55 % de la carte : le script single-post.js, qui mesure la
   largeur du TITRE et non celle de la carte (vérifié), le calcule automatiquement plus petit.
   Aucune modification de JavaScript, aucune modification de balisage.
   ⚠ LE SEUIL DE 600 EST À CONFIRMER PAR L'ŒIL D'ALEXANDRA. C'est un point de départ pour la
   comparaison, pas une mesure : elle a dit « jusqu'à 500 et encore » pour la carte verticale,
   moi je calcule qu'elle tient jusqu'à ~650. 600 est entre les deux. Un seul chiffre à changer. */
@media (min-width: 601px) and (max-width: 900.98px) {
	.single-post__sidebar .gws-cta {
		max-width: none;
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		column-gap: 32px;
	}
	.single-post__sidebar .gws-cta .gws-eyebrow,
	.single-post__sidebar .gws-cta .gws-sub { grid-column: 1 / -1; }
	/* De l'air sous le libellé « CRÉATION DE SITES INTERNET SUR-MESURE » : la boîte de preuves
	   le touchait presque (Alexandra, 19/07/2026). La marge est posée sur le LIBELLÉ et non sur
	   la boîte : elle repousse la rangée entière, donc le titre et la boîte descendent ensemble
	   et gardent leur alignement. Sur la boîte seule, elle aurait décalé les deux colonnes. */
	.single-post__sidebar .gws-cta .gws-sub { margin-bottom: 20px; }
	.single-post__sidebar .gws-cta .gws-title { grid-column: 1; grid-row: 3; }
	/* La boîte de preuves tient les DEUX rangées de la colonne de gauche (titre puis bouton),
	   et se centre sur leur hauteur totale. */
	.single-post__sidebar .gws-cta .gws-proof {
		grid-column: 2;
		grid-row: 3 / 5;
		align-self: center;
		margin-top: 0;
	}
	/* BOUTON RÉDUIT ET REMONTÉ (Alexandra, 19/07/2026). Il était en pleine largeur — non par
	   choix mais par construction : c'est un « flex », donc un élément de niveau bloc, qui
	   occupe tout ce qu'on lui donne. Étalé sur 700px il pesait plus lourd que le titre.
	   « width: fit-content » lui rend sa largeur naturelle (~255px : le libellé plus ses marges
	   intérieures, dont les 60px de droite qui réservent la place de la flèche en absolu), et il
	   vient occuper le vide sous le titre, face à la boîte de preuves. */
	.single-post__sidebar .gws-cta .gws-btn {
		grid-column: 1;
		grid-row: 4;
		width: fit-content;
		justify-self: start;
	}
}

/* ==========================================================================
   Pages légales (bloc gws/legal) — méthode reprise du single légal de Graph'Art
   (mot fantôme en filigrane STATIQUE sans lumière + sommaire numéroté en tête,
   liens d'ancrage, pas de scrollspy ni de sticky), recodée en charte GWS sombre.
   ========================================================================== */
/* Blanc atténué sur les pages légales uniquement (fond violet plat, sans dégradés :
   le blanc titre du reste du site y paraît trop flashy). */
.legal { --text-strong: #ece6d6; }
.legal-hero {
	position: relative;
	overflow: hidden;
	min-height: 230px;
	display: flex;
	align-items: center;
	padding: 128px 0 60px;
	border-bottom: 1px solid var(--glass-border);
}
/* Titre et corps alignés sur le MÊME bord gauche que tout le site : conteneur .wrap
   (max-width centré + padding clamp), colonne de lecture ensuite alignée à gauche. */
.legal-hero-body {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 clamp(24px, 4.5vw, 90px);
}
.legal-hero-title {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: clamp(46px, 6.2vw, 92px);
	line-height: 1.04;
	letter-spacing: -.03em;
	color: var(--text-strong);
	max-width: 900px;
	margin: 0;
}
.legal-hero-title em { font-style: italic; color: var(--accent); }

.legal-content {
	max-width: 880px;
	margin: 0 auto;
	padding: 64px clamp(24px, 4.5vw, 90px) 100px;
}
.legal-updated {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-mute);
	margin: 0 0 40px;
}

/* Sommaire numéroté (01, 02…), liens d'ancrage. Liste nue (pas d'encadré). */
.legal-toc {
	max-width: 560px;
	margin: 0 0 62px;
}
.legal-toc-label {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: 21px;
	color: var(--text-strong);
	margin-bottom: 16px;
}
.legal-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: legal-toc;
}
.legal-toc li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	counter-increment: legal-toc;
}
.legal-toc li::before {
	content: counter(legal-toc, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10px;
	color: var(--accent);
	opacity: .6;
	flex-shrink: 0;
	width: 22px;
}
.legal-toc a {
	display: inline-block;
	padding: 7px 0;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-dim);
	text-decoration: none;
	transition: color .2s ease, transform .2s ease;
}
.legal-toc a:hover { color: var(--accent); transform: translateX(4px); }
/* Repère éditeur uniquement (le vrai sommaire est généré au front). */
.legal-toc-hint {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	color: var(--text-mute);
	margin: 0;
}

/* Corps légal : une colonne, H2 séparés par un filet. */
.legal-body h2 {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	font-size: clamp(24px, 2.6vw, 34px);
	letter-spacing: -.02em;
	color: var(--text-strong);
	margin: 54px 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--glass-border);
	scroll-margin-top: 68px;
}
.legal-body > h2:first-child { margin-top: 0; }
.legal-body h3 {
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: 18px;
	color: var(--text-strong);
	margin: 30px 0 12px;
}
.legal-body p,
.legal-body li {
	font-family: var(--wp--preset--font-family--geist);
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--text-dim);
}
.legal-body p { margin: 0 0 16px; }
.legal-body ul,
.legal-body ol { padding-left: 1.4em; margin: 0 0 16px; }
.legal-body li { margin-bottom: 6px; }
/* Liens du corps : sauge, pas de soulignement statique ; au survol un soulignement
   sauge qui glisse de la gauche (via background-size animé). */
.legal-body a {
	color: var(--accent);
	text-decoration: none;
	background-image: linear-gradient(var(--accent), var(--accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size .5s cubic-bezier(.2, .7, .2, 1);
}
.legal-body a:hover { background-size: 100% 1px; }
.legal-body strong { color: var(--text-strong); font-weight: 500; }

@media (max-width: 720px) {
	.legal-hero { min-height: 0; padding: 104px 0 48px; align-items: flex-start; }
}

/* ==========================================================================
   Page 404 (templates/404.html) — calage repris de Graph'Art : gros chiffre
   « 404 » estompé, titre réduit, sous-titre italique, PAS de footer (respiration
   pleine hauteur), contenu centré verticalement sous le header sticky (~104px).
   ========================================================================== */
.gws-404 {
	min-height: calc(100vh - 104px);
	min-height: calc(100svh - 104px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: 3rem;
	padding-bottom: 3rem;
}
.gws-404 .e404-num {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 300;
	font-size: clamp(7rem, 20vw, 14rem);
	line-height: .85;
	letter-spacing: -.04em;
	color: var(--wp--preset--color--lavande);
	opacity: .22;
	margin: 0 0 clamp(2.2rem, 5vw, 3.6rem);
}
.gws-404 h1 {
	margin: 0;
	max-width: 20ch;
}
.gws-404 .e404-sub {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--lavande);
	max-width: 42ch;
}
.gws-404 .contact-btns { margin-top: clamp(3.2rem, 7vw, 5.2rem); }

@media (max-width: 700px) {
	.gws-404 { min-height: calc(100svh - 96px); }
	.gws-404 .e404-num { font-size: clamp(5rem, 30vw, 9rem); }
}

/* ============================================================================
   Page d'attente Réalisations (bloc gws/reals-attente). Hero centré + bande
   défilante des univers clients. Repris de la maquette Claude Design « défilé »,
   re-scopé sur le bloc (jamais [data-page]), polices auto-hébergées via les
   variables du thème (jamais le CDN Google), défilé en CSS pur.
   ============================================================================ */
.gws-reals-attente {
	position: relative;
	padding: 40px 0 0;
	min-height: calc(100vh - 200px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.gws-reals-attente .wrap { text-align: center; }
.gws-reals-attente .rw-title {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	letter-spacing: -.035em;
	color: var(--text-strong);
	font-size: clamp(48px, 7vw, 104px);
	line-height: 1.0;
	margin: 0;
}
.gws-reals-attente .rw-title em { font-style: italic; color: var(--accent); }
.gws-reals-attente .rw-sub {
	max-width: 60ch;
	margin: 28px auto 0;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(19px, 1.9vw, 25px);
	line-height: 1.5;
	color: var(--text-dim);
}
.gws-reals-attente .rw-sub em { color: var(--accent); font-style: italic; }
/* CTA = vrais core/buttons depuis la v2 du bloc (texte + lien éditables et comptés,
   piège #4). Même patron que .hero-cta : l'icône ronde est recréée en ::after, car
   core/button n'insère aucun span propre. */
.gws-reals-attente .rw-cta {
	margin-top: 42px;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}
.gws-reals-attente .rw-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 13.5px;
	font-weight: 500;
	border: 1px solid rgba(155, 196, 165, .40);
	border-radius: 40px;
	padding: 11px 16px 11px 20px;
	color: var(--text);
	background: transparent;
	transition: all .2s;
	text-decoration: none;
	white-space: normal;
}
.gws-reals-attente .rw-cta .wp-block-button__link:hover {
	border-color: rgba(155, 196, 165, .85);
	background: rgba(155, 196, 165, .08);
}
.gws-reals-attente .rw-cta .wp-block-button__link::after {
	content: "\25CF";
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 11px;
	color: var(--accent);
	background: rgba(155, 196, 165, .14);
	box-shadow: 0 0 6px rgba(155, 196, 165, .28);
}
.gws-reals-attente .rw-cta .is-style-primary .wp-block-button__link {
	background: var(--pill);
	color: var(--ink);
	border-color: transparent;
}
.gws-reals-attente .rw-cta .is-style-primary .wp-block-button__link:hover {
	background: #c4ddca;
}
.gws-reals-attente .rw-cta .is-style-primary .wp-block-button__link::after {
	content: "\2192";
	background: var(--ink);
	color: var(--accent-light);
	box-shadow: none;
}

/* Bande défilante : les univers qui arriveront dans la galerie (décor, aria-hidden).
   Piste dupliquée 2x dans render.php ; l'animation translate de 0 a -50% -> boucle
   continue sans couture. Pause au survol. Fondu latéral par mask-image. */
/* La section centre son contenu dans une min-height de 100vh-200px : quand le contenu est
   plus court, le surplus se répartit MOITIÉ au-dessus du titre, MOITIÉ SOUS la bande. Ce
   trou sous la bande (~114px à 1836px de large) s'ajoutait au padding de la galerie et la
   repoussait vers le bas. Marges auto sur .wrap = le surplus est entièrement absorbé AUTOUR
   du contenu -> la bande est collée au bas de la section, et le titre ne bouge pas (il garde
   la même moitié de surplus au-dessus de lui). Inerte si le contenu dépasse la min-height. */
.gws-reals-attente > .wrap {
	margin-block: auto;
	/* Au-dessus du mot fantôme (.hero-reveal est en position:absolute z-index:0 : sans
	   position ici, le décor de fond passerait PAR-DESSUS le texte, car un élément
	   positionné se peint au-dessus du flux normal). Équivalent du .hero-main z-index:2
	   du hero d'accueil. */
	position: relative;
	z-index: 2;
}
.gws-reals-attente .rw-marquee {
	position: relative;
	margin-top: 72px;
	padding: 26px 0;
	border-top: 1px solid rgba(155, 196, 165, .16);
	border-bottom: 1px solid rgba(155, 196, 165, .16);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.gws-reals-attente .rw-track {
	display: flex;
	width: max-content;
	animation: gws-reals-scroll 34s linear infinite;
}
.gws-reals-attente .rw-marquee:hover .rw-track { animation-play-state: paused; }
@keyframes gws-reals-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.gws-reals-attente .rw-track span {
	display: inline-flex;
	align-items: center;
	gap: 34px;
	padding: 0 34px;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(24px, 3vw, 40px);
	color: var(--text-dim);
	white-space: nowrap;
}
.gws-reals-attente .rw-track span::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	opacity: .6;
}
.gws-reals-attente .rw-track .on { color: var(--accent); }

/* Mouvement réduit : on fige la bande (accessibilité). */
@media (prefers-reduced-motion: reduce) {
	.gws-reals-attente .rw-track { animation: none; }
}

/* Éditeur : pas de hauteur plein écran (sinon le bloc s'étire dans le canevas). */
.editor-styles-wrapper .gws-reals-attente { min-height: 0; }

/* ============================================================================
   Galerie « Déjà en ligne » (bloc gws/reals-galerie), sous le hero d'attente :
   une vedette (projet livré) + un quatuor (3 cellules « en cours » + ticket
   d'invitation). Repris de la maquette Claude Design « vedette + triptyque »,
   re-scopé sur le bloc, jetons + polices du thème, aucun JS.
   ============================================================================ */
/* Padding haut réduit de moitié (16/07) : il s'ajoutait au trou laissé par le centrage du
   hero au-dessus (cf. .gws-reals-attente > .wrap), et la galerie tombait trop bas. */
.gws-reals-galerie { padding: clamp(32px, 4.5vw, 60px) 0 96px; }
.gws-reals-galerie .wrap { text-align: left; }
.gws-reals-galerie .rg-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: clamp(36px, 5vw, 56px);
}
.gws-reals-galerie .rg-head h2 {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	letter-spacing: -.03em;
	color: var(--text-strong);
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1;
	margin: 0;
}
.gws-reals-galerie .rg-head h2 em { font-style: italic; color: var(--accent); }
/* Le compteur est un core/paragraph depuis la v2 du bloc (compté, éditable au clic) :
   d'où le reset de marge, qu'un <span> ne demandait pas. */
.gws-reals-galerie .rg-head .cnt {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-mute);
	margin: 0;
}

.gws-reals-galerie .rg-hero {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
	margin-bottom: clamp(40px, 6vw, 72px);
}
.gws-reals-galerie .rg-shot {
	aspect-ratio: 16 / 10;
	border-radius: 16px;
	border: 1px solid rgba(155, 196, 165, .2);
	background: linear-gradient(150deg, rgba(155, 196, 165, .10), rgba(155, 196, 165, .02));
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-mute);
	overflow: hidden;
}
.gws-reals-galerie .rg-shot img { width: 100%; height: 100%; object-fit: cover; }
.gws-reals-galerie .rg-meta .g-name {
	display: block;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	letter-spacing: -.02em;
	color: var(--text-strong);
	font-size: clamp(34px, 4.4vw, 60px);
	line-height: 1;
	margin: 16px 0 18px;
}
.gws-reals-galerie .rg-meta .g-name em { font-style: italic; color: var(--accent); }
.gws-reals-galerie .rg-meta p {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(17px, 1.7vw, 19px);
	line-height: 1.5;
	color: var(--text-dim);
	max-width: 42ch;
	margin: 0 0 26px;
}

.gws-reals-galerie .st {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.gws-reals-galerie .st.live { color: var(--accent-soft); }
.gws-reals-galerie .st.wip { color: var(--text-mute); }
.gws-reals-galerie .st.wip i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	opacity: .75;
	box-shadow: 0 0 0 0 rgba(155, 196, 165, .55);
	animation: gws-reals-pulse 2.6s ease-out infinite;
}
@keyframes gws-reals-pulse {
	0% { box-shadow: 0 0 0 0 rgba(155, 196, 165, .5); }
	70% { box-shadow: 0 0 0 8px rgba(155, 196, 165, 0); }
	100% { box-shadow: 0 0 0 0 rgba(155, 196, 165, 0); }
}
.gws-reals-galerie .g-type {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.gws-reals-galerie .g-link,
.gws-reals-galerie .inv-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 13px;
	font-weight: 500;
	color: var(--accent);
	text-decoration: none;
}
.gws-reals-galerie .g-link .ic {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--ink);
	font-size: 12px;
	transition: transform .35s ease;
}
.gws-reals-galerie .g-link:hover .ic { transform: rotate(-45deg); }
/* Pastille PLEINE, comme toutes les flèches du site (.card-link et .reals-next à 26px, le
   « Lire l'article » du blog et le .g-link ci-dessus à 24px). La maquette d'origine la
   donnait en contour qui se remplissait au survol : c'était le seul contour du site, et il
   trahissait la charte. Seule la rotation reste au survol, déclenchée par la carte entière. */
.gws-reals-galerie .inv-cta .ic {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--ink);
	font-size: 12px;
	transition: transform .35s ease;
}
.gws-reals-galerie .ticket:hover .inv-cta .ic { transform: rotate(-45deg); }

.gws-reals-galerie .rg-tri {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 1.05fr;
	align-items: stretch;
}
/* Le trait du haut est porté par les CELLULES, pas par la grille (16/07) : sur la grille, il
   courait sur toute la largeur et passait derrière le ticket. Porté par les cellules, il
   s'arrête net à la fin de la dernière -> le ticket reste une carte détachée. */
.gws-reals-galerie .rg-cell {
	padding: 30px 28px;
	text-align: center;
	border-top: 1px solid rgba(155, 196, 165, .16);
	border-right: 1px solid rgba(155, 196, 165, .16);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
/* Dernière cellule avant le ticket (le ticket est toujours le dernier enfant) : pas de
   séparateur contre lui. Écrit en :nth-last-child pour rester juste si on ajoute des
   cellules le jour où le portfolio grandit. */
.gws-reals-galerie .rg-cell:nth-last-child(2) {
	border-right: 0;
}
/* Nom du projet en crème (16/07) : en lavande, les trois VRAIS projets passaient derrière
   le ticket d'invitation (une place VIDE), qui est crème à la même taille -> la carte la
   moins substantielle criait plus fort que les autres. La hiérarchie face à la vedette est
   déjà portée par la TAILLE (27px contre 60px), elle n'a pas besoin de la couleur en plus. */
.gws-reals-galerie .rg-cell .g-name {
	display: block;
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	letter-spacing: -.02em;
	font-size: clamp(20px, 2.2vw, 27px);
	color: var(--text-strong);
	margin: 0;
}
.gws-reals-galerie .rg-cell .eta {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent-soft);
	opacity: .85;
}

/* Ticket d'invitation (4e place). Encoches en demi-lune = cercles couleur --ink
   (le fond de page) qui « percent » la bordure -> effet ticket. */
.gws-reals-galerie .tkwrap {
	display: grid;
	place-items: center;
	padding-left: clamp(18px, 2.4vw, 34px);
}
/* Ticket « allumé » au repos (16/07) : il ferme la page, il ne doit pas se lire comme une
   4e cellule administrative. RÈGLE DU RÉGLAGE : monter le statique SANS manger le survol.
   On monte donc les DEUX états, jamais le seul repos. Liseré .34 -> .46 (le saut vers
   var(--accent) passe de +.66 à +.54 : réduit, mais toujours franc) ; fond .08/.02 -> .12/.03
   au repos ET .13/.03 -> .19/.05 au survol, donc l'écart de fond passe de +.05 à +.07 : le
   survol est RENFORCÉ, pas dilué. Le scale(1.03) est le filet : un mouvement, aucune valeur
   statique ne peut l'éteindre. Ne pas monter davantage sans refaire ce calcul d'écart. */
.gws-reals-galerie .ticket {
	position: relative;
	width: 100%;
	text-align: center;
	padding: 34px 26px;
	border: 1px solid rgba(155, 196, 165, .46);
	border-radius: 16px;
	background: linear-gradient(160deg, rgba(155, 196, 165, .12), rgba(155, 196, 165, .03));
	transition: border-color .35s ease, transform .35s ease, background .35s ease;
}
.gws-reals-galerie .ticket:hover {
	border-color: var(--accent);
	transform: scale(1.03);
	background: linear-gradient(160deg, rgba(155, 196, 165, .19), rgba(155, 196, 165, .05));
}
.gws-reals-galerie .ticket::before,
.gws-reals-galerie .ticket::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ink);
	transform: translateY(-50%);
}
/* Le liseré interne des encoches suit TOUJOURS l'opacité de la bordure du ticket (.46
   depuis le 16/07) : sinon les demi-lunes paraissent plus pâles que le liseré qui les
   entoure et l'effet « poinçonné » se casse. Les 4 valeurs (2 ici, 2 en mobile) bougent
   ensemble. */
.gws-reals-galerie .ticket::before { left: -12px; box-shadow: inset -1px 0 0 rgba(155, 196, 165, .46); }
.gws-reals-galerie .ticket::after { right: -12px; box-shadow: inset 1px 0 0 rgba(155, 196, 165, .46); }
.gws-reals-galerie .ticket .k {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 9.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--accent-soft);
	display: block;
	margin-bottom: 14px;
}
.gws-reals-galerie .ticket .q {
	font-family: var(--wp--preset--font-family--fahkwang);
	font-weight: 400;
	letter-spacing: -.02em;
	font-size: clamp(21px, 2.3vw, 27px);
	color: var(--text-strong);
	line-height: 1.05;
	margin: 0 0 8px;
}
.gws-reals-galerie .ticket .q em { font-style: italic; color: var(--accent); }
.gws-reals-galerie .ticket .dash {
	height: 1px;
	background: repeating-linear-gradient(90deg, rgba(155, 196, 165, .5) 0 6px, transparent 6px 12px);
	margin: 14px 0 18px;
}

/* 761-879 — LA RANGÉE PASSE EN 2 x 2 (constat et seuil d'Alexandra, 19/07/2026).
   La rangée des projets tombait de QUATRE colonnes à UNE d'un seul coup, à 760. Entre les
   deux, chaque cellule ne faisait que ~171px, dont 56px de marges intérieures : il restait
   115px pour du texte CENTRÉ. Illisible, et ce réglage valait de 761 jusqu'à 1100.
   Le seuil de 880 est celui de son œil, et il est cohérent avec la mesure : à 880 il reste
   142px de texte par cellule, contre 115px à 761. C'est la limite du supportable.
   Trois cellules + le ticket font quatre éléments : deux colonnes donnent donc exactement
   deux rangées pleines, sans orphelin.
   LES FILETS. En quatre colonnes, chaque cellule porte un filet HAUT et un filet DROIT, et la
   dernière avant le ticket perd son filet droit pour le laisser détaché. En deux colonnes, la
   cellule de la colonne 2 se retrouve au bord droit avec un filet qui ne sépare plus rien : on
   le retire. « nth-child(even) » et non « nth-child(2) », pour que ça reste juste si le
   portfolio grandit — en deux colonnes, tout rang pair est en colonne 2.
   Les filets HAUTS suffisent à séparer les deux rangées : les cellules n'ont pas de filet bas,
   donc aucun doublon entre la rangée 1 et la rangée 2.
   Ce bloc est placé AVANT celui du téléphone : sous 760 les deux s'appliquent et c'est le
   dernier qui doit gagner. */
@media (max-width: 879.98px) {
	.gws-reals-galerie .rg-tri { grid-template-columns: repeat(2, 1fr); }
	/* FILETS SUPPRIMÉS (décision d'Alexandra, 19/07/2026), et pas seulement celui du bord
	   droit. En quatre colonnes, ils lisent comme les séparateurs d'une même rangée. En deux
	   rangées de deux, ils ne séparent plus rien de lisible : ils découpent au hasard. Les
	   cellules se distinguent alors par leur seul espacement, ce qui suffit.
	   Le bloc du téléphone les REMET, en filets horizontaux, parce qu'en colonne unique ils
	   redeviennent utiles pour séparer des cellules qui s'enchaînent verticalement. */
	.gws-reals-galerie .rg-cell { border-top: 0; border-right: 0; }
}

/* ⚠ BORNE EN « .98 » ET NON SUR L'ENTIER. Elle valait « 760px », ce qui laissait échapper la
   largeur réelle 760,4 (la largeur d'une fenêtre n'est pas un entier, cf. la borne 956.98 du
   contact) : à « 760 » affiché, ni ce bloc ni le précédent ne prenaient la main comme prévu.
   Défaut latent que personne n'avait vu, corrigé le 19/07/2026 en passant la borne à 760.98. */
@media (max-width: 760.98px) {
	.gws-reals-galerie .rg-hero { grid-template-columns: 1fr; }
	/* Empilé : le trait de tête revient sur la grille (une seule ligne au-dessus de la
	   première cellule), et les cellules ne portent plus qu'un trait BAS — sinon haut + bas
	   se doubleraient entre deux cellules voisines. */
	.gws-reals-galerie .rg-tri { grid-template-columns: 1fr; border-top: 1px solid rgba(155, 196, 165, .16); }
	.gws-reals-galerie .rg-cell { border-top: 0; border-right: 0; border-bottom: 1px solid rgba(155, 196, 165, .16); }
	.gws-reals-galerie .tkwrap { padding: 26px 0 0; }
	/* EN COLONNE UNIQUE, ON « BOXE » (demande d'Alexandra, 19/07/2026). Le ticket est en
	   « width: 100% » : seul sur sa rangée, il s'étirait d'un bord à l'autre de l'écran, et la
	   description verte du projet le plus bavard faisait pareil. Les deux se lisaient comme des
	   bandeaux, plus comme des cartes. On leur pose le MÊME plafond, 430px, la largeur de carte
	   du site (celle de .call-card), pour qu'ils s'alignent l'un sur l'autre.
	   Aucun centrage à écrire : la cellule est une colonne flex centrée et le ticket vit dans
	   une grille en « place-items: center ». Et si .eta est un <span>, il est ici enfant d'un
	   conteneur flex, donc traité comme un bloc : le plafond s'y applique bien. */
	.gws-reals-galerie .ticket { max-width: 430px; }
	.gws-reals-galerie .rg-cell .eta { max-width: 430px; }
	.gws-reals-galerie .ticket::before { left: 50%; top: -11px; transform: translateX(-50%); box-shadow: inset 0 -1px 0 rgba(155, 196, 165, .46); }
	.gws-reals-galerie .ticket::after { right: auto; left: 50%; top: auto; bottom: -11px; transform: translateX(-50%); box-shadow: inset 0 1px 0 rgba(155, 196, 165, .46); }
}

@media (prefers-reduced-motion: reduce) {
	.gws-reals-galerie .st.wip i { animation: none; }
}

/* ==========================================================================
   EMPILEMENT DES CTA — source unique pour TOUS les groupes de boutons du site.
   Placé en fin de feuille pour passer après les règles de base de chaque composant.

   POURQUOI 560 ET NON 700. C'était calé sur 700, le palier général du site. Mais
   « à partir de quand deux boutons ne tiennent plus côte à côte » n'est PAS la même
   question que « à partir de quand la page passe en version téléphone » : ça dépend
   de la longueur des libellés, pas de la mise en page. À 600, les boutons étaient
   déjà empilés et étirés à 230px chacun au milieu d'une carte largement assez large.
   Constaté par Alexandra le 18/07.

   D'OÙ VIENT LE 560. Mesuré sur la paire la plus longue du site (« Découvrir les
   offres » + « Réserver votre appel ») : environ 410px à leur largeur naturelle,
   gouttière comprise. Le cas le plus SERRÉ n'est pas le hero mais la carte « tout
   compris », qui ajoute ses marges intérieures : la paire y demande ~380px dans une
   carte qui dispose de la largeur d'écran moins ~110px. Rupture calculée vers 490 ;
   on prend 560 pour garder de la marge. UN SEUL seuil pour tous les groupes, choisi
   sur le cas le plus serré, plutôt que quatre valeurs à maintenir séparément.

   AU-DESSUS DE 560 : largeur NATURELLE, côte à côte. EN DESSOUS : empilés, centrés,
   et tous à la même largeur (230px) car empilés, deux largeurs différentes se voient
   immédiatement (demande d'Alexandra à 372, le 17/07).
   ========================================================================== */
@media (max-width: 560px) {
	.hero-cta,
	.contact-btns,
	.allin-cta {
		flex-direction: column;
		align-items: center;
	}
	.hero-cta .wp-block-button,
	.contact-btns .wp-block-button,
	.allin-cta .wp-block-button {
		width: 100%;
		max-width: var(--cta-mobile-w);
	}
	.hero-cta .wp-block-button__link,
	.contact-btns .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
	/* Mini-CTA du blog : liens .btn maison, pas des blocs bouton du cœur. */
	.gws-blog .cta-mini .btns {
		flex-direction: column;
		align-items: center;
	}
	.gws-blog .cta-mini .btns .btn {
		width: 100%;
		max-width: var(--cta-mobile-w);
	}
}

/* =======================================================================
   MOULE V2 — PALIER 3 (02/08/2026) : parité des éléments passés en blocs.
   Les classes ne changent pas, seules les BALISES changent (div/span -> p
   pour le texte compté, figure de core/image pour les médias) : resets
   ciblés, identiques éditeur et front.
   ======================================================================= */

/* Bandeau « tout compris » (gws/box.tc-strip) : la phrase devient un
   core/paragraph.tc-seg.tc-desc COMPTÉ ; l'emphase passe du span.tc-em à
   un vrai <em> (même rendu que l'historique). */
.tc-strip p.tc-desc { margin: 0; }
.tc-strip .tc-desc em { color: var(--accent); font-style: italic; }

/* Carte d'offre : le « pour qui » devient un core/paragraph.who COMPTÉ. */
.card p.who { margin: 0 0 18px; }

/* Parcours : portrait en core/image (figure) dans la box parcours-mid —
   mêmes règles que l'historique .rnd, appliquées à l'img du bloc. */
.apropos-parcours .parcours-mid figure { margin: 0; }
.apropos-parcours .parcours-mid figure img {
	width: 190px;
	height: 190px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin: 0 auto;
	border: 1px solid var(--glass-border);
	box-shadow: inset 0 1px 0 rgba(255, 250, 235, .08), -6px 10px 24px -14px rgba(0, 0, 0, .6);
	filter: saturate(.98);
}

/* Vedette : aperçu en core/image (figure) dans la box rg-shot — la figure
   remplit la cellule, l'img garde sa règle historique (cover). */
.gws-reals-galerie .rg-shot figure { margin: 0; width: 100%; height: 100%; }

/* Cellule projet : l'échéance devient un core/paragraph.eta COMPTÉ. */
.gws-reals-galerie .rg-cell p.eta { margin: 0; }

/* ============================================================================
   CURSEUR SUR MESURE (07/08/2026)

   DEUX pièces qui ne bougent pas pareil, et c'est tout l'enjeu :
     · le POINT colle exactement à la souris. C'est lui qui vise, il ne ment
       jamais sur la position, on ne perd donc aucune précision au clic ;
     · l'ANNEAU accompagne avec un léger retard et se recentre à l'arrêt.
   Une traîne où TOUT retarde avait été essayée puis écartée par Alexandra : on
   ne sait plus où on pointe, et ça fait mou. Séparer ce qui doit être exact de
   ce qui a le droit de flotter est ce qui distingue l'accompagnement du gadget.

   ⚠ RÈGLE ABSOLUE, ne pas « simplifier » : `cursor: none` n'est JAMAIS posé en
   CSS statique. Tout est scopé à `html.gws-cursor-on`, classe posée PAR le JS.
   Le CSS s'applique toujours, le JS non (erreur, script bloqué, réseau lent) :
   un masquage statique laisserait le visiteur sans aucun curseur, incapable de
   viser. Pas de JS → pas de classe → curseur natif intact. C'est aussi ce qui
   fait office d'interrupteur : retirer l'enqueue éteint tout proprement.
   (Recette maîtresse §7, gravé le 16/07/2026 avant implémentation.)

   Les états vivent sur <html> (cur-hot, cur-light, cur-hide) : une seule
   source, deux pièces qui la lisent.

   Les réglages sont en variables : pour ajuster le rendu, changer une valeur
   ici, jamais la structure.
   ============================================================================ */
:root {
	--cur-size: 16px;         /* diamètre de l'anneau au repos */
	--cur-size-hot: 42px;     /* diamètre au survol d'un élément interactif */
	--cur-ring: 1.5px;        /* épaisseur du trait */
	--cur-dot: 5.5px;         /* diamètre du point */
	--cur-press-time: .1s;    /* vitesse de contraction au clic — plus bas = plus sec */
	/* Le halo de l'ANNEAU a été retiré le 07/08 : une fois visible, il faisait
	   « gadget ». Seule reste la lueur serrée du point, validée. */
}

html.gws-cursor-on,
html.gws-cursor-on * { cursor: none; }

/* Champs de saisie : on REND le curseur natif. Masquer la barre en I retirerait
   la seule indication qu'on peut taper là. Les deux pièces s'effacent alors. */
html.gws-cursor-on input,
html.gws-cursor-on textarea { cursor: text; }

.gws-cursor,
.gws-cursor-dot { display: none; }

html.gws-cursor-on .gws-cursor,
html.gws-cursor-on .gws-cursor-dot {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	/* Le positionnement est écrit image par image par le JS : aucune transition
	   sur `transform`, sinon deux lissages se superposeraient. */
	will-change: transform;
}

html.gws-cursor-on .gws-cursor {
	width: var(--cur-size);
	height: var(--cur-size);
	border: var(--cur-ring) solid var(--accent);
	z-index: 9998;
	transition: width .35s cubic-bezier(.2, .7, .2, 1), height .35s cubic-bezier(.2, .7, .2, 1),
		background-color .35s ease, border-color .2s ease, opacity .2s ease;
}

/* Le point passe DEVANT l'anneau : en mouvement, l'anneau le rattrape, et c'est
   le point qui doit rester lisible. */
html.gws-cursor-on .gws-cursor-dot {
	width: var(--cur-dot);
	height: var(--cur-dot);
	background: var(--accent);
	box-shadow: 0 0 7px 1px rgba(155, 196, 165, .85);
	z-index: 9999;
	transition: background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

html.gws-cursor-on.cur-hot .gws-cursor {
	width: var(--cur-size-hot);
	height: var(--cur-size-hot);
	background: rgba(240, 232, 216, .20);
}

/* Clic maintenu : l'anneau revient à sa taille de repos, et son voile s'efface.
   C'est le seul retour visuel dont dispose le visiteur au moment du geste, le curseur natif
   n'étant plus là pour le lui donner.
   ⚠ Placé APRÈS `.cur-hot`, qui a exactement la même spécificité : c'est l'ORDRE qui décide, et
   l'enfoncement doit gagner sur le survol. Ne pas remonter ce bloc.
   La contraction est vive ; le relèvement, lui, reprend la durée normale de .35s, parce que la
   règle disparaît au relâchement. Un « clac » sec, puis une détente posée. */
html.gws-cursor-on.cur-press .gws-cursor {
	width: var(--cur-size);
	height: var(--cur-size);
	background: transparent;
	transition-duration: var(--cur-press-time);
}

/* Fond clair (corps des articles, boutons sauges) : le sauge y tombe à 1,9:1 de
   contraste, il y serait invisible. Les deux pièces passent à l'encre. */
html.gws-cursor-on.cur-light .gws-cursor { border-color: var(--ink); }
html.gws-cursor-on.cur-light .gws-cursor-dot {
	background: var(--ink);
	box-shadow: 0 0 7px 1px rgba(21, 8, 47, .40);
}
html.gws-cursor-on.cur-light.cur-hot .gws-cursor { background: rgba(21, 8, 47, .07); }

html.gws-cursor-on.cur-hide .gws-cursor,
html.gws-cursor-on.cur-hide .gws-cursor-dot { opacity: 0; }

/* Mouvement réduit : le JS colle aussi l'anneau à la souris (voir cursor.js), et
   les transitions de taille tombent. Rien ne flotte plus. */
@media (prefers-reduced-motion: reduce) {
	html.gws-cursor-on .gws-cursor,
	html.gws-cursor-on .gws-cursor-dot { transition: none; }
}

/* Ceinture de sécurité pour les appareils hybrides qui basculeraient en tactile
   après le chargement : le JS ne pose la classe que sur pointeur fin, mais si
   le mode change en cours de route, rien ne doit rester masqué. */
@media (pointer: coarse) {
	html.gws-cursor-on,
	html.gws-cursor-on * { cursor: auto; }
	html.gws-cursor-on input,
	html.gws-cursor-on textarea { cursor: text; }
	html.gws-cursor-on .gws-cursor,
	html.gws-cursor-on .gws-cursor-dot { display: none; }
}