/* ==========================================================
   LBC ONE V2
   Composants réutilisables
========================================================== */

/* ==========================================================
   CARTES DU TABLEAU DE BORD
========================================================== */

.cartes {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 20px;

    margin-top: 28px;
}


.carte {
    display: block;

    min-height: 170px;
    padding: 24px;

    background: var(--blanc);

    border:
        1px solid var(--bordure-claire);

    border-radius: var(--rayon);

    box-shadow: var(--ombre-legere);

    color: var(--texte);
    text-decoration: none;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}


.carte:hover {
    border-color: #bed7d1;

    box-shadow: var(--ombre);

    transform: translateY(-3px);
}


.carte h3 {
    margin-top: 0;
    margin-bottom: 8px;

    color: var(--bleu-fonce);

    font-size: 17px;
}


.carte p {
    color: var(--texte-secondaire);
}


.nombre {
    margin: 12px 0;

    color: var(--vert);

    font-size: 38px;
    font-weight: 800;
    line-height: 1;
}


/* ==========================================================
   BLOCS ET PANNEAUX
========================================================== */

.bloc,
.panneau,
.section-fiche,
.formulaire,
.encadre {
    margin-bottom: 22px;
    padding: 24px;

    background: var(--blanc);

    border:
        1px solid var(--bordure-claire);

    border-radius: var(--rayon);

    box-shadow: var(--ombre-legere);
}


.bloc h2,
.bloc h3,
.panneau h2,
.panneau h3,
.section-fiche h2,
.section-fiche h3,
.formulaire h2,
.formulaire h3 {
    margin-top: 0;
}


.section-fiche h2,
.section-fiche h3 {
    padding-bottom: 12px;

    border-bottom:
        1px solid var(--bordure-claire);
}


/* ==========================================================
   BOUTONS
========================================================== */

.bouton,
button.bouton,
a.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 42px;
    padding: 10px 17px;

    border: 0;
    border-radius: var(--rayon-petit);

    background: var(--vert);
    color: white;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;
    cursor: pointer;

    transition:
        background 0.17s ease,
        transform 0.17s ease,
        box-shadow 0.17s ease;
}


.bouton:hover,
button.bouton:hover,
a.bouton:hover {
    background: var(--vert-fonce);

    box-shadow:
        0 5px 13px rgba(21, 150, 125, 0.22);

    transform: translateY(-1px);
}


.bouton-secondaire,
a.bouton-secondaire,
button.bouton-secondaire {
    background: var(--bleu-clair);
    color: var(--bleu-fonce);
}


.bouton-secondaire:hover,
a.bouton-secondaire:hover,
button.bouton-secondaire:hover {
    background: #dbe9ef;
}


.bouton-danger,
a.bouton-danger,
button.bouton-danger {
    background: var(--rouge);
    color: white;
}


.bouton-danger:hover,
a.bouton-danger:hover,
button.bouton-danger:hover {
    background: #a83d3d;
}


.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 22px;
}


/* ==========================================================
   TABLEAUX
========================================================== */

.tableau-responsive {
    width: 100%;

    overflow-x: auto;

    border-radius: var(--rayon);

    box-shadow: var(--ombre-legere);
}


table {
    width: 100%;

    overflow: hidden;

    border-collapse: collapse;

    background: var(--blanc);

    border:
        1px solid var(--bordure-claire);

    border-radius: var(--rayon);

    box-shadow: var(--ombre-legere);
}


th,
td {
    padding: 14px 16px;

    border-bottom:
        1px solid var(--bordure-claire);

    text-align: left;
    vertical-align: middle;
}


th {
    background: #edf6f3;
    color: var(--bleu-fonce);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}


td {
    color: #344c5c;
}


tbody tr {
    transition: background 0.15s ease;
}


tbody tr:hover {
    background: #f8fbfb;
}


tbody tr:last-child td {
    border-bottom: none;
}


td a {
    color: var(--vert-fonce);

    font-weight: 700;
    text-decoration: none;
}


td a:hover {
    text-decoration: underline;
}


/* ==========================================================
   FORMULAIRES
========================================================== */

form {
    width: 100%;
}


label {
    display: block;

    margin-bottom: 6px;

    color: var(--bleu-fonce);

    font-size: 13px;
    font-weight: 700;
}


input,
select,
textarea {
    width: 100%;

    padding: 11px 12px;

    border:
        1px solid #cddadd;

    border-radius: 8px;

    background: white;
    color: var(--texte);

    outline: none;

    transition:
        border-color 0.17s ease,
        box-shadow 0.17s ease,
        background 0.17s ease;
}


input:focus,
select:focus,
textarea:focus {
    border-color: var(--vert);

    box-shadow:
        0 0 0 3px rgba(21, 150, 125, 0.12);
}


textarea {
    min-height: 115px;
    resize: vertical;
}


input[type="checkbox"],
input[type="radio"] {
    width: auto;
}


.champ {
    margin-bottom: 18px;
}


.grille-formulaire {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 18px 22px;
}


.grille-formulaire .champ-large {
    grid-column: 1 / -1;
}


.aide-champ {
    display: block;

    margin-top: 5px;

    color: var(--texte-secondaire);

    font-size: 12px;
}


/* ==========================================================
   FICHES DÉTAILLÉES
========================================================== */

.entete-fiche {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 24px;
}


.entete-fiche h1,
.entete-fiche h2 {
    margin: 0 0 5px;
}


.sous-titre {
    margin: 0;

    color: var(--texte-secondaire);
}


.grille-fiche {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 16px 28px;
}


.information {
    padding: 14px 0;

    border-bottom:
        1px solid var(--bordure-claire);
}


.information strong,
.libelle {
    display: block;

    margin-bottom: 3px;

    color: var(--texte-secondaire);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


.information span,
.valeur {
    color: var(--bleu-fonce);

    font-size: 15px;
    font-weight: 600;
}


/* ==========================================================
   BADGES ET STATUTS
========================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 9px;

    border-radius: 999px;

    background: var(--bleu-clair);
    color: var(--bleu-fonce);

    font-size: 12px;
    font-weight: 700;
}


.badge-actif,
.statut-actif {
    background: var(--vert-clair);
    color: var(--vert-fonce);
}


.badge-inactif,
.statut-inactif {
    background: var(--rouge-clair);
    color: var(--rouge);
}


.badge-attention {
    background: var(--orange-clair);
    color: var(--orange);
}


/* ==========================================================
   MESSAGES FLASH
========================================================== */

.messages {
    margin-bottom: 22px;
}


.message {
    margin-bottom: 10px;
    padding: 13px 16px;

    border-left: 4px solid var(--bleu-moyen);
    border-radius: 8px;

    background: var(--bleu-clair);
    color: var(--bleu-fonce);

    font-weight: 600;

    box-shadow: var(--ombre-legere);
}


.message-succes,
.message-success {
    border-left-color: var(--vert);

    background: var(--vert-clair);
    color: var(--vert-fonce);
}


.message-erreur,
.message-error,
.message-danger {
    border-left-color: var(--rouge);

    background: var(--rouge-clair);
    color: var(--rouge);
}


.message-warning,
.message-attention {
    border-left-color: var(--orange);

    background: var(--orange-clair);
    color: var(--orange);
}


/* ==========================================================
   ÉTAT VIDE
========================================================== */

.etat-vide {
    padding: 48px 30px;

    background: var(--blanc);

    border:
        1px dashed #b7c7cd;

    border-radius: var(--rayon);

    text-align: center;

    box-shadow: var(--ombre-legere);
}


.etat-vide h3 {
    margin-top: 0;
    margin-bottom: 8px;
}


.etat-vide p {
    color: var(--texte-secondaire);
}

/* ==========================================================
   RESPONSIVE — TABLETTE
========================================================== */

@media (max-width: 1000px) {

    :root {
        --largeur-menu: 225px;
    }


    .identite-application {
        padding-left: 17px;
        padding-right: 17px;
    }


    .navigation {
        padding-left: 10px;
        padding-right: 10px;
    }


    .barre-superieure {
        padding-left: 24px;
        padding-right: 24px;
    }


    .conteneur {
        padding-left: 24px;
        padding-right: 24px;
    }


    .grille-fiche,
    .grille-formulaire {
        grid-template-columns: 1fr;
    }


    .grille-formulaire .champ-large {
        grid-column: auto;
    }
}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 600px) {

    .application {
        display: block;
    }


    .menu-lateral {
        position: relative;

        width: 100%;
        min-height: auto;
    }


    .zone-principale {
        width: 100%;
        margin-left: 0;
    }


    .identite-application {
        padding: 17px 18px;
    }


    .navigation {
        display: grid;
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        padding: 14px;
    }


    .navigation a {
        min-height: 42px;
    }


    .titre-navigation {
        grid-column: 1 / -1;

        margin-top: 10px;
    }


    .pied-menu {
        display: none;
    }


    .barre-superieure {
        position: relative;

        min-height: auto;
        padding: 18px 20px;
    }


    .profil-utilisateur {
        min-width: auto;
    }


    .profil-utilisateur div:last-child {
        display: none;
    }


    .conteneur {
        padding: 22px 18px 38px;
    }


    .titre-page,
    .entete-fiche {
        align-items: flex-start;
        flex-direction: column;
    }


    .cartes {
        grid-template-columns: 1fr;
    }


    .actions {
        width: 100%;
    }


    .actions .bouton {
        flex: 1;
    }


    table {
        min-width: 700px;
    }
}


/* ==========================================================
   RESPONSIVE — PETITS MOBILES
========================================================== */

@media (max-width: 480px) {

    .navigation {
        grid-template-columns: 1fr;
    }


    .titre-navigation {
        grid-column: auto;
    }


    .barre-superieure h2 {
        font-size: 20px;
    }


    .profil-utilisateur {
        display: none;
    }


    .bloc,
    .panneau,
    .section-fiche,
    .formulaire,
    .encadre,
    .carte {
        padding: 19px;
    }


    .actions {
        flex-direction: column;
    }


    .actions .bouton {
        width: 100%;
    }
}


/* ==========================================================
   COMPOSANTS PROFESSIONNELS
========================================================== */

/* Cartes statistiques */

.grille-statistiques,
.resume-programmation,
.cartes-statistiques,
.kpi-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.carte-statistique,
.carte-resume,
.kpi-card {
    min-height: 118px;
    padding: 19px 20px;
    background: var(--lbc-card);
    border: 1px solid var(--lbc-border);
    border-radius: var(--rayon);
    box-shadow: var(--lbc-shadow-soft);
}

.carte-statistique h3,
.carte-resume .libelle,
.kpi-label {
    display: block;
    margin: 0 0 8px;
    color: var(--lbc-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.valeur-statistique,
.carte-resume .valeur,
.kpi-value {
    margin: 0;
    color: var(--lbc-navy);
    font-size: 27px;
    font-weight: 800;
    line-height: 1.15;
}

.sous-valeur-statistique,
.kpi-help {
    margin: 6px 0 0;
    color: var(--lbc-muted);
    font-size: 13px;
}


/* Panneaux et filtres */

.section-finance,
.barre-filtres,
.filtres-calendrier,
.planning-filtres {
    background: var(--lbc-card);
    border: 1px solid var(--lbc-border);
    border-radius: var(--rayon);
    box-shadow: var(--lbc-shadow-soft);
}

.barre-filtres,
.filtres-calendrier,
.planning-filtres {
    padding: 18px;
    margin-bottom: 22px;
}


/* Boutons compatibles avec les différentes pages existantes */

.bouton-calendrier,
.bouton-filtrer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    border: 0;
    border-radius: var(--rayon-petit);
    background: var(--lbc-teal);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.bouton-calendrier:hover,
.bouton-filtrer:hover {
    background: var(--lbc-teal-dark);
}

.bouton-reinitialiser {
    background: var(--lbc-blue-soft);
    color: var(--lbc-navy);
}


/* Conteneurs de tableaux */

.tableau-defilant,
.tableau-conteneur,
.conteneur-tableau {
    width: 100%;
    overflow-x: auto;
    background: var(--lbc-card);
    border: 1px solid var(--lbc-border);
    border-radius: var(--rayon);
    box-shadow: var(--lbc-shadow-soft);
}

.tableau-defilant table,
.tableau-responsive table,
.tableau-conteneur table,
.conteneur-tableau table {
    min-width: 980px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

table {
    table-layout: auto;
}

th,
td {
    overflow-wrap: normal;
    word-break: normal;
}

th {
    white-space: nowrap;
}

.bouton,
.badge,
.actions-ligne a,
.actions-ligne button,
.colonne-actions,
.tableau-actions {
    white-space: nowrap;
}


/* Formulaires complémentaires */

.formulaire-carte {
    max-width: 1100px;
    margin: 0 auto 24px;
    padding: 24px;
    background: var(--lbc-card);
    border: 1px solid var(--lbc-border);
    border-radius: var(--rayon);
    box-shadow: var(--lbc-shadow-soft);
}


/* États vides complémentaires */

.message-vide,
.planning-vide {
    padding: 44px 26px;
    background: var(--lbc-card);
    border: 1px dashed #b9c8ce;
    border-radius: var(--rayon);
    color: var(--lbc-muted);
    text-align: center;
}


/* Responsive professionnel */

@media (max-width: 1100px) {
    .conteneur {
        padding: 26px 24px 42px;
    }
}

@media (max-width: 700px) {
    .page-entete,
    .titre-page,
    .entete-page {
        flex-direction: column;
    }

    .page-actions,
    .actions-page,
    .actions-entete {
        width: 100%;
        justify-content: flex-start;
    }
}