/* ═══════════════════════════════════════════════════════════════
   Pages de fond (« ressources »). Feuille AUTONOME : elle ne
   dépend pas de styles.css, pour qu'une retouche d'article ne
   puisse jamais déranger la page d'accueil et ses animations.
   Les variables sont reprises à l'identique du design system.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#F8FAFC; --bg-alt:#EDF3F8;
  --marine:#1E3A5F; --nuit:#122840;
  --titre:#122840; --texte:#475569; --texte-2:#5C6A7E;
  --bord:#E2E8F0; --cta:#C9501A;
  --bleu:#2E9BD7; --turq:#18B6C4; --vert:#7FB800; --violet:#6C3FC5; --jaune:#FFC400;
  --f-titre:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-texte:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ombre-douce:0 10px 30px rgba(15,23,42,.06);
  --lecture:68ch;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--texte);
     font-family:var(--f-texte);font-size:17px;line-height:1.72;
     -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:#1E6F9E}

/* ── barre du haut ── */
.art-nav{position:sticky;top:0;z-index:20;background:rgba(248,250,252,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--bord)}
.art-nav .in{max-width:1180px;margin:0 auto;padding:12px clamp(18px,4vw,40px);
  display:flex;align-items:center;gap:13px}
.art-nav .mot{font-family:var(--f-titre);font-weight:900;font-size:19px;
  letter-spacing:-.03em;color:var(--titre);text-decoration:none}
.art-nav .pro{font-family:var(--f-titre);font-size:11px;font-weight:800;letter-spacing:.14em;
  color:#fff;background:var(--marine);padding:3px 8px;border-radius:6px}
.art-nav .droite{margin-left:auto;display:flex;align-items:center;gap:18px}
.art-nav .lien{font-family:var(--f-titre);font-weight:700;font-size:14.5px;
  color:var(--texte-2);text-decoration:none}
.art-nav .lien:hover{color:var(--titre)}
.art-nav .bouton{font-family:var(--f-titre);font-weight:800;font-size:14px;color:#fff;
  background:var(--cta);padding:9px 18px;border-radius:999px;text-decoration:none;
  box-shadow:0 6px 16px rgba(201,80,26,.28)}
.art-nav .bouton:hover{background:#B0440F}
@media(max-width:620px){.art-nav .lien{display:none}}

/* ── corps ── */
.art{max-width:var(--lecture);margin:0 auto;padding:clamp(38px,6vw,72px) clamp(20px,5vw,28px) 30px}
.fil{font-family:var(--f-titre);font-size:13px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--bleu);margin:0 0 14px}
.art h1{font-family:var(--f-titre);font-weight:900;letter-spacing:-.035em;color:var(--titre);
  font-size:clamp(31px,5.4vw,45px);line-height:1.1;margin:0 0 18px}
.chapo{font-size:19.5px;line-height:1.62;color:var(--texte-2);margin:0 0 8px}
.art h2{font-family:var(--f-titre);font-weight:900;letter-spacing:-.025em;color:var(--titre);
  font-size:clamp(23px,3.5vw,30px);line-height:1.2;margin:52px 0 14px}
.art h3{font-family:var(--f-titre);font-weight:800;color:var(--titre);
  font-size:19.5px;line-height:1.3;margin:34px 0 8px}
.art p{margin:0 0 18px}
.art ul,.art ol{margin:0 0 20px;padding-left:24px}
.art li{margin-bottom:9px}
.art strong,.art b{color:var(--titre);font-weight:800}
hr{border:0;border-top:1px solid var(--bord);margin:46px 0}

/* ── encadrés ── */
.encadre{background:#fff;border:1px solid var(--bord);border-left:4px solid var(--bleu);
  border-radius:14px;padding:20px 24px;margin:26px 0;box-shadow:var(--ombre-douce)}
.encadre.vert{border-left-color:var(--vert)}
.encadre.violet{border-left-color:var(--violet)}
.encadre.orange{border-left-color:var(--cta)}
.encadre p:last-child{margin-bottom:0}
.encadre .titre{display:block;font-family:var(--f-titre);font-weight:900;color:var(--titre);
  font-size:16.5px;margin-bottom:7px}
.note{font-size:15px;color:var(--texte-2);font-style:italic}

/* ── questions/réponses ── */
.qr{border-bottom:1px solid var(--bord);padding:22px 0}
.qr:first-of-type{border-top:1px solid var(--bord)}
.qr h3{margin:0 0 8px}
.qr p:last-child{margin-bottom:0}

/* ── appel de fin ── */
.fin{background:var(--marine);border-radius:20px;padding:clamp(26px,4vw,40px);
  margin:56px 0 10px;text-align:center;color:#C6D6E6}
.fin h2{font-family:var(--f-titre);font-weight:900;color:#fff;letter-spacing:-.03em;
  font-size:clamp(22px,3.4vw,29px);line-height:1.18;margin:0 0 12px}
.fin p{margin:0 auto 20px;max-width:46ch;font-size:16px;line-height:1.6}
.fin .bouton{display:inline-block;font-family:var(--f-titre);font-weight:800;font-size:16px;
  color:#fff;background:var(--cta);padding:14px 30px;border-radius:999px;text-decoration:none;
  box-shadow:0 10px 24px rgba(201,80,26,.34)}
.fin .bouton:hover{background:#B0440F}

/* ── autres pages ── */
.suite{margin:52px 0 0}
.suite .intitule{font-family:var(--f-titre);font-size:13px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--texte-2);margin:0 0 14px}
.suite ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.suite a{display:block;background:#fff;border:1px solid var(--bord);border-radius:13px;
  padding:15px 19px;text-decoration:none;color:var(--titre);
  font-family:var(--f-titre);font-weight:800;font-size:16.5px;transition:.18s}
.suite a:hover{border-color:var(--bleu);transform:translateY(-2px);box-shadow:var(--ombre-douce)}
.suite a span{display:block;font-family:var(--f-texte);font-weight:400;font-size:14.5px;
  color:var(--texte-2);margin-top:3px}

/* ── pied ── */
footer.art-pied{background:var(--nuit);color:#A9C0D8;margin-top:60px;
  padding:38px clamp(20px,5vw,40px) 26px}
footer.art-pied .in{max-width:1180px;margin:0 auto;text-align:center}
footer.art-pied a{color:#C6D6E6}
footer.art-pied .liens{font-size:13.5px;line-height:2;margin-top:14px;
  border-top:1px solid rgba(169,192,216,.2);padding-top:16px}
footer.art-pied .mentions{font-size:13px;margin:8px 0 0;color:#8FA9C4}