/* ==========================================================================
   MA COMMUNE LIVE - Moteur de génération de sites communaux
   base.css : la feuille de style de production
   --------------------------------------------------------------------------
   Vague 1 - les fondations.

   C'est LA feuille embarquée sur les sites générés. Elle ne contient aucune
   couleur en dur : tout passe par les variables de tokens.css, seul point de
   variation d'une commune à l'autre.

   Le J-Lab (demo-theming.html) charge cette feuille puis y ajoute son propre
   habillage (demo.css), qui n'est PAS repris en production.

   Ordre de chargement attendu :
     1. fonts.css    déclarations @font-face
     2. tokens.css   variables
     3. base.css     ce fichier

   Sommaire
     1.  Reset et base
     2.  Typographie
     3.  Liens et focus
     4.  Lien d'évitement
     5.  Mise en page
     6.  Boutons
     7.  Badges
     8.  Cartes génériques
     9.  Bloc sombre
     10. Icônes en CSS mask
     11. Formulaires (primitives génériques - non utilisées : mini-site en lecture seule)
     12. En-tête (logo + nom, sans menu)
     13. Bandeau d'alerte
     14. Fil d'Ariane
     15. Hero
     16. Accès rapides / tuiles de services
     17. Carte d'actualité
     18. Carte d'événement
     19. Annuaire
     20. Coordonnées et horaires (fiches)
     21. Encart application
     22. Pied de page
     23. États vides
     24. Vague 2 - listes et détails (retour, contenu riche, galerie, pagination)
     25. Utilitaires
   ========================================================================== */


/* ==========================================================================
   1. RESET ET BASE
   ========================================================================== */

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

/* Seules les listes stylées perdent leurs puces : une liste de contenu
   éditorial doit garder les siennes. */
ul[class], ol[class] { list-style: none; }

/* height:auto conserve le ratio quand width/height sont posés dans le HTML
   pour réserver la place et éviter le décalage de mise en page (CLS). */
img { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-texte);
  font-size: var(--taille-texte);
  line-height: var(--interligne);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ==========================================================================
   2. TYPOGRAPHIE
   Les tailles viennent des variables : l'échelle se règle sur :root.
   Échelle institutionnelle arbitrée en vague 0 (h1 de 32 à 48px).
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: var(--h1); font-weight: 800; }
h2 { font-size: var(--h2); font-weight: 700; }
h3 { font-size: var(--h3); font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: var(--h4); font-weight: 700; letter-spacing: 0; }

p { color: var(--text-mid); }
p + p { margin-top: var(--esp-4); }

.lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-mid);
  max-width: 62ch;
}


/* ==========================================================================
   3. LIENS ET FOCUS
   ========================================================================== */

/* Le soulignement est conservé : ne jamais signaler un lien par la seule
   couleur (RGAA 10.6). --primary-ink garantit 4.5:1 sur fond clair. */
a {
  color: var(--primary-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--duree);
}

a:hover { color: var(--primary-deep); text-decoration-thickness: 2px; }

/* Anneau non thémé, donc toujours contrasté quelle que soit la commune
   (RGAA 10.7). Appliqué à tout élément focusable, clavier compris. */
:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

/* Sur fond sombre, l'anneau marine deviendrait invisible. */
.bloc-sombre :focus-visible,
.pied :focus-visible { outline-color: var(--focus-inverse); }


/* ==========================================================================
   4. LIEN D'ÉVITEMENT
   Premier élément focusable de la page (RGAA 12.7). Hors écran au repos,
   ramené en vue à la prise de focus. Jamais display:none, sinon il devient
   inatteignable au clavier.
   ========================================================================== */

.lien-evitement {
  position: absolute;
  top: 0;
  left: var(--esp-5);
  z-index: 100;
  transform: translateY(-120%);
  background: var(--surface-dark);
  color: #FFFFFF;
  padding: var(--esp-3) var(--esp-5);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--duree);
}

.lien-evitement:focus {
  transform: translateY(0);
  color: #FFFFFF;
}


/* ==========================================================================
   5. MISE EN PAGE
   ========================================================================== */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

/* Variante étroite pour les contenus de lecture longue (article, page libre).
   Au-delà de ~70 caractères par ligne, la lecture se dégrade. */
.container--etroit { max-width: 760px; }

.section { padding: var(--section-y) 0; }
.section--lg   { padding: var(--section-y-lg) 0; }
.section--soft { background: var(--primary-soft); }
.section--warm { background: var(--bg-warm); }

/* Respiration avant le pied de page sur les pages internes : leur contenu
   est posé directement dans un .container (sans .section rythmée), il collerait
   sinon au footer. Sans effet sur l'accueil, dont le dernier bloc est une
   .section (donc pas un .container en enfant direct de <main>). */
main > .container:last-child { padding-bottom: var(--section-y); }

/* En-tête de section : titre à gauche, lien « tout voir » à droite.
   Le lien passe sous le titre en mobile. */
.section__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-5);
  margin-bottom: var(--esp-5);
}

.section__entete .lead { margin-top: var(--esp-2); }

.section__tout {
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}

.grille {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* Grilles à nombre de colonnes fixe au-delà du point de rupture.
   Minimum calé pour tenir 3 colonnes dans le container de 960px (912px utiles
   moins 2 gouttières de 24px => ~288px par carte) : au-delà de ~288px, auto-fit
   retomberait à 2 colonnes. En dessous (tablette, mobile) il passe à 2 puis 1. */
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }


/* ==========================================================================
   6. BOUTONS
   Le libellé du bouton principal utilise --texte-sur-primaire, calculé par
   le moteur : c'est ce qui garantit 4.5:1 même sur une couleur claire.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 14px 28px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duree), color var(--duree),
              border-color var(--duree), transform var(--duree);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--principal {
  background: var(--primary);
  color: var(--texte-sur-primaire);
}
.btn--principal:hover {
  background: var(--primary-dark);
  color: var(--texte-sur-primaire);
}
.btn--principal:active { background: var(--primary-deep); }

.btn--secondaire {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--secondaire:hover {
  border-color: var(--primary-ui);
  background: var(--primary-soft);
  color: var(--text);
}

/* Bouton posé sur un fond sombre : fond blanc, texte marine.
   La couleur de texte est réaffirmée au survol, sinon une règle de contexte
   plus spécifique (voir .bloc-sombre) peut la reprendre. */
.btn--sombre,
.btn--sombre:hover,
.btn--sombre:focus {
  background: #FFFFFF;
  color: var(--surface-dark);
}
.btn--sombre:hover { background: var(--bg-warm); }

/* Bouton secondaire posé sur un fond sombre (hero, encart application) :
   bordure claire et texte blanc, sinon la bordure --border-strong et le
   texte --text disparaîtraient sur le marine. */
.bloc-sombre .btn--secondaire,
.hero .btn--secondaire {
  border-color: rgba(255, 255, 255, .5);
  color: #FFFFFF;
}
.bloc-sombre .btn--secondaire:hover,
.hero .btn--secondaire:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #FFFFFF;
  color: #FFFFFF;
}


/* ==========================================================================
   7. BADGES DE RUBRIQUE (« eyebrow »)
   Texte en -ink : 12px gras n'est PAS du « texte large » au sens WCAG,
   il lui faut donc 4.5:1, y compris sur son propre fond pâle.
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary-ink);
  background: var(--primary-light);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

/* Variantes de rubrique, indépendantes de la couleur communale.
   Le texte utilise systématiquement la déclinaison -ink, jamais la couleur
   pleine : celle-ci est réservée aux aplats et aux icônes. */
.badge--blue   { color: var(--accent-blue-ink);   background: var(--accent-blue-soft); }
.badge--violet { color: var(--accent-violet-ink); background: var(--accent-violet-soft); }
.badge--green  { color: var(--accent-green-ink);  background: var(--accent-green-soft); }
.badge--orange { color: var(--accent-orange-ink); background: var(--accent-orange-soft); }
.badge--amber  { color: var(--accent-amber-ink);  background: var(--accent-amber-soft); }
.badge--rose   { color: var(--accent-rose-ink);   background: var(--accent-rose-soft); }


/* ==========================================================================
   8. CARTES GÉNÉRIQUES
   ========================================================================== */

.carte {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  transition: border-color var(--duree), box-shadow var(--duree),
              transform var(--duree);
}

/* :focus-within reproduit l'effet de survol quand on arrive au clavier :
   sans lui, la carte ne réagirait qu'à la souris. */
.carte:hover,
.carte:focus-within {
  border-color: var(--primary-ui);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.carte h3 { margin-bottom: var(--esp-2); }
.carte p  { font-size: 16px; }

/* Rend toute la carte cliquable sans piéger le clavier : seul le lien du
   titre reste focusable, sa zone de clic est étendue par ::after. */
.carte__lien { text-decoration: none; color: inherit; }
.carte__lien::after { content: ''; position: absolute; inset: 0; }

.carte__meta {
  font-size: 14px;
  color: var(--text-light);
  margin-top: var(--esp-3);
}


/* ==========================================================================
   9. BLOC SOMBRE
   ========================================================================== */

.bloc-sombre {
  background: var(--surface-dark);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: var(--esp-7);
}

/* Tous les niveaux de titre, pas seulement h2 et h3 : la règle globale
   « h1, h2, h3, h4 { color: var(--text) } » impose sinon le marine, qui
   l'emporte sur la couleur héritée du bloc et rend le titre invisible. */
.bloc-sombre h1,
.bloc-sombre h2,
.bloc-sombre h3,
.bloc-sombre h4 { color: #FFFFFF; }

.bloc-sombre p { color: rgba(255, 255, 255, .82); }

/* Les liens du bloc passent en blanc, SAUF les boutons : ceux-ci portent
   leur propre fond et gèrent donc leur propre couleur de texte. Sans le
   :not(.btn), un .btn--sombre (fond blanc) héritait d'un texte blanc. */
.bloc-sombre a:not(.btn) { color: #FFFFFF; }


/* ==========================================================================
   10. ICÔNES EN CSS MASK
   Éco-conception : pas de <svg> inline dans le DOM, la couleur reste
   pilotable via currentColor. Les icônes sont toujours décoratives,
   l'information est portée par le texte à côté.
   ========================================================================== */

.icone {
  display: inline-block;
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

.icone--lg { inline-size: 28px; block-size: 28px; }

.icone--agenda    { -webkit-mask-image: var(--ico-agenda);    mask-image: var(--ico-agenda); }
.icone--mairie    { -webkit-mask-image: var(--ico-mairie);    mask-image: var(--ico-mairie); }
.icone--alerte    { -webkit-mask-image: var(--ico-alerte);    mask-image: var(--ico-alerte); }
.icone--telephone { -webkit-mask-image: var(--ico-telephone); mask-image: var(--ico-telephone); }
.icone--recherche { -webkit-mask-image: var(--ico-recherche); mask-image: var(--ico-recherche); }
.icone--menu      { -webkit-mask-image: var(--ico-menu);      mask-image: var(--ico-menu); }
.icone--fermer    { -webkit-mask-image: var(--ico-fermer);    mask-image: var(--ico-fermer); }
.icone--document  { -webkit-mask-image: var(--ico-document);  mask-image: var(--ico-document); }
.icone--travaux   { -webkit-mask-image: var(--ico-travaux);   mask-image: var(--ico-travaux); }
.icone--commerce  { -webkit-mask-image: var(--ico-commerce);  mask-image: var(--ico-commerce); }
.icone--asso      { -webkit-mask-image: var(--ico-asso);      mask-image: var(--ico-asso); }
.icone--culture   { -webkit-mask-image: var(--ico-culture);   mask-image: var(--ico-culture); }
.icone--lieu      { -webkit-mask-image: var(--ico-lieu);      mask-image: var(--ico-lieu); }
.icone--horaires  { -webkit-mask-image: var(--ico-horaires);  mask-image: var(--ico-horaires); }
.icone--courriel  { -webkit-mask-image: var(--ico-courriel);  mask-image: var(--ico-courriel); }
.icone--ecole     { -webkit-mask-image: var(--ico-ecole);     mask-image: var(--ico-ecole); }
.icone--sante     { -webkit-mask-image: var(--ico-sante);     mask-image: var(--ico-sante); }
.icone--meteo     { -webkit-mask-image: var(--ico-meteo);     mask-image: var(--ico-meteo); }

/* Jeu d'icônes en data-URI. Traits de 2px, grille 24, style uniforme.
   La couleur %23000 n'a aucune importance : le masque n'en garde que la forme. */
:root {
  --ico-agenda:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E");
  --ico-mairie:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10 12 4l9 6M5 10v10h14V10M9 20v-6h6v6'/%3E%3C/svg%3E");
  --ico-alerte:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3zM12 9v5M12 17.5v.5'/%3E%3C/svg%3E");
  --ico-telephone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h4l2 5-2.5 1.5a12 12 0 0 0 5 5L15 12l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
  --ico-recherche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  --ico-menu:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --ico-fermer:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --ico-document:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
  --ico-travaux:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M5 20v-6h14v6M7 14 9 4h6l2 10'/%3E%3C/svg%3E");
  --ico-commerce:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16l-1 12H5zM8 8V6a4 4 0 0 1 8 0v2'/%3E%3C/svg%3E");
  --ico-asso:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 20v-1a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v1M16 14h1a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E");
  --ico-culture:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h7v15H4zM13 5h7v15h-7zM4 9h7M13 9h7'/%3E%3C/svg%3E");
  --ico-lieu:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-11a7 7 0 1 0-14 0c0 4.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
  --ico-horaires:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --ico-courriel:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  --ico-ecole:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 8 10-4 10 4-10 4z'/%3E%3Cpath d='M6 10v5c0 1.5 2.7 3 6 3s6-1.5 6-3v-5'/%3E%3C/svg%3E");
  --ico-sante:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3C/svg%3E");
  --ico-meteo:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}


/* ==========================================================================
   11. FORMULAIRES
   Label toujours visible et lié, jamais de placeholder en guise d'étiquette.
   L'erreur est annoncée par du texte, pas par la seule bordure (RGAA 3.1).
   ========================================================================== */

.champ { display: flex; flex-direction: column; gap: var(--esp-2); }

.champ__label { font-weight: 600; font-size: 16px; }

.champ__aide { font-size: 14px; color: var(--text-light); }

.champ__saisie {
  padding: 12px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--duree), box-shadow var(--duree);
}

.champ__saisie:hover { border-color: var(--text-light); }

.champ__saisie:focus-visible {
  border-color: var(--primary-ui);
  outline: var(--focus-width) solid var(--focus);
  outline-offset: 1px;
}

.champ--erreur .champ__saisie { border-color: var(--alerte-grave); border-width: 2px; }

.champ__erreur {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: 15px;
  font-weight: 600;
  color: var(--alerte-grave);
}


/* ==========================================================================
   12. EN-TÊTE
   --------------------------------------------------------------------------
   Périmètre réel : logo + nom de la commune UNIQUEMENT. Pas de menu de
   navigation, pas de recherche, pas de bouton mobile. La navigation du site
   passe par la grille de tuiles de l'accueil et les liens retour des pages
   internes (cf. CLAUDE.md §2bis). En-tête fixe sur toutes les pages.
   ========================================================================== */

.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 40;
}

.entete__haut {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  padding: var(--esp-4) 0;
}

/* Marque : blason + nom de la commune. Le lien englobe les deux, son
   intitulé accessible est complété par le sr-only « Accueil ». */
.entete__marque {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
}

.entete__marque:hover { color: var(--text); }

.entete__blason {
  inline-size: 48px;
  block-size: 48px;
  flex: none;
  object-fit: contain;
}

.entete__nom {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.entete__slogan {
  display: block;
  font-family: var(--font-texte);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-light);
  letter-spacing: 0;
}


/* ==========================================================================
   13. BANDEAU D'ALERTE
   --------------------------------------------------------------------------
   Bloc conditionnel, affiché seulement si une alerte est active.
   Le niveau de gravité est porté par un libellé texte ET une icône, jamais
   par la seule couleur (RGAA 3.1).

   role="alert" n'est justifié que pour une alerte apparue APRÈS le chargement.
   Pour une alerte présente au chargement, le rôle ferait interrompre la
   lecture sans raison : on s'en tient à une région nommée.
   ========================================================================== */

.bandeau-alerte {
  background: var(--accent-amber-soft);
  border-bottom: 3px solid var(--alerte-vigil);
}

.bandeau-alerte__corps {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  padding: var(--esp-4) 0;
}

.bandeau-alerte__icone {
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  color: var(--accent-amber-ink);
}

.bandeau-alerte__texte { flex: 1 1 auto; }

.bandeau-alerte__niveau {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-amber-ink);
}

/* Rendu de titre sans balise de titre : le bandeau précède le <h1>, un <h2>
   y créerait une hiérarchie inversée. */
.bandeau-alerte__titre {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  margin: var(--esp-1) 0 var(--esp-2);
}

.bandeau-alerte p { color: var(--text); font-size: 16px; }

.bandeau-alerte__dates {
  display: block;
  margin-top: var(--esp-2);
  font-size: 14px;
  color: var(--text-mid);
}

/* Déclinaisons par gravité. La couleur ne fait que redoubler le libellé texte.
   Le moteur expose QUATRE niveaux (cf. CLAUDE.md §2bis) :
   Critique = rouge, Haute = orange, Moyenne = ambre, Basse = bleu. */

/* Basse - bleu */
.bandeau-alerte--info,
.bandeau-alerte--basse {
  background: var(--accent-blue-soft);
  border-bottom-color: var(--alerte-info);
}
.bandeau-alerte--info .bandeau-alerte__icone,
.bandeau-alerte--info .bandeau-alerte__niveau,
.bandeau-alerte--basse .bandeau-alerte__icone,
.bandeau-alerte--basse .bandeau-alerte__niveau { color: var(--accent-blue-ink); }

/* Moyenne - ambre */
.bandeau-alerte--moyenne {
  background: var(--accent-amber-soft);
  border-bottom-color: var(--accent-amber);
}
.bandeau-alerte--moyenne .bandeau-alerte__icone,
.bandeau-alerte--moyenne .bandeau-alerte__niveau { color: var(--accent-amber-ink); }

/* Haute - orange */
.bandeau-alerte--haute {
  background: var(--accent-orange-soft);
  border-bottom-color: var(--accent-orange);
}
.bandeau-alerte--haute .bandeau-alerte__icone,
.bandeau-alerte--haute .bandeau-alerte__niveau { color: var(--accent-orange-ink); }

/* Critique - rouge */
.bandeau-alerte--grave,
.bandeau-alerte--critique {
  background: var(--accent-rose-soft);
  border-bottom-color: var(--alerte-grave);
}
.bandeau-alerte--grave .bandeau-alerte__icone,
.bandeau-alerte--grave .bandeau-alerte__niveau,
.bandeau-alerte--critique .bandeau-alerte__icone,
.bandeau-alerte--critique .bandeau-alerte__niveau { color: var(--accent-rose-ink); }


/* ==========================================================================
   14. FIL D'ARIANE
   Absent de la page d'accueil, présent sur toutes les pages internes.
   ========================================================================== */

.fil-ariane { padding: var(--esp-4) 0; border-bottom: 1px solid var(--border); }

.fil-ariane__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  font-size: 15px;
  list-style: none;
}

/* Le séparateur est décoratif : généré en CSS, jamais lu par la synthèse. */
.fil-ariane__liste li + li::before {
  content: '›';
  margin-right: var(--esp-2);
  color: var(--text-light);
}

.fil-ariane [aria-current="page"] { color: var(--text-mid); font-weight: 600; }


/* ==========================================================================
   15. HERO
   Bandeau d'accueil : nom de la commune, phrase de présentation, et le
   bloc météo / vigilance du jour.
   ========================================================================== */

.hero {
  position: relative;
  background: var(--surface-dark);
  color: #FFFFFF;
  overflow: hidden;
}

/* L'image est décorative (alt=""), le texte n'en dépend pas.
   Le voile marine garantit le contraste du texte par-dessus. */
.hero__image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: .35;
}

.hero__corps {
  position: relative;
  display: grid;
  gap: var(--esp-6);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  padding: var(--section-y-lg) 0;
}

.hero h1 { color: #FFFFFF; }

.hero__intro {
  color: rgba(255, 255, 255, .88);
  font-size: 20px;
  line-height: 1.5;
  max-width: 54ch;
  margin-top: var(--esp-4);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}

/* La variante claire du bouton secondaire sur fond sombre est mutualisée
   entre le hero et l'encart application : voir la section 6, Boutons. */

/* Carte météo. Les valeurs sont du texte, jamais une image seule. */
.meteo {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius);
  padding: var(--esp-5);
}

.meteo__titre {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgba(255, 255, 255, .75);
}

.meteo__temp {
  font-family: var(--font-titre);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  margin: var(--esp-3) 0 var(--esp-2);
}

.meteo__desc { color: rgba(255, 255, 255, .88); }

.meteo__vigilance {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--accent-green-soft);
  color: var(--accent-green-ink);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .hero__corps {
    grid-template-columns: 1fr;
    padding: var(--section-y) 0;
  }
}

/* Variantes du moteur de mini-sites (périmètre réel, cf. CLAUDE.md §2bis) :
   en-tête réduit au logo + nom, hero sans encart, sections et pied allégés. */
.entete--simple .entete__haut { justify-content: flex-start; }
.hero__corps--simple { grid-template-columns: 1fr; max-width: 60ch; }
.section--compacte { padding-block: var(--esp-7); }
.section__titre-simple { margin-bottom: var(--esp-5); }
.pied--simple .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4) var(--esp-6);
}
.pied--simple .pied__marque { margin: 0; }


/* ==========================================================================
   16. ACCÈS RAPIDES
   Raccourcis vers les démarches les plus demandées.
   ========================================================================== */

.acces-rapides {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  list-style: none;
}

.acces {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--esp-5);
  transition: border-color var(--duree), box-shadow var(--duree),
              transform var(--duree);
}

.acces:hover,
.acces:focus-within {
  border-color: var(--primary-ui);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.acces__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary-ink);
}

.acces__lien {
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 18px;
}

.acces__lien::after { content: ''; position: absolute; inset: 0; }

.acces p { font-size: 15px; }


/* ==========================================================================
   17. CARTE D'ACTUALITÉ
   --------------------------------------------------------------------------
   Deux origines possibles : la mairie, ou un acteur local (commerce,
   association, lieu culturel) dont la publication a été validée.
   La distinction est portée par un libellé texte explicite, pas seulement
   par un liseré de couleur.
   ========================================================================== */

.carte-actu {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--duree), box-shadow var(--duree),
              transform var(--duree);
}

.carte-actu:hover,
.carte-actu:focus-within {
  border-color: var(--primary-ui);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* width et height sont posés dans le HTML pour réserver la place :
   l'aspect-ratio garde le cadrage quelle que soit l'image fournie. */
.carte-actu__image {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--bg-warm);
}

.carte-actu__corps {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5);
}

.carte-actu__titre { font-size: var(--h3); }

.carte-actu__lien { text-decoration: none; color: inherit; }
.carte-actu__lien::after { content: ''; position: absolute; inset: 0; }

.carte-actu__chapo { font-size: 16px; margin: 0; }

.carte-actu__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin-top: auto;
  padding-top: var(--esp-2);
  font-size: 14px;
  color: var(--text-light);
}

/* Séparateur décoratif entre date et auteur. */
.carte-actu__meta > * + *::before {
  content: '·';
  margin-right: var(--esp-2);
}

/* Actualité publiée par un acteur local. Le liseré ne fait que redoubler
   la mention « Publié par ... » présente dans le texte. */
.carte-actu--acteur { border-left: 4px solid var(--accent-violet); }

.carte-actu__auteur-acteur {
  font-weight: 700;
  color: var(--accent-violet-ink);
}


/* ==========================================================================
   18. CARTE D'ÉVÉNEMENT
   La date est présentée en pastille, mais reste lisible en toutes lettres
   dans un <time datetime> pour la synthèse vocale et le référencement.
   ========================================================================== */

.carte-event {
  position: relative;
  display: flex;
  gap: var(--esp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--esp-4);
  transition: border-color var(--duree), box-shadow var(--duree),
              transform var(--duree);
}

.carte-event:hover,
.carte-event:focus-within {
  border-color: var(--primary-ui);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.carte-event__date {
  flex: none;
  inline-size: 68px;
  text-align: center;
  background: var(--primary-light);
  color: var(--primary-ink);
  border-radius: var(--radius-sm);
  padding: var(--esp-3) 0;
}

.carte-event__jour {
  display: block;
  font-family: var(--font-titre);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.carte-event__mois {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 2px;
}

.carte-event__corps { display: flex; flex-direction: column; gap: var(--esp-2); }

.carte-event__titre { font-size: 19px; }

.carte-event__lien { text-decoration: none; color: inherit; }
.carte-event__lien::after { content: ''; position: absolute; inset: 0; }

.carte-event__infos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  font-size: 15px;
  color: var(--text-mid);
}

.carte-event__info { display: inline-flex; align-items: center; gap: 6px; }

/* Liste verticale d'événements (aperçu de l'accueil, façon application mobile). */
.evenements-liste { display: flex; flex-direction: column; gap: var(--esp-3); list-style: none; }


/* ==========================================================================
   19. ANNUAIRE
   Trois familles : commerces, associations, lieux culturels.
   ========================================================================== */

.annuaire-familles {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  list-style: none;
}

.famille {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--esp-5);
  transition: border-color var(--duree), box-shadow var(--duree),
              transform var(--duree);
}

.famille:hover,
.famille:focus-within {
  border-color: var(--primary-ui);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.famille__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--radius-sm);
}

/* Chaque famille garde sa couleur d'accent, stable d'un site à l'autre. */
.famille--commerces .famille__icone { background: var(--accent-blue-soft);   color: var(--accent-blue-ink); }
.famille--assos     .famille__icone { background: var(--accent-violet-soft); color: var(--accent-violet-ink); }
.famille--culture   .famille__icone { background: var(--accent-green-soft);  color: var(--accent-green-ink); }

.famille__lien { text-decoration: none; color: var(--text); }
.famille__lien::after { content: ''; position: absolute; inset: 0; }

.famille__nombre {
  font-size: 14px;
  color: var(--text-light);
  margin-top: auto;
}


/* ==========================================================================
   20. COORDONNÉES ET HORAIRES
   Composants réutilisables des pages de détail (fiche annuaire, fiche école,
   urgences-santé) : liste de coordonnées + tableau d'horaires accessible.
   ========================================================================== */

.coordonnees { display: flex; flex-direction: column; gap: var(--esp-5); }

.coordonnee { display: flex; gap: var(--esp-4); }

.coordonnee__icone {
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary-ink);
}

.coordonnee__titre {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: var(--esp-1);
}

.coordonnee p, .coordonnee address {
  font-size: 16px;
  font-style: normal;
  color: var(--text-mid);
}

/* Tableau des horaires. caption et th scope sont obligatoires (RGAA 5.4). */
.horaires {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.horaires caption {
  text-align: left;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 17px;
  padding-bottom: var(--esp-3);
}

.horaires th, .horaires td {
  padding: 8px 0;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.horaires th { font-weight: 600; }
.horaires td { color: var(--text-mid); }

/* Jour de fermeture : le mot « Fermé » porte l'information. */
.horaires__ferme { color: var(--text-light); font-style: italic; }


/* ==========================================================================
   21. ENCART APPLICATION
   Seule présence visible de la marque Ma Commune Live avec le pied de page.
   ========================================================================== */

.encart-app {
  display: grid;
  gap: var(--esp-6);
  grid-template-columns: 1fr;
  align-items: center;
}
/* Deux colonnes uniquement si un visuel (logo) est présent. */
.encart-app:has(.encart-app__visuel) {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.encart-app__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}

.encart-app__visuel { justify-self: center; max-inline-size: 220px; }

@media (max-width: 900px) {
  .encart-app { grid-template-columns: 1fr; }
  .encart-app__visuel { display: none; }
}


/* ==========================================================================
   22. PIED DE PAGE
   Périmètre réel : pied allégé (liens légaux générés + mention « propulsé
   par »). La disposition est portée par la variante .pied--simple (section
   « variantes du moteur de mini-sites »).
   ========================================================================== */

.pied {
  background: var(--surface-dark);
  color: #FFFFFF;
  padding: var(--section-y) 0 var(--esp-6);
}

.pied h2, .pied h3 { color: #FFFFFF; }
.pied p  { color: rgba(255, 255, 255, .78); }
.pied a  { color: #FFFFFF; }

.pied__legaux {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
  list-style: none;
  font-size: 15px;
}

.pied__marque { font-size: 14px; color: rgba(255, 255, 255, .7); }


/* ==========================================================================
   23. ÉTATS VIDES
   Tout bloc alimenté par des données doit prévoir son état vide : une
   section muette laisse croire à une panne.
   ========================================================================== */

.etat-vide {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--esp-6);
  text-align: center;
}

.etat-vide p { font-size: 16px; max-width: 46ch; margin: 0 auto; }


/* ==========================================================================
   24. VAGUE 2 - LISTES ET DÉTAILS
   Gabarits liste (actualités, agenda) et détail (article, événement).
   Comprend : lien de retour, en-tête de détail, scope de contenu riche,
   galerie, informations pratiques, méta d'événement et pagination.
   ========================================================================== */

/* --- Lien de retour « ← Section » (tête des pages internes) -------------- */
.lien-retour {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-4) 0;
  font-weight: 600;
  color: var(--primary-ink);
  text-decoration: none;
}
.lien-retour:hover { text-decoration: underline; }
/* Flèche décorative : le libellé « Actualités » porte déjà l'information. */
.lien-retour::before { content: '←'; font-size: 18px; line-height: 1; }

/* --- En-tête d'un détail (article / événement) -------------------------- */
.detail__entete { margin-bottom: var(--esp-6); }

.detail__image {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-warm);
  margin-bottom: var(--esp-5);
}

.detail__titre { margin: var(--esp-3) 0; }

.detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  font-size: 15px;
  color: var(--text-light);
}
.detail__meta__item { display: inline-flex; align-items: center; gap: 6px; }

/* --- Contenu riche (corps d'article, description d'événement) ------------
   Scope typographique complet : le HTML provient d'un éditeur, il faut
   styler TOUS les éléments possibles pour ne pas casser la page. */
.contenu-riche { font-size: 17px; line-height: 1.6; color: var(--text-mid); }
.contenu-riche > * + * { margin-top: var(--esp-4); }

.contenu-riche h2 { font-size: var(--h3); color: var(--text); margin-top: var(--esp-7); }
.contenu-riche h3 { font-size: 20px;      color: var(--text); margin-top: var(--esp-6); }
.contenu-riche h4 { font-size: 18px;      color: var(--text); margin-top: var(--esp-5); }

.contenu-riche a { color: var(--primary-ink); text-underline-offset: 2px; }

.contenu-riche ul,
.contenu-riche ol { padding-left: 1.4em; }
.contenu-riche li + li { margin-top: var(--esp-2); }
.contenu-riche li { padding-left: var(--esp-1); }

.contenu-riche strong { color: var(--text); font-weight: 700; }

.contenu-riche blockquote {
  border-left: 4px solid var(--primary-ui);
  background: var(--primary-soft);
  padding: var(--esp-4) var(--esp-5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: var(--text);
}

.contenu-riche figure { margin: var(--esp-5) 0; }
.contenu-riche img { border-radius: var(--radius-sm); }
.contenu-riche figcaption {
  margin-top: var(--esp-2);
  font-size: 14px;
  color: var(--text-light);
  text-align: center;
}

.contenu-riche hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--esp-6) 0;
}

/* Tableau dans du contenu riche : caption + th scope obligatoires (RGAA 5.4). */
.contenu-riche table { inline-size: 100%; border-collapse: collapse; font-size: 16px; }
.contenu-riche caption { text-align: left; font-weight: 700; padding-bottom: var(--esp-3); color: var(--text); }
.contenu-riche th, .contenu-riche td {
  padding: 10px var(--esp-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.contenu-riche th { font-weight: 700; color: var(--text); }
.contenu-riche thead th { background: var(--bg-warm); }

/* --- Galerie d'images --------------------------------------------------- */
.galerie {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  list-style: none;
}
.galerie img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--bg-warm);
}

/* --- Informations pratiques (liste libellé / valeur) -------------------- */
.infos-pratiques {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--esp-2) var(--esp-5);
}
.infos-pratiques div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-3) 0;
  border-bottom: 1px solid var(--border);
}
.infos-pratiques div:last-child { border-bottom: 0; }
.infos-pratiques dt { font-weight: 700; color: var(--text); min-inline-size: 160px; }
.infos-pratiques dd { margin: 0; color: var(--text-mid); }

/* --- Encadré latéral d'un événement (date, lieu, tarif) ----------------- */
.detail__aside {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}
.detail__aside dt { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-light); font-weight: 700; }
.detail__aside dd { margin: var(--esp-1) 0 0; color: var(--text); font-weight: 600; }

/* Grille détail : corps + colonne latérale, empilée en mobile. */
.detail__grille {
  display: grid;
  gap: var(--esp-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
  .detail__grille--aside { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}

/* --- Pagination --------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-7);
}
.pagination__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 10px var(--esp-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}
.pagination__lien:hover { border-color: var(--primary-ui); background: var(--primary-soft); }
/* État désactivé : annoncé par aria-disabled dans le HTML, pas que par le gris. */
.pagination__lien[aria-disabled="true"] {
  color: var(--text-light);
  border-color: var(--border);
  pointer-events: none;
}
.pagination__etat { font-size: 15px; color: var(--text-mid); padding: 0 var(--esp-2); }


/* ==========================================================================
   25. VAGUE 3 - ANNUAIRE
   Liste filtrable par ONGLETS (des liens, pas du JavaScript : chaque onglet
   pointe vers une page rendue serveur) + actions de fiche (appel, itinéraire).
   ========================================================================== */

.onglets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  list-style: none;
  margin: var(--esp-5) 0 0;
  padding: 0;
}
.onglet {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 10px var(--esp-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
}
.onglet:hover { border-color: var(--primary-ui); background: var(--primary-soft); }
/* Onglet actif : fond plein ET aria-current dans le HTML (pas que la couleur). */
.onglet[aria-current="page"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--texte-sur-primaire);
}
.onglet__nombre { font-weight: 700; opacity: .8; }

/* Bouton compact pour les actions de fiche (Appeler, Itinéraire). */
.btn--compact { padding: 8px 14px; font-size: 14px; }
.actions-fiche { display: flex; flex-wrap: wrap; gap: var(--esp-3); }


/* ==========================================================================
   26. VAGUE 4 - MODULES RICHES (météo, urgences-santé, vie scolaire)
   ========================================================================== */

/* --- Bannière de vigilance ---------------------------------------------- */
.vigilance {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5); border-radius: var(--radius);
  border: 1px solid transparent; font-weight: 600;
}
.vigilance__niveau { font-weight: 700; }
.vigilance--vert   { background: var(--accent-green-soft);  color: var(--accent-green-ink);  border-color: var(--accent-green); }
.vigilance--jaune  { background: var(--accent-amber-soft);  color: var(--accent-amber-ink);  border-color: var(--accent-amber); }
.vigilance--orange { background: var(--accent-orange-soft); color: var(--accent-orange-ink); border-color: var(--accent-orange); }
.vigilance--rouge  { background: var(--accent-rose-soft);   color: var(--accent-rose-ink);   border-color: var(--accent-rose); }

/* --- Météo actuelle (bloc sombre) --------------------------------------- */
.meteo-actuelle {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-5);
  background: var(--surface-dark); color: #FFFFFF;
  border-radius: var(--radius); padding: var(--esp-6);
}
.meteo-actuelle__temp { font-family: var(--font-titre); font-size: 56px; font-weight: 800; line-height: 1; }
.meteo-actuelle__desc { color: rgba(255,255,255,.85); font-size: 18px; }
.meteo-actuelle__details {
  display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5);
  color: rgba(255,255,255,.8); font-size: 15px; margin-top: var(--esp-3);
}

/* --- Prévisions 6 jours ------------------------------------------------- */
.previsions {
  display: grid; gap: var(--esp-3); list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
}
.prevision {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: var(--esp-2); text-align: center; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--esp-4);
}
.prevision:hover, .prevision:focus-within { border-color: var(--primary-ui); box-shadow: var(--shadow-sm); }
.prevision__jour { font-weight: 700; }
.prevision__lien { text-decoration: none; color: inherit; }
.prevision__lien::after { content: ''; position: absolute; inset: 0; }
.prevision__temp { font-weight: 700; }
.prevision__temp .min { color: var(--text-light); font-weight: 600; }
.prevision__icone { color: var(--primary-ink); }

/* --- Timeline horaire (défilement horizontal) --------------------------- */
.timeline-horaire {
  display: flex; gap: var(--esp-3); overflow-x: auto; list-style: none;
  padding-bottom: var(--esp-3); scroll-snap-type: x proximity;
}
.heure {
  flex: none; inline-size: 92px; display: flex; flex-direction: column;
  align-items: center; gap: var(--esp-2); text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--esp-4) var(--esp-2);
  scroll-snap-align: start;
}
.heure__h { font-weight: 700; font-size: 14px; }
.heure__temp { font-weight: 700; }
.heure__detail { font-size: 13px; color: var(--text-mid); display: inline-flex; align-items: center; gap: 4px; }

/* --- Urgences : trois blocs colorés ------------------------------------- */
.urgences-blocs {
  display: grid; gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.urgence-bloc { border-radius: var(--radius); padding: var(--esp-5); border: 1px solid; }
.urgence-bloc h2 { font-size: 20px; margin-bottom: var(--esp-2); }
.urgence-bloc--vital  { background: var(--accent-rose-soft);   border-color: var(--accent-rose); }
.urgence-bloc--vital  h2 { color: var(--accent-rose-ink); }
.urgence-bloc--sante  { background: var(--accent-green-soft);  border-color: var(--accent-green); }
.urgence-bloc--sante  h2 { color: var(--accent-green-ink); }
.urgence-bloc--social { background: var(--accent-violet-soft); border-color: var(--accent-violet); }
.urgence-bloc--social h2 { color: var(--accent-violet-ink); }
.numero { display: block; padding: var(--esp-3) 0; border-top: 1px solid rgba(0,33,71,.10); }
.numero:first-of-type { border-top: 0; }
.numero__num { font-family: var(--font-titre); font-weight: 800; font-size: 22px; text-decoration: none; color: var(--text); }
.numero__num:hover { text-decoration: underline; }
.numero__libelle { font-weight: 700; color: var(--text); }
.numero__desc { font-size: 14px; color: var(--text-mid); }

/* --- Établissement de santé --------------------------------------------- */
.etablissement {
  display: flex; flex-direction: column; gap: var(--esp-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--esp-4);
}
.etablissement__nom { font-size: 18px; }
.etablissement__meta { font-size: 14px; color: var(--text-light); display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); }
.etablissement .actions-fiche { margin-top: var(--esp-2); }

/* --- Contacts d'établissement (école) ----------------------------------- */
.contacts {
  display: grid; gap: var(--esp-4); list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.contact { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--esp-4); }
.contact__role { font-weight: 700; color: var(--text); }

/* --- Menus de cantine : navigation par semaine + grille par jour -------- */
.semaine-nav {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-5);
}
.semaine-nav__titre { font-weight: 700; }
.menus-semaine {
  display: grid; gap: var(--esp-4); list-style: none; margin-top: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.menu-jour { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--esp-4); }
.menu-jour__jour {
  font-family: var(--font-titre); font-weight: 700;
  margin-bottom: var(--esp-3); padding-bottom: var(--esp-2); border-bottom: 1px solid var(--border);
}
.menu-jour dl { margin: 0; }
.menu-jour dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-light); font-weight: 700; margin-top: var(--esp-3); }
.menu-jour dt:first-of-type { margin-top: 0; }
.menu-jour dd { margin: 2px 0 0; color: var(--text-mid); font-size: 15px; }


/* ==========================================================================
   27. UTILITAIRES
   ========================================================================== */

/* Réservé aux lecteurs d'écran : hors écran mais jamais display:none,
   sinon le contenu disparaît aussi pour la synthèse vocale. */
.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Mention de format et de poids d'un document (RGAA 13.6).
   Toujours DANS l'intitulé du lien, jamais à côté. */
.lien-doc { display: inline-flex; align-items: center; gap: var(--esp-2); }
.lien-doc__poids { color: var(--text-mid); font-size: 14px; }

.mt-0 { margin-top: 0; }
.mb-4 { margin-bottom: var(--esp-4); }
.mb-5 { margin-bottom: var(--esp-5); }


/* ==========================================================================
   Menu de navigation du header (mini-site actif)
   --------------------------------------------------------------------------
   Ajout postérieur au design d'origine (le brief excluait un menu header).
   Mobile-first : disclosure <details> natif, sans JavaScript. Sur desktop, les
   liens repassent inline et le bouton disparaît.
   ========================================================================== */
.entete__nav { position: relative; }

/* Le <details> ne sert que d'interrupteur (mobile) : son bouton = <summary>. */
.menu-nav__bouton {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-family: var(--font-texte);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.menu-nav__bouton::-webkit-details-marker { display: none; }
.menu-nav__bouton::marker { content: ''; }

/* Liste = SŒUR du <details>. Masquée sur mobile, révélée quand le disclosure
   est ouvert (combinateur ~), indépendamment du masquage interne de <details>. */
.entete__liens { list-style: none; margin: 0; padding: 0; display: none; }

.menu-nav[open] ~ .entete__liens {
  position: absolute;
  right: 0;
  top: calc(100% + var(--esp-2));
  min-inline-size: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 50;
}

.entete__liens a {
  display: block;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radius-sm);
}
.entete__liens a:hover { background: var(--primary-soft); color: var(--primary-ink); }
.entete__liens a[aria-current="page"] { background: var(--primary-light); color: var(--primary-ink); }

/* Desktop : interrupteur masqué, liens toujours affichés inline. */
@media (min-width: 760px) {
  .menu-nav { display: none; }
  .entete__liens,
  .menu-nav[open] ~ .entete__liens {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-1);
    min-inline-size: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
}

/* --- Lieux refuges ------------------------------------------------------- */
.badge--refuge { color: var(--accent-violet-ink); background: var(--accent-violet-soft); }
/* Le picto est en traits blancs : il lui faut toujours une pastille pleine. */
.picto-refuge {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 18px; block-size: 18px; border-radius: 50%;
  background: var(--accent-violet); flex: none;
}
.picto-refuge img { display: block; inline-size: 14px; block-size: 14px; }
.picto-refuge--lg { inline-size: 38px; block-size: 38px; }
.picto-refuge--lg img { inline-size: 30px; block-size: 30px; }
.bloc-refuge {
  background: var(--accent-violet-soft);
  border: 1px solid var(--accent-violet);
  border-radius: var(--radius);
  padding: var(--esp-5);
}
.bloc-refuge__marque { display: flex; align-items: center; gap: var(--esp-3); }
.bloc-refuge__titre {
  font-family: var(--font-titre); font-weight: 800; font-size: 20px;
  color: var(--accent-violet-ink);
}
.bloc-refuge__texte { color: var(--text-mid); margin-top: var(--esp-3); }
.bloc-refuge__mentions {
  color: var(--text-light); font-size: 13px; line-height: 1.5;
  margin-top: var(--esp-4); padding-top: var(--esp-4);
  border-top: 1px solid rgba(0,33,71,.12);
}
.bloc-refuge__urgence { color: var(--text-mid); font-size: 13px; font-weight: 700; margin-top: var(--esp-2); }