/* =====================================================================================================================
   YC Creations — showreel (Accueil) : bouton du hero, section (écran avec aperçu muet en boucle et chapitres),
   fenêtre vidéo plein écran. Ajout du site (demande de Yassine), dans la charte : nuit, Bleu YC, Or YC, dégradé YC.
   ===================================================================================================================== */

/* ---------- Hero : « Voir le showreel » à côté du bouton principal ; au survol, le rond prend le dégradé YC ---------- */
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px;}
.hero-sr{display:inline-flex; align-items:center; gap:14px; padding:0; border:0; background:none; cursor:pointer; color:#fff; font:inherit; text-align:left;}
.hero-sr-ic{position:relative; display:flex; align-items:center; justify-content:center; width:54px; height:54px; flex:none; border-radius:50%;
  background-color:rgba(255,255,255,0.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.28); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background-color .4s ease, box-shadow .5s ease, transform .6s cubic-bezier(.22,1,.36,1);}
.hero-sr-ic svg{width:18px; height:18px; margin-left:2px; transition:color .4s ease;}
.hero-sr-ic::after{content:''; position:absolute; inset:-6px; border-radius:50%; box-shadow:0 0 0 1px rgba(217,169,79,0.45); opacity:0; animation:srHalo 2.8s ease-out 1.6s infinite;}
.hero-sr-t{display:flex; flex-direction:column; gap:3px; font-size:14px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; text-shadow:0 2px 12px rgba(0,0,0,0.55);}
.hero-sr-t small{font-size:12px; font-weight:500; letter-spacing:0.1em; color:var(--muted);}
.hero-sr:hover .hero-sr-ic, .hero-sr:focus-visible .hero-sr-ic{background-color:var(--GoldYC); background-image:var(--grad-yc); background-size:200% 100%; background-repeat:repeat-x;
  animation:ycGrad 2.4s linear infinite; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.35), 0 0 30px rgba(110,193,228,0.35), 0 0 46px rgba(217,169,79,0.3); transform:scale(1.07);}
.hero-sr:hover .hero-sr-ic svg, .hero-sr:focus-visible .hero-sr-ic svg{color:var(--ink);}
.hero-sr:focus-visible{outline:2px solid var(--BleuYC); outline-offset:6px; border-radius:999px;}
@keyframes srHalo{0%{opacity:.9; transform:scale(.92);}80%, 100%{opacity:0; transform:scale(1.35);}}

/* ---------- Section : titre et texte, l'écran, puis les chapitres ---------- */
/* rythme de l'Accueil : l'espace au-dessus du bloc = var(--bloc), rien en dessous ; le bloc prend part à la profondeur au défilement */
.sr-section{position:relative; background:var(--ink); padding:var(--bloc, var(--section)) var(--gutter) 0; overflow:hidden;}
.sr-wrap{position:relative; z-index:1; display:flex; flex-direction:column; gap:48px;}
.sr-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px 40px; flex-wrap:wrap;}
.sr-head .yc-badge{margin-bottom:24px;}
.sr-intro{margin:0; max-width:440px; font-size:16px; line-height:1.75; color:var(--texte-corps);}

/* L'écran : halo Bleu YC / Or YC derrière, contour en dégradé qui tourne au survol */
/* l'écran tient toujours en entier dans la fenêtre (grands écrans) ; les chapitres prennent la même largeur */
.sr-stage, .sr-chaps{width:min(100%, calc((100vh / var(--xl, 1) - 150px) * 16 / 9)); margin-inline:auto;}
.sr-stage{position:relative;}
.sr-stage::before{content:''; position:absolute; inset:8% 6% -6%; z-index:-1; border-radius:50%; pointer-events:none;
  background:linear-gradient(90deg, rgba(110,193,228,0.6), rgba(217,169,79,0.6)); filter:blur(90px); opacity:.2; transition:opacity .9s ease;}
.sr-screen{position:relative; aspect-ratio:16 / 9; border-radius:var(--rayon-l); overflow:hidden; isolation:isolate; background:#0b1015;
  box-shadow:0 50px 120px rgba(0,0,0,0.55);}
.sr-img, .sr-teaser{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 1.4s cubic-bezier(.22,1,.36,1), opacity 1s ease;}
.sr-teaser{opacity:0;}
.sr-stage.is-live .sr-teaser{opacity:1;}
/* voile : vignette et bas assombri (lisibilité des mentions) ; s'éclaircit au survol */
.sr-screen::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none; transition:opacity .8s ease;
  background:radial-gradient(70% 70% at 50% 45%, rgba(10,13,16,0.08) 0%, rgba(10,13,16,0.42) 100%), linear-gradient(to top, rgba(10,13,16,0.72) 0%, rgba(10,13,16,0) 34%);}
@property --sr-a{syntax:'<angle>'; inherits:false; initial-value:0deg;}
@keyframes srSpin{to{--sr-a:360deg;}}
.sr-ring{position:absolute; inset:0; z-index:2; border-radius:inherit; padding:1px; pointer-events:none; opacity:.6; transition:opacity .6s ease;
  background:conic-gradient(from var(--sr-a), rgba(217,169,79,0.15) 0%, var(--GoldYC) 18%, rgba(217,169,79,0.15) 36%, rgba(110,193,228,0.15) 55%, var(--BleuYC) 72%, rgba(110,193,228,0.15) 90%, rgba(217,169,79,0.15) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:srSpin 6s linear infinite paused;}
.sr-stage:hover::before{opacity:.4;}
.sr-stage:hover .sr-ring{opacity:1; animation-play-state:running;}
.sr-stage:hover .sr-img, .sr-stage:hover .sr-teaser{transform:scale(1.05);}
.sr-stage:hover .sr-screen::after{opacity:.75;}

/* Bouton de lecture : toute la surface est cliquable ; le rond doré suit la souris (showreel.js) et prend le dégradé YC au survol */
.sr-launch{position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:inherit; background:none; cursor:pointer;}
.sr-launch:focus-visible{outline:2px solid var(--BleuYC); outline-offset:-8px;}
.sr-play{position:relative; display:flex; align-items:center; justify-content:center; width:112px; height:112px; border-radius:50%; color:var(--ink);
  background-color:var(--GoldYC); box-shadow:0 18px 50px rgba(0,0,0,0.45), 0 0 60px rgba(217,169,79,0.35);
  transition:scale .7s cubic-bezier(.22,1,.36,1), box-shadow .6s ease;}
.sr-play svg{width:34px; height:34px; margin-left:5px;}
.sr-play::before{content:''; position:absolute; inset:-12px; border-radius:50%; box-shadow:0 0 0 1.5px rgba(217,169,79,0.6); animation:srHalo 2.8s ease-out infinite;}
.sr-launch:hover .sr-play, .sr-launch:focus-visible .sr-play{background-image:var(--grad-yc); background-size:200% 100%; background-repeat:repeat-x; animation:ycGrad 2.4s linear infinite;
  scale:1.08; box-shadow:0 22px 60px rgba(0,0,0,0.5), 0 0 70px rgba(110,193,228,0.35), 0 0 90px rgba(217,169,79,0.3);}
.sr-launch:hover .sr-play::before, .sr-launch:focus-visible .sr-play::before{box-shadow:0 0 0 1.5px rgba(110,193,228,0.7);}

/* Mentions : titre et durée en bas à gauche, « avec le son » en bas à droite, pause de l'aperçu en haut à droite */
.sr-meta, .sr-sound{position:absolute; bottom:26px; z-index:3; display:flex; align-items:center; pointer-events:none;
  font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.78);}
.sr-meta{left:32px; gap:12px;}
.sr-meta b{font-weight:600; color:#fff;}
.sr-meta i{width:4px; height:4px; border-radius:50%; background:var(--GoldYC);}
.sr-sound{right:32px; gap:10px; transition:color .4s ease;}
.sr-sound svg{width:18px; height:18px;}
.sr-stage:hover .sr-sound{color:#fff;}
.sr-pause{position:absolute; right:20px; top:20px; z-index:4; display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:0; border-radius:50%;
  cursor:pointer; color:#fff; background:rgba(10,13,16,0.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.22); opacity:.75; transition:opacity .3s ease, background .3s ease;}
.sr-pause[hidden]{display:none;}
.sr-pause svg{width:16px; height:16px;}
.sr-pause .is-play, .sr-pause[aria-pressed="true"] .is-pause{display:none;}
.sr-pause[aria-pressed="true"] .is-play{display:block;}
.sr-pause:hover, .sr-pause:focus-visible{opacity:1; background:rgba(10,13,16,0.8);}
.sr-pause:focus-visible{outline:2px solid var(--BleuYC); outline-offset:2px;}

/* Chapitres : la barre du chapitre en cours se remplit au rythme de l'aperçu ; un clic lance la vidéo à ce moment */
.sr-chaps{position:relative; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:0 20px; margin-top:-16px; padding:0; list-style:none;}
.sr-chap{display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; padding:0 0 4px; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer;}
.sr-chap-bar{position:relative; display:block; width:100%; height:2px; margin-bottom:12px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,0.14);}
.sr-chap-bar i{position:absolute; inset:0; transform-origin:left center; transform:scaleX(0); transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .4s ease;
  background-image:var(--grad-yc); background-size:200% 100%; background-repeat:repeat-x;}
.sr-chap.is-past .sr-chap-bar i{transform:scaleX(1); opacity:.5;}
.sr-chap.is-on .sr-chap-bar i{transform:scaleX(var(--p, 0)); transition:none;}
.sr-chap:hover .sr-chap-bar i, .sr-chap:focus-visible .sr-chap-bar i{transform:scaleX(1); opacity:1; transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .4s ease; animation:ycGrad 2.4s linear infinite;}
.sr-chap-n{font-size:12px; font-weight:600; letter-spacing:0.14em; color:var(--GoldYC);}
.sr-chap-t{font-size:15px; font-weight:500; line-height:1.35; color:rgba(255,255,255,0.58); transition:color .4s ease;}
.sr-chap-d{font-size:12px; letter-spacing:0.08em; color:var(--muted); font-variant-numeric:tabular-nums;}
.sr-chap.is-on .sr-chap-t, .sr-chap:hover .sr-chap-t, .sr-chap:focus-visible .sr-chap-t{color:#fff;}
.sr-chap:focus-visible{outline:2px solid var(--BleuYC); outline-offset:6px; border-radius:6px;}

/* L'écran s'agrandit en arrivant dans la page (navigateurs récents ; lié au défilement, rien ne tourne en continu) */
@supports (animation-timeline: view()){
  @keyframes srGrow{from{transform:scale(.9);}to{transform:none;}}
  .sr-screen{animation:srGrow linear both; animation-timeline:view(); animation-range:entry 0% cover 42%;}
}

/* ---------- Fenêtre vidéo plein écran ---------- */
.sr-modal{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:72px var(--gutter);
  opacity:0; transition:opacity .45s ease;}
.sr-modal[hidden]{display:none;}
.sr-modal.is-open{opacity:1;}
.sr-modal-bg{position:absolute; inset:0; background:rgba(6,9,12,0.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);}
.sr-modal-in{position:relative; width:min(100%, 1280px, calc((100vh / var(--xl, 1) - 144px) * 16 / 9));
  transform:translateY(24px) scale(.97); transition:transform .7s cubic-bezier(.22,1,.36,1);}
.sr-modal.is-open .sr-modal-in{transform:none;}
.sr-frame{position:relative; aspect-ratio:16 / 9; border-radius:var(--rayon-m); overflow:hidden; background:#000;
  box-shadow:0 60px 140px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);}
.sr-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.sr-close{position:absolute; right:0; top:-68px;}
html.sr-lock{overflow:hidden;}

/* ---------- Tablette ---------- */
@media (max-width:1100px){
  .sr-chaps{gap:0 14px;}
  .sr-chap-t{font-size:14px;}
}

/* ---------- Mobile : chapitres en bande qui défile, l'aperçu fait avancer la bande ---------- */
@media (max-width:767px){
  .sr-wrap{gap:32px;}
  .sr-screen{border-radius:var(--rayon-m);}
  .sr-play{width:76px; height:76px;}
  .sr-play svg{width:24px; height:24px; margin-left:4px;}
  .sr-meta{left:18px; bottom:16px; font-size:10px; gap:8px;}
  .sr-sound{display:none;}
  .sr-pause{right:12px; top:12px; width:34px; height:34px;}
  .sr-pause svg{width:14px; height:14px;}
  .sr-chaps{display:flex; width:auto; gap:16px; margin:-12px calc(-1 * var(--gutter)) 0; padding:0 var(--gutter) 6px; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter); scrollbar-width:none; -webkit-overflow-scrolling:touch;}
  .sr-chaps::-webkit-scrollbar{display:none;}
  .sr-chaps li{flex:0 0 40%; scroll-snap-align:start;}
  .sr-chap-t{font-size:14px;}
  .sr-modal{padding:72px 12px;}
  .hero-sr-ic{width:48px; height:48px;}
}

/* ---------- « Réduire les animations » : ni aperçu animé (showreel.js), ni halo, ni contour qui tourne, ni agrandissement ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-sr-ic::after, .sr-play::before{animation:none; opacity:0;}
  .hero-sr:hover .hero-sr-ic, .hero-sr:focus-visible .hero-sr-ic, .sr-launch:hover .sr-play, .sr-launch:focus-visible .sr-play,
  .sr-chap:hover .sr-chap-bar i, .sr-chap:focus-visible .sr-chap-bar i, .sr-stage:hover .sr-ring{animation:none;}
  .sr-screen{animation:none;}
  .sr-img, .sr-teaser, .sr-play, .hero-sr-ic, .sr-modal, .sr-modal-in, .sr-chap-bar i{transition:none;}
}