/* vitrine.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: 960px) {
  .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; } }

/* ---- vitrine/vitrine.css ---- */
/* LA VITRINE JUNIOR — composition des quatre pages (accueil, offres, enseignes, licence).
   Les jetons, la barre, les boutons, le titre irisé et le champ de lumière
   viennent de prototype/src/styles/volee.css ; la licence de licence.css.
   Les cartes d'offres (.tcard, .treco, .tcomp, .adeal, .aflash, .accHeure,
   .ens__logo) sont REPRISES de app/app.css, pour que la démo montre exactement
   ce que l'app montre. Quand l'app change, on reporte ici. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 132px; }
body {
  background: var(--v-bg);
  color: var(--v-fg);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { display: block; }
.opt { font-weight: 400; color: var(--v-fg3); }

.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--v-pill); background: var(--v-fg); color: var(--v-bg); font-weight: 600; text-decoration: none; }
.evitement:focus { top: 12px; }

.enveloppe { max-width: var(--v-max); margin: 0 auto; padding: 0 var(--v-gut); }
.h2 { font-size: clamp(32px, 4.6vw, 64px); font-weight: 600; letter-spacing: -.045em; line-height: 1.06; }
.h2.titre-carte { font-weight: 400; letter-spacing: .005em; line-height: 1.06; font-size: clamp(38px, 5vw, 76px); }
.lede { color: var(--v-fg2); font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.6; max-width: 52ch; }
.lede b { color: var(--v-fg); font-weight: 500; }
.kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--v-fg3); margin-bottom: 12px; }

/* ---------- l'annonce, au-dessus de la barre ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 51;
  height: 36px; display: flex; align-items: center; justify-content: center;
  padding: 0 16px; background: var(--acc); color: var(--v-bg);
  font-size: 13px; font-weight: 600; transition: background-color 1s var(--v-ease);
}
.topbar p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* La barre de la démo porte six liens, le sélecteur de langue et le bouton :
   un peu plus large que la pilule commune (880 px), sinon le bouton déborde. */
.barre { top: 48px; width: min(calc(100% - 24px), 1180px); }
/* Le libellé long du bouton : l'espace initial du texte traduit survit à l'élément flex (« Réserver ma licence »,
   pas « Réserverma »). Sous 1240 px on passe au libellé court : la barre ne déborde jamais, dans aucune langue. */
.barre__cta-long { white-space: pre; }
@media (max-width: 1240px) { .barre__cta-long { display: none; } }
@media (min-width: 961px) and (max-width: 1240px) { .barre { gap: 10px; } .barre__nav a, .barre__dropb { padding-left: 9px; padding-right: 9px; } }
.barre__nav a i { font-style: normal; font-size: 12px; margin-left: 2px; }

/* ---------- le menu « Offres » par rubrique (dropdown dans la barre) ----------
   Le bouton se fond dans la barre (mêmes règles que .barre__nav a) ; le panneau est
   opaque (pas de backdrop-filter : il s'anime en opacity + transform). Sur petit écran,
   il se range dans le menu burger, en liste repliable. */
.barre__drop { position: relative; display: flex; }
.barre__dropb {
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px;
  border: 0; background: none; border-radius: var(--v-pill); font: 400 14px/1 var(--ui);
  color: var(--v-fg3); white-space: nowrap; cursor: pointer;
  transition: color .25s ease, background-color .25s ease;
}
.barre__dropb::after { content: '▾'; font-size: 10px; line-height: 1; color: inherit; transition: transform .25s ease; }
.barre__dropb:hover, .barre__drop:hover .barre__dropb, .barre__drop:focus-within .barre__dropb { color: var(--v-fg); background: #ffffff10; }
.barre__dropb--on { color: var(--v-fg); background: #ffffff16; }
.barre__dropb:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 2px; }
.barre__drop.ouvert .barre__dropb::after { transform: rotate(180deg); }
.barre__menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: max-content; min-width: 264px; padding: 8px;
  background: #15161b; border: 1px solid #ffffff1f; border-radius: 16px; box-shadow: 0 22px 50px -20px #000d;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.barre__drop:hover .barre__menu, .barre__drop:focus-within .barre__menu, .barre__drop.ouvert .barre__menu { opacity: 1; transform: none; pointer-events: auto; }
/* le pont invisible au-dessus du menu : la souris qui descend du bouton vers les rubriques traverse l'écart sans sortir
   du survol (sinon le menu se refermait à mi-chemin — bug vu par Max le 15.10) */
.barre__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.barre__menu a {
  display: flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 10px;
  font-size: 13.5px; color: var(--v-fg2); text-decoration: none; white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.barre__menu a:hover { color: var(--v-fg); background: #ffffff10; }
.barre__menu a:focus-visible { outline: 2px solid var(--v-fg); outline-offset: -2px; }
.barre__menuTout { grid-column: 1 / -1; color: var(--v-fg); font-weight: 600; border-bottom: 1px solid var(--v-line); border-radius: 10px 10px 0 0; margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .barre__menu { transition: none; } }
@media (max-width: 960px) {
  /* dans le menu burger : la liste se range sous le bouton, sans positionnement absolu */
  .barre__drop { flex-direction: column; align-items: stretch; }
  .barre__dropb { justify-content: space-between; padding: 13px 14px; font-size: 16px; border-radius: 12px; }
  .barre__menu {
    position: static; width: auto; min-width: 0; margin: 2px 0 4px; padding: 6px;
    background: #ffffff08; border: 0; box-shadow: none; opacity: 1; transform: none; pointer-events: auto; display: none;
  }
  .barre__drop:hover .barre__menu, .barre__drop:focus-within .barre__menu { display: none; }
  .barre__drop.ouvert .barre__menu { display: grid; }
  .barre__menu::before { display: none; }
  .barre__menu a { font-size: 14.5px; min-height: 40px; }
}

/* ---------- le sélecteur de langue, dans la barre, avant le bouton ----------
   Des pilules sobres, à la manière des liens de la barre : gris (--v-fg3) au
   repos, blanc (--v-fg) pour la langue en cours. Pas de couleur de volée ici,
   la barre reste neutre. */
.barre__lang { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--v-pill); border: 1px solid var(--v-line); background: #ffffff08; }
.barre__lang button { min-width: 24px; min-height: 30px; padding: 0 8px; border: 0; border-radius: var(--v-pill); background: transparent; color: var(--v-fg3); font: 600 11.5px/1 var(--ui); letter-spacing: .04em; cursor: pointer; transition: color .25s ease, background-color .25s ease; }
.barre__lang button:hover { color: var(--v-fg); background: #ffffff10; }
.barre__lang button[aria-pressed="true"] { color: var(--v-fg); background: #ffffff16; }
.barre__lang button:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 2px; }
@media (max-width: 960px) {
  /* en mode burger, le sélecteur se range à droite, contre le bouton */
  .barre__lang { margin-left: auto; }
  .barre__cta { margin-left: 0; }
}
@media (max-width: 480px) {
  .barre__lang { gap: 0; padding: 2px; }
  .barre__lang button { min-height: 28px; padding: 0 6px; font-size: 11px; letter-spacing: .02em; }
}

/* ---------- le hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(150px, 15vw, 190px) 0 clamp(40px, 6vw, 80px); }
.hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero__h { font-size: clamp(42px, 5.3vw, 80px); margin-top: 22px; }
.hero__lede { margin-top: 24px; max-width: 50ch; }
.cherche { display: flex; gap: 8px; margin-top: 28px; padding: 6px; border-radius: var(--v-pill); background: #ffffff0a; border: 1px solid #ffffff1f; max-width: 560px; }
.cherche input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; background: transparent; border: 0; color: var(--v-fg); font: 500 15.5px/1.2 var(--ui); }
.cherche input::placeholder { color: var(--v-fg3); }
.cherche input:focus { outline: none; }
.cherche input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cherche .btn-plein { min-height: 48px; padding: 0 22px; flex: none; }
.cherche:focus-within { border-color: color-mix(in srgb, var(--acc) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); }
.hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 28px; }
.hero__cta { min-height: 58px; padding: 0 30px; font-size: 17px; }
.hero__leg { margin-top: 16px; font-size: 13px; color: var(--v-fg3); max-width: 52ch; }

/* le téléphone */
/* Le bloc fait la largeur du téléphone : les cartes flottantes se placent par
   rapport à lui, et débordent sur ses flancs comme sur la référence. */
.hero__tel { position: relative; width: fit-content; margin: 0 auto; padding: 24px 0; }
.tel {
  position: relative; width: min(330px, 84vw); aspect-ratio: 9 / 18.6;
  border-radius: 44px; background: #0b0b0c; border: 1px solid #ffffff26; padding: 18px 14px;
  overflow: hidden; color: var(--v-fg); font-size: 14px; line-height: 1.4;
  box-shadow: 0 0 0 8px #141417, 0 0 0 9px #ffffff14, 0 60px 110px -40px #000, 0 40px 90px -36px color-mix(in srgb, var(--acc) 55%, transparent);
  transition: box-shadow 1s var(--v-ease);
}
.tel::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 96px; height: 24px; border-radius: 14px; background: #000; z-index: 3; }
.tel__ecran { height: 100%; overflow: hidden; padding-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.tel__barre { display: flex; justify-content: space-between; align-items: center; }
.tel__m { font-family: var(--display); font-size: 15px; letter-spacing: .05em; }
.tel__v { font-size: 11px; color: var(--v-fg3); padding: 4px 9px; border-radius: var(--v-pill); border: 1px solid var(--v-line); }
.tel__chips { display: flex; gap: 6px; overflow: hidden; }
.tel__chips span { flex: none; font: 600 11px/1 var(--ui); padding: 7px 10px; border-radius: var(--v-pill); border: 1px solid var(--v-line); color: var(--v-fg2); white-space: nowrap; }
.tel__chips span:first-child { background: var(--v-fg); color: var(--v-bg); border-color: transparent; }
.tel .treco { margin-top: 0; padding: 13px; }
.tel .treco__nom { font-size: 14.5px; }
.tel .treco__ex { font-size: 12px; }
.tel .treco .ens__logo { width: 42px; height: 42px; border-radius: 13px; }
.tel .treco__r { font-size: 12.5px; padding: 5px 9px; }
.tel .treco__go { padding: 8px 14px; font-size: 12.5px; }
.tel .treco__min { font-size: 11.5px; }
.tel .treco__badge { font-size: 11px; }
.tel .treco__ctx { font-size: 11px; }
.flot {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  min-width: 200px; padding: 10px 14px 10px 10px; border-radius: 18px;
  background: #23242cf0; border: 1px solid #ffffff1f; box-shadow: 0 24px 50px -20px #000;
  /* Pas de backdrop-filter ici : le fond est opaque à 94 %, le flou derrière ne se voyait
     pas, et il se recalculait à chaque image pendant l'inclinaison et le défilement. */
  cursor: pointer; will-change: transform;
}
.flot .ens__logo { width: 38px; height: 38px; border-radius: 12px; }
.flot b { display: block; font-size: 13.5px; white-space: nowrap; }
/* le sous-titre seulement : « .flot span » attrapait aussi la pastille de remise et la rendait grise (vu par Max le 13.10) */
.flot div > span { display: block; font-size: 12px; color: var(--v-fg3); white-space: nowrap; }
.flot__r { margin-left: auto; flex: none; padding: 4px 9px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font: 700 12.5px/1 var(--ui); }
.flot--a { left: -38%; top: 11%; }
.flot--b { right: -34%; top: 44%; }
.flot--c { left: -26%; bottom: 9%; }
/* La carte-licence du hero : objet signature, inclinée devant le téléphone.
   L'inclinaison de base vit sur le conteneur (le relief écrit le transform de .lic). */
/* La licence occupe désormais le coin bas-gauche : on y masque le flotteur « près de toi » pour une compo nette. */
.hero__tel .flot--c { display: none; }
.hero__lic { position: absolute; left: -19%; bottom: 14%; width: clamp(140px, 14vw, 176px); z-index: 4; transform: rotate(-8deg); }
.hero__lic .scene3d { width: 100%; perspective: 1100px; }
.hero__lic .lic { color: #edede7; box-shadow: 0 34px 70px -28px #000c, 0 30px 60px -16px #000a, 0 2px 0 #ffffff0a inset; }
@media (max-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__tel { padding: 36px 0 10px; }
  .flot--a { left: -14%; top: 10%; }
  .flot--b { right: -12%; top: 46%; }
  .flot--c { left: -8%; bottom: 7%; }
  /* Téléphone centré : la licence reste dans l'écran, au coin bas-gauche. */
  .hero__lic { left: -3%; bottom: 5%; width: clamp(100px, 28vw, 128px); transform: rotate(-7deg); }
}
@media (max-width: 560px) {
  .flot { min-width: 0; padding: 8px 10px 8px 8px; }
  .flot b { font-size: 12.5px; }
  .flot span { display: none; }
  .flot .ens__logo { width: 32px; height: 32px; border-radius: 10px; }
}

/* ---------- le défilé d'enseignes ---------- */
.marq { margin-top: clamp(36px, 5vw, 64px); padding: 22px 0; overflow: hidden; border-top: 1px solid var(--v-line); border-bottom: 1px solid var(--v-line); }
.marq__k { text-align: center; padding: 0 var(--v-gut); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-fg3); margin-bottom: 18px; }
.marq__rail { display: flex; width: max-content; will-change: transform; animation: marq 70s linear infinite; }
.marq__set { display: flex; gap: 12px; padding-right: 12px; }
#marq { min-height: 50px; }   /* la place du défilé est réservée avant son rendu : rien ne saute (50 px mesurés) */
#villeBloc:empty { min-height: 42px; }   /* idem pour le bloc « ta ville » du hero, posé par le script */
.marq__it { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: var(--v-pill); background: var(--v-surf); border: 1px solid var(--v-surf-line); white-space: nowrap; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.marq__it .ens__logo { width: 34px; height: 34px; border-radius: 10px; }
.marq__it span { color: var(--v-fg3); font-weight: 400; }
@keyframes marq { to { transform: translateX(-50%); } }
.marq:hover .marq__rail { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marq__rail { animation: none; } }

/* ---------- les sections ---------- */
.sect { padding-top: clamp(64px, 8vw, 120px); }
.sect__tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.sect__tete .lede { margin-top: 16px; }
.live { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 6px 12px; 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-fg2); }
.live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.live--v { --acc: #9b7bff; color: #cbbcff; border-color: color-mix(in srgb, #8b5cf6 50%, transparent); }
/* L'onde du point « en direct » : un anneau qui grandit et s'efface en transform + opacity,
   composé par la carte graphique — plus un box-shadow repeint soixante fois par seconde. */
.live i::after, .accHeure__live i::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--acc); opacity: 0; animation: pulseLive 1.8s var(--v-ease) infinite; }
@keyframes pulseLive { 0% { transform: scale(.7); opacity: .75; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* ---------- les sceaux (logos inventés) — repris de app.css ---------- */
.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__logo--lg { width: 72px; height: 72px; border-radius: 22px; }
.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--lg .ens__lettre { font-size: 38px; }
.ens__logo--lg .ens__lettre--two { font-size: 28px; }
.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; }

/* ---------- le deal du jour — repris de app.css ---------- */
.dealGrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 14px; align-items: stretch; }
/* Deal en vedette : la grande carte, avec deux flèches DANS le dégradé pour passer
   d'un deal au suivant (la vedette change ; les autres restent en gris à côté). */
.adealBox { position: relative; }
.adeal__fl { position: absolute; top: 42%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #0b0b0c26; background: #ffffffcc; color: #0b0b0c; font-size: 24px; 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:hover { background: #fff; }
.adeal__fl:active { transform: translateY(-50%) scale(.94); }
.adeal__fl:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 3px; }
.adeal__fl--next { right: 12px; }
.adeal__fl[hidden] { display: none; }
.adeal { border-radius: var(--v-rad); overflow: hidden; background: var(--v-surf); border: 1px solid var(--v-surf-line); cursor: pointer; transition: transform .3s var(--v-ease), border-color .3s var(--v-ease); display: flex; flex-direction: column; }
.adeal__cover { position: relative; min-height: 240px; flex: 1; padding: 20px 22px; display: flex; align-items: flex-end; color: #0b0b0c; background: linear-gradient(132deg, var(--s-1), var(--s-2) 50%, var(--s-3)); transition: background 1s var(--v-ease); }
.adeal__cover .ens__logo { position: absolute; top: 18px; right: 20px; 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%); }
/* le reflet qui balaie le dégradé au changement de deal (animé en transform + opacity) */
.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(72px, 10vw, 136px); line-height: .82; letter-spacing: -.02em; color: #0b0b0c; }
.adeal__big i { font-style: normal; font-size: .42em; vertical-align: super; margin-left: 2px; }
.adeal__go { position: absolute; bottom: 18px; right: 20px; 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: 8px 12px; border-radius: var(--v-pill); }
.adeal__body { padding: 18px 22px 20px; }
.adeal__nom { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.01em; line-height: 1; }
.adeal__ex { margin-top: 8px; font-size: 15px; color: var(--v-fg2); }
.adeal__chrono { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.adeal__chrono em, .accHeure__chrono em { font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--v-fg3); }
.chrono { display: inline-flex; gap: 6px; }
.chrono span { position: relative; font-family: var(--display); font-weight: 400; font-size: 20px; font-variant-numeric: tabular-nums; background: var(--v-surf2); border: 1px solid var(--v-surf-line); border-radius: 8px; padding: 6px 8px 4px; min-width: 38px; text-align: center; }
.chrono span + span::before { content: ':'; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); color: var(--v-fg3); }
.adeal__flash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: stretch; }   /* colonne qui se borne au conteneur (comme .dealGrid) : sans quoi un libellé long — l'allemand — gonfle la piste au-delà des 350 px et déborde (fantôme masqué par body{overflow-x:hidden}) */
.aflash { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); cursor: pointer; transition: transform .3s var(--v-ease), border-color .3s var(--v-ease); }
.aflash__r { flex: none; font-family: var(--display); font-weight: 400; font-size: 28px; color: var(--acc); letter-spacing: -.01em; transition: color .9s var(--v-ease); min-width: 74px; }
.aflash__id { min-width: 0; flex: 1; }
.aflash__id b { display: block; font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aflash__id span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--v-fg3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aflash__id span i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.aflash__go { flex: none; color: var(--v-fg3); font-size: 18px; }
@media (hover: hover) {
  .adeal:hover, .aflash:hover, .tcard:hover, .treco:hover, .tuile:hover, .marq__it:hover, .flot:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--v-surf-line)); }
  .adeal:hover, .tcard:hover, .tuile:hover { transform: translateY(-2px); }
}
.adeal:focus-visible, .aflash:focus-visible, .tcard:focus-visible, .tcomp:focus-visible, .tuile:focus-visible, .accHeure:focus-visible, .marq__it:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
@media (max-width: 860px) { .dealGrid { grid-template-columns: minmax(0, 1fr); } .adeal__cover { min-height: 180px; }
  /* carte haute en pile : la flèche descend dans le coin bas-droite du corps (zone vide),
     dégagée du sceau et de « Voir » (dans le dégradé) et du chrono (à gauche) */
  .adeal__fl { top: auto; bottom: 16px; transform: none; }
  .adeal__fl:active { transform: scale(.94); }
}

/* ---------- les prochains deals : une bande, un par jour ---------- */
.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; }
@media (max-width: 1100px) {
  .dsem__rail { grid-auto-columns: 160px; margin: 0 calc(-1 * var(--v-gut)); padding-inline: var(--v-gut); scroll-padding-inline: var(--v-gut); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
}

/* ---------- les offres, comme dans l'app ---------- */
.filtres { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.villes, .rubs { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: var(--v-pill); border: 1px solid var(--v-line); background: #ffffff08; color: var(--v-fg2); font: 600 13.5px/1 var(--ui); cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; white-space: nowrap; }
.chip:hover { background: #ffffff12; color: var(--v-fg); }
.chip[aria-pressed="true"] { background: var(--v-fg); color: var(--v-bg); border-color: transparent; }
.chip--v { min-height: 46px; padding: 0 16px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; border-radius: 16px; }
.chip--v b { font-size: 14px; }
.chip--v span { font-size: 11.5px; font-weight: 500; opacity: .7; }
.chip:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 3px; }

.terrain { margin-top: 8px; }
.tsect { margin-top: 30px; }
.tsect[hidden] { display: none; }
.tsectH { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.tsectH b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.tsectH span { font-size: 13px; color: var(--v-fg3); }
.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tgrid { grid-template-columns: minmax(0, 1fr); } }
.vide { margin-top: 14px; color: var(--v-fg3); font-size: 15px; }
.vide[hidden] { display: none; }
.villesLeg { align-self: center; font: 600 11px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg3); margin-right: 6px; white-space: nowrap; }
.plus { margin-top: 18px; }
.plus .btn-lien[hidden] { display: none; }

/* la grande carte « Maintenant pour toi » — reprise de app.css */
.treco { position: relative; margin-top: 18px; padding: 18px; 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; transition: border-color .3s var(--v-ease); }
.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__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: 12px; font-weight: 700; letter-spacing: .02em; color: var(--acc); }
.treco__badge svg { width: 14px; height: 14px; }
.treco__ctx { font-size: 12.5px; color: var(--v-fg3); }
.treco__main { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.treco .ens__logo { width: 56px; height: 56px; border-radius: 17px; flex: none; }
.treco__id { flex: 1; min-width: 0; }
.treco__nom { font-size: 19px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.treco__ex { font-size: 14px; color: var(--v-fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.treco__r { flex: none; align-self: flex-start; padding: 6px 12px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font-weight: 700; font-size: 14.5px; transition: background-color .9s var(--v-ease); }
.treco__acts { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.treco__go { display: inline-block; 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: 13px; color: var(--v-fg3); }

/* la carte d'enseigne — reprise de app.css */
/* La carte d'offre, version « vitrine » : un visuel en tête (dégradé + symbole, ou logo/photo en démo),
   le corps en bas. Prête à recevoir une vraie photo du commerçant (champ e.photo) sans refonte. */
.tcard { position: relative; display: flex; flex-direction: column; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); cursor: pointer; overflow: hidden; transition: transform .3s var(--v-ease), border-color .3s var(--v-ease); }
.tcard__hero { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tcard__body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tcard__nom { font-weight: 600; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard__meta { display: flex; align-items: baseline; gap: 9px; font-size: 13px; color: var(--v-fg3); min-width: 0; }
.tcard__type { flex: none; }
.tcard__ex { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v-fg2); }
.tcard__d { flex: none; margin-left: auto; font-size: 12.5px; }
.tcard__r { position: absolute; top: 11px; left: 11px; z-index: 2; padding: 6px 11px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font-weight: 700; font-size: 13.5px; }
.tcard__r--soft { background: #0b0b0ccc; color: #ececdf; font-weight: 600; }   /* freemium : « offre bientôt », badge neutre (pas la couleur d'une remise) */
.tcard__go { position: absolute; bottom: 11px; right: 11px; z-index: 2; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: #f4f4ef; background: color-mix(in srgb, #0b0b0c 52%, transparent); border: 1px solid #ffffff33; padding: 5px 10px; border-radius: var(--v-pill); }
/* la zone visuelle en tête : dégradé génératif plein (comme .adeal__cover), symbole/lettre en grand, ou image couvrante */
.ens__hero { position: absolute; inset: 0; display: grid; place-items: center; color: var(--v-bg); background: linear-gradient(0deg, color-mix(in srgb, #0b0b0c 22%, transparent), transparent 60%), linear-gradient(var(--la, 140deg), var(--e1, var(--s-1)), var(--e2, var(--s-2))); }
.ens__hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 26% 6%, #ffffff40, transparent 60%); }
.ens__hero--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ens__hero--logo { background: #f4f4ef; }   /* logo de marque (démo) sur fond crème, comme l'emblème — sinon il disparaît sur le dégradé */
.ens__hero--logo::after { content: none; }
.ens__hero--logo img { position: relative; z-index: 1; width: 56%; height: 56%; object-fit: contain; }
.ens__hero-sym { position: relative; z-index: 1; width: 30%; max-width: 78px; height: auto; fill: var(--v-bg); opacity: .94; }
.ens__hero-lettre { position: relative; z-index: 1; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 6vw, 56px); line-height: 1; color: var(--v-bg); opacity: .95; letter-spacing: .02em; }
.ens__hero-lettre--two { font-size: clamp(26px, 5vw, 42px); }
.ens__hero--photo::after { background: linear-gradient(0deg, #0b0b0c66, transparent 46%); }   /* ombre basse : détache la pastille et les badges, à la place du reflet blanc */
.ens__badge { position: absolute; left: 10px; bottom: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; overflow: hidden; box-shadow: 0 5px 16px -5px #000000b3, 0 0 0 1.5px #ffffff30; }
.ens__badge--logo { background: #f4f4ef; }
.ens__badge--logo img { width: 70%; height: 70%; object-fit: contain; }   /* marge pour que les logos qui touchent les bords ne se fassent pas rogner les coins par l'arrondi */
.ens__badge--gen { background: linear-gradient(var(--la, 140deg), var(--e1, var(--s-1)), var(--e2, var(--s-2))); }
.ens__badge-sym { width: 54%; height: 54%; fill: var(--v-bg); }
.ens__badge-lettre { font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1; color: var(--v-bg); }
.ens__badge-lettre--two { font-size: 14px; }
.ens__hero--illu .ens__illu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }   /* le « visuel Junior » : illustration de catégorie posée sur le dégradé du hero */

/* ---------- la page des flash deals (flash.html) ----------
   Des cartes « chaudes » : liseré et halo à la couleur de la volée, une grosse remise,
   une fenêtre, un compte à rebours. Clic → la fiche (écouteur global [data-id]). */
.flashGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .flashGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .flashGrid { grid-template-columns: minmax(0, 1fr); } }
.fcard {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 14px;
  padding: 18px; border-radius: var(--v-rad); background: var(--v-surf);
  border: 1.5px solid color-mix(in srgb, var(--acc) 42%, var(--v-surf-line));
  cursor: pointer; overflow: hidden;
  transition: transform .3s var(--v-ease), border-color .3s var(--v-ease);
}
.fcard::before { content: ''; position: absolute; inset: 0; background: radial-gradient(130% 150% at 100% 0, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%); pointer-events: none; }
.fcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 70%, var(--v-surf-line)); }
.fcard > * { position: relative; }
.fcard__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fcard__r { flex: none; padding: 7px 13px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font-weight: 800; font-size: 17px; letter-spacing: -.01em; transition: background-color .9s var(--v-ease); }
.fcard__fen { font-size: 12px; font-weight: 600; color: var(--v-fg3); text-align: right; }
.fcard__main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fcard .ens__logo { width: 48px; height: 48px; border-radius: 15px; flex: none; }
.fcard__id { min-width: 0; }
.fcard__nom { font-weight: 700; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcard__ex { font-size: 13px; color: var(--v-fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.fcard__bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--v-line); }
.fcard__chrono { font-size: 12.5px; color: var(--v-fg3); }
.fcard__chrono em { font-style: normal; }
.fcard__chrono b { font-variant-numeric: tabular-nums; color: var(--v-fg); font-weight: 700; margin-left: 5px; }
.fcard__go { flex: none; font-size: 12px; font-weight: 700; color: var(--acc); }
@media (prefers-reduced-motion: reduce) { .fcard, .fcard:hover { transform: none; } }
.tcard:active, .treco:active, .tcomp:active { transform: scale(.992); }

/* la ligne compacte — reprise de app.css */
.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: 11px 14px; border-top: 1px solid var(--v-surf-line); cursor: pointer; }
.tcomp:first-child { border-top: 0; }
.tcomp .ens__logo { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.tcomp__id { flex: 1; min-width: 0; }
.tcomp__nom { font-size: 14px; 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); transition: background-color .9s var(--v-ease); }
.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; }

/* ---------- par envie ---------- */
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tuile { min-height: 160px; padding: 22px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; cursor: pointer; transition: transform .3s var(--v-ease), border-color .3s var(--v-ease), background-color 1s var(--v-ease); }
.tuile h3 { font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.tuile p { margin-top: 6px; font-size: 13.5px; color: var(--v-fg3); line-height: 1.45; }
.tuile--acc { background: var(--acc); border-color: transparent; color: var(--v-bg); }
.tuile--acc p { color: color-mix(in srgb, var(--v-bg) 92%, transparent); }
@media (max-width: 900px) { .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tuile { min-height: 130px; padding: 18px; } }

/* ---------- les places des enseignes fondatrices (page des enseignes) ---------- */
.slots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.slot { aspect-ratio: 1; border-radius: 18px; border: 1px dashed #ffffff2a; display: grid; place-items: center; padding: 8px; color: var(--v-fg3); font-size: 12px; line-height: 1.3; text-align: center; text-decoration: none; }
.slot--cta { border: 1px solid color-mix(in srgb, var(--acc) 60%, transparent); background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--v-fg); font-weight: 600; transition: transform .3s var(--v-ease); }
.slot--cta:hover { transform: translateY(-2px); }
@media (max-width: 900px) { .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .slot { font-size: 11px; padding: 6px; border-radius: 14px; } }

/* ---------- les liens d'une tête de section ---------- */
.sect__liens { display: flex; flex-wrap: wrap; gap: 4px 22px; }

/* ---------- les bandes (carte, licence) ---------- */
.band { position: relative; overflow: hidden; margin-top: clamp(64px, 8vw, 120px); padding: clamp(56px, 7vw, 100px) 0; background: var(--v-surf); border-top: 1px solid var(--v-surf-line); border-bottom: 1px solid var(--v-surf-line); }
.band__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.band__txt .lede { margin-top: 22px; }
.band__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.band__leg { font-size: 13px; color: var(--v-fg3); }
.band--lic { background: var(--v-bg); border: 0; }
/* Bande commerçant (accueil) : texte seul, centré — pas de 2ᵉ colonne visuelle. Teinte d'accent discrète. */
/* La section commerçant : une CARTE ACCENT distincte (pas un fond plat), pour qu'elle sorte comme
   l'invitation aux commerçants — aussi travaillée que les sections jeunes, sans voler la vedette (fin de page). */
.band--pro { background: var(--v-bg); border-top: 0; border-bottom: 0; padding-inline: clamp(16px, 4vw, 40px); }
.band--pro .band__in { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: center; text-align: left; justify-items: stretch; max-width: 940px; margin-inline: auto;
  padding: clamp(32px, 3.4vw, 54px) clamp(30px, 3.4vw, 54px);
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 62%),
    color-mix(in srgb, var(--acc) 11%, var(--v-surf));
  border: 1px solid color-mix(in srgb, var(--acc) 42%, var(--v-surf-line));
  border-radius: var(--v-rad);
  box-shadow: 0 40px 100px -52px color-mix(in srgb, var(--acc) 60%, transparent);
}
.band--pro .kicker { color: color-mix(in srgb, var(--acc) 85%, var(--v-fg)); }
.band--pro .band__acts { justify-content: flex-start; }
.band--pro .h2 { font-size: clamp(22px, 2.3vw, 34px); line-height: 1.1; margin-inline: 0; }
/* le mini-aperçu de la fiche enseigne (ce qu'un jeune voit dans l'app) : une image, comme les autres sections */
.pro-visuel { width: 100%; max-width: 300px; margin: 0; }
.pro-fiche { background: var(--v-surf); border: 1px solid var(--v-surf-line); border-radius: var(--v-rad-s); overflow: hidden; text-align: left; box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .6); transform: rotate(-1.5deg); transition: transform .5s var(--v-ease); }
.pro-fiche:hover { transform: rotate(0); }
.pro-fiche__hero { position: relative; aspect-ratio: 16 / 8; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 55%, var(--v-surf)), color-mix(in srgb, var(--acc) 20%, var(--v-surf))); }
.pro-fiche__ico { width: 40px; height: 40px; color: color-mix(in srgb, var(--v-bg) 76%, transparent); }
.pro-fiche__badge { position: absolute; top: 10px; right: 10px; background: var(--v-bg); color: var(--acc); font: 700 12px/1 var(--ui); padding: 5px 10px; border-radius: 999px; }
.pro-fiche__body { padding: 14px 16px 16px; }
.pro-fiche__row { display: flex; align-items: center; gap: 11px; }
.pro-fiche__logo { width: 36px; height: 36px; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--acc) 22%, var(--v-surf)); color: var(--acc); display: grid; place-items: center; font: 400 17px/1 var(--display, 'Anton'); }
.pro-fiche__nom { display: block; font-size: 15px; font-weight: 600; color: var(--v-fg); }
.pro-fiche__meta { font-size: 12px; color: var(--v-fg3); }
.pro-fiche__chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; font: 600 11.5px/1 var(--ui); color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); padding: 6px 11px; border-radius: 999px; }
.pro-fiche__chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
@media (max-width: 760px) {
  .band--pro .band__in { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 0; }
  .band--pro .band__txt { text-align: center; }
  .band--pro .band__acts { justify-content: center; }
  .band--pro .h2 { margin-inline: auto; }
  .pro-visuel { max-width: 280px; margin: 0 auto 24px; }
}
/* Ligne de réassurance sous un CTA final (le dernier message reste — reco recherche) */
.band__reassure { margin: 20px auto 0; max-width: 62ch; text-align: center; font-size: 14px; color: var(--v-fg3); }
@media (max-width: 900px) { .band__in { grid-template-columns: minmax(0, 1fr); } }

.plan { position: relative; aspect-ratio: 4 / 3; min-height: 320px; border-radius: var(--v-rad); overflow: hidden; border: 1px solid var(--v-surf-line); background: #0e0e10; }
.plan__map { position: absolute; inset: 0; }
.plan__charge { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--v-fg3); pointer-events: none; }
.plan__charge[hidden] { 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; margin: 0 auto; 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; }
.leaflet-control-attribution { background: rgba(0, 0, 0, .55); color: #9a9a95; font-size: 10px; }
.leaflet-control-attribution a { color: #b7b7b0; }
.leaflet-bar a { background: #1b1b1f; color: var(--v-fg); border-color: #ffffff1a; }
.leaflet-bar a:hover { background: #2a2a30; }

/* ---------- l'heure de la volée — reprise de app.css ---------- */
.heures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .heures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .heures { grid-template-columns: minmax(0, 1fr); } }
.accHeure { padding: 16px 18px; border: 1px solid var(--v-surf-line); border-radius: var(--v-rad-s); background: #ffffff06; }
.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__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 { position: relative; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.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; }
.accHeure__main { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.accHeure .ens__logo { width: 46px; height: 46px; border-radius: 14px; }
.accHeure__id { min-width: 0; }
.accHeure__h { font: 600 15.5px/1.25 var(--ui); color: var(--v-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.accHeure__sous { margin-top: 4px; font: 500 13px/1.45 var(--ui); color: var(--v-fg3); }
.accHeure__sous b { color: #efeaff; font-weight: 700; }
.accHeure__chrono { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.accHeure--actif .chrono 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; font-size: 17px; min-width: 34px; }
@media (prefers-reduced-motion: reduce) { .live i::after, .accHeure__live i::after { animation: none; } .accHeure--actif::after { animation: none; } }

/* ---------- l'app et la licence ---------- */
.puces { list-style: none; display: grid; gap: 10px; margin-top: 22px; }
.puces li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.55; color: var(--v-fg2); }
.puces li b { color: var(--v-fg); font-weight: 600; }
.puces li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); transition: background-color 1s var(--v-ease); }
.stores { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--v-fg3); }
.stores span { padding: 9px 13px; border-radius: var(--v-pill); border: 1px dashed #ffffff2e; color: var(--v-fg2); font-weight: 600; }
.stores em { font-style: normal; }

.licBloc { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* L'ombre portée de la licence est un box-shadow sur la carte (dessiné une fois dans sa
   couche, puis déplacé avec elle), pas un filter: drop-shadow sur le conteneur, que la
   carte graphique recalculait à chaque degré d'inclinaison. */
.flotte { width: min(320px, 70vw); margin: 0 auto; will-change: transform; }
.flotte .lic { box-shadow: 0 34px 70px -28px #000c, 0 30px 60px -16px #000a, 0 2px 0 #ffffff0a inset; }
.flotte .lic { color: #edede7; }
.licLeg { margin-top: 20px; font-size: 13px; color: var(--v-fg3); }
.licLeg span { display: block; }
.choix { display: grid; gap: 18px; width: 100%; max-width: 440px; margin-top: 26px; text-align: left; }
.choix__k { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg3); margin-bottom: 8px; }
.choix__sel { width: 100%; min-height: 48px; padding: 0 16px; border-radius: 16px; border: 1px solid #ffffff26; background: #ffffff08; color: var(--v-fg); font: 500 15.5px/1.2 var(--ui); appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--v-fg2) 50%), linear-gradient(135deg, var(--v-fg2) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.choix__sel:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 25%, transparent); }
.choix__sel option { color: #111; }
.teintes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.teinte { aspect-ratio: 1; width: 100%; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; transition: transform .25s var(--v-ease), border-color .25s ease; box-shadow: inset 0 0 0 2px #0b0b0c; }
.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; }
.choix__leg { font-size: 13.5px; line-height: 1.55; color: var(--v-fg2); }
.choix__leg b { color: var(--v-fg); font-weight: 600; }

/* ---------- pour les marques : offre fondation + packs ---------- */
.fondation { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 18px 26px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font-size: 15px; transition: background-color 1s var(--v-ease); }
.fondation b { font-size: 17px; font-weight: 700; }
.fondation span { font-weight: 600; opacity: .8; }
.packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.pack { position: relative; padding: 26px 22px 24px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.pack__k { display: block; font: 700 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--v-fg3); }
.pack__prix { margin-top: 16px; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 3.4vw, 50px); line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.pack__prix i { font-style: normal; font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: .08em; margin-left: 8px; color: var(--v-fg3); vertical-align: 8px; }
.pack ul { list-style: none; margin-top: 18px; display: grid; gap: 9px; }
.pack li { display: flex; gap: 10px; font-size: 14.5px; color: var(--v-fg2); line-height: 1.45; }
.pack li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; background: var(--acc); transition: background-color 1s var(--v-ease); }
.pack--star { border-color: color-mix(in srgb, var(--acc) 70%, transparent); box-shadow: 0 0 60px -22px var(--acc); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 14%, var(--v-surf)), var(--v-surf) 70%); }
.pack--star .pack__k, .pack--star .pack__prix i { color: var(--acc); }
.pack__tag { position: absolute; top: -14px; right: 18px; padding: 7px 12px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font: 700 12px/1 var(--ui); transition: background-color 1s var(--v-ease); }
.packs__note { margin-top: 16px; font-size: 13px; color: var(--v-fg3); max-width: 70ch; }
.tarifs__k { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-top: 30px; }
.tarifs__k b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.tarifs__k span { display: block; margin-top: 4px; font-size: 14px; color: var(--v-fg3); }
.bascule { display: inline-flex; padding: 4px; border-radius: var(--v-pill); background: #ffffff0a; border: 1px solid var(--v-line); }
.bascule button { min-height: 38px; padding: 0 16px; border: 0; border-radius: var(--v-pill); background: transparent; color: var(--v-fg2); font: 600 13.5px/1 var(--ui); cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.bascule button[aria-pressed="true"] { background: var(--v-fg); color: var(--v-bg); }
.bascule button i { font-style: normal; margin-left: 6px; padding: 3px 7px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font-size: 11px; transition: background-color 1s var(--v-ease); }
.bascule button:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 3px; }
.packs--abo, .packs--boost { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* L'offre enseigne (décisions 30 & 32) : un ÉTAGE GRATUIT présenté comme une invitation
   (texte vendeur + aperçu de la fiche), puis l'ÉTAGE PAYANT. Le gratuit n'est jamais une
   carte de prix dans la grille. */
.offre1 { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(28px, 4vw, 60px); margin-top: 26px; padding: clamp(26px, 3.2vw, 46px); border-radius: var(--v-rad-s); background: color-mix(in srgb, var(--acc) 6%, var(--v-surf)); border: 1px solid color-mix(in srgb, var(--acc) 26%, var(--v-surf-line)); }
.offre1__tag { display: inline-block; padding: 6px 13px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font: 700 12px/1 var(--ui); letter-spacing: .03em; transition: background-color 1s var(--v-ease); }
.offre1__h { margin-top: 18px; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.05; letter-spacing: -.01em; }
.offre1__p { margin-top: 15px; max-width: 42ch; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.55; color: var(--v-fg2); }
.offre1__pts { list-style: none; margin: 22px 0 0; display: grid; gap: 13px; }
.offre1__pts li { position: relative; padding-left: 30px; font-size: 15px; color: var(--v-fg); line-height: 1.5; }
.offre1__pts li b { font-weight: 700; }
.offre1__pts li::before { content: ''; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: color-mix(in srgb, var(--acc) 18%, transparent); }
.offre1__pts li::after { content: ''; position: absolute; left: 6.5px; top: 4px; width: 5px; height: 8px; border: solid var(--acc); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: border-color 1s var(--v-ease); }
.offre1__cta { margin-top: 26px; }
.offre1__note { margin-top: 15px; max-width: 42ch; font-size: 13px; color: var(--v-fg3); line-height: 1.5; }
/* l'aperçu : la fiche telle qu'un jeune la voit dans l'app (montrer le produit = vendeur) */
.offre1__apercu { display: flex; justify-content: center; }
.pvc { width: min(300px, 100%); border-radius: 20px; background: var(--v-surf); border: 1px solid var(--v-surf-line); box-shadow: 0 30px 60px -32px rgba(10, 10, 20, .7); overflow: hidden; }
.pvc__hero { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 52%, var(--v-surf)), color-mix(in srgb, var(--acc) 16%, var(--v-surf))); transition: background 1s var(--v-ease); overflow: hidden; }
.pvc__illu { position: absolute; inset: 0; width: 100%; height: 100%; }   /* l'illustration de catégorie (café), comme dans l'app — pas de photo (fiche gratuite = logo + catégorie) */
.pvc__dist { position: absolute; top: 12px; right: 12px; padding: 5px 10px; border-radius: var(--v-pill); background: color-mix(in srgb, var(--v-bg) 66%, transparent); color: var(--v-fg); font: 600 11.5px/1 var(--ui); }
.pvc__logo { position: absolute; left: 14px; bottom: -18px; width: 52px; height: 52px; border-radius: 14px; background: var(--v-bg); border: 1px solid var(--v-surf-line); box-shadow: 0 10px 22px -10px rgba(10, 10, 20, .8); }
.pvc__logo::after { content: ''; position: absolute; inset: 11px; border-radius: 9px; background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 38%, var(--v-surf))); transition: background 1s var(--v-ease); }
.pvc__body { padding: 27px 16px 18px; display: grid; gap: 4px; }
.pvc__nom { font-size: 16px; font-weight: 700; }
.pvc__meta { font-size: 13px; color: var(--v-fg3); }
.pvc__soon { justify-self: start; margin-top: 9px; padding: 5px 11px; border-radius: var(--v-pill); background: color-mix(in srgb, var(--acc) 15%, transparent); color: color-mix(in srgb, var(--acc) 72%, var(--v-fg)); font: 700 11.5px/1 var(--ui); letter-spacing: .03em; transition: color 1s var(--v-ease); }

.offre2 { margin-top: clamp(40px, 5vw, 70px); }
.offre2__tag { display: block; font: 700 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); transition: color 1s var(--v-ease); }
.offre2__h { margin-top: 11px; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.01em; }
.offre2__p { margin-top: 12px; max-width: 52ch; font-size: 15.5px; line-height: 1.55; color: var(--v-fg2); }
.bascule--offre { margin-top: 20px; }
/* de l'air sous le sélecteur et autour de la bande Fondation (retour Max 17.10 : « trop serré ») */
#grpCampagne, #grpAbo { margin-top: 34px; }
#grpAbo .fondation { margin-bottom: 20px; }
#grpAbo .packs__fond { margin: 0 0 6px; }
@media (max-width: 760px) {
  .offre1 { grid-template-columns: 1fr; gap: 30px; }
  .offre1__apercu { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .offre1 { padding: 22px; }
  .offre1__h { font-size: clamp(27px, 8.5vw, 34px); }
  .pvc { width: 100%; }
}
.pack__prix i em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 13px; }
@media (max-width: 900px) { .packs--abo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1000px) { .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .packs { grid-template-columns: minmax(0, 1fr); } .fondation { border-radius: 22px; padding: 16px 20px; } .fondation b { font-size: 16px; } }

/* ---------- questions ---------- */
.faq__h { text-align: center; }
.faq { max-width: 820px; margin: clamp(28px, 4vw, 48px) auto 0; border-bottom: 1px solid var(--v-line); }
.faq details { border-top: 1px solid var(--v-line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 17px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-size: 26px; font-weight: 300; color: var(--v-fg3); transition: transform .3s var(--v-ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 22px; color: var(--v-fg2); max-width: 64ch; line-height: 1.6; }

/* ---------- la pré-inscription — reprise de site.css ---------- */
.insc { position: relative; overflow: clip; margin-top: clamp(64px, 8vw, 120px); padding: clamp(96px, 12vw, 160px) var(--v-gut) clamp(96px, 12vw, 140px); border-radius: var(--v-rad) var(--v-rad) 0 0; background: var(--v-surf); border-top: 1px solid var(--v-surf-line); }
.insc__in { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; text-align: center; }
.insc__h { font-size: clamp(56px, 10vw, 140px); }
.insc__lede { margin: 24px auto 0; }
.formulaire, .merci { margin-top: 36px; padding: clamp(22px, 3vw, 32px); text-align: left; }
/* les trois étapes à côté du formulaire (16.10) : numérotées dans la police d'affiche, serrées */
.insc__pas { list-style: none; margin: 28px auto 0; padding: 0; display: grid; gap: 14px; text-align: left; max-width: 440px; counter-reset: pas; }
.insc__pas li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; align-items: start; counter-increment: pas; }
.insc__pas li::before { content: counter(pas, decimal-leading-zero); grid-row: 1 / 3; font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1; color: var(--acc); padding-top: 1px; letter-spacing: .02em; }
.insc__pas b, .insc__pas span { grid-column: 2; }   /* le numéro à gauche sur deux lignes, le titre et la phrase à droite */
.insc__pas b { display: block; font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.insc__pas span { display: block; margin-top: 3px; font-size: 14px; color: var(--v-fg3); line-height: 1.5; }
/* desktop (≥ 1024 px) : deux colonnes — le titre et les étapes à gauche, collés au défilement, le formulaire à droite */
@media (min-width: 1024px) {
  .insc__in { max-width: var(--v-max); text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 520px); gap: clamp(36px, 5vw, 96px); align-items: start; }
  .insc__txt { position: sticky; top: 112px; }
  .insc__h { font-size: clamp(60px, 7vw, 124px); }
  .insc__lede { margin-left: 0; margin-right: 0; }
  .insc__pas { margin-left: 0; margin-right: 0; max-width: 460px; }
  .formulaire, .merci { margin-top: 0; }
  .insc__form .annees { grid-template-columns: repeat(7, minmax(0, 1fr)); }   /* 14 volées = deux rangées */
}
@media (min-width: 1280px) { .insc__in { grid-template-columns: minmax(0, 1.05fr) minmax(440px, 600px); gap: clamp(48px, 7vw, 120px); } }
.formulaire[hidden], .merci[hidden] { display: none; }
.piege { position: absolute; left: -9999px; }
.champ-f { border: 0; margin-top: 22px; }
.champ-f:first-of-type { margin-top: 0; }
.champ-f__k { display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.champ-f__aide { margin-top: 8px; font-size: 13.5px; color: var(--v-fg3); }
.champ-f__in { width: 100%; min-height: 52px; padding: 0 18px; border-radius: 16px; border: 1px solid #ffffff26; background: #ffffff08; color: var(--v-fg); font: 500 17px/1.2 var(--ui); transition: border-color .25s ease, box-shadow .25s ease; }
.champ-f__in::placeholder { color: var(--v-fg3); }
.champ-f__in:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 25%, transparent); }
.champ-f__in--court { max-width: 160px; }
.annees { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.annee { position: relative; display: block; cursor: pointer; }
.annee input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
/* Les années sont des années, pas des couleurs : pas de pastille, l'état coché
   prend la couleur CHOISIE par le visiteur (--acc). */
.annee span { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--v-pill); border: 1px solid var(--v-line); background: #ffffff08; color: var(--v-fg2); font: 600 14px/1 var(--ui); font-variant-numeric: tabular-nums; transition: background-color .25s ease, border-color .25s ease; }
.annee:hover span { background: #ffffff12; }
.annee input:checked + span { border-color: var(--acc); color: var(--v-fg); background: color-mix(in srgb, var(--acc) 18%, transparent); }
.annee input:focus-visible + span { outline: 2px solid var(--v-fg); outline-offset: 3px; }
@media (max-width: 480px) { .annees { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .annee span { min-height: 42px; font-size: 13.5px; } }
.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin-top: 24px; font-size: 14px; line-height: 1.55; color: var(--v-fg2); cursor: pointer; }
.consent input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--acc); }
.consent a { color: var(--v-fg); }
.formulaire__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.formulaire__note { font-size: 13.5px; color: var(--v-fg3); }
.formulaire__etat { min-height: 1.6em; margin-top: 14px; font-size: 14.5px; color: var(--v-fg2); }
.formulaire__etat.erreur { color: #ffb4a8; }
.btn-plein:disabled { opacity: .5; cursor: default; transform: none; }
.merci { text-align: center; }
.merci__h { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.merci__h b { color: var(--acc); }
.merci__p { margin: 14px auto 22px; color: var(--v-fg2); max-width: 40ch; }
/* liste d'attente virale (au succès de la pré-inscription) */
.merci__viral { max-width: 430px; margin: 20px auto 0; padding-top: 18px; border-top: 1px solid var(--v-surf-line); display: grid; gap: 13px; text-align: left; }
.merci__viral:empty { display: none; }
.viral__standing { font: 600 15px/1.45 var(--ui); color: var(--v-fg); margin: 0; }
.viral__board { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.viral__row { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 10px; font-size: 13px; color: var(--v-fg2); }
.viral__yr { font-weight: 600; font-variant-numeric: tabular-nums; }
.viral__bar { height: 8px; border-radius: 5px; background: #ffffff14; overflow: hidden; }
.viral__bar i { display: block; height: 100%; border-radius: 5px; background: #ffffff33; }
.viral__row.is-me .viral__yr { color: var(--v-fg); }
.viral__row.is-me .viral__bar i { background: linear-gradient(90deg, var(--s-1), var(--s-2) 55%, var(--s-3)); }
.viral__n { font-variant-numeric: tabular-nums; color: var(--v-fg3); min-width: 32px; text-align: right; }
.viral__push { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--v-fg3); }
.viral__link { display: flex; gap: 8px; }
.viral__link input { flex: 1; min-width: 0; background: var(--v-surf2); border: 1px solid var(--v-surf-line); border-radius: 12px; padding: 10px 12px; color: var(--v-fg2); font: 500 12.5px/1 var(--ui); }
.viral__copy { flex: none; border: 1px solid var(--v-surf-line); background: #ffffff10; color: var(--v-fg); border-radius: 12px; padding: 10px 14px; font: 600 13px/1 var(--ui); cursor: pointer; transition: background .2s; }
.viral__copy:hover { background: #ffffff18; }
.viral__share { display: flex; gap: 8px; }
.viral__wa, .viral__nat { flex: 1; text-align: center; border-radius: 12px; padding: 11px 14px; font: 600 14px/1 var(--ui); cursor: pointer; text-decoration: none; }
.viral__wa { background: #25d366; color: #05270f; border: 0; }
.viral__nat { background: #ffffff12; color: var(--v-fg); border: 1px solid var(--v-surf-line); }

/* ---------- le pied ---------- */
.pied { border-top: 1px solid var(--v-line); padding: 48px var(--v-gut) calc(28px + env(safe-area-inset-bottom)); background: var(--v-bg); }
.pied__in { max-width: var(--v-max); margin: 0 auto; display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
.pied__m { font-family: var(--display); font-size: 22px; letter-spacing: .05em; }
.pied__marque p { margin-top: 10px; font-size: 13.5px; color: var(--v-fg3); max-width: 30ch; line-height: 1.5; }
.pied h2 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg3); margin-bottom: 12px; }
.pied nav a, .pied nav span { display: block; padding: 4px 0; font-size: 14px; color: var(--v-fg2); text-decoration: none; }
.pied nav span { color: var(--v-fg3); }
.pied nav a:hover { color: var(--v-fg); }
.pied__bas { max-width: var(--v-max); margin: 36px auto 0; padding-top: 18px; border-top: 1px solid var(--v-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: 12.5px; color: var(--v-fg3); }
@media (max-width: 900px) { .pied__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied__marque { grid-column: 1 / -1; } }

/* ---------- la fiche d'une offre ---------- */
/* Centrage explicite : Safari laisse un <dialog> en haut à gauche quand sa
   hauteur n'est pas définie (pas de `height: fit-content` en position fixe). */
.fiche { position: fixed; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; border: 0; padding: 0; background: transparent; width: min(92vw, 440px); max-width: none; max-height: 92vh; overflow: auto; color: var(--v-fg); }
.fiche:not([open]) { display: none; }
button.btn-lien { border: 0; background-color: transparent; padding: 0 2px; cursor: pointer; }
.fiche::backdrop { background: #0b0b0ccc; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fiche__in { position: relative; padding: 28px 22px 22px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); text-align: center; overflow: hidden; }
.fiche__x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--v-line); background: #0b0b0c66; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
/* la couverture de la fiche : la même image qu'en tête de carte (photo en démo, illustration en public), plein cadre */
.fiche__cover { position: relative; aspect-ratio: 16 / 9; margin: -28px -22px 18px; overflow: hidden; background: var(--v-surf); }
.fiche__tete { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fiche__nom { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -.01em; }
.fiche__type { font-size: 13px; color: var(--v-fg3); margin-top: 6px; }
.fiche__r { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font-weight: 700; font-size: 15px; }
.fiche__desc { margin: 14px auto 0; max-width: 34ch; font-size: 14.5px; color: var(--v-fg2); line-height: 1.5; }
.fiche__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.fiche__meta span { padding: 6px 11px; border-radius: var(--v-pill); border: 1px solid var(--v-line); font-size: 12.5px; color: var(--v-fg2); }
.fiche__meta span.v { --acc: #9b7bff; border-color: color-mix(in srgb, #8b5cf6 55%, transparent); color: #cbbcff; }
.fiche__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.fiche__acts .btn-plein { min-height: 48px; }
.fiche__acts .btn-lien { padding: 0 8px; }
.fiche__note { margin-top: 14px; font-size: 12px; color: var(--v-fg3); }

@media (prefers-reduced-motion: reduce) {
  .tcard, .treco, .adeal, .aflash, .tuile, .accHeure--actif, .teinte, .chip { transition: none; }
}

/* ====================================================================
   QUATRE PAGES — l'en-tête des pages intérieures, et la passe responsive
   ==================================================================== */
/* l'en-tête d'une page intérieure (offres, enseignes) : le même souffle que le héros, sans téléphone */
.entete { position: relative; overflow: hidden; padding: clamp(150px, 15vw, 190px) 0 clamp(28px, 4vw, 48px); }
.entete__in { position: relative; z-index: 1; }
.entete .h2 { margin-top: 10px; max-width: 30ch; }
/* un groupe de mots qui ne se coupe jamais (« 16 à 29 ans ») : SplitText découpe aussi sur les espaces insécables, le nowrap, lui, tient */
.nb { white-space: nowrap; }
.entete .lede { margin-top: 20px; max-width: 56ch; }
.entete .band__acts { margin-top: 26px; }
.sect--serre { padding-top: clamp(28px, 3.5vw, 48px); }
/* la bande de la licence en tête de page (licence.html) */
.band--haut { margin-top: 0; padding-top: clamp(150px, 15vw, 190px); }

/* le bandeau du haut : texte court et lien court sur un téléphone, au lieu d'une phrase tronquée */
.topbar .court { display: none; }
@media (max-width: 640px) {
  .topbar { font-size: 12.5px; padding: 0 12px; }
  .topbar .long { display: none; }
  .topbar a.court { display: inline; text-decoration: none; font-weight: 600; }
  .topbar a.court b { font-weight: 800; }
}

/* le héros sur un téléphone : le téléphone pointe depuis le pli au lieu d'occuper deux écrans */
@media (max-width: 900px) {
  .hero__cadre { max-height: 460px; overflow: hidden; padding: 0 14px; margin: 0 -14px;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
  .hero { padding-bottom: clamp(16px, 4vw, 40px); }
}
@media (max-width: 560px) {
  .hero { padding-top: 120px; }   /* remonte la pastille « Pré-lancement » : moins d'espace mort sous le menu fixe (bas à ~106px) */
  .tel { width: min(300px, 80vw); }
  .hero__cadre { max-height: 420px; }
  .flot--a { left: -8%; top: 12%; }
  .flot--b { right: -8%; top: 44%; }
  .flot--c { left: -4%; bottom: 10%; }
}

/* les rubriques : une rangée qui défile au doigt, comme dans l'app */
@media (max-width: 640px) {
  .rubs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--v-gut)); padding: 2px var(--v-gut) 6px; scroll-padding: 0 var(--v-gut); }
  .rubs::-webkit-scrollbar { display: none; }
  .rubs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .villes { gap: 6px; }
  .chip--v { min-height: 42px; padding: 0 12px; }
}

/* le deal du jour : sur un téléphone, le grand chiffre reste lisible, les flashs prennent la largeur */
@media (max-width: 560px) {
  .adeal__cover { min-height: 160px; padding: 16px 18px; }
  .adeal__body { padding: 16px 18px 18px; }
  .aflash { padding: 14px 16px; gap: 12px; }
  .aflash__r { min-width: 62px; font-size: 24px; }
}

/* la licence sur un téléphone : la carte d'abord, le texte ensuite ; les pastilles de couleur restent tapables */
@media (max-width: 900px) {
  .band--lic .band__in { grid-template-columns: minmax(0, 1fr); }
  .teintes { gap: 8px; }
  .choix { max-width: 100%; }
}

/* les en-têtes de section : les liens passent sous le titre quand la ligne est trop courte */
@media (max-width: 640px) {
  .sect__tete { gap: 12px 24px; }
  .sect__liens { gap: 2px 18px; }
  .tsectH { flex-wrap: wrap; gap: 4px 10px; }
}

/* les packs : un seul tarif par écran, lisible d'un pouce */
@media (max-width: 560px) {
  .pack { padding: 22px 18px 20px; }
  .tarifs__k { margin-top: 24px; }
  .bascule button { min-height: 36px; padding: 0 13px; font-size: 13px; }
}

/* le pied sur un téléphone : deux colonnes, la marque en travers, le bas en pile */
@media (max-width: 560px) {
  .pied { padding-top: 36px; }
  .pied__in { gap: 26px 20px; }
  .pied__bas { flex-direction: column; gap: 6px; }
}

/* ====================================================================
   MOUVEMENT — la page vit parce que le lecteur bouge (souris, défilement, temps réel)
   ==================================================================== */
/* le passage d'une page à l'autre : le contenu glisse, le bandeau et la barre restent en place */
@view-transition { navigation: auto; }
#topbar { view-transition-name: bandeau; }
#nav { view-transition-name: barre; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vtSortie .26s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: vtEntree .5s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes vtSortie { to { opacity: 0; transform: translateY(-14px); } }
  @keyframes vtEntree { from { opacity: 0; transform: translateY(18px); } }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* le téléphone du héros s'incline vers la souris (vitrine.js) */
.hero__cadre { transform-style: preserve-3d; }
/* les sceaux et les flèches répondent au survol des cartes */
.ens__logo { transition: transform .35s var(--v-ease); }
.aflash__go, .tuile h3 { transition: transform .3s var(--v-ease); }
@media (hover: hover) {
  .tcard:hover .ens__logo, .tcomp:hover .ens__logo, .aflash:hover .ens__logo, .accHeure--actif:hover .ens__logo, .marq__it:hover .ens__logo, .treco:hover .ens__logo { transform: rotate(-6deg) scale(1.06); }
  .aflash:hover .aflash__go { transform: translateX(4px); }
  .tuile:hover h3 { transform: translateY(-2px); }
}

/* ====================================================================
   COMMENT ÇA MARCHE (comment.html) — repris de l'ancienne vitrine « Ton âge suffit » (site.css)
   ==================================================================== */
.temps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: clamp(36px, 5vw, 64px); }
.temps li { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--v-line); }
.temps__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--acc); color: var(--v-bg); font-size: 14px; font-weight: 700; transition: background-color 1s var(--v-ease); }
.temps h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.035em; line-height: 1.12; }
.temps p { color: var(--v-fg2); font-size: 16px; line-height: 1.6; }
@media (max-width: 760px) { .temps { grid-template-columns: minmax(0, 1fr); } }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 4.5vw, 56px); }
.bento__c { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; padding: 28px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.bento__c--a { grid-row: span 2; min-height: 520px; background: radial-gradient(90% 70% at 80% 10%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 70%), var(--v-surf); }
.bento__c--b { grid-column: span 2; }
.zero { position: absolute; top: 18px; right: 26px; font-family: var(--display); font-weight: 400; font-size: clamp(96px, 11vw, 170px); line-height: .9; color: #ffffff14; }
.bento__c--a .zero { font-size: clamp(160px, 20vw, 300px); color: var(--acc); opacity: .95; transition: color 1s var(--v-ease); }
.bento__c--c .zero, .bento__c--d .zero { font-size: clamp(72px, 7vw, 110px); top: 16px; right: 22px; }
.bento__c--c, .bento__c--d { min-height: 270px; }
.bento__c h3 { font-size: clamp(21px, 2vw, 27px); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.bento__c h3 s { text-decoration-thickness: 2px; text-decoration-color: var(--acc); }
.bento__c p { margin-top: 10px; color: var(--v-fg2); font-size: 15.5px; line-height: 1.6; max-width: 40ch; }
@media (max-width: 860px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .zero { font-size: clamp(78px, 20vw, 104px); top: 14px; right: 18px; }
  .bento__c--a .zero { font-size: clamp(96px, 26vw, 122px); opacity: .9; }
  .bento__c--a { grid-row: auto; min-height: 0; padding-top: 128px; }
  .bento__c--b { grid-column: auto; }
  .bento__c, .bento__c--c, .bento__c--d { min-height: 0; padding-top: 110px; }
}
.volees-sec__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.volees-sec__h { font-size: clamp(44px, 6.5vw, 100px); }
.volees { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; margin-top: clamp(32px, 5vw, 56px); }
.volee { position: relative; aspect-ratio: 1 / 2.1; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); padding: 12px 8px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--v-fg); cursor: pointer; transition: transform .45s var(--v-ease), border-color .45s var(--v-ease); font: inherit; text-align: left; }
.volee b { font-family: var(--display); font-weight: 400; font-size: clamp(15px, 1.7vw, 26px); line-height: .9; }
.volee span { margin-top: 4px; font-size: 11.5px; font-weight: 500; opacity: .8; }
.volee:hover { transform: translateY(-8px); }
.volee.ici { transform: translateY(-16px); border-color: var(--acc); background: color-mix(in srgb, var(--acc) 22%, var(--v-surf)); box-shadow: 0 30px 50px -20px var(--acc); }
.volee:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 2px; }
.volees__leg { margin-top: clamp(36px, 5vw, 56px); font-size: 14px; color: var(--v-fg3); max-width: 60ch; }
@media (max-width: 860px) { .volees-sec__tete { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .volees { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
  .volee { aspect-ratio: 1 / 1.35; padding: 8px 6px; }
  .volee b { font-size: 14px; }
  .volee span { font-size: 10px; }
  .volee.ici, .volee:hover { transform: none; }
  .volee.ici { outline: 2px solid var(--v-fg); outline-offset: 2px; box-shadow: none; }
  .volees__leg { margin-top: 24px; }
}
.regle blockquote p { font-size: clamp(32px, 5.4vw, 80px); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; }
.regle blockquote p span { color: var(--acc); transition: color 1s var(--v-ease); }
.regle blockquote footer { margin-top: 22px; font-size: 14px; color: var(--v-fg3); }
.insc--court { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 110px); }
.band__acts--centre { justify-content: center; }
/* Le mur de curiosité (décision 31) : offres libres à parcourir, récompense derrière la licence. */
.deverrou__in { max-width: 680px; text-align: center; }
.deverrou__in .lede { margin-inline: auto; }
.entete--court { padding-bottom: clamp(16px, 2vw, 24px); }

/* ---------- un document (confidentialite.html) ---------- */
.doc { max-width: 720px; margin: 0 auto; padding: clamp(150px, 15vw, 190px) var(--v-gut) clamp(72px, 9vw, 110px); }
.doc h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.doc h2 { margin-top: 40px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.doc h3 { margin-top: 24px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.doc p, .doc li { margin-top: 12px; color: var(--v-fg2); line-height: 1.65; }
.doc ul { padding-left: 20px; }
.doc b { color: var(--v-fg); font-weight: 500; }
.doc .date { color: var(--v-fg3); font-size: 14px; margin-top: 10px; }
.doc__note { padding: 10px 14px; border-radius: 12px; background: #ffffff0a; border: 1px solid var(--v-line); font-size: 14px; }
.doc__note[hidden] { display: none; }
.doc__retour { margin-top: 40px; }
/* Ce qui n'est pas encore décidé se voit, pour ne pas être oublié en ligne. */
.a-completer { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #ffb4a826; color: #ffb4a8; font-size: 14px; }

/* ---------- la réservation d'une place fondatrice (inscription-enseigne.html) ---------- */
.ensf { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ensf__pitch { position: sticky; top: 120px; }
.ensf__pitch .puces { margin-top: 22px; }
.ensf__lien { margin-top: 22px; }
.ensf__form, .ensf__merci { margin-top: 0; }
.ensf__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ensf__grille .champ-f { margin-top: 18px; }
.ensf__grille .champ-f:first-child, .ensf__grille .champ-f:nth-child(2) { margin-top: 0; }
.ensf__large { grid-column: 1 / -1; }
.req { color: var(--acc); }
.champ-f__in--long { min-height: 110px; padding: 14px 18px; resize: vertical; line-height: 1.5; }
.ensf .formulaire__note { margin-top: 16px; }
.merci__demo { color: var(--acc); font-weight: 600; }
.merci__demo[hidden] { display: none; }
@media (max-width: 900px) { .ensf { grid-template-columns: minmax(0, 1fr); } .ensf__pitch { position: static; } }
@media (max-width: 560px) { .ensf__grille { grid-template-columns: minmax(0, 1fr); } .ensf__grille .champ-f:nth-child(2) { margin-top: 18px; } }

/* ====================================================================
   VENDRE AUX ENSEIGNES (enseignes.html, paiement.html)
   ==================================================================== */
/* les cent places : compteur honnête + ce que gagnent les fondatrices */
.fond { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(16px, 2.5vw, 32px); align-items: stretch; }
.fond__compte { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: clamp(24px, 3vw, 36px); background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 16%, var(--v-surf)), var(--v-surf) 70%); }
.fond__n { font-family: var(--display); font-weight: 400; font-size: clamp(72px, 9vw, 128px); line-height: .9; letter-spacing: .01em; color: var(--acc); transition: color 1s var(--v-ease); }
.fond__l { font-size: 15px; font-weight: 600; }
.fond__barre { height: 8px; margin-top: 10px; border-radius: 999px; background: #ffffff12; overflow: hidden; }
.fond__barre i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--acc); transition: width 1.2s var(--v-ease), background-color 1s var(--v-ease); }
.fond__s { font-size: 13px; color: var(--v-fg3); }
.fond__s b { color: var(--v-fg); }
.fond__gains { list-style: none; display: grid; gap: 12px; align-content: center; }
.fond__gains li { position: relative; padding: 18px 20px 18px 54px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); font-size: 15.5px; line-height: 1.5; color: var(--v-fg2); }
.fond__gains li b { color: var(--v-fg); font-weight: 600; }
.fond__gains li::before { content: '✓'; position: absolute; left: 18px; top: 16px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: var(--v-bg); font-size: 13px; font-weight: 800; transition: background-color 1s var(--v-ease); }
@media (max-width: 860px) { .fond { grid-template-columns: minmax(0, 1fr); } }
/* le prix fondateur sur chaque formule : le fondateur d'abord, le normal barré */
.packs__fond { margin: 14px 0 0; font-size: 14.5px; color: var(--v-fg2); max-width: 70ch; }
.packs__fond b { color: var(--v-fg); font-weight: 600; }
.pack__fond { display: inline-flex; align-items: baseline; gap: 6px; }
.pack__fondtag { display: inline-block; margin-top: 14px; padding: 4px 9px; border-radius: var(--v-pill); background: color-mix(in srgb, var(--acc) 18%, transparent); color: color-mix(in srgb, var(--acc) 72%, var(--v-fg)); font: 700 11px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; transition: color 1s var(--v-ease), background-color 1s var(--v-ease); }
.pack__fondtag + .pack__prix { margin-top: 8px; }
.pack__fondtag[hidden] { display: none; }
.pack__normal { margin-top: 6px; font-size: 13px; color: var(--v-fg3); line-height: 1.45; }
.pack__normal s { color: var(--v-fg2); text-decoration-thickness: 1.5px; }
.pack__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font: 600 14px/1 var(--ui); color: var(--v-fg); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .45s var(--v-ease); }
.pack__cta:hover { background-size: 0 1px; }
.pack__cta .fl { transition: transform .3s var(--v-ease); }
.pack__cta:hover .fl { transform: translateX(3px); }
/* le parcours de paiement (démo) */
.pay__etapes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); }
.pay__etapes li { 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); font: 600 13.5px/1.2 var(--ui); color: var(--v-fg3); }
.pay__etapes li i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--v-line); font-style: normal; font-size: 12px; }
.pay__etapes li.ici { color: var(--v-fg); border-color: color-mix(in srgb, var(--acc) 55%, var(--v-surf-line)); }
.pay__etapes li.ici i { background: var(--acc); color: var(--v-bg); border-color: transparent; }
.pay__etapes li.fait i { background: var(--v-fg); color: var(--v-bg); border-color: transparent; }
.pay__panneau[hidden] { display: none; }
.pay__h { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.pay__sous { margin-top: 10px; color: var(--v-fg2); max-width: 60ch; }
.pay__sous b { color: var(--v-fg); font-weight: 600; }
.choixf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.choixf__c { position: relative; display: block; cursor: pointer; }
.choixf__c input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choixf__in { display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 18px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1.5px solid var(--v-surf-line); transition: border-color .25s ease, transform .3s var(--v-ease); }
.choixf__c:hover .choixf__in { transform: translateY(-2px); }
.choixf__c input:checked + .choixf__in { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, var(--v-surf)); }
.choixf__c input:focus-visible + .choixf__in { outline: 2px solid var(--v-fg); outline-offset: 3px; }
.choixf__k { font: 700 11px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg3); }
.choixf__t { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.choixf__p { margin-top: auto; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: .01em; }
.choixf__p i { font-style: normal; font-family: var(--ui); font-weight: 600; font-size: 12px; color: var(--v-fg3); margin-left: 6px; letter-spacing: .04em; }
.choixf__n { font-size: 12.5px; color: var(--v-fg3); }
.choixf__n s { color: var(--v-fg2); }
.pay__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.pay__acts--ok { justify-content: center; }
.pay__deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 22px; }
.pay__carte { padding: clamp(20px, 2.5vw, 28px); }
.pay__carte .champ-f + .champ-f { margin-top: 16px; }
.pay__mini { margin-top: 14px; font-size: 12.5px; color: var(--v-fg3); line-height: 1.5; }
.pay__free { margin-top: 16px; text-align: center; }
.pay__free a { color: var(--v-fg2); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--v-fg3) 50%, transparent); padding-bottom: 2px; transition: color .3s var(--v-ease), border-color .3s var(--v-ease); }
.pay__free a:hover { color: var(--acc); border-color: var(--acc); }
.pay__lignes { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; margin: 0; }
.pay__lignes dt { color: var(--v-fg2); font-size: 15px; }
.pay__lignes dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pay__lignes .rem dd { color: var(--acc); }
.pay__lignes .total { padding-top: 12px; border-top: 1px solid var(--v-line); font-size: 18px; }
.pay__lignes .total dd { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: .01em; }
.pay__puis { margin-top: 16px; font-size: 13.5px; color: var(--v-fg3); line-height: 1.5; }
.pay__demo { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); color: var(--v-fg); font-size: 13.5px; }
.pay__mock { max-width: 560px; margin-top: 18px; }
.pay__onglets { display: inline-flex; padding: 4px; border-radius: var(--v-pill); background: #ffffff0a; border: 1px solid var(--v-line); margin-bottom: 18px; }
.pay__onglet { min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--v-pill); background: transparent; color: var(--v-fg2); font: 600 13.5px/1 var(--ui); cursor: pointer; }
.pay__onglet[aria-selected="true"] { background: var(--v-fg); color: var(--v-bg); }
.pay__grille3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.pay__twint { color: var(--v-fg2); font-size: 14.5px; line-height: 1.5; }
.pay__qr { width: 160px; height: 160px; margin: 16px auto 0; border-radius: 16px; background: repeating-linear-gradient(90deg, #f4f4ef 0 8px, transparent 8px 16px), repeating-linear-gradient(0deg, #f4f4ef 0 8px, transparent 8px 16px); background-blend-mode: multiply; opacity: .55; }
.pay__payer { width: 100%; justify-content: center; margin-top: 22px; }
.pay__payer[disabled] { opacity: .6; cursor: progress; }
.pay__okc { text-align: center; max-width: 640px; margin: 18px auto 0; }
.pay__okc .pay__lignes { margin-top: 20px; text-align: left; }
.pay__coche { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--acc); color: var(--v-bg); font-size: 26px; font-weight: 800; }
@media (max-width: 900px) { .choixf { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pay__deux { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pay__etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pay__etapes li span { font-size: 12.5px; } .choixf { grid-template-columns: minmax(0, 1fr); } .choixf__in { min-height: 0; } .pay__grille3 { grid-template-columns: minmax(0, 1fr); } }
/* le tunnel (paiement.html, décision Max 13.10) : rien que l'achat, chaque étape dans un écran.
   Mesuré avant : à 1440×900 le bouton « Continuer » tombait 290 px sous le pli, le titre d'entête
   prenait 534 px. Ici l'entête fait ~170 px, la barre descend à 12 px faute de bandeau. */
.tunnel .barre { top: 12px; width: min(calc(100% - 24px), 880px); }
.barre__retour { margin: 0 auto 0 14px; padding: 8px 12px; border-radius: var(--v-pill); font: 600 13.5px/1 var(--ui); color: var(--v-fg2); text-decoration: none; white-space: nowrap; transition: color .2s ease, background-color .2s ease; }
.barre__retour:hover { color: var(--v-fg); background: #ffffff10; }
.entete--tunnel { padding: clamp(76px, 7vw, 92px) 0 clamp(8px, 1vw, 10px); }
.tunnel .pay { padding-top: clamp(16px, 2vw, 22px); }
.entete .pay__titre { margin-top: 6px; font-size: clamp(28px, 3.2vw, 40px); max-width: none; }
.pied--tunnel { padding: 22px var(--v-gut) calc(18px + env(safe-area-inset-bottom)); }
.pied__tunnel { max-width: var(--v-max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 12.5px; color: var(--v-fg3); text-align: center; }
.pied__tunnel a { color: var(--v-fg2); text-decoration: none; }
.pied__tunnel a:hover { color: var(--v-fg); }
.tunnel .pay__etapes { margin-bottom: clamp(16px, 2vw, 20px); }
/* 1. la formule déjà choisie, confirmée d'un regard ; « Changer » ouvre la grille des sept */
.pay__choisie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: clamp(20px, 2.5vw, 28px); }
.pay__choisie[hidden], #payChoixBloc[hidden] { display: none; }
.pay__choisie-t { display: block; margin-top: 6px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.pay__choisie-n { display: block; margin-top: 8px; font-size: 13.5px; color: var(--v-fg3); }
.pay__choisie-n s { color: var(--v-fg2); }
.pay__choisie-p { grid-row: 1 / 3; grid-column: 2; margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4vw, 48px); line-height: 1; letter-spacing: .01em; text-align: right; }
.pay__choisie-p i { display: block; margin-top: 6px; font-style: normal; font-family: var(--ui); font-weight: 600; font-size: 12px; color: var(--v-fg3); letter-spacing: .04em; }
.pay__choisie .btn-lien { grid-column: 1 / -1; justify-self: start; }
.tunnel .choixf { margin-top: 18px; }
.tunnel .choixf__in { min-height: 132px; padding: 16px; }
/* 2. les coordonnées que la facture exige, sur deux colonnes ; le récapitulatif reste sous les yeux */
.pay__carte-h { margin-bottom: 16px; }
.pay__grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pay__grille .champ-f { grid-column: span 3; margin-top: 0; }
.pay__grille .pay__large { grid-column: 1 / -1; }
.pay__grille .pay__rue { grid-column: span 3; }
.pay__grille .pay__npa { grid-column: span 1; }
.pay__grille .pay__loc { grid-column: span 2; }
.pay__form .champ-f__k { font-size: 13px; margin-bottom: 6px; }
.pay__form .champ-f__in { min-height: 46px; padding: 0 14px; font-size: 15px; border-radius: 13px; }
.pay__form .champ-f__aide { margin-top: 6px; font-size: 12.5px; line-height: 1.45; }
.pay__opt { font-weight: 500; color: var(--v-fg3); }
.pay__consent { margin-top: 16px; font-size: 13px; }
.pay__acts--resume { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; }
.pay__acts--resume .btn-plein { justify-content: center; }
.pay__acts--resume .btn-lien { align-self: center; }
.pay__resume .pay__mini { margin-top: 14px; }
.pay__err { margin-top: 12px; color: #FF7094; font-size: 13.5px; }
.pay__err[hidden] { display: none; }
.pay__resume { position: sticky; top: 90px; align-self: start; }
.pay__deux { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.pay__deux--paiement { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
.tunnel .pay__mock { max-width: none; margin-top: 0; }
.pay__lignes3 { margin-bottom: 14px; }
.pay__okc .pay__mini { max-width: 48ch; margin-inline: auto; }
@media (max-width: 900px) { .pay__deux, .pay__deux--paiement { grid-template-columns: minmax(0, 1fr); } .pay__resume { position: static; } }
/* sur un téléphone, le bouton de l'étape reste sous le pouce */
@media (max-width: 640px) {
  .pay__acts--colle { position: sticky; bottom: 0; z-index: 5; margin: 16px calc(-1 * var(--v-gut)) 0; padding: 12px var(--v-gut) calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--v-bg) 72%, transparent); }
  .pay__acts--colle .btn-plein { flex: 1; justify-content: center; }
  .pay__resume .pay__acts--colle { margin-inline: calc(-1 * clamp(20px, 2.5vw, 28px)); padding-inline: clamp(20px, 2.5vw, 28px); background: linear-gradient(to top, var(--v-surf) 72%, transparent); }
  .pay__grille .champ-f, .pay__grille .pay__rue, .pay__grille .pay__loc { grid-column: 1 / -1; }
  .pay__grille .pay__npa { grid-column: span 2; }
  .pay__choisie { grid-template-columns: minmax(0, 1fr); }
  .pay__choisie-p { grid-row: auto; grid-column: 1; text-align: left; }
}

/* ====================================================================
   LES TROIS GESTES + LA LICENCE QUI VOYAGE (enseignes.html)
   Porté de l'ancienne page enseigne/ (effet signature validé le 30.09.2026, dossier
   archivé le 20.10). L'entête porte la licence à droite du texte ; plus bas, la scène —
   le comptoir sur un téléphone, la licence posée à côté — reste collée à droite pendant
   que les trois gestes défilent à gauche. Sur ordinateur, un calque fixe (#voyageur)
   transporte la licence de l'entête jusqu'à la scène, recto puis verso puis recto
   (vitrine.js, bloc « au comptoir »). Tout ce qui bouge n'anime que transform et
   opacity ; les ombres sont des box-shadow posés une fois, jamais un filter.
   ==================================================================== */
/* l'entête de la page enseignes : le texte à gauche, la licence à droite */
.entete__in--doc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.entete__doc { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.entete__doc .flotte { width: min(300px, 68vw); }
.entete__doc .licLeg { margin-top: 18px; }
/* le lien croisé, discret : une ligne sous le lede, pas un second appel à l'action */
.croise { margin-top: 14px; }
/* Preuve sociale honnête près du CTA (E3) : la demande réelle qui attend. Accent, discret. */
.hero-proof { margin-top: 18px; display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px/1.35 var(--ui); color: var(--acc); }
.hero-proof--c { justify-content: center; } /* dans la bande accueil, centrée */
/* Le lien croisé « 16-29 ans ? » déplacé sous les actions : détaché des boutons, discret,
   pour qu'un commerçant qui arrive lise d'abord SON appel à l'action. */
.croise--bas { margin-top: 24px; }
.btn-lien--croise { min-height: 36px; font-size: 14px; color: var(--v-fg2); }
.btn-lien--croise:hover { color: var(--v-fg); }
.entete--doc .band__acts { margin-top: 22px; }
@media (max-width: 999px) {
  .entete__in--doc { grid-template-columns: minmax(0, 1fr); }
  .entete__doc { margin-top: clamp(32px, 7vw, 56px); }
  .entete__doc .flotte { width: min(240px, 58vw); }
}

/* ---------- la section ---------- */
.gestes { padding-top: clamp(72px, 9vw, 130px); }
.gestes__tete { max-width: 720px; }
.gestes__tete .lede { margin-top: 18px; }
.gestes__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(32px, 4vw, 56px); }
.gestes__l { list-style: none; grid-column: 1; grid-row: 1; }
/* La scène colle à 14 % de la hauteur de l'écran : c'est aussi la fin du voyage
   (vitrine.js, `end: 'top 14%'`), pour que la carte se pose là où la scène s'arrête. */
.gestes__scene { grid-column: 2; grid-row: 1; position: sticky; top: 14vh; align-self: start; padding-bottom: 24px; }
/* La composition : le téléphone à droite, la licence devant lui à gauche, un peu plus bas,
   comme une carte qu'on tend par-dessus le comptoir. Les deux partagent la même case de
   grille et se chevauchent de quelques pour cent. */
.gestes__compo { display: grid; grid-template-columns: minmax(0, 1fr); width: min(100%, 520px); margin: 0 auto; }
.comptoir { grid-area: 1 / 1; justify-self: end; width: 50%; z-index: 1; transition: opacity .45s ease; }
/* Geste 1 « montre » : l'écran du JEUNE (photo, QR, code) prend la place du comptoir, qui revient au geste « valide ». */
.illu-tel--scene { grid-area: 1 / 1; justify-self: end; align-self: center; width: 50%; z-index: 2; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.gestes__scene[data-etape="montre"] .illu-tel--scene { opacity: 1; }
.gestes__scene[data-etape="montre"] .comptoir { opacity: 0 !important; }   /* l'opacité du comptoir est posée en inline par GSAP (reveal) ; !important pour le crossfade avec le present-view */
/* 52 % + 50 % : la licence mord de 2 % sur le téléphone — son bord et sa marge, jamais l'écran */
.gestes__doc { grid-area: 1 / 1; justify-self: start; align-self: center; width: 52%; margin-top: 14%; z-index: 2; position: relative; }
.gestes__doc .lic { color: #edede7; box-shadow: 0 34px 70px -28px #000c, 0 30px 60px -16px #000a, 0 2px 0 #ffffff0a inset; }

/* les trois gestes : le temps qu'on lit prend la main (ScrollTrigger, vitrine.js) */
.geste { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 16px; align-content: center; min-height: 48vh; transition: opacity .5s var(--v-ease); }
.js .geste { opacity: .64; }
.js .geste.actif { opacity: 1; }
.geste__n { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; margin-top: .35em; border-radius: 50%; background: #ffffff12; font-size: 14px; font-weight: 600; transition: background-color .5s var(--v-ease), color .5s var(--v-ease); }
.geste.actif .geste__n { background: var(--acc); color: var(--v-bg); }
.geste h3 { font-size: clamp(26px, 2.9vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; }
.geste p { color: var(--v-fg2); font-size: 17px; line-height: 1.6; max-width: 40ch; }
.geste p b { color: var(--v-fg); font-weight: 500; }

/* ---------- le comptoir, sur un téléphone (gabarit CSS, pas d'image) ----------
   DA « pro sobre » du comptoir : un seul accent froid, l'indigo, posé sur le téléphone seul.
   La seule couleur de volée qui entre sur l'écran est celle de la licence qu'il vient de
   lire (--c) : le même objet, vu du jeune puis du commerçant. */
.comptoir {
  --acc: #8a90ff;
  position: relative; aspect-ratio: 9 / 18.6; border-radius: 40px; overflow: hidden;
  background: #0b0b0c; border: 1px solid #ffffff26; padding: 14px 11px; color: var(--v-fg);
  box-shadow: 0 0 0 7px #141417, 0 0 0 8px #ffffff14, 0 50px 100px -40px #000, 0 30px 70px -30px color-mix(in srgb, var(--acc) 50%, transparent);
}
.comptoir::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 12px; background: #050506; z-index: 3; }
.comptoir__ecran { height: 100%; overflow: hidden; padding-top: 30px; display: flex; flex-direction: column; gap: 10px; font-size: 12px; line-height: 1.35; }
.comptoir__haut { display: flex; justify-content: space-between; align-items: center; }
.comptoir__m { font-family: var(--display); font-size: 13px; letter-spacing: .05em; }
.comptoir__pill { font-size: 10px; color: var(--v-fg3); padding: 3px 8px; border-radius: var(--v-pill); border: 1px solid var(--v-line); }
/* Le sélecteur de vue tient dans l'écran quelle que soit la langue (« Meine Angebote ») :
   les onglets inactifs se compriment et se coupent, l'actif reste entier. */
.comptoir__seg { align-self: center; max-width: 100%; display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--v-pill); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.comptoir__seg span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 6px 9px; border-radius: var(--v-pill); font: 600 10px/1 var(--ui); color: var(--v-fg3); white-space: nowrap; }
.comptoir__seg span.on { flex: none; background: var(--acc); color: var(--v-bg); }
.comptoir__k { display: flex; align-items: center; gap: 6px; font: 700 9.5px/1 var(--ui); text-transform: uppercase; letter-spacing: .08em; color: var(--v-fg3); }
.comptoir__k em { margin-left: auto; font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; }
/* Les trois états de l'écran « Valider », empilés dans la même case ; seul celui du geste
   en cours est visible. Opacité et translation, rien d'autre. */
.comptoir__etats { display: grid; min-height: 118px; }
.comptoir__etats > * { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .4s var(--v-ease), transform .55s var(--v-ease); }
.comptoir[data-etat="montre"] .comptoir__valider,
.comptoir[data-etat="valide"] .comptoir__saisie,
.comptoir[data-etat="compte"] .comptoir__ok { opacity: 1; transform: none; }
/* 1. le bouton « Valider un passage », comme dans le comptoir (.valider, pro.css) */
.comptoir__valider { align-self: center; min-height: 76px; border-radius: 20px; background: var(--v-fg); color: var(--v-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 12px; text-align: center; box-shadow: 0 14px 36px -12px var(--acc); }
.comptoir__valider b { font: 600 13px/1 var(--ui); }
.comptoir__valider span { font: 500 10px/1.3 var(--ui); color: #0b0b0c; opacity: .55; }
/* 2. le code du moment, saisi (le vrai code de cette licence, qui change toutes les 30 s) */
.comptoir__saisie { display: flex; flex-direction: column; gap: 7px; }
.comptoir__code { display: block; text-align: center; font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: .14em; padding: 12px 6px; border-radius: 14px; border: 1px dashed #ffffff33; background: #ffffff0a; font-variant-numeric: tabular-nums; }
.comptoir__go { align-self: stretch; text-align: center; padding: 10px 12px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font: 700 11.5px/1 var(--ui); }
/* 3. la coche dans la couleur de la licence lue, la volée, le passage compté */
.comptoir__ok { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.comptoir__check { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c, var(--acc)); color: #0b0b0c; font-size: 24px; font-weight: 700; }
.comptoir__volee { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; color: var(--c, var(--acc)); }
.comptoir__compte { font: 500 11px/1.3 var(--ui); color: var(--v-fg2); }
/* l'offre active en ce moment, comme .offreActive.on du comptoir */
.comptoir__offre { display: grid; gap: 5px; padding: 10px 12px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--acc) 10%, var(--v-surf)); }
.comptoir__offre .comptoir__k { color: var(--acc); }
.comptoir__offre .comptoir__k i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.comptoir__r { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; color: var(--v-fg); }
.comptoir__r i { font-style: normal; font-size: .62em; }
.comptoir__r span { font-family: var(--ui); font-weight: 600; font-size: 10.5px; color: var(--v-fg2); margin-left: 4px; }
.comptoir__j { font-size: 10px; color: var(--v-fg3); }
/* « Mon mois » en miniature : sept volées, la sienne en couleur ; au troisième geste, sa
   barre monte d'un cran (transform seulement). Un exemple, et l'écran le dit. */
.comptoir__mois { display: grid; gap: 8px; padding: 10px 12px; border-radius: 16px; background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.comptoir__barres { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.comptoir__barres i { flex: 1; height: 100%; border-radius: 2px; background: var(--c); opacity: .22; transform: scaleY(var(--h)); transform-origin: bottom; transition: transform .7s var(--v-ease), opacity .5s var(--v-ease); }
.comptoir__barres i.moi { opacity: 1; }
.comptoir[data-etat="compte"] .comptoir__barres i.moi { transform: scaleY(calc(var(--h) + .3)); }

/* ---------- le calque du voyage (ordinateur seulement) ---------- */
.voyageur { position: fixed; top: 0; left: 0; z-index: 30; transform-origin: 0 0; will-change: transform; perspective: 1600px; }
.voyageur[hidden] { display: none; }
.voyageur__faces { position: relative; transform-style: preserve-3d; will-change: transform; }
.voyageur__recto, .voyageur__verso { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.voyageur__recto { position: relative; }
.voyageur__recto .lic { color: #edede7; box-shadow: 0 34px 70px -28px #000c, 0 30px 60px -16px #000a, 0 2px 0 #ffffff0a inset; }
/* Le verso : le même format que la licence, un bord dans la couleur choisie, et trois mots. */
.voyageur__verso {
  position: absolute; inset: 0; transform: rotateY(180deg);
  display: flex; flex-direction: column; justify-content: space-between; padding: 7% 8%;
  border-radius: var(--r-doc); border: 1px solid #33333a;
  background:
    linear-gradient(90deg, transparent 0 88%, color-mix(in srgb, var(--acc) 70%, transparent) 88% 100%),
    linear-gradient(168deg, var(--s3), var(--s1) 55%, #08080a);
  box-shadow: 0 48px 90px -30px #000e;
  container-type: inline-size;
}
.verso__wm { font-family: var(--display); font-size: 5cqw; letter-spacing: .04em; color: #edede7; }
.verso__t { display: flex; flex-direction: column; font-family: var(--display); font-size: 12.5cqw; line-height: .98; text-transform: uppercase; color: #edede7; }
.verso__acc { color: var(--acc); }
.verso__p { max-width: 78%; font-size: 4.2cqw; line-height: 1.45; color: #b7b7b0; }
/* En mode voyage, les licences d'origine gardent leur place mais s'effacent : c'est le
   calque qui les montre. Opacité ET visibilité : certaines couches du document (tampon,
   zone codée) reposent `visibility` selon la phase de fabrication. */
.mode-voyage #licOuv, .mode-voyage #licGeste { visibility: hidden; opacity: 0; pointer-events: none; }

/* téléphone et tablette : la scène en haut, réduite et collante sous la barre, les gestes
   défilent dessous ; un fondu au bas de la scène évite que les lignes passent net sous elle */
@media (max-width: 999px) {
  .gestes__grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gestes__scene { grid-column: 1; grid-row: 1; top: 100px; z-index: 3; padding-bottom: 30px; background: linear-gradient(180deg, var(--v-bg) 84%, #0b0b0c00); }
  .gestes__l { grid-column: 1; grid-row: 2; }
  .gestes__compo { width: min(100%, 330px); }
  .comptoir { width: 50%; border-radius: 28px; padding: 9px 7px; box-shadow: 0 0 0 5px #141417, 0 0 0 6px #ffffff14, 0 40px 80px -36px #000; }
  .comptoir::before { top: 7px; width: 56px; height: 14px; }
  .comptoir__ecran { padding-top: 20px; gap: 7px; }
  .comptoir__m { font-size: 11px; }
  .comptoir__pill { font-size: 8.5px; padding: 2px 6px; }
  .comptoir__seg span { padding: 4px 6px; font-size: 8px; }
  .comptoir__k { font-size: 8px; }
  .comptoir__etats { min-height: 84px; }
  .comptoir__valider { min-height: 54px; border-radius: 14px; gap: 3px; padding: 6px 8px; }
  .comptoir__valider b { font-size: 10.5px; }
  .comptoir__valider span { font-size: 8px; }
  .comptoir__code { font-size: 16px; padding: 8px 4px; border-radius: 10px; }
  .comptoir__go { padding: 7px 8px; font-size: 9.5px; }
  .comptoir__check { width: 30px; height: 30px; font-size: 16px; }
  .comptoir__volee { font-size: 17px; }
  .comptoir__compte { font-size: 9px; }
  .comptoir__offre, .comptoir__mois { padding: 7px 8px; border-radius: 11px; gap: 4px; }
  .comptoir__r { font-size: 17px; }
  .comptoir__r span { font-size: 8.5px; }
  .comptoir__j { font-size: 8.5px; }
  .comptoir__barres { height: 22px; gap: 3px; }
  .gestes__doc { width: 53%; margin-top: 18%; }
  .geste { min-height: 46svh; align-content: start; padding-top: 22px; grid-template-columns: 32px minmax(0, 1fr); gap: 6px 12px; }
  .geste__n { width: 28px; height: 28px; font-size: 13px; margin-top: .25em; }
  .geste h3 { font-size: clamp(22px, 5.6vw, 30px); }
  .geste p { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .geste, .geste__n, .comptoir__etats > *, .comptoir__barres i { transition: none; }
  .js .geste { opacity: 1; }   /* sans mouvement, rien ne met l'étape en avant : les trois restent lisibles */
}

/* ====================================================================
   DÉMO (/demo/) — rien de ceci n'est rendu en mode public : les logos de marques
   (données chargées seulement sous /demo/), le mur de logos, l'annuaire, l'étiquette
   « démo » de la barre. Repris de la démo du 12.10 (junior.css).
   ==================================================================== */
.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; }
.marq__it .ens__logo--img img { width: 78%; height: 78%; }
.logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px 12px; }
.logo { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; text-align: center; min-width: 0; }
.logo__t { display: block; width: 100%; }
.logo__t .ens__logo { width: 100%; height: auto; aspect-ratio: 1; border-radius: 20px; transition: transform .3s var(--v-ease); }
.logo:hover .ens__logo { transform: translateY(-3px); }
.logo b { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.logo > span:last-child { font-size: 11.5px; color: var(--v-fg3); }
.pagehead { padding: clamp(150px, 15vw, 190px) 0 clamp(20px, 3vw, 36px); }
.pagehead .lede { margin-top: 16px; }
.pagehead .cherche { margin-top: 22px; max-width: 520px; }
.lettres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.lettres a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--v-line); background: #ffffff08; color: var(--v-fg2); font: 600 13px/1 var(--ui); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.lettres a:hover { background: #ffffff14; color: var(--v-fg); }
.lettre { margin-top: 34px; scroll-margin-top: 140px; }
.lettre[hidden] { display: none; }
.lettre h2 { font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: .02em; padding-bottom: 8px; border-bottom: 1px solid var(--v-line); }
.mrow { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--v-surf-line); scroll-margin-top: 140px; }
.mrow[hidden] { display: none; }
.mrow .ens__logo { width: 52px; height: 52px; border-radius: 15px; }
.mrow b { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; }
.mrow span { font-size: 13px; color: var(--v-fg3); white-space: nowrap; }
.mvide { margin-top: 30px; color: var(--v-fg3); }
.mvide[hidden] { display: none; }
@media (max-width: 900px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; } .logo b { font-size: 12.5px; } }
.barre__demo { flex: none; margin-left: 8px; padding: 5px 9px; border-radius: var(--v-pill); background: color-mix(in srgb, var(--acc) 22%, transparent); color: var(--acc); font: 700 10.5px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 480px) { .barre__demo { display: none; } }

/* ====================================================================
   PARTOUT EN SUISSE (dans toute la démo — décision Max 13.10) : la ville du
   visiteur dès la première image, la pastille pour en changer, la carte vivante.
   ==================================================================== */
.hero__ou { margin-bottom: 10px; color: var(--v-fg2); }
.hero__ou b { color: var(--v-fg); font-weight: 700; }
.hero__ou[hidden] { display: none; }
.hero__ou .btn-lien { margin-left: 10px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.hero__ville { margin-top: 14px; }
.hero__ville:empty { display: none; }
/* la pastille de ville : un bouton, un menu */
.vpill { position: relative; display: inline-block; }
.vpill__b { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; 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__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; }
/* le menu : toutes les villes d'un coup, sur deux colonnes, jamais d'ascenseur (le Mac le cache et on croit qu'il manque des villes) */
.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 .vpill__pos { grid-column: 1 / -1; }
.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__menu .vpill__pos { 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-weight: 700; transition: background-color .2s ease, border-color .2s ease, transform .2s var(--v-ease); }
.vpill__menu .vpill__pos svg { flex: none; color: var(--acc); }
.vpill__menu .vpill__pos:hover, .vpill__menu .vpill__pos:focus-visible { background: color-mix(in srgb, var(--acc) 24%, transparent); border-color: var(--acc); }
.vpill__menu .vpill__pos:active { transform: scale(.985); }
/* la carte vivante */
.suisse__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.suisse__compte { margin-top: 18px; font-size: 14.5px; color: var(--v-fg2); }
.suisse__compte b { color: var(--v-fg); font-weight: 600; }
.suisse__compte[hidden] { display: none; }
.suisse__pub { margin-top: 14px; font-size: 14px; color: var(--v-fg3); max-width: 46ch; line-height: 1.5; }
/* coupée à sa boîte : zoomée sur un canton, la carte dessinerait sinon tout le pays par-dessus le texte (vu par Max le 13.10 à 2000 px) */
.chmap { width: 100%; height: auto; display: block; overflow: hidden; border-radius: 24px; }
.chmap__pays { fill: #ffffff0a; stroke: var(--v-line); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: fill .6s ease; }
.chmap__v { cursor: pointer; outline: none; }
.chmap__halo { fill: var(--acc); opacity: 0; transform-origin: 0 0; }
.chmap__v--on .chmap__halo { animation: chPulse 3.4s var(--v-ease) infinite; }
.chmap__pt { fill: var(--v-fg3); stroke: var(--v-bg); stroke-width: 2; transition: fill .3s ease; }
.chmap__v--on .chmap__pt, .chmap__v:hover .chmap__pt, .chmap__v:focus-visible .chmap__pt { fill: var(--acc); }
.chmap__t { font: 600 10.5px var(--ui); fill: var(--v-fg3); text-anchor: start; pointer-events: none; }
.chmap__v:hover .chmap__t { fill: var(--v-fg); }
.chmap__v--toi .chmap__pt { fill: var(--v-fg); }
.chmap__v--toi .chmap__t { font-size: 13px; font-weight: 700; fill: var(--v-fg); }
.chmap__v--toi .chmap__halo { animation: chPulse 2.2s var(--v-ease) infinite; animation-delay: .4s; }
.chmap__toi { font: 700 9px var(--ui); letter-spacing: .12em; text-transform: uppercase; fill: var(--acc); text-anchor: start; pointer-events: none; }
@keyframes chPulse { 0% { transform: scale(.35); opacity: .4; } 100% { transform: scale(1.8); opacity: 0; } }
.suisse__leg { margin-top: 10px; font-size: 12.5px; color: var(--v-fg3); text-align: center; }
@media (max-width: 640px) {
  .vpill__menu button { padding: 11px 10px; }
}
@media (max-width: 900px) {
  .suisse__in { grid-template-columns: minmax(0, 1fr); }
  .chmap__t { display: none; }
  .chmap__v--toi .chmap__t { display: block; }
}
@media (prefers-reduced-motion: reduce) { .chmap__halo { animation: none !important; opacity: .18; } }

/* ---------- les vraies enseignes : une ville naît de ses commerces signés ---------- */
.tcard--reel { border-color: color-mix(in srgb, var(--acc) 55%, var(--v-surf-line)); }
.tcard--reel::after { content: attr(data-ville-nom); position: absolute; top: 10px; right: 12px; padding: 3px 8px; border-radius: var(--v-pill); background: color-mix(in srgb, var(--acc) 18%, transparent); color: var(--acc); font: 700 10.5px/1 var(--ui); letter-spacing: .04em; }
.tsect--reel .tsectH b { color: var(--acc); }
.tsect--ex { opacity: .78; }
.tsect--ex .tsectH b { color: var(--v-fg3); font-weight: 600; }
.tcard--ex { border-style: dashed; }
.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__menu .vpill__reel b { color: var(--acc); }
.chmap__v--reel .chmap__pt { fill: var(--v-fg); stroke: var(--acc); stroke-width: 2.5; }
.chmap__v--reel .chmap__t { fill: var(--v-fg); font-weight: 700; }
.chmap__v--reel .chmap__halo { animation: chPulse 2.6s var(--v-ease) infinite; }

/* ---------- en ligne, partout en Suisse : les familles d'offres ---------- */
.enligne { margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--v-line); }
.enligne--page { margin-top: 0; padding-top: 0; border-top: 0; }
.enligne__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 56px); align-items: end; margin-bottom: 22px; }
.enligne__h { margin-top: 8px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.enligne__lede { color: var(--v-fg2); font-size: 15px; line-height: 1.55; max-width: 48ch; }
.enligne__note { margin-top: 16px; font-size: 13px; color: var(--v-fg3); }

/* Deals du moment : carte SPÉCIALE (coloré + image + ruban), distincte d'une offre normale — décision 36. */
.dhead { margin-bottom: 14px; }
.dhead__t { display: flex; align-items: center; gap: 9px; font: 700 13px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); transition: color 1s var(--v-ease); }
.dhead__n { font-variant-numeric: tabular-nums; color: var(--v-fg3); background: color-mix(in srgb, var(--v-fg3) 14%, transparent); border-radius: 99px; padding: 2px 8px; font-size: 11px; letter-spacing: .02em; }
.dhead__s { margin: 8px 0 0; font-size: 14px; color: var(--v-fg2); line-height: 1.5; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; margin-bottom: 30px; }
@media (max-width: 560px) { .dgrid { grid-template-columns: 1fr; } }
/* home : l'en ligne est SECONDAIRE (choix Max) — 3 deals, discret ; sur mobile un rail qui se swipe (1 hauteur de carte, pas 3 empilées) */
.dgrid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.enligne__plus { margin: 0; }
@media (max-width: 900px) { .dgrid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .dgrid--home { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .dgrid--home > * { flex: 0 0 80%; scroll-snap-align: start; }
  .dgrid--home::-webkit-scrollbar { display: none; }
}
.dcard { display: flex; flex-direction: column; border-radius: var(--v-rad-s); overflow: hidden; background: var(--v-surf); border: 1px solid color-mix(in srgb, var(--acc) 30%, var(--v-surf-line)); text-decoration: none; color: inherit; transition: transform .3s var(--v-ease), box-shadow .3s var(--v-ease), border-color 1s var(--v-ease); }
.dcard:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -20px color-mix(in srgb, var(--acc) 60%, transparent); }
.dcard__hero { position: relative; aspect-ratio: 16 / 7; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 52%, var(--v-surf)), color-mix(in srgb, var(--acc) 18%, var(--v-surf))); overflow: hidden; transition: background 1s var(--v-ease); }
.dcard__ico { width: 46px; height: 46px; color: color-mix(in srgb, var(--v-bg) 80%, transparent); }
.dcard__ico svg { width: 100%; height: 100%; display: block; }
.dcard__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dcard__hero--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--v-bg) 42%, transparent), transparent 42%, color-mix(in srgb, var(--v-bg) 38%, transparent)); }
.dcard__ruban { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 5px 10px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font: 700 10.5px/1 var(--ui); letter-spacing: .05em; text-transform: uppercase; transition: background-color 1s var(--v-ease); }
.dcard__portee { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 5px 9px; border-radius: var(--v-pill); background: color-mix(in srgb, var(--v-bg) 60%, transparent); color: var(--v-fg); font: 600 11px/1 var(--ui); }
.dcard__body { display: flex; flex-direction: column; gap: 5px; padding: 14px 15px 15px; }
.dcard__nom { font-size: 15px; font-weight: 700; }
.dcard__deal { font-size: 14.5px; font-weight: 600; color: var(--acc); line-height: 1.3; transition: color 1s var(--v-ease); }
.dcard__detail { font-size: 12.5px; color: var(--v-fg2); line-height: 1.45; margin: 1px 0 0; }
.dcard__age { align-self: flex-start; margin-top: 4px; padding: 4px 10px; border-radius: var(--v-pill); background: color-mix(in srgb, var(--v-fg3) 12%, transparent); color: var(--v-fg2); font: 600 11.5px/1 var(--ui); }
.dcard__age--etu { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); }
.dcard__src { font-size: 11px; color: var(--v-fg3); line-height: 1.4; margin: 6px 0 0; }
.dcard__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font: 700 13px/1 var(--ui); color: var(--v-fg); }
.dcard__fl { transition: transform .3s var(--v-ease); }
.dcard:hover .dcard__fl { transform: translateX(3px); }
/* Brique 2 — partenaires nationaux (régie) : même langage que les deals, plus premium ; places à prendre + invitation */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; margin-bottom: 30px; }
@media (max-width: 560px) { .pgrid { grid-template-columns: 1fr; } }
.pcard { display: flex; flex-direction: column; border-radius: var(--v-rad-s); overflow: hidden; background: var(--v-surf); border: 1px solid color-mix(in srgb, var(--acc) 34%, var(--v-surf-line)); }
.pcard__hero { position: relative; aspect-ratio: 16 / 7; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 30%, var(--v-surf)), var(--v-surf)); }
.pcard__mono { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--pc, var(--acc)); color: #0b0b0c; font: 800 20px/1 var(--ui); }
.pcard__logo { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; background: #fff; padding: 4px; }
.pcard__ruban { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font: 700 10.5px/1 var(--ui); letter-spacing: .05em; text-transform: uppercase; transition: background-color 1s var(--v-ease); }
.pcard__body { display: flex; flex-direction: column; gap: 5px; padding: 14px 15px 15px; }
.pcard__nom { font-size: 15px; font-weight: 700; }
.pcard__offre { font-size: 14.5px; font-weight: 600; color: var(--acc); line-height: 1.3; transition: color 1s var(--v-ease); }
.pcard__detail { font-size: 12.5px; color: var(--v-fg2); line-height: 1.45; margin: 1px 0 0; }
.pcard__pour { align-self: flex-start; margin-top: 5px; padding: 4px 10px; border-radius: var(--v-pill); background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); font: 600 11.5px/1 var(--ui); }
.pcard--libre { border-style: dashed; border-color: color-mix(in srgb, var(--acc) 28%, var(--v-surf-line)); background: color-mix(in srgb, var(--v-surf) 55%, transparent); }
.pcard--libre .pcard__hero { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--acc) 7%, transparent) 0 10px, transparent 10px 20px), var(--v-surf); }
.pcard__plus { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1.5px dashed color-mix(in srgb, var(--acc) 50%, var(--v-surf-line)); color: var(--acc); font: 300 26px/1 var(--ui); }
.pcard--libre .pcard__nom { color: var(--v-fg2); }
.pcta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: var(--v-rad-s); text-decoration: none; color: var(--v-bg); background: linear-gradient(120deg, var(--acc), color-mix(in srgb, var(--acc) 68%, #ffffff)); transition: transform .3s var(--v-ease); }
.pcta:hover { transform: translateY(-2px); }
.pcta__txt b { display: block; font-size: 17px; font-weight: 700; }
.pcta__txt p { margin: 4px 0 0; font-size: 13px; opacity: .85; max-width: 48ch; line-height: 1.4; }
.pcta__go { flex: none; font: 700 14px/1 var(--ui); padding: 11px 18px; border-radius: var(--v-pill); background: color-mix(in srgb, var(--v-bg) 88%, transparent); color: var(--v-fg); }
.familles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.famille { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); transition: transform .3s var(--v-ease), border-color .3s var(--v-ease); }
.famille:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 40%, var(--v-surf-line)); }
.famille__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); margin-bottom: 6px; }
.famille__ico svg { width: 22px; height: 22px; }
.famille b { font-size: 15.5px; font-weight: 600; }
.famille__genre { font-size: 12.5px; color: var(--v-fg2); }
.famille__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.famille__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: var(--v-pill); background: #ffffff0a; border: 1px solid var(--v-line); font-size: 11.5px; font-weight: 600; color: var(--v-fg2); }
.famille__chip img { width: 18px; height: 18px; border-radius: 5px; background: #f4f4ef; object-fit: contain; }
.famille__tag { margin-top: auto; padding-top: 10px; font: 700 10px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg3); }
.bascule2 { display: inline-flex; align-self: flex-start; padding: 4px; border-radius: var(--v-pill); background: #ffffff0a; border: 1px solid var(--v-line); }
.bascule2[hidden] { display: none; }
.bascule2 button { min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--v-pill); background: transparent; color: var(--v-fg2); font: 600 13.5px/1 var(--ui); cursor: pointer; }
.bascule2 button[aria-selected="true"] { background: var(--v-fg); color: var(--v-bg); }
/* Le filtre des offres en ligne (puces par univers), même grammaire que le rail. */
.ofiltres { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 0 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-line); background: #ffffff0a; 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); }
.enligne--page[hidden] { display: none; }
@media (max-width: 900px) { .familles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .enligne__tete { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ---------- la carte par cantons : contours cliquables, zoom, regroupement ---------- */
.suisse__carte { position: relative; }
.chmap__canton { fill: transparent; stroke: #ffffff14; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .25s ease; }
.chmap__canton:hover { fill: color-mix(in srgb, var(--acc) 9%, transparent); }
.chmap__canton--on { fill: color-mix(in srgb, var(--acc) 7%, transparent); stroke: color-mix(in srgb, var(--acc) 60%, transparent); }
.chmap__retour { position: absolute; top: 10px; left: 10px; min-height: 34px; padding: 0 12px; border-radius: var(--v-pill); border: 1px solid var(--v-line); background: #23242cf0; color: var(--v-fg); font: 600 12.5px/1 var(--ui); cursor: pointer; }
.chmap__retour[hidden] { display: none; }
.chmap__n { font: 700 9.5px var(--ui); fill: var(--v-bg); text-anchor: middle; pointer-events: none; }
.chmap__v--grp .chmap__pt { fill: var(--acc); }

/* ---------- ta ville par NPA : la recherche dans la pastille, la note honnête ---------- */
.vpill__cherche { grid-column: 1 / -1; position: relative; padding: 2px 2px 6px; }
.vpill__in { width: 100%; min-height: 42px; 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); }
.villeNote { margin-bottom: 18px; padding: 14px 16px; 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: 14px; color: var(--v-fg2); line-height: 1.5; }
.villeNote b { color: var(--v-fg); font-weight: 600; }
.villeNote[hidden] { display: none; }

/* la carte des signées (page des enseignes, couche « toute la Suisse ») */
.fond__carte { margin-top: 22px; }
.fond__carte[hidden], .fond__on[hidden], .fond__pre[hidden] { display: none; }
.fond__vide { margin: 0; padding: 16px 18px; border-radius: 16px; border: 1px dashed var(--v-line); font-size: 14px; line-height: 1.5; color: var(--v-fg3); text-align: center; }
.fond__on { max-width: 720px; margin: 0 auto; }
.chmap--fond .chmap__canton { cursor: default; }
.chmap--fond .chmap__canton:hover { fill: transparent; }
.chmap--fond .chmap__v { cursor: pointer; }
.fond__pre { display: block; margin-top: 6px; color: var(--v-fg2); }
.slot--signee { border-style: solid; color: var(--v-fg); text-decoration: none; display: grid; align-content: center; justify-items: center; gap: 2px; }
.slot--signee img { display: block; max-height: 30px; max-width: 110px; margin-bottom: 6px; object-fit: contain; }
.slot--signee b { font-weight: 700; }
.slot--signee span { font-size: 12px; color: var(--v-fg3); }
.villeNote__pre { display: block; margin-top: 6px; color: var(--v-fg); }
.fond__demo { color: var(--v-fg3); font-weight: 500; }

/* la carte se balade (prototype/src/ui/navigation-carte.js) : la scène reçoit les gestes, le SVG
   ne porte que les contours, les villes sont des marqueurs HTML (texte et halos composés par le
   navigateur, sans repeindre le SVG à chaque image) */
.chmap__scene { position: relative; border-radius: 24px; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; isolation: isolate; }
.chmap__scene .chmap { border-radius: 0; overflow: visible; display: block; }
.chmap__scene.chmap--prise { touch-action: none; }
.chmap__scene.chmap--glisse, .chmap--glisse .chmap__canton, .chmap--glisse .chmarq { cursor: grabbing; }
.chmap__scene:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc) 55%, transparent); }
.chmap__scene .chmap__canton { cursor: grab; }
.chmap__marqs { position: absolute; inset: 0; pointer-events: none; }
.chmarq { position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--v-fg3); font: 600 10.5px/1 var(--ui); cursor: pointer; pointer-events: auto; will-change: transform; outline: none; -webkit-tap-highlight-color: transparent; }
.chmarq__pt, .chmarq__halo, .chmarq__n { position: absolute; border-radius: 50%; }
.chmarq__pt { left: -4.5px; top: -4.5px; width: 9px; height: 9px; background: var(--v-fg3); box-shadow: 0 0 0 2px var(--v-bg); transition: background-color .3s ease, transform .25s var(--v-ease); }
.chmarq--on .chmarq__pt, .chmarq:hover .chmarq__pt, .chmarq:focus-visible .chmarq__pt { background: var(--acc); }
.chmarq:hover .chmarq__pt, .chmarq:focus-visible .chmarq__pt { transform: scale(1.35); }
.chmarq__halo { left: -16px; top: -16px; width: 32px; height: 32px; background: var(--acc); opacity: 0; }
.chmarq--on .chmarq__halo { animation: chPulse 3.4s var(--v-ease) infinite; }
.chmarq--toi .chmarq__pt { left: -6.5px; top: -6.5px; width: 13px; height: 13px; background: var(--v-fg); }
.chmarq--toi .chmarq__halo { animation: chPulse 2.2s var(--v-ease) infinite; animation-delay: .4s; }
.chmarq--toi .chmarq__t { font-size: 13px; font-weight: 700; color: var(--v-fg); }
.chmarq--reel .chmarq__pt { left: -5.5px; top: -5.5px; width: 11px; height: 11px; background: var(--v-fg); box-shadow: 0 0 0 2.5px var(--acc); }
.chmarq--reel .chmarq__t { color: var(--v-fg); font-weight: 700; }
.chmarq--reel .chmarq__halo { animation: chPulse 2.6s var(--v-ease) infinite; }
.chmarq--grp .chmarq__pt { left: -8px; top: -8px; width: 16px; height: 16px; background: var(--acc); }
.chmarq__n { left: -8px; top: -8px; width: 16px; height: 16px; display: grid; place-items: center; font: 700 9.5px/1 var(--ui); color: var(--v-bg); pointer-events: none; }
.chmarq__t, .chmarq__s { position: absolute; white-space: nowrap; pointer-events: none; line-height: 1; }
.chmarq__s { font: 700 9px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.chmarq:hover .chmarq__t { color: var(--v-fg); }
.chmarq--d .chmarq__t { left: 10px; top: -6px; }
.chmarq--d .chmarq__s { left: 10px; top: 8px; }
.chmarq--g .chmarq__t { right: 10px; top: -6px; }
.chmarq--g .chmarq__s { right: 10px; top: 8px; }
.chmarq--b .chmarq__t { left: 0; top: 11px; transform: translateX(-50%); }
.chmarq--b .chmarq__s { left: 0; top: 25px; transform: translateX(-50%); }
.chmarq--h .chmarq__t { left: 0; bottom: 11px; transform: translateX(-50%); }
.chmarq--h .chmarq__s { left: 0; bottom: 25px; transform: translateX(-50%); }
.chmarq--toi.chmarq--d .chmarq__t, .chmarq--toi.chmarq--g .chmarq__t { top: -7px; }
.chmarq--toi.chmarq--d .chmarq__s, .chmarq--toi.chmarq--g .chmarq__s { top: 9px; }
.chmap--pause .chmarq__halo { animation-play-state: paused; }
@media (max-width: 900px) {
  .chmarq__t, .chmarq__s { display: none; }
  .chmarq--toi .chmarq__t, .chmarq--toi .chmarq__s, .chmarq--reel .chmarq__t, .chmarq--grp .chmarq__t, .chmap--zoom .chmarq__t { display: block; }
}
@media (prefers-reduced-motion: reduce) { .chmarq__halo { animation: none !important; opacity: .18; } }
.chmap__ctl { position: absolute; right: 10px; bottom: 42px; display: grid; gap: 6px; }
.chmap__btn { width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--v-line); background: #23242cf0; color: var(--v-fg); font: 600 19px/1 var(--ui); cursor: pointer; display: grid; place-items: center; transition: border-color .2s ease, transform .2s var(--v-ease); }
.chmap__btn:hover { border-color: var(--acc); }
.chmap__btn:active { transform: scale(.94); }
.chmap__aide { position: absolute; left: 50%; bottom: 46px; transform: translate(-50%, 0); margin: 0; padding: 9px 13px; border-radius: var(--v-pill); background: #23242cf0; border: 1px solid var(--v-line); color: var(--v-fg); font: 500 12.5px/1.2 var(--ui); pointer-events: none; opacity: 0; transition: opacity .25s ease; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.chmap__aide.est-visible { opacity: 1; }
.chmap__aide[hidden] { display: none; }

/* ---------- PISTE « une carte qui se mérite » (progression.html, démo) ---------- */
.prog__piste { display: inline-block; padding: 4px 11px; border-radius: var(--v-pill); border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent); background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--v-fg); font: 700 11px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.prog__demo { padding: 40px 0; text-align: center; color: var(--v-fg3); font-size: 15px; }
.prog__grille { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.prog__carte { max-width: 320px; margin: 0 auto; width: 100%; }
.prog__carte .lic { box-shadow: 0 34px 70px -28px #000c, 0 30px 60px -16px #000a, 0 2px 0 #ffffff0a inset; color: #edede7; }
.prog__carte .lic::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; opacity: calc(var(--patine, 0) * .55); transition: opacity .45s var(--v-ease); background: repeating-linear-gradient(118deg, #ffffff05 0 2px, transparent 2px 7px), radial-gradient(120% 90% at 30% 0%, transparent 60%, #0007 100%); }
.prog__anc { display: block; font: 700 15px/1.3 var(--ui); color: var(--v-fg); margin-bottom: 14px; min-height: 2.2em; }
.prog__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 22%, var(--v-surf-line)); outline: none; }
.prog__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--acc); border: 3px solid var(--v-bg); box-shadow: 0 2px 10px -2px #000a; cursor: pointer; transition: transform .15s var(--v-ease); }
.prog__slider::-webkit-slider-thumb:active { transform: scale(1.12); }
.prog__slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--acc); border: 3px solid var(--v-bg); cursor: pointer; }
.prog__ech { display: flex; justify-content: space-between; margin-top: 8px; font: 600 11px/1 var(--ui); color: var(--v-fg3); }
.prog__note { margin-top: 16px; font-size: 13px; color: var(--v-fg3); line-height: 1.5; }
.passeport__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pstamp { display: grid; place-items: center; gap: 8px; padding: 18px 10px; border-radius: 18px; border: 1px dashed var(--v-surf-line); background: var(--v-surf); color: var(--v-fg3); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s var(--v-ease); }
.pstamp svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .5; transition: opacity .2s ease, transform .3s var(--v-ease); }
.pstamp b { font: 600 12px/1 var(--ui); }
.pstamp:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--v-surf-line)); }
.pstamp[aria-pressed="true"] { border-style: solid; border-color: var(--acc); background: color-mix(in srgb, var(--acc) 13%, var(--v-surf)); color: var(--v-fg); }
.pstamp[aria-pressed="true"] svg { opacity: 1; color: var(--acc); transform: rotate(-7deg) scale(1.06); }
.passeport__compte { margin-top: 16px; text-align: center; font: 700 14px/1 var(--ui); color: var(--v-fg2); }
.prog--duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
.prog__bloc { padding: 24px; border-radius: 20px; border: 1px solid var(--v-surf-line); background: var(--v-surf); }
.prog__h3 { font: 700 18px/1.3 var(--ui); margin: 0 0 10px; color: var(--v-fg); }
.prog__bloc p { margin: 0; color: var(--v-fg2); line-height: 1.55; font-size: 14.5px; }
@media (max-width: 820px) {
  .prog__grille { grid-template-columns: minmax(0, 1fr); }
  .prog__carte { max-width: 260px; }
  .passeport__grille { grid-template-columns: repeat(2, 1fr); }
  .prog--duo { grid-template-columns: minmax(0, 1fr); }
}

/* Mode public ↔ démo (body[data-mode], posé par vitrine.js) : ce qui n'existe que dans l'un.
   En public, la page Enseignes ne montre que les fonctions construites (Max, 14.10). */
body[data-mode="public"] [data-pour="demo"], body[data-mode="demo"] [data-pour="public"] { display: none !important; }

/* ---------- La fiche publique d'une enseigne (e.html · getjunior.ch/e/KE-…) ----------
   Une page utilitaire : on arrive par un QR scanné au comptoir, on veut l'offre en trois secondes.
   Pas de data-reveal : les blocs arrivent avec la réponse du serveur (.est-la, transform + opacity). */
.ens__in { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--v-ease), transform .6s var(--v-ease); }
.ens__in.est-la { opacity: 1; transform: none; }
.ens__attente { color: var(--v-fg3); }
.ens__sous { margin-top: 14px; }
.ens__adresse { margin-top: 8px; font-size: 14.5px; color: var(--v-fg2); }
.ens__adresse[hidden], .ens .btn-lien[hidden] { display: none; }
.ens__h { margin-top: clamp(32px, 4vw, 48px); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--v-fg3); }
.ens__offres { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; max-width: 560px; }
.ens__offre { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; align-items: baseline; padding: 16px 18px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.ens__offre--vide { display: block; color: var(--v-fg3); font-size: 15px; }
.ens__rem { font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1; letter-spacing: -.03em; color: var(--v-fg); white-space: nowrap; }
.ens__rem small { font-size: .55em; font-weight: 600; letter-spacing: 0; }
.ens__lib { font-weight: 600; font-size: 16px; }
.ens__prix { font-weight: 700; white-space: nowrap; margin-left: 6px; }   /* « 18.– → 14.40 » : le prix de base et après remise (décision 27) */
.ens__quand { grid-column: 2; font-size: 13px; color: var(--v-fg3); }
.ens__flash { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--v-pill); background: var(--v-surf); border: 1px solid var(--v-surf-line); color: var(--v-fg); font-size: 13.5px; font-weight: 600; }
.ens__flash::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--v-fg); }
.ens__flash[hidden] { display: none; }   /* la classe pose un display : l'attribut hidden doit gagner */
.ens__leg { margin-top: 14px; font-size: 13px; color: var(--v-fg3); max-width: 52ch; line-height: 1.5; }
.ens__pas { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; gap: 14px; max-width: 560px; counter-reset: pas; }
.ens__pas li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; counter-increment: pas; }
.ens__pas li::before { content: counter(pas); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--v-line); display: grid; place-items: center; font: 600 12px/1 var(--ui); color: var(--v-fg3); }
.ens__pas b { font-weight: 600; }
.ens__pas span { font-size: 14px; color: var(--v-fg2); line-height: 1.5; }
.ens .band__acts { margin-top: clamp(26px, 3.4vw, 36px); }

/* ---------- « Trois temps » illustrés avec les vrais composants (comment.html) ----------
   1 la pièce masquée (seule la date se lit, comme dans l'app) et le selfie de contrôle ; 2 la licence vivante
   (le même objet que le hero, relief à la souris) ; 3 l'écran « Montrer au comptoir », code et QR qui tournent.
   Pas une image : du dessin CSS et nos composants. transform + opacity seulement. */
.temps__illu { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; display: grid; place-items: center; margin-bottom: 6px;
  background: radial-gradient(120% 90% at 18% 8%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 62%), var(--v-surf); border: 1px solid var(--v-surf-line); transition: background-color 1s var(--v-ease); }
.illu-chip { position: absolute; left: 14px; right: 14px; z-index: 3; font: 600 11px/1.3 var(--ui); letter-spacing: .02em; color: var(--v-fg2); text-align: center; }
.illu-chip--haut { top: 14px; }
.illu-chip--bas { bottom: 14px; color: var(--v-fg3); }
/* 1 · la pièce masquée et le selfie */
.illu-piece { position: relative; width: 62%; aspect-ratio: 86 / 54; border-radius: 10px; background: linear-gradient(135deg, #2b2c35, #1a1b21); border: 1px solid #ffffff22; padding: 7% 6%;
  display: grid; grid-template-columns: 30% 1fr; gap: 7%; transform: rotate(-4deg) translateY(-6%); }
.illu-piece__photo { aspect-ratio: 3 / 4; border-radius: 6px; background: #3a3b45; display: grid; place-items: center; }
.illu-piece__photo svg, .illu-selfie svg, .illu-tel__photo svg { fill: none; stroke: #c0c0ba; stroke-width: 1.6; stroke-linecap: round; }
.illu-piece__photo svg { width: 60%; stroke: #9a9ba6; }
.illu-piece__txt { display: grid; gap: 9%; align-content: center; }
.illu-piece__txt > i { display: block; height: 7px; border-radius: 4px; background: #ffffff1c; }
.illu-piece__txt > i:nth-child(1) { width: 70%; }
.illu-piece__txt > i:nth-child(2) { width: 50%; }
.illu-piece__txt > i:nth-child(4) { width: 60%; }
.illu-piece__date { position: relative; z-index: 2; display: grid !important; height: auto !important; padding: 4px 7px; border-radius: 6px; background: #0f1014 !important; outline: 2px solid var(--acc); box-shadow: 0 0 0 9999px #0b0b0cb8; font-style: normal; transition: outline-color 1s var(--v-ease); }
.illu-piece__date b { font: 700 7px/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg3); }
.illu-piece__date span { font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--v-fg); }
.illu-selfie { position: absolute; right: 11%; bottom: 19%; z-index: 3; width: 23%; aspect-ratio: 1; border-radius: 50%; background: #2b2c35; border: 2px solid var(--v-surf-line); display: grid; place-items: center; box-shadow: 0 20px 40px -20px #000; }
.illu-selfie svg { width: 58%; filter: blur(.7px); }
.illu-selfie em { position: absolute; right: -5px; bottom: -3px; width: 24px; height: 24px; border-radius: 50%; background: var(--acc); color: var(--v-bg); font: 700 13px/24px var(--ui); text-align: center; font-style: normal; transition: background-color 1s var(--v-ease); }
/* 2 · la licence vivante */
.illu-lic { width: 38%; margin-bottom: 9%; }   /* la carte (1 : 1,54) reste au-dessus de sa légende */
/* 3 · « Montrer au comptoir » */
.illu-tel { width: 56%; aspect-ratio: 9 / 15; border-radius: 26px; background: #0b0b0c; border: 1px solid #ffffff26; padding: 9% 8% 7%; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; align-content: start; justify-items: center; gap: 6%;
  box-shadow: 0 0 0 5px #141417, 0 0 0 6px #ffffff14, 0 40px 70px -30px #000; }
.illu-tel__haut { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.illu-tel__m { font-family: var(--display); font-size: 11px; letter-spacing: .05em; }
.illu-tel__p { font: 600 8.5px/1 var(--ui); padding: 4px 7px; border-radius: var(--v-pill); border: 1px solid var(--v-line); color: var(--v-fg3); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.illu-tel__id { display: flex; align-items: center; gap: 8px; width: 100%; }
.illu-tel__photo { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #2b2c35; display: grid; place-items: center; }
.illu-tel__photo svg { width: 60%; }
.illu-tel__id b { font: 600 11px/1.2 var(--ui); color: var(--v-fg); }
.illu-tel__qr { width: 58%; aspect-ratio: 1; border-radius: 10px; background: #f4f4ef; overflow: hidden; }
.illu-tel__qr svg { display: block; width: 100%; height: 100%; }
.illu-tel__code { font: 700 clamp(15px, 1.5vw, 19px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; color: var(--v-fg); }
.illu-tel__note { display: grid; gap: 5px; width: 100%; font: 500 8.5px/1 var(--ui); color: var(--v-fg3); text-align: center; }
.illu-tel__barre { display: block; height: 3px; border-radius: 2px; background: #ffffff14; overflow: hidden; }
.illu-tel__barre i { display: block; height: 100%; width: 100%; background: var(--acc); transform-origin: left; animation: illuBarre 30s linear infinite; }
@keyframes illuBarre { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .illu-tel__barre i { animation: none; } }
@media (max-width: 780px) { .temps__illu { aspect-ratio: 16 / 10; } .illu-piece { width: 50%; } .illu-tel { width: 40%; } .illu-lic { width: 30%; margin-bottom: 8%; } .illu-selfie { right: 16%; width: 19%; } }

/* ====================================================================
   JUNIOR BUSINESS — vitrine/business.html (vitrine B2B, aperçu en validation)
   DA reprise de la vitrine : fond sombre, accent violet, Anton + Switzer.
   ==================================================================== */
.biz-apercu { max-width: 1120px; margin: 96px auto 0; padding: 10px 18px; border-radius: var(--v-pill); border: 1px dashed color-mix(in srgb, var(--acc) 50%, var(--v-surf-line)); background: color-mix(in srgb, var(--acc) 8%, transparent); color: var(--v-fg2); font: 600 12.5px/1.4 var(--ui); text-align: center; }
/* le hero garde le dégagement standard de .entete (clamp(150px,15vw,190px) en haut) pour passer sous la barre fixe */
.biz-hero__h { margin-top: 12px; font-size: clamp(42px, 8vw, 92px); line-height: .98; letter-spacing: -.02em; }
/* lueur irisée qui dérive lentement derrière le hero (transform seulement ; clippée par .entete overflow:hidden) */
/* accent FIGÉ pour le B2B (teinte de marque stable, au lieu de suivre la volée) : posé sur le body,
   il cascade sur toute la page et prime sur le --acc inline de :root, même après changement de langue */
body[data-page="business"] { --acc: #9d8cff; --s-1: #cdb8ff; --s-2: #8f8cff; --s-3: #5fe0c6; }
.biz-hero__aura { position: absolute; inset: -32% -12% -22%; z-index: 0; pointer-events: none; opacity: .72; background: radial-gradient(46% 54% at 22% 46%, color-mix(in srgb, var(--acc) 58%, transparent), transparent 64%), radial-gradient(40% 48% at 82% 24%, color-mix(in srgb, #5de0c4 40%, transparent), transparent 66%), radial-gradient(30% 36% at 56% 82%, color-mix(in srgb, var(--acc) 32%, transparent), transparent 70%); animation: bizAura 20s ease-in-out infinite alternate; }
@keyframes bizAura { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .biz-hero__aura { animation: none; } }
.biz-hero__lede { max-width: 56ch; margin-top: 22px; }
.band__acts--center { justify-content: center; }

/* intro marché */
.biz-intro { max-width: 60ch; }
.biz-intro .lede { margin-top: 16px; }

/* les chiffres : grandes pastilles */
.biz-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.biz-stat { padding: 26px 22px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.biz-stat__n { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -.01em; color: var(--acc); transition: color 1s var(--v-ease); }
.biz-stat__l { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--v-fg2); }
.biz-stat__src { display: inline-block; margin-top: 12px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--v-fg3); }
.biz-note { max-width: 60ch; margin: 22px 0 0; font-size: 15px; color: var(--v-fg2); }

/* cartes (piliers, bénéfices, portes) */
.biz-cartes { display: grid; gap: 16px; margin-top: 8px; }
.biz-cartes--3 { grid-template-columns: repeat(3, 1fr); }
.biz-cartes--4 { grid-template-columns: repeat(4, 1fr); margin-top: 26px; }
.biz-carte { padding: 24px 22px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.biz-carte--mini { padding: 20px 18px; }
.biz-carte__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); margin-bottom: 16px; }
.biz-carte__ic svg { width: 22px; height: 22px; }
.biz-carte__h { margin: 0; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.1; letter-spacing: -.01em; color: var(--v-fg); }
.biz-carte__p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--v-fg2); }

/* bloc conviction (citation éditoriale, mise en valeur) */
.biz-conviction { margin: 10px 0 0; padding: clamp(28px, 4vw, 48px); border-radius: var(--v-rad); border: 1px solid color-mix(in srgb, var(--acc) 30%, var(--v-surf-line)); background: linear-gradient(140deg, color-mix(in srgb, var(--acc) 12%, var(--v-surf)), var(--v-surf)); }
.biz-conviction__t { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.12; letter-spacing: -.01em; color: var(--v-fg); max-width: 26ch; }
.biz-conviction__p { margin: 18px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--v-fg2); max-width: 70ch; }

/* univers : pastilles de tags */
.biz-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.biz-tag { padding: 10px 16px; border-radius: var(--v-pill); border: 1px solid var(--v-line); background: var(--v-surf); font: 600 14px/1 var(--ui); color: var(--v-fg); transition: border-color .2s, color .2s; }
.biz-tag:hover { border-color: var(--acc); color: var(--acc); }

/* la maison : vision + pourquoi */
/* La Maison = le manifeste : carte à dégradé + lueur + grand guillemet décoratif, la conviction en accent */
.biz-maison { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 56px); align-items: center; margin-top: 8px; padding: clamp(34px, 4.5vw, 64px); border-radius: var(--v-rad); overflow: hidden; border: 1px solid color-mix(in srgb, var(--acc) 24%, var(--v-surf-line)); background: linear-gradient(155deg, color-mix(in srgb, var(--acc) 11%, var(--v-surf)), var(--v-surf) 62%); }
.biz-maison::after { content: ''; position: absolute; z-index: 0; width: 72%; height: 92%; top: -26%; left: -14%; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 70%); pointer-events: none; }
.biz-maison__mark { position: absolute; z-index: 0; top: clamp(2px, 1vw, 24px); left: clamp(10px, 2vw, 30px); font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(170px, 24vw, 320px); line-height: .7; color: color-mix(in srgb, var(--acc) 22%, transparent); pointer-events: none; user-select: none; }
.biz-vision { position: relative; z-index: 1; margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3vw, 37px); line-height: 1.16; letter-spacing: -.01em; color: var(--v-fg); }
.biz-pourquoi { position: relative; z-index: 1; }
.biz-pourquoi p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--v-fg2); }
.biz-pourquoi p b { color: var(--acc); font-weight: 600; transition: color 1s var(--v-ease); }

/* talents : rejoindre + valeurs + candidature spontanée */
.biz-rejoindre { max-width: 72ch; }
.biz-rejoindre p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--v-fg2); }
.biz-valeurs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 28px; }
.biz-valeur { padding: 20px 18px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); }
.biz-valeur b { display: block; font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: -.01em; color: var(--acc); transition: color 1s var(--v-ease); }
.biz-valeur span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--v-fg2); }
.biz-spontanee { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: clamp(24px, 4vw, 56px); margin-top: 24px; padding: clamp(24px, 3vw, 44px); border-radius: var(--v-rad); border: 1px solid color-mix(in srgb, var(--acc) 28%, var(--v-surf-line)); background: color-mix(in srgb, var(--acc) 8%, var(--v-surf)); }
.biz-spontanee__txt .biz-carte__h { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.12; }
.biz-spontanee__txt .biz-carte__p { max-width: 44ch; }
.biz-spontanee .formulaire, .biz-spontanee .merci { margin-top: 0; }
@media (max-width: 760px) { .biz-spontanee { grid-template-columns: 1fr; } }

/* contact : quatre portes */
.biz-portes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.biz-porte { display: flex; flex-direction: column; gap: 8px; padding: 30px 26px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); text-decoration: none; color: inherit; cursor: pointer; transition: transform .3s var(--v-ease), border-color .3s var(--v-ease), background-color .3s var(--v-ease); }
.biz-porte:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acc) 50%, var(--v-surf-line)); background: color-mix(in srgb, var(--acc) 6%, var(--v-surf)); }
.biz-porte__ic { font-size: 28px; line-height: 1; margin-bottom: 12px; }
/* L'action lit comme un VRAI CTA : une pastille bordée qui se remplit d'accent au survol de
   la carte entière (toute la carte est le lien). Fini le lien souligné minuscule. */
.biz-porte__cta { margin-top: auto; align-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 18px; border-radius: var(--v-pill); border: 1px solid color-mix(in srgb, var(--acc) 42%, var(--v-surf-line)); color: var(--acc); font: 600 13.5px/1 var(--ui); white-space: nowrap; transition: background-color .25s ease, border-color .25s ease, color 1s var(--v-ease); }
.biz-porte:hover .biz-porte__cta { background: var(--acc); color: var(--v-bg); border-color: var(--acc); }
.biz-footer-phrase { max-width: 60ch; margin: 36px auto 0; text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(19px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -.01em; color: var(--v-fg); }

/* responsive business */
@media (max-width: 900px) {
  .biz-chiffres, .biz-cartes--3, .biz-cartes--4, .biz-portes { grid-template-columns: repeat(2, 1fr); }
  .biz-valeurs { grid-template-columns: repeat(3, 1fr); }
  .biz-maison { grid-template-columns: 1fr; gap: 22px; }
  .biz-maison__mark { font-size: 120px; top: -14px; opacity: .8; }
}
@media (max-width: 560px) {
  .biz-chiffres, .biz-cartes--3, .biz-cartes--4, .biz-portes { grid-template-columns: 1fr; }
  .biz-valeurs { grid-template-columns: repeat(2, 1fr); }
  .biz-apercu { margin-top: 84px; }
}

/* ====================================================================
   « POURQUOI JUNIOR, PAS UNE PUB » — page Enseignes (#vsads)
   ==================================================================== */
.vsads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; align-items: stretch; }
.vsads__c { display: flex; flex-direction: column; padding: 26px 22px; border-radius: var(--v-rad); border: 1px solid var(--v-surf-line); background: var(--v-surf); }
.vsads__c--off { opacity: .68; }
.vsads__c--on { opacity: 1; border-color: color-mix(in srgb, var(--acc) 46%, var(--v-surf-line)); background: linear-gradient(150deg, color-mix(in srgb, var(--acc) 12%, var(--v-surf)), var(--v-surf)); box-shadow: 0 22px 54px -30px color-mix(in srgb, var(--acc) 60%, transparent); }
.vsads__t { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: -.01em; color: var(--v-fg); margin-bottom: 12px; }
.vsads__c--on .vsads__t { color: var(--acc); transition: color 1s var(--v-ease); }
.vsads__p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--v-fg2); }
.vsads__c--on .vsads__p b { color: var(--v-fg); font-weight: 600; }
.vsads__punch { max-width: 56ch; margin: 28px auto 0; text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(19px, 2.4vw, 27px); line-height: 1.22; letter-spacing: -.01em; color: var(--v-fg); }
@media (max-width: 820px) { .vsads { grid-template-columns: 1fr; } }

/* ---- le code « 1 mois offert » dans le tunnel (décision 43) : discret, replié, jamais une offre publique ---- */
.pay__code { margin-top: 6px; }
.pay__code summary { cursor: pointer; font-size: 13.5px; color: var(--v-fg3); list-style: none; }
.pay__code summary::-webkit-details-marker { display: none; }
.pay__code summary::before { content: '+ '; }
.pay__code[open] summary::before { content: '− '; }
.pay__code-in { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.pay__code-in .champ-f__in { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .08em; }
.pay__code-msg { margin: 8px 0 0; font-size: 13px; color: #FF8A8A; }
.pay__code-msg:empty { display: none; }
.pay__code-msg--ok { color: #8ef0b0; }

/* ---- la zone de tête de la page Offres, modèle des leaders (audit 21.10) ---- */
.cherche--sans .btn-plein { display: none; }                               /* on cherche en tapant */
.cherche--sans { padding-left: 14px; background-image: none; }
.filtres { position: sticky; top: 112px; z-index: 6; padding: 10px 0 8px; background: var(--v-bg); gap: 10px; }   /* sous la barre fixe (48 + 58 px) */
.filtres__ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.filtres__ligne .villes { flex: 1 1 auto; min-width: 0; }
.filtres__ligne .vpill { max-width: 100%; }
.filtres__ligne .vpill__b { max-width: 100%; white-space: nowrap; }
.filtres__ligne .vpill__b b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* « Choisis ta ville » sur une ligne, jamais sur deux */
.filtres__ligne .bascule2 { flex: none; }
@media (max-width: 420px) { .filtres__ligne .vpill__k { display: none; } }   /* sur un petit téléphone, l'épingle suffit : le mot « Ta ville » cède la place */
.rubs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; -webkit-overflow-scrolling: touch; }
.rubs::-webkit-scrollbar { display: none; }
.rubs .chip { flex: none; }
.rubs .chip .rubIco { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rubs .rubBack { background: #ffffff10; color: var(--v-fg); }
.rubs .chip.rub--vide { opacity: .66; }
/* tant que le script n'a pas posé le rail et les cartes, la section garde sa place : la suite de la page ne saute pas à leur arrivée */
#offres:not([data-pret]) { min-height: 110svh; }
#offres:not([data-pret]) .terrain { visibility: hidden; }
.rubs:empty { min-height: 42px; }
@media (max-width: 640px) { .rubs { margin: 0 -4px; padding: 2px 4px; } }
@media (min-width: 900px) { .rubs { margin: 0; padding: 2px 0; } }

/* ---- « En feu » (décision 46) : les enseignes les plus validées au comptoir cette semaine, d'après des passages anonymes ---- */
.tcard__feu { position: absolute; left: 11px; bottom: 11px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 5px 7px; border-radius: var(--v-pill); background: #1a1410e6; border: 1px solid #ff8a3d55; color: #ffb27a; font: 700 11px/1 var(--ui); letter-spacing: .02em; }
.tcard__feu svg { width: 13px; height: 13px; fill: currentColor; }

/* ---- « Sur ton trajet » (décision 47) : un arrêt dans la liste des suggestions, l'astuce sous le champ ---- */
.vpill__astuce { margin: 6px 4px 2px; font: 500 12px/1.4 var(--ui); color: var(--v-fg3); }
.vpill__sugg:not([hidden]) ~ .vpill__astuce { display: none; }
.vpill__sugg [data-arret] b { display: inline-flex; align-items: center; gap: 7px; }
.vpill__sugg [data-arret] svg { width: 16px; height: 16px; flex: none; color: var(--acc); }

/* ---- Vie privée : le pilier (audit 27.10, P0) — ce qu'on NE fait pas ---- */
.privy__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.privy__txt .btn-lien { margin-top: 18px; }
.privy__non { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.privy__non li { position: relative; padding-left: 36px; font-family: var(--ui); font-weight: 500; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.4; color: var(--v-fg2); }
.privy__non li::before { content: "✕"; position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, #ff6b6b 16%, transparent); color: #ff9b9b; font-size: 12px; font-weight: 700; }
.privy__oui { margin: 30px auto 0; max-width: 64ch; padding: 15px 20px; border-radius: 14px; background: color-mix(in srgb, #7ee6b4 9%, transparent); border: 1px solid color-mix(in srgb, #7ee6b4 22%, transparent); font-family: var(--ui); font-weight: 500; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.55; color: var(--v-fg2); }
.privy__oui b { color: #9af0c6; }
@media (max-width: 820px) { .privy__in { grid-template-columns: 1fr; gap: 26px; } .privy__oui { margin-top: 22px; } }

/* ---- Comment ça marche : preuve de valeur en 5 s (audit P0.1) — panneau de verre + pastilles dégradées ---- */
.cmt3 { padding-block: clamp(14px, 2.2vw, 26px); }
.cmt3__flow { list-style: none; margin: 0; padding: clamp(18px, 1.9vw, 26px) clamp(20px, 2.2vw, 34px); display: flex; align-items: center; gap: clamp(12px, 1.5vw, 24px); flex-wrap: wrap; border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--v-fg) 4%, transparent), color-mix(in srgb, var(--v-fg) 1%, transparent)); border: 1px solid var(--v-surf-line); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 30px 60px -40px #000; }
.cmt3__step { flex: 1 1 0; min-width: 196px; display: flex; align-items: center; gap: 15px; padding: 8px 6px; border-radius: 14px; transition: transform .3s var(--v-ease); }
.cmt3__step:hover { transform: translateY(-3px); }
.cmt3__n { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1; color: var(--v-bg); background: linear-gradient(135deg, var(--s-1), var(--s-2) 55%, var(--s-3)); box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--s-2) 72%, transparent), inset 0 1px 0 #ffffff55; }
.cmt3__tx { display: grid; gap: 3px; }
.cmt3__tx b { font-family: var(--ui); font-weight: 700; font-size: clamp(15px, 1.3vw, 18px); color: var(--v-fg); line-height: 1.15; }
.cmt3__tx span { font-family: var(--ui); font-size: 13.5px; color: var(--v-fg3); line-height: 1.4; }
.cmt3__arr { flex: none; width: 26px; height: 2px; border-radius: 2px; font-size: 0; align-self: center; background: linear-gradient(90deg, color-mix(in srgb, var(--s-1) 55%, transparent), color-mix(in srgb, var(--s-2) 30%, transparent)); }
@media (max-width: 760px) { .cmt3__flow { flex-direction: column; align-items: stretch; gap: 4px; padding: 16px; } .cmt3__arr { display: none; } .cmt3__step { min-width: 0; padding: 11px 4px; } }

/* ---- Carte : tuiles OpenStreetMap (claires) assombries pour le thème sombre (ex-Esri, audit vie privée) ---- */
#map .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.95) saturate(0.82); }

/* ---- Mini-carte licence dans le hero MOBILE : l'objet signature dans le 1er écran, sans pousser la recherche (audit P0.5) ---- */
.hero__licmini { display: none; }
@media (max-width: 900px) {
  .hero__licmini { display: block; position: absolute; top: 0; right: 0; width: clamp(64px, 17vw, 78px); z-index: 3; transform: rotate(7deg); pointer-events: none; filter: drop-shadow(0 18px 30px #000b); }
  .hero__licmini .scene3d { width: 100%; perspective: 900px; }
}

/* ---- Hero D (choix de Max, 01.11.2026) : sans bandeau, la barre remonte ; un flotteur, posé hors de l'écran du téléphone ; la licence dans le pli mobile ---- */
body[data-page="accueil"] .barre { top: max(14px, env(safe-area-inset-top)); }
body[data-page="accueil"] .hero { padding-top: clamp(112px, 12vw, 136px); }
.hero__tel .flot--b { display: none; }
.hero__tel .flot--a { left: auto; right: -17%; top: 3%; }
.deal__ville { margin: 4px 0 18px; }
@media (max-width: 560px) {
  .hero__cta { width: 100%; justify-content: center; }
  .hero__act .btn-lien { display: none; }
}
@media (max-width: 900px) {
  body[data-page="accueil"] .hero { padding-top: 92px; }
  .hero__tel { padding-top: 8px; }
  .hero__tel .flot--a { right: -5%; top: 1%; }
  .hero__lic { left: -5%; bottom: auto; top: 24%; width: clamp(112px, 31vw, 150px); }
}

/* ---- Travailler avec nous : le message à gauche, le geste à droite, dès le premier écran ---- */
.rej { padding-bottom: clamp(36px, 5vw, 72px); }
.rej__g { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(28px, 5vw, 80px); align-items: center; }
.rej__txt .h2 { font-size: clamp(38px, 4.1vw, 60px); }
.rej__txt .lede { margin-top: 18px; max-width: 46ch; }
.rej .formulaire, .rej .merci { margin-top: 0; }
.rej__f { padding: clamp(20px, 2.4vw, 28px); }
.rej__f .champ-f { margin-top: 14px; }
.rej__f .champ-f__k small { font-weight: 400; font-size: 12.5px; color: var(--v-fg3); }
.rej__dom { border: 0; padding: 0; margin: 0; }
.rej__puces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rej__puces label { position: relative; cursor: pointer; }
.rej__puces input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rej__puces span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; border-radius: var(--v-pill); border: 1px solid #ffffff26; color: var(--v-fg2); font: 500 14.5px/1 var(--ui); transition: background-color .2s, color .2s, border-color .2s; }
.rej__puces input:checked + span { background: var(--v-fg); border-color: var(--v-fg); color: var(--v-bg); }
.rej__puces input:focus-visible + span { outline: 2px solid var(--v-fg); outline-offset: 2px; }
.rej__2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.rej__msg { padding-block: 13px; min-height: 84px; resize: vertical; line-height: 1.45; }
.rej__err { margin-top: 6px; color: #ffb4a8; font-size: 13.5px; }
.rej__err[hidden] { display: none; }
.rej__f [aria-invalid="true"] { border-color: #ffb4a8; }
.rej__f .formulaire__etat { min-height: 0; margin-top: 10px; }
.rej__f .formulaire__etat:empty { margin-top: 0; }
.rej__envoi { width: 100%; justify-content: center; margin-top: 14px; }
.rej__envoi:disabled { opacity: .6; cursor: progress; }
.rej-note { margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--v-fg3); }
.rej__merci { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: clamp(28px, 3vw, 40px); }
.rej__merci .merci__h:focus { outline: none; }
.rej__merci .merci__p { margin: 0; }
.rej__suite { margin-top: 10px; font-weight: 500; }
/* Les valeurs en lignes : le mot en grand, la phrase à côté. C'est la voix de l'équipe, pas une grille de cartes. */
.rej-val ul { list-style: none; margin: 16px 0 0; padding: 0; }
.rej-val li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 6px clamp(20px, 4vw, 56px); padding: clamp(14px, 1.6vw, 20px) 0; border-top: 1px solid var(--v-line); }
.rej-val b { font: 400 clamp(32px, 3.6vw, 52px)/1.1 var(--display); letter-spacing: .005em; text-transform: uppercase; }
.rej-val span { color: var(--v-fg2); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.45; }
@media (max-width: 900px) {
  .rej__g { grid-template-columns: minmax(0, 1fr); }
  .rej-val li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) { .rej__2 { grid-template-columns: minmax(0, 1fr); } }

/* ---- Les prix jeunes (décision 55, resserrée) : une question, une réponse ---- */
.tav { padding-block: clamp(16px, 2.4vw, 32px); }
.tav__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px clamp(24px, 4vw, 56px); padding: clamp(20px, 2.6vw, 32px) clamp(20px, 3vw, 40px); border-radius: 24px; }
.tav__in > div { min-width: 0; }
.tav__h { font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.tav__lede { margin-top: 6px; color: var(--v-fg2); font-size: clamp(15px, 1.2vw, 16.5px); line-height: 1.45; max-width: 52ch; }
.tav__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tav__an select { appearance: none; -webkit-appearance: none; min-height: 52px; min-width: 250px; padding: 0 44px 0 18px; border: 1px solid #ffffff38; border-radius: var(--v-pill); color: var(--v-fg); font: 500 16px/1 var(--ui); cursor: pointer; background: #ffffff0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23f2f2ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center; }
.tav__an select option { color: #16171c; }
.tav__an select:focus-visible, .tav__et:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 2px; }
.tav__et { min-height: 44px; padding: 0 16px; border-radius: var(--v-pill); border: 1px solid var(--v-line); background: none; color: var(--v-fg2); font: 500 14.5px/1 var(--ui); cursor: pointer; }
.tav__et[hidden] { display: none; }
.tav__et[aria-pressed="true"] { background: #ffffff1c; border-color: #ffffff55; color: var(--v-fg); }
.tav__r { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 16px clamp(24px, 4vw, 56px); align-items: end; padding-top: 16px; border-top: 1px solid var(--v-line); }
.tav__r[hidden] { display: none; }
.tav__n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.tav__n .holo-t { font: 400 clamp(40px, 4.2vw, 58px)/1.1 var(--display); letter-spacing: .005em; font-variant-numeric: tabular-nums; }
.tav__n [hidden] { display: none; }
.tav__leg { color: var(--v-fg2); font-size: 15px; }
.tav__det { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; font-size: 14.5px; color: var(--v-fg2); }
.tav__det li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 5px; border-bottom: 1px solid var(--v-line); }
.tav__det b { color: var(--v-fg); font-weight: 600; white-space: nowrap; }
.tav__det .tav__plus { border-bottom: 0; padding-bottom: 0; line-height: 1.4; }
.tav__note { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--v-fg3); }
.tav__suite { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tav__fin { color: color-mix(in srgb, var(--acc) 60%, #fff); font-size: 15px; font-weight: 500; }
.tav__pont { font-size: 16px; font-weight: 500; line-height: 1.3; }
.tav__suite .btn-plein { width: 100%; justify-content: center; }
.tav__suite .btn-lien { align-self: center; }
.tav__suite .btn-lien[hidden] { display: none; }
@media (max-width: 760px) {
  .tav__in { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .tav__an, .tav__an select { display: block; width: 100%; min-width: 0; }
  .tav__r { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- L'accueil au téléphone : le haut de page sans clignotement ----------
   Il ne passe plus par les scripts, qui le faisaient apparaître, disparaître et revenir : il s'affiche dès le premier
   rendu et monte ligne après ligne, animé par le navigateur seul (transform + opacity). Le reste de la page garde ses effets. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  [data-page="accueil"] .hero [data-reveal], [data-page="accueil"] .hero [data-split] { visibility: visible; opacity: 1; animation: arriveeTel 1s cubic-bezier(.16, 1, .3, 1) both; }
  [data-page="accueil"] .hero .holo-t { display: inline-block; animation: arriveeTel 1.15s .09s cubic-bezier(.16, 1, .3, 1) both; }
  [data-page="accueil"] .hero .hero__lede, [data-page="accueil"] .hero .hero__act { animation-delay: .1s; }
  [data-page="accueil"] .hero .hero__leg, [data-page="accueil"] .hero .hero__tel { animation-delay: .18s; }
  /* l'écran du téléphone se remplit ligne par ligne, comme sur ordinateur */
  [data-page="accueil"] #tel .tel__chips span, [data-page="accueil"] #tel .tcomp { animation: arriveeTel .7s .3s cubic-bezier(.16, 1, .3, 1) both; }
  [data-page="accueil"] #tel .tcomp:nth-of-type(2) { animation-delay: .4s; }
  [data-page="accueil"] #tel .tcomp:nth-of-type(3) { animation-delay: .5s; }
  /* Sans découpe en lignes, le masque ne donne plus d'air à ce titre : on garde le même rythme. */
  [data-page="accueil"] .hero__h.titre-carte { padding-top: .03em; line-height: 1.33; margin-bottom: -.12em; }
}
@keyframes arriveeTel { from { opacity: .01; transform: translateY(26px); } }
.leger [data-reveal]:not(.vu, .hero [data-reveal]) { opacity: 0; transform: translateY(26px); }
.leger .vu { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1); }

/* ---- app/offres-niveaux.css ---- */
/* ============================================================================
   JUNIOR — app jeune ET site : les 5 niveaux de Souf (puces de sous-catégories →
   grille de tuiles → page marque / page réseau → offres). Préfixe `v2`, jetons Junior.
   Mouvement : transform/opacity seulement ; reduced-motion = pas de transition.
   ============================================================================ */

/* En vue « territoire », #appCartes est une grille de cartes (2 colonnes) : le bloc prend toute
   la largeur et peut rétrécir. */
.v2sect { margin-top: 6px; grid-column: 1 / -1; min-width: 0; width: 100%; }
.v2carou, .v2res, .v2tiles, .v2chips { min-width: 0; }

/* ---------- 1. un territoire sans enseigne : la chip reste, grisée (jamais une impasse) ---------- */
.rub--vide { opacity: .66; }

/* ---------- 2. les puces de sous-catégories : des filtres, pas une destination ---------- */
.v2chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 10px -16px 0; padding: 2px 16px; -webkit-overflow-scrolling: touch; }
.v2chips::-webkit-scrollbar { display: none; }
.v2chip { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--v-line, #ffffff1f); background: #ffffff08; color: var(--v-fg2, #c0c0ba); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.v2chip i { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 999px; background: #ffffff12; color: var(--v-fg3, #96968f); }
.v2chip:hover { color: var(--v-fg, #f4f4ef); border-color: #ffffff33; }
.v2chip[aria-selected="true"] { background: var(--v-fg, #f4f4ef); color: var(--v-bg, #16171c); border-color: transparent; }
.v2chip[aria-selected="true"] i { background: #00000022; color: inherit; }
.v2chip:focus-visible { outline: 2px solid var(--v-fg, #f4f4ef); outline-offset: 2px; }
.v2bientot { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--v-fg3, #96968f); }
.v2bientot b { font-weight: 700; color: var(--v-fg2, #c0c0ba); margin-right: 6px; }
.v2vide { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; background: #ffffff08; border: 1px dashed var(--v-line, #ffffff1f); }
.v2vide b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.v2vide span { font-size: 13px; color: var(--v-fg3, #96968f); line-height: 1.5; }
#v2site .v2vide { margin-top: 14px; }

/* ---------- 3. la grille de tuiles, tout de suite ---------- */
.v2tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
@media (min-width: 640px) { .v2tiles { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } }
#v2grid[hidden] { display: none; }

/* la tuile marque : visuel de l'app en fond (embleme hero : photo / illustration / logo) · rabais en
   haut à droite · nom + ville (ou distance) · % · produit (heure) · ruban flash. Classes propres :
   aucune mise en page de l'app n'est héritée. */
.v2tile { position: relative; display: block; border-radius: 16px; overflow: hidden; background: var(--v-surf, #1f2027); border: 1px solid #ffffff1a; cursor: pointer; isolation: isolate; transition: transform .3s var(--v-ease, ease); }
.v2tile:hover { transform: translateY(-3px); }
.v2tile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.v2tile__hero { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.v2tile__hero .ens__hero { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.v2tile__hero .ens__hero img, .v2tile__hero .ens__illu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* la pastille d'identité de l'app (logo de démo ou emblème) : à gauche, le texte à sa droite */
.v2tile__hero .ens__badge { z-index: 3; top: auto; right: auto; left: 12px; bottom: 12px; }
.v2tile__txt { padding-left: 50px; }
.v2tile__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, #0b0c1000 36%, #0b0c10c8 80%, #0b0c10ee); }
.v2tile__rem { position: absolute; top: 10px; right: 10px; z-index: 3; padding: 5px 10px; border-radius: 999px; background: #0b0c10e0; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -.01em; }
.v2tile__flash { position: absolute; top: 12px; left: 0; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 12px; background: var(--s-1, #3cd6ff); color: #0b0c10; font-weight: 800; font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; border-radius: 0 999px 999px 0; }
/* réseau (décision 41) : une seule tuile, « N boutiques » */
.v2tile__n { position: absolute; top: 12px; left: 12px; z-index: 3; padding: 4px 9px; border-radius: 999px; background: #ffffffe0; color: #0b0c10; font-weight: 800; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.v2tile__in { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: flex-end; pointer-events: none; }
.v2tile__txt { min-width: 0; flex: 1 1 auto; color: #fff; }
.v2tile__nom { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.v2tile__ville { display: block; font-size: 12px; color: #ffffffbf; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* cases « bientôt » : une sous-catégorie à venir, au grain de la sous-catégorie (place à prendre, jamais une fausse marque — décision 30) */
.v2tiles--bientot { margin-top: 12px; }
.v2tile--bientot { cursor: default; border-style: dashed; border-color: color-mix(in srgb, var(--acc, #76A1FF) 32%, #ffffff1a); }
.v2tile--bientot:hover { transform: none; }
.v2tile--bientot .v2tile__hero { display: grid; place-items: center; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--acc, #76A1FF) 8%, transparent) 0 9px, transparent 9px 18px), var(--v-surf, #1f2027); }
.v2tile__ghost { width: 56px; height: 56px; margin-bottom: 22px; border-radius: 15px; display: grid; place-items: center; border: 1.5px dashed color-mix(in srgb, var(--acc, #76A1FF) 45%, #ffffff22); color: color-mix(in srgb, var(--acc, #76A1FF) 85%, #fff); }
.v2tile__ghost .rubIco { width: 26px; height: 26px; }
.v2tile__rem--soft { background: #0b0b0ccc; color: #ececdf; font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.v2tile--bientot .v2tile__txt { padding-left: 0; }
.v2tile--bientot .v2tile__ville { color: color-mix(in srgb, var(--acc, #76A1FF) 88%, #fff); white-space: normal; }
.v2bientot--plus { margin-top: 10px; }
.v2tile__deal { display: block; margin-top: 6px; font-size: 12.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2tile__deal b { font-weight: 800; }

/* ---------- 4. la page marque / la page réseau + 5. les offres ---------- */
.v2res { margin-top: 14px; }
.v2sub { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.v2sub__back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--v-line, #ffffff1f); background: #ffffff08; color: var(--v-fg2, #c0c0ba); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; }
.v2sub__back:hover { color: var(--v-fg, #f4f4ef); background: #ffffff14; }
.v2scard__terr { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-fg3, #96968f); }
.v2marque { margin-top: 10px; }
.v2marque__hero { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid #ffffff1a; }
.v2marque__hero .ens__hero { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.v2marque__hero .ens__hero img, .v2marque__hero .ens__illu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .v2marque__hero { aspect-ratio: 21 / 9; max-height: 320px; } }
.v2sub--bas { margin: 18px 0 0; }
.v2marque__id { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.v2marque__emb { display: block; width: 48px; height: 48px; border-radius: 14px; overflow: hidden; flex: none; background: #ffffff10; }
.v2marque__emb > * { display: block; width: 100%; height: 100%; }
.v2marque__emb img, .v2marque__emb svg { width: 100%; height: 100%; object-fit: cover; }
.v2marque__nom { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.1; }
.v2marque__meta { color: var(--v-fg3, #96968f); font-size: 13px; margin: 3px 0 0; }
.v2marque__desc { color: var(--v-fg2, #c0c0ba); font-size: 14.5px; line-height: 1.5; margin: 10px 0 0; }
.v2marque__res { display: inline-flex; align-items: center; margin-top: 12px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--v-line, #ffffff1f); background: #ffffff0a; color: var(--v-fg, #f4f4ef); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; text-align: left; cursor: pointer; }
.v2marque__res:hover { background: #ffffff14; }
.v2marque__h { margin-top: 20px; }
.v2res__commun { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--v-fg2, #c0c0ba); }
.v2bq { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--v-line, #ffffff1f); }
.v2bq__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.v2bq__h b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.v2bq__h span { font-size: 12px; color: var(--v-fg3, #96968f); text-align: right; }
.v2offres { display: grid; gap: 10px; margin-top: 10px; }
.v2offre { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 16px; background: #ffffff0a; border: 1px solid var(--v-line, #ffffff1f); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .25s var(--v-ease, ease), border-color .25s var(--v-ease, ease); }
.v2offre:hover { transform: translateY(-2px); border-color: #ffffff33; }
.v2offre:focus-visible { outline: 2px solid var(--v-fg, #f4f4ef); outline-offset: 3px; }
.v2offre__rem { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--s-1, #3cd6ff); color: #0b0c10; font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.v2offre--flash .v2offre__rem { background: var(--s-3, #ff7ce0); }
.v2offre__txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.v2offre__txt b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.v2offre__txt span { font-size: 12.5px; color: var(--v-fg3, #96968f); }
.v2offre__tag { margin-top: 3px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--s-1, #3cd6ff); }
.v2offre__tag--ici { color: var(--v-fg3, #96968f); }
.v2offre__go { flex: none; color: var(--v-fg2, #c0c0ba); font-weight: 700; }
.v2marque__how { margin: 16px 0 0; color: var(--v-fg3, #96968f); font-size: 13px; line-height: 1.5; }

/* ---------- un carousel automatique (réservé aux meilleurs deals) ---------- */
.v2carou { position: relative; overflow: hidden; margin: 12px -16px 0; padding: 0 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.v2carou--fixe { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; }
.v2carou__track { display: flex; gap: 12px; width: max-content; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .v2carou { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; -webkit-mask-image: none; mask-image: none; }
  .v2chip, .v2tile, .v2offre { transition: none; }
}

/* ---------- les meilleurs deals : le carousel automatique (vue Tout) ---------- */
.v2deals { margin-top: 10px; }
.v2hero { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 10px -16px 0; padding: 2px 16px 6px; overscroll-behavior-x: contain; }
.v2hero::-webkit-scrollbar { display: none; }
.v2slide { position: relative; flex: 0 0 calc(100% - 28px); aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; scroll-snap-align: center; background: var(--v-surf, #1f2027); border: 1px solid #ffffff1a; cursor: pointer; isolation: isolate; }
@media (min-width: 720px) { .v2slide { flex-basis: calc((100% - 12px) / 2); aspect-ratio: 16 / 9; scroll-snap-align: start; } }
@media (min-width: 1200px) { .v2slide { flex-basis: calc((100% - 24px) / 3); } }
.v2slide:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.v2slide__hero { position: absolute; inset: 0; }
.v2slide__hero .ens__hero { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.v2slide__hero .ens__hero img, .v2slide__hero .ens__illu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2slide__hero .ens__badge { display: none; }
.v2slide .v2tile__rem { font-size: 16px; padding: 6px 12px; }
.v2slide__n { position: absolute; top: 12px; left: 12px; z-index: 3; padding: 4px 9px; border-radius: 999px; background: #ffffffe0; color: #0b0c10; font-weight: 800; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.v2slide .v2tile__flash + .v2slide__n { top: 44px; }
.v2slide__in { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 3; display: flex; flex-direction: column; gap: 3px; color: #fff; pointer-events: none; }
.v2slide__nom { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2slide__deal { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2slide__deal b { font-weight: 800; }
.v2slide__lieu { font-size: 12px; color: #ffffffbf; }
.v2hero__dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.v2hero__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #ffffff33; cursor: pointer; transition: transform .25s var(--v-ease, ease), background-color .25s; }
.v2hero__dot[aria-current="true"] { background: var(--v-fg, #f4f4ef); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .v2hero { scroll-behavior: auto; } .v2hero__dot { transition: none; } }

/* le titre d'un territoire filtré par une sous-catégorie : « Food & Restauration › Burgers » (rail de tête, audit 21.10) */
.tsectH .v2sect__sous { font-style: normal; font-weight: 500; opacity: .62; }