/* ==========================================================================
   Page « Spectacles, ateliers & animations »
   --------------------------------------------------------------------------
   Objectif de Jonathan : on doit voir le panel de possibilites EN UN COUP
   D'OEIL, avec les mots-cles lisibles de loin (spectacle, atelier, animation,
   deambulation...), et une page qui donne envie d'avancer : les objets de
   jonglage bougent au defilement, les blocs se revelent.

   Tout est en complement de assets/style.css (variables --creme, --encre,
   --terre, --or deja definies la-bas). Rien n'est redefini ici.
   ========================================================================== */

/* --- 1. Bandeau d'ouverture immersif ------------------------------------- */

.scene{
  /* Fond creme : la photo n'a plus a porter le texte, elle est a cote.
     Fini le voile sombre ou l'on ne distinguait plus le sujet. */
  background:var(--creme);
  padding:clamp(44px,7vw,92px) 24px clamp(36px,5vw,64px);
  position:relative;
  overflow:hidden;
}
.scene::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 88% 12%, rgba(201,169,141,.22), transparent 70%),
    radial-gradient(50% 40% at 6% 92%, rgba(138,154,131,.18), transparent 70%);
}
.scene-grille{
  position:relative;
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,72px); align-items:center;
}
.scene-texte{color:var(--encre)}

.scene-surtitre{
  display:inline-block; margin:0 0 20px; padding:7px 18px;
  border:1px solid var(--nude); border-radius:999px;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--terre-lien);            /* 5.02:1 sur creme */
}
.scene h1{
  margin:0 0 4px;
  font-size:clamp(2.1rem,4.6vw,3.8rem); line-height:1.07;
  color:var(--brun);                   /* 10.45:1 */
}
.scene h1 .script{
  display:block; margin-top:6px; font-size:1.18em; line-height:1.1;
  color:var(--terre-lien);             /* 5.02:1 : --terre seul tombait a 3.37 */
}
.scene-sous{
  max-width:46ch; margin:22px 0 26px;
  font-size:clamp(1rem,1.6vw,1.14rem); line-height:1.65;
  color:#5d5248;                       /* 7.10:1 */
}
.scene-actions{display:flex; flex-wrap:wrap; gap:14px}

/* --- 2. Les mots-cles, sur fond clair ------------------------------------ */
.mots{
  display:flex; flex-wrap:wrap; gap:9px;
  margin:0 0 28px; padding:0; list-style:none;
}
.mots li{
  padding:8px 16px; border-radius:999px;
  background:var(--sable); color:var(--brun);   /* 9.35:1 */
  font-size:.86rem; font-weight:500; letter-spacing:.04em;
  transition:transform .25s, background .25s;
}
.mots li:hover{transform:translateY(-3px); background:var(--nude)}

/* --- 2b. La photo, cadrée en arche ---------------------------------------- */
.scene-cadre{position:relative; margin:0}
.scene-cadre img{
  display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:220px 220px 26px 26px;
  box-shadow:0 26px 60px rgba(69,57,48,.22);
}
.scene-cadre::after{
  content:""; position:absolute; z-index:1; inset:-14px -14px 14px -14px;
  border:1px solid var(--nude); border-radius:232px 232px 34px 34px;
  pointer-events:none;
}
.scene-medaille{
  position:absolute; z-index:2; left:-26px; bottom:34px;
  background:var(--blanc); border:1px solid var(--sable);
  border-radius:18px; padding:14px 20px; text-align:center;
  box-shadow:0 14px 34px rgba(69,57,48,.16);
}
.scene-medaille b{
  display:block; font-family:'Playfair Display',serif;
  font-size:1.5rem; line-height:1; color:var(--brun);
}
.scene-medaille span{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:#6d6258;                       /* 5.32:1 sur blanc : #8a7e72 tombait a 3.96 */
}
@media(max-width:880px){
  .scene-grille{grid-template-columns:1fr; gap:36px}
  .scene-cadre img{aspect-ratio:3/4}
  .scene-medaille{left:auto; right:14px; bottom:-18px}
}

/* --- 4. Le panel : tout le catalogue visible d'un coup ------------------- */

.panel{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;
  margin:0 0 10px;
}
@media(min-width:1100px){ .panel{grid-template-columns:repeat(4,1fr)} }

.tuile{
  position:relative;
  display:block;
  min-height:290px;
  border-radius:18px;
  overflow:hidden;
  color:#fff;
  text-decoration:none;
  isolation:isolate;
  box-shadow:0 12px 30px rgba(60,40,24,.16);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.tuile:hover,.tuile:focus-visible{
  transform:translateY(-7px);
  box-shadow:0 20px 44px rgba(60,40,24,.26);
}
.tuile img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.tuile:hover img{transform:scale(1.07)}
.tuile::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(24,18,14,.14) 8%, rgba(24,18,14,.52) 54%, rgba(24,18,14,.88));
}
.tuile-texte{
  position:absolute; left:0; right:0; bottom:0;
  padding:20px 20px 22px;
}
.tuile-mot{
  display:block;
  font-size:clamp(1.24rem,2.4vw,1.6rem);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1.12;
  margin:0 0 6px;
  text-shadow:0 2px 16px rgba(0,0,0,.55);
}
.tuile-mot small{
  display:block;
  font-size:.52em;
  font-weight:500;
  letter-spacing:.16em;
  opacity:.86;
  margin-bottom:4px;
}
.tuile-dit{
  margin:0;
  font-size:.94rem;
  line-height:1.5;
  color:rgba(255,255,255,.93);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}

/* --- 5. La liste rapide : le panel en 12 lignes -------------------------- */

.rapide{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:10px 26px;
  margin:22px 0 0;
  padding:0;
  list-style:none;
}
.rapide li{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid rgba(120,92,60,.18);
  font-size:1rem;
}
.rapide li::before{
  content:"";
  flex:0 0 9px; height:9px;
  border-radius:50%;
  background:var(--or,#d99f3f);
  transform:translateY(-1px);
}
.rapide b{font-weight:650}

/* --- 6. Petites finitions ------------------------------------------------ */

.duo{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  align-items:center;
}
@media(min-width:880px){ .duo{grid-template-columns:1.05fr .95fr; gap:40px} }
.duo figure{margin:0}
.duo figure img{
  width:100%; height:auto;
  border-radius:16px;
  box-shadow:0 14px 34px rgba(60,40,24,.18);
}
.duo figcaption{
  margin-top:9px;
  font-size:.88rem;
  opacity:.75;
  text-align:center;
}

.chiffres{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;
  margin:26px 0 0;
  padding:0;
  list-style:none;
  text-align:center;
}
.chiffres li{
  padding:18px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(120,92,60,.16);
}
.chiffres b{
  display:block;
  font-size:1.7rem;
  line-height:1.1;
  color:var(--terre,#7a4c28);
}
.chiffres span{font-size:.9rem; opacity:.82}

/* --- 7. Mouvement reduit : tout se fige proprement ----------------------- */

@media(prefers-reduced-motion:reduce){
  .mots li:hover{transform:none}
  .tuile,.tuile img{transition:none}
}