/*
  Studio 36 — Page d'accueil (design.md §7). Le CTA final n'a toujours pas de
  visuel reel (design.md §17.2, [[Visuel a produire]]) et garde son degrade
  sobre ; le hero, lui, affiche desormais la video reelle quand elle existe
  (Media::firstPublished('about')), avec repli sur le meme degrade si aucune
  video n'est publiee.
*/

/* ---------- 1. Hero (design.md §7.1) ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Sur mobile, un hero plein ecran + un pave de texte long (eyebrow + H1 +
   sous-titre + meta + 2 CTA) laisse l'impression d'un ecran presque vide de
   contenu utile avant de scroller. On raccourcit le bloc plutot que le
   texte : hauteur liee au contenu (+ un plancher) au lieu de 100svh fixe. */
@media (max-width: 640px) {
  .hero {
    min-height: 0;
    padding-block: 128px var(--space-9);
  }
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 15%, var(--accent-glow), transparent 60%),
    linear-gradient(180deg, var(--bg-raised) 0%, var(--bg-base) 55%, var(--bg-base) 100%);
}

.hero__bg--video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-base);
  /* Le fichier source a un liseret noir uni d'~30px sur son bord droit
     (defaut de l'export, verifie pixel par pixel sur plusieurs frames) :
     `cover` seul ne le recadre pas des que le conteneur est aussi large ou
     plus large que 16:9 (le cas la plupart du temps sur desktop). Leger zoom
     centre, recadre par `.hero { overflow: hidden }`, pour le sortir du
     cadre visible sans re-exporter la video. */
  transform: scale(1.08);
}

/* design.md §17.2 : garder la moitie basse relativement sombre/unie pour la
   lisibilite du texte superpose, quelle que soit l'exposition de la video.
   Le premier stop (0%) est la ou vivent l'eyebrow et le H1 - il doit rester
   assez sombre pour eux, pas le point le plus clair du degrade. */
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.6) 0%, rgba(11, 11, 12, 0.5) 30%, rgba(11, 11, 12, 0.62) 55%, rgba(11, 11, 12, 0.88) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-top: 96px;
  max-width: 900px;
}

.hero__content .eyebrow {
  color: var(--text-primary);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(11, 11, 12, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  color: var(--text-primary);
  font-size: var(--text-body-sm-size);
}

.hero__meta-item svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

.hero__subtitle {
  margin-top: var(--space-5);
  max-width: 60ch;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.hero__actions {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

@media (max-width: 428px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

.hero__discover {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__discover svg {
  width: 16px;
  height: 16px;
}

.hero__scroll-indicator {
  position: absolute;
  bottom: var(--space-7);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 48px;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--text-muted) 40%, transparent);
  opacity: 1;
  transition: opacity var(--duration-standard) var(--ease-out);
  overflow: hidden;
}

.hero__scroll-indicator[data-hidden="true"] {
  opacity: 0;
}

.hero__scroll-indicator::after {
  content: '';
  position: absolute;
  left: 0;
  top: -20px;
  width: 100%;
  height: 20px;
  background: linear-gradient(to bottom, transparent, var(--accent));
  animation: hero-scroll-pulse 1800ms ease-in-out infinite;
}

@keyframes hero-scroll-pulse {
  0% { transform: translateY(0); }
  100% { transform: translateY(68px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-indicator::after {
    animation: none;
  }
}

/* ---------- 2. Module "4 espaces" (design.md §7.2) ----------
   Accordeon photographique en survol (desktop), carrousel scroll-snap
   (mobile/tablette). Entierement en CSS (:hover/:focus-within + scroll-snap
   natif) : aucun JavaScript dedie n'est necessaire, conformement a la
   preference du design system pour les mecanismes natifs (design.md §5.7).
   Photos en attente : voir photo-placeholder (cards.css). */

.studio-panels {
  display: flex;
  gap: 4px;
  height: 640px;
  margin-top: var(--space-7);
}

.studio-panel {
  position: relative;
  flex: 1 1 0%;
  overflow: hidden;
  display: block;
  isolation: isolate;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: flex-grow 600ms var(--ease-out);
}

/* Ratio d'expansion volontairement plus doux qu'au premier jet (1.6 donnait
   un ecart de largeur trop brusque entre le panneau survole et ses voisins,
   ressenti comme "brutal" au passage de la souris) : 1.35 garde l'effet
   d'immersion sans a-coup visuel. */
.studio-panel:hover,
.studio-panel:focus-within {
  flex-grow: 1.35;
}

.studio-panel__bg {
  z-index: 0;
  filter: brightness(0.55);
  transition: filter 600ms var(--ease-out);
}

.studio-panel:hover .studio-panel__bg,
.studio-panel:focus-within .studio-panel__bg {
  filter: brightness(0.9);
}

.studio-panel__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  background: linear-gradient(to top, rgba(6, 6, 7, 0.7), transparent 55%);
}

.studio-panel__name {
  font-family: var(--font-display);
  font-size: var(--text-h4-size);
  color: var(--text-primary);
  white-space: nowrap;
}

.studio-panel__tagline,
.studio-panel__discover {
  color: var(--text-secondary);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  /* `max-height` doit etre anime au meme titre que l'opacite : laisse sans
     transition, il changeait de facon instantanee (0 -> 100px) pendant que
     seule l'opacite s'estompait en douceur, d'ou l'a-coup ressenti en
     passant rapidement d'un panneau a l'autre. Duree alignee sur celle du
     flex-grow (meme fichier, .studio-panel) pour que tout bouge ensemble. */
  transition: opacity 450ms var(--ease-out), max-height 450ms var(--ease-out);
}

.studio-panel:hover .studio-panel__tagline,
.studio-panel:hover .studio-panel__discover,
.studio-panel:focus-within .studio-panel__tagline,
.studio-panel:focus-within .studio-panel__discover {
  opacity: 1;
  max-height: 100px;
  margin-top: var(--space-2);
}

.studio-panel__discover {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-micro-size);
  text-transform: uppercase;
  letter-spacing: var(--text-micro-tracking);
  color: var(--accent);
}

.studio-panel__counter {
  display: none;
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  color: var(--text-primary);
}

/* Repli prefers-reduced-motion (design.md §18.4) : aucune expansion de
   largeur, uniquement un changement d'opacite/scrim au survol ou au focus. */
@media (prefers-reduced-motion: reduce) {
  .studio-panel:hover,
  .studio-panel:focus-within {
    flex-grow: 1;
  }

  .studio-panel:hover .studio-panel__bg,
  .studio-panel:focus-within .studio-panel__bg {
    filter: brightness(0.9);
  }
}

/* 3 cartes statiques empilees sur mobile/tablette : le carrousel plein ecran
   a defilement interne (scroll-snap dans une boite a hauteur fixe) donnait
   l'impression d'un cadre avec sa propre barre de scroll a l'interieur de la
   page — remplace par un simple empilement, dans le flux normal de la page,
   qui affiche les 3 studios sans action de l'utilisateur. Desktop (>=1024px,
   regle .studio-panels ci-dessus) inchange. */
@media (max-width: 1023px) {
  .studio-panels {
    flex-direction: column;
    height: auto;
    gap: var(--space-4);
  }

  .studio-panel {
    flex: none;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-sm);
  }

  .studio-panel:hover,
  .studio-panel:focus-within {
    flex-grow: 0;
  }

  .studio-panel .studio-panel__bg {
    filter: brightness(0.75);
  }

  .studio-panel .studio-panel__tagline,
  .studio-panel .studio-panel__discover {
    opacity: 1;
    max-height: none;
    margin-top: var(--space-2);
  }
}

.spaces-intro {
  max-width: 65ch;
  margin-top: var(--space-4);
  color: var(--text-secondary);
}

.spaces-cta {
  margin-top: var(--space-7);
}

/* ---------- 3. Barre de confiance (chiffres + avis + marques) ---------- */

/* Teinte ambre tres discrete plutot que le gris neutre habituel de
   `.section--raised` : cette section porte la "preuve chiffree" (design.md
   §2.3, accent reserve aux CTA/pricing — ici utilise avec parcimonie en
   fond, jamais en aplat plein). Remontee juste apres le hero (au lieu
   d'etre enterree en milieu de page) pour agir comme une vraie barre de
   confiance : chiffres, avis, marques materiel, tout de suite visibles. */
.trust-bar {
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-base));
  /* Le hero est deja plein ecran (min-height:100vh) ; le padding-top
     standard de .section (jusqu'a 160px desktop) ajoutait un vide
     supplementaire avant les premiers chiffres, en plus du defilement deja
     necessaire pour sortir du hero. Reduit ici, le padding-bottom (transition
     vers le bandeau de logos) reste celui de .section. */
  padding-top: var(--space-7);
}

@media (min-width: 768px) {
  .trust-bar {
    padding-top: var(--space-8);
  }
}

.concept {
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
}

/* Chiffres d'abord, en bandeau façon relevé de régie (filet en bas + filets
   verticaux entre chiffres), puis le texte de positionnement en dessous —
   la preuve avant l'argument plutot que l'inverse. Bloc centre sur la page
   (le bandeau ne fait que 900px de large, le laisser cale a gauche du
   container laissait un vide asymetrique a droite sur grand ecran). */
.concept__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-7);
}

.concept__pillar {
  padding-right: var(--space-7);
  border-right: 1px solid var(--border-hairline);
}

.concept__pillar:last-child {
  border-right: none;
  padding-right: 0;
}

.concept__pillars .label {
  margin-top: var(--space-1);
  color: var(--text-secondary);
}

.concept__stat {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-h2-size);
  color: var(--accent);
  line-height: 1;
}

.trust-bar__rating {
  display: block;
}

.trust-bar__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--accent);
}

.trust-bar__stars svg {
  width: 18px;
  height: 18px;
}

/* ---------- 7. Témoignages : voir components/reviews.css (reutilise sur les pages studio) ---------- */

/* ---------- 4. Cas d'usage ---------- */

.use-cases__heading {
  margin-bottom: var(--space-5);
}

/* Grille de vignettes photo (une par format reel accompagne) avec le mot en
   grand italique superpose — garde la personnalite typographique de la
   premiere version (tailles alternees, motif "affiche") tout en donnant a
   la section une vraie matiere visuelle plutot qu'une simple liste de mots.
   Meme motif "photo + degrade + libelle" que les vignettes equipements/
   mega-menu, decline ici en grand plutot qu'en petit label mono. */
.use-cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .use-cases {
    grid-template-columns: repeat(3, 1fr);
  }
}

.use-cases__tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  isolation: isolate;
  display: flex;
  align-items: flex-end;
}

.use-cases__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-expressive) var(--ease-out);
}

.use-cases__tile:hover .use-cases__photo {
  transform: scale(1.05);
}

.use-cases__tag {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h4-size);
  color: var(--text-primary);
  background: linear-gradient(to top, rgba(6, 6, 7, 0.8), transparent 70%);
  transition: color var(--duration-standard) var(--ease-out);
}

.use-cases li:nth-child(3n+1) .use-cases__tag {
  font-size: var(--text-h2-size);
}

.use-cases li:nth-child(3n+2) .use-cases__tag {
  font-size: var(--text-h3-size);
}

.use-cases__tile:hover .use-cases__tag {
  color: var(--accent);
}

/* ---------- 5. Ce qui est inclus ---------- */

.included-list {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3) var(--space-6);
}

@media (min-width: 600px) {
  .included-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .included-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.included-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-secondary);
}

.included-list svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent);
}

.included-note {
  margin-top: var(--space-5);
}

/* ---------- 6. Équipements disponibles ---------- */

/* Vignettes photo (quand une photo existe pour la categorie, meme source que
   /equipements) plutot que de simples pastilles de texte : la matiere reelle
   du materiel remplit la section au lieu d'un aplat de mots. */
.equipment-preview {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-hairline);
  margin-bottom: var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 600px) {
  .equipment-preview {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .equipment-preview {
    grid-template-columns: repeat(5, 1fr);
  }
}

.equipment-preview__item {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.equipment-preview__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-expressive) var(--ease-out);
}

.equipment-preview__item:hover .equipment-preview__photo {
  transform: scale(1.05);
}

.equipment-preview__icon {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.equipment-preview__icon svg {
  width: 32px;
  height: 32px;
}

.equipment-preview__label {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-micro-size);
  text-transform: uppercase;
  letter-spacing: var(--text-micro-tracking);
  color: var(--text-primary);
  background: linear-gradient(to top, rgba(6, 6, 7, 0.75), transparent 80%);
}

/* Bandeau de logos partenaires : defilement continu gauche -> droite,
   piste dupliquee deux fois pour boucler sans a-coup (translateX(-50%) vers
   0%, la piste faisant exactement 200% de large). Logos uniformises en
   silhouette blanche (filter) plutot que gardes en couleur d'origine : les
   fichiers fournis melangent des logos sombres (Sony en noir plein) et des
   logos colores (ARRI en bleu, RED en degrade rouge) qui jureraient entre
   eux et, pour les logos sombres, seraient quasi invisibles sur fond noir. */
/* La section qui porte le bandeau a son propre padding-bottom (design.md
   §.section--dense) : sans ce reset, il s'ajoute a celui du bandeau et laisse
   un grand vide sous les logos avant la section suivante. */
section:has(> .equipment-logos) {
  padding-bottom: 0;
}

.equipment-logos {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  padding-bottom: var(--space-5);
  border-top: 1px solid var(--border-hairline);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.equipment-logos__label {
  text-align: center;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-5);
}

.equipment-logos__track {
  display: flex;
  width: max-content;
  animation: equipment-logos-scroll 32s linear infinite;
}

.equipment-logos__set {
  display: flex;
  align-items: center;
  flex: none;
}

.equipment-logos__item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 36px;
  margin-inline: var(--space-6);
}

.equipment-logos__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity var(--duration-standard) var(--ease-out);
}

.equipment-logos:hover .equipment-logos__item img {
  opacity: 0.85;
}

@keyframes equipment-logos-scroll {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .equipment-logos__track {
    animation: none;
  }
}

/* ---------- 6. Déroulement d'une production ---------- */

.steps {
  margin-top: var(--space-6);
  margin-bottom: var(--space-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.steps__number {
  color: var(--accent);
  margin-bottom: var(--space-3);
  font-size: 1.5rem;
}

/* ---------- 8. Localisation et visite ---------- */

.location-section {
  max-width: 640px;
  text-align: center;
  margin-inline: auto;
}

.location-section__address {
  margin-top: var(--space-4);
  color: var(--text-secondary);
}

.location-section__actions {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* ---------- 10. CTA final : voir components/cta-section.css (reutilise sur les pages studio, Phase 5) ---------- */