/* =========================================================
   Anthony MRLN · site vitrine
   Coque du site : Bricolage Grotesque, papier gris neutre, encre, accent bleu irisé (esprit LifeDots).
   Chaque bannière reprend la DA de son app (couleurs, typo, éléments).
   Échelle z-index : bannière (fond 0, éléments 1, texte 2), nav 50, grain 60, skip 70.
   Formes : contrôles = pilules, bannières/cartes = 28px, champs = 14px.
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  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: "Bricolage";
  src: url("../fonts/bricolage-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Stapel"; src: url("../fonts/stapel-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Stapel"; src: url("../fonts/stapel-semiexpanded-extrabold.otf") format("opentype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Knicknack"; src: url("../fonts/knicknack-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Knicknack"; src: url("../fonts/knicknack-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Knicknack"; src: url("../fonts/knicknack-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "NouvelR"; src: url("../fonts/nouvelr-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NouvelR"; src: url("../fonts/nouvelr-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Sharp Grotesk"; src: url("../fonts/sharpgrotesk-book.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Goldplay"; src: url("../fonts/goldplay-bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noplato"; src: url("../fonts/noplato-mono.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Monument Extended"; src: url("../fonts/monument-extended.otf") format("opentype"); font-weight: 400; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --paper: #ECECE8;
  --paper-2: #E2E2DD;
  --field: #F5F5F2;
  --ink: #141416;
  --ink-2: #55555D;
  --line: rgb(20 20 22 / .12);
  --line-strong: rgb(20 20 22 / .22);
  --accent: #4F6BFF;
  --irid: linear-gradient(100deg, #2EC5FF 0%, #4F6BFF 38%, #9B5CFF 70%, #FF5FCF 100%);
  --irid-text: linear-gradient(100deg, #0A8FD8 0%, #3B55F0 40%, #7C3AED 72%, #D02A8C 100%);
  --focus: rgb(79 107 255 / .4);
  --danger: #B42318;

  --glass-tint: rgb(236 236 232 / .5);
  --glass-tint-lg: rgb(236 236 232 / .32);
  --glass-well: rgb(228 228 224 / .78);
  --glass-pill: #fff;

  --nav-h: 60px;
  --gutter: clamp(16px, 4vw, 48px);
  --gutter-sm: clamp(12px, 2vw, 24px);
  --r-banner: 28px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* Clair par défaut, même si le téléphone est en mode sombre : « only » interdit
     au navigateur d'assombrir la page lui-même (Chrome, Brave, Samsung…). */
  color-scheme: only light;
}
/* Mode nuit, au choix du visiteur (bouton lune de la nav) */
:root[data-theme="dark"] {
  --paper: #0F0F11;
  --paper-2: #1B1B1F;
  --field: #17171A;
  --ink: #EDEDE8;
  --ink-2: #A3A3AB;
  --line: rgb(237 237 232 / .12);
  --line-strong: rgb(237 237 232 / .22);
  --danger: #FF8A80;
  --irid-text: linear-gradient(100deg, #5BD3FF 0%, #7C8CFF 40%, #B98CFF 72%, #FF8BDB 100%);
  --glass-tint: rgb(18 18 21 / .55);
  --glass-tint-lg: rgb(18 18 21 / .4);
  --glass-well: rgb(10 10 13 / .74);
  --glass-pill: rgb(255 255 255 / .2);
  color-scheme: dark;
}
/* Passage jour / nuit en fondu (navigateurs récents) */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ease); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 28px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* Pas de sélection de texte, pas de menu « enregistrer » à l'appui long (iOS) */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select { -webkit-user-select: text; user-select: text; }
/* Images et canvas : ni glisser-déposer ni clic droit « Enregistrer l'image ».
   Le clic passe au lien parent (icônes cliquables). */
img, canvas { -webkit-user-drag: none; pointer-events: none; }
body::after { /* grain */
  content: "";
  position: fixed; inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button { font: inherit; }
::selection { background: #C7D2FF; color: #141416; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 70;
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 16px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 12px; left: 50%;
  translate: -50% 0;
  z-index: 50;
  width: min(1296px, calc(100% - 24px));
  height: var(--nav-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 8px 0 22px;
  border-radius: 999px;
  isolation: isolate;
  /* Verre : teinte légère + reflets. Sous Chrome/Edge, la vraie réfraction
     (filtre SVG de déplacement, cf. initLiquidGlass) remplace le flou. */
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .38),
    inset 0 -1px 0 rgb(255 255 255 / .1),
    inset 0 0 0 1px rgb(255 255 255 / .14),
    0 14px 34px -18px rgb(0 0 0 / .5);
}
.nav::before { /* reflet spéculaire du verre */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 160% at 10% -40%, rgb(255 255 255 / .22), transparent 42%),
    linear-gradient(180deg, rgb(255 255 255 / .12), transparent 55%);
}
.nav::after { /* liseré du verre : la lumière accroche le haut à gauche et le bas à droite */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(165deg,
    rgb(255 255 255 / .8), rgb(255 255 255 / .16) 24%,
    rgb(255 255 255 / 0) 50%,
    rgb(255 255 255 / .12) 76%, rgb(255 255 255 / .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.nav.lg-on {
  background: var(--glass-tint-lg);
  /* le flou est dans le filtre SVG (#lg-blur), réglé en JS */
  -webkit-backdrop-filter: url(#lg-refract) saturate(140%) brightness(1.03);
  backdrop-filter: url(#lg-refract) saturate(140%) brightness(1.03);
  box-shadow:
    inset 0 0 18px rgb(255 255 255 / .14),
    inset 0 1px 0 rgb(255 255 255 / .3),
    0 14px 34px -18px rgb(0 0 0 / .5);
}
.lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Au-dessus de LifeDots, verre plus dépoli (sous Chrome, c'est #lg-blur qui monte, cf. main.js) */
.nav.is-frost:not(.lg-on) { -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); }
/* La nav s'adapte à ce qui passe dessous, comme le verre d'iOS */
.nav { color: var(--ink); transition: color .3s, background-color .3s; }
.nav[data-over="light"] {
  --ink: #141416; --ink-2: #55555D;
  --glass-tint: rgb(255 255 255 / .55); --glass-tint-lg: rgb(255 255 255 / .3);
  --glass-well: rgb(238 238 241 / .78); --glass-pill: #fff;
}
.nav[data-over="dark"] {
  --ink: #EDEDE8; --ink-2: #A3A3AB;
  --glass-tint: rgb(14 14 18 / .6); --glass-tint-lg: rgb(14 14 18 / .4);
  --glass-well: rgb(10 10 14 / .74); --glass-pill: rgb(255 255 255 / .2);
}
.nav__brand {
  text-decoration: none;
  font-weight: 500;
  font-stretch: 85%;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.nav__brand b { font-weight: 800; }
.nav__links { display: flex; gap: 2px; margin-left: auto; }
.nav__links a {
  text-decoration: none; font-size: .95rem; font-weight: 500;
  padding: 8px 14px; border-radius: 999px;
  transition: background-color .2s;
}
.nav__links a:hover { background: var(--paper-2); }

/* Bouton mode nuit : même puits que le sélecteur de langue */
.theme {
  position: relative;
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  padding: 0; border: 0; border-radius: 999px;
  background: var(--glass-well);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .18);
  color: var(--ink-2);
  cursor: pointer;
  transition: color .25s;
}
.nav__links + .theme { margin-left: 4px; }
.theme:hover { color: var(--ink); }
.theme:active { scale: .94; }
.theme:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme svg {
  grid-area: 1 / 1;
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .35s var(--ease), rotate .5s var(--ease), scale .5s var(--ease);
}
.theme__sun { opacity: 0; rotate: -90deg; scale: .6; }
.theme[aria-pressed="true"] .theme__moon { opacity: 0; rotate: 90deg; scale: .6; }
.theme[aria-pressed="true"] .theme__sun { opacity: 1; rotate: 0deg; scale: 1; }

.lang {
  position: relative;
  display: flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass-well);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .18);
}
.lang button {
  position: relative; z-index: 1;
  border: 0; background: none; cursor: pointer;
  padding: 7px 11px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--ink-2);
  transition: color .25s;
}
.lang button[aria-pressed="true"] { color: var(--ink); }
/* Japonais : Bricolage n'a pas de kana ni de kanji, le système prend le relais.
   Les titres se coupent entre les mots, pas au milieu. */
:lang(ja) body { font-family: "Bricolage", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", ui-sans-serif, system-ui, sans-serif; }
:lang(ja) :is(h1, h2, h3, .banner__sub) { word-break: auto-phrase; line-break: strict; }
:lang(ja) .hero__title { line-height: 1.22; letter-spacing: -.01em; }
/* La police japonaise descend plus bas que Bricolage : le trait remonte sous les caractères */
:lang(ja) .hero__title mark::after { bottom: .1em; }
.lang__pill {
  position: absolute; top: 4px; bottom: 4px; left: 0;
  width: var(--pw, 0px);
  transform: translateX(var(--px, 0px));
  border-radius: 999px;
  background: var(--glass-pill);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 2px 8px rgb(0 0 0 / .18);
  transition: transform .4s var(--ease), width .4s var(--ease);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 40px;
  padding: 16px 28px;
  border: 0; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-weight: 650; font-size: 1rem; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--irid); color: #fff; }
.btn:active { transform: scale(.98); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  max-width: 1320px;
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 56px) var(--gutter) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}
.hero__title {
  font-size: clamp(2.6rem, 5.4vw, 5.6rem);
  line-height: .96;
  letter-spacing: -.035em;
  font-weight: 800;
  font-stretch: 80%;
  max-width: 12.5ch;
  text-wrap: balance;
}
.hero__title mark {
  position: relative;
  padding-bottom: .04em;
  background: var(--irid-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero__title mark::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -.02em;
  height: .07em;
  border-radius: 999px;
  background: var(--irid);
  transform: scaleX(0); transform-origin: 0 50%;
  animation: swipe 1s .8s var(--ease) forwards;
}
@keyframes swipe { to { transform: scaleX(1); } }
.hero__copy > * { animation: rise 1s var(--ease) both; }
.hero__copy > :nth-child(2) { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }

.hero__stage {
  --k: 1;
  --n: 6;
  position: relative;
  left: calc(-1 * clamp(0px, 4.5vw, 84px));
  height: min(70vh, 640px);
}
/* Placement calculé en JS (initHero) : positions et tailles déjà en pixels */
.hero__stage.is-auto { --k: 1; }
.hero__stage.is-live .orb { transition: left .9s var(--ease), top .9s var(--ease), width .9s var(--ease); }
.orb {
  position: absolute;
  left: var(--x); top: var(--y);
  width: calc(var(--s) * var(--k) * 1px);
  transform: translate3d(var(--mx, 0px), calc(var(--py, 0px) + var(--my, 0px)), 0) rotate(var(--r));
  z-index: var(--z, 1);
  text-decoration: none;
  outline-offset: 6px;
}
.orb__pop::before { /* dégradé de la couleur de l'app, très diffus ; apparaît avec l'icône */
  content: "";
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 230%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--glow, 0 0 0) / var(--glow-a, .033)), rgb(var(--glow, 0 0 0) / 0));
  pointer-events: none;
}
.orb:not([style*="--glow"]) .orb__pop::before { display: none; }
.orb--irid .orb__pop::before { /* LifeDots : bleu irisé (bleu, violet, turquoise) */
  background: radial-gradient(closest-side,
    rgb(79 120 255 / var(--glow-a, .033)) 0%,
    rgb(150 110 255 / calc(var(--glow-a, .033) * .8)) 40%,
    rgb(60 220 255 / calc(var(--glow-a, .033) * .5)) 70%,
    rgb(60 220 255 / 0) 100%);
}
.orb__pop { position: relative; display: block; animation: orbIn 1s var(--ease-spring) both; animation-delay: calc(.3s + var(--i) * .08s); }
.orb__bob { display: block; animation: bob 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
.orb img {
  display: block; width: 100%; height: auto;
  border-radius: 22.5%;
  box-shadow: 0 26px 44px -20px rgb(20 20 30 / .5), 0 6px 14px -6px rgb(20 20 30 / .25);
  filter: blur(var(--b, 0px));
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.orb:hover, .orb:focus-visible { z-index: 20; }
.orb:hover img, .orb:focus-visible img { transform: scale(1.07) rotate(calc(var(--r) * -1)); filter: none; }
.orb__name {
  position: absolute; left: 50%; top: calc(100% + 12px);
  translate: -50% 6px; rotate: calc(var(--r) * -1);
  padding: 5px 11px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, translate .35s var(--ease);
}
.orb:hover .orb__name, .orb:focus-visible .orb__name { opacity: 1; translate: -50% 0; }
@keyframes orbIn { from { opacity: 0; transform: scale(.55) translateY(40px); } }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* ---------- Apps ---------- */
.apps { padding-top: clamp(48px, 9vh, 112px); }
.stack {
  display: grid;
  gap: clamp(10px, 1.2vw, 18px);
  max-width: 1880px;
  margin: 0 auto;
  padding: 0 var(--gutter-sm);
}

/* ---------- Bannière (commun) ----------
   Bande fine au ratio 1900×400. Parcours de lecture : titre → scène → bouton.
   La scène vit dans un conteneur dont la taille pilote tout (unités cqh/cqw). */
.banner {
  --pad-x: clamp(24px, 4vw, 76px);
  --get-w: 150px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1900 / 340;
  min-height: 224px;
  border-radius: var(--r-banner);
  background: var(--b-bg);
  color: var(--b-ink);
}
.banner__bg { position: absolute; inset: 0; z-index: 0; }
/* Toute la bannière mène à la fiche App Store : un lien couvre la carte, les textes
   le laissent passer, et le titre, l'icône et le badge restent cliquables par-dessus. */
.banner__hit { position: absolute; inset: 0; z-index: 1; -webkit-user-drag: none; }
.banner__inner { pointer-events: none; }
.banner__inner a { pointer-events: auto; }
.banner:has(.banner__hit:hover) .store,
.banner:has(.banner__hit:hover) .banner__title a { transform: translateY(-2px); }
.banner:has(.banner__hit:hover) .banner__icon { transform: translateY(-2px) scale(1.04); }
.stage {
  position: absolute;
  z-index: 1;
  top: 0; bottom: 0;
  left: 35%;
  right: calc(var(--pad-x) + var(--get-w) + 2%);
  container-type: size;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: opacity 1s var(--ease) .15s;
}
.banner__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(16px, 1.9vw, 32px) var(--pad-x);
}
/* Lisibilité : un grand halo très diffus en bas à gauche, derrière les textes.
   Couleur (--halo) et force (--halo-a) réglées par bannière. */
.banner__inner::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(var(--halo-size, 48% 160%) at 0% 100%,
    rgb(var(--halo, 0 0 0) / var(--halo-a, 0)) 0%,
    rgb(var(--halo, 0 0 0) / calc(var(--halo-a, 0) * .8)) 22%,
    rgb(var(--halo, 0 0 0) / calc(var(--halo-a, 0) * .5)) 46%,
    rgb(var(--halo, 0 0 0) / calc(var(--halo-a, 0) * .2)) 72%,
    rgb(var(--halo, 0 0 0) / 0) 100%);
}
.b-scoring, .b-tiiime, .b-focus, .b-tdm { --halo: 255 255 255; --halo-a: .62; }
.b-numbr { --halo: 4 4 11; --halo-a: .62; }
.banner__head {
  max-width: 31%;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.banner__title {
  margin: 0 0 10px;
  font-size: clamp(2.2rem, 4.2vw, 4.4rem);
  font-weight: inherit;
  line-height: .95;
}
.banner__logo { display: block; width: auto; max-width: 100%; height: clamp(40px, 4.6vw, 84px); }
.banner__title a { /* le logo ou le titre mène à la fiche App Store */
  display: inline-block;
  color: inherit; text-decoration: none;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.banner__title a:hover { transform: translateY(-2px); }
.banner__title a:active { transform: scale(.98); }
.banner__sub { max-width: 26ch; font-size: clamp(.95rem, 1.2vw, 1.15rem); line-height: 1.3; text-wrap: balance; }
.banner__get {
  flex: none;
  width: var(--get-w);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px;
  transition: opacity 1s var(--ease) .1s, transform 1s var(--ease) .1s;
}
.banner__icon { /* icône de l'app, cliquable vers sa fiche App Store */
  display: block;
  width: clamp(54px, 4.4vw, 82px);
  aspect-ratio: 1;
  border-radius: 22.5%;
  overflow: hidden;
  box-shadow: 0 16px 30px -14px rgb(0 0 0 / .5), 0 4px 10px -4px rgb(0 0 0 / .25);
  transition: transform .3s var(--ease);
}
.banner__icon:hover { transform: translateY(-2px) scale(1.04); }
.banner__icon:active { transform: scale(.97); }
.banner__icon img { display: block; width: 100%; height: 100%; }
.store { display: inline-block; border-radius: 10px; transition: transform .25s var(--ease); }
.store:hover { transform: translateY(-2px); }
.store:active { transform: scale(.98); }
.store img { display: block; height: 42px; width: auto; }
.rating { /* typo du site, quelle que soit l'app */
  font-family: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  font-size: .88rem; font-weight: 600; font-stretch: 100%;
  color: var(--b-ink-2); white-space: nowrap;
}
.rating::before { content: "★ "; color: var(--b-star, #FFC21A); }

.js .banner:not(.is-in) .banner__head { opacity: 0; transform: translateX(-20px); }
.js .banner:not(.is-in) .banner__get { opacity: 0; transform: translateX(20px); }
.js .banner:not(.is-in) .stage { opacity: 0; }

/* =========================================================
   NumbR : 5 + 6 = 11, avec les tuiles et la cible de l'app
   ========================================================= */
.b-numbr {
  --b-bg: #07051A;
  --b-ink: #F3F0FF;
  --b-ink-2: #BDB6E8;
  font-family: "Stapel", ui-sans-serif, system-ui, sans-serif;
}
.b-numbr__bg {
  background:
    radial-gradient(45% 120% at 62% 50%, rgb(180 76 255 / .42), transparent 65%),
    radial-gradient(40% 90% at 0% 100%, rgb(77 245 208 / .14), transparent 70%),
    #07051A;
}
.b-numbr__bg::after { /* poussière d'étoiles */
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 24px 38px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 132px 92px, rgb(255 255 255 / .7) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 196px 170px, rgb(201 255 242 / .9) 50%, transparent 52%),
    radial-gradient(1px 1px at 68px 200px, rgb(255 255 255 / .6) 50%, transparent 52%);
  background-size: 230px 230px;
  opacity: .7;
}
.b-numbr .banner__logo { height: clamp(40px, 4.6vw, 84px); }
.b-numbr .banner__sub { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(.85rem, 1.1vw, 1.05rem); }

.nb-board {
  --u: min(1.9cqh, .55cqw);
  display: flex; align-items: center;
  gap: calc(5 * var(--u));
}
.nb-target {
  position: relative; flex: none;
  width: calc(50 * var(--u));
}
.nb-target img { display: block; width: 100%; height: auto; }
/* Chaque cible porte sa lueur, fixe ; seule l'opacité s'anime (aucun flou recalculé) */
.nb-target > img:first-child { filter: drop-shadow(0 0 calc(6 * var(--u)) rgb(110 170 255 / .55)); }
.nb-target .nb-target__win {
  position: absolute; inset: 0;
  opacity: 0;
  filter: drop-shadow(0 0 calc(6 * var(--u)) rgb(90 255 120 / .5));
  transition: opacity .7s var(--ease);
  will-change: opacity;
}
.nb-target.is-win .nb-target__win { opacity: 1; }
.nb-target b {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: 800; font-size: calc(12 * var(--u)); line-height: 1;
  color: #10164F;
}
.nb-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, calc(19 * var(--u)));
  gap: calc(1.8 * var(--u));
  padding: calc(2.4 * var(--u));
  border-radius: calc(5 * var(--u));
  background: rgb(255 255 255 / .05);
  border: 1px solid rgb(255 255 255 / .14);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 calc(6 * var(--u)) calc(16 * var(--u)) rgb(90 40 200 / .35);
}
.nb-tile { position: relative; display: block; }
.nb-tile img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.nb-tile b {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding-bottom: calc(.8 * var(--u));
  font-weight: 800; font-size: calc(7.4 * var(--u)); line-height: 1;
  color: #12185A;
}
.nb-tile .nb-tile__sel { /* tuile sélectionnée, en fondu par-dessus la tuile libre */
  position: absolute; inset: 0; z-index: 1;
  filter: drop-shadow(0 0 calc(3 * var(--u)) rgb(255 170 120 / .75));
  transition: opacity .35s var(--ease);
  will-change: opacity;
}
.nb-tile b { transition: color .35s var(--ease); }
.nb-tile.is-sel b { color: #5A1E10; }
.nb-tile.is-chain::after { /* le lien entre les deux tuiles de la chaîne */
  content: "";
  position: absolute; z-index: 0;
  left: 50%; top: 50%;
  width: calc(100% + 1.8 * var(--u)); height: calc(1.6 * var(--u));
  translate: 0 -50%;
  border-radius: 999px;
  background: #FFD9BF;
  box-shadow: 0 0 calc(3 * var(--u)) rgb(255 170 120 / .9);
  transform-origin: 0 50%;
  transition: scale .7s cubic-bezier(.45, 0, .25, 1);
}

/* Séquence douce (initNumbrTouch) : un doigt se pose sur 4, glisse jusqu'à 7,
   la cible passe au vert. Sans JS ou en mouvement réduit : l'image fixe. */
.nb-board.is-live .nb-tile.is-sel:not(.is-on) .nb-tile__sel { opacity: 0; }
.nb-board.is-live .nb-tile.is-sel:not(.is-on) b { color: #12185A; }
.nb-board.is-live .nb-tile.is-chain:not(.is-linked)::after { scale: 0 1; }
.nb-board.is-live .nb-tile.is-sel { transition: scale .3s var(--ease); will-change: transform; }
.nb-board.is-live .nb-tile.is-on { scale: .97; }
.nb-touch { /* le doigt : une pastille de lumière, déplacée en translate (pas de mise en page) */
  position: absolute; z-index: 3;
  left: calc(2.4 * var(--u) + 1 * 20.8 * var(--u) + 9.5 * var(--u));
  top: calc(2.4 * var(--u) + 11 * var(--u));
  width: calc(10 * var(--u)); aspect-ratio: 1;
  translate: -50% -50%;
  will-change: transform, opacity;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / .85) 0 28%, rgb(255 255 255 / .35) 46%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: translate .7s cubic-bezier(.45, 0, .25, 1), opacity .4s var(--ease), scale .3s var(--ease);
}
.nb-touch.at-4, .nb-touch.at-7 { opacity: .9; }
.nb-touch.at-7 { translate: calc(-50% + 20.8 * var(--u)) -50%; }
.nb-touch.is-down { scale: .82; }

/* =========================================================
   Tiiime : 4 cartes joueurs qui montent vers la couronne
   ========================================================= */
.b-tiiime {
  --b-bg: #FFF8D9;
  --b-ink: #1E1633;
  --b-ink-2: #4A3F66;
  font-family: "Knicknack", ui-rounded, system-ui, sans-serif;
  font-weight: 700;
}
.b-tiiime__bg {
  background:
    repeating-linear-gradient(-35deg, rgb(255 210 120 / .18) 0 26px, transparent 26px 52px),
    radial-gradient(45% 80% at 58% 50%, #FFFEF5, transparent 80%),
    #FFF8D9;
}
.b-tiiime .banner__logo { height: clamp(38px, 4.4vw, 80px); }
.b-tiiime .banner__sub { font-weight: 900; font-size: clamp(1.15rem, 1.8vw, 1.75rem); -webkit-text-stroke: 1px #FFF0B3; } /* contour 1 pt centré, jaune très clair */

.ti-cards {
  --u: min(1.55cqh, .78cqw);
  display: flex; align-items: flex-end;
  padding-top: calc(10 * var(--u));
}
.ti-card {
  position: relative;
  flex: none;
  width: calc(30 * var(--u)); height: calc(36 * var(--u));
  margin-left: calc(-2 * var(--u));
  padding: calc(2.4 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u));
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  border: calc(.7 * var(--u)) solid #1E1633;
  border-radius: calc(5 * var(--u));
  box-shadow: calc(1.2 * var(--u)) calc(1.2 * var(--u)) 0 #1E1633;
  transform: translateY(calc(var(--i) * -3.5 * var(--u))) rotate(calc((var(--i) - 1.5) * 2deg));
}
.ti-card:first-child { margin-left: 0; }
.ti-card--y { background: #FFD234; }
.ti-card--p { background: #F083AA; }
.ti-card--b { background: #5B8DEF; }
.ti-card--g { background: #6CCB77; }
.ti-card__n {
  display: grid; place-items: center;
  width: calc(7 * var(--u)); aspect-ratio: 1;
  border: calc(.6 * var(--u)) solid #1E1633; border-radius: 50%;
  background: rgb(255 255 255 / .55);
  font-weight: 900; font-size: calc(3.6 * var(--u)); line-height: 1;
}
.ti-card b { /* comme dans l'app : chrono foncé, Knicknack Medium */
  font-weight: 500; font-size: calc(9.4 * var(--u)); line-height: 1;
  color: #1E1633;
  font-variant-numeric: tabular-nums;
}
.ti-card > img:last-child { width: calc(18 * var(--u)); height: auto; opacity: .5; }
.ti-crown { position: absolute; top: calc(-10 * var(--u)); right: calc(-4 * var(--u)); width: calc(14 * var(--u)); height: auto; transform: rotate(14deg); }

/* =========================================================
   LifeDots : la grille de semaines (blanc = vécu, vert = maintenant)
   ========================================================= */
.b-lifedots {
  --b-bg: #04040B;
  --b-ink: #F6F5FF;
  --b-ink-2: #ABA8C6;
  --b-star: #FF5CC0;
  font-family: "NouvelR", ui-sans-serif, system-ui, sans-serif;
}
.b-lifedots__bg {
  background:
    radial-gradient(50% 90% at 10% 0%, rgb(138 43 226 / .3), transparent 70%),
    url("../img/lifedots/bg-streak.webp") center / cover no-repeat,
    #04040B;
}
.ld-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(4 4 11 / .94) 0%, rgb(4 4 11 / .62) 22%, transparent 36%, transparent 78%, rgb(4 4 11 / .82) 100%);
}
.ld-now {
  position: absolute;
  left: var(--nx, 56%); top: var(--ny, 50%);
  display: flex; align-items: center; gap: 10px;
  transform: translate(-6px, -50%);
  transition: opacity 1s var(--ease) .4s;
}
.js .banner:not(.is-in) .ld-now { opacity: 0; }
.ld-now__dot {
  width: 12px; height: 12px; flex: none;
  border-radius: 50%;
  background: #00FF00;
  box-shadow: 0 0 0 4px rgb(0 255 0 / .18), 0 0 18px rgb(0 255 0 / .8);
}
.ld-now__label {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / .1);
  border: 1px solid rgb(255 255 255 / .22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: .85rem; font-weight: 700; color: #fff; white-space: nowrap;
}
.b-lifedots .banner__logo {
  height: clamp(32px, 3.8vw, 66px);
  filter: drop-shadow(0 0 22px rgb(4 4 11 / .95)) drop-shadow(0 8px 46px rgb(4 4 11 / .9));
}
.b-lifedots .banner__sub { text-shadow: 0 0 18px rgb(4 4 11 / .95), 0 0 36px rgb(4 4 11 / .8); }
@media (min-width: 861px) {
  /* grande ombre diffuse derrière le logo, pour le détacher de la grille */
  .b-lifedots .banner__head { position: relative; }
  .b-lifedots .banner__head::before {
    content: "";
    position: absolute; inset: -55% -35% -55% -30%;
    z-index: -1;
    background: radial-gradient(closest-side, rgb(4 4 11 / .92), rgb(4 4 11 / .7) 55%, transparent);
    filter: blur(14px);
    pointer-events: none;
  }
}
.b-lifedots .banner__sub { color: #FF5CC0; font-weight: 700; }

/* =========================================================
   FocusBuddy : Buddy, reproduit d'après MascotView (l'app), regarde le bouton
   ========================================================= */
.b-focus {
  --b-bg: #F7D4BE;
  --b-ink: #3B2219;
  --b-ink-2: #6B4636;
  --b-star: #E2553A;
  --coral: #FF8C78;
  font-family: "Sharp Grotesk", ui-sans-serif, system-ui, sans-serif;
}
.b-focus__bg {
  background:
    radial-gradient(40% 110% at 62% 50%, rgb(255 150 128 / .26), transparent 70%),
    linear-gradient(rgb(255 249 244 / .5), rgb(255 249 244 / .5)),
    url("../img/focusbuddy/bg-peach.webp") center / cover no-repeat,
    #FCE7DA;
}
.b-focus .banner__logo { height: clamp(50px, 5.6vw, 100px); }
.b-focus .banner__sub { color: #6B4636; }

.fb-scene {
  --u: min(1cqh, .5cqw);
  display: flex; align-items: center;
}
/* Minuteur, d'après PomodoroView : disque blanc, anneau corail, heure en Noplato avec des « O » */
.fb-timer {
  position: relative; flex: none;
  width: calc(78 * var(--u)); aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 calc(5 * var(--u)) rgb(255 140 120 / .14), 0 calc(3 * var(--u)) calc(9 * var(--u)) rgb(0 0 0 / .08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(1.4 * var(--u));
}
.fb-timer__ring, .fb-timer__cap { position: absolute; inset: calc(4.5 * var(--u)); border-radius: 50%; }
.fb-timer__ring {
  background: conic-gradient(#FF8C78 0 72%, rgb(220 220 224 / .55) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.2 * var(--u)), #000 calc(100% - 2 * var(--u)));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.2 * var(--u)), #000 calc(100% - 2 * var(--u)));
}
.fb-timer__cap::before, .fb-timer__cap::after { /* bouts arrondis de l'anneau */
  content: ""; position: absolute; left: 50%; top: 0;
  width: calc(2.1 * var(--u)); aspect-ratio: 1;
  border-radius: 50%; background: #FF8C78;
  translate: -50% 0;
  transform-origin: 50% calc(34.5 * var(--u));
}
.fb-timer__cap::after { transform: rotate(259.2deg); }
.fb-timer__time { font-family: "Noplato", ui-monospace, monospace; font-size: calc(14 * var(--u)); line-height: 1; color: #28282D; }
.fb-timer__label { font-family: -apple-system, system-ui, sans-serif; font-weight: 500; font-size: calc(3.4 * var(--u)); letter-spacing: .25em; color: #78787D; }

/* Buddy, d'après MascotView (état content : joues, bouche ouverte, étincelles) */
.mascot {
  --s: calc(72 * var(--u));
  position: relative; z-index: 1; flex: none;
  width: var(--s); height: var(--s);
  margin-left: calc(-14 * var(--u));
  align-self: flex-end;
  margin-bottom: calc(-4 * var(--u));
}
.mascot > span { position: absolute; left: 50%; top: 50%; }
.mascot__shadow {
  width: calc(var(--s) * .7); height: calc(var(--s) * .15);
  border-radius: 50%;
  background: rgb(0 0 0 / .1);
  filter: blur(calc(var(--s) * .02));
  transform: translate(-50%, calc(-50% + var(--s) * .4));
}
.mascot__body {
  width: calc(var(--s) * .8); height: calc(var(--s) * .8);
  border-radius: calc(var(--s) * .25);
  background: radial-gradient(circle calc(var(--s) * .8) at 0 0, #FFC8AA, rgb(255 140 120 / .8));
  box-shadow: 0 calc(var(--s) * .05) calc(var(--s) * .12) rgb(200 90 70 / .22);
  transform: translate(-50%, -50%);
}
.mascot__body::after { /* reflet intérieur */
  content: ""; position: absolute;
  left: calc(var(--s) * .045); top: calc(var(--s) * .045);
  width: calc(var(--s) * .55); height: calc(var(--s) * .55);
  border-radius: calc(var(--s) * .2);
  background: radial-gradient(circle calc(var(--s) * .4) at 0 0, rgb(255 255 255 / .35), transparent);
}
.mascot__blush {
  display: flex; gap: calc(var(--s) * .42);
  transform: translate(-50%, calc(-50% + var(--s) * .08));
}
.mascot__blush i {
  width: calc(var(--s) * .12); height: calc(var(--s) * .08);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 140 120 / .55), rgb(255 140 120 / .2));
}
.mascot__eyes {
  display: flex; gap: calc(var(--s) * .12);
  transform: translate(-50%, calc(-50% - var(--s) * .02));
}
.mascot__eye {
  position: relative;
  display: grid; place-items: center;
  width: calc(var(--s) * .24); height: calc(var(--s) * .25);
  animation: mblink 5.5s infinite;
}
.mascot__eye::before { content: ""; width: calc(var(--s) * .22); height: calc(var(--s) * .27); border-radius: 50%; background: #fff; }
.mascot__eye i { /* pupille : vers le bouton App Store au repos, suit la souris sinon (initBuddyEyes) */
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--s) * .14); height: calc(var(--s) * .15);
  margin: calc(var(--s) * -.075) 0 0 calc(var(--s) * -.07);
  border-radius: 50%;
  background: #28282D;
  transform: translate(calc(var(--s) * var(--ex, .04)), calc(var(--s) * var(--ey, .015)));
}
.mascot__eye i::before, .mascot__eye i::after { content: ""; position: absolute; border-radius: 50%; background: #fff; }
.mascot__eye i::before { width: calc(var(--s) * .06); height: calc(var(--s) * .06); left: calc(50% - var(--s) * .06); top: calc(50% - var(--s) * .065); }
.mascot__eye i::after { width: calc(var(--s) * .025); height: calc(var(--s) * .025); left: calc(50% + var(--s) * .0125); top: calc(50% + var(--s) * .0075); }
.mascot__mouth { /* sourire, comme le logo */
  width: calc(var(--s) * .15); height: calc(var(--s) * .05);
  border: calc(var(--s) * .025) solid #28282D; border-top: 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: translate(-50%, calc(-50% + var(--s) * .17));
}
.mascot__spark { /* étincelles « sparkle » jaune chaud, en cercle autour de Buddy */
  width: calc(var(--s) * .1); aspect-ratio: 1;
  background: #FFDC96;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--s) * .55)) rotate(calc(var(--a) * -1));
  filter: drop-shadow(0 0 calc(var(--s) * .02) rgb(255 170 60 / .9));
}
@keyframes mblink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.15); } }

/* =========================================================
   Scoring : les objets en verre des visuels App Store
   ========================================================= */
.b-scoring {
  --b-bg: #BFE6FF;
  --b-ink: #0B2350;
  --b-ink-2: #2D4A7C;
  --sc-blue: #1E5BE6;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
}
.b-scoring__bg {
  background:
    radial-gradient(22% 70% at 55% 52%, rgb(232 205 255 / .8), transparent 70%),
    radial-gradient(40% 90% at 60% 55%, rgb(255 255 255 / .6), transparent 70%),
    linear-gradient(180deg, #86E2F8 0%, #BDE5FF 50%, #EAF6FF 100%);
}
.b-scoring__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, rgb(255 255 255 / .8) 1.2px, transparent 1.8px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 50% 90% at 58% 50%, #000 20%, transparent 85%);
  mask-image: radial-gradient(ellipse 50% 90% at 58% 50%, #000 20%, transparent 85%);
}
.b-scoring .banner__title {
  font-family: "Monument Extended", sans-serif;
  font-size: clamp(2rem, 3.8vw, 4.2rem);
  color: #2152B8;
}
.b-scoring .banner__sub { font-weight: 600; color: var(--b-ink-2); }

/* Objets en verre des visuels App Store, sur toute la largeur de la bannière :
   la courbe rose descend derrière le titre, la verte monte derrière le bouton.
   Positions en largeur de bannière (cqw), tailles en hauteur (cqh). */
.b-scoring .stage { left: 0; right: 0; }
.sc-scene { position: absolute; inset: 0; }
.sc-scene img { position: absolute; display: block; width: auto; }
.sc-graph--pink {
  left: 2cqw; top: 36cqh; height: 62cqh;
  scale: -1 1;
  filter: blur(1.6px);
  opacity: .55;
}
.sc-minus { /* flou : au second plan */
  left: 27cqw; top: 54cqh; height: 34cqh;
  rotate: -8deg;
  filter: blur(1.4px) drop-shadow(0 1.2cqh 2.4cqh rgb(90 70 200 / .2));
  opacity: .9;
}
.sc-wheel {
  left: 37cqw; top: 14cqh; height: 74cqh;
  rotate: -10deg;
  z-index: 1;
  filter: drop-shadow(0 1.6cqh 3.2cqh rgb(90 70 200 / .25));
}
.sc-dice {
  left: 47cqw; top: 50cqh; height: 44cqh;
  rotate: 8deg;
  z-index: 4;
  filter: drop-shadow(0 1.6cqh 2.8cqh rgb(90 70 200 / .28));
}
.sc-meeple {
  left: 54cqw; top: 9cqh; height: 84cqh;
  rotate: -7deg;
  scale: .88 1; /* plus élancé */
  z-index: 3;
  filter: drop-shadow(0 2cqh 4cqh rgb(120 80 220 / .3));
}
.sc-plus { /* flou : au second plan */
  left: 64cqw; top: 6cqh; height: 28cqh;
  rotate: -6deg;
  z-index: 1;
  filter: blur(1.4px) drop-shadow(0 1.2cqh 2.4cqh rgb(90 70 200 / .2));
  opacity: .9;
}
.sc-chrono {
  left: 69cqw; top: 36cqh; height: 60cqh;
  rotate: 12deg;
  z-index: 2;
  filter: drop-shadow(0 1.6cqh 3.2cqh rgb(90 70 200 / .25));
}
.sc-graph--green {
  left: 83cqw; top: -4cqh; height: 74cqh;
  filter: blur(.8px);
  opacity: .75;
}

/* Écrans moyens : objets un peu plus petits et resserrés pour ne pas toucher le bouton */
@media (min-width: 861px) and (max-width: 1199px) {
  .sc-graph--pink  { left: 1cqw; top: 38cqh; height: 56cqh; }
  .sc-minus        { left: 26cqw; top: 56cqh; height: 28cqh; }
  .sc-wheel        { left: 34cqw; top: 15cqh; height: 62cqh; }
  .sc-dice         { left: 44cqw; top: 56cqh; height: 36cqh; }
  .sc-meeple       { left: 50cqw; top: 11cqh; height: 72cqh; }
  .sc-plus         { left: 63cqw; top: 6cqh;  height: 22cqh; }
  .sc-chrono       { left: 67cqw; top: 40cqh; height: 50cqh; }
  .sc-graph--green { left: 81cqw; top: -2cqh; height: 64cqh; }
}

/* =========================================================
   thedailymood : l'échelle d'humeur de l'app, de 0 à 10
   ========================================================= */
.b-tdm {
  --b-bg: #FFCC93;
  --b-ink: #4A2208;
  --b-ink-2: #6E3D17;
  --b-star: #C2410C;
  font-family: "Goldplay", ui-rounded, system-ui, sans-serif;
  font-weight: 700;
}
.b-tdm__bg { /* le crème de l'app (canvas → canvasDeep), plus chaud vers la droite */
  background:
    radial-gradient(40% 120% at 85% 50%, rgb(255 197 138 / .55), transparent 70%),
    linear-gradient(100deg, #FFF6ED 0%, #FFF1E2 45%, #FFECD7 100%);
}
.b-tdm .banner__title {
  font-size: clamp(2rem, 3.8vw, 4.2rem);
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #FFBA00 0%, #FF8500 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-bottom: .08em;
  filter: drop-shadow(0 .05em .3em rgb(150 70 0 / .22)); /* ombre légère et diffuse */
}
/* Carrousel d'humeurs : reprise de MoodCarouselView.swift (tambour à 55° par
   carte, rayon 1,15 et focale 1,2 largeur de carte). Placement calculé en JS
   (initTdmDrum) ; ici, l'aspect des cartes, à l'échelle de la hauteur. */
@property --tdm-tint { syntax: "<color>"; inherits: true; initial-value: #37B24D; }
.tdm-drum {
  --h: 84cqh;                 /* côté d'une carte */
  --w: var(--h);              /* cartes carrées */
  position: relative;
  width: 100%; height: 100%;
  transition: --tdm-tint .9s var(--ease);
}
.tdm-glow { /* halo teinté par l'humeur de face */
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--w) * 3.4); height: calc(var(--h) * 1.3);
  translate: -50% -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tdm-tint) 34%, transparent), transparent);
  filter: blur(8px);
}
.tdm-card {
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--h) * .03);
  padding: calc(var(--h) * .07) 0;
  overflow: hidden;
  border-radius: calc(var(--h) * .106);
  background: linear-gradient(180deg, rgb(255 255 255 / .98), color-mix(in srgb, var(--c) 24%, #FFF6ED));
  border: 1px solid rgb(255 255 255 / .7);
  box-shadow: 0 calc(var(--h) * .045) calc(var(--h) * .18) color-mix(in srgb, var(--c) 16%, transparent),
              0 1px 4px rgb(0 0 0 / .04);
  font-family: "Bricolage", system-ui, sans-serif;
  color: #2D1A00;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}
.tdm-card__n { /* le chiffre géant appartient au fond, coupé par le coin */
  position: absolute; top: 0; right: 0;
  translate: 15% -17%;
  font-size: calc(var(--h) * .59); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c) 16%, transparent);
}
.tdm-card img { position: relative; height: calc(var(--h) * .45); width: auto; }
.tdm-card__label {
  position: relative;
  max-width: 92%;
  font-size: calc(var(--h) * .085); font-weight: 800; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tdm-card__badge {
  position: relative;
  min-width: calc(var(--h) * .18);
  padding: calc(var(--h) * .022) calc(var(--h) * .04);
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font-size: calc(var(--h) * .068); font-weight: 800; line-height: 1; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Contact ---------- */
.contact {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(100px, 16vh, 180px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.contact__title {
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.032em;
  font-weight: 800;
  font-stretch: 84%;
  text-wrap: balance;
}

.form { position: relative; display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .9rem; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 140px; }
.field select {
  -webkit-appearance: none; appearance: none;
  padding-right: 44px;
  background:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%) calc(100% - 23px) 52% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%) calc(100% - 17px) 52% / 6px 6px no-repeat,
    var(--field);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--focus);
}
.field [aria-invalid="true"] { border-color: var(--danger); }
.field__err { font-size: .86rem; color: var(--danger); }
.field__err:empty { display: none; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 6px; }
.btn--submit { margin-top: 0; min-width: 150px; }
.btn--submit[disabled] { opacity: .6; cursor: progress; }
.form__status { font-size: .95rem; color: var(--ink-2); }
.form__status.is-ok { color: var(--ink); font-weight: 600; }
.form__status.is-err { color: var(--danger); }

/* ---------- Footer ---------- */
.footer { padding: clamp(24px, 6vh, 64px) var(--gutter) 28px; }
.footer__row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--ink-2);
}
.footer__legal { font-size: .8rem; }
.footer__links { display: flex; gap: 18px; }
.footer__links a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 999px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: calc(var(--nav-h) + 64px);
  }
  .hero__stage { --k: .78; left: 0; height: calc(400px + var(--n) * 10px); }
}

/* Tablette portrait et téléphone : carte compacte.
   Une bande de scène en haut, puis titre à gauche / icône à droite, bouton dessous. */
@media (max-width: 860px) {
  .banner { /* toutes les cartes ont la même taille : même bande, même hauteur */
    --band: clamp(150px, 42vw, 220px);
    aspect-ratio: auto;
    min-height: calc(var(--band) + 176px);
    display: flex; flex-direction: column;
    padding-top: var(--band);
    border-radius: 20px;
  }
  .stage { left: 0; right: 0; bottom: auto; height: var(--band); }
  .ld-shade { background: linear-gradient(0deg, rgb(4 4 11 / .96) 0%, rgb(4 4 11 / .82) 42%, transparent 70%); }

  .banner__inner {
    flex: 1;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "title icon" "sub icon" "store rating";
    align-items: center;
    gap: 4px 16px;
    padding: 4px 18px 16px;
  }
  .banner__head, .banner__get { display: contents; }
  .banner__title { grid-area: title; margin: 0; font-size: clamp(1.6rem, 6.4vw, 2.6rem); }
  .banner__sub { grid-area: sub; align-self: start; font-size: .92rem; }
  .banner__icon { grid-area: icon; width: clamp(56px, 13vw, 80px); }
  .store { grid-area: store; justify-self: start; align-self: end; margin-top: 12px; }
  .rating { grid-area: rating; justify-self: end; align-self: end; margin-top: 12px; padding-bottom: 10px; }
  .store img { height: 40px; }
  .b-numbr .banner__logo { height: clamp(40px, 10vw, 64px); }
  .b-tiiime .banner__logo { height: clamp(32px, 8vw, 52px); }
  .b-lifedots .banner__logo { height: clamp(28px, 6.8vw, 44px); }
  .b-focus .banner__logo { height: clamp(48px, 12vw, 72px); }
  .b-scoring .banner__title { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .b-tdm .banner__title { font-size: clamp(1.7rem, 7vw, 2.6rem); }
  .b-tiiime .banner__sub { font-size: 1.12rem; }
  .banner { --halo-size: 85% 140%; }

  .tdm-drum { --h: 76cqh; }
  /* Scoring en carte : sans le chrono, points plus petits */
  .sc-scene .sc-chrono { display: none; }
  .sc-graph--pink  { left: -6cqw; top: 16cqh; height: 40cqh; }
  .sc-minus        { left: 2cqw;  top: 62cqh; height: 20cqh; }
  .sc-wheel        { left: 16cqw; top: 16cqh; height: 58cqh; }
  .sc-dice         { left: 32cqw; top: 58cqh; height: 32cqh; }
  .sc-meeple       { left: 46cqw; top: 8cqh;  height: 76cqh; }
  .sc-plus         { left: 74cqw; top: 10cqh; height: 15cqh; }
  .sc-graph--green { left: 76cqw; top: 38cqh; height: 46cqh; }
}

@media (max-width: 640px) {
  :root { --nav-h: 56px; }
  .lang button { padding: 7px 8px; }
  .nav { padding-left: 18px; }
  .nav__links { display: none; }
  .nav .theme { margin-left: auto; }

  .hero { padding-top: calc(var(--nav-h) + 48px); }
  .hero__stage { --k: .6; height: calc(320px + var(--n) * 10px); }

  .contact { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__row { flex-direction: column; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .mascot__eye { animation: none; }
  .js .reveal,
  .js .banner:not(.is-in) .banner__head,
  .js .banner:not(.is-in) .banner__get { opacity: 1; transform: none; }
  .js .banner:not(.is-in) .stage,
  .js .banner:not(.is-in) .ld-now { opacity: 1; }
}