/* pro.min.css — généré par assembler.py : NE PAS ÉDITER, modifier les sources. */
/* ---- prototype/src/styles/fonts.css ---- */
/* Polices auto-hébergées. Aucune requête tierce : le pied de page promet
   qu'aucune donnée n'est envoyée, et une requête vers fonts.gstatic.com ou
   api.fontshare.com transmet l'adresse IP du visiteur (LG München I,
   20.01.2022, sur Google Fonts). Fichiers dans prototype/fonts/.
   Licences : Switzer — ITF Free Font License ; Anton et IBM Plex Mono —
   SIL Open Font License 1.1. Les trois autorisent l'auto-hébergement.
   Les sous-ensembles latin / latin-ext sont ceux servis par Google Fonts ;
   le navigateur ne charge que ceux dont la page a besoin. */

/* — Switzer (interface), fichiers Fontshare, latin — */
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../prototype/fonts/switzer-400.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../../prototype/fonts/switzer-500.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../../prototype/fonts/switzer-600.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../../prototype/fonts/switzer-700.woff2') format('woff2'); }

/* — Anton (display) — */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../prototype/fonts/anton-400-ext.woff2') format('woff2');
  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; }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../prototype/fonts/anton-400.woff2') format('woff2');
  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; }

/* — IBM Plex Mono (zone lisible en machine, légendes) — */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../prototype/fonts/plexmono-400-ext.woff2') format('woff2');
  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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../prototype/fonts/plexmono-400.woff2') format('woff2');
  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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../../prototype/fonts/plexmono-500-ext.woff2') format('woff2');
  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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../../prototype/fonts/plexmono-500.woff2') format('woff2');
  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; }

/* ---- prototype/src/styles/tokens.css ---- */
/* Jetons repris de la charte Junior, sans écart.
   Les dix teintes de volée ne sont PAS ici : elles sont posées par
   src/core/volees.js, qui en est la source unique. */

:root {
  /* substrats — jamais de noir pur, jamais de blanc pur */
  --s0: #0b0b0c;
  --s1: #141416;
  --s2: #1c1c1f;
  --s3: #232327;
  --s4: #2e2e34;

  /* encres */
  --ink: #edede7;
  --ink-2: #a3a39c;
  /* #6c6c67 dans la charte : 3,73:1 sur --s1, sous le seuil AA (4,5:1) pour
     du corps de texte. Porté à #868680 : 5,02 sur --s1, 4,64 sur --s2, même
     gris tiède. Écart à la charte assumé et mesuré — à reporter dans charte.html. */
  --ink-3: #868680;
  /* Le même gris tiède, mais pour l'écran clair du commerçant (fond --ink).
     #6c6c67 y donnait 4,49:1, sous le seuil de 0,01 ; #63635e donne 5,14. */
  --ink-3-clair: #63635e;
  --rule: #26262b;

  /* Une seule couleur d'accent dans l'interface, et elle est empruntée à la
     volée affichée. Aucun accent propre au produit : la couleur appartient au
     membre. Posée par le JS, valeur de départ ici pour éviter un flash. */
  --acc: #a87cff;

  /* Direction « Volée » (30.09.2026) : l'interface s'arrondit. Exception aux
     2 px du studio, validée par Max pour Junior seulement. La licence garde
     ses 6 px : c'est un document, pas un composant. */
  --r: 12px;     /* tout l'interface */
  --r-doc: 6px;  /* la licence seule — comme une vraie carte */

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-ecran: 160ms; /* transition d'écran : un fondu, rien d'autre */

  --ui: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
  --mrz: 'IBM Plex Mono', ui-monospace, monospace;
  --display: 'Anton', var(--ui);

  --gut: clamp(20px, 4.4vw, 72px);
  --tel: 390px; /* largeur de référence de l'écran membre */
}

/* ---- prototype/src/styles/volee.css ---- */
/* LA DIRECTION « VOLÉE » — validée le 30.09.2026.
   Source unique de la DA pour la page enseigne et le prototype. Elle s'ajoute
   APRÈS tokens.css et fonts.css, et ne touche pas à la licence (licence.css),
   qui garde sa propre grammaire de document.

   Le principe : la couleur sort de la licence. Le fond est sombre, et la seule
   lumière de la page vient des trois teintes du spectre de la volée affichée —
   celle du visiteur, tirée à chaque visite. Aucune couleur n'est propre à la
   marque ; elle appartient toujours au membre.

   Deux exceptions aux règles du studio, validées par Max pour Junior seulement :
   les surfaces et les boutons s'arrondissent, et le titre porte un effet
   signature qui anime `background-position` (le reflet de la bande irisée).

   Garde-fou : le champ de lumière vient TOUJOURS de `--s-1/2/3`, posées par le
   script depuis `spectre()`. Un dégradé fixe ferait retomber la page dans le
   registre des sites générés. */

:root {
  --v-bg: #16171c;          /* sombre doux (défaut 13.10, décision Max) : anthracite chaud, plus le quasi-noir */
  --v-fg: #f4f4ef;
  --v-fg2: #c0c0ba;
  --v-fg3: #96968f;
  --v-line: #ffffff1f;
  --v-surf: #1f2027;
  --v-surf2: #272932;
  --v-surf-line: #ffffff17;
  /* Rayons pris dans l'échelle de Material 3 Expressive (12 · 20 · 28 · plein) :
     trois valeurs, pas une par composant.
     https://github.com/androidx/androidx/blob/androidx-main/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/tokens/ShapeTokens.kt */
  --v-rad: 28px;
  --v-rad-s: 20px;
  --v-pill: 999px;
  --v-ease: cubic-bezier(.22, 1, .36, 1);
  --v-gut: clamp(20px, 5vw, 72px);
  --v-max: 1240px;
  /* Valeurs de repli avant que le script ne pose le spectre. */
  --s-1: #3cd6ff;
  --s-2: #a87cff;
  --s-3: #ff7ce0;
}

/* ---------- états de départ du mouvement ----------
   Conditionnés à `.js`, posée par le script : si le script tombe, tout reste
   visible au lieu de disparaître. */
.js [data-reveal] { opacity: 0; }
.js [data-split] { visibility: hidden; animation: titreVisible 0s 2.5s forwards; } /* réapparaît quand même après 2,5 s si le script tarde */
@keyframes titreVisible { to { visibility: visible; } }
/* Le masque de SplitText rogne les accents et les jambages : on agrandit la
   zone visible et on annule l'effet sur la mise en page. */
.ln-mask { padding-top: .18em; margin-top: -.18em; padding-bottom: .12em; margin-bottom: -.12em; }
html.lenis, html.lenis body { height: auto; }
/* WCAG 2.2, critère 2.4.11 : un élément qui reçoit le focus ne doit pas passer
   sous la barre fixe. https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum */
html { scroll-padding-top: 96px; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- le champ de lumière ---------- */
.champ { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.champ--fondu { z-index: 0; }
/* Chaque tache est un disque aux bords fondus. Jusqu'au 12.10 c'était un disque plein
   avec `filter: blur(90px)` : la carte graphique refloutait ces disques de 820 px à
   CHAQUE image pendant qu'ils glissaient au défilement — mesuré : plus de 5 s de tâches
   GPU sur 25 s de défilement de l'accueil, des images à 1,8 s. Le même rendu s'obtient
   avec un dégradé radial qui suit la courbe d'un flou gaussien (sigma 90 px sur un
   rayon de 410 px) : dessiné UNE fois, puis seulement déplacé. La couleur voyage par
   `color` (currentColor), lue par changerSpectre(). Le dégradé reste DANS la boîte :
   une boîte plus grande (essayée à +27 %) multiplie la mémoire graphique des couches
   et fait saccader plus que le flou d'origine.
   Deuxième économie : la boîte fait UN TIERS de la taille visible et `transform:
   scale(3)` l'agrandit. Avec `will-change: transform`, Chrome rastérise la couche à sa
   taille de boîte et laisse la carte graphique l'agrandir : neuf fois moins de pixels
   en mémoire par tache (13 Mo au lieu de 117 Mo pour les neuf taches de l'accueil en
   1440 × 2), et un dégradé agrandi reste un dégradé. Safari rastérise à l'échelle
   finale : même rendu, sans l'économie. Les décalages ajoutent d/3 pour garder le même
   centre visuel ; le mouvement (mouvement.js, champ()) se calcule sur la taille VISIBLE. */
.champ i {
  --d: min(68vw, 900px);
  position: absolute;
  width: calc(var(--d) / 3);
  aspect-ratio: 1;
  opacity: .42;
  transform: scale(3);
  will-change: transform;
}
.champ i::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    currentColor 22%,
    color-mix(in srgb, currentColor 78%, transparent) 42%,
    color-mix(in srgb, currentColor 42%, transparent) 62%,
    color-mix(in srgb, currentColor 12%, transparent) 82%,
    transparent 100%);
}
.champ i:nth-child(1) { color: var(--s-1); left: calc(-18% + var(--d) / 3); top: calc(-14% + var(--d) / 3); }
.champ i:nth-child(2) { color: var(--s-2); right: calc(-20% + var(--d) / 3); top: calc(6% + var(--d) / 3); opacity: .5; }
.champ i:nth-child(3) { color: var(--s-3); left: calc(22% + var(--d) / 3); top: calc(44% + var(--d) / 3); opacity: .34; }
/* Le voile : le champ éclaire, il ne recouvre pas. Le texte reste sur du
   presque-noir, donc lisible quelle que soit la volée. */
.champ::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 38%, #0b0b0c5c 0%, #0b0b0cd0 70%, #0b0b0c 100%);
}

/* ---------- le titre qui emprunte la licence ----------
   La typo de l'année (Anton, capitales) et, sur la ligne marquée `.holo-t`,
   la bande irisée : les trois teintes du spectre, les fines rayures, un reflet
   qui glisse quand on fait défiler (variable `--hx`, posée par le script). */
.titre-carte {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.12;
}
/* Les capitales accentuées d'Anton montent haut (Ô, É, À) : on laisse la place
   dans le masque pour ne pas les rogner, sans re-serrer les lignes entre elles. */
.titre-carte .ln-mask { padding-top: .2em; margin-top: -.06em; }
.holo-t {
  background:
    linear-gradient(104deg, transparent 38%, #ffffff8c 48%, transparent 58%),
    repeating-linear-gradient(104deg, #ffffff00 0 .09em, #ffffff38 .1em, #ffffff00 .13em),
    linear-gradient(96deg, var(--s-1), var(--s-2) 34%, var(--s-3) 66%, var(--s-2) 84%, var(--s-1));
  background-size: 260% 100%, 100% 100%, 180% 100%;
  background-position: calc(var(--hx, 0%) + var(--mx, 0%)) 50%, 0 0, calc((var(--hx, 0%) + var(--mx, 0%)) * .6) 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Les coupes se composent : une `br.m` n'existe qu'en téléphone. */
br.m { display: none; }
@media (max-width: 560px) { br.m { display: inline; } }

/* ---------- boutons ---------- */
/* Un seul bouton plein par écran. Pilule claire, halo de la volée. */
.btn-plein {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--v-pill);
  background: var(--v-fg);
  color: var(--v-bg);
  font: 600 15px/1 var(--ui);
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 40px -10px var(--acc);
  /* Retour d'interaction sous 300 ms (NN/g, « Animation duration »). */
  transition: transform .28s var(--v-ease), box-shadow .28s var(--v-ease);
}
.btn-plein:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -8px var(--acc); }
.btn-plein:active { transform: translateY(0) scale(.97); }
.btn-plein:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 4px; }
.btn-plein .fl { transition: transform .45s var(--v-ease); }
.btn-plein:hover .fl { transform: translateX(4px); }

/* Le lien secondaire : un filet qui se retire au survol, jamais un second bouton. */
.btn-lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--v-fg);
  font: 500 15px/1 var(--ui);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + .8em) / 100% 1px no-repeat;
  transition: background-size .45s var(--v-ease);
}
.btn-lien:hover { background-size: 0 1px; background-position: 100% calc(50% + .8em); }
.btn-lien:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 4px; border-radius: 4px; }

/* ---------- pastille et surface ---------- */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--v-pill);
  background: #ffffff12;
  border: 1px solid #ffffff1a;
  color: var(--v-fg);
  font: 500 14px/1.2 var(--ui);
}
.pastille::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 12px var(--acc);
}
.surface {
  border-radius: var(--v-rad);
  background: var(--v-surf);
  border: 1px solid var(--v-surf-line);
}

/* ---------- la barre : une pilule flottante, commune aux pages ---------- */
.barre {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  z-index: 50;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(calc(100% - 24px), 880px);
  padding: 6px 6px 6px 20px;
  border-radius: var(--v-pill);
  background: #141417c7;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid #ffffff14;
}
.barre__m { font-family: var(--display); font-size: 17px; letter-spacing: .05em; text-decoration: none; color: var(--v-fg); white-space: nowrap; }
.barre__m i { font-style: normal; color: var(--v-fg3); }
.barre__t { color: var(--v-fg3); font-size: 14px; }
.barre__cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--v-pill);
  background: var(--v-fg);
  color: var(--v-bg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .4s var(--v-ease);
}
.barre__cta:hover { transform: scale(1.03); }
.barre__cta:focus-visible, .barre__m:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 3px; border-radius: var(--v-pill); }
@media (max-width: 480px) { .barre__t { display: none; } }

/* ---------- transition entre les pages ----------
   Les pages qui chargent volee.css (enseigne, prototype, licence, pistes) se
   succèdent par un fondu : l'ancienne recule à peine, la nouvelle monte de
   24 px. Navigateurs sans View Transitions : navigation normale, sans perte. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .32s var(--v-ease) both vt-sortie; }
::view-transition-new(root) { animation: .55s var(--v-ease) both vt-entree; }
@keyframes vt-sortie { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(24px); } }

/* Contraste renforcé demandé : la barre perd sa transparence. Safari ne gère pas
   `prefers-reduced-transparency`, d'où une barre déjà assez opaque par défaut.
   https://github.com/mdn/browser-compat-data/blob/main/css/at-rules/media.json */
@media (prefers-contrast: more) {
  .barre { background: #141417; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #ffffff40; }
  .champ { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .btn-plein, .btn-plein .fl, .btn-lien { transition: none; }
}

/* ---------- la navigation commune (posée par ui/nav.js) ---------- */
.barre__nav { display: flex; gap: 4px; margin: 0 auto 0 20px; }
.barre__nav a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  border-radius: var(--v-pill); font-size: 14px; color: var(--v-fg3); white-space: nowrap;
  text-decoration: none; transition: color .25s ease, background-color .25s ease;
}
.barre__nav a:hover { color: var(--v-fg); background: #ffffff10; }
.barre__nav a[aria-current='page'] { color: var(--v-fg); background: #ffffff16; }
.barre__nav a:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 2px; }
/* Burger (menu mobile) */
.barre__burger { display: none; flex: none; width: 38px; height: 38px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; -webkit-tap-highlight-color: transparent; }
.barre__burger span { display: block; width: 22px; height: 2px; background: var(--v-fg); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.barre--open .barre__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.barre--open .barre__burger span:nth-child(2) { opacity: 0; }
.barre--open .barre__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 780px) {
  .barre { gap: 10px; }
  .barre__burger { display: flex; }
  .barre__cta { margin-left: auto; }
  .barre__nav {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0;
    flex-direction: column; gap: 2px; padding: 8px; display: none;
    background: #141417f2; -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid #ffffff14; border-radius: 18px; box-shadow: 0 22px 50px -20px #000d;
  }
  .barre--open .barre__nav { display: flex; }
  .barre__nav a { padding: 13px 14px; font-size: 16px; border-radius: 12px; }
}
@media (max-width: 560px) { .barre__cta-long { display: none; } }

/* ---- app/app.css ---- */
/* L'APPLICATION MEMBRE — Junior.
   Un parcours en écrans pleins, façon application : une question à la fois,
   puis la révélation de la volée et la licence en main. DA « Volée » :
   jetons dans volee.css / tokens.css / licence.css ; la couleur vient de la
   volée choisie (poserSpectre pose --s-1/2/3 et --acc). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100svh;
  background: var(--v-bg);
  color: var(--v-fg);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
svg { display: block; }

/* champ de lumière en fond, teinté par la volée.
   Trois disques fondus peints UNE fois dans la couche fixe du fond (dégradé radial qui
   suit la courbe d'un flou gaussien), au lieu de disques pleins en `filter: blur(80px)`
   que la carte graphique refloutait à chaque image défilée (mesuré le 12.10 sur la
   vitrine : première cause de saccades). La couleur voyage par `color`. */
.champ { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.champ i { position: absolute; width: 60vmax; height: 60vmax; opacity: .5; transition: color 1s var(--v-ease); }
.champ i::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle closest-side, currentColor 22%, color-mix(in srgb, currentColor 78%, transparent) 42%, color-mix(in srgb, currentColor 42%, transparent) 62%, color-mix(in srgb, currentColor 12%, transparent) 82%, transparent 100%); }
.champ i:nth-child(1) { color: var(--s-1); left: -20%; top: -18%; }
.champ i:nth-child(2) { color: var(--s-2); right: -24%; top: 10%; opacity: .4; }
.champ i:nth-child(3) { color: var(--s-3); left: 18%; bottom: -20%; opacity: .3; }

/* la scène : un écran à la fois, centré */
.app { position: relative; z-index: 1; min-height: 100svh; display: grid; }
.etape {
  grid-area: 1 / 1;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
}
.etape[hidden] { display: none; }
.vue { width: 100%; max-width: 460px; margin: 0 auto; }

.kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--v-fg3); }
.titre { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 13vw, 68px); line-height: .92; letter-spacing: .01em; margin-top: 14px; }
.titre .holo-t, .holo-t { background: linear-gradient(96deg, var(--s-1), var(--s-2) 40%, var(--s-3) 72%, var(--s-1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.q { font-size: clamp(27px, 7vw, 36px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; margin-top: 12px; }
.sub { margin-top: 14px; color: var(--v-fg2); font-size: 16px; line-height: 1.55; }
.sub b { color: var(--v-fg); font-weight: 600; }
.note { margin-top: 18px; font-size: 13px; color: var(--v-fg3); }

/* boutons */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; margin-top: 26px; padding: 0 24px;
  border: 0; border-radius: var(--v-pill); cursor: pointer;
  background: var(--v-fg); color: var(--v-bg);
  font: 600 16px/1 var(--ui); text-decoration: none;
  box-shadow: 0 14px 40px -12px var(--acc);
  transition: transform .3s var(--v-ease), box-shadow .3s var(--v-ease);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 20px 50px -10px var(--acc); }
.cta:active { transform: scale(.98); }
.cta .fl { transition: transform .3s var(--v-ease); }
.cta:hover .fl { transform: translateX(4px); }
.cta--ghost { background: transparent; color: var(--v-fg); border: 1px solid var(--v-line); box-shadow: none; margin-top: 12px; }
.cta--ghost:hover { background: #ffffff0f; box-shadow: none; }
/* [hidden] doit l'emporter sur le display des .cta (sinon un bouton masqué reste visible). */
.cta[hidden], .cta--ghost[hidden] { display: none; }
/* Onboarding : tenir dans l'écran sur les téléphones (pas de scroll = effet app). */
@media (max-height: 820px) {
  .etape { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .q { font-size: clamp(22px, 6vw, 29px); margin-top: 8px; }
  .sub { font-size: 14.5px; line-height: 1.5; margin-top: 10px; }
  .cta { margin-top: 16px; min-height: 52px; }
  .cta--ghost { margin-top: 10px; }
  .idcard { margin-top: 12px; }
  .idcard__photo { width: 54px; height: 68px; }
  .idcard__rows { gap: 6px; }
  .photo__zone { width: 134px; height: 134px; }
  .photo { gap: 8px; margin: 8px 0 2px; }
}
.lien { display: inline-block; margin-top: 18px; color: var(--v-fg3); font-size: 14px; text-decoration: none; background: none; border: 0; cursor: pointer; }
.lien:hover { color: var(--v-fg); }

/* la date de naissance */
.dob { display: flex; gap: 10px; margin-top: 26px; }
.dob label { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg3); }
.dob input {
  width: 100%; min-height: 60px; padding: 0 14px; text-align: center;
  border-radius: var(--v-rad-s); border: 1px solid var(--v-line);
  background: #ffffff08; color: var(--v-fg);
  font: 400 26px/1 var(--display); font-variant-numeric: tabular-nums;
  transition: border-color .25s;
}
.dob input:focus { outline: none; border-color: var(--acc); }
.dob label:last-child { flex: 1.5; }
.err { margin-top: 14px; color: #ff8080; font-size: 14px; }

/* champ e-mail + consentement */
.field { display: block; margin-top: 22px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg3); }
.field input {
  width: 100%; min-height: 56px; margin-top: 8px; padding: 0 16px;
  border-radius: var(--v-rad-s); border: 1px solid var(--v-line);
  background: #ffffff08; color: var(--v-fg); font: 400 17px/1.2 var(--ui); text-transform: none; letter-spacing: 0;
}
.field input:focus { outline: none; border-color: var(--acc); }
.consent { display: flex; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--v-fg2); line-height: 1.5; }
.consent input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--acc); }
.consent a { color: var(--v-fg); }

/* la révélation */
.reveal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.reveal__doc { width: min(272px, 62vw); margin: 0 auto 6px; }
.reveal__doc .lic { color: #edede7; }
.flotte { width: 100%; filter: drop-shadow(0 30px 60px #000a) drop-shadow(0 0 60px color-mix(in srgb, var(--acc) 45%, transparent)); }
.reveal .kicker { margin-top: 8px; }
.volee-n { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 15vw, 88px); line-height: .9; letter-spacing: .01em; }
.volee-age { font-size: 15px; color: var(--v-fg3); margin-top: 2px; }
/* Écrans courts (téléphones) : l'étape « reveal » doit tenir sans scroll, le bouton visible d'emblée. */
@media (max-height: 820px) {
  .reveal__doc { width: min(220px, 50vw); margin-bottom: 4px; }
  .volee-n { font-size: clamp(42px, 12vw, 62px); }
  .reveal .sub { font-size: 13px; line-height: 1.45; }
  .etape[data-etape="reveal"] { padding-top: 16px; padding-bottom: 16px; }
}

/* le portefeuille (licence en main) */
.wallet { gap: 0; }
.wallet__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wallet__m { font-family: var(--display); font-size: 16px; letter-spacing: .05em; }
.wallet__m i { font-style: normal; color: var(--v-fg3); }
.wallet__v { font-size: 12.5px; color: var(--v-fg3); font-variant-numeric: tabular-nums; }
.wallet__card { width: min(300px, 74vw); margin: clamp(14px, 4vw, 30px) auto; }
.wallet__card .lic { color: #edede7; }
.wallet__card { cursor: pointer; }
/* Le bouton phare de l'onglet licence : pleine largeur, en tête, avec l'icône QR. */
.wallet__plein { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin: 14px auto 8px; font-size: 16px; }
.wallet__pleinIc { width: 20px; height: 20px; flex: none; }
.wallet__qr { width: 132px; height: 132px; margin: 0 auto; border-radius: 16px; overflow: hidden; }
.wallet__qr svg { width: 100%; height: 100%; }
.wallet__hint { margin: 14px auto 0; max-width: 34ch; text-align: center; font-size: 13px; color: var(--v-fg3); line-height: 1.5; }
/* Liveness : « en direct » + heure à la seconde, en mouvement permanent (une
   capture le fige). Pastille verte qui pulse + heure en chiffres tabulaires. */
.wallet__live { display: flex; align-items: center; gap: 9px; width: fit-content; margin: 2px auto 14px; padding: 7px 13px; border-radius: var(--v-pill); background: #ffffff0a; border: 1px solid var(--v-line); font: 600 11.5px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--v-fg2); }
.wallet__dot { width: 8px; height: 8px; border-radius: 50%; background: #7CFF9E; box-shadow: 0 0 9px #7CFF9E; animation: wLive 1.6s ease-in-out infinite; }
.wallet__live b { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: .08em; color: var(--v-fg); font-variant-numeric: tabular-nums; }
@keyframes wLive { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.62); } }
@media (prefers-reduced-motion: reduce) { .wallet__dot { animation: none; } }
/* wrapper transparent en mobile : le panneau de droite ne change rien tant qu'on n'est pas en 2 colonnes (desktop) */
.licSide { display: contents; }
.wallet__actes { margin-top: 22px; }

/* respect du mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .cta, .cta .fl { transition: none; }
  .champ i { transition: none; }
}

/* la cagnotte — gamification légère : une tirelire de saison qui part de 0 et
   se remplit à chaque passage (honnête : rien d'inventé, elle commence vide). */
.cagnotte { margin: 20px auto 0; max-width: 360px; padding: 16px 18px; border-radius: var(--v-rad-s); background: #ffffff08; border: 1px solid var(--v-line); text-align: left; }
.cagnotte__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cagnotte__tete span { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg3); }
.cagnotte__v { font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--acc); font-variant-numeric: tabular-nums; }
.cagnotte__bar { height: 7px; margin-top: 12px; border-radius: 99px; background: #ffffff14; overflow: hidden; }
.cagnotte__bar i { display: block; height: 100%; width: 4%; border-radius: 99px; background: linear-gradient(90deg, var(--s-1), var(--s-2)); }
.cagnotte__p { margin-top: 12px; font-size: 13px; color: var(--v-fg3); line-height: 1.5; }
.cagnotte__p a { color: var(--v-fg); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--v-fg) 30%, transparent); white-space: nowrap; }
.cagnotte__p a:hover { color: var(--acc); }

/* ======================= L'APP : shell + onglets ======================= */
.shell { grid-area: 1 / 1; height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.shell[hidden] { display: none; }
.tab { flex: 1 1 auto; min-height: 0; display: flex; }
.tab[hidden] { display: none; }
/* overflow-x caché : un bloc trop large ne doit jamais faire défiler l'onglet de côté
   (les rails qui défilent — prochains deals, lieux — le font dans leur propre boîte). */
.tab__scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; width: 100%; max-width: 520px; margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top)) 20px 28px; }
.tab__tete { margin-bottom: 4px; }
.tab__h { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 9vw, 44px); line-height: .95; }
.tab__sous { margin-top: 8px; font-size: 14px; color: var(--v-fg2); }
.tab__ex { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: var(--v-pill); background: #ffffff12; color: var(--v-fg3); font-size: 11px; }

/* barre d'onglets (bas) */
.tabbar { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--v-line); background: color-mix(in srgb, var(--v-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.tabbar__b { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px; border: 0; background: none; cursor: pointer; color: var(--v-fg3); font: 600 11px/1.1 var(--ui); border-radius: 12px; transition: color .2s; }
.tabbar__b svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar__b[aria-current="page"] { color: var(--v-fg); }
.tabbar__b[aria-current="page"] svg { stroke: var(--acc); }
.tabbar__b:active { transform: scale(.94); }

/* onglet licence : l'en-tête du portefeuille */
.shell__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }

/* onglet terrain : Ta ville (pastille NPA + recherche + position, reprise de la vitrine), rubriques, cartes */
.appLieux { display: block; margin-top: 16px; }
.vville__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.vville__ch { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--v-fg3); }
.vville__pub { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--v-fg3); max-width: 54ch; }
.villeNote { margin-top: 12px; padding: 13px 15px; border-radius: var(--v-rad-s); border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--v-surf-line)); background: color-mix(in srgb, var(--acc) 7%, transparent); font-size: 13.5px; color: var(--v-fg2); line-height: 1.5; }
.villeNote b { color: var(--v-fg); font-weight: 600; }
.villeNote[hidden] { display: none; }

.vpill { position: relative; display: inline-block; }
.vpill__b { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 16px; border-radius: var(--v-pill); border: 1px solid var(--v-line); background: #ffffff0a; color: var(--v-fg); font: 600 14.5px/1 var(--ui); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.vpill__b:hover { border-color: var(--v-fg3); background: #ffffff10; }
.vpill__b:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 3px; }
.vpill__b b { font-weight: 700; }
.vpill__k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg3); font-weight: 700; }
.vpill__b i { font-style: normal; color: var(--v-fg3); font-size: 12px; }
.vpill__menu { position: fixed; z-index: 1000; width: max-content; min-width: 440px; max-width: calc(100vw - 24px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; padding: 8px; border-radius: 18px; background: #23242c; border: 1px solid var(--v-surf-line); box-shadow: 0 24px 60px -20px #000c; overscroll-behavior: contain; }
.vpill__menu[hidden] { display: none; }
.vpill__menu button { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 12px; background: none; color: var(--v-fg2); font: 600 14px/1.2 var(--ui); text-align: left; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.vpill__menu button span { font-size: 12px; color: var(--v-fg3); font-weight: 500; }
.vpill__menu button:hover, .vpill__menu button[aria-selected="true"] { background: #ffffff0e; color: var(--v-fg); }
.vpill__grp { grid-column: 1 / -1; padding: 8px 12px 4px; font: 700 10.5px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg3); }
.vpill__cherche { grid-column: 1 / -1; position: relative; padding: 2px 2px 6px; }
.vpill__in { width: 100%; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--v-line); background: #ffffff08; color: var(--v-fg); font: 500 14.5px/1 var(--ui); -webkit-appearance: none; appearance: none; }
.vpill__in::placeholder { color: var(--v-fg3); }
.vpill__in:focus { outline: none; border-color: var(--acc); }
.vpill__sugg { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.vpill__sugg[hidden] { display: none; }
.vpill__sugg button { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: #ffffff06; color: var(--v-fg); font: 600 14px/1.2 var(--ui); text-align: left; cursor: pointer; }
.vpill__sugg button:hover { background: #ffffff10; }
.vpill__sugg button span { font-size: 12px; color: var(--v-fg3); font-weight: 500; }
.vpill__aucune { padding: 8px 12px; font-size: 12.5px; color: var(--v-fg3); }
.vpill__pos { grid-column: 1 / -1; display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin: 0 2px 8px; padding: 11px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--v-fg); font: 700 14px/1 var(--ui); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform .2s var(--v-ease); }
.vpill__pos svg { flex: none; color: var(--acc); }
.vpill__pos:hover, .vpill__pos:focus-visible { background: color-mix(in srgb, var(--acc) 24%, transparent); border-color: var(--acc); }
.vpill__pos:active { transform: scale(.985); }
@media (max-width: 640px) {
  .vpill { display: flex; }
  .vpill__b { width: 100%; justify-content: flex-start; }
  .vpill__b b { margin-right: auto; }
  .vville__ch { width: 100%; }
  .vpill__menu { min-width: 0; grid-template-columns: 1fr 1fr; }
  .vpill__menu button { padding: 11px 10px; }
}
.appRub { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.appRub::-webkit-scrollbar { display: none; }
.appRub button { flex: none; min-height: 40px; padding: 0 15px; border: 0; border-radius: var(--v-pill); background: transparent; color: var(--v-fg3); font: 600 14px/1 var(--ui); cursor: pointer; white-space: nowrap; transition: color .2s, background-color .2s; }
.appRub button[aria-selected="true"] { background: var(--v-fg); color: var(--v-bg); }

.appCartes { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
@media (min-width: 560px) { .appCartes { grid-template-columns: 1fr 1fr; } }
.tcard { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 16px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.tcard__id { min-width: 0; }
.tcard__nom { font-weight: 600; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard__type { font-size: 13px; color: var(--v-fg3); }
.tcard__bas { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.tcard__r { flex: none; padding: 6px 11px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font-weight: 700; font-size: 13.5px; transition: background-color .9s var(--v-ease); }
.tcard__ex { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--v-fg2); }
.tcard__d { flex: none; font-size: 12.5px; color: var(--v-fg3); }

/* onglet cagnotte */
.cag { text-align: center; margin-top: 20px; padding: 30px 20px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.cag__n { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.cag__n b { font-family: var(--display); font-weight: 400; font-size: clamp(60px, 20vw, 90px); line-height: .9; color: var(--acc); font-variant-numeric: tabular-nums; transition: color .9s var(--v-ease); }
.cag__n span { font-size: 14px; color: var(--v-fg3); }
.cag__bar { height: 9px; margin-top: 22px; border-radius: 99px; background: #ffffff14; overflow: hidden; }
.cag__bar i { display: block; height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--s-1), var(--s-2)); transition: width 1s var(--v-ease); }
.cag__leg { margin-top: 12px; font-size: 13px; color: var(--v-fg3); }
.cag__total { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 16px 20px; border-radius: var(--v-rad-s); background: #ffffff08; border: 1px solid var(--v-line); }
.cag__total span { font-size: 13px; color: var(--v-fg3); }
.cag__total b { font-family: var(--display); font-weight: 400; font-size: 22px; }
.cag__p { margin-top: 16px; font-size: 14px; color: var(--v-fg2); line-height: 1.55; }
.cag__p + .cta { margin-top: 18px; }

/* ======================= sceaux (logos) — repris de avantages ======================= */
.ens__logo { position: relative; flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; color: var(--v-bg); overflow: hidden;
  background: linear-gradient(0deg, color-mix(in srgb, #0b0b0c 14%, transparent), transparent 55%), linear-gradient(var(--la, 140deg), var(--e1, var(--s-1)), var(--e2, var(--s-2)));
  box-shadow: inset 0 1px 0 #ffffff5c, inset 0 0 0 1px #ffffff1f; }
.ens__logo::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 70% at 28% 8%, #ffffff66, transparent 58%); opacity: .9; }
.ens__sym { width: 56%; height: 56%; fill: var(--v-bg); position: relative; z-index: 2; }
.ens__lettre { position: relative; z-index: 2; font-family: var(--display); font-weight: 400; color: var(--v-bg); font-size: 29px; line-height: 1; letter-spacing: .02em; }
.ens__lettre--two { font-size: 21px; letter-spacing: .04em; }
.ens__logo--bdg { border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--v-bg) 28%, transparent), inset 0 1px 0 #ffffff5c, inset 0 0 0 1px #ffffff1f; }
.ens__logo[class*="ens__dev-"]::before { content: ''; position: absolute; z-index: 1; background: var(--v-bg); }
.ens__dev-bar::before { left: 50%; bottom: 8px; transform: translateX(-50%); width: 42%; height: 3px; border-radius: 2px; }
.ens__dev-dot::before { top: 9px; right: 9px; width: 5px; height: 5px; border-radius: 50%; }
.ens__dev-slash::before { top: 50%; left: 12%; width: 76%; height: 2.5px; border-radius: 2px; transform: rotate(-20deg); opacity: .8; }

/* ======================= DESKTOP : webapp responsive ======================= */
/* Marque + pied de la nav : cachés sur mobile (barre du bas), montrés en latéral. */
.tabbar__brand, .tabbar__foot { display: none; }

@media (min-width: 900px) {
  .shell { flex-direction: row; height: 100svh; overflow: hidden; }

  /* la barre d'onglets devient une colonne latérale (façon Linear / Revolut) */
  .tabbar {
    order: -1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    width: 258px; height: 100svh; gap: 4px;
    padding: 26px 16px 24px; grid-template-columns: none;
    border-top: 0; border-right: 1px solid var(--v-line);
    background: color-mix(in srgb, #141417 60%, var(--v-bg));
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .tabbar__brand { display: block; padding: 4px 14px 22px; }
  .tabbar__brand .wallet__m { font-size: 18px; }
  .tabbar__b { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 12px 16px; font-size: 15px; border-radius: 13px; }
  .tabbar__b svg { width: 22px; height: 22px; }
  .tabbar__b:hover { background: #ffffff08; color: var(--v-fg); }
  .tabbar__b[aria-current="page"] { background: #ffffff12; }
  .tabbar__foot { display: block; margin-top: auto; padding: 14px; font-size: 12.5px; color: var(--v-fg3); border-top: 1px solid var(--v-line); font-variant-numeric: tabular-nums; }

  /* le contenu respire */
  .tab__scroll { max-width: 900px; padding: 64px 60px 80px; }
  .shell__top { margin-bottom: 22px; }
  .appMode { margin-bottom: 24px; }
  .appLieux { margin-top: 24px; }
  .appRub { margin-top: 22px; }
  .appVue { margin-top: 20px; }
  .appBarre { margin-top: 22px; }
  .appCartes { margin-top: 26px; }
  .tab__h { font-size: clamp(36px, 3.2vw, 52px); }

  /* onglet licence : centré, carte plus grande */
  .tab[data-tab="licence"] .tab__scroll { max-width: 460px; display: flex; flex-direction: column; justify-content: safe center; }
  .wallet__card { width: min(360px, 62vw, 100%); }
  .wallet__qr { width: 150px; height: 150px; }

  /* terrain : grille multi-colonnes + survol */
  .appCartes { grid-template-columns: 1fr 1fr; gap: 14px; }
  .tcard { transition: transform .3s var(--v-ease), border-color .3s; }
  .tcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 40%, var(--v-surf-line)); }

  /* cagnotte : bloc centré */
  .tab[data-tab="cagnotte"] .tab__scroll {
    max-width: 860px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 22px 32px;
    align-content: safe center;
  }
  .tab[data-tab="cagnotte"] .tab__scroll > * { margin: 0; }
  .tab[data-tab="cagnotte"] .tab__tete,
  .tab[data-tab="cagnotte"] #cagVide,
  .tab[data-tab="cagnotte"] #cagHistoT,
  .tab[data-tab="cagnotte"] #cagHisto,
  .tab[data-tab="cagnotte"] .cag__note { grid-column: 1 / -1; }
  .tab[data-tab="cagnotte"] .cag { grid-column: 1; }
  .tab[data-tab="cagnotte"] .cagStats { grid-column: 1; }
  .tab[data-tab="cagnotte"] .paliers { grid-column: 2; grid-row: 2 / span 2; align-self: start; }

  /* champ de lumière plus présent sur grand écran */
  .champ i { width: 68vmax; height: 68vmax; }
}

@media (min-width: 1240px) {
  .appCartes { grid-template-columns: 1fr 1fr 1fr; }
  .tab[data-tab="terrain"] .tab__scroll { max-width: 1120px; }
}

/* licence sur grand écran : deux colonnes — la carte (héros) à gauche, pièce + QR + saison à droite.
   SANS DÉFILEMENT (Max, 12.10 : « sinon ça fait pas app ») : l'écran tient dans la
   hauteur, la carte est bornée par la hauteur disponible, le panneau se compacte. */
@media (min-width: 1140px) {
  .tab[data-tab="licence"] .tab__scroll {
    --carteL: min(360px, calc((100svh - 170px) / 1.54));
    height: 100%; overflow: hidden;
    max-width: none; padding: 24px 40px 20px;
    display: grid; justify-content: center; align-content: center;
    grid-template-columns: var(--carteL) minmax(280px, 380px);
    grid-template-areas: "head head" "card side";
    column-gap: 40px; row-gap: 10px; align-items: center;
  }
  .tab[data-tab="licence"] .shell__top { grid-area: head; margin-bottom: 0; }
  .tab[data-tab="licence"] .wallet__card { grid-area: card; width: var(--carteL); margin: 0; align-self: center; }
  .tab[data-tab="licence"] .licSide { grid-area: side; display: flex; flex-direction: column; gap: 10px; }
  .tab[data-tab="licence"] .piece { margin-top: 0; padding: 10px 12px; }
  .tab[data-tab="licence"] .piece__ph { width: 76px; height: 76px; border-radius: 14px; }
  .tab[data-tab="licence"] .wallet__live { margin: 0; }
  .tab[data-tab="licence"] .wallet__qr { width: 120px; height: 120px; margin: 0; }
  .tab[data-tab="licence"] .wallet__hint { margin: 0; max-width: none; text-align: left; font-size: 12.5px; }
  .tab[data-tab="licence"] .licSide .cta { width: 100%; margin-top: 0; min-height: 50px; }
  .tab[data-tab="licence"] .wallet__gyro { margin: 0; }
  .tab[data-tab="licence"] .saison { margin-top: 0; padding: 12px 14px; }
  .tab[data-tab="licence"] .saison__stats { margin-top: 8px; gap: 8px; }
  .tab[data-tab="licence"] .saison__stats div { padding: 8px 4px; }
  .tab[data-tab="licence"] .saison__stats b { font-size: 20px; }
  .tab[data-tab="licence"] .saison__p { display: none; }
  .tab[data-tab="licence"] .saison__share { margin-top: 8px; padding: 9px; }
}

/* =====================================================================
   CAGNOTTE VIVANTE — boucle de fidélité : utiliser une offre la remplit,
   des paliers se débloquent (habitude + découverte, jamais la dépense).
   ===================================================================== */
/* carte du terrain : cliquable, avec l'appât du gain */
.tcard { position: relative; cursor: pointer; }
.tcard__id { padding-right: 60px; }
.tcard__go { position: absolute; top: 12px; right: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent); padding: 4px 9px; border-radius: var(--v-pill); transition: color .9s var(--v-ease), background-color .3s; }
.tcard:active { transform: scale(.992); }
.tcard:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (hover: hover) { .tcard:hover .tcard__go { background: color-mix(in srgb, var(--acc) 22%, transparent); } }

/* feuille de validation (bottom-sheet mobile · carte centrée desktop) */
.sheet { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheet__fond { position: absolute; inset: 0; background: #0b0b0ccc; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet__pan { position: relative; z-index: 1; width: 100%; max-width: 460px; background: var(--v-surf2); border: 1px solid var(--v-surf-line); border-bottom: 0; border-radius: var(--v-rad) var(--v-rad) 0 0; padding: 26px 22px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -30px 80px -34px #000; }
.sheet__x { position: absolute; top: 15px; right: 15px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--v-line); background: #ffffff0c; color: var(--v-fg); font-size: 14px; cursor: pointer; line-height: 1; }
.sheet__logo { display: flex; justify-content: center; margin-bottom: 12px; }
.sheet__nom { text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 7vw, 32px); letter-spacing: -.01em; line-height: 1; }
.sheet__offre { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.sheet__r { font-weight: 700; font-size: 18px; color: var(--acc); transition: color .9s var(--v-ease); }
.sheet__ex { font-size: 14px; color: var(--v-fg3); }
.sheet__code { text-align: center; margin: 22px 0; padding: 18px; border-radius: var(--v-rad-s); background: #ffffff08; border: 1px dashed var(--v-line); }
.sheet__codeLeg { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg3); }
.sheet__code b { display: block; margin: 9px 0 7px; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 10vw, 42px); letter-spacing: .14em; color: var(--v-fg); font-variant-numeric: tabular-nums; }
.sheet__codeSous { display: block; font-size: 12.5px; color: var(--v-fg3); }
.sheet__go { width: 100%; display: inline-flex; justify-content: center; }
.sheet__ok { text-align: center; padding: 8px 0 2px; }
.sheet__ok[hidden] { display: none; }
.sheet__ok b { display: block; font-family: var(--display); font-weight: 400; font-size: 42px; color: var(--acc); line-height: 1; transition: color .9s var(--v-ease); }
.sheet__ok span { font-size: 13px; color: var(--v-fg3); }
@media (min-width: 700px) { .sheet { align-items: center; } .sheet__pan { border-radius: var(--v-rad); border-bottom: 1px solid var(--v-surf-line); } }

/* paliers de fidélité */
.paliers { margin-top: 16px; display: grid; gap: 10px; }
.palier { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.palier__p { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 15px; color: var(--v-fg3); background: #ffffff0c; border: 1px solid var(--v-line); }
.palier__t { flex: 1; min-width: 0; }
.palier__t b { display: block; font-weight: 600; font-size: 15px; }
.palier__t span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--v-fg3); line-height: 1.4; }
.palier__tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v-bg); background: var(--acc); padding: 4px 9px; border-radius: var(--v-pill); transition: background-color .9s var(--v-ease); }
.palier__n { flex: none; font-size: 12px; color: var(--v-fg3); white-space: nowrap; }
.palier__ok { flex: none; color: var(--acc); font-weight: 700; transition: color .9s var(--v-ease); }
.palier--actif { border-color: color-mix(in srgb, var(--acc) 50%, var(--v-surf-line)); background: color-mix(in srgb, var(--acc) 7%, var(--v-surf)); }
.palier--actif .palier__p { color: var(--v-bg); background: var(--acc); border-color: transparent; }
.palier--avenir { opacity: .6; }

/* ta saison en bref */
.cagStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.cagStats div { text-align: center; padding: 14px 8px; border-radius: var(--v-rad-s); background: #ffffff08; border: 1px solid var(--v-line); }
.cagStats b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--v-fg); font-variant-numeric: tabular-nums; }
.cagStats span { font-size: 12px; color: var(--v-fg3); }

/* cagnotte vide */
.cagVide { margin-top: 16px; text-align: center; padding: 22px; border-radius: var(--v-rad-s); background: #ffffff06; border: 1px dashed var(--v-line); }
.cagVide[hidden] { display: none; }
.cagVide p { font-size: 14px; color: var(--v-fg2); margin-bottom: 4px; }

/* historique des passages */
.cag__th { margin-top: 24px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--v-fg3); }
.cag__th[hidden] { display: none; }
.cagHisto { margin-top: 10px; display: grid; gap: 8px; }
.hrow { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.hrow__n { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow__q { flex: none; font-size: 12px; color: var(--v-fg3); }
.hrow__m { flex: none; font-weight: 700; font-size: 14px; color: var(--acc); font-variant-numeric: tabular-nums; transition: color .9s var(--v-ease); }
.cag__note { margin-top: 18px; font-size: 12.5px; color: var(--v-fg3); line-height: 1.5; }
.cag__note b { color: var(--v-fg2); }

/* =====================================================================
   SECTION EN LIGNE — offres hors magasin (code promo). Cibles nommées,
   SANS logo ni % tant qu'elles n'ont pas signé. Prêt pour le dossier (c.logo).
   ===================================================================== */
.appMode { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-pill); }
.appMode button { border: 0; background: none; color: var(--v-fg3); font: 600 14px/1 var(--ui); padding: 9px 18px; border-radius: var(--v-pill); cursor: pointer; transition: color .2s, background-color .2s; }
.appMode button[aria-selected="true"] { background: var(--v-fg); color: var(--v-bg); }
.appOnline__intro { font-size: 14px; color: var(--v-fg2); line-height: 1.55; margin-bottom: 16px; }
.appOnline__intro b { color: var(--v-fg); }
/* Beaucoup de cibles → on range : une colonne de groupes (par univers), chacun sa
   grille 2 colonnes dès le mobile (sinon un mur de scroll). + filtres en tête. */
.appOnline { display: flex; flex-direction: column; gap: 22px; }
.appOnline__vide { color: var(--v-fg3); font-size: 14px; padding: 10px 2px; }
.ofiltres { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 18px; padding-bottom: 2px; }
.ofiltres::-webkit-scrollbar { display: none; }
.ofiltre { flex: none; padding: 8px 14px; border-radius: var(--v-pill); border: 1px solid var(--v-surf-line); background: var(--v-surf); color: var(--v-fg2); font: 600 13px/1 var(--ui); cursor: pointer; white-space: nowrap; transition: border-color .2s, color .2s, background-color .2s; }
.ofiltre[aria-selected="true"] { background: var(--v-fg); color: var(--v-bg); border-color: var(--v-fg); }
.ofiltre--ch[aria-selected="true"] { background: color-mix(in srgb, var(--acc) 88%, #fff); border-color: transparent; color: var(--v-bg); }
.ogrp__t { display: flex; align-items: center; gap: 9px; font: 600 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg3); margin-bottom: 11px; }
.ogrp__n { font-variant-numeric: tabular-nums; color: var(--v-fg3); background: #ffffff0f; border-radius: 99px; padding: 2px 8px; font-size: 11px; letter-spacing: .02em; }
.ogrp__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
@media (max-width: 600px) { .ogrp__list { grid-template-columns: 1fr 1fr; } }
.ocard { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); min-height: 116px; }
.ocard__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ocard__nom { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: -.01em; }
.ocard__logo { max-height: 26px; max-width: 62%; object-fit: contain; }
.ocard__pays { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--v-bg); background: var(--v-fg3); padding: 2px 6px; border-radius: 99px; }
.ocard__pays[data-pays="CH"] { background: color-mix(in srgb, var(--acc) 88%, #fff); }
.ocard__cat { font-size: 13px; color: var(--v-fg3); }
.ocard__bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.ocard__genre { font-size: 13px; font-weight: 600; color: var(--v-fg); }
.ocard__tag { flex: none; font-size: 11px; color: var(--v-fg3); border: 1px solid var(--v-line); padding: 3px 8px; border-radius: 99px; }
.ocard__tag--ok { color: var(--v-bg); background: var(--acc); border-color: transparent; font-weight: 700; }
.ocard--ok { border-color: color-mix(in srgb, var(--acc) 45%, var(--v-surf-line)); }
.ocard--ch { border-color: color-mix(in srgb, var(--acc) 30%, var(--v-surf-line)); }

/* la feuille : le message anti-auto-crédit */
.sheet__self { margin-top: 14px; font-size: 12.5px; color: var(--v-fg3); line-height: 1.5; text-align: center; }
.sheet__self b { color: var(--v-fg2); }

/* ---------- « Ta saison » : récap sur l'écran licence (la licence prend vie) ---------- */
.saison { margin-top: 18px; padding: 18px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.saison__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.saison__tete > span:first-child { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--v-fg3); }
.saison__palier { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--v-bg); background: var(--acc); padding: 4px 11px; border-radius: var(--v-pill); transition: background-color .9s var(--v-ease); }
.saison__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.saison__stats div { text-align: center; padding: 12px 6px; border-radius: var(--v-rad-s); background: #ffffff08; border: 1px solid var(--v-line); }
.saison__stats b { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--v-fg); font-variant-numeric: tabular-nums; }
.saison__stats span { font-size: 11px; color: var(--v-fg3); }
.saison__p { margin-top: 12px; font-size: 12.5px; color: var(--v-fg3); line-height: 1.5; }

/* ---------- la photo membre : étape onboarding + pièce sur la licence ---------- */
.photo { margin: 10px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.photo__zone { position: relative; width: 160px; height: 160px; border-radius: 26px; border: 1px dashed var(--v-line); background: #ffffff08; display: grid; place-items: center; cursor: pointer; overflow: hidden; transition: border-color .3s; }
.photo__zone:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--v-line)); }
.photo__vide { display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--v-fg3); }
.photo__vide svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.photo__vide b { font-weight: 600; font-size: 14px; color: var(--v-fg2); }
.photo__apercu { width: 100%; height: 100%; object-fit: cover; }
/* Cadre ovale « centre ton visage » : guide de cadrage (vide + aperçu) */
.photo__ovale { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 92px; height: 120px; border: 2px dashed rgba(255,255,255,.3); border-radius: 50%; pointer-events: none; z-index: 2; }
.photo__guide { font-size: 12.5px; color: var(--v-fg3); text-align: center; }
/* Avertissement « nudge » (ambre) : incite à reprendre, ne bloque pas (vs .err rouge) */
.err--nudge { color: #FFC24C; }

.piece { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 14px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.piece__ph { width: 100px; height: 100px; flex: none; border-radius: 18px; overflow: hidden; background: #ffffff0c; border: 1px solid var(--v-line); display: grid; place-items: center; cursor: pointer; }
.piece__ph img { width: 100%; height: 100%; object-fit: cover; }
.piece__vide { font-size: 11px; color: var(--v-fg3); text-align: center; line-height: 1.2; }
.piece__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.piece__id { min-width: 0; }
.piece__id b { display: block; font-weight: 600; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
.piece__id span { font-size: 13px; color: var(--v-fg3); }
.piece__act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.piece__ok { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--v-fg3); border: 1px solid var(--v-line); padding: 4px 9px; border-radius: var(--v-pill); }
.piece.on .piece__ok { color: var(--v-bg); background: var(--acc); border-color: transparent; transition: background-color .9s var(--v-ease); }
.piece.incomplet .piece__ok { color: var(--or, #FFA36A); border-color: color-mix(in srgb, var(--or, #FFA36A) 45%, transparent); }
/* Photo verrouillée (anti-prêt) : plus de swap depuis la licence, petit cadenas. */
.piece.verrou .piece__ph { cursor: default; border-color: color-mix(in srgb, var(--acc) 40%, var(--v-line)); }
.piece.verrou .piece__ph::after { content: "🔒"; position: absolute; bottom: 4px; right: 4px; font-size: 10px; line-height: 1; padding: 3px 4px; border-radius: 7px; background: #0b0b0cd9; }
.piece.verrou .piece__ph { position: relative; }
.piece__eff { flex: none; background: none; border: 0; color: var(--v-fg3); font: 500 12px/1 var(--ui); text-decoration: underline; cursor: pointer; padding: 4px; }

/* L'attribut [hidden] doit l'emporter sur le display des classes .lien/.piece__eff. */
.photo__eff[hidden], .piece__eff[hidden] { display: none; }
/* [hidden] doit l'emporter sur le display:flex du placeholder (sinon « Prendre ma
   photo » reste affiché PAR-DESSUS la photo prise). */
.photo__vide[hidden] { display: none; }
/* L'aperçu passe clairement au-dessus du placeholder quand il est là. */
.photo__apercu { position: relative; z-index: 1; }

/* Bouton d'activation de l'inclinaison (gyroscope iOS : exige un geste utilisateur) */
.wallet__gyro { display: flex; align-items: center; gap: 7px; width: fit-content; margin: 12px auto 2px; padding: 10px 16px; border-radius: 999px; background: #ffffff10; border: 1px solid var(--v-line); color: var(--v-fg2); font: 600 13px/1 var(--ui); cursor: pointer; transition: background-color .2s; -webkit-tap-highlight-color: transparent; }
.wallet__gyro:hover { background: #ffffff18; }
.wallet__gyro[hidden] { display: none; }

/* Blaze : surnom choisi (profil) + affiché sur la carte partagée — jamais au comptoir */
.prof__blaze { width: 100%; background: #0f0f12; color: var(--v-fg); border: 1px solid var(--v-surf-line); border-radius: 12px; padding: 13px 14px; font: 500 16px/1.2 var(--ui); margin: 4px 0 0; outline: none; transition: border-color .15s; }
.prof__blaze:focus { border-color: var(--acc); }
.prof__blaze::placeholder { color: var(--v-fg3); }
.scard__blaze { margin-top: 2.5%; font-weight: 700; letter-spacing: .01em; font-size: clamp(16px, 4.6vw, 24px); color: var(--teinte); }
.scard__blaze[hidden] { display: none; }

/* cartes « En ligne » de l'app : picto de catégorie + relief (cohérent avec /avantages/) */
.ocard { min-height: 150px; }
.ocard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ocard__ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 15%, var(--v-surf2)); border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); }
.ocard__ico svg { width: 21px; height: 21px; fill: none; stroke: var(--acc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .9s var(--v-ease); }
.ocard__id { flex: 1; min-width: 0; }
.ocard__nom { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: -.01em; line-height: 1; }
.ocard__cat { display: block; margin-top: 5px; font-size: 12.5px; color: var(--v-fg3); }
.ocard__genre { font-size: 13px; font-weight: 600; color: var(--acc); transition: color .9s var(--v-ease); }
/* Compact (2 colonnes mobile) : cartes plus courtes, on en voit beaucoup plus d'un coup. */
.ocard { min-height: 106px; padding: 14px; }
.ocard__top { margin-bottom: 9px; }
.ocard__ico { width: 31px; height: 31px; border-radius: 9px; }
.ocard__ico svg { width: 17px; height: 17px; }
.ocard__nom { font-size: 17.5px; }
.ocard__cat { margin-top: 3px; font-size: 12px; }
.ocard__bas { padding-top: 8px; flex-direction: column; align-items: flex-start; gap: 6px; }

/* ---------- Deal du jour dans l'app (onglet terrain) ---------- */
.appDeals { margin-bottom: 18px; }
.appDeals:empty { display: none; }
.adeal__tete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.adeal__live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--v-pill); background: var(--v-surf); border: 1px solid var(--v-surf-line); font: 600 11px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--v-fg); }
.adeal__live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
/* L'onde du point « en direct » : un anneau en transform + opacity (composé par la carte
   graphique), plus un box-shadow repeint soixante fois par seconde. */
.adeal__live i::after, .ficheHeure__live i::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid currentColor; color: var(--acc); opacity: 0; animation: pulseLiveApp 1.8s var(--v-ease) infinite; }
@keyframes pulseLiveApp { 0% { transform: scale(.7); opacity: .75; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.adeal__tete h3 { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: -.01em; }
.adeal { border-radius: var(--v-rad); overflow: hidden; background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.adeal__cover { position: relative; min-height: 120px; padding: 16px 18px; display: flex; align-items: flex-end; color: #0b0b0c; background: linear-gradient(132deg, var(--s-1), var(--s-2) 50%, var(--s-3)); }
.adeal__cover .ens__logo { position: absolute; top: 14px; right: 16px; background: #0b0b0c1f; color: #0b0b0c; box-shadow: inset 0 1px 0 #ffffff50, inset 0 0 0 1px #0b0b0c1a; }
.adeal__cover .ens__logo::after { background: radial-gradient(120% 70% at 28% 8%, #ffffff50, transparent 60%); }
.adeal__shine { position: absolute; inset: 0 auto 0 0; width: 55%; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 18%, #ffffff52 44%, #ffffffad 50%, #ffffff52 56%, transparent 82%); }
.adeal__big { font-family: var(--display); font-weight: 400; font-size: clamp(52px, 16vw, 72px); line-height: .82; letter-spacing: -.02em; color: #0b0b0c; }
.adeal__big i { font-style: normal; font-size: .42em; vertical-align: super; margin-left: 2px; }
.adeal__body { padding: 16px 18px; }
.adeal__nom { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: -.01em; line-height: 1; }
.adeal__ex { margin-top: 8px; font-size: 14px; color: var(--v-fg2); }
.adeal__chrono { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.adeal__chrono em { font-style: normal; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--v-fg3); }
.adeal__chrono b { display: inline-flex; gap: 5px; }
.adeal__chrono b span { font-family: var(--display); font-weight: 400; font-size: 18px; font-variant-numeric: tabular-nums; background: var(--v-surf2); border: 1px solid var(--v-surf-line); border-radius: 8px; padding: 5px 7px 3px; min-width: 34px; text-align: center; position: relative; }
.adeal__chrono b span + span::before { content: ":"; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); color: var(--v-fg3); }
.adeal__flash { display: grid; gap: 10px; margin-top: 10px; }
.aflash { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.aflash__r { flex: none; font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--acc); letter-spacing: -.01em; transition: color .9s var(--v-ease); }
.aflash__id { min-width: 0; }
.aflash__id b { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aflash__id span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--v-fg3); margin-top: 2px; }
.aflash__id span i { width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
/* Deal du jour + flash : cliquables, ouvrent la fiche (comme une carte du terrain). */
.adeal, .aflash { cursor: pointer; transition: transform .3s var(--v-ease), border-color .3s var(--v-ease); }
.adeal__go { position: absolute; bottom: 14px; right: 16px; z-index: 2; font: 700 10.5px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: #0b0b0c; background: #ffffff66; border: 1px solid #0b0b0c1f; padding: 7px 11px; border-radius: var(--v-pill); backdrop-filter: blur(5px); }
.aflash__go { flex: none; margin-left: auto; color: var(--v-fg3); font-size: 18px; line-height: 1; transition: transform .3s var(--v-ease), color .3s; }
.adeal:active, .aflash:active { transform: scale(.985); }
.adeal:focus-visible, .aflash:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
@media (hover: hover) {
  .adeal:hover, .aflash:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--v-surf-line)); }
  .adeal:hover { transform: translateY(-2px); }
  .aflash:hover .aflash__go { color: var(--acc); transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .adeal__live i::after { animation: none; } .adeal, .aflash { transition: none; } }

/* Deal en vedette : la grande carte, avec une flèche pour passer au deal suivant ; les
   autres deals restent en gris à côté. La flèche est positionnée par rapport à la carte
   entière (.adealBox), pas au dégradé : à mi-hauteur, elle tombait sur « Voir » dès que le
   corps était court (fenêtre installée sur ordinateur). Elle vit donc dans le coin
   bas-droite du corps, à toutes les largeurs — dégagée du sceau, de « Voir » et du chrono. */
.adealBox { position: relative; }
.adeal__fl { position: absolute; bottom: 14px; z-index: 4; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #0b0b0c26; background: #ffffffcc; color: #0b0b0c; font-size: 23px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px -8px #0008; transition: transform .2s var(--v-ease), background-color .2s ease; }
.adeal__fl:active { transform: scale(.94); }
.adeal__fl:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 3px; }
.adeal__fl--next { right: 10px; }
.adeal__fl[hidden] { display: none; }
@media (hover: hover) { .adeal__fl:hover { background: #fff; } }

/* Desktop : tête pleine largeur, grande carte à gauche, les autres en gris à droite. */
@media (min-width: 760px) {
  .appDeals { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .adeal__tete { grid-column: 1 / -1; }
  .adealBox { grid-column: 1; }
  .adeal__flash { grid-column: 2; margin-top: 0; align-content: start; }
  .adeal__cover { min-height: 170px; }
}

/* ---------- Fiche détail d'offre (vague 1) ---------- */
/* La fiche ne défile plus en bloc : c'est .fiche__scroll qui défile, pour que le
   ✕/cœur (en haut) et le bouton d'action (en bas) restent épinglés et jamais coupés. */
.fiche { max-height: min(86vh, 780px); display: flex; flex-direction: column; overflow: hidden; }
.fiche__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fiche .sheet__go { flex: none; margin-top: 14px; }
/* Épinglés au-dessus du contenu qui défile : fond quasi opaque pour rester lisibles. */
.fiche .sheet__x, .fiche__fav { background: color-mix(in srgb, var(--v-surf2) 90%, transparent); }
.fiche__fav { position: absolute; top: 15px; right: 56px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #ffffff0c; border: 1px solid var(--v-line); color: var(--v-fg2); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.fiche__fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fiche__fav[aria-pressed="true"] { color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, transparent); border-color: color-mix(in srgb, var(--acc) 42%, var(--v-line)); }
.fiche__fav[aria-pressed="true"] svg { fill: currentColor; }
.fiche__tete { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
.fiche .sheet__logo { margin: 0; }
.fiche__id { text-align: center; min-width: 0; }
.fiche__type { font-size: 13px; color: var(--v-fg3); margin-top: 6px; }
.fiche__desc { text-align: center; color: var(--v-fg2); font-size: 14px; line-height: 1.5; margin: 12px auto 0; max-width: 34ch; }
.fiche__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.fiche__meta .chip { font-size: 12px; color: var(--v-fg2); background: #ffffff0c; border: 1px solid var(--v-line); padding: 5px 11px; border-radius: var(--v-pill); }
/* Signal de volée : preuve sociale par cohorte (couleur de la volée), marquée « exemple » en démo */
.fiche__volee { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; }
.fiche__volee[hidden] { display: none; }
.fiche__coup { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--ui); letter-spacing: .02em; color: var(--v-bg); background: var(--acc); padding: 6px 12px; border-radius: var(--v-pill); }
.fiche__vrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--v-fg2); line-height: 1.3; }
.fiche__vdot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px color-mix(in srgb, var(--acc) 70%, transparent); flex: none; }
.fiche__vex { flex: none; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--v-fg3); border: 1px solid var(--v-line); border-radius: 99px; padding: 2px 7px; }
.fiche__comment { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--v-surf-line); }
.fiche__ctitre { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg3); text-align: center; }
.fiche__comment .sheet__code { margin-top: 12px; margin-bottom: 0; }

/* ---------- Catalogue filtrable (vague 1) ---------- */
.appSearch { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 0 14px; height: 44px; border-radius: var(--v-pill); background: var(--v-surf); border: 1px solid var(--v-surf-line); transition: border-color .2s; }
.appSearch:focus-within { border-color: color-mix(in srgb, var(--acc) 50%, var(--v-surf-line)); }
.appSearch svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--v-fg3); stroke-width: 1.8; stroke-linecap: round; }
.appSearch input { flex: 1; min-width: 0; background: none; border: 0; color: var(--v-fg); font: inherit; font-size: 15px; outline: none; }
.appSearch input::placeholder { color: var(--v-fg3); }
.appSearch input::-webkit-search-cancel-button { -webkit-appearance: none; }
.rubFav { width: 15px; height: 15px; fill: currentColor; display: block; }
.appBarre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.appBarre__n { font-size: 13px; color: var(--v-fg3); font-variant-numeric: tabular-nums; }
.appTri { display: inline-flex; gap: 4px; flex: none; background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-pill); padding: 3px; }
.appTri button { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--v-fg2); background: none; border: 0; padding: 6px 12px; border-radius: var(--v-pill); cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s; }
.appTri button[aria-pressed="true"] { background: var(--acc); color: var(--v-bg); }
.appPlus { display: block; width: 100%; margin-top: 16px; padding: 13px; border-radius: var(--v-pill); background: var(--v-surf); border: 1px solid var(--v-surf-line); color: var(--v-fg); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color .2s, border-color .2s; }
.appPlus:hover { border-color: color-mix(in srgb, var(--acc) 40%, var(--v-surf-line)); }
.appVide { text-align: center; padding: 40px 20px 20px; }
.appVide__t { color: var(--v-fg2); font-size: 15px; margin-bottom: 12px; }
.tcard__fav { position: absolute; top: 8px; left: 8px; z-index: 2; width: 20px; height: 20px; display: none; place-items: center; color: var(--acc); }
.tcard__fav svg { width: 15px; height: 15px; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
.tcard--fav .tcard__fav { display: grid; }
.appRecents { margin-top: 16px; }
.appRecents__t { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--v-fg3); margin-bottom: 8px; }
.appRecents__rail { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.appRecents__rail::-webkit-scrollbar { display: none; }
.rec { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--v-fg2); }
.rec .ens__logo { width: 48px; height: 48px; border-radius: 15px; }
.rec__n { font-size: 11px; line-height: 1.2; text-align: center; width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Profil (vague 2) ---------- */
.prof__id { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.prof__pastille { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--acc); box-shadow: 0 0 20px -4px var(--acc); }
.prof__idT { display: flex; flex-direction: column; min-width: 0; }
.prof__idT b { font-size: 17px; font-weight: 600; }
.prof__idT span { font-size: 13px; color: var(--v-fg3); }
.prof__th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--v-fg3); margin: 26px 0 10px; }
.prof__seg { display: inline-flex; gap: 4px; background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-pill); padding: 4px; }
.prof__seg button { font: inherit; font-size: 13px; font-weight: 600; color: var(--v-fg2); background: none; border: 0; padding: 8px 16px; border-radius: var(--v-pill); cursor: pointer; transition: background-color .2s, color .2s; }
.prof__seg button[aria-pressed="true"] { background: var(--acc); color: var(--v-bg); }
.prof__note { font-size: 12.5px; color: var(--v-fg3); line-height: 1.5; margin-top: 8px; }
.prof__note b { color: var(--v-fg2); }
.prof__switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; margin-top: 2px; }
.prof__switch span { font-size: 14px; color: var(--v-fg); }
.prof__switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.prof__switch i { flex: none; width: 44px; height: 26px; border-radius: 999px; background: #ffffff1a; position: relative; transition: background-color .2s; }
.prof__switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.prof__switch input:checked + i { background: var(--acc); }
.prof__switch input:checked + i::after { transform: translateX(18px); }
.prof__switch input:focus-visible + i { outline: 2px solid var(--acc); outline-offset: 2px; }
.prof__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.prof__btn { width: 100%; padding: 13px; border-radius: var(--v-pill); background: var(--v-surf); border: 1px solid var(--v-surf-line); color: var(--v-fg); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color .2s, color .2s; }
.prof__btn--danger { color: #FF8A8A; border-color: #ff8a8a33; }
.prof__btn--danger:hover { border-color: #ff8a8a77; }
.prof__pied { margin-top: 28px; font-size: 12px; color: var(--v-fg3); text-align: center; }
.prof__pied a { color: var(--v-fg2); }
.parrain { padding: 16px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.parrain__t { font-size: 13.5px; color: var(--v-fg2); line-height: 1.5; margin-bottom: 14px; }
.parrain__t b { color: var(--v-fg); }
.parrain__btn { width: 100%; }
.parrain__ok { display: block; text-align: center; font-size: 12.5px; color: var(--acc); margin-top: 10px; }
.parrain__count { display: block; text-align: center; font-size: 12.5px; color: var(--v-fg3); margin-top: 10px; }
.parrain__count:empty { display: none; }
.saison__share { width: 100%; margin-top: 14px; padding: 12px; border-radius: var(--v-pill); background: color-mix(in srgb, var(--acc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 34%, transparent); color: var(--acc); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color .2s; }
.saison__share:hover { background: color-mix(in srgb, var(--acc) 22%, transparent); }

/* ---------- Plan du quartier (vue carte, vague 2) ---------- */
.appVue { display: inline-flex; gap: 4px; margin-top: 14px; background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-pill); padding: 3px; }
.appVue button { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--v-fg2); background: none; border: 0; padding: 6px 14px; border-radius: var(--v-pill); cursor: pointer; transition: background-color .2s, color .2s; }
.appVue button[aria-pressed="true"] { background: var(--acc); color: var(--v-bg); }
.appPlan { position: relative; margin-top: 16px; aspect-ratio: 1 / 1; border-radius: var(--v-rad); background: radial-gradient(120% 120% at 47% 52%, #17171b, #0e0e10); border: 1px solid var(--v-surf-line); overflow: hidden; }
.appPlan__ici { position: absolute; left: 47%; top: 52%; width: 12px; height: 12px; border-radius: 50%; background: var(--v-fg); box-shadow: 0 0 0 5px color-mix(in srgb, var(--v-fg) 16%, transparent); transform: translate(-50%, -50%); }
.pdot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
.pdot .ens__logo { width: 38px; height: 38px; border-radius: 12px; }
.pdot__r { font-size: 10px; font-weight: 700; color: var(--v-bg); background: var(--acc); padding: 1px 6px; border-radius: 999px; line-height: 1.4; }

/* ---- Vraie carte (Leaflet + fond sombre CARTO/OSM) ---- */
.appPlan--carte { aspect-ratio: auto; height: 460px; background: #0e0e10; }
@media (min-width: 900px) { .appPlan--carte { height: calc(100svh - 230px); min-height: 480px; } }
.appPlan--carte .appPlan__ici { display: none; }
.leaflet-container { background: #0e0e10; font: inherit; }
.leaflet-div-icon { background: transparent; border: 0; }
.pmk { background: none; border: 0; text-align: center; }
.pmk .ens__logo { width: 38px; height: 38px; border-radius: 12px; display: block; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.pmk__r { display: inline-block; margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--v-bg); background: var(--acc); padding: 1px 6px; border-radius: 999px; line-height: 1.4; }
.pmoi span { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--v-fg); box-shadow: 0 0 0 5px color-mix(in srgb, var(--v-fg) 20%, transparent); }
.pclust span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--acc); color: var(--v-bg); font-weight: 800; font-size: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.5); border: 2px solid #0b0b0c; }
.marker-cluster, .marker-cluster div { background: transparent; }
.fiche__gps { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 11px 16px; border-radius: var(--v-pill); border: 1px solid var(--v-surf-line); background: #ffffff08; color: var(--v-fg); font-weight: 600; font-size: 14px; text-decoration: none; transition: border-color .2s, background-color .2s; }
.fiche__gps svg { width: 17px; height: 17px; }
.fiche__gps:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--v-surf-line)); background: #ffffff12; }
.fiche__gps[hidden] { display: none; }

/* ============================================================
   Fiche offre — version « app » : sheet natif (poignée, en-tête à gauche, dense).
   Avant : tout centré + très aéré → effet « page web ». On aligne à gauche comme
   un écran de détail natif, on resserre, et on ajoute la poignée du bas de sheet.
   Le bloc code reste centré : c'est le « ticket » qu'on montre au comptoir.
   ============================================================ */
.sheet__pan.fiche { padding-top: 13px; }
.fiche::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 99px; background: var(--v-fg3); opacity: .5; margin: 0 auto 6px; }
/* « L'heure de la volée » : fiche spéciale, traitement VIOLET signature (halo +
   liseré + accent violet) avec bandeau « réservé à ta volée » et compte à
   rebours. Le code reste parfaitement lisible (aucun balayage par-dessus). */
.sheet__pan.fiche--heure { --acc: #9b7bff; border-color: color-mix(in srgb, #8b5cf6 45%, transparent); box-shadow: 0 -30px 80px -34px #000, 0 0 90px -24px #8b5cf6; }
.fiche--heure .fiche__tete { margin-top: 14px; }
.ficheHeure { margin: 2px 0 4px; padding: 11px 86px 12px 14px; border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, #8b5cf6 24%, var(--v-surf2)), color-mix(in srgb, #6d28d9 20%, var(--v-surf2))); border: 1px solid color-mix(in srgb, #a78bfa 45%, transparent); box-shadow: inset 0 1px 0 #ffffff14; }
.ficheHeure__top { display: flex; align-items: center; gap: 8px; font: 700 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .09em; color: #cbbcff; }
.ficheHeure__live i { position: relative; display: block; width: 7px; height: 7px; border-radius: 50%; background: #b79dff; box-shadow: 0 0 0 4px color-mix(in srgb, #8b5cf6 32%, transparent); }
.ficheHeure__live i::after { color: #b79dff; }
.ficheHeure__sous { margin-top: 7px; font: 600 13px/1.3 var(--ui); color: #efeaff; }
.ficheHeure__sous em { font-style: normal; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.fiche--heure .sheet__code { border-color: color-mix(in srgb, #8b5cf6 50%, transparent); background: color-mix(in srgb, #8b5cf6 10%, #ffffff08); box-shadow: 0 0 44px -22px #8b5cf6; }
.fiche--heure #sheetCode { color: #f1ecff; }
@media (prefers-reduced-motion: reduce) { .ficheHeure__live i::after { animation: none; } }
.fiche .fiche__tete { flex-direction: row; align-items: center; gap: 14px; margin-top: 30px; text-align: left; }
.fiche .fiche__id { text-align: left; flex: 1; }
.fiche .sheet__nom { text-align: left; font-size: clamp(23px, 6.2vw, 29px); }
.fiche .fiche__type { margin-top: 3px; }
.fiche .sheet__offre { justify-content: flex-start; margin-top: 10px; }
.fiche .fiche__desc { text-align: left; margin: 8px 0 0; max-width: none; }
.fiche .fiche__meta { justify-content: flex-start; margin-top: 12px; }
.fiche .fiche__volee { align-items: flex-start; }
.fiche .fiche__gps { margin-top: 12px; }
/* Itinéraire : rangée Plans + Google Maps (option affichée sur iOS). */
.fiche__gpsRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.fiche__gpsRow .fiche__gps { margin-top: 0; }
.fiche .fiche__gpsRow { margin-top: 12px; }
.fiche__gpsRow:not(:has(.fiche__gps:not([hidden]))) { display: none; }
.fiche__gps--alt { font-size: 13px; font-weight: 500; color: var(--v-fg2); padding: 10px 14px; }
.fiche__gps--alt:hover { color: var(--v-fg); }
.fiche .fiche__comment { margin-top: 16px; padding-top: 14px; }
.fiche .fiche__ctitre { text-align: left; }
.fiche .sheet__self { text-align: left; }

/* ---------- Étape « vérif d'âge » : maquette de pièce (tout masqué sauf DOB + photo) ---------- */
.idcard { position: relative; width: min(340px, 90%); margin: 18px auto 0; padding: 13px 15px 15px; border-radius: 18px; background: linear-gradient(160deg, #1b1b20, #111115); border: 1px solid var(--v-surf-line); overflow: hidden; text-align: left; box-shadow: 0 20px 50px -24px #000c; }
.idcard__scan { position: absolute; left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--acc) 34%, transparent), transparent); opacity: 0; pointer-events: none; z-index: 2; }
.idcard--scan .idcard__scan { animation: idscan 1.1s ease-in-out both; }
@keyframes idscan { 0% { opacity: .9; transform: translateY(-46%); } 100% { opacity: 0; transform: translateY(230%); } }
.idcard__top { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; letter-spacing: .14em; color: var(--v-fg3); }
.idcard__flag { font-size: 14px; }
.idcard__body { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.idcard__photo { flex: none; width: 64px; height: 80px; border-radius: 10px; background: #ffffff10; border: 1px solid var(--v-line); display: grid; place-items: center; color: var(--v-fg3); }
.idcard__photo svg { width: 34px; height: 34px; }
.idcard__rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.idcard__row { display: flex; flex-direction: column; gap: 1px; }
.idcard__row > span { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--v-fg3); }
.idcard__row > b { font-size: 14px; font-weight: 600; color: var(--v-fg); }
.idcard__mask { color: #35353c; letter-spacing: 1px; }
.idcard__row--on > b { color: var(--acc); transition: color .9s var(--v-ease); }
.idcard--ok { border-color: color-mix(in srgb, var(--ok, #4CFF9C) 42%, var(--v-surf-line)); }
.idbadge { margin: 12px auto 0; width: fit-content; display: flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; background: color-mix(in srgb, var(--ok, #4CFF9C) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ok, #4CFF9C) 42%, transparent); color: var(--ok, #4CFF9C); font-weight: 600; font-size: 13px; }
.idbadge[hidden] { display: none; }
.leaflet-control-attribution { background: rgba(0,0,0,.55); color: #9a9a95; font-size: 10px; }
.leaflet-control-attribution a { color: #b7b7b0; }
.appCartes[hidden] { display: none; }
.appPlus[hidden] { display: none; }

/* ---- Terrain en rayons : bandeau reco « Maintenant pour toi » + sections ---- */
.appCartes--rayons { display: block; }
.terGrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .terGrid { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (min-width: 900px) { .terGrid { grid-template-columns: 1fr 1fr 1fr; } }
.tsect { margin-top: 26px; }
.tsectH { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; }
.tsectH b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.tsectH span { font-size: 12px; color: var(--v-fg3); }
.tcomps { border: 1px solid var(--v-surf-line); border-radius: var(--v-rad); overflow: hidden; background: var(--v-surf); }
.tcomp { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-top: 1px solid var(--v-surf-line); cursor: pointer; }
.tcomp:first-child { border-top: 0; }
.tcomp:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
@media (hover: hover) { .tcomp:hover { background: #ffffff07; } }
.tcomp .ens__logo { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.tcomp__id { flex: 1; min-width: 0; }
.tcomp__nom { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcomp__nom span { color: var(--v-fg3); font-weight: 400; }
.tcomp__r { flex: none; font-size: 12px; font-weight: 700; color: var(--v-bg); background: var(--acc); padding: 3px 9px; border-radius: var(--v-pill); }
.tcomp__d { flex: none; font-size: 12px; color: var(--v-fg3); width: 46px; text-align: right; }
.tcomp__tag { flex: none; color: var(--v-fg3); display: grid; place-items: center; }
.tcomp__tag svg { width: 15px; height: 15px; }
.treco { position: relative; margin-top: 18px; padding: 16px; border-radius: var(--v-rad); background: var(--v-surf); border: 1.5px solid color-mix(in srgb, var(--acc) 55%, var(--v-surf-line)); cursor: pointer; overflow: hidden; }
.treco::before { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 150% at 100% 0, color-mix(in srgb, var(--acc) 15%, transparent), transparent 62%); pointer-events: none; }
.treco:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.treco__tete { position: relative; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.treco__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--acc); }
.treco__badge svg { width: 14px; height: 14px; }
.treco__ctx { font-size: 12px; color: var(--v-fg3); }
.treco__main { position: relative; display: flex; align-items: center; gap: 13px; margin-top: 12px; }
.treco .ens__logo { width: 52px; height: 52px; border-radius: 15px; flex: none; }
.treco__id { flex: 1; min-width: 0; }
.treco__nom { font-size: 17px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.treco__ex { font-size: 13.5px; color: var(--v-fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.treco__r { flex: none; align-self: flex-start; padding: 6px 11px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font-weight: 700; font-size: 14px; }
.treco__acts { position: relative; display: flex; align-items: center; gap: 13px; margin-top: 14px; }
.treco__go { font: inherit; font-weight: 700; font-size: 14px; color: var(--v-bg); background: var(--v-fg); border: 0; border-radius: var(--v-pill); padding: 10px 20px; cursor: pointer; }
.treco__min { font-size: 12.5px; color: var(--v-fg3); }

/* ---------- Accueil « Aujourd'hui » (accueil vivant) ---------- */
.acc { display: flex; flex-direction: column; gap: 16px; max-width: 460px; margin: 4px auto 0; text-align: left; }
.acc__hello { display: flex; align-items: center; gap: 14px; }
/* « Ta couleur vit » : la pastille s'allume quand tu passes, s'estompe sinon */
.acc__past { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--acc); transition: filter .6s var(--v-ease), box-shadow .6s var(--v-ease); }
.acc[data-couleur="vive"] .acc__past { box-shadow: 0 0 0 4px #ffffff10, 0 0 30px -2px var(--acc); }
.acc[data-couleur="neuve"] .acc__past { box-shadow: 0 0 0 4px #ffffff10; }
.acc[data-couleur="tiede"] .acc__past { filter: saturate(.5) brightness(.9); }
.acc[data-couleur="estompe"] .acc__past { filter: saturate(.12) brightness(.82); }
.acc__h { font-family: var(--display); font-weight: 400; font-size: 25px; line-height: 1.05; color: var(--v-fg); }
.acc__couleur { margin-top: 3px; font: 500 13.5px/1.35 var(--ui); color: var(--v-fg3); }
.acc__lic { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 18px; border: 1px solid var(--v-surf-line); border-radius: var(--v-rad-s); background: #ffffff08; color: var(--v-fg); cursor: pointer; transition: border-color .2s, background-color .2s; }
.acc__lic:hover { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); }
.acc__lic svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--acc); stroke-width: 1.7; }
.acc__lic__k { flex: 1; font: 600 15px/1.2 var(--ui); }
.acc__lic__go { color: var(--v-fg3); font-size: 18px; }
.acc__volee, .acc__mission { padding: 16px 18px; border: 1px solid var(--v-surf-line); border-radius: var(--v-rad-s); background: #ffffff08; }
.accV__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.accV__tete h3 { font: 600 15px/1.2 var(--ui); color: var(--v-fg); }
.accV__demo { flex: none; padding: 2px 8px; border-radius: var(--v-pill); background: #ffffff12; color: var(--v-fg3); font: 600 10.5px/1.4 var(--ui); letter-spacing: .02em; white-space: nowrap; }
.accV__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.accV__stats > div { display: flex; flex-direction: column; gap: 2px; }
.accV__stats b { font-family: var(--display); font-weight: 400; font-size: 23px; color: var(--acc); font-variant-numeric: tabular-nums; }
.accV__stats span { font: 500 12px/1.3 var(--ui); color: var(--v-fg3); }
.accDefi { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--v-surf-line); }
.accDefi__h { font: 700 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .08em; color: var(--v-fg3); }
.accDefi__t { margin-top: 8px; font: 500 13.5px/1.45 var(--ui); color: var(--v-fg2); }
.accDefi__bar { height: 8px; margin-top: 12px; border-radius: 99px; background: #ffffff14; overflow: hidden; }
.accDefi__bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--s-1), var(--acc)); transition: width .6s var(--v-ease); }
.accDefi__n { margin-top: 7px; font: 600 12px/1 var(--ui); color: var(--v-fg3); font-variant-numeric: tabular-nums; }
.accDefi__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.accDefi__ex { flex: none; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--v-fg3); border: 1px solid var(--v-line); border-radius: 99px; padding: 2px 7px; }
.accDefi__t b { color: var(--v-fg); }
.accDefi.done .accDefi__h { color: var(--acc); }
.accDefi.done .accDefi__bar i { background: var(--acc); box-shadow: 0 0 14px color-mix(in srgb, var(--acc) 60%, transparent); }
.acc__mission h3 { font: 600 15px/1.2 var(--ui); color: var(--v-fg); }
.acc__mission p { margin-top: 7px; font: 500 13.5px/1.45 var(--ui); color: var(--v-fg2); }
.acc__mission .cta--ghost { margin-top: 14px; }
/* L'heure de la volée (deal flash minuté) */
.accHeure { padding: 15px 18px; border: 1px solid var(--v-surf-line); border-radius: var(--v-rad-s); background: #ffffff06; }
/* « L'heure de la volée » = la fenêtre spéciale, réservée à la volée. On lui
   donne un traitement signature VIOLET (verre sombre + double aurore + liseré
   + balayage de lumière), volontairement distinct de la couleur de la volée,
   pour que le moment ressorte. Accent local = violet cool → kick, flèche,
   point EN DIRECT et tuiles se recolorent tout seuls. Anim = transform only. */
.accHeure--actif {
  --acc: #9b7bff;
  position: relative; overflow: hidden;
  border-color: color-mix(in srgb, #8b5cf6 58%, transparent);
  background:
    radial-gradient(135% 120% at 0% 0%, color-mix(in srgb, #b79dff 22%, transparent), transparent 52%),
    radial-gradient(130% 125% at 100% 100%, color-mix(in srgb, #6d28d9 30%, transparent), transparent 56%),
    linear-gradient(162deg, #16101f, #110e17);
  box-shadow: 0 0 48px -14px #8b5cf6, 0 12px 30px -20px #000, inset 0 1px 0 #ffffff14;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--v-ease), box-shadow .35s var(--v-ease), border-color .35s var(--v-ease);
}
.accHeure--actif > * { position: relative; z-index: 1; }
.accHeure--actif::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 40%, #ffffff22 49%, transparent 58%);
  transform: translateX(-130%);
  animation: heureSweep 6s var(--v-ease) infinite;
}
@keyframes heureSweep { 0%, 68% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.accHeure--actif:hover { transform: translateY(-2px); box-shadow: 0 0 60px -12px #8b5cf6, 0 16px 34px -20px #000, inset 0 1px 0 #ffffff1c; border-color: color-mix(in srgb, #a78bfa 72%, transparent); }
.accHeure--actif:active { transform: translateY(0); }
.accHeure--actif:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.accHeure--actif .accHeure__chrono b span { border-color: color-mix(in srgb, #8b5cf6 42%, var(--v-surf-line)); background: color-mix(in srgb, #8b5cf6 16%, var(--v-surf2)); color: #efeaff; }
.accHeure__voir { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 var(--ui); letter-spacing: .03em; text-transform: none; color: var(--acc); }
.accHeure__voir i { font-style: normal; transition: transform .2s var(--v-ease); }
.accHeure--actif:hover .accHeure__voir i { transform: translateX(3px); }
.accHeure__kick { display: flex; align-items: center; gap: 8px; font: 700 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .08em; color: var(--v-fg3); }
.accHeure--actif .accHeure__kick { color: var(--acc); }
.accHeure__live i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); animation: pulseLiveApp 1.8s var(--v-ease) infinite; }
.accHeure__h { margin-top: 9px; font: 600 15.5px/1.25 var(--ui); color: var(--v-fg); }
.accHeure__h--muet { color: var(--v-fg2); }
.accHeure__sous { margin-top: 5px; font: 500 13px/1.45 var(--ui); color: var(--v-fg3); }
.accHeure__dans { color: var(--v-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.accHeure__chrono { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.accHeure__chrono em { font-style: normal; font: 600 10.5px/1 var(--ui); text-transform: uppercase; letter-spacing: .07em; color: var(--v-fg3); }
.accHeure__chrono b { display: inline-flex; gap: 5px; }
.accHeure__chrono b span { font-family: var(--display); font-weight: 400; font-size: 17px; font-variant-numeric: tabular-nums; background: var(--v-surf2); border: 1px solid var(--v-surf-line); border-radius: 7px; padding: 4px 7px 2px; min-width: 32px; text-align: center; }
/* Co-présence (contextuel), classement entre volées, carte de chaleur */
.accV__live { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 5px 12px; border-radius: var(--v-pill); background: color-mix(in srgb, var(--acc) 15%, transparent); color: var(--v-fg); font: 600 12.5px/1.2 var(--ui); }
.accV__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); animation: pulseLiveApp 1.8s var(--v-ease) infinite; }
.accV__rang { margin-top: 13px; font: 600 12.5px/1.35 var(--ui); color: var(--v-fg2); }
.accV__carte { width: 100%; margin-top: 15px; padding: 11px; border-radius: var(--v-pill); background: transparent; border: 1px solid var(--v-surf-line); color: var(--v-fg2); font: 600 13px/1 var(--ui); cursor: pointer; transition: border-color .2s, color .2s; }
.accV__carte:hover { border-color: var(--acc); color: var(--v-fg); }
@media (prefers-reduced-motion: reduce) { .accHeure__live i, .accV__live i, .accHeure--actif::after { animation: none; } }
/* Desktop : l'accueil devient une vraie grille (plus une colonne étroite collée au menu) */
@media (min-width: 900px) {
  .tab[data-tab="accueil"] .tab__scroll { max-width: 940px; }
  /* Colonnes en minmax(0, 1fr) : un enfant au contenu large (le rail des prochains deals)
     ne peut plus gonfler sa colonne. Chaque bloc a sa zone — un bloc sans zone serait placé
     tout seul dans une colonne et pousserait la grille hors de l'écran (défilement
     horizontal vu dans l'app installée sur Mac, 14.10). */
  .tab[data-tab="accueil"] .acc {
    max-width: none; display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 20px;
    grid-template-areas:
      "hello     lic"
      "inst      inst"
      "dossier   dossier"
      "deal      deal"
      "prochains prochains"
      "volee     heure"
      "volee     mission";
  }
  .tab[data-tab="accueil"] .acc > * { min-width: 0; }
  .tab[data-tab="accueil"] .acc__hello { grid-area: hello; align-self: center; margin: 0; }
  .tab[data-tab="accueil"] .acc__lic { grid-area: lic; align-self: center; }
  .tab[data-tab="accueil"] #accInst { grid-area: inst; margin-top: 0; }
  .tab[data-tab="accueil"] #appDeals { grid-area: deal; margin-bottom: 0; }
  .tab[data-tab="accueil"] #appProchains { grid-area: prochains; margin-top: 0; }
  .tab[data-tab="accueil"] .acc__volee { grid-area: volee; }
  .tab[data-tab="accueil"] #accHeure { grid-area: heure; }
  .tab[data-tab="accueil"] .acc__mission { grid-area: mission; }
}

/* Marque « volée fondatrice » — pastille or sur la licence des premiers membres.
   Posée par marquerFondateur() dans app.js (data-fond = libellé i18n). */
.lic.fondateur { position: relative; }
.lic.fondateur::after {
  content: "◆ " attr(data-fond);
  position: absolute; left: 7%; top: 12.5%; z-index: 7; pointer-events: none;
  font-size: clamp(9px, 2.4vw, 12px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #1a1205; background: linear-gradient(100deg, #FFDC52, #FFA36A);
  padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* ============================================================
   « Ma saison » — carte partageable animée (révélation)
   ============================================================ */
.scR{
  position: fixed; inset: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 18px; gap: 0;
  background: rgba(6,6,7,.74); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  perspective: 1400px; opacity: 0;
}
.scR[hidden]{ display: none; }
.scR__stage{ display: flex; flex-direction: column; align-items: center; gap: 18px; transform-style: preserve-3d; }

.scard{
  --s0:#F46EFF; --s1:#FF7094; --s2:#FFDC52; --teinte:#FF7094;
  position: relative; width: min(84vw, 384px); aspect-ratio: 1080/1350;
  max-height: calc(100dvh - 150px);
  border-radius: 24px; overflow: hidden; isolation: isolate; background: #0a0a0b;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06) inset;
  transform-style: preserve-3d; will-change: transform;
}
.scard__l{ position: absolute; inset: 0; pointer-events: none; }
.scard__bloom{
  background:
    radial-gradient(60% 46% at 30% 26%, var(--s0), transparent 70%),
    radial-gradient(55% 42% at 80% 17%, var(--s2), transparent 70%),
    radial-gradient(74% 60% at 52% 32%, var(--s1), transparent 72%);
  opacity: 0; filter: saturate(1.15); transform: translateZ(-60px) scale(1.25); will-change: transform,opacity;
}
.scard__topo{ opacity: 0; color: rgba(255,255,255,.065); transform: translateZ(-30px); will-change: transform,opacity; }
.scard__topo svg{ width: 118%; height: 118%; position: absolute; top: -9%; left: -9%; }
.scard__grain{
  background-image: 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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(../%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: .09;
}
.scard__vig{
  background:
    radial-gradient(90% 65% at 50% 30%, transparent 40%, rgba(9,9,10,.72) 100%),
    linear-gradient(180deg, transparent 52%, rgba(9,9,10,.92) 100%);
}
.scard__sheen{
  background: linear-gradient(112deg, transparent 32%, rgba(255,255,255,.16) 48%, rgba(255,255,255,.05) 56%, transparent 68%);
  mix-blend-mode: screen; transform: translateX(-160%); will-change: transform;
}
.scard__c{ position: absolute; inset: 0; padding: 7.4% 8.2%; display: flex; flex-direction: column; transform-style: preserve-3d; }
.scard__head{ display: flex; justify-content: space-between; align-items: baseline; transform: translateZ(26px); }
.scard__head b{ font-weight: 600; font-size: clamp(14px,3.6vw,18px); color: #f4f4f5; }
.scard__head b i{ font-style: normal; opacity: .9; }
.scard__head span{ font-weight: 500; font-size: clamp(9px,2.4vw,12px); letter-spacing: .18em; color: rgba(255,255,255,.4); }
.scard__rule{ height: 1px; background: rgba(255,255,255,.14); margin-top: 3.2%; transform: scaleX(0); transform-origin: left; }
.scard__mid{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; transform-style: preserve-3d; text-align: center; }
.scard__kick{ font-weight: 600; letter-spacing: .42em; font-size: clamp(11px,2.8vw,14px); color: rgba(255,255,255,.62); text-indent: .42em; text-transform: uppercase; opacity: 0; transform: translateY(8px); }
.scard__year{
  font-family: var(--display, 'Anton', sans-serif); font-weight: 400; line-height: .82;
  font-size: clamp(104px,31vw,168px); letter-spacing: -.01em; margin: .04em 0 .02em;
  background: linear-gradient(104deg, var(--s0), var(--s1) 46%, var(--s2));
  background-size: 220% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: inset(0 100% 0 0); will-change: background-position, clip-path;
}
.scard__sub{ font-weight: 600; letter-spacing: .24em; font-size: clamp(11px,2.8vw,14px); color: rgba(255,255,255,.6); text-indent: .24em; text-transform: uppercase; opacity: 0; transform: translateY(8px); }
.scard__rank{
  margin-top: 5.5%; display: inline-flex; align-items: center; gap: .5em;
  padding: .6em 1.15em; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--teinte) 82%, transparent);
  background: color-mix(in srgb, var(--teinte) 14%, transparent); color: var(--teinte);
  font-weight: 600; letter-spacing: .12em; font-size: clamp(11px,2.8vw,14px); text-transform: uppercase;
  opacity: 0; transform: scale(.6); white-space: nowrap;
}
.scard__rank em{ font-style: normal; font-size: .9em; }
.scard__foot{ transform: translateZ(20px); }
.scard__stats{
  display: grid; grid-template-columns: repeat(3,1fr);
  border: 1.5px solid rgba(255,255,255,.1); border-radius: 18px;
  background: rgba(255,255,255,.045); padding: 5.4% 2%; margin-bottom: 5%;
}
.scard__stat{ text-align: center; position: relative; }
.scard__stat + .scard__stat::before{ content: ""; position: absolute; left: 0; top: 16%; height: 68%; width: 1.5px; background: rgba(255,255,255,.1); }
.scard__stat b{ display: block; font-family: var(--display, 'Anton', sans-serif); font-weight: 400; font-size: clamp(30px,8.2vw,44px); line-height: 1; color: #f4f4f5; font-variant-numeric: tabular-nums; }
.scard__stat span{ display: block; margin-top: .5em; font-weight: 600; letter-spacing: .13em; font-size: clamp(8px,2.1vw,11px); color: rgba(255,255,255,.4); text-transform: uppercase; }
.scard__mrz{ font-family: "Courier New", monospace; letter-spacing: .22em; font-size: clamp(9px,2.2vw,12px); color: rgba(255,255,255,.4); text-align: center; white-space: nowrap; overflow: hidden; }
.scard__tag{ text-align: center; margin-top: 4.2%; font-weight: 400; font-size: clamp(11px,2.7vw,14px); color: rgba(255,255,255,.55); }

.scR__acts{ display: flex; gap: 10px; align-items: center; }
.scR__share{
  font: inherit; font-weight: 600; font-size: 15px; color: #0b0b0c;
  background: #f4f4ef; border: 0; padding: 13px 24px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.6); transition: transform .15s, background-color .2s;
}
.scR__share:hover{ background: #fff; transform: translateY(-1px); }
.scR__share:active{ transform: translateY(0) scale(.98); }
.scR__close{
  font: inherit; font-weight: 600; font-size: 15px; color: #f4f4f5;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  padding: 13px 22px; border-radius: 999px; cursor: pointer; transition: background-color .2s;
}
.scR__close:hover{ background: rgba(255,255,255,.14); }

@media (prefers-reduced-motion: reduce){
  .scard__bloom, .scard__topo{ opacity: 1 !important; }
  .scard__year{ clip-path: none !important; }
  .scard__kick, .scard__sub, .scard__rank{ opacity: 1 !important; transform: none !important; }
  .scard__rule{ transform: scaleX(1) !important; }
}

/* ---------- Touches « vraiment app » sur mobile ---------- */
/* pas de flash gris au tap, pas de sélection accidentelle sur les contrôles */
* { -webkit-tap-highlight-color: transparent; }
.tabbar, .appMode, .appRub, .appLieux, .appSort, .segmented, button, .cta { -webkit-user-select: none; user-select: none; }
/* le scroll interne n'entraîne jamais la page (pas de rebond parasite) */
.tab__scroll, .sheet, .scR, .appPlan { overscroll-behavior: contain; }
html, body { overscroll-behavior-y: none; }

/* ---------- Guide première ouverture (coach marks) ---------- */
.coach { position: fixed; inset: 0; z-index: 1100; }
.coach[hidden] { display: none; }
.coach__halo { position: fixed; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(8,8,10,.66), 0 0 0 2px color-mix(in srgb, var(--acc) 72%, transparent); transition: left .32s var(--v-ease), top .32s var(--v-ease), width .32s var(--v-ease), height .32s var(--v-ease); }
.coach__bulle { position: fixed; width: min(330px, calc(100vw - 24px)); background: var(--v-surf2); border: 1px solid var(--v-surf-line); border-radius: var(--v-rad-s); padding: 18px 18px 16px; box-shadow: 0 24px 60px -24px #000; }
.coach__t { display: block; font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: -.01em; }
.coach__d { margin-top: 7px; font-size: 14.5px; line-height: 1.5; color: var(--v-fg2); }
.coach__act { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.coach__skip { background: none; border: 0; color: var(--v-fg3); font: 600 13px var(--ui); cursor: pointer; padding: 8px 2px; }
.coach__skip:hover { color: var(--v-fg2); }
.coach__ok { background: var(--v-fg); color: var(--v-bg); border: 0; border-radius: var(--v-pill); font: 700 14px var(--ui); padding: 11px 22px; cursor: pointer; min-height: 44px; transition: transform .2s var(--v-ease); }
.coach__ok:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .coach__halo { transition: none; } }

/* ---------- Splash de marque : logo animé à l'ouverture (une fois par session) ---------- */
.splash { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: var(--v-bg); animation: splashRaz 0.01s linear 5s forwards; }
.splash[hidden] { display: none; }
.splash__in { text-align: center; padding: 0 24px; }
.splash__wm { display: inline-block; font-family: var(--display); font-weight: 400; font-size: clamp(38px, 13vw, 72px); letter-spacing: .02em; line-height: 1;
  background-image: linear-gradient(100deg, var(--v-fg) 0 40%, #3cd6ff 47%, #a87cff 52%, #ff7ce0 57%, var(--v-fg) 64% 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.splash__wm i { font-style: normal; -webkit-text-fill-color: var(--v-fg3); color: var(--v-fg3); }
.splash__bar { display: block; width: 184px; height: 3px; margin: 24px auto 0; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.splash__bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #3cd6ff, #a87cff, #ff7ce0); }
@keyframes splashRaz { to { visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .splash__wm { background-position: 50% 0; } .splash__bar i { width: 100%; } }

/* ---------- Appareil photo intégré (getUserMedia) — téléphone + ordinateur ---------- */
.cam { position: fixed; inset: 0; z-index: 2400; background: #06060a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: max(20px, env(safe-area-inset-top)) 20px max(26px, env(safe-area-inset-bottom)); }
.cam[hidden] { display: none; }
.cam__scene { position: relative; width: min(84vw, 360px); aspect-ratio: 1; border-radius: 28px; overflow: hidden; background: #000; border: 1px solid var(--v-surf-line); }
.cam__video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; background: #000; }
.cam__ovale { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 58%; height: 76%; border: 2px dashed rgba(255,255,255,.55); border-radius: 50%; pointer-events: none; }
.cam__guide { font-size: 13px; color: var(--v-fg3); text-align: center; }
.cam__err { color: var(--acc); font-size: 14px; line-height: 1.5; text-align: center; max-width: 30ch; margin: 0; }
.cam__barre { display: flex; align-items: center; gap: 28px; margin-top: 6px; }
.cam__annuler { background: none; border: 0; color: var(--v-fg2); font: 600 15px var(--ui); cursor: pointer; padding: 12px 6px; min-height: 44px; }
.cam__snap { width: 74px; height: 74px; border-radius: 50%; background: var(--v-fg); border: 5px solid #ffffff30; cursor: pointer; box-shadow: 0 0 0 2px #06060a inset; transition: transform .15s var(--v-ease); }
.cam__snap:active { transform: scale(.92); }

/* ---------- Licence en plein écran (dans l'app, plus de navigation) ---------- */
.licPlein { position: fixed; inset: 0; z-index: 2300; background: radial-gradient(120% 80% at 50% 18%, #15151c, #06060a 70%); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding: max(52px, env(safe-area-inset-top)) 18px max(30px, env(safe-area-inset-bottom)); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.licPlein[hidden] { display: none; }
.licPlein__x { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--v-line); background: #ffffff10; color: var(--v-fg); font-size: 15px; line-height: 1; cursor: pointer; z-index: 2; }
/* Au comptoir, le scan prime : on remonte la photo + le code/QR au-dessus de la
   ligne de flottaison (ordre flex), et la carte vivante passe juste en dessous. */
.licPlein__scene { width: min(66vw, 290px); margin-top: 8px; order: 4; }
.licPlein__scene .scene3d { width: 100%; }
/* panneau « à présenter » : grande photo (face-match) + identité + live */
.licPlein__id { display: flex; align-items: center; gap: 16px; width: min(88vw, 360px); order: 1; }
.licPlein__photo { width: 116px; height: 140px; flex: none; border-radius: 14px; object-fit: cover; border: 1px solid var(--v-line); background: #ffffff0a; }
.licPlein__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.licPlein__who > b { font-family: var(--display); font-weight: 400; font-size: 23px; letter-spacing: .02em; }
.licPlein__who > span { font-size: 14px; color: var(--v-fg2); }
.licPlein__live { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 600 11px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--v-fg2); white-space: nowrap; }
.licPlein__live b { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: .08em; color: var(--v-fg); font-variant-numeric: tabular-nums; }
.licPlein__hint { font-size: 13px; color: var(--v-fg3); text-align: center; max-width: 32ch; margin: 2px auto 0; order: 3; }

/* Aperçu du Golden Ticket : on voit l'image avant de partager */
.ticketPrev { position: fixed; inset: 0; z-index: 2400; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: max(28px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(120% 80% at 50% 16%, #141418, #070709 72%); }
.ticketPrev[hidden] { display: none; }
.ticketPrev__box { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 380px; }
.ticketPrev__frame { position: relative; width: 100%; aspect-ratio: 1080 / 1350; max-height: 66vh; border-radius: 18px; overflow: hidden; background: #0d0d10; border: 1px solid var(--v-line); }
.ticketPrev__img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .2s; }
.ticketPrev__spin { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; border: 3px solid #ffffff22; border-top-color: var(--acc); animation: tkSpin .8s linear infinite; opacity: 0; }
.ticketPrev.gen .ticketPrev__spin { opacity: 1; }
.ticketPrev.gen .ticketPrev__img { opacity: 0; }
@keyframes tkSpin { to { transform: rotate(360deg); } }
.ticketPrev__act { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ticketPrev__share { width: 100%; }
.ticketPrev__btn { width: 100%; min-height: 48px; border-radius: var(--v-pill); border: 1px solid var(--v-line); background: none; color: var(--v-fg2); font: 600 14.5px/1 var(--ui); cursor: pointer; transition: color .2s, border-color .2s; }
.ticketPrev__btn:hover { color: var(--v-fg); border-color: var(--v-fg3); }
@media (prefers-reduced-motion: reduce) { .ticketPrev__spin { animation-duration: 1.6s; } }

/* A1 — célébration du passage validé (poignée de main temps réel) */
.passCelebr { position: fixed; inset: 0; z-index: 2600; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(60% 50% at 50% 42%, color-mix(in srgb, var(--cc, var(--acc)) 30%, transparent), #050508e6 72%); opacity: 0; transition: opacity .35s var(--v-ease); pointer-events: none; }
.passCelebr[hidden] { display: none; }
.passCelebr.on { opacity: 1; pointer-events: auto; }
.pc__card { text-align: center; transform: scale(.82); transition: transform .45s var(--v-ease); }
.passCelebr.on .pc__card { transform: scale(1); }
.pc__check { width: 108px; height: 108px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 56px; font-weight: 700; color: #0b0b0c; background: var(--cc, var(--acc)); box-shadow: 0 0 64px -6px var(--cc, var(--acc)); animation: pcPop .5s var(--v-ease) both; }
.pc__t { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 9vw, 44px); text-transform: uppercase; letter-spacing: .01em; color: var(--v-fg); }
.pc__shop { margin-top: 6px; font-size: 15px; color: var(--v-fg2); }
.pc__plus { margin-top: 16px; font-size: 14px; color: var(--v-fg2); letter-spacing: .02em; }
.pc__plus b { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--cc, var(--acc)); margin-right: 6px; }
@keyframes pcPop { from { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.12); } to { transform: scale(1); opacity: 1; } }
.lic--pulse { animation: licPulse 1.4s var(--v-ease); }
@keyframes licPulse { 0% { filter: brightness(1); } 16% { filter: brightness(1.55) saturate(1.3); } 100% { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .passCelebr, .pc__card { transition: none; } .pc__check { animation: none; } .lic--pulse { animation: none; } }

/* Bouton « Prendre une photo » de l'étape photo */
.photo__cam { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; }
.photo__cam svg { width: 18px; height: 18px; flex: none; }

/* ---------- Intro : atmosphère jeune, vivante, désirable (effet woaw) ---------- */
.etape--intro { position: relative; overflow: hidden; }
.intro__aura { position: absolute; inset: -12%; z-index: 0; pointer-events: none; }
.intro__aura i { position: absolute; border-radius: 50%; filter: blur(72px); mix-blend-mode: screen; will-change: transform; }
.intro__aura i:nth-child(1) { width: 64vmin; height: 64vmin; background: var(--s-1); left: 0%; top: 2%; opacity: .5; animation: auraA 17s ease-in-out infinite alternate; }
.intro__aura i:nth-child(2) { width: 56vmin; height: 56vmin; background: var(--s-3); right: -4%; top: 0%; opacity: .46; animation: auraB 21s ease-in-out infinite alternate; }
.intro__aura i:nth-child(3) { width: 74vmin; height: 74vmin; background: var(--s-2); left: 24%; bottom: -14%; opacity: .44; animation: auraC 24s ease-in-out infinite alternate; }
@keyframes auraA { from { transform: translate(-7%, -4%) scale(1); } to { transform: translate(12%, 9%) scale(1.18); } }
@keyframes auraB { from { transform: translate(7%, 0) scale(1.12); } to { transform: translate(-9%, 11%) scale(1); } }
@keyframes auraC { from { transform: translate(0, 7%) scale(1); } to { transform: translate(-11%, -9%) scale(1.22); } }
.etape--intro .vue { position: relative; z-index: 1; }
/* le hero « ta couleur » coule en continu — la couleur, vivante */
.etape--intro .holo-t { background-size: 220% 100%; animation: holoFlow 7s linear infinite; }
@keyframes holoFlow { to { background-position: 220% 0; } }
/* desktop : plus de présence, moins de vide */
@media (min-width: 760px) {
  .etape--intro .vue { max-width: 560px; }
  .etape--intro .titre { font-size: clamp(64px, 7vw, 100px); }
  .etape--intro .sub { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro__aura i { animation: none; }
  .etape--intro .holo-t { animation: none; }
}

/* Intro : la carte « produit » — compacte EN HAUT sur mobile, grande À DROITE sur
   desktop. Elle flotte et s'incline. On montre le produit tout de suite. */
.intro__show { display: block; position: relative; z-index: 1; }
.intro__show .scene3d { width: clamp(150px, 44vw, 188px); perspective: 1200px; margin: 0 auto; animation: introFloat 6s ease-in-out infinite alternate; }
.intro__show .scene3d .lic { width: 100%; }
@keyframes introFloat { from { transform: translateY(-10px); } to { transform: translateY(10px); } }
/* mobile : l'intro tient dans l'écran du téléphone, SANS défilement — « sinon ça fait pas
   app » (Max, 14.10). Tout se mesure à la hauteur d'écran (svh, celle qui reste sous les
   barres de Safari) : la carte, le titre, les interlignes et les espaces rétrécissent
   ensemble, la carte en premier. Si malgré tout ça déborde (traduction longue, écran
   minuscule), on retrouve un défilement et le contenu reste atteignable (safe center). */
@media (max-width: 899px) {
  .etape--intro {
    height: 100svh; min-height: 0; overflow: hidden;
    gap: clamp(6px, 1.6svh, 14px);
    padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  /* la section reste masquée (les halos d'arrière-plan débordent exprès) ; seul le bloc de
     texte peut défiler, et seulement s'il ne tient vraiment pas */
  .etape--intro .vue { min-height: 0; overflow-y: auto; }
  .intro__show .scene3d { width: clamp(104px, min(40vw, 17svh), 188px); }
  .etape--intro .kicker { font-size: 11px; }
  .etape--intro .titre { margin-top: 8px; font-size: clamp(32px, min(11vw, 7.2svh), 54px); }
  .etape--intro .sub { margin-top: 8px; font-size: clamp(13px, 2.15svh, 15px); line-height: 1.45; }
  .etape--intro .cta { margin-top: clamp(10px, 2svh, 22px); min-height: clamp(46px, 7svh, 56px); }
  .etape--intro .note { margin-top: clamp(8px, 1.6svh, 16px); font-size: 12.5px; }
  .etape--intro .lien { margin-top: clamp(6px, 1.2svh, 14px); font-size: 13px; }
}
@media (min-width: 900px) {
  .etape--intro { flex-direction: row; gap: clamp(44px, 6vw, 96px); justify-content: center; align-items: center; }
  .etape--intro .vue { margin: 0; order: 1; }
  .intro__show { flex: none; order: 2; }
  .intro__show .scene3d { width: clamp(300px, 25vw, 372px); perspective: 1400px; }
}
@media (prefers-reduced-motion: reduce) { .intro__show .scene3d { animation: none; } }

/* ---------- la couleur du membre : quatorze pastilles (onboarding + profil) ---------- */
.teintes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.teinte { aspect-ratio: 1; width: 100%; padding: 0; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 2px var(--v-bg); transition: transform .25s var(--v-ease), border-color .25s ease; }
.teinte:hover { transform: scale(1.08); }
.teinte[aria-pressed="true"] { border-color: var(--v-fg); transform: scale(1.14); }
.teinte:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 3px; }
.teintes--prof { max-width: 360px; margin-top: 10px; }
@media (max-height: 820px) { .teintes { gap: 8px; margin-top: 14px; } }
@media (prefers-reduced-motion: reduce) { .teinte { transition: none; } }

/* ---------- démo (/demo/) : le logo d'une vraie marque remplace l'emblème inventé.
   Les données publiques n'ont jamais de champ `logo` : ce bloc ne sert qu'à la démo. ---------- */
.ens__logo--img { background: #f4f4ef; box-shadow: inset 0 0 0 1px #00000014; }
.ens__logo--img::after { content: none; }
.ens__logo--img img { position: relative; z-index: 2; width: 74%; height: 74%; object-fit: contain; }
.adeal__cover .ens__logo--img { background: #f4f4efe6; }

/* Le code du moment sur l'écran « à présenter » (au comptoir) : scanner le QR ou taper le code.
   Les deux changent toutes les 30 s ; la photo + l'âge au-dessus sont la vérification humaine. */
.licPlein__pass { width: min(92vw, 380px); margin-top: 2px; order: 2; }
.licPlein__passK { display: block; font: 700 10.5px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg3); margin-bottom: 8px; }
/* Le QR est ce que le commerçant scanne : grand et centré ; le code lisible au-dessus (secours).
   Le tout défile sous la carte (licPlein overflow-y), donc un grand QR ne la masque jamais. */
.licPlein__passRow { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 16px 18px; border-radius: 18px; background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.licPlein__code { min-width: 0; font-family: var(--mono, ui-monospace, monospace); font-weight: 700; font-size: clamp(30px, 10vw, 40px); letter-spacing: .16em; color: var(--v-fg); text-align: center; }
.licPlein__qr { width: clamp(150px, 46vw, 188px); height: clamp(150px, 46vw, 188px); flex: none; border-radius: 14px; overflow: hidden; background: #f4f4ef; }
.licPlein__qr svg { width: 100%; height: 100%; display: block; }
/* Desktop / grande tablette : vraie mise en page deux colonnes — la carte vivante
   à gauche, le bloc à présenter (photo + code + QR) à droite — centrée, sans
   colonne étroite perdue dans le vide. En dessous, on garde la colonne scan-first. */
@media (min-width: 760px) {
  .licPlein {
    display: grid;
    grid-template-columns: auto minmax(280px, 360px);
    grid-template-areas: "card id" "card pass" "card hint";
    column-gap: clamp(28px, 4vw, 56px); row-gap: 14px;
    align-content: center; justify-content: center;
    padding: 40px; overflow-y: auto;
  }
  .licPlein__scene { grid-area: card; width: min(46vh, 340px); margin: 0; align-self: center; }
  .licPlein__id   { grid-area: id;   width: auto; align-self: end; }
  .licPlein__photo { width: 104px; height: 128px; }
  .licPlein__pass { grid-area: pass; width: 100%; margin: 0; }
  .licPlein__hint { grid-area: hint; align-self: start; margin: 0; max-width: 360px; text-align: left; }
}

/* Les prochains deals (accueil), repris du site */
.dsem { margin-top: 18px; }
.dsem__tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; }
.dsem__tete b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.dsem__tete span { font-size: 13px; color: var(--v-fg3); }
.dsem__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.dsem__rail::-webkit-scrollbar { display: none; }
.dsem__c { scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; text-align: left; min-width: 0; padding: 14px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); color: var(--v-fg); font: inherit; cursor: pointer; transition: transform .3s var(--v-ease), border-color .3s var(--v-ease); }
.dsem__c:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 45%, var(--v-surf-line)); }
.dsem__c:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.dsem__j { font: 700 11px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg3); }
.dsem__c .ens__logo { width: 40px; height: 40px; border-radius: 12px; margin-top: 2px; }
.dsem__c b { max-width: 100%; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsem__r { padding: 3px 8px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font: 700 12px/1 var(--ui); transition: background-color .9s var(--v-ease); }
.dsem__ex { max-width: 100%; font-size: 12px; color: var(--v-fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Installer l'app, sans store (prototype/src/ui/installer.js) ----------
   Bannière discrète sur l'accueil (fermable, mémorisée) et carte du profil : bouton natif
   quand le navigateur l'offre, guide iPhone ou générique sinon ; tout disparaît une fois
   l'app installée (fenêtre « standalone »). */
.acc__inst { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.acc__inst[hidden] { display: none; }
.acc__inst__b { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 16px; border: 1px dashed color-mix(in srgb, var(--acc) 55%, var(--v-surf-line)); border-radius: var(--v-rad-s); background: color-mix(in srgb, var(--acc) 8%, transparent); color: var(--v-fg); font: 600 13.5px/1.25 var(--ui); text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s; }
.acc__inst__b:hover { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.acc__inst__go { flex: none; color: var(--v-fg3); font-size: 18px; }
.acc__inst__x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--v-surf-line); background: #ffffff08; color: var(--v-fg3); font-size: 13px; cursor: pointer; transition: color .2s, border-color .2s; }
.acc__inst__x:hover { color: var(--v-fg); border-color: var(--v-fg3); }
#instSec[hidden] { display: none; }
.inst { display: grid; gap: 12px; }
.inst__btn { width: auto; min-height: 46px; margin-top: 2px; padding: 0 22px; justify-self: start; font-size: 15px; }
.inst__pas { margin: 0; padding-left: 22px; display: grid; gap: 7px; font-size: 14px; line-height: 1.45; color: var(--v-fg2); }
.inst__pas[hidden] { display: none; }
.inst__pas b, .inst__autre b { color: var(--v-fg); font-weight: 600; }

/* ---------- « Nouvelle version » (prototype/src/ui/maj.js) ----------
   Pastille discrète en haut, cachée tant que la fenêtre est à jour. */
.maj { position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); z-index: 1200; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: var(--v-pill); background: var(--v-fg); color: var(--v-bg); font: 600 13px/1 var(--ui); white-space: nowrap; box-shadow: 0 14px 40px -12px #000c; }
.maj[hidden] { display: none; }
.maj button { border: 0; border-radius: var(--v-pill); padding: 8px 12px; background: var(--acc, var(--s-2)); color: #0b0b0c; font: 700 12.5px/1 var(--ui); cursor: pointer; }

/* ---------- Mode public ↔ démo : ce qui n'existe que dans l'un (body[data-mode], posé par app.js) ---------- */
body[data-mode="public"] [data-pour="demo"], body[data-mode="demo"] [data-pour="public"] { display: none !important; }

/* ---------- La vraie vérification (brique 1, mode public) ----------
   03 la pièce photographiée · 04 le masque · 05 l'envoi · l'accusé « reçu » · l'état du dossier dans l'app. */
.photo__zone--doc { width: min(100%, 300px); height: auto; aspect-ratio: 1.586; }
.photo__zone--doc .photo__apercu { object-fit: contain; background: #0b0b0e; }

.masque { margin: 16px 0 0; }
.masque__zone { position: relative; width: 100%; aspect-ratio: 1.586; border-radius: 16px; overflow: hidden; background: #0b0b0e; border: 1px solid var(--v-surf-line); touch-action: none; user-select: none; -webkit-user-select: none; }
.masque__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; -webkit-user-drag: none; }
.masque__voile { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Le voile : ce qui part en noir. Semi-transparent pour viser, opaque quand on vérifie « ce qui part ». */
.masque__voile path { fill: #000; fill-opacity: .72; transition: fill-opacity .25s var(--v-ease); }
.masque__zone--opaque .masque__voile path { fill-opacity: 1; }
.masque__cadre { position: absolute; box-sizing: border-box; border: 2px solid var(--acc); border-radius: 6px; cursor: grab; touch-action: none; box-shadow: 0 0 0 1px #0008; }
.masque__cadre--actif { cursor: grabbing; border-color: var(--v-fg); }
.masque__cadre:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 2px; }
.masque__cadre > span { position: absolute; left: -2px; top: -22px; padding: 2px 7px; border-radius: 6px 6px 6px 0; background: var(--acc); color: var(--v-bg); font: 700 10.5px/1.4 var(--ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.masque__cadre > i { position: absolute; right: -14px; bottom: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--acc); border: 3px solid var(--v-bg); cursor: nwse-resize; touch-action: none; }
.masque__cadre > i::after { content: ""; position: absolute; inset: -10px; }   /* une prise plus large que le point, pour le pouce */
.masque__zone--chevauche .masque__cadre { border-color: var(--or, #FFA36A); }
.masque__alerte { margin: 10px 0 0; font-size: 13px; color: var(--or, #FFA36A); }
.masque__alerte[hidden] { display: none; }
.masque__apercu { display: inline-block; margin-top: 12px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--v-line); background: transparent; color: var(--v-fg2); font: 600 13px var(--ui); cursor: pointer; }
.masque__apercu[aria-pressed="true"] { background: var(--v-fg); color: var(--v-bg); border-color: transparent; }

.dossier { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 16px; border-radius: 14px; background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.dossier > span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--v-fg3); }
.dossier > b { font: 600 22px/1 var(--ui); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.dossier[hidden] { display: none; }
.gardeRetours { display: flex; gap: 18px; flex-wrap: wrap; margin: 0; }
.gardeRetours[hidden] { display: none; }
.gardeRetours .lien { margin-top: 8px; }

/* La carte « Ton dossier » sur l'accueil : point orange en attente, vert vérifié, rouge refusé. */
.acc__dossier { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 16px; border-radius: var(--v-rad-s); border: 1px solid var(--v-surf-line); background: var(--v-surf); font-size: 14px; line-height: 1.45; color: var(--v-fg2); }
.acc__dossier[hidden] { display: none; }
.acc__dossier::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--or, #FFA36A); box-shadow: 0 0 0 4px color-mix(in srgb, var(--or, #FFA36A) 22%, transparent); }
.acc__dossier[data-statut="valide"]::before { background: var(--ok, #4CFF9C); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok, #4CFF9C) 22%, transparent); }
.acc__dossier[data-statut="rejete"]::before { background: #ff8080; box-shadow: 0 0 0 4px #ff808038; }
.acc__dossier p { flex: 1 1 200px; min-width: 0; margin: 0; }
.acc__dossier b { color: var(--v-fg); font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; }
/* « Refaire ma vérification » passe sous le texte quand la ligne est courte (téléphone), à sa droite sinon. */
.acc__dossier__b { flex: none; margin-left: 22px; background: none; border: 0; padding: 4px 0; color: var(--acc); font: 600 14px var(--ui); cursor: pointer; }
.acc__dossier__x { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--v-surf-line); background: #ffffff08; color: var(--v-fg3); font-size: 13px; cursor: pointer; }
@media (min-width: 900px) { .tab[data-tab="accueil"] #accDossier { grid-area: dossier; } }

/* La licence en attente de revue ou refusée : la pastille le dit, la photo ne se touche plus ici. */
.piece.attente .piece__ok { color: var(--or, #FFA36A); border-color: color-mix(in srgb, var(--or, #FFA36A) 45%, transparent); }
.piece.refuse .piece__ok { color: #ff8080; border-color: #ff808070; }
.piece.attente .piece__ph { cursor: default; }
.licPlein__etat { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px; font: 700 10.5px/1.4 var(--ui); letter-spacing: .05em; text-transform: uppercase; color: var(--or, #FFA36A); border: 1px solid color-mix(in srgb, var(--or, #FFA36A) 45%, transparent); }
.licPlein__etat[hidden] { display: none; }

/* La caméra en mode « carte » (la pièce) : scène au format d'une carte, pas de miroir, guide rectangulaire. */
.cam--carte .cam__scene { width: min(92vw, 520px); aspect-ratio: 1.586; }
.cam--carte .cam__video { transform: none; }
.cam--carte .cam__ovale { display: none; }
.cam__carte { display: none; }
.cam--carte .cam__carte { display: block; position: absolute; inset: 6% 5%; border: 2px dashed rgba(255,255,255,.55); border-radius: 14px; pointer-events: none; }

/* ---- app/pro/pro.css ---- */
/* LE COMPTOIR — l'écran Junior du commerçant. Tableau du mois (par volée) et
   validation d'un passage en un geste. DA « Volée », registre outil. */

/* DA PRO SOBRE sur TOUT le comptoir (pas seulement l'onboarding) : côté jeune = la
   couleur (le spectre, chaque volée sa teinte) ; côté commerçant = un seul accent
   froid, calme, pro. L'indigo remplace le violet --s-2 partout via var(--acc, …). */
.pro, .scan, .reglages { --acc: #8a90ff; }

.pro {
  position: relative; z-index: 1; max-width: 460px; margin: 0 auto;
  min-height: 100svh; display: flex; flex-direction: column; gap: 16px;
  padding: max(26px, env(safe-area-inset-top)) 20px max(26px, env(safe-area-inset-bottom));
}
.pro__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pro__m { font-family: var(--display); font-size: 16px; letter-spacing: .05em; }
.pro__m i { font-style: normal; color: var(--v-fg3); }
.pro__shop { font-size: 13px; color: var(--v-fg3); }

/* sélecteur de vue : Valider | Mon mois */
.proseg { align-self: center; display: inline-flex; gap: 4px; background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-pill); padding: 4px; }
.proseg button { border: 0; background: none; color: var(--v-fg3); font: 600 13.5px/1 var(--ui); padding: 10px 22px; border-radius: var(--v-pill); cursor: pointer; transition: color .2s, background-color .2s; }
.proseg button[aria-selected="true"] { background: var(--acc, var(--s-2)); color: var(--v-bg); }
.provue { display: flex; flex-direction: column; gap: 16px; }
.pro[hidden] { display: none; }
.provue[hidden] { display: none; }
.moisrow { display: flex; flex-direction: column; gap: 16px; }
.proReset { align-self: center; margin-top: 2px; background: none; border: 0; color: var(--v-fg3); font: 500 13px/1 var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 10px; }
.proReset:hover { color: var(--v-fg2); }

/* inscription commerçant (démo) */
.proOnb { position: relative; z-index: 1; min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding: max(30px, env(safe-area-inset-top)) 20px max(30px, env(safe-area-inset-bottom)); }
.proOnb[hidden] { display: none; }
.proOnb__box { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 14px; }
.proOnb__pitch, .proOnb__form { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) {
  .proOnb__box { max-width: 880px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 48px; align-items: start; }
  .proOnb__box .proLang--onb { grid-column: 1 / -1; justify-self: end; }
  .proOnb__pitch { grid-column: 1; align-self: center; }
  .proOnb__form { grid-column: 2; background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-rad); padding: 26px 28px; }
  .proOnb__pal { grid-column: 1 / -1; }
  .proOnb__pallien { grid-column: 1 / -1; }
}
.proOnb__kick { font-family: var(--display); font-size: 15px; letter-spacing: .05em; color: var(--v-fg3); }
.proOnb__kick i { font-style: normal; color: var(--v-fg3); }
.proOnb__h { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 9vw, 46px); line-height: .98; text-transform: uppercase; margin: 2px 0; }
.proOnb__sub { color: var(--v-fg2); font-size: 14.5px; line-height: 1.5; margin-bottom: 6px; }
.proOnb__sub b { color: var(--v-fg); }
.proF { display: flex; flex-direction: column; gap: 7px; }
.proF > span { font-size: 13px; color: var(--v-fg2); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.proF > span b { color: var(--acc, var(--s-2)); font-family: var(--display); font-weight: 400; font-size: 16px; }
.proF input[type="text"], .proF select { width: 100%; min-height: 50px; padding: 0 15px; border-radius: var(--v-rad-s); border: 1px solid var(--v-surf-line); background: var(--v-surf); color: var(--v-fg); font: 500 15px/1 var(--ui); -webkit-appearance: none; appearance: none; }
.proF select { background-image: linear-gradient(45deg, transparent 50%, var(--v-fg3) 50%), linear-gradient(135deg, var(--v-fg3) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.proF input[type="text"]:focus, .proF select:focus { outline: none; border-color: var(--acc); }
.proF input[type="range"] { width: 100%; accent-color: var(--acc, var(--s-2)); }
.proOnb__err { color: #FF7094; font-size: 13px; }
.proOnb__go { margin-top: 6px; min-height: 76px; }
.proOnb__pal { margin-top: 8px; font-size: 12.5px; color: var(--v-fg3); line-height: 1.7; background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-rad-s); padding: 14px 16px; }
.proOnb__pal b { color: var(--v-fg2); }
.proOnb__pal span { white-space: nowrap; }
.proOnb__pallien { display: inline-flex; align-items: center; margin-top: 10px; font: 600 13px/1 var(--ui); color: #8a90ff; text-decoration: none; transition: opacity .2s var(--v-ease); }
.proOnb__pallien:hover { opacity: .82; }
.proOnb__pallien:focus-visible { outline: 2px solid #8a90ff; outline-offset: 3px; border-radius: 4px; }

/* offre active MAINTENANT (écran Valider) */
.offreActive { border-radius: var(--v-rad); border: 1px solid var(--v-surf-line); background: var(--v-surf); padding: 18px 20px; }
.offreActive.on { border-color: color-mix(in srgb, var(--acc, var(--s-2)) 45%, transparent); background: color-mix(in srgb, var(--acc, var(--s-2)) 10%, var(--v-surf)); box-shadow: 0 0 34px -16px var(--acc, var(--s-2)); }
.offreActive__k { display: flex; align-items: center; gap: 8px; font: 700 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .08em; color: var(--v-fg3); }
.offreActive.on .offreActive__k { color: var(--acc, var(--s-2)); }
.offreActive__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc, var(--s-2)); box-shadow: 0 0 9px var(--acc, var(--s-2)); }
.offreActive__r { margin-top: 10px; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; color: var(--v-fg); }
.offreActive__r i { font-style: normal; font-size: .62em; }
.offreActive__r span { font-family: var(--ui); font-weight: 600; font-size: 15px; color: var(--v-fg2); margin-left: 6px; }
.offreActive__j { margin-top: 8px; font-size: 13px; color: var(--v-fg3); }
.offreActive__next { margin-top: 8px; font-size: 14px; color: var(--v-fg2); line-height: 1.5; }
.offreActive__next b { color: var(--v-fg); }

/* ---------- Flash « c'est calme » (ambre « en direct », tranche avec le sobre) ---------- */
.flashZone { --flash: #ffb24c; }
.flashZone:empty { display: none; }
.flashZone__go { width: 100%; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: var(--v-rad); border: 1px dashed color-mix(in srgb, var(--flash) 55%, var(--v-surf-line)); background: color-mix(in srgb, var(--flash) 8%, transparent); color: var(--v-fg); font: 600 15px/1 var(--ui); cursor: pointer; transition: border-color .2s, background-color .2s; }
.flashZone__go:hover { border-color: var(--flash); background: color-mix(in srgb, var(--flash) 14%, transparent); }
.flashZone__ic { font-size: 18px; }
.flashZone.on { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--v-rad); background: color-mix(in srgb, var(--flash) 10%, var(--v-surf)); border: 1px solid color-mix(in srgb, var(--flash) 40%, transparent); }
.flashZone__live { display: inline-flex; align-items: center; gap: 9px; font: 700 12px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--flash); }
.flashZone__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--flash); box-shadow: 0 0 10px var(--flash); animation: flashPulse 1.1s ease-in-out infinite; }
@keyframes flashPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.flashZone__stop { flex: none; border: 1px solid var(--v-line); background: none; color: var(--v-fg2); font: 600 13px/1 var(--ui); padding: 9px 16px; border-radius: var(--v-pill); cursor: pointer; }
.flashZone__stop:hover { color: var(--v-fg); border-color: var(--v-fg3); }
.flashZone.pick { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid color-mix(in srgb, var(--flash) 35%, var(--v-surf-line)); }
.flashPick__t { font-size: 13px; color: var(--v-fg2); font-weight: 600; }
.flashPick__row { display: flex; gap: 8px; }
.flashPick__c { flex: 1; padding: 11px 6px; border-radius: var(--v-rad-s); border: 1px solid var(--v-surf-line); background: #ffffff06; color: var(--v-fg2); font: 600 14px/1 var(--ui); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.flashPick__c.on { background: color-mix(in srgb, var(--flash) 18%, transparent); border-color: color-mix(in srgb, var(--flash) 55%, transparent); color: var(--v-fg); }
.flashPick__act { display: flex; gap: 10px; margin-top: 2px; }
.flashPick__launch { flex: 1; min-height: 48px; border: 0; border-radius: var(--v-pill); background: var(--flash); color: #1a1205; font: 700 15px/1 var(--ui); cursor: pointer; }
.flashPick__x { min-height: 48px; padding: 0 18px; border: 1px solid var(--v-surf-line); border-radius: var(--v-pill); background: none; color: var(--v-fg2); font: 600 14px/1 var(--ui); cursor: pointer; }
.offreActive.offreActive--flash { border-color: color-mix(in srgb, #ffb24c 50%, transparent); background: color-mix(in srgb, #ffb24c 12%, var(--v-surf)); box-shadow: 0 0 34px -14px #ffb24c; }
.offreActive.offreActive--flash .offreActive__k { color: #ffb24c; }
.offreActive.offreActive--flash .offreActive__dot { background: #ffb24c; box-shadow: 0 0 9px #ffb24c; }
@media (prefers-reduced-motion: reduce) { .flashZone__dot { animation: none; } }

/* ---------- Défi de volée (déblocage collectif) ---------- */
.defiZone { margin-top: 12px; }
.defiZone:empty { display: none; }
.defi__go { width: 100%; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--v-rad); border: 1px dashed color-mix(in srgb, var(--acc, var(--s-2)) 50%, var(--v-surf-line)); background: color-mix(in srgb, var(--acc, var(--s-2)) 7%, transparent); color: var(--v-fg); font: 600 15px/1 var(--ui); cursor: pointer; transition: border-color .2s, background-color .2s; }
.defi__go:hover { border-color: var(--acc, var(--s-2)); background: color-mix(in srgb, var(--acc, var(--s-2)) 13%, transparent); }
.defi__ic { color: var(--acc, var(--s-2)); font-size: 15px; }
.defiZone.on { padding: 16px 18px; border-radius: var(--v-rad); background: color-mix(in srgb, var(--dc, var(--acc)) 9%, var(--v-surf)); border: 1px solid color-mix(in srgb, var(--dc, var(--acc)) 38%, transparent); }
.defiZone.on.done { box-shadow: 0 0 36px -14px var(--dc, var(--acc)); }
.defi__k { display: flex; align-items: center; gap: 8px; font: 700 11px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--dc, var(--acc)); }
.defi__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dc, var(--acc)); box-shadow: 0 0 9px var(--dc, var(--acc)); }
.defi__t { margin-top: 9px; font-size: 14.5px; color: var(--v-fg); line-height: 1.4; }
.defi__bar { margin-top: 12px; height: 10px; border-radius: 99px; background: #ffffff12; overflow: hidden; }
.defi__bar i { display: block; height: 100%; border-radius: 99px; background: var(--dc, var(--acc)); box-shadow: 0 0 12px var(--dc, var(--acc)); transition: width .5s var(--v-ease); }
.defi__prog { margin-top: 9px; font-size: 13px; font-weight: 600; color: var(--v-fg2); }
.defi__stop { margin-top: 12px; border: 1px solid var(--v-line); background: none; color: var(--v-fg3); font: 600 12.5px/1 var(--ui); padding: 9px 16px; border-radius: var(--v-pill); cursor: pointer; }
.defi__stop:hover { color: var(--v-fg2); border-color: var(--v-fg3); }
.defiZone.pick { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid color-mix(in srgb, var(--acc, var(--s-2)) 35%, var(--v-surf-line)); }
.defiPick__t { font-size: 13.5px; font-weight: 600; color: var(--v-fg2); }
.defiPick__sel { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--v-fg2); font-weight: 600; }
.defiPick__sel select { min-height: 46px; padding: 0 14px; border-radius: var(--v-rad-s); border: 1px solid var(--v-surf-line); background: var(--v-surf); color: var(--v-fg); font: 500 15px/1 var(--ui); -webkit-appearance: none; appearance: none; }
.defiPick__lab { font-size: 12px; color: var(--v-fg3); font-weight: 600; margin-top: 2px; }
.defiPick__chips { display: flex; gap: 8px; }
.defiPick__c { flex: 1; padding: 11px 6px; border-radius: var(--v-rad-s); border: 1px solid var(--v-surf-line); background: #ffffff06; color: var(--v-fg2); font: 600 14px/1 var(--ui); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.defiPick__c.on { background: color-mix(in srgb, var(--acc, var(--s-2)) 16%, transparent); border-color: color-mix(in srgb, var(--acc, var(--s-2)) 50%, transparent); color: var(--v-fg); }
.defiPick__act { display: flex; gap: 10px; margin-top: 4px; }
.defiPick__launch { flex: 1; min-height: 48px; border: 0; border-radius: var(--v-pill); background: var(--acc, var(--s-2)); color: var(--v-bg); font: 700 15px/1 var(--ui); cursor: pointer; }
.defiPick__x { min-height: 48px; padding: 0 18px; border: 1px solid var(--v-surf-line); border-radius: var(--v-pill); background: none; color: var(--v-fg2); font: 600 14px/1 var(--ui); cursor: pointer; }

/* écran Mes offres */
.offres__sub { font-size: 14px; color: var(--v-fg2); line-height: 1.5; margin: -4px 0 4px; }
.offres__sub b { color: var(--v-fg); }
.offres { display: flex; flex-direction: column; gap: 10px; }
.offres__vide { color: var(--v-fg3); font-size: 14px; padding: 8px 2px; }
.poffre { display: flex; flex-direction: column; gap: 12px; background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-rad-s); padding: 14px 16px; transition: border-color .25s, box-shadow .25s; }
.poffre--on { border-color: color-mix(in srgb, var(--acc, var(--s-2)) 45%, transparent); box-shadow: 0 0 24px -14px var(--acc, var(--s-2)); }
.poffre__head { display: flex; align-items: center; gap: 14px; transition: opacity .25s; }
.poffre--pause .poffre__head { opacity: .42; }
.poffre__r { flex: none; font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--acc, var(--s-2)); min-width: 52px; }
.poffre__r i { font-style: normal; font-size: .6em; }
.poffre__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.poffre__id b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poffre__id span { font-size: 12.5px; color: var(--v-fg3); }
/* barre d'action : interrupteur à gauche, éditer / supprimer poussés à droite */
.poffre__act { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--v-line); }
.poffre__sp { flex: 1; }
.poffre__sw { display: inline-flex; align-items: center; gap: 10px; padding: 4px 2px; background: none; border: 0; cursor: pointer; color: var(--v-fg3); font: 600 12.5px/1 var(--ui); }
.poffre__sw > i { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: #ffffff1f; transition: background-color .25s var(--v-ease); }
.poffre__sw > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--v-fg3); transition: transform .25s var(--v-ease), background-color .25s; }
.poffre__sw[aria-checked="true"] { color: var(--v-fg); }
.poffre__sw[aria-checked="true"] > i { background: var(--acc, var(--s-2)); }
.poffre__sw[aria-checked="true"] > i::after { transform: translateX(18px); background: #fff; }
.poffre__sw em { font-style: normal; }
.poffre__sw:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 6px; }
.poffre__b { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--v-surf-line); background: none; color: var(--v-fg2); font-size: 14px; cursor: pointer; transition: border-color .2s, color .2s; }
.poffre__b:hover { border-color: var(--acc); color: var(--v-fg); }
.poffre__b--del:hover { border-color: #FF7094; color: #FF7094; }
@media (prefers-reduced-motion: reduce) {
  .poffre, .poffre__head, .poffre__sw > i, .poffre__sw > i::after { transition: none; }
}
.offreAdd { margin-top: 12px; width: 100%; min-height: 52px; border: 1px dashed var(--v-surf-line); border-radius: var(--v-rad-s); background: none; color: var(--v-fg2); font: 600 14.5px/1 var(--ui); cursor: pointer; transition: border-color .2s, color .2s; }
.offreAdd span { color: var(--acc, var(--s-2)); font-size: 18px; margin-right: 4px; }
.offreAdd:hover { border-color: var(--acc); color: var(--v-fg); }
.offreAdd[hidden] { display: none; }

/* formulaire d'offre (ajout / édition) */
.offreForm { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.offreForm[hidden] { display: none; }
.offreForm__t { font-family: var(--display); font-weight: 400; font-size: 18px; text-transform: uppercase; }
.offreForm__h { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.offreForm__err { color: #FF7094; font-size: 13px; }
.offreForm__act { display: flex; gap: 10px; margin-top: 2px; }
.offreForm__save { flex: 1; min-height: 50px; border: 0; border-radius: var(--v-pill); background: var(--v-fg); color: var(--v-bg); font: 600 15px/1 var(--ui); cursor: pointer; }
.offreForm__cancel { min-height: 50px; padding: 0 20px; border: 1px solid var(--v-surf-line); border-radius: var(--v-pill); background: none; color: var(--v-fg2); font: 600 15px/1 var(--ui); cursor: pointer; }

/* sélecteur de jours souple : raccourcis + 7 jours cochables librement */
.ofJours { gap: 9px; }
.ofJours__presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ofPreset { padding: 7px 12px; border-radius: var(--v-pill); border: 1px solid var(--v-surf-line); background: #ffffff06; color: var(--v-fg2); font: 600 12.5px/1 var(--ui); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.ofPreset:hover { border-color: var(--acc, var(--s-2)); color: var(--v-fg); }
.ofPreset[aria-pressed="true"] { background: color-mix(in srgb, var(--acc, var(--s-2)) 16%, transparent); border-color: color-mix(in srgb, var(--acc, var(--s-2)) 50%, transparent); color: var(--v-fg); }
.ofJours__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ofDay { padding: 11px 0; border-radius: 10px; border: 1px solid var(--v-surf-line); background: #ffffff06; color: var(--v-fg2); font: 600 12.5px/1 var(--ui); text-align: center; text-transform: capitalize; cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.ofDay:hover { border-color: var(--acc, var(--s-2)); color: var(--v-fg); }
.ofDay[aria-pressed="true"] { background: var(--acc, var(--s-2)); border-color: var(--acc, var(--s-2)); color: var(--v-bg); }
.ofPreset:focus-visible, .ofDay:focus-visible { outline: 2px solid var(--acc, var(--s-2)); outline-offset: 2px; }

.mois, .offre { background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-rad); padding: 22px; }
.mois__tete { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--v-fg3); }
.mois__ex { padding: 3px 9px; border-radius: var(--v-pill); background: #ffffff10; font-size: 11px; }
.mois__n { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.mois__n b { font-family: var(--display); font-weight: 400; font-size: clamp(52px, 16vw, 74px); line-height: .9; color: var(--acc, var(--s-2)); font-variant-numeric: tabular-nums; }
.mois__n span { font-size: 13px; color: var(--v-fg3); max-width: 11ch; line-height: 1.3; }
.mois__barres { display: flex; align-items: flex-end; gap: 5px; height: 92px; margin-top: 22px; }
.vbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.vbar i { width: 100%; max-width: 22px; height: var(--h); max-height: 78px; min-height: 3px; border-radius: 4px 4px 2px 2px; background: var(--c); transition: height .6s var(--v-ease); }
.vbar span { font-size: 9.5px; color: var(--v-fg3); font-variant-numeric: tabular-nums; }
.mois__leg { margin-top: 16px; font-size: 13px; color: var(--v-fg3); line-height: 1.5; }

.offre { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.offre__k { font-size: 13px; color: var(--v-fg3); }
.offre__r { font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1; margin-top: 4px; }
.offre__j { font-size: 12px; color: var(--v-fg3); text-align: right; max-width: 15ch; line-height: 1.4; }

.valider {
  min-height: 94px; border: 0; border-radius: var(--v-rad); cursor: pointer;
  background: var(--v-fg); color: var(--v-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  box-shadow: 0 18px 50px -14px var(--acc, var(--s-2)); transition: transform .3s var(--v-ease);
}
.valider:active { transform: scale(.98); }
.valider__t { font: 600 19px/1 var(--ui); }
.valider__s { font: 500 12.5px/1.2 var(--ui); color: #0b0b0c; opacity: .55; }
.proof__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 15px; letter-spacing: .03em; color: var(--v-fg2); }
.pro__note { font-size: 12.5px; color: var(--v-fg3); text-align: center; line-height: 1.5; }

/* l'écran de validation */
.scan { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; background: #0b0b0cea; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.scan[hidden] { display: none; }
.scan__box { width: 100%; max-width: 360px; min-height: 290px; display: grid; place-items: center; padding: 32px; background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-rad); }
.scan__state { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.scan__state p { color: var(--v-fg2); font-size: 15px; }
.scan__spin { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #ffffff20; border-top-color: var(--acc, var(--s-2)); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.scan__check { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #0b0b0c; font-size: 40px; font-weight: 700; }
.scan__volee { font-family: var(--display); font-weight: 400; font-size: 42px; line-height: 1; color: var(--c); }
.scan__state.ok .scan__check, .scan__state.ok .scan__volee { animation: pop .42s var(--v-ease) both; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.scan__close { background: none; border: 1px solid var(--v-line); color: var(--v-fg2); min-height: 48px; padding: 0 26px; border-radius: var(--v-pill); font: 600 15px/1 var(--ui); cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .vbar i { transition: none; }
  .scan__spin { animation-duration: 1.6s; }
  .scan__state.ok .scan__check, .scan__state.ok .scan__volee { animation: none; }
}

/* ---------- tableau de bord enrichi : KPI, flux, entrée des barres ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-rad-s); padding: 14px 14px 13px; display: flex; flex-direction: column; gap: 3px; }
.kpi__k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg3); }
.kpi__v { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--v-fg); font-variant-numeric: tabular-nums; }
.kpi__t { font-size: 11px; color: var(--v-fg3); font-style: normal; }
.kpi__t.up { color: #7CFF9E; }

.flux { padding: 22px; }
.flux__l { list-style: none; margin: 12px 0 0; }
.flux__row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--v-line); }
.flux__row:first-child { border-top: 0; }
.flux__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent); }
.flux__v { font-weight: 600; font-size: 14.5px; }
.flux__t { margin-left: auto; font-size: 12px; color: var(--v-fg3); font-variant-numeric: tabular-nums; }
.flux__row.neuf { animation: fluxIn .55s var(--v-ease); }
@keyframes fluxIn { from { opacity: 0; transform: translateY(-10px); } }

/* les barres montent à l'arrivée (et à chaque validation) */
.vbar i { animation: grimper .6s var(--v-ease) both; }
@keyframes grimper { from { height: 0; opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .vbar i { animation: none; }
  .flux__row.neuf { animation: none; }
}

/* ---------- validation réelle : saisie du code de passage ---------- */
.scan__state { width: 100%; }
.scan__q { color: var(--v-fg2); font-size: 15px; }
.scan__q b { color: var(--v-fg); }
.scan__in { width: 100%; text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 9vw, 36px); letter-spacing: .16em; text-transform: uppercase; color: var(--v-fg); background: #ffffff0a; border: 1px dashed var(--v-line); border-radius: var(--v-rad-s); padding: 16px 8px; caret-color: var(--acc); }
.scan__in::placeholder { color: var(--v-fg3); letter-spacing: .1em; font-size: .8em; }
.scan__in:focus { outline: none; border-color: color-mix(in srgb, var(--acc) 55%, var(--v-line)); background: #ffffff12; }
.scan__go { width: 100%; display: inline-flex; justify-content: center; }
.scan__demo { background: none; border: 0; color: var(--v-fg3); font: 500 13px/1.3 var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px; }
.scan__demo:hover { color: var(--v-fg2); }
.scan__ok2 { color: var(--v-fg3); font-size: 13px; }
.scan__state.err .scan__x { background: #ffffff14; color: var(--v-fg); animation: pop .42s var(--v-ease) both; }
@media (prefers-reduced-motion: reduce) { .scan__state.err .scan__x { animation: none; } }

/* ---------- heures creuses : quand Junior remplit (par heure) ---------- */
.creuxh { background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-rad); padding: 22px; }
.creuxh__leg { font-size: 13px; color: var(--v-fg3); line-height: 1.5; margin-top: 10px; }
.creuxh__leg b { color: var(--v-fg); }
.creuxh__bars { display: flex; align-items: flex-end; gap: 4px; height: 82px; margin-top: 16px; }
.hbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.hbar i { width: 100%; max-width: 16px; height: var(--h); min-height: 3px; border-radius: 3px; background: #ffffff1a; transition: height .6s var(--v-ease); }
.hbar span { font-size: 9px; color: var(--v-fg3); font-variant-numeric: tabular-nums; }
.hbar--c i { background: var(--acc, var(--s-2)); box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 50%, transparent); }
.hbar--c span { color: var(--v-fg2); }
/* reco de creux data-driven (sous le graphe) */
.creuxReco { margin-top: 16px; padding: 14px 16px; border-radius: var(--v-rad-s); border: 1px solid color-mix(in srgb, var(--acc, var(--s-2)) 35%, var(--v-surf-line)); background: color-mix(in srgb, var(--acc, var(--s-2)) 7%, transparent); display: flex; flex-direction: column; gap: 8px; }
.creuxReco[hidden] { display: none; }
.creuxReco__k { font: 700 11px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--acc, var(--s-2)); }
.creuxReco__t { font-size: 13.5px; color: var(--v-fg2); line-height: 1.5; }
.creuxReco__t b { color: var(--v-fg); }
.creuxReco__b { align-self: flex-start; margin-top: 2px; padding: 10px 16px; border-radius: var(--v-pill); border: 0; background: var(--acc, var(--s-2)); color: var(--v-bg); font: 600 13px/1 var(--ui); cursor: pointer; transition: transform .15s var(--v-ease); }
.creuxReco__b:active { transform: scale(.97); }

/* =====================================================================
   DESKTOP — deux vues. « Valider » : l'action en grand, empilée et centrée.
   « Mon mois » : bandeau KPI + les deux graphiques côte à côte.
   ===================================================================== */
@media (min-width: 900px) {
  .pro { max-width: 980px; min-height: 100svh; padding: 44px 40px; }
  .pro__m { font-size: 19px; }
  .pro__shop { font-size: 15px; }
  .proseg button { font-size: 15px; padding: 11px 28px; }
  .proof__h { font-size: 17px; }
  .valider { min-height: 120px; }
  .valider__t { font-size: 22px; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .kpi { padding: 18px 18px 16px; }
  .kpi__v { font-size: 32px; }
  .kpi__k { font-size: 11px; }
  .kpi__t { font-size: 11.5px; }
  .moisrow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .mois { padding: 30px; }
  .mois__n b { font-size: 80px; }
  .mois__barres { height: 140px; gap: 8px; margin-top: 28px; }
  .vbar i { max-width: 32px; max-height: 118px; }
  .vbar span { font-size: 11px; }
  .creuxh__bars { height: 110px; }
  .hbar i { max-width: 22px; }
  .pro__note { text-align: left; }
  .scan__box { max-width: 420px; min-height: 320px; }
}
@media (min-width: 900px) and (hover: hover) {
  .valider { transition: transform .3s var(--v-ease), box-shadow .3s; }
  .valider:hover { transform: translateY(-2px); box-shadow: 0 22px 54px -12px var(--acc, var(--s-2)); }
}

/* ---------- sélecteur de langue (en-tête du comptoir + onboarding) ---------- */
.pro__right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pro__right .pro__shop { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proLang { flex: none; display: inline-flex; gap: 3px; background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-pill); padding: 3px; }
.proLang button { border: 0; background: none; color: var(--v-fg3); font: 600 12px/1 var(--ui); padding: 6px 9px; border-radius: var(--v-pill); cursor: pointer; transition: color .2s, background-color .2s; }
.proLang button[aria-pressed="true"] { background: var(--acc, var(--s-2)); color: var(--v-bg); }
.proLang--onb { align-self: flex-end; margin-bottom: 2px; }
.proLang--reg { align-self: flex-start; }
@media (min-width: 900px) {
  .proLang button { font-size: 13px; padding: 7px 12px; }
}

/* ---------- bouton menu réglages (en-tête) ---------- */
.proMenu { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--v-surf-line); background: var(--v-surf); color: var(--v-fg2); cursor: pointer; transition: border-color .2s, color .2s; }
.proMenu svg { width: 19px; height: 19px; display: block; }
.proMenu:hover { border-color: var(--acc); color: var(--v-fg); }
.proMenu:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ---------- overlay réglages / compte (calqué sur .scan) ---------- */
.reglages {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: #0b0b0cea; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.reglages[hidden] { display: none; }
.reglages__box {
  width: 100%; max-width: 420px; max-height: calc(100svh - 112px); overflow-y: auto;
  -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 22px;
  padding: 26px; background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-rad);
}
.reglages__h { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; text-transform: uppercase; }
.reglages__sec { display: flex; flex-direction: column; gap: 12px; }
.reglages__sec + .reglages__sec { padding-top: 22px; border-top: 1px solid var(--v-line); }
.reglages__th { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg3); }
.reglages__err { color: #FF7094; font-size: 13px; }
.reglages__save { min-height: 50px; margin-top: 2px; border: 0; border-radius: var(--v-pill); background: var(--v-fg); color: var(--v-bg); font: 600 15px/1 var(--ui); cursor: pointer; transition: transform .2s var(--v-ease); }
.reglages__save:active { transform: scale(.98); }
.reglages__aide { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; color: var(--v-fg2); font-size: 13.5px; line-height: 1.45; }
.reglages__aide li::marker { color: var(--acc, var(--s-2)); font-weight: 700; }
.reglages__note { font-size: 13px; color: var(--v-fg3); line-height: 1.5; }
.reglages__contact { color: var(--v-fg2); }
.reglages__out { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 14px 16px; text-align: left; border-radius: var(--v-rad-s); border: 1px solid #ff8a8a33; background: none; color: #FF8A8A; font: inherit; cursor: pointer; transition: border-color .2s; }
.reglages__out:hover { border-color: #ff8a8a77; }
.reglages__out b { font-weight: 600; font-size: 15px; }
.reglages__out span { font-size: 12.5px; color: var(--v-fg3); }
.reglages__close { flex: none; background: none; border: 1px solid var(--v-line); color: var(--v-fg2); min-height: 48px; padding: 0 26px; border-radius: var(--v-pill); font: 600 15px/1 var(--ui); cursor: pointer; }
.reglages__close:hover { color: var(--v-fg); }
@media (prefers-reduced-motion: reduce) { .reglages__save { transition: none; } }
/* téléphone : pas de sommaire, les sections empilées (le conteneur de droite s'efface) */
.reglages__pane { display: contents; }
.reglages__nav { display: contents; }   /* le titre reste, le sommaire non */
.reglages__menu, .reglages__x { display: none; }
.reglages__pane > section[hidden] { display: none; }
.abo__host { display: none; }
/* ordinateur : une boîte large, le sommaire à gauche, une section à la fois à droite */
@media (min-width: 900px) {
  .proMenu { width: 40px; height: 40px; }
  .proMenu svg { width: 20px; height: 20px; }
  .reglages { padding: 40px; }
  .reglages__box { max-width: 960px; height: min(720px, 100svh - 80px); max-height: none; padding: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0; overflow: hidden; }
  .reglages__nav { display: flex; flex-direction: column; gap: 18px; padding: 26px 16px; background: #ffffff05; border-right: 1px solid var(--v-line); }
  .reglages__nav .reglages__h { padding: 0 12px; font-size: 24px; }
  .reglages__menu { display: flex; flex-direction: column; gap: 2px; }
  .reglages__menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: none; color: var(--v-fg2); font: 600 14px/1.2 var(--ui); text-align: left; cursor: pointer; transition: background-color .2s, color .2s; }
  .reglages__menu button small { font-size: 12px; font-weight: 500; color: var(--v-fg3); }
  .reglages__menu button:hover { background: #ffffff0a; color: var(--v-fg); }
  .reglages__menu button[aria-current="true"] { background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--v-fg); }
  .reglages__menu button[aria-current="true"] small { color: var(--acc); }
  .reglages__menu button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
  .reglages__pane { display: flex; flex-direction: column; gap: 22px; position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 30px 36px 36px; }
  .reglages__pane > section { max-width: 620px; }
  .reglages__pane > .reglages__sec + .reglages__sec { padding-top: 0; border-top: 0; }
  .reglages__x { display: grid; place-items: center; position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--v-line); background: #ffffff0a; color: var(--v-fg2); font-size: 19px; line-height: 1; cursor: pointer; }
  .reglages__x:hover { color: var(--v-fg); border-color: var(--v-fg3); }
  .reglages__close { display: none; }
  .reglages__sec--abo .regAbo { display: none; }   /* la ligne ne sert que sur téléphone ; la règle de base vient plus bas dans la feuille */
  .abo__host { display: flex; flex-direction: column; gap: 18px; }
  .abo__tete--inline .mois__ex { white-space: nowrap; }
  .abo__tete--inline { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 36px; }
  .abo__tete--inline .reglages__th { grid-column: 2; }
  .abo__tete--inline .abo__retour { grid-column: 1; }
  .abo__tete--inline .mois__ex { grid-column: 3; }
  .abo__host .abo__bar { margin-inline: -36px; padding-inline: 36px; bottom: -36px; }
}

/* ---------- Mon abonnement ----------
   Dans les réglages, une seule ligne (la formule et ce qui vient) ; le reste vit dans un
   panneau dédié, #abo, rendu par abonnement.js. Une hiérarchie : un nom en grand, un prix
   en grand, tout le reste en 13-14 px ; un seul bouton plein par vue. Même registre sobre
   que le comptoir, un seul accent. */
.reglages__sec--abo { padding-bottom: 0; }
.regAbo { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'k chev' 'v chev' 's chev'; align-items: center; gap: 3px 12px; width: 100%; padding: 14px 16px; text-align: left; border-radius: var(--v-rad-s); border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--v-surf-line)); background: color-mix(in srgb, var(--acc) 7%, transparent); color: var(--v-fg); font: inherit; cursor: pointer; transition: border-color .2s; }
.regAbo:hover { border-color: var(--acc); }
.regAbo:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.regAbo__k { grid-area: k; display: flex; align-items: center; gap: 8px; font: 700 10.5px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.regAbo__k .mois__ex { text-transform: none; letter-spacing: 0; font-weight: 500; }
.regAbo__v { grid-area: v; font-size: 15.5px; font-weight: 600; }
.regAbo__s { grid-area: s; font-size: 12.5px; color: var(--v-fg3); }
.regAbo__chev { grid-area: chev; font-style: normal; font-size: 22px; color: var(--v-fg3); }

.abo { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); background: #0b0b0cea; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.abo[hidden] { display: none; }
.abo__box { position: relative; width: 100%; max-width: 560px; max-height: calc(100svh - 56px); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 20px; padding: 22px 24px 26px; background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-rad); }
.abo__tete { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 8px; }
.abo__h { grid-column: 2; font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; text-transform: uppercase; text-align: center; }
.abo__retour, .abo__x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--v-line); background: #ffffff0a; color: var(--v-fg2); font-size: 19px; line-height: 1; cursor: pointer; }
.abo__retour { grid-column: 1; }
.abo__retour[hidden] { display: none; }
.abo__x { grid-column: 3; }
.abo__retour:hover, .abo__x:hover { color: var(--v-fg); border-color: var(--v-fg3); }
.abo__vue { display: flex; flex-direction: column; gap: 18px; }
.abo__k { display: block; font: 700 10.5px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg3); }
.abo__k em { font-style: normal; color: var(--acc); }
.abo__k--acc { color: var(--acc); }
.abo__note { font-size: 12.5px; color: var(--v-fg3); line-height: 1.5; }
.abo__note[hidden] { display: none; }
.abo__lien { background: none; border: 0; padding: 0; color: var(--acc); font: 600 13px/1 var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.abo__lien--mute { color: var(--v-fg3); }
.abo__lien--mute:hover { color: #FF8A8A; }
.abo__btn { min-height: 44px; padding: 0 18px; border-radius: var(--v-pill); border: 1px solid var(--v-line); background: #ffffff08; color: var(--v-fg); font: 600 14px/1 var(--ui); cursor: pointer; transition: border-color .2s, background-color .2s, transform .15s var(--v-ease); }
.abo__btn:hover { border-color: var(--acc); }
.abo__btn:active { transform: scale(.98); }
.abo__btn--acc { background: var(--acc); color: var(--v-bg); border-color: transparent; }
.abo__btn--out { color: #FF8A8A; border-color: #ff8a8a44; background: none; }
/* la carte de la formule */
.plan { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; border-radius: var(--v-rad); border: 1px solid var(--v-surf-line); background: #ffffff06; }
.plan--fond { border-color: color-mix(in srgb, var(--acc) 40%, var(--v-surf-line)); box-shadow: 0 0 40px -18px var(--acc); }
.plan__haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.plan__nom { display: block; margin-top: 6px; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; }
.plan__prix { flex: none; margin: 0; text-align: right; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; }
.plan__prix i { display: block; margin-top: 5px; font-style: normal; font-family: var(--ui); font-weight: 600; font-size: 11px; letter-spacing: .04em; color: var(--v-fg3); }
.plan__suite { font-size: 14px; color: var(--v-fg); }
.plan__barre { height: 5px; margin-top: 2px; border-radius: 999px; background: #ffffff12; overflow: hidden; }
.plan__barre i { display: block; height: 100%; width: var(--p, 0%); border-radius: 999px; background: var(--acc); transition: width .6s var(--v-ease); }
.plan__periode { font-size: 12.5px; color: var(--v-fg3); }
.plan__prevu { font-size: 13px; color: var(--v-fg2); line-height: 1.5; }
.plan__ok { font-size: 13px; color: #7CFF9E; }
.plan__acts { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
/* les lignes de réglage */
.rows { margin: 0; display: flex; flex-direction: column; }
.rows > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--v-line); font-size: 13.5px; }
.rows > div:first-child { border-top: 0; padding-top: 0; }
.rows dt { color: var(--v-fg3); }
.rows dd { margin: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; text-align: right; color: var(--v-fg); line-height: 1.4; }
/* les factures */
.abo__sec { display: flex; flex-direction: column; gap: 8px; }
.fact { list-style: none; margin: 0; padding: 0; }
.fact li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--v-line); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.fact li:first-child { border-top: 0; padding-top: 2px; }
.fact__d { color: var(--v-fg2); white-space: nowrap; }
.fact__l { color: var(--v-fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact__m { font-weight: 600; white-space: nowrap; }
.fact__s { padding: 3px 8px; border-radius: var(--v-pill); background: #7cff9e1a; color: #7CFF9E; font: 700 10.5px/1 var(--ui); letter-spacing: .04em; text-transform: uppercase; }
/* la montée en gamme */
.up { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; border-radius: var(--v-rad-s); border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--v-surf-line)); background: color-mix(in srgb, var(--acc) 7%, transparent); font-size: 13.5px; color: var(--v-fg2); line-height: 1.5; }
/* changer de formule : des rangées, l'actuelle grisée, la choisie allumée, la barre de confirmation en bas */
.choix { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.choix__c { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-radius: var(--v-rad-s); border: 1px solid var(--v-surf-line); background: #ffffff06; color: var(--v-fg); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s; }
.choix__c:hover:not(:disabled) { border-color: color-mix(in srgb, var(--acc) 55%, var(--v-surf-line)); }
.choix__c:disabled { cursor: default; opacity: .55; }
.choix__c--on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.choix__t { font-size: 15px; font-weight: 600; }
.choix__t em { margin-left: 8px; padding: 3px 7px; border-radius: var(--v-pill); background: #ffffff12; color: var(--v-fg3); font: 700 10.5px/1 var(--ui); letter-spacing: .04em; text-transform: uppercase; font-style: normal; }
.choix__p { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; white-space: nowrap; }
.choix__p i { margin-left: 5px; font-style: normal; font-family: var(--ui); font-weight: 600; font-size: 11px; color: var(--v-fg3); }
.abo__bar { position: sticky; bottom: -26px; display: flex; flex-direction: column; gap: 10px; margin: 4px -24px -26px; padding: 14px 24px calc(18px + env(safe-area-inset-bottom)); background: var(--v-surf); border-top: 1px solid var(--v-line); font-size: 13.5px; color: var(--v-fg2); line-height: 1.5; }
.abo__bar[hidden] { display: none; }
.abo__bar b { color: var(--v-fg); }
.abo__bar div { display: flex; flex-wrap: wrap; gap: 8px; }
.abo__confirm { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: var(--v-rad-s); border: 1px solid #ff8a8a33; background: #ff8a8a0a; font-size: 14px; color: var(--v-fg2); line-height: 1.55; }
.abo__confirm div { display: flex; flex-wrap: wrap; gap: 8px; }
/* la ligne d'état dans « Mon mois » */
.aboLigne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); font-size: 13px; color: var(--v-fg3); line-height: 1.45; }
.aboLigne[hidden] { display: none; }
.aboLigne b { color: var(--v-fg); font-weight: 600; }
.aboLigne .abo__lien { flex: none; }
/* téléphone : le panneau devient une feuille pleine hauteur */
@media (max-width: 640px) {
  .abo { padding: 0; align-items: stretch; }
  .abo__box { max-width: none; max-height: none; border-radius: 0; border: 0; padding: max(18px, env(safe-area-inset-top)) 18px 24px; }
  .abo__bar { margin-inline: -18px; padding-inline: 18px; }
  .fact li { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'd l m' 'd s pdf'; row-gap: 4px; }
  .fact__d { grid-area: d; } .fact__l { grid-area: l; } .fact__m { grid-area: m; } .fact__s { grid-area: s; justify-self: start; } .fact li .abo__lien { grid-area: pdf; justify-self: end; }
  .rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rows dd { justify-content: flex-start; text-align: left; }
}

/* ---------- Onboarding comptoir : DA « PRO SOBRE » — distincte du côté jeune ----------
   Côté jeune = la couleur (le spectre, chacun sa volée, holographique, joueur).
   Côté commerçant = la SCÈNE qui accueille les couleurs : graphite, UN seul accent
   froid (indigo), halo discret, mouvement contenu. Un outil de travail, pas un jouet. */
.proOnb { position: relative; overflow: hidden; --acc: #8a90ff; }
.proOnb__aura { position: absolute; inset: -8%; z-index: 0; pointer-events: none; }
.proOnb__aura i { position: absolute; border-radius: 50%; filter: blur(96px); will-change: transform; background: var(--acc); }
.proOnb__aura i:nth-child(1) { width: 52vmin; height: 52vmin; left: -8%; top: -6%; opacity: .14; animation: pAuraA 24s ease-in-out infinite alternate; }
.proOnb__aura i:nth-child(2) { width: 44vmin; height: 44vmin; right: -10%; top: 4%; opacity: .1; animation: pAuraB 28s ease-in-out infinite alternate; }
.proOnb__aura i:nth-child(3) { width: 58vmin; height: 58vmin; left: 32%; bottom: -20%; opacity: .07; animation: pAuraC 32s ease-in-out infinite alternate; }
@keyframes pAuraA { from { transform: translate(-3%,-2%) scale(1); } to { transform: translate(5%,4%) scale(1.08); } }
@keyframes pAuraB { from { transform: translate(3%,0) scale(1.06); } to { transform: translate(-4%,5%) scale(1); } }
@keyframes pAuraC { from { transform: translate(0,3%) scale(1); } to { transform: translate(-5%,-4%) scale(1.1); } }
.proOnb__box { position: relative; z-index: 1; }
.proOnb__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 2px; padding: 6px 13px 6px 11px; border-radius: 999px; font-weight: 700; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 36%, transparent); }
.proOnb__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 9px var(--acc); }
.proOnb__acc { color: var(--acc); -webkit-text-fill-color: var(--acc); background: none; }
.proOnb__pts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.proOnb__pts li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--v-fg2); background: #ffffff06; border: 1px solid var(--v-surf-line); border-radius: 999px; padding: 7px 13px; }
.proOnb__pts li::before { content: "✓"; color: var(--acc); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .proOnb__aura i { animation: none; } }

/* Propositions d'offres contextuelles (par type de commerce × heure) */
.offresSugg { margin: 4px 0 14px; }
.offresSugg__t { font-size: 13px; color: var(--v-fg3); margin-bottom: 10px; }
.offresSugg__list { display: flex; flex-wrap: wrap; gap: 9px; }
.suggChip { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 10px 14px; border-radius: 14px; background: #ffffff07; border: 1px solid var(--v-surf-line); cursor: pointer; transition: border-color .2s var(--v-ease), transform .15s var(--v-ease); }
.suggChip:hover { border-color: color-mix(in srgb, var(--acc, var(--s-2)) 50%, var(--v-surf-line)); }
.suggChip:active { transform: scale(.97); }
.suggChip b { font-weight: 700; font-size: 14px; color: var(--v-fg); }
.suggChip span { font-size: 12px; color: var(--v-fg3); }
/* suggestion événement/saison : léger halo accent, elle est « du moment » */
.suggChip--saison { border-color: color-mix(in srgb, var(--acc, var(--s-2)) 42%, var(--v-surf-line)); background: color-mix(in srgb, var(--acc, var(--s-2)) 8%, transparent); }

/* Le scanner caméra du comptoir : la caméra arrière, avec un viseur, pour lire le QR du jeune. */
.scan__cambox { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: #000; }
.scan__cambox video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan__viseur { position: absolute; inset: 18%; border: 2px solid #ffffffcc; border-radius: 16px; box-shadow: 0 0 0 100vmax #0000006e; pointer-events: none; }
.scan__cam .scan__q { margin-top: 2px; }

/* ---------- Installer le comptoir, sans store (prototype/src/ui/installer.js) ----------
   Carte sous la vue « Valider » : bouton natif quand le navigateur l'offre, guide iPhone ou
   générique sinon ; disparaît une fois le comptoir installé. */
.proInst { display: grid; gap: 10px; padding: 18px 20px; margin-top: 14px; }
.proInst[hidden] { display: none; }
.proInst__h { font: 600 15px/1.2 var(--ui); }
.proInst__p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--v-fg3); }
.proInst__p b, .proInst__pas b { color: var(--v-fg); font-weight: 600; }
.proInst__btn { justify-self: start; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--v-pill); background: var(--v-fg); color: var(--v-bg); font: 600 14px/1 var(--ui); cursor: pointer; box-shadow: 0 14px 40px -12px var(--acc, var(--s-2)); transition: transform .3s var(--v-ease); }
.proInst__btn:active { transform: scale(.98); }
.proInst__btn[hidden] { display: none; }
.proInst__pas { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; color: var(--v-fg2); }
.proInst__pas[hidden] { display: none; }

/* ---------- « Nouvelle version » (prototype/src/ui/maj.js) ----------
   Pastille discrète en haut, cachée tant que la fenêtre est à jour. */
.maj { position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); z-index: 1200; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: var(--v-pill); background: var(--v-fg); color: var(--v-bg); font: 600 13px/1 var(--ui); white-space: nowrap; box-shadow: 0 14px 40px -12px #000c; }
.maj[hidden] { display: none; }
.maj button { border: 0; border-radius: var(--v-pill); padding: 8px 12px; background: var(--acc, var(--s-2)); color: #0b0b0c; font: 700 12.5px/1 var(--ui); cursor: pointer; }