/* Page d'accueil — thème clair (blanc) + galerie CoverFlow.
   Chargé APRÈS site.css pour surcharger le thème sombre par défaut. */

/* ---- Fond blanc + arbres ---- */
body.home-photo {
  background: #fff;
  color: #2a2723;
}
body.home-photo::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #fff url("/assets/remote/wp-content/uploads/2014/12/background.jpg") center var(--site-background-offset) / 100% auto no-repeat;
}
body.home-photo::after { display: none; }

/* Le copyright termine la page, au bas du viewport si le contenu est court,
   après le contenu (donc accessible au scroll) sur les petits écrans. */
body.home-photo .page-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.home-photo .page-main { flex: 1 0 auto; padding-bottom: 0; }
body.home-photo .site-footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 16px 0 max(16px, env(safe-area-inset-bottom));
  border: 0;
}
body.home-photo .footer-inner {
  padding: 0;
  border: 0;
  font-size: 0.7rem;
  line-height: 1.6;
}

/* ---- Titre « Je capture … » : espaces resserrés ---- */
body.home-photo .page-main { padding-top: 0.4rem; }
body.home-photo .legacy-home-layout { text-align: center; padding-top: 0; }
body.home-photo .intro { margin: 0; }
body.home-photo .intro h2 {
  color: #2a2723;
  font-weight: 300;               /* « Je capture » en écriture fine */
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.2;
  margin: 0;
}
body.home-photo .intro h2 .cap { color: #fea621; font-weight: 300; }  /* « capture » doré fin */
/* Le mot qui change : gras, largeur réservée (JS) pour que « Je capture » ne bouge jamais */
body.home-photo .rotator {
  display: inline-block;
  text-align: left;
  white-space: nowrap;
  vertical-align: baseline;
}
body.home-photo .rotator-word {
  font-weight: 700;
  transition: opacity 0.3s ease;
}
body.home-photo .rotator-dot { font-weight: 300; }

/* ---- Galerie CoverFlow ---- */
.coverflow {
  position: relative;
  isolation: isolate;
  width: min(1500px, 94vw);     /* largeur maîtrisée, sort de la colonne de contenu */
  left: 50%;
  transform: translateX(-50%);
  margin: -6px 0 36px;
  height: 520px;
  perspective: 1600px;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  cursor: grab;
}
.coverflow:active { cursor: grabbing; }
.coverflow:focus-visible { outline: none; }
.coverflow__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  opacity: 0;                       /* invisible tant que la photo centrale se cale */
  transition: opacity 0.45s ease;
}
.coverflow__stage.is-ready { opacity: 1; }
.coverflow__card {
  position: absolute;
  top: 46%;
  left: 50%;
  transform-origin: center center;
  will-change: transform;
}
.coverflow__card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 3px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}
.coverflow__card img {
  -webkit-box-reflect: below 8px linear-gradient(transparent, transparent 58%, rgba(255, 255, 255, 0.30));
}
.coverflow__card.is-center img {
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.34);
}

/* Compteur de position : retiré de l'affichage sur tous les écrans, mais
   conservé pour les lecteurs d'écran, qui annoncent ainsi la photo courante. */
.coverflow__counter {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Téléphone et tablette : même relief, mêmes ombres et mêmes reflets. */
@media (max-width: 820px) {
  body.home-photo { --home-section-gap: 12px; }
  /* Le pied de page reste après le contenu et sous l'écran visible, quelle
     que soit la hauteur de la barre de navigation du navigateur mobile. */
  body.home-photo .page-shell {
    min-height: calc(100vh + 64px);
    min-height: calc(100dvh + 64px);
  }
  body.home-photo .nav-toggle {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    place-items: center;
  }
  body.home-photo .nav-toggle__label { display: none; }
  body.home-photo::before {
    background-position: center calc(var(--site-background-offset) + var(--home-section-gap)) !important;
  }
  body.home-photo .page-main {
    display: flex;
    align-items: flex-start;
    padding: var(--home-section-gap) 0 0;
  }
  body.home-photo .legacy-home-layout { width: 100%; min-height: 0; }
  body.home-photo .intro {
    /* Le dessin des arbres occupe le premier tiers de sa largeur.
       Le titre est centré dans cette zone, avec le même écart avant/après. */
    min-height: 34vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 0 0 var(--home-section-gap);
  }
  body.home-photo .intro h2 {
    font-size: clamp(1.25rem, 6.7vw, 2rem);
    line-height: 1.3;
    white-space: nowrap;
  }
  .coverflow {
    width: 100vw;
    margin: 0;
    height: 440px;
    perspective: 1200px;
  }
}

/* Aucune flèche visible sur l'accueil : glissé et photos latérales assurent
   la navigation du carrousel, y compris sur ordinateur. */
body.home-photo .coverflow__arrow,
body.home-photo .coverflow__nav,
body.home-photo .lightbox-nav { display: none !important; }

/* La galerie pleine largeur ne doit pas créer de défilement horizontal */
body.home-photo { overflow-x: hidden; }
