/* =========================================================
   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. */
  --serif:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --accent-italique:"Source Serif 4",Georgia,"Times New Roman",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:400;letter-spacing:0}
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)}

/* ---------------- 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}
.btn-or{background:var(--or);color:#fff;box-shadow:0 8px 22px -10px rgba(224,138,30,.85)}
.btn-or:hover{background:#C97A15;color:#fff;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}

.brand{display:flex;align-items:center;gap:.7rem;color:var(--encre)}
.brand:hover{color:var(--encre)}
.brand-mark{width:46px;height:46px;object-fit:contain;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text strong{font-family:var(--sans);font-size:1.06rem;font-weight:600;letter-spacing:-.015em;color:var(--encre)}
.brand-text span{font-size:.72rem;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;
}
.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 : vidéo du chantier + image de secours --- */
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--bleu-nuit-2);container-type:size}
.hero-poster{
  position:absolute;inset:0;
  background:url("/images/hero/chantier-poster.jpg?v=fad73068") center 42%/cover no-repeat;
  transform:scale(1.03);
}
.hero-video{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.hero-video.pret{opacity:1}
.hero-video iframe{
  position:absolute;top:50%;left:50%;
  /* L'agrandissement fait sortir du cadre le titre que YouTube affiche
     en haut et ses commandes en bas : seule l'image reste visible. */
  transform:translate(-50%,-50%) scale(1.35);
  border:0;pointer-events:none;
  /* Repli : dimensions calculées sur la fenêtre. */
  width:100vw;height:56.25vw;
  min-width:177.78vh;min-height:100%;
}
/* Préféré : dimensions calculées sur le conteneur lui-même, pas sur la
   fenêtre : le hero ne fait pas toute la hauteur de l'écran, et une
   iframe mesurée en vh déborderait inutilement. */
@supports (width:1cqw){
  .hero-video iframe{
    width:max(100cqw,177.7778cqh);
    height:max(100cqh,56.25cqw);
    min-width:0;min-height:0;
  }
}

/* --- voile : c'est lui qui rend le texte lisible par-dessus la vidéo --- */
.hero-voile{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(101deg,
      rgba(5,26,52,.95) 0%,
      rgba(6,32,62,.88) 36%,
      rgba(8,38,72,.70) 68%,
      rgba(10,46,92,.60) 100%),
    radial-gradient(ellipse 68% 52% at 80% 8%,rgba(224,138,30,.20),transparent 62%);
}
.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 --- */
.hero h1{text-shadow:0 2px 26px rgba(3,16,32,.6),0 1px 3px rgba(3,16,32,.45)}
.hero-lede{text-shadow:0 1px 16px rgba(3,16,32,.7)}
.hero .eyebrow-light{text-shadow:0 1px 12px rgba(3,16,32,.75)}
.hero-stats dt,.hero-stats dd{text-shadow:0 1px 14px rgba(3,16,32,.65)}

.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}
.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}

/* ---------------- 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}
.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:"Manrope",sans-serif;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 écran intermédiaire, l'icône seule suffit : elle garde le bouton
   compact au lieu de pousser la barre sur deux lignes. */
@media (max-width:1180px){
  .nav>a{padding:.5rem .58rem;font-size:.88rem}
  .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)}

.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}

/* 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);
}
.mot-texte blockquote{
  margin:0;padding:0 0 0 1.3rem;border-left:3px solid var(--or);
}
.mot-texte blockquote p{
  font-size:clamp(1rem,1.8vw,1.1rem);line-height:1.75;color:var(--texte);
}
.mot-texte blockquote p:first-child{
  font-family:var(--accent-italique);font-style:italic;
  font-size:clamp(1.1rem,2.1vw,1.32rem);color:var(--encre);line-height:1.6;
}
.mot-signature{
  margin-top:1.2rem;font-family:var(--accent-italique);font-style:italic;
  font-size:1.12rem;color:var(--encre);
}

/* --------- 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}
  .hero-video{display: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,.13)}

.pole-ico{
  display:grid;place-items:center;flex:none;
  width:2.7rem;height:2.7rem;border-radius:10px;
  background:var(--bleu-pale);color:var(--bleu);
  transition:background var(--t),color var(--t);
}
.pole-ico svg{width:1.35rem;height:1.35rem;display:block}
.pole:hover .pole-ico,.pole:focus-visible .pole-ico{background:rgba(255,255,255,.16);color:#fff}

.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. */
.nav .nav-cta-or{background:var(--or);color:#fff}
.nav .nav-cta-or:hover{background:var(--or-fonce);color:#fff}

/* =====================================================================
   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}

@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)}

.blocs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}

.bloc-majeur,
.bloc-fort,
.bloc-simple{
  border-radius:var(--r);
  padding:clamp(1.4rem,3vw,2rem);
  display:flex;flex-direction:column;gap:.7rem;
}

/* --- niveau 1 : ce qu'il faut retenir --- */
.bloc-majeur{
  background:var(--or);color:#fff;
  grid-column:1 / -1;
}
.bloc-majeur h3{
  margin:0;color:#fff;font-size:clamp(1.25rem,2.4vw,1.65rem);line-height:1.25;
}
.bloc-majeur p{margin:0;color:rgba(255,255,255,.94);font-size:1.03rem;line-height:1.65;max-width:54rem}

/* --- niveau 2 : les points principaux --- */
.bloc-fort{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-top:3px solid var(--or);
}
.bloc-fort h3{margin:0;color:#fff;font-size:1.12rem;line-height:1.3}
.bloc-fort p{margin:0;color:rgba(255,255,255,.8);font-size:.95rem;line-height:1.62}

/* --- niveau 3 : le détail --- */
.bloc-simple{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
}
.bloc-simple h3{
  margin:0;color:rgba(255,255,255,.92);font-size:.98rem;font-weight:600;line-height:1.3;
}
.bloc-simple p{margin:0;color:rgba(255,255,255,.68);font-size:.9rem;line-height:1.6}

/* les mêmes blocs sur fond clair, quand la section n'est pas sombre */
.section:not(.section-sombre) .bloc-fort{
  background:var(--blanc);border-color:var(--ligne);
}
.section:not(.section-sombre) .bloc-fort h3{color:var(--encre)}
.section:not(.section-sombre) .bloc-fort p{color:var(--texte)}
.section:not(.section-sombre) .bloc-simple{
  background:var(--fond);border-color:var(--ligne);
}
.section:not(.section-sombre) .bloc-simple h3{color:var(--encre)}
.section:not(.section-sombre) .bloc-simple p{color:var(--texte)}

@media (max-width:620px){
  .blocs{grid-template-columns:1fr}
}