/* ============================================================================
 * Stars Evolution — la palette du header
 * Fichier : css/header-couleurs.css
 * ============================================================================
 * header-footer.css est repris TEL QUEL. On ne redéfinit que ses variables.
 *
 * Attention : il en a DEUX jeux —
 *   · --primary / --secondary / --vsbg…        (l. 30-50)
 *   · --primary-color / --second-color /
 *     --thirth-color…                          (l. 125-140)
 * C'est --thirth-color qui colore l'item actif du menu. Sans elle, il reste
 * vert.
 *
 * La correspondance :
 *   E-Justice          Stars Evolution
 *   bleu   #0072CE  →  bleu  #1E3A8A   (le sujet, la structure)
 *   vert   #10b981  →  rouge #E63946   (l'accent — l'identité de la marque)
 *   violet #7c3aed  →  rouge #E63946   (le bouton d'action)
 *
 * Le vert n'a pas de place ici : c'est la marque d'E-Justice.
 * À charger APRÈS header-footer.css.
 * ========================================================================= */

:root {
    /* ── Premier jeu ── */
    --primary:         #1E3A8A;
    --primary-dark:    #0F1E5C;
    --primary-darker:  #1E3A8A;
    --primary-darkest: #0F1E5C;

    --secondary:       #E63946;
    --secondary-light: #FF4757;

    --accent:          #FBBF24;
    --accent-pink:     #E63946;

    --vsbg:            #E63946;
    --vsbg-light:      #FF4757;

    --white:      #FFFFFF;
    --black:      #0A0E1F;
    --text:       #0B1120;
    --text-body:  #4B5563;
    --text-muted: #6B7280;
    --bg-light:   #F8FAFC;
    --border:     #E5E7EB;
    --smoke:      #EFF1F5;

    /* ── Second jeu — c'est lui qui pilote le menu ── */
    --primary-color: #1E3A8A;
    --second-color:  #E63946;
    --thirth-color:  #E63946;   /* l'item actif du menu */
    --white-color:   #FFFFFF;
    --black-color:   #0B1120;
    --smoke-color:   #EFF1F5;

    /* ── Les polices de Stars Evolution ── */
    --font-title:   'Plus Jakarta Sans', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-display: 'Plus Jakarta Sans', sans-serif;

    --title-font:   'Plus Jakarta Sans';
    --primary-font: 'Inter', sans-serif;
    --second-font:  'Plus Jakarta Sans', sans-serif;
    --thirth-font:  'Plus Jakarta Sans', sans-serif;
    --smooth-font:  'Inter', sans-serif;
}

/* Le logo de Stars Evolution est horizontal (813×372), pas carré comme des
   armoiries : on cale sur la hauteur, la largeur suit. */
.logo-header img { height: 44px; width: auto; }

/* ── Le vert écrit EN DUR dans header-footer.css ──────────────────────────── */
/* Deux règles ne passent pas par les variables : on les reprend ici. */

/* Le filet vertical à droite du logo — c'est lui qu'on voyait en vert */
.left-header { border-right-color: #E63946; }

/* Les titres à accent */
.title-color2 { color: #E63946; }

/* ── Le header fixe et son repli au défilement ────────────────────────────── */
/* La structure, telle qu'elle est :
 *
 *   wrapper-super-header        ← l'enveloppe de TOUT
 *     └ wrapper-header
 *         └ container header
 *             ├ top-super-header   ← le bandeau d'infos : c'est LUI qui se replie
 *             └ wrap-header        ← la carte de navigation
 *
 * main.js pose « .scrolled » sur .site-header au-delà de 60px. Il le faisait
 * déjà : on n'y touche pas, on cible juste les bons blocs.
 */

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999;
}

/* Le bandeau d'infos se replie — et LUI SEUL */
.top-super-header {
    overflow: hidden;
    max-height: 56px;
    transition: max-height .35s cubic-bezier(.4, 0, .2, 1),
                opacity .25s ease,
                padding .35s cubic-bezier(.4, 0, .2, 1);
}
.site-header.scrolled .top-super-header {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* La carte se resserre, son ombre s'affirme */
.wrap-header {
    transition: box-shadow .3s ease;
}
.site-header.scrolled .wrap-header {
    box-shadow: 0 6px 30px rgba(11, 17, 32, 0.16);
}

/* Le logo suit */
.logo-header img { transition: height .3s ease; }
.site-header.scrolled .logo-header img { height: 36px; }