/* ============================================================
   MUZY — socle commun, chargé sur TOUTES les pages.

   Les jetons de la charte vivent ici et nulle part ailleurs :
   dupliqués dans muzy.css et home.css, ils avaient déjà divergé,
   et l'accueil se retrouvait sans l'échelle typographique — donc
   avec tous ses textes rabattus sur 16px.
   ============================================================ */

:root {
  --marine: #071F32;
  --marine-2: #0C2C46;
  --marine-deep: #04131F;
  --marine-80: rgba(7,31,50,0.80);
  --marine-55: rgba(7,31,50,0.55);
  --marine-10: rgba(7,31,50,0.08);
  /* Accent sarcelle : assez bleu pour s'accorder au marine des sections
     pleine largeur, assez vert pour s'en distinguer. Il a remplacé le rouge
     en septembre 2026 — jugé trop présent, et à 4,83 tout juste au-dessus du
     minimum de contraste. Le sarcelle est à 6,47 sur le fond de page. */
  --accent: #0C6469;
  --accent-fonce: #084A4E;
  --accent-clair: #46A8AD;  /* le seul qui tienne sur fond marine : 5,97 */
  --accent-pale: #EAF4F4;   /* fond d'alerte discret */

  /* Le fil PanneauPocket garde le rouge d'origine. Ce n'est pas un reste de
     l'ancienne charte : c'est un canal distinct — des alertes poussées sur les
     téléphones — et lui laisser la couleur d'accent du site l'aurait fondu
     dans l'éditorial. Le rouge dit « information du jour », le sarcelle dit
     « le site ». */
  --rouge-fil: #D22638;
  --rouge-fil-fonce: #A81628;
  --vert-valide: #1D7A45; /* état « publié / validé » — 5.35:1 sur blanc */
  --or: #E7C9A0;
  --bleu-lien: #1B4FA8;
  /* Les fonds ont quitté le blanc pur et la pierre chaude : sur une dalle mal
     réglée, le blanc « brûle » et les séparations disparaissent. Les cartes,
     elles, restent en blanc franc — c'est l'écart entre la carte et le fond
     qui dessine les blocs. */
  --fond: #F4F8FC;          /* fond de page */
  --pierre: #EAF1F8;
  --pierre-2: #DEE9F3;
  --sable: #C8D8E6;
  --blanc: #FFFFFF;         /* blanc franc : cartes, encarts, modales */
  --texte: #16242E;
  --gris: #56646E;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-sm: 0 2px 10px rgba(7,31,50,0.06);
  --shadow-md: 0 16px 40px rgba(7,31,50,0.12);
  --shadow-lg: 0 34px 80px rgba(7,31,50,0.20);
  --maxw: 1280px;
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  /* Échelle typographique — 10 crans, ancrés sur 1rem = 16px.
     Toute nouvelle taille passe par un de ces crans. */
  --t-4xs: 0.58rem;  /* micro-libellés très interlettrés : logo, mois abrégés, pictos */
  --t-3xs: 0.68rem;
  --t-2xs: 0.75rem;
  --t-xs: 0.82rem;
  --t-sm: 0.9rem;
  --t-base: 1.0rem;
  --t-md: 1.1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.4rem;
  --t-2xl: 1.6rem;
  --t-3xl: 1.9rem;

  /* Blancs de texte — trois niveaux de hiérarchie sur fond sombre. */
  --blanc-fort: rgba(255,255,255,0.92);
  --blanc-moyen: rgba(255,255,255,0.75);
  --blanc-faible: rgba(255,255,255,0.58);
  /* Le tricolore du bandeau d'accueil n'est pas un accent de charte mais une
     identité : il ne suit donc pas l'accent quand celui-ci change. Le rouge
     est resté rouge quand le reste est passé au sarcelle. */
  --bleu-drapeau: #0055A4;  /* le bleu du drapeau, plus profond que celui des liens */
  --rouge-drapeau: #EF4135; /* le rouge du drapeau */
}

/* Texte réservé aux lecteurs d'écran. Il reste dans le flux — un
   « display: none » le retirerait aussi de la synthèse vocale — mais n'occupe
   qu'un pixel, sans déborder ni décaler quoi que ce soit. Le calendrier de la
   salle des fêtes s'en sert pour dire « salle occupée » sans écrire la mention
   dans chaque case. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   MUZY — composants rendus par l'en-tête et le pied de page,
   donc présents sur TOUTES les pages : accueil comprise.
   Ils ne peuvent pas vivre dans muzy.css (pages intérieures)
   ni dans home.css (accueil), sous peine de n'être stylés
   qu'à moitié — c'est ce qui laissait le bouton de recherche
   sans style sur l'accueil.
   ============================================================ */

/* — Recherche plein écran — */
#search { position: fixed; inset: 0; background: #fff; z-index: 300; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: all 0.28s var(--ease); }
#search.open { opacity: 1; visibility: visible; transform: translateY(0); }
.search-head { display: flex; align-items: center; gap: 14px; padding: 16px clamp(18px,4vw,44px); border-bottom: 1px solid var(--sable); }
.search-field { flex: 1; display: flex; align-items: center; gap: 12px; background: var(--pierre); padding: 0 20px; height: 56px; border-radius: var(--r-md); }
.search-field svg { opacity: 0.4; flex-shrink: 0; }
.search-field input { flex: 1; border: none; background: none; outline: none; font-family: 'Fraunces', Georgia, serif; font-size: var(--t-lg); color: var(--marine); }
.search-cancel { background: none; border: none; cursor: pointer; font-weight: 700; color: var(--accent); font-size: var(--t-sm); }
.search-body { flex: 1; overflow-y: auto; padding: 36px clamp(18px,4vw,44px); max-width: 900px; }
.search-body h3 { font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--marine-55); margin-bottom: 16px; }
.search-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.search-tags a { padding: 10px 18px; background: var(--pierre); border-radius: var(--r-sm); font-weight: 500; font-size: var(--t-sm); color: var(--marine); transition: all 0.25s ease; }
.search-tags a:hover { background: var(--marine); color: #fff; }
.search-links a { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--marine-10); color: var(--marine); font-size: var(--t-base); }
.search-links a::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.search-links a:hover { color: var(--accent); }

/* — Bouton de soumission de la recherche — */
.search-go { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 10px; padding: 11px 20px; border: 0; border-radius: var(--r-sm); background: var(--accent); color: #fff; font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--t-xs); font-weight: 700; cursor: pointer; transition: background 0.25s var(--ease); }
.search-go:hover { background: var(--accent-fonce); }
.search-go svg { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .search-go { padding: 11px 14px; font-size: 0; gap: 0; }
  .search-go svg { width: 18px; height: 18px; }
}

/* ------------------------------------------------------------------ */
/* Cibles tactiles — WCAG 2.5.8 : 24 × 24 px au minimum.               */
/* Les liens du site mesuraient 16 à 20 px de haut, dont les numéros   */
/* de téléphone et les courriels, qui sont précisément ce qu'on tape   */
/* depuis un téléphone. Le remplissage vertical sur un élément en      */
/* ligne agrandit la zone cliquable sans modifier la hauteur de ligne, */
/* donc sans rien déplacer.                                            */
/* ------------------------------------------------------------------ */
@media (pointer: coarse), (max-width: 900px) {
  a[href^="tel:"], a[href^="mailto:"] { padding: 6px 2px; margin: 0 -2px; }
  .footer ul li a, .breadcrumb a, .aside-card .a-item, .search-links a { padding-top: 5px; padding-bottom: 5px; }
  .footer ul li { margin-bottom: 4px; }
  .search-cancel { padding: 8px 6px; margin: -8px -6px; }
  .footer-bottom-links a, .footer-credit a { padding-top: 4px; padding-bottom: 4px; display: inline-block; }
  /* Une carte entière devient tapable : viser un titre de 22px de haut au pouce
     est inconfortable, alors que la carte fait toute la largeur. */
  .p-card { position: relative; }
  .p-card h3 a::after { content: ''; position: absolute; inset: 0; }
  /* Un lien seul dans un item de liste : c'est une entrée de navigation, pas un
     lien dans une phrase — il ne bénéficie donc pas de l'exemption WCAG. */
  .page-content li > a:only-child { padding-top: 3px; padding-bottom: 3px; }
  .fil-toutes { padding-top: 4px; padding-bottom: 4px; }
  /* Le plan du site est fait pour être parcouru au pouce : ses liens doivent
     offrir une cible d'au moins 24 px, sans écarter les lignes pour autant. */
  .plan-pages > li > a, .plan-sections a { display: inline-block; padding-top: 4px; padding-bottom: 4px; }
}


/* ------------------------------------------------------------------ */
/* Variantes de boutons utilisables partout                            */
/*                                                                      */
/* .btn et .btn-primary sont définis dans les deux feuilles de page ;   */
/* .btn-dark et .btn-outline ne l'étaient que dans muzy.css, donc       */
/* absents de l'accueil — c'est le même piège que .btn-ghost et le      */
/* bouton de recherche avant eux. Ils vivent ici désormais.             */
/*                                                                      */
/* .btn-ghost reste volontairement dupliqué : sur l'accueil il est      */
/* translucide au-dessus de la photo, ailleurs il est cerné sur fond    */
/* clair. Ce sont deux composants différents sous un même nom.          */
/* ------------------------------------------------------------------ */
.btn-dark { background: var(--marine); color: #fff; }
.btn-dark:hover { background: var(--accent); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--marine); border-color: var(--sable); }
.btn-outline:hover { border-color: var(--marine); background: var(--pierre); }