/* =========================================================================
   COACHING OLYMPE · SOCLE PARTAGÉ V2
   Registre : musée / clair-obscur. Bitume chaud + marbre + or patiné mat.
   Typo : Cinzel (inscription romaine) + EB Garamond + Cormorant.
   Couche motion : GSAP + ScrollTrigger + Lenis (chargés localement).
   ========================================================================= */

:root{
  --noir:#0E0B08;
  --noir-2:#14100B;
  --noir-3:#1C1611;
  --marbre:#ECE6D9;
  --marbre-2:#E2D9C7;
  --pierre:#CBBEA6;
  --or:#A9884E;
  --or-clair:#C6A867;
  --or-ink:#6E5628;
  --or-soft:rgba(169,136,78,.14);
  --encre:#221C14;
  --encre-2:#544B3B;
  --ivoire:#ECE3D2;
  --ivoire-2:#AEA288;
  --ligne-s:rgba(236,227,210,.14);
  --ligne-c:rgba(34,28,20,.16);
  --display:'Cinzel',serif;
  --serif:'EB Garamond',Georgia,serif;
  --lead:'Cormorant Garamond',Georgia,serif;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{
  font-family:var(--serif);
  background:var(--noir);
  color:var(--ivoire);
  font-size:19px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%}
::selection{background:var(--or);color:var(--noir)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.section{padding:130px 0;position:relative}

/* fonds alternés */
.dark{background:var(--noir);color:var(--ivoire)}
.dark-2{background:var(--noir-2);color:var(--ivoire)}
.light{background:var(--marbre);color:var(--encre)}
.light .muted{color:var(--encre-2)}
.dark .muted,.dark-2 .muted{color:var(--ivoire-2)}
.light{
  background-image:
    linear-gradient(118deg,rgba(255,255,255,.5),transparent 42%),
    repeating-linear-gradient(61deg,rgba(120,105,80,.035) 0 2px,transparent 2px 30px),
    linear-gradient(180deg,var(--marbre),var(--marbre-2));
}

/* ============================ TYPOGRAPHIE ============================ */
.overline{
  font-family:var(--display);font-weight:600;font-size:12.5px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--or);
  display:inline-flex;align-items:center;gap:14px;
}
.overline::before{content:"";width:32px;height:1px;background:var(--or);opacity:.8}
.overline.center{justify-content:center}
.light .overline{color:var(--or-ink)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:.005em}
.h2{font-size:clamp(30px,4.8vw,54px);font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.h-giant{font-size:clamp(42px,8.6vw,124px);font-weight:900;text-transform:uppercase;line-height:.98;letter-spacing:.005em}
.lead{font-family:var(--lead);font-size:clamp(21px,2.5vw,27px);line-height:1.4;font-weight:500}
.dark .lead,.dark-2 .lead{color:#d9cfb9}
.light .lead{color:#3a3226}
p+p{margin-top:20px}
p{text-wrap:pretty}
h1,h2,h3,.h2,.lead{text-wrap:balance}
strong{font-weight:600;color:var(--ivoire)}
.light strong{color:var(--encre)}

/* split de titres (mots animés par GSAP) */
.split-lines{overflow:hidden}
.sw{display:inline-block;overflow:hidden;vertical-align:top}
.sw>i{display:inline-block;font-style:normal;transform:translateY(112%);will-change:transform}
.no-motion .sw>i,.split-done.no-motion .sw>i{transform:none}

/* ============================ BOUTONS ============================ */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:13.5px;
  padding:17px 34px;border:1px solid var(--or);color:var(--or);
  background:transparent;position:relative;overflow:hidden;
  transition:color .35s var(--ease),border-color .35s var(--ease);
  cursor:pointer;
}
.btn::before{content:"";position:absolute;inset:0;background:var(--or);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-expo);z-index:0}
.btn:hover::before{transform:scaleX(1)}
.btn>*{position:relative;z-index:1}
.btn:hover{color:var(--noir)}
.btn-solid{background:var(--or);color:var(--noir)}
.btn-solid::before{background:var(--or-clair)}
.btn-solid:hover{color:var(--noir);border-color:var(--or-clair)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px}
a:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px}

/* ============================ MÉANDRE ============================ */
.meander{height:16px;width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16' viewBox='0 0 64 16' fill='none' stroke='%23A9884E' stroke-width='1.4' opacity='0.55'%3E%3Cpath d='M0 13h6V3h10v10h6V6h-8'/%3E%3Cpath d='M32 13h6V3h10v10h6V6h-8'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center;opacity:.9}

/* ============================ RÉVÉLATIONS ============================ */
.reveal{opacity:0;transform:translateY(34px);will-change:opacity,transform}
.no-motion .reveal,.no-js .reveal{opacity:1;transform:none}
.img-veil{position:relative;overflow:hidden}
.img-veil::after{content:"";position:absolute;inset:0;background:var(--noir-2);
  transform:scaleY(1);transform-origin:top;z-index:3}
.light .img-veil::after{background:var(--marbre-2)}
.no-motion .img-veil::after,.no-js .img-veil::after{display:none}

/* ============================ HEADER ============================ */
.header{position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 0;
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s,transform .5s var(--ease);
  border-bottom:1px solid transparent}
.header.scrolled{background:rgba(14,11,8,.84);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--ligne-s);padding:13px 0}
.header.hidden{transform:translateY(-110%)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
.mark{display:flex;flex-direction:column;line-height:1}
.mark .top{font-family:var(--display);font-weight:500;font-size:10px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--ivoire-2);margin-bottom:5px;padding-left:2px}
.mark .main{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ivoire)}
.mark .main b{color:var(--or);font-weight:800}
.nav{display:flex;align-items:center;gap:34px}
.nav a{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ivoire-2);position:relative;padding:6px 0;transition:color .3s}
.nav a:hover,.nav a.active{color:var(--ivoire)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--or);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.header .btn{padding:12px 24px;font-size:12px}
@media(max-width:900px){.nav{display:none}}

/* ============================ FOOTER ============================ */
.footer{background:var(--noir);border-top:1px solid var(--ligne-s);padding:80px 0 42px;position:relative;overflow:hidden}
.footer .giant{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(52px,11vw,170px);line-height:.95;color:transparent;
  -webkit-text-stroke:1px rgba(169,136,78,.28);letter-spacing:.02em;
  user-select:none;pointer-events:none;white-space:nowrap;margin-bottom:60px}
.footer .giant b{color:var(--or);-webkit-text-stroke:0;font-weight:900}
.footer .top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:48px}
.footer .mark .main{font-size:24px}
.footer .tagline{font-family:var(--lead);font-style:italic;font-size:20px;color:var(--ivoire-2);max-width:30ch;margin-top:18px}
.footer .cta .btn{padding:15px 30px}
.footer .cols{display:flex;gap:70px;flex-wrap:wrap}
.footer .col h5{font-family:var(--display);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--or);margin-bottom:18px;font-weight:600}
.footer .col a{display:block;color:var(--ivoire-2);font-size:16px;padding:5px 0;transition:color .25s}
.footer .col a:hover{color:var(--marbre)}
.footer .bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--ligne-s);padding-top:30px;color:var(--ivoire-2);font-size:14px;margin-top:56px}
.footer .links{display:flex;gap:26px;flex-wrap:wrap}
.footer .links a{transition:color .25s}
.footer .links a:hover{color:var(--or)}

/* ============================ PRELOADER ============================ */
.preloader{position:fixed;inset:0;z-index:300;background:var(--noir);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;
  transition:opacity .7s var(--ease),visibility .7s}
.preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.preloader .om{font-family:var(--display);font-size:64px;color:var(--or);line-height:1}
.preloader .bar{width:180px;height:1px;background:var(--ligne-s);overflow:hidden}
.preloader .bar i{display:block;height:100%;width:100%;background:var(--or);
  transform:scaleX(0);transform-origin:left;transition:transform .3s linear}
.preloader .lbl{font-family:var(--display);font-size:10.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--ivoire-2)}
.no-js .preloader{display:none}
.no-motion .preloader{display:none}

/* ============================ CURSEUR OR (desktop fin) ============================ */
@media(hover:hover) and (pointer:fine){
  .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:400;
    border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:normal}
  .cursor-dot{width:6px;height:6px;background:var(--or-clair)}
  .cursor-ring{width:34px;height:34px;border:1px solid rgba(198,168,103,.55);
    transition:width .25s var(--ease),height .25s var(--ease),border-color .25s,background .25s}
  .cursor-ring.hovering{width:56px;height:56px;border-color:var(--or-clair);background:rgba(169,136,78,.08)}
  .no-motion .cursor-dot,.no-motion .cursor-ring{display:none}
}
@media(hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ============================ PARTICULES / CANVAS ============================ */
.dust{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.8}
.no-motion .dust{display:none}

/* ============================ SCRUB HERO (cadre vidéo/canvas) ============================ */
.scrub-stage{position:absolute;inset:0;overflow:hidden;z-index:0}
.scrub-stage img,.scrub-stage canvas,.scrub-stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}

/* ============================ CTA MOBILE COLLANT ============================ */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  padding:26px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(14,11,8,0),rgba(14,11,8,.94) 52%);
  pointer-events:none;visibility:hidden;
  transform:translateY(110%);transition:transform .45s var(--ease),visibility .45s}
.mcta .btn{width:100%;justify-content:center;padding:16px;pointer-events:auto}
.mcta.on{transform:none;visibility:visible}
@media(max-width:700px){.mcta{display:block}}

/* ============================ COMPTEURS / STATS ============================ */
.stat-big{font-family:var(--display);font-weight:900;line-height:1;color:var(--or-clair)}
.light .stat-big{color:var(--or-ink)}

/* ============================ BARRE DE PROGRESSION SCROLL ============================ */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none}
.scroll-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--or),var(--or-clair));
  transform:scaleX(0);transform-origin:left;will-change:transform}
.no-motion .scroll-progress{display:none}

/* ============================ ACCESSIBILITÉ MOTION ============================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .sw>i{transform:none!important}
  .img-veil::after{display:none}
  .preloader{display:none}
  .dust{display:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================ RESPONSIVE SOCLE ============================ */
@media(max-width:900px){
  .section{padding:90px 0}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  body{font-size:18px}
  .h2{font-size:clamp(24px,7.6vw,44px)}
  .h-giant{font-size:clamp(34px,11vw,60px)}
  .header .mark .top{display:none}
}