/*
  Design tokens - the ONLY place a raw value is allowed to exist.

  Custom properties only: no selector beyond :root, no layout, no component
  rule. Every value used anywhere else in this app is a reference to a name
  declared here. A value that has no name here does not get inlined at the call
  site: it gets a name here first.

  Single dark theme, no light/dark switch in this feature (see spec.md,
  "Assumptions"). Contrast ratios of the pairs actually used are recorded in
  specs/001-onglet-reseaux/validation-log.md (SC-006).
*/

:root {
  /* ---------------------------------------------------------------------
     Colour - surfaces
     Ordered from the page backdrop upwards. Each step is a distinct plane,
     not a shade of the previous one, so a card never disappears into the
     background it sits on.
     --------------------------------------------------------------------- */
  --color-bg: #0d0d10;
  --color-surface: #16161b;
  --color-surface-raised: #1e1e25;
  --color-border: #2e2e38;
  --color-border-strong: #464657;

  /* Light plate behind the brand mark used as the avatar fallback (FR-005):
     the mark is drawn in #141414 on #FCF9F1 and needs that plate to stay
     legible. */
  --color-plate: #fcf9f1;

  /* ---------------------------------------------------------------------
     Colour - text
     --------------------------------------------------------------------- */
  --color-text: #f4f4f7;
  --color-text-muted: #b9b9c6;
  --color-text-on-plate: #141414;
  --color-text-on-accent: #14101f;

  /* ---------------------------------------------------------------------
     Colour - accent and state
     Accent is a lightened Twitch purple: the brand association survives, the
     contrast does not. --color-accent-deep is for fills behind light text,
     --color-accent for text and icons on dark surfaces. Never swap the two.
     --------------------------------------------------------------------- */
  --color-accent: #c0a2ff;
  --color-accent-deep: #6441a5;
  /* Le cadre de mise au point prend la couleur de l'accent (012, A7, FR-060).
     Le jaune qu'il portait était une SIXIÈME couleur sur une page qui en a déjà
     cinq rien que pour les raretés. Contrepartie assumée : le cadre se confond
     davantage avec ce qui porte déjà l'accent. */
  --color-focus: var(--color-accent);

  /* ---------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------- */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
    sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  /* Fluid: the brand name is the only type that should grow with the viewport. */
  --text-display: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);

  --leading-tight: 1.2;
  --leading-normal: 1.55;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Smaller than --text-xs, for the labels and counts beside a bar half the
     height of a line of text. */
  --text-2xs: 0.6875rem;

  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* ---------------------------------------------------------------------
     Spacing - a 4px-based scale, referenced by name everywhere
     --------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---------------------------------------------------------------------
     Radii, borders, shadows
     --------------------------------------------------------------------- */
  /* A corner for things drawn at about a rem: --radius-sm on a 20px flag reads
     as a lozenge rather than a rectangle. */
  --radius-xs: 0.1875rem;
  --radius-sm: 0.375rem;
  /* Entre les deux : l'arrondi d'une petite carte. Celui des grandes cartes
     (--radius-card, 1.25rem) sur une fiche de 10,5 rem la rend bombée. */
  --radius-md: 0.625rem;
  --radius-full: 9999px;

  --border-width: 1px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 6px 20px rgb(0 0 0 / 0.45);

  /* ---------------------------------------------------------------------
     Motion - every transition is wrapped in a reduced-motion guard
     --------------------------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---------------------------------------------------------------------
     Layout
     The rail bounds come straight from FR-025 of 001, and feature 002 leaves
     them alone on purpose (FR-035): the card gets denser inside that width
     rather than taking width from the tab surface.

     The "min-height" tokens are the whole mechanism behind the no-jump rules.
     Feature 002 split the card's into two, and feature 003 narrowed what each
     covers: one for the loaded state, which fills it, one for the unavailable
     state, which would otherwise collapse. Feature 005 removed the season
     states that sat between them.
     --------------------------------------------------------------------- */
  --rail-min: 300px;
  --rail-max: 340px;
  --page-max: 84rem;
  --page-gutter: var(--space-4);
  --page-gutter-wide: var(--space-6);

  --avatar-size: 5.5rem;
  --avatar-size-compact: 2.75rem;

  /* The loaded card had a reserved height from 001 to 005, and no longer has
     one. Its history is worth keeping, because the same mistake was made three
     times in three different directions.

     001 set it below the real content, so the card leaned on nothing. 002 set
     31rem against a 31.97rem card, which worked until FR-018a tightened the
     gaps to 30.47rem and left the token 8px ABOVE the content - inflating the
     card by exactly the hole it existed to remove. 003 found that the four
     season states, 14.97 to 18.32rem, dug twelve rem of void when held to it.

     005 measured the loaded card in every shape it can now take and found
     11.69 to 31.91rem - twenty rem of spread inside one state, because a
     ranking or a measure can be missing. No single number can be right for all
     of them, so there is no number: the loaded card takes its natural height.

     The unavailable state keeps its own, below, for the opposite reason. */

  /* WCAG 2.5.5 target size; every interactive element honours it. */
  --tap-target-min: 2.75rem;

  /* Twitch module thumbnails (004). The box is 16:9 because that is what the
     CDN returns; declaring a different ratio is the quiet way to shift a layout
     (SC-008). The requested pixel size lives on the img element itself and is
     the size actually displayed rather than a round number - asking for more
     spends SC-014's weight budget on pixels nobody sees.

     --thumb-width et --thumb-max-share sont partis le 2026-09-12 (amendement
     A7) : une rediffusion compacte prend une part de sa ligne
     (--thumb-inline-size-compact), une carte prend toute sa largeur, et il n'y
     a donc plus de largeur fixe à borner. */
  --thumb-ratio: 16 / 9;

  --icon-size: 1.5rem;
  --icon-size-lg: 2rem;
  /* La taille d'un glyphe posé dans une ligne de texte, à hauteur de capitale
     plutôt qu'à hauteur de bouton (la pastille d'offre, 012 A4). */
  --icon-size-xs: 0.875rem;

  /* Un décompte posé dans une pastille : présent, mais jamais aussi lu que le
     mot qu'il accompagne (le filtre par type, 012 A4). */
  --tally-opacity: 0.65;

  /* ---------------------------------------------------------------------
     FEATURE 002 - visual identity
     --------------------------------------------------------------------- */

  /* ---------------------------------------------------------------------
     The FaceIT tier scale
     Five hues for ten tiers, exactly as FaceIT colours them. These are not
     chosen colours: they are the ones this site's audience recognises.
     Inventing one would make the badge pretty and wrong.

     Only --palier-10 is confirmed against the real profile (research.md R3);
     the other four come from the public scale.

     Each hue has its text variant. Four are only an alias - deliberately: the
     component always writes --palier-N-text without having to know which of
     the five needed lightening.
     --------------------------------------------------------------------- */
  --palier-1: #eeeeee;
  --palier-2: #1ce400;
  --palier-4: #ffc800;
  --palier-8: #ff6309;
  --palier-10: #fe1f00;

  --palier-1-text: var(--palier-1);
  --palier-2-text: var(--palier-2);
  --palier-4-text: var(--palier-4);
  /* Measured: the real orange falls to 4.44:1 on its own washed card. This
     variant climbs back to 5.8:1. The real hue stays the ring's crown. */
  --palier-8-text: #ff8a4d;
  /* The real red reaches 4.62:1 on the card surface - it passes by 0.12, and
     the slightest wash would drop it under the threshold with nobody noticing.
     This variant reaches 6.4:1. The real hue stays the ring's crown, which is
     not text. */
  --palier-10-text: #ff6a55;

  /* The ring's trough: the share of the tier still to be travelled. */
  --palier-track: #2a2a34;

  /* ---------------------------------------------------------------------
     Les raretés de CS2 (012)
     Relevées dans la réponse de Steam elle-même le 2026-09-13 (le champ
     `color` de chaque étiquette de rareté), et nommées d'après le préfixe du
     nom interne : `Rarity_Ancient_Weapon` et `Rarity_Ancient` - une arme et un
     couteau de même rang - partagent --rarity-ancient. Ce ne sont pas des
     couleurs choisies : ce sont celles que le public de ce site reconnaît.

     Seule --rarity-immortal (la contrebande) n'apparaît pas dans l'inventaire
     de Vengi : elle vient de l'échelle publique du jeu.

     Chaque rareté a sa variante de texte, comme les paliers FaceIT. Le bleu, le
     violet et le magenta du jeu tombent sous 4,5:1 sur la surface des cartes ;
     leur variante est éclaircie, et la mesure réelle est faite par le test de
     contraste du rendu, pas par ce commentaire.
     --------------------------------------------------------------------- */
  --rarity-default: #ded6cc;
  --rarity-common: #b0c3d9;
  --rarity-uncommon: #5e98d9;
  --rarity-rare: #4b69ff;
  --rarity-mythical: #8847ff;
  --rarity-legendary: #d32ce6;
  --rarity-ancient: #eb4b4b;
  --rarity-immortal: #e4ae39;

  --rarity-default-text: var(--rarity-default);
  --rarity-common-text: var(--rarity-common);
  --rarity-uncommon-text: var(--rarity-uncommon);
  --rarity-rare-text: #8ea2ff;
  --rarity-mythical-text: #b594ff;
  --rarity-legendary-text: #e57cf2;
  --rarity-ancient-text: var(--rarity-ancient);
  --rarity-immortal-text: var(--rarity-immortal);

  /* StatTrak et Souvenir, dans les couleurs que Steam leur donne. */
  --quality-stattrak: #cf6a32;
  --quality-stattrak-text: #ffa36b;
  --quality-souvenir: #ffd700;

  /* La règle d'usure (research R10) : cinq bandes du vert au rouge, et les
     seuils du jeu, en pourcentage de la règle - 0,07 ; 0,15 ; 0,38 ; 0,45. */
  --wear-fn: #5ec48a;
  --wear-mw: #9ccc5e;
  --wear-ft: #e8c95a;
  --wear-ww: #e8905a;
  --wear-bs: #e0605a;
  --wear-stop-fn: 7%;
  --wear-stop-mw: 15%;
  --wear-stop-ft: 38%;
  --wear-stop-ww: 45%;

  /* Le trait de la règle et son point, lus d'un coup d'œil sans prendre la
     place d'une ligne de texte ; l'anneau détache le point des bandes. */
  --float-track-height: 0.25rem;
  --float-dot-size: 0.5rem;
  --float-dot-ring: 2px;

  /* La fiche « casier » (direction 1 du 2026-10-05). L'objet est posé sur un
     socle sombre, et sa rareté monte de dessous lui en lueur - la forme du jeu.
     Le propriétaire, sur la direction C : « les couleurs ne ressortent pas,
     c'est trop gros ». Les deux causes étaient là : un lavis à 16 % derrière un
     coin ne se voit pas sur une carte de cette taille, et une carte de 22 rem
     n'en met que quatre par ligne. */
  --fiche-shot-aspect: 4 / 3;
  /* La lueur sous l'objet. 42 % et non 16 % : à cette taille, c'est le seuil
     où la rareté se lit d'un coup d'œil au lieu de se deviner. */
  --skin-glow-mix: 42%;
  /* Le socle, plus sombre que la surface pour que la lueur ait sur quoi monter
     et que l'objet s'en détache. */
  --skin-plinth: #101014;
  /* Le filet de rareté sous l'image : franc, c'est lui qui nomme la couleur
     quand la lueur est pâle (Qualité de base, Industrielle). */
  --skin-rarity-rule: 2px;
  /* Le panier (013) : ce que la barre collée en bas laisse entre elle et le bord,
     la hauteur au-delà de laquelle son panneau défile, la vignette d'une ligne,
     et ce qui reste d'un objet qui n'est plus proposé. */
  --cart-bar-gap: var(--space-4);
  --cart-panel-max: 16rem;
  --cart-thumb-width: 3.5rem;
  --cart-gone-opacity: 0.55;
  /* L'aperçu du message (A3 du 2026-10-07, direction B2) : au-delà, il défile
     dans son cadre plutôt que de chasser la liste et la barre hors de l'écran
     d'un téléphone. Sept lignes - de quoi lire l'en-tête et trois objets. */
  --cart-text-max: 7.5rem;

  /* La bande « Demander » en pied de fiche (A7, FR-054) : un lavis de la rareté
     de l'objet, assez pour qu'elle se lise comme une partie de la carte, pas
     assez pour disputer la lueur du socle. */
  /* Le soulèvement de la fiche au survol (A3 du 2026-10-07) : de quoi se
     détacher de la grille sans que l'image commence à fondre. Mesuré sur une
     rangée de sept, pas choisi sur une carte seule. */
  /* La rangée d'étiquettes sous l'image (A10 du 2026-10-07) : usure à gauche,
     motif à droite. Elle garde cette hauteur même quand elle est vide, pour que
     les filets de rareté s'alignent d'une fiche à l'autre. */
  --fiche-marks-height: 1.1rem;
  --skin-lift: 0.25rem;
  --skin-lift-scale: 1.035;
  --skin-demand-mix: 14%;
  --skin-demand-mix-hover: 24%;
  /* Les pastilles de marché (A7, FR-057), à la taille d'une étiquette. */
  --market-chip-pad-block: 0.1875rem;
  /* Sept fiches par ligne sur un écran large au lieu de quatre. C'est le coeur
     du « c'est trop gros » : la carte porte moins, donc elle peut être plus
     petite, donc on en voit davantage.

     Pas de taille maximale en face : auto-fill crée les colonnes vides qu'une
     recherche à trois résultats laisse derrière elle, donc une fiche ne s'étire
     jamais sur toute la largeur. Une borne haute, elle, laissait 40 % de la
     rangée vide à côté de la colonne unique d'un téléphone. */
  --fiche-min: 10.5rem;

  /* ---------------------------------------------------------------------
     Service brands
     Same rule as the tiers: the real hue paints surfaces and icons, the variant
     paints text. Twitch and Discord needed one - 3.9:1 each, below the 4.5:1
     threshold text requires.
     --------------------------------------------------------------------- */
  --brand-twitch: #9146ff;
  --brand-discord: #5865f2;
  --brand-x: #e7e9ea;
  --brand-csgorep: #00c2ff;
  --brand-faceit: #ff5500;
  --brand-default: var(--color-accent);

  --brand-twitch-text: #b98bff;
  --brand-discord-text: #98a2ff;
  --brand-x-text: var(--brand-x);
  --brand-csgorep-text: var(--brand-csgorep);
  /* Measured: the brand orange falls to 2.93:1 on the washed tier-1 card, the
     lightest of the five. This variant holds 4.8:1 in that worst case and more
     everywhere else. The real orange stays the surfaces'. */
  --brand-faceit-text: #ffab73;
  --brand-default-text: var(--color-accent);

  /* ---------------------------------------------------------------------
     Flags
     Facts about flags, not design decisions - which is precisely why they are
     named here rather than typed into the component: the rule is that no raw
     visual value lives outside this file, and "it is a national colour" is not
     an exemption. Nothing else may use them.

     They are drawn as inline SVG rather than emoji. Measured (R4): the emoji
     flag sequences do not render on Windows, where the font ships no glyph for
     regional-indicator pairs and the browser shows the two letters instead. An
     emoji would therefore have looked right on the CI's Linux and wrong on the
     owner's own machine.
     --------------------------------------------------------------------- */
  --flag-cn-field: #de2910;
  --flag-cn-star: #ffde00;
  --flag-eu-field: #003399;
  --flag-eu-star: #ffcc00;

  /* The drawn width; the height follows from the 3:2 ratio both flags use. */
  --flag-width: 1.25rem;

  /* ---------------------------------------------------------------------
     The regularity block (005, 010)
     A sentence, then the week one line per day (010). It was a heatmap, then
     bars, then one dot per slot under an hour ribbon; the dot and ribbon
     tokens left with them on 2026-09-11.

     The columns are sized by their content, so nothing is left to size here
     but the thread of the frise under each line (the owner's pick of
     2026-09-11): three pixels on an eighteen-hour axis from noon to six in
     the morning, midnight two thirds along it, and the short stroke a start
     alone gets.
     --------------------------------------------------------------------- */
  --schedule-thread-height: 0.1875rem;
  --schedule-thread-track: #2a2a33;
  --schedule-midnight: calc(100% * 2 / 3);
  --schedule-start-mark: 0.375rem;

  /* ---------------------------------------------------------------------
     The detail bubble (009)
     The bubble floats a gap above what it describes. The panel a finger and
     a keyboard opened had its tokens here until FR-002b withdrew it.
     --------------------------------------------------------------------- */
  --bubble-gap: var(--space-2);

  /* Revised 2026-09-11 (FR-002a), on the owner's « ça fait pas du tout quali »
     beside StreamsCharts. The first bubble sat on --color-surface-raised, one
     step above the card it floats over - so close that it needed a strong
     border to be seen at all, and the border is what made it look like a
     system box. This surface is a clear step lighter, the edge a rule rather
     than a line, the shadow deep enough to lift it off the page.

     A fixed width, like StreamsCharts': a box that changes size from one dot
     to the next reads as text wrapping, not as a component. */
  --bubble-surface: #26262f;
  --bubble-width: 16rem;
  --bubble-icon-size: 1.125rem;
  --radius-bubble: 0.625rem;
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.6);
  /* The hairline between two sections of a raised surface, and the tag a
     length is set in (010) - opaque, so its contrast is the one measured. */
  --color-rule: rgb(255 255 255 / 0.08);
  --chip-surface: #34343e;

  /* The bubble's icons, drawn as masks and painted with currentColor or a
     token: one declaration here instead of an SVG repeated in fifty bubbles.
     Drawn for this site - a calendar. */
  --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");

  /* ---------------------------------------------------------------------
     A match result
     Colour never carries the information alone: a letter always doubles it
     (SC-008). These tokens only reinforce it.
     --------------------------------------------------------------------- */
  --result-win: #1ce400;
  --result-win-surface: #0f2a0a;
  --result-loss: #ff6a55;
  --result-loss-surface: #2c100b;

  /* ---------------------------------------------------------------------
     The live block
     The only colour on the page allowed to shout, and the site's only angular
     object (FR-023). The two quiet states use none of it: no halo, no alert
     colour, as FR-019 requires.
     --------------------------------------------------------------------- */
  --live-block-from: #3a1218;
  --live-block-to: #1b0d11;
  --live-emphasis: #ff3b30;
  --live-on-block: #ffdcd8;
  --live-hint: #ff9f96;
  /* The pulse's two bounds. They live here because FR-029 makes no exception
     for a colour hidden inside a keyframe. */
  --live-pulse-from: rgb(255 59 48 / 0.5);
  --live-pulse-to: rgb(255 59 48 / 0);

  /* ---------------------------------------------------------------------
     Geometry
     Radii named by use rather than by size: "a tile's radius" reads back, "the
     medium radius" has to be guessed.

     La géométrie anguleuse du bloc de direct a été retirée le 2026-09-12
     (amendement A1) : --cut-size est parti avec elle, et SC-006 de la 002 se
     lit désormais à l'envers — aucun objet anguleux sur la page rendue.
     --------------------------------------------------------------------- */
  --radius-tile: 1.125rem;
  --radius-card: 1.25rem;
  --radius-chip: var(--radius-full);

  --ring-size: 3.5rem;
  --ring-thickness: 0.3125rem;

  /* One and a half times the icon of 001, as FR-012 requires - and double it
     above 64rem, where the tile takes its row's full height. */
  --icon-size-tile: 3rem;

  /* A tile's lift on hover. Two pixels: enough to be seen, too little to move
     the grid. */
  --lift-hover: 2px;
  --icon-size-tile-wide: 4rem;
  --backdrop-glow: #15121d;

  /* Proportion de teinte de marque dans le lavis d'une tuile (FR-036).
     Assez pour que la couleur informe, assez peu pour que SC-007 tienne sur les
     quatre marques, la plus claire comprise.

     --card-wash-mix est parti le 2026-09-12 avec le lavis de la carte FaceIT :
     un jeton dont plus personne ne lit la valeur est une valeur que la prochaine
     lecture croira encore en usage. */
  --tile-wash-mix: 18%;

  /* ---------------------------------------------------------------------
     Heights
     La hauteur réservée de la carte FaceIT indisponible est partie le
     2026-09-12 (amendement A5) : la carte n'a plus de boîte, donc plus de boîte
     qui puisse paraître vide. Un intitulé et une phrase posés sur le fond du
     rail se lisent comme un état ; onze rem réservés se liraient comme le trou
     que ce lot retire partout ailleurs.
     --------------------------------------------------------------------- */
  /* UNE SEULE HAUTEUR DEPUIS LE 2026-09-12, et elle vaut ce que l'état en
     direct demande : 50,4 px de contenu mesurés, plus une marge pour les
     polices de Linux. Le test
     LiveBadge_WhenLive_FillsItsReservedHeightWithoutOverflowing la tient des
     deux côtés - ni débordement, ni air inutile.

     Son histoire : 7,5rem en 001 (25 % d'un écran de téléphone, refusé par
     FR-026), 3,5rem en bande compacte et 6rem dans le rail, puis 3,5rem
     partout. Ce qui a permis de la diviser par deux n'est pas un réglage :
     l'invitation « Rejoindre le direct » est passée à côté du statut au lieu
     d'être dessous, donc l'état le plus rempli tient sur une ligne. Le
     propriétaire, sur la préprod : « la carte hors ligne un peu grosse pour pas
     grand chose ». */
  --live-block-min-height: 3.5rem;
  --tile-min-height: 8.5rem;
  /* Sur téléphone, depuis que les tuiles sont sur deux colonnes (amendement
     A9) : deux rangées de 8,5rem laissaient le bandeau « À la une » à 857px du
     haut, treize pixels sous un écran de 844 - le test du premier écran
     (SC-001 de la 011) l'a mesuré. Une tuile de 6,5rem porte toujours son
     icône, son nom et sa phrase, et reste bien au-delà de la cible tactile. */
  --tile-min-height-compact: 6.5rem;
  /* A tile's height ceiling. Filling the frame must not be paid for with 400px
     tiles holding a one-line link: that moved the page's void into the tile
     instead of removing it (FR-010, revised on 2026-08-31 after the owner
     re-read the captures). */
  --tile-height: 12rem;

  /* ---------------------------------------------------------------------
     Display typography
     One face, and the refusal of a second is written into FR-024. Outfit
     variable, Latin subset, 31.5KB - the fallback stack is not decorative: it
     is what the visitor reads during the download, and what they will keep
     reading if it never arrives.
     --------------------------------------------------------------------- */
  --font-display: "Outfit", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;

  /* ---------------------------------------------------------------------
     La famille de cartes (011)
     Les cartes cliquables de l'onglet - le bandeau « À la une », un clip, une
     rediffusion, la carte FaceIT - partagent une arête, un plan et une
     profondeur. Ces valeurs sont nommées ici plutôt que réécrites dans quatre
     feuilles : c'est exactement ainsi que l'ancien dépôt avait fini avec
     quatre ombres légèrement différentes.
     --------------------------------------------------------------------- */
  --color-edge: rgb(255 255 255 / 0.07);
  --color-plane: rgb(255 255 255 / 0.055);
  --color-plane-quiet: rgb(255 255 255 / 0.04);
  --color-accent-quiet: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-accent-quiet-strong: color-mix(in srgb, var(--color-accent) 20%, transparent);
  /* Le même lavis, mais OPAQUE : pour ce qui flotte au-dessus d'autre chose.
     Un lavis transparent laisse lire ce qu'il survole au travers, et la bande
     d'une fiche au panier flotte au-dessus de la rangée suivante depuis l'A3. */
  --color-accent-quiet-solid: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  --shadow-card: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 12px 30px rgb(0 0 0 / 0.45);
  --shadow-card-hover: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 16px 36px rgb(0 0 0 / 0.55);

  /* Où une image commence à se fondre dans sa carte (FR-017). Réglé à l'œil
     sur le prototype du 2026-09-11, et le même dans les trois composants. */
  --image-fade-stop: 62%;
  /* La part de largeur que prend la miniature d'une rediffusion en forme
     compacte, sous 40rem. */
  --thumb-inline-size-compact: 42%;
  /* La plus petite largeur d'une carte de rediffusion avant que la rangée
     perde une colonne. Les clips fixent leur nombre de colonnes à chaque
     seuil, parce qu'ils cachent le surplus pour ne jamais finir sur un trou ;
     une rediffusion n'a pas de surplus à cacher — le module en montre trois,
     deux hors ligne —, donc c'est la largeur qui décide, et une carte de
     rediffusion finit à la taille d'une carte de clip. */
  --broadcast-card-min: 14rem;

  /* Le filigrane d'une tuile sociale (amendement A9) : sa taille et son
     opacité. Presque effacé — le propriétaire a écarté le fond teinté, « il y a
     des lumières rouge et autre ? », et ce qui reste doit donner un visage à la
     tuile sans se faire remarquer. */
  --watermark-size: 7rem;
  --watermark-opacity: 0.07;

  /* ---------------------------------------------------------------------
     La plaque de l'onglet Skins (012, amendement A2 du 2026-09-14)
     Choisie sur la maquette « Cadres de l'onglet Skins » (B+) : sur Skins, le
     rail de Réseaux se resserre en une plaque qui ne garde que l'avatar, le nom
     et les réseaux. Le statut vit sur l'avatar : une pastille de présence hors
     ligne, un anneau et une étiquette LIVE en direct.
     --------------------------------------------------------------------- */
  --plate-width: 6.5rem;
  --plate-avatar-size: 3.5rem;
  --presence-size: 0.75rem;
  /* L'anneau qui détache la pastille de l'avatar, et celui du direct. */
  --presence-ring: 3px;
  --text-tag: 0.625rem;
  /* Plus sombre que --live-emphasis : le texte clair de l'étiquette y tient
     5,1:1, là où le rouge vif du point tombe à 3,3:1. */
  --live-tag-surface: #c9251c;
  --plate-live-edge-mix: 40%;
  --plate-live-glow-stop: 40%;

  /* La transition entre Réseaux et Skins : un seul mouvement qui décélère.
     L'ancien contenu s'efface tout de suite, le nouveau apparaît quand la place
     est faite - le propriétaire a écarté un premier essai « kitsch à mort ». */
  --shell-move: 420ms;
  --shell-ease: cubic-bezier(0.2, 0, 0, 1);
  --shell-leave: 140ms;
  --shell-enter: 240ms;
  --shell-enter-delay: 200ms;

  /* La liste des skins qui suit la recherche et les tris (amendement A3) : les
     fiches glissent de leur ancienne place à la nouvelle, une fiche qui arrive
     se fond. Lus par site.js - le seul endroit où une durée sort d'ici. */
  --list-move: 300ms;
  --list-enter: 200ms;
  --list-ease: var(--shell-ease);

  /* La barre de recherche et ses pastilles de tri (amendement A3). */
  --search-glyph-size: 1rem;
  --sort-rank-size: 1.125rem;
  /* La hauteur des contrôles de la barre AU-DESSUS DE 64rem seulement : « c'est
     trop gros » (le propriétaire, 2026-10-05), dit devant un écran de bureau.
     Sous 64rem ils gardent --tap-target-min : c'est là qu'un doigt les vise. */
  --toolbar-control-compact: 2.25rem;
  --chip-active-edge-mix: 35%;

  --z-sticky: 100;
  --z-overlay: 1000;
}