/*
 * Variables de design : SEUL fichier qui contient des valeurs de style.
 * Source : maquettes Claude Design, piste A « Arcade néon » (16/10/2026).
 * Le CSS des composants n'utilise que ces variables.
 */

@font-face {
    font-family: 'Bungee';
    src: url("../fonts/bungee-400-wspyYFs.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Chakra Petch';
    src: url("../fonts/chakra-petch-500-nmHGaJK.woff2") format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Chakra Petch';
    src: url("../fonts/chakra-petch-600-wMdAHqB.woff2") format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Chakra Petch';
    src: url("../fonts/chakra-petch-700-bQR2myt.woff2") format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;

    /* Couleurs : fonds et surfaces */
    --couleur-fond: #120B2E;
    --couleur-fond-profond: #0B0720;
    --couleur-surface: #1E1546;
    --couleur-surface-survol: #1E1546;
    --couleur-surface-carte-suivante: #1A1240;
    --couleur-surface-2: #2A1F5C;
    --couleur-hachure-1: #2A1F5C;
    --couleur-hachure-2: #241A52;
    --couleur-voile: #0B0720D9;

    /* Couleurs : bordures */
    --couleur-separateur: #2F2468;
    --couleur-bordure: #3B2A86;
    --couleur-bordure-forte: #5B4BA8;
    --couleur-bordure-carte: #8E7FE0;
    --couleur-grille: #3B2A86;

    /* Couleurs : texte */
    --couleur-texte: #F2EEFF;
    --couleur-texte-fort: #FFFFFF;
    --couleur-texte-doux: #C9C3E8;
    --couleur-texte-discret: #9C93C9;
    --couleur-sur-accent: #120B2E;

    /* Couleurs : les deux côtés du jeu, juste, faux */
    --couleur-gauche: #22E4FF;
    --couleur-gauche-relief: #0E8FA6;
    --couleur-droite: #FF3EA5;
    --couleur-droite-relief: #A61F68;
    --couleur-juste: #B6FF3B;
    --couleur-faux: #FF5A3C;
    --couleur-faux-fonce: #D9431F;
    --couleur-mise-en-avant: #B6FF3B;
    --couleur-focus: #22E4FF;
    --couleur-etoile: #FFD84A;
    --couleur-etoile-vide: #5B4BA8;
    --couleur-chrono: #FFFFFF;

    /* Polices */
    --police-titre: 'Bungee', 'Arial Black', system-ui, sans-serif;
    --police-texte: 'Chakra Petch', system-ui, sans-serif;
    --graisse-normale: 500;
    --graisse-moyenne: 600;
    --graisse-forte: 700;

    /* Tailles de texte (mobile d'abord, ordinateur dans la media query plus bas) */
    --taille-texte: 15px;
    --taille-texte-petit: 13px;
    --taille-etiquette: 12px;
    --taille-intro: 16px;
    --taille-h1: 36px;
    --taille-h2: 21px;
    --taille-logo: 21px;
    --hauteur-logo: 20px;
    --hauteur-logo-pied: 18px;
    --taille-bouton: 16px;
    --interligne: 1.45;
    --interligne-titre: 1.05;
    --interlettrage-etiquette: .16em;

    /* Espacements */
    --espace-1: 4px;
    --espace-2: 8px;
    --espace-3: 12px;
    --espace-4: 16px;
    --espace-5: 22px;
    --espace-6: 32px;
    --espace-7: 44px;
    --espace-8: 56px;
    --espace-9: 72px;
    --espace-bloc-texte-bas: 88px;
    --gouttiere: 16px;
    --largeur-contenu: 1240px;
    --largeur-texte: 760px;

    /* Rayons */
    --rayon-petit: 8px;
    --rayon-bouton-icone: 12px;
    --rayon-bouton: 14px;
    --rayon-tuile: 16px;
    --rayon-carte: 18px;
    --rayon-carte-jeu: 20px;
    --rayon-grand: 26px;

    /* Bordures */
    --epaisseur-bordure: 2px;

    /* Tailles d'éléments */
    --hauteur-bouton: 52px;
    --hauteur-bouton-icone: 44px;
    --hauteur-entete-bordure: 2px;

    /* Ombres et halos */
    --relief-bouton: 0 5px 0;
    --halo-gauche: 0 0 22px #22E4FF99;
    --halo-droite: 0 0 22px #FF3EA599;
    --halo-survol: 0 0 20px #22E4FF55;
    --halo-mise-en-avant: 0 0 0 5px #FF3EA522, 0 0 44px #FF3EA566;
    --halo-texte-gauche: 0 0 16px #22E4FF99;
    --halo-texte-droite: 0 0 16px #FF3EA599;
    --ombre-logo: -2px 0 #22E4FF, 2px 0 #FF3EA5;

    /* Jeu */
    --largeur-carte: 252px;
    --largeur-carte-ordinateur: 288px;
    --hauteur-scene: 340px;
    --hauteur-scene-ordinateur: 420px;
    --hauteur-bouton-choix: 64px;
    --taille-pas: 11px;
    --hauteur-jeu-minimale: 480px;
    --hauteur-carte-hors-image: 64px;
    --taille-score: 28px;
    --taille-score-ordinateur: 36px;
    --taille-consigne: 27px;
    --taille-consigne-ordinateur: 42px;
    --taille-nom-carte: 22px;
    --taille-points-resultat: 84px;
    --taille-points-resultat-ordinateur: 104px;
    --espace-resultat-score-detail: 13px;
    --espace-resultat-detail-actions: 36px;
    --espace-resultat-actions-partage: 64px;
    --decalage-resultat-fixe: 16px;
    --halo-juste: 0 0 28px #B6FF3B99;
    --halo-faux: 0 0 28px #FF5A3C88;
    --halo-carte: 0 0 0 4px #8E7FE022, 0 0 30px #22E4FF33;
    --halo-zone-gauche: 0 0 0 5px #22E4FF1F, 0 0 46px #22E4FF88, inset 0 0 40px #22E4FF44;
    --halo-zone-droite: 0 0 0 5px #FF3EA51F, 0 0 46px #FF3EA588, inset 0 0 40px #FF3EA544;
    --fond-zone-gauche: #22E4FF0F;
    --fond-zone-droite: #FF3EA50F;
    --fond-zone-gauche-active: #22E4FF2E;
    --fond-zone-droite-active: #FF3EA52E;
    --voile-marque-juste: #B6FF3BD9;
    --voile-marque-faux: repeating-linear-gradient(45deg, #FF5A3CE6 0 8px, #D9431FE6 8px 16px);
    --halo-fenetre: 0 0 0 6px #22E4FF14, 0 0 60px #22E4FF33;
    --fond-fenetre-voile: #0B0720CC;

    /* Animations */
    --duree-rapide: 120ms;
    --duree-normale: 250ms;
    --duree-lente: 400ms;
    --courbe-rebond: cubic-bezier(.34, 1.56, .64, 1);
    --courbe-sortie: cubic-bezier(.2, .8, .2, 1);
    --delai-arrivee: 120ms;

    /* Brillance des boutons pleins au survol */
    --brillance-halo-clair: #FFFFFF66;
    --brillance-rayon: 70%;
    --brillance-reflet-clair: #FFFFFFA6;
    --duree-brillance: 1.6s;
    --brillance-halo-gauche: #22E4FF40;
    --brillance-halo-droite: #FF3EA540;
    --brillance-reflet-sombre: #FFFFFF2E;

    /* Ouverture de la FAQ : dépliage et lumière qui parcourt le liseré */
    --faq-lumiere: #22E4FF;
    --faq-lumiere-longueur: 40%;
    --duree-faq-ouverture: 420ms;
    --duree-faq-fermeture: 240ms;
    --duree-faq-lumiere: 900ms;

    /* Chrono des 5 dernières secondes : amplitude de la pulsation */
    --chrono-pulsation-echelle: 1.18;

    /* Composant autre-jeu : bloc vers un autre jeu Océbo */
    --taille-titre-autre-jeu: 19px;
    --taille-texte-autre-jeu: 15px;
    --hauteur-visuel-autre-jeu: 110px;
    --largeur-logo-autre-jeu: 200px;
}

@media (min-width: 900px) {
    :root {
        --taille-texte: 16px;
        --taille-intro: 19px;
        --taille-h1: 64px;
        --taille-h2: 30px;
        --taille-logo: 26px;
        --hauteur-logo: 26px;
        --hauteur-logo-pied: 20px;
        --interligne: 1.5;
        --interligne-titre: 1.02;
        --gouttiere: 40px;
        --taille-titre-autre-jeu: 26px;
        --taille-texte-autre-jeu: 17px;
        --hauteur-visuel-autre-jeu: 170px;
        --largeur-logo-autre-jeu: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duree-rapide: 1ms;
        --duree-normale: 1ms;
        --duree-lente: 1ms;
    }
}