/* ==========================================================================
   Institution Sainte-Thérèse — version 4
   Monde visuel « Le Préau » : une cour d'école en pierre claire niçoise,
   ouverte par l'arc du sanctuaire de 1928. Tokens figés dans BRIEF.md.
   ========================================================================== */

:root {
  /* Pierre et encre */
  --chaux: #FBF7F0;         /* fond global */
  --blanc: #FFFFFF;         /* surfaces surélevées */
  --sable: #F1E7D6;         /* bandes alternées, assises du bâtiment */
  --encre: #16242C;         /* texte principal — 13,9:1 */
  --encre-douce: #53636D;   /* texte secondaire — 5,4:1 */
  --filet: #E0D3BC;         /* filets et séparateurs — JAMAIS de texte */

  /* Bleu du logo : aplat seulement (4,6:1 sur blanc), jumeau texte à côté */
  --bleu: #0072BC;
  --bleu-txt: #005A96;      /* 6,3:1 */
  --bleu-clair: #7FC4F0;    /* bleu lisible sur encre */

  /* Ocre niçois : l'action */
  --ocre: #C8862F;
  --ocre-txt: #8A5A12;      /* 6,4:1 */
  --ocre-fonce: #A96D20;

  /* Les cinq mains du logo — prélevées à la pipette sur logo.png.
     Repères de rubrique uniquement : pastilles et filets, jamais du texte,
     jamais seules porteuses de sens. */
  --main-magenta: #EC008B;
  --main-jaune: #FFDE00;
  --main-vert: #00AF4C;
  --main-cyan: #00AEEF;
  --main-bleu: #0072BC;

  --mesure: 1200px;
  --topbar-h: 34px;
  --nav-h: 72px;
  --nav-h-compact: 56px;
  --pad-section: clamp(3.5rem, 7vw, 6rem);
  --rayon: 3px;             /* institution : angles sobres, pas de pilule */
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--chaux);
  color: var(--encre);
  font-family: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.16rem);
  line-height: 1.68;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { max-width: 100%; display: block; }
/* Dès que max-width réduit une image, son attribut HTML height continuerait de
   s'appliquer tel quel et l'étirerait verticalement (vu sur les portraits
   Guigues et Thouret). height:auto rétablit le rapport naturel partout ; les
   règles qui posent un aspect-ratio explicite passent après et gagnent. */
img { height: auto; }

h1, h2, h3, h4 {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.14;
  color: var(--encre);
  margin: 0;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }

/* EB Garamond a des jambages profonds : réserve pour éviter le rognage. */
h1, h2 { padding-bottom: .1em; margin-bottom: -.1em; }

p { margin: 0 0 1.15rem; }
a { color: var(--bleu-txt); }
a:hover { color: var(--ocre-txt); }

:focus-visible {
  outline: 2px solid var(--ocre);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--encre); color: var(--chaux);
  padding: .8rem 1.2rem; z-index: 300;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--mesure);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Petites capitales gravées, écho du cartouche de la carte postale de 1928 */
.eyebrow {
  font-family: "Alegreya Sans SC", "Alegreya Sans", sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ocre-txt);
  display: block;
  margin-bottom: .5rem;
}

.lede {
  font-size: clamp(1.12rem, 1.05rem + .4vw, 1.3rem);
  color: var(--encre-douce);
  max-width: 62ch;
}

/* Assises de façade : triple filet horizontal, joints du bâtiment */
.filet-assises {
  height: 7px;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  position: relative;
}
.filet-assises::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 3px;
  height: 1px;
  background: var(--filet);
}

/* ---------------------------------------------------------------- Boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: var(--rayon);
  font-family: "Alegreya Sans", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* Fond --ocre-txt et non --ocre : blanc sur #C8862F tombe à 3,04:1, sous le
   seuil AA. #8A5A12 donne 5,91:1 pour le même registre chromatique. */
.btn-primary { background: var(--ocre-txt); color: #fff; }
.btn-primary:hover { background: #6E470E; color: #fff; }

.btn-outline {
  border-color: var(--filet);
  color: var(--encre);
  background: var(--blanc);
}
.btn-outline:hover { border-color: var(--ocre); color: var(--ocre-txt); }

.btn-ghost { color: var(--encre); border-color: transparent; }
.btn-ghost:hover { color: var(--ocre-txt); }

.btn-sm { padding: .6rem 1.05rem; font-size: .95rem; }

/* --------------------------------------------------------- Bandeau + nav */

.topbar {
  background: var(--sable);
  border-bottom: 1px solid var(--filet);
  font-size: .92rem;
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-height: var(--topbar-h);
  padding-block: .25rem;
}
.topbar a:not(.btn) { color: var(--encre); text-decoration: none; }
.topbar a:hover { color: var(--ocre-txt); }
.topbar-contact { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.topbar-contact svg { width: 15px; height: 15px; flex: none; color: var(--bleu-txt); }
.topbar-contact span, .topbar-contact a { display: inline-flex; align-items: center; gap: .4rem; }
.topbar-cta { margin-left: auto; }
.topbar-cta .btn { padding: .35rem .95rem; font-size: .92rem; }

.site-header {
  /* Bloc conteneur du mégamenu : sans ce position:relative, le panneau se cale
     sur le <li> parent et se réduit à la largeur du libellé. */
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--chaux);
  border-bottom: 1px solid var(--filet);
  transition: box-shadow .25s ease;
}
.site-header.est-defile { box-shadow: 0 6px 22px rgba(22, 36, 44, .09); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-height: var(--nav-h);
  transition: min-height .25s ease;
}
.site-header.est-defile .nav-inner { min-height: var(--nav-h-compact); }

.marque {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--encre);
  flex: none;
  margin-right: auto;
}
.marque img { width: 46px; height: auto; flex: none; }
.marque-texte {
  font-family: "EB Garamond", serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.15;
}
.marque-texte small {
  display: block;
  font-family: "Alegreya Sans SC", sans-serif;
  font-size: .74rem;
  letter-spacing: .07em;
  color: var(--encre-douce);
  font-weight: 500;
}

.nav-principale { display: flex; align-items: center; gap: .3rem; }
.nav-principale > li { list-style: none; }
.nav-principale { margin: 0; padding: 0; }

.nav-lien {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .85rem;
  border-radius: var(--rayon);
  font-weight: 600;
  text-decoration: none;
  color: var(--encre);
  background: none;
  border: 0;
  font-size: 1.02rem;
  font-family: inherit;
  cursor: pointer;
}
.nav-lien:hover, .nav-lien[aria-expanded="true"] { background: var(--sable); color: var(--encre); }

/* Pastille de rubrique : la couleur d'une main du logo */
.pastille {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
}
.pastille-decouvrir { background: var(--main-magenta); }
.pastille-ecole { background: var(--main-jaune); }
.pastille-college { background: var(--main-cyan); }
.pastille-pastorale { background: var(--main-vert); }
.pastille-contact { background: var(--main-bleu); }

/* Le préau : un seul panneau plein largeur, jamais de cascade de sous-menus */
.megamenu {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--blanc);
  border-top: 1px solid var(--filet);
  border-bottom: 3px solid var(--ocre);
  box-shadow: 0 18px 40px rgba(22, 36, 44, .13);
  display: none;
  z-index: 130;
}
.megamenu[data-ouvert="true"] { display: block; }
/* Un panneau par rubrique : une grille de 4 colonnes fixes laisserait les trois
   quarts vides. Les liens s'écoulent en colonnes selon leur nombre. */
.megamenu-inner {
  padding-block: 1.6rem 2rem;
}
.megamenu-inner > div { max-width: 62ch; }
.megamenu ul {
  columns: 2;
  column-gap: 2.4rem;
}
.megamenu li { break-inside: avoid; }
.megamenu h3 {
  font-family: "Alegreya Sans SC", sans-serif;
  font-size: .95rem;
  letter-spacing: .08em;
  color: var(--encre-douce);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--filet);
}
.megamenu ul { list-style: none; margin: 0; padding: 0; }
.megamenu li { margin-bottom: .35rem; }
.megamenu a {
  display: block;
  padding: .35rem 0;
  text-decoration: none;
  color: var(--encre);
  font-size: 1rem;
}
.megamenu a:hover { color: var(--ocre-txt); }
.megamenu a[aria-current="page"] { color: var(--ocre-txt); font-weight: 700; }

.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--blanc);
  cursor: pointer;
  padding: 0;
  color: var(--encre);
}
.burger svg { width: 22px; height: 22px; margin: auto; }

/* ------------------------------------------------------------ Hero « baie » */

.hero {
  padding-block: clamp(2rem, 4vw, 3.4rem) clamp(2.4rem, 5vw, 4rem);
}
.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 4vw, 3.4rem);
  align-items: center;
}
.hero h1 { margin-bottom: 1.1rem; }
.hero .lede { margin-bottom: 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* La baie.

   RÈGLE : le cadre est au format du film, et le film remplit le cadre.
   Toute autre combinaison finit en bandes noires, parce que c'est YouTube — et
   non la page — qui comble la différence, avec du #000. D'où :
     - `aspect-ratio: 16 / 9` sur la baie, le format exact de la source ;
     - largeur et hauteur du lecteur en pourcentages fixes, jamais en `auto`
       ni via `aspect-ratio` (sur un élément remplacé positionné en absolu,
       `width: auto` retombe sur la largeur intrinsèque de 300px dans certains
       moteurs — le lecteur devient alors une colonne étroite bordée de noir).

   Le plein cintre a été retiré du cadre : sur une image rectangulaire, l'arche
   mangeait les deux angles supérieurs et se lisait comme un encadrement rapporté
   autour de la vidéo. Le motif du préau reste porté par les volets qui s'écartent
   et par l'arcade du pied de page, là où il ne mutile aucune image. */
.baie {
  /* <figure> porte une marge latérale de 40px par défaut : sans cette remise à
     zéro, la baie perd 80px de large et ne remplit plus sa colonne. */
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--sable) center/cover no-repeat;
  border: 1px solid var(--filet);
  box-shadow: 0 20px 50px rgba(22, 36, 44, .16);
}
.baie iframe,
.baie video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: 0;
  object-fit: cover;
  pointer-events: none;   /* aucun contrôle YouTube ne peut apparaître au survol */
}

/* Le film en entier : même cadre, mais le lecteur reprend la main sur la souris.
   La baie étant déjà au format du film, il n'y a rien à recadrer. */
.baie.est-lecteur iframe,
.baie.est-lecteur video {
  object-fit: contain;
  background: #000;
  pointer-events: auto;
}

/* Les volets : le cache anti-flash devient un lever de rideau */
.volet {
  position: absolute;
  top: 0;
  width: 50.6%;
  height: 100%;
  background: var(--sable);
  z-index: 3;
  transition: transform 900ms cubic-bezier(.66, 0, .2, 1);
}
.volet::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Lames de persienne niçoise */
  background-image: repeating-linear-gradient(
    180deg,
    rgba(22, 36, 44, .07) 0 2px,
    transparent 2px 13px
  );
}
.volet-g { left: 0; border-right: 1px solid var(--filet); }
.volet-d { right: 0; }
.baie.est-ouverte .volet-g { transform: translateX(-101%); }
.baie.est-ouverte .volet-d { transform: translateX(101%); }

/* Sans JavaScript, la classe est-ouverte n'est jamais posée : les volets
   resteraient fermés et masqueraient définitivement la baie. On les ouvre donc
   d'office quand le script ne peut pas s'exécuter. */
@media (scripting: none) {
  .volet-g { transform: translateX(-101%); }
  .volet-d { transform: translateX(101%); }
  .volet-rosette { opacity: 0; }
}

/* La rosette du logo joint les deux volets, puis s'efface avec eux */
.volet-rosette {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(58px, 12%, 96px);
  z-index: 4;
  transition: opacity 420ms ease;
}
.baie.est-ouverte .volet-rosette { opacity: 0; }

/* Bouton « Voir le film » : même matière que le cartouche, coin opposé. Il se
   révèle au survol de la baie pour ne pas encombrer le plan, mais reste sous
   les volets (z-index 2 contre 3) le temps du lever de rideau, et redevient
   visible dès qu'il reçoit le focus au clavier. */
.baie-plein {
  position: absolute;
  right: 1rem; bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(255, 255, 255, .93);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: .4rem .8rem;
  font-family: "Alegreya Sans SC", sans-serif;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--encre);
  cursor: pointer;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 260ms ease, background-color 160ms ease;
}
/* `display: inline-flex` ci-dessus l'emporte sur le `display: none` que la
   feuille du navigateur applique à [hidden] — une feuille d'auteur bat toujours
   celle de l'agent. Sans cette ligne, le bouton reste affiché alors que le
   script le déclare caché : c'est ce qui le faisait apparaître sur mobile. */
.baie-plein[hidden] { display: none; }

/* La vidéo n'est servie qu'au-delà de 900 px (voir main.js) : sous ce seuil il
   n'y a rien à ouvrir, donc pas de bouton. Doublon volontaire de la condition
   du script — lui ne s'exécute qu'au chargement, cette règle couvre aussi la
   fenêtre réduite après coup et la rotation d'une tablette. */
@media (max-width: 900px) {
  .baie-plein { display: none; }
}

.baie-plein svg { width: 15px; height: 15px; }
.baie:hover .baie-plein,
.baie-plein:focus-visible {
  opacity: 1;
  transform: none;
}
.baie-plein:hover { background: #fff; }

/* Sans survol possible (tactile), le bouton ne peut pas se cacher.
   Cela concerne les écrans tactiles au-delà de 900 px — portables à dalle
   tactile — puisque sous ce seuil le bouton n'existe pas. */
@media (hover: none) {
  .baie-plein { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .baie-plein { transition: none; }
}

/* Plein écran : la baie devient l'écran. Deux règles séparées et non un
   sélecteur groupé — un navigateur qui ne connaît pas l'une des syntaxes
   jetterait tout le bloc. */
.baie:fullscreen {
  aspect-ratio: auto;
  width: 100%; height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: #000;
}
.baie:fullscreen .volet,
.baie:fullscreen .volet-rosette,
.baie:fullscreen .baie-plein { display: none; }

.baie:-webkit-full-screen {
  aspect-ratio: auto;
  width: 100%; height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: #000;
}
.baie:-webkit-full-screen .volet,
.baie:-webkit-full-screen .volet-rosette,
.baie:-webkit-full-screen .baie-plein { display: none; }

/* ----------------------------------------------------------- Sections */

.bande { padding-block: var(--pad-section); }
.bande.sable { background: var(--sable); border-block: 1px solid var(--filet); }
.bande.blanche { background: var(--blanc); border-block: 1px solid var(--filet); }

.bande-tete { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Barre d'identification : un parent doit se situer en trois secondes */
.identite {
  background: var(--encre);
  color: var(--chaux);
  padding-block: 1.5rem;
}
.identite-liste {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 2.2rem;
  list-style: none;
  margin: 0; padding: 0;
  justify-content: center;
  font-family: "Alegreya Sans SC", sans-serif;
  letter-spacing: .05em;
  font-size: 1rem;
}
.identite-liste li { display: flex; align-items: center; gap: .6rem; }
.identite-liste li + li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--ocre);
  transform: rotate(45deg);
  margin-right: 1.6rem;
  margin-left: -1.6rem;
}

/* Sélecteur d'entrée : le geste utile, pas un bloc « nos valeurs » */
.aiguillage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}
.aiguillage-carte {
  display: block;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-top: 3px solid var(--niveau, var(--bleu));
  border-radius: var(--rayon);
  padding: 1.4rem 1.3rem;
  text-decoration: none;
  color: var(--encre);
  transition: transform .22s ease, box-shadow .22s ease;
}
.aiguillage-carte:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(22, 36, 44, .11);
  color: var(--encre);
}
.aiguillage-carte h3 { margin-bottom: .3rem; }
.aiguillage-carte p { margin: 0; color: var(--encre-douce); font-size: .98rem; }

/* Étapes d'inscription */
.etapes { counter-reset: etape; display: grid; gap: 1rem; }
.etape {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.3rem 1.4rem;
}
.etape::before {
  counter-increment: etape;
  content: counter(etape);
  font-family: "EB Garamond", serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ocre-txt);
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border: 1px solid var(--filet);
  border-radius: 50%;
  flex: none;
}
.etape h3 { margin-bottom: .25rem; }
.etape p { margin: 0; color: var(--encre-douce); }

/* Chiffres : « on connaît chacun » se démontre */
.preuves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.4rem;
}
.preuve {
  border-left: 3px solid var(--filet);
  padding-left: 1.1rem;
}
.preuve-val {
  font-family: "EB Garamond", serif;
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 600;
  line-height: 1;
  color: var(--bleu-txt);
}
.preuve-lib {
  font-family: "Alegreya Sans SC", sans-serif;
  letter-spacing: .05em;
  color: var(--encre-douce);
  margin-top: .35rem;
  font-size: .98rem;
}

/* Bloc mémoire — registre de notice, jamais de mise en scène */
.memoire {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
  align-items: start;
}
.memoire figure { margin: 0; }
/* Arc plein cintre : la photo en niche, écho du portail.
   Le fichier source est très vertical (695×1000, rapport 0,695) : affiché tel
   quel, le portrait s'étire vers le haut. On le recadre en 4/5 par object-fit
   — recadrage, jamais déformation — en gardant le visage, situé dans le tiers
   supérieur de la photo. */
.memoire img {
  width: 100%;
  /* height:auto est indispensable : l'attribut HTML height vaut `height:550px`
     en indication de présentation et écraserait l'aspect-ratio sans lui. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: 50vw 50vw var(--rayon) var(--rayon) / 28% 28% var(--rayon) var(--rayon);
  border: 1px solid var(--filet);
}
.memoire figcaption {
  font-size: .86rem;
  color: var(--encre-douce);
  margin-top: .6rem;
  font-family: "Alegreya Sans SC", sans-serif;
  letter-spacing: .04em;
}

/* --------------------------------------------------------- Contenu de page */

.page-header { margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.page-header h1 { margin-bottom: .7rem; }

.breadcrumb {
  font-size: .92rem;
  color: var(--encre-douce);
  padding-block: 1.6rem .4rem;
  font-family: "Alegreya Sans SC", sans-serif;
  letter-spacing: .04em;
}
.breadcrumb a { color: var(--encre-douce); text-decoration: none; }
.breadcrumb a:hover { color: var(--ocre-txt); }
.breadcrumb .sep { margin-inline: .5rem; color: var(--encre-douce); }
.breadcrumb .current { color: var(--encre); }

main .container > h2,
main .container > h3 { margin-top: 2.4rem; margin-bottom: .8rem; }

blockquote {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem;
  background: var(--sable);
  border-left: 3px solid var(--ocre);
  border-radius: var(--rayon);
  font-family: "EB Garamond", serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--encre);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1.2rem;
}
.card {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  align-items: flex-start;
}
.card h3 { font-size: 1.15rem; }
.card p { color: var(--encre-douce); margin: 0; }
.card .btn { margin-top: auto; }
.card-icon { width: 26px; height: 26px; color: var(--bleu-txt); }

.cycle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}
.cycle-card {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-top: 3px solid var(--bleu);
  border-radius: var(--rayon);
  padding: 1.5rem;
}
.cycle-card h3 {
  font-family: "Alegreya Sans SC", sans-serif;
  letter-spacing: .07em;
  color: var(--bleu-txt);
  margin-bottom: .6rem;
}
.cycle-card p { color: var(--encre-douce); margin: 0; }

/* Rangée de logos partenaires : chaque logo garde ses couleurs de marque
   propres, jamais recolorées — une carte blanche neutre les met à niveau. */
.partenaires-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
}
.partenaires-logos .partenaire-carte {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.1rem 1.6rem;
  display: flex;
  align-items: center;
}
.partenaires-logos img { height: 72px; width: auto; display: block; }

.table-wrap {
  overflow-x: auto;   /* les tableaux larges défilent dans leur cadre */
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--blanc);
}
.data-table { width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 780px; }
.data-table th, .data-table td { padding: .85rem 1rem; text-align: left; vertical-align: top; }
.data-table thead th {
  background: var(--sable);
  font-family: "Alegreya Sans SC", sans-serif;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--filet);
  white-space: nowrap;
}
.data-table tbody tr + tr td { border-top: 1px solid var(--filet); }

.galerie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1rem;
}
.galerie-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}

.timeline { border-left: 2px solid var(--filet); padding-left: 1.8rem; margin-left: .6rem; }
.timeline-item { position: relative; margin-bottom: 2.4rem; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1.8rem - 6px);
  top: .5rem;
  width: 11px; height: 11px;
  background: var(--ocre);
  border-radius: 50%;
  border: 2px solid var(--chaux);
}
.timeline-item h3 { margin-bottom: .5rem; }

/* Formulaire */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: start;
}
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: .35rem;
}
.field input, .field textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--blanc);
  font: inherit;
  color: var(--encre);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--ocre); outline: none; box-shadow: 0 0 0 3px rgba(200, 134, 47, .16); }
.required { color: var(--ocre-txt); }

.info-card {
  background: var(--sable);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.6rem;
}
.info-card h3 { margin-bottom: 1rem; }
.info-row { display: flex; gap: .8rem; margin-bottom: 1rem; align-items: flex-start; }
.info-row svg { width: 20px; height: 20px; flex: none; color: var(--bleu-txt); margin-top: .2rem; }

.alert { padding: 1rem 1.2rem; border-radius: var(--rayon); margin-bottom: 1.4rem; }
.alert-success { background: #E8F5EC; border: 1px solid #00AF4C; color: #14532D; }
.alert-error { background: #FDECEC; border: 1px solid #C0392B; color: #7A1F16; }

/* ---------------------------------------------------------------- Footer */

.site-footer {
  background: var(--encre);
  color: var(--chaux);
  padding-block: clamp(2.8rem, 5vw, 4rem) 1.6rem;
  margin-top: var(--pad-section);
}
/* Arcade de cinq arcs : le préau, en tête du pied de page */
.footer-arcade {
  display: flex;
  gap: 6px;
  margin-bottom: 2.4rem;
}
.footer-arcade span {
  flex: 1;
  height: 22px;
  border-radius: 50vw 50vw 0 0 / 100% 100% 0 0;
  opacity: .85;
}
.footer-arcade span:nth-child(1) { background: var(--main-magenta); }
.footer-arcade span:nth-child(2) { background: var(--main-jaune); }
.footer-arcade span:nth-child(3) { background: var(--main-cyan); }
.footer-arcade span:nth-child(4) { background: var(--main-vert); }
.footer-arcade span:nth-child(5) { background: var(--main-bleu); }

.footer-grille {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 2rem;
}
.footer-grille h3 {
  font-family: "Alegreya Sans SC", sans-serif;
  font-size: .92rem;
  letter-spacing: .09em;
  color: var(--ocre);
  margin-bottom: .9rem;
}
.footer-grille ul { list-style: none; margin: 0; padding: 0; }
.footer-grille li { margin-bottom: .45rem; }
.footer-grille a { color: #CFD8DC; text-decoration: none; font-size: .98rem; }
.footer-grille a:hover { color: #fff; }
.footer-marque img { width: 54px; height: auto; margin-bottom: .9rem; background: #fff; border-radius: var(--rayon); padding: 4px; }
.footer-marque p { color: #B9C4CA; font-size: .96rem; }

.footer-bas {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(224, 211, 188, .22);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  font-size: .88rem;
  color: #9BA8AF;
}
.footer-bas a { color: #9BA8AF; }

.bandeau-travail {
  background: #22333C;
  color: #CFD8DC;
  text-align: center;
  font-size: .87rem;
  padding: .9rem 1.5rem;
  border-top: 1px solid rgba(224, 211, 188, .18);
}

/* ------------------------------------------------- Barre d'action mobile */

.barre-mobile {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 140;
  display: none;
  background: var(--blanc);
  border-top: 1px solid var(--filet);
  box-shadow: 0 -6px 20px rgba(22, 36, 44, .12);
  padding-bottom: env(safe-area-inset-bottom);
}
.barre-mobile ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none; margin: 0; padding: 0;
}
.barre-mobile a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .22rem;
  min-height: 62px;
  text-decoration: none;
  color: var(--encre);
  font-family: "Alegreya Sans SC", sans-serif;
  font-size: .84rem;
  letter-spacing: .04em;
}
.barre-mobile li + li a { border-left: 1px solid var(--filet); }
.barre-mobile svg { width: 19px; height: 19px; color: var(--ocre-txt); }
.barre-mobile .est-primaire { background: var(--ocre); color: #fff; }
.barre-mobile .est-primaire svg { color: #fff; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1040px) {
  .hero-grille { grid-template-columns: 1fr; }
  .hero-baie { order: -1; }
  .footer-grille { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .burger { display: grid; place-items: center; }
  .topbar-contact { display: none; }

  /* Le préau devient une feuille plein écran à accordéons */
  .nav-principale {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: block;
    background: var(--chaux);
    padding: 1.2rem 1.5rem 6rem;
    overflow-y: auto;
    transform: translateX(101%);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1);
  }
  .nav-principale.est-ouverte { transform: none; }
  .nav-principale > li { border-bottom: 1px solid var(--filet); }
  .nav-lien { width: 100%; justify-content: flex-start; padding: 1rem .2rem; font-size: 1.1rem; }
  .megamenu {
    position: static;
    display: block;
    box-shadow: none;
    border: 0;
    background: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .megamenu[data-ouvert="true"] { max-height: 60rem; }
  .megamenu-inner { padding-block: .2rem 1rem; }
  .megamenu ul { columns: 1; }
  .nav-fermer {
    display: flex;
    margin-left: auto;
    margin-bottom: .8rem;
  }

  .barre-mobile { display: block; }
  /* La barre ne doit jamais recouvrir la fin de page : la réserve porte sur
     <body>, seul élément qui englobe à coup sûr tout le contenu. */
  body { padding-bottom: 96px; }

  .memoire { grid-template-columns: 1fr; }
  .memoire img { max-width: 260px; }
}

@media (min-width: 901px) {
  .nav-fermer { display: none; }
}

@media (max-width: 620px) {
  .footer-grille { grid-template-columns: 1fr; gap: 1.6rem; }
  .marque-texte { font-size: 1rem; }
  .marque img { width: 38px; }
  .identite-liste { flex-direction: column; align-items: flex-start; gap: .45rem; }
  .identite-liste li + li::before { display: none; }
  .baie { aspect-ratio: 3 / 4; }
}

/* --------------------------------------------------- Mouvement réduit */

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

/* ------------------------------------------------ Encart du centenaire (RDV 2026-10-02) */
.centenaire {
  border: 2px solid var(--encre);
  border-radius: 4px;
  background: #fff;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.4rem, 3vw, 2.4rem);
  text-align: center;
}
.centenaire-dates {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: .02em;
  margin: 0 0 .6rem;
  color: var(--bleu-txt);
}
.centenaire-slogan {
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  color: var(--encre);
  margin: 0 0 1.8rem;
}
.centenaire-logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.centenaire-logos img { height: 90px; width: auto; max-width: 45%; object-fit: contain; }

/* Bandeau sous le hero : un seul mot, un seul geste */
.identite-inscription {
  display: block;
  text-align: center;
  color: #fff;
  font-family: "Alegreya Sans SC", "Alegreya Sans", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .12em;
  text-decoration: none;
}
.identite-inscription:hover, .identite-inscription:focus-visible { color: var(--bleu-clair); text-decoration: underline; }
@media (max-width: 900px) {
  .centenaire { order: -2; }   /* l'encart du centenaire passe avant la photo sur mobile */
}

/* Blocs d'accueil avec documents d'inscription : pas de survol « carte cliquable » */
.aiguillage-docs:hover { transform: none; box-shadow: none; }
.docs-liste { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; font-size: .95rem; line-height: 1.35; }
.docs-liste li { padding-left: 2.3rem; position: relative; }
.docs-liste li::before { content: attr(data-type); position: absolute; left: 0; top: .15rem; font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--bleu-txt); border-radius: 2px; padding: .1rem .3rem; }
.docs-liste a { color: var(--bleu-txt); }
.docs-remplir { font-size: .78rem; font-weight: 700; color: var(--ocre-txt); white-space: nowrap; }

/* Blocs repliés : les documents n'apparaissent qu'au clic (retour RDV 2026-10-02) */
.aiguillage-repli { align-items: start; }
.aiguillage-docs summary { list-style: none; cursor: pointer; }
.aiguillage-docs summary::-webkit-details-marker { display: none; }
.aiguillage-docs:not([open]):hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(22, 36, 44, .11); }
.aiguillage-docs summary:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; border-radius: 2px; }
.docs-ouvrir { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-size: .9rem; font-weight: 700; color: var(--bleu-txt); }
.docs-ouvrir::after { content: "+"; font-size: 1.15rem; line-height: 1; transition: transform .2s ease; }
.aiguillage-docs[open] .docs-ouvrir::after { transform: rotate(45deg); }

/* ------------------------------------------------ Organigramme (disposition du document Word de l'école) */
.orga {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.35fr 1.45fr;
  gap: 1.1rem;
  align-items: start;
  margin-block: 1rem 3.5rem;
}
.orga-col { display: grid; gap: 1rem; }
.orga-logo { width: 150px; height: auto; margin: 0 auto .4rem; }
.orga-boite {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-top: 4px solid var(--famille, var(--bleu));
  border-radius: var(--rayon);
  padding: .85rem 1rem;
  text-align: center;
  font-size: .92rem;
  line-height: 1.35;
}
.orga-boite strong { display: block; font-family: "EB Garamond", Georgia, serif; font-size: 1.12rem; color: var(--encre); margin-bottom: .2rem; }
.orga-boite span { color: var(--encre-douce); }
.orga-liste { text-align: left; }
.orga-liste p { margin: 0 0 .7rem; font-size: .9rem; color: var(--encre-douce); }
.orga-liste p:last-child { margin-bottom: 0; }
.orga-liste b { color: var(--encre); }
.orga-chef { border: 2px solid var(--bleu); border-top-width: 6px; padding-block: 1.3rem; }
.orga-chef strong { font-size: 1.45rem; color: var(--bleu-txt); }
.orga-duo { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.orga-direction { --famille: var(--main-bleu); }
.orga-admin     { --famille: var(--main-magenta); }
.orga-pastorale { --famille: var(--main-jaune); }
.orga-instance  { --famille: var(--ocre); }
.orga-tutelle   { --famille: var(--ocre); }
.orga-services  { --famille: var(--main-vert); }
.orga-profs     { --famille: var(--main-cyan); }
@media (max-width: 1100px) { .orga { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .orga { grid-template-columns: 1fr; } .orga-duo { grid-template-columns: 1fr; } }

/* ------------------------------------------------ « Nice » au centre de l'en-tête */
.ville {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  text-decoration: none;
  min-width: 0;
}
.ville-nom {
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: .42em;
  margin-right: -.42em;           /* compense l'espacement après la dernière lettre : centrage optique */
  text-transform: uppercase;
  line-height: 1;
  color: var(--bleu-txt);
}
.ville-vague { width: 5.2rem; height: .7rem; }
.ville-vague path { stroke: url(#ville-degrade); stroke: var(--main-cyan); }
.ville:hover .ville-nom { color: var(--encre); }
.site-header.est-defile .ville-nom { font-size: clamp(1.3rem, 2vw, 1.7rem); }
@media (max-width: 900px) {
  .ville-nom { font-size: 1.25rem; letter-spacing: .3em; margin-right: -.3em; }
  .ville-vague { width: 3.6rem; }
}
@media (max-width: 420px) {
  .ville { display: none; }       /* trop étroit à côté de la marque et du menu */
}