/* Layout : une seule colonne alignée à gauche, filets fins, le logo laqué en 3D est le seul moment fort.
   Règle 60/30/10 : 60 % beige (fond), 30 % marron (texte, logo, filets), 10 % grenat (lumière, actions). */
:root{
  --sand:#070b1a;       /* noir profond (fond) */
  --cream:#111b3a;      /* surfaces */
  --line:#5068ae;       /* filets */
  --taupe:#c5cce4;      /* texte secondaire */
  --cocoa:#f6f8ff;      /* texte principal */
  --garnet:#ffffff;     /* lumière blanche */
  --garnet-soft:rgba(160,185,255,.28);
  --blue:#6c8cff;--blue-soft:#9db4ff;--card:#111b3a;--card2:#18265a;
  --display:"Michroma","Eurostile","Arial Black",system-ui,sans-serif;
  --body:"Manrope","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--sand);scroll-behavior:smooth}
body{background:var(--sand);color:var(--cocoa);font-family:var(--body);font-weight:400;font-size:17px;line-height:1.7;overflow-x:hidden}
body::after{content:"";position:fixed;inset:-5%;z-index:1;pointer-events:none;background:rgba(61,107,255,.025);background:radial-gradient(ellipse 48% 38% at 50% 8%,rgba(61,107,255,.16),rgba(42,83,190,.055) 42%,transparent 100%);transform:translate3d(-1.2%,-.6%,0) scale(1.02);will-change:transform;animation:site-light-drift 18s ease-in-out infinite alternate}
@keyframes site-light-drift{to{transform:translate3d(1.2%,.8%,0) scale(1.05)}}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--sand)}
a{color:inherit}
:focus-visible{outline:1px solid var(--garnet);outline-offset:4px}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:55;display:block;pointer-events:none}
.logo .mark{transition:opacity .35s ease}
.webgl .logo .mark{opacity:0}
.webgl .logo.docked .mark{opacity:1}

.wrap{position:relative;z-index:2;max-width:1080px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* En-tête */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(7,11,26,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo .mark{height:22px;width:auto;color:#9fc9ff;display:block;filter:drop-shadow(0 0 4px rgba(83,151,255,.8)) drop-shadow(0 0 12px rgba(61,107,255,.55))}
.logo-sub{font-size:11px;font-weight:400;letter-spacing:.42em;color:#a8caff;text-shadow:0 0 10px rgba(61,107,255,.55)}
.logo-sub .ia{color:#8fb3ff;text-shadow:0 0 7px rgba(100,150,255,.95),0 0 16px rgba(61,107,255,.8)}
nav.links{display:flex;gap:32px}
nav.links a{text-decoration:none;color:var(--taupe);font-size:14px;transition:color .3s}
nav.links a:hover{color:var(--cocoa)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:12px 24px;font:400 14px var(--body);text-decoration:none;cursor:pointer;border:1px solid var(--line);color:var(--cocoa);background:transparent;transition:border-color .3s,box-shadow .3s,background .3s,color .3s}
.btn:hover{border-color:var(--garnet);box-shadow:0 0 24px -6px var(--garnet)}
.btn-led{background:var(--garnet);border-color:var(--garnet);color:var(--sand);font-weight:600}
.btn-led{color:#000;box-shadow:0 0 22px -4px rgba(255,255,255,.55)}
.btn-led:hover{background:#fff;border-color:#fff;box-shadow:0 0 40px -2px rgba(255,255,255,.8)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:999px;width:42px;height:42px;cursor:pointer}
.menu-btn span{display:block;width:16px;height:1px;background:var(--cocoa);margin:5px auto}
.mobile-nav{display:flex;flex-direction:column;padding-block:8px 20px}
.mobile-nav a{text-decoration:none;padding:14px 2px;font-size:17px;border-bottom:1px solid var(--line)}
.mobile-nav .btn{margin-top:16px;border-bottom:1px solid var(--garnet)}

/* Hero */
.hero{padding-block:clamp(16px,4vw,40px) clamp(72px,10vw,130px)}
.logo-stage{position:relative;isolation:isolate;display:grid;place-items:center;height:clamp(270px,38vw,420px);margin-bottom:clamp(24px,4vw,48px);overflow:hidden;border:1px solid rgba(112,153,255,.2);border-radius:18px;background:radial-gradient(ellipse at 50% 54%,rgba(30,68,148,.22),rgba(7,11,26,.08) 48%,rgba(7,11,26,.56) 100%);cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.logo-stage:focus-visible{outline:2px solid #78aaff;outline-offset:4px}
.logo-stage::before{content:"";position:absolute;z-index:-2;width:min(72vw,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(63,121,255,.26),rgba(23,67,161,.11) 36%,transparent 68%);filter:blur(12px);animation:core-breathe 6s ease-in-out infinite}
.logo-stage::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(112,170,255,.045) 49%,transparent 72%);pointer-events:none}
.portal-grid{position:absolute;z-index:-1;inset:8%;background:linear-gradient(rgba(115,160,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(115,160,255,.075) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(ellipse,black 10%,transparent 72%);opacity:.55}
.portal-orbit{position:absolute;z-index:0;width:min(63%,560px);height:62%;border:1px solid rgba(113,164,255,.26);border-radius:50%;box-shadow:0 0 24px rgba(58,111,255,.08),inset 0 0 24px rgba(58,111,255,.06);pointer-events:none;will-change:transform}
.orbit-a{transform:perspective(700px) rotateX(66deg) rotateZ(-16deg);animation:orbit-a 24s linear infinite}
.orbit-b{width:min(54%,480px);height:78%;border-color:rgba(106,157,255,.22);transform:perspective(700px) rotateY(62deg) rotateZ(24deg);animation:orbit-b 32s linear infinite}
.orbit-c{width:min(70%,620px);height:47%;border-style:dashed;border-color:rgba(120,170,255,.18);transform:perspective(700px) rotateX(72deg) rotateZ(8deg);animation:orbit-c 42s linear infinite}
.portal-scan{position:absolute;z-index:1;left:18%;right:18%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(107,174,255,.85),rgba(177,216,255,.95),rgba(107,174,255,.85),transparent);box-shadow:0 0 14px rgba(74,143,255,.8);opacity:.62;pointer-events:none;animation:scan 5s ease-in-out infinite}
.portal-pulse{position:absolute;z-index:1;width:21%;aspect-ratio:1;border:1px solid rgba(146,200,255,.9);border-radius:50%;box-shadow:0 0 22px rgba(73,140,255,.55),inset 0 0 20px rgba(95,151,255,.26);opacity:0;pointer-events:none}
.logo-stage.burst .portal-pulse{animation:light-burst .9s cubic-bezier(.12,.7,.25,1) both}
.logo-core-light{position:absolute;z-index:3;width:25%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(145,205,255,.9) 9%,rgba(77,145,255,.45) 28%,rgba(61,107,255,.12) 52%,transparent 72%);opacity:0;pointer-events:none}
.logo-stage.burst .logo-core-light{animation:core-ignite .62s ease-out both}
.portal-orb{position:absolute;z-index:3;width:clamp(110px,18vw,166px);aspect-ratio:1;border:1px solid rgba(237,247,255,.85);border-radius:50%;overflow:hidden;background:radial-gradient(circle at 32% 27%,#fff 0%,rgba(218,238,255,.98) 4%,rgba(112,174,255,.94) 13%,rgba(38,86,184,.94) 38%,rgba(8,19,52,.98) 73%);box-shadow:0 0 12px rgba(255,255,255,.8),0 0 34px rgba(118,175,255,.78),inset -9px -8px 20px rgba(2,8,30,.75);opacity:1;transform:scale(1);pointer-events:none;animation:orb-float 3.8s ease-in-out infinite}
.portal-orb::before,.portal-orb::after{content:"";position:absolute;pointer-events:none}
.portal-orb::before{inset:8% 25%;border:1px solid rgba(230,244,255,.82);border-radius:50%;box-shadow:0 0 8px rgba(255,255,255,.45)}
.portal-orb::after{inset:35% -10%;border-block:1px solid rgba(231,244,255,.75);border-radius:50%;transform:rotateX(64deg)}
.orb-ia{position:absolute;z-index:2;inset:0;display:grid;place-items:center;color:#f5fbff;font:700 clamp(18px,3vw,27px) var(--display);letter-spacing:.12em;text-shadow:0 0 5px #fff,0 0 14px #a7d7ff,0 0 28px #438cff;animation:orb-ia-pulse 2.6s ease-in-out infinite;pointer-events:none}
.orb-led-sweep{position:absolute;z-index:3;top:38%;left:-70%;width:240%;height:24%;transform:rotate(-25deg);opacity:0;background:linear-gradient(90deg,transparent 30%,rgba(210,238,255,.38) 42%,#fff 50%,rgba(135,199,255,.86) 55%,transparent 70%);filter:blur(1px) drop-shadow(0 0 7px #fff) drop-shadow(0 0 17px #64a9ff);animation:orb-led-pass 3.2s ease-in-out .35s infinite;pointer-events:none}
.logo-stage.burst .portal-orb{animation:orb-exit .72s ease-in .72s both}
.logo-stage.burst .orb-led-sweep{animation:orb-led-click .72s ease-out .02s both}
.logo-stage.burst .portal-orb::before{animation:orb-meridian-spin .55s linear .1s 2 both}
.logo-stage.burst .portal-orb::after{animation:orb-equator-spin .6s linear .1s 2 both}
.portal-fragments{position:absolute;z-index:4;inset:0;pointer-events:none}
.portal-fragment{position:absolute;top:50%;left:50%;display:grid;place-items:center;min-width:34px;height:24px;padding:0 8px;border:1px solid rgba(142,190,255,.72);border-radius:6px;background:rgba(19,43,98,.86);color:#c6ddff;font:600 10px var(--body);letter-spacing:.08em;opacity:0;box-shadow:0 0 12px rgba(61,107,255,.22);transform:translate(-50%,-50%) scale(.32)}
.portal-fragment.digit{min-width:32px;height:27px;border-color:rgba(205,229,255,.72);background:rgba(13,29,70,.58);color:#e5f2ff;font-size:15px;box-shadow:0 0 14px rgba(120,180,255,.42);backdrop-filter:blur(5px)}
.logo-stage.burst .portal-fragment.digit{animation:digit-stream 1.05s cubic-bezier(.18,.68,.25,1) calc(var(--delay,0ms) + 720ms) both}
.logo-stage.orb-first:not(.revealed) .logo-flat{opacity:0;visibility:hidden}
.logo-stage.revealed .portal-orb{animation:orb-disappear .45s ease-out both}
.logo-stage.revealed .logo-flat{opacity:1;visibility:visible;animation:logo-arrive .75s cubic-bezier(.18,.8,.25,1) both}
.logo-stage.revealed .logo-flat .mark{animation:logo-glow-arrive .9s ease-out both}
.portal-readout{position:absolute;z-index:2;top:clamp(18px,5%,30px);left:clamp(18px,5%,42px);right:clamp(18px,5%,42px);display:flex;justify-content:space-between;gap:14px;color:rgba(162,196,255,.68);font:600 10px var(--body);letter-spacing:.22em}
.portal-readout span{display:flex;align-items:center;gap:9px}.portal-readout i{width:16px;height:1px;background:#74aaff;box-shadow:0 0 8px #4b8dff}
.logo-flat{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.logo-stage.flat .logo-flat{display:flex}
.logo-flat .mark{position:relative;z-index:2;height:62%;max-width:86%;width:auto;color:#9fc9ff;opacity:.7;filter:drop-shadow(0 0 5px rgba(95,157,255,.9)) drop-shadow(0 0 24px rgba(61,107,255,.68));}
.logo-flat .mark path{fill:rgba(33,76,158,.2);fill-opacity:.42;stroke:rgba(151,202,255,.92);stroke-width:1.2;vector-effect:non-scaling-stroke}
.logo-stage.burst .logo-flat .mark path{animation:logo-inner-light 2.15s ease-in-out .08s both}
.logo-led-sweep{position:absolute;z-index:4;top:44%;left:8%;width:38%;height:2px;opacity:0;background:linear-gradient(90deg,transparent,#fff 45%,#a9d8ff 58%,transparent);filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #62a8ff);pointer-events:none}
.logo-stage.burst .logo-led-sweep{animation:led-sweep .95s ease-in .1s both}
.logo-side-label{position:absolute;z-index:6;left:calc(50% + clamp(150px,21vw,330px));top:calc(50% + clamp(70px,17vw,160px));display:flex;align-items:center;gap:.42em;transform:translateY(-50%);color:rgba(190,218,255,.82);font:500 clamp(8px,.95vw,13px) var(--display);letter-spacing:.14em;text-shadow:0 0 8px rgba(110,177,255,.45);opacity:0;visibility:hidden;white-space:nowrap;pointer-events:none}

.logo-stage.revealed .logo-side-label{visibility:visible;animation:side-label-on 1.1s ease-out .25s both,side-label-breathe 3.2s ease-in-out 1.5s infinite}

@keyframes orbit-a{to{transform:perspective(700px) rotateX(66deg) rotateZ(344deg)}}
@keyframes orbit-b{to{transform:perspective(700px) rotateY(62deg) rotateZ(-336deg)}}
@keyframes orbit-c{to{transform:perspective(700px) rotateX(72deg) rotateZ(368deg)}}
@keyframes scan{0%,100%{transform:translateY(-98px);opacity:.16}50%{transform:translateY(98px);opacity:.78}}
@keyframes core-breathe{0%,100%{opacity:.62;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes light-burst{0%{opacity:.95;transform:scale(.16)}65%{opacity:.75}100%{opacity:0;transform:scale(5.4)}}
@keyframes core-ignite{0%{opacity:0;transform:scale(.12)}24%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(2.25)}}
@keyframes orb-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.035)}}
@keyframes orb-ia-pulse{0%,100%{opacity:.86;text-shadow:0 0 5px #fff,0 0 14px #a7d7ff,0 0 28px #438cff}50%{opacity:1;text-shadow:0 0 9px #fff,0 0 21px #d5eeff,0 0 38px #438cff}}
@keyframes orb-led-pass{0%,16%{opacity:0;transform:translateX(-55%) rotate(-25deg)}35%{opacity:.95}70%{opacity:.7}100%{opacity:0;transform:translateX(55%) rotate(-25deg)}}
@keyframes orb-led-click{0%{opacity:0;transform:translateX(-55%) rotate(-25deg)}25%{opacity:1}70%{opacity:.85}100%{opacity:0;transform:translateX(55%) rotate(-25deg)}}
@keyframes side-label-on{to{opacity:.9;filter:brightness(1.2)}}
@keyframes side-label-breathe{0%,100%{text-shadow:0 0 7px rgba(110,177,255,.38)}50%{text-shadow:0 0 11px rgba(218,239,255,.8),0 0 20px rgba(89,158,255,.66)}}
@keyframes orb-exit{0%{opacity:1;transform:scale(1)}55%{opacity:1;transform:scale(1.12)}100%{opacity:0;transform:scale(.08)}}
@keyframes orb-disappear{to{opacity:0;transform:scale(.08)}}
@keyframes digit-stream{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}14%{opacity:1}72%{opacity:.95}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--turn)) scale(1.15)}}
@keyframes logo-arrive{0%{opacity:0;transform:scale(.72);filter:blur(8px)}65%{opacity:1;transform:scale(1.04);filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes logo-glow-arrive{0%{filter:drop-shadow(0 0 0 transparent)}55%{filter:drop-shadow(0 0 18px #fff) drop-shadow(0 0 44px rgba(91,153,255,.95))}100%{filter:drop-shadow(0 0 5px rgba(95,157,255,.9)) drop-shadow(0 0 24px rgba(61,107,255,.68))}}
@keyframes led-sweep{0%{opacity:0;transform:translateX(-120%)}20%{opacity:1}80%{opacity:.8}100%{opacity:0;transform:translateX(230%)}}
@keyframes orb-meridian-spin{from{transform:rotateY(60deg) rotateZ(0)}to{transform:rotateY(60deg) rotateZ(360deg)}}
@keyframes orb-equator-spin{from{transform:rotateX(64deg) rotateZ(0)}to{transform:rotateX(64deg) rotateZ(360deg)}}
@keyframes logo-inner-light{0%,12%{fill:rgba(33,76,158,.2);fill-opacity:.42;stroke:rgba(151,202,255,.92)}28%,38%{fill:rgba(255,255,255,.99);fill-opacity:1;stroke:#fff}52%{fill:rgba(225,240,255,.9);fill-opacity:.94;stroke:#fff}68%,75%{fill:rgba(33,76,158,.2);fill-opacity:0;stroke:rgba(151,202,255,0)}88%,100%{fill:rgba(33,76,158,.2);fill-opacity:.42;stroke:rgba(151,202,255,.92)}}
h1{font-family:var(--display);font-weight:400;font-size:clamp(25px,4.4vw,52px);line-height:1.22;letter-spacing:.01em;margin:0 0 24px;max-width:20ch;text-wrap:balance}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--taupe);max-width:50ch;margin:0 0 36px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* Interface assistant */

.pulse{width:6px;height:6px;border-radius:50%;background:var(--garnet);box-shadow:0 0 10px var(--garnet);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* Sections */
section.block{padding-block:clamp(72px,10vw,130px);border-top:1px solid var(--line);background:rgba(7,11,26,.74)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.8vw,32px);line-height:1.3;letter-spacing:.01em;margin:0 0 16px;max-width:24ch;text-wrap:balance}
.intro{color:var(--taupe);max-width:54ch;margin:0 0 56px}

/* Services en liste */
.list{border-top:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px 48px;padding-block:28px;border-bottom:1px solid var(--line)}
.row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--garnet);box-shadow:0 0 12px var(--garnet);transition:width .8s cubic-bezier(.2,.7,.2,1)}
.row:hover::after{width:100%}
.row h3{font-family:var(--display);font-weight:400;font-size:15px;line-height:1.5;margin:0;letter-spacing:.02em}
.row p{margin:0;color:var(--taupe)}

/* Services : défilement horizontal piloté par le défilement vertical */

/* Vitrine : sphères 3D et fenêtres qui défilent sur le côté */
.showcase{position:relative}
.sc-sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:transparent;color:var(--cocoa)}
#orbs{position:absolute;inset:0;width:100%;height:100%;display:block}
.sc-steps{position:absolute;z-index:2;left:max(16px,env(safe-area-inset-left,0px),calc((100vw - 1080px)/2 + 16px));top:50%;transform:translateY(-50%);width:min(40ch,42vw);pointer-events:none}
.sc-step{position:absolute;top:0;left:0;transform:translateY(-50%);opacity:0;filter:blur(8px);transition:opacity 1s ease,filter 1s ease}
.sc-step.on{opacity:1;filter:none}
.sc-step h2{color:var(--cocoa);margin-bottom:12px;max-width:18ch}
.sc-step p{margin:0;color:#c5cce4;max-width:34ch}
.sc-track{position:absolute;z-index:3;top:50%;left:0;display:flex;align-items:center;gap:clamp(24px,4vw,64px);will-change:transform;transform:translate3d(110vw,-50%,0)}
.win{flex:none;width:min(72vw,380px);background:var(--cream);color:var(--cocoa);border-radius:10px;box-shadow:0 40px 80px -30px rgba(10,4,2,.6);overflow:hidden;font-size:13px}
.win:nth-child(odd){margin-top:-12vh}.win:nth-child(3n){margin-top:14vh}
.win.small{width:min(46vw,190px);padding:18px}

.sc-bar{position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.1)}
.sc-bar span{display:block;height:100%;width:0;background:var(--garnet)}
@media (max-width:640px){
  .sc-steps{top:16%;transform:none;width:auto;right:16px}
  .sc-step{transform:none}
  .sc-track{top:62%}
  .win:nth-child(odd){margin-top:-4vh}.win:nth-child(3n){margin-top:6vh}
}
@media (prefers-reduced-motion:reduce){
  .sc-sticky{position:static;height:auto;padding-block:80px 40px}
  .sc-steps{position:static;transform:none;width:auto;padding-inline:16px}
  .sc-step{position:static;transform:none;opacity:1;filter:none;margin-bottom:24px}
  .sc-track{position:static;transform:none;overflow-x:auto;padding:24px 16px}
  #orbs{display:none}
}

/* Méthode : une vraie séquence */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.step{position:relative;padding-top:28px;border-top:1px solid var(--line)}
.step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--sand);border:1px solid var(--garnet);box-shadow:0 0 10px var(--garnet-soft)}
.step .n{font-family:var(--display);font-size:13px;color:var(--garnet)}
.step h3{font-family:var(--display);font-weight:400;font-size:16px;margin:10px 0 4px}
.step .dur{font-size:13px;color:var(--taupe);margin-bottom:12px}
.step p{margin:0;color:var(--taupe);font-size:15px}

/* Projets */
.case{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;gap:12px 40px;align-items:baseline;padding-block:30px;border-bottom:1px solid var(--line)}
.case:first-child{border-top:1px solid var(--line)}

.case h3{font-family:var(--body);font-weight:400;font-size:18px;margin:0;line-height:1.45}
.case strong{font-family:var(--display);font-weight:400;font-size:24px;color:var(--cocoa);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.case strong small{display:block;font-family:var(--body);font-size:12px;color:var(--taupe);font-weight:400}

/* Tarifs */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);background:rgba(17,27,58,.9)}
.plan{padding:32px 28px;display:flex;flex-direction:column;gap:20px;border-right:1px solid var(--line);position:relative}
.plan:last-child{border-right:0}
.plan.featured::before{content:"";position:absolute;inset:-1px 0 auto;height:1px;background:var(--garnet);box-shadow:0 0 16px var(--garnet)}
.plan .pname{font-family:var(--display);font-size:14px;display:flex;justify-content:space-between;gap:8px}
.plan .pname span{font-family:var(--body);font-size:12px;color:var(--garnet)}
.price{font-family:var(--display);font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.price small{font-family:var(--body);font-size:13px;color:var(--taupe)}
.plan ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--taupe)}
.plan li{padding-left:18px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--garnet)}
.plan .btn{margin-top:auto}

/* FAQ */
.faq{max-width:780px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:22px 0;font-weight:400;font-size:17px;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:10px;height:10px;margin-top:8px;border-right:1px solid var(--garnet);border-bottom:1px solid var(--garnet);transform:rotate(45deg);transition:transform .4s}
details[open] summary::after{transform:rotate(225deg)}
details p{color:var(--taupe);margin:0 0 22px;max-width:62ch}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:56px}
.contact-info{display:flex;flex-direction:column;gap:22px}
.info{display:flex;flex-direction:column;gap:2px}
.info span{font-size:13px;color:var(--taupe)}
.info b{font-weight:400;user-select:all;word-break:break-word}
form{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field.full{grid-column:1/-1}
label{font-size:13px;color:var(--taupe)}
input,select,textarea{font:300 16px var(--body);color:var(--cocoa);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0;width:100%;transition:border-color .3s}
select option{background:var(--cream)}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--garnet)}
textarea{min-height:100px;resize:vertical}
.consent{flex-direction:row;align-items:flex-start;gap:10px}
.consent input{width:auto;margin-top:6px;accent-color:var(--garnet)}
.form-msg{grid-column:1/-1;font-size:14px;padding-left:14px;border-left:1px solid var(--garnet)}
.form-msg.err{border-left-color:#ff8a80}

footer{position:relative;z-index:2;border-top:1px solid var(--line);padding-block:40px;color:var(--taupe);font-size:14px;background:var(--sand)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.foot nav{display:flex;flex-wrap:wrap;gap:24px}
.foot a{text-decoration:none}.foot a:hover{color:var(--cocoa)}

/* « IA » néon blanc */
.ia{font-weight:700;font-size:1.25em;letter-spacing:.2em;color:#fff;opacity:.15;text-shadow:none;transition:opacity .2s}
.ia.on{opacity:1;animation:neon 3.2s ease-in-out infinite;text-shadow:0 0 4px #fff,0 0 12px #fff,0 0 28px rgba(200,220,255,.9),0 0 50px rgba(200,220,255,.6)}
.ia.boot{animation:boot 1.4s steps(1,end) forwards}
@keyframes boot{0%{opacity:.15}10%{opacity:1}14%{opacity:.2}22%{opacity:1}26%{opacity:.3}40%{opacity:1}44%{opacity:.4}60%,100%{opacity:1;text-shadow:0 0 4px #fff,0 0 14px #fff,0 0 32px rgba(200,220,255,.9)}}
@keyframes neon{0%,100%{text-shadow:0 0 4px #fff,0 0 12px #fff,0 0 28px rgba(200,220,255,.9),0 0 50px rgba(200,220,255,.6)}50%{text-shadow:0 0 3px #fff,0 0 8px #fff,0 0 18px rgba(200,220,255,.7),0 0 34px rgba(200,220,255,.4)}}

/* Boutons : chargement en lumière blanche au clic */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn .load{position:absolute;left:0;top:0;bottom:0;width:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.25),#fff);box-shadow:0 0 30px 6px rgba(255,255,255,.9)}
.charging{color:#000!important;border-color:#fff!important;box-shadow:0 0 30px rgba(255,255,255,.7),0 0 80px rgba(255,255,255,.35)!important}
.charging .load{animation:load .85s cubic-bezier(.6,0,.2,1) forwards}
@keyframes load{to{width:100%}}
.charged{animation:flash .55s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(255,255,255,.95),0 0 90px 20px #fff}100%{box-shadow:0 0 0 18px rgba(255,255,255,0),0 0 0 0 rgba(255,255,255,0)}}
.btn .pct{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:600 10px var(--body);letter-spacing:.1em;color:#000;opacity:.7}
.lightwave{position:fixed;z-index:70;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.5) 30%,rgba(255,255,255,0) 70%);animation:wave .9s ease-out forwards}
@keyframes wave{to{transform:scale(60);opacity:0}}

/* Écriture qui s'allume lentement */
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block;transition:opacity 1.2s ease,filter 1.2s ease,transform 1.2s ease,text-shadow 2s ease}
.pending .ch{opacity:0;filter:blur(10px);transform:translateY(.12em);text-shadow:0 0 20px var(--garnet),0 0 40px var(--garnet)}
.fade{transition:opacity 1.6s ease,filter 1.6s ease}
.fade.pending{opacity:0;filter:blur(6px)}
.replay{cursor:pointer}

@media (max-width:860px){
  .steps{grid-template-columns:1fr 1fr;row-gap:44px}
  .plans{grid-template-columns:1fr}
  .plan{border-right:0;border-bottom:1px solid var(--line)}
  .plan:last-child{border-bottom:0}
  .contact{grid-template-columns:1fr}
  .case{grid-template-columns:minmax(0,1fr) auto}

}
@media (max-width:640px){
  body::after{background:radial-gradient(ellipse 72% 28% at 50% 4%,rgba(61,107,255,.13),rgba(42,83,190,.045) 48%,transparent 100%)}
  .logo-stage{height:250px;border-radius:14px}
  .portal-grid{inset:6%;background-size:26px 26px;opacity:.36}
  .portal-orbit{width:74%;height:54%}
  .orbit-b{width:62%;height:72%}
  .orbit-c{width:82%;height:42%}
  .portal-fragments{transform:scale(.72)}
  .portal-fragment{min-width:30px;height:21px;padding-inline:6px;font-size:9px}
  .portal-readout{font-size:8px;letter-spacing:.13em}
  .logo-flat .mark{height:54%;max-width:82%}
  .logo-side-label{left:calc(50% + 29vw);top:calc(50% + 22vw);font-size:clamp(7px,2.2vw,9px);letter-spacing:.09em}

  nav.links,.bar>.btn{display:none}
  .menu-btn{display:block}
  .row{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::after{animation:none;transform:none;will-change:auto}
  .portal-orbit,.portal-scan,.logo-stage::before{animation:none}
  .logo-stage.burst .portal-pulse{animation:none;opacity:.65;transform:scale(1)}
  .logo-stage.burst .logo-core-light,.logo-stage.burst .portal-fragment{animation:none;opacity:0}
  .logo-stage.burst .portal-orb,.logo-stage.burst .portal-orb::before,.logo-stage.burst .portal-orb::after{animation:none;opacity:0}
  .logo-stage.burst .logo-flat .mark{animation:none;opacity:.7;transform:none}
  .logo-stage.burst .logo-flat .mark path{animation:none;fill:rgba(255,255,255,.98);fill-opacity:1;stroke:#fff}
  .logo-stage.revealed .logo-side-label{animation:none;opacity:.9;visibility:visible}

  .logo-stage.burst .logo-led-sweep{animation:none;opacity:0}
  .orb-ia{animation:none;opacity:1}
  .orb-led-sweep{animation:none;opacity:.7;transform:rotate(-25deg)}
  .ch,.fade{transition:none}
  .pending .ch,.fade.pending{opacity:1;filter:none;transform:none;text-shadow:none}
  .pulse{animation:none}
  .ia.on,.ia.boot{animation:none;opacity:1}
  .charging .load{animation-duration:.01s}
  .lightwave{display:none}
}
/* Ajouts 15ZY : bandeau de confiance, liens de liste, blog */
.trust{margin:18px 0 0;font-size:13px;color:var(--taupe)}
.row .more{grid-column:2;font-size:14px;text-decoration:none;color:var(--cocoa);border-bottom:1px solid var(--garnet-soft);justify-self:start}
.row .more:hover{border-bottom-color:var(--garnet)}
.row .tag{display:block;font-family:var(--body);font-size:12px;color:var(--taupe);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.plan .from{font-size:13px;color:var(--taupe);margin-top:-12px}
@media (max-width:640px){.row .more{grid-column:1}}

/* ---- pages secondaires ---- */
.page-head{padding-block:clamp(56px,9vw,120px) clamp(24px,4vw,48px);position:relative;z-index:2}
.page-head h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,5vw,56px);line-height:1.12;letter-spacing:.01em;margin:0 0 20px;text-wrap:balance}
.page-head .lead{color:var(--taupe);max-width:60ch;margin:0}
.crumbs{font-size:13px;color:var(--taupe);margin:0 0 24px}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--cocoa)}
nav.links a[aria-current="page"],.mobile-nav a[aria-current="page"]{color:var(--cocoa)}
.prose{max-width:720px}
.prose h2{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.6vw,28px);line-height:1.25;margin:48px 0 14px;text-wrap:balance}
.prose h3{font-size:18px;font-weight:600;margin:28px 0 8px}
.prose p,.prose li{color:#c9c9d2}
.prose ul,.prose ol{padding-left:22px;margin:0 0 18px}
.prose li{margin-bottom:8px}
.prose .meta{color:var(--taupe);font-size:14px;margin:0 0 32px}
.prose .callout{border:1px solid var(--line);background:rgba(12,12,15,.7);padding:20px 22px;margin:28px 0;border-radius:2px}
.prose .callout p{margin:0}
.todo{color:#ffd37a}

.cta-block .cta-row{margin-top:8px}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.value{border:1px solid var(--line);background:rgba(12,12,15,.7);padding:24px}
.value h3{margin:0 0 8px;font-size:17px;font-weight:600}
.value p{margin:0;color:var(--taupe)}

/* ---- Lisibilité : cartes visibles, texte clair, bleu du logo ---- */
.list{border-top:0;display:grid;gap:14px}
.row{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px 28px}
.row p,.step p,.plan ul,.value p{font-size:16px;color:var(--taupe)}
.row .tag,.plan .pname span,.step .n{color:var(--blue-soft)}
.row .more{border-bottom-color:var(--blue);color:var(--cocoa)}
.steps{gap:18px}
.step{padding:26px 24px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.step::before{display:none}
.case{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px 26px;margin-bottom:12px}
.case:first-child{border-top:1px solid var(--line)}
.plans{gap:20px;border:0;background:none}
.plan{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:34px 28px}
.plan:last-child{border-right:1px solid var(--line)}
.plan.featured{background:linear-gradient(180deg,var(--card2),var(--card));border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 24px 70px -24px rgba(108,140,255,.65)}
.plan.featured::before{display:none}
.plan li::before{background:var(--blue-soft);height:2px}
.faq{border-top:0;display:grid;gap:10px;max-width:820px}
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 22px}
details[open]{border-color:var(--blue)}
summary{padding:18px 0}
summary::after{border-color:var(--blue-soft)}
details p{margin:0 0 20px;color:var(--taupe)}
.value{background:var(--card);border-color:var(--line);border-radius:12px}
#workPrinciples .value{position:relative;overflow:hidden;border:1px solid rgba(114,151,226,.42);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background-color .2s ease}
#workPrinciples .value::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.12),rgba(153,192,255,.045) 42%,transparent 74%);opacity:0;transition:opacity .2s ease}
#workPrinciples .value:hover,#workPrinciples .value.is-lit{border-color:rgba(244,249,255,.9);background:#152044;box-shadow:0 0 0 1px rgba(225,239,255,.18),0 0 24px rgba(206,228,255,.24),inset 0 0 24px rgba(140,181,255,.09);transform:translateY(-2px)}
#workPrinciples .value:hover::before,#workPrinciples .value.is-lit::before{opacity:1}
#workPrinciples .value:hover h3,#workPrinciples .value.is-lit h3{text-shadow:0 0 9px rgba(255,255,255,.42)}
section.block:nth-of-type(even){background:rgba(13,21,48,.82)}
input,select,textarea{background:#0b1230;border:1px solid var(--line);color:var(--cocoa);border-radius:8px}
#contactForm input,#contactForm select,#contactForm textarea{transition:border-color .18s ease,box-shadow .18s ease}
#contactForm input:focus,#contactForm select:focus,#contactForm textarea:focus{border-color:var(--blue-soft);box-shadow:0 0 0 2px rgba(108,140,255,.18),0 0 14px rgba(61,107,255,.2)}
#contactForm .field:focus-within label{color:#b7d0ff;text-shadow:0 0 9px rgba(82,139,255,.4)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue-soft);outline-offset:3px}
.prose p,.prose li{color:#dde3f5}
.prose a,.intro a,.crumbs a{color:var(--blue-soft)}
.todo{color:#ffd37a}

/* Lisibilité : textes plus grands et plus épais, petits titres en Manrope plutôt qu'en Michroma */
body{font-size:18px}
nav.links a{font-size:15px}
.btn{font-size:15px;padding:14px 26px}
.row h3,.step h3,.plan .pname{font-family:var(--body);font-weight:600;font-size:19px;letter-spacing:0}
.row p,.step p,.plan ul,details p{font-size:17px}
.step .dur,.crumbs,.trust,label,.info span,.price small,.plan .from,.plan .pname span{font-size:14px}
.row .tag{font-size:13px}

input,select,textarea{font:400 17px var(--body)}
summary{font-weight:600}
footer{font-size:15px}
.mobile-nav a{font-size:18px}

/* Vitrine : titres lisibles sur le noir, fenêtres cliquables, lumière qui suit le défilement */
.sc-sticky{color:var(--cocoa)}
.sc-step h2{color:var(--cocoa)}
.sc-step p{color:var(--taupe)}

a.win{display:block;text-decoration:none;position:relative;cursor:pointer;transition:box-shadow .3s}
a.win > *{position:relative;z-index:1}
a.win::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:2;pointer-events:none;
  background:radial-gradient(260px circle at var(--gx,-400px) var(--gy,-400px),rgba(220,230,255,.95),rgba(108,140,255,.45) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
a.win::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  background:radial-gradient(320px circle at var(--gx,-400px) var(--gy,-400px),rgba(108,140,255,.22),transparent 65%)}
a.win:hover,a.win:focus-visible{box-shadow:0 0 0 1px var(--blue-soft),0 0 40px -6px var(--blue),0 40px 80px -30px rgba(10,4,2,.6)}

/* Bouton « Installer l'application » */
.install-btn{position:fixed;z-index:58;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));min-height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--blue-soft);background:rgba(17,27,58,.92);backdrop-filter:blur(12px);color:var(--cocoa);font:600 15px var(--body);cursor:pointer;box-shadow:0 0 30px -8px var(--blue)}
.install-btn:hover{background:var(--card2)}

/* Vitrine bleu nuit : fenêtres en verre en 3D, boutons transparents lisibles */
.sc-sticky{background:transparent}
.sc-track{perspective:1100px}
a.win{border-radius:18px;background:linear-gradient(160deg,rgba(40,62,140,.62),rgba(14,24,62,.78));
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(180,200,255,.28);color:var(--cocoa);font-size:14px;transform-style:preserve-3d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(108,140,255,.25),0 2px 0 rgba(108,140,255,.35),0 18px 0 -10px rgba(40,60,140,.45),0 50px 90px -30px rgba(2,6,24,.9)}

a.win:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* Explosion d'une fenêtre au clic */

/* Bulles de verre de l'explosion : transparentes, avec un reflet et un bord lumineux bien visibles */

/* Logo : « AGENCY IA » centré juste sous 15ZY, et en-tête sur une seule ligne bien droite */
.logo-flat{gap:clamp(10px,1.6vw,16px)}
.logo-flat .mark{height:50%}
.logo-side-label{position:static;transform:none;justify-content:center;gap:.6em;font-size:clamp(12px,1.5vw,16px);letter-spacing:.42em;margin-right:-.42em}
.logo{gap:10px;white-space:nowrap;align-items:center}
.logo .mark{height:24px;flex:none}
.logo-sub{display:inline-flex;align-items:center;gap:.5em;font-size:12px;line-height:1;letter-spacing:.38em;white-space:nowrap}
.logo-sub .ia{font-size:1em;letter-spacing:.2em;line-height:1}
@media (max-width:640px){
  .logo-flat .mark{height:44%}
  .logo-side-label{position:static;transform:none;font-size:12px;letter-spacing:.38em}
  .logo-sub{font-size:11px;letter-spacing:.32em}
}

/* « IA » net et lumineux : halo serré au lieu d'un grand flou, pas de clignotement sur téléphone */
.logo-sub .ia.on,.logo-sub .ia{color:#fff;font-weight:800;opacity:1;letter-spacing:.12em;margin-right:-.12em;
  text-shadow:0 0 2px #fff,0 0 6px rgba(150,190,255,.95),0 0 12px rgba(75,141,255,.7)}
.logo-sub .ia.on{animation:ia-glow 3.2s ease-in-out infinite}
@keyframes ia-glow{0%,100%{text-shadow:0 0 2px #fff,0 0 6px rgba(150,190,255,.95),0 0 12px rgba(75,141,255,.7)}50%{text-shadow:0 0 2px #fff,0 0 8px rgba(170,205,255,1),0 0 18px rgba(75,141,255,.85)}}

@media (max-width:640px){
  .logo-sub .ia.on{animation:none}
  .logo-sub .ia{font-size:1.1em}
}

/* « AGENCY » sous le logo : aussi large que 15ZY, s'écrit lettre par lettre puis s'allume du 1 au Y */
.agency-word{display:flex;justify-content:space-between;gap:0;letter-spacing:0;margin-right:0;font:500 clamp(13px,1.8vw,19px) var(--display);color:rgba(190,218,255,.9)}
.agency-word i{font-style:normal;display:inline-block;opacity:0}
.logo-stage.revealed .agency-word{animation:none;opacity:1;visibility:visible}
.logo-stage.revealed .agency-word i{animation:agency-type .32s ease-out calc(.35s + var(--i)*.11s) both,agency-light 1.1s ease-in-out calc(1.25s + var(--i)*.12s) both}
@keyframes agency-type{0%{opacity:0;transform:translateY(.25em) scale(.9);filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
@keyframes agency-light{
  0%{color:rgba(190,218,255,.9);text-shadow:0 0 6px rgba(110,177,255,.45)}
  45%{color:#fff;text-shadow:0 0 3px #fff,0 0 10px rgba(170,205,255,1),0 0 22px rgba(75,141,255,.9)}
  100%{color:#e6f0ff;text-shadow:0 0 2px rgba(255,255,255,.8),0 0 9px rgba(110,170,255,.75)}}
@media (max-width:640px){.agency-word{font-size:13px}}
@media (prefers-reduced-motion:reduce){.agency-word i,.logo-stage.revealed .agency-word i{animation:none;opacity:1;color:#e6f0ff}}

/* Fond léger téléphone : halos bleus qui dérivent, points lumineux qui montent, reflet qui passe. Seulement transform/opacity. */
.bg-lite{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#0f1d4d 0%,var(--sand) 60%)}
.bg-lite i{position:absolute;width:110vmax;height:110vmax;border-radius:50%;will-change:transform}
.bg-lite .b1{left:-55vmax;top:-45vmax;background:radial-gradient(circle,rgba(61,107,255,.34),rgba(61,107,255,0) 58%);animation:bgl-1 22s ease-in-out infinite alternate}
.bg-lite .b2{right:-60vmax;top:10vh;background:radial-gradient(circle,rgba(120,90,255,.22),rgba(120,90,255,0) 58%);animation:bgl-2 27s ease-in-out infinite alternate}
.bg-lite .b3{left:-30vmax;bottom:-70vmax;background:radial-gradient(circle,rgba(40,170,255,.22),rgba(40,170,255,0) 58%);animation:bgl-3 31s ease-in-out infinite alternate}
.bg-lite .dots{position:absolute;left:0;top:0;width:100%;height:200%;opacity:.55;will-change:transform;
  background-image:radial-gradient(1.4px 1.4px at 20% 30%,#cfe0ff 99%,transparent),radial-gradient(1px 1px at 70% 60%,#9fb8ff 99%,transparent),radial-gradient(1.2px 1.2px at 45% 85%,#ffffff 99%,transparent),radial-gradient(1px 1px at 85% 15%,#b9ccff 99%,transparent);
  background-size:140px 140px,180px 180px,230px 230px,110px 110px;animation:bgl-dots 40s linear infinite}
.bg-lite .sweep{position:absolute;inset:-50% -100%;background:linear-gradient(115deg,transparent 42%,rgba(157,180,255,.10) 50%,transparent 58%);will-change:transform;animation:bgl-sweep 9s ease-in-out infinite}
@keyframes bgl-1{to{transform:translate(35vw,25vh) scale(1.15)}}
@keyframes bgl-2{to{transform:translate(-40vw,30vh) scale(.9)}}
@keyframes bgl-3{to{transform:translate(30vw,-35vh) scale(1.1)}}
@keyframes bgl-dots{to{transform:translateY(-50%)}}
@keyframes bgl-sweep{0%,30%{transform:translateX(-35%)}70%,100%{transform:translateX(35%)}}
@media (prefers-reduced-motion:reduce){.bg-lite i,.bg-lite .dots,.bg-lite .sweep{animation:none}}

/* Quand le fond 3D tourne, le fond léger CSS s'efface (il reste en secours si la 3D ne démarre pas) */
.bg3d .bg-lite{display:none}

/* Vitrine en boules de verre : reflet, bord éclairé par la lumière qui défile, flottement léger */
#scTrack a.win.orb{width:clamp(150px,17vw,215px);aspect-ratio:1;height:auto;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;overflow:visible;
  backdrop-filter:none;-webkit-backdrop-filter:none;display:grid;place-items:center;text-align:center;color:#fff;-webkit-tap-highlight-color:transparent}
#scTrack a.win.orb::after{background:radial-gradient(240px circle at var(--gx,-400px) var(--gy,-400px),rgba(150,180,255,.35),transparent 60%)}
.orb-ball{position:absolute;inset:0;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.75) 0 5%,rgba(200,215,255,.28) 12%,transparent 26%),
    radial-gradient(circle at 50% 60%,rgba(108,140,255,.35),rgba(30,52,140,.55) 55%,rgba(9,16,44,.9) 78%);
  box-shadow:inset 0 0 28px rgba(157,180,255,.55),inset 0 -14px 30px rgba(7,11,26,.6),0 0 38px -6px rgba(108,140,255,.85),0 30px 50px -24px rgba(0,0,0,.85);
  animation:orb-flotte 5.5s ease-in-out calc(var(--k,0) * -.8s) infinite alternate;transition:filter .25s,scale .25s}
.orb-txt{position:relative;z-index:3;display:grid;gap:4px;padding:0 14%;pointer-events:none;text-shadow:0 1px 10px rgba(7,11,26,.9)}
.orb-txt strong{font:400 clamp(20px,2.2vw,28px)/1.05 var(--display);letter-spacing:.02em}
.orb-txt small{font-size:13px;font-weight:600;color:#dfe8ff;line-height:1.25}
#scTrack a.win.orb:hover .orb-ball,#scTrack a.win.orb:focus-visible .orb-ball{filter:brightness(1.25);scale:1.06}
#scTrack a.win.orb:focus-visible{outline:2px solid #fff;outline-offset:6px}
@keyframes orb-flotte{from{translate:0 -6px}to{translate:0 8px}}
/* Clic : la boule s'illumine et s'efface */
#scTrack a.win.orb.orb-go .orb-ball{animation:orb-part .45s ease-out forwards}
#scTrack a.win.orb.orb-go .orb-txt{transition:opacity .2s;opacity:0}
@keyframes orb-part{0%{filter:brightness(1);scale:1;opacity:1}40%{filter:brightness(2.4);scale:1.18;opacity:1}100%{filter:brightness(3);scale:1.5;opacity:0}}
.orb-eclat{position:fixed;z-index:80;width:var(--t);height:var(--t);margin:calc(var(--t) / -2) 0 0 calc(var(--t) / -2);border-radius:50%;pointer-events:none;
  border:2px solid rgba(220,232,255,.95);box-shadow:0 0 24px rgba(157,180,255,.9),inset 0 0 24px rgba(157,180,255,.6);animation:orb-onde .5s ease-out forwards}
@keyframes orb-onde{from{transform:scale(.6);opacity:1}to{transform:scale(2.6);opacity:0}}
.orb-voile{position:fixed;inset:0;z-index:79;pointer-events:none;background:radial-gradient(circle at var(--x) var(--y),rgba(200,215,255,.45),rgba(108,140,255,.12) 35%,transparent 65%);animation:orb-voile .5s ease-out forwards}
@keyframes orb-voile{0%{opacity:0}35%{opacity:1}100%{opacity:.85}}
@media (max-width:640px){#scTrack a.win.orb{width:150px}.orb-txt strong{font-size:21px}.orb-txt small{font-size:12px}}
@media (prefers-reduced-motion:reduce){.orb-ball{animation:none}}
#scTrack a.win.orb>.orb-ball{position:absolute;z-index:0}#scTrack a.win.orb>.orb-txt{position:relative;z-index:3}

/* Assistant 15ZY : ouverture façon écran qui s'allume, balayage de lumière, titre néon */

/* Assistant 15ZY v2 : panneau HUD futuriste, toutes les cases visibles, ouverture du titre jusqu'au rendez-vous */

/* les cases : toutes visibles, sur plusieurs lignes si besoin */

/* ouverture : une ligne de lumière sur le titre, qui s'élargit puis déplie l'écran vers le bas jusqu'aux cases */

/* le bouton « Installer » ne cache plus l'assistant */
.install-btn{left:auto;right:max(16px,env(safe-area-inset-right,0px))}

/* Assistant 15ZY pleine largeur : sur ordinateur, les 5 cases tiennent sur une seule ligne */

/* Lampe dans l'en-tête */
.bar-droite{display:flex;align-items:center;gap:12px}
.lampe{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center;cursor:pointer;color:#9db4ff;
  box-shadow:0 0 14px -5px rgba(108,140,255,.9);transition:background-color .3s,color .3s,box-shadow .3s,border-color .3s}
.lampe svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lampe .rayons{opacity:0;transition:opacity .3s}
.lampe:hover{border-color:#cfdcff;color:#fff}
.lampe:focus-visible{outline:2px solid #fff;outline-offset:3px}
.theme-blanc .lampe{background:#fff;border-color:#fff;color:#1d3fe0;box-shadow:0 0 0 1px rgba(29,63,224,.25),0 0 22px rgba(255,255,255,1),0 0 36px rgba(29,63,224,.35)}
.theme-blanc .lampe .ampoule{fill:#fff6c9}
.theme-blanc .lampe .rayons{opacity:1}
.lampe-flash{position:fixed;inset:0;z-index:90;pointer-events:none;background:radial-gradient(circle at var(--x) var(--y),rgba(255,255,255,.95),rgba(255,255,255,.5) 25%,rgba(255,255,255,0) 60%);animation:lampe-eclat .65s ease-out forwards}
@keyframes lampe-eclat{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.theme-anim,.theme-anim *{transition:background-color .55s,color .55s,border-color .55s!important}
@media (max-width:640px){.bar-droite .btn{display:none}.lampe{width:42px;height:42px}}

/* Thème blanc */
html.theme-blanc{--sand:#f3f6fd;--cream:#ffffff;--line:#c9d4f1;--taupe:#46506e;--cocoa:#0b1433;--garnet:#1d3fe0;--garnet-soft:rgba(29,63,224,.22);
  --blue:#2348f5;--blue-soft:#2f55ff;--card:#ffffff;--card2:#eef2ff;color-scheme:light}
html.theme-blanc,html.theme-blanc body{background:linear-gradient(180deg,#f6f8ff,#e8eefc) fixed}
html.theme-blanc #bg,html.theme-blanc .bg-lite{display:none}
html.theme-blanc body::before{background:#f6f8ff}
html.theme-blanc header{background:rgba(246,248,255,.9);border-bottom-color:var(--line)}
html.theme-blanc .logo .mark{color:#1d3fe0;filter:drop-shadow(0 0 6px rgba(29,63,224,.35))}
html.theme-blanc .logo-sub{color:#1d3fe0;text-shadow:none}
html.theme-blanc .logo-sub .ia,html.theme-blanc .logo-sub .ia.on{color:#0b1433;text-shadow:0 0 8px rgba(29,63,224,.35);animation:none}
html.theme-blanc section.block{background:rgba(255,255,255,.72)}
html.theme-blanc section.block:nth-of-type(even){background:rgba(232,238,253,.85)}
html.theme-blanc .plans{background:none}
html.theme-blanc .row,html.theme-blanc .step,html.theme-blanc .plan,html.theme-blanc details,html.theme-blanc .value,html.theme-blanc .case{box-shadow:0 10px 30px -18px rgba(11,20,51,.35)}
html.theme-blanc .plan.featured{background:linear-gradient(180deg,#eef2ff,#fff);box-shadow:0 0 0 1px var(--blue),0 24px 60px -26px rgba(35,72,245,.5)}
html.theme-blanc .prose p,html.theme-blanc .prose li{color:#2a3150}
html.theme-blanc .prose .callout,html.theme-blanc .value{background:#fff}
html.theme-blanc input,html.theme-blanc select,html.theme-blanc textarea{background:#fff;color:var(--cocoa)}
html.theme-blanc .btn-led{background:#1d3fe0;border-color:#1d3fe0;color:#fff}
html.theme-blanc .btn-led:hover{background:#0b1433;border-color:#0b1433;color:#fff}
html.theme-blanc .lampe:hover{color:#1d3fe0}
html.theme-blanc .todo{color:#a15c00}
/* les « écrans » gardent leurs couleurs sombres d'origine */
html.theme-blanc .logo-stage,html.theme-blanc .sc-sticky,html.theme-blanc .install-btn{
  --sand:#070b1a;--cream:#111b3a;--line:#5068ae;--taupe:#c5cce4;--cocoa:#f6f8ff;--garnet:#ffffff;--garnet-soft:rgba(160,185,255,.28);
  --blue:#6c8cff;--blue-soft:#9db4ff;--card:#111b3a;--card2:#18265a;color-scheme:dark}

/* thème blanc : le cadre du logo et la vitrine des boules restent des écrans sombres */
html.theme-blanc .logo-stage{background-color:#070b1a;box-shadow:0 30px 60px -30px rgba(11,20,51,.6)}
html.theme-blanc .sc-sticky{background:radial-gradient(120% 90% at 50% 40%,#13225a 0%,#0b1433 45%,#070b1a 100%)}

/* Assistant 15ZY (chatbot) : bulle en bas à droite et fenêtre « écran » sombre, sur toutes les pages */
.cb-bulle{position:fixed;z-index:60;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:60px;height:60px;border-radius:50%;
  border:1px solid rgba(207,220,255,.7);background:radial-gradient(circle at 35% 30%,#3d6bff,#1834c9 60%,#0b1433);color:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 0 0 4px rgba(108,140,255,.18),0 0 26px -2px rgba(108,140,255,.9),0 14px 30px -12px rgba(0,0,0,.7);transition:transform .2s}
.cb-bulle:hover{transform:scale(1.06)}
.cb-bulle:focus-visible{outline:2px solid #fff;outline-offset:4px}
.cb-bulle svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.cb-bulle svg circle{fill:currentColor;stroke:none}
.cb-point{position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%;background:#7dffb6;box-shadow:0 0 10px #7dffb6;border:2px solid #0b1433}
.cb-bulle.ouvert .cb-point{display:none}
.install-btn{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
.cb-fenetre{position:fixed;z-index:61;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(88px + env(safe-area-inset-bottom,0px));
  width:min(380px,calc(100vw - 32px));height:min(560px,calc(100dvh - 120px));display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(157,180,255,.5);border-radius:18px;color:#f6f8ff;font-family:var(--body);
  background:repeating-linear-gradient(0deg,rgba(157,180,255,.03) 0 1px,transparent 1px 4px),linear-gradient(160deg,rgba(26,42,98,.97),rgba(9,15,40,.98));
  box-shadow:0 0 0 1px rgba(157,180,255,.15),0 0 50px -12px rgba(108,140,255,.8),0 30px 60px -20px rgba(0,0,0,.8);animation:cb-ouvre .35s cubic-bezier(.2,.8,.2,1)}
.cb-fenetre[hidden]{display:none}
@keyframes cb-ouvre{from{opacity:0;transform:translateY(14px) scale(.96);filter:brightness(1.8)}to{opacity:1;transform:none;filter:none}}
.cb-tete{display:flex;align-items:center;gap:10px;padding:12px 8px 12px 16px;border-bottom:1px solid rgba(157,180,255,.28);background:linear-gradient(90deg,rgba(108,140,255,.2),transparent 75%)}
.cb-tete b{display:block;font-size:16px;text-shadow:0 0 10px rgba(150,190,255,.8)}
.cb-tete small{display:block;font-size:12px;color:#c5cce4}
.cb-statut{width:9px;height:9px;border-radius:50%;background:#7dffb6;box-shadow:0 0 10px #7dffb6}
.cb-fermer{margin-left:auto;width:44px;height:44px;border:0;border-radius:50%;background:none;color:#c5cce4;font-size:26px;line-height:1;cursor:pointer}
.cb-fermer:hover{color:#fff;background:rgba(255,255,255,.08)}
.cb-fil{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.cb-msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:15px;line-height:1.5}
.cb-msg.bot{align-self:flex-start;background:rgba(108,140,255,.16);border:1px solid rgba(157,180,255,.25);border-bottom-left-radius:4px}
.cb-msg.moi{align-self:flex-end;background:#2348f5;color:#fff;border-bottom-right-radius:4px}
.cb-lien{display:block;margin-top:8px;color:#bcd0ff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cb-tape{display:flex;gap:5px;align-items:center;padding:13px 15px}
.cb-tape i{width:7px;height:7px;border-radius:50%;background:#bcd0ff;animation:cb-tape 1s infinite}
.cb-tape i:nth-child(2){animation-delay:.15s}.cb-tape i:nth-child(3){animation-delay:.3s}
@keyframes cb-tape{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.cb-choix{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 10px}
.cb-choix:empty{display:none}
.cb-choix button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(157,180,255,.5);background:rgba(108,140,255,.1);color:#e8eeff;font:600 13px var(--body);cursor:pointer}
.cb-choix button:hover,.cb-choix button:focus-visible{background:rgba(108,140,255,.28);border-color:#fff;color:#fff}
.cb-saisie{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(157,180,255,.28)}
.cb-saisie input{flex:1;min-width:0;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid rgba(157,180,255,.35);background:rgba(7,11,26,.5);color:#fff;font:400 16px var(--body)}
.cb-saisie input:focus{outline:none;border-color:#9db4ff;box-shadow:0 0 0 3px rgba(108,140,255,.25)}
.cb-saisie button{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid #cfdcff;background:#2348f5;color:#fff;cursor:pointer;display:grid;place-items:center}
.cb-saisie svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.cb-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:640px){.cb-bulle{width:56px;height:56px}.cb-fenetre{right:8px;left:8px;width:auto;bottom:calc(80px + env(safe-area-inset-bottom,0px));height:min(70dvh,560px)}}
@media (prefers-reduced-motion:reduce){.cb-fenetre,.cb-tape i{animation:none}}
.cb-fenetre{background-color:#0b1433}

/* Vitrine « ballons » : les boules tombent du haut, rebondissent, puis flottent au bout de leur fil */
.showcase.chute{height:auto!important}
.chute .sc-sticky{position:relative;top:auto;height:auto;min-height:0;overflow:hidden;padding-block:clamp(70px,9vw,120px) clamp(90px,10vw,140px)}
.chute #orbs,.chute .sc-bar{display:none}
.chute .sc-steps{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:1080px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px));text-align:center}
.chute .sc-step{position:static;transform:none;opacity:1;filter:none}
.chute .sc-step:not(:first-child){display:none}
.chute .sc-step h2{margin-inline:auto}
.chute .sc-step p{margin-inline:auto}
.chute .sc-track{position:relative;top:auto;left:auto;transform:none!important;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(26px,3.5vw,48px) clamp(18px,3vw,40px);max-width:1080px;margin:clamp(40px,6vw,64px) auto 0;padding-inline:16px;perspective:none}
.chute .sc-track .win{margin-top:0!important;transform:none}
.chute .sc-track .win:nth-child(even){margin-top:46px!important}
.chute a.win.orb{--gx:32%;--gy:14%;opacity:0;transform:translateY(-120vh)}
.chute.tombe a.win.orb{animation:ballon-chute 1.5s cubic-bezier(.33,0,.55,1) both;animation-delay:calc(var(--k,0) * .13s)}
@keyframes ballon-chute{
  0%{opacity:0;transform:translateY(-120vh) rotate(-10deg)}
  8%{opacity:1}
  55%{transform:translateY(0) rotate(4deg)}
  68%{transform:translateY(-34px) rotate(-3deg)}
  80%{transform:translateY(0) rotate(2deg)}
  90%{transform:translateY(-10px) rotate(-1deg)}
  100%{opacity:1;transform:translateY(0) rotate(0)}}
/* le fil du ballon */
.chute .orb-ball::before{content:"";position:absolute;left:50%;top:99%;width:1.5px;height:54px;transform:translateX(-50%);transform-origin:top center;
  background:linear-gradient(rgba(207,220,255,.85),rgba(207,220,255,0));animation:fil-balance 3.2s ease-in-out infinite alternate}
@keyframes fil-balance{from{transform:translateX(-50%) rotate(-6deg)}to{transform:translateX(-50%) rotate(6deg)}}
@media (max-width:640px){
  .chute .sc-track{gap:34px 18px}
  .chute .sc-track .win:nth-child(even){margin-top:30px!important}
  .chute .orb-ball::before{height:40px}
}
@media (prefers-reduced-motion:reduce){.chute a.win.orb{opacity:1;transform:none!important;animation:none!important}.chute .orb-ball::before{animation:none}}
/* après la chute, chaque boule flotte comme un ballon : elle monte, descend et se balance, chacune à son rythme */
.chute.tombe a.win.orb{animation:ballon-chute 1.5s cubic-bezier(.33,0,.55,1) calc(var(--k,0) * .13s) both,
  ballon-flotte calc(3.4s + var(--k,0) * .37s) ease-in-out calc(1.5s + var(--k,0) * .13s) infinite alternate}
@keyframes ballon-flotte{
  0%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-16px) rotate(2.5deg)}
  100%{transform:translateY(-6px) rotate(-2.5deg)}}
@media (max-width:640px){@keyframes ballon-flotte{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-11px) rotate(2deg)}100%{transform:translateY(-4px) rotate(-2deg)}}}

/* Boule de l'accueil : logo 15ZY + AGENCY à l'intérieur, un peu plus grande, flotte, et explose au toucher */
.portal-orb{width:clamp(140px,22vw,210px);animation:orb-float 3.4s ease-in-out infinite}
@keyframes orb-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-16px) scale(1.04)}}
.orb-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;letter-spacing:0}
.orb-logo svg{width:56%;height:auto;color:#fff;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px #a7d7ff) drop-shadow(0 0 22px #438cff)}
.orb-agency{font:600 clamp(8px,1.1vw,11px)/1 var(--display);letter-spacing:.38em;margin-right:-.38em;color:#eaf4ff;text-shadow:0 0 6px #fff,0 0 14px #6aa8ff}
/* l'explosion : la boule gonfle, s'illumine et éclate en lumière */
@keyframes orb-exit{
  0%{opacity:1;transform:scale(1);filter:brightness(1)}
  35%{opacity:1;transform:scale(1.18);filter:brightness(1.8)}
  55%{opacity:1;transform:scale(1.32);filter:brightness(3) blur(1px)}
  100%{opacity:0;transform:scale(2.1);filter:brightness(4) blur(8px)}}
.logo-stage.burst .portal-orb{animation:orb-exit .62s cubic-bezier(.3,0,.6,1) .55s both}
.logo-stage.burst::before{animation-duration:.6s}

/* Un peu de noir : fond et surfaces plus sombres, accents bleus gardés */
:root{--sand:#04050a;--cream:#0b0f1e;--card:#0b1020;--card2:#121a33;--line:#34457d}
header{background:rgba(4,5,10,.9)}
body::before{background:#04050a}
section.block{background:rgba(4,5,10,.72)}
section.block:nth-of-type(even){background:rgba(10,13,26,.86)}
.sc-sticky{background:radial-gradient(110% 80% at 50% 40%,rgba(19,34,90,.85) 0%,rgba(8,12,30,.9) 45%,#030407 100%)}
.bg-lite{background:radial-gradient(120% 80% at 50% 0%,#0b1538 0%,#04050a 60%)}
footer{background:#030407}
.logo-stage{background-color:#05070f}
html.theme-blanc footer{background:var(--sand)}
/* « IA » dans la boule : plus lumineux que AGENCY */
.orb-agency{white-space:nowrap}
.orb-agency b{font-weight:700;color:#fff;letter-spacing:.2em;text-shadow:0 0 4px #fff,0 0 10px #a7d7ff,0 0 20px #438cff}

/* « IA » au bout de AGENCY : s'écrit, puis s'allume comme un néon et reste lumineux */
.agency-word .aw-espace{width:.7em;flex:none;opacity:0!important;animation:none!important}
.logo-stage.revealed .agency-word i.aw-ia{animation:agency-type .32s ease-out calc(.35s + var(--i) * .11s) both,ia-allume 1.3s steps(1,end) 2.1s both,ia-respire 2.8s ease-in-out 3.4s infinite alternate}
@keyframes ia-allume{
  0%,14%,30%{color:rgba(190,218,255,.55);text-shadow:none}
  7%,22%{color:#fff;text-shadow:0 0 6px #fff,0 0 16px #6aa8ff}
  40%,100%{color:#fff;text-shadow:0 0 4px #fff,0 0 12px #a7d7ff,0 0 26px #438cff,0 0 44px rgba(67,140,255,.7)}}
@keyframes ia-respire{
  from{color:#fff;text-shadow:0 0 4px #fff,0 0 12px #a7d7ff,0 0 26px #438cff,0 0 44px rgba(67,140,255,.7)}
  to{color:#fff;text-shadow:0 0 3px #fff,0 0 8px #a7d7ff,0 0 16px #438cff,0 0 28px rgba(67,140,255,.45)}}
@media (prefers-reduced-motion:reduce){.logo-stage.revealed .agency-word i.aw-ia{animation:none;opacity:1;color:#fff;text-shadow:0 0 6px #fff,0 0 16px #438cff}}
/* après l'explosion, la boule ne revient plus : elle reste cachée tant que le logo est affiché */
.logo-stage.revealed .portal-orb,.logo-stage.revealed.burst .portal-orb{animation:none!important;opacity:0!important;visibility:hidden}