/* ==========================================================
   LBC ONE V2
   Feuille de style principale
========================================================== */


/* ==========================================================
   RÉGLAGES GÉNÉRAUX
========================================================== */


:root {

    --bleu-fonce: #173f5f;
    --bleu-moyen: #245a7a;
    --bleu-clair: #eaf2f6;


    --vert: #15967d;
    --vert-fonce: #117c68;
    --vert-clair: #e8f6f2;


    --fond: #f3f7f8;
    --blanc: #ffffff;


    --texte: #213547;
    --texte-secondaire: #687986;


    --bordure: #dce5e8;
    --bordure-claire: #e8eef0;


    --rouge: #c94b4b;
    --rouge-clair: #fdecec;


    --orange: #b97417;
    --orange-clair: #fff4df;



    --ombre:
        0 8px 24px rgba(23,63,95,0.08);



    --ombre-legere:
        0 4px 14px rgba(23,63,95,0.06);



    --rayon: 12px;

    --rayon-petit: 8px;


    --largeur-menu:265px;



    --espace-xs:8px;
    --espace-sm:16px;
    --espace-md:24px;
    --espace-lg:32px;
    --espace-xl:48px;

}




/* ==========================================================
   BASE
========================================================== */


* {

    box-sizing:border-box;

}



html {

    min-height:100%;

}



body {

    min-height:100vh;

    margin:0;

    background:var(--fond);

    color:var(--texte);


    font-family:
        Arial,
        Helvetica,
        sans-serif;


    font-size:15px;

    line-height:1.5;


    overflow-x:hidden;

}



button,
input,
select,
textarea {

    font:inherit;

}



a {

    color:inherit;

    text-decoration:none;

}



h1,
h2,
h3,
h4 {

    color:var(--bleu-fonce);

}



p {

    line-height:1.6;

}






/* ==========================================================
   SYSTEME DESIGN
========================================================== */


.card {

    background:var(--blanc);

    border:

        1px solid var(--bordure);

    border-radius:var(--rayon);

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

}



.titre-page {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}



.titre-page h1,
.titre-page h2 {

    margin:0;

}



.texte-secondaire {

    color:var(--texte-secondaire);

}



.texte-vert {

    color:var(--vert);

}



.texte-orange {

    color:var(--orange);

}
/* ==========================================================
   BOUTONS LBC ONE
========================================================== */


.bouton {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;


    padding:9px 16px;


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


    background:var(--vert);

    color:white;


    border:none;


    font-size:14px;

    font-weight:600;


    cursor:pointer;


    transition:
        background .2s ease,
        transform .2s ease;

}



.bouton:hover {

    background:var(--vert-fonce);

    transform:translateY(-1px);

}





.bouton-secondaire {

    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:9px 16px;


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


    background:var(--bleu-clair);


    color:var(--bleu-fonce);


    font-weight:600;


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


}



.bouton-danger {

    background:var(--rouge);

    color:white;

}





/* ==========================================================
   CARTES GENERALES
========================================================== */


.carte {

    background:var(--blanc);


    border:

        1px solid var(--bordure);


    border-radius:var(--rayon);


    padding:18px;


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

}



.carte h2,
.carte h3 {

    margin-top:0;

}





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


table {

    width:100%;


    border-collapse:collapse;


    background:white;

}



thead {

    background:var(--bleu-clair);

}



th {

    text-align:left;


    padding:10px;


    color:var(--bleu-fonce);


    font-size:13px;

}



td {

    padding:10px;


    border-bottom:

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


    font-size:14px;

}



tbody tr:hover {

    background:#f8fbfc;

}





/* ==========================================================
   BADGES
========================================================== */


.badge {

    display:inline-flex;


    align-items:center;


    padding:4px 9px;


    border-radius:20px;


    background:var(--vert-clair);


    color:var(--vert-fonce);


    font-size:12px;


    font-weight:600;

}



.badge-actif {

    background:var(--vert-clair);

    color:var(--vert-fonce);

}



.badge-inactif {

    background:var(--rouge-clair);

    color:var(--rouge);

}





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


.actions-tableau {

    display:flex;


    gap:8px;


    flex-wrap:wrap;

}



.bouton-tableau {

    padding:6px 12px;


    border-radius:8px;


    background:var(--vert);


    color:white;


    font-size:12px;


    font-weight:600;

}



.bouton-tableau-secondaire {

    background:var(--bleu-clair);


    color:var(--bleu-fonce);

}





/* ==========================================================
   ETATS VIDES
========================================================== */


.etat-vide {


    text-align:center;


    padding:40px;


    background:white;


    border-radius:var(--rayon);


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

}



.texte-non-renseigne {

    color:var(--texte-secondaire);


    font-style:italic;

}





/* ==========================================================
   RESPONSIVE GENERAL
========================================================== */


.tableau-responsive {

    width:100%;


    overflow-x:auto;

}



img {

    max-width:100%;

}
/* ==========================================================
   FICHE BENEFICIAIRE - LBC ONE
========================================================== */


.fiche-beneficiaire {

    width:100%;

    max-width:100%;

    overflow-x:hidden;

}




/* =========================
   EN-TÊTE ENFANT
========================= */


.fiche-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;


    margin-bottom:14px;

}



.fiche-identite {

    display:flex;

    align-items:center;

    gap:14px;

}



.fiche-avatar {

    width:58px;

    height:58px;


    border-radius:16px;


    background:var(--bleu-clair);


    display:flex;

    align-items:center;

    justify-content:center;


    color:var(--bleu-fonce);


    font-weight:800;

    font-size:18px;


    overflow:hidden;

}



.fiche-avatar img {

    width:100%;

    height:100%;


    object-fit:cover;

}



.fiche-identite h1 {

    margin:0;


    font-size:26px;

}



.fiche-identite p {

    margin:4px 0 0;


    color:var(--texte-secondaire);

}





.fiche-actions {

    display:flex;

    gap:8px;


    align-items:center;

}





/* =========================
   INDICATEURS
========================= */


.stats-fiche {


    display:grid;


    grid-template-columns:

        repeat(4,1fr);



    background:white;


    border:

        1px solid var(--bordure);



    border-radius:var(--rayon);


    overflow:hidden;


    margin-bottom:16px;


}



.stats-fiche div {


    padding:12px;


    text-align:center;


    border-right:

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


}



.stats-fiche div:last-child {


    border-right:none;


}



.stats-fiche strong {


    display:block;


    color:var(--bleu-fonce);


    font-size:20px;


}



.stats-fiche span {


    color:var(--texte-secondaire);


    font-size:12px;


}



.texte-vert {


    color:var(--vert)!important;


}





/* =========================
   ONGLET
========================= */


.onglets-fiche {


    display:flex;


    gap:28px;


    border-bottom:

        1px solid var(--bordure);


    margin-bottom:18px;


}



.onglets-fiche button {


    border:none;


    background:none;


    padding:8px 0;


    color:var(--texte-secondaire);


    font-weight:600;


    cursor:pointer;


}



.onglets-fiche button.actif {


    color:var(--vert);


    border-bottom:

        3px solid var(--vert);


}





/* =========================
   BLOCS INFORMATIONS
========================= */


.grille-fiche {


    display:grid;


    grid-template-columns:

        repeat(2,minmax(0,1fr));


    gap:18px;


}



.carte-fiche {


    background:white;


    border:

        1px solid var(--bordure);


    border-radius:var(--rayon);


    padding:16px;


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


}



.carte-fiche h2 {


    margin-top:0;


    margin-bottom:12px;


    font-size:18px;


}



.ligne-fiche {


    display:flex;


    justify-content:space-between;


    gap:10px;


    padding:8px 0;


    border-bottom:

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


    font-size:14px;


}



.ligne-fiche:last-child {


    border-bottom:none;


}



.ligne-fiche span {


    color:var(--texte-secondaire);


}





/* =========================
   PLANNING
========================= */


.planning-resume {


    display:flex;


    justify-content:space-between;


    align-items:center;


    margin-bottom:8px;


}





/* =========================
   SEANCES
========================= */


.bloc-large {


    margin-top:18px;


}



.table-fiche {


    width:100%;


}



.table-fiche th {


    background:var(--bleu-clair);


    padding:9px;


    font-size:12px;


}



.table-fiche td {


    padding:9px;


    border-bottom:

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


}





/* =========================
   COMMENTAIRES
========================= */


.commentaire-fiche {


    background:var(--bleu-clair);


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


    padding:12px;


    margin-bottom:10px;


}



.commentaire-entete {


    display:flex;


    justify-content:space-between;


    font-size:12px;


}



.commentaire-fiche p {


    margin-bottom:0;


}
/* ==========================================================
   CORRECTIONS AFFICHAGE GLOBAL
========================================================== */


html,
body {

    max-width:100%;

    overflow-x:hidden;

}



.application,
.zone-principale,
.conteneur {

    max-width:100%;

    min-width:0;

}



.conteneur > * {

    max-width:100%;

}




/* ==========================================================
   AJUSTEMENT FICHE BENEFICIAIRE
========================================================== */


.fiche-beneficiaire table {

    table-layout:fixed;

}



.fiche-beneficiaire td,
.fiche-beneficiaire th {

    word-break:break-word;

}





/* ==========================================================
   RESPONSIVE
========================================================== */


@media(max-width:1100px){


    .fiche-header {

        flex-direction:column;

        align-items:flex-start;

    }



    .fiche-actions {

        width:100%;

        justify-content:flex-start;

    }


}





@media(max-width:900px){


    .grille-fiche {

        grid-template-columns:1fr;

    }



    .stats-fiche {

        grid-template-columns:

            repeat(2,1fr);

    }


}





@media(max-width:600px){


    .stats-fiche {

        grid-template-columns:1fr;

    }



    .fiche-identite {

        flex-direction:column;

        align-items:flex-start;

    }


}





/* ==========================================================
   FIN LBC ONE
========================================================== */

/* Ajustement compact fiche bénéficiaire */

.fiche-header {
    margin-bottom: 8px;
}


.fiche-identite h1 {
    font-size: 24px;
}


.stats-fiche div {
    padding: 8px;
}


.stats-fiche strong {
    font-size: 18px;
}


.grille-fiche {
    gap: 12px;
}


.carte-fiche {
    padding: 12px;
}


.carte-fiche h2 {
    margin-bottom: 8px;
}


.ligne-fiche {
    padding: 5px 0;
}


.bloc-large {
    margin-top: 12px;
}

/* finition fiche bénéficiaire */

.conteneur {
    padding-top: 18px;
}


.fiche-header {
    margin-bottom: 6px;
}


.fiche-identite h1 {
    font-size: 22px;
}


.fiche-avatar {
    width:52px;
    height:52px;
}


.stats-fiche {
    margin-bottom:10px;
}


.stats-fiche div {
    padding:8px;
}


.stats-fiche strong {
    font-size:18px;
}


.onglets-fiche {
    margin-bottom:10px;
}


.carte-fiche {
    padding:12px;
}


.carte-fiche h2 {
    font-size:16px;
}


.ligne-fiche {
    padding:5px 0;
}
/* Dernière optimisation fiche bénéficiaire */

.barre-superieure {
    height: 56px;
}


.conteneur {
    padding-top: 12px;
}


.fiche-identite h1 {
    font-size: 21px;
}


.fiche-identite p {
    font-size: 12px;
}


.stats-fiche {
    margin-top: 6px;
}


.stats-fiche strong {
    font-size: 17px;
}


.onglets-fiche {
    margin-bottom: 8px;
}