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

.master-margin-left {
    margin-left: var(--master-margin-left);
}

.master-padding-left {
    padding-left: var(--master-margin-left);
}

/* Hauteur de la TaskBar fixé en variable root et qui s'ajuste au format d'écran */
.height-taskbar {
    height: var(--height-taskbar);
}

.paddingT-height-taskbar {
    padding-top: var(--height-menu-taskbar);
}
.marginT-height-taskbar {
    margin-top: var(--height-menu-taskbar);
}


.ico-svg { display: block; min-width: 30px; min-height: 30px;}


.no-shrink {
    flex-shrink: 0 !important;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}

/*oblige le button à remplir son parent */
.flex-fill {
    flex: 1 1 auto; /* Dit au bouton : "Gronde et occupe l'espace" */
    width: 100%; /* Force la largeur si le parent est une colonne */
}

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

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

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

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

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

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

/****************************
* Font-size Responsive
* (Méthode Clamp)
****************************/

/* Structure du clamp : 
   clamp(Taille_Min, Valeur_Dynamique_VW, Taille_Max) 
*/

.f-size-extra-small {
    font-size: clamp(0.5rem, 0.4rem + 0.5vw, 0.6rem);
}

.f-size-small {
    font-size: clamp(0.7rem, 0.6rem + 0.5vw, 0.8rem);
}

.f-size-normal {
    font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1rem);
}

.f-size-medium {
    font-size: clamp(1rem, 0.9rem + 0.6vw, 1.2rem);
}

.f-size-large {
    font-size: clamp(1.1rem, 1rem + 1vw, 1.5rem);
}

.f-size-big {
    font-size: clamp(1.2rem, 1.1rem + 1vw, 1.6rem);
}

.f-size-extra-big {
    font-size: clamp(1.3rem, 1.2rem + 1.2vw, 1.8rem);
}

.f-size-double {
    font-size: clamp(1.4rem, 1.3rem + 1.5vw, 2rem);
}

.f-size-extra-double {
    font-size: clamp(1.6rem, 1.4rem + 2vw, 2.5rem);
}

.f-size-triple {
    font-size: clamp(1.8rem, 1.6rem + 1vw, 3rem);
}

.f-size-extra-triple {
    font-size: clamp(2rem, 1.8rem + 4vw, 3.5rem);
}

.f-size-quadruple {
    font-size: clamp(2.2rem, 2rem + 5vw, 4rem);
}

.f-size-extra-quadruple {
    font-size: clamp(2.5rem, 2.2rem + 6vw, 4.5rem);
}

.f-size-quintuple {
    font-size: clamp(2.8rem, 2.5rem + 7vw, 5rem);
}

.f-size-extra-quintuple {
    font-size: clamp(3rem, 2.8rem + 8vw, 5.5rem);
}

/*.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;
}

.f-size-extra-triple {
    font-size: 3.5rem;
}

.f-size-quadruple {
    font-size: 4rem;
}

.f-size-extra-quadruple {
    font-size: 4.5rem;
}


.f-size-quintuple {
    font-size: 5rem;
}


.f-size-extra-quintuple {
    font-size: 5.5rem;
}*/

/****************************/
/*       Font-style         */
/***************************/

.font-italic {
    font-style: italic;
}

.font-oblique {
    font-style: oblique;
}

.font-normal {
    font-style: normal;
}




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

.colorPrimary {
    color: var(--color-primary);
}

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

.colorCTA {
    color: var(--color-CTA-primary);
}

.colorSecondary {
    color: var(--color-CTA-secondary);
}

.colorBlue {
    color: var(--color-blue-vif);
}

.colorGrey {
    color: var(--color-grey);
}

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

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

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

.colorBlack {
    color: var(--color-black);
}

.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);
}


.warning-message {
    position: absolute;
    bottom: 20px; /* Calé tout en bas à l'intérieur */
    left: 25px; /* Aligné sur le curseur */
    font-size: 0.8rem; /* Très petit pour bien différencier */
    font-style: italic; /* Optionnel : pour marquer la différence */
    pointer-events: none; /* Pour que le clic passe "à travers" vers l'input */
    opacity: 0.9;
    color: var(--color-error);

    /*position: absolute !important;*/ /* Sort le message du flux HTML */
    /*top: 100%;*/ /* Se place juste sous la colonne (100% de la hauteur) */
    /*left: 25px;*/ /* Aligné avec votre texte */
    /*color: var(--color-error);
    font-size: 0.8rem;
    white-space: nowrap;*/ /* Empêche le message de créer un retour à la ligne */
    /*line-height: 1;
    margin: -22px 0 0 0;
    z-index: 10;
    display: block;
    overflow: hidden;*/
}


.colorWarning {
    color: var(--color-warning);
}
.colorWarning-light {
    color: var(--color-warning-light);
}




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

.bgColor-CTA1 {
    background-color: var(--color-CTA-primary);
}

.bgColor-CTA2 {
    background-color: var(--color-CTA-secondary);
}



.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);
}

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

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



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


.bgColor-transparent {
    background-color: transparent;
}

/*************************************/
/* CONTAINER & FLEXBOX GENERIQUES    */
/*************************************/


.container-row {
    display: flex;
    flex-direction: row;
    min-width: 0; /* Permet au conteneur de rétrécir sous la taille de son contenu */
}

.container-row-mobil-col {
    display: flex;
    flex-direction: row;
    /* min-width: 0; Permet au conteneur de rétrécir sous la taille de son contenu */
}

@media (max-width: 1599px) {
    .container-row-mobil-col {
        display: flex;
        flex-direction: column;
        /* min-width: 0;  Permet au conteneur de rétrécir sous la taille de son contenu */
    }
}



.container-col {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Indispensable pour que les textes longs ne poussent pas les murs */
}



    .container-wrap {
        display: flex !important; /* Force le mode flex */
        flex-wrap: wrap !important; /* Force impérativement le retour à la ligne */
        min-width: 0; /* Sécurité même en mode wrap */
    }

    .container-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
    }

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

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

    .grow1 {
        flex-grow: 1;
    }

    /***********/
    /* GAP */
    /***********/

    .gap3p {
        gap: 3%;
    }

    .gap2rem {
        gap: 2rem;
    }

    .gap1rem {
        gap: 1rem;
    }

    /**********/
    /* Utiliser box-sizing: border-box; pour que le padding et la bordure 
    soient inclus dans le calcul de la largeur */
    /* INUTILE CAR APPLIQUE DE MANIERE GLOBALE */
    /*.box-sizing-borderbox { 
    box-sizing: border-box !important;
}*/

    /* Interdire le rétrécissement */
    .flex-shrink0 {
        flex-shrink: 0 !important;
    }

    .flexWrap {
        flex-wrap: wrap;
    }

    .white-space-normal {
        white-space: normal;
    }

    .white-space-nowrap {
        white-space: nowrap;
    }

    .wrap-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%;
    }
    /************/

    .txt-deco-underline {
        text-decoration: underline;
    }

    .txt-deco-none {
        text-decoration: none;
    }

    /************/
    /* DISPLAY */
    .display-none, .hidden {
        display: none;
    }

    .displayInlineBlock {
        display: inline-block !important;
    }

    .displayBlock {
        display: block;
    }

    .displayFlex {
        display: flex !important;
    }


    /************/
    /* WIDTH % */
    /************/

    /* On garde tes pourcentages mais on s'assure qu'ils ne cassent jamais le layout */
    [class^="w"] {
        max-width: 100%;
    }

    .w-auto {
        width: auto;
    }

    /************/ /* WIDTH INTELLIGENTE */ /************/
    .w-fit {
        width: fit-content;
    }

    .w-max {
        width: max-content;
    }

    /* Très utile pour les formulaires ou les cartes */
    .w-min-content {
        width: min-content;
    }

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

    /* Une largeur qui ne peut pas être plus petite que 300px mais ne dépasse pas 50% */
    /* min: 300px, idéal: 50%, max: 100% (géré par le sélecteur global) */
    .w100 {
        width: 100%;
    }

    .w90 {
        width: clamp(var(--w-min), 90%, 100%);
    }

    .w80 {
        width: clamp(var(--w-min), 80%, 100%);
    }

    .w75 {
        width: clamp(var(--w-min), 75%, 100%);
    }

    .w70 {
        width: clamp(var(--w-min), 70%, 100%);
    }

    .w60 {
        width: clamp(var(--w-min), 60%, 100%);
    }

    .w50 {
        width: clamp(var(--w-min), 50%, 100%);
    }

    .w40 {
        width: clamp(var(--w-min), 40%, 100%);
    }

    /* Utilise le palier 2 */
    .w35 {
        width: clamp(var(--w-min-small), 35%, 100%);
    }

    .w33 {
        width: clamp(var(--w-min-small), 33.33%, 100%);
    }

    .w30 {
        width: clamp(var(--w-min-small), 30%, 100%);
    }

    .w25 {
        width: clamp(var(--w-min-small), 25%, 100%);
    }
    /* Petites largeurs (restent petites même sur mobile) */


    .w20 {
        width: 20%;
    }

    .w15 {
        width: 15%;
    }

    .w10 {
        width: 10%;
    }

    .w05 {
        width: 5%;
    }

    /************/ /* WIDTH REM (FIXE MAIS SAFE) */ /************/
    .w10r {
        width: 10rem;
    }

    .w15r {
        width: 15rem;
    }

    .w20r {
        width: clamp(var(--w-min-small), 20rem, 100%);
    }

    .w25r {
        width: 25rem;
    }

    .w-min-20r {
        min-width: 20rem;
    }
    /* Note: ton max-width: 100% est déjà géré par le sélecteur [class^="w"] au dessus */


    /************************/
    /* VIEWPORT WIDTH (À utiliser avec parcimonie) */
    /* overflow-x: hidden   appliqué sur body */
    /************************/

    .w100vw {
        width: 100vw;
    }

    .w90vw {
        width: 90vw;
    }

    .w80vw {
        width: 80vw;
    }

    .w75vw {
        width: 75vw;
    }

    .w70vw {
        width: 70vw;
    }

    .w60vw {
        width: 60vw;
    }

    .w50vw {
        width: 50vw;
    }

    .w40vw {
        width: 40vw;
    }

    .w35vw {
        width: 35vw;
    }

    .w33vw {
        width: 33vw;
    }


    .w30vw {
        width: 30vw;
    }

    .w25vw {
        width: 25vw;
    }

    .w20vw {
        width: 20vw;
    }

    .w15vw {
        width: 15vw;
    }

    .w10vw {
        width: 10vw;
    }

    .w05vw {
        width: 5vw;
    }


    /***********/
    /* height */
    /**********/

    /* La hauteur s'adapte mais permet l'étirement flex */
    .h-auto {
        height: auto;
    }

    /* La hauteur est strictement limitée au contenu */
    .h-fit-content {
        height: fit-content;
    }

    /* Sécurité : Pour les sections qui doivent prendre au moins tout l'écran 
   sans bloquer si le contenu est plus long */
    .h100 {
        min-height: 100dvh; /* Dynamic Viewport Height */
        height: auto;
    }

    .h50 {
        min-height: 50dvh; /* Dynamic Viewport Height */
        height: auto;
    }

    .h1rem {
        min-height: 1rem;
        height: auto; /* Permet de s'étendre si le texte déborde */
    }

    .h2rem {
        min-height: 2rem;
        height: auto; /* Permet de s'étendre si le texte déborde */
    }


    .h3rem {
        min-height: 3rem;
        height: auto; /* Permet de s'étendre si le texte déborde */
    }

    .h4rem {
        min-height: 4rem;
        height: auto; /* Permet de s'étendre si le texte déborde */
    }

    .h5rem {
        min-height: 5rem;
        height: auto; /* Permet de s'étendre si le texte déborde */
    }

    .h7rem {
        min-height: 7rem;
        height: auto; /* Permet de s'étendre si le texte déborde */
    }

    .h10rem {
        min-height: 10rem;
        height: auto; /* Permet de s'étendre si le texte déborde */
    }

    .h15rem {
        min-height: 15rem;
        height: auto; /* Permet de s'étendre si le texte déborde */
    }

    .h20rem {
        min-height: 20rem;
        height: auto; /* Permet de s'étendre si le texte déborde */
    }

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

    .wh10rem {
        width: 10rem;
        min-height: 10rem;
        height: auto;
        max-width: 100%; /* Sécurité héritée, mais bien de l'avoir en tête */
    }


    .wh20rem {
        width: clamp(var(--w-min-small), 20rem, 100%);
        min-height: clamp(var(--w-min-small), 20rem, 100%);
        height: auto;
        max-width: 100%; /* Sécurité héritée, mais bien de l'avoir en tête */
    }


    .wh30rem {
        width: 30rem;
        min-height: 30rem;
        height: auto;
        max-width: 100%; /* Sécurité héritée, mais bien de l'avoir en tête */
    }

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


    /* ALIGN - JUSTIFY */
    .align-content-center {
        align-content: center;
    }

    .align-it-center {
        align-items: center;
    }

    .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;
    }

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

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

    .align-vertical-center {
        vertical-align: middle;
    }

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

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

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



    /*********************************************/
    /* BORDERS GENERIQUES */
    /*************************************/
    /* Classes de bordures communes (identiques) */
    .border-TB4-CTA1 {
        border-top: solid var(--color-CTA-primary) 4px;
        border-bottom: solid var(--color-CTA-primary) 4px;
    }

    .border-T2-CTA1 {
        border-top: solid var(--color-CTA-primary) 2px;
    }

    .border-T4-CTA1 {
        border-top: solid var(--color-CTA-primary) 4px;
    }

    .border1-CTA1 {
        border: solid var(--color-CTA-primary) 1px;
    }

    .border-T4-Primary {
        border-top: solid var(--color-primary) 4px;
    }

    .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-shadow) 2px;
        border-radius: var(--radius);
    }

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

    .border-secondary {
        border: solid var(--color-CTA-secondary) 0.75px;
        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;
    }


    /*************************/
    /* DIVERS (identiques/uniques) */
    /************************/

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


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

    .z-index10 {
        z-index: 10;
    }

    .z-index50 {
        z-index: 50;
    }

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

    .z-index100 {
        z-index: 100;
    }

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

    .z-index1000 {
        z-index: 1000;
    }
    /**************/

    .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: 4em;
    }


    .overflowHidden {
        overflow: hidden;
    }

    .overflowXHidden {
        overflow-x: hidden;
    }

    .overflowYHidden {
        overflow-y: hidden;
    }


    /* ======================================== */
    /* 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: 1em;
        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) */
    /* ajustement padding /margin, via clamp / largeur de l'écran */
    /*************************************/
    .margin0 {
        margin: 0;
    }

    .marginTB1 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .marginTB2 {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .marginTB4 {
        margin-top: var(--clamp-4);
        margin-bottom: var(--clamp-4);
    }

    .marginTB6 {
        margin-top: var(--clamp-6);
        margin-bottom: var(--clamp-6);
    }

    .marginTB8 {
        margin-top: var(--clamp-8);
        margin-bottom: var(--clamp-8);
    }

    .marginTB10 {
        margin-top: var(--clamp-10);
        margin-bottom: var(--clamp-10);
    }

    .marginTB12 {
        margin-top: var(--clamp-12);
        margin-bottom: var(--clamp-12);
    }


    .marginLRpercent2_5 {
        margin: 0 2.5%;
    }

    .marginLpercent2_5 {
        margin-left: 2.5%;
    }

    .marginRpercent2_5 {
        margin-right: 2.5%;
    }

    .marginLR1 {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .marginLR2 {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .marginLR4 {
        margin-left: var(--clamp-4);
        margin-right: var(--clamp-4);
    }

    .marginLR6 {
        margin-left: var(--clamp-6);
        margin-right: var(--clamp-6);
    }

    .marginTRBL05 {
        margin: 0.5rem;
    }

    .marginTRBL1 {
        margin: 1rem;
    }

    .marginTRBL2 {
        margin: 2rem;
    }

    .marginR1 {
        margin-right: 1rem;
    }

    .marginR2 {
        margin-right: 2rem;
    }

    .marginR3 {
        margin-right: var(--clamp-3);
    }

    .marginR4 {
        margin-right: var(--clamp-4);
    }


    .marginR8 {
        margin-right: var(--clamp-8);
    }

    .marginR10 {
        margin-right: var(--clamp-10);
    }

    .marginR12 {
        margin-right: var(--clamp-12);
    }


    .marginL1 {
        margin-left: 1rem;
    }

    .marginL2 {
        margin-left: var(--clamp-2);
    }

    .marginL3 {
        margin-left: var(--clamp-3);
    }

    .marginL4 {
        margin-left: var(--clamp-4);
    }

    .marginL8 {
        margin-left: var(--clamp-8);
    }

    .marginL10 {
        margin-left: var(--clamp-10);
    }

    .marginL12 {
        margin-left: var(--clamp-12);
    }

    .marginT05 {
        margin-top: 0.5rem;
    }

    .marginT1 {
        margin-top: 1rem;
    }

    .marginT2 {
        margin-top: 2rem;
    }

    .marginT4 {
        margin-top: var(--clamp-4);
    }

    .marginT6 {
        margin-top: var(--clamp-6);
    }

    .marginT8 {
        margin-top: var(--clamp-8);
    }

    .marginT10 {
        margin-top: var(--clamp-10);
    }

    .marginT12 {
        margin-top: var(--clamp-12);
    }


    .marginB05 {
        margin-bottom: 0.5rem;
    }

    .marginB1 {
        margin-bottom: 1rem;
    }

    .marginB2 {
        margin-bottom: 2rem;
    }

    .marginB4 {
        margin-bottom: var(--clamp-4);
    }


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

    .paddingTB05 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .paddingTB1 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .paddingTB2 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .paddingTB4 {
        padding-top: var(--clamp-4);
        padding-bottom: var(--clamp-4);
    }

    .paddingTB6 {
        padding-top: var(--clamp-6);
        padding-bottom: var(--clamp-6);
    }

    .paddingTB8 {
        padding-top: var(--clamp-8);
        padding-bottom: var(--clamp-8);
    }

    .paddingT05 {
        padding-top: 0.5rem;
    }

    .paddingT1 {
        padding-top: 1rem;
    }

    .paddingT2 {
        padding-top: 2rem;
    }

    .paddingT4 {
        padding-top: var(--clamp-4);
    }

    .paddingT6 {
        padding-top: var(--clamp-6);
    }

    .paddingT8 {
        padding-top: var(--clamp-8);
    }

    .paddingT10 {
        padding-top: var(--clamp-10);
    }

    .paddingT11 {
        padding-top: var(--clamp-11);
    }

    .paddingT12 {
        padding-top: var(--clamp-12);
    }



    .paddingB05 {
        padding-bottom: 0.5rem;
    }

    .paddingB1 {
        padding-bottom: 1rem;
    }

    .paddingB2 {
        padding-bottom: 2rem;
    }

    .paddingB4 {
        padding-bottom: var(--clamp-4);
    }

    .paddingB6 {
        padding-bottom: var(--clamp-6);
    }


    .paddingLR1 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .paddingLR2 {
        padding-left: var(--clamp-2);
        padding-right: var(--clamp-2);
    }

    .paddingLR3 {
        padding-left: var(--clamp-3);
        padding-right: var(--clamp-3);
    }

    .paddingLR4 {
        padding-left: var(--clamp-4);
        padding-right: var(--clamp-4);
    }

    .paddingR12 {
        padding-right: var(--clamp-12);
    }

    .paddingR10 {
        padding-right: var(--clamp-10);
    }

    .paddingR8 {
        padding-right: var(--clamp-8);
    }

    .paddingR6 {
        padding-right: var(--clamp-6);
    }

    .paddingR4 {
        padding-right: var(--clamp-4);
    }

    .paddingR2 {
        padding-right: 2rem;
    }

    .paddingR1 {
        padding-right: 1rem;
    }



    .paddingL12 {
        padding-left: var(--clamp-12);
    }

    .paddingL10 {
        padding-left: var(--clamp-10);
    }

    .paddingL8 {
        padding-left: var(--clamp-8);
    }

    .paddingL6 {
        padding-left: var(--clamp-6);
    }

    .paddingL4 {
        padding-left: var(--clamp-4);
    }

    .paddingL2 {
        padding-left: 2rem;
    }

    .paddingL1 {
        padding-left: 1rem;
    }

    .paddingTRBL05 {
        padding: 0.5rem;
    }

    .paddingTRBL1 {
        padding: 1rem;
    }

    .paddingTRBL2 {
        padding: 2rem;
    }

    .paddingTRBL4 {
        padding: var(--clamp-4);
    }


    /*************************************/
    /* 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.5;
    }

    .lineHeight1 {
        line-height: 1;
    }

    .lineHeight1-5 {
        line-height: 1.5;
    }

    .lineHeight2 {
        line-height: 2;
    }

    .lineHeight2-5 {
        line-height: 2.5;
    }

    .lineHeight3 {
        line-height: 3;
    }

    .lineHeight4 {
        line-height: 4;
    }

    .lineHeight5 {
        line-height: 5;
    }

    .lineHeight6 {
        line-height: 6;
    }


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

    .radius-simple-BR {
        border-bottom-right-radius: var(--radius-medium);
    }

    .radius-simple-TR {
        border-top-right-radius: var(--radius-medium);
    }

    .radius-simple-BL {
        border-bottom-left-radius: var(--radius-medium);
    }

    .radius-simple-TL {
        border-top-left-radius: var(--radius-medium);
    }

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

    /* Style de l'iframe */
    .Iframe {
        width: 100%;
        height: 100%;
        min-height: 80vh;
        max-height: 90vh;
        border: none;
        border-radius: 0.75rem;
    }





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


    /* POSITION */
    .pos-relative {
        position: relative;
    }


    .pos-absolute {
        position: absolute;
    }

    .pos-inherit {
        position: inherit;
    }

    .pos-fixed {
        position: fixed;
    }



    /*****************/
    /* BOX-SHADOW */
    .box-shadow-1 {
        box-shadow: var(--shadow-card-light);
    }

    .box-shadow-primary {
        box-shadow: var(--shadow-primary);
    }
    /*************/

    .txt-transform-upercase {
        text-transform: uppercase;
    }

    .txt-transform-lowercase {
        text-transform: lowercase;
    }

    .txt-transform-capitalize {
        text-transform: capitalize;
    }

    .txt-transform-none {
        text-transform: none;
    }

    /****************/
    .opacity100 {
        opacity: 1;
    }

    .opacity90 {
        opacity: 0.9;
    }

    .opacity80 {
        opacity: 0.8;
    }

    .opacity70 {
        opacity: 0.7;
    }

    .opacity60 {
        opacity: 0.6;
    }

    .opacity50 {
        opacity: 0.5;
    }

    .opacity40 {
        opacity: 0.4;
    }

    .opacity30 {
        opacity: 0.3;
    }

    .opacity20 {
        opacity: 0.2;
    }

    .opacity10 {
        opacity: 0.1;
    }

    .opacity0 {
        opacity: 0;
    }