/* La police est servie par nous, jamais par un tiers : afficher une page ne doit pas
   communiquer l'adresse IP du visiteur à qui que ce soit. Outfit, licence SIL OFL. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/polices/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/polices/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}


/* ─────────────────────────────────────────────────────────────────────────────
   PROPOSITION « LE TROMBINOSCOPE » — un réseau, ce sont ses membres.
   L'accueil n'est ni une photo ni une phrase : c'est le MUR DES VINGT-QUATRE
   ÉCOLES, avec leurs vrais logos. Chacune garde son identité — certaines sont
   dessinées, d'autres sont des blasons de commune — et c'est justement ce que le
   mur raconte : un réseau d'écoles qui ne se ressemblent pas.
   Fond ivoire tiède, encre bleu nuit, et aucune couleur d'accent : les logos
   apportent déjà la leur. Une seule règle graphique, la case.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* LA PALETTE DU RAND — RELEVÉE, pas choisie. Sur rand.marne.fr, la couleur dominante est
     #b0927d (fonds, filets, bordures) et sa variante foncée #9a7f6b ; le logo, lui, porte
     #242021 pour le mot « rand » et #a48876 pour la ligne « réseau artistique et numérique ».
     Le réseau est BRUN, pas bleu.
     Les valeurs de texte sont vérifiées sur l'ivoire (RGAA AA = 4,5:1 exigé) :
       --encre 8,74:1 · --encre-noire 15,19:1 · --brun 5,56:1 · --gris 5,70:1.
     ⚠️ --taupe est DÉCORATIVE (2,73:1) : filets, surfaces, jauges — jamais du texte. */
  --ivoire: #faf8f4;
  --blanc: #fff;
  --encre: #54443a;
  --encre-noire: #242021;
  --gris: #6a615a;
  --filet: #e6ded4;
  --brun: #7a5f49;
  /* LE BANDEAU. Relevé tel quel dans le code de rand.marne.fr :
     <nav class="navbar … text-black" style="background-color:#B0927D;">. C'est une couleur de
     SURFACE : elle porte du texte SOMBRE (#242021 → 5,56:1), jamais du blanc (2,90:1 — le site
     actuel le fait, nous n'avons pas de raison de recopier le défaut). */
  --bandeau: #b0927d;
  --bandeau-fonce: #9a7f6b;
  --taupe: #b0927d;
  /* Le jaune et la crème de l'ancienne version « pour les enfants » — devenue LE style du site (20/09). */
  --jaune: #ffd24a;
  --creme: #fdf4e3;
  --police: 'Outfit', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--ivoire); color: var(--encre-noire); font-family: var(--police); font-size: 17.5px; line-height: 1.55; }
img { display: block; max-width: 100%; }
a { color: var(--encre); }
:focus-visible { outline: 2px solid var(--brun); outline-offset: 2px; }
.dedans { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 14px; top: 10px; z-index: 30; background: var(--encre); color: #fff; padding: 10px 16px; }

.entete { border-bottom: 1px solid var(--filet); }
.entete .dedans { display: flex; align-items: center; gap: 26px; height: 76px; }
/* ⚠️ Le logo ne se laisse PAS comprimer : mesuré à 55 x 46 pour une image 512 x 306, il était
   écrasé par l'en-tête en « flex ». « flex: none » le protège, et sa largeur suit sa hauteur. */
.logo { display: block; text-decoration: none; flex: none; }
.logo img { height: 54px; width: auto; max-width: none; }
@media (max-width: 420px) { .logo img { height: 46px; } }
.entete nav { margin-left: auto; display: flex; gap: 24px; font-size: 15.5px; }
.entete nav a { text-decoration: none; color: var(--encre-noire); white-space: nowrap; }
.entete nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.entete nav .court { display: none; }
.entete .espace { background: var(--encre); color: #fff; padding: 10px 18px; text-decoration: none; font-weight: 500;
  font-size: 15.5px; border-radius: 4px; }

/* ── LE MUR. Une case par école, toutes de la même taille : personne n'est plus grand qu'un autre. */
.ouverture { padding: 42px 0 10px; }
.ouverture h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; }
.ouverture p { color: var(--gris); margin-top: 10px; max-width: 60ch; }
.sous-titre-mur { font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin-top: 34px; }
.mur { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--filet);
  border: 1px solid var(--filet); margin-top: 26px; }
.mur a { background: var(--blanc); padding: 18px 14px 15px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; min-height: 158px; }
.mur a:hover { background: #fffdf8; box-shadow: inset 0 0 0 2px var(--jaune); }
.mur a.eteinte { opacity: .28; }
.mur .cadre { height: 62px; display: grid; place-items: center; }
.mur img { max-height: 62px; width: auto; object-fit: contain; }
.mur .nom { font-size: 12.5px; line-height: 1.25; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mur .ville { font-size: 12px; color: var(--gris); margin-top: auto; }

/* ── LES DEUX CONSERVATOIRES, en tête du mur : deux cartes larges, avec leur bannière. */
.conservatoires { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.conservatoires a { display: grid; grid-template-columns: 168px minmax(0, 1fr); background: var(--blanc);
  border: 1px solid var(--filet); text-decoration: none; color: inherit; }
.conservatoires a:hover { border-color: var(--jaune); }
.conservatoires a.eteinte { opacity: .3; }
.conservatoires .vue { background: var(--filet) center/cover no-repeat; min-height: 150px; }
.conservatoires .vue.sans { background: #f3f1ec; }
.conservatoires .t { padding: 18px 20px 18px; display: flex; flex-direction: column; gap: 5px; }
.conservatoires .rang { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--brun);
  font-weight: 600; }
.conservatoires h3 { font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.conservatoires .ou { font-size: 14px; color: var(--gris); }
.conservatoires .quoi { font-size: 13.5px; color: var(--encre); margin-top: auto; padding-top: 8px; }
.sous-mur { margin-top: 30px; font-size: 15px; color: var(--gris); }
@media (max-width: 860px) { .conservatoires { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .conservatoires a { grid-template-columns: 1fr; }
  .conservatoires .vue { min-height: 130px; }
}

/* ── LA RECHERCHE, posée sous le mur : elle éteint les écoles qui ne conviennent pas. */
.chercher { margin-top: 30px; padding: 22px 24px; background: var(--blanc); border: 1px solid var(--filet);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: end; }
.chercher label { display: block; font-size: 13px; color: var(--gris); margin-bottom: 6px; }
.chercher select { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--gris);
  background: var(--blanc); color: var(--encre-noire); border-radius: 4px; }
.chercher .verdict { font-size: 16px; font-weight: 500; }
.chercher .verdict b { font-weight: 600; }
.chercher .verdict .rien { color: var(--brun); }

/* ── LES TROIS PORTES. Un volet par discipline : image (ou vidéo si un jour il y en a), le nom en
   grand, le poids réel du réseau. L'animation se déclenche au survol ET à l'entrée dans l'écran. */
.portes { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--encre-noire); }
.porte { position: relative; overflow: hidden; border: 0; padding: 0; cursor: pointer;
  height: clamp(200px, 26vw, 330px); display: block; text-align: left; font: inherit; color: #fff; }
.porte .fond { position: absolute; inset: 0; background: center/cover no-repeat; }
.porte video.fond { object-fit: cover; width: 100%; height: 100%; }
/* La fresque (accueil.js) : un calque entre en fondu par-dessus le précédent, et chaque image
   dérive lentement — un zoom d'à peine 8 % en vingt secondes, assez pour vivre, pas pour tanguer. */
.porte .fond.vivant { animation: derive 20s linear both; transition: opacity 1.8s ease; will-change: transform, opacity; }
.porte .fond.entre { opacity: 0; }
@keyframes derive { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-1.2%, .8%); } }
@media (prefers-reduced-motion: reduce) { .porte .fond.vivant { animation: none; } }
body.animations-arretees .porte .fond.vivant { animation-play-state: paused; }
/* Les frontières entre les trois portes s'estompent (Guillaume, 20/09) : un voile vertical fond
   chaque bord dans le noir du bandeau, l'image d'à côté fait de même — les trois se rejoignent en douceur. */
.porte::before, .porte::after { content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 1; pointer-events: none; }
.porte::before { left: 0; background: linear-gradient(90deg, var(--encre-noire), transparent); }
.porte::after { right: 0; background: linear-gradient(270deg, var(--encre-noire), transparent); }
.porte:first-child::before, .porte:last-child::after { display: none; }
.porte .voile, .porte .dire { z-index: 2; }
@media (max-width: 760px) { .porte::before, .porte::after { display: none; } }
/* L'image n'est PAS assombrie uniformément — c'est ce qui l'aplatissait. Elle garde sa lumière en
   haut, et le bas se ferme progressivement pour porter le texte. */
.porte .voile { position: absolute; inset: 0; background: linear-gradient(180deg,
  rgba(36,32,33,0) 0%, rgba(36,32,33,.12) 34%, rgba(36,32,33,.55) 66%, rgba(36,32,33,.92) 100%); }
.porte:hover .voile, .porte:focus-visible .voile { background: linear-gradient(180deg,
  rgba(36,32,33,0) 0%, rgba(36,32,33,.06) 34%, rgba(36,32,33,.48) 66%, rgba(36,32,33,.9) 100%); }
.porte .dire { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px 20px; }
.porte .quoi { display: block; font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.05; }
.porte .poids { display: block; font-size: 14px; color: #ece3db; margin-top: 6px; }
/* Deux lignes réservées : sans cela, un nom d'établissement qui passe sur deux lignes décalait
   sa porte vers le haut et les trois titres ne s'alignaient plus. */
.porte .ou { font-size: 12.5px; color: #cdbcae; margin-top: 10px; line-height: 1.3; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.porte .jauge { display: block; height: 4px; background: rgba(255,255,255,.25); margin-top: 12px; }
.porte .jauge i { display: block; height: 4px; background: #fff; }
.porte[aria-pressed="true"] { outline: 4px solid var(--taupe); outline-offset: -4px; }
@media (max-width: 760px) { .portes { grid-template-columns: 1fr; } .porte { height: 190px; } }
/* Sur mobile, une seule porte fait défiler musique, danse et art scénique en alternance
   (Guillaume, 20/09) : accueil.js pose .une et anime la première ; les deux autres se cachent. */
.portes.une .porte:not(:first-child) { display: none; }
.portes.une .porte { height: 240px; }

/* ── LE MUR PREND VIE : la case montre le logo, et découvre la photographie au survol. */
.mur a { position: relative; overflow: hidden; }
.mur .photo { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0;
  transition: opacity .35s ease; }
.mur a:hover .photo, .mur a:focus-visible .photo { opacity: 1; }
.mur a:hover .cadre, .mur a:focus-visible .cadre { opacity: 0; }
.mur .cadre, .mur .nom, .mur .ville { position: relative; z-index: 2; transition: color .25s ease, opacity .25s ease; }
.mur a:hover .nom, .mur a:focus-visible .nom, .mur a:hover .ville, .mur a:focus-visible .ville { color: #fff; }
.mur a:hover, .mur a:focus-visible { box-shadow: inset 0 0 0 2px var(--jaune); }
.mur .ombre { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .35s ease;
  background: linear-gradient(180deg, rgba(36,32,33,.2) 0%, rgba(36,32,33,.85) 100%); }
.mur a:hover .ombre, .mur a:focus-visible .ombre { opacity: 1; }

/* ── LE BRUN SORT DE SA RÉSERVE : un filet sous les titres, les chiffres en couleur. */
.ouverture h1 { position: relative; }
.sous-titre-mur { display: flex; align-items: baseline; gap: 14px; }
.sous-titre-mur::after { content: ''; flex: 1; height: 2px; background: var(--brun); opacity: .28; }
.chiffres b { color: var(--brun); }

/* ── LA PRÉSENTATION ET LA CARTE, côte à côte. Le texte dit le réseau, la carte le montre. */
.presentation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px;
  align-items: start; margin-top: 22px; }
.presentation h2 { margin-bottom: 14px; }
.presentation p + p { margin-top: 14px; }
.presentation p { max-width: 62ch; }
.presentation .fort { font-size: 18.5px; }
.chiffres { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--filet); }
.chiffres b { display: block; font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.chiffres span { font-size: 14px; color: var(--gris); }
.plan figcaption { margin-top: 10px; font-size: 13px; color: var(--gris); }
.plan svg { width: 100%; height: auto; display: block; }
.plan svg { filter: drop-shadow(0 6px 14px rgba(54, 46, 40, .13)); }
.contour { fill: #fffdf9; stroke: #cfc9bd; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
/* Le liseré est porté par le point lui-même : un halo plein recouvrait le point voisin et dessinait
   des croissants blancs là où deux écoles se touchent. */
.point { fill: var(--encre); stroke: #fffdf9; stroke-width: 2; vector-effect: non-scaling-stroke;
  paint-order: stroke; transition: fill-opacity .2s ease; cursor: pointer; }
.lieu.eteint .point { fill-opacity: .15; stroke-opacity: .35; }
.lieu.eteint .etiquette { opacity: .25; }
.lieu.vise .point { fill: var(--brun); stroke: var(--brun); stroke-opacity: .3; stroke-width: 8; }
/* Un enseignement choisi : les établissements retenus s'allument en jaune sur la carte, pour se voir
   d'un coup d'œil au milieu des éteints (Guillaume, 20/09). */
#plan.filtre .lieu:not(.eteint) .point { fill: var(--jaune); stroke: #2c231c; stroke-opacity: .9; stroke-width: 1.2; }
#plan.filtre .lieu:not(.eteint) .etiquette { font-weight: 700; }
/* La taille et le contour de l'étiquette sont posés en unités utilisateur par le script. */
.etiquette { fill: var(--gris); paint-order: stroke; stroke: #fffdf9; pointer-events: none; font-weight: 500; }

@media (max-width: 1020px) {
  .presentation { grid-template-columns: 1fr; gap: 30px; }
  .plan { max-width: 420px; }
}

.plus-proches { margin-top: 16px; font-size: 16px; line-height: 1.7; }
.plus-proches:empty { display: none; }
.plus-proches b { font-weight: 600; }
.plus-proches a { text-decoration: none; border-bottom: 1px solid var(--filet); }
.plus-proches a:hover { border-bottom-color: var(--encre); }
.plus-proches .km { color: var(--gris); font-size: 14.5px; }

/* Sur un téléphone, la recherche prime : elle est la raison d'être de la page. */
@media (max-width: 680px) {
  .ouverture h1 { font-size: 27px; }
  .chercher { margin-top: 20px; padding: 18px; }
  .mur { margin-top: 20px; }
}

/* ── LA VEDETTE : le dernier évènement publié, en grand ; les autres suivent, en vignettes. */
.vedette { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0;
  background: var(--blanc); border: 1px solid var(--filet); margin-top: 22px; }
.vedette .grande { display: block; background: var(--filet) center/cover no-repeat; min-height: 320px; }
.vedette .grande.sans { display: grid; place-items: center; color: var(--gris); font-size: 14px; background: #f3f1ec; }
.vedette .dire { padding: 30px 34px 32px; display: flex; flex-direction: column; }
.vedette .publie { font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--gris); }
.vedette time { display: block; margin-top: 12px; font-size: 14.5px; color: var(--brun); font-weight: 600; }
.vedette h4 { font-size: clamp(21px, 2.4vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em;
  margin-top: 6px; }
.vedette h4 a { text-decoration: none; }
.vedette h4 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vedette .par { font-size: 14.5px; color: var(--gris); margin-top: 8px; }
.vedette .par a { color: var(--gris); }
.vedette .extrait { font-size: 15.5px; margin-top: 14px; display: -webkit-box; -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; overflow: hidden; }
.vedette .ou { font-size: 13.5px; color: var(--gris); margin-top: 14px; }
.vedette .voir { align-self: flex-start; margin-top: auto; padding-top: 20px; }
.vedette .voir a { display: inline-block; background: var(--encre); color: #fff; text-decoration: none;
  padding: 11px 22px; border-radius: 4px; font-weight: 500; font-size: 15.5px; }
.vedette .voir a:hover { background: var(--encre-noire); }
@media (max-width: 860px) {
  .vedette { grid-template-columns: 1fr; }
  .vedette .grande { min-height: 200px; }
  .vedette .dire { padding: 22px 22px 24px; }
}

/* ── L'AGENDA. Les dates passées sont montrées telles quelles, rangées par année ; celles à venir ont
   leur place réservée, même vide — c'est ce vide qui dit l'état du réseau. */
.annees { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 4px; }
.annees button { font: inherit; font-size: 15px; background: var(--blanc); border: 1px solid var(--filet);
  border-radius: 30px; padding: 6px 15px; cursor: pointer; color: var(--encre-noire); }
.annees button:hover { border-color: var(--encre); }
.annees button[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.annees button b { font-weight: 500; opacity: .65; margin-left: 6px; font-size: 13.5px; }
.affiches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 18px; }
.affiches article { background: var(--blanc); border: 1px solid var(--filet); display: flex; flex-direction: column; }
.affiches .vue { display: block; aspect-ratio: 16 / 9; background: var(--filet) center/cover no-repeat;
  border-bottom: 1px solid var(--filet); }
.affiches .vue.sans { display: grid; place-items: center; color: var(--gris); font-size: 13px; background: #f3f1ec; }
.affiches .texte { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.affiches time { font-size: 13px; color: var(--brun); font-weight: 600; letter-spacing: .02em; }
.affiches h4 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.affiches h4 a { text-decoration: none; }
.affiches h4 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.affiches .par { font-size: 13.5px; color: var(--gris); }
.affiches .par a { color: var(--gris); }
.affiches .ou { font-size: 13px; color: var(--gris); margin-top: auto; padding-top: 8px; }
.affiches .extrait { font-size: 14px; color: var(--encre-noire); display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; }
.vers-agenda { margin-top: 24px; }
.vers-agenda a { display: inline-block; background: var(--encre); color: #fff; text-decoration: none;
  font-weight: 500; padding: 12px 24px; border-radius: 4px; }
.vers-agenda a:hover { background: var(--encre-noire); }
@media (max-width: 1020px) { .affiches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .affiches { grid-template-columns: 1fr; } }

/* ── DU CONTRASTE. Le bloc de recherche passe en bleu nuit : c'est le geste principal de la page,
   il ne peut pas être du blanc sur de l'ivoire. Les sections alternent de fond. */
.chercher { background: var(--bandeau); border: 0; padding: 26px 28px 28px; }
.chercher label { color: var(--encre-noire); font-size: 13.5px; }
.chercher select { background: #fff; border: 2px solid var(--blanc); color: var(--encre-noire); }
.chercher select:hover { border-color: var(--encre-noire); }
.chercher .verdict { color: var(--encre-noire); font-size: 17px; }
.chercher .verdict b { color: var(--encre-noire); font-weight: 700; }
/* « Aucun établissement » : sur ce brun, aucun rouge ne passe le seuil AA. La phrase se pose donc
   sur une plaque claire, où la brique donne 8,4:1 — et le message reste explicite en toutes
   lettres, la couleur n'y ajoute qu'un signal. */
.chercher .verdict .rien { display: inline-block; background: var(--blanc); color: #7d2318;
  padding: 6px 12px; border-radius: 4px; font-weight: 600; }
.ouverture h1 { font-weight: 700; letter-spacing: -.03em; }
.section:nth-of-type(even) { background: var(--blanc); }
.plus-proches { background: var(--blanc); border: 1px solid var(--filet); padding: 14px 18px; }

/* ── LE STYLE DU SITE (20/09) : c'est l'ancienne version « pour les enfants », devenue la seule —
   tout s'arrondit, s'agrandit, se réchauffe. Le sélecteur de version a disparu avec l'autre. */
.ouverture h1 { font-size: clamp(30px, 4.4vw, 50px); }
.feutre { background: var(--jaune); color: #2c231c; padding: 0 .16em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* Le mot en jaune change de temps en temps (accueil.js) : il s'efface et revient, sans sauter. */
.feutre { display: inline-block; transition: opacity .35s; }
.feutre.change { opacity: 0; }
.chercher { border-radius: 22px; }
.chercher select { border-radius: 12px; border-color: var(--jaune); }
.mur { border-radius: 20px; overflow: hidden; }
/* Les coins ronds coupent aussi l'image dedans (Guillaume, 20/09 : une image carrée sur une carte
   ronde) — d'où overflow: hidden sur chaque carte qui porte une image en fond. */
.conservatoires a, .vedette, .affiches article, .vide, .plus-proches { border-radius: 18px; border-width: 2px; }
.conservatoires a, .vedette, .affiches article { overflow: hidden; }
.colonnes button { font-size: 16.5px; }
.porte .quoi { font-size: clamp(24px, 3vw, 38px); }
.espace, .vers-agenda a { border-radius: 30px; background: var(--jaune); color: #2c231c; font-weight: 700; }
.espace:hover, .vers-agenda a:hover { background: #f5c433; }
.sous-titre-mur::after { background: var(--jaune); opacity: 1; }
/* Le chiffre devient une pastille — mais il reste SUR SA LIGNE : en « inline-block » il se mettait
   à côté de sa légende, qui passait alors sous lui et le chevauchait. */
.chiffres b { color: var(--jaune); background: #2c231c; border-radius: 12px; padding: 4px 12px;
  display: block; width: fit-content; margin-bottom: 6px; }

/* ── UNE DATE SANS AFFICHE montre le logo de son école (Guillaume, 20/09) — à sa taille, jamais
   étiré : un logo de 220 px agrandi à 400 devient une bouillie de pixels. L'image est un <img> centré
   dans la case, plafonné à la case, et le navigateur ne l'agrandit jamais au-delà de ses pixels. */
.logo-ecole { display: grid !important; place-items: center; background: var(--creme) !important; }
.logo-ecole img { max-width: 56%; max-height: 56%; width: auto; height: auto; object-fit: contain; }

/* ── LES SECTIONS. */
.section { padding: 46px 0; }
.section + .section { border-top: 1px solid var(--filet); }
.section h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -.02em; }
.section .chapo { color: var(--gris); margin-top: 6px; max-width: 66ch; }
.colonnes { columns: 4; column-gap: 34px; margin-top: 22px; }
.colonnes button { font: inherit; width: 100%; display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap;
  background: none; border: 0; border-bottom: 1px solid var(--filet); padding: 8px 0; cursor: pointer;
  text-align: left; font-size: 15.5px; color: var(--encre-noire); break-inside: avoid; }
.colonnes button:hover { color: var(--encre); border-bottom-color: var(--encre); }
.colonnes button span { color: var(--gris); font-size: 13.5px; white-space: nowrap; }
.agenda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; margin-top: 22px; }
.vide { background: var(--blanc); border: 1px solid var(--filet); padding: 24px; }
.vide p + p { margin-top: 10px; color: var(--gris); font-size: 15px; }
.journal { list-style: none; }
.journal li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 11px 0;
  border-top: 1px solid var(--filet); font-size: 15.5px; }
.journal time { color: var(--gris); }
.journal li > span { min-width: 0; overflow-wrap: anywhere; }
.journal .ville { display: block; color: var(--gris); font-size: 13.5px; }
h3.menu { font-size: 18px; font-weight: 600; margin-bottom: 10px; }

/* Le pied reprend celui de rand.marne.fr : les trois logos, les rubriques, l'adresse — tout CENTRÉ. */
.pied { border-top: 4px solid var(--bandeau); padding: 34px 0 44px; font-size: 14.5px; color: var(--gris);
  background: var(--blanc); }
.pied .dedans { display: grid; justify-items: center; text-align: center; gap: 16px; }
.pied .tel { white-space: nowrap; }
.pied .partenaires { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 36px; }
.pied .partenaires img { display: block; height: 56px; width: auto; }
.pied .partenaires a { display: block; line-height: 0; }
.pied nav { display: flex; gap: 8px 26px; flex-wrap: wrap; justify-content: center; }
.pied .adresse { max-width: 62ch; }
.pied .note { font-size: 13px; }

@media (max-width: 1020px) {
  .mur { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chercher { grid-template-columns: 1fr 1fr; }
  .chercher .verdict { grid-column: 1 / -1; }
  .colonnes { columns: 3; }
  .agenda { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 680px) {
  .entete .dedans { height: auto; flex-wrap: wrap; gap: 12px 20px; padding-top: 14px; padding-bottom: 14px; }
  .entete .quoi { display: none; }
  /* Libellés courts, répartis sur la largeur : « Établissements | Réseau | Enseignements | Agenda ». */
  .entete nav { order: 3; flex: 1 1 100%; margin-left: 0; gap: 12px; justify-content: space-between;
    overflow-x: auto; font-size: 14.5px; }
  .entete .dedans { padding-left: 16px; padding-right: 16px; }
  .entete nav .long { display: none; }
  .entete nav .court { display: inline; }
  .mur { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mur a { min-height: 132px; padding: 14px 8px 12px; }
  .mur .cadre { height: 46px; } .mur img { max-height: 46px; }
  .chercher { grid-template-columns: 1fr; }
  .colonnes { columns: 2; column-gap: 22px; }
  .journal li { grid-template-columns: 94px minmax(0, 1fr); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; } }

/* ── AJOUTS DU SITE GÉNÉRÉ (le gabarit ne redessine plus rien dans le navigateur). */
.mur a.visee { box-shadow: inset 0 0 0 2px var(--jaune); }
.plus-proches[hidden] { display: none; }
.a-venir { background: var(--blanc); border: 1px solid var(--filet); border-left: 4px solid var(--brun);
  padding: 16px 20px; margin-bottom: 18px; }
#colonnes button[aria-pressed="true"] { color: var(--encre); font-weight: 600; border-bottom-color: var(--encre); }
.lieu { cursor: pointer; }

/* ── L'EN-TÊTE AUX LARGEURS MOYENNES (tablette). Mesuré : à 834 px, logo + menu + sélecteur de
   version + « Mon espace » débordaient de 131 px. Le menu descend sur sa propre ligne. */
@media (max-width: 1080px) {
  .entete .dedans { height: auto; flex-wrap: wrap; gap: 12px 18px; padding-top: 14px; padding-bottom: 14px; }
  .entete .quoi { display: none; }
  .entete nav { order: 3; flex: 1 1 100%; margin-left: 0; gap: 18px; overflow-x: auto; font-size: 15px;
    padding-bottom: 2px; }
  /* Le menu est descendu : « Mon espace » se cale à droite du logo (Guillaume, 20/09). */
  .entete .espace { margin-left: auto; }
}
@media (max-width: 420px) {
  .entete .espace { padding: 9px 14px; font-size: 14.5px; }
  /* Mesuré à 390 px : « Agenda » sortait de l'écran (Guillaume, 20/09). */
  .entete nav { font-size: 13.5px; gap: 8px; }
}

/* ── Mesuré à 390 px, version « pour les enfants » : la liste des enseignements débordait de 3 px.
   En cause, les noms les plus longs (« Anatomie fonctionnelle du corps dans le mouvement dansé »),
   qui ne peuvent pas se couper dans une colonne de 175 px. On autorise la coupure. */
.colonnes button { overflow-wrap: anywhere; }

/* ── LE BANDEAU « COOKIES ». Une carte posée en bas, jamais un mur : elle ne recouvre pas la page,
   elle ne piège pas le clavier, et elle s'efface d'un bouton. Le texte dit ce qui est vrai — ce
   site ne dépose aucun traceur — plutôt que de demander un consentement pour rien. */
.bandeau-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70;
  max-width: 560px; margin-inline: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px;
  background: var(--blanc); color: var(--encre-noire); border: 1px solid var(--filet);
  border-left: 5px solid var(--bandeau); border-radius: 10px; padding: 18px 20px 16px;
  box-shadow: 0 10px 34px rgba(54, 46, 40, .22);
  opacity: 0; transform: translateY(14px); transition: opacity .28s ease, transform .28s ease; }
.bandeau-cookies.la { opacity: 1; transform: none; }
.bandeau-cookies.parti { opacity: 0; transform: translateY(10px); }
.bandeau-cookies .biscuit { color: var(--brun); display: grid; place-items: center; padding-top: 2px; }
.bandeau-cookies .dire { font-size: 14px; line-height: 1.5; color: var(--gris); }
.bandeau-cookies .titre { font-size: 15.5px; font-weight: 600; color: var(--encre-noire);
  margin-bottom: 4px; }
.bandeau-cookies .dire strong { color: var(--encre-noire); font-weight: 600; }
.bandeau-cookies .agir { grid-column: 2; display: flex; align-items: center; gap: 18px;
  margin-top: 14px; flex-wrap: wrap; }
.bandeau-cookies .agir a { font-size: 14px; color: var(--encre); }
.bandeau-cookies .agir button { margin-left: auto; font: inherit; font-size: 14.5px; font-weight: 600;
  background: var(--encre); color: #fff; border: 0; border-radius: 4px; padding: 9px 18px;
  cursor: pointer; white-space: nowrap; }
.bandeau-cookies .agir button:hover { background: #42352d; }
@media (max-width: 520px) {
  .bandeau-cookies { grid-template-columns: 1fr; gap: 2px; left: 10px; right: 10px; bottom: 10px; }
  .bandeau-cookies .biscuit { display: none; }
  .bandeau-cookies .agir { grid-column: 1; }
}
/* La version « pour les enfants » : la même carte, arrondie comme le reste. */
body.enfants .bandeau-cookies { border-radius: 18px; border-left-width: 6px; }
body.enfants .bandeau-cookies .agir button { background: var(--jaune, #ffd24a); color: #2c231c;
  border-radius: 30px; font-weight: 700; }
body.enfants .bandeau-cookies .agir button:hover { background: #f5c433; }
@media (prefers-reduced-motion: reduce) {
  .bandeau-cookies { transition: none; }
}

/* ── CE QUE LES ÉCOLES RÉDIGENT (Guillaume, 20/09 : « c'est très très laid ») — présentation, tarifs,
   descriptif d'une date. Le texte vient de l'ancien éditeur : titres h2/h3 employés comme des
   intertitres de paragraphe, listes, citations, images avec largeur en dur, sauts de ligne en série.
   On ne touche pas aux mots ; on leur donne UNE mesure, UNE échelle de titres et des marges régulières. */
.redige { max-width: 68ch; line-height: 1.55; overflow-wrap: anywhere; }
.redige > :first-child { margin-top: 0; }
.redige p, .redige ul, .redige ol, .redige blockquote, .redige table { margin: 0 0 12px; }
.redige h1, .redige h2, .redige h3, .redige h4, .redige h5, .redige h6 { font-weight: 700; line-height: 1.25;
  letter-spacing: -.01em; margin: 22px 0 8px; color: var(--encre-noire); background: none; padding: 0;
  display: block; border-radius: 0; }
/* Le contenu des écoles est souvent tout en gras : la taille seule ne distingue plus un titre.
   Un h2 prend le liseré jaune, un h3 la couleur brune. */
.redige h1, .redige h2 { font-size: 20px; border-left: 5px solid var(--jaune); padding-left: 10px; }
.redige h3 { font-size: 17px; color: var(--brun); }
.redige h4, .redige h5, .redige h6 { font-size: 16px; }
.redige h2 + h3, .redige h3 + h4 { margin-top: 10px; }
.redige ul, .redige ol { padding-left: 24px; }
.redige li { margin: 4px 0; }
.redige li p { margin: 0; }
.redige blockquote { border-left: 4px solid var(--jaune); padding: 6px 16px; color: #4d453d; background: var(--blanc);
  border-radius: 0 10px 10px 0; }
.redige img { display: block; max-width: 100%; height: auto; margin: 14px 0; border-radius: 10px; }
.redige a { color: var(--brun); overflow-wrap: anywhere; }
.redige table { border-collapse: collapse; width: 100%; font-size: 15px; }
.redige td, .redige th { border: 1px solid var(--filet); padding: 6px 10px; text-align: left; vertical-align: top; }
.redige br + br { display: none; }
.redige u { text-decoration-thickness: 1px; }
.redige strong, .redige b { font-weight: 700; }
.redige [style] { font-family: inherit !important; font-size: inherit !important; color: inherit !important;
  background: none !important; }
.redige figure, .redige figcaption { margin: 0; }
/* Une image posée « à 45 % » par l'école devient illisible sur un téléphone : au moins 300 px. */
@media (max-width: 600px) { .redige img { min-width: min(100%, 300px); } }
/* ── Toute carte survolée s'entoure de jaune (Guillaume, 20/09), plus d'encre sombre. */
.affiches article:hover, .vedette:hover, .conservatoires a:hover, .conservatoires a:focus-visible,
.rangee:hover, .journal li:hover, .voisines a:hover, .voisines a:focus-visible, .autres a:hover, .autres a:focus-visible,
.fiche-pratique:hover { border-color: var(--jaune); }
/* Le bouton qui arrête les animations de l'accueil (RGAA 13.8) : discret, mais là. */
.portes { position: relative; }
.pause-animations { position: absolute; right: 12px; top: 10px; z-index: 3; font: inherit; font-size: 13px; font-weight: 600;
  background: rgba(36,32,33,.72); color: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: 30px; padding: 6px 12px;
  cursor: pointer; }
.pause-animations:hover, .pause-animations:focus-visible { background: var(--jaune); color: #2c231c; border-color: var(--jaune); }
@media (max-width: 760px) { .pause-animations { top: auto; bottom: 10px; right: 10px; } }