/* ─────────────────────────────────────────────────────────────────────────────
   public/css/hero-section.css
   Hero d'atterrissage de section — bandeau typographique avec illustration.

   Une seule structure pour les pages de section : bandeau clair sur `--paper-2`
   fermé par un filet, texte aligné à gauche (surtitre, titre, chapô), ligne de
   chiffres facultative sous un filet, et une zone d'illustration à droite.

   Balisage complet :
     <section class="hero-sec">
       <div class="hero-sec-in">
         <div class="hero-sec-txt">
           <p class="hero-sec-eyebrow">Initiative · 2017–2019</p>
           <h1 class="hero-sec-h1">…</h1>
           <p class="hero-sec-lede">…</p>
           <ul class="hero-figs">                    ← facultatif
             <li><strong>63</strong><span>rendez-vous</span></li>
           </ul>
         </div>
         <figure class="hero-sec-media">            ← facultatif
           <img src="…" alt="">
         </figure>
       </div>
     </section>

   Les deux blocs de droite et du bas sont FACULTATIFS et se retirent
   proprement :
     — sans <figure>, le texte occupe toute la largeur (`:has()` fait bascule) ;
     — sans <ul>, le filet des chiffres disparaît avec lui.
   Ne jamais laisser une <figure> vide : un cadre gris est pire que pas d'image.

   L'illustration est décorative — le sens est porté par le titre et le chapô.
   D'où `alt=""` : un lecteur d'écran doit l'ignorer, pas décrire une photo qui
   n'ajoute rien. Si une image devenait porteuse d'information, lui écrire un
   vrai `alt` et la sortir de ce composant.
   ───────────────────────────────────────────────────────────────────────── */

.hero-sec {
  background: var(--paper-2);
  border-bottom: 2px solid var(--rule);
  padding: 52px 0 48px;
}

.hero-sec-in {
  display: grid;
  gap: 48px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Deux colonnes seulement s'il y a une illustration. Sinon le texte prend toute
   la largeur et le bandeau redevient purement typographique. */
.hero-sec-in:has(.hero-sec-media) { grid-template-columns: 1.15fr 1fr; }

.hero-sec-eyebrow {
  font-family: var(--f-mono, var(--f-body));
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
  margin: 0;
}

.hero-sec-h1 {
  font-family: var(--f-display);
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 12px 0 16px;
  max-width: 20ch;
}

.hero-sec-lede {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 27px;
  color: var(--ink-2);
  max-width: 58ch;
  margin: 0;
}

/* Ligne de chiffres. Absente des sections qui n'ont rien à compter. Ne jamais y
   mettre un nombre approximatif — ces chiffres sont lus comme des faits. */
.hero-figs {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  list-style: none;
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--rule);
}

.hero-figs li { line-height: 1.35; }

.hero-figs strong {
  display: block;
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ink);
}

.hero-figs span {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--ink-3);
}

/* Illustration : cadrée en 4/3, filet fin comme les autres cartes du site.
   `object-fit: cover` pour qu'une image de n'importe quel rapport se recadre
   sans se déformer — les dimensions du fichier n'ont donc pas à être connues. */
.hero-sec-media {
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  overflow: hidden;
  background: var(--paper);
}

.hero-sec-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Variante portrait — `<figure class="hero-sec-media hero-sec-media--portrait">`.
   Une affiche ou une capture d'écran est un objet composé : la recadrer en 4/3
   la mutile, on perd le titre en haut ou les mentions en bas. Le cadre épouse
   donc les proportions de l'image, qui s'affiche entière et centrée, avec une
   hauteur plafonnée pour que le bandeau ne s'étire pas.
   Réservé aux images portrait : une photo paysage se recadre très bien et n'a
   rien à faire ici. */
.hero-sec-media--portrait {
  aspect-ratio: auto;
  border: 0;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-sec-media--portrait img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
  border: 1px solid var(--rule);
}

/* Sans filet — `hero-sec-media--sans-cadre`. Pour une image qui porte déjà son
   propre encadrement, comme une affiche : le filet du composant en ajoutait un
   second, à quelques pixels du premier. Une capture d'interface, elle, garde le
   sien : sans lui elle se confondrait avec le fond du bandeau. */
.hero-sec-media--sans-cadre img { border: 0; }

/* ── Carrousel d'affiches ──────────────────────────────────────────────────
   Diaporama en fondu, utilisé par museumweek.html pour dérouler les treize
   éditions dans l'ordre chronologique.

     <figure class="hero-sec-media hero-affiches">
       <img src="…/2014.jpg" alt="Affiche MuseumWeek 2014" class="on">
       <img src="…/2015.jpg" alt="Affiche MuseumWeek 2015" loading="lazy">
       …
     </figure>

   Les affiches n'ont pas toutes le même rapport — de 1,69 pour le logotype de
   2014 à 0,67 pour 2015 — d'où `object-fit: contain` : chacune s'inscrit
   entière dans le cadre commun, sans déformation ni recadrage. Le cadre est
   dimensionné en hauteur, la largeur suit la colonne.

   L'enchaînement est piloté par /js/affiches-carrousel.js. La classe `on`
   marque l'affiche visible ; tout le reste est du fondu CSS. Sans JavaScript,
   la première affiche reste affichée : le bandeau ne se vide jamais. */
.hero-affiches {
  position: relative;
  height: 520px;
  aspect-ratio: auto;
  border: 0;
  background: none;
  margin: 0;
}

.hero-affiches img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  opacity: 0;
  transition: opacity .9s ease-in-out;
}

.hero-affiches img.on { opacity: 1; }

/* Mouvement réduit : plus de fondu, et le script cesse de faire défiler —
   une image qui change toute seule est exactement ce que ce réglage refuse. */
@media (prefers-reduced-motion: reduce) {
  .hero-affiches img { transition: none; }
}

@media (max-width: 900px) {
  .hero-affiches { height: 380px; }
}

@media (max-width: 767px) {
  .hero-affiches { height: 320px; }
}

/* Sous 900px la colonne d'image devient trop étroite pour illustrer quoi que ce
   soit : on repasse en une colonne, l'image sous le texte, en bandeau large et
   court pour ne pas repousser le contenu. */
@media (max-width: 900px) {
  .hero-sec-in:has(.hero-sec-media) { grid-template-columns: 1fr; }
  .hero-sec-in { gap: 28px; }
  .hero-sec-media { aspect-ratio: 16 / 7; }
}

@media (max-width: 767px) {
  .hero-sec { padding: 34px 0 32px; }
  .hero-sec-in { padding: 0 16px; }
  .hero-sec-lede { font-size: 15px; line-height: 24px; }
  .hero-figs { gap: 22px 28px; margin-top: 20px; padding-top: 16px; }
  .hero-figs strong { font-size: 22px; }
}