.banner-gradient {
    background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%);
}

:root {
    --font-name: avenir;

    --success-color:     #FFB733;       /* Jaune-orange vif – couleur principale */
    --success-color-alt: #FF8C00;       /* Orange foncé – pour les hovers, actifs, gradient bas */

    --warning-color:     #FFEB3B;       /* Jaune ananas pur – pour les alertes / mises en avant */
    --warning-color-alt: #FFFACD;       /* Jaune très clair – fond subtil */

    --error-color:       #8B4513;       /* Marron chocolat – pour les erreurs ou accents secondaires */
    --error-color-alt:   #A0522D;       /* Marron plus clair */

    --gray-color:        rgba(245, 245, 245, 1);  /* Gris très clair */
    --gray-color-alt:    rgba(80, 80, 80, 0.9);   /* Gris foncé textes secondaires */

    --white-color:       rgb(255,255,255);
    --black-color:       rgb(0, 0, 0);
    --black-color-alt:   rgb(30, 30, 30);

    /* Bonus : vert ananas pour les accents frais (feuilles, etc.) */
    --ananas-green:      #7ED321;
    --ananas-green-dark: #66AA00;

    --10px: 10px;
    --1px: 1px;

    /* Le reste des variables (line-height, tailles, etc.) reste IDENTIQUE */
    --title-line-height: 1;
    --h1-line-height: 1;
    --h2-line-height: 1.2;
    --h3-line-height: 1.1;
    --h4-line-height: 1.37;
    --h5-line-height: 1.37;
    --h6-line-height: 1.37;
    --p-line-height: 1.568823529;
    --p-line-height-alt: 1.533;

    --tab-head-height: 4.5vw;
    --tab-color:         var(--success-color-alt);
    --tab-active-color:  var(--black-color);
    --tab-bg:            unset;
    --tab-active-bg:     var(--gray-color);
    --slide-dot-size:    .8333333vw;
    --slide-icon-size:   6.25vw;
}

/* Version Desktop Adaptative (Unités VW) */
html.adapt{
    --content-margin: 10.15625vw;
    --header-height: 6.25vw;

    --title-size: 6.1979167vw;
    --h1-size: 3.12504167vw;
    --h2-size: 1.9791667vw;
    --h3-size: 1.6145833vw;
    --h4-size: 1.25vw;
    --h5-size: 1.31875vw;
    --h6-size: 1.15vw;
    --p-size: 1.0416667vw;
    --p-size-alt: .9375vw;

    --10px: 0.52083333vw;
    --1px: 0.052083333vw;

    --icon-big-size: 8.3333333vw;
    --icon-medium-size: 6.7708333vw;
    --icon-size: 3.59375vw;
    --icon-small-size: 2.4479167vw;
    --icon-min-size: 1.9270833vw;

    --btn-radius: 0.23vw;
    --radius: .52vw;
    --radius-big: 1.3vw;
    --radius-small: .78vw;
    --radius-min: .26vw;

    --btn-height: 3.04vw;
    --btn-big-height: 4.55vw;
    --btn-small-height: 2.43vw;

    --btn-font-size: 1.61vw;
    --btn-big-font-size: 1.67vw;
    --btn-small-font-size: 1vw;
}

/* Version Desktop Fixe (Unités PX) */
html:not(.adapt){
    --content-margin: 12.23vw;
    --header-height: 17.19vw;

    --title-size: 79px;
    --h1-size: 79px;
    --h2-size: 20px;
    --h3-size: 18px;
    --h4-size: 16px;
    --h5-size: 15px;
    --h6-size: 15px;
    --p-size: 14px;
    --p-size-alt: 13px;

    --10px: 10px;
    --1px: 1px;

    --icon-big-size: 64px;
    --icon-medium-size: 48px;
    --icon-size: 32px;
    --icon-small-size: 24px;
    --icon-min-size: 20px;

    --btn-radius: 5px;
    --radius: 10px;
    --radius-big: 40px;
    --radius-small: 5px;
    --radius-min: 2px;

    --btn-height: 32px;
    --btn-big-height: 40px;
    --btn-small-height: 24px;

    --btn-font-size: 12px;
    --btn-big-font-size: 16px;
    --btn-small-font-size: 10px;
}

/* Version Mobile (Surcharge pour corriger le responsive) */
@media(max-width:768px){
    /* 
       IMPORTANT : On force html.adapt à revenir en pixels sur mobile.
       Sinon les unités en 'vw' deviennent microscopiques.
    */
    html.adapt {
        --content-margin: 15px;
        --header-height: 60px;

        --title-size: 32px;
        --h1-size: 26px;
        --h2-size: 22px;
        --h3-size: 18px;
        --h4-size: 16px;
        --h5-size: 15px;
        --h6-size: 14px;
        --p-size: 14px;
        --p-size-alt: 13px;

        /* CRUCIAL : Remet les unités de base en pixels */
        --10px: 10px;
        --1px: 1px;

        --icon-big-size: 60px;
        --icon-medium-size: 48px;
        --icon-size: 30px;
        --icon-small-size: 24px;
        --icon-min-size: 16px;

        --btn-radius: 4px;
        --radius: 8px;
        --radius-big: 15px;
        --radius-small: 5px;
        --radius-min: 3px;

        --btn-height: 40px;
        --btn-big-height: 48px;
        --btn-small-height: 32px;

        --btn-font-size: 14px;
        --btn-big-font-size: 16px;
        --btn-small-font-size: 12px;
        
        --tab-head-height: 40px;
        --slide-icon-size: 32px;
        --slide-dot-size: 15px;
    }

    /* Fallback général (gardé de ton fichier original) */
    html:root{
        --title-size: 32px;
        --h1-size: 24px;
        --h2-size: 20px;
        --h3-size: 17px;
        --h4-size: 16px;
        --h4-size: 15px;
        --h4-size: 15px;
        --p-size: 14px;
        --p-size-alt: 13px;

        --h1-size-adapt: var(--h1-size);
        --h2-size-adapt: var(--h2-size);
        --h3-size-adapt: var(--h3-size);
        --h4-size-adapt: var(--h4-size);
        --p-size-adapt: var(--p-size);
        --p-size-alt-adapt: var(--p-size-alt);

        --header-height: 60px;
        --content-margin: 15px;

        --icon-size: 30px;
        --icon-medium-size: 48px;
        --icon-small-size: 24px;
        --icon-big-size: 84px;
        --icon-min-size: 16px;

        --btn-radius: 3px;
        --radius: 7px;
        --radius-big: 10px;
        --radius-small: 5px;
        --radius-min: 3px;

        --btn-height: 32px;
        --btn-big-height: 32px;
        --btn-small-height: 32px;

        --btn-font-size: 14px;
        --btn-big-font-size: 15px;
        --btn-small-font-size: 12px;

        --tab-head-height: 35px;
        --slide-icon-size: 32px;
        --slide-dot-size: 20px;
    }
}

@media(max-width:400px){
    :root, html.adapt{
        --content-margin: 10px;
        --20px: 15px;
    }
}