/* ==========================================================================
   CPK ACTU — feuille commune
   Bloc 1 : design system repris VERBATIM du <style> de l-ecole.html.
   Bloc 2 : composants propres au blog, écrits dans les mêmes conventions
            (radius 2px, grilles gap:1px, libellés mono, hover surface-2).
   ========================================================================== */

/* =========================================================== 1. SYSTÈME === */

:root{
  --bg:#05070A; --surface:#0D1117; --surface-2:#131A22;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18);
  --ink:#FFFFFF; --ink-2:rgba(255,255,255,.9); --ink-3:rgba(255,255,255,.68);
  --cyan:#00B4DB; --green:#00F3A6; --magenta:#FD05B0; --pink:#FF4688;
  --blue-deep:#002390; --blue-mid:#0079A9; --purple:#570094; --lime:#D9F300;
  --display:'Bai Jamjuree',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gutter:clamp(20px,5vw,80px); --section-y:clamp(80px,10vh,140px); --maxw:1440px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--display); font-weight:300;
  font-size:clamp(16px,1.05vw,17px); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--cyan); color:#05070A; }

.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); padding:7px 14px 7px 12px; border-radius:999px; border:1px solid color-mix(in srgb, currentColor 34%, transparent); background:color-mix(in srgb, currentColor 9%, transparent); }
.eyebrow::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }
.eyebrow:hover{ border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.06); }
.h-lg{ font-weight:700; text-transform:uppercase; font-size:clamp(30px,3.6vw,48px); line-height:1.06; letter-spacing:-.025em; margin:0; }
.h-md{ font-weight:600; text-transform:uppercase; font-size:clamp(26px,2.6vw,40px); line-height:1.08; letter-spacing:-.015em; margin:0; }
.lead{ font-size:clamp(18px,1.35vw,20px); line-height:1.55; color:var(--ink-2); max-width:62ch; }
.shell{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }

.btn{ display:inline-flex; align-items:center; gap:12px; padding:15px 26px; border-radius:2px;
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .3s, color .3s, border-color .3s; will-change:transform; }
.btn .arw{ transition:transform .35s cubic-bezier(.16,1,.3,1); }
.btn:hover .arw{ transform:translateX(5px); }
.btn-primary{ background:var(--blue-deep); color:#fff; } .btn-primary:hover{ background:var(--blue-mid); }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }

.trace{ position:fixed; left:calc(var(--gutter)*.42); top:0; width:60px; height:100vh; z-index:2; pointer-events:none; mix-blend-mode:screen; }
.trace path{ fill:none; stroke-width:1.4; stroke-linecap:round; stroke-dasharray:1200; stroke-dashoffset:1200; }
@media (max-width:1180px){ .trace{ display:none; } }

.hdr{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px var(--gutter); transition:background .4s, border-color .4s, padding .4s; border-bottom:1px solid transparent; }
.hdr.is-stuck{ background:rgba(5,7,10,.82); backdrop-filter:blur(16px); border-bottom-color:var(--line); padding-block:12px; }
.hdr__logo img{ height:26px; width:auto; }
.nav{ display:flex; align-items:center; gap:4px; }
.nav a{ position:relative; padding:9px 14px; font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); transition:color .3s; }
.nav a::after{ content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px; background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .38s cubic-bezier(.16,1,.3,1); }
.nav a:hover{ color:var(--ink); } .nav a:hover::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--ink); } .nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a.is-elite{ color:var(--lime); } .nav a.is-elite::after{ background:var(--lime); }
.hdr__cta{ display:flex; align-items:center; gap:12px; }
.burger{ display:none; width:40px; height:40px; border:0; background:none; padding:0; }
.burger span{ display:block; width:22px; height:2px; border-radius:2px; background:var(--ink); margin:0 auto; transition:transform .45s cubic-bezier(.16,1,.3,1), width .3s ease; }
.burger span + span{ margin-top:6px; width:14px; }
.burger:hover span + span{ width:22px; }
.burger[aria-expanded="true"] span{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span + span{ width:22px; transform:translateY(-4px) rotate(-45deg); }
@media (max-width:1100px){
  /* backdrop-filter/transform sur le header créent un containing block
     qui casse le position:fixed du menu -> on les neutralise en mobile */
  .hdr, .hdr.is-stuck{ backdrop-filter:none; -webkit-backdrop-filter:none; transform:none !important; }
  .hdr.is-stuck{ background:rgba(5,7,10,.94); }
  .nav{ position:fixed; inset:0; height:100dvh; overscroll-behavior:contain; overflow-y:auto; flex-direction:column; justify-content:center; background:rgba(5,7,10,.97); backdrop-filter:blur(20px); gap:6px; clip-path:inset(0 0 100% 0); transition:clip-path .6s cubic-bezier(.76,0,.24,1); }
  .nav.is-open{ clip-path:inset(0 0 0 0); }
  .nav a{ font-size:20px; font-family:var(--display); font-weight:600; letter-spacing:.04em; padding:12px; }
  .nav a::after{ display:none; }
  .burger{ display:block; position:relative; z-index:70; } .hdr__cta .btn{ display:none; }
}

.pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.pill{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; padding:7px 13px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-2); }

/* CTA final */
.cta{ position:relative; background:var(--surface); border-block:1px solid var(--line); overflow:hidden; text-align:center; }
.cta::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%, rgba(0,35,144,.55), transparent 62%),
             radial-gradient(70% 100% at 50% 110%, rgba(0,35,144,.4), transparent 60%); }
.cta .shell{ position:relative; }
.cta .lead{ margin:22px auto 32px; }
.cta__row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

.foot{ background:var(--surface); border-top:1px solid var(--line); padding-block:clamp(56px,7vw,88px) 34px; }
.foot__grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:clamp(28px,4vw,56px); }
@media (max-width:900px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot__grid{ grid-template-columns:1fr; } }
.foot h4{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin:0 0 18px; font-weight:500; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot li a{ font-size:16px; color:var(--ink-2); transition:color .3s; } .foot li a:hover{ color:var(--cyan); }
.foot__logo{ height:30px; width:auto; margin-bottom:20px; }
.foot__moto{ font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); }
.foot__bottom{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  margin-top:clamp(40px,5vw,64px); padding-top:26px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }

/* Hero de page intérieure */
.phero{ position:relative; min-height:70svh; display:flex; align-items:flex-end; padding-top:140px; overflow:hidden; }
.phero__media{ position:absolute; inset:0; }
.phero__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.62) contrast(1.08) brightness(.7); }
.phero__scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,10,.9), rgba(5,7,10,.3) 40%, rgba(5,7,10,.94) 88%, var(--bg)),
             radial-gradient(85% 70% at 14% 8%, rgba(0,243,166,.16), transparent 60%); }
.phero .shell{ position:relative; z-index:2; padding-bottom:clamp(40px,6vh,72px); }
.phero h1{ font-weight:700; text-transform:uppercase; font-size:clamp(40px,7.6vw,110px); line-height:.88; letter-spacing:-.038em; margin:22px 0 0; }
.phero h1 span{ color:var(--green); }
.phero__sub{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px; margin-top:30px; }
.phero__sub p{ margin:0; max-width:50ch; color:var(--ink-2); font-size:clamp(15px,1.2vw,18px); }

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } html{ scroll-behavior:auto; } }


/* ============================================================== 2. BLOG === */

/* Barre de progression de lecture */
.prog{ position:fixed; inset:0 0 auto 0; height:2px; z-index:65; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--green), var(--cyan)); }

/* Filtres de catégorie — mécanique .filter/.is-on du calendrier de la home */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:36px; }
.filter{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:10px 18px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-2);
  transition:color .3s, border-color .3s, background .3s; }
.filter:hover{ border-color:var(--cyan); color:var(--cyan); }
.filter.is-on{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }
.filter.is-on:hover{ background:var(--blue-mid); border-color:var(--blue-mid); color:#fff; }

/* Article mis en avant */
.feat{ display:grid; grid-template-columns:1.05fr .95fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.feat__media{ position:relative; overflow:hidden; background:var(--surface-2); }
.feat__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.feat:hover .feat__media img{ transform:scale(1.045); }
.feat__body{ background:var(--surface); padding:clamp(26px,3.4vw,56px); display:flex; flex-direction:column; justify-content:center; }
.feat__body h2{ margin:20px 0 18px; max-width:18ch; }
.feat__body h2 a{ transition:color .3s; }
.feat:hover .feat__body h2 a{ color:var(--cyan); }
.feat__body p{ color:var(--ink-2); margin:0 0 26px; max-width:56ch; }
.feat__foot{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
@media (max-width:900px){ .feat{ grid-template-columns:1fr; } .feat__media{ aspect-ratio:16/9; } }

/* Grille d'articles */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px; }
@media (max-width:1000px){ .posts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .posts{ grid-template-columns:1fr; } }

.post{ background:var(--surface); display:flex; flex-direction:column; transition:background .4s; }
.post:hover{ background:var(--surface-2); }
.post[hidden]{ display:none; }
.post__media{ aspect-ratio:16/9; overflow:hidden; background:var(--surface-2); }
.post__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.post:hover .post__media img{ transform:scale(1.045); }
.post__body{ padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; flex:1; }
.post h3{ font-weight:600; text-transform:uppercase; font-size:20px; line-height:1.28; margin:14px 0 12px; }
.post h3 a{ transition:color .3s; }
.post:hover h3 a{ color:var(--cyan); }
.post p{ font-size:16px; color:var(--ink-2); margin:0 0 auto; }
.post__foot{ display:flex; gap:18px; flex-wrap:wrap; margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }

/* Libellés — réservations chromatiques du site */
.cat{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); }
.cat--feminin{ color:var(--magenta); }
.cat--elite{ color:var(--lime); }
.eyebrow--feminin{ color:var(--magenta); }
.eyebrow--elite{ color:var(--lime); }
.tstamp{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }

.empty{ margin-top:40px; color:var(--ink-3); }

/* En-tête d'article */
.ahead{ padding-top:clamp(120px,15vh,170px); }
.ahead h1{ font-weight:700; text-transform:uppercase; font-size:clamp(32px,4.6vw,64px); line-height:1.02;
  letter-spacing:-.03em; margin:22px 0 0; max-width:20ch; }
.ahead .lead{ margin-top:24px; }
.ameta{ display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:30px; padding-top:18px; border-top:1px solid var(--line); }
.acover{ margin:clamp(30px,4vw,56px) 0 0; overflow:hidden; border:1px solid var(--line); border-radius:2px; }
.acover img{ width:100%; aspect-ratio:16/8; object-fit:cover; }
.acover figcaption{ padding:13px 18px; background:var(--surface); font-family:var(--mono); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }

/* Corps + sommaire collant */
.abody{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(28px,4.4vw,72px);
  align-items:start; padding-top:clamp(44px,6vw,80px); }
@media (max-width:960px){ .abody{ grid-template-columns:1fr; } }

.lnav{ position:sticky; top:110px; }
.lnav__t{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 14px; padding-bottom:14px; border-bottom:1px solid var(--line); font-weight:500; }
.lnav ol{ list-style:none; margin:0; padding:0; }
.lnav a{ display:block; font-size:16px; line-height:1.35; color:var(--ink-3); padding:10px 0 10px 15px;
  border-left:1px solid var(--line); transition:color .3s, border-color .3s; }
.lnav a:hover{ color:var(--ink); }
.lnav a.is-on{ color:var(--cyan); border-left-color:var(--cyan); }
@media (max-width:960px){
  .lnav{ top:60px; z-index:20; background:var(--bg); padding-block:12px; margin-bottom:6px; }
  .lnav__t{ display:none; }
  .lnav ol{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
  .lnav ol::-webkit-scrollbar{ display:none; }
  .lnav a{ white-space:nowrap; border:1px solid var(--line-strong); border-radius:999px; padding:9px 16px;
    font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; }
  .lnav a.is-on{ border-color:var(--cyan); }
}

/* Prose longue — base .ldoc de legal.html */
.ldoc{ max-width:76ch; }
.ldoc > * + *{ margin-top:1.1em; }
.ldoc h2{ font-weight:600; text-transform:uppercase; font-size:clamp(26px,2.6vw,40px); line-height:1.08;
  letter-spacing:-.015em; margin:2.2em 0 0; scroll-margin-top:110px; }
.ldoc h2:first-child{ margin-top:0; }
.ldoc h3{ font-weight:600; text-transform:uppercase; font-size:20px; line-height:1.28; margin-top:1.8em; scroll-margin-top:110px; }
.ldoc p{ font-size:16px; line-height:1.7; color:var(--ink-2); margin:0; }
.ldoc a{ color:var(--cyan); border-bottom:1px solid color-mix(in srgb, var(--cyan) 45%, transparent); transition:border-color .3s; }
.ldoc a:hover{ border-bottom-color:var(--cyan); }
.ldoc strong{ color:var(--ink); font-weight:600; }
.ldoc em{ color:var(--ink); font-style:italic; }
.ldoc ul,.ldoc ol{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:.5em; }
.ldoc li{ font-size:16px; line-height:1.7; color:var(--ink-2); }
.ldoc li::marker{ color:var(--cyan); }
.ldoc hr{ height:1px; background:var(--line); border:0; margin-block:2.4em; }
.ldoc figure{ margin:2em 0; }
.ldoc figure img{ border:1px solid var(--line); border-radius:2px; width:100%; }
.ldoc figcaption{ margin-top:10px; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }
.ldoc blockquote{ margin:2em 0; padding:2px 0 2px 24px; border-left:2px solid var(--cyan);
  font-size:clamp(18px,1.5vw,21px); line-height:1.45; color:var(--ink); font-weight:400; }
.ldoc blockquote cite{ display:block; margin-top:12px; font-style:normal; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.ldoc .callout{ background:var(--surface); border:1px solid var(--line); border-left:2px solid var(--cyan);
  border-radius:2px; padding:22px 24px; margin-block:2em; }
.ldoc .callout > * + *{ margin-top:.7em; }

/* Pied d'article */
.share{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:clamp(44px,6vw,72px);
  padding-block:24px; border-block:1px solid var(--line); }
.share .tstamp{ margin-right:6px; }

/* --- Lien d'evitement : premier arret de la tabulation, invisible tant qu'il
   n'a pas le focus. Sans lui, on retraverse les 6 entrees du menu a chaque page. --- */
.skip{
  position:fixed; left:12px; top:12px; z-index:300;
  display:inline-flex; align-items:center; white-space:nowrap; line-height:1;
  transform:translateY(-250%); transition:transform .25s cubic-bezier(.16,1,.3,1);
  padding:13px 20px; border-radius:2px; background:var(--blue-deep); color:#fff;
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
}
.skip:focus{ transform:none; }

/* ============================================================
   ICÔNES — Iconoir (MIT), tracés repris tels quels depuis la source.
   Sprite inline dans chaque page : aucune requête reseau, aucune police
   d'icônes, et le tracé hérite de currentColor donc des couleurs de charte.

   Dimensionnement : les deux flèches ne remplissent pas leur cadre de 24 px
   de la même façon — arrow-right occupe 75 % de la largeur, arrow-up-right
   seulement 54 %. A taille de cadre égale la diagonale paraîtrait deux fois
   plus petite, d'ou deux valeurs differentes. Les cadres sont calés pour que
   l'icône pese optiquement ~1,35x l'ancienne flèche texte qu'elle remplace.
   ============================================================ */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.icon, .arw, .ev__arw{
  display:inline-block; width:1em; height:1em; flex:none;
  fill:none; stroke:currentColor;
  /* Iconoir dessine en 1,5 sur 24 px. A 12-16 px sur fond sombre le trait
     devient filiforme : on l'épaissit un peu pour tenir la lisibilité. */
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  vertical-align:middle;
}
.btn .arw{ width:1.05em; height:1.05em; }
.arw--ext{ width:1.35em; height:1.35em; }
.btn .arw--ext{ width:1.5em; height:1.5em; }
.topbar .arw{ width:1.45em; height:1.45em; }   /* pictogramme, pas une flèche de fin de libellé */
.checks .icon{ width:20px; height:20px; color:var(--green); margin-top:1px; }