/*
 * Le socle (audit 05, phase A) : la constitution graphique des quatre univers.
 * Charge AVANT toute autre feuille, panneaux Filament compris.
 *
 * Trois couches, et une discipline : les vues et les composants ne consomment
 * QUE la couche semantique. La couche d'identite ne sert qu'a definir la
 * semantique et les emplois strictement decoratifs (doodles, teintes de
 * trimestre) ; y toucher change l'identite du produit, pas un ecran.
 */

/* ----- Couche 1 : l'identite (docs/07, DEC-31) ----- */
:root {
    --papier: #FFFDF9;
    --papier-2: #F7F5EF;
    --encre: #171410;
    --ardoise: #5A5344;
    --ligne: #E9E4D8;

    --sarcelle: #0E6B6A;
    --sarcelle-fonce: #094D4C;

    --menthe: #DFF1E6;
    --sable: #F6ECD9;
    --peche: #FBE7DC;
    --ambre: #8A6210;
    --rouge: #B3261E;
    --vert: #20602C;
    --violet: #6D28D9;
}

/* ----- Couche 2 : la semantique, seule autorisee dans les vues ----- */
:root {
    --surface: var(--papier);
    --surface-2: var(--papier-2);
    --texte: var(--encre);
    --texte-2: var(--ardoise);

    --action: var(--sarcelle);
    --action-fonce: var(--sarcelle-fonce);
    --action-texte: var(--sarcelle);
    --action-pastel: var(--menthe);
    --sur-action: #FFFFFF;

    --ok: var(--vert);
    --ok-pastel: var(--menthe);
    --attention: var(--ambre);
    --attention-pastel: var(--sable);
    --danger: var(--rouge);
    --danger-pastel: #FDEAEA;
    --info: var(--sarcelle-fonce);
    --info-pastel: var(--menthe);

    /* Les teintes de trimestre du catalogue : un vocabulaire, pas des accents. */
    --t1: var(--sarcelle);
    --t1-p: var(--menthe);
    --t2: var(--violet);
    --t2-p: #EFE8FB;
    --t3: var(--ambre);
    --t3-p: var(--sable);
}

/* ----- Les familles, communes aux quatre univers ----- */
:root {
    --police-latin: 'Inter', system-ui, sans-serif;
    --police-arabe: 'Cairo', system-ui, sans-serif;
    --police-donnees: 'IBM Plex Mono', monospace;
}

/* ----- Rayons, ombres, mouvement, zones sures ----- */
:root {
    /* Les quatre rayons du systeme (audit 05) : champs, boutons, cartes, pastilles. */
    --rayon-champ: 8px;
    --rayon-bouton: 14px;
    --rayon-carte: 20px;
    --rayon-pastille: 9999px;

    /* Les deux ombres, et l'anneau de focus standard. */
    --ombre-douce: 0 1px 2px rgba(23, 20, 16, .05), 0 12px 32px rgba(23, 20, 16, .08);
    --ombre-franche: 6px 6px 0 rgba(23, 20, 16, .15);
    --anneau-focus: 0 0 0 3px color-mix(in srgb, var(--action) 35%, transparent);

    /*
     * L'echelle d'espacement, cinquieme axe du systeme.
     *
     * Elle manquait : couleurs, tailles, rayons, ombres et durees avaient leurs
     * jetons, l'espacement non. Mesure avant de la poser : 43 valeurs distinctes
     * dans les feuilles, 41 rendues sur le seul accueil, pratiquement tous les
     * entiers de 3 a 20 px. A comparer aux quatre rayons et aux huit tailles.
     *
     * Les crans suivent une grille de 4 px jusqu'a 32 : les valeurs les plus
     * employees du depot y tombaient deja, et les autres se deplacent de 2 px,
     * ce qui ne se voit pas. Au-dela, les sauts s'ecartent parce que les grandes
     * valeurs sont rares et qu'un pas serre n'y sert a rien.
     */
    --e1: 4px;
    --e2: 8px;
    --e3: 12px;
    --e4: 16px;
    --e5: 20px;
    --e6: 24px;
    --e7: 32px;
    --e8: 48px;
    --e9: 64px;
    --e10: 96px;

    /*
     * Le rythme vertical entre sections, arbitre a 112 px le 15 aout 2026 (la
     * maquette a 96 avait ete jugee trop serree). Il vit ici et non dans une
     * classe : une section qui s'en ecartait le faisait en silence, et c'est
     * exactement ce qui est arrive a l'apercu de l'accueil.
     */
    --rythme: 112px;

    /* Les trois durees du mouvement (02c). */
    --duree-courte: 120ms;
    --duree-moyenne: 200ms;
    --duree-longue: 300ms;

    /* Les zones sures des telephones a encoche, posees une fois. */
    --sure-haut: env(safe-area-inset-top, 0px);
    --sure-bas: env(safe-area-inset-bottom, 0px);
    --sure-debut: env(safe-area-inset-left, 0px);
    --sure-fin: env(safe-area-inset-right, 0px);
}

/*
 * ----- Couche 3 : les themes -----
 *
 * Le clair est le defaut, defini ci-dessus. La nuit est LIVREE (decision D2,
 * tranchee par le client le 28 aout 2026) : data-theme="nuit" sur html la pose
 * explicitement, data-theme="clair" refuse l'automatique, et sans attribut
 * l'ecran suit le telephone (bloc media ci-dessous). RIEN d'autre ne change.
 */
:root[data-theme="nuit"] {
    --surface: #16130F;
    --surface-2: #201C16;
    --texte: #F4F1EA;
    --texte-2: #B8B0A0;

    /* La couche d'identite bascule aussi : des feuilles anciennes la consomment
       directement (papier, lignes, pastels, teintes de trimestre), et sans ces
       valeurs la nuit laissait des fonds clairs sous du texte clair, 3 332
       defauts au premier passage de l'auditeur. */
    --papier: #16130F;
    --papier-2: #201C16;
    --encre: #F4F1EA;
    --ardoise: #B8B0A0;
    --ligne: #3A342C;
    --menthe: #16281A;
    --sable: #2B2312;
    --peche: #2E1614;
    --t1: #6ECCC4;
    --t2: #B79AF0;
    --t3: #D9A945;

    --action: #26716F;
    --action-fonce: #6ECCC4;
    --action-texte: #6ECCC4;
    --action-pastel: #12332F;
    --sur-action: #FFFFFF;

    --ok: #7FC98B;
    --ok-pastel: #16281A;
    --attention: #D9A945;
    --attention-pastel: #2B2312;
    --danger: #E8837B;
    --danger-pastel: #2E1614;
    --info: #6ECCC4;
    --info-pastel: #12332F;

    --t1-p: #12332F;
    --t2-p: #221833;
    --t3-p: #2B2312;

    --ombre-douce: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .5);
    --ombre-franche: 6px 6px 0 rgba(0, 0, 0, .5);
}

/*
 * L'automatique (decision D2, la nuit est LIVREE le 28 aout 2026) : sans choix
 * explicite, l'ecran suit le reglage du telephone. Les valeurs sont LES MEMES
 * que le bloc explicite ci-dessus, dupliquees parce que le CSS ne sait pas
 * partager un bloc entre un attribut et une media query : toute retouche se
 * fait DANS LES DEUX BLOCS, l'auditeur des deux themes le verifie de fait.
 */
@media (prefers-color-scheme: dark) {
    /* Jamais dans les panneaux : leur chrome Filament reste clair, et des
       jetons nocturnes dessous feraient un ecran mi-jour mi-nuit. */
    :root:not([data-theme="clair"]):not(:has(body.fi-body)) {
        --surface: #16130F;
        --surface-2: #201C16;
        --texte: #F4F1EA;
        --texte-2: #B8B0A0;

        /* La couche d'identite bascule aussi : des feuilles anciennes la consomment
           directement (papier, lignes, pastels, teintes de trimestre), et sans ces
           valeurs la nuit laissait des fonds clairs sous du texte clair, 3 332
           defauts au premier passage de l'auditeur. */
        --papier: #16130F;
        --papier-2: #201C16;
        --encre: #F4F1EA;
        --ardoise: #B8B0A0;
        --ligne: #3A342C;
        --menthe: #16281A;
        --sable: #2B2312;
        --peche: #2E1614;
        --t1: #6ECCC4;
        --t2: #B79AF0;
        --t3: #D9A945;
    
        --action: #26716F;
        --action-fonce: #6ECCC4;
        --action-texte: #6ECCC4;
        --action-pastel: #12332F;
        --sur-action: #FFFFFF;
    
        --ok: #7FC98B;
        --ok-pastel: #16281A;
        --attention: #D9A945;
        --attention-pastel: #2B2312;
        --danger: #E8837B;
        --danger-pastel: #2E1614;
        --info: #6ECCC4;
        --info-pastel: #12332F;
    
        --t1-p: #12332F;
        --t2-p: #221833;
        --t3-p: #2B2312;
    
        --ombre-douce: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .5);
        --ombre-franche: 6px 6px 0 rgba(0, 0, 0, .5);
    }
}


/*
 * Le rythme suit la largeur : une section ne respire pas de la meme facon sur
 * un telephone. Pose ici plutot que sur chaque classe de section, sinon chaque
 * section a sa propre idee du rythme, ce qui etait le cas avant.
 */

/*
 * ----- Les ilots toujours sombres -----
 *
 * Certaines sections assument leur noir dans les deux themes : un lecteur
 * video, le pied de page, le heros des lives, les blocs de sortie. Leurs
 * enfants melangent jetons et litteraux creme ; a l'interieur, les jetons
 * reprennent donc leurs valeurs CLAIRES, et la section se rend a l'identique
 * jour et nuit. Le socle nomme ici des classes consommatrices, entorse
 * assumee a la separation des couches : une seule source de valeurs vaut
 * mieux que deux copies qui divergent.
 */
footer.site, .hero-live, .sortie, .lecteur-v4, .hv-video .cadre,
.mini-lecteur, .mini-tel, .vignette, .lecteur-carre .scene, .lancement, .fin-extrait {
    --papier: #FFFDF9;
    --papier-2: #F7F5EF;
    --encre: #171410;
    --ardoise: #5A5344;
    --ligne: #E9E4D8;
    --menthe: #DFF1E6;
    --sable: #F6ECD9;
    --peche: #FBE7DC;
    --surface: var(--papier);
    --surface-2: var(--papier-2);
    --texte: var(--encre);
    --texte-2: var(--ardoise);
    --action: var(--sarcelle);
    --action-fonce: var(--sarcelle-fonce);
    --action-texte: var(--sarcelle);
    --action-pastel: var(--menthe);
    --sur-action: #FFFFFF;
    --ok: var(--vert);
    --ok-pastel: var(--menthe);
    --attention: var(--ambre);
    --attention-pastel: var(--sable);
    --danger: var(--rouge);
    --danger-pastel: #FDEAEA;
    --info: var(--sarcelle-fonce);
    --info-pastel: var(--menthe);
    --t1: var(--sarcelle);
    --t1-p: var(--menthe);
    --t2: var(--violet);
    --t2-p: #EFE8FB;
    --t3: var(--ambre);
    --t3-p: var(--sable);
    /* La couleur du texte se refixe aussi : elle s'herite en valeur calculee
       depuis l'exterieur de l'ilot, et un texte sans couleur propre garderait
       l'encre nocturne sur l'ecran clair d'une maquette de telephone. Les
       elements qui posent leur couleur la gardent. */
    color: var(--texte);
}

@media (max-width: 900px) {
    :root { --rythme: 68px; }
}

@media (max-width: 600px) {
    :root { --rythme: 52px; }
}

/*
 * Le mouvement respecte la preference de la personne, globalement (02c) : une
 * seule regle, aucun ecran n'a a y penser.
 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}