/* Feuille de style commune aux trois écrans embarqués. */

:root {
  --bleu: #3454D1;
  --bleu-fonce: #2942a8;
  --bleu-clair: #eaf2ff;
  --encre: #0f172a;
  --gris: #64748b;
  --gris-clair: #cbd5e1;
  --carte: #ffffff;
  --rayon: 16px;

  /* Marge latérale du contenu. L'en-tête la compense en marge négative pour
     rester bord à bord ; les deux doivent donc bouger ensemble. */
  --marge-laterale: 7px;

  /* Android 15 impose l'affichage bord à bord dès targetSdk 35 : l'en-tête
     bleu passe donc derrière la barre d'état, et c'est voulu. Le plancher de
     26 px protège du cas où la WebView renvoie un encart de sécurité nul —
     sans lui, l'heure du système chevaucherait le titre. */
  --marge-haut: max(env(safe-area-inset-top, 0px), 26px);
  --marge-bas: max(env(safe-area-inset-bottom, 0px), 12px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--encre);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

/* `overflow-x` reste sur `html` seul, jamais sur `body`. Sur le body, il en
   ferait un conteneur de défilement à part entière : n'ayant rien à faire
   défiler, il avale le geste au lieu de le propager au document, et le doigt
   n'obtient plus rien alors que `window.scrollTo` continue de fonctionner.
   `overscroll-behavior` a été retiré pour la même raison — il ne masquait que
   l'effet de rebond, au prix d'une interférence avec le défilement. */
html {
  overflow-x: hidden;
}

/* L'attribut `hidden` ne tient que par une règle du navigateur, sur laquelle
   la moindre déclaration `display` de cette feuille l'emporte. Trois éléments
   cachés à l'ouverture — le bouton d'installation, l'invitation de l'accueil,
   le lien « Installer » du pied de page — sont justement des `display: flex`
   ou `block` : sans cette ligne, ils s'affichaient malgré l'attribut. */
[hidden] { display: none !important; }

body {
  background: linear-gradient(to bottom, #e0f2fe, #f0f9ff 340px, #f0f9ff);
  min-height: 100vh;
}

.page {
  max-width: 26rem;
  margin: 0 auto;
  padding: 0 var(--marge-laterale) calc(var(--marge-bas) + 24px);
}

/* ---------- En-tête ---------- */

.entete {
  position: relative;
  /* 10 px et non 18 : l'ombre portée de l'en-tête occupe déjà l'espace, et
     l'écart paraissait double. */
  margin: 0 calc(-1 * var(--marge-laterale)) 10px;
  padding: calc(var(--marge-haut) + 18px) 18px 20px;
  background: var(--bleu);
  color: #fff;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 10px 30px rgba(30, 58, 138, 0.25);
  overflow: hidden;
}

/* Halo décoratif du coin haut-droit. Il est absolu et vient en dernier dans
   l'arbre : sans les deux règles ci-dessous il se peignait *par-dessus* le
   contenu de l'en-tête et avalait les taps du bouton Partager, qui se trouve
   précisément sous lui. `pointer-events` le rend transparent au doigt, et la
   pile explicite (halo 0, contenu 1) évite de dépendre de l'ordre du DOM. */
.entete::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.entete .haut,
.entete h1,
.entete .sous-titre,
.entete .liens-entete { z-index: 1; }

.entete .haut {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.entete .date { font-size: 12px; font-weight: 600; opacity: 0.85; }
.entete h1 { position: relative; margin: 14px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.entete .sous-titre { position: relative; margin: 4px 0 0; font-size: 13px; font-weight: 500; opacity: 0.9; }

/* Liens externes de l'en-tête (site de la ville) : mêmes pastilles claires
   que sur le portail, posées sur l'aplat bleu. */
.liens-entete {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.pilule {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.pilule:active { transform: scale(0.96); }
.pilule svg { width: 14px; height: 14px; }

.marque { display: flex; align-items: center; gap: 9px; }

/* Le logo porte déjà son propre aplat bleu : pas de cadre translucide autour,
   il ne ferait qu'encrasser un visuel déjà dense à cette taille. */
.marque .pastille {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 800;
  font-size: 15px;
}

.marque .pastille img { width: 100%; height: 100%; object-fit: cover; display: block; }

.marque .nom { font-size: 14px; font-weight: 700; line-height: 1.1; }

.retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.retour:active { transform: scale(0.96); }
.retour svg { width: 16px; height: 16px; }

/* ---------- Grille des 6 icônes ---------- */

.grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tuile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Tuile ramenée de 128 à 100 px de hauteur minimale le 16 septembre 2026 :
     l'accueil compte sept tuiles, un bandeau et un kiosque, et gagnait à
     tenir en moins d'écrans. Le pictogramme et l'écart du titre suivent. */
  min-height: 100px;
  padding: 11px 13px;
  border: 1px solid rgba(52, 84, 209, 0.18);
  border-radius: var(--rayon);
  background: var(--carte);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  color: var(--encre);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  opacity: 0;
  animation: apparition 0.45s ease-out forwards;
}

.tuile:active { transform: scale(0.97); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08); }

/* Les numéros d'urgence doivent se repérer sans lire : bordure et titre rouges,
   comme la tuile correspondante du portail. */
.tuile.urgence {
  border-color: rgba(232, 69, 60, 0.45);
  box-shadow: 0 2px 10px rgba(232, 69, 60, 0.12);
}

.tuile.urgence .titre { color: #b91c1c; }

.tuile .haut-tuile { display: flex; align-items: flex-start; justify-content: space-between; }

/* Les pictogrammes de section sont en aplats de couleur : pas de pastille
   teintée derrière eux, elle salirait les couleurs. */
.tuile .icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}

.tuile .icone svg { width: 32px; height: 32px; }
.tuile .titre { margin-top: 8px; font-size: 14px; font-weight: 700; line-height: 1.2; }
.tuile .legende { margin-top: 2px; font-size: 11.5px; color: var(--gris); }

.compteur {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bleu-clair);
  color: var(--bleu-fonce);
  font-size: 11px;
  font-weight: 700;
}

.puce-web {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.puce-web svg { width: 11px; height: 11px; }

@keyframes apparition {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Bandeau du forum : pleine largeur sous la grille, dans le dégradé violet
   du portail pour qu'il ne se confonde pas avec les tuiles de section. */
.bloc-forum {
  position: relative;
  grid-column: 1 / -1;
  display: block;
  padding: 16px 18px;
  border: none;
  border-radius: var(--rayon);
  background: linear-gradient(135deg, #4a1d6a, #6b2c5d 55%, #c24e6e);
  box-shadow: 0 6px 20px rgba(74, 29, 106, 0.28);
  color: #fff;
  text-decoration: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  animation: apparition 0.45s ease-out forwards;
}

.bloc-forum:active { transform: scale(0.985); }

.bloc-forum::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.bloc-forum .haut-forum {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bloc-forum .annee {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11px;
  font-weight: 800;
}

.bloc-forum h2 {
  position: relative;
  margin: 10px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.bloc-forum .details {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.92);
}

.bloc-forum .details span { display: flex; align-items: center; gap: 8px; }
.bloc-forum .details svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.85; }

/* ---------- Recherche ---------- */

.recherche { position: relative; margin-bottom: 14px; }

.recherche input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--encre);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

.recherche input:focus { outline: 2px solid rgba(52, 84, 209, 0.35); outline-offset: 1px; }

.recherche svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #94a3b8;
}

/* ---------- Listes ---------- */

.liste { display: flex; flex-direction: column; gap: 12px; }

.carte-evenement {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--rayon);
  background: var(--carte);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  animation: apparition 0.4s ease-out forwards;
}

.carte-evenement:active { transform: scale(0.985); }

.carte-evenement .affiche {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 0%;
  display: block;
  background: #e2e8f0;
}

.carte-evenement .corps { padding: 12px 14px 14px; }
.carte-evenement .quand { font-size: 12px; font-weight: 700; color: var(--bleu); }
.carte-evenement h2 { margin: 4px 0 0; font-size: 16px; font-weight: 800; line-height: 1.25; }

.carte-evenement .meta {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--gris);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.carte-evenement .meta span { display: flex; align-items: center; gap: 6px; }
.carte-evenement .meta svg { width: 13px; height: 13px; flex: 0 0 auto; color: #94a3b8; }

/* Annonces du panneau lumineux : filet ambré à gauche, en rappel de l'écran
   du panneau, et texte au retour à la ligne préservé. */
.carte-annonce {
  display: block;
  width: 100%;
  padding: 13px 14px 13px 16px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-left: 4px solid #f59e0b;
  border-radius: 14px;
  background: var(--carte);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  animation: apparition 0.4s ease-out forwards;
}

.carte-annonce:active { transform: scale(0.985); }
.carte-annonce h2 { margin: 6px 0 0; font-size: 15px; font-weight: 800; line-height: 1.25; }

/* L'association qui a déposé l'annonce, juste sous le titre. */
.carte-annonce .deposant {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gris);
}

/* Le message tel qu'il passe sur le panneau : en italique, pour le détacher du
   titre et de son déposant. */
.carte-annonce .texte-pl { font-style: italic; }

.pastille-etat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pastille-etat.prochainement { background: var(--bleu-clair); color: var(--bleu-fonce); }

.texte-pl {
  margin: 6px 0 0;
  font-size: 13px;
  color: #475569;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fiche .texte-pl {
  display: block;
  overflow: visible;
  margin-top: 14px;
  font-size: 14.5px;
  color: #334155;
}

.carte-asso {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  background: var(--carte);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  animation: apparition 0.35s ease-out forwards;
}

.carte-asso:active { transform: scale(0.985); }

/* Une association qui a déposé un flyer ou une page tarifs se repère à sa
   tranche bleue. Le bord passe de 1 à 3 px et la marge intérieure de 12 à
   10 : le texte reste aligné avec celui des autres cartes, la bordure ne
   pousse rien. */
/* Légende du repère bleu. Le témoin reprend exactement la tranche des cartes —
   même largeur, même couleur, même coin carré en bas à gauche : on doit
   reconnaître la marque, pas deviner à quoi elle ressemble. */
.legende-repere {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 10px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--gris);
}

.legende-repere .temoin-repere {
  flex: 0 0 auto;
  width: 3px;
  height: 16px;
  border-radius: 2px 2px 2px 0;
  background: var(--bleu);
}

.carte-asso.avec-documents {
  border-left: 3px solid var(--bleu);
  padding-left: 10px;
}

.carte-asso .vignette {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #334155;
  overflow: hidden;
}

.carte-asso .vignette img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.carte-asso .texte { min-width: 0; flex: 1; }
.carte-asso h2 { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.25; }

.carte-asso .legende {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--gris);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carte-asso .chevron { flex: 0 0 auto; color: var(--gris-clair); }
.carte-asso .chevron svg { width: 18px; height: 18px; }

/* Le compte du bandeau de tête, pour distinguer les deux nombres annoncés. */
.compte-forum { font-weight: 800; }

/* ---------- Plan du forum ---------- */

.apercu-plan {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px 12px 12px 0;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
}

.apercu-plan:active { transform: scale(0.99); }
.apercu-plan img { display: block; width: 100%; height: auto; }

.apercu-plan .loupe {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}

.apercu-plan .loupe svg { width: 13px; height: 13px; }

/* Le corps ne doit pas défiler derrière la visionneuse ouverte. */
body.fige { overflow: hidden; }

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  background: #0f172a;
}

.barre-visionneuse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
  background: rgba(15, 23, 42, 0.96);
  color: #fff;
}

.titre-visionneuse { font-size: 14px; font-weight: 700; }
.barre-visionneuse .outils { display: flex; align-items: center; gap: 6px; }

.barre-visionneuse button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.barre-visionneuse button:disabled { opacity: 0.35; cursor: default; }

.barre-visionneuse .niveau {
  min-width: 48px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Le cadre défile dans les deux sens : c'est lui qui remplace le zoom du
   navigateur, désactivé par `user-scalable=no` sur toutes les pages. */
.cadre-visionneuse {
  flex: 1;
  display: flex;
  overflow: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-overflow-scrolling: touch;
}

/* Le socle porte l'encombrement du plan une fois tourné ; ses dimensions sont
   posées par le script, qui les échange à chaque quart de tour.
   `margin: auto` et non `justify-content: center` : centré de la même façon
   tant que le plan tient dans le cadre, mais sans rendre son bord gauche
   inatteignable une fois qu'il déborde. */
.socle-plan {
  flex: 0 0 auto;
  margin: auto;
}

.cadre-visionneuse img {
  display: block;
  width: 100%;
  height: auto;
  /* `max-width` par défaut vaut 100 % dans certains styles : il ferait échouer
     tout agrandissement au-delà de la largeur du cadre. */
  max-width: none;
  /* La rotation part du coin supérieur gauche : c'est ce que suppose le calage
     appliqué par le script. */
  transform-origin: 0 0;
}

.barre-visionneuse button svg { width: 17px; height: 17px; }

.astuce-visionneuse {
  margin: 0;
  padding: 8px 14px calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: rgba(15, 23, 42, 0.96);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

/* ---------- Pièces lues dans l'application ---------- */

.piece-visionneuse {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  transform-origin: 0 0;
}

/* Les pages d'un PDF s'empilent et défilent d'un seul tenant : c'est la
   lecture qu'on attend d'un flyer ou d'une page tarifs, plus qu'une pagination
   à cliquer. */
.pages-pdf {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  transform-origin: 0 0;
}

.pages-pdf canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.chargement-doc {
  margin: 0;
  padding: 40px 16px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  text-align: center;
}

/* ---------- Documents des associations ---------- */

.bloc-documents {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.bloc-documents h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris);
}

/* La saison est rappelee dans le titre du bloc : on ne montre que celle en
   cours, encore faut-il dire laquelle. */
.bloc-documents .saison-en-cours {
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gris-clair);
}

/* La saison est écrite sur chaque groupe, jamais déduite : une page tarifs de
   l'an dernier ne doit pas passer pour celle de cette année. */
.etiquette-saison {
  display: inline-flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--gris);
  font-size: 10.5px;
  font-weight: 700;
}

.etiquette-saison.active { background: var(--bleu-clair); color: var(--bleu-fonce); }

.document-asso {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  color: inherit;
  text-decoration: none;
}

.document-asso:first-of-type { border-top: none; }
.document-asso:active { opacity: 0.6; }

.document-asso .puce-doc {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f1f5f9;
  color: var(--bleu);
}

.document-asso .puce-doc svg { width: 17px; height: 17px; }

/* Quand la pièce est une image, autant la montrer : la vignette dit plus vite
   ce qu'on va ouvrir que le mot « Image ». */
.document-asso .apercu-doc {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
  border: 1px solid rgba(15, 23, 42, 0.1);
}

.document-asso .apercu-doc img { width: 100%; height: 100%; object-fit: cover; }
.document-asso .texte { flex: 1; min-width: 0; }
.document-asso .nom { display: block; font-size: 13.5px; font-weight: 700; }
.document-asso .desc { display: block; font-size: 11px; color: var(--gris); }
.document-asso .chevron { flex: 0 0 auto; color: var(--gris-clair); }
.document-asso .chevron svg { width: 15px; height: 15px; }

/* ---------- Blocs créés depuis le portail ---------- */

/* Ils occupent les deux colonnes, comme les bandeaux intégrés, et gardent une
   allure neutre : ce sont des ajouts de la commune, pas des rubriques de
   l'application, et rien ne dit à quoi ils renvoient. */
/* Une tuile libre est une tuile comme les autres. Seule différence : sa
   vignette peut être une image du portail, cadrée dans le carré du
   pictogramme. Le sous-titre, souvent long, est coupé à deux lignes pour que
   la rangée garde la hauteur de sa voisine. */
.tuile-libre .icone img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f1f5f9;
}

.tuile-libre .legende {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Fil Facebook ---------- */

/* Le plugin de Facebook a son propre fond blanc et ses propres angles : on lui
   donne un cadre qui les arrondit, et une hauteur minimale pour que le message
   d'attente ne fasse pas sauter la page au chargement. */
.cadre-facebook {
  display: flex;
  justify-content: center;
  min-height: 200px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--rayon) var(--rayon) var(--rayon) 0;
  background: #fff;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07);
}

.cadre-facebook iframe { display: block; max-width: 100%; border: 0; }

.attente-facebook {
  margin: 0;
  padding: 28px 20px;
  align-self: center;
  color: var(--gris);
  font-size: 14px;
  text-align: center;
}

.attente-facebook strong { display: block; margin-bottom: 4px; color: var(--encre); }
.attente-facebook[hidden] { display: none; }

#ouvrir-facebook { margin: 0 0 12px; }

/* ---------- Activités ---------- */

.filtres-activites {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.filtres-activites.jours { margin-bottom: 14px; }

.filtres-activites button {
  padding: 6px 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: var(--carte);
  color: var(--encre);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.filtres-activites button[aria-pressed="true"] {
  background: #65a30d;
  border-color: #65a30d;
  color: #fff;
}

.filtres-activites button:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

.groupe-activites {
  margin: 18px 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.groupe-activites span { font-weight: 600; opacity: 0.7; }

.carte-activite {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-left: 3px solid #65a30d;
  border-radius: 14px 14px 14px 0;
  background: var(--carte);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  animation: apparition 0.35s ease-out forwards;
}

.carte-activite:active { transform: scale(0.99); }
.carte-activite .corps { flex: 1; min-width: 0; }
.carte-activite h2 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.25; }
.carte-activite .qui { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--gris); }
.carte-activite .quand { margin-top: 4px; font-size: 13px; font-weight: 700; color: #3f6212; }
.carte-activite .etiquettes { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.carte-activite .etiquette.ponctuel { background: #fef3c7; color: #92400e; }

/* Le prix se lit d'un coup d'œil, à droite, chiffres alignés. */
.carte-activite .tarif {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 1px;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

.carte-activite .tarif strong { font-size: 15px; font-weight: 800; white-space: nowrap; }
.carte-activite .tarif small { font-size: 11px; color: var(--gris); }

/* ---------- Travaux ---------- */

.carte-travaux {
  height: calc(100vh - 330px);
  height: calc(100dvh - 330px);
  min-height: 360px;
  position: relative;
  z-index: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--rayon) var(--rayon) var(--rayon) 0;
  overflow: hidden;
  background: #e2e8f0;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07);
}

.carte-travaux-item {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  /* Tranche orange à gauche, comme le panneau lumineux a la sienne : un
     chantier se repère à sa couleur avant de se lire. */
  border-left: 3px solid #f97316;
  border-radius: 14px 14px 14px 0;
  background: var(--carte);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  animation: apparition 0.35s ease-out forwards;
}

.carte-travaux-item:active { transform: scale(0.99); }
.carte-travaux-item h2 { margin: 6px 0 0; font-size: 15px; font-weight: 800; line-height: 1.25; }
.carte-travaux-item .quand { margin-top: 2px; font-size: 12.5px; font-weight: 700; color: #c2410c; }
.carte-travaux-item .deposant { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--gris); }
.carte-travaux-item .infos { margin: 8px 0 0; font-size: 13px; }

/* En cours ou à venir : la distinction commande l'attention. */
.etat-travaux {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--gris);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.etat-travaux.actif { background: #ffedd5; color: #9a3412; }

.etat-travaux.actif::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #f97316;
}

/* La carte de la fiche : un aperçu, pas un outil. Elle est inerte — voir
   `dessinerFiche` — pour ne pas capter le doigt de qui fait défiler le texte. */
.carte-fiche {
  height: 190px;
  margin: 14px 0 2px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  overflow: hidden;
  background: #e2e8f0;
}

.carte-fiche .leaflet-control-attribution {
  font-size: 9px;
  background: rgba(255, 255, 255, 0.7);
}

.marqueur-travaux {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #f97316;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.marqueur-travaux svg { width: 20px; height: 20px; }

/* ---------- À la une ---------- */

/* La vedette réemploie la mise en page d'une fiche d'événement, posée dans une
   carte plutôt que dans une feuille : c'est le contenu principal de l'écran,
   il n'a pas à être ouvert pour être lu. */
.bloc-une {
  display: block;
  padding: 14px;
  border: 1px solid rgba(202, 138, 4, 0.25);
  border-radius: var(--rayon) var(--rayon) var(--rayon) 0;
  background: linear-gradient(150deg, #fffbeb, var(--carte) 45%);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

.marque-une {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  background: #fef3c7;
  color: #854d0e;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.marque-une svg { width: 14px; height: 14px; }

/* `.affiche-pleine` est stylée sous `.fiche` seulement : hors feuille, elle
   sortait de la carte à sa taille naturelle. Elle est aussi bornée en hauteur,
   pour qu'une affiche verticale ne mange pas tout l'écran. */
.bloc-une .affiche-pleine {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  margin: 12px 0;
  border-radius: 12px;
  background: #fffdf5;
}
.bloc-une h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; }

.titre-suivantes {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris);
}

.semaine-une {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 13px 13px 13px 0;
  background: var(--carte);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
  color: inherit;
  text-decoration: none;
}

.semaine-une:active { transform: scale(0.99); }

/* Le numéro de semaine est le repère du portail : on le garde tel quel, et la
   date du lundi le traduit pour ceux qui ne comptent pas en semaines. */
.semaine-une .numero-semaine {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 32px;
  border-radius: 9px 9px 9px 0;
  background: #fef3c7;
  color: #854d0e;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.semaine-une .texte { flex: 1; min-width: 0; }
.semaine-une .nom { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.semaine-une .desc { display: block; font-size: 11.5px; color: var(--gris); }
.semaine-une .chevron { flex: 0 0 auto; color: var(--gris-clair); }
.semaine-une .chevron svg { width: 17px; height: 17px; }

/* Bandeau de l'accueil : compact, en tête de la grille. */
.bloc-alaune {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  /* Doré. Les deux bandeaux pleine largeur se suivaient dans des jaunes
     presque identiques : on les sépare franchement, l'un chaud, l'autre froid. */
  border: 1px solid rgba(202, 138, 4, 0.3);
  border-radius: var(--rayon) var(--rayon) var(--rayon) 0;
  background: linear-gradient(120deg, #fffbeb, #fef3c7 75%);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
  color: inherit;
  text-decoration: none;
  opacity: 0;
  animation: apparition 0.4s ease-out var(--retard, 0ms) forwards;
}

.bloc-alaune:active { transform: scale(0.99); }

.bloc-alaune .affiche-une {
  flex: 0 0 auto;
  width: 46px;
  height: 62px;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
}

.bloc-alaune .affiche-une img { width: 100%; height: 100%; object-fit: cover; }

.bloc-alaune .puce-une {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fef3c7;
}

.bloc-alaune .puce-une svg { width: 24px; height: 24px; }
.bloc-alaune .texte { flex: 1; min-width: 0; }

.bloc-alaune .surtitre {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a16207;
}

.bloc-alaune h2 {
  margin: 2px 0 0;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
  color: #713f12;
}

.bloc-alaune .legende { margin: 1px 0 0; font-size: 11.5px; color: #a16207; }
.bloc-alaune .chevron { flex: 0 0 auto; color: #ca8a04; }
.bloc-alaune .chevron svg { width: 18px; height: 18px; }

/* ---------- Publications ---------- */

/* Bandeau du kiosque, sur l'accueil. Volontairement plus bas que celui du
   forum : les deux se suivent, et deux pavés de même hauteur se feraient
   concurrence. La couverture porte l'information, le texte l'accompagne. */
.bloc-kiosque {
  /* Le bandeau vit dans la grille de l'accueil, qui a deux colonnes : sans
     cette ligne il n'en occuperait qu'une et se replierait en colonne étroite,
     comme le fait déjà `.bloc-forum` juste au-dessus. */
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  /* Bleu ciel, pour ne pas se confondre avec le doré d'« À la une » juste
     au-dessus. La pastille rouge « Nouveau en kiosque » y ressort mieux. */
  border: 1px solid rgba(2, 132, 199, 0.22);
  border-radius: var(--rayon) var(--rayon) var(--rayon) 0;
  background: linear-gradient(120deg, #f0f9ff, #e0f2fe 75%);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
  color: inherit;
  text-decoration: none;
  opacity: 0;
  animation: apparition 0.4s ease-out var(--retard, 0ms) forwards;
}

.bloc-kiosque:active { transform: scale(0.99); }

.bloc-kiosque .couverture {
  flex: 0 0 auto;
  width: 52px;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 2px 6px rgba(120, 53, 15, 0.14);
}

.bloc-kiosque .couverture img { width: 100%; height: 100%; object-fit: cover; }
.bloc-kiosque .texte { flex: 1; min-width: 0; }

.bloc-kiosque h2 {
  margin: 3px 0 0;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
  color: #0c4a6e;
}

.bloc-kiosque .legende { margin: 2px 0 0; font-size: 11.5px; color: #0369a1; }
.bloc-kiosque .chevron { flex: 0 0 auto; color: #0284c7; }
.bloc-kiosque .chevron svg { width: 18px; height: 18px; }

/* « Nouveau en kiosque » : la même alerte rouge que sur le portail, pour que
   celui qui connaît le site retrouve le repère. */
.pastille-kiosque {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Liste des publications */
.carte-publication {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px 14px 14px 0;
  background: var(--carte);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
  color: inherit;
  text-decoration: none;
  opacity: 0;
  animation: apparition 0.35s ease-out forwards;
}

.carte-publication:active { transform: scale(0.99); }

.carte-publication .couverture {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 112px;
  border-radius: 7px;
  overflow: hidden;
  background: #fff7ed;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 2px 8px rgba(120, 53, 15, 0.16);
}

.carte-publication .couverture img { width: 100%; height: 100%; object-fit: cover; }

.carte-publication .sans-couverture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.carte-publication .sans-couverture svg { width: 34px; height: 34px; }
.carte-publication .couverture .pastille-kiosque { position: absolute; top: 5px; left: 5px; }

.carte-publication .texte { flex: 1; min-width: 0; }

.carte-publication .quand {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b45309;
}

.carte-publication h2 { margin: 2px 0 0; font-size: 15px; font-weight: 800; line-height: 1.25; }

/* La description dit souvent où retirer le journal — mairie, bibliothèque,
   boîtes aux lettres. La tronquer ferait perdre le renseignement utile, et il
   n'y a que deux ou trois numéros à la fois. */
.carte-publication .legende { margin: 5px 0 0; font-size: 12px; line-height: 1.45; color: var(--gris); }
.carte-publication .legende p { margin: 0 0 5px; }
.carte-publication .legende p:last-child { margin-bottom: 0; }

.carte-publication .lire {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bleu);
}

.carte-publication .lire svg { width: 13px; height: 13px; }

/* ---------- Forum des associations ---------- */

/* L'écran du forum garde l'identité violette du portail plutôt que le bleu
   des autres sections : c'est un événement, pas une rubrique permanente. */
body.fond-forum {
  background: linear-gradient(to bottom, #f5f3ff, #fdf6f8 340px, #fdf6f8);
}

.entete-forum {
  background: linear-gradient(135deg, #4a1d6a, #6b2c5d 55%, #c24e6e);
  box-shadow: 0 10px 30px rgba(74, 29, 106, 0.3);
}

.entete-forum .annee {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
  font-weight: 800;
}

.affiche-forum {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  border-radius: var(--rayon);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  opacity: 0;
  animation: apparition 0.45s ease-out forwards;
}

/* ---------- Numéros d'urgence ---------- */

.alerte-vitale {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: var(--rayon);
  background: #ffe4e6;
  border: 1px solid rgba(190, 18, 60, 0.2);
}

.alerte-vitale .pastille-alerte {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(190, 18, 60, 0.15);
  color: #be123c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alerte-vitale .pastille-alerte svg { width: 26px; height: 26px; }
.alerte-vitale strong { display: block; font-size: 14px; color: #9f1239; }
.alerte-vitale span { font-size: 12px; color: #475569; }

.bloc-categorie {
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--rayon);
  background: var(--carte);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
  opacity: 0;
  animation: apparition 0.4s ease-out forwards;
}

.bloc-categorie .titre-cat {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}

.bloc-categorie .titre-cat h2 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.puce-cat {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.puce-cat svg { width: 18px; height: 18px; }

.numero {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  color: inherit;
  text-decoration: none;
}

.numero:first-of-type { border-top: none; }
.numero:active { opacity: 0.6; }
.numero .texte { flex: 1; min-width: 0; }
.numero .nom { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.numero .desc { display: block; font-size: 11.5px; color: var(--gris); }

.numero .tel {
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}

.mention {
  margin: 16px 0 0;
  font-size: 11px;
  font-style: italic;
  color: var(--gris);
  text-align: center;
}

/* ---------- États ---------- */

.etat { padding: 48px 16px; text-align: center; color: var(--gris); font-size: 14px; }
.etat strong { display: block; margin-bottom: 4px; color: var(--encre); font-size: 15px; }

.bandeau-hors-ligne {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- Fiche détaillée ---------- */

.voile {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
  opacity: 0;
  animation: fondu 0.2s ease-out forwards;
}

@keyframes fondu { to { opacity: 1; } }

.fiche {
  width: 100%;
  max-width: 26rem;
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 0 0 calc(var(--marge-bas) + 20px);
  transform: translateY(20px);
  animation: montee 0.25s ease-out forwards;
  -webkit-overflow-scrolling: touch;
}

@keyframes montee { to { transform: none; } }

.fiche .barre {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 12px 6px;
  background: linear-gradient(to bottom, #fff 70%, rgba(255, 255, 255, 0));
}

.fiche .fermer {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.fiche .contenu { padding: 0 20px; }
.fiche h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; line-height: 1.25; }
.fiche .quand { font-size: 13px; font-weight: 700; color: var(--bleu); }
.fiche .affiche-pleine { width: 100%; border-radius: 14px; margin: 14px 0; display: block; }

.infos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
  font-size: 14px;
  color: #334155;
}

.infos a { color: var(--bleu-fonce); word-break: break-word; }
.infos .ligne { display: flex; align-items: flex-start; gap: 9px; }
.infos svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: #94a3b8; }

.fiche .description { margin-top: 12px; font-size: 14px; color: #334155; }
.fiche .description p { margin: 0 0 10px; }
.fiche .description a { color: var(--bleu-fonce); }

/* Horaires d'un commerce : libellé du jour à gauche, plage à droite. */
.horaires {
  margin: 14px 0 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  overflow: hidden;
  font-size: 13.5px;
}

.horaires .jour {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.horaires .jour:last-child { border-bottom: none; }
.horaires .jour:nth-child(odd) { background: #f8fafc; }
.horaires .nom-jour { font-weight: 700; color: var(--encre); text-transform: capitalize; }
.horaires .plage { color: var(--gris); text-align: right; }
.horaires .jour.ferme .plage { color: var(--rouge, #dc2626); font-weight: 600; }

.titre-bloc {
  margin: 16px 0 0;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris);
}

.fiche .etiquette {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bleu-clair);
  color: var(--bleu-fonce);
  font-size: 11.5px;
  font-weight: 700;
}

/* ---------- Infos pratiques Mairie ---------- */

.statut {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: var(--rayon);
  border: 1px solid transparent;
}

.statut.ouvert { background: #d1fae5; border-color: rgba(4, 120, 87, 0.22); }
.statut.ferme  { background: #ffe4e6; border-color: rgba(190, 18, 60, 0.2); }

.statut .pastille-statut {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.statut .pastille-statut svg { width: 26px; height: 26px; }
.statut.ouvert .pastille-statut { background: rgba(4, 120, 87, 0.15); color: #047857; }
.statut.ferme .pastille-statut  { background: rgba(190, 18, 60, 0.15); color: #be123c; }

.statut strong { display: block; font-size: 14.5px; }
.statut.ouvert strong { color: #065f46; }
.statut.ferme strong  { color: #9f1239; }
.statut span { font-size: 12px; color: #475569; }

/* Le jour courant doit se retrouver d'un coup d'oeil dans le tableau : cette
   regle vient apres celle des lignes alternees, elle l'emporte donc. */
.horaires .jour.aujourdhui { background: var(--bleu-clair); }
.horaires .jour.aujourdhui .nom-jour { color: var(--bleu-fonce); }
.horaires .plage span { display: block; }

.legende-bloc { margin: 2px 0 10px; font-size: 12px; color: var(--gris); }

.grille-sitom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.vignette-sitom {
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
}

.vignette-sitom:active { transform: scale(0.98); }
.vignette-sitom img { display: block; width: 100%; height: auto; }

.legende-sitom {
  display: block;
  padding: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #334155;
}

.numero .chevron { flex: 0 0 auto; color: var(--gris-clair); }
.numero .chevron svg { width: 18px; height: 18px; }

/* ---------- Barre de navigation basse ---------- */

.barre-nav {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: max(env(safe-area-inset-bottom, 0px), 10px);
  z-index: 40;
  max-width: 26rem;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 5px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.16);
}

.onglet {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px;
  border: none;
  border-radius: 13px;
  background: none;
  color: var(--gris);
  font: inherit;
  font-size: 9.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.onglet svg { width: 23px; height: 23px; }

.onglet span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onglet:active { transform: scale(0.94); }
.onglet.actif { background: var(--bleu-clair); color: var(--bleu-fonce); }

/* La barre flotte au-dessus du contenu : on lui reserve sa hauteur en bas de
   page, sans quoi elle masquerait les dernieres lignes. */
body.avec-barre .page { padding-bottom: calc(var(--marge-bas) + 92px); }

/* Mention de version, uniquement sur l'accueil. */
/* Invitation à installer, posée juste avant le pied de page : assez visible
   pour se voir en fin de défilement, assez discrète pour ne pas se mettre en
   travers de ce que l'on est venu chercher. Elle s'écarte d'un geste. */
.invite-installation {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  padding: 12px 13px;
  border: 1px solid rgba(52, 84, 209, 0.18);
  border-radius: var(--rayon) var(--rayon) var(--rayon) 0;
  background: var(--carte);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
  color: inherit;
  text-decoration: none;
}

.invite-installation:active { transform: scale(0.99); }

.invite-installation .puce-invite {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--bleu-clair);
  color: var(--bleu);
}

.invite-installation .puce-invite svg { width: 20px; height: 20px; }
.invite-installation .texte { flex: 1; min-width: 0; }
.invite-installation .nom { display: block; font-size: 13.5px; font-weight: 700; }
.invite-installation .desc { display: block; margin-top: 1px; font-size: 11.5px; color: var(--gris); }

/* La croix est dessinée en CSS : c'est une cible de 28 px, pas un pictogramme
   de plus à charger. */
.invite-installation .ecarter {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--gris-clair);
  cursor: pointer;
}

.invite-installation .ecarter::before,
.invite-installation .ecarter::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
}

.invite-installation .ecarter::before { transform: translate(-50%, -50%) rotate(45deg); }
.invite-installation .ecarter::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.pied-page {
  margin: 20px 0 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gris-clair);
}

/* Bloc « Villages & Territoires ». Le logo a un fond blanc, celui des cartes
   aussi : il s'y pose sans bord ni cadre. Les marges du bloc sont annulées pour
   qu'il aille d'un côté à l'autre, la ligne de lien les reprend à son compte. */
.bloc-vt { padding: 0; overflow: hidden; }

.lien-vt {
  display: block;
  color: inherit;
  text-decoration: none;
}

.lien-vt:active { opacity: 0.8; }

.lien-vt img {
  display: block;
  width: 100%;
  height: auto;
}

.lien-vt .numero {
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* ---------- Installation ---------- */

/* Variante neutre du bandeau d'état : ni bonne ni mauvaise nouvelle, juste
   l'endroit où l'on se trouve. */
.statut.info { background: var(--bleu-clair); border-color: rgba(52, 84, 209, 0.2); }
.statut.info .pastille-statut { background: rgba(52, 84, 209, 0.14); color: var(--bleu); }
.statut.info strong { color: #1e3a8a; }

/* Une consigne se lit dans l'ordre : le numéro porte cette information, il
   n'est donc pas décoratif. Les étapes iOS sont numérotées par le compteur
   plutôt qu'à la main — retirer ou ajouter une étape ne renumérote rien. */
.etapes { counter-reset: etape; }

.etape {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.etape:first-of-type { border-top: none; }

.etape::before {
  counter-increment: etape;
  content: counter(etape);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 8px 8px 8px 0;
  background: var(--bleu);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
}

.etape .texte { flex: 1; min-width: 0; }
.etape .nom { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.etape .desc { display: block; margin-top: 2px; font-size: 12px; color: var(--gris); }

/* Le pictogramme cité dans la consigne, encadré comme un bouton pour qu'on le
   reconnaisse au milieu du texte. */
.touche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 1px;
  vertical-align: -6px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--bleu);
}

.touche svg { width: 14px; height: 14px; }

.bouton-installer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 13px;
  border: none;
  border-radius: var(--rayon);
  background: var(--bleu);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.bouton-installer:active { transform: scale(0.985); }
.bouton-installer svg { width: 18px; height: 18px; }

/* ---------- Confidentialité ---------- */

.bouton-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(190, 18, 60, 0.28);
  border-radius: 13px;
  background: #fff1f2;
  color: #be123c;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.bouton-danger:active { transform: scale(0.98); background: #ffe4e6; }
.bouton-danger svg { width: 18px; height: 18px; }

.liste-puces {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 13.5px;
  color: #334155;
}

.liste-puces li { margin-bottom: 5px; }

/* Lien discret sous la mention de version, sur l'accueil. */
/* Le pied reste au bas de l'écran quel que soit le défilement. Il n'existe
   que sur l'accueil, qui n'a pas de barre de navigation : rien à heurter.

   Le fond est translucide et flouté pour que le contenu qui passe dessous se
   devine sans gêner la lecture, et `.page` gagne la hauteur correspondante en
   marge basse, sans quoi le dernier bloc finirait caché derrière. */
body.accueil .pied-page {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  margin: 0;
  padding: 9px var(--marge-laterale) calc(env(safe-area-inset-bottom, 0px) + 9px);
  background: rgba(240, 249, 255, 0.9);
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(12px);
}

@supports not (backdrop-filter: blur(1px)) {
  body.accueil .pied-page { background: #f0f9ff; }
}

body.accueil .page { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 58px); }

.lien-pied {
  display: block;
  margin-top: 6px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gris);
  text-decoration: underline;
}

/* Le style des horaires capitalise chaque mot, ce qui convient aux noms de
   jours mais pas a des libelles de phrase. */
.horaires.sans-capitales .nom-jour { text-transform: none; }

/* ---------- Mouvement des pictogrammes ---------- */

/* Chaque tuile expose son decalage en variable : l icone s y accroche pour
   entrer juste apres elle, au lieu de demarrer en meme temps que toutes les
   autres pendant que les tuiles, elles, se decalent. */
.tuile, .bloc-forum { animation-delay: var(--retard, 0ms); }

/* L aplat termine a sa teinte de fond, pas a 1 : une opacite pleine en fin
   d animation ecraserait l attribut opacity du SVG et masquerait le trait. */
@keyframes gonfler {
  from { opacity: 0; transform: scale(0.35); }
  to   { opacity: 0.22; transform: none; }
}

@keyframes surgir {
  from { opacity: 0; transform: scale(0.84); }
  to   { opacity: 1; transform: none; }
}

@keyframes souffle {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* Apparition : l aplat se deploie derriere le trait. */
.tuile .icone .aplat,
.tuile .icone .trait {
  transform-origin: center;
  animation-delay: calc(var(--retard, 0ms) + 130ms);
  animation-fill-mode: both;
}

.tuile .icone .aplat { animation-name: gonfler; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.9, 0.25, 1); }
.tuile .icone .trait { animation-name: surgir;  animation-duration: 0.42s; animation-timing-function: ease-out; }

/* Appui : l icone s enfonce sous le doigt et rebondit au relachement, en echo
   au scale(0.97) que la tuile applique deja. */
.tuile .icone { transition: transform 0.19s cubic-bezier(0.2, 0.9, 0.25, 1); }
.tuile:active .icone { transform: scale(0.87); }

/* Veille : reservee aux numeros d urgence, la seule tuile qu on doit pouvoir
   trouver sans lire. Une respiration lente, apres l entree. */
.tuile.urgence .icone .aplat {
  animation-name: gonfler, souffle;
  animation-duration: 0.5s, 4s;
  animation-timing-function: cubic-bezier(0.2, 0.9, 0.25, 1), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-delay: calc(var(--retard, 0ms) + 130ms), 1.4s;
}

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

/* Pied de page : mention de version et lien cookies sur une seule ligne. */
.pied-page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
}

.lien-pied {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 0;
}

.lien-pied svg { width: 14px; height: 14px; }

/* ---------- Tuiles en verre depoli ---------- */

/* Le verre n'a d'effet que s'il a quelque chose à diffuser : sous la grille, le
   dégradé de page est presque blanc. Ces halos lui donnent cette matière. Ils
   sont peints dans le fond du body plutôt que dans un pseudo-élément
   `position: fixed` : un calque fixe couvrant toute la zone d'affichage est un
   suspect connu de défilement capricieux sur WebView Android, et l'effet ne
   perd presque rien à défiler avec la page. */
body.accueil {
  background-color: #f0f9ff;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(46rem 30rem at 92% 120px,  rgba(52, 84, 209, 0.20), transparent 70%),
    radial-gradient(38rem 26rem at 4% 470px,   rgba(56, 184, 248, 0.22), transparent 72%),
    radial-gradient(34rem 24rem at 88% 780px,  rgba(234, 88, 12, 0.13),  transparent 72%),
    radial-gradient(30rem 22rem at 12% 1000px, rgba(13, 148, 136, 0.14), transparent 72%),
    linear-gradient(to bottom, #e0f2fe, #f0f9ff 340px, #f0f9ff);
}

.tuile {
  background: rgba(255, 255, 255, 0.52);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
}

.tuile:active {
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

/* La tuile des urgences garde son liseré rouge : c est son seul repere avant
   lecture, et le verre ne doit pas l effacer. */
.tuile.urgence {
  border-color: rgba(220, 38, 38, 0.42);
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.14);
}

/* WebView trop ancienne pour le flou : on retombe sur un blanc plus couvrant,
   sans quoi les tuiles se dissoudraient dans les halos. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tuile { background: rgba(255, 255, 255, 0.9); border-color: rgba(52, 84, 209, 0.18); }
  .tuile.urgence { border-color: rgba(220, 38, 38, 0.45); }
}

/* Coin bas-gauche vif : c est la signature de forme des blocs de l accueil,
   reprise du parti pris du portail, qui casse un angle de chaque tuile. */
.tuile,
.bloc-forum { border-radius: var(--rayon) var(--rayon) var(--rayon) 0; }

/* ---------- Vue calendrier ---------- */

.onglets-vue {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

.onglets-vue button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--gris);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.onglets-vue button svg { width: 16px; height: 16px; }
.onglets-vue button[aria-pressed="true"] { background: var(--bleu-clair); color: var(--bleu-fonce); }

.mois {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.mois strong {
  font-size: 15.5px;
  font-weight: 800;
  text-transform: capitalize;
}

.mois button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 50%;
  background: #fff;
  color: var(--gris);
  cursor: pointer;
}

.mois button svg { width: 17px; height: 17px; }
.mois button:active { transform: scale(0.92); }

.noms-jours,
.grille-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.noms-jours span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gris);
  padding-bottom: 4px;
}

.jour-cal {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.jour-cal.vide { visibility: hidden; }
.jour-cal.hors-mois { color: var(--gris-clair); }
.jour-cal.avec { font-weight: 800; background: #eef3ff; }
.jour-cal.aujourdhui { box-shadow: inset 0 0 0 1.6px var(--bleu); }
.jour-cal.choisi { background: var(--bleu); color: #fff; }

.jour-cal .points { display: flex; gap: 2.5px; height: 5px; }
.jour-cal .point { width: 4.5px; height: 4.5px; border-radius: 50%; background: #ea580c; }
.jour-cal.choisi .point { background: #fff; }

.titre-jour {
  margin: 16px 0 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--encre);
}

.titre-jour span { font-weight: 500; color: var(--gris); }

/* Signature AVE3P : lisible comme un lien sans crier, dans un pied volontairement discret. */
.lien-ave3p { color: var(--gris); text-decoration: underline; }

/* ---------- Report du theme sur les ecrans secondaires ---------- */

/* Les halos passent sur toutes les pages, pas seulement l accueil. */
body {
  background-color: #f0f9ff;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(46rem 30rem at 92% 120px,  rgba(52, 84, 209, 0.18), transparent 70%),
    radial-gradient(38rem 26rem at 4% 470px,   rgba(56, 184, 248, 0.20), transparent 72%),
    radial-gradient(34rem 24rem at 88% 780px,  rgba(234, 88, 12, 0.11),  transparent 72%),
    radial-gradient(30rem 22rem at 12% 1000px, rgba(13, 148, 136, 0.12), transparent 72%),
    linear-gradient(to bottom, #e0f2fe, #f0f9ff 340px, #f0f9ff);
}

/* L ecran du forum garde son identite violette : memes halos, autre famille. */
body.fond-forum {
  background-color: #fdf6f8;
  background-image:
    radial-gradient(44rem 28rem at 90% 130px, rgba(107, 44, 93, 0.16),  transparent 70%),
    radial-gradient(36rem 26rem at 6% 520px,  rgba(194, 78, 110, 0.15), transparent 72%),
    radial-gradient(32rem 22rem at 86% 900px, rgba(74, 29, 106, 0.12),  transparent 72%),
    linear-gradient(to bottom, #f5f3ff, #fdf6f8 340px, #fdf6f8);
}

/* Cartes et blocs des ecrans secondaires : meme translucidite que l accueil,
   mais SANS backdrop-filter. Le fond a diffuser n est fait que de degrades
   doux, deja flous par nature : le flou n y ajouterait presque rien, alors
   qu il coute une couche composee par carte — sur une liste de 69 cartes qui
   defile, ca se paie. */
.carte-evenement,
.carte-asso,
.carte-annonce,
.bloc-categorie,
.statut,
.alerte-vitale,
.affiche-forum {
  background-color: rgba(255, 255, 255, 0.62);
  border-color: rgba(255, 255, 255, 0.78);
}

/* Ces trois-la portent une couleur de sens : on ne la dilue pas. */
.statut.ouvert { background-color: rgba(209, 250, 229, 0.82); border-color: rgba(4, 120, 87, 0.22); }
.statut.ferme  { background-color: rgba(255, 228, 230, 0.82); border-color: rgba(190, 18, 60, 0.2); }
.alerte-vitale { background-color: rgba(255, 228, 230, 0.82); border-color: rgba(190, 18, 60, 0.2); }
.carte-annonce { border-left-color: #f59e0b; }

/* Le coin bas-gauche vif devient la signature de toute l application. */
.carte-evenement,
.bloc-categorie,
.affiche-forum { border-radius: var(--rayon) var(--rayon) var(--rayon) 0; }

.carte-asso,
.carte-annonce { border-radius: 14px 14px 14px 0; }

.statut,
.alerte-vitale { border-radius: var(--rayon) var(--rayon) var(--rayon) 0; }

.vignette-sitom { border-radius: 12px 12px 12px 0; }

/* Les deux logos forment une paire : espaces serres entre eux, respiration
   normale avant le nom de la commune. */
.logos { display: flex; align-items: center; gap: 6px; }

/* Filigrane « #Jesoutiens mon commerçant » dans le bloc du marché, comme sur
   le portail. Le pseudo-element est absolu dans le bloc, jamais fixe : un
   calque fixe plein ecran perturbe le defilement sur WebView Android. */
.bloc-marche { position: relative; overflow: hidden; }

.bloc-marche::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("je-soutiens.jpg") center / contain no-repeat;
  opacity: 0.13;
  pointer-events: none;
}

/* Le contenu repasse au-dessus du filigrane. */
.bloc-marche > * { position: relative; }

/* ---------- Carte des commerces ---------- */

#carte {
  height: 60vh;
  min-height: 320px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--rayon) var(--rayon) var(--rayon) 0;
  overflow: hidden;
  background: #e2e8f0;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07);
}

/* Marqueur : le pictogramme duotone des commerces dans une pastille blanche,
   pour qu il reste lisible sur n importe quelle tuile de la carte. */
.marqueur-commerce {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0d9488;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.3);
}

.marqueur-commerce svg { width: 22px; height: 22px; }

.leaflet-popup-content { font-size: 13px; line-height: 1.4; margin: 10px 12px; }
.leaflet-popup-content strong { font-size: 13.5px; }
.leaflet-popup-content .pop-activite { color: var(--gris); font-size: 11.5px; }
.leaflet-popup-content .pop-adresse { color: var(--gris); font-size: 11.5px; }
.leaflet-container { font-family: inherit; }

.leaflet-popup-content .pop-fiche {
  margin-top: 8px;
  padding: 5px 11px;
  border: 1px solid rgba(13, 148, 136, 0.4);
  border-radius: 999px;
  background: #f0fdfa;
  color: #0d9488;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Ordre de superposition ---------- */

/* Leaflet numerote ses propres panneaux jusqu a 800 (tuiles 400, bulles 700,
   commandes 800). En confinant la carte dans son propre contexte d empilement,
   ces valeurs restent internes et ne rivalisent plus avec la barre de
   navigation ni avec la feuille de fiche. */
/* Sur l'écran qui ne montre qu'elle, la carte prend ce que les autres
   éléments laissent : en-tête, bouton, mention et barre du bas. `vh` d'abord
   pour les navigateurs anciens, `dvh` ensuite, qui tient compte de la barre
   d'adresse escamotable des téléphones. */
.carte-commune {
  height: calc(100vh - 330px);
  height: calc(100dvh - 330px);
  min-height: 380px;
}

#carte { position: relative; z-index: 0; }

/* Echelle explicite, du fond vers le premier plan. */
.barre-nav { z-index: 100; }
.voile { z-index: 1000; }

/* ---------- Page Partager ---------- */

/* Bouton discret dans l en-tete de l accueil, la ou l espace est libre. */
.bouton-entete {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  text-decoration: none;
}

.bouton-entete:active { transform: scale(0.94); }
.bouton-entete svg { width: 18px; height: 18px; }

/* Ouvrir l'adresse ou la copier : deux gestes voisins, donc deux moitiés
   d'une même ligne plutôt que deux rangées empilées. Le libellé passe au-dessus
   de l'adresse, faute de place pour les mettre côte à côte à 375 px. */
.actions-lien {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.action-lien {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 11px 8px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 13px 13px 13px 0;
  background: var(--carte);
  color: inherit;
  font: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.action-lien:active { transform: scale(0.98); }
.action-lien .puce-cat { width: 34px; height: 34px; }
.action-lien .puce-cat svg { width: 17px; height: 17px; }

.action-lien .nom {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.action-lien .desc {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--gris);
}

/* Le QR ouvre le bloc « Le lien », au-dessus des deux lignes d'action. Son
   adresse n'est plus répétée sous le code : elle figure déjà dans la ligne
   « Site public » juste en dessous. */
.qr-du-lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 12px 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.qr-du-lien img {
  width: min(220px, 62vw);
  height: auto;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.qr-du-lien .legende-bloc { margin: 0; text-align: center; }

/* ---------- Étiquettes et actions d'une fiche ---------- */

/* Une rangée : les catégories, puis les actions, toutes au même format. */
.rangee-etiquettes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.rangee-etiquettes .etiquette { margin-top: 0; }

/* Une action est une étiquette qui répond : même corps, même graisse, même
   capsule — un pictogramme et un curseur en plus. */
.fiche .etiquette.action-fiche {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}

.fiche .etiquette.action-fiche svg { width: 13px; height: 13px; }
.fiche .etiquette.action-fiche:active { transform: scale(0.97); }
.fiche .etiquette.action-fiche:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

/* L'inscription est l'action qui compte : elle prend la couleur du bandeau. */
.fiche .etiquette.action-fiche.principale {
  background: var(--bleu);
  color: #fff;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(92vw, 420px);
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
  animation: apparition 0.25s ease-out;
  transition: opacity 0.4s;
}

.toast.parti { opacity: 0; }

.bouton-partage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  border: none;
  border-radius: var(--rayon) var(--rayon) var(--rayon) 0;
  background: var(--bleu);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(52, 84, 209, 0.28);
  /* Le bouton sert aussi de lien sur l’écran Carte : sans cela, il porterait
     le soulignement des liens. */
  text-decoration: none;
}

.bouton-partage:active { transform: scale(0.985); }
.bouton-partage svg { width: 19px; height: 19px; }