/* ---------- Tokens ---------- */
:root{
  --bg:#F6F8F7; --bg-2:#EEF2F0; --sable:#EFE7D8; --surface:#FFFFFF;
  --ink:#14302A; --ink-2:#4A5F58; --line:#CFD9D5; --line-strong:#9FB0AA;
  --pin:#1F4D40; --pin-ink:#FFFFFF; --pin-soft:#D6E6DF;
  --eau:#1AA3B5; --eau-text:#0E6F7C; --eau-soft:#D4EEF2;
  --signal:#A83E0C; --signal-soft:#FCE9DE;
  --ok:#276E4A; --ok-soft:#DFF3E7;
  --focus:#1AA3B5;
  --phone:#14302A; --screen:#FFFFFF;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible Next",system-ui,sans-serif;
  --radius:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0F1C19; --bg-2:#142420; --sable:#2A2A22; --surface:#172924;
    --ink:#E6EEEA; --ink-2:#A3B5AE; --line:#2B3F39; --line-strong:#4A6159;
    --pin:#7BD3B8; --pin-ink:#0F1C19; --pin-soft:#1E3A32;
    --eau:#3CBFD0; --eau-text:#6FD3E0; --eau-soft:#163A40;
    --signal:#F08A5C; --signal-soft:#3D241A;
    --ok:#6CC79A; --ok-soft:#1C3A2C;
    --phone:#050B0A; --screen:#121F1B;
    color-scheme:dark;
  }
}

/* ---------- Base ---------- */
*,*::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:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.55;
  font-variant-numeric:tabular-nums; overflow-x:hidden;
}
@media (min-width:720px){body{font-size:18px}}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.1; margin:0; letter-spacing:-0.01em; text-wrap:balance}
h1{font-size:clamp(2.1rem,6.2vw,3.5rem); letter-spacing:-0.02em; font-variation-settings:"opsz" 96}
h2{font-size:clamp(1.65rem,4vw,2.4rem); letter-spacing:-0.015em}
h3{font-size:1.2rem; font-weight:600}
p{margin:0}
a{color:var(--pin)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}
img,svg{display:block; max-width:100%}
.wrap{width:100%; max-width:1120px; margin:0 auto; padding-left:16px; padding-right:16px}
@media (min-width:720px){.wrap{padding-left:32px; padding-right:32px}}
.lede{color:var(--ink-2); max-width:36rem}
.measure{max-width:36rem}
section{padding:56px 0}
@media (min-width:900px){section{padding:88px 0}}
.sec-head{margin-bottom:32px}
.sec-head p{margin-top:12px}
.alt{background:var(--bg-2)}

/* ---------- Buttons & badges ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 20px; border-radius:var(--radius);
  font:inherit; font-weight:700; text-decoration:none; cursor:pointer;
  border:2px solid transparent; transition:background .15s, border-color .15s;
}
.btn-primary{background:var(--pin); color:var(--pin-ink); border-color:var(--pin)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink)}
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:.82em; font-weight:700; line-height:1.4; white-space:nowrap;
}
.badge::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor}
.b-urgent{background:var(--signal-soft); color:var(--signal)}
.b-progress{background:var(--eau-soft); color:var(--eau-text)}
.b-done{background:var(--ok-soft); color:var(--ok)}
.b-plan{background:var(--bg-2); color:var(--ink-2)}
@media (prefers-color-scheme:dark){.b-plan{background:#22352F}}

/* ---------- Header ---------- */
header{position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--pin); text-decoration:none; font-family:var(--display); font-size:1.35rem; letter-spacing:-0.01em}
.brand b{font-weight:700}.brand span{font-weight:500}
.brand svg{width:32px; height:32px; flex:none}
.nav ul{display:none; list-style:none; margin:0; padding:0; gap:28px}
.nav ul a{color:var(--ink); text-decoration:none; font-weight:500}
.nav ul a:hover{color:var(--pin)}
@media (min-width:860px){.nav ul{display:flex}}
.nav .btn{min-height:42px; padding:8px 16px; white-space:nowrap}
.nav-actions{display:flex; align-items:center; gap:14px}
.nav-login{color:var(--ink-2); text-decoration:none; font-size:.92em; white-space:nowrap; min-height:42px; display:inline-flex; align-items:center}
.nav-login:hover{color:var(--pin); text-decoration:underline}
@media (max-width:439px){.nav{gap:6px}.nav-actions{gap:8px}.nav-login{font-size:.82em}.nav .btn{padding:8px 10px}.nav .brand{font-size:1.05rem; gap:6px}.nav .brand svg{width:26px; height:26px}}
@media (max-width:359px){.nav-login{display:none}}   /* très petits écrans : « Se connecter » reste dans le pied de page */
.nav-cta .long{display:none}.nav-cta .short{display:inline}
@media (min-width:600px){.nav-cta .long{display:inline}.nav-cta .short{display:none}}
@media (min-width:860px) and (max-width:1059px){.nav-cta .long{display:none}.nav-cta .short{display:inline}.nav ul{gap:20px}}   /* menu + « Se connecter » : libellé court */

/* ---------- Hero ---------- */
.hero{padding:40px 0 48px; overflow:hidden}
@media (min-width:900px){.hero{padding:72px 0 80px}}
.hero-grid{display:grid; gap:40px; align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr; gap:56px}}
.hero h1{margin-bottom:20px}
.hero .lede{font-size:1.1em; margin-bottom:28px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px}
.facts{display:flex; flex-wrap:wrap; gap:8px 24px; padding:0; margin:0; list-style:none; color:var(--ink-2); font-size:.95em}
.facts li{display:flex; align-items:center; gap:8px}
.facts li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--eau)}

/* Phone */
.phone-wrap{display:flex; justify-content:center}
.phone{
  width:min(340px,100%); aspect-ratio:9/18.4; background:var(--phone); border-radius:44px; padding:12px;
  box-shadow:0 30px 60px -30px rgba(20,48,42,.5), inset 0 0 0 2px rgba(255,255,255,.06);
  position:relative;
}
.screen{background:var(--screen); border-radius:34px; height:100%; overflow:hidden; display:flex; flex-direction:column; font-size:14px; line-height:1.4}
.notch{position:absolute; top:22px; left:50%; transform:translateX(-50%); width:96px; height:26px; background:var(--phone); border-radius:14px}
.app-top{padding:44px 18px 10px; display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--line)}
.app-top .day{font-family:var(--display); font-weight:700; font-size:1.25em}
.app-top .sub{color:var(--ink-2); font-size:.85em}
.app-count{font-family:var(--display); font-weight:700; font-size:1.6em; color:var(--signal); line-height:1}
.ticket{margin:12px 14px 0; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden}
.ticket-head{display:flex; justify-content:space-between; align-items:center; padding:12px 14px 0; gap:8px}
.ticket-head .ref{color:var(--ink-2); font-size:.85em}
.ticket h4{font-family:var(--display); font-size:1.12em; font-weight:700; padding:6px 14px 2px; line-height:1.2}
.ticket .meta{padding:0 14px 10px; color:var(--ink-2); font-size:.85em; display:flex; gap:10px; flex-wrap:wrap}
.ticket .meta span{display:inline-flex; align-items:center; gap:4px}
.ticket .meta svg{width:14px; height:14px}
.ticket-photo{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line)}
.ticket-photo > div{background:var(--bg-2); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; position:relative}
.ticket-photo .cap{position:absolute; bottom:6px; left:8px; font-size:.72em; color:var(--ink-2); background:var(--surface); padding:1px 6px; border-radius:4px}
.ticket-photo svg{width:72%; height:72%}
.ticket-assign{display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--line); font-size:.92em}
.avatar{width:28px; height:28px; border-radius:50%; background:var(--pin); color:var(--pin-ink); font-weight:700; font-size:.8em; display:flex; align-items:center; justify-content:center; flex:none}
.ticket-assign .who{flex:1}
.ticket-assign .who small{display:block; color:var(--ink-2); font-size:.85em}
.timeline{margin:12px 14px 0; padding:0; list-style:none; display:grid; gap:6px}
.timeline li{display:grid; grid-template-columns:18px 1fr auto; align-items:center; gap:10px; font-size:.9em; color:var(--ink-2); transition:color .3s}
.timeline li .dot{width:10px; height:10px; border-radius:50%; border:2px solid var(--line-strong); margin-left:2px; transition:background .3s,border-color .3s}
.timeline li time{font-variant-numeric:tabular-nums}
.timeline li.on{color:var(--ink)}
.timeline li.on .dot{background:var(--pin); border-color:var(--pin)}
.timeline li.on.last .dot{background:var(--ok); border-color:var(--ok)}
.next{margin:14px 14px 0; border-top:1px solid var(--line); padding-top:10px}
.next-label{font-size:.8em; color:var(--ink-2); margin-bottom:6px}
.next-row{display:flex; align-items:center; gap:8px; padding:5px 0; font-size:.88em}
.next-row .badge{font-size:.78em; padding:2px 8px}
.next-title{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.next-time{color:var(--ink-2)}
.app-bar{margin-top:auto; display:flex; justify-content:space-around; padding:10px 8px 16px; border-top:1px solid var(--line); color:var(--ink-2); font-size:.72em}
.app-bar div{display:flex; flex-direction:column; align-items:center; gap:3px}
.app-bar svg{width:20px; height:20px}
.app-bar .cur{color:var(--pin); font-weight:700}
.app-home{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); width:110px; height:4px; border-radius:2px; background:rgba(255,255,255,.35)}

/* ---------- Pains ---------- */
.pains{display:grid; gap:0; border-top:1px solid var(--line)}
.pain{padding:24px 0; border-bottom:1px solid var(--line); display:grid; gap:10px}
@media (min-width:760px){
  .pains{grid-template-columns:repeat(3,1fr); border-top:none; border-left:1px solid var(--line)}
  .pain{padding:8px 24px 8px; border-bottom:none; border-right:1px solid var(--line)}
}
.pain h3{font-size:1.25rem}
.pain .q{font-family:var(--display); font-weight:600; color:var(--signal); font-size:1.05em}
.pain p{color:var(--ink-2)}

/* ---------- Features ---------- */
.features{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
@media (min-width:640px){.features{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.features{grid-template-columns:repeat(3,1fr)}}
.feature{background:var(--surface); padding:22px 22px 26px; display:flex; flex-direction:column; gap:14px}
.feature .schema{height:132px; display:flex; align-items:center; justify-content:center; background:var(--bg-2); border-radius:8px; padding:12px; overflow:hidden}
.feature .schema svg{width:100%; height:100%; max-width:260px; font-family:var(--body); font-size:11px}
.feature h3{font-size:1.15rem}
.feature p{color:var(--ink-2); font-size:.95em}
.schema .txt{fill:var(--ink)} .schema .txt2{fill:var(--ink-2)}
.schema .st{stroke:var(--ink); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.schema .st2{stroke:var(--line-strong); fill:none; stroke-width:1.5; stroke-linecap:round}
.schema .fill-pin{fill:var(--pin)} .schema .fill-eau{fill:var(--eau)} .schema .fill-sig{fill:var(--signal)} .schema .fill-ok{fill:var(--ok)}
.schema .fill-surf{fill:var(--surface)} .schema .fill-sable{fill:var(--sable)} .schema .fill-line{fill:var(--line)}
.schema .stroke-pin{stroke:var(--pin); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.schema .stroke-eau{stroke:var(--eau); fill:none; stroke-width:2; stroke-linecap:round}
.offline{margin-top:20px; display:flex; gap:12px; align-items:flex-start; color:var(--ink-2); font-size:.95em; max-width:48rem}
.offline svg{width:22px; height:22px; flex:none; margin-top:3px; stroke:var(--pin); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- Comparison ---------- */
.cmp{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.cmp th,.cmp td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; font-size:.95em}
.cmp thead th{font-family:var(--display); font-weight:700; font-size:1.05em; background:var(--bg-2)}
.cmp thead th:first-child{font-family:var(--body); font-weight:500; color:var(--ink-2); font-size:.9em}
.cmp tbody th{font-weight:700; width:24%}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
.cmp td.me{background:var(--pin-soft); font-weight:500}
.cmp thead th.me{background:var(--pin); color:var(--pin-ink)}
.cmp td small{display:block; color:var(--ink-2); font-weight:400; font-size:.88em}
.cmp-wrap{display:none}
.cmp-cards{display:grid; gap:12px}
.cmp-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.cmp-card h3{font-size:1rem; margin-bottom:8px; color:var(--ink-2); font-family:var(--body); font-weight:700}
.cmp-card dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:.95em}
.cmp-card dt{font-family:var(--display); font-weight:700}
.cmp-card dd{margin:0}
.cmp-card dd.me{color:var(--pin); font-weight:700}
.cmp-card dd small{display:block; color:var(--ink-2); font-size:.88em; font-weight:400}
@media (min-width:720px){.cmp-wrap{display:block}.cmp-cards{display:none}}
.cmp-note{margin-top:14px; color:var(--ink-2); font-size:.9em; max-width:48rem}

/* ---------- Pricing ---------- */
.price-grid{display:grid; gap:24px; align-items:start}
@media (min-width:900px){.price-grid{grid-template-columns:1fr 1fr; gap:48px}}
.price-card{background:var(--surface); border:2px solid var(--pin); border-radius:16px; padding:28px; display:grid; gap:18px}
.price-card .amount{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.price-card .num{font-family:var(--display); font-weight:800; font-size:4rem; line-height:1; letter-spacing:-0.03em; color:var(--pin); font-variation-settings:"opsz" 96}
.price-card .unit{color:var(--ink-2)}
.price-card .annual{background:var(--sable); color:var(--ink); padding:8px 12px; border-radius:8px; font-size:.95em; display:inline-block; width:fit-content}
@media (prefers-color-scheme:dark){.price-card .annual{color:var(--ink)}}
.incl{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.incl li{display:flex; gap:10px; align-items:flex-start}
.incl li svg{width:20px; height:20px; flex:none; margin-top:3px; stroke:var(--ok); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.price-side{display:grid; gap:24px}
.steps{list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:14px}
.steps li{display:grid; grid-template-columns:36px 1fr; gap:14px; align-items:start}
.steps li::before{counter-increment:s; content:counter(s); width:36px; height:36px; border-radius:50%; background:var(--pin-soft); color:var(--pin); font-family:var(--display); font-weight:700; display:flex; align-items:center; justify-content:center}
.steps li b{display:block}
.steps li span{color:var(--ink-2); font-size:.95em}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:0; border-top:1px solid var(--line); max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:18px 44px 18px 0; font-family:var(--display); font-weight:600; font-size:1.1rem; position:relative; line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:translateY(-70%) rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 0 20px; color:var(--ink-2); max-width:38rem}

/* ---------- Demo form ---------- */
.demo{background:var(--pin); color:var(--pin-ink)}
.demo .lede{color:var(--pin-ink); opacity:.85}
.demo-grid{display:grid; gap:32px}
@media (min-width:900px){.demo-grid{grid-template-columns:1fr 1fr; gap:64px; align-items:start}}
.demo ul{margin:20px 0 0; padding-left:20px; opacity:.9}
.form{background:var(--surface); color:var(--ink); border-radius:16px; padding:24px; display:grid; gap:16px}
.field{display:grid; gap:6px}
.field label{font-weight:700; font-size:.95em}
.field input{font:inherit; min-height:48px; padding:10px 14px; border:2px solid var(--line-strong); border-radius:8px; background:var(--bg); color:var(--ink); width:100%}
.field input:focus{border-color:var(--eau); outline:none; box-shadow:0 0 0 3px var(--eau-soft)}
.form .btn{width:100%}
.form small{color:var(--ink-2); font-size:.85em}
.confirm{display:none; background:var(--surface); color:var(--ink); border-radius:16px; padding:28px; gap:12px}
.confirm.show{display:grid}
.confirm svg{width:40px; height:40px; stroke:var(--ok); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.confirm h3{font-size:1.4rem}

/* ---------- Footer ---------- */
footer{padding:36px 0 48px; border-top:1px solid var(--line); color:var(--ink-2); font-size:.92em}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 32px; align-items:center}
.foot nav{display:flex; flex-wrap:wrap; gap:20px}
.foot nav a{color:var(--ink-2); text-decoration:none}
.foot nav a:hover{color:var(--pin)}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ================= v2 ================= */
:root{--ph-bg:#FFF1B8; --ph-ink:#14302A}
@media (prefers-color-scheme:dark){:root{--ph-bg:#4A3F12; --ph-ink:#F6EBC0}}
.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:16px; top:-60px; z-index:20; background:var(--pin); color:var(--pin-ink); padding:10px 16px; border-radius:8px; font-weight:700; text-decoration:none}
.skip:focus{top:10px}

/* utilitaires (remplacent les attributs style, CSP sans 'unsafe-inline') */
.note{color:var(--ink-2); font-size:.9em}
.mb-14{margin-bottom:14px}
.mt-14{margin-top:14px}
.pilot{padding:20px; background:var(--bg-2); border-radius:12px; color:var(--ink-2); font-size:.95em}
.pilot b{color:var(--ink)}
.brand-sm{font-size:1.1rem}
.brand-sm svg{width:24px; height:24px}
.foot-tag{margin-top:8px}
.form-error{display:none; color:var(--signal); font-weight:700; font-size:.95em}
.form-error.show{display:block}
.start-note{margin-top:16px; color:var(--ink-2); font-size:.95em}

/* Vidéo de démonstration */
.video-sec{padding-top:0}
.video-frame{position:relative; width:100%; aspect-ratio:16/9; background:var(--phone); border-radius:16px; overflow:hidden; border:1px solid var(--line)}
.video-frame video{display:block; width:100%; height:100%; object-fit:cover; background:var(--phone)}
.video-msg{display:none; margin-top:12px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-left:4px solid var(--eau); border-radius:10px; padding:10px 14px; font-size:.95em; max-width:48rem}
.video-frame.missing + .video-msg{display:block}
.video-cap{margin-top:12px; color:var(--ink-2); font-size:.92em; max-width:48rem}

/* Ce qui reste quand l'équipe change */
.keep{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
@media (min-width:1000px){.keep{grid-template-columns:repeat(3,1fr)}}
.keep-item{background:var(--surface); padding:22px 22px 26px; display:flex; flex-direction:column; gap:14px; min-width:0}
.keep-item h3{font-size:1.15rem}
.keep-item > p{color:var(--ink-2); font-size:.95em}
.keep-item .fine{font-size:.85em; color:var(--ink-2); border-top:1px solid var(--line); padding-top:10px; margin-top:auto}
.mock{background:var(--bg-2); border-radius:8px; padding:12px; font-size:.86em; line-height:1.4}
.reg{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.reg li{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 10px; display:grid; gap:4px}
.reg li .badge{justify-self:start; font-size:.8em; padding:2px 8px}
.reg li b{font-weight:700}
.reg li span.when{color:var(--ink-2)}
.mail{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 12px; display:grid; gap:6px}
.mail .hdr{color:var(--ink-2); overflow-wrap:anywhere}
.mail .hdr b{color:var(--ink)}
.mail .body{border-top:1px solid var(--line); padding-top:8px}
.mail .badge{justify-self:start; font-size:.8em; padding:2px 8px}
.card-life{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 12px; display:grid; gap:8px}
.card-life h4{font-family:var(--display); font-size:1.05em; font-weight:700}
.card-life .big{font-family:var(--display); font-weight:700; font-size:1.5em; color:var(--pin); line-height:1.1}
.card-life dl{margin:0; display:grid; gap:2px}
.card-life dt{color:var(--ink-2)}
.card-life dt{font-size:.9em}
.card-life dd{margin:0 0 6px; font-weight:500}
.card-life .badge{justify-self:start; font-size:.8em; padding:2px 8px}

/* Formulaire : robot, repli, mentions */
.hp{position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.form{position:relative}
.form .privacy{color:var(--ink-2); font-size:.85em; line-height:1.45}
.form .privacy a{color:var(--pin)}
.btn[disabled]{opacity:.7; cursor:progress}
.fallback{display:none; background:var(--surface); color:var(--ink); border-radius:16px; padding:24px; gap:14px; margin-top:16px; border:2px solid var(--signal)}
.fallback.show{display:grid}
.fallback h3{font-size:1.25rem}
.fallback p{color:var(--ink-2)}
.copy-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:space-between; background:var(--bg-2); border-radius:10px; padding:10px 12px}
.copy-row .val{font-weight:700; font-size:1.05em; overflow-wrap:anywhere; min-width:0}
.copy-row .val a{color:var(--ink); text-decoration:none}
.copy-row .btn{min-height:44px; padding:8px 14px; width:auto}
.copied{color:var(--ok); font-weight:700; font-size:.9em; min-height:1.4em}
.demo noscript p{margin-top:16px}

/* Pages légales */
.legal{padding:40px 0 64px}
.legal .doc{max-width:46rem}
.legal h1{font-size:clamp(1.8rem,5vw,2.6rem); margin-bottom:12px}
.legal h2{font-size:1.4rem; margin:40px 0 12px}
.legal h3{font-size:1.15rem; margin:28px 0 10px}
.legal p,.legal ul,.legal ol{margin:0 0 14px}
.legal ul,.legal ol{padding-left:22px}
.legal li{margin-bottom:6px}
.legal li > ul{margin:6px 0 0}
.legal hr{border:0; border-top:1px solid var(--line); margin:32px 0}
.legal em{color:var(--ink-2)}
.legal code{font-size:.9em}
.table-scroll{overflow-x:auto; margin:0 0 18px; border:1px solid var(--line); border-radius:10px; -webkit-overflow-scrolling:touch}
.table-scroll table{border-collapse:collapse; width:100%; min-width:560px; background:var(--surface); font-size:.92em}
.table-scroll th,.table-scroll td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line)}
.table-scroll thead th{background:var(--bg-2); font-weight:700}
.table-scroll tr:last-child td{border-bottom:none}
mark.ph{background:var(--ph-bg); color:var(--ph-ink); padding:0 .15em; border-radius:3px; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.legal .updated{color:var(--ink-2); font-size:.95em}
.back{display:inline-block; margin-bottom:20px; color:var(--pin); font-weight:700}

/* 404 */
.notfound{padding:72px 0 96px}
.notfound p{margin:16px 0 24px; color:var(--ink-2); max-width:36rem}

.brand .wm{display:inline; white-space:nowrap}
.brand .wm b{font-weight:700}
.brand .wm span{font-weight:500}
.alt .pilot{background:var(--surface); border:1px solid var(--line)}

/* ================= Guides (rubrique /guides/) ================= */
/* Lien « Guides » de l'en-tête : seulement quand la place est sûre, même en police de repli (toujours en pied de page) */
.nav ul li.nav-g{display:none}
@media (min-width:1140px){.nav ul li.nav-g{display:block}}
.guide{padding:28px 0 64px}
@media (min-width:900px){.guide{padding:40px 0 88px}}
.crumbs{display:flex; flex-wrap:wrap; gap:4px 8px; list-style:none; margin:0 0 20px; padding:0; color:var(--ink-2); font-size:.9em}
.crumbs li{display:flex; align-items:center; gap:8px; min-width:0}
.crumbs li + li::before{content:"/"; color:var(--line-strong)}
.crumbs a{color:var(--ink-2)}
.crumbs a:hover{color:var(--pin)}
.crumbs [aria-current]{color:var(--ink); overflow-wrap:anywhere}
.guide .doc{max-width:46rem}
.guide h1{font-size:clamp(1.9rem,5.4vw,3rem); margin-bottom:16px}
.guide .chapo{font-size:1.12em; color:var(--ink); margin:0 0 18px; max-width:42rem}
.guide .byline{display:flex; flex-wrap:wrap; gap:4px 18px; color:var(--ink-2); font-size:.9em; margin:0 0 28px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.guide h2{font-size:clamp(1.35rem,3.4vw,1.75rem); margin:44px 0 14px; scroll-margin-top:84px}
.guide h3{font-size:1.15rem; margin:28px 0 10px; scroll-margin-top:84px}
.guide p,.guide ul,.guide ol{margin:0 0 14px}
.guide ul,.guide ol{padding-left:22px}
.guide li{margin-bottom:7px}
.guide li > ul{margin:6px 0 0}
.guide strong{font-weight:700}
.guide .doc a{overflow-wrap:anywhere}
.toc{background:var(--bg-2); border-radius:12px; padding:16px 20px; margin:0 0 8px}
.toc p{font-weight:700; margin:0 0 8px}
.toc ol{margin:0; padding-left:20px; columns:1}
@media (min-width:720px){.toc ol{columns:2; column-gap:32px}}
.toc li{margin-bottom:5px; break-inside:avoid}
.toc a{color:var(--ink); text-decoration:none}
.toc a:hover{color:var(--pin); text-decoration:underline}
/* Liste à cocher (affichage seulement) */
.guide ul.check{list-style:none; padding-left:0}
.guide ul.check li{position:relative; padding-left:32px}
.guide ul.check li::before{content:""; position:absolute; left:0; top:.2em; width:18px; height:18px; border:2px solid var(--pin); border-radius:4px; background:var(--surface)}
.step-num{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--pin-soft); color:var(--pin); font-family:var(--display); font-weight:700; font-size:.95rem; margin-right:10px; vertical-align:middle; flex:none}
/* Encadrés */
.callout{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--eau); border-radius:10px; padding:14px 18px; margin:22px 0}
.callout > :last-child{margin-bottom:0}
.callout .lbl{display:block; font-family:var(--display); font-weight:700; color:var(--eau-text); margin-bottom:6px}
.callout.warn{border-left-color:var(--signal); background:var(--signal-soft)}
.callout.warn .lbl{color:var(--signal)}
.callout.ok{border-left-color:var(--ok)}
.callout.ok .lbl{color:var(--ok)}
.dl{display:grid; gap:14px; background:var(--sable); border-radius:14px; padding:20px; margin:28px 0}
@media (min-width:640px){.dl{grid-template-columns:1fr auto; align-items:center; gap:20px}}
.dl b{display:block; font-family:var(--display); font-size:1.15rem; margin-bottom:4px}
.dl p{margin:0; color:var(--ink); font-size:.95em}
.dl .btn{white-space:nowrap}
.tc-box{margin:48px 0 0; background:var(--pin); color:var(--pin-ink); border-radius:16px; padding:24px}
.tc-box h2{margin:0 0 10px; font-size:1.35rem; color:var(--pin-ink)}
.tc-box p{opacity:.92}
.tc-box .btn{background:var(--pin-ink); color:var(--pin); border-color:var(--pin-ink); margin-top:6px}
.tc-box a:not(.btn){color:var(--pin-ink)}
.sources{font-size:.92em; color:var(--ink-2)}
.sources li{overflow-wrap:anywhere}
.sources .t{color:var(--ink); font-weight:500}
.tag{display:inline-block; font-size:.78em; font-weight:700; line-height:1.3; padding:2px 8px; border-radius:999px; white-space:nowrap; vertical-align:baseline}
.tag-txt{background:var(--ok-soft); color:var(--ok)}
.tag-ver{background:var(--signal-soft); color:var(--signal)}
.tag-bp{background:var(--bg-2); color:var(--ink-2); border:1px solid var(--line)}
.guide .crumbs,.guide .guide-list,.guide .related ul{padding-left:0}
.guide .crumbs li{margin-bottom:0}
.guide .table-scroll table{min-width:640px}
.guide .table-scroll td small{display:block; color:var(--ink-2); font-size:.9em; margin-top:2px}
.related{margin-top:40px; padding-top:20px; border-top:1px solid var(--line)}
.related h2{margin-top:0; font-size:1.2rem}
.related ul{list-style:none; padding:0; display:grid; gap:8px}
.related a{font-weight:700}
/* Index des guides */
.guides-head{max-width:44rem; margin-bottom:32px}
.guides-head h1{margin-bottom:14px}
.guides-head .lede{font-size:1.08em}
.guide-list{display:grid; gap:16px; list-style:none; margin:0; padding:0}
@media (min-width:760px){.guide-list{grid-template-columns:1fr 1fr}}
.guide-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:10px; min-width:0}
.guide-card .kicker{font-size:.82em; font-weight:700; color:var(--eau-text); text-transform:uppercase; letter-spacing:.04em}
.guide-card h2{font-size:1.25rem; margin:0}
.guide-card h2 a{color:var(--ink); text-decoration:none}
.guide-card h2 a:hover{color:var(--pin); text-decoration:underline}
.guide-card p{color:var(--ink-2); font-size:.95em}
.guide-card .more{margin-top:auto; font-weight:700}
@media print{
  header,footer,.skip,.tc-box,.dl .btn,.crumbs{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  .guide{padding:0}
  .guide .doc a{color:#000}
}

/* Fonction annoncée, pas encore livrée : même code que l'état « planifié » */
.soon{display:inline-block; vertical-align:middle; margin-left:6px; font-family:var(--body, inherit); font-size:.72rem; font-weight:700; line-height:1.2; padding:3px 9px; border-radius:999px; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line); white-space:nowrap}