/* ============================================================
   NOVA FILM — HERO + GAMMES (V2)
   Cadre qui grandit au scroll et révèle le carrousel des 8 gammes.
   Page-only : chargé uniquement sur index.html, aucun impact sur
   les autres pages. Voir js/hero-reveal.js pour la logique.
   ============================================================ */

.reveal-hero { height: 170vh; position: relative; background: #eef1f7; }
.reveal-pin { position: relative; height: 100vh; overflow: hidden; }

.bg-photo { position: absolute; inset: 0; }
.bg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-photo .veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,31,74,0.45), rgba(15,31,74,0.05) 55%); }

.hero-heading { position: absolute; z-index: 2; top: 18%; left: 6%; max-width: 480px; }
.hero-heading .eyebrow { font-size: 13px; letter-spacing: .03em; color: #bcd0f5; margin-bottom: 16px; font-weight: 600; font-family: var(--font-primary); }
.hero-heading h1 { font-weight: 700; font-size: clamp(30px,4.4vw,50px); line-height: 1.08; letter-spacing: -0.03em; color: #fff; margin-bottom: 18px; }
.hero-heading h1 .hl { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-heading p { font-size: 14.5px; line-height: 1.6; color: #e2e8f7; max-width: 400px; margin-bottom: 26px; font-family: var(--font-primary); }

/* cadre décoratif : contour seul, animé en transform:scale (léger, pas d'enfants à distordre) */
.grow-frame {
  position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1);
  width: 27vw; height: 34vh; border-radius: 24px; overflow: hidden; will-change: transform;
  background: transparent; transform-origin: center center;
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 0 0 1px rgba(79,143,240,0.5), 0 20px 50px rgba(15,31,74,0.18);
}

/* panneau de contenu : taille finale fixe dès le départ, seule l'opacité est animée
   donc le texte et les cartes ne sont jamais étirés/déformés pendant le scroll */
/* Le panneau était dimensionné en pourcentage de la fenêtre (84vw × 78vh)
   alors que son contenu — titre, cartes, points — a une taille fixe. Sur un
   grand écran, le panneau continuait donc de grandir sans que le contenu
   suive : il se remplissait à moins de 50 %, avec de larges bandes blanches
   en haut et en bas. On plafonne ses dimensions sur la largeur de contenu
   du site (1180px) et sur une hauteur cohérente avec ce qu'il contient. */
.grow-panel-content {
  position: absolute; z-index: 5; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(84vw, 1180px);
  height: min(78vh, 600px);
  border-radius: 28px; overflow: hidden; pointer-events: none;
}
.grow-panel-content.expanded { pointer-events: auto; }
.grow-fill { position: absolute; inset: 0; background: #fff; opacity: 0; }
.grow-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 36px 40px; opacity: 0; text-align: center;
}
.grow-inner .tag { font-size: 12.5px; letter-spacing: .05em; color: var(--brand-blue); font-weight: 700; margin-bottom: 12px; font-family: var(--font-primary); }
.grow-inner h2 { font-weight: 700; font-size: clamp(22px,2.6vw,34px); letter-spacing: -0.02em; color: #12151c; max-width: 620px; margin-bottom: 34px; line-height: 1.15; }

/* ---------- carrousel ---------- */
.carousel-wrap { position: relative; width: 100%; max-width: 900px; display: flex; align-items: center; gap: 12px; }
.arrow {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(18,21,28,0.15); background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; color: #12151c;
}
.arrow:hover { background: #f2f4f9; }
.carousel-viewport { overflow: hidden; flex: 1; }
/* ATTENTION : ne pas renommer en .carousel-track — cette classe existe déjà dans
   styles/pages/detail-chantier.css (diaporama de la page chantier) avec
   overflow:hidden. Comme ce fichier est chargé sur toutes les pages, la piste se
   découpait elle-même : seules les cartes de la 1re page étaient dessinées, les
   pages 2 et 3 restaient invisibles. D'où le nom dédié .gammes-track.
   L'overflow visible est réaffirmé ici par sécurité. */
.gammes-track {
  display: flex;
  overflow: visible;
  transition: transform .5s cubic-bezier(.65,0,.35,1);
}
.carousel-page { display: flex; gap: 12px; flex-shrink: 0; width: 100%; }

.g-card-mini {
  flex: 1; border-radius: 14px; overflow: hidden; position: relative; height: 150px;
  display: block; text-decoration: none; transition: height .5s ease;
}
.g-card-mini img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.g-card-mini:hover img, .g-card-mini:focus-within img { transform: scale(1.07); }
.g-card-mini .veil {
  position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,31,74,0) 40%, rgba(15,31,74,0.75));
  transition: background .35s ease;
}
.g-card-mini:hover .veil, .g-card-mini:focus-within .veil {
  background: linear-gradient(180deg, rgba(15,31,74,0.05) 15%, rgba(9,18,50,0.92));
}
.g-card-mini .info { position: absolute; left: 14px; right: 14px; bottom: 12px; }
.g-card-mini .label { display: block; font-weight: 600; font-size: 12.5px; color: #fff; font-family: var(--font-primary); transition: font-size .5s ease; }
.g-card-mini .desc {
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; font-size: 11.5px; line-height: 1.4; color: #dbe4fb;
  font-family: var(--font-primary);
  transition: max-height .4s ease, opacity .3s ease, margin-top .4s ease;
}
.g-card-mini:hover .desc, .g-card-mini:focus-within .desc { max-height: 70px; opacity: 1; margin-top: 5px; }

.grow-panel-content.expanded .g-card-mini { height: 340px; }
.grow-panel-content.expanded .g-card-mini .label { font-size: 16px; }
.grow-panel-content.expanded .g-card-mini .desc { font-size: 13px; }
.grow-panel-content.expanded .g-card-mini:hover .desc,
.grow-panel-content.expanded .g-card-mini:focus-within .desc { max-height: 90px; }
.grow-panel-content.expanded .carousel-wrap { max-width: 1080px; }

.dots { display: flex; gap: 6px; margin-top: 18px; justify-content: center; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(18,21,28,0.18); cursor: pointer; transition: background .25s ease, width .25s ease; }
.dot.active { background: var(--brand-blue); width: 18px; border-radius: 4px; }

/* Fenêtres peu hautes (portables 13", navigateur avec barres d'outils) :
   on réduit les cartes pour que titre + cartes + points tiennent sans
   déborder du panneau. */
@media (max-height: 780px) {
  .grow-panel-content { height: min(82vh, 560px); }
  .grow-panel-content.expanded .g-card-mini { height: 270px; }
  .grow-inner h2 { margin-bottom: 24px; }
}

/* ============================================================
   TÉLÉPHONES ET PETITES TABLETTES (≤ 860px)
   ------------------------------------------------------------
   L'animation du cadre qui grandit est désactivée (voir le
   garde-fou dans js/hero-reveal.js) : le panneau final ne faisait
   plus que 330px de large, et les cartes de gammes y étaient
   réduites à 40px, totalement illisibles.

   La page redevient ici une succession classique de deux blocs :
   la hero photo plein écran, puis les huit gammes empilées.
   ============================================================ */
@media (max-width: 860px) {

  /* la section retrouve une hauteur naturelle : plus d'épinglage */
  .reveal-hero { height: auto; background: #fff; }
  .reveal-pin { height: auto; overflow: visible; }

  /* la photo occupe une hauteur d'écran, texte compris */
  .bg-photo { position: relative; inset: auto; height: 100vh; min-height: 520px; }
  /* Le texte passe sous la photo, pas à côté : le voile doit donc être
     dégradé du haut vers le bas et très dense en bas, sinon le titre
     blanc se perd dans les parties claires du cliché. */
  .bg-photo .veil {
    background: linear-gradient(
      180deg,
      rgba(9, 18, 50, 0.30) 0%,
      rgba(9, 18, 50, 0.38) 40%,
      rgba(9, 18, 50, 0.82) 72%,
      rgba(9, 18, 50, 0.94) 100%
    );
  }

  /* Le texte reste calé sur la photo, pas sur la section entière :
     .reveal-pin contient désormais la photo ET les gammes, donc un
     `bottom` renverrait le titre tout en bas de la page. On lui donne
     la hauteur de la photo et on pousse le contenu vers le bas. */
  .hero-heading {
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 100vh;
    min-height: 520px;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 9vh;
  }

  .hero-heading h1 { font-size: clamp(28px, 8vw, 38px); }
  .hero-heading p { font-size: 14px; max-width: none; margin-bottom: 22px; }
  .btn-cta-primary { width: 100%; text-align: center; }

  /* le cadre décoratif n'a plus de rôle : il chevauchait le titre */
  .grow-frame { display: none; }

  /* le panneau devient une section blanche normale */
  .grow-panel-content {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    border-radius: 0;
    overflow: visible;
    pointer-events: auto;
  }

  .grow-fill { display: none; }

  .grow-inner {
    position: static;
    opacity: 1 !important;
    align-items: stretch;
    text-align: left;
    padding: 52px 20px 56px;
  }

  .grow-inner .tag { margin-bottom: 10px; }
  .grow-inner h2 { font-size: clamp(24px, 6.5vw, 32px); max-width: none; margin-bottom: 26px; }

  /* les huit gammes, empilées et lisibles */
  .carousel-wrap { max-width: none; display: block; }
  .arrow, .dots { display: none; }
  .carousel-viewport { overflow: visible; }

  .gammes-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    transform: none !important;
    transition: none;
  }

  .carousel-page {
    display: contents;   /* les cartes remontent dans la grille parente */
  }

  /* la copie de la première page, utile seulement au défilement infini */
  .carousel-page[aria-hidden="true"] { display: none; }

  .g-card-mini,
  .grow-panel-content.expanded .g-card-mini { height: 132px; }

  .g-card-mini .veil {
    background: linear-gradient(180deg, rgba(15,31,74,0.15) 20%, rgba(9,18,50,0.88));
  }

  .g-card-mini .label,
  .grow-panel-content.expanded .g-card-mini .label { font-size: 15px; }

  /* sur mobile il n'y a pas de survol : la description est toujours lue */
  .g-card-mini .desc,
  .grow-panel-content.expanded .g-card-mini .desc {
    max-height: 60px;
    opacity: 1;
    margin-top: 4px;
    font-size: 12.5px;
  }
}

/* ---------- révélation au scroll (fondu + léger décalage), utilisée sur
   les sections sous la hero pour matcher les animations du prototype ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-delay-1.in { transition-delay: .08s; }
.reveal-delay-2.in { transition-delay: .16s; }
.reveal-delay-3.in { transition-delay: .24s; }