/* ==========================================================================
   École La Source — Soignies
   Feuille de style principale
   ========================================================================== */

:root {
  /* Identité */
  --bleu-profond: #12557F;
  --bleu: #1B6FA8;
  --bleu-clair: #2E9BD6;
  --turquoise: #2FA6C4;
  /* Le turquoise de la marque reste inchangé pour les bordures, les fonds et
     les survols, où le contraste ne s'évalue pas de la même façon. Dès qu'il
     porte du texte, on utilise la variante ci-dessous : 4,71:1 sur le fond
     crème du site, 4,9:1 sur blanc. */
  --turquoise-texte: #1F6E82;
  --turquoise-clair: #7BD8E0;

  /* Accents chaleureux */
  --soleil: #FFC94A;
  --corail: #FF7A66;
  /* Même principe : 4,94:1 sur blanc, lisible aussi bien en petit corps
     (astérisque des champs obligatoires) qu'en grand (chiffres clés). */
  --corail-texte: #B23A28;
  --vert: #57BB8A;
  --violet: #8B7BD8;

  /* ------------------------------------------------------------------------
     Variantes lisibles des couleurs de catégorie.
     Les couleurs ci-dessus ont été choisies pour décorer : elles ne portent
     pas de texte lisiblement — du violet #8B7BD8 sur son fond pâle ne donne
     que 3,0:1, il en faut 4,5. Chaque couleur a donc un jumeau assombri,
     à n'utiliser que lorsqu'elle porte du texte ou reçoit du blanc.
     Vérifié le 10/09/2026 par _outils/contraste.py.
     ------------------------------------------------------------------------ */
  --violet-texte: #6550CB;      /* 4,99 sur #EDEAFA · blanc dessus 5,91 */
  --vert-texte: #2F7352;        /* 5,00 sur #E2F5EC · blanc dessus 5,68 */
  --bleu-clair-texte: #1D6B95;  /* 5,09 sur #E4F1FB · blanc dessus 5,85 */
  --jaune-texte: #916600;       /* 4,63 sur #FFF3D6 */

  /* Neutres */
  --encre: #1D2A35;
  --gris: #5A6B78;
  --gris-clair: #5E6E7A;   /* assombri le 10/09/2026 : #8A99A5 ne donnait que
                              2,92:1 sur blanc, sous le seuil AA de 4,5.
                              Cette variable ne sert qu'à du texte, la corriger
                              à la source ne casse aucun aplat. */
  --bord: #E2EAF0;
  --fond: #F6F9FC;
  --blanc: #FFFFFF;

  --rayon: 18px;
  --rayon-sm: 12px;
  --ombre: 0 4px 20px rgba(18, 85, 127, .08);
  --ombre-forte: 0 14px 40px rgba(18, 85, 127, .16);
  --transition: .28s cubic-bezier(.4, 0, .2, 1);

  --largeur: 1180px;
  --police: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --police-titre: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.7;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

/* height: auto est indispensable : les images portent désormais leurs
   dimensions réelles en attributs (pour réserver la place au chargement et
   éviter que la page ne saute). Sans cette ligne, une image dont la largeur
   est imposée par la mise en page garde la hauteur écrite dans l'attribut,
   et se retrouve étirée. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--bleu); }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  line-height: 1.2;
  color: var(--bleu-profond);
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1.1em; }

.conteneur {
  width: min(100% - 2.6rem, var(--largeur));
  margin-inline: auto;
}

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--fond { background: var(--fond); }

.section__intro {
  max-width: 720px;
  margin-bottom: 3rem;
}

.surtitre {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turquoise-texte);
  margin-bottom: .7rem;
}

.plomb { font-size: 1.16rem; color: var(--gris); }

/* --------------------------------------------------------------- Skip link */
/* Masqué à l'œil, lu par les lecteurs d'écran.
   Sert aux titres de section qui seraient redondants visuellement — la mise
   en page les rend évidents — mais dont une personne qui navigue de titre en
   titre a besoin pour comprendre la structure de la page. On ne l'obtient pas
   avec display:none ni visibility:hidden, qui retirent l'élément de l'arbre
   d'accessibilité en même temps que de l'écran. */
/* Une adresse web n'a ni espace ni trait d'union : sans instruction, le
   navigateur la garde d'un seul tenant et elle pousse toute la page hors de
   l'écran. C'est ce qui débordait sur l'agenda à 320 px de large. */
code, kbd, samp {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* ----------------------------------------------------------------- En-tête */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bord);
}

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .7rem 0;
}

.marque {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  flex-shrink: 0;
}
.marque img { width: 52px; height: 52px; }
.marque__nom {
  font-family: var(--police-titre);
  font-size: 1.42rem;
  font-weight: 700;
  color: var(--bleu-profond);
  line-height: 1.05;
}
.marque__sous {
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--turquoise-texte);
  font-weight: 600;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: .3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  display: block;
  padding: .55rem .85rem;
  border-radius: 10px;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  color: var(--encre);
  transition: var(--transition);
}
.nav a:hover { background: var(--fond); color: var(--bleu); }
.nav a[aria-current="page"] { color: var(--bleu); background: #E9F4FB; font-weight: 600; }

.burger {
  display: none;
  background: none;
  border: 0;
  width: 46px;
  height: 46px;
  cursor: pointer;
  padding: 10px;
}
.burger span {
  display: block;
  height: 2.5px;
  background: var(--bleu-profond);
  border-radius: 2px;
  margin: 5px 0;
  transition: var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------------------------------------------------------------- Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: .97rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
}
.btn--primaire { background: var(--bleu); color: #fff; }
.btn--primaire:hover { background: var(--bleu-profond); transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.btn--clair { background: #fff; color: var(--bleu-profond); }
.btn--clair:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.btn--contour { border-color: var(--bord); color: var(--bleu-profond); }
.btn--contour:hover { border-color: var(--bleu); color: var(--bleu); }

/* ------------------------------------------------------------------- Héros */
.heros {
  position: relative;
  background: linear-gradient(150deg, #2E9BD6 0%, #1B6FA8 55%, #12557F 100%);
  color: #fff;
  overflow: hidden;
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 0;
}
.heros::before {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: var(--soleil);
  opacity: .16;
  top: -180px; right: -130px;
}
.heros__grille {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 5.5rem;
}
.heros h1 { color: #fff; margin-bottom: .5rem; }
.heros__accroche {
  font-size: 1.22rem;
  color: rgba(255, 255, 255, .93);
  max-width: 34rem;
}
.heros__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  /* Assombrie plutôt qu'éclaircie : une pastille blanche translucide sur le
     dégradé bleu éclaircissait le fond et ramenait le texte blanc à 2,70:1.
     En fonçant la pastille, le même blanc repasse au-dessus de 4,5:1 et le
     bandeau garde exactement la même allure. */
  background: rgba(8, 45, 68, .45);
  border: 1px solid rgba(255, 255, 255, .38);
  padding: .42rem 1rem;
  border-radius: 999px;
  font-size: .87rem;
  font-weight: 600;
  margin-bottom: 1.4rem;
}
.heros__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.9rem; }
.heros__visuel { display: flex; justify-content: center; }
.heros__visuel img { width: min(100%, 330px); filter: drop-shadow(0 20px 48px rgba(0, 0, 0, .3)); }

.vague-bas {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -1px;
}

/* ------------------------------------------------------------------ Chiffres */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1.4rem;
  margin-top: -3.5rem;
  position: relative;
  z-index: 5;
}
.chiffre {
  background: #fff;
  border-radius: var(--rayon);
  padding: 1.7rem 1.4rem;
  text-align: center;
  box-shadow: var(--ombre);
  border: 1px solid var(--bord);
}
.chiffre__val {
  font-family: var(--police-titre);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: .35rem;
}
.chiffre:nth-child(1) .chiffre__val { color: var(--bleu-clair-texte); }
.chiffre:nth-child(2) .chiffre__val { color: var(--turquoise-texte); }
.chiffre:nth-child(3) .chiffre__val { color: var(--corail-texte); }
.chiffre:nth-child(4) .chiffre__val { color: var(--vert-texte); }
.chiffre__lib { font-size: .92rem; color: var(--gris); }

/* -------------------------------------------------------------- Cartes */
.grille {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

.carte {
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 2rem 1.8rem;
  transition: var(--transition);
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: transparent; }
.carte h3 { margin-bottom: .5rem; }
.carte p:last-child { margin-bottom: 0; }

.picto {
  width: 54px; height: 54px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  font-size: 1.5rem;
}
.picto--bleu { background: #E4F1FB; }
.picto--turquoise { background: #DFF5F8; }
.picto--soleil { background: #FFF3D6; }
.picto--corail { background: #FFE9E5; }
.picto--vert { background: #E2F5EC; }
.picto--violet { background: #EDEAFA; }

/* Valeurs (liste à puces colorées) */
.valeurs { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.valeurs li {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm);
  padding: 1.1rem 1.3rem;
}
.valeurs .puce {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .95rem;
  color: #fff;
  font-weight: 700;
}

/* --------------------------------------------------------------- Types */
.type {
  border-radius: var(--rayon);
  padding: 1.9rem 1.7rem;
  border: 1px solid var(--bord);
  background: #fff;
  border-top: 5px solid var(--bleu-clair);
  transition: var(--transition);
}
.type:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.type--t1 { border-top-color: var(--bleu-clair); }
.type--t2 { border-top-color: var(--turquoise); }
.type--t3 { border-top-color: var(--corail); }
.type--t8 { border-top-color: var(--vert); }
.type--sp { border-top-color: var(--violet); }
.type__etiq {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--fond);
  color: var(--gris);
  margin-bottom: .8rem;
}

/* --------------------------------------------------------------- Équipes */
.equipe-bloc {
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.9rem;
}
.equipe-bloc h3 { display: flex; align-items: center; gap: .6rem; }
.equipe-bloc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Une seule colonne depuis l'ajout des médaillons : à deux colonnes,
     les noms se coupaient sur trois lignes à côté de la vignette. */
}
.equipe-bloc li {
  padding: .34rem 0;
  font-size: .95rem;
  break-inside: avoid;
  color: var(--gris);
}
.equipe-bloc li::before { content: '·'; color: var(--turquoise-texte); font-weight: 700; margin-right: .5rem; }

.sous-groupe {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--turquoise-texte);
  margin: 1.1rem 0 .3rem;
  break-inside: avoid;
}
.sous-groupe:first-child { margin-top: 0; }

/* --------------------------------------------------------------- Actualités */
/* align-items: start — sinon toutes les cartes prennent la hauteur de la plus
   longue, et une brève de deux lignes se retrouve dans un cadre à moitié vide.
   Chaque actualité occupe désormais exactement la place de son texte. */
.actus {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: start;
}
.actu {
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.actu:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.actu__img { aspect-ratio: 16/10; object-fit: cover; width: 100%; background: var(--fond); }
.actu__corps { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.actu__date {
  font-size: .82rem;
  color: var(--turquoise-texte);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .4rem;
}
.actu h3 { font-size: 1.18rem; margin-bottom: .5rem; }
.actu p { color: var(--gris); font-size: .96rem; }
.actu__vide {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: var(--gris-clair);
  border: 2px dashed var(--bord);
  border-radius: var(--rayon);
}

/* ----------------------------------------------------------------- Galerie */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 1rem;
}
.galerie img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--rayon-sm);
  transition: var(--transition);
  cursor: pointer;
}
.galerie img:hover { transform: scale(1.03); box-shadow: var(--ombre-forte); }

/* ------------------------------------------------------------------ Infos */
.info-liste { list-style: none; padding: 0; margin: 0; }
.info-liste li {
  display: flex;
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--bord);
}
.info-liste li:last-child { border-bottom: 0; }
.info-liste dt, .info-liste .cle {
  font-weight: 600;
  color: var(--bleu-profond);
  min-width: 190px;
  flex-shrink: 0;
}
.info-liste .val { color: var(--gris); }

.encart {
  background: linear-gradient(135deg, #E9F4FB, #DFF5F8);
  border-radius: var(--rayon);
  padding: 1.8rem;
  border-left: 5px solid var(--turquoise);
}
.encart h3 { margin-bottom: .5rem; }
.encart p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Contact */
.contact-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}
.contact-carte {
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 2rem;
}
.contact-item { display: flex; gap: 1rem; margin-bottom: 1.4rem; align-items: flex-start; }
.contact-item:last-child { margin-bottom: 0; }
.contact-item .picto { width: 44px; height: 44px; margin: 0; font-size: 1.2rem; border-radius: 12px; }
.contact-item strong { display: block; color: var(--bleu-profond); }
.contact-item a { color: var(--gris); text-decoration: none; }
.contact-item a:hover { color: var(--bleu); text-decoration: underline; }

.carte-plan {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  border-radius: var(--rayon);
}

/* -------------------------------------------------------------------- Appel */
.appel {
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-profond) 100%);
  border-radius: 26px;
  padding: clamp(2.5rem, 6vw, 4rem);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.appel::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: var(--turquoise-clair);
  opacity: .17;
  bottom: -140px; left: -80px;
}
.appel h2 { color: #fff; position: relative; }
.appel p { color: rgba(255, 255, 255, .9); max-width: 34rem; margin-inline: auto; position: relative; }
.appel .btn { position: relative; }

/* -------------------------------------------------------------------- Pied */
.pied {
  background: var(--encre);
  color: rgba(255, 255, 255, .72);
  padding: 3.5rem 0 1.8rem;
  font-size: .93rem;
}
.pied__grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
/* Ces intertitres sont des h2 pour que la hiérarchie de la page reste
   continue — un h4 après un h2 fait sauter deux niveaux à qui navigue de
   titre en titre. Leur apparence, elle, ne change pas. */
.pied h4, .pied__titre { color: #fff; font-family: var(--police); font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 1rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .55rem; }
/* Les liens du pied respectent déjà le critère 2.5.8 grâce à l'espacement
   entre eux. On leur donne malgré tout une zone cliquable plus haute : un
   parent qui tremble, ou qui tient son enfant d'une main, ne vise pas au
   pixel près. Conformité et confort ne sont pas la même chose. */
.pied a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  display: inline-block;
  padding: .25rem 0;
}
.pied a:hover { color: #fff; text-decoration: underline; }
/* Devenu un lien vers l'accueil : c'est le geste que tout le monde tente en
   bas de page. Les styles de lien du pied (soulignement, couleur) sont
   neutralisés ici — la marque doit rester une marque, pas ressembler à une
   ligne de menu. */
.pied__marque {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1rem;
  width: fit-content;
  text-decoration: none;
  border-radius: 10px;
  transition: opacity .18s ease;
}
.pied__marque:hover { opacity: .82; }
.pied__marque:focus-visible { outline: 3px solid var(--soleil); outline-offset: 4px; }
.pied__marque img { width: 46px; }
.pied__marque span { font-family: var(--police-titre); font-size: 1.25rem; color: #fff; }
.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .87rem;
  color: rgba(255, 255, 255, .55);
}

/* -------------------------------------------------------------- Animations */
/* Le contenu est visible par défaut : l'effet n'est activé que si JS répond,
   afin qu'une panne de script ne rende jamais la page vide. */
.js .revele {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.js .revele.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revele { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------- Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 35, .93);
  display: none;
  place-items: center;
  z-index: 300;
  padding: 2rem;
}
.lightbox[open], .lightbox.actif { display: grid; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--rayon-sm); }
.lightbox__fermer {
  position: absolute;
  top: 1.4rem; right: 1.6rem;
  background: rgba(255, 255, 255, .15);
  border: 0;
  color: #fff;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 950px) {
  .heros__grille { grid-template-columns: 1fr; text-align: center; padding-bottom: 4rem; }
  .heros__accroche { margin-inline: auto; }
  .heros__actions { justify-content: center; }
  .heros__visuel { order: -1; }
  .heros__visuel img { width: 190px; }
  .contact-grille { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .burger { display: block; }
  .nav {
    position: fixed;
    inset: 68px 0 auto;
    background: #fff;
    border-bottom: 1px solid var(--bord);
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    box-shadow: var(--ombre);
  }
  .nav.ouvert { max-height: 80vh; overflow-y: auto; }
  .nav ul { flex-direction: column; align-items: stretch; padding: 1rem 1.3rem 1.6rem; gap: .15rem; }
  .nav a { padding: .85rem 1rem; font-size: 1.02rem; }
  .equipe-bloc ul { columns: 1; }
  .info-liste li { flex-direction: column; gap: .2rem; }
  .info-liste .cle { min-width: 0; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .marque__nom { font-size: 1.2rem; }
  .marque img { width: 44px; height: 44px; }
  .pied__grille { grid-template-columns: 1fr; }
  .chiffres { margin-top: -2rem; }
}

/* --------------------------------------------------------------- Impression
   Les menus de la cantine et l'agenda finissent souvent sur le frigo ou au
   tableau d'affichage de la classe. Autant que la feuille soit lisible :
   pas de fond coloré qui vide la cartouche, pas de navigation inutile, et
   l'adresse des liens écrite en toutes lettres. */
@media print {
  .entete, .nav, .burger, .appel, .lightbox, .ariane, .pied, .skip,
  .confort, .confort__bouton, .recherche, .premiere-visite, .haut,
  .semaine__nav, .albums__pagination, .menu-accueil__lien,
  .vague, .vague-bas, .heros__fond, .btn, [hidden] { display: none !important; }

  /* Le bandeau de titre : on garde le texte, on jette l'aplat de couleur.
     Une cartouche d'encre coûte plus cher qu'un beau dégradé. */
  .heros {
    background: #fff !important; color: #000 !important;
    padding: 0 0 .4cm !important; min-height: 0 !important;
    border-bottom: 2pt solid #000;
  }
  .heros * { color: #000 !important; text-shadow: none !important; }
  .heros .surtitre { color: #333 !important; }
  .heros img, .heros svg, .heros::before, .heros::after { display: none !important; }
  .heros .conteneur { padding: 0 0 .3cm !important; margin-inline: 0 !important; }
  .heros__badge { border: 1pt solid #000 !important; background: #fff !important; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11.5pt;
  }
  main { padding: 0 !important; }
  .section, .section--fond, .section--photos {
    background: #fff !important;
    padding: .4cm 0 !important;
  }
  .conteneur { width: 100% !important; max-width: none !important; }

  h1, h2, h3 { color: #000 !important; page-break-after: avoid; }
  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 12pt; }
  p, li, dd, dt { orphans: 3; widows: 3; }

  /* Les cartes deviennent de simples encadrés au trait. */
  .carte, .semaine__jour, .doc, .agenda__jour, .menu-jour, .menu-accueil {
    background: #fff !important;
    color: #000 !important;
    border: 1pt solid #999 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .menu-jour h2, .menu-jour__lib, .menu-accueil__titre, .menu-accueil__lib {
    color: #000 !important;
  }
  .menu-jour__plat, .menu-accueil__plat {
    background: #fff !important;
    border: 1pt solid #bbb !important;
  }

  /* La semaine de cantine tient sur une seule page, en cinq colonnes.
     minmax(0, 1fr) et non 1fr : sinon un plat au nom long élargit sa colonne
     et pousse le vendredi hors de la feuille. */
  .semaine { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: .3cm !important; }

  .revele { opacity: 1 !important; transform: none !important; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  .bandeau { border: 2pt solid #000; color: #000 !important; background: #fff !important; }
  .bandeau__fermer { display: none !important; }

  /* L'adresse des liens, puisqu'on ne peut pas cliquer sur du papier. */
  main a[href^="http"]::after,
  main a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  main a[href^="#"]::after { content: ""; }

  @page { margin: 1.4cm; }
}

/* ==========================================================================
   Modules dynamiques : bandeau, cantine, agenda, documents, albums
   ========================================================================== */

/* --------------------------------------------------------- Bandeau d'alerte */
.bandeau {
  position: relative;
  z-index: 110;
  padding: .95rem 0;
  color: #fff;
  background: var(--bleu);
}
.bandeau--important { background: #E8730F; }
.bandeau--urgent    { background: #C9402A; }
.bandeau__inner {
  width: min(100% - 2.6rem, var(--largeur));
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
}
.bandeau__icone { font-size: 1.3rem; line-height: 1.35; flex-shrink: 0; }
.bandeau__titre { font-weight: 700; display: block; }
.bandeau__texte { font-size: .95rem; color: rgba(255, 255, 255, .93); margin: .15rem 0 0; }
.bandeau a { color: #fff; font-weight: 600; }
.bandeau__fermer {
  margin-left: auto;
  background: rgba(255, 255, 255, .18);
  border: 0; color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1.1rem; line-height: 1;
}
.bandeau__fermer:hover { background: rgba(255, 255, 255, .32); }

/* ------------------------------------------------------------------ Cantine */
.menu-jour {
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-profond) 100%);
  color: #fff;
  border-radius: var(--rayon);
  padding: 2rem;
  margin-bottom: 2.5rem;
}
.menu-jour h2 { color: #fff; font-size: 1.5rem; margin-bottom: 1.2rem; }
.menu-jour__plats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.menu-jour__plat {
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--rayon-sm);
  padding: 1rem 1.2rem;
}
.menu-jour__lib {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--turquoise-clair); font-weight: 700; display: block; margin-bottom: .25rem;
}

/* Rappel du menu sur la page d'accueil — plus discret que sur la page cantine */
.menu-accueil[hidden] { display: none; }
.menu-accueil {
  background: #fff;
  border: 1px solid var(--bord);
  border-left: 5px solid var(--soleil);
  border-radius: var(--rayon-sm);
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  box-shadow: var(--ombre-sm, 0 2px 10px rgba(16, 42, 67, .06));
}
.menu-accueil__titre {
  font-weight: 700;
  color: var(--bleu-profond);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.menu-accueil__plats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  flex: 1 1 320px;
}
.menu-accueil__plat {
  background: var(--creme, #F7F4EC);
  border-radius: var(--rayon-sm);
  padding: .5rem .85rem;
  font-size: .95rem;
}
.menu-accueil__lib {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-clair); font-weight: 700; display: block;
}
.menu-accueil__lien { font-weight: 600; white-space: nowrap; }

.semaine { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.semaine__jour {
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.3rem 1.4rem;
}
.semaine__jour--actuel { border-color: var(--turquoise); box-shadow: 0 0 0 3px rgba(47, 166, 196, .15); }
.semaine__jour h3 { font-size: 1.08rem; margin-bottom: .8rem; text-transform: capitalize; }
.semaine__jour dl { margin: 0; }
.semaine__jour dt {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--turquoise-texte); font-weight: 700; margin-top: .7rem;
}
.semaine__jour dt:first-child { margin-top: 0; }
.semaine__jour dd { margin: .1rem 0 0; color: var(--gris); font-size: .95rem; }
.semaine__vide { color: var(--gris-clair); font-style: italic; }

.semaine__nav { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.6rem; }

/* ------------------------------------------------------------------- Agenda */
.agenda { display: grid; gap: .9rem; }
.agenda__mois {
  font-family: var(--police-titre);
  font-size: 1.35rem;
  color: var(--bleu-profond);
  margin: 2rem 0 .3rem;
  text-transform: capitalize;
}
.agenda__mois:first-child { margin-top: 0; }
.evenement {
  display: flex;
  gap: 1.3rem;
  background: #fff;
  border: 1px solid var(--bord);
  border-left: 5px solid var(--bleu-clair);
  border-radius: var(--rayon-sm);
  padding: 1.15rem 1.4rem;
  align-items: flex-start;
}
.evenement__date {
  flex-shrink: 0;
  text-align: center;
  min-width: 62px;
  line-height: 1.1;
}
.evenement__jour { font-family: var(--police-titre); font-size: 1.85rem; font-weight: 700; color: var(--bleu-profond); }
.evenement__mois { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gris-clair); font-weight: 700; }
.evenement h3 { font-size: 1.12rem; margin-bottom: .2rem; }
.evenement p { margin: .25rem 0 0; color: var(--gris); font-size: .95rem; }
.evenement__etiq {
  display: inline-block;
  font-size: .71rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .65rem; border-radius: 999px; margin-bottom: .35rem;
}

/* ---------------------------------------------------------------- Documents */
.docs { display: grid; gap: .8rem; }
.doc {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm);
  padding: 1.05rem 1.3rem;
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}
.doc:hover { border-color: var(--turquoise); transform: translateX(3px); box-shadow: var(--ombre); }
.doc__type {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: #E4F1FB;
  color: var(--bleu);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
}
.doc__type--pdf { background: #FFE9E5; color: #A33322; }
.doc__type--doc { background: #E4F1FB; color: #12557F; }
.doc__type--xls { background: #E2F5EC; color: #1F6B47; }
.doc__corps { flex: 1; min-width: 0; }
.doc__titre { font-weight: 600; color: var(--bleu-profond); }
.doc__meta { font-size: .86rem; color: var(--gris-clair); }
.doc__fleche { color: var(--turquoise-texte); font-size: 1.3rem; flex-shrink: 0; }

/* ------------------------------------------------------------------ Albums */
.albums { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.album {
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
}
.album:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.album__img { aspect-ratio: 4/3; width: 100%; object-fit: cover; background: var(--fond); }
.album__corps { padding: 1.3rem 1.4rem; }
.album__date { font-size: .82rem; color: var(--turquoise-texte); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.album h3 { font-size: 1.15rem; margin: .25rem 0 .35rem; }
.album p { color: var(--gris); font-size: .94rem; margin: 0; }
.album__compte { display: block; margin-top: .7rem; font-size: .85rem; color: var(--gris-clair); }

.album-ouvert { margin-top: 2.5rem; }
.album-ouvert__entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }

/* Chargement */
.chargement { text-align: center; padding: 3rem; color: var(--gris-clair); }

@media (max-width: 560px) {
  .evenement { gap: .9rem; padding: 1rem; }
  .evenement__date { min-width: 48px; }
  .evenement__jour { font-size: 1.5rem; }
  .menu-jour { padding: 1.5rem; }
}

/* ------------------------------------------------- Menus déroulants du site */
.nav__sous { position: relative; }
.nav__bouton {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .85rem;
  border: 0;
  background: none;
  border-radius: 10px;
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  color: var(--encre);
  cursor: pointer;
  transition: var(--transition);
}
.nav__bouton:hover { background: var(--fond); color: var(--bleu); }
.nav__sous--actif > .nav__bouton { color: var(--bleu); background: #E9F4FB; font-weight: 600; }
.nav__fleche { font-size: .7rem; transition: transform var(--transition); }
.nav__bouton[aria-expanded="true"] .nav__fleche { transform: rotate(180deg); }

.nav .nav__menu {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm);
  box-shadow: var(--ombre-forte);
  padding: .45rem;
  display: none;
  flex-direction: column;
  gap: .1rem;
  z-index: 120;
}
.nav .nav__sous:hover > .nav__menu,
.nav .nav__sous:focus-within > .nav__menu,
.nav .nav__bouton[aria-expanded="true"] + .nav__menu { display: flex; }
.nav__menu a { padding: .6rem .85rem; font-size: .93rem; }

@media (max-width: 820px) {
  .nav__bouton { width: 100%; justify-content: space-between; padding: .85rem 1rem; font-size: 1.02rem; }
  .nav .nav__menu {
    position: static;
    display: flex;
    border: 0;
    box-shadow: none;
    padding: 0 0 .4rem 1rem;
    border-left: 2px solid var(--bord);
    margin-left: 1rem;
    min-width: 0;
  }
  .nav__fleche { display: none; }
}

/* Pied de page à quatre colonnes */
.pied__grille { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; }
@media (max-width: 950px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; } }

/* ==========================================================================
   Mosaïque « la vie de l'école en images »
   ========================================================================== */
.mosaique {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 168px;
  grid-auto-flow: dense;
  gap: .85rem;
}
.mosaique__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon-sm);
  background: var(--fond);
  display: block;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
}
.mosaique__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.mosaique__item:hover img,
.mosaique__item:focus-visible img { transform: scale(1.06); }
.mosaique__item:focus-visible { outline: 3px solid var(--soleil); outline-offset: 3px; }

.mosaique__voile {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.4rem .95rem .8rem;
  background: linear-gradient(to top, rgba(9, 32, 48, .88) 0%, rgba(9, 32, 48, .55) 45%, transparent 100%);
  pointer-events: none;
}
.mosaique__titre {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.02rem;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.mosaique__sous {
  display: block;
  font-size: .78rem;
  color: rgba(255, 255, 255, .82);
  margin-top: .12rem;
}

/* Rythme : quelques tuiles plus grandes */
.mosaique__item--haute { grid-row: span 2; }
.mosaique__item--large { grid-column: span 2; }
.mosaique__item--vedette { grid-column: span 2; grid-row: span 2; }
.mosaique__item--vedette .mosaique__titre { font-size: 1.35rem; }
.mosaique__item--vedette .mosaique__sous { font-size: .86rem; }

@media (max-width: 900px) {
  .mosaique { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .mosaique__item--vedette { grid-column: span 2; grid-row: span 2; }
  .mosaique__item--large { grid-column: span 2; grid-row: span 1; }
  .mosaique__item--haute { grid-row: span 1; }
}
@media (max-width: 460px) {
  .mosaique { grid-auto-rows: 128px; }
  .mosaique__item--vedette .mosaique__titre { font-size: 1.1rem; }
}

/* Légende sous la photo agrandie */
.lightbox { grid-template-rows: 1fr auto; }
.lightbox__legende {
  color: rgba(255, 255, 255, .88);
  text-align: center;
  max-width: 46rem;
  margin: 1rem auto 0;
  font-size: .95rem;
  line-height: 1.5;
}
.lightbox__legende strong { color: #fff; display: block; font-size: 1.05rem; }

/* Bandeau de crédit des albums */
.credit-photos {
  font-size: .88rem;
  color: var(--gris-clair);
  border-top: 1px solid var(--bord);
  padding-top: 1.2rem;
  margin-top: 2.5rem;
}

/* Bandeau immersif pour la mosaïque photos */
.section--photos {
  background: linear-gradient(155deg, #1B6FA8 0%, #12557F 60%, #0D4265 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.section--photos::before {
  content: '';
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: var(--soleil);
  opacity: .12;
  top: -190px; right: -120px;
}
.section--photos .conteneur { position: relative; }
.section--photos h2 { color: #fff; }
.section--photos .surtitre { color: var(--turquoise-clair); }
.section--photos .plomb { color: rgba(255, 255, 255, .88); }
.section--photos .btn--contour { border-color: rgba(255, 255, 255, .45); color: #fff; }
.section--photos .btn--contour:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }

/* ==========================================================================
   Médaillons du personnel (page Nos équipes)
   ========================================================================== */
.equipe-bloc li.membre {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .34rem 0;
  break-inside: avoid;
  color: var(--gris);
}
.equipe-bloc li.membre::before { content: none; }

.portrait {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--fond);
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(18, 85, 127, .18);
}
.portrait--initiales {
  display: grid;
  place-items: center;
  font-family: var(--police);
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #7BD8E0, #2FA6C4);
  letter-spacing: .02em;
  user-select: none;
}
/* Quelques teintes pour éviter la monotonie des médaillons d'initiales */
.equipe-bloc li.membre:nth-of-type(4n+2) .portrait--initiales {
  background: linear-gradient(135deg, #9CC9F0, #2E9BD6);
}
.equipe-bloc li.membre:nth-of-type(4n+3) .portrait--initiales {
  background: linear-gradient(135deg, #A8DCC0, #57BB8A);
}
.equipe-bloc li.membre:nth-of-type(4n+4) .portrait--initiales {
  background: linear-gradient(135deg, #C4BAEF, #8B7BD8);
}

.note-portraits {
  font-size: .88rem;
  color: var(--gris-clair);
  border-top: 1px solid var(--bord);
  padding-top: 1.2rem;
  margin-top: 2.5rem;
}

@media (max-width: 820px) {
  .portrait { width: 38px; height: 38px; }
}

/* ==========================================================================
   Bandeau illustré des pages intérieures
   ========================================================================== */
.bande { padding: clamp(2.2rem, 5vw, 3.4rem) 0 0; }
.bande__figure {
  margin: 0;
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.bande__figure img {
  width: 100%;
  height: clamp(200px, 34vw, 400px);
  object-fit: cover;
  display: block;
}
.bande__legende {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem 1.6rem 1.2rem;
  background: linear-gradient(to top, rgba(9, 32, 48, .9) 0%, rgba(9, 32, 48, .5) 50%, transparent 100%);
  color: rgba(255, 255, 255, .86);
  font-size: .92rem;
  line-height: 1.5;
}
.bande__legende strong {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: #fff;
  margin-bottom: .15rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

@media (max-width: 560px) {
  .bande__legende { padding: 2.2rem 1.1rem .9rem; font-size: .86rem; }
}

/* Marqueur des informations que l'école doit compléter */
.acompleter {
  background: #FFF3D6;
  color: #8A6100;
  padding: .1rem .5rem;
  border-radius: 6px;
  font-style: italic;
  font-size: .92em;
}

/* ==========================================================================
   Confort de lecture
   ========================================================================== */
.confort {
  position: fixed;
  /* Décalé de la largeur du bouton « retour en haut » (48 px) plus un espace :
     les deux commandes flottantes se partagent le bas de l'écran sans jamais
     se chevaucher, quelle que soit la largeur de l'écran. */
  right: calc(1rem + 48px + .6rem);
  bottom: 1rem;
  z-index: 250;
}
.confort__bouton {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--bleu-profond);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  box-shadow: var(--ombre-forte);
  transition: var(--transition);
}
.confort__bouton:hover { background: var(--bleu); transform: translateY(-2px); }
.confort__bouton span[aria-hidden] { font-size: 1.1rem; line-height: 1; }

.confort__panneau {
  /* Ancré à la fenêtre, pas au bouton : le bouton partage désormais le bas de
     l'écran avec « retour en haut », et un panneau calé sur lui débordait par
     la gauche sur un téléphone étroit. */
  position: fixed;
  right: 1rem;
  left: auto;
  bottom: calc(1rem + 47px + .7rem);
  width: min(calc(100vw - 2rem), 330px);
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
  padding: 1.3rem;
  max-height: 78vh;
  overflow-y: auto;
}
.confort__titre { font-size: 1.15rem; margin-bottom: 1rem; }
.confort__groupe { border: 0; padding: 0; margin: 0 0 1.1rem; }
.confort__groupe legend {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--turquoise-texte);
  padding: 0;
  margin-bottom: .45rem;
}
.confort__choix { display: flex; gap: .4rem; flex-wrap: wrap; }
.confort__opt {
  flex: 1 1 auto;
  padding: .5rem .7rem;
  border: 1px solid var(--bord);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: .88rem;
  color: var(--gris);
  cursor: pointer;
  transition: var(--transition);
}
.confort__opt:hover { border-color: var(--turquoise); color: var(--bleu); }
.confort__opt--actif {
  background: var(--bleu);
  border-color: var(--bleu);
  color: #fff;
  font-weight: 600;
}
.confort__voix, .confort__reset {
  width: 100%;
  padding: .6rem;
  border-radius: 10px;
  border: 1px solid var(--bord);
  background: #fff;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  margin-top: .3rem;
  color: var(--bleu-profond);
}
.confort__voix:hover, .confort__reset:hover { border-color: var(--turquoise); }
.confort__voix.confort__actif { background: var(--corail); border-color: var(--corail); color: #fff; }
.confort__reset { color: var(--gris-clair); font-size: .85rem; }
.confort__note { font-size: .78rem; color: var(--gris-clair); margin: .9rem 0 0; line-height: 1.45; }

@media (max-width: 560px) {
  .confort__libelle { display: none; }
  .confort__bouton { padding: .8rem; }
}
@media print { .confort { display: none; } }

/* ------------------------------------------------- Réglages appliqués */
html.confort-texte-1 { font-size: 112.5%; }
html.confort-texte-2 { font-size: 131.25%; }

html.confort-interligne body { line-height: 2; }
html.confort-interligne p,
html.confort-interligne li { letter-spacing: .02em; word-spacing: .12em; }

html.confort-dys body,
html.confort-dys .marque__nom,
html.confort-dys h1, html.confort-dys h2,
html.confort-dys h3, html.confort-dys h4 {
  font-family: 'Atkinson Hyperlegible', Verdana, Tahoma, 'Trebuchet MS', sans-serif;
  letter-spacing: .03em;
}
html.confort-dys p, html.confort-dys li { max-width: 66ch; }

html.confort-contraste body { color: #10171E; background: #fff; }
html.confort-contraste .plomb,
html.confort-contraste p,
html.confort-contraste li,
html.confort-contraste .actu p,
html.confort-contraste .carte p,
html.confort-contraste .semaine__jour dd,
html.confort-contraste .equipe-bloc li.membre { color: #22303C; }
html.confort-contraste .surtitre,
html.confort-contraste .actu__date,
html.confort-contraste .album__date { color: #0F6A80; }
html.confort-contraste a { color: #0B4F79; text-decoration: underline; }
html.confort-contraste .doc__meta,
html.confort-contraste .album__compte,
html.confort-contraste .aide { color: #4A5A66; }
html.confort-contraste .carte,
html.confort-contraste .type,
html.confort-contraste .equipe-bloc,
html.confort-contraste .contact-carte { border-color: #9FB2BF; }
html.confort-contraste .bande__legende,
html.confort-contraste .mosaique__voile {
  background: linear-gradient(to top, rgba(4, 18, 28, .96) 0%, rgba(4, 18, 28, .78) 55%, rgba(4, 18, 28, .35) 100%);
}
html.confort-contraste .pied { background: #0B141C; color: rgba(255, 255, 255, .92); }
html.confort-contraste .pied a { color: #fff; }

/* Focus toujours visible, quel que soit le réglage */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--soleil);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   Fil d'Ariane
   ========================================================================== */
.ariane { background: var(--fond); border-bottom: 1px solid var(--bord); }
.ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: .7rem 0;
  font-size: .87rem;
  color: var(--gris-clair);
}
.ariane li + li::before { content: '›'; margin-right: .4rem; color: var(--gris-clair); }
.ariane a { color: var(--gris); text-decoration: none; }
.ariane a:hover { color: var(--bleu); text-decoration: underline; }
.ariane [aria-current] { color: var(--bleu-profond); font-weight: 600; }

.pied__legal { font-size: .85rem; }
.pied__legal a { text-decoration: underline; }

/* ==========================================================================
   Première visite : étapes numérotées
   ========================================================================== */
.etapes { display: grid; gap: 1.3rem; }
.etape {
  display: flex;
  gap: 1.4rem;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.8rem;
}
.etape__num {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--turquoise-texte), var(--bleu));
  color: #fff;
  font-family: var(--police-titre);
  font-size: 1.35rem;
  font-weight: 700;
}
.etape h3 { margin-bottom: .5rem; }
.etape p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Facile à lire et à comprendre
   ========================================================================== */
.falc { max-width: 780px; }
.falc__bloc {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  background: #fff;
  border: 2px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.7rem;
  margin-bottom: 1.3rem;
}
.falc__bloc--aide { background: #FFF9E8; border-color: var(--soleil); }
.falc__picto {
  flex-shrink: 0;
  width: 58px; height: 58px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: var(--fond);
  font-size: 1.8rem;
}
.falc h2 { font-size: 1.4rem; margin-bottom: .8rem; }
.falc p {
  font-size: 1.14rem;
  line-height: 1.85;
  margin-bottom: .5rem;
  color: var(--encre);
}
.falc p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Recherche
   ========================================================================== */
.recherche__label { display: block; font-weight: 600; color: var(--bleu-profond); margin-bottom: .5rem; }
.recherche__ligne { display: flex; gap: .7rem; flex-wrap: wrap; }
.recherche__ligne input {
  flex: 1 1 240px;
  padding: .9rem 1.1rem;
  border: 2px solid var(--bord);
  border-radius: var(--rayon-sm);
  font: inherit;
  font-size: 1.05rem;
}
.recherche__ligne input:focus { border-color: var(--turquoise); outline: 3px solid rgba(47,166,196,.25); }
.recherche__compte { color: var(--gris); font-size: .93rem; margin: 1.6rem 0 .8rem; }

/* ==========================================================================
   Témoignages
   ========================================================================== */
.temoins { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.temoin {
  margin: 0;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.9rem 1.8rem 1.5rem;
  position: relative;
}
.temoin::before {
  content: '\201C';
  position: absolute;
  top: .1rem; left: 1.1rem;
  font-family: var(--police-titre);
  font-size: 4rem;
  color: var(--turquoise-clair);
  line-height: 1;
}
.temoin blockquote {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  font-size: 1.04rem;
  color: var(--encre);
  line-height: 1.75;
}
.temoin figcaption {
  padding-left: 1.5rem;
  font-weight: 600;
  color: var(--bleu-profond);
  font-size: .94rem;
}
.temoin figcaption span {
  display: block;
  font-weight: 400;
  color: var(--gris-clair);
  font-size: .87rem;
}

@media (max-width: 560px) {
  .etape, .falc__bloc { flex-direction: column; gap: 1rem; padding: 1.3rem; }
}

/* ==========================================================================
   Formulaires publics
   ========================================================================== */
.formulaire fieldset {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.4rem 1.5rem;
  margin: 0 0 1.5rem;
  background: #fff;
}
.formulaire legend {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--turquoise-texte);
  padding: 0 .5rem;
}
.formulaire .champ { margin-bottom: 1.1rem; }
.formulaire .champ:last-child { margin-bottom: 0; }
.formulaire label { display: block; font-weight: 600; color: var(--bleu-profond); margin-bottom: .35rem; }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=tel],
.formulaire input[type=date], .formulaire select, .formulaire textarea {
  width: 100%;
  padding: .78rem 1rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm);
  font: inherit;
  background: #fff;
  color: var(--encre);
}
.formulaire textarea { resize: vertical; min-height: 6rem; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus {
  outline: 3px solid rgba(47, 166, 196, .28);
  border-color: var(--turquoise);
}
.formulaire .aide { font-weight: 400; color: var(--gris-clair); font-size: .88rem; }
.formulaire .oblig { color: var(--corail-texte); font-weight: 700; }

/* Champ piège anti-robot : invisible mais pas display:none, pour rester
   ignoré des lecteurs d'écran sans être supprimé du formulaire. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inscription aux alertes */
.alerte-inscription {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}
.alerte-inscription input[type=email] {
  flex: 1 1 240px;
  padding: .82rem 1rem;
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: var(--rayon-sm);
  font: inherit;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.alerte-inscription input[type=email]::placeholder { color: rgba(255, 255, 255, .6); }
.alerte-inscription input[type=email]:focus {
  background: #fff;
  color: var(--encre);
  border-color: #fff;
  outline: 3px solid rgba(255, 255, 255, .3);
}

/* Le menu doit rester utilisable quand le texte est agrandi */
html.confort-texte-1 .nav ul,
html.confort-texte-2 .nav ul { flex-wrap: wrap; justify-content: flex-end; }
html.confort-texte-2 .marque__nom { font-size: 1.2rem; }

/* Le <picture> ne doit pas casser la mise en page du bandeau */
.bande__figure picture { display: block; }

/* Choix de langue dans le pied de page */
.pied__langues { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.pied__langues li { margin: 0; }

/* ---------------------------------------------------- Retour en haut de page
   Le bouton partage le bas de l'écran avec « Confort de lecture » : il occupe
   le coin, et le panneau de confort est décalé vers la gauche d'autant. Les
   deux restent atteignables au pouce, sans jamais se recouvrir. */
.haut {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 240;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--bleu-profond);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--ombre-forte);
  display: grid;
  place-items: center;

  /* Invisible et inerte tant qu'on n'a pas défilé. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.haut--visible { opacity: 1; visibility: visible; transform: none; }
.haut:hover { background: var(--bleu); }
.haut:focus-visible { outline: 3px solid var(--soleil); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .haut { transition: none; }
}

/* ------------------------------------------------ Agenda : vue calendrier
   Une liste dit ce qui vient ; une grille dit si la semaine du 12 est
   travaillée. Les deux ont leur usage, d'où le choix laissé au visiteur. */
.vues { display: flex; gap: .5rem; margin-bottom: 1.6rem; }
.vues__bouton {
  border: 1px solid var(--bord); background: #fff; color: var(--bleu-profond);
  border-radius: 999px; padding: .5rem 1.1rem; font: inherit; font-weight: 600;
  cursor: pointer;
}
.vues__bouton--actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.vues__bouton:focus-visible { outline: 3px solid var(--soleil); outline-offset: 2px; }

.calendrier__tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.calendrier__tete strong { color: var(--bleu-profond); font-size: 1.15rem; text-transform: capitalize; }

.calendrier {
  /* minmax(0, 1fr) et non 1fr : sinon un titre d'événement long impose sa
     largeur à sa colonne et la grille déborde de l'écran. Le même piège que
     pour la feuille d'impression — 1fr signifie minmax(auto, 1fr), et « auto »
     vaut la largeur du contenu. */
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
}
.calendrier__entete {
  text-align: center; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gris-clair); padding: .4rem 0;
}
.calendrier__case {
  background: #fff; border: 1px solid var(--bord); border-radius: 8px;
  min-height: 92px; padding: .35rem; display: flex; flex-direction: column; gap: 2px;
}
.calendrier__case--vide { background: transparent; border-color: transparent; }
.calendrier__case--weekend { background: var(--fond, #F5F8FA); }
.calendrier__case--aujourdhui { border-color: var(--soleil); border-width: 2px; }
.calendrier__num { font-size: .82rem; font-weight: 700; color: var(--gris); }
.calendrier__ev {
  font-size: .72rem; line-height: 1.25; border-radius: 4px; padding: .15rem .3rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calendrier__plus { font-size: .7rem; color: var(--gris-clair); }

@media (max-width: 700px) {
  .calendrier__case { min-height: 64px; }
  .calendrier__ev { font-size: .62rem; }
  .calendrier__num { font-size: .74rem; }
}
@media print { .vues { display: none !important; } }