/* ============================================================
   Feuille commune aux pages de contenu.

   Les jetons reprennent exactement ceux de la page d'accueil,
   pour que le passage de l'une à l'autre ne se voie pas.
   ============================================================ */
:root{
  --paper:#FBFAF8; --surface:#FFFFFF;
  --ink:#161D29; --ink-2:#596274; --ink-3:#6B7285;
  --hair:rgba(22,29,41,.12); --hair-soft:rgba(22,29,41,.06);
  --rule:rgba(46,64,140,.07);
  --blue:#23409B; --red:#BC3A2C;
  --r-lg:26px; --r-md:18px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --lift:0 1px 2px rgba(22,29,41,.04), 0 8px 24px rgba(22,29,41,.05);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0E1218; --surface:#161B24;
    --ink:#E7EAF0; --ink-2:#9AA3B4; --ink-3:#8A93A6;
    --hair:rgba(231,234,240,.15); --hair-soft:rgba(231,234,240,.07);
    --rule:rgba(150,172,236,.07);
    --blue:#93AAF2; --red:#EE8577;
    --lift:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  }
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background-color:var(--paper);
  background-image:
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 22px);
  color:var(--ink);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  font-size:16.5px; line-height:1.62; -webkit-text-size-adjust:100%;
}
img{max-width:100%}

.wrap{max-width:860px; margin-inline:auto; padding-inline:clamp(16px,4.4vw,44px)}

/* ---- l'en-tête ---- */
header.top{
  position:sticky; top:0; z-index:5;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--hair-soft);
}
.top-in{display:flex; align-items:center; gap:14px; padding-block:13px}
.mark{display:flex; align-items:baseline; gap:9px; text-decoration:none; color:inherit; margin-right:auto}
.mark b{font-family:Newsreader,Georgia,serif; font-weight:400; font-size:1.3rem}
.mark span{
  color:var(--ink-3); font-size:.67rem; letter-spacing:.13em; text-transform:uppercase;
  font-family:"IBM Plex Mono",monospace;
}
@media (max-width:480px){ .mark span{display:none} }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.86rem; font-weight:500; font-family:inherit;
  padding:11px 20px; border-radius:var(--r-pill);
  text-decoration:none; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper); cursor:pointer; white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--lift)}
.btn .arw{transition:transform .28s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn-clair{background:transparent; color:var(--ink); border-color:var(--hair)}
.btn-clair:hover{border-color:var(--ink)}

/* ---- le corps de l'article ---- */
main.art{padding-block:clamp(32px,5vw,60px) 20px}
.fil{
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 14px;
}
.fil a{color:var(--ink-3); text-decoration:none}
.fil a:hover{color:var(--ink)}

h1{
  font-family:Newsreader,Georgia,serif; font-weight:400; line-height:1.08;
  font-size:clamp(2rem,5.2vw,3rem); margin:0 0 18px; letter-spacing:-.02em;
}
h2{
  font-family:Newsreader,Georgia,serif; font-weight:400; line-height:1.14;
  font-size:clamp(1.45rem,3.4vw,2rem); margin:44px 0 14px; letter-spacing:-.012em;
}
h3{font-size:1.04rem; font-weight:600; margin:28px 0 7px; letter-spacing:0}
p{margin:0 0 14px; color:var(--ink-2); max-width:64ch}
.lede{font-size:1.12rem; color:var(--ink); max-width:60ch; margin-bottom:22px}
strong{color:var(--ink); font-weight:600}
a{color:var(--blue)}
ul,ol{margin:0 0 14px; padding-left:22px; max-width:64ch}
li{color:var(--ink-2); margin-bottom:7px}
li::marker{color:var(--ink-3)}

.encadre{
  background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r-lg); padding:clamp(22px,3.4vw,32px);
  margin:30px 0; box-shadow:var(--lift);
}
.encadre h3{margin-top:0}
.encadre p:last-child{margin-bottom:0}

.note{font-size:.9rem; color:var(--ink-3)}

/* ---- l'appel à l'action de fin ---- */
.fin{
  margin:48px 0 10px; padding:clamp(24px,3.6vw,34px);
  background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r-lg); box-shadow:var(--lift);
}
.fin h2{margin-top:0; font-size:clamp(1.3rem,3vw,1.7rem)}
.fin .rangee{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px}

/* ---- les pages voisines ---- */
.voisines{margin-top:46px; border-top:1px solid var(--hair-soft); padding-top:26px}
.voisines p.titre{
  font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:12px;
}
.voisines ul{list-style:none; padding:0; display:grid; gap:9px}
.voisines a{text-decoration:none; color:var(--ink)}
.voisines a:hover{color:var(--blue)}
.voisines span{display:block; font-size:.88rem; color:var(--ink-3)}

footer.pied{
  padding-block:30px 48px; color:var(--ink-3); font-size:.82rem;
  border-top:1px solid var(--hair-soft); margin-top:40px;
}
footer.pied a{color:var(--ink-3); text-decoration:none; margin-right:16px}
footer.pied a:hover{color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}