/* txori — pages publiques (24-10-2026 ; « vraiment beau », 25-10) : txori.app, /chiffrage,
 * /planification, /facturation, /demo. Feuille AUTONOME : head.php avec $lp_style = 'pro' ne charge
 * pas landing.css. Vocabulaire : titres en serif d'affiche (Instrument Serif, chargée par la page),
 * le mot qui porte le sens en italique (<em>), tout le reste en Inter ; fonds blancs et papier chaud,
 * filets fins, boutons en pastille ; pas de jaune en texte, pas de petit titre en capitales, pas
 * d'icône en case ; UN seul bloc sombre (Xori). Mouvement discret, coupé sous prefers-reduced-motion.
 */
:root{
  --navy:#193153; --navy-d:#0f1f38; --gold:#FFBD59; --ink:#16243a; --dim:#535f70; --mute:#8794a6;
  --line:#e6dfd2; --tint:#f6f2ea; --ok:#0f7a56; --ok-bg:#e7f5ef; --bleu:#1e4f8f; --bleu-bg:#e8eff9;
  --gut:24px; --r:16px;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.55;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
img,svg{display:block}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}
.c{max-width:1120px;margin:0 auto;padding:0 var(--gut)}

/* ── d'une page à l'autre (25-10-2026) : la barre reste en place, le contenu part et arrive en fondu.
 * Transitions de vue ENTRE documents (Chrome, Edge, Safari 18.2+) ; ailleurs, une navigation ordinaire.
 * Les cinq pages chargent cette feuille : toutes y consentent. Coupées sous prefers-reduced-motion. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.nav{view-transition-name:barre}
::view-transition-old(root){animation:.2s ease both partir}
::view-transition-new(root){animation:.38s cubic-bezier(.2,.7,.2,1) both arriver}
@keyframes partir{to{opacity:0;transform:translateY(-6px)}}
@keyframes arriver{from{opacity:0;transform:translateY(10px)}}

/* ── barre du haut ─────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav .c{display:flex;align-items:center;gap:40px;height:68px}
/* le logotype : « tx », le symbole en guise de « o », « ri » (_sobre-marque.php) ;
 * le disque prend la couleur du texte, le point reste jaune */
.lien-marque{display:inline-flex;color:var(--navy)}
.lien-marque:hover{text-decoration:none}
.marque{display:inline-flex;align-items:baseline;font-weight:600;font-size:25px;line-height:1;letter-spacing:-.045em;color:inherit}
.marque svg{width:.6em;height:.6em;margin:0 .035em 0 .025em;flex:none;transform:translateY(.03em)}
.pied .marque{font-size:21px}
.nav-l{display:flex;gap:28px;font-size:15px}
.nav-l a{color:var(--dim)}
.nav-l a[aria-current="page"]{color:var(--ink);font-weight:500}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:15px}
.nav-r .lien{color:var(--dim)}

/* ── boutons ───────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:999px;background:var(--navy);color:#fff;
  font-size:16px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background .15s}
.btn:hover{background:var(--navy-d);text-decoration:none}
.btn-s{height:40px;padding:0 18px;font-size:15px}
.lien-fort{font-size:16px;font-weight:500;color:var(--navy)}
.lien-fort i{font-style:normal}
.actes{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}

/* ── titres ────────────────────────────────────────────────────── */
.sur{font-size:15px;color:var(--dim);margin-bottom:20px;display:flex;align-items:center;gap:10px}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1}
h1 em,h2 em{font-style:italic}
h1{font-size:clamp(3rem,6.4vw,5.25rem);max-width:14em}
h1 span{display:block}
h2{font-size:clamp(2.5rem,5vw,4rem)}
h2 span{display:block}
h3{font-size:22px;line-height:1.2;letter-spacing:-.03em;font-weight:600}
.lead{font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.5;letter-spacing:-.018em;color:var(--dim)}
.note{font-size:14px;color:var(--dim)}
.note b{color:var(--ink);font-weight:500}

/* ── haut de page ──────────────────────────────────────────────── */
.hero{padding:112px 0 56px}
.hero .lead{margin-top:28px;max-width:36em}
.hero .actes{margin-top:40px}
.hero .note{margin-top:18px}

/* ── l'accueil : grande photo plein écran, texte en blanc sur un voile bleu marine ──
 * La photo est retournée (le menuisier passe à droite, le texte garde la gauche) et bouge
 * très lentement (zoom et glissement, 26 s aller, 26 s retour) ; immobile si le visiteur
 * a demandé moins d'animations. */
.hero-plein{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:560px;height:calc(100svh - 68px);max-height:900px;padding:64px 0 112px;color:#fff;background:var(--navy-d)}
.hero-fond{position:absolute;inset:0}
.diapo{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.diapo.on{opacity:1}
.diapo.miroir{transform:scaleX(-1)}
.diapo img{width:100%;height:100%;object-fit:cover;transform-origin:60% 55%;animation:lent 26s ease-in-out infinite alternate}

/* la frise du cycle, en bas de la photo : l'étape montrée en blanc, son trait jaune se remplit
 * pendant la durée de la photo (--duree-diapo, posée par landing-sobre.js) */
.hero-plein .c.cycle-c{position:absolute;left:0;right:0;bottom:36px;z-index:2;width:auto}
.cycle{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;max-width:680px;margin:0;padding:0;list-style:none}
.cycle li{position:relative;padding-top:14px;font-size:14px;color:rgba(255,255,255,.62);transition:color .4s;white-space:nowrap}
.cycle li::before,.cycle li::after{content:"";position:absolute;top:0;left:0;height:3px;border-radius:2px}
.cycle li::before{right:0;background:rgba(255,255,255,.26)}
.cycle li::after{width:0;background:var(--gold)}
.cycle li.on{color:#fff}
.cycle li.fait::after{width:100%}
.js .cycle li.on::after{animation:remplir var(--duree-diapo,6.5s) linear forwards}
@keyframes remplir{from{width:0}to{width:100%}}
.hero-plein::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(10,22,40,.80) 0%,rgba(10,22,40,.52) 42%,rgba(10,22,40,.08) 72%,rgba(10,22,40,0) 100%),
  linear-gradient(0deg,rgba(10,22,40,.55) 0%,rgba(10,22,40,0) 38%)}
.hero-plein h1{font-size:clamp(3.8rem,9.4vw,7.6rem);max-width:13em} /* « Une cote. Une fois. » (25-10) : court, donc grand */
.hero-plein .lead{font-size:1.25rem;max-width:30em}
.hero-plein .actes{gap:16px 32px}
.hero-plein .c{position:relative;z-index:2;width:100%}
.hero-plein .sur{color:rgba(255,255,255,.82)}
.hero-plein h1{color:#fff}
.hero-plein .lead{color:rgba(255,255,255,.88)}
.hero-plein .note{color:rgba(255,255,255,.8)}
.hero-plein .note b{color:#fff}
.hero-plein .btn{background:#fff;color:var(--navy)}
.hero-plein .btn:hover{background:#eef3fa}
.hero-plein .lien-fort{color:#fff}
.hero-plein :focus-visible{outline-color:#fff}
.hero-plein + .sec-0{padding-top:96px}
@keyframes lent{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-2.5%,-1.5%,0)}}
@media (prefers-reduced-motion:reduce){.diapo img{animation:none}.js .cycle li.on::after{animation:none;width:100%}}

/* ── les photos (images d'ambiance, _sobre-photo.php) ──────────── */
.photo{margin:0;border-radius:20px;overflow:hidden;background:var(--tint);aspect-ratio:3/2}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-large{margin-top:56px;aspect-ratio:16/7}
.trois .photo{position:relative;width:100%;aspect-ratio:5/4;border-radius:16px;margin-bottom:40px;overflow:visible;background:none}
.trois .photo img{border-radius:16px;filter:saturate(.88) contrast(1.03) sepia(.06)}
/* un fragment d'interface posé sur chaque photo : le même dossier, « Les Tilleuls », d'un module à l'autre */
.puce{position:absolute;left:16px;right:16px;bottom:-22px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 36px -18px rgba(22,36,58,.45);font-size:13px;line-height:1.45}
.puce .l{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.puce small{font-size:12px;color:var(--dim)}
.puce b{font-size:16px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.puce .barre{height:6px;margin-top:8px;border-radius:3px;background:#eef1f5;overflow:hidden}
.puce .barre i{display:block;width:82%;height:100%;border-radius:3px;background:var(--navy)} /* la fabrication des Tilleuls, à 82 % */
.puce .pill{padding:2px 9px}
.bande .photo{aspect-ratio:4/3}

/* ── la vitrine : un repère dessiné et ses trois chiffres ──────── */
#essai{scroll-margin-top:68px}
.essai-t{margin-bottom:48px}
.vitrine{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -48px rgba(22,36,58,.35)}
/* le dessin posé sur un papier de plan : carreaux de 40 px, millimètres de 8 px */
.vitrine figure{display:flex;align-items:center;justify-content:center;padding:48px 32px;background-color:#f4f6f9;
  background-image:linear-gradient(rgba(25,49,83,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(25,49,83,.07) 1px,transparent 1px),
    linear-gradient(rgba(25,49,83,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(25,49,83,.035) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px;background-position:-1px -1px}
.vitrine figure svg{width:100%;max-width:460px;height:auto}
.vitrine-d{padding:44px 48px 40px;display:flex;flex-direction:column;justify-content:center}
.vitrine-d .note{margin:0}
.chiffres{margin-top:24px;border-top:1px solid var(--line)}
.chiffre{display:flex;align-items:center;gap:14px;padding:22px 0;border-bottom:1px solid var(--line)}
.chiffre div{flex:1;min-width:0}
.chiffre small{display:block;font-size:13px;color:var(--dim)}
.chiffre span{display:block;font-size:16px;font-weight:500}
.chiffre b{font-size:28px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:6px;padding:0 4px;margin-right:-4px}
/* un chiffre qui vient de changer s'allume un instant (landing-sobre.js) */
.chiffre b.maj{animation:allume .7s ease-out}
/* la ligne de l'atelier : ses documents « À jour », la pastille bat quand la largeur change */
.chiffre .pill{display:inline-block;flex:none;padding:5px 12px;font-size:13px;font-weight:500}
.chiffre .pill.maj{animation:pouls .7s ease-out}
@keyframes pouls{from{box-shadow:0 0 0 0 rgba(15,122,86,.35)}to{box-shadow:0 0 0 9px rgba(15,122,86,0)}}
@keyframes allume{from{background:rgba(255,189,89,.45)}to{background:rgba(255,189,89,0)}}
.chiffre b em{font-style:normal;font-size:13px;font-weight:400;color:var(--dim);margin-left:4px}
.vitrine-d .pied-v{margin-top:24px;font-size:15px;color:var(--dim)}
.chiffre b span{display:inline;font-size:inherit;font-weight:inherit}
/* la largeur du coulissant : un champ et un curseur, rien d'autre */
.champ-cote{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:20px}
.champ-cote label{font-size:15px;font-weight:500}
.champ-cote input[type=number]{width:104px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);background:#fff}
.champ-cote input[type=number]:focus{outline:2px solid var(--navy);outline-offset:1px}
.champ-cote span{font-size:15px;color:var(--dim)}
/* le curseur : un rail fin, un bouton blanc cerclé de bleu */
.champ-cote .curseur{flex:1 1 100%;margin:6px 0 0;height:28px;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;
  --pc:27.3%}
.curseur::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--navy) var(--pc),var(--line) var(--pc))}
.curseur::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
.curseur::-moz-range-progress{height:4px;border-radius:2px;background:var(--navy)}
.curseur::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:#fff;border:2px solid var(--navy);box-shadow:0 4px 10px -2px rgba(22,36,58,.35)}
.curseur::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--navy);box-shadow:0 4px 10px -2px rgba(22,36,58,.35)}
.curseur:focus-visible{outline:none}
.curseur:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(25,49,83,.2)}

/* ── sections ──────────────────────────────────────────────────── */
.sec{padding:128px 0}
.sec-0{padding-top:24px}
.sec-0 + .sec{padding-top:32px}
.tete{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px 64px;margin-bottom:56px}
.tete h2{flex:1 1 420px}
.tete .lead{flex:1 1 360px;font-size:19px}

/* trois colonnes, chacune sa photo ; jamais des cartes */
.trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.trois > *{display:flex;flex-direction:column;align-items:flex-start}
.trois .app{font-size:14px;color:var(--dim);margin-top:4px}
.trois h3{font-size:24px}
.trois p{margin-top:12px;font-size:16px;color:var(--dim)}
.trois .lien-fort{margin-top:auto;padding-top:20px;font-size:15px}
.lien-fort i{display:inline-block;transition:transform .2s}
.lien-fort:hover i{transform:translateX(3px)}
.aussi{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:15px;color:var(--dim)}

/* bande teintée pleine largeur (le catalogue Cortizo) */
.bande{background:var(--tint)}
.bande .c{padding-top:96px;padding-bottom:96px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 64px;align-items:center}
.bande-t .bande-d{margin-top:24px}
.bande-d p{font-size:19px;color:var(--dim)}
.bande-d p + p{margin-top:16px}
.bande-d .lien-fort{display:inline-block;margin-top:24px}

/* clôture */
.fin{padding:128px 0 136px;text-align:center;background:var(--tint)}
.fin h2{font-size:clamp(3rem,7vw,5.4rem)}
/* la signature : une vraie ligne de cote, sa valeur dans une pastille jaune */
.cote-fin{width:min(520px,86%);height:auto;margin:0 auto 40px}
.fin .lead{margin-top:20px}
.fin .actes{justify-content:center;margin-top:36px}
.fin .note{margin-top:16px}

/* ── pages de module : rangées texte + carte ───────────────────── */
.rangs{display:flex;flex-direction:column;gap:112px}
.rang{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 72px;align-items:center}
.rang h2{font-size:clamp(2.2rem,3.6vw,3rem)}
.rang h2 + p{margin-top:16px;font-size:18px;color:var(--dim)}
.faits{margin-top:24px;border-top:1px solid var(--line)}
.faits li{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}

/* le plateau : fond teinté, une carte posée dessus */
.plateau{background:var(--tint);border:1px solid var(--line);border-radius:20px;padding:40px}
.carte{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:0 1px 2px rgba(22,36,58,.04)}
.carte-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.carte-h b{font-size:15px;font-weight:600}
.carte-h em{font-style:normal;font-size:13px;color:var(--dim);white-space:nowrap}
.carte-pied{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--navy);font-size:15px;font-weight:500}
.carte-pied b{font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.carte-pied em{font-style:normal;font-weight:400;font-size:13px;color:var(--dim)}

/* lignes de prix : libellé, barre, montant */
.lp{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.lp .barre{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.lp .barre i{display:block;height:100%;background:var(--navy);border-radius:3px}
.lp .barre.m i{background:var(--gold)}
.lp b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}

/* lignes de devis */
.ld{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:6px 14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.ld img{width:28px;height:28px}
.ld .n{font-weight:500}
.ld .n small{display:block;font-weight:400;font-size:12.5px;color:var(--dim)}
.ld .r{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.ld b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* lignes simples : libellé, montant */
.dl{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.dl b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.carte-ok{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--ok)}

/* débits */
.debit-t{margin-top:14px;font-size:13px;color:var(--dim)}
.debit{display:grid;grid-template-columns:minmax(0,1fr) 9em;align-items:center;gap:16px;padding:9px 0;font-size:13.5px;color:var(--dim)}
.debit i{display:block;height:10px;border:1.5px solid var(--navy);border-radius:2px}

/* situations */
.avance{display:flex;height:8px;margin-top:16px;border-radius:4px;background:var(--line);overflow:hidden}
.avance i{display:block;height:100%}
.avance .a1{background:var(--navy)}
.avance .a2{background:var(--mute)}
.avance-l{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:13px;color:var(--dim)}
.sit{display:grid;grid-template-columns:minmax(0,1fr) auto 6.5em;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.sit:last-child{border-bottom:0}
.sit small{display:block;font-size:12.5px;color:var(--dim)}
.sit b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.sit.dim{color:var(--dim)}
.pill{justify-self:end;display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--line);color:var(--dim);white-space:nowrap}
.pill.vert{background:var(--ok-bg);color:var(--ok)}
.pill.bleu{background:var(--bleu-bg);color:var(--bleu)}

/* la suite du dossier (liens vers les autres modules) */
.suite-t{font-size:15px;color:var(--dim);margin-bottom:20px}
.suite{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.suite a{display:flex;align-items:center;gap:16px;padding:28px 32px 28px 0;color:var(--ink)}
.suite a + a{padding:28px 0 28px 32px;border-left:1px solid var(--line)}
.suite a:hover{text-decoration:none}
.suite a:hover .s-n{text-decoration:underline;text-underline-offset:3px}
.suite span{flex:1}
.s-n{display:block;font-size:18px;font-weight:500}
.s-d{display:block;font-size:15px;color:var(--dim)}
.suite i{font-style:normal;font-size:18px;color:var(--navy)}

/* Xori : une demande, une proposition à valider (maquette, rien de cliquable) — la carte flotte
 * sur le blanc (une ombre douce), pour ne pas aligner un troisième plateau gris */
.xori-scene{display:flex;justify-content:center;padding:16px 0}
.xori-scene .carte{width:100%;max-width:520px;box-shadow:0 30px 60px -30px rgba(22,36,58,.35),0 1px 3px rgba(22,36,58,.06)}
.carte.xori .bulle{margin:0 0 16px auto;width:fit-content;max-width:85%;background:var(--tint);border-radius:14px 14px 4px 14px;padding:10px 14px;font-size:14px}
.proposition{border:1px solid var(--line);border-radius:12px;padding:16px}
.gestes{display:flex;gap:10px;margin-top:16px}
.gestes[hidden]{display:none}
.geste{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:500;color:var(--navy);cursor:pointer;transition:background-color .15s,border-color .15s}
.geste:hover{border-color:var(--navy)}
.geste.plein{background:var(--navy);border-color:var(--navy);color:#fff}
.geste.plein:hover{background:var(--navy-d)}
/* la démonstration jouable : réglage de l'avancement, confirmations, réponse de Xori */
.avance-r{display:inline-flex;align-items:center;gap:10px}
.pas button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:16px;line-height:1;cursor:pointer}
.pas button:hover:not(:disabled){border-color:var(--navy)}
.pas button:disabled{opacity:.35;cursor:default}
[data-etat="modification"] [data-x="avancement"],[data-etat="modification"] [data-x="montant"]{color:var(--navy)}
.carte-h .pill{font-style:normal}
.faits-ok{margin-top:16px;display:grid;gap:10px}
.faits-ok li{position:relative;padding-left:28px;font-size:14px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.faits-ok li.vu{opacity:1;transform:none}
.faits-ok li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--ok-bg)}
.faits-ok li::after{content:"";position:absolute;left:6px;top:5px;width:6px;height:9px;border:solid var(--ok);border-width:0 2px 2px 0;transform:rotate(45deg)}
.carte.xori .bulle-x{margin:16px auto 0 0;border-radius:14px 14px 14px 4px;background:#fff;border:1px solid var(--line)}
.xori-r .gestes{margin-top:10px}
.rejouer{display:block;margin:14px 0 0 auto;font:inherit;font-size:13px;color:var(--dim);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.faits-ok[hidden],.rejouer[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.faits-ok li{transition:none}}

/* Xori : le SEUL bloc sombre de la page ; la carte s'y détache, un halo doré derrière elle */
.sombre{padding:136px 0;background:var(--navy-d);color:#fff}
.sombre .sur{color:rgba(255,255,255,.72)}
.sombre h2{color:#fff}
.sombre .rang h2 + p{color:rgba(255,255,255,.78)}
.sombre .faits{border-top-color:rgba(255,255,255,.14)}
.sombre .faits li{border-bottom-color:rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
.sombre :focus-visible{outline-color:#fff}
.sombre .xori-scene{position:relative}
.sombre .xori-scene::before{content:"";position:absolute;inset:-12% -6%;background:radial-gradient(closest-side,rgba(255,189,89,.2),rgba(255,189,89,0));pointer-events:none}
.sombre .xori-scene .carte{position:relative;color:var(--ink);box-shadow:0 50px 90px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.sombre .xori-scene .carte :focus-visible{outline-color:var(--navy)}
@media (min-width:901px){.sombre .rang{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}}

/* l'apparition au défilement : posée par landing-sobre.js (.revele), jamais sans script ni sous reduced-motion */
.revele{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--retard,0s)}
.revele.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.revele{opacity:1;transform:none;transition:none}.chiffre b.maj,.chiffre .pill.maj{animation:none}}

/* « Démarrer » : un titre centré, trois étapes sur un fil (des points, jamais de numéros) ;
 * le point d'arrivée est jaune. Sur téléphone, le fil devient vertical. */
.tete-centre{max-width:760px;margin:0 auto 72px;text-align:center}
.tete-centre h2 span{display:inline}
.tete-centre .lead{margin-top:20px}
.parcours{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:0;padding:0;list-style:none}
.parcours::before{content:"";position:absolute;top:7px;left:16.67%;right:16.67%;height:1px;background:var(--line)}
.parcours li{position:relative;text-align:center}
.parcours li::before{content:"";position:relative;z-index:1;display:block;width:15px;height:15px;margin:0 auto 28px;border-radius:50%;background:#fff;border:2px solid var(--navy);box-sizing:border-box}
.parcours li.arrivee::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 6px rgba(255,189,89,.25)}
.parcours .etape-k{margin:0 0 8px;font-size:13px;color:var(--dim)}
.parcours h3{font-size:21px}
.parcours h3 + p{max-width:30ch;margin:10px auto 0;font-size:16px;color:var(--dim)}

/* « La facture électronique » : un panneau à part — le texte et ses coches, les deux échéances en cartes */
.reforme{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 64px;align-items:center;padding:56px;background:var(--tint);border:1px solid var(--line);border-radius:24px}
.reforme h2{font-size:clamp(2.2rem,3.6vw,3.2rem)}
.reforme-p{margin-top:16px;font-size:18px;color:var(--dim)}
.coches{margin-top:24px;display:grid;gap:12px}
.coches li{position:relative;padding-left:30px;font-size:16px}
.coches li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--ok-bg)}
.coches li::after{content:"";position:absolute;left:6px;top:7px;width:6px;height:9px;border:solid var(--ok);border-width:0 2px 2px 0;transform:rotate(45deg)}
.echeances{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.echeances li{display:grid;gap:6px;justify-items:start;padding:24px 26px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(22,36,58,.04)}
.echeances b{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.echeances .pill{justify-self:start}
.echeances b sup{font-size:.55em;vertical-align:.7em;margin-left:1px}
.echeance-p{font-size:15px;color:var(--dim)}

/* une grille de faits courts, séparée par un filet (--n colonnes) */
ul.grille{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:24px 32px;margin:0;padding:28px 0 0;border-top:1px solid var(--line);list-style:none}
.grille b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.grille span{display:block;margin-top:6px;font-size:15px;color:var(--dim)}

/* ── /demo : le texte et le parcours à gauche, le formulaire à droite ── */
.demo{padding:88px 0 120px}
/* trois zones : le texte, le formulaire, le parcours — sur téléphone le formulaire passe AVANT le parcours */
.demo-c{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"t f" "p f";grid-template-rows:auto 1fr;gap:40px 72px;align-items:start}
.demo-t{grid-area:t}
.demo-f{grid-area:f}
.demo-p{grid-area:p}
.demo h1{font-size:clamp(2.8rem,5.6vw,4.4rem)}
.demo .lead{margin-top:20px}
/* le parcours de /demo est vertical, même sur grand écran */
.parcours-v{grid-template-columns:minmax(0,1fr);gap:28px;margin:0;padding-left:34px}
.parcours-v::before{display:none}
.parcours-v li{text-align:left}
.parcours-v li::before{position:absolute;left:-34px;top:2px;margin:0}
.parcours-v li:not(:last-child)::after{content:"";position:absolute;left:-27px;top:20px;bottom:-26px;width:1px;background:var(--line)}
.parcours-v h3 + p{margin-left:0;max-width:none}
.demo-f{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:0 30px 60px -36px rgba(22,36,58,.3)}
.formulaire{display:grid;gap:16px}
.formulaire .deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.formulaire label{display:block;margin-bottom:6px;font-size:14px;font-weight:500}
.formulaire label small{font-weight:400;color:var(--dim)}
.formulaire input,.formulaire textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.formulaire input:focus,.formulaire textarea:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:transparent}
.formulaire textarea{resize:vertical;min-height:110px}
.formulaire .btn{width:100%;margin-top:4px}
.formulaire .note{text-align:center}
.pot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.erreur{padding:12px 14px;border-radius:10px;background:#fdecec;color:#a12a2a;font-size:15px}
.merci h2{font-size:clamp(2rem,3.6vw,2.6rem)}
.merci p{margin-top:12px;color:var(--dim)}
.merci .lien-fort{display:inline-block;margin-top:24px}

/* ── pied ──────────────────────────────────────────────────────── */
.pied{background:var(--tint)}
.fin + .pied .c{border-top:1px solid var(--line)}
.pied .c{padding-top:28px;padding-bottom:40px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;font-size:14px;color:var(--dim)}
.pied-l{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
.pied a{color:var(--dim)}
.langue select{font:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 8px}

/* ── le film ───────────────────────────────────────────────────── */
.film{padding:0;border:0;background:transparent;max-width:min(1100px,94vw);width:100%}
.film::backdrop{background:rgba(15,31,56,.82)}
.film video{width:100%;border-radius:12px;background:#000}
.film button{position:absolute;top:-44px;right:0;color:#fff;font-size:30px;line-height:1;padding:4px 10px}

/* ── téléphone ─────────────────────────────────────────────────── */
@media (max-width:900px){
  .vitrine{grid-template-columns:minmax(0,1fr)}
  .vitrine-d{padding:32px 24px}
  .rang{grid-template-columns:minmax(0,1fr)}
  .plateau{padding:20px}
}
@media (max-width:760px){
  .nav-l{display:none}
  .nav-r .lien{display:none}
  .hero{padding:72px 0 40px}
  .hero-plein{height:auto;max-height:none;min-height:calc(100svh - 68px);padding:56px 0 104px}
  .hero-plein .c.cycle-c{bottom:28px}
  .cycle{gap:8px}
  .cycle li{font-size:12px;letter-spacing:0;color:transparent}
  .cycle li.on{color:#fff} /* une seule étape nommée : cinq noms ne tiennent pas sur 390 px */
  .hero-plein::before{background:linear-gradient(180deg,rgba(15,31,56,.7) 0%,rgba(15,31,56,.62) 60%,rgba(15,31,56,.78) 100%)}
  .hero-plein + .sec-0{padding-top:64px}
  .sec{padding:88px 0}
  .trois{grid-template-columns:minmax(0,1fr);gap:48px}
  .suite{grid-template-columns:minmax(0,1fr)}
  ul.grille{grid-template-columns:minmax(0,1fr);gap:20px}
  .tete-centre{margin-bottom:48px}
  .parcours{grid-template-columns:minmax(0,1fr);gap:32px;padding-left:34px}
  .tete-centre h2 span{display:block}
  .parcours::before{display:none}
  .parcours li:not(:last-child)::after{content:"";position:absolute;left:-27px;top:20px;bottom:-30px;width:1px;background:var(--line)}
  .parcours li{text-align:left}
  .parcours li::before{position:absolute;left:-34px;top:2px;margin:0}
  .parcours h3 + p{margin-left:0;max-width:none}
  .reforme{grid-template-columns:minmax(0,1fr);padding:32px 22px;border-radius:18px}
  .demo{padding:48px 0 88px}
  .demo-c{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "f" "p";grid-template-rows:auto}
  .demo-f{padding:22px}
  .formulaire .deux{grid-template-columns:minmax(0,1fr)}
  .echeances b{font-size:22px}
  .suite a,.suite a + a{padding:24px 0;border-left:0}
  .suite a + a{border-top:1px solid var(--line)}
  .bande .c{padding-top:72px;padding-bottom:72px;grid-template-columns:minmax(0,1fr)}
  .photo-large{margin-top:40px;aspect-ratio:4/3;border-radius:14px}
  .vitrine figure{padding:28px 24px}
  .vitrine figure svg{max-width:320px}
  .fin{padding:88px 0 96px}
  .sombre{padding:88px 0}
  .trois .photo{margin-bottom:36px}
  .bande + .fin{padding-top:88px}
  .pied-l{margin-left:0}
  .lp{grid-template-columns:minmax(0,1fr) auto}
  .lp .barre{display:none}
  .ld{grid-template-columns:28px minmax(0,1fr) auto}
  .ld .r{display:none}
  /* sur téléphone, la carte prend toute la largeur : pas de plateau autour */
  .plateau{padding:0;background:none;border:0;border-radius:0}
  .carte{padding:18px}
  .chiffre span{font-size:15px}
  .chiffre b{font-size:18px}
  .carte-h{flex-wrap:wrap}
  .sit{grid-template-columns:minmax(0,1fr) auto auto;gap:10px}
  .avance-l{flex-wrap:wrap}
}