/* Couleurs
    Couleur fond : #fafafa
    Couleur survol : #a8082d;
    Couleur texte  : #5b5b5b;
    Couleur bleue disable : 8baecd
    Couleur bleue enabled : 337ab7
    Couleur bleue hover : 23527c
*/
:root {
    /* On lui donne un nom explicite, par exemple --danger-color */
    --danger-color: #dc3545;
    --danger-color-hover: #a8082d;
    --success-color: #198754;
    --success-color-hover: #2ecc71;
    --label-width: 170px;
    --debug-border-width: 0;
    --debug-border-red: solid var(--debug-border-width) red;
    --debug-border-green: solid var(--debug-border-width) green;
    --debug-border-blue: solid var(--debug-border-width) blue;
}
@font-face {
    font-family: 'Lexend';
    src: url('../fonts/Lexend-VariableFont_wght.ttf') format('truetype-variations'), /* Format spécifique Variable Font */
    url('../fonts/Lexend-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Indique au navigateur que le fichier couvre de 100 à 900 */
    font-style: normal;
    font-display: swap;
}

/* reset */
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    background-color: #fafafa;
    font-family: 'Lexend', sans-serif;
    font-size: 13px;
    font-weight: 300; /* Léger pour le confort de lecture */
    color: #5b5b5b;
    min-height: 100vh; /* Assure que le body prend au moins toute la hauteur de la fenêtre */
}

h1 {
    margin-top: 24px; /* Plus d'espace au-dessus pour séparer les sections */
    margin-bottom: 8px; /* Moins d'espace en dessous pour le lier au texte suivant */
    font-size: 24px;
    font-weight: 400; /* Un tout petit peu plus épais pour le titre principal */
    color: #333;
}

h2 {
    font-size: 20px;
    font-weight: 400;
    color: #555; /* Légèrement plus clair pour la hiérarchie */
    margin-top: 24px; /* Plus d'espace au-dessus pour séparer les sections */
    margin-bottom: 8px; /* Moins d'espace en dessous pour le lier au texte suivant */
}

h3 {
    margin-top: 10px;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 400;
}

h4 {
    margin-top: 10px;
    margin-bottom: 8px;
    border-bottom: solid 1px #ddd;
    font-size: 15px;
    font-weight: 400;
}

p {
    margin-bottom: 12px;
    line-height: 1.5; /* Important pour le confort de lecture sur les longs textes */
}

input[type=text], input[type=password], textarea, select {
    line-height: 18px;
    padding: 1px 3px;
    background: #fff;
    font-size: 13px;
    border: solid 1px #c5d3d6;
    border-radius: 3px;
    font-family: 'Lexend', sans-serif;
}

input[type=text] {
    padding-left: 4px !important;
}
select {
    padding-left: 0 !important;
}
    input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
        background-color: #ffffcc;
        outline: none;
    }

    input[type=text]::placeholder {
        font-family: 'Lexend', sans-serif !important;
        opacity: 0.7; /* Optionnel : pour ajuster la clarté du texte indicatif */
    }

/* Boutons génériques */
input[type=submit] {
    border: solid 1px #c5d3d6;
    border-radius: 3px;
    padding: 7px;
    color: #999;
    text-decoration: none;
    background-color: #f6f6f6;
    -webkit-transition-duration: .5s; /* Safari */
    transition-duration: .5s;
    cursor: pointer;
    font-family: 'Lexend', sans-serif !important;
    font-size: 14px; /* Ajustez la taille selon votre besoin */
    font-weight: 500; /* Lexend est très jolie en Medium (500) */
    /* Styles optionnels pour un bouton moderne */
    text-transform: none;
}

    input[type=submit]:hover {
        background-color: #f0f0f0;
        color: #a8082d;
    }

table {
    border-collapse: collapse;
    /*width: 100%;*/
}

    table tr {
        width: 100%;
    }


td.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*max-width: 0;*/
}


.login-footer {
    flex-shrink: 0; /* Empêche le footer de s'écraser */
    padding: 15px;
    text-align: center;
    background-color: #f8f9fa;
    font-family: 'Lexend', sans-serif;
    font-size: 12px;
    color: #6c757d;
    border-top: 1px solid #dee2e6;
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* On force 100vh fixe au lieu de min-height */
    margin: 0;
}



.main {
    border: var(--debug-border-red);
    flex: 1;
    padding: 15px 10px;
}

.container-flex-row {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
}

.icon-button {
    display: inline-flex; /* Permet d'aligner les boîtes côte à côte */
    align-items: center; /* Centrage vertical du symbole */
    justify-content: center; /* Centrage horizontal du symbole */
    width: 24px; /* Largeur fixe */
    height: 24px; /* Hauteur fixe */
    font-size: 14px; /* Taille du symbole (un peu moins que 16 pour respirer) */
    line-height: 1; /* Évite les décalages de interligne */
    overflow: hidden; /* Sécurité : rien ne dépasse */
    border: solid 1px #c5d3d6;
    background-color: #f6f6f6;
    border-radius: 3px;
    padding: 3px;
}

.icon-bouton-rouge:hover {
    color: var(--danger-color) !important;
}

.icon-bouton-vert:hover {
    color: var(--success-color) !important;
}

.icon-button-bleu:hover {
    color: #3498db !important;
}



.pills {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}

    .pills li a {
        display: block;
        padding: 8px 16px;
        text-decoration: none;
        color: #337ab7;
        border-radius: 4px;
        margin-right: 5px;
    }

        .pills li a:hover {
            background-color: #eeeeee;
        }

        /* Style "Pill" actif */
        .pills li a.active {
            background-color: #337ab7;
            color: white !important;
        }

    /* Remplace le float:right */
    .pills li.align-right {
        margin-left: auto;
    }

/* Gestion de l'affichage du contenu */
.tab-content {
    display: none;
    padding: 15px 0;
    border: var(--debug-border-blue);
    /*width: 574px;*/
}

    .tab-content.default-open {
        display: block;
    }


/* Le conteneur (Bouton ou Lien) */
.btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    color: #333;
    cursor: pointer;
}

    /* La règle spécifique pour le SVG à l'intérieur du conteneur */
    .btn-with-icon svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0; /* Empêche l'écrasement de l'icône */
        /*fill: currentColor;*/ /* L'icône hérite de la couleur du texte */
        display: block; /* Supprime l'espace résiduel sous l'image */
        /* Centrage visuel fin */
        position: relative;
        top: 0px; /* Ajuste à 1px ou -1px si ton œil voit un décalage */
    }

    /* Optionnel : Changement de style au survol */
    .btn-with-icon:hover {
        /*background-color: #eee;*/
        color: #0056b3; /* L'icône changera de couleur aussi grâce à currentColor */
    }



/* On cible le conteneur de la CheckBoxList */
.cbl {
    display: flex;
    flex-wrap: wrap; /* Permet le retour à la ligne automatique */
    gap: 2px 8px; /* Espace entre les blocs (vertical horizontal) */
}

    /* ASP.NET génère un span pour chaque item en mode Flow */
    .cbl > span {
        display: inline-flex;
        align-items: center; /* Aligne verticalement la case et le texte */
        background: #f8f9fa; /* Optionnel : léger fond pour voir le bloc */
        padding: 2px 4px;
        border-radius: 4px;
        white-space: nowrap; /* Empêche le texte de se couper en deux */
    }

    /* La case à cocher */
    .cbl input {
        margin: 0 2px 0 0; /* Espace à droite de la case */
        cursor: pointer;
    }

    /* Le texte associé */
    .cbl label {
        cursor: pointer;
        margin: 0;
        padding: 0;
        line-height: 1;
    }