/* ══ LA VITRINE QUIZ RIVALS ══════════════════════════════════════════════════
   Une page simple qui fait télécharger : le volt en affiche, la nuit de l'app
   entre les deux, le rose de la rivalité pour finir, puis les questions
   fréquentes. La matière commune (polices, couleurs, barre, boutons, stores,
   pied) est dans assets/site.css ; ici, la seule mise en page de la vitrine.
   Les accroches sont celles des captures App Store, dans leur texte sticker
   incliné, déjà dessinées dans la page (web/scripts/vitrine-pages.mjs).
   ════════════════════════════════════════════════════════════════════════ */

p,
h1,
h2,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

/* Sur un aplat clair, l'anneau volt disparaîtrait : il prend l'encre. */
.hero :focus-visible,
.cta :focus-visible,
.dl :focus-visible {
  outline-color: var(--night);
}

/* ── Les accroches : le texte sticker des captures App Store ────────────────
   La recette de l'app (app/src/ui/StickerText.tsx) : lettres blanches, un bloc
   sombre qui les entoure et descend sous elles, parfois un liseré de couleur
   autour du tout. Un vrai `stroke` SVG à jointures rondes, jamais des copies
   décalées. Inclinée comme sur les captures, la première ligne plus petite.
   Chaque ligne règle sa largeur en em (`--w`, son viewBox) ; le titre règle sa
   taille pour que sa ligne la plus large (`--fit`) tienne dans son conteneur. */
.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: min(var(--title-max, 104px), calc(100cqi / var(--fit, 8)));
  line-height: 1;
}
.sticker {
  flex: none;
  font-size: calc(var(--s, 1) * 1em);
  width: calc(var(--w) * 1em);
  height: auto;
  max-width: none;
  margin-bottom: -0.04em;
  overflow: visible;
  transform: skewX(-8deg);
}
.sk-lis {
  fill: var(--lis, var(--volt));
  stroke: var(--lis, var(--volt));
  stroke-width: 40px;
}
.sk-blk {
  fill: var(--night);
  stroke: var(--night);
  stroke-width: 20px;
}
.sk-txt {
  fill: #fff;
}

.lead {
  max-width: 30em;
  font-size: var(--t-lead);
  text-wrap: balance;
}

/* ── Le bloc de téléchargement, le même en haut et en bas ───────────────────
   Sur ordinateur, le QR passe devant : on n'installe pas une app sur un
   ordinateur, on la vise avec son téléphone. Sur téléphone il disparaît, et
   les deux boutons de store prennent toute la place. */
.get {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: left;
}
.qr {
  flex: none;
  width: 136px;
  height: 136px;
  padding: 12px;
  border-radius: 26px;
  background: #fff;
}
.qr img {
  width: 100%;
  height: 100%;
}
.get-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.get-hint {
  font-size: var(--t-s);
  line-height: 1.35;
}
.get-hint b {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Un QR ne sert qu'à passer d'un ordinateur au téléphone. */
@media (max-width: 760px), (hover: none) {
  .qr,
  .get-hint {
    display: none;
  }
  .get-side {
    align-items: center;
  }
  .stores {
    justify-content: center;
  }
}

/* ── Le téléphone : une capture réelle dans un cadre d'iPhone ──────────────
   Le cadre, ses arrondis et l'îlot sont des proportions de la largeur (--w),
   relevées sur un iPhone 17 Pro (402 pt, coins de 55 pt, îlot de 126 pt). */
.phone {
  position: relative;
  flex: none;
  width: var(--w);
  padding: calc(var(--w) * 0.032);
  border-radius: calc(var(--w) * 0.162);
  /* Le châssis : un cran au-dessus de la nuit, pour se détacher d'elle sans
     filet ; sur le volt, il se lit comme un téléphone sombre. */
  background: #1d1c26;
}
.screen {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.128);
  background: var(--night);
}
.screen img {
  width: 100%;
  height: auto;
}
.screen::after {
  content: "";
  position: absolute;
  top: 1.6%;
  left: 50%;
  width: 31.2%;
  height: 4.2%;
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
}

/* ── 1. L'affiche ─────────────────────────────────────────────────────────────
   Empilée et centrée jusqu'à 1100 px ; au-delà, le texte à gauche et les
   captures à droite, pour que les vrais écrans soient visibles dès l'arrivée. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 5vw, 64px);
  margin: var(--inset);
  padding: calc(var(--nav-top) + 52px + clamp(36px, 6vw, 72px)) var(--pad) clamp(40px, 5vw, 64px);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--volt);
  color: var(--night);
  text-align: center;
}
.hero-copy {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 2.4vw, 30px);
  width: 100%;
}
.hero .get {
  margin-top: 6px;
}

/* Trois écrans en éventail, celui du duel devant. */
.fan {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.fan .phone {
  margin-inline: calc(var(--w) * -0.09);
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
}
.p-mid {
  --w: clamp(200px, 20vw, 296px);
  z-index: 2;
}
.p-in {
  --w: clamp(170px, 16.5vw, 246px);
  z-index: 1;
}
.fan > :nth-child(1) {
  --r: -7deg;
  --y: 8%;
}
.fan > :nth-child(3) {
  --r: 7deg;
  --y: 8%;
}

@media (min-width: 1100px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    min-height: min(calc(100svh - 2 * var(--inset)), 1000px);
    padding-top: calc(var(--nav-top) + 52px + 32px);
    text-align: left;
  }
  .hero-copy,
  .hero .title {
    align-items: flex-start;
  }
  .hero .get {
    justify-content: flex-start;
  }
  .hero .stores {
    justify-content: flex-start;
  }
  /* L'éventail tient dans sa colonne, rotation comprise. */
  .p-mid {
    --w: min(18vw, 300px);
  }
  .p-in {
    --w: min(14vw, 234px);
  }
  .fan .phone {
    margin-inline: calc(var(--w) * -0.12);
  }
}

/* ── 2. Les thèmes ──────────────────────────────────────────────────────── */
.topics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(40px, 7vw, 120px);
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(88px, 11vw, 168px) var(--pad);
}
/* Un conteneur de requête ne tire plus sa largeur de son contenu : centré par
   la grille sans largeur à lui, il tomberait à zéro, et son titre avec. */
.topics-copy {
  container-type: inline-size;
  width: 100%;
}
.topics .title {
  --title-max: 92px;
  align-items: flex-start;
}
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px clamp(32px, 5vw, 64px);
  margin-top: clamp(32px, 4vw, 52px);
}
.stat {
  display: flex;
  flex-direction: column;
}
.stat b {
  color: var(--volt);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(52px, 5.8vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.stat > span {
  margin-top: 10px;
  color: var(--ink-2);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.p-topics {
  --w: clamp(220px, 24vw, 310px);
  rotate: 4deg;
}

/* ── 3. Le téléchargement ───────────────────────────────────────────────── */
.cta {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 2.4vw, 30px);
  margin: 0 var(--inset) var(--inset);
  padding: clamp(72px, 9vw, 128px) var(--pad);
  border-radius: var(--radius);
  background: var(--pink);
  color: var(--night);
  text-align: center;
}
/* Le titre de fin ne doit pas dépasser celui de l'affiche. */
.cta .title {
  --title-max: 96px;
}
.cta-icon {
  width: clamp(88px, 9vw, 112px);
  height: auto;
  border-radius: 23%;
}

/* ── La fenêtre du bouton « Télécharger » (ordinateur) ─────────────────────── */
.dl {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--night);
}
.dl::backdrop {
  background: rgba(9, 9, 12, 0.76);
}
html:has(.dl[open]) {
  overflow: hidden;
}
.dl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(440px, calc(100vw - 32px));
  padding: 40px 32px 32px;
  border-radius: 32px;
  background: var(--volt);
  text-align: center;
}
/* L'icône est volt sur la carte volt : un contour de nuit la détache. */
.dl-icon {
  width: 72px;
  height: 72px;
  border: 3px solid var(--night);
  border-radius: 23%;
}
.dl-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 0.95;
  text-transform: uppercase;
}
.dl .qr {
  width: 232px;
  height: 232px;
  padding: 18px;
  border-radius: 30px;
}
.dl-text {
  max-width: 22em;
  font-size: var(--t-s);
}
.dl .stores {
  justify-content: center;
}
.dl-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(9, 9, 12, 0.1);
  color: var(--night);
  cursor: pointer;
  transition: background-color 180ms ease;
}
.dl-close svg {
  width: 18px;
  height: 18px;
}
@media (hover: hover) and (pointer: fine) {
  .dl-close:hover {
    background: rgba(9, 9, 12, 0.18);
  }
}
/* Sur iPhone, tant que l'App Store n'a pas la fiche : pas de QR, un mot. */
.dl:not([data-mode="ios"]) [data-ios-only],
.dl[data-mode="ios"] [data-qr-only] {
  display: none;
}

/* ── 4. Les questions fréquentes ──────────────────────────────────────────
   Repliées : on vient chercher UNE réponse, pas lire les cinq. Chaque question
   est une carte pleine (la matière des blocs de l'app), le chevron volt tourne
   quand elle s'ouvre. Le texte des réponses est dans la page, replié ou non :
   les moteurs le lisent, et les données structurées de la page le reprennent. */
.faq {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(88px, 10vw, 144px) var(--pad) clamp(24px, 3vw, 40px);
}
.faq-title {
  margin-bottom: clamp(28px, 3.4vw, 44px);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  border-radius: 24px;
  background: var(--card);
  transition: background-color 180ms ease;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  border-radius: 24px;
  font-weight: 800;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary svg {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--volt);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 240ms var(--ease-out);
}
.faq-item[open] summary svg {
  rotate: 180deg;
}
.faq-item p {
  max-width: 46em;
  padding: 0 26px 24px;
}
@media (hover: hover) and (pointer: fine) {
  .faq-item:has(summary:hover) {
    background: #1c1b25;
  }
}
/* L'ouverture glisse là où le navigateur sait animer une hauteur
   automatique ; ailleurs, elle s'ouvre d'un coup, sans rien perdre. */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq-item {
      interpolate-size: allow-keywords;
    }
    .faq-item::details-content {
      block-size: 0;
      overflow-y: clip;
      transition:
        block-size 280ms var(--ease-out),
        content-visibility 280ms allow-discrete;
    }
    .faq-item[open]::details-content {
      block-size: auto;
    }
  }
}

/* ── Téléphone ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .faq-item summary {
    padding: 18px 20px;
  }
  .faq-item p {
    padding: 0 20px 20px;
  }
  :root {
    --radius: 28px;
  }
  .p-mid {
    --w: 56vw;
  }
  .p-in {
    --w: 46vw;
  }
  .topics {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .topics .title {
    align-items: center;
  }
  .stats {
    justify-content: center;
  }
  .p-topics {
    --w: min(62vw, 280px);
  }
  .store {
    flex: 1 1 150px;
    justify-content: center;
  }
}
/* ── Mouvement : une entrée, rien d'autre ───────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero .title,
  .hero .lead,
  .hero .get {
    animation: rise 800ms var(--ease-out) both;
  }
  .hero .lead {
    animation-delay: 80ms;
  }
  .hero .get {
    animation-delay: 160ms;
  }
  .fan .phone {
    animation: rise 1000ms var(--ease-out) both;
    animation-delay: calc(220ms + var(--i) * 70ms);
  }
  .dl[open] .dl-card {
    animation: pop 260ms var(--ease-out) both;
  }
  .dl[open]::backdrop {
    animation: fade 200ms ease both;
  }
}
/* Le reste entre au défilement, en CSS seul : un navigateur qui ne connaît pas
   les animations liées au défilement montre simplement la page, sans rien
   cacher. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .topics .title,
    .stat,
    .p-topics,
    .cta-icon,
    .cta .title,
    .cta .lead,
    .cta .get,
    .faq-title,
    .faq-item {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 70%;
    }
  }
}
@keyframes rise {
  from {
    opacity: 0;
    translate: 0 48px;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    scale: 0.94;
    translate: 0 14px;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
}