/* ═══════════════════════════════════════════════════════════════
   TEST — refonte éditoriale de la page d'accueil
   Ce fichier n'est chargé QUE par index.html : rien ici ne touche
   aux 9 autres pages. Si le test est validé, ces règles seront
   fusionnées dans style.css et étendues au reste du site ; sinon
   il suffit de retirer la balise <link> pour tout annuler.
   ═══════════════════════════════════════════════════════════════ */

/* Voix italique du héro : auto-hébergée comme Instrument Sans/Space
   Mono (même raison : RGPD — aucune requête vers fonts.gstatic.com).
   Un seul poids italique, réservé à la phrase qui répond au nom dans
   le héro — jamais au texte courant, jamais en position verticale :
   c'est le contraste avec le sans-serif qui crée l'effet "deux voix". */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-500-italic-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
}

/* ── Héro : la photo occupe tout l'écran, le texte se pose dessus ─── */

.hero {
  position: relative;
  /* Remonte sous le bandeau du haut, qui est devenu du verre dépoli : la
     photo part du bord haut de l'écran et se devine à travers lui, au
     lieu de commencer sous une barre noire. Le texte du héro étant ancré
     en bas (align-items: flex-end), rien ne finit caché sous le bandeau. */
  margin-top: calc(-1 * var(--header-h));
  /* svh = hauteur RÉELLEMENT visible sur mobile (barres du navigateur
     comprises) ; en vh, les 76px du bandeau qu'on vient de récupérer
     repousseraient "Défiler" sous le pli sur iPhone. La ligne vh reste
     pour les navigateurs qui ignorent svh. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cadrage calculé, pas réglé à l'œil. Le regard (entre les deux yeux)
     est à 45,5 % / 28 % DANS la photo d'origine. Sur mobile, la photo
     déborde en largeur de 1264px pour 390px visibles : pour amener ce
     point pile au milieu de l'écran, il faut
     (0,5 × 390 − 0,455 × 1264) / (390 − 1264) = 43,5 %.
     La valeur verticale, elle, ne change presque rien : la photo est
     quasi à la bonne hauteur dans les deux formats, il n'y a donc
     presque rien à couper en haut ni en bas — le regard reste dans le
     tiers supérieur, au-dessus du bloc de texte. */
  object-position: 43.5% 28%;
  display: block;
}

/* Voile sombre en deux dégradés superposés : l'un du bas vers le haut
   (pour que le texte, posé en bas, reste lisible sans manger toute la
   photo), l'autre en diagonale côté gauche (où vit le bloc de texte) —
   pas un aplat uniforme, qui écraserait la photo plutôt que de
   simplement protéger la lecture. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Assombrissement du haut de la photo, sous le bandeau translucide.
       C'est la PHOTO qu'on assombrit, pas le bandeau : ce dernier peut
       ainsi rester très transparent (l'effet que Loïc veut voir), pendant
       que les liens de nav gardent un fond assez sombre pour tenir 4,5:1
       — le mur ensoleillé et le bâton jaune les laissaient sinon à
       2,6:1. Le dégradé se prolonge sous le bandeau et s'éteint vers
       22 % : la transition se lit comme un vignettage de l'image, pas
       comme la barre d'un bandeau posé dessus. */
    linear-gradient(180deg, rgba(10, 10, 12, 0.6) 0%, rgba(10, 10, 12, 0.5) 10%, transparent 22%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10, 10, 12, 0.78) 28%, rgba(10, 10, 12, 0.18) 55%, transparent 78%),
    linear-gradient(100deg, rgba(10, 10, 12, 0.6) 0%, transparent 48%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 620px;
  width: 100%;
  padding: 8vh 2.5rem 9vh;
  margin: 0;
}

/* Titre du héro : chaque mot glisse depuis le bas de sa propre ligne
   de base, comme une légende qui remonte à l'écran — l'ancienne
   apparition en cascade (hero-rise) s'applique encore aux autres
   éléments du héro, seul le h1 a sa propre animation ci-dessous. */
.hero-content h1 {
  animation: none;
  opacity: 1;
  transform: none;
}

.hero-title-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.hero-title-word > span {
  display: inline-block;
  transform: translateY(115%);
  animation: hero-word-rise 1.4s var(--ease-reveal) forwards;
}

.hero-title-word:nth-child(1) > span { animation-delay: 0.15s; }
.hero-title-word:nth-child(2) > span { animation-delay: 0.35s; }

@keyframes hero-word-rise {
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-word > span {
    animation: none;
    transform: none;
  }
}

/* Deuxième voix du titre : le nom reste dans la grotesque en gras
   (--font-sans, inchangé) ; cette phrase répond juste en dessous dans
   la serif italique — c'est le contraste des deux écritures qui crée
   l'effet, pas une couleur ou une taille différente. */
.hero-voice-two {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-lead);
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--ink-soft);
  max-width: var(--measure-lead);
  margin-bottom: 0;
}

/* Le héro est passé en display:flex (voir plus haut) pour ancrer le
   texte en bas de la photo — sans cette règle, "Défiler" deviendrait
   un deuxième item de cette rangée flex, poussé sur le côté au lieu
   de rester centré en bas. Position absolue = détaché du flux, donc
   indifférent à la disposition du bloc de texte à côté. */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  z-index: 2;
}

@media (max-width: 900px) {
  .hero-content {
    max-width: none;
    padding: 8vh 1.5rem 9vh;
  }
  .hero-scroll-cue {
    bottom: 1.5vh;
  }
}

/* Sur téléphone, le héro se lit comme une affiche : tout centré. Un
   alignement à gauche a besoin d'une colonne vide en face pour se lire
   comme un choix ; sur 390px de large, cette colonne n'existe plus et
   le bloc paraît simplement décalé. */
@media (max-width: 600px) {
  .hero-content {
    text-align: center;
  }

  /* Le surtitre est une rangée flex terminée par un trait qui s'étire.
     Centré, il lui faut le même trait de l'autre côté pour rester
     symétrique — exactement le traitement des en-têtes de page projet. */
  .hero-content .eyebrow {
    justify-content: center;
  }

  .hero-content .eyebrow::before {
    content: "";
    flex: 1;
    max-width: 3rem;
    height: 1px;
    background: linear-gradient(270deg, var(--border), transparent);
  }

  .hero-content .eyebrow::after {
    flex: 1;
    max-width: 3rem;
  }

  /* Ce paragraphe a une largeur max (mesure de lecture) : sans marges
     auto, "text-align: center" centrerait le texte DANS un bloc resté
     collé à gauche. */
  .hero-voice-two {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Bandeau du haut : transparence totale tant qu'on n'a pas défilé ──
   Sur les autres pages, le bandeau reste en verre dépoli même en haut
   (voile + flou) car il n'y a pas de photo plein écran dessous à montrer.
   Ici si : le héro occupe tout l'écran, et Loïc veut voir SA photo à
   travers le bandeau, pas un voile qui l'atténue. On annule donc entièrement
   le pseudo-élément ::before (voile, flou, filet) — la lisibilité du menu
   sur cette photo précise est un compromis assumé, pas oublié. */
.site-header::before {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* Dès qu'on défile, le bandeau redevient identique aux autres pages
   (mêmes valeurs que .site-header::before dans style.css) : il n'y a
   plus de photo plein écran juste derrière, la transparence totale n'a
   plus de raison d'être. */
.site-header.is-scrolled::before {
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.62) 0%, rgba(10, 10, 12, 0.46) 100%);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 -1px 0 rgba(255, 206, 160, 0.32);
}

/* ── Films rapproché d'À propos : les deux se lisent comme un seul bloc
   de présentation (le portrait, puis les films) avant que le portfolio
   ne prenne le relais — pas besoin d'autant de respiration entre eux
   qu'entre les grandes sections qui suivent. On resserre les deux côtés
   de la jointure (bas d'À propos ET haut de Films) : ne réduire qu'un
   seul des deux aurait laissé presque tout l'espacement d'origine, la
   respiration entre sections venant des deux paddings additionnés. */
#about {
  padding-bottom: calc(var(--space-section) * 0.3);
}

#film {
  padding-top: calc(var(--space-section) * 0.3);
}

/* ── Sections Projets & Livres : même traitement éditorial ─────────
   Colonnes égales, même ratio de photo, même hauteur : les deux
   voyages (Projets) et les deux livres (Livres) ont chacun le même
   poids éditorial, pas de hiérarchie artificielle entre eux. Pas de
   fond ni de bordure de carte (contrairement à la vraie boutique
   Livres, qui garde ses cartes nettes pour rester claire à l'achat) :
   juste la photo et son texte — vu d'un coup d'œil, sans carrousel. */
#projets .book-grid,
#livres .book-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 3rem;
}

#projets .book-grid {
  max-width: 1100px;
}

#projets .book-card,
#livres .book-card {
  background: none;
  border: none;
  padding: 0;
  transition: transform 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  #projets .book-card:has(.book-link:hover),
  #livres .book-card:has(.book-link:hover) {
    border-color: transparent;
    transform: translateY(-4px);
  }
}

#projets .book-cover,
#livres .book-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.6);
}

@media (max-width: 700px) {
  #projets .book-grid,
  #livres .book-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ── Carrousel films : un peu plus grand, un peu plus de présence ─── */

.film-carousel-slide {
  border-radius: 12px;
}

.film-carousel-slide.is-active {
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55);
}

/* ── "Ce qui me fait vibrer" (ex-Portfolio) ──────────────────────────
   Remplace l'ancien carrousel React (une photo à la fois, classée par
   thème générique — Hommes, Femmes, Turbans...). Cinq moments "signature"
   en pleine largeur, chacun avec une vraie phrase déjà écrite ailleurs
   sur le site (jamais inventée) et un lien vers la page qui en parle
   davantage — le portfolio devient une porte d'entrée vers le reste du
   site plutôt qu'un catalogue fermé sur lui-même. */
.signature-stories {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.signature-story {
  position: relative;
  display: block;
  /* Repassé de 62vh à 34vh : 5 blocs quasi plein écran à la suite
     prenaient trop de place sur l'accueil (remarqué par Loïc) — l'effet
     "grande photo" reste, mais la section entière tient maintenant dans
     une hauteur raisonnable au lieu d'occuper trois écrans. */
  height: 34vh;
  min-height: 260px;
  max-height: 380px;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 1rem;
  text-decoration: none;
}

.signature-story img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-reveal);
}

@media (hover: hover) and (pointer: fine) {
  .signature-story:hover img {
    transform: scale(1.03);
  }
}

.signature-story::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.2) 100%);
}

.signature-story:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 4px;
}

.signature-story-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 2rem 2rem 2.25rem;
  max-width: 40rem;
}

.signature-story-caption .eyebrow {
  margin-bottom: 0.6rem;
}

.signature-story-caption p:not(.eyebrow) {
  color: var(--ink);
  font-size: var(--text-lead);
  line-height: 1.4;
  text-wrap: balance;
}

.signature-story-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--w-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  transition: color 0.2s ease, gap 0.2s ease;
}

.signature-story:hover .signature-story-link,
.signature-story:focus-visible .signature-story-link {
  color: var(--accent-1);
  gap: 0.6rem;
}

@media (max-width: 700px) {
  .signature-story {
    height: 42vh;
    min-height: 280px;
    max-height: 340px;
  }
  .signature-story-caption {
    padding: 1.5rem;
  }
  .signature-story-caption p:not(.eyebrow) {
    font-size: var(--text-body);
  }
}