/* ─────────────────────────────────────────────────────────────────────────────
   admin.css — back-office Maquette 360.
   Outil de travail : mêmes teintes minérales et même police que le viewer, tableaux denses,
   statuts des lots aux couleurs de la coupe. Aucune ressource externe (CSP stricte).
   ───────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Archivo';
  src: url('/viewer/polices/archivo-5.3.0-latin-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  color-scheme: light;
  --papier: #f2f5f4;
  --surface: #ffffff;
  --encre: #16282e;
  --ardoise: #56676c;
  --trait: #d3dbda;
  --survol: #e8eeed;
  --accent: #16282e;
  --sur-accent: #ffffff;
  --danger: #a3341b;
  --succes: #1d7a46;
  --modifie: #fff6df;
  /* Statuts des lots : identiques au viewer (coupe du bâtiment). */
  --disponible: #1d7a46;
  --disponible-texte: #ffffff;
  --optionne: #e0a21b;
  --optionne-texte: #1b2427;
  --reserve: #b4482a;
  --reserve-texte: #ffffff;
  --vendu: #c7cfd1;
  --vendu-texte: #4a5a5f;
  /* Série unique des graphiques (validée contre la surface blanche). */
  --serie: #1f6f9a;
  --serie-active: #17587b;

  --police: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rayon: 6px;
  --largeur: 80rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--papier);
  color: var(--encre);
  font: 420 0.9375rem/1.5 var(--police);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
[hidden] { display: none !important; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.chargement { padding: 2rem 0; color: var(--ardoise); }
.chargement--page { padding: 3rem 1.5rem; text-align: center; }

.vide {
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--ardoise);
  text-align: center;
}

.note, .aide { margin-top: 0.75rem; color: var(--ardoise); font-size: 0.8125rem; max-width: 70ch; }

/* ─── Contrôles ───────────────────────────────────────────────────────────── */

select,
textarea,
input:not([type='checkbox'], [type='color'], [type='radio']) {
  min-height: 2.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--encre);
  font-size: 0.9375rem;
}
select { padding-right: 1.75rem; }
textarea { resize: vertical; line-height: 1.4; }
select:focus-visible, textarea:focus-visible, input:focus-visible { outline-offset: 0; border-color: var(--encre); }
:disabled { cursor: not-allowed; }
select:disabled, input:disabled, textarea:disabled { background: var(--papier); color: var(--ardoise); }
input:user-invalid, textarea:user-invalid { border-color: var(--danger); }
input[type='color'] {
  width: 3rem;
  height: 2.5rem;
  padding: 2px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  cursor: pointer;
}

.champ { display: grid; gap: 0.3rem; align-content: start; }
.champ__libelle { color: var(--ardoise); font-size: 0.8125rem; font-weight: 560; }
.champ__aide { color: var(--ardoise); font-size: 0.8125rem; }

.case-a-cocher {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  font-size: 0.875rem;
  cursor: pointer;
}
.case-a-cocher input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--encre); }

/* ─── Boutons ─────────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--encre);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--encre);
  font-weight: 560;
  font-stretch: 104%;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.bouton:hover { background: var(--survol); }
.bouton:disabled { opacity: 0.55; cursor: progress; }
.bouton--principal { border-color: var(--accent); background: var(--accent); color: var(--sur-accent); }
.bouton--principal:hover { background: var(--accent); filter: brightness(1.15); }
.bouton--discret { border-color: var(--trait); }
.bouton--large { width: 100%; min-height: 3rem; }
.bouton--petit { min-height: 2rem; padding: 0.25rem 0.625rem; font-size: 0.8125rem; }
.bouton--danger { border-color: var(--danger); color: var(--danger); }
.bouton--danger:hover { background: #fbeeea; }
.bouton.est-arme { border-color: var(--danger); background: var(--danger); color: #fff; }

/* ─── Accueil : connexion et activation ───────────────────────────────────── */

.accueil {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 1.5rem 1rem;
}

.accueil__bloc {
  display: grid;
  gap: 1rem;
  width: min(26rem, 100%);
  padding: 2rem;
  border: 1px solid var(--trait);
  border-radius: 10px;
  background: var(--surface);
}

.accueil__marque { color: var(--ardoise); font-size: 0.8125rem; font-weight: 640; font-stretch: 118%; letter-spacing: 0.04em; text-transform: uppercase; }
.accueil h1 { font-size: 1.75rem; font-weight: 740; font-stretch: 118%; line-height: 1.1; }
.accueil__texte { color: var(--ardoise); }
.accueil__formulaire { display: grid; gap: 1rem; margin-top: 0.5rem; }
.accueil__aide { padding-top: 1rem; border-top: 1px solid var(--trait); color: var(--ardoise); font-size: 0.8125rem; }

.formulaire__etat { min-height: 1.25rem; font-size: 0.875rem; color: var(--ardoise); }
.formulaire__etat.est-en-erreur { color: var(--danger); font-weight: 560; }
.formulaire__etat:empty { min-height: 0; }

/* ─── Bandeau et navigation ───────────────────────────────────────────────── */

.bandeau {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
  padding: 0.625rem max(1.5rem, calc((100% - var(--largeur)) / 2));
  border-bottom: 1px solid var(--trait);
  background: var(--surface);
}

.bandeau__marque {
  display: grid;
  font-weight: 760;
  font-stretch: 120%;
  line-height: 1.05;
  text-decoration: none;
}
.bandeau__marque span { color: var(--ardoise); font-size: 0.75rem; font-weight: 520; font-stretch: 100%; }

.navigation { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.navigation__lien {
  padding: 0.5rem 0.75rem;
  border-radius: var(--rayon);
  color: var(--ardoise);
  font-weight: 560;
  text-decoration: none;
}
.navigation__lien:hover { background: var(--survol); color: var(--encre); }
.navigation__lien[aria-current='page'] { background: var(--encre); color: #fff; }

.bandeau__compte { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.bandeau__moi { display: grid; text-align: right; text-decoration: none; line-height: 1.25; }
.bandeau__moi:hover .bandeau__email, .bandeau__moi[aria-current='page'] .bandeau__email { text-decoration: underline; }
.bandeau__email { font-size: 0.875rem; font-weight: 560; overflow-wrap: anywhere; }
.bandeau__role { color: var(--ardoise); font-size: 0.75rem; }

/* ─── Page ────────────────────────────────────────────────────────────────── */

.page {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2rem 1.5rem 7rem;
}

.page__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}
.page__entete h1 { font-size: 1.875rem; font-weight: 740; font-stretch: 118%; line-height: 1.1; letter-spacing: -0.01em; }
.page__entete h1:focus { outline: none; }
.page__sous-titre { margin-top: 0.375rem; color: var(--ardoise); max-width: 70ch; }
.page__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.page h2 { font-size: 1.125rem; font-weight: 680; font-stretch: 110%; }
.page > h2 { margin: 2rem 0 0.75rem; }

.bloc, .carte {
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
}
.bloc > summary { font-weight: 640; cursor: pointer; }
.bloc[open] > summary { margin-bottom: 1rem; }
.bloc__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.compteur { color: var(--ardoise); font-size: 0.875rem; }

.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin: 1rem 0; }
.filtres input[type='search'] { min-width: min(18rem, 100%); }

/* ─── Pastilles d'état (toujours un libellé, jamais la couleur seule) ─────── */

.pastille-publication, .pastille-compte, .pastille-lead {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 560;
  white-space: nowrap;
}
.pastille-publication::before, .pastille-compte::before, .pastille-lead::before {
  content: '';
  flex: none;
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--pastille, #8e9a9e);
}
.pastille-publication--publie, .pastille-compte--actif, .pastille-lead--gagne { --pastille: var(--succes); }
.pastille-compte--en_attente, .pastille-lead--nouveau { --pastille: var(--optionne); }
.pastille-publication--brouillon, .pastille-publication--archive, .pastille-compte--desactive,
.pastille-lead--perdu { color: var(--ardoise); }
.pastille-lead--contacte, .pastille-lead--qualifie { --pastille: var(--encre); }

.etiquette {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.4rem;
  border-radius: 4px;
  background: var(--survol);
  color: var(--ardoise);
  font-size: 0.75rem;
  font-weight: 600;
}

.statut-fond--disponible { background: var(--disponible); color: var(--disponible-texte); }
.statut-fond--optionne { background: var(--optionne); color: var(--optionne-texte); }
.statut-fond--reserve { background: var(--reserve); color: var(--reserve-texte); }
.statut-fond--vendu { background: var(--vendu); color: var(--vendu-texte); }

/* ─── Programmes ──────────────────────────────────────────────────────────── */

.programmes {
  margin: 0;
  padding: 0 1.5rem;
  list-style: none;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
}

.programme {
  display: grid;
  grid-template-columns: minmax(12rem, 2fr) 7rem minmax(11rem, 1.6fr) minmax(10rem, 1.2fr) auto;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.25rem 0;
}
.programme + .programme { border-top: 1px solid var(--trait); }
.programme__titre { display: grid; }
.programme__nom { font-size: 1.0625rem; font-weight: 680; font-stretch: 108%; text-decoration: none; }
.programme__nom:hover { text-decoration: underline; }
.programme__lieu { color: var(--ardoise); font-size: 0.875rem; }
.programme__lots { display: grid; gap: 0.375rem; }
.programme__compte { color: var(--ardoise); font-size: 0.8125rem; }
.programme__leads { font-size: 0.875rem; font-weight: 600; }
.programme__leads--aucun { color: var(--ardoise); font-weight: 420; }
.programme__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }

.barre-statuts { display: flex; gap: 2px; height: 0.5rem; }
.barre-statuts__segment { flex: 1 1 0; min-width: 2px; border-radius: 2px; }

/* ─── Programme : publication, réglages, coupe ────────────────────────────── */

.publication { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.publication__etat { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--ardoise); }
.publication__etat .pastille-publication { color: var(--encre); font-size: 0.9375rem; }
.publication__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.reglages { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem; }
.reglages .champ:first-child input { min-width: min(20rem, 100%); }
.reglages__couleur { display: flex; align-items: center; gap: 0.75rem; }

.bloc--coupe { background: var(--papier); }

.coupe {
  display: grid;
  gap: 3px;
  width: fit-content;
  min-width: min(22rem, 100%);
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 0.625rem;
  background: linear-gradient(var(--encre), var(--encre)) left 3.25rem bottom 0.25rem / calc(100% - 3.25rem) 2px no-repeat;
}
.coupe__niveau { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: 0.5rem; }
.coupe__nom { color: var(--ardoise); font-size: 0.75rem; font-stretch: 78%; font-weight: 560; text-align: right; white-space: nowrap; }
.coupe__lots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }

.case {
  width: 2.25rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 2px;
  font-size: 0.6875rem;
  font-weight: 640;
  font-stretch: 72%;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.case:hover { transform: translateY(-1px); }
.case.est-modifie { outline: 2px dashed var(--encre); outline-offset: 1px; }

/* ─── Tableaux ────────────────────────────────────────────────────────────── */

.tableau-defilant {
  overflow-x: auto;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
}
.bloc .tableau-defilant { border: 0; border-radius: 0; margin: 0 -1.5rem; }

.tableau { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tableau th, .tableau td { padding: 0.625rem 0.75rem; text-align: left; vertical-align: top; }
.tableau thead th {
  border-bottom: 1px solid var(--trait);
  color: var(--ardoise);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tableau tbody tr + tr > * { border-top: 1px solid var(--survol); }
.tableau tbody tr:hover > * { background: #f8faf9; }
.tableau th:first-child, .tableau td:first-child { padding-left: 1.5rem; }
.tableau th:last-child, .tableau td:last-child { padding-right: 1.5rem; }
.tableau select, .tableau input, .tableau textarea { min-height: 2.25rem; padding: 0.3rem 0.5rem; font-size: 0.875rem; }
.tableau--compact th, .tableau--compact td { padding: 0.375rem 0.75rem; }

.colonne-date { color: var(--ardoise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.colonne-actions { text-align: right; white-space: nowrap; }
.colonne-actions .bouton + .bouton { margin-left: 0.375rem; }
/* Dans une liste, l'action destructrice reste discrète tant qu'elle n'est pas armée. */
.tableau .bouton--danger:not(.est-arme) { border-color: var(--trait); }
.tableau .bouton--danger:not(.est-arme):hover { border-color: var(--danger); }

/* Lots */
.tableau--lots tbody th { white-space: nowrap; }
.lot__ref { font-weight: 680; font-variant-numeric: tabular-nums; }
.tableau--lots tr.est-modifie > * { background: var(--modifie); }
.tableau--lots tr.est-modifie > th { box-shadow: inset 3px 0 0 var(--optionne); }
.saisie-prix { width: 8.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.tableau--lots input[list] { width: 8.5rem; }
.colonne-description textarea { width: 100%; min-width: 16rem; field-sizing: content; max-height: 9rem; }
.ligne-erreur { display: block; max-width: 12rem; color: var(--danger); font-size: 0.75rem; font-weight: 560; white-space: normal; }
.ligne-erreur:empty { display: none; }

.barre-enregistrement {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 0.875rem max(1.5rem, calc((100% - var(--largeur)) / 2));
  background: var(--encre);
  color: #fff;
  box-shadow: 0 -6px 24px rgb(12 26 31 / 0.18);
}
.barre-enregistrement p { font-weight: 560; }
.barre-enregistrement__actions { display: flex; gap: 0.5rem; }
.barre-enregistrement .bouton { border-color: rgb(255 255 255 / 0.5); background: transparent; color: #fff; }
.barre-enregistrement .bouton:hover { background: rgb(255 255 255 / 0.1); }
.barre-enregistrement .bouton--principal { border-color: #fff; background: #fff; color: var(--encre); }
.barre-enregistrement .bouton--principal:hover { filter: none; background: var(--survol); }
.barre-enregistrement :focus-visible { outline-color: #fff; }

/* Contacts */
.lead__nom { display: block; font-weight: 640; }
.lead__coordonnees { display: block; color: var(--ardoise); overflow-wrap: anywhere; }
.lead__coordonnees a { color: var(--encre); }
.lead__coordonnees a[href^='tel:'] { white-space: nowrap; }
.lead__programme { display: block; }
.lead__lot { display: block; color: var(--ardoise); font-size: 0.8125rem; }
.lead__message { margin-top: 0.375rem; max-width: 40rem; }
.lead__message summary { width: fit-content; color: var(--ardoise); font-size: 0.8125rem; font-weight: 560; cursor: pointer; }
.lead__message p { margin-top: 0.375rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--trait); background: var(--papier); white-space: pre-line; overflow-wrap: anywhere; }
.choix-statut--nouveau { border-color: var(--optionne); font-weight: 640; }
.tableau--leads td { min-width: 9rem; }
.tableau--leads td:nth-child(2) { min-width: 16rem; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; color: var(--ardoise); font-size: 0.875rem; }

/* Utilisateurs */
.formulaire { display: grid; gap: 1rem; }
.formulaire--etroit { max-width: 28rem; padding: 1.5rem; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); }
.formulaire--ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-top: 1rem; }
.formulaire--ligne .champ:first-child { flex: 1 1 16rem; }
.formulaire--ligne .formulaire__etat { flex-basis: 100%; }
.tableau--utilisateurs tr.est-desactive td { color: var(--ardoise); }
.utilisateur__email { font-weight: 560; overflow-wrap: anywhere; }
.utilisateur__lien { display: block; margin-top: 0.125rem; color: var(--ardoise); font-size: 0.75rem; }

.zone-lien:empty { display: none; }
.lien-acces {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid #b9d9c6;
  border-left: 4px solid var(--succes);
  border-radius: 8px;
  background: #eef6f1;
}
.lien-acces__ligne { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.lien-acces__champ { flex: 1 1 20rem; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.8125rem !important; }

/* ─── Statistiques ────────────────────────────────────────────────────────── */

.stats[aria-busy='true'], .leads__corps[aria-busy='true'] { opacity: 0.55; transition: opacity 150ms; }

.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.indicateur {
  display: grid;
  align-content: start;
  gap: 0.125rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
}
.indicateur__libelle { color: var(--ardoise); font-size: 0.8125rem; font-weight: 560; }
.indicateur__valeur { font-size: 2rem; font-weight: 720; font-stretch: 110%; font-variant-numeric: tabular-nums; line-height: 1.15; }
.indicateur__detail { color: var(--ardoise); font-size: 0.75rem; }

.graphiques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 1rem; margin-top: 1rem; }
.graphique {
  min-width: 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
}
.graphique__titre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 1rem; font-weight: 660; }
.graphique__total { color: var(--ardoise); font-size: 0.8125rem; font-weight: 480; }
.graphique .vide { padding: 1.5rem; }

.histogramme { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 12rem auto; column-gap: 0.5rem; }
.histogramme__axe { position: relative; min-width: 1.5rem; color: var(--ardoise); font-size: 0.75rem; font-variant-numeric: tabular-nums; text-align: right; }
.histogramme__axe span { position: absolute; right: 0; transform: translateY(-50%); }
.histogramme__axe span:nth-child(1) { top: 0; }
.histogramme__axe span:nth-child(2) { top: 50%; }
.histogramme__axe span:nth-child(3) { top: 100%; }
.histogramme__trace { position: relative; border-bottom: 1px solid var(--ardoise); }
.histogramme__grille span { position: absolute; inset-inline: 0; border-top: 1px dashed var(--trait); }
.histogramme__grille span:nth-child(1) { top: 0; }
.histogramme__grille span:nth-child(2) { top: 50%; }
.histogramme__grille span:nth-child(3) { display: none; }
.histogramme__barres { position: absolute; inset: 0; display: flex; gap: 2px; }
.histogramme__colonne { display: flex; flex: 1 1 0; align-items: flex-end; justify-content: center; min-width: 0; border-radius: 4px 4px 0 0; }
.histogramme__colonne:hover, .histogramme__colonne.est-active { background: rgb(31 111 154 / 0.07); }
.histogramme__colonne:focus-visible { outline-offset: 0; }
.histogramme__barre { display: block; width: 100%; max-width: 2.5rem; height: 0; background: var(--serie); border-radius: 4px 4px 0 0; }
.histogramme__colonne.est-active .histogramme__barre { background: var(--serie-active); }
.histogramme__abscisses { position: relative; grid-column: 2; height: 1.75rem; color: var(--ardoise); font-size: 0.75rem; }
.histogramme__abscisse { position: absolute; top: 0.375rem; transform: translateX(-50%); white-space: nowrap; }

.infobulle {
  position: absolute;
  top: 0.25rem;
  z-index: 2;
  display: grid;
  padding: 0.375rem 0.625rem;
  border-radius: var(--rayon);
  background: var(--encre);
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}
.infobulle__periode { color: #c9d4d6; font-size: 0.75rem; }

.graphique__donnees { margin-top: 0.75rem; font-size: 0.8125rem; }
.graphique__donnees summary { width: fit-content; color: var(--ardoise); cursor: pointer; }
.graphique__donnees .tableau { margin-top: 0.5rem; }
.graphique__donnees .tableau th:first-child, .graphique__donnees .tableau td:first-child { padding-left: 0; }

.barres { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.barres th, .barres td { padding: 0.3rem 0; }
.barres__libelle { width: 1%; padding-right: 0.75rem !important; font-weight: 560; text-align: left; white-space: nowrap; }
.barres__piste { width: 100%; }
.barres__barre { display: block; height: 0.875rem; min-width: 2px; background: var(--serie); border-radius: 0 4px 4px 0; }
.barres__barre[data-largeur='0'] { min-width: 0; }
.barres__valeur { width: 1%; padding-left: 0.75rem !important; }

/* ─── Annonce (confirmation brève) ────────────────────────────────────────── */

.annonce {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 30;
  max-width: min(28rem, calc(100% - 3rem));
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--rayon);
  background: var(--encre);
  color: #fff;
  font-weight: 560;
  box-shadow: 0 8px 24px rgb(12 26 31 / 0.2);
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity 160ms, transform 160ms;
}
/* Au-dessus de la barre « modifications en attente » quand elle est affichée. */
body:has(.barre-enregistrement:not([hidden])) .annonce { bottom: 6rem; }
.annonce:empty { padding: 0; }
.annonce.est-visible { opacity: 1; transform: none; }
.annonce--erreur { background: var(--danger); }
.annonce--info { background: var(--ardoise); }

@media (prefers-reduced-motion: reduce) {
  .annonce, .case { transition: none; }
  .case:hover { transform: none; }
}

/* ─── Petits écrans ───────────────────────────────────────────────────────── */

@media (max-width: 60rem) {
  .programme { grid-template-columns: minmax(0, 1fr) auto; }
  .programme__lots, .programme__leads { grid-column: 1 / -1; }
  .programme__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 40rem) {
  .bandeau { padding: 0.625rem 1rem; gap: 0.5rem 1rem; }
  .bandeau__compte { width: 100%; justify-content: space-between; margin-left: 0; }
  .bandeau__moi { text-align: left; }
  .navigation { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .page { padding: 1.25rem 1rem 7rem; }
  .page__entete h1 { font-size: 1.5rem; }
  .bloc, .carte, .graphique { padding: 1rem; }
  .bloc .tableau-defilant { margin: 0 -1rem; }
  .programmes { padding: 0 1rem; }
  .tableau th:first-child, .tableau td:first-child { padding-left: 1rem; }
  .tableau th:last-child, .tableau td:last-child { padding-right: 1rem; }
  .annonce { right: 1rem; bottom: 1rem; }
  body:has(.barre-enregistrement:not([hidden])) .annonce { bottom: 8rem; }

  /* Contacts : une fiche par contact plutôt qu'un tableau à faire défiler. */
  .tableau--leads thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tableau--leads, .tableau--leads tbody { display: block; }
  .tableau--leads tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem 0.75rem; padding: 0.875rem 1rem; }
  .tableau--leads tbody tr + tr { border-top: 1px solid var(--trait); }
  .tableau--leads tbody tr + tr > * { border-top: 0; }
  .tableau--leads td { min-width: 0 !important; padding: 0 !important; }
  .tableau--leads td:nth-child(-n + 3), .tableau--leads td:nth-child(6) { grid-column: 1 / -1; }
  .tableau--leads td:nth-child(1) { font-size: 0.8125rem; }
  .tableau--leads td:nth-child(6) { text-align: left; }
  .tableau--leads select { width: 100%; }
  .tableau--leads tbody tr:hover > * { background: none; }
}