:root{
  --encre:#16263A; --encre-2:#1E3150; --trait:#34506F;
  --ambre:#E2901A; --ambre-fonce:#9A5F0B; --ambre-clair:#FBEBD2;
  --sable:#FAF7F0; --bord:#E8E1D3; --gris:#4A5A6E; --clair:#C3CEDB; --clair-2:#9FB0C4;
  --titre:'Poppins',system-ui,sans-serif; --corps:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--corps);color:var(--encre);background:var(--sable);line-height:1.65;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}
a{color:inherit}
h1,h2,h3{font-family:var(--titre);line-height:1.2;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--ambre);outline-offset:3px;border-radius:6px}
.conteneur{width:100%;max-width:1248px;margin:0 auto;padding:0 24px}
.etroit{max-width:768px}

/* En-tête */
.entete{background:var(--encre);border-bottom:1px solid #243A57}
.entete .conteneur{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-carre{width:40px;height:40px;border-radius:10px;background:var(--ambre);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-nom{font-family:var(--titre);font-weight:600;font-size:21px;color:#fff}
.logo-nom span{color:var(--ambre)}
.liens-entete{display:flex;gap:24px;align-items:center}
.liens-entete a{color:#D3DBE6;text-decoration:none;font-weight:500}
.liens-entete a:hover{color:#fff}
.liens-entete .btn-boutique{background:var(--ambre);color:var(--encre);font-weight:600;border-radius:10px;padding:10px 18px}
.liens-entete .btn-boutique:hover{color:var(--encre);background:#F0A232}

/* Fil d'Ariane */
.ariane{font-size:14px;color:var(--gris);padding:28px 0 0}
.ariane a{color:var(--ambre-fonce);text-decoration:none}
.ariane a:hover{text-decoration:underline}

/* Liste des articles */
.page-titre{padding:20px 0 40px}
.page-titre h1{font-size:clamp(32px,4vw,46px);font-weight:700;margin-bottom:12px}
.page-titre p{font-size:18px;color:var(--gris);max-width:680px}
.liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;padding-bottom:88px}
.carte-article{background:#fff;border:1px solid var(--bord);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:12px;text-decoration:none}
.carte-article:hover{border-color:#D9C9A8}
.carte-article .meta{font-size:13px;font-weight:600;color:var(--ambre-fonce)}
.carte-article h2{font-size:22px;font-weight:600}
.carte-article p{color:var(--gris);font-size:16px}
.carte-article .lire{margin-top:auto;font-weight:600;color:var(--ambre-fonce)}

/* Article */
.article{padding:16px 0 80px}
.article header{padding-bottom:28px;border-bottom:1px solid var(--bord);margin-bottom:36px}
.article .meta{font-size:14px;font-weight:600;color:var(--ambre-fonce);margin-bottom:12px}
.article h1{font-size:clamp(30px,4vw,44px);font-weight:700;margin-bottom:16px}
.article .chapo{font-size:20px;color:var(--gris);line-height:1.55}
.article h2{font-size:clamp(23px,2.6vw,28px);font-weight:700;margin:44px 0 14px}
.article h3{font-size:19px;font-weight:600;margin:28px 0 8px}
.article p,.article li{font-size:17.5px;color:#2C3A4D}
.article p+p{margin-top:14px}
.article ul,.article ol{padding-left:22px;margin:14px 0}
.article li+li{margin-top:8px}
.encadre{background:var(--ambre-clair);border:1px solid #F0D2A2;border-radius:14px;padding:20px 22px;margin:24px 0}
.encadre p{font-size:16px;color:#3A2A10}
.tableau{width:100%;border-collapse:collapse;margin:20px 0;font-size:15.5px;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--bord)}
.tableau th{background:var(--encre);color:#fff;text-align:left;font-weight:600;padding:12px 14px}
.tableau td{padding:12px 14px;border-top:1px solid var(--bord);vertical-align:top}
.tableau .num{text-align:center;white-space:nowrap}
.pastille{display:inline-block;border-radius:6px;padding:2px 10px;font-weight:600;font-size:14px}
.p-eleve{background:#FAD4D4;color:#7A1F1F}
.p-moyen{background:#FBEBC0;color:#6B4C00}
.p-faible{background:#E6EAF0;color:#2C3A4D}
.defile{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Appel à l'action */
.cta{background:var(--encre);color:#fff;border-radius:20px;padding:32px;display:grid;grid-template-columns:160px 1fr;gap:28px;align-items:center;margin:48px 0 0}
.cta img{width:160px;height:160px;border-radius:12px;display:block}
.cta h2{color:#fff;margin:0 0 8px;font-size:24px}
.cta p{color:var(--clair);font-size:16px}
.cta .btn{display:inline-flex;align-items:center;margin-top:18px;min-height:50px;padding:0 24px;border-radius:12px;background:var(--ambre);color:var(--encre);font-weight:600;text-decoration:none}
.cta .btn:hover{background:#F0A232}
.cta small{display:block;margin-top:10px;color:var(--clair-2);font-size:13px}
.partage{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:36px;font-size:15px;color:var(--gris)}
.partage a{font-weight:600;color:var(--ambre-fonce);text-decoration:none}
.partage a:hover{text-decoration:underline}
.avertissement{font-size:14px;color:var(--gris);margin-top:28px}

/* Pied de page */
.pied{background:var(--encre);color:var(--clair);padding:36px 0;font-size:15px}
.pied .conteneur{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pied a{text-decoration:none}
.pied a:hover{color:#fff}
.pied nav{display:flex;gap:20px;flex-wrap:wrap}

@media (max-width:640px){
  .liens-entete{gap:16px;font-size:15px}
  .liens-entete .lien-accueil{display:none}
  .cta{grid-template-columns:1fr;padding:24px}
  .cta img{width:120px;height:120px}
  .cta .btn{width:100%;justify-content:center;text-align:center}
  .liste{grid-template-columns:1fr}
}