/* ==========================================================================
   Baladino : « entrée du Dino Parc ».
   Ciel, soleil, nuages qui passent, collines, allée où apparaissent des traces
   de pas, grand portique en bois, panneaux fléchés, billet d'entrée.
   Tous les décors sont des dessins originaux (feuillages génériques, pas ceux de la boîte).
   L'illustration de la boîte est affichée entière, sans aucun effet.
   ========================================================================== */

@font-face { font-family: "Chewy"; src: url("/assets/fonts/chewy-latin-400-normal.woff2") format("woff2"); font-display: swap; }

.bd {
  --ciel: #bfe6f2;
  --herbe: #6fb36a;
  --herbe-fonce: #3f8a4e;
  --herbe-loin: #a9d8a0;
  --bois: #7a4c2a;
  --bois-fonce: #4f2f18;
  --bois-clair: #a8743f;
  --creme: #fff4dc;
  --sentier: #e9d3a3;
  --bd-encre: #17302a;
  --bd-accent: #1d6658;
  background: #e5f2ec;
  color: var(--bd-encre);
}
.bd .fil-ariane, .bd .fil-ariane a { color: #24443b; }

/* ---------- Le parc (ouverture) ---------- */
.bd-parc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(5rem, 11vw, 8rem);
  background: linear-gradient(#9fd8ee 0%, #c9ecf3 45%, #eaf7ea 100%);
}
.bd-ciel { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.bd-soleil {
  position: absolute;
  top: clamp(4rem, 8vw, 6rem);
  left: clamp(1rem, 8vw, 8rem);
  width: clamp(4.5rem, 9vw, 7rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff7c2, #ffd75e 70%);
  box-shadow: 0 0 0 14px rgba(255, 224, 110, 0.25), 0 0 0 32px rgba(255, 224, 110, 0.12);
}
.bd-nuage {
  position: absolute;
  width: 9rem;
  height: 2.6rem;
  border-radius: 999px;
  background: #fff;
  opacity: 0.92;
}
.bd-nuage::before, .bd-nuage::after { content: ""; position: absolute; border-radius: 50%; background: #fff; }
.bd-nuage::before { width: 3.6rem; height: 3.6rem; left: 1.4rem; top: -1.7rem; }
.bd-nuage::after { width: 4.6rem; height: 4.6rem; left: 3.6rem; top: -2.4rem; }
.bd-nuage--1 { top: 16%; left: 58%; }
.bd-nuage--2 { top: 34%; left: 12%; transform: scale(0.7); opacity: 0.8; }
.bd-nuage--3 { top: 9%; left: 84%; transform: scale(0.55); opacity: 0.75; }

.bd-feuilles { position: absolute; z-index: 1; top: 14%; width: clamp(7rem, 15vw, 13rem); pointer-events: none; }
.bd-feuilles--gauche { left: 0; }
.bd-feuilles--droite { right: 0; top: 30%; transform: scaleX(-1); }
.bd-feuille { fill: #3f8a4e; }
.bd-feuille--2 { fill: #57a05a; }
.bd-feuille--3 { fill: #2f7542; }
.bd-nervure { fill: none; stroke: rgba(230, 245, 220, 0.55); stroke-width: 3; stroke-linecap: round; }

.bd-scene { position: relative; z-index: 2; text-align: center; }

/* Le grand portique en bois */
.bd-arche { position: relative; display: grid; justify-items: center; padding-top: clamp(1rem, 3vw, 2rem); }
.bd-arche__poteau {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  width: 1.1rem;
  height: 11rem;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--bois-fonce), var(--bois-clair) 45%, var(--bois));
}
.bd-arche__poteau--g { left: calc(50% - min(17rem, 43vw)); }
.bd-arche__poteau--d { right: calc(50% - min(17rem, 43vw)); }
.bd-arche__panneau {
  position: relative;
  z-index: 1;
  width: min(36rem, 92vw);
  margin-top: 1.2rem;
  padding: 1rem 1.5rem 0.9rem;
  border-radius: 1.6rem 1.6rem 0.6rem 0.6rem;
  background:
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(0, 0, 0, 0.14) 22px 24px),
    linear-gradient(#8a5a30, var(--bois));
  border: 4px solid var(--bois-fonce);
  box-shadow: 0 14px 0 -6px rgba(79, 47, 24, 0.35), 0 22px 30px -18px rgba(0, 0, 0, 0.5);
}
.bd-arche__panneau::before, .bd-arche__panneau::after {
  content: "";
  position: absolute;
  top: 0.8rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e8d2a8, #6b4a2a);
}
.bd-arche__panneau::before { left: 0.9rem; }
.bd-arche__panneau::after { right: 0.9rem; }
.bd-bienvenue {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--creme);
}
.bd h1 {
  margin: 0.1rem 0 0;
  font-family: "Chewy", var(--titre);
  font-weight: 400;
  font-size: clamp(3.2rem, 9vw, 6.2rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff7d6;
  text-shadow: 0 4px 0 var(--bois-fonce), 0 7px 12px rgba(0, 0, 0, 0.3);
}
.bd-accroche {
  position: relative;
  z-index: 1;
  margin: 1.4rem auto 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;
  color: var(--bd-encre);
}

/* La boîte posée sur la colline */
.bd-colline { position: relative; z-index: 2; display: grid; justify-items: center; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.bd-boite { width: min(24rem, 72vw); }
.bd-boite picture { display: contents; }
.bd-boite img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 22px 18px rgba(30, 60, 40, 0.38)); }

/* Collines et allée */
.bd-paysage { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; width: 100%; height: clamp(9rem, 20vw, 16rem); }
.bd-paysage__loin { fill: var(--herbe-loin); }
.bd-paysage__milieu { fill: var(--herbe); }
.bd-paysage__pres { fill: var(--herbe-fonce); }
.bd-paysage__allee { fill: var(--sentier); }
.bd-trace { fill: none; stroke: #8a6a3a; stroke-width: 3.2; stroke-linecap: round; opacity: 0.75; }

/* ---------- La visite (contenu) ---------- */
.bd-visite {
  background: linear-gradient(#3f8a4e 0, #e5f2ec 3.5rem);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.bd-visite__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* Le panneau d'information du parc */
.bd-plan {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 1.2rem;
  background: #fffaf0;
  border: 6px solid var(--bois);
  box-shadow: 0 0 0 3px var(--bois-fonce), 0 26px 40px -26px rgba(20, 50, 30, 0.6);
}
.bd-plan h2, .bd-billet__titre {
  font-family: "Chewy", var(--titre);
  font-weight: 400;
  color: var(--bd-accent);
}
.bd-plan h2 { font-size: clamp(2rem, 4.5vw, 2.8rem); margin: 0 0 1rem; }
.bd-description { font-size: 1.12rem; line-height: 1.7; max-width: 58ch; color: var(--bd-encre); }
.bd .bouton { background: var(--bd-accent); border-color: var(--bd-accent); color: #fff; border-radius: 999px; box-shadow: 0 4px 0 #11443a; }
.bd .bouton:hover { background: #11443a; border-color: #11443a; color: #fff; }
.bd .bouton--clair { background: #fff; color: var(--bd-accent); border-color: var(--bd-accent); }
.bd .bouton--clair:hover { background: var(--bd-accent); color: #fff; }
.bd .liens-secondaires a { color: var(--bd-accent); }

/* Panneaux fléchés en bois */
.bd-panneaux { list-style: none; margin: 0 0 2rem; padding: 0 0 0 1.4rem; display: grid; gap: 0.7rem; position: relative; }
.bd-panneaux::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: -0.6rem;
  bottom: -0.8rem;
  width: 0.7rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bois-fonce), var(--bois-clair));
}
.bd-fleche {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  padding: 0.6rem 2.2rem 0.6rem 1rem;
  font-family: "Fredoka", var(--titre);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--creme);
  background: linear-gradient(#8a5a30, var(--bois));
  clip-path: polygon(0 0, calc(100% - 1.3rem) 0, 100% 50%, calc(100% - 1.3rem) 100%, 0 100%);
}
.bd-fleche--inverse { margin-left: 1rem; padding: 0.6rem 1rem 0.6rem 2.2rem; clip-path: polygon(1.3rem 0, 100% 0, 100% 100%, 1.3rem 100%, 0 50%); }
.bd-fleche svg { color: var(--creme); flex: none; width: 1.5rem; height: 1.5rem; }
.bd-fleche > span { white-space: nowrap; }

/* Billet d'entrée (avec encoches) */
.bd-billet {
  position: relative;
  padding: 1.4rem 1.6rem 1rem;
  background:
    radial-gradient(circle at 0 50%, #e5f2ec 0.9rem, transparent 0.95rem),
    radial-gradient(circle at 100% 50%, #e5f2ec 0.9rem, transparent 0.95rem),
    #ffe9a8;
  border-radius: 0.6rem;
  box-shadow: 0 18px 30px -20px rgba(20, 50, 30, 0.6);
}
.bd-billet::after {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border: 2px dashed rgba(79, 47, 24, 0.4);
  border-radius: 0.4rem;
  pointer-events: none;
}
.bd-billet__titre { font-size: 1.8rem; margin: 0 0 0.4rem; color: #6a3a14; }
.bd-credits { margin: 0; }
.bd-credits div { padding: 0.55rem 0; border-top: 1px solid rgba(79, 47, 24, 0.22); }
.bd-credits dt { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: #6a3a14; }
.bd-credits dd { margin: 0.15rem 0 0; font-size: 1.02rem; color: #2a1a0c; }

/* Cocarde de la distinction */
.bd-cocardes { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.bd-cocarde {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 999px;
  background: #fff;
  border: 3px solid #e2a63b;
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px #e2a63b;
}
.bd-cocarde svg { width: 2.2rem; height: 2.2rem; color: #b2701a; flex: none; }
.bd-cocarde strong { display: block; font-family: "Fredoka", var(--titre); font-size: 1.15rem; color: #7a4510; }
.bd-cocarde span { font-size: 0.95rem; color: #3b2a14; }

/* La photo dans un cadre en bois (le cadre seul est décoré) */
.bd-cadre {
  margin: clamp(3rem, 6vw, 4rem) auto 0;
  max-width: 58rem;
  padding: clamp(0.6rem, 1.6vw, 1rem);
  background: linear-gradient(135deg, var(--bois-clair), var(--bois) 50%, var(--bois-fonce));
  border-radius: 0.6rem;
  box-shadow: 0 28px 50px -28px rgba(20, 50, 30, 0.7);
}
.bd-cadre img { width: 100%; height: auto; }
.bd-cadre figcaption {
  font-family: "Chewy", var(--titre);
  font-size: 1.5rem;
  color: var(--creme);
  text-align: center;
  padding-top: 0.6rem;
}

@media (max-width: 52rem) {
  .bd-visite__grille { grid-template-columns: minmax(0, 1fr); }
  .bd-feuilles { width: 5.5rem; opacity: 0.85; }
  .bd-feuilles--droite { top: 52%; }
  .bd-arche__poteau { height: 8rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .bd-nuage--1 { animation: bd-nuage 38s linear infinite; }
  .bd-nuage--2 { animation: bd-nuage2 52s linear infinite; }
  .bd-nuage--3 { animation: bd-nuage3 64s linear infinite; }
  @keyframes bd-nuage { from { translate: -8vw 0; } to { translate: 14vw 0; } }
  @keyframes bd-nuage2 { from { translate: -6vw 0; } to { translate: 20vw 0; } }
  @keyframes bd-nuage3 { from { translate: 0 0; } to { translate: -30vw 0; } }
  .bd-trace { animation: bd-pas 6s ease-in-out infinite; opacity: 0; }
  .bd-trace:nth-child(2) { animation-delay: 0.6s; }
  .bd-trace:nth-child(3) { animation-delay: 1.2s; }
  .bd-trace:nth-child(4) { animation-delay: 1.8s; }
  .bd-trace:nth-child(5) { animation-delay: 2.4s; }
  @keyframes bd-pas { 0% { opacity: 0; } 8%, 60% { opacity: 0.8; } 85%, 100% { opacity: 0; } }
  .bd-feuilles--gauche { animation: bd-vent 7s ease-in-out infinite alternate; transform-origin: 0 50%; }
  @keyframes bd-vent { to { rotate: 3deg; } }
  .bd-soleil { animation: bd-soleil 6s ease-in-out infinite alternate; }
  @keyframes bd-soleil { to { box-shadow: 0 0 0 20px rgba(255, 224, 110, 0.22), 0 0 0 44px rgba(255, 224, 110, 0.1); } }
}