/* ═══════════════════════════════════════════════════════════════════
   ACCUEIL — blocs propres à la page d'accueil
   Dépend de : tokens.css, base.css, nav.css, theme.css

   SOMMAIRE
   01. Hero
   02. Manifeste
   03. Galerie
   04. Newsletter
   05. Responsive
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01. HERO ───────────────────────────────────────────────────────
   Un seul point d'entrée : le nom. Le reste est subordonné.      */
.hero {
  position: relative;
  height: 100svh;
  min-height: 60rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
}

.hero-media,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile : garantit le contraste du texte quelle que soit l'image */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,0.45) 32%,
      rgba(0,0,0,0.12) 62%,
      rgba(0,0,0,0.20) 100%),
    linear-gradient(to right,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.00) 55%);
}

.hero-inner {
  position: relative;
  width: 100%;
  padding-bottom: clamp(4.8rem, 6vw, 8rem);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-end;
  gap: var(--s-7);
}

.hero-eyebrow {
  margin-bottom: var(--s-5);
  color: var(--c-on-dark-soft);
}

.hero-name {
  font-size: var(--fs-display);
  font-weight: var(--fw-normal);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--c-on-dark);
}

.hero-lead {
  max-width: 52rem;
  margin-top: var(--s-6);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--c-on-dark-soft);
}

/* Bouton son — discret, aligné sur la ligne de base du titre */
.sound-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-on-dark-soft);
  white-space: nowrap;
  transition: color var(--t);
}
.sound-btn:hover { color: var(--c-on-dark); }

.sound-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}


/* ── 02. MANIFESTE ──────────────────────────────────────────────────
   La citation d'abord, les images ensuite. Un seul niveau de titre. */
.manifesto-quote {
  max-width: 92rem;
  margin-bottom: var(--s-9);
}

.manifesto-quote .eyebrow { margin-bottom: var(--s-5); }

.manifesto-quote blockquote {
  font-size: var(--fs-h1);
  font-weight: var(--fw-normal);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
}

.manifesto-quote em { font-style: italic; }

.manifesto-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

figure img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--c-surface);
}

figure figcaption {
  margin-top: var(--s-4);
  font-size: var(--fs-caption);
  color: var(--c-ink-soft);
}


/* ── 03. GALERIE ────────────────────────────────────────────────────
   Six images, grille régulière. Le reste vit sur la page Galerie. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.gallery-grid img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--c-page);
}


/* ── 04. NEWSLETTER ─────────────────────────────────────────────────*/
.newsletter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: start;
}

.newsletter-text .h2      { max-width: 44rem; }
.newsletter-text .eyebrow { margin-bottom: var(--s-4); }
.newsletter-text .lead    { margin-top: var(--s-4); }

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.field {
  width: 100%;
  padding: var(--s-4) 0;
  border: none;
  border-bottom: 1px solid var(--c-line);
  background: none;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--c-ink);
  transition: border-color var(--t);
}
.field::placeholder { color: var(--c-ink-soft); }
.field:focus {
  outline: none;
  border-bottom-color: var(--c-ink);
}

.submit {
  align-self: flex-start;
  margin-top: var(--s-3);
  padding: var(--s-4) var(--s-6);
  background: var(--c-ink);
  color: var(--c-page);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--t);
}
.submit:hover { opacity: 0.82; }


/* ── 05. RESPONSIVE ─────────────────────────────────────────────────
   Trois paliers. La typographie suit déjà par clamp() ; on ne change
   ici que la structure des grilles.                              */

@media (max-width: 900px) {
  .hero-inner,
  .newsletter-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .manifesto-figures { grid-template-columns: repeat(2, 1fr); }
  .manifesto-figures figure:last-child { display: none; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .manifesto-figures { grid-template-columns: 1fr; }
  .manifesto-figures figure:nth-child(n+2) { display: none; }
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ── 00. LOADER ─────────────────────────────────────────────────────
   Écran de chargement plein écran, glisse vers le haut une fois la
   page chargée.                                                    */
.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-ink);
  transition: transform calc(var(--dur-base) * 4) ease;
}

.loader--hidden {
  transform: translateY(-100%);
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loader-window {
  position: relative;
  /* Le minimum passe de 28rem à 18rem pour être nettement plus petit sur téléphone */
  width: clamp(18rem, 60vw, 42rem);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: var(--s-6);
}

.loader-strip {
  height: 400%;
  /* "forwards" indique de rester figé sur la dernière image (évite de voir la boucle repartir) */
  animation: loaderWipe 4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.loader-strip img {
  display: block;
  width: 100%;
  height: 25%;
  object-fit: cover;
}

.loader-name {
  font-family: var(--font);
  font-size: var(--fs-h1);
  font-weight: var(--fw-normal);
  letter-spacing: var(--tr-title);
  color: var(--c-on-dark);
  margin: 0 0 var(--s-3) 0;
}

.loader-footer {
  width: 100%;
  max-width: 52rem;
  padding: 0 var(--s-4);
  text-align: center;
}

.loader-footer p {
  color: var(--c-on-dark-soft);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: var(--lh-body);
  margin: 0;
}

@keyframes loaderWipe {
  0%, 15%   { transform: translateY(0%); }
  28%, 43%  { transform: translateY(-25%); }
  56%, 71%  { transform: translateY(-50%); }
  84%, 100% { transform: translateY(-75%); }
}

/* ── 00.1 AJUSTEMENTS MOBILE DU LOADER ────────────────────────────── */
@media (max-width: 560px) {
  .loader-name {
    /* Le nom prend beaucoup plus de place sur mobile */
    font-size: clamp(2.4rem, 10vw, 4rem); 
  }
  
  .loader-footer p {
    /* Le texte descriptif devient encore plus petit */
    font-size: 0.65rem; 
  }
}