/* ============================================



   CINESTESIA FILM — STANDALONE HTML5 DESIGN SYSTEM



   Style: Liquid Glass Cinema + Dark OLED



   Fonts: Bodoni Moda (display) + Jost (body)



   Palette: Noir OLED + Or luxe



   Version: 1.0.0 — Standalone HTML5



   ============================================ */



/* ===============================================



   1. GOOGLE FONTS IMPORT



   =============================================== */



@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Jost:wght@300;400;500;600;700&display=swap');



/* ===============================================



   2. DESIGN TOKENS — DARK THEME (default)



   =============================================== */



:root {



  --cin-black: #0A0A0A;



  --cin-dark: #111111;



  --cin-dark-secondary: #1A1A1A;



  --cin-dark-card: #141414;



  --cin-dark-elevated: #1E1E1E;



  --cin-dark-surface: #252525;



  --cin-gold: #C9A84C;



  --cin-gold-light: #D4B85C;



  --cin-gold-dark: #A68A3A;



  --cin-gold-glow: rgba(201, 168, 76, 0.15);



  --cin-gold-subtle: rgba(201, 168, 76, 0.08);



  --cin-white: #F5F5F3;



  --cin-white-soft: #E8E6E1;



  --cin-text: #D4D0C8;



  --cin-text-muted: #8A8780;



  --cin-text-faint: #5A5854;



  --cin-border: rgba(255, 255, 255, 0.06);



  --cin-border-hover: rgba(201, 168, 76, 0.25);



  --cin-border-active: rgba(201, 168, 76, 0.4);



  --cin-glass: rgba(255, 255, 255, 0.03);



  --cin-glass-hover: rgba(255, 255, 255, 0.06);



  --cin-glass-strong: rgba(255, 255, 255, 0.08);



  --cin-font-display: 'Bodoni Moda', 'Georgia', serif;



  --cin-font-body: 'Jost', 'Helvetica Neue', sans-serif;



  --cin-radius: 2px;



  --cin-radius-md: 6px;



  --cin-radius-lg: 12px;



  --cin-radius-xl: 20px;



  --cin-ease: cubic-bezier(0.4, 0, 0.2, 1);



  --cin-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);



  --cin-ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);



  --cin-t-fast: 150ms var(--cin-ease);



  --cin-t: 250ms var(--cin-ease);



  --cin-t-slow: 500ms var(--cin-ease-cinematic);



  --cin-t-reveal: 800ms var(--cin-ease-cinematic);



  --cin-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);



  --cin-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);



  --cin-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);



  --cin-shadow-gold: 0 4px 24px rgba(201, 168, 76, 0.15);



  --cin-shadow-gold-lg: 0 8px 40px rgba(201, 168, 76, 0.2);



  --cin-z-base: 1;



  --cin-z-card: 10;



  --cin-z-sticky: 20;



  --cin-z-overlay: 30;



  --cin-z-modal: 40;



  --cin-z-toast: 50;



  --cin-space-xs: 0.5rem;



  --cin-space-sm: 1rem;



  --cin-space-md: 2rem;



  --cin-space-lg: 4rem;



  --cin-space-xl: 6rem;



  --cin-space-2xl: 8rem;



}



/* ===============================================



   3. LIGHT THEME



   =============================================== */



[data-theme="light"] {



  --cin-black: #FAFAF8;



  --cin-dark: #FFFFFF;



  --cin-dark-secondary: #F0EDE8;



  --cin-dark-card: #FFFFFF;



  --cin-dark-elevated: #F5F3EE;



  --cin-dark-surface: #E8E5E0;



  --cin-gold: #A68A3A;



  --cin-gold-light: #8B7430;



  --cin-gold-dark: #7A6628;



  --cin-gold-glow: rgba(166, 138, 58, 0.15);



  --cin-gold-subtle: rgba(166, 138, 58, 0.08);



  --cin-white: #1A1A1A;



  --cin-white-soft: #2A2A2A;



  --cin-text: #333333;



  --cin-text-muted: #666666;



  --cin-text-faint: #999999;



  --cin-border: rgba(0, 0, 0, 0.08);



  --cin-border-hover: rgba(166, 138, 58, 0.3);



  --cin-border-active: rgba(166, 138, 58, 0.5);



  --cin-glass: rgba(255, 255, 255, 0.8);



  --cin-glass-hover: rgba(255, 255, 255, 0.9);



  --cin-glass-strong: rgba(255, 255, 255, 0.95);



  --cin-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);



  --cin-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.08);



  --cin-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.1);



  --cin-shadow-gold: 0 4px 24px rgba(166, 138, 58, 0.12);



  --cin-shadow-gold-lg: 0 8px 40px rgba(166, 138, 58, 0.15);



}



/* Light mode specific overrides */



[data-theme="light"] .cin-hero::after {



  background:



    linear-gradient(180deg,



      rgba(250, 250, 248, 0.2) 0%,



      rgba(250, 250, 248, 0.05) 30%,



      rgba(250, 250, 248, 0.3) 60%,



      rgba(250, 250, 248, 0.92) 100%);



}



[data-theme="light"] .cin-hero::before {



  opacity: 0.15;



}



[data-theme="light"] .cin-navbar {



  background: rgba(250, 250, 248, 0.88);



}



[data-theme="light"] .cin-navbar.cin-scrolled {



  background: rgba(250, 250, 248, 0.97);



}



[data-theme="light"] .cin-map-wrap {



  filter: grayscale(0.2) brightness(1.0);



}



[data-theme="light"] .cin-btn-primary {



  color: #0A0A0A;



}



[data-theme="light"] .cin-btn-outline {



  border-color: rgba(0, 0, 0, 0.15);



  color: #1A1A1A;



}



[data-theme="light"] ::selection {



  background: var(--cin-gold);



  color: #FFFFFF;



}



/* ===============================================



   4. GLOBAL RESETS & BASE



   =============================================== */



*,



*::before,



*::after {



  box-sizing: border-box;



  margin: 0;



  padding: 0;



}



html {



  scroll-behavior: smooth;



  -webkit-text-size-adjust: 100%;



}



body {



  font-family: var(--cin-font-body);



  background-color: var(--cin-black);



  color: var(--cin-text);



  line-height: 1.65;



  font-weight: 300;



  -webkit-font-smoothing: antialiased;



  -moz-osx-font-smoothing: grayscale;



  overflow-x: hidden;



  text-rendering: optimizeLegibility;



  transition: background-color 0.5s ease, color 0.5s ease;



}



h1,



h2,



h3,



h4,



h5,



h6 {



  font-family: var(--cin-font-display);



  color: var(--cin-white);



  font-weight: 400;



  letter-spacing: 0.03em;



  line-height: 1.15;



}



h1 {



  font-size: clamp(2.75rem, 5.5vw, 4.5rem);



}



h2 {



  font-size: clamp(1.875rem, 3.5vw, 2.75rem);



}



h3 {



  font-size: clamp(1.375rem, 2.5vw, 1.75rem);



}



h4 {



  font-size: clamp(1.125rem, 2vw, 1.375rem);



}



p {



  font-family: var(--cin-font-body);



  color: var(--cin-text-muted);



  font-weight: 300;



  font-size: 1rem;



  line-height: 1.8;



}



a {



  color: var(--cin-gold);



  text-decoration: none;



  transition: color var(--cin-t);



  cursor: pointer;



}



a:hover {



  color: var(--cin-gold-light);



}



a:focus-visible {



  outline: 2px solid var(--cin-gold);



  outline-offset: 3px;



  border-radius: var(--cin-radius);



}



strong,



b {



  color: var(--cin-white);



  font-weight: 500;



}



::selection {



  background: var(--cin-gold);



  color: var(--cin-black);



}



img {



  max-width: 100%;



  height: auto;



  display: block;



}



/* ===============================================



   5. NAVIGATION — Standalone Floating Glass



   =============================================== */



.cin-navbar {



  position: fixed;



  top: 0;



  left: 0;



  right: 0;



  z-index: var(--cin-z-sticky);



  backdrop-filter: blur(30px) saturate(1.3);



  -webkit-backdrop-filter: blur(30px) saturate(1.3);



  background: rgba(10, 10, 10, 0.85);



  border-bottom: 1px solid var(--cin-border);



  transition: all 500ms var(--cin-ease-cinematic);



  padding: 0 2rem;



}



.cin-navbar-inner {



  max-width: 1200px;



  margin: 0 auto;



  display: flex;



  justify-content: space-between;



  align-items: center;



  height: 70px;



}



.cin-navbar-logo {



  display: flex;



  align-items: center;



}



.cin-navbar-logo img {



  height: 44px;



  width: auto;



  transition: opacity var(--cin-t);



}



.cin-navbar-logo img:hover {



  opacity: 0.85;



}



.cin-navbar-links {



  display: flex;



  list-style: none;



  gap: 2rem;



  align-items: center;



}



.cin-navbar-link {



  font-family: var(--cin-font-body);



  font-size: 0.8125rem;



  font-weight: 400;



  text-transform: uppercase;



  letter-spacing: 0.1em;



  color: var(--cin-text-muted);



  cursor: pointer;



  transition: color var(--cin-t), transform var(--cin-t);



  position: relative;



  text-decoration: none;



  padding: 0.5rem 0;



}



.cin-navbar-link:hover {



  color: var(--cin-white);



}



.cin-navbar-link.active {



  color: var(--cin-white);



}



.cin-navbar-link.active::after {



  content: '';



  position: absolute;



  bottom: -4px;



  left: 50%;



  transform: translateX(-50%);



  width: 24px;



  height: 2px;



  background: var(--cin-gold);



  box-shadow: 0 0 8px var(--cin-gold-glow);



  border-radius: 1px;



}



.cin-navbar.cin-scrolled {



  background: rgba(10, 10, 10, 0.97);



  border-bottom-color: var(--cin-border-hover);



  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);



}



.cin-navbar-actions {



  display: flex;



  gap: 0.75rem;



  align-items: center;



}



.cin-theme-toggle {



  width: 44px;



  height: 44px;



  border-radius: 50%;



  border: 1px solid var(--cin-border);



  background: var(--cin-glass);



  cursor: pointer;



  color: var(--cin-text-muted);



  display: flex;



  align-items: center;



  justify-content: center;



  transition: all var(--cin-t);



}



.cin-theme-toggle:hover {



  border-color: var(--cin-gold);



  color: var(--cin-gold);



}



.cin-theme-toggle svg {



  width: 20px;



  height: 20px;



}



/* Sun/Moon icon swap logic */



.cin-icon-sun {



  display: block;



}



.cin-icon-moon {



  display: none;



}



[data-theme="dark"] .cin-icon-moon {



  display: none;



}



[data-theme="dark"] .cin-icon-sun {



  display: block;



}



[data-theme="light"] .cin-icon-sun {



  display: none;



}



[data-theme="light"] .cin-icon-moon {



  display: block;



}



/* Hamburger menu button */



.cin-hamburger {



  width: 44px;



  height: 44px;



  display: none;



  align-items: center;



  justify-content: center;



  border-radius: 50%;



  border: 1px solid var(--cin-border);



  background: var(--cin-glass);



  cursor: pointer;



  color: var(--cin-text-muted);



  transition: all var(--cin-t);



}



.cin-hamburger:hover {



  border-color: var(--cin-gold);



  color: var(--cin-gold);



}



.cin-hamburger svg {



  width: 20px;



  height: 20px;



}



/* Mobile menu overlay */



.cin-mobile-menu {



  position: fixed;



  inset: 0;



  z-index: var(--cin-z-overlay);



  background: rgba(10, 10, 10, 0.98);



  backdrop-filter: blur(30px);



  -webkit-backdrop-filter: blur(30px);



  display: flex;



  flex-direction: column;



  justify-content: center;



  align-items: center;



  opacity: 0;



  pointer-events: none;



  transition: opacity 0.3s var(--cin-ease);



}



.cin-mobile-menu.active {



  opacity: 1;



  pointer-events: all;



}



.cin-mobile-menu a {



  font-family: var(--cin-font-body);



  font-size: 1.25rem;



  text-transform: uppercase;



  color: var(--cin-text);



  padding: 1.5rem;



  letter-spacing: 0.15em;



  transition: color var(--cin-t);



  display: block;



  text-decoration: none;



}



.cin-mobile-menu a:hover {



  color: var(--cin-gold);



}



.cin-mobile-menu-close {



  position: absolute;



  top: 1.5rem;



  right: 1.5rem;



  width: 44px;



  height: 44px;



  border-radius: 50%;



  border: 1px solid var(--cin-border);



  background: var(--cin-glass);



  cursor: pointer;



  color: var(--cin-text-muted);



  display: flex;



  align-items: center;



  justify-content: center;



  transition: all var(--cin-t);



}



.cin-mobile-menu-close:hover {



  border-color: var(--cin-gold);



  color: var(--cin-gold);



}



.cin-mobile-menu-close svg {



  width: 20px;



  height: 20px;



}



/* ===============================================



   6. HERO SECTION — Cinematic Video Background



   =============================================== */



.cin-hero {



  position: relative;



  min-height: 100vh;



  display: flex;



  align-items: center;



  justify-content: center;



  text-align: center;



  overflow: hidden;



  background: var(--cin-black);



}



.cin-hero-video {



  position: absolute;



  inset: 0;



  width: 100%;



  height: 100%;



  object-fit: cover;



  opacity: 0.35;



  filter: brightness(0.8) saturate(0.7);



}



/* Cinematic gradient overlay — triple layer */



.cin-hero::after {



  content: '';



  position: absolute;



  inset: 0;



  background:



    linear-gradient(180deg,



      rgba(10, 10, 10, 0.3) 0%,



      rgba(10, 10, 10, 0.1) 30%,



      rgba(10, 10, 10, 0.4) 60%,



      rgba(10, 10, 10, 0.95) 100%);



  z-index: var(--cin-z-base);



}



/* Cinematic film grain overlay */



.cin-hero::before {



  content: '';



  position: absolute;



  inset: 0;



  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");



  z-index: 2;



  pointer-events: none;



  opacity: 0.4;



  mix-blend-mode: overlay;



}



.cin-hero-content {



  position: relative;



  z-index: 3;



  max-width: 760px;



  padding: 0 2rem;



}



.cin-hero-logo {



  width: 90px;



  height: auto;



  margin: 0 auto 2.5rem;



  opacity: 0;



  animation: cinFadeScale 1.2s var(--cin-ease-cinematic) 0.3s forwards;



  filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.2));



}



.cin-hero h1 {



  font-family: var(--cin-font-display);



  font-size: clamp(2.5rem, 5vw, 4rem);



  color: var(--cin-white);



  font-weight: 400;



  letter-spacing: 0.1em;



  margin-bottom: 0.75rem;



  opacity: 0;



  animation: cinFadeUp 1s var(--cin-ease-cinematic) 0.6s forwards;



}



.cin-hero .cin-tagline {



  font-family: var(--cin-font-body);



  font-size: clamp(0.875rem, 1.5vw, 1.0625rem);



  color: var(--cin-text-muted);



  font-weight: 300;



  letter-spacing: 0.25em;



  text-transform: uppercase;



  margin-bottom: 1.25rem;



  opacity: 0;



  animation: cinFadeUp 1s var(--cin-ease-cinematic) 0.8s forwards;



}



.cin-gold-line {



  width: 60px;



  height: 1px;



  background: linear-gradient(90deg, transparent, var(--cin-gold), transparent);



  margin: 0 auto 2rem;



  opacity: 0;



  animation: cinExpand 1s var(--cin-ease-cinematic) 1s forwards;



  box-shadow: 0 0 12px var(--cin-gold-glow);



}



.cin-hero .cin-description {



  font-family: var(--cin-font-body);



  color: var(--cin-text);



  font-size: 1.0625rem;



  font-weight: 300;



  line-height: 1.85;



  margin-bottom: 2.5rem;



  opacity: 0;



  animation: cinFadeUp 1s var(--cin-ease-cinematic) 1.2s forwards;



}



.cin-hero-actions {



  display: flex;



  gap: 1rem;



  justify-content: center;



  flex-wrap: wrap;



  opacity: 0;



  animation: cinFadeUp 1s var(--cin-ease-cinematic) 1.4s forwards;



}



/* Scroll indicator */



.cin-scroll-indicator {



  position: absolute;



  bottom: 2rem;



  left: 50%;



  transform: translateX(-50%);



  z-index: 3;



  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 0.5rem;



  opacity: 0;



  animation: cinFadeIn 1s var(--cin-ease) 2s forwards;



}



.cin-scroll-indicator span {



  font-family: var(--cin-font-body);



  font-size: 0.6875rem;



  color: var(--cin-text-faint);



  letter-spacing: 0.15em;



  text-transform: uppercase;



}



.cin-scroll-line {



  width: 1px;



  height: 40px;



  background: linear-gradient(180deg, var(--cin-gold), transparent);



  animation: cinScrollPulse 2s var(--cin-ease) infinite;



}



/* ===============================================



   7. BUTTONS — Premium Design



   =============================================== */



.cin-btn-primary {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 8px;



  padding: 14px 40px;



  background: var(--cin-gold);



  color: var(--cin-black);



  font-family: var(--cin-font-body);



  font-weight: 500;



  font-size: 0.8125rem;



  letter-spacing: 0.14em;



  text-transform: uppercase;



  border: 1px solid var(--cin-gold);



  border-radius: var(--cin-radius);



  cursor: pointer;



  transition: all var(--cin-t);



  position: relative;



  overflow: hidden;



  text-decoration: none;



}



.cin-btn-primary::before {



  content: '';



  position: absolute;



  inset: 0;



  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);



  opacity: 0;



  transition: opacity var(--cin-t);



}



.cin-btn-primary:hover {



  background: var(--cin-gold-light);



  border-color: var(--cin-gold-light);



  color: var(--cin-black);



  box-shadow: var(--cin-shadow-gold-lg);



  transform: translateY(-1px);



}



.cin-btn-primary:hover::before {



  opacity: 1;



}



.cin-btn-primary:active {



  transform: translateY(0);



  box-shadow: var(--cin-shadow-gold);



}



.cin-btn-outline {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 8px;



  padding: 14px 40px;



  background: transparent;



  color: var(--cin-white);



  font-family: var(--cin-font-body);



  font-weight: 400;



  font-size: 0.8125rem;



  letter-spacing: 0.14em;



  text-transform: uppercase;



  border: 1px solid rgba(255, 255, 255, 0.15);



  border-radius: var(--cin-radius);



  cursor: pointer;



  transition: all var(--cin-t);



  position: relative;



  overflow: hidden;



  text-decoration: none;



}



.cin-btn-outline::before {



  content: '';



  position: absolute;



  inset: 0;



  background: var(--cin-glass);



  opacity: 0;



  transition: opacity var(--cin-t);



}



.cin-btn-outline:hover {



  border-color: var(--cin-gold);



  color: var(--cin-gold);



  box-shadow: 0 0 20px rgba(201, 168, 76, 0.08);



}



.cin-btn-outline:hover::before {



  opacity: 1;



}



.cin-btn-ghost {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  padding: 8px 0;



  background: none;



  border: none;



  color: var(--cin-gold);



  font-family: var(--cin-font-body);



  font-size: 0.8125rem;



  font-weight: 400;



  letter-spacing: 0.1em;



  text-transform: uppercase;



  cursor: pointer;



  transition: all var(--cin-t);



  text-decoration: none;



}



.cin-btn-ghost:hover {



  color: var(--cin-gold-light);



  gap: 12px;



}



.cin-btn-ghost svg {



  transition: transform var(--cin-t);



}



.cin-btn-ghost:hover svg {



  transform: translateX(4px);



}



/* Focus states */



.cin-btn-primary:focus-visible,



.cin-btn-outline:focus-visible,



.cin-btn-ghost:focus-visible {



  outline: 2px solid var(--cin-gold);



  outline-offset: 3px;



}



/* ===============================================



   8. SECTIONS & LAYOUT



   =============================================== */



.cin-section {



  padding: var(--cin-space-xl) var(--cin-space-md);



  position: relative;



}



.cin-section-dark {



  background: var(--cin-black);



}



.cin-section-elevated {



  background: var(--cin-dark);



}



.cin-section-gradient {



  background: linear-gradient(180deg, var(--cin-black) 0%, var(--cin-dark) 100%);



}



.cin-container {



  max-width: 1200px;



  margin: 0 auto;



  padding: 0 var(--cin-space-md);



}



.cin-container-narrow {



  max-width: 800px;



  margin: 0 auto;



  padding: 0 var(--cin-space-md);



}



.cin-container-wide {



  max-width: 1440px;



  margin: 0 auto;



  padding: 0 var(--cin-space-md);



}



/* Section header */



.cin-section-header {



  text-align: center;



  margin-bottom: var(--cin-space-lg);



}



.cin-section-label {



  font-family: var(--cin-font-body);



  font-size: 0.75rem;



  color: var(--cin-gold);



  font-weight: 400;



  letter-spacing: 0.25em;



  text-transform: uppercase;



  margin-bottom: 0.75rem;



  display: block;



}



.cin-section-title {



  font-family: var(--cin-font-display);



  font-size: clamp(1.875rem, 3.5vw, 2.75rem);



  color: var(--cin-white);



  font-weight: 400;



  margin-bottom: 1rem;



}



.cin-section-desc {



  font-family: var(--cin-font-body);



  font-size: 1rem;



  color: var(--cin-text-muted);



  font-weight: 300;



  max-width: 600px;



  margin: 0 auto;



  line-height: 1.8;



}



.cin-section-line {



  width: 50px;



  height: 1px;



  background: linear-gradient(90deg, transparent, var(--cin-gold), transparent);



  margin: 1.5rem auto 0;



  box-shadow: 0 0 8px var(--cin-gold-glow);



}



/* Section divider */



.cin-divider {



  width: 100%;



  height: 1px;



  background: linear-gradient(90deg, transparent 0%, var(--cin-border) 20%, var(--cin-gold-glow) 50%, var(--cin-border) 80%, transparent 100%);



  margin: 0;



}



/* ===============================================



   9. GRID SYSTEM



   =============================================== */



.cin-grid-2 {



  display: grid;



  grid-template-columns: 1fr;



  gap: 2rem;



}



.cin-grid-3 {



  display: grid;



  grid-template-columns: 1fr;



  gap: 2rem;



}



.cin-grid-4 {



  display: grid;



  grid-template-columns: 1fr;



  gap: 1.5rem;



}



@media (min-width: 640px) {



  .cin-grid-2 {



    grid-template-columns: repeat(2, 1fr);



  }



  .cin-grid-4 {



    grid-template-columns: repeat(2, 1fr);



  }



}



@media (min-width: 768px) {



  .cin-grid-3 {



    grid-template-columns: repeat(3, 1fr);



  }



}



@media (min-width: 1024px) {



  .cin-grid-4 {



    grid-template-columns: repeat(4, 1fr);



  }



}



/* ===============================================



   10. FILM CARDS — Glass + Cinematic Hover



   =============================================== */



.cin-film-card {



  position: relative;



  background: var(--cin-dark-card);



  overflow: hidden;



  border: 1px solid var(--cin-border);



  transition: all var(--cin-t-slow);



  cursor: pointer;



  border-radius: var(--cin-radius-md);



}



.cin-film-card:hover {



  border-color: var(--cin-border-hover);



  transform: translateY(-6px);



  box-shadow: var(--cin-shadow-lg), 0 0 40px rgba(201, 168, 76, 0.06);



}



.cin-film-card .cin-poster-wrap {



  position: relative;



  overflow: hidden;



}



.cin-film-card .cin-poster {



  width: 100%;



  aspect-ratio: 2/3;



  object-fit: cover;



  transition: transform var(--cin-t-slow), filter var(--cin-t-slow);



  display: block;



}



.cin-film-card:hover .cin-poster {



  transform: scale(1.06);



  filter: brightness(1.05);



}



/* Poster overlay — gradient reveal */



.cin-film-card .cin-poster-overlay {



  position: absolute;



  inset: 0;



  background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 10, 0.95) 100%);



  opacity: 0;



  transition: opacity var(--cin-t);



}



.cin-film-card:hover .cin-poster-overlay {



  opacity: 1;



}



/* Play button overlay */



.cin-film-card .cin-play-overlay {



  position: absolute;



  top: 50%;



  left: 50%;



  transform: translate(-50%, -50%) scale(0.8);



  width: 56px;



  height: 56px;



  background: rgba(201, 168, 76, 0.9);



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  opacity: 0;



  transition: all var(--cin-t);



  box-shadow: 0 0 30px rgba(201, 168, 76, 0.3);



}



.cin-film-card:hover .cin-play-overlay {



  opacity: 1;



  transform: translate(-50%, -50%) scale(1);



}



.cin-film-card .cin-play-overlay svg {



  width: 20px;



  height: 20px;



  color: var(--cin-black);



  margin-left: 3px;



}



.cin-film-card .cin-card-body {



  padding: 1.5rem;



}



.cin-film-card .cin-card-year {



  font-family: var(--cin-font-body);



  font-size: 0.6875rem;



  color: var(--cin-gold);



  font-weight: 400;



  letter-spacing: 0.15em;



  text-transform: uppercase;



  margin-bottom: 0.375rem;



}



.cin-film-card .cin-card-title {



  font-family: var(--cin-font-display);



  font-size: 1.25rem;



  color: var(--cin-white);



  margin-bottom: 0.5rem;



  line-height: 1.3;



  transition: color var(--cin-t);



}



.cin-film-card:hover .cin-card-title {



  color: var(--cin-gold-light);



}



.cin-film-card .cin-card-meta {



  font-family: var(--cin-font-body);



  font-size: 0.8125rem;



  color: var(--cin-text-muted);



  font-weight: 300;



  line-height: 1.6;



}



.cin-film-card .cin-card-badge {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  padding: 6px 14px;



  background: var(--cin-gold-subtle);



  border: 1px solid rgba(201, 168, 76, 0.15);



  border-radius: var(--cin-radius);



  font-family: var(--cin-font-body);



  font-size: 0.6875rem;



  color: var(--cin-gold);



  letter-spacing: 0.05em;



  margin-top: 0.75rem;



  transition: all var(--cin-t);



}



.cin-film-card:hover .cin-card-badge {



  background: rgba(201, 168, 76, 0.12);



  border-color: rgba(201, 168, 76, 0.25);



}



/* Synopsis avec line-clamp */



.cin-card-synopsis {



  margin-top: 8px;



  font-size: 0.85rem;



  color: var(--cin-text-muted);



  line-height: 1.5;



  display: -webkit-box;



  -webkit-line-clamp: 3;



  line-clamp: 3;



  -webkit-box-orient: vertical;



  box-orient: vertical;



  overflow: hidden;



}



/* ===============================================



   11. DOCUMENTARY CARDS — Widescreen Format



   =============================================== */



.cin-doc-card {



  position: relative;



  background: var(--cin-dark-card);



  border: 1px solid var(--cin-border);



  overflow: hidden;



  transition: all var(--cin-t-slow);



  border-radius: var(--cin-radius-md);



  cursor: pointer;



  display: flex;



  flex-direction: column;



  height: 100%;



}



.cin-doc-card:hover {



  border-color: var(--cin-border-hover);



  transform: translateY(-4px);



  box-shadow: var(--cin-shadow-lg);



}



/* Image container with fixed aspect ratio */



.cin-doc-card .cin-doc-image {



  position: relative;



  width: 100%;



  aspect-ratio: 16/9;



  overflow: hidden;



  flex-shrink: 0;



}



.cin-doc-card .cin-doc-image img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform var(--cin-t-slow), filter var(--cin-t-slow);



}



.cin-doc-card:hover .cin-doc-image img {



  transform: scale(1.05);



  filter: brightness(1.05);



}



/* Duration badge on image */



.cin-doc-card .cin-duration-badge {



  position: absolute;



  bottom: 12px;



  right: 12px;



  padding: 4px 10px;



  background: rgba(10, 10, 10, 0.85);



  backdrop-filter: blur(8px);



  -webkit-backdrop-filter: blur(8px);



  border-radius: var(--cin-radius);



  font-family: var(--cin-font-body);



  font-size: 0.6875rem;



  color: var(--cin-white);



  letter-spacing: 0.05em;



  z-index: 5;



}



/* Play button overlay for doc cards */



.cin-doc-card .cin-play-overlay {



  position: absolute;



  top: 50%;



  left: 50%;



  transform: translate(-50%, -50%) scale(0.8);



  width: 64px;



  height: 64px;



  background: rgba(201, 168, 76, 0.9);



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  opacity: 0;



  transition: all var(--cin-t);



  box-shadow: 0 0 30px rgba(201, 168, 76, 0.3);



  z-index: 10;



}



.cin-doc-card:hover .cin-play-overlay {



  opacity: 1;



  transform: translate(-50%, -50%) scale(1);



}



.cin-doc-card .cin-play-overlay svg {



  width: 24px;



  height: 24px;



  color: var(--cin-black);



  margin-left: 3px;



}



/* Gradient overlay on doc image hover */



.cin-doc-card .cin-doc-image::after {



  content: '';



  position: absolute;



  inset: 0;



  background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 10, 0.7) 100%);



  opacity: 0;



  transition: opacity var(--cin-t);



  pointer-events: none;



}



.cin-doc-card:hover .cin-doc-image::after {



  opacity: 1;



}



.cin-doc-card .cin-doc-body {



  padding: 1.5rem;



  display: flex;



  flex-direction: column;



  flex: 1;



}



.cin-doc-card .cin-doc-meta {



  display: flex;



  gap: 1rem;



  flex-wrap: wrap;



  margin-bottom: 0.75rem;



}



.cin-doc-card .cin-doc-tag {



  font-family: var(--cin-font-body);



  font-size: 0.6875rem;



  color: var(--cin-text-muted);



  letter-spacing: 0.1em;



  text-transform: uppercase;



}



.cin-doc-card .cin-doc-title {



  font-family: var(--cin-font-display);



  font-size: 1.375rem;



  color: var(--cin-white);



  margin-bottom: 0.5rem;



  transition: color var(--cin-t);



}



.cin-doc-card:hover .cin-doc-title {



  color: var(--cin-gold-light);



}



.cin-doc-card .cin-doc-desc {



  font-size: 0.9375rem;



  color: var(--cin-text-muted);



  font-weight: 300;



  line-height: 1.75;



  margin-bottom: 1rem;



  flex: 1;



}



.cin-doc-card .cin-watch-link {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  font-family: var(--cin-font-body);



  font-size: 0.8125rem;



  color: var(--cin-gold);



  letter-spacing: 0.08em;



  text-transform: uppercase;



  font-weight: 400;



  transition: all var(--cin-t);



  cursor: pointer;



  text-decoration: none;



  margin-top: auto;



}



.cin-doc-card .cin-watch-link:hover {



  color: var(--cin-gold-light);



  gap: 12px;



}



.cin-doc-card .cin-watch-link svg {



  transition: transform var(--cin-t);



}



.cin-doc-card .cin-watch-link:hover svg {



  transform: translateX(4px);



}



.cin-doc-card .cin-card-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 6px 14px;

  background: var(--cin-gold-subtle);

  border: 1px solid rgba(201, 168, 76, 0.15);

  border-radius: var(--cin-radius);

  font-family: var(--cin-font-body);

  font-size: 0.6875rem;

  color: var(--cin-gold);

  letter-spacing: 0.05em;

  margin-top: 0.75rem;

  transition: all var(--cin-t);

}



.cin-doc-card:hover .cin-card-badge {

  background: rgba(201, 168, 76, 0.12);

  border-color: rgba(201, 168, 76, 0.25);

}



/* ===============================================

   12. STATS SECTION — Liquid Glass Cards

   =============================================== */

.cin-stats-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1.5rem;

  max-width: 900px;

  margin: 3rem auto;

}



@media (min-width: 768px) {

  .cin-stats-grid {

    grid-template-columns: repeat(4, 1fr);

    gap: 2rem;

  }

}



.cin-stat-item {

  position: relative;

  text-align: center;

  padding: 2.5rem 1.5rem;

  border: 1px solid var(--cin-border);

  border-radius: var(--cin-radius-lg);

  background: var(--cin-glass);

  transition: all var(--cin-t-reveal);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

}



.cin-stat-item::before {

  content: '';

  position: absolute;

  inset: 0;

  background: radial-gradient(circle at center, var(--cin-gold-glow) 0%, transparent 70%);

  opacity: 0;

  transition: opacity var(--cin-t);

}



.cin-stat-item:hover {

  border-color: var(--cin-border-hover);

  background: var(--cin-glass-hover);

  transform: translateY(-5px);

  box-shadow: var(--cin-shadow-gold);

}



.cin-stat-item:hover::before {

  opacity: 1;

}



.cin-stat-number {

  font-family: var(--cin-font-display);

  font-size: clamp(2.25rem, 5vw, 3.5rem);

  color: var(--cin-gold);

  font-weight: 600;

  line-height: 1;

  margin-bottom: 0.75rem;

  position: relative;

  z-index: 1;

  text-shadow: 0 0 20px rgba(201, 168, 76, 0.2);

}



.cin-stat-label {

  font-family: var(--cin-font-body);

  font-size: 0.8125rem;

  color: var(--cin-white-soft);

  letter-spacing: 0.15em;

  text-transform: uppercase;

  font-weight: 500;

  position: relative;

  z-index: 1;

  opacity: 0.8;

}



@media (max-width: 576px) {

  .cin-stats-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 1rem;

    padding: 0 1rem;

  }

  .cin-stat-item {

    padding: 1.5rem 1rem;

    aspect-ratio: 1;

  }

  .cin-stat-number {

    font-size: 2rem;

  }

  .cin-stat-label {

    font-size: 0.6875rem;

    letter-spacing: 0.1em;

  }

}



/* ===============================================

   13. ABOUT SECTION

   =============================================== */

.cin-about-content {

  max-width: 760px;

  margin: 0 auto;

}



.cin-about-content p {

  font-size: 1.0625rem;

  color: var(--cin-text);

  line-height: 1.9;

  margin-bottom: 1.75rem;

}



.cin-about-content strong {

  color: var(--cin-white);

  font-weight: 500;

}



.cin-about-image {

  width: 100%;

  max-width: 760px;

  margin: 0 auto 3rem;

  display: block;

  border: 1px solid var(--cin-border);

  border-radius: var(--cin-radius-md);

  transition: border-color var(--cin-t);

}



.cin-about-image:hover {



  border-color: var(--cin-border-hover);



}



/* Quote / Highlight */



.cin-about-highlight {



  font-family: var(--cin-font-display);



  font-size: clamp(1.25rem, 2.5vw, 1.75rem);



  color: var(--cin-white);



  font-weight: 400;



  font-style: italic;



  text-align: center;



  max-width: 640px;



  margin: 3rem auto;



  line-height: 1.55;



  padding: 2.5rem 0;



  border-top: 1px solid var(--cin-border);



  border-bottom: 1px solid var(--cin-border);



  position: relative;



}



.cin-about-highlight::before {



  content: '\201C';



  font-family: var(--cin-font-display);



  font-size: 4rem;



  color: var(--cin-gold);



  position: absolute;



  top: 0.5rem;



  left: 50%;



  transform: translateX(-50%);



  line-height: 1;



  opacity: 0.4;



}



/* ===============================================



   14. DIAPORAMA / SLIDESHOW



   =============================================== */



.cin-diaporama {



  position: relative;



  width: 100%;



  aspect-ratio: 16/9;



  overflow: hidden;



  border-radius: var(--cin-radius-lg);



  border: 1px solid var(--cin-border);



}



.cin-diaporama-track {



  position: relative;



  width: 100%;



  height: 100%;



}



.cin-diaporama-slide {



  position: absolute;



  inset: 0;



  opacity: 0;



  transition: opacity 1.5s ease;



}



.cin-diaporama-slide.active {



  opacity: 1;



}



.cin-diaporama-slide img {



  width: 100%;



  height: 100%;



  object-fit: cover;



}



.cin-diaporama-controls {



  position: absolute;



  bottom: 1.5rem;



  left: 50%;



  transform: translateX(-50%);



  display: flex;



  align-items: center;



  gap: 1rem;



  z-index: 5;



}



.cin-diaporama-prev,



.cin-diaporama-next {



  width: 44px;



  height: 44px;



  border-radius: 50%;



  border: 1px solid rgba(255, 255, 255, 0.2);



  background: rgba(10, 10, 10, 0.5);



  backdrop-filter: blur(8px);



  -webkit-backdrop-filter: blur(8px);



  color: white;



  cursor: pointer;



  transition: all var(--cin-t);



  display: flex;



  align-items: center;



  justify-content: center;



}



.cin-diaporama-prev:hover,



.cin-diaporama-next:hover {



  border-color: var(--cin-gold);



  color: var(--cin-gold);



  background: rgba(10, 10, 10, 0.7);



}



.cin-diaporama-prev svg,



.cin-diaporama-next svg {



  width: 20px;



  height: 20px;



}



.cin-diaporama-dots {



  display: flex;



  gap: 8px;



}



.cin-diaporama-dot {



  width: 10px;



  height: 10px;



  border-radius: 50%;



  border: 1px solid rgba(255, 255, 255, 0.3);



  background: transparent;



  cursor: pointer;



  transition: all var(--cin-t);



  padding: 0;



}



.cin-diaporama-dot.active {



  background: var(--cin-gold);



  border-color: var(--cin-gold);



}



.cin-diaporama-dot:hover {



  border-color: var(--cin-gold);



}



.cin-diaporama-progress {



  position: absolute;



  bottom: 0;



  left: 0;



  height: 2px;



  background: var(--cin-gold);



  width: 0%;



  transition: none;



}



/* ===============================================



   15. LIGHTBOX GALLERY



   =============================================== */



.cin-lightbox {



  position: fixed;



  inset: 0;



  z-index: var(--cin-z-modal);



  background: rgba(0, 0, 0, 0.95);



  backdrop-filter: blur(8px);



  -webkit-backdrop-filter: blur(8px);



  display: flex;



  align-items: center;



  justify-content: center;



  opacity: 0;



  pointer-events: none;



  transition: opacity 0.3s var(--cin-ease);



}



.cin-lightbox.active {



  opacity: 1;



  pointer-events: all;



}



.cin-lightbox-content {



  position: relative;



  max-width: 90vw;



  max-height: 85vh;



}



.cin-lightbox-img {



  max-width: 100%;



  max-height: 85vh;



  object-fit: contain;



  border-radius: var(--cin-radius-md);



  transition: transform 0.5s var(--cin-ease-cinematic);



}



.cin-lightbox-close {



  position: absolute;



  top: -50px;



  right: 0;



  width: 44px;



  height: 44px;



  border-radius: 50%;



  border: 1px solid rgba(255, 255, 255, 0.2);



  background: rgba(255, 255, 255, 0.05);



  color: white;



  cursor: pointer;



  transition: all var(--cin-t);



  display: flex;



  align-items: center;



  justify-content: center;



}



.cin-lightbox-close:hover {



  border-color: var(--cin-gold);



  color: var(--cin-gold);



}



.cin-lightbox-close svg {



  width: 20px;



  height: 20px;



}



.cin-lightbox-prev,



.cin-lightbox-next {



  position: absolute;



  top: 50%;



  transform: translateY(-50%);



  width: 44px;



  height: 44px;



  border-radius: 50%;



  border: 1px solid rgba(255, 255, 255, 0.2);



  background: rgba(10, 10, 10, 0.5);



  backdrop-filter: blur(8px);



  -webkit-backdrop-filter: blur(8px);



  color: white;



  cursor: pointer;



  transition: all var(--cin-t);



  display: flex;



  align-items: center;



  justify-content: center;



}



.cin-lightbox-prev {



  left: -60px;



}



.cin-lightbox-next {



  right: -60px;



}



.cin-lightbox-prev:hover,



.cin-lightbox-next:hover {



  border-color: var(--cin-gold);



  color: var(--cin-gold);



  background: rgba(10, 10, 10, 0.7);



}



.cin-lightbox-prev svg,



.cin-lightbox-next svg {



  width: 20px;



  height: 20px;



}



.cin-lightbox-counter {



  position: absolute;



  bottom: -40px;



  left: 50%;



  transform: translateX(-50%);



  font-family: var(--cin-font-body);



  font-size: 0.8125rem;



  color: var(--cin-text-muted);



  letter-spacing: 0.1em;



}



/* ===============================================



   16. VIDEO MODAL



   =============================================== */



.cin-video-modal {



  position: fixed;



  inset: 0;



  z-index: var(--cin-z-modal);



  background: rgba(0, 0, 0, 0.95);



  display: flex;



  align-items: center;



  justify-content: center;



  opacity: 0;



  pointer-events: none;



  transition: opacity 0.3s var(--cin-ease);



}



.cin-video-modal.active {



  opacity: 1;



  pointer-events: all;



}



.cin-video-modal-content {



  width: 90vw;



  max-width: 1100px;



  aspect-ratio: 16/9;



  border-radius: var(--cin-radius-md);



  overflow: hidden;



}



.cin-video-modal-content iframe,



.cin-video-modal-content video {



  width: 100%;



  height: 100%;



  border: none;



}



.cin-video-modal-close {



  position: fixed;



  top: 1.5rem;



  right: 1.5rem;



  width: 44px;



  height: 44px;



  border-radius: 50%;



  border: 1px solid rgba(255, 255, 255, 0.2);



  background: rgba(255, 255, 255, 0.05);



  color: white;



  cursor: pointer;



  transition: all var(--cin-t);



  display: flex;



  align-items: center;



  justify-content: center;



  z-index: var(--cin-z-toast);



}



.cin-video-modal-close:hover {



  border-color: var(--cin-gold);



  color: var(--cin-gold);



}



.cin-video-modal-close svg {



  width: 20px;



  height: 20px;



}



/* ===============================================



   16b. DOC CARD SMALL — Compact variant



   =============================================== */



.cin-doc-card-small {



  background: var(--cin-glass);



  border: 1px solid var(--cin-border);



  padding: 0;



}



.cin-doc-card-small .cin-doc-image {



  aspect-ratio: 16/9;



  overflow: hidden;



}



.cin-doc-card-small .cin-doc-image img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform var(--cin-t-slow);



}



.cin-doc-card-small:hover .cin-doc-image img {



  transform: scale(1.05);



}



.cin-doc-card-small .cin-doc-body {



  padding: 1.25rem;



}



.cin-doc-card-small .cin-doc-title {



  font-size: 1.125rem;



  margin-bottom: 0.25rem;



}



.cin-doc-card-small .cin-doc-desc {



  font-size: 0.85rem;



  line-height: 1.6;



}



/* Doc tags */



.cin-doc-tags {



  display: flex;



  gap: 0.5rem;



  flex-wrap: wrap;



  margin-bottom: 0.75rem;



}



.cin-tag {



  font-family: var(--cin-font-body);



  font-size: 0.6875rem;



  color: var(--cin-text-muted);



  letter-spacing: 0.1em;



  text-transform: uppercase;



  padding: 3px 10px;



  border: 1px solid var(--cin-border);



  border-radius: var(--cin-radius);



  transition: all var(--cin-t);



}



.cin-doc-card:hover .cin-tag {



  border-color: var(--cin-border-hover);



}



/* Grid secondary spacing */



.cin-grid-secondary {



  margin-top: 2rem;



}



/* ===============================================



   16c. VIDEO EMBEDS — Responsive iframes



   =============================================== */



.cin-section-subheader {



  text-align: center;



  margin: 3rem 0 2rem;



}



.cin-section-subheader h3 {



  font-family: var(--cin-font-display);



  color: var(--cin-gold);



  font-size: 1.3rem;



  font-weight: 400;



  letter-spacing: 0.02em;



}



.cin-video-embeds {



  margin-top: 1.5rem;



}



.cin-video-embed {



  border-radius: var(--cin-radius-md);



  overflow: hidden;



  background: var(--cin-surface, var(--cin-dark-card));



  border: 1px solid var(--cin-border);



  transition: all var(--cin-t-slow);



}



.cin-video-embed:hover {



  border-color: var(--cin-border-hover);



  box-shadow: var(--cin-shadow-lg);



}



.cin-video-ratio {



  position: relative;



  padding-bottom: 56.25%;



  /* 16:9 */



  height: 0;



}



.cin-video-ratio iframe {



  position: absolute;



  inset: 0;



  width: 100%;



  height: 100%;



  border: none;



}



/* YouTube/Vimeo thumbnail cards */



.cin-video-thumb {



  display: block;



  text-decoration: none;



  cursor: pointer;



  position: relative;



}



.cin-video-thumb:focus-visible {



  outline: 2px solid var(--cin-gold);



  outline-offset: 3px;



  border-radius: var(--cin-radius-md);



}



.cin-video-thumb .cin-video-ratio img {



  position: absolute;



  inset: 0;



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform var(--cin-t-slow), filter var(--cin-t-slow);



}



.cin-video-thumb:hover .cin-video-ratio img,



.cin-video-thumb:focus-visible .cin-video-ratio img {



  transform: scale(1.05);



  filter: brightness(1.1);



}



.cin-video-play-btn {



  position: absolute;



  inset: 0;



  display: flex;



  align-items: center;



  justify-content: center;



  z-index: 2;



  color: rgba(255, 255, 255, 0.85);



  transition: color var(--cin-t);



  pointer-events: none;



}



.cin-video-thumb:hover .cin-video-play-btn,



.cin-video-thumb:focus-visible .cin-video-play-btn {



  color: var(--cin-gold);



}



.cin-video-play-btn svg {



  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));



}



/* Video embed with data-video-url (clickable) */



.cin-video-embed[data-video-url] {



  cursor: pointer;



  transition: all var(--cin-t-slow);



}



.cin-video-embed[data-video-url]:hover {



  border-color: var(--cin-gold);



  box-shadow: 0 0 30px rgba(201, 168, 76, 0.15);



}



.cin-video-embed[data-video-url]:focus-visible {



  outline: 2px solid var(--cin-gold);



  outline-offset: 3px;



  border-color: var(--cin-gold);



}



/* ===============================================



   16d. BACK TO TOP BUTTON



   =============================================== */



.cin-back-to-top {



  position: fixed;



  bottom: 2rem;



  right: 2rem;



  z-index: var(--cin-z-sticky);



  width: 48px;



  height: 48px;



  border-radius: 50%;



  background: var(--cin-gold);



  color: var(--cin-black);



  border: none;



  cursor: pointer;



  opacity: 0;



  pointer-events: none;



  transform: translateY(10px);



  transition: all 0.3s var(--cin-ease);



  display: flex;



  align-items: center;



  justify-content: center;



  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);



}



.cin-back-to-top.visible {



  opacity: 1;



  pointer-events: all;



  transform: translateY(0);



}



.cin-back-to-top:hover {



  transform: translateY(-3px);



  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.4);



}



.cin-back-to-top:focus-visible {



  outline: 2px solid var(--cin-gold);



  outline-offset: 3px;



}



.cin-back-to-top svg {



  width: 20px;



  height: 20px;



}



[data-theme="light"] .cin-back-to-top {



  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);



}



[data-theme="light"] .cin-back-to-top:hover {



  box-shadow: 0 6px 24px rgba(166, 138, 58, 0.3);



}



/* ===============================================



   16e. CONTACT EXTRAS — Missing classes



   =============================================== */



.cin-contact-socials {



  display: flex;



  gap: 0.75rem;



  margin-top: 1.5rem;



}



.cin-contact-socials a {



  width: 44px;



  height: 44px;



  display: flex;



  align-items: center;



  justify-content: center;



  border: 1px solid var(--cin-border);



  border-radius: 50%;



  color: var(--cin-text-muted);



  transition: all var(--cin-t);



  background: var(--cin-glass);



  cursor: pointer;



  text-decoration: none;



}



.cin-contact-socials a:hover {



  border-color: var(--cin-gold);



  color: var(--cin-gold);



  background: var(--cin-gold-subtle);



  transform: translateY(-2px);



}



.cin-contact-cta {



  position: relative;



  z-index: 2;



}



.cin-contact-cta .cin-btn-primary {



  position: relative;



  z-index: 3;



  display: inline-flex;



}



.cin-contact-map {



  position: relative;



  z-index: 1;



}



.cin-contact-cta h3 {



  font-family: var(--cin-font-display);



  font-size: 1.375rem;



  color: var(--cin-white);



  margin-bottom: 1rem;



}



.cin-contact-map:hover {



  filter: grayscale(0.3) brightness(0.85);



}



[data-theme="light"] .cin-contact-map {



  filter: grayscale(0.2) brightness(1.0);



}



[data-theme="light"] .cin-contact-map:hover {



  filter: grayscale(0) brightness(1.0);



}



.cin-contact-map iframe {



  width: 100%;



  height: 280px;



  border: none;



  display: block;



}



.cin-footer-socials {



  display: flex;



  gap: 0.75rem;



  margin-top: 1rem;



}



.cin-footer-socials a {



  width: 36px;



  height: 36px;



  display: flex;



  align-items: center;



  justify-content: center;



  border: 1px solid var(--cin-border);



  border-radius: 50%;



  color: var(--cin-text-muted);



  transition: all var(--cin-t);



  cursor: pointer;



  text-decoration: none;



}



.cin-footer-socials a:hover {



  border-color: var(--cin-gold);



  color: var(--cin-gold);



  }



}



.cin-gallery-grid:empty::before {



  content: 'Chargement de la galerie...';



  grid-column: 1 / -1;



  text-align: center;



  padding: 3rem;



  color: var(--cin-text-muted);



  font-size: 0.875rem;



}



.cin-gallery-item {



  position: relative;



  overflow: hidden;



  aspect-ratio: 1;



  cursor: pointer;



  background: var(--cin-dark-card);



  border: 1px solid var(--cin-border);



  border-radius: var(--cin-radius-md);



  opacity: 0;



  animation: cinFadeIn 0.5s var(--cin-ease) forwards;



}



.cin-gallery-item:nth-child(1) {



  animation-delay: 0.1s;



}



.cin-gallery-item:nth-child(2) {



  animation-delay: 0.2s;



}



.cin-gallery-item:nth-child(3) {



  animation-delay: 0.3s;



}



.cin-gallery-item:nth-child(4) {



  animation-delay: 0.4s;



}



.cin-gallery-item:nth-child(5) {



  animation-delay: 0.5s;



}



.cin-gallery-item:nth-child(6) {



  animation-delay: 0.6s;



}



.cin-gallery-item:nth-child(7) {



  animation-delay: 0.7s;



}



.cin-gallery-item:nth-child(8) {



  animation-delay: 0.8s;



}



.cin-gallery-item img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform var(--cin-t-slow), filter var(--cin-t-slow);



  display: block;



}



.cin-gallery-item:hover img {



  transform: scale(1.08);



  filter: brightness(1.1);



}



.cin-gallery-item::after {



  content: '';



  position: absolute;



  inset: 0;



  background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 10, 0.7) 100%);



  opacity: 0;



  transition: opacity var(--cin-t);



  pointer-events: none;



}



.cin-gallery-item:hover::after {



  opacity: 1;



}



/* Gallery section specific */



#galerie {



  padding-top: 0 !important;



  margin-top: -2rem;



}



#galerie .cin-container-wide {



  padding: 0;



}



#dynamic-gallery {



  display: grid;



  grid-template-columns: repeat(2, 1fr);



  gap: 4px;



  min-height: 200px;



}



@media (min-width: 768px) {



  #dynamic-gallery {



    grid-template-columns: repeat(4, 1fr);



  }



}



#dynamic-gallery .cin-gallery-item {



  opacity: 0;



  transform: scale(0.9);



  transition: opacity 0.6s var(--cin-ease-cinematic), transform 0.6s var(--cin-ease-cinematic);



}



#dynamic-gallery .cin-gallery-item.cin-visible {



  opacity: 1;



  transform: scale(1);



}



/* ===============================================



   18. CONTACT SECTION



   =============================================== */



.cin-contact-grid {



  display: grid;



  grid-template-columns: 1fr;



  gap: 3rem;



  max-width: 960px;



  margin: 0 auto;



}



@media (min-width: 768px) {



  .cin-contact-grid {



    grid-template-columns: 1fr 1fr;



  }



}



.cin-contact-info h3 {



  font-family: var(--cin-font-display);



  font-size: 1.375rem;



  color: var(--cin-white);



  margin-bottom: 1.5rem;



}



.cin-contact-item {



  display: flex;



  align-items: flex-start;



  gap: 14px;



  margin-bottom: 1.5rem;



  padding: 1rem 1.25rem;



  background: var(--cin-glass);



  border: 1px solid var(--cin-border);



  border-radius: var(--cin-radius-md);



  transition: all var(--cin-t);



}



.cin-contact-item:hover {



  border-color: var(--cin-border-hover);



  background: var(--cin-glass-hover);



}



.cin-contact-item svg {



  width: 20px;



  height: 20px;



  color: var(--cin-gold);



  flex-shrink: 0;



  margin-top: 1px;



}



.cin-contact-item p {



  color: var(--cin-text);



  font-size: 0.9375rem;



  margin: 0;



  line-height: 1.6;



}



.cin-contact-item a {



  color: var(--cin-text);



  transition: color var(--cin-t);



}



.cin-contact-item a:hover {



  color: var(--cin-gold);



}



/* Social links */



.cin-social-links {



  display: flex;



  gap: 0.75rem;



  margin-top: 2rem;



}



.cin-social-link {



  width: 48px;



  height: 48px;



  display: flex;



  align-items: center;



  justify-content: center;



  border: 1px solid var(--cin-border);



  border-radius: 50%;



  color: var(--cin-text-muted);



  transition: all var(--cin-t);



  background: var(--cin-glass);



  cursor: pointer;



  text-decoration: none;



}



.cin-social-link:hover {



  border-color: var(--cin-gold);



  color: var(--cin-gold);



  background: var(--cin-gold-subtle);



  box-shadow: 0 0 20px rgba(201, 168, 76, 0.1);



  transform: translateY(-2px);



}



.cin-social-link svg {



  width: 18px;



  height: 18px;



}



/* Google Map */



.cin-map-wrap {



  width: 100%;



  aspect-ratio: 16/9;



  border-radius: var(--cin-radius-md);



  overflow: hidden;



  border: 1px solid var(--cin-border);



  filter: grayscale(0.8) brightness(0.7);



  transition: filter var(--cin-t-slow);



}



.cin-map-wrap:hover {



  filter: grayscale(0.3) brightness(0.85);



}



.cin-map-wrap iframe {



  width: 100%;



  height: 100%;



  border: none;



}



/* ===============================================



   19. FOOTER — Elegant Minimal



   =============================================== */



.cin-footer {



  background: var(--cin-dark);



  border-top: 1px solid var(--cin-border);



  padding: var(--cin-space-xl) var(--cin-space-md) var(--cin-space-md);



}



.cin-footer-grid {



  display: grid;



  grid-template-columns: 1fr;



  gap: 3rem;



  max-width: 1200px;



  margin: 0 auto;



}



@media (min-width: 768px) {



  .cin-footer-grid {



    grid-template-columns: 2fr 1fr 1fr;



  }



}



.cin-footer-brand {



  max-width: 360px;



}



.cin-footer-logo {



  width: 48px;



  height: auto;



  margin-bottom: 1rem;



  opacity: 0.8;



}



.cin-footer-brand p {



  font-size: 0.875rem;



  color: var(--cin-text-muted);



  line-height: 1.7;



}



.cin-footer-heading {



  font-family: var(--cin-font-body);



  font-size: 0.75rem;



  color: var(--cin-gold);



  letter-spacing: 0.2em;



  text-transform: uppercase;



  margin-bottom: 1.25rem;



}



.cin-footer-links {



  list-style: none;



  padding: 0;



  margin: 0;



}



.cin-footer-links li {



  margin-bottom: 0.75rem;



}



.cin-footer-links a {



  color: var(--cin-text-muted);



  font-size: 0.875rem;



  transition: color var(--cin-t);



  cursor: pointer;



  text-decoration: none;



}



.cin-footer-links a:hover {



  color: var(--cin-gold);



}



.cin-footer-bottom {



  border-top: 1px solid var(--cin-border);



  padding-top: 2rem;



  margin-top: 3rem;



  display: flex;



  justify-content: space-between;



  align-items: center;



  flex-wrap: wrap;



  gap: 1rem;



  max-width: 1200px;



  margin-left: auto;



  margin-right: auto;



}



.cin-footer-copyright {



  font-family: var(--cin-font-body);



  font-size: 0.75rem;



  color: var(--cin-text-faint);



  letter-spacing: 0.06em;



}



/* ===============================================



   20. FORMS



   =============================================== */



.cin-form-group {



  margin-bottom: 1.5rem;



}



.cin-form-label {



  display: block;



  font-family: var(--cin-font-body);



  font-size: 0.8125rem;



  color: var(--cin-white);



  letter-spacing: 0.08em;



  text-transform: uppercase;



  margin-bottom: 0.5rem;



  font-weight: 400;



}



.cin-form-input,



.cin-form-textarea {



  width: 100%;



  padding: 14px 18px;



  background: var(--cin-dark-elevated);



  border: 1px solid var(--cin-border);



  border-radius: var(--cin-radius-md);



  color: var(--cin-text);



  font-family: var(--cin-font-body);



  font-size: 0.9375rem;



  font-weight: 300;



  transition: border-color var(--cin-t), box-shadow var(--cin-t);



  -webkit-appearance: none;



  -moz-appearance: none;



  appearance: none;



}



.cin-form-input:focus,



.cin-form-textarea:focus {



  border-color: var(--cin-gold);



  outline: none;



  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1);



}



.cin-form-input::placeholder,



.cin-form-textarea::placeholder {



  color: var(--cin-text-faint);



}



.cin-form-textarea {



  min-height: 150px;



  resize: vertical;



}



/* ===============================================



   21. SCROLLBAR — Minimal



   =============================================== */



::-webkit-scrollbar {



  width: 4px;



}



::-webkit-scrollbar-track {



  background: var(--cin-black);



}



::-webkit-scrollbar-thumb {



  background: var(--cin-dark-surface);



  border-radius: 2px;



}



::-webkit-scrollbar-thumb:hover {



  background: var(--cin-gold-dark);



}



/* Firefox */



html {



  scrollbar-width: thin;



  scrollbar-color: var(--cin-dark-surface) var(--cin-black);



}



/* Light theme scrollbar */



[data-theme="light"] ::-webkit-scrollbar-track {



  background: var(--cin-black);



}



[data-theme="light"] ::-webkit-scrollbar-thumb {



  background: var(--cin-dark-surface);



}



[data-theme="light"] ::-webkit-scrollbar-thumb:hover {



  background: var(--cin-gold-dark);



}



/* ===============================================



   22. ANIMATIONS — Cinematic System



   =============================================== */



@keyframes cinFadeUp {



  from {



    opacity: 0;



    transform: translateY(30px);



  }



  to {



    opacity: 1;



    transform: translateY(0);



  }



}



@keyframes cinFadeIn {



  from {



    opacity: 0;



  }



  to {



    opacity: 1;



  }



}



@keyframes cinFadeScale {



  from {



    opacity: 0;



    transform: scale(0.85);



  }



  to {



    opacity: 1;



    transform: scale(1);



  }



}



@keyframes cinExpand {



  from {



    opacity: 0;



    width: 0;



  }



  to {



    opacity: 1;



    width: 60px;



  }



}



@keyframes cinSlideLeft {



  from {



    opacity: 0;



    transform: translateX(-40px);



  }



  to {



    opacity: 1;



    transform: translateX(0);



  }



}



@keyframes cinSlideRight {



  from {



    opacity: 0;



    transform: translateX(40px);



  }



  to {



    opacity: 1;



    transform: translateX(0);



  }



}



@keyframes cinScrollPulse {



  0%,



  100% {



    opacity: 0.3;



    transform: scaleY(1);



  }



  50% {



    opacity: 0.8;



    transform: scaleY(1.2);



    transform-origin: top;



  }



}



@keyframes cinShimmer {



  0% {



    background-position: -200% 0;



  }



  100% {



    background-position: 200% 0;



  }



}



@keyframes cinGoldPulse {



  0%,



  100% {



    box-shadow: 0 0 0 0 rgba(201, 168, 76, 0);



  }



  50% {



    box-shadow: 0 0 20px 4px rgba(201, 168, 76, 0.1);



  }



}



/* Scroll-triggered animation classes */



.cin-animate {



  opacity: 0;



  transform: translateY(20px);



  transition: opacity 0.8s var(--cin-ease-cinematic), transform 0.8s var(--cin-ease-cinematic);



}



.cin-animate.cin-visible {



  opacity: 1;



  transform: translateY(0);



}



/* Directional variants */



.cin-animate-left {



  opacity: 0;



  transform: translateX(-30px);



  transition: opacity 0.8s var(--cin-ease-cinematic), transform 0.8s var(--cin-ease-cinematic);



}



.cin-animate-left.cin-visible {



  opacity: 1;



  transform: translateX(0);



}



.cin-animate-right {



  opacity: 0;



  transform: translateX(30px);



  transition: opacity 0.8s var(--cin-ease-cinematic), transform 0.8s var(--cin-ease-cinematic);



}



.cin-animate-right.cin-visible {



  opacity: 1;



  transform: translateX(0);



}



.cin-animate-scale {



  opacity: 0;



  transform: scale(0.9);



  transition: opacity 0.8s var(--cin-ease-cinematic), transform 0.8s var(--cin-ease-cinematic);



}



.cin-animate-scale.cin-visible {



  opacity: 1;



  transform: scale(1);



}



/* Stagger delays */



.cin-animate-delay-1 {



  transition-delay: 0.1s;



}



.cin-animate-delay-2 {



  transition-delay: 0.2s;



}



.cin-animate-delay-3 {



  transition-delay: 0.3s;



}



.cin-animate-delay-4 {



  transition-delay: 0.4s;



}



.cin-animate-delay-5 {



  transition-delay: 0.5s;



}



.cin-animate-delay-6 {



  transition-delay: 0.6s;



}



.cin-animate-delay-7 {



  transition-delay: 0.7s;



}



.cin-animate-delay-8 {



  transition-delay: 0.8s;



}



/* Loading skeleton shimmer */



.cin-skeleton {



  background: linear-gradient(90deg, var(--cin-dark-card) 25%, var(--cin-dark-elevated) 50%, var(--cin-dark-card) 75%);



  background-size: 200% 100%;



  animation: cinShimmer 1.5s infinite;



  border-radius: var(--cin-radius);



}



/* ===============================================



   23. ACCESSIBILITY



   =============================================== */



/* Reduced motion */



@media (prefers-reduced-motion: reduce) {



  *,



  *::before,



  *::after {



    animation-duration: 0.01ms !important;



    animation-iteration-count: 1 !important;



    transition-duration: 0.01ms !important;



    scroll-behavior: auto !important;



  }



  .cin-animate,



  .cin-animate-left,



  .cin-animate-right,



  .cin-animate-scale {



    opacity: 1;



    transform: none;



  }



  .cin-hero-video {



    display: none;



  }



  .cin-film-card:hover,



  .cin-doc-card:hover {



    transform: none;



  }



  .cin-film-card:hover .cin-poster,



  .cin-doc-card:hover .cin-doc-image {



    transform: none;



  }



  .cin-gallery-item:hover img {



    transform: none;



  }



  .cin-social-link:hover {



    transform: none;



  }



  .cin-btn-primary:hover,



  .cin-btn-outline:hover {



    transform: none;



  }



  .cin-scroll-indicator {



    display: none;



  }



  .cin-diaporama-slide {



    transition: none;



  }



  .cin-lightbox-img {



    transition: none;



  }



}



/* Skip to content link */



.cin-skip-link {



  position: absolute;



  top: -100%;



  left: 50%;



  transform: translateX(-50%);



  background: var(--cin-gold);



  color: var(--cin-black);



  padding: 12px 24px;



  font-family: var(--cin-font-body);



  font-size: 0.875rem;



  font-weight: 500;



  z-index: 999;



  border-radius: 0 0 var(--cin-radius-md) var(--cin-radius-md);



  transition: top var(--cin-t);



  text-decoration: none;



}



.cin-skip-link:focus {



  top: 0;



}



/* Focus visible for all interactive elements */



button:focus-visible,



input:focus-visible,



select:focus-visible,



textarea:focus-visible {



  outline: 2px solid var(--cin-gold);



  outline-offset: 2px;



}



/* Screen reader only text */



.cin-sr-only {



  position: absolute;



  width: 1px;



  height: 1px;



  padding: 0;



  margin: -1px;



  overflow: hidden;



  clip: rect(0, 0, 0, 0);



  white-space: nowrap;



  border-width: 0;



}



/* ===============================================



   24. RESPONSIVE



   =============================================== */



/* --- Mobile base (max-width: 767px) --- */



@media (max-width: 767px) {



  .cin-section {



    padding: 4rem 1.25rem;



  }



  .cin-hero {



    min-height: 90vh;



  }



  .cin-hero-actions {



    flex-direction: column;



    align-items: center;



  }



  .cin-hero h1 {



    font-size: 2.25rem;



  }



  .cin-hero-logo {



    width: 64px;



    margin-bottom: 1.5rem;



  }



  .cin-hero-content {



    padding: 0 1.25rem;



  }



  .cin-section-header {



    margin-bottom: 2.5rem;



  }



  .cin-container,



  .cin-container-narrow,



  .cin-container-wide {



    padding: 0 1.25rem;



  }



  /* Nav: hide desktop links, show hamburger */



  .cin-navbar-links {



    display: none;



  }



  .cin-hamburger {



    display: flex;



  }



  .cin-navbar {



    padding: 0 1rem;



  }



  .cin-navbar-inner {



    height: 60px;



  }



  .cin-navbar-logo img {



    height: 36px;



  }



  /* Grids single column */



  .cin-grid-2,



  .cin-grid-3,



  .cin-grid-4 {



    grid-template-columns: 1fr;



    gap: 1.5rem;



  }



  /* Film detail stack */



  .cin-film-detail {



    grid-template-columns: 1fr;



    text-align: center;



  }



  .cin-film-detail .cin-detail-poster {



    max-width: 220px;



    margin: 0 auto;



  }



  .cin-film-detail .cin-detail-body {



    text-align: left;



  }



  /* Stats grid: 2 cols on mobile */



  .cin-stats-grid {



    grid-template-columns: repeat(2, 1fr);



    max-width: 100%;



  }



  /* Gallery: 2 cols */



  .cin-gallery-grid {



    grid-template-columns: repeat(2, 1fr);



  }



  /* Contact grid stacked */



  .cin-contact-grid {



    grid-template-columns: 1fr;



    gap: 2.5rem;



  }



  /* Footer grid stacked */



  .cin-footer-grid {



    grid-template-columns: 1fr;



    gap: 2.5rem;



  }



  .cin-footer {



    padding: 3.5rem 1.25rem 1.5rem;



  }



  .cin-footer-brand {



    max-width: 100%;



  }



  .cin-footer-bottom {



    flex-direction: column;



    text-align: center;



    gap: 1rem;



  }



  /* Social links centered */



  .cin-social-links {



    justify-content: center;



  }



  /* Buttons full width on small mobile */



  .cin-btn-primary,



  .cin-btn-outline {



    justify-content: center;



  }



  /* Lightbox responsive: prev/next below instead of sides */



  .cin-lightbox-prev,



  .cin-lightbox-next {



    top: auto;



    bottom: -60px;



    transform: none;



  }



  .cin-lightbox-prev {



    left: calc(50% - 54px);



  }



  .cin-lightbox-next {



    right: calc(50% - 54px);



  }



  .cin-lightbox-counter {



    bottom: -90px;



  }



  .cin-lightbox-close {



    top: -50px;



    right: 0;



  }



  /* Diaporama responsive */



  .cin-diaporama {



    border-radius: var(--cin-radius-md);



  }



  .cin-diaporama-controls {



    bottom: 1rem;



    gap: 0.5rem;



  }



  .cin-diaporama-prev,



  .cin-diaporama-next {



    width: 36px;



    height: 36px;



  }



  .cin-diaporama-prev svg,



  .cin-diaporama-next svg {



    width: 16px;



    height: 16px;



  }



  .cin-diaporama-dot {



    width: 8px;



    height: 8px;



  }



  /* Play overlay smaller on mobile */



  .cin-film-card .cin-play-overlay {



    width: 44px;



    height: 44px;



  }



  .cin-film-card .cin-play-overlay svg {



    width: 16px;



    height: 16px;



  }



  /* Map */



  .cin-map-wrap {



    aspect-ratio: 4/3;



  }



  /* Scroll indicator */



  .cin-scroll-indicator span {



    font-size: 0.625rem;



  }



  /* Reduce animation intensity */



  .cin-animate {



    transform: translateY(10px);



  }



  .cin-animate-left {



    transform: translateX(-15px);



  }



  .cin-animate-right {



    transform: translateX(15px);



  }



  .cin-animate-scale {



    transform: scale(0.95);



  }



  /* Divider subtle */



  .cin-divider {



    opacity: 0.5;



  }



  /* Testimonials */



  .cin-testimonial-card {



    padding: 1.5rem;



  }



  .cin-testimonial-text {



    font-size: 0.9375rem;



  }



  /* Form grid */



  .cin-form-grid {



    grid-template-columns: 1fr;



  }



  /* Doc cards */



  .cin-doc-card .cin-doc-meta {



    gap: 0.5rem;



  }



  /* Video modal */



  .cin-video-modal-content {



    width: 95vw;



  }



  .cin-video-modal-close {



    top: 1rem;



    right: 1rem;



  }



  /* About */



  .cin-about-content p {



    font-size: 0.9375rem;



  }



  .cin-about-image {



    margin-bottom: 2rem;



  }



  .cin-about-highlight {



    font-size: 1.125rem;



    padding: 1.5rem 0;



  }



}



/* --- Small phone (max-width: 480px) --- */



@media (max-width: 480px) {



  .cin-hero {



    min-height: 85vh;



    padding: 0 1rem;



  }



  .cin-hero h1 {



    font-size: 2rem;



    letter-spacing: 0.04em;



  }



  .cin-hero .cin-tagline {



    font-size: 0.75rem;



    letter-spacing: 0.12em;



  }



  .cin-hero .cin-description {



    font-size: 0.875rem;



    line-height: 1.7;



  }



  .cin-hero-logo {



    width: 56px;



    margin-bottom: 1.5rem;



  }



  .cin-hero-content {



    padding: 0 1rem;



  }



  /* Buttons full width */



  .cin-btn-primary,



  .cin-btn-outline {



    padding: 12px 28px;



    font-size: 0.75rem;



    width: 100%;



    text-align: center;



  }



  /* Sections */



  .cin-section {



    padding: 3rem 1rem;



  }



  .cin-section-title {



    font-size: 1.5rem;



  }



  .cin-section-label {



    font-size: 0.6875rem;



  }



  .cin-section-desc {



    font-size: 0.875rem;



  }



  .cin-container,



  .cin-container-narrow,



  .cin-container-wide {



    padding: 0 1rem;



  }



  /* Typography */



  h1 {



    font-size: 2rem;



  }



  h2 {



    font-size: 1.5rem;



  }



  h3 {



    font-size: 1.25rem;



  }



  /* Film cards */



  .cin-film-card .cin-card-body {



    padding: 1rem;



  }



  .cin-film-card .cin-card-title {



    font-size: 1rem;



  }



  .cin-film-card .cin-card-badge {



    font-size: 0.625rem;



    padding: 5px 10px;



  }



  /* Doc cards */



  .cin-doc-card .cin-doc-body {



    padding: 1rem;



  }



  .cin-doc-card .cin-doc-title {



    font-size: 1.125rem;



  }



  .cin-doc-card .cin-doc-desc {



    font-size: 0.875rem;



  }



  .cin-doc-card .cin-duration-badge {



    font-size: 0.625rem;



    padding: 3px 8px;



  }



  /* Stats */



  .cin-stats-grid {



    gap: 1rem;



    margin: 2rem auto;



  }



  .cin-stat-item {



    padding: 1rem 0.75rem;



  }



  .cin-stat-number {



    font-size: 1.75rem;



  }



  .cin-stat-label {



    font-size: 0.6875rem;



  }



  /* Gallery */



  .cin-gallery-grid {



    gap: 2px;



  }



  /* Contact */



  .cin-contact-grid {



    gap: 2rem;



  }



  .cin-contact-item {



    padding: 0.75rem 1rem;



    gap: 10px;



  }



  .cin-contact-item svg {



    width: 18px;



    height: 18px;



  }



  /* Footer */



  .cin-footer {



    padding: 3rem 1rem 1.5rem;



  }



  .cin-footer-bottom {



    flex-direction: column;



    text-align: center;



    gap: 1rem;



  }



  /* Form inputs */



  .cin-form-input,



  .cin-form-textarea {



    padding: 12px 14px;



    font-size: 0.875rem;



  }



  /* Video wrap */



  .cin-video-wrap {



    border-radius: var(--cin-radius);



  }



  /* Scroll indicator */



  .cin-scroll-indicator {



    bottom: 1.5rem;



  }



  .cin-scroll-indicator span {



    font-size: 0.625rem;



  }



  .cin-scroll-line {



    height: 30px;



  }



}



/* --- Small Tablet (640-767px) --- */



@media (min-width: 640px) and (max-width: 767px) {



  .cin-grid-2 {



    grid-template-columns: 1fr;



  }



  .cin-grid-3 {



    grid-template-columns: repeat(2, 1fr);



  }



  .cin-grid-3 .cin-doc-card-small:last-child {



    grid-column: 1 / -1;



    max-width: 50%;



    margin: 0 auto;



  }



  .cin-hero h1 {



    font-size: 2.25rem;



  }



  .cin-section-title {



    font-size: 1.75rem;



  }



  .cin-stats-grid {



    grid-template-columns: repeat(2, 1fr);



    max-width: 400px;



  }



  .cin-video-embeds {



    grid-template-columns: 1fr;



  }



  .cin-contact-grid {



    grid-template-columns: 1fr;



  }



}



/* --- Back-to-top mobile position --- */



@media (max-width: 767px) {



  .cin-back-to-top {



    bottom: 1.25rem;



    right: 1.25rem;



    width: 44px;



    height: 44px;



  }



}



/* --- Video embeds mobile --- */



@media (max-width: 480px) {



  .cin-video-embeds.cin-grid-2 {



    grid-template-columns: 1fr;



  }



}



/* --- Tablet (min-width: 768px) --- */



@media (min-width: 768px) {



  .cin-hero {



    min-height: 85vh;



  }



  .cin-hero h1 {



    font-size: 3rem;



  }



  .cin-section {



    padding: 5rem 2rem;



  }



  .cin-container {



    padding: 0 2rem;



  }



  .cin-grid-3 {



    grid-template-columns: repeat(3, 1fr);



  }



  .cin-grid-2 {



    grid-template-columns: repeat(2, 1fr);



  }



  .cin-grid-4 {



    grid-template-columns: repeat(2, 1fr);



  }



  .cin-stats-grid {



    grid-template-columns: repeat(4, 1fr);



    max-width: 900px;



  }



  .cin-gallery-grid {



    grid-template-columns: repeat(4, 1fr);



  }



  .cin-contact-grid {



    grid-template-columns: 1fr 1fr;



    gap: 2.5rem;



  }



  .cin-footer-grid {



    grid-template-columns: 2fr 1fr 1fr;



  }



  .cin-film-detail {



    grid-template-columns: 240px 1fr;



    gap: 2.5rem;



  }



  .cin-doc-card .cin-doc-body {



    padding: 1.5rem;



  }



}



/* --- Desktop (min-width: 1024px) --- */



@media (min-width: 1024px) {



  .cin-hero h1 {



    font-size: 3.5rem;



  }



  .cin-section {



    padding: 5.5rem 2rem;



  }



  .cin-grid-4 {



    grid-template-columns: repeat(4, 1fr);



  }



  .cin-film-detail {



    grid-template-columns: 280px 1fr;



  }



}



/* --- Large desktop (min-width: 1440px) --- */



@media (min-width: 1440px) {



  .cin-container {



    max-width: 1320px;



  }



  .cin-hero h1 {



    font-size: 4rem;



  }



  .cin-section {



    padding: 7rem 2rem;



  }



  .cin-container-wide {



    max-width: 1440px;



  }



}



/* --- Ultrawide (min-width: 1920px) --- */



@media (min-width: 1920px) {



  .cin-container {



    max-width: 1440px;



  }



  .cin-hero-content {



    max-width: 900px;



  }



  .cin-section {



    padding: 8rem 2rem;



  }



}



/* --- Landscape phones --- */



@media (max-height: 500px) and (orientation: landscape) {



  .cin-hero {



    min-height: 100vh;



    padding: 2rem;



  }



  .cin-hero h1 {



    font-size: 2rem;



    margin-bottom: 0.5rem;



  }



  .cin-hero .cin-tagline {



    margin-bottom: 0.5rem;



  }



  .cin-hero .cin-description {



    display: none;



  }



  .cin-gold-line {



    margin: 0 auto 1rem;



  }



  .cin-hero-logo {



    width: 48px;



    margin-bottom: 1rem;



  }



  .cin-scroll-indicator {



    display: none;



  }



  .cin-stats-grid {



    grid-template-columns: repeat(4, 1fr);



    gap: 1rem;



    margin: 1.5rem auto;



  }



  .cin-stat-item {



    padding: 0.75rem 0.5rem;



  }



}



/* iOS safe areas */



@supports (padding: max(0px)) {



  .cin-hero-content {



    padding-left: max(2rem, env(safe-area-inset-left));



    padding-right: max(2rem, env(safe-area-inset-right));



  }



  .cin-section {



    padding-left: max(2rem, env(safe-area-inset-left));



    padding-right: max(2rem, env(safe-area-inset-right));



  }



  .cin-footer {



    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));



  }



}



/* High contrast mode */



@media (prefers-contrast: high) {



  :root {



    --cin-text: #FFFFFF;



    --cin-text-muted: #CCCCCC;



    --cin-text-faint: #999999;



    --cin-border: rgba(255, 255, 255, 0.2);



    --cin-border-hover: rgba(201, 168, 76, 0.5);



  }



  .cin-film-card,



  .cin-doc-card,



  .cin-stat-item,



  .cin-contact-item,



  .cin-testimonial-card {



    border-width: 2px;



  }



  .cin-btn-primary {



    border-width: 2px;



    font-weight: 600;



  }



  .cin-btn-outline {



    border-width: 2px;



    border-color: rgba(255, 255, 255, 0.3);



  }



  .cin-section-line,



  .cin-gold-line,



  .cin-divider {



    height: 2px;



  }



  a:focus-visible,



  button:focus-visible {



    outline-width: 3px;



  }



}



/* ===============================================



   25. CAROUSELS — Home page sliders



   =============================================== */



.cin-films-carousel-wrapper {



  position: relative;



  display: flex;



  align-items: center;



  gap: 1rem;



  margin: 2rem 0;



}



.cin-films-carousel {



  display: flex;



  gap: 1.5rem;



  overflow-x: auto;



  scroll-snap-type: x mandatory;



  scroll-behavior: smooth;



  -webkit-overflow-scrolling: touch;



  padding: 1rem 0.5rem;



  scrollbar-width: none;



  -ms-overflow-style: none;



  flex: 1;



}



.cin-films-carousel::-webkit-scrollbar {



  display: none;



}



/* Show exactly 2 cards per viewport */



.cin-films-carousel .cin-film-card,



.cin-films-carousel .cin-doc-card {



  flex: 0 0 calc(50% - 0.75rem);



  min-width: 280px;



  scroll-snap-align: start;



  opacity: 1;



  transform: none;



  transition: transform 0.3s var(--cin-ease), box-shadow 0.3s var(--cin-ease);



}



@media (max-width: 768px) {



  .cin-films-carousel .cin-film-card,



  .cin-films-carousel .cin-doc-card {



    flex: 0 0 85%;



    min-width: 260px;



  }



}



@media (max-width: 480px) {



  .cin-films-carousel .cin-film-card,



  .cin-films-carousel .cin-doc-card {



    flex: 0 0 90%;



    min-width: 240px;



  }



}



.cin-carousel-prev,



.cin-carousel-next {



  width: 48px;



  height: 48px;



  border-radius: 50%;



  border: 1px solid var(--cin-border);



  background: var(--cin-glass);



  color: var(--cin-text-muted);



  cursor: pointer;



  display: flex;



  align-items: center;



  justify-content: center;



  transition: all var(--cin-t);



  flex-shrink: 0;



  z-index: 10;



}



.cin-carousel-prev:hover,



.cin-carousel-next:hover {



  border-color: var(--cin-gold);



  color: var(--cin-gold);



  background: var(--cin-gold-subtle);



}



.cin-carousel-prev svg,



.cin-carousel-next svg {



  width: 20px;



  height: 20px;



}



@media (max-width: 640px) {



  .cin-carousel-prev,



  .cin-carousel-next {



    width: 40px;



    height: 40px;



    display: none;



  }



}



/* Carousel Pagination */



.cin-carousel-pagination {



  display: flex;



  justify-content: center;



  gap: 0.5rem;



  margin-top: 1.5rem;



}



.cin-carousel-dot {



  width: 10px;



  height: 10px;



  border-radius: 50%;



  border: 1px solid var(--cin-border);



  background: transparent;



  cursor: pointer;



  transition: all var(--cin-t);



  padding: 0;



}



.cin-carousel-dot.active {



  background: var(--cin-gold);



  border-color: var(--cin-gold);



}



.cin-carousel-dot:hover {



  border-color: var(--cin-gold);



}



/* ===============================================



   26. UTILITY CLASSES



   =============================================== */



.cin-text-center {



  text-align: center;



}



.cin-text-gold {



  color: var(--cin-gold);



}



.cin-text-white {



  color: var(--cin-white);



}



.cin-text-muted {



  color: var(--cin-text-muted);



}



.cin-mt-xs {



  margin-top: var(--cin-space-xs);



}



.cin-mt-sm {



  margin-top: var(--cin-space-sm);



}



.cin-mt-md {



  margin-top: var(--cin-space-md);



}



.cin-mt-lg {



  margin-top: var(--cin-space-lg);



}



.cin-mt-xl {



  margin-top: var(--cin-space-xl);



}



.cin-mb-xs {



  margin-bottom: var(--cin-space-xs);



}



.cin-mb-sm {



  margin-bottom: var(--cin-space-sm);



}



.cin-mb-md {



  margin-bottom: var(--cin-space-md);



}



.cin-mb-lg {



  margin-bottom: var(--cin-space-lg);



}



.cin-mb-xl {



  margin-bottom: var(--cin-space-xl);



}



.cin-pt-sm {



  padding-top: var(--cin-space-sm);



}



.cin-pt-md {



  padding-top: var(--cin-space-md);



}



.cin-pt-lg {



  padding-top: var(--cin-space-lg);



}



.cin-pb-sm {



  padding-bottom: var(--cin-space-sm);



}



.cin-pb-md {



  padding-bottom: var(--cin-space-md);



}



.cin-pb-lg {



  padding-bottom: var(--cin-space-lg);



}



.cin-px-sm {



  padding-left: var(--cin-space-sm);



  padding-right: var(--cin-space-sm);



}



.cin-px-md {



  padding-left: var(--cin-space-md);



  padding-right: var(--cin-space-md);



}



.cin-py-sm {



  padding-top: var(--cin-space-sm);



  padding-bottom: var(--cin-space-sm);



}



.cin-py-md {



  padding-top: var(--cin-space-md);



  padding-bottom: var(--cin-space-md);



}



.cin-flex-center {



  display: flex;



  align-items: center;



  justify-content: center;



}



.cin-gap-xs {



  gap: var(--cin-space-xs);



}



.cin-gap-sm {



  gap: var(--cin-space-sm);



}



.cin-gap-md {



  gap: var(--cin-space-md);



}



.cin-hidden {



  display: none;



}



.cin-block {



  display: block;



}



.cin-inline-block {



  display: inline-block;



}



.cin-relative {



  position: relative;



}



.cin-overflow-hidden {



  overflow: hidden;



}



.cin-w-full {



  width: 100%;



}



.cin-mx-auto {



  margin-left: auto;



  margin-right: auto;



}



/* ===============================================



   26. PRINT STYLES



   =============================================== */



@media print {



  .cin-hero-video,



  .cin-hero::after,



  .cin-hero::before,



  .cin-navbar,



  .cin-mobile-menu,



  .cin-footer,



  .cin-scroll-indicator,



  .cin-play-overlay,



  .cin-map-wrap,



  .cin-social-links,



  .cin-btn-primary,



  .cin-btn-outline,



  .cin-btn-ghost,



  .cin-lightbox,



  .cin-video-modal,



  .cin-back-to-top,



  .cin-video-embeds,



  .cin-theme-toggle,



  .cin-hamburger,



  .cin-diaporama-controls,



  .cin-diaporama-progress {



    display: none !important;



  }



  body {



    background: white !important;



    color: #1a1a1a !important;



    font-size: 12pt;



  }



  h1,



  h2,



  h3,



  h4,



  h5,



  h6 {



    color: #000 !important;



    page-break-after: avoid;



  }



  p {



    color: #333 !important;



    line-height: 1.6;



  }



  a {



    color: #333 !important;



    text-decoration: underline;



  }



  a[href]::after {



    content: " (" attr(href) ")";



    font-size: 0.8em;



    color: #666;



  }



  .cin-section {



    padding: 1rem 0;



    background: white !important;



  }



  .cin-film-card,



  .cin-doc-card {



    border: 1px solid #ccc;



    break-inside: avoid;



  }



  .cin-gold-line,



  .cin-section-line,



  .cin-divider {



    background: #ccc;



  }



  img {



    max-width: 100% !important;



    page-break-inside: avoid;



  }



  .cin-hero {



    min-height: auto;



    padding: 2rem 0;



    background: white !important;



  }



  .cin-hero-content {



    max-width: 100%;



  }



  .cin-stat-item {



    border: 1px solid #ccc;



  }



  .cin-stat-number {



    color: #333 !important;



  }



  .cin-contact-item {



    border: 1px solid #ccc;



    background: none !important;



  }



}



/* ===============================================



   FILM FILTERS & STATUS BADGES



   =============================================== */



.cin-filter-btn {



  padding: 12px 24px;



  border: 2px solid var(--cin-border);



  background: transparent;



  color: var(--cin-text);



  border-radius: 8px;



  cursor: pointer;



  font-weight: 500;



  font-size: 0.95rem;



  transition: all 0.2s ease;



}



.cin-filter-btn:hover {



  border-color: var(--cin-gold);



  color: var(--cin-gold);



}



.cin-filter-btn.active {



  background: var(--cin-gold);



  border-color: var(--cin-gold);



  color: #0a0a0a;



}



.cin-filter-btn[data-filter="production"].active {



  background: #f59e0b;



  border-color: #f59e0b;



  color: #0a0a0a;



}



.cin-filter-btn[data-filter="released"].active {



  background: #10b981;



  border-color: #10b981;



  color: #0a0a0a;



}



/* Status badges */



.cin-status-badge {



  position: absolute;



  top: 12px;



  left: 12px;



  padding: 6px 12px;



  border-radius: 6px;



  font-size: 0.75rem;



  font-weight: 600;



  text-transform: uppercase;



  letter-spacing: 0.5px;



  z-index: 2;



}



.cin-status-production {



  background: #f59e0b;



  color: #0a0a0a;



}



.cin-status-released {



  background: #10b981;



  color: #0a0a0a;



}



/* ===============================================



   PRELOADER — Sandglass Animation



   =============================================== */



.cin-preloader {



  position: fixed;



  inset: 0;



  z-index: 99999;



  background: var(--cin-black);



  display: flex;



  align-items: center;



  justify-content: center;



  transition: opacity 0.6s var(--cin-ease-cinematic), visibility 0.6s var(--cin-ease-cinematic);



}



.cin-preloader.cin-hidden {



  opacity: 0;



  visibility: hidden;



  pointer-events: none;



}



.cin-preloader-content {



  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 2rem;



}



.cin-preloader-text {



  font-family: var(--cin-font-body);



  font-size: 0.875rem;



  color: var(--cin-text-muted);



  letter-spacing: 0.2em;



  text-transform: uppercase;



  animation: cinPulse 2s ease-in-out infinite;



}



/* Sandglass / Hourglass CSS Animation */



.cin-sandglass {



  position: relative;



  width: 40px;



  height: 60px;



  animation: cinSandglassRotate 3s ease-in-out infinite;



}



.cin-sandglass-top,



.cin-sandglass-bottom {



  position: absolute;



  width: 40px;



  height: 25px;



  border: 2px solid var(--cin-gold);



  background: transparent;



}



.cin-sandglass-top {



  top: 0;



  border-radius: 20px 20px 2px 2px;



  border-bottom-width: 1px;



  overflow: hidden;



}



.cin-sandglass-bottom {



  bottom: 0;



  border-radius: 2px 2px 20px 20px;



  border-top-width: 1px;



  overflow: hidden;



}



.cin-sandglass-middle {



  position: absolute;



  top: 50%;



  left: 50%;



  transform: translate(-50%, -50%);



  width: 4px;



  height: 10px;



  background: var(--cin-gold);



  border-radius: 2px;



}



/* Sand flow animation */



.cin-sandglass-top::after,



.cin-sandglass-bottom::after {



  content: '';



  position: absolute;



  left: 50%;



  transform: translateX(-50%);



  width: 2px;



  background: var(--cin-gold);



}



.cin-sandglass-top::after {



  top: 0;



  height: 100%;



  animation: cinSandTop 3s ease-in-out infinite;



  transform-origin: bottom;



}



.cin-sandglass-bottom::after {



  bottom: 0;



  height: 0%;



  animation: cinSandBottom 3s ease-in-out infinite;



  transform-origin: bottom;



}



/* Sand stream falling */



.cin-sand-flow {



  position: absolute;



  top: 25px;



  left: 50%;



  transform: translateX(-50%);



  width: 2px;



  height: 10px;



  background: var(--cin-gold);



  opacity: 0;



  animation: cinSandStream 3s ease-in-out infinite;



}



@keyframes cinSandglassRotate {



  0%, 45% {



    transform: rotate(0deg);



  }



  50%, 95% {



    transform: rotate(180deg);



  }



  100% {



    transform: rotate(180deg);



  }



}



@keyframes cinSandTop {



  0% {



    transform: translateX(-50%) scaleY(1);



  }



  45%, 50% {



    transform: translateX(-50%) scaleY(0);



  }



  95%, 100% {



    transform: translateX(-50%) scaleY(1);



  }



}



@keyframes cinSandBottom {



  0% {



    height: 0%;



  }



  45%, 50% {



    height: 100%;



  }



  95%, 100% {



    height: 0%;



  }



}



@keyframes cinSandStream {



  0%, 5% {



    opacity: 1;



    transform: translateX(-50%) scaleY(1);



  }



  45%, 55% {



    opacity: 0;



    transform: translateX(-50%) scaleY(0);



  }



  95%, 100% {



    opacity: 1;



    transform: translateX(-50%) scaleY(1);



  }



}



@keyframes cinPulse {



  0%, 100% {



    opacity: 0.5;



  }



  50% {



    opacity: 1;



  }



}



/* Hide body content initially to prevent flash */



body.cin-loading {



  overflow: hidden;



}



body.cin-loading > *:not(.cin-preloader) {



  opacity: 0;



}



body.cin-loaded > *:not(.cin-preloader) {



  opacity: 1;



  transition: opacity 0.3s ease;



}



/* ===============================================



   HERO SLIDER — Background image carousel



   =============================================== */



#hero-background-container {



  position: absolute;



  inset: 0;



  z-index: 0;



}



.cin-hero-slider {



  position: relative;



  width: 100%;



  height: 100%;



  overflow: hidden;



}



.cin-hero-slide {



  position: absolute;



  inset: 0;



  opacity: 0;



  transition: opacity 0.8s var(--cin-ease-cinematic);



}



.cin-hero-slide.active {



  opacity: 1;



}



.cin-hero-slide img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  filter: brightness(0.7) saturate(0.8);



}



/* Hero dots navigation */



.cin-hero-dots {



  position: absolute;



  bottom: 2rem;



  left: 50%;



  transform: translateX(-50%);



  display: flex;



  gap: 0.75rem;



  z-index: 5;



}



.cin-hero-dot {



  width: 12px;



  height: 12px;



  border-radius: 50%;



  border: 2px solid rgba(255, 255, 255, 0.3);



  background: transparent;



  cursor: pointer;



  transition: all var(--cin-t);



  padding: 0;



}



.cin-hero-dot:hover {



  border-color: var(--cin-gold);



}



.cin-hero-dot.active {



  background: var(--cin-gold);



  border-color: var(--cin-gold);



}



/* Hero arrows */



.cin-hero-arrow {



  position: absolute;



  top: 50%;



  transform: translateY(-50%);



  width: 50px;



  height: 50px;



  border-radius: 50%;



  border: 1px solid rgba(255, 255, 255, 0.2);



  background: rgba(10, 10, 10, 0.5);



  backdrop-filter: blur(8px);



  -webkit-backdrop-filter: blur(8px);



  color: white;



  cursor: pointer;



  transition: all var(--cin-t);



  display: flex;



  align-items: center;



  justify-content: center;



  z-index: 5;



}



.cin-hero-prev {



  left: 2rem;



}



.cin-hero-next {



  right: 2rem;



}



.cin-hero-arrow:hover {



  border-color: var(--cin-gold);



  color: var(--cin-gold);



  background: rgba(10, 10, 10, 0.7);



}



.cin-hero-arrow svg {



  width: 24px;



  height: 24px;



}



/* Responsive hero slider */



@media (max-width: 768px) {



  .cin-hero-arrow {



    width: 40px;



    height: 40px;



  }



  .cin-hero-prev {



    left: 1rem;



  }



  .cin-hero-next {



    right: 1rem;



  }



  .cin-hero-arrow svg {



    width: 20px;



    height: 20px;



  }



  .cin-hero-dots {



    bottom: 1.5rem;



    gap: 0.5rem;



  }



  .cin-hero-dot {



    width: 10px;



    height: 10px;



  }



}



/* Hide slider on mobile if video is disabled and no slides */



.cin-hero-slider:empty {



  display: none;



}



/* Ensure video positioning matches */



#hero-background-container .cin-hero-video {



  position: absolute;



  inset: 0;



  width: 100%;



  height: 100%;



  object-fit: cover;



  opacity: 0.35;



  filter: brightness(0.8) saturate(0.7);



}



/* Aspect ratio vertical 9:16 pour les bandes-annonces */

.cin-film-card.cin-video-card .cin-poster {

  aspect-ratio: 9/16;

  object-fit: contain;

  background-color: var(--cin-black, #0a0a0a);

}



/* ===============================================

   TOUCH DEVICES — Play buttons always visible

   (Android, tablet, macOS touch)

   @media (hover: none) = no hover capability

   =============================================== */



@media (hover: none) {



  /* Film cards — play button always visible */

  .cin-film-card .cin-play-overlay {

    opacity: 1;

    transform: translate(-50%, -50%) scale(0.95);

  }



  /* Film cards — poster gradient always visible */

  .cin-film-card .cin-poster-overlay {

    opacity: 0.7;

  }



  /* Documentary cards — play button always visible */

  .cin-doc-card .cin-play-overlay {

    opacity: 1;

    transform: translate(-50%, -50%) scale(0.95);

  }



  /* Documentary cards — image gradient always visible */

  .cin-doc-card .cin-doc-image::after {

    opacity: 0.7;

  }



}