/* ==========================================================================
   Joyeux Bazar : « la chambre avant la nuit ».
   Guirlande de fanions, titre en cubes de bois, fenêtre où le jour tombe
   doucement puis revient (soleil, lune, étoiles), ballon qui rebondit,
   coffre à jouets et liste « à ranger » qui se coche.
   L'illustration de la boîte est affichée entière, sans aucun effet ni rien par-dessus.
   ========================================================================== */

.jb {
  --mur-jb: #f6ead6;
  --bois-jb: #c98b4e;
  --bois-fonce-jb: #7a4a22;
  --sarcelle-jb: #1d5d5c;
  --sarcelle-fonce-jb: #123d3c;
  --corail-jb: #c74a3a;
  --jaune-jb: #f2b632;
  --encre-jb: #2a2324;
  --doux-jb: #5b4b4c;
  background: #fbf5ea;
  color: var(--encre-jb);
}
.jb .fil-ariane, .jb .fil-ariane a { color: var(--doux-jb); }

/* ---------- La chambre (ouverture) ---------- */
.jb-chambre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(circle at 1.5rem 1.5rem, rgba(201, 139, 78, 0.18) 0 0.35rem, transparent 0.4rem) 0 0 / 3rem 3rem,
    var(--mur-jb);
}
.jb-guirlande { position: absolute; top: 0; left: 0; width: 100%; height: 4.2rem; z-index: -1; }
.jb-guirlande__fil { fill: none; stroke: var(--bois-fonce-jb); stroke-width: 2; }
.jb-fanion { transform-box: fill-box; transform-origin: 50% 0; }
.jb-fanion--0 { fill: var(--corail-jb); }
.jb-fanion--1 { fill: var(--jaune-jb); }
.jb-fanion--2 { fill: #3f9a97; }
.jb-fanion--3 { fill: #9c7ac2; }

.jb-scene { position: relative; padding-top: 2.6rem; }
.jb-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.jb-sur { margin: 0 0 0.8rem; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sarcelle-jb); }
.jb h1 { margin: 0; line-height: 1; }
.jb-cubes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.jb-espace { flex-basis: 100%; height: 0.2rem; }
.jb-cube {
  display: grid; place-items: center;
  width: clamp(2.9rem, 7vw, 4.4rem); aspect-ratio: 1;
  font-family: "Fredoka", var(--titre); font-weight: 700;
  font-size: clamp(1.9rem, 4.8vw, 3rem); text-transform: uppercase;
  color: #fff;
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 0.25rem rgba(255, 255, 255, 0.35), 0 0.3rem 0 rgba(42, 35, 36, 0.35);
}
.jb-cube--0 { background: var(--corail-jb); }
.jb-cube--1 { background: var(--sarcelle-jb); }
.jb-cube--2 { background: #b57a10; }
.jb-cube--3 { background: #7652a3; }
.jb-cube--4 { background: #2f7a3a; }
.jb-accroche {
  margin: 1.4rem 0 0; max-width: 30ch;
  font-family: "Fredoka", var(--titre); font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.35;
}

.jb-coin { position: relative; display: grid; justify-items: center; padding-top: 1rem; }
.jb-fenetre {
  position: absolute; top: 0; left: 0;
  width: clamp(5.5rem, 10vw, 7.5rem); aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 0.55rem solid #fff; border-radius: 0.6rem 0.6rem 0.3rem 0.3rem;
  box-shadow: 0 0 0 3px var(--bois-jb), 0 12px 20px -14px rgba(0, 0, 0, 0.5);
}
.jb-ciel { position: absolute; inset: 0; background: linear-gradient(#8fd0ec, #d9f0f8); }
.jb-astre {
  position: absolute; left: 30%; top: 28%; width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: #ffd24a; box-shadow: 0 0 0 0.4rem rgba(255, 210, 74, 0.3);
}
.jb-etoile { position: absolute; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: #fff; opacity: 0; }
.jb-etoile--1 { top: 18%; left: 18%; } .jb-etoile--2 { top: 58%; left: 72%; } .jb-etoile--3 { top: 72%; left: 26%; }
.jb-croisillon {
  position: absolute; inset: 0;
  background: linear-gradient(#fff, #fff) 50% 0 / 0.35rem 100% no-repeat, linear-gradient(#fff, #fff) 0 50% / 100% 0.35rem no-repeat;
}
.jb-nuit {
  position: absolute; top: 0.6rem; right: 0; z-index: 2;
  margin: 0; padding: 0.3rem 0.8rem;
  font-family: "Fredoka", var(--titre); font-weight: 600; font-size: 0.95rem;
  color: #fff; background: var(--sarcelle-fonce-jb); border-radius: 999px;
}
.jb-ballon {
  position: absolute; right: 2%; bottom: 2.2rem; z-index: 0;
  width: clamp(2.6rem, 6vw, 3.6rem); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.7) 0 12%, transparent 13%),
    conic-gradient(var(--corail-jb) 0 25%, var(--jaune-jb) 0 50%, #3f9a97 0 75%, #fff 0);
  box-shadow: 0 0.3rem 0 rgba(42, 35, 36, 0.25);
}
.jb-boite { position: relative; z-index: 1; width: min(15.5rem, 50vw, 30vw + 3rem); margin-top: clamp(4rem, 9vw, 5.5rem); }
.jb-boite picture { display: contents; }
.jb-boite img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 20px 18px rgba(42, 35, 36, 0.4)); }
.jb-tapis {
  width: min(26rem, 90%); height: 2.6rem; margin-top: -1.6rem;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at center, #e9a99a 0 0.5rem, #f3c9b8 0.5rem 1rem);
  opacity: 0.85;
}

/* ---------- Le rangement (contenu) ---------- */
.jb-rangement { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.jb-rangement__grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.jb-coffre {
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: #fff;
  border: 0.55rem solid var(--bois-jb);
  border-top-width: 1.3rem;
  border-radius: 1rem 1rem 0.6rem 0.6rem;
  box-shadow: inset 0 0.45rem 0 rgba(201, 139, 78, 0.18), 0 18px 34px -24px rgba(42, 35, 36, 0.6);
}
.jb-coffre h2, .jb-liste h2, .jb-equipe h2 { font-family: "Fredoka", var(--titre); font-weight: 700; color: var(--sarcelle-fonce-jb); }
.jb-coffre h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 0.8rem; }
.jb-description { font-size: 1.12rem; line-height: 1.7; max-width: 60ch; }
.jb .bouton { background: var(--sarcelle-jb); border-color: var(--sarcelle-fonce-jb); color: #fff; border-radius: 999px; }
.jb .bouton:hover { background: var(--sarcelle-fonce-jb); color: #fff; }
.jb .bouton--clair { background: transparent; color: var(--sarcelle-fonce-jb); border-color: var(--sarcelle-fonce-jb); }
.jb .liens-secondaires a { color: var(--sarcelle-fonce-jb); font-weight: 600; }

.jb-liste { padding: 1.2rem 1.4rem; background: #fff7df; border-radius: 0.8rem; box-shadow: 0 0 0 2px rgba(201, 139, 78, 0.35); }
.jb-liste h2 { font-size: 1.5rem; margin: 0 0 0.6rem; }
.jb-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.jb-liste li { display: flex; align-items: center; gap: 0.7rem; font-family: "Fredoka", var(--titre); font-weight: 600; font-size: 1.15rem; }
.jb-coche {
  position: relative; flex: none; width: 1.5rem; height: 1.5rem;
  border: 3px solid var(--sarcelle-jb); border-radius: 0.35rem; background: #fff;
}
.jb-coche::after {
  content: ""; position: absolute; left: 0.32rem; top: 0.02rem; width: 0.45rem; height: 0.85rem;
  border: solid var(--corail-jb); border-width: 0 0.22rem 0.22rem 0; rotate: 40deg;
}
.jb-equipe { margin-top: 1.8rem; }
.jb-equipe h2 { font-size: 1.5rem; margin: 0 0 0.4rem; }
.jb-credits { margin: 0; }
.jb-credits div { padding: 0.55rem 0; border-top: 2px dotted rgba(42, 35, 36, 0.3); }
.jb-credits dt { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--doux-jb); }
.jb-credits dd { margin: 0.15rem 0 0; font-size: 1.02rem; }
.jb-prix { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.jb-prix li { display: flex; gap: 0.8rem; align-items: center; }
.jb-prix svg { width: 2.4rem; height: 2.4rem; color: var(--sarcelle-jb); flex: none; }
.jb-prix strong { display: block; }

.jb-cadre {
  position: relative;
  margin: clamp(3rem, 6vw, 4rem) auto 0; max-width: 58rem;
  padding: 0.9rem 0.9rem 0;
  background: #fff; border-radius: 6px;
  box-shadow: 0 18px 34px -22px rgba(42, 35, 36, 0.55);
}
.jb-cadre::before, .jb-cadre::after {
  content: ""; position: absolute; top: -0.8rem; width: 6rem; height: 1.6rem;
  background: rgba(242, 182, 50, 0.75);
}
.jb-cadre::before { left: 1.5rem; rotate: -4deg; }
.jb-cadre::after { right: 1.5rem; rotate: 5deg; }
.jb-cadre img { width: 100%; height: auto; border-radius: 3px; }
.jb-cadre figcaption { font-family: "Fredoka", var(--titre); font-weight: 600; text-align: center; padding: 0.6rem 0 0.8rem; }

@media (max-width: 52rem) {
  .jb-grille, .jb-rangement__grille { grid-template-columns: minmax(0, 1fr); }
  .jb-cubes { justify-content: center; }
  .jb-titre { text-align: center; }
  .jb-accroche { margin-inline: auto; }
  .jb-boite { margin-top: 8.2rem; }
  .jb-ballon { right: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .jb-fanion { animation: jb-fanion 3.4s ease-in-out infinite; }
  .jb-fanion--1 { animation-delay: -0.8s; } .jb-fanion--2 { animation-delay: -1.6s; } .jb-fanion--3 { animation-delay: -2.4s; }
  @keyframes jb-fanion { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
  .jb-cube { animation: jb-cube 5s ease-in-out infinite; }
  .jb-cube--1 { animation-delay: -1s; } .jb-cube--2 { animation-delay: -2s; } .jb-cube--3 { animation-delay: -3s; } .jb-cube--4 { animation-delay: -4s; }
  @keyframes jb-cube { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -0.25rem; rotate: 3deg; } }
  /* Le jour tombe dans la fenêtre puis revient (24 s). */
  .jb-ciel { animation: jb-ciel 24s ease-in-out infinite; }
  @keyframes jb-ciel {
    0%, 15% { background: linear-gradient(#8fd0ec, #d9f0f8); }
    35% { background: linear-gradient(#f08a5d, #f9d07a); }
    55%, 85% { background: linear-gradient(#152a4a, #2c3f6b); }
    100% { background: linear-gradient(#8fd0ec, #d9f0f8); }
  }
  .jb-astre { animation: jb-astre 24s ease-in-out infinite; }
  @keyframes jb-astre {
    0%, 15% { background: #ffd24a; translate: 0 0; box-shadow: 0 0 0 0.4rem rgba(255, 210, 74, 0.3); }
    40% { background: #ff9a3c; translate: 0 180%; }
    45% { translate: 0 180%; background: #f4f1de; box-shadow: inset -0.5rem 0 0 #c9c3a6; }
    60%, 85% { translate: 0 0; background: #f4f1de; box-shadow: inset -0.5rem 0 0 #c9c3a6, 0 0 0 0.4rem rgba(244, 241, 222, 0.15); }
    100% { background: #ffd24a; translate: 0 0; }
  }
  .jb-etoile { animation: jb-etoile 24s ease-in-out infinite; }
  .jb-etoile--2 { animation-delay: 0.6s; } .jb-etoile--3 { animation-delay: 1.2s; }
  @keyframes jb-etoile { 0%, 50% { opacity: 0; } 58%, 82% { opacity: 1; } 90%, 100% { opacity: 0; } }
  .jb-ballon { animation: jb-ballon 2.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
  @keyframes jb-ballon { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.2rem; } }
  .jb-coche::after { animation: jb-coche 6s ease-out infinite; }
  .jb-liste li:nth-child(2) .jb-coche::after { animation-delay: 0.7s; }
  .jb-liste li:nth-child(3) .jb-coche::after { animation-delay: 1.4s; }
  @keyframes jb-coche { 0% { opacity: 0; scale: 0.2; } 8%, 85% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
}