/* Polices servies par le site lui-meme : deux connexions tierces en moins au
   premier rendu, et aucune adresse IP transmise a Google. Sous-ensembles latin
   et latin-ext seulement — le reste ne sert pas a un site francais. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/polices/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/polices/inter-400-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/polices/inter-400-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#0a0b0d; --surface:#121419; --surface-2:#171a20;
  --line:#23262e; --line-soft:#1b1e25;
  /* --faint tenait 3.28:1 sur --bg et 2.90:1 sur --surface-2, sous le 4.5 requis,
     alors qu'il porte le telephone, le mail et les mentions de prix. Remonte au
     minimum qui passe partout : 4.55:1 sur --surface-2, le pire des trois fonds. */
  --text:#edeef1; --heading:#fff; --muted:#8b909c; --faint:#7e8390;
  --accent:#f0763a; --accent-hover:#ff8f57; --accent-soft:rgba(240,118,58,.12);
  --good:#35c08a; --warn:#e0a23c; --bad:#ef5f6b;
  --r:14px; --max:1080px;
  /* courbes fortes : les easings natifs sont trop mous */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{color:var(--heading); letter-spacing:-.02em; line-height:1.15; margin:0}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace}

/* nav */
nav{position:sticky; top:0; z-index:50; background:rgba(10,11,13,.78);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft)}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; letter-spacing:-.02em; color:var(--heading)}
.logo .mark{width:30px; height:30px; border-radius:7px; display:block}
.logo .wm{font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:1.15rem; letter-spacing:0}
.logo .wm span{color:var(--accent)}
.nav-links{display:flex; align-items:center; gap:26px; font-size:.92rem}
.nav-links a{color:var(--muted); text-decoration:none; padding:10px 0; position:relative;
  transition:color .15s var(--ease-out)}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:4px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .2s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.nav-links a:hover::after{transform:scaleX(1)}}
.nav-links a.cta{color:var(--accent); font-weight:500}
/* Sur mobile la nav défile, elle ne disparaît pas : masquer les liens coupait
   l'accès aux 3 pages d'offre depuis un téléphone, où passe l'essentiel du trafic. */
/* Menu mobile : case a cocher masquee + label. Avant, .nav-links defilait
   horizontalement et 3 entrees sur 5 (dont le bouton d appel) restaient hors ecran
   sans aucun indice visuel. Pas de <details> ici : le contenu d un details ferme est
   masque par le navigateur, ce qui faisait disparaitre la nav sur grand ecran. */
.menu-mob-case{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.menu-mob-btn{display:none}

@media(max-width:720px){
  nav .wrap{gap:14px}
  .logo .wm{display:inline}
  .menu-mob-btn{display:flex; align-items:center; gap:9px; cursor:pointer;
      color:var(--text); font-size:.9rem; font-weight:600; padding:9px 14px;
      border:1px solid var(--line); border-radius:10px; background:var(--surface);
      min-height:42px; user-select:none}
  .menu-mob-btn span{width:16px; height:2px; background:currentColor; border-radius:2px;
      box-shadow:0 -5px 0 currentColor, 0 5px 0 currentColor}
  .menu-mob-case:focus-visible+.menu-mob-btn{outline:2px solid var(--accent); outline-offset:2px}
  .menu-mob-case:checked+.menu-mob-btn{border-color:var(--accent); color:var(--accent)}

  .nav-links{position:absolute; right:16px; top:60px; z-index:60;
      display:none; flex-direction:column; align-items:stretch; gap:0; overflow:visible;
      background:var(--surface); border:1px solid var(--line); border-radius:12px;
      min-width:min(78vw,270px); padding:6px; box-shadow:0 18px 40px rgba(0,0,0,.5);
      mask-image:none; -webkit-mask-image:none; font-size:.95rem}
  .menu-mob-case:checked~.nav-links{display:flex}
  .nav-links a{padding:13px 14px; border-radius:8px; color:var(--text); white-space:nowrap;
      min-height:44px; display:flex; align-items:center}
  .nav-links a+a{border-top:1px solid var(--line-soft)}
  .nav-links a::after{display:none}
  .nav-links a.cta{color:var(--accent); font-weight:600}
}

/* boutons */
.btn{display:inline-block; padding:12px 22px; border-radius:10px; text-decoration:none;
  font-weight:600; font-size:.95rem; background:var(--accent); color:#120803; border:1px solid var(--accent);
  transition:background .15s var(--ease-out),border-color .15s var(--ease-out),transform .12s var(--ease-out)}
.btn:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn:active{transform:scale(.97)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--line)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--faint)}

/* hero */
.hero{padding:84px 0 72px}
.hero .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.1rem); font-weight:800; margin-bottom:18px}
.hero p.lead{color:var(--muted); font-size:1.06rem; max-width:46ch; margin:0 0 28px}
.hero .actions{display:flex; gap:12px; flex-wrap:wrap}
.hero .under{margin-top:20px; font-size:.86rem; color:var(--faint)}
/* le lien de reassurance reste insecable s'il tient sur une ligne */
.hero .under a{display:inline-block}
.hl{color:var(--text)}
@media(max-width:860px){.hero .grid{grid-template-columns:1fr; gap:40px} .hero{padding:56px 0 48px}}

/* mockup navigateur */
.shot{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.shot .bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line-soft); background:var(--surface-2)}
.shot .dot{width:9px; height:9px; border-radius:50%; background:#2c303a}
.shot .url{margin-left:8px; font-size:.72rem; color:var(--faint); font-family:'IBM Plex Mono',monospace}
.shot .body{padding:20px}
.shot .band{height:96px; border-radius:9px; background:linear-gradient(120deg,#241610,#3a2015); border:1px solid var(--line-soft);
  display:flex; flex-direction:column; justify-content:center; padding:0 18px; gap:7px}
.shot .band b{color:#fff; font-size:.95rem; letter-spacing:-.02em}
.shot .band span{color:var(--muted); font-size:.75rem}
.shot .row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px}
.shot .tile{height:52px; border-radius:9px; border:1px solid var(--line-soft); background:var(--surface-2)}
.shot .line{height:7px; border-radius:4px; background:var(--line); margin-top:14px}
.shot .line.s{width:62%}
.shot .pill{display:inline-block; margin-top:16px; padding:7px 14px; border-radius:8px;
  background:var(--accent); color:#120803; font-size:.76rem; font-weight:700}

/* sections */
section{padding:56px 0; border-top:1px solid var(--line-soft)}
.kicker{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:10px}
.section-head{max-width:60ch; margin-bottom:34px}
.section-head h2{font-size:clamp(1.5rem,2.6vw,2rem); font-weight:700}
.section-head p{color:var(--muted); margin:10px 0 0}

/* chiffres */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden}
.stat{background:var(--surface); padding:22px 20px}
.stat b{display:block; font-size:1.5rem; color:var(--heading); font-weight:700; letter-spacing:-.02em}
.stat span{font-size:.84rem; color:var(--muted)}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}
/* Comparaison plateforme / ici : un tableau, pas quatre chiffres alignes qu'on
   lisait comme un seul tarif. La colonne « chez moi » se distingue par un fond
   et un liseré d'accent, jamais par du rouge contre du vert : une opposition qui
   ne tient qu'à la couleur disparait pour un daltonien et se lit comme un statut. */
/* border-collapse:separate + coins arrondis sur les cellules .ici : l'overflow:hidden
   qui clippait les coins rognait aussi le premier caractère du <caption>. */
.compare-tab{width:100%; border-collapse:separate; border-spacing:0; font-size:.94rem;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r)}
.compare-tab caption{caption-side:top; text-align:left; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); font-weight:600; padding:0 0 12px}
.compare-tab th,.compare-tab td{padding:14px 18px; text-align:left;
  border-top:1px solid var(--line-soft)}
.compare-tab thead th,.compare-tab thead td{border-top:0}
.compare-tab thead th{font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); font-weight:600}
.compare-tab tbody th{font-weight:400; color:var(--muted); white-space:nowrap}
.compare-tab td{color:var(--text)}
.compare-tab .ici{background:var(--surface-2); box-shadow:inset 2px 0 0 var(--accent)}
.compare-tab thead .ici{border-top-right-radius:var(--r)}
.compare-tab tbody tr:last-child .ici{border-bottom-right-radius:var(--r)}
.compare-tab thead .ici{color:var(--heading)}
.compare-tab tbody .ici{color:var(--heading); font-weight:600}
@media(max-width:600px){
  .compare-tab{font-size:.86rem}
  .compare-tab th,.compare-tab td{padding:11px 12px}
  .compare-tab tbody th{white-space:normal}  /* le nowrap faisait déborder le tableau en 375 */
}

/* les trois voies (page prix) : libellés de ligne courts, cellules longues.
   4 colonnes ne tiennent pas en 375 : le tableau défile dans son conteneur. */
.scroll-x{overflow-x:auto}
.scroll-x .voies{min-width:640px}
/* sans ce rappel, le tableau a l'air coupé net : rien ne dit qu'on peut le faire défiler.
   sticky pour que le texte reste au bord gauche pendant que le tableau défile dessous. */
@media(max-width:700px){
  .scroll-x::before{content:"Faites glisser pour comparer les trois voies";
    position:sticky; left:0; display:block; width:max-content; max-width:100%;
    color:var(--faint); font-size:.78rem; margin-bottom:8px}
}
.voies tbody th{white-space:normal; width:20%}
.tarif-suite.lignes td{white-space:normal}

/* détail des formules SEO (accueil) : libellés longs, donc pas de nowrap */
.seo-detail{margin-top:28px}
.seo-detail tbody th{white-space:normal; width:38%}
@media(max-width:600px){
  .seo-detail{font-size:.8rem}
  .seo-detail th,.seo-detail td{padding:9px 8px}
}

/* cartes bénéfices */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-top:2px solid var(--accent);
  border-radius:var(--r); padding:22px}
.card h3,.card h2{font-size:1.02rem; margin-bottom:8px}
.card p{color:var(--muted); font-size:.92rem; margin:0}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
@media(min-width:861px){.cards.duo{grid-template-columns:repeat(2,1fr)}}

/* forfait photo */
.photo{display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:start}
.photo ul{list-style:none; padding:0; margin:0}
.photo li{padding:13px 0 13px 26px; border-top:1px solid var(--line-soft); position:relative; color:var(--muted); font-size:.94rem}
.photo li:first-child{border-top:0}
.photo li b{color:var(--text); font-weight:600}
.photo li::before{content:""; position:absolute; left:2px; top:21px; width:8px; height:8px; border-radius:50%; background:var(--accent-soft); border:2px solid var(--accent)}
@media(max-width:860px){.photo{grid-template-columns:1fr; gap:26px}}

/* paliers tarifaires (SEO) */
.tier{border-top:1px solid var(--line-soft); padding:16px 0; display:flex; justify-content:space-between; align-items:baseline; gap:16px}
.tier:first-child{border-top:0; padding-top:0}
.tier .n{color:var(--heading); font-weight:600; font-size:.98rem}
.tier .n span{display:block; color:var(--muted); font-size:.85rem; font-weight:400; margin-top:3px}
.tier .v{color:var(--accent); font-weight:700; white-space:nowrap; font-size:1.02rem}
.tier.main{background:var(--accent-soft); margin:0 -14px; padding:16px 14px; border-radius:10px; border-top:0}
.tier .pastille,.offre-titre .pastille{display:inline-block; margin-left:8px; background:var(--accent); color:#120803; font-style:normal; font-size:.72rem; font-weight:700; letter-spacing:.06em; padding:2px 8px; border-radius:99px; vertical-align:2px}
@media(max-width:520px){.tier{flex-wrap:wrap} .tier .n{flex:1 1 100%}}

/* seo */
.seo{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.seo-list{list-style:none; padding:0; margin:0}
.seo-list li{padding:14px 0 14px 26px; border-top:1px solid var(--line-soft); position:relative; color:var(--muted); font-size:.94rem}
.seo-list li:first-child{border-top:0}
.seo-list li b{color:var(--text); font-weight:600}
.seo-list li::before{content:""; position:absolute; left:2px; top:22px; width:8px; height:8px; border-radius:50%; background:var(--accent-soft); border:2px solid var(--accent)}
.seo-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px}
.seo-box .amount{font-size:1.7rem; font-weight:800; color:var(--heading); letter-spacing:-.03em}
.seo-box .amount small{font-size:.8rem; font-weight:500; color:var(--muted)}
.seo-box p{color:var(--muted); font-size:.9rem; margin:12px 0 0}
.seo-apart{margin-top:20px}
.seo-apart h3{margin:0 0 2px; font-size:1rem; color:var(--heading); letter-spacing:-.01em}
@media(max-width:860px){.seo{grid-template-columns:1fr; gap:28px}}

/* méthode */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.step .num{font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--accent); margin-bottom:8px}
.step h3{font-size:1rem; margin-bottom:6px}
.step p{color:var(--muted); font-size:.9rem; margin:0}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr; gap:24px}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* tarifs */
/* le site vitrine tient toute la largeur : c'est la base, les deux options viennent dessous */
.prices{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:start}
.price.feat{grid-column:1/-1}
.opt-head{grid-column:1/-1; margin-top:10px; padding-top:16px; border-top:1px solid var(--line-soft)}
.opt-head b{display:block; color:var(--heading); font-size:.95rem}
.opt-head span{color:var(--faint); font-size:.85rem}
.price{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; position:relative}
.price.feat{border-color:var(--accent); background:var(--surface-2)}
.price .tag{position:absolute; top:-10px; right:18px; background:var(--accent); color:#120803;
  font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:6px; letter-spacing:.04em}
.price h3{font-size:1.05rem; margin-bottom:4px}
.price .sub{color:var(--faint); font-size:.84rem; margin-bottom:16px}
.price .amount{font-size:1.9rem; font-weight:800; color:var(--heading); letter-spacing:-.03em}
.price .amount small{font-size:.8rem; font-weight:500; color:var(--muted); letter-spacing:0}
.price ul{list-style:none; padding:0; margin:18px 0 0; font-size:.9rem; color:var(--muted)}
.price li{padding:7px 0 7px 22px; position:relative; border-top:1px solid var(--line-soft)}
.price li:first-child{border-top:0}
.price li::before{content:""; position:absolute; left:4px; top:15px; width:9px; height:5px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg)}
/* la carte de base est large : sa liste passe en deux colonnes pour ne pas laisser un vide à droite */
@media(min-width:861px){.price.feat ul{columns:2; column-gap:32px} .price.feat li{break-inside:avoid}}
/* Carte-lien : le ::after couvre la carte, donc tout le bloc est cliquable, mais
   c'est un vrai <a> qui reste focusable au clavier. L'indication ne s'allume qu'au survol. */
.price:has(.plus){cursor:pointer}
.price .plus{display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-size:.88rem; color:var(--faint); text-decoration:none;
  transition:color .15s var(--ease-out)}
.price .plus::after{content:""; position:absolute; inset:0; border-radius:var(--r)}
.price .plus u{text-decoration:none; text-underline-offset:3px}
.price:hover .plus{color:var(--accent)}
.price:hover .plus u{text-decoration:underline}
.price .plus:focus-visible{outline:2px solid var(--accent); outline-offset:3px; color:var(--accent)}
/* sans survol possible (tactile), l'indication reste allumée : sinon elle passe pour du texte mort */
@media(hover:none){.price .plus{color:var(--accent)} .price .plus u{text-decoration:underline}}
/* Bloc d'engagement : ces regles vivaient uniquement en <style> dans demarrer.html,
   donc sur /devis.html les deux cases coulaient l'une derriere l'autre en plein texte. */
.engagement{border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; margin:26px 0 20px}
.engagement-titre{font-weight:600; font-size:.95rem; margin:0 0 10px; color:var(--heading)}
.engage{display:flex; gap:12px; align-items:flex-start; margin-top:14px; line-height:1.6; cursor:pointer}
.engage input{margin-top:3px; flex:none; width:18px; height:18px; accent-color:var(--accent)}
/* Boutons qui doivent se lire comme des liens (contrat nominatif du bloc
   d'engagement, replis de signature.js) : la classe n'existait qu'en <style>
   dans demarrer.html, donc sur /devis.html ils sortaient en boutons natifs. */
.lien-effacer{background:none; border:none; padding:0; font:inherit; color:var(--accent);
  text-decoration:underline; cursor:pointer}
.lien-effacer:disabled{opacity:.6; cursor:default}

/* relance de la livraison prioritaire, juste avant la signature */
.relance-48h{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 18px; padding:14px 18px; background:var(--surface-2);
  border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:var(--r)}
.relance-48h p{margin:0; font-size:.9rem; color:var(--muted)}
.relance-48h b{color:var(--heading)}
.note{margin-top:18px; font-size:.85rem; color:var(--faint)}
@media(max-width:860px){.prices{grid-template-columns:1fr}}

/* faq */
.faq{border-top:1px solid var(--line-soft)}
details{border-bottom:1px solid var(--line-soft); padding:7px 0}
summary{cursor:pointer; padding:9px 0; font-weight:600; color:var(--heading); list-style:none; display:flex; justify-content:space-between; gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--accent); font-weight:400; font-size:1.2rem; line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--muted); font-size:.94rem; margin:10px 0 0}

/* contact */
.contact{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:36px; text-align:center}
.contact h2{font-size:clamp(1.4rem,2.4vw,1.85rem); margin-bottom:10px}
.contact p{color:var(--muted); max-width:52ch; margin:0 auto 24px}
.contact .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.contact .direct{margin-top:22px; font-size:.9rem; color:var(--faint)}
.contact .direct a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--line)}
.contact .direct a:hover{border-color:var(--accent)}

footer{border-top:1px solid var(--line-soft); padding:28px 0 40px; font-size:.85rem; color:var(--faint)}
footer .footer-logo{display:block; width:auto; height:60px; margin:0 auto 24px; opacity:.85}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--text)}

/* liens dans les notes de bas de section */
.note a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--line)}
.note a:hover{color:var(--accent); border-color:var(--accent)}
/* Les reponses de FAQ et les notes s'etalaient sur toute la largeur du wrap :
   jusqu'a 143 caracteres par ligne, mesure. L'oeil perd le debut de la ligne
   suivante bien avant. Les titres et les cartes gardent leur largeur. */
/* `ch` vaut la largeur du zero, plus large que la lettre moyenne : 70ch rendait
   encore 94 a 100 caracteres par ligne, mesure. 54ch ≈ 72 caracteres. */
.note,details p,.simu-legal,.simu-note,.section-head p{max-width:54ch}

/* Ce qui court après la livraison tenait dans un paragraphe de 500 caractères
   en gris pâle : six prix noyés dans une phrase. Un montant se lit dans une
   colonne, pas dans une ligne de texte. */
.tarif-suite{width:100%; margin-top:22px; border-collapse:collapse; font-size:.9rem}
.tarif-suite caption{text-align:left; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); font-weight:600; padding-bottom:10px}
.tarif-suite th,.tarif-suite td{padding:11px 0; border-top:1px solid var(--line-soft);
  vertical-align:baseline}
.tarif-suite th{text-align:left; font-weight:400; color:var(--muted); padding-right:20px}
.tarif-suite th span{color:var(--faint)}
.tarif-suite th a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--line)}
.tarif-suite th a:hover{color:var(--accent); border-color:var(--accent)}
.tarif-suite td{text-align:right; white-space:nowrap; color:var(--text); font-weight:600}
@media(max-width:560px){
  /* deux colonnes à 360 px écraseraient le libellé sur cinq lignes : le montant
     passe sous son libellé, aligné à gauche avec lui. */
  .tarif-suite,.tarif-suite caption,.tarif-suite tbody,.tarif-suite tr,
  .tarif-suite th,.tarif-suite td{display:block}
  .tarif-suite th{border-top:1px solid var(--line-soft); padding:12px 0 2px}
  .tarif-suite td{text-align:left; border-top:0; padding:0 0 12px}
}

/* ═══ mouvement ═══════════════════════════════════════════════════════════
   But : rendre lisible l'arrivée d'un bloc et récompenser le survol, sans
   que rien de ce qu'on LIT ne bouge. transform/opacity uniquement.
   Sans JS, .reveal n'existe pas : tout reste visible (le JS pose .js-motion). */

/* révélation à l'entrée dans le viewport */
.js-motion .reveal{opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
  transition-delay:var(--d,0ms)}
.js-motion .reveal.in{opacity:1; transform:none}

/* hero : le contenu du navigateur factice se compose, comme un site qui se construit */
.js-motion .shot .band,.js-motion .shot .tile,.js-motion .shot .line,.js-motion .shot .pill{
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out); transition-delay:var(--d,0ms)}
.js-motion .shot.in .band,.js-motion .shot.in .tile,.js-motion .shot.in .line,.js-motion .shot.in .pill{
  opacity:1; transform:none}

/* mots-clés : le trait d'accent se trace sous le mot quand le bloc arrive.
   box-decoration-break : sans lui, une mention qui passe a la ligne n'a son
   trait que sous le dernier fragment, la premiere ligne reste nue. */
.hl{background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat; background-position:0 100%; background-size:100% 1px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone}
.js-motion .reveal .hl{background-size:0 1px;
  transition:background-size .6s var(--ease-out) .35s}
.js-motion .reveal.in .hl{background-size:100% 1px}

/* survol : uniquement au pointeur fin, jamais au doigt */
@media(hover:hover) and (pointer:fine){
  .card,.price,.seo-box,.contact{transition:transform .2s var(--ease-out),border-color .2s var(--ease-out)}
  .card:hover,.price:hover{transform:translateY(-3px); border-color:var(--faint)}
  .price.feat:hover{border-color:var(--accent-hover)}
  .stat{transition:background .2s var(--ease-out)}
  .stat:hover{background:var(--surface-2)}
  .tier{transition:color .15s var(--ease-out)}
  .seo-list li,.photo li{transition:color .2s var(--ease-out)}
  .seo-list li:hover,.photo li:hover{color:var(--text)}
  .seo-list li::before,.photo li::before{transition:transform .2s var(--ease-out),background .2s var(--ease-out)}
  .seo-list li:hover::before,.photo li:hover::before{transform:scale(1.35); background:var(--accent)}
  .step .num{transition:color .2s var(--ease-out)}
  .step:hover .num{color:var(--accent-hover)}
}

/* FAQ : le signe pivote, la réponse se déplie */
summary::after{transition:transform .2s var(--ease-out)}
details[open] summary::after{transform:rotate(180deg)}
details[open] p{animation:faq-in .25s var(--ease-out)}
@keyframes faq-in{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}

/* focus clavier : les champs avaient leur traitement, pas les liens ni les
   boutons, qui tombaient sur l'anneau générique du navigateur. */
/* pas de border-radius ici : la regle bat .btn en specificite et faisait
   passer les boutons de 10 px a 4 px, et .aide de rond a carre, au tab. */
a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px}

/* ═══ parallaxe ═══════════════════════════════════════════════════════════
   Le visuel dérive à contre-sens pendant que la page défile : il bouge sans
   défiler à la vitesse du reste, ce qui donne de la profondeur. Piloté par le
   défilement lui-même (animation-timeline natif), donc zéro JS, zéro requestAnimationFrame,
   et composité par le GPU. Uniquement sur des ORNEMENTS : rien de ce qu'on lit
   ne bouge. Sans support, la règle entière est ignorée et le site est identique. */
@supports (animation-timeline: view()){
  /* meme raison que le halo : le mockup est au-dessus de la ligne de flottaison,
     une timeline view() serait deja a un quart jouee des la premiere image et la
     moitie haute de la derive resterait inatteignable. */
  .shot{animation:derive linear both; animation-timeline:scroll(root block);
    animation-range:0 90vh}
  @keyframes derive{from{translate:0 24px} to{translate:0 -24px}}

  /* halo d'accent derrière le hero : le seul élément purement décoratif de la
     page, il dérive deux fois plus lentement que le contenu. */
  /* clip en X seulement : le halo débordait de 90 px à droite et créait une
     barre de défilement horizontale sur mobile. En Y tout reste visible, sinon
     le mockup se ferait couper par sa propre dérive. */
  .hero{position:relative; isolation:isolate; overflow-x:clip; overflow-y:visible}
  .hero::before{content:""; position:absolute; z-index:-1; pointer-events:none;
    top:-140px; right:-120px; width:620px; height:620px; max-width:80vw;
    /* les heros de tunnel font 340 px : sans borne, le halo debordait de 140 px
       sur le formulaire en dessous, qui n'a pas de fond opaque. */
    max-height:calc(100% + 140px);
    background:radial-gradient(closest-side,rgba(240,118,58,.13),transparent 70%);
    /* accroche au defilement du document, pas a l'entree du hero dans l'ecran :
       le hero est deja visible au chargement, sa timeline view() serait a moitie
       jouee des la premiere image et le halo naitrait deja eteint. */
    animation:halo linear both; animation-timeline:scroll(root block);
    animation-range:0 70vh}
  @keyframes halo{from{translate:0 -60px; opacity:1} to{translate:0 60px; opacity:.1}}

  /* le mockup est plus haut que l'écran sur mobile : moins d'amplitude, sinon
     la dérive devient un tremblement pendant qu'on lit le texte au-dessus. */
  @media(max-width:860px){
    @keyframes derive{from{translate:0 12px} to{translate:0 -12px}}
    .hero::before{width:380px; height:380px; top:-90px; right:-90px}
  }
}

/* garde-fous livrés avec l'animation, pas après */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-motion .reveal,.js-motion .shot .band,.js-motion .shot .tile,
  .js-motion .shot .line,.js-motion .shot .pill{opacity:1 !important; transform:none; transition:none}
  .js-motion .reveal .hl{background-size:100% 1px; transition:none}
  details[open] p{animation:none}
  *{transition-duration:.01ms !important}
  /* la parallaxe est du mouvement pur : on la coupe, on garde le trait dessiné */
  .shot,.hero::before{animation:none !important; translate:none}
  .hero::before{opacity:.5}
}

/* ═══ la méthode, mise en avant ═══════════════════════════════════════════
   Section détachée du fond et parcours numéroté : c'est l'argument « c'est
   simple et c'est rapide », il doit se lire avant les prix. */
.methode{background:var(--surface); border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft); padding:64px 0}
.methode .steps{position:relative; margin-top:8px}

/* le fil qui relie les étapes — desktop seulement, il n'a pas de sens en colonne */
@media(min-width:861px){
  .methode .steps::before{content:""; position:absolute; left:22px; right:22px; top:21px;
    height:1px; background:linear-gradient(90deg,var(--accent),var(--line));
    transform:scaleX(0); transform-origin:left;
    transition:transform .9s var(--ease-out) .1s}
  .methode .steps:has(.step.in)::before{transform:scaleX(1)}
}
.methode .step{position:relative}
.methode .step .num{width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg); border:1px solid var(--accent); color:var(--accent);
  font-family:'IBM Plex Mono',monospace; font-size:1.05rem; font-weight:500;
  margin:0 0 14px; position:relative; z-index:1}
.methode .step .jour{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin-bottom:6px}
.methode .step h3{font-size:1.08rem; margin-bottom:8px}
.methode .step p{font-size:.92rem}
@media(hover:hover) and (pointer:fine){
  .methode .step .num{transition:background .2s var(--ease-out),color .2s var(--ease-out),
    transform .2s var(--ease-out)}
  .methode .step:hover .num{background:var(--accent); color:#120803; transform:scale(1.06)}
}
@media(prefers-reduced-motion:reduce){.methode .steps::before{transform:scaleX(1)}}

/* ═══ formulaires ═════════════════════════════════════════════════════════ */
.champ{display:block; margin-bottom:14px; text-align:left}
.champ > span{display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px}
.champ > span b{color:var(--accent); font-weight:400}
/* `input` sans attribut type est un champ texte valide : cibler par type seul
   le laisserait en blanc natif sur fond sombre */
input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea{
  width:100%; padding:11px 13px; border-radius:9px; background:var(--bg);
  border:1px solid var(--line); color:var(--text); font:inherit; font-size:.94rem;
  transition:border-color .15s var(--ease-out),box-shadow .15s var(--ease-out)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
textarea{resize:vertical; min-height:96px; line-height:1.55}
.champ-double{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:520px){.champ-double{grid-template-columns:1fr}}
.pot{position:absolute; left:-9999px}          /* honeypot : hors écran, jamais affiché */
.form-etat{margin-top:14px; font-size:.9rem; min-height:1.4em}
.form-etat.ok{color:var(--good)}
.form-etat.ko{color:var(--bad)}

/* fenêtre de contact */
dialog{border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  color:var(--text); padding:0; max-width:520px; width:calc(100% - 32px)}
dialog::backdrop{background:rgba(5,6,8,.72); backdrop-filter:blur(3px)}
dialog .dlg-corps{padding:28px}
dialog h2{font-size:1.25rem; margin-bottom:6px}
dialog .dlg-intro{color:var(--muted); font-size:.9rem; margin:0 0 20px}
dialog .dlg-fermer{position:absolute; top:14px; right:16px; background:none; border:0;
  color:var(--faint); font-size:1.5rem; line-height:1; cursor:pointer; padding:4px 8px;
  transition:color .15s var(--ease-out)}
dialog .dlg-fermer:hover{color:var(--text)}
.js-motion dialog[open]{animation:dlg-in .22s var(--ease-out)}
@keyframes dlg-in{from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.js-motion dialog[open]{animation:none}}

/* ═══ configurateur de devis ══════════════════════════════════════════════ */
.devis-groupe{margin-bottom:34px}
.devis-groupe h2{font-size:1.15rem; margin-bottom:4px}
.devis-groupe > .note{margin:0 0 16px}
.offre[hidden]{display:none}
.offre{display:flex; gap:14px; align-items:flex-start; padding:16px 18px; margin-bottom:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); cursor:pointer;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
.offre:has(input:checked){border-color:var(--accent); background:var(--surface-2)}
.offre:has(input:focus-visible){box-shadow:0 0 0 3px var(--accent-soft)}
/* La page s'arrêtait visuellement sur deux boutons radio, sans rien qui dise
   qu'il y a une suite. Le repère disparaît une fois le choix fait. */
.devis-groupe > .depart-suite{margin:20px 0 0}
#depart:has(input:checked) .depart-suite{display:none}
.offre.impose{cursor:default; opacity:.85}
.offre input{width:19px; height:19px; margin-top:3px; flex:0 0 auto; accent-color:var(--accent)}
.offre-corps{display:block; flex:1}
.offre-titre{display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  color:var(--heading); font-weight:600; font-size:1rem}
.offre-titre b{color:var(--accent); white-space:nowrap}
.offre-titre small{font-size:.8rem; font-weight:400; color:var(--muted)}
.offre-resume{display:block; color:var(--muted); font-size:.89rem; margin-top:5px}

.recap{background:var(--surface); border:1px solid var(--accent); border-radius:var(--r);
  padding:24px; margin-top:8px}
.recap h2{font-size:1.1rem; margin-bottom:14px}
.recap ul{list-style:none; padding:0; margin:0}
.recap li{display:flex; justify-content:space-between; gap:16px; padding:9px 0;
  border-top:1px solid var(--line-soft); font-size:.92rem; color:var(--muted)}
.recap li:first-child{border-top:0}
.recap li b{color:var(--text); white-space:nowrap}
.recap-total{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.recap-total span{color:var(--muted); font-size:.9rem}
.recap-total b{font-size:1.6rem; font-weight:800; color:var(--heading); letter-spacing:-.03em}
.recap-mois{margin-top:6px; padding-top:6px; border-top:0}
.recap-mois b{font-size:1.15rem; color:var(--accent)}
.note.ko{color:var(--bad)}

/* à l'impression : le devis seul, sur fond blanc */
@media print{
  /* --faint est calibre pour le fond sombre ; sur le blanc du papier il tombe
     a 3,79:1. On le redescend pour l'impression du devis. */
  :root{--faint:#5a5e69}
  nav,footer,form,.hero .lead,#imprimer{display:none !important}
  body{background:#fff; color:#111}
  .offre{display:none}
  .offre:has(input:checked){display:flex; border-color:#ccc; background:#fff; break-inside:avoid}
  .offre-titre,.recap-total b{color:#111}
  .offre-titre b,.recap-mois b{color:#c4471f}
  .offre-resume,.recap li{color:#444}
  .recap{border-color:#c4471f}
  h1,h2{color:#111}
}

/* ═══ brief client ════════════════════════════════════════════════════════ */
.bloc-brief{border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:24px 26px 12px; margin:0 0 22px}
.bloc-brief legend{color:var(--heading); font-weight:700; font-size:1.05rem; padding:0 10px;
  letter-spacing:-.02em}
.bloc-brief > .note{margin:0 0 20px}
.horaires{margin-bottom:20px}
.horaire-jour{display:grid; grid-template-columns:110px repeat(4,1fr); gap:8px; align-items:center;
  padding:7px 0; border-top:1px solid var(--line-soft)}
.horaire-tete{display:grid; grid-template-columns:110px 1fr 1fr; gap:8px; padding:0 0 6px;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.horaire-tete b{font-weight:600}
.horaire-jour:first-of-type{border-top:0}
.horaire-jour:first-child{border-top:0}
.horaire-jour > span{color:var(--muted); font-size:.9rem}
.horaire-jour input{padding:8px 10px; font-size:.88rem}
.horaire-jour i{display:none}
@media(max-width:640px){
  .horaire-tete{display:none}
  .horaire-jour i{display:block; grid-column:1 / -1; font-style:normal; font-size:.8rem;
    letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:6px}
  .horaire-jour{grid-template-columns:1fr 1fr; gap:6px}
  .horaire-jour > span{grid-column:1 / -1; color:var(--text); font-weight:600; margin-top:6px}
}

/* l'autofill du navigateur repeint le champ en blanc : illisible sur fond sombre.
   Pas de propriété standard pour ça — l'ombre interne est le seul levier. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 40px var(--bg) inset;
  caret-color:var(--text);
  transition:background-color 5000s ease-in-out 0s}

/* ═══ brief : progression, étapes, dépôt de fichiers ══════════════════════ */
.progression{margin-bottom:24px}
.progression-barre{height:4px; border-radius:3px; background:var(--line); overflow:hidden}
.progression-barre i{display:block; height:100%; width:0; background:var(--accent);
  transition:width .35s var(--ease-out)}
.progression-texte{margin:10px 0 0; font-size:.85rem; color:var(--muted);
  font-family:'IBM Plex Mono',monospace}
.etape-nav{display:flex; justify-content:space-between; gap:12px; margin-bottom:18px}
.etape-nav .btn{min-width:150px; text-align:center}
.etape-nav #precedent[hidden]{display:none}

.depot{border:1.5px dashed var(--line); border-radius:var(--r); background:var(--bg);
  padding:34px 20px; text-align:center; margin-bottom:16px;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
.depot.survol{border-color:var(--accent); background:var(--accent-soft)}
.depot-invite{margin:0; color:var(--muted); font-size:.94rem}
.depot-invite b{color:var(--text); display:inline-block; margin-bottom:14px}
.liste-fichiers{list-style:none; padding:0; margin:0 0 6px}
.liste-fichiers li{display:flex; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface-2); margin-bottom:8px;
  font-size:.9rem}
.liste-fichiers .nom{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.liste-fichiers .poids{color:var(--faint); font-size:.82rem; white-space:nowrap}
.liste-fichiers .retirer{background:none; border:0; color:var(--faint); font-size:1.3rem;
  line-height:1; cursor:pointer; padding:2px 6px; transition:color .15s var(--ease-out)}
.liste-fichiers .retirer:hover{color:var(--bad)}

/* la nav est collante : sans cette marge, le titre d'étape se glisse dessous
   quand on passe à la suivante */
#form-brief,section[id]{scroll-margin-top:84px}

/* ═══ bulles d'aide ═══════════════════════════════════════════════════════
   Un « ? » discret par champ. Survol au pointeur, tap au doigt, Entrée au
   clavier : les trois, sinon la moitié des visiteurs n'y a pas accès. */
.champ{position:relative}
.intitule{display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px}
.intitule b{color:var(--accent); font-weight:400}
.aide{width:17px; height:17px; margin-left:7px; padding:0; vertical-align:-2px;
  border-radius:50%; border:1px solid var(--line); background:var(--surface-2);
  color:var(--faint); font:600 12px/1 'Inter',sans-serif; cursor:help;
  transition:color .15s var(--ease-out),border-color .15s var(--ease-out),
    background .15s var(--ease-out)}
.aide:hover,.aide[aria-expanded="true"]{color:var(--accent); border-color:var(--accent);
  background:var(--accent-soft)}
.aide:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.bulle{position:absolute; z-index:20; left:0; right:0; top:100%; margin-top:6px;
  padding:12px 14px; border-radius:10px; background:var(--surface-2);
  border:1px solid var(--accent); color:var(--text); font-size:.86rem; line-height:1.55;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-4px) scale(.98); transform-origin:top left;
  transition:opacity .15s var(--ease-out),transform .15s var(--ease-out),visibility .15s}
.aide[aria-expanded="true"] + .bulle{opacity:1; visibility:visible; transform:none}
@media(hover:hover) and (pointer:fine){
  .aide:hover + .bulle,.aide:focus-visible + .bulle{opacity:1; visibility:visible; transform:none}
}
@media(prefers-reduced-motion:reduce){.bulle{transition:none}}

/* Le rond fait 17 px : joli, mais intapable au doigt. On lui donne une zone
   de 44 px — RÉSERVÉE AU TACTILE. À la souris elle ferait ouvrir la bulle en
   passant à côté du « ? » sans jamais le viser, ce qui est très agaçant. */
.aide{position:relative}
@media (pointer: coarse) {
  .aide::after{content:""; position:absolute; left:50%; top:50%;
    width:44px; height:44px; transform:translate(-50%,-50%)}
  .btn{min-height:44px}
  .plus{display:inline-flex; align-items:center; min-height:44px}
}

/* ═══ parcours unique : devis → jalon → brief ═════════════════════════════ */
.jalons{list-style:none; padding:0; margin:28px 0 0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:14px; counter-reset:jalon}
.jalons li{position:relative; padding:16px 18px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
  transition:border-color .25s var(--ease-out),background .25s var(--ease-out)}
.jalons li b{display:block; color:var(--heading); font-size:.98rem; margin-bottom:3px}
.jalons li span:not(.jalon-num){display:block; color:var(--muted); font-size:.85rem; line-height:1.45}
.jalon-num{display:grid; place-items:center; width:26px; height:26px; margin-bottom:10px;
  border-radius:50%; border:1px solid var(--line); background:var(--bg);
  color:var(--faint); font-family:'IBM Plex Mono',monospace; font-size:.8rem;
  transition:background .25s var(--ease-out),color .25s var(--ease-out),
    border-color .25s var(--ease-out)}
.jalons li.encours{border-color:var(--accent)}
.jalons li.encours .jalon-num{border-color:var(--accent); color:var(--accent);
  background:var(--accent-soft)}
.jalons li.fait .jalon-num{background:var(--accent); border-color:var(--accent); color:#120803}
.jalons li.fait .jalon-num::after{content:"✓"; font-size:.85rem}
.jalons li.fait .jalon-num{font-size:0}
@media(max-width:720px){.jalons{grid-template-columns:1fr; gap:10px}
  .jalons li{display:grid; grid-template-columns:26px 1fr; gap:0 14px; align-items:center}
  .jalon-num{margin-bottom:0; grid-row:span 2}}

/* le jalon entre les deux : ce qui est fait, ce qui reste */
.bascule{background:var(--surface); border:1px solid var(--accent); border-radius:var(--r);
  padding:36px; text-align:center}
.bascule-marque{width:52px; height:52px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent); color:#120803;
  font-size:1.5rem; font-weight:700}
.bascule h2{font-size:clamp(1.35rem,2.4vw,1.8rem); margin-bottom:12px}
.bascule p{color:var(--muted); max-width:56ch; margin:0 auto 14px}
.bascule .bascule-suite{color:var(--text)}
.bascule .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px}
.js-motion #passage:not([hidden]) .bascule{animation:bascule-in .4s var(--ease-out)}
@keyframes bascule-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.js-motion #passage:not([hidden]) .bascule{animation:none}}

/* choix du projet, en tête du brief quand il n'a pas été composé de devis */
.choix-projet{margin-bottom:6px}
.choix-projet .offre{cursor:pointer}
.choix-projet input[type=radio]{width:18px; height:18px; margin-top:3px; flex:0 0 auto;
  accent-color:var(--accent)}

/* le libellé garde son comportement de label : cliquer dessus vise le champ */
.intitule label{cursor:pointer}

/* `hidden` doit gagner : .btn{display:inline-block} l'écrasait, et le bouton
   « Suivant » restait affiché sur la dernière étape. */
[hidden]{display:none !important}

/* la flèche des listes déroulantes collait au bord droit */
select{appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238b909c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center}
select:focus{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23f0763a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Champ à suggestions : Chromium colle son propre chevron au bord droit.
   On le masque et on réutilise exactement la flèche des listes déroulantes. */
/* !important assumé : la règle générale des champs est écrite
   `input:not([type=checkbox]):not([type=radio]):not([type=submit])`, ce qui lui
   donne une spécificité de (0,4,1) — largement au-dessus de `input[list]`. Son
   raccourci `background:` remettait donc l'image à none. */
input[list]{padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238b909c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 14px center !important}
input[list]:focus{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23f0763a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
input[list]::-webkit-calendar-picker-indicator{opacity:0; width:38px; margin:0 -13px 0 0; cursor:pointer}

/* ═══ dépôts : une zone par document attendu ══════════════════════════════ */
.bloc-depot{margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--line-soft)}
.bloc-depot:last-of-type{border-bottom:0}
.bloc-depot > .intitule{font-size:.95rem; color:var(--text); font-weight:600; margin-bottom:4px}
.bloc-depot > .note{margin:0 0 12px}
.bloc-depot .depot{padding:22px 18px; margin-bottom:10px}
.bloc-depot .depot-invite{font-size:.9rem}
.bloc-depot .depot-invite .btn{padding:7px 14px; font-size:.85rem; margin-left:4px}

/* retour en arrière depuis le devis : le parcours ne doit pas être un couloir */
.retour-etape{margin-bottom:20px; padding:8px 16px; font-size:.88rem}
.liens-404{list-style:none; padding:0; margin:18px 0 0; max-width:72ch}
.liens-404 li{padding:12px 0; border-bottom:1px solid var(--line-soft); color:var(--muted)}
.liens-404 a{font-weight:600}

/* ============================================================
   ARTICLES DE CONSEIL (/blog.html et les pages d'articles)
   Le reste du site est fait de blocs larges ; un article se lit
   en colonne etroite, sinon les lignes font 120 caracteres.
   ============================================================ */
.art p,.art ul,.art ol,.art h3,.art .repere,.art .section-head{max-width:68ch}
.art p{color:var(--muted); margin:0 0 16px; line-height:1.75}
.art p b,.art li b{color:var(--text); font-weight:600}
.art h3{font-size:1.06rem; margin:28px 0 10px}
.art ul,.art ol{color:var(--muted); margin:0 0 16px; padding-left:20px; line-height:1.75}
.art li{margin-bottom:9px}
.art .section-head{margin-bottom:18px}
.art p a,.art li a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--line)}
.art p a:hover,.art li a:hover{color:var(--accent); border-color:var(--accent)}
.art .repere{border-left:2px solid var(--accent); background:var(--surface);
  padding:16px 20px; border-radius:0 var(--r) var(--r) 0; margin:0 0 18px}
.art .repere p:last-child{margin-bottom:0}
.hero.hero-art{padding:72px 0 44px}
.hero.hero-art h1{font-size:clamp(1.9rem,3.6vw,2.6rem); max-width:20ch}
.hero.hero-art .lead{max-width:60ch; font-size:1.04rem}
.hero.hero-art .meta{margin-top:18px; font-size:.84rem; color:var(--faint)}
.hero.hero-art .meta a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line)}
/* Un groupe de quatre cartes dans une grille de trois laisse une carte seule
   sur sa ligne : a quatre, on passe en 2x2. */
.cards:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}

/* ── Calculateurs des pages plateformes ─────────────────────────────────── */
.calc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 20px; margin:0 0 20px; max-width:68ch}
.calc-champs{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;
  align-items:end}   /* les intitules sur deux lignes ne doivent pas decaler les champs */
.calc-champs label{display:flex; flex-direction:column; gap:6px;
  font-size:.82rem; color:var(--muted); line-height:1.35}
.calc-champs input{background:var(--bg); color:var(--text); font:inherit; font-weight:600;
  border:1px solid var(--line); border-radius:9px; padding:9px 11px; width:100%;
  transition:border-color .18s var(--ease-out)}
.calc-champs input:focus-visible{outline:none; border-color:var(--accent)}
.calc-aide{font-size:.8rem; color:var(--muted); line-height:1.55; margin:14px 0 0}
.calc-sorties{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px;
  background:var(--line-soft); border:1px solid var(--line); border-radius:11px;
  overflow:hidden; margin:18px 0 0}
.calc-out{background:var(--surface-2); padding:16px 15px}
.calc-out b{display:block; font-size:1.42rem; color:var(--accent); font-weight:700;
  letter-spacing:-.02em; margin-bottom:5px}
.calc-out span{display:block; font-size:.8rem; color:var(--muted); line-height:1.45}
.calc-detail{margin:16px 0 0; padding:14px 15px; border-left:2px solid var(--accent);
  background:var(--surface-2); border-radius:0 9px 9px 0;
  font-size:.88rem; color:var(--text); line-height:1.65}
.calc-detail:empty{display:none}
ul.calc-note{margin:14px 0 0; padding-left:18px}
ul.calc-note li{margin-bottom:6px}
.art .calc-note,.calc ul.calc-note{font-size:.79rem; color:var(--faint); margin:14px 0 0; line-height:1.6}
@media (max-width:560px){
  .calc{padding:18px 16px}
  .calc-out b{font-size:1.24rem}
}