/* ==========================================================================
   StagePAP V2 — feuille de style applicative
   Les jetons reprennent ceux des maquettes validées. Ils sont volontairement
   peu nombreux : toute couleur ajoutée dans un composant doit d'abord devenir
   un jeton ici, sinon la cohérence se perd au bout de trois écrans.
   ========================================================================== */

:root {
    /* Fonds */
    --plane:        #f4f3ee;   /* fond général de l'application */
    --surface:      #ffffff;   /* cartes, rail, barres */
    --surface-2:    #f7f7f4;   /* survol, lignes alternées */
    --line:         #e1e0d9;   /* filets */
    --line-fort:    #d3d2ca;

    /* Texte */
    --ink:          #24231f;   /* texte principal */
    --ink-2:        #52514e;   /* texte secondaire */
    --muted:        #8b8983;   /* légendes, en-têtes de groupe */

    /* Accent */
    --accent:       #2a78d6;
    --accent-ink:   #1c5cab;
    --accent-soft:  #eaf2fd;

    /* Sémantique */
    --good:         #0ca30c;
    --good-soft:    rgba(12, 163, 12, .12);
    --warning:      #c98a00;
    --warning-soft: rgba(201, 138, 0, .14);
    --critical:     #d03b3b;
    --critical-soft:rgba(208, 59, 59, .12);

    --rayon:        8px;
    --rayon-petit:  6px;
    --ombre:        0 1px 2px rgba(0, 0, 0, .04), 0 1px 8px rgba(0, 0, 0, .03);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html, body {
    height: 100%;
    margin: 0;
}

body {
    background: var(--plane);
    color: var(--ink);
    font-family: "Segoe UI", "Inter", system-ui, -apple-system, "Noto Sans", sans-serif;
    font-size: 13px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: 19px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 15px; font-weight: 650; margin: 0; }
h3 { font-size: 13px; font-weight: 650; margin: 0; color: var(--ink-2); }

a { color: var(--accent-ink); }

/* Les nombres alignés verticalement : indispensable dans les grilles de gestion. */
.nombre, .montant { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   En-tête de page (titre + puces d'état + actions)
   -------------------------------------------------------------------------- */
.entete {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.entete .separateur { flex: 1 1 auto; min-width: 12px; }

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */
.carte {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 14px 16px;
}

.carte + .carte { margin-top: 12px; }

.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.kpi .valeur { font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.kpi .titre  { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.kpi .sous   { font-size: 12px; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Encarts d'information
   -------------------------------------------------------------------------- */
.encart {
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--ink-2);
}
.encart.attention { border-left-color: var(--warning);  background: var(--warning-soft); }
.encart.critique  { border-left-color: var(--critical); background: var(--critical-soft); }

/* --------------------------------------------------------------------------
   Grilles DevExpress — densité proche de l'application WinDev.
   La grille des stages porte beaucoup de colonnes : on resserre sans
   descendre sous les seuils de lisibilité.
   -------------------------------------------------------------------------- */
.grille-stages {
    height: calc(100vh - 150px);
    border-radius: var(--rayon);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
}

.grille-stages .dxbl-grid-table > tbody > tr > td { padding-top: 3px; padding-bottom: 3px; }

.grille-stages .dxbl-grid-header-content,
.grille-stages th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

/* Bandeaux de regroupement : c'est ce qui rend les 40+ colonnes lisibles. */
.grille-stages .dxbl-grid-band-header {
    background: var(--surface-2);
    font-weight: 650;
    color: var(--ink-2);
}

/* Ligne annulée : barrée et estompée, comme dans l'application actuelle. */
.ligne-annulee { text-decoration: line-through; opacity: .55; }

/* --------------------------------------------------------------------------
   Bandeau d'erreur Blazor
   -------------------------------------------------------------------------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1100;
    background: #2a2823;
    color: #f6f5f0;
    padding: 10px 16px;
    font-size: 13px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
}
#blazor-error-ui .reload  { color: #9ec5f5; margin-left: 10px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; opacity: .7; }

/* --------------------------------------------------------------------------
   Accessibilité
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

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

/* Impression : on ne veut ni rail ni barre haute sur les listes imprimées. */
@media print {
    .rail, .barre-haute, .entete .dxbl-btn { display: none !important; }
    .app-shell { display: block; height: auto; }
    .contenu   { overflow: visible; padding: 0; }
    body       { background: #fff; }
}

/* ==========================================================================
   Thème FONCÉ — mêmes jetons, valeurs sombres et chaudes (jamais de
   bleu-noir). Accent éclairci pour rester lisible sur fonds sombres.
   Appliqué par html[data-theme="fonce"], ou automatiquement quand le
   système est sombre et que l'utilisateur a choisi « auto » (theme.js).
   NB : les deux blocs sont identiques — toute retouche se fait DANS LES
   DEUX (le CSS ne permet pas de les mutualiser sans préprocesseur).
   ========================================================================== */
html[data-theme="fonce"] {
    --plane:        #171614;
    --surface:      #201f1c;
    --surface-2:    #282723;
    --line:         #34322d;
    --line-fort:    #423f39;
    --ink:          #ecebe6;
    --ink-2:        #b8b5ad;
    --muted:        #85827a;
    --accent:       #5b9be2;
    --accent-ink:   #8ab8ee;
    --accent-soft:  rgba(91, 155, 226, .16);
    --good:         #4cba4c;
    --good-soft:    rgba(76, 186, 76, .16);
    --warning:      #d9a13a;
    --warning-soft: rgba(217, 161, 58, .16);
    --critical:     #e05c5c;
    --critical-soft:rgba(224, 92, 92, .16);
    --ombre:        0 1px 2px rgba(0, 0, 0, .35), 0 1px 10px rgba(0, 0, 0, .25);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --plane:        #171614;
        --surface:      #201f1c;
        --surface-2:    #282723;
        --line:         #34322d;
        --line-fort:    #423f39;
        --ink:          #ecebe6;
        --ink-2:        #b8b5ad;
        --muted:        #85827a;
        --accent:       #5b9be2;
        --accent-ink:   #8ab8ee;
        --accent-soft:  rgba(91, 155, 226, .16);
        --good:         #4cba4c;
        --good-soft:    rgba(76, 186, 76, .16);
        --warning:      #d9a13a;
        --warning-soft: rgba(217, 161, 58, .16);
        --critical:     #e05c5c;
        --critical-soft:rgba(224, 92, 92, .16);
        --ombre:        0 1px 2px rgba(0, 0, 0, .35), 0 1px 10px rgba(0, 0, 0, .25);
    }
}

/* --------------------------------------------------------------------------
   Écrans pleine page (connexion, installation) — gabarit LayoutPlein.
   -------------------------------------------------------------------------- */
.plein-ecran {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: 30px 16px;
    background:
        radial-gradient(700px 340px at 12% -10%, var(--accent-soft), transparent 60%),
        var(--plane);
}

.carte-connexion { width: 340px; max-width: 100%; padding: 26px 26px 22px; }

.marque-connexion { display: flex; align-items: center; gap: 10px; }
.marque-connexion b { font-size: 16px; }
.marque-connexion .centre { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; }

.pastille-logo {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--accent); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 16px;
}

.carte-connexion h3 { margin: 18px 0 2px; font-size: 14px; color: var(--ink); }
.carte-connexion .sous { color: var(--muted); font-size: 12px; margin: 0 0 4px; }
.carte-connexion .encart { margin-top: 12px; }

.champ { display: block; margin-top: 12px; }
.champ span { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
/* Champs NUS des écrans de connexion/installation UNIQUEMENT : ne surtout
   pas styler les <input> internes des éditeurs DevExpress (cases à cocher
   comprises) — ils se stylent eux-mêmes. */
.carte-connexion .champ input {
    width: 100%; box-sizing: border-box; font: inherit; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line-fort);
    border-radius: var(--rayon-petit); padding: 8px 10px;
}
.carte-connexion .champ input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

.bouton-principal {
    width: 100%; margin-top: 16px; padding: 9px;
    background: var(--accent); color: #fff; border: 0;
    border-radius: var(--rayon-petit); font: inherit; font-weight: 600; cursor: pointer;
}
.bouton-principal:hover { background: var(--accent-ink); }

.carte-connexion .aide { margin: 12px 0 0; text-align: center; font-size: 11.5px; color: var(--muted); }
.pied-connexion { margin-top: 14px; text-align: center; font-size: 11px; color: var(--muted); }

/* Bouton de déconnexion (barre haute). */
.form-deconnexion { display: inline; }
.form-deconnexion button {
    border: 0; background: none; cursor: pointer;
    color: var(--ink-2); font: inherit; font-size: 14px;
    padding: 4px 6px; border-radius: 6px; line-height: 1;
}
.form-deconnexion button:hover { background: var(--surface-2); color: var(--critical); }

/* --------------------------------------------------------------------------
   Recherche d'élèves (/eleves) et fiches en lecture.
   -------------------------------------------------------------------------- */
.carte-recherche { margin-bottom: 12px; }

.saisie-recherche {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
    color: var(--ink); background: var(--surface);
    border: 1px solid var(--line-fort); border-radius: var(--rayon-petit);
    padding: 10px 12px;
}
.saisie-recherche:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

.aide-recherche { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }

.grille-eleves {
    border-radius: var(--rayon); overflow: hidden;
    border: 1px solid var(--line); background: var(--surface);
}
.grille-eleves .dxbl-grid-table > tbody > tr { cursor: pointer; }

/* Fiche en lecture : liste libellé / valeur. */
dl.fiche { margin: 8px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
dl.fiche dt { font-size: 11.5px; font-weight: 600; color: var(--muted); align-self: baseline; }
dl.fiche dd { margin: 0; font-size: 12.5px; color: var(--ink); }

/* --------------------------------------------------------------------------
   Fiches en édition (fiche élève) : formulaires en grille, onglets.
   -------------------------------------------------------------------------- */
.onglets-fiche { margin-top: 4px; }
.onglets-fiche .dxbl-tabs-content { padding-top: 12px; }

.fiche-identite { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }

.formulaire {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2px 12px;
    margin-top: 6px;
}
.formulaire .champ { margin-top: 8px; }
.formulaire .champ-large { grid-column: 1 / -1; }

.carte .sous-titre { margin-top: 14px; }

.audit { margin: 12px 0 0; font-size: 11px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Fiche stage : section inscrits, anomalies, fenêtre d'inscription.
   -------------------------------------------------------------------------- */
.titre-section { margin: 18px 0 10px; }

.liste-anomalies { list-style: none; margin: 8px 0 0; padding: 0; }
.liste-anomalies li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 12.5px; }

.commentaire { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; }

.popup-inscription .saisie-recherche { margin-bottom: 8px; }
.liste-candidats { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; margin-bottom: 8px; }
.candidat {
    text-align: left; font: inherit; cursor: pointer;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--rayon-petit);
    padding: 7px 10px; display: flex; flex-direction: column; gap: 1px;
}
.candidat span { font-size: 11.5px; color: var(--muted); }
.candidat:hover { background: var(--surface-2); }
.candidat.choisi { border-color: var(--accent); background: var(--accent-soft); }
.popup-inscription .bouton-popup { margin-top: 12px; width: 100%; }
.popup-inscription .encart { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Écran Stages en maître-détail : liste réduite quand un stage est ouvert,
   grille des stagiaires du stage sélectionné dessous (réflexe WinDev).
   -------------------------------------------------------------------------- */
.grille-stages-reduite { height: calc(46vh - 90px); min-height: 220px; }

.detail-entete { margin-top: 14px; }
.detail-entete .total-du { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }

.grille-detail { max-height: none; }

.p-present { color: var(--good); font-weight: 700; }
.p-absent  { color: var(--critical); font-weight: 700; }
.p-vide    { color: var(--muted); }

/* Panneau de filtres de l'écran Stages. */
.panneau-filtres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 2px 14px;
    align-items: end;
    margin-bottom: 12px;
}
.panneau-filtres .bouton-raz { display: flex; align-items: end; }