/* Faire commune — feuille de style unique. Refonte vivante. */

:root {
  --rose:          #E88BA6;
  --rose-clair:    #FBEAF0;
  --rose-fonce:    #993556;

  --tilleul:       #C0DD97;
  --tilleul-clair: #EAF3DE;
  --tilleul-fonce: #3B6D11;

  --encre:  #1E1E1C;
  --pierre: #6E6E68;
  --papier: #FFFFFF;
  --trait:  #E2E2DC;

  --rayon-cadre: 10px;
  --rayon-bloc:  12px;

  --texte: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titre: "Outfit", "Nunito Sans", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Hauteurs des barres flottantes du bas. Toute règle de padding
     bas qui laisse la place aux onglets ou à la barre maire doit
     partir d'ici, jamais d'un nombre magique. */
  --onglets-hauteur:     68px;
  --barre-maire-hauteur: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--encre);
  font-family: var(--texte);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  padding: 0;  /* pleine largeur, aucune marge latérale */
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }

/* Le conteneur principal remplit la fenêtre : plus de cadre 430 px
   hérité de la maquette. Contenu, vidéo, barre d'onglets et pied de
   page touchent les deux bords de la fenêtre. Les blocs de contenu
   portent leur propre padding intérieur (voir .contenu). */
.page {
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--papier);
  border: 0;
  border-radius: 0;
  position: relative;
}

/* ── Enveloppe grand écran (≥ 900 px) ──────────────────────────────
   Sur téléphone et en dessous de 900 px, les wrappers de cadre
   deviennent transparents pour le layout (`display: contents`) : le
   DOM garde son comportement historique, sans branche spéciale à
   maintenir. Au-delà de 900 px, deux modes cohabitent :
   - `.mode-cadre` (défaut) : discours à gauche, cadre 402 × 874 au
     centre, mention + bouton de bascule sous le cadre ;
   - `.mode-large` : colonne unique 560 px centrée, les éléments
     fixes (bandeau, onglets, barre maire) reprennent l'ancrage au
     viewport, discours et bloc « hors » masqués. */
.cadre-page,
.cadre-colonne,
.cadre-app { display: contents; }
.cadre-discours,
.cadre-hors,
.cadre-invite-defilement { display: none; }

@media (min-width: 900px) {
  /* Sol de la page en mode « cadre » : ton sombre de la charte —
     encre proche du noir — pour faire ressortir le cadre blanc et
     signaler que l'application vit dans une maquette dédiée. Le
     texte de la colonne de discours bascule alors en clair. */
  body.mode-cadre {
    background: #1E1E1C;
    min-height: 100vh;
    padding-bottom: 0;
  }
  body.mode-cadre.avec-barre-flottante { padding-bottom: 0; }

  body.mode-cadre .cadre-page {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    padding: 40px 24px;
    min-height: 100vh;
    box-sizing: border-box;
  }
  body.mode-cadre .cadre-discours {
    display: block;
    flex: 0 1 420px;
    align-self: center;
  }
  body.mode-cadre .cadre-colonne {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
  }

  /* Le cadre — 402 × 874, coins arrondis généreux, ombre douce. Le
     contenu est organisé en colonne flex : bandeau + zone défilante +
     barre maire éventuelle + onglets. Seule la zone défilante scrolle.
     `overflow: hidden` clippe les coins arrondis et fait office de
     containing block pour les overlays absolus (volet courriel,
     confirmation d'envoi). */
  body.mode-cadre .cadre-app {
    display: flex;
    flex-direction: column;
    width: 402px;
    /* Hauteur portée de 874 à 900 px, plafonnée à 88vh pour rester
       entière sur les écrans bas (~15" 720 p en particulier). */
    height: 900px;
    max-height: 88vh;
    background: var(--papier);
    border-radius: 28px;
    /* Ombre repensée pour rester lisible sur fond sombre : un dépôt
       chaud fortement diffusé sous le cadre, plus un très léger
       liseré blanc pour redécouper le bord. */
    box-shadow:
      0 40px 90px rgba(0, 0, 0, 0.55),
      0 6px 18px rgba(0, 0, 0, 0.35),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    overflow: hidden;
    position: relative;
    isolation: isolate;
  }

  /* Bandeau, barre maire et onglets : plus « fixed » (qui se rapporte
     au viewport et casse dans un cadre), mais items flex non
     extensibles, toujours visibles sans participer au scroll. */
  body.mode-cadre .cadre-app > .bandeau {
    position: static;
    flex: 0 0 auto;
  }
  body.mode-cadre .cadre-app > .sentinelle-bandeau { display: none; }
  body.mode-cadre .cadre-app > main.page {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
  }
  /* Bandeau « Parler à Mme la Maire » : collé à la barre d'onglets,
     sans marge ni border-radius qui laisserait apparaître le papier
     entre les deux. Padding 12 px sur les côtés → la croix de
     fermeture reste ≥ 12 px du bord du cadre. */
  body.mode-cadre .cadre-app > .barre-flottante {
    position: static;
    transform: none;
    flex: 0 0 auto;
    margin: 0;
    max-width: none;
    left: auto;
    right: auto;
    bottom: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 12px;
    background: var(--papier);
  }
  body.mode-cadre .cadre-app > .barre-flottante.visible { transform: none; }
  /* Onglets collés en dessous du bandeau : filet supérieur retiré,
     padding gauche 12 px pour aligner l'accueil sur le même retrait
     que la croix de fermeture ci-dessus, cible tactile 44 px
     conservée. */
  body.mode-cadre .cadre-app > .onglets {
    position: static;
    flex: 0 0 auto;
    z-index: auto;
    left: auto;
    right: auto;
    bottom: auto;
    border-top: none;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  /* Fond noir mat (pour la barre maire flottante) : sans objet dans
     le cadre. */
  body.mode-cadre.avec-fond-noir::after { display: none; }

  /* Invitation au défilement : petite pastille ronde 40 px avec
     flèche vers le bas, centrée juste au-dessus de la barre d'onglets
     (position: absolute par rapport au cadre). Pulsation douce
     jusqu'à la première interaction de scroll, puis retirée par le
     contrôleur Stimulus. Le CSS neutralise la pulsation sous
     `prefers-reduced-motion`. */
  body.mode-cadre .cadre-invite-defilement {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: calc(var(--onglets-hauteur) + var(--barre-maire-hauteur) + 12px);
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(30, 30, 28, 0.72);
    color: #FFFFFF;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 40;
    animation: cadre-invite-pulse 1.6s ease-in-out infinite;
  }
  body.mode-cadre .cadre-invite-defilement[hidden] { display: none; }
  @keyframes cadre-invite-pulse {
    0%, 100% { transform: translate(-50%, 0);   opacity: 0.9; }
    50%      { transform: translate(-50%, 6px); opacity: 1;   }
  }
  @media (prefers-reduced-motion: reduce) {
    body.mode-cadre .cadre-invite-defilement { animation: none; }
  }

  /* Overlays plein écran (volet courriel, confirmation d'envoi) :
     ancrés au cadre au lieu du viewport pour ne pas déborder. */
  body.mode-cadre .volet-courriel,
  body.mode-cadre .confirmation-overlay {
    position: absolute;
  }

  /* Bloc hors cadre : mention permanente + bouton de bascule. */
  body.mode-cadre .cadre-hors {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 402px;
  }

  /* ── Mode « pleine largeur » ────────────────────────────────────
     Une colonne unique 560 px centrée, les éléments fixes reprennent
     leur ancrage au viewport. Le discours disparaît, la mention
     et le bouton de bascule (« revenir au cadre ») restent sous
     l'application. */
  body.mode-large {
    background: var(--papier);
  }
  body.mode-large .cadre-page,
  body.mode-large .cadre-colonne {
    display: contents;
  }
  body.mode-large .cadre-app {
    display: block;
    max-width: 560px;
    margin: 0 auto;
    background: var(--papier);
  }
  body.mode-large .bandeau {
    max-width: 560px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  body.mode-large .onglets,
  body.mode-large .barre-flottante {
    max-width: 560px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  body.mode-large .barre-flottante.visible {
    transform: translateX(-50%) translateY(0);
  }
  body.mode-large .cadre-hors {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 560px;
    margin: 24px auto;
    padding: 0 16px;
  }
  body.mode-large .cadre-discours { display: none; }

  /* ── Colonne de discours ─────────────────────────────────────────
     Sur fond sombre #1E1E1C, les couleurs de texte basculent en clair.
     Contrastes vérifiés :
       blanc sur #1E1E1C ~16:1
       #D8D5CE sur #1E1E1C ~11:1
       #A6A29A sur #1E1E1C ~5,3:1
     Tous ≥ AA. */
  body.mode-cadre .cadre-discours-titre,
  body.mode-cadre .cadre-discours-these,
  body.mode-cadre .cadre-discours-argument-titre {
    color: #FFFFFF;
  }
  body.mode-cadre .cadre-discours-arguments p,
  body.mode-cadre .cadre-discours-mention {
    color: #D8D5CE;
  }
  body.mode-cadre .cadre-discours-lien {
    color: #D8D5CE;
  }
  body.mode-cadre .cadre-discours-lien:hover { color: #FFFFFF; }

  .cadre-discours-titre {
    font-family: var(--titre);
    font-weight: 800;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--encre);
    margin: 0 0 24px;
  }
  .cadre-discours-these {
    font-family: var(--texte);
    font-size: 17px;
    line-height: 1.55;
    color: var(--encre);
    margin: 0 0 32px;
  }
  .cadre-discours-arguments {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .cadre-discours-arguments li {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cadre-discours-argument-titre {
    font-family: var(--titre);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.005em;
    color: var(--encre);
    margin: 0;
  }
  .cadre-discours-arguments p {
    font-family: var(--texte);
    font-size: 14px;
    line-height: 1.55;
    color: #4A4A45;
    margin: 0;
  }
  .cadre-discours-mention {
    font-family: var(--texte);
    font-size: 13px;
    font-style: italic;
    color: #4A4A45;
    line-height: 1.5;
    margin: 32px 0 12px;
  }
  .cadre-discours-lien {
    display: inline-block;
    font-family: var(--texte);
    font-size: 13px;
    color: #4A4A45;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .cadre-discours-lien:hover { color: var(--encre); }
  .cadre-discours-lien:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* ── Mention et bouton hors cadre ──────────────────────────────── */
  .cadre-mention-bas {
    font-family: var(--texte);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    margin: 0;
    max-width: 32ch;
    color: #4A4A45;
  }
  .cadre-bascule-form { margin: 0; }
  .cadre-bascule {
    font-family: var(--texte);
    font-size: 13px;
    background: none;
    border: none;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 6px 8px;
    color: #4A4A45;
  }
  .cadre-bascule:hover { color: var(--encre); }
  body.mode-cadre .cadre-mention-bas { color: #D8D5CE; }
  body.mode-cadre .cadre-bascule       { color: #D8D5CE; }
  body.mode-cadre .cadre-bascule:hover { color: #FFFFFF; }
  .cadre-bascule:focus-visible {
    outline: 2px solid #1B5BFF;
    outline-offset: 2px;
    border-radius: 4px;
  }
  body.mode-cadre .cadre-bascule:focus-visible { outline-color: #FFFFFF; }
}

/* ── Bandeau : bande blanche sticky, dans le flux ─────────────────── */
/* Sentinelle 1 px avant le bandeau, cible d'un IntersectionObserver :
   quand elle sort du champ, on ajoute .scrollee au bandeau et une
   ombre légère apparaît. */
.sentinelle-bandeau { display: block; height: 1px; }

.bandeau {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  margin: 0;
  height: 56px;
  padding: 0 16px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--trait);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: box-shadow 0.2s ease;
}
.bandeau.scrollee {
  box-shadow: 0 2px 8px rgba(30, 30, 28, 0.08);
}
.bandeau .commune {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #1E1E1C;
  text-decoration: underline;
  text-decoration-color: var(--rose);
  text-decoration-thickness: 4px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}
.bandeau .icones { display: flex; align-items: center; gap: 10px; }
/* Loupe simple : pas de fond, icône 22 px couleur encre. */
.bandeau .icones .loupe {
  width: 32px;
  height: 32px;
  color: #1E1E1C;
  background: none;
  border-radius: 999px;
}
.bandeau .icones .loupe:hover { background: #F5F5F2; }
.bandeau .icones .loupe svg { width: 22px; height: 22px; }
.bandeau .icones a,
.bandeau .icones button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: none;
  border: none;
  padding: 0;
  color: #1E1E1C;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.bandeau .icones a:hover,
.bandeau .icones button:hover { background: #F5F5F2; }

/* Cloche « recevoir les alertes de la commune » : rond plein 36 px,
   fond bleu #1B5BFF, icône blanche 20 px, pastille de signalement
   rouge #E5442E cerclée de blanc en haut à droite tant qu'aucun
   abonnement n'est rattaché à l'appareil. Mouvement amplifié
   (scale + balancement) sur cycle de 2 s, pause d'1 s entre
   chaque cycle. S'arrête au survol et disparaît sous
   `prefers-reduced-motion` ou une fois l'habitant abonné. */
.bandeau .icones .cloche {
  position: relative;
  width: 36px;
  height: 36px;
  background: #1B5BFF;
  color: #FFFFFF;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.bandeau .icones .cloche:hover { background: #0F3FC2; }
.cloche svg {
  width: 20px;
  height: 20px;
  color: #FFFFFF;
  transform-origin: 50% 30%;
}
.cloche--signale svg {
  animation: cloche-sonne 3000ms ease-in-out infinite;
}
.cloche--signale:hover svg { animation-play-state: paused; }
.cloche-pastille {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #E5442E;
  border: 2px solid #FFFFFF;
  box-sizing: content-box;
  pointer-events: none;
}
/* 0 → 66,6 % : les 2 s d'animation (balancement + scale) ;
   66,6 → 100 % : la pause d'1 s, la cloche immobile à sa taille
   d'origine, prête à repartir. */
@keyframes cloche-sonne {
  0%,   66.6%, 100% { transform: rotate(0deg)   scale(1); }
  6%                { transform: rotate(-18deg) scale(1.10); }
  13%               { transform: rotate( 20deg) scale(1.20); }
  20%               { transform: rotate(-14deg) scale(1.15); }
  27%               { transform: rotate( 14deg) scale(1.15); }
  33%               { transform: rotate(-10deg) scale(1.10); }
  40%               { transform: rotate(  8deg) scale(1.08); }
  47%               { transform: rotate( -5deg) scale(1.05); }
  55%               { transform: rotate(  3deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau { transition: none; }
  .cloche--signale svg { animation: none; }
}

/* ── Hero pleine largeur, 340 px, sans coin arrondi en haut ────────── */
.hero {
  position: relative;
  margin: 0;
  width: 100%;
  height: 340px;
  border-radius: 0;
  overflow: hidden;
  background: #EAF3DE;
  /* Le carrousel « Ce qui bouge » chevauchera cette vidéo de 32 px
     (voir `.contenu > .quinzaine:first-child` plus bas). Un dégradé
     posé sur les 80 derniers pixels du hero l'assombrit légèrement
     pour que la carte se détache de n'importe quelle image de fond. */
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  z-index: 1;
}
.hero-poster { display: none; }
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.32));
  pointer-events: none;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video  { display: none; }
  .hero-poster { display: block; }
}
/* Voile supprimé : le bandeau est désormais opaque dans le flux,
   plus besoin d'assombrir le haut de la vidéo pour la lisibilité. */

/* ── Conteneur du contenu ──────────────────────────────────────────── */
.contenu {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Bandeau alertes exceptionnelles (au-dessus de la quinzaine) ──── */
.alertes-bandeau {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.alerte {
  background: #F6EEDC;
  border-left: 4px solid #9A6510;
  border-radius: 12px;
  padding: 12px 14px;
  color: #4A2E00;
  font-family: var(--texte);
}
.alerte-etiquette {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #9A6510;
  margin: 0 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.alerte-puce {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9A6510;
  display: inline-block;
  animation: alerte-clignote 1.4s ease-in-out infinite;
}
@keyframes alerte-clignote {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .alerte-puce { animation: none; }
}
.alerte-titre {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #4A2E00;
  margin: 0;
}
.alerte-texte {
  font-size: 13px;
  line-height: 1.5;
  color: #5C3A00;
  margin: 6px 0 0;
}

/* ── La quinzaine — carrousel horizontal, quatre cartes, boucle ─────
   Le bloc tient sous 180 px de haut (numéro + date + piste ~140 px).
   Chaque carte porte l'étiquette de rubrique en petit, puis l'emoji
   et le titre en 16 px / 600, sur trois lignes au maximum. Le texte
   détaillé n'apparaît que sur la page de l'entrée. Défilement continu
   pausable au survol, au toucher, au focus, arrêté sous
   prefers-reduced-motion. */
.quinzaine {
  background: #F5F5F2;
  border-radius: 14px;
  padding: 20px 14px 16px;
  max-height: 320px;
  overflow: hidden;
}
/* Chevauchement sur le bas du hero, uniquement quand la quinzaine est
   le premier bloc de la page (pas d'alerte en tête). Marge négative
   qui compense les 14 px de padding-top de `.contenu` et remonte de
   32 px supplémentaires ; z-index pour passer au-dessus du hero ;
   coins arrondis en haut plus marqués ; ombre douce vers le haut
   pour que le bloc se lise comme une carte posée sur l'image. */
.contenu > .quinzaine:first-child {
  margin-top: calc(-14px - 32px);
  position: relative;
  z-index: 3;
  border-radius: 20px 20px 14px 14px;
  box-shadow: 0 -8px 24px rgba(30, 30, 28, 0.12);
}
/* Le titre « Ce qui bouge » sert d'entête de section ; comme il est
   posé dans un bloc déjà padded, on annule le margin-top que la règle
   générique `.section-titre` applique pour ne pas doubler l'air. */
.quinzaine > .section-titre { margin-top: 0; }
/* État vide : pas de bande, un seul message. La quinzaine à venir se
   lit comme un titre unique dans le bloc gris. */
.quinzaine--vide { padding: 22px 16px; }
.quinzaine-numero {
  font-family: var(--texte);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #4A4A45;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.quinzaine--vide .quinzaine-numero { color: #6E6E68; }

/* Piste et bandeau : la piste masque l'excédent horizontal, le bandeau
   glisse régulièrement en translation ; les cartes sont doublées côté
   ERB pour boucler sans saut visible. Le padding-top de 18 px absorbe
   à la fois le débord de 12 px de la pastille de date et son léger
   halo (4 px) — la pastille reste ainsi dans les bornes de la piste
   même sous `overflow: hidden`. */
.quinzaine-piste {
  overflow: hidden;
  padding-top: 18px;
  position: relative;
  /* La piste n'a pas de padding horizontal ; on aligne `scroll-padding`
     sur zéro pour que le point de snap de la première carte
     (`scroll-snap-align: start`) tombe exactement sur `scrollLeft = 0`
     dans le repli scrollable de `prefers-reduced-motion`. */
  scroll-padding-inline-start: 0;
}
.quinzaine-piste::-webkit-scrollbar { display: none; }
.quinzaine-bandeau {
  display: flex;
  gap: 10px;
  width: max-content;
  /* 2 s de délai avec `animation-fill-mode: backwards` : la bande est
     tenue à `translateX(0)` pendant les 2 premières secondes, quelle
     que soit la vitesse de rendu de la page. Le décalage subtil où la
     première carte pouvait apparaître grignotée par l'animation
     ayant déjà commencé (avant même que Stimulus ait connecté)
     disparaît. Le contrôleur `carrousel-quinzaine` continue par
     ailleurs de redémarrer l'animation sur navigation Turbo. */
  animation: quinzaine-defile 40s linear 2s infinite backwards;
  will-change: transform;
}
@keyframes quinzaine-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--pas, 0px))); }
}
.quinzaine-piste:hover .quinzaine-bandeau,
.quinzaine-piste:focus-within .quinzaine-bandeau,
.quinzaine-piste.pausee .quinzaine-bandeau { animation-play-state: paused; }

/* Une seule carte : pas de boucle, pas d'animation. */
.quinzaine-piste--solo { overflow: visible; }
.quinzaine-piste--solo .quinzaine-bandeau { animation: none; width: auto; }
.quinzaine-piste--solo .quinzaine-carte { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
  .quinzaine-piste { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
  .quinzaine-bandeau { animation: none; }
}

.quinzaine-carte {
  --pastille: #993556;
  box-sizing: border-box;
  flex: 0 0 240px;
  height: 186px;
  /* Le padding-top réserve la place de la pastille (58 px visibles pour
     un diamètre de 70 avec 12 px de débord + 8 px d'air) ; le contenu
     textuel commence en dessous. */
  padding: 66px 14px 14px;
  background: #FFFFFF;
  border-radius: 12px;
  /* Liseré coloré à gauche : signe visuel de rubrique, doublonné avec
     la pastille et la puce d'étiquette pour un repérage périphérique. */
  border-left: 3px solid var(--pastille);
  /* Ombre douce sous la carte, pour la faire flotter au-dessus du fond
     gris de la bande. */
  box-shadow: 0 2px 8px rgba(30, 30, 28, 0.10);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  /* On laisse la pastille dépasser du bord supérieur : `visible` ici
     et un padding-top sur la piste absorbent le débord. */
  overflow: visible;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.quinzaine-carte:hover {
  box-shadow: 0 4px 14px rgba(30, 30, 28, 0.14);
  transform: translateY(-1px);
}
.quinzaine-carte:focus-visible {
  outline: 2px solid var(--pastille);
  outline-offset: 3px;
}
/* Couleur de la pastille et de l'intitulé de rubrique par rubrique.
   Une seule variable `--pastille` porte la teinte, réutilisée sur le
   fond de la pastille, la couleur de l'étiquette et le focus. */
.quinzaine-carte--travaux         { --pastille: #9A6510; }
.quinzaine-carte--rendez-vous     { --pastille: #1B5BFF; }
.quinzaine-carte--action-possible { --pastille: #1E9E5A; }

/* Pastille ronde 70 px en haut à gauche, débordant de 12 px le bord
   supérieur de la carte — même quantité de débord qu'auparavant. Trois
   lignes centrées : le jour de la semaine abrégé en minuscules, le
   quantième en gros, le mois abrégé en petites majuscules. Texte
   blanc, fond de la rubrique. */
.quinzaine-pastille {
  position: absolute;
  top: -12px;
  left: 10px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--pastille);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* Un léger halo pour détacher la pastille du fond de la quinzaine. */
  box-shadow: 0 1px 4px rgba(30, 30, 28, 0.18);
}
.quinzaine-pastille-jour-semaine {
  font-family: var(--texte);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.quinzaine-pastille-jour {
  font-family: var(--titre);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.quinzaine-pastille-mois {
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Étiquette de rubrique : texte seul en petites majuscules, dans la
   couleur de la rubrique. Aucun aplat ni encadré — la pastille reste
   la seule tache colorée pleine de la carte. Alignée à gauche du
   titre, sous la pastille. */
.quinzaine-etiquette {
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pastille);
  line-height: 1.2;
  margin: 0;
}
.quinzaine-titre-carte {
  font-family: var(--texte);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--encre);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quinzaine-emoji {
  display: inline-block;
  margin-right: 6px;
  font-size: 17px;
  line-height: 1;
}

/* ── Filet court au-dessus d'un titre ─────────────────────────────
   Barre de 40 × 2 px alignée à gauche, posée 12 px au-dessus du
   texte, dans la couleur saturée de la rubrique. Le titre lui-même
   n'a aucune décoration : la respiration se fait via un padding-top
   de 14 px (2 px de filet + 12 px d'air) et un pseudo-élément absolu
   qui trace la barre. Une classe modificateur `.filet--<rubrique>`
   fixe la couleur via la variable CSS `--filet-couleur`. */
.filet {
  position: relative;
  padding-top: 14px;
}
.filet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--filet-couleur, #1E1E1C);
}
.filet--rose   { --filet-couleur: #E0367C; }
.filet--bleu   { --filet-couleur: #1B5BFF; }
.filet--vert   { --filet-couleur: #1E9E5A; }
.filet--ocre   { --filet-couleur: #9A6510; }
.filet--corail { --filet-couleur: #E5442E; }
.filet--jaune  { --filet-couleur: #F2B705; }
.filet--violet { --filet-couleur: #6E3AD6; }

/* ── Flèches de carrousel (bandes défilantes horizontales) ─────────
   Rendus dans un `.carrousel-cadre` qui enveloppe une bande scrollable
   (marquée `[data-carrousel-bande]`). Ronds blancs de 36 px à cheval
   sur le bord, chevron sombre au centre, ombre légère. Masqués aux
   extrémités par le JS (attribut `hidden`). Le cadre n'ajoute pas de
   contrainte de largeur : la bande garde son débordement à droite. */
.carrousel-cadre {
  position: relative;
}
.carrousel-fleche {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--trait);
  box-shadow: 0 2px 6px rgba(30, 30, 28, 0.14);
  color: #1E1E1C;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.carrousel-fleche:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 4px 10px rgba(30, 30, 28, 0.18);
}
.carrousel-fleche:active {
  transform: translateY(-50%) scale(0.98);
}
.carrousel-fleche:focus-visible {
  outline: 2px solid #1B5BFF;
  outline-offset: 3px;
}
/* Le chevron est un SVG carré 14 × 14 ; sa légère avancée vers le
   centre du bouton compense le vide optique côté pointe. */
.carrousel-fleche--precedent { left: -8px; }
.carrousel-fleche--precedent svg { margin-right: 2px; }
.carrousel-fleche--suivant   { right: -8px; }
.carrousel-fleche--suivant svg  { margin-left: 2px; }
.carrousel-fleche[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .carrousel-fleche,
  .carrousel-fleche:hover,
  .carrousel-fleche:active { transition: none; transform: translateY(-50%); }
}

/* ── Invite « Aujourd'hui, je veux… » ─────────────────────────────── */
/* Le titre reste seul au-dessus de la bande d'intentions. L'espace
   entre le titre et la première vignette vaut environ 16 px : le
   `gap: 14px` du parent `.contenu` s'ajoute au `padding-top: 4px`
   de `.intentions`. Aucune marge d'ancien sous-titre à compenser
   côté bas — l'élément `.invite-accompagnement` a été retiré. */
.invite-bloc {
  margin: 16px 0 0;
  padding: 0 4px;
}
.invite {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #1E1E1C;
  margin: 0;
}

/* ── Bande d'intentions : vignettes 150 px, carré coloré + étiquette.
   Toujours une seule rangée défilante horizontalement, quelle que
   soit la largeur d'écran. La bande sort du cadre du contenu pour
   toucher le bord droit de la fenêtre, de sorte que la troisième
   vignette soit coupée en deux et laisse deviner qu'il y en a
   d'autres. Aucun défilement automatique — c'est un menu. ── */
.intentions {
  display: flex;
  flex-wrap: nowrap;
  /* Alignement figé en haut : chaque vignette porte des hauteurs
     fixes (photo 150 + bandeau 64 = 214 px) et repose sur la même
     ligne de base. On empêche explicitement `align-items: stretch`
     (défaut) d'étirer une seule tuile si un cas de bord l'empêchait
     de tenir cette hauteur. */
  align-items: flex-start;
  gap: 12px;
  /* Débordement uniquement à droite : la 3e vignette est coupée par le
     bord de la fenêtre, la première reste alignée sur le contenu.
     Le padding vertical réserve l'espace nécessaire à l'ombre franche
     portée par les tuiles (décalée de 6 px vers le bas et la droite) et
     à leur enfoncement de 3 px au survol : jamais coupée en haut ni en
     bas malgré `overflow-y: hidden`. */
  margin: 0 -16px 0 0;
  padding: 8px 46px 14px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Autorise explicitement le déplacement horizontal au doigt et
     empêche la propagation du défilement au parent (nécessaire quand
     un ancêtre porte overflow: hidden, ce qui est le cas ici avec
     .page qui découpe le cadre en bas). */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.intentions.est-glissee { cursor: grabbing; scroll-snap-type: none; }
.intentions::-webkit-scrollbar { display: none; }

.intentions .tuile {
  --fond: var(--papier);
  --rayon-tuile: 12px;
  flex: 0 0 auto;
  width: 150px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: var(--rayon-tuile);
  /* Le clipping principal se fait ici : chaque tuile est un seul
     bloc aux quatre coins arrondis. Les enfants portent aussi leur
     rayon (belt-and-braces) pour tenir en cas de compositing où
     `overflow: hidden` + `border-radius` sur un ancêtre peuvent
     laisser passer des bords droits (Chromium avec layer promotion,
     Safari sur certains OS). */
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  /* Ombre franche, sans flou : bloc plein d'encre décalé de 6 px vers
     la droite et le bas. Le rayon de la tuile est reporté sur l'ombre
     (comportement natif de box-shadow), les coins arrondis suivent. */
  box-shadow: 6px 6px 0 0 #1E1E1C;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Au survol et au toucher, la vignette glisse de 3 px vers le bas et
   la droite ; l'ombre se réduit d'autant, comme si la carte s'enfonçait
   dans son propre bloc d'ombre. Le point extérieur de l'ombre reste
   fixe, seul le décalage visible change. */
.intentions .tuile:hover,
.intentions .tuile:active {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 0 #1E1E1C;
}
.intentions .tuile:focus-visible {
  outline: 2px solid #1B5BFF;
  outline-offset: 3px;
}

/* Six couleurs, inchangées. L'icône blanche est portée sur toutes. */
.intentions .tuile.corail { --fond: #E5442E; }
.intentions .tuile.rose   { --fond: #E0367C; }
.intentions .tuile.bleu   { --fond: #1B5BFF; }
.intentions .tuile.jaune  { --fond: #F2B705; }
.intentions .tuile.vert   { --fond: #1E9E5A; }
.intentions .tuile.violet { --fond: #6E3AD6; }

.intentions .tuile .icone-carre {
  position: relative;
  height: 150px;
  flex: 0 0 150px;
  background: var(--fond);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-top-left-radius: var(--rayon-tuile);
  border-top-right-radius: var(--rayon-tuile);
}
.intentions .tuile .icone-carre svg {
  width: 48px;
  height: 48px;
  display: block;
}
/* Cadre séparé pour la photo. Deux niveaux de transformation
   composés : la respiration lente s'applique sur l'image ; le zoom
   d'accueil, au survol de la tuile, s'applique sur le cadre. Les
   deux se composent visuellement, la photo est ainsi zoomée plus
   fortement au survol sans qu'on ait à casser l'animation.
   `overflow: hidden` sur le cadre garantit qu'aucune bavure ne sort
   du bandeau photo. */
.intentions .tuile .icone-cadre {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scale(1);
  transition: transform 400ms ease-out;
  will-change: transform;
}
.intentions .tuile:hover  .icone-cadre,
.intentions .tuile:focus-visible .icone-cadre { transform: scale(1.04); }
.intentions .tuile:active .icone-cadre        { transform: scale(1.02); transition-duration: 120ms; }

/* Photographie sous-jacente, servie telle quelle (aucune teinte
   ajoutée). Cadrée en cover, centrée, sans déformation. Respiration
   permanente : allers-retours de 14 s entre l'échelle 1 et 1.06,
   décalés de 2 s par tuile via nth-child pour éviter que les six
   respirent en cadence. Le débordement reste masqué par le cadre. */
.intentions .tuile .vignette-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  animation: intention-respire 14s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes intention-respire {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.intentions .tuile:nth-child(1) .vignette-photo { animation-delay:   0s; }
.intentions .tuile:nth-child(2) .vignette-photo { animation-delay:  -2s; }
.intentions .tuile:nth-child(3) .vignette-photo { animation-delay:  -4s; }
.intentions .tuile:nth-child(4) .vignette-photo { animation-delay:  -6s; }
.intentions .tuile:nth-child(5) .vignette-photo { animation-delay:  -8s; }
.intentions .tuile:nth-child(6) .vignette-photo { animation-delay: -10s; }

@media (prefers-reduced-motion: reduce) {
  .intentions .tuile .icone-cadre,
  .intentions .tuile:hover  .icone-cadre,
  .intentions .tuile:active .icone-cadre { transform: none; transition: none; }
  .intentions .tuile .vignette-photo     { animation: none; }
}

/* Bandeau du libellé : c'est lui qui porte la couleur de la
   catégorie, en aplat plein. Coin bas arrondi via `overflow: hidden`
   sur la tuile. Texte en blanc partout, sauf sur le jaune (#1A1A1A)
   pour un contraste WCAG AA large-text au-dessus de 4,5:1.
   Contrastes vérifiés sur label 15 px / 600 :
     corail 4.04 · rose 4.25 · bleu 5.06 · violet 6.13 · vert 3.46
     jaune #1A1A1A 9.56. */
.intentions .tuile .etiquette {
  background: var(--fond);
  border: 0;
  /* Hauteur figée, calée sur deux lignes de texte à 15 px / 1.2
     line-height (2 × 18 px = 36 px) plus 14 px de respiration
     verticale de part et d'autre. Toutes les vignettes portent le
     même bandeau, qu'elles tiennent sur une ou deux lignes. */
  height: 64px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: var(--rayon-tuile);
  border-bottom-right-radius: var(--rayon-tuile);
  flex: 0 0 auto;
}
.intentions .tuile .verbe {
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  text-align: center;
  text-transform: lowercase;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.intentions .tuile.jaune .verbe { color: #1A1A1A; }

@keyframes ligne-apparait {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .intentions .tuile,
  .intentions .tuile:hover,
  .intentions .tuile:focus-visible,
  .intentions .tuile:active { transform: none; transition: none; }
  /* On garde l'ombre pleine identique dans tous les états : sans
     translation, on ne montre pas l'enfoncement. */
  .intentions .tuile:hover,
  .intentions .tuile:active { box-shadow: 6px 6px 0 0 #1E1E1C; }
}

/* ── Carte du territoire ───────────────────────────────────────────── */
.carte {
  margin: 0;
  border: 1px solid var(--trait);
  border-radius: 12px;
  overflow: hidden;
  background: var(--papier);
}

/* Cadre de la carte : conserve le ratio natif de l'image (1200 × 670)
   pour que les pastilles positionnées en pourcentage retombent au bon
   endroit à toutes les tailles. Coins arrondis 12 px hérités de
   `.carte` via `overflow: hidden`. */
.carte-plan {
  position: relative;
  display: block;
  line-height: 0;
  aspect-ratio: 1200 / 670;
  overflow: hidden;
}
.carte-fond {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Repère numéroté posé sur la carte : pastille ronde + étiquette
   blanche translucide au nom du quartier. Chaque repère est ancré par
   ses coordonnées CSS `--x` / `--y` en pourcentage ; la pastille est
   centrée sur ce point grâce à une petite translation, l'étiquette
   flotte à droite juste après. */
.repere {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  /* Le point de référence est le centre de la pastille (12 px du bord
     dans une pastille de 24 px). On décale l'ensemble pour que (X, Y)
     coïncide avec ce centre. */
  transform: translate(-12px, -12px);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  white-space: nowrap;
}
.repere-pastille {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1E9E5A;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  color: #FFFFFF;
  font-family: var(--texte);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.repere--attente .repere-pastille {
  background: #E0367C;
}
.repere-etiquette {
  background: rgba(255, 255, 255, 0.85);
  color: #1E1E1C;
  border-radius: 4px;
  padding: 3px 7px;
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.carte .legende {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--trait);
  background: var(--papier);
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  line-height: 1.5;
}
.carte .legende .ligne { display: block; }
.carte .legende .num {
  color: var(--encre);
  font-weight: 500;
  margin-right: 4px;
}
.carte .legende .sep { color: var(--trait); margin: 0 8px; }

/* ── Vos questions ─ carte d'exemple + bouton d'accès à l'index ─────
   Sur l'accueil, la dernière question dont la réponse a été publiée
   sert d'illustration de la boucle qui se referme. La carte entière
   est cliquable et mène à l'écran de suivi ; en dessous, un bouton
   sombre pleine largeur mène à l'index complet. */
.vos-questions-carte {
  display: block;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 16px 18px 14px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.vos-questions-carte:hover,
.vos-questions-carte:focus-visible {
  border-color: #1A1A1A;
  box-shadow: 0 4px 12px rgba(30, 30, 28, 0.10);
  outline: none;
}
/* Citation de la question : texte courant, non gras, avec un
   guillemet ouvrant décoratif rose posé en marge gauche (position
   absolue, hors du flux du texte). Le texte lui-même s'écrit sans
   guillemets — le décoratif joue seul ce rôle typographique. */
.vos-questions-question {
  position: relative;
  padding-left: 28px;
  font-family: var(--texte);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: #1E1E1C;
  margin: 0 0 14px;
}
.vos-questions-question::before {
  content: "«";
  position: absolute;
  left: -4px;
  top: -8px;
  font-family: var(--titre);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  color: #F4C0D1;
  pointer-events: none;
}
.vos-questions-reponse {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-top: 14px;
  border-top: 1px solid var(--trait);
}
.vos-questions-vignette {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.vos-questions-reponse-corps {
  flex: 1 1 auto;
  min-width: 0;
}
.vos-questions-reponse-nom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 13px;
  color: var(--encre);
  margin: 0 0 4px;
  line-height: 1.2;
}
.vos-questions-reponse-extrait {
  font-family: var(--texte);
  font-size: 13px;
  line-height: 1.45;
  color: #4A4A45;
  margin: 0;
  /* Deux premières lignes seulement, terminées par des points de
     suspension automatiques dès que le texte dépasse. Les
     éventuels retours à la ligne du texte source sont normalisés
     par `white-space: normal` (défaut) — le texte se lit sur deux
     lignes visuelles quelles que soient les coupures d'origine. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bouton d'accès à l'index des questions : léger, centré, largeur
   ajustée au contenu. Fond blanc bordé de 1,5 px d'encre, texte
   sombre 15 px / 600, chevron simple à droite. Repose sur le fond
   clair de la section, sans imiter le bandeau fixe. */
.bouton-vers-index {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: #FFFFFF;
  color: #1E1E1C;
  border: 1.5px solid #1E1E1C;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  transition: background-color 0.15s ease;
}
.bouton-vers-index:hover,
.bouton-vers-index:focus-visible {
  background: #F5F5F2;
  outline: none;
}
.bouton-vers-index:focus-visible {
  box-shadow: 0 0 0 3px rgba(27, 91, 255, 0.30);
}
.bouton-vers-index-fleche {
  flex: 0 0 auto;
}

/* ── Index public des questions au maire ──────────────────────────── */

/* Recherche : champ arrondi plein avec une loupe à gauche. Le bouton
   « Chercher » reste distinct pour la validation. */
.questions-recherche {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.questions-recherche-champ {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}
.questions-recherche-loupe {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #6E6E68;
  pointer-events: none;
}
.questions-recherche input[type="search"] {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--texte);
  font-size: 14px;
  color: var(--encre);
  background: #F5F5F2;
  appearance: none;
}
.questions-recherche input[type="search"]::placeholder { color: #6E6E68; }
.questions-recherche input[type="search"]:focus {
  outline: none;
  border-color: #1B5BFF;
  background: var(--papier);
  box-shadow: 0 0 0 3px rgba(27, 91, 255, 0.15);
}

/* Filtres sur deux rangées nettes : l'état d'abord, les sujets ensuite,
   séparés par un filet discret. */
.questions-filtres {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.filtres-groupe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
/* Deux rangées de filtres bien séparées par l'écart (`gap: 10px` du
   parent) : plus de filet, la respiration suffit. */
.filtres-sujets {
  padding-top: 0;
  border-top: none;
}
.questions-filtres a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  font-family: var(--texte);
  font-size: 13px;
  color: var(--encre);
  text-decoration: none;
  background: var(--papier);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.questions-filtres a:hover { border-color: #1A1A1A; }
/* Actifs : la pastille prend la couleur de sa rubrique (état ou sujet)
   en fond plein, avec le texte lisible dessus. */
.questions-filtres a.actif { border-color: transparent; color: #FFFFFF; }
.filtre-etat--toutes    { background: #1A1A1A; }
.filtre-etat--repondues { background: #1E9E5A; }
.filtre-etat--en-cours  { background: #9A6510; }
.filtres-sujets a {
  font-size: 12px;
  padding: 5px 10px;
  color: var(--pierre);
}
/* Couleur pleine par sujet, appliquée à l'état actif. Textes clairs
   partout ; seule la nuance jaune passe en texte encre pour rester
   lisible. */
/* Actifs des filtres de sujet : chaque bouton prend la couleur pleine
   de sa rubrique, alignée sur la palette des pastilles ci-dessous.
   Le libellé « autre » n'apparaissant plus, aucune règle ne lui est
   plus associée. */
.filtre-sujet--voirie.actif          { background: #9A6510; color: #FFFFFF; }
.filtre-sujet--ecoles.actif          { background: #1B5BFF; color: #FFFFFF; }
.filtre-sujet--environnement.actif   { background: #1E9E5A; color: #FFFFFF; }
.filtre-sujet--urbanisme.actif       { background: #6E3AD6; color: #FFFFFF; }
.filtre-sujet--vie-associative.actif { background: #E5442E; color: #FFFFFF; }

/* Cartes de question : bloc blanc arrondi, ombre douce, léger
   décollement au survol. Une pastille ronde à gauche porte l'émoji
   du sujet — elle remplace l'étiquette textuelle et rend le liseré
   coloré superflu. */
.questions-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.question-carte {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--papier);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(30, 30, 28, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.question-carte:hover,
.question-carte:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(30, 30, 28, 0.14);
  outline: none;
}

/* Photo à gauche de la carte : 72 × 72, coins arrondis 8 px, cadrage
   `cover` centré par défaut. Servie par le helper `photo_sujet`, qui
   choisit une image par sujet ou une image commune (repli) selon la
   parité de l'identifiant de la question. */
.question-photo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.question-corps {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.question-contenu {
  font-family: var(--texte);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--encre);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.question-meta {
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  line-height: 1.4;
  margin: 0;
}
.question-meta-sep {
  margin: 0 4px;
  color: #B7B7B0;
}
.question-vignette {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.questions-poser {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.lien-toutes-questions {
  margin-top: 16px;
  font-family: var(--texte);
  font-size: 14px;
  text-align: center;
}
.lien-toutes-questions a {
  color: var(--encre);
  text-decoration: underline;
  text-decoration-color: rgba(30, 30, 28, 0.35);
  text-underline-offset: 3px;
}
.lien-toutes-questions a:hover { text-decoration-color: currentColor; }

/* ── Flash (notice/alert) ──────────────────────────────────────────── */
.flash {
  margin: 8px 14px 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--texte);
  font-size: 13px;
  line-height: 1.4;
}
.flash-notice { background: #EAF3DE; color: #173404; }
.flash-alert  { background: #FBEAF0; color: #993556; }

/* ── En-tête d'écran ───────────────────────────────────────────────── */
.ecran-header { margin-bottom: 4px; }
.retour {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  text-decoration: none;
  margin-bottom: 6px;
}
.retour:hover { color: var(--encre); text-decoration: underline; }
.ecran-titre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  color: var(--encre);
  letter-spacing: -0.02em;
  margin-top: 24px;
  margin-bottom: 4px;
}
.ecran-intro {
  font-family: var(--texte);
  font-size: 14px;
  color: #6E6E68;
  line-height: 1.5;
  margin-top: 6px;
}
.section-titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--encre);
  margin: 24px 0 10px;
}

/* ── Filtres pastilles (inspiration Paris) ─────────────────────────── */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}
.filtres a {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: #F5F5F2;
  font-family: var(--texte);
  font-size: 13px;
  font-weight: 600;
  color: #1E1E1C;
  text-decoration: none;
  line-height: 1.2;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filtres a:hover { border-color: #1A1A1A; }
.filtres a.actif {
  background: #1A1A1A;
  border-color: #1A1A1A;
  color: #FFFFFF;
}

/* ── Cartes vignette (Paris) : image carrée + titre + date + pin ── */
.carte-vignette {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  padding: 12px 12px;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 14px;
  text-decoration: none;
  color: var(--encre);
  transition: border-color 0.15s ease;
}
a.carte-vignette:hover,
a.carte-vignette:focus-visible {
  border-color: #1A1A1A;
  outline: none;
}
.carte-vignette-thumb {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 28px;
  overflow: hidden;
  flex-shrink: 0;
}
.carte-vignette-thumb.violet { background: linear-gradient(135deg, #6E3AD6, #9E6EE6); }
.carte-vignette-thumb.rose   { background: linear-gradient(135deg, #E0367C, #E88BA6); }
.carte-vignette-thumb.bleu   { background: linear-gradient(135deg, #1B5BFF, #6EA0FF); }
.carte-vignette-thumb.vert   { background: linear-gradient(135deg, #1E9E5A, #6ECB93); }
.carte-vignette-thumb.jaune  { background: linear-gradient(135deg, #F2B705, #F7D25A); color: #1A1A1A; }
.carte-vignette-thumb.corail { background: linear-gradient(135deg, #E5442E, #F58274); }

.carte-vignette .corps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.carte-vignette .titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  color: var(--encre);
  letter-spacing: -0.005em;
}
.carte-vignette .date {
  font-family: var(--texte);
  font-size: 13px;
  color: #6E6E68;
  font-weight: 600;
}
.carte-vignette .lieu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--texte);
  font-size: 13px;
  color: var(--encre);
  min-width: 0;
}
.carte-vignette .lieu-texte {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pin-lieu {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #FDF0CE;
  color: #8A6A11;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pin-lieu svg { width: 12px; height: 12px; }

/* ── Lien « Voir plus → » ─────────────────────────────────────────── */
.voir-plus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--texte);
  font-size: 14px;
  font-weight: 700;
  color: var(--encre);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.voir-plus:hover { color: #1B5BFF; }
.voir-plus svg { width: 14px; height: 14px; }

/* ── Mes démarches ─ bande horizontale défilante ─────────────────── */
.acces-rapides { display: flex; flex-direction: column; gap: 12px; }
.acces-rapides-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.acces-rapides-tete .section-titre { margin: 0; }

/* Débordement uniquement à droite : la troisième vignette est coupée
   par le bord de la fenêtre, la première reste alignée sur le
   contenu de .section-claire. Barre de défilement masquée. */
.acces-rapides-piste {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  /* Padding vertical modeste : les vignettes portent une ombre douce
     (flou de 8 px, décalée de 2 px). */
  margin: 0 -14px 0 0;
  padding: 4px 40px 12px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.acces-rapides-piste.est-glissee { cursor: grabbing; scroll-snap-type: none; }
.acces-rapides-piste::-webkit-scrollbar { display: none; }

.acces-rapide {
  flex: 0 0 130px;
  width: 130px;
  min-height: 138px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 8px;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 14px;
  text-decoration: none;
  color: var(--encre);
  font-family: var(--texte);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  /* Ombre douce, discrète, cohérente avec le fond blanc des vignettes :
     décalée de 2 px vers le bas, flou de 8 px, encre à 12 %. Différente
     à dessein de l'ombre franche des vignettes d'intention — les deux
     bandes se distinguent au premier regard. */
  box-shadow: 0 2px 8px rgba(30, 30, 28, 0.12);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.acces-rapide:hover,
.acces-rapide:active {
  border-color: #1A1A1A;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 30, 28, 0.16);
}
.acces-rapide:focus-visible {
  border-color: #1A1A1A;
  outline: 2px solid #1B5BFF;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .acces-rapide,
  .acces-rapide:hover,
  .acces-rapide:active { transform: none; transition: none; box-shadow: 0 2px 8px rgba(30, 30, 28, 0.12); }
}
.acces-rapide .cercle {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #DCE8F7;
  color: #1B5BFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.acces-rapide .cercle svg { width: 22px; height: 22px; }
.acces-rapide-libelle {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Alternance de fond blanc / gris clair pour rythmer la page.
   Compense le padding latéral de .contenu (14 px) et le gap flex
   pour donner l'impression d'une bande pleine largeur. */
.section-claire {
  margin: 0 -14px;
  padding: 24px 14px;
  background: #F5F5F2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Page provisoire ──────────────────────────────────────────────── */
.page-provisoire {
  padding: 40px 24px;
  background: #F5F5F2;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--texte);
  color: var(--encre);
  font-size: 15px;
  line-height: 1.5;
}

/* ── Cartes de liste ──────────────────────────────────────────────── */
.liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.carte-item {
  padding: 12px 14px;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 12px;
  color: var(--encre);
  text-decoration: none;
  display: block;
}
a.carte-item:hover { border-color: #639922; }
.carte-item .item-titre {
  font-family: var(--texte);
  font-weight: 500;
  font-size: 14px;
  color: var(--encre);
  line-height: 1.3;
}
.carte-item .meta {
  margin-top: 4px;
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  line-height: 1.4;
}
.carte-item .resume {
  margin-top: 6px;
  font-family: var(--texte);
  font-size: 13px;
  color: var(--encre);
  line-height: 1.45;
}
.carte-item .en-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.date-evenement {
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  margin-bottom: 4px;
}

/* Chips */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}
.chip-quartier   { background: #EAF3DE; color: #173404; }
.chip-autorite   { background: #EAF3DE; color: #173404; }
.chip-autorite.hors-commune { background: #FBEAF0; color: #993556; }
.chip-statut     { background: #F5F5F2; color: var(--encre); }
.chip-montant    { background: #EAF3DE; color: #173404; }

/* ── Formulaire ───────────────────────────────────────────────────── */
.formulaire {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.champ label {
  display: block;
  font-family: var(--texte);
  font-size: 13px;
  font-weight: 500;
  color: var(--encre);
  margin-bottom: 6px;
}
.champ input,
.champ textarea,
.champ select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--trait);
  border-radius: 8px;
  font-family: var(--texte);
  font-size: 14px;
  color: var(--encre);
  background: var(--papier);
}
.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  outline: 2px solid #639922;
  outline-offset: 1px;
  border-color: #639922;
}
.champ textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
.champ .aide {
  margin-top: 4px;
  font-size: 12px;
  color: #6E6E68;
}
.champ .erreur {
  margin-top: 4px;
  font-size: 12px;
  color: #993556;
}
.champ.avec-erreur input,
.champ.avec-erreur textarea,
.champ.avec-erreur select {
  border-color: #ED93B1;
}
.champ.avec-erreur label { color: #993556; }
.bouton {
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--encre);
  color: var(--papier);
  border: none;
  font-family: var(--texte);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.bouton:hover { background: #000; }

/* ── Bloc « suivre ce sujet » (bas de page) ────────────────────────── */
.suivre-sujet {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: #FBFBF7;
  margin-top: 16px;
}
.suivre-sujet--deja { background: #EAF3DE; border-color: #C0DD97; }
.suivre-sujet-invite {
  font-family: var(--texte);
  font-size: 15px;
  line-height: 1.4;
  color: var(--encre);
  margin: 0;
}
.suivre-sujet-verbe {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pierre);
  display: block;
  margin-bottom: 2px;
}
.suivre-sujet-nom {
  font-weight: 700;
  color: var(--encre);
}
.suivre-sujet-note {
  font-family: var(--texte);
  font-size: 12px;
  color: var(--pierre);
  line-height: 1.4;
  margin: 0;
}
.suivre-sujet form { margin: 0; }

/* ── Panneau d'abonnement (dialog partagé pied de page + quinzaine) ─ */
.panneau-abonnement {
  border: 0;
  padding: 0;
  margin: auto;
  border-radius: 16px;
  background: var(--papier);
  color: var(--encre);
  max-width: min(460px, calc(100vw - 24px));
  width: 100%;
  box-shadow: 0 20px 50px rgba(20, 48, 44, 0.25);
}
.panneau-abonnement::backdrop {
  background: rgba(20, 48, 44, 0.55);
  backdrop-filter: blur(2px);
}
.panneau-abonnement[open] {
  animation: panneau-apparaitre 180ms ease-out;
}
@keyframes panneau-apparaitre {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .panneau-abonnement[open] { animation: none; }
}
.panneau-abonnement-cadre {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panneau-abonnement-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.panneau-abonnement-tete h2 {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--encre);
  margin: 0;
}
.panneau-abonnement-fermer {
  background: none;
  border: 0;
  padding: 6px;
  color: var(--pierre);
  cursor: pointer;
  border-radius: 8px;
}
.panneau-abonnement-fermer:hover { background: #F5F5F2; color: var(--encre); }
.panneau-abonnement-fermer svg { width: 16px; height: 16px; display: block; }

.actions-abonnement {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.actions-abonnement .bouton {
  align-self: stretch;
  text-align: center;
}
.bouton-notification { align-self: stretch; text-align: center; }
.hint-desinscription {
  font-family: var(--texte);
  font-size: 12px;
  color: var(--pierre);
  margin: 0;
  text-align: center;
}


/* ── Mes abonnements (mon-espace) ─────────────────────────────────── */
.mes-abonnements { display: flex; flex-direction: column; gap: 12px; }
.abonnements-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.abonnement-ligne {
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--papier);
}
.abonnement-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.preference-groupe {
  align-items: stretch;
  cursor: default;
}
.preference-groupe .preference-titre { padding: 0; }
.preference-groupe:hover { background: transparent; }
.preference-invitation {
  padding: 4px;
  cursor: default;
}
.preference-invitation:hover { background: transparent; }
.abonnement-sous-liste {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.abonnement-sous-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #FBFBF7;
}
.abonnement-sous-ligne form { margin: 0; }
.abonnement-sous-ligne .meta {
  font-family: var(--texte);
  font-size: 12px;
  color: var(--pierre);
}
.abonnement-sous-titre {
  color: var(--encre);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.abonnement-sous-titre:hover { text-decoration: underline; }

/* ── Abonnements aux notifications ───────────────────────────────── */
.abonnements-preferences {
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--papier);
}
.abonnements-preferences legend {
  padding: 0 6px;
  font-family: var(--texte);
  font-size: 13px;
  font-weight: 600;
  color: var(--encre);
}
.preference {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 8px;
}
.preference:hover { background: #FBFBF7; }
.preference input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.preference-libelle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--texte);
  font-size: 14px;
  color: var(--encre);
  line-height: 1.4;
}
.preference-libelle strong { font-weight: 600; }
.preference-precision {
  font-size: 12px;
  color: #6E6E68;
  line-height: 1.5;
}
.preference-verrouillee {
  cursor: not-allowed;
  background: #F6EEDC;
}
.preference-verrouillee:hover { background: #F6EEDC; }
.preference-verrouillee input[type="checkbox"] { accent-color: #9A6510; }

/* ── Parler à la maire — écrire, dicter, envoyer ─────────────────
   Trois blocs empilés (carte de la maire, zone d'écriture, bouton
   d'envoi) + un volet du courriel qui remonte du bas. Palette
   restreinte : rose #E0367C pour l'action, rouge #DC1F1F pour la
   dictée en écoute, gris pour les ambiances, encre pour le texte
   principal. Contrastes vérifiés ≥ AA (bouton d'envoi en 20 px / 700
   sur rose plein — large text WCAG ≥ 3:1). */
.parler {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 4px;
}

/* Carte de la maire : photo ronde + nom + fonction. Épurée, sans
   citation — la voix de la maire s'incarne ailleurs. */
.parler-carte-maire {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--papier);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(30, 30, 28, 0.08);
}
.parler-portrait {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #E2E2DC;
}
.parler-identite { flex: 1 1 auto; min-width: 0; }
.parler-nom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: var(--encre);
  margin: 0;
}
.parler-fonction {
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  margin: 2px 0 0;
}

/* Formulaire principal : l'ensemble s'aère en un seul flux vertical. */
.parler-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}

/* Zone d'écriture : fond légèrement teinté, sans bordure visible,
   coins arrondis généreux, 20 px pour le texte, 4 lignes de départ.
   `resize: none` : la hauteur est pilotée en JS pour suivre la saisie
   (`textarea.style.height = scrollHeight`). Les sélecteurs qualifient
   `textarea` pour l'emporter sur la règle générique `.champ textarea`
   qui, sinon, imposerait une bordure et un `resize: vertical`.
   Le padding-right de 68 px réserve la place du bouton micro rond. */
.champ-parole { display: flex; flex-direction: column; gap: 4px; }
.parler-texte-cadre { position: relative; }
textarea.parler-texte {
  width: 100%;
  /* 7 lignes de départ (~230 px sur un viewport de 402 px de large),
     la croissance automatique en JS prend le relais à la saisie. */
  min-height: calc(7 * 1.5em + 32px);
  padding: 16px 112px 16px 18px;
  font-family: var(--texte);
  font-size: 20px;
  line-height: 1.5;
  color: var(--encre);
  background: #F5F5F2;
  border: 1px solid transparent;
  border-radius: 16px;
  resize: none;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
/* Placeholder : phrase d'invite (« Bonjour, vous pouvez taper ou
   enregistrer… »). Taille 17 px pour qu'elle tienne sans serrer sur
   402 px de large ; le texte saisi conserve ses 20 px hérités de
   `textarea.parler-texte`. Couleur #6E6E68 sur fond #F5F5F2 : 4,69:1,
   passe AA (seuil 4,5:1). `opacity: 1` neutralise l'éventuelle
   opacité par défaut ajoutée par certains navigateurs. */
textarea.parler-texte::placeholder {
  color: #6E6E68;
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  opacity: 1;
}
textarea.parler-texte:focus {
  outline: none;
  background: var(--papier);
  border-color: #1B5BFF;
  box-shadow: 0 0 0 3px rgba(27, 91, 255, 0.15);
}
/* Pendant la dictée : la textarea passe en couleur transparente
   pour laisser voir le miroir en-dessous, qui montre à la fois le
   texte confirmé (noir) et le texte provisoire (gris clair). Le
   curseur reste caché — l'utilisateur ne saisit pas au clavier
   pendant qu'il parle (il le peut, ce n'est simplement pas visible). */
textarea.parler-texte--en-dictee {
  color: transparent;
  caret-color: transparent;
}

/* Miroir : réplique parfaite de la textarea (mêmes padding, font,
   line-height, radius) pour que le texte tombe pixel par pixel au
   même endroit. Absolu en `inset: 0`, non interactif (pointer-events:
   none), z-index posé pour rester derrière le curseur natif si le
   navigateur l'affichait quand même. */
.parler-texte-miroir {
  position: absolute;
  inset: 0;
  padding: 16px 112px 16px 18px;
  font-family: var(--texte);
  font-size: 20px;
  line-height: 1.5;
  color: var(--encre);
  background: transparent;
  border-radius: 16px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.parler-texte-miroir[hidden] { display: none !important; }
.parler-texte-miroir-interim { color: #6E6E68; }

/* Boutons ronds (trombone + micro) posés côte à côte dans le coin
   bas droit de la zone d'écriture. Le padding-right (108 px) de la
   textarea réserve la place des deux ronds de 44 px + l'écart. */
.parler-actions-zone {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.parler-actions-zone[hidden] { display: none !important; }

.bouton-rond {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--papier);
  border: 1.5px solid #1E1E1C;
  color: #1E1E1C;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.bouton-rond:hover { background: #F5F5F2; }
.bouton-rond:focus-visible {
  outline: 2px solid #1B5BFF;
  outline-offset: 2px;
}
.bouton-rond svg { width: 20px; height: 20px; display: block; }
/* Aplat rouge franc pendant l'écoute. Contraste blanc sur #DC1F1F :
   ~4,9:1, passe AA texte normal (pour l'icône décorative). */
.bouton-rond--micro.bouton-micro--ecoute {
  background: #DC1F1F;
  border-color: #DC1F1F;
  color: #FFFFFF;
}
.bouton-rond--micro.bouton-micro--ecoute:hover {
  background: #B01818;
  border-color: #B01818;
}
/* API SpeechRecognition absente : le bouton reste visible mais son
   contour et son icône s'atténuent, et `aria-disabled` prévient les
   lecteurs d'écran. Il reste cliquable pour révéler la phrase de repli
   sous la zone d'écriture. */
.bouton-rond--indisponible,
.bouton-rond--indisponible:hover {
  border-color: #B7B7B0;
  color: #B7B7B0;
  background: transparent;
}

/* Onde à quatre barres verticales, animées en décalage. Rouge pour
   coïncider avec la couleur du bouton en écoute. Décorative,
   aria-hidden côté ERB. */
.parler-onde {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}
.parler-onde[hidden] { display: none !important; }
.parler-onde span {
  display: block;
  width: 3px;
  height: 100%;
  background: #DC1F1F;
  border-radius: 2px;
  transform-origin: center;
  animation: parler-onde-anim 0.9s ease-in-out infinite;
}
.parler-onde span:nth-child(1) { animation-delay: 0s;    }
.parler-onde span:nth-child(2) { animation-delay: 0.12s; }
.parler-onde span:nth-child(3) { animation-delay: 0.24s; }
.parler-onde span:nth-child(4) { animation-delay: 0.36s; }
@keyframes parler-onde-anim {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .parler-onde span { animation: none; transform: scaleY(0.7); }
}

/* Ligne d'état polie (aria-live), placée sous la textarea. Petite,
   grise, jamais anxiogène. */
.parler-etat-dictee {
  font-family: var(--texte);
  font-size: 13px;
  color: #4A4A45;
  line-height: 1.4;
  margin: 6px 0 0;
}
.parler-etat-dictee[hidden] { display: none !important; }

/* Refus micro : phrase calme, sans effet visuel dramatique. */
.parler-refus-micro {
  font-family: var(--texte);
  font-size: 13px;
  color: #4A4A45;
  line-height: 1.5;
  margin: 6px 0 0;
}
.parler-refus-micro[hidden] { display: none !important; }

/* Phrase de repli affichée quand l'API SpeechRecognition manque au
   navigateur et que l'utilisateur presse malgré tout le bouton micro.
   Se cache d'elle-même au bout de 6 s ou dès la première frappe dans
   la zone d'écriture. Contraste #4A4A45 sur blanc : ~8,5:1 (AA). */
.parler-repli-dictee {
  font-family: var(--texte);
  font-size: 13px;
  color: #4A4A45;
  line-height: 1.5;
  margin: 6px 0 0;
}
.parler-repli-dictee[hidden] { display: none !important; }

/* Mention publique permanente sous la zone : discrète, gris moyen,
   suffit à annoncer que la voix ne quitte pas l'appareil. */
.parler-mention-dictee {
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  line-height: 1.5;
  margin: 8px 0 0;
}
.parler-mention-dictee[hidden] { display: none !important; }

/* Compteur : discret, aligné à droite sous la zone d'écriture, et
   caché tant que la longueur reste sous le seuil. */
.parler-compteur {
  font-family: var(--mono);
  font-size: 12px;
  color: #6E6E68;
  align-self: flex-end;
  margin: 2px 4px 0 0;
}
.parler-compteur[hidden] { display: none; }

.champ-courriel { display: flex; flex-direction: column; gap: 4px; }
.champ-courriel input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--trait);
  border-radius: 10px;
  font-family: var(--texte);
  font-size: 15px;
  background: var(--papier);
  color: var(--encre);
}
.champ-courriel input[type="email"]:focus {
  outline: none;
  border-color: #1B5BFF;
  box-shadow: 0 0 0 3px rgba(27, 91, 255, 0.15);
}

/* Volet du courriel : monte du bas au clic sur « Poser ma question ».
   Position fixed, transformation initiale hors écran, transition
   sur `transform` pour un glissement doux (~260 ms). Le fond assombri
   se prête à un clic de fermeture. Focus posé sur le champ via JS
   après ouverture. */
.volet-courriel {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}
.volet-courriel[hidden] { display: none !important; }
.volet-fond {
  position: absolute;
  inset: 0;
  background: rgba(30, 30, 28, 0);
  transition: background-color 240ms ease-out;
  pointer-events: auto;
}
.volet-courriel--ouvert .volet-fond {
  background: rgba(30, 30, 28, 0.45);
}
.volet-panneau {
  position: relative;
  background: var(--papier);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(0.25, 0.9, 0.35, 1);
  pointer-events: auto;
  box-shadow: 0 -6px 24px rgba(30, 30, 28, 0.18);
  max-height: 80vh;
  overflow-y: auto;
}
.volet-courriel--ouvert .volet-panneau {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .volet-panneau { transition: none; }
  .volet-fond    { transition: none; }
}
/* Verrou de scroll du body pendant que le volet est ouvert (évite
   qu'un scroll sur le fond ne fasse défiler la page derrière). */
.body--volet-ouvert { overflow: hidden; }

.volet-fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: #4A4A45;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.volet-fermer:hover { background: #F5F5F2; }
.volet-fermer:focus-visible {
  outline: 2px solid #1B5BFF;
  outline-offset: 2px;
}

.volet-titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--encre);
  margin: 4px 0 4px;
}
.volet-explication {
  font-family: var(--texte);
  font-size: 13px;
  color: #6E6E68;
  line-height: 1.5;
  margin: 0;
}

/* Bouton d'envoi principal du volet : rose plein pleine largeur,
   20 px / 700 (large text WCAG, ≥ 3:1 sur blanc). */
.volet-envoyer {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  background: #E0367C;
  color: #FFFFFF;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
  margin-top: 4px;
}
.volet-envoyer:hover { background: #C7286B; transform: translateY(-1px); }
.volet-envoyer:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #1B5BFF;
}

/* Lien discret « continuer sans courriel » : bouton stylé en lien.
   Reste un submit, pour garder la robustesse sans JS. */
.volet-continuer {
  align-self: center;
  background: none;
  border: none;
  color: #4A4A45;
  font-family: var(--texte);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 6px 8px;
  min-height: 32px;
}
.volet-continuer:hover { color: var(--encre); }
.volet-continuer:focus-visible {
  outline: 2px solid #1B5BFF;
  outline-offset: 2px;
  border-radius: 4px;
}
.volet-continuer-mention {
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  text-align: center;
  line-height: 1.4;
  margin: -6px 0 0;
}

/* Vignettes des pièces jointes sur la page de confirmation
   (/questions/:id?confirme=1). Rangée horizontale wrapable, chaque
   vignette carrée 64 px avec coins arrondis. Les documents affichent
   un badge textuel « PDF ». */
.pieces-jointes-confirmation {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.piece-vignette-confirmation {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: #EAEAE4;
}
.piece-vignette-confirmation--document {
  color: #6E6E68;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 64px;
  text-align: center;
  border: 1px solid var(--trait);
}

/* Bouton d'envoi : rose plein pleine largeur, désactivé quand le
   contenu est vide. Le libellé en 20 px / 700 (grand texte WCAG) sur
   fond #E0367C dépasse le seuil AA (≥ 3:1) — mesure : ~4,17:1. */
.parler-envoyer {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  background: #E0367C;
  color: #FFFFFF;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.parler-envoyer:hover:not(:disabled) {
  background: #C7286B;
  transform: translateY(-1px);
}
.parler-envoyer:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #1B5BFF;
}
.parler-envoyer:disabled {
  background: #F0C7D8;
  color: #FFFFFF;
  cursor: not-allowed;
}
/* ── Pièces jointes sur la page de dépôt ──────────────────────────── */
.champ-pieces {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bouton-pieces {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  background: #F5F5F2;
  border: 1px solid var(--trait);
  border-radius: 10px;
  color: var(--encre);
  font-family: var(--texte);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
  align-self: flex-start;
}
.bouton-pieces:hover { background: #EAEAE4; }
.bouton-pieces:focus-visible {
  outline: 2px solid #1B5BFF;
  outline-offset: 2px;
}
.bouton-pieces svg { flex-shrink: 0; }
.pieces-mention {
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  line-height: 1.45;
  margin: 0;
}
.pieces-apercus {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pieces-apercus:empty { display: none; }
.piece-apercu {
  position: relative;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.piece-vignette {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: #EAEAE4;
}
.piece-vignette-document {
  color: #6E6E68;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 64px;
  border: 1px solid var(--trait);
}
.piece-nom {
  display: block;
  width: 100%;
  font-family: var(--texte);
  font-size: 10px;
  color: #6E6E68;
  text-align: center;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.piece-supprimer {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: #1A1A1A;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.piece-supprimer:hover { background: #000000; }
.piece-supprimer svg { display: block; }

/* ── Parcours de dépôt (une question par écran, style GOV.UK) ─────── */
.parcours {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.progression ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6px;
}
.progression-etape {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.progression .pt-barre {
  display: block;
  height: 4px;
  border-radius: 3px;
  background: var(--trait);
  transition: background 0.3s ease;
}
.progression-etape.actif .pt-barre { background: #639922; }
.progression-etape.faite .pt-barre { background: #3B6D11; }
.progression .pt-label {
  font-family: var(--texte);
  font-size: 11px;
  color: #6E6E68;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.progression .pt-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--trait);
  color: var(--pierre);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--texte);
}
.progression-etape.actif .pt-numero { background: #639922; color: #FFFFFF; }
.progression-etape.faite .pt-numero { background: #3B6D11; color: #FFFFFF; }
.progression-etape.actif .pt-label  { color: #173404; font-weight: 500; }

.retour-etape {
  align-self: flex-start;
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  text-decoration: none;
}
.retour-etape:hover { color: var(--encre); text-decoration: underline; }

.parcours-form { gap: 16px; }

.cartes-choix {
  display: grid;
  gap: 8px;
}
.cartes-choix--pile { grid-template-columns: 1fr; }
.cartes-choix--gros { grid-template-columns: 1fr 1fr; }
.cartes-choix .carte-choix {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: var(--papier);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.cartes-choix .carte-choix:hover { border-color: #639922; }
.cartes-choix .carte-choix input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.cartes-choix .carte-choix:has(input:checked) {
  border-color: #639922;
  background: #EAF3DE;
}
.cartes-choix .carte-choix:has(input:focus-visible) {
  outline: 2px solid #639922;
  outline-offset: 2px;
}
.cartes-choix .titre-carte {
  font-family: var(--texte);
  font-weight: 500;
  font-size: 14px;
  color: var(--encre);
  line-height: 1.3;
}
.cartes-choix .titre-carte--gros {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.15;
  color: var(--encre);
  text-align: center;
  padding: 10px 4px;
}
.cartes-choix .meta-carte {
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  line-height: 1.35;
}

.compteur-caracteres {
  margin-top: 4px;
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  text-align: right;
}

.bouton-pleine { width: 100%; text-align: center; }

.recap {
  padding: 14px 16px;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: #F5F5F2;
}
.recap .rubrique {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 15px;
  color: var(--encre);
  line-height: 1.15;
  margin-bottom: 10px;
}
.recap dl { margin: 0; }
.recap dt {
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 500;
  color: #6E6E68;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 10px;
}
.recap dt:first-child { margin-top: 0; }
.recap dd {
  margin: 4px 0 0;
  font-family: var(--texte);
  font-size: 14px;
  color: var(--encre);
  line-height: 1.4;
}

/* ── Squelettes de chargement (E5) ────────────────────────────────── */
/* Barre de progression Turbo masquée au profit de squelettes. */
.turbo-progress-bar { display: none; }

/* turbo-frame en cours de chargement : opacité réduite, curseur d'attente. */
turbo-frame[busy] {
  opacity: 0.55;
  cursor: progress;
  transition: opacity 0.15s ease;
}

/* Utilitaire réutilisable, à appliquer sur un élément placeholder aux
   dimensions du contenu attendu. */
.squelette {
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%,
                          rgba(255,255,255,0.7) 50%,
                          rgba(255,255,255,0) 100%) 0 0 / 40% 100% no-repeat,
    #F5F5F2;
  border-radius: 8px;
  animation: squelette-shimmer 1.3s ease-in-out infinite;
}
.squelette-titre { height: 22px; width: 60%; }
.squelette-ligne { height: 14px; width: 100%; margin-top: 8px; }
.squelette-tuile { height: 120px; width: 100%; }
@keyframes squelette-shimmer {
  from { background-position: -50% 0, 0 0; }
  to   { background-position: 150% 0,  0 0; }
}

/* View Transitions : fondu court par défaut, désactivé sous
   prefers-reduced-motion. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 220ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 1ms; }
  turbo-frame[busy] { transition: none; }
  .squelette { animation: none; background: #F5F5F2; }
}

/* ── Barre d'onglets en bas ───────────────────────────────────────── */
/* Invariant : la barre reste collée au bas de la fenêtre à toutes les
   positions de défilement. Le DOM la place en enfant direct de <body>
   (voir layouts/application.html.erb) — aucun ancêtre ne porte
   transform, filter, backdrop-filter, contain ou will-change qui
   créerait un containing block et casserait `position: fixed`.
   Toute future règle sur <html>, <body> ou main.page qui introduit
   l'une de ces propriétés est à considérer comme un bogue. */
.onglets {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  z-index: 90;
  background: #FFFFFF;
  border-top: 1px solid var(--trait);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  gap: 4px;
}
.onglet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 14px;
  color: #6E6E68;
  text-decoration: none;
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.onglet:hover { color: var(--encre); }
.onglet.actif {
  background: #1A1A1A;
  color: #FFFFFF;
}
.onglet.actif:hover { color: #FFFFFF; }
.onglet-icone svg { width: 22px; height: 22px; display: block; }
.onglet-libelle { display: block; }

/* Espace bas dans le body : garantit que la fin du contenu (dont le
   pied de page sombre) apparaît intégralement au-dessus des onglets
   quand on scrolle jusqu'en bas. La barre « poser une question » se
   glisse entre les deux ; on lui réserve alors sa propre hauteur. */
body {
  padding-bottom: calc(var(--onglets-hauteur) + 12px + env(safe-area-inset-bottom, 0px));
}
body.avec-barre-flottante {
  padding-bottom: calc(var(--onglets-hauteur) + var(--barre-maire-hauteur) + 24px + env(safe-area-inset-bottom, 0px));
}

/* Bande noire mate qui prolonge le pied de page sombre jusqu'à la
   barre d'onglets — visible seulement lorsque le pied entre dans la
   zone occupée par le bandeau (détection par IntersectionObserver,
   voir layouts/application.html.erb). Le pseudo-élément est toujours
   présent quand le bandeau maire flotte, mais transparent par défaut ;
   la classe `.fond-noir-visible` posée par le JS le fait apparaître.
   Le bandeau blanc arrondi et la barre d'onglets restent posés sur
   ce fond, à un z-index plus haut. */
body.avec-fond-noir::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--onglets-hauteur) + var(--barre-maire-hauteur) + 24px + env(safe-area-inset-bottom, 0px));
  background: #121212;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
body.avec-fond-noir.fond-noir-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body.avec-fond-noir::after { transition: none; }
}

/* ── Barre fixe « poser une question à la maire » ─────────────────── */
/* Défaut d'inspiration France Info : leur bandeau recouvre la fin du
   texte qu'on est en train de lire. Pour l'éviter, on augmente le
   padding-bottom du body (voir plus haut) et on fait flotter la barre
   au-dessus des onglets, avec 12 px de respiration sur les quatre
   côtés — jamais collée à la barre d'onglets ni aux bords de la vue. */
/* Bandeau flottant du bas : deux variantes (maire, suivre), même
   mécanique de montage. Se glisse depuis le bas au montage grâce à
   la classe `.visible` posée par le contrôleur Stimulus. */
.barre-flottante {
  position: fixed;
  bottom: calc(var(--onglets-hauteur) + 16px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  right: 16px;
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
  z-index: 85;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid var(--trait);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(30, 30, 28, 0.10);
  transform: translateY(calc(100% + 100px));
  transition: transform 200ms ease;
  will-change: transform;
}
.barre-flottante.visible { transform: translateY(0); }

.barre-maire-lien {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--encre);
  border-radius: 12px;
}
.barre-maire-lien:hover .barre-maire-bouton { background: #000000; }
.barre-maire-lien:focus-visible {
  outline: 2px solid #1B5BFF;
  outline-offset: 2px;
}

/* Portrait plus grand (52 px), cadré sur le visage. Le nom et la
   fonction ne sont plus affichés à côté : le portrait et le bouton
   suffisent. Le libellé lecteur d'écran, lui, nomme toujours la
   maire et sa commune (voir aria-label sur .barre-maire-lien). */
.barre-maire-portrait {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
  object-position: center 25%;
  flex-shrink: 0;
  background: var(--sol, #EFF2EE);
}
.barre-maire-bouton {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 999px;
  background: #1A1A1A;
  color: #FFFFFF;
  font-family: var(--texte);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Sous 440 px de large, on réduit la taille du texte du bouton
   plutôt que d'écraser le portrait ou la croix — la maire garde
   son échelle même quand le libellé est long
   (« Parler à Mme la Maire », « Parler à M. le Maire »…). */
@media (max-width: 440px) {
  .barre-maire-bouton { font-size: 13px; padding: 12px 12px; }
}
@media (max-width: 380px) {
  .barre-maire-bouton { font-size: 12px; padding: 12px 10px; }
}

/* Fond rond gris clair : la croix n'a plus l'air de flotter à côté
   du bouton, elle se lit comme une cible cliquable pleine. */
.barre-maire-fermer {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: #F0F0EC;
  color: #6E6E68;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.barre-maire-fermer:hover { background: #E5E5DF; color: var(--encre); }
.barre-maire-fermer:focus-visible {
  outline: 2px solid #1B5BFF;
  outline-offset: 2px;
}
.barre-maire-fermer svg { width: 16px; height: 16px; display: block; }


/* Variante « suivre ce sujet » : texte + bouton unique + croix. */
.barre-suivre-texte {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--texte);
  color: var(--encre);
  overflow: hidden;
}
.barre-suivre-verbe {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pierre);
}
.barre-suivre-sujet {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--encre);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barre-suivre-bouton {
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: #1A1A1A;
  color: #FFFFFF;
  font-family: var(--texte);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.barre-suivre-bouton:hover { background: #000000; }
.barre-flottante--suivre form { margin: 0; }

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

/* ── Démarches (fiche) ─────────────────────────────────────────────── */
.demarche-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.demarche-bloc {
  padding: 14px 16px;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: var(--papier);
}
.demarche-bloc .rubrique {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 12px;
  color: #6E6E68;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.demarche-bloc p {
  font-family: var(--texte);
  font-size: 14px;
  color: var(--encre);
  line-height: 1.55;
}
.demarche-bloc p + p { margin-top: 6px; }

/* ── Invitation d'installation PWA (chantier 4) ───────────────────── */
.pwa-invitation {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: 430px;
  max-width: calc(100% - 24px);
  z-index: 200;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid var(--trait);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--texte);
  font-size: 13px;
  color: var(--encre);
}
/* `display: flex` écraserait le fallback [hidden] du HTML : on force. */
.pwa-invitation[hidden] { display: none !important; }
.pwa-invitation-texte {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pwa-invitation-texte strong {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 14px;
  color: var(--encre);
}
.pwa-invitation-texte span { color: #6E6E68; font-size: 12px; }
.pwa-invitation-corps { display: block; line-height: 1.45; }
.pwa-invitation-corps[hidden] { display: none; }
.pwa-invitation-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.pwa-invitation-actions [hidden] { display: none; }
.pwa-invitation .bouton { padding: 8px 12px; font-size: 13px; }

/* ── Confirmation animée après envoi de la question ───────────────── */
.confirmation-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.96);
  animation: overlay-fade 2.4s ease forwards;
}
.confirmation-overlay svg {
  animation: check-pop 0.5s cubic-bezier(0.5, 1.6, 0.5, 1) both;
}
.confirmation-msg {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 18px;
  color: #173404;
  animation: msg-appear 0.4s 0.2s ease both;
}
@keyframes overlay-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
@keyframes check-pop {
  0%   { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes msg-appear {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .confirmation-overlay,
  .confirmation-overlay svg,
  .confirmation-msg { animation: none; }
  .confirmation-overlay { display: none; }
  .cartes-choix .carte-choix { transition: none; }
  .progression .pt-barre { transition: none; }
}

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

/* ── Suivre cette question (bloc compact, une ligne) ─────────────── */
.suivre-question {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.suivre-question-compte {
  font-family: var(--texte);
  font-size: 13px;
  color: var(--pierre);
  line-height: 1.4;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.suivre-question-compte strong {
  color: var(--encre);
  font-weight: 700;
}
.suivre-question-form {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.suivre-question-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--trait);
  border-radius: 10px;
  font-family: var(--texte);
  font-size: 14px;
  color: var(--encre);
  background: var(--papier);
}
.suivre-question-form input[type="email"]:focus {
  outline: 2px solid #1B5BFF;
  outline-offset: 1px;
  border-color: #1B5BFF;
}
.suivre-question-bouton {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #1A1A1A;
  color: #FFFFFF;
  border: 0;
  font-family: var(--texte);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.suivre-question-bouton:hover { background: #000000; }
.suivre-question-erreur {
  font-family: var(--texte);
  font-size: 12px;
  color: #993556;
  margin: 0;
}

/* Confirmation : le bloc bascule sur cette forme après souscription,
   toujours sur une ligne, sans rechargement (turbo-frame). */
.suivre-question--confirme {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #EAF3DE;
  border-radius: 10px;
  font-family: var(--texte);
  font-size: 14px;
  color: #173404;
  line-height: 1.4;
}
.suivre-question-emoji { font-size: 16px; line-height: 1; }

/* ── Citation d'une question sur la page « Votre question » ────── */
.citation-question {
  position: relative;
  margin: 0;
  padding: 20px 20px 20px 28px;
  border-radius: 12px;
  background: #FBEAF0;
  color: #4B1528;
  font-family: var(--texte);
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
}
/* Grand guillemet ouvrant décoratif en filigrane, posé derrière le
   texte. `pointer-events: none` pour ne pas gêner la sélection. */
.citation-question::before {
  content: "\201C";
  position: absolute;
  top: -18px;
  left: 4px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 120px;
  line-height: 1;
  color: rgba(153, 53, 86, 0.10);
  pointer-events: none;
}

/* ── Circuit de traitement (suivi colis) ──────────────────────────
   Un trait vertical continu relie tous les points ; chaque étape
   porte un point plein (franchie ou en cours) ou creux (à venir).
   La couleur du trait au-dessus d'un point suit l'état de l'étape :
   #17706A pour :faite et :en_cours, #D4DCD7 pour :a_venir.
   Le libellé s'aligne à gauche, la date à droite : toutes les dates
   partagent la même verticale (colonne à largeur automatique
   right-alignée). Le point de l'étape en cours pulse doucement. */
.circuit {
  list-style: none;
  padding: 0;
  margin: 0;
}
.circuit-etape {
  position: relative;
  padding: 12px 0 12px 22px;
  min-height: 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  align-items: baseline;
}
/* Trait vertical : chaque étape porte un segment couvrant toute sa
   hauteur, coloré selon SON état. À la jonction entre la dernière
   étape faite/en_cours et la première à_venir, la couleur change,
   ce qui trace naturellement une frontière lisible. */
.circuit-etape::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #D4DCD7;
  z-index: 0;
}
.circuit-etape--faite::before,
.circuit-etape--en_cours::before { background: #17706A; }
.circuit-etape:first-child::before { top: 16px; }
.circuit-etape:last-child::before  { bottom: calc(100% - 16px); }

.circuit-point {
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--papier);
  border: 2px solid #D4DCD7;
  z-index: 1;
  box-sizing: border-box;
}
.circuit-etape--faite    .circuit-point,
.circuit-etape--en_cours .circuit-point {
  background: #17706A;
  border-color: #17706A;
}
.circuit-etape--en_cours .circuit-point {
  animation: circuit-pulse 1.6s ease-in-out infinite;
}
@keyframes circuit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(23, 112, 106, 0.45); }
  70%      { box-shadow: 0 0 0 8px rgba(23, 112, 106, 0);    }
}
@media (prefers-reduced-motion: reduce) {
  .circuit-etape--en_cours .circuit-point { animation: none; }
}

.circuit-libelle {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--texte);
  font-size: 14px;
  line-height: 1.3;
  color: var(--encre);
  font-weight: 500;
  min-width: 0;
}
.circuit-etape--a_venir .circuit-libelle { color: var(--pierre); font-weight: 400; }

.circuit-dates {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}
/* Une seule date par étape — la date réelle si l'étape est franchie,
   sinon la date annoncée. Même chasse (mono, hérité de
   `.circuit-dates`), même graisse (normale), même couleur d'encre
   dans les deux cas : aucune hiérarchie visuelle entre les deux.
   Exception : sur une étape encore à venir, la date annoncée passe
   en gris (var --pierre), en cohérence avec le libellé grisé. */
.circuit-date-reelle,
.circuit-date-annoncee--seule {
  color: var(--encre);
  font-weight: 400;
}
.circuit-etape--a_venir .circuit-date-annoncee--seule { color: var(--pierre); }

.circuit-motif {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 4px;
  padding: 4px 8px;
  background: #F6EEDC;
  border-left: 3px solid #9A6510;
  border-radius: 6px;
  font-family: var(--texte);
  font-size: 12px;
  line-height: 1.4;
  color: #4A2E00;
  justify-self: start;
}

/* Petite ligne d'aide sous le libellé d'une étape (contexte
   fourni par le partial : « déposée depuis l'application »,
   nom du service + délai annoncé, etc.). */
.circuit-precision {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--texte);
  font-size: 13px;
  line-height: 1.35;
  color: var(--pierre);
  margin-top: 2px;
}
.circuit-etape--a_venir .circuit-precision { color: #B5B5B0; }

/* Émoji / portrait qui remplace le point plein sur le trait. Sa
   pastille de fond blanche coupe visuellement le trait, ce qui
   accentue le repère visuel. Alignement : le centre de la pastille
   tombe pile sur le trait vertical (left: 4px + 2/2 = 5px), donc
   `left = 5 − diamètre/2`. */
.circuit-etape--iconee { padding-left: 46px; }
.circuit-etape--iconee::before,
.circuit-etape--iconee:first-child::before,
.circuit-etape--iconee:last-child::before {
  top: 0;
  bottom: 0;
}
.circuit-emoji {
  position: absolute;
  /* Cercle de 32 px, glyphe 26 px. Centre sur le trait vertical
     (left du trait 4 + 2/2 = 5) : left = 5 − 32/2 = −11 px. */
  left: -11px;
  top: 6px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--papier);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  z-index: 2;
  box-shadow: 0 0 0 2px var(--papier);
}
/* Vignette ronde de la maire : 34 px, recadrée plus serré sur le
   visage (object-position: center 12%) pour rester reconnaissable
   à cette taille. Centre sur le trait : left = 5 − 34/2 = −12 px. */
.circuit-emoji-maire {
  width: 34px;
  height: 34px;
  left: -12px;
  top: 5px;
  object-fit: cover;
  object-position: center 12%;
  background: var(--sol, #EFF2EE);
}
/* Étape « à venir » : portrait de la maire atténué (désaturé et translucide)
   pour signaler que la réponse n'a pas encore été apportée. */
.circuit-etape--a_venir .circuit-emoji-maire {
  filter: grayscale(0.6);
  opacity: 0.5;
}

/* Décompte de délai — seul endroit où la chasse fixe est autorisée */
.decompte {
  padding: 12px 14px;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: var(--papier);
  display: flex;
  align-items: center;
  gap: 10px;
}
.decompte .nombre {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.decompte .label {
  font-family: var(--texte);
  font-size: 13px;
  color: #6E6E68;
}
.decompte.attente { background: #FBEAF0; border-color: #ED93B1; }
.decompte.attente .nombre { color: #993556; }
.decompte.attente .label  { color: #4B1528; }
.decompte.retard  { background: #FBEAF0; border-color: #ED93B1; }
.decompte.retard  .nombre { color: #993556; }
.decompte.retard  .label  { color: #4B1528; }
.decompte.tenu    { background: #EAF3DE; border-color: #639922; }
.decompte.tenu    .nombre { color: #3B6D11; }
.decompte.tenu    .label  { color: #173404; }

/* ── Réponse de la maire sur la page « Votre question » ─────────── */
.reponse-maire {
  margin-top: 20px;
  padding: 14px 18px 16px;
  border-left: 3px solid #E0367C;
  background: var(--papier);
}
.reponse-maire-tete {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reponse-maire-portrait {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  object-position: center 20%;
  flex-shrink: 0;
  background: var(--sol, #EFF2EE);
}
.reponse-maire-identite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.reponse-maire-nom {
  font-family: var(--texte);
  font-weight: 600;
  font-size: 14px;
  color: var(--encre);
  line-height: 1.2;
}
.reponse-maire-fonction {
  font-family: var(--texte);
  font-size: 13px;
  color: var(--pierre);
  line-height: 1.3;
}
.reponse-maire-date {
  margin-left: auto;
  font-family: var(--texte);
  font-size: 12px;
  color: var(--pierre);
  text-align: right;
  line-height: 1.35;
}
.reponse-maire-texte {
  margin-top: 14px;
  font-family: var(--texte);
  font-size: 15px;
  line-height: 1.65;
  color: var(--encre);
}
.reponse-maire-texte p { margin: 0 0 10px; }
.reponse-maire-texte p:last-child { margin-bottom: 0; }

/* ── Résumé « en clair » (dossier show, chantier 2) ────────────────── */
.en-clair {
  padding: 14px 16px 16px;
  border-radius: 12px;
  background: #FDF0CE;
  border: 1px solid #E5C674;
}
.en-clair .rubrique {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 12px;
  color: #5A4408;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.en-clair .en-clair-texte,
.en-clair p {
  font-family: var(--texte);
  font-size: 14px;
  color: #1E1E1C;
  line-height: 1.55;
}
.en-clair p + p { margin-top: 8px; }

/* ── Avancement d'un projet dans la liste (C2) ─────────────────────── */
.avancement {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.avancement-jauge {
  height: 6px;
  border-radius: 999px;
  background: #E2E2DC;
  overflow: hidden;
}
.avancement-remplissage {
  height: 100%;
  background: #1B4F8A;
  border-radius: 999px;
  animation: remplit-jauge 800ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.avancement-legende {
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  line-height: 1.4;
}

/* ── Petits mouvements (P2/D1) ──────────────────────────────────────
   Trois traits horizontaux qui respirent en boucle devant un compteur,
   un en-tête ou une étiquette d'attente. Décoratifs, aria-hidden. */
.jauge-vie {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  gap: 3px;
  margin-right: 8px;
}
.jauge-vie span {
  display: inline-block;
  width: 10px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0.7;
  transform-origin: left center;
  animation: trait-vivant 2.5s ease-in-out infinite;
}
.jauge-vie span:nth-child(2) { animation-delay: 0.35s; }
.jauge-vie span:nth-child(3) { animation-delay: 0.7s;  }
@keyframes trait-vivant {
  0%, 100% { transform: scaleX(0.35); opacity: 0.55; }
  50%      { transform: scaleX(1);    opacity: 1;    }
}

/* La puce ronde avant l'émoji est retirée : le titre commence
   directement par l'émoji, tel que saisi par la mairie. */
@keyframes pulse-point {
  0%, 100% { transform: scale(0.75); opacity: 0.5; }
  50%      { transform: scale(1);    opacity: 1;   }
}

/* Jauges de participation : la barre se remplit une fois à l'apparition. */
.jauge-remplissage {
  height: 100%;
  background: #639922;
  border-radius: 999px;
  animation: remplit-jauge 800ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes remplit-jauge {
  from { width: 0; }
  to   { width: var(--largeur-cible, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .jauge-vie span,
  .jauge-remplissage,
  .avancement-remplissage { animation: none; }
  .jauge-vie span { transform: scaleX(0.7); opacity: 0.8; }
}

/* ── Jauge de participation collective (chantier 3) ────────────────── */
.participation {
  padding: 14px 16px 16px;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: var(--papier);
}
.participation-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.participation .rubrique {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 15px;
  color: var(--encre);
  line-height: 1.15;
}
.jauge {
  height: 10px;
  border-radius: 999px;
  background: #E2E2DC;
  overflow: hidden;
}
.jauge-remplissage {
  height: 100%;
  background: #639922;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.participation-chiffres {
  margin-top: 10px;
  font-family: var(--texte);
  font-size: 13px;
  color: var(--encre);
  line-height: 1.5;
}
.participation-chiffres strong,
.participation-inscrits strong {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.participation-inscrits {
  margin-top: 4px;
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  line-height: 1.5;
}

.pastille-jours {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.pastille-jours.pastille-calme     { background: #EAF3DE; color: #173404; }
.pastille-jours.pastille-attention { background: #FDF0CE; color: #5A4408; }
.pastille-jours.pastille-urgent    { background: #FBEAF0; color: #993556; }
.pastille-jours.pastille-terminee  { background: #F5F5F2; color: #6E6E68; }

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

/* ── Composition de la quinzaine (espace mairie) ──────────────────── */
.formulaire-quinzaine .quinzaine-entete-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: #FBFBF7;
}
.rubrique-form {
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin: 0;
  background: var(--papier);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rubrique-form legend {
  padding: 0 6px;
}
.rubrique-form .rubrique-etiquette {
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #993556;
}
.rubrique-form .aide {
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  line-height: 1.45;
  margin: 0;
}
.rubrique-form-champs {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 10px 14px;
}
.rubrique-form .champ { margin: 0; }
.rubrique-form .champ-titre,
.rubrique-form .champ-titre + .champ,
.rubrique-form .champ:nth-of-type(3),
.rubrique-form .champ:nth-of-type(4) {
  grid-column: 1 / -1;
}
@media (max-width: 600px) {
  .rubrique-form-champs { grid-template-columns: 1fr; }
}

.apercu-quinzaine {
  margin-top: 24px;
  padding: 16px;
  border: 1px dashed var(--trait);
  border-radius: 12px;
  background: #FBFBF7;
}
.apercu-cadre {
  max-width: 430px;
  margin: 12px auto 0;
}

/* ── Bouton IA sur le formulaire admin dossier ─────────────────────── */
.aide-ia {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: #EDE3F5;
  border: 1px solid #C9B4E2;
  border-radius: 12px;
}
.aide-ia form { margin: 0; }
.aide-ia .aide-ia-note {
  font-family: var(--texte);
  font-size: 12px;
  color: #3D2260;
  line-height: 1.45;
}

/* ── Pied de page sombre pleine largeur (inspiration Villers-lès-Nancy) */
.pied {
  background: #121212;
  color: #B5B5B0;
  font-family: var(--texte);
  margin-top: 32px;
  padding: 40px 0 24px;
}
.pied-interieur {
  padding: 0 16px;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pied-titre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  margin: 0;
}
.pied-blocs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .pied-blocs { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
}
.pied-bloc {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pied-pastille {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}
.pied-pastille svg { width: 14px; height: 14px; display: block; }
.pied-pastille-vert  { background: #1E9E5A; }
.pied-pastille-bleu  { background: #1B5BFF; }
.pied-pastille-rose  { background: #E0367C; }
.pied-pastille-jaune { background: #F2B705; color: #121212; }
.pied-bloc-texte { min-width: 0; }
.pied-intitule {
  font-family: var(--texte);
  font-weight: 600;
  font-size: 14px;
  color: #FFFFFF;
  margin-bottom: 3px;
  line-height: 1.2;
}
.pied-contenu {
  font-family: var(--texte);
  font-size: 14px;
  color: #B5B5B0;
  line-height: 1.5;
  display: block;
}
a.pied-contenu { text-decoration: none; }
a.pied-contenu:hover {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.pied-reseaux {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.pied-reseaux a {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  text-decoration: none;
  transition: background 0.15s ease;
}
.pied-reseaux a:hover { background: rgba(255, 255, 255, 0.28); }
.pied-reseaux svg { width: 18px; height: 18px; display: block; }

.pied-filet {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin: 0;
  width: 100%;
}

.pied-legaux {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
  text-align: center;
}
.pied-legaux a {
  font-family: var(--texte);
  font-size: 12px;
  color: #8A8A85;
  text-decoration: none;
  line-height: 1.4;
}
.pied-legaux a:hover { color: #FFFFFF; text-decoration: underline; }

.pied-fiction {
  font-family: var(--texte);
  font-size: 11px;
  color: #6E6E68;
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

/* ── Vignette maire (accueil + suivi) ──────────────────────────────── */
.identite-maire {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.identite-maire .vignette {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #E2E2DC;
  flex-shrink: 0;
  display: block;
}
.identite-maire .identite-corps { min-width: 0; }
.identite-maire .nom {
  font-family: var(--texte);
  font-size: 14px;
  font-weight: 500;
  color: #1E1E1C;
  line-height: 1.2;
}
.identite-maire .fonction {
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  line-height: 1.2;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════════ */
/* Espace mairie — cadre plus large, bandeau propre                      */
/* ══════════════════════════════════════════════════════════════════════ */

.page-admin { width: 640px; }
.bandeau-admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--trait);
}
.bandeau-admin .rubrique-admin {
  font-family: var(--texte);
  font-size: 11px;
  color: #6E6E68;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}
.bandeau-admin .commune-admin {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  color: var(--encre);
  text-decoration: underline;
  text-decoration-color: var(--rose);
  text-decoration-thickness: 4px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}
.bandeau-admin .agent-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
}
.bandeau-admin .nom-agent { color: var(--encre); font-weight: 500; }
.bouton-lien {
  background: none;
  border: none;
  padding: 0;
  color: #6E6E68;
  font-family: var(--texte);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}
.bouton-lien:hover { color: var(--encre); }
.bandeau-admin form { margin: 0; }

.tableau-questions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.carte-question {
  display: block;
  padding: 14px 16px;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 12px;
  color: var(--encre);
  text-decoration: none;
}
a.carte-question:hover { border-color: #639922; }
.carte-question.attente-signal {
  background: #FBEAF0;
  border-color: #ED93B1;
}
.carte-question.carte-publiee {
  background: #F5F5F2;
  border-color: var(--trait);
}
.tete-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.jours-restants {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #6E6E68;
}
.jours-restants .nombre {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.jours-restants .unite {
  font-family: var(--texte);
  font-size: 11px;
  color: #6E6E68;
}
.jours-restants.signal .nombre { color: #993556; }
.jours-restants.signal .unite  { color: #993556; }

.chip-publiee {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #EAF3DE;
  color: #173404;
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 500;
}

.enonce-court {
  font-family: var(--texte);
  font-size: 13px;
  color: var(--encre);
  line-height: 1.4;
}
.meta-question {
  margin-top: 6px;
  font-family: var(--texte);
  font-size: 12px;
  color: #6E6E68;
  line-height: 1.45;
}

.nav-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--trait);
  font-family: var(--texte);
  font-size: 12px;
}
.nav-admin a {
  color: #6E6E68;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav-admin a:hover { color: var(--encre); }
.nav-admin a.actif {
  color: var(--encre);
  border-bottom-color: var(--rose);
}

.liste-admin {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--trait);
  border-radius: 12px;
  overflow: hidden;
  background: var(--papier);
}
.ligne-admin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--trait);
}
.ligne-admin:first-child { border-top: none; }
.ligne-admin .texte-admin {
  font-family: var(--texte);
  font-size: 14px;
  color: var(--encre);
  flex: 1;
  min-width: 0;
}
.actions-admin {
  display: flex;
  gap: 12px;
  align-items: center;
}
.actions-admin form { margin: 0; display: inline; }

.champ-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.champ-checkbox input[type="checkbox"] { width: auto; }
.champ-checkbox label { margin: 0; }

/* ── Champ à cases multiples (réglages) ──────────────────────────── */
.champ-cases {
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 12px 14px 14px;
  background: var(--papier);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.champ-cases legend {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 14px;
  color: var(--encre);
  padding: 0 4px;
  margin-bottom: 4px;
}
.case-choix {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  font-family: var(--texte);
  font-size: 14px;
  color: var(--encre);
  cursor: pointer;
}
.case-choix:has(input:checked) { background: #EAF3DE; color: #173404; }
.case-choix:has(input:focus-visible) { outline: 2px solid #639922; outline-offset: 2px; }
.case-choix input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #3B6D11;
  margin: 0;
}

.actions-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bouton-secondaire {
  background: var(--papier);
  color: var(--encre);
  border: 1px solid var(--trait);
}
.bouton-secondaire:hover { background: #F5F5F2; border-color: #6E6E68; }