/* ==========================================================================
   Sunrise Autos — Accueil cinématique (chargé APRÈS style.css)
   Scopé sous body[data-page="home"].
   Concept : on démarre devant/dans la concession, et le SCROLL fait "entrer"
   (zoom progressif + fondu) avant que le contenu du site commence.
   ========================================================================== */

body[data-page="home"] {
  --c-bg:        #161a24;
  --c-bg-deep:   #11141d;
  --c-ink:       #f6f7fb;
  --c-muted:     rgba(232, 236, 245, 0.72);
  --c-dim:       rgba(232, 236, 245, 0.48);
  --c-line:      rgba(255, 255, 255, 0.12);
  --c-line-2:    rgba(255, 255, 255, 0.20);
  --c-accent:    #df2a24;
  --c-accent-2:  #ff7a4d;
  --c-card:      linear-gradient(160deg, rgba(38,45,60,0.92), rgba(24,29,40,0.94));
  --c-glass:     rgba(255,255,255,0.07);
  --c-shadow:    0 40px 90px rgba(0,0,0,0.45);
  /* Variables de THÈME (mode sombre par défaut). Le mode clair les redéfinit
     plus bas via `body[data-page="home"].theme-light`. Le fond, le wash du hero
     et les sections s'appuient sur --page-bg pour basculer d'un coup. */
  --page-bg:     #0a0303;
  --hero-base:   #050102;
  /* Fond UNIFORME : couleur unique = même teinte partout, donc le bas du hero
     se fond EXACTEMENT dessus -> aucun liseré au raccord. */
  background: var(--page-bg);
  transition: background 0.5s ease;
}
/* IMPORTANT : style.css ajoute un fond showroom FIXE plein écran via
   `body[data-page="home"]::before` (photo showroom, position:fixed, z-index:-10)
   + un voile dégradé `::after` (z-index:-9). C'est CETTE image qui restait
   derrière le contenu au scroll -> on supprime les deux pour obtenir le fond
   uni sombre de la maquette. */
body[data-page="home"]::before,
body[data-page="home"]::after {
  content: none !important;
  background: none !important;
}
/* le zoom du hero est masqué par .cine-enter-stage (overflow:hidden),
   donc pas besoin d'overflow sur body -> le sticky reste fiable. */

body[data-page="home"] .cine-root { position: relative; z-index: 1; }

/* ==========================================================================
   NAVBAR premium — capsule de verre flottante (scopée accueil)
   ========================================================================== */
body[data-page="home"] .topbar.topbar-home,
body[data-page="home"] #site-navbar .topbar {
  position: fixed;
  left: 0; right: 0; top: 0;
  background: transparent;
  border-bottom: none;
  padding: 0;
  /* PAS de flou sur le bandeau pleine largeur (le blur de base .topbar floutait
     les côtés gauche/droite de la capsule). Le flou reste sur la capsule .nav. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* La capsule = le conteneur .nav */
/* Navbar maintenue plus basse pour rester entièrement visible sur le fond showroom. */
body[data-page="home"] .topbar-home .nav {
  width: min(calc(100% - 36px), 1200px);
  margin: 20px auto 0;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 12px 8px 22px;
  border-radius: 18px;
  background: rgba(20, 24, 33, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  transition:
    background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease,
    width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    min-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    margin-top 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    gap 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Au scroll : la capsule se densifie ET RÉTRÉCIT (plus étroite gauche-droite). */
body[data-page="home"] .topbar-home.is-scrolled .nav {
  width: min(calc(100% - 48px), 600px);
  background: rgba(12, 15, 22, 0.86);
  border-color: rgba(255, 255, 255, 0.14);
  margin: 10px auto 0;
  min-height: 44px;
  gap: 12px;
  padding: 3px 8px 3px 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* …mais au survol de la barre, elle s'élargit juste assez pour afficher les libellés. */
body[data-page="home"] .topbar-home.is-scrolled .nav:hover {
  width: min(calc(100% - 48px), 880px);
  min-height: 52px;
  gap: 14px;
  padding: 6px 12px 6px 18px;
}

/* Marque : grande navbar => TEXTE (eyebrow "Concession de Prestige" + gros "Sunrise Autos").
   Navbar réduite => le LOGO remplace le texte ; au survol le texte regrandit. */
body[data-page="home"] .topbar-home .brand {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  line-height: 1.12; position: relative;
}
body[data-page="home"] .topbar-home .brand-logo {
  display: block; height: 32px; width: auto; flex-shrink: 0;
  max-width: 0; opacity: 0; overflow: hidden; object-fit: contain;
  border-radius: 8px; box-shadow: 0 6px 18px rgba(223, 42, 36, 0.4);
  transition: max-width 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease, height 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
body[data-page="home"] .topbar-home .brand-text {
  display: flex; flex-direction: column; min-width: 0;
  max-width: 260px; opacity: 1; overflow: hidden;
  transition: max-width 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
body[data-page="home"] .topbar-home .brand-subtitle { color: var(--c-accent-2); font-size: 0.6rem; letter-spacing: 0.3em; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
body[data-page="home"] .topbar-home .brand-title { color: #fff; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }

/* Navbar réduite : le texte se replie, le logo apparaît à sa place — et le LOGO
   RESTE un logo, même au survol (seuls les liens du menu réaffichent leur nom). */
body[data-page="home"] .topbar-home.is-scrolled .brand-text {
  max-width: 0; opacity: 0; transform: translateX(-6px);
}
body[data-page="home"] .topbar-home.is-scrolled .brand-logo {
  max-width: 140px; opacity: 1;
}

/* Au scroll : on resserre aussi les éléments d'action pour une barre compacte. */
body[data-page="home"] .topbar-home.is-scrolled .cart-link { min-height: 34px; padding: 0 11px; font-size: 0.82rem; }
body[data-page="home"] .topbar-home.is-scrolled .profile-trigger { width: 34px; height: 34px; }
body[data-page="home"] .topbar-home.is-scrolled .profile-trigger svg { width: 19px; height: 19px; }
/* Au survol de la barre compacte, panier/profil reprennent leur taille. */
body[data-page="home"] .topbar-home.is-scrolled .nav:hover .cart-link { min-height: 40px; padding: 0 15px; font-size: 0.88rem; }
body[data-page="home"] .topbar-home.is-scrolled .nav:hover .profile-trigger { width: 40px; height: 40px; }

/* Au scroll : les liens du menu (Accueil, Catalogue, Recrutement, Contact)
   se transforment en ICÔNES (le libellé disparaît, l'icône prend sa place). */
body[data-page="home"] .topbar-home.is-scrolled .menu > a,
body[data-page="home"] .topbar-home.is-scrolled .nav-dropdown-trigger {
  width: 36px; height: 32px; padding: 0;
  font-size: 0; color: transparent;            /* masque le libellé */
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  transition: color 0.2s ease, background 0.2s ease, width 0.4s cubic-bezier(0.16,1,0.3,1), padding 0.4s cubic-bezier(0.16,1,0.3,1), font-size 0.3s ease;
}
body[data-page="home"] .topbar-home.is-scrolled .menu > a::before,
body[data-page="home"] .topbar-home.is-scrolled .nav-dropdown-trigger::before {
  content: "";
  width: 19px; height: 19px; flex: none;
  background-color: rgba(255, 255, 255, 0.82);
  -webkit-mask: var(--nav-ico) center / contain no-repeat;
  mask: var(--nav-ico) center / contain no-repeat;
  transition: background-color 0.18s ease, opacity 0.25s ease;
}
body[data-page="home"] .topbar-home.is-scrolled .menu > a:hover::before,
body[data-page="home"] .topbar-home.is-scrolled .nav-dropdown-trigger:hover::before { background-color: #fff; }

/* Au survol de la barre compacte : les liens redeviennent TEXTE (on lit les libellés). */
body[data-page="home"] .topbar-home.is-scrolled .nav:hover .menu > a,
body[data-page="home"] .topbar-home.is-scrolled .nav:hover .nav-dropdown-trigger {
  width: auto; height: auto; padding: 8px 13px;
  font-size: 0.86rem; color: rgba(255, 255, 255, 0.74);
  background: transparent;
}
body[data-page="home"] .topbar-home.is-scrolled .nav:hover .menu > a:hover,
body[data-page="home"] .topbar-home.is-scrolled .nav:hover .nav-dropdown-trigger:hover {
  color: #fff; background: rgba(255, 255, 255, 0.08);
}
body[data-page="home"] .topbar-home.is-scrolled .nav:hover .menu > a::before,
body[data-page="home"] .topbar-home.is-scrolled .nav:hover .nav-dropdown-trigger::before {
  content: none;                               /* on retire l'icône quand le texte revient */
}

/* Icône associée à chaque lien (line-art, masque -> prend la couleur du lien). */
body[data-page="home"] .topbar-home .menu > a[href="/"] {
  --nav-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 4l9 6.5'/><path d='M5.5 9.5V20h13V9.5'/><path d='M10 20v-5h4v5'/></svg>");
}
body[data-page="home"] .topbar-home .nav-dropdown .nav-dropdown-trigger {
  --nav-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 11l1.6-4.2A2 2 0 0 1 8.5 5.5h7a2 2 0 0 1 1.9 1.3L19 11'/><path d='M4 11h16v5H4z'/><circle cx='7.5' cy='16.5' r='1.6'/><circle cx='16.5' cy='16.5' r='1.6'/></svg>");
}
body[data-page="home"] .topbar-home .menu > a[href="/recrutement"] {
  --nav-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7.5' width='18' height='12' rx='2'/><path d='M8 7.5V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1.5'/><path d='M3 12.5h18'/></svg>");
}
body[data-page="home"] .topbar-home .menu > a[href="/contact"] {
  --nav-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5.5' width='18' height='13' rx='2'/><path d='M4 7l8 5.5L20 7'/></svg>");
}

/* Liens du menu + déclencheur du sous-menu */
body[data-page="home"] .topbar-home .menu { gap: 4px; transition: gap 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
/* En mode compact, on écarte un peu plus les icônes ; au survol (texte), on resserre. */
body[data-page="home"] .topbar-home.is-scrolled .menu { gap: 14px; }
body[data-page="home"] .topbar-home.is-scrolled .nav:hover .menu { gap: 6px; }
body[data-page="home"] .topbar-home .menu > a,
body[data-page="home"] .topbar-home .nav-dropdown-trigger {
  position: relative;
  padding: 9px 15px;
  border-radius: 11px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.74);
  background: transparent;
  border: 0;
  transition: color 0.18s ease, background 0.18s ease, padding 0.35s ease, font-size 0.35s ease;
}
body[data-page="home"] .topbar-home .menu > a:hover,
body[data-page="home"] .topbar-home .nav-dropdown-trigger:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Panier */
body[data-page="home"] .topbar-home .cart-link {
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, min-height 0.35s ease, padding 0.35s ease, gap 0.4s cubic-bezier(0.16,1,0.3,1);
  --cart-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='1.4'/><circle cx='17.5' cy='20' r='1.4'/><path d='M2.5 3.5h2.4l2.1 11a1.6 1.6 0 0 0 1.55 1.25h7.8a1.6 1.6 0 0 0 1.55-1.2L19.5 8H6'/></svg>");
}
body[data-page="home"] .topbar-home .cart-link:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.1); }
/* Le libellé "Panier" : repliable comme les liens du menu. */
body[data-page="home"] .topbar-home .cart-link > span {
  display: inline-block; max-width: 90px; opacity: 1; overflow: hidden; white-space: nowrap;
  transition: max-width 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
}

/* Au scroll : le panier devient une ICÔNE (+ pastille du nombre). */
body[data-page="home"] .topbar-home.is-scrolled .cart-link { gap: 6px; }
body[data-page="home"] .topbar-home.is-scrolled .cart-link > span { max-width: 0; opacity: 0; }
body[data-page="home"] .topbar-home.is-scrolled .cart-link::before {
  content: "";
  width: 19px; height: 19px; flex: none;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-mask: var(--cart-ico) center / contain no-repeat;
  mask: var(--cart-ico) center / contain no-repeat;
}
/* Au survol de la barre : le nom "Panier" revient, l'icône se retire. */
body[data-page="home"] .topbar-home.is-scrolled .nav:hover .cart-link > span { max-width: 90px; opacity: 1; }
body[data-page="home"] .topbar-home.is-scrolled .nav:hover .cart-link::before { content: none; }
body[data-page="home"] .topbar-home .cart-count {
  min-width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-accent-2), var(--c-accent));
  color: #fff; font-size: 0.78rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(223, 42, 36, 0.4);
}

/* Profil */
body[data-page="home"] .topbar-home .profile-trigger {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, width 0.35s ease, height 0.35s ease;
}
body[data-page="home"] .topbar-home .profile-trigger:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.1); }
body[data-page="home"] .topbar-home .profile-trigger svg { width: 22px; height: 22px; }

@media (max-width: 640px) {
  body[data-page="home"] .topbar-home .nav { padding: 8px 10px 8px 16px; min-height: 56px; }
  body[data-page="home"] .topbar-home .brand-title { font-size: 0.88rem; }
}

/* Barre de progression */
body[data-page="home"] .cine-progress {
  position: fixed; left: 0; top: 0; height: 3px; width: 100%;
  z-index: 1200; background: rgba(255,255,255,0.06); pointer-events: none;
}
body[data-page="home"] .cine-progress span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
  box-shadow: 0 0 18px rgba(223, 42, 36, 0.6);
}

/* ==========================================================================
   HERO "SUNRISE HERO" — portes vitrées + logo illuminé (maquette Claude Design)
   L'intro se joue AUTOMATIQUEMENT au chargement (piloté par home-cinematic.js) :
   les portes s'ouvrent en charnière, le logo s'illumine, braises + tagline, puis
   le contenu (statuts + boutons) apparaît. Au scroll, le fond se fond/zoome.
   ========================================================================== */
/* Hero COLLÉ : il reste figé pendant que .cine-after remonte par-dessus
   (transition exacte de la maquette : le contenu recouvre le hero qui se dissout). */
body[data-page="home"] .cine-enter { position: sticky; top: 0; z-index: 1; height: 100vh; min-height: 600px; }
/* Le contenu post-hero passe AU-DESSUS du hero collé + fond solide pour le recouvrir.
   min-height pour toujours recouvrir le hero, même si le contenu est court. */
body[data-page="home"] .cine-after {
  position: relative; z-index: 2; min-height: 100vh;
  background: var(--page-bg); will-change: opacity, transform;
}
body[data-page="home"] .cine-enter-stage {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-base);
}
/* Wash : voile plein écran de la couleur de fond, opacité pilotée au scroll par
   home-cinematic.js -> dissout TOUTE la photo (et logo/portes) dans le fond au
   scroll (raccord de la maquette + supprime tout liseré, dans les 2 thèmes). */
body[data-page="home"] .hero-wash {
  position: absolute; inset: 0; z-index: 55; pointer-events: none;
  opacity: 0; background: var(--page-bg); will-change: opacity;
}

/* — Fonds showroom : crossfade + zoom pilotés par home-cinematic.js — */
body[data-page="home"] .hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.66) saturate(0.98) contrast(1.04);
  transform-origin: 58% 46%;
  will-change: transform, opacity;
}
body[data-page="home"] .hero-bg--alt {
  transform-origin: 44% 50%; opacity: 0;
  filter: brightness(0.68) saturate(0.98) contrast(1.04);
}

/* — Voiles / dégradés au-dessus des fonds — */
body[data-page="home"] .hero-grad { position: absolute; inset: 0; pointer-events: none; }
body[data-page="home"] .hero-grad--linear { background: linear-gradient(180deg, rgba(6,1,1,0.5) 0%, rgba(20,4,4,0.06) 42%, rgba(4,1,1,0.72) 100%); }
body[data-page="home"] .hero-grad--radial { background: radial-gradient(125% 95% at 50% 44%, rgba(70,12,8,0.22) 0%, rgba(3,0,0,0.6) 82%); }
body[data-page="home"] .hero-grad--logo {
  inset: auto; left: 50%; top: 42%; width: min(960px, 94vw); height: min(580px, 62vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(4,1,1,0.62), rgba(4,1,1,0) 72%);
}

/* — Braises (générées par JS) — */
body[data-page="home"] .hero-embers { position: absolute; inset: 0; pointer-events: none; will-change: opacity; }

/* — Bloc central : logo illuminé + tagline + contenu fonctionnel — */
body[data-page="home"] .hero-center {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; text-align: center;
  /* padding-bottom large = réserve la place du repère "Scrollez" (à bottom:30px)
     -> le contenu centré reste au-dessus, plus de chevauchement. */
  padding: 84px 24px 104px;
  font-family: 'Oswald', sans-serif;
}

body[data-page="home"] .hero-logo-block {
  position: relative; width: min(560px, 74vw);
  transform-origin: center; opacity: 0;
  will-change: transform, opacity;
}
body[data-page="home"] .hero-logo-bloom {
  position: absolute; inset: 0; width: 100%;
  mix-blend-mode: screen; filter: blur(26px) brightness(1.4) saturate(1.4);
  opacity: 0.65; pointer-events: none;
}
body[data-page="home"] .hero-logo-main { position: relative; width: 100%; display: block; will-change: filter, opacity; }
body[data-page="home"] .hero-logo-sweep {
  position: absolute; top: -12%; left: 0; height: 124%; width: 30%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,235,200,0.5) 50%, rgba(255,255,255,0) 100%);
  mix-blend-mode: screen; filter: blur(6px); pointer-events: none;
  animation: sa_sweep 1.5s cubic-bezier(.4,0,.2,1) 2.6s 1 both;
}

body[data-page="home"] .hero-tagline { opacity: 0; will-change: opacity, transform; }
body[data-page="home"] .hero-tagline-rule {
  display: block; width: min(340px, 60vw); height: 1.5px; margin: 0 auto 18px;
  background: linear-gradient(90deg, transparent, #ffb43c, transparent); box-shadow: 0 0 8px #ffb43c;
}
body[data-page="home"] .hero-tagline-text {
  display: block; font-weight: 300; font-size: clamp(15px, 1.9vw, 26px); letter-spacing: 0.5em;
  text-transform: uppercase; padding-left: 0.5em; color: #f3ede0;
}

/* — Contenu fonctionnel (sous-titre, statuts, boutons) — révélé après les portes — */
body[data-page="home"] .cine-enter-content {
  width: min(760px, 92vw); margin: 0 auto;
  opacity: 0; will-change: opacity, transform;
}

/* — Portes vitrées qui s'ouvrent en charnière (pilotées JS) — */
body[data-page="home"] .hero-doors {
  position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden;
  perspective: 1600px; perspective-origin: 50% 46%;
}
body[data-page="home"] .hero-door {
  position: absolute; top: 0; width: 50%; height: 100%;
  /* PAS de backdrop-filter ici : le flou "live" est recalculé à CHAQUE frame et,
     sur un élément demi-écran qui tourne en 3D pendant ~2,7 s, ça sature le
     compositeur GPU -> saccades (surtout hors de la machine de dev). On simule
     un verre dépoli avec un dégradé laiteux statique = composé par le GPU, fluide.
     Le dégradé un peu plus opaque ci-dessous compense la perte du flou. */
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
}
body[data-page="home"] .hero-door--l {
  left: 0; border-left: 9px solid #0c0d10; transform-origin: left center;
  background:
    linear-gradient(115deg, rgba(210,224,238,0.22) 0%, rgba(158,176,196,0.13) 34%, rgba(230,242,252,0.30) 50%, rgba(158,176,196,0.13) 66%, rgba(210,224,238,0.22) 100%),
    rgba(150,166,184,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), inset -3px 0 0 rgba(16,18,22,0.85), 26px 0 70px rgba(0,0,0,0.45);
}
body[data-page="home"] .hero-door--r {
  right: 0; border-right: 9px solid #0c0d10; transform-origin: right center;
  background:
    linear-gradient(245deg, rgba(210,224,238,0.22) 0%, rgba(158,176,196,0.13) 34%, rgba(230,242,252,0.30) 50%, rgba(158,176,196,0.13) 66%, rgba(210,224,238,0.22) 100%),
    rgba(150,166,184,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), inset 3px 0 0 rgba(16,18,22,0.85), -26px 0 70px rgba(0,0,0,0.45);
}
body[data-page="home"] .hero-door-bar { position: absolute; left: 0; right: 0; height: 9px; }
body[data-page="home"] .hero-door-bar--top { top: 0; background: linear-gradient(180deg, #1a1c20, #070809); }
body[data-page="home"] .hero-door-bar--bottom { bottom: 0; background: linear-gradient(0deg, #1a1c20, #070809); }
body[data-page="home"] .hero-door-sheen { position: absolute; top: 0; bottom: 0; width: 46%; pointer-events: none; }
body[data-page="home"] .hero-door--l .hero-door-sheen { left: 0; background: linear-gradient(110deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%); }
body[data-page="home"] .hero-door--r .hero-door-sheen { right: 0; background: linear-gradient(250deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%); }
body[data-page="home"] .hero-door-handle {
  position: absolute; top: 50%; width: 6px; height: 130px; transform: translateY(-50%);
  border-radius: 4px; background: linear-gradient(180deg, #777a80, #3a3c41 50%, #777a80); box-shadow: 0 0 8px rgba(0,0,0,0.55);
}
body[data-page="home"] .hero-door--l .hero-door-handle { right: 20px; }
body[data-page="home"] .hero-door--r .hero-door-handle { left: 20px; }
body[data-page="home"] .hero-door-edge { position: absolute; top: 0; bottom: 0; width: 3px; }
body[data-page="home"] .hero-door-edge--r { right: 0; background: linear-gradient(90deg, transparent, rgba(20,22,26,0.9)); }
body[data-page="home"] .hero-door-edge--l { left: 0; background: linear-gradient(270deg, transparent, rgba(20,22,26,0.9)); }

/* — Couture centrale : lueur chaude + libellé gravé, s'efface à l'ouverture — */
body[data-page="home"] .hero-seam { position: absolute; inset: 0; z-index: 41; pointer-events: none; }
body[data-page="home"] .hero-seam-glow {
  position: absolute; left: 50%; top: 0; width: 150px; height: 100%; transform: translateX(-50%);
  background: radial-gradient(55% 50% at 50% 50%, rgba(255,150,50,0.26), transparent 72%);
}
body[data-page="home"] .hero-seam-line {
  position: absolute; left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(255,180,60,0.55) 40%, rgba(255,90,30,0.7) 50%, rgba(255,180,60,0.55) 60%, transparent);
  box-shadow: 0 0 12px rgba(255,140,40,0.55);
}
body[data-page="home"] .hero-seam-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif; font-weight: 300; letter-spacing: 0.52em; font-size: clamp(12px, 1.4vw, 17px);
  color: rgba(255,210,160,0.78); text-transform: uppercase; padding-left: 0.52em; text-shadow: 0 0 14px rgba(255,140,40,0.5);
}

/* — Keyframes de l'animation (braises, balayage du logo, rebond du chevron) — */
@keyframes sa_ember {
  0%   { transform: translateY(10px) scale(0.9); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(-104vh) scale(1.1); opacity: 0; }
}
@keyframes sa_sweep {
  0%   { transform: translateX(-160%) skewX(-18deg); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}
@keyframes sa_bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* Contenu fonctionnel centré dans le bloc hero (sous le logo + tagline) */
body[data-page="home"] .cine-enter-content .cine-hero-sub { margin-left: auto; margin-right: auto; }
body[data-page="home"] .cine-enter-content .hero-status-row { justify-content: center; }
body[data-page="home"] .cine-enter-content .cine-hero-actions { justify-content: center; }

body[data-page="home"] .cine-hero-sub {
  margin-top: 26px; max-width: 560px; font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: var(--c-muted); line-height: 1.7;
}

body[data-page="home"] .hero-status-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
/* Pastilles de statut : fond bien plus dense + bordure colorée selon le statut
   pour qu'elles ressortent nettement sur le décor du hero. */
body[data-page="home"] .hero-status-row .status-pill {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 12px 20px; border-radius: 999px;
  background: rgba(9, 12, 19, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.92);
}
body[data-page="home"] .hero-status-row .status-pill-label { color: rgba(255, 255, 255, 0.8); }
body[data-page="home"] .hero-status-row .status-pill strong { color: #fff; font-weight: 800; letter-spacing: 0.02em; }
body[data-page="home"] .hero-status-row .status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-dim); flex: none; }
/* Variante OUVERT(E) : accent vert. */
body[data-page="home"] .hero-status-row .status-pill.is-open {
  border-color: rgba(67, 220, 145, 0.55);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42), 0 0 22px rgba(67, 220, 145, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body[data-page="home"] .hero-status-row .status-pill.is-open strong { color: #7bf3b6; }
body[data-page="home"] .hero-status-row .status-pill.is-open .status-dot { background: #43dc91; box-shadow: 0 0 12px #43dc91; }
/* Variante FERMÉ(E) : accent rouge. */
body[data-page="home"] .hero-status-row .status-pill.is-off {
  border-color: rgba(255, 91, 91, 0.55);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42), 0 0 22px rgba(255, 91, 91, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body[data-page="home"] .hero-status-row .status-pill.is-off strong { color: #ff9b9b; }
body[data-page="home"] .hero-status-row .status-pill.is-off .status-dot { background: #ff5b5b; box-shadow: 0 0 12px #ff5b5b; }

body[data-page="home"] .cine-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

body[data-page="home"] .cine-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px; font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.01em; border: 1px solid transparent; overflow: hidden;
  isolation: isolate; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
body[data-page="home"] .cine-btn em { font-style: normal; transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); }
body[data-page="home"] .cine-btn:hover em { transform: translateX(4px); }
body[data-page="home"] .cine-btn:active { transform: translateY(0) scale(0.98); }
body[data-page="home"] .cine-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 0 0 6px rgba(223,42,36,0.45);
}
/* Reflet qui balaie le bouton au survol (UI/UX) */
body[data-page="home"] .cine-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  transform: translateX(-120%); transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
body[data-page="home"] .cine-btn:hover::before { transform: translateX(120%); }

body[data-page="home"] .cine-btn-primary {
  background: linear-gradient(135deg, var(--c-accent-2), var(--c-accent));
  color: #fff; box-shadow: 0 18px 40px rgba(223,42,36,0.32);
}
body[data-page="home"] .cine-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 26px 54px rgba(223,42,36,0.48); }
body[data-page="home"] .cine-btn-ghost {
  background: rgba(255,255,255,0.06); border-color: var(--c-line-2); color: var(--c-ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body[data-page="home"] .cine-btn-ghost:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.12); }

/* Indicateur de scroll */
body[data-page="home"] .cine-scrollcue {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--c-dim); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  will-change: opacity;
  opacity: 0;
  animation: cineCueIn 0.9s ease 3.1s forwards;
  transition: opacity 0.4s ease;
}
@keyframes cineCueIn { to { opacity: 1; } }
body[data-page="home"] .cine-scrollcue .cue-track { width: 26px; height: 42px; border-radius: 999px; border: 1px solid var(--c-line-2); position: relative; }
body[data-page="home"] .cine-scrollcue .cue-track::after {
  content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 999px;
  background: var(--c-accent-2); transform: translateX(-50%); animation: cueMove 1.7s ease-in-out infinite;
}
@keyframes cueMove { 0%,100% { opacity: 0; transform: translate(-50%,0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translate(-50%,16px); } }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
body[data-page="home"] .cine-section {
  position: relative; width: min(calc(100% - 48px), 1180px); margin: 0 auto;
  padding: clamp(80px, 12vh, 160px) 0;
}
body[data-page="home"] .cine-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-accent-2); margin-bottom: 16px;
}
body[data-page="home"] .cine-kicker::before { content: ""; width: 28px; height: 2px; background: linear-gradient(90deg, var(--c-accent), transparent); }
body[data-page="home"] .cine-h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--c-ink); }
body[data-page="home"] .cine-lead { margin-top: 18px; max-width: 620px; font-size: 1.02rem; line-height: 1.75; color: var(--c-muted); }

/* Manifeste */
body[data-page="home"] .cine-manifesto p {
  font-size: clamp(1.6rem, 4.4vw, 3.4rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em;
  color: var(--c-dim); max-width: min(94%, 1100px);
}
body[data-page="home"] .cine-manifesto .hl { color: var(--c-ink); }
body[data-page="home"] .cine-manifesto .hl-accent {
  background: linear-gradient(120deg, var(--c-accent-2), var(--c-accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* Catégories */
body[data-page="home"] .cine-cats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
body[data-page="home"] .cine-cat {
  position: relative; padding: 22px; min-height: 130px; border-radius: 18px;
  background: var(--c-card); border: 1px solid var(--c-line);
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.22s ease;
  transform-style: preserve-3d;
}
body[data-page="home"] .cine-cat:hover { border-color: var(--c-line-2); }
body[data-page="home"] .cine-cat .cine-cat-ico { font-size: 1.6rem; position: absolute; top: 16px; right: 18px; opacity: 0.9; transform: translateZ(30px); }
body[data-page="home"] .cine-cat strong { font-size: 1.05rem; color: var(--c-ink); transform: translateZ(22px); }
body[data-page="home"] .cine-cat span { font-size: 0.78rem; color: var(--c-muted); margin-top: 3px; transform: translateZ(12px); }

/* VIP */
body[data-page="home"] .cine-vip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
body[data-page="home"] .cine-vip-card {
  position: relative; border-radius: 20px; padding: 26px;
  background: var(--c-card); border: 1px solid var(--c-line); box-shadow: var(--c-shadow);
  overflow: hidden; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  transform-style: preserve-3d;
}
body[data-page="home"] .cine-vip-card img { width: 70px; height: 70px; object-fit: contain; margin-bottom: 14px; transform: translateZ(34px); }
body[data-page="home"] .cine-vip-card h3 { font-size: 1.25rem; color: var(--c-ink); transform: translateZ(34px); }
body[data-page="home"] .cine-vip-card p { margin-top: 20px; font-size: 0.88rem; color: var(--c-muted); line-height: 1.6; transform: translateZ(16px); }
body[data-page="home"] .cine-vip-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 80% 0%, rgba(245,184,75,0.10), transparent 60%); }
body[data-page="home"] .cine-vip-card.is-gold::after   { background: radial-gradient(80% 60% at 80% 0%, rgba(245,184,75,0.16), transparent 60%); }
body[data-page="home"] .cine-vip-card.is-silver::after { background: radial-gradient(80% 60% at 80% 0%, rgba(190,200,215,0.14), transparent 60%); }
body[data-page="home"] .cine-vip-card.is-bronze::after { background: radial-gradient(80% 60% at 80% 0%, rgba(196,122,53,0.14), transparent 60%); }

/* ==========================================================================
   ACTUALITÉS (texte + image, postées depuis l'admin)
   Couleurs en tokens -> compatibles thème sombre/clair futur.
   ========================================================================== */
body[data-page="home"] .cine-news-head { max-width: 720px; margin-bottom: 44px; }
body[data-page="home"] .cine-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
body[data-page="home"] .cine-news-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--c-muted);
  padding: 40px 0;
  font-size: 0.95rem;
}
body[data-page="home"] .cine-news-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  box-shadow: var(--c-shadow);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
body[data-page="home"] .cine-news-card:hover { transform: translateY(-5px); border-color: var(--c-line-2); }
body[data-page="home"] .cine-news-card.is-pinned { border-color: rgba(223,42,36,0.5); }

body[data-page="home"] .cine-news-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0e121b;
}
body[data-page="home"] .cine-news-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
body[data-page="home"] .cine-news-card:hover .cine-news-media img { transform: scale(1.05); }

body[data-page="home"] .cine-news-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  flex: 1;
}
body[data-page="home"] .cine-news-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body[data-page="home"] .cine-news-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--c-glass); border: 1px solid var(--c-line); color: var(--c-muted);
}
body[data-page="home"] .cine-news-badge i { font-style: normal; font-size: 0.9rem; }
/* Couleur d'accent par type */
body[data-page="home"] .cine-news-card.type-passvip     .cine-news-badge { color: #f5b84b; border-color: rgba(245,184,75,0.4); background: rgba(245,184,75,0.10); }
body[data-page="home"] .cine-news-card.type-recrutement .cine-news-badge { color: #43dc91; border-color: rgba(67,220,145,0.4); background: rgba(67,220,145,0.10); }
body[data-page="home"] .cine-news-card.type-evenement   .cine-news-badge { color: #4c91ff; border-color: rgba(76,145,255,0.4); background: rgba(76,145,255,0.10); }
body[data-page="home"] .cine-news-card.type-info        .cine-news-badge { color: var(--c-accent-2); border-color: rgba(255,122,77,0.4); background: rgba(255,122,77,0.10); }

body[data-page="home"] .cine-news-pin { color: var(--c-accent-2); font-size: 0.9rem; }
body[data-page="home"] .cine-news-body h3 { font-size: 1.18rem; font-weight: 800; color: var(--c-ink); letter-spacing: -0.01em; line-height: 1.2; }
body[data-page="home"] .cine-news-text { font-size: 0.9rem; line-height: 1.65; color: var(--c-muted); flex: 1; }
body[data-page="home"] .cine-news-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--c-line);
}
body[data-page="home"] .cine-news-foot time { font-size: 0.74rem; color: var(--c-dim); font-weight: 600; }
body[data-page="home"] .cine-news-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 700; color: var(--c-accent-2);
}
body[data-page="home"] .cine-news-cta em { font-style: normal; transition: transform 0.2s ease; }
body[data-page="home"] .cine-news-cta:hover em { transform: translateX(4px); }

/* Bandes (partenariats / avis) : composants existants conservés */
body[data-page="home"] .cine-band { position: relative; padding-block: clamp(70px, 10vh, 130px); }
body[data-page="home"] .cine-band .container { width: min(calc(100% - 48px), 1180px); }

/* CTA */
body[data-page="home"] .cine-cta {
  position: relative; margin: clamp(40px,8vh,100px) auto clamp(60px,10vh,120px);
  width: min(calc(100% - 48px), 1180px); padding: clamp(50px, 8vw, 90px);
  border-radius: 28px; text-align: center; overflow: hidden;
  background: radial-gradient(120% 120% at 50% -10%, rgba(223,42,36,0.28), transparent 55%), var(--c-card);
  border: 1px solid var(--c-line-2); box-shadow: var(--c-shadow);
}
body[data-page="home"] .cine-cta h2 { font-size: clamp(1.9rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.02em; color: var(--c-ink); }
body[data-page="home"] .cine-cta p { margin: 16px auto 30px; max-width: 540px; color: var(--c-muted); font-size: 1.02rem; line-height: 1.7; }
body[data-page="home"] .cine-cta .cine-hero-actions { justify-content: center; }

/* ==========================================================================
   3D au survol (tilt) des cartes
   ========================================================================== */
body[data-page="home"] [data-tilt] { transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease; will-change: transform; }

/* ==========================================================================
   RÉVÉLATIONS AU SCROLL — DÉSACTIVÉES sur l'accueil
   L'utilisateur ne veut plus d'"effet d'ouverture" en descendant : le contenu
   qui suit est simplement affiché tel quel (pas de fondu/glissement au scroll).
   ========================================================================== */
body[data-page="home"] [data-reveal],
body[data-page="home"] [data-reveal].is-in {
  opacity: 1; transform: none; transition: none; transition-delay: 0s;
}
/* Cartes partenariats / avis (hook home.js) : même chose, pas d'animation d'entrée. */
body[data-page="home"] .reveal-on-scroll,
body[data-page="home"] .reveal-on-scroll.is-visible {
  opacity: 1; transform: none; transition: none; animation: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  /* hero à 100vh : l'ouverture des portes ne dépend plus du scroll */
  body[data-page="home"] .cine-news-grid { grid-template-columns: repeat(2, 1fr); }
  body[data-page="home"] .cine-vip-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body[data-page="home"] .cine-news-grid { grid-template-columns: 1fr; }
  body[data-page="home"] .hero-logo-block { width: min(420px, 78vw); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] [data-reveal] { opacity: 1; transform: none; }
  body[data-page="home"] .cine-enter { height: 100vh; }
  /* Pas d'intro animée : portes ouvertes, logo net, contenu visible d'emblée. */
  body[data-page="home"] .hero-bg { opacity: 1; filter: brightness(0.66) saturate(0.98) contrast(1.04); }
  body[data-page="home"] .hero-bg--alt { opacity: 0; }
  body[data-page="home"] .hero-logo-block { opacity: 1; transform: none; }
  body[data-page="home"] .hero-logo-main { filter: brightness(1) drop-shadow(0 0 18px rgba(255,90,30,0.5)); }
  body[data-page="home"] .hero-logo-sweep { animation: none; opacity: 0; }
  body[data-page="home"] .hero-tagline,
  body[data-page="home"] .cine-enter-content { opacity: 1; transform: none; }
  body[data-page="home"] .hero-door--l { transform: rotateY(-105deg); opacity: 0; }
  body[data-page="home"] .hero-door--r { transform: rotateY(105deg); opacity: 0; }
  body[data-page="home"] .hero-seam { opacity: 0; }
  body[data-page="home"] .hero-embers { opacity: 0; }
  body[data-page="home"] .cine-scrollcue { animation: none; opacity: 1; }
}

/* Sur écrans courts, on réduit le logo du hero et on resserre le contenu. */
@media (max-height: 760px) {
  body[data-page="home"] .hero-center { gap: 14px; padding: 70px 24px 92px; }
  body[data-page="home"] .hero-logo-block { width: min(440px, 60vw); }
  body[data-page="home"] .cine-hero-sub { margin-top: 12px; font-size: 0.96rem; }
}
/* Très court (paysage mobile, fenêtres réduites) : on masque le sous-titre et le
   repère de scroll pour garantir zéro chevauchement. */
@media (max-height: 620px) {
  body[data-page="home"] .hero-center .cine-hero-sub { display: none; }
  body[data-page="home"] .cine-scrollcue { display: none; }
  body[data-page="home"] .hero-center { padding-bottom: 40px; }
}

/* ==========================================================================
   AVIS — cadres adaptés au commentaire
   Par défaut les cartes du carrousel s'étiraient toutes à la même hauteur
   (celle du plus long commentaire). Ici chaque cadre épouse SON commentaire :
   un avis court = un cadre compact, un avis long = un cadre plus haut.
   ========================================================================== */
body[data-page="home"] .reviews-track,
body[data-page="home"] .reviews-track-static {
  align-items: flex-start;
}
body[data-page="home"] .reviews-track-static {
  align-items: start;
}
body[data-page="home"] .review-card {
  align-self: flex-start;        /* la carte ne s'étire plus à la hauteur du voisin */
  height: auto;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
body[data-page="home"] .review-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 28px 60px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Le commentaire pousse la hauteur ; la ligne méta suit juste en dessous. */
body[data-page="home"] .review-card .review-comment { flex: 0 1 auto; }
body[data-page="home"] .review-card .review-meta-row { margin-top: 14px; }

/* ==========================================================================
   THÈME CLAIR / SOMBRE (maquette Sunrise Hero)
   Bouton flottant soleil/lune + bascule de la classe `.theme-light` sur <body>
   par home-cinematic.js (persisté dans localStorage 'sunrise:theme').
   ========================================================================== */
/* — Bouton flottant (hors du conteneur scrollé -> toujours visible) — */
body[data-page="home"] .theme-toggle {
  position: fixed; left: 24px; bottom: 24px; z-index: 1300;
  width: 50px; height: 50px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  color: #ffb43c;
  border: 1px solid rgba(255,180,60,0.45);
  background:
    radial-gradient(125% 125% at 30% 22%, rgba(255,180,60,0.20), transparent 60%),
    rgba(12,5,5,0.55);
  -webkit-backdrop-filter: blur(12px) saturate(1.25); backdrop-filter: blur(12px) saturate(1.25);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform 0.3s cubic-bezier(.16,1,.3,1), background 0.45s ease, border-color 0.45s ease, color 0.45s ease, box-shadow 0.45s ease;
}
body[data-page="home"] .theme-toggle:hover {
  transform: translateY(-3px) scale(1.06);
  border-color: rgba(255,180,60,0.85);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.16), 0 0 20px rgba(255,140,40,0.4);
}
body[data-page="home"] .theme-toggle:active { transform: scale(0.93); }
body[data-page="home"] .theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,180,60,0.4), 0 10px 30px rgba(0,0,0,0.45);
}
body[data-page="home"] .theme-toggle .theme-ico { transition: transform 0.45s cubic-bezier(.16,1,.3,1); }
body[data-page="home"] .theme-toggle:hover .theme-ico { transform: rotate(35deg); }
body[data-page="home"] .theme-toggle .theme-ico { display: none; }
body[data-page="home"] .theme-toggle .theme-ico-sun { display: inline-flex; }      /* sombre -> on propose le soleil */
body[data-page="home"].theme-light .theme-toggle .theme-ico-sun { display: none; }
body[data-page="home"].theme-light .theme-toggle .theme-ico-moon { display: inline-flex; } /* clair -> on propose la lune */
body[data-page="home"].theme-light .theme-toggle:hover .theme-ico { transform: rotate(-20deg); }
body[data-page="home"].theme-light .theme-toggle {
  color: #a8690f; border-color: rgba(168,106,16,0.4);
  background:
    radial-gradient(125% 125% at 30% 22%, rgba(255,212,150,0.55), transparent 60%),
    rgba(255,250,242,0.82);
  box-shadow: 0 10px 30px rgba(120,80,20,0.2), inset 0 1px 0 rgba(255,255,255,0.7);
}
body[data-page="home"].theme-light .theme-toggle:hover {
  border-color: rgba(168,106,16,0.7);
  box-shadow: 0 16px 40px rgba(120,80,20,0.26), inset 0 1px 0 rgba(255,255,255,0.8), 0 0 16px rgba(200,140,40,0.32);
}

/* — Jeu de tokens MODE CLAIR : redéfinis -> sections / textes / cartes basculent — */
body[data-page="home"].theme-light {
  --c-bg:       #f3ece0;
  --c-bg-deep:  #efe8db;
  --c-ink:      #2c1d14;
  --c-muted:    rgba(44,29,20,0.74);
  --c-dim:      rgba(44,29,20,0.5);
  --c-line:     rgba(44,29,20,0.14);
  --c-line-2:   rgba(44,29,20,0.22);
  --c-accent:   #df2a24;
  --c-accent-2: #b5531f;
  --c-card:     linear-gradient(160deg, #fdf9f2, #f3ead9);
  --c-glass:    rgba(0,0,0,0.04);
  --c-shadow:   0 30px 70px rgba(120,80,20,0.18);
  --page-bg:    #efe8db;
  --hero-base:  #efe8db;
}

/* — Le HERO reste sombre dans les 2 thèmes (photo + scrims) -> on force son
     texte/boutons/repère à rester clairs même en mode clair. — */
body[data-page="home"].theme-light .cine-enter-content .cine-hero-sub { color: rgba(243,237,224,0.82); }
body[data-page="home"].theme-light .cine-btn-ghost {
  color: #f3ede0; border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.07);
}
body[data-page="home"].theme-light .cine-scrollcue { color: rgba(243,237,224,0.55); }
body[data-page="home"].theme-light .cine-scrollcue .cue-track { border-color: rgba(255,255,255,0.25); }

/* — Cartes Partenariats + Avis en mode clair (couleurs codées en dur dans style.css) — */
body[data-page="home"].theme-light .partnership-card,
body[data-page="home"].theme-light .review-card,
body[data-page="home"].theme-light .reviews-summary-card {
  background: linear-gradient(160deg, #fdf9f2, #f4ecdd) !important;
  border-color: rgba(168,106,16,0.28) !important;
  box-shadow: 0 18px 44px rgba(120,80,20,0.14), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
body[data-page="home"].theme-light .partnership-card::before { opacity: 0; }
body[data-page="home"].theme-light .partnership-card:hover,
body[data-page="home"].theme-light .review-card:hover {
  border-color: rgba(168,106,16,0.45) !important;
  box-shadow: 0 26px 58px rgba(120,80,20,0.2) !important;
}
body[data-page="home"].theme-light .partnership-card h3,
body[data-page="home"].theme-light .review-person h3,
body[data-page="home"].theme-light .partnership-body strong,
body[data-page="home"].theme-light .review-rating-badge strong { color: #2c1d14; }
body[data-page="home"].theme-light .partnership-label { color: #a8690f; }
body[data-page="home"].theme-light .partnership-body,
body[data-page="home"].theme-light .partnership-body p,
body[data-page="home"].theme-light .review-comment,
body[data-page="home"].theme-light .review-meta-row { color: rgba(44,29,20,0.78); }
body[data-page="home"].theme-light .review-rating-badge span { color: #c8860f; }
body[data-page="home"].theme-light .partnership-avatar,
body[data-page="home"].theme-light .review-avatar { border-color: rgba(168,106,16,0.3); background: #efe2cc; }
body[data-page="home"].theme-light .empty-state h3 { color: #2c1d14; }
body[data-page="home"].theme-light .empty-state p { color: rgba(44,29,20,0.6); }
/* Carte "Note globale" (textes/score/stats clairs codés en dur -> dark en clair) */
body[data-page="home"].theme-light .reviews-summary-score,
body[data-page="home"].theme-light .reviews-summary-metrics strong,
body[data-page="home"].theme-light .reviews-summary-text strong { color: #2c1d14; }
body[data-page="home"].theme-light .reviews-summary-score span,
body[data-page="home"].theme-light .reviews-summary-metrics span { color: rgba(44,29,20,0.62); }
body[data-page="home"].theme-light .reviews-summary-text { color: rgba(44,29,20,0.78); }
body[data-page="home"].theme-light .reviews-summary-stars { color: #d49a2f; }
body[data-page="home"].theme-light .reviews-summary-metrics > div {
  background: rgba(168,106,16,0.06); border-color: rgba(168,106,16,0.18);
}

/* — Footer en mode clair — */
body[data-page="home"].theme-light .footer { border-top-color: rgba(44,29,20,0.14); }
body[data-page="home"].theme-light .footer,
body[data-page="home"].theme-light .footer-content,
body[data-page="home"].theme-light .footer p,
body[data-page="home"].theme-light .footer strong { color: #2c1d14; }

/* Transition douce des surfaces au changement de thème */
body[data-page="home"] .partnership-card,
body[data-page="home"] .review-card,
body[data-page="home"] .reviews-summary-card,
body[data-page="home"] .cine-h2,
body[data-page="home"] .cine-lead { transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease; }