:root{
  --encre:#17577a; --encre-fonce:#0f3d56; --terre:#cb6d4b; --terre-clair:#f4e3db;
  --bord:#E6EDEA; --fond:#FAFBFB; --texte:#1b3540; --doux:#5b7683;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);
  font:17px/1.7 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.conteneur{max-width:780px;margin:0 auto;padding:0 22px}

/* ── Bandeau ── */
.bandeau{background:linear-gradient(135deg,var(--encre) 0%,var(--encre-fonce) 100%);padding:16px 0;position:sticky;top:0;z-index:10;box-shadow:0 1px 12px rgba(15,61,58,.12)}
.bandeau .conteneur{display:flex;align-items:center;gap:10px}
.marque{color:#fff;font-weight:700;font-size:17px;text-decoration:none;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.marque svg{opacity:.9}

/* ── Accroche du sommaire ── */
.accroche{padding:44px 0 30px;text-align:center}
.accroche h1{font-size:38px;line-height:1.15;margin:0 0 12px;color:var(--encre);letter-spacing:-.025em}
.accroche p{font-size:18px;color:var(--doux);margin:0 auto;max-width:520px}

/* ── Articles ── */
main{background:#fff;border:1px solid var(--bord);border-radius:20px;padding:38px 42px;margin-bottom:40px;box-shadow:0 1px 3px rgba(15,61,58,.04)}
main.nu{background:transparent;border:0;padding:0;box-shadow:none}
h1{font-size:33px;line-height:1.2;margin:0 0 20px;color:var(--encre);letter-spacing:-.02em}
h2{font-size:23px;margin:40px 0 12px;color:var(--encre);letter-spacing:-.01em;position:relative;padding-left:16px}
h2::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:4px;border-radius:2px;background:var(--terre)}
h3{font-size:18px;margin:26px 0 8px;color:var(--encre-fonce);font-weight:650}
p{margin:0 0 16px}
ul,ol{margin:0 0 18px;padding-left:24px}
li{margin-bottom:8px}
li::marker{color:var(--terre)}
a{color:var(--terre);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--encre)}
strong{color:var(--encre-fonce);font-weight:650}
code{background:rgba(23,87,122,.08);color:var(--encre-fonce);padding:2px 6px;border-radius:5px;font-size:.88em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ── Encadre : c'est ce qu'il faut retenir ── */
blockquote{margin:24px 0;padding:18px 22px;border-left:4px solid var(--terre);
  background:linear-gradient(90deg,var(--terre-clair) 0%,rgba(244,227,219,.35) 100%);
  border-radius:0 12px 12px 0}
blockquote p{margin:0;font-size:16.5px;color:var(--encre-fonce)}

/* ── Captures d'ecran ── */
figure{margin:26px 0}
figure img{width:100%;height:auto;display:block;border:1px solid var(--bord);border-radius:12px;box-shadow:0 2px 12px rgba(15,61,58,.07)}
figcaption{margin-top:9px;font-size:14px;color:var(--doux);text-align:center;font-style:italic}

/* ── Tableaux ── */
.tableau{overflow-x:auto;margin:22px 0;border:1px solid var(--bord);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:15.5px}
th{text-align:left;padding:11px 14px;background:rgba(23,87,122,.045);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--doux);font-weight:700;white-space:nowrap}
td{padding:11px 14px;border-top:1px solid var(--bord);vertical-align:top}
tbody tr:nth-child(even){background:rgba(23,87,122,.018)}

/* ── Fil d'Ariane ── */
.fil{font-size:13.5px;margin:22px 0 16px;color:var(--doux)}
.fil a{color:var(--doux);text-decoration:none}
.fil a:hover{color:var(--terre);text-decoration:underline}

/* ── Sommaire ── */
.section{margin-bottom:34px}
.section-titre{display:flex;align-items:center;gap:9px;margin:0 0 12px}
.section-titre svg{flex:none;color:var(--terre)}
.section-titre h2{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--doux);margin:0;padding:0;font-weight:700}
.section-titre h2::before{display:none}
.carte{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--bord);
  border-radius:14px;padding:16px 18px;margin-bottom:10px;text-decoration:none;color:var(--encre);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.carte:hover{border-color:var(--terre);box-shadow:0 4px 16px rgba(203,109,75,.13);transform:translateY(-1px)}
.carte-texte{flex:1;min-width:0}
.carte-titre{font-weight:650;font-size:16.5px;display:block;margin-bottom:3px;letter-spacing:-.01em}
.carte small{color:var(--doux);font-size:14px;line-height:1.5;display:block;font-weight:400}
.carte .fleche{flex:none;color:var(--bord);margin-top:4px;transition:color .15s,transform .15s}
.carte:hover .fleche{color:var(--terre);transform:translateX(2px)}

/* ── Bas d'article ── */
.maj{margin-top:34px;padding-top:18px;border-top:1px solid var(--bord);font-size:13px;color:var(--doux)}
.aussi{margin-top:34px;padding:22px 24px;background:rgba(23,87,122,.035);border-radius:14px}
.aussi h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--doux);margin:0 0 10px;padding:0}
.aussi h2::before{display:none}
.aussi ul{margin:0;padding-left:20px}
.aussi li{margin-bottom:5px}

.pied{padding:26px 0 48px;font-size:13.5px;color:var(--doux);text-align:center}
.pied a{color:var(--doux)}

@media(max-width:640px){
  body{font-size:16px}
  main{padding:24px 20px;border-radius:14px}
  h1{font-size:27px}.accroche h1{font-size:30px}.accroche{padding:32px 0 22px}
  h2{font-size:20px}
}