/* ==========================================================================
   Periscope : jetons de la direction artistique
   Version 1.1.1 (2026-10-19) · voir CHANGELOG.md
   --------------------------------------------------------------------------
   Fichier à copier tel quel. Il ne contient que des variables CSS et les
   @font-face de Barlow ; il ne stylise aucun élément.

   Thème clair par défaut. Le thème sombre s'appelle « mode ÉCO » : il s'active
   avec data-theme="dark" (ou data-bs-theme="dark" sur un site Bootstrap) posé
   sur <html>. Il ne suit jamais prefers-color-scheme : c'est un choix de
   l'utilisateur, mémorisé dans localStorage.theme.

   Les valeurs sont en px : elles ne dépendent pas de la taille de police
   racine du site hôte (le site periscope.digital fixe la racine à 10px).
   Détail et justification de chaque valeur : README.md.
   ========================================================================== */

/* Barlow, sous-ensembles « Slim » (245 glyphes, français complet, espaces
   insécables comprises). Licence SIL OFL, voir polices/OFL.txt. Adapter le
   chemin si tokens.css n'est pas à côté du dossier polices/. */
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('polices/Barlow-Regular-Slim.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('polices/Barlow-Bold-Slim.woff2') format('woff2');
}

:root {
    /* Version de la charte, lisible depuis la page :
       getComputedStyle(document.documentElement).getPropertyValue('--psc-version') */
    --psc-version: '1.1.1';

    /* ------------------------------------------------------------------
       1. Palette brute : ne change jamais avec le thème.
       Ne pas l'employer directement dans un composant, passer par les
       rôles du § 2. Exception : les surfaces de couleur constantes
       (carrefour, cadres de chiffres).
       ------------------------------------------------------------------ */
    --psc-petrole: #002b3c; /* couleur principale : texte, boutons, fonds sombres */
    --psc-menthe: #00f5b5; /* secondaire : surfaces, survols, accents sur pétrole */
    --psc-jaune: #e8ff00; /* tertiaire : surfaces, soulignés, pied de page */
    --psc-violet: #9e38ff; /* rare : une surface de carte, texte blanc dessus */
    --psc-violet-texte: #7414cf; /* violet lisible en texte sur fond clair (7,65:1) */

    /* Versions accessibles, même teinte (dérivées). Règle de la charte : dès
       qu'une couleur porte une information (texte, état, repère, bord d'un
       contrôle) et rate son seuil, c'est sa version accessible qui s'emploie.
       Les couleurs d'origine restent aux surfaces et aux décors. */
    --psc-menthe-texte: #00785a; /* menthe sur clair : 5,48:1 sur blanc, 4,68:1 sur gris */
    --psc-jaune-texte: #657000; /* jaune sur clair : 5,42:1 sur blanc, 4,63:1 sur gris */
    --psc-violet-clair: #b98aff; /* violet sur pétrole : 5,77:1, 4,85:1 sur retrait sombre */
    --psc-gris: #ededed; /* champs, filets, sections en retrait */
    --psc-blanc: #ffffff;

    /* Dégradé du symbole du logo (chargement, grandes illustrations).
       Jamais derrière du texte. */
    --psc-degrade-logo: linear-gradient(45deg, #00f5b5 1%, #2ac2c8 29%, #9344fa 94%);

    /* États (dérivés pour les outils internes ; la charte n'en dessine pas).
       Le rouge est la seule couleur hors palette, réservée aux erreurs. */
    --psc-rouge: #c8102e; /* 5,88:1 sur blanc */
    --psc-rouge-clair: #ff8c9b; /* erreur en mode ÉCO, 6,72:1 sur pétrole */

    /* ------------------------------------------------------------------
       2. Rôles : ce que les composants utilisent. Redéfinis en mode ÉCO.
       ------------------------------------------------------------------ */
    --psc-fond: var(--psc-blanc);
    --psc-fond-retrait: var(--psc-gris); /* champs, lignes alternées, encarts */
    --psc-texte: var(--psc-petrole); /* une seule couleur de texte */
    --psc-texte-doux: #4d6b77; /* dérivé : aide, métadonnées, indication de champ (4,87:1 sur gris) */
    --psc-titre-accent: var(--psc-petrole); /* titre d'en-tête de page (menthe en ÉCO) */
    --psc-souligne: var(--psc-jaune); /* trait de 8px sous un mot-clé de titre */
    --psc-trait: var(--psc-gris); /* filet discret (fil d'Ariane, nav mobile) */
    --psc-trait-fort: var(--psc-petrole); /* filet de liste, en-tête de tableau */
    --psc-puce: var(--psc-petrole); /* chevrons pixel des listes et flèches */
    --psc-numero: var(--psc-menthe-texte); /* gros numéros « 01 » (64px) */
    --psc-repere: var(--psc-menthe-texte); /* marque de la page courante (barre, cadre) */

    /* Surfaces colorées : repliées en pétrole en mode ÉCO. Le texte posé
       dessus est toujours --psc-sur-surface. */
    --psc-surface-menthe: var(--psc-menthe);
    --psc-surface-jaune: var(--psc-jaune);
    --psc-sur-surface: var(--psc-petrole);

    /* Pixel art : mêmes dessins, couleurs qui suivent le thème. */
    --psc-pixel-petrole: var(--psc-petrole);
    --psc-pixel-jaune: var(--psc-jaune);
    --psc-pixel-menthe: var(--psc-menthe); /* identique dans les deux thèmes */
    --psc-anneau-deco: var(--psc-jaune); /* grand « O » décoratif, masqué en ÉCO */

    /* Boutons */
    --psc-bouton-fond: var(--psc-petrole);
    --psc-bouton-texte: var(--psc-blanc);
    --psc-bouton-bordure: var(--psc-petrole);
    --psc-bouton-contour: var(--psc-petrole); /* texte et bordure du bouton secondaire */
    --psc-bouton-survol-fond: var(--psc-menthe);
    --psc-bouton-survol-texte: var(--psc-petrole);

    /* Réseaux sociaux : carré plein, glyphe en réserve */
    --psc-reseau-fond: var(--psc-petrole);
    --psc-reseau-glyphe: var(--psc-jaune);

    /* Champs de formulaire */
    --psc-champ-fond: var(--psc-gris);
    --psc-champ-texte: var(--psc-petrole);
    --psc-champ-bordure: #6a8c99; /* bord des champs et des cases, 3:1 au moins sur blanc, gris, jaune, pétrole */
    --psc-champ-coche: var(--psc-menthe); /* coche, point de radio, flèches de liste */
    --psc-champ-coche-fond: var(--psc-petrole); /* fond d'une case cochée */

    /* Voiles et lignes */
    --psc-voile: rgb(255 255 255 / 0.9); /* derrière une modale */
    --psc-voile-photo: rgb(0 43 60 / 0.64); /* sur une photo qui porte un titre blanc */
    --psc-ligne-alternee: rgb(231 231 231 / 0.2); /* lignes impaires d'un tableau */

    /* Focus clavier (dérivé) : violet sur clair, menthe sur pétrole */
    --psc-focus: var(--psc-violet-texte);

    /* États (dérivé) */
    --psc-succes: var(--psc-menthe-texte); /* barre d'alerte : 3:1 au moins sur gris */
    --psc-alerte: var(--psc-jaune-texte);
    --psc-info: var(--psc-violet-texte);
    --psc-erreur: var(--psc-rouge); /* aussi le texte d'erreur */

    /* ------------------------------------------------------------------
       3. Typographie : Barlow, deux graisses seulement (400 et 700).
       Valeurs bureau ; la version mobile (< 992px) est plus bas.
       ------------------------------------------------------------------ */
    --psc-police: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --psc-police-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* dérivé : code, identifiants */
    --psc-graisse: 400;
    --psc-graisse-forte: 700;

    /* taille / interlignage, en paires */
    --psc-affiche: 90px; /* titre d'affiche (« Work ») */
    --psc-affiche-il: 1;
    --psc-h1: 60px;
    --psc-h1-il: 1.167; /* 70px */
    --psc-h2: 40px;
    --psc-h2-il: 1.2; /* 48px */
    --psc-h3: 32px; /* graisse 400 : seul titre maigre */
    --psc-h3-il: 1.3125; /* 42px */
    --psc-h4: 24px;
    --psc-h4-il: 1.4167; /* 34px */
    --psc-h5: 18px;
    --psc-h5-il: 1.3333; /* 24px */
    --psc-chapo: 24px;
    --psc-chapo-il: 1.459; /* 35px */
    --psc-corps: 18px;
    --psc-corps-il: 1.5556; /* 28px */
    --psc-petit: 14px;
    --psc-petit-il: 1.5714; /* 22px */
    --psc-surtitre: 14px;
    --psc-surtitre-il: 1.7143; /* 24px */
    --psc-bouton: 16px;
    --psc-bouton-il: 1.75; /* 28px */
    --psc-numero-taille: 64px; /* « 01 » des listes numérotées */
    --psc-numero-il: 1.094; /* 70px */
    --psc-mini: 11px; /* étiquettes sous les pastilles d'en-tête (ÉCO, MENU) */

    /* ------------------------------------------------------------------
       4. Espacement : base 8px
       ------------------------------------------------------------------ */
    --psc-espace-05: 4px;
    --psc-espace-1: 8px;
    --psc-espace-2: 16px;
    --psc-espace-3: 24px;
    --psc-espace-4: 32px;
    --psc-espace-5: 40px;
    --psc-espace-6: 48px;
    --psc-espace-7: 56px;
    --psc-espace-8: 64px;
    --psc-espace-10: 80px;
    --psc-espace-11: 88px;
    --psc-espace-12: 96px;
    --psc-espace-15: 120px;

    --psc-section: 120px; /* padding vertical d'une section standard */
    --psc-section-compacte: 80px; /* citation, contact */
    --psc-titre-marge: 32px; /* marge sous un titre */

    /* ------------------------------------------------------------------
       5. Mise en page
       ------------------------------------------------------------------ */
    --psc-conteneur: 1108px; /* largeur utile standard (cadre 1440, marges 166) */
    --psc-conteneur-large: 1248px; /* visuels, galeries (marges 96) */
    --psc-conteneur-texte: 760px; /* dérivé : longueur de ligne confortable */
    --psc-marge: 16px; /* marge latérale minimale (mobile 320) */
    --psc-marge-entete: 56px; /* marge latérale de l'en-tête et des popins */
    --psc-gouttiere: 32px;
    --psc-entete-hauteur: 83px;

    /* Points de rupture (pour mémoire : une variable CSS ne marche pas dans
       une @media ; recopier la valeur) : 576, 768, 992, 1200. Le passage
       mobile / bureau de la charte se fait à 992px. */

    /* ------------------------------------------------------------------
       6. Formes : aplats, presque pas d'arrondis ni d'ombres
       ------------------------------------------------------------------ */
    --psc-rayon-pilule: 999px; /* boutons, tags */
    --psc-rayon-champ: 35px; /* champs, zone de texte (relevé Figma) */
    --psc-rayon-petit: 4px; /* cases de pagination */
    --psc-rayon-rond: 50%; /* photos rondes, boutons ronds */
    /* Photos, cartes, sections : angles droits, aucun rayon. */

    --psc-bordure-bouton: 1.5px;
    --psc-bordure-cadre: 10px; /* cadre menthe des chiffres clés */
    --psc-bordure-tableau: 4px; /* sous l'en-tête de tableau */
    --psc-bordure-menu: 4px; /* haut et bas du panneau de menu */
    --psc-barre-legende: 5px; /* barre menthe verticale des légendes */
    --psc-souligne-epaisseur: 8px;

    --psc-ombre-lecture: 0 4px 20px rgb(0 0 0 / 0.25); /* seule ombre relevée : bouton lecture */
    --psc-ombre-flottant: 0 4px 20px rgb(0 43 60 / 0.16); /* dérivé : menu déroulant, toast */

    /* ------------------------------------------------------------------
       7. Mouvement
       ------------------------------------------------------------------ */
    --psc-duree: 0.3s;
    --psc-courbe: ease-out; /* interface : boutons, liens, survols */
    /* Pixel art : jamais de courbe lisse, toujours steps(n). */

    /* ------------------------------------------------------------------
       8. Superposition
       ------------------------------------------------------------------ */
    --psc-z-entete: 1030;
    --psc-z-modale: 1055;
    --psc-z-toast: 1090;
    --psc-z-evitement: 1337;
    --psc-z-chargement: 2000;

    color-scheme: light;
}

/* Mobile : la charte bascule sous 992px. */
@media (max-width: 991.98px) {
    :root {
        --psc-affiche: 56px;
        --psc-h1: 40px;
        --psc-h1-il: 1.2; /* 48px */
        --psc-h2: 32px;
        --psc-h2-il: 1.25; /* 40px */
        --psc-h3: 28px;
        --psc-h3-il: 1.2857; /* 36px */
        --psc-h4: 24px;
        --psc-h4-il: 1.3333; /* 32px */
        --psc-chapo: 20px;
        --psc-chapo-il: 1.5; /* 30px */
        --psc-numero-taille: 48px;
        --psc-numero-il: 1.1667;
        --psc-section: 64px;
        --psc-section-compacte: 48px;
        --psc-titre-marge: 24px;
        --psc-entete-hauteur: 72px;
        --psc-marge-entete: 16px;
    }
}

/* ==========================================================================
   Mode ÉCO (thème sombre)
   Le fond devient pétrole, les surfaces menthe et jaune se replient en
   pétrole, la menthe reprend les rôles d'accent, le pixel art passe en blanc
   et les animations sont coupées (voir blocs.css).
   ========================================================================== */
[data-theme='dark'],
[data-bs-theme='dark'] {
    --psc-fond: var(--psc-petrole);
    --psc-fond-retrait: #0f3848; /* dérivé : pétrole éclairci de 6 % */
    --psc-texte: var(--psc-blanc);
    --psc-texte-doux: #b3c4cb; /* dérivé, 6,95:1 sur le retrait */
    --psc-titre-accent: var(--psc-menthe);
    --psc-souligne: var(--psc-menthe);
    --psc-trait: rgb(237 237 237 / 0.3);
    --psc-trait-fort: var(--psc-blanc);
    --psc-puce: var(--psc-menthe);
    --psc-numero: var(--psc-menthe);
    --psc-repere: var(--psc-menthe);

    --psc-surface-menthe: var(--psc-petrole);
    --psc-surface-jaune: var(--psc-petrole);
    --psc-sur-surface: var(--psc-blanc);

    --psc-pixel-petrole: var(--psc-blanc);
    --psc-pixel-jaune: var(--psc-blanc);
    --psc-anneau-deco: transparent;

    --psc-bouton-fond: var(--psc-petrole);
    --psc-bouton-texte: var(--psc-blanc);
    --psc-bouton-bordure: var(--psc-blanc);
    --psc-bouton-contour: var(--psc-blanc);

    --psc-reseau-fond: var(--psc-blanc);
    --psc-reseau-glyphe: var(--psc-petrole);

    --psc-champ-fond: #0f3848;
    --psc-champ-texte: var(--psc-blanc);
    --psc-champ-coche-fond: #0f3848; /* la coche menthe suffit à marquer l'état (8,77:1) */
    --psc-voile: rgb(0 43 60 / 0.9);
    --psc-ligne-alternee: rgb(255 255 255 / 0.04);

    --psc-focus: var(--psc-menthe);
    --psc-succes: var(--psc-menthe);
    --psc-alerte: var(--psc-jaune);
    --psc-info: var(--psc-violet-clair);
    --psc-erreur: var(--psc-rouge-clair);

    color-scheme: dark;
}

/* Une zone pétrole ou violette dans le thème clair (bande défilante, barre
   basse du pied de page, image-texte sombre, carte violette) reprend les
   rôles du mode ÉCO. */
.psc-sur-petrole,
.psc-section--petrole,
.psc-section--violet {
    --psc-texte: var(--psc-blanc);
    --psc-texte-doux: #b3c4cb;
    --psc-souligne: var(--psc-menthe);
    --psc-trait: rgb(237 237 237 / 0.3);
    --psc-trait-fort: var(--psc-blanc);
    --psc-puce: var(--psc-menthe);
    --psc-numero: var(--psc-menthe);
    --psc-repere: var(--psc-menthe);
    --psc-pixel-petrole: var(--psc-blanc);
    --psc-bouton-bordure: var(--psc-blanc);
    --psc-bouton-contour: var(--psc-blanc);
    --psc-focus: var(--psc-menthe);
    --psc-succes: var(--psc-menthe);
    --psc-alerte: var(--psc-jaune);
    --psc-info: var(--psc-violet-clair);
    --psc-erreur: var(--psc-rouge-clair);
}