/* GÉNÉRÉ par site/sync.mjs — ne pas éditer : source = src/theme/tokens + fontsource */
/* fraunces-latin-ext-full-normal */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/fraunces-latin-ext-full-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* fraunces-latin-full-normal */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/fraunces-latin-full-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* fraunces-latin-ext-full-italic */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/fraunces-latin-ext-full-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* fraunces-latin-full-italic */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/fraunces-latin-full-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* plus-jakarta-sans-latin-ext-400-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/plus-jakarta-sans-latin-ext-400-normal.woff2) format('woff2'), url(fonts/plus-jakarta-sans-latin-ext-400-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* plus-jakarta-sans-latin-400-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2'), url(fonts/plus-jakarta-sans-latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* plus-jakarta-sans-latin-ext-600-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/plus-jakarta-sans-latin-ext-600-normal.woff2) format('woff2'), url(fonts/plus-jakarta-sans-latin-ext-600-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* plus-jakarta-sans-latin-600-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2'), url(fonts/plus-jakarta-sans-latin-600-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* plus-jakarta-sans-latin-ext-700-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/plus-jakarta-sans-latin-ext-700-normal.woff2) format('woff2'), url(fonts/plus-jakarta-sans-latin-ext-700-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* plus-jakarta-sans-latin-700-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2'), url(fonts/plus-jakarta-sans-latin-700-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* jetbrains-mono-latin-ext-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2'), url(fonts/jetbrains-mono-latin-ext-500-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* jetbrains-mono-latin-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'), url(fonts/jetbrains-mono-latin-500-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Jasmya — Color tokens
 * « La lumière qui baisse » : UNE famille rose → vin → bordeaux → nuit.
 * Plus le niveau monte, plus la carte s'assombrit — l'intensité devient profondeur.
 * JAMAIS de primaires saturées (orange vif, jaune ketchup-moutarde) — ça fait fast-food.
 * JAMAIS de gris neutre ni de noir pur.
 *
 * RÈGLE DE DOSAGE — la sensualité vient de la retenue :
 *   Hors partie : crème rosée + vin (plum) + UN accent cerise ; l'or pour le noble. C'est tout.
 *     Les couleurs de niveau n'y apparaissent qu'en touche (échelle, une carte qui dépasse), jamais en grand aplat.
 *   En partie : la carte porte la couleur, seule, sur le vin. Grape/mint = types de carte, en partie uniquement.
 *   Un écran = au plus UNE grande surface colorée.
 * Deux registres : coque claire (crème) hors partie, prune profond en partie.
 */
:root {
  /* ——— Surfaces claires (hors partie) ——— */
  --cream: #FBE7E1;   /* fond app clair — crème PEAU, plus chaude */
  --sand:  #F4D2CB;   /* fond secondaire, puces */
  --paper: #FFFAF8;   /* cartes surface — jamais blanc froid */
  --backdrop: #EED6CF;/* fond page derrière le device */
  --blush: #F0A9A6;   /* rougeur de peau — halo hors partie, très dilué */

  /* ——— Surfaces sombres (en partie) ——— */
  --plum:   #22061A;  /* fond mode partie — plus profond */
  --plum-2: #380E25;  /* prune surélevé */

  /* ——— Braise (la chaleur, en lumière — jamais en aplat) ——— */
  --ember:      #D93049;  /* cœur de braise : halo derrière la carte */
  --ember-deep: #6A1230;  /* bord du halo, se fond dans le prune */

  /* ——— Encre prune (le texte, jamais du noir pur) ——— */
  --ink:    #3A1028;
  --ink-70: rgba(58,16,40,.66);
  --ink-40: rgba(58,16,40,.38);
  --ink-15: rgba(58,16,40,.13);

  /* ——— Les 6 niveaux — des ÉTATS, pas des températures ——— */
  --n1: #F6CAD0;  /* 1 · Habillés       — rose poudré */
  --n2: #EC8C9B;  /* 2 · Sous-vêtements — rose chair  */
  --n3: #C8203E;  /* 3 · Manuel         — rouge      */
  --n4: #8E1435;  /* 4 · Oral           — vin          */
  --n4-dk: #4A0E22; /* ombre pleine sous un aplat n4 */
  --n5: #561028;  /* 5 · Pénétration    — bordeaux     */
  --n6: #160410;  /* 6 · Finish         — nuit + or    */

  /* Texte sur aplat de niveau : on TAMISE — encre sur 1–2, crème à partir de 3. */
  --on-n1: var(--ink); --on-n2: var(--ink); --on-n3: var(--cream);
  --on-n4: var(--cream); --on-n5: var(--cream); --on-n6: var(--gold);

  /* ——— Or (accent noble : Finish, gagnant, cachet) ——— */
  --gold:    #EFC160;
  --gold-dk: #A97A18;   /* ombre pleine sous un bouton or */

  /* ——— Rouge encre : la SEULE couleur de niveau qui porte du blanc ——— */
  --lv3-ink: #C4223E;
  --lv3-dk:  #8C1629;   /* ombre pleine */

  /* ——— Cartes spéciales (deuxième axe : le TYPE) ——— */
  --grape:    #5B2A73;  /* Question + Modificateur — aubergine, porte du crème */
  --grape-dk: #3C1A4D;
  --mint:     #2E7A68;  /* Récompense — jade sombre, porte du crème */
  --mint-dk:  #1C5244;
  --kraft:    #E3D0C2;  /* Later — papier, sort du jeu */

  /* ——— Ombres physiques (offset plein 6px, jamais flou) ——— */
  --ink-shadow: #1E0715;/* ombre pleine sous un bouton encre */

  /* ═══ Alias sémantiques ═══ */
  --surface-app:       var(--cream);
  --surface-app-dark:  var(--plum);
  --surface-card:      var(--paper);
  --surface-quiet:     var(--sand);

  --text-body:     var(--ink);
  --text-muted:    var(--ink-70);
  --text-faint:    var(--ink-40);
  --text-on-dark:  var(--cream);
  --hairline:      var(--ink-15);

  --accent:            var(--lv3-ink);   /* action primaire, rouge encre */
  --accent-dk:         var(--lv3-dk);
  --accent-on:         #FFFFFF;
  --on-level:          var(--ink);       /* niveaux 1–2 ; voir --on-n3..6 (crème) */
}

/* Jasmya — Typography tokens
 * Fraunces (ressentir) · Plus Jakarta Sans (faire) · JetBrains Mono (mesurer).
 * Fraunces est variable : régler l'axe optique `opsz` À CHAQUE TAILLE
 * (petit texte → opsz bas ~30 ; grand titre → opsz haut ~96..144).
 * Règle de carte : UN SEUL mot en italique par carte.
 * Fraunces porte aussi l'axe SOFT : on le pousse à 100 sur TOUT le display —
 * les empattements s'arrondissent, la lettre devient charnelle sans devenir mièvre.
 * L'italique (le mot-clé) hérite de SOFT 100 ; Fraunces y active déjà ses formes « wonky » — c'est le chuchotement.
 */
:root {
  --f-display: 'Fraunces', 'Times New Roman', serif; /* @kind font */
  --f-body: 'Plus Jakarta Sans', system-ui, sans-serif; /* @kind font */
  --f-mono: 'JetBrains Mono', ui-monospace, monospace; /* @kind font */

  /* Alias familles */
  --f-d: var(--f-display); /* @kind font */
  --f-b: var(--f-body); /* @kind font */
  --f-m: var(--f-mono); /* @kind font */

  /* Échelle display (Fraunces) — associer chaque pas à un opsz */
  --fs-hero:   78px;  /* opsz 96..144 · h1 marketing            */
  --fs-title:  40px;  /* opsz 96      · titre plein écran / fin  */
  --fs-h2:     31px;  /* opsz 60      · en-tête d'écran          */
  --fs-h3:     27px;  /* opsz 48      · hero du dashboard        */
  --fs-card:   23px;  /* opsz 30      · texte de défi sur carte  */
  --fs-num:    52px;  /* opsz 60      · compteur / gros chiffre  */

  /* Échelle body (Plus Jakarta Sans) */
  --fs-lead:   16.5px;
  --fs-base:   15px;
  --fs-sm:     13px;
  --fs-xs:     11.5px;

  /* Échelle mono (JetBrains) — labels, unités, kicker */
  --fs-mono:   9px;
  --fs-mono-sm:8px;

  /* Axes Fraunces (chaleur) */
  --fv-soft: 'SOFT' 100; /* @kind other */

  /* Graisses */
  --fw-reg: 400; /* @kind other */
  --fw-med: 500; /* @kind other */
  --fw-semi: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-black: 900; /* @kind other */

  /* Interlignes (gros titres · carte · paragraphes) */
  --lh-tight: .9; /* @kind other */
  --lh-snug: 1.2; /* @kind other */
  --lh-body: 1.6; /* @kind other */

  /* Interlettrage (display serré · kickers mono) */
  --ls-tight: -.035em; /* @kind other */
  --ls-kicker: .2em; /* @kind other */
}

/* Le mot en italique = le chuchotement. Graisse un cran sous le roman, WONK actif. */
i, em { font-synthesis: none; }

/* Jasmya — Spacing & layout tokens */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 26px;
  --sp-7: 34px;
  --sp-8: 48px;

  /* Gaps courants dans le viewport téléphone */
  --gap-screen: 12px;   /* pile verticale d'un écran */
  --pad-screen: 20px;   /* marge intérieure d'un écran */

  /* Hauteurs de contrôle */
  --h-btn: 52px;
  --h-btn-sm: 44px;     /* = cible tactile minimale */
  --h-nav: 58px;
  --tap-min: 44px;      /* JAMAIS moins */
}

/* Jasmya — Effects: radii, shadows, motion
 * DEUX systèmes d'ombre, jamais mélangés :
 *   1. Ombre PHYSIQUE — offset plein 4px, jamais floue. Fait "bouton
 *      pressable", pas "rectangle logiciel". Pour tout ce qu'on presse.
 *   2. Ombre AMBIANTE — floue, portée douce. Uniquement pour l'objet qui
 *      FLOTTE : la carte à jouer, le device.
 * Coins arrondis CROISSANTS avec l'importance : 10px (puces) → 30px (cartes).
 */
:root {
  /* ——— Rayons croissants ——— */
  --r-chip:   10px;  /* puce mono, petit badge */
  --r-btn:    18px;  /* bouton */
  --r-tile:   22px;  /* tuile dashboard, enseigne */
  --r-panel:  26px;  /* hero, bloc d'avertissement */
  --r-card:   30px;  /* la carte à jouer — le maximum */
  --r-phone:  48px;  /* coque device */
  --r-pill:   99px;  /* pilule / rond total */

  /* ——— Ombres physiques (pleines, offset, JAMAIS floues) ——— */
  --shadow-press:      0 4px 0 0 var(--ink-shadow);   /* bouton encre */
  --shadow-press-red:  0 4px 0 0 var(--lv3-dk);       /* bouton rouge */
  --shadow-press-gold: 0 4px 0 0 var(--gold-dk);      /* bouton or */
  --shadow-press-grape:0 4px 0 0 var(--grape-dk);     /* violet */
  --shadow-press-mint: 0 4px 0 0 var(--mint-dk);      /* menthe */
  --press-travel: 4px;                                /* @kind other */

  /* ——— Ombres ambiantes (floues) — objets qui flottent ——— */
  --shadow-card:  0 24px 44px -18px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.24);
  --shadow-float: 0 22px 44px -18px rgba(58,16,40,.35);   /* pile de cartes claire */
  --shadow-phone: 0 40px 80px -30px rgba(58,16,40,.42), 0 0 0 1.5px rgba(58,16,40,.12);

  /* ——— Bordures ——— */
  --hairline-w: 2px; /* @kind other */
  --border-finish: 2px solid var(--gold); /* @kind other */
  --border-modifier: 3px dashed rgba(255,255,255,.4); /* @kind other */

  /* ——— Mouvement ——— *
   * L'app se joue en silence : l'HAPTIQUE est le canal, pas le son.
   * Le geste signature : toucher le paquet → la carte se retourne (520ms, léger rebond).
   */
  --flip: 520ms; /* @kind other */
  --ease-flip: cubic-bezier(.34,1.4,.64,1); /* @kind other */
  --ease-out: cubic-bezier(.2,.7,.3,1); /* @kind other */
  --dur-tap: 120ms; /* @kind other */

  /* ——— Chaleur : braise, grain, respiration ——— *
   * Intensité basse, volontairement. La chaleur est une LUMIÈRE, pas une couleur :
   * jamais d'aplat rouge-néon, jamais de dégradé fuchsia. On la sent avant de la voir.
   */
  --glow-ember: radial-gradient(58% 42% at 50% 50%, rgba(217,48,73,.30), rgba(106,18,48,.20) 48%, rgba(34,6,26,0) 78%); /* @kind other */
  --glow-blush: radial-gradient(60% 40% at 70% 20%, rgba(240,169,166,.55), rgba(240,169,166,0) 70%); /* @kind other */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .86 0 0 0 0 .8 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); /* @kind other */
  --grain-opacity: .09; /* @kind other */
  --breathe: 5.6s; /* @kind other */
  --ease-breathe: cubic-bezier(.45,0,.55,1); /* @kind other */
}

/* La carte respire : +1,2% puis revient. Le CTA rougeoie à peine. */
@keyframes si-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.012); } }
@keyframes si-ember { 0%,100% { filter: drop-shadow(0 0 0 rgba(239,193,96,0)); } 50% { filter: drop-shadow(0 0 12px rgba(239,193,96,.42)); } }
@keyframes si-glow { 0%,100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  [data-si-breathe] { animation: none !important; }
}