/* ============================================
   Cortion — fond noir, League Spartan
   ============================================ */

:root{
  --bg:#0a0a0a;
  --bg-2:#101010;
  --fg:#ffffff;
  --mute:#8d8d8d;
  --mute-2:#6a6a6a;
  --hair:rgba(255,255,255,.13);
  --hair-2:rgba(255,255,255,.07);

  --wrap:1220px;
  --pad:clamp(20px,5vw,64px);
  --sec-y:clamp(90px,14vh,170px);
  --nav-h:68px;

  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.9s;

  --font-display:"League Spartan",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;background:var(--bg);}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0;line-height:.98;letter-spacing:-.02em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
ol,ul{margin:0;padding:0;list-style:none;}
em{font-style:normal;}

.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;background:#fff;color:#000;padding:10px 16px;z-index:999;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}
.wrap--center{text-align:center;}

::selection{background:#fff;color:#000;}

:focus-visible{outline:2px solid #fff;outline-offset:3px;}

/* ---------- Lueur ---------- */
/* Le text-shadow seul epousait le bloc de texte et donnait un rectangle lumineux.
   Le halo est maintenant une vraie ellipse derriere le mot. */
.glow{
  position:relative;
  color:#fff;
  text-shadow:0 0 26px rgba(255,255,255,.2);
}
.glow::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:150%;height:260%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.3) 0%,
    rgba(255,255,255,.17) 26%,
    rgba(255,255,255,.07) 46%,
    rgba(255,255,255,.02) 62%,
    rgba(255,255,255,0) 76%);
  pointer-events:none;
  z-index:-1;
}
.aura{
  position:absolute;z-index:0;pointer-events:none;
  top:-14%;left:50%;transform:translateX(-50%);
  width:min(1100px,130vw);height:min(720px,80vh);
  background:radial-gradient(ellipse at center,rgba(255,255,255,.085),rgba(255,255,255,0) 68%);
}
.aura--btm{top:auto;bottom:-24%;height:min(620px,70vh);}

/* ---------- Texte qui miroite ---------- */
.shimmer{
  background:linear-gradient(100deg,#5c5c5c 0%,#5c5c5c 32%,#ffffff 48%,#ffffff 52%,#5c5c5c 68%,#5c5c5c 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shimmer 6s linear infinite;
}
@keyframes shimmer{from{background-position:160% 0;}to{background-position:-160% 0;}}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,10,10,.6);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease);
}
.nav.is-scrolled{background:rgba(10,10,10,.86);border-bottom-color:var(--hair);}
.nav__inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav__logo{font-family:var(--font-display);font-weight:700;font-size:23px;line-height:1;}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);}
.nav__links a{font-size:14px;font-weight:500;position:relative;padding:4px 0;color:rgba(255,255,255,.82);transition:color .35s var(--ease);}
.nav__links a:hover{color:#fff;}
.nav__links a:not(.nav__cta)::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after{transform:scaleX(1);transform-origin:left;}
.nav__cta{
  border:1px solid rgba(255,255,255,.35);border-radius:999px;
  padding:9px 18px;font-weight:600;color:#fff;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.nav__cta:hover{background:#fff;color:#0a0a0a;border-color:#fff;box-shadow:0 0 30px rgba(255,255,255,.3);}

/* ---------- Bits partagés ---------- */
.label{
  font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute-2);
  margin-bottom:clamp(20px,3vw,32px);
}
.sec-head{margin-bottom:clamp(50px,7vw,90px);}
.sec-title{font-size:clamp(34px,5.6vw,72px);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:14px;font-weight:600;
  padding:15px 30px;border-radius:999px;border:1px solid transparent;
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);}
.btn--solid{background:#fff;color:#0a0a0a;border-color:#fff;}
.btn--solid:hover{box-shadow:0 0 44px rgba(255,255,255,.4);}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:#fff;}
.btn--lg{padding:19px 44px;font-size:15px;}
.btn--full{width:100%;padding:17px 30px;font-size:15px;}

/* ---------- Reveal ---------- */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  transition-delay:var(--d,0s);
}
.reveal.is-in{opacity:1;transform:none;}

.line{display:block;overflow:hidden;padding-bottom:.04em;}
.line.is-open{overflow:visible;}
/* Tant que le masque est ferme, il taille le halo en rectangle. On le garde
   invisible et on l'allume au moment exact ou le masque s'ouvre. */
.line .glow::before{opacity:0;transition:opacity .5s var(--ease);}
.line.is-open .glow::before{opacity:1;}
.line__in{
  display:block;transform:translateY(105%);opacity:0;
  transition:transform 1.05s var(--ease),opacity 1.05s var(--ease);
  transition-delay:var(--d,0s);
}
.line__in.is-in{transform:none;opacity:1;}

/* ---------- Sections ---------- */
.section{padding:var(--sec-y) 0;position:relative;scroll-margin-top:var(--nav-h);}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:130px 0 90px;position:relative;overflow:hidden;
}
.hero .wrap{position:relative;z-index:1;}
.hero__title{font-size:clamp(38px,7.6vw,104px);margin-bottom:clamp(26px,3.5vw,40px);}
.hero__sub{
  max-width:52ch;color:var(--mute);
  font-size:clamp(15px,1.35vw,19px);line-height:1.6;
  margin-bottom:clamp(34px,4.5vw,50px);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;}
.hero__scroll{
  position:absolute;left:var(--pad);bottom:34px;z-index:1;
  display:flex;align-items:center;gap:14px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-2);
}
.hero__line{display:block;width:62px;height:1px;background:var(--mute-2);animation:slide 2.6s var(--ease) infinite;transform-origin:left;}
@keyframes slide{0%{transform:scaleX(.2);}50%{transform:scaleX(1);}100%{transform:scaleX(.2);}}

/* ============ SERVICES, pile au scroll ============ */
.stack{position:relative;height:340svh;scroll-margin-top:var(--nav-h);}
.stack__inner{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;overflow:hidden;
}
.stack__head{margin-bottom:clamp(26px,4vw,48px);}
.stack__cards{
  position:relative;
  height:clamp(300px,42vh,400px);
  overflow:hidden;
  border-radius:4px;
}
.scard{
  position:absolute;inset:0;
  display:flex;gap:clamp(20px,4vw,64px);align-items:flex-start;
  background:var(--bg-2);
  border:1px solid var(--hair);
  border-radius:4px;
  padding:clamp(28px,4vw,56px);
  will-change:transform;
  transform:translateX(102%);
}
.scard__num{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(40px,6vw,88px);line-height:1;
  color:rgba(255,255,255,.16);
  flex:0 0 auto;
}
.scard__body{max-width:56ch;}
.scard__title{
  font-size:clamp(28px,4vw,54px);margin-bottom:20px;
  text-shadow:0 0 34px rgba(255,255,255,.2);
}
.scard__text{color:var(--mute);font-size:clamp(15px,1.25vw,18px);}

.dots{display:flex;gap:9px;margin-top:clamp(24px,3vw,38px);}
.dot{
  width:26px;height:2px;background:rgba(255,255,255,.2);
  transition:background .5s var(--ease),box-shadow .5s var(--ease);
}
.dot.is-on{background:#fff;box-shadow:0 0 14px rgba(255,255,255,.6);}

/* ============ PROCÉDÉ, ligne du temps ============ */
.tl{position:relative;height:560svh;scroll-margin-top:var(--nav-h);}
.tl__inner{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;overflow:hidden;
}
.tl__head{margin-bottom:clamp(26px,4vw,48px);}
.tl__track{
  display:flex;gap:1px;
  height:clamp(290px,40vh,380px);
  background:var(--hair-2);
  border:1px solid var(--hair-2);
  border-radius:4px;overflow:hidden;
}
.tlp{
  position:relative;
  flex:1 1 0%;min-width:0;
  background:var(--bg-2);
  padding:clamp(18px,2vw,30px);
  overflow:hidden;
  opacity:.34;
  filter:blur(2.5px);
  transition:flex-grow .85s var(--ease),opacity .7s var(--ease),filter .7s var(--ease),background .7s var(--ease);
}
.tlp.is-on{flex-grow:7;opacity:1;filter:none;background:#141414;}
.tlp.is-done{opacity:.2;}

.tlp__label{
  position:absolute;left:50%;bottom:clamp(18px,2vw,30px);
  transform:translateX(-50%);
  writing-mode:vertical-rl;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(14px,1.3vw,18px);letter-spacing:.06em;
  color:rgba(255,255,255,.85);
  white-space:nowrap;
  transition:opacity .45s var(--ease);
}
.tlp.is-on .tlp__label{opacity:0;}

.tlp__body{
  height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease) .18s,transform .6s var(--ease) .18s;
}
.tlp.is-on .tlp__body{opacity:1;transform:none;}
.tlp__num{
  font-family:var(--font-display);font-weight:600;
  font-size:13px;letter-spacing:.16em;color:var(--mute-2);
  margin-bottom:auto;
}
.tlp__title{
  font-size:clamp(28px,4.2vw,58px);margin-bottom:16px;
  text-shadow:0 0 34px rgba(255,255,255,.2);
}
.tlp__text{color:var(--mute);max-width:58ch;font-size:clamp(14.5px,1.15vw,17px);}

.tl__bar{
  position:relative;height:2px;background:rgba(255,255,255,.12);
  margin-top:clamp(22px,3vw,36px);
}
.tl__fill{
  position:absolute;left:0;top:0;bottom:0;width:20%;
  background:#fff;box-shadow:0 0 16px rgba(255,255,255,.6);
  transition:width .6s var(--ease);
}

/* ============ APPROCHE ============ */
.section--approche{overflow:hidden;}
.marquee{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,5vw,70px);
  pointer-events:none;user-select:none;z-index:0;opacity:.07;
}
.marquee__track{
  display:flex;width:max-content;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(56px,11vw,150px);line-height:1;white-space:nowrap;
  animation:marq 44s linear infinite;
}
.marquee__track--rev{animation-duration:58s;animation-direction:reverse;}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.section--approche .wrap{position:relative;z-index:1;}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,52px);}
.pillar{border-top:1px solid rgba(255,255,255,.35);padding-top:clamp(20px,2.4vw,30px);}
.pillar__title{font-size:clamp(19px,1.65vw,23px);line-height:1.2;margin-bottom:16px;}
.pillar__text{color:var(--mute);font-size:15px;}

/* ============ CTA ============ */
.cta{padding:clamp(110px,17vh,200px) 0;position:relative;overflow:hidden;}
.cta .wrap{position:relative;z-index:1;}
.cta__title{font-size:clamp(38px,7vw,92px);margin-bottom:26px;}
.cta__sub{color:var(--mute);max-width:46ch;margin:0 auto clamp(36px,4.5vw,52px);font-size:clamp(15px,1.2vw,18px);}
.cta__mail{
  display:block;margin-top:clamp(28px,3.5vw,40px);
  font-size:14px;letter-spacing:.06em;color:var(--mute);
  border-bottom:1px solid rgba(255,255,255,.22);
  width:fit-content;margin-inline:auto;padding-bottom:3px;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.cta__mail:hover{color:#fff;border-color:#fff;}

/* ============ Footer ============ */
.footer{padding:34px 0;border-top:1px solid var(--hair);}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.footer__logo{font-family:var(--font-display);font-weight:700;font-size:19px;}
.footer__meta{font-size:12.5px;color:var(--mute-2);letter-spacing:.06em;}
.footer__mail{
  font-size:12.5px;color:var(--mute);letter-spacing:.06em;
  border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:2px;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.footer__mail:hover{color:#fff;border-color:#fff;}

/* ============ Page formulaire ============ */
.form-page{
  position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(50px,9vh,110px)) 0 clamp(70px,10vh,130px);
}
.form-page .wrap{position:relative;z-index:1;}
.form-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,96px);align-items:start;
}
.form-title{font-size:clamp(30px,3.8vw,52px);max-width:15ch;margin-bottom:24px;}
.form-lead{color:var(--mute);max-width:44ch;font-size:clamp(15px,1.2vw,18px);}
.form-points{margin-top:clamp(30px,4vw,46px);display:grid;gap:16px;}
.form-points li{
  display:flex;gap:16px;align-items:baseline;
  padding-bottom:16px;border-bottom:1px solid var(--hair-2);
  color:rgba(255,255,255,.9);font-size:15px;
}
.form-points__n{
  font-family:var(--font-display);font-weight:600;
  font-size:12px;letter-spacing:.14em;color:var(--mute-2);
}
.form-mail{
  display:inline-block;margin-top:clamp(28px,3.5vw,40px);
  font-size:14px;letter-spacing:.06em;color:var(--mute);
  border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:3px;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.form-mail:hover{color:#fff;border-color:#fff;}

.form-card{
  background:var(--bg-2);
  border:1px solid var(--hair);
  border-radius:6px;
  padding:clamp(24px,3.2vw,44px);
}
.form{display:grid;gap:clamp(16px,1.8vw,22px);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px);}
.field{display:flex;flex-direction:column;gap:9px;}
.field label{
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mute);
}
.opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--mute-2);font-size:11.5px;}
.field input,.field textarea,.field select{
  width:100%;
  font-family:var(--font-body);font-size:15px;color:#fff;
  background:#0a0a0a;
  border:1px solid rgba(255,255,255,.16);
  border-radius:3px;
  padding:13px 15px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.field textarea{resize:vertical;min-height:110px;line-height:1.55;}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238d8d8d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;
  padding-right:40px;
}
.field input::placeholder,.field textarea::placeholder{color:#555;}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:#fff;background:#0d0d0d;
  box-shadow:0 0 0 1px #fff,0 0 26px rgba(255,255,255,.16);
}
.field.is-bad input,.field.is-bad textarea{border-color:#ff6b6b;}
.field .err{font-size:12.5px;color:#ff8f8f;letter-spacing:0;text-transform:none;font-weight:400;}
.form-note{font-size:12.5px;color:var(--mute-2);line-height:1.5;text-align:center;}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none;}

/* ============ Page merci ============ */
.thanks{
  position:relative;overflow:hidden;
  min-height:calc(100svh - 103px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--nav-h) + 60px) 0 80px;
}
.thanks .wrap{position:relative;z-index:1;}
.thanks__title{font-size:clamp(38px,6.6vw,86px);margin-bottom:26px;}
.thanks__sub{color:var(--mute);max-width:48ch;margin:0 auto clamp(34px,4.5vw,46px);font-size:clamp(15px,1.2vw,18px);}

/* ============ Responsive ============ */
@media (max-width:980px){
  .form-grid{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .pillars{grid-template-columns:1fr;}
  .scard{flex-direction:column;gap:14px;}
  .scard__num{font-size:34px;}

  /* la ligne du temps devient verticale */
  .tl__track{flex-direction:column;height:clamp(360px,54vh,480px);}
  .tlp{filter:blur(1.6px);}
  .tlp__label{
    writing-mode:horizontal-tb;
    left:clamp(18px,2vw,30px);top:50%;bottom:auto;
    transform:translateY(-50%);
  }
  .tlp__body{justify-content:center;}
  .tlp__num{margin-bottom:12px;}
}
@media (max-width:860px){
  .nav__links{gap:16px;}
  .nav__links a{font-size:13px;}
}
@media (max-width:720px){
  .nav__links a:not(.nav__cta){display:none;}
}
@media (max-width:640px){
  :root{--nav-h:60px;}
  .stack{height:300svh;}
  .tl{height:480svh;}
  .nav__links a:not(.nav__cta){display:none;}
  .nav__cta{padding:8px 15px;font-size:13px;}
  .hero{min-height:92svh;padding-top:110px;}
  .hero__actions .btn{flex:1 1 100%;}
  .hero__scroll{display:none;}
  .stack__cards{height:clamp(280px,46vh,380px);}
  .scard__title{font-size:26px;}
  .tlp__title{font-size:26px;}
  .form-row{grid-template-columns:1fr;}
  .footer__inner{justify-content:flex-start;gap:10px 22px;}
}

@media (prefers-reduced-motion:reduce){
  .reveal,.line__in{opacity:1!important;transform:none!important;transition:none!important;}
  .marquee__track,.hero__line,.shimmer{animation:none!important;}
  .shimmer{-webkit-text-fill-color:#fff;color:#fff;}
  .btn:hover{transform:none;}
}