/* ═══════════════════════════════════════════════════════════════════════════
   FEUILLE COMMUNE AUX PAGES DE FOND

   Elle reprend les jetons de la page de marque, sans en recopier les 1 500
   lignes : ces pages-ci sont faites pour être LUES, pas pour démontrer. Une
   colonne, une échelle typographique, et la même règle que partout ailleurs —
   **l'encre, c'est l'humain ; le bleu, c'est l'IA**. Rien n'est bleu sauf ce
   que la machine produit ou fait.

   Un fichier séparé plutôt qu'un <style> par page : le jour où l'on ajuste
   l'interlignage, on le fait à un seul endroit pour toutes les pages de fond.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Roboto';src:url('/site/fonts/roboto-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('/site/fonts/roboto-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('/site/fonts/roboto-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Meme systeme que la page de marque : encre bleutee, filets froids. */
  --ink:#020617; --ink-2:#475569; --ink-3:#64748B;
  --paper:#FFFFFF; --paper-2:#F8FAFC;
  --line:#E2E8F0; --line-soft:#EFF2F7;
  --ai:#6366F1; --ai-strong:#4F46E5; --ai-soft:#EEF2FF; --ai-line:#C7D2FE;
  --ok:#15803D; --ok-soft:#E8F5EC;
  --r-sm:8px; --r-md:12px;
  --f:'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f); font-size:16.5px; line-height:1.62;
  letter-spacing:0; -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1060px; margin:0 auto; padding:0 24px}
/* ~68 caractères : la largeur qui se lit sans effort. Centrée — collée à
   gauche dans un conteneur large, elle laissait un vide qui déséquilibrait
   la page sur un grand écran. */
.colonne{max-width:41rem; margin-inline:auto}

/* ── En-tête et pied, identiques à la page de marque ─────────────────── */
header{border-bottom:1px solid var(--line); position:sticky; top:0;
       background:rgba(255,255,255,.88); backdrop-filter:blur(10px); z-index:20}
header nav{display:flex; align-items:center; gap:14px; height:62px}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit}
.brand .name{font-weight:700; letter-spacing:-.03em; font-size:18px}
header .menu{margin-left:auto; display:flex; gap:22px; font-size:14.5px}
header .menu a{color:var(--ink-2); text-decoration:none}
header .menu a:hover{color:var(--ink)}
@media (max-width:760px){ header .menu{display:none} }

.btn{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 20px;
     border-radius:999px; font-size:15px; font-weight:600; text-decoration:none;
     border:1px solid transparent; white-space:nowrap}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:#000}
.btn-line{background:var(--paper); color:var(--ink); border-color:var(--line)}
.btn-line:hover{border-color:var(--ink-3)}
.btn-sm{height:36px; padding:0 15px; font-size:14px}

footer{border-top:1px solid var(--line); margin-top:74px; padding:34px 0 46px;
       color:var(--ink-3); font-size:14px; background:var(--paper-2)}
footer a{color:var(--ink-2); text-decoration:none}
footer a:hover{color:var(--ink)}
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:26px}
.fgrid h4{margin:0 0 10px; font-size:12px; text-transform:uppercase;
          letter-spacing:.08em; color:var(--ink-3); font-weight:700}
.fgrid a{display:block; margin-bottom:7px}
.fbottom{margin-top:28px; padding-top:18px; border-top:1px solid var(--line);
         font-size:13px}

/* ── Le fil d'Ariane : où suis-je, d'où viens-je ──────────────────────── */
.fil{font-size:13.5px; color:var(--ink-3); padding:22px 0 0;
     max-width:41rem; margin-inline:auto}
.fil a{color:var(--ink-3); text-decoration:none}
.fil a:hover{color:var(--ink-2); text-decoration:underline}

/* ── Titres ──────────────────────────────────────────────────────────── */
h1{font-size:clamp(30px,3.6vw,42px); line-height:1.16; letter-spacing:-.022em;
   font-weight:500; margin:16px 0 0; text-wrap:balance}
.chapo{font-size:18.5px; line-height:1.6; color:var(--ink-2); margin:18px 0 0;
       max-width:38rem}
h2{font-size:clamp(22px,2.4vw,28px); line-height:1.26; letter-spacing:-.014em;
   font-weight:500; margin:58px 0 0; text-wrap:balance}
h3{font-size:19px; letter-spacing:-.01em; font-weight:500; margin:32px 0 0}
p{margin:16px 0 0}
article{padding-bottom:20px}

ul,ol{margin:16px 0 0; padding-left:22px}
li{margin:9px 0}
li::marker{color:var(--ink-3)}
strong{font-weight:640}
a{color:var(--ai-strong)}
a:hover{color:var(--ai)}

/* ── L'encadré « ce que fait l'IA » : le seul endroit bleu ────────────── */
.ia{margin:30px 0 0; padding:20px 22px; border:1px solid var(--ai-line);
    background:var(--ai-soft); border-radius:var(--r-md)}
.ia .etiquette{font-size:11.5px; font-weight:700; letter-spacing:.09em;
               text-transform:uppercase; color:var(--ai-strong)}
.ia p{margin:8px 0 0; color:var(--ink-2)}
.ia p:first-of-type{color:var(--ink)}

/* ── L'encadré « ce qu'on ne fait pas » : la franchise se met en avant ── */
.franchise{margin:30px 0 0; padding:20px 22px; border:1px solid var(--line);
           background:var(--paper-2); border-radius:var(--r-md)}
.franchise .etiquette{font-size:11.5px; font-weight:700; letter-spacing:.09em;
                      text-transform:uppercase; color:var(--ink-3)}
.franchise p{margin:8px 0 0; color:var(--ink-2)}

/* ── Questions fréquentes ────────────────────────────────────────────── */
.qa{border-bottom:1px solid var(--line-soft); padding:2px 0}
.qa summary{cursor:pointer; padding:16px 0; font-weight:600; font-size:16.5px;
            list-style:none; display:flex; align-items:flex-start; gap:12px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+'; margin-left:auto; color:var(--ink-3);
                   font-weight:400; font-size:20px; line-height:1}
.qa[open] summary::after{content:'–'}
.qa .r{padding:0 0 18px; color:var(--ink-2); font-size:16px}
.qa:focus-within summary{outline:2px solid var(--ai); outline-offset:3px; border-radius:6px}

/* ── L'appel à l'action de fin ───────────────────────────────────────── */
.fin{margin:64px 0 0; padding:30px 32px; border:1px solid var(--line);
     border-radius:var(--r-md); background:var(--paper-2);
     display:flex; gap:22px; flex-wrap:wrap; align-items:center}
.fin .txt{flex:1 1 280px}
.fin h2{margin:0; font-size:23px}
.fin p{margin:8px 0 0; color:var(--ink-2); font-size:15.5px}

/* ── Pages voisines ──────────────────────────────────────────────────── */
.voisines{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
          gap:12px; margin:22px 0 0}
.voisines a{display:block; padding:16px 18px; border:1px solid var(--line);
            border-radius:var(--r-sm); text-decoration:none; color:inherit;
            transition:border-color .15s, background .15s}
.voisines a:hover{border-color:var(--ai); background:var(--ai-soft)}
.voisines .t{font-weight:640; font-size:15.5px}
.voisines .d{display:block; font-size:13.5px; color:var(--ink-3); margin-top:3px}

@media (prefers-reduced-motion:reduce){ *{transition:none !important} html{scroll-behavior:auto} }


/* ── L'en-tête : connexion et inscription ─────────────────────────────────
   Posé ici et non dans chaque page : huit copies, ce sont huit endroits à
   tenir à jour, et la prochaine page créée l'oublierait.
   ⚠️ Sous 520 px, c'est « Se connecter » qui s'efface — jamais l'inscription.
   Quelqu'un qui a déjà un compte connaît l'adresse de SON garage ; un
   visiteur qui découvre le produit, non. */
.nav-actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
@media(max-width:520px){.nav-actions .btn-line{display:none}}

/* ── LE PRIX ANNUEL, sous chaque formule ─────────────────────────────────
   Encre et papier, jamais de bleu : un tarif est une information commerciale,
   pas quelque chose que la machine a produit. C'est la regle de cette feuille
   et elle vaut aussi pour les nouveautes. */
.an{margin:-.5em 0 1.7em;padding:10px 14px;background:var(--paper-2);
  border-left:2px solid var(--line);border-radius:0 6px 6px 0;
  color:var(--ink-2);font-size:.94rem;line-height:1.5}
.an strong{color:var(--ink);font-weight:650}

/* ── LE CARNET ───────────────────────────────────────────────────────────
   Un titre d'article reste un titre : encre, pas de soulignement. Le lien
   se signale au survol, pas en permanence. */
h2 > a, h1 > a{color:var(--ink);text-decoration:none}
h2 > a:hover{color:var(--ai-strong);text-decoration:underline;
  text-underline-offset:3px}
.note time{color:var(--ink-3);font-size:14.5px}
.fil{font-size:14.5px;color:var(--ink-3);margin:0 0 6px}
.fil a{color:var(--ink-3)}
.fil a:hover{color:var(--ai-strong)}