:root{
    --ink:#080a0f;
    --paper:#faf9f6;
    --mut:#9a9ea8;
    --line:rgba(250,249,246,.14);
    --line-2:rgba(250,249,246,.30);
    --blue:#014AAD;
    --blue-2:#0a5fd0;
    --blue-lite:#5a94ec;
    --gut:clamp(18px,3vw,44px);
    --wrap:1200px;
    --disp:"Bricolage Grotesque", system-ui, sans-serif;
    --body:"Instrument Sans", system-ui, sans-serif;
    --mono:"Martian Mono", ui-monospace, monospace;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:var(--body);
    font-size:17px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    padding-bottom:64px; /* place pour la bannière sticky "appel" */
  }
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--blue); color:#fff}

  /* ---------- HEADER ---------- */
  .head{
    position:fixed; inset:0 0 auto 0; z-index:40;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px var(--gut);
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, rgba(10,10,10,.85), rgba(10,10,10,0));
    backdrop-filter:blur(6px);
  }
  .brand{
    font-family:var(--disp); font-weight:800; font-size:1.5rem;
    letter-spacing:-.02em; line-height:1;
  }
  .nav{display:flex; gap:22px; align-items:center}
  .nav a{
    font-family:var(--body); font-size:1rem; 
    letter-spacing:0; color:var(--mut); transition:color .2s;
  }
  .nav a:hover, .nav a.active{color:var(--paper)}
  .nav .cta{
    color:var(--ink); background:var(--paper);
    padding:9px 15px; border-radius:999px; letter-spacing:0;
  }
  .nav .cta:hover{color:var(--ink)}
  /* hamburger */
  .nav-toggle{
    display:none; width:32px; height:24px; background:none; border:0; cursor:pointer;
    flex-direction:column; justify-content:space-between; padding:3px 0; z-index:41;
  }
  .nav-toggle span{display:block; height:2px; width:26px; background:var(--paper); transition:transform .3s, opacity .3s}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  @media(max-width:900px){
    .nav-toggle{display:flex}
    .nav{
      position:fixed; inset:0; z-index:39; flex-direction:column; justify-content:center; gap:30px;
      background:rgba(8,10,15,.98); backdrop-filter:blur(16px);
      transform:translateX(100%); transition:transform .45s cubic-bezier(.2,.8,.2,1);
    }
    body.nav-open .nav{transform:none}
    .nav a{font-size:1.05rem; letter-spacing:0}
    .nav .cta{padding:15px 28px; font-size:.95rem}
  }

  /* ---------- HERO ---------- */
  .hero{position:relative; min-height:100svh; overflow:hidden}

  /* video wall */
  .wall{
    position:absolute; inset:0; z-index:1;
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:14px; padding:14px;
    opacity:.85;
    -webkit-mask-image:linear-gradient(to bottom, #000 60%, transparent 95%);
    mask-image:linear-gradient(to bottom, #000 60%, transparent 95%);
  }
  .col{overflow:hidden}
  .track{display:flex; flex-direction:column; gap:14px; will-change:transform}
  .col:nth-child(1) .track{animation:up 42s linear infinite}
  .col:nth-child(2) .track{animation:down 52s linear infinite}
  .col:nth-child(3) .track{animation:up 48s linear infinite}
  .col:nth-child(4) .track{animation:down 46s linear infinite}
  @keyframes up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
  @keyframes down{from{transform:translateY(-50%)}to{transform:translateY(0)}}

  .tile{
    position:relative; width:100%; aspect-ratio:9/16;
    border-radius:14px; overflow:hidden; background:#161616;
    box-shadow:0 20px 50px rgba(0,0,0,.5);
  }
  .tile iframe{
    position:absolute; inset:50% 50% auto auto; transform:translate(50%,-50%);
    width:100%; height:100%; border:0;
    filter:grayscale(.15) contrast(1.05) brightness(.92);
    pointer-events:none;
  }

  /* scrims for legibility */
  .scrim{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      radial-gradient(115% 90% at 8% 42%, rgba(1,74,173,.34) 0%, rgba(1,74,173,0) 58%),
      linear-gradient(90deg, rgba(8,10,15,.97) 0%, rgba(8,10,15,.9) 34%, rgba(8,10,15,.5) 70%, rgba(8,10,15,.72) 100%),
      linear-gradient(0deg, rgba(8,10,15,.95) 0%, rgba(8,10,15,0) 26%);
  }

  /* hero content */
  .hero__inner{
    position:relative; z-index:3;
    min-height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    padding:120px var(--gut) 120px;
    max-width:calc(var(--wrap) + var(--gut) * 2); margin:0 auto;
  }
  .eyebrow{
    font-family:var(--body); font-size:1rem; 
    letter-spacing:0; color:var(--mut);
    display:flex; align-items:center; gap:12px; margin-bottom:26px;
  }
  .rec{display:inline-flex; align-items:center; gap:7px; color:var(--paper)}
  .rec .dot{
    width:8px; height:8px; border-radius:50%; background:var(--blue-lite);
    box-shadow:0 0 0 0 rgba(90,148,236,.6); animation:pulse 1.8s ease-out infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(90,148,236,.55)}
    70%{box-shadow:0 0 0 10px rgba(90,148,236,0)}
    100%{box-shadow:0 0 0 0 rgba(90,148,236,0)}
  }

  h1{
    font-family:var(--disp); font-weight:800;
    font-size:clamp(2.5rem, 7.4vw, 6.3rem);
    line-height:1.02; letter-spacing:-.03em;
    text-transform:none;
    max-width:17ch;
  }
  /* titre traité comme les sous-titres incrustés des vidéos nelka */
  h1 .cap{
    background:var(--blue); color:#fff;
    padding:.02em .16em; border-radius:.1em;
    box-decoration-break:clone; -webkit-box-decoration-break:clone;
    white-space:nowrap;
  }

  .lede{
    margin-top:30px; max-width:44ch;
    font-size:clamp(1.02rem,1.35vw,1.24rem); color:#cfcfc9; line-height:1.55;
    text-transform:lowercase;
  }

  .actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; align-items:center}
  .btn{
    font-family:var(--body); font-weight:600; font-size:1rem;
    background:var(--blue); color:#fff;
    padding:15px 26px; border-radius:999px; text-transform:lowercase;
    transition:transform .2s, background .2s;
  }
  .btn:hover{transform:translateY(-2px); background:var(--blue-2)}
  .ghost{
    font-family:var(--body); font-size:1.05rem; 
    letter-spacing:0; color:var(--mut);
    border-bottom:1px solid var(--line-2); padding-bottom:4px; transition:color .2s;
  }
  .ghost:hover{color:var(--paper)}

  /* ---------- SOCIAL PROOF (hero) ---------- */
  .proof{display:flex; flex-wrap:wrap; margin-top:36px}
  .proof__item{display:flex; flex-direction:column; gap:7px; padding:2px 30px}
  .proof__item:first-child{padding-left:0}
  .proof__item + .proof__item{border-left:1px solid var(--line)}
  .proof .num{
    font-family:var(--disp); font-weight:800; line-height:1;
    font-size:clamp(1.8rem,2.7vw,2.7rem); letter-spacing:-.02em; color:var(--paper);
  }
  .proof .lbl{
    font-family:var(--body); font-size:1rem; font-weight:500;
    letter-spacing:0; color:#c3c6ce;
  }

  /* bande de logos défilante (pleine largeur, bas du hero) */
  .trust{
    position:absolute; left:0; right:0; bottom:clamp(76px,10vh,112px); z-index:3;
  }
  .trust__label{
    font-family:var(--body); font-size:1rem; font-weight:500;
    text-transform:none; letter-spacing:0; color:#c1c4cc;
    margin:0 0 18px; padding:0 var(--gut);
  }
  .trust__marquee{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .trust__track{
    display:flex; align-items:center; gap:clamp(40px,5vw,72px); width:max-content;
    animation:marquee 45s linear infinite;
  }
  .trust__track img{height:clamp(28px,3.4vw,40px); width:auto; opacity:.85}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){ .trust__track{animation:none} }

  /* secondary CTA */
  .btn-2{
    font-family:var(--body); font-weight:600; font-size:1rem;
    background:transparent; color:var(--paper); border:1px solid var(--line-2);
    padding:14px 24px; border-radius:999px; text-transform:lowercase;
    transition:border-color .2s, transform .2s;
  }
  .btn-2:hover{border-color:var(--paper); transform:translateY(-2px)}

  /* ---------- média (lecture au survol, partagé) ---------- */
  .media{position:relative; overflow:hidden; background:#e8e7e1}
  .media > img, .media > iframe{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0;
  }

  /* ---------- CAS D'ÉTUDES (immersif sombre) ---------- */
  .cases{
    position:relative; z-index:5; background:var(--ink); color:var(--paper); overflow:hidden;
    border-radius:clamp(28px,4vw,52px) clamp(28px,4vw,52px) 0 0; margin-top:-48px;
    padding:clamp(60px,7vw,104px) 0 0;
  }
  .cases::before{
    content:""; position:absolute; top:0; left:0; right:0; height:540px; z-index:0;
    background:radial-gradient(72% 100% at 16% 0%, rgba(1,74,173,.24), rgba(8,10,15,0) 68%);
    pointer-events:none;
  }
  .cases__head{
    position:relative; z-index:1;
    display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap;
    max-width:var(--wrap); margin:0 auto clamp(40px,5vw,72px); padding:0 var(--gut);
  }
  .cases__title{
    font-family:var(--disp); font-weight:800; text-transform:none;
    font-size:clamp(2.5rem,6vw,5rem); line-height:.94; letter-spacing:-.04em; margin:0;
  }
  .cases__claim{
    font-family:var(--body); font-size:clamp(1.05rem,1.4vw,1.35rem); line-height:1.4;
    color:#9a9ea8; max-width:24ch; text-align:right; margin:0 0 8px;
  }
  .cases__claim b{color:var(--paper); font-weight:600}
  @media(max-width:700px){
    .cases__head{align-items:flex-start}
    .cases__claim{text-align:left; max-width:100%; margin-top:6px}
  }
  .case{
    position:relative; overflow:hidden;
    min-height:min(86vh,820px); display:flex; align-items:center;
  }
  .case__bg{
    position:absolute; inset:0; z-index:0;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  }
  .case__bg img{
    width:100%; height:100%; object-fit:cover;
    filter:blur(34px) brightness(.34) saturate(1.2); transform:scale(1.18);
  }
  .case__scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(90% 80% at 80% 50%, rgba(1,74,173,.28), rgba(8,10,15,0) 60%),
      linear-gradient(90deg, rgba(8,10,15,.95) 0%, rgba(8,10,15,.74) 46%, rgba(8,10,15,.4) 100%);
  }
  .case--flip .case__scrim{
    background:
      radial-gradient(90% 80% at 20% 50%, rgba(1,74,173,.28), rgba(8,10,15,0) 60%),
      linear-gradient(270deg, rgba(8,10,15,.95) 0%, rgba(8,10,15,.74) 46%, rgba(8,10,15,.4) 100%);
  }
  .case__inner{
    position:relative; z-index:2; width:100%; max-width:var(--wrap); margin:0 auto;
    display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
    gap:clamp(28px,5vw,72px); padding:clamp(48px,7vw,100px) var(--gut);
  }
  .case--flip .case__video{order:2}
  .case__video{
    position:relative; width:100%; max-width:330px; aspect-ratio:9/16; margin:0 auto;
    border-radius:24px; overflow:hidden; background:#000;
    box-shadow:0 40px 90px rgba(0,0,0,.55);
  }
  .case__video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
  .case__index{
    font-family:var(--body); font-size:1rem; 
    letter-spacing:0; color:var(--blue-lite); margin-bottom:18px;
  }
  .case__client{
    font-family:var(--disp); font-weight:800; text-transform:none;
    font-size:clamp(2.8rem,6.2vw,5.2rem); line-height:.9; letter-spacing:-.04em;
    margin:0 0 20px; color:var(--paper);
  }
  .case__headline{
    font-family:var(--body); font-weight:500;
    font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.35; letter-spacing:-.01em;
    color:#c9c9c3; max-width:26ch; margin:0 0 clamp(28px,3vw,40px);
  }
  /* numérotation — style A (pastille discrète) */
  .case__num-a{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--body); font-size:.95rem; letter-spacing:0; 
    color:var(--blue-lite); border:1px solid var(--line-2); border-radius:999px;
    padding:6px 13px; margin-bottom:22px;
  }
  .case__num-a em{color:var(--mut); font-style:normal}
  /* numérotation — style B (gros chiffre contour) */
  .case__num-b{
    display:block; font-family:var(--disp); font-weight:800;
    font-size:clamp(3rem,7vw,5.6rem); line-height:.78; letter-spacing:-.04em;
    color:transparent; -webkit-text-stroke:1.5px rgba(90,148,236,.7); text-stroke:1.5px rgba(90,148,236,.7);
    margin-bottom:8px;
  }

  .case__link{
    display:inline-flex; align-items:center; gap:11px;
    font-family:var(--body); font-size:1.05rem;  letter-spacing:0;
    color:var(--paper); border-bottom:1px solid var(--line-2); padding-bottom:9px;
    transition:color .25s, border-color .25s;
  }
  .case__link span{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .case__link:hover{color:var(--blue-lite); border-color:var(--blue-lite)}
  .case__link:hover span{transform:translateX(6px)}

  /* aperçu flouté du cas suivant + bouton */
  .cases__peek{
    position:relative; z-index:1;
    height:min(50vh,460px); overflow:hidden;
  }
  .case--teaser{min-height:0; align-items:flex-start; filter:blur(3px)}
  .case--teaser .case__inner{padding-top:clamp(44px,6vw,80px); padding-bottom:0}
  .case--teaser .case__bg{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 34%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 34%);
  }
  .cases__peek-veil{
    position:absolute; inset:0; z-index:3; pointer-events:none;
    background:linear-gradient(to bottom, rgba(8,10,15,0) 0%, rgba(8,10,15,.5) 44%, var(--ink) 88%);
  }
  .cases__more-btn{
    position:absolute; left:50%; bottom:clamp(30px,4vw,54px); transform:translateX(-50%);
    z-index:4; display:inline-flex; align-items:center; gap:12px;
    font-family:var(--body); font-weight:600; font-size:1.1rem;
    background:var(--blue); color:#fff; border:none;
    padding:18px 38px; border-radius:999px; white-space:nowrap; cursor:pointer;
    box-shadow:0 18px 50px rgba(1,74,173,.55);
    transition:background .25s, transform .2s, box-shadow .25s;
  }
  .cases__more-btn span{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .cases__more-btn:hover{background:var(--blue-2); transform:translateX(-50%) translateY(-3px); box-shadow:0 24px 62px rgba(1,74,173,.72)}
  .cases__more-btn:hover span{transform:translateX(6px)}
  @media(max-width:760px){
    .case{min-height:auto}
    .case__inner{grid-template-columns:1fr; gap:30px; padding-top:clamp(44px,11vw,64px); padding-bottom:clamp(44px,11vw,64px)}
    /* sur téléphone : toujours le texte au-dessus, la vidéo en dessous (rendu régulier) */
    .case__body{order:0}
    .case__video, .case--flip .case__video{order:1}
    .case__video{max-width:240px}
    .case__scrim, .case--flip .case__scrim{background:linear-gradient(0deg, rgba(8,10,15,.92), rgba(8,10,15,.55))}
    /* sur téléphone : on retire l'aperçu flouté et on pose un bouton simple, centré */
    .cases__peek{height:auto; overflow:visible; display:flex; justify-content:center; padding:8px var(--gut) 30px}
    .case--teaser{display:none}
    .cases__peek-veil{display:none}
    .cases__more-btn{position:relative; left:auto; bottom:auto; z-index:6; transform:none; margin:0; max-width:100%; box-shadow:0 14px 36px rgba(1,74,173,.5)}
    .cases__more-btn:hover{transform:translateY(-3px)}
  }

  /* ---------- NOS SERVICES (section sombre, premium) ---------- */
  .services{
    position:relative; z-index:6; background:var(--ink); color:var(--paper);
    border-radius:clamp(28px,4vw,52px) clamp(28px,4vw,52px) 0 0; margin-top:-48px;
    padding:clamp(72px,9vw,140px) var(--gut) clamp(90px,10vw,160px);
  }
  .services__head{max-width:var(--wrap); margin:0 auto clamp(28px,4vw,52px)}
  .services__list{max-width:var(--wrap); margin:0 auto}
  .services__kick{
    font-family:var(--body); font-size:1rem; 
    letter-spacing:0; color:var(--blue-lite); margin-bottom:16px;
  }
  .services__title{
    font-family:var(--disp); font-weight:800; text-transform:none;
    font-size:clamp(2.5rem,6vw,5rem); line-height:.94; letter-spacing:-.04em; margin:0;
  }
  .service{
    display:flex; align-items:baseline; gap:clamp(16px,3vw,40px);
    padding:clamp(28px,3.4vw,46px) 0; border-top:1px solid var(--line);
    cursor:pointer; transition:padding-left .35s ease;
  }
  .service:last-child{border-bottom:1px solid var(--line)}
  .service__index{
    font-family:var(--body); font-size:1rem; letter-spacing:0; color:var(--mut);
    min-width:2.4em;
  }
  .service__name{
    font-family:var(--disp); font-weight:800; text-transform:lowercase;
    font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:1; letter-spacing:-.03em;
    flex:1; margin:0; transition:transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .service__desc{
    font-family:var(--body); color:var(--mut); font-size:1rem; max-width:30ch;
    text-align:right; text-transform:lowercase;
  }
  .service__arrow{
    font-size:1.4rem; color:var(--blue-lite); opacity:0;
    transform:translateX(-8px); transition:opacity .35s, transform .35s;
  }
  .service:hover{padding-left:14px}
  .service:hover .service__name{transform:translateX(6px)}
  .service:hover .service__arrow{opacity:1; transform:translateX(0)}
  @media(max-width:760px){
    .service{flex-wrap:wrap; gap:6px 16px}
    .service__desc{flex-basis:100%; text-align:left; color:#7d818b}
    .service__arrow{display:none}
  }

  /* ---------- CALENDLY (rendez-vous) ---------- */
  .book{
    position:relative; z-index:5; background:var(--ink); overflow:hidden;
    border-radius:clamp(28px,4vw,52px) clamp(28px,4vw,52px) 0 0; margin-top:-48px;
    padding:clamp(60px,7vw,104px) 0 clamp(70px,8vw,120px);
  }
  .book::before{
    content:""; position:absolute; top:0; left:0; right:0; height:460px; z-index:0;
    background:radial-gradient(70% 100% at 82% 0%, rgba(1,74,173,.22), rgba(8,10,15,0) 66%);
    pointer-events:none;
  }
  .book__inner{position:relative; z-index:1; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
  .book__head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap;
    margin-bottom:clamp(30px,4vw,48px);
  }
  .book__head h2{
    font-family:var(--disp); font-weight:800; text-transform:none;
    font-size:clamp(2.5rem,6vw,5rem); line-height:.94; letter-spacing:-.04em; margin:0;
  }
  .book__claim{
    font-family:var(--body); font-size:clamp(1.05rem,1.4vw,1.35rem); line-height:1.4;
    color:#9a9ea8; max-width:24ch; text-align:right; margin:0 0 8px;
  }
  .book__claim b{color:var(--paper); font-weight:600}
  .book__widget{
    border-radius:20px; overflow:hidden; border:1px solid var(--line);
    background:#0a0c12; box-shadow:0 40px 100px rgba(0,0,0,.5);
  }
  .calendly-inline-widget{min-width:320px; height:700px}
  /* page contact : la colonne est plus étroite, Calendly s'empile → plus de hauteur pour tout voir */
  .contact .calendly-inline-widget{height:1040px}
  @media(max-width:820px){ .contact .calendly-inline-widget{height:1080px} }
  @media(max-width:700px){ .book__claim{text-align:left; max-width:100%} }

  /* ---------- MÉTHODE (interactif) ---------- */
  .method{
    max-width:var(--wrap); margin:0 auto;
    display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(22px,3.5vw,56px); align-items:stretch;
  }
  .method__tabs{display:flex; flex-direction:column; gap:10px}
  .mtab{
    display:flex; gap:18px; text-align:left; cursor:pointer; width:100%;
    background:transparent; border:1px solid var(--line); border-radius:18px;
    padding:clamp(17px,1.9vw,25px); color:var(--paper);
    transition:background .25s, border-color .25s;
  }
  .mtab:hover{border-color:var(--line-2)}
  .mtab.is-active{background:rgba(1,74,173,.15); border-color:rgba(90,148,236,.5)}
  .mtab__n{font-family:var(--body); font-size:.95rem; color:var(--blue-lite); padding-top:5px}
  .mtab__body{display:flex; flex-direction:column; gap:6px}
  .mtab__t{font-family:var(--disp); font-weight:800; font-size:clamp(1.25rem,1.9vw,1.65rem); letter-spacing:-.02em}
  .mtab__d{font-family:var(--body); color:var(--mut); font-size:.95rem; line-height:1.4}
  .mtab.is-active .mtab__d{color:#c9c9c3}

  .method__stage{
    position:relative; border-radius:22px; overflow:hidden; min-height:380px;
    background:linear-gradient(155deg, rgba(1,74,173,.16), rgba(8,10,15,.35));
    border:1px solid var(--line);
  }
  .mpanel{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:34px; padding:clamp(28px,4vw,52px); text-align:center;
    opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
  }
  .mpanel.is-active{opacity:1; transform:none; pointer-events:auto}
  .mpanel__cap{font-family:var(--body); color:#c9c9c3; max-width:34ch; line-height:1.55; font-size:1.05rem}

  /* graphiques */
  .g-radar{position:relative; width:172px; height:172px}
  .g-radar span{position:absolute; inset:0; margin:auto; width:172px; height:172px; border:1.5px solid var(--blue-lite); border-radius:50%; opacity:0; animation:radar 3s ease-out infinite}
  .g-radar span:nth-child(2){animation-delay:1s}
  .g-radar span:nth-child(3){animation-delay:2s}
  .g-radar b{position:absolute; inset:0; margin:auto; width:14px; height:14px; background:var(--blue-lite); border-radius:50%; box-shadow:0 0 22px var(--blue-lite)}
  @keyframes radar{0%{transform:scale(.14); opacity:.9}100%{transform:scale(1); opacity:0}}

  .g-flow{display:flex; align-items:flex-start}
  .g-flow .node{display:flex; flex-direction:column; align-items:center; gap:12px}
  .g-flow .dot{width:16px; height:16px; border-radius:50%; background:var(--blue-lite); box-shadow:0 0 16px var(--blue-lite)}
  .g-flow .lbl{font-family:var(--body); font-size:.95rem;  letter-spacing:0; color:var(--mut); white-space:nowrap}
  .g-flow .line{position:relative; width:clamp(28px,5vw,60px); height:2px; margin-top:7px; background:var(--line); overflow:hidden}
  .g-flow .line::after{content:""; position:absolute; top:0; left:0; height:100%; width:45%; background:var(--blue-lite); animation:flow 1.8s linear infinite}
  @keyframes flow{from{transform:translateX(-120%)}to{transform:translateX(260%)}}

  .g-eq{display:flex; gap:9px; align-items:flex-end; height:140px}
  .g-eq i{width:13px; background:var(--blue-lite); border-radius:7px; height:26%; animation:eq 1.1s ease-in-out infinite}
  .g-eq i:nth-child(2){animation-delay:.14s}
  .g-eq i:nth-child(3){animation-delay:.28s}
  .g-eq i:nth-child(4){animation-delay:.42s}
  .g-eq i:nth-child(5){animation-delay:.20s}
  .g-eq i:nth-child(6){animation-delay:.36s}
  .g-eq i:nth-child(7){animation-delay:.10s}
  @keyframes eq{0%,100%{height:22%}50%{height:100%}}

  .g-rise{position:relative; height:150px; width:90px}
  .g-rise i{position:absolute; left:50%; bottom:0; transform:translateX(-50%); color:var(--blue-lite); font-size:2rem; font-style:normal; opacity:0; animation:rise 2.2s linear infinite}
  .g-rise i:nth-child(2){animation-delay:.73s}
  .g-rise i:nth-child(3){animation-delay:1.46s}
  @keyframes rise{0%{bottom:0; opacity:0}18%{opacity:1}100%{bottom:100%; opacity:0}}

  .g-bars{display:flex; gap:12px; align-items:flex-end; height:152px}
  .g-bars i{width:24px; background:linear-gradient(to top, rgba(1,74,173,.55), var(--blue-lite)); border-radius:6px 6px 0 0; height:15%; animation:grow 2.6s ease-in-out infinite alternate}
  .g-bars i:nth-child(2){animation-delay:.3s}
  .g-bars i:nth-child(3){animation-delay:.6s}
  .g-bars i:nth-child(4){animation-delay:.9s}
  .g-bars i:nth-child(5){animation-delay:1.2s}
  @keyframes grow{from{height:18%}to{height:var(--h,90%)}}

  .g-net{display:flex; flex-direction:column; align-items:center; gap:12px}
  .g-net__num{font-family:var(--disp); font-weight:800; font-size:clamp(3rem,6vw,4.6rem); line-height:1; letter-spacing:-.03em; color:var(--paper)}
  .g-net__lbl{font-family:var(--body); font-size:.95rem;  letter-spacing:0; color:var(--blue-lite)}
  .g-net__tags{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:340px; margin-top:10px}
  .g-net__tags i{font-family:var(--body); font-style:normal; font-size:.95rem; color:#c9c9c3; background:rgba(255,255,255,.06); border:1px solid var(--line); padding:6px 13px; border-radius:999px}

  /* psychologie de la cible */
  .g-psycho{position:relative; width:min(300px,82%); aspect-ratio:1.4; display:grid; place-items:center}
  .g-psycho .ring{position:absolute; inset:0; margin:auto; width:118px; height:118px; border:1.5px solid var(--blue-lite); border-radius:50%; opacity:0; animation:radar 3s ease-out infinite}
  .g-psycho .ring:nth-of-type(2){animation-delay:1.5s}
  .g-psycho .core{position:relative; z-index:2; width:72px; height:72px; border-radius:50%; border:1.5px solid rgba(90,148,236,.6); background:rgba(1,74,173,.16); display:grid; place-items:center}
  .g-psycho .core b{width:13px; height:13px; border-radius:50%; background:var(--blue-lite); box-shadow:0 0 18px var(--blue-lite); animation:pulseDot 1.6s ease-in-out infinite}
  @keyframes pulseDot{0%,100%{transform:scale(1); opacity:1}50%{transform:scale(1.5); opacity:.55}}
  .g-psycho .trig{
    position:absolute; z-index:3; font-family:var(--body); font-size:.95rem;  letter-spacing:0;
    color:#c9c9c3; background:rgba(8,10,15,.6); border:1px solid var(--line); padding:6px 12px; border-radius:999px; white-space:nowrap;
    animation:trigPulse 3.2s ease-in-out infinite;
  }
  .g-psycho .t1{top:0; left:50%; transform:translateX(-50%)}
  .g-psycho .t2{top:50%; right:0; transform:translateY(-50%); animation-delay:.8s}
  .g-psycho .t3{bottom:0; left:50%; transform:translateX(-50%); animation-delay:1.6s}
  .g-psycho .t4{top:50%; left:0; transform:translateY(-50%); animation-delay:2.4s}
  @keyframes trigPulse{0%,100%{opacity:.45; border-color:var(--line)}50%{opacity:1; border-color:rgba(90,148,236,.55)}}

  @media(max-width:820px){
    .method{grid-template-columns:1fr; gap:18px}
    .method__stage{min-height:300px; order:-1}
  }
  @media(prefers-reduced-motion:reduce){
    .g-radar span,.g-eq i,.g-rise i,.g-bars i{animation:none}
  }

  /* ---------- VSL (première section, sombre premium) ---------- */
  .vsl{
    position:relative; z-index:4; background:var(--ink); overflow:hidden;
    border-radius:clamp(28px,4vw,52px) clamp(28px,4vw,52px) 0 0; margin-top:-48px;
    padding:clamp(64px,7vw,110px) 0 clamp(80px,9vw,140px);
  }
  .vsl::before{
    content:""; position:absolute; top:0; left:0; right:0; height:540px; z-index:0;
    background:radial-gradient(72% 100% at 16% 0%, rgba(1,74,173,.24), rgba(8,10,15,0) 68%);
    pointer-events:none;
  }
  .vsl__inner{position:relative; z-index:1; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
  .vsl__head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap;
    margin-bottom:clamp(34px,4vw,54px);
  }
  .vsl h2{
    font-family:var(--disp); font-weight:800; text-transform:none;
    font-size:clamp(2.5rem,6vw,5rem); line-height:.94; letter-spacing:-.04em;
    max-width:14ch; margin:0;
  }
  .vsl__claim{
    font-family:var(--body); font-size:clamp(1.05rem,1.4vw,1.35rem); line-height:1.4;
    color:#9a9ea8; max-width:24ch; text-align:right; margin:0 0 8px;
  }
  .vsl__claim b{color:var(--paper); font-weight:600}
  @media(max-width:700px){
    .vsl__head{align-items:flex-start}
    .vsl__claim{text-align:left; max-width:100%; margin-top:6px}
  }
  .vsl__player{
    position:relative; width:100%; max-width:1000px; margin:0 auto; aspect-ratio:16/9;
    border-radius:28px; overflow:hidden; background:#000;
    box-shadow:0 50px 120px rgba(0,0,0,.6);
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .vsl__player:hover{transform:translateY(-6px)}
  .vsl__player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
  .vsl__cta{margin-top:clamp(34px,4vw,52px); text-align:center}

  /* ---------- BANNIÈRE STICKY (appel) ---------- */
  .callbar{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    display:flex; align-items:center; justify-content:center; gap:18px;
    padding:13px var(--gut);
    background:rgba(8,10,15,.82); backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
  }
  .callbar__txt{font-family:var(--body); color:var(--paper); font-size:1rem}
  .callbar__txt b{font-weight:600}
  .callbar__btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--body); font-weight:600; font-size:.95rem;
    background:var(--blue); color:#fff; padding:11px 22px; border-radius:999px;
    transition:background .2s, transform .2s;
  }
  .callbar__btn:hover{background:var(--blue-2); transform:translateY(-1px)}
  @media(max-width:520px){
    .callbar{gap:12px; padding:11px 16px}
    .callbar__txt{font-size:.9rem}
    .callbar__btn{padding:9px 16px; font-size:1.05rem}
  }

  /* ---------- BADGE circulaire (signature) ---------- */
  .badge{
    position:fixed; right:22px; bottom:92px; width:104px; height:104px; z-index:60;
    display:grid; place-items:center; border-radius:50%;
    background:var(--blue); box-shadow:0 14px 40px rgba(0,0,0,.4);
    text-decoration:none;
  }
  .badge__spin{position:absolute; inset:0; animation:spin 16s linear infinite}
  .badge__spin svg{width:100%; height:100%}
  .badge__spin text{
    font-family:var(--body); font-size:8.4px; letter-spacing:0;
     fill:#fff;
  }
  .badge__icon{position:relative; z-index:2; color:#fff; font-size:1.5rem; line-height:1}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media(max-width:620px){ .badge{width:76px; height:76px; right:16px; bottom:78px} }

  @media(prefers-reduced-motion:reduce){ .badge__spin{animation:none} }

  /* apparition au scroll */
  .reveal{opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
  .reveal.in{opacity:1; transform:none}

  @media(max-width:820px){
    .wall{grid-template-columns:repeat(2,1fr)}
    .col:nth-child(3),.col:nth-child(4){display:none}
    .scrim{background:
      linear-gradient(0deg, rgba(10,10,10,.97) 8%, rgba(10,10,10,.6) 55%, rgba(10,10,10,.8) 100%);}
  }

  @media(prefers-reduced-motion:reduce){
    .track{animation:none}
    .rec .dot{animation:none}
    .reveal{opacity:1; transform:none; transition:none}
  }

  /* ---------- PAGE HERO (sous-pages) ---------- */
  .pagehero{
    position:relative; background:var(--ink); overflow:hidden;
    padding:clamp(130px,17vh,200px) var(--gut) clamp(56px,7vw,100px);
  }
  .pagehero::before{
    content:""; position:absolute; top:0; left:0; right:0; height:560px; z-index:0;
    background:radial-gradient(70% 100% at 78% 0%, rgba(1,74,173,.24), rgba(8,10,15,0) 66%);
    pointer-events:none;
  }
  .pagehero__inner{position:relative; z-index:1; max-width:var(--wrap); margin:0 auto}
  .pagehero__kick{
    font-family:var(--body); font-size:1rem; 
    letter-spacing:0; color:var(--blue-lite); margin:0 0 18px;
  }
  .pagehero__title{
    font-family:var(--disp); font-weight:800; text-transform:none;
    font-size:clamp(3rem,9vw,6.6rem); line-height:.9; letter-spacing:-.045em; margin:0;
  }
  .pagehero__lead{
    font-family:var(--body); font-size:clamp(1.05rem,1.5vw,1.35rem); line-height:1.5;
    color:#a9adb6; max-width:46ch; margin:24px 0 0;
  }

  /* ---------- CTA BAND (sous-pages) ---------- */
  .ctaband{
    position:relative; z-index:6; background:var(--ink); overflow:hidden;
    border-radius:clamp(28px,4vw,52px) clamp(28px,4vw,52px) 0 0; margin-top:-48px;
    padding:clamp(70px,9vw,130px) var(--gut); text-align:center;
  }
  .ctaband::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(60% 120% at 50% 0%, rgba(1,74,173,.28), rgba(8,10,15,0) 60%);
  }
  .ctaband__inner{position:relative; z-index:1; max-width:760px; margin:0 auto}
  .ctaband h2{
    font-family:var(--disp); font-weight:800; text-transform:none;
    font-size:clamp(2.2rem,5vw,4rem); line-height:.96; letter-spacing:-.04em; margin:0 0 28px;
  }
  .ctaband .btn{font-size:1.05rem; padding:16px 30px}

  /* ---------- MANIFESTO (sous-pages) ---------- */
  .manifesto{position:relative; background:var(--ink); overflow:hidden; padding:clamp(64px,8vw,120px) var(--gut)}
  .manifesto::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(60% 90% at 85% 10%, rgba(1,74,173,.18), rgba(8,10,15,0) 60%)}
  .manifesto__inner{position:relative; z-index:1; max-width:var(--wrap); margin:0 auto}
  .manifesto__big{
    font-family:var(--disp); font-weight:800; letter-spacing:-.03em; line-height:1.08;
    font-size:clamp(1.9rem,4.2vw,3.4rem); max-width:22ch; margin:0;
  }
  .manifesto__big .hl{color:var(--blue-lite)}
  .manifesto__grid{
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px);
    max-width:900px; margin:clamp(34px,4vw,52px) 0 0;
  }
  .manifesto__grid p{color:#b3b7c0; font-size:1.08rem; line-height:1.6; margin:0}
  @media(max-width:680px){ .manifesto__grid{grid-template-columns:1fr; gap:20px} }

  /* ---------- STATS BAND (sous-pages) ---------- */
  .statsband{background:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:clamp(48px,6vw,80px) var(--gut)}
  .statsband__inner{max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
  .statcard .num{display:block; font-family:var(--disp); font-weight:800; letter-spacing:-.03em; line-height:1;
    font-size:clamp(2.3rem,4vw,3.6rem); color:var(--paper)}
  .statcard .lbl{display:block; margin-top:10px; color:#a9adb6; font-size:.98rem; line-height:1.35}
  @media(max-width:720px){ .statsband__inner{grid-template-columns:repeat(2,1fr); gap:32px 20px} }

  /* ---------- VALUES (sous-pages) ---------- */
  .values{position:relative; background:var(--ink); padding:clamp(60px,8vw,120px) var(--gut)}
  .values__inner{max-width:var(--wrap); margin:0 auto}
  .values__kick{font-family:var(--body); color:var(--blue-lite); font-size:1rem; margin:0 0 16px}
  .values__title{font-family:var(--disp); font-weight:800; text-transform:none; letter-spacing:-.04em; line-height:.94;
    font-size:clamp(2.2rem,5vw,4rem); margin:0 0 clamp(34px,4vw,56px)}
  .values__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
  .value{border:1px solid var(--line); border-radius:20px; padding:clamp(26px,3vw,40px);
    background:rgba(255,255,255,.02); transition:border-color .25s, transform .25s}
  .value:hover{border-color:var(--line-2); transform:translateY(-3px)}
  .value__n{font-family:var(--body); color:var(--blue-lite); font-size:.95rem; margin-bottom:16px}
  .value__t{font-family:var(--disp); font-weight:800; letter-spacing:-.02em; line-height:1.05;
    font-size:clamp(1.35rem,2.2vw,1.9rem); margin-bottom:12px}
  .value__d{color:#a9adb6; line-height:1.55}
  @media(max-width:680px){ .values__grid{grid-template-columns:1fr} }

  /* ---------- FONDATEURS (2 cartes) ---------- */
  .founders{position:relative; background:var(--ink); padding:clamp(64px,8vw,120px) var(--gut)}
  .founders__inner{max-width:var(--wrap); margin:0 auto}
  .founders__kick{font-family:var(--body); color:var(--blue-lite); font-size:1rem; margin:0 0 16px}
  .founders__title{font-family:var(--disp); font-weight:800; letter-spacing:-.04em; line-height:.94;
    font-size:clamp(2.2rem,5vw,4rem); margin:0 0 clamp(34px,4vw,56px)}
  .founders__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px); max-width:820px}
  .founder__photo{border-radius:22px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/5;
    box-shadow:0 30px 70px rgba(0,0,0,.4)}
  .founder__photo img{width:100%; height:100%; object-fit:cover; display:block}
  .founder__name{font-family:var(--disp); font-weight:800; letter-spacing:-.02em; margin:20px 0 2px;
    font-size:clamp(1.4rem,2.3vw,2rem)}
  .founder__role{color:#a9adb6; font-size:1rem}
  @media(max-width:520px){ .founders__grid{grid-template-columns:1fr; max-width:340px} }

  /* ---------- SERVICES (page dédiée) ---------- */
  .svc{max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(30px,5vw,72px); align-items:center; padding:clamp(52px,7vw,100px) var(--gut);
    border-top:1px solid var(--line)}
  .svc:first-child{border-top:none}
  .svc--flip .svc__stage{order:-1}
  .svc__stage{position:relative; border-radius:22px; overflow:hidden; min-height:360px;
    display:grid; place-items:center; padding:30px;
    background:linear-gradient(155deg, rgba(1,74,173,.16), rgba(8,10,15,.35)); border:1px solid var(--line)}
  .svc__n{font-family:var(--body); color:var(--blue-lite); font-size:1rem; margin:0 0 14px}
  .svc__t{font-family:var(--disp); font-weight:800; letter-spacing:-.03em; line-height:1;
    font-size:clamp(1.9rem,3.6vw,3rem); margin:0 0 18px}
  .svc__d{color:#b3b7c0; font-size:1.1rem; line-height:1.55; max-width:40ch; margin:0 0 28px}
  .svc__list{list-style:none; display:grid; gap:12px; padding:0; margin:0}
  .svc__list li{display:flex; gap:12px; align-items:baseline; color:#c7c7c1}
  .svc__list li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--blue-lite);
    flex:none; transform:translateY(-1px)}
  @media(max-width:760px){
    .svc{grid-template-columns:1fr; gap:26px}
    .svc--flip .svc__stage{order:0}
    .svc__stage{min-height:280px}
  }

  /* ---------- PACKS (workshops) ---------- */
  .packs{position:relative; background:var(--ink); padding:clamp(60px,8vw,120px) var(--gut)}
  .packs__inner{max-width:var(--wrap); margin:0 auto}
  .packs__kick{font-family:var(--body); color:var(--blue-lite); font-size:1rem; margin:0 0 16px}
  .packs__title{font-family:var(--disp); font-weight:800; letter-spacing:-.04em; line-height:.94;
    font-size:clamp(2.2rem,5vw,4rem); margin:0 0 clamp(34px,4vw,56px)}
  .packs__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:900px}
  .pack{border:1px solid var(--line); border-radius:22px; padding:clamp(28px,3vw,44px);
    background:rgba(255,255,255,.02); display:flex; flex-direction:column}
  .pack--featured{border-color:rgba(90,148,236,.55); background:rgba(1,74,173,.1)}
  .pack__tag{font-family:var(--body); color:var(--blue-lite); font-size:.95rem; margin:0 0 6px}
  .pack__dur{font-family:var(--disp); font-weight:800; letter-spacing:-.03em; line-height:1;
    font-size:clamp(2.6rem,5vw,4rem); margin:0 0 10px}
  .pack__d{color:#b3b7c0; font-size:1.05rem; line-height:1.5; margin:0 0 24px}
  .pack .svc__list{margin-bottom:28px}
  .pack .btn{align-self:flex-start; margin-top:auto}
  @media(max-width:640px){ .packs__grid{grid-template-columns:1fr; max-width:460px} }

  /* ---------- CARRIÈRES (offres) ---------- */
  .jobs{position:relative; background:var(--ink); padding:clamp(50px,7vw,110px) var(--gut)}
  .jobs__inner{max-width:var(--wrap); margin:0 auto}
  .jobs__kick{font-family:var(--body); color:var(--blue-lite); font-size:1rem; margin:0 0 16px}
  .jobs__title{font-family:var(--disp); font-weight:800; letter-spacing:-.04em; line-height:.94;
    font-size:clamp(2.2rem,5vw,4rem); margin:0 0 clamp(30px,4vw,48px)}
  .job{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
    padding:clamp(26px,3vw,38px) 0; border-top:1px solid var(--line);
    transition:padding-left .3s ease}
  .job:last-child{border-bottom:1px solid var(--line)}
  .job:hover{padding-left:12px}
  .job__meta{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
  .job__meta span{font-family:var(--body); font-size:.86rem; color:var(--blue-lite);
    border:1px solid var(--line-2); border-radius:999px; padding:5px 12px}
  .job__title{font-family:var(--disp); font-weight:800; letter-spacing:-.02em; line-height:1.05;
    font-size:clamp(1.5rem,2.6vw,2.2rem); margin:0 0 10px}
  .job__desc{color:#a9adb6; font-size:1.02rem; line-height:1.5; max-width:52ch; margin:0}
  .job__apply{display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
    font-family:var(--body); font-weight:600; font-size:1rem; color:var(--paper);
    border:1px solid var(--line-2); border-radius:999px; padding:12px 22px;
    transition:border-color .25s, background .25s}
  .job__apply:hover{border-color:var(--blue-lite); background:rgba(1,74,173,.12)}
  .jobs__note{margin-top:clamp(30px,4vw,48px); color:#a9adb6; font-size:1.05rem}
  .jobs__note a{color:var(--blue-lite); border-bottom:1px solid var(--line-2)}
  @media(max-width:640px){ .job{grid-template-columns:1fr} .job__apply{justify-self:start} }

  /* ---------- PAGE CAS D'ÉTUDE (détail) ---------- */
  .casehero{position:relative; background:var(--ink); overflow:hidden;
    padding:clamp(120px,16vh,190px) var(--gut) clamp(40px,6vw,80px)}
  .casehero::before{content:""; position:absolute; top:0; left:0; right:0; height:560px; z-index:0;
    background:radial-gradient(70% 100% at 20% 0%, rgba(1,74,173,.24), rgba(8,10,15,0) 66%); pointer-events:none}
  .casehero__inner{position:relative; z-index:1; max-width:var(--wrap); margin:0 auto;
    display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,64px); align-items:center}
  .casehero__kick{font-family:var(--body); color:var(--blue-lite); font-size:1rem; margin:0 0 18px}
  .casehero__client{font-family:var(--disp); font-weight:800; letter-spacing:-.045em; line-height:.9;
    font-size:clamp(2.8rem,7vw,5.6rem); margin:0 0 20px}
  .casehero__tag{color:#c7c7c1; font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.4; max-width:24ch; margin:0}
  .casehero__video{position:relative; width:100%; max-width:320px; aspect-ratio:9/16; margin:0 auto;
    border-radius:24px; overflow:hidden; background:#000; box-shadow:0 40px 90px rgba(0,0,0,.55)}
  .casehero__video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
  .casehero__play{
    position:absolute; inset:0; z-index:3; cursor:pointer; border:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    background:linear-gradient(0deg, rgba(8,10,15,.5), rgba(8,10,15,.12));
    color:#fff; font-family:var(--body); transition:background .25s;
  }
  .casehero__play:hover{background:linear-gradient(0deg, rgba(8,10,15,.34), rgba(8,10,15,0))}
  .casehero__playicon{
    width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:1.35rem; padding-left:5px; color:#fff;
    background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.45); transition:transform .25s, background .25s;
  }
  .casehero__play:hover .casehero__playicon{transform:scale(1.07); background:rgba(1,74,173,.85); border-color:transparent}
  .casehero__playtxt{font-size:.95rem; font-weight:600; text-shadow:0 2px 12px rgba(0,0,0,.55)}
  .casehero__video.is-playing .casehero__play{display:none}
  @media(max-width:760px){ .casehero__inner{grid-template-columns:1fr} .casehero__video{max-width:260px} }

  .analysis{background:var(--ink); padding:clamp(50px,7vw,100px) var(--gut)}
  .analysis__inner{max-width:1000px; margin:0 auto}
  .chapter{display:grid; grid-template-columns:200px 1fr; gap:clamp(18px,4vw,52px);
    padding:clamp(34px,5vw,58px) 0; border-top:1px solid var(--line)}
  .chapter:first-child{border-top:none; padding-top:0}
  .chapter__label{font-family:var(--body); color:var(--blue-lite); font-size:1.05rem}
  .chapter__body p{color:#c9c9c3; font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.6; margin:0 0 1em; max-width:60ch}
  .chapter__body p:last-child{margin-bottom:0}
  .chapter__body b{color:var(--paper); font-weight:600}
  @media(max-width:680px){ .chapter{grid-template-columns:1fr; gap:12px} }

  /* ---------- INDEX CAS D'ÉTUDES (compact, cliquable) ---------- */
  .caseidx{background:var(--ink); padding:clamp(8px,2vw,24px) var(--gut) clamp(56px,8vw,104px)}
  .caseidx__inner{max-width:var(--wrap); margin:0 auto; border-bottom:1px solid var(--line)}
  .crow{
    position:relative; display:grid;
    grid-template-columns:clamp(54px,7vw,104px) 1fr auto auto;
    align-items:center; gap:clamp(16px,3.6vw,48px);
    padding:clamp(22px,3.2vw,40px) clamp(6px,1.4vw,20px);
    border-top:1px solid var(--line);
    color:inherit; isolation:isolate;
    transition:padding-left .35s cubic-bezier(.2,.8,.2,1);
  }
  .crow::before{
    content:""; position:absolute; inset:0; z-index:-1; opacity:0;
    background:linear-gradient(90deg, rgba(1,74,173,.20), rgba(1,74,173,0) 70%);
    transition:opacity .35s;
  }
  .crow:hover::before{opacity:1}
  .crow:hover{padding-left:clamp(14px,2.4vw,34px)}
  .crow__num{
    font-family:var(--disp); font-weight:800;
    font-size:clamp(1.9rem,4vw,3.4rem); line-height:.8; letter-spacing:-.04em;
    color:transparent; -webkit-text-stroke:1.3px rgba(90,148,236,.6); text-stroke:1.3px rgba(90,148,236,.6);
    transition:-webkit-text-stroke-color .3s;
  }
  .crow:hover .crow__num{-webkit-text-stroke-color:rgba(90,148,236,1)}
  .crow__txt{min-width:0}
  .crow__client{
    font-family:var(--disp); font-weight:800; letter-spacing:-.035em; line-height:1;
    font-size:clamp(1.5rem,3.4vw,2.7rem); color:var(--paper); margin:0 0 8px;
  }
  .crow__headline{
    font-family:var(--body); font-weight:400; color:#a9a9a3;
    font-size:clamp(.98rem,1.3vw,1.15rem); line-height:1.4; max-width:52ch; margin:0;
  }
  .crow__media{
    width:clamp(64px,7vw,92px); aspect-ratio:9/16; border-radius:12px; overflow:hidden;
    background:#000; box-shadow:0 18px 44px rgba(0,0,0,.5); position:relative;
  }
  .crow__media img{width:100%; height:100%; object-fit:cover; display:block}
  .crow__go{
    display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:999px; flex:none;
    border:1px solid var(--line-2); color:var(--paper); font-size:1.2rem;
    transition:background .3s, border-color .3s, transform .3s, color .3s;
  }
  .crow:hover .crow__go{background:var(--blue); border-color:var(--blue); transform:translateX(4px)}
  .crow__see{ /* libellé lisible pour l'accessibilité + rappel visuel */
    display:block; font-family:var(--body); font-size:.86rem; color:var(--blue-lite);
    margin-top:12px;
  }
  @media(max-width:640px){
    .crow{grid-template-columns:auto 1fr auto; align-items:start; gap:15px; padding:22px 2px}
    .crow__media{display:none}
    .crow__num{padding-top:3px; font-size:1.7rem}
    .crow__client{font-size:clamp(1.4rem,7vw,1.9rem); margin-bottom:7px}
    .crow__go{align-self:center; width:40px; height:40px; font-size:1.05rem}
    .crow__see{display:none}
  }

  /* ---------- BLOG (index) ---------- */
  .blog{background:var(--ink); padding:clamp(8px,2vw,24px) var(--gut) clamp(56px,8vw,104px)}
  .blog__inner{max-width:var(--wrap); margin:0 auto}

  .blogfeat{
    position:relative; display:grid; grid-template-columns:1.15fr .85fr;
    align-items:stretch; overflow:hidden;
    border:1px solid var(--line); border-radius:26px; background:rgba(255,255,255,.02);
    transition:border-color .3s;
  }
  .blogfeat:hover{border-color:var(--line-2)}
  .blogfeat__txt{padding:clamp(30px,4vw,56px); display:flex; flex-direction:column; justify-content:center}
  .blogfeat__tag{font-family:var(--body); font-size:.92rem; color:var(--blue-lite); margin:0 0 18px}
  .blogfeat__title{
    font-family:var(--disp); font-weight:800; letter-spacing:-.03em; line-height:1.03;
    font-size:clamp(1.8rem,3.6vw,3rem); color:var(--paper); margin:0 0 18px;
  }
  .blogfeat__excerpt{font-size:clamp(1rem,1.3vw,1.15rem); color:#b7b7b1; line-height:1.55; max-width:46ch; margin:0 0 30px}
  .blogfeat__link{
    display:inline-flex; align-items:center; gap:11px; align-self:flex-start;
    font-family:var(--body); font-weight:600; font-size:1.05rem; color:var(--paper);
    border-bottom:1px solid var(--line-2); padding-bottom:8px; transition:color .25s, border-color .25s;
  }
  .blogfeat__link span{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .blogfeat:hover .blogfeat__link{color:var(--blue-lite); border-color:var(--blue-lite)}
  .blogfeat:hover .blogfeat__link span{transform:translateX(6px)}
  .blogfeat__vis{
    position:relative; overflow:hidden; min-height:230px;
    background:
      radial-gradient(120% 120% at 82% 18%, rgba(1,74,173,.6), rgba(8,10,15,0) 60%),
      linear-gradient(140deg, #0a1122, #080a0f);
    border-left:1px solid var(--line);
  }
  .blogfeat__num{
    position:absolute; right:clamp(18px,3vw,40px); bottom:clamp(8px,2vw,24px);
    font-family:var(--disp); font-weight:800; letter-spacing:-.05em; line-height:.7;
    font-size:clamp(6rem,16vw,13rem);
    color:transparent; -webkit-text-stroke:1.4px rgba(90,148,236,.55); text-stroke:1.4px rgba(90,148,236,.55);
  }
  .blogfeat__vismeta{
    position:absolute; left:clamp(20px,3vw,40px); top:clamp(20px,3vw,40px);
    font-family:var(--body); font-size:.9rem; color:#cdd6e6;
    display:flex; gap:14px; flex-wrap:wrap;
  }
  .blogfeat__vismeta span::before{content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--blue-lite); margin-right:9px; vertical-align:middle}

  .blogsoon{margin-top:clamp(34px,5vw,68px)}
  .blogsoon__head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px}
  .blogsoon__title{font-family:var(--disp); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.3rem,2.2vw,1.8rem); color:var(--paper); margin:0}
  .blogsoon__note{font-family:var(--body); font-size:.95rem; color:var(--mut)}
  .blogsoon__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px)}
  .scard{
    border:1px solid var(--line); border-radius:18px; padding:clamp(22px,2.4vw,30px);
    background:rgba(255,255,255,.015); min-height:186px;
    display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  }
  .scard__badge{
    align-self:flex-start; font-family:var(--body); font-size:.8rem; color:var(--mut);
    border:1px solid var(--line); border-radius:999px; padding:5px 13px;
  }
  .scard__title{font-family:var(--disp); font-weight:800; letter-spacing:-.02em; line-height:1.12; font-size:clamp(1.15rem,1.6vw,1.4rem); color:#d5d5cf; margin:0}
  @media(max-width:820px){
    .blogfeat{grid-template-columns:1fr}
    .blogfeat__vis{min-height:150px; order:-1; border-left:0; border-bottom:1px solid var(--line)}
    .blogfeat__num{font-size:clamp(5rem,22vw,8rem)}
    .blogsoon__grid{grid-template-columns:1fr}
  }

  /* ---------- ARTICLE (lecture) ---------- */
  .arthero{background:var(--ink); padding:clamp(120px,16vh,188px) var(--gut) clamp(26px,4vw,44px)}
  .arthero__inner{max-width:800px; margin:0 auto}
  .arthero__meta{display:flex; gap:16px; flex-wrap:wrap; font-family:var(--body); font-size:.92rem; color:var(--blue-lite); margin-bottom:24px}
  .arthero__meta span{color:var(--mut)}
  .arthero__title{font-family:var(--disp); font-weight:800; letter-spacing:-.03em; line-height:1.04; font-size:clamp(2.1rem,5vw,3.5rem); color:var(--paper); margin:0}
  .arthero__lead{margin:24px 0 0; font-size:clamp(1.15rem,1.6vw,1.4rem); line-height:1.5; color:#c6c6c0; max-width:60ch}

  .art{background:var(--ink); padding:clamp(20px,3vw,40px) var(--gut) clamp(48px,7vw,88px)}
  .art__inner{max-width:720px; margin:0 auto}
  .art__inner h2{font-family:var(--disp); font-weight:800; letter-spacing:-.02em; line-height:1.15; font-size:clamp(1.5rem,2.6vw,2rem); color:var(--paper); margin:clamp(40px,5vw,58px) 0 16px}
  .art__inner p{font-size:clamp(1.08rem,1.4vw,1.22rem); line-height:1.72; color:#c9c9c3; margin:0 0 20px}
  .art__inner p b{color:var(--paper); font-weight:600}
  .art__inner blockquote{
    margin:clamp(30px,4vw,46px) 0; padding-left:26px; border-left:3px solid var(--blue);
    font-family:var(--disp); font-weight:600; letter-spacing:-.01em; line-height:1.28;
    font-size:clamp(1.35rem,2.3vw,1.8rem); color:var(--paper);
  }
  .art__inner ul{margin:0 0 22px; padding-left:20px; list-style:none}
  .art__inner li{position:relative; font-size:clamp(1.05rem,1.35vw,1.18rem); line-height:1.6; color:#c9c9c3; margin-bottom:12px; padding-left:22px}
  .art__inner li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--blue-lite)}
  .art__back{display:inline-flex; align-items:center; gap:9px; margin-top:clamp(30px,4vw,44px); font-family:var(--body); font-size:1rem; color:var(--mut); transition:color .2s}
  .art__back:hover{color:var(--paper)}

  /* ---------- FOOTER ---------- */
  .foot{background:#05070b; border-top:1px solid var(--line); padding:clamp(48px,6vw,84px) var(--gut) clamp(26px,3vw,40px)}
  .foot__inner{max-width:var(--wrap); margin:0 auto}
  .foot__top{
    display:grid; grid-template-columns:1.5fr .8fr 1fr .8fr; gap:clamp(28px,4vw,56px);
    padding-bottom:clamp(34px,5vw,58px); border-bottom:1px solid var(--line);
  }
  .foot__brand{font-family:var(--disp); font-weight:800; font-size:2rem; letter-spacing:-.03em; line-height:1; color:var(--paper); display:inline-block; margin-bottom:16px}
  .foot__tagline{font-family:var(--body); color:#a7a7a1; font-size:1rem; line-height:1.5; max-width:34ch; margin:0 0 22px}
  .foot__cta{
    display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:600; font-size:1rem;
    color:var(--paper); border-bottom:1px solid var(--line-2); padding-bottom:7px;
    transition:color .25s, border-color .25s;
  }
  .foot__cta span{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .foot__cta:hover{color:var(--blue-lite); border-color:var(--blue-lite)}
  .foot__cta:hover span{transform:translateX(5px)}
  .foot__col{display:flex; flex-direction:column; gap:11px}
  .foot__h{font-family:var(--body); font-size:.95rem; font-weight:600; color:var(--paper); margin:0 0 6px}
  .foot__col a, .foot__col span{font-family:var(--body); font-size:1rem; color:var(--mut); transition:color .2s}
  .foot__col a:hover{color:var(--paper)}
  .foot__bottom{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:22px}
  .foot__copy{font-family:var(--body); font-size:.9rem; color:var(--mut)}
  .foot__legal{display:flex; gap:22px}
  .foot__legal a{font-family:var(--body); font-size:.9rem; color:var(--mut); transition:color .2s}
  .foot__legal a:hover{color:var(--paper)}
  @media(max-width:820px){
    .foot__top{grid-template-columns:1fr 1fr}
    .foot__brandcol{grid-column:1 / -1}
  }
  @media(max-width:520px){
    .foot__top{grid-template-columns:1fr}
    .foot__bottom{flex-direction:column; align-items:flex-start; gap:10px}
  }

  /* ---------- OPTIMISATIONS TÉLÉPHONE ---------- */
  @media(max-width:640px){
    /* on retire la VSL et l'accroche "notre travail en détail" sur téléphone */
    .vsl{display:none}
    .cases__claim{display:none}
    .cases__head{margin-bottom:8px}

    /* stats du hero : alignées à gauche, sans filet ni décalage */
    .proof{gap:6px 24px; margin-top:26px}
    .proof__item{padding:0}
    .proof__item:first-child{padding-left:0}
    .proof__item + .proof__item{border-left:0}

    /* footer : bas de page proprement empilé */
    .foot__legal{flex-wrap:wrap; gap:14px}
  }

  /* correctif : sur téléphone, la section "On en parle ?" ne doit plus chevaucher
     le bouton "Voir tous les cas" (placé en fin de fichier pour gagner en priorité) */
  @media(max-width:760px){
    .book{margin-top:0}
  }

  /* ---------- PAGE CONTACT ---------- */
  .contact{background:var(--ink); padding:clamp(10px,2vw,30px) var(--gut) clamp(56px,8vw,104px)}
  .contact__inner{
    max-width:var(--wrap); margin:0 auto;
    display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(30px,5vw,68px); align-items:start;
  }
  .contact__methods{display:flex; flex-direction:column}
  .cmethod{border-top:1px solid var(--line); padding:clamp(18px,2.4vw,26px) 0}
  .cmethod:first-child{border-top:none; padding-top:0}
  .cmethod__label{font-family:var(--body); font-size:.95rem; color:var(--blue-lite); margin:0 0 9px}
  .cmethod__value{
    font-family:var(--disp); font-weight:800; letter-spacing:-.025em; line-height:1.05;
    font-size:clamp(1.35rem,2.4vw,1.95rem); color:var(--paper); display:inline-block;
  }
  a.cmethod__value{transition:color .2s}
  a.cmethod__value:hover{color:var(--blue-lite)}
  .cmethod__sub{font-family:var(--body); font-size:1rem; color:var(--mut); margin:8px 0 0}
  .contact__socials{display:flex; gap:12px; flex-wrap:wrap}
  .contact__socials a{
    font-family:var(--body); font-weight:600; font-size:1rem; color:var(--paper);
    border:1px solid var(--line-2); border-radius:999px; padding:10px 20px;
    transition:background .2s, color .2s, border-color .2s;
  }
  .contact__socials a:hover{background:var(--paper); color:var(--ink); border-color:var(--paper)}
  .contact__book-head{margin:0 0 clamp(16px,2vw,22px)}
  .contact__book-head h2{
    font-family:var(--disp); font-weight:800; letter-spacing:-.03em; line-height:1;
    font-size:clamp(1.8rem,3.4vw,2.7rem); color:var(--paper); margin:0 0 10px;
  }
  .contact__book-head p{font-family:var(--body); font-size:clamp(1.02rem,1.3vw,1.2rem); color:#a9a9a3; margin:0}
  @media(max-width:820px){ .contact__inner{grid-template-columns:1fr; gap:clamp(30px,7vw,44px)} }