@font-face{font-family:"Newsreader";src:url("/assets/fonts/Newsreader-Variable.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/assets/fonts/PublicSans-Variable.ttf") format("truetype");font-weight:100 900;font-display:swap}
:root{--fond:#F7F4EC;--texte:#21283B;--primaire:#1E2A4A;--secondaire:#C9A227;--accent:#6E8FA3;--rayon:14px;
--titre:"Newsreader",system-ui,sans-serif;--corps:"Public Sans",system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root{--fond:#12141a;--texte:#EEEAE0;--primaire:#C9A227;
--secondaire:#1E2A4A;--accent:#6E8FA3}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--corps);line-height:1.6;font-size:17px}
h1,h2{font-family:var(--titre);line-height:1.2;margin:.3em 0}
h1{font-size:clamp(1.7rem,4.5vw,2.6rem)}
h2{font-size:clamp(1.2rem,2.6vw,1.6rem);margin-top:1.6em}
p{margin:0 0 1em;max-width:65ch}
a{color:var(--primaire)}
.saut{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--fond);padding:.5em 1em;z-index:20}
.saut:focus{left:.5em;top:.5em}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.entete-v{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1em;
padding:1em 5vw;border-bottom:1px solid color-mix(in srgb,var(--texte) 12%,transparent)}
.marque-v{font-family:var(--titre);font-weight:700;text-decoration:none;color:var(--texte)}
.nav-v a{color:var(--texte);text-decoration:none;margin-left:1.2em;font-size:.9rem}
main{max-width:960px;margin:0 auto;padding:2em 5vw 6em}
.fil{font-size:.85rem;opacity:.75;margin-bottom:1em}
.fil a{color:inherit}
.heros{display:flex;flex-direction:column-reverse;gap:1.5em;padding:1em 0}
.heros-texte .promesse{font-size:1.1rem;opacity:.9}
.heros-texte .meta{opacity:.7;font-size:.9rem}
.couverture{width:100%;max-width:280px;height:auto;border-radius:var(--rayon);align-self:center}
.acheter{display:inline-block;padding:.85em 1.5em;border-radius:var(--rayon);background:var(--primaire);
color:var(--fond);text-decoration:none;font-weight:700}
.acheter.bientot{background:transparent;border:2px dashed currentColor;color:var(--texte);opacity:.65}
.bientot-note{font-size:.9rem;opacity:.75}
section{margin:2em 0}
.coche{padding-left:1.2em}
.coche li{margin:.4em 0}
.programme-liste{list-style:none;padding:0}
.programme-liste li{display:flex;gap:1em;padding:.8em 0;
border-top:1px solid color-mix(in srgb,var(--texte) 10%,transparent)}
.programme-liste .num{font-family:var(--titre);font-weight:700;opacity:.5}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5em}
.tags li{border:1px solid color-mix(in srgb,var(--texte) 20%,transparent);border-radius:999px;
padding:.2em .8em;font-size:.85rem}
.liens-suite{list-style:none;padding:0;display:grid;gap:.6em}
.grille-cours{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:1em}
.carte-cours a{display:block;border:1px solid color-mix(in srgb,var(--texte) 15%,transparent);
border-radius:var(--rayon);padding:1.1em;text-decoration:none;color:var(--texte);height:100%}
.carte-cours strong{display:block;font-family:var(--titre);margin-bottom:.3em}
.carte-cours span{font-size:.9rem;opacity:.8}
.box{border-left:4px solid var(--accent);padding:.6em 1em;
background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:6px}
details{border-top:1px solid color-mix(in srgb,var(--texte) 12%,transparent);padding:.6em 0}
summary{cursor:pointer;font-weight:600}
.cta-collante{display:none;position:fixed;left:0;right:0;bottom:0;padding:.7em 5vw;background:var(--fond);
border-top:1px solid color-mix(in srgb,var(--texte) 15%,transparent);z-index:15}
.cta-collante a,.cta-collante .bientot{display:block;text-align:center;padding:.8em;border-radius:var(--rayon);
background:var(--primaire);color:var(--fond);text-decoration:none;font-weight:700}
.cta-collante .bientot{background:transparent;border:2px dashed currentColor;color:var(--texte)}
.pied-v{padding:2em 5vw;text-align:center;font-size:.85rem;opacity:.7}
@media (min-width:760px){
  .heros{flex-direction:row;align-items:center}
  .heros-texte{flex:1}
  .couverture{max-width:220px;margin:0}
}
@media (max-width:759px){.cta-collante{display:block}body{padding-bottom:72px}}