/* ============================================================
   V2 — « LA SALLE DE MONTAGE »
   Direction : le site comme une régie / un bord de plateau.
   Vocabulaire : timecodes, index de scènes, grain film, stills
   N&B qui se colorent. Fraunces énorme, IBM Plex Mono en méta,
   Archivo en corps. Ambre conservé (continuité de marque).
   Chargé APRÈS style.css : ce fichier ne fait qu'surcharger.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
  --color-bg:            #0b0a08;   /* charbon chaud, pas noir pur */
  --color-bg-card:       #12100c;
  --color-bg-elevated:   #181510;
  --color-text:          #ede6d8;   /* os chaud */
  --color-text-secondary:#98907f;
  --color-text-muted:    #6b6457;
  --color-accent:        #e8a838;
  --color-accent-hover:  #f0b84a;
  --color-accent-dim:    rgba(232, 168, 56, 0.10);
  --color-border:        rgba(237, 230, 216, 0.10);
  --color-border-accent: rgba(232, 168, 56, 0.4);

  --font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* radii : angles francs, façon matériel broadcast */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
}

::selection { background: var(--color-accent); color: #121008; }

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* ------------------------------------------------------------
   2. GRAIN FILM (toute la page, très discret)
   ------------------------------------------------------------ */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 2000;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: v2-grain 0.9s steps(3) infinite;
}
@keyframes v2-grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* ------------------------------------------------------------
   3. NAVBAR — barre de régie
   ------------------------------------------------------------ */
.navbar { border-bottom: 1px solid transparent; }
.navbar.scrolled,
.navbar:not(.nav--hero-visible) { border-bottom-color: var(--color-border); }

.navbar__logo {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.navbar__logo span { color: var(--color-accent); font-style: italic; }

.navbar__nav-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.navbar__drawer-link {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   4. BOUTONS — angles francs, étiquettes mono
   ------------------------------------------------------------ */
.btn {
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.btn-lg { font-size: 0.82rem; padding: 16px 30px; }

/* ------------------------------------------------------------
   5. EN-TÊTES DE SECTION — éditorial, index de scène
   ------------------------------------------------------------ */
main { counter-reset: scene; }
main > .section { counter-increment: scene; }

.section-header {
  text-align: left;
  max-width: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 26px;
  margin-bottom: 48px;
  position: relative;
}

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--color-text-secondary);
}
.section-eyebrow::before {
  content: counter(scene, decimal-leading-zero) " / ";
  color: var(--color-accent);
}

.section-title {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-optical-sizing: auto;
}

.section-header .divider { display: none; }
.section-subtitle { margin-inline: 0; text-align: left; max-width: 58ch; }

/* le bloc chess garde son traitement centré (interlude volontaire) */
.chess-live .section-title { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }

/* ------------------------------------------------------------
   6. HERO — affiche de film
   ------------------------------------------------------------ */
/* Couleur d'origine ; seul un assombrissement garde le texte lisible. */
.hero__bg img { filter: brightness(0.42); }
.hero__bg::after {
  background:
    linear-gradient(105deg, rgba(9, 8, 6, 0.94) 0%, rgba(9, 8, 6, 0.72) 45%, rgba(9, 8, 6, 0.35) 100%),
    linear-gradient(to top, var(--color-bg) 3%, transparent 32%);
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--color-text-secondary);
}
.hero__eyebrow::before {
  content: "● REC";
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: #e05545;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  animation: v2-blink 1.6s steps(1) infinite;
}
@keyframes v2-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .hero__eyebrow::before { animation: none; } }

.hero__title {
  font-size: clamp(3.6rem, 11vw, 8.5rem);
  font-weight: 380;
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-optical-sizing: auto;
}
.hero__title em {
  display: block;
  color: var(--color-accent);
  font-weight: 340;
  letter-spacing: -0.02em;
}

.hero__tagline {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.3em !important;
  font-size: 0.78rem !important;
  color: var(--color-text) !important;
  opacity: 0.85;
}

.hero__description { max-width: 44ch; }

/* portrait en couleur d'origine */
.hero__portrait { position: relative; }
.hero__portrait-img {
  border-radius: var(--radius-md);
}
.hero__scroll-indicator {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
}

/* ------------------------------------------------------------
   7. GALERIE — stills N&B qui se colorent
   ------------------------------------------------------------ */
.gallery-filter-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.gallery-item { border-radius: var(--radius-md); }
.gallery-item img {
  transition: transform 0.45s ease;
}

.gallery-item__overlay { background: linear-gradient(to top, rgba(9, 8, 6, 0.8), transparent 55%); }
.gallery-item__caption {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.gallery-item__overlay-icon {
  font-family: var(--font-mono);
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------
   8. CARROUSEL PROJETS — moniteurs de régie
   ------------------------------------------------------------ */
.reel__media { border-radius: var(--radius-lg); }
.reel__media img {
  transition: transform 0.5s ease;
}

.reel__badge {
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
}
.reel__hint {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.reel__arrow { border-radius: var(--radius-sm); }
.reel__play { border-radius: var(--radius-sm); border-width: 1px; }

/* ------------------------------------------------------------
   9. CARTES (services, témoignages, clients, contact)
   ------------------------------------------------------------ */
.service-card,
.testimonial-card,
.client-card,
.contact__form-wrapper,
.contact__info-card {
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.service-card__icon { border-radius: var(--radius-sm); }
.service-card__title { font-weight: 450; }

.chess-live__badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.chess-live__photo { border-radius: var(--radius-md); }

/* ------------------------------------------------------------
   10. FORMULAIRE + FOOTER
   ------------------------------------------------------------ */
input, textarea, select { border-radius: var(--radius-sm) !important; }

footer {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------
   11. LIGHTBOXES — légendes en mono
   ------------------------------------------------------------ */
.lightbox__caption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}