/* ==========================================================================
   Bloombast — identité visuelle (socle commun à TOUS les modules)
   Direction : modèle B, police et couleurs « Graphite ».
   Règle d'or : un module n'écrit JAMAIS de couleur, de police ou de rayon en dur.
   Il utilise les variables ci-dessous et les composants de ce fichier.
   Référence vivante : /guide/ (réservé à l'admin). Règles : docs/identite-visuelle.md
   ========================================================================== */

/* ---------- 1. Polices (hébergées sur le serveur, aucune dépendance externe) ---------- */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.171469829772.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.c58b0d474d13.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- 2. Jetons (tokens) : thème CLAIR ---------- */
:root {
  /* Couleurs de base */
  --fond: #F4F5F7;            /* arrière-plan de la page */
  --surface: #FFFFFF;         /* cartes, tuiles, menus */
  --surface-2: #EEF0F3;       /* survol, zones en retrait */
  --bordure: #E2E4EA;         /* filets et contours */
  --bordure-forte: #C9CCD6;   /* contours d'éléments inactifs */
  --texte: #0B0B0F;           /* texte principal */
  --texte-doux: #5D6170;      /* texte secondaire (contraste AA) */

  /* Accent unique de la marque */
  --accent: #3355FF;          /* remplissages : pastilles actives, boutons, logo */
  --accent-texte: #3355FF;    /* accent utilisé COMME TEXTE (lisible sur le fond) */
  --sur-accent: #FFFFFF;      /* texte posé SUR l'accent */
  --accent-doux: #E8ECFF;     /* fond teinté léger (sélection, alerte info) */

  /* Sens : réservés aux chiffres et messages, jamais à la décoration */
  --succes: #1A7F37;          /* hausse, gain, réussite */
  --erreur: #CF222E;          /* baisse, perte, erreur */
  --attention: #9A6700;       /* avertissement */

  /* Graphiques : 8 couleurs catégorielles, dans cet ordre */
  --graph-1: #3355FF; --graph-2: #E8590C; --graph-3: #12A150; --graph-4: #8E44EC;
  --graph-5: #0E8C9F; --graph-6: #D6336C; --graph-7: #B08800; --graph-8: #5D6170;

  /* Typographie */
  --police: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --t-xs: .75rem;   /* 12 px : étiquettes, états */
  --t-sm: .8125rem; /* 13 px : titres de section, légendes */
  --t-md: .9375rem; /* 15 px : texte courant */
  --t-lg: 1rem;     /* 16 px : noms de tuiles */
  --t-xl: 1.25rem;  /* 20 px : titres de carte */
  --t-2xl: 1.75rem; /* 28 px : titre de page (mobile) */
  --t-3xl: 2.5rem;  /* 40 px : titre de page (ordinateur) */
  --interlettre-titre: -0.035em;

  /* Espacements : multiples de 4 px */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e7: 28px; --e8: 32px; --e10: 40px; --e12: 48px;

  /* Formes */
  --rayon-petit: 8px;   /* champs, petits boutons */
  --rayon: 10px;        /* boutons, menus */
  --rayon-carte: 16px;  /* cartes et tuiles */
  --rayon-plein: 999px; /* pastilles, badges */
  --cible: 44px;        /* taille minimale d'une zone cliquable */

  --menu-largeur: 240px;
  --contenu-max: 2200px;      /* le contenu occupe toute la largeur (limite seulement sur écrans géants) */
  --tuile-min: 220px;         /* largeur minimale d'une tuile : le nombre de colonnes s'adapte à l'écran */
  color-scheme: light;
}

/* ---------- 3. Jetons : thème SOMBRE (appareil en sombre, sauf choix « clair ») ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0B0B0F; --surface: #15161C; --surface-2: #1C1D24; --bordure: #26272F; --bordure-forte: #3A3C47;
    --texte: #F4F5F7; --texte-doux: #9A9DAA;
    --accent: #3355FF; --accent-texte: #8299FF; --sur-accent: #FFFFFF; --accent-doux: #1A2047;
    --succes: #3FB950; --erreur: #F85149; --attention: #D29922;
    --graph-1: #6F8BFF; --graph-2: #FF8A4C; --graph-3: #3FD27F; --graph-4: #B48CFF;
    --graph-5: #3FC7D9; --graph-6: #FF6FA0; --graph-7: #E3C14D; --graph-8: #9A9DAA;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #0B0B0F; --surface: #15161C; --surface-2: #1C1D24; --bordure: #26272F; --bordure-forte: #3A3C47;
  --texte: #F4F5F7; --texte-doux: #9A9DAA;
  --accent: #3355FF; --accent-texte: #8299FF; --sur-accent: #FFFFFF; --accent-doux: #1A2047;
  --succes: #3FB950; --erreur: #F85149; --attention: #D29922;
  --graph-1: #6F8BFF; --graph-2: #FF8A4C; --graph-3: #3FD27F; --graph-4: #B48CFF;
  --graph-5: #3FC7D9; --graph-6: #FF6FA0; --graph-7: #E3C14D; --graph-8: #9A9DAA;
  color-scheme: dark;
}

/* ---------- 4. Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); font-size: var(--t-md); line-height: 1.5; }
a { color: var(--accent-texte); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
h1 { font-size: var(--t-2xl); font-weight: 700; letter-spacing: var(--interlettre-titre); }
h2 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; }
h3 { font-size: var(--t-lg); font-weight: 600; }
p { margin: 0 0 var(--e3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mono, .nombre { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.discret { color: var(--texte-doux); font-size: var(--t-sm); }
.positif { color: var(--succes); } .negatif { color: var(--erreur); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 5. Mise en page : menu latéral (ordinateur) / onglets en bas (mobile) ---------- */
.app { display: flex; min-height: 100vh; }
.menu-lateral {
  width: var(--menu-largeur); flex: none; padding: var(--e7) var(--e5); border-right: 1px solid var(--bordure);
  display: flex; flex-direction: column; gap: var(--e8); position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marque { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--t-xl); letter-spacing: -0.02em; color: var(--texte); }
.marque:hover { text-decoration: none; }
.marque svg { flex: none; }
.nav { display: flex; flex-direction: column; gap: var(--e1); }
/* Titre de groupe du menu (non cliquable) : petites capitales espacées en mono + filet, pour ne pas ressembler à un lien. */
.nav-titre { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e4); padding: 0 var(--e3) var(--e1); font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--texte-doux); cursor: default; user-select: none; }
.nav-titre::after { content: ""; flex: 1; height: 1px; background: var(--bordure); }
.nav a { min-height: var(--cible); padding: 0 var(--e3); border-radius: var(--rayon); display: flex; align-items: center; gap: var(--e3); color: var(--texte-doux); border: 1px solid transparent; }
.nav a:hover { text-decoration: none; color: var(--texte); background: var(--surface-2); }
.nav a { line-height: 1.25; padding-top: var(--e2); padding-bottom: var(--e2); text-wrap: balance; }
.nav-externe { flex: none; margin-left: auto; color: var(--texte-doux); }
.nav a[aria-current="page"] { background: var(--surface); border-color: var(--bordure); color: var(--texte); font-weight: 600; }
.compte { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--bordure); color: var(--texte); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--t-sm); }
.compte-nom { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.compte-nom strong { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compte-nom span { font-size: var(--t-xs); color: var(--texte-doux); }
.bouton-icone { width: var(--cible); height: var(--cible); flex: none; border-radius: var(--rayon); border: 1px solid var(--bordure); background: transparent; color: var(--texte); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.bouton-icone:hover { background: var(--surface-2); }
.icone-soleil { display: none; }
:root[data-theme="dark"] .icone-soleil { display: block; } :root[data-theme="dark"] .icone-lune { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icone-soleil { display: block; } :root:not([data-theme="light"]) .icone-lune { display: none; } }

.principal { flex: 1; min-width: 0; padding: var(--e10) clamp(var(--e6), 3.5vw, 64px) var(--e12); }
.principal-interieur { max-width: var(--contenu-max); }
.entete-mobile, .onglets-bas { display: none; }

@media (max-width: 900px) {
  .menu-lateral { display: none; }
  .entete-mobile { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 var(--e5); position: sticky; top: 0; z-index: 10; background: var(--fond); }
  .entete-mobile .marque { font-size: 19px; }
  .entete-mobile .avatar { width: 36px; height: 36px; }
  .app { flex-direction: column; }
  .principal { padding: var(--e1) var(--e5) calc(72px + var(--e6)); }
  .onglets-bas { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 72px; z-index: 10; justify-content: space-around; align-items: center; background: var(--surface); border-top: 1px solid var(--bordure); padding-bottom: env(safe-area-inset-bottom); }
  .onglets-bas a { min-width: 64px; min-height: var(--cible); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--texte-doux); }
  .onglets-bas a:hover { text-decoration: none; }
  .onglets-bas a[aria-current="page"] { color: var(--texte); font-weight: 600; }
}

/* Pages sans connexion (connexion, inscription…) : une colonne centrée */
.page-simple { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: var(--e10) var(--e5); gap: var(--e8); }
.page-simple > .contenu { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); padding: var(--e8); }
.page-simple > .contenu h1 { margin-bottom: var(--e3); }
@media (max-width: 520px) { .page-simple > .contenu { padding: var(--e6) var(--e5); } }
.page-simple .outils { display: flex; gap: var(--e3); align-items: center; }

/* ---------- 6. En-tête de page ou de module ---------- */
.entete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e6); flex-wrap: wrap; margin-bottom: var(--e7); }
.entete-page h1 { font-size: var(--t-3xl); }
.entete-page .sous-titre { margin: var(--e2) 0 0; color: var(--texte-doux); font-size: var(--t-md); }
.entete-page .actions { display: flex; gap: var(--e2); flex-wrap: wrap; }
@media (max-width: 900px) { .entete-page { margin-bottom: var(--e5); } .entete-page h1 { font-size: var(--t-2xl); } .entete-page .recherche { width: 100%; } }

/* ---------- 7. Sections et grilles ---------- */
.section { display: flex; flex-direction: column; gap: var(--e3); margin-bottom: var(--e7); }
.section-titre { font-size: var(--t-sm); font-weight: 600; color: var(--texte-doux); letter-spacing: 0; margin: 0; }
.grille-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tuile-min), 1fr)); gap: 14px; }
.grille, .grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e4); }
@media (max-width: 900px) { .grille-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* ---------- 8. Composants ---------- */
/* Carte : bloc de contenu générique */
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); padding: var(--e5) var(--e6); margin-bottom: var(--e4); }
.carte > h2:first-child, .carte > h3:first-child { margin-bottom: var(--e3); }

/* Tuile d'application (accueil) */
.tuile { height: 116px; padding: var(--e4) 18px; border-radius: var(--rayon-carte); background: var(--surface); border: 1px solid var(--bordure); display: flex; flex-direction: column; gap: var(--e2); color: var(--texte); }
a.tuile:hover { text-decoration: none; border-color: var(--bordure-forte); }
.tuile-haut { display: flex; justify-content: space-between; align-items: flex-start; }
/* Zone du nom : hauteur de 2 lignes. Un nom court est centré verticalement dans la zone,
   un nom long passe sur 2 lignes resserrées (au-delà : coupé proprement avec « … »). */
.tuile-nom { flex: 1; min-height: 0; display: flex; align-items: center; font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.01em; line-height: 1.15; }
.tuile-nom > span { text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
.tuile.inactive { cursor: default; }
@media (max-width: 900px) { .tuile { height: 104px; padding: var(--e3); border-radius: 14px; gap: 6px; } .tuile-nom { font-size: var(--t-md); line-height: 1.12; } }

/* Pastille : code de 2 lettres d'une application */
.pastille-app { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--t-sm); background: var(--accent); color: var(--sur-accent); font-weight: 500; }
.pastille-app.inactive { background: transparent; border: 1px solid var(--bordure-forte); color: var(--texte-doux); font-weight: 400; }
@media (max-width: 900px) { .pastille-app { width: 32px; height: 32px; font-size: var(--t-xs); } }
/* Pastille avec logo (ex. Not' caillou) + badge en coin (ex. engrenage = administration) */
.pastille-app { position: relative; flex-shrink: 0; }
.pastille-app.avec-icone img { width: 68%; height: 68%; object-fit: contain; }
.pastille-badge { position: absolute; right: 4%; bottom: 4%; width: 42%; height: 42%; border-radius: 50%; background: var(--accent); color: var(--sur-accent); display: flex; align-items: center; justify-content: center; }
.pastille-app.inactive .pastille-badge { background: var(--surface); color: var(--texte-doux); border: 1px solid var(--bordure-forte); }
.pastille-badge svg { width: 82%; height: 82%; }

/* État : Actif / Bientôt / Prévu */
.etat { font-size: var(--t-xs); font-weight: 600; color: var(--texte-doux); }
.etat.actif { color: var(--accent-texte); }

/* Badge : petite étiquette arrondie */
.badge { display: inline-flex; align-items: center; gap: var(--e1); font-family: var(--mono); font-size: var(--t-xs); padding: 1px var(--e2); border-radius: var(--rayon-plein); border: 1px solid var(--bordure); color: var(--texte-doux); }
.badge.accent { border-color: transparent; background: var(--accent-doux); color: var(--accent-texte); }

/* Indicateur chiffré (KPI) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e3); margin-bottom: var(--e4); }
.kpi { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); padding: var(--e4) var(--e5); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-lib { font-size: var(--t-xs); font-weight: 600; color: var(--texte-doux); }
.kpi-val { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi-cap { font-size: var(--t-xs); color: var(--texte-doux); }
.kpi-ecart { font-family: var(--mono); font-size: var(--t-xs); }
.kpi-ecart.bon { color: var(--succes); } .kpi-ecart.mauvais { color: var(--erreur); }

/* Boutons */
button, .bouton, input[type="submit"] {
  font: inherit; font-weight: 600; font-size: .875rem; cursor: pointer; min-height: var(--cible);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: 0 var(--e4); border-radius: var(--rayon); border: 1px solid var(--accent);
  background: var(--accent); color: var(--sur-accent);
}
.bouton:hover, button:hover { text-decoration: none; filter: brightness(1.08); }
.bouton.secondaire, button.secondaire { background: var(--surface); color: var(--texte); border-color: var(--bordure); }
.bouton.fantome, button.fantome { background: transparent; color: var(--texte); border-color: transparent; }
.bouton.danger, button.danger { background: var(--erreur); border-color: var(--erreur); color: #FFFFFF; }
.bouton.petit, button.petit { min-height: 32px; padding: 0 var(--e3); font-size: var(--t-xs); border-radius: var(--rayon-petit); }
button.lien { background: none; border: none; padding: 0; min-height: 0; color: var(--accent-texte); font-weight: 500; }
button:disabled, .bouton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }

/* Onglets d'un module */
.onglets { display: flex; gap: var(--e6); border-bottom: 1px solid var(--bordure); margin: 0 0 var(--e5); overflow-x: auto; }
.onglets a { padding: 10px 0; color: var(--texte-doux); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.onglets a:hover { color: var(--texte); text-decoration: none; }
.onglets a[aria-current="page"] { color: var(--texte); font-weight: 600; border-bottom-color: var(--accent); }

/* Formulaires */
form p, form .champ { margin-bottom: var(--e3); }
label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: var(--e1); }
input[type="email"], input[type="password"], input[type="text"], input[type="number"], input[type="search"],
input[type="date"], input[type="month"], input[type="url"], input[type="tel"], select, textarea {
  font: inherit; font-size: .9375rem; width: 100%; max-width: 440px; min-height: var(--cible);
  padding: 0 var(--e3); border-radius: var(--rayon); border: 1px solid var(--bordure); background: var(--surface); color: var(--texte);
}
textarea { padding: var(--e3); min-height: 96px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 18px; height: 18px; }
.recherche { display: flex; align-items: center; gap: 10px; height: var(--cible); padding: 0 14px; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--bordure); color: var(--texte-doux); width: 300px; max-width: 100%; }
.recherche input { border: none; background: transparent; min-height: 0; padding: 0; outline: none; }
.helptext, .help-text { display: block; color: var(--texte-doux); font-size: var(--t-xs); font-weight: 400; }
.errorlist { color: var(--erreur); padding-left: var(--e4); margin: var(--e1) 0; font-size: var(--t-sm); }

/* Tableaux */
.tableau { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--rayon-carte); background: var(--surface); margin-bottom: var(--e4); }
.tableau table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tableau th { text-align: left; font-size: var(--t-xs); font-weight: 600; color: var(--texte-doux); padding: 10px var(--e3); border-bottom: 1px solid var(--bordure-forte); background: var(--surface); position: sticky; top: 0; }
.tableau td { padding: 10px var(--e3); border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: none; }
.tableau tr:hover td { background: var(--surface-2); }
.tableau .montant, .tableau th.montant { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Messages */
.messages { list-style: none; padding: 0; margin: 0 0 var(--e4); display: flex; flex-direction: column; gap: var(--e2); }
.message { padding: var(--e3) var(--e4); border-radius: var(--rayon); border: 1px solid var(--bordure); background: var(--surface); font-size: .875rem; }
.message.success { border-color: var(--succes); } .message.error { border-color: var(--erreur); } .message.warning { border-color: var(--attention); } .message.info { border-color: var(--accent); }

/* Vide : rien à afficher */
.vide { color: var(--texte-doux); text-align: center; padding: var(--e8) var(--e4); }

.en-ligne { display: inline; margin: 0; }

/* Graphiques : conteneurs (ECharts dessine dedans) */
.graph { width: 100%; height: 320px; }