/* ==========================================================================
   TOKENS — source unique des couleurs, typographies, espacements et du MOUVEMENT.
   assets/js/core/motion.js lit les tokens de mouvement ici : aucune durée ni
   courbe d'accélération ne doit être écrite ailleurs.
   ========================================================================== */

/* Polices auto-hébergées (licence SIL OFL, voir assets/fonts/licences). */
@font-face {
    font-family: "Big Shoulders Display";
    src: url("../fonts/big-shoulders-display.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("../fonts/instrument-serif.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Schibsted Grotesk";
    src: url("../fonts/schibsted-grotesk.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Schibsted Grotesk";
    src: url("../fonts/schibsted-grotesk-italic.woff2") format("woff2");
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Martian Mono";
    src: url("../fonts/martian-mono.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

/* Polices de secours calibrées sur Martian Mono (mesuré : +16,3 % par rapport à Menlo,
   +18,3 % par rapport à Consolas) : le texte ne change pas de largeur quand la vraie
   police arrive, donc rien ne bouge (CLS). */
@font-face {
    font-family: "Martian Mono repli";
    src: local("Menlo"), local("Menlo-Regular");
    size-adjust: 116.3%;
}
@font-face {
    font-family: "Martian Mono repli 2";
    src: local("Consolas");
    size-adjust: 118.3%;
}

:root {
    /* --- Couleurs de marque ---------------------------------------------- */
    --c-noir: #0C0B09;          /* noir scène */
    --c-jaune: #FFD600;         /* jaune projecteur, mesuré sur le logo */
    --c-rouge: #C91D26;         /* rouge tapis (assombri pour l'AA : crème dessus 4,84:1) */
    --c-creme: #F3ECDD;         /* crème programme */
    --c-encre: #141210;         /* encre */
    --c-neon: #FF2E88;          /* rose néon : exception réservée à la scène « concert » Huntrix
                                   (validée par le client le 7 octobre 2026), jamais en dégradé.
                                   Sur noir : 5,9:1. */
    --c-gris-noir: #A39E93;     /* texte discret sur noir   (7,37:1) */
    --c-gris-creme: #5A5347;    /* texte discret sur crème  (6,46:1) */
    --c-brun-jaune: #544A00;    /* texte discret sur jaune  (6,31:1) */

    /* --- Typographies ------------------------------------------------------ */
    --f-display: "Big Shoulders Display", ui-sans-serif, sans-serif;
    --f-italique: "Instrument Serif", Georgia, serif;
    --f-texte: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
    --f-mono: "Martian Mono", "Martian Mono repli", "Martian Mono repli 2", ui-monospace, monospace;

    /* Échelle fluide, calibrée de 360 px à 1920 px de large. */
    --fs-monumental: clamp(3.25rem, 1.45rem + 8.6vw, 12.5rem);
    --fs-titre: clamp(2.625rem, 1.85rem + 3.9vw, 6.5rem);
    --fs-titre-section: clamp(2.125rem, 1.6rem + 2.6vw, 4.75rem);
    --fs-sous-titre: clamp(1.375rem, 1.17rem + 1vw, 2.25rem);
    --fs-chapo: clamp(1.125rem, 1.03rem + 0.45vw, 1.5rem);
    --fs-texte: clamp(1rem, 0.96rem + 0.2vw, 1.1875rem);
    --fs-legende: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9375rem);
    --fs-mono: clamp(0.6875rem, 0.66rem + 0.12vw, 0.8125rem);

    --lh-monumental: 0.86;
    --lh-titre: 0.92;
    --lh-sous-titre: 1.12;
    --lh-texte: 1.55;

    --mesure: 62ch;             /* longueur de ligne maximale du texte courant */

    /* --- Espacements fluides ---------------------------------------------- */
    --esp-2xs: clamp(0.375rem, 0.34rem + 0.18vw, 0.5rem);
    --esp-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
    --esp-s: clamp(0.75rem, 0.62rem + 0.6vw, 1.25rem);
    --esp-m: clamp(1.25rem, 1.02rem + 1.1vw, 2rem);
    --esp-l: clamp(2rem, 1.45rem + 2.7vw, 4rem);
    --esp-xl: clamp(3.5rem, 2.35rem + 5.4vw, 8rem);
    --esp-2xl: clamp(5rem, 3.1rem + 8.8vw, 12rem);

    /* --- Grille : 4 / 8 / 12 colonnes -------------------------------------- */
    --colonnes: 4;
    --marge: clamp(1rem, 0.6rem + 2vw, 3rem);
    --gouttiere: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
    --largeur-max: 120rem;
    --hauteur-entete: 4.5rem;

    /* --- Formes ------------------------------------------------------------- */
    --trait: 2px;               /* épaisseur de trait, en écho au logo monoligne */
    --decalage-ombre: 6px;      /* ombres dures uniquement, jamais floues */

    /* --- MOUVEMENT ---------------------------------------------------------- */
    --dur-rapide: 0.25s;        /* survols, curseur, micro-interactions */
    --dur-standard: 0.6s;       /* entrées d'éléments, menus */
    --dur-lente: 1s;            /* titres, changements de décor */
    --dur-cine: 1.4s;           /* lever de rideau, transitions de page */

    --ease-entree: cubic-bezier(0.16, 1, 0.3, 1);       /* tout ce qui entre en scène */
    --ease-sortie: cubic-bezier(0.7, 0, 0.84, 0);       /* tout ce qui sort */
    --ease-bascule: cubic-bezier(0.65, 0, 0.35, 1);     /* iris, décors, scrub */
    --ease-sticker: cubic-bezier(0.34, 1.56, 0.64, 1);  /* stickers, jamais sur du texte */

    --stagger-lettres: 0.025;   /* secondes, sans unité (lu par JS et calc()) */
    --stagger-mots: 0.06;
    --stagger-elements: 0.12;

    /* --- Plans (z-index) ---------------------------------------------------- */
    --z-contenu: 1;
    --z-entete: 50;
    --z-menu: 60;
    --z-curseur: 90;
    --z-rideau: 100;
}

@media (min-width: 48em) {      /* 768 px */
    :root {
        --colonnes: 8;
        --hauteur-entete: 5rem;
    }
}
@media (min-width: 64em) {      /* 1024 px */
    :root {
        --colonnes: 12;
    }
}

/* --- Décors : chaque section (ou la page) choisit son ambiance ------------ */
[data-decor="noir"] {
    --fond: var(--c-noir);
    --texte: var(--c-creme);
    --accent: var(--c-jaune);
    --discret: var(--c-gris-noir);
    --filet: rgb(243 236 221 / 0.22);
    --bouton-fond: var(--c-jaune);
    --bouton-texte: var(--c-encre);
    --ombre: var(--c-jaune);
}
[data-decor="jaune"] {
    --fond: var(--c-jaune);
    --texte: var(--c-encre);
    --accent: var(--c-encre);
    --discret: var(--c-brun-jaune);
    --filet: rgb(20 18 16 / 0.28);
    --bouton-fond: var(--c-encre);
    --bouton-texte: var(--c-jaune);
    --ombre: var(--c-encre);
}
[data-decor="rouge"] {
    --fond: var(--c-rouge);
    --texte: var(--c-creme);
    --accent: var(--c-jaune);   /* titres uniquement (4,03:1, AA grands textes) */
    --discret: var(--c-creme);
    --filet: rgb(243 236 221 / 0.35);
    --bouton-fond: var(--c-jaune);
    --bouton-texte: var(--c-encre);
    --ombre: var(--c-encre);
}
[data-decor="creme"] {
    --fond: var(--c-creme);
    --texte: var(--c-encre);
    --accent: var(--c-rouge);
    --discret: var(--c-gris-creme);
    --filet: rgb(20 18 16 / 0.2);
    --bouton-fond: var(--c-encre);
    --bouton-texte: var(--c-jaune);
    --ombre: var(--c-rouge);
}