/* =========================================================
   BOUTIQUE — les rayons à venir, en cover flow au défilement

   Retenue sur la planche de maquettes (« A7 bis ») : la tête centrée,
   une capsule de verre pour l'e-mail, et les six rayons qui passent
   comme les films de l'accueil. Chargée APRÈS style.css, et seulement
   ici.

   DEUX RÉGIMES. Sur un écran assez grand, la section s'épingle et le
   défilement fait tourner les rayons. Sur un téléphone, un écran trop bas
   ou en animations réduites, elle ne s'épingle pas : les rayons forment
   une bande qui défile au doigt. La condition est écrite une fois ici et
   une fois dans boutique.js — les deux doivent rester identiques.
   ========================================================= */

:root {
  --font-sans: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --bq-courbe: cubic-bezier(0.16, 1, 0.3, 1);
  --bq-h: 240px;
  --bq-w: calc(var(--bq-h) * 0.75);
}

/* L'EN-TÊTE RESTE EN PLACE SUR CETTE PAGE. main.js le range dès qu'on
   descend ; ici, toute la page est une section épinglée qu'on parcourt en
   défilant, et la navigation disparaissait au premier cran, pendant qu'on
   regarde les rayons. Même exception que la page Process (`.proc-vif`). */
.header--hidden { transform: none; }

/* ---------- La tête ---------- */
.bq-section { position: relative; }
.bq-sticky {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(104px, 16vw, 150px);
}
.bq-lumiere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(50% 45% at 50% 62%, rgba(255, 255, 255, 0.07), transparent 70%);
}

.bq-tete {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding-inline: var(--pad-x);
  text-align: center;
}
.bq-surtitre {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 16px;
}

/* LE STATUT DIT « ÇA ARRIVE » AVANT LE TITRE. Une pastille de verre — celle
   de « Voir tous les films » à l'accueil — et un point qui bat doucement :
   le seul élément vivant d'une page qui n'a encore rien à vendre. */
.bq-statut {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bq-pouls {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: bqPouls 2.2s ease-out infinite;
}
@keyframes bqPouls {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* La taille du titre de Contact et d'À propos. */
.bq-titre {
  margin-top: 20px;
  font-size: clamp(30px, 8.4vw, 56px);
}
.bq-tete .lead {
  margin-top: 18px;
  max-width: 40ch;
}

/* ---------- La capsule ----------
   Le champ et le bouton dans une seule pilule de verre : sur une page
   d'attente, laisser son e-mail est LE geste, il ne doit pas ressembler à
   un formulaire parmi d'autres. */
.bq-capsule {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(500px, 100%);
  box-sizing: border-box;
  margin-top: 28px;
  padding: 6px 6px 6px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 1px 0 0 rgba(255, 255, 255, 0.10);
  transition: border-color 0.4s var(--bq-courbe);
}
.bq-capsule:focus-within { border-color: rgba(255, 255, 255, 0.5); }
.bq-capsule input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 15px;
  outline: none;
}
.bq-capsule input::placeholder { color: var(--grey-40); }
/* Le remplissage automatique : même parade que sur Contact. */
.bq-capsule input:-webkit-autofill,
.bq-capsule input:-webkit-autofill:hover,
.bq-capsule input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 99999s 0s, color 99999s 0s;
}
.bq-capsule input:autofill { filter: none; }
.bq-capsule .btn { flex: none; padding: 13px 22px; }

.bq-capsule-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--grey-60);
}
.bq-capsule-retour:empty { display: none; }

/* ---------- Les rayons ---------- */
.bq-scene {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 36px 0 0;
  width: 100%;
  box-sizing: border-box;
  /* Hors épinglage : une bande qui défile au doigt, comme le rail de Contact. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--bq-w);
  gap: 12px;
  padding: 8px var(--pad-x) 12px;
  scroll-padding-inline: var(--pad-x);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.bq-scene::-webkit-scrollbar { display: none; }
.bq-rayon { scroll-snap-align: center; }

.bq-carte {
  position: relative;
  display: block;
  width: 100%;
  height: var(--bq-h);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015) 60%),
    #0b0b0b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 40px 80px -30px #000;
  color: rgba(255, 255, 255, 0.72);
  text-align: left;
  transition: border-color 0.6s var(--bq-courbe), color 0.6s var(--bq-courbe);
}
.bq-carte:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* LES FACES SONT DES DESSINS, PAS DES IMAGES DE FILMS. Un rayon n'a pas
   encore de visuel ; lui prêter celui d'un film aurait montré un produit
   qui n'existe pas. Un trait par famille — le cube d'une table 3D, trois
   curseurs, une pellicule, une pile, un tirage, un plus — dit ce que le
   rayon contiendra sans rien promettre. En `currentColor`, pour s'allumer
   avec la carte élue. */
.bq-illus {
  position: absolute;
  left: 50%;
  top: 16%;
  width: 42%;
  height: auto;
  translate: -50% 0;
}
.bq-pale { stroke-opacity: 0.35; }
.bq-mi { stroke-opacity: 0.6; }
.bq-plein { fill: #0e0e0e; }

.bq-avenir {
  position: absolute;
  top: 14px;
  left: 16px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.bq-nom {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  font-size: clamp(19px, 1.6vw, 23px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
}
.bq-reflet { display: none; }

/* ---------- Le pied ---------- */
.bq-pied {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 20px var(--pad-x) 0;
}
.bq-meter,
.bq-legende { display: none; }

/* La pilule de « Voir tous les films ». */
.bq-question {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.4s var(--bq-courbe), background 0.4s var(--bq-courbe), color 0.4s var(--bq-courbe);
}
.bq-question:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
}
.bq-fleche { transition: transform 0.4s var(--bq-courbe); }
.bq-question:hover .bq-fleche { transform: translateX(3px); }

.bq-apres { padding-block: clamp(32px, 5vw, 64px); }
.bq-note {
  color: #6f6f6f;
  font: 11px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em;
  text-align: center;
}

@media (max-width: 560px) {
  .bq-capsule { padding-left: 18px; }
  .bq-capsule .btn { padding: 12px 16px; letter-spacing: 0.1em; }
}

/* =========================================================
   ÉPINGLÉ — le cover flow au défilement
   ========================================================= */
@media (min-width: 761px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  :root {
    /* LA HAUTEUR DE LA CARTE SUIT CELLE DE LA FENÊTRE : tête, rayons et pied
       doivent tenir dans un seul écran épinglé, de 700 à 1200 px de haut. */
    --bq-h: clamp(210px, 30vh, 280px);
  }

  /* 300 vh : trois écrans de course pour six rayons, soit un demi-écran par
     rayon. Assez pour s'arrêter sur chacun, pas au point de rendre la page
     interminable — l'accueil en prend sept pour vingt-quatre films. */
  .bq-section { height: 300vh; height: 300svh; }
  .bq-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    padding-top: clamp(84px, 12vh, 118px);
  }
  .bq-titre { font-size: clamp(30px, min(4.2vw, 7vh), 64px); }
  .bq-tete .lead { margin-top: clamp(12px, 2.2vh, 22px); }
  .bq-capsule { margin-top: clamp(16px, 3.4vh, 32px); }

  .bq-scene {
    flex: 1 1 auto;
    display: block;
    margin: 0;
    padding: 0;
    overflow: visible;
    perspective: 1200px;
  }
  /* Toutes les cartes au même point, au centre de la scène ; le script les
     écarte. La référence est le CENTRE de la carte (le reflet en plus) :
     les rotations et les agrandissements partent de là. */
  .bq-rayon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--bq-w);
    margin-left: calc(var(--bq-w) / -2);
    margin-top: calc(var(--bq-h) / -2 - 20px);
    will-change: transform, opacity;
  }
  .bq-carte { opacity: 1; }
  .bq-rayon.is-elue .bq-carte {
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
  }
  /* Le reflet au sol, dans le rayon : il tourne avec la carte. */
  .bq-reflet {
    display: block;
    height: 48px;
    margin-top: 6px;
    border-radius: 16px 16px 0 0;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015) 60%),
      #0b0b0b;
    opacity: 0.3;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
    mask-image: linear-gradient(to bottom, #000, transparent 85%);
  }

  .bq-pied {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 0 var(--pad-x) clamp(18px, 3vh, 28px);
  }
  .bq-question { justify-self: end; }

  /* Le compteur du cover flow. */
  .bq-meter {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
  }
  .bq-meter-bar {
    display: block;
    width: clamp(90px, 10vw, 140px);
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
  }
  .bq-meter-bar > span {
    display: block;
    height: 100%;
    background: #fff;
    transform-origin: 0 50%;
    transform: scaleX(0);
  }
  .bq-indice {
    margin-left: 8px;
    transition: opacity 0.5s var(--bq-courbe);
  }
  .bq-indice.is-parti { opacity: 0; }

  .bq-legende {
    display: flex;
    align-items: baseline;
    gap: 12px;
    white-space: nowrap;
  }
  .bq-legende strong {
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.02em;
  }
  .bq-legende span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
  }
}

/* Entre 761 et 1100 px, la légende ne tient plus entre le compteur et la
   pilule : elle cède, le nom reste sur la carte élue. */
@media (min-width: 761px) and (max-width: 1100px) {
  .bq-legende span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bq-pouls { animation: none; }
}

/* =========================================================
   L'ENTRÉE

   Seul le titre bougeait — un masque de ligne de 1,5 s — et tout le reste
   était là d'emblée : le titre finissait d'arriver APRÈS la capsule et
   les cartes, à rebours de l'ordre de lecture.

   LA TÊTE, COMME À PROPOS : chaque pièce monte de 18 px en apparaissant,
   1 s d'opacité, 1,2 s de montée, 80 ms entre deux. Le sur-titre et la
   pastille sont deux marches, pas une. Le titre a perdu son masque de
   ligne : les deux animations se seraient superposées.

   LES RAYONS, COMME LES FILMS DE L'ACCUEIL : ils arrivent du fond — plus
   petits, plus bas, transparents — et DEPUIS LE CENTRE : le rayon du
   milieu d'abord, puis ses voisins, puis les plus éloignés. Ils partent à
   0,45 s, quand la tête est lue.

   C'est la carte et son reflet qui s'animent, pas le rayon : boutique.js
   pose en ligne la transformée et l'opacité de chaque rayon à chaque cran
   de défilement, et une animation sur le même élément serait écrasée.

   Déclenchée par `is-loaded`, que main.js pose à la première image — après
   le saut qui ouvre la page sur le rayon du milieu. Rien de tout cela en
   animations réduites : les éléments y sont visibles d'emblée.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .bq-surtitre > *,
  .bq-tete > :not(.bq-surtitre) {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 1s var(--bq-courbe), translate 1.2s var(--bq-courbe);
  }
  .is-loaded .bq-surtitre > *,
  .is-loaded .bq-tete > :not(.bq-surtitre) { opacity: 1; translate: none; }

  .is-loaded .bq-surtitre > :nth-child(2) { transition-delay: 0.08s; }
  .is-loaded .bq-tete > .bq-titre         { transition-delay: 0.16s; }
  .is-loaded .bq-tete > .lead             { transition-delay: 0.24s; }
  .is-loaded .bq-tete > .bq-capsule       { transition-delay: 0.32s; }
  .is-loaded .bq-tete > .bq-capsule-note  { transition-delay: 0.40s; }

  /* La transition de survol de la carte est reprise dans la liste : sans
     elle, déclarer `transition` ici l'effacerait. */
  .bq-rayon > .bq-carte,
  .bq-rayon > .bq-reflet {
    opacity: 0;
    scale: 0.82;
    translate: 0 36px;
    transition:
      opacity 1.1s var(--bq-courbe),
      scale 1.6s var(--bq-courbe),
      translate 1.6s var(--bq-courbe),
      border-color 0.6s var(--bq-courbe),
      color 0.6s var(--bq-courbe);
    transition-delay: var(--bq-entree, 0.45s), var(--bq-entree, 0.45s), var(--bq-entree, 0.45s), 0s, 0s;
  }
  .is-loaded .bq-rayon > .bq-carte { opacity: 1; scale: 1; translate: none; }
  /* Le reflet retrouve sa propre opacité, pas celle de la carte. */
  .is-loaded .bq-rayon > .bq-reflet { opacity: 0.3; scale: 1; translate: none; }

  /* Du centre vers les bords : le rayon du milieu (le troisième, celui sur
     lequel la page s'ouvre), puis 120 ms par rang d'écart. */
  .bq-rayon:nth-child(3)                          { --bq-entree: 0.45s; }
  .bq-rayon:nth-child(2), .bq-rayon:nth-child(4)  { --bq-entree: 0.57s; }
  .bq-rayon:nth-child(1), .bq-rayon:nth-child(5)  { --bq-entree: 0.69s; }
  .bq-rayon:nth-child(6)                          { --bq-entree: 0.81s; }
}