/* sections.css — la page, de haut en bas. */

/* ---------------------------------------------------------------- Nav
   Un bandeau sur toute la largeur, aligné sur la grille de la page, souligné
   d'un filet fin. En haut, il se fond dans la nuit ; au défilement, un verre
   sombre le recouvre et son filet devient le trait d'encre qui dit où l'on en
   est. Au survol, une pastille de lumière glisse d'un lien à l'autre. */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; }
.nav-bar {
  pointer-events: auto; position: relative; height: 68px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  border-bottom: .5px solid var(--line-3);
  isolation: isolate;
}
/* Le verre : un calque qui paraît au défilement (on n'anime que son opacité). */
.nav-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,7,10,.94), rgba(7,7,10,.84));
  -webkit-backdrop-filter: saturate(1.5) blur(22px); backdrop-filter: saturate(1.5) blur(22px);
  box-shadow: 0 24px 40px -28px rgba(0,0,0,.9);
  opacity: 0; transition: opacity 400ms var(--ease);
}
.nav.scrolled .nav-bar::before, .nav.open .nav-bar::before { opacity: 1; }
/* En haut de page, une ombre douce seulement, pour que le texte reste lisible
   sur la plume. */
.nav-bar::after {
  content: ""; position: absolute; inset: 0 0 -24px; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,7,10,.7), rgba(7,7,10,0));
  transition: opacity 400ms var(--ease);
}
.nav.scrolled .nav-bar::after { opacity: 0; }

/* La marque : la plume seule, sans cadre, et le nom comme dans l'orbe de
   dictée — New York, droit, en Medium (OrbView.swift). */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 25px/1 var(--display); letter-spacing: -0.028em; color: var(--fg); justify-self: start; }
.brand img { width: 34px; height: 34px; transition: transform 400ms var(--ease); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }

.nav-links { position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 13px; }
.nav-item {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 10px;
  background: none; cursor: pointer; text-decoration: none;
  font: 500 15.5px/1.2 var(--sans); letter-spacing: -.005em; color: var(--fg-2); transition: color 250ms var(--ease);
}
.nav-item:hover, .nav-item.on { color: var(--fg); }

.nav-glow {
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 20px -6px rgba(255,255,255,.25);
  opacity: 0; transition: transform 450ms var(--ease), width 450ms var(--ease), opacity 300ms var(--ease);
}
.nav-glow.on { opacity: 1; }
.nav-glow.rest { opacity: .55; }

.nav-end { justify-self: end; display: flex; align-items: center; gap: 6px; }
.nav-end .btn-small { min-height: 40px; border-radius: 11px; }
@media (max-width: 520px) { .nav-end .wide { display: none; } }

/* Le trait de lecture : le filet du bas, d'un bord à l'autre de l'écran. */
.nav-progress {
  position: absolute; left: 0; right: 0; bottom: -.5px; height: .5px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35) 55%, #fff);
  box-shadow: 0 0 10px rgba(255,255,255,.35);
  transform-origin: 0 50%; transform: scaleX(var(--read, 0)); opacity: 0; transition: opacity 400ms var(--ease);
}
.nav.scrolled .nav-progress { opacity: 1; }

/* Le menu du téléphone. */
.nav-menu {
  display: none; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 11px; cursor: pointer;
  background: none; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2);
}
.nav-menu i { position: absolute; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform 300ms var(--ease); }
.nav-menu { position: relative; }
.nav-menu i:first-child { transform: translateY(-3.5px); }
.nav-menu i:last-child { transform: translateY(3.5px); }
.nav.open .nav-menu i:first-child { transform: rotate(45deg); }
.nav.open .nav-menu i:last-child { transform: rotate(-45deg); }
.nav-sheet {
  pointer-events: auto; padding: 10px calc(var(--gutter) - 14px) 18px;
  background: rgba(7,7,10,.96); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: inset 0 -1px 0 var(--line), 0 30px 60px -20px rgba(0,0,0,.9);
  display: grid; gap: 2px; opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: 50% 0;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease); visibility: hidden;
}
.nav.open .nav-sheet { opacity: 1; transform: none; visibility: visible; }
.nav-sheet a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; border-radius: 12px; text-decoration: none; font: 600 22px/1 var(--display); color: var(--fg); }
.nav-sheet a:hover { background: rgba(255,255,255,.06); }
.nav-sheet a span { font: 500 12px/1 var(--mono); color: var(--fg-5); }
@media (min-width: 861px) { .nav-sheet { display: none; } }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-bar { grid-template-columns: 1fr auto; }
  .nav-menu { display: grid; }
}

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; min-height: max(100svh, 680px); display: flex; flex-direction: column; justify-content: center; padding: 110px 0 90px; }
.hero-copy { max-width: 640px; }
/* « driven by your voice. » toujours sur sa propre ligne ; ce qui précède
   s'équilibre seul sur une ou deux lignes. */
.hero-title .line { display: block; }
.hero .lead { margin: 26px 0 0; max-width: 30em; font-size: clamp(17px, .55vw + 14.2px, 19.5px); color: var(--fg-3); }
.hero .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 36px; }
.hero .note { margin-top: 16px; }
/* L'invitation à défiler, en bas à droite. */
.hero-hint {
  position: absolute; left: 0; right: 0; bottom: 34px; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  font: 500 12px/1.4 var(--mono); color: var(--fg-5); letter-spacing: .02em;
}
.hero-hint .scroll { display: inline-flex; align-items: center; gap: 10px; }
.hero-hint .scroll i { position: relative; width: 1px; height: 28px; background: rgba(255,255,255,.12); overflow: hidden; }
.hero-hint .scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--fg-2); animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { to { transform: translateY(350%); } }
.hero-art { display: none; }
/* Fenêtre basse : le titre, plus petit, descend sous l'en-tête au lieu de s'y
   coller ; le haut de page prend la hauteur de son contenu. */
@media (min-width: 761px) and (max-height: 700px) {
  .hero { min-height: 0; justify-content: flex-start; padding-top: calc(68px + clamp(80px, 20vh, 100px)); }
}
@media (max-width: 760px) {
  .hero { text-align: center; padding-top: 120px; }
  .hero-copy { margin: 0 auto; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero .cta { justify-content: center; }
  .hero-hint { justify-content: center; }
}
/* Sans WebGL : une plume immobile, à sa place. */
.no-gl .hero-art { display: block; position: absolute; right: 4%; top: 50%; width: min(42vw, 520px); transform: translateY(-50%); opacity: .9; pointer-events: none; }
@media (max-width: 760px) { .no-gl .hero-art { right: 50%; transform: translate(50%, -60%); opacity: .14; width: 80vw; } }
.no-gl .finale-art { display: block; }

/* ---------------------------------------------------------------- Démo : la fenêtre qui se redresse */
.demo { padding-top: clamp(40px, 6vw, 80px); }
.demo .head { margin-bottom: clamp(36px, 5vw, 56px); }
.tilt { perspective: 1600px; perspective-origin: 50% 0%; }
.tilt .desk {
  transform-origin: 50% 0%;
  transform: rotateX(var(--tilt, 0deg)) scale(var(--zoom, 1));
  will-change: transform;
}

/* ---------------------------------------------------------------- Chat et Design : l'onglet, en fenêtre */
.tabdemo { margin-top: clamp(40px, 5vw, 60px); }

/* ---------------------------------------------------------------- Dictée */
.dictation { margin-top: clamp(40px, 5vw, 60px); }
/* Sans cadre : l'app posée sur la nuit de la page, la capsule dedans. */
.dict-stage { position: relative; }
.app {
  position: relative; max-width: 700px; margin: 0 auto; border-radius: 14px; overflow: hidden;
  background: #1C1C1E; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -24px rgba(0,0,0,.8);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.app.swap { opacity: 0; transform: translateY(8px) scale(.99); }
.app-top { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; background: #2A2A2C; box-shadow: inset 0 -1px 0 rgba(0,0,0,.5); font-size: 13px; font-weight: 600; color: var(--fg-2); }
.app-top .lights { position: static; }
.app-top .lights i { width: 11px; height: 11px; }
.app-top .who { margin-left: 6px; }
.app-top .meta { margin-left: auto; font-weight: 500; color: var(--fg-4); }
.app-body { padding: 22px 24px 26px; min-height: 196px; }
.app-body .label { font-size: 13px; color: var(--fg-4); padding-bottom: 10px; margin-bottom: 14px; box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); }
.app-body .label b { color: var(--fg-2); font-weight: 600; }
.field { font-size: clamp(17px, 1.3vw + 12px, 21px); line-height: 1.5; color: var(--fg); min-height: 3em; }
/* Chaque app a sa tenue, à la même taille : le Terminal (Claude Code), Notes, Mail, Messages. */
.app .d { color: #8B8E98; }
/* Le Terminal, noir, Claude Code dedans : l'accueil au crabe, la saisie entre deux filets. */
.app.k-term { background: #161616; }
.app.k-term .app-top { background: #2D2D2D; }
.app.k-term .app-body { font: 13.5px/1.55 var(--mono); color: #EDEDED; }
.t-hello { display: flex; align-items: center; gap: 16px; }
/* Le crabe de Claude Code : des pixels plus hauts que larges, comme les demi-cellules du terminal. */
.t-hello .clawd { flex: none; width: 52px; height: 34px; shape-rendering: crispEdges; }
.t-hello p { margin: 0; }
.t-in { display: flex; gap: 1ch; margin: 20px -24px 0; padding: 6px 24px; box-shadow: inset 0 1px 0 #5A5A5E, inset 0 -1px 0 #5A5A5E; }
.t-in .field { flex: 1; min-width: 0; min-height: 0; font: inherit; color: #EDEDED; }
.t-mode { margin: 6px 0 0; padding-left: 2ch; }
.t-mode .y { color: #E5C04A; }
.app.k-term .caret { width: 8px; background: #D77757; }
/* Notes : la liste des notes à gauche, la note ouverte à droite, le jaune de Notes. */
.app.k-notes { background: #1E1E1E; }
.app.k-notes .app-top { background: #2A2A2A; }
.app.k-notes .app-body { display: flex; padding: 0; }
.n-tools { display: flex; align-items: center; gap: 18px; margin-left: auto; color: #9A9A9E; font-size: 14px; font-weight: 500; }
.n-tools svg { width: 16px; height: 16px; }
.n-tools .new { color: #E5B53C; }
.app-top .n-side { width: 16px; height: 16px; margin-left: 10px; color: #9A9A9E; }
.n-list { width: 210px; flex: none; padding: 8px; background: #252525; box-shadow: inset -1px 0 0 rgba(0,0,0,.5); }
.n-item { padding: 8px 10px; border-radius: 6px; font-size: 12px; line-height: 1.4; color: #8E8E93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-item b { display: block; font-size: 13px; font-weight: 600; color: #F5F5F7; }
.n-item em { margin-left: 6px; font-style: normal; }
.n-item.on { background: #5C4A1C; color: #D9CBA6; }
.n-note { flex: 1; min-width: 0; padding: 14px 28px 24px; }
.n-date { margin: 0 0 12px; text-align: center; font-size: 11px; color: #8E8E93; }
.n-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #F5F5F7; }
.app.k-notes .field { font-size: 15px; line-height: 1.55; color: #E5E5EA; }
.app.k-notes .caret { background: #E5B53C; }
.caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--fg); animation: blink 1.05s steps(1) infinite; }
/* Ce qu'on a dit, avant que la dictée ne le mette au propre. */
.spoken {
  max-width: 620px; min-height: 2.9em; margin: 22px auto 0; text-align: center;
  font: 400 clamp(15px, .5vw + 13px, 18px)/1.45 var(--display); color: var(--fg-4);
  opacity: 0; transition: opacity 300ms var(--ease);
}
.spoken.on { opacity: 1; }
.spoken .w { opacity: 0; transition: opacity 160ms var(--ease); }
.spoken .w.on { opacity: 1; }
.spoken .w.filler { color: var(--fg-5); text-decoration: line-through; text-decoration-color: var(--fg-2); text-decoration-thickness: 1.5px; }
/* La capsule paraît dans l'app, sous le curseur, le temps qu'on parle. */
.app .orb { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%, 6px) scale(.94); opacity: 0; transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.app .orb.on { opacity: 1; transform: translate(-50%, 0) scale(1); }


/* ---------------------------------------------------------------- Agents, Activité, Capture
   Trois onglets en haut, une scène dessous. Chaque démo joue une fois, la
   barre de son onglet avance avec elle, puis la suivante prend la main. */
.feats { margin-top: 52px; }
.feat-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feat {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px 22px;
  border: 0; border-radius: 16px; background: none; cursor: pointer; text-align: left; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line); transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.feat:hover { background: rgba(255,255,255,.03); }
.feat.on { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.feat-k { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-4); }
.feat b { font: 600 19px/1.25 var(--display); color: var(--fg-3); transition: color 300ms var(--ease); }
.feat.on b { color: var(--fg); }
.feat-p { font-size: 14.5px; line-height: 1.5; color: var(--fg-4); }
.feat-bar { position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.feat-bar i { display: block; height: 100%; background: var(--fg); transform-origin: 0 50%; transform: scaleX(0); }
.feat.on .feat-bar i { animation: feat-run var(--dur, 10s) linear forwards; }
.feat.on.held .feat-bar i { animation: none; transform: scaleX(1); }
@keyframes feat-run { to { transform: scaleX(1); } }
.feat-stage { margin-top: 16px; }
.feat-screen { opacity: 0; visibility: hidden; transition: opacity 450ms var(--ease), visibility 0s 450ms; }
.feat-screen.on { opacity: 1; visibility: visible; transition: opacity 450ms var(--ease); }
@media (max-width: 760px) {
  .feat-tabs { gap: 8px; }
  .feat { padding: 12px 12px 16px; }
  .feat b, .feat-p { display: none; }
  .feat-k { font-size: 11px; }
}

/* ---------------------------------------------------------------- Tarifs */
.period { display: inline-flex; margin-top: 30px; padding: 3px; border-radius: 11px; background: #141416; box-shadow: inset 0 0 0 1px var(--line); }
.period button { height: 36px; padding: 0 16px; border: 0; border-radius: 9px; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--fg-3); transition: background-color var(--t-fast), color var(--t-fast); }
.period button[aria-pressed="true"] { background: var(--fg); color: #0A0A0C; }
.period button:not([aria-pressed="true"]):hover { background: rgba(255,255,255,.06); color: var(--fg); }
.period .off { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--fg-4); }
.period button[aria-pressed="true"] .off { color: #3A3A3C; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; text-align: left; }
@media (max-width: 1080px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .plans { grid-template-columns: 1fr; } }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; }
/* La formule mise en avant : un filet de lumière en haut, un liseré plus clair. */
.plan.main { box-shadow: inset 0 0 0 1px var(--line-3), 0 30px 80px -40px rgba(255,255,255,.18); background: linear-gradient(180deg, #16161A, var(--bg-2) 60%); }
.plan.main::after { content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #fff, transparent); }
.plan .tag { position: absolute; top: -11px; left: 22px; height: 22px; padding: 0 10px; display: grid; place-items: center; border-radius: 11px; background: var(--fg); color: #0A0A0C; font-size: 11.5px; font-weight: 700; }
.plan .tag.soft { background: #1C1C1E; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.plan h3 { margin: 0; font: 600 23px/1.1 var(--display); letter-spacing: -.01em; color: var(--fg); }
/* Deux lignes réservées : les prix s'alignent d'une carte à l'autre. */
.plan .pitch { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--fg-4); min-height: 2.9em; }
@media (max-width: 620px) { .plan .pitch { min-height: 0; } }
.price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.price .n { font: 600 48px/1 var(--display); letter-spacing: -.02em; color: var(--fg); }
.price .u { font-size: 14px; color: var(--fg-4); }
.plan .sub { min-height: 20px; margin-top: 6px; font-size: 13px; color: var(--fg-4); }
.plan ul { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 10px; font-size: 14.5px; color: var(--fg-2); }
.plan li { display: flex; gap: 9px; line-height: 1.4; }
.plan li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--fg-4); }
/* Le bouton de chaque formule, calé en bas : les quatre s'alignent. */
.plan .btn { margin-top: auto; width: 100%; }
.plans-note { margin-top: 24px; text-align: center; }

/* ---------------------------------------------------------------- Fin : la plume se reforme au-dessus du bouton */
.finale { margin-top: var(--section); text-align: center; padding: clamp(360px, 56vh, 560px) 0 0; position: relative; }
/* Sur l'accueil, le dernier bloc descend près du bas de l'écran. */
body[data-page="home"] .foot { margin-top: clamp(48px, 5vw, 72px); }
.finale-art { display: none; position: absolute; left: 50%; top: 40px; width: 220px; transform: translateX(-50%); opacity: .9; }
.finale .h2 { position: relative; }
.finale .lead { position: relative; margin-left: auto; margin-right: auto; }
.finale .cta { position: relative; display: flex; justify-content: center; margin-top: 34px; }
.finale .note { position: relative; margin-top: 16px; }
/* ---------------------------------------------------------------- Pied de page */
.foot { position: relative; z-index: 1; margin-top: clamp(100px, 12vw, 150px); box-shadow: 0 -1px 0 var(--line); background: var(--bg); }
.foot-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; padding: 56px 0 40px; }
.foot-brand .brand { font-size: 22px; }
.foot-brand .brand img { width: 28px; height: 28px; }
.foot-brand p { margin: 14px 0 0; max-width: 24em; font-size: 14px; color: var(--fg-4); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.foot-col b { margin-bottom: 8px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-4); }
.foot-col a, .foot-col .linkish { padding: 5px 0; border: 0; background: none; cursor: pointer; font: 400 14.5px/1.3 var(--sans); color: var(--fg-2); text-decoration: none; transition: color 200ms var(--ease); }
.foot-col a:hover, .foot-col .linkish:hover { color: var(--fg); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 0 28px; box-shadow: inset 0 1px 0 var(--line); }
.foot-base small { font-size: 12.5px; color: var(--fg-4); }
@media (max-width: 760px) {
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- Feuilles */
dialog.sheet {
  width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 22px;
  background: #121215; color: var(--fg); box-shadow: 0 0 0 1px var(--line-2), 0 40px 90px -30px rgba(0,0,0,.9);
}
dialog.sheet::backdrop { background: rgba(0,0,0,.6); }
dialog.sheet[open] { animation: sheet-in 320ms var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.sheet-in { padding: 30px 30px 26px; }
.sheet .x { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border: 0; border-radius: 9px; background: none; cursor: pointer; color: var(--fg-3); display: grid; place-items: center; }
.sheet .x:hover { background: rgba(255,255,255,.08); }
.sheet .x svg { width: 16px; height: 16px; }
.sheet .h3 { font-size: 28px; }
.sheet .lead { margin: 8px 0 0; font-size: 15.5px; }
.steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: #1A1A1D; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; color: var(--fg-2); }
.steps .n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fg); color: #0A0A0C; font: 600 14px/1 var(--mono); }
.steps b { color: var(--fg); }
.drag { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.drag img { width: 34px; height: 34px; animation: drag 2.4s var(--ease) infinite; }
.drag .folder { width: 38px; height: 30px; border-radius: 5px; background: #3A3A3C; position: relative; box-shadow: inset 0 -8px 0 rgba(0,0,0,.15); }
.drag .arrow { color: var(--fg-4); font-size: 14px; }
@keyframes drag { 0%, 15% { transform: translateX(0); opacity: 1; } 60% { transform: translateX(62px); opacity: 1; } 75%, 100% { transform: translateX(62px) scale(.6); opacity: 0; } }
.sheet .again { margin-top: 18px; font-size: 13.5px; color: var(--fg-4); }
.sheet .again a { color: var(--fg-2); }

/* Un lien qui est un bouton : renvoyer un code, changer d'adresse. */
.linkish { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.linkish:hover { color: var(--fg); }
.linkish:disabled { cursor: default; color: var(--fg-5); text-decoration: none; }

/* S'abonner depuis le site (js/buy.js) : l'adresse, le code, puis Stripe. */
.buy .form .btn { width: 100%; }
.buy .form .btn:disabled { opacity: .55; cursor: default; transform: none; }
.buy .fine { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg-4); text-align: center; }
.buy .form input.code { font: 600 26px/1 var(--mono); letter-spacing: .4em; text-align: center; padding-left: .4em; }
.buy .seats { display: flex; align-items: center; gap: 12px; }
.buy .who { margin: 0; font-size: 15px; color: var(--fg-3); }
.buy .who b { color: var(--fg); font-weight: 600; }
.buy .seats .lab { font-size: 13.5px; font-weight: 600; color: var(--fg-2); }
.buy .stepper { display: inline-flex; align-items: center; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line-2); background: #0B0B0D; }
.buy .stepper button { width: 38px; height: 42px; border: 0; background: none; cursor: pointer; font-size: 18px; color: var(--fg-3); }
.buy .stepper button:hover { color: var(--fg); }
.buy .form .stepper input { width: 48px; min-height: 42px; padding: 0; border: 0; background: none; text-align: center; font: 600 15px/1 var(--sans); -moz-appearance: textfield; appearance: textfield; }
.buy .stepper input::-webkit-inner-spin-button, .buy .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.buy .seats .total { margin-left: auto; font-size: 14px; color: var(--fg-3); }

.form { display: grid; gap: 14px; margin-top: 22px; }
.form label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--fg-2); }
.form label .lab span { font-weight: 400; color: var(--fg-4); }
.form input, .form select, .form textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2);
  background: #0B0B0D; color: var(--fg); font: 400 15px/1.4 var(--sans);
}
.form label select {
  -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer;
  background: #0B0B0D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23A1A1A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--fg-2); outline-offset: 0; border-color: transparent; }
.form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .status { min-height: 20px; font-size: 14px; color: var(--fg-3); }
.form .status:empty { display: none; }
.form .status.ok { color: var(--green); }
.form .status.err { color: var(--red); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 20px); padding: 12px 16px; border-radius: 12px; background: var(--fg); color: #0A0A0C; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .drag img, .hero-hint .scroll i::after { animation: none; }
  .tilt .desk { transform: none; }
}