/* =====================================================================
   Plateforme Mairie - Styles personnalisés
   Surcharge Bootstrap 5 avec l'identité visuelle "mairie"
   ===================================================================== */

:root {
  /* v2.9.6 — Palette officielle de la commune d'Ancy-Dornot
     Source : identité visuelle municipale (deux couleurs uniquement).
     Avant : bleu profond #1e3a5f + doré #d4a017.
     Apres : bleu fonce officiel #312783 + bleu clair officiel #63b9e9. */
  --mairie-primary:    #312783;   /* bleu fonce officiel (institutionnel) */
  --mairie-primary-2:  #63b9e9;   /* bleu clair officiel (mise en lumiere) */
  --mairie-accent:     #63b9e9;   /* bleu clair officiel utilise comme accent CTA */
  --mairie-accent-2:   #82c8ed;   /* version legerement plus claire pour hover */
  --mairie-bg:         #f8f9fb;   /* fond doux (inchange) */
  --mairie-surface:    #ffffff;
  --mairie-text:       #1a202c;
  --mairie-muted:      #6c757d;

  /* Statuts (avec versions claires pour les fonds) */
  --statut-attente:    #f59e0b;
  --statut-validee:    #16a34a;
  --statut-en-cours:   #2563eb;
  --statut-terminee:   #65a30d;
  --statut-refusee:    #dc2626;
  --statut-annulee:    #6b7280;

  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow:    0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
}

/* ----- Base ----- */
html, body {
  height: 100%;
}
body {
  background-color: var(--mairie-bg);
  color: var(--mairie-text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

main.main-container {
  flex: 1 0 auto;
  padding-top: 80px;
  padding-bottom: 3rem;
}

/* ----- Navbar ----- */
.navbar-mairie {
  background-color: var(--mairie-primary);
  box-shadow: var(--shadow-md);
}
.navbar-mairie .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
}
.navbar-mairie .navbar-brand .brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: var(--mairie-accent);
  color: var(--mairie-primary);
  border-radius: 8px;
  margin-right: 0.6rem;
  font-weight: 800;
}

/* Logo image (SVG/PNG) à la place du carré doré "M" */
.navbar-mairie .navbar-brand .brand-logo-img {
  height: 40px;
  width: auto;
  /* v2.53.1 : une image qui ne charge pas se dimensionne sinon sur son texte
     de remplacement -> large cadre blanc avec une icone cassee. */
  max-width: 150px;
  object-fit: contain;
  background: #fff;
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.navbar-mairie .nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
  position: relative;
}
.navbar-mairie .nav-link:hover,
.navbar-mairie .nav-link.active {
  color: #fff !important;
}
.navbar-mairie .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0.5rem; right: 0.5rem;
  height: 2px;
  background: var(--mairie-accent);
  border-radius: 2px;
}
.navbar-mairie .dropdown-menu {
  border: none;
  box-shadow: var(--shadow-lg);
  border-radius: 0.5rem;
}
.navbar-role-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: var(--mairie-accent);
  color: var(--mairie-primary);
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-left: 0.4rem;
}
.cart-badge {
  position: absolute;
  top: 6px; right: 0;
  background: var(--mairie-accent);
  color: var(--mairie-primary);
  font-weight: 700;
  font-size: 0.65rem;
  border-radius: 999px;
  padding: 1px 6px;
}

/* ----- Séparateur visuel entre groupe gauche et groupe droit ----- */
.nav-divider {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.2);
  margin: 0 0.6rem;
}

/* ----- Icônes seules (sans label) en mode desktop ----- */
.nav-icon-only {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.nav-icon-only i {
  font-size: 1.15rem;
}

/* ----- Bouton Gestion : mise en avant pour les agents/admins ----- */
.nav-gestion .nav-link {
  background: rgba(212, 160, 23, 0.12);
  border-radius: 6px;
  margin: 0 0.2rem;
}
.nav-gestion .nav-link:hover {
  background: rgba(212, 160, 23, 0.22);
}

/* ----- Badge tâches en attente sur "Gestion" ----- */
.nav-taches-badge {
  display: inline-block;
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  margin-left: 0.3rem;
  vertical-align: middle;
  animation: pulse-badge 2s ease-in-out infinite;
  box-shadow: 0 0 0 2px var(--mairie-primary);
}
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* ----- Méga-menu Gestion (3 colonnes) ----- */
.mega-menu {
  min-width: min(95vw, 800px);
  max-width: 95vw;
  max-height: 80vh;       /* ne dépasse jamais l'écran */
  overflow-x: hidden;
  overflow-y: auto;       /* scroll de sécurité si trop d'items */
  border: none;
  box-shadow: var(--shadow-lg);
  border-radius: 0.75rem;
}

/* Lien "Vue d'ensemble" en tête du méga-menu */
.mega-hub {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--mairie-primary), var(--mairie-primary-2));
  color: #fff !important;
  text-decoration: none;
  border-bottom: 3px solid var(--mairie-accent);
}
.mega-hub:hover {
  background: linear-gradient(135deg, var(--mairie-primary-2), var(--mairie-primary));
  color: #fff !important;
}
.mega-hub > i:first-child {
  font-size: 1.6rem;
  color: var(--mairie-accent);
}
.mega-hub .small {
  opacity: 0.85;
  font-size: 0.8rem;
}

/* Colonnes du méga-menu */
.mega-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 0;
  padding: 1rem;
  background: #fff;
}
.mega-col {
  padding: 0 0.5rem;
  border-right: 1px solid #e5e7eb;
}
.mega-col:last-child {
  border-right: none;
}
.mega-col-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--mairie-primary);
  margin-bottom: 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--mairie-accent);
}
.mega-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  color: #334155;
  text-decoration: none;
  font-size: 0.92rem;
  transition: background 0.12s;
}
.mega-item:hover {
  background: #f1f5f9;
  color: var(--mairie-primary);
}
.mega-item i {
  margin-right: 0.4rem;
  color: var(--mairie-primary-2);
}
.mega-sep {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mairie-muted);
  margin: 0.75rem 0.5rem 0.3rem;
  padding-top: 0.4rem;
  border-top: 1px dashed #e5e7eb;
}

/* Mobile : empile les colonnes */
@media (max-width: 991px) {
  .mega-menu {
    min-width: 100%;
    max-width: 100%;
  }
  .mega-cols {
    grid-template-columns: 1fr;
  }
  .mega-col {
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.8rem;
    margin-bottom: 0.5rem;
  }
  .mega-col:last-child {
    border-bottom: none;
  }
}

/* ----- Avatar initiales ----- */
.avatar-initiales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}

/* ----- Cards / sections ----- */
.section-card {
  background: var(--mairie-surface);
  border-radius: 0.75rem;
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.section-card h1, .section-card h2, .section-card h3 {
  margin-top: 0;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}
.section-title .icon-bubble {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--mairie-primary), var(--mairie-primary-2));
  color: #fff;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.section-subtitle {
  color: var(--mairie-muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

/* ----- Boutons ----- */
.btn-mairie {
  background-color: var(--mairie-primary);
  border-color: var(--mairie-primary);
  color: #fff;
}
.btn-mairie:hover, .btn-mairie:focus {
  background-color: var(--mairie-primary-2);
  border-color: var(--mairie-primary-2);
  color: #fff;
}
.btn-accent {
  background-color: var(--mairie-accent);
  border-color: var(--mairie-accent);
  color: var(--mairie-primary);
  font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus {
  background-color: var(--mairie-accent-2);
  border-color: var(--mairie-accent-2);
  color: var(--mairie-primary);
}

/* ----- Badges statut ----- */
.badge-statut {
  font-size: 0.75rem;
  padding: 0.4em 0.7em;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.statut-en_attente { background: #fef3c7; color: #92400e; }
.statut-validee    { background: #d1fae5; color: #065f46; }
.statut-en_cours   { background: #dbeafe; color: #1e40af; }
.statut-terminee   { background: #ecfccb; color: #3f6212; }
.statut-refusee    { background: #fee2e2; color: #991b1b; }
.statut-annulee    { background: #e5e7eb; color: #374151; }

/* ----- Badges nature (v2.58.0) -----
   Salle / Matériel / Salle + matériel. Même forme que les badges de statut,
   mais une palette distincte : les deux se lisent côte à côte sans se
   confondre. Le mixte porte les deux icônes, c'est ce qui le distingue de
   « salle » sans avoir à lire le libellé. */
.badge-nature {
  font-size: 0.75rem;
  padding: 0.4em 0.7em;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.badge-nature .bi + .bi { margin-left: 2px; }
.nature-salle    { background: #dbeafe; color: #1e40af; }
.nature-materiel { background: #d1fae5; color: #065f46; }
.nature-mixte    { background: #ede9fe; color: #312783; }
.nature-vide     { background: #e5e7eb; color: #374151; }

/* Pastilles du filtre par nature : volontairement plus discrètes que la
   rangée de statut au-dessus, c'est un axe secondaire. */
.nav-pills-nature .nav-link {
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
  border-radius: 999px;
  color: #475569;
}
.nav-pills-nature .nav-link:hover  { background: #f1f5f9; }
.nav-pills-nature .nav-link.active { background: var(--mairie-primary); color: #fff; }
.pill-compteur {
  display: inline-block;
  margin-left: 0.35rem;
  min-width: 1.5em;
  padding: 0 0.4em;
  border-radius: 999px;
  background: rgba(0, 0, 0, .08);
  font-size: 0.75em;
  font-weight: 700;
  text-align: center;
}
.nav-pills-nature .nav-link.active .pill-compteur { background: rgba(255, 255, 255, .25); }

/* ----- Recherche de compte (v2.60.0) -----
   ATTENTION : la liste de resultats est en position:absolute. Ne pas la
   poser dans un conteneur a overflow contraint (.modal-dialog-scrollable
   met overflow-y:auto sur .modal-body) — elle y serait rognee, comme
   l'etait le menu des lignes materiel avant la v2.59.0. */
.rc-compte, .rc-saisie { position: relative; }
.rc-resultats {
  position: absolute;
  z-index: 1060;              /* au-dessus du contenu voisin dans une modale */
  width: 100%;
  max-height: 16rem;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.rc-resultat { cursor: pointer; }
.rc-resultat.active,
.rc-resultat:hover { background: #f4f3fb; }
.rc-choisi {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #f4f3fb;
  border: 1px solid var(--mairie-primary);
  color: var(--mairie-primary);
  border-radius: 999px;
  padding: .35rem .55rem .35rem .85rem;
  font-weight: 600;
}
.rc-choisi .btn-close { font-size: .6rem; padding: .35rem; }

/* ----- Liste des participants (v2.60.0) ----- */
.part-liste { display: flex; flex-direction: column; gap: .45rem; }
.part-ligne {
  display: flex; align-items: center; gap: .65rem;
  border: 1px solid #e2e8f0; border-radius: 10px;
  padding: .5rem .75rem; background: #fff;
}
.part-ico {
  width: 2rem; height: 2rem; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #f4f3fb; color: var(--mairie-primary);
}
.part-corps { flex: 1 1 auto; min-width: 0; }
.part-nom { font-weight: 600; line-height: 1.25; }
.part-detail { font-size: .8rem; color: #64748b; }
.part-badge {
  font-size: .72rem; padding: .15rem .55rem; border-radius: 999px;
  border: 1px solid #e2e8f0; color: #475569; background: #f8fafc; white-space: nowrap;
}
.part-badge-libre { background: #fff8e6; border-color: #ffe0a3; color: #b45309; }

/* ----- Accès réservé à une salle / un matériel (v2.75.0) -----
   Le cadenas : ambre pour « réservé, et pas à vous » (ou vue agent), vert
   quand le lecteur fait partie des ayants droit. */
.badge-acces {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; font-weight: 600; line-height: 1.3;
  padding: .2rem .6rem; border-radius: 999px;
  background: #fff8e6; border: 1px solid #ffe0a3; color: #b45309;
}
.badge-acces-ok { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
/* v2.78.1 : admin « connecté en tant que » un usager qui, lui, n'y a pas droit */
.acces-note-usurpation { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.35; color: #b45309; }
/* v2.78.5 : compte agent/admin — « pas sur la liste, mais autorisé à passer outre » */
.acces-note-gestionnaire { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.35; color: #475569; }
/* Ressource que le lecteur ne peut pas réserver : visible, mais en retrait */
.card-catalogue.acces-ferme .card-img-top,
.card-catalogue.acces-ferme .placeholder-img { filter: grayscale(.7); opacity: .7; }
/* Bandeau d'état du bloc « Qui peut réserver » (inc/ui/acces_ressource.php) */
.acces-etat {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  border: 1px solid #e2e8f0; border-radius: 10px;
  padding: .7rem .9rem; background: #f8fafc;
}
.acces-etat > .bi { font-size: 1.3rem; color: var(--mairie-primary); }
.acces-etat > .flex-grow-1 { flex-basis: 16rem; }
.acces-etat-reserve { background: #fff8e6; border-color: #ffe0a3; }
.acces-etat-reserve > .bi { color: #b45309; }

/* ----- Panneau « indisponible » sur une carte du catalogue (v2.76.0) -----
   Posé sur la photo (une .card Bootstrap est déjà position: relative).
   Rouge : blocage en cours. Ambre : blocage annoncé, pas encore commencé. */
.panneau-indispo {
  position: absolute; top: .65rem; left: .65rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  background: #b91c1c; color: #fff;
  font-size: .78rem; font-weight: 700; line-height: 1.3;
  padding: .3rem .65rem; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.panneau-indispo-avenir { background: #b45309; }

/* ----- Fiches d'organisation repliables (admin/organisations.php, v2.79.2) -----
   Un <details> habillé en .section-card : l'en-tête est le <summary>, le
   chevron se retourne quand la fiche est ouverte. */
.orga-carte > summary { list-style: none; cursor: pointer; }
.orga-carte > summary::-webkit-details-marker { display: none; }
.orga-carte > summary:focus-visible { outline: 2px solid var(--mairie-accent); outline-offset: 4px; border-radius: 6px; }
.orga-chevron { color: var(--mairie-muted); transition: transform .15s ease; }
.orga-carte[open] > summary .orga-chevron { transform: rotate(180deg); }

/* ----- Cards catalogue ----- */
.card-catalogue {
  border: none;
  box-shadow: var(--shadow);
  border-radius: 0.75rem;
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.card-catalogue:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.card-catalogue .card-img-top {
  height: 180px;
  object-fit: cover;
  background: #e2e8f0;
}
.card-catalogue .placeholder-img {
  height: 180px;
  background: linear-gradient(135deg, var(--mairie-primary), var(--mairie-primary-2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 3rem;
}

/* ----- Footer ----- */
footer.footer {
  flex-shrink: 0;
  background-color: var(--mairie-primary);
  color: rgba(255,255,255,0.8);
  padding: 1.5rem 0;
  margin-top: 3rem;
  text-align: center;
  font-size: 0.9rem;
}
footer.footer a { color: var(--mairie-accent); }
.footer-feedback {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  padding: 0.25rem 0.85rem;
  border: 1px solid var(--mairie-accent);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.footer-feedback:hover {
  background: var(--mairie-accent);
  color: var(--mairie-primary) !important;
}
footer.footer .badge {
  vertical-align: middle;
  animation: pulse-beta 2s ease-in-out infinite;
}
@keyframes pulse-beta {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* ----- Timeline historique (qui a fait quoi) ----- */
.timeline-historique { margin: 0.5rem 0 0; }
.timeline-historique li {
  display: flex;
  gap: 0.7rem;
  padding-bottom: 0.85rem;
  position: relative;
}
.timeline-historique li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px; top: 28px; bottom: 0;
  width: 2px;
  background: #e5e7eb;
}
.timeline-historique .hist-icon {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--mairie-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  z-index: 1;
}
.timeline-historique .hist-corps { padding-top: 3px; }

/* ----- Toasts ----- */
.toast-container-fixed {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1080;
}

/* ----- Cartes-choix visibilité (v2.26.0) ----- */
.vis-card {
  display: block;
  border: 2px solid #dee2e6;
  border-radius: 0.75rem;
  padding: 1rem;
  cursor: pointer;
  height: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.vis-card:hover { border-color: var(--mairie-accent); }
.btn-check:checked + .vis-card {
  border-color: var(--mairie-primary);
  background: #f4f3fb;
  box-shadow: 0 0 0 0.15rem rgba(49, 39, 131, 0.12);
}
.btn-check:focus-visible + .vis-card { outline: 2px solid var(--mairie-accent); }
.vis-card-head { font-size: 1.05rem; }
.vis-card-sub { color: var(--mairie-muted); margin: .3rem 0 .5rem; font-size: .9rem; }
.vis-card-list { margin: 0; padding-left: 1.1rem; font-size: .85rem; }
.vis-card-list li { margin-bottom: .25rem; }

/* ----- Champ periode « du ... au ... » (v2.44.0) ----- */
.periode-fleche {
  align-items: center;
  padding-bottom: .5rem;
  color: var(--mairie-muted);
}
.periode-chip {
  background: #f4f3fb;
  color: var(--mairie-primary);
  border: 1px solid rgba(49, 39, 131, .18);
  font-weight: 600;
}
.periode-resume { min-height: 1.6rem; }
.periode-segment .btn { padding-left: 1rem; padding-right: 1rem; }
.periode-heure:disabled { background-color: #f1f3f5; color: var(--mairie-muted); }

/* ----- Liste de materiel (fiche resa v2.50.0 ; liste de gestion v2.52.0) ----- */
/* overflow:hidden donne les coins arrondis a la liste — mais il ROGNE tout
   panneau flottant ouvert depuis une ligne (menu deroulant). Ne jamais en
   remettre un ici : les actions d'une ligne doivent rester des boutons. */
.mat-liste { border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; background:#fff; }
.mat-ligne { display:flex; align-items:flex-start; gap:.85rem; padding:.8rem 1rem; border-top:1px solid #eef2f7;
             flex-wrap:wrap; }
.mat-ligne:first-child { border-top:0; }
.mat-ico { width:2.2rem; height:2.2rem; border-radius:9px; background:#f4f3fb; color:var(--mairie-primary);
           display:flex; align-items:center; justify-content:center; flex:none; }
.mat-corps { flex:1 1 auto; min-width:0; }
.mat-nom { font-weight:600; line-height:1.25; }
.mat-puces { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.35rem; }
.mat-puce { display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; padding:.1rem .55rem;
            border-radius:999px; border:1px solid #e2e8f0; color:#475569; background:#fff; text-decoration:none; }
.mat-puce code { background:transparent; padding:0; color:#be185d; }
.mat-puce-int { background:#f8fafc; }
a.mat-puce:hover { border-color:var(--mairie-accent); color:var(--mairie-primary); }
.mat-puce-alerte { background:#fdecea; border-color:#f5c2c7; color:#b02a37; }
.mat-puce-constat { background:#fff8e6; border-color:#ffe0a3; color:#b45309; }
/* v2.66.0 : evenement retire de l'agenda de la commune -> gris barre, pour se
   distinguer des puces qui signalent une presence (Publique, Constat...). */
.mat-puce-agenda-masque { background:#f1f3f5; border-color:#dee2e6; color:#6c757d; }
.mat-qte { flex:none; font-weight:600; white-space:nowrap; padding-top:.1rem; }
/* Actions de ligne (v2.59.0) : min-width sur le corps pour qu'elles passent
   a la ligne sur mobile au lieu d'ecraser le nom de l'article. */
.mat-actions { display:flex; gap:.35rem; flex:none; align-items:center; }
@media (max-width: 575.98px) {
  .mat-corps  { min-width:8rem; }
  .mat-actions { width:100%; justify-content:flex-end; margin-top:.15rem; }
}

/* Variante compacte : liste de gestion (une ligne par article, sans vignette) */
.mat-compact { display:flex; flex-direction:column; gap:.3rem; }
.mat-compact .mat-c-ligne { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; font-size:.9rem; }
.mat-compact .mat-c-nom { font-weight:600; }
.mat-compact .mat-c-qte { color:#475569; }

@media print {
  .mat-liste { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .mat-ligne { break-inside:avoid; }
}

/* ----- Cartes-choix a cocher (options de validation, v2.55.0) -----
   Pendant de .vis-card, mais pour des cases a cocher independantes. */
.opt-card {
  display: block;
  border: 2px solid #dee2e6;
  border-radius: .75rem;
  padding: .85rem 1rem;
  height: 100%;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.opt-card:hover { border-color: var(--mairie-accent); }
.opt-card:has(input:checked) {
  border-color: var(--mairie-primary);
  background: #f4f3fb;
}
.opt-card:has(input:focus-visible) { outline: 2px solid var(--mairie-accent); }
.opt-card-titre { font-size: 1.02rem; font-weight: 600; }
.opt-card-sub { color: var(--mairie-muted); font-size: .875rem; margin: .4rem 0 0; }
.opt-card-sub em { color: #b45309; font-style: normal; font-weight: 600; }

/* ----- Empty states ----- */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--mairie-muted);
}
.empty-state i {
  font-size: 3rem;
  opacity: 0.4;
  margin-bottom: 1rem;
}

/* ----- Bloc info "salle/matériel" sur les détails ----- */
.info-block {
  background: #f1f5f9;
  border-left: 4px solid var(--mairie-primary);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* ----- Pills de compteurs (toutes_reservations) ----- */
.compteur-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: var(--mairie-text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: transform .1s, box-shadow .1s;
}
.compteur-pill:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  color: var(--mairie-primary);
}
.compteur-pill.active {
  outline: 2px solid var(--mairie-primary);
  font-weight: 600;
}
.compteur-pill .compteur-nb {
  font-weight: 700;
  font-size: 1.05rem;
}
/* couleurs reprenant les statuts */
.compteur-pill.statut-en_attente { background:#fef3c7; }
.compteur-pill.statut-validee    { background:#d1fae5; }
.compteur-pill.statut-en_cours   { background:#dbeafe; }
.compteur-pill.statut-terminee   { background:#ecfccb; }
.compteur-pill.statut-refusee    { background:#fee2e2; }
.compteur-pill.statut-annulee    { background:#e5e7eb; }
.compteur-pill.compteur-alerte   { background:#fff7ed; border-color:#f59e0b; color:#b45309; }
.compteur-pill.compteur-alerte.active { outline-color:#f59e0b; }

/* ----- Fil de commentaires (chat) ----- */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background: #f8f9fb;
  border-radius: 10px;
  max-height: 600px;
  overflow-y: auto;
}
.chat-message {
  display: flex;
  gap: 0.6rem;
  max-width: 85%;
}
.chat-message.chat-left {
  align-self: flex-start;
}
.chat-message.chat-right {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.chat-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.chat-message.chat-right .chat-content {
  align-items: flex-end;
}
.chat-meta {
  font-size: 0.82rem;
}
.chat-bubble {
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}
.chat-bubble-user {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-top-left-radius: 4px;
}
.chat-bubble-mairie {
  background: var(--mairie-primary);
  color: #fff;
  border-top-right-radius: 4px;
}

/* ----- Calendar/planning ----- */
.fc .fc-button-primary {
  background-color: var(--mairie-primary) !important;
  border-color: var(--mairie-primary) !important;
}
.fc .fc-button-primary:hover {
  background-color: var(--mairie-primary-2) !important;
}
/* Rendu custom des events : motif en gras + nom en dessous */
.fc-ev-time { font-size: 0.7rem; opacity: 0.9; }
.fc-ev-motif { font-weight: 700; font-size: 0.78rem; line-height: 1.15; white-space: normal; }
.fc-ev-nom { font-size: 0.72rem; opacity: 0.92; line-height: 1.1; white-space: normal; }
/* v2.9.2 : ligne "salle" dans la card de l'event en vue "Toutes les salles" */
.fc-ev-salle {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.95;
  line-height: 1.15;
  white-space: normal;
  margin-top: 1px;
}
.fc-ev-salle .bi { font-size: 0.85em; opacity: 0.85; }

/* ----- v2.80.0 : planning des salles — la couleur dit la salle, la FORME dit le statut -----
   Les couleurs d'un créneau (fond, bord, texte) sont calculées par
   planning_bloc() (inc/core/fonctions.php) et posées en style sur l'élément :
   ici, on ne règle que la forme. Elle ne dépend d'aucune couleur — elle se lit
   donc en noir et blanc, à l'impression comme par un daltonien.
     en attente  hachures + bord en tirets   (pas encore acquis)
     validée     plein
     en cours    plein + pastille qui pulse
     terminée    pâle et uni                 (le fond pâle vient du serveur)
   Les mêmes classes habillent les blocs FullCalendar (plannings/salles.php),
   ceux rendus en PHP (.resa-bloc : vue globale, planning mensuel, légendes) et
   la pastille des journées entières. */
/* :not(.fc-list-event) — en vue liste, FullCalendar pose les classes de
   l'événement sur une LIGNE de tableau : pas de bloc à hachurer, le statut y
   est écrit en toutes lettres. */
.resa-st-en_attente:not(.fc-list-event) {
  border-style: dashed !important;
  border-width: 2px !important;
  /* Bandes blanches translucides : une sur deux éclaircit le fond, quelle que
     soit la couleur de la salle. */
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .5) 0 6px, rgba(255, 255, 255, 0) 6px 12px);
}

/* Bloc rendu en PHP */
.resa-bloc {
  position: relative; display: block;
  border: 1px solid transparent; border-radius: 5px;
  padding: .3em 1.7em .3em .5em;   /* à droite : la place de la pastille */
  margin-bottom: .3em;
  font-size: .8em; line-height: 1.25;
  text-decoration: none; overflow: hidden;
}
a.resa-bloc:hover { filter: brightness(.95); }
.resa-bloc small { opacity: .85; }

/* Pastille de statut, dans le coin haut droit du bloc. Fond blanc : l'icône
   garde la couleur de statut du reste de l'application (ambre, vert, bleu) et
   reste lisible sur n'importe quelle couleur de salle. */
.resa-ico {
  position: absolute; top: 2px; right: 2px; z-index: 1;
  width: 15px; height: 15px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
  font-size: 10px; line-height: 1;
}
.resa-ico .bi { display: block; line-height: 1; }
.resa-ico-en_attente { color: #b45309; }
.resa-ico-validee    { color: #15803d; }
.resa-ico-en_cours   { color: #1d4ed8; animation: resa-en-cours 1.8s ease-out infinite; }
.resa-ico-terminee,
.resa-ico-prive      { color: #64748b; }
@keyframes resa-en-cours {
  0%   { box-shadow: 0 0 0 1px rgba(15, 23, 42, .18), 0 0 0 0 rgba(255, 255, 255, .9); }
  70%  { box-shadow: 0 0 0 1px rgba(15, 23, 42, .18), 0 0 0 7px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 1px rgba(15, 23, 42, .18), 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .resa-ico-en_cours { animation: none; } }
/* La première ligne du bloc laisse la place de la pastille (le motif aussi
   quand l'heure est masquée : voir les container queries plus bas). */
.resa-ico + .fc-ev-time,
.resa-ico + .fc-ev-motif,
.resa-ico + .fc-journee-pastille-quand { padding-right: 16px; }
/* Vue liste : le statut est écrit en toutes lettres à côté du motif */
.statut-prive { background: #e5e7eb; color: #374151; }

/* Légende des statuts : un échantillon de chaque forme */
.resa-legende { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .82rem; color: #475569; }
.resa-legende-item { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.resa-bloc.resa-echantillon { flex: none; width: 34px; height: 21px; padding: 0; margin: 0; font-size: 1rem; }
.resa-echantillon .resa-ico { top: 50%; right: 50%; transform: translate(50%, -50%); }
/* Dans la légende, la pastille « en cours » ne pulse pas : son halo, plus
   large que l'échantillon, y dessinait une tache blanche. */
.resa-echantillon .resa-ico-en_cours { animation: none; }

/* Légende des salles : une pastille par salle, qui sert aussi de filtre */
.salle-puces { display: flex; flex-wrap: wrap; gap: .4rem; }
.salle-puce {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .75rem .25rem .55rem;
  border: 1px solid #e2e8f0; border-radius: 999px; background: #fff;
  color: #334155; font-size: .82rem; font-weight: 600; text-decoration: none;
  white-space: nowrap;
}
.salle-puce:hover { border-color: #94a3b8; color: #0f172a; }
/* v2.81.0 : la salle affichée est PLEINE, à sa couleur (--puce-c / --puce-t,
   posées par la page ; sans elles — « Toutes » — un fond sombre). Son carré
   de couleur passe à la couleur du texte : la largeur ne bouge pas. */
.salle-puce.active {
  background: var(--puce-c, #1e293b); border-color: var(--puce-c, #1e293b);
  color: var(--puce-t, #fff);
}
.salle-puce.active:hover { color: var(--puce-t, #fff); filter: brightness(.94); }
.salle-puce.active .salle-pastille { background: currentColor !important; opacity: .85; }
.salle-puce-cadenas { font-size: .78em; opacity: .7; }
/* Catalogue des salles : le même carré, discret, devant le nom de la salle
   (le lien avec le planning se fait tout seul). */
.salle-pastille.salle-pastille-carte { width: .6em; height: .6em; border-radius: 2px; margin-right: .45em; vertical-align: .08em; }

/* En-tête du planning des salles (v2.81.0) : deux lignes, « Salle » et
   « Statut », chacune derrière son intitulé. */
.planning-filtres { margin-top: 1.1rem; }
.planning-filtres-ligne { display: flex; align-items: flex-start; gap: .9rem; }
.planning-filtres-titre {
  flex: none; width: 3.4rem; padding-top: .45rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #64748b;
}
.planning-filtres-info { margin: .45rem 0 0 4.3rem; font-size: .82rem; color: #64748b; }
.planning-filtres-acces { margin-left: .6rem; color: #92400e; }
/* La légende : sous un filet, en retrait — on la consulte, on ne s'en sert pas */
.planning-filtres-legende { align-items: center; margin-top: .85rem; padding-top: .75rem; border-top: 1px solid #eef2f7; }
.planning-filtres-legende .planning-filtres-titre { padding-top: 0; }
.planning-filtres-legende .resa-legende { font-size: .78rem; gap: .3rem 1rem; }
.planning-filtres-legende .resa-bloc.resa-echantillon { width: 28px; height: 18px; }
@media (max-width: 575.98px) {
  /* Téléphone : intitulé au-dessus, et les salles sur UNE ligne qui se fait
     glisser — sept pastilles sur quatre lignes repoussaient le calendrier. */
  .planning-filtres-ligne { flex-direction: column; gap: .3rem; }
  .planning-filtres-legende { align-items: flex-start; }
  .planning-filtres-titre { width: auto; padding-top: 0; }
  .planning-filtres-info { margin-left: 0; }
  .planning-filtres .salle-puces {
    position: relative;   /* repère du script qui amène la salle affichée dans le champ */
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    width: 100%; padding-bottom: .1rem;
  }
  .planning-filtres .salle-puces::-webkit-scrollbar { display: none; }
  .planning-filtres .salle-puce { flex: none; }
}
.salle-pastille {
  display: inline-block; flex: none; width: .85rem; height: .85rem;
  border-radius: 3px; vertical-align: -.1em;
}

/* Accès rapide aux semaines, au-dessus d'un planning (inc/ui/semaines_rapides.php).
   Une bande qui défile horizontalement : les semaines, rangées sous leur mois. */
.semaines-rapides { display: flex; align-items: stretch; gap: .4rem; margin-bottom: .9rem; }
.sr-piste {
  position: relative;   /* repère des offsetLeft lus par le script */
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: .3rem;
  /* Pas de barre de défilement : les flèches, la molette horizontale ou le
     doigt font défiler la bande, et la barre doublait presque sa hauteur. */
  overflow-x: auto; scrollbar-width: none;
  padding: .2rem .1rem;
}
.sr-piste::-webkit-scrollbar { display: none; }
.sr-semaine, .sr-mois, .sr-fleche {
  flex: none; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
  font-size: .8rem; line-height: 1.2; white-space: nowrap; cursor: pointer;
}
.sr-semaine { padding: .3rem .6rem; font-weight: 600; color: #334155; }
.sr-semaine:hover, .sr-fleche:hover { border-color: #94a3b8; }
.sr-semaine.sr-passee { color: #94a3b8; }
/* Cette semaine : soulignée, qu'elle soit affichée ou non */
.sr-semaine.sr-aujourdhui { box-shadow: inset 0 -3px 0 var(--mairie-primary); color: #0f172a; }
/* La ou les semaines que le planning montre */
.sr-semaine.active { background: var(--mairie-primary); border-color: var(--mairie-primary); color: #fff; }
.sr-semaine.active.sr-aujourdhui { box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .65); }
/* Le mois : une étiquette (cliquable) devant sa première semaine */
.sr-mois {
  border-color: transparent; background: transparent;
  padding: .3rem .25rem .3rem .6rem; margin-left: .25rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b;
}
.sr-mois:first-child { margin-left: 0; padding-left: .2rem; }
.sr-mois:hover { color: #0f172a; text-decoration: underline; }
.sr-fleche { width: 2rem; color: #475569; }
.sr-semaine:focus-visible, .sr-mois:focus-visible, .sr-fleche:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.semaines-rapides .sr-date { flex: none; width: auto; max-width: 9.5rem; border-radius: 8px; }
@media (max-width: 575.98px) {
  /* Au doigt la bande se fait glisser : les flèches rendent leur place. */
  .sr-fleche { display: none; }
  .semaines-rapides { flex-wrap: wrap; }
  .sr-piste { flex-basis: 100%; }
  .semaines-rapides .sr-date { max-width: none; flex: 1 1 auto; }
}

/* Blocages de créneaux, résumés SOUS le planning (inc/ui/blocages_planning.php).
   Volontairement discret : ce n'est pas le planning. */
.blocages-planning { padding-top: .9rem; padding-bottom: .9rem; }
.blocages-planning-titre {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem;
  font-size: .82rem; font-weight: 700; color: #475569; margin-bottom: .4rem;
}
.blocages-planning-liste { list-style: none; margin: 0; padding: 0; max-height: 11.5rem; overflow-y: auto; }
.blocages-planning-liste > li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem;
  padding: .3rem .55rem; border-left: 3px solid transparent; border-radius: 4px;
  font-size: .82rem; color: #64748b;
}
.blocages-planning-liste .bp-salle { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: #334155; }
.blocages-planning-liste .bp-motif { font-style: italic; }
/* Celui-ci touche la période affichée par le planning */
.blocages-planning-liste > li.bp-affiche { background: #fffbeb; border-left-color: #f59e0b; color: #78350f; }
.blocages-planning-liste > li.bp-affiche .bp-salle { color: #78350f; }
.blocages-planning-liste > li.bp-affiche .bp-periode { font-weight: 600; }

/* ----- v2.81.0 : navigation — « et maintenant ? », filtres retenus, réserver depuis le planning ----- */

/* « Et maintenant ? » : la suite proposée après une action (suite_proposer()).
   Dans la page et non en toast : elle reste tant qu'on ne la ferme pas. */
.suite-carte {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 4px solid #16a34a;
  border-radius: .75rem; color: #14532d;
  padding: .8rem 3rem .8rem 1rem; margin-bottom: 1.5rem;
}
.suite-carte-titre { font-weight: 600; }
.suite-carte-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.suite-carte-question { font-size: .82rem; color: #166534; margin-right: .15rem; }
.suite-carte .btn-outline-secondary { background: #fff; }

/* Liste rouverte avec les filtres de la dernière visite (filtres_memoire()) */
.filtres-rappel { font-size: .82rem; color: #64748b; margin: 0 0 .6rem; }

/* Réserver depuis le planning (plannings/salles.php) */
.planning-astuce { font-size: .82rem; color: #64748b; margin: 0 0 .6rem; }
/* La grille se sélectionne : le curseur le dit. Une réservation sans fiche à
   ouvrir (privée) garde le curseur normal ; une journée entière ne s'ouvre
   plus que par sa pastille, le reste de sa colonne se sélectionne. */
.planning-reservable .fc-timegrid-col,
.planning-reservable .fc-daygrid-day,
.planning-reservable .fc-bg-event.fc-journee-fond { cursor: cell; }
.planning-reservable .fc-event:not([href]):not(.fc-bg-event) { cursor: default; }
.planning-reservable .fc-journee-pastille { cursor: pointer; }
/* La barre « Réserver ce créneau », en bas de l'écran tant qu'une sélection
   existe. Sous les toasts (1080), au-dessus du reste. */
.planning-reserver {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1070;
  display: flex; align-items: center; gap: .75rem;
  max-width: calc(100vw - 1.5rem);
  background: #fff; border: 1px solid #cbd5e1; border-radius: .75rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
  padding: .55rem .7rem .55rem 1rem;
}
.planning-reserver[hidden] { display: none; }
.planning-reserver .pr-quand { font-weight: 600; color: #0f172a; font-size: .9rem; }
.planning-reserver .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
  .planning-reserver { left: .75rem; right: .75rem; transform: none; flex-wrap: wrap; }
  .planning-reserver .pr-quand { flex: 1 1 100%; padding-right: 1.5rem; }
  .planning-reserver .btn { flex: 1 1 auto; }
  .planning-reserver .btn-close { position: absolute; top: .5rem; right: .5rem; }
}

/* Admin › Salles : choix de la couleur (palette + autre couleur) et aperçu */
.salle-couleurs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.salle-couleur-choix {
  position: relative; width: 2rem; height: 2rem; padding: 0;
  border: 2px solid #fff; border-radius: 8px; box-shadow: 0 0 0 1px #cbd5e1;
  color: #fff; font-size: 1rem; line-height: 1; cursor: pointer;
}
.salle-couleur-choix .bi { opacity: 0; }
.salle-couleur-choix.active { box-shadow: 0 0 0 2px #0f172a; }
.salle-couleur-choix.active .bi { opacity: 1; }
.salle-couleur-choix:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.salle-couleur-choix:disabled { cursor: not-allowed; opacity: .55; }
/* Point noir : une autre salle porte déjà cette couleur */
.salle-couleur-choix.prise::after {
  content: ''; position: absolute; top: -5px; right: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #0f172a; border: 2px solid #fff;
}
.salle-couleur-autre { display: inline-flex; align-items: center; gap: .4rem; margin-left: .25rem; }
.salle-couleur-apercu { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
.salle-couleur-apercu-cas { width: 8.5rem; text-align: center; }
.salle-couleur-apercu-cas .resa-bloc { text-align: left; font-size: .8rem; }

@media print {
  /* Sans cela le navigateur blanchit les fonds : plus de couleur de salle,
     plus de hachures. */
  .resa-bloc, .resa-ico, .salle-pastille, .fc .fc-event, .fc-journee-pastille {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .resa-ico-en_cours { animation: none; }
  /* Navigation : inutile sur le papier */
  .semaines-rapides { display: none !important; }
}

/* v2.72.0 : journée entière en FOND de colonne dans les vues horaires
   (cf. inc/ui/calendrier_mobile.php). La teinte est dans la couleur de fond
   (rgba) et non dans l'opacité, qui atténuerait aussi la pastille. */
.fc .fc-bg-event.fc-journee-fond { opacity: 1; cursor: pointer; }
.fc-journee-pastille {
  position: relative;   /* v2.80.0 : repère de la pastille de statut (.resa-ico) */
  margin: 3px; padding: 3px 6px; border-radius: 5px;
  color: #fff; font-size: .74rem; line-height: 1.25;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  overflow: hidden;
}
.fc-journee-pastille-titre  { font-weight: 700; }
.fc-journee-pastille-detail { font-size: .7rem; opacity: .92; }

/* Bloc horaire serré (trop court ou trop étroit).
   v2.72.0 masquait la salle puis le nom, renvoyés à l'infobulle.
   v2.73.1 : retour terrain — la salle et le demandeur doivent se lire d'un coup
   d'œil sur le planning, même serrés. On ne masque donc plus rien d'utile : on
   resserre. Chaque ligne tient sur UNE ligne terminée par « … » (jamais coupée
   au milieu d'un mot), la police descend, et c'est l'HEURE qui part en premier
   — elle se lit déjà sur la grille. Dans les blocs minuscules (une demi-heure),
   deux lignes : le motif, puis « salle · nom » qui se partagent la largeur —
   sur une seule ligne, le motif prenait toute la place et la salle n'apparaissait jamais.
   Chaque bloc horaire est un « container » : il est dimensionné par
   FullCalendar (position absolue), jamais par son contenu, donc la containment
   de taille est sans risque. Navigateur trop ancien : rendu normal, empilé. */
.fc .fc-timegrid-event { container-type: size; }
/* Sélecteurs préfixés par .fc-timegrid-event : les tailles « téléphone » du
   bloc @media plus bas (une seule classe) écraseraient sinon ces réglages. */
@container (max-height: 72px) {
  .fc-timegrid-event .fc-ev-time, .fc-timegrid-event .fc-ev-motif,
  .fc-timegrid-event .fc-ev-salle, .fc-timegrid-event .fc-ev-nom {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.12;
  }
  .fc-timegrid-event .fc-ev-motif { font-size: .72rem; }
  .fc-timegrid-event .fc-ev-salle, .fc-timegrid-event .fc-ev-nom { font-size: .66rem; }
}
@container (max-height: 52px) {
  .fc-timegrid-event .fc-ev-time { display: none; }
  .fc-timegrid-event .fc-ev-salle .bi, .fc-timegrid-event .fc-ev-nom .bi { display: none; }
  /* v2.80.0 : l'heure partie, c'est le motif qui côtoie la pastille de statut */
  .fc-timegrid-event .resa-ico ~ .fc-ev-motif { padding-right: 16px; }
}
/* Deux lignes. Grille et non flex : en flex avec retour à la ligne, le nom
   passait sur une 3e ligne (hors du bloc) au lieu de rétrécir. Deux colonnes
   minmax(0, auto) se partagent la 2e ligne : la plus courte garde sa taille,
   l'autre prend le reste, et chacune se termine par « … ». */
@container (max-height: 34px) {
  .fc-timegrid-event .fc-event-main {
    display: grid; grid-template-columns: minmax(0, auto) minmax(0, auto);
    justify-content: start; align-content: start; column-gap: .3em;
    overflow: hidden; line-height: 1.1;
  }
  .fc-timegrid-event .fc-ev-motif { grid-column: 1 / -1; font-size: .64rem; }
  .fc-timegrid-event .fc-ev-salle, .fc-timegrid-event .fc-ev-nom { font-size: .6rem; }
  .fc-timegrid-event .fc-ev-salle + .fc-ev-nom::before { content: "· "; }
}
@container (max-width: 120px) {
  .fc-timegrid-event .fc-ev-time, .fc-timegrid-event .fc-ev-motif,
  .fc-timegrid-event .fc-ev-salle, .fc-timegrid-event .fc-ev-nom {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .fc-timegrid-event .fc-ev-salle .bi, .fc-timegrid-event .fc-ev-nom .bi { display: none; }
}
/* v2.80.0 : bloc très étroit (trois réservations côte à côte dans une colonne
   de semaine) — la pastille de statut prendrait la moitié de la largeur et il
   ne resterait qu'une lettre du motif. Elle s'efface : la forme du bloc
   (plein, hachuré, pâle) dit encore le statut, et l'infobulle le nomme. */
@container (max-width: 56px) {
  .fc-timegrid-event .resa-ico { display: none; }
  .fc-timegrid-event .resa-ico + .fc-ev-time,
  .fc-timegrid-event .resa-ico + .fc-ev-motif,
  .fc-timegrid-event .resa-ico ~ .fc-ev-motif { padding-right: 0; }
}

/* v2.70.0 : avertissement « version mobile » (inc/ui/footer.php).
   Un encart en bas d'écran, pas une fenêtre modale : il n'empêche pas de
   lire la page derrière et se ferme d'un geste. Il n'est affiché que par le
   script, sur téléphone ; rien ici ne dépend donc de la largeur. */
.avert-mobile {
  /* z-index SOUS les toasts (.toast-container-fixed : 1080) : après un
     enregistrement, « Paramètres enregistrés » doit rester visible par-dessus. */
  position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 1075;
  display: flex; gap: .75rem; align-items: flex-start;
  background: #fff; border-radius: 14px;
  padding: .9rem 2.4rem .9rem .9rem;
  border-left: 4px solid #d4a017;
  box-shadow: 0 10px 30px rgba(20, 16, 60, .25);
  transform: translateY(130%); opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.avert-mobile.avert-mobile-visible { transform: translateY(0); opacity: 1; }
.avert-mobile-icone {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff3cd; color: #b45309; font-size: 1.1rem;
}
.avert-mobile-corps { font-size: .88rem; line-height: 1.35; color: #334155; }
.avert-mobile-corps strong { display: block; margin-bottom: .2rem; color: #1e1b4b; }
.avert-mobile-fermer { position: absolute; top: .65rem; right: .65rem; }
@media (prefers-reduced-motion: reduce) { .avert-mobile { transition: none; } }

/* v2.69.0 : calendriers sur téléphone. Même seuil que fcMobile
   (inc/ui/calendrier_mobile.php), qui y remplace la semaine par 3 jours. */
@media (max-width: 575.98px) {
  /* Barre d'outils sur trois lignes : le titre, la navigation, puis les vues
     en pleine largeur. Avant, le titre prenait quatre lignes et les boutons
     de vue sortaient de l'écran. */
  .fc .fc-header-toolbar {
    flex-wrap: wrap;
    row-gap: .5rem;
    column-gap: .5rem;
    margin-bottom: .75rem !important;
  }
  .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) { order: -1; flex: 1 1 100%; text-align: center; }
  .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) { flex: 1 1 100%; }
  .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) .fc-button-group { display: flex; width: 100%; }
  .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) .fc-button { flex: 1 1 0; }
  .fc .fc-toolbar-title { font-size: 1.15rem; }
  .fc .fc-button { padding: .4rem .5rem; font-size: .85rem; }

  /* En-têtes de jour : plus petits, et pas soulignés en bleu comme un lien
     (le style global des <a> de Bootstrap s'y appliquait). */
  .fc .fc-col-header-cell-cushion { font-size: .78rem; padding: 2px 0; color: inherit; text-decoration: none; }
  .fc .fc-daygrid-day-number { font-size: .75rem; padding: 2px 3px; color: inherit; text-decoration: none; }

  /* Colonne des heures plus étroite : chaque pixel rendu aux événements. */
  .fc .fc-timegrid-slot-label-cushion,
  .fc .fc-timegrid-axis-cushion { font-size: .68rem; padding: 0 2px; }

  /* Contenu des événements resserré, sans dépasser de la case. */
  .fc .fc-timegrid-event .fc-event-main { padding: 1px 2px; overflow: hidden; }
  .fc-ev-time  { font-size: .64rem; }
  .fc-ev-motif { font-size: .72rem; }
  .fc-ev-salle, .fc-ev-nom { font-size: .66rem; }
  .fc .fc-daygrid-event { font-size: .7rem; }
  .fc .fc-list-event-title { white-space: normal; }
  .fc .fc-list-day-cushion a { color: inherit; text-decoration: none; }

  /* Vue mois : une ligne par événement, tronquée. Le rendu de
     plannings/salles.php empile heure, motif, salle et nom — dans une case de
     55 px, FullCalendar mesurait mal ces hauteurs et les événements débordaient
     les uns sur les autres — c'était le texte qui revenait à la ligne mot par mot.
     v2.73.1 : salle et nom ne sont plus masqués. Trois lignes courtes, chacune
     sur UNE ligne terminée par « … » : la hauteur est fixe (plus de retour à la
     ligne), et dans une case de 50 px la salle et le nom commencent à se lire —
     derrière le motif sur la même ligne, ils n'apparaissaient jamais.
     Seule l'heure part (vue 3 jours, liste, fiche). */
  .fc-dayGridMonth-view .fc-ev-time { display: none; }
  .fc-dayGridMonth-view .fc-ev-motif,
  .fc-dayGridMonth-view .fc-ev-salle,
  .fc-dayGridMonth-view .fc-ev-nom,
  .fc-dayGridMonth-view .fc-event-title {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15;
  }
  .fc-dayGridMonth-view .fc-ev-motif,
  .fc-dayGridMonth-view .fc-event-title { font-size: .68rem; font-weight: 600; }
  .fc-dayGridMonth-view .fc-ev-salle,
  .fc-dayGridMonth-view .fc-ev-nom { font-size: .62rem; font-weight: 400; }
  .fc-dayGridMonth-view .fc-ev-salle .bi,
  .fc-dayGridMonth-view .fc-ev-nom .bi { display: none; }
  .fc-dayGridMonth-view .fc-daygrid-event { margin: 1px 1px 0; padding: 0 2px; }
  /* v2.80.0 : dans une case de 50 px la pastille de statut mangerait le
     motif. La forme du bloc (plein, hachuré, pâle) suffit ; le détail est
     dans les autres vues. */
  .fc-dayGridMonth-view .resa-ico { display: none; }
  .fc-dayGridMonth-view .resa-ico + .fc-ev-motif { padding-right: 0; }

  /* La carte du calendrier rend un peu de sa marge intérieure. */
  .section-card > #calendar { margin-left: -.5rem; margin-right: -.5rem; }
}

/* v2.7.0 — Empty state v2 (composant render_empty_state) */
.empty-state-v2 {
  text-align: center;
  padding: 2.5rem 1rem;
  max-width: 480px;
  margin: 0 auto;
}
.empty-state-illu {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 1.25rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}
.empty-state-illu-primary   { background: #cfe2ff; color: #084298; }
.empty-state-illu-success   { background: #d1e7dd; color: #0f5132; }
.empty-state-illu-warning   { background: #fff3cd; color: #664d03; }
.empty-state-illu-danger    { background: #f8d7da; color: #842029; }
.empty-state-illu-info      { background: #cff4fc; color: #055160; }
.empty-state-illu-secondary { background: #e9ecef; color: #495057; }
.empty-state-title {
  font-weight: 700;
  color: #212529;
  margin-bottom: 0.5rem;
}
.empty-state-desc {
  color: #6c757d;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.empty-state-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* v2.7.0 — Stepper de statut (fiche detail resa / manif) */
/* ----- Bandeau d'etat de la fiche reservation (v2.45.0) -----
   Porte la phrase (ou on en est), le prerequis bloquant et l'action.
   Le fil ci-dessous n'est plus qu'un repere de progression. */
.etat-bandeau {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border-left: 4px solid transparent;
  margin-bottom: 0.75rem;
}
.etat-bandeau .etat-icone { font-size: 1.35rem; line-height: 1.2; flex: 0 0 auto; }
.etat-bandeau .etat-corps { flex: 1 1 auto; min-width: 0; }
.etat-bandeau .etat-titre { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.etat-bandeau .etat-sous  { font-size: 0.875rem; color: var(--mairie-muted); margin-top: 0.15rem; }
.etat-bandeau .etat-blocage { font-size: 0.875rem; color: #b45309; margin-top: 0.4rem; font-weight: 500; }
.etat-bandeau .etat-action { flex: 0 0 auto; align-self: center; margin: 0; white-space: nowrap; }

.etat-ton-action  { background: #f4f3fb; border-left-color: var(--mairie-primary); }
.etat-ton-action  .etat-titre { color: var(--mairie-primary); }
.etat-ton-attente { background: #fff8e6; border-left-color: #f59e0b; }
.etat-ton-attente .etat-titre { color: #b45309; }
.etat-ton-ok      { background: #e8f5ee; border-left-color: #198754; }
.etat-ton-ok      .etat-titre { color: #146c43; }
.etat-ton-alerte  { background: #fdecea; border-left-color: #dc3545; }
.etat-ton-alerte  .etat-titre { color: #b02a37; }
.etat-ton-neutre  { background: #f8f9fa; border-left-color: #adb5bd; }
.etat-ton-neutre  .etat-titre { color: #495057; }

@media (max-width: 575px) {
  .etat-bandeau { flex-wrap: wrap; }
  .etat-bandeau .etat-action { width: 100%; margin-top: 0.5rem; }
  .etat-bandeau .etat-action .btn { width: 100%; }
}

/* ----- Travail à plusieurs (v2.82.0) -----
   .etat-traite : « Validée par Sophie Martin aujourd'hui à 10h42 » — bandeau
   d'état de la fiche réservation, haut de la fiche manifestation. */
.etat-traite {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-size: 0.85rem; color: var(--mairie-muted); margin: 0.4rem 0 0.6rem;
}
.etat-bandeau .etat-traite { margin-bottom: 0; }

/* Arrivée par l'e-mail de demande alors qu'un collègue l'a déjà traitée */
.deja-traitee { display: flex; gap: 0.75rem; align-items: flex-start; }
.deja-traitee > i { font-size: 1.5rem; line-height: 1.1; }

/* Fil « Activité de l'équipe » (gestion/activite.php + hub) */
.act-jour {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--mairie-primary); margin: 1rem 0 0.5rem; padding-bottom: 0.25rem;
  border-bottom: 1px solid #e5e7eb;
}
.act-jour:first-of-type { margin-top: 0; }
.act-fil { margin: 0; }
.act-ligne { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.45rem 0; }
.act-ligne + .act-ligne { border-top: 1px dashed #eef0f3; }
.act-heure { flex: 0 0 3.2rem; font-size: 0.8rem; color: var(--mairie-muted); padding-top: 0.35rem; font-variant-numeric: tabular-nums; }
.act-fil-compact .act-heure { flex-basis: 8.5rem; }
.act-avatar {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.75rem; font-weight: 700;
}
.act-avatar-auto { background: #94a3b8; font-size: 0.9rem; }
.act-corps { flex: 1 1 auto; min-width: 0; }
.act-phrase { line-height: 1.35; }
.act-icone { color: var(--mairie-muted); }
.act-icone.act-ok      { color: #198754; }
.act-icone.act-non     { color: #dc3545; }
.act-icone.act-terrain { color: var(--mairie-primary); }
.act-contexte { font-size: 0.82rem; color: var(--mairie-muted); }
.act-detail   { font-size: 0.82rem; color: #475569; font-style: italic; }
.act-filtres .form-select { width: auto; max-width: 100%; }
.hub-activite {
  background: #fff; border-radius: 0.7rem; box-shadow: var(--shadow);
  padding: 0.6rem 1rem; height: 100%;
}

/* Paramètres rangés en onglets (gestion/parametres.php, v2.85.0) : sur grand
   écran, la barre reste visible en descendant dans un long onglet. Pas sur
   téléphone, où les onglets passent sur deux lignes et mangeraient l'écran. */
@media (min-width: 992px) {
  .param-onglets-carte { position: sticky; top: 72px; z-index: 10; }
}
/* Une carte visée par son ancre (#cron, #pack-communication…) s'arrête sous la
   barre de navigation — et sous les onglets collants, sur grand écran. */
.param-panneaux .section-card[id] { scroll-margin-top: 80px; }
@media (min-width: 992px) {
  .param-panneaux .section-card[id] { scroll-margin-top: 150px; }
}
.param-onglets .nav-link { font-weight: 600; }
.param-onglets .badge { font-size: 0.7em; vertical-align: middle; }

/* Logo d'une association (v2.88.0) : toujours entier (contain), sur fond
   blanc, aux mêmes tailles partout. */
.logo-orga {
  object-fit: contain; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 6px; vertical-align: middle; flex: none;
}
.logo-orga-xs { width: 20px; height: 20px; border-radius: 4px; }
.logo-orga-sm { width: 32px; height: 32px; }
.logo-orga-md { width: 48px; height: 48px; }
.logo-orga-lg { width: 96px; height: 96px; padding: 4px; }
.logo-orga-vide {
  width: 96px; height: 96px; margin: 0 auto; border: 2px dashed #cbd5e1; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--mairie-muted);
}
.logo-orga-vide .bi { font-size: 1.8rem; }

/* Pack communication (communication.php, v2.84.0) */
.pack-apercu {
  height: 160px; display: flex; align-items: center; justify-content: center;
  background: #f4f5f9; border-bottom: 1px solid #e5e7eb; border-radius: 0.5rem 0.5rem 0 0;
  overflow: hidden; padding: 0.75rem;
}
.pack-apercu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pack-apercu i { font-size: 3.2rem; color: var(--mairie-primary); opacity: 0.75; }

/* Accueil mairie : « Aujourd'hui et demain » (index.php, agents et admins) */
.agenda-jour {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--mairie-primary); margin: 0.9rem 0 0.4rem; padding-bottom: 0.25rem;
  border-bottom: 1px solid #e5e7eb;
}
.agenda-jour:first-of-type { margin-top: 0; }
.agenda-ligne { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.35rem 0; }
.agenda-ligne + .agenda-ligne { border-top: 1px dashed #eef0f3; }
.agenda-heure { flex: 0 0 7.5rem; font-size: 0.82rem; color: var(--mairie-muted); padding-top: 0.1rem; font-variant-numeric: tabular-nums; }
.agenda-icone { color: var(--mairie-primary); padding-top: 0.1rem; }
.agenda-corps { flex: 1 1 auto; min-width: 0; }
.agenda-corps .badge { font-weight: 600; margin-left: 0.25rem; }
/* v2.87.0 : la nature d'une ligne d'agenda se voit d'abord — badge en tête
   et liseré de la même couleur (salle bleu, matériel vert, les deux violet,
   manifestation orange, événement rose). */
.nature-manifestation { background: #ffedd5; color: #9a3412; }
.nature-evenement     { background: #fce7f3; color: #9d174d; }
.agenda-ligne { border-left: 4px solid transparent; padding-left: 0.6rem; }
.agenda-nat-salle         { border-left-color: #3b82f6; }
.agenda-nat-materiel      { border-left-color: #10b981; }
.agenda-nat-mixte         { border-left-color: #7c3aed; }
.agenda-nat-manifestation { border-left-color: #f97316; }
.agenda-nat-evenement     { border-left-color: #db2777; }
.agenda-corps .badge-nature { margin-left: 0; margin-right: 0.15rem; }
/* v2.86.0 : jour par jour (accueil + gestion/au_jour_le_jour.php) */
.agenda-resume { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--mairie-muted); }
.agenda-aujourdhui .agenda-jour { border-bottom-color: var(--mairie-accent); border-bottom-width: 2px; }
.agenda-passe .agenda-jour { color: var(--mairie-muted); }
.agenda-page .agenda-jour-bloc + .agenda-jour-bloc { margin-top: 0.4rem; }
@media print {
  .agenda-jour-bloc { break-inside: avoid; page-break-inside: avoid; }
  .agenda-ligne + .agenda-ligne { border-top: 1px solid #ccc; }
}

@media (max-width: 575px) {
  .agenda-ligne { flex-wrap: wrap; row-gap: 0; }
  .agenda-heure { flex-basis: 100%; }
  .act-heure { flex-basis: 2.8rem; }
  .act-fil-compact .act-heure { display: none; }
  .act-filtres { width: 100%; }
  .act-filtres .form-select { width: 100%; }
}

.status-stepper {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 1rem 0.5rem;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 1rem;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.status-stepper .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* v2.47.0 : le fil peut monter a 8 etapes (etats des lieux compris) ->
     les etapes se compriment et les libelles passent sur deux lignes
     plutot que de forcer un defilement horizontal. */
  min-width: 74px;
  padding: 0 0.3rem;
  flex-shrink: 1;
}
.status-stepper .step-label { overflow-wrap: anywhere; hyphens: auto; }
.status-stepper .step-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dee2e6;
  color: #6c757d;
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
  border: 2px solid #dee2e6;
  transition: all 0.2s;
}
.status-stepper .step-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6c757d;
  line-height: 1.15;
}
.status-stepper .step-meta {
  font-size: 0.68rem;
  color: #6c757d;
  opacity: 0.85;
  margin-top: 0.15rem;
  line-height: 1.1;
}
.status-stepper .step-connector {
  flex: 1 1 auto;
  height: 3px;
  background: #dee2e6;
  margin: 15px 0 0 0;  /* aligne avec le centre des icones */
  min-width: 24px;
  border-radius: 2px;
}

/* Etape franchie */
.status-stepper .step-done .step-icon {
  background: #198754;
  color: #fff;
  border-color: #198754;
}
.status-stepper .step-done .step-label { color: #198754; }
.status-stepper .step-connector-done { background: #198754; }

/* Etape courante */
.status-stepper .step-current .step-icon {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.18);
}
.status-stepper .step-current .step-label {
  color: #0d6efd;
  font-weight: 700;
}

/* Etape « etat des lieux » : en attente = orange + cliquable (v2.45.0) */
.status-stepper .step-edl.step-current .step-icon {
  background: #f59e0b;
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px #fef3c7;
}
.status-stepper .step-edl.step-current .step-label,
.status-stepper .step-edl.step-current .step-meta { color: #b45309; }
a.step-edl { cursor: pointer; }
a.step-edl:hover .step-icon { filter: brightness(0.93); }

/* Etape courante mais en retard (remise/retour non faits, date depassee) */
.status-stepper .step-late .step-icon {
  background: #dc3545;
  border-color: #dc3545;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.18);
}
.status-stepper .step-late .step-label,
.status-stepper .step-late .step-meta { color: #b02a37; }
.status-stepper .step-connector-late { background: #dc3545; opacity: 0.5; }

/* Etape morte (refusee / annulee) */
.status-stepper .step-failed .step-icon {
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.18);
}
.status-stepper .step-failed .step-label {
  color: #dc3545;
  font-weight: 700;
}
.status-stepper .step-connector-dead {
  background: #dc3545;
  opacity: 0.35;
}

/* Etape sautee (vue post-mortem) */
.status-stepper .step-skipped { opacity: 0.4; }
.status-stepper .step-skipped .step-icon {
  background: #fff;
  border-style: dashed;
}

@media (max-width: 575px) {
  /* v2.45.0 : 4 etapes doivent tenir sans scroll sur un telephone */
  .status-stepper { padding: 0.85rem 0.25rem; }
  .status-stepper .step { min-width: 0; flex-shrink: 1; padding: 0 0.15rem; }
  .status-stepper .step-label { overflow-wrap: anywhere; }
  .status-stepper .step-label { font-size: 0.7rem; }
  .status-stepper .step-meta  { font-size: 0.62rem; }
  .status-stepper .step-connector { min-width: 5px; }
  .status-stepper .step-icon { width: 26px; height: 26px; font-size: 0.95rem; }
}

/* v2.5.1 — rendu compact des manifestations en vue mois (une ligne) */
.fc-manif-month {
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 2px;
}
.fc-manif-month-lieu {
  font-weight: 400;
  opacity: 0.85;
}

/* ----- Responsive tweaks ----- */
@media (max-width: 768px) {
  main.main-container {
    padding-top: 70px;
  }
  .section-card { padding: 1rem; }
  .section-title .icon-bubble { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* ============================================================ */
/* ----- @media print : version impression ----- */
/* ============================================================ */
@media print {
  /* Masquer tout le chrome (nav, footer, boutons d'action) */
  .navbar, footer.footer, .btn, .dropdown,
  .no-print, [data-bs-toggle], .form-check, .nav, .nav-pills,
  .pagination, .toast-container-fixed, .modal {
    display: none !important;
  }

  /* Fond et couleurs simples pour économiser l'encre */
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  main.main-container {
    padding-top: 0 !important;
    max-width: 100% !important;
  }

  /* Cards : pas d'ombre, bordure simple */
  .section-card, .card, .info-block, .alert {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }

  /* Pas de couleurs de fond gourmandes en encre */
  .section-card { background: #fff !important; }
  .icon-bubble { display: none !important; }

  /* Tableaux : grille noire pour la lisibilité */
  table { border-collapse: collapse !important; width: 100%; }
  table th, table td { border: 1px solid #999 !important; padding: 4px 6px !important; }
  thead { background: #eee !important; }

  /* Badges en noir pour l'impression */
  .badge { border: 1px solid #000; background: #fff !important; color: #000 !important; }

  /* Lien : pas de soulignement bleu */
  a { color: #000 !important; text-decoration: none !important; }

  /* En-tête imprimable */
  .print-header {
    display: block !important;
    border-bottom: 2px solid #000;
    padding-bottom: 0.5em;
    margin-bottom: 1em;
  }
  .print-only { display: block !important; }
}
.print-header, .print-only { display: none; }