:root{
  /* Palette claire: fond blanc, textes noirs, accents or */
  --bg:#FFFFFF; --bg-2:#FAFAFA; --text:#111111; --muted:#555555;
  --gold:#ab911d; --gold-2:#c8a01c; --accent:#b39d6b; --glass:rgba(0,0,0,.04);
  --border:#EEEEEE;
  --container:1200px;
  --header-h:5vh;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Ubuntu,Cantarell,sans-serif}
html{scroll-behavior:smooth}
section{scroll-margin-top:var(--header-h)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin-inline:auto;padding-inline:20px}
.row{display:flex;gap:16px;align-items:center}
.between{justify-content:space-between}.center{align-items:center}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:30;background:transparent;border-bottom-color:transparent;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;display:flex;justify-content:center;align-items:center}
.site-header.scrolled{background:rgba(255,255,255,.95);border-bottom:1px solid var(--border);backdrop-filter:saturate(180%) blur(8px);box-shadow:0 8px 22px rgba(0,0,0,.04)}
.header-inner{height:var(--header-h);width:70vw;display:flex;justify-content:space-between;align-items:center;padding:0}
/* .brand img{display:block;height:4.75vh;width:auto} REMOVED - Conflit avec système responsive */
.nav{display:flex;gap:18px}
.nav a{opacity:.9;color:#222;position:relative}
.site-header:not(.scrolled) .nav a{color:#F2F2F2}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--gold);transition:right .25s ease}
.nav a:hover:after{right:0}
.nav .btn{margin-left:8px}

/* Logo Header - Système VH 95% de la hauteur du header */
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--header-h) * 0.95); /* TOUJOURS 95% du header */
  padding: 0;
}

.brand img {
  display: block;
  height: 100%;
  width: auto;
  transition: opacity .25s ease, visibility .25s ease;
}

.brand .logo-dark {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  visibility: hidden;
}

.site-header.scrolled .brand .logo-white {
  opacity: 0;
  visibility: hidden;
}

.site-header.scrolled .brand .logo-dark {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   MENU MOBILE HAMBURGER
   ======================================== */

/* Bouton hamburger - masqué par défaut */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 31;
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background: var(--gold);
  margin: 2px 0;
  transition: all 0.3s ease;
  border-radius: 1px;
}

/* Animation hamburger -> X */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Menu mobile overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Menu mobile principal */
.mobile-menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background: linear-gradient(135deg, #FAFAFA 0%, #FFFFFF 50%, #F8F8F8 100%);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  border-left: 1px solid var(--gold);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
}

.mobile-menu-overlay.active .mobile-menu {
  transform: translateX(0);
}

/* Header du menu mobile */
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 2px solid rgba(171, 145, 29, 0.1);
  background: linear-gradient(135deg, rgba(171, 145, 29, 0.05) 0%, rgba(200, 160, 28, 0.08) 100%);
  backdrop-filter: blur(8px);
}

.mobile-menu-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #FFFFFF;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(171, 145, 29, 0.25);
}

.mobile-menu-close:hover {
  transform: scale(1.05) rotate(90deg);
  box-shadow: 0 6px 16px rgba(171, 145, 29, 0.35);
}

/* Liens du menu mobile */
.mobile-menu-links {
  padding: 20px 0;
}

.mobile-menu-links a {
  display: flex;
  align-items: center;
  padding: 18px 24px;
  color: var(--text);
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  border-radius: 0 24px 24px 0;
  margin: 2px 0;
  font-weight: 500;
  font-size: 16px;
}

.mobile-menu-links a:hover {
  background: linear-gradient(135deg, rgba(171, 145, 29, 0.08) 0%, rgba(200, 160, 28, 0.12) 100%);
  border-left-color: var(--gold);
  color: var(--gold);
  transform: translateX(4px);
}

.menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #FFFFFF;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.mobile-menu-links a:hover .menu-icon {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(171, 145, 29, 0.3);
}

.menu-icon svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Media queries pour afficher le menu mobile */
@media screen and (max-width: 768px) {
  :root {
    --header-h: 5vh;
  }

  /* Masquer navigation desktop */
  .nav-desktop {
    display: none;
  }

  /* Afficher bouton hamburger */
  .mobile-menu-toggle {
    display: flex;
    margin-left: auto;
  }

  .site-header {
    justify-content: flex-start;
  }

  .header-inner {
    width: 100%;
    padding: 0 16px;
    justify-content: space-between;
  }

  .brand {
    margin-right: auto;
  }

  /* Couleur hamburger selon état header */
  .site-header:not(.scrolled) .hamburger-line {
    background: #F2F2F2;
  }

  .site-header.scrolled .hamburger-line {
    background: var(--gold);
  }
}

/* Large Desktop (1366px - 1919px) - FIX 1440x900 */
@media screen and (min-width: 1366px) and (max-width: 1919px) {
  .brand {
    min-width: 240px;
    height: calc(var(--header-h) * 0.95); /* FORCE 95% du header VH */
  }

  .brand img {
    height: 100% !important; /* 100% du conteneur = 95% du header */
    width: auto !important;
  }

  /* Navigation plus compacte pour 1440x900 */
  .nav {
    gap: 15px; /* Réduction gap de 18px à 15px */
  }

  .nav a {
    font-size: 14px; /* Texte plus compact */
    opacity: 0.95;
  }

  :root {
  }
}

/* Standard Desktop/Laptop (1024px - 1365px) */
@media screen and (min-width: 1024px) and (max-width: 1365px) {
  .brand {
    min-width: 220px;
    height: calc(var(--header-h) * 0.95); /* Cohérence VH 95% */
  }

  .brand img {
    height: 100% !important;
    width: auto !important;
  }


  :root {
  }

  .header-inner {
    height: var(--header-h);
    width: 70vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
  }
}

/* Tablet Landscape (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .brand {
    min-width: 200px;
    height: calc(var(--header-h) * 0.95); /* 95% du header VH */
  }


  :root {
  }

  .header-inner {
    height: var(--header-h);
    width: 70vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
  }

  .nav {
    gap: 14px;
  }

  .nav a {
    font-size: 15px;
  }
}

/* Tablet Portrait (480px - 767px) */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .brand {
    min-width: 180px;
    height: calc(var(--header-h) * 0.95); /* 95% du header VH */
  }


  :root {
  }

  .header-inner {
    height: var(--header-h);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
  }

  .nav {
    gap: 12px;
  }

  .nav a {
    font-size: 14px;
  }

  .btn {
    padding: 8px 14px;
    font-size: 14px;
  }
}

/* Mobile (320px - 479px) */
@media screen and (max-width: 479px) {
  .brand {
    min-width: 160px;
    height: calc(var(--header-h) * 0.95); /* 95% du header VH */
  }


  :root {
  }

  .header-inner {
    height: var(--header-h);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
  }

  .nav {
    gap: 8px;
  }

  .nav a {
    font-size: 13px;
  }

  .btn {
    padding: 6px 12px;
    font-size: 13px;
  }

  .nav .btn {
    margin-left: 4px;
  }
}

/* Ultra Small Mobile (max 374px) */
@media screen and (max-width: 374px) {
  .brand {
    min-width: 140px;
    height: calc(var(--header-h) * 0.95); /* 95% du header VH */
  }


  :root {
  }

  .header-inner {
    height: var(--header-h);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
  }

  .nav {
    gap: 6px;
  }

  .nav a {
    font-size: 12px;
  }

  .btn {
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* High DPI/Retina Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .brand img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Motion preferences - Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .brand img {
    transition: opacity .1s ease;
  }
}

/* Dark mode support (future-proofing) */
@media (prefers-color-scheme: dark) {
  .site-header.scrolled {
    background: rgba(17, 17, 17, .95);
    border-bottom-color: #333;
  }
}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border:1px solid #DDDDDD;border-radius:999px;background:#F6F6F6;transition:.2s}
.btn:hover{transform:translateY(-1px);border-color:#CCCCCC}
.btn-gold{background:var(--gold);color:#111;font-weight:700;box-shadow:0 2px 14px rgba(171,145,29,.22);position:relative;overflow:hidden}
.btn-gold:before{content:"";position:absolute;top:-50%;left:-30%;width:40%;height:200%;transform:skewX(-20deg) translateX(-120%);background:linear-gradient(90deg,rgba(255,255,255,.0),rgba(255,255,255,.35),rgba(255,255,255,.0));transition:transform .5s}
.btn-gold:hover:before{transform:skewX(-20deg) translateX(260%)}
.btn-gold:hover{box-shadow:0 0 18px var(--gold), 0 2px 18px rgba(0,0,0,.06); background:linear-gradient(90deg,var(--gold) 60%, var(--gold-2) 100%)}

/* Hero */
.hero{position:relative;min-height:100vh !important;display:grid;place-items:center;padding:0;margin-top:0 !important} /* Hero garde 100vh - première section */
.hero-bg{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.30) 40%, rgba(0,0,0,.25) 100%),
  url('/assets/images/hero-portrait.jpg') center/cover no-repeat,
  radial-gradient(900px 480px at 30% 20%, rgba(171,145,29,.12), transparent 60%),
  radial-gradient(800px 320px at 80% 40%, rgba(0,0,0,.04), transparent 60%)}
.hero-bg{z-index:0}
.hero-inner{position:relative;z-index:1}
.hero--dark{color:#F2F2F2}
.hero--dark .lead{color:#EAEAEA}
.hero--dark .kicker{color:var(--gold)}
.hero-logo{height:clamp(192px,44vw,560px);width:auto;margin:0 auto 8px;filter:drop-shadow(0 10px 28px rgba(0,0,0,.35))}

/* Respiration Section */
.respiration-section {
  height: 50vh !important;
  min-height: 50vh !important;
  max-height: 50vh !important;
  display: grid;
  place-items: center;
  background: var(--bg);
  padding: 0;
}

.respiration-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.respiration-logo {
  height: clamp(120px,30vw,400px); /* Smaller and more adaptive than hero logo */
  width: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.respiration-logo:hover {
  opacity: 1;
}

/* Scroll indicator (mouse) */
.scroll-indicator{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:26px;height:42px;border:2px solid var(--gold);border-radius:16px;display:grid;place-items:center;opacity:.9;z-index:2}
.scroll-indicator::after{content:"";display:block;width:3px;height:8px;background:var(--gold);border-radius:2px;animation:scroll-indicator 1.4s ease-in-out infinite}
.scroll-indicator:hover{opacity:1}
@keyframes scroll-indicator{0%{transform:translateY(-8px);opacity:0}30%{opacity:1}100%{transform:translateY(8px);opacity:0}}
.hero-inner{position:relative;text-align:center}
.kicker{letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.hero h1{font-size:clamp(42px,8vw,84px);line-height:1.05;margin:.2em 0;font-weight:800}
.hero h1 em{font-style:normal;color:var(--gold)}
.lead{opacity:.85;max-width:720px;margin-inline:auto}
.cta{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}

/* Sections */
.section-title{font-family:"DM Serif Display",serif;font-size:clamp(28px,4vw,36px)}
.section-title{position:relative;padding-bottom:8px}
.section-title:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:72px;background:var(--gold);transform-origin:left;transform:scaleX(0);transition:transform .6s ease}
section.in-view .section-title:after{transform:scaleX(1)}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;padding:0 20px}
.photo-frame{aspect-ratio:4/5;background:#F9F9F9;border:1px solid #EAEAEA;border-radius:12px;}
.grid{display:grid;gap:12px}
.portfolio-preview{grid-template-columns:repeat(6,minmax(0,1fr))}
.portfolio-preview .ph{aspect-ratio:4/5;background:#F4F4F4;border:1px solid #EAEAEA;border-radius:10px;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.portfolio-preview .ph:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 8px 26px rgba(171,145,29,.15)}
.gallery{grid-template-columns:repeat(3,minmax(0,1fr));}
.gallery .card{border:1px solid #E6E6E6;border-radius:10px;overflow:hidden;background:#FFFFFF;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.gallery .card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 8px 26px rgba(171,145,29,.15)}
.gallery img{display:block;width:100%;height:100%;object-fit:cover}
.note{opacity:.7;margin-top:8px}

/* Videos */
.video-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:48px}
.video-card{position:relative;aspect-ratio:16/9;border:1px solid #E6E6E6;border-radius:10px;overflow:hidden;background:#FFFFFF;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.video-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 8px 26px rgba(171,145,29,.15)}
.video-card iframe{position:absolute;inset:0;width:100%;height:100%}

/* Ancien CSS videos-section supprimé - remplacé par version moderne */

.section-header{text-align:center;margin-bottom:48px}
.section-lead{opacity:.8;font-size:18px;margin-top:8px;max-width:600px;margin-inline:auto}

.video-spotlight{max-width:1000px;margin:0 auto}

/* Main Video Player */
.spotlight-main{margin-bottom:24px}
.video-player{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1);background:#000}
.video-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Thumbnail Navigation */
.spotlight-thumbnails{position:relative;padding:0 40px}
.thumbnails-scroll{display:flex;gap:16px;overflow:hidden;scroll-behavior:smooth;transition:transform .3s ease}

.video-thumbnail{position:relative;min-width:120px;height:90px;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .25s ease;border:2px solid transparent}
.video-thumbnail:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 4px 16px rgba(171,145,29,.2)}
.video-thumbnail.active{border-color:var(--gold);box-shadow:0 4px 16px rgba(171,145,29,.3);transform:translateY(-2px)}

.video-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.video-thumbnail:hover img{transform:scale(1.05)}

.thumbnail-overlay{position:absolute;inset:0;background:rgba(0,0,0,.3);display:grid;place-items:center;opacity:0;transition:opacity .25s ease}
.video-thumbnail:hover .thumbnail-overlay{opacity:1}
.video-thumbnail.active .thumbnail-overlay{opacity:0}

.play-icon{color:#FFFFFF;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}

/* Navigation Arrows */
.thumbnail-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;background:rgba(255,255,255,.9);border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:all .25s ease;box-shadow:0 2px 12px rgba(0,0,0,.1);z-index:2}
.thumbnail-nav:hover{background:#FFFFFF;box-shadow:0 4px 16px rgba(0,0,0,.15);transform:translateY(-50%) scale(1.1)}
.thumbnail-nav--prev{left:0}
.thumbnail-nav--next{right:0}

/* Responsive Video Spotlight */
@media (max-width: 1024px){
  .video-spotlight{max-width:900px}
  .spotlight-thumbnails{padding:0 32px}
  .video-thumbnail{min-width:100px;height:75px}
}

@media (max-width: 768px){
  .section-header{margin-bottom:32px}
  .video-spotlight{max-width:100%}
  .spotlight-thumbnails{padding:0 24px}
  .video-thumbnail{min-width:80px;height:60px}
  .thumbnails-scroll{gap:12px}
  .thumbnail-nav{width:28px;height:28px}
}

@media (max-width: 480px){
  .section-header{margin-bottom:24px}
  .section-lead{font-size:16px}
  .video-player{border-radius:8px}
  .spotlight-thumbnails{padding:0 16px}
  .video-thumbnail{min-width:70px;height:52px;border-radius:6px}
  .thumbnails-scroll{gap:8px}
  .thumbnail-nav{width:24px;height:24px}
  .thumbnail-nav svg{width:16px;height:16px}
}


/* ========================================
   LIGHTBOX SYSTEM
   ======================================== */

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s ease;backdrop-filter:blur(8px)}

.lightbox.active{opacity:1;visibility:visible}

.lightbox-content{position:relative;max-width:90vw;max-height:95vh;background:#FFFFFF;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}

.lightbox-close{position:absolute;top:16px;right:16px;width:40px;height:40px;background:rgba(0,0,0,.8);color:#FFFFFF;border:none;border-radius:50%;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all .25s ease}

.lightbox-close:hover{background:rgba(0,0,0,.9);transform:scale(1.1)}

.lightbox-image{display:flex;align-items:center;justify-content:center}

.lightbox-image img{max-width:100%;max-height:80vh;width:auto;height:auto;display:block}

.lightbox-nav{position:absolute;top:50%;width:100%;pointer-events:none;z-index:5}

.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;background:rgba(0,0,0,.8);color:#FFFFFF;border:none;border-radius:50%;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center;transition:all .25s ease}

.lightbox-prev:hover,.lightbox-next:hover{background:rgba(171,145,29,.9);transform:translateY(-50%) scale(1.1)}

.lightbox-prev{left:16px}
.lightbox-next{right:16px}

.lightbox-counter{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#FFFFFF;padding:8px 16px;border-radius:20px;font-size:14px}



/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .wheel-image{transition:opacity .2s ease}
  .lightbox{transition:opacity .1s ease}
}

/* Contact */
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{margin:6px 0}
.contact-card{background:var(--bg-2);border:1px solid #EAEAEA;border-radius:12px;padding:16px}

/* Footer */
.site-footer{border-top:1px solid var(--border);height:5vh;background:#FFFFFF;display:flex;align-items:center;justify-content:center}
.site-footer .accent{color:var(--gold)}
.socials{display:flex;gap:12px}
.social-icon{color:var(--gold);padding:8px;border-radius:50%;transition:all 0.3s ease;display:inline-flex;align-items:center;justify-content:center}
.social-icon:hover{color:var(--gold-2);transform:translateY(-2px);background:rgba(171,145,29,0.1)}

/* Reveal */
.reveal{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .6s ease, transform .6s ease;transition-delay:var(--d,0s)}
.reveal.slide-up{transform:translateY(16px)}
.reveal.slide-right{transform:translateX(-16px)}
.reveal.slide-left{transform:translateX(16px)}
.reveal.zoom{transform:scale(.96)}
.reveal.fade{transform:none}
.reveal.is-visible{opacity:1;transform:none}
.reveal-stagger > *{--d:0s}

@media (max-width: 900px){
  .split{grid-template-columns:1fr;}
  .header-inner{height:var(--header-h);width:70vw;display:flex;justify-content:space-between;align-items:center;padding:0}
  .portfolio-preview{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .video-grid{grid-template-columns:1fr}
}

/* ========================================
   SYSTÈME 100VH POUR TOUTES LES SECTIONS
   Architecture A-KAIROUZ.fr V2
   ======================================== */

.section-fullheight {
  min-height: 95vh; /* Hauteur sous header */
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin-top: 0; /* Sections collées - seule la première après hero aura margin-top */
}

/* Override pour sections avec .split - grid layout prioritaire */
.section-fullheight .split {
  display: grid !important;
  grid-template-columns: 1.15fr .85fr;
  gap: 32px;
  align-items: center;
  padding: 0 20px;
}

.who-section {
  min-height: 95vh;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-section {
  min-height: 90vh;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-intro {
  margin: 12px 0 0;
  color: #555;
  font-size: 1.05rem;
  max-width: 540px;
}

/* Contact Grid Layout */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 48px 0;
  justify-items: center;
}

/* Responsive contacts pour résolutions moyennes 1440x900 */
@media (max-width: 1600px) and (max-height: 1000px) {
  .contact-grid {
    margin: 24px 0;
    gap: 16px;
  }

  .contact-method {
    padding: 20px 16px;
  }

  .salon-info-section {
    padding: 24px 20px;
    margin-top: 16px;
  }

  .salon-details {
    gap: 32px;
  }

  .salon-map iframe {
    height: 200px;
  }

  .salon-info h4 {
    font-size: 1.6rem;
    margin: 0 0 12px;
  }
}

/* Contact Method Cards */
.contact-method {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.contact-method:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 8px 32px rgba(171, 145, 29, 0.15);
}

.contact-method.whatsapp-method {
  cursor: default;
}

.contact-method.whatsapp-method:hover {
  border-color: #25D366;
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.15);
}

/* Contact Icons */
.contact-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: white;
}

.whatsapp-method .contact-icon {
  background: linear-gradient(135deg, #25D366, #128C7E);
}

/* Contact Text */
.contact-method h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: #111;
}

.contact-hint {
  color: #666;
  font-size: 0.9rem;
  margin: 0 0 16px;
}

/* Reveal System */
.contact-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  max-height: 0;
  overflow: hidden;
}

.contact-method.revealed .contact-reveal {
  opacity: 1;
  transform: translateY(0);
  max-height: 50px;
}

.contact-method.revealed .contact-hint {
  opacity: 0;
  transform: translateY(-10px);
}

.contact-link {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: color 0.3s ease;
  word-break: break-word;
}

.contact-link:hover {
  color: var(--gold-2);
}

/* WhatsApp Button */
.whatsapp-btn {
  display: inline-block;
  margin-top: 8px;
}

.whatsapp-btn.btn-gold {
  color: white !important;
}

/* Salon Address Link */
.salon-address-link {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.3s ease;
}

.salon-address-link:hover {
  color: var(--gold-2);
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0 32px;
    align-items: stretch;
    justify-items: stretch;
  }

  .contact-intro {
    text-align: center;
    margin: 16px auto 0;
    font-size: 0.95rem;
    max-width: 320px;
  }

  .contact-method {
    padding: 20px 12px;
    min-height: 180px;
    width: 100%;
  }

  .contact-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
  }

  .contact-method h3 {
    font-size: 1rem;
    margin-bottom: 6px;
  }

  .contact-hint {
    font-size: 0.75rem;
    margin-bottom: 12px;
  }

  .contact-link {
    font-size: 0.95rem;
  }
}

@media (max-width: 540px) {
  .contact-grid {
    gap: 10px;
  }

  .contact-method {
    padding: 16px 10px;
    min-height: 150px;
  }

  .contact-link {
    font-size: 0.85rem;
  }
}

@media (max-width: 420px) {
  .contact-hint {
    display: none;
  }
}

/* Réseaux Sociaux Cards - Style identique aux contact cards */
.contact-method.social-method {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact-method.social-method:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 8px 32px rgba(171, 145, 29, 0.15);
}

.contact-method.social-method .contact-hint {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
  opacity: 0.8;
}

/* Salon Info Section */
.salon-info-section {
  margin-top: 48px;
  padding: 40px 24px;
  background: linear-gradient(135deg, rgba(171, 145, 29, 0.08), rgba(171, 145, 29, 0.05));
  border-radius: 16px;
  border: 1px solid rgba(171, 145, 29, 0.2);
}

.salon-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.salon-info h3 {
  font-size: 1.1rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 12px;
  font-weight: 600;
}

.salon-info h4 {
  font-size: 2rem;
  font-weight: 700;
  color: #111;
  margin: 0 0 16px;
  line-height: 1.2;
}

.salon-address {
  color: #555;
  font-size: 1.1rem;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
}

.salon-address svg {
  color: var(--gold);
  flex-shrink: 0;
}

.salon-services {
  color: #666;
  font-style: italic;
  margin: 0;
}

.salon-map {
  position: relative;
  box-shadow: 0 12px 32px rgba(171, 145, 29, 0.15);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.salon-map:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(171, 145, 29, 0.25);
}

/* Responsive Salon Section */
@media (max-width: 768px) {
  .salon-details {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .salon-info-section {
    margin-top: 0;
    padding: 32px 20px;
  }

  .salon-info h4 {
    font-size: 1.5rem;
  }

  .salon-map iframe {
    height: 250px;
  }
}

/* Photo frame styling - cropped pour remplir contenant */
.photo-frame {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  background: #f5f5f5;
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.photo-frame:hover img {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .photo-frame {
    height: 300px;
    border-radius: 12px;
  }
}

/* ========================================
   PORTFOLIO SECTION - NUVOICE EXACT COPY
   21 photos wheel avec comportement exact
   ======================================== */

.portfolio-section {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
  /* position: relative; DISABLED TEST */
  /* overflow: hidden; DISABLED TEST */
  margin-top: 0;
  padding: 0;
  display: flex;
  /* flex-direction: row !important; DISABLED TEST */
  align-items: center;
  justify-content: center;
}

/* Titre en bas à gauche EXACTEMENT comme NUVOICE */
.portfolio-title-container {
  position: absolute;
  bottom: 80px;
  left: 80px;
  z-index: 20;
  max-width: 500px;
}

.portfolio-title {
  font-size: 4rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.portfolio-accent {
  color: #ab911d;
}

.portfolio-subtitle {
  font-size: 1.1rem;
  color: #cccccc;
  margin: 12px 0 0 0;
  font-weight: 400;
  opacity: 0.9;
}

/* Container wheel EXACTEMENT comme NUVOICE - 100VW COMPLET */
.wheel-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 95vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Images wheel - 5 positions EXACTEMENT comme NUVOICE - MÊME TAILLE */
.wheel-image {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

.wheel-image.visible {
  opacity: 1;
  visibility: visible;
}

/* POSITIONS DYNAMIQUES NUVOICE - ADAPTATION COMPLÈTE LARGEUR ÉCRAN */
.wheel-image[data-position="left-2"] {
  left: calc(5vw);
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0.6;
}

.wheel-image[data-position="left-1"] {
  left: calc(27.5vw);
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0.8;
}

.wheel-image[data-position="center"] {
  left: 50vw;
  transform: translateX(-50%);
  z-index: 5;
  opacity: 1;
}

.wheel-image[data-position="right-1"] {
  left: calc(72.5vw);
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0.8;
}

.wheel-image[data-position="right-2"] {
  left: calc(95vw);
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0.6;
}

/* Images - BASE 100VH avec proportions adaptatives */
.image-placeholder {
  width: auto;
  height: 95vh;
  position: relative;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  background: #000;
}

/* Images latérales - Format 9/16 forcé */
.wheel-image[data-position="left-2"] .image-placeholder,
.wheel-image[data-position="left-1"] .image-placeholder,
.wheel-image[data-position="right-1"] .image-placeholder,
.wheel-image[data-position="right-2"] .image-placeholder {
  aspect-ratio: 9/16;
}

/* Image centrale - Proportions naturelles de l'image */
.wheel-image[data-position="center"] .image-placeholder {
  /* Pas d'aspect-ratio forcé = proportions naturelles de l'image */
  max-width: 100vw; /* Ne pas sortir de l'écran */
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

/* Image centrale - 100VH forcée pour images paysage, adaptation largeur */
.wheel-image[data-position="center"] .card-image {
  object-fit: cover; /* Par défaut cover pour images portrait */
  height: 95vh; /* Force hauteur disponible TOUJOURS */
  width: auto; /* Largeur automatique pour garder proportions */
  min-width: 100%; /* Minimum 100% de largeur du container */
  max-width: none; /* Pas de limite de largeur maximale */
}


/* Lightbox EXACTEMENT comme NUVOICE */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 95vh;
  border-radius: 0;
  overflow: hidden;
}

.lightbox-image img {
  max-width: 100%;
  max-height: 95vh;
  width: auto;
  height: auto;
  display: block;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(0,0,0,0.8);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.lightbox-close:hover {
  background: rgba(171,145,29,0.9);
  transform: scale(1.1);
}

.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  z-index: 10;
}

/* Responsive portfolio NUVOICE exact - MÊMES POSITIONS */
@media (max-width: 1200px) {
  .portfolio-title-container {
    bottom: 60px;
    left: 60px;
  }

  .portfolio-title {
    font-size: 3.5rem;
  }
}

@media (max-width: 768px) {
  .portfolio-title-container {
    bottom: 40px;
    left: 40px;
    max-width: 300px;
  }

  .portfolio-title {
    font-size: 2.5rem;
  }

  .portfolio-subtitle {
    font-size: 1rem;
  }

}

@media (max-width: 480px) {
  .portfolio-title-container {
    bottom: 30px;
    left: 30px;
    max-width: 250px;
  }

  .portfolio-title {
    font-size: 2rem;
  }

  .portfolio-subtitle {
    font-size: 0.9rem;
  }

}

/* ========================================
   PORTFOLIO MOBILE VERSION
   Grid Gallery pour petits écrans
   ======================================== */

/* Masquer par défaut les versions desktop/mobile */
.portfolio-desktop {
  display: block;
}

.portfolio-mobile {
  display: none;
}

/* Portfolio mobile carousel */
.mobile-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  touch-action: pan-y;
}

.mobile-carousel-track {
  display: flex;
  height: 100%;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 0;
}

.mobile-carousel-track::-webkit-scrollbar {
  display: none;
}

.mobile-carousel-track {
  scrollbar-width: none;
}

.mobile-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10vw;
  box-sizing: border-box;
  gap: 0;
}

.mobile-slide img {
  width: 100%;
}

.mobile-slide img {
  height: 70vh;
  max-height: 520px;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s ease;
}

.mobile-slide:active img {
  transform: scale(0.98);
}

.mobile-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.45);
  color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.mobile-carousel-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.mobile-carousel-nav.prev {
  left: 18px;
}

.mobile-carousel-nav.next {
  right: 18px;
}

.mobile-carousel-nav svg {
  width: 18px;
  height: 18px;
}

.mobile-carousel-overlay {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.58);
  backdrop-filter: blur(14px);
  color: #f1f1f1;
  text-align: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-carousel-overlay.is-hidden {
  opacity: 0;
  transform: translate(-50%, 18px);
  pointer-events: none;
}

.mobile-carousel-counter {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.mobile-carousel-hint {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.8;
}

@media (hover: hover) {
  .mobile-carousel-nav:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.05);
  }
}

/* Media queries pour portfolio mobile */
@media screen and (max-width: 768px) {
  .portfolio-desktop {
    display: none;
  }

  .portfolio-mobile {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    flex: 1;
    margin-top: 0;
  }

  .portfolio-section {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: 80px;
  }

  .portfolio-title-container {
    position: relative;
    bottom: auto;
    left: auto;
    margin: 60px auto 20px;
    text-align: center;
    padding: 0 24px;
    max-width: 320px;
  }

  .portfolio-title {
    font-size: clamp(26px, 6vw, 32px);
  }

  .portfolio-subtitle {
    font-size: 14px;
    margin-top: 10px;
  }

  .mobile-carousel {
    height: 100%;
    padding-bottom: 96px;
  }
}

@media screen and (max-width: 480px) {
  .mobile-slide {
    padding: 0 12vw;
    gap: 0;
  }

  .mobile-slide img {
    height: 65vh;
    max-height: none;
  }

  .video-slide-frame {
    width: min(96vw, 560px);
  }

  .mobile-carousel-overlay {
    bottom: 24px;
    padding: 12px 18px;
  }

  .portfolio-title {
    font-size: 24px;
  }

  .portfolio-subtitle {
    font-size: 13px;
  }
}

/* ========================================
   VIDEOS MOBILE VERSION
   Carousel plein écran pour petits écrans
   ======================================== */

/* Masquer par défaut les versions desktop/mobile */
.videos-desktop {
  display: block;
}

.videos-mobile {
  display: none;
}

/* Version mobile carousel */
.video-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 60px 0 90px;
  gap: 32px;
}

.video-carousel-header {
  text-align: center;
  max-width: 320px;
  padding: 0 24px;
}

.video-carousel-track {
  display: flex;
  width: 100%;
  flex: 1;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 0;
}

.video-carousel-track::-webkit-scrollbar {
  display: none;
}

.video-carousel-track {
  scrollbar-width: none;
}

.video-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, auto));
  align-items: center;
  gap: 28px;
  padding: 0 0 110px;
  box-sizing: border-box;
  width: 100%;
}

.video-slide-item {
  width: 100%;
  display: flex;
  justify-content: center;
}

.video-slide-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  max-width: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0,0,0,0.35);
  background: #000;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-slide-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-carousel-nav {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.45);
  color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.video-carousel-nav.prev {
  left: 18px;
}

.video-carousel-nav.next {
  right: 18px;
}

.video-carousel-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.video-carousel-nav svg {
  width: 18px;
  height: 18px;
}

.video-carousel-counter {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.video-carousel-hint {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.75;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.video-carousel-hint.is-hidden {
  opacity: 0;
  transform: translateY(6px);
}


@media (hover: hover) {
  .video-carousel-nav:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.05);
  }
}

/* Media queries pour vidéos mobile */
@media screen and (max-width: 768px) {
  .videos-desktop {
    display: none;
  }

  .videos-mobile {
    display: flex;
    align-items: stretch;
    height: 100vh;
  }

  .videos-section {
    padding: 0;
  }

  .video-thumbnails-bar {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .video-carousel {
    padding: 60px 0 100px;
  }

  .video-carousel-header {
    padding: 0 18px;
  }

  .video-slide {
    padding: 0 12vw;
    gap: 16px;
  }

}

/* ========================================
   SECTION VIDEOS - MODERN 100VH DESIGN
   Fond noir + Video 100VH + Thumbnails hover
   ======================================== */

.videos-section {
  background: #000000; /* Fond noir pour harmonisation 16/9 et 9/16 */
  /* position: relative; DISABLED TEST */
  /* overflow: hidden; DISABLED TEST */
  display: flex;
  /* flex-direction: row !important; DISABLED TEST */
  align-items: center;
  justify-content: center;
  margin-top: 0; /* Sections collées sans espaces blancs */
}

/* Container vidéo principale - Hauteur disponible sous header */
.video-main-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 95vh; /* Hauteur disponible réelle */
  z-index: 1;
}

.video-player {
  width: 100%;
  height: 95vh; /* Hauteur disponible réelle */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-player iframe {
  width: 100%;
  height: 95vh; /* Iframe prend hauteur disponible */
  border: none;
  object-fit: cover;
}

/* Titre overlay en bas à gauche au-dessus thumbnails */
.video-title-overlay {
  position: absolute;
  bottom: 120px;
  left: 60px;
  z-index: 5;
  color: #ffffff;
  max-width: 400px;
  text-align: left;
}

.video-section-title {
  font-size: 4rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  white-space: nowrap;
}

.video-accent {
  color: #ab911d; /* Gold accent */
}

.video-section-subtitle {
  font-size: 1.1rem;
  color: #cccccc;
  margin: 12px 0 0 0;
  font-weight: 300;
  line-height: 1.4;
}

/* Barre thumbnails en bas avec opacité */
.video-thumbnails-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
  padding: 40px 60px 40px 60px;
  opacity: 0.25; /* 25% par défaut */
  transition: opacity 0.4s ease;
}

.video-thumbnails-bar:hover {
  opacity: 1; /* 100% au hover */
}

.thumbnails-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.thumbnails-scroll {
  display: flex;
  gap: 16px;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: max-content;
}

/* Thumbnails individuelles */
.video-thumbnail {
  flex-shrink: 0;
  width: 140px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
}

.video-thumbnail:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 12px 32px rgba(171,145,29,0.3);
}

.video-thumbnail.active {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(171,145,29,0.4);
  border: 2px solid #ab911d;
}

.thumbnail-image {
  position: relative;
  width: 140px;
  height: 78px; /* 16:9 ratio */
  overflow: hidden;
}

.thumbnail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.video-thumbnail:hover .thumbnail-image img {
  transform: scale(1.1);
}

.thumbnail-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.video-thumbnail:hover .thumbnail-overlay {
  opacity: 0;
}

.play-icon {
  color: #ffffff;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

.thumbnail-info {
  padding: 12px;
  background: rgba(0,0,0,0.6);
}

.thumbnail-title {
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navigation arrows */
.thumbnail-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.7);
  border: none;
  color: #ffffff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.thumbnail-nav:hover {
  background: rgba(171,145,29,0.8);
  transform: translateY(-50%) scale(1.1);
}

.thumbnail-nav--prev {
  left: 10px;
}

.thumbnail-nav--next {
  right: 10px;
}

.thumbnail-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .video-title-overlay {
    bottom: 100px;
    left: 50px;
    max-width: 350px;
  }

  .video-section-title {
    font-size: 3.5rem;
  }
}

@media (max-width: 768px) {
  .video-title-overlay {
    bottom: 80px;
    left: 40px;
    max-width: 280px;
  }

  .video-section-title {
    font-size: 2.5rem;
  }

  .video-section-subtitle {
    font-size: 1rem;
  }

  .video-thumbnails-bar {
    padding: 30px 40px 30px 40px;
  }

  .video-thumbnail,
  .thumbnail-image {
    width: 120px;
  }

  .thumbnail-image {
    height: 67px;
  }
}

@media (max-width: 480px) {
  .video-title-overlay {
    bottom: 60px;
    left: 30px;
    max-width: 240px;
  }

  .video-section-title {
    font-size: 2rem;
  }

  .video-section-subtitle {
    font-size: 0.9rem;
  }

  .video-thumbnails-bar {
    padding: 20px 30px 20px 30px;
  }

  .video-thumbnail,
  .thumbnail-image {
    width: 100px;
  }

  .thumbnail-image {
    height: 56px;
  }

  .thumbnails-scroll {
    gap: 12px;
  }
}