/* ═══════════════════════════════════════════════════════════════════════════
   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:'InterVariable';
  src:url('/site/assets/inter-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --ink:#111214; --ink-2:#4A4E56; --ink-3:#7C828C;
  --paper:#FFFFFF; --paper-2:#F6F6F4;
  --line:#E5E5E2; --line-soft:#EFEFEC;
  --ai:#2563EB; --ai-strong:#1D4ED8; --ai-soft:#EEF3FE; --ai-line:#CBDBFA;
  --ok:#15803D; --ok-soft:#E8F5EC;
  --r-sm:10px; --r-md:16px;
  --f:'InterVariable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 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:17px; line-height:1.68;
  letter-spacing:-.008em; -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,4.2vw,44px); line-height:1.1; letter-spacing:-.033em;
   font-weight:700; margin:16px 0 0; text-wrap:balance}
.chapo{font-size:19.5px; line-height:1.62; color:var(--ink-2); margin:18px 0 0;
       max-width:38rem}
h2{font-size:clamp(22px,2.6vw,27px); line-height:1.24; letter-spacing:-.024em;
   font-weight:660; margin:58px 0 0; text-wrap:balance}
h3{font-size:18.5px; letter-spacing:-.016em; font-weight:640; 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} }