/*
Theme Name: Premier Wagon
Author: Premier Wagon
Description: Thème bloc sur mesure (nom provisoire). Photo plein cadre, verre dépoli, Satoshi. Contenu 100 % éditable dans Gutenberg.
Version: 1.0.202609301134
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: premier-wagon
*/
/* Premier Wagon (nom provisoire) : maquette v2, 28 sept. 2026.
   Registre relevé dans RELEVE-REFERENCE.md : photo plein cadre avec grain, contenu sur verre dépoli encarté,
   une seule grotesque (Satoshi), aucun accent de couleur, pilules, grands rayons, centré, grande échelle. */

@font-face { font-family: "Satoshi"; font-weight: 400; src: url("assets/fonts/satoshi-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Satoshi"; font-weight: 500; src: url("assets/fonts/satoshi-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Satoshi"; font-weight: 700; src: url("assets/fonts/satoshi-700.woff2") format("woff2"); font-display: swap; }

:root {
	--blanc: #fff;
	--encre: #141414;
	--texte-2: rgba(255, 255, 255, .72);
	--filet: rgba(255, 255, 255, .16);
	--verre: rgba(255, 255, 255, .14);
	--verre-sombre: rgba(28, 26, 24, .42);
	--liseret: rgba(255, 255, 255, .28);
	--flou: blur(22px) saturate(1.3);
	--rayon: 40px;
	--rayon-m: 28px;
	--marge: clamp(16px, 4vw, 48px);
	--doux: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #1a1714; color: var(--blanc); font: 400 17px/1.55 "Satoshi", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
hr { border: 0; border-top: 1px solid var(--filet); margin: 22px 0; }

/* Grain de pellicule sur tout le site, comme les images de la référence */
.grain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; opacity: .09; mix-blend-mode: overlay; }

/* ---------- Typographie : une seule famille, casse phrase, graisse moyenne ---------- */
.titre-xl { font-weight: 500; font-size: clamp(48px, 7.4vw, 124px); line-height: .98; letter-spacing: -.035em; }
.titre-l { font-weight: 500; font-size: clamp(38px, 5vw, 84px); line-height: 1; letter-spacing: -.03em; }
.sous-titre { font-weight: 400; font-size: clamp(20px, 2vw, 30px); line-height: 1.25; letter-spacing: -.01em; margin-top: .6em; opacity: .9; }
.chapo { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; color: rgba(255,255,255,.9); max-width: 36em; margin: 24px auto 0; text-shadow: 0 1px 20px rgba(0,0,0,.35); }
.petit { font-size: 14px; color: var(--texte-2); margin-top: 16px; }
.petit--centre { text-align: center; margin-top: 28px; color: rgba(255,255,255,.85); }

/* ---------- Le verre dépoli ---------- */
.verre { background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
	border: 1px solid var(--liseret); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 20px 60px rgba(0,0,0,.12); }
.verre--sombre { background: var(--verre-sombre); }

/* ---------- Pilules ---------- */
.pilule { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 28px; border-radius: 999px;
	font-weight: 500; font-size: 16px; line-height: 1.2; white-space: nowrap; transition: transform .3s var(--doux), background .3s; }
.pilule:hover { transform: translateY(-2px); }
.pilule--claire { background: var(--blanc); color: var(--encre); }
.pilule--sombre { background: rgba(20, 19, 18, .72); color: var(--blanc); border: 1px solid rgba(255,255,255,.12); }
.pilule--grande { margin-top: 40px; padding: 20px 44px; font-size: 18px; }
.puce { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; }

/* ---------- En-tête : logo, liens groupés dans du verre, bouton sombre (Farce) ---------- */
.entete { position: fixed; z-index: 30; top: 20px; left: var(--marge); right: var(--marge); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marque { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 20px; letter-spacing: -.02em; white-space: nowrap; }
@media (max-width: 480px) { .marque { font-size: 17px; } .entete .pilule { padding: 12px 18px; font-size: 14px; } }
.marque__signe { width: 22px; height: 16px; border: 2px solid currentColor; border-radius: 6px; }
.menu { display: flex; gap: 4px; padding: 5px; border-radius: 999px; }
.menu__lien { display: inline-block; padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; transition: background .25s; }
.menu__lien:hover, .menu__groupe:focus-within .menu__lien--deroulant, .menu__groupe:hover .menu__lien--deroulant { background: rgba(255,255,255,.14); }
.menu__lien--deroulant::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid; border-bottom: 1.5px solid; rotate: 45deg; translate: 0 -3px; }
/* Panneau des offres : chaque offre avec sa vignette de fenêtre */
.menu__groupe { position: relative; }
.menu__panneau { position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0; width: 460px; display: grid; gap: 4px; padding: 8px; border-radius: var(--rayon-m);
	opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .25s var(--doux), visibility .25s; }
.menu__panneau::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.menu__groupe:hover .menu__panneau, .menu__groupe:focus-within .menu__panneau { opacity: 1; visibility: visible; transform: none; }
.menu__offre { display: flex; align-items: center; gap: 16px; padding: 8px; border-radius: 20px; transition: background .25s; }
.menu__offre:hover { background: rgba(255,255,255,.1); }
.menu__offre img { width: 104px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; flex: none; }
.menu__offre span { display: flex; flex-direction: column; font-size: 14px; color: var(--texte-2); }
.menu__offre strong { font-weight: 500; font-size: 16px; color: var(--blanc); }
/* Menu mobile */
.menu-mobile__bouton { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--liseret); background: var(--verre-sombre);
	backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); color: var(--blanc); cursor: pointer; position: relative; }
.menu-mobile__bouton span, .menu-mobile__bouton span::before { position: absolute; left: 15px; right: 15px; height: 1.5px; background: currentColor; transition: rotate .3s, translate .3s; }
.menu-mobile__bouton span { top: 20px; }
.menu-mobile__bouton span::before { content: ""; left: 0; right: 0; top: 7px; }
.menu-ouvert .menu-mobile__bouton span { rotate: 45deg; translate: 0 3.5px; }
.menu-ouvert .menu-mobile__bouton span::before { rotate: -90deg; translate: 0 -7px; }
.menu-mobile { position: fixed; top: 84px; left: var(--marge); right: var(--marge); display: grid; gap: 2px; padding: 12px; border-radius: var(--rayon-m); }
.menu-mobile[hidden] { display: none; }
.menu-mobile a { padding: 14px 16px; border-radius: 16px; font-size: 18px; font-weight: 500; }
.menu-mobile .pilule { margin-top: 10px; }
@media (max-width: 960px) { .menu { display: none; } .menu-mobile__bouton { display: inline-block; } .entete__bouton { margin-left: auto; } .entete { gap: 10px; } }
@media (max-width: 420px) { .entete__bouton { display: none; } }

/* ---------- 1. Le voyage ---------- */
.voyage { position: relative; height: 760vh; }
.voyage__scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #231710; }
.vue { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: 0; will-change: opacity, transform; }
.vue:first-child { opacity: 1; }
.vue--sortie { z-index: 1; }
.voyage__toile { position: absolute; inset: 0; width: 100%; height: 100%; }
.en-sequence .vue:not(.vue--sortie) { display: none; }
.voyage__voile { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 55% 50% at 50% 45%, rgba(0,0,0,.34), rgba(0,0,0,0) 72%); }
.etape { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; translate: 0 -52%; padding: 0 var(--marge); text-align: center;
	text-shadow: 0 2px 40px rgba(0,0,0,.35); opacity: 0; transform: translateY(24px); transition: opacity .6s var(--doux), transform .8s var(--doux); pointer-events: none; }
.etape.visible { opacity: 1; transform: none; pointer-events: auto; }
.etape > .puce { margin-bottom: 28px; text-shadow: none; background: var(--verre-sombre); }
.etape .pilule, .etape .verre { text-shadow: none; }
.puces { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.puces li { display: flex; flex-direction: column; gap: 2px; padding: 16px 24px; border-radius: var(--rayon-m); text-align: left; }
.puces strong { font-weight: 500; font-size: 17px; }
.puces span { font-size: 14px; color: var(--texte-2); }
.texte-etape { max-width: 32em; margin: 32px auto 0; padding: 18px 26px; border-radius: var(--rayon-m); font-size: clamp(17px, 1.3vw, 20px); }

/* ---------- La suite : un fond photographique fixe, le contenu flotte ---------- */
.monde { position: relative; }
/* Fond fixe derrière toute la page : identique à la dernière image du voyage, le raccord est invisible. */
.monde__fonds { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: 0; transition: opacity 1.2s var(--doux); }
.fond--actif { opacity: 1; }
.monde__fonds::after { content: ""; position: absolute; inset: 0; background: transparent; }
.section { position: relative; z-index: 1; min-height: 100vh; padding: clamp(120px, 14vh, 180px) var(--marge) clamp(80px, 10vh, 140px); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.section > .titre-l { text-shadow: 0 2px 40px rgba(0,0,0,.25); }
.section > .puce { margin-bottom: 26px; background: var(--verre-sombre); }

/* Carte de verre (Onda) */
.carte { border-radius: var(--rayon); padding: clamp(24px, 3vw, 36px); text-align: left; }
.carte__haut { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }

/* Question 1 */
.question { width: min(640px, 100%); margin-top: 48px; }
.question__etape { font-size: 14px; color: var(--texte-2); }
.question__titre { font-weight: 500; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -.02em; margin: 10px 0 24px; }
.choix { display: grid; gap: 10px; }
.choix button { text-align: left; font: 500 16px/1.35 "Satoshi", sans-serif; color: var(--blanc); background: rgba(255,255,255,.08); border: 1px solid var(--filet);
	border-radius: 999px; padding: 15px 24px; min-height: 48px; cursor: pointer; transition: background .25s, color .25s, transform .25s var(--doux); }
.choix button:hover, .choix button:focus-visible { background: rgba(255,255,255,.2); outline: none; transform: translateX(4px); }
.choix button.choisi { background: var(--blanc); color: var(--encre); }
.carte__pied { font-size: 14px; color: var(--texte-2); }

/* Calculateur */
.calcul { width: min(1040px, 100%); display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; margin-top: 48px; }
@media (max-width: 860px) { .calcul { grid-template-columns: 1fr; } }
.curseur { display: block; }
.curseur__libelle { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-weight: 500; margin-bottom: 18px; }
.curseur output { font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: -.03em; }
input[type=range] { width: 100%; height: 28px; accent-color: #fff; }
.chiffre { font-weight: 500; font-size: clamp(72px, 8vw, 128px); line-height: .9; letter-spacing: -.05em; }
.chiffre-libelle { color: var(--texte-2); margin-top: 10px; }
.ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; }
.ligne span { color: var(--texte-2); }
.ligne strong { font-weight: 500; font-size: 20px; }
.calcul__resultat .pilule { margin-top: 24px; width: 100%; }

/* Offres */
.offres { width: min(1200px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
@media (max-width: 1000px) { .offres { grid-template-columns: 1fr; max-width: 520px; } }
.offre { display: flex; flex-direction: column; padding: 12px 12px 28px; }
.offre > :not(.offre__image) { margin-left: 18px; margin-right: 18px; }
.offre__image { position: relative; border-radius: calc(var(--rayon) - 10px); overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 24px; }
.offre__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--doux); }
.offre:hover .offre__image img { transform: scale(1.05); }
.offre__puces { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.offre h3 { font-weight: 500; font-size: 30px; letter-spacing: -.02em; }
.offre hr { margin: 18px 18px; }
.offre p { color: var(--texte-2); }
.offre .ligne { margin-top: auto; padding-top: 24px; }
.offre .pilule { margin-top: 18px; }

/* Méthode */
.methode { width: min(1200px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
@media (max-width: 900px) { .methode { grid-template-columns: 1fr; max-width: 520px; } }
.methode__num { display: block; font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: -.04em; opacity: .5; }
.methode h3 { font-weight: 500; font-size: 22px; margin-top: 40px; }
.methode p { color: var(--texte-2); margin-top: 8px; }

/* FAQ */
.faq { width: min(820px, 100%); margin-top: 48px; padding-top: 8px; padding-bottom: 8px; }
.faq details + details { border-top: 1px solid var(--filet); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; font-weight: 500; font-size: 18px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid; border-bottom: 1.5px solid; translate: 0 -70%; rotate: 45deg; transition: rotate .3s; }
.faq details[open] summary::after { rotate: -135deg; translate: 0 -20%; }
.faq details p { color: var(--texte-2); padding-bottom: 22px; }

/* Dernier appel (Astria) */
.section--final { min-height: 90vh; }
.combo { display: flex; align-items: center; gap: 12px; margin-top: 44px; padding: 6px 6px 6px 28px; border-radius: 999px; }
.combo span { color: var(--texte-2); white-space: nowrap; }
@media (max-width: 560px) { .combo { flex-direction: column; padding: 16px; border-radius: var(--rayon-m); } }

/* Pied : panneau de verre encarté (Astria) */
.pied { position: relative; z-index: 1; margin: 0 var(--marge) var(--marge); border-radius: var(--rayon); padding: clamp(28px, 4vw, 48px); text-align: left; }
.pied__haut { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.pied__haut > div > p { color: var(--texte-2); margin-top: 14px; max-width: 24em; }
.pied__colonnes { display: flex; gap: clamp(28px, 5vw, 80px); flex-wrap: wrap; }
.pied__colonnes div { display: flex; flex-direction: column; gap: 10px; }
.pied__colonnes p { font-weight: 500; margin-bottom: 6px; }
.pied__colonnes a { color: var(--texte-2); }
.pied__colonnes a:hover { color: var(--blanc); }
.pied__bas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--filet); margin-top: 40px; padding-top: 22px; font-size: 14px; color: var(--texte-2); }

.toast { position: fixed; z-index: 50; bottom: 24px; left: 50%; translate: -50% 0; padding: 14px 24px; border-radius: 999px; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.voyage { height: auto; }
	.voyage__scene { position: relative; }
}

/* =====================================================================
   Phase 3 : composants des pages intérieures (même registre : verre, Satoshi, aucun accent)
   ===================================================================== */

/* Liens discrets sous une section, boutons en ligne, puces qui rassurent */
.lien-bas { margin-top: 32px; }
.lien-bas a, .lien-texte { color: rgba(255,255,255,.88); border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; }
.lien-bas a:hover, .lien-texte:hover { border-color: var(--blanc); }
.boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 36px; }
.pilule--verre { background: rgba(255,255,255,.14); color: var(--blanc); border: 1px solid var(--liseret); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); }
.rassurance { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.rassurance .puce { background: var(--verre-sombre); }

/* Barre fixe du téléphone : apparaît après le premier écran */
.barre-mobile { position: fixed; z-index: 25; left: 12px; right: 12px; bottom: 12px; display: none; align-items: center; justify-content: space-between; gap: 12px;
	padding: 6px 6px 6px 20px; border-radius: 999px; font-size: 14px; color: var(--texte-2); transform: translateY(140%); transition: transform .45s var(--doux); }
.barre-mobile .pilule { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.barre-mobile.visible { transform: none; }
@media (max-width: 760px) { .barre-mobile { display: flex; } }

/* Ouverture courte des pages d'offre : la fenêtre du wagon, puis le plongeon en un écran */
.voyage--court { height: 220vh; }
.voyage--court .etape { translate: 0 -50%; }
.voyage--court h1 { max-width: 14em; margin: 0 auto; }

/* Haut de page fixe (réserver, à propos, 404) : une image du wagon, sans plongeon */
.hero-fixe { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--marge) 80px; overflow: hidden; }
.hero-fixe__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-fixe::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(0,0,0,.42), rgba(0,0,0,.08) 75%); }
.hero-fixe__contenu { position: relative; z-index: 1; text-shadow: 0 2px 40px rgba(0,0,0,.35); }
.hero-fixe .pilule, .hero-fixe .puce { text-shadow: none; }
.hero-fixe .puce { margin-bottom: 26px; background: var(--verre-sombre); }

/* Grilles de cartes */
.grille { width: min(1200px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.grille--2 { grid-template-columns: repeat(2, 1fr); width: min(960px, 100%); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grille--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .grille, .grille--2, .grille--4 { grid-template-columns: 1fr; max-width: 560px; } }
.carte h3 { font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
.carte > p, .carte li { color: var(--texte-2); }
.carte h3 + p { margin-top: 10px; }
.carte .puce { margin-top: 18px; }

/* Avant / après (automatisations) */
.aa__ligne { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin-top: 18px; }
.aa__ligne .puce { margin-top: 0; min-width: 104px; justify-content: center; }
.aa__avant { color: var(--texte-2); }
.aa__apres { color: var(--blanc); }

/* Le mini-exercice (formation) : onglets en pilules, la consigne, puis la réponse qui s'écrit */
.bloc-onglets { width: min(900px, 100%); margin-top: 48px; }
.onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.onglet { padding: 12px 22px; border-radius: 999px; font-weight: 500; cursor: pointer; background: rgba(255,255,255,.1); border: 1px solid var(--liseret);
	backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); transition: background .25s, color .25s; }
.onglet:hover { background: rgba(255,255,255,.2); }
.onglet.est-actif { background: var(--blanc); color: var(--encre); }
.panneau { display: none; margin-top: 20px; }
.panneau.est-actif { display: grid; gap: 12px; }
.exo__etiquette { font-size: 14px; color: var(--texte-2); margin-bottom: 8px; }
.exo__consigne p:not(.exo__etiquette) { font-size: 18px; }
.exo__reponse p:not(.exo__etiquette) { font-size: 18px; color: var(--blanc); }
.panneau.est-actif .exo__reponse p:not(.exo__etiquette) { animation: ecrire 2.2s steps(40) both .5s; }
@keyframes ecrire { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Le flux d'automatisation qui s'allume au défilement */
.flux { width: min(720px, 100%); margin-top: 56px; display: grid; gap: 0; counter-reset: flux; position: relative; }
.flux::before { content: ""; position: absolute; left: 31px; top: 36px; bottom: 36px; width: 1px; background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.5), rgba(255,255,255,.1)); }
.flux__etape { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: center; padding: 14px 0; text-align: left;
	opacity: .32; transform: translateX(-8px); transition: opacity .8s var(--doux), transform .8s var(--doux); }
.flux__etape.est-visible { opacity: 1; transform: none; }
.flux__etape::before { counter-increment: flux; content: counter(flux, decimal-leading-zero); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
	font-weight: 500; background: var(--verre-sombre); border: 1px solid var(--liseret); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); transition: box-shadow .8s, background .8s; }
.flux__etape.est-visible::before { background: rgba(255,255,255,.2); box-shadow: 0 0 0 6px rgba(255,255,255,.06), 0 0 40px rgba(255,255,255,.35); }
.flux__etape div { padding: 18px 22px; border-radius: var(--rayon-m); }
.flux__etape strong { display: block; font-weight: 500; font-size: 18px; }
.flux__etape span { color: var(--texte-2); }

/* Les formules (dans les pages d'offre et la page tarifs) */
.formule { display: flex; flex-direction: column; }
.formule--phare { border-color: rgba(255,255,255,.7); }
.formule__prix { font-weight: 500; font-size: clamp(44px, 4.4vw, 64px); line-height: 1; letter-spacing: -.04em; margin-top: 18px; color: var(--blanc) !important; }
.formule__prix small { font-size: .32em; letter-spacing: 0; color: var(--texte-2); }
.formule__resume { margin-top: 12px; }
.inclus { display: grid; gap: 10px; margin: 22px 0 26px; }
.inclus li { position: relative; padding-left: 28px; }
.inclus li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 1.5px solid var(--blanc); border-bottom: 1.5px solid var(--blanc); rotate: -45deg; }
.non-inclus li::before { width: 11px; height: 0; border-left: 0; rotate: 0deg; top: .75em; }
.formule .pilule { margin-top: auto; }
.note { width: min(760px, 100%); margin-top: 24px; padding: 16px 22px; border-radius: var(--rayon-m); font-size: 15px; color: rgba(255,255,255,.85); text-align: center; }

/* Témoignages : emplacement prévu, masqué tant qu'il est vide */
.temoignages--vide { display: none; }

/* La fenêtre devient un écran : les réalisations défilent dans le cadre du wagon */
.defile-ecran { position: relative; height: 320vh; width: 100%; }
.ecran { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; align-content: center; gap: 22px; padding: 90px var(--marge) 40px; }
.ecran__titre { text-align: center; }
.ecran__cadre { position: relative; width: min(1040px, 100%); aspect-ratio: 16 / 10; border-radius: clamp(28px, 4vw, 56px); overflow: hidden;
	border: clamp(8px, 1.2vw, 16px) solid #2a1b12; box-shadow: inset 0 0 0 1.5px rgba(222, 190, 140, .55), 0 0 0 1.5px rgba(222, 190, 140, .35), 0 40px 120px rgba(0,0,0,.5); background: #0d0b09; }
.ecran__vue { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--doux), transform 1.2s var(--doux); }
.ecran__vue.est-actif { opacity: 1; transform: none; }
.ecran__vue img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ecran__legendes { position: relative; min-height: 64px; width: min(1040px, 100%); }
.ecran__legende { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; opacity: 0; transition: opacity .5s; pointer-events: none; }
.ecran__legende.est-actif { opacity: 1; pointer-events: auto; }
.ecran__legende strong { font-weight: 500; font-size: 20px; }
@media (max-width: 760px) { .ecran__cadre { aspect-ratio: 3 / 4; } }

/* Page tarifs : une carte par offre, deux formules au choix */
.tarifs { width: min(1200px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; align-items: start; }
@media (max-width: 1000px) { .tarifs { grid-template-columns: 1fr; max-width: 560px; } }
.tarifs .bloc-onglets { width: 100%; margin-top: 18px; }
.tarifs .onglets { justify-content: flex-start; }
.tarifs .onglet { padding: 9px 16px; font-size: 15px; }
.tarifs .panneau { margin-top: 6px; }

/* FAQ complète : filtres par thème */
.faq-filtrable { width: min(820px, 100%); margin-top: 40px; }
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.filtre { padding: 10px 18px; border-radius: 999px; font-weight: 500; cursor: pointer; background: rgba(255,255,255,.1); border: 1px solid var(--liseret);
	backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); }
.filtre.est-actif { background: var(--blanc); color: var(--encre); }
.faq__theme { margin-top: 16px; text-align: left; }
.faq__theme.est-cache { display: none; }
.faq__theme > h3 { font-weight: 500; font-size: 14px; color: var(--texte-2); padding: 18px 0 4px; }
.faq-filtrable .faq { width: 100%; margin-top: 0; }

/* Ressources : grille d'articles et colonne de lecture */
.articles { width: min(1200px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; text-align: left; }
.articles .article-carte--une { grid-column: span 3; display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; }
@media (max-width: 1000px) { .articles { grid-template-columns: 1fr; max-width: 560px; } .articles .article-carte--une { grid-column: auto; grid-template-columns: 1fr; } }
.article-carte { padding: 12px 12px 26px; display: flex; flex-direction: column; }
.article-carte > :not(.article-carte__image) { margin-left: 16px; margin-right: 16px; }
.article-carte__image { border-radius: calc(var(--rayon) - 10px); overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 20px; }
.article-carte__image img { width: 100%; height: 100%; object-fit: cover; }
.article-carte .puce { align-self: flex-start; margin-top: 0; background: rgba(255,255,255,.12); }
.article-carte h3 { margin-top: 14px; }
.article-carte p { margin-top: 8px; }
.article-carte .lien-texte { margin-top: 18px; align-self: flex-start; }
.article-carte--une h3 { font-size: clamp(26px, 2.4vw, 36px); }
.lecture { position: relative; z-index: 1; width: min(760px, calc(100% - 2 * var(--marge))); margin: 0 auto; padding: clamp(28px, 4vw, 56px); border-radius: var(--rayon); text-align: left; }
.lecture h2 { font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.02em; line-height: 1.15; margin: 44px 0 14px; }
.lecture h3 { font-weight: 500; font-size: 21px; margin: 30px 0 10px; }
.lecture p, .lecture li { color: rgba(255,255,255,.86); font-size: 18px; line-height: 1.65; }
.lecture p + p { margin-top: 14px; }
.lecture ul, .lecture ol { margin: 12px 0 0 22px; list-style: disc; display: grid; gap: 8px; }
.lecture ol { list-style: decimal; }
.lecture .sommaire { list-style: none; margin: 0; padding: 18px 22px; border-radius: var(--rayon-m); background: rgba(255,255,255,.07); }
.lecture .sommaire a { border-bottom: 1px solid rgba(255,255,255,.3); }
.encart { margin: 36px 0; padding: 24px 26px; border-radius: var(--rayon-m); text-align: center; }
.encart h3 { margin: 0 0 8px; }
.encart .pilule { margin-top: 16px; }
.progression-lecture { position: fixed; z-index: 31; left: 0; top: 0; height: 2px; width: 100%; background: var(--blanc); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.article-entete { padding-top: clamp(140px, 18vh, 200px); padding-bottom: 40px; min-height: auto; }
.article-entete .chapo { margin-top: 18px; }
.meta-article { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* Formulaires (maquette) : sur WordPress, ce sont les shortcodes du plugin, habillés pareil */
.formulaire { width: min(640px, 100%); margin-top: 44px; text-align: left; display: grid; gap: 16px; }
.champ { display: grid; gap: 8px; }
.champ label, .champ > span { font-weight: 500; font-size: 15px; }
.champ input, .champ textarea, .champ select { width: 100%; font: 400 17px/1.4 "Satoshi", sans-serif; color: var(--blanc); background: rgba(255,255,255,.08);
	border: 1px solid var(--filet); border-radius: 18px; padding: 15px 18px; min-height: 52px; transition: border-color .25s, background .25s; }
.champ textarea { min-height: 150px; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: rgba(255,255,255,.45); }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.12); }
.champ select option { color: var(--encre); }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .champs-2 { grid-template-columns: 1fr; } }
.consentement { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--texte-2); }
.consentement input { width: 20px; height: 20px; accent-color: #fff; margin-top: 2px; }
.formulaire .pilule { justify-self: start; margin-top: 6px; border: 0; cursor: pointer; font-family: inherit; }
.combo-champ { display: flex; gap: 6px; padding: 6px; border-radius: 999px; width: min(560px, 100%); margin: 36px auto 0; }
.combo-champ input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--blanc); font: 400 17px "Satoshi", sans-serif; padding: 0 18px; }
.combo-champ input:focus { outline: none; }
.combo-champ input::placeholder { color: rgba(255,255,255,.6); }
.combo-champ .pilule { border: 0; cursor: pointer; font-family: inherit; }

/* Diagnostic : répondre, c'est monter */
.altitude-fonds { position: fixed; inset: 0; z-index: -1; }
.altitude__couche { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--doux), transform 8s linear; transform: scale(1.06); }
.altitude__couche.est-actif { opacity: 1; transform: scale(1); }
.altitude-fonds::after { content: ""; position: absolute; inset: 0; background: rgba(12, 12, 18, .32); }
.diagnostic-page { min-height: 100vh; min-height: 100svh; padding-top: 120px; }
.demo-diagnostic { width: min(680px, 100%); margin-top: 36px; }
.sc-barre { height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 10px; }
.sc-barre__jauge { display: block; height: 100%; background: var(--blanc); transition: width .6s var(--doux); }
.demo__haut { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--texte-2); }
.demo__ecran { display: none; }
.demo__ecran.est-actif { display: block; animation: monter .6s var(--doux) both; }
@keyframes monter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.choix--multiple button.choisi { background: var(--blanc); color: var(--encre); }
.demo__nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.demo__nav .pilule { border: 0; cursor: pointer; font-family: inherit; }
.altitude-legende { display: flex; gap: 6px; justify-content: center; margin-top: 18px; font-size: 13px; color: var(--texte-2); }

/* Résultats du diagnostic */
.resultats { width: min(1040px, 100%); display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-top: 44px; text-align: left; }
@media (max-width: 860px) { .resultats { grid-template-columns: 1fr; } }
.score { display: flex; align-items: baseline; gap: 6px; }
.jauges { display: grid; gap: 14px; margin-top: 20px; }
.jauge { display: grid; gap: 6px; }
.jauge span { display: flex; justify-content: space-between; font-size: 15px; color: var(--texte-2); }
.jauge i { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.jauge i::after { content: ""; display: block; height: 100%; width: var(--v, 50%); background: var(--blanc); }
.priorites { display: grid; gap: 10px; margin-top: 8px; }

/* À propos : un manifeste qui se révèle au défilement */
.manifeste { width: min(1100px, 100%); display: grid; gap: clamp(18px, 3vh, 36px); margin-top: 20px; }
.manifeste__ligne { font-weight: 500; font-size: clamp(36px, 5.6vw, 92px); line-height: 1; letter-spacing: -.04em; opacity: .16; transform: translateY(20px);
	transition: opacity 1s var(--doux), transform 1s var(--doux); text-shadow: 0 2px 40px rgba(0,0,0,.25); }
.manifeste__ligne.est-visible { opacity: 1; transform: none; }
.signature { font-size: 20px; color: rgba(255,255,255,.9); margin-top: 28px; }

/* Pages légales */
.page-legale .lecture { margin-top: 0; }

/* Révélation douce des cartes */
.revele { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--doux), transform .9s var(--doux); }
.revele.est-visible { opacity: 1; transform: none; }

/* Transitions entre pages : un bref fondu-rapproché (navigateurs compatibles) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .35s var(--doux) both sortir; }
::view-transition-new(root) { animation: .45s var(--doux) both entrer; }
@keyframes sortir { to { opacity: 0; transform: scale(1.04); } }
@keyframes entrer { from { opacity: 0; transform: scale(.985); } }

@media (prefers-reduced-motion: reduce) {
	.revele, .flux__etape, .manifeste__ligne { opacity: 1; transform: none; transition: none; }
	.panneau.est-actif .exo__reponse p { animation: none; }
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Fonds clairs (nuages, aube) : le fond fixe et l'image de sortie du plongeon sont assombris à l'identique, le raccord reste invisible */
.fond-clair .fond, .fond-clair .vue--sortie { filter: brightness(.66) saturate(1.05); }

/* Pages intérieures : des sections resserrées (l'accueil garde un écran par section) */
body:not(.page-accueil) .section { min-height: auto; padding-top: clamp(72px, 11vh, 128px); padding-bottom: clamp(56px, 8vh, 96px); }
body:not(.page-accueil) .section--final { min-height: 80vh; min-height: 80svh; }
body:not(.page-accueil) .monde > .section:first-of-type { padding-top: clamp(96px, 16vh, 180px); }
.voyage--court .voyage__voile { background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(0,0,0,.46), rgba(0,0,0,.14) 72%, rgba(0,0,0,.05)); }

/* Compléments : titres de carte (tarifs), agenda de la maquette, colonne de lecture courte */
.titre-carte { font-weight: 500; font-size: 28px; letter-spacing: -.02em; }
.agenda { width: min(760px, 100%); margin-top: 44px; text-align: left; }
.agenda__jours, .agenda__heures { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.agenda__jours span, .agenda__heures span { padding: 12px 18px; border-radius: 999px; border: 1px solid var(--filet); background: rgba(255,255,255,.06); font-weight: 500; }
.agenda__jours .est-actif { background: var(--blanc); color: var(--encre); }
.lecture--courte { margin-top: 0; }
.lecture--courte p { font-size: clamp(19px, 1.5vw, 22px); }

/* Retours de Noah (28 sept.) : colonne d'article plus large, plus d'air en haut des ressources et des articles,
   cadre des réalisations limité à la hauteur de l'écran (titre et légendes ne se chevauchent plus) */
.lecture { width: min(960px, calc(100% - 2 * var(--marge))); }
body.page-ressources .monde > .section:first-of-type, body.page-article .article-entete { padding-top: clamp(170px, 24vh, 260px); padding-bottom: 56px; }
.ecran { gap: 18px; padding-top: clamp(84px, 11vh, 110px); padding-bottom: 24px; }
.ecran__cadre { width: min(1040px, 100%, calc((100svh - 290px) * 1.6)); }
@media (max-width: 760px) { .ecran__cadre { width: min(100%, calc((100svh - 300px) * .75)); } }

/* Messages d'erreur des champs (vérification du mail, champs obligatoires) */
.champ-erreur { margin-top: 6px; font-size: 14px; color: #ffd9d2; }
.combo-champ + .champ-erreur { margin-top: 10px; text-align: center; }
.consentement + .champ-erreur { margin-top: -4px; padding-left: 34px; }
.champ-erreur { cursor: pointer; }
[aria-invalid="true"] { border-color: rgba(255, 190, 180, .75) !important; }

/* Pied de page : de l'air entre la phrase et le bouton (mesuré : 0 px) */
.pied__marque .pilule { margin-top: 24px; }
/* Offre site web (29 sept.) : pas de poussée vers le diagnostic ; le seul appel est le formulaire de contact de la page */
.offre-site .entete .entete__bouton, .offre-site .entete .entete__cta { display: none; }

/* =====================================================================
   Adaptation aux blocs WordPress (phase 4, claude-to-wordpress).
   La feuille de la maquette ci-dessus est reprise telle quelle ; ce qui suit
   fait retrouver le même rendu au balisage produit par les blocs natifs.
   ===================================================================== */

/* Filets de sécurité à spécificité nulle (blocs-gutenberg.md) */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
img { height: auto; }
.wp-site-blocks { padding: 0; }
.wp-block-post-content, .wp-block-template-part { margin: 0; }

/* Grain de pellicule : pseudo-élément du document, plus de SVG dans la page */
body::after { content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"); }

/* Boutons : la classe du bloc tombe sur le conteneur ; le conteneur s'efface et le lien hérite de tout */
.wp-block-buttons.boutons-seuls, .wp-block-button.pilule { display: contents; }
.wp-block-button.pilule > .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
	min-height: inherit; padding: inherit; margin: inherit; border-radius: inherit; border: inherit; background: inherit; color: inherit;
	font: inherit; letter-spacing: inherit; white-space: inherit; box-shadow: inherit; backdrop-filter: inherit; -webkit-backdrop-filter: inherit;
	transform: inherit; transition: inherit; width: inherit; align-self: inherit; justify-self: inherit; height: auto; box-sizing: border-box; }
.wp-block-buttons.boutons, .wp-block-buttons.actions { gap: 10px; }
.etape .wp-block-buttons, .section--final .wp-block-buttons, .hero-fixe .wp-block-buttons { justify-content: center; }

/* Images : la classe va sur la figure, l'image la remplit */
figure.wp-block-image:is(.vue, .fond, .altitude__couche, .hero-fixe__image) img,
.wp-block-post-featured-image.fond img { width: 100%; height: 100%; object-fit: cover; object-position: inherit; }
.ecran__vue figure, .offre__image figure, .article-carte__image figure { width: 100%; height: 100%; }
.ecran__vue img { object-fit: cover; object-position: top; }

/* Le voile du voyage : pseudo-élément de la scène, piloté par --voile */
.voyage__scene::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--voile, 1);
	background: radial-gradient(ellipse 55% 50% at 50% 45%, rgba(0,0,0,.34), rgba(0,0,0,0) 72%); }
.voyage--court .voyage__scene::after { background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(0,0,0,.46), rgba(0,0,0,.14) 72%, rgba(0,0,0,.05)); }
.voyage__toile { z-index: 0; }

/* Le monde : le contenu de la page tient lieu de .monde */
.wp-block-post-content { position: relative; }
body:not(.page-accueil) .monde__fonds + .section { padding-top: clamp(96px, 16vh, 180px); }
body.page-ressources .monde__fonds + .section, .page-article .article-entete { padding-top: clamp(170px, 24vh, 260px); padding-bottom: 56px; }

/* Listes devenues groupes (éléments riches) */
.liste { list-style: none; }
.methode :is(li, .li) { list-style: none; }
.flux__etape .fort { display: block; font-weight: 500; font-size: 18px; }
.flux__etape p:not(.fort) { color: var(--texte-2); }
.puces li strong { display: block; }

/* Textes forts et mentions devenus paragraphes */
.ligne > p:not(.fort) { color: var(--texte-2); }
.ligne .fort { font-weight: 500; font-size: 20px; }
.combo > p { color: var(--texte-2); white-space: nowrap; }
.formule__prix sub, .chiffre sub { font-size: .32em; vertical-align: baseline; letter-spacing: 0; color: var(--texte-2); }
.ecran__nom { font-weight: 500; font-size: 20px; }
.ecran__legende .puce { margin: 0; }

/* Liens dans le texte */
:is(.chapo, .note, .lien-bas, .lecture, .petit) a, p.lien-texte a { color: rgba(255,255,255,.9); border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; text-decoration: none; }
:is(.chapo, .note, .lien-bas, .lecture, .petit) a:hover, p.lien-texte a:hover { border-color: var(--blanc); }
p.lien-texte { margin-top: 18px; }

/* Détails (FAQ) : bloc core/details */
.faq .wp-block-details { border-top: 1px solid var(--filet); }
.faq .wp-block-details:first-child { border-top: 0; }
.faq .wp-block-details summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; font-weight: 500; font-size: 18px; position: relative; }
.faq .wp-block-details summary::-webkit-details-marker { display: none; }
.faq .wp-block-details summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid; border-bottom: 1.5px solid; translate: 0 -70%; rotate: 45deg; transition: rotate .3s; }
.faq .wp-block-details[open] summary::after { rotate: -135deg; translate: 0 -20%; }
.faq .wp-block-details p { color: var(--texte-2); padding-bottom: 22px; }
.wp-block-separator { border: 0; border-top: 1px solid var(--filet); margin: 22px 0; opacity: 1; }

/* ---------- En-tête : core/navigation habillé comme la pilule de verre de la maquette ---------- */
.entete .marque a { display: inline-flex; align-items: center; gap: 10px; }
.entete .marque a::before { content: ""; width: 22px; height: 16px; border: 2px solid currentColor; border-radius: 6px; box-sizing: border-box; }
.entete .wp-block-navigation.menu { padding: 5px; border-radius: 999px; background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
	border: 1px solid var(--liseret); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); font-size: 15px; font-weight: 500; gap: 4px; }
.entete .wp-block-navigation.menu .wp-block-navigation__container { gap: 4px; }
.entete .wp-block-navigation.menu .wp-block-navigation-item__content { padding: 10px 18px; border-radius: 999px; transition: background .25s; }
.entete .wp-block-navigation.menu .wp-block-navigation-item__content:hover { background: rgba(255,255,255,.14); }
.entete .wp-block-navigation .wp-block-navigation-submenu__toggle { margin-left: -10px; padding-right: 14px; }
.entete .wp-block-navigation .wp-block-navigation__submenu-container { background: var(--verre-sombre) !important; backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
	border: 1px solid var(--liseret) !important; border-radius: var(--rayon-m); padding: 8px; min-width: 300px !important; margin-top: 10px; color: var(--blanc) !important; }
.entete .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 12px 16px; border-radius: 16px; }
.entete .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: rgba(255,255,255,.1); }
.entete .wp-block-navigation-item__description { display: block; font-size: 13px; color: var(--texte-2); font-weight: 400; }
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--liseret); background: var(--verre-sombre);
	backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); display: none; place-items: center; color: var(--blanc); }
@media (max-width: 960px) {
	.entete .wp-block-navigation.menu { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; order: 3; }
	.wp-block-navigation.menu .wp-block-navigation__responsive-container-open { display: grid; }
	.entete .entete__cta { margin-left: auto; }
}
@media (max-width: 420px) { .entete .entete__cta { display: none; } .entete .wp-block-navigation.menu { margin-left: auto; } }
.entete .wp-block-navigation.menu:has(.is-menu-open) { backdrop-filter: none; }

/* ---------- Pied de page (paragraphes de liens) ---------- */
.pied__colonnes p { margin: 0; }
.pied__colonnes .pied__titre { font-weight: 500; margin-bottom: 6px; }
.pied__colonnes p:not(.pied__titre) a { color: var(--texte-2); }
.pied__colonnes p:not(.pied__titre) a:hover { color: var(--blanc); }
.pied__bas p { margin: 0; }
.pied__marque .marque a { display: inline-flex; align-items: center; gap: 10px; }
.pied__marque .marque a::before { content: ""; width: 22px; height: 16px; border: 2px solid currentColor; border-radius: 6px; box-sizing: border-box; }
.barre-mobile p { margin: 0; }
.sans-barre .barre-mobile { display: none !important; }

/* ---------- Articles (ressources) ---------- */
.single-post .article-entete { text-align: center; }
.wp-block-post-terms.puce a { color: inherit; border: 0; }
.single-post::before { content: ""; position: fixed; z-index: 31; left: 0; top: 0; height: 2px; width: 100%; background: var(--blanc); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.lecture .wp-block-heading { scroll-margin-top: 120px; }
.articles.wp-block-query .wp-block-post-template { display: contents; }
.articles.wp-block-query { display: block; }
.articles .wp-block-post-template { list-style: none; width: min(1200px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px auto 0; padding: 0; text-align: left; }
@media (max-width: 1000px) { .articles .wp-block-post-template { grid-template-columns: 1fr; max-width: 560px; } }
.article-carte .wp-block-post-featured-image { border-radius: calc(var(--rayon) - 10px); overflow: hidden; aspect-ratio: 16 / 10; margin: 0 0 20px !important; }
.article-carte .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.article-carte .wp-block-post-title { font-weight: 500; font-size: 22px; line-height: 1.25; margin-top: 14px; }
.article-carte .wp-block-post-title a { color: inherit; text-decoration: none; }
.article-carte .wp-block-post-excerpt { color: var(--texte-2); margin-top: 8px; }
.article-carte .wp-block-post-excerpt__more-text a { color: rgba(255,255,255,.9); border-bottom: 1px solid rgba(255,255,255,.4); text-decoration: none; }

/* ---------- Calculateur (shortcode du thème) ---------- */
.calcul .pilule { text-decoration: none; }

/* =====================================================================
   Formulaires du plugin (diagnostic, guide, contact, devis, résultats) :
   le plugin fournit la mise en page, le thème fournit l'habillage (verre, Satoshi).
   ===================================================================== */
/* Variables du plugin : --sky-texte et --sky-titres sont des polices, --sky-filet une bordure complète, --gris une couleur de texte. */
.sc-formulaire, .sc-depart, .sc-resultats, .sc-reserver { --sky-filet: 1px solid rgba(255,255,255,.16); --sky-texte: "Satoshi", system-ui, sans-serif; --sky-titres: "Satoshi", system-ui, sans-serif; --graphite: rgba(255,255,255,.72); --graphite-doux: rgba(255,255,255,.6);
	--encre: var(--blanc); --gris: rgba(255,255,255,.62); --gris-trait: rgba(255,255,255,.16); --trait: rgba(255,255,255,.16); --gris-fonce: rgba(255,255,255,.72);
	--papier: rgba(255,255,255,.06); --papier-profond: rgba(0,0,0,.2); --voile: rgba(0,0,0,.3); --sky-s3: 24px; --sky-s5: 17px; --sky-s6: 14px; }
.sc-formulaire { color: var(--blanc); text-align: left; font-family: "Satoshi", system-ui, sans-serif; }
.sc-formulaire .sc-etape__titre, .sc-formulaire h2, .sc-formulaire h3 { font-weight: 500; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -.02em; color: var(--blanc); }
.sc-formulaire label { font-weight: 500; font-size: 15px; color: var(--blanc); }
.sc-formulaire :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=date], textarea, select) {
	width: 100%; font: 400 17px/1.4 "Satoshi", sans-serif; color: var(--blanc); background: rgba(255,255,255,.08); border: 1px solid var(--filet); border-radius: 18px;
	padding: 15px 18px; min-height: 52px; transition: border-color .25s, background .25s; }
.sc-formulaire select option { color: #141414; }
.sc-formulaire :is(input, textarea, select):focus { outline: none; border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.12); }
.sc-formulaire .sc-choix__item label { display: block; padding: 15px 24px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--filet); cursor: pointer; transition: background .25s, color .25s; }
.sc-formulaire .sc-choix__item label:hover { background: rgba(255,255,255,.18); }
.sc-formulaire .sc-choix__item input:checked + label { background: var(--blanc); color: #141414; }
.sc-formulaire .sc-choix__item input[type=radio], .sc-formulaire .sc-choix__item input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.sc-formulaire .sc-consentement .sc-choix__item input[type=checkbox] { position: static; opacity: 1; pointer-events: auto; width: 20px; height: 20px; accent-color: #fff; }
.sc-formulaire .sc-consentement .sc-choix__item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.sc-formulaire .sc-consentement .sc-choix__item label { padding: 0; background: none; border: 0; font-weight: 400; font-size: 14px; color: var(--texte-2); }
.sc-formulaire .sc-bouton, .sc-formulaire .wp-element-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 28px; border-radius: 999px;
	background: var(--blanc); color: #141414; font: 500 16px "Satoshi", sans-serif; border: 0; cursor: pointer; text-decoration: none; }
.sc-formulaire .sc-bouton[data-sc-inactif], .sc-formulaire .sc-bouton[aria-disabled="true"] { opacity: .45; }
.sc-formulaire .sc-bouton--secondaire, .sc-formulaire [data-sc-precedent] { background: rgba(255,255,255,.14); color: var(--blanc); border: 1px solid var(--liseret); }
.sc-formulaire .sc-barre { height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.sc-formulaire .sc-barre__jauge { background: var(--blanc); }
.sky-surtitre, .sc-progression__compteur { font-size: 14px; color: var(--texte-2); }
.sky-note, .sc-aide, .sc-diagnostic__reassurance { font-size: 14px; color: var(--texte-2); }
.sky-note a, .sc-aide a { color: rgba(255,255,255,.9); }
.sky-champ-erreur, .sc-erreurs { color: #ffd9d2; font-size: 14px; }
.sky-chapo { color: var(--texte-2); }
.sky-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.esquisse, .sky-carte { border-radius: var(--rayon-m); }
.sc-resultats :is(.sky-carte, .esquisse) { background: var(--verre-sombre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); border: 1px solid var(--liseret); padding: 24px; }
.depart-diagnostic, .guide-formulaire, .formulaire { width: min(640px, 100%); margin-top: 44px; text-align: left; }
.etape .guide-formulaire { margin: 28px auto 0; }
.entete .wp-block-navigation__container > .menu__mobile-seul { display: none; }
.entete .is-menu-open .menu__mobile-seul { display: block; }
/* Règles de maquette en « enfant direct » : le conteneur de boutons s'intercale sur WordPress */
.offre > .boutons-seuls > .pilule > .wp-block-button__link { margin-left: 18px; margin-right: 18px; }
.entete .wp-block-navigation.menu .wp-block-navigation__container { padding: 0; }
/* Le cœur pose .wp-block-buttons > .wp-block-button { margin: 0 } (deux classes) : la grande pilule reprend sa marge */
.wp-block-buttons > .wp-block-button.pilule--grande { margin-top: 40px; }
/* Pied : dans la maquette les liens ne sont pas des paragraphes, et la marque n'est pas un paragraphe */
.pied__colonnes p:not(.pied__titre) { font-weight: 400; }
.pied__marque p.marque { margin-top: 0; }
.carte p.methode__num { margin-top: 0; }
/* Réponses du plugin : une pilule par ligne, comme .choix de la maquette (le plugin les pose en grille de cases) */
.sc-formulaire .sc-choix { grid-template-columns: 1fr; gap: 10px; }
.sc-formulaire .sc-choix__item { padding: 0; border: 0; background: none; }
.sc-formulaire .sc-choix__item:has(input:focus-visible) { outline: 0; }
.sc-formulaire .sc-choix__item label, .sky-formulaire .sc-choix__item label { font: 500 16px/1.35 "Satoshi", sans-serif; color: var(--blanc); padding: 13px 24px; min-height: 48px;
	border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--filet); transition: background .25s, color .25s, transform .25s var(--doux); }
.sc-formulaire .sc-choix__item label:hover, .sc-formulaire .sc-choix__item input:focus-visible + label { background: rgba(255,255,255,.2); transform: translateX(4px); }
.sc-formulaire .sc-choix__item input:checked + label { background: var(--blanc); color: #141414; transform: none; }
.sc-formulaire form.sky-formulaire > .sc-etape__titre.sc-etape__titre { margin-block: 0 24px !important; } /* le plugin la pose en !important */
.sc-formulaire .sc-champ.sc-groupe { border: 0; padding: 0; min-width: 0; }
.sc-formulaire .sc-legende:empty { display: none; }
.sc-formulaire .sc-etape__actions { display: flex; margin-top: 24px; }
.sc-depart .sc-diagnostic__reassurance { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--filet); }
/* WordPress recopie les classes du bloc (menu, wp-block-navigation) sur la liste intérieure : elle reprenait le verre.
   Et le conteneur responsive hérite du fond de la navigation (règle du cœur en background-color: inherit). */
.entete ul.wp-block-navigation__container.menu { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.entete .wp-block-navigation__responsive-container:not(.is-menu-open) { background-color: transparent !important; }
/* Diagnostic complet : compteur et barre fine comme .demo__haut / .sc-barre de la maquette, « Suivant » à droite */
.sc-diagnostic .sc-diagnostic__progression { margin: 0 0 20px; padding: 0; }
.sc-diagnostic .sc-progression__compteur { margin: 0; font-size: 14px; color: var(--texte-2); }
.sc-formulaire .sc-barre { height: 4px; border: 0; border-radius: 4px; margin-top: 10px; }
.sc-formulaire .sc-barre__jauge { display: block; height: 100%; transition: width .6s var(--doux); }
.sc-diagnostic .sc-etape__actions { justify-content: flex-end; }
.sc-formulaire .sc-bouton[data-sc-inactif] { background: rgba(255,255,255,.55); }
/* Guide dans le héros : formulaire compact (adresse et prénom côte à côte, envoi à droite) pour tenir dans la fenêtre du wagon */
.etape .guide-formulaire { width: min(640px, 100%); padding: 24px 28px; }
.etape .sc-guide form.sky-formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: end; }
.etape .sc-guide form.sky-formulaire > * { margin: 0; }
.etape .sc-guide :is(.sc-consentement, .sc-etape__actions, .sc-erreurs) { grid-column: 1 / -1; }
.etape .sc-guide .sc-champ label { display: block; margin-bottom: 6px; }
.etape .sc-guide .sc-consentement .sc-aide { font-size: 13px; margin-top: 6px; }
.etape .sc-guide .sc-etape__actions { justify-content: flex-end; margin-top: 0; }
@media (max-width: 600px) { .etape .sc-guide form.sky-formulaire { grid-template-columns: 1fr; } }
/* Devis : l'assistant du plugin (4 étapes) dans la carte de 640 px de la maquette.
   La liste latérale des étapes s'efface (l'étape affiche déjà « Étape n sur 4 »), les réponses passent sur deux colonnes. */
.sc-devis .sc-devis__grille { display: block; }
.sc-devis .sc-progression { display: none; }
.sc-devis .sc-etape { border: 0; padding: 0; background: none; }
.sc-devis .sc-etape__titre .sc-etape__compteur { display: block; font-size: 14px; letter-spacing: 0; color: var(--texte-2); margin-bottom: 8px; }
.sc-formulaire .sc-etape > .sc-etape__titre.sc-etape__titre { margin: 0 0 12px; }
.sc-devis .sc-etape__intro { margin: 0; }
.sc-devis .sc-champ { margin: 26px 0 0; }
.sc-formulaire .sc-legende { font: 500 17px/1.35 "Satoshi", sans-serif; color: var(--blanc); padding: 0; margin: 0 0 12px; }
.sc-formulaire .sc-legende .sc-facultatif, .sc-formulaire .sc-facultatif { font-weight: 400; color: var(--texte-2); }
.sc-devis .sc-legende + .sc-aide { margin: -6px 0 12px; }
.sc-devis .sc-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-devis .sc-choix__item label { padding: 11px 20px; font-size: 15px; }
.sc-devis .sc-etape__actions { justify-content: flex-end; margin-top: 32px; }
/* « Précédent » (dans un bloc bouton) à gauche, « Suivant » à droite, à toutes les largeurs */
.sc-formulaire .sc-bouton-bloc { display: contents; }
.sc-formulaire .sc-etape__actions > .sc-bouton-bloc > .sc-bouton { order: -1; margin-right: auto; flex: 0 0 auto; width: auto; }
.sc-formulaire .sc-etape__actions > .sc-bouton { flex: 0 0 auto; }
.sc-formulaire .sc-recap { background: rgba(255,255,255,.06); border: 1px solid var(--filet); border-radius: var(--rayon-m); padding: 24px; margin-top: 28px; }
@media (max-width: 600px) { .sc-devis .sc-choix { grid-template-columns: 1fr; } }
/* Ressources : le premier article de la boucle prend la forme « à la une » de la maquette (.article-carte--une) */
.article-carte > .wp-block-post-featured-image { margin-left: 0; margin-right: 0; }
.articles .wp-block-post-template > li { display: flex; }
.articles .wp-block-post-template > li > .article-carte { flex: 1; }
@media (min-width: 1001px) {
	.articles .wp-block-post-template > li:first-child { grid-column: span 3; }
	.articles .wp-block-post-template > li:first-child > .article-carte { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 28px; grid-template-rows: 1fr auto auto auto 1fr; padding-bottom: 12px; }
	.articles .wp-block-post-template > li:first-child .wp-block-post-featured-image { grid-column: 1; grid-row: 1 / -1; margin: 0 !important; align-self: center; }
	.articles .wp-block-post-template > li:first-child .wp-block-post-terms { grid-column: 2; grid-row: 2; justify-self: start; margin-left: 16px; }
	.articles .wp-block-post-template > li:first-child .wp-block-post-title { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.2; grid-column: 2; grid-row: 3; }
	.articles .wp-block-post-template > li:first-child .wp-block-post-excerpt { grid-column: 2; grid-row: 4; }
}
.sc-formulaire .sc-etape__actions > .sc-bouton, .sc-formulaire .sc-etape__actions > .sc-bouton-bloc > .sc-bouton { width: auto; min-width: 0; }
@media (max-width: 600px) {
	.sc-formulaire .sc-etape__actions > .sc-bouton, .sc-formulaire .sc-etape__actions > .sc-bouton-bloc > .sc-bouton { flex: 1 1 0; margin-right: 0; padding-inline: 16px; }
}
/* La maquette masque .menu sous 960 px (elle a son propre bouton) : sur WordPress, .menu porte aussi le bouton du menu mobile */
@media (max-width: 960px) {
	.entete nav.wp-block-navigation.menu { display: flex; }
	.entete .wp-block-navigation__responsive-container.is-menu-open ul.menu { display: flex; flex-direction: column; align-items: flex-start; }
}
/* Menu mobile ouvert : le panneau de verre de la maquette (.menu-mobile) sous l'en-tête, liens à plat, la croix à la place du bouton */
.entete .wp-block-navigation__responsive-container.is-menu-open { background: rgba(10, 9, 8, .25) !important; color: var(--blanc) !important; padding: 0 !important; animation: none; transform: none; }
/* (l animation d ouverture du cœur fait de la couche une racine de fond : le flou du panneau ne voyait plus la page) */
.entete .is-menu-open .wp-block-navigation__responsive-close, .entete .is-menu-open .wp-block-navigation__responsive-dialog { position: static; max-width: none; margin: 0; }
.entete .is-menu-open .wp-block-navigation__responsive-container-close { position: fixed; top: 20px; right: var(--marge); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
	background: var(--verre-sombre); border: 1px solid var(--liseret); color: var(--blanc); z-index: 3; }
.entete .is-menu-open .wp-block-navigation__responsive-container-content { position: fixed; top: 84px; left: var(--marge); right: var(--marge); padding: 12px !important; gap: 2px;
	display: flex; flex-direction: column; align-items: stretch !important; border-radius: var(--rayon-m); background: var(--verre-sombre); border: 1px solid var(--liseret);
	backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); max-height: calc(100dvh - 104px); overflow: auto; }
.entete .is-menu-open ul.wp-block-navigation__container.menu { gap: 2px; align-items: stretch !important; width: 100%; }
.entete .is-menu-open .wp-block-navigation-item { width: 100%; align-items: stretch !important; }
.entete .is-menu-open .wp-block-navigation-item__content { font-size: 18px; font-weight: 500; padding: 14px 16px !important; border-radius: 16px; display: block; width: 100%; box-sizing: border-box; }
.entete .is-menu-open .has-child > .wp-block-navigation-item__content, .entete .is-menu-open .wp-block-navigation-submenu__toggle { display: none; }
.entete .is-menu-open .wp-block-navigation__submenu-container { position: static; display: flex; flex-direction: column; gap: 2px; background: none !important; border: 0 !important;
	padding: 0 !important; margin: 0; min-width: 0 !important; width: 100%; opacity: 1; visibility: visible; height: auto; backdrop-filter: none; -webkit-backdrop-filter: none; }
.entete .is-menu-open .wp-block-navigation-item__description { display: none; }
.entete .is-menu-open .menu__cta > .wp-block-navigation-item__content { margin-top: 10px; background: var(--blanc); color: var(--encre); text-align: center; border-radius: 999px; font-size: 16px; }
/* Guide au téléphone : le vrai formulaire (consentement compris) est plus haut que le champ unique de la maquette.
   Les trois puces de réassurance redisent le texte du consentement : on les retire pour que le héros tienne sous l'en-tête. */
@media (max-width: 600px) {
	.etape:has(.guide-formulaire) .rassurance { display: none; }
	.etape .guide-formulaire { padding: 20px; margin-top: 20px; }
	.etape .sc-guide form.sky-formulaire { gap: 10px; }
	.etape .sc-guide .sc-consentement label { font-size: 13px; }
}
.sc-resultats .sc-resultats__titre { text-align: center; margin-inline: auto; }
/* À chaque question, le plugin fait défiler le formulaire en haut de l'écran (scrollIntoView) et place le focus
   sur le titre : sans marge, le compteur et la barre de progression passaient sous l'en-tête fixe. */
.sc-formulaire, .sc-formulaire [tabindex="-1"], .demo-diagnostic, .depart-diagnostic { scroll-margin-top: 104px; }
/* Résultats (retour de Noah du 29 sept. : illisible au téléphone). Tout le bloc passe dans une carte de verre posée sur
   la photo ; seul le score global reste très grand ; les libellés sont en casse normale, comme les puces du site. */
.section--resultats .sc-resultats { width: min(920px, 100%); margin-inline: auto; padding: clamp(24px, 5vw, 52px); border-radius: var(--rayon);
	background: var(--verre-sombre); border: 1px solid var(--liseret); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); }
.sc-resultats .sky-surtitre { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--texte-2); }
.sc-resultats .sky-chiffre { font-weight: 500; font-size: clamp(30px, 7vw, 44px); line-height: 1; letter-spacing: -.03em; color: var(--blanc); }
.sc-resultats .sc-resultats__score--global .sky-chiffre { font-size: clamp(64px, 16vw, 104px); letter-spacing: -.05em; }
.sc-resultats .sc-resultats__scores .sky-chiffre { font-size: 28px; }
.sc-resultats .sc-resultats__gains--modeste .sky-chiffre { font-size: clamp(24px, 6vw, 32px); }
.sc-resultats .sc-resultats__titre { font-size: clamp(28px, 4vw, 40px); max-width: 24ch; }
.sc-resultats .sc-cal__ouvrir .wp-block-button__link, .sc-resultats .sc-resultats__cta .wp-block-button:first-child .wp-block-button__link {
	background: var(--blanc); color: #141414; border: 0; border-radius: 999px; padding: 14px 28px; font-weight: 500; }
.sc-resultats .sc-resultats__rdv-points li::before { background: var(--blanc); }
@media (max-width: 600px) {
	.sc-resultats .sc-resultats__scores, .sc-resultats .sc-resultats__actions { grid-template-columns: 1fr; }
	.sc-resultats .sc-resultats__gains { gap: 1rem; }
}
/* Case de consentement cochée : la règle « réponse choisie = pilule blanche » ne la concerne pas */
.sc-formulaire .sc-consentement .sc-choix__item input:checked + label,
.sc-formulaire .sc-consentement .sc-choix__item label:hover { background: none; color: var(--texte-2); transform: none; }
/* Tableau des heures : il tient dans la carte au téléphone (première colonne plus large, chiffres plus serrés) */
.sc-resultats table.sc-tableau, .sc-resultats .sc-tableau table { width: 100%; border-collapse: collapse; }
@media (max-width: 600px) {
	.sc-resultats table.sc-tableau, .sc-resultats .sc-tableau table { table-layout: fixed; font-size: 13px; }
	.sc-resultats .sc-tableau :is(th, td) { padding: 10px 4px; overflow-wrap: anywhere; hyphens: auto; }
	.sc-resultats .sc-tableau :is(th, td):first-child { width: 34%; padding-left: 0; }
	.sc-resultats .sc-tableau :is(th, td):last-child { padding-right: 0; }
	.sc-resultats .sc-tableau th { font-size: 12px; font-weight: 500; }
}