/*
 * Jetons de design — la seule source de vérité des couleurs, du rythme et des
 * durées. Les valeurs chromatiques viennent de la charte hubahub relevée sur
 * l'identité existante : encre #0F0841, violet #7122F6, électrique #3732FF,
 * cyan #2EA3F2, craie #F5F5F7.
 *
 * Le site est clair par défaut (fond blanc, texte encre). Deux variantes
 * redéfinissent les jetons sémantiques pour qu'un composant écrit une seule
 * fois fonctionne partout : .inverse (fond craie, pour l'alternance des
 * sections) et .sombre (fond nuit, pour le pied de page).
 */

:root {
    /* — Palette brute — */
    --nuit: #05021a;
    --nuit-2: #0a0530;
    --encre: #0f0841;
    --encre-2: #171055;
    --violet: #7122f6;
    --violet-clair: #9a5cff;
    --electrique: #3732ff;
    --cyan: #2ea3f2;
    --craie: #f5f5f7;
    --craie-2: #e7e6ee;

    /* — Rôles sémantiques (thème clair par défaut) — */
    --fond: #ffffff;
    --fond-eleve: var(--craie);
    --texte: var(--encre);
    --texte-doux: rgb(15 8 65 / 0.68);
    --texte-tres-doux: rgb(15 8 65 / 0.46);
    --trait: rgb(15 8 65 / 0.12);
    --trait-fort: rgb(15 8 65 / 0.26);
    /* Le circuit de fond (canevas) : des pistes discrètes sur fond clair. */
    --circuit-piste: rgb(15 8 65 / 0.07);
    --circuit-noeud: rgb(15 8 65 / 0.16);
    --accent: var(--violet);
    --accent-2: var(--electrique);
    --accent-3: var(--cyan);
    --sur-accent: #ffffff;

    /* — Dégradés signature — */
    /* Électrique → cyan, sans le violet : le passage violet-bleu faisait daté. */
    --flux: linear-gradient(100deg, var(--electrique) 0%, #2f6ff5 55%, var(--cyan) 100%);
    --flux-doux: linear-gradient(100deg, rgb(113 34 246 / 0.16), rgb(46 163 242 / 0.16));
    --halo: radial-gradient(circle at 50% 50%, rgb(113 34 246 / 0.5), transparent 68%);

    /* — Typographie — */
    /* Merriweather pour les titres, Poppins pour tout le reste — y compris les
       repères en capitales, qui gardent leur espacement mais plus la chasse
       fixe. --police-mono garde son nom pour ne pas renommer ses usages. */
    --police-titre: "Merriweather", "Merriweather Fallback", Georgia, serif;
    --police-texte: "Poppins", "Poppins Fallback", system-ui, -apple-system, sans-serif;
    --police-mono: var(--police-texte);

    /* Échelle fluide : min 360px → max 1600px. */
    --t-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
    --t-sm: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
    --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --t-md: clamp(1.125rem, 1.05rem + 0.36vw, 1.375rem);
    --t-lg: clamp(1.375rem, 1.2rem + 0.78vw, 2rem);
    /* Titres resserrés le 13/10/2026 (retour de la rédaction : « même taille
       sur tous les titres, plus petits ») : un cran de moins aux grands écrans. */
    --t-xl: clamp(1.6rem, 1.3rem + 1.3vw, 2.5rem);
    --t-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
    --t-3xl: clamp(2.75rem, 1.4rem + 6vw, 7rem);
    --t-geant: clamp(2.6rem, 1rem + 7vw, 8rem);

    /* — Rythme — */
    --gouttiere: clamp(1.25rem, 4vw, 4rem);
    --largeur-max: 82rem;
    --largeur-texte: 44rem;
    --section-y: clamp(3.5rem, 8vh, 6.5rem);
    --pile: 1.25rem; /* espacement vertical de base des blocs de texte */

    /* — Rayons & traits — */
    --rayon-xs: 0.25rem;
    --rayon-sm: 0.5rem;
    --rayon: 0.875rem;
    --rayon-lg: 1.5rem;
    --rayon-plein: 999px;

    /* — Mouvement — */
    --ease-sortie: cubic-bezier(0.22, 1, 0.36, 1); /* expo.out : la courbe maison */
    --ease-doux: cubic-bezier(0.65, 0.05, 0.36, 1);
    --ease-franc: cubic-bezier(0.85, 0, 0.15, 1);
    --duree-courte: 0.28s;
    --duree: 0.6s;
    --duree-longue: 1.1s;

    /* — Profondeurs — */
    --z-circuit: 0;
    --z-contenu: 1;
    --z-entete: 60;
    --z-menu: 70;
    --z-curseur: 90;
    --z-amorce: 100;

    /* Hauteur d'écran fiable sur mobile (barre d'URL rétractable). */
    --vh: 100svh;
    --entete-h: 4.75rem;
}

/*
 * Sections inversées : fond craie, texte encre. Elles rythment la page claire
 * par alternance. Le même composant s'y adapte sans variante CSS parce que tout
 * est écrit en jetons sémantiques.
 */
.inverse {
    --fond: var(--craie);
    --fond-eleve: #ffffff;
    --texte: var(--encre);
    --texte-doux: rgb(15 8 65 / 0.66);
    --texte-tres-doux: rgb(15 8 65 / 0.4);
    --trait: rgb(15 8 65 / 0.14);
    --trait-fort: rgb(15 8 65 / 0.3);
    --sur-accent: #ffffff;

    /* La craie seule faisait gris : deux lueurs de la marque la teintent. */
    background:
        radial-gradient(56rem 36rem at 100% 0%, rgb(113 34 246 / 0.09), transparent 62%),
        radial-gradient(48rem 32rem at 0% 100%, rgb(46 163 242 / 0.08), transparent 62%),
        var(--fond);
    color: var(--texte);
}

/* Îlot sombre (pied de page) : les jetons du thème nuit. */
.sombre {
    --fond: var(--nuit-2);
    --fond-eleve: var(--encre);
    --texte: var(--craie);
    --texte-doux: rgb(245 245 247 / 0.66);
    --texte-tres-doux: rgb(245 245 247 / 0.42);
    --trait: rgb(245 245 247 / 0.12);
    --trait-fort: rgb(245 245 247 / 0.26);
    --circuit-piste: rgb(245 245 247 / 0.1);
    --circuit-noeud: rgb(245 245 247 / 0.22);

    background-color: var(--fond);
    color: var(--texte);
}