/* =============================================================================
   theme.css — identité visuelle du site (design classique, presse d'information)
   Chargé APRÈS bootstrap.min.css. Toutes les couleurs viennent de :root.
   ========================================================================== */

/* --- Polices (hébergées localement, sous-ensemble latin) ------------------ */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfair-display-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-serif-4-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-serif-4-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-600-normal.woff2") format("woff2");
}

/* --- Variables ------------------------------------------------------------ */

:root {
  --papier: #faf8f5;
  --papier-fonce: #f1ece2;
  --encre: #1a1a1a;
  --encre-douce: #4a4a4a;
  --gris-filet: #d6d0c4;
  --gris-meta: #6b6560;
  --accent: #8b1e1e;
  --accent-survol: #6a1414;
  --sur-accent: #ffffff;        /* texte posé sur l'accent */
  --marine: #1f3a5f;
  --alerte: #b3261e;
  --alerte-texte: #b3261e;     /* rouge d'alerte pour du texte (contraste AA) */
  --succes: #2f5d3a;
  --champ-fond: #ffffff;
  --champ-bordure: #8a837b;     /* contraste 3:1 minimum pour les champs */

  --police-titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --police-texte: "Source Serif 4", Georgia, "Times New Roman", serif;
  --police-interface: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Bootstrap : grille et outils seulement, notre identité par-dessus */
  --bs-body-bg: var(--papier);
  --bs-body-color: var(--encre);
  --bs-body-font-family: var(--police-texte);
  --bs-body-font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --bs-body-line-height: 1.6;
  --bs-emphasis-color: var(--encre);
  --bs-secondary-color: var(--gris-meta);
  --bs-heading-color: var(--encre);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-survol);
  --bs-primary: var(--accent);
  --bs-border-color: var(--gris-filet);
  --bs-secondary-bg: var(--papier-fonce);   /* boutons de fichier, survols… */
  --bs-tertiary-bg: var(--papier-fonce);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-box-shadow: none;
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: none;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #141414;
    --papier-fonce: #1f1d1b;
    --encre: #e8e4dc;
    --encre-douce: #c4bfb6;
    --gris-filet: #3a3632;
    --gris-meta: #a39d95;
    --accent: #d06a6a;
    --accent-survol: #e08c8c;
    --sur-accent: #141414;
    --marine: #8fb0d8;
    --alerte: #b3261e;
    --alerte-texte: #f08a80;   /* #b3261e sur fond sombre : 2,6:1 seulement */
    --succes: #7fb08a;
    --champ-fond: #1f1d1b;
    --champ-bordure: #7a756e;

    color-scheme: dark;
  }
}

/* --- Base ----------------------------------------------------------------- */

body {
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--bs-body-font-size);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.2;
  color: var(--encre);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 1.25rem + 0.75vw, 1.75rem); }
h3 { font-size: clamp(1.15rem, 1.1rem + 0.3vw, 1.3rem); }

p { margin: 0 0 1em; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--accent-survol); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none !important;
}

hr {
  border: 0;
  border-top: 1px solid var(--gris-filet);
  opacity: 1;
}

img { max-width: 100%; height: auto; }

/* --- Textes éditoriaux ---------------------------------------------------- */

.surtitre {
  font-family: var(--police-interface);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.chapo {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  font-style: italic;
  color: var(--encre-douce);
  max-width: 68ch;
}

.meta {
  font-family: var(--police-interface);
  font-size: 0.8rem;
  color: var(--gris-meta);
}

.texte-courant { max-width: 68ch; }

/* --- Lien d'évitement (clavier) ------------------------------------------ */

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--police-interface);
}
.lien-evitement:focus { left: 0.5rem; color: var(--papier); }

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

.barre-haut {
  border-bottom: 1px solid var(--gris-filet);
  font-family: var(--police-interface);
  font-size: 0.8rem;
  color: var(--gris-meta);
}
.barre-haut .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
}
.date-du-jour { display: inline-block; white-space: nowrap; }
.date-du-jour::first-letter { text-transform: uppercase; }

/* Une seule ligne sur mobile : date à gauche, liens à droite */
.liens-utiles { display: flex; align-items: center; gap: 0 1rem; }
.liens-utiles a,
.lien-bouton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--encre-douce);
  text-decoration: none;
  white-space: nowrap;
}
.liens-utiles a:hover,
.lien-bouton:hover { color: var(--accent); text-decoration: underline; }

.lien-bouton {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* Menu « Mon compte » (élément <details>, utilisable sans JavaScript) */
.menu-compte { position: relative; }
.menu-compte summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  color: var(--encre-douce);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.menu-compte summary::-webkit-details-marker { display: none; }
.menu-compte summary:hover { color: var(--accent); }
.menu-compte summary .compteur { margin-left: 0; }
.menu-compte .bi-chevron-down { font-size: 0.7em; transition: transform 0.15s; }
.menu-compte[open] .bi-chevron-down { transform: rotate(180deg); }
.menu-compte-liste {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1030;              /* au-dessus de la barre de rubriques fixée */
  min-width: 13rem;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--papier);
  border: 1px solid var(--gris-filet);
  border-top: 2px solid var(--accent);
}
.menu-compte-liste a,
.menu-compte-liste .lien-bouton {
  display: flex;
  width: 100%;
  padding: 0 1rem;
  font-size: 0.9rem;
}
.menu-compte-liste li + li { border-top: 1px solid var(--gris-filet); }
@media (prefers-reduced-motion: reduce) {
  .menu-compte .bi-chevron-down { transition: none; }
}

.manchette {
  text-align: center;
  padding-block: 0.75rem 0.6rem;
}
@media (min-width: 576px) {
  .manchette { padding-block: 1.25rem 1rem; }
}
.titre-site {
  display: inline-block;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 3.5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--encre);
  text-decoration: none;
}
.titre-site:hover { color: var(--encre); }

/* Barre de rubriques : reste en haut de l'écran au défilement,
   et défile horizontalement sur mobile */
.rubriques {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--papier);
  border-top: 1px solid var(--gris-filet);
  border-bottom: 2px solid var(--encre);
  font-family: var(--police-interface);
}
/* Les ancres (#contenu, sommaires) ne doivent pas finir sous la barre fixée */
html { scroll-padding-top: 3.5rem; }

.rubriques-barre {
  display: flex;
  align-items: stretch;
}
.rubriques ul {
  position: relative;          /* repère pour centrer la rubrique active (site.js) */
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.rubriques ul::-webkit-scrollbar { display: none; }

/* Fondu sur le bord où il reste des rubriques cachées (classes posées par site.js) */
[data-defilement].defile-droite {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}
[data-defilement].defile-gauche {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
}
[data-defilement].defile-gauche.defile-droite {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

/* Recherche : hors de la liste, donc toujours visible, séparée par un filet */
.rubriques .rubrique-recherche {
  flex: 0 0 auto;
  justify-content: center;
  min-width: 44px;
  padding-inline: 0.85rem 0;
  border-left: 1px solid var(--gris-filet);
  font-size: 1.05rem;
}
.rubriques a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.85rem;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--encre);
  text-decoration: none;
}
.rubriques li:first-child a { padding-left: 0; }
.rubriques a:hover { color: var(--accent); }
.rubriques a[aria-current="page"] {
  border-bottom-color: var(--accent);
  color: var(--accent);
}
@media (min-width: 992px) {
  .rubriques-barre { justify-content: center; }
  .rubriques ul { flex: 0 1 auto; }
  .rubriques li:first-child a { padding-left: 0.85rem; }
  .rubriques .rubrique-recherche { border-left: 0; padding-inline: 0.85rem; }
}

/* Bandeau d'information urgente (géré par l'admin) */
.bandeau-alerte {
  background: var(--alerte);
  color: #ffffff;
  font-family: var(--police-interface);
  font-size: 0.95rem;
  padding-block: 0.6rem;
}
.bandeau-alerte a { color: #ffffff; }
.bandeau-alerte .etiquette {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 0.5rem;
}

/* --- Contenu -------------------------------------------------------------- */

.contenu-principal { padding-block: 1.5rem 3rem; }
@media (min-width: 992px) {
  .contenu-principal { padding-block: 2.5rem 4rem; }
}

section + section { margin-top: 2rem; }

.titre-section {
  border-top: 3px solid var(--accent);
  padding-top: 0.5rem;
  margin-bottom: 1rem;
  font-family: var(--police-interface);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--encre);
}

.vide {
  border-bottom: 1px solid var(--gris-filet);
  padding-bottom: 1rem;
  font-style: italic;
  color: var(--gris-meta);
}

.encadre {
  background: var(--papier-fonce);
  padding: 1.25rem;
}
.encadre .titre-section { margin-top: 0; }

/* --- Messages flash ------------------------------------------------------- */

.flash {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gris-filet);
  border-left: 4px solid var(--marine);
  background: var(--papier-fonce);
  font-family: var(--police-interface);
  font-size: 0.95rem;
}
.flash-succes { border-left-color: var(--succes); }
.flash-erreur { border-left-color: var(--alerte); }
.flash-alerte { border-left-color: var(--accent); }

/* --- Boutons -------------------------------------------------------------- */

.btn {
  --bs-btn-border-radius: 0;
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  font-family: var(--police-interface);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.btn-primary {
  --bs-btn-color: var(--sur-accent);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--sur-accent);
  --bs-btn-hover-bg: var(--accent-survol);
  --bs-btn-hover-border-color: var(--accent-survol);
  --bs-btn-active-color: var(--sur-accent);
  --bs-btn-active-bg: var(--accent-survol);
  --bs-btn-active-border-color: var(--accent-survol);
  --bs-btn-disabled-color: var(--sur-accent);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
}
.btn-outline-secondary {
  --bs-btn-color: var(--marine);
  --bs-btn-border-color: var(--marine);
  --bs-btn-hover-color: var(--papier);
  --bs-btn-hover-bg: var(--marine);
  --bs-btn-hover-border-color: var(--marine);
  --bs-btn-active-color: var(--papier);
  --bs-btn-active-bg: var(--marine);
  --bs-btn-active-border-color: var(--marine);
}

/* --- Formulaires ---------------------------------------------------------- */

.form-label {
  font-family: var(--police-interface);
  font-size: 0.9rem;
  font-weight: 600;
}
.form-control,
.form-select {
  min-height: 44px;
  border: 1px solid var(--champ-bordure);
  border-radius: 0;
  background-color: var(--champ-fond);
  color: var(--encre);
  font-family: var(--police-interface);
  font-size: 1rem; /* 16 px : évite le zoom automatique sur iPhone */
}
.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  background-color: var(--champ-fond);
  color: var(--encre);
  box-shadow: none;
}
.form-text { color: var(--gris-meta); font-family: var(--police-interface); }
.form-control::file-selector-button {
  background-color: var(--papier-fonce);
  color: var(--encre);
  border-color: var(--champ-bordure);
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: var(--gris-filet); }
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--alerte); }
.invalid-feedback { color: var(--alerte-texte); font-family: var(--police-interface); }

/* --- Composants Bootstrap sans ombres ni arrondis ------------------------- */

.card,
.dropdown-menu,
.modal-content,
.alert,
.badge,
.pagination {
  border-radius: 0;
  box-shadow: none;
}
.card { background: transparent; border-color: var(--gris-filet); }

/* --- Pages d'erreur ------------------------------------------------------- */

.page-erreur {
  max-width: 40rem;
  margin: 2rem auto;
  text-align: center;
}
.page-erreur .chapo { margin-inline: auto; }
.code-erreur {
  margin-top: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(4rem, 3rem + 6vw, 7rem);
  font-variant-numeric: lining-nums;
  line-height: 1;
  margin-bottom: 1rem;
  color: var(--accent);
}
.erreur-debug {
  margin-block: 1.5rem;
  padding: 1rem;
  border-left: 3px solid var(--alerte);
  background: var(--papier-fonce);
  text-align: left;
  white-space: pre-wrap;
  font-size: 0.8rem;
}

/* --- Pied de page --------------------------------------------------------- */

.pied {
  border-top: 2px solid var(--encre);
  background: var(--papier-fonce);
  padding-block: 2rem;
  font-family: var(--police-interface);
  font-size: 0.9rem;
  color: var(--encre-douce);
}
.pied-titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--encre);
}
.pied-presentation { margin: 0; max-width: 32ch; }
.pied-rubrique {
  margin: 0 0 0.25rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--accent);
  font-family: var(--police-interface);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--encre);
}
.pied-liens {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pied-liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--encre-douce);
  text-decoration: none;
}
.pied-liens a:hover { color: var(--accent); text-decoration: underline; }

/* Urgences : numéros cliquables, comme l'encadré de l'accueil */
.pied-urgences .pied-rubrique { border-top-color: var(--alerte); }
.pied-urgences ul { margin: 0 0 0.5rem; padding: 0; list-style: none; }
.pied-urgences li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  border-bottom: 1px solid var(--gris-filet);
}
.pied-urgences .numero {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--alerte-texte);
  text-decoration: none;
  white-space: nowrap;
}
.pied-urgences > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--encre-douce); }

.pied-mentions {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--gris-filet);
  color: var(--gris-meta);
  font-size: 0.8rem;
}

/* --- Formulaires de compte ------------------------------------------------ */

.formulaire-etroit {
  max-width: 30rem;
  margin-inline: auto;
}
.formulaire-etroit.formulaire-gauche { margin-inline: 0; margin-top: 2rem; }

.facultatif {
  font-weight: 400;
  color: var(--gris-meta);
}

.liens-formulaire {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--police-interface);
  font-size: 0.9rem;
}
.liens-formulaire a { display: inline-flex; align-items: center; min-height: 44px; }

/* Champ piège anti-robots : hors de l'écran, ignoré par les lecteurs d'écran */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-check-input {
  width: 1.25em;
  height: 1.25em;
  border: 1px solid var(--champ-bordure);
  border-radius: 0;
  background-color: var(--champ-fond);
}
.form-check-input[type="checkbox"] { border-radius: 0; }
.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.form-check-input:focus { box-shadow: none; border-color: var(--accent); }
.form-check-label { font-family: var(--police-interface); }

.photo-profil {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.photo-profil > div { flex: 1; min-width: 0; }
.photo-profil img,
.photo-absente {
  flex: none;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--gris-filet);
}
.photo-absente {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--papier-fonce);
  color: var(--gris-meta);
  font-size: 2.5rem;
}

.fiche-statut {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin: 0 0 2rem;
  padding-block: 0.75rem;
  border-block: 1px solid var(--gris-filet);
  font-family: var(--police-interface);
}
.fiche-statut dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris-meta);
}
.fiche-statut dd { margin: 0; }

/* --- Administration ------------------------------------------------------- */

.filtres ul {
  position: relative;          /* repère pour centrer le filtre actif (site.js) */
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--gris-filet);
  font-family: var(--police-interface);
  font-size: 0.9rem;
}
.filtres a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 3px solid transparent;
  color: var(--encre);
  text-decoration: none;
}
.filtres a:hover { color: var(--accent); }
.filtres a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--encre);
  --bs-table-border-color: var(--gris-filet);
  --bs-table-hover-bg: var(--papier-fonce);
  font-family: var(--police-interface);
  font-size: 0.95rem;
}
.table thead th {
  border-bottom: 2px solid var(--encre);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris-meta);
  white-space: nowrap;
}
.tableau-admin td { vertical-align: top; }
.tableau-admin td:first-child { min-width: 12rem; }

.etat {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.etat::before { content: "● "; }
.etat-oui { color: var(--succes); }
.etat-attente { color: var(--accent); }
.etat-non { color: var(--gris-meta); }

/* --- Pagination « pages de livre » ---------------------------------------- */

.pagination-livre ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin: 2rem 0 0;
  padding: 1rem 0 0;
  list-style: none;
  border-top: 1px solid var(--gris-filet);
  font-family: var(--police-texte);
}
.pagination-livre a,
.pagination-livre span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--encre);
  text-decoration: none;
}
.pagination-livre a:hover { color: var(--accent); text-decoration: underline; }
.pagination-livre [aria-current="page"] {
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.pagination-livre span[aria-hidden="true"] { color: var(--gris-meta); }

/* --- Cartes d'actualité --------------------------------------------------- */

.grille-articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1.75rem;
}
@media (min-width: 768px) { .grille-articles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .grille-articles { grid-template-columns: repeat(3, 1fr); } }

.carte-article {
  border-top: 1px solid var(--gris-filet);
  padding-top: 0.75rem;
}
.carte-image { display: block; margin-bottom: 0.75rem; }
.carte-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--papier-fonce);
}
.carte-article .surtitre { margin-bottom: 0.25rem; }
.surtitre a { color: inherit; text-decoration: none; }
.surtitre a:hover { text-decoration: underline; }
.carte-titre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-bottom: 0.35rem;
}
.carte-titre a { color: var(--encre); text-decoration: none; }
.carte-titre a:hover { color: var(--accent); text-decoration: underline; }
.carte-article .meta { margin: 0; }

/* Accueil : deux colonnes de hauteur voisine (une + fil | agenda + urgences),
   puis une bande annonces | signaler */
.accueil-bas { margin-top: 0.5rem; }
.encadre-urgences:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .accueil-annonces .annonces-compactes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }
}

/* À la une : grand article + titres secondaires en colonne */
.bloc-une { display: grid; gap: 1.5rem; }
@media (min-width: 768px) {
  .bloc-une:has(.titres-secondaires) { grid-template-columns: 2fr 1fr; }
}
.variante-une { border-top: 0; padding-top: 0; }
.variante-une .carte-titre {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.variante-une .chapo { margin-bottom: 0.5rem; }
.titres-secondaires { display: grid; gap: 1rem; align-content: start; }
.variante-titre .carte-titre { font-size: 1.15rem; }

/* Dernières nouvelles : heure + titre, séparés par des filets */
.fil-nouvelles {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.fil-nouvelles li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--gris-filet);
}
.fil-nouvelles a { color: var(--encre); text-decoration: none; }
.fil-nouvelles a:hover { color: var(--accent); text-decoration: underline; }
.lien-suite {
  font-family: var(--police-interface);
  font-size: 0.9rem;
  font-weight: 600;
}

/* --- Page article --------------------------------------------------------- */

.article { max-width: 56rem; margin-inline: auto; }
.article-entete { max-width: 68ch; }
.article-entete h1 { margin-bottom: 0.75rem; }
.article-entete .meta { margin-bottom: 1.5rem; }

.article-image { margin: 0 0 2rem; }
.article-image img { display: block; width: 100%; height: auto; }
.article-image figcaption {
  margin-top: 0.5rem;
  font-family: var(--police-interface);
  font-size: 0.8rem;
  color: var(--gris-meta);
}
.article-image .credit { margin-left: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; }

.corps-article { max-width: 68ch; }
.corps-article > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 3.4em;
  line-height: 0.8;
  color: var(--accent);
}
.corps-article h2 { margin-top: 2rem; font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); }
.corps-article blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  font-size: 1.1em;
  color: var(--encre-douce);
}
.corps-article blockquote p { margin: 0; }
.corps-article ul { margin-bottom: 1em; padding-left: 1.25rem; }
.corps-article li { margin-bottom: 0.35em; }
.corps-article a { overflow-wrap: anywhere; }
@media (min-width: 992px) {
  .corps-article > p { text-align: justify; hyphens: auto; }
}

.articles-lies { max-width: 56rem; margin: 3rem auto 0; }

/* --- Rédaction et formulaires d'administration ---------------------------- */

.titre-avec-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}
.titre-avec-action h1 { margin: 0; }
/* Mobile : bouton d'action pleine largeur, facile à toucher */
@media (max-width: 575.98px) {
  .titre-avec-action { row-gap: 1rem; margin-bottom: 1.25rem; }
  .titre-avec-action .btn { width: 100%; min-height: 48px; }
}

.aide-memoire {
  margin-bottom: 1.5rem;
  font-family: var(--police-interface);
  font-size: 0.9rem;
}
.aide-memoire summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--marine); }
.aide-memoire code { color: var(--accent); }

.apercu-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 0.5rem; }

.barre-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gris-filet);
}
.lien-discret { font-family: var(--police-interface); font-size: 0.9rem; }

.zone-suppression {
  max-width: 40rem;
  margin-top: 3rem;
  padding-top: 0.5rem;
}
.zone-suppression .titre-section { border-top-color: var(--alerte); }
.btn-outline-danger {
  --bs-btn-color: var(--alerte-texte);
  --bs-btn-border-color: var(--alerte-texte);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--alerte);
  --bs-btn-hover-border-color: var(--alerte);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--alerte);
  --bs-btn-active-border-color: var(--alerte);
}

.liste-filets { margin: 0; padding: 0; list-style: none; }
.liste-filets li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--gris-filet);
}

.menu-admin { margin-bottom: 1.5rem; }

/* --- Agenda --------------------------------------------------------------- */

.filtres-secondaires ul { border-bottom: 0; font-size: 0.85rem; }

.agenda { border-top: 1px solid var(--gris-filet); }
.evenement {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--gris-filet);
}
.bloc-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.15rem;
  border-top: 3px solid var(--accent);
  line-height: 1;
}
.bloc-date-jour {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 2.25rem;
  font-variant-numeric: lining-nums;
  color: var(--encre);
}
.bloc-date-mois {
  margin-top: 0.25rem;
  font-family: var(--police-interface);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.evenement-texte .surtitre { margin-bottom: 0.2rem; }
.evenement-titre {
  margin-bottom: 0.25rem;
  font-size: clamp(1.15rem, 1.1rem + 0.3vw, 1.3rem);
}
.evenement-titre a { color: var(--encre); text-decoration: none; }
.evenement-titre a:hover { color: var(--accent); text-decoration: underline; }
.evenement .meta { margin: 0; }

.agenda-compact { border-top: 0; }
.agenda-compact .evenement { grid-template-columns: 3.25rem 1fr; gap: 0.75rem; padding-block: 0.75rem; }
.agenda-compact .bloc-date-jour { font-size: 1.75rem; }
.agenda-compact .evenement-titre { font-size: 1.05rem; }

.etiquette-annule,
.etiquette-en-cours {
  display: inline-block;
  margin-bottom: 0.25rem;
  padding: 0.1rem 0.4rem;
  font-family: var(--police-interface);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.etiquette-annule { background: var(--alerte); color: #ffffff; }
.etiquette-en-cours { border: 1px solid var(--succes); color: var(--succes); }
.evenement-annule .evenement-titre a { text-decoration: line-through; text-decoration-thickness: 1px; }
.evenement-annule .bloc-date { border-top-color: var(--gris-meta); }

.bandeau-annule {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--alerte);
  color: #ffffff;
  font-family: var(--police-interface);
}

.fiche-pratique {
  display: grid;
  gap: 0.75rem 2rem;
  max-width: 68ch;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--papier-fonce);
  border-left: 3px solid var(--accent);
  font-family: var(--police-interface);
}
@media (min-width: 768px) { .fiche-pratique { grid-template-columns: auto 1fr; } .fiche-action { grid-column: 1 / -1; } }
.fiche-pratique dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris-meta);
}
.fiche-pratique dd { margin: 0; font-size: 1.05rem; color: var(--encre); }
.corps-sans-lettrine > p:first-child::first-letter {
  float: none;
  margin: 0;
  font: inherit;
  color: inherit;
}

/* Filtres : une seule ligne qui défile sur mobile (comme les rubriques) */
@media (max-width: 767.98px) {
  .filtres ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filtres ul::-webkit-scrollbar { display: none; }
  .filtres li { flex: none; }
}

/* --- Petites annonces ----------------------------------------------------- */

.liste-annonces { border-top: 2px solid var(--encre); }
.annonce {
  display: grid;
  grid-template-columns: 6rem 1fr;
  grid-template-areas: "vignette texte" "vignette prix";
  gap: 0.25rem 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--gris-filet);
}
@media (min-width: 768px) {
  .annonce {
    grid-template-columns: 9rem 1fr auto;
    grid-template-areas: "vignette texte prix";
    align-items: start;
  }
}
/* Sans photo : pas de case grise vide, le texte prend toute la largeur */
.annonce-sans-image {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "texte" "prix";
}
@media (min-width: 768px) {
  .annonce-sans-image {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "texte prix";
  }
}
.annonce-vignette { grid-area: vignette; display: block; }
.annonce-vignette img,
.annonce-sans-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--papier-fonce);
  color: var(--gris-meta);
  font-size: 1.5rem;
}
.annonce-texte { grid-area: texte; min-width: 0; }
.annonce-texte .surtitre { margin-bottom: 0.15rem; }
.annonce-titre {
  margin-bottom: 0.25rem;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
}
.annonce-titre a { color: var(--encre); text-decoration: none; }
.annonce-titre a:hover { color: var(--accent); text-decoration: underline; }
.annonce .meta { margin: 0; }
.annonce .prix { grid-area: prix; margin: 0; }

.prix {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.15rem;
  font-variant-numeric: lining-nums;
  color: var(--accent);
  white-space: nowrap;
}
.prix-grand { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin-bottom: 1rem; }

.galerie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.galerie-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.galerie-principale { grid-column: 1 / -1; }

.contact-nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.2rem; }
.conseil {
  margin: 1rem 0 0;
  font-family: var(--police-interface);
  font-size: 0.85rem;
  color: var(--encre-douce);
}

.signaler {
  margin-top: 1.5rem;
  font-family: var(--police-interface);
}
.signaler summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: var(--gris-meta);
  font-size: 0.9rem;
}
.signaler summary:hover { color: var(--alerte-texte); }
.signaler form { padding-top: 0.5rem; }

.annonces-compactes { margin: 0 0 1rem; padding: 0; list-style: none; }
.annonces-compactes li {
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--gris-filet);
}
.annonces-compactes .surtitre { display: block; margin-bottom: 0.1rem; }
.annonces-compactes a { color: var(--encre); text-decoration: none; font-weight: 600; }
.annonces-compactes a:hover { color: var(--accent); text-decoration: underline; }
.annonces-compactes .prix { display: block; font-size: 1rem; }

.photos-existantes { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.75rem; }
.photos-existantes .form-check { padding-left: 0; }
.photos-existantes img { display: block; margin-bottom: 0.35rem; object-fit: cover; }
.photos-existantes .form-check-input { float: none; margin: 0 0.35rem 0 0; }


.bloc-moderation {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--gris-filet);
  border-left: 3px solid var(--alerte);
}
.liste-signalements li { align-items: flex-start; padding-block: 0.5rem; gap: 1rem; }

/* --- Contacts et services utiles ------------------------------------------ */

.grille-contacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--gris-filet);
}
@media (min-width: 768px) {
  .grille-contacts { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
}
.contact-fiche {
  padding-block: 1rem;
  border-bottom: 1px solid var(--gris-filet);
}
.contact-nom-service { margin-bottom: 0.25rem; font-size: 1.15rem; }
.contact-description { margin-bottom: 0.5rem; color: var(--encre-douce); font-size: 0.95rem; }
.contact-numeros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.btn-numero {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--sur-accent);
  font-family: var(--police-interface);
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.btn-numero:hover { background: var(--accent-survol); border-color: var(--accent-survol); color: var(--sur-accent); }
.btn-numero-secondaire { background: transparent; color: var(--accent); }
.btn-numero-secondaire:hover { color: var(--sur-accent); }
.contact-details {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  font-family: var(--police-interface);
  font-size: 0.9rem;
}
.contact-details div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.5rem; }
.contact-details dt { color: var(--gris-meta); font-weight: 600; }
.contact-details dd { margin: 0; }

.bloc-urgences {
  margin-bottom: 2.5rem;
  padding: 1rem 1.25rem 0.25rem;
  background: var(--papier-fonce);
}
.bloc-urgences .titre-section { border-top-color: var(--alerte); }
.bloc-urgences .grille-contacts { border-top: 0; }
.contact-urgence .btn-numero { font-size: 1.35rem; }
.contact-urgence .btn-numero:not(.btn-numero-secondaire) { background: var(--alerte); border-color: var(--alerte); color: #ffffff; }

.sommaire-contacts { margin-bottom: 1rem; }
.section-contacts { scroll-margin-top: 1rem; }

.encadre-urgences { margin-bottom: 2rem; }
.encadre-urgences .titre-section { border-top-color: var(--alerte); }
.urgences-compactes { margin: 0 0 0.75rem; padding: 0; list-style: none; font-family: var(--police-interface); }
.urgences-compactes li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  border-bottom: 1px solid var(--gris-filet);
}
.urgences-compactes .numero {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--alerte-texte);
  text-decoration: none;
  white-space: nowrap;
}

/* --- Impression (liste des contacts à afficher au mur) -------------------- */

@media print {
  :root { --papier: #ffffff; --papier-fonce: #ffffff; --encre: #000000; }
  .barre-haut, .rubriques, .pied, .lien-evitement, .sommaire-contacts, .flash, .btn,
  .menu-admin, .signaler, .zone-suppression { display: none !important; }
  body { font-size: 11pt; background: #ffffff; color: #000000; }
  .manchette { padding-block: 0 0.5rem; }
  .titre-site { font-size: 18pt; }
  a { color: #000000; text-decoration: none; }
  .btn-numero, .btn-numero-secondaire, .contact-urgence .btn-numero:not(.btn-numero-secondaire) {
    min-height: 0; padding: 0; border: 0; background: none; color: #000000; font-size: 12pt;
  }
  .bi-whatsapp, .bi-telephone { display: none; }
  .contact-fiche, .bloc-urgences { break-inside: avoid; }
}

/* --- Demandes et signalements --------------------------------------------- */

.btn-envoi { width: 100%; font-size: 1rem; min-height: 52px; }
@media (min-width: 576px) { .btn-envoi { width: auto; } }

fieldset legend.titre-section { width: 100%; float: none; }
fieldset legend.form-label { float: none; width: auto; margin-bottom: 0.5rem; font-size: 0.9rem; }

/* Numéro d'étape dans les intitulés de section (1 Votre message, 2 Vos coordonnées) */
.etape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.35rem;
  background: var(--encre);
  color: var(--papier);
  font-size: 0.75rem;
  letter-spacing: 0;
}

/* Rappel avant un formulaire : danger immédiat → numéros d'urgence */
.avis-urgence {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin-bottom: 1.25rem;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--alerte);
  background: var(--papier-fonce);
  font-family: var(--police-interface);
  font-size: 0.9rem;
}
.avis-urgence .bi { color: var(--alerte-texte); }

/* Rappel de confidentialité (mobile), repris de l'encadré « Confidentialité » */
.rappel-confiance {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-family: var(--police-interface);
  font-size: 0.9rem;
  color: var(--encre-douce);
}
.rappel-confiance li { display: flex; gap: 0.5rem; align-items: baseline; padding-block: 0.15rem; }
.rappel-confiance .bi { color: var(--succes); }

/* Type de demande : grandes cases à toucher */
.choix-type { display: grid; gap: 0.5rem; }
@media (min-width: 576px) { .choix-type { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choix {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--champ-bordure);
  background: var(--champ-fond);
  font-family: var(--police-interface);
  cursor: pointer;
}
.choix input { margin-top: 0.25rem; accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }
.choix-libelle { display: block; font-weight: 600; }
.choix-aide { display: block; font-size: 0.85rem; line-height: 1.4; color: var(--gris-meta); }
.choix:hover { border-color: var(--encre); }
.choix:has(input:checked) {
  /* filet de 2 px ; le retrait diminue d'autant pour que rien ne bouge */
  border: 2px solid var(--accent);
  padding: calc(0.7rem - 1px) calc(0.85rem - 1px);
  background: var(--papier-fonce);
}
.choix:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choix.is-invalid { border-color: var(--alerte); }

/* Compteur de caractères (site.js) */
.compteur-caracteres {
  margin-top: 0.25rem;
  text-align: right;
  font-family: var(--police-interface);
  font-size: 0.8rem;
  color: var(--gris-meta);
}
.compteur-caracteres.limite { color: var(--alerte-texte); font-weight: 600; }

/* Photo : le champ fichier est remplacé visuellement par un bouton (site.js) */
.photo-js input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.photo-js input[type="file"]:focus-visible + .photo-bouton { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-js > .form-label { display: block; }
.photo-bouton { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; }
.photo-apercu {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.5rem;
  border: 1px solid var(--gris-filet);
}
.photo-apercu[hidden] { display: none; }
.photo-apercu img { width: 96px; height: 96px; object-fit: cover; background: var(--papier-fonce); }
.photo-nom {
  margin: 0 0 0.25rem;
  font-family: var(--police-interface);
  font-size: 0.85rem;
  word-break: break-all;
}
.photo-retirer { min-height: 44px; color: var(--alerte-texte); font-family: var(--police-interface); font-size: 0.9rem; text-decoration: underline; }
.champ-photo .invalid-feedback:empty { display: none !important; }

.encadre-confiance .titre-section { border-top-color: var(--succes); }
.liste-confiance { margin: 0; padding: 0; list-style: none; font-family: var(--police-interface); font-size: 0.95rem; }
.liste-confiance li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.5rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--gris-filet);
}
.liste-confiance li:last-child { border-bottom: 0; }
.liste-confiance .bi { color: var(--succes); font-size: 1.1rem; }

.numero-suivi {
  margin-block: 1.5rem 0.75rem;
  padding: 1.25rem;
  border: 2px solid var(--encre);
  text-align: center;
}
.numero-suivi-libelle {
  display: block;
  font-family: var(--police-interface);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris-meta);
}
.numero-suivi-valeur {
  display: block;
  margin-top: 0.25rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(2rem, 1.5rem + 3vw, 2.75rem);
  letter-spacing: 0.12em;
  user-select: all;
}

.statut-dossier {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid currentColor;
  font-family: var(--police-interface);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.statut-nouveau { color: var(--accent); }
.statut-en_cours { color: var(--marine); }
.statut-traite { color: var(--succes); }
.statut-rejete { color: var(--gris-meta); }

.ligne-nouvelle td:first-child a { font-weight: 700; }

.reponse-suivi {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--marine);
  background: var(--papier-fonce);
}
.reponse-suivi p:last-child { margin-bottom: 0; }

.message-signalement {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accent);
  background: var(--papier-fonce);
  white-space: normal;
}
.photo-signalement { display: block; max-width: 100%; height: auto; max-height: 28rem; border: 1px solid var(--gris-filet); }

.historique { margin: 0; padding: 0; list-style: none; }
.historique li {
  padding: 0.75rem 0 0.75rem 1rem;
  border-left: 3px solid var(--gris-filet);
  margin-bottom: 0.5rem;
}
.historique-reponse { border-left-color: var(--marine) !important; }
.historique-note { border-left-color: var(--gris-meta) !important; background: var(--papier-fonce); }

.compteur {
  margin-left: 0.25rem;
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.35em;
  background: var(--accent);
  color: var(--sur-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}

/* --- Bandeau d'alerte (complète .bandeau-alerte) -------------------------- */

.bandeau-alerte .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.bandeau-alerte a { font-weight: 700; white-space: nowrap; }
.bandeau-info { background: var(--encre); color: var(--papier); }
.bandeau-info a { color: var(--papier); }

.slogan {
  margin: 0.35rem 0 0;
  font-style: italic;
  color: var(--encre-douce);
}

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

.formulaire-recherche {
  display: flex;
  gap: 0.5rem;
  max-width: 40rem;
  margin-bottom: 1.5rem;
}
.formulaire-recherche .form-control { flex: 1; min-width: 0; }
.formulaire-recherche .btn { flex: none; }

.resultats-rubrique { margin-top: 2rem; }
.resultats-rubrique .titre-section .meta { text-transform: none; letter-spacing: 0; font-weight: 400; }
.liste-resultats { margin: 0; padding: 0; list-style: none; }
.liste-resultats li {
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--gris-filet);
}
.liste-resultats li > a:first-child {
  display: block;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--encre);
  text-decoration: none;
}
.liste-resultats li > a:first-child:hover { color: var(--accent); text-decoration: underline; }

/* Accès rapide (accueil, mobile) */
.acces-rapide {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.acces-rapide a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  border: 1px solid var(--gris-filet);
  background: var(--papier-fonce);
  color: var(--encre);
  font-family: var(--police-interface);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.acces-rapide .bi { font-size: 1.25rem; color: var(--accent); }

/* --- Tableau de bord : chiffres clés (règles du skill dataviz) ------------- */

.rangee-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0;
  margin-bottom: 2rem;
  border-top: 1px solid var(--gris-filet);
  border-left: 1px solid var(--gris-filet);
}
.chiffre-cle {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--gris-filet);
  border-bottom: 1px solid var(--gris-filet);
  color: var(--encre);
  text-decoration: none;
}
.chiffre-cle:hover { background: var(--papier-fonce); color: var(--encre); }
.chiffre-valeur {
  font-family: var(--police-interface); /* sans, chiffres proportionnels */
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
}
.chiffre-libelle {
  font-family: var(--police-interface);
  font-size: 0.85rem;
  color: var(--encre-douce);
}
/* Un élément à traiter : filet d'accent + icône + libellé, jamais la couleur seule */
.chiffre-action { position: relative; }
.chiffre-action::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); }
.chiffre-action .bi { color: var(--accent); }

.tableau-chiffres th { font-weight: 400; }
.tableau-chiffres td {
  text-align: right;
  font-variant-numeric: tabular-nums; /* colonne alignée */
  font-weight: 600;
}
.tableau-chiffres .ligne-total th,
.tableau-chiffres .ligne-total td { border-top: 2px solid var(--encre); font-weight: 700; }

/* --- Journal -------------------------------------------------------------- */

.journal { margin: 0 0 1rem; padding: 0; list-style: none; font-family: var(--police-interface); font-size: 0.9rem; }
.journal li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.75rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--gris-filet);
}
@media (max-width: 575.98px) { .journal li { grid-template-columns: 1fr; gap: 0.1rem; } }
.journal code { color: var(--marine); font-size: 0.85em; }
.journal-details { color: var(--encre-douce); overflow-wrap: anywhere; }

/* --- Zones tactiles (44 px minimum sur mobile) ---------------------------- */

/* Toute la carte est cliquable : le lien du titre s'étend sur son bloc.
   Les autres liens du bloc (rubrique, téléphone) passent au-dessus. */
.carte-article,
.evenement,
.annonce,
.fil-nouvelles li,
.annonces-compactes li,
.liste-resultats li { position: relative; }
.carte-titre a::after,
.evenement-titre a::after,
.annonce-titre a::after,
.fil-nouvelles a::after,
.annonces-compactes a::after,
.liste-resultats li > a:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
}
.surtitre a,
.liste-resultats .meta a {
  position: relative;
  z-index: 1;
}
/* Rubrique d'une carte : zone de toucher agrandie sans décaler la mise en page */
.surtitre a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }

.lien-suite { display: inline-flex; align-items: center; min-height: 44px; }
.titre-site { padding-block: 0.2rem; }
.urgences-compactes .numero,
.pied-urgences .numero {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-left: 0.75rem;
}
.contact-details dd a { display: inline-block; padding-block: 0.65rem; margin-block: -0.65rem; }

/* --- Envoi en cours (site.js) ---------------------------------------------- */

.btn.envoi-en-cours { opacity: 0.75; cursor: progress; }

/* --- Retour en haut (site.js) ---------------------------------------------- */

.retour-haut {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1010;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--encre);
  background: var(--papier);
  color: var(--encre);
  font-size: 1.25rem;
  cursor: pointer;
}
.retour-haut[hidden] { display: none; }
.retour-haut:hover { border-color: var(--accent); color: var(--accent); }
@media print { .retour-haut { display: none !important; } }

/* --- Actions en ligne des listes de gestion (partials/actions_ligne.php) -- */

.actions-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: flex-start;
}
.actions-ligne form { margin: 0; }
.btn-action {
  min-height: 44px;
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  white-space: nowrap;
}
@media (min-width: 768px) and (pointer: fine) {
  .btn-action { min-height: 34px; }   /* souris : plus compact */
}
/* Les boutons restent sur une ligne quand la place suffit, et passent à la
   ligne plutôt que de déborder du tableau quand elle manque */
.cellule-actions { min-width: 12rem; }

/* Bouton plein rouge : dernière étape d'une suppression */
.btn-danger {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--alerte);
  --bs-btn-border-color: var(--alerte);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #8f1e18;
  --bs-btn-hover-border-color: #8f1e18;
  --bs-btn-active-bg: #8f1e18;
  --bs-btn-active-border-color: #8f1e18;
}

/* Panneau de confirmation de suppression (élément <details>) */
.confirmer-suppression { position: relative; }
.confirmer-suppression summary { list-style: none; cursor: pointer; }
.confirmer-suppression summary::-webkit-details-marker { display: none; }
.confirmer-suppression[open] summary { background: var(--alerte); border-color: var(--alerte); color: #ffffff; }
.confirmer-suppression form {
  margin-top: 0.35rem;
  padding: 0.75rem;
  border: 1px solid var(--alerte);
  border-left-width: 3px;
  background: var(--papier);
  font-family: var(--police-interface);
  font-size: 0.85rem;
}
.confirmer-suppression .form-check { margin-bottom: 0.6rem; }
.confirmer-suppression .form-check-label { white-space: normal; }
/* Ordinateur : le panneau s'ouvre sous le bouton, aligné à droite, par-dessus la ligne suivante */
@media (min-width: 768px) {
  .confirmer-suppression form {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 5;
    width: 17rem;
  }
}

/* Tableaux de gestion sur mobile : une ligne = un bloc empilé,
   chaque cellule précédée de son intitulé (attribut data-label) */
@media (max-width: 767.98px) {
  .tableau-empilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau-empilable,
  .tableau-empilable tbody,
  .tableau-empilable tr,
  .tableau-empilable td { display: block; width: 100%; }
  .tableau-empilable tr {
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--gris-filet);
  }
  .tableau-empilable td {
    padding: 0.15rem 0;
    border: 0;
    min-width: 0 !important;
  }
  .tableau-empilable td[data-label] {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
  }
  .tableau-empilable td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 6.5rem;
    color: var(--gris-meta);
    font-family: var(--police-interface);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .tableau-empilable .cellule-actions { width: 100%; padding-top: 0.6rem; }
  /* Boutons en grille régulière ; le panneau de suppression ouvert prend toute la largeur */
  .tableau-empilable .actions-ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tableau-empilable .actions-ligne .btn,
  .tableau-empilable .actions-ligne summary { width: 100%; }
  .tableau-empilable .confirmer-suppression[open] { grid-column: 1 / -1; }
}
.confirmer-suppression .form-check-input { margin-right: 0.35rem; }

/* Liste de gestion simple (catégories) : nom + mention à gauche, actions à droite */
.liste-gestion { margin: 0; padding: 0; list-style: none; }
.liste-gestion li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--gris-filet);
}
.action-impossible {
  align-self: center;
  max-width: 11rem;
  font-family: var(--police-interface);
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--gris-meta);
}