/* ======================================
            LibFusion - v1.0.0
  Lib perso applicable à tous les projets
            ====================
⚠️ Implémentation indispensable pour utiliser LibFusion
   - Settings-Nom-du-projet.css [contenant les variables :root{}]
   - Fichiers @font : ../font/nom-de-la-font/...
========================================= */


/* Constructions class de Police */

/* POLICE MAJEUR */

.font-1-light {
    font-family: var(--font-family-base);
    font-weight: 200;
}

.font-1-regular {
    font-family: var(--font-family-base);
    font-weight: 400;
}

.font-1-SemiBold {
    font-family: var(--font-family-base);
    font-weight: 600;
}

.font-1-bold {
    font-family: var(--font-family-base);
    font-weight: 700;
}



/* POLICE MINEUR */

.font-2-light {
    font-family: var(--font-family-secondary);
    font-weight: 200;
}

.font-2-regular {
    font-family: var(--font-family-secondary);
    font-weight: 400;
}

.font-2-SemiBold {
    font-family: var(--font-family-secondary);
    font-weight: 600;
}

.font-2-bold {
    font-family: var(--font-family-secondary);
    font-weight: 700;
}

/*************************/
/* 0. GLOBAL RESETS */
/*************************/

/* Reset de la typographie globale */
body, h1, h2, h3, p, small {
    margin: 0;
    font-family: var(--font-family-base);
    color: var(--color-text-body);
}

/*****************************/
/*    Classes base           */
/*   RATIONALISÉES           */
/*****************************/

html, body {
    /* Utilise la police de base du projet (Montserrat) */
    font-family: var(--font-family-base);
    font-size: var(--TypoSize-default);
}

body {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    /* Correction : Utilise la variable du texte principal */
    color: var(--color-text-body);
}



h1 {
    font-size: 2.2rem;
    font-weight: 400;
    display: flex;
    margin: 0;
    color: var(--color-text-dark);
}

h2, h3 {
    font-size: 1.6rem;
    font-weight: 600;
    display: flex;
    margin: 0;
    color: var(--color-text-dark);
}

p, small {
    font-size: 0.8rem;
    margin: 0;
    font-family: var(--font-family-base); /* Utilise la variable standard */
    color: var(--color-text-body); /* Utilise la variable standard */
}


* {
    box-sizing: border-box;
}


/* --- Responsive MainLayout : Limitation pour Très Grands Écrans (min-width: 1600px) --- */
@media (min-width: 1600px) {
    .main-container {
        max-width: 1920px; /* Limite la largeur du contenu max */
        margin-left: auto;
        margin-right: auto; /* Centre le contenu horizontalement */
    }
}


/*****************************/
/* Classes de Titre et Texte */
/*   RATIONALISÉES           */
/*****************************/
.title {
    display: flex;
    font-size: 2.6rem;
    color: var(--color-text-link); /* Utilise la couleur principale du projet */
    font-weight: 800; /* Gardé car c'est un titre principal fort */
    font-family: var(--font-family-base);
}

.title-medium {
    display: flex;
    font-size: 1.6rem;
    color: var(--color-text-link);
    font-weight: 700; /* Choix du 700 standard */
    font-family: var(--font-family-base);
}

.title-small {
    display: flex;
    font-size: 1.3rem;
    color: var(--color-text-link);
    font-weight: 700;
    font-family: var(--font-family-base);
}

.text {
    display: flex;
    font-size: 1rem;
    color: var(--color-text-body); /* Couleur du texte par défaut */
    font-weight: 400;
    line-height: 2rem;
    font-family: var(--font-family-secondary);
}


/****************************/
/*       Font-Weight       */
/***************************/

.font-bold {
    font-weight: 700;
}

.font-semiBold {
    font-weight: 600;
}

.font-regular {
    font-weight: 400;
}

.font-light {
    font-weight: 200;
}

/****************************/
/*       Font-size         */
/***************************/

.f-size-extra-small {
    font-size: 0.6rem;
}

.f-size-small {
    font-size: 0.8rem;
}

.f-size-normal {
    font-size: 1rem;
}

.f-size-medium {
    font-size: 1.2rem;
}

.f-size-large {
    font-size: 1.5rem;
}

.f-size-big {
    font-size: 1.6rem;
}

.f-size-extra-big {
    font-size: 1.8rem;
}

.f-size-double {
    font-size: 2rem;
}

.f-size-extra-double {
    font-size: 2.5rem;
}

.f-size-triple {
    font-size: 3rem;
}






/**************************************/
/* COULEURS ET BACKGROUNDS GENERIQUES */
/*************************************/

/* Classes de couleur basées sur variables (Style LIB2) */
.colorCTA {
    color: var(--color-primary);
}

.txt-color-onCTA {
    color: var(--color-txt-primary);
}

.colorSuccess {
    color: var(--color-success);
}

.colorWhite {
    color: var(--color-white);
}

.colorVS {
    color: var(--color-text-on-light);
}
.colorVioletShadow {
    color: var(--color-violet);
}

.txt-color-1 {
    color: var(--color-text-body);
}

.txt-color-2, .txt-color-white {
    color: var(--color-white);
}

.warning-message, .colorAlert {
    color: var(--color-error);
}
.colorWarning {
    color: var(--color-warning);
}
.colorWarning-light {
    color: var(--color-warning-light);
}




/*************************************/
/* BACKGROUNDS GENERIQUES (identiques) */
/*************************************/
.bgColor-CTA {
    background-color: var(--color-primary);
}

.bgColor-blueHover {
    background-color: var(--color-blue-clear);
}

.bgColor-purpleVS {
    background-color: var(--color-text-on-light);
}

.bgColor-error {
    background-color: var(--color-error);
}

.bgColor-success {
    background-color: var(--color-success);
}

.bgColor-info {
    background-color: var(--color-info);
}

.bgColor-warning {
    background-color: var(--color-warning);
}

.bgColor-backGoogle {
    background-color: var(--color-background-light);
}

.bgColor-ongletGoogle {
    background-color: var(--color-accent-light);
}

.color-back-grey {
    background-color: var(--color-background-grey);
}

.bgColor-disabled {
    background-color: var(--color-disabled);
}

.bgColor-white{
    background-color: var(--color-white);
}

/*************************************/
/* CONTAINER & FLEXBOX GENERIQUES (identiques) */
/*************************************/

.container-row {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
}

.container-col {
    display: flex;
    flex-direction: column;
}

.container-wrap {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 2%;
}

.row-direction {
    flex-direction: row;
}

.col-direction {
    flex-direction: column;
}

.grow1 {
    flex-grow: 1;
}
.gap1 > * {
    margin-right: 1rem;
}
.display-none {
    display: none;
}

.w100 {
    width: 100%;
}

.w80 {
    width: 80%;
}

.w50 {
    width: 50%;
}

.w-auto {
    width: auto;
}

.h-auto {
    height: auto;
}

.h100 {
    height: 100vh;
}
.align-center {
    align-items: center;
}

.align-top {
    vertical-align: top;
}

.align-it-end {
    align-items: flex-end;
}


.align-it-start {
    align-items: flex-start;
}

.j-start {
    justify-content: flex-start;
}

.j-end {
    justify-content: flex-end;
}

.j-center {
    justify-content: center;
}

.j-around {
    justify-content: space-around;
}

.txt-center {
    text-align: center;
}

.txt-right {
    text-align: right;
}

.txt-left {
    text-align: left;
}


/*********************************************/
/* BORDERS GENERIQUES */
/*************************************/

/* Classes de bordures communes (identiques) */
.border-conf {
    border-top: solid var(--color-accent-light) 2px;
    border-bottom: solid var(--color-accent-light) 2px;
}

.border-conf-top {
    border-top: solid var(--color-accent-light) 2px;
}

.border-conf-bottom {
    border-bottom: solid var(--color-accent-light) 2px;
}

.border-blue-dark {
    border: solid var(--color-text-on-light) 2px;
    border-radius: var(--radius);
}

.border-grey {
    border: solid var(--color-grey) 2px;
    border-radius: var(--radius);
}

.border-cta, .border-form {
    border: solid var(--color-primary) 2px;
    border-radius: var(--radius);
}

.border-form-2 {
    border: solid var(--color-accent-light) 2px;
    border-radius: var(--radius);
}

/* Classes de bordures DEBUG */
.border-red {
    border: solid red 1px;
}

.border-blue {
    border: solid blue 1px;
}

.border-black {
    border: solid black 1px;
}




/*************************/
/*************************/
/*************************/
/* INPUT Formulaire (uniques à LIB2) */
/************************/

.form-group {
    margin: 0.5rem 0;
    color: var(--color-text-on-light);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 150px;
}

    .form-group label {
        color: var(--colorVS);
        margin-bottom: 0.25rem;
        font-weight: bold;
        font-size: 1rem;
    }



input + label,
select + label,
textarea + label,
label + input,
label + select,
label + textarea {
    display: block;
}

input, select {
    height: var(--inputWidthNormal);
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.5rem;
    margin-top: 0.25rem;
    color: var(--color-text-input);
    font-size: 0.9rem;
    outline-style: outset;
    outline-color: var(--color-primary);
    outline-width: 1px;
    border-radius: var(--radius);
    font-family: var(--font-family-base);
    font-weight: 400;
}

textarea {
    height: var(--inputWidthDouble);
    max-height: var(--inputWidthDouble);
    min-height: var(--inputWidthDouble);
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    margin-top: 0.25rem;
    padding: 0.2rem 0.5rem;
    color: var(--color-text-input);
    font-size: 0.9rem;
    outline-style: outset;
    outline-color: var(--color-primary);
    outline-width: 2px;
    border-radius: var(--radius);
    font-family: var(--font-family-base);
    font-weight: 400;
}

.inputselect {
    height: var(--inputWidthNormal);
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.25rem;
    padding: 0.2rem 0.5rem;
    color: var(--color-text-input);
    font-size: 0.9rem;
    outline-style: outset;
    outline-color: var(--color-primary);
    outline-width: 2px;
    border-radius: var(--radius);
    font-family: var(--font-family-base);
    font-weight: 400;
}

.inputcheckbox {
    height: var(--inputWidthNormal);
    width: var(--inputWidthNormal);
    box-sizing: border-box;
    margin-top: 0.5rem;
    padding: 0.2rem 0.5rem;
    outline-style: outset;
    outline-color: var(--color-primary);
    outline-width: 2px;
    border-radius: var(--radius-double);
}


/*************************/
/* 1. COMPOSANTS VISUELS STANDARDS (UMD & DocumentMain) */
/*************************/

/* Panneau / Carte Légère (absorbe .info-panel, .doc-card base) */
.panel-card {
    background: var(--color-background-panel); /* Fond léger */
    border-radius: var(--radius-double);
    box-shadow: var(--shadow-card-light);
    padding: 1rem 1.5rem;
    user-select: none;
    transition: box-shadow 0.3s ease;
}

    /* Surcharge de fond pour les cartes blanches (absorbe .doc-card) */
    .panel-card.bg-white {
        background: var(--color-white);
    }

    .panel-card:hover {
        box-shadow: var(--shadow-card-hover);
    }


/* En-tête cliquable (absorbe .info-header) */
.link-header {
    display: flex;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    gap: 1rem;
    padding: 0.5rem 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text-link);
    transition: color 0.3s ease;
}

    .link-header:hover {
        color: var(--color-primary-hover);
    }


/* Badge Circulaire (absorbe .count-badge base) */
.badge-circle {
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    transition: background-color 0.3s ease;
}

    /* États du badge */
    .badge-circle.active {
        background-color: var(--color-primary);
        color: var(--color-white);
    }

    .badge-circle.inactive {
        background-color: #e0e0e0; /* Couleur grise spécifique */
        color: #888; /* Couleur de texte spécifique */
    }

/* Liste de Documents/Éléments avec Espacement Vertical (absorbe .documents-list) */
.flex-v-gap-1 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Classes pour les flèches d'expansion (absorbe .arrow-icon) */
.arrow-icon-transition {
    width: 20px;
    height: 20px;
    margin-left: auto;
    transition: transform 0.3s ease;
}

    .arrow-icon-transition.rotated {
        transform: rotate(180deg);
    }



/*************************/
/* 2. WIDGETS ET INDICATEURS */
/*************************/

/* Badge Générique (utilisé pour les environnements) */
.fusion-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-double); /* Utilise la variable de Settings */
    white-space: nowrap;
}

    /* Variantes de couleur pour .fusion-badge (Utilisent des couleurs spécifiques non définies en variables pour les environnements DEV/PROD) */
    .fusion-badge.dev {
        background-color: #fee2e2; /* Rouge pâle */
        color: #b91c1c; /* Rouge foncé */
    }

    .fusion-badge.prod {
        background-color: #dcfce7; /* Vert pâle */
        color: #15803d; /* Vert foncé */
    }



/* Layout de l'en-tête standard des cartes (fusion-header-actions) */
.fusion-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Pas de gap ici, car l'espacement est géré par la marge des titres ou le gap du .fusion-actions-group */
}

/* Conteneur d'actions dans l'en-tête (fusion-actions-group) */
.fusion-actions-group {
    display: flex;
    gap: 0.5rem;
}




/* Indicateur de Statut avec Point (.status-indicator) */
.status-indicator-wrapper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    color: var(--color-text-dark); /* Utilise la variable de Settings */
}

    .status-indicator-wrapper .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #9ca3af; /* Gris par défaut */
    }

    /* Variantes d'état pour le point (dot) */
    .status-indicator-wrapper.running .dot {
        background-color: var(--color-success); /* Utilise la variable de Settings */
    }

    .status-indicator-wrapper.stopped .dot {
        background-color: var(--color-error); /* Utilise la variable de Settings */
    }

/* Bouton d'Action Circulaire (utilisé dans les listes ou statuts) */
.action-btn-circle {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-circle); /* Utilise la variable de Settings */
    background-color: var(--color-background-light); /* Utilise la variable de Settings (ex: #e5e7eb) */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    padding: 0.2rem;
    cursor: pointer;
}

    .action-btn-circle:hover {
        background-color: var(--color-background-hover); /* Utilise la variable de Settings (ex: #d1d5db) */
    }

    /* Variantes d'action (surcharges de couleur au survol) */
    .action-btn-circle.danger:hover {
        background-color: var(--color-error-hover); /* Utilise la variable de Settings */
    }

    .action-btn-circle.warning:hover {
        background-color: var(--color-warning-hover); /* Utilise la variable de Settings */
    }

    .action-btn-circle img {
        width: 16px;
        height: 16px;
    }





/**************************************************/
/* Barre de progression indéterminée (structure) */
/**************************************************/

.progress-bar {
    position: relative;
    /* La largeur sera définie par le composant appelant (.loading-container) ou une autre classe de layout */
    height: 6px;
    background: var(--color-background-light); /* Couleur de fond grise (utilise la variable de Settings) */
    border-radius: var(--radius); /* Utilise la variable de Settings */
    overflow: hidden;
}

    /* Barre animée à l'intérieur de .progress-bar */
    .progress-bar .indeterminate {
        position: absolute;
        top: 0;
        left: -40%;
        width: 40%;
        height: 100%;
        /* Gradient spécifique pour ce style de progression */
        background: linear-gradient(90deg, #4facfe, #00f2fe);
        border-radius: var(--radius);
        animation: indeterminate 2s infinite ease-in-out, pulse 1.8s infinite ease-in-out;
    }

/* Animation de défilement */
@keyframes indeterminate {
    0% {
        left: -40%;
    }

    50% {
        left: 60%;
    }

    100% {
        left: 100%;
    }
}

/* Effet pulse doux */
@keyframes pulse {
    0%, 100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}
/*************************/
/* DIVERS (identiques/uniques) */
/************************/

.cursor-pointer {
    cursor: pointer;
    padding: 8px 12px;
    min-height: 44px;
}

.overflowXHidden {
    overflow-x: hidden;
}

.hidden {
    display: none;
}

.displayFlex {
    display:flex;
}

.flexWrap {
    flex-wrap: wrap;
}

.z-index1 {
    z-index: 1;
}

.Z-index99 {
    z-index: 99;
}

.Z-index999 {
    z-index: 999;
}

.warp-word {
    word-break: break-all; /* Coupe le mot partout si nécessaire */
}

.word-break {
    word-break: break-all;
    overflow-wrap: break-word;
    max-width: 100%;
}

.anchor {
    display: block;
    height: auto; /*same height as header*/
    margin-top: 0; /*same height as header*/
    visibility: hidden;
}

.arrow-icon {
    width: 5rem;
    height: auto;
    opacity: 0.8;
}

#balise_noscript {
    color: var(--color-anthracite);
    font-size: 20px;
    padding-left: 1rem;
}

.no-js #loader {
    display: none;
}

.js #loader {
    display: block;
    position: absolute;
    left: 5rem;
    top: 0;
}

.se-pre-con {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(img/ico-svg/balls.svg) center no-repeat var(--color-blue-light);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.etoile {
    font-size: 4rem;
}


overflowHidden {
    overflow: hidden;
}




/**********************************************/
/* SECTION 1: LIENS (Liens, Navigation, A) */
/* -> Styles légers pour les liens textuels (IDENTIQUE TABLETTE/DESKTOP) */
/**********************************************/
/* Réinitialisation de base pour tous les liens */
a {
    text-decoration: none;
    color: var(--color-text-link);
    transition: color 0.3s ease;
}

    a:hover {
        text-decoration: underline;
        color: var(--color-primary-hover);
    }

/* Nouvelle Classe de base pour les liens textuels (simplification de .link-log, .nav-link) */
.link-base { /* Cible les liens qui sont du texte simple, pas un bouton */
    font-size: clamp(1.1rem, 3vw, 1.4rem); /* Taille de lien lisible */
    cursor: pointer;
    font-weight: 400;
    padding: 0.5rem; /* Augmente la zone de clic/touch sans changer l'apparence */
    display: inline-block; /* Pour que le padding fonctionne */
}
/* Lien pour le Log (spécificité) */
.link-log {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}


/* Styles pour les liens de navigation */
/*.nav-link {
    text-decoration: none;
    color: var(--color-text-dark);*/
    /* Taille de police réduite pour Desktop/Grand écran */
    /*font-size: 1.1rem;
    padding: 0.5rem 1rem;*/ /* Réduction du padding pour le bureau */
    /*display: flex;
    align-items: center;
    gap: 0.5rem;*/ /* Réduction de l'espacement */
/*}*/

/*    .nav-link.primary {
        background-color: var(--color-primary);
        color: var(--color-white);
        border-radius: var(--radius);
    }*/

        /*.nav-link:hover {*/ /*.primary*/
            /*background-color: var(--color-primary-hover);
            text-decoration: none;
        }*/

/**************************************************/
/* SECTION 2: BOUTONS (BASE & TAILLES - DESKTOP PAR DÉFAUT) */
/* -> Les styles de base sont les petites cibles pour la souris (2.75rem min) */
/**************************************************/
/* 1. CLASSE DE BASE (.btn) - Toutes les propriétés communes */
button .button, .btn, .btn-view-action, .btn-view, .btnedit, .btndelete, .btn-add, .btndelete-all {
/*    background-color: var(--color-primary);
    color: var(--color-text-button);*/
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease-in-out;
    border-radius: var(--radius);
    /* Flexbox pour l'alignement Icône/Texte */
    display: flex;
    /*gap: 0.5rem; *//* Espacement réduit pour Desktop */
    justify-content: center;
    align-items: center;
    text-decoration: none;
    /* Typographie: Taille réduite pour Desktop */
    font-weight: 600;
    font-size: 1.1rem; /* Taille Desktop */
    line-height: 1.2;
}

/* Button classique CTA */
.button, .btn, .btn-view-action, .btn-view, .btnedit,.btn-add {
    background-color: var(--color-primary);
    color: var(--color-text-button);
}
    /* :hover (Appliqué aux boutons primaires par défaut) */
    .button:hover, .btn:hover, .btn-view-action:hover, .btn-view:hover,
    .btnedit:hover, .btn-icon-base:hover {
        background-color: var(--color-primary-hover);
        transform: scale(1.02);
        color: var(--color-white);
        text-decoration: none;
    }

/**********************/

/* Button close / error */
.btndelete, .btndelete-all, btn-delete {
    background-color: var(--color-error);
    color: var(--color-text-button);
}
    .btndelete:hover, .btndelete-all:hover, btn-delete:hover {
        background-color: var(--color-error-hover);
        transform: scale(1.02);
        color: var(--color-white);
        text-decoration: none;
    }


    /******************/


/* Bouton d'ajout spé green */
.btn-add {
    background-color: var(--color-success);
    box-shadow: 0 3px 8px rgba(var(--color-success-rgb), 0.3);
}

    .btn-add:hover {
        background-color: var(--color-success-hover);
    }

    /**********************/


    /* :active */
    .button:active, .btn:active, .btnedit:active, .btndelete:active, .btn-view-action:active, .btn-view:active, .btn-add:active, .btndelete-all:active {
        background-color: var(--color-primary-active);
        transform: scale(0.98);
    }
    /* :disabled */
    .button:disabled, .btn:disabled, .btnedit:disabled, .btndelete:disabled, .btn-add:disabled, .btndelete-all:disabled, .btn-view-action:disabled, .btn-view:disabled {
        background-color: var(--color-disabled);
        color: var(--color-text-button);
        cursor: not-allowed;
        transform: none !important;
        opacity: 0.7;
    }


/* C. Bouton Icône Générique (style transparent sans fond) */
/*.btn-icon {
    background: none;
    border: none;
    margin: 0;
    padding: 0.5rem;
    color: var(--color-text-dark);
}

    .btn-icon:hover {
        background-color: var(--color-background-light);
    }*/



/* 2. CLASSES DE TAILLES (Dimensions pour Desktop) */
/* A. Boutons Principaux (Standard/Large) */
/*.button, .btn {
    width: clamp(10rem, 15vw, 20rem);*/ /* Largeur réduite */
    /*min-height: 2.75rem;*/ /* Hauteur Desktop */
    /*margin: 1rem 0.5rem;*/ /* Marge Desktop */
    /*padding: 0.75rem 1.25rem;
}*/
.btnSizeAuto {
    width: auto;
    height: auto;
}
.btnSize1 {
    width: 3rem;
    height: 3rem;
}

.btnSize2 {
    width: 4rem;
    height: 4rem;
}

.btnSize3 {
    width: 5rem;
    height: 5rem;
}


.btnSize1Wauto {
    width: auto;
    height: 3rem;
}


.btnSize2Wauto {
    width: auto;
    height: 4rem;
}
.btnSize3Wauto {
    width: auto;
    height: 5rem;
}


/* B. Boutons d'Action (Vue/Petits) */
    /*.btn-view-action, .btn-view {*/
    /*width: clamp(6rem, 10vw, 15rem);*/ /* Largeur réduite */
    /*min-height: 2.5rem;*/ /* Hauteur Desktop */
    /*margin: 0.5rem;*/ /* Marge Desktop */
    /*padding: 0.75rem 1rem;
}*/
/* C. Boutons d'Icônes (Éditer/Supprimer) */
/*.btnedit, .btndelete {*/
    /* Taille de cible Desktop (souris précise) */
    /*margin: 0.75rem;
    padding: 0.5rem;
    border-radius: 50%;
}*/

/*.btnAction {
    margin: 0;
    padding: 0;
}*/

/**************************************************/
/* SECTION 3: COULEURS SÉMANTIQUES & ÉTATS (Identique Tablette/Desktop) */
/**************************************************/

/* B. Bouton Supprimer Tout */
/*.btndelete-all {*/
    /*width: auto;
    min-height: 2.75rem;*/ /* Hauteur Desktop */
    /*background-color: var(--color-error);
    color: var(--color-white);*/
    /*padding: 0.75rem 1.5rem;*/ /* Padding Desktop */
/*}*/

    /*.btndelete-all:hover {
        background-color: var(--color-error-hover);
    }*/

/* D. Bouton de Fermeture (spécial) */
/*.btn-close {
    background: none;
    border: none;
    font-size: 1.2rem;*/ /* Taille Desktop */
    /*font-weight: 700;
    cursor: pointer;
    color: var(--color-text-dark);
    margin: 0;
    padding: 0.5rem;*/ /* Padding Desktop */
/*}

    .btn-close:hover {
        color: var(--color-error);
    }*/



/*.btn-icon-base:hover {
    background: var(--color-background-hover);*/ /* Ou une couleur semi-transparente pour le mode "sur fond coloré" */
    /* Note : Le .doc-card utilisera une couleur blanche semi-transparente en surcharge locale. */
/*}*/

/*.btnedit:hover, .btndelete:hover {
    background-color: var(--color-background-light);
    transform: scale(1.1);
}*/


/* GESTION DES IMAGES/ICÔNES */
/*.btnedit img, .btndelete img {*/
    /*width: 1.2rem;*/ /* Icône de taille Desktop */
    /*height: 1.2rem;*/
    /*object-fit: contain;
}*/

/*.btn-delete img, .btndelete img {
    filter: brightness(0) invert(10%) sepia(90%) saturate(6000%) hue-rotate(350deg);
}*/



/* Bouton Icône Rond (btn-icon-base) */
/*.btn-icon-base {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: var(--radius-circle);
    transition: background 0.2s;*/
    /* Utilise la couleur de texte du composant parent par défaut */
    /*color: inherit;
}



    .btn-icon-base img {*/
        /*width: 20px;
        height: 20px;*/
        /* Règle importante pour que les images s'adaptent */
        /*display: block;
    }*/







/* ========================================= */
/* 3. MODALES / POPUPS (Styles Desktop First) */
/* ========================================= */

/* Fond de la modale (BACKDROP) */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-backdrop);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

    .modal-backdrop.hidden {
        display: none;
    }

/* --- CONTENEURS DE MODALE (TAILLES SPÉCIFIQUES) --- */

/* 1. Conteneur Grande Modale (Pleine Page ou Formulaire Complexe) - FORMAT EXISTANT */
.modal-container {
    max-height: 80vh;
    max-width: 1200px;
    width: 80%;
    background-color: var(--color-white);
    border-radius: var(--radius-double);
    box-shadow: var(--shadow-modal);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

/* 2. Conteneur Modale de Dialogue / Alerte (Compacte) - NOUVEAU FORMAT */
.modal-dialog {
    /* Dimensions pour un dialogue standard et compact */
    max-height: 95vh;
    max-width: 500px;
    width: 90%;
    background-color: var(--color-white);
    border-radius: var(--radius-double);
    box-shadow: var(--shadow-modal);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}


/* --- STRUCTURE INTERNE COMMUNE (Utilisée par .modal-container et .modal-dialog) --- */

/* 1. Header (Titre, Icône, Fermeture) */
.modal-header {
    display: flex;
    flex-direction: row;
    padding: 1rem;
    gap: 1rem;
    align-items: center;
    font-size: 1.5rem;
}

    .modal-header .title {
        flex-grow: 1;
        font-size: 1.5rem;
    }

/* 2. Corps (Contenu) */
.modal-body {
    flex-grow: 1;
    overflow: hidden;
    padding: 1rem;
}

    /* Scrollable interne du corps de la modale */
    .modal-body .scrollable {
        overflow: auto;
        height: 100%;
        white-space: pre-line;
    }

/* 3. Footer (Actions) */
.modal-footer {
    display: flex;
    flex-direction: row;
    padding: 1rem;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* --- Icones de Contexte --- */

.modal-icon-wrapper ::deep svg {
    height: 2rem;
    width: 2rem;
}

.modal-icon-wrapper.info ::deep svg path {
    fill: var(--color-info);
}

.modal-icon-wrapper.warning ::deep svg path {
    fill: var(--color-warning);
}

.modal-icon-wrapper.error ::deep svg path {
    fill: var(--color-error);
}

.modal-icon-wrapper.success ::deep svg path {
    fill: var(--color-success);
}

/* --- Boutons Spécifiques --- */

/* Bouton de Fermeture Circulaire */
.btn-close-circle {
    background-color: #bfbfbf;
    border-radius: var(--radius-circle);
    height: 2rem;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-size: 1.5rem;
    line-height: 1.2rem;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease;
}

    .btn-close-circle:hover {
        background-color: #b1b1b1;
    }

    .btn-close-circle:active {
        background-color: #8f8f8f;
    }

/* Bouton Secondaire Clair pour le Footer de la modale */
.btn-secondary-light {
    background-color: #bfbfbf;
    color: var(--color-text-dark);
    width: unset !important;
}

    .btn-secondary-light:hover {
        background-color: #b1b1b1;
    }

    .btn-secondary-light:active {
        background-color: #8f8f8f;
    }






/* ========================================= */
/* 3. MODALES / POPSUPS (Styles Desktop First) */
/* ========================================= */

/* Fond de la modale (BACKDROP) */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-backdrop);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

    .modal-backdrop.hidden {
        display: none;
    }

/* Conteneur principal de la grande modale (Format existant pour Pleine Page/Formulaires complexes) */
.modal-container {
    max-height: 80vh;
    max-width: 1200px;
    width: 80%;
    background-color: var(--color-white);
    border-radius: var(--radius-double);
    box-shadow: var(--shadow-modal);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

/* --- STRUCTURE INTERNE COMMUNE --- */

/* 1. Header */
.modal-header {
    display: flex;
    flex-direction: row;
    padding: 1rem;
    gap: 1rem;
    align-items: center;
    font-size: 1.5rem;
}

    .modal-header .title {
        flex-grow: 1;
        font-size: 1.5rem;
    }

/* 2. Corps */
.modal-body {
    flex-grow: 1;
    overflow: hidden;
    padding: 1rem;
}

    .modal-body .scrollable {
        overflow: auto;
        height: 100%;
        white-space: pre-line;
    }

/* 3. Footer */
.modal-footer {
    display: flex;
    flex-direction: row;
    padding: 1rem;
    gap: 0.5rem;
    justify-content: flex-end;
}

/*********************************/
/*********************************/
/********************************/

/* --- Boutons Spécifiques --- */

/* Bouton de Fermeture Circulaire (S'assure d'avoir la base de bouton pour le font-size/color, puis surcharge) */
.btn-close-circle {
    /* ... (Règles inchangées, qui devraient être ici pour le bouton de fermeture) ... */
    /* Base de style circulaire */
    background-color: #bfbfbf;
    border-radius: var(--radius-circle);
    height: 2rem;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-size: 1.5rem;
    line-height: 1.2rem;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease;
}

    .btn-close-circle:hover {
        background-color: #b1b1b1;
    }

    .btn-close-circle:active {
        background-color: #8f8f8f;
    }

/* Bouton Secondaire Clair (Utilisé dans le footer) */
.btn-secondary-light {
    /* Cette classe est ajoutée APRES .button dans le Razor, elle surcharge donc couleur et fond */
    background-color: #bfbfbf;
    color: var(--color-text-dark);
}

    .btn-secondary-light:hover {
        background-color: #b1b1b1;
    }

    .btn-secondary-light:active {
        background-color: #8f8f8f;
    }



/* ======================================== */
/* 4. BADGES ET ÉTIQUETTES */
/* ======================================== */

/* Style de base pour tout Badge */
.badge {
    /* Style général du texte et de la forme */
    display: inline-block;
    /*color: var(--color-white);*/
    font-size: 1rem;
    font-weight: 600;
    padding: 0.25em 0.6em;
    border-radius: var(--radius-xxl); /* Coins très arrondis */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-bottom: var(--color-border-primary) 3px solid;
}

    /* Couleurs de badge par défaut (à surcharger par des classes de projet si nécessaire) */
    .badge.primary {
        background-color: var(--color-primary);
    }


    .badge.secondary {
        background-color: var(--color-text-dark);
    }

    .badge.warning {
        background-color: var(--color-warning);
    }

    .badge.info {
        background-color: var(--color-info);
    }

/* ======================================== */
/* 5. INFO-BULLES (TOOLTIPS) */
/* ======================================== */

/* Conteneur principal - Gère la position relative pour le positionnement de l'info-bulle */
.tooltip-container {
    position: relative;
    display: inline-block; /* Nécessaire pour ne pas prendre toute la largeur */
    cursor: help;
}

/* Contenu de l'info-bulle */
.tooltip-content {
    visibility: hidden;
    /* Dimensions et style par défaut */
    width: 260px;
    background-color: var(--color-text-dark); /* Fond sombre par défaut */
    color: var(--color-white);
    text-align: left;
    padding: 0.5rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    /* Positionnement */
    position: absolute;
    z-index: 20; /* Doit être au-dessus des autres éléments */
    /* Transition de visibilité */
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: normal;
    pointer-events: none; /* Empêche le contenu de bloquer les clics */
}

/* Affichage au survol ou au focus (pour l'accessibilité) */
.tooltip-container:hover .tooltip-content,
.tooltip-container:focus-within .tooltip-content {
    visibility: visible;
    opacity: 1;
    pointer-events: auto; /* Permet la sélection de texte dans le tooltip si nécessaire */
}

/* Flèche du tooltip (pointe vers le conteneur) */
.tooltip-content::before {
    content: "";
    position: absolute;
    /* Style de la flèche (sera positionné et transformé dans le CSS scoped si le placement change) */
    border-width: 6px;
    border-style: solid;
    /* La couleur doit correspondre au background-color de .tooltip-content (par défaut: --color-text-dark) */
    border-color: transparent transparent var(--color-text-dark) transparent;
}




/*********************************************/
/* MARGINS & PADDINGS GENERIQUES (identiques) */
/*************************************/
.margin0 {
    margin: 0;
}

.marginTB1 {
    margin: 1rem 0;
}

.marginTB2 {
    margin: 2rem 0;
}

.marginTB4 {
    margin: 4rem 0;
}

.marginLR1 {
    margin: 0 1rem;
}

.marginLR2 {
    margin: 0 2rem;
}

.marginLR4 {
    margin: 0 4rem;
}

.marginLR6 {
    margin: 0 6rem;
}

.marginTRBL05 {
    margin: 0.5rem;
}

.marginTRBL1 {
    margin: 1rem;
}

.marginTRBL2 {
    margin: 2rem;
}

.marginR1 {
    margin-right: 1rem;
}

.marginR2 {
    margin-right: 2rem;
}

.marginR3 {
    margin-right: 3rem;
}

.marginR4 {
    margin-right: 4rem;
}


.marginL1 {
    margin-left: 1rem;
}

.marginL2 {
    margin-left: 2rem;
}

.marginL3 {
    margin-left: 3rem;
}

.marginL4 {
    margin-left: 4rem;
}

.marginT05 {
    margin-top: 0.5rem;
}

.marginT1 {
    margin-top: 1rem;
}

.marginT2 {
    margin-top: 2rem;
}

.marginT4 {
    margin-top: 4rem;
}


.marginB05 {
    margin-bottom: 0.5rem;
}

.marginB1 {
    margin-bottom: 1rem;
}

.marginB2 {
    margin-bottom: 2rem;
}

.marginB4 {
    margin-bottom: 4rem;
}


/*************************************/
.padding0 {
    padding: 0;
}

.paddingTB05 {
    padding: 0.5rem 0;
}

.paddingTB1 {
    padding: 1rem 0;
}

.paddingTB2 {
    padding: 2rem 0;
}

.paddingT05 {
    padding-top: 0.5rem;
}

.paddingT1 {
    padding-top: 1rem;
}

.paddingT2 {
    padding-top: 2rem;
}

.paddingT4 {
    padding-top: 4rem;
}

.paddingT6 {
    padding-top: 6rem;
}



.paddingB05 {
    padding-bottom: 0.5rem;
}

.paddingB1 {
    padding-bottom: 1rem;
}

.paddingB2 {
    padding-bottom: 2rem;
}

.paddingB4 {
    padding-bottom: 4rem;
}

.paddingB6 {
    padding-bottom: 6rem;
}



.paddingLR1 {
    padding: 0 1rem;
}

.paddingLR2 {
    padding: 0 2rem;
}

.paddingLR3 {
    padding: 0 3rem;
}

.paddingLR4 {
    padding: 0 4rem;
}

.paddingR4 {
    padding-right: 4rem;
}

.paddingR2 {
    padding-right: 2rem;
}

.paddingR1 {
    padding-right: 1rem;
}


.paddingL4 {
    padding-left: 4rem;
}

.paddingL2 {
    padding-left: 2rem;
}

.paddingL1 {
    padding-left: 1rem;
}

.paddingTRBL05 {
    padding: 0.5rem;
}

.paddingTRBL1 {
    padding: 1rem;
}

.paddingTRBL2 {
    padding: 2rem;
}


/*************************************/
/* PADDINGS SPECIFIQUES (uniques à LIB2) */
/*************************************/

.padding-part {
    padding: 4rem 0;
}

.big-padding-part {
    padding: 10rem 0;
}

.hight-gap {
    row-gap: 6rem; /* Remplace grid-row, définit un espacement vertical de 6rem */
}

/*************************************/

.lineHeight0 {
    line-height:0;
}

.lineHeight05 {
    line-height: 0.5rem;
}

.lineHeight1 {
    line-height: 1rem;
}

.lineHeight1-5 {
    line-height: 1.5rem;
}
.lineHeight2 {
    line-height: 2rem;
}
.lineHeight2-5 {
    line-height: 2.5rem;
}
.lineHeight3 {
    line-height: 3rem;
}