/* ==========================================================================
   CONTROL. — design tokens. Single source of truth: never hardcode these
   values in components. Swap here when official brand guidelines arrive.
   ========================================================================== */

:root {
	/* ---- Brand color (charte graphique officielle, 30 pages, 2026-07-29) ----
	   Primary: Bourgogne. Secondaires: Creme, Matcha, et un troisieme que la
	   charte nomme "Taupe" dans son texte et "Creme & Bois" dans sa grille.

	   COQUILLE, p18: le HEX imprime "#132b19" et le RVB 19/43/25 sous Bourgogne
	   sont un vert fonce. Le nuancier imprime juste au-dessus mesure #4c121e, la
	   ligne RAL 3005 est "Weinrot", et les logos livres par le client sont un
	   aplat #59191f. Donc bordeaux, 4 indices contre 1. On ne sait PAS d'ou vient
	   ce vert: la charte n'imprime aucune valeur foncee a laquelle le rattacher,
	   et sa teinte tombe hors de toute la gamme verte du document. Une note
	   anterieure l'attribuait au "Matcha fonce": c'etait une supposition, pas un
	   fait. Coquille deja presente dans la version du 10 juillet, non corrigee.

	   NUANCES IMPRIMEES, p19 (premiere livraison a en donner). A garder ici comme
	   reference: aucun token n'est cree pour une valeur sans consommateur.
	     Bourgogne     clair e23348   moyen 7e202a   fonce non imprime
	     Vert matcha   clair c4cc87   moyen 799036   fonce non imprime
	     Creme & Bois  clair e2cdaf   moyen c2a180   fonce non imprime
	   Aucune valeur Taupe n'est imprimee nulle part. Les valeurs ci-dessous qui
	   ne figurent pas dans cette grille sont des adaptations ecran, pas la
	   charte: elles doivent tenir un contraste que le papier n'a jamais eu a
	   tenir. Ne pas les "aligner" sans revoir le contraste. */
	--cp-bourgogne: #520e1f;       /* PRIMARY brand color (wine/bordeaux) */
	--cp-bourgogne-deep: #360a15;  /* darker wine — gradients / hover */
	/* Eclairci depuis #a04752, qui ne donnait que 3.11:1 sur le fond ink et
	   echouait donc l'AA pour l'oeil-de-boeuf 12px du partenaire "slice", son
	   unique consommateur. Mesure: 6.67:1, et son L* reste 8.5 au-dessus de
	   --cp-accent-light, donc les deux partenaires se lisent toujours differemment.
	   NE PAS aligner sur la charte ici: p19 donne e23348 (4.25:1) et la bande 3
	   de p18 donne a02b4a (2.60:1), les deux echouent. Un nuancier imprime n'a
	   jamais eu de ratio de contraste a tenir. */
	--cp-bourgogne-rose: #c98a93;  /* light wine tint */

	/* Revision 6: la cliente veut un seul beige, le sien, sur toutes les sections
	   claires. Sa remarque etait juste: on alternait #efe2d8 et l'ivoire, donc deux
	   tons clairs qui se lisaient comme une hesitation plutot que comme un systeme.
	   La note qui interdisait cette valeur ici etait FAUSSE et a ete corrigee dans
	   CLAUDE.md: le corps de texte y donne 12.02, pas 3.78. Le seul token qui
	   echouait est --cp-text-muted, a 4.48, rattrape en le descendant de 0.7 dE. */
	--cp-creme: #e2cdaf;           /* warm light base, valeur charte p19 */
	/* Une seule valeur claire depuis la revision 6. La cliente demandait un beige
	   unique, et garder une seconde surface un cran plus foncee recreait exactement
	   ce qu'elle reprochait: deux clairs qui se suivent et se lisent comme une
	   hesitation. Le token reste pour ses cinq call sites. */
	--cp-creme-deep: #e2cdaf;      /* = --cp-creme */
	/* Les deux seules valeurs alignees sur la charte p19, parce que ce sont les
	   deux seules ou l'alignement ne coute rien.
	   --cp-matcha (nuance moyenne, p19): zero consommateur aujourd'hui, donc
	   zero pixel a regresser. Contrainte a respecter quand il en aura un: 5.18:1
	   sur ink mais seulement 3.06:1 sous --cp-text-light, donc son premier
	   consommateur devra porter du texte SOMBRE.
	   --cp-matcha-light (nuance claire, p19): un seul consommateur, l'accent du
	   partenaire matcha. Le contraste passe de 6.90:1 a 10.92:1. S'il crie trop
	   sur le fond ink, baisser l'opacite de .cp-supp__cat, ne pas reteinter le
	   token: la valeur, elle, est celle de la charte. */
	--cp-matcha: #799036;          /* secondary accent (green) — charte p19 */
	--cp-matcha-light: #c4cc87;    /* secondary green on dark — charte p19 */
	--cp-taupe: #8c7a6b;           /* muted warm neutral */

	--cp-ink: #17120f;             /* warm near-black */
	--cp-ink-soft: #241d18;        /* dark secondary surface */

	/* Le fond des sections soutenues, revision 6. C'est le Bourgogne FONCE de la
	   charte p19, et c'est l'une des deux valeurs que la cliente a nommees
	   elle-meme: "for the dark sections, either #7E202A or the Burgundy colour
	   from the brand guidelines".

	   POURQUOI PAS SON #E23348, ni le #E12D43 qu'elle a ensuite valide. Les deux
	   ont ete construits et regardes. Le rouge clair ne tient pas a cote du beige:
	   deux couleurs chaudes et saturees qui se disputent la page au lieu de se
	   repondre, et l'ensemble perd le calme qui fait tout l'interet du site. Il
	   posait aussi trois problemes mesurables que celui-ci n'a pas:
	   - le blanc y donnait 4.51, un centieme au-dessus du seuil, donc AUCUN second
	     niveau de texte n'etait possible; ici il donne 14.57 et la hierarchie
	     muette du reste du site fonctionne de nouveau;
	   - le moindre voile clair pose dessus, ne serait-ce qu'a 3 pour cent,
	     repassait le texte sous le seuil;
	   - le lettrage chrome du pied de page y devenait sale, parce qu'il porte une
	     ombre cuite dans l'image. Sur un fond profond il redevient du metal, et
	     c'est d'ailleurs le seul endroit ou la charte le montre.

	   RONDE 9, 2026-08-09: la cliente est passee de la nuance #7e202a au
	   Bourgogne primaire de la charte, celui du logo, pour voir "whether it
	   gives the pages more depth and allows the text to stand out better". Les
	   deux effets sont mesurables: le blanc passe de 9.87 a 14.57 et la creme
	   muette de 6.39 a 9.43. Elle veut comparer, donc ce changement se resume a
	   cette seule ligne et se defait de la meme facon.

	   Ce fond ne cree PAS de conflit avec --cp-accent, qui vaut pourtant la meme
	   valeur: a l'interieur de .cp-section--dark et de .cp-footer, --cp-accent
	   est deja redirige vers --cp-accent-light (du blanc translucide). Verifie
	   avant le changement, parce qu'un accent invisible sur son propre fond
	   aurait ete une regression silencieuse. */
	--cp-section-deep: var(--cp-bourgogne);

	/* Le fond papier de la double page Collaborations. Valeur mesuree sur la
	   maquette de la cliente (revision 4), et volontairement plus froide et plus
	   claire que --cp-creme: a cote d'une photo plein cadre, la creme se lit
	   comme un voile pose sur l'image alors que celle-ci se lit comme la page.
	   Seul consommateur aujourd'hui: .cp-supp. */
	--cp-ivory: #f8f7f2;

	/* Accents partenaires, un par collaboration, sur DEUX niveaux.
	   La cliente a donne un hex par partenaire (revision 5). Quatre des cinq
	   echouent en texte sur l'ivoire: 4.08, 3.34, 2.25, et 1.44 pour Ledreux,
	   c'est-a-dire pratiquement invisible. Ce n'est pas une erreur de sa part:
	   ce sont les nuances imprimees p19, et le papier n'a jamais eu de ratio a
	   tenir. D'ou la separation, qui a deja un precedent ici (--supp-accent /
	   --supp-ghost dans l'ancienne version, pour exactement la meme raison):

	   -mark  = le mot-symbole. Grand aplat, decoratif, aria-hidden, donc aucune
	            obligation WCAG. Il porte SON hex tel quel, plancher a 3:1 pour
	            rester visible. Trois des cinq sont litteralement le sien.
	   (sans) = le nom et la citation, qui se lisent. Meme teinte, assombrie
	            jusqu'a 4.5:1 sur le PLUS SOMBRE de nos deux fonds clairs (creme),
	            pour rester valable si la section changeait de fond.

	   LEDREUX EST LE SEUL ECART, et il est double. Son hex #E2CDAF est la Creme
	   de la charte, c'est-a-dire la famille du FOND de la page: un accent ne peut
	   pas etre la couleur du papier. Et assombri, il tombe sur Nespresso (meme
	   famille Creme & Bois): ecart CIELAB 8.8, soit deux pages de la meme couleur.
	   Il prend donc le Taupe, la troisieme secondaire que sa propre page couleur
	   nomme ("Creme, Matcha et Taupe") sans jamais en imprimer la valeur. Ce n'est
	   pas une couleur inventee, c'est un trou de la charte comble.

	   Mesures ivoire / creme, mark puis texte:
	   chiara    4.08/3.45  ->  5.34/4.51
	   yamamasa  3.34/2.82  ->  5.33/4.50
	   jumeaux   9.20/7.78  ->  9.20/7.78   (son hex passe partout, un seul niveau)
	   nespresso 3.02/2.55  ->  5.38/4.54
	   ledreux   3.19/2.69  ->  7.80/6.59
	   Ecart CIELAB minimum: 29.7 sur les mots-symboles, 27.3 sur le texte. */
	--cp-partner-chiara-mark: #e23348;    /* son hex, Bourgogne clair p19 */
	--cp-partner-chiara: #c81c31;
	--cp-partner-yamamasa-mark: #799036;  /* son hex, Vert matcha p19 */
	--cp-partner-yamamasa: #5c6d29;
	--cp-partner-jumeaux: #7e202a;        /* son hex, Bourgogne fonce p19 */
	--cp-partner-nespresso-mark: #b1875d; /* sa teinte Bois, remontee a 3:1 */
	--cp-partner-nespresso: #815f3e;
	/* Ronde 6: la cliente a refuse le gris ("pas dans nos guidelines") et propose
	   #C4CC87 ou du blanc. Mesures sur fond clair: #C4CC87 donne 1.59 sur l'ivoire
	   et 1.10 sur le beige #E2CDAF qu'elle demande par ailleurs, le blanc 1.07 et
	   1.55. Les deux disparaissent. Et #C4CC87 assombri jusqu'a etre visible tombe
	   a 6.6 de Yamamasa: deux verts identiques.
	   Donc on reste sur un taupe, mais le taupe CHAUD de nos tokens plutot que le
	   gris froid, ce qui repond a son objection dans l'esprit. A dire clairement:
	   --cp-taupe n'est pas non plus une valeur de la charte, qui nomme le Taupe
	   sans jamais en imprimer le hex. Le prix du rechauffement est mesure: l'ecart
	   avec Nespresso passe de 29.7 a 20.3 sur le mot-symbole et de 27.3 a 16.2 sur
	   le texte. Au-dessus du seuil, mais plus serre. */
	--cp-partner-ledreux-mark: #8c7a6b;   /* = --cp-taupe, 3.83 sur ivoire */
	--cp-partner-ledreux: #726357;        /* meme teinte, 5.38 / 4.55 */

	/* Semantic aliases — component call-sites stay brand-agnostic */
	--cp-plaster: var(--cp-creme);          /* light base (legacy name) */
	--cp-plaster-deep: var(--cp-creme-deep);
	--cp-accent: var(--cp-bourgogne);       /* primary accent */
	--cp-accent-light: #c46a77;             /* accent on dark surfaces (rosy wine) */

	--cp-text: var(--cp-ink);
	/* Assombri depuis #6f6357. Le ratio doit tenir sur la surface creme la plus
	   FONCEE, pas sur la plus claire: sur --cp-creme il donnait 4.60:1, mais sur
	   --cp-creme-deep seulement 4.06:1, donc il echouait la ou le fond est le
	   plus soutenu (l'oeil-de-boeuf et les termes de la liste de lancement).
	   Mesure maintenant: 5.45:1 sur creme, 4.81:1 sur creme-deep. Tous ses
	   consommateurs sont sur fond clair, les sections sombres utilisent
	   --cp-text-light-muted, donc l'assombrir ne casse rien ailleurs. */
	/* Descendu de 0.7 dE en revision 6, quand le fond clair est passe a #E2CDAF:
	   l'ancienne valeur y donnait 4.48, soit deux centiemes sous le seuil. */
	--cp-text-muted: #62574d;
	--cp-text-light: #f4ece2;
	--cp-text-light-muted: rgba(244, 236, 226, 0.62);

	--cp-border-light: rgba(23, 18, 15, 0.12);
	--cp-border-dark: rgba(244, 236, 226, 0.14);

	/* ---- Type (official brand fonts: Erode serif + Montserrat sans) ---- */
	--cp-font-display: "Erode", Georgia, "Times New Roman", serif;
	--cp-font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

	--cp-fs-hero: clamp(3rem, 9.5vw, 8rem);
	--cp-fs-display: clamp(2.25rem, 5.5vw, 4.5rem);
	--cp-fs-h2: clamp(2rem, 4.2vw, 3.5rem);
	--cp-fs-h3: clamp(1.35rem, 2vw, 1.75rem);
	/* Titre d'une double page Experiences. Entre h3 et h2: il doit porter la
	   double page sans concurrencer le titre de section juste au-dessus. */
	--cp-fs-exp: clamp(1.6rem, 3.2vw, 2.6rem);
	--cp-fs-lead: clamp(1.05rem, 1.5vw, 1.3rem);
	--cp-fs-body: 1rem;
	--cp-fs-small: 0.875rem;
	--cp-fs-eyebrow: 0.75rem;
	--cp-fs-ghost: clamp(6rem, 20vw, 17rem);
	--cp-fs-marquee: clamp(2.25rem, 5.5vw, 4.25rem);
	--cp-fs-mega: clamp(3.25rem, 11.5vw, 10.5rem);
	/* Pas de --cp-fs-supplier: la double page Collaborations dimensionne tout en
	   cqw depuis la largeur de son cadre, donc rien la-dedans ne se regle sur le
	   viewport. */

	/* ---- Space: 8px rhythm ---- */
	/* Minimum comfortable tap target, 44px. Not part of the spacing scale on
	   purpose: it is a floor for hit areas, not a rhythm value, and the two
	   should not be swapped for each other. */
	--cp-tap: 2.75rem;

	--cp-s1: 0.5rem;
	--cp-s2: 1rem;
	--cp-s3: 1.5rem;
	--cp-s4: 2rem;
	--cp-s5: 3rem;
	--cp-s6: 4rem;
	--cp-s7: 6rem;
	--cp-s8: 8rem;
	--cp-section-pad: clamp(4rem, 9vw, 8rem);

	/* ---- Layout ---- */
	--cp-container-max: 82rem;
	--cp-gutter: clamp(1.25rem, 4vw, 3rem);
	--cp-radius: 2px;
	--cp-radius-pill: 999px;
	/* Round 7, client: collaboration photos get rounded corners "to soften the
	   overall design". Scoped to imagery; UI chrome keeps the sharp 2px. */
	--cp-radius-soft: 1.25rem;

	/* Header height is DERIVED from the logo, not chosen by eye, because the
	   charte's clear space rule lands on it.

	   Charte p12, "zone de respiration": the lettering is drawn inside a ring of
	   empty space labelled X/4, X being the width of the mark. Measured off the
	   page at 200dpi, the four bands come out 294 / 294 / 292 / 294 px against an
	   X/4 of 292.75, so the ring is uniform and the rule is FOUR SIDED, not just
	   the two the labels sit under.

	   The header centres the mark and has no vertical padding, so the vertical
	   band is (header height - logo height) / 2. At 2.4rem the mark renders
	   76.22 x 38.39, giving X/4 = 19.05. The old 4.5rem left only 16.8, short on
	   both the top and the bottom; 5rem gives 20.8.

	   Two notes for whoever touches this next. 4.78125rem is the exact minimum
	   and it leaves zero slack, which is inside the noise of an auto width image,
	   so 5rem is deliberate headroom rather than imprecision. And for a mark this
	   close to 2:1 the rule X/4 and the rule "half the logo height" agree to
	   within 1.25px, so the arithmetic holds either way as long as the aspect
	   stays near 2. It is 1.9853 today.

	   Do NOT satisfy this rule by shrinking the logo. It would work
	   arithmetically at 2.116rem, and the client has already rejected a section
	   for having too small a mark. */
	--cp-logo-h: 2.4rem;
	--cp-header-h: 5rem;

	/* ROUND 11 OVERRIDES THE PAIR ABOVE, and the arithmetic is redone for the
	   lockup rather than the bare wordmark. The header now carries the chrome
	   mark with "pilates / social club" hung under it, 2.6rem of mark plus about
	   1.5rem of descriptor, a lockup near 4.1rem tall. X is still the mark's
	   width, 2.6 x 1.986 = 5.16rem, so X/4 is 1.29rem a side and the bar must
	   clear 4.1 + 2 x 1.29 = 6.7rem. 6.75rem is that with the same headroom the
	   old value carried. Phones drop both a step below, where the ring rule
	   holds at 2.1rem of mark. */
	--cp-logo-h: 2.6rem;
	--cp-header-h: 6.75rem;

	/* ROUND 12 OVERRIDES AGAIN: "logo CONTROL di header kurang besar" (Daffa,
	   2026-09-23). Measured on his mockup at 1440: the mark is 85px tall and
	   the descriptor about 15px, against 42 and 11.5 here. The mark now scales
	   with the viewport, 45px at 1024 (where the inline row begins and has to
	   fit six items) up to 68px on wide screens, and the bar is DERIVED from it
	   rather than typed: lockup = mark + two descriptor lines at 0.235 of the
	   mark, minus their overlap, plus X/4 clear space a side where X is the
	   mark's width (1.986 x height). That comes to about 2.42 x the mark. */
	--cp-logo-h: clamp(2.75rem, 4.4vw, 4.25rem);
	--cp-header-h: calc(var(--cp-logo-h) * 2.42);

	/* ---- Collaborations (une double page editoriale par partenaire) ---- */
	/* Il ne reste que ces deux-la. Tout le systeme de ligne d'horizon (sol,
	   reservations de pied, hauteur de scene, taille de marque) appartenait a la
	   scene sombre epinglee sur 500vh, supprimee a la revision 4. La double page
	   se dimensionne en cqw depuis son propre cadre, donc elle n'a besoin
	   d'aucune valeur globale. Ne pas les recreer ici. */
	--cp-supp-hud: 4.5rem;
	--cp-supp-hair: 1px;

	/* Lettrage de marque, utilise comme masque pour pouvoir le teinter a l'accent
	   du partenaire. Le trace est dessine a la main: aucune fonte ne le reproduit,
	   donc c'est bien le fichier de marque et pas du texte. */
	--cp-mark-brush: url("../brand/logo-brush-noir.webp");

	/* ---- Round 11: Corentin's burgundy universe (2026-09-23) ----
	   The header CTA in his mockup is a filled raspberry box, not the site's
	   pill. Screen adaptation, not a charte value: measured, --cp-creme on it
	   is 6.49:1 and white 7.6:1, both past AA. */
	--cp-cta: #a11b47;
	/* The highlighted text treatment: a translucent lighter box behind a line
	   of display type, on every FOND. Light over burgundy composites to a rose,
	   which is what his boxes are. */
	--cp-hl: rgba(255, 255, 255, 0.12);
	/* THE ONE EDITORIAL CARD: partner blocks on both pages, and the seven
	   experiences. LIGHTER than its ground, which is how his mockups build
	   every card (measured at #6b0521 over #36010f on Partenaires, about
	   #6e1430 over #3a0210 on the homepage). The first build used a
	   translucent dark card, rgba(20, 0, 6, 0.42), which read on FOND 5 and
	   vanished on FOND 6, so the pages looked like two designs (Daffa,
	   2026-09-23). Cream on this: 10.7:1. */
	--cp-card-raised: #690a25;
	/* The registration card, measured on his LES PREMIERS mockup: the card
	   itself #3c0101, and its fields and answer pills #fffefb, an ivory a
	   long way from the beige --cp-creme the first build filled them with. */
	--cp-regcard: #3c0101;
	--cp-field-bg: #fffefb;
	--cp-radius-card: 0.9rem;
	/* Countdown digits, the peach from his mockup. Non-text contrast is not the
	   question here, they sit on a near black box. */
	--cp-peach: #f1c8a3;

	/* ---- Motion ---- */
	--cp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* transforms / reveals */
	--cp-ease-wipe: cubic-bezier(0.76, 0, 0.24, 1);  /* clips / wipes */
	--cp-dur-ui: 0.3s;
	--cp-dur-reveal: 0.9s;
	--cp-dur-intro: 1.1s;
	--cp-stagger: 90ms;

	/* ---- Texture ---- */
	--cp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

@media (max-width: 47.9375em) {
	:root {
		--cp-logo-h: 2.5rem;
		--cp-header-h: calc(var(--cp-logo-h) * 2.42);
	}
}