/* ============================================
   global.css — polices, variables, reset, base
   ============================================ */

/* --- Fonts --- */
@font-face {
    font-family: "Amsterdam One";
    src:
        local("Amsterdam One"),
        local("AmsterdamOne"),
        url("../../Fonts/AmsterdamSignatureOne.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Have Heart One";
    src:
        local("Have Heart One"),
        local("HaveHeartOne"),
        url("../../Fonts/have-heart-one.otf") format("opentype"),
        url("../../Fonts/HaveHeartOne.otf") format("opentype"),
        url("../../Fonts/Have%20Heart%20One.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* --- Variables --- */
:root {
    /* Palette cliente — lumineuse & apaisante */
    --color-bg: #f7f3ee;
    --color-bg-rgb: 247, 243, 238;
    --color-bg-rose: #ede4dc;
    --color-bg-rose-rgb: 237, 228, 220;
    --color-text: #3a3a3a;
    --color-text-rgb: 58, 58, 58;
    /* Ombres & voile chauds (héro, boutons) — jamais de gris froid */
    --color-warm-dusk-rgb: 58, 52, 48;
    /* Beige lumière — texte/étincelles sur fonds sombres, surfaces claires */
    --color-ice: #f7f3ee;
    --color-ice-rgb: 247, 243, 238;
    --color-purple: #d8cce3;
    --color-purple-rgb: 216, 204, 227;
    --color-white: #ffffff;
    --color-white-rgb: 255, 255, 255;
    /* Halos (cartes, dégradés) */
    --color-secondary-rgb: var(--color-purple-rgb);

    /* Doré chaleureux */
    --cta-gold-left: #b08d52;
    --cta-gold-mid: #c8a96a;
    --cta-gold-shine: #d9c08a;
    --cta-gold-right: #a88d55;
    --color-gold: var(--cta-gold-mid);
    --color-gold-rgb: 200, 169, 106;

    /* CTA — dégradé métallique doré (haut-gauche → bas-droite) */
    --cta-gradient-gold: linear-gradient(
        to bottom right,
        var(--cta-gold-left) 0%,
        var(--cta-gold-mid) 26%,
        var(--cta-gold-shine) 50%,
        var(--cta-gold-mid) 74%,
        var(--cta-gold-right) 100%
    );
    --cta-gold-hover-left: #a88d55;
    --cta-gold-hover-mid: #d4bc8c;
    --cta-gold-hover-shine: #e0cc9d;
    --cta-gold-hover-right: #bfa668;
    --cta-gradient-gold-hover: linear-gradient(
        to bottom right,
        var(--cta-gold-hover-left) 0%,
        var(--cta-gold-hover-mid) 26%,
        var(--cta-gold-hover-shine) 50%,
        var(--cta-gold-hover-mid) 74%,
        var(--cta-gold-hover-right) 100%
    );

    --color-gold-hover: var(--cta-gold-hover-mid);

    /* Menu mobile ouvert : même famille que les surfaces douces (charte) */
    --color-nav-bg: #ede4dc;
    --color-nav-bg-rgb: 237, 228, 220;

    /* Modale Brevo — liste d'attente */
    --brevo-modal-backdrop: rgba(55, 50, 46, 0.38);
    --brevo-modal-panel-bg: var(--color-white);
    --brevo-modal-panel-shadow: 0 0.5rem 2rem rgba(58, 52, 48, 0.12);
    --brevo-modal-close-color: var(--color-text);
    --brevo-modal-iframe-radius: 0.5rem;

    /* Fallback serif si Amsterdam / Have Heart indisponibles — ne pas utiliser seul */
    --font-heading: Georgia, "Times New Roman", serif;
    --font-open-sans: "Open Sans", system-ui, sans-serif;
    --font-nav: "Open Sans", system-ui, sans-serif;
    --font-body: var(--font-open-sans);
    /* Have Heart : mot SENS + fioritures uniquement — jamais pour les titres (illisible) */
    --font-have-heart: "Have Heart One", "Amsterdam One", var(--font-heading);

    --header-padding-y: 1.125rem;
    --header-padding-top: 2.125rem;
    --header-padding-bottom: var(--header-padding-y);
    --header-padding-top-compact: 1.125rem;
    --nav-gap: clamp(1rem, 3vw, 2rem);
    --nav-logo-size: clamp(6.25rem, 14vw, 10rem);
    --transition-base: 250ms ease;
    /* Réduction / repositionnement du logo en barre (scroll) */
    --transition-header-logo: 750ms cubic-bezier(0.33, 0.12, 0.25, 1);

    /* Section jeu de cartes — violet profond + touches dorées */
    --sens-game-bg-deep: #2a1a38;
    --sens-game-bg-deep-rgb: 42, 26, 56;
    --sens-game-bg-mid: #3f2f52;
    --sens-game-bg-mid-rgb: 63, 47, 82;
    --sens-game-bg-plum: #1e1428;
    --sens-game-bg-plum-rgb: 30, 20, 40;
    --sens-game-bg-warm: #4a2840;
    --sens-game-bg-warm-rgb: 74, 40, 64;
    --sens-game-purple-glow-rgb: 150, 110, 190;
    --sens-game-card-back-top: #4a3560;
    --sens-game-card-back-bottom: #2d1f3d;
    --sens-game-card-front-mid: #3d2d55;
    --sens-game-card-border-gold: rgba(var(--color-gold-rgb), 0.72);
    --sens-game-star-warm-rgb: 255, 230, 190;
    --sens-game-card-shine: rgba(var(--sens-game-star-warm-rgb), 0.24);
}

/* --- Reset minimal --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Le smooth global peut bloquer les inversions de direction sur certains navigateurs. */
html {
    scroll-behavior: auto;
}

body {
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

ul {
    list-style: none;
    padding: 0;
}