/* Styles de public/try.php — sortis de la page (i102b). */

.tw{max-width:1100px;margin:0 auto;padding:0 clamp(22px,5vw,48px) 90px}
.tw-steps{display:flex;gap:10px;justify-content:center;align-items:center;margin:0 0 34px;flex-wrap:wrap}
.tw-dot{display:flex;align-items:center;gap:9px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivoire-2)}
.tw-dot .n{width:26px;height:26px;border-radius:50%;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;font-family:var(--serif);color:var(--or)}
.tw-dot.on{color:var(--ivoire)}.tw-dot.on .n{background:var(--or);color:var(--noir);border-color:var(--or);font-weight:600}
.tw-sep{width:26px;height:1px;background:var(--hair-soft)}
.tw-panel{display:none}.tw-panel.on{display:block;animation:twin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes twin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tw-h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.1;text-align:center}
.tw-h2 em{font-style:italic;color:var(--or)}
.tw-sub{color:var(--ivoire-2);text-align:center;max-width:620px;margin:14px auto 38px}
/* Types d'événement */
.tw-types{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:860px;margin:0 auto}
/* Raccourci « j'ouvre la cabine tout de suite » + aperçu du résultat */
/* ── LES MONDES, SOUS LES OCCASIONS ────────────────────────────────────────
   Quatre images pleines, pas quatre vignettes : c'est ce qu'on vient voir. La
   bordure prend l'accent du monde au survol — deux mondes voisins ne doivent
   pas se ressembler. */
/* Plus large que le reste de l'étape : quatre cartes à 200 px ne montrent
   plus rien de leurs tirages. */
.tw-mondes{max-width:1060px;margin:34px auto 0;text-align:center}
.tw-ou{position:relative;margin:0 0 22px;color:var(--ivoire-2);font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase}
.tw-ou::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--hair-soft)}
.tw-ou span{position:relative;background:var(--bg,#0b0a08);padding:0 14px}
.tw-m-h{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:0 0 6px}
/* La grille elle-même vient de src/partials/collections_grid.php : elle
   apporte ses propres styles, les mêmes qu'en page d'accueil. Ici on ne
   règle que la largeur du bloc et son titre. */
.tw-mondes .cg-grille{margin-top:18px;text-align:left}
/* Les collections de l'occasion, à l'étape 2 : même grille, même carte. */
.tw-occ-colls{margin:0 auto 6px;text-align:center}
.tw-occ-colls .cg-grille{margin-top:16px;text-align:left}
.tw-ou-2{margin:26px 0 18px}
.tw-shortcut{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:30px auto 0;text-align:center}
.tw-shortcut .tw-note{font-size:.85rem;color:var(--ivoire-2)}
.tw-preview{max-width:340px;margin:44px auto 0;text-align:center}
.tw-preview img{width:100%;height:auto;display:block;border-radius:16px;
  box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06)}
.tw-preview figcaption{margin-top:12px;font-size:.85rem;color:var(--ivoire-2);line-height:1.5}
@media(max-width:820px){.tw-types{grid-template-columns:repeat(2,1fr)}}
.tw-type{background:var(--noir2);border:1px solid var(--hair-soft);border-radius:16px;padding:24px 14px;text-align:center;cursor:pointer;transition:all .3s}
.tw-type:hover{border-color:var(--hair);transform:translateY(-4px)}
.tw-type.sel{border-color:var(--or);background:linear-gradient(140deg,rgba(201,169,98,.14),transparent)}
.tw-type .em{font-size:1.7rem}
.tw-type .lb{font-family:var(--serif);font-size:1.15rem;margin-top:6px}
/* Décors */
.tw-frames{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:860px){.tw-frames{grid-template-columns:repeat(2,1fr)}}
.tw-frame{position:relative;background:#0e0d0a;border:1px solid var(--hair-soft);border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s}
.tw-frame:hover{transform:translateY(-5px);border-color:var(--hair)}
.tw-frame.sel{border-color:var(--or);box-shadow:0 0 0 1px var(--or)}
.tw-frame img{width:100%;aspect-ratio:3/4;object-fit:contain;display:block;background:repeating-conic-gradient(#151219 0 25%,#0f0d0b 0 50%) 50%/16px 16px}
.tw-frame .cap{padding:10px 12px;font-size:.8rem;color:var(--ivoire-2);border-top:1px solid var(--hair-soft)}
.tw-frame .tick{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:var(--or);color:var(--noir);display:none;align-items:center;justify-content:center;font-weight:700}
.tw-frame.sel .tick{display:flex}
/* Ligne « importer le mien » : pleine largeur, sous les 4 décors proposés */
.tw-own{position:relative;overflow:hidden;border:1px dashed var(--hair);border-radius:12px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:14px;cursor:pointer;background:rgba(201,169,98,.05);min-height:96px;margin-top:14px;padding:18px 22px;text-align:left;transition:all .3s}
.tw-own .t{font-family:var(--serif);font-size:1.1rem}
.tw-own .s{font-size:.78rem;color:var(--ivoire-2)}
.tw-own .txt{display:flex;flex-direction:column;gap:2px}
@media(max-width:600px){.tw-own{flex-direction:column;text-align:center}}
.tw-own:hover{border-color:var(--or);background:rgba(201,169,98,.1)}
.tw-own.sel{border-style:solid;border-color:var(--or);box-shadow:0 0 0 1px var(--or);background:rgba(201,169,98,.12)}
.tw-own .thumb{position:absolute;inset:0;object-fit:contain;background:repeating-conic-gradient(#151219 0 25%,#0f0d0b 0 50%) 50%/16px 16px;display:none}
.tw-own.has .thumb{display:block}
.tw-own.has .plus,.tw-own.has .t,.tw-own.has .s{display:none}
.tw-own .chg{position:absolute;left:0;right:0;bottom:0;z-index:2;background:rgba(11,10,8,.82);color:var(--or);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:7px;display:none}
.tw-own.has .chg{display:block}
.tw-own .plus{font-size:1.9rem;color:var(--or);line-height:1}
.tw-more{text-align:center;margin-top:26px;color:var(--ivoire-2);font-size:.9rem}
.tw-more a{color:var(--or)}
.tw-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:42px}
.tw-back{background:none;border:0;color:var(--ivoire-2);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.tw-back:hover{color:var(--or)}
/* Invitation / conversion */
/* ── LA CARTE ────────────────────────────────────────────────────────────
   Elle portait « liquid-card » : un trait doré qui tournait sans fin autour du
   bord. Une ligne qui court en rond tire l'œil hors du texte en permanence —
   or c'est ici qu'on lit la seule promesse de la page et qu'on tape son
   adresse. À la place : un halo qui RESPIRE, neuf secondes par cycle, et un
   filet doré dégradé, immobile. La carte est vivante sans jamais bouger, et
   rien ne poursuit le regard.
   Le halo est un box-shadow (pas un pseudo-élément en z-index négatif, qui
   passerait sous le fond de la carte et ne se verrait pas). */
.tw-offer{position:relative;max-width:880px;margin:0 auto;border-radius:22px;
  padding:clamp(30px,5vw,54px);border:1px solid transparent;
  background:linear-gradient(180deg,rgba(26,23,19,.92),rgba(13,12,16,.96));
  animation:twRespire 9s ease-in-out infinite}
@keyframes twRespire{
  0%,100%{box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 60px -28px rgba(217,184,119,.30)}
  50%    {box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 96px -18px rgba(217,184,119,.58)}
}
/* Le filet : un dégradé, pas une couleur — il s'allume en haut à gauche et
   s'éteint en bas, comme une lumière posée sur un objet. */
.tw-offer::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;
  background:linear-gradient(150deg,rgba(217,184,119,.62),rgba(217,184,119,.10) 34%,
    rgba(217,184,119,.03) 62%,rgba(217,184,119,.34));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
@media (prefers-reduced-motion:reduce){
  .tw-offer{animation:none;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 70px -24px rgba(217,184,119,.38)}
}
/* ── L'INVITATION D'ABORD ──────────────────────────────────────────────
   Le haut de la carte est ce qu'on vient y chercher : monter sa fête, tout
   de suite, sans rien payer. Le prix a quitté cette place ; il est en bas,
   en une ligne. */
.tw-go{text-align:center;margin-bottom:34px}
.tw-go-k{color:var(--or);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase}
.tw-go-h{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.1vw,2.15rem);
  line-height:1.18;margin:.5rem auto 1.4rem;max-width:22ch}
/* Ce qui est compris : une ligne de titre, pour que la liste réponde à une
   question posée (« compris quand ? ») au lieu de flotter. */
.tw-inc-h{text-align:center;color:var(--ivoire-2);font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;margin:0 0 18px;padding-top:26px;border-top:1px solid var(--hair-soft)}
/* Le prix : lisible, jamais criard. */
.tw-apres{text-align:center;color:var(--ivoire-2);font-size:.92rem;line-height:1.65;
  margin:0 auto;max-width:52ch;padding-top:22px;border-top:1px solid var(--hair-soft)}
.tw-incl{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;margin:0 auto 32px;max-width:640px}
@media(max-width:700px){.tw-incl{grid-template-columns:1fr}}
.tw-incl li{list-style:none;color:var(--ivoire-2);font-size:.95rem;display:flex;gap:10px;align-items:flex-start}
.tw-incl li b{color:var(--or);flex:0 0 auto}
.tw-form{max-width:460px;margin:0 auto;text-align:center}
.tw-form input{width:100%;background:rgba(11,10,8,.6);border:1px solid var(--hair);color:var(--ivoire);padding:16px 18px;border-radius:4px;font:inherit;text-align:center}
.tw-form input:focus{outline:none;border-color:var(--or)}
.tw-form .btn-lux{width:100%;margin-top:12px}
.tw-note{font-size:.76rem;color:var(--ivoire-2);margin-top:14px;line-height:1.6}
.tw-msg{max-width:460px;margin:0 auto 20px;padding:14px 18px;border-radius:8px;text-align:center;font-size:.92rem}
.tw-msg.ok{background:rgba(126,240,178,.10);border:1px solid rgba(126,240,178,.4);color:#9fe8c0}
.tw-msg.ko{background:rgba(255,120,120,.10);border:1px solid rgba(255,120,120,.4);color:#ffb0b0}