/* ==========================================================================
   Thème « GUW » — aligne l'outil de pérennisation sur la direction visuelle
   de Gestion des Urgences du Week-end.
   --------------------------------------------------------------------------
   Cette feuille se charge APRÈS app.css et fafa.css : elle ne fait que
   redéfinir des jetons, plus quelques éléments de signature (listel de charte,
   rail d'administration, en-têtes de tableau). Aucune règle de mise en page
   n'est réécrite — retirer ce fichier restitue l'apparence d'origine.
   ========================================================================== */

/* --- 1. Polices auto-hébergées (identiques à GUW) ----------------------- */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlowcondensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlowcondensed-700.woff2') format('woff2'); }

/* --- 2. Jetons ---------------------------------------------------------- */
:root {
    /* GUW n'a pas de thème sombre : la charte LFPL s'applique telle quelle. */
    color-scheme: light;

    --font-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-titre: 'Barlow Condensed', 'Barlow', sans-serif;

    /* Marque LFPL — contrastes vérifiés sur blanc (identiques à GUW). */
    --primaire: #325491;          /* 7,47:1 — AAA */
    --primaire-clair: #416ea9;
    --primaire-doux: #e9eefa;
    --primaire-degrade: linear-gradient(135deg, #325491 0%, #22375f 100%);
    --sur-primaire: #ffffff;

    --fond: #f2f5f9;
    --fond-voile: none;           /* GUW pose un fond plat, sans halo */
    --surface: #ffffff;
    --surface-2: #f7f9fd;
    --surface-accent: #e9eefa;
    --bordure: #dde3ec;
    --bordure-forte: #c5d3ef;

    --texte: #101828;             /* 16,4:1 */
    --texte-doux: #4a5567;        /*  7,9:1 */
    --texte-inverse: #ffffff;

    --succes: #0a6b55;
    --succes-doux: #e3f5f0;
    --attention: #8a5a00;
    --attention-doux: #fdf3de;
    --danger: #b3261e;
    --danger-doux: #fdeceb;
    --info: #24406f;
    --info-doux: #e9eefa;

    /* Séries de graphique : bleu institutionnel + orange, contraste conservé. */
    --serie-cout: #325491;
    --serie-recette: #c2571a;
    --grille: #dde3ec;

    /* Angles plus fermes que les 18 px d'origine. */
    --rayon-sm: 8px;
    --rayon-md: 10px;
    --rayon-lg: 10px;
    --rayon-xl: 14px;

    /* Ombres GUW : plus discrètes, teintées encre. */
    --ombre-1: 0 1px 2px rgb(16 28 51 / .06), 0 6px 16px -8px rgb(16 28 51 / .14);
    --ombre-2: 0 2px 4px rgb(16 28 51 / .08), 0 14px 28px -12px rgb(16 28 51 / .22);
    --ombre-3: 0 22px 55px rgb(0 0 0 / .35);
    --ombre-primaire: 0 6px 16px -8px rgb(16 28 51 / .35);

    --duree-normale: 170ms;
    --sortie: cubic-bezier(.2, .7, .3, 1);
}

/* GUW est une application en clair uniquement : on neutralise la bascule
   automatique du thème sombre héritée de app.css. */
@media (prefers-color-scheme: dark) {
    :root {
        --fond: #f2f5f9;
        --surface: #ffffff;
        --surface-2: #f7f9fd;
        --surface-accent: #e9eefa;
        --bordure: #dde3ec;
        --bordure-forte: #c5d3ef;
        --texte: #101828;
        --texte-doux: #4a5567;
        --texte-inverse: #ffffff;
        --primaire: #325491;
        --primaire-clair: #416ea9;
        --primaire-doux: #e9eefa;
        --sur-primaire: #ffffff;
        --succes: #0a6b55;
        --succes-doux: #e3f5f0;
        --attention: #8a5a00;
        --attention-doux: #fdf3de;
        --danger: #b3261e;
        --danger-doux: #fdeceb;
        --info: #24406f;
        --info-doux: #e9eefa;
    }
}

/* --- 3. Typographie ----------------------------------------------------- */
body {
    background-image: none;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.entete__titre,
.tuile__valeur,
.accueil__titre,
.etat-final__reference,
.mesure-chiffre {
    font-family: var(--font-titre);
    font-weight: 700;
    letter-spacing: .005em;
}

.entete__titre { font-size: 1.6rem; }

/* Chiffres alignés en colonne, comme les compteurs et les heures de GUW. */
.tuile__valeur,
.progression__valeur,
.cellule-numero,
td, th { font-variant-numeric: tabular-nums; }

/* --- 4. En-tête de marque et listel de charte --------------------------- */
.entete {
    background: linear-gradient(135deg, var(--primaire) 0%, #22375f 100%);
    border-bottom: 0;
    padding-bottom: 6px;
    position: relative;
    color: #ffffff;
}
.entete::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: repeating-linear-gradient(90deg,
                #ffffff 0 16px, var(--danger) 16px 32px);
}
.entete__titre,
.entete__sous-titre { color: #ffffff; }
.entete__sous-titre { opacity: .85; }

.entete .bouton {
    background: rgb(255 255 255 / .11);
    border-color: rgb(255 255 255 / .18);
    color: #ffffff;
}
.entete .bouton:hover {
    background: rgb(255 255 255 / .2);
    border-color: rgb(255 255 255 / .3);
    color: #ffffff;
}
.entete .bandeau-club {
    background: rgb(255 255 255 / .11);
    border-color: rgb(255 255 255 / .18);
    color: #ffffff;
}
.entete :focus-visible { outline-color: rgb(255 255 255 / .85); }

/* La carte d'accueil reprend le même listel : c'est la signature de charte. */
.carte--accueil { position: relative; overflow: hidden; }
.carte--accueil::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background: repeating-linear-gradient(90deg,
                #ffffff 0 16px, var(--danger) 16px 32px);
    box-shadow: inset 0 1px 0 var(--bordure), inset 0 -1px 0 var(--bordure);
}

/* --- 5. Boutons --------------------------------------------------------- */
.bouton {
    border-radius: var(--rayon-sm);
    font-weight: 600;
}
.bouton--primaire {
    background: var(--primaire);
    border-color: var(--primaire);
}
.bouton--primaire:hover {
    background: var(--primaire-clair);
    border-color: var(--primaire-clair);
    transform: translateY(-1px);
    box-shadow: var(--ombre-1);
}

:focus-visible {
    outline: 3px solid rgb(50 84 145 / .55);
    outline-offset: 2px;
}

/* --- 6. Tableaux : en-tête bleu plein, comme dans GUW ------------------- */
thead th {
    background: var(--primaire);
    color: #ffffff;
    border-bottom-color: var(--primaire);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
tbody tr:hover { background: var(--surface-2); }

/* --- 7. Tuiles de compteurs : filet coloré à gauche --------------------- */
.tuile {
    border-left: 3px solid var(--primaire);
    border-radius: var(--rayon-md);
}
.tuile--positif { border-left-color: var(--succes); }
.tuile--negatif { border-left-color: var(--danger); }
.tuile__libelle {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texte-doux);
}
.tuile__valeur { font-size: 2.4rem; line-height: 1.05; }

/* --- 8. Onglets d'administration : rail sombre en colonne --------------- */
@media (min-width: 62rem) {
    .onglets {
        background: #101c33;
        border-radius: var(--rayon-md);
        border: 0;
        padding: 8px;
        gap: 4px;
    }
    .onglet {
        color: #c6d0e2;
        border: 0;
        border-radius: var(--rayon-sm);
        background: transparent;
        min-height: 44px;
    }
    .onglet:hover {
        background: rgb(255 255 255 / .07);
        color: #ffffff;
    }
    .onglet--actif {
        background: rgb(255 255 255 / .11);
        color: #ffffff;
        font-weight: 600;
    }
    .onglet--actif::after { display: none; }
    .onglet__compteur,
    .onglet--actif .onglet__compteur {
        background: rgb(255 255 255 / .16);
        border-color: rgb(255 255 255 / .24);
        color: #ffffff;
    }
}

/* --- 9. Étiquettes de statut : pastille + encre lisible ----------------- */
.etiquette {
    border-radius: 6px;
    border: 1px solid var(--bordure);
    background: var(--surface-2);
    color: var(--texte-doux);
    font-weight: 600;
}
.etiquette--succes {
    background: var(--succes-doux);
    border-color: #b8e2d7;
    color: var(--succes);
}
.etiquette--neutre {
    background: var(--surface-2);
    border-color: var(--bordure);
    color: var(--texte-doux);
}
.etiquette--danger {
    background: var(--danger-doux);
    border-color: var(--rouge-trait, #f3cdca);
    color: var(--danger);
}

/* --- 10. Assistant FAFA ------------------------------------------------- */
.etape[aria-current="step"] {
    background: var(--primaire);
    box-shadow: none;
}
.depot {
    border-color: var(--bordure-forte);
    background: var(--surface-2);
}
.depot__icone {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primaire-doux);
    color: var(--primaire);
}
.liste-fichiers > li {
    border-color: #b8e2d7;
    background: var(--succes-doux);
}

/* --- 11. Champs --------------------------------------------------------- */
.controle {
    min-height: 48px;            /* saisie au doigt, comme GUW */
    border-radius: var(--rayon-sm);
    font-size: 1rem;             /* 16 px : en dessous, iOS zoome */
}
.controle:focus {
    border-color: var(--primaire);
    box-shadow: 0 0 0 .2rem rgb(50 84 145 / .35);
}

/* --- 12. Impression ------------------------------------------------------
   app.css contient déjà une feuille d'impression complète. Comme ce thème est
   chargé après elle et à spécificité égale, ses règles d'écran l'emporteraient
   au moment d'imprimer : ce bloc rend la main à app.css point par point.
   ------------------------------------------------------------------------- */
@media print {
    /* Bandeau de marque : pas d'aplat bleu pleine largeur sur papier. */
    .entete {
        background: #ffffff;
        padding-bottom: 0;
    }
    .entete::after,
    .carte--accueil::before {
        display: none;
    }
    .entete__titre,
    .entete__sous-titre {
        color: var(--texte);
    }
    .entete__sous-titre { opacity: 1; }

    /* Les valeurs des tuiles doivent tenir dans cinq colonnes en A4. */
    .tuile__valeur { font-size: 13pt; }
    .tuile {
        border-left-width: 1px;
        border-left-color: var(--bordure);
    }

    /* Un bandeau bleu plein par tableau consommerait l'encre pour rien. */
    thead th {
        background: var(--surface-2);
        color: var(--texte);
        border-bottom-color: var(--bordure);
    }

    .controle { min-height: 0; }

    /* Le rail d'onglets sombre deviendrait un aplat noir sur papier. */
    .onglets {
        background: transparent;
        padding: 0;
    }
    .onglet {
        color: var(--texte-doux);
        background: transparent;
    }
    .onglet--actif {
        background: transparent;
        color: var(--texte);
    }
    .onglet__compteur,
    .onglet--actif .onglet__compteur {
        background: var(--surface-2);
        border-color: var(--bordure);
        color: var(--texte-doux);
    }

    /* Les pièces jointes confirmées : bordure suffisante, sans aplat vert. */
    .liste-fichiers > li {
        background: transparent;
        border-color: var(--bordure);
    }
}