/* tokens.css — Villa Vida, charte graphique v1.0 (octobre 2026).
   UNIQUE source des variables du site (brief de build §2). Aucune page ne définit de couleur, de police ni de durée :
   elle compose avec ces tokens. Toute nouvelle variable passe par ce fichier (et par STYLEGUIDE.md).

   La maison : le noir domine, l'or signe, le blanc porte le logo (disque) et les documents (billets).
   Les huit notes du logo ne vivent que dans le logo (Winter = or, sans note), avec une exception : la page d'une édition
   et l'agenda portent la note de la série de l'événement (charte §08 « une seule note par support, toujours avec la
   maison ») : en aplat ou en cartouche, avec le texte que la charte impose. Décision Yann 06.10.2026 : Sunday Vibes =
   rouge automne (texte BLANC). Winter = or (la maison). Les passés perdent leur note (noir-3).
   Jamais de dégradé entre deux couleurs ; une photo n'est voilée que de noir (dégradé noir sous le texte). */

/* Propriétés typées : nécessaires pour animer des longueurs lues par le script ou interpolées en CSS. */
@property --ecart     { syntax: '<length>';     inherits: true; initial-value: 0px; }
@property --g         { syntax: '<length>';     inherits: true; initial-value: 0px; }
@property --off       { syntax: '<length>';     inherits: true; initial-value: 0px; }
@property --noeud-y   { syntax: '<length>';     inherits: true; initial-value: 0px; }

:root {
  /* 08.10.2026 : la page vit dans un cadre de 1600 px au plus (écrans ultra-larges). Toutes les tailles « vw » du site
     passent par --vw, plafonné à 16 px (1 % de 1600) : jusqu’à 1600 px de large, rien ne change. */
  --vw: min(1vw, 16px);
  --cadre: 1600px;
  /* ------------------------------------------------------------------ la maison (charte §07) */
  --noir:   #0A0908;   /* Noir Villa : le fond. Texte crème 17,6:1, or 8,1:1 */
  --noir-2: #14120F;   /* surfaces posées sur le noir (cartes, colonne de 45 %) */
  --noir-3: #1E1B17;   /* surface d'un état (survol d'une ligne, champ) */
  --or:     #C6A03E;   /* Or Villa : titres sur noir, filets, cartouches, bouton principal (texte noir 8,1:1) */
  --or-clair:   #E4C878; /* survol, petites mentions sur noir */
  --or-profond: #7E5F12; /* l'or des textes sur blanc (5,9:1) ; jamais l'or Villa sur blanc (2,5:1) */
  --blanc:  #FFFFFF;   /* le disque du logo, les documents (billets) */
  --texte:   #F2EEE6;  /* texte courant sur noir (17,6:1) */
  --texte-2: #CFC9BD;  /* texte secondaire sur noir (12,3:1) */
  --texte-3: #A39C90;  /* mentions, légendes discrètes (7,4:1) */
  /* les notes des séries (charte §08) : en aplat ou en cartouche, jamais en dégradé, une seule par écran avec la maison.
     Le texte posé dessus est imposé : blanc sur rouge (5,0:1 ; jamais de noir sur rouge sous 24 px), noir sur orange et ciel. */
  --rouge:  #D7261C;   /* Sunday Vibes (décision Yann 06.10.2026, rouge automne) : texte blanc */
  --orange: #FEAE27;   /* Spring : texte noir 10,7:1 */
  --ciel:   #19B8F6;   /* Summer : texte noir 8,7:1 */
  --ligne:        rgb(198 160 62 / 17%);   /* bord d'une carte */
  --ligne-forte:  rgb(198 160 62 / 38%);   /* filet de liste */

  /* ------------------------------------------------------------------ rôles (noms historiques, valeurs de la charte)
     Les pages composent avec ces rôles : changer un rôle ici repeint tout le site. */
  --guide:  var(--noir);     /* colonne de 55 % (celle qui guide) */
  --suit:   var(--noir-2);   /* colonne de 45 % (celle qui suit) */
  --nuit:   var(--noir);     /* chapitre de nuit */
  --encre:  var(--noir);     /* texte sur blanc ou sur or, aplats noirs */
  --papier: var(--blanc);    /* surfaces blanches : billets, disque ; jamais du texte (le texte est --texte) */
  --encre-douce: #3A3A3A;    /* texte secondaire sur blanc uniquement (11,4:1) */

  /* ------------------------------------------------------------------ les deux colonnes (grille 45 / 55, sans ligne visible)
     06.10.2026 : la ligne verticale au milieu (ancienne « couture ») est retirée à la demande du client.
     Les fonds « couture » deviennent un noir plat ; le rythme passe par des bandes horizontales noir / noir-2. */
  --part-suit: 45%;      /* largeur de la colonne noir-2 (celle qui suit) */
  --part-guide: 55%;     /* largeur de la colonne noire (celle qui guide) */
  --fil: 2px;            /* le filet or (charte §10 : 2 px à l'écran) */
  --fond-couture: var(--guide);
  --fond-inverse: var(--suit);
  --fond-touche: var(--guide);
  --fond-inverse-touche: var(--suit);

  /* ------------------------------------------------------------------ transparences (toujours dérivées de la maison) */
  --filet: var(--ligne-forte);                                        /* filets de liste */
  --voile-papier: color-mix(in srgb, var(--or) 12%, transparent);     /* survol / focus d'une surface sur noir */
  --voile-encre: color-mix(in srgb, var(--or) 8%, transparent);       /* survol d'un grand lien sur noir */
  --voile-reliure: color-mix(in srgb, var(--noir) 22%, transparent);  /* creux d'une reliure, d'un pli */
  --ombre: color-mix(in srgb, var(--noir) 30%, transparent);          /* ombre d'un document posé (billet) */
  --ombre-forte: color-mix(in srgb, var(--noir) 45%, transparent);
  /* le voile des photos (charte §11) : un dégradé NOIR sous le texte, jamais un voile de couleur */
  --voile-photo: linear-gradient(to top, color-mix(in srgb, var(--noir) 88%, transparent) 0%, color-mix(in srgb, var(--noir) 55%, transparent) 45%, transparent 100%);

  /* ------------------------------------------------------------------ matière : aucune (charte : « noir plat ») */
  --grain: none;
  --grain-taille: 220px;
  --grain-opacite: 0;

  /* ------------------------------------------------------------------ typographie (charte §09 : Anybody + Epilogue) */
  --f-display: 'Anybody', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --f-texte: 'Epilogue', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Toujours une composante rem (WCAG 1.4.4, F94). Le vw pur n'est permis que sur un doublon aria-hidden. */
  --t-h1: clamp(3rem, 1rem + calc(20 * var(--vw)), 11rem);
  --t-h2: clamp(3rem, 1.75rem + calc(5.4 * var(--vw)), 8.25rem);    /* duo-titres de chapitre : 48 px min (délié ≥ 48 px) ; téléphone : voir plus bas */
  --t-h3: clamp(1.75rem, 1.15rem + calc(2.6 * var(--vw)), 3.5rem);
  --t-titre: clamp(1.375rem, 1.1rem + calc(1.1 * var(--vw)), 2.125rem);
  --t-corps: clamp(1.0625rem, 1rem + calc(.25 * var(--vw)), 1.25rem);
  --t-petit: clamp(.9375rem, .9rem + calc(.15 * var(--vw)), 1.0625rem);
  --t-mini: .75rem;
  --interligne: 1.5;

  /* le plein et le délié (charte §09) */
  --delie: 'wdth' 140, 'wght' 200;
  --delie-serre: 'wdth' 96, 'wght' 200;
  --plein: 'wdth' 56, 'wght' 900;
  --plein-ouvert: 'wdth' 100, 'wght' 900;
  --noeud: 'wdth' 150, 'wght' 900;

  /* ------------------------------------------------------------------ motion : la bachata à 130 BPM */
  --temps: 461ms;
  --mesure: 1844ms;
  --elan: cubic-bezier(.2, .7, .2, 1);
  --prise: cubic-bezier(.3, 1.35, .5, 1);
  --vt: 260ms;

  /* ------------------------------------------------------------------ espace et cadre */
  --marge: clamp(1rem, .5rem + calc(2.2 * var(--vw)), 3rem);
  --pas: clamp(4rem, 2.5rem + calc(7 * var(--vw)), 10rem);
  --bandeau-h: 28px;
  --disque-barre: 96px;   /* charte §05 : le logo en disque ne descend jamais sous 96 px (« la taille de l'en-tête du site ») ;
                             exception au téléphone (décision Yann du 12.10.2026) : 52 px, voir plus bas */
  --barre-h: 108px;
  --rayon: 10px;
  --mesure-texte: 34rem;

  /* ------------------------------------------------------------------ profondeur */
  --z-texte: 4;
  --z-billet: 7;
  --z-noeud: 8;
  --z-barre: 50;
  --z-journee: 80;
  --z-evitement: 100;

  color-scheme: dark;
}

/* 11.10.2026 (P2, audit §12) : au téléphone, un duo h2 (question ≤ 22 signes, réponse ≤ 12) tient en deux lignes au total
   dès 320 px. La taille suit la largeur utile (40 px à 320, 46 à 375, 49 à 414, 56 au plus) et le délié se resserre
   (composants.css §6 : question en wdth 78, réponse en plein 900 / 56). Aussi : « Merci pour la danse. » du pied. */
@media (max-width: 599px) {
  :root { --t-h2: clamp(2rem, .5rem + calc(10 * var(--vw)), 3.5rem); }
}

/* 12.10.2026, décision de Yann (agence) : au téléphone, la barre est compacte, pour laisser la place au grand logo de
   l'accueil (« le logo principal, je trouve dommage qu'il soit masqué »). La charte §05 voulait le disque de la barre à
   96 px au moins ; Yann autorise une barre plus petite au téléphone : 64 px de haut, disque de 52 px (« Menu » et
   « Je participe » gardent 44 px de zone tactile). Téléphone = moins de 600 px de large (en portrait), ou couché (moins
   de 900 px de large et 30 rem de haut au plus). La tablette (600 à 899 px en portrait) et le bureau gardent 108 / 96 px.
   Tout ce qui dépend de --barre-h suit (scroll-padding-top, premiers écrans, scènes collantes, Menu, barre.js). */
@media (max-width: 599px), (max-width: 899px) and (max-height: 30rem) {
  :root { --barre-h: 64px; --disque-barre: 52px; }
}