/* ==========================================================================
   Joobo — l'accueil du pré-lancement.

   Une page qui n'a rien à vendre : elle explique ce qui se passe maintenant,
   ce qui se passera à l'ouverture, et pourquoi cela vaut dix minutes.
   ========================================================================== */

/* ---------- hero ---------- */
.hero{position:relative;padding-top:150px;padding-bottom:clamp(56px,8vw,96px);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;background:#FFF7EC}
.hero-bg::before,.hero-bg::after{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.hero-bg::before{
  width:min(120vw,1280px);height:min(90vw,900px);left:50%;top:-38%;transform:translateX(-50%);
  background:
    radial-gradient(circle at 26% 26%,rgba(242,178,5,.42),rgba(242,178,5,0) 58%),
    radial-gradient(circle at 76% 30%,rgba(255,71,87,.34),rgba(255,71,87,0) 56%),
    radial-gradient(circle at 52% 72%,rgba(255,172,71,.4),rgba(255,172,71,0) 62%);
  animation:derive 18s ease-in-out infinite alternate;
}
.hero-bg::after{
  width:min(80vw,720px);height:min(60vw,540px);right:-12%;top:24%;
  background:radial-gradient(circle,rgba(248,255,43,.3),rgba(248,255,43,0) 66%);
  animation:derive 22s ease-in-out infinite alternate-reverse;
}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 82%)}
@keyframes derive{from{transform:translate(-50%,0) scale(1)}to{transform:translate(-50%,3%) scale(1.08)}}
.hero-in{position:relative;text-align:center;display:grid;justify-items:center;gap:24px}
/* Le titre passe après la vidéo : il n'est plus l'accroche, il la nomme. Il
   perd donc sa taille de une (`.h-xxl`) et son dégradé — l'encre noire pleine,
   demandée, se tient mieux sous un visuel qui porte déjà la couleur. */
.hero-titre{
  /* `justify-items:center` sur la grille du hero dimensionne ses enfants au
     contenu : sans cette borne, le titre prenait sa largeur `max-content` et
     débordait de l'écran au lieu de se replier, sous 400 px. */
  max-width:100%;color:var(--ink-black);
  font-weight:800;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(25px,4.6vw,46px);text-transform:uppercase;
}
/* Sur large, la coupure est celle du balisage (`<br>`) : deux phrases, deux
   lignes. Sous 680 px, « Prenez votre place avant. » ne tient plus sur une
   ligne et débordait — on rend donc la main au navigateur, qui répartit. */
@media (max-width:680px){
  .hero-titre{text-wrap:balance}
  .hero-titre br{display:none}
}

/* ---------- la vidéo de présentation ----------
   `preload="none"` : le fichier pèse vingt mégaoctets, et la moitié des gens
   qui ouvriront cette page seront sur des données mobiles. Rien ne part avant
   l'appui. C'est aussi pourquoi l'affiche n'est pas une image mais un panneau
   dessiné — une image de plus à télécharger pour montrer qu'il y a une vidéo,
   et le premier plan d'un film n'est presque jamais celui qu'on choisirait. */
.film{
  position:relative;width:100%;max-width:760px;margin:0;aspect-ratio:16/9;
  border-radius:var(--r24);overflow:hidden;background:var(--dark);
  border:1px solid var(--ring);
}
.film video{width:100%;height:100%;display:block;object-fit:cover;background:var(--dark)}
.film-lance{
  position:absolute;inset:0;width:100%;display:flex;align-items:center;
  justify-content:center;gap:18px;padding:0 24px;text-align:left;
  background:
    radial-gradient(120% 100% at 50% 120%,rgba(242,178,5,.3),rgba(242,178,5,0) 62%),
    radial-gradient(100% 90% at 18% 0%,rgba(255,71,87,.26),rgba(255,71,87,0) 58%),
    var(--dark);
  transition:opacity .3s var(--ease);
}
.film-lance:hover .film-rond{transform:scale(1.06)}
.film-lance:active .film-rond{transform:scale(.97)}
.film-rond{
  width:66px;height:66px;flex:none;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--orange) 46%,var(--red));
  color:#fff;padding-left:4px;transition:transform .22s var(--ease);
}
.film-dit{display:grid;gap:4px;min-width:0}
.film-dit b{font-size:18px;font-weight:700;letter-spacing:-.015em;color:#fff}
.film-dit i{font-style:normal;font-size:14px;line-height:1.4;color:rgba(255,255,255,.66)}
.film[data-lance="oui"] .film-lance{opacity:0;pointer-events:none}
@media (max-width:560px){
  .film-lance{flex-direction:column;justify-content:center;gap:14px;text-align:center}
  .film-rond{width:56px;height:56px}
  .film-dit b{font-size:16px}
  .film-dit i{font-size:13px}
}
.hero .lead{max-width:54ch;color:var(--ink-body)}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.hero-note{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-size:13.5px;color:var(--ink-support)}
.hero-note span{display:inline-flex;align-items:center;gap:7px}

/* la pastille qui bat — le pré-lancement est un moment, pas un état */
.pouls{position:relative;display:inline-grid;place-items:center;min-width:22px;height:22px}
.pouls::after{
  content:"";position:absolute;inset:0;border-radius:999px;background:var(--red);
  animation:onde 2.2s ease-out infinite;
}
@keyframes onde{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.1);opacity:0}}

/* ---------- le compteur ---------- */
.compte{
  display:inline-flex;align-items:center;gap:14px;padding:12px 22px 12px 14px;
  background:var(--white);border:1px solid var(--ring);border-radius:999px;
  box-shadow:0 18px 40px -30px rgba(40,20,0,.6);
}
.compte .n{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1}
.compte .l{font-size:13.5px;line-height:1.3;color:var(--ink-support);text-align:left}
.compte .visages{display:flex}
.compte .visages i{
  width:30px;height:30px;border-radius:999px;border:2px solid var(--white);
  display:block;background:var(--s400);
}
.compte .visages i + i{margin-left:-11px}

/* ---------- les trois temps ---------- */
.temps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px;counter-reset:t}
.tps{
  position:relative;background:var(--s100);border:1px solid var(--hairline);
  border-radius:var(--r24);padding:28px 24px;
}
.tps::before{
  counter-increment:t;content:counter(t);
  display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
  background:var(--ink-black);color:#fff;font-size:14px;font-weight:700;margin-bottom:18px;
}
.tps--maintenant::before{background:linear-gradient(120deg,var(--rappel-a),var(--rappel-b))}
.tps h3{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.tps p{margin-top:9px;font-size:14.5px;line-height:1.55;color:var(--ink-support)}
.tps .quand{
  margin-top:16px;display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-subtle);
}
@media (max-width:860px){.temps{grid-template-columns:1fr}}

/* ---------- ce qu'on remplit ---------- */
.blocs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.bl{
  background:var(--white);border:1px solid var(--s500);border-radius:var(--r24);padding:24px;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.bl:hover{border-color:var(--ink-placeholder);transform:translateY(-2px)}
.bl .g{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--s200);margin-bottom:16px;
}
.bl h3{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.bl p{margin-top:7px;font-size:14px;line-height:1.55;color:var(--ink-support)}
.bl .opt{
  display:inline-block;margin-top:12px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-subtle);
}
@media (max-width:900px){.blocs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.blocs{grid-template-columns:1fr}}

/* ---------- ce qu'on y gagne ---------- */
.gains{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:48px}
.gn{
  display:flex;gap:16px;background:var(--s100);border:1px solid var(--hairline);
  border-radius:var(--r24);padding:24px;
}
.gn .g{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--white)}
.gn h3{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.gn p{margin-top:7px;font-size:14px;line-height:1.55;color:var(--ink-support)}
@media (max-width:760px){.gains{grid-template-columns:1fr}}

/* ---------- ce qu'est Joobo ---------- */
.quoi{
  background:var(--dark);color:#fff;border-radius:var(--r32);
  padding:clamp(34px,5vw,64px);position:relative;overflow:hidden;
}
.quoi::after{
  content:"";position:absolute;width:520px;height:520px;right:-160px;top:-200px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,178,5,.28),rgba(242,178,5,0) 66%);pointer-events:none;
}
.quoi h2{color:#fff}
.quoi > .lead{color:rgba(255,255,255,.66);max-width:60ch}
.rangs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:36px;position:relative}
.rg{display:flex;gap:14px;padding:18px;border-radius:var(--r18);background:rgba(255,255,255,.06)}
.rg .g{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.1)}
.rg h3{font-size:15.5px;font-weight:600}
.rg p{margin-top:5px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.6)}
@media (max-width:760px){.rangs{grid-template-columns:1fr}}

/* ---------- questions ---------- */
.qs{max-width:820px;margin:44px auto 0;border-top:1px solid var(--s500)}
.q{border-bottom:1px solid var(--s500)}
.q summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:17px;font-weight:600;letter-spacing:-.01em;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:1.8px solid var(--ink-subtle);border-bottom:1.8px solid var(--ink-subtle);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.q[open] summary::after{transform:translateY(-20%) rotate(225deg)}
.q p{padding:0 8px 24px 0;font-size:15.5px;line-height:1.65;color:var(--ink-support);max-width:70ch}

/* ---------- appel final ---------- */
.final{
  border-radius:var(--r32);padding:clamp(40px,6vw,80px) clamp(24px,5vw,64px);text-align:center;
  background:linear-gradient(135deg,var(--gold) 0%,var(--orange) 44%,var(--red) 100%);
  color:#fff;position:relative;overflow:hidden;
}
.final h2{color:#fff}
.final p{margin:18px auto 0;max-width:52ch;color:#fff;font-size:17.5px;font-weight:500;line-height:1.6}
.final .btn{margin-top:30px}
.final .btn-ink{background:var(--ink-black)}
.final small{display:block;margin-top:18px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.92)}