/* ══════════════════════════════════════════════════════════════
   styles.css — Charte graphique de la plateforme
   Composants réutilisables : à utiliser plutôt que de répéter des
   classes Tailwind. Catalogue visuel : charte.html
   Couleurs : mêmes valeurs que tailwind-config.js
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
    --brand-50: #eef2f7;  --brand-100: #dce6ef; --brand-200: #b9ccdf; --brand-400: #6389ab;
    --brand-500: #3f6690; --brand-600: #2c4d72; --brand-700: #223c59; --brand-800: #1a2e45;
    --ok-50: #eaf2ee;     --ok-100: #d2e5da;    --ok-200: #a7cbb6;    --ok-700: #255440;
    --warn-50: #fbf0e6;   --warn-100: #f4dfc7;  --warn-200: #e8bd8e;  --warn-700: #833d11;
    --danger-50: #f7ebea; --danger-100: #eecfcc; --danger-200: #dca29c; --danger-600: #7f2b22; --danger-700: #64221b;
    --gris-50: #f9fafb;   --gris-100: #f3f4f6;  --gris-200: #e5e7eb;  --gris-300: #d1d5db;
    --gris-400: #9ca3af;  --gris-500: #6b7280;  --gris-600: #4b5563;  --gris-700: #374151;
    --gris-800: #1f2937;  --gris-900: #111827;
    --rayon: .5rem;
    --rayon-carte: .75rem;
}

/* ── Titres et textes ─────────────────────────────── */
.entete-page      { margin-bottom: 1.25rem; }
.titre-page       { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--gris-900); text-wrap: balance; }
.sous-titre-page  { font-size: .875rem; color: var(--gris-500); margin-top: .25rem; }
.titre-section    { font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; color: var(--gris-800); }
.titre-bloc       { font-size: .875rem; font-weight: 700; color: var(--gris-700); }
.texte-aide       { font-size: .875rem; color: var(--gris-500); }
.texte-vide       { font-size: .875rem; color: var(--gris-400); font-style: italic; }

/* ── Onglets ──────────────────────────────────────── */
.tab-active   { border-bottom-width: 2px; border-color: var(--brand-600); color: var(--brand-600); font-weight: 600; }
.tab-inactive { border-bottom-width: 2px; border-color: transparent; color: var(--gris-500); }
.tab-inactive:hover { color: var(--gris-700); border-color: var(--gris-300); }

/* ── Carte (bloc blanc) ───────────────────────────── */
.carte {
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--rayon-carte);
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}
.carte-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }

/* Élément de liste à l'intérieur d'une carte */
.element {
    background: var(--gris-50);
    border: 1px solid var(--gris-200);
    border-radius: var(--rayon);
    padding: .75rem;
}

/* ── Boutons : 4 types ────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
    padding: .5rem 1rem;
    font-size: .875rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap;
    border: 1px solid transparent; border-radius: var(--rayon);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: .3125rem .75rem; font-size: .75rem; }
.btn-bloc { width: 100%; }

/* Principal : l'action attendue, une par zone */
.btn-principal { background: var(--brand-600); color: #fff; }
.btn-principal:hover:not(:disabled) { background: var(--brand-700); }

/* Secondaire : les autres actions (annuler, refuser…) */
.btn-secondaire { background: #fff; color: var(--gris-700); border-color: var(--gris-300); }
.btn-secondaire:hover:not(:disabled) { background: var(--gris-50); border-color: var(--gris-400); }

/* Danger : action destructrice */
.btn-danger { background: #fff; color: var(--danger-600); border-color: var(--danger-200); }
.btn-danger:hover:not(:disabled) { background: var(--danger-50); }

/* Lien : consultation (« Voir → ») */
.btn-lien {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .75rem; font-weight: 700; color: var(--brand-600);
    background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap;
}
.btn-lien:hover { color: var(--brand-800); text-decoration: underline; }
.btn-lien:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; border-radius: 2px; }

/* Bouton icône (monter, descendre, supprimer…) */
.btn-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: var(--rayon);
    color: var(--gris-500); background: none; border: 0; cursor: pointer;
}
.btn-icone:hover { background: var(--gris-100); color: var(--gris-800); }
.btn-icone.danger:hover { color: var(--danger-600); background: var(--danger-50); }

/* ── Champs de formulaire ─────────────────────────── */
.libelle { display: block; font-size: .875rem; font-weight: 600; color: var(--gris-700); margin-bottom: .25rem; }
.libelle .facultatif { font-weight: 400; color: var(--gris-400); }
.champ {
    width: 100%;
    padding: .5rem .75rem;
    font-size: .875rem; color: var(--gris-800);
    background: var(--gris-50);
    border: 1px solid var(--gris-300); border-radius: var(--rayon);
}
.champ:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); background: #fff; }
.champ:disabled { opacity: .6; }
.champ-sm { padding: .3125rem .5rem; width: auto; }

/* Choix oui / non d'une grille d'évaluation */
.choix {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .25rem .75rem; font-size: .875rem; font-weight: 600;
    border: 1px solid var(--gris-300); border-radius: var(--rayon); cursor: pointer; background: #fff;
}
.choix.oui { color: var(--ok-700); }
.choix.non { color: var(--danger-600); }
.choix.oui:has(:checked) { background: var(--ok-50); border-color: var(--ok-700); }
.choix.non:has(:checked) { background: var(--danger-50); border-color: var(--danger-600); }

/* ── Pastilles (statuts, niveaux) ─────────────────── */
.pastille {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .125rem .5rem;
    font-size: .75rem; font-weight: 600; line-height: 1rem; white-space: nowrap;
    border-radius: 9999px;
}
.pastille-neutre { background: var(--gris-100);   color: var(--gris-600); }
.pastille-info   { background: var(--brand-100);  color: var(--brand-700); }
.pastille-succes { background: var(--ok-100);     color: var(--ok-700); }
.pastille-alerte { background: var(--warn-100);   color: var(--warn-700); }
.pastille-danger { background: var(--danger-100); color: var(--danger-700); }

/* ── Encadrés (information, bilan) ────────────────── */
.encadre { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; border: 1px solid; border-radius: var(--rayon); font-size: .875rem; }
.encadre-info   { background: var(--brand-50);  border-color: var(--brand-200);  color: var(--brand-800); }
.encadre-succes { background: var(--ok-50);     border-color: var(--ok-200);     color: var(--ok-700); }
.encadre-alerte { background: var(--warn-50);   border-color: var(--warn-200);   color: var(--warn-700); }
.encadre-danger { background: var(--danger-50); border-color: var(--danger-200); color: var(--danger-700); }
.encadre-neutre { background: var(--gris-50);   border-color: var(--gris-200);   color: var(--gris-500); }

/* ── Tuiles de chiffres clés ──────────────────────── */
.kpi { background: #fff; border: 1px solid var(--gris-200); border-radius: var(--rayon-carte); padding: 1rem; text-align: center; box-shadow: 0 1px 2px rgba(17, 24, 39, .04); }
.kpi-valeur { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--gris-800); font-variant-numeric: tabular-nums; }
.kpi-libelle { font-size: .75rem; color: var(--gris-500); margin-top: .25rem; }
/* Tuile cliquable : mène à la page détaillée */
a.kpi { display: block; transition: border-color .15s, box-shadow .15s; }
a.kpi:hover { border-color: var(--brand-400); box-shadow: 0 2px 6px rgba(17, 24, 39, .08); }
a.kpi:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.kpi-valeur.succes { color: var(--ok-700); }
.kpi-valeur.info   { color: var(--brand-600); }
.kpi-valeur.alerte { color: var(--warn-700); }
.kpi-valeur.danger { color: var(--danger-600); }
.kpi-valeur.neutre { color: var(--gris-400); }

/* ── Tableaux ─────────────────────────────────────── */
.tableau-conteneur { overflow-x: auto; }
.tableau { width: 100%; font-size: .875rem; text-align: left; border-collapse: collapse; }
.tableau th {
    background: var(--gris-50); color: var(--gris-600);
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    padding: .625rem .75rem;
}
.tableau td { padding: .75rem; border-bottom: 1px solid var(--gris-100); vertical-align: middle; }
.tableau tbody tr:hover { background: var(--gris-50); }
.tableau .col-action { text-align: right; white-space: nowrap; }
.tableau .col-date { white-space: nowrap; color: var(--gris-500); font-variant-numeric: tabular-nums; }
.tableau .col-nom { font-weight: 600; color: var(--gris-700); }
.tableau .ligne-vide td { text-align: center; color: var(--gris-400); font-style: italic; padding: 1rem; }
.tableau.centre td, .tableau.centre th { text-align: center; }
.tableau.centre td:first-child, .tableau.centre th:first-child { text-align: left; }

/* Cellules de la matrice des niveaux */
.cellule-niveau-0 { background: var(--gris-100);   color: var(--gris-500);  font-weight: 700; }
.cellule-niveau-1 { background: var(--brand-100);  color: var(--brand-800); font-weight: 700; }
.cellule-niveau-2 { background: var(--warn-100);   color: var(--warn-700);  font-weight: 700; }
.cellule-niveau-3 { background: var(--ok-100);     color: var(--ok-700);    font-weight: 700; }

/* ── Icônes SVG (voir icone() dans shared.js) ─────── */
.icone { width: 1rem; height: 1rem; flex-shrink: 0; }
.icone-lg { width: 1.25rem; height: 1.25rem; }

/* ── Modals ───────────────────────────────────────── */
.modal-overlay { display: flex !important; }
.modal-overlay.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}