/*
 * Planning Girardeau TP — charte de l'application.
 *
 * Bootstrap 5.3 fournit la grille, le responsive et le comportement des
 * composants ; ce fichier fournit l'identité : une palette sobre de travaux
 * publics (ardoise, bleu de chantier, jaune engin réservé aux repères), une
 * échelle typographique lisible au téléphone, et les composants maison.
 *
 * Trois règles :
 *   1. contraste AA partout (texte ≥ 4,5:1) — l'écran se lit dehors, en plein jour ;
 *   2. le jaune engin ne porte jamais de texte sur fond clair : il signale
 *      (marque, onglet courant) sur fond sombre, ou sert de fond à un texte foncé ;
 *   3. mobile d'abord : cibles de 44 px au doigt, pas de défilement horizontal.
 *
 * Toutes les classes maison sont préfixées `gp-`. Chaque lot a sa propre
 * feuille (planning.css, referentiels.css, fiches.css, interfaces.css, admin.css)
 * et réutilise les jetons ci-dessous plutôt que des couleurs en dur.
 * Ce fichier est chargé APRÈS Bootstrap (cf. assets/app.js).
 */

/* ================================================================== */
/* 1. Jetons                                                          */
/* ================================================================== */

:root {
    /* Structure : navigation, titres, texte. */
    --gp-nuit: #0f172a;
    --gp-ardoise-900: #1e293b;
    --gp-ardoise-700: #334155;
    --gp-ardoise-600: #475569;
    --gp-ardoise-500: #5b6475;
    --gp-ardoise-300: #cbd5e1;
    --gp-ardoise-200: #e2e8f0;

    /* Surfaces. */
    --gp-fond: #f3f4f6;
    --gp-fond-creux: #e9ecf0;
    --gp-surface: #ffffff;
    --gp-trait: #dde1e7;
    --gp-trait-fort: #c3c9d2;

    /* Action : bleu de chantier (8,6:1 sur blanc). */
    --gp-bleu-chantier: #1f4e79;
    --gp-bleu-chantier-fonce: #173b5c;
    --gp-bleu-chantier-pale: #e6eef6;

    /* Repère : jaune engin (jamais comme couleur de texte sur fond clair). */
    --gp-jaune: #f2b705;
    --gp-jaune-pale: #fdf3d0;

    /* Statuts — fonctionnels, jamais décoratifs. Texte ≥ 4,5:1 sur le fond pâle associé. */
    --gp-vert: #166534;
    --gp-vert-pale: #e7f5ec;
    --gp-ambre: #8a3c0c;
    --gp-ambre-pale: #fdf0dc;
    --gp-rouge: #b3261e;
    --gp-rouge-pale: #fdecea;
    --gp-bleu: #1d4ed8;
    --gp-bleu-pale: #e8eefc;

    /* Rythme (multiples de 4 px). */
    --gp-e1: 0.25rem;
    --gp-e2: 0.5rem;
    --gp-e3: 0.75rem;
    --gp-e4: 1rem;
    --gp-e5: 1.5rem;
    --gp-e6: 2rem;

    --gp-radius: 0.625rem;
    --gp-radius-sm: 0.375rem;
    --gp-cible: 2.75rem; /* 44 px : cible confortable au doigt, gants compris */

    --gp-ombre: 0 1px 1px rgb(15 23 42 / 4%), 0 1px 3px rgb(15 23 42 / 7%);
    --gp-ombre-haute: 0 2px 4px rgb(15 23 42 / 6%), 0 8px 24px rgb(15 23 42 / 12%);

    /* Surcharges Bootstrap. */
    --bs-primary: var(--gp-bleu-chantier);
    --bs-primary-rgb: 31, 78, 121;
    --bs-body-bg: var(--gp-fond);
    --bs-body-color: var(--gp-ardoise-900);
    --bs-secondary-color: var(--gp-ardoise-500);
    --bs-emphasis-color: var(--gp-nuit);
    --bs-border-color: var(--gp-trait);
    --bs-border-radius: var(--gp-radius);
    --bs-border-radius-sm: var(--gp-radius-sm);
    --bs-body-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-link-color: var(--gp-bleu-chantier);
    --bs-link-color-rgb: 31, 78, 121;
    --bs-link-hover-color: var(--gp-bleu-chantier-fonce);
    --bs-link-hover-color-rgb: 23, 59, 92;
    --bs-focus-ring-color: rgb(31 78 121 / 35%);
}

/* ================================================================== */
/* 2. Base                                                            */
/* ================================================================== */

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Les utilitaires d'affichage de Bootstrap sont en !important et l'emportent
   sur le `display: none` que le navigateur applique à [hidden]. */
[hidden] {
    display: none !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--bs-emphasis-color);
}

/* Un chiffre se compare : il est tabulaire partout où il compte. */
table,
.gp-chiffre {
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: 3px solid var(--gp-bleu-chantier);
    outline-offset: 2px;
}

.gp-lien-evitement:focus {
    position: fixed;
    top: var(--gp-e2);
    left: var(--gp-e2);
    z-index: 2000;
    padding: var(--gp-e2) var(--gp-e3);
    background: var(--gp-surface);
    border-radius: var(--gp-radius-sm);
    box-shadow: var(--gp-ombre-haute);
}

/* Intitulé de section : petite capitale espacée, le repère de lecture. */
.gp-surtitre {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* ================================================================== */
/* 3. Ossature : navigation, page                                     */
/* ================================================================== */

.gp-navbar {
    background: var(--gp-nuit);
    border-bottom: 3px solid var(--gp-jaune);
    padding-block: 0.4rem;
}

.gp-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-e2);
    color: #fff;
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -0.02em;
    /* La marque cède la place au bouton de menu (et à sa pastille) quand la
       barre manque de largeur : 248 px de libellé ne tiennent pas à côté
       d'eux à 320 ou 360 px, et c'est le bouton — seule navigation du
       téléphone — qui sortait de l'écran. */
    min-width: 0;
    flex: 0 1 auto;
}

.gp-marque__nom {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bouton de menu et pastille : jamais rétrécis ni poussés hors de l'écran. */
.gp-navbar__actions {
    flex-shrink: 0;
    margin-left: auto;
}

/* Téléphone : une marque un peu plus serrée garde « Planning Girardeau TP »
   entier à 375 px, pastille comprise ; en deçà, l'ellipse prend le relais. */
@media (max-width: 399.98px) {
    .gp-navbar .navbar-brand {
        font-size: 1rem;
        margin-right: var(--gp-e2);
    }
}

.gp-marque {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--gp-radius-sm);
    background: var(--gp-jaune);
    color: var(--gp-nuit);
    font-size: 1.05rem;
    flex: none;
}

.gp-navbar .nav-link {
    color: rgb(241 245 249 / 82%);
    font-weight: 500;
    border-radius: var(--gp-radius-sm);
    padding-inline: 0.7rem;
    position: relative;
}

.gp-navbar .nav-link:hover,
.gp-navbar .nav-link:focus-visible,
.gp-navbar .nav-link.show {
    color: #fff;
    background: rgb(255 255 255 / 8%);
}

/* L'écran courant : un trait jaune sous le lien, sur fond sombre. */
.gp-navbar .nav-link.active {
    color: #fff;
}

.gp-navbar .nav-link.active::after {
    content: '';
    position: absolute;
    inset-inline: 0.7rem;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--gp-jaune);
}

/* Focus clavier sur la barre sombre : contour jaune (9,8:1 sur la nuit). */
.gp-navbar :focus-visible {
    outline-color: var(--gp-jaune);
}

/* Bootstrap retire le contour des .nav-link (`outline: 0`, sélecteur plus
   fort que :focus-visible) au profit d'un halo bleu à 25 % presque invisible
   sur la nuit (1,3:1) : on rétablit le contour jaune entier. */
.gp-navbar .nav-link:focus-visible {
    outline: 3px solid var(--gp-jaune);
    outline-offset: 2px;
    box-shadow: none;
}

/* Le menu déroulant est clair : le jaune y serait illisible (1,7:1), il garde
   le contour bleu chantier du reste de l'application. */
.gp-navbar .dropdown-menu :focus-visible {
    outline-color: var(--gp-bleu-chantier);
}

.gp-navbar .navbar-toggler {
    border-color: rgb(255 255 255 / 30%);
    min-width: var(--gp-cible);
    min-height: var(--gp-cible);
}

/* Trois traits blancs pleins sur la nuit. Bootstrap les dessine à 55 %
   d'opacité ; l'ancien `filter: invert(1)` les rendait presque noirs, donc
   invisibles sur le fond nuit. */
.gp-navbar .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.gp-navbar .dropdown-menu {
    border-color: var(--gp-trait);
    border-radius: var(--gp-radius);
    box-shadow: var(--gp-ombre-haute);
}

.gp-navbar .dropdown-item.active,
.gp-navbar .dropdown-item:active {
    background: var(--gp-bleu-chantier);
}

/* Pastille de compteur (fiches non consultées). */
.gp-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding-inline: 0.35rem;
    border-radius: 999px;
    background: var(--gp-jaune);
    color: var(--gp-nuit);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Menu hors canevas (téléphone) : liste à plat, grandes cibles. */
.gp-offcanvas {
    --bs-offcanvas-width: min(22rem, 88vw);
}

.gp-offcanvas .offcanvas-header {
    background: var(--gp-nuit);
    color: #fff;
    border-bottom: 3px solid var(--gp-jaune);
}

.gp-offcanvas__profil {
    color: var(--gp-ardoise-300);
}

.gp-offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.gp-offcanvas .gp-menu-section {
    margin: var(--gp-e4) 0 var(--gp-e1);
    padding-inline: var(--gp-e3);
}

.gp-offcanvas .list-group-item {
    display: flex;
    align-items: center;
    gap: var(--gp-e3);
    min-height: var(--gp-cible);
    border: 0;
    border-radius: var(--gp-radius-sm);
    font-weight: 500;
}

.gp-offcanvas .list-group-item.active {
    background: var(--gp-bleu-chantier-pale);
    color: var(--gp-bleu-chantier-fonce);
    font-weight: 700;
    box-shadow: inset 4px 0 0 var(--gp-bleu-chantier);
}

.gp-offcanvas .list-group-item .bi {
    font-size: 1.15rem;
    width: 1.5rem;
    text-align: center;
}

.gp-main {
    padding-block: var(--gp-e5) 4rem;
}

/* Barre de progression des navigations Turbo, aux couleurs de l'application. */
.turbo-progress-bar {
    height: 3px;
    background-color: var(--gp-jaune);
}

/* En-tête de page : titre, contexte, actions — un seul motif partout. */
.gp-page-titre {
    font-size: clamp(1.4rem, 1.15rem + 1vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.gp-page-soustitre {
    color: var(--bs-secondary-color);
    font-size: 0.975rem;
    margin-bottom: var(--gp-e5);
}

/* ================================================================== */
/* 4. Surfaces                                                        */
/* ================================================================== */

.gp-card {
    background: var(--gp-surface);
    border: 1px solid var(--gp-trait);
    border-radius: var(--gp-radius);
    box-shadow: var(--gp-ombre);
}

.gp-card__entete {
    padding: var(--gp-e3) var(--gp-e4);
    border-bottom: 1px solid var(--gp-trait);
}

.gp-card__corps {
    padding: var(--gp-e4);
}

/* Barre de filtres : du mobilier, pas du contenu. */
.gp-filtres {
    background: var(--gp-fond-creux);
    border: 1px solid var(--gp-trait);
    border-radius: var(--gp-radius);
    padding: var(--gp-e3) var(--gp-e4);
}

/* État vide : jamais muet — une phrase qui dit pourquoi, et quoi faire. */
.gp-vide {
    text-align: center;
    padding: var(--gp-e6) var(--gp-e4);
    color: var(--bs-secondary-color);
}

.gp-vide__icone {
    display: block;
    font-size: 2.25rem;
    line-height: 1;
    margin-bottom: var(--gp-e3);
    color: var(--gp-ardoise-500);
}

.gp-vide__titre {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bs-body-color);
    margin-bottom: var(--gp-e1);
}

.gp-vide__texte {
    max-width: 36rem;
    margin-inline: auto;
}

/* Barre d'actions collée en bas de l'écran sur téléphone (formulaires terrain). */
.gp-barre-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    gap: var(--gp-e2);
    padding: var(--gp-e3) 0 calc(var(--gp-e3) + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--gp-fond) 75%, transparent);
}

/* ================================================================== */
/* 5. Étiquettes                                                      */
/* ================================================================== */

.gp-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--gp-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    background: var(--gp-fond-creux);
    color: var(--gp-ardoise-700);
}

.gp-tag--success { background: var(--gp-vert-pale);          color: var(--gp-vert); }
.gp-tag--warning { background: var(--gp-ambre-pale);         color: var(--gp-ambre); }
.gp-tag--danger  { background: var(--gp-rouge-pale);         color: var(--gp-rouge); }
.gp-tag--info    { background: var(--gp-bleu-pale);          color: var(--gp-bleu); }
.gp-tag--muted   { background: var(--gp-fond-creux);         color: var(--gp-ardoise-600); }
.gp-tag--marque  { background: var(--gp-jaune);              color: var(--gp-nuit); }

/* ================================================================== */
/* 6. Boutons, formulaires, alertes                                   */
/* ================================================================== */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--gp-radius-sm);
}

.btn-primary {
    --bs-btn-bg: var(--gp-bleu-chantier);
    --bs-btn-border-color: var(--gp-bleu-chantier);
    --bs-btn-hover-bg: var(--gp-bleu-chantier-fonce);
    --bs-btn-hover-border-color: var(--gp-bleu-chantier-fonce);
    --bs-btn-active-bg: var(--gp-bleu-chantier-fonce);
    --bs-btn-active-border-color: var(--gp-bleu-chantier-fonce);
    --bs-btn-disabled-bg: var(--gp-bleu-chantier);
    --bs-btn-disabled-border-color: var(--gp-bleu-chantier);
}

.btn-outline-primary {
    --bs-btn-color: var(--gp-bleu-chantier);
    --bs-btn-border-color: var(--gp-bleu-chantier);
    --bs-btn-hover-bg: var(--gp-bleu-chantier);
    --bs-btn-hover-border-color: var(--gp-bleu-chantier);
    --bs-btn-active-bg: var(--gp-bleu-chantier-fonce);
    --bs-btn-active-border-color: var(--gp-bleu-chantier-fonce);
}

/* Bouton secondaire (semaines, « Afficher », « Filtrer », « Imprimer »,
   « Annuler »…). Le gris de Bootstrap (#6c757d) tombe à 3,96:1 sur les barres
   de filtres (fond creux) et à 4,26:1 sur le fond de page : en plein jour, ces
   boutons avaient l'air désactivés. Ardoise : 8,7:1 sur le fond creux. */
.btn-outline-secondary {
    --bs-btn-color: var(--gp-ardoise-700);
    --bs-btn-border-color: var(--gp-ardoise-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--gp-ardoise-700);
    --bs-btn-hover-border-color: var(--gp-ardoise-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--gp-ardoise-900);
    --bs-btn-active-border-color: var(--gp-ardoise-900);
    --bs-btn-disabled-color: var(--gp-ardoise-600);
    --bs-btn-disabled-border-color: var(--gp-ardoise-300);
}

.form-label {
    font-weight: 600;
    color: var(--gp-ardoise-700);
    margin-bottom: 0.3rem;
}

.form-control,
.form-select {
    border-color: var(--gp-trait-fort);
    background-color: var(--gp-surface);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--gp-bleu-chantier);
    box-shadow: 0 0 0 3px rgb(31 78 121 / 20%);
}

.form-check-input:checked {
    background-color: var(--gp-bleu-chantier);
    border-color: var(--gp-bleu-chantier);
}

.form-text {
    color: var(--bs-secondary-color);
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--gp-e2);
    border-radius: var(--gp-radius);
}

.alert > .bi {
    font-size: 1.15rem;
    line-height: 1.35;
    flex: none;
}

/* Un message peut citer un long chemin de fichier ou une référence sans
   espace : il se coupe plutôt que d'élargir la page au téléphone. */
.alert > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Bandeau de prise d'identité : au téléphone, le bouton de retour passe sous
   le texte plutôt que de le réduire à une colonne d'un mot. */
.gp-prise-identite {
    flex-wrap: wrap;
    align-items: center;
}

.gp-prise-identite > div {
    flex: 1 1 14rem;
}

/* Un nom de variable ou un chemin cité dans une alerte prend la couleur de
   l'alerte : le rose des <code> de Bootstrap (#d63384) y tombe sous AA
   (4,0:1 sur l'ambre pâle, 3,9:1 sur le bleu pâle). Une règle ici plutôt
   qu'un `text-reset` à ne pas oublier dans chaque gabarit. */
.alert code {
    color: inherit;
}

.alert-success { --bs-alert-color: var(--gp-vert);  --bs-alert-bg: var(--gp-vert-pale);  --bs-alert-border-color: #b9dfc6; }
.alert-warning { --bs-alert-color: var(--gp-ambre); --bs-alert-bg: var(--gp-ambre-pale); --bs-alert-border-color: #f3cf9c; }
.alert-danger  { --bs-alert-color: var(--gp-rouge); --bs-alert-bg: var(--gp-rouge-pale); --bs-alert-border-color: #f2b8b3; }
.alert-info    { --bs-alert-color: var(--gp-bleu);  --bs-alert-bg: var(--gp-bleu-pale);  --bs-alert-border-color: #c3d3f7; }

/* ================================================================== */
/* 7. Connexion                                                       */
/* ================================================================== */

.gp-connexion {
    min-height: calc(100dvh - 6rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gp-connexion__bloc {
    width: 100%;
    max-width: 25rem;
}

.gp-connexion__marque {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--gp-radius);
    background: var(--gp-nuit);
    color: var(--gp-jaune);
    font-size: 1.6rem;
    box-shadow: inset 0 -4px 0 var(--gp-jaune);
}

/* ================================================================== */
/* 8. Tableaux                                                        */
/* ================================================================== */

.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--gp-fond-creux);
    --bs-table-border-color: var(--gp-trait);
    margin-bottom: 0;
}

.table > thead > tr > th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--gp-trait-fort);
    white-space: nowrap;
}

/* ================================================================== */
/* 9. Toucher et impression                                           */
/* ================================================================== */

/* Sur écran tactile — le téléphone du chauffeur — les cibles s'élargissent. */
@media (pointer: coarse) {
    .btn:not(.btn-sm),
    .form-control,
    .form-select {
        min-height: var(--gp-cible);
    }

    .form-control,
    .form-select {
        font-size: 1rem; /* évite le zoom automatique de Safari iOS */
    }
}

@media print {
    @page {
        margin: 12mm;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .gp-navbar,
    .gp-offcanvas,
    .gp-no-print,
    .gp-barre-actions,
    .btn,
    .alert .btn-close {
        display: none !important;
    }

    .gp-main {
        padding: 0;
    }

    .gp-card {
        box-shadow: none;
        border-color: #999;
        break-inside: avoid;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    .gp-eviter-coupure {
        break-inside: avoid;
    }
}