/*!
 * LumestraSocialMonitor - (c) 2026 Andre Frederic - Tous droits reserves.
 * Projet lumestra-socialmonitor - Logiciel proprietaire : voir les fichiers LICENSE et NOTICE.
 */
/* LumestraSocialMonitor — feuille de style unique, aucun CDN, compatible CSP stricte. */
:root {
    --fond: #f5f7fb;
    --surface: #ffffff;
    --surface-2: #eef1f7;
    --texte: #1d2433;
    --texte-discret: #5b6474;
    --bordure: #d8dde8;
    --primaire: #3451c6;
    --primaire-texte: #ffffff;
    --gain: #1a7f37;
    --gain-fond: #e3f5e8;
    --perte: #c9252c;
    --perte-fond: #fde8e8;
    --stable: #6b7280;
    --stable-fond: #eceef2;
    --attention: #a35a00;
    --attention-fond: #fff1db;
    --focus: #ffbf47;
    --ombre: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .06);
    --rayon: 10px;
    --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    color-scheme: light;
}
[data-theme="sombre"] {
    --fond: #11151d;
    --surface: #1a2029;
    --surface-2: #232b37;
    --texte: #e8ecf3;
    --texte-discret: #a9b2c2;
    --bordure: #333d4d;
    --primaire: #8ea2ff;
    --primaire-texte: #0d1120;
    --gain: #5fd47f;
    --gain-fond: #163323;
    --perte: #ff7b7f;
    --perte-fond: #3a1a1c;
    --stable: #a3aab8;
    --stable-fond: #2a313c;
    --attention: #ffb454;
    --attention-fond: #3a2a12;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --fond: #11151d; --surface: #1a2029; --surface-2: #232b37; --texte: #e8ecf3; --texte-discret: #a9b2c2;
        --bordure: #333d4d; --primaire: #8ea2ff; --primaire-texte: #0d1120; --gain: #5fd47f; --gain-fond: #163323;
        --perte: #ff7b7f; --perte-fond: #3a1a1c; --stable: #a3aab8; --stable-fond: #2a313c; --attention: #ffb454;
        --attention-fond: #3a2a12; --ombre: 0 1px 2px rgba(0, 0, 0, .4); color-scheme: dark;
    }
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: var(--police); background: var(--fond); color: var(--texte); line-height: 1.5; }
a { color: var(--primaire); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1 { font-size: 1.6rem; margin: 0 0 .75rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1rem 0 .5rem; }
code, pre { font-family: var(--mono); font-size: .9em; }
pre.code { background: var(--surface-2); padding: .75rem; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: -999px; top: 0; background: var(--primaire); color: var(--primaire-texte); padding: .5rem 1rem; z-index: 100; }
.lien-evitement:focus { left: .5rem; }
.icone { width: 1.1em; height: 1.1em; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.texte-discret { color: var(--texte-discret); }
.petit { font-size: .875rem; }

/* Mise en page */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.barre-laterale { background: var(--surface); border-right: 1px solid var(--bordure); padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.logo-texte { font-size: 1.05rem; letter-spacing: -.02em; white-space: nowrap; }
.logo-texte strong { color: var(--primaire); }
.marque { display: block; padding: .25rem .5rem 1rem; text-decoration: none; color: var(--texte); }
.nav-principale ul { list-style: none; margin: 0; padding: 0; }
.nav-principale a { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; border-radius: 8px; color: var(--texte); text-decoration: none; font-weight: 500; }
.nav-principale a:hover { background: var(--surface-2); }
.nav-principale a[aria-current="page"] { background: var(--primaire); color: var(--primaire-texte); }
.nav-principale .compteur { margin-left: auto; background: var(--perte); color: #fff; border-radius: 999px; font-size: .75rem; padding: 0 .45rem; }
.principal { padding: 1.25rem 1.5rem 3rem; min-width: 0; }
.entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.entete-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.bouton.menu-mobile { display: none; }
.conteneur-minimal { max-width: 860px; margin: 2rem auto; padding: 0 1rem; }
.marque-centre { text-align: center; margin-bottom: 1.25rem; }
.page-minimale .carte { padding: 1.5rem; }

/* Cartes et grilles */
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1rem 1.25rem; box-shadow: var(--ombre); margin-bottom: 1rem; }
.carte > h2:first-child, .carte > h3:first-child { margin-top: 0; }
.grille { display: grid; gap: 1rem; }
.grille-2 { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3 { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille-cartes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pleine-largeur { grid-column: 1 / -1; }
.kpi { display: flex; flex-direction: column; gap: .2rem; }
.kpi .libelle { color: var(--texte-discret); font-size: .875rem; }
.kpi .valeur { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .variation { font-weight: 600; }
.carte-reseau { position: relative; border-top: 4px solid var(--bordure); }
.carte-reseau .reseau { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.carte-reseau .reseau-nom { font-weight: 600; }
.carte-reseau .sparkline { margin-top: .4rem; }

/* Code couleur constant */
.gain { color: var(--gain); }
.perte { color: var(--perte); }
.stable { color: var(--stable); }
.pastille { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.pastille.gain { background: var(--gain-fond); }
.pastille.perte { background: var(--perte-fond); }
.pastille.stable { background: var(--stable-fond); }
.pastille.attention { background: var(--attention-fond); color: var(--attention); }
.pastille.info { background: var(--surface-2); color: var(--texte); }
.badge-score { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; height: 2rem; padding: 0 .5rem; border-radius: 8px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.badge-score.vert { background: #1a7f37; }
.badge-score.orange { background: #b35900; }
.badge-score.rouge { background: #c9252c; }
.badge-score.neutre { background: var(--stable); }
.badge-score.grand { font-size: 1.6rem; height: 3.2rem; min-width: 4rem; }

/* Tableaux */
.tableau-conteneur { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tableau th, .tableau td { padding: .55rem .6rem; border-bottom: 1px solid var(--bordure); text-align: left; vertical-align: middle; }
.tableau th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texte-discret); background: var(--surface); position: sticky; top: 0; }
.tableau td.nombre, .tableau th.nombre { text-align: right; }
.tableau tbody tr:hover { background: var(--surface-2); }
.tableau-compact th, .tableau-compact td { padding: .35rem .5rem; }
th[data-tri] { cursor: pointer; user-select: none; }
th[data-tri]:hover { color: var(--texte); }
th[aria-sort="ascending"]::after { content: " ▲"; }
th[aria-sort="descending"]::after { content: " ▼"; }

/* Formulaires */
.formulaire { display: grid; gap: .4rem; }
.formulaire fieldset { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .75rem 1rem 1rem; display: grid; gap: .4rem; margin: 0; }
.formulaire legend { font-weight: 600; padding: 0 .3rem; }
label { font-weight: 500; font-size: .92rem; }
input, select, textarea { font: inherit; color: var(--texte); background: var(--surface); border: 1px solid var(--bordure); border-radius: 8px; padding: .5rem .6rem; width: 100%; min-height: 2.5rem; }
textarea { min-height: 6rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; }
input[type="color"] { padding: .1rem; height: 2.5rem; }
label.case { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.aide { font-size: .85rem; color: var(--texte-discret); margin: -.1rem 0 .3rem; }
.erreur-champ { color: var(--perte); font-size: .875rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; align-items: center; }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.filtres > div { display: grid; gap: .2rem; }
.filtres input, .filtres select { min-width: 11rem; }
.formulaire-ligne { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; }
.formulaire-ligne > div { display: grid; gap: .2rem; flex: 1 1 8rem; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--bordure); background: var(--surface); color: var(--texte); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 2.5rem; }
.bouton:hover { background: var(--surface-2); }
.bouton-primaire { background: var(--primaire); border-color: var(--primaire); color: var(--primaire-texte); }
.bouton-primaire:hover { filter: brightness(1.08); background: var(--primaire); }
.bouton-danger { color: var(--perte); border-color: var(--perte); }
.bouton-danger:hover { background: var(--perte-fond); }
.bouton-petit { padding: .25rem .55rem; min-height: 2rem; font-size: .875rem; }
.bouton-lien { all: unset; color: var(--primaire); cursor: pointer; text-decoration: underline; }
.form-en-ligne { display: inline; }

/* Messages */
.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid transparent; }
.flash-succes { background: var(--gain-fond); color: var(--gain); border-color: var(--gain); }
.flash-erreur { background: var(--perte-fond); color: var(--perte); border-color: var(--perte); }
.flash-attention { background: var(--attention-fond); color: var(--attention); border-color: var(--attention); }
.flash-info { background: var(--surface-2); }
.vide { color: var(--texte-discret); font-style: italic; }

/* Info-bulles d'explication des scores */
.infobulle { position: relative; display: inline-block; }
.infobulle > button { all: unset; cursor: help; color: var(--texte-discret); border: 1px solid var(--bordure); border-radius: 50%; width: 1.2rem; height: 1.2rem; text-align: center; font-size: .75rem; line-height: 1.2rem; }
.infobulle > button:focus-visible { outline: 3px solid var(--focus); }
.infobulle .bulle { display: none; position: absolute; z-index: 20; left: 50%; transform: translateX(-50%); top: 1.6rem; width: 300px; background: var(--texte); color: var(--surface); padding: .6rem .75rem; border-radius: 8px; font-size: .85rem; font-weight: 400; box-shadow: var(--ombre); }
.infobulle:hover .bulle, .infobulle:focus-within .bulle { display: block; }

/* Jauges */
meter, progress { width: 100%; height: 1rem; }
.jauge { display: grid; gap: .2rem; }
.jauge .legende { display: flex; justify-content: space-between; font-size: .85rem; color: var(--texte-discret); }

/* Graphiques */
.graphique { position: relative; height: 300px; }
.graphique.petit { height: 200px; }
.sparkline { display: block; }
.sparkline.gain { color: var(--gain); }
.sparkline.perte { color: var(--perte); }
.sparkline.stable { color: var(--stable); }

/* Onglets */
.onglets { display: flex; gap: .25rem; border-bottom: 1px solid var(--bordure); margin-bottom: 1rem; flex-wrap: wrap; }
.onglets a { padding: .5rem .9rem; text-decoration: none; color: var(--texte-discret); border-bottom: 3px solid transparent; font-weight: 600; }
.onglets a[aria-current="page"] { color: var(--primaire); border-bottom-color: var(--primaire); }

/* Listes */
.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li { padding: .5rem 0; border-bottom: 1px solid var(--bordure); }
.liste-simple li:last-child { border-bottom: 0; }
.score-detail { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; }
.etiquette { display: inline-block; background: var(--surface-2); border-radius: 6px; padding: 0 .45rem; font-size: .8rem; margin-right: .25rem; }

.carte-erreur { text-align: center; }
.code-erreur { font-size: 3rem; font-weight: 800; color: var(--texte-discret); margin: 0; }
.qr { background: #fff; padding: 8px; display: inline-block; border-radius: 8px; }
.codes-secours { columns: 2; font-family: var(--mono); font-size: 1.05rem; }

/* Rapport en ligne */
.rapport-public { max-width: 1000px; margin: 0 auto; padding: 1.5rem; }
.rapport-entete { display: flex; align-items: center; gap: 1rem; border-bottom: 4px solid var(--primaire); padding-bottom: 1rem; margin-bottom: 1rem; }
.rapport-entete img { max-height: 64px; max-width: 200px; }

/* Responsive */
@media (max-width: 1100px) {
    .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .app { grid-template-columns: 1fr; }
    .barre-laterale { position: static; height: auto; display: none; }
    .barre-laterale.ouverte { display: block; }
    .bouton.menu-mobile { display: inline-flex; }
    .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; }
    .principal { padding: 1rem; }
    .kpi .valeur { font-size: 1.6rem; }
}

/* Impression propre */
@media print {
    .barre-laterale, .entete-actions, .menu-mobile, .actions, .filtres, form, .lien-evitement, .ne-pas-imprimer { display: none !important; }
    .app { display: block; }
    body { background: #fff; color: #000; }
    .carte { box-shadow: none; break-inside: avoid; border-color: #bbb; }
    a { color: #000; text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Mention de propriété */
.pied-de-page { text-align: center; font-size: .8rem; color: var(--texte-discret); padding: 1.5rem 1rem; }