/* =========================================================
   La Cité du Savoir : feuille de styles
   Palette dérivée du logo : bleu roi (écusson, toque,
   étoiles) et ambre (arbre sur livre ouvert).
   ========================================================= */

:root{
  --bleu-nuit:#0C2760;
  --bleu-nuit-2:#071A44;
  --bleu:#3868F0;
  --bleu-fonce:#1347D8;
  --bleu-pale:#ECF1FE;
  --bleu-pale-2:#F4F7FE;

  --or:#E09028;          /* ambre du logo : fonds, bordures, texte sur fond sombre */
  --or-texte:#BC5410;    /* meme famille, assombri pour le texte sur fond clair : 4,8:1 */
  --or-fonce:#C97018;
  --or-pale:#FDF3E4;

  --encre:#0F2440;
  --texte:#47576B;
  --muted:#7A8899;
  --ligne:#E2E8F1;
  --blanc:#FFFFFF;
  --fond:#FAFBFD;

  /* Une seule famille porte toute la hiérarchie : la distinction se fait
     par la graisse et l'espacement, pas par un changement de dessin.
     L'italique à empattements ne sert qu'aux mots mis en avant. */
  /* Montserrat, prescrite par la charte graphique (page TYPOGRAPHIE).
     Une seule famille porte tout le site : les titres, le texte courant
     et les mots mis en avant, qui passent en italique de la meme fonte
     au lieu d'emprunter un serif etranger a la charte. */
  --serif:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --accent-italique:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;

  --shell:1200px;
  --r:14px;
  --ombre:0 1px 2px rgba(15,36,64,.05),0 12px 32px -14px rgba(15,36,64,.22);
  --ombre-forte:0 2px 4px rgba(15,36,64,.06),0 22px 48px -18px rgba(15,36,64,.32);
  --t:.32s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--fond);
  color:var(--texte);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3{
  font-family:var(--serif);
  color:var(--encre);
  margin:0;
  line-height:1.15;
  text-wrap:balance;
  letter-spacing:-.015em;
}
h1{font-size:clamp(2.15rem,5vw,3.7rem);font-weight:600;letter-spacing:-.028em}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:600;letter-spacing:-.022em}
h3{font-size:1.16rem;font-weight:600;line-height:1.32;letter-spacing:-.012em}
h1 em,h2 em{font-family:var(--accent-italique);font-style:italic;font-weight:600;letter-spacing:-.01em}
h1 em{color:var(--or)}        /* le h1 vit sur le bandeau sombre : l'ambre du logo y est lisible */
h2 em{color:var(--or-texte)}  /* les h2 sont sur fond clair : variante assombrie */

p{margin:0 0 1.1rem}
p:last-child{margin-bottom:0}

a{color:var(--bleu);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--bleu-fonce)}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--bleu-nuit);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 8px 0;
}
.skip:focus{left:0;color:#fff}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--bleu);outline-offset:2px;border-radius:6px;
}

.eyebrow{
  font-family:var(--sans);
  font-size:.74rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--or-texte);margin:0 0 .85rem;
}
.eyebrow-light{color:#F0B860}

.muted{color:var(--muted)}

/* ==================================================================
   LES PANNEAUX DE BANDEAU

   Un titre pose a meme une photo — et pire encore, a meme une video —
   depend du cliche : le contraste change avec l'image, et l'ecole peut
   remplacer l'image quand elle veut. Le texte va donc dans un panneau
   opaque, dont la lisibilite ne depend de rien.

   Trois tons, pour que deux bandeaux voisins ne se ressemblent pas.
   Chaque couple encre/fond a ete mesure sur LES DEUX palettes — celle
   du site scolaire et celle, plus sombre, de l'universitaire. La valeur
   la plus juste des vingt-deux est a 4,69:1, au-dessus des 4,5 exiges.
   Ne pas eclaircir une encre ni assombrir un fond sans refaire le calcul.

   Les fonds sont des jetons : univ.css les redefinit pour sa palette.
   ================================================================== */
:root{
  --panneau-nuit:rgba(7,26,68,.92);
  --panneau-blanc:rgba(255,255,255,.95);
  --panneau-ambre:rgba(242,180,92,.95);
}

.panneau-sur{
  margin:0 0 .7rem;font-size:.74rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;
}
.panneau-titre{
  margin:0 0 .8rem;line-height:1.12;font-weight:700;
  font-size:clamp(1.55rem,3.6vw,2.6rem);
}
.panneau-titre em{font-style:italic}
.panneau-texte{
  margin:0 0 1.5rem;line-height:1.6;
  font-size:clamp(.95rem,1.4vw,1.05rem);
}

/* bleu nuit : encre claire sur fond sombre */
.panneau-nuit{background:var(--panneau-nuit);color:#fff;border-left-color:var(--or)}
.panneau-nuit .panneau-sur{color:#F2B45C}
.panneau-nuit .panneau-titre{color:#fff}
.panneau-nuit .panneau-titre em{color:#F2B45C}
.panneau-nuit .panneau-texte{color:#DCDFE6}

/* blanc : le plus sobre */
.panneau-blanc{background:var(--panneau-blanc);color:var(--texte);border-left-color:var(--or)}
.panneau-blanc .panneau-sur{color:var(--or-texte)}
.panneau-blanc .panneau-titre{color:var(--encre)}
.panneau-blanc .panneau-titre em{color:var(--or-texte)}
.panneau-blanc .panneau-texte{color:var(--texte)}

/* ambre : le plus chaud */
.panneau-ambre{background:var(--panneau-ambre);color:#1B2B45;border-left-color:#071A44}
.panneau-ambre .panneau-sur{color:#6B2E00}
.panneau-ambre .panneau-titre{color:var(--encre)}
.panneau-ambre .panneau-titre em{color:#7A1F00}
.panneau-ambre .panneau-texte{color:#1B2B45}

/* le bouton bleu nuit, pour les panneaux clairs ou l'ambre se noierait */
.btn-nuit{background:var(--bleu-nuit);color:#fff;box-shadow:0 8px 22px -10px rgba(7,26,68,.7)}
.btn-nuit:hover{background:#0F2C68;color:#fff;transform:translateY(-2px)}

/* ==================================================================
   LA BANDE DE CHIFFRES

   Elle ferme le bandeau des deux sites. Les chiffres ne peuvent pas
   tenir DANS un panneau blanc — l'encre claire y disparaitrait — et ils
   n'ont pas besoin de la photo derriere eux. Ils ont donc leur propre
   bande, en bleu nuit plein.
   ================================================================== */
.bande-chiffres{
  background:var(--bleu-nuit);color:#fff;
  padding:clamp(1.5rem,3.5vw,2.2rem) 0;
}
.chiffres-cles{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:0;
}
.chiffres-cles div{display:flex;flex-direction:column;gap:.15rem}
.chiffres-cles dt{
  font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;color:#F2B45C;
  line-height:1;font-variant-numeric:tabular-nums;
}
.chiffres-cles dd{margin:0;font-size:.82rem;color:rgba(255,255,255,.72);line-height:1.35}


/* ---------------- boutons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-size:.97rem;font-weight:700;letter-spacing:.01em;
  padding:.92rem 1.9rem;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
  text-align:center;
}
.btn-sm{padding:.6rem 1.25rem;font-size:.88rem}
/* Le bouton ambre portait du texte BLANC : 2,56:1 sur le site scolaire
   et 3,61:1 sur l'universitaire, loin des 4,5 exiges. C'est le bouton
   « S'inscrire », donc le plus important des deux sites, et il etait le
   moins lisible. Mesure le 21/09/2026.
   Le bleu nuit sur le meme ambre donne 6,60:1 au repos et 5,06:1 au
   survol. C'est aussi ce qui se fait de plus courant sur un aplat
   ambre : le blanc y est toujours limite. */
.btn-or{background:var(--or);color:#071A44;box-shadow:0 8px 22px -10px rgba(224,138,30,.85)}
.btn-or:hover{background:#C97A15;color:#071A44;transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(224,138,30,.95)}
.btn-bleu{background:var(--bleu);color:#fff;box-shadow:0 8px 22px -10px rgba(46,111,216,.8)}
.btn-bleu:hover{background:var(--bleu-fonce);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.75)}
/* .btn-ghost est ecrit en BLANC : il n'existe que pour le heros sombre.
   Sur un fond clair il devient invisible. .btn-ligne est son equivalent
   pour les sections claires : meme forme, encre lisible. */
.btn-ligne{
  background:transparent;color:var(--encre);border-color:var(--ligne);
}
.btn-ligne:hover{
  background:var(--bleu-pale);color:var(--bleu);border-color:var(--bleu);
}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}

/* ---------------- en-tete ---------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.site-header.scrolled{border-bottom-color:var(--ligne);box-shadow:0 4px 24px -14px rgba(15,36,64,.3)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:76px}

/* flex:none et nowrap : sans eux, la barre serrait la marque jusqu'a la
   casser en quatre lignes des que la fonte s'elargissait. Le nom d'un
   etablissement ne se coupe pas. */
.brand{display:flex;align-items:center;gap:clamp(.7rem,1.1vw,.85rem);color:var(--encre);flex:none}
.brand:hover{color:var(--encre)}
.brand-mark{width:clamp(50px,6vw,62px);height:clamp(50px,6vw,62px);object-fit:contain;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap}
.brand-text strong{font-family:var(--sans);font-size:clamp(1.06rem,1.9vw,1.28rem);font-weight:600;letter-spacing:-.02em;color:var(--encre)}
.brand-text span{font-size:clamp(.72rem,1vw,.8rem);letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600}

.nav{display:flex;align-items:center;gap:.4rem}
.nav>a{
  padding:.5rem .7rem;border-radius:8px;
  font-size:.91rem;font-weight:600;color:var(--texte);
  white-space:nowrap;            /* un intitulé ne se coupe jamais en deux */
  transition:color var(--t),background var(--t);
}
.nav>a:hover{color:var(--bleu);background:var(--bleu-pale)}
.nav>a.actif{color:var(--bleu)}
.nav .nav-cta{
  margin-left:.6rem;background:var(--bleu-nuit);color:#fff;
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  flex:none;
}
/* Le libelle etait un enfant flex sans garde-fou : la barre le comprimait
   a un pixel au lieu de le masquer franchement. On le fige ; quand la
   place manque vraiment, la regle ci-dessous le retire pour de bon et
   l'aria-label prend le relais. */
.nav .nav-cta > span{flex:none;white-space:nowrap}
.nav .nav-cta:hover{background:var(--bleu);color:#fff}
/* La taille de l'icône est imposée à trois niveaux (attributs HTML,
   règle de base, règle mobile) : sans cela elle s'étire jusqu'à
   remplir le bouton. */
.nav-cta .ico-cle,
.nav .nav-cta .ico-cle{
  width:18px;height:18px;
  min-width:18px;min-height:18px;
  max-width:18px;max-height:18px;
  flex:0 0 18px;
}

.burger{
  display:none;width:44px;height:44px;border:0;background:transparent;
  cursor:pointer;padding:10px;flex-direction:column;justify-content:space-between;
}
.burger span{display:block;height:2px;width:100%;background:var(--encre);border-radius:2px;transition:transform var(--t),opacity var(--t)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ---------------- hero ---------------- */
.hero{
  position:relative;overflow:hidden;color:#fff;isolation:isolate;
  min-height:min(90vh,880px);display:flex;align-items:center;
}

/* --- fond du hero : survol du chantier + affiche --- */
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--bleu-nuit-2);container-type:size}

/* L'affiche est le PREMIER etat du hero, pas un pis-aller : elle
   s'affiche tout de suite, la video se pose par-dessus quand elle
   demarre. C'est la meme image, donc la transition ne se voit pas. */
.hero-poster{
  position:absolute;inset:0;
  background:url("/images/hero/campus-poster.jpg?v=48b595c5") center 45%/cover no-repeat;
  transform:scale(1.03);
}

/* La video est servie par le site : plus d'iframe a agrandir pour
   masquer le titre et les commandes d'un lecteur tiers. object-fit
   suffit, et l'image n'est plus rognee de 35 % sans raison. */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%;
  opacity:0;transition:opacity 1.2s ease;
  pointer-events:none;
}
.hero-video.pret{opacity:1}


/* --- voile : c'est lui qui rend le texte lisible par-dessus la vidéo --- */
/* Le voile etait presque opaque (95 % a gauche) parce qu'il devait
   rendre lisible un texte pose dessus. Ce n'est plus son role : il ne
   sert qu'a asseoir le panneau et a garder les commandes visibles. La
   video du chantier se voit enfin. */
.hero-voile{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(101deg,
      rgba(5,26,52,.55) 0%,
      rgba(6,32,62,.38) 40%,
      rgba(8,38,72,.20) 72%,
      rgba(10,44,84,.10) 100%);
}
.hero-voile::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.6),transparent 74%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.6),transparent 74%);
}

/* --- renfort de lisibilité sur chaque texte du hero --- */
/* Les ombres portees compensaient un texte pose a meme la video. Le
   texte est desormais dans un panneau et les chiffres sur leur propre
   bande : plus rien ne flotte sur l'image, et une ombre sur de l'encre
   sombre posee sur du blanc ne ferait que salir les lettres. */

.hero-credit{margin:1.5rem 0 0;font-size:.75rem;color:rgba(255,255,255,.52);letter-spacing:.015em}
.hero-credit a{color:rgba(255,255,255,.74);text-decoration:underline;text-underline-offset:3px}
.hero-credit a:hover{color:#F2B45C}
.hero-inner{padding:clamp(5rem,10vw,7rem) clamp(1.1rem,4vw,2rem) clamp(3.5rem,7vw,5rem);max-width:1080px}
/* le panneau du bandeau d'accueil : meme geometrie que celui du
   carrousel universitaire, largeur un peu plus genereuse */
.hero-panneau{
  max-width:min(40rem,58%);
  border-radius:var(--r);border-left:5px solid var(--or);
  padding:clamp(1.6rem,3.6vw,2.8rem);
  backdrop-filter:blur(2px);
}
.hero-panneau .hero-actions{margin-bottom:0}
.hero-panneau .btn{min-height:44px}
@media (max-width:820px){
  .hero-panneau{max-width:none}
  .hero-panneau .btn{width:100%;justify-content:center}
}
.hero h1{color:#fff;margin-bottom:1.4rem;max-width:16ch}
.hero h1 em{color:#F2B45C}
.hero-lede{font-size:clamp(1.03rem,1.9vw,1.22rem);color:rgba(255,255,255,.86);max-width:60ch;margin-bottom:2.2rem;line-height:1.72}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:clamp(2.8rem,6vw,4.2rem)}

.hero-stats{
  display:flex;flex-wrap:wrap;gap:clamp(1.6rem,5vw,3.6rem);
  margin:0;padding-top:2rem;border-top:1px solid rgba(255,255,255,.18);
}
.hero-stats div{display:flex;flex-direction:column;gap:.15rem}
.hero-stats dt{
  font-family:var(--sans);font-size:clamp(2rem,4vw,2.9rem);font-weight:700;letter-spacing:-.03em;
  color:#F2B45C;line-height:1;font-variant-numeric:tabular-nums;
}
.hero-stats dt span{font-size:.42em;vertical-align:super;margin-left:.05em}
.hero-stats dd{margin:0;font-size:.82rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.7);line-height:1.45}

/* Les chiffres ont quitte le bandeau pour leur propre bande : le liseret
   et le retrait du haut servaient a les detacher du texte au-dessus, il
   n'y a plus de texte au-dessus. Le fond bleu nuit de la bande fait deja
   la separation. */
.bande-chiffres .hero-stats{border-top:none;padding-top:0}

/* ---------------- sections ---------------- */
.section{padding:clamp(3.8rem,8.5vw,7rem) 0;background:var(--fond)}
.section-alt{background:var(--bleu-pale-2)}
.section-head{max-width:64ch;margin:0 auto clamp(2.4rem,5vw,3.6rem);text-align:center}
.section-head h2{margin-bottom:1rem}
.section-lede{font-size:1.05rem;color:var(--texte)}

/* ---------------- bloc scinde ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split-text h2{margin-bottom:1.4rem}
.split-media{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre-forte)}
.split-media img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* ---------------- grilles ---------------- */
.grid{display:grid;gap:clamp(1rem,2.2vw,1.6rem)}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.grid-offre{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-infra{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
/* 9 facultes : 3x3 sur grand ecran, plutot qu'une derniere rangee orpheline */
@media (min-width:900px){.grid-offre{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.grid-infra{grid-template-columns:repeat(4,1fr)}}

/* piliers */
.pillar{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:2rem 1.7rem;transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--ombre-forte);border-color:transparent}
.pillar-icon{
  display:grid;place-items:center;width:54px;height:54px;border-radius:14px;
  background:var(--bleu-pale);color:var(--bleu);margin-bottom:1.2rem;
}
.pillar-icon svg{width:26px;height:26px}
.pillar h3{margin-bottom:.55rem}
.pillar p{font-size:.96rem;margin:0}

/* cartes offre */
.card{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:1.5rem 1.3rem 1.6rem;text-align:center;overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--ombre-forte);border-color:transparent}
/* le visuel affleure les bords de la carte : les marges negatives
   compensent exactement le padding de .card (1.5rem en haut, 1.3rem sur les cotes) */
.card-media{
  margin:-1.5rem -1.3rem 1.15rem;
  aspect-ratio:16/10;overflow:hidden;background:var(--bleu-nuit);
  border-radius:var(--r) var(--r) 0 0;
}
.card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.card:hover .card-media img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.card:hover .card-media img{transform:none}}
.card h3{font-size:1.06rem}

/* infrastructures */
.infra{
  position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  background:var(--bleu-nuit);box-shadow:var(--ombre);
  transition:transform var(--t),box-shadow var(--t);
}
.infra:hover{transform:translateY(-5px);box-shadow:var(--ombre-forte)}
.infra img{width:100%;aspect-ratio:1/1;object-fit:cover;opacity:.82;transition:opacity var(--t),transform .55s cubic-bezier(.4,0,.2,1)}
.infra:hover img{opacity:.62;transform:scale(1.06)}
.infra figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.5rem 1.2rem 1.2rem;
  background:linear-gradient(to top,rgba(6,32,62,.94) 12%,rgba(6,32,62,.55) 55%,transparent);
  color:#fff;
}
.infra figcaption h3{color:#fff;font-size:1.04rem;margin-bottom:.15rem}
.infra figcaption p{margin:0;font-size:.85rem;color:rgba(255,255,255,.78)}

/* partenaires */
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(1rem,2.4vw,1.8rem)}
.partner{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:1.5rem;display:grid;place-items:center;min-height:130px;
  transition:transform var(--t),box-shadow var(--t);
}
.partner:hover{transform:translateY(-4px);box-shadow:var(--ombre)}
.partner img{max-height:78px;width:auto;object-fit:contain}

/* ---------------- appel a l'action ---------------- */
.cta{position:relative;overflow:hidden;color:#fff;isolation:isolate;text-align:center}
.cta-bg{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(150deg,rgba(10,46,92,.94),rgba(6,32,62,.9)),url("/images/centre.jpg?v=e9872bbe") center/cover no-repeat;
}
.cta-inner{padding:clamp(3.6rem,8vw,6rem) clamp(1.1rem,4vw,2rem);max-width:820px}
.cta h2{color:#fff;margin-bottom:1.2rem}
.cta p{color:rgba(255,255,255,.85);margin-bottom:2rem;font-size:1.04rem}

/* ---------------- contact ---------------- */
.contact-grid{display:grid;grid-template-columns:minmax(240px,.8fr) 1.4fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:start}

.contact-info{display:flex;flex-direction:column;gap:1.5rem}
.info-item{display:flex;gap:1rem;align-items:flex-start}
.info-icon{
  display:grid;place-items:center;width:46px;height:46px;border-radius:12px;flex:none;
  background:var(--bleu-pale);color:var(--bleu);
}
.info-icon svg{width:22px;height:22px}
.info-item h3{font-size:1rem;margin-bottom:.25rem}
.info-item p{margin:0;font-size:.95rem;line-height:1.6}

.contact-form{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--ombre);
  display:flex;flex-direction:column;gap:1.1rem;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.42rem;margin:0}
.field label{font-size:.86rem;font-weight:700;color:var(--encre);letter-spacing:.01em}
.field label span{color:var(--or-texte)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:.97rem;color:var(--encre);
  padding:.8rem .95rem;border:1.5px solid var(--ligne);border-radius:10px;
  background:var(--blanc);width:100%;transition:border-color var(--t),box-shadow var(--t);
}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--bleu);box-shadow:0 0 0 4px rgba(46,111,216,.13);
}
.field input.erreur,.field textarea.erreur,.field select.erreur{border-color:#C0392B;box-shadow:0 0 0 4px rgba(192,57,43,.1)}

.pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-status{margin:0;font-size:.92rem;font-weight:600;min-height:1.2em}
.form-status.ok{color:#1E7A4B}
.form-status.ko{color:#C0392B}

/* ---------------- pied de page ---------------- */
.site-footer{background:var(--bleu-nuit-2);color:rgba(255,255,255,.72);padding:clamp(2.8rem,6vw,4rem) 0 2rem}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:1.6rem;text-align:center}
.footer-brand{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.footer-brand img{width:70px;height:70px;object-fit:contain}
.footer-brand p{margin:0;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.66)}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.5rem}
.footer-nav a{color:rgba(255,255,255,.8);font-size:.92rem;font-weight:600}
.footer-nav a:hover{color:#F2B45C}
/* ====================================================================
   LE RUBAN DES SITES DU GROUPE

   La Cite du Savoir tient trois sites : le pre-universitaire,
   l'universite et, plus tard, la fondation. Ils partagent la charte et
   le domaine, mais chacun a son adresse. Ce ruban ferme chaque page :
   c'est la seule chose qui, sur les deux sites, dit que les autres
   existent.

   Le site ou l'on se trouve est marque .actuel et n'est pas cliquable.
   Celui qui n'a pas ouvert est .ferme : grise, non cliquable, et il
   garde sa place pour que la famille sache qu'il viendra.

   Trois colonnes sur ecran large, une seule sous 700px. Chaque lien
   fait au moins 44px de haut au doigt (WCAG 2.5.5).
   ==================================================================== */
.sites-groupe{width:100%;padding-top:1.7rem;margin-top:.4rem;
  border-top:1px solid rgba(255,255,255,.13)}
.sites-groupe-titre{
  margin:0 0 .9rem;font-size:.72rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,255,255,.45);
}
.sites-groupe-liste{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;
}
.site-groupe{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;min-height:44px;padding:.75rem .9rem;border-radius:10px;
  text-align:center;text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  transition:background var(--t),border-color var(--t),transform var(--t);
}
a.site-groupe:hover{
  background:rgba(255,255,255,.11);border-color:rgba(242,180,92,.55);
  transform:translateY(-2px);
}
.site-groupe-nom{font-size:.9rem;font-weight:700;color:rgba(255,255,255,.9);line-height:1.3}
.site-groupe-sous{font-size:.78rem;color:rgba(255,255,255,.55);line-height:1.35}
a.site-groupe:hover .site-groupe-nom{color:#F2B45C}
.site-groupe-fleche{margin-top:.3rem;color:rgba(255,255,255,.5)}
a.site-groupe:hover .site-groupe-fleche{color:#F2B45C}

/* le site courant : il se nomme, il ne s'ouvre pas */
.site-groupe.actuel{
  background:rgba(242,180,92,.13);border-color:rgba(242,180,92,.45);
}
.site-groupe.actuel .site-groupe-nom{color:#F2B45C}

/* le site qui n'a pas encore ouvert */
.site-groupe.ferme{opacity:.5}
.site-groupe.ferme .site-groupe-sous{font-style:italic}

@media (max-width:700px){
  .sites-groupe-liste{grid-template-columns:1fr}
}

.footer-legal{
  margin:0;padding-top:1.5rem;width:100%;
  border-top:1px solid rgba(255,255,255,.13);
  font-size:.83rem;color:rgba(255,255,255,.5);
}

/* ---------------- retour en haut ---------------- */
.to-top{
  position:fixed;right:1.3rem;z-index:90;
  /* cale au-dessus de la bulle conseiller : hauteur de la bulle + un intervalle */
  bottom:calc(1.3rem + env(safe-area-inset-bottom) + 3.9rem);
  width:46px;height:46px;border-radius:50%;
  background:var(--bleu-nuit);color:#fff;display:grid;place-items:center;
  box-shadow:var(--ombre-forte);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--t),transform var(--t),visibility var(--t),background var(--t);
}
.to-top.visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--bleu);color:#fff}
.to-top svg{width:20px;height:20px}

/* ---------------- apparition au defilement ---------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.4,0,.2,1)}
.reveal.vu{opacity:1;transform:none}


/* =========================================================
   Site à pages séparées : bandeau de titre, fil d'Ariane
   et cartes d'accès depuis l'accueil.
   ========================================================= */

.page-tete{position:relative;overflow:hidden;color:#fff;isolation:isolate}
.page-tete-fond{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 64% 58% at 82% 14%,rgba(224,138,30,.24),transparent 62%),
    radial-gradient(ellipse 58% 64% at 10% 92%,rgba(46,111,216,.40),transparent 66%),
    linear-gradient(156deg,var(--bleu-nuit) 0%,var(--bleu-nuit-2) 100%);
}
.page-tete-fond::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 82%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 82%);
}
.page-tete-inner{
  padding:clamp(2.6rem,6vw,4.6rem) clamp(1.1rem,4vw,2rem) clamp(2.8rem,6vw,4.4rem);
  max-width:960px;
}
.page-tete h1{
  color:#fff;font-size:clamp(1.9rem,4.4vw,3.1rem);margin-bottom:1rem;max-width:20ch;
  text-shadow:0 2px 22px rgba(3,16,32,.4);
}
.page-tete h1 em{color:#F2B45C}
.page-tete-lede{
  font-size:clamp(1rem,1.8vw,1.15rem);color:rgba(255,255,255,.84);
  max-width:58ch;line-height:1.7;margin:0;
}

.fil{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin-bottom:1.5rem;font-size:.83rem;font-weight:600;
}
.fil a{color:rgba(255,255,255,.72)}
.fil a:hover{color:#F2B45C}
.fil span[aria-hidden]{color:rgba(255,255,255,.4)}
.fil span[aria-current]{color:#fff}

/* cartes d'accès de l'accueil */
.acces{align-items:stretch}
.acces-carte{
  display:flex;flex-direction:column;gap:.55rem;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:1.7rem 1.5rem 1.5rem;color:var(--texte);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.acces-carte:hover{
  transform:translateY(-5px);box-shadow:var(--ombre-forte);
  border-color:transparent;color:var(--texte);
}
.acces-num{
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  color:var(--or-texte);font-variant-numeric:tabular-nums;
}
.acces-carte h3{margin:0}
.acces-carte p{font-size:.94rem;margin:0;flex:1}
.acces-lien{
  font-size:.89rem;font-weight:700;color:var(--bleu);margin-top:.4rem;
  transition:gap var(--t);
}
.acces-carte:hover .acces-lien{color:var(--bleu-fonce)}

.footer-contact{margin:0}
.footer-contact a{color:rgba(255,255,255,.82);font-size:.92rem;font-weight:600}
.footer-contact a:hover{color:#F2B45C}

@media (max-width:620px){
  .page-tete-inner{padding-top:2.2rem;padding-bottom:2.4rem}
  .fil{margin-bottom:1.1rem;font-size:.78rem}
}


/* =========================================================
   Dossier de préinscription
   ========================================================= */

.dossier{max-width:52rem;margin:0 auto;display:flex;flex-direction:column;gap:1.6rem}

.bloc{
  border:1px solid var(--ligne);border-radius:var(--r);
  background:var(--blanc);box-shadow:var(--ombre);
  padding:1.6rem clamp(1.1rem,3vw,2rem) 1.8rem;
  margin:0;min-width:0;
  display:flex;flex-direction:column;gap:1.1rem;
}
.bloc legend{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--sans);font-size:1.16rem;font-weight:600;letter-spacing:-.015em;color:var(--encre);
  padding:0 .5rem;margin-left:-.5rem;
}
.bloc-num{
  display:grid;place-items:center;flex:none;
  width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--bleu);color:#fff;
  font-family:var(--sans);font-size:.86rem;font-weight:700;
}
.bloc-aide{font-size:.87rem;color:var(--muted);margin:0}
.oblig{color:var(--or-texte);font-weight:700}

.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.champs-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}

/* case à cocher du consentement */
.case{
  display:flex;align-items:flex-start;gap:.75rem;margin:0;
  padding:1rem 1.1rem;border-radius:10px;
  background:var(--bleu-pale);border:1px solid var(--ligne);
}
.case input[type="checkbox"]{
  width:1.15rem;height:1.15rem;margin:.15rem 0 0;flex:none;
  accent-color:var(--bleu);cursor:pointer;
}
.case label{font-size:.9rem;line-height:1.55;color:var(--texte);cursor:pointer;font-weight:400}

.btn-large{width:100%;padding:1.05rem 2rem;font-size:1.02rem}

/* message de confirmation après envoi */
.recu{
  border:1.5px solid var(--ok);border-radius:var(--r);
  background:var(--ok-soft);padding:1.6rem 1.5rem;
  display:flex;flex-direction:column;gap:.6rem;text-align:center;
}
.recu h3{color:var(--ok);font-size:1.25rem}
.recu p{margin:0;font-size:.96rem}
.recu .dossier-num{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:1.05rem;font-weight:700;color:var(--encre);
  background:var(--blanc);padding:.35rem .8rem;border-radius:6px;
  display:inline-block;margin-top:.3rem;
}

@media (max-width:780px){
  .champs-3{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .champs-2,.champs-3{grid-template-columns:1fr}
  .bloc legend{font-size:1.08rem}
}


/* séparateur du pied de page */
.footer-sep{margin:0 .5rem;color:rgba(255,255,255,.35)}

/* Sur ecran intermediaire, l'icone seule suffit : elle garde le bouton
   compact au lieu de pousser la barre sur deux lignes. Le seuil est passe
   de 1180 a 1500 px avec Montserrat, plus large qu'Archivo : a 1320 px la
   barre ne tient plus les deux libelles entiers. Celui des familles est
   garde, celui du personnel devient l'icone de cle — le bouton conserve
   son nom pour les lecteurs d'ecran via aria-label. */
@media (max-width:1500px){
  .nav>a{padding:.5rem .55rem;font-size:.875rem}
  .nav .nav-cta span{display:none}
  .nav .nav-cta-or span{display:inline}   /* la porte des familles garde son nom */
  .nav .nav-cta-or{padding:.6rem 1rem}
  .nav .nav-cta{padding:.6rem .8rem}
}


/* =========================================================
   Confort tactile et mobile
   Règles alignées sur les recommandations Apple et Google :
   44 px de zone tactile, 16 px dans les champs, respect des
   zones masquées par l'encoche et la barre d'accueil.
   ========================================================= */

/* Le retour visuel au doigt : discret, aux couleurs du site,
   plutôt que le rectangle gris par défaut du navigateur. */
a, button, summary, input, select, textarea, label{
  -webkit-tap-highlight-color:rgba(46,111,216,.14);
}

/* L'encoche et la barre d'accueil des iPhone récents recouvrent
   les bords : on décale le contenu de la hauteur qu'elles occupent. */
body{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.site-footer{padding-bottom:calc(2rem + env(safe-area-inset-bottom))}
.to-top{bottom:calc(1.3rem + env(safe-area-inset-bottom))}

/* --- Sur écran tactile : toute cible atteint 44 px --- */
@media (pointer:coarse){
  .footer-nav a,
  .footer-contact a,
  .fil a,
  .hero-credit a,
  .acces-lien,
  .info-item a{
    display:inline-flex;align-items:center;
    min-height:44px;
  }
  .footer-nav{gap:.1rem 1.2rem}
  .infra figcaption{padding-bottom:1rem}
  .nav .nav-cta{min-height:44px}
  .to-top{width:52px;height:52px}
  .to-top svg{width:22px;height:22px}
}

/* --- Champs de saisie : jamais sous 16 px sur mobile ---
   En dessous de ce seuil, iOS agrandit la page de force dès que
   le doigt touche un champ, et le visiteur se retrouve perdu. */
@media (max-width:900px){
  .field input, .field select, .field textarea,
  .case label,
  .recherche input{
    font-size:16px;
  }
  .field input, .field select{min-height:48px}
  .field textarea{min-height:140px}
  .case{padding:1.1rem}
  .case input[type="checkbox"]{width:1.35rem;height:1.35rem}
}

/* --- Lecture et respiration sur petit écran --- */
@media (max-width:620px){
  .bloc{padding:1.3rem 1.1rem 1.5rem}
  .bloc legend{font-size:1.05rem}
  .bloc-num{width:1.7rem;height:1.7rem;font-size:.8rem}
  .section-head{text-align:left}
  .hero-credit{font-size:.78rem;line-height:1.7}
  .partners{grid-template-columns:1fr 1fr}
  .infra figcaption h3{font-size:.98rem}
  .page-tete h1{max-width:100%}
}

/* --- Très petits téléphones (320 px) --- */
@media (max-width:360px){
  .shell{padding-left:.95rem;padding-right:.95rem}
  .btn{padding:.85rem 1.3rem;font-size:.93rem}
  .hero-stats{gap:1.1rem 1.6rem}
  .hero-stats dt{font-size:1.75rem}
  .partners{grid-template-columns:1fr}
}

/* --- Écran tactile en paysage : le hero ne doit pas remplir
       tout l'écran, sinon le contenu paraît inaccessible --- */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero-inner{padding-top:3rem;padding-bottom:2.5rem}
}


/* =========================================================
   Facultés et départements
   ========================================================= */

/* encadré rappelant l'autorisation ministérielle */
.officiel{
  border-left:3px solid var(--or);background:var(--or-pale);
  padding:1.3rem 1.5rem;border-radius:0 var(--r) var(--r) 0;
  margin:0 0 2.2rem;max-width:60rem;
}
.officiel-titre{
  font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--warn,#8A6212);margin:0 0 .5rem;
}
.officiel p{font-size:.95rem;margin:0}
.officiel abbr{text-decoration:underline dotted;cursor:help}

.faculte{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:1.6rem clamp(1.1rem,3vw,2rem);margin-bottom:1.1rem;
  scroll-margin-top:100px;
  transition:box-shadow var(--t),border-color var(--t);
}
.faculte:hover{box-shadow:var(--ombre);border-color:var(--ligne)}
.faculte-tete{display:flex;gap:1.1rem;align-items:flex-start;margin-bottom:1.2rem}
.faculte-rang{
  display:grid;place-items:center;flex:none;
  width:2.5rem;height:2.5rem;border-radius:8px;
  background:var(--bleu-nuit);color:#fff;
  font-size:.88rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.faculte-tete h2{font-size:clamp(1.15rem,2.3vw,1.45rem);margin-bottom:.3rem}
.faculte-chiffre{font-size:.87rem;color:var(--muted);margin:0}
.faculte-chiffre strong{color:var(--encre)}
.faculte-note{
  font-size:.9rem;color:var(--muted);margin:0 0 1rem;
  padding:.8rem 1rem;background:var(--surface,#F4F6F9);border-radius:8px;
}

.programmes{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:.45rem;
}
.programmes-deux{grid-template-columns:1fr 1fr}
.programmes li{
  position:relative;padding:.52rem .8rem .52rem 1.7rem;
  background:var(--bleu-pale);border-radius:7px;
  font-size:.93rem;color:var(--encre);
}
.programmes li::before{
  content:"";position:absolute;left:.75rem;top:1.15em;
  width:5px;height:5px;border-radius:50%;background:var(--bleu);
}
.programmes-projet li{background:var(--surface,#F4F6F9);color:var(--texte)}
.programmes-projet li::before{background:var(--muted)}

/* bandeau de synthèse en bas de page */
.recap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem;
  margin-top:2.4rem;padding:1.8rem clamp(1.1rem,3vw,2rem);
  background:var(--bleu-nuit);border-radius:var(--r);color:#fff;
}
.recap-item{display:flex;flex-direction:column;gap:.2rem}
.recap-nombre{
  font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:#F2B45C;
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.recap-texte{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.72);line-height:1.4}

/* --------- menu déroulant de la barre de navigation --------- */
.nav-groupe{position:relative;display:flex}
.nav-bouton{
  display:inline-flex;align-items:center;gap:.32rem;
  padding:.5rem .7rem;border:0;border-radius:8px;background:transparent;
  font-family:var(--sans);font-size:.91rem;font-weight:600;color:var(--texte);
  cursor:pointer;white-space:nowrap;
  transition:color var(--t),background var(--t);
}
.nav-bouton:hover,.nav-bouton[aria-expanded="true"]{color:var(--bleu);background:var(--bleu-pale)}
.nav-bouton .chevron{width:13px;height:13px;flex:none;transition:transform var(--t)}
.nav-bouton[aria-expanded="true"] .chevron{transform:rotate(180deg)}

/* ---- « Inscription » : un bouton qui ouvre un menu ----
   Il y avait deux entrees pour une seule demarche — un onglet « Futurs
   eleves & etudiants » dans la barre, et un bouton « Espace candidat »
   qui menait a l'un de ses items. Il n'en reste qu'une : le bouton
   porte le menu.

   .nav-bouton pose un fond transparent et une encre de texte courant :
   ces deux regles-la doivent ceder a celles du bouton ambre, d'ou la
   specificite plus forte. Le reste (la mise en ligne, le chevron) est
   conserve. */
.nav-bouton.nav-cta-or,
.nav-bouton.nav-cta-or:hover,
.nav-bouton.nav-cta-or[aria-expanded="true"]{
  background:var(--or);color:#071A44;
  padding:.6rem 1.25rem;border-radius:999px;
  box-shadow:0 8px 22px -10px rgba(224,138,30,.85);
}
.nav-bouton.nav-cta-or:hover,
.nav-bouton.nav-cta-or[aria-expanded="true"]{background:#C97A15}
/* le panneau s'aligne a DROITE : le bouton est en fin de barre, un menu
   ouvert vers la gauche sortirait de l'ecran */
.nav-groupe:has(> .nav-cta-or) .sous-menu{left:auto;right:0}

.sous-menu{
  position:absolute;top:calc(100% + .5rem);left:0;z-index:30;
  min-width:19rem;padding:.5rem;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  box-shadow:var(--ombre-forte);
  display:flex;flex-direction:column;gap:.1rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
}
.sous-menu.ouvert{opacity:1;visibility:visible;transform:none}
.sous-menu a{
  padding:.6rem .75rem;border-radius:7px;
  font-size:.9rem;font-weight:500;color:var(--texte);line-height:1.35;
  transition:background var(--t),color var(--t);
}
.sous-menu a:hover{background:var(--bleu-pale);color:var(--bleu)}
.sous-menu .sous-menu-tout{
  margin-top:.25rem;padding-top:.6rem;border-top:1px solid var(--ligne);
  font-weight:700;color:var(--bleu);
}

@media (max-width:820px){
  .programmes-deux{grid-template-columns:1fr}
  .faculte-tete{gap:.8rem}
  .faculte-rang{width:2.1rem;height:2.1rem;font-size:.8rem}
}


/* --------- page Offre : deux volets --------- */
.volet{max-width:58rem;margin:0 0 1.6rem}
.volet-second{margin-top:3.4rem;padding-top:3rem;border-top:1px solid var(--ligne)}
.volet-etiquette{
  font-size:.73rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--or-texte);margin:0 0 .6rem;
}
.volet h2{margin-bottom:.7rem}
.volet-intro{font-size:1.02rem;color:var(--texte);margin:0}

/* ====================================================================
   LE RENVOI VERS L'UNIVERSITE

   Depuis septembre 2026 le superieur a son propre site. La page d'offre
   ne liste donc plus les six facultes : elle porte ce seul bloc, qui
   dit ou elles sont. Il est volontairement plus sombre que les cartes
   scolaires autour : c'est une sortie du site, pas une page de plus.

   Le texte et le bouton passent l'un sous l'autre sous 720px, et le
   bouton garde 44px de haut au doigt (WCAG 2.5.5).
   ==================================================================== */
.renvoi-univ{
  display:grid;grid-template-columns:1fr auto;gap:clamp(1.3rem,3vw,2.4rem);
  align-items:center;margin-top:clamp(2.2rem,5vw,3.4rem);
  background:var(--bleu-nuit);border-radius:var(--r);color:#fff;
  padding:clamp(1.5rem,3.5vw,2.5rem);box-shadow:var(--ombre-forte);
}
.renvoi-univ .volet-etiquette{color:#F2B45C}
.renvoi-univ h2{color:#fff;font-size:clamp(1.3rem,2.6vw,1.75rem);margin:0 0 .6rem}
.renvoi-univ p{color:rgba(255,255,255,.82);margin:0;font-size:.97rem;max-width:62ch}
.renvoi-univ .btn{
  background:#F2B45C;color:var(--bleu-nuit);border-color:transparent;
  white-space:nowrap;min-height:44px;
}
.renvoi-univ .btn:hover{background:#fff;color:var(--bleu-nuit);transform:translateY(-2px)}
.renvoi-univ .btn svg{margin-left:.15rem}

@media (max-width:720px){
  .renvoi-univ{grid-template-columns:1fr;text-align:left}
  .renvoi-univ .btn{justify-self:stretch;justify-content:center}
}

/* carte cliquable menant au detail de la faculte */
.card-lien{text-decoration:none;color:var(--texte);display:flex;flex-direction:column}
.card-lien:hover{color:var(--texte)}
.card-lien h3{margin-bottom:.3rem}
.card-nombre{
  font-size:.82rem;font-weight:600;color:var(--bleu);margin:0;
}
.card-lien:hover .card-nombre{color:var(--bleu-fonce)}


/* --------- débouchés d'un pôle --------- */
.debouches{
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--ligne);
}
.debouches h3{
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--or-texte);margin-bottom:.5rem;
}
.debouches p{font-size:.93rem;color:var(--texte);margin:0;max-width:60rem}

/* --------- parcours de candidature --------- */
.etapes{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.1rem;
  counter-reset:etape;
}
.etape{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;
  position:relative;
}
.etape-num{
  display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--or);color:#fff;font-weight:700;font-size:.95rem;margin-bottom:.2rem;
}
.etape h3{font-size:1.04rem;margin:0}
.etape p{font-size:.93rem;margin:0}


/* --------- visuel en tête de chaque pôle --------- */
.faculte-illustree{padding-top:0;overflow:hidden}
.faculte-visuel{
  margin:0 calc(-1 * clamp(1.1rem,3vw,2rem)) 1.5rem;
  aspect-ratio:16/7;overflow:hidden;background:var(--bleu-nuit);
}
.faculte-visuel img{width:100%;height:100%;object-fit:cover;display:block}

/* --------- mot de la fondatrice --------- */
.mot-fondatrice{
  display:grid;grid-template-columns:minmax(0,15rem) 1fr;
  gap:clamp(1.6rem,4vw,3rem);align-items:start;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:clamp(1.4rem,3.5vw,2.6rem);box-shadow:var(--ombre);
}
.mot-portrait{margin:0;display:flex;flex-direction:column;gap:.8rem}
.mot-portrait img{
  width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 22%;
  border-radius:var(--r);
}
.mot-portrait figcaption{display:flex;flex-direction:column;gap:.1rem}
.mot-portrait strong{color:var(--encre);font-size:1rem;font-weight:600}
.mot-portrait span{
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--or-texte);
}
/* La phrase d'ouverture se tient hors de la citation : c'est l'intention
   du projet en une ligne, pas le premier paragraphe de l'adresse. */
.mot-accroche{
  margin:.4rem 0 1.4rem;
  font-style:italic;font-weight:600;
  font-size:clamp(1.12rem,2.2vw,1.4rem);line-height:1.5;
  color:var(--encre);letter-spacing:-.01em;
}
.mot-texte blockquote{
  margin:0;padding:0 0 0 1.3rem;border-left:3px solid var(--or);
}
.mot-texte blockquote p{
  font-size:clamp(.98rem,1.7vw,1.05rem);line-height:1.75;color:var(--texte);
  margin:0 0 1rem;
}
.mot-texte blockquote p:last-child{margin-bottom:0}
/* Trois phrases de l'adresse tiennent sur une ligne et marquent une
   respiration : « C'est le sens de la Cite du Savoir. » On les laisse
   respirer au lieu de les noyer dans le flux. */
.mot-texte blockquote p:nth-child(3),
.mot-texte blockquote p:nth-child(5),
.mot-texte blockquote p:nth-child(9){
  font-weight:600;color:var(--encre);
}
/* La chute — le filet puis les deux dernieres lignes — n'appartient
   qu'au texte integral. L'extrait de l'accueil s'arrete sur « C'est le
   sens de la Cite du Savoir. » : c'est une respiration, pas une fin. */
.mot-texte blockquote:not(.mot-extrait) p:last-child{
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--ligne);
  font-weight:600;color:var(--encre);
}
.mot-extrait p:last-child{font-weight:600;color:var(--encre)}
.mot-signature{
  margin-top:1.4rem;font-style:italic;
  font-size:1.1rem;font-weight:600;color:var(--encre);line-height:1.4;
}
.mot-role{
  display:block;margin-top:.15rem;font-style:normal;font-weight:600;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--or-texte);
}

/* --------- enseignants-chercheurs --------- */
.recrutement{
  display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1.4rem,3vw,2.5rem);
  background:var(--bleu-nuit);border-radius:var(--r);color:#fff;
  padding:clamp(1.6rem,3.5vw,2.6rem);align-items:center;
}
.recrutement-texte h3{color:#fff;font-size:1.3rem;margin-bottom:.7rem}
.recrutement-texte p{color:rgba(255,255,255,.82);margin-bottom:1.3rem;font-size:.97rem}
.recrutement-chiffres{display:flex;flex-direction:column;gap:1rem;margin:0}
.recrutement-chiffres div{display:flex;align-items:baseline;gap:.8rem}
.recrutement-chiffres dt{
  font-size:1.9rem;font-weight:700;color:#F2B45C;line-height:1;
  font-variant-numeric:tabular-nums;min-width:2.6rem;
}
.recrutement-chiffres dd{margin:0;font-size:.86rem;color:rgba(255,255,255,.75);line-height:1.4}

.disciplines{margin-top:2.6rem}
.disciplines-grille{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;
}
.discipline{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:1.3rem 1.2rem;
}
.discipline h4{font-size:1rem;margin:0 0 .4rem;color:var(--encre);font-weight:600}
.discipline p{font-size:.9rem;margin:0;color:var(--texte)}

/* fiche d'un enseignant, prête pour les futurs profils */
.prof{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;
}
.prof-photo{aspect-ratio:5/6;overflow:hidden;background:var(--bleu-pale)}
.prof-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.prof-infos{padding:1rem 1.1rem 1.2rem}
.prof-statut{
  font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--or-texte);margin:0 0 .25rem;
}
.prof-infos h3{font-size:1.02rem;margin:0 0 .3rem}
.prof-discipline{font-size:.88rem;color:var(--muted);margin:0 0 .6rem}
.prof-etiquettes{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.prof-etiquettes li{
  font-size:.72rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;
  background:var(--bleu-pale);color:var(--bleu-fonce);
}

/* --------- vie scolaire --------- */
.sous-titre-bloc{
  font-size:1.18rem;margin:2.6rem 0 1.2rem;color:var(--encre);
}
.horaires{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem;
  margin-bottom:1rem;
}
.horaire{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.2rem;
}
.horaire-label{
  font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.horaire-heure{font-size:1.12rem;font-weight:600;color:var(--encre);font-variant-numeric:tabular-nums}

.services{align-items:stretch}
.service{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;
  transition:transform var(--t),box-shadow var(--t);
}
.service:hover{transform:translateY(-3px);box-shadow:var(--ombre)}
.service-ico{
  display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  background:var(--bleu-pale);color:var(--bleu);margin-bottom:.3rem;
}
.service-ico svg{width:22px;height:22px}
.service h4{font-size:1rem;margin:0;color:var(--encre);font-weight:600}
.service p{font-size:.9rem;margin:0}

.familles{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem}
.famille{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:1.3rem 1.2rem;
}
.famille h4{font-size:.99rem;margin:0 0 .7rem;color:var(--encre);font-weight:600}
.famille ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.famille li{
  font-size:.83rem;padding:.28rem .65rem;border-radius:999px;
  background:var(--bleu-pale);color:var(--encre);
}

.calendrier{width:100%;border-collapse:collapse;font-size:.94rem;min-width:26rem}
.calendrier th[scope="col"]{
  text-align:left;font-size:.73rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:.8rem 1rem;background:var(--bleu-pale);
}
.calendrier th[scope="row"]{text-align:left;font-weight:600;color:var(--encre);padding:.8rem 1rem}
.calendrier td{padding:.8rem 1rem;color:var(--texte)}
.calendrier tbody tr{border-bottom:1px solid var(--ligne);background:var(--blanc)}
.calendrier tbody tr:last-child{border-bottom:0}
.note-calendrier{font-size:.87rem;color:var(--muted);margin-top:.9rem}
.visuellement-cache{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

@media (max-width:820px){
  .mot-fondatrice{grid-template-columns:1fr}
  .mot-portrait{max-width:14rem}
  .recrutement{grid-template-columns:1fr}
}


/* =========================================================
   Parler à un conseiller
   Bouton flottant présent sur toutes les pages, plutôt que
   dans la barre : il reste visible pendant toute la lecture.
   ========================================================= */

.bulle-conseiller{
  position:fixed;right:1.3rem;bottom:calc(1.3rem + env(safe-area-inset-bottom));z-index:95;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.3rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--or);color:#fff;
  font-family:var(--sans);font-size:.92rem;font-weight:700;
  box-shadow:0 8px 26px -8px rgba(224,138,30,.75);
  transition:transform var(--t),box-shadow var(--t),background var(--t);
}
.bulle-conseiller:hover{background:#C97A15;transform:translateY(-2px)}
.bulle-conseiller svg{flex:none}

.voile-conseiller{
  position:fixed;inset:0;z-index:110;
  background:rgba(6,32,62,.62);backdrop-filter:blur(3px);
  animation:apparait .25s ease;
}
@keyframes apparait{from{opacity:0}to{opacity:1}}

.fenetre-conseiller{
  position:fixed;z-index:120;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(94vw,34rem);max-height:88vh;overflow-y:auto;
  background:var(--blanc);border-radius:16px;
  border-top:4px solid var(--or);
  padding:clamp(1.5rem,4vw,2.2rem);
  box-shadow:0 32px 80px -24px rgba(3,16,32,.55);
  animation:monte .28s cubic-bezier(.4,0,.2,1);
}
@keyframes monte{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}

.fermer-conseiller{
  position:absolute;top:1rem;right:1rem;
  width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:var(--surface);color:var(--texte);display:grid;place-items:center;
  transition:background var(--t),color var(--t);
}
.fermer-conseiller:hover{background:var(--bleu-pale);color:var(--bleu)}

.fenetre-conseiller h2{font-size:1.45rem;margin-bottom:.4rem}
.conseiller-intro{font-size:.95rem;color:var(--muted);margin-bottom:1.4rem}

.conseiller-choix{display:grid;gap:.8rem}
.choix{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
  padding:1.1rem 1.2rem;border:1.5px solid var(--ligne);border-radius:12px;
  background:var(--blanc);text-align:left;cursor:pointer;width:100%;
  font-family:var(--sans);color:var(--texte);
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.choix:hover{border-color:var(--bleu);transform:translateY(-2px);box-shadow:var(--ombre);color:var(--texte)}
.choix-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;flex:none}
.choix-whatsapp .choix-ico{background:#E7F8EE;color:#1FA855}
.choix-whatsapp:hover{border-color:#1FA855}
.choix-rappel .choix-ico{background:var(--or-pale);color:var(--or-texte)}
.choix-rappel:hover{border-color:var(--or)}
.choix-texte{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.choix-texte strong{font-size:1rem;color:var(--encre);font-weight:600}
.choix-texte span{font-size:.85rem;color:var(--muted)}
.choix-fleche{font-size:1.2rem;color:var(--muted);transition:transform var(--t)}
.choix:hover .choix-fleche{transform:translateX(3px)}

.formulaire-rappel{display:flex;flex-direction:column;gap:.9rem;margin-top:1.3rem}
.alerte-rappel{
  margin-top:1.3rem;padding:1rem 1.2rem;border-radius:10px;
  background:var(--ok-soft);color:var(--ok);font-size:.95rem;font-weight:600;text-align:center;
}
.conseiller-direct{
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--ligne);
  font-size:.9rem;color:var(--muted);text-align:center;
}

@media (max-width:620px){
  .bulle-conseiller{
    right:1rem;left:auto;padding:.8rem 1.1rem;font-size:.87rem;
  }
  .bulle-conseiller span{display:none}
  .bulle-conseiller{width:52px;height:52px;justify-content:center;padding:0}
  .choix{grid-template-columns:auto 1fr;gap:.8rem}
  .choix-fleche{display:none}
}


/* --------- fond photographique des bandeaux de page --------- */
.page-tete-photo{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  transform:scale(1.02);
}
/* Sur une page illustrée, le voile doit être plus dense : le texte
   passe au-dessus d'une photo, pas d'un aplat. */
.page-tete-illustree .page-tete-fond{
  background:
    linear-gradient(100deg,
      rgba(5,26,52,.95) 0%,
      rgba(6,32,62,.89) 42%,
      rgba(8,38,72,.74) 72%,
      rgba(10,46,92,.62) 100%);
}
.page-tete-illustree h1{text-shadow:0 2px 22px rgba(3,16,32,.55)}
.page-tete-illustree .page-tete-lede{text-shadow:0 1px 14px rgba(3,16,32,.6)}
.page-tete-illustree .fil a,
.page-tete-illustree .fil span{text-shadow:0 1px 10px rgba(3,16,32,.65)}


/* --------- métiers, en cartes --------- */
.metiers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.7rem;
}
.metier{
  display:flex;flex-direction:column;gap:.15rem;
  padding:.85rem 1rem;border-radius:10px;
  background:var(--blanc);border:1px solid var(--ligne);
  transition:border-color var(--t),transform var(--t);
}
.metier:hover{border-color:var(--or);transform:translateY(-2px)}
.metier strong{font-size:.93rem;color:var(--encre);font-weight:600;line-height:1.3}
.metier span{font-size:.79rem;color:var(--muted)}

/* ---------------- responsive ---------------- */
@media (max-width:940px){
  .split{grid-template-columns:1fr}
  .split-media{order:-1}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:1319px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:76px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:.2rem;
    background:var(--blanc);border-bottom:1px solid var(--ligne);
    padding:1rem clamp(1.1rem,4vw,2rem) 1.6rem;
    box-shadow:0 18px 40px -20px rgba(15,36,64,.4);
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity var(--t),transform var(--t),visibility var(--t);
    max-height:calc(100vh - 76px);overflow-y:auto;
  }
  .nav.ouvert{transform:none;opacity:1;visibility:visible}
  .nav>a{padding:.85rem .6rem;font-size:1rem;border-radius:10px}
  .nav-groupe{flex-direction:column;width:100%}
  .nav-bouton{width:100%;justify-content:space-between;padding:.85rem .6rem;font-size:1rem}
  /* (les volets coulissants sont définis plus bas) */

  .nav .nav-cta{
    margin:.7rem 0 0;justify-content:center;gap:.55rem;
    padding:.9rem 1.2rem;min-height:52px;font-size:.97rem;
  }
  .nav .nav-cta span{display:inline;white-space:nowrap}
  .nav .nav-cta .ico-cle{width:18px;height:18px;flex:0 0 18px}
  .nav>a{padding:.85rem .6rem;font-size:1rem}
}

@media (max-width:620px){
  body{font-size:16px}
  .hero{min-height:auto}
  .hero-poster{background-position:center center}
  .field-row{grid-template-columns:1fr}
  .hero-stats{gap:1.4rem 2.2rem}
  .hero-actions .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  /* la video ne se charge meme pas : le script s'arrete avant (voir
     videoHero dans main.js). Ici on neutralise aussi le leger zoom de
     l'affiche, qui est une animation comme une autre. */
  .hero-video{display:none}
  .hero-poster{transform:none}
}

@media print{
  .site-header,.to-top,.burger,.contact-form{display:none}
  body{background:#fff;color:#000}
  .hero,.cta{color:#000}
  .hero-bg,.cta-bg{display:none}
}

/* =====================================================================
   LES SIX PÔLES EN CARTES
   La carte entière est le lien : la cible fait plus de 200 px de haut,
   très au-dessus des 44 px exigés au doigt.
   Le dégradé n'est pas peint sur une carte choisie d'avance : il se
   révèle au survol, donc les six pôles sont traités à égalité.
   ===================================================================== */
.poles-grille{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));
  gap:1rem;margin:0 0 2.8rem;
}
.pole{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  padding:1.5rem 1.4rem 1.3rem;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  text-decoration:none;color:inherit;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
/* le fond dégradé, peint sous le contenu */
.pole::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(145deg,var(--bleu-nuit) 0%,var(--bleu-fonce) 58%,var(--bleu) 100%);
  opacity:0;transition:opacity var(--t);
}
.pole:hover,.pole:focus-visible{
  transform:translateY(-4px);box-shadow:var(--ombre-forte);border-color:transparent;
}
.pole:hover::before,.pole:focus-visible::before{opacity:1}

/* le rang en chiffre fantôme, dans l'angle */
.pole-rang{
  position:absolute;top:.35rem;right:.9rem;z-index:1;
  font-size:3.6rem;font-weight:800;line-height:1;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;color:var(--bleu-pale);
  transition:color var(--t);pointer-events:none;
}
.pole:hover .pole-rang,.pole:focus-visible .pole-rang{color:rgba(255,255,255,.3)}
/* pose sur la photo, le chiffre a besoin d'un halo pour rester lisible */
.pole-rang{
  color:rgba(255,255,255,.62);
  text-shadow:0 1px 10px rgba(12,39,96,.45);
}

/* La photo de la faculte, en tete de carte. Elle remplace un picto
   « + » qui etait le meme pour les six et ne disait rien. Elle sort de
   la boite pour aller toucher les trois bords : le contenu, lui, garde
   son retrait. */
.pole-photo{
  display:block;align-self:stretch;flex:none;
  margin:-1.5rem -1.4rem .3rem;
  aspect-ratio:16/9;overflow:hidden;background:var(--fond);
  border-radius:var(--r) var(--r) 0 0;
}
.pole-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--t),filter var(--t);
}
.pole:hover .pole-photo img,
.pole:focus-visible .pole-photo img{transform:scale(1.04)}
/* au survol la carte passe en bleu nuit : la photo s'assombrit avec
   elle, sinon elle reste un rectangle criard au-dessus du degrade. */
.pole:hover .pole-photo img,
.pole:focus-visible .pole-photo img{filter:brightness(.82)}

.pole h3{
  font-size:1.05rem;line-height:1.32;margin:0;color:var(--encre);
  transition:color var(--t);
}
.pole-desc{
  font-size:.89rem;line-height:1.55;margin:0;color:var(--texte);
  transition:color var(--t);
}
.pole:hover h3,.pole:focus-visible h3{color:#fff}
.pole:hover .pole-desc,.pole:focus-visible .pole-desc{color:rgba(255,255,255,.84)}

/* pastilles : reprennent la pastille bleue déjà utilisée pour les programmes */
.pole-puces{
  list-style:none;margin:auto 0 0;padding:.25rem 0 0;
  display:flex;flex-wrap:wrap;gap:.35rem;
}
.pole-puces li{
  font-size:.73rem;font-weight:600;padding:.3rem .62rem;border-radius:999px;
  background:var(--bleu-pale);color:var(--bleu-fonce);white-space:nowrap;
  transition:background var(--t),color var(--t);
}
.pole:hover .pole-puces li,.pole:focus-visible .pole-puces li{
  background:rgba(255,255,255,.15);color:#fff;
}
/* le pôle encore en instruction se signale par le contenu, pas par la décoration */
.puce-projet{background:var(--or-pale)!important;color:#8A6212!important}
.pole:hover .puce-projet,.pole:focus-visible .puce-projet{
  background:rgba(242,180,92,.26)!important;color:#FCE4BE!important;
}

.pole-lien{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.84rem;font-weight:700;color:var(--bleu);
  transition:color var(--t),gap var(--t);
}
.pole-lien svg{width:.85rem;height:.85rem;display:block}
.pole:hover .pole-lien,.pole:focus-visible .pole-lien{color:#F2B45C;gap:.6rem}

/* le secteur d'un métier devient une pastille, même langage que les pôles */
.metier span{
  align-self:flex-start;margin-top:.3rem;
  font-size:.72rem;font-weight:600;padding:.22rem .55rem;border-radius:999px;
  background:var(--bleu-pale);color:var(--bleu-fonce);
}

@media (prefers-reduced-motion:reduce){
  .pole,.pole::before,.pole-rang,.pole-ico,.pole h3,.pole-desc,
  .pole-puces li,.pole-lien{transition:none}
  .pole:hover,.pole:focus-visible{transform:none}
}


/* =====================================================================
   BANDEAU DÉFILANT DES PARTENAIRES
   Deux séries identiques se suivent. On translate d'exactement une série
   plus un intervalle — soit -50% corrigé de la moitié de l'intervalle,
   sans quoi la boucle saute d'un demi-écart à chaque tour.
   ===================================================================== */
.section-defile{
  --ecart:clamp(1.8rem,4vw,3.4rem);
  --logo-l:clamp(96px,11vw,132px);
  --logo-h:clamp(40px,5.2vw,54px);
  padding:clamp(2.4rem,5vw,3.6rem) 0;
  background:var(--blanc);border-top:1px solid var(--ligne);
}
.defile-titre{
  font-size:.74rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin:0 0 1.6rem;
}
.defile{
  overflow:hidden;
  /* les logos s'effacent sur les bords au lieu d'être coupés net */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.defile-piste{
  display:flex;gap:var(--ecart);width:max-content;
  animation:defiler 34s linear infinite;
}
.defile:hover .defile-piste,
.defile:focus-within .defile-piste{animation-play-state:paused}
.defile-serie{
  display:flex;align-items:center;gap:var(--ecart);
  list-style:none;margin:0;padding:0;
}
/* chaque logo recoit la meme boite et s'y inscrit : sans cela un logo
   horizontal ecrase visuellement les sceaux carres */
.defile-serie li{
  flex:none;display:grid;place-items:center;
  width:var(--logo-l);height:var(--logo-h);
}
/* dimensions explicites, jamais en pourcentage : dans une grille centree un
   max-height en % n'est pas resolu et l'image deborde de sa case */
.defile-serie img{
  max-width:var(--logo-l);max-height:var(--logo-h);
  width:auto;height:auto;object-fit:contain;
}
@keyframes defiler{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - var(--ecart) / 2))}
}
.defile-lien{text-align:center;margin:1.6rem 0 0;font-size:.9rem;font-weight:600}
.defile-lien a{color:var(--bleu);text-decoration:none}
.defile-lien a:hover{color:var(--bleu-fonce);text-decoration:underline}

/* sans mouvement : les logos s'alignent simplement, on peut les faire défiler au doigt */
@media (prefers-reduced-motion:reduce){
  .defile{overflow-x:auto}
  .defile-piste{animation:none}
  .defile-serie:last-child{display:none}
}

/* =====================================================================
   PAGE D'UN PÔLE
   Le bandeau de chiffres passe en tête : le visiteur arrive de la carte
   et veut d'abord vérifier l'ordre de grandeur — combien de programmes,
   combien de places, quel diplôme.
   ===================================================================== */
.recap-haut{margin-top:0;margin-bottom:2.4rem}

/* l'article repris de la page d'ensemble perd sa carte : il EST la page */
.pole-page .faculte{
  background:none;border:0;border-radius:0;padding:0;margin:0;
}
.pole-page .faculte:hover{box-shadow:none}
.pole-page .debouches{margin-top:2.4rem;padding-top:1.8rem}
.pole-page .debouches h2{
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--or-texte);margin-bottom:.9rem;
}
.pole-page .faculte-note{margin-bottom:1.4rem}
.pole-page .programmes{gap:.55rem}
.pole-page .programmes li{padding:.7rem 1rem .7rem 1.9rem;font-size:.97rem}
.pole-page .programmes li::before{left:.85rem;top:1.25em}

.pole-retour{margin:2.6rem 0 0;font-size:.92rem;font-weight:600}
.pole-retour a{color:var(--bleu);text-decoration:none}
.pole-retour a:hover{color:var(--bleu-fonce);text-decoration:underline}

/* le fil d'Ariane des pages de pôle compte trois niveaux : il doit pouvoir
   passer à la ligne sur un téléphone plutôt que déborder */
.fil{flex-wrap:wrap}

/* =====================================================================
   FICHES DES ENSEIGNANTS-CHERCHEURS
   Le gabarit accueille indifféremment un portrait ou, tant que le poste
   n'est pas pourvu, un pictogramme neutre : rien n'est à refaire le jour
   où les affectations tombent.
   ===================================================================== */
.profs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(12.4rem,1fr));
  gap:1rem;margin-bottom:1.4rem;
}
.prof{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.prof:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte);border-color:transparent}

.prof-photo{aspect-ratio:5/6;overflow:hidden;background:var(--bleu-pale)}
.prof-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* poste non pourvu : aplat calme, surtout pas une fausse photo */
.prof-photo-vide{
  display:grid;place-items:center;color:var(--bleu);opacity:.42;
  background:linear-gradient(160deg,var(--bleu-pale) 0%,var(--bleu-pale-2) 100%);
}

.prof-infos{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem}
.prof-statut{
  font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--or-texte);margin:0;
}
.prof-infos h3{font-size:1rem;line-height:1.32;margin:0;color:var(--encre)}
.prof-discipline{font-size:.86rem;color:var(--muted);margin:0}
.prof-etiquettes{list-style:none;margin:.15rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.prof-etiquettes li{
  font-size:.71rem;font-weight:600;padding:.26rem .55rem;border-radius:999px;
  background:var(--bleu-pale);color:var(--bleu-fonce);
}

.profs-note{
  font-size:.9rem;color:var(--muted);margin:0 0 2.4rem;max-width:52rem;
}

@media (prefers-reduced-motion:reduce){
  .prof{transition:none}
  .prof:hover{transform:none}
}

/* lien de suivi, sur le reçu de préinscription */
.recu-suivi{margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--ligne)}
.recu-suivi a{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:700;color:var(--bleu);text-decoration:none;
}
.recu-suivi a:hover{color:var(--bleu-fonce);text-decoration:underline}

/* Espace candidat : même gabarit que le bouton administrateur, dans l'ambre
   de la préinscription. Les deux portes se distinguent par la couleur, pas
   par la forme — le visiteur comprend que ce sont deux entrées de même rang. */
/* Meme correction que pour .btn-or : du blanc sur cet ambre donne 2,56:1
   au repos et 3,61:1 au survol, loin des 4,5 exiges — et c'est la porte
   d'inscription, la plus importante de la barre. Le bleu nuit donne
   6,60:1 et 4,69:1. Mesure le 21/09/2026. */
.nav .nav-cta-or{background:var(--or);color:#071A44}
.nav .nav-cta-or:hover{background:var(--or-fonce);color:#071A44}

/* =====================================================================
   ACTUALITÉS
   Un établissement en construction doit montrer qu'il avance : c'est ce
   que font les deux sites de référence, et ce qui manquait ici.
   ===================================================================== */
.actus{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.2rem;
}
.actu{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.actu:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte);border-color:transparent}
.actu-visuel{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bleu-nuit)}
.actu-visuel img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.4,0,.2,1)}
.actu:hover .actu-visuel img{transform:scale(1.05)}
.actu-corps{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.actu-meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:0;font-size:.78rem}
.actu-cat{
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.24rem .6rem;border-radius:999px;background:var(--bleu-pale);color:var(--bleu-fonce);
}
.actu-meta time{color:var(--muted);font-weight:600}
.actu h3{font-size:1.05rem;line-height:1.34;margin:0}
.actu h3 a{color:var(--encre);text-decoration:none}
.actu h3 a:hover{color:var(--bleu)}
.actu-chapeau{font-size:.9rem;color:var(--texte);margin:0}
.actus-tout{margin:1.8rem 0 0;font-size:.94rem;font-weight:600}
.actus-tout a{color:var(--bleu);text-decoration:none}
.actus-tout a:hover{text-decoration:underline}

/* la page complète : un article par bloc */
.actu-longue{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(1.2rem,3vw,2.4rem);
  /* pas d'align-items:start : la colonne visuelle doit s'etirer sur la
     hauteur de la rangee, sinon l'image reprend sa largeur naturelle
     (1400 px) et deborde sur le texte */
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  overflow:hidden;margin-bottom:1.4rem;scroll-margin-top:100px;
}
.actu-longue-visuel{overflow:hidden;background:var(--bleu-nuit)}
.actu-longue-visuel img{width:100%;height:100%;min-height:15rem;object-fit:cover;display:block}
.actu-longue-corps{padding:clamp(1.2rem,3vw,2rem) clamp(1.2rem,3vw,2rem) clamp(1.4rem,3vw,2rem) 0}
.actu-longue h2{font-size:clamp(1.25rem,2.6vw,1.6rem);margin:.5rem 0 .6rem}
.actu-longue .actu-chapeau{font-size:1rem;font-weight:500;color:var(--encre);margin-bottom:.9rem}
.actu-longue-corps p{font-size:.95rem;margin:0 0 .8rem}
.actu-lien{margin:1rem 0 0!important;font-weight:600;font-size:.92rem}
.actu-lien a{color:var(--bleu);text-decoration:none}
.actu-lien a:hover{text-decoration:underline}

@media (max-width:760px){
  .actu-longue{grid-template-columns:1fr}
  .actu-longue-visuel{aspect-ratio:16/9}
  .actu-longue-visuel img{min-height:0}
  .actu-longue-corps{padding:0 clamp(1.1rem,4vw,1.6rem) 1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .actu,.actu-visuel img{transition:none}
  .actu:hover{transform:none}
  .actu:hover .actu-visuel img{transform:none}
}

/* ==================================================================
   PAGES DE CYCLE (maternelle, élémentaire, collège, lycée)

   Le contenu vient des plaquettes de l'établissement. La mise en forme
   reprend les blocs déjà employés ailleurs (.etapes, .familles,
   .horaires) ; seuls quatre motifs sont propres à ces pages.
   ================================================================== */

/* le projet d'établissement : la phrase que la direction a écrite,
   mise en avant comme une déclaration et non comme un paragraphe */
.projet-etab{
  background:var(--bleu-nuit);color:#fff;border-radius:var(--r);
  padding:clamp(1.6rem,4vw,2.6rem);margin:0 0 2rem;
  border-left:4px solid var(--or);
}
.projet-etab .eyebrow{color:var(--or)}
.projet-etab h2{
  color:#fff;font-size:clamp(1.25rem,2.6vw,1.7rem);margin:.3rem 0 .8rem;line-height:1.25;
}
.projet-etab p{color:rgba(255,255,255,.86);margin:0;max-width:52rem}

.cycle-intro{
  max-width:52rem;font-size:1.03rem;line-height:1.7;margin:0 0 .5rem;
}

/* les classes du cycle : une bande de jalons, du plus jeune au plus âgé */
.classes-grille{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.8rem;
}
.classe{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:1.1rem 1rem;display:flex;flex-direction:column;gap:.2rem;
  border-top:3px solid var(--or);scroll-margin-top:96px;
}
.classe-nom{font-weight:700;color:var(--encre);font-size:1.05rem;line-height:1.2}
.classe-nom sup{font-size:.62em}
.classe-note{font-size:.8rem;color:var(--muted)}

/* les sigles employés dans les plaquettes */
.sigles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:.7rem 1.6rem;margin:0;
}
.sigles div{
  display:flex;gap:.6rem;align-items:baseline;
  padding-bottom:.7rem;border-bottom:1px solid var(--ligne);
}
.sigles dt{font-weight:700;color:var(--or-texte);font-size:.86rem;flex:none}
.sigles dd{margin:0;font-size:.86rem;color:var(--texte);line-height:1.5}

/* les fiches d'organisation réutilisent .etape, qui ne stylait que h3 */
.etape h4{font-size:1.02rem;margin:0;color:var(--encre);font-weight:600}

/* ==================================================================
   MENU LARGE « FORMATION »

   Cinq colonnes qui montrent d'un coup toute l'échelle de
   l'établissement, de la petite section à l'université. Le panneau est
   centré sous son bouton et ne peut jamais déborder de l'écran.
   ================================================================== */
.sous-menu-large{
  min-width:min(62rem,calc(100vw - 2.5rem));
  left:50%;transform:translate(-50%,-6px);
  padding:1.2rem 1.3rem 1rem;
}
.sous-menu-large.ouvert{transform:translate(-50%,0)}

.sous-menu-colonnes{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem 1.2rem;
}
.sous-menu-col{display:flex;flex-direction:column;gap:.05rem;min-width:0}
.sous-menu-col-titre{
  font-weight:700;color:var(--encre);font-size:.87rem;
  padding:.4rem .5rem;margin-bottom:.15rem;
  border-bottom:2px solid var(--or);border-radius:6px 6px 0 0;
}
.sous-menu-col-titre:hover{background:var(--or-pale);color:var(--or-texte)}
.sous-menu-col a:not(.sous-menu-col-titre){
  padding:.38rem .5rem;border-radius:6px;
  font-size:.845rem;font-weight:500;color:var(--texte);line-height:1.3;
}
.sous-menu-col a sup{font-size:.65em}
/* les liens de bas de panneau : une seule ligne, un seul filet */
.sous-menu-pied{
  display:flex;flex-wrap:wrap;gap:0 1.4rem;
  margin-top:.35rem;padding-top:.6rem;border-top:1px solid var(--ligne);
}
.sous-menu-pied .sous-menu-tout{margin-top:0;padding-top:0;border-top:0}
/* un lien de telechargement se distingue d'un lien de page : l'icone le dit,
   la couleur or le confirme. */
/* deux classes, pour passer devant `.sous-menu .sous-menu-tout` qui
   impose le bleu a tous les liens de bas de panneau. */
.sous-menu .sous-menu-pdf{display:inline-flex;align-items:center;gap:.4rem;
  color:var(--or-texte)}
.sous-menu .sous-menu-pdf:hover{background:var(--or-pale);color:var(--or-fonce)}
.sous-menu .sous-menu-pdf .pdf-icone{flex:none}

@media (max-width:1319px){
  /* dans le menu compact, les colonnes redeviennent une seule liste */
  .sous-menu-large{min-width:0}
  .sous-menu-colonnes{grid-template-columns:1fr;gap:.2rem}
  .sous-menu-col-titre{
    margin-top:.5rem;border-bottom:1px solid var(--ligne);border-radius:0;
    font-size:.95rem;
  }
  .sous-menu-col a:not(.sous-menu-col-titre){padding:.55rem .5rem;font-size:.9rem}
  .sous-menu-pied{flex-direction:column;gap:0}
}

/* ==================================================================
   LA BARRE À SEPT ONGLETS

   Depuis l'ajout de Présentation, Formation, Futurs élèves et
   Partenariat, la barre horizontale demande plus de place que la
   colonne de contenu. L'en-tête — et lui seul — s'élargit donc, et la
   porte de l'équipe se réduit à son icône : c'est un accès de service,
   pas une destination pour les familles.
   ================================================================== */
@media (min-width:1320px){
  .site-header .shell{max-width:1360px}
  .nav{gap:.12rem}
  .nav>a{padding:.5rem .45rem}
  .nav-bouton{padding:.5rem .45rem;gap:.24rem}
  .nav .nav-cta:not(.nav-cta-or) span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .nav .nav-cta:not(.nav-cta-or){padding:.6rem .78rem}
  .nav .nav-cta-or{padding:.6rem .95rem}
}

/* ==================================================================
   DOSSIER D'INSCRIPTION

   Une famille doit pouvoir emporter cette liste sur papier. Le bloc
   .dossier-imprimable est donc conçu pour survivre à l'impression :
   en-tête de l'établissement, cases à cocher visibles, et tout le
   reste du site effacé.
   ================================================================== */
.dossier-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:0 0 2rem}

.dossier-entete{display:none}
.dossier-pied{display:none}

.pieces-liste{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:.6rem}
.piece{
  display:flex;gap:.9rem;align-items:flex-start;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:1rem 1.1rem;
}
.piece-oblig{border-left:3px solid var(--or)}
.piece-case{
  flex:none;width:1.15rem;height:1.15rem;margin-top:.15rem;
  border:1.5px solid var(--muted);border-radius:4px;background:var(--blanc);
}
.piece-texte{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.piece-texte strong{color:var(--encre);font-size:.98rem;font-weight:600}
.piece-texte span{color:var(--texte);font-size:.88rem;line-height:1.45}

@media print{
  /* ne reste sur le papier que la liste et l'en-tête de l'établissement */
  .site-header,.site-footer,.page-tete,.section-head,.dossier-actions,
  .note-calendrier,.bulle-conseiller,.fenetre-conseiller,.voile-conseiller,
  .to-top,.skip,.cta{display:none !important}
  body{background:#fff;font-size:11pt}
  .section{padding:0 !important}
  .shell{max-width:none;padding:0}
  .reveal{opacity:1 !important;transform:none !important}

  .dossier-entete{
    display:flex;align-items:center;gap:.9rem;
    padding-bottom:.8rem;margin-bottom:1.4rem;border-bottom:2px solid #000;
  }
  .dossier-entete img{width:48px;height:48px;object-fit:contain}
  .dossier-entete strong{display:block;font-size:14pt;color:#000}
  .dossier-entete span{display:block;font-size:9pt;color:#333}
  .dossier-pied{
    display:block;margin-top:1.6rem;padding-top:.6rem;
    border-top:1px solid #999;font-size:8.5pt;color:#333;text-align:center;
  }

  .sous-titre-bloc{font-size:12pt;margin:1.2rem 0 .6rem;color:#000}
  .piece{border:1px solid #666;border-radius:0;padding:.55rem .7rem;break-inside:avoid}
  .piece-oblig{border-left:3px solid #000}
  .piece-case{width:14px;height:14px;border:1.5px solid #000;border-radius:0}
  .piece-texte strong{color:#000;font-size:10.5pt}
  .piece-texte span{color:#333;font-size:9pt}
  .familles{grid-template-columns:repeat(4,1fr);gap:.5rem}
  .famille{border:1px solid #999;border-radius:0;padding:.55rem .7rem;break-inside:avoid}
  .famille h4{font-size:9.5pt;color:#000}
  .famille li{background:none;padding:.1rem 0;font-size:9pt;color:#000}
  .famille ul{flex-direction:column;gap:0}
}

/* --------- partenaires sans logo fourni ---------
   Une pastille typographique, assumée comme telle : elle nomme le
   partenaire sans imiter sa marque. Elle disparaît dès que le fichier
   officiel est déposé dans images/partner/. */
.partner-nom{
  display:grid;place-items:center;text-align:center;
  font-weight:700;font-size:.92rem;line-height:1.3;
  color:var(--bleu-nuit);letter-spacing:-.01em;padding:.4rem;
}
.partners-note{
  font-size:.86rem;color:var(--muted);line-height:1.6;
  max-width:52rem;margin:.9rem 0 2rem;
}
.partners-note a{color:var(--or-texte);text-decoration:underline;text-underline-offset:2px}

/* le même traitement dans le défilé : un nom, pas un faux logo */
.defile-nom{
  display:grid;place-items:center;text-align:center;
  width:var(--logo-l);height:var(--logo-h);
  font-weight:700;font-size:.78rem;line-height:1.25;
  color:var(--bleu-nuit);letter-spacing:-.01em;padding:0 .3rem;
}

/* --------- tableaux larges ---------
   Le conteneur porte la classe .table-scroll depuis le début, mais la
   règle n'avait jamais été écrite : sur téléphone, le calendrier
   scolaire (min-width 26rem) poussait donc toute la page vers la
   droite. Le tableau défile désormais dans sa propre boîte. */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  /* un liseré indique qu'il reste du contenu à droite */
  background:
    linear-gradient(90deg,var(--blanc) 30%,rgba(255,255,255,0)) left/2.4rem 100% no-repeat,
    linear-gradient(90deg,rgba(255,255,255,0),var(--blanc) 70%) right/2.4rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,rgba(15,36,64,.12),transparent) left/.6rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(15,36,64,.12),transparent) right/.6rem 100% no-repeat;
  background-attachment:local,local,scroll,scroll;
}

/* ==================================================================
   DOCUMENTS À TÉLÉCHARGER

   Chaque carte annonce le poids reel du fichier : une famille qui se
   connecte en 3G doit savoir ce qu'elle engage avant de cliquer.
   ================================================================== */
.telechargements{margin-top:2.6rem}
.doc-groupe{
  font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:1.6rem 0 .7rem;
}
.docs{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.doc{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:1.1rem 1.2rem;color:var(--texte);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.doc:hover{
  border-color:var(--or);box-shadow:var(--ombre);transform:translateY(-2px);color:var(--texte);
}
.doc-ico{
  flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;
  border-radius:9px;background:var(--or-pale);color:var(--or-texte);
}
.doc-texte{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.doc-texte>strong{color:var(--encre);font-size:1rem;font-weight:600;line-height:1.3}
.doc-texte>strong sup{font-size:.62em}
.doc-desc{font-size:.88rem;line-height:1.55;color:var(--texte)}
.doc-desc sup{font-size:.7em}
.doc-meta{
  font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);
}
.doc:hover .doc-texte>strong{color:var(--or-texte)}

@media print{
  /* la feuille imprimee est la liste des pieces, pas le catalogue */
  .telechargements{display:none !important}
}

/* quatre statuts d'homologation : deux par deux plutôt que trois plus un */
.grid-homologation{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.1rem;
}

/* ==================================================================
   RUBAN DE REPÈRES

   Les repères de l'établissement défilent en TEXTE, pas en logos :
   rien à fabriquer, rien à attendre d'un partenaire, et chaque
   mention renvoie à une pièce vérifiable.
   ================================================================== */
.reperes{
  overflow:hidden;background:var(--bleu-nuit);color:#fff;
  padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.1);
}
.reperes-piste{display:flex;width:max-content;animation:defiler-reperes 46s linear infinite}
.reperes:hover .reperes-piste{animation-play-state:paused}
.reperes-serie{
  display:flex;align-items:center;list-style:none;margin:0;padding:0;
}
.reperes-serie li{
  flex:none;padding:0 1.5rem;position:relative;
  font-size:.79rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.7);white-space:nowrap;
}
/* une barre oblique sépare les repères, comme une liste dictée */
.reperes-serie li::after{
  content:"/";position:absolute;right:-.28rem;color:rgba(255,255,255,.28);font-weight:400;
}
.reperes-serie li sup{font-size:.72em}
.repere-devise{
  color:var(--or) !important;font-style:italic;text-transform:none !important;
  letter-spacing:.02em !important;font-size:.92rem !important;
  font-family:var(--accent-italique);
}
@keyframes defiler-reperes{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  /* sans mouvement, le ruban devient une ligne fixe : la première
     série suffit, la seconde n'existait que pour boucler */
  .reperes-piste{animation:none;width:100%;overflow-x:auto}
  .reperes-serie[aria-hidden="true"]{display:none}
}

/* ==================================================================
   LES NIVEAUX DE SCOLARITÉ, EN PAGE D'ACCUEIL

   Cartes numérotées reprises de Sup'Management, contenu repris du
   lycée Albert Camus : le rang donne la progression, la liste des
   classes dit tout de suite si l'on est au bon endroit.
   ================================================================== */
.niveaux-grille{display:grid;gap:.7rem}
.niveau-carte{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.3rem;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:1.3rem 1.5rem;color:var(--texte);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.niveau-carte:hover{
  border-color:var(--or);box-shadow:var(--ombre);transform:translateX(3px);color:var(--texte);
}
.niveau-rang{
  font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.06em;
  color:var(--or-texte);font-variant-numeric:tabular-nums;
  padding-right:1.3rem;border-right:1px solid var(--ligne);
}
.niveau-corps{min-width:0}
.niveau-corps h3{
  margin:0 0 .18rem;font-size:1.12rem;font-weight:600;color:var(--encre);line-height:1.25;
}
.niveau-classes{margin:0;font-size:.87rem;color:var(--muted);line-height:1.5}
.niveau-fleche{
  font-size:1.2rem;color:var(--ligne);
  transition:color var(--t),transform var(--t);
}
.niveau-carte:hover .niveau-fleche{color:var(--or-texte);transform:translateX(4px)}
.niveau-carte:hover .niveau-corps h3{color:var(--or-texte)}

/* la dernière carte mène à l'université : elle ferme la progression */
.niveau-carte-sup{background:var(--bleu-pale-2);border-color:var(--bleu-pale)}
.niveau-carte-sup .niveau-rang{color:var(--bleu);border-right-color:var(--bleu-pale)}
.niveau-carte-sup:hover{border-color:var(--bleu)}
.niveau-carte-sup:hover .niveau-corps h3,
.niveau-carte-sup:hover .niveau-fleche{color:var(--bleu)}

@media (max-width:620px){
  .niveau-carte{grid-template-columns:auto 1fr;gap:.9rem;padding:1.1rem 1.1rem}
  .niveau-rang{padding-right:.9rem}
  .niveau-fleche{display:none}
}


/* ==================================================================
   MENU MOBILE À VOLETS

   Repris du lycée Albert Camus de Conakry : sur téléphone, un menu
   déroulant ne se déplie pas en accordéon, il GLISSE par-dessus le
   menu principal et se referme par un « Retour ». Avec sept onglets
   et un menu Formation à trente entrées, l'accordéon obligeait à
   faire défiler longtemps pour retrouver les autres rubriques.
   ================================================================== */
.sous-menu-retour{display:none}

@media (max-width:1319px){
  /* le menu devient le cadre fixe dans lequel les volets coulissent */
  .nav{overflow:hidden}

  .nav-groupe{position:static}

  /* le chevron se couche : il annonce un volet, pas un dépliage */
  .nav-bouton .chevron{transform:rotate(-90deg)}
  .nav-bouton[aria-expanded="true"] .chevron{transform:rotate(-90deg)}

  .sous-menu{
    position:fixed;left:0;right:0;top:76px;
    height:calc(100vh - 76px);
    z-index:4;
    display:flex;flex-direction:column;gap:.1rem;
    margin:0;border:0;border-radius:0;
    padding:1rem clamp(1.1rem,4vw,2rem) 2rem;
    background:var(--blanc);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    opacity:1;visibility:visible;
    transform:translateX(100%);
    transition:transform var(--t);
    box-shadow:none;
  }
  .sous-menu.ouvert{transform:translateX(0)}

  .sous-menu-retour{
    display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
    margin:0 0 .9rem;padding:.55rem .2rem;
    border:0;background:none;cursor:pointer;
    font-family:var(--sans);font-size:.95rem;font-weight:700;
    color:var(--or-texte);
  }
  .sous-menu-retour span{font-size:1.1em;line-height:1}

  /* chaque entrée devient une ligne pleine largeur, soulignée */
  .sous-menu a{
    padding:.95rem .1rem;font-size:1rem;border-radius:0;
    border-bottom:1px solid var(--ligne);
  }
  .sous-menu a:hover{background:none;color:var(--bleu)}
  .sous-menu-pied{margin-top:1rem;border-top:0}
  .sous-menu-pied .sous-menu-tout{border-bottom:1px solid var(--ligne)}
}

/* ==================================================================
   BANDE DE TÉLÉCHARGEMENT

   Reprise du lycée Albert Camus : une ligne d'explication au-dessus,
   un bouton large et bien visible en dessous. La bande se remarque au
   premier coup d'œil, c'est tout son objet.
   ================================================================== */
.bande-telecharger{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  text-align:center;
  background:var(--or-pale);border:1px solid rgba(224,144,40,.32);
  border-radius:var(--r);
  padding:clamp(1.4rem,3vw,2.1rem) clamp(1.2rem,4vw,2.4rem);
  margin:0 0 1.8rem;
}
.bande-note{
  margin:0;max-width:46rem;
  font-size:.92rem;line-height:1.6;color:var(--or-texte);
}
.bande-telecharger .btn{display:inline-flex;align-items:center;gap:.6rem}
.bande-telecharger .btn svg{flex:none}

@media print{
  /* sur le papier, la bande n'a plus d'objet */
  .bande-telecharger{display:none !important}
}

/* ==================================================================
   CALENDRIER SCOLAIRE

   Grille mensuelle aux couleurs de la charte : le bleu nuit pour
   l'en-tête des jours, l'ambre pour les rentrées, le bleu pour les
   vacances, le rouge brique pour les jours fériés. Le jour même est
   cerclé d'ambre.
   ================================================================== */
:root{
  --cal-ferie:#B4432C;
  --cal-ferie-pale:#FBEDEA;
}

/* --------- les filtres --------- */
.cal-filtres{
  display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:999px;
  padding:.35rem;margin:0 auto 1.8rem;width:max-content;max-width:100%;
}
.cal-filtre{
  border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:.9rem;font-weight:600;color:var(--texte);
  padding:.6rem 1.1rem;border-radius:999px;white-space:nowrap;
  transition:background var(--t),color var(--t);
}
.cal-filtre:hover{background:var(--bleu-pale);color:var(--bleu)}
.cal-filtre.actif{background:var(--bleu-nuit);color:#fff}
.cal-filtre.actif:hover{background:var(--bleu-nuit);color:#fff}

/* --------- l'en-tête de navigation --------- */
.cal-grille{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  overflow:hidden;margin:0 0 2rem;
}
.cal-tete{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.2rem;border-bottom:1px solid var(--ligne);
}
.cal-mois{
  margin:0;font-size:1.15rem;font-weight:700;color:var(--encre);
  text-transform:capitalize;text-align:center;flex:1;
}
.cal-fleches{display:flex;gap:.4rem}
.cal-nav{
  border:1px solid var(--ligne);background:var(--blanc);cursor:pointer;
  font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--texte);
  padding:.5rem .9rem;border-radius:9px;
  transition:border-color var(--t),color var(--t),background var(--t);
}
.cal-nav:hover:not(:disabled){border-color:var(--bleu);color:var(--bleu);background:var(--bleu-pale)}
.cal-nav:disabled{opacity:.38;cursor:not-allowed}
.cal-fleche{display:grid;place-items:center;width:2.3rem;height:2.3rem;padding:0}

/* --------- la grille --------- */
.cal-jours{
  display:grid;grid-template-columns:repeat(7,1fr);
  background:var(--bleu-nuit);
}
.cal-jours span{
  padding:.7rem .4rem;text-align:center;
  font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.cal-cases{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-case{
  min-height:6.4rem;padding:.5rem .45rem;
  border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  display:flex;flex-direction:column;gap:.28rem;
}
.cal-case:nth-child(7n){border-right:0}
.cal-num{
  font-size:.92rem;font-weight:600;color:var(--encre);
  font-variant-numeric:tabular-nums;align-self:flex-end;
}
.cal-hors{background:var(--fond)}
.cal-hors .cal-num{color:var(--ligne)}

/* le jour même : un cercle d'ambre, visible d'un coup d'œil */
.cal-jour .cal-num{
  display:grid;place-items:center;width:1.85rem;height:1.85rem;border-radius:50%;
  background:var(--or);color:#fff;font-weight:700;
}

/* les fonds par type d'évènement */
.cal-vacances{background:var(--bleu-pale-2)}
.cal-ferie{background:var(--cal-ferie-pale)}
.cal-rentree{background:var(--or-pale)}

.cal-etiquettes{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.cal-etiquette{
  font-size:.68rem;font-weight:600;line-height:1.25;
  padding:.2rem .35rem;border-radius:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-e-rentree{background:var(--or);color:#fff}
.cal-e-vacances{background:var(--bleu);color:#fff}
.cal-e-ferie{background:var(--cal-ferie);color:#fff}

/* --------- la légende --------- */
.cal-legende{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:center;
  list-style:none;margin:0;padding:1rem 1.2rem;border-top:1px solid var(--ligne);
}
.cal-legende li{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.83rem;color:var(--texte);
}
.cal-pastille{
  width:.72rem;height:.72rem;border-radius:50%;flex:none;display:inline-block;
}
.cal-p-rentree{background:var(--or)}
.cal-p-vacances{background:var(--bleu)}
.cal-p-ferie{background:var(--cal-ferie)}
.cal-p-jour{background:var(--or);box-shadow:0 0 0 3px var(--or-pale)}

/* --------- le tableau et les fêtes variables --------- */
.cal-tableau th[scope="row"],.cal-tableau td{vertical-align:top}
.cal-tableau .cal-pastille{margin-right:.5rem;vertical-align:.02em}
.cal-variables{
  list-style:none;margin:0 0 1.6rem;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.cal-variables li{
  background:var(--cal-ferie-pale);color:var(--cal-ferie);
  border:1px solid rgba(180,67,44,.25);border-radius:999px;
  padding:.45rem .95rem;font-size:.87rem;font-weight:600;
}

@media (max-width:760px){
  /* sur téléphone la grille devient lisible en réduisant les cases et en
     masquant le texte des étiquettes, qui ne tiendrait pas : la couleur
     du fond porte alors l'information, et le tableau donne le détail */
  .cal-case{min-height:3.5rem;padding:.3rem .2rem}
  .cal-num{font-size:.82rem}
  .cal-jour .cal-num{width:1.6rem;height:1.6rem}
  .cal-etiquette{
    font-size:0;padding:0;height:.3rem;border-radius:2px;
  }
  .cal-jours span{font-size:.64rem;letter-spacing:.04em;padding:.55rem .2rem}
  .cal-filtre{padding:.5rem .8rem;font-size:.85rem}
}

@media print{
  /* sur le papier, le tableau suffit */
  .cal-filtres,.cal-grille{display:none !important}
}

/* ==================================================================
   BLOCS DE TEXTE, GRADUÉS PAR IMPORTANCE

   Trois niveaux, pour qu'un visiteur sache en un coup d'œil ce qui
   compte le plus. Le principe vient du lycée Albert Camus, qui pose
   ses idées en cartes sur un fond sombre ; les couleurs sont les
   nôtres.

     .bloc-majeur  le constat ou la promesse centrale — fond ambre,
                   texte le plus grand
     .bloc-fort    les points principaux — carte claire, filet ambre
     .bloc-simple  le détail qui appuie — carte discrète

   .section-sombre pose le tout sur le bleu nuit, comme une respiration
   dans la page.
   ================================================================== */
.section-sombre{background:var(--bleu-nuit);color:#fff}
.section-sombre .eyebrow{color:var(--or)}
.section-sombre h2{color:#fff}
.section-sombre .section-lede{color:rgba(255,255,255,.76)}

/* --- la grille ------------------------------------------------------ */
.blocs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}

.bloc-majeur,
.bloc-fort,
.bloc-simple{
  --teinte:var(--bleu-nuit);      /* l'aplat, assez fonce pour du texte blanc */
  --vif:var(--bleu);              /* la meme couleur en clair, pour les accents */
  --tres-pale:var(--bleu-pale);   /* le fond des blocs discrets */
  position:relative;overflow:hidden;
  border-radius:16px;
  padding:clamp(1.3rem,2.6vw,1.8rem);
  display:flex;flex-direction:column;gap:.55rem;
}

/* Chaque bloc porte sa couleur de charte. Les aplats utilisent la
   variante assombrie : en plein, l'orange et le jaune ne portent pas de
   texte blanc lisible. La teinte vive reste pour les liseres et les
   chiffres, ou le contraste n'est pas en jeu. */
.n-orange{--teinte:var(--n-orange-texte);--vif:var(--n-orange);--tres-pale:var(--n-orange-pale);  --degrade:var(--d-orange)}
.n-corail {--teinte:var(--n-corail-texte); --vif:var(--n-corail); --tres-pale:var(--n-corail-pale);  --degrade:var(--d-corail)}
.n-ciel  {--teinte:var(--n-ciel-texte);  --vif:var(--n-ciel);  --tres-pale:var(--n-ciel-pale);  --degrade:var(--d-ciel)}
.n-bleu  {--teinte:var(--n-bleu-texte);  --vif:var(--n-bleu);  --tres-pale:var(--n-bleu-pale);  --degrade:var(--d-bleu)}
.n-vert  {--teinte:var(--n-vert-texte);  --vif:var(--n-vert);  --tres-pale:var(--n-vert-pale);  --degrade:var(--d-vert)}
.n-nuit  {--teinte:var(--n-nuit-texte);  --vif:var(--n-nuit);  --tres-pale:var(--n-nuit-pale);  --degrade:var(--d-nuit)}

/* --- niveau 1 : ce qu'il faut retenir, en pleine largeur ------------- */
.bloc-majeur{
  grid-column:1 / -1;
  background:var(--teinte);
  background-image:var(--degrade);color:#fff;
  padding:clamp(1.6rem,3.4vw,2.4rem);
}
/* un halo de la teinte vive, pour que l'aplat ne soit pas une brique */
.bloc-majeur::after{
  content:"";position:absolute;right:-14%;top:-45%;
  width:22rem;height:22rem;border-radius:50%;
  background:var(--vif);opacity:.26;pointer-events:none;
}
.bloc-majeur > *{position:relative;z-index:1}
.bloc-majeur h3{margin:0;color:#fff;font-size:clamp(1.3rem,2.5vw,1.75rem);line-height:1.22}
.bloc-majeur p{margin:0;color:rgba(255,255,255,.93);font-size:1.03rem;line-height:1.65;max-width:52rem}

/* --- niveau 2 : les points principaux, en aplat --------------------- */
.bloc-fort{
  background:var(--teinte);
  background-image:var(--degrade);color:#fff;
  transition:transform var(--t),box-shadow var(--t);
}
.bloc-fort::after{
  content:"";position:absolute;right:-3.5rem;bottom:-3.5rem;
  width:9rem;height:9rem;border-radius:50%;
  background:#fff;opacity:.09;pointer-events:none;
}
.bloc-fort > *{position:relative;z-index:1}
.bloc-fort h3{margin:0;color:#fff;font-size:1.1rem;line-height:1.3}
.bloc-fort p{margin:0;color:rgba(255,255,255,.88);font-size:.94rem;line-height:1.6}
.bloc-fort:hover{transform:translateY(-3px);box-shadow:var(--ombre-forte)}

/* --- niveau 3 : le detail, en teinte pale --------------------------- */
.bloc-simple{
  background:var(--tres-pale);
  border-left:4px solid var(--vif);
  border-radius:12px;
  padding:clamp(1rem,2.2vw,1.3rem);
}
/* les blocs discrets ne s'etirent pas a la hauteur d'un aplat voisin :
   une carte de deux lignes doit faire deux lignes. */
.bloc-simple{align-self:start}
.bloc-simple h3{margin:0;color:var(--teinte);font-size:.96rem;font-weight:700;line-height:1.3}
.bloc-simple p{margin:0;color:var(--texte);font-size:.9rem;line-height:1.58}

/* Sur fond sombre, les blocs pales redeviennent translucides : une carte
   creme sur du bleu nuit ferait tache. */
.section-sombre .bloc-simple{
  background:rgba(255,255,255,.06);border-left-color:var(--vif);
}
.section-sombre .bloc-simple h3{color:#fff}
.section-sombre .bloc-simple p{color:rgba(255,255,255,.72)}

@media (max-width:620px){
  .blocs{grid-template-columns:1fr}
  .bloc-majeur::after{width:14rem;height:14rem;right:-20%}
}

@media (prefers-reduced-motion:reduce){
  .bloc-fort:hover{transform:none}
}

/* ==================================================================
   UNE COULEUR PAR NIVEAU

   Reprise du lycee Albert Camus, qui donne sa teinte a chaque cycle :
   on reconnait le niveau a sa couleur avant meme d'avoir lu le mot.
   Les cinq teintes sortent toutes de la charte graphique : les deux
   degrades d'orange, les deux de bleu, et le bleu nuit du logo.
   ================================================================== */
:root{
  /* Palette officielle, relevee sur la charte graphique (page COULEURS) :
     deux couleurs principales, le BLEU et le ORANGE, et leurs degrades.
     Le vert et le jaune employes auparavant n'y figuraient pas ; ils sont
     remplaces par le rouge orange et le bleu clair de la charte.

       --n-<nom>         la teinte de la charte, telle quelle : liseres,
                         chiffres, pastilles, petits aplats
       --n-<nom>-texte   la meme teinte assombrie jusqu'a tenir 4,5:1 des
                         DEUX cotes : lisible posee sur --n-<nom>-pale, et
                         capable de porter du texte blanc en aplat
       --n-<nom>-pale    la meme teinte tres eclaircie : fonds discrets   */
  --n-orange:#FFB057;   --n-orange-texte:#A65800;  --n-orange-pale:#FDF0E3;
  --n-corail:#FF5B3F;   --n-corail-texte:#CE1E00;  --n-corail-pale:#FDE6E3;
  --n-ciel:#0088F4;     --n-ciel-texte:#006CC2;    --n-ciel-pale:#E3F1FD;
  --n-bleu:#035FE8;     --n-bleu-texte:#035FE8;    --n-bleu-pale:#E3EDFD;
  --n-vert:#00A870;     --n-vert-texte:#008055;    --n-vert-pale:#E3FDF4;
  --n-nuit:#0C2760;     --n-nuit-texte:#0C2760;    --n-nuit-pale:#E4EBFC;

  /* La charte insiste sur ses degrades : « les degrades de couleurs
     donnent encore plus de valeur a la charte ». Chaque teinte a donc
     son degrade, du fonce vers le vif, pour les aplats pleins. */
  --d-orange:linear-gradient(135deg,#A65800 0%,#E08A2E 100%);
  --d-corail:linear-gradient(135deg,#B01A00 0%,#FF5B3F 100%);
  --d-ciel:linear-gradient(135deg,#005FAC 0%,#0088F4 100%);
  --d-bleu:linear-gradient(135deg,#0340A8 0%,#035FE8 100%);
  --d-vert:linear-gradient(135deg,#00613F 0%,#00A870 100%);
  --d-nuit:linear-gradient(135deg,#071A44 0%,#173C86 100%);
}
.n-orange{--n:var(--n-orange);--n-pale:var(--n-orange-pale)}
.n-corail {--n:var(--n-corail); --n-pale:var(--n-corail-pale)}
.n-ciel  {--n:var(--n-ciel);  --n-pale:var(--n-ciel-pale)}
.n-bleu  {--n:var(--n-bleu);  --n-pale:var(--n-bleu-pale)}
.n-nuit  {--n:var(--n-nuit);  --n-pale:var(--n-nuit-pale)}

/* les cartes de niveau de l'accueil prennent la teinte de leur cycle */
.niveau-carte.n-orange,.niveau-carte.n-corail,.niveau-carte.n-ciel,
.niveau-carte.n-bleu,.niveau-carte.n-nuit{background:var(--blanc)}
.niveau-carte[class*="n-"] .niveau-rang{color:var(--n)}
.niveau-carte[class*="n-"]:hover{border-color:var(--n)}
.niveau-carte[class*="n-"]:hover .niveau-corps h3,
.niveau-carte[class*="n-"]:hover .niveau-fleche{color:var(--n)}

/* les jalons de classe, sur la page du cycle */
.classe[class*="n-"]{border-top-color:var(--n)}

/* ==================================================================
   LE MENU FORMATION, AVEC SES VIGNETTES

   Sur ORDINATEUR : cinq colonnes, chaque titre précédé d'une petite
   pastille ronde à la couleur du niveau.

   Sur TÉLÉPHONE : la liste des vingt classes était interminable. Elle
   disparaît au profit de cinq grandes pastilles, comme la rubrique
   « Scolarité » du lycée Albert Camus. Les classes restent accessibles
   sur la page de chaque cycle.
   ================================================================== */
.col-vignette{
  display:inline-grid;place-items:center;overflow:hidden;
  width:1.6rem;height:1.6rem;border-radius:50%;flex:none;
  border:2px solid var(--n,var(--or));background:var(--n-pale,var(--or-pale));
  margin-right:.45rem;vertical-align:-.35em;
}
.col-vignette img{width:100%;height:100%;object-fit:cover;display:block}
.sous-menu-col-titre{display:flex;align-items:center;gap:0}
.sous-menu-col[class*="n-"] .sous-menu-col-titre{border-bottom-color:var(--n)}
.sous-menu-col[class*="n-"] .sous-menu-col-titre:hover{
  background:var(--n-pale);color:var(--n);
}

@media (max-width:1319px){
  /* le volet devient une colonne de grandes pastilles */
  .sous-menu-colonnes{gap:.1rem}
  .sous-menu-col{padding:0}

  .sous-menu-col-titre{
    display:flex;align-items:center;gap:.9rem;
    margin:0;padding:.7rem .1rem;
    border:0;border-bottom:1px solid var(--ligne) !important;
    border-radius:0;font-size:1.05rem;font-weight:700;color:var(--n,var(--encre));
  }
  .col-vignette{
    width:3.1rem;height:3.1rem;margin-right:0;vertical-align:baseline;
    border-width:3px;
  }
  /* les classes ne s'affichent plus : la page du cycle les porte */
  .sous-menu-col a:not(.sous-menu-col-titre){display:none}
}

/* =====================================================================
   LE TABLEAU DES FRAIS
   Chaque ligne emprunte la couleur de son niveau — la meme que dans le
   menu Formation et sur les cartes de l'accueil. Le nom du cycle porte
   la couleur pleine, la ligne un voile de cette couleur : on repere le
   Lycee sans lire, comme sur une grille horaire.
   Sur telephone, une ligne de quatre colonnes ne tient pas ; chaque
   ligne devient alors une carte et data-libelle reaffiche l'en-tete
   devant chaque valeur, ce qui evite le defilement lateral.
   ===================================================================== */
.table-frais{
  --accent:var(--bleu-nuit);
  --voile:var(--bleu-pale-2);
  margin:1.6rem 0 1rem;border:1px solid var(--ligne);border-radius:var(--r);
  overflow:hidden;background:var(--blanc);box-shadow:var(--ombre);
}
.table-frais table{width:100%;border-collapse:collapse;font-size:.95rem}
.table-frais caption{text-align:left}

.table-frais thead th{
  background:var(--bleu-nuit);color:var(--blanc);
  padding:.9rem 1.15rem;text-align:left;white-space:nowrap;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

.table-frais tbody tr{background:var(--voile);transition:background var(--t)}
.table-frais tbody tr.n-orange{--accent:var(--n-orange);--accent-texte:var(--n-orange-texte);--voile:var(--n-orange-pale)}
.table-frais tbody tr.n-corail {--accent:var(--n-corail); --accent-texte:var(--n-corail-texte); --voile:var(--n-corail-pale)}
.table-frais tbody tr.n-ciel  {--accent:var(--n-ciel);  --accent-texte:var(--n-ciel-texte);  --voile:var(--n-ciel-pale)}
.table-frais tbody tr.n-bleu  {--accent:var(--n-bleu);  --accent-texte:var(--n-bleu-texte);  --voile:var(--n-bleu-pale)}
.table-frais tbody tr.n-nuit  {--accent:var(--n-nuit);  --accent-texte:var(--n-nuit-texte);  --voile:var(--n-nuit-pale)}

.table-frais tbody th,
.table-frais tbody td{
  padding:.95rem 1.15rem;text-align:left;vertical-align:middle;
  border-top:1px solid rgba(255,255,255,.75);color:var(--texte);font-weight:500;
}
.table-frais tbody th[scope="row"]{
  border-left:5px solid var(--accent);
  font-weight:700;color:var(--accent-texte,var(--accent));
}
.table-frais .frais-montant{
  font-weight:700;color:var(--encre);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.table-frais tbody td .muted{font-weight:500}

@media (max-width:760px){
  .table-frais{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .table-frais thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table-frais tbody tr{
    display:block;margin-bottom:.85rem;border:1px solid var(--ligne);
    border-left:5px solid var(--accent);border-radius:12px;overflow:hidden;
    background:var(--blanc);
  }
  .table-frais tbody th[scope="row"]{
    display:block;border-left:0;border-top:0;
    /* l'aplat prend la teinte assombrie : en plein le jaune et l'orange ne
       portent pas du texte blanc. Le lisere garde la couleur vive. */
    background:var(--accent-texte,var(--accent));color:var(--blanc);
    font-size:.95rem;letter-spacing:.01em;
  }
  .table-frais tbody td{
    display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
    border-top:1px solid var(--ligne);background:var(--voile);
  }
  .table-frais tbody td::before{
    content:attr(data-libelle);flex:none;
    font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--muted);
  }
  .table-frais tbody td{text-align:right}
}

@media print{
  .table-frais{box-shadow:none}
  .table-frais thead th{background:none;color:var(--encre);border-bottom:2px solid var(--encre)}
}

/* =====================================================================
   LES POSTES A POURVOIR
   Les fiches montraient un pictogramme de personne : un poste vacant
   n'a pas de visage, et douze silhouettes identiques ne disaient rien.
   Elles montrent maintenant le SECTEUR (bibliotheque, laboratoire,
   atelier de maquettes, hall technique), et portent la couleur de leur
   pole. Cartes resserrees : douze fiches doivent tenir sans que la page
   devienne un couloir.
   ===================================================================== */
.postes{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));
  margin:1.6rem 0 1.2rem;
}

.poste{
  --teinte:var(--bleu-nuit);
  --vif:var(--bleu);
  display:flex;flex-direction:column;
  background:var(--blanc);border:1px solid var(--ligne);
  border-radius:14px;overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.poste:hover{transform:translateY(-3px);box-shadow:var(--ombre);border-color:var(--vif)}

.poste-photo{position:relative;aspect-ratio:16/9;background:var(--fond)}
.poste-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* un voile de la couleur du pole : trois fiches partagent la meme photo,
   la teinte les rattache a leur faculte au lieu de faire doublon. */
.poste-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--teinte) 0%,rgba(0,0,0,0) 62%);
  opacity:.72;
}
.poste-etat{
  position:absolute;left:.6rem;top:.6rem;z-index:1;
  padding:.24rem .55rem;border-radius:999px;
  background:rgba(255,255,255,.94);color:var(--teinte);
  font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}

.poste-infos{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;gap:.35rem}
.poste-infos h3{
  margin:0;font-size:.98rem;line-height:1.28;color:var(--encre);font-weight:700;
}
.poste-pole{
  margin:0;font-size:.74rem;font-weight:600;line-height:1.35;
  color:var(--teinte);
}
.poste-pole::before{
  content:"";display:inline-block;vertical-align:middle;
  width:.5rem;height:.5rem;margin-right:.4rem;border-radius:50%;
  background:var(--vif);
}

@media (prefers-reduced-motion:reduce){
  .poste:hover{transform:none}
}

/* =====================================================================
   LES CARTES PRENNENT LEUR COULEUR
   Six familles de cartes restaient blanches sur fond blanc : la liste
   des niveaux, les trois piliers, les six acces de l'accueil, les cinq
   marches du parcours, les trois directions et les cinq echelons de
   l'organigramme. Elles prennent maintenant une teinte de la charte.

   Le principe est le meme partout : fond tres pale de la teinte, lisere
   plein sur le bord, titre dans la version assombrie (lisible), et la
   teinte vive pour le chiffre ou la pastille. Une carte porte sa couleur
   par une classe .n-<teinte>, qui pose --teinte, --vif et --tres-pale.
   ===================================================================== */

/* --- la liste des niveaux, sur l'accueil --------------------------- */
.niveau-carte.n-orange,.niveau-carte.n-corail,.niveau-carte.n-ciel,
.niveau-carte.n-bleu,.niveau-carte.n-nuit{
  background:var(--tres-pale);
  border-color:transparent;border-left:5px solid var(--vif);
}
.niveau-carte.n-orange:hover,.niveau-carte.n-corail:hover,.niveau-carte.n-ciel:hover,
.niveau-carte.n-bleu:hover,.niveau-carte.n-nuit:hover{
  border-left-color:var(--vif);box-shadow:var(--ombre);
}
.niveau-carte[class*="n-"] .niveau-rang{color:var(--teinte);border-right-color:rgba(0,0,0,.09)}
.niveau-carte[class*="n-"] .niveau-corps h3{color:var(--teinte)}
.niveau-carte[class*="n-"]:hover .niveau-corps h3{color:var(--teinte)}
.niveau-carte[class*="n-"] .niveau-fleche{color:var(--vif)}
.niveau-carte[class*="n-"]:hover .niveau-fleche{color:var(--teinte)}

/* --- les trois piliers -------------------------------------------- */
.pillar[class*="n-"]{
  background:var(--tres-pale);border-color:transparent;
  border-top:4px solid var(--vif);
}
.pillar[class*="n-"] .pillar-icon{background:var(--teinte);color:#fff}
.pillar[class*="n-"] h3{color:var(--teinte)}

/* --- les six acces de l'accueil ------------------------------------ */
.acces-carte[class*="n-"]{
  background:var(--tres-pale);border-color:transparent;
  border-top:4px solid var(--vif);
}
.acces-carte[class*="n-"] .acces-num{color:var(--teinte)}
.acces-carte[class*="n-"] h3{color:var(--teinte)}
.acces-carte[class*="n-"] .acces-lien,
.acces-carte[class*="n-"]:hover .acces-lien{color:var(--teinte)}

/* --- les marches du parcours et les echelons de l'organigramme ----- */
.etape[class*="n-"]{
  background:var(--tres-pale);border-color:transparent;
  border-left:5px solid var(--vif);
}
.etape[class*="n-"] .etape-num{background:var(--teinte);color:#fff}
.etape[class*="n-"] h3,
.etape[class*="n-"] h4{color:var(--teinte)}

/* --- les trois directions ------------------------------------------ */
.card[class*="n-"]{
  background:var(--tres-pale);border-color:transparent;
  border-top:4px solid var(--vif);
}
.card[class*="n-"] h3{color:var(--teinte)}
.card[class*="n-"] .card-nombre{color:var(--teinte)}
.card[class*="n-"] .card-lien{color:var(--teinte)}

/* Les pastilles pleines (chiffres d'etape, icones de pilier) portent du
   texte blanc : elles prennent donc TOUTES la variante assombrie, qui
   tient 4,5:1 avec le blanc. En teinte vive, l'orange tombait a 1,8:1 et
   le vert a 3,1:1 — illisibles. */

/* =====================================================================
   L'ECHELLE RESPONSIVE
   ---------------------------------------------------------------------
   Les grilles etaient en `auto-fit minmax()`, qui laisse le navigateur
   decider. Resultat : elles changeaient de colonne a des largeurs
   imprevisibles, et parfois a 1 px pres. A 600 px, une carte de la
   rangee de trois faisait 552 px de large parce qu'il manquait UN pixel
   pour en poser deux ; les fiches de poste passaient de 2 colonnes a 1
   puis a 2 en s'elargissant.

   L'echelle est donc posee explicitement, en mobile-first, sur les
   paliers usuels : telephone, grand telephone, tablette portrait,
   tablette paysage, ordinateur. Chaque famille de cartes monte de
   colonne dans le meme ordre, jamais en arriere.

     base      telephone portrait            1 colonne
     >= 380    grand telephone               les fiches passent a 2
     >= 560    telephone paysage / phablette 2 colonnes
     >= 768    tablette portrait             2 a 3
     >= 1024   tablette paysage              3
     >= 1280   ordinateur                    3 a 4
   ===================================================================== */

/* --- telephone portrait : tout sur une colonne --------------------- */
.grid-3,
.grid-offre,
.grid-infra,
.acces,
.blocs,
.etapes,
.familles,
.postes,
.docs,
.grille-poles,
.poles-grille{grid-template-columns:1fr}

/* --- grand telephone : les fiches de poste se mettent par deux ----- */
@media (min-width:380px){
  .postes{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .poste-infos{padding:.7rem .75rem .85rem}
  .poste-infos h3{font-size:.9rem}
  .poste-etat{font-size:.58rem;padding:.2rem .45rem}
}

/* --- phablette et telephone paysage -------------------------------- */
@media (min-width:560px){
  .grid-3,
  .grid-offre,
  .grid-infra,
  .acces,
  .blocs,
  .etapes,
  .familles,
  .docs,
  .grille-poles,
  .poles-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- tablette portrait --------------------------------------------- */
@media (min-width:768px){
  .postes,
  .familles,
  .grid-infra{grid-template-columns:repeat(3,minmax(0,1fr))}
  .poste-infos{padding:.85rem .95rem 1rem}
  .poste-infos h3{font-size:.98rem}
  .poste-etat{font-size:.62rem;padding:.24rem .55rem}
}

/* --- tablette paysage et petit portable ---------------------------- */
@media (min-width:1024px){
  .grid-3,
  .grid-offre,
  .acces,
  .blocs,
  .etapes,
  .grille-poles,
  .poles-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-infra,
  .familles{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* --- ordinateur ----------------------------------------------------- */
@media (min-width:1280px){
  .blocs,
  .etapes,
  .postes{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Le bloc d'ouverture garde toute la largeur, quel que soit le palier. */
.bloc-majeur{grid-column:1 / -1}

/* minmax(0,1fr) plutot que 1fr : sans cela, un mot long ou une image
   large empeche la colonne de retrecir et fait deborder la page. */
.grid > *,.blocs > *,.etapes > *,.postes > *,.familles > *,
.poles-grille > *{min-width:0}

/* =====================================================================
   CIBLES TACTILES ET LISIBILITE SUR PETIT ECRAN
   ---------------------------------------------------------------------
   Regle WCAG 2.5.5 et guides Apple / Material : sur un ecran tactile,
   une cible se vise a 44 px au minimum. Le retour du menu faisait 34 px,
   les boutons du calendrier 31, les liens du fil d'Ariane 21.
   Le texte courant descendait a 12,6 px sur telephone, sous le plancher
   de 14 px en dessous duquel une phrase se lit mal a bout de bras.
   ===================================================================== */
@media (pointer:coarse){
  .sous-menu-retour,
  .sous-menu-tout,
  .sous-menu a,
  .sous-menu-col a{
    min-height:44px;display:flex;align-items:center;
  }
  .sous-menu-col-titre{min-height:44px}
  .cal-filtre,
  .cal-nav{min-height:44px;padding-top:.5rem;padding-bottom:.5rem}
  /* le fil d'Ariane passe lui aussi a 44 : la regle AA n'exige que
     24 px, mais un seul gabarit pour tout le site vaut mieux qu'une
     exception a retenir. */
  .fil a,
  .fil li{min-height:44px;display:inline-flex;align-items:center}
  .niveau-carte,
  .acces-carte,
  .poste{min-height:44px}
  .pagination a,
  .tab,
  .onglet{min-height:44px;display:inline-flex;align-items:center}
}

/* Plancher de lisibilite sous 768 px : le texte courant ne descend pas
   sous 14 px. Les sur-titres en capitales gardent leur petite taille,
   ce sont des etiquettes, pas des phrases. */
@media (max-width:767px){
  .card p,
  .famille li,
  .programmes li,
  .pole-puces li,
  .actu-meta,
  .bloc-simple p,
  .bloc-fort p,
  .poste-pole,
  .niveau-classes,
  .partners-note,
  .profs-note,
  .note-calendrier,
  .footer-legal,
  .reperes-serie li{font-size:.875rem;line-height:1.6}
  .poste-pole{font-size:.82rem}
  /* Les sur-titres en capitales et les legendes de chiffres restent
     petits : ce sont des etiquettes de deux ou trois mots, pas des
     phrases a lire. Ils gagnent en revanche de l'interlettrage, qui
     fait plus pour la lisibilite en capitales qu'un point de corps. */
  .eyebrow{letter-spacing:.14em}
  .hero-stats dd{font-size:.84rem;line-height:1.45}
}

/* Zoom a 200 % (WCAG 1.4.4) et reflow a 320 px (WCAG 1.4.10) : la page
   ne doit jamais imposer de defilement horizontal. Verrou global. */
html,body{overflow-x:hidden;max-width:100%}
img,video,svg,table{max-width:100%}

/* =====================================================================
   L'APPEL A L'ACTION EN BAS D'UNE PAGE DE POLE
   Il arrive apres la lecture : le visiteur a vu les programmes et les
   debouches, c'est la qu'il decide. Bandeau bleu nuit pour trancher
   avec le corps de la page, bouton ambre comme partout ailleurs.
   ===================================================================== */
.pole-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.2rem 2rem;
  margin:2.6rem 0 0;padding:clamp(1.5rem,3.4vw,2.2rem);
  border-radius:var(--r);
  background:var(--bleu-nuit);
  background-image:linear-gradient(135deg,var(--bleu-nuit-2) 0%,var(--bleu-nuit) 55%,#173C86 100%);
  color:#fff;position:relative;overflow:hidden;
}
/* le meme halo que les blocs majeurs, pour ne pas faire brique */
.pole-cta::after{
  content:"";position:absolute;right:-8%;top:-60%;
  width:20rem;height:20rem;border-radius:50%;
  background:var(--bleu);opacity:.28;pointer-events:none;
}
.pole-cta > *{position:relative;z-index:1}
.pole-cta-texte{flex:1 1 20rem;min-width:0}
.pole-cta h2{
  margin:0 0 .4rem;color:#fff;
  font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.25;
}
.pole-cta p{margin:0;color:rgba(255,255,255,.84);font-size:.96rem;line-height:1.6;max-width:36rem}
/* .btn-large est en largeur pleine ailleurs sur le site : ici il doit
   reprendre sa largeur naturelle, sinon il passe a la ligne et
   s'etale sur toute la bande. */
.pole-cta .btn{flex:0 0 auto;width:auto;display:inline-flex;align-items:center;gap:.5rem}
.pole-cta .btn svg{flex:none}

@media (max-width:560px){
  .pole-cta{flex-direction:column;align-items:stretch;text-align:left}
  .pole-cta .btn{justify-content:center;width:100%}
}

@media print{
  .pole-cta{display:none}
}

/* Le rappel affiche quand on arrive par « S'inscrire » depuis un pole */
.rappel-pole{
  display:block;margin:-.15rem 0 .45rem;
  font-size:.86rem;line-height:1.5;color:var(--or-texte);font-weight:600;
}

/* Le lien vers le mot complet, sous l'extrait de l'accueil */
.mot-suite{margin:1.1rem 0 0}
.mot-suite a{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.92rem;font-weight:700;color:var(--bleu);text-decoration:none;
  transition:color var(--t),gap var(--t);
}
.mot-suite a:hover{color:var(--bleu-fonce);gap:.65rem}
.mot-suite svg{flex:none}
@media (pointer:coarse){.mot-suite a{min-height:44px}}

/* ----------------------------------------------------------------
   Questions frequentes
   <details>/<summary>, sans JavaScript : le navigateur gere deja
   l'ouverture, le clavier et le lecteur d'ecran. Les deux sites
   partagent ces regles ; univ.css n'a qu'a redefinir ses jetons.

   La zone cliquable fait 44px de haut (WCAG 2.5.5) et s'etend sur
   toute la largeur de la ligne : sur telephone on vise le texte,
   pas le chevron.
   ---------------------------------------------------------------- */
.faq{background:var(--bleu-pale-2)}

/* Le surtitre ambre est mesure contre le fond de section courant
   (--fond, #FAFBFD) ou il donne 4,6:1. Sur le bleu pale de ce bloc il
   tombe a 4,44:1 — sous le seuil de 4,5:1, et c'est du petit texte
   gras, donc sans dispense. On l'assombrit ici seulement : 5,55:1 sur
   le site scolaire, 5,12:1 sur l'universite, dont le bleu est plus
   soutenu. Ne pas eclaircir sans refaire les deux calculs. */
.faq .eyebrow{color:#A6470C}
.faq-liste{max-width:56rem;margin:0 auto;
  border-top:1px solid var(--ligne)}

.faq-item{border-bottom:1px solid var(--ligne)}

.faq-item > summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:44px;padding:1rem 0;
  font-weight:600;font-size:1.02rem;line-height:1.45;color:var(--encre);
  cursor:pointer;list-style:none;
  transition:color var(--t)}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item > summary:hover{color:var(--bleu-fonce)}
.faq-item > summary:focus-visible{
  outline:2px solid var(--bleu);outline-offset:3px;border-radius:4px}

/* le chevron, dessine en CSS : pas d'image a charger, il suit la
   couleur du texte et tourne a l'ouverture */
.faq-item > summary::after{
  content:"";flex:0 0 auto;width:.55rem;height:.55rem;margin-right:.35rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t)}
.faq-item[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq-item[open] > summary{color:var(--bleu-nuit)}

.faq-reponse{padding:0 0 1.15rem}
.faq-reponse p{margin:0;color:var(--texte);line-height:1.7;max-width:60ch}

@media (prefers-reduced-motion:reduce){
  .faq-item > summary,
  .faq-item > summary::after{transition:none}
}