/* ============================================================
   LEXORIA ACADEMY — Polices auto-hébergées
   ============================================================ */
/* Chargées depuis fonts.googleapis.com, les deux familles faisaient partir
   l'adresse IP de chaque visiteur vers un serveur hors UE à chaque page — ce
   que la CNIL déconseille. Les woff2 sont donc servis par le site lui-même.
   Les deux familles sont variables : un seul fichier par sous-ensemble couvre
   toutes les graisses, d'où les plages font-weight plutôt qu'un poids fixe.
   Le latin-ext n'est pas superflu : il porte les capitales accentuées et les
   ligatures que le site emploie en titre. */
@font-face{
  font-family:"Jost";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("../fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Jost";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("../fonts/jost-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Playfair Display";
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url("../fonts/playfair-display-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Playfair Display";
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url("../fonts/playfair-display-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   LEXORIA ACADEMY — Design tokens
   ============================================================ */
:root{
  --navy-950:#080f1e;
  --navy-900:#0c1a30;
  --navy-800:#122341;
  --navy-700:#1a2f52;
  --gold:#c9a24a;
  --gold-light:#e3c580;
  --gold-dim:#8a7239;
  /* Le doré sourd plafonne à 3,77:1 sur navy-900 et 3,92:1 sur crème : il tient
     comme filet ou pictogramme (seuil 3:1) mais échoue dès qu'il porte du texte.
     D'où deux variantes lisibles, une par fond — ratios mesurés, pas estimés. */
  --gold-text:#9b8140;        /* 4,65:1 sur navy-900, 5,11:1 sur navy-950 */
  --gold-text-cream:#75612f;  /* 5,09:1 sur crème */
  --cream:#f3ecdc;
  --cream-dark:#e8ddc4;
  --ink:#1c1a14;
  --text-light:#f4f0e6;
  --text-muted:#a9b3c9;
  --text-muted-cream:#5c5646;

  --serif:"Playfair Display", Georgia, serif;
  --sans:"Jost", "Segoe UI", Arial, sans-serif;

  --container:1200px;
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--navy-950);
  color:var(--text-light);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img,svg{max-width:100%;display:block;}
main{display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:.01em;}
p{margin:0;}
.container{max-width:var(--container);margin:0 auto;padding:0 32px;}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}

:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;}
/* Sur crème, le doré clair tombe à 1,42:1 : l'anneau de focus y disparaît.
   L'encre reprend la main sur les deux zones claires du site. */
.band-cream :focus-visible,
.info-panel :focus-visible{outline-color:var(--ink);}

/* ============================================================
   LIEN D'ÉVITEMENT
   ============================================================ */
/* Hors flux tant qu'il n'a pas le focus : au clavier il doit surgir en
   premier, à la souris il ne doit jamais réserver de place. */
/* Fixe et non absolu : en absolu, un retour arrière au clavier après un
   défilement le ferait réapparaître en haut du document, hors de l'écran. */
.lien-evitement{
  position:fixed;top:0;left:-9999px;z-index:200;
  background:var(--gold);color:var(--navy-950);
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:13px 24px;border-radius:var(--radius);
}
.lien-evitement:focus{left:16px;top:16px;}
/* La barre collante fait 78px : sans cette marge, le saut place le début du
   contenu dessous. Et l'anneau de focus autour du <main> entier n'apporte
   rien — la cible du saut, elle, se voit au déplacement. */
#contenu{scroll-margin-top:88px;}
#contenu:focus{outline:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ============================================================
   CREST / LOGO
   ============================================================ */
.crest{display:flex;align-items:center;gap:12px;}
.crest svg{width:38px;height:38px;flex-shrink:0;}
.crest__text{display:flex;flex-direction:column;line-height:1.1;}
.crest__text .name{
  font-family:var(--serif);
  font-size:17px;
  letter-spacing:.14em;
  color:var(--text-light);
  font-weight:600;
}
.crest__text .sub{
  font-family:var(--sans);
  font-size:9px;
  letter-spacing:.32em;
  color:var(--gold);
  margin-top:2px;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(8,15,30,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,162,74,.18);
}
.nav .container{
  display:flex;align-items:center;justify-content:space-between;
  height:78px;
}
.nav__links{
  display:flex;align-items:center;
  /* L'écart respire à 1440px et se resserre proprement vers le point
     de bascule, au lieu d'un 34px fixe qui saturait la barre. */
  gap:clamp(16px, 1.9vw, 32px);
}
.nav__links a{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);font-weight:500;
  padding:6px 0;border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.nav__links a:hover,.nav__links a.active{
  color:var(--gold-light);border-color:var(--gold);
}

/* Les deux actions forment une zone à part, détachée de la navigation
   par un filet — le même vocabulaire de trait fin doré que le reste
   du site. Sans cette césure, neuf éléments se lisent comme une seule
   liste indifférenciée. */
.nav__actions{
  display:flex;align-items:center;gap:20px;
  padding-left:clamp(16px, 1.9vw, 28px);
  border-left:1px solid rgba(201,162,74,.22);
}

/* Porte de service : un lien, pas un bouton. Deux boutons côte à côte
   se neutralisent ; ici la clé et la casse suffisent à signaler
   l'accès réservé, et le doré reste au seul appel à l'action. */
.nav__links .nav__login{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--text-muted);
  padding:6px 0;border-bottom:none;
}
.nav__links .nav__login svg{
  width:13px;height:13px;flex-shrink:0;
  opacity:.75;transition:opacity .2s ease, transform .2s ease;
}
.nav__links .nav__login:hover{color:var(--gold-light);}
.nav__links .nav__login:hover svg{opacity:1;transform:rotate(-12deg);}

.nav__links .nav__cta{
  font-size:11px;letter-spacing:.14em;
  background:var(--gold);color:var(--navy-950);
  padding:11px 22px;font-weight:600;text-transform:uppercase;
  border-radius:var(--radius);border-bottom:none;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav__links .nav__cta:hover{
  background:var(--gold-light);color:var(--navy-950);
  transform:translateY(-1px);
  box-shadow:0 6px 18px -8px rgba(201,162,74,.6);
}
.nav__toggle{
  display:none;background:none;border:1px solid var(--gold-dim);
  width:42px;height:42px;border-radius:var(--radius);cursor:pointer;
  align-items:center;justify-content:center;
}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  content:"";display:block;width:18px;height:1px;background:var(--gold-light);
  position:relative;transition:transform .2s ease, opacity .2s ease;
}
.nav__toggle span::before{position:absolute;top:-6px;}
.nav__toggle span::after{position:absolute;top:6px;}

/* Six liens plus les deux actions demandent environ 1200px pour tenir sans se
   serrer. Le seuil est conservé après le retrait de « Blog » : il donne
   maintenant de la marge, ce qui vaut mieux que de le descendre au plus juste
   et de tout rejouer quand l'entrée reviendra. En dessous, on bascule sur le
   tiroir plutôt que de laisser la barre déborder. */
@media (max-width:1200px){
  .nav__links{
    position:fixed;top:78px;left:0;right:0;bottom:0;
    background:var(--navy-950);
    flex-direction:column;align-items:flex-start;
    padding:36px 32px 44px;gap:26px;
    transform:translateX(100%);transition:transform .3s ease;
    overflow-y:auto;
  }
  .nav__links.open{transform:translateX(0);}
  .nav__toggle{display:flex;}

  /* Dans le tiroir, le filet passe à l'horizontale : même séparation,
     autre axe. L'appel à l'action vient en dernier, pleine largeur —
     c'est la position la plus forte d'une liste verticale. */
  .nav__actions{
    flex-direction:column;align-items:stretch;gap:22px;
    width:100%;margin-top:6px;padding:28px 0 0;
    border-left:none;
    border-top:1px solid rgba(201,162,74,.22);
  }
  .nav__links .nav__cta{
    display:flex;align-items:center;justify-content:center;
    padding:15px 22px;
  }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:15px 28px;border-radius:var(--radius);
  transition:all .2s ease;cursor:pointer;border:1px solid transparent;
  font-family:var(--sans);
}
.btn-gold{background:var(--gold);color:var(--navy-950);}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-1px);}
.btn-outline-dark{border-color:rgba(244,240,230,.35);color:var(--text-light);background:transparent;}
.btn-outline-dark:hover{border-color:var(--gold-light);color:var(--gold-light);}
.btn-outline-cream{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn-outline-cream:hover{background:var(--ink);color:var(--cream);}
.btn-link{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--gold);border-bottom:1px solid var(--gold-dim);padding-bottom:2px;
}
.btn-link:hover{color:var(--gold-light);border-color:var(--gold-light);}

/* ============================================================
   HERO (split layout)
   ============================================================ */
.hero{
  padding:88px 0 0;
  background:radial-gradient(ellipse at top right, rgba(201,162,74,.08), transparent 55%);
}
.hero .container{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.hero__eyebrow{margin-bottom:18px;}
.hero h1{
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.08;color:var(--text-light);
}
.hero h1 .accent{color:var(--gold);display:block;}
.hero__desc{
  margin-top:22px;font-size:16px;color:var(--text-muted);max-width:46ch;
}
.hero__ctas{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;}

.frame{
  position:relative;border:1px solid rgba(201,162,74,.35);
  padding:14px;border-radius:var(--radius);
}
.frame__inner{
  position:relative;overflow:hidden;border-radius:1px;
  background:
    radial-gradient(circle at 30% 20%, rgba(201,162,74,.18), transparent 55%),
    linear-gradient(160deg, var(--navy-800), var(--navy-950));
  aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center;
}
.frame__inner svg{width:62%;height:62%;opacity:.9;}
.frame__corner{
  position:absolute;width:22px;height:22px;border:1px solid var(--gold);
}
.frame__corner.tl{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.frame__corner.tr{top:-1px;right:-1px;border-left:none;border-bottom:none;}
.frame__corner.bl{bottom:-1px;left:-1px;border-right:none;border-top:none;}
.frame__corner.br{bottom:-1px;right:-1px;border-left:none;border-top:none;}

/* feature strip under hero */
.strip{
  margin-top:64px;border-top:1px solid rgba(201,162,74,.18);
  background:var(--navy-900);
}
.strip .container{
  display:flex;justify-content:center;gap:48px;flex-wrap:wrap;
  padding:22px 32px;
}
.strip__item{
  display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
}
.strip__item svg{width:16px;height:16px;color:var(--gold);flex-shrink:0;}

/* ============================================================
   SECTIONS — dark
   ============================================================ */
.section{padding:96px 0;}
.section-tight{padding:72px 0;}
.section h2{
  font-size:clamp(28px,3.2vw,40px);color:var(--text-light);
}
.section__intro{max-width:640px;}
.section__intro p{color:var(--text-muted);margin-top:16px;font-size:16px;}
.section__intro.center{margin:0 auto;text-align:center;}

/* cards grid (programmes) */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;}
.card{
  background:var(--navy-900);border:1px solid rgba(201,162,74,.16);
  padding:36px 30px;border-radius:var(--radius);
  transition:border-color .2s ease, transform .2s ease;
}
.card:hover{border-color:var(--gold-dim);transform:translateY(-4px);}
.card svg{width:34px;height:34px;color:var(--gold);margin-bottom:22px;}
.card h3{font-size:19px;color:var(--text-light);margin-bottom:12px;letter-spacing:.02em;}
.card p{color:var(--text-muted);font-size:14.5px;margin-bottom:22px;}

/* cream CTA / feature bands */
.band-cream{background:var(--cream);color:var(--ink);}
.band-cream .eyebrow{color:var(--gold-text-cream);}
.band-cream h2,
.band-cream h3{font-size:24px;color:var(--ink);}
.band-cream p{color:var(--text-muted-cream);}
.band-inner{
  text-align:center;padding:56px 40px;max-width:680px;margin:0 auto;
}

/* discipline content pages (droit / histoire / relations) */
.discipline .hero__desc{margin-bottom:6px;}
.check-list{margin-top:26px;display:flex;flex-direction:column;gap:13px;}
.check-list li{
  display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text-light);
}
.check-list svg{width:15px;height:15px;color:var(--gold);flex-shrink:0;margin-top:4px;}

/* 4-col icon strip (droit/histoire/relations bottom) */
.icon-strip{background:var(--navy-900);border-top:1px solid rgba(201,162,74,.18);}
.icon-strip .container{
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:40px 32px;
}
.icon-strip__item{text-align:center;}
.icon-strip__item svg{width:26px;height:26px;color:var(--gold);margin:0 auto 12px;}
.icon-strip__item span{
  display:block;font-size:11.5px;letter-spacing:.06em;color:var(--text-muted);line-height:1.5;
}

/* méthode steps */
.steps{
  display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:56px;
}
.step{text-align:center;}
.step__num{
  width:52px;height:52px;border:1px solid var(--gold-dim);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  font-family:var(--serif);color:var(--gold);font-size:16px;
}
.step h4{font-size:15px;color:var(--text-light);margin-bottom:8px;letter-spacing:.02em;}
.step p{font-size:13px;color:var(--text-muted);}

/* stats (a-propos) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px;}
.stat{
  text-align:center;padding:28px 12px;border:1px solid rgba(201,162,74,.16);
  border-radius:var(--radius);
}
.stat .num{font-family:var(--serif);font-size:40px;color:var(--gold);}
.stat .label{
  margin-top:8px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);line-height:1.5;
}

/* admission layout */
.admission-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:0;}
.info-panel{background:var(--cream);color:var(--ink);padding:56px 44px;}
.info-panel__item{display:flex;gap:16px;margin-bottom:34px;}
.info-panel__item:last-child{margin-bottom:0;}
.info-panel__item svg{width:22px;height:22px;color:var(--gold-dim);flex-shrink:0;margin-top:2px;}
.info-panel__item h4{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted-cream);
  margin-bottom:6px;font-family:var(--sans);font-weight:600;
}
.info-panel__item p{font-size:15px;color:var(--ink);font-family:var(--serif);}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.contact-info{display:flex;flex-direction:column;gap:22px;margin-top:30px;}
.contact-info__item{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--text-light);}
.contact-info__item svg{width:18px;height:18px;color:var(--gold);flex-shrink:0;}
/* Email et téléphone sont cliquables : il faut que ça se voie, et que la
   cible tactile soit assez haute sur mobile (44px recommandés). */
.contact-info__item a{
  color:inherit;border-bottom:1px solid rgba(201,162,74,.35);
  padding:8px 0;min-height:28px;display:inline-flex;align-items:center;
  transition:color .2s ease, border-color .2s ease;
}
.contact-info__item a:hover{color:var(--gold-light);border-color:var(--gold);}
.form{display:flex;flex-direction:column;gap:16px;background:var(--navy-900);
  border:1px solid rgba(201,162,74,.18);padding:34px;border-radius:var(--radius);}
.form input,.form textarea{
  width:100%;background:var(--navy-950);border:1px solid rgba(201,162,74,.6);
  color:var(--text-light);padding:14px 16px;font-family:var(--sans);font-size:14px;
  border-radius:var(--radius);
}
.form input::placeholder,.form textarea::placeholder{color:var(--text-muted);}
/* Le bord d'un champ délimite un composant d'interface : 3:1 exigé, d'où le
   filet plus dense qu'ailleurs. Et pas d'outline:none — c'était le seul
   endroit du site où le focus clavier disparaissait. */
.form input:focus,.form textarea:focus{border-color:var(--gold);}
.form textarea{resize:vertical;min-height:120px;}
.form .btn-gold{align-self:flex-start;border:none;cursor:pointer;}
.form-msg{font-size:13px;color:var(--gold-light);display:none;}
.form-msg.show{display:block;}
/* TECH-01 : un envoi qui n'a PAS abouti ne doit pas se lire comme une
   confirmation. L'or dit « c'est reçu » partout ailleurs sur le site ; un
   refus prend donc une autre teinte, choisie claire pour rester lisible sur
   le navy sans dépendre des tokens de la plateforme. */
.form-msg--refus{color:#efa595;}
/* TECH-03 : l'information du visiteur, à l'endroit même où ses données
   sont recueillies. Elle se lit — pas de gris illisible sur fond sombre —
   et ses liens restent des liens. */
.form-rgpd{font-size:12.5px;line-height:1.65;color:var(--text-muted);margin-top:18px;max-width:66ch;}
.form-rgpd a{color:var(--gold-light);text-decoration:underline;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--navy-950);border-top:1px solid rgba(201,162,74,.18);padding:56px 0 28px;}
.footer .crest{justify-content:center;margin-bottom:28px;}
.footer__tags{
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
  margin-bottom:30px;
}
.footer__tags span{color:var(--gold-text);}

/* SITE-07 : la navigation du pied. En `auto-fit` plutôt qu'en trois colonnes
   fixes — « Relations internationales » ne tient pas dans un tiers d'écran de
   téléphone, et les colonnes se replient d'elles-mêmes sans requête de média.
   Le remplissage vertical des liens n'est pas décoratif : sans lui, une ligne
   de 13 px ne fait que 21 px de haut, sous la cible tactile minimale. */
.footer__nav{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:26px 32px;max-width:840px;margin:0 auto 34px;text-align:center;
}
.footer__col{display:flex;flex-direction:column;gap:2px;}
.footer__titre{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);
  margin:0 0 8px;
}
.footer__col a{font-size:13.5px;color:var(--text-muted);padding:4px 0;transition:color .2s ease;}
.footer__col a:hover{color:var(--gold-light);}

/* Les liens légaux se lisent au même endroit sur toutes les pages : dans la
   barre du bas, à côté de la mention de droits d'auteur qu'ils complètent. */
.footer__legal{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}
.footer__legal a{padding:4px 0;transition:color .2s ease;}
.footer__legal a:hover{color:var(--gold-light);}

.footer__bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  padding-top:26px;border-top:1px solid rgba(201,162,74,.1);
  font-size:12px;color:var(--text-muted);
}
.footer__social{display:flex;gap:14px;}
.footer__social a{
  width:34px;height:34px;border:1px solid rgba(201,162,74,.25);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s ease;
}
.footer__social a:hover{border-color:var(--gold);}
.footer__social svg{width:14px;height:14px;color:var(--gold);}

/* ============================================================
   PAGE HEAD (interior pages without split hero — programmes/methode/a-propos)
   ============================================================ */
.page-head{padding:88px 0 56px;text-align:center;}
.page-head .eyebrow{display:block;margin-bottom:16px;}
.page-head h1{font-size:clamp(32px,4vw,48px);}
.page-head p{margin-top:18px;color:var(--text-muted);max-width:560px;margin-left:auto;margin-right:auto;font-size:16px;}

/* transformation flow (État A -> État B) */
.flow{display:flex;align-items:stretch;gap:0;margin-top:52px;}
.flow__box{
  flex:1;background:var(--navy-900);border:1px solid rgba(201,162,74,.16);
  padding:32px 26px;border-radius:var(--radius);
}
.flow__box.center{
  background:transparent;border:none;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:0 22px;max-width:140px;flex:0 0 auto;
}
.flow__box .tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);margin-bottom:10px;display:block;}
.flow__box h4{font-family:var(--serif);font-size:19px;color:var(--text-light);margin-bottom:10px;}
.flow__box p{font-size:13.5px;color:var(--text-muted);}
.flow__arrow{color:var(--gold);font-size:22px;}
.flow__box.center .tag{color:var(--gold);text-align:center;}
@media (max-width:800px){
  .flow{flex-direction:column;gap:18px;}
  .flow__box.center{max-width:none;padding:6px 0;}
  .flow__arrow{transform:rotate(90deg);}
}

/* positioning do/don't (reused on a-propos) */
.pos-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;}
.pos-card{border:1px solid rgba(201,162,74,.16);border-radius:var(--radius);padding:30px 28px;background:var(--navy-900);}
.pos-card h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);margin-bottom:18px;}
.pos-card ul{display:flex;flex-direction:column;gap:12px;}
.pos-card li{font-size:14.5px;color:var(--text-muted);padding-left:18px;position:relative;}
.pos-card.not li::before{content:"—";position:absolute;left:0;color:var(--text-muted);}
.pos-card.is li::before{content:"✓";position:absolute;left:0;color:var(--gold);}
@media (max-width:800px){.pos-grid{grid-template-columns:1fr;}}

.grid-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;}
.article-card{
  display:flex;flex-direction:column;
  background:var(--navy-900);border:1px solid rgba(201,162,74,.16);
  border-radius:var(--radius);overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.article-card:hover{border-color:var(--gold-dim);transform:translateY(-4px);}
.article-card__thumb{
  aspect-ratio:16/10;
  background:
    radial-gradient(circle at 25% 20%, rgba(201,162,74,.18), transparent 55%),
    linear-gradient(160deg, var(--navy-800), var(--navy-950));
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid rgba(201,162,74,.14);
}
.article-card__thumb svg{width:34%;height:34%;color:var(--gold);opacity:.85;}
.article-card__body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1;}
.article-card__meta{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
}
.article-card__tag{color:var(--gold);font-weight:600;}
.article-card__date{color:var(--text-muted);}
.article-card__dot{width:3px;height:3px;border-radius:50%;background:var(--text-muted);}
.article-card h3{font-size:18px;color:var(--text-light);margin-bottom:10px;letter-spacing:.01em;line-height:1.3;}
.article-card p{color:var(--text-muted);font-size:14px;margin-bottom:20px;flex:1;}
.article-card .btn-link{margin-top:auto;align-self:flex-start;}

.blog-filter{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px;}
.blog-filter span{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(201,162,74,.25);color:var(--text-muted);
  padding:8px 16px;border-radius:20px;
}
.blog-filter span.is-all{border-color:var(--gold);color:var(--gold);}

/* single article page */
.article-hero{padding:88px 0 40px;}
.article-hero .container{max-width:760px;}
.article-hero .article-card__meta{margin-bottom:18px;}
.article-hero h1{font-size:clamp(28px,4vw,42px);line-height:1.2;}
.article-body{padding:0 0 90px;}
.article-body .container{max-width:760px;}
.article-body p{color:var(--text-muted);font-size:16px;margin-bottom:22px;line-height:1.75;}
.article-body h2{font-size:24px;color:var(--text-light);margin:40px 0 16px;}
.article-body .placeholder-note{
  border:1px dashed rgba(201,162,74,.4);border-radius:var(--radius);
  padding:22px 24px;color:var(--gold-light);font-size:13.5px;background:rgba(201,162,74,.05);
}
.article-back{margin-bottom:28px;display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);}
.article-back:hover{color:var(--gold-light);}

@media (max-width:960px){
  .grid-blog{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .grid-blog{grid-template-columns:1fr;}
}

@media (max-width:960px){
  .hero .container{grid-template-columns:1fr;}
  .frame{order:-1;max-width:420px;margin:0 auto;}
  .grid-3{grid-template-columns:1fr;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);}
  .icon-strip .container{grid-template-columns:repeat(2,1fr);}
  .admission-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .strip .container{gap:22px;}
}
@media (max-width:560px){
  .container{padding:0 20px;}
  .hero{padding-top:70px;}
  .hero__ctas{flex-direction:column;align-items:flex-start;}
  .steps{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .icon-strip .container{grid-template-columns:1fr;}
  .footer__bottom{flex-direction:column;text-align:center;}
}

/* ============================================================
   PARCOURS / FORMATS
   ============================================================ */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px;}
.format-card{
  display:flex;flex-direction:column;
  background:var(--navy-900);border:1px solid rgba(201,162,74,.16);
  border-radius:var(--radius);padding:28px 24px;position:relative;
  transition:border-color .2s ease, transform .2s ease;
}
.format-card.is-featured{border-color:var(--gold);}
.format-card:hover{transform:translateY(-4px);}
.format-card__badge{
  align-self:flex-start;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:20px;margin-bottom:16px;font-weight:600;
}
/* Le fond teinté à 12 % éclaircit le plancher : sur lui, seul l'or plein
   franchit 4,5:1 (6,03:1). Le badge reste discret, son fond ne bouge pas. */
.format-card__badge.high{background:rgba(201,162,74,.12);color:var(--gold);border:1px solid rgba(201,162,74,.25);}
.format-card__badge.best{background:var(--gold);color:var(--navy-950);}
.format-card__badge.entry{background:transparent;color:var(--text-muted);border:1px solid rgba(201,162,74,.2);}
.format-card h3{font-size:18px;color:var(--text-light);margin-bottom:8px;}
.format-card__price{font-family:var(--serif);font-size:22px;color:var(--gold);margin-bottom:14px;}
.format-card__price span{font-family:var(--sans);font-size:12px;color:var(--text-muted);font-weight:400;}
.format-card p{font-size:13.5px;color:var(--text-muted);flex:1;}
.format-card__engagement{
  margin-top:16px;padding-top:16px;border-top:1px solid rgba(201,162,74,.12);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);
}

.pricing-note{
  margin-top:44px;padding:24px 28px;border-left:2px solid var(--gold);background:var(--navy-900);
  font-size:14px;color:var(--text-muted);border-radius:0 var(--radius) var(--radius) 0;
}

/* SITE-04 : trois prix par carte, un par niveau. Une ligne par niveau plutôt
   qu'un tableau à trois colonnes : à 390 px, « Lycée / STMG » et son montant
   ne tiennent pas côte à côte avec deux autres niveaux, et l'intitulé tombe à
   un mot par ligne — le défaut déjà mesuré sur les files du back-office. */
.tarifs-titre{font-size:clamp(24px,2.6vw,32px);color:var(--text-light);}
.tarif-niveaux{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(201,162,74,.12);
  display:flex;flex-direction:column;gap:9px;
}
.tarif-niveaux li{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:12.5px;color:var(--text-muted);
}
/* Le doré plein échoue à 4,5:1 sous 18,66 px ; l'or clair tient 10,5:1 sur
   navy-900, et c'est déjà lui qui porte le texte des liens et des messages. */
.tarif-niveaux strong{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--gold-light);}

.faits-decouverte{
  margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted-cream);
}
.faits-decouverte li{display:flex;align-items:center;gap:9px;}
.faits-decouverte li::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--gold-text-cream);flex-shrink:0;
}

.subject-block{margin-top:40px;}
.subject-block:first-child{margin-top:0;}
.subject-block__title{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;}

@media (max-width:960px){.grid-4{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr;}}

/* Le formulaire de contact utilise désormais des étiquettes visibles :
   un placeholder disparaît à la saisie et n'est pas annoncé comme
   étiquette par un lecteur d'écran. */
.form .field{gap:6px;}
.form .field label{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);font-weight:600;
}