/* ==========================================
   PALETTE DE COULEURS TEBIOR
   ========================================== */

:root {
    /* PRIMAIRES */
    --tebior-milkshake: #F5F5DC;
    /* Milkshake - Beige clair */
    --tebior-noir-jais: #2C2C2C;
    /* Noir de Jais - Gris foncé */
    --tebior-lapis-lazuli: #26619C;
    /* Lapis Lazuli - Bleu profond */

    /* SECONDAIRES */
    --tebior-rouge: #E74C3C;
    /* Rouge - Rouge vif */
    --tebior-orange: #F39C12;
    /* Orange - Orange standard */
    --tebior-mandarine: #FF8C00;
    /* Mandarine - Orange jaunâtre */
    --tebior-vert-sapin: #2E8B57;
    /* Vert Sapin - Vert forêt */
    --tebior-vieux-rose: #D47983;
    /* Vieux Rose - Rose poussiéreux */

    /* NUANCES */
    --tebior-amande: #F0E68C;
    /* Amande - Beige pâle */
    --tebior-carolina-blue: #4A9FE7;
    /* Carolina Blue - Bleu ciel */
    --tebior-columbia-blue: #B3D9FF;
    /* Columbia Blue - Bleu très clair */
    --tebior-ash-gray: #B3D1BD;
    /* Ash Gray - Vert grisâtre */
    --tebior-peche: #FFCBA4;
    /* Pêche - Pêche corail */

    /* COULEURS D'INTERFACE */
    --tebior-primary: var(--tebior-lapis-lazuli);
    --tebior-secondary: var(--tebior-vert-sapin);
    --tebior-accent: var(--tebior-orange);
    --tebior-neutral: var(--tebior-milkshake);
    --tebior-dark: var(--tebior-noir-jais);
    --tebior-light: var(--tebior-columbia-blue);
}

/* ==========================================
   VARIATIONS DE BOUTONS "EN SAVOIR PLUS"
   ========================================== */


body {
    font-family: 'Funnel Display' !important;
}

/* Bouton de base */
.btn-outline {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid;
    background: transparent;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: 'Funnel Display', sans-serif;
}


.btn-outline svg,
.btn-outline svg path {
    fill: inherit;
    stroke: inherit;
    margin-right: 10px;
}

.btn-outline:hover {}

/* Bouton rempli */
.btn-filled {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid transparent;
    background: var(--tebior-primary);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: 'Funnel Display', sans-serif;
}


.btn-filled svg,
.btn-filled svg path {
    fill: inherit;
    stroke: inherit;
}

.btn-filled:hover {
    /* transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); */
}

/* VARIATIONS DE COULEURS - OUTLINE */

/* Bleu (Lapis Lazuli) */
.btn-outline.blue {
    border-color: var(--tebior-lapis-lazuli);
    color: var(--tebior-lapis-lazuli);
    fill: var(--tebior-lapis-lazuli);
}

.btn-outline.blue:hover {
    background: var(--tebior-lapis-lazuli);
    color: #F08100 !important;
    fill: #F08100 !important;
}

/* Beige (Milkshake) */
.btn-outline.beige {
    border-color: var(--tebior-milkshake);
    color: var(--tebior-milkshake);
    fill: var(--tebior-milkshake);
}

.btn-outline.beige:hover {
    background: var(--tebior-milkshake);
    color: var(--tebior-noir-jais) !important;
    fill: var(--tebior-noir-jais) !important;
}

/* Vert (Vert Sapin) */
.btn-outline.green {
    border-color: var(--tebior-vert-sapin);
    color: var(--tebior-vert-sapin);
    fill: var(--tebior-vert-sapin);
}

.btn-outline.green:hover {
    background: var(--tebior-vert-sapin);
    color: #F08100 !important;
    fill: #F08100 !important;
}

/* Rose (Vieux Rose) */
.btn-outline.rose {
    border-color: var(--tebior-vieux-rose);
    color: var(--tebior-vieux-rose);
    fill: var(--tebior-vieux-rose);
}


.btn-outline.rose:hover {
    background: var(--tebior-vieux-rose);
    color: #F08100 !important;
    fill: #F08100 !important;
}

/* VARIATIONS DE COULEURS - FILLED */

/* Bleu clair (Carolina Blue) */
.btn-filled.light-blue {
    background: var(--tebior-carolina-blue);
    color: white;
    fill: white;
}

.btn-filled.light-blue:hover {
    background: var(--tebior-lapis-lazuli);
    color: #F08100 !important;
    fill: #F08100 !important;
}

/* Beige clair (Amande) */
.btn-filled.light-beige {
    background: var(--tebior-amande);
    color: var(--tebior-noir-jais);
    fill: var(--tebior-noir-jais);
}

.btn-filled.light-beige:hover {
    background: var(--tebior-milkshake);
    color: #F08100 !important;
    fill: #F08100 !important;
}

/* Vert clair (Ash Gray) */
.btn-filled.light-green {
    background: var(--tebior-ash-gray);
    color: white;
    fill: white;
}

.btn-filled.light-green:hover {
    background: var(--tebior-vert-sapin);
    color: #F08100 !important;
    fill: #F08100 !important;
}

/* Rose clair (Pêche) */
.btn-filled.light-rose {
    background: var(--tebior-peche);
    color: var(--tebior-noir-jais);
    fill: var(--tebior-noir-jais);
}

.btn-filled.light-rose:hover {
    background: var(--tebior-vieux-rose);
    color: #F08100 !important;
    fill: #F08100 !important;
}

/* VARIATIONS SPÉCIALES */

/* Blanc avec bordure */
.btn-outline.white {
    border-color: white;
    color: white;
    fill: white;
}

.btn-outline.white:hover {
    background: white;
    color: var(--tebior-primary) !important;
    fill: var(--tebior-primary) !important;
}

/* Orange (Mandarine) */
.btn-outline.orange {
    border-color: var(--tebior-mandarine);
    color: var(--tebior-mandarine);
    fill: var(--tebior-mandarine);
}

.btn-outline.orange:hover {
    background: var(--tebior-mandarine);
    color: #F08100 !important;
    fill: #F08100 !important;
}

/* Rouge */
.btn-outline.red {
    border-color: var(--tebior-rouge);
    color: var(--tebior-rouge);
    fill: var(--tebior-rouge);
}

.btn-outline.red:hover {
    background: var(--tebior-rouge);
    color: #F08100 !important;
    fill: #F08100 !important;
}

/* ==========================================
   UTILITAIRES DE TEXTE
   ========================================== */

/* Primaires */
.milkshake {
    color: var(--tebior-milkshake) !important;
}

.noir-jais {
    color: var(--tebior-noir-jais) !important;
}

.lapis-lazuli {
    color: var(--tebior-lapis-lazuli) !important;
}

/* Secondaires */
.rouge {
    color: var(--tebior-rouge) !important;
}

.orange {
    color: var(--tebior-orange) !important;
}

.mandarine {
    color: var(--tebior-mandarine) !important;
}

.vert-sapin {
    color: var(--tebior-vert-sapin) !important;
}

.rose,
.vieux-rose {
    color: var(--tebior-vieux-rose) !important;
}

/* Nuances */
.amande {
    color: var(--tebior-amande) !important;
}

.carolina-blue {
    color: var(--tebior-carolina-blue) !important;
}

.columbia-blue {
    color: var(--tebior-columbia-blue) !important;
}

.ash-gray {
    color: var(--tebior-ash-gray) !important;
}

.peche {
    color: var(--tebior-peche) !important;
}

/* Fonctionnelles */
.primary {
    color: var(--tebior-primary) !important;
}

.secondary {
    color: var(--tebior-secondary) !important;
}

.accent {
    color: var(--tebior-accent) !important;
}

.neutral {
    color: var(--tebior-neutral) !important;
}

.dark {
    color: var(--tebior-dark) !important;
}

.light {
    color: var(--tebior-light) !important;
}

/* ==========================================
   UTILITAIRES DE FOND
   ========================================== */

/* Primaires */
.bg-milkshake {
    background-color: var(--tebior-milkshake) !important;
}

.bg-noir-jais {
    background-color: var(--tebior-noir-jais) !important;
}

.bg-lapis-lazuli {
    background-color: var(--tebior-lapis-lazuli) !important;
}

/* Secondaires */
.bg-rouge {
    background-color: var(--tebior-rouge) !important;
}

.bg-orange {
    background-color: var(--tebior-orange) !important;
}

.bg-mandarine {
    background-color: var(--tebior-mandarine) !important;
}

.bg-vert-sapin {
    background-color: var(--tebior-vert-sapin) !important;
}

.bg-rose,
.bg-vieux-rose {
    background-color: var(--tebior-vieux-rose) !important;
}

/* Nuances */
.bg-amande {
    background-color: var(--tebior-amande) !important;
}

.bg-carolina-blue {
    background-color: var(--tebior-carolina-blue) !important;
}

.bg-columbia-blue {
    background-color: var(--tebior-columbia-blue) !important;
}

.bg-ash-gray {
    background-color: var(--tebior-ash-gray) !important;
}

.bg-peche {
    background-color: var(--tebior-peche) !important;
}

/* Fonctionnelles */
.bg-primary {
    background-color: var(--tebior-primary) !important;
}

.bg-secondary {
    background-color: var(--tebior-secondary) !important;
}

.bg-accent {
    background-color: var(--tebior-accent) !important;
}

.bg-neutral {
    background-color: var(--tebior-neutral) !important;
}

.bg-dark {
    background-color: var(--tebior-dark) !important;
}

.bg-light {
    background-color: var(--tebior-light) !important;
}

/* ==========================================
   VARIATIONS DE BOUTONS (COMPLET)
   ========================================== */

/* Primaires */
.btn-outline.milkshake {
    border-color: var(--tebior-milkshake);
    color: var(--tebior-milkshake);
    fill: var(--tebior-milkshake);
}

.btn-outline.milkshake:hover {
    background: var(--tebior-milkshake);
    color: #F08100 !important;
    fill: #F08100 !important;
}

.btn-outline.noir-jais {
    border-color: var(--tebior-noir-jais);
    color: var(--tebior-noir-jais);
    fill: var(--tebior-noir-jais);
}

.btn-outline.noir-jais:hover {
    background: var(--tebior-noir-jais);
    color: #F08100 !important;
    fill: #F08100 !important;
}

.btn-outline.lapis-lazuli {
    border-color: var(--tebior-lapis-lazuli);
    color: var(--tebior-lapis-lazuli);
    fill: var(--tebior-lapis-lazuli);
}

.btn-outline.lapis-lazuli:hover {
    background: var(--tebior-lapis-lazuli);
    color: #F08100 !important;
    fill: #F08100 !important;
}

/* Secondaires */
.btn-outline.rouge {
    border-color: var(--tebior-rouge);
    color: var(--tebior-rouge);
    fill: var(--tebior-rouge);
}

.btn-outline.rouge:hover {
    background: var(--tebior-rouge);
    color: #F08100 !important;
    fill: #F08100 !important;
}

/* Orange already exists but redefining for completeness/synonym */
.btn-outline.orange {
    border-color: var(--tebior-orange);
    color: var(--tebior-orange);
    fill: var(--tebior-orange);
}

.btn-outline.orange:hover {
    background: var(--tebior-orange);
    color: #F08100 !important;
    fill: #F08100 !important;
}

.btn-outline.mandarine {
    border-color: var(--tebior-mandarine);
    color: var(--tebior-mandarine);
    fill: var(--tebior-mandarine);
}

.btn-outline.mandarine:hover {
    background: var(--tebior-mandarine);
    color: #F08100 !important;
    fill: #F08100 !important;
}

.btn-outline.vert-sapin {
    border-color: var(--tebior-vert-sapin);
    color: var(--tebior-vert-sapin);
    fill: var(--tebior-vert-sapin);
}

.btn-outline.vert-sapin:hover {
    background: var(--tebior-vert-sapin);
    color: #F08100 !important;
    fill: #F08100 !important;
}

.btn-outline.vieux-rose {
    border-color: var(--tebior-vieux-rose);
    color: var(--tebior-vieux-rose);
    fill: var(--tebior-vieux-rose);
}

.btn-outline.vieux-rose:hover {
    background: var(--tebior-vieux-rose);
    color: #F08100 !important;
    fill: #F08100 !important;
}

/* Nuances */
.btn-outline.amande {
    border-color: var(--tebior-amande);
    color: var(--tebior-amande);
    fill: var(--tebior-amande);
}

.btn-outline.amande:hover {
    background: var(--tebior-amande);
    color: #F08100 !important;
    fill: #F08100 !important;
}

.btn-outline.carolina-blue {
    border-color: var(--tebior-carolina-blue);
    color: var(--tebior-carolina-blue);
    fill: var(--tebior-carolina-blue);
}

.btn-outline.carolina-blue:hover {
    background: var(--tebior-carolina-blue);
    color: #F08100 !important;
    fill: #F08100 !important;
}

.btn-outline.columbia-blue {
    border-color: var(--tebior-columbia-blue);
    color: var(--tebior-columbia-blue);
    fill: var(--tebior-columbia-blue);
}

.btn-outline.columbia-blue:hover {
    background: var(--tebior-columbia-blue);
    color: #F08100 !important;
    fill: #F08100 !important;
}

.btn-outline.ash-gray {
    border-color: var(--tebior-ash-gray);
    color: var(--tebior-ash-gray);
    fill: var(--tebior-ash-gray);
}

.btn-outline.ash-gray:hover {
    background: var(--tebior-ash-gray);
    color: #F08100 !important;
    fill: #F08100 !important;
}

.btn-outline.peche {
    border-color: var(--tebior-peche);
    color: var(--tebior-peche);
    fill: var(--tebior-peche);
}

.btn-outline.peche:hover {
    background: var(--tebior-peche);
    color: #F08100 !important;
    fill: #F08100 !important;
}

/* Fonctionnelles */
.btn-outline.primary {
    border-color: var(--tebior-primary);
    color: var(--tebior-primary);
    fill: var(--tebior-primary);
}

.btn-outline.primary:hover {
    background: var(--tebior-primary);
    color: #F08100 !important;
    fill: #F08100 !important;
}

.btn-outline.secondary {
    border-color: var(--tebior-secondary);
    color: var(--tebior-secondary);
    fill: var(--tebior-secondary);
}

.btn-outline.secondary:hover {
    background: var(--tebior-secondary);
    color: #F08100 !important;
    fill: #F08100 !important;
}

.btn-outline.accent {
    border-color: var(--tebior-accent);
    color: var(--tebior-accent);
    fill: var(--tebior-accent);
}

.btn-outline.accent:hover {
    background: var(--tebior-accent);
    color: #F08100 !important;
    fill: #F08100 !important;
}

.btn-outline.neutral {
    border-color: var(--tebior-neutral);
    color: var(--tebior-neutral);
    fill: var(--tebior-neutral);
}

.btn-outline.neutral:hover {
    background: var(--tebior-neutral);
    color: #F08100 !important;
    fill: #F08100 !important;
}

.btn-outline.dark {
    border-color: var(--tebior-dark);
    color: var(--tebior-dark);
    fill: var(--tebior-dark);
}

.btn-outline.dark:hover {
    background: var(--tebior-dark);
    color: #F08100 !important;
    fill: #F08100 !important;
}

.btn-outline.light {
    border-color: var(--tebior-light);
    color: var(--tebior-light);
    fill: var(--tebior-light);
}

.btn-outline.light:hover {
    background: var(--tebior-light);
    color: #F08100 !important;
    fill: #F08100 !important;
}

/* ==========================================
   APPLICATIONS SPÉCIFIQUES AU SITE
   ========================================== */

/* Boutons dans les sections */
.catalyst-section .btn-outline {
    @extend .btn-outline.blue;
}

.expertise-section .btn-outline.white {
    @extend .btn-outline.white;
}

.development-section .btn-outline {
    @extend .btn-outline.green;
}

.news-section .btn-outline {
    @extend .btn-outline.orange;
}

.video-section .btn-outline.white {
    @extend .btn-outline.white;
}

/* Boutons de navigation */
.main-navigation a {
    color: var(--tebior-noir-jais);
    transition: color 0.3s ease;
}

.main-navigation a:hover {
    color: var(--tebior-lapis-lazuli);
}

/* Fondation Arborétum */
.foundation-link {
    color: var(--tebior-orange);
}

.foundation-link:hover {
    color: var(--tebior-mandarine);
}

/* ==========================================
   RESPONSIVE POUR LES BOUTONS
   ========================================== */

@media (max-width: 768px) {

    .btn-outline,
    .btn-filled {
        padding: 10px 20px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {

    .btn-outline,
    .btn-filled {
        padding: 8px 16px;
        font-size: 11px;
        letter-spacing: 0.5px;
    }
}

.btn-outline:hover {
    background-color: transparent !important;
    color: #F08A00 !important;
}