/* ============ SOSA DIGITAL 3D — charte dark + cyan ============ */
:root{
  --bg:#050510; --bg2:#0a1220; --cyan:#22d3ee; --cyan-soft:rgba(34,211,238,.14);
  --white:#f4f7fb; --grey:#94a3b8; --line:rgba(148,163,184,.15);
  --serif:Georgia,'Times New Roman',serif; --sans:'Segoe UI',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--white);font-family:var(--sans);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--cyan);color:var(--bg)}

/* ---------- header (fond opaque, PAS de backdrop-filter : piège connu) ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(5,5,16,.92);border-bottom:1px solid var(--line);transition:background .3s}
.header-in{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.4rem}
.logo{display:flex;flex-direction:column;line-height:1}
.logo .l1{font-family:var(--serif);font-size:1.5rem;letter-spacing:2px}
.logo .l2{font-size:.55rem;letter-spacing:7px;color:var(--cyan);margin-top:3px}
.nav-desktop{display:flex;gap:2rem;align-items:center;font-size:.95rem}
.nav-desktop a{color:var(--grey);transition:color .2s}
.nav-desktop a:hover,.nav-desktop a.active{color:var(--cyan)}
.btn{display:inline-block;background:var(--cyan);color:var(--bg);font-weight:700;padding:.7rem 1.5rem;border-radius:100px;box-shadow:0 0 24px rgba(34,211,238,.35);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(34,211,238,.55)}
.btn-ghost{background:transparent;color:var(--white);border:1px solid var(--line);box-shadow:none}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.burger{display:none;background:none;border:0;color:var(--white);font-size:1.7rem;cursor:pointer}

/* menu mobile = SIBLING du header (jamais enfant d'un élément filtré) */
.nav-mobile{position:fixed;inset:0;z-index:99;background:#050510;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;font-size:1.4rem;transform:translateX(100%);transition:transform .35s ease}
.nav-mobile.open{transform:translateX(0)}
.nav-mobile a{color:var(--white)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:7rem 1.4rem 4rem}
#hero3d{position:absolute;inset:0;z-index:0}
.hero-in{position:relative;z-index:1;max-width:900px}
.kicker{letter-spacing:5px;font-size:.8rem;color:var(--cyan);text-transform:uppercase;margin-bottom:1.2rem}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,6vw,4.6rem);line-height:1.12}
.hero h1 .accent{color:var(--cyan);text-shadow:0 0 40px rgba(34,211,238,.5)}
.hero p.sub{color:var(--grey);font-size:clamp(1rem,2vw,1.25rem);max-width:640px;margin:1.6rem auto 2.4rem}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.scroll-hint{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);color:var(--grey);font-size:.8rem;letter-spacing:2px;z-index:1;animation:hint 2s infinite}
@keyframes hint{0%,100%{opacity:.4;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,8px)}}

/* ---------- sections communes ---------- */
section{position:relative;padding:6rem 1.4rem}
.wrap{max-width:1200px;margin:auto}
.sec-kicker{letter-spacing:4px;font-size:.75rem;color:var(--cyan);text-transform:uppercase}
h2.sec-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4.5vw,3.2rem);margin:.8rem 0 1.2rem;line-height:1.15}
.sec-sub{color:var(--grey);max-width:640px}

/* ---------- section couches (décortiquée au scroll) ---------- */
.layers-sec{min-height:100vh}
.layers-stage{height:min(62vh,560px);display:flex;align-items:center;justify-content:center;perspective:1100px;margin-top:2rem}
.layers{position:relative;width:min(460px,86vw);height:296px;transform-style:preserve-3d;transform:rotateX(40deg) rotateZ(-10deg)}
/* Escalier : chaque couche est une barre fine, décalée dès le départ.
   Tous les titres restent lisibles en permanence, avec ou sans JS. */
.layer{position:absolute;left:0;right:0;height:64px;border-radius:12px;border:1px solid rgba(34,211,238,.35);background:linear-gradient(135deg,rgba(10,20,38,.94),rgba(5,5,16,.97));box-shadow:0 22px 44px rgba(0,0,0,.5),inset 0 0 26px rgba(34,211,238,.06);display:flex;align-items:center;gap:.9rem;padding:0 1.3rem;font-size:1rem}
.layer:nth-child(1){top:0}
.layer:nth-child(2){top:58px}
.layer:nth-child(3){top:116px}
.layer:nth-child(4){top:174px}
.layer:nth-child(5){top:232px}
.layer .n{color:var(--cyan);font-family:var(--serif);font-size:1.4rem;flex:none}
.layer small{display:block;color:var(--grey);font-size:.78rem;line-height:1.25}
@media(max-width:520px){
  .layer{height:60px;font-size:.88rem;padding:0 .9rem;gap:.6rem}
  .layer small{font-size:.68rem}
  .layer:nth-child(2){top:54px}.layer:nth-child(3){top:108px}
  .layer:nth-child(4){top:162px}.layer:nth-child(5){top:216px}
  .layers{height:276px}
}
.layer-caption{text-align:center;color:var(--grey);margin-top:1.6rem;min-height:2em;font-size:1.05rem}
.layer-caption strong{color:var(--cyan)}

/* ---------- cartes services (teaser + page) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;margin-top:2.6rem}
.card{border:1px solid var(--line);border-radius:16px;padding:1.8rem;background:linear-gradient(160deg,rgba(10,18,32,.6),rgba(5,5,16,.4));transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);border-color:rgba(34,211,238,.5);box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 30px rgba(34,211,238,.08)}
.card .ico{font-size:1.7rem;margin-bottom:.9rem}
.card h3{font-size:1.15rem;margin-bottom:.5rem}
.card p{color:var(--grey);font-size:.93rem}
.card .price{display:inline-block;margin-top:1rem;color:var(--cyan);font-weight:700;font-size:.95rem}
.card .tag{position:absolute;top:1rem;right:1rem;background:var(--cyan);color:var(--bg);font-size:.65rem;font-weight:800;letter-spacing:1px;padding:.25rem .6rem;border-radius:100px}
.cat-title{font-family:var(--serif);font-size:1.6rem;margin:3.4rem 0 .4rem;color:var(--white)}
.cat-sub{color:var(--grey);font-size:.95rem}

/* ---------- réalisations ---------- */
.realisations .cards .card{cursor:pointer}
.real-domain{color:var(--cyan);font-size:.85rem;letter-spacing:1px}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:2.4rem;counter-reset:step}
.step{border-left:2px solid rgba(34,211,238,.4);padding:0 0 0 1.2rem}
.step h3{font-size:1.05rem;margin-bottom:.4rem}
.step h3::before{counter-increment:step;content:"0" counter(step);display:block;font-family:var(--serif);font-size:2rem;color:var(--cyan);opacity:.8}
.step p{color:var(--grey);font-size:.9rem}

/* ---------- CTA final ---------- */
.cta-final{text-align:center;padding:7rem 1.4rem}
.cta-final h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,3.4rem);line-height:1.15}
.cta-final p{color:var(--grey);margin:1.2rem auto 2.2rem;max-width:560px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:2.6rem 1.4rem;color:var(--grey);font-size:.85rem}
.foot-in{max-width:1200px;margin:auto;display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;align-items:center}
footer a{color:var(--grey)}footer a:hover{color:var(--cyan)}

/* ---------- WhatsApp flottant (obligatoire SOSA) ---------- */
.wa-float{position:fixed;bottom:1.4rem;right:1.4rem;z-index:90;width:56px;height:56px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* ---------- reveal util ----------
   Contenu VISIBLE par défaut (si le JS plante, rien ne disparaît).
   La classe .anim n'est posée par JS QUE quand GSAP est prêt. */
.reveal{opacity:1}
html.anim .reveal{opacity:0;transform:translateY(46px)}
@media (prefers-reduced-motion:reduce){html.anim .reveal{opacity:1!important;transform:none!important}.scroll-hint{animation:none}}

/* ---------- nav inline (visible aussi sur mobile) + bouton Offres ---------- */
.offer-btn{background:var(--cyan);color:var(--bg);font-weight:800;border:0;cursor:pointer;padding:.7rem 1.4rem;border-radius:100px;box-shadow:0 0 24px rgba(34,211,238,.35);font-size:.95rem;transition:transform .2s}
.offer-btn:hover{transform:translateY(-2px)}
.offer-overlay{position:fixed;inset:0;z-index:200;background:rgba(5,5,16,.97);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.4rem;padding:1.4rem;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.offer-overlay.open{opacity:1;visibility:visible}
.offer-title{font-family:var(--serif);font-size:clamp(1.5rem,4.5vw,2.4rem);text-align:center;line-height:1.2}
.offer-cards{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;width:100%;max-width:760px}
.offer-card{flex:1 1 260px;border:1px solid rgba(34,211,238,.4);border-radius:18px;padding:1.8rem;text-align:center;background:linear-gradient(160deg,rgba(10,20,38,.9),rgba(5,5,16,.9));transform:translateY(24px);opacity:0;transition:transform .35s,opacity .35s,border-color .2s,box-shadow .2s}
.offer-overlay.open .offer-card{transform:translateY(0);opacity:1}
.offer-overlay.open .offer-card:nth-child(2){transition-delay:.08s}
.offer-card:hover{border-color:var(--cyan);box-shadow:0 0 40px rgba(34,211,238,.2)}
.offer-card .big{font-size:2.2rem}
.offer-card h3{font-size:1.25rem;margin:.6rem 0 .4rem}
.offer-card p{color:var(--grey);font-size:.9rem}
.offer-close{position:absolute;top:1.2rem;right:1.4rem;background:none;border:1px solid var(--line);color:var(--grey);width:44px;height:44px;border-radius:50%;font-size:1.2rem;cursor:pointer}
.offer-close:hover{color:var(--cyan);border-color:var(--cyan)}

/* ---------- pages service ---------- */
.page-hero{position:relative;min-height:72svh;display:flex;align-items:center;padding:8.5rem 1.4rem 3.5rem;overflow:hidden}
#page3d{position:absolute;inset:0;z-index:0;opacity:.85}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5.5vw,3.8rem);line-height:1.12;max-width:820px}
.page-hero .pitch{color:var(--grey);font-size:clamp(1rem,2vw,1.2rem);max-width:620px;margin:1.4rem 0 2rem}
.price-pill{display:inline-block;border:1px solid rgba(34,211,238,.5);color:var(--cyan);border-radius:100px;padding:.5rem 1.2rem;font-weight:700;margin-bottom:1.6rem}
.includes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:2rem}
.includes li{list-style:none;border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;color:var(--grey);font-size:.95rem;background:rgba(10,18,32,.4)}
.includes li strong{color:var(--white);display:block;margin-bottom:.2rem}
.faq details{border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;margin-top:.8rem;background:rgba(10,18,32,.4)}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--grey);margin-top:.6rem;font-size:.95rem}

/* ---------- méthode 3D scroll ---------- */
.metho-sec{min-height:100vh}
.metho-stage{position:relative}
.metho-step{max-width:520px;border:1px solid rgba(34,211,238,.35);border-radius:16px;padding:1.8rem;background:linear-gradient(160deg,rgba(10,20,38,.92),rgba(5,5,16,.94));margin:0 auto}
.metho-step .num{font-family:var(--serif);font-size:2.4rem;color:var(--cyan)}
.metho-step h3{font-size:1.3rem;margin:.4rem 0 .6rem}
.metho-step p{color:var(--grey)}

/* ---------- logos réalisations ---------- */
.logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:2.4rem}
.logo-cell{border:1px solid var(--line);border-radius:14px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:rgba(10,18,32,.4);transition:border-color .2s,box-shadow .2s}
.logo-cell:hover{border-color:rgba(34,211,238,.5);box-shadow:0 0 26px rgba(34,211,238,.1)}
.logo-cell img{max-height:56%;max-width:70%;object-fit:contain}
.logo-mono{font-family:var(--serif);font-size:1.7rem;color:var(--cyan)}
.logo-name{position:absolute;visibility:hidden}
.tech-strip{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.tech-strip span{border:1px solid var(--line);border-radius:100px;padding:.4rem 1rem;color:var(--grey);font-size:.85rem}

@media (max-width:860px){
  .nav-desktop{display:flex;gap:.8rem}
  .nav-desktop a{font-size:.72rem;letter-spacing:0}
  .nav-desktop a.btn,.nav-desktop .btn{display:none}
  .header-in{padding:.7rem .8rem;gap:.5rem}
  .logo .l1{font-size:1.15rem}.logo .l2{font-size:.45rem;letter-spacing:4px}
  .offer-btn{padding:.55rem .8rem;font-size:.8rem}
  .burger{display:none}
  section{padding:4.4rem 1.2rem}
}

/* ---------- DA « 3 leviers » (teaser services, 17/07/2026) ---------- */
#services-teaser{overflow:hidden}
#services-teaser::before{content:'';position:absolute;left:50%;top:60%;width:920px;height:520px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(34,211,238,.08),transparent 70%);pointer-events:none}
.offers{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3.2rem;align-items:stretch}
.offers::before{content:'';position:absolute;top:50%;left:1%;right:1%;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.28),transparent);pointer-events:none}
.offer{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;padding:2.2rem 1.6rem 1.7rem;background:linear-gradient(165deg,rgba(12,22,40,.82),rgba(5,5,16,.72));transition:transform .3s,border-color .3s,box-shadow .3s}
.offer:hover{transform:translateY(-8px);border-color:rgba(34,211,238,.55);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 44px rgba(34,211,238,.10)}
.offer-num{position:absolute;top:.5rem;right:1.1rem;font-family:var(--serif);font-size:5rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(148,163,184,.20);transition:-webkit-text-stroke .3s;pointer-events:none}
.offer:hover .offer-num{-webkit-text-stroke:1px rgba(34,211,238,.5)}
.offer-ico{width:58px;height:58px;margin-bottom:1.1rem}
.offer-ico .o-line,.offer-ico .o-ping,.offer-ico .o-flow{fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linecap:round}
.offer-ico .o-core{fill:var(--cyan);stroke:none}
.offer-ico .o-badge{fill:var(--cyan);stroke:none;animation:o-pulse 2s infinite}
.offer-ico .o-dot{fill:var(--cyan);stroke:none;animation:o-pulse 1.5s infinite}
.offer-ico .o-ping{opacity:.5;transform-origin:32px 32px;animation:o-ping 2.6s infinite}
.offer-ico .o-gear{transform-origin:32px 30px;animation:o-rot 10s linear infinite}
.offer-ico .o-flow{stroke-dasharray:6 7;animation:o-dash 1.5s linear infinite;opacity:.7}
@keyframes o-ping{0%{transform:scale(.35);opacity:.75}80%{transform:scale(1.3);opacity:0}100%{transform:scale(1.3);opacity:0}}
@keyframes o-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes o-rot{to{transform:rotate(360deg)}}
@keyframes o-dash{to{stroke-dashoffset:-13}}
.offer-chip{align-self:flex-start;font-size:.62rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(34,211,238,.35);border-radius:100px;padding:.28rem .75rem;margin-bottom:.95rem;background:rgba(34,211,238,.06)}
.offer h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin-bottom:.55rem}
.offer p{color:var(--grey);font-size:.93rem;flex:1}
.offer-cta{display:flex;align-items:center;gap:.5rem;margin-top:1.4rem;color:var(--cyan);font-weight:700;font-size:.97rem}
.offer-cta i{font-style:normal;transition:transform .25s}
.offer:hover .offer-cta i{transform:translateX(6px)}
.offer-feat{border-color:rgba(34,211,238,.45);background:linear-gradient(165deg,rgba(15,30,52,.92),rgba(6,10,24,.8));box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 34px rgba(34,211,238,.08)}
.offer-flag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--cyan);color:var(--bg);font-size:.6rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:.32rem .85rem;border-radius:100px;white-space:nowrap;box-shadow:0 0 20px rgba(34,211,238,.45)}
@media(min-width:961px){
  .offer-feat{transform:scale(1.045)}
  .offer-feat:hover{transform:scale(1.045) translateY(-8px)}
}
@media(max-width:960px){
  .offers{grid-template-columns:1fr;gap:1.7rem}
  .offers::before{display:none}
  .offer-feat{order:-1}
}
@media(prefers-reduced-motion:reduce){
  .offer-ico .o-badge,.offer-ico .o-dot,.offer-ico .o-ping,.offer-ico .o-gear,.offer-ico .o-flow{animation:none !important}
}

/* ============================================================
   HÉRO SIGNATURE — révélation cinématique du logo (02/08/2026)
   Le contenu est VISIBLE par défaut : les états initiaux ne
   s'appliquent que sous .hero-anim, classe posée par le JS
   uniquement si GSAP a bien chargé et si l'utilisateur n'a pas
   demandé de réduire les animations.
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* scène derrière le lockup : sans elle, les arêtes de l'icosaèdre 3D traversent
   les lettres et le mot devient illisible. z-index -1 reste DANS le contexte
   d'empilement de .hero-in, donc au-dessus du canvas 3D et sous le texte. */
.hero-in{position:relative}
.hero-in::before{content:'';position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  width:min(900px,94vw);height:min(540px,58vh);border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(5,5,16,.86),rgba(5,5,16,.5) 52%,transparent 78%)}

.hero-lockup{display:flex;flex-direction:column;align-items:center;font-weight:400;line-height:0}

/* le mot SOSA */
.lock-markwrap{position:relative;display:inline-block;line-height:0;filter:drop-shadow(0 0 34px rgba(34,211,238,.13))}
.lock-mark{width:clamp(208px,42vw,392px);height:auto}

/* le reflet cinématique : masqué par la forme des lettres,
   il ne balaie donc que le mot, jamais le fond */
.lock-shine{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.92) 50%,transparent 60%);
  background-size:260% 100%;background-position:135% 0;
  -webkit-mask:url(../img/logo-sosa.png) center/contain no-repeat;
          mask:url(../img/logo-sosa.png) center/contain no-repeat}

/* la ligne barres + DIGITAL */
.lock-rule{display:flex;align-items:center;justify-content:center;gap:clamp(.75rem,2.4vw,1.6rem);
  width:clamp(255px,54vw,505px);margin-top:clamp(.45rem,1.3vw,.85rem)}
.lock-bar{height:2px;flex:1;border-radius:2px;box-shadow:0 0 14px rgba(34,211,238,.7)}
.lock-bar.l{background:linear-gradient(90deg,transparent,rgba(34,211,238,.95));transform-origin:right center}
.lock-bar.r{background:linear-gradient(90deg,rgba(34,211,238,.95),transparent);transform-origin:left center}
.lock-sub{width:clamp(118px,24vw,208px);height:auto;flex:none}

/* signature et accroche */
.lock-sig{margin-top:clamp(1rem,2.2vw,1.45rem);font-size:clamp(.57rem,1.4vw,.7rem);
  letter-spacing:clamp(3px,1.1vw,6px);text-transform:uppercase;color:rgba(148,163,184,.9);line-height:1.6}
.hero-line{margin-top:clamp(2.1rem,5vw,3.3rem);font-family:var(--serif);
  font-size:clamp(1.35rem,3.3vw,2.3rem);line-height:1.3}
.hero-line .accent{color:var(--cyan);text-shadow:0 0 40px rgba(34,211,238,.5)}
.hero-act{margin-top:clamp(1.7rem,3.6vw,2.3rem)}

/* états initiaux, posés par JS seulement */
.hero-anim .lock-mark,
.hero-anim .lock-sub,
.hero-anim .lock-sig,
.hero-anim .hero-line,
.hero-anim .hero-act{opacity:0}
.hero-anim .lock-bar{transform:scaleX(0)}

/* ---------- logo du header : le vrai lockup de marque (02/08/2026) ----------
   Remplace l'approximation en Georgia, qui jurait avec le Didone du héro. */
.logo{display:flex;flex-direction:column;align-items:center;line-height:0;gap:4px;flex:none}
.logo .l-mark{width:94px;height:auto}
.logo .l-sub{width:53px;height:auto}

/* Le point de rupture 860 réduisait .l1/.l2, qui n'existent plus : sans ces
   règles le logo se fait écraser par la nav (flex-shrink sur une image). */
@media (max-width:860px){
  .logo .l-mark{width:74px}
  .logo .l-sub{width:42px}
}
@media (max-width:520px){
  .header-in{padding:.65rem .7rem;gap:.45rem}
  .logo .l-mark{width:66px}
  .logo .l-sub{width:37px}
  .nav-desktop{gap:.8rem}
  /* sur petit écran les 4 liens + le logo + le bouton ne tiennent pas dans 375 px.
     On retire « Accueil » (le logo y ramène) et « Méthode », par href et non par
     position : les sous-pages n'ont pas la même liste d'enfants. */
  .nav-desktop a[href="index.html"],.nav-desktop a[href="methode.html"]{display:none}
  .offer-btn{padding:.5rem .75rem;font-size:.75rem}
  /* le halo des barres est fixe : à petite taille il vient mordre sur DIGITAL */
  .lock-bar{box-shadow:0 0 8px rgba(34,211,238,.6)}
  /* l'escalier est incliné en rotateZ : sa boîte visuelle est plus large que sa
     largeur de mise en page, d'où un débordement horizontal de quelques pixels */
  .layers{width:min(460px,76vw)}
}

#hero3d{overflow:hidden}

/* ============================================================
   PILIERS (02/08/2026) — trois chapitres au meme mecanisme :
   a quoi ca sert, ce que ca rapporte, ce qu'on propose, un devis.
   Les fonds animes sont en CSS pur : ils tournent meme si GSAP
   ou WebGL ne chargent pas.
   ============================================================ */
.pilier{--acc:#22d3ee;--acc-soft:rgba(34,211,238,.10);position:relative;overflow:hidden;padding:5.5rem 1.4rem}
#la-visibilite{--acc:#34d399;--acc-soft:rgba(52,211,153,.10)}
#travailler-moins{--acc:#f6c453;--acc-soft:rgba(246,196,83,.09)}
/* halo tres discret : la section respire sa couleur sans changer de charte */
.pilier::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,var(--acc-soft),transparent 62%)}
.pilier+.pilier{border-top:1px solid var(--line)}
.pilier-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.pilier-inverse .pilier-visu{order:-1}
.pilier-num{font-family:var(--serif);font-size:.95rem;color:var(--acc);letter-spacing:3px}
.pilier h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.14;margin:.5rem 0 1.3rem}
.pilier-sert{color:var(--grey);font-size:1.02rem;max-width:34rem}
.pilier-rapporte{margin-top:1rem;font-size:1.06rem;line-height:1.55;border-left:2px solid var(--acc);padding-left:1rem;max-width:34rem}
.pilier-rapporte b{color:var(--acc);font-weight:600}

/* la mini-liste de ce qu'on propose dans la categorie */
.pilier-serv{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.8rem 0 1.7rem}
.pilier-serv a{display:inline-block;border:1px solid var(--line);border-radius:100px;padding:.45rem 1rem;
  font-size:.86rem;color:var(--grey);transition:border-color .25s,color .25s,transform .25s;background:rgba(10,18,32,.45)}
.pilier-serv a:hover{border-color:var(--acc);color:var(--white);transform:translateY(-2px)}

/* ---------- fond anime 1 : la fenetre de navigateur qui defile ---------- */
.fenetre{--ecran:clamp(230px,30vw,340px);
  border:1px solid rgba(148,163,184,.22);border-radius:14px;overflow:hidden;
  background:#0a1220;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 50px rgba(34,211,238,.07)}
.fenetre-barre{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(148,163,184,.16)}
.fenetre-barre i{width:9px;height:9px;border-radius:50%;background:rgba(148,163,184,.35);flex:none}
.fenetre-ecran{position:relative;overflow:hidden;background:#0a1220}
.fenetre-ecran img{width:100%;display:block}

/* composition : une capture principale dans la fenetre, une seconde en
   vignette qui deborde. Sur mobile la vignette repasse sous la fenetre,
   sinon elle recouvre la capture principale au lieu de la completer. */
.compo{position:relative;padding-bottom:clamp(2.4rem,6vw,4rem)}
.compo-flottant{position:absolute;left:-13%;bottom:-3%;width:56%;border-radius:12px;overflow:hidden;
  border:1px solid rgba(148,163,184,.22);box-shadow:0 26px 60px rgba(0,0,0,.62);
  transform:rotate(-2.2deg);transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.compo-flottant img{width:100%;display:block}
.compo:hover .compo-flottant{transform:rotate(-2.2deg) translateY(-7px)}
@media(max-width:900px){
  .compo{padding-bottom:0}
  .compo-flottant{position:static;width:100%;margin-top:1rem;transform:none;box-shadow:0 16px 36px rgba(0,0,0,.5)}
  .compo:hover .compo-flottant{transform:none}
}

.fenetre-legende{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:.9rem;
  font-size:.8rem;letter-spacing:1px;color:var(--grey)}
.fenetre-legende a{color:var(--cyan)}
.fenetre-legende a:hover{text-decoration:underline}

/* ---------- fond anime 2 : le balayage radar ---------- */
.radar{position:relative;aspect-ratio:1;width:min(100%,420px);margin:auto;border-radius:50%;
  background:radial-gradient(closest-side,rgba(34,211,238,.09),transparent 72%)}
.radar-cercle{position:absolute;inset:0;margin:auto;border:1px solid rgba(34,211,238,.22);border-radius:50%}
.radar-cercle:nth-child(1){width:34%;height:34%}
.radar-cercle:nth-child(2){width:62%;height:62%}
.radar-cercle:nth-child(3){width:90%;height:90%}
.radar-croix{position:absolute;inset:0;margin:auto;background:
  linear-gradient(90deg,transparent 49.7%,rgba(34,211,238,.18) 49.7% 50.3%,transparent 50.3%),
  linear-gradient(0deg,transparent 49.7%,rgba(34,211,238,.18) 49.7% 50.3%,transparent 50.3%)}
.radar-sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,color-mix(in srgb,var(--acc) 42%,transparent),transparent 62deg,transparent);
  animation:tourne 4.6s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.radar-pin{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 14px var(--acc);opacity:0;animation:pin 4.6s linear infinite;transform:translate(-50%,-50%)}
@keyframes pin{0%{opacity:0}6%{opacity:1}45%{opacity:.85}80%{opacity:0}100%{opacity:0}}

/* ---------- fond anime 3 : les taches qui se rangent ---------- */
.taches{width:min(100%,420px);margin:auto;display:flex;flex-direction:column;gap:.6rem}
.tache{height:44px;border-radius:10px;border:1px solid rgba(148,163,184,.22);
  background:linear-gradient(135deg,rgba(12,22,40,.9),rgba(5,5,16,.94));
  display:flex;align-items:center;gap:.7rem;padding:0 .9rem;font-size:.82rem;color:var(--grey);
  animation:range 7s ease-in-out infinite}
.tache::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--acc);flex:none;opacity:.8}
.tache:nth-child(1){animation-delay:0s}
.tache:nth-child(2){animation-delay:.35s}
.tache:nth-child(3){animation-delay:.7s}
.tache:nth-child(4){animation-delay:1.05s}
@keyframes range{
  0%   {transform:translateX(0) rotate(0deg);opacity:1;border-color:rgba(148,163,184,.22)}
  22%  {transform:translateX(9px) rotate(1.6deg);opacity:1}
  44%  {transform:translateX(-7px) rotate(-1.2deg);opacity:1}
  66%  {transform:translateX(0) rotate(0deg);border-color:var(--acc)}
  100% {transform:translateX(0) rotate(0deg);border-color:var(--acc)}
}

@media(max-width:900px){
  .pilier-in{grid-template-columns:1fr;gap:2.2rem}
  .pilier-inverse .pilier-visu{order:0}
  .pilier{padding:4rem 1.2rem}
}
@media(prefers-reduced-motion:reduce){
  .fenetre-piste,.radar-sweep,.radar-pin,.tache{animation:none!important}
  .fenetre-piste{transform:translateY(0)}
}

/* ---------- l'objection IA (02/08/2026) ---------- */
.objection{border-top:1px solid var(--line)}
.obj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.3rem;margin-top:2.6rem}
.obj-item{border:1px solid var(--line);border-radius:16px;padding:1.7rem;
  background:linear-gradient(160deg,rgba(10,18,32,.6),rgba(5,5,16,.4))}
.obj-item h3{font-family:var(--serif);font-weight:400;font-size:1.28rem;margin-bottom:.6rem}
.obj-item p{color:var(--grey);font-size:.93rem}
.obj-fin{margin-top:2.2rem;font-size:1.02rem;border-left:2px solid var(--cyan);padding-left:1rem;max-width:46rem}

/* ---------- formulaire de devis (02/08/2026) ---------- */
.wrap-form{max-width:720px}
.form-devis{display:flex;flex-direction:column;gap:1.15rem}
.champ{display:flex;flex-direction:column;gap:.4rem}
.champ-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.champ label{font-size:.88rem;color:var(--grey);letter-spacing:.5px}
.champ label span{color:var(--cyan)}
.champ input,.champ select,.champ textarea{
  width:100%;background:rgba(10,18,32,.7);border:1px solid var(--line);border-radius:10px;
  padding:.8rem .95rem;color:var(--white);font-family:inherit;font-size:.98rem;
  transition:border-color .2s,box-shadow .2s}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:rgba(34,211,238,.65);box-shadow:0 0 0 3px rgba(34,211,238,.13)}
.champ textarea{resize:vertical;min-height:120px}
.champ select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.champ select option{background:#0a1220;color:var(--white)}
.champ-accord{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--grey);line-height:1.5}
.champ-accord input{margin-top:.2rem;accent-color:var(--cyan);width:17px;height:17px;flex:none}
.champ-accord a{color:var(--cyan);text-decoration:underline}
/* le piege a robots doit rester invisible ET hors du parcours clavier */
.champ-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.4rem}
.form-actions .btn{border:0;cursor:pointer;font-size:1rem;font-family:inherit}
.form-note{font-size:.82rem;color:var(--grey)}
.form-msg{border-radius:14px;padding:1.2rem 1.4rem;margin-bottom:2rem;line-height:1.6}
.form-ok{border:1px solid rgba(34,211,238,.45);background:rgba(34,211,238,.08)}
.form-ko{border:1px solid rgba(248,113,113,.45);background:rgba(248,113,113,.08)}
.form-msg a{color:var(--cyan);text-decoration:underline}
@media(max-width:560px){.champ-duo{grid-template-columns:1fr}}

/* ---------- bandeau de consentement (02/08/2026) ---------- */
.ck-bandeau{position:fixed;left:0;right:0;bottom:0;z-index:200;background:rgba(5,5,16,.98);
  border-top:1px solid rgba(34,211,238,.35);box-shadow:0 -18px 50px rgba(0,0,0,.6)}
.ck-in{max-width:1200px;margin:auto;padding:1.15rem 1.4rem;display:flex;gap:1.4rem;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.ck-txt{flex:1 1 420px;min-width:0}
.ck-titre{font-family:var(--serif);font-size:1.08rem;margin-bottom:.25rem}
.ck-sous{color:var(--grey);font-size:.85rem;line-height:1.5}
.ck-sous a{color:var(--cyan);text-decoration:underline}
.ck-option{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;font-size:.83rem;color:var(--grey);line-height:1.45}
.ck-option input{accent-color:var(--cyan);width:17px;height:17px;margin-top:.15rem;flex:none}
.ck-btns{display:flex;gap:.6rem;flex-wrap:wrap;flex:none}
/* refuser doit peser autant qu'accepter : meme taille, meme lisibilite */
.ck-btn{font-family:inherit;font-size:.86rem;font-weight:600;cursor:pointer;white-space:nowrap;
  padding:.65rem 1.15rem;border-radius:100px;border:1px solid var(--line);
  background:transparent;color:var(--white);transition:border-color .2s,background .2s}
.ck-btn:hover{border-color:rgba(34,211,238,.6)}
.ck-ok{background:var(--cyan);color:var(--bg);border-color:var(--cyan)}
.ck-ok:hover{background:var(--cyan);filter:brightness(1.08)}
@media(max-width:620px){
  .ck-in{padding:1rem 1.1rem;gap:1rem}
  .ck-btns{width:100%}
  .ck-btn{flex:1 1 auto;text-align:center}
}

/* le bouton de chaque pilier porte la couleur de sa section */
.pilier .btn{background:var(--acc);box-shadow:0 0 24px color-mix(in srgb,var(--acc) 32%,transparent)}
.pilier .btn:hover{box-shadow:0 0 40px color-mix(in srgb,var(--acc) 52%,transparent)}
.pilier .radar{background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 9%,transparent),transparent 72%)}
.pilier .radar-cercle{border-color:color-mix(in srgb,var(--acc) 24%,transparent)}

/* appel a l'action apres la section des 5 couches */
.couches-act{text-align:center;margin-top:2.6rem}
.couches-act p{color:var(--grey);font-size:.87rem;margin-top:.85rem}

/* ---------- piliers sur petit ecran : capture MOBILE du site ----------
   Une capture desktop reduite a 330 px de large est illisible. On sert donc
   le rendu mobile du site, a taille quasi reelle, sans le bandeau de
   navigateur qui n'aurait plus de sens, et avec un fondu en bas pour que la
   coupe se lise comme « la page continue » et non comme une image tronquee. */
@media(max-width:640px){
  .fenetre-barre{display:none}
  .fenetre{border-radius:18px}
  .fenetre-ecran::after,
  .compo-flottant::after{content:'';position:absolute;left:0;right:0;bottom:0;height:74px;
    background:linear-gradient(transparent,rgba(5,5,16,.94));pointer-events:none}
  /* relative est necessaire pour porter le fondu, mais il faut alors neutraliser
     le decalage du desktop : static ignorait left/bottom, relative les applique */
  .compo-flottant{position:relative;left:auto;bottom:auto;overflow:hidden}
  .fenetre-ecran picture,.compo-flottant picture{display:block}
}

/* ---------- pilier 1 : les sites clients en clair, sans capture ----------
   Les captures d'écran ne tenaient pas la route sur mobile (illisibles une fois
   réduites). Un lien vers le vrai site est une preuve plus forte : le visiteur
   peut vérifier lui-même, et rien ne peut mal s'afficher. */
.live-titre{font-size:.72rem;letter-spacing:3px;text-transform:uppercase;color:var(--acc);margin-bottom:1rem}
.live{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.live a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.3rem 1rem;
  border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;
  background:linear-gradient(160deg,rgba(10,18,32,.62),rgba(5,5,16,.42));
  transition:border-color .25s,transform .25s,box-shadow .25s}
.live a:hover{border-color:var(--acc);transform:translateX(4px);
  box-shadow:0 14px 34px rgba(0,0,0,.42)}
.live-nom{font-family:var(--serif);font-size:1.18rem;grid-column:1}
.live-quoi{grid-column:1;color:var(--grey);font-size:.84rem}
.live-url{grid-column:2;grid-row:1/3;color:var(--acc);font-size:.86rem;white-space:nowrap;display:flex;align-items:center;gap:.35rem}
.live-url i{font-style:normal;transition:transform .25s}
.live a:hover .live-url i{transform:translate(2px,-2px)}
.live-note{color:var(--grey);font-size:.82rem;margin-top:1rem}
@media(max-width:420px){
  .live a{grid-template-columns:1fr}
  .live-url{grid-column:1;grid-row:auto;margin-top:.35rem}
}