/* ══════════════════════════════════════════════
   CINEMATIC SCROLL EXPERIENCE — CSS
══════════════════════════════════════════════ */

/* Hauteur de secours avant JS ; intro.js impose la hauteur réelle (plus courte qu’avant) */
#intro-wrap{height:280vh;position:relative;z-index:2}
#intro{position:sticky;top:0;height:100vh;overflow:hidden;z-index:2}

/* Image zoom */
#intro-img-wrap{
  position:absolute;inset:-12%;
  will-change:transform;transform-origin:center center;
}
#intro-img{width:100%;height:100%;object-fit:cover;display:block}
.intro-overlay{position:absolute;inset:0;transition:background .05s}
.intro-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.5) 100%);
}

/* Scanner line */
.intro-scanner{
  position:absolute;left:0;right:0;height:1px;z-index:10;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  pointer-events:none;top:50%;opacity:0;
  box-shadow:0 0 20px rgba(255,255,255,.3);
}

/* Side progress rail */
.intro-prog-rail{
  position:absolute;right:28px;top:50%;transform:translateY(-50%);
  height:200px;width:2px;
  background:rgba(255,255,255,.12);
  border-radius:1px;z-index:20;
  display:flex;flex-direction:column;justify-content:space-between;
  align-items:center;
}
.intro-prog-fill{
  position:absolute;top:0;left:0;right:0;
  background:var(--red);border-radius:1px;height:0%;
  transition:height .1s;box-shadow:0 0 8px var(--red);
}
.intro-chapters{
  position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
}
.ic{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.25);
  border:1.5px solid rgba(255,255,255,.3);
  cursor:default;position:relative;transition:all .3s;
}
.ic.active{background:var(--red);border-color:var(--red);box-shadow:0 0 10px var(--red)}
.ic::after{
  content:attr(data-label);
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:10px;color:rgba(255,255,255,.5);white-space:nowrap;
  letter-spacing:1.5px;text-transform:uppercase;
  opacity:0;transition:opacity .3s;font-family:var(--ff-body);
}
.ic.active::after{opacity:1;color:#fff}

/* Numéro chapitre flottant */
.intro-chap-num{
  position:absolute;left:40px;bottom:48px;z-index:20;
  font-family:var(--ff-head);font-size:100px;font-weight:800;
  color:rgba(255,255,255,.04);line-height:1;letter-spacing:-4px;
  pointer-events:none;transition:opacity .4s;
  user-select:none;
}

/* ── Scènes communes ── */
.iscene{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:20px;
  pointer-events:none;
  opacity:0;will-change:opacity,transform;
}

/* ── SCÈNE 1 : Logo ── */
.iscene1-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.7);font-size:13px;font-weight:500;
  letter-spacing:3px;text-transform:uppercase;margin-bottom:28px;
  opacity:0;animation:introFadeUp .9s 3.4s var(--ease) forwards;
}
.intro-dot{
  width:7px;height:7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 12px var(--red),0 0 30px rgba(212,43,43,.4);
  animation:blink 2s infinite;flex-shrink:0;
}
.iscene1-logo{
  font-family:var(--ff-head);
  font-size:clamp(44px,9.5vw,116px);
  font-weight:800;color:#fff;
  letter-spacing:-4px;line-height:1;
  text-shadow:0 4px 60px rgba(0,0,0,.5);
  margin-bottom:22px;
  opacity:0;animation:introFadeUp .9s 3.6s var(--ease) forwards;
}
.ild{color:rgba(255,255,255,.3)}
.ilit{color:var(--red);text-shadow:0 0 80px rgba(212,43,43,.7)}
.iscene1-sub{
  font-size:clamp(12px,1.6vw,16px);color:rgba(255,255,255,.55);
  letter-spacing:5px;text-transform:uppercase;font-weight:400;margin-bottom:36px;
  opacity:0;animation:introFadeUp .9s 3.8s var(--ease) forwards;
}
.intro-tricolor{
  display:flex;width:100px;height:3px;border-radius:2px;overflow:hidden;
  opacity:0;animation:introFadeUp .9s 4s var(--ease) forwards;
}
.intro-tricolor div:nth-child(1){flex:1;background:var(--blue-mid)}
.intro-tricolor div:nth-child(2){flex:1;background:rgba(255,255,255,.8)}
.intro-tricolor div:nth-child(3){flex:1;background:var(--red)}

/* ── SCÈNE 2 : Valeurs ── */
.iscene2-top{
  font-size:clamp(13px,1.5vw,16px);color:rgba(255,255,255,.45);
  letter-spacing:5px;text-transform:uppercase;margin-bottom:20px;
}
.iscene2-words{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,2.1vw,28px);
  flex-wrap:wrap;
  margin-bottom:28px;
  max-width:min(92vw,980px);
}
.iw2{
  font-family:var(--ff-head);
  font-size:clamp(24px,5.1vw,66px);
  font-weight:800;color:#fff;
  letter-spacing:-2px;line-height:1;
  will-change:opacity,transform;
  white-space:nowrap;
}
.iw2-sep{
  font-family:var(--ff-head);font-size:clamp(18px,2.9vw,36px);
  color:var(--red);font-weight:800;
}
.iscene2-sub{
  font-size:clamp(15px,1.8vw,20px);color:rgba(255,255,255,.55);
  line-height:1.7;margin-bottom:28px;
}
.iscene2-line{
  width:0;height:2px;
  background:linear-gradient(90deg,var(--blue-mid),var(--red));
  border-radius:1px;transition:width 0s;
}

/* ── SCÈNE 3 : Stats ── */
.iscene3-label{
  display:flex;align-items:center;gap:20px;
  font-size:12px;letter-spacing:4px;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:52px;font-weight:500;
}
.isl-line{flex:1;height:1px;background:rgba(255,255,255,.15)}
.iscene3-stats{
  display:flex;align-items:center;gap:0;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;padding:40px 52px;
}
.is3{
  display:flex;flex-direction:column;align-items:center;padding:0 40px;
  will-change:opacity,transform;
}
.is3-sep{width:1px;height:64px;background:rgba(255,255,255,.12)}
.is3-num{
  font-family:var(--ff-head);font-size:clamp(42px,6vw,72px);
  font-weight:800;color:#fff;line-height:1;letter-spacing:-2px;
}
.is3-num span{color:var(--red);font-size:.7em}
.is3-lab{
  font-size:clamp(11px,1.1vw,13px);color:rgba(255,255,255,.45);
  letter-spacing:1.5px;text-transform:uppercase;margin-top:10px;
}

/* ── SCÈNE 4 : Pills services ── */
.iscene4-title{
  font-size:12px;letter-spacing:5px;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:44px;font-weight:600;
}
.iscene4-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:700px;width:100%;
}
.is4p{
  padding:16px 28px;border-radius:100px;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;font-size:clamp(13px,1.4vw,16px);font-weight:600;
  will-change:opacity,transform;
  white-space:nowrap;
}

/* ── SCÈNE 5 : Promesse ── */
.iscene5-line1{
  font-family:var(--ff-head);
  font-size:clamp(28px,5.5vw,72px);
  font-weight:800;color:rgba(255,255,255,.7);
  letter-spacing:-2px;line-height:1.05;
  will-change:opacity,transform;
}
.iscene5-line2{
  font-family:var(--ff-head);
  font-size:clamp(30px,6vw,80px);
  font-weight:800;color:#fff;
  letter-spacing:-2.5px;line-height:1.05;
  margin-bottom:32px;
  will-change:opacity,transform;
}
.iscene5-sub{
  font-size:clamp(14px,1.6vw,18px);
  color:rgba(255,255,255,.5);line-height:1.8;margin-bottom:44px;
  will-change:opacity,transform;
}
.iscene5-btns{
  display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  will-change:opacity,transform;pointer-events:all;
}
.is5-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--red);color:#fff;
  padding:16px 36px;border-radius:12px;
  font-size:15px;font-weight:700;font-family:var(--ff-head);
  text-decoration:none;letter-spacing:-.3px;
  transition:background .3s,transform .3s;
  box-shadow:0 12px 40px rgba(212,43,43,.4);
}
.is5-cta:hover{background:var(--red2);transform:translateY(-3px)}
.is5-cta-ghost{
  display:inline-flex;align-items:center;
  border:1.5px solid rgba(255,255,255,.3);color:#fff;
  padding:15px 34px;border-radius:12px;
  font-size:15px;font-weight:600;font-family:var(--ff-head);
  text-decoration:none;
  transition:border-color .3s,background .3s;
  backdrop-filter:blur(10px);
}
.is5-cta-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.iscene5-award{
  margin-top:36px;
  display:flex;align-items:center;gap:12px;
  color:rgba(255,255,255,.4);font-size:13px;
  will-change:opacity,transform;
}

/* ── Scroll indicator ── */
.intro-scroll{
  position:absolute;bottom:38px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;animation:introFadeUp .9s 4.4s var(--ease) forwards;
  cursor:pointer;z-index:20;
}
.intro-scroll-label{
  color:rgba(255,255,255,.4);font-size:10px;
  letter-spacing:4px;text-transform:uppercase;
}
.intro-mouse{
  width:22px;height:34px;border-radius:11px;
  border:1.5px solid rgba(255,255,255,.3);
  display:flex;justify-content:center;padding-top:7px;
  animation:mouseAppear 1.8s ease-in-out 5s infinite;
}
.intro-mouse-wheel{
  width:3px;height:6px;background:#fff;border-radius:2px;
  animation:mouseWheel 1.8s ease-in-out 5s infinite;
}
@keyframes mouseWheel{
  0%{transform:translateY(0);opacity:1}
  80%{transform:translateY(8px);opacity:0}
  100%{transform:translateY(0);opacity:0}
}
@keyframes mouseAppear{0%,20%{opacity:1}80%,100%{opacity:.3}}

/* ── Badges coins ── */
.intro-badge-tl{
  position:absolute;top:88px;left:32px;z-index:20;
  display:flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.6);font-size:12.5px;font-weight:500;
  opacity:0;animation:introFadeUp .8s 4.1s var(--ease) forwards;
  background:rgba(255,255,255,.07);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px;padding:8px 16px;
}
.ib-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e;flex-shrink:0}
@keyframes introFadeUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:none}
}

/* Nav transparent on intro */
nav.on-intro{
  background:rgba(0,0,0,0)!important;
  border-bottom-color:transparent!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}
nav.on-intro .logo-txt{color:#fff}
nav.on-intro .logo-txt .it{color:var(--red)}
nav.on-intro .logo-txt .sub{color:rgba(255,255,255,.4)}
nav.on-intro .nav-links a{color:rgba(255,255,255,.6)}
nav.on-intro .nav-links a:hover{color:#fff}
nav.on-intro .logo-icon{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
nav.on-intro .lang-switch--bar{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 1px 3px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.12);
}
nav.on-intro .lang-switch--bar .lang-btn{color:rgba(255,255,255,.82)}
nav.on-intro .lang-switch--bar .lang-btn:hover:not(.active){
  color:#fff;background:rgba(255,255,255,.12);
}
nav.on-intro .lang-switch--bar .lang-btn.active{
  background:#fff;color:var(--navy);
  box-shadow:0 1px 5px rgba(0,0,0,.15);
}
nav.on-intro{transition:background .5s,border-color .5s,backdrop-filter .5s,opacity 1.2s,transform 1.2s}

/* Smooth nav fade support during intro */
nav{transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),background .5s,border-color .5s,backdrop-filter .5s}