/* ==========================================================================
   À propos (maquette validée apropos-v2)
   Mon nom en très grand avec ma photo détourée entre les deux mots, puis « Avant les sites »
   (l'affiche de CLESS Project et la boucle du trailer), « Aujourd'hui » sur le ciel, et la fin sur Genève.
   Classe posée sur <html> par a-propos.js : « film » (sections qui restent en place, ciel).
   Sans « film » (moins de mouvement, script en panne) : tout s'affiche à la suite, sur la nuit.
   ========================================================================== */

/* Le décor : la nuit pour faire connaissance, puis le ciel pour aujourd'hui (Genève vient de la fin commune) */
.decor { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: var(--nuit); }
.decor > * { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; }
.decor__brume { background: rgb(242 244 248 / .42); }
html:not(.film) .decor { display: none; }

/* En haut : mon nom en très grand, et ma photo détourée entre les deux mots. « Hugo » passe derrière moi, « Delaroque. » devant. */
.entete { position: relative; z-index: 4; }
.entete__scene { position: relative; height: 100vh; min-height: 620px; overflow: clip; }
.entete h1 { margin: 0; font-weight: 600; }
.entete h1 span { position: absolute; display: block; white-space: nowrap; line-height: 1.05; }
.entete__intro { left: var(--gouttiere); top: 14vh; z-index: 1; font-size: clamp(1.1rem, 1.6vw, 1.5rem); letter-spacing: -.02em; color: var(--gris); }
.entete__prenom { left: 22px; top: calc(14vh + 1.6rem); z-index: 1; font-size: clamp(6rem, 22vw, 20rem); letter-spacing: -.06em; }
.entete__famille { right: var(--gouttiere); bottom: 13vh; z-index: 3; font-size: clamp(3.4rem, 13vw, 12.5rem); letter-spacing: -.055em; }
/* Le bas de la photo se fond dans la nuit, pour qu'on ne voie pas qu'elle est coupée (demande de Marco) */
.entete__photo { position: absolute; z-index: 2; bottom: 0; left: 32.5vw; height: 94vh; width: auto; max-width: none; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 97%); mask-image: linear-gradient(to bottom, #000 70%, transparent 97%); }
.entete__texte { position: absolute; z-index: 3; right: var(--gouttiere); top: 24vh; width: min(26vw, 340px); margin: 0; font-size: 17px; line-height: 1.55; color: var(--doux); }
.entete__texte span { display: block; }
/* Le nom monte à l'arrivée. Si le script ne démarre jamais, il s'affiche au bout de 4 s. */
html.anime .entete h1, html.anime .entete__texte { visibility: hidden; }
html.anime:not(.film) .entete h1, html.anime:not(.film) .entete__texte { animation: titre-secours 0s linear 4s forwards; }
@keyframes titre-secours { to { visibility: visible; } }

/* Avant les sites : l'affiche de CLESS Project à gauche, le texte puis la boucle du trailer à droite */
.studio { position: relative; z-index: 4; height: 100vh; display: grid; grid-template-columns: min(54vw, 780px) min(34vw, 460px); grid-template-rows: auto auto; justify-content: space-between; align-content: center; column-gap: 32px; row-gap: 26px; padding: 80px var(--gouttiere) 92px; }
.studio__media { grid-column: 1; grid-row: 1 / span 2; align-self: end; margin: 0; }
.studio .cadre { overflow: hidden; border-radius: 12px; background: #1a1d24; }
.studio__media .cadre { aspect-ratio: 1060 / 596; }
.studio__media img { width: 100%; height: 100%; object-fit: cover; }
.studio figcaption { margin-top: 12px; font-size: 14px; color: var(--doux); }
.studio__texte { grid-column: 2; grid-row: 1; align-self: end; }
.studio__texte p:last-child { margin-bottom: 0; }
/* La boucle du trailer : des images du jeu, sans le son */
.studio__trailer { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
.studio__trailer .cadre { position: relative; aspect-ratio: 16 / 9; }
.studio__trailer video { width: 100%; height: 100%; object-fit: cover; }
/* Avertissement demandé par Marco : la boucle commence floue, le temps de lire le message, puis devient nette */
.studio__trailer .avertissement { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px 24px; background: rgb(12 13 16 / .45); color: var(--clair); font-size: 16px; font-weight: 600; line-height: 1.4; text-align: center; pointer-events: none; }
html.film .studio__trailer video { filter: blur(14px); transform: scale(1.08); }
.studio h2 { margin: 0 0 22px; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.02; letter-spacing: -.045em; }
.studio p { margin: 0 0 18px; font-size: 19px; line-height: 1.55; color: var(--doux); }

/* Aujourd'hui : sur le ciel, en texte foncé, mot à mot comme sur l'accueil */
.aujourdhui { position: relative; z-index: 4; max-width: 1100px; margin: 0 auto; padding: 26vh var(--gouttiere) 40vh; color: var(--encre); }
.aujourdhui h2 { margin: 0 0 24px; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.03em; }
.aujourdhui .grand { margin: 0 0 40px; font-size: clamp(1.9rem, 3.6vw, 3.6rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 600; }
.aujourdhui .grand .mot { opacity: .16; }
.aujourdhui .zone { margin: 0; max-width: 44ch; font-size: 19px; line-height: 1.55; color: rgb(14 23 38 / .78); }
.aujourdhui :focus-visible { outline-color: var(--encre); }

@media (max-width: 860px) {
  /* Sur téléphone, le nom et la photo remplissent l'écran, le texte vient juste dessous */
  .entete__scene { height: 100svh; min-height: 560px; }
  .entete__intro { top: 92px; }
  .entete__prenom { left: 10px; top: 112px; font-size: 34vw; }
  .entete__famille { left: var(--gouttiere); right: auto; bottom: 116px; font-size: 17.5vw; }
  .entete__photo { left: 50%; height: 80svh; translate: -50% 0; }
  .entete__texte { position: static; width: auto; padding: 40px var(--gouttiere) 72px; }
  /* Sur téléphone, le trailer se découvre par-dessus l'affiche, dans le même cadre */
  .studio { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: stretch; row-gap: 0; padding: 84px var(--gouttiere) 104px; }
  .studio__media, .studio__trailer { grid-column: 1; grid-row: 1; align-self: start; }
  .studio__trailer { z-index: 1; }
  .studio__texte { grid-column: 1; grid-row: 2; align-self: end; }
  .studio h2 { margin-bottom: 14px; }
  .studio p { font-size: 17px; }
  .aujourdhui { padding: 20vh var(--gouttiere) 18vh; }
}

/* Sans mise en scène (moins de mouvement, script en panne) : les images en place, sur la nuit */
html:not(.film) .studio { display: block; height: auto; padding: 0 0 12vh; }
html:not(.film) .studio__texte { max-width: 640px; margin: 0 auto; padding: 8vh var(--gouttiere) 0; }
html:not(.film) .studio__media { max-width: 780px; margin: 0 auto; padding: 0 var(--gouttiere); }
html:not(.film) .studio__trailer { max-width: 704px; margin: 32px auto 0; padding: 0 var(--gouttiere); }
html:not(.film) .aujourdhui { color: var(--clair); }
html:not(.film) .aujourdhui .zone { color: var(--doux); }
html:not(.film) .aujourdhui :focus-visible { outline-color: var(--clair); }