/* ==========================================================================
   Tokens – Denis Hérisson
   Source : design/specs.md + mesures au pixel sur design/maquettes/*.png (1920 px).

   Unité de mise à l'échelle : --u = 1 px de la maquette à 1920 px de large.
   Sous 1920 px, toutes les distances issues de la maquette se réduisent
   proportionnellement (calc(N * var(--u))) ; au-delà, elles restent fixes.

   Breakpoints (les custom properties ne fonctionnent pas dans les media queries :
   reprendre toujours exactement ces valeurs) :
     mobile   : max-width: 767.98px   → 1 colonne, menu mobile
     tablette : 768px – 1023.98px     → mise en page simplifiée, pas d'épinglage
     desktop  : min-width: 1024px     → mise en page de la maquette, scroll horizontal épinglé
     large    : min-width: 1920px     → maquette au pixel, conteneur 1556 px centré
   ========================================================================== */

:root {
	/* ---------- Échelle ---------- */
	--u: calc(min(100vw, 1920px) / 1920);

	/* ---------- Couleurs ---------- */
	--c-black: #000;
	--c-ink: #1d1d1b;
	--c-white: #fff;
	--c-blue: #7d97a1;
	--c-blue-dark: #82939d;
	--c-blue-ghost: #e7ecee;  /* #7D97A1 à 18 % sur blanc (mesuré) */
	--c-blue-ghost-survol: #dce4e7; /* bandeau store au survol : un ton plus soutenu */
	--c-sand: #f0ece9;        /* #D8CEC6 à 39 % sur blanc (mesuré) */
	--c-grey: #808080;
	--c-grey-light: #898989;
	--c-line: #707070;
	--c-overlay: #cecece;     /* voile de survol des œuvres, en multiply */
	--c-focus: #7d97a1;
	--c-erreur: #b3261e;      /* messages d'erreur du formulaire (contraste 6,5:1 sur sable) */
	--c-placeholder: #6f6f6f; /* exemples dans les champs : contraste AA sur sable */
	--c-trait-doux: rgb(0 0 0 / 0.14); /* lignes du papier à lettre */

	/* ---------- Polices ---------- */
	--ff-sans: "Gotham", "Helvetica Neue", Arial, sans-serif;
	--ff-serif: "freight-big-pro", Georgia, "Times New Roman", serif;
	--ff-condensed: "Bebas Neue", "Arial Narrow", sans-serif;
	--fw-book: 400;
	--fw-medium: 500;
	--fw-bold: 700;

	/* ---------- Tailles de texte (min mobile → valeur maquette) ---------- */
	--fs-display: clamp(3.5rem, calc(120 * var(--u)), 7.5rem);          /* 56 → 120 */
	--fs-display-store: clamp(2.75rem, calc(101 * var(--u)), 6.3125rem); /* 44 → 101 */
	--fs-store-list: clamp(2.25rem, calc(70 * var(--u)), 4.375rem);      /* 36 → 70 */
	--fs-accroche: clamp(1.625rem, calc(48 * var(--u)), 3rem);           /* 26 → 48 */
	--fs-titre-section: clamp(1.5rem, calc(42 * var(--u)), 2.625rem);    /* 24 → 42 */
	--fs-body: clamp(1.0625rem, calc(20 * var(--u)), 1.25rem);           /* 17 → 20 */
	--fs-nav: 1.25rem;          /* 20 */
	--fs-cta: 0.875rem;         /* 14 */
	--fs-legende-titre: 0.875rem; /* 14 */
	--fs-legende: 0.75rem;      /* 12 */
	--fs-footer: 0.8125rem;     /* 13 */

	/* ---------- Interlignes (ratios XD) ---------- */
	--lh-display: 0.9167;       /* 110 / 120 */
	--lh-display-store: 0.901;  /* 91 / 101 */
	--lh-store-list: 1;         /* 70 / 70 */
	--lh-accroche: 1.0417;      /* 50 / 48 */
	--lh-titre-section: 1.19;   /* 50 / 42 */
	--lh-body: 1.4;             /* 28 / 20 */
	--lh-timeline: 2.3;         /* 46 / 20 */
	--lh-nav: 2.8;              /* 56 / 20 */
	--lh-cta: 1.4286;           /* 20 / 14 : boîte resserrée, la hauteur de clic vient du padding */
	--lh-legende: 1.25;         /* 15 / 12 */
	--lh-footer: 1.3077;        /* 17 / 13 */
	--lh-legende-titre: 1.25;   /* 17.5 / 14 */
	--lh-nom-vertical: 1.357;   /* 19 / 14 */

	/* ---------- Espacement des lettres ---------- */
	--ls-display: -0.03em;      /* XD −30 */
	--ls-display-store: -0.021em;

	/* ---------- Grille ---------- */
	--container-max: 1556px;
	--page-margin: max(1rem, calc(182 * var(--u)));
	--container: min(100% - 2 * var(--page-margin), var(--container-max));
	--gutter: max(0.75rem, calc(16 * var(--u)));
	--columns: 12;

	/* ---------- Espacements génériques (tablette, mobile, composants hors maquette) ---------- */
	--space-3xs: 0.25rem; /* 4 */
	--space-xs: 0.5rem;   /* 8 */
	--space-s: 1rem;      /* 16 */
	--space-m: 1.25rem;   /* 20 */
	--space-l: 2.5rem;    /* 40 */
	--space-xl: 4rem;     /* 64 */

	/* ---------- Formes et traits ---------- */
	--radius-media: max(0.375rem, calc(10 * var(--u)));  /* 10 px à 1920, jamais moins de 6 px */
	--radius-panel: max(1rem, calc(30 * var(--u)));
	--line-width: 1px;
	--store-rule: 3px;

	/* ---------- Transitions ---------- */
	--t-hover: 0.3s ease-out;
	--t-header: 0.35s ease-out;       /* apparition / disparition du header */
	--courbe-rideau: cubic-bezier(0.77, 0, 0.18, 1);  /* menu mobile : ouverture en rideau */
	--t-menu: 0.7s;
	--t-menu-pas: 0.07s;              /* décalage entre les liens du menu */
	--courbe-apparition: cubic-bezier(0.2, 0.65, 0.25, 1);
	--t-apparition: 0.9s;
	--t-apparition-pas: 0.12s;        /* décalage entre éléments qui apparaissent ensemble */
	--apparition-decalage: 2rem;      /* textes : montée de 32 px */
	--apparition-zoom: 1.06;          /* images : léger dézoom pendant le dévoilement */
	--apparition-rotation: -25deg;    /* tampons : pivotent en se posant */
	--apparition-tampon: 0.8;
	--hover-decalage-fleche: 18px;   /* seconde flèche des CTA (17–19 px dans XD) */
	--hover-glissement: 12px;        /* « VOIR → » qui remonte au survol */
	--cta-gap: 1.0625rem;            /* 17 px entre le libellé et la flèche */
	--cta-zone: 0.75rem;             /* agrandit la zone cliquable des CTA (44 px) sans décaler la mise en page */
	--fleche-long: 22px;
	--fleche-larg: 15px;

	/* ---------- Plans (z-index) ---------- */
	--z-base: 1;
	--z-header: 10;
	--z-menu: 100;
	--z-dessus: 2;

	/* ---------- Header ---------- */
	--header-pad-top: calc(46 * var(--u));
	--header-pad-bas: calc(20 * var(--u));           /* marge sous le logo quand le header flotte (prise sur le hero) */
	/* Logo à x96 à 1920 : 86 px à gauche du conteneur. Calé sur la grille, il reste à sa place
	   relative sur les très grands écrans (sinon il resterait collé au bord, loin du contenu). */
	--header-inset: max(1rem, calc((100% - var(--container)) / 2 - 86 * var(--u)));
	--logo-w: max(2rem, calc(48 * var(--u)));
	--nav-gap: calc(104 * var(--u));
	--nav-haut: calc(61 * var(--u));                 /* nav : ligne de base à y97 */
	--logo-ratio: 47.33 / 90.14;
	--logo-survol-echelle: 2.586;                    /* rosace de survol : 122 px pour une goutte de 47 px (XD) */
	--logo-w-compact: max(1.5rem, calc(30 * var(--u)));  /* header resserré après le scroll */
	--header-compact-pad: 0.875rem;
	--ombre-header: 0 1px 0 rgb(0 0 0 / 0.06);
	--header-h: calc(var(--header-pad-top) + var(--logo-w) / (var(--logo-ratio)) + var(--header-pad-bas));

	/* ---------- Burger et menu mobile ---------- */
	--burger-zone: 2.75rem;     /* 44 px : cible tactile */
	--burger-w: 1.625rem;       /* 26 px */
	--burger-h: 0.625rem;       /* 10 px entre le haut du 1er trait et le bas du 2e */
	--burger-trait: 1.5px;      /* même épaisseur que les flèches */
	--burger-court: 60%;        /* second trait plus court, s'allonge au survol */
	--menu-icone-w: 1.75rem;

	/* ---------- Hero ---------- */
	--hero-pad-top: calc(19 * var(--u));             /* photo à y176 : 46 + 91 (logo) + 20 (header) + 19 */
	--hero-titre-decalage: calc(78 * var(--u));      /* titre fantôme x260 */
	--hero-titre-haut: calc(88 * var(--u));          /* titre fantôme : glyphes à y259 */
	--hero-titre-w: calc(707 * var(--u));
	--hero-accroche-decalage: calc(8 * var(--u));    /* accroche x190 */
	--hero-accroche-haut: calc(16 * var(--u));
	--hero-accroche-w: calc(770 * var(--u));
	--hero-retourne-decalage: calc(-30 * var(--u));  /* titre retourné x152 */
	--hero-retourne-haut: calc(38 * var(--u));
	--hero-photo-ratio: 638 / 819;
	--hero-tampon-w: calc(193 * var(--u));
	--hero-tampon-x: calc(-119 * var(--u));          /* x980 : 119 px à gauche de la photo */
	--hero-tampon-y: calc(547 * var(--u));           /* y723 : 547 px sous le haut de la photo */
	--hero-nom-x: calc(19 * var(--u));               /* texte vertical à 19 px de la photo */
	--hero-cta-haut: calc(21 * var(--u));
	--hero-texte-haut: calc(93 * var(--u));         /* variante texte courant (À propos) : texte à y473 */
	--hero-cta-decalage-texte: calc(-30 * var(--u)); /* son lien remonte à y994 */
	--hero-mobile-display: min(19vw, 9svh);          /* mobile : le hero tient dans l'écran */
	--hero-mobile-accroche: min(8vw, 3.9svh);
	--hero-mobile-photo-w: 62%;

	/* ---------- Séparateur ---------- */
	--sep-h: max(5rem, calc(197 * var(--u)));
	--sep-avant: calc(55 * var(--u));
	--sep-chevauche-suivante: calc(52 * var(--u));
	--sep-chevauche-precedente: calc(67 * var(--u));
	--sep-cta-x: calc(40 * var(--u));

	/* ---------- Scroll horizontal « Découvrir mon univers » ---------- */
	--univers-pad-top: calc(98 * var(--u));
	--univers-scene-haut: calc(246 * var(--u));      /* haut de la zone d'images (y1492 − y1246) */
	--univers-debut: calc((100% - var(--container)) / 2 - 14 * var(--u)); /* première image à x168 à 1920, calée sur la grille au-delà */
	--univers-fin: calc(411 * var(--u));             /* marge après la dernière image (rectangle vide XD) */
	--univers-gap: calc(81 * var(--u));
	--univers-scene-marge: calc(100 * var(--u));     /* entre le titre et les images, sans épinglage */
	--univers-scene-natif: clamp(22rem, calc(834 * var(--u)), 52.125rem); /* hauteur de la zone d'images sans épinglage */

	/* ---------- Sélection par thème ---------- */
	--selection-pad-top: calc(125 * var(--u));
	--themes-haut: calc(53 * var(--u));
	--themes-decalage: calc(75 * var(--u));          /* liste des thèmes à x257 */
	--themes-gap-ligne: calc(9 * var(--u));
	--themes-gap: calc(6 * var(--u));
	--selection-bas: calc(296 * var(--u));           /* thèmes → citation : 418 px entre les textes (maquette v2) */

	/* ---------- Fiche œuvre ---------- */
	--fiche-fond-h: 120vh;                          /* panneau : 120 % de la hauteur d’écran */
	--fiche-pad-top: calc(7 * var(--u));            /* image à y164 */
	--fiche-texte-haut: calc(100 * var(--u));       /* thème : glyphes à y263 */
	--fiche-titre-haut: calc(-44 * var(--u));       /* le titre mord sur le thème (glyphes à y342) */
	--fiche-caracs-haut: calc(10 * var(--u));
	--fiche-desc-haut: calc(45 * var(--u));
	--fiche-cta-bas: 0px;
	--fiche-contenu-haut: calc(133 * var(--u));     /* premier média à y1149 */
	--fiche-gap: calc(105 * var(--u));
	--fiche-gap-colonnes: calc(106 * var(--u));
	--fiche-ratio-demi: 725 / 920;                  /* médias en demi-largeur */
	--video-bouton: 2.75rem;                        /* 44 px : cible tactile */
	--video-lecture-l: 11px;                        /* icône lecture : triangle 11 × 14 */
	--video-lecture-h: 7px;
	--video-lecture-optique: 3px;                   /* recentrage optique du triangle */
	--video-pause-w: 10px;                          /* icône pause : deux barres de 3 px */
	--video-pause-h: 12px;
	--video-pause-barre: 3px;
	--fiche-nav-haut: calc(103 * var(--u));
	--fiche-nav-bas: calc(176 * var(--u));
	--fiche-nav-ecart: calc(78 * var(--u));
	--fiche-nav-decalage: calc(-7 * var(--u));      /* liens légèrement au-dessus du milieu du trait */

	/* ---------- Parcours (À propos) ---------- */
	--parcours-liste-haut: calc(200 * var(--u));     /* dates : glyphes à y1609 */
	--parcours-col-annee: max(8rem, calc(198 * var(--u))); /* intitulés à x381 ; « Depuis 2020 » tient sur une ligne */
	--parcours-illu-w: calc(480 * var(--u));
	--parcours-illu-haut: calc(136 * var(--u));      /* illustration centrée sur la zone de la maquette (y1530–2080) */
	--parcours-illu-mobile: min(70%, 20rem);
	--parcours-pad-bas: calc(213 * var(--u));        /* section de 1080 px, comme la maquette */

	/* ---------- Image pleine largeur ---------- */
	--image-pleine-haut: calc(65 * var(--u));
	--image-pleine-bas: calc(11 * var(--u));
	--image-pleine-max: 1200px;                      /* au-delà, l'image reste centrée à 1200 px */

	/* ---------- Page introuvable (404) ---------- */
	--page-404-bas: calc(200 * var(--u));
	--page-404-motif-w: max(10rem, calc(380 * var(--u)));
	--page-404-motif-mobile: 5rem;

	/* ---------- Contact ---------- */
	--contact-pad-top: calc(88 * var(--u));
	--contact-pad-bas: calc(140 * var(--u));
	--contact-marge-bas: max(var(--space-xl), var(--citation-bas)); /* panneau → bandeau store : 170 px à 1920 */
	--contact-ecart: max(2rem, calc(64 * var(--u)));
	--lh-phrase: 1.55;                               /* phrase à trous : place pour les soulignés */
	--fs-contact-message: clamp(1.25rem, calc(32 * var(--u)), 2rem);
	--lh-contact-message: 1.6;
	--contact-champ-min: 8ch;
	--contact-trait-focus: 2px;
	--contact-mention-w: 28rem;
	--contact-tampon-pose-w: max(9rem, calc(260 * var(--u)));
	--contact-tampon-mobile: 6.5rem;
	--t-tampon: 0.9s;
	--courbe-tampon: cubic-bezier(0.2, 0.9, 0.3, 1.2);  /* léger rebond quand le tampon se pose */
	--tampon-depart-echelle: 2.4;
	--tampon-depart-rotation: -40deg;
	--tampon-rebond: 0.94;

	/* ---------- Citation ---------- */
	--citation-w: calc(1294 * var(--u));
	--citation-haut: calc(110 * var(--u));
	--citation-haut-trait: calc(71 * var(--u));      /* citation juste après un trait (À propos) */
	--citation-bas: calc(170 * var(--u));

	/* ---------- Bandeau store ---------- */
	--store-h: calc(492 * var(--u));
	--store-pad-x: calc(93 * var(--u));
	--store-pad-top: calc(52 * var(--u));
	--store-titre-x: calc(90 * var(--u));
	--store-gap-trait: calc(62 * var(--u));
	--store-gap-liste: calc(34 * var(--u));
	--store-trait-h: calc(263 * var(--u));
	--store-tampon-w: calc(295 * var(--u));
	--store-tampon-droite: calc(72 * var(--u));
	--store-pad-bas: calc(52 * var(--u));
	--store-titre-decalage: calc(-8 * var(--u));     /* titre à x272 (lien à x275) */
	--store-texte-bas: calc(17 * var(--u));          /* titre et liste légèrement sous l'axe du tampon */
	--store-tampon-tablette: 7.5rem;
	--store-tampon-mobile: 8.75rem;
	--store-trait-mobile: 3.75rem;
	--store-trait-survol: 1.12;                      /* le trait vertical s'allonge au survol */
	--store-tampon-survol: 25deg;                    /* le tampon pivote au survol */

	/* ---------- Footer ---------- */
	--footer-haut: calc(238 * var(--u));
	--footer-bas: calc(48 * var(--u));
	--footer-col-w: max(26rem, calc(655 * var(--u)));
	--footer-icone-w: max(2.5rem, calc(53 * var(--u)));
	--footer-swiss-w: max(2.5rem, calc(50 * var(--u)));
	--footer-texte-haut: calc(31 * var(--u));
	--footer-icone-haut: 0px;
	--footer-rangee: calc(50 * var(--u));
}

/* Tablette : marges et espacements ajustés (la maquette n'existe qu'en 1920). */
@media (max-width: 1023.98px) {
	:root {
		--page-margin: 2.5rem;
		--gutter: 1rem;
		--header-inset: var(--page-margin);
	}
}

/* Mobile */
@media (max-width: 767.98px) {
	:root {
		--page-margin: 1rem;
		--header-pad-top: var(--space-s);
		--header-pad-bas: var(--space-s);
		--header-compact-pad: var(--space-xs);
	}
}