/* Galerie élastique de l'accueil (section .lu-elastic-section).
   Couleurs : uniquement les tokens du site (site.css), alias locaux ci-dessous.
   Le comportement (survol, focus, tactile, entrée au scroll) est dans src/motion/elastic.js. */

.lu-elastic-section {
  --eg-primary: var(--ink);
  --eg-accent: var(--gold);
  --eg-surface: var(--paper);
  --eg-muted: var(--muted);
  --eg-on-photo: var(--paper);
  --eg-ease: cubic-bezier(.25, 1, .5, 1);
  background: var(--eg-surface);
  color: var(--eg-primary);
  padding: 128px 7%;
}

/* En-tête asymétrique : titre à gauche, texte et lien calés en bas à droite */
.lu-elastic-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: 48px;
  margin-bottom: 64px;
}
.lu-elastic-section .lu-kicker {font-size: 14px; color: var(--eg-muted); margin-bottom: 24px}
.lu-elastic-section h2 {font-family: var(--serif); margin: 0}
.lu-elastic-section h2 .handwritten {color: color-mix(in srgb, var(--eg-accent) 55%, var(--eg-primary))}
.lu-elastic-head p {font-size: 16px; line-height: 1.5; color: var(--eg-muted); margin: 0 0 24px; max-width: 420px}

/* Accordéon */
.lu-elastic {
  display: flex;
  gap: 16px;
  height: 600px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lu-elastic-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--eg-primary);
  transition: flex .7s var(--eg-ease);
}
.lu-elastic-item.is-active {flex-grow: 4}

.lu-elastic-link {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--eg-on-photo);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.lu-elastic-link:focus-visible {outline: 2px solid var(--eg-accent); outline-offset: -6px}

.lu-elastic-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  /* Assombrir la photo seule, pour garder les libellés nets */
  filter: brightness(.5);
  transition: transform 1s var(--eg-ease), filter .7s var(--eg-ease);
}
.lu-elastic-item:hover img {filter: brightness(.7)}
.lu-elastic-item.is-active img {transform: scale(1); filter: none}

/* Voile de lisibilité, teinté avec l'encre du site */
.lu-elastic-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--eg-primary) 85%, transparent), color-mix(in srgb, var(--eg-primary) 15%, transparent) 50%, transparent);
  opacity: 0;
  transition: opacity .5s ease;
}
.lu-elastic-item.is-active .lu-elastic-link::after {opacity: 1}

/* Contenu du panneau ouvert */
.lu-elastic-copy {
  position: absolute;
  z-index: 1;
  left: 32px;
  right: 32px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .5s ease, transform .5s var(--eg-ease);
}
.lu-elastic-item.is-active .lu-elastic-copy {opacity: 1; transform: none; transition-delay: .2s}
.lu-elastic-tag {
  font: 600 14px/1.5 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--eg-on-photo) 45%, transparent);
  border-radius: 999px;
}
.lu-elastic-title {font: 400 32px/var(--title-leading) var(--serif); max-width: 16ch; letter-spacing: var(--title-tracking); text-transform: uppercase}
.lu-elastic-cta {
  margin-top: 16px;
  font: 600 14px/1.5 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--eg-accent);
  padding-bottom: 8px;
}

/* Libellé des panneaux fermés : titre vertical (desktop), numéro (mobile) */
.lu-elastic-label {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  font: 500 24px/1.2 var(--serif);
  white-space: nowrap;
  transition: opacity .5s ease .4s;
}
.lu-elastic-label span:first-child {display: block; writing-mode: vertical-rl; transform: rotate(180deg)}
.lu-elastic-label span:last-child {display: none}
.lu-elastic-item.is-active .lu-elastic-label {opacity: 0; transition-delay: 0s; transition-duration: .2s}

@media (max-width: 1000px) {
  .lu-elastic-title {font-size: 24px}
  .lu-elastic-label {font-size:20px;font:400 24px/1.2 var(--serif)}
}

@media (max-width: 760px) {
  .lu-elastic-section {padding: 64px 24px}
  .lu-elastic-head {grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px}
  .lu-elastic-section h2 {}
  .lu-elastic-section h2 .handwritten {}
  .lu-elastic {flex-direction: column; gap: 8px; height: 560px}
  .lu-elastic-copy {left: 16px; right: 16px; bottom: 16px}
  .lu-elastic-tag {font-size: 14px; padding: 0 8px}
  .lu-elastic-title {font-size: 20px}
  .lu-elastic-cta {margin-top: 8px}
  .lu-elastic-label {top: 50%; bottom: auto; transform: translate(-50%, -50%); font: 400 24px/1.2 var(--serif); letter-spacing: .12em}
  .lu-elastic-label span:first-child {display: none}
  .lu-elastic-label span:last-child {display: block}
}

/* Entrée au scroll : panneaux masqués jusqu'à l'animation (seulement si motion actif) */
html.motion .lu-elastic:not([data-revealed]) > li {opacity: 0}

/* Mouvement réduit : l'accordéon change d'état instantanément */
@media (prefers-reduced-motion: reduce) {
  .lu-elastic-item,
  .lu-elastic-item img,
  .lu-elastic-link::after,
  .lu-elastic-copy,
  .lu-elastic-label {transition: none !important}
  .lu-elastic-item img {transform: none}
}