/**
 * Charte graphique – Signalement municipal
 * Couleurs: primaire #005EA5, secondaire #F2F2F2, accent #FFB400, texte #1A1A1A / #4D4D4D, erreur #D93025, succès #28A745.
 * Typo: rem (H1 2rem, H2 1.5rem, H3 1.25rem, corps 1rem, labels 0.875rem), line-height 1.5.
 */

:root {
  --color-primary: #005EA5;
  --color-secondary: #F2F2F2;
  --color-accent: #FFB400;
  --color-home-bandeau: #005EA5;
  --color-text: #1A1A1A;
  --color-text-muted: #4D4D4D;
  --color-error: #D93025;
  --color-success: #28A745;
  --font-sans: "Inter", "Open Sans", system-ui, sans-serif;
  --radius: 4px;
  --touch-min: 44px;
}

html {
  height: 100%;
}

/* Layout global : body flex colonne → zone contenu (flex 1) + footer en bas */
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.page-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  max-width: 100%;
}

#main-content {
  flex: 1 1 0;
  max-width: 100%;
}

/* Mobile / tablette : marge sous le contenu */
@media (max-width: 1023px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  .page-wrap {
    padding-bottom: 4rem;
  }
}

/* Mobile + tablette : base */
.container {
  padding: 1rem;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
}

/* Page d'accueil : contenu centré au centre de l'écran */
.page-home {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  box-sizing: border-box;
}

.page-home-content {
  text-align: center;
  width: 100%;
  max-width: 28rem;
}

.page-home-content h1 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.page-home-intro {
  margin-bottom: 1.5rem;
  color: var(--color-text-muted);
}

.page-home-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.page-home-content .meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.page-home-content .meta a {
  color: var(--color-primary);
  text-decoration: none;
}

.page-home-content .meta a:hover,
.page-home-content .meta a:focus,
.page-home-content .meta a:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Page d'accueil personnalisée : bloc prend la hauteur de son contenu (flux normal, pas de collapse) */
.page-home--personnalise {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: min-content;
  margin: 0;
  box-sizing: border-box;
}

/* Mobile / tablette : bande couleur 200px, logo 150px centré */
.page-home--personnalise .page-home__top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12.5rem;
  min-height: 12.5rem;
  padding: 1rem;
  background: var(--color-home-bandeau, var(--color-primary));
  width: 100%;
}

.page-home--personnalise .page-home__logo-top {
  height: 9.375rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.page-home--personnalise .page-home__commune-name-top {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

.page-home--personnalise .page-home__main {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: min-content;
}

/* Gauche : 100% hauteur, contenu centré verticalement et horizontalement */
.page-home--personnalise .page-home__left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: #fff;
}

.page-home--personnalise .page-home__right {
  display: none;
}

.page-home--personnalise .page-home__right-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  padding: 1rem;
  box-sizing: border-box;
}

.page-home--personnalise .page-home__logo-panel {
  width: 18.75rem;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Contexte commune (label + nom) : en haut du contenu */
.page-home__commune-context {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-secondary);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-home__commune-label {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.page-home__commune-current {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

/* Changer de commune : sous les 2 boutons, ligne grise de séparation */
.page-home__commune-change-block {
  margin-bottom: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-secondary);
  display: flex;
  justify-content: center;
}

.page-home__commune-change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
}

.page-home__commune-select {
  flex: 1;
  min-width: 0;
  max-width: 14rem;
}

.page-home__commune-submit {
  flex-shrink: 0;
}

/* Bandeau citoyen (pages signalement, suivi, confirmation) : défaut ou ville selon contexte */
.bandeau-citoyen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12.5rem;
  min-height: 12.5rem;
  padding: 1rem;
  background: var(--color-home-bandeau, var(--color-primary));
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

.bandeau-citoyen__logo {
  height: 9.375rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.bandeau-citoyen__nom {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

/* Bandeau communication in-app (10B.4) : annonce en haut de page */
.bandeau-annonce {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.9375rem;
  text-align: center;
  flex-shrink: 0;
  border-bottom: 1px solid lightgrey;
  overflow-x: hidden;
}

.bandeau-annonce__link,
.bandeau-annonce__text {
  display: block;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.bandeau-annonce__link {
  color: #fff;
  text-decoration: underline;
}

.bandeau-annonce__link:hover,
.bandeau-annonce__link:focus,
.bandeau-annonce__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  /* Desktop home : main flex + min-height 0 pour que les 2 colonnes remplissent la hauteur */
  .is-home-page #main-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .is-home-page .page-home {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
  }

  /* Desktop : 2 colonnes côte à côte, bloc droit jusqu'en bas */
  .page-home--personnalise {
    flex-direction: row;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    width: 100%;
  }

  .page-home--personnalise .page-home__top {
    display: none;
  }

  /* Conteneur des 2 parties : 100% hauteur */
  .page-home--personnalise .page-home__main {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    min-height: 0;
    overflow: hidden;
    height: 100%;
  }

  /* Partie gauche : 50% largeur, 100% hauteur, contenu centré */
  .page-home--personnalise .page-home__left {
    width: 50%;
    flex: 0 0 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: #fff;
  }

  /* Partie droite : 50% largeur, 100% hauteur, contenu centré */
  .page-home--personnalise .page-home__right {
    width: 50%;
    flex: 0 0 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--color-home-bandeau, var(--color-primary));
    box-sizing: border-box;
  }

  .page-home--personnalise .page-home__right-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: 100%;
  }
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

/* Boutons charte */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: #fff;
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

.btn:hover,
.btn:focus,
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Formulaire login agent */
.page-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-secondary);
}

.login-card {
  width: 100%;
  max-width: 24rem;
  padding: 1.5rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.login-card h1 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea {
  width: 100%;
  min-height: var(--touch-min);
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid #4D4D4D;
  border-radius: var(--radius);
  box-sizing: border-box;
}

.form-group textarea {
  min-height: 4rem;
  resize: vertical;
}

.form-group input:focus,
.form-group input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  min-height: 0;
  margin: 0;
  cursor: pointer;
}

/* Messages flash / alerte */
.alert-error,
.alert.alert-error {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background-color: #fde8e8;
  color: var(--color-error);
  border: 2px solid var(--color-error);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
}

.alert-success,
.alert.alert-success {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background-color: #e6f4ea;
  color: var(--color-success);
  border: 2px solid var(--color-success);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
}

.alert-warning,
.alert.alert-warning {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background-color: #fff3cd;
  color: #856404;
  border: 2px solid #ffc107;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
}

.alert-info,
.alert.alert-info {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background-color: #e8f4fc;
  color: #004085;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Messages flash : espacement entre eux */
.flash-messages {
  margin-bottom: 1.5rem;
}

.flash-messages .alert:last-child {
  margin-bottom: 0;
}

/* Page Profil agent (changement mot de passe) */
.page-profil {
  margin-top: 1.5rem;
  padding-bottom: 2rem;
}

.page-profil__title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  color: var(--color-primary);
}

@media (min-width: 1024px) {
  .page-profil__title {
    font-size: 2rem;
  }
}

.page-profil__intro {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.profil-section {
  max-width: 28rem;
}

.profil-card {
  padding: 1.5rem;
  background: var(--color-secondary);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-primary);
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .profil-card {
    padding: 2rem;
  }
}

.form-profil__fields {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.form-profil .form-group {
  margin-bottom: 0;
}

.form-profil label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.form-profil input[type="password"] {
  width: 100%;
  min-height: var(--touch-min);
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid #4D4D4D;
  border-radius: var(--radius);
  box-sizing: border-box;
}

.form-profil input[type="password"]:focus,
.form-profil input[type="password"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.form-profil .invalid-feedback {
  font-size: 0.875rem;
  color: var(--color-error);
  margin-top: 0.25rem;
}

.form-profil__actions {
  margin-top: 0;
  padding-top: 0.5rem;
}

.form-profil__actions .btn {
  width: 100%;
}

@media (min-width: 1024px) {
  .form-profil__actions .btn {
    width: auto;
    min-width: 12rem;
  }
}

/* Espacement container agent (cohérence avec le reste) */
.container--agent {
  padding-bottom: 1rem;
}

/* Formulaire SAV agent : sujet et description ~40 % en laptop+, pleine largeur en tablette/mobile */
/* Page SAV agent : intro + layout form / WhatsApp */
.sav-page__intro {
  margin: 0 0 1.25rem;
}

.sav-page__layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sav-page__whatsapp {
  order: 2;
}

.sav-whatsapp-callout {
  padding: 1.25rem;
  background: var(--color-secondary);
  border-radius: var(--radius);
  border-left: 4px solid #25D366;
}

.sav-whatsapp-callout .icon-whatsapp {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 0 1rem;
}

.sav-whatsapp-callout__text {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text);
}

.sav-whatsapp-callout__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

.form-sav .form-group--sujet .form-input,
.form-sav .form-group--description .form-input,
.form-sav .form-group--description textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.form-sav-actions {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .sav-page__layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2rem;
    align-items: start;
  }

  .sav-page__whatsapp {
    order: 0;
    position: sticky;
    top: 1rem;
  }

  .sav-whatsapp-callout {
    padding: 1.5rem;
  }

  .form-sav .form-group--sujet,
  .form-sav .form-group--description {
    max-width: 100%;
  }

  .form-sav .form-group--description .form-input,
  .form-sav .form-group--description textarea {
    min-height: 8rem;
    width: 100%;
  }

  .form-sav-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}

/* Loader bouton login */
.btn .btn__loader {
  display: none;
}

.btn.is-loading .btn__text {
  display: none;
}

.btn.is-loading .btn__loader {
  display: inline;
}

.btn.is-loading {
  cursor: wait;
  opacity: 0.9;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

/* Dashboard agent */
.agent-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-secondary);
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

.agent-header-title,
.agent-header h1 {
  margin: 0;
  color: var(--color-primary);
  font-size: 1.25rem;
}

.agent-header-logo {
  display: block;
  max-height: 2.5rem;
  width: auto;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .agent-header-title,
  .agent-header h1 {
    font-size: 2rem;
  }
  .agent-header-logo {
    max-height: 3rem;
  }
}

/* Bouton hamburger : visible mobile/tablette uniquement */
.agent-nav-toggle {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-primary);
  cursor: pointer;
}

.agent-nav-toggle:hover,
.agent-nav-toggle:focus,
.agent-nav-toggle:focus-visible {
  background: var(--color-secondary);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.agent-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(0.35rem) rotate(45deg);
}

.agent-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.agent-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-0.35rem) rotate(-45deg);
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  width: 1.25rem;
}

.hamburger-line {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: opacity 0.2s, transform 0.2s;
}

@media (min-width: 1024px) {
  .agent-nav-toggle {
    display: none;
  }
}

.agent-nav {
  display: flex;
  gap: 0.5rem;
}

.agent-nav .btn {
  padding: 0.5rem 1rem;
}

/* Onglet actif (navigation agent / admin) : style inversé du bouton (fond blanc, bordure et texte couleur primaire) */
.agent-nav .btn.is-active,
.agent-nav .nav-dropdown__trigger.is-active {
  background: #fff;
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 600;
}

.agent-nav .nav-dropdown__trigger.is-active::after {
  border-top-color: var(--color-primary);
}

.agent-nav .btn.btn-secondary.is-active {
  background: #fff;
  color: var(--color-text);
  border-color: var(--color-text);
  font-weight: 600;
}

.nav-dropdown__link.is-active {
  background: #fff;
  color: var(--color-primary);
  font-weight: 600;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* Sous-menus déroulants (Suivi & rapports, Administration) */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  /* Hérite du .btn : fond bleu, texte blanc */
}

.nav-dropdown__trigger::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.35rem solid transparent;
  border-right: 0.35rem solid transparent;
  border-top: 0.35rem solid #fff;
  margin-left: 0.15rem;
}

.nav-dropdown:focus-within .nav-dropdown__trigger::after,
.nav-dropdown:hover .nav-dropdown__trigger::after {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 11rem;
  background: #fff;
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.nav-dropdown__link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9375rem;
}

.nav-dropdown__link:hover,
.nav-dropdown__link:focus,
.nav-dropdown__link:focus-visible {
  background: var(--color-secondary);
  color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.nav-dropdown__menu li + li {
  border-top: 1px solid var(--color-secondary);
}

/* Desktop : menu au survol / focus */
@media (min-width: 1024px) {
  .nav-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s;
    z-index: 100;
  }

  .nav-dropdown:hover .nav-dropdown__menu,
  .nav-dropdown:focus-within .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
  }
}

/* Mobile + tablette : sous-menus fermés par défaut, ouverts au clic sur le trigger */
@media (max-width: 1023px) {
  .nav-dropdown__menu {
    display: none;
    margin-top: 0.25rem;
    margin-left: 1rem;
    border: none;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.03);
  }

  .nav-dropdown.is-open .nav-dropdown__menu {
    display: block;
  }
}

.agent-nav .btn--logout {
  margin-left: auto;
}

@media (max-width: 1023px) {
  .agent-nav .btn--logout {
    margin-left: 0;
  }
}

/* Mobile + tablette : menu en drawer (caché par défaut, ouvert au clic hamburger) */
@media (max-width: 1023px) {
  .agent-nav {
    width: 100%;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease-out, opacity 0.2s;
  }

  .agent-header.is-open .agent-nav {
    max-height: 32rem;
    opacity: 1;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-secondary);
  }

  .agent-nav .btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .agent-nav {
    flex-direction: row;
  }
}

.list-signalements {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.list-signalements li {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--color-secondary);
  border-radius: var(--radius);
}

.list-signalements li a {
  color: var(--color-primary);
  text-decoration: none;
}

.list-signalements li a:hover,
.list-signalements li a:focus,
.list-signalements li a:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.list-signalements .meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

/* Liste signalements : tableau responsive (cartes mobile, tableau desktop) */
.table-signalements-wrapper {
  margin-top: 1rem;
}

.table-signalements {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table-signalements th,
.table-signalements td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-secondary);
}

.table-signalements th {
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-secondary);
}

.table-signalements tbody tr:hover {
  background: rgba(0, 94, 165, 0.04);
}

.table-signalements a {
  color: var(--color-primary);
  text-decoration: none;
}

.table-signalements a:hover,
.table-signalements a:focus,
.table-signalements a:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Boutons dans le tableau : garder texte blanc lisible */
.table-signalements a.btn {
  color: #fff;
  text-decoration: none;
}

.table-signalements a.btn:hover,
.table-signalements a.btn:focus {
  color: #fff;
  text-decoration: none;
}

/* Mobile + tablette : lignes en cartes */
@media (max-width: 1023px) {
  .table-signalements thead {
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }

  .table-signalements tr {
    display: block;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--color-secondary);
    border-radius: var(--radius);
  }

  .table-signalements td {
    display: block;
    border-bottom: none;
    padding: 0.25rem 0;
  }

  .table-signalements td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-muted);
    display: inline-block;
    min-width: 6rem;
  }

  /* Colonne Sélection : label et checkbox sur la même ligne */
  .table-signalements td.col-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .table-signalements td:first-child {
    padding-top: 0;
  }

  .table-signalements td:last-child {
    padding-bottom: 0;
  }
}

/* Laptop et au-dessus : tableau horizontal (lignes en ligne, colonnes visibles) */
@media (min-width: 1024px) {
  .table-signalements-wrapper .table-signalements,
  table.table-signalements {
    display: table;
    table-layout: auto;
  }

  .table-signalements thead {
    display: table-header-group;
    clip: unset;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
  }

  .table-signalements tbody {
    display: table-row-group;
  }

  .table-signalements tr {
    display: table-row;
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }

  .table-signalements td,
  .table-signalements th {
    display: table-cell;
    border-bottom: 1px solid var(--color-secondary);
    padding: 0.5rem 0.75rem;
  }

  .table-signalements td::before {
    display: none !important;
  }
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-text);
  border-color: #4D4D4D;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:focus-visible {
  background-color: #e5e5e5;
  border-color: var(--color-text);
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.btn-small {
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
  min-height: 36px;
}

.btn-danger {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: #fff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:focus-visible {
  background-color: #b32820;
  border-color: #b32820;
  box-shadow: 0 2px 4px rgba(217, 48, 37, 0.3);
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

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

/* Gestion des agents : page liste */
.page-agents {
  margin-top: 1rem;
  padding-bottom: 2rem;
}

.page-agents__title {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  color: var(--color-primary);
}

@media (min-width: 1024px) {
  .page-agents__title {
    font-size: 2rem;
  }
}

.page-agents__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.table-agents-wrapper {
  margin-top: 0.5rem;
  overflow-x: auto;
}

/* Rapports admin : graphiques */
.rapports-charts {
  display: grid;
  gap: 2rem;
  margin: 1.5rem 0;
}

.rapports-chart-wrapper {
  background: var(--color-bg-muted, #f2f2f2);
  border-radius: var(--radius);
  padding: 1rem;
}

.rapports-chart-title {
  font-size: 1rem;
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.rapports-chart-container {
  position: relative;
  max-width: 100%;
  height: 280px;
}

@media (min-width: 1024px) {
  .rapports-chart-container {
    height: 320px;
  }
}

.table-agents {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table-agents th,
.table-agents td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-secondary);
}

.table-agents th {
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-secondary);
}

.table-agents tbody tr:hover {
  background: rgba(0, 94, 165, 0.04);
}

.table-agents .btn {
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .table-agents thead {
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }

  .table-agents tr {
    display: block;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--color-secondary);
    border-radius: var(--radius);
  }

  .table-agents td {
    display: block;
    border-bottom: none;
    padding: 0.35rem 0;
  }

  .table-agents td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-muted);
    display: inline-block;
    min-width: 5.5rem;
  }

  .table-agents td:last-child {
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .table-agents td:last-child .form-inline {
    display: block;
  }
}

@media (min-width: 1024px) {
  .table-agents td::before {
    display: none;
  }
}

/* Formulaires agent (création / édition) */
.page-agents-form {
  margin-top: 1rem;
  padding-bottom: 2rem;
  max-width: 28rem;
}

.page-agents-form__title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  color: var(--color-primary);
}

.page-agents-form__meta {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.form-agent__fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.form-agent__fields--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

.form-agent .form-group {
  margin-bottom: 0;
}

.form-agent .form-group--checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.form-agent .form-group--checkbox input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  min-height: 0;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.form-agent .form-group--checkbox label {
  margin-bottom: 0;
  order: 1;
  flex: 0 1 auto;
  cursor: pointer;
}

/* Catégories de signalement (responsable) : chaque bloc = input + label dans .form-choice-item */
.form-agent .form-choice-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  min-height: var(--touch-min);
}

.form-agent .form-choice-item input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}

.form-agent .form-choice-item label {
  margin: 0;
  cursor: pointer;
  font-weight: normal;
}

/* Tablette / mobile : conteneur en colonne (blocs les uns sous les autres) */
@media (max-width: 1023px) {
  .responsable_categories_signalement_categoriesSignalement {
    display: flex;
    flex-direction: column;
  }
}

.form-agent .form-group--fieldset {
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 0.5rem;
}

.form-agent .form-legend {
  font-size: 1rem;
  font-weight: 600;
  padding: 0 0.25rem;
  margin-bottom: 0.5rem;
}

.form-agent .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0;
}

@media (max-width: 1023px) {
  .form-actions {
    gap: 1.25rem;
  }
}

/* Filtre période statistiques agent : même style que les autres formulaires */
.form-statistiques-periode__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.form-statistiques-periode .form-group {
  margin-bottom: 0;
  min-width: 10rem;
}

.form-statistiques-periode .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Stats Premium : bloc avancé, tableau par agent, graphique */
.stats-premium {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-secondary, #F2F2F2);
}

.stats-premium h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.stats-premium h3 {
  font-size: 1.125rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.stats-chart-wrapper {
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.stats-chart-wrapper canvas {
  max-width: 100%;
  height: auto;
}

.stats-chart-pie {
  max-width: 20rem;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.9375rem;
}

.stats-table th,
.stats-table td {
  border: 1px solid var(--color-border, #ddd);
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.stats-table th {
  background: var(--color-secondary, #F2F2F2);
  font-weight: 600;
}

.stats-table-agents td:nth-child(2),
.stats-table-agents td:nth-child(3),
.stats-table-agents td:nth-child(4) {
  text-align: right;
}

@media (min-width: 1024px) {
  .stats-chart-wrapper {
    max-width: 36rem;
  }
}

/* Import agents */
.page-import-agents {
  margin-top: 1rem;
  padding-bottom: 2rem;
}

.page-import-agents__title {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  color: var(--color-primary);
}

.page-import-agents__intro {
  margin-bottom: 0.75rem;
}

.form-import-agents .form-row {
  margin-bottom: 1rem;
}

.form-import-agents .form-row label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Réglages : catégories d’agents */
.page-reglages {
  margin-top: 1rem;
  padding-bottom: 2rem;
}

.page-reglages__title {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
  color: var(--color-primary);
}

.reglages-section {
  margin-bottom: 2rem;
}

.reglages-section h2 {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}

.reglages-intro {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

.list-categories-agent {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.reglages-category-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--color-secondary);
  border-radius: var(--radius);
}

.reglages-category-libelle {
  font-weight: 600;
}

.reglages-category-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}

.badge-inactif {
  font-size: 0.75rem;
  background: var(--color-text-muted);
  color: #fff;
}

.form-categorie-agent__fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.form-categorie-agent .form-group {
  margin-bottom: 0;
}

.form-categorie-agent .form-group--checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.form-categorie-agent .form-group--checkbox input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  min-height: 0;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.form-categorie-agent .form-group--checkbox label {
  margin-bottom: 0;
  order: 1;
  flex: 0 1 auto;
  cursor: pointer;
}

.form-categorie-agent .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0;
}

.options-section-title {
  font-size: 1.125rem;
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-secondary);
}
.options-section-title:first-child {
  margin-top: 0;
}

.form-delete-agent {
  display: inline-block;
  margin-left: 0.5rem;
}

.form-delete-agent .btn {
  vertical-align: middle;
}

/* Quotas dashboard */
.quotas-block {
  padding: 1rem;
  margin-bottom: 1.5rem;
  background: var(--color-secondary);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-primary);
}

.quotas-title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.quotas-line {
  margin: 0.25rem 0;
  font-size: 0.875rem;
}

.quotas-alert {
  margin: 0.75rem 0 0;
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #856404;
  background: #fff3cd;
  border-radius: var(--radius);
}

.quotas-alert-atteint {
  color: var(--color-error);
  background: #f8d7da;
}

.quotas-premium {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
}

.quotas-premium a {
  color: var(--color-primary);
  text-decoration: none;
}

.quotas-premium a:hover,
.quotas-premium a:focus,
.quotas-premium a:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.agent-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-secondary);
  font-size: 0.875rem;
}

.agent-footer a {
  color: var(--color-primary);
  text-decoration: none;
}

.agent-footer a:hover,
.agent-footer a:focus,
.agent-footer a:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.empty-state {
  color: var(--color-text-muted);
  padding: 2rem 0;
  text-align: center;
}

/* Liste signalements : layout sidebar (laptop+) / bloc dessous (mobile) */
.signalement-list-layout {
  display: block;
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .signalement-list-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
  }
}

.signalement-sidebar {
  background: var(--color-secondary);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .signalement-sidebar {
    width: 16rem;
    min-width: 16rem;
    position: sticky;
    top: 1rem;
    margin-bottom: 0;
  }
}

@media (min-width: 1440px) {
  .signalement-sidebar {
    width: 18rem;
    min-width: 18rem;
  }
}

.signalement-main {
  flex: 1;
  min-width: 0;
}

.signalement-main h2 {
  margin-top: 0;
}

/* Stats dans la sidebar */
.signalement-sidebar .stats-signalements {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.signalement-sidebar .stats-item {
  display: block;
}

/* Groupes de filtres */
.filters-group {
  margin-bottom: 1.25rem;
}

.filters-group:last-of-type {
  margin-bottom: 1rem;
}

.filters-group-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 0.5rem;
}

.filters-fields {
  display: grid;
  gap: 0.75rem;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.filter-field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.filters-form .form-select,
.filters-form .form-input {
  width: 100%;
  max-width: 100%;
}

.filters-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

@media (max-width: 1023px) {
  .filters-form--inline .filters-fields--inline {
    flex-direction: column;
    align-items: stretch;
  }

  .filters-form--inline .filters-fields--inline .filter-field {
    min-width: 100%;
  }

  .filters-actions {
    gap: 1.25rem;
  }

  .bulk-actions {
    gap: 1.25rem;
  }

  .pagination {
    gap: 1.25rem;
  }
}

.filters-actions--purge {
  margin-top: 1rem;
}

/* Mobile/tablette : filtres et tri les uns sous les autres (une colonne) */
@media (max-width: 1023px) {
  .signalement-sidebar .filters-fields {
    grid-template-columns: 1fr;
  }

  .filters-group-title {
    margin-top: 0.75rem;
  }

  .filters-group:first-of-type .filters-group-title {
    margin-top: 0;
  }
}

/* Liste signalements : stats (fallback si utilisé ailleurs) et ancien filtre en ligne */
.stats-signalements {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.filters-form {
  margin-bottom: 1rem;
}

.filters-form--inline .filters-fields--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.filters-form--inline .filters-fields--inline .filter-field {
  flex: 0 1 auto;
  min-width: 10rem;
}

@media (max-width: 1023px) {
  .filters-form--inline .filters-fields--inline {
    align-items: stretch;
    justify-content: flex-start;
  }
}

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

.bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.bulk-actions__hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.table-signalements .col-select {
  width: 2.5rem;
  text-align: center;
}

.filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.filters-row label {
  font-size: 0.875rem;
  font-weight: 600;
}

.form-select,
.form-input {
  min-height: var(--touch-min);
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid #4D4D4D;
  border-radius: var(--radius);
  box-sizing: border-box;
}

.form-select:focus,
.form-select:focus-visible,
.form-input:focus,
.form-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.pagination-info {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Détail signalement (dl dt/dd) */
.detail-signalement {
  margin: 1rem 0;
}

.detail-signalement dt {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
}

.detail-signalement dd {
  margin: 0;
}

/* Laptop et au-dessus : dt et dd côte à côte (style tableau 2 colonnes) */
@media (min-width: 1024px) {
  .detail-signalement {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.5rem;
    row-gap: 0.25rem;
    align-items: baseline;
  }

  .detail-signalement dt {
    margin-top: 0.5rem;
    margin-bottom: 0;
  }

  .detail-signalement dt:first-of-type {
    margin-top: 0;
  }

  .detail-signalement dd {
    margin-top: 0.5rem;
    margin-bottom: 0;
  }

  .detail-signalement dd:first-of-type {
    margin-top: 0;
  }
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--radius);
  background: var(--color-secondary);
  color: var(--color-text);
}

.badge-en_attente { background: #fff3cd; color: #856404; }
.badge-en_cours { background: #cce5ff; color: #004085; }
.badge-resolu { background: #d4edda; color: #155724; }
.badge-error { background: var(--color-error); color: #fff; }
.badge-success { background: #28A745; color: #fff; }
.badge-warning { background: #ffc107; color: #1a1a1a; }

.actions-signalement {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}

.action-block {
  padding: 1rem;
  background: var(--color-secondary);
  border-radius: var(--radius);
  min-width: 16rem;
}

.action-block h3 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}

.action-block .btn {
  margin-top: 0.5rem;
}

/* Bloc unique statut + assignation (détail signalement agent) */
.form-modification-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 1rem;
}

.form-modification-fields .form-group {
  margin-bottom: 0;
  min-width: 12rem;
}

.action-hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0.5rem 0 0;
}

/* Cellule Actions tableau : espace entre boutons / liens */
.cell-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.form-inline {
  display: inline;
}

.action-block select {
  min-height: var(--touch-min);
  padding: 0.5rem;
  font-size: 1rem;
  width: 100%;
  max-width: 20rem;
  border-radius: var(--radius);
  border: 1px solid #4D4D4D;
}

.list-photos {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.list-photos li img {
  border-radius: var(--radius);
  object-fit: cover;
}

/* Admin : détail signalement (UX/UI) */
.page-admin--signalement-detail {
  max-width: 50rem;
}

.admin-detail-nav {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.admin-detail-nav a {
  color: var(--color-primary);
  text-decoration: none;
}

.admin-detail-nav a:hover,
.admin-detail-nav a:focus,
.admin-detail-nav a:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.admin-detail-nav__sep {
  margin: 0 0.35rem;
}

.admin-detail-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-secondary);
}

.admin-detail-header h2 {
  margin: 0 0 0.35rem;
}

.admin-detail-header__meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.admin-detail-header__meta a {
  color: var(--color-primary);
  text-decoration: none;
}

.admin-detail-header__meta a:hover,
.admin-detail-header__meta a:focus,
.admin-detail-header__meta a:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.admin-detail-section {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--color-secondary);
  border-radius: var(--radius);
}

.admin-detail-section__title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.admin-detail-section__subtitle {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.detail-signalement__description {
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-signalement--inline dt {
  display: inline;
  font-weight: 700;
}

.detail-signalement--inline dt::after {
  content: " ";
}

.detail-signalement--inline dd {
  display: inline;
  margin-left: 0;
}

.detail-signalement--inline dd::after {
  content: "\A";
  white-space: pre;
}

.list-photos--admin {
  margin: 0 0 1rem;
}

.list-photos__item {
  margin: 0;
}

.list-photos__link {
  display: inline-block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid transparent;
}

.list-photos__link:hover,
.list-photos__link:focus,
.list-photos__link:focus-visible {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.list-photos__link img {
  display: block;
  width: 200px;
  height: 150px;
  object-fit: cover;
  background: var(--color-bg-muted, #f2f2f2);
}

.list-photos--admin .list-photos__link {
  min-width: 200px;
  min-height: 150px;
}
.list-photos--admin .list-photos__link img {
  width: 200px;
  height: 150px;
}

.list-photos__label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 0.25rem 0;
}

.form-statut-inline__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

/* Label « Nouveau statut » proche du select (éviter grand espace) */
.form-statut-inline__fields > div:first-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.form-statut-inline__fields > div:first-child label {
  margin-bottom: 0;
}

.form-statut-inline__fields select {
  min-height: var(--touch-min);
  padding: 0.5rem;
  font-size: 1rem;
  min-width: 12rem;
  border-radius: var(--radius);
  border: 1px solid #4D4D4D;
}

/* Bloc d’actions en bas de page (ex. détail commune) */
.page-admin__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (max-width: 1023px) {
  .page-admin__actions {
    gap: 1.25rem;
  }
}

.admin-detail-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.admin-detail-footer__delete {
  margin-left: auto;
}

@media (max-width: 1023px) {
  .admin-detail-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }

  .admin-detail-footer__delete {
    margin-left: 0;
  }
}

/* Parcours citoyen (Phase 7) */
.citoyen-page {
  max-width: 36rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.citoyen-header {
  margin-bottom: 1.5rem;
}

.citoyen-header .intro {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0.5rem 0 0;
}

.form-commune-choice {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--color-secondary);
  border-radius: var(--radius);
}

.form-commune-choice label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.form-commune-choice .form-select {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.form-signalement .form-group {
  margin-bottom: 1rem;
}

.form-signalement .form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.form-signalement .form-group input[type="text"],
.form-signalement .form-group textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Erreurs de validation formulaire citoyen : visibles (couleur erreur charte) */
.form-signalement .invalid-feedback,
.form-signalement ul.form-error-list,
.form-signalement .form-error-message,
.form-signalement .form-errors,
.form-signalement ul[id$="_errors"] {
  font-size: 0.875rem;
  color: var(--color-error);
  margin-top: 0.25rem;
  font-weight: 600;
}

.form-signalement ul.form-error-list,
.form-signalement .form-errors,
.form-signalement ul[id$="_errors"] {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
}

.form-signalement .form-errors li,
.form-signalement ul[id$="_errors"] li {
  color: var(--color-error);
}

.form-group-geoloc .hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0.25rem 0 0.5rem;
}

.form-group-geoloc {
  overflow: visible;
}

.map-citoyen {
  height: 280px;
  min-height: 280px;
  width: 100%;
  margin: 0.5rem 0;
  border-radius: var(--radius);
  border: 1px solid #4D4D4D;
  display: block;
  box-sizing: border-box;
  background: #e8e8e8;
}

.map-citoyen.leaflet-container,
#map.leaflet-container {
  height: 280px;
  min-height: 280px;
  z-index: 0;
  font: inherit;
}

#map.leaflet-container .leaflet-map-pane,
#map.leaflet-container .leaflet-tile-pane {
  height: 100%;
}

.form-group-geoloc .btn-secondary {
  margin-top: 0.5rem;
}

.form-hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

/* Page Personnalisation (10B) – UX/UI et responsive */
.page-personnalisation {
  margin-top: 1rem;
  padding-bottom: 2rem;
  max-width: 40rem;
}

.page-personnalisation__header {
  margin-bottom: 1.5rem;
}

.page-personnalisation__title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  color: var(--color-primary);
  line-height: 1.3;
}

.page-personnalisation__intro {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.form-personnalisation__section {
  background: var(--color-secondary);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--color-primary);
}

.form-personnalisation__section-title {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}

.form-personnalisation__hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.form-personnalisation__color-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-personnalisation__color-fields .form-group {
  margin-bottom: 0;
}

.form-personnalisation__color-fields .form-group input[type="color"] {
  width: 100%;
  max-width: 8rem;
  min-height: 2.75rem;
  padding: 0.25rem;
  cursor: pointer;
  background: #fff;
}

/* Lexique des couleurs (sous les champs) */
.form-personnalisation__lexique-title {
  margin: 1.25rem 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.form-personnalisation__lexique {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-personnalisation__lexique-term {
  font-weight: 600;
  color: var(--color-text);
  margin: 0.75rem 0 0.25rem;
}

.form-personnalisation__lexique-term:first-child {
  margin-top: 0;
}

.form-personnalisation__lexique-def {
  margin: 0;
  color: var(--color-text-muted);
}

.form-personnalisation__logo-current {
  margin-bottom: 1rem;
}

.form-personnalisation__logo-preview-wrap {
  display: inline-block;
  padding: 0.75rem;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--color-secondary);
  margin: 0.5rem 0 0.75rem;
}

.form-personnalisation__logo-preview {
  display: block;
  max-height: 4rem;
  width: auto;
  object-fit: contain;
}

.form-personnalisation__favicon-current {
  margin-bottom: 1rem;
}

.form-personnalisation__favicon-preview-wrap {
  display: inline-block;
  padding: 0.5rem;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--color-secondary);
  margin: 0.5rem 0 0.75rem;
}

.form-personnalisation__favicon-preview {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.form-personnalisation__favicon-upload {
  margin-top: 0.75rem;
}

.form-personnalisation__logo-upload {
  margin-top: 0.75rem;
}

.form-personnalisation .form-group input[type="file"] {
  width: 100%;
  max-width: 24rem;
  box-sizing: border-box;
  cursor: pointer;
}

.personnalisation-qrcode__preview {
  margin-top: 1rem;
}

.personnalisation-qrcode__img {
  display: block;
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius);
}

.personnalisation-qrcode__actions {
  margin: 1rem 0 0;
}

.form-personnalisation .form-actions {
  margin-top: 1.5rem;
  padding-top: 0.5rem;
}

.form-personnalisation .form-actions .btn {
  min-height: var(--touch-min);
  min-width: 10rem;
}

.form-personnalisation .invalid-feedback,
.form-personnalisation ul[id$="_errors"],
.form-personnalisation .form-error-message {
  font-size: 0.875rem;
  color: var(--color-error);
  margin-top: 0.25rem;
}

.form-personnalisation ul[id$="_errors"] {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
}

@media (min-width: 1024px) {
  .page-personnalisation {
    max-width: 44rem;
    margin-top: 1.25rem;
  }

  .page-personnalisation__title {
    font-size: 2rem;
  }

  .form-personnalisation__section {
    padding: 1.5rem 1.25rem;
    margin-bottom: 1.75rem;
  }

  .form-personnalisation__color-fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
  }

  .form-personnalisation__color-fields .form-group input[type="color"] {
    max-width: none;
  }

  .form-personnalisation__logo-preview-wrap {
    padding: 1rem;
  }

  .form-personnalisation__logo-preview {
    max-height: 5rem;
  }
}

@media (min-width: 1440px) {
  .page-personnalisation {
    max-width: 48rem;
  }
}

.categories-offline-hint.categories-offline-error {
  color: var(--color-error);
}

.links-footer {
  margin-top: 2rem;
  font-size: 0.875rem;
}

.links-footer a {
  color: var(--color-primary);
  text-decoration: none;
}

.links-footer a:hover,
.links-footer a:focus,
.links-footer a:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.confirmation-block {
  padding: 1.5rem;
  background: var(--color-secondary);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--color-success);
}

.confirmation-token-label {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.confirmation-token {
  font-family: ui-monospace, monospace;
  font-size: 1rem;
  word-break: break-all;
  margin: 0.5rem 0 1rem;
}

.confirmation-advice {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.form-suivi {
  margin-bottom: 1.5rem;
}

.form-suivi .form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.form-suivi .form-input {
  width: 100%;
  max-width: 24rem;
  box-sizing: border-box;
}

.suivi-result {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--color-secondary);
  border-radius: var(--radius);
}

.suivi-unknown {
  margin-top: 1rem;
  padding: 1rem;
  color: var(--color-error);
  font-weight: 600;
}

/* ----- Footer global (pages légales, accueil, login) ----- */
.site-footer {
  flex-shrink: 0;
  margin-top: 3rem;
  padding: 1.5rem 1rem;
  background: var(--color-secondary);
  border-top: 1px solid #e0e0e0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.site-footer-nav a,
.site-footer-copy a {
  color: var(--color-primary);
  text-decoration: none;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
}

.site-footer-nav a:hover,
.site-footer-nav a:focus,
.site-footer-nav a:focus-visible,
.site-footer-copy a:hover,
.site-footer-copy a:focus,
.site-footer-copy a:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.site-footer-copy {
  text-align: center;
  margin: 0;
  font-size: 0.8125rem;
}

@media (min-width: 1024px) {
  .site-footer {
    padding: 1.5rem 2rem;
    margin-top: 0;
  }
}

/* ----- Pages légales (mentions, confidentialité, cookies, CGU) ----- */
.legal-page {
  padding-bottom: 2rem;
}

.legal-page-header {
  margin-bottom: 1.5rem;
}

.legal-page-back {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-primary);
  text-decoration: none;
  min-height: var(--touch-min);
  line-height: var(--touch-min);
}

.legal-page-back:hover,
.legal-page-back:focus,
.legal-page-back:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.legal-page-title {
  font-size: 2rem;
  margin: 0 0 1rem;
  color: var(--color-text);
}

.legal-page-main h2 {
  font-size: 1.25rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--color-text);
}

.legal-page-main h2:first-of-type {
  margin-top: 0;
}

.legal-intro {
  margin-bottom: 1.5rem;
  color: var(--color-text-muted);
}

.legal-section {
  margin-bottom: 1.5rem;
}

.legal-section ul {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

.legal-section li {
  margin-bottom: 0.5rem;
}

.legal-section ol,
.legal-list-steps {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

.pwa-install-native {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--color-secondary);
  border-radius: var(--radius);
}

.pwa-install-btn {
  margin-top: 0.5rem;
}

.legal-address {
  font-style: normal;
  margin: 0.5rem 0;
}

.legal-page-main a {
  color: var(--color-primary);
  text-decoration: none;
}

.legal-page-main a:hover,
.legal-page-main a:focus,
.legal-page-main a:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Boutons (liens .btn) : texte blanc sur fond primaire, pas d’underline */
.legal-page-main a.btn {
  color: #fff;
  text-decoration: none;
}

.legal-page-main a.btn:hover,
.legal-page-main a.btn:focus,
.legal-page-main a.btn:focus-visible {
  color: #fff;
  text-decoration: none;
}

/* ----- Bandeau cookies / vie privée (14B.7) ----- */
.bandeau-cookies {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-secondary, #F2F2F2);
  border-top: 2px solid var(--color-primary, #005EA5);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}

.bandeau-cookies[hidden] {
  display: none;
}

.bandeau-cookies__inner {
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.bandeau-cookies__text {
  flex: 1 1 20rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text, #1A1A1A);
}

.bandeau-cookies__text a {
  color: var(--color-primary, #005EA5);
  text-decoration: underline;
}

.bandeau-cookies__text a:hover,
.bandeau-cookies__text a:focus,
.bandeau-cookies__text a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.bandeau-cookies__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.bandeau-cookies__btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1rem;
}

@media (min-width: 1024px) {
  .bandeau-cookies {
    padding: 1rem 2rem;
  }
}