/* ============================================================
   Arthur Bourdin — Visibilité locale & IA
   Direction artistique : surfaces de recherche (Google / Maps / IA)
   Typographie alignée sur les devis : Space Grotesk + Inter + JetBrains Mono
   ============================================================ */

:root{
  --paper:#FCFCFD;
  --surface:#F4F5F8;
  --surface-2:#E9EBF0;
  --ink:#0E1017;
  --ink-2:#4A5162;
  --ink-3:#5F6675;
  --line:#E3E5EB;
  --line-strong:#C8CCD6;
  --brand:#4338CA;
  --brand-hover:#3730A3;
  --brand-ink:#FFFFFF;
  --brand-soft:#EEF0FE;
  --brand-line:#C7CBFA;
  --band:#4338CA;
  --band-ink:#FFFFFF;
  --band-btn:#FFFFFF;
  --band-btn-ink:#4338CA;
  --star:#A16207;
  --ok:#067647;
  --ok-soft:#E7F6EE;
  --warn:#B42318;
  --warn-soft:#FEF0EE;
  --map-bg:#EFEDE8;
  --map-road:#FFFFFF;
  --map-park:#C9E4CA;
  --map-water:#A9CDEC;
  --shadow-1:0 1px 2px rgba(14,16,23,.05), 0 1px 3px rgba(14,16,23,.04);
  --shadow-2:0 1px 3px rgba(14,16,23,.06), 0 10px 28px -10px rgba(14,16,23,.12);
  --shadow-3:0 2px 8px rgba(14,16,23,.06), 0 32px 64px -32px rgba(14,16,23,.28);
  --r:14px;
  --r-sm:10px;
  --pill:999px;
  --maxw:1180px;
  --pad:clamp(20px, 5vw, 56px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0B0C10;
    --surface:#13151C;
    --surface-2:#1B1E27;
    --ink:#EDEFF5;
    --ink-2:#A6ADBD;
    --ink-3:#8B92A3;
    --line:#23262F;
    --line-strong:#363A46;
    --brand:#8B85FF;
    --brand-hover:#A5A0FF;
    --brand-ink:#101024;
    --brand-soft:#1C1B3A;
    --brand-line:#322F63;
    --band:#1E1B4B;
    --band-ink:#EDEFF5;
    --band-btn:#8B85FF;
    --band-btn-ink:#101024;
    --star:#F0B429;
    --ok:#4ADE80;
    --ok-soft:#0F2418;
    --warn:#FB7185;
    --warn-soft:#2B1218;
    --map-bg:#1F2229;
    --map-road:#343A44;
    --map-park:#1E2B22;
    --map-water:#17263C;
    --shadow-1:0 1px 2px rgba(0,0,0,.55);
    --shadow-2:0 2px 8px rgba(0,0,0,.5);
    --shadow-3:0 4px 14px rgba(0,0,0,.55), 0 30px 60px -28px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --paper:#0B0C10;
  --surface:#13151C;
  --surface-2:#1B1E27;
  --ink:#EDEFF5;
  --ink-2:#A6ADBD;
  --ink-3:#8B92A3;
  --line:#23262F;
  --line-strong:#363A46;
  --brand:#8B85FF;
  --brand-hover:#A5A0FF;
  --brand-ink:#101024;
  --brand-soft:#1C1B3A;
  --brand-line:#322F63;
  --band:#1E1B4B;
  --band-ink:#EDEFF5;
  --band-btn:#8B85FF;
  --band-btn-ink:#101024;
  --star:#F0B429;
  --ok:#4ADE80;
  --ok-soft:#0F2418;
  --warn:#FB7185;
  --warn-soft:#2B1218;
  --map-bg:#1F2229;
  --map-road:#343A44;
  --map-park:#1E2B22;
  --map-water:#17263C;
  --shadow-1:0 1px 2px rgba(0,0,0,.55);
  --shadow-2:0 2px 8px rgba(0,0,0,.5);
  --shadow-3:0 4px 14px rgba(0,0,0,.55), 0 30px 60px -28px rgba(0,0,0,.85);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  accent-color:var(--brand);
}

/* lien d'évitement clavier */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brand); color:var(--brand-ink);
  padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
  font-weight:600; text-decoration:none; font-size:.92rem;
}
.skip:focus{left:0}

h1,h2,h3,h4{
  font-family:"Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-.026em;
  text-wrap:balance;
  margin:0;
  line-height:1.05;
}
h1{font-size:clamp(2.5rem, 6vw, 4.6rem); letter-spacing:-.04em}
h2{font-size:clamp(1.9rem, 3.9vw, 2.95rem); letter-spacing:-.032em}
h3{font-size:1.2rem; letter-spacing:-.018em}
p{margin:0; text-wrap:pretty}
a{color:inherit}

/* les ancres ne passent plus sous l'en-tête collant */
section[id], main[id], form[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
::selection{background:var(--brand-soft); color:var(--ink)}

.mono{
  font-family:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}

section{position:relative}
.band{border-top:1px solid var(--line)}
.tinted{background:var(--surface)}

.sec-head{
  display:grid; gap:16px;
  padding:clamp(56px,7vw,96px) 0 clamp(28px,3.4vw,44px);
}
.eyebrow{display:flex; align-items:center; gap:10px; color:var(--brand)}
.eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:currentColor; flex:none}
.sec-head p.lede{color:var(--ink-2); max-width:58ch; font-size:1.05rem}
.hl{color:var(--brand)}
.em{color:var(--brand)}

/* ---------- buttons ----------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:"Inter", sans-serif; font-weight:600; font-size:.95rem;
  padding:13px 22px; border-radius:var(--pill);
  border:1px solid transparent; text-decoration:none; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.btn-primary{background:var(--brand); color:var(--brand-ink); border-color:var(--brand); box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--brand-hover); border-color:var(--brand-hover); box-shadow:var(--shadow-2)}
.btn-ghost{background:transparent; color:var(--brand); border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--brand-soft); border-color:var(--brand-line)}
.btn-sm{padding:9px 17px; font-size:.87rem}
.btn:active{transform:translateY(1px)}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}

:where(a,button,summary,input,textarea,select):focus-visible{
  outline:2px solid var(--brand); outline-offset:3px; border-radius:4px;
}

/* ---------- header ------------------------------------------ */

header.site{
  position:sticky; top:0; z-index:60;
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter: blur(2px)){ header.site{background:var(--paper)} }

.nav{display:flex; align-items:center; gap:22px; height:66px}
.brand{
  display:flex; align-items:center; gap:9px; text-decoration:none; margin-right:auto;
  font-family:"Space Grotesk", sans-serif; font-weight:700; letter-spacing:-.03em; font-size:1.04rem;
}
.brand .pin-ico{width:16px; height:16px; flex:none; color:var(--brand)}
.brand small{
  font-family:"JetBrains Mono", monospace; font-weight:400;
  font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
  display:none;
}
@media(min-width:560px){ .brand small{display:inline} }
.nav-links{display:none; gap:20px; align-items:center}
.nav-links a{
  text-decoration:none; color:var(--ink-2); font-size:.92rem; font-weight:500;
  padding:6px 0; border-bottom:2px solid transparent; transition:color .16s ease, border-color .16s ease;
}
.nav-links a:hover{color:var(--ink); border-color:var(--brand)}
.nav-tel{display:none; text-decoration:none; color:var(--ink-2); font-size:.9rem; font-weight:500}
.nav-tel:hover{color:var(--ink)}
@media(min-width:1020px){ .nav-links{display:flex} .nav-tel{display:inline} }
@media(min-width:1020px) and (max-width:1179px){ .nav-links{gap:14px} .nav-links a{font-size:.86rem} }

/* ---------- hero -------------------------------------------- */

.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(54% 48% at 80% 10%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 72%),
    radial-gradient(42% 42% at 6% 2%, color-mix(in srgb, var(--star) 7%, transparent), transparent 74%);
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; gap:clamp(38px,5vw,56px);
  padding:clamp(36px,5vw,64px) 0 clamp(52px,6vw,80px);
  grid-template-columns:minmax(0,1fr); align-items:start;
}
@media(min-width:1060px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:52px; align-items:center}
}

.slots{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--brand-line); background:var(--brand-soft);
  color:var(--brand); padding:7px 14px; border-radius:var(--pill); width:max-content;
}
.pulse{width:6px; height:6px; border-radius:50%; background:var(--brand); position:relative; flex:none}
.pulse::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--brand); opacity:.5; animation:ping 2.4s ease-out infinite;
}
@keyframes ping{0%{transform:scale(.5); opacity:.7} 100%{transform:scale(1.7); opacity:0}}

.hero-copy{display:flex; flex-direction:column; gap:24px; align-items:flex-start}
.hero-copy h1 .line2{display:block; color:var(--ink-3)}
.hero-copy .sub{font-size:1.08rem; color:var(--ink-2); max-width:52ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}

.hero-facts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px; width:100%;
}
.hero-facts div{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:13px 15px; display:flex; flex-direction:column; gap:1px;
}
.hero-facts b{
  font-family:"Space Grotesk",sans-serif; font-size:1.15rem; font-weight:700;
  letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.hero-facts span{font-size:.79rem; color:var(--ink-3); line-height:1.4}
@media(min-width:600px){ .hero-facts{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ---------- simulateur de recherche locale ------------------ */

.sim{display:flex; flex-direction:column; gap:12px}
.sim-bar{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.sim-bar .mono{color:var(--ink-3); margin-right:auto}
.tab{
  font-family:"Inter", sans-serif; font-size:.83rem; font-weight:500;
  padding:7px 14px; border:1px solid var(--line); background:var(--paper);
  color:var(--ink-2); border-radius:var(--pill); cursor:pointer; transition:all .16s ease;
}
.tab:hover{color:var(--ink); border-color:var(--line-strong)}
.tab[aria-selected="true"]{background:var(--brand-soft); color:var(--brand); border-color:var(--brand-line); font-weight:600}

.seg{
  display:inline-flex; padding:3px; gap:3px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--pill);
}
.seg button{
  font-family:"Inter",sans-serif; font-size:.8rem; font-weight:600;
  padding:7px 15px; border:0; border-radius:var(--pill); cursor:pointer;
  background:transparent; color:var(--ink-2); transition:all .18s ease;
}
.seg button[aria-selected="true"]{background:var(--paper); color:var(--ink); box-shadow:var(--shadow-1)}

.device{
  border:1px solid var(--line-strong); border-radius:18px; background:var(--paper);
  box-shadow:var(--shadow-3); overflow:hidden;
}
.device-top{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line)}
.searchbar{
  flex:1; min-width:0; height:40px; border-radius:var(--pill);
  border:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; gap:10px; padding:0 15px;
  font-size:.86rem; color:var(--ink-2); overflow:hidden; white-space:nowrap;
}
.searchbar svg{flex:none; color:var(--ink-3)}
.searchbar em{font-style:normal; overflow:hidden; text-overflow:ellipsis}

.map{height:96px; position:relative; overflow:hidden; background:var(--map-bg); border-bottom:1px solid var(--line)}
.map::before{
  content:""; position:absolute; inset:-20%;
  background:
    repeating-linear-gradient(37deg, transparent 0 34px, var(--map-road) 34px 40px),
    repeating-linear-gradient(-49deg, transparent 0 52px, var(--map-road) 52px 57px);
  opacity:.85;
}
.map::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(28% 60% at 12% 78%, var(--map-park) 0 60%, transparent 61%),
    radial-gradient(34% 44% at 88% 22%, var(--map-water) 0 58%, transparent 59%);
}
.pin{
  position:absolute; z-index:3; width:13px; height:13px;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--ink-3); border:1.5px solid var(--paper);
}
.pin.you{
  width:20px; height:20px; background:var(--brand); border-color:var(--paper);
  box-shadow:0 0 0 4px var(--brand-soft);
  z-index:4; transition:all .45s cubic-bezier(.2,.7,.25,1);
}
.pin.faint{opacity:.45}

.results{display:flex; flex-direction:column}
.res{
  display:flex; gap:12px; padding:13px 15px; border-bottom:1px solid var(--line);
  align-items:flex-start; transition:background .3s ease;
}
.res:last-child{border-bottom:0}
.res .rank{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--surface-2); color:var(--ink-3);
  display:grid; place-items:center; font-size:.68rem; font-weight:600;
  font-family:"JetBrains Mono",monospace; margin-top:2px;
}
.res.you{background:var(--brand-soft)}
.res.you .rank{background:var(--brand); color:var(--brand-ink)}
.res-body{min-width:0; display:flex; flex-direction:column; gap:3px; flex:1}
.res-name{font-size:.94rem; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.res.you .res-name{color:var(--brand)}
.tag-you{
  font-family:"JetBrains Mono",monospace; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--brand); color:var(--brand-ink); padding:2px 7px; border-radius:var(--pill); font-weight:500;
}
.rating{display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--ink-2); flex-wrap:wrap}
.rating b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.stars{position:relative; display:inline-block; flex:none; line-height:1; font-size:.82rem; letter-spacing:1px; color:var(--line-strong)}
.stars i{position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--star); font-style:normal}
.res-meta{font-size:.79rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.open{color:var(--ok); font-weight:500}
.closed{color:var(--warn); font-weight:500}
.res-acts{display:flex; gap:6px; margin-top:5px; flex-wrap:wrap}
.chip{
  font-size:.72rem; font-weight:500; padding:4px 11px; border-radius:var(--pill);
  border:1px solid var(--line); color:var(--ink-2); background:var(--paper);
}
.chip.solid{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}

.buried{
  display:flex; gap:11px; align-items:center;
  padding:12px 15px; background:var(--warn-soft); border-top:1px dashed var(--line-strong);
}
.buried .rank{
  flex:none; width:auto; min-width:34px; height:22px; padding:0 7px; border-radius:var(--pill);
  background:var(--warn); color:#fff; display:grid; place-items:center;
  font-size:.66rem; font-weight:600; font-family:"JetBrains Mono",monospace;
}
.buried div{min-width:0}
.buried b{font-size:.88rem; font-weight:600; display:block}
.buried span{font-size:.77rem; color:var(--ink-2); display:block; line-height:1.4}

/* réponse IA dans le device */
.ai{padding:16px 16px 18px; display:flex; flex-direction:column; gap:13px}
.ai-q{
  align-self:flex-end; max-width:86%; background:var(--surface-2);
  border:1px solid var(--line); padding:9px 14px; border-radius:14px 14px 4px 14px; font-size:.9rem;
}
.ai-a{display:flex; flex-direction:column; gap:9px; font-size:.9rem; color:var(--ink-2)}
.ai-who{
  font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:7px;
}
.ai-who::before{content:""; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--brand), var(--star)); flex:none}
.ai-a ol{margin:0; padding-left:19px; display:flex; flex-direction:column; gap:7px}
.ai-a li strong{color:var(--ink)}
.ai-a li.you{
  background:var(--brand-soft); border:1px solid var(--brand-line);
  margin-left:-10px; padding:9px 11px; border-radius:var(--r-sm); list-style-position:inside;
}
.ai-a li.you strong{color:var(--brand)}
.ai-cite{font-size:.78rem; color:var(--ink-3); border-top:1px solid var(--line); padding-top:9px}

.sim-el{opacity:0; transform:translateY(7px)}
.sim.play .sim-el{animation:drop .45s cubic-bezier(.2,.7,.25,1) forwards}
@keyframes drop{to{opacity:1; transform:none}}

.sim-note{display:flex; gap:10px; align-items:baseline; color:var(--ink-3); font-size:.79rem; line-height:1.5}
.sim-note strong{color:var(--ink-2); font-weight:600}
.sim-note .mono{color:var(--star); flex:none}

/* ---------- surfaces ---------------------------------------- */

.surfaces{display:grid; gap:clamp(14px,1.6vw,20px); margin-bottom:clamp(56px,7vw,96px)}
@media(min-width:820px){ .surfaces{grid-template-columns:repeat(3,minmax(0,1fr))} }
.surface-card{
  border:1px solid var(--line); background:var(--paper); border-radius:var(--r);
  padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column; gap:10px;
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.surface-card:hover{box-shadow:var(--shadow-2); transform:translateY(-2px); border-color:var(--line-strong)}
.surface-card .ic{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); margin-bottom:4px;
}
.surface-card .ic svg{width:20px; height:20px}
.surface-card .num{
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.7rem;
  letter-spacing:-.03em; color:var(--brand); line-height:1;
}
.surface-card h3{font-size:1.08rem}
.surface-card p{color:var(--ink-2); font-size:.94rem}
.surface-card .src{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
  font-size:.76rem; color:var(--ink-3);
}

/* ---------- piliers ----------------------------------------- */

.pillars{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  margin-bottom:clamp(56px,7vw,96px);
}
@media(min-width:760px){ .pillars{grid-template-columns:1fr 1fr} }
.pillar{background:var(--paper); padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:12px; transition:background .2s ease}
.pillar:hover{background:var(--surface)}
.pillar .lbl{display:flex; align-items:center; gap:9px; color:var(--brand)}
.pillar .lbl svg{width:17px; height:17px; flex:none}
.pillar h3{font-size:1.1rem}
.pillar ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.pillar li{display:flex; gap:10px; font-size:.93rem; color:var(--ink-2); line-height:1.5}
.pillar li::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--brand); margin-top:9px}
.pillar .assoc{
  margin-top:auto; padding-top:12px; border-top:1px dashed var(--line-strong);
  font-size:.8rem; color:var(--ink-3);
}

/* ---------- méthode ----------------------------------------- */

.steps{display:grid; gap:clamp(14px,1.6vw,20px); margin-bottom:clamp(56px,7vw,96px)}
@media(min-width:860px){ .steps{grid-template-columns:repeat(3,minmax(0,1fr))} }
.step{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; gap:11px;
  position:relative; transition:box-shadow .22s ease, border-color .22s ease;
}
.step:hover{box-shadow:var(--shadow-2); border-color:var(--line-strong)}
.step .num{
  font-family:"JetBrains Mono", monospace; font-size:.7rem; color:var(--brand);
  letter-spacing:.1em; display:flex; align-items:center; gap:8px;
}
.step .num::after{content:""; flex:1; height:1px; background:var(--line)}
.step p{color:var(--ink-2); font-size:.95rem}
.step .when{
  margin-top:auto; padding-top:12px; border-top:1px dashed var(--line-strong);
  color:var(--ink-3); font-size:.79rem; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.step .when b{color:var(--ink-2); font-weight:600}

/* ---------- tarifs ------------------------------------------ */

.plans{display:grid; gap:clamp(16px,1.8vw,22px); align-items:start; margin-bottom:clamp(20px,2.4vw,28px)}
@media(min-width:900px){ .plans{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(min-width:760px){ .plans.two{grid-template-columns:repeat(2,minmax(0,1fr))} }
.plans-sub{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:clamp(30px,3.6vw,46px) 0 clamp(18px,2.2vw,26px);
  font-size:1.06rem;
}
.plans-sub::after{content:""; flex:1; min-width:40px; height:1px; background:var(--line)}
.plans-sub em{
  font-family:"Inter",sans-serif; font-style:normal; font-weight:400;
  font-size:.87rem; color:var(--ink-3); letter-spacing:0;
}
.plan{
  border:1px solid var(--line); background:var(--paper); border-radius:var(--r);
  padding:clamp(22px,2.5vw,30px); display:flex; flex-direction:column; gap:18px; position:relative;
}
.plan.top{border-color:var(--brand); border-width:2px; box-shadow:var(--shadow-2)}
@media(min-width:900px){ .plan.top{margin-top:-16px; padding-block:clamp(30px,3.2vw,40px)} }
.plan .flag{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:var(--brand); color:var(--brand-ink); padding:5px 14px; border-radius:var(--pill);
  white-space:nowrap;
}
.plan-head{display:flex; flex-direction:column; gap:7px}
.plan-head h3{font-size:1.16rem}
.plan-head p{font-size:.89rem; color:var(--ink-2)}
.price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding-top:4px}
.price b{
  font-family:"Space Grotesk", sans-serif; font-weight:700; font-size:2.5rem;
  letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums;
}
.price span{font-size:.87rem; color:var(--ink-3)}
.price .then{width:100%; font-size:.8rem; color:var(--brand); font-family:"JetBrains Mono",monospace}
.plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.plan li{display:flex; gap:10px; font-size:.92rem; color:var(--ink-2); line-height:1.45}
.plan li::before{
  content:"✓"; color:var(--brand); flex:none; font-weight:700; font-size:.85rem; margin-top:2px;
}
.plan .btn{margin-top:auto}
.plan-foot{font-size:.77rem; color:var(--ink-3); text-align:center}


.hero-alt{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  column-gap:14px; max-width:52ch; margin-top:2px;
  padding:13px 16px; border:1px dashed var(--line-strong); border-radius:var(--r);
  background:var(--surface); text-decoration:none; color:var(--ink-2);
  transition:border-color .16s ease, background .16s ease, transform .12s ease;
}
.hero-alt:hover{border-color:var(--brand); border-style:solid; background:var(--brand-soft)}
.hero-alt:active{transform:translateY(1px)}
.hero-alt b{grid-column:1; grid-row:1; color:var(--ink); font-size:.9rem; margin-bottom:3px}
.hero-alt>span:first-of-type{grid-column:1; grid-row:2; font-size:.82rem; line-height:1.45}
.hero-alt .arw{
  grid-column:2; grid-row:1 / span 2; align-self:center;
  color:var(--brand); font-size:1.15rem; transition:transform .18s ease;
}
.hero-alt:hover .arw{transform:translateX(3px)}

/* ---------- repli générique « voir le détail » ---------------- */
/* aucun marqueur natif sur les replis, quel que soit le moteur */
.plus>summary, .form-more>summary{list-style:none}
.plus>summary::marker, .form-more>summary::marker{content:""}
.form-more>summary::-webkit-details-marker{display:none}


/* Un <details> fermé reste dans le HTML : Google et les moteurs IA
   lisent son contenu. On allège l'œil sans rien retirer au SEO. */

.plus{margin-top:6px}
.plus>summary{
  list-style:none; cursor:pointer; width:max-content;
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Inter", sans-serif; font-size:.85rem; font-weight:600;
  color:var(--brand); padding:4px 0; transition:opacity .16s ease;
}
.plus>summary::-webkit-details-marker{display:none}
.plus>summary::after{
  content:"+"; font-family:"JetBrains Mono", monospace; font-size:1rem; line-height:1;
}
.plus[open]>summary::after{content:"\2013"}
.plus>summary:hover{opacity:.72}
.plus>summary:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}
.plus[open]>summary{margin-bottom:12px}


/* ---------- couleurs Google dans la simulation ---------------- */
/* Cantonnées à l'illustration du héros, où elles portent du sens :
   vert = ouvert, rouge = fermé, ambre = note, bleu = action.
   Aucun logo ni interface Google n'est reproduit, et la mention
   « simulation d'illustration » reste sous le bloc. Les nuances
   viennent de la palette Google mais sont assombries pour rester
   lisibles : #1967D2 (5,2:1) et #E37400 (3,0:1) sur fond clair. */

.sim .stars i{color:#E37400}
.sim .open{color:#188038}
.sim .closed{color:#D93025}
.sim .chip:not(.solid){color:#1967D2; border-color:#D2E3FC}
.sim .pin:not(.you){background:#EA4335}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sim .stars i{color:#FDD663}
  :root:not([data-theme="light"]) .sim .open{color:#81C995}
  :root:not([data-theme="light"]) .sim .closed{color:#F28B82}
  :root:not([data-theme="light"]) .sim .chip:not(.solid){color:#8AB4F8; border-color:#2C3B52}
}
:root[data-theme="dark"] .sim .stars i{color:#FDD663}
:root[data-theme="dark"] .sim .open{color:#81C995}
:root[data-theme="dark"] .sim .closed{color:#F28B82}
:root[data-theme="dark"] .sim .chip:not(.solid){color:#8AB4F8; border-color:#2C3B52}

/* ---------- relance de conversion en cours de page ----------- */
/* Entre le héros et les tarifs, la page n'offrait aucun bouton sur
   plus de 1 100 mots : un visiteur convaincu au milieu n'avait rien
   à cliquer. Ces bandes légères rattrapent la décision là où elle
   se prend, sans alourdir la lecture. */

.jump{
  display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; justify-content:space-between;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
  margin-top:clamp(30px,3.6vw,44px);
}
.jump p{font-size:.96rem; color:var(--ink-2); max-width:58ch; margin:0}
.jump b{color:var(--ink)}
.jump .btn{flex:none}
@media(max-width:620px){ .jump{flex-direction:column; align-items:flex-start} .jump .btn{width:100%} }

/* ---------- offre site internet + aperçu de maquette ---------- */

.offer-split{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:clamp(20px,2.4vw,30px); display:grid; gap:clamp(22px,2.6vw,34px);
  align-items:center; margin-bottom:clamp(20px,2.4vw,26px);
}
@media(min-width:900px){ .offer-split{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)} }
.offer-copy{min-width:0}
.offer-copy h3{font-size:1.24rem; margin-bottom:8px}
.offer-copy>p{color:var(--ink-2); font-size:.94rem; max-width:60ch}
.addon-flag{
  display:inline-block; background:var(--brand); color:var(--brand-ink);
  padding:5px 13px; border-radius:var(--pill); margin-bottom:12px;
  font-size:.72rem; letter-spacing:.02em;
}
.addon-list{list-style:none; margin:15px 0 18px; padding:0; display:flex; flex-direction:column; gap:9px}
.addon-list li{position:relative; padding-left:21px; font-size:.91rem; color:var(--ink-2); line-height:1.45}
.addon-list li::before{
  content:"\2713"; position:absolute; left:0; top:0;
  color:var(--brand); font-weight:700; font-size:.84rem;
}
.addon-note{font-size:.82rem; color:var(--ink-2); line-height:1.5; max-width:66ch; margin-top:16px}
.offer-buy{display:flex; flex-wrap:wrap; gap:16px 22px; align-items:center}
.offer-buy .price{padding-top:0; flex:1 1 210px}
.offer-buy .price span{max-width:30ch}

/* --- aperçu : un faux site dans un cadre de navigateur ------- */

.offer-demo{display:flex; flex-direction:column; gap:12px; min-width:0}
.mk-dots{display:flex; gap:5px; flex:none}
.mk-dots i{width:9px; height:9px; border-radius:50%; background:var(--line-strong); display:block}
.mk-url{
  flex:1; min-width:0; height:28px; display:flex; align-items:center; padding:0 12px;
  border-radius:var(--pill); background:var(--surface); color:var(--ink-2);
  font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mk{display:flex; flex-direction:column}
.mk-nav{
  display:flex; align-items:center; gap:9px; padding:11px 14px;
  border-bottom:1px solid var(--line); font-size:.72rem;
}
.mk-nav b{font-family:"Space Grotesk",sans-serif; letter-spacing:-.02em; margin-right:auto; font-size:.8rem}
.mk-nav u{width:26px; height:5px; border-radius:3px; background:var(--line-strong); opacity:.7}
.mk-nav em{
  font-style:normal; font-family:"JetBrains Mono",monospace; color:var(--brand);
  font-weight:600; flex:none;
}
.mk-hero{
  padding:clamp(18px,2.4vw,26px) 14px clamp(16px,2vw,22px);
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--brand-soft) 0%, transparent 70%),
    var(--paper);
}
.mk-hero h4{
  font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:-.035em;
  font-size:clamp(1.02rem,2.1vw,1.28rem); line-height:1.18; color:var(--ink);
}
.mk-hero p{font-size:.74rem; color:var(--ink-2); max-width:34ch}
.mk-btn{
  background:var(--brand); color:var(--brand-ink); border-radius:var(--pill);
  padding:8px 17px; font-size:.73rem; font-weight:600; margin-top:3px;
}
.mk-chips{
  display:flex; flex-wrap:wrap; gap:7px; justify-content:center;
  padding:0 14px 15px; background:var(--paper);
}
.mk-chips span{
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:7px 12px; font-size:.72rem; color:var(--ink-2); background:var(--surface);
}
.mk-foot{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-top:1px solid var(--line);
  font-size:.73rem; color:var(--ink-2); background:var(--surface);
}
.mk-stars{color:var(--star); letter-spacing:.06em; flex:none}

/* --- aperçu du rapport d'audit -------------------------------- */

.rep{
  border:1px solid var(--line-strong); border-radius:var(--r); background:var(--paper);
  box-shadow:var(--shadow-3); overflow:hidden;
  display:flex; flex-direction:column;
}
.rep-top{
  display:flex; flex-direction:column; gap:3px;
  padding:13px 16px; border-bottom:1px solid var(--line); background:var(--surface);
}
.rep-top .mono{font-size:.68rem; color:var(--ink-2); letter-spacing:.04em}
.rep-top b{font-family:"Space Grotesk",sans-serif; font-size:.86rem; letter-spacing:-.02em}

.rep-score{
  display:grid; grid-template-columns:auto 1fr; gap:4px 15px; align-items:center;
  padding:16px; border-bottom:1px solid var(--line);
}
.rep-ring{width:74px; height:74px; grid-row:span 2; transform:rotate(-90deg)}
.rep-ring circle{fill:none; stroke-width:7; stroke-linecap:round}
.rep-bg{stroke:var(--line)}
.rep-fg{stroke:var(--brand); stroke-dasharray:220; stroke-dashoffset:145}
.rep-num{display:flex; align-items:baseline; gap:4px; grid-column:2}
.rep-num b{
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.9rem;
  letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums;
}
.rep-num span{font-size:.74rem; color:var(--ink-3)}
.rep-verdict{grid-column:2; display:flex; flex-direction:column; gap:2px}
.rep-verdict .mono{font-size:.68rem; color:var(--brand); font-weight:600}
.rep-verdict p{font-size:.73rem; color:var(--ink-2); line-height:1.4}

.rep-sec{padding:14px 16px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.rep-sec:last-child{border-bottom:0}
.rep-h{font-size:.66rem; color:var(--ink-3); letter-spacing:.05em; text-transform:uppercase}
.rep-prio{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.rep-prio li{display:flex; gap:9px; align-items:flex-start; font-size:.76rem; color:var(--ink-2); line-height:1.4}
.rep-prio i{
  flex:none; width:16px; height:16px; border-radius:50%; background:var(--brand-soft);
  color:var(--brand); font-style:normal; font-weight:700; font-size:.62rem;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.rep-tags{display:flex; flex-wrap:wrap; gap:6px}
.rep-tags span{
  border-radius:var(--pill); padding:4px 10px; font-size:.7rem; font-weight:600;
  border:1px solid var(--line); color:var(--ink-2); background:var(--surface);
}
.rep-tags .ok{color:var(--brand); border-color:var(--brand-line); background:var(--brand-soft)}
.rep-tags .ko{color:var(--ink-2)}
.rep-bars{display:flex; flex-direction:column; gap:7px}
.rep-bar{display:grid; grid-template-columns:74px 1fr 26px; gap:9px; align-items:center; font-size:.71rem; color:var(--ink-3)}
.rep-bar u{
  height:7px; border-radius:4px; background:var(--line);
  text-decoration:none; display:block; overflow:hidden;
}
.rep-bar u i{display:block; height:100%; border-radius:4px; background:var(--ink-3); opacity:.45}
.rep-bar.you span{color:var(--ink); font-weight:600}
.rep-bar.you u i{background:var(--brand); opacity:1}
.rep-bar em{font-style:normal; font-family:"JetBrains Mono",monospace; text-align:right}
.rep-bar.you em{color:var(--brand); font-weight:600}

/* ---------- choix « ce qui vous intéresse » ------------------- */

.pick{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; min-width:0}
.pick>legend{padding:0; font-size:.8rem; font-weight:600; color:var(--ink-2)}
.pick-row{display:flex; flex-wrap:wrap; gap:8px}
.pick-row label{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--pill);
  padding:8px 14px; font-size:.85rem; color:var(--ink-2);
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.pick-row label:hover{border-color:var(--line-strong); color:var(--ink)}
.pick-row input{accent-color:var(--brand); margin:0; flex:none}
.pick-row input:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
.pick-row label:has(input:checked){
  border-color:var(--brand); background:var(--brand-soft); color:var(--ink); font-weight:600;
}

.price-note{
  display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center;
  border-top:1px dashed var(--line-strong); padding-top:20px;
  margin-bottom:clamp(56px,7vw,96px); color:var(--ink-3); font-size:.84rem;
}
.price-note b{color:var(--ink-2); font-weight:600}

/* ---------- promesses / non-promesses ----------------------- */

.promise{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:clamp(56px,7vw,96px)}
@media(min-width:820px){ .promise{grid-template-columns:1fr 1fr} }
.pcol{background:var(--paper); padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:18px}
.pcol h3{display:flex; align-items:center; gap:10px; font-size:1.05rem}
.pcol ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.pcol li{display:flex; gap:11px; font-size:.95rem; color:var(--ink-2); line-height:1.5}
.pcol li b{color:var(--ink); font-weight:600}
.mark{flex:none; width:20px; height:20px; border-radius:50%; margin-top:2px; display:grid; place-items:center; font-size:.65rem; font-weight:700}
.mark.no{background:var(--warn-soft); color:var(--warn)}
.mark.yes{background:var(--ok-soft); color:var(--ok)}

/* ---------- GEO / IA ---------------------------------------- */

.geo-grid{display:grid; gap:clamp(28px,3.6vw,52px); align-items:start; padding-bottom:clamp(56px,7vw,96px)}
@media(min-width:940px){ .geo-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)} }
.geo-copy{display:flex; flex-direction:column; gap:16px}
.geo-copy p{color:var(--ink-2)}
.levers{display:grid; gap:12px; margin-top:4px}
@media(min-width:620px){ .levers{grid-template-columns:1fr 1fr} }
.lever{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:15px 17px; display:flex; flex-direction:column; gap:4px;
}
.lever b{font-size:.91rem; font-weight:600}
.lever span{font-size:.82rem; color:var(--ink-3); line-height:1.45}

.report{
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  overflow:hidden; box-shadow:var(--shadow-1);
}
.report-top{
  padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface-2);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.report-top b{font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:-.02em; font-size:1rem}
.report-top span{font-size:.78rem; color:var(--ink-3); margin-left:auto}
.report ul{list-style:none; margin:0; padding:0}
.report li{
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 18px; border-bottom:1px solid var(--line); font-size:.9rem; color:var(--ink-2);
}
.report li:last-child{border-bottom:0}
.report li b{color:var(--ink); font-weight:600; display:block; font-size:.92rem}
.report li .dot{flex:none; width:8px; height:8px; border-radius:50%; background:var(--brand); margin-top:6px}
.report-foot{padding:13px 18px; background:var(--surface); font-size:.79rem; color:var(--ink-3); border-top:1px solid var(--line)}

/* ---------- à propos ---------------------------------------- */

.about{display:grid; gap:clamp(26px,3.4vw,48px); align-items:center; padding-bottom:clamp(56px,7vw,96px)}
@media(min-width:820px){ .about{grid-template-columns:250px minmax(0,1fr)} }
.idcard{
  position:relative; overflow:hidden; aspect-ratio:1;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--map-bg); box-shadow:var(--shadow-2);
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:5px; padding:22px;
}
.idcard::before{
  content:""; position:absolute; inset:-20%;
  background:
    repeating-linear-gradient(37deg, transparent 0 30px, var(--map-road) 30px 35px),
    repeating-linear-gradient(-49deg, transparent 0 46px, var(--map-road) 46px 50px);
  opacity:.8;
}
.idcard > *{position:relative; z-index:2}
.idcard-mark{
  position:absolute; top:20px; left:20px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--brand); color:var(--brand-ink);
  box-shadow:0 0 0 5px var(--brand-soft);
}
.idcard-mark svg{width:20px; height:20px}
.idcard-name{
  font-family:"Space Grotesk",sans-serif; font-weight:700;
  font-size:1.7rem; line-height:1.02; letter-spacing:-.04em; color:var(--ink);
}
.idcard-role{color:var(--ink-2)}
.about-copy{display:flex; flex-direction:column; gap:15px}
.about-copy p{color:var(--ink-2)}
.about-facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.about-facts span{
  font-size:.79rem; color:var(--ink-2); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--pill); padding:6px 13px;
}
.sig{font-family:"Space Grotesk",sans-serif; font-weight:500; font-size:1.05rem; color:var(--ink-2); margin-top:2px}

/* ---------- FAQ --------------------------------------------- */

.faq{display:flex; flex-direction:column; border-top:1px solid var(--line); margin-bottom:clamp(56px,7vw,96px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 42px 20px 0; position:relative;
  font-weight:600; font-size:1.01rem; letter-spacing:-.012em; transition:color .16s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand)}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%;
  width:10px; height:10px; margin-top:-6px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .22s ease, border-color .16s ease;
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px); border-color:var(--brand)}
.faq details .ans{padding:0 clamp(20px,8vw,120px) 22px 0; color:var(--ink-2); font-size:.96rem}

/* ---------- CTA final + footer ------------------------------ */

.final{background:var(--band); color:var(--band-ink); border-top:1px solid var(--line)}
.final .wrap{padding-block:clamp(52px,6.4vw,88px); display:flex; flex-direction:column; gap:20px; align-items:flex-start}
.final .contact-grid{
  display:grid; align-items:start; gap:clamp(30px,4vw,54px);
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:920px){ .final .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,.94fr)} }
.contact-copy{display:flex; flex-direction:column; gap:18px; align-items:flex-start}

.contact-form{
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px);
  box-shadow:var(--shadow-3);
  display:flex; flex-direction:column; gap:14px;
  width:100%;
}
.form-head{display:flex; flex-direction:column; gap:5px; margin-bottom:2px}
.form-head h3{font-size:1.12rem}
.form-head p{font-size:.87rem; color:var(--ink-2)}
.f-row{display:grid; gap:14px}
@media(min-width:520px){ .f-row{grid-template-columns:1fr 1fr} }
.field{display:flex; flex-direction:column; gap:6px; margin:0}
.field label{font-size:.8rem; font-weight:600; color:var(--ink-2)}
.field label span{font-weight:400; color:var(--ink-3)}
.field input, .field textarea{
  font-family:"Inter", sans-serif; font-size:.94rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:11px 13px; width:100%;
  transition:border-color .16s ease, background .16s ease;
}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-3)}
.field input:hover, .field textarea:hover{border-color:var(--line-strong)}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--brand); background:var(--paper);
  box-shadow:0 0 0 3px var(--brand-soft);
}
.field textarea{min-height:82px; resize:vertical; line-height:1.5}
/* ligne d'aide sous entreprise + ville : dit pourquoi on les demande */
.field-help b{color:var(--ink-2); font-weight:600}
.field-help{
  font-size:.76rem; color:var(--ink-3); line-height:1.45;
  margin:-8px 0 0; padding-left:1px;
}

/* champ facultatif replié : le formulaire paraît court, rien n'est perdu */
.form-more{margin:-2px 0 0}
.form-more>summary{
  list-style:none; cursor:pointer; width:max-content;
  display:inline-flex; align-items:center; gap:7px;
  font-size:.82rem; font-weight:600; color:var(--ink-2);
  padding:2px 0; transition:color .16s ease;
}
.form-more>summary::-webkit-details-marker{display:none}
.form-more>summary::before{
  content:"+"; font-family:"JetBrains Mono", monospace; font-size:1rem;
  line-height:1; color:var(--brand);
}
.form-more[open]>summary::before{content:"\2013"}
.form-more>summary:hover{color:var(--ink)}
.form-more>summary:focus-visible{
  outline:2px solid var(--brand); outline-offset:3px; border-radius:4px;
}
.form-more .field{margin-top:11px}

/* ---------- recherche de fiche Google ------------------------ */

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ac-host{position:relative}

.ac-pop{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  list-style:none; margin:0; padding:5px;
  background:var(--paper); border:1px solid var(--line-strong);
  border-radius:var(--r); box-shadow:var(--shadow-3);
  max-height:290px; overflow-y:auto; overscroll-behavior:contain;
}
.ac-item{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  padding:9px 10px; border-radius:var(--r-sm); transition:background .12s ease;
}
.ac-item:hover, .ac-item.on{background:var(--brand-soft)}
.ac-item svg{width:15px; height:15px; flex:none; margin-top:2px; fill:var(--brand)}
.ac-item span{display:flex; flex-direction:column; gap:1px; min-width:0}
.ac-item b{font-size:.88rem; color:var(--ink); font-weight:600}
.ac-item em{font-style:normal; font-size:.77rem; color:var(--ink-2)}

/* mode manuel : marche sans clé API, bascule tout seul si on en pose une */
.fg-man{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:-4px}
.fg-btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:"Inter", sans-serif; font-size:.82rem; font-weight:600; color:var(--brand);
  background:var(--brand-soft); border:1px solid var(--brand-line);
  border-radius:var(--pill); padding:8px 15px;
  transition:background .16s ease, border-color .16s ease;
}
.fg-btn:hover{background:var(--paper); border-color:var(--brand)}
.fg-btn svg{width:14px; height:14px; flex:none}
.fg-txt{
  background:none; border:0; cursor:pointer; padding:2px 0;
  font-family:"Inter", sans-serif; font-size:.8rem; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:3px;
}
.fg-txt:hover{color:var(--ink)}
.fg-zone{width:100%; margin-top:2px}
.fg-etat{font-size:.77rem; line-height:1.45; color:var(--ink-2)}
.fg-etat.ok{color:var(--brand); font-weight:600}
.fg-etat.att{color:var(--warn)}

.ac-carte{
  display:flex; gap:11px; align-items:flex-start;
  padding:12px 14px; border:1px solid var(--brand-line); border-radius:var(--r-sm);
  background:var(--brand-soft);
}
.ac-carte>div{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.ac-carte b{font-size:.9rem; color:var(--ink)}
.ac-carte span{font-size:.78rem; color:var(--ink-2); line-height:1.4}
.ac-note i{font-style:normal; color:var(--star); letter-spacing:.04em}
.ac-ok{
  flex:none; width:20px; height:20px; border-radius:50%;
  background:var(--brand); color:var(--brand-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; margin-top:1px;
}
.ac-chg{
  flex:none; background:none; border:0; cursor:pointer; padding:2px 0;
  font-family:"Inter", sans-serif; font-size:.76rem; font-weight:600;
  color:var(--brand); text-decoration:underline; text-underline-offset:3px;
}
.ac-chg:hover{text-decoration:none}

/* levée de risque, juste avant le bouton : les 3 objections classiques */
.trust{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px 16px;
  font-size:.78rem; color:var(--ink-2);
}
.trust li{display:flex; align-items:center; gap:6px}
.trust li::before{content:"\2713"; color:var(--brand); font-weight:700; font-size:.8rem}

.contact-form .btn{width:100%; margin-top:4px}
.form-note{font-size:.76rem; color:var(--ink-3); line-height:1.5}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.final h2{color:var(--band-ink); max-width:20ch}
.contact-copy p{max-width:54ch; opacity:.9}
.final .eyebrow{color:var(--band-ink); opacity:.75}
.final-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:4px}
.btn-invert{background:var(--band-btn); color:var(--band-btn-ink); border-color:var(--band-btn)}
.btn-invert:hover{background:transparent; color:var(--band-ink); border-color:currentColor}
.contact-copy .final-mail{font-size:.87rem; opacity:.82; margin-top:2px}
.final-mail a{font-weight:600; text-underline-offset:3px}
.final-mail a:hover{text-decoration:none}

footer.site{background:var(--paper); border-top:1px solid var(--line)}
footer.site .wrap{padding-block:34px; display:flex; flex-wrap:wrap; gap:18px 40px; align-items:baseline}
footer.site .f-brand{margin-right:auto; display:flex; flex-direction:column; gap:4px}
footer.site .f-brand b{font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:-.03em}
footer.site .f-brand span{font-size:.82rem; color:var(--ink-3)}
footer.site nav{display:flex; flex-wrap:wrap; gap:6px 18px}
footer.site a{color:var(--ink-2); text-decoration:none; font-size:.86rem}
footer.site a:hover{color:var(--brand)}
footer.site .legal{width:100%; color:var(--ink-3); font-size:.77rem; border-top:1px solid var(--line); padding-top:16px; line-height:1.6}

/* ---------- scroll reveal ----------------------------------- */

.rv{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.25,1)}
.rv.in{opacity:1; transform:none}

/* animations pilotées par le défilement, sans JavaScript, quand le navigateur sait faire */
@keyframes reveal{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rv{
      animation:reveal both linear;
      animation-timeline:view();
      animation-range:entry 4% cover 20%;
      transition:none;
    }
  }
}

/* ---------- barre d'action mobile ------------------------- */

.mobar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; gap:10px;
  padding:10px var(--pad); padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(16px) saturate(1.2);
  border-top:1px solid var(--line);
  transform:translateY(115%);
  transition:transform .3s cubic-bezier(.2,.7,.25,1);
}
.mobar.show{transform:none}
.mobar .btn{flex:1; justify-content:center}
@media(min-width:900px){ .mobar{display:none} }
@media(max-width:899px){ footer.site .wrap{padding-bottom:88px} }

/* le fondu ne s'applique qu'au cadre du simulateur, pas à toute la page */
@supports (view-transition-name: none){
  .device{view-transition-name:simframe}
  ::view-transition-old(root), ::view-transition-new(root){animation:none}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .rv{opacity:1; transform:none}
  .sim-el{opacity:1; transform:none}
}

/* ============================================================
   ▸ AJOUTS — test de visibilité, pages métier, preuves, parrainage
   ============================================================ */

/* ---------- mini-audit interactif --------------------------- */

.quiz{
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--paper); box-shadow:var(--shadow-2);
  padding:clamp(22px,3vw,38px);
  margin-bottom:clamp(56px,7vw,96px);
  min-height:330px; display:flex; flex-direction:column; justify-content:center;
}

/* état sans JavaScript : la liste reste lisible et indexable */
.quiz-fallback{display:flex; flex-direction:column; gap:16px}
.quiz-fallback > p{color:var(--ink-2); font-size:.97rem; max-width:62ch}
.quiz-fallback ol{
  margin:0; padding:0; list-style:none; display:grid; gap:9px;
  counter-reset:qf;
}
@media(min-width:760px){ .quiz-fallback ol{grid-template-columns:1fr 1fr} }
.quiz-fallback li{
  counter-increment:qf; display:flex; gap:11px; align-items:flex-start;
  font-size:.92rem; color:var(--ink-2); line-height:1.45;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:12px 14px;
}
.quiz-fallback li::before{
  content:counter(qf); flex:none;
  width:21px; height:21px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand);
  font-family:"JetBrains Mono",monospace; font-size:.66rem; font-weight:500;
  display:grid; place-items:center; margin-top:1px;
}
.quiz-fallback .btn{align-self:flex-start; margin-top:4px}

/* déroulé question par question */
.quiz-card{display:flex; flex-direction:column; gap:16px}
.quiz-prog{display:flex; flex-direction:column; gap:8px}
.quiz-prog .mono{color:var(--ink-3)}
.quiz-prog .bar{height:4px; border-radius:var(--pill); background:var(--surface-2); overflow:hidden}
.quiz-prog .bar i{
  display:block; height:100%; border-radius:var(--pill);
  background:var(--brand); transition:width .4s cubic-bezier(.2,.7,.25,1);
}
.quiz-q{font-size:clamp(1.24rem,2.6vw,1.7rem); letter-spacing:-.026em; max-width:26ch}
.quiz-h{color:var(--ink-3); font-size:.9rem; max-width:60ch; margin-top:-6px}
.quiz-btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:2px}
.qbtn{
  font-family:"Inter",sans-serif; font-size:.95rem; font-weight:600;
  padding:13px 26px; border-radius:var(--pill); cursor:pointer;
  border:1px solid var(--line-strong); background:var(--paper); color:var(--ink);
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
.qbtn:hover{border-color:var(--brand); background:var(--brand-soft); color:var(--brand)}
.qbtn:active{transform:translateY(1px)}
.qbtn.idk{color:var(--ink-3); font-weight:500}
.quiz-back{
  align-self:flex-start; background:none; border:0; padding:4px 0; cursor:pointer;
  color:var(--ink-3); font-family:"Inter",sans-serif; font-size:.83rem;
}
.quiz-back:hover{color:var(--brand)}

/* résultat */
.quiz-res{
  display:grid; gap:clamp(20px,3vw,34px); align-items:center;
  padding-bottom:clamp(20px,2.6vw,26px); border-bottom:1px solid var(--line);
}
@media(min-width:680px){ .quiz-res{grid-template-columns:auto minmax(0,1fr)} }
.quiz-score{position:relative; width:132px; height:132px; justify-self:center; flex:none}
.quiz-score svg{width:100%; height:100%; transform:rotate(-90deg)}
.quiz-score circle{fill:none; stroke-width:9; stroke-linecap:round}
.quiz-score .ring-bg{stroke:var(--surface-2)}
.quiz-score .ring-fg{stroke:var(--brand); transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.25,1)}
.quiz-num{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0; line-height:1;
}
.quiz-num b{
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:2.7rem;
  letter-spacing:-.05em; font-variant-numeric:tabular-nums; color:var(--ink);
}
.quiz-num span{font-family:"JetBrains Mono",monospace; font-size:.68rem; color:var(--ink-3); margin-top:3px}
.quiz-verdict{display:flex; flex-direction:column; gap:11px}
.quiz-verdict p{color:var(--ink-2); font-size:1rem; max-width:56ch}
.quiz-band{
  display:inline-flex; width:max-content; align-items:center; gap:8px;
  padding:6px 14px; border-radius:var(--pill);
  background:var(--brand-soft); color:var(--brand); border:1px solid var(--brand-line);
  font-size:.68rem;
}
.quiz-band::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.quiz-res.bad   .ring-fg{stroke:var(--warn)}
.quiz-res.bad   .quiz-band{background:var(--warn-soft); color:var(--warn); border-color:var(--warn)}
.quiz-res.warn  .ring-fg{stroke:var(--star)}
.quiz-res.warn  .quiz-band{background:color-mix(in srgb, var(--star) 14%, transparent); color:var(--star); border-color:var(--star)}
.quiz-res.good  .ring-fg{stroke:var(--ok)}
.quiz-res.good  .quiz-band{background:var(--ok-soft); color:var(--ok); border-color:var(--ok)}
.quiz-idk{
  font-size:.88rem !important; color:var(--ink-2) !important;
  background:var(--surface); border-left:2px solid var(--brand);
  padding:11px 14px; border-radius:0 var(--r-sm) var(--r-sm) 0;
}

.quiz-prio{padding:clamp(20px,2.6vw,26px) 0; border-bottom:1px solid var(--line)}
.quiz-prio h4{
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.02rem;
  letter-spacing:-.02em; margin:0 0 14px;
}
.quiz-prio ol{list-style:none; margin:0; padding:0; display:grid; gap:11px; counter-reset:pr}
@media(min-width:900px){ .quiz-prio ol{grid-template-columns:repeat(3,minmax(0,1fr))} }
.quiz-prio li{
  counter-increment:pr; position:relative;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:15px 17px 15px 17px; display:flex; flex-direction:column; gap:5px;
}
.quiz-prio li::before{
  content:"0" counter(pr);
  font-family:"JetBrains Mono",monospace; font-size:.64rem; letter-spacing:.1em;
  color:var(--brand); font-weight:500;
}
.quiz-prio li b{font-size:.95rem; font-weight:600; letter-spacing:-.012em}
.quiz-prio li span{font-size:.85rem; color:var(--ink-3); line-height:1.5}
.quiz-none{color:var(--ink-2); font-size:.95rem; max-width:62ch}

.quiz-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding-top:clamp(20px,2.6vw,26px)}
.quiz-foot{width:100%; font-size:.79rem; color:var(--ink-3); line-height:1.5; max-width:64ch}

/* rappel du score dans le formulaire */
.form-score{
  display:flex; flex-direction:column; gap:2px;
  background:var(--brand-soft); border:1px solid var(--brand-line);
  border-radius:var(--r-sm); padding:11px 14px;
}
.form-score b{font-size:.9rem; color:var(--brand)}
.form-score span{font-size:.78rem; color:var(--ink-2)}

/* ---------- grille des pages métier ------------------------- */

.metiers{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-bottom:clamp(56px,7vw,96px)}
@media(min-width:620px){ .metiers{grid-template-columns:1fr 1fr} }
@media(min-width:980px){ .metiers{grid-template-columns:repeat(3,1fr)} }
.metier-card{
  background:var(--paper); padding:clamp(20px,2.4vw,26px);
  display:flex; flex-direction:column; gap:8px; text-decoration:none;
  transition:background .2s ease;
}
.metier-card:hover{background:var(--surface)}
.metier-card .ic{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); margin-bottom:4px;
}
.metier-card .ic svg{width:18px; height:18px}
.metier-card b{
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.05rem;
  letter-spacing:-.02em; display:flex; align-items:center; gap:8px;
}
.metier-card .arw{color:var(--brand); transition:transform .18s ease}
.metier-card:hover .arw{transform:translateX(3px)}
.metier-card span.d{font-size:.88rem; color:var(--ink-2); line-height:1.5}

/* ---------- preuves clients --------------------------------- */

.quotes{display:grid; gap:clamp(14px,1.6vw,20px); margin-bottom:clamp(56px,7vw,96px)}
@media(min-width:820px){ .quotes{grid-template-columns:repeat(3,minmax(0,1fr))} }
.quote{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column; gap:14px;
}
.quote .stars{font-size:1rem}
.quote blockquote{margin:0; font-size:.97rem; color:var(--ink); line-height:1.6}
.quote figcaption{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px;
}
.quote figcaption b{font-size:.9rem; font-weight:600}
.quote figcaption span{font-size:.79rem; color:var(--ink-3)}

/* ---------- parrainage -------------------------------------- */

.refer{
  border:2px solid var(--brand); border-radius:var(--r); background:var(--brand-soft);
  padding:clamp(22px,2.8vw,34px); display:grid; gap:18px; align-items:center;
  margin-bottom:clamp(56px,7vw,96px);
}
@media(min-width:860px){ .refer{grid-template-columns:minmax(0,1fr) auto} }
.refer .eyebrow{margin-bottom:10px}
.refer h3{font-size:clamp(1.2rem,2.4vw,1.55rem); margin-bottom:9px}
.refer p{color:var(--ink-2); font-size:.95rem; max-width:64ch}
.refer .cond{font-size:.79rem; color:var(--ink-3); margin-top:9px}
.refer-big{
  font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:-.04em;
  font-size:clamp(2.1rem,5vw,2.9rem); line-height:1; color:var(--brand);
  display:flex; flex-direction:column; gap:5px; white-space:nowrap;
}
.refer-big small{
  font-family:"JetBrains Mono",monospace; font-weight:400; font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------- pages intérieures : fil d'Ariane + chapeau ------ */

.crumbs{font-size:.8rem; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.crumbs a{color:var(--ink-3); text-decoration:none}
.crumbs a:hover{color:var(--brand)}
.crumbs span[aria-current]{color:var(--ink-2)}
.crumbs li{list-style:none}
.crumbs ol{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; align-items:center}
.crumbs li + li::before{content:"›"; margin-right:8px; color:var(--line-strong)}

.page-head{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.page-head::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52% 46% at 84% 4%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 72%);
}
.page-head .wrap{position:relative; z-index:2; padding-block:clamp(24px,3vw,34px) clamp(44px,5.4vw,72px);
  display:flex; flex-direction:column; gap:20px; align-items:flex-start}
.page-head h1{font-size:clamp(2.1rem,5vw,3.7rem); max-width:19ch}
.page-head .sub{font-size:1.06rem; color:var(--ink-2); max-width:60ch}
.page-head .hero-cta{margin-top:2px}

/* rangée de repères chiffrés, réutilisable */
.facts-row{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; width:100%; margin-top:6px;
}
@media(min-width:760px){ .facts-row{grid-template-columns:repeat(4,minmax(0,1fr))} }
.facts-row div{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:13px 15px; display:flex; flex-direction:column; gap:1px;
}
.facts-row b{
  font-family:"Space Grotesk",sans-serif; font-size:1.12rem; font-weight:700;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.facts-row span{font-size:.79rem; color:var(--ink-3); line-height:1.4}

/* ---------- corps de texte long (guides, pages légales) ----- */

.prose{max-width:74ch; display:flex; flex-direction:column; gap:17px;
  padding-bottom:clamp(56px,7vw,96px)}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.85rem); margin-top:clamp(20px,2.6vw,30px)}
.prose h3{font-size:1.08rem; margin-top:10px}
.prose p, .prose li{color:var(--ink-2); font-size:1rem; line-height:1.65}
.prose ul, .prose ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px}
.prose strong{color:var(--ink)}
.prose a{color:var(--brand); text-underline-offset:3px}
.prose table{border-collapse:collapse; width:100%; font-size:.93rem}
.prose th, .prose td{border:1px solid var(--line); padding:10px 13px; text-align:left; vertical-align:top}
.prose th{background:var(--surface); font-weight:600; color:var(--ink)}
.prose td{color:var(--ink-2)}
.prose .updated{font-size:.8rem; color:var(--ink-3); font-family:"JetBrains Mono",monospace}

/* ---------- erreurs qui coûtent des appels ------------------ */

.mistakes{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-bottom:clamp(56px,7vw,96px)}
@media(min-width:820px){ .mistakes{grid-template-columns:1fr 1fr} }
.mistake{background:var(--paper); padding:clamp(20px,2.4vw,28px);
  display:flex; flex-direction:column; gap:9px; transition:background .2s ease}
.mistake:hover{background:var(--surface)}
.mistake .no{
  width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--warn-soft); color:var(--warn); font-weight:700; font-size:.75rem;
  font-family:"JetBrains Mono",monospace;
}
.mistake h3{font-size:1.04rem}
.mistake p{color:var(--ink-2); font-size:.93rem}
.mistake .fixit{
  margin-top:auto; padding-top:12px; border-top:1px dashed var(--line-strong);
  font-size:.83rem; color:var(--ink-2); display:flex; gap:9px; align-items:flex-start;
}
.mistake .fixit b{color:var(--ok); font-weight:600; flex:none}

/* ---------- requêtes réelles -------------------------------- */

.queries{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(56px,7vw,96px)}
.queries li{
  list-style:none; display:flex; align-items:center; gap:9px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--pill);
  padding:9px 16px 9px 13px; font-size:.88rem; color:var(--ink-2);
}
.queries li svg{width:13px; height:13px; color:var(--ink-3); flex:none}
.queries li b{color:var(--ink); font-weight:600}

/* ---------- champ à compléter par l'éditeur du site --------- */
.tofill{
  display:inline-block; background:var(--warn-soft); color:var(--warn);
  border:1px dashed var(--warn); border-radius:var(--r-sm);
  padding:2px 9px; font-family:"JetBrains Mono",monospace; font-size:.82rem; font-weight:500;
}
.notice{
  border-left:3px solid var(--brand); background:var(--surface);
  padding:14px 18px; border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.notice p{margin:0}