:root{
    --ink:#1A1A1A;
    --accent:#2DEC0B;
    --muted:#565656;
    --subtle:#949494;
    --border:#ECECEC;
    --grid-dot:#EAEAEA;
    --paper:#FFFFFF;
    --maxw:1140px;
    --font-sans:'Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    --font-display:'Space Grotesk',var(--font-sans);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:96px}
  body{
    margin:0;
    color:var(--ink);
    font-family:var(--font-sans);
    font-size:17px;
    line-height:1.62;
    letter-spacing:-0.012em;
    -webkit-font-smoothing:antialiased;
    background:var(--paper);
    background-image:radial-gradient(var(--grid-dot) 1px, transparent 1px);
    background-size:28px 28px;
    background-position:-1px -1px;
    background-attachment:fixed;
    overflow-x:hidden;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-0.035em;line-height:1.03;margin:0;font-weight:700}
  h1{font-size:clamp(38px,5.2vw,62px);line-height:1.06}
  h2{font-size:clamp(32px,4.6vw,50px)}
  h3{font-size:clamp(24px,3vw,33px)}
  p{margin:0 0 18px}
  a{color:inherit}

  /* surligneur fanzine */
  .marque{
    color:var(--ink);
    padding:0.04em 0.2em;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C20 4.5 45 5.5 72 4 C85 3.2 96 4.5 98 6 L99.5 20 C97 23 80 23.5 60 24 C38 24.5 12 25 3 22.5 Z' fill='%232DEC0B'/%3E%3C/svg%3E");
    background-size:100% 100%;
    background-repeat:no-repeat;
  }
  .eyebrow{
    display:inline-block;font-family:var(--font-sans);font-size:13.5px;font-weight:600;
    padding:0.06em 0.22em;margin-bottom:18px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C20 4.5 45 5.5 72 4 C85 3.2 96 4.5 98 6 L99.5 20 C97 23 80 23.5 60 24 C38 24.5 12 25 3 22.5 Z' fill='%232DEC0B'/%3E%3C/svg%3E");
    background-size:100% 100%;background-repeat:no-repeat;
  }

  /* boutons */
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-sans);font-weight:600;font-size:16px;text-decoration:none;
    border:2px solid var(--ink);border-radius:3px;padding:13px 22px;
    background:var(--accent);color:var(--ink);
    box-shadow:4px 4px 0 var(--ink);cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
  .btn.ghost{background:var(--paper);box-shadow:4px 4px 0 var(--accent)}
  .btn.ghost:hover{box-shadow:2px 2px 0 var(--accent)}

  /* ── NAV flottante ── */
  nav.site{
    position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:60;
    display:flex;align-items:center;gap:2px;
    padding:5px 6px 5px 14px;max-width:calc(100vw - 24px);
    background:var(--paper);border:2px solid var(--ink);border-radius:3px;
    box-shadow:4px 4px 0 var(--accent);
  }
  nav.site .mark{display:flex;align-items:center;gap:9px;padding:6px 8px 6px 0;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-0.03em;white-space:nowrap}
  nav.site .sep{width:2px;align-self:stretch;background:var(--border);margin:4px 8px}
  nav.site a.lnk{padding:9px 13px;font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;border-radius:3px;white-space:nowrap}
  nav.site a.lnk:hover{color:var(--ink);background:#F6F6F6}
  nav.site a.cta{
    padding:9px 16px;margin-left:6px;font-size:13.5px;font-weight:600;text-decoration:none;
    background:var(--accent);color:var(--ink);border:1.5px solid var(--ink);border-radius:3px;white-space:nowrap;
  }
  nav.site a.langsw{
    padding:8px 11px;margin-left:6px;font-size:13px;font-weight:600;
    color:var(--ink);text-decoration:none;
    border:1.5px solid var(--ink);border-radius:3px;
  }
  nav.site a.langsw:hover{background:var(--accent)}
  .burger{display:none;background:var(--paper);border:1.5px solid var(--ink);border-radius:3px;padding:8px 9px;cursor:pointer;color:var(--ink);margin-left:4px}
  .sheet{display:none;position:fixed;top:74px;left:12px;right:12px;z-index:59;background:var(--paper);border:2px solid var(--ink);border-radius:3px;box-shadow:5px 5px 0 var(--accent);padding:8px}
  .sheet a{display:block;padding:12px 14px;text-decoration:none;font-weight:500;border-bottom:1px solid var(--border)}
  .sheet a:last-child{border-bottom:0}
  .sheet.open{display:block}

  /* ── HERO ── */
  header.hero{padding:132px 0 40px}
  .hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
  .hero .lede{font-size:20px;color:var(--muted);max-width:34em;margin-top:24px}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
  .hero-meta{margin-top:26px;font-size:14.5px;color:var(--subtle)}
  .illu svg{width:100%;height:auto;display:block}

  /* Seule animation de la page : la structure du héros qui s'empile,
     puis la couche du haut qui dérive lentement (doctrine fanzine). */
  .stack .lay{transform-box:fill-box;transform-origin:center;animation:pose .72s cubic-bezier(.2,.75,.3,1) both}
  .stack .lay-socle{animation-delay:.05s}
  .stack .lay-3{animation-delay:.2s}
  .stack .lay-2{animation-delay:.35s}
  .stack .lay-1{animation:pose .72s cubic-bezier(.2,.75,.3,1) .5s both, derive 5s ease-in-out 1.4s infinite alternate}
  .stack .axe,.stack .sol,.stack .traits{animation:apparait .6s ease .9s both}
  @keyframes pose{
    from{transform:translateY(-52px);opacity:0}
    to{transform:translateY(0);opacity:1}
  }
  @keyframes derive{
    from{transform:translateY(0) rotate(0deg)}
    to{transform:translateY(-5px) rotate(2deg)}
  }
  @keyframes apparait{from{opacity:0}to{opacity:1}}

  /* Illustrations des modules : la dalle se monte quand elle entre à l'écran.
     Les états cachés ne s'appliquent que si le script tourne (.js). */
  .js .dalle .ap,.js .dalle .pl,.js .dalle .gh,.js .dalle .tk{opacity:0}
  .js .dalle .ap,.js .dalle .pl{transform-box:fill-box;transform-origin:center}
  .js .dalle .gl{stroke-dasharray:1;stroke-dashoffset:1}
  .js .mod.vu .dalle .gh{animation:gh-in .5s ease .04s forwards}
  .js .mod.vu .dalle .ap{animation:ap-in .62s cubic-bezier(.2,.75,.3,1) .16s forwards}
  .js .mod.vu .dalle .pl{animation:pl-in .62s cubic-bezier(.2,.75,.3,1) .16s forwards}
  .js .mod.vu .dalle .tk{animation:tk-in .4s ease .52s forwards}
  .js .mod.vu .dalle .gl{animation:trace .85s ease .42s forwards}
  @keyframes gh-in{from{opacity:0}to{opacity:.22}}
  @keyframes ap-in{from{opacity:0;transform:translateY(-24px)}to{opacity:.85;transform:none}}
  @keyframes pl-in{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
  @keyframes tk-in{from{opacity:0}to{opacity:.4}}
  @keyframes trace{to{stroke-dashoffset:0}}

  @media (prefers-reduced-motion:reduce){
    .stack .lay,.stack .lay-1,.stack .axe,.stack .sol,.stack .traits{animation:none;opacity:1;transform:none}
    .js .dalle .ap{opacity:.85}
    .js .dalle .pl{opacity:1}
    .js .dalle .gh{opacity:.22}
    .js .dalle .tk{opacity:.4}
    .js .dalle .gl{stroke-dasharray:none;stroke-dashoffset:0}
    .js .mod.vu .dalle *{animation:none}
  }

  /* règle graduée entre sections */
  .rule{border:0;height:0;border-top:1.5px solid var(--ink);margin:0}
  .ticks{display:block;width:100%;height:9px}
  .ticks path{stroke:var(--ink);stroke-width:1.5;opacity:.35}

  /* ── CONSTAT ── */
  .constat{padding:52px 0 10px}
  .constat .case{
    border:1.5px solid var(--ink);border-radius:3px;background:var(--paper);
    padding:30px 32px;max-width:800px;
  }
  .constat .case p:last-child{margin-bottom:0}

  /* ── COMMENT ÇA MARCHE ── */
  .comment{padding:74px 0 10px;border-top:1.5px solid var(--ink);margin-top:56px}
  .etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
  .etape{
    border:1.5px solid var(--ink);border-radius:3px;background:var(--paper);
    padding:26px 26px 24px;transition:box-shadow .14s ease;
  }
  .etape:hover{box-shadow:5px 5px 0 var(--accent)}
  .etape svg{display:block;margin-bottom:16px}
  .etape .n{
    display:inline-block;font-family:var(--font-display);font-weight:700;font-size:14px;
    padding:1px 7px;border:1.5px solid var(--ink);border-radius:3px;background:var(--accent);
  }
  .etape h3{font-size:22px;margin:12px 0 10px}
  .etape p{color:var(--muted);font-size:15.5px;margin:0}

  /* ── MODULES ── */
  .modules{padding:56px 0 0}
  .mod-head{max-width:680px;margin-bottom:12px}
  .mod-head p{color:var(--muted)}
  .mod{
    display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center;
    padding:56px 0;border-top:1.5px solid var(--border);
  }
  .mod:nth-child(even){grid-template-columns:1.18fr .82fr}
  .mod:nth-child(even) .illu{order:2}
  .mod:nth-child(even) .txt{order:1}
  .mod .num{
    display:inline-block;font-family:var(--font-display);font-weight:700;
    font-size:15px;letter-spacing:0;margin-bottom:14px;
    padding:2px 8px;border:1.5px solid var(--ink);border-radius:3px;background:var(--accent);
  }
  .mod h3{margin-bottom:14px}
  .mod p{color:var(--muted);max-width:44em}
  .mod .out{
    margin-top:22px;padding:14px 16px;border:1.5px solid var(--ink);border-radius:3px;
    font-size:15.5px;background:var(--paper);
  }
  .mod .out b{font-family:var(--font-display);font-weight:700}
  .mod .out span{color:var(--muted)}

  /* ── ASSEMBLAGE ── */
  .assemblage{padding:74px 0 20px;border-top:1.5px solid var(--ink);margin-top:16px}
  .asm-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
  .asm-grid h2{margin-bottom:20px}
  .asm-grid > div > p{color:var(--muted)}
  .chaine{list-style:none;margin:26px 0 0;padding:0;counter-reset:c}
  .chaine li{
    display:flex;gap:14px;align-items:baseline;
    padding:13px 0;border-bottom:1px solid var(--border);font-size:16px;
  }
  .chaine li:last-child{border-bottom:0}
  .chaine .k{
    font-family:var(--font-display);font-weight:700;font-size:13px;
    padding:1px 6px;border:1.5px solid var(--ink);border-radius:3px;flex:0 0 auto;
  }
  .chaine li:nth-child(odd) .k{background:var(--accent)}
  .chaine b{font-weight:600}
  .chaine span{color:var(--muted)}

  /* ── GSC ── */
  .gsc{padding:74px 0 30px;border-top:1.5px solid var(--ink);margin-top:56px}
  .gsc-head{max-width:740px;margin-bottom:38px}
  .gsc-head p{color:var(--muted)}
  .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
  .shot{border:1.5px solid var(--ink);border-radius:3px;background:var(--paper);padding:9px 9px 0;transition:box-shadow .14s ease}
  .shot:hover{box-shadow:5px 5px 0 var(--accent)}
  .shot img{display:block;width:100%;height:auto}
  .shot figcaption{padding:13px 8px 15px;font-size:14.5px;line-height:1.5;color:var(--muted)}
  .shot figcaption b{color:var(--ink);font-weight:600}

  /* ── COMPRIS ── */
  .inclus{padding:74px 0 20px;border-top:1.5px solid var(--ink);margin-top:56px}
  .inc-head{max-width:720px;margin-bottom:40px}
  .inc-head p{color:var(--muted)}
  .inc-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:52px;align-items:start}
  .phone{
    border:2px solid var(--ink);border-radius:3px;background:var(--paper);
    box-shadow:6px 6px 0 var(--accent);overflow:hidden;max-width:360px;
  }
  .ph-top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:2px solid var(--ink)}
  .ph-top b{display:block;font-family:var(--font-display);font-size:16px;line-height:1.2}
  .ph-top span{font-size:13px;color:var(--muted)}
  .ph-body{padding:18px 16px;display:flex;flex-direction:column;gap:12px;background:var(--paper)}
  .bul{
    max-width:86%;padding:11px 14px;font-size:14.5px;line-height:1.5;
    border:1.5px solid var(--ink);border-radius:3px;
  }
  .bul.in{align-self:flex-start;background:var(--paper)}
  .bul.out{align-self:flex-end;background:var(--accent);color:var(--ink)}
  .ph-input{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:13px 16px;border-top:2px solid var(--ink);font-size:14px;color:var(--subtle);
  }
  .inc-cards{display:grid;gap:18px}
  .inc-card{
    border:1.5px solid var(--ink);border-radius:3px;background:var(--paper);
    padding:24px 26px;transition:box-shadow .14s ease;
  }
  .inc-card:hover{box-shadow:5px 5px 0 var(--accent)}
  .inc-card svg{display:block;margin-bottom:12px}
  .inc-card h3{font-size:22px;margin-bottom:10px}
  .inc-card p{color:var(--muted);font-size:15.5px;margin:0}

  /* ── PRIX ── */
  .prix{padding:78px 0 20px;border-top:1.5px solid var(--ink);margin-top:56px}
  .prix-grid{display:grid;grid-template-columns:1fr .82fr;gap:56px;align-items:start}
  .prix-grid .col p{color:var(--muted)}
  .carte{
    border:2px solid var(--ink);border-radius:3px;background:var(--paper);
    padding:30px 30px 28px;box-shadow:6px 6px 0 var(--accent);
  }
  .montant{font-family:var(--font-display);font-size:74px;font-weight:700;letter-spacing:-0.05em;line-height:.95;margin:0}
  .montant small{font-size:26px;letter-spacing:-0.02em}
  /* prix plein : barré d'un trait de feutre en diagonale, la barre
     horizontale se lisait comme un chiffre */
  .montant s{
    font-size:28px;font-weight:600;color:var(--subtle);letter-spacing:-0.02em;
    margin-left:10px;text-decoration:none;padding:0 3px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1 28 C26 25 58 20 99 14' fill='none' stroke='%231A1A1A' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size:100% 100%;background-repeat:no-repeat;
  }
  .sm{color:var(--muted);margin:12px 0 22px;font-size:15.5px;line-height:1.55}
  .liste{list-style:none;margin:0 0 26px;padding:0}
  .liste li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border);font-size:15.5px}
  .liste li:last-child{border-bottom:0}
  .liste li.plus{font-weight:600}
  .liste li.plus:first-of-type{margin-top:6px}
  .liste svg{flex:0 0 auto;margin-top:4px}
  .pasca{border:1.5px solid var(--ink);border-radius:3px;padding:22px 24px;margin-top:26px}
  .pasca h4{font-size:19px;margin-bottom:12px}
  .pasca ul{margin:0;padding-left:18px;color:var(--muted);font-size:15.5px}
  .pasca li{margin-bottom:7px}

  footer{padding:48px 0 66px;border-top:1.5px solid var(--ink);margin-top:60px}
  footer p{color:var(--muted);font-size:15px;margin:0}
  footer a{font-weight:600}

  @media (max-width:940px){
    body{font-size:16.5px}
    nav.site a.lnk,nav.site .sep{display:none}
    .burger{display:block}
    header.hero{padding-top:118px}
    .hero-grid,.mod,.asm-grid,.prix-grid,.inc-grid{grid-template-columns:1fr;gap:32px}
    .phone{max-width:100%}
    .shots{grid-template-columns:1fr;gap:26px}
    .etapes{grid-template-columns:1fr;gap:16px}
    .mod{padding:40px 0}
    .mod:nth-child(even) .illu,.mod:nth-child(even) .txt{order:initial}
    .illu svg{max-width:300px;margin:0 auto}
  }

/* ══════════════════════════════════════════════════════════════
   GUIDE : page de documentation, même DA, prose en ligne claire.
   ══════════════════════════════════════════════════════════════ */
.guide-wrap{max-width:820px;margin:0 auto;padding:0 24px}
.guide-hero{padding:124px 0 26px}
.guide-hero h1{font-size:clamp(36px,4.6vw,54px);margin-bottom:20px}
.guide-hero .objectif{
  border-left:0;border:1.5px solid var(--ink);border-radius:3px;
  padding:18px 20px;font-size:17px;color:var(--muted);
}
.guide-hero .objectif b{color:var(--ink);font-weight:600}
.guide section{padding:44px 0 6px;border-top:1.5px solid var(--border)}
.guide section:first-of-type{border-top:0}
.guide h2{font-size:clamp(26px,3.2vw,34px);margin-bottom:22px}
.guide h3{font-size:20px;margin:26px 0 12px}
.guide p{margin:0 0 13px;max-width:66ch}
.guide .puces{list-style:none;margin:0 0 18px;padding:0;max-width:66ch}
.guide .puces li{
  display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:16px;
}
.guide .puces li:last-child{border-bottom:0}
.guide .puces li::before{content:"";flex:0 0 8px;height:8px;margin-top:9px;background:var(--accent);border:1.5px solid var(--ink)}
.guide pre{
  margin:16px 0 20px;padding:16px 18px;overflow-x:auto;
  border:1.5px solid var(--ink);border-radius:3px;background:#FAFAFA;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;line-height:1.7;
}
.guide pre b{font-weight:600;color:var(--ink)}
.guide .dit{
  margin:14px 0 20px;padding:14px 18px;border:1.5px solid var(--ink);border-radius:3px;
  background:var(--paper);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14.5px;line-height:1.7;
}
.guide .dit span{display:block}
.guide .dit span+span{margin-top:9px}
.guide .chute{font-weight:600;color:var(--ink)}
.guide .pannes{list-style:none;margin:0;padding:0;max-width:70ch}
.guide .pannes li{padding:14px 0;border-bottom:1px solid var(--border)}
.guide .pannes li:last-child{border-bottom:0}
.guide .pannes code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  background:#FAFAFA;border:1px solid var(--border);border-radius:3px;padding:1px 5px;
}
.guide .pannes b{display:block;margin-bottom:5px;font-weight:600}
.guide .pannes span{color:var(--muted)}

/* Encart de présentation de l'agent : début, milieu, fin du guide */
.agent-bloc{
  margin:38px 0;padding:26px 28px 24px;
  border:2px solid var(--ink);border-radius:3px;background:var(--paper);
  box-shadow:6px 6px 0 var(--accent);
}
.agent-bloc h3{font-family:var(--font-display);font-size:22px;margin:0 0 12px;letter-spacing:-0.03em}
.agent-bloc p{color:var(--muted);font-size:16px;margin:0 0 11px}
.agent-bloc .lien{
  display:inline-block;margin-top:8px;font-weight:600;color:var(--ink);text-decoration:none;
  padding-bottom:0.12em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C20 3.5 45 6.5 70 4.5 C82 3.7 93 5.5 98 4.8' stroke='%232DEC0B' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 0.34em;
}
.guide-nav{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:10px;
  padding:7px 16px;background:var(--paper);
  border:2px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 var(--accent);
}
.guide-nav a{display:flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-0.03em;white-space:nowrap}
.guide-nav .ou{color:var(--subtle);font-size:14px;font-weight:500;white-space:nowrap}
@media (max-width:940px){
  .guide-hero{padding-top:108px}
  .guide-nav .ou{display:none}
}
.guide code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.92em;
  background:#FAFAFA;border:1px solid var(--border);border-radius:3px;padding:1px 5px;
}
.guide footer{padding:44px 0 70px;border-top:1.5px solid var(--ink);margin-top:50px}
.guide-nav a.langsw{
  padding:6px 10px;font-family:var(--font-sans);font-size:13px;font-weight:600;
  border:1.5px solid var(--ink);border-radius:3px;letter-spacing:0;
}
.guide-nav a.langsw:hover{background:var(--accent)}