/* ==========================================================================
   AO Craponne · prototype v2 — jetons
   Miroir des variables du fichier Figma « AO — Craponne » (xE3nEv06VMt1SJtjciJhRl),
   relues le 05/11/2026 : 7 collections, 123 variables (105 des fondations + 18 ajoutées
   aux étapes Blocs et Mouvement). Mêmes noms que la syntaxe de code WEB de Figma.
   Modes :
     Couleur   → [data-site="ville"] · [data-site="eole"]
     Saison    → [data-saison="cyan|saumon|violet|jaune"] (cyan = 26/27, par défaut)
     Type, Espace → base 390 (Mobile), @media (min-width: 1024px) = valeurs 1440 (Desktop)
     Palette, Rayon, Mouvement → mode unique « Valeur »
   Ajouts du tour V2 (pas encore dans Figma) : D15 pied Ville en Bleu d'azurage,
   [data-contrast="high"], [data-text="l|xl"], jetons des feuilles (D21).
   Mouvement : nombres nus comme dans Figma (ms, px, degrés, fraction) ;
   en CSS : calc(var(--menu-ouverture) * 1ms).
   ========================================================================== */

:root {
  /* ---------- Palette · primitives (on ne les applique jamais directement) ---------- */
  --palette-ville-blanc-de-linge: #F6F4EF;
  --palette-ville-encre: #16181A;
  --palette-ville-pierre-des-tourillons: #68625A;
  --palette-ville-filet: #DCD7CD;
  --palette-ville-bleu-d-azurage: #2B44A8;
  --palette-ville-azurage-profond: #1C2F7E;
  --palette-ville-petrole: #014762;
  --palette-ville-petrole-profond: #002B3D;
  --palette-ville-vert-d-yzeron: #3B6A4E;
  --palette-ville-or: #D5AB60;
  --palette-ville-champ: #8A8377;
  --palette-ville-blanc: #FFFFFF;
  --palette-ville-erreur: #A8201A;
  --palette-eole-nuit-de-salle: #0D0D0E;
  --palette-eole-blanc-de-scene: #F3F1EC;
  --palette-eole-coulisse: #A19B92;
  --palette-eole-filet-nuit: #2C2B2A;
  --palette-eole-erreur: #FF9488;
  --palette-saison-cyan: #24B4CC;
  --palette-saison-saumon: #F09078;
  --palette-saison-violet: #A77BCB;
  --palette-saison-jaune: #FAB40A;
  /* V2 · contraste renforcé (proposé, hors Figma) : chaque couple ≥ 7:1 */
  --palette-ville-erreur-renforce: #8E1B15;      /* 8,24:1 sur linge ; blanc dessus 9,06:1 */
  --palette-saison-violet-renforce: #BE9CDB;     /* 8,30:1 avec Nuit (le violet d'exemple fait 5,86:1) */

  /* ---------- Saison · 26/27 · Cyan par défaut ---------- */
  --saison-accent: var(--palette-saison-cyan);

  /* ---------- Type · Mobile 390 ---------- */
  /* Figma : Suisse Int'l. Sa licence web n'est pas disponible ici : Inter (Google Fonts) la remplace. */
  --police-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --police-serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
  /* Panneau « Affichage » : Normale ×1 · Grande ×1,25 · Très grande ×1,5 sur le texte courant,
     ×1,125 / ×1,25 sur les titres de section et de spectacle ; les titres géants ne bougent pas
     (ils sont calculés pour remplir la largeur et font déjà 56 px au moins). */
  --facteur-texte: 1;
  --facteur-titre: 1;
  --taille-ville-titre-accueil: 56px;        --interlignage-ville-titre-accueil: 56px;
  --taille-eole-titre: 64px;                 --interlignage-eole-titre: 60px;
  --taille-eole-titre-spectacle: calc(56px * var(--facteur-titre));
  --interlignage-eole-titre-spectacle: calc(52px * var(--facteur-titre));
  --taille-titre-section: calc(28px * var(--facteur-titre));
  --interlignage-titre-section: calc(32px * var(--facteur-titre));
  --taille-titre-ligne: calc(18px * var(--facteur-texte));
  --interlignage-titre-ligne: calc(24px * var(--facteur-texte));
  --taille-texte: calc(18px * var(--facteur-texte));
  --interlignage-texte: calc(28px * var(--facteur-texte));
  --taille-meta: calc(15px * var(--facteur-texte));
  --interlignage-meta: calc(22px * var(--facteur-texte));
  --taille-numeros-geants: 96px;             --interlignage-numeros-geants: 96px;
  --taille-libelle: calc(16px * var(--facteur-texte));
  --interlignage-libelle: calc(24px * var(--facteur-texte));
  --taille-colonne-heure: calc(96px * var(--facteur-texte));

  /* ---------- Espace · Mobile ---------- */
  --espace-4: 4px; --espace-8: 8px; --espace-16: 16px; --espace-24: 24px;
  --espace-40: 40px; --espace-64: 64px; --espace-120: 120px;
  --grille-marge: 24px;
  --grille-gouttiere: 16px;
  --grille-colonnes: 4;
  --grille-largeur-utile: 342px;
  --rythme-titre-texte: var(--espace-16);
  --rythme-bloc: var(--espace-40);
  --rythme-section: var(--espace-64);
  --cible-minimum: 44px;
  --trait-filet: 1px;
  --trait-forme: 1.5px;

  /* ---------- Rayon ---------- */
  --rayon-photo: 0px;
  --rayon-bouton: 0px;
  --rayon-pilule: 28px;

  /* ---------- Mouvement (nombres nus) ---------- */
  --souffle-courbe: cubic-bezier(0.22, 1, 0.36, 1);
  --souffle-duree: 600;
  --vent-rayon: 160;
  --vent-decalage-x: 16;
  --vent-decalage-y: 6;
  --vent-rotation: 5;
  --vent-inclinaison: 8;
  --vent-ressort-raideur: 140;
  --vent-ressort-amortissement: 16;
  --vent-retour: 900;
  --vent-force-date-bouton: 0.3;
  --vent-parallaxe-photo: 6;
  --vent-champ-opacite: 0.14;
  --vent-bouffee-duree: 1200;
  --aqueduc-declenchement: 0.3;
  --aqueduc-total: 3200;
  --aqueduc-sol-duree: 900;           --aqueduc-sol-depart: 0;
  --aqueduc-piles-duree: 600;         --aqueduc-piles-depart: 300;       --aqueduc-piles-decalage: 80;
  --aqueduc-suggestion-duree: 300;    --aqueduc-suggestion-depart: 600;  --aqueduc-suggestion-decalage: 60;
  --aqueduc-suggestion-glissement: 12;
  --aqueduc-arche-duree: 500;         --aqueduc-arche-depart: 900;       --aqueduc-arche-decalage: 60;
  --aqueduc-canal-duree: 900;         --aqueduc-canal-depart: 1700;
  --aqueduc-eau-duree: 1200;          --aqueduc-eau-depart: 2000;        --aqueduc-eau-longueur: 80;
  --aqueduc-riviere-depart: 1600;
  --riviere-trace-duree: 1600;
  --menu-ouverture: 400;
  --menu-fermeture: 240;
  --modale-ouverture: var(--menu-ouverture);
  --modale-fermeture: var(--menu-fermeture);
  --modale-glissement: 40;            /* → Espace › echelle/40 */
  --alerte-fermeture: var(--menu-fermeture);
  /* V2 · jetons à verser dans la collection Mouvement (07-pages-ux-v2 §2) */
  --carrousel-intervalle: 6000;       /* D17 : héros seulement */
  --carrousel-fondu: var(--souffle-duree);
  --feuilles-apparition: 600;         /* §1.12 */
  --feuilles-decalage: 120;
  --feuilles-tenue: 1200;
  --feuilles-disparition: 600;
  --feuilles-deplacement-y: 8;
  --feuilles-rotation: 8;
  --feuilles-declenchement: 0.3;
  --application-ecran: 1600;          /* §1.9 : 3 écrans = 4,8 s */
  --application-fondu: var(--souffle-duree);

  /* ---------- Hauteurs mesurées (core.js, ResizeObserver) ---------- */
  --haut-entete: 64px;
  --haut-pilule: calc(88px + env(safe-area-inset-bottom, 0px));  /* 16 + 56 + 16 + safe-area */
}

/* ---------- Type et Espace · Desktop 1440 (≥ 1 024) ---------- */
@media (min-width: 1024px) {
  :root {
    --taille-ville-titre-accueil: 128px;     --interlignage-ville-titre-accueil: 120px;
    --taille-eole-titre: 160px;              --interlignage-eole-titre: 144px;
    --taille-eole-titre-spectacle: calc(96px * var(--facteur-titre));
    --interlignage-eole-titre-spectacle: calc(88px * var(--facteur-titre));
    --taille-titre-section: calc(48px * var(--facteur-titre));
    --interlignage-titre-section: calc(52px * var(--facteur-titre));
    --taille-titre-ligne: calc(22px * var(--facteur-texte));
    --interlignage-titre-ligne: calc(28px * var(--facteur-texte));
    --taille-texte: calc(19px * var(--facteur-texte));
    --interlignage-texte: calc(30px * var(--facteur-texte));
    --taille-meta: calc(16px * var(--facteur-texte));
    --interlignage-meta: calc(24px * var(--facteur-texte));
    --taille-numeros-geants: 280px;          --interlignage-numeros-geants: 280px;
    --taille-colonne-heure: calc(160px * var(--facteur-texte));
    --grille-marge: 64px;
    --grille-gouttiere: 24px;
    --grille-colonnes: 12;
    --grille-largeur-utile: 1312px;
    --rythme-section: var(--espace-120);
    --haut-pilule: 0px;
  }
}

/* ---------- Taille du texte (panneau « Affichage ») ---------- */
:root[data-text="l"]  { --facteur-texte: 1.25; --facteur-titre: 1.125; }
:root[data-text="xl"] { --facteur-texte: 1.5;  --facteur-titre: 1.25; }

/* ---------- Saison (modes) ---------- */
[data-saison="cyan"]   { --saison-accent: var(--palette-saison-cyan); }
[data-saison="saumon"] { --saison-accent: var(--palette-saison-saumon); }
[data-saison="violet"] { --saison-accent: var(--palette-saison-violet); }
[data-saison="jaune"]  { --saison-accent: var(--palette-saison-jaune); }
[data-contrast="high"][data-saison="violet"],
[data-contrast="high"] [data-saison="violet"] { --saison-accent: var(--palette-saison-violet-renforce); }

/* ---------- Couleur · Ville ---------- */
[data-site="ville"] {
  --couleur-fond: var(--palette-ville-blanc-de-linge);
  --couleur-texte: var(--palette-ville-encre);
  --couleur-texte-secondaire: var(--palette-ville-pierre-des-tourillons);
  --couleur-filet: var(--palette-ville-filet);
  --couleur-action: var(--palette-ville-bleu-d-azurage);
  --couleur-action-texte: var(--palette-ville-blanc);
  --couleur-champ: var(--palette-ville-champ);
  /* D15 (05/11) : pied en Bleu d'azurage plein, texte, « Craponne », frise et Yzeron en linge */
  --couleur-pied-fond: var(--palette-ville-bleu-d-azurage);
  --couleur-pied-texte: var(--palette-ville-blanc-de-linge);   /* 7,66:1 */
  --couleur-pied-decor: var(--palette-ville-blanc-de-linge);
  --couleur-pied-eau: var(--palette-ville-or);                  /* trait d'eau, décor 3,94:1 */
  --couleur-pied-filet: rgb(246 244 239 / 0.32);
  --couleur-decor: var(--palette-ville-bleu-d-azurage);
  --couleur-pilule-fond: var(--palette-ville-encre);
  --couleur-pilule-texte: var(--palette-ville-blanc-de-linge);
  --couleur-erreur: var(--palette-ville-erreur);
  --couleur-focus-interieur: var(--palette-ville-bleu-d-azurage);
  --couleur-focus-exterieur: var(--palette-ville-blanc-de-linge);
  --couleur-focus-pied-interieur: var(--palette-ville-blanc-de-linge);
  --couleur-focus-pied-exterieur: var(--palette-ville-azurage-profond);  /* D15 */
  --couleur-pied-texte-secondaire: var(--palette-ville-blanc-de-linge);   /* pas de gris sur l'azurage */
  --couleur-pied-action: var(--palette-ville-blanc-de-linge);             /* bouton inversé sur azurage */
  --couleur-pied-action-texte: var(--palette-ville-bleu-d-azurage);       /* 7,66:1 */
  --couleur-aplat-fond: var(--palette-ville-bleu-d-azurage);              /* D19 */
  --couleur-aplat-texte: var(--palette-ville-blanc-de-linge);
  --couleur-aplat-action: var(--palette-ville-blanc-de-linge);
  --couleur-aplat-action-texte: var(--palette-ville-bleu-d-azurage);
  --couleur-aplat-filet: rgb(246 244 239 / 0.32);
  --couleur-aplat-focus-interieur: var(--palette-ville-blanc-de-linge);
  --couleur-aplat-focus-exterieur: var(--palette-ville-azurage-profond);
  --couleur-photo-encre: var(--palette-ville-bleu-d-azurage);
  color-scheme: light;
}

/* ---------- Couleur · Eole (re-déclaré sous un [data-saison] intérieur) ---------- */
[data-site="eole"],
[data-site="eole"] [data-saison] {
  --couleur-fond: var(--palette-eole-nuit-de-salle);
  --couleur-texte: var(--palette-eole-blanc-de-scene);
  --couleur-texte-secondaire: var(--palette-eole-coulisse);
  --couleur-filet: var(--palette-eole-filet-nuit);
  --couleur-action: var(--saison-accent);
  --couleur-action-texte: var(--palette-eole-nuit-de-salle);
  --couleur-champ: var(--palette-eole-coulisse);
  --couleur-pied-fond: var(--palette-eole-nuit-de-salle);
  --couleur-pied-texte: var(--palette-eole-blanc-de-scene);
  --couleur-pied-decor: var(--saison-accent);
  --couleur-pied-eau: var(--palette-eole-blanc-de-scene);
  --couleur-pied-filet: var(--palette-eole-filet-nuit);
  --couleur-decor: var(--saison-accent);
  --couleur-pilule-fond: var(--palette-eole-blanc-de-scene);
  --couleur-pilule-texte: var(--palette-eole-nuit-de-salle);
  --couleur-erreur: var(--palette-eole-erreur);
  --couleur-focus-interieur: var(--palette-eole-blanc-de-scene);
  --couleur-focus-exterieur: var(--saison-accent);
  --couleur-focus-pied-interieur: var(--palette-eole-blanc-de-scene);
  --couleur-focus-pied-exterieur: var(--saison-accent);
  --couleur-pied-texte-secondaire: var(--palette-eole-coulisse);
  --couleur-pied-action: var(--saison-accent);
  --couleur-pied-action-texte: var(--palette-eole-nuit-de-salle);
  --couleur-aplat-fond: var(--saison-accent);                             /* D19 : texte nuit */
  --couleur-aplat-texte: var(--palette-eole-nuit-de-salle);
  --couleur-aplat-action: var(--palette-eole-nuit-de-salle);              /* bouton nuit, libellé de saison */
  --couleur-aplat-action-texte: var(--saison-accent);
  --couleur-aplat-filet: rgb(13 13 14 / 0.4);
  --couleur-aplat-focus-interieur: var(--palette-eole-nuit-de-salle);
  --couleur-aplat-focus-exterieur: var(--palette-eole-blanc-de-scene);
  --couleur-photo-encre: var(--saison-accent);
  color-scheme: dark;
}

/* ---------- Contraste renforcé (V2, proposé) ----------
   Texte courant ≥ 7:1, plus de texte gris, filets de 2 px, champs cernés d'encre. */
[data-contrast="high"][data-site="ville"],
[data-contrast="high"] [data-site="ville"] {
  --couleur-texte-secondaire: var(--palette-ville-encre);            /* 16,20:1 */
  --couleur-filet: var(--palette-ville-encre);
  --couleur-action: var(--palette-ville-azurage-profond);            /* 10,87:1 ; blanc dessus 11,95:1 */
  --couleur-champ: var(--palette-ville-encre);
  --couleur-decor: var(--palette-ville-azurage-profond);
  --couleur-pied-fond: var(--palette-ville-azurage-profond);         /* linge dessus 10,87:1 */
  --couleur-pied-filet: var(--palette-ville-blanc-de-linge);
  --couleur-erreur: var(--palette-ville-erreur-renforce);            /* 8,24:1 */
  --couleur-focus-interieur: var(--palette-ville-azurage-profond);
  --couleur-focus-pied-exterieur: var(--palette-ville-encre);
  --couleur-aplat-fond: var(--palette-ville-azurage-profond);
  --couleur-aplat-action-texte: var(--palette-ville-azurage-profond);
  --couleur-aplat-filet: var(--palette-ville-blanc-de-linge);
  --couleur-aplat-focus-exterieur: var(--palette-ville-encre);
  --couleur-pied-action-texte: var(--palette-ville-azurage-profond);
  --couleur-photo-encre: var(--palette-ville-azurage-profond);
  --trait-filet: 2px;
}
[data-contrast="high"][data-site="eole"],
[data-contrast="high"] [data-site="eole"],
[data-contrast="high"] [data-site="eole"] [data-saison] {
  --couleur-texte-secondaire: var(--palette-eole-blanc-de-scene);    /* 17,21:1 */
  --couleur-filet: var(--palette-eole-coulisse);                     /* 7,05:1 */
  --couleur-champ: var(--palette-eole-blanc-de-scene);
  --couleur-pied-filet: var(--palette-eole-coulisse);
  --trait-filet: 2px;
}

/* ---------- Modes de bande (07-pages-ux-v2 §9.2) ----------
   Une bande en aplat ou le pied se pose avec data-mode ; les blocs posés dedans (boutons, liens,
   champs, focus, feuilles) résolvent seuls leurs couleurs. Aplat Ville = Bleu d'azurage, texte linge,
   bouton inversé (fond linge, libellé azurage) ; Aplat Eole = couleur de saison, texte nuit, bouton nuit. */
[data-mode="aplat"] {
  --couleur-fond: var(--couleur-aplat-fond);
  --couleur-texte: var(--couleur-aplat-texte);
  --couleur-texte-secondaire: var(--couleur-aplat-texte);
  --couleur-filet: var(--couleur-aplat-filet);
  --couleur-action: var(--couleur-aplat-action);
  --couleur-action-texte: var(--couleur-aplat-action-texte);
  --couleur-champ: var(--couleur-aplat-texte);
  --couleur-decor: var(--couleur-aplat-texte);
  --couleur-erreur: var(--couleur-aplat-texte);
  --couleur-photo-encre: var(--couleur-aplat-texte);
  --couleur-focus-interieur: var(--couleur-aplat-focus-interieur);
  --couleur-focus-exterieur: var(--couleur-aplat-focus-exterieur);
  background-color: var(--couleur-fond);
  color: var(--couleur-texte);
}
[data-mode="pied"] {
  --couleur-fond: var(--couleur-pied-fond);
  --couleur-texte: var(--couleur-pied-texte);
  --couleur-texte-secondaire: var(--couleur-pied-texte-secondaire);
  --couleur-filet: var(--couleur-pied-filet);
  --couleur-action: var(--couleur-pied-action);
  --couleur-action-texte: var(--couleur-pied-action-texte);
  --couleur-champ: var(--couleur-pied-texte);
  --couleur-decor: var(--couleur-pied-decor);
  --couleur-focus-interieur: var(--couleur-focus-pied-interieur);
  --couleur-focus-exterieur: var(--couleur-focus-pied-exterieur);
  background-color: var(--couleur-fond);
  color: var(--couleur-texte);
}