/* ==========================================
   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: #D4A5A5;     /* 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: #B2BEB5;       /* 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"
   ========================================== */

/* Bouton de base */
.btn-outline {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid;
    background: transparent;
    color: inherit;
    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-outline:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

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

.btn-outline.blue:hover {
    background: var(--tebior-lapis-lazuli);
    color: white;
}

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

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

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

.btn-outline.green:hover {
    background: var(--tebior-vert-sapin);
    color: white;
}

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

.btn-outline.rose:hover {
    background: var(--tebior-vieux-rose);
    color: white;
}

/* VARIATIONS DE COULEURS - FILLED */

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

.btn-filled.light-blue:hover {
    background: var(--tebior-lapis-lazuli);
}

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

.btn-filled.light-beige:hover {
    background: var(--tebior-milkshake);
}

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

.btn-filled.light-green:hover {
    background: var(--tebior-vert-sapin);
}

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

.btn-filled.light-rose:hover {
    background: var(--tebior-vieux-rose);
    color: white;
}

/* VARIATIONS SPÉCIALES */

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

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

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

.btn-outline.orange:hover {
    background: var(--tebior-mandarine);
    color: white;
}

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

.btn-outline.red:hover {
    background: var(--tebior-rouge);
    color: white;
}

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