/* Design system maison. Le DSFR est interdit aux collectivités
   territoriales : cette feuille en est totalement indépendante.

   Deux axes indépendants, tous deux choisis par CHAQUE visiteur (ADR-047) :
   - le thème de couleurs (attribut data-brand : ardoise, tilleul, bocage,
     midi), rendu par le serveur d'après le cookie tl_brand (formulaire
     POST /theme de la barre du haut, sans JavaScript), à défaut d'après le
     réglage du tenant ;
   - le mode clair/sombre (attribut data-theme), cookie tl_mode et
     localStorage, ou à défaut la préférence du système.
   Chaque combinaison (4 thèmes × 2 modes) tient le niveau WCAG 2.1 AA :
   4,5:1 pour le texte, 3:1 pour le contour de focus et la bordure des
   champs (critère 1.4.11). Vérifié par TestThemeContrast
   (internal/front/theme_contrast_test.go), qui relit ces blocs : garder le
   format « un jeton par ligne » des quatre palettes. */

/* --- Jetons communs + thème Ardoise (défaut) en mode clair ------------- */
:root {
  --topbar-h: 3.75rem;
  --sidebar-w: 15.5rem;
  --toc-w: 15rem;
  --espace: 1rem;
  --police: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --police-titre: var(--police);
  --titre-poids: 800;
  --titre-tracking: -0.025em;
  --h1: clamp(1.75rem, 1.25rem + 1.5vw, 2.4rem);
  --h2: 1.38rem;
  --h3: 1.08rem;
  --rayon: 6px;
  --rayon-lg: 12px;
  --rayon-btn: 6px;
  --ombre-carte: 0 1px 2px rgba(16, 32, 56, 0.06), 0 4px 14px rgba(16, 32, 56, 0.05);
  --ombre-survol: 0 6px 22px rgba(16, 32, 56, 0.12);
  --ombre-forte: 0 8px 30px rgba(16, 32, 56, 0.14);

  /* palette ardoise light */
  --couleur-primaire: #1b4965;
  --couleur-primaire-contraste: #ffffff;
  --couleur-accent: #3f8f9c;
  --couleur-accent-texte: #1f6b77;
  --couleur-texte: #14202b;
  --couleur-texte-secondaire: #4a5563;
  --couleur-fond: #f5f7fa;
  --couleur-fond-alt: #eaeff4;
  --couleur-surface: #ffffff;
  --couleur-bordure: #d6dde5;
  --couleur-bordure-champ: #76828f;
  --couleur-focus: #1f6b77;
  --couleur-succes: #1b6b2f;
  --couleur-alerte: #8a4b00;
  --couleur-erreur: #a4161a;
  --couleur-erreur-texte: #a4161a;
  --hero-fond: #e3ecf3;
  --hero-texte: #14202b;
  --hero-texte-2: #3d4a57;
  --hero-lien: #1b4965;
  --hero-bordure: #cfdbe6;
  --medaille-fond: #1b4965;
  --medaille-texte: #ffffff;
  /* fin palette */
  --motif: color-mix(in srgb, var(--couleur-primaire) 20%, var(--hero-fond));
}

/* --- Tilleul : le « chaleureux » travaillé ------------------------------ */
:root[data-brand="tilleul"] {
  --rayon: 14px;
  --rayon-lg: 22px;
  --rayon-btn: 14px;
  --police-titre: var(--police-serif);
  --titre-poids: 640;
  --titre-tracking: -0.01em;
  --h1: clamp(1.9rem, 1.3rem + 1.8vw, 2.6rem);
  --h2: 1.5rem;
  --ombre-carte: 0 2px 4px rgba(80, 60, 20, 0.05), 0 8px 24px rgba(80, 60, 20, 0.07);
  --ombre-survol: 0 10px 30px rgba(80, 60, 20, 0.14);
  /* palette tilleul light */
  --couleur-primaire: #2a6656;
  --couleur-primaire-contraste: #ffffff;
  --couleur-accent: #d98e3e;
  --couleur-accent-texte: #8a4f12;
  --couleur-texte: #28241c;
  --couleur-texte-secondaire: #5f584a;
  --couleur-fond: #fffdf8;
  --couleur-fond-alt: #f7f1e3;
  --couleur-surface: #ffffff;
  --couleur-bordure: #e7ddc9;
  --couleur-bordure-champ: #8f846f;
  --couleur-focus: #8a4f12;
  --couleur-succes: #1f6b33;
  --couleur-alerte: #8a4b00;
  --couleur-erreur: #a4161a;
  --couleur-erreur-texte: #a4161a;
  --hero-fond: #f3ead6;
  --hero-texte: #28241c;
  --hero-texte-2: #5a5244;
  --hero-lien: #2a6656;
  --hero-bordure: #eadfc6;
  --medaille-fond: #d98e3e;
  --medaille-texte: #28241c;
  /* fin palette */
  --motif: color-mix(in srgb, var(--couleur-primaire) 24%, var(--hero-fond));
}

/* --- Bocage : nature, haies et prés ------------------------------------ */
:root[data-brand="bocage"] {
  --rayon: 10px;
  --rayon-lg: 18px;
  --rayon-btn: 10px;
  --police-titre: var(--police-serif);
  --titre-poids: 560;
  --titre-tracking: 0;
  --h1: clamp(2rem, 1.35rem + 2vw, 2.8rem);
  --h2: 1.6rem;
  --ombre-carte: 0 1px 0 rgba(45, 90, 39, 0.08);
  --ombre-survol: 0 8px 24px rgba(45, 90, 39, 0.14);
  /* palette bocage light */
  --couleur-primaire: #2d5a27;
  --couleur-primaire-contraste: #ffffff;
  --couleur-accent: #b7862b;
  --couleur-accent-texte: #74520f;
  --couleur-texte: #1f2a1c;
  --couleur-texte-secondaire: #4c5746;
  --couleur-fond: #fbfaf4;
  --couleur-fond-alt: #eef0e3;
  --couleur-surface: #ffffff;
  --couleur-bordure: #d6dac5;
  --couleur-bordure-champ: #7f8a72;
  --couleur-focus: #74520f;
  --couleur-succes: #1f6b33;
  --couleur-alerte: #8a4b00;
  --couleur-erreur: #a4161a;
  --couleur-erreur-texte: #a4161a;
  --hero-fond: #e6ecd8;
  --hero-texte: #1f2a1c;
  --hero-texte-2: #46513f;
  --hero-lien: #2d5a27;
  --hero-bordure: #d3dcc0;
  --medaille-fond: #2d5a27;
  --medaille-texte: #ffffff;
  /* fin palette */
  --motif: color-mix(in srgb, var(--couleur-primaire) 30%, var(--hero-fond));
}

/* --- Midi : méditerranée lumineuse ------------------------------------- */
:root[data-brand="midi"] {
  --rayon: 12px;
  --rayon-lg: 20px;
  --rayon-btn: 999px;
  --police-titre: var(--police);
  --titre-poids: 860;
  --titre-tracking: -0.03em;
  --h1: clamp(1.9rem, 1.3rem + 1.9vw, 2.7rem);
  --ombre-carte: 0 2px 6px rgba(13, 92, 140, 0.06), 0 10px 26px rgba(13, 92, 140, 0.07);
  --ombre-survol: 0 14px 34px rgba(13, 92, 140, 0.16);
  /* palette midi light */
  --couleur-primaire: #0d5c8c;
  --couleur-primaire-contraste: #ffffff;
  --couleur-accent: #b94e28;
  --couleur-accent-texte: #a3401c;
  --couleur-texte: #1c1b1f;
  --couleur-texte-secondaire: #55514b;
  --couleur-fond: #fffdf9;
  --couleur-fond-alt: #f7efe3;
  --couleur-surface: #ffffff;
  --couleur-bordure: #e8dcc8;
  --couleur-bordure-champ: #8c8273;
  --couleur-focus: #a3401c;
  --couleur-succes: #1f6b33;
  --couleur-alerte: #8a4b00;
  --couleur-erreur: #a4161a;
  --couleur-erreur-texte: #a4161a;
  --hero-fond: #0d5c8c;
  --hero-texte: #ffffff;
  --hero-texte-2: #dcebf5;
  --hero-lien: #ffffff;
  --hero-bordure: transparent;
  --medaille-fond: #b94e28;
  --medaille-texte: #ffffff;
  /* fin palette */
  --motif: rgba(255, 255, 255, 0.16);
}

/* --- Modes sombres ------------------------------------------------------
   Choix explicite du visiteur (data-theme="dark") ; le même jeu est repris
   plus bas sous prefers-color-scheme pour un visiteur qui n'a rien choisi.
   Chaque palette sombre redéfinit TOUS les jetons de couleur (le mode
   sombre de l'ancien thème « sobre » gardait la primaire claire : liens à
   1,85:1, échec AA). */
:root[data-theme="dark"] {
  --ombre-carte: 0 0 0 transparent;
  --ombre-survol: 0 0 0 1px var(--couleur-primaire);
  --ombre-forte: 0 10px 30px rgba(0, 0, 0, 0.45);
  /* palette ardoise dark */
  --couleur-primaire: #8cc4e0;
  --couleur-primaire-contraste: #0b1a24;
  --couleur-accent: #5fb7c4;
  --couleur-accent-texte: #7fd0db;
  --couleur-texte: #e8edf2;
  --couleur-texte-secondaire: #a9b4c0;
  --couleur-fond: #0f161d;
  --couleur-fond-alt: #141d26;
  --couleur-surface: #18222c;
  --couleur-bordure: #2c3a48;
  --couleur-bordure-champ: #6b7d8f;
  --couleur-focus: #7fd0db;
  --couleur-succes: #7ed99a;
  --couleur-alerte: #f2c27a;
  --couleur-erreur: #f6a6a0;
  --couleur-erreur-texte: #f6a6a0;
  --hero-fond: #16232f;
  --hero-texte: #e8edf2;
  --hero-texte-2: #b4c0cc;
  --hero-lien: #8cc4e0;
  --hero-bordure: #2c3a48;
  --medaille-fond: #8cc4e0;
  --medaille-texte: #0b1a24;
  /* fin palette */
}
:root[data-brand="tilleul"][data-theme="dark"] {
  /* palette tilleul dark */
  --couleur-primaire: #7ec2a6;
  --couleur-primaire-contraste: #10201a;
  --couleur-accent: #e3a75c;
  --couleur-accent-texte: #e8b06a;
  --couleur-texte: #f3efe2;
  --couleur-texte-secondaire: #c1baa2;
  --couleur-fond: #1a201a;
  --couleur-fond-alt: #20271f;
  --couleur-surface: #252c23;
  --couleur-bordure: #3a4232;
  --couleur-bordure-champ: #7a8270;
  --couleur-focus: #e8b06a;
  --couleur-succes: #8fd6a0;
  --couleur-alerte: #f0c47a;
  --couleur-erreur: #f6a6a0;
  --couleur-erreur-texte: #f6a6a0;
  --hero-fond: #232b21;
  --hero-texte: #f3efe2;
  --hero-texte-2: #cfc7ae;
  --hero-lien: #7ec2a6;
  --hero-bordure: #3a4232;
  --medaille-fond: #e3a75c;
  --medaille-texte: #28241c;
  /* fin palette */
}
:root[data-brand="bocage"][data-theme="dark"] {
  /* palette bocage dark */
  --couleur-primaire: #a3cf8f;
  --couleur-primaire-contraste: #142010;
  --couleur-accent: #d9b064;
  --couleur-accent-texte: #e0bc76;
  --couleur-texte: #eef0e4;
  --couleur-texte-secondaire: #b5bca8;
  --couleur-fond: #131911;
  --couleur-fond-alt: #182016;
  --couleur-surface: #1e271a;
  --couleur-bordure: #34402d;
  --couleur-bordure-champ: #738066;
  --couleur-focus: #e0bc76;
  --couleur-succes: #9ad7a2;
  --couleur-alerte: #f0c47a;
  --couleur-erreur: #f6a6a0;
  --couleur-erreur-texte: #f6a6a0;
  --hero-fond: #1c2619;
  --hero-texte: #eef0e4;
  --hero-texte-2: #c2c9b5;
  --hero-lien: #a3cf8f;
  --hero-bordure: #34402d;
  --medaille-fond: #a3cf8f;
  --medaille-texte: #142010;
  /* fin palette */
}
:root[data-brand="midi"][data-theme="dark"] {
  --motif: rgba(124, 196, 239, 0.16);
  /* palette midi dark */
  --couleur-primaire: #7cc4ef;
  --couleur-primaire-contraste: #06233a;
  --couleur-accent: #ef8a5e;
  --couleur-accent-texte: #f29a74;
  --couleur-texte: #f6f1ea;
  --couleur-texte-secondaire: #c7bfb3;
  --couleur-fond: #0f1a24;
  --couleur-fond-alt: #132230;
  --couleur-surface: #182a3a;
  --couleur-bordure: #2c4256;
  --couleur-bordure-champ: #6d8195;
  --couleur-focus: #f29a74;
  --couleur-succes: #8fd6a0;
  --couleur-alerte: #f0c47a;
  --couleur-erreur: #f6a6a0;
  --couleur-erreur-texte: #f6a6a0;
  --hero-fond: #13314a;
  --hero-texte: #f6f1ea;
  --hero-texte-2: #c9dbe8;
  --hero-lien: #f6f1ea;
  --hero-bordure: #2c4256;
  --medaille-fond: #ef8a5e;
  --medaille-texte: #1c1b1f;
  /* fin palette */
}

/* Préférence du système, quand le visiteur n'a rien choisi : mêmes
   palettes que ci-dessus (à garder synchronisées). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ombre-carte: 0 0 0 transparent;
    --ombre-survol: 0 0 0 1px var(--couleur-primaire);
    --ombre-forte: 0 10px 30px rgba(0, 0, 0, 0.45);
    --couleur-primaire: #8cc4e0;
    --couleur-primaire-contraste: #0b1a24;
    --couleur-accent: #5fb7c4;
    --couleur-accent-texte: #7fd0db;
    --couleur-texte: #e8edf2;
    --couleur-texte-secondaire: #a9b4c0;
    --couleur-fond: #0f161d;
    --couleur-fond-alt: #141d26;
    --couleur-surface: #18222c;
    --couleur-bordure: #2c3a48;
    --couleur-bordure-champ: #6b7d8f;
    --couleur-focus: #7fd0db;
    --couleur-succes: #7ed99a;
    --couleur-alerte: #f2c27a;
    --couleur-erreur: #f6a6a0;
    --couleur-erreur-texte: #f6a6a0;
    --hero-fond: #16232f;
    --hero-texte: #e8edf2;
    --hero-texte-2: #b4c0cc;
    --hero-lien: #8cc4e0;
    --hero-bordure: #2c3a48;
    --medaille-fond: #8cc4e0;
    --medaille-texte: #0b1a24;
  }
  :root[data-brand="tilleul"]:not([data-theme="light"]) {
    --couleur-primaire: #7ec2a6;
    --couleur-primaire-contraste: #10201a;
    --couleur-accent: #e3a75c;
    --couleur-accent-texte: #e8b06a;
    --couleur-texte: #f3efe2;
    --couleur-texte-secondaire: #c1baa2;
    --couleur-fond: #1a201a;
    --couleur-fond-alt: #20271f;
    --couleur-surface: #252c23;
    --couleur-bordure: #3a4232;
    --couleur-bordure-champ: #7a8270;
    --couleur-focus: #e8b06a;
    --couleur-succes: #8fd6a0;
    --couleur-alerte: #f0c47a;
    --couleur-erreur: #f6a6a0;
    --couleur-erreur-texte: #f6a6a0;
    --hero-fond: #232b21;
    --hero-texte: #f3efe2;
    --hero-texte-2: #cfc7ae;
    --hero-lien: #7ec2a6;
    --hero-bordure: #3a4232;
    --medaille-fond: #e3a75c;
    --medaille-texte: #28241c;
  }
  :root[data-brand="bocage"]:not([data-theme="light"]) {
    --couleur-primaire: #a3cf8f;
    --couleur-primaire-contraste: #142010;
    --couleur-accent: #d9b064;
    --couleur-accent-texte: #e0bc76;
    --couleur-texte: #eef0e4;
    --couleur-texte-secondaire: #b5bca8;
    --couleur-fond: #131911;
    --couleur-fond-alt: #182016;
    --couleur-surface: #1e271a;
    --couleur-bordure: #34402d;
    --couleur-bordure-champ: #738066;
    --couleur-focus: #e0bc76;
    --couleur-succes: #9ad7a2;
    --couleur-alerte: #f0c47a;
    --couleur-erreur: #f6a6a0;
    --couleur-erreur-texte: #f6a6a0;
    --hero-fond: #1c2619;
    --hero-texte: #eef0e4;
    --hero-texte-2: #c2c9b5;
    --hero-lien: #a3cf8f;
    --hero-bordure: #34402d;
    --medaille-fond: #a3cf8f;
    --medaille-texte: #142010;
  }
  :root[data-brand="midi"]:not([data-theme="light"]) {
    --motif: rgba(124, 196, 239, 0.16);
    --couleur-primaire: #7cc4ef;
    --couleur-primaire-contraste: #06233a;
    --couleur-accent: #ef8a5e;
    --couleur-accent-texte: #f29a74;
    --couleur-texte: #f6f1ea;
    --couleur-texte-secondaire: #c7bfb3;
    --couleur-fond: #0f1a24;
    --couleur-fond-alt: #132230;
    --couleur-surface: #182a3a;
    --couleur-bordure: #2c4256;
    --couleur-bordure-champ: #6d8195;
    --couleur-focus: #f29a74;
    --couleur-succes: #8fd6a0;
    --couleur-alerte: #f0c47a;
    --couleur-erreur: #f6a6a0;
    --couleur-erreur-texte: #f6a6a0;
    --hero-fond: #13314a;
    --hero-texte: #f6f1ea;
    --hero-texte-2: #c9dbe8;
    --hero-lien: #f6f1ea;
    --hero-bordure: #2c4256;
    --medaille-fond: #ef8a5e;
    --medaille-texte: #1c1b1f;
  }
}

/* Jetons dérivés (tous thèmes, tous modes) : teintes douces et couleurs
   des illustrations décoratives. */
:root {
  --couleur-primaire-doux: color-mix(in srgb, var(--couleur-primaire) 12%, var(--couleur-surface));
  --couleur-accent-doux: color-mix(in srgb, var(--couleur-accent) 18%, var(--couleur-surface));
  --vis-ciel: color-mix(in srgb, var(--couleur-primaire) 16%, var(--couleur-surface));
  --vis-ciel-2: color-mix(in srgb, var(--couleur-accent) 18%, var(--couleur-surface));
  --vis-colline: color-mix(in srgb, var(--couleur-primaire) 34%, var(--couleur-surface));
  --vis-colline-2: color-mix(in srgb, var(--couleur-primaire) 52%, var(--couleur-surface));
  --vis-bati: color-mix(in srgb, var(--couleur-surface) 88%, var(--couleur-texte));
  --vis-trait: color-mix(in srgb, var(--couleur-primaire) 75%, var(--couleur-texte));
  --vis-fenetre: color-mix(in srgb, var(--couleur-primaire) 55%, var(--couleur-surface));
}
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }

/* Polices variables auto-hebergees (make vendor-fraunces, make
   vendor-public-sans) : jamais de CDN externe (CLAUDE.md, contrainte 7).
   Repli silencieux sur la pile système si le fichier est absent (vendor
   jamais lance). Public Sans est la police de corps des deux themes de
   marque (voir --police, ci-dessus) ; Fraunces ne sert qu'aux titres du
   theme "chaleureux" (--police-titre). */
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/static/fonts/public-sans.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

h1, h2, h3 { font-family: var(--police-titre); }

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

/* Échelle globale : 90 % de la taille de police choisie dans le navigateur
   (≈ zoom 90 %). Toutes les tailles et espacements du design system sont en
   rem/em, ils suivent ; un pourcentage (jamais des px) respecte le réglage de
   taille de texte de l'usager (RGAA, agrandissement du texte). */
html { font-size: 90%; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--couleur-texte);
  background: var(--couleur-fond);
}

/* Sans cette regle, tout lien hors des classes ci-dessous (pied de page,
   fil d'ariane, contenu d'aide...) retombe sur le bleu/violet par défaut
   du navigateur, hors de toute palette : jamais cohérent avec le thème
   choisi par la mairie, ni en clair ni en sombre. */
a { color: var(--couleur-primaire); }
a:visited { color: var(--couleur-primaire); }

/* Lien d'evitement : critere RGAA 12.7 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--couleur-primaire);
  color: var(--couleur-primaire-contraste);
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* Piege a robots (formulaire de contact) : mise hors-ecran par une classe
   de cette feuille plutot qu'un attribut style="" en ligne. */
.honeypot { position: absolute; left: -9999px; }

/* Focus toujours visible, jamais supprime : critere RGAA 10.7 */
:focus-visible {
  outline: 3px solid var(--couleur-focus);
  outline-offset: 2px;
}

main:focus { outline: none; }

/* --- Coquille applicative : barre du haut + navigation laterale groupee.
   Un vrai cadre d'application (menus alignes, contenu cadre) plutot qu'une
   pile d'elements. Reste accessible : reperes header/nav/main/aside, focus
   visible, repli sur une colonne au telephone (la navigation ne depend
   jamais de JavaScript). */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--topbar-h);
  padding: 0 1.1rem;
  background: var(--couleur-surface);
  border-bottom: 1px solid var(--couleur-bordure);
  /* Liseret de marque en haut : signe l'identite sans banniere ni image. */
  box-shadow: inset 0 3px 0 0 var(--couleur-primaire);
}
.topbar__menu {
  display: none; /* visible seulement au telephone */
  align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; flex: none;
  border: 1px solid var(--couleur-bordure); border-radius: var(--rayon);
  background: var(--couleur-surface); color: var(--couleur-texte); cursor: pointer;
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em; color: var(--couleur-primaire); text-decoration: none; }
.brand__logo { flex: none; }
.brand__name { white-space: nowrap; }
.topbar__actions { display: flex; gap: 0.5rem; align-items: center; margin-left: auto; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; flex: none;
  border: 1px solid var(--couleur-bordure); border-radius: var(--rayon);
  background: var(--couleur-surface); color: var(--couleur-texte-secondaire); cursor: pointer;
}
.icon-btn:hover { color: var(--couleur-primaire); border-color: var(--couleur-primaire); }

.user-chip { display: inline-flex; align-items: center; gap: 0.5rem; max-width: 12rem; }
.user-chip__avatar {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 0.85rem;
  background: color-mix(in srgb, var(--couleur-primaire) 16%, var(--couleur-surface));
  color: var(--couleur-primaire);
}
.user-chip__name { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: stretch; }

/* La bande laterale et la colonne de contenu s'etirent sur toute la hauteur de
   la page (align-items: stretch ci-dessus). Auparavant la sidebar avait une
   hauteur figee d'un seul viewport : sur une page au contenu court (ex. le
   porte-monnaie) le fond gris et le filet s'arretaient au milieu de la page.
   La navigation reste collante grace a .sidebar__nav. */
.sidebar {
  min-height: calc(100vh - var(--topbar-h));
  padding: 1.1rem 0.8rem;
  background: var(--couleur-fond-alt);
  border-right: 1px solid var(--couleur-bordure);
}
.sidebar__nav {
  position: sticky; top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}
.sidebar__group + .sidebar__group { margin-top: 1.25rem; }
.sidebar__title {
  margin: 0 0 0.4rem; padding: 0 0.7rem;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--couleur-texte-secondaire);
}
.sidebar__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.sidebar__link {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.7rem; border-radius: var(--rayon);
  color: var(--couleur-texte-secondaire); text-decoration: none;
  font-weight: 600; font-size: 0.9rem;
  border-left: 3px solid transparent;
}
.sidebar__link:visited { color: var(--couleur-texte-secondaire); }
.sidebar__link:hover { background: color-mix(in srgb, var(--couleur-primaire) 8%, transparent); color: var(--couleur-primaire); }
.sidebar__link.is-active {
  background: color-mix(in srgb, var(--couleur-primaire) 13%, transparent);
  color: var(--couleur-primaire);
  border-left-color: var(--couleur-primaire);
}
.sidebar__link svg { width: 19px; height: 19px; flex: none; }

.workspace { display: flex; gap: var(--espace); align-items: flex-start; padding: 1.5rem; min-width: 0; }
/* Contenu fluide sur toutes les pages, quel que soit le profil : il occupe
   toute la largeur disponible du navigateur, sans borne. */
main { flex: 1 1 auto; min-width: 0; }

/* Panneau d'aide : un aside, pas une modale. Plus simple a rendre
   accessible et lisible pendant la saisie d'un formulaire. */
.help-panel {
  flex: 0 0 22rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: var(--espace);
  background: var(--couleur-fond-alt);
  position: sticky; top: calc(var(--topbar-h) + 1rem);
}
.help-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.help-panel h2 { margin-top: 0; font-size: 1.125rem; }

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

@media (max-width: 60rem) {
  .topbar__menu { display: inline-flex; }
  .shell { grid-template-columns: 1fr; }
  /* Sidebar en tiroir : masquee quand JS est actif (classe has-js posee par
     theme-init.js), revelee par le bouton menu. Sans JS elle reste visible,
     empilee sous la barre. */
  .has-js .sidebar { display: none; }
  .has-js .sidebar.is-open { display: block; }
  .sidebar {
    position: static; height: auto;
    border-right: none; border-bottom: 1px solid var(--couleur-bordure);
  }
  .workspace { flex-direction: column; padding: 1rem; }
  .help-panel { position: static; flex: 1 1 auto; width: 100%; }
  .user-chip__name { display: none; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.3rem;
  border: 1px solid var(--couleur-primaire);
  border-radius: var(--rayon-btn);
  background: var(--couleur-surface);
  color: var(--couleur-primaire);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: none;
}
.btn--primary { background: var(--couleur-primaire); color: var(--couleur-primaire-contraste); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.btn--ghost { border-color: transparent; text-decoration: underline; }
.btn--sm { padding: 0.42rem 0.8rem; font-size: 0.85rem; }
/* Un bouton-lien (<a class="btn">) ne doit jamais hériter de la couleur des
   liens visités : le sélecteur a:visited (spécificité supérieure à .btn)
   repeignait sinon le libellé de la couleur de marque -- le bouton
   « Se connecter » affichait alors un texte vert sur fond vert, donc invisible. */
.btn:link, .btn:visited { color: var(--couleur-primaire); }
.btn--primary:link, .btn--primary:visited { color: var(--couleur-primaire-contraste); }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

fieldset { border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); padding: var(--espace); }
legend { padding: 0 0.5rem; font-weight: 600; }

.field { margin-bottom: var(--espace); }
.field label, .field-label { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.9rem; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font: inherit;
  color: var(--couleur-texte);
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure-champ);
  border-radius: var(--rayon);
}
[aria-invalid="true"] { border-color: var(--couleur-erreur-texte); border-width: 2px; }

/* Une case a cocher ou un bouton radio ne doit pas heriter du width:100%
   ci-dessus (il s'etirait sur toute la ligne, d'ou le decalage constate
   entre la case et son libelle). Le libelle qui l'enveloppe passe en
   ligne, aligne verticalement, et perd le gras des etiquettes de champ. */
.field input[type="checkbox"],
.field input[type="radio"] { width: auto; }
.field label:has(> input[type="checkbox"]),
.field label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  font-weight: 400;
}

/* Groupe de cases a cocher d'un formulaire (roles d'un utilisateur, jours de
   la semaine d'une reservation recurrente...). Sans style dedie, le <fieldset>
   prend la bordure "groove" par defaut du navigateur, ne s'aligne pas sur la
   largeur des champs (quirk de dimensionnement intrinseque du fieldset) et les
   cases s'enroulent en milieu de libelle. On lui donne le cadre du design
   system, pleine largeur, et une case PAR LIGNE. */
.form fieldset {
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 0.5rem 1rem 0.9rem;
  margin: 0 0 var(--espace);
  min-inline-size: 0; /* neutralise le min-width intrinseque du fieldset */
}
.form fieldset legend {
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0 0.35rem;
}
/* Seulement les libelles qui enveloppent une case a cocher ou un bouton radio :
   applique a TOUT libelle de fieldset, ce flex placait aussi le texte d'un champ
   de saisie a cote de sa case (libelle coupe sur plusieurs lignes, cases mal
   alignees -- constate sur le formulaire SSO). Un libelle de champ texte garde
   donc le rendu standard de .field : texte au-dessus, case pleine largeur. */
.form fieldset label:has(> input[type="checkbox"]),
.form fieldset label:has(> input[type="radio"]) {
  display: flex; /* bloc : une case par ligne */
  align-items: center;
  gap: 0.5rem;
  margin: 0.2rem 0;
  font-weight: 400;
}
.form fieldset input[type="checkbox"],
.form fieldset input[type="radio"] {
  width: auto;
  flex: none;
}

/* Formulaire SSO : n'afficher que les champs du protocole choisi dans la liste
   « Type ». CSS seul (aucun script, CSP intacte) ; un navigateur sans :has()
   affiche simplement les deux blocs, comme avant. Les champs masques restent
   envoyes, l'API n'utilise que ceux du protocole choisi. */
.sso-form:has(select[name="kind"] option[value="oidc"]:checked) .sso-fields--saml,
.sso-form:has(select[name="kind"] option[value="saml"]:checked) .sso-fields--oidc {
  display: none;
}

/* Lien de retour ("fil d'Ariane") en haut des sous-pages : une pastille avec
   fleche plutot qu'un simple lien souligne. Applique sur toutes les pages de
   detail (class="back-link"). */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: 999px;
  background: var(--couleur-fond-alt);
  color: var(--couleur-texte-secondaire);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.back-link::before {
  content: "\2190"; /* fleche vers la gauche */
  font-size: 1.05em;
  line-height: 1;
}
.back-link:hover {
  border-color: var(--couleur-primaire);
  color: var(--couleur-primaire);
  background: var(--couleur-surface);
}
.back-link:focus-visible {
  outline: 2px solid var(--couleur-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .back-link { transition: none; } }


/* Mise en page a deux colonnes (liste de services + formulaire...) : voir
   la page de contact. S'effondre sur une seule colonne en dessous de
   45rem, comme le reste du site. */
.content-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 0;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--couleur-surface);
  box-shadow: var(--ombre-carte);
}
.content-split__side { padding: 1.75rem; border-right: 1px solid var(--couleur-bordure); background: var(--couleur-fond-alt); }
.content-split__main { padding: 1.75rem; }
.content-split__side h2, .content-split__side h3 {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--couleur-texte-secondaire); margin: 0 0 1rem; font-family: var(--police);
}
@media (max-width: 45rem) {
  .content-split { grid-template-columns: 1fr; }
  .content-split__side { border-right: none; border-bottom: 1px solid var(--couleur-bordure); }
}

/* Liste de services/contacts avec badge d'icone (voir la page de
   contact). */
.service-list { list-style: none; margin: 0; padding: 0; }
.service-item { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.65rem 0; border-bottom: 1px solid var(--couleur-bordure); font-size: 0.9rem; }
.service-item:last-child { border-bottom: none; }
.service-item__icon {
  width: 30px; height: 30px; border-radius: var(--rayon);
  background: var(--couleur-primaire); color: var(--couleur-primaire-contraste);
  flex: none; display: flex; align-items: center; justify-content: center;
}
.service-item strong { display: block; }
.service-item span { color: var(--couleur-texte-secondaire); font-size: 0.85rem; }

/* Coordonnees de la mairie sur la page de contact : adresse, horaires,
   reseaux sociaux. Les blocs adresse/horaires conservent leurs retours a la
   ligne (.pre-line). */
.pre-line { white-space: pre-line; }
.contact-coords { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--couleur-bordure); }
.contact-coords h2 { font-size: 1.05rem; margin: 0 0 0.8rem; }
.contact-coords h3 { font-size: 0.95rem; margin: 1.2rem 0 0.5rem; }
.contact-coords__list { margin: 0; }
.contact-coords__list > div { padding: 0.4rem 0; }
.contact-coords__list dt { font-weight: 600; font-size: 0.85rem; color: var(--couleur-texte-secondaire); }
.contact-coords__list dd { margin: 0.15rem 0 0; font-size: 0.9rem; }
.social-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.social-links a { text-decoration: none; }
.social-links a:hover { text-decoration: underline; }

/* Sessions de clubs groupees par activite (Cirque, Breakdance...). */
.activity-group + .activity-group { margin-top: 1.6rem; }
.activity-group > h3 { margin-bottom: 0.6rem; }

.flash { padding: 0.75rem 1rem; border-radius: var(--rayon); margin-bottom: var(--espace); border-left: 4px solid; white-space: pre-line; }
.flash--error   { background: color-mix(in srgb, var(--couleur-erreur-texte) 10%, var(--couleur-surface)); color: var(--couleur-texte); border-color: var(--couleur-erreur-texte); }
.flash--success { background: color-mix(in srgb, var(--couleur-succes) 12%, var(--couleur-surface)); color: var(--couleur-texte); border-color: var(--couleur-succes); }
.flash--info    { background: var(--couleur-primaire-doux); color: var(--couleur-texte); border-color: var(--couleur-primaire); }
/* pre-line sert aux messages en texte seul (retours a la ligne voulus). Un
   encadre compose de paragraphes ne doit pas l'heriter : il rendait en lignes
   vides les sauts de ligne et l'indentation du gabarit entre les <p>
   (constate sur la page SSO). Espacement de paragraphes resserre. */
.flash:has(> p) { white-space: normal; }
.flash > p { margin: 0; }
.flash > p + p { margin-top: 0.5rem; }

.banner { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; }
.banner--warning { background: color-mix(in srgb, var(--couleur-alerte) 14%, var(--couleur-surface)); color: var(--couleur-texte); border-bottom: 2px solid var(--couleur-alerte); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.card { border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); padding: 1.25rem; background: var(--couleur-surface); box-shadow: var(--ombre-carte); transition: box-shadow 0.15s ease, transform 0.15s ease; }
.card h2, .card h3 { margin-top: 0; }
/* Legere elevation au survol : donne du relief a une grille de cartes
   sans surcharge. Neutralise si l'utilisateur limite les animations. */
a.card:hover, .card--link:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } a.card:hover, .card--link:hover { transform: none; } }

/* Carte de synthese de la licence. */
.licence-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espace); }
.licence-card__plan { font-size: 1.4rem; font-weight: 700; margin: 0.1rem 0 0; text-transform: capitalize; }
.licence-card__grid { display: grid; gap: var(--espace); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: var(--espace) 0; }
.licence-card__grid dt { font-size: 0.85rem; color: var(--couleur-texte-secondaire); }
.licence-card__grid dd { margin: 0.15rem 0 0; font-weight: 600; }
/* Puces de modules (liste d'etiquettes). */
.chips { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { background: var(--couleur-fond-attenue, rgba(0,0,0,0.05)); border: 1px solid var(--couleur-bordure); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.85rem; font-weight: 600; }

/* Etiquette informative (mise en avant, filtre actif...). Texte toujours
   present a cote, jamais uniquement une couleur (RGAA 3.2 usage de la
   couleur). */
.badge {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: var(--rayon);
  background: var(--couleur-fond-alt);
  border: 1px solid var(--couleur-bordure);
}

/* Statuts de workflow (reservations, conges, taches, inscriptions...).
   La couleur est un renfort visuel ; le libelle textuel reste la seule
   information portee (RGAA 3.2). Fond teinte obtenu par color-mix avec le
   fond de page, donc cohérent en clair comme en sombre et pour les deux
   themes de marque. Les valeurs brutes de statut de chaque module sont
   regroupees par sens plutot que colorees une a une. */
.status { border-color: var(--couleur-bordure); }
.status--confirmed, .status--published, .status--paid, .status--approved,
.status--resolved, .status--done, .status--completed, .status--active {
  color: var(--couleur-succes);
  border-color: color-mix(in srgb, var(--couleur-succes) 45%, transparent);
  background: color-mix(in srgb, var(--couleur-succes) 12%, var(--couleur-surface));
}
.status--pending, .status--review, .status--planned, .status--open, .status--booked {
  color: var(--couleur-alerte);
  border-color: color-mix(in srgb, var(--couleur-alerte) 45%, transparent);
  background: color-mix(in srgb, var(--couleur-alerte) 14%, var(--couleur-surface));
}
.status--refused, .status--rejected, .status--cancelled, .status--failed {
  color: var(--couleur-erreur-texte);
  border-color: color-mix(in srgb, var(--couleur-erreur-texte) 45%, transparent);
  background: color-mix(in srgb, var(--couleur-erreur-texte) 12%, var(--couleur-surface));
}
.status--draft, .status--archived, .status--skipped {
  color: var(--couleur-texte-secondaire);
  background: var(--couleur-fond-alt);
}

.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 0.6rem 0.65rem; border-bottom: 1px solid var(--couleur-bordure); }
/* En-tete distincte et lignes alternees : une longue table de back-office
   se lit nettement mieux, et l'ensemble parait moins "vide". */
.table thead th {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--couleur-texte-secondaire);
  border-bottom: 2px solid var(--couleur-bordure);
}
.table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--couleur-fond-alt) 55%, var(--couleur-surface)); }
.table tbody tr:hover { background: var(--couleur-fond-alt); }

.form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: var(--espace); }

/* Enregistrement d'une fiche longue (redaction d'un article, plusieurs
   langues a la suite) : le bouton reste accessible sans avoir a remonter
   ou descendre toute la page. */
.form-actions--sticky {
  position: sticky;
  bottom: 0;
  background: var(--couleur-surface);
  border-top: 1px solid var(--couleur-bordure);
  padding: 0.75rem 0;
  margin-top: 1.5rem;
}
.locale-block + .locale-block { margin-top: calc(var(--espace) * 1.5); border-top: 1px solid var(--couleur-bordure); padding-top: var(--espace); }

/* Selecteur de langue de la barre du haut : un bouton drapeau par langue
   disponible autre que la langue courante. */
.lang-switch { display: inline-flex; gap: 0.25rem; align-items: center; margin: 0; }
.lang-btn { font-size: 1.05rem; line-height: 1; padding: 0.35rem 0.45rem; }

/* Informations legales sur la page Contact (remplace l'ancien pied de page). */
.contact-legal { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--couleur-bordure); }
.contact-legal h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.legal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; }
.legal-links a { text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }

/* Bouton d'action destructrice (supprimer). Utilise --couleur-erreur-texte,
   lisible sur le fond de page en clair comme en sombre. */
/* Bouton de suppression : une vraie bordure (rouge) et pas de soulignement,
   pour qu'il se lise comme un bouton et non comme un simple lien -- meme quand
   il est combine a .btn--ghost (qui met bordure transparente + souligne). */
.btn--danger:link, .btn--danger:visited, .btn--danger {
  color: var(--couleur-erreur-texte);
  border-color: var(--couleur-erreur-texte);
  text-decoration: none;
}
.btn--danger:hover { border-color: color-mix(in srgb, var(--couleur-erreur-texte) 55%, var(--couleur-bordure)); background: color-mix(in srgb, var(--couleur-erreur-texte) 12%, transparent); }

/* Liste "Mes enfants" : une ligne par enfant, alignee en colonnes, chaque
   ligne etant un formulaire (les selects s'enregistrent a la selection). */
/* Motif de refus/annulation affiche sous un statut (reservations...). */
.reason { font-size: 0.82rem; margin-top: 0.25rem; line-height: 1.4; }

.child-list { display: flex; flex-direction: column; gap: 0.55rem; }
.child-list__head, .child-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 1fr) minmax(6.5rem, 1fr) minmax(8.5rem, 1.3fr) minmax(8.5rem, 1.3fr) auto auto;
  gap: 0.55rem; align-items: center;
}
.child-list__head {
  padding: 0 0.55rem; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--couleur-texte-secondaire);
}
.child-row {
  padding: 0.65rem 0.55rem; border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon); background: var(--couleur-surface);
}
.child-row input, .child-row select { width: 100%; min-width: 0; }
.child-row__status { justify-self: start; }
.child-row__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }
@media (max-width: 56rem) {
  .child-list__head { display: none; }
  .child-row { grid-template-columns: 1fr 1fr; }
  .child-row__status, .child-row__actions { grid-column: 1 / -1; }
  .child-row__actions { justify-content: flex-start; }
}

.muted { color: var(--couleur-texte-secondaire); }
.inline { display: inline; }

/* Sous-navigation d'un module d'administration (cantine, garderie). Les
   entrees etaient auparavant de simples liens separes par des points
   medians : a l'ecran elles se coupaient en plein milieu d'un libelle
   ("Cantine —" sur une ligne, "impayes" sur la suivante). Chaque entree
   est donc insecable, et c'est la liste qui passe a la ligne. */
/* Sous-navigation d'une section (ex. Clubs : Reglage / Participants /
   Echeances). Presentee en "pilules" pour etre nettement identifiable comme
   un menu cliquable, la ou de simples liens en texte passaient inapercus. */
.subnav { margin: 0 0 1.5rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--couleur-bordure); }
.subnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.subnav li { white-space: nowrap; }
.subnav a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--couleur-texte-secondaire);
  text-decoration: none;
  background: var(--couleur-fond-alt);
  border: 1px solid var(--couleur-bordure);
}
.subnav a:visited { color: var(--couleur-texte-secondaire); }
.subnav a:hover,
.subnav a:focus-visible {
  color: var(--couleur-primaire);
  background: color-mix(in srgb, var(--couleur-primaire) 12%, transparent);
  border-color: var(--couleur-primaire);
}
.subnav a[aria-current="page"] {
  color: var(--couleur-primaire-contraste);
  background: var(--couleur-primaire);
  border-color: var(--couleur-primaire);
}

/* Liste de classes avec bouton de suppression (fiche ecole). */
.class-list { list-style: none; margin: 0; padding: 0; }
.class-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.3rem 0; border-bottom: 1px solid var(--couleur-bordure); }
.class-list li:last-child { border-bottom: none; }

/* Lignes jour+horaires d'un cycle de travail (fiche cycle agent). */
.cycle-day { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.2rem 0; }
.cycle-day label { min-width: 8rem; }
.cycle-day input[type="time"] { width: auto; }

body.maintenance { display: grid; place-items: center; min-height: 100vh; text-align: center; padding: var(--espace); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Editeur riche des articles (Trix). trix.css fournit la barre d'outils ;
   on force ici une hauteur de saisie confortable (par défaut ~5 lignes,
   jugé trop court en usage réel) et un fond cohérent avec les champs. */
trix-editor {
  /* ~20 lignes de saisie par defaut (a la demande des redacteurs). */
  min-height: 30rem;
  padding: 0.75rem;
  border: 1px solid var(--couleur-bordure-champ);
  border-radius: var(--rayon);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
}
trix-editor:empty::before { color: var(--couleur-texte-secondaire); }
trix-toolbar .trix-button-group { border-color: var(--couleur-bordure); }

/* Calendrier de restitution (lecture seule) : voir internal/front/calendar.go.
   Grille mensuelle rendue comme un vrai tableau accessible. Les marques
   portent toujours un libelle texte, la couleur n'est qu'un renfort
   (RGAA 3.2). */
.calendar { margin: var(--espace) 0; }
.calendar__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.calendar__title { margin: 0; font-size: 1.1rem; }
.calendar__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar__grid caption { position: absolute; left: -9999px; }
.calendar__grid th { padding: 0.4rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--couleur-texte-secondaire); border-bottom: 2px solid var(--couleur-bordure); }
.calendar__day { vertical-align: top; height: 4.5rem; padding: 0.25rem; border: 1px solid var(--couleur-bordure); }
.calendar__day--out { background: var(--couleur-fond-alt); }
.calendar__day--we { background: color-mix(in srgb, var(--couleur-fond-alt) 55%, var(--couleur-surface)); }
.calendar__day--today { outline: 2px solid var(--couleur-primaire); outline-offset: -2px; }
.calendar__num { display: block; font-size: 0.8rem; font-weight: 700; color: var(--couleur-texte-secondaire); }
.cal-mark { display: block; margin-top: 0.15rem; padding: 0.05rem 0.35rem; border-radius: var(--rayon); font-size: 0.72rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar__legend { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.85rem; }
.calendar__legend li { display: flex; align-items: center; gap: 0.4rem; }
.cal-dot { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; }

/* Types de marque, alignes sur la semantique des statuts. */
.cal-mark--leave, .cal-mark--reservation { background: color-mix(in srgb, var(--couleur-succes) 20%, var(--couleur-surface)); color: var(--couleur-succes); }
.cal-mark--pending { background: color-mix(in srgb, var(--couleur-alerte) 22%, var(--couleur-surface)); color: var(--couleur-alerte); }
.cal-mark--absence { background: color-mix(in srgb, var(--couleur-erreur) 20%, var(--couleur-surface)); color: var(--couleur-erreur); }
.cal-mark--work { background: color-mix(in srgb, var(--couleur-primaire) 18%, var(--couleur-surface)); color: var(--couleur-primaire); }
.cal-mark--holiday { background: color-mix(in srgb, var(--couleur-accent) 22%, var(--couleur-surface)); color: var(--couleur-texte); }
.cal-mark--meal { background: color-mix(in srgb, var(--couleur-accent) 22%, var(--couleur-surface)); color: var(--couleur-texte); }
.cal-mark--closed { background: color-mix(in srgb, var(--couleur-texte-secondaire) 20%, var(--couleur-surface)); color: var(--couleur-texte-secondaire); }
/* Jour ferme : leger grise, comme un week-end, pour le distinguer d'un
   jour ouvre sans reservation. */
.calendar__day--closed { background: color-mix(in srgb, var(--couleur-fond-alt) 55%, var(--couleur-surface)); }


.home-section { margin-bottom: 2rem; }
.home-section__title { font-size: 1.05rem; margin: 0 0 0.9rem; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); }
.tile {
  display: flex; align-items: center; gap: 0.9rem;
  height: 100%; padding: 1.05rem 1.1rem;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-carte);
  text-decoration: none; color: var(--couleur-texte);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.tile:visited { color: var(--couleur-texte); }
.tile:hover { box-shadow: var(--ombre-forte); transform: translateY(-2px); border-color: color-mix(in srgb, var(--couleur-primaire) 40%, var(--couleur-bordure)); }
.tile__badge {
  flex: none; width: 2.8rem; height: 2.8rem; border-radius: var(--rayon);
  display: grid; place-items: center;
  color: var(--couleur-primaire);
  background: color-mix(in srgb, var(--couleur-primaire) 12%, var(--couleur-surface));
}
.tile__badge svg { width: 24px; height: 24px; }
.tile__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.tile__label { font-weight: 700; font-size: 0.98rem; }
.tile__desc { color: var(--couleur-texte-secondaire); font-size: 0.85rem; line-height: 1.4; }
.tile__arrow { width: 20px; height: 20px; flex: none; margin-left: auto; color: var(--couleur-texte-secondaire); transition: transform 0.15s ease, color 0.15s ease; }
.tile:hover .tile__arrow { color: var(--couleur-primaire); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .tile, .tile__arrow { transition: none; }
  .tile:hover { transform: none; }
  .tile:hover .tile__arrow { transform: none; }
}

/* Documentation utilisateur (manuel client), voir internal/front/documentation.go. */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--espace);
}
.doc-card { display: flex; flex-direction: column; gap: 0.7rem; }
.doc-card__title {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0; font-size: 1.08rem;
}
.doc-card__title svg { width: 22px; height: 22px; flex: none; color: var(--couleur-primaire); }
.doc-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.doc-card__list li { border-top: 1px solid var(--couleur-bordure); }
.doc-card__list li:first-child { border-top: 0; }
.doc-card__list a { display: block; padding: 0.55rem 0.2rem; text-decoration: none; }
.doc-card__list a:hover { text-decoration: underline; }

/* Page d'une rubrique : sommaire lateral + contenu en largeur de lecture. */
.doc-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: calc(var(--espace) * 1.4); align-items: start; }
.doc-nav {
  position: sticky; top: calc(var(--espace) * 0.5);
  font-size: 0.9rem;
  border-right: 1px solid var(--couleur-bordure);
  padding-right: var(--espace);
}
.doc-nav__back { display: inline-block; margin-bottom: 0.8rem; font-weight: 600; }
.doc-nav__title {
  margin: 0.9rem 0 0.3rem; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--couleur-texte-secondaire);
}
.doc-nav ul { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.doc-nav li a { display: block; padding: 0.32rem 0.5rem; border-radius: var(--rayon); text-decoration: none; color: var(--couleur-texte); }
.doc-nav li a:hover { background: color-mix(in srgb, var(--couleur-primaire) 8%, transparent); }
.doc-nav li a.is-active { background: color-mix(in srgb, var(--couleur-primaire) 13%, transparent); color: var(--couleur-primaire); font-weight: 600; }

.doc-content h1 { margin-top: 0.2rem; }
.doc-content h2 {
  margin-top: 1.8rem; padding-top: 0.9rem;
  border-top: 1px solid var(--couleur-bordure);
  font-size: 1.3rem;
}
.doc-content h3 { margin-top: 1.2rem; font-size: 1.05rem; }
.doc-content p { line-height: 1.65; }
.doc-content ul, .doc-content ol { line-height: 1.6; padding-left: 1.3rem; }
.doc-content li { margin: 0.25rem 0; }

@media (max-width: 48rem) {
  .doc-layout { grid-template-columns: 1fr; }
  .doc-nav { position: static; border-right: 0; border-bottom: 1px solid var(--couleur-bordure); padding-right: 0; padding-bottom: 0.8rem; }
}

/* Assistant (chatbot) : bulle flottante + panneau. Voir ADR-033, layout.html
   et static/assistant.js. Les couleurs viennent des tokens : le mode sombre
   est pris en charge sans regle dediee. */
.assistant { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; }
.assistant__toggle {
  display: flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--couleur-primaire); color: var(--couleur-primaire-contraste);
  border: 0; cursor: pointer; box-shadow: var(--ombre-forte);
  transition: transform 0.15s ease;
}
.assistant__toggle:hover { transform: scale(1.05); }
.assistant__toggle:focus-visible { outline: 3px solid var(--couleur-focus); outline-offset: 2px; }
/* Sans JavaScript (pas de classe has-js, posee par theme-init.js), le bouton de
   la bulle n'ouvrirait rien : un lien vers la page complete /assistant prend sa
   place. Avec JavaScript, seul le bouton est affiche. */
.assistant__toggle--nojs { display: none; }
html:not(.has-js) .assistant__toggle--nojs { display: flex; }
html:not(.has-js) #assistant-toggle { display: none; }
.assistant__panel {
  position: absolute; right: 0; bottom: 4rem;
  width: min(22rem, calc(100vw - 2rem));
  display: flex; flex-direction: column; max-height: min(32rem, calc(100vh - 6rem));
  background: var(--couleur-surface); color: var(--couleur-texte);
  border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-forte); overflow: hidden;
}
/* Une regle auteur qui fixe display l'emporte sur l'attribut [hidden]
   (display:none de la feuille du navigateur) : sans cette regle, le panneau
   resterait affiche en permanence et le bouton de fermeture n'aurait aucun
   effet visible. */
.assistant__panel[hidden] { display: none; }
.assistant__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 0.7rem 0.9rem;
  background: var(--couleur-primaire); color: var(--couleur-primaire-contraste);
}
.assistant__title { margin: 0; font-size: 1rem; }
/* Bouton de fermeture sur l'en-tete fonce : fond transparent et trait clair
   (sinon l'icone herite du fond clair d'.icon-btn -> croix blanche invisible
   sur carre blanc). */
.assistant__close.icon-btn {
  background: transparent; border-color: transparent;
  color: var(--couleur-primaire-contraste);
}
.assistant__close.icon-btn:hover {
  background: rgba(255, 255, 255, 0.15); border-color: transparent;
  color: var(--couleur-primaire-contraste);
}
.assistant__log {
  flex: 1 1 auto; overflow-y: auto; padding: 0.9rem;
  display: flex; flex-direction: column; gap: 0.8rem;
}
.assistant__intro { margin: 0; color: var(--couleur-texte-secondaire); font-size: 0.9rem; }
.assistant__form {
  display: flex; gap: 0.4rem; padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--couleur-bordure);
}
.assistant__form input {
  flex: 1 1 auto; min-width: 0; padding: 0.5rem 0.7rem;
  border: 1px solid var(--couleur-bordure-champ); border-radius: var(--rayon);
  background: var(--couleur-surface); color: var(--couleur-texte); font: inherit;
}
.assistant__form input:focus-visible { outline: 2px solid var(--couleur-focus); outline-offset: 1px; }
.assistant__send {
  display: flex; align-items: center; justify-content: center;
  width: 2.4rem; flex: 0 0 auto; border: 0; border-radius: var(--rayon);
  background: var(--couleur-primaire); color: var(--couleur-primaire-contraste); cursor: pointer;
}
.assistant__send:focus-visible { outline: 3px solid var(--couleur-focus); outline-offset: 2px; }
.assistant__hint {
  margin: 0; padding: 0 0.9rem 0.7rem; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.assistant__clear {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--couleur-texte-secondaire); font: inherit; text-decoration: underline;
}
.assistant__clear:hover { color: var(--couleur-primaire); }
.assistant-turn { display: flex; flex-direction: column; gap: 0.4rem; }
.assistant-turn__q {
  align-self: flex-end; max-width: 90%; margin: 0;
  padding: 0.4rem 0.7rem; border-radius: var(--rayon);
  background: var(--couleur-fond-alt); color: var(--couleur-texte); font-size: 0.9rem;
}
.assistant-answers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.assistant-answer {
  padding: 0.55rem 0.7rem; border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon); background: var(--couleur-surface);
}
.assistant-answer__link { font-weight: 600; }
.assistant-answer__how { margin: 0.25rem 0 0; font-size: 0.87rem; color: var(--couleur-texte-secondaire); }
.assistant-answer__none { margin: 0; color: var(--couleur-texte-secondaire); font-size: 0.9rem; }

/* Page de repli sans JavaScript (/assistant). */
.assistant-page__form { margin: 1rem 0 1.5rem; }
.assistant-page__row { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.assistant-page__row input {
  flex: 1 1 auto; padding: 0.55rem 0.75rem;
  border: 1px solid var(--couleur-bordure-champ); border-radius: var(--rayon);
  background: var(--couleur-surface); color: var(--couleur-texte); font: inherit;
}

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

@media (max-width: 30rem) {
  .assistant { right: 0.75rem; bottom: 0.75rem; }
}

/* Calendrier interactif (reservation par clic). */
.calendar__resform { margin: 0; }
.calendar__context {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0;
}
.calendar__context label { font-weight: 600; font-size: 0.9rem; }
.calendar__context select {
  padding: 0.45rem 0.6rem; border: 1px solid var(--couleur-bordure-champ);
  border-radius: var(--rayon); background: var(--couleur-surface); color: var(--couleur-texte); font: inherit;
}
.calendar__btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
  width: 100%; min-height: 3rem; padding: 0.3rem 0.4rem;
  border: 1px solid transparent; border-radius: var(--rayon);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.calendar__btn--reserve:hover {
  border-color: var(--couleur-primaire);
  background: color-mix(in srgb, var(--couleur-primaire) 8%, var(--couleur-surface));
}
.calendar__btn--cancel {
  background: color-mix(in srgb, var(--couleur-primaire) 10%, var(--couleur-surface));
}
.calendar__btn--cancel:hover {
  border-color: var(--couleur-erreur);
  background: color-mix(in srgb, var(--couleur-erreur) 12%, var(--couleur-surface));
}
.calendar__btn--link, .calendar__btn--link:link, .calendar__btn--link:visited {
  color: inherit; text-decoration: none;
}
.calendar__btn--link:hover {
  border-color: var(--couleur-primaire);
  background: color-mix(in srgb, var(--couleur-primaire) 8%, var(--couleur-surface));
}
.calendar__btn:focus-visible { outline: 2px solid var(--couleur-focus); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .calendar__btn { transition: none; } }

/* Ligne de reservation ciblee depuis le calendrier (ancre #reservation-...) :
   brievement mise en evidence pour la reperer dans la liste. */
tr:target {
  background: color-mix(in srgb, var(--couleur-accent) 18%, var(--couleur-surface));
  outline: 2px solid var(--couleur-focus);
}
tr:target:focus-visible { outline: 2px solid var(--couleur-focus); }

/* Pied de page (copyright). */
.site-footer {
  border-top: 1px solid var(--couleur-bordure);
  padding: 1rem 1.25rem;
  text-align: center;
}
.site-footer p { margin: 0; color: var(--couleur-texte-secondaire); font-size: 0.85rem; }
/* Liens legaux (accessibilite, mentions, donnees personnelles), juste au-dessus
   du copyright : ils forment avec lui un seul pied de page visuel. */
.site-legal { border-top: 1px solid var(--couleur-bordure); padding: 1rem 1.25rem 0; }
.site-legal .legal-links { justify-content: center; font-size: 0.85rem; }
.site-legal + .site-footer { border-top: 0; padding-top: 0.5rem; }

/* Sous-pages (rubriques) : entree de navigation en retrait sous son parent. */
.sidebar__link--sub { padding-left: 2.6rem; font-size: 0.92em; }

/* Liste des sous-pages en bas d'une rubrique parente. */
.subpage-links { margin-top: 2rem; border-top: 1px solid var(--couleur-bordure); padding-top: 1rem; }
.subpage-links h2 { font-size: 1.05rem; }
.subpage-links ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.subpage-links li { margin: 0.3rem 0; }

/* Mode "Code HTML" des editeurs riches (articles, pages). */
.editor-source-bar { margin: 0.5rem 0 0.25rem; }
.html-source {
  width: 100%;
  min-height: 12rem;
  padding: 0.6rem 0.75rem;
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  border: 1px solid var(--couleur-bordure-champ);
  border-radius: var(--rayon);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
}

/* Formulaire repliable "ajouter un nouveau" : la liste reste visible par
   defaut, le formulaire se deplie au clic sur le resume (natif, accessible,
   sans JavaScript -- coherent avec la contrainte CSP script-src 'self'). */
.disclosure {
  margin-top: 1rem;
}
.disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
}
.disclosure > summary::-webkit-details-marker {
  display: none;
}
.disclosure > summary::before {
  content: "+";
  font-weight: 700;
  line-height: 1;
}
.disclosure[open] > summary::before {
  content: "\2212"; /* signe moins */
}
.disclosure[open] > summary {
  margin-bottom: 0.75rem;
}

/* Fournisseur SSO enregistre : bloc replie (nom, type, etat, nombre de
   correspondances), detail au clic. <details> natif : clavier et lecteurs
   d'ecran sans JavaScript. Sections titrees dans le detail (configuration,
   correspondances, suppression) pour ne plus coller un libelle au bouton
   precedent. */
.sso-provider__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  cursor: pointer;
  list-style: none;
}
.sso-provider__summary::-webkit-details-marker { display: none; }
.sso-provider__summary::before {
  content: "\25B8"; /* triangle ferme */
  font-size: 1.1rem;
  color: var(--couleur-primaire);
}
.sso-provider__details[open] > .sso-provider__summary::before { content: "\25BE"; }
.sso-provider__title { margin: 0; font-size: 1.25rem; }
.sso-provider__details[open] > .sso-provider__summary {
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--couleur-bordure);
}
/* Specificite renforcee : .card h3 (margin-top: 0) l'emportait et collait le
   titre au bouton precedent. Separateur pour bien marquer chaque section. */
.sso-provider .sso-provider__section {
  margin: 2rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--couleur-bordure);
  font-size: 1.1rem;
}
/* La premiere section suit directement l'en-tete deja souligne. */
.sso-provider .sso-provider__summary + .sso-provider__section,
.sso-provider .flash + .sso-provider__section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Grille tarifaire d'une salle : profils en colonnes, location et caution en
   lignes, une seule validation. Les champs prennent toute la cellule. */
.tariff-grid th[scope="col"] { text-align: left; }
.tariff-grid th[scope="row"] { white-space: nowrap; }
.tariff-grid input {
  width: 100%;
  min-width: 7rem;
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: var(--couleur-texte);
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure-champ);
  border-radius: var(--rayon);
}
.tariff-grid-form .btn { margin-top: var(--espace); }

/* Liste des fermetures d'une salle : periode a gauche, suppression a droite. */
.closure-list { list-style: none; padding: 0; margin: 0 0 var(--espace); }
.closure-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--couleur-bordure);
}

/* =========================================================================
   Refonte graphique (ADR-047) : quatre thèmes, structure des pages en
   « briques » (bandeau d'en-tête, titres de section à icône, sommaire « Sur
   cette page », cartes, états vides illustrés). Les règles ci-dessous
   complètent ou remplacent celles plus haut (cascade : elles viennent après).
   ========================================================================= */

html { scroll-padding-top: calc(var(--topbar-h) + 1rem); }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: var(--titre-poids);
  letter-spacing: var(--titre-tracking);
  line-height: 1.2;
  text-wrap: balance;
}
main h1 { font-size: var(--h1); margin: 0 0 1rem; }
main h2 { font-size: var(--h2); }
main h3 { font-size: var(--h3); }
a { text-underline-offset: 0.18em; }
.card { border-radius: var(--rayon-lg); }
:root[data-brand="tilleul"]:not([data-theme="dark"]) .card { border-color: transparent; }
@media (prefers-color-scheme: dark) { :root[data-brand="tilleul"]:not([data-theme="light"]) .card { border-color: var(--couleur-bordure); } }
.badge { border-radius: 999px; padding: 0.1rem 0.6rem; font-weight: 700; font-size: 0.78rem; color: var(--couleur-texte); }
.badge svg { width: 0.9rem; height: 0.9rem; vertical-align: -0.12em; }
.badge--primary { background: var(--couleur-primaire-doux); color: var(--couleur-primaire); border-color: color-mix(in srgb, var(--couleur-primaire) 30%, transparent); }
.badge--accent { background: var(--couleur-accent-doux); color: var(--couleur-texte); border-color: color-mix(in srgb, var(--couleur-accent) 45%, transparent); }
.chip { background: var(--couleur-fond-alt); color: var(--couleur-texte); display: inline-flex; align-items: center; gap: 0.3rem; }
.chip svg { width: 0.95rem; height: 0.95rem; color: var(--couleur-primaire); }

/* --- Barre du haut ------------------------------------------------------ */
.topbar { background: var(--couleur-surface); }
:root[data-brand="midi"] .topbar {
  box-shadow: none;
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--couleur-primaire) 0 60%, var(--couleur-accent) 60% 100%) 1;
}
:root[data-brand="tilleul"] .brand__name, :root[data-brand="bocage"] .brand__name {
  font-family: var(--police-serif); font-weight: 650; font-size: 1.12rem;
}
.brand { min-width: 0; }
.brand__name { overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 2.25rem; height: 2.25rem; font: inherit; }
.icon-btn svg, .topbar__help svg { width: 1.15rem; height: 1.15rem; flex: none; }
.topbar__help { gap: 0.35rem; }
.mode-switch { display: inline-flex; margin: 0; }
.mode-ico--moon { display: none; }
:root[data-theme="dark"] .mode-ico--moon { display: block; }
:root[data-theme="dark"] .mode-ico--sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mode-ico--moon { display: block; }
  :root:not([data-theme="light"]) .mode-ico--sun { display: none; }
}

/* Sélecteur de langue : drapeaux carrés « cartoon » (décoratifs, le nom de
   la langue reste le nom accessible du bouton). */
.lang-btn { padding: 0; }
.lang-flag { display: block; width: 1.45rem; height: 1.45rem; }

/* Sélecteur de thème : <details> natif (motif « disclosure », clavier et
   lecteurs d'écran sans JavaScript), un bouton d'envoi par thème. */
.theme-picker { position: relative; }
.theme-picker > summary { list-style: none; }
.theme-picker > summary::-webkit-details-marker { display: none; }
.theme-picker[open] > summary { color: var(--couleur-primaire); border-color: var(--couleur-primaire); background: var(--couleur-primaire-doux); }
.theme-picker__panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 50;
  width: 16rem; padding: 0.75rem;
  background: var(--couleur-surface); color: var(--couleur-texte);
  border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-forte);
}
.theme-picker__title { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; color: var(--couleur-texte-secondaire); }
.theme-picker__form { margin: 0; }
.theme-picker__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.theme-opt {
  display: flex; align-items: center; gap: 0.65rem; width: 100%;
  padding: 0.5rem 0.6rem; border: 1px solid transparent; border-radius: var(--rayon);
  background: none; color: var(--couleur-texte); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.theme-opt:hover { background: var(--couleur-primaire-doux); }
.theme-opt[aria-current="true"] { border-color: var(--couleur-primaire); background: var(--couleur-primaire-doux); }
.theme-opt__sw { display: inline-flex; flex: none; }
.theme-opt__sw i { display: block; width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.35); }
.theme-opt__sw i + i { margin-left: -0.3rem; }
.theme-opt--ardoise .theme-opt__sw i:first-child { background: #1b4965; }
.theme-opt--ardoise .theme-opt__sw i:last-child { background: #3f8f9c; }
.theme-opt--tilleul .theme-opt__sw i:first-child { background: #2a6656; }
.theme-opt--tilleul .theme-opt__sw i:last-child { background: #d98e3e; }
.theme-opt--bocage .theme-opt__sw i:first-child { background: #2d5a27; }
.theme-opt--bocage .theme-opt__sw i:last-child { background: #b7862b; }
.theme-opt--midi .theme-opt__sw i:first-child { background: #0d5c8c; }
.theme-opt--midi .theme-opt__sw i:last-child { background: #b94e28; }
.theme-opt__check { margin-left: auto; color: var(--couleur-primaire); }
.theme-opt__check svg { width: 1.1rem; height: 1.1rem; display: block; }

/* Entrées du tiroir de navigation réservées au téléphone (Documentation,
   Déconnexion), masquées sur grand écran où elles sont dans la barre. */
.sidebar__mobile-only { display: none; }
.sidebar__mobile-only form { margin: 0; }
.sidebar__mobile-only button.sidebar__link { width: 100%; border-top: 0; border-right: 0; border-bottom: 0; background: none; font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; text-align: left; }

/* --- Coquille de page : bandeau, corps, sommaire ------------------------ */
.page:has(> .page__hero) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hero" "body";
  gap: 1.75rem 2.25rem;
}
.page:has(> .page__hero):has(> .page__toc) {
  grid-template-columns: minmax(0, 1fr) var(--toc-w);
  grid-template-areas: "hero hero" "body toc";
}
.page__hero { grid-area: hero; min-width: 0; }
.page__body { grid-area: body; min-width: 0; }
.page__toc { grid-area: toc; }
.toc-m { display: none; grid-area: tocm; }

/* Bandeau d'en-tête (aussi pour les anciens <div class="hero">). */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 1.4rem 1.75rem 1.6rem; margin-bottom: 1.75rem;
  border-radius: var(--rayon-lg);
  background: var(--hero-fond); color: var(--hero-texte);
  border: 1px solid var(--hero-bordure);
}
.page__hero .hero, .article-detail .hero { margin-bottom: 0; }
.hero h1 { margin: 0; font-size: var(--h1); color: var(--hero-texte); }
.hero p { color: var(--hero-texte-2); margin: 0.6rem 0 0; line-height: 1.55; }
.hero a:not(.btn), .hero a:not(.btn):visited { color: var(--hero-lien); }
.hero .eyebrow { color: var(--hero-texte-2); margin: 0 0 0.2rem; }
.hero__inner { position: relative; z-index: 1; padding-right: 12rem; }
.hero__motif { position: absolute; z-index: 0; right: 0; top: 0; height: 100%; width: 20rem; color: var(--motif); pointer-events: none; }
:root[data-brand="bocage"] .hero__motif { width: 100%; height: 3.25rem; top: auto; bottom: 0; }
:root[data-brand="bocage"] .hero:has(> .hero__motif) { padding-bottom: 3.6rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; margin: 0 0 0.9rem; padding: 0; font-size: 0.85rem; color: var(--hero-texte-2); }
.crumbs li { display: inline-flex; align-items: center; gap: 0.3rem; }
.crumbs li + li::before { content: "\203A"; color: var(--hero-texte-2); }
.crumbs a { font-weight: 600; }
.crumbs [aria-current] { color: var(--hero-texte); font-weight: 600; }
.hero__row { display: flex; align-items: center; gap: 1rem; }
.hero__medal {
  flex: none; width: 3.6rem; height: 3.6rem; display: grid; place-items: center;
  border-radius: var(--rayon-lg); background: var(--medaille-fond); color: var(--medaille-texte);
  font-weight: 800; font-size: 1.4rem; font-family: var(--police);
}
.hero__medal svg { width: 1.9rem; height: 1.9rem; }
:root[data-brand="tilleul"] .hero__medal, :root[data-brand="midi"] .hero__medal { border-radius: 50%; }
:root[data-brand="bocage"] .hero__medal { border-radius: 1.6rem 0.35rem 1.6rem 0.35rem; }
.hero .hero__sub { font-size: 1.06rem; }
.facts { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.fact {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem;
  border-radius: 999px; font-size: 0.88rem; color: var(--hero-texte);
  background: color-mix(in srgb, var(--couleur-surface) 60%, var(--hero-fond));
  border: 1px solid color-mix(in srgb, var(--hero-texte) 14%, transparent);
}
.fact svg { width: 1.05rem; height: 1.05rem; flex: none; }
:root[data-brand="midi"]:not([data-theme="dark"]) .fact { background: color-mix(in srgb, #ffffff 14%, var(--hero-fond)); border-color: rgba(255, 255, 255, 0.3); }
@media (prefers-color-scheme: dark) { :root[data-brand="midi"]:not([data-theme="light"]) .fact { background: color-mix(in srgb, var(--couleur-surface) 60%, var(--hero-fond)); border-color: color-mix(in srgb, var(--hero-texte) 14%, transparent); } }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.1rem; }
.hero__actions form { margin: 0; }
.hero .btn--danger { background: var(--couleur-surface); }

/* Sommaire « Sur cette page » : liens d'ancre, collant sur ordinateur,
   replié dans un <details> sur téléphone. Un seul des deux est exposé à la
   fois (display:none retire l'autre de l'arbre d'accessibilité). */
.toc { position: sticky; top: calc(var(--topbar-h) + 1.25rem); }
.toc__title { margin: 0 0 0.6rem; font-family: var(--police); font-size: 0.75rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.1em; color: var(--couleur-texte-secondaire); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--couleur-bordure); }
.toc a, .toc a:visited {
  display: flex; align-items: center; gap: 0.55rem; margin-left: -2px; padding: 0.42rem 0.7rem;
  border-left: 3px solid transparent; border-radius: 0 var(--rayon) var(--rayon) 0;
  color: var(--couleur-texte-secondaire); text-decoration: none; font-size: 0.9rem; font-weight: 550;
}
.toc a svg, .toc-m a svg { width: 1.05rem; height: 1.05rem; flex: none; }
.toc a:hover { color: var(--couleur-primaire); background: color-mix(in srgb, var(--couleur-primaire) 7%, transparent); }
.toc a.is-active { color: var(--couleur-primaire); border-left-color: var(--couleur-primaire); background: color-mix(in srgb, var(--couleur-primaire) 11%, transparent); font-weight: 700; }
.toc ol + .toc__top { display: inline-flex; margin-top: 0.9rem; font-size: 0.85rem; }
.toc-m { border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); background: var(--couleur-surface); }
.toc-m > summary { display: flex; align-items: center; gap: 0.55rem; padding: 0.75rem 1rem; font-weight: 700; cursor: pointer; list-style: none; }
.toc-m > summary svg { width: 1.1rem; height: 1.1rem; }
.toc-m > summary::-webkit-details-marker { display: none; }
.toc-m > summary::after { content: ""; margin-left: auto; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.toc-m[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.toc-m ol { list-style: none; margin: 0; padding: 0 0.5rem 0.6rem; }
.toc-m a, .toc-m a:visited { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.6rem; border-radius: var(--rayon); text-decoration: none; color: var(--couleur-texte); font-weight: 550; }
.toc-m a svg { color: var(--couleur-primaire); }

/* Sections et titres à icône (la forme de la pastille change par thème). */
.sec { margin: 0 0 2.75rem; }
.sec:last-child { margin-bottom: 0.5rem; }
.sec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; margin-bottom: 1.1rem; }
.sec-title { display: flex; align-items: center; gap: 0.7rem; margin: 0; font-size: var(--h2); }
.sec-ico { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 8px; background: var(--couleur-primaire-doux); color: var(--couleur-primaire); }
.sec-ico svg { width: 1.3rem; height: 1.3rem; }
.sec-head__aside { margin: 0 0 0 auto; font-size: 0.92rem; color: var(--couleur-texte-secondaire); }
.sec-intro { margin: -0.4rem 0 1.1rem; color: var(--couleur-texte-secondaire); }
:root[data-brand="ardoise"] .sec-head::after { content: ""; order: 1; flex: 1 1 3rem; height: 1px; background: var(--couleur-bordure); }
:root[data-brand="ardoise"] .sec-head__aside { order: 2; margin-left: 0; }
:root[data-brand="tilleul"] .sec-ico { border-radius: 50%; background: var(--couleur-accent-doux); color: var(--couleur-accent-texte); }
:root[data-brand="bocage"] .sec-ico { border-radius: 1.2rem 0.3rem 1.2rem 0.3rem; background: var(--couleur-primaire); color: var(--couleur-primaire-contraste); }
/* Décor sous le titre : jamais en fond (image ou dégradé) du titre ni d'un
   pseudo-élément plus grand que lui, sinon axe (pa11y) ne peut pas juger le
   contraste du texte. Bocage : soulignement ondulé ; Midi : petit trait. */
:root[data-brand="midi"] .sec-head { position: relative; }
:root[data-brand="bocage"] .sec-title > span:last-child { text-decoration: underline wavy var(--couleur-accent); text-decoration-thickness: 2px; text-underline-offset: 0.4em; text-decoration-skip-ink: none; }
:root[data-brand="midi"] .sec-ico { border-radius: 50%; background: var(--couleur-primaire); color: var(--couleur-primaire-contraste); }
:root[data-brand="midi"] .sec-title { padding-bottom: 0.55rem; }
:root[data-brand="midi"] .sec-head::after { content: ""; position: absolute; left: 3.1rem; bottom: 0; width: 2.6rem; height: 4px; background: var(--couleur-accent); }

/* Pages d'administration (sans bandeau) : titres de section soulignés d'un
   filet de marque, sections espacées. */
main section + section { margin-top: 2rem; }
.page__body .sec + .sec { margin-top: 0; }
main section > h2:first-child { padding-bottom: 0.4rem; border-bottom: 2px solid color-mix(in srgb, var(--couleur-primaire) 25%, var(--couleur-bordure)); }

/* Panneaux (formulaires dans une carte). */
.panel { border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-lg); background: var(--couleur-surface); box-shadow: var(--ombre-carte); padding: 1.25rem 1.4rem; }
.panel + .panel { margin-top: 1rem; }
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel > h3 { display: flex; align-items: center; gap: 0.5rem; }
.panel > h3 svg { width: 1.2rem; height: 1.2rem; color: var(--couleur-primaire); }

/* Jours de la semaine en pastilles (réservation récurrente). */
.form fieldset.days { border: 0; padding: 0; }
.form fieldset.days legend { padding: 0; margin-bottom: 0.45rem; }
.day-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.form fieldset.days label.day-chip { position: relative; display: inline-flex; margin: 0; }
.day-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.day-chip span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; border: 1px solid var(--couleur-bordure-champ); border-radius: 999px; font-size: 0.9rem; font-weight: 600; background: var(--couleur-surface); }
.day-chip input:checked + span { background: var(--couleur-primaire); color: var(--couleur-primaire-contraste); border-color: var(--couleur-primaire); }
.day-chip input:checked + span::before { content: "\2713"; }
.day-chip input:focus-visible + span { outline: 3px solid var(--couleur-focus); outline-offset: 2px; }

/* États vides illustrés. */
.empty {
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center;
  padding: 1.5rem 1.75rem; border-radius: var(--rayon-lg);
  border: 1.5px dashed color-mix(in srgb, var(--couleur-primaire) 30%, var(--couleur-bordure));
  background: color-mix(in srgb, var(--couleur-primaire) 4%, var(--couleur-surface));
}
.empty + * { margin-top: 1.25rem; }
.empty__art { width: 7.5rem; height: auto; }
.empty__title { margin: 0 0 0.25rem; font-size: 1.12rem; font-weight: 750; font-family: var(--police-titre); }
.empty__text { margin: 0 0 0.9rem; color: var(--couleur-texte-secondaire); }
.empty__text:last-child { margin-bottom: 0; }
.empty__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.empty--min { padding: 0.9rem 1.1rem; gap: 1rem; }
.empty--min .empty__art { width: 3.5rem; }
.empty--min .empty__title { font-size: 1rem; font-family: var(--police); font-weight: 600; margin: 0; }
.ill-bg { fill: var(--couleur-primaire-doux); }
.ill-soft { fill: var(--couleur-accent-doux); }
.ill-surface { fill: var(--couleur-surface); }
.ill-line { fill: none; stroke: var(--vis-trait); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ill-acc { fill: var(--couleur-accent); }

/* Grilles de cartes (« briques »). */
.cards { gap: 1rem; }
.week, .prices, .kids, .rooms, .news, .steps, .slots, .sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.week { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.day { display: flex; flex-direction: column; gap: 0.6rem; }
.day__date { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 0.5rem; padding-bottom: 0.55rem; border-bottom: 1px dashed var(--couleur-bordure); }
.day__name { font-family: var(--police-titre); font-weight: var(--titre-poids); font-size: 1.1rem; }
.day__num { font-size: 0.85rem; color: var(--couleur-texte-secondaire); }
.dish { margin: 0; }
.dish__label { font-weight: 700; display: block; }
.dish__desc { font-size: 0.9rem; color: var(--couleur-texte-secondaire); display: block; }
.dish + .dish { padding-top: 0.6rem; border-top: 1px solid var(--couleur-bordure); }
.day--today { border: 2px solid var(--couleur-primaire); }
.prices { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); margin-bottom: 1rem; }
.price { display: flex; flex-direction: column; gap: 0.25rem; }
:root[data-brand="midi"] .price { border-top: 4px solid var(--couleur-accent); }
.price__label { font-weight: 700; }
.price__cond { font-size: 0.86rem; color: var(--couleur-texte-secondaire); }
.price__amount { margin-top: auto; padding-top: 0.6rem; font-family: var(--police-titre); font-weight: var(--titre-poids); font-size: 1.6rem; letter-spacing: -0.02em; color: var(--couleur-primaire); line-height: 1.15; }
.kids { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin-bottom: 1.25rem; }
.kid { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; align-items: center; align-content: start; }
.kid__avatar { grid-row: span 2; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; background: var(--couleur-accent-doux); color: var(--couleur-texte); }
.kid h3 { margin: 0; font-size: 1.15rem; }
.kid__meta { margin: 0; font-size: 0.9rem; color: var(--couleur-texte-secondaire); }
.kid__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.7rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--couleur-bordure); }
.kid__foot .btn { margin-left: auto; }
.notice { grid-column: 1 / -1; display: flex; gap: 0.5rem; margin: 0.6rem 0 0; padding: 0.55rem 0.75rem; border-radius: var(--rayon); font-size: 0.87rem; background: color-mix(in srgb, var(--couleur-alerte) 10%, var(--couleur-surface)); color: var(--couleur-texte); border-left: 3px solid var(--couleur-alerte); }
.notice svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--couleur-alerte); margin-top: 0.15rem; }
.slots { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.slot { display: flex; flex-direction: column; gap: 0.3rem; }
.slot__name { font-weight: 700; font-size: 1.05rem; }
.slot__hours { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--couleur-texte-secondaire); }
.slot__hours svg { width: 1rem; height: 1rem; }
.slot__price { font-family: var(--police-titre); font-weight: var(--titre-poids); font-size: 1.3rem; color: var(--couleur-primaire); }
.sessions { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.session { display: flex; flex-direction: column; gap: 0.35rem; }
.session h4, .session h3 { margin: 0; font-size: 1.05rem; }
.session p { margin: 0; }
.session .disclosure, .session .form { margin-top: 0.6rem; }
.activity-group > h3 { display: flex; align-items: center; gap: 0.5rem; }

/* Salles. */
.rooms { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; }
.room { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.room__visual { position: relative; aspect-ratio: 16 / 7; background: var(--vis-ciel); }
.room__visual > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.room__cap { position: absolute; left: 0.75rem; top: 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; background: var(--couleur-surface); color: var(--couleur-texte); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.room__cap svg { width: 1rem; height: 1rem; }
.room__body { padding: 1rem 1.2rem 0; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.room h3 { margin: 0; font-size: 1.25rem; }
.room h3 a, .news__item h3 a, .room h3 a:visited, .news__item h3 a:visited { color: var(--couleur-texte); text-decoration: none; }
.room h3 a:hover, .news__item h3 a:hover { color: var(--couleur-primaire); text-decoration: underline; }
.room__excerpt { margin: 0; font-size: 0.95rem; }
.room__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 1rem; padding: 0.85rem 1.2rem; border-top: 1px solid var(--couleur-bordure); background: color-mix(in srgb, var(--couleur-fond-alt) 45%, var(--couleur-surface)); }
.room__price { margin: 0; font-size: 0.82rem; color: var(--couleur-texte-secondaire); line-height: 1.25; }
.room__price strong { display: block; font-size: 1.2rem; color: var(--couleur-texte); font-family: var(--police-titre); font-weight: var(--titre-poids); }
.steps { counter-reset: step; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.step { counter-increment: step; }
.step::before { content: counter(step); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: 0.7rem; border-radius: 50%; background: var(--couleur-primaire); color: var(--couleur-primaire-contraste); font-weight: 800; }
.step h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.step p { margin: 0; font-size: 0.92rem; color: var(--couleur-texte-secondaire); }

/* Actualités. */
.news { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; }
.news__item { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.news__item--pinned { grid-column: 1 / -1; }
@media (min-width: 60rem) {
  .news__item--pinned { flex-direction: row; }
  .news__item--pinned .news__visual { flex: 0 0 42%; aspect-ratio: auto; min-height: 13rem; }
}
.news__visual { position: relative; aspect-ratio: 16 / 7; background: var(--vis-ciel); }
.news__visual > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.news__body { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.news__item h3 { margin: 0; font-size: 1.15rem; }
.news__item--pinned h3 { font-size: 1.5rem; }
.news__item p { margin: 0; }
.news__more { margin-top: auto !important; padding-top: 0.3rem; font-weight: 650; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin: 0; font-size: 0.86rem; color: var(--couleur-texte-secondaire); }
.meta svg { width: 1rem; height: 1rem; }
.meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.hero .meta { color: var(--hero-texte-2); margin-top: 0.7rem; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin: 0 0 1.5rem; }
.filter-bar .field { margin: 0; min-width: min(100%, 16rem); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; }
.pager p { margin: 0; }
.article-detail { display: grid; gap: 1.5rem; }
.article-body { padding: 1.5rem 1.75rem; }
.article-body > :first-child { margin-top: 0; }
.article-body img { max-width: 100%; height: auto; }
.subpage-links { margin-top: 0; border-top: 0; padding-top: 0; }

/* Porte-monnaie : solde en carte. */
.balance-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 2rem; margin-bottom: 2rem; }
.balance-card p { margin: 0; }
.balance-card__amount { font-family: var(--police-titre); font-weight: var(--titre-poids); font-size: 2rem; color: var(--couleur-primaire); line-height: 1.1; }

/* Tableaux : enveloppe en carte. */
.table-scroll { border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-lg); background: var(--couleur-surface); box-shadow: var(--ombre-carte); }
.calendar .table-scroll { border: 0; box-shadow: none; background: none; border-radius: 0; }
.table thead th { background: var(--couleur-fond-alt); border-bottom: 1px solid var(--couleur-bordure); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--couleur-fond-alt) 40%, var(--couleur-surface)); }

/* --- Calendrier (mis en forme) ----------------------------------------- */
.calendar { margin: 0; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-lg); background: var(--couleur-surface); box-shadow: var(--ombre-carte); }
.calendar__title { font-size: 1.2rem; text-transform: capitalize; }
.calendar__head .btn { width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; border-color: var(--couleur-bordure-champ); text-decoration: none; font-size: 1.3rem; }
.calendar__grid { border-collapse: separate; border-spacing: 4px; }
.calendar__grid th { border-bottom: 0; font-size: 0.74rem; font-weight: 750; letter-spacing: 0.06em; }
.calendar__day { height: 4.6rem; padding: 0.3rem 0.4rem; border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); background: var(--couleur-surface); }
.calendar__day--out { border-color: transparent; background: transparent; }
.calendar__day--we { background: var(--couleur-fond-alt); border-color: transparent; }
.calendar__day--closed { background: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--couleur-texte-secondaire) 12%, transparent) 7px 9px), var(--couleur-fond-alt); border-color: transparent; }
.calendar__day--today { outline: 0; box-shadow: inset 0 0 0 2px var(--couleur-primaire); }
.calendar__day--today .calendar__num { color: var(--couleur-primaire); }
.calendar__day:has(> .calendar__btn) { padding: 0; }
.calendar__btn { height: 100%; min-height: 4.5rem; padding: 0.3rem 0.4rem; }
.calendar__btn--reserve:hover { background: var(--couleur-primaire-doux); }
.calendar__btn--cancel { background: color-mix(in srgb, var(--couleur-succes) 9%, var(--couleur-surface)); }
.calendar__btn--cancel:hover { border-color: var(--couleur-erreur-texte); background: color-mix(in srgb, var(--couleur-erreur-texte) 12%, var(--couleur-surface)); }
.cal-mark { border-radius: 999px; font-weight: 700; padding: 0.05rem 0.45rem; max-width: 100%; }
.cal-mark--leave, .cal-mark--reservation { background: color-mix(in srgb, var(--couleur-succes) 16%, var(--couleur-surface)); color: var(--couleur-succes); }
.cal-mark--closed { background: var(--couleur-surface); color: var(--couleur-texte-secondaire); border: 1px solid var(--couleur-bordure); }
.calendar__legend { color: var(--couleur-texte-secondaire); }
.cal-dot { width: 1rem; height: 1rem; border-radius: 4px; border: 1px solid var(--couleur-bordure); }

/* --- Accueil ------------------------------------------------------------ */
.home-section { margin-bottom: 2.25rem; }
.tile { background: var(--couleur-surface); border-radius: var(--rayon-lg); }
.tile__badge { background: var(--couleur-primaire-doux); }
:root[data-brand="tilleul"] .tile__badge { border-radius: 50%; background: var(--couleur-accent-doux); color: var(--couleur-accent-texte); }
:root[data-brand="bocage"] .tile__badge { border-radius: 1.2rem 0.3rem 1.2rem 0.3rem; background: var(--couleur-primaire); color: var(--couleur-primaire-contraste); }
:root[data-brand="midi"] .tile__badge { border-radius: 50%; background: var(--couleur-primaire); color: var(--couleur-primaire-contraste); }

/* --- Téléphone et fenêtre étroite --------------------------------------- */
@media (max-width: 60rem) {
  .topbar { padding: 0 0.75rem; gap: 0.5rem; }
  .topbar__actions { gap: 0.35rem; }
  .topbar__doc, .topbar__logout { display: none; }
  .topbar__help-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar__help { width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--couleur-bordure); text-decoration: none; }
  .sidebar__mobile-only { display: block; }
  .has-js .sidebar {
    position: fixed; z-index: 45; top: var(--topbar-h); bottom: 0; left: 0;
    width: min(20rem, 86vw); min-height: 0; overflow-y: auto;
    border-right: 1px solid var(--couleur-bordure); box-shadow: 8px 0 30px rgba(0, 0, 0, 0.25);
  }
  .sidebar__nav { position: static; max-height: none; }
  .theme-picker__panel { position: fixed; top: calc(var(--topbar-h) + 0.25rem); left: 0.75rem; right: 0.75rem; width: auto; }
  .workspace { padding: 1rem 1rem 5rem; }
  .page:has(> .page__hero), .page:has(> .page__hero):has(> .page__toc) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "tocm" "body"; gap: 1rem; }
  .page__toc { display: none; }
  .toc-m { display: block; }
  .hero { padding: 1.1rem 1.1rem 1.25rem; }
  .hero__inner { padding-right: 0; }
  .hero__motif { width: 6.5rem; height: 6.5rem; opacity: 0.5; }
  :root[data-brand="bocage"] .hero__motif { width: 100%; height: 2.4rem; opacity: 1; }
  :root[data-brand="bocage"] .hero:has(> .hero__motif) { padding-bottom: 2.9rem; }
  .hero__row { align-items: flex-start; }
  .hero__medal { width: 2.9rem; height: 2.9rem; font-size: 1.15rem; }
  .hero__medal svg { width: 1.5rem; height: 1.5rem; }
  .hero .hero__sub { font-size: 1rem; }
  .sec { margin-bottom: 2.1rem; }
  .sec-ico { width: 2.1rem; height: 2.1rem; }
  .empty { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 1.25rem; }
  .empty--min { grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
  .empty__actions { justify-content: center; }
  .empty__art { width: 6rem; }
  .week { grid-template-columns: 1fr; }
  .prices { grid-template-columns: 1fr 1fr; }
  .price__amount { font-size: 1.35rem; }
    .kid__foot .btn { margin-left: 0; }
  .article-body { padding: 1.1rem; }
  .calendar { padding: 0.75rem 0.5rem; }
  .calendar__grid { border-spacing: 2px; }
  .calendar__grid th { font-size: 0.68rem; letter-spacing: 0; }
  .calendar__day { height: 3.2rem; padding: 0.2rem; }
  .calendar__btn { min-height: 3.1rem; padding: 0.2rem 0.25rem; align-items: center; }
  .calendar__day > .calendar__num { text-align: center; }
  /* Pastille à la place de l'étiquette : l'information reste dans le nom
     accessible du bouton, dans son infobulle et dans la légende. */
  .cal-mark { width: 0.6rem; height: 0.6rem; padding: 0; margin: 0.15rem auto 0; border-radius: 50%; font-size: 0; line-height: 0; color: transparent; border: 0; overflow: hidden; }
  .cal-mark--reservation, .cal-mark--leave { background: var(--couleur-succes); }
  .cal-mark--pending { background: var(--couleur-alerte); }
  .cal-mark--absence { background: var(--couleur-erreur-texte); }
  .cal-mark--work { background: var(--couleur-primaire); }
  .cal-mark--holiday, .cal-mark--meal { background: var(--couleur-accent); }
  .cal-mark--closed { background: var(--couleur-texte-secondaire); }
  .table th, .table td { padding: 0.55rem 0.6rem; }
}
@media (max-width: 30rem) {
  .prices { grid-template-columns: 1fr; }
  .brand__name { display: none; }
  .topbar__actions .btn--sm { padding: 0.42rem 0.6rem; }
  .icon-btn, .topbar__help { width: 2.1rem; height: 2.1rem; }
  .topbar { gap: 0.35rem; }
  .topbar__actions { gap: 0.25rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .room, .news__item { transition: box-shadow 0.15s ease, transform 0.15s ease; }
  .room:hover, .news__item:hover { transform: translateY(-2px); box-shadow: var(--ombre-survol); }
}

/* Étiquette au-dessus d'un titre (bandeau d'en-tête, accueil). */
.eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.74rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--couleur-texte-secondaire);
}

/* Périodes indisponibles d'une salle. */
.busy-list { list-style: none; margin: 0; padding: 0.4rem 1.2rem; }
.busy-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--couleur-bordure); }
.busy-list li:last-child { border-bottom: 0; }
.btn { white-space: nowrap; }
.btn svg { width: 1.05rem; height: 1.05rem; flex: none; }
/* Taille par défaut des icônes en ligne (fonction icon) : toujours bornée,
   chaque contexte la précise (spécificité nulle, n'écrase rien). */
:where(svg.tile__icon) { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; }
.activity-group > h3 svg { color: var(--couleur-primaire); }
.btn--ghost { background: transparent; }
.calendar__day--out.calendar__day--closed, .calendar__day--out.calendar__day--we { background: transparent; }
/* Champs hors .field (lignes éditables, filtres, tableaux d'administration) :
   style par défaut thémé, spécificité nulle (toute règle dédiée l'emporte). */
:where(main) :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
  padding: 0.45rem 0.6rem;
  font: inherit;
  color: var(--couleur-texte);
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure-champ);
  border-radius: var(--rayon);
}
/* Légende de tableau : conservée pour les lecteurs d'écran, masquée à l'écran
   (le titre de la section la donne déjà). */
.table-scroll .table > caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Page Habitants (comptes au guichet, ADR-051). */
.list-cards { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.list-cards .card h3 { margin-top: 0; }
.break-all { word-break: break-all; }

/* Utilitaires (remplacent les attributs style="" : la CSP n'admet plus de
   style en ligne, ADR-053). */
.mt-sm { margin-top: 0.6rem; }
.mt-md { margin-top: 0.8rem; }
.mt-lg { margin-top: 1rem; }
.text-xs { font-size: 0.8rem; }
.file-input-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Régie (ADR-056) : tableaux de montants alignés à droite, chiffres de même
   largeur ; un montant négatif garde son signe « - » (l'information ne
   repose jamais sur la seule couleur, RGAA 3.2). */
.table--num td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table--num td.text-left { text-align: left; white-space: normal; }
.table--num tfoot th, .table--num tfoot td { font-weight: 700; border-top: 2px solid var(--couleur-bordure); }
.amount--negative { color: var(--couleur-erreur-texte); font-weight: 700; }
.regie-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.75rem 1.5rem; margin: 0 0 1rem; }
.regie-figures dt { color: var(--couleur-texte-secondaire); font-size: 0.9rem; }
.regie-figures dd { margin: 0.15rem 0 0; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* Journal d'audit (ADR-058) : codes d'action et identifiants en police à
   chasse fixe, longs identifiants coupés plutôt que de déborder ; état
   avant/après en JSON indenté, défilant horizontalement au clavier
   (tabindex sur le bloc). */
.audit-table code, .audit-break code { font-size: 0.85rem; overflow-wrap: anywhere; }
.audit-table td, .audit-table th { vertical-align: top; }
.audit-break { overflow-wrap: anywhere; }
.audit-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem 1.5rem; }
.audit-states h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.audit-json { margin: 0; padding: 0.9rem 1rem; max-height: 32rem; overflow: auto; background: var(--couleur-fond-alt); color: var(--couleur-texte); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); font-size: 0.85rem; line-height: 1.45; white-space: pre; }
.audit-json:focus-visible { outline: 3px solid var(--couleur-focus); outline-offset: 2px; }