/* ============================================================
   composants.css — Styles pc-* mock partagés (cards, cartes module, KPIs, etc.)
   Cohérent LABELS §8 (~110 Web Components Lit 3 préfixés pc-).
   Patterns récupérés NT Piscines (cards hover transform, transitions elastic).
   ============================================================ */

/* ----------------------------------------------------------
   Cards génériques (Article, Événement, Document, etc.)
   ---------------------------------------------------------- */
.carte {
  background-color: var(--background-card);
  border: 1px solid var(--border-subtil);
  border-radius: var(--rayon-lg);
  overflow: hidden;
  transition: transform var(--transition-elastic),
              box-shadow var(--transition-standard),
              border-color var(--transition-standard);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-lg);
  border-color: var(--commune-primary-alpha-20);
}

.carte:focus-within {
  outline: none;
  box-shadow: var(--focus-ring), var(--ombre-md);
  border-color: var(--commune-primary);
}

@media (prefers-reduced-motion: reduce) {
  .carte:hover {
    transform: none;
  }
}

.carte__image {
  aspect-ratio: 16 / 9;
  background: var(--commune-gradient-hero);
  background-size: cover;
  background-position: center;
  position: relative;
}

.carte__categorie {
  position: absolute;
  top: var(--espacement-md);
  left: var(--espacement-md);
  background-color: rgba(0, 0, 0, 0.75);
  color: var(--text-inverse);
  padding: 4px 12px;
  border-radius: var(--rayon-rond);
  font-size: var(--texte-xs);
  font-weight: var(--poids-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.carte__contenu {
  padding: var(--espacement-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espacement-sm);
  flex: 1;
}

.carte__titre {
  font-size: var(--texte-lg);
  font-weight: var(--poids-bold);
  color: var(--text-page);
  line-height: var(--interligne-tight);
}

.carte__titre a {
  color: inherit;
  text-decoration: none;
}

.carte__titre a:hover {
  color: var(--commune-primary);
}

.carte__meta {
  display: flex;
  align-items: center;
  gap: var(--espacement-sm);
  font-size: var(--texte-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.carte__description {
  font-size: var(--texte-sm);
  color: var(--text-secondaire);
  line-height: var(--interligne-relaxed);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carte__footer {
  margin-top: auto;
  padding-top: var(--espacement-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtil);
  font-size: var(--texte-xs);
  color: var(--text-muted);
}

/* ----------------------------------------------------------
   Cards d'accès rapide modules (cohérent COMPORTEMENTS §8.11)
   ---------------------------------------------------------- */
.cards-acces-rapide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacement-md);
}

@media (min-width: 768px) {
  .cards-acces-rapide {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .cards-acces-rapide {
    grid-template-columns: repeat(6, 1fr);
  }
}

.card-module {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacement-sm);
  padding: var(--espacement-lg) var(--espacement-md);
  background-color: var(--background-card);
  border: 1px solid var(--border-subtil);
  border-radius: var(--rayon-lg);
  text-decoration: none;
  color: var(--text-page);
  text-align: center;
  transition: transform var(--transition-elastic),
              border-color var(--transition-standard),
              background-color var(--transition-standard);
  min-height: 120px;
}

.card-module:hover {
  transform: translateY(-2px);
  border-color: var(--commune-primary);
  background-color: var(--commune-primary-alpha-10);
  color: var(--commune-primary-dark);
  text-decoration: none;
}

.card-module:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .card-module:hover {
    transform: none;
  }
}

.card-module__icone {
  width: 40px;
  height: 40px;
  color: var(--commune-primary);
}

.card-module__label {
  font-size: var(--texte-sm);
  font-weight: var(--poids-semibold);
}

.card-module__compteur {
  font-size: var(--texte-xs);
  color: var(--text-muted);
  font-weight: var(--poids-regular);
}

/* ----------------------------------------------------------
   KPIs publics (cohérent COMPORTEMENTS §8.10 — k-anonymat seuil 5)
   ---------------------------------------------------------- */
.kpis-publics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacement-md);
  background-color: var(--background-card);
  border: 1px solid var(--border-subtil);
  border-radius: var(--rayon-lg);
  padding: var(--espacement-lg);
  margin-top: -50px;          /* overlap sur hero (cohérent §8.10) */
  position: relative;
  z-index: 2;
  box-shadow: var(--ombre-card);
}

@media (min-width: 768px) {
  .kpis-publics {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--espacement-xs);
}

.kpi__valeur {
  font-size: var(--texte-3xl);
  font-weight: var(--poids-extrabold);
  color: var(--commune-primary);
  line-height: var(--interligne-tight);
  font-variant-numeric: tabular-nums;
}

.kpi__label {
  font-size: var(--texte-xs);
  color: var(--text-secondaire);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--poids-medium);
}

.kpi__note {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}

/* ----------------------------------------------------------
   Hero compact (cohérent COMPORTEMENTS §8.9 — ~220 px)
   ---------------------------------------------------------- */
.hero-compact {
  position: relative;
  min-height: 280px;
  background: var(--commune-gradient-hero);
  background-size: cover;
  background-position: center;
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-compact__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
}

.hero-compact__contenu {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--espacement-xxl) var(--espacement-md);
  width: 100%;
}

@media (min-width: 768px) {
  .hero-compact__contenu {
    padding: var(--espacement-3xl) var(--espacement-lg);
  }
}

.hero-compact__sur-titre {
  font-size: var(--texte-sm);
  font-weight: var(--poids-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--espacement-sm);
  opacity: 0.9;
}

.hero-compact__titre {
  font-size: var(--texte-3xl);
  font-weight: var(--poids-extrabold);
  line-height: var(--interligne-tight);
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .hero-compact__titre {
    font-size: var(--texte-4xl);
  }
}

@media (min-width: 1024px) {
  .hero-compact__titre {
    font-size: var(--texte-5xl);
  }
}

.hero-compact__sous-titre {
  margin-top: var(--espacement-sm);
  font-size: var(--texte-lg);
  font-weight: var(--poids-regular);
  opacity: 0.95;
  max-width: 60ch;
}

/* ----------------------------------------------------------
   Badge / pastille (cohérent statuts tickets/présences/visibilité)
   ---------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--espacement-xs);
  padding: 2px 8px;
  border-radius: var(--rayon-rond);
  font-size: var(--texte-xs);
  font-weight: var(--poids-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--gris-100);
  color: var(--gris-700);
}

.badge--primary { background-color: var(--commune-primary-alpha-10); color: var(--commune-primary-dark); }
.badge--succes { background-color: var(--vert-succes-bg); color: var(--vert-succes); }
.badge--erreur { background-color: var(--rouge-erreur-bg); color: var(--rouge-erreur); }
.badge--alerte { background-color: var(--orange-alerte-bg); color: var(--orange-alerte); }
.badge--info { background-color: var(--bleu-info-bg); color: var(--bleu-info); }

/* ----------------------------------------------------------
   Sections types (titres avec hiérarchie visuelle)
   ---------------------------------------------------------- */
.section-titre {
  text-align: center;
  margin-bottom: var(--espacement-xl);
}

.section-titre__sur-titre {
  font-size: var(--texte-sm);
  font-weight: var(--poids-semibold);
  color: var(--commune-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--espacement-sm);
}

.section-titre__h2 {
  font-size: var(--texte-3xl);
  font-weight: var(--poids-extrabold);
  color: var(--text-page);
  margin-bottom: var(--espacement-sm);
  letter-spacing: -0.02em;
}

.section-titre__sous-titre {
  font-size: var(--texte-lg);
  color: var(--text-secondaire);
  max-width: 60ch;
  margin: 0 auto;
}

/* ----------------------------------------------------------
   .visually-hidden — utilitaire a11y (lecteur d'écran only)
   Pattern WebAIM standard. Utilisé par dots carrousel + announces aria-live.
   ---------------------------------------------------------- */
.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;
}

/* ----------------------------------------------------------
   N2 Tabbed carousel vie commune (itération 2bis)
   Refonte : titres + dotbar AU-DESSUS, cartes EN-DESSOUS (sans titre interne),
   sidebar à droite ≥ 1024px. Swipe mobile sur cards possible (move > 10px),
   simple tap = clic carte (lien preservé).
   ---------------------------------------------------------- */

/* Layout 2 colonnes : carrousel principal + sidebar utiles (≥ 1024px) */
.vie-commune-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacement-xl);
}

@media (min-width: 1024px) {
  .vie-commune-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--espacement-xxl, 32px);
  }
}

.vie-commune-principal {
  min-width: 0;          /* permet text-overflow dans grille */
}

/* Titres tabs cliquables au-dessus du carrousel */
.onglets-titres-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--espacement-sm);   /* resserré · moins d'écart onglets ↔ filtres (retour D1 · 3 onglets) */
  border-bottom: 2px solid var(--border-subtil);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.onglets-titres-tabs::-webkit-scrollbar { display: none; }

/* Mobile + tablette (< 1024px) · 3 onglets largeur égale stretch · cohérent retour user
   (le centrage sur tablette concerne le SOUS-HEADER navbar mobile, pas les onglets carrousel). */
@media (max-width: 1023.98px) {
  .onglets-titres-tabs {
    justify-content: stretch;
    overflow-x: visible;
  }
  .onglet-titre-tab {
    flex: 1 1 0;
    justify-content: center;
    padding-left: var(--espacement-sm);
    padding-right: var(--espacement-sm);
  }
}

.onglet-titre-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--espacement-xs);
  padding: var(--espacement-sm) var(--espacement-md);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;        /* aligne sur border-bottom du conteneur */
  color: var(--text-secondaire);
  font-family: inherit;
  font-size: var(--texte-base);
  font-weight: var(--poids-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-standard), border-color var(--transition-standard);
}

/* it5bis · hover scopé devices avec vrai pointeur (souris desktop).
   Sans `@media (hover: hover)`, le `:hover` reste sticky sur mobile/tactile après
   le tap → couleur active reste sur l'ancien onglet quand on swipe vers un autre slide. */
@media (hover: hover) {
  .onglet-titre-tab:hover {
    color: var(--commune-primary);
  }
}

.onglet-titre-tab--actif,
.onglet-titre-tab[aria-selected="true"] {
  color: var(--commune-primary);
  border-bottom-color: var(--commune-primary);
}

.onglet-titre-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--commune-primary);
  border-radius: var(--rayon-sm);
}

.onglet-titre-tab__compteur {
  display: inline-block;
  padding: 1px 7px;
  background: var(--gris-200);
  color: var(--text-secondaire);
  border-radius: var(--rayon-rond);
  font-size: 11px;
  font-weight: var(--poids-bold);
  font-variant-numeric: tabular-nums;
}

.onglet-titre-tab--actif .onglet-titre-tab__compteur,
.onglet-titre-tab[aria-selected="true"] .onglet-titre-tab__compteur {
  background: var(--commune-primary);
  color: var(--commune-primary-texte, var(--text-inverse));
}

/* Carrousel viewport (cards seulement, sans titre interne) */
.carrousel-onglets {
  position: relative;
  /* c'est un <section> · annule le padding vertical générique base.css
     `section{padding:--espacement-xxl 0}` (48px) qui creusait l'écart
     onglets ↔ filtres · composant interne, pas une section de page (retour D1) */
  padding: 0;
}

.carrousel-onglets__viewport {
  overflow: hidden;
  touch-action: pan-y;              /* permet scroll vertical, intercepte swipe horizontal */
  cursor: grab;
}

.carrousel-onglets__viewport.is-dragging { cursor: grabbing; }
.carrousel-onglets__viewport.is-dragging * { pointer-events: none; }  /* swipe · empêche clic enfants pendant drag */

/* it7+ · Fil d'Ariane (breadcrumb) · pattern standard pour pages secondaires hors navbar.
   Réutilisable sur toutes les pages public (Calendrier, fiche-etablissement, compteur-direct…). */
.fil-ariane {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--espacement-md) var(--espacement-md) 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espacement-xs);
  font-size: var(--texte-sm);
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .fil-ariane {
    padding: var(--espacement-md) var(--espacement-lg) 0;
  }
}

.fil-ariane__lien {
  color: var(--text-secondaire);
  text-decoration: none;
  transition: color var(--transition-standard);
}

@media (hover: hover) {
  .fil-ariane__lien:hover {
    color: var(--commune-primary);
    text-decoration: underline;
  }
}

.fil-ariane__separateur {
  color: var(--text-muted);
  user-select: none;
  font-size: var(--texte-xs);
}

.fil-ariane__courant {
  color: var(--text-page);
  font-weight: var(--poids-semibold);
}

/* Lien intermédiaire non-cliquable (rubrique sans page liste existante) ·
   apparence neutre, ni lien actif ni courant · positionne hiérarchiquement */
.fil-ariane__intermediaire {
  color: var(--text-secondaire);
  font-weight: var(--poids-regular);
  cursor: default;
}

/* it5 · Filtrage des cards par data-statut · forcer display:none pour [hidden]
   (override les `display: flex` des règles plus spécifiques `.card-etab` / `.card-vote` / `.onglet-actu`)
   NB · `.carrousel-onglets__slide[hidden]` est volontairement gardé en display:block plus bas (le carrousel
   les masque autrement via translateX). */
.onglet-actu[hidden],
.card-etab[hidden],
.card-vote[hidden] {
  display: none !important;
}

/* Cards à l'intérieur des slides · user-select none + pas de drag HTML5 natif */
.carrousel-onglets__slide a {
  -webkit-user-drag: none;          /* iOS Safari · empêche le drag du lien */
  user-drag: none;
}

.carrousel-onglets__slide-corps a,
.carrousel-onglets__slide-corps {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Bouton "Voir tous" en bas de chaque slide carrousel */
.slide-voir-tout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: center;
  margin-top: var(--espacement-sm);
  padding: var(--espacement-sm) var(--espacement-md);
  color: var(--commune-primary);
  font-size: var(--texte-sm);
  font-weight: var(--poids-semibold);
  text-decoration: none;
  border-radius: var(--rayon-md);
  transition: background-color var(--transition-standard);
}

.slide-voir-tout:hover {
  background: var(--commune-primary-alpha-10);
  text-decoration: underline;
}

.slide-voir-tout:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.carrousel-onglets__track {
  display: flex;
  will-change: transform;
  transition: transform 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carrousel-onglets__track.no-transition { transition: none; }

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

.carrousel-onglets__slide {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 100%;                 /* slide pleine largeur (pas de voisins entrevus) */
  min-width: 0;
}

.carrousel-onglets__slide[hidden] {
  display: block;                    /* override [hidden] global — gardé visible mais translaté */
  visibility: visible;
}

.carrousel-onglets__slide-corps {
  display: flex;
  flex-direction: column;
  gap: var(--espacement-sm);
}

/* Dotbar au-dessus (sous les titres tabs) */
.carrousel-onglets__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--espacement-sm);
  list-style: none;
  padding: 0 0 var(--espacement-md);
  margin: 0;
}

.carrousel-onglets__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: var(--gris-300);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width var(--transition-standard), background-color var(--transition-standard);
}

.carrousel-onglets__dot:hover { background: var(--commune-primary-alpha-50); }

.carrousel-onglets__dot--actif,
.carrousel-onglets__dot[aria-current="true"] {
  width: 28px;
  background: var(--commune-primary);
}

.carrousel-onglets__dot:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ----------------------------------------------------------
   Recherche · VRAIE extension de la loupe DANS le header
   (pattern GitHub / gov.uk · retours 1→4 · 3e signalement).
   `#pc-palette-commandes` = simple HOLDER masqué : à l'ouverture
   le champ (et sa liste enfant) est relocalisé EN FLUX dans le
   parent du trigger loupe ; la loupe est masquée, le champ prend
   sa place dans la barre header. La liste de résultats = dropdown
   ancré directement sous le champ (bord bas du header).
   Plus aucun panneau positionné en `fixed` à part.
   ---------------------------------------------------------- */
.pc-palette { display: none; }            /* holder · enfants relocalisés dans le header */

@keyframes pc-palette-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Le champ · vrai champ de recherche du header, extension de la
   loupe · grandit dans le parent flex du trigger (actions / recherche) */
.pc-palette__champ-conteneur {
  position: relative;                     /* ancre le dropdown résultats */
  display: flex;
  align-items: center;
  gap: var(--espacement-sm);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 460px;
  min-height: 40px;
  padding: var(--espacement-xs) var(--espacement-md);
  background: var(--background-card);
  border: 1px solid var(--border-subtil);
  border-radius: var(--rayon-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  animation: pc-palette-fade 130ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .pc-palette__champ-conteneur { animation: none; }
}

/* Le parent du trigger (header) doit céder l'espace au champ ouvert */
.header-site__actions:has(> .pc-palette__champ-conteneur) { flex: 1 1 auto; }

/* Mobile · le champ occupe toute la largeur (la CTA Connexion s'efface) */
@media (max-width: 767.98px) {
  .header-site__actions:has(> .pc-palette__champ-conteneur) .bouton-cta { display: none; }
  .pc-palette__champ-conteneur { max-width: none; }
  /* R12-E · la recherche s'ouvre vers la GAUCHE en REMPLAÇANT le brand
     (« Fourques 66300 ») · le champ prend toute sa place · plus de
     débordement à droite (avant : brand + gap + champ > viewport). À la
     fermeture le champ quitte le header → :has() ne matche plus → le
     brand réapparaît (zéro JS · cohérent pattern :has() lignes ci-dessus). */
  .header-site__conteneur:has(.pc-palette__champ-conteneur) .header-site__brand { display: none; }
}

/* Retours11 H3/H4 · le champ recherche remplace le trigger (loupe header) :
   il ne doit PAS « grossir » · loupe figée 16px (= SVG du trigger admin)
   et texte var(--texte-sm) (= libellé du trigger) au lieu de 18px/base. */
.pc-palette__icon { color: var(--text-muted); flex-shrink: 0; width: 16px; height: 16px; }

.pc-palette__input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--texte-sm);
  color: var(--text-page);
  outline: none;
  min-width: 0;
}

.pc-palette__input::placeholder { color: var(--text-muted); }

.pc-palette__fermer {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}

.pc-palette__fermer:hover {
  background: var(--gris-100);
  color: var(--text-page);
}

.pc-palette__fermer:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Dropdown résultats · découle directement du champ (bord bas du header) */
.pc-palette__liste {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  list-style: none;
  margin: 0;
  padding: var(--espacement-xs) 0;
  max-height: 72vh;
  overflow-y: auto;
  background: var(--background-card);
  border: 1px solid var(--border-subtil);
  border-radius: var(--rayon-md);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  animation: pc-palette-fade 130ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .pc-palette__liste { animation: none; }
}

.pc-palette__liste:empty {
  display: none;                  /* pas de surface vide flottante */
}

.pc-palette__empty {
  padding: var(--espacement-sm) var(--espacement-md);
  color: var(--text-muted);
  font-size: var(--texte-sm);
}

.pc-palette__option {
  display: flex;
  align-items: center;
  gap: var(--espacement-sm);
  padding: var(--espacement-sm) var(--espacement-md);
  cursor: pointer;
  color: var(--text-page);
  font-size: var(--texte-sm);
  transition: background-color 80ms ease;
}

.pc-palette__option[aria-selected="true"] {
  background: var(--commune-primary-alpha-10);
  color: var(--commune-primary-dark);
}

.pc-palette__option-titre {
  flex: 1;
  min-width: 0;
  font-weight: var(--poids-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-palette__option-type {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--poids-semibold);
  flex-shrink: 0;
}

.pc-palette__option[aria-selected="true"] .pc-palette__option-type {
  color: var(--commune-primary-dark);
}

.pc-palette__empty {
  padding: var(--espacement-lg);
  text-align: center;
  font-size: var(--texte-sm);
  color: var(--text-muted);
  font-style: italic;
}

/* Footer raccourcis clavier retiré · dropdown inline plus compact */

/* ----------------------------------------------------------
   Watermark démo (cohérent COMPORTEMENTS §8.34 + LABELS §8.16)
   Badge mockup pour distinguer mockups Phase 4 vs production
   ---------------------------------------------------------- */
.banner-mockup {
  background-color: var(--orange-alerte);
  color: var(--text-inverse);
  text-align: center;
  font-size: var(--texte-xs);
  font-weight: var(--poids-semibold);
  padding: 6px var(--espacement-md);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: sticky;
  top: 0;
  z-index: 9998;
}

.banner-mockup__lien {
  color: var(--text-inverse);
  text-decoration: underline;
  margin-left: var(--espacement-sm);
}

.banner-mockup__lien:hover {
  color: var(--text-inverse);
  text-decoration: none;
}

/* BLOC 4 · compteur « En cours » rouge · exposant discret (retour D2/D5/D6) */
.pc-filtre-compteur {
  display: inline-block;
  margin-left: 2px;          /* exposant resserré · ~2px du mot (retour webdesigner) */
  padding: 0 4px;
  border-radius: var(--rayon-rond, 999px);
  background: var(--rouge-erreur, #d4351c);
  color: #fff;
  font-size: 9px;
  font-weight: var(--poids-bold, 700);
  line-height: 1.4;
  vertical-align: super;
  font-variant-numeric: tabular-nums;
}