/*
 * super-admin.css — la console de la plateforme (/super-admin).
 *
 * Elle prend le registre de tokens.css — neutre profond, accent minimal, un seul bleu pour ce sur
 * quoi on agit — plutôt que l'orange et le verre du planning : c'est un outil d'administration,
 * lu longtemps, où la couleur ne doit dire qu'un ÉTAT (succès, attention, alerte), toujours doublé
 * d'un texte. Aucune couleur n'est écrite ici hors des jetons d'état ci-dessous.
 *
 * Feuille écrite à la main, sans Tailwind : la politique de sécurité de la page interdit les
 * styles en ligne, et le Tailwind « play » en injecte. Tous les fonds sont OPAQUES : l'analyse de
 * contraste de SonarCloud juge un rgba() comme s'il était plein.
 */

:root {
    --info: #1D4E89;
    --info-voile: #E7EFF9;
    --attention: #7A4B00;
    --attention-voile: #FCF1DC;
    --largeur-nav: 264px;
}

.dark {
    --info: #9CC2F5;
    --info-voile: #16263D;
    --attention: #F2C46D;
    --attention-voile: #33270F;
}

body.sa {
    margin: 0;
    min-height: 100vh;
    background: var(--voile);
    color: var(--encre);
    font-family: var(--police-texte);
    font-size: var(--taille-base);
    line-height: var(--hauteur-texte);
}

.sa h1, .sa h2, .sa h3, .sa p, .sa ul, .sa ol, .sa dl, .sa dd { margin: 0; }
.sa code { font-family: var(--police-chiffres); font-size: .92em; }
.sa svg.lucide { width: 18px; height: 18px; flex: none; }

.sa-evitement {
    position: absolute;
    left: var(--espace-4);
    top: -100px;
    z-index: 500;
    padding: var(--espace-2) var(--espace-4);
    background: var(--accent);
    color: var(--accent-contraste);
    border-radius: var(--rayon-sm);
}
.sa-evitement:focus { top: var(--espace-4); }

.sa-pile { display: flex; flex-direction: column; gap: var(--espace-4); }
.sa-pile > .lien, .sa-flux > .lien { align-self: flex-start; }
.sa-aide { color: var(--encre-attenuee); font-size: var(--taille-sm); }
.sa-etape { font-size: var(--taille-md); font-weight: var(--graisse-forte); color: var(--encre-forte); }

/* --- Marque ----------------------------------------------------------------------------------- */
.sa-marque { display: flex; align-items: center; gap: var(--espace-3); }
.sa-marque__logo {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--rayon-md);
    background: var(--accent);
    color: var(--accent-contraste);
}
.sa-marque__produit { font-size: var(--taille-xs); color: var(--encre-attenuee); letter-spacing: var(--interlettre-menu); text-transform: uppercase; }
.sa-marque__titre { font-size: var(--taille-lg); font-weight: var(--graisse-forte); color: var(--encre-forte); letter-spacing: var(--interlettre-titre); line-height: var(--hauteur-serree); }

/* --- Connexion -------------------------------------------------------------------------------- */
.sa-connexion {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espace-6);
    padding: var(--espace-6) var(--espace-4);
}
.sa-connexion__carte {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: var(--espace-5);
    padding: var(--espace-8);
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-xl);
    box-shadow: var(--ombre-2);
}
.sa-connexion__intro { color: var(--encre-attenuee); font-size: var(--taille-sm); }
.sa-code { font-family: var(--police-chiffres); font-size: var(--taille-lg); letter-spacing: .18em; text-align: center; }
.sa-qr {
    align-self: center;
    width: 208px;
    height: 208px;
    padding: var(--espace-2);
    background: #FFFFFF;
    border: 1px solid var(--trait);
    border-radius: var(--rayon-md);
}
.sa-qr svg { width: 100%; height: 100%; display: block; }
.sa-secret { word-break: break-all; text-align: center; }
.sa-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace-2) var(--espace-6);
    padding: var(--espace-4) var(--espace-4) var(--espace-4) var(--espace-8);
    background: var(--papier-enfonce);
    border-radius: var(--rayon-md);
    font-size: var(--taille-base);
}
.sa-case { display: flex; align-items: center; gap: var(--espace-2); font-size: var(--taille-sm); }
.sa-case input { width: 18px; height: 18px; }
.sa-pied { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espace-4); font-size: var(--taille-xs); }
.sa-pied a { color: var(--encre-attenuee); }

/* --- Charpente de la console ------------------------------------------------------------------ */
.sa-console { display: grid; grid-template-columns: var(--largeur-nav) minmax(0, 1fr); min-height: 100vh; }
.sa-nav {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--espace-6);
    padding: var(--espace-5) var(--espace-4);
    background: var(--papier);
    border-right: 1px solid var(--trait);
    overflow-y: auto;
}
.sa-marque--nav .sa-marque__titre { font-size: var(--taille-md); }
.sa-nav__liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sa-nav__lien {
    display: flex;
    align-items: center;
    gap: var(--espace-3);
    width: 100%;
    min-height: 44px;
    padding: var(--espace-2) var(--espace-3);
    border: 0;
    border-radius: var(--rayon-sm);
    background: transparent;
    color: var(--encre-attenuee);
    font: inherit;
    font-size: var(--taille-sm);
    font-weight: var(--graisse-moyenne);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.sa-nav__lien:hover { background: var(--papier-enfonce); color: var(--encre); }
.sa-nav__lien[aria-current="page"] { background: var(--accent-voile); color: var(--accent); font-weight: var(--graisse-appuyee); }
.sa-nav__pied { margin-top: auto; display: flex; flex-direction: column; gap: var(--espace-3); }
.sa-operateur { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); font-size: var(--taille-sm); word-break: break-all; }
.sa-voile { display: none; }

.sa-principal { min-width: 0; display: flex; flex-direction: column; }
.sa-barre {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--espace-3);
    padding: var(--espace-3) var(--espace-6);
    background: var(--voile);
    border-bottom: 1px solid var(--trait);
}
.sa-barre__titre { flex: 1; font-size: var(--taille-lg); font-weight: var(--graisse-forte); color: var(--encre-forte); letter-spacing: var(--interlettre-titre); }
.sa-barre .sa-barre__menu { display: none; }
.sa-icone-bouton {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--trait);
    border-radius: var(--rayon-sm);
    background: var(--papier);
    color: var(--encre);
    cursor: pointer;
}
.sa-icone-bouton:hover { border-color: var(--trait-fort); }
.sa-contenu { width: 100%; max-width: 1280px; padding: var(--espace-6); outline: none; }
.sa-flux { display: flex; flex-direction: column; gap: var(--espace-6); }
.sa-flux:empty { display: none; }
.sa-vue { display: flex; flex-direction: column; gap: var(--espace-6); }
.sa-entete-vue { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-3); }
.sa-bouton-court { width: auto; }

/* --- Panneaux, fiches ------------------------------------------------------------------------- */
.sa-panneau {
    display: flex;
    flex-direction: column;
    gap: var(--espace-4);
    padding: var(--espace-5);
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg);
}
.sa-panneau__titre { font-size: var(--taille-md); font-weight: var(--graisse-forte); color: var(--encre-forte); }
.sa-panneau--a-venir { border-style: dashed; }
.sa-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--espace-6); align-items: start; }
.sa-def { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--espace-2) var(--espace-4); font-size: var(--taille-sm); }
.sa-def dt { color: var(--encre-attenuee); }
.sa-def dd { color: var(--encre); overflow-wrap: anywhere; }
.sa-liste { padding-left: var(--espace-5); display: flex; flex-direction: column; gap: var(--espace-1); font-size: var(--taille-sm); }
.sa-arbre { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: var(--espace-2); font-size: var(--taille-sm); }
.sa-arbre ul { list-style: none; padding-left: var(--espace-5); border-left: 1px solid var(--trait); margin-top: var(--espace-1); display: flex; flex-direction: column; gap: var(--espace-1); }
.sa-fil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); }
.sa-fiche__entete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--espace-4); }
.sa-fiche__titre { font-size: var(--taille-xl); font-weight: var(--graisse-forte); color: var(--encre-forte); letter-spacing: var(--interlettre-titre); line-height: var(--hauteur-serree); }
.sa-actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); justify-content: flex-end; }
.sa-actions .bouton { width: auto; }
.sa-actions .sa-fil { flex-wrap: nowrap; }
.sa-champ-jours { width: 88px; text-align: right; }
.sa-alertes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--espace-2); }
.sa-alertes li {
    display: flex;
    gap: var(--espace-2);
    padding: var(--espace-3) var(--espace-4);
    border-radius: var(--rayon-sm);
    background: var(--attention-voile);
    color: var(--attention);
    font-size: var(--taille-sm);
}

/* --- Indicateurs ------------------------------------------------------------------------------ */
.sa-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--espace-4); }
.sa-indicateur {
    display: flex;
    flex-direction: column;
    gap: var(--espace-2);
    padding: var(--espace-4) var(--espace-5);
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg);
}
.sa-indicateur__libelle { font-size: var(--taille-sm); color: var(--encre-attenuee); font-weight: var(--graisse-moyenne); }
.sa-indicateur__valeur { font-family: var(--police-chiffres); font-size: var(--taille-2xl); font-weight: var(--graisse-appuyee); color: var(--encre-forte); line-height: 1.1; }
.sa-indicateur__unite { font-family: var(--police-texte); font-size: var(--taille-sm); font-weight: var(--graisse-normale); color: var(--encre-attenuee); }
.sa-indicateur__meta { font-size: var(--taille-xs); color: var(--encre-faible); }
.sa-indicateur--absent { background: var(--papier-enfonce); border-style: dashed; }
.sa-indicateur--absent .sa-indicateur__valeur { font-size: var(--taille-md); color: var(--encre-attenuee); }

/* --- Pastilles d'état : toujours un texte, la couleur ne fait que le doubler ------------------- */
.pastille {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-1);
    padding: 2px var(--espace-2);
    border-radius: var(--rayon-plein);
    font-size: var(--taille-xs);
    font-weight: var(--graisse-appuyee);
    white-space: nowrap;
}
.pastille--neutre { background: var(--papier-enfonce); color: var(--encre-attenuee); }
.pastille--info { background: var(--info-voile); color: var(--info); }
.pastille--succes { background: var(--succes-voile); color: var(--succes); }
.pastille--attention { background: var(--attention-voile); color: var(--attention); }
.pastille--alerte { background: var(--alerte-voile); color: var(--alerte); }

/* --- Barres d'outils, tableaux, pagination ---------------------------------------------------- */
.sa-outils { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espace-3); }
.sa-outils .champ { min-width: 160px; }
.sa-outils__recherche { flex: 1 1 240px; }
.sa-etiquette-courte { font-size: var(--taille-xs); }
.sa-tableau-cadre { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon-lg); overflow: hidden; }
.sa-table { width: 100%; border-collapse: collapse; font-size: var(--taille-sm); }
.sa-table th {
    padding: var(--espace-3) var(--espace-4);
    text-align: left;
    font-size: var(--taille-xs);
    font-weight: var(--graisse-appuyee);
    letter-spacing: var(--interlettre-menu);
    text-transform: uppercase;
    color: var(--encre-attenuee);
    background: var(--papier-enfonce);
    border-bottom: 1px solid var(--trait);
}
.sa-table td { padding: var(--espace-3) var(--espace-4); border-bottom: 1px solid var(--trait); vertical-align: top; }
.sa-table tr:last-child td { border-bottom: 0; }
.sa-table tbody tr[data-entreprise] { cursor: pointer; }
.sa-table tbody tr[data-entreprise]:hover td { background: var(--papier-enfonce); }
.sa-table__principal { font-weight: var(--graisse-appuyee); color: var(--encre-forte); }
.sa-table__secondaire { display: block; font-size: var(--taille-xs); color: var(--encre-attenuee); }
.sa-lien-ligne { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); font-weight: var(--graisse-appuyee); cursor: pointer; text-align: left; }
.sa-lien-ligne:hover { text-decoration: underline; }
.sa-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-3); font-size: var(--taille-sm); color: var(--encre-attenuee); }
.sa-pagination:empty { display: none; }
.sa-pagination .bouton { width: auto; min-height: 36px; padding: var(--espace-1) var(--espace-3); }

/* --- États : chargement, vide, erreur --------------------------------------------------------- */
.sa-etat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espace-3);
    padding: var(--espace-10) var(--espace-4);
    text-align: center;
    color: var(--encre-attenuee);
    background: var(--papier);
    border: 1px dashed var(--trait-fort);
    border-radius: var(--rayon-lg);
    font-size: var(--taille-sm);
}
.sa-etat--erreur { border-style: solid; border-color: var(--alerte); background: var(--alerte-voile); color: var(--alerte); }
.sa-rouet {
    width: 24px;
    height: 24px;
    border: 3px solid var(--trait-fort);
    border-top-color: var(--accent);
    border-radius: var(--rayon-plein);
    animation: rouet 700ms linear infinite;
}

/* --- Fenêtres --------------------------------------------------------------------------------- */
.sa-dialogue {
    width: calc(100% - 32px);
    max-width: 460px;
    max-height: calc(100vh - 32px);
    padding: var(--espace-6);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-xl);
    background: var(--papier);
    color: var(--encre);
    box-shadow: var(--ombre-3);
}
.sa-dialogue--large { max-width: 640px; }
.sa-dialogue::backdrop { background: rgb(11 15 19 / 55%); }
.sa-dialogue__titre { font-size: var(--taille-lg); font-weight: var(--graisse-forte); color: var(--encre-forte); }
.sa-groupe { border: 1px solid var(--trait); border-radius: var(--rayon-md); padding: var(--espace-4); display: flex; flex-direction: column; gap: var(--espace-4); }
.sa-groupe legend { padding: 0 var(--espace-2); font-size: var(--taille-sm); font-weight: var(--graisse-appuyee); }

.sa-annonce {
    position: fixed;
    left: 50%;
    bottom: var(--espace-6);
    z-index: 400;
    max-width: min(92vw, 560px);
    transform: translateX(-50%);
    padding: var(--espace-3) var(--espace-5);
    border-radius: var(--rayon-md);
    background: var(--encre-forte);
    color: var(--papier);
    font-size: var(--taille-sm);
    box-shadow: var(--ombre-3);
}
.sa-annonce:empty { display: none; }

/* --- Téléphone et tablette -------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .sa-console { grid-template-columns: minmax(0, 1fr); }
    .sa-nav {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: min(86vw, var(--largeur-nav));
        transform: translateX(-100%);
        transition: transform var(--duree) var(--courbe);
        box-shadow: var(--ombre-3);
    }
    .sa-nav--ouverte { transform: none; }
    .sa-voile:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 50; background: rgb(11 15 19 / 45%); }
    .sa-barre { padding: var(--espace-3) var(--espace-4); }
    .sa-barre .sa-barre__menu { display: grid; }
    .sa-contenu { padding: var(--espace-4); }
}

@media (max-width: 719px) {
    .sa-connexion__carte { padding: var(--espace-6) var(--espace-5); }
    .sa-barre__titre { font-size: var(--taille-md); }
    .sa-colonnes { grid-template-columns: minmax(0, 1fr); }
    .sa-def { grid-template-columns: minmax(0, 1fr); gap: 0 var(--espace-4); }
    .sa-def dd { margin-bottom: var(--espace-2); }
    /* Un tableau devient une pile de cartes : chaque cellule porte son en-tête (data-libelle). */
    .sa-table thead { display: none; }
    .sa-table, .sa-table tbody, .sa-table tr, .sa-table td { display: block; width: 100%; }
    .sa-table tr { padding: var(--espace-3) var(--espace-4); border-bottom: 1px solid var(--trait); }
    .sa-table td { display: flex; justify-content: space-between; gap: var(--espace-4); padding: var(--espace-1) 0; border: 0; text-align: right; }
    .sa-table td::before { content: attr(data-libelle); color: var(--encre-attenuee); font-size: var(--taille-xs); text-align: left; }
    .sa-table td[data-libelle=""]::before { content: none; }
    .sa-codes { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .sa-nav, .sa-nav__lien { transition: none; }
    .sa-rouet { animation-duration: 2s; }
}