/* ============================================================================
   contenu.css — feuille de style des pages de contenu (guides, ressources).
   Reprend les tokens de la landing (public/accueil.html) pour rester cohérent,
   mais reste autonome : ces pages sont du HTML statique servi tel quel, hors
   build de l'app. Objectif SEO : pages légères, lisibles, sans JS.
   ========================================================================== */
:root{
  --bg:#f8fafb; --bg-alt:#f0f4f3; --ink:#0f1f23; --muted:#607078;
  --t-950:#071e24; --t-900:#0c3b44; --t-800:#134f5a; --t-700:#16697a;
  --t-600:#1d7e8f; --t-500:#2a93a6; --t-400:#5bb8c8; --t-200:#b8dfe6;
  --t-100:#d6edf1; --t-50:#eaf5f7;
  --ac:#e3a23c; --ac-h:#d08e2a; --ac-s:#fdf4e2;
  --card:#ffffff; --card-alt:#f5f9f8; --ln:#e2ebe9; --ln-s:#eef3f2;
  --ok:#1a9a6f; --ok-s:#e4f6ef; --wa:#d4920f; --wa-s:#fef6e0; --er:#cc4f45; --er-s:#fce8e6;
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:20px;
  --s-1:0 1px 2px rgba(7,30,36,.04);
  --s-2:0 4px 12px rgba(7,30,36,.06);
  --s-3:0 8px 24px rgba(7,30,36,.08);
  --container:1200px; --nav-h:68px; --measure:72ch;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.68; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px;}

/* ---- Navigation (calquée sur la landing) ---------------------------------- */
.nav{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:rgba(248,250,251,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ln);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:24px;}
.brand{
  display:inline-flex;align-items:center;gap:9px;font-weight:650;font-size:19px;
  color:var(--t-900);text-decoration:none;letter-spacing:-.02em;flex:none;
}
.brand .logo{width:30px;height:30px;}
.nav-links{display:flex;gap:26px;font-size:15px;}
.nav-links a{color:var(--muted);text-decoration:none;transition:color .18s;}
.nav-links a:hover{color:var(--t-700);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:560;font-size:15px;line-height:1;
  padding:12px 20px;border-radius:var(--r-sm);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;
}
.btn-sm{padding:9px 15px;font-size:14px;}
.btn-primary{background:var(--ac);color:#251803;box-shadow:0 4px 14px rgba(227,162,60,.22);}
.btn-primary:hover{background:var(--ac-h);transform:translateY(-1px);}
.btn-secondary{background:transparent;color:var(--t-800);border-color:var(--ln);}
.btn-secondary:hover{border-color:var(--t-400);color:var(--t-700);}
@media (max-width:860px){ .nav-links{display:none;} }

/* ---- En-tête d'article ---------------------------------------------------- */
/* padding-block uniquement : `.art-head` et `.art` sont posés SUR `.wrap`, dont le padding
   horizontal de 24px doit être conservé. Un raccourci `padding:56px 0 8px` l'écrasait à 0 et
   décalait l'en-tête et le corps de l'article par rapport aux autres blocs `.wrap` de la page. */
.art-head{padding-top:56px;padding-bottom:8px;}
.fil{font-size:14px;color:var(--muted);margin:0 0 20px;}
.fil a{color:var(--t-700);text-decoration:none;}
.fil a:hover{text-decoration:underline;}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--t-600);background:var(--t-50);
  padding:6px 12px;border-radius:100px;margin:0 0 18px;
}
h1{
  font-family:'Fraunces',Georgia,serif;font-weight:550;
  font-size:clamp(30px,4.4vw,50px);line-height:1.12;letter-spacing:-.024em;
  margin:0 0 20px;max-width:22ch;
}
.chapo{font-size:20px;line-height:1.6;color:var(--muted);max-width:64ch;margin:0 0 24px;}
.meta{font-size:14px;color:var(--muted);border-top:1px solid var(--ln);padding-top:16px;}

/* ---- Corps d'article ------------------------------------------------------ */
.art{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:56px;padding-top:32px;padding-bottom:72px;align-items:start;}
@media (max-width:1000px){ .art{grid-template-columns:1fr;gap:32px;} .toc{position:static !important;} }
.prose{max-width:var(--measure);}
.prose h2{
  font-family:'Fraunces',Georgia,serif;font-weight:550;
  font-size:clamp(24px,2.7vw,32px);line-height:1.2;letter-spacing:-.018em;
  margin:52px 0 16px;scroll-margin-top:88px;
}
.prose h3{font-size:20px;font-weight:620;letter-spacing:-.012em;margin:34px 0 10px;scroll-margin-top:88px;}
.prose p{margin:0 0 18px;}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;}
.prose li{margin:0 0 9px;}
.prose a{color:var(--t-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.prose a:hover{color:var(--t-500);}
/* `.prose a` (0,1,1) l'emporte sur `.btn` (0,1,0) : sans ces règles, les boutons d'appel à
   l'action et les cartes placés dans le corps de l'article héritaient du soulignement des liens. */
.prose .btn,.prose .card{text-decoration:none;}
.prose .btn-primary{color:#251803;}
.prose strong{font-weight:640;color:var(--t-950);}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--t-50);border:1px solid var(--ln);border-radius:6px;padding:1px 6px;
}

/* Encadré « formule » */
.formule{
  background:var(--t-950);color:#dceef2;border-radius:var(--r);padding:22px 24px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;line-height:1.85;
  margin:0 0 22px;overflow-x:auto;
}
.formule .op{color:var(--ac);}
.formule .res{color:#7fe0b8;font-weight:600;}

/* Encadrés d'appel */
.note,.attention{border-radius:var(--r-sm);padding:16px 20px;margin:0 0 22px;font-size:16px;}
.note{background:var(--t-50);border-left:3px solid var(--t-400);}
.attention{background:var(--wa-s);border-left:3px solid var(--wa);}
.note p:last-child,.attention p:last-child{margin-bottom:0;}

/* Tableaux */
.tbl-scroll{overflow-x:auto;margin:0 0 22px;border:1px solid var(--ln);border-radius:var(--r-sm);}
table{border-collapse:collapse;width:100%;font-size:15.5px;background:var(--card);}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--ln-s);vertical-align:top;}
th{background:var(--card-alt);font-weight:620;color:var(--t-900);white-space:nowrap;}
tr:last-child td{border-bottom:0;}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}

/* Sommaire latéral */
.toc{position:sticky;top:88px;font-size:14.5px;}
.toc-t{font-weight:640;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--ln);}
.toc li{margin:0;}
.toc a{display:block;padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;transition:color .18s,border-color .18s;}
.toc a:hover{color:var(--t-700);border-left-color:var(--t-400);}

/* FAQ */
.faq-i{border-bottom:1px solid var(--ln);padding:20px 0;}
.faq-i:first-of-type{border-top:1px solid var(--ln);}
.faq-q{font-weight:620;font-size:18px;margin:0 0 8px;letter-spacing:-.012em;}
.faq-a{margin:0;color:var(--muted);}

/* Bloc de conversion en fin d'article */
.cta-box{
  background:linear-gradient(135deg,var(--t-900),var(--t-800));color:#eaf5f7;
  border-radius:var(--r-lg);padding:36px 40px;margin:56px 0 0;box-shadow:var(--s-3);
}
.cta-box h2{font-family:'Fraunces',Georgia,serif;font-weight:550;font-size:27px;margin:0 0 12px;color:#fff;letter-spacing:-.018em;}
.cta-box p{margin:0 0 22px;color:#b8dfe6;max-width:56ch;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;}

/* Cartes « à lire ensuite » / hub */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:0 0 22px;}
.card{
  display:block;background:var(--card);border:1px solid var(--ln);border-radius:var(--r);
  padding:22px 24px;text-decoration:none;color:inherit;box-shadow:var(--s-1);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--s-2);border-color:var(--t-200);}
.card h3{margin:0 0 8px;font-size:18px;font-weight:620;letter-spacing:-.014em;color:var(--t-900);}
.card p{margin:0;font-size:15px;color:var(--muted);line-height:1.55;}

/* ---- Pied de page --------------------------------------------------------- */
/* Aligné sur le pied de page de la landing (public/accueil.html) : fond clair, filet en haut.
   Une version sombre ici aurait rompu la continuité visuelle entre la home et les guides. */
footer{padding:56px 0 48px;border-top:1px solid var(--ln);margin-top:96px;}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center;}
.foot-links{display:flex;flex-wrap:wrap;gap:6px;}
.foot-links a{font-size:13.5px;color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:var(--r-sm);transition:color .2s,background .2s;}
.foot-links a:hover{color:var(--t-900);background:var(--t-50);}
.foot-bottom{margin-top:28px;padding-top:24px;border-top:1px solid var(--ln-s);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center;font-size:12.5px;color:var(--muted);}
.foot-bottom p{margin:0;}

:focus-visible{outline:2px solid var(--t-500);outline-offset:3px;border-radius:4px;}
@media print{ .nav,.toc,.cta-box,footer{display:none;} .art{grid-template-columns:1fr;} }