/* app.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/licence.css ---- */
/* LE DOCUMENT.
   Repris de la charte sans écart de grammaire, avec trois corrections.

   1. La charte dimensionne l'année en `clamp(56px, 20%, 96px)`. En CSS, un
      pourcentage de `font-size` se résout sur le corps du PARENT, pas sur la
      largeur : 20 % de 15px font 3px, le clamp retombe sur son plancher, et
      l'année est figée à 56px quelle que soit la taille de la carte. La borne
      haute n'a jamais servi. Ici on mesure en `cqw` — pour cent de la largeur
      du conteneur — ce qui est l'outil juste et rend l'échelle réellement
      fluide.
   2. L'année est plus grande que dans la charte. C'est elle qui déclenche la
      conversation au comptoir, donc elle doit être lisible à un mètre, de
      travers, dans la main de quelqu'un d'autre.
   3. La MRZ fait ses trois lignes de trente signes, bord à bord, sur sa propre
      zone. Une MRZ qui ne remplit pas la largeur n'est pas une MRZ, c'est une
      légende. */

/* Le conteneur de mesure est le CADRE, pas le document : `container-type`
   impose un confinement de mise en page, et on ne veut pas l'imposer à la
   carte qui porte les calques en position absolue. */
.scene3d {
  perspective: 1500px;
  perspective-origin: 50% 42%;
  container-type: inline-size;
}

.lic {
  --vol: var(--acc);
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.54;
  border-radius: var(--r-doc);
  overflow: hidden;
  background: linear-gradient(168deg, var(--s3), var(--s1) 55%, #08080a);
  border: 1px solid #33333a;
  will-change: transform;
  /* `pan-y` et non `none` : sans cette ligne, un doigt qui glisse sur la carte
     est interprété par le navigateur comme un défilement, il envoie un
     `pointercancel` et la carte cesse de recevoir les mouvements — le repli au
     doigt ne peut alors PAS fonctionner sur téléphone, ce qui est exactement ce
     qu'on a observé. On réclame donc l'axe horizontal pour la carte et on laisse
     l'axe vertical à la page : glisser de côté révèle, glisser vers le bas
     défile. `none` aurait piégé le doigt et empêché de quitter la section. */
  touch-action: pan-y;
  /* Sans ceci, un doigt maintenu sur la MRZ déclenche la loupe de sélection
     d'iOS et la poignée bleue par-dessus le document : le geste est perdu et
     l'illusion de l'objet avec. La MRZ reste sélectionnable là où on en a
     réellement besoin, dans le banc d'essai, qui l'affiche en clair. */
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4.9cqw;
  box-shadow: 0 34px 70px -28px #000c, 0 2px 0 #ffffff0a inset;
  transition: box-shadow .5s var(--ease), filter .7s var(--ease);
}
.lic > * { position: relative; z-index: 4; }

/* Au repos la licence est GRISE. La teinte de volée n'apparaît qu'à la
   révélation — inclinaison, scan, plein écran. La couleur n'est pas un fond,
   c'est un événement : on ne la voit qu'en manipulant l'objet, donc on le
   manipule, donc on le montre. (Principe des passeports norvégiens de Neue.) */
.lic svg.g {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: .5;
  color: #55555c;
  transition: color .75s var(--ease), opacity .75s var(--ease);
}
.lic .yr, .lic .stamp { transition: color .75s var(--ease); }
.lic .yr { color: var(--ink); }
.lic .stamp { color: var(--ink-3); }
.lic.rev svg.g { color: var(--vol); opacity: .66; }
.lic.rev .yr, .lic.rev .stamp { color: var(--vol); }
/* Mode gyroscope : la carte s'allume et RETOMBE EN GRIS quasi instantanément
   (le pointeur desktop et la révélation de volée gardent leurs fondus lents). */
.lic.vivgyro .holo { transition: opacity .13s var(--ease); }
.lic.vivgyro .glare { transition: opacity .11s var(--ease); }
.lic.vivgyro .yr, .lic.vivgyro .stamp { transition: color .15s var(--ease); }
.lic.vivgyro svg.g { transition: color .15s var(--ease), opacity .15s var(--ease); }

/* Feuille holographique — une BANDE, pas un vernis sur toute la carte. Un foil
   qui couvre tout le document le repeint en aplat et lui fait perdre sa nature
   de papier ; en bande il reste une pièce rapportée, comme sur un billet. La
   bande est à droite : l'année, le numéro et la MRZ gardent le fond sombre et
   restent lisibles, et c'est le tracé qui passe dessous — la grammaire exacte
   d'un billet. Le poinçon perce la bande.
   Le spectre est construit sur la teinte de volée et ses deux voisines à deux
   rangs (--h1/--h2/--h3, posées par le JS depuis spectre()). */
.lic .holo {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 27%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .17;
  background:
    linear-gradient(196deg, transparent 30%, #ffffff5e 46%, #ffffff12 54%, transparent 70%),
    repeating-linear-gradient(104deg, transparent 0 1.9%, #ffffff3d 2.25%, transparent 2.8%),
    conic-gradient(from 195deg at 44% 36%,
      var(--h1, #3cd6ff), var(--h2, #a87cff) 118deg,
      var(--h3, #ff7ce0) 236deg, var(--h1, #3cd6ff) 360deg);
  background-size: 180% 260%, 240% 240%, 200% 200%;
  border-left: 1px solid #ffffff14;
  transition: opacity .55s var(--ease);
}

/* Le reflet : une tache de lumière qui suit la main. En `soft-light` elle
   éclaircit sans laver, donc le document garde sa matière. */
.lic .glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0;
  background: radial-gradient(34% 30% at var(--gx, 50%) var(--gy, 42%), #fff 0%, #ffffff40 32%, transparent 66%);
  transition: opacity .45s var(--ease);
}

/* ---------- en-tête du document ---------- */
.lic .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 3cqw; }
.lic .wm { font-family: var(--display); font-size: 5cqw; letter-spacing: .04em; line-height: 1; }
.lic .wm i { font-style: normal; color: var(--ink-3); }
.lic .stamp {
  font-family: var(--mrz);
  font-size: 2.4cqw;
  letter-spacing: .11em;
  border: 1px solid currentColor;
  border-radius: var(--r);
  padding: 1.6cqw 2.2cqw;
  transform: rotate(-4.5deg);
  text-align: center;
  line-height: 1.35;
  opacity: .92;
  flex: none;
}

/* ---------- le héros : l'année ---------- */
/* Le masque de révélation doit laisser passer les jambages. Sans le couple
   padding-bottom / margin-bottom négatif, un `j` ou un `g` se fait couper au
   ras — et sur un chiffre, c'est la panse du 3 et du 9 qui saute. */
.lic .yr-mask { overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.lic .yr {
  font-family: var(--display);
  /* 39cqw cale les quatre chiffres à ~88 % de la largeur utile. Le corps ne se
     devine pas : Anton est une étroite, donc une valeur qui « a l'air grande »
     laisse un tiers de la ligne vide. `tabular-nums` garantit que toutes les
     volées font la même largeur, donc le réglage vaut pour les dix. */
  font-size: 39cqw;
  line-height: .78;
  letter-spacing: .005em;
  font-variant-numeric: tabular-nums;
}

/* Le numéro à palettes : chaque chiffre est une colonne qui défile et s'arrête.
   La bande porte DEUX cycles de 0 à 9, pas un seul : avec un cycle unique, la
   colonne doit dépasser le dernier chiffre puis revenir en place d'un coup, et
   on voit un blanc juste avant l'arrivée. Avec deux cycles elle atterrit sur le
   bon chiffre du second tour, sans saut et sans trou. */
.lic .flap {
  display: inline-flex;
  gap: .02em;
  font-family: var(--display);
  font-size: 7.6cqw;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--ink);
  margin-top: 2.6cqw;
}
.lic .flap .col { position: relative; height: 1em; overflow: hidden; width: .62em; }
.lic .flap .col u { position: absolute; left: 0; top: 0; text-decoration: none; display: block; }
.lic .flap .col u b { display: block; height: 1em; font-weight: 400; text-align: center; }

.lic .sec {
  font-family: var(--mrz);
  font-size: 2.85cqw;
  letter-spacing: .15em;
  color: var(--ink-2);
  margin-top: 2.4cqw;
}

/* ---------- la zone lisible en machine ---------- */
/* Sur un vrai document la MRZ est posée sur sa propre plage, détachée du champ
   graphique : c'est une zone de lecture, pas une légende. Ici c'est un fond
   plus sombre et un filet, et la bande holographique ne la couvre pas. */
.lic .mrz {
  margin: 0 -4.9cqw -4.9cqw;
  padding: 3.2cqw 4.9cqw 3.6cqw;
  background: #07070880;
  border-top: 1px solid #ffffff10;
  z-index: 5;
}
.lic .mrz span {
  display: block;
  font-family: var(--mrz);
  font-weight: 400;
  /* 4,5cqw met les trente signes à ~96 % de la zone : bord à bord, ce qui est la
     seule proportion juste pour une MRZ, avec la marge qu'exige `white-space:pre`
     sous le `overflow:hidden` de la carte. */
  font-size: 4.5cqw;
  letter-spacing: .035em;
  line-height: 1.34;
  color: var(--ink-2);
  white-space: pre;
  font-variant-ligatures: none;
}
.lic .mrz span + span { color: var(--ink-3); }

/* ---------- le poinçon et les encoches ---------- */
/* Le poinçon est une découpe réelle : on voit le fond à travers, donc il est
   plus sombre que n'importe quelle valeur de la carte, avec une ombre portée
   INTÉRIEURE qui donne l'épaisseur du support. */
.lic .punch {
  position: absolute;
  z-index: 6;
  width: 4.6cqw;
  height: 4.6cqw;
  border-radius: 50%;
  background: #040405;
  box-shadow: inset 0 2px 3px #000, 0 0 0 1px #3a3a42;
  right: 12%;
  top: 63%;
}
/* Une encoche par saison renouvelée, empilée sur le flanc droit. C'est le seul
   compteur du document : on ne lit pas une date d'entrée, on compte des crans. */
/* Une encoche est une DÉCOUPE : sans arête claire sur son bord gauche, elle est
   du noir sur du noir et le compteur de saisons devient invisible — le défaut
   exact qu'on avait au premier rendu. */
.lic .notch {
  position: absolute;
  z-index: 6;
  right: -1px;
  width: 2.2cqw;
  height: 4.6cqw;
  border-radius: 3px 0 0 3px;
  background: var(--s0);
  box-shadow: inset 2px 0 3px #000, -1px 0 0 #ffffff2e;
}

/* ---------- la licence échue ---------- */
/* À vingt-six ans elle est perforée EN TRAVERS, définitivement. La perforation
   passe par-dessus tout, y compris la MRZ : un document annulé reste lisible à
   l'œil mais ne peut plus être présenté comme valide. Le gris n'est pas un
   effet, c'est l'état : la teinte de volée ne revient plus. */
.lic.perf { filter: saturate(.12) brightness(.86); }
.lic.perf .holo { opacity: .05 !important; }
.lic.perf::after {
  content: '';
  position: absolute;
  z-index: 7;
  left: -12%;
  right: -12%;
  top: 46%;
  height: 4.4cqw;
  transform: rotate(-19deg);
  background:
    radial-gradient(circle at 50% 50%, #040405 0 38%, transparent 40%) 0 50% / 8.6cqw 100% repeat-x;
  filter: drop-shadow(0 1px 0 #3a3a42);
}

/* ---------- phases de la délivrance ---------- */
/* La séquence ne cache rien par du JavaScript : chaque phase est un état CSS,
   donc l'écran est toujours cohérent, y compris si on le photographie au
   milieu, et il reste correct sans JS une fois la classe finale posée. */
.lic[data-phase] .yr,
.lic[data-phase] .flap,
.lic[data-phase] .sec,
.lic[data-phase] .stamp,
.lic[data-phase] .mrz,
.lic[data-phase] .punch,
.lic[data-phase] .notch { visibility: hidden; }

.lic[data-phase='trace'] .stamp,
.lic[data-phase='mrz'] .stamp,
.lic[data-phase='annee'] .stamp,
.lic[data-phase='poincon'] .stamp,
.lic[data-phase='fini'] .stamp { visibility: visible; }

.lic[data-phase='mrz'] .mrz,
.lic[data-phase='annee'] .mrz,
.lic[data-phase='poincon'] .mrz,
.lic[data-phase='fini'] .mrz { visibility: visible; }

.lic[data-phase='annee'] .yr,
.lic[data-phase='annee'] .flap,
.lic[data-phase='annee'] .sec,
.lic[data-phase='poincon'] .yr,
.lic[data-phase='poincon'] .flap,
.lic[data-phase='poincon'] .sec,
.lic[data-phase='fini'] .yr,
.lic[data-phase='fini'] .flap,
.lic[data-phase='fini'] .sec { visibility: visible; }

.lic[data-phase='poincon'] .punch,
.lic[data-phase='poincon'] .notch,
.lic[data-phase='fini'] .punch,
.lic[data-phase='fini'] .notch { visibility: visible; }

/* ---- 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; }