/* ============================================================
   So'Clean — tableau de bord d'administration
   Surface « Operate » : dense, scannable, calme. Mêmes tokens
   que le site ; le graphite de la marque porte la navigation.
   ============================================================ */

:root {
  --graphite: #2B2F33;
  --graphite-2: #3A4046;
  --graphite-3: #22262A;
  --bleu: #0071BC;
  --bleu-ciel: #4FA6DD;
  --ice: #E9F3FA;
  --papier: #FBFCFE;
  --blanc: #FFFFFF;
  --hairline: #E3E9F0;
  --texte: #2B2F33;
  --texte-2: #5A6570;
  --texte-3: #626E7B;
  --fond-input: #F5F7F9;
  --vert: #2E7D4F;
  --vert-fond: #E6F3EB;
  --rouge: #C6362E;
  --rouge-fond: #FBEBEA;
  --ambre: #8A6116;
  --ambre-fond: #FFF6E5;
  --ff-titre: "Poppins", "Segoe UI", system-ui, sans-serif;
  --ff-texte: "Inter", "Segoe UI", system-ui, sans-serif;
  --ombre-carte: 0 1px 2px rgba(43, 47, 51, .04), 0 8px 24px -18px rgba(43, 47, 51, .18);
  --ombre-tiroir: -24px 0 60px -30px rgba(43, 47, 51, .35);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--texte);
  font-family: var(--ff-texte); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: var(--bleu); text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--bleu); color: #fff; }
::placeholder { color: var(--texte-3); opacity: 1; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: #C4D3E0 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #C4D3E0; border-radius: 8px; }

/* ============================================================
   Connexion
   ============================================================ */
.ecran-connexion {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(640px 320px at 85% -10%, var(--ice) 0%, transparent 70%),
    radial-gradient(520px 300px at -10% 110%, var(--ice) 0%, transparent 70%),
    var(--papier);
}
.carte-connexion {
  width: 400px; max-width: 100%;
  background: var(--blanc); border: 1px solid var(--hairline); border-radius: 18px;
  padding: 40px 38px 34px; box-shadow: var(--ombre-carte);
}
.carte-connexion .picto { width: 52px; margin: 0 auto 18px; }
.carte-connexion h1 {
  font-family: var(--ff-titre); font-size: 21px; font-weight: 700;
  text-align: center; margin: 0 0 4px; color: var(--graphite);
}
.carte-connexion .sous-titre { text-align: center; color: var(--texte-2); font-size: 13.5px; margin: 0 0 26px; }
.separateur {
  display: flex; align-items: center; gap: 12px; margin: 20px 0;
  color: var(--texte-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em;
  font-family: var(--ff-titre); font-weight: 600;
}
.separateur::before, .separateur::after { content: ""; height: 1px; background: var(--hairline); flex: 1; }
.note-acces { text-align: center; color: var(--texte-3); font-size: 12px; margin: 22px 0 0; }

/* ============================================================
   Coque de l'application
   ============================================================ */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; }

/* ---------- Barre latérale ---------- */
.laterale {
  background: var(--graphite); color: #DEE5EB;
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px 14px; position: sticky; top: 0; height: 100dvh;
}
.laterale-logo { padding: 2px 10px 18px; }
.laterale-logo img { width: 118px; height: auto; }
.laterale nav { display: grid; gap: 2px; }
.laterale nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 9px;
  color: #B9C2CB; font-size: 13.5px; font-weight: 500;
  transition: background-color .14s ease, color .14s ease;
}
.laterale nav a svg { width: 17px; height: 17px; stroke: currentColor; flex: none; }
.laterale nav a:hover { background: var(--graphite-2); color: #fff; }
.laterale nav a.est-actif { background: var(--bleu); color: #fff; }
.laterale nav a .badge {
  margin-left: auto; background: var(--bleu); color: #fff;
  font-size: 10.5px; font-weight: 600; font-family: var(--ff-titre);
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.laterale nav a.est-actif .badge { background: rgba(255, 255, 255, .25); }
.laterale-pied { margin-top: auto; display: grid; gap: 2px; border-top: 1px solid var(--graphite-2); padding-top: 12px; }
.laterale-pied a, .laterale-pied button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; border-radius: 9px; border: 0; background: none; cursor: pointer;
  color: #B9C2CB; font-size: 13px; text-align: left;
}
.laterale-pied a:hover, .laterale-pied button:hover { background: var(--graphite-2); color: #fff; }
.laterale-pied svg { width: 16px; height: 16px; stroke: currentColor; }
.laterale-utilisateur {
  padding: 8px 12px 2px; font-size: 11.5px; color: #7E8993;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Zone principale ---------- */
.principale { display: flex; flex-direction: column; min-width: 0; }
.bandeau-demo {
  margin: 0; padding: 9px 32px;
  background: var(--ambre-fond); color: var(--ambre);
  font-family: var(--ff-titre); font-size: 12px; font-weight: 600; letter-spacing: .02em;
  border-bottom: 1px solid #F0E2C4;
}
.barre-haute {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 32px; border-bottom: 1px solid var(--hairline);
  background: var(--blanc); position: sticky; top: 0; z-index: 20;
}
.barre-haute h1 { font-family: var(--ff-titre); font-size: 18px; font-weight: 700; margin: 0; color: var(--graphite); }
.barre-haute .sous { font-size: 12.5px; color: var(--texte-3); margin: 1px 0 0; }
.barre-actions { display: flex; gap: 10px; align-items: center; }
.contenu-admin { padding: 26px 32px 60px; display: grid; gap: 22px; align-content: start; }

/* ============================================================
   Composants
   ============================================================ */

/* ---------- Boutons ---------- */
.btn-a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ff-titre); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; padding: 10px 18px; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
  white-space: nowrap; text-decoration: none;
}
.btn-a:active { transform: translateY(1px); }
.btn-a.primaire { background: var(--bleu); color: #fff; }
.btn-a.primaire:hover { background: #0067AB; }
.btn-a.secondaire { background: var(--blanc); color: var(--graphite); border-color: #C9D3DC; }
.btn-a.secondaire:hover { border-color: var(--graphite); }
.btn-a.danger { background: none; color: var(--rouge); border-color: transparent; }
.btn-a.danger:hover { background: var(--rouge-fond); }
.btn-a.fantome { background: none; color: var(--texte-2); }
.btn-a.fantome:hover { color: var(--graphite); background: var(--fond-input); }
.btn-a[disabled] { opacity: .45; pointer-events: none; }
.btn-a svg { width: 15px; height: 15px; stroke: currentColor; }
.btn-a.pleine { width: 100%; padding: 12px 18px; font-size: 12.5px; }

/* ---------- Cartes & stats ---------- */
.carte-a { background: var(--blanc); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--ombre-carte); }
.carte-a .entete-carte {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 22px; border-bottom: 1px solid var(--hairline);
}
.carte-a .entete-carte h2 {
  font-family: var(--ff-titre); font-size: 13px; font-weight: 600; margin: 0;
  letter-spacing: .06em; text-transform: uppercase; color: var(--graphite);
  display: flex; align-items: center; gap: 9px;
}
.carte-a .entete-carte h2::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); }
.carte-a .corps-carte { padding: 20px 22px; }

.grille-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat {
  background: var(--blanc); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 18px 20px 16px; box-shadow: var(--ombre-carte);
  display: grid; gap: 2px;
}
.stat .valeur { font-family: var(--ff-titre); font-size: 27px; font-weight: 700; color: var(--graphite); line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat .valeur.bleu { color: var(--bleu); }
.stat .libelle { font-size: 12px; color: var(--texte-2); }
.stat .tendance { font-size: 11.5px; color: var(--texte-3); }

/* ---------- Tableaux ---------- */
.tableau-a { width: 100%; border-collapse: collapse; }
.tableau-a th {
  font-family: var(--ff-titre); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3);
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; background: var(--blanc);
}
.tableau-a td { padding: 12px 14px; border-bottom: 1px solid var(--hairline); vertical-align: middle; font-size: 13.5px; }
.tableau-a tbody tr { cursor: pointer; transition: background-color .12s ease; }
.tableau-a tbody tr:hover { background: var(--fond-input); }
.tableau-a tbody tr:last-child td { border-bottom: 0; }
.tableau-a .ref { font-family: var(--ff-titre); font-weight: 600; color: var(--graphite); white-space: nowrap; }
.tableau-a .num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; color: var(--graphite); }
.tableau-a .secondaire-cell { color: var(--texte-3); font-size: 12.5px; }

/* ---------- Pastilles de statut ---------- */
.pastille-a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 999px;
  font-family: var(--ff-titre); font-size: 11px; font-weight: 600; letter-spacing: .03em;
  background: var(--ice); color: var(--bleu); white-space: nowrap;
}
.pastille-a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pastille-a.nouvelle { background: var(--ice); color: var(--bleu); }
.pastille-a.confirmee { background: #E4F0FB; color: #0B5E96; }
.pastille-a.collectee { background: #EAF4FB; color: #2F7FB5; }
.pastille-a.en_traitement { background: var(--ambre-fond); color: var(--ambre); }
.pastille-a.livree { background: var(--vert-fond); color: var(--vert); }
.pastille-a.annulee { background: var(--rouge-fond); color: var(--rouge); }
.pastille-a.a_traiter { background: var(--ambre-fond); color: var(--ambre); }
.pastille-a.traitee { background: var(--vert-fond); color: var(--vert); }

/* ---------- Filtres ---------- */
.filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.puce-filtre {
  padding: 7px 15px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--blanc); color: var(--texte-2); cursor: pointer;
  font-family: var(--ff-titre); font-size: 12px; font-weight: 600;
  transition: all .13s ease;
}
.puce-filtre:hover { border-color: var(--bleu); color: var(--bleu); }
.puce-filtre.est-actif { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.champ-recherche {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  background: var(--blanc); border: 1px solid var(--hairline); border-radius: 9px;
  padding: 8px 13px; min-width: 220px;
}
.champ-recherche svg { width: 15px; height: 15px; stroke: var(--texte-3); flex: none; }
.champ-recherche input { border: 0; outline: 0; background: none; font-family: inherit; font-size: 13px; width: 100%; color: var(--texte); }

/* ---------- Formulaires ---------- */
.champ-a { display: grid; gap: 6px; }
.champ-a > label {
  font-family: var(--ff-titre); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--graphite);
  display: flex; align-items: center; gap: 8px;
}
.champ-a > label .indice { color: var(--texte-3); text-transform: none; letter-spacing: 0; font-family: var(--ff-texte); font-weight: 400; font-size: 11.5px; }
.champ-a input, .champ-a select, .champ-a textarea {
  font-family: var(--ff-texte); font-size: 13.5px; color: var(--graphite);
  background: var(--fond-input); border: 1px solid transparent; border-radius: 8px;
  padding: 10px 12px; width: 100%; transition: border-color .14s ease, background-color .14s ease;
}
.champ-a input:focus, .champ-a select:focus, .champ-a textarea:focus {
  border-color: var(--bleu); background: var(--blanc); outline: none;
}
.champ-mdp-groupe {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.champ-mdp-groupe input {
  padding-right: 42px !important;
}
.btn-toggle-mdp {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texte-3);
  border-radius: 6px;
  transition: color .15s ease, background-color .15s ease;
}
.btn-toggle-mdp:hover {
  color: var(--bleu);
  background: rgba(0, 113, 188, 0.08);
}
.btn-toggle-mdp svg {
  width: 18px;
  height: 18px;
}
.champ-a textarea { min-height: 84px; resize: vertical; line-height: 1.6; }
.champ-a.est-modifie input, .champ-a.est-modifie textarea, .champ-a.est-modifie select { border-color: var(--bleu-ciel); background: var(--blanc); }
.grille-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grille-form .pleine { grid-column: 1 / -1; }

.interrupteur { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.interrupteur .rail {
  width: 34px; height: 20px; border-radius: 999px; background: #C9D3DC;
  transition: background-color .16s ease; flex: none;
}
.interrupteur .rail::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: transform .16s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 1px 3px rgba(43, 47, 51, .3);
}
.interrupteur input:checked + .rail { background: var(--bleu); }
.interrupteur input:checked + .rail::after { transform: translateX(14px); }
.interrupteur input:focus-visible + .rail { outline: 2px solid var(--bleu); outline-offset: 2px; }

/* ---------- Lignes éditables (tarifs, faq, avis, infos, contenus) ---------- */
.ligne-edit {
  display: grid; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.ligne-edit:last-child { border-bottom: 0; }
.ligne-edit .poignee { display: flex; gap: 4px; align-items: center; }
.ligne-edit .actions-ligne { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.bouton-icone {
  width: 30px; height: 30px; border-radius: 7px; border: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--texte-3); transition: all .13s ease;
}
.bouton-icone:hover { background: var(--fond-input); color: var(--graphite); }
.bouton-icone.danger:hover { background: var(--rouge-fond); color: var(--rouge); }
.bouton-icone svg { width: 15px; height: 15px; stroke: currentColor; }
.bouton-icone[disabled] { opacity: .3; pointer-events: none; }

.groupe-page {
  border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; background: var(--blanc);
}
.groupe-page > summary {
  list-style: none; cursor: pointer; padding: 15px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--ff-titre); font-size: 13.5px; font-weight: 600; color: var(--graphite);
  transition: background-color .13s ease;
}
.groupe-page > summary::-webkit-details-marker { display: none; }
.groupe-page > summary:hover { background: var(--fond-input); }
.groupe-page > summary .chevron { transition: transform .18s ease; color: var(--texte-3); }
.groupe-page[open] > summary .chevron { transform: rotate(90deg); }
.groupe-page > summary .compte-cles { font-size: 11.5px; color: var(--texte-3); font-weight: 400; font-family: var(--ff-texte); margin-left: auto; }
.groupe-page .corps-groupe { padding: 6px 20px 18px; display: grid; gap: 16px; }

/* ---------- Tiroir de détail ---------- */
.voile {
  position: fixed; inset: 0; background: rgba(43, 47, 51, .38);
  opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 60;
}
.voile.est-ouvert { opacity: 1; pointer-events: auto; }
.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 94vw;
  background: var(--blanc); z-index: 70; box-shadow: var(--ombre-tiroir);
  transform: translateX(103%); transition: transform .3s var(--ease-drawer);
  display: flex; flex-direction: column;
}
.tiroir.tiroir-large {
  width: 840px;
  max-width: 96vw;
}
.tiroir.est-ouvert { transform: none; }
.tiroir-entete {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 26px; border-bottom: 1px solid var(--hairline);
}
.tiroir-entete h2 { font-family: var(--ff-titre); font-size: 17px; font-weight: 700; margin: 0; color: var(--graphite); }
.tiroir-corps { padding: 22px 26px; overflow-y: auto; display: grid; gap: 18px; align-content: start; flex: 1; }
.tiroir-pied {
  padding: 16px 26px; border-top: 1px solid var(--hairline);
  display: flex; gap: 10px; justify-content: space-between; align-items: center;
  background: var(--papier);
}
.detail-lignes { display: grid; gap: 0; border-top: 2px solid var(--graphite); }
.detail-lignes > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 13px;
}
.detail-lignes .cle { color: var(--texte-2); }
.detail-lignes .val { font-weight: 600; color: var(--graphite); text-align: right; }

/* ---------- Toasts ---------- */
.zone-toasts { position: fixed; bottom: 22px; right: 22px; display: grid; gap: 10px; z-index: 100; }
.toast {
  background: var(--graphite); color: #fff; border-radius: 10px;
  padding: 12px 18px; font-size: 13px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 12px 32px -12px rgba(43, 47, 51, .5);
  transition: opacity .24s var(--ease-out), transform .24s var(--ease-out);
}
@starting-style {
  .toast { opacity: 0; transform: translateY(10px) scale(.98); }
}
.toast.erreur { background: var(--rouge); }
.toast svg { width: 15px; height: 15px; stroke: var(--bleu-ciel); flex: none; }
.toast.erreur svg { stroke: #fff; }
.toast.sort { opacity: 0; transform: translateY(8px); }

/* ---------- États vides & chargement ---------- */
.etat-vide { text-align: center; padding: 44px 20px; color: var(--texte-3); font-size: 13.5px; display: grid; gap: 8px; justify-items: center; }
.etat-vide svg { width: 34px; height: 34px; stroke: #C4D3E0; }
.squelette { position: relative; overflow: hidden; background: var(--fond-input); border-radius: 8px; min-height: 14px; }
.squelette::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: scintille 1.3s infinite;
}
@keyframes scintille { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- Divers ---------- */
.note-aide { font-size: 12px; color: var(--texte-3); }
.badge-type { font-size: 10px; font-family: var(--ff-titre); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: var(--fond-input); color: var(--texte-3); border-radius: 5px; padding: 2px 7px; }
.badge-type.html { background: var(--ambre-fond); color: var(--ambre); }

/* Barre d'outils HTML & Aperçu direct dans l'admin */
.barre-outils-html {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 8px;
  align-items: center;
}
.btn-outil-bleu, .btn-outil-ligne {
  background: var(--blanc);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--ff-titre);
  font-size: 12px;
  font-weight: 600;
  color: var(--graphite);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all .15s ease;
}
.btn-outil-bleu {
  border-color: #BEE3F8;
  background: #F0F9FF;
  color: var(--bleu);
}
.btn-outil-bleu:hover {
  background: var(--bleu);
  color: #ffffff;
  border-color: var(--bleu);
}
.btn-outil-ligne:hover {
  background: var(--ice);
  border-color: var(--texte-3);
}
.apercu-html-direct {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--ice);
  border: 1px solid #D2E4F2;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--graphite);
  line-height: 1.45;
}
.apercu-html-direct .apercu-label {
  font-family: var(--ff-titre);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bleu);
  display: block;
  margin-bottom: 4px;
}
.apercu-html-direct .accent {
  color: var(--bleu);
  font-weight: 600;
}

/* ---------- Graphiques & Statistiques (Grille 2x2 & Export) ---------- */
.barre-filtre-export {
  background: var(--blanc);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  margin-bottom: 24px;
}
.groupe-dates-export {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.groupe-dates-export label {
  font-family: var(--ff-titre);
  font-size: 13px;
  font-weight: 600;
  color: var(--texte-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.groupe-dates-export input[type="date"] {
  padding: 8px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-family: var(--ff-titre);
  font-size: 13px;
  color: var(--graphite);
  background: var(--ice);
}

.grille-charts-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 980px) {
  .grille-charts-2x2 {
    grid-template-columns: 1fr;
  }
}

.carte-chart {
  background: var(--blanc);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.carte-chart h3 {
  font-family: var(--ff-titre);
  font-size: 17px;
  font-weight: 700;
  color: var(--graphite);
  margin: 0 0 2px;
  line-height: 1.3;
}
.carte-chart .sous-titre-chart {
  font-size: 13px;
  color: var(--texte-3);
  margin: 0;
  line-height: 1.4;
}

/* Liste des répartitions & mois */
.liste-repartition {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.element-repartition {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.entete-rep {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}
.entete-rep .label-rep {
  font-family: var(--ff-titre);
  font-weight: 600;
  color: var(--graphite);
  line-height: 1.35;
}
.entete-rep .valeur-rep {
  font-family: var(--ff-titre);
  font-size: 13px;
  font-weight: 700;
  color: var(--bleu);
  white-space: nowrap;
  flex: none;
}
.piste-jauge {
  height: 10px;
  background: var(--ice);
  border-radius: 999px;
  overflow: hidden;
  width: 100%;
}
.remplissage-jauge {
  height: 100%;
  background: linear-gradient(90deg, var(--bleu) 0%, var(--bleu-ciel) 100%);
  border-radius: 999px;
  transition: width .6s ease;
}
.remplissage-jauge.neutre {
  background: linear-gradient(90deg, #475569 0%, #94A3B8 100%);
}
.remplissage-jauge.vert {
  background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
}

/* ---------- Rapport d'Activité PDF ---------- */
.rapport-activite-apercu {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 28px;
  box-shadow: var(--ombre-carte);
  font-family: var(--ff-texte);
}
.rapport-periode-badge {
  display: inline-block;
  background: #F0F9FF;
  border: 1px solid #BEE3F8;
  color: var(--bleu);
  font-family: var(--ff-titre);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-top: 10px;
}

/* ---------- Factures PDF / Envoi ---------- */
.facture-bloc-apercu {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 28px;
  box-shadow: var(--ombre-carte);
  font-family: var(--ff-texte);
}
.facture-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--graphite);
  padding-bottom: 20px;
  margin-bottom: 24px;
}
.facture-logo img {
  width: 140px;
}
.facture-emetteur {
  font-size: 12px;
  color: var(--texte-2);
  line-height: 1.5;
  margin-top: 8px;
}
.facture-infos-titre {
  text-align: right;
}
.facture-infos-titre h2 {
  font-family: var(--ff-titre);
  font-size: 22px;
  font-weight: 700;
  color: var(--bleu);
  margin: 0 0 6px;
}
.facture-grille-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
  font-size: 13px;
  background: var(--ice);
  padding: 16px 20px;
  border-radius: 10px;
}
.facture-parties-bloc h4 {
  font-family: var(--ff-titre);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bleu);
  margin: 0 0 6px;
}
.tableau-facture {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 13.5px;
}
.tableau-facture th {
  background: var(--graphite);
  color: #ffffff;
  padding: 10px 14px;
  text-align: left;
  font-family: var(--ff-titre);
  font-size: 12px;
}
.tableau-facture td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
}
.tableau-facture td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.facture-totaux {
  margin-left: auto;
  width: 260px;
  display: grid;
  gap: 8px;
  font-size: 14px;
  border-top: 2px solid var(--graphite);
  padding-top: 12px;
}
.facture-totaux .ligne-total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 16px;
  color: var(--bleu);
}
.facture-mentions {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 11px;
  color: var(--texte-3);
  text-align: center;
  line-height: 1.5;
}

/* ---------- Impression & Export PDF (Zero-Margin Edge-to-Edge) ---------- */
@media print {
  @page {
    margin: 0 !important;
    size: auto;
  }
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Tout masquer sur la page principale */
  body * {
    visibility: hidden !important;
  }

  /* Rendre uniquement le tiroir et son contenu visibles et cadrés en haut à gauche */
  #tiroir, #tiroir * {
    visibility: visible !important;
  }

  #tiroir, .tiroir {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12mm 16mm !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  #tiroir-entete, #tiroir-pied, .tiroir-entete, .tiroir-pied, .voile, .btn-a, button {
    display: none !important;
  }

  #tiroir-corps, .tiroir-corps {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    display: block !important;
    width: 100% !important;
  }

  .facture-bloc-apercu, .rapport-activite-apercu {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
  }

  .facture-entete {
    border-bottom: 2px solid #000000 !important;
  }

  .tableau-facture th {
    background: #1E293B !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.vue { display: none; }
.vue.est-active { display: grid; gap: 22px; animation: vue-entre .24s var(--ease-out); }
@keyframes vue-entre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
[hidden] { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .grille-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .laterale {
    position: sticky; height: auto; flex-direction: row; align-items: center;
    padding: 10px 14px; overflow-x: auto; gap: 10px;
  }
  .laterale-logo { padding: 0 8px 0 0; }
  .laterale-logo img { width: 92px; }
  .laterale nav { display: flex; gap: 4px; }
  .laterale nav a { padding: 8px 12px; white-space: nowrap; }
  .laterale nav a svg { display: none; }
  .laterale-pied { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; }
  .laterale-utilisateur { display: none; }
  .barre-haute, .contenu-admin { padding-left: 18px; padding-right: 18px; }
  .grille-form { grid-template-columns: 1fr; }
  .tiroir { width: 100vw; max-width: 100vw; }
}
@media (max-width: 620px) {
  .grille-stats { grid-template-columns: 1fr; }
  .champ-recherche { min-width: 0; width: 100%; margin: 0; }
  .tableau-a .masquable { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}