/* ======================================
            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);
}
.btn-reset {
    all: unset; /* Annule TOUT le style hérité de la balise button */
    cursor: pointer; /* Force le curseur main, car 'unset' peut parfois le remettre en flèche */
    display: inline-flex; /* Permet de centrer facilement l'icône à l'intérieur */
    box-sizing: border-box; /* Évite les surprises de calcul de taille */
}
/* permet de ne pas propager le scroll sur le body, tant que le menu mobile est ouvert
    il faut ajouter /supprimer la classe via JSinterop */
/*body.menu-open {
    overflow: hidden !important;
    position: fixed;*/ /* Technique ultime pour iOS */
    /*width: 100%;
}*/


/*
.img-responsive : { max-width: 100%; height: auto; display: block; } (Indispensable pour tes photos de chantiers).
.object-fit-cover : Pour que tes images dans des cadres fixes ne soient pas déformées.
*/

/*****************************/
/* Classes de Titre et Texte */
/*   RATIONALISÉES           */
/*****************************/
.title {
    display: flex;
    font-size: var(--f-size-title);
    line-height: 1.2; /* Important pour les gros titres */
    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: var(--f-size-medium);
    color: var(--color-text-link);
    font-weight: 700;*/ /* Choix du 700 standard */
    /*font-family: var(--font-family-base);
}*/

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

.subTitleContent {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    font-size: clamp(1.2rem, 1rem + 1vw, 3.5rem);
    font-family: var(--font-family-base);
    font-weight:800;
}



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

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

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