:root{
  --bg:#0b0b0d;--bg-soft:#111216;--ink:#e9e9ee;--muted:#9aa0a6;--accent:#e50914;
  --card:#15161c;--line:#23252d;--edge:80px;--brand-offset:28px;
  --content-left:calc(var(--edge) + var(--brand-offset));--hero-h:92svh;
  --hero-mask:linear-gradient(180deg,rgba(11,11,13,0),rgba(11,11,13,.18) 28%,rgba(11,11,13,.50) 70%,var(--bg) 100%);
}
@supports(height:100lvh){:root{--hero-h:92lvh;}}

/* Reset & fixes (incl. Tor Browser opacity/colour workaround) */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;scroll-behavior:auto !important;}
body{color:#e9e9ee !important;background:#0b0b0d !important;}
p,h1,h2,h3,span,div,a,label,button{color:inherit !important;}
.hero-copy p{color:#e9e9ee !important;}
.row-title{color:#e9e9ee !important;}
.btn{color:#ffffff !important;}
.contact p,.contact h2,.contact a,.contact label{color:#e9e9ee !important;}
.contact .muted,.contact label{color:#9aa0a6 !important;}
img,.thumb img,.hero-slide{opacity:1 !important;filter:none !important;}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none !important}

/* Header / nav */
.stage-nav{position:fixed;inset:0 0 auto 0;z-index:9999;padding:5px var(--edge);background:transparent;border-bottom:1px solid transparent;will-change:background-color,border-color;transition:background-color .35s ease,border-color .35s ease;}
.stage-nav::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,13,0.92) 0%,rgba(11,11,13,0.60) 36%,rgba(11,11,13,0.00) 100%);opacity:1;transition:opacity .35s ease;}
.stage-nav > *{position:relative;z-index:1;}
.stage-nav.solid{background:rgba(11,11,13,0.85);border-bottom:1px solid var(--line);}
.stage-nav.solid::after{opacity:0;}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:50px;font-size:20px}
.brand{display:flex;align-items:center;margin-left:var(--brand-offset);}
.brand-logo{height:35px;width:auto;display:block;}
.nav-spacer{flex:1 1 auto;}
.lang-switch{display:flex;gap:8px;align-items:center;white-space:nowrap;margin:0;}
#btn-lang{background-color:transparent !important;color:#ffffff !important;border:none !important;height:36px;padding:0 12px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;cursor:pointer;}
#btn-lang:hover{filter:brightness(1.1);}

/* Hero */
.hero{position:relative;height:var(--hero-h);margin-top:0;}
.hero-rail{height:100%;display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.hero-rail::-webkit-scrollbar{display:none}
.hero-rail.no-smooth{scroll-behavior:auto !important;}
.hero-slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:center;isolation:isolate;background-size:cover;background-position:center;background-repeat:no-repeat;}
.hero-slide::after{content:"";position:absolute;inset:0;background:var(--hero-mask);z-index:0}
.hero-inner{position:relative;z-index:1;height:100%;display:flex;align-items:center;padding:0 var(--edge)}
.hero-copy{max-width:min(860px,92vw);display:grid;gap:12px;margin-left:var(--brand-offset)}
.hero-copy p{margin-bottom:0;}
.hero-title-img{width:clamp(220px,32vw,980px)}
.hero-eng{display:none;}
.lang-eng .hero-vf{display:none;}
.lang-fr .hero-vf{display:block !important;}
.lang-eng .hero-eng{display:block !important;}
.stage-ctas{display:flex;gap:10px;margin-top:12px}
.hero-arrow{position:absolute;top:40%;background:transparent;color:rgba(255,255,255,0.6);border:none;width:54px;height:54px;cursor:pointer;font-size:36px;font-weight:900;line-height:1;display:flex;align-items:center;justify-content:center;z-index:50;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));opacity:0;pointer-events:none;transition:opacity .3s ease;}
.hero-arrow.left{left:10px;}
.hero-arrow.right{right:10px;}
.hero-arrow:hover{color:var(--accent);background:transparent;}
.hero:hover .hero-arrow{opacity:1;pointer-events:auto;}

/* Hero CTA buttons */
.btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: var(--accent) !important;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
}
.btn:hover {
  filter: brightness(1.08);
}

/* Adaptation pour la section Hero (Bouton + Pastille Ronde) */
.hero .btn, .hero a.btn {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  font-size: 1.1em;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.2px;
  line-height: 1.1;
  padding: 8px 16px 8px 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  background: transparent !important;
  color: #fff !important;
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* Création de la pastille rouge avec le centrage optique corrigé */
.hero .btn::before, .hero a.btn::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-position: calc(50% + 1px) center; 
  background-repeat: no-repeat;
  background-size: 26px;
  box-shadow: 0 4px 12px rgba(226, 28, 28, 0.4);
  flex-shrink: 0;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Animations au survol */
.hero .btn:hover, .hero a.btn:hover {
  filter: none;
  transform: translateX(4px); 
}
.hero .btn:hover::before, .hero a.btn:hover::before {
  transform: scale(1.08);
  background-color: #ff2a2a;
  box-shadow: 0 6px 16px rgba(226, 28, 28, 0.6);
}

/* Rows / rails / cards */
.row-full{margin:26px 0 10px}
.row-full.first{position:relative;z-index:3;margin-top:-12vh;}
@media (max-width:1024px) and (orientation:landscape){.row-full.first{margin-top:calc(-1 * min(12vh, 25%));}}
@media (max-width:700px) and (orientation:portrait){.row-full.first{margin-top:12px;}}
.row-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;padding-left:var(--content-left);padding-right:var(--edge)}
.row-title{font-size:18px;margin:0}
.rail{position:relative;margin:0;padding-left:var(--content-left);padding-right:var(--edge)}
.scroller{display:flex;gap:12px;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 12px 0;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller.no-smooth{scroll-behavior:auto !important;}
.card{flex:0 0 clamp(260px,26vw,380px);scroll-snap-align:start;position:relative;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line);transition:transform .25s ease,box-shadow .25s ease;cursor:pointer}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.thumb{aspect-ratio:2/1;background:#090a0d;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card:hover .thumb img{transform:scale(1.06)}
.scroll-btn{position:absolute;top:40%;background:transparent;color:rgba(255,255,255,0.6);border:1px solid transparent;width:54px;height:54px;cursor:pointer;font-size:36px;font-weight:900;line-height:1;display:flex;align-items:center;justify-content:center;z-index:10;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));will-change:transform;opacity:0;pointer-events:none;transition:opacity .3s ease;}
.scroll-btn.left{left:10px}
.scroll-btn.right{right:10px}
.scroll-btn:hover{color:var(--accent);background:transparent;transform:translateY(-1px);}
.scroll-btn:active{transform:translateY(0);}
.rail:hover .scroll-btn{opacity:1;pointer-events:auto;}

/* Social */
.social-links{margin-top:12px;display:flex;gap:14px;}
.social-links a{color:var(--muted);transition:color .2s;}
.social-links a:hover{color:var(--accent);}
.social-links svg{width:40px;height:40px;}

/* Contact */
.contact .wrap{max-width:1200px;margin:0 auto;padding:0 var(--edge)}
.contact-grid{display:grid;gap:16px}
@media (min-width:800px){.contact-grid{grid-template-columns:1.4fr 1fr;align-items:start}}
.field{display:grid;gap:6px}
label{font-size:14px;color:var(--muted)}
input,textarea{width:100%;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:12px}
textarea{min-height:140px;resize:vertical}
/* Animation des 3 points pour le formulaire */
.dots-loader span {
  animation: blinkDots 1.4s infinite both;
  font-weight: 700;
  display: inline-block;
}
.dots-loader span:nth-child(2) { animation-delay: 0.2s; }
.dots-loader span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blinkDots {
  0%, 80%, 100% { opacity: 0.2; }
  40% { opacity: 1; }
}
footer{color:#79808a;font-size:13px;border-top:1px solid var(--line);padding:14px 0;margin-top:30px}

/* Modal / player */
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.75);z-index:200}
.modal.open{display:grid}
.sheet{width:min(900px,92vw);background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:visible}
.sheet-media{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px 14px 0 0;overflow:hidden}
.sheet-media iframe,.sheet-media video,.sheet-media .plyr{position:absolute;inset:0;width:100%;height:100%;}
.sheet-media .plyr video{object-fit:contain;}
#m-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  --plyr-color-main: #e21c1c;
  --plyr-video-control-color-hover: #e21c1c;
  --plyr-range-thumb-height: 12px;
}

.player-overlay-top {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 40;
  display: flex;
  flex-direction: column; /* Disposition verticale */
  gap: 4px;
  background: rgba(11, 11, 13, 0.38); /* Opacité réduite */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
  pointer-events: auto;
}

.player-overlay-top:hover {
  background: rgba(11, 11, 13, 0.65); /* Remonte légèrement au survol */
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.player-overlay-top.is-hidden {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.overlay-btn {
  background: transparent;
  border: none;
  color: #e9e9ee;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.overlay-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.overlay-btn:active {
  transform: scale(0.92);
}

/* Bulle de confirmation (s'affiche désormais à gauche de la colonne) */
.overlay-toast {
  position: absolute;
  top: 6px;
  right: calc(100% + 8px);
  background: rgba(11, 11, 13, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  color: #49c774 !important;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateX(4px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.overlay-toast.show {
  opacity: 1;
  transform: translateX(0);
}
.sheet-body{display:grid;gap:12px;padding:14px}
.sheet-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.x {
  appearance: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.x:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Plyr theming */
.plyr--full-ui .plyr__menu__container{color:#333 !important;}
.plyr__menu__container [role="menuitemradio"],.plyr__menu__container .plyr__menu__value{color:#333 !important;}
.plyr__menu__container button[aria-checked="true"]{background:rgba(0,0,0,0.05) !important;}
.plyr__menu__container [role="menuitemradio"]:hover{background:rgba(0,0,0,0.1) !important;}
.plyr__control--overlaid{background:rgba(226,28,28,0.8) !important;}
.plyr--full-ui [data-plyr='play'].plyr__control--pressed::before{background:#e21c1c !important;}

/* Responsive: tablets & phones (<=1024px) */
@media (max-width:1024px){
  :root{--edge:16px;--brand-offset:20px;--content-left:calc(var(--edge) + var(--brand-offset));}
  .stage-nav .brand{margin-left:0;}
  .brand-logo{height:clamp(24px, 5vw, 32px);}
  .stage-nav .nav{padding-left:0;padding-right:0;}
}

/* Responsive: landscape phones/tablets (<=1024px) */
@media (max-width:1024px) and (orientation:landscape){
  .hero,.hero-rail{height:auto;}
  .hero-slide{min-height:60vh;display:flex;align-items:center;}
  .hero-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px var(--edge) 40px;}
  .hero-copy{margin:0 auto;max-width:90vw;text-align:center;}
  .hero-title-img{margin:0 auto 16px auto;width:auto;max-width:80vw;height:auto;}
  .stage-ctas{justify-content:center;}
}

/* Responsive: phones (<=700px) */
@media (max-width:700px){
  :root{--hero-h:84vh;}
  .hero,.hero-rail{height:auto;}
  .row-head,.rail,.contact .wrap{padding:0 var(--edge)}
  .scroller{gap:8px}
  .thumb{aspect-ratio:16/9}
  .hero-slide{min-height:100vh;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;}
  .hero-inner{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px var(--edge) 60px;text-align:center;height:auto;}
  .hero-copy{margin-left:0;max-width:100vw;width:100%;justify-items:center;text-align:center;}
  .hero-title-img{width:100%;max-width:100%;height:auto;margin:0 auto;}
}

/* Accessibilité : Contour de focus au clavier */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
button:focus-visible, a:focus-visible, .card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Accessibilité : Lien d'évitement (Skip link) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--accent);
  color: #fff !important;
  padding: 10px 16px;
  border-radius: 6px;
  z-index: 100000;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus-visible, .skip-link:focus {
  top: 16px;
  outline: 2px solid #fff;
}

/* Accessibilité : Préférence de mouvement réduit */
@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;
  }
  .hero-rail, .scroller {
    scroll-behavior: auto !important;
  }
}
