/* Charte neutre. Seul le logo Compressport est repris. */
:root {
  --fond: #f6f7f9;
  --surface: #ffffff;
  --bordure: #e2e5ea;
  --bordure-forte: #c9ced6;
  --texte: #1f2328;
  --texte-doux: #5b6470;
  --accent: #2f5bd3;
  --accent-fonce: #2448ad;
  --accent-clair: #e8eefc;
  --ok: #1a7f37;
  --ok-clair: #e6f4ea;
  --attention: #b26a00;
  --attention-clair: #fdf1dc;
  --alerte: #c62828;
  --alerte-clair: #fdeaea;
  --neutre-clair: #eef0f3;
  --rayon: 6px;
  --ombre: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --police: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--police); font-size: 14px; line-height: 1.45; color: var(--texte); background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; font-weight: 600; margin: 0 0 16px; }
h2 { font-size: 16px; font-weight: 600; margin: 24px 0 10px; }
h3 { font-size: 14px; font-weight: 600; margin: 16px 0 8px; }
.chargement { padding: 40px; color: var(--texte-doux); }
.masque { display: none !important; }
.doux { color: var(--texte-doux); }
.nombre { font-variant-numeric: tabular-nums; }

/* --- Mise en page ----------------------------------------------------------------- */
.mise-en-page { display: flex; min-height: 100vh; }
.menu {
  width: 220px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--bordure);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.menu .marque { padding: 18px 16px 14px; border-bottom: 1px solid var(--bordure); }
.menu .marque img { height: 48px; display: block; }
.menu .marque .sous-titre { margin-top: 6px; font-size: 12px; color: var(--texte-doux); letter-spacing: .02em; }
.menu nav { padding: 10px 8px; flex: 1; overflow-y: auto; }
.menu nav a {
  display: block; padding: 8px 10px; border-radius: var(--rayon); color: var(--texte); font-weight: 500; margin-bottom: 2px;
}
.menu nav a:hover { background: var(--neutre-clair); text-decoration: none; }
.menu nav a.actif { background: var(--accent-clair); color: var(--accent-fonce); }
.menu .compte { padding: 12px 16px; border-top: 1px solid var(--bordure); font-size: 13px; }
.menu .compte .nom { font-weight: 600; }
.contenu { flex: 1; min-width: 0; padding: 24px 32px 48px; }
.entete { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.entete h1 { margin: 0; flex: 1; }
.fil { font-size: 13px; margin-bottom: 6px; }

/* --- Boutons et champs ------------------------------------------------------------- */
button, .bouton {
  font: inherit; font-weight: 500; border: 1px solid var(--bordure-forte); background: var(--surface); color: var(--texte);
  padding: 7px 12px; border-radius: var(--rayon); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
button:hover, .bouton:hover { background: var(--neutre-clair); text-decoration: none; }
button.principal, .bouton.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
button.principal:hover, .bouton.principal:hover { background: var(--accent-fonce); }
button.danger { color: var(--alerte); border-color: #e9b4b4; }
button.danger:hover { background: var(--alerte-clair); }
button.lien { border: none; background: none; color: var(--accent); padding: 0; }
button:disabled { opacity: .55; cursor: default; }
input, select, textarea {
  font: inherit; color: inherit; border: 1px solid var(--bordure-forte); border-radius: var(--rayon);
  padding: 7px 9px; background: var(--surface); width: 100%;
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
input[type=checkbox] { width: auto; }
textarea { min-height: 70px; resize: vertical; }
label { display: block; font-weight: 500; font-size: 13px; margin-bottom: 4px; }

/* --- Cartes, bandeaux, badges ------------------------------------------------------ */
.carte > h2:first-child { margin-top: 0; }
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px; }
.bandeau { padding: 10px 12px; border-radius: var(--rayon); margin-bottom: 12px; }
.bandeau.erreur { background: var(--alerte-clair); color: var(--alerte); }
.bandeau.avertissement { background: var(--attention-clair); color: #7a4800; }
.bandeau.succes { background: var(--ok-clair); color: var(--ok); }
.bandeau.info { background: var(--accent-clair); color: var(--accent-fonce); }
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--neutre-clair); color: var(--texte-doux); white-space: nowrap;
}
.badge.ok { background: var(--ok-clair); color: var(--ok); }
.badge.attention { background: var(--attention-clair); color: #7a4800; }
.badge.alerte { background: var(--alerte-clair); color: var(--alerte); }
.badge.info { background: var(--accent-clair); color: var(--accent-fonce); }

/* --- Listes -------------------------------------------------------------------------- */
.barre-outils { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.barre-outils input[type=search] { width: 260px; }
.barre-outils select { width: auto; min-width: 140px; }
.barre-outils .espace { flex: 1; }
.compteur { font-size: 13px; color: var(--texte-doux); }
.tableau-conteneur { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--bordure); white-space: nowrap; }
th { font-size: 12px; font-weight: 600; color: var(--texte-doux); background: #fafbfc; position: sticky; top: 0; user-select: none; }
th.triable { cursor: pointer; }
th.triable:hover { color: var(--texte); }
th .fleche { margin-left: 4px; }
tbody tr:nth-child(even) { background: #fcfcfd; }
tbody tr.cliquable { cursor: pointer; }
tbody tr.cliquable:hover { background: var(--accent-clair); }
td.vide { text-align: center; color: var(--texte-doux); padding: 24px; }

/* --- Formulaires ---------------------------------------------------------------------- */
.formulaire { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; }
.formulaire .champ.large { grid-column: 1 / -1; }
.formulaire .champ.case label { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.formulaire .actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 4px; }

/* --- Onglets --------------------------------------------------------------------------- */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bordure); margin-bottom: 16px; flex-wrap: wrap; }
.onglets button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 12px; color: var(--texte-doux); }
.onglets button.actif { color: var(--accent-fonce); border-bottom-color: var(--accent); }

/* --- Fiche (définition) ---------------------------------------------------------------- */
.definitions { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.definitions dt { color: var(--texte-doux); }
.definitions dd { margin: 0; }

/* --- Tableau de bord ------------------------------------------------------------------- */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.indicateurs { list-style: none; margin: 0; padding: 0; }
.indicateurs li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--bordure); }
.indicateurs li:last-child { border-bottom: none; }
.indicateurs .valeur { font-weight: 600; font-variant-numeric: tabular-nums; }
.chiffre-cle { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Connexion -------------------------------------------------------------------------- */
.ecran-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ecran-connexion .carte { width: 100%; max-width: 380px; padding: 28px; }
.ecran-connexion img { height: 56px; display: block; margin: 0 auto 8px; }
.ecran-connexion .sous-titre { text-align: center; color: var(--texte-doux); margin-bottom: 20px; }
.ecran-connexion .champ { margin-bottom: 12px; }
.ecran-connexion button { width: 100%; justify-content: center; margin-top: 4px; }

/* --- Dialogue ----------------------------------------------------------------------------- */
dialog { border: none; border-radius: 8px; padding: 0; box-shadow: 0 10px 30px rgba(16, 24, 40, .25); width: min(560px, 92vw); }
dialog::backdrop { background: rgba(16, 24, 40, .35); }
dialog .corps { padding: 20px; }
dialog .pied { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--bordure); background: #fafbfc; }

/* --- Aide (Markdown) -------------------------------------------------------------------- */
.markdown { max-width: 860px; background: var(--surface); padding: 8px 24px 24px; border: 1px solid var(--bordure); border-radius: var(--rayon); }
.markdown code { background: var(--neutre-clair); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.markdown pre { background: var(--neutre-clair); padding: 10px; border-radius: var(--rayon); overflow-x: auto; }

@media (max-width: 800px) {
  .mise-en-page { flex-direction: column; }
  .menu { width: 100%; height: auto; position: static; }
  .menu nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .contenu { padding: 16px; }
}