/* home.css — page d'accueil : hero (titre + image de fond, parallax piloté
   en JS, voir js/hero.js), sections About/My style/My work. */

.home-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 64px; /* compense le header, fixed et visible sur la home aussi */
    box-sizing: border-box;
}

.home-hero .home-logo {
    font-size: clamp(40px, 8vw, 120px);
    /* position:fixed pour recevoir le parallax au scroll (js/hero.js) —
       recentré à la main puisque fixed le sort du centrage flex de
       .home-hero. z-index négatif (comme .home-hero-bg juste en dessous) et
       non positif : un z-index positif comparé à la racine du document
       passerait TOUJOURS devant .home-content une fois scrollé jusque-là,
       empêchant le titre de "passer en dessous" au scroll. Reste devant
       l'image malgré le même z-index car placé après elle dans le DOM (à
       z-index égal, l'ordre du DOM départage). */
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -1;
    /* Pas de @keyframes/transition CSS ici : opacity/transform sont
       recalculés en JS à chaque frame pendant l'entrée ET à chaque scroll
       (updateHeroFade, js/hero.js) — une transition CSS séparée pour
       l'entrée, combinée à ces écritures JS au scroll, causait une latence
       perçue puis un saut visuel. Ne pas en réintroduire une ici sans
       repenser hero.js. `opacity:0` + `translateY(12px)` restent la valeur
       par défaut pour le tout premier paint, avant que le JS ne prenne le
       relai — elles correspondent exactement à la progression d'entrée à 0. */
    transform: translate(-50%, -50%) translateY(12px);
    opacity: 0;
}

/* Image de fond du hero (voir home.heroImage, js/pages/home.js).
   `position:fixed` — immobile "par défaut" pendant que la page défile ; un
   décalage vertical est ajouté par-dessus en JS pour la faire quand même
   bouger, plus lentement que le titre (js/hero.js — "comme si elle était
   plus loin"). z-index négatif : passe derrière .home-logo ET derrière
   .site-header (z-index:50). Un z-index négatif sur un élément fixed se
   compare à la racine du document, pas seulement à ses parents directs —
   c'est ce qui garantit que l'image (et le titre) restent recouverts par
   .home-content (fond blanc opaque des sections suivantes) une fois
   scrollé jusque-là.

   Piège rencontré : ne PAS ajouter `isolation`/`opacity<1`/`transform` sur
   `.home-hero` lui-même — un ancêtre qui forme son propre contexte
   d'empilement change ce calcul et fait passer l'image PAR-DESSUS
   .home-content (l'élément est alors traité comme "positionné" dans
   l'empilement de ce parent plutôt que comparé à la racine du document).

   Opacité/transform pilotés en JS à l'entrée et au scroll (js/hero.js) —
   les valeurs ci-dessous ne sont qu'un point de départ avant le premier
   calcul. Taille comparable (un peu plus grande) à l'image de la section
   "About" juste en dessous, pas plein écran. */
.home-hero-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(12px);
    width: min(600px, 75vw);
    aspect-ratio: 3 / 4;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
}

/* Enveloppe des sections post-hero : fond blanc opaque sur toute la largeur
   (contrairement aux sections qu'il contient, plafonnées à 1100px) — filet
   de sécurité pour que .home-hero-bg (position:fixed) soit bien masquée une
   fois qu'on a scrollé jusqu'ici, même sur les côtés d'un écran ultrawide où
   les sections centrées laisseraient sinon voir à travers. */
.home-content {
    background: var(--bg);
}

.home-about,
.home-style,
.home-work {
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.home-work h2 {
    font-family: "dazzle-unicase", sans-serif;
    font-weight: 500;
    font-size: 28px;
    text-align: center;
    margin: 0;
}

/* Disposition côte-à-côte au-delà du format téléphone (About : média/texte ;
   My style : texte/média, sens inversé pour que les deux alternent
   visuellement) via `.home-about-row`/`.home-style-row` — voir la media
   query mobile plus bas pour l'empilement vertical. Le titre (`<h2>`) est un
   champ CMS optionnel (home.about.title/home.style.title) qui vit dans
   `.home-about-text`/`.home-style-text` (pas ici) : il doit rester "à côté"
   du média, pas un bandeau au-dessus des deux. */
.home-about,
.home-style {
    padding: 72px 24px;
}

.home-about-row,
.home-style-row {
    display: flex;
    align-items: center;
    gap: 48px;
}

/* "About" et "My style" acceptent chacune soit une photo, soit une vidéo —
   une seule classe `.home-media` pour l'emplacement du visuel dans les deux
   sections (voir resolveSectionMedia/sectionMediaHtml, js/pages/home.js). */
.home-media,
.home-about-text,
.home-style-text {
    flex: 1;
    min-width: 0;
}

/* Fondu d'apparition au scroll pour le texte et le média d'"About"/"My
   style" — même mouvement que le titre du hero, mais piloté en JS (classe
   "in-view" ajoutée par un IntersectionObserver, js/pages/home.js) plutôt
   qu'une animation CSS qui jouerait dès le rendu de la page : ces sections
   démarrent sous la ligne de flottaison. La désynchro (texte avant média)
   vient du moment où chacun reçoit "in-view" (JS, voir REVEAL_STAGGER_MS),
   pas d'un `transition-delay` différent ici. */
.home-reveal {
    opacity: 0;
    transform: translateY(12px);
    /* Durée à garder en synchro avec REVEAL_STAGGER_MS (js/pages/home.js),
       qui espace l'apparition du texte et du média. */
    transition: opacity .8s ease, transform .8s ease;
}

.home-reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

.home-media-image {
    width: 100%;
    height: auto;
    display: block;
    background: var(--placeholder-bg);
}

.home-about-text h2,
.home-style-text h2 {
    font-family: "dazzle-unicase", sans-serif;
    font-weight: 500;
    font-size: 28px;
    margin: 0 0 16px;
}

.home-about-text p,
.home-style-text p {
    font-size: 26px;
    line-height: 1.4;
    font-weight: 200;
    margin: 0;
}

/* Vidéo auto-hébergée (H.265) — voir canPlayHevc() dans js/images.js pour la
   détection de compatibilité et le repli sur .home-media-image. */
.home-media-video {
    display: block;
    width: 100%;
    height: auto;
    background: var(--placeholder-bg);
}

/* My work : grille de photos de projet (pas seulement originals/prints),
   clic -> overlay zoom (voir overlays.css / js/lightbox.js). */
.home-work {
    padding: 72px 24px 96px;
}

.home-work .work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.work-photo {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: block;
}

.work-photo img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    background: var(--placeholder-bg);
    display: block;
    transition: opacity .2s ease;
}

.work-photo:hover img {
    opacity: .85;
}

@media (max-width:800px) {
    .home-about,
    .home-style {
        padding: 48px 24px;
    }

    /* Ordre mobile voulu : titre - texte - photo/vidéo (le titre est déjà
       au-dessus du texte, voir .home-about-text/.home-style-text h2). DOM
       inchangé (nécessaire pour garder "image à gauche/texte à droite" pour
       About et "texte à gauche/vidéo à droite" pour My style en desktop) :
       About a l'image en premier dans le DOM, donc column-reverse ici pour
       la faire passer en dernier ; My style a le texte en premier, donc un
       simple column suffit. */
    .home-about-row {
        flex-direction: column-reverse;
        text-align: center;
    }

    .home-style-row {
        flex-direction: column;
        text-align: center;
    }

    .home-about-text p,
    .home-style-text p {
        font-size: 21px;
    }

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

@media (max-width:500px) {
    .home-work .work-grid {
        grid-template-columns: 1fr;
    }

    /* Titre du hero découpé en 3 lignes (call / me / louiz) sur téléphone —
       en desktop les 3 <span> (js/pages/home.js) restent en ligne, sans
       espace entre eux, donc rendent "callmelouiz" à l'identique. .home-hero
       a déjà text-align:center, donc chaque ligne se centre toute seule une
       fois empilée. */
    .home-hero .home-logo {
        line-height: 1.3;
    }

    .home-hero .home-logo span {
        display: block;
    }
}