/* admin.css, l'espace d'administration.

   Il reprend tels quels les jetons et la base du site public : mêmes couleurs,
   mêmes polices, même vocabulaire. Ce qui change, c'est la densité : un
   back-office affiche beaucoup de chiffres sur peu de place, donc des corps
   plus petits, des tableaux serrés et une colonne de navigation permanente. */

/* ==========================================================================
   1. Charpente
   ========================================================================== */
body.admin { background: var(--papier-creux); font-size: 1rem; }

.admin-cadre { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
@media (max-width: 1024px) { .admin-cadre { grid-template-columns: 1fr; } }

/* --- Colonne de navigation ----------------------------------------------- */
.admin-cote {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  background: var(--encre); color: #A4B2C9;
  display: flex; flex-direction: column;
  padding: var(--e3) 0;
}
@media (max-width: 1024px) {
  .admin-cote {
    position: fixed; inset: 0 auto 0 0; z-index: 100;
    width: min(280px, 85vw);
    translate: -100% 0; transition: translate var(--transition);
  }
  .admin-cote.ouvert { translate: 0 0; }
}

.admin-marque {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 0 var(--e3) var(--e3);
  margin-bottom: var(--e3);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  text-decoration: none;
}
.admin-marque img { height: 38px; width: auto; }
.admin-marque span {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--jaune);
}

.admin-menu { flex: 1; padding: 0 var(--e2); }
.admin-menu-titre {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #6B7A93; margin: var(--e3) 0 .5rem var(--e2);
}
.admin-menu ul { list-style: none; margin: 0; padding: 0; }
.admin-menu li { margin: 0 0 2px; }
.admin-menu a {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem var(--e2);
  border-radius: var(--r-petit);
  color: #C3CEE0; text-decoration: none;
  font-size: .95rem; font-weight: 600;
  transition: background var(--transition), color var(--transition);
}
.admin-menu a svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .8; }
.admin-menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.admin-menu a.actif { background: var(--bleu); color: #fff; }
.admin-menu a.actif svg { opacity: 1; }
.admin-pastille {
  margin-left: auto;
  font-style: normal; font-size: var(--t-micro); font-weight: 700;
  background: var(--bleu-nuit); color: #fff;
  padding: .15rem .45rem; border-radius: var(--r-rond);
}

.admin-cote-pied { padding: var(--e3) var(--e2) 0; border-top: 1px solid rgba(255, 255, 255, .12); margin-top: var(--e3); }
.admin-lien-site {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem var(--e2);
  color: #8A99B2; text-decoration: none; font-size: var(--t-petit); font-weight: 600;
}
.admin-lien-site:hover { color: var(--jaune); }
.admin-lien-site svg { width: 17px; height: 17px; }

.admin-voile {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(23, 35, 59, .55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.admin-voile.ouvert { opacity: 1; visibility: visible; }

/* --- Colonne principale --------------------------------------------------- */
.admin-principal { display: flex; flex-direction: column; min-width: 0; overflow-x: hidden; }

.admin-entete {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3);
  padding: var(--e3) clamp(1.25rem, 3vw, 2.5rem);
  background: var(--papier);
  border-bottom: 1px solid var(--ligne);
  position: sticky; top: 0; z-index: 40;
}
.admin-entete-titre { flex: 1 1 14rem; min-width: 0; }
.admin-entete h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0; }
.admin-entete p { font-size: var(--t-petit); color: var(--encre-tenue); margin: .25rem 0 0; }

.admin-burger {
  display: none; width: 40px; height: 40px;
  border: 1px solid var(--ligne); border-radius: var(--r-petit);
  background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.admin-burger span { display: block; width: 16px; height: 2px; background: var(--encre); border-radius: 2px; }
@media (max-width: 1024px) { .admin-burger { display: flex; } }

/* Compte : l'initiale, et le détail dans un volet au survol ou au clavier. */
.admin-compte { position: relative; display: flex; align-items: center; }
.admin-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bleu); color: #fff;
  border: 2px solid transparent; cursor: pointer;
  font-family: var(--font-titre); font-size: 1.05rem; font-weight: 800;
  transition: border-color var(--transition), background var(--transition);
}
.admin-avatar:hover, .admin-compte.ouvert .admin-avatar { background: var(--bleu-fonce); border-color: var(--jaune); }

.admin-volet-compte {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 50;
  width: min(250px, calc(100vw - 2.5rem)); padding: var(--e3);
  background: var(--papier); border: 1px solid var(--ligne);
  border-radius: var(--r); box-shadow: 0 24px 48px -24px rgba(23, 35, 59, .5);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
}
.admin-compte:hover .admin-volet-compte,
.admin-compte:focus-within .admin-volet-compte,
.admin-compte.ouvert .admin-volet-compte { opacity: 1; visibility: visible; transform: none; }

.avc-nom  { font-family: var(--font-titre); font-weight: 800; font-size: 1.05rem; margin: 0 0 .15rem; }
.avc-mail { font-size: var(--t-mini); color: var(--encre-tenue); margin: 0 0 .6rem; word-break: break-all; }
.avc-role {
  display: inline-block; margin: 0 0 var(--e3);
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--bleu-voile); color: var(--bleu-fonce);
  padding: .25rem .6rem; border-radius: var(--r-rond);
}
.admin-volet-compte form { margin: 0; }
.admin-volet-compte .btn { width: 100%; }

.admin-demo {
  margin: 0; padding: .9rem clamp(1.25rem, 3vw, 2.5rem);
  background: var(--jaune-doux); color: #6B4E08;
  font-size: var(--t-mini); max-width: none;
}
.admin-demo code { background: rgba(0, 0, 0, .06); padding: .1rem .35rem; border-radius: 3px; }

.admin-contenu { flex: 1; padding: clamp(1.5rem, 3vw, 2.5rem); }
.admin-pied {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3);
  justify-content: space-between;
  padding: var(--e3) clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--ligne);
  font-size: var(--t-mini); color: var(--encre-tenue);
}
.admin-pied code { background: var(--papier-creux); padding: .1rem .35rem; border-radius: 3px; }

/* ==========================================================================
   2. Blocs et cartes
   ========================================================================== */
.bloc {
  background: var(--papier); border: 1px solid var(--ligne);
  border-radius: var(--r); padding: var(--e3);
}
.bloc + .bloc { margin-top: var(--e3); }
.bloc-tete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--e2); margin-bottom: var(--e3);
}
.bloc-tete h2 { font-size: 1.15rem; margin: 0; }
.bloc-tete p { font-size: var(--t-mini); color: var(--encre-tenue); margin: 0; }

.grille-indicateurs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e2); margin-bottom: var(--e3);
}
@media (max-width: 420px) { .grille-indicateurs { grid-template-columns: 1fr; } }
.indicateur {
  position: relative;
  background: var(--papier); border: 1px solid var(--ligne);
  border-radius: var(--r); padding: var(--e3);
}
.indicateur .ico {
  position: absolute; top: var(--e3); right: var(--e3);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bleu-voile); color: var(--bleu-fonce);
}
.indicateur .ico .fa { width: 15px; height: 15px; }
.indicateur.alerte .ico { background: #FBE9E9; color: #A32020; }
.indicateur.neutre .ico { background: var(--bleu-voile); color: var(--bleu); }
.indicateur .libelle {
  display: block; font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre-tenue);
  margin-bottom: .6rem; padding-right: 2.6rem;
}
/* Corps volontairement modéré : un tableau de bord se lit d'un coup d'œil,
   des chiffres énormes forcent au contraire le regard à sauter de l'un à
   l'autre et cassent les montants sur deux lignes. */
.indicateur .valeur {
  display: block; font-family: var(--font-titre);
  font-size: clamp(1.25rem, 1.7vw, 1.55rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.indicateur .detail { display: block; font-size: var(--t-mini); color: var(--encre-tenue); margin-top: .4rem; }

/* ==========================================================================
   3. Tableaux
   ========================================================================== */
.table-enveloppe { overflow-x: auto; }
.table {
  width: 100%; border-collapse: collapse; font-size: var(--t-petit);
}
.table th {
  text-align: left; white-space: nowrap;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre-tenue);
  padding: 0 .7rem .7rem 0; border-bottom: 1px solid var(--ligne);
}
.table td { padding: .75rem .7rem .75rem 0; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.table tr:hover td { background: var(--bleu-voile); }
.table .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table a { font-weight: 600; text-decoration: none; }
.table a:hover { color: var(--bleu-fonce); text-decoration: underline; text-underline-offset: 3px; }
.table small { display: block; color: var(--encre-tenue); font-size: var(--t-mini); }

.etiquette-statut {
  display: inline-block; white-space: nowrap;
  font-size: var(--t-micro); font-weight: 700;
  padding: .28rem .65rem; border-radius: var(--r-rond);
  background: var(--papier-creux); color: var(--encre-douce);
}
.statut-payee      { background: var(--bleu-voile);  color: var(--bleu-fonce); }
.statut-expediee   { background: var(--bleu-voile);   color: var(--bleu); }
.statut-livree     { background: var(--encre);       color: var(--jaune); }
.statut-en_attente { background: var(--jaune-doux);  color: #6B4E08; }
.statut-annulee    { background: #FBE9E9;            color: #A32020; }

.etat-rupture { background: #FBE9E9; color: #A32020; }
.etat-alerte  { background: var(--jaune-doux); color: #6B4E08; }
.etat-correct { background: var(--bleu-voile); color: var(--bleu-fonce); }

/* ==========================================================================
   4. Filtres et formulaires denses
   ========================================================================== */
.barre-filtres {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  margin-bottom: var(--e3);
}
/* Sous 640 px, chaque contrôle occupe toute la largeur : côte à côte, ils
   deviennent trop étroits pour lire leur propre contenu. */
@media (max-width: 640px) {
  .barre-filtres { gap: .5rem; }
  .barre-filtres > * { flex: 1 1 100%; width: 100%; }
  .barre-filtres .btn { justify-content: center; }
}
.barre-filtres input[type="search"], .barre-filtres select, .barre-filtres input[type="date"] {
  font: inherit; font-size: var(--t-petit);
  padding: .65rem .9rem;
  border: 1px solid var(--ligne); border-radius: var(--r-petit);
  background: var(--papier);
}
.barre-filtres input[type="search"] { min-width: 0; flex: 1 1 14rem; }
.barre-filtres input:focus, .barre-filtres select:focus {
  outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-voile);
}
.filtre-actif { font-size: var(--t-mini); color: var(--encre-tenue); }

.champ-nombre {
  width: 84px; font: inherit; font-size: var(--t-petit); font-weight: 700;
  text-align: right;
  padding: .45rem .6rem;
  border: 1px solid var(--ligne); border-radius: var(--r-petit);
  background: var(--papier);
  -moz-appearance: textfield;
}
.champ-nombre::-webkit-outer-spin-button,
.champ-nombre::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.champ-nombre.modifie { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-voile); }
.champ-nombre.enregistre { border-color: var(--bleu); background: var(--bleu-voile); }
.champ-nombre.echec { border-color: #A32020; background: #FBE9E9; }

/* ==========================================================================
   5. Graphiques, tracés en SVG côté serveur, sans bibliothèque
   ========================================================================== */
.graphique { width: 100%; height: auto; display: block; }
.graphique .aire { fill: var(--bleu); opacity: .12; }
.graphique .courbe { fill: none; stroke: var(--bleu); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.graphique .point { fill: var(--bleu); }
.graphique .grille { stroke: var(--ligne); stroke-width: 1; }
.graphique .etiquette { fill: var(--encre-tenue); font-family: var(--font-corps); font-size: 10px; }

.barres { display: grid; gap: .7rem; }
.barre-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .8rem; align-items: center; }
.barre-ligne .intitule { font-size: var(--t-petit); }
.barre-ligne .valeur { font-size: var(--t-petit); font-weight: 700; font-variant-numeric: tabular-nums; }
.barre-piste {
  grid-column: 1 / -1; height: 8px; border-radius: var(--r-rond);
  background: var(--papier-creux); overflow: hidden;
}
.barre-remplie { height: 100%; border-radius: var(--r-rond); background: var(--bleu); }
.barre-ligne:nth-child(2) .barre-remplie { background: var(--bleu-nuit); }
.barre-ligne:nth-child(3) .barre-remplie { background: var(--bleu); }

/* ==========================================================================
   6. Deux colonnes
   ========================================================================== */
.admin-duo {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--e3); align-items: start;
}
@media (max-width: 1100px) { .admin-duo { grid-template-columns: 1fr; } }

.admin-trio {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e3); align-items: start;
}

.rien-a-afficher {
  padding: var(--e5) var(--e3); text-align: center;
  color: var(--encre-tenue); font-style: italic;
}

.message-admin {
  padding: .85rem 1.1rem; border-radius: var(--r-petit);
  font-size: var(--t-petit); margin-bottom: var(--e3);
  background: var(--bleu-voile); border: 1px solid rgba(12, 120, 108, .35); color: var(--bleu-fonce);
}
.message-admin.echec { background: #FBE9E9; border-color: #E9B4B4; color: #A32020; }

.pagination { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: var(--e3); align-items: center; }
.pagination a, .pagination span {
  min-width: 36px; padding: .45rem .7rem; text-align: center;
  border: 1px solid var(--ligne); border-radius: var(--r-petit);
  font-size: var(--t-petit); font-weight: 600; text-decoration: none; color: var(--encre);
}
.pagination a:hover { background: var(--bleu-voile); border-color: var(--bleu); color: var(--bleu-fonce); }
.pagination .courante { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.pagination .ellipse { border-color: transparent; }


/* ==========================================================================
   7. Actions d'un écran : imprimer, exporter
   ========================================================================== */
.admin-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
@media (max-width: 860px) { .admin-actions { margin-left: 0; flex: 1 1 100%; } }
.admin-actions .btn { white-space: nowrap; }
.admin-actions .fa { width: 14px; height: 14px; }
.barre-filtres .btn .fa { width: 13px; height: 13px; }

/* ==========================================================================
   8. Impression
   On ne garde que le contenu : ni colonne, ni en-tête, ni filtres, ni
   bandeau de démonstration. Les tableaux ne doivent pas couper une ligne
   au milieu d'une page.
   ========================================================================== */
@media print {
  @page { margin: 12mm; size: A4 landscape; }

  body.admin { background: #fff; color: #000; }
  .admin-cote, .admin-voile, .admin-burger, .admin-compte,
  .admin-demo, .admin-pied, .barre-filtres, .admin-actions,
  .pagination, .skip-link, .champ-statut, .formulaire-mouvement { display: none !important; }

  .admin-cadre { display: block; }
  .admin-entete { position: static; border-bottom: 2px solid #000; padding: 0 0 8mm; }
  .admin-contenu { padding: 0; }

  .bloc { border: 0; padding: 0; background: none; }
  .bloc + .bloc { margin-top: 8mm; }
  .table-enveloppe { overflow: visible; }
  .table { font-size: 9pt; }
  .table th { border-bottom: 1.5px solid #000; }
  .table td { border-bottom: .5px solid #999; }
  .table tr { break-inside: avoid; }
  .table thead { display: table-header-group; }   /* l'en-tête se répète à chaque page */
  .etiquette-statut { border: .5px solid #666; background: none !important; color: #000 !important; }
  .grille-indicateurs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4mm; }
  .indicateur { border: .5px solid #999; padding: 3mm; }
  .indicateur .ico { display: none; }
  a { text-decoration: none; color: #000; }

  /* Bandeau d'impression, masqué à l'écran */
  .entete-impression { display: block !important; margin-bottom: 6mm; font-size: 9pt; }
}
.entete-impression { display: none; }

.admin-barre-page { display: flex; justify-content: flex-end; margin-bottom: var(--e3); }


/* ==========================================================================
   9. Tableaux sur petit écran

   Un tableau de huit colonnes est illisible sur un téléphone, et le faire
   défiler horizontalement oblige à des allers-retours pour lire une seule
   ligne. Chaque ligne devient donc une fiche, avec l'intitulé de colonne
   repris devant la valeur, via l'attribut data-libelle posé sur les cellules.
   ========================================================================== */
@media (max-width: 760px) {
  .table-enveloppe { overflow-x: visible; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tfoot { display: block; }

  .table tr {
    border: 1px solid var(--ligne); border-radius: var(--r);
    padding: var(--e2); margin-bottom: var(--e2);
    background: var(--papier);
  }
  .table tr:hover td { background: none; }

  .table td {
    display: grid; grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr);
    gap: .6rem; align-items: baseline;
    padding: .4rem 0; border-bottom: 1px dashed var(--filet);
    text-align: left;
  }
  .table td:last-child { border-bottom: 0; }
  .table td.nombre { text-align: left; }

  .table td[data-libelle]::before {
    content: attr(data-libelle);
    font-size: var(--t-micro); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--encre-tenue);
  }
  /* Une cellule sans intitulé occupe toute la largeur : c'est le cas de la
     première, qui porte le nom de la ligne. */
  .table td:not([data-libelle]) { grid-template-columns: 1fr; }
  .table td:first-child { font-size: 1rem; font-weight: 600; padding-top: 0; }

  .champ-nombre, .champ-statut { width: 100%; }
}