/* MOBB 13 — site de sortie
   Nuit très sombre, logo et titres iridescents, porte rendue en 3D (mêmes décors que le trailer). */

@font-face {
  font-family: "Bagel";
  src: url("fonts/bagel.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --nuit: #070914;
  --nuit-2: #0b1028;
  --nuit-3: #151c45;
  --ligne: #252e66;
  --texte: #efe8f3;
  --texte-doux: #a9abd0;
  --creme: #f1dbe6;
  --lumiere: #ffd9a0;
  --rose: #f3a6d6;
  --nacre: linear-gradient(110deg, #ffd1ec 0%, #d6c8ff 28%, #b6ecff 52%, #f6f0d0 74%, #ffc8de 100%);

  --titre: "Bagel", "Arial Rounded MT Bold", system-ui, sans-serif;
  --corps: "Bricolage", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--nuit); color-scheme: dark; }

body {
  margin: 0;
  font-family: var(--corps);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--texte);
  background:
    radial-gradient(70% 45% at 50% 38%, #141a42 0%, transparent 70%),
    linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 60%, var(--nuit) 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* grain fin, comme le trailer */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.evitement {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--creme); color: var(--nuit); padding: .5rem 1rem; border-radius: 999px;
  z-index: 60;
}
.evitement:focus { top: 1rem; }

:focus-visible { outline: 2px solid #b6ecff; outline-offset: 3px; }

/* ---------- En-tête : le logo iridescent ---------- */
.entete { text-align: center; padding: clamp(1.2rem, 4vh, 2.6rem) 1rem 0; }
.logo { margin: 0; line-height: 0; }
.logo img {
  width: min(86vw, 520px);
  height: auto;
  filter: drop-shadow(0 0 22px rgba(190, 210, 255, .18));
}
.nom-album {
  margin: .6rem 0 0;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: var(--texte-doux);
  letter-spacing: .02em;
}

/* ---------- La porte ---------- */
.scene {
  position: relative;
  display: grid;
  justify-items: center;
  padding: .5rem 1rem 1rem;
}

.porte {
  position: relative;
  height: min(88vh, 980px);
  aspect-ratio: 3 / 4;
  max-width: 100%;
  margin-top: -1rem;
  /* l'image se fond dans la nuit sur ses quatre bords */
  --fondu-h: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  --fondu-v: linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%);
  -webkit-mask-image: var(--fondu-h), var(--fondu-v);
  -webkit-mask-composite: source-in;
  mask-image: var(--fondu-h), var(--fondu-v);
  mask-composite: intersect;
}
.porte-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.porte-img.ouverte { opacity: 0; transition: opacity 1.8s ease .4s; }

/* la cover, posée dans l'embrasure quand la porte est ouverte */
.porte-cover {
  position: absolute;
  left: calc(var(--baie-x) + var(--baie-l) * .08);
  width: calc(var(--baie-l) * .84);
  top: calc(var(--baie-y) + var(--baie-h) * .3);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 40px 8px rgba(255, 230, 190, .55);
  opacity: 0; scale: .9;
  transition: opacity 1.4s ease 1.6s, scale 2s cubic-bezier(.2, .7, .2, 1) 1.6s;
  pointer-events: none;
}

/* les sept points lumineux, posés sur les serrures de la porte */
.serrures { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.serrure {
  position: absolute;
  width: 1.1%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: #6b4a16;
  opacity: .55;
  transition: background .8s ease, box-shadow .8s ease, opacity .8s ease;
}
.serrure.ouverte {
  opacity: 1;
  background: #fff3d2;
  box-shadow: 0 0 6px 2px #ffd27a, 0 0 18px 6px rgba(255, 190, 90, .55);
}
.serrure.vient-de-s-ouvrir { animation: allumage 1.4s ease; }
@keyframes allumage {
  0% { box-shadow: 0 0 0 0 rgba(255, 210, 120, 0); }
  40% { box-shadow: 0 0 10px 4px #ffe1a0, 0 0 50px 22px rgba(255, 190, 90, .6); }
}

/* cachettes : zones cliquables invisibles, un reflet au survol pour les curieux */
.cachette {
  position: absolute;
  translate: -50% -50%;
  border: 0; padding: 0; margin: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: box-shadow .3s ease, background .3s ease;
}
.cachette:hover { background: rgba(255, 230, 190, .06); box-shadow: 0 0 18px 2px rgba(255, 220, 160, .18); }
.cachette[data-lieu="plaque"] { left: var(--plaque-x); top: var(--plaque-y); width: 9%; height: 5%; }
.cachette[data-lieu="imposte"] { left: var(--imposte-x); top: var(--imposte-y); width: calc(var(--baie-l) * 1.05); height: 6.5%; }
.cachette[data-lieu="boite"] { left: var(--boite-x); top: var(--boite-y); width: 7%; height: 2.6%; }
.cachette[data-lieu="poignee"] { left: var(--poignee-x); top: var(--poignee-y); width: 6%; height: 3%; }
.cachette.fouillee { animation: fouille .7s ease; }
@keyframes fouille { 40% { box-shadow: 0 0 26px 6px rgba(255, 220, 160, .45); background: rgba(255, 230, 190, .12); } }

/* compte à rebours */
.decompte {
  display: flex; justify-content: center; gap: clamp(1rem, 4vw, 2.4rem);
  margin-top: -4.5rem;
  position: relative;
}
.decompte span { display: grid; justify-items: center; line-height: 1; }
.decompte b {
  font-family: var(--titre); font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 6vw, 3.2rem);
  background: var(--nacre);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.decompte i { font-style: normal; font-size: .82rem; color: var(--texte-doux); margin-top: .35rem; }

.mot-porte {
  max-width: 36ch; text-align: center;
  margin: 1.2rem auto 0;
  color: var(--creme);
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
}

/* ---------- Ouverture le jour J ---------- */
.eclat {
  position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background: radial-gradient(circle at 50% 42%, #fff, #fff4df 38%, rgba(255, 230, 190, 0) 75%);
  opacity: 0;
}
body.ouverture .porte-img.ouverte, body.sorti .porte-img.ouverte { opacity: 1; }
body.ouverture .eclat { animation: eclat 2.6s ease .6s forwards; }
body.ouverture .porte-cover, body.sorti .porte-cover { opacity: 1; scale: 1; }
body.sorti .porte-img.ouverte, body.sorti .porte-cover { transition: none; }
@keyframes eclat { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }

body.sorti .decompte, body.ouverture .decompte,
body.sorti .serrures, body.ouverture .serrures,
body.sorti .cachette { display: none; }

/* ---------- Blocs de contenu ---------- */
.bloc {
  width: min(100% - 2rem, 46rem);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 4.5rem) 0 0;
}
.bloc h2 {
  font-family: var(--titre); font-weight: 400;
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1.05;
  margin: 0 0 .6rem;
  background: var(--nacre);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.intro { margin: 0 0 1.4rem; color: var(--texte-doux); max-width: 60ch; }

/* formulaire de clé */
.essai label { display: block; font-weight: 600; margin-bottom: .4rem; }
.essai-ligne { display: flex; gap: .6rem; flex-wrap: wrap; }
.essai input {
  flex: 1 1 12rem;
  font: 600 1.15rem/1 var(--corps);
  letter-spacing: .12em; text-transform: uppercase;
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 1.5px solid var(--ligne);
  background: #0a0e24;
  color: var(--texte);
}
.essai input::placeholder { color: #5d628f; letter-spacing: .06em; text-transform: none; }
.essai button {
  font: 700 1rem/1 var(--corps);
  padding: .9rem 1.4rem;
  border: 0; border-radius: 12px;
  background: var(--nacre); color: #1c1430;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 6px 24px rgba(180, 200, 255, .18);
}
.essai button:active { translate: 0 1px; }
.retour { min-height: 1.5em; margin: .6rem 0 0; color: var(--creme); }
.retour.erreur { color: #ffb3c8; }

.liste-cles { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .6rem; }
.carte-cle {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: start;
  padding: .9rem 1rem;
  border-radius: 14px;
  background: rgba(14, 19, 48, .7);
  border: 1px solid var(--ligne);
}
.carte-cle .ico { grid-row: span 2; width: 2rem; height: 2rem; margin-top: .1rem; color: #4b5287; }
.carte-cle.trouvee { border-color: rgba(255, 210, 140, .4); }
.carte-cle.trouvee .ico { color: var(--lumiere); filter: drop-shadow(0 0 6px rgba(255, 200, 110, .6)); }
.carte-cle h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.carte-cle p { margin: 0; color: var(--texte-doux); font-size: .97rem; }
.carte-cle.trouvee p { color: var(--creme); }
.carte-cle.fermee { opacity: .5; }

/* tracklist */
.pistes { list-style: none; margin: 0; padding: 0; counter-reset: piste; }
.piste {
  counter-increment: piste;
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .2rem .8rem; align-items: center;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.piste::before {
  content: counter(piste);
  font-family: var(--titre); font-size: 1.5rem;
  text-align: center;
  background: var(--nacre); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.piste .titre-piste { font-family: var(--titre); font-size: clamp(1.25rem, 3.6vw, 1.6rem); line-height: 1.1; }
.piste .titre-piste small { font-family: var(--corps); font-size: .85rem; color: var(--texte-doux); }
.piste.verrouillee .titre-piste { font-family: var(--corps); font-weight: 500; font-size: 1.05rem; color: #646a9e; }
.piste.verrouillee::before { background: none; color: #3a4178; }
.piste.revelee .titre-piste { animation: apparait .8s ease; }
@keyframes apparait { from { opacity: 0; filter: blur(6px); } }

.piste .outils { grid-column: 2; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .35rem; }
.piste audio { height: 2.2rem; max-width: 100%; }
.piste iframe { width: 100%; height: 80px; border: 0; border-radius: 12px; grid-column: 2; margin-top: .4rem; }
.lien-ecoute { color: #b6ecff; font-weight: 600; }

.flammes { display: inline-flex; gap: .1rem; border: 0; margin: 0; padding: 0; }
.flammes legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.flammes button {
  border: 0; background: none; cursor: pointer; padding: .15rem;
  font-size: 1.45rem; line-height: 1;
  filter: grayscale(1) brightness(.55);
  transition: filter .15s, scale .15s;
}
.flammes button.allumee { filter: none; }
.flammes:hover button { filter: grayscale(1) brightness(.55); }
.flammes:hover button:has(~ button:hover), .flammes:hover button:hover { filter: none; scale: 1.08; }
.moyenne { color: var(--texte-doux); font-size: .92rem; font-variant-numeric: tabular-nums; }

/* classement en direct */
.podium {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center;
  padding: 1.2rem; margin-bottom: 1.4rem;
  border-radius: 18px;
  background: rgba(14, 19, 48, .8);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 1px rgba(214, 200, 255, .35), 0 0 40px rgba(182, 236, 255, .08);
}
.podium img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; }
.podium .champion { font-family: var(--titre); font-size: clamp(1.5rem, 4.5vw, 2.1rem); line-height: 1.05; }
.podium .detail { color: var(--texte-doux); margin-top: .25rem; }

.barres { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.barre { display: grid; grid-template-columns: minmax(7rem, 14rem) 1fr 3.4rem; gap: .8rem; align-items: center; }
.barre .nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre .jauge { height: .6rem; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.barre .jauge span { display: block; height: 100%; border-radius: inherit; background: var(--nacre); transition: width .8s ease; }
.barre .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--texte-doux); }

/* trailer */
.cadre-video { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.cadre-video iframe, .cadre-video video { width: 100%; height: 100%; border: 0; display: block; }

/* pied de page */
.pied { padding: 4rem 1rem 3rem; text-align: center; }
.liens { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 1.4rem; }
.liens a {
  padding: .55rem 1.1rem; border-radius: 999px;
  color: var(--texte); text-decoration: none; font-weight: 600;
  border: 1px solid var(--ligne);
}
.liens a:hover { border-color: #d6c8ff; }
.petit { color: #6d71a0; font-size: .9rem; margin: 0; }

/* message flottant */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 55;
  translate: -50% 150%;
  max-width: min(92vw, 30rem);
  padding: .9rem 1.2rem; border-radius: 14px;
  background: var(--nacre); color: #1c1430; font-weight: 600;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden;
  transition: translate .35s cubic-bezier(.2, .8, .2, 1), opacity .25s, visibility 0s .35s;
}
.toast.visible { translate: -50% 0; opacity: 1; visibility: visible; transition-delay: 0s; }

/* après la sortie : on cache le jeu */
body.sorti .trousseau, body.ouverture .trousseau { display: none; }

@media (max-width: 560px) {
  .porte { height: auto; width: 100%; margin-top: 0; }
  .decompte { margin-top: -2.4rem; }
  .barre { grid-template-columns: 1fr 3rem; }
  .barre .jauge { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}