:root{
--ink:#010c28; /* titres sur fond clair */
--ink-soft:#3d485c;
--bg-dark:#010617; /* fond sombre principal */
--bg-dark2:#0b172e;
--bg-light:#f4f6fb; /* fond clair lavande */
--violet:#3679f8; /* accent principal */
--violet-soft:#a1c3ff;
--violet-pale:#d9e7ff;
--white:#ffffff;
--card-radius:20px;
--font:'Poppins','Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg-dark);color:var(--ink);overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
section{position:relative}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
/* ---------- BOUTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:10px 20px;border-radius:14px;font-size:13px;font-weight:600;
transition:transform .25s ease, box-shadow .25s ease, background .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn-white{background:var(--white);color:var(--ink);box-shadow:0 6px 24px rgba(0,0,0,.25)}
.btn-white:hover{box-shadow:0 10px 30px rgba(54,121,248,.35)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:#0f254d}
/* ---------- CTA : texte qui roule vers le bas au survol ---------- */
.btn .roll{display:inline-block;position:relative;overflow:hidden;vertical-align:top}
.btn .roll span{display:block;transition:transform .45s cubic-bezier(.7,0,.25,1)}
.btn .roll span + span{position:absolute;left:0;top:0;transform:translateY(-115%)}
.btn:hover .roll span:first-child{transform:translateY(115%)}
.btn:hover .roll span + span{transform:translateY(0)}
/* ---------- NAVBAR ---------- */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:100;
width:min(1160px,calc(100% - 32px));
display:flex;align-items:center;justify-content:space-between;
padding:10px 14px 10px 20px;border-radius:18px;
background:rgba(4,15,38,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.06);
transition:background .35s ease, box-shadow .35s ease}
.nav.scrolled{background:rgba(2,11,32,.92);box-shadow:0 10px 40px rgba(0,0,0,.45)}
.logo{display:flex;align-items:center;gap:9px;color:#fff;font-weight:800;font-size:20px;letter-spacing:.2px}
.logo small{display:block;font-size:8px;font-weight:500;letter-spacing:4px;color:var(--violet-soft);margin-top:-3px}
.logo-mark{width:30px;height:30px;flex:none}
.nav-links{display:flex;gap:26px;font-size:13.5px;font-weight:500;color:#e2e9f2}
.nav-links a{opacity:.85;transition:opacity .2s,color .2s}
.nav-links a:hover{opacity:1;color:var(--violet-soft)}
.nav-cta{display:flex;align-items:center;gap:10px}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-user{width:40px;height:40px;flex:none;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;transition:transform .25s,box-shadow .25s}
.btn-user:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.3)}
/* Seuil d'origine de la maquette, remplacé plus bas (voir « Robustesse de la barre »). */
.burger{display:none;color:#fff;font-size:22px;padding:6px 10px}
/* Seuil d'origine de la maquette, remplacé plus bas (voir « Robustesse de la barre »). */
/* ---------- MEGA MENU ---------- */
.chev{font-size:9px;opacity:.7;transition:transform .3s;display:inline-block}
.nav.mega-open .chev{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:99;
background:rgba(2,10,32,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.09);border-radius:20px;
padding:30px 34px 22px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 36px;
opacity:0;visibility:hidden;transform:translateY(10px);
transition:opacity .3s ease,transform .3s ease,visibility .3s;
box-shadow:0 30px 80px rgba(0,0,0,.55)}
.nav.mega-open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-col{display:flex;flex-direction:column;gap:4px;padding-left:26px;border-left:1px solid rgba(255,255,255,.09)}
/* Le filet sépare les colonnes : la première n'a rien à sa gauche. */
.mega-col:first-child{padding-left:0;border-left:0}
.mega-item{display:flex;gap:13px;align-items:center;padding:10px 12px;border-radius:12px;transition:background .25s}
.mega-item:hover{background:rgba(255,255,255,.06)}
.mega-item .mi{width:38px;height:38px;flex:none;border-radius:50%;background:var(--violet);
display:flex;align-items:center;justify-content:center}
.mega-item .mi svg{width:18px;height:18px}
.mega-item b{display:block;color:#fff;font-size:14px;font-weight:600}
.mega-item small{display:block;color:#b3a8c7;font-size:11.5px;margin-top:2px}
.mega-sig{align-self:flex-end;margin-top:14px;font-family:Georgia,'Times New Roman',serif;font-style:italic;
font-size:30px;color:#fff;opacity:.9}
@media(max-width:860px){.mega{display:none}}
/* ---------- HERO ---------- */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000}
.hero-wall{position:absolute;inset:-8% -4%;display:flex;gap:14px;z-index:0}
.wall-col{flex:1;display:flex;flex-direction:column;gap:14px;will-change:transform}
.wall-col.up {animation:wallUp 46s linear infinite}
.wall-col.down{animation:wallDown 52s linear infinite}
@keyframes wallUp {from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes wallDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.tile{border-radius:14px;flex:none;width:100%;position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);font-size:26px}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.4))}
.hero-overlay{position:absolute;inset:0;z-index:1;
background:radial-gradient(ellipse at 50% 42%, rgba(1,6,23,.55) 0%, rgba(1,6,23,.82) 55%, rgba(1,6,23,.95) 100%)}
.hero-content{position:relative;z-index:2;text-align:center;padding:140px 24px 120px;max-width:900px}
.hero-social{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:#d2dbe6;margin-bottom:18px;
opacity:0;animation:riseIn .8s ease .2s forwards}
.avatars{display:flex}
.avatars span{width:26px;height:26px;border-radius:50%;border:2px solid #010617;margin-left:-8px;
background:linear-gradient(135deg,#6b92e0,#2c569e)}
.avatars span:first-child{margin-left:0}
.hero h1{font-size:clamp(32px,5vw,52px);font-weight:600;color:#fcf6f7;line-height:1.2;
opacity:0;animation:riseIn .8s ease .35s forwards}
.hero-sub{margin-top:18px;font-size:16px;color:#c6d0de;opacity:0;animation:riseIn .8s ease .5s forwards}
.hero-tag{margin-top:26px;font-size:13px;color:#a8b5c7;opacity:0;animation:riseIn .8s ease .6s forwards}
.hero .btn-white{margin-top:14px;opacity:0;animation:riseIn .8s ease .7s forwards}
/* Grille plutôt que flex-wrap : avec six réassurances, le retour à la ligne
libre donnait 4 + 2. Trois colonnes imposent deux lignes de trois. */
.hero-checks{margin-top:26px;display:grid;grid-template-columns:repeat(3,auto);
justify-content:center;justify-items:center;gap:10px 28px;
font-size:13px;color:#d2dbe6;opacity:0;animation:riseIn .8s ease .85s forwards}
@media(max-width:760px){.hero-checks{grid-template-columns:repeat(2,auto)}}
@media(max-width:460px){.hero-checks{grid-template-columns:1fr;justify-items:start}}
.hero-checks li{list-style:none;display:flex;align-items:center;gap:7px}
.hero-checks svg{width:14px;height:14px;flex:none}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
/* mot rotatif façon "sélection" */
.rot{display:inline-block;position:relative;padding:2px 14px;margin:0 4px;white-space:nowrap;
border:1.5px solid var(--violet-soft);border-radius:3px;color:#fff}
.rot::before,.rot::after,
.rot .h1c::before,.rot .h1c::after{content:"";position:absolute;width:7px;height:7px;background:#fff;
border:1.5px solid var(--violet);border-radius:2px}
.rot::before{top:-5px;left:-5px}
.rot::after{top:-5px;right:-5px}
.rot .h1c::before{bottom:-5px;left:-5px}
.rot .h1c::after{bottom:-5px;right:-5px}
.rot .word{display:inline-block}
.rot .word.out{animation:wordOut .35s ease forwards}
.rot .word.in{animation:wordIn .35s ease forwards}
@keyframes wordOut{to{opacity:0;transform:translateY(-14px)}}
@keyframes wordIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.rot-dark{border-color:var(--violet);background:rgba(54,121,248,.06);color:inherit}
/* ---------- MARQUEE LOGOS ---------- */
.logo-strip{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:3;
width:min(1160px,calc(100% - 32px));padding:20px 0;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.marquee{display:flex;align-items:center;gap:56px;width:max-content;animation:marquee 28s linear infinite}
.marquee span{color:#c6d0de;font-weight:700;font-size:20px;letter-spacing:1px;opacity:.75;white-space:nowrap;
font-family:Georgia,serif;font-style:italic}
.marquee span:nth-child(even){font-family:var(--font);font-style:normal;font-weight:800}
.marquee img{height:34px;width:auto;flex:none;filter:brightness(0) invert(1);opacity:.8;transition:opacity .3s}
.marquee img:hover{opacity:1}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------- REVEAL ON SCROLL ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.65,.3,1),transform .8s cubic-bezier(.2,.65,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}
.reveal.d4{transition-delay:.4s}.reveal.d5{transition-delay:.5s}
/* ---------- SECTION ÉTAPES (clair) ---------- */
.steps{background:linear-gradient(180deg,#edf1fa 0%,var(--bg-light) 30%);padding:110px 0 90px;
border-radius:0 0 0 0}
.steps-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:54px;flex-wrap:wrap}
h2{font-size:clamp(28px,3.4vw,38px);font-weight:600;line-height:1.25;color:var(--ink)}
.steps-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.step-card{grid-column:span 2}
.steps-grid .row2{grid-column:span 3}
.step-card{background:#fff;border-radius:var(--card-radius);padding:26px 26px 30px;position:relative;
box-shadow:0 4px 20px rgba(1,12,40,.05);transition:transform .35s ease,box-shadow .35s ease}
.step-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(54,121,248,.13)}
.step-num{position:absolute;top:-14px;left:22px;width:30px;height:30px;border-radius:9px;background:#fff;
border:1px solid #e6ecf8;display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:14px;color:var(--ink);box-shadow:0 4px 12px rgba(1,12,40,.08)}
.step-visual{height:210px;border-radius:14px;margin-bottom:24px;overflow:hidden;position:relative;
background:linear-gradient(150deg,#e6edfb,#cbdbf5);display:flex;align-items:center;justify-content:center}
.step-visual .mini{background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(1,12,40,.12);padding:14px 18px;
font-size:11px;color:var(--ink-soft);text-align:center;transform:rotate(-2deg);transition:transform .4s ease}
.step-card:hover .mini{transform:rotate(0deg) scale(1.04)}
.step-title{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16.5px;margin-bottom:12px}
.step-title svg{width:18px;height:18px;flex:none;color:var(--violet)}
.step-card p{font-size:13.5px;line-height:1.65;color:var(--ink-soft)}
.step-card.wide{grid-column:span 1}
@media(max-width:900px){.steps-grid{grid-template-columns:1fr 1fr}.step-card,.steps-grid .row2{grid-column:span 1}}
@media(max-width:600px){.steps-grid{grid-template-columns:1fr}.step-card,.steps-grid .row2{grid-column:span 1}}
/* ---------- DÉCORS (sombre) ---------- */
.decors{background:linear-gradient(180deg,#02091f 0%,#0a1833 40%,#122447 100%);padding:110px 0 90px;color:#fff}
.decors h2{color:#fff}
.car-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:36px}
.car-arrows{display:flex;gap:10px}
.arrow{width:38px;height:38px;border-radius:50%;background:#0f1d33;border:1px solid rgba(255,255,255,.14);
color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;transition:background .25s,transform .25s}
.arrow:hover{background:var(--violet);transform:scale(1.08)}
.car-track-wrap{overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);padding:0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.car-track{display:flex;gap:20px;transition:transform .6s cubic-bezier(.25,.7,.25,1)}
.decor-card{flex:0 0 min(23vw,330px);min-width:250px;height:360px;border-radius:22px;overflow:hidden;position:relative;
display:flex;align-items:flex-end;padding:24px;
background:linear-gradient(160deg,#213358,#101b28)}
.decor-card::before{content:"";position:absolute;inset:0;
background:radial-gradient(circle at 65% 25%, rgba(120,166,255,.28), transparent 55%)}
.decor-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(2,7,16,.85))}
.decor-info{position:relative;z-index:2}
.decor-cap{display:inline-block;font-size:11px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);
padding:4px 10px;border-radius:999px;margin-bottom:10px;color:#e2e9f2}
.decor-name{font-size:22px;font-weight:700}
.decor-desc{font-size:13px;color:#c6d0de;margin-top:4px}
.decor-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
/* Les logos d'outils de chaque service, posés sur la carte. Fond clair :
les logos gardent la couleur de leur marque, dont plusieurs sont noires. */
.tool-badges{position:absolute;top:14px;right:14px;z-index:3;display:flex;gap:6px}
.tool-badge{width:26px;height:26px;flex:none;border-radius:8px;background:rgba(255,255,255,.92);
display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(2,7,16,.35)}
.tool-badge svg{width:15px;height:15px}
.tool-badge img{width:15px;height:15px;object-fit:contain}
.dots{display:flex;justify-content:center;gap:8px;margin-top:28px}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .25s,transform .25s;cursor:pointer}
.dot.active{background:#fff;transform:scale(1.25)}
@media(max-width:700px){.decor-card{flex:0 0 86vw}}
/* ---------- TARIFS (clair) ---------- */
.pricing{background:var(--bg-light);padding:110px 0 100px;text-align:center}
.pricing .sub{margin-top:16px;font-size:14px;color:var(--ink-soft)}
.toggle{display:inline-flex;background:#fff;border-radius:999px;padding:5px;margin-top:26px;
box-shadow:0 4px 16px rgba(1,12,40,.07)}
.toggle button{padding:9px 22px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink);transition:background .3s}
.toggle button.active{background:var(--violet-pale)}
.price-shell{background:var(--ink);border-radius:28px;padding:14px;margin-top:44px;text-align:left;
box-shadow:0 30px 80px rgba(1,12,40,.25)}
.price-card{background:#fff;border-radius:20px;padding:40px 42px}
.price-card h3{font-size:24px;font-weight:700;margin-bottom:6px}
.price-card .hint{font-size:12px;color:var(--ink-soft)}
.chip{display:inline-block;background:var(--ink);color:#fff;font-size:12px;font-weight:600;
padding:6px 14px;border-radius:999px;margin:22px 0 10px}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;border-radius:3px;background:var(--ink);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
background:var(--violet-soft);border:3px solid #fff;box-shadow:0 2px 10px rgba(54,121,248,.5);cursor:pointer;transition:transform .2s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.price-feats{margin:26px 0 10px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.price-feats li{list-style:none;display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--ink-soft)}
.price-feats svg{width:14px;height:14px;color:var(--violet);flex:none}
.price-value{font-size:52px;font-weight:800;margin-top:14px}
.price-value small{font-size:22px}
.price-value .per{font-size:13px;font-weight:500;color:var(--ink-soft);margin-left:6px}
.options{padding:26px 30px 18px;color:#fff}
.options h4{font-size:15px;color:#c6d0de;font-weight:600;margin-bottom:16px}
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.opt{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:14px 16px;
transition:background .3s,transform .3s}
.opt:hover{background:rgba(54,121,248,.16);transform:translateY(-3px)}
.opt b{display:block;font-size:13.5px;margin-bottom:3px}
.opt span{font-size:12px;color:var(--violet-soft)}
@media(max-width:760px){.price-feats{grid-template-columns:1fr}.opt-grid{grid-template-columns:1fr 1fr}.price-card{padding:28px}}
/* ---------- BOOSTER (bannière sombre) ---------- */
.booster{background:var(--bg-light);padding:0 0 100px}
.booster-card{background:linear-gradient(140deg,#09183a,#02091f 60%);border-radius:26px;padding:70px 40px;text-align:center;
color:#fff;position:relative;overflow:hidden}
.booster-card::before{content:"";position:absolute;inset:0;
background:radial-gradient(circle at 20% 20%, rgba(54,121,248,.25), transparent 45%),
radial-gradient(circle at 80% 80%, rgba(54,121,248,.2), transparent 45%)}
.booster-card h2{color:#fff;position:relative}
.booster-card p{position:relative;margin:18px auto 30px;max-width:560px;font-size:14.5px;color:#c6d0de;line-height:1.7}
.booster-card p b{color:#fff}
.booster-card .btn{position:relative}
.float-tool{position:absolute;z-index:2;width:64px;height:64px;border-radius:16px;background:#fff;
display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.35);
animation:floatTool 5.5s ease-in-out infinite alternate}
.float-tool img{width:38px;height:38px;object-fit:contain}
.ft1{top:12%;left:4.5%;animation-delay:0s}
.ft6{top:44%;left:3%;width:58px;height:58px;animation-delay:-3.8s}
.ft2{bottom:14%;left:11%;width:56px;height:56px;animation-delay:-1.8s}
.ft3{top:12%;right:4.5%;animation-delay:-3.2s}
.ft4{bottom:14%;right:11%;width:56px;height:56px;animation-delay:-4.5s}
@keyframes floatTool{from{transform:translateY(-8px) rotate(-3deg)}to{transform:translateY(10px) rotate(3deg)}}
.hero .float-tool{z-index:2;box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 28px var(--violet)}
.hft1{top:18%;left:12%;animation-delay:-.8s}
.hft2{top:46%;left:7%;width:56px;height:56px;animation-delay:-2.6s}
.hft6{top:72%;left:12.5%;animation-delay:-3.4s}
.hft3{top:18%;right:12%;animation-delay:-4s}
.hft5{top:46%;right:7%;width:58px;height:58px;animation-delay:-1.5s}
.hft4{top:72%;right:12.5%;width:56px;height:56px;animation-delay:-5.2s}
.ft5{top:44%;right:3%;width:58px;height:58px;animation-delay:-2.4s}
@media(max-width:760px){.float-tool{display:none}}
/* ---------- STUDIOS ---------- */
.studios{background:var(--bg-light);padding:0 0 110px}
.studio-card{flex:0 0 min(54vw,700px);min-width:300px;height:420px;border-radius:22px;position:relative;overflow:hidden;
display:flex;align-items:flex-end;justify-content:space-between;padding:24px;gap:16px;
background:linear-gradient(150deg,#b4c7e6,#6c90c0 60%,#2d4c7a)}
.studio-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(2,8,20,.7))}
.studio-name{position:relative;z-index:2;color:#fff;font-weight:700;font-size:19px;display:flex;align-items:center;gap:8px}
.studio-card .btn{position:relative;z-index:2}
@media(max-width:700px){.studio-card{flex:0 0 86vw;height:340px;flex-direction:column;align-items:flex-start;justify-content:flex-end}}
/* ---------- TÉMOIGNAGES (sombre) ---------- */
/* Fond clair — le même que la section Tarifs au-dessus, pour que les deux
bandes se lisent comme un seul bloc — et carte bleue : c'est la carte qui
porte le contraste, pas la bande. La couleur du texte suit donc la carte,
sans quoi tout ce qui sortirait un jour du conteneur deviendrait illisible. */
.social{background:var(--bg-light);padding:100px 0}
.social-card{background:linear-gradient(180deg,#0c1b33,#050e24);color:#fff;border:1px solid rgba(255,255,255,.06);
border-radius:30px;padding:70px 30px;text-align:center}
.social-card h2{color:#fff;max-width:640px;margin:0 auto}
.social-card .count{margin:26px 0 8px;font-size:13px;color:#c6d0de}
.soc-count{display:flex;align-items:center;justify-content:center;gap:12px}
.soc-photo{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;border:2px solid var(--violet)}
.social-card .count b{color:#fff}
.people{overflow:hidden;margin:18px auto 40px;max-width:820px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.people-track{display:flex;gap:40px;width:max-content;animation:marquee 30s linear infinite}
.person{display:flex;align-items:center;gap:9px;white-space:nowrap}
.person .pav{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#6b92e0,#1f3f6e);flex:none}
.person b{font-size:12.5px;display:block;text-align:left}
.person span{font-size:11px;color:#8f9fb5;display:block;text-align:left}
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:860px;margin:0 auto}
.vid{aspect-ratio:9/13;border-radius:18px;position:relative;overflow:hidden;
background:linear-gradient(165deg,#121e38,#061120);border:1px solid rgba(255,255,255,.07);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
transition:transform .35s ease,box-shadow .35s ease}
.vid:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 50px rgba(54,121,248,.25)}
.vid .play{width:54px;height:54px;border-radius:50%;background:rgba(54,121,248,.9);display:flex;align-items:center;justify-content:center;
box-shadow:0 0 0 0 rgba(54,121,248,.5);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(54,121,248,.45)}70%{box-shadow:0 0 0 18px rgba(54,121,248,0)}100%{box-shadow:0 0 0 0 rgba(54,121,248,0)}}
.vid .tag{background:var(--violet);color:#fff;font-weight:800;font-size:15px;text-transform:uppercase;
padding:6px 14px;transform:rotate(-2deg);letter-spacing:.5px}
.vid .tag small{display:block;font-size:9px;letter-spacing:2px;font-style:italic}
.rev-rows{max-width:980px;margin:50px auto 0;text-align:left}
.rev-row{overflow:hidden;margin-top:18px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rev-track{display:flex;gap:18px;width:max-content;animation:marquee 46s linear infinite}
.rev-track.rev-rev{animation-direction:reverse}
.rev-track .review{width:320px;flex:none}
.rev-row:hover .rev-track{animation-play-state:paused}
.review{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:24px;
transition:transform .3s,background .3s}
.review:hover{transform:translateY(-4px);background:rgba(255,255,255,.07)}
.review .q{font-size:26px;color:var(--violet);font-family:Georgia,serif;line-height:1}
.review p{font-size:13px;line-height:1.7;color:#d2dbe6;margin:8px 0 16px}
.review .who{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600}
.review .pav{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#5c8dd6,#163157)}
@media(max-width:820px){.vids{grid-template-columns:1fr}.rev-track .review{width:270px}}
.social-cta{margin-top:44px}
/* ---------- FAQ ---------- */
.faq{background:#050f28;padding:100px 0;color:#fff}
.faq h2{text-align:center;color:#fff;margin-bottom:50px}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden;
transition:background .3s}
.faq-item:hover{background:rgba(255,255,255,.08)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:20px 22px;color:#fff;font-size:14px;font-weight:600;text-align:left}
.faq-q .plus{font-size:18px;transition:transform .35s ease;color:#c6d0de}
.faq-item.open .plus{transform:rotate(45deg);color:var(--violet-soft)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s ease,padding .45s ease}
.faq-a p{padding:0 22px 20px;font-size:13px;line-height:1.7;color:#c6d0de}
.faq-deco{position:absolute;color:var(--violet);opacity:.5;font-size:40px;transform:rotate(-12deg)}
/* ---------- FOOTER ---------- */
footer{background:linear-gradient(180deg,#050f28,#010513);color:#fff;padding:80px 0 0;position:relative;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:36px;padding-bottom:70px}
.foot-brand > small{display:block;color:#8f9fb5;font-size:11.5px;margin-top:14px;line-height:1.6}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;
transition:background .25s,transform .25s}
.socials a:hover{background:var(--violet);transform:translateY(-3px)}
.foot-col b{display:block;font-size:13px;margin-bottom:16px}
.foot-col a,.foot-col p{display:block;font-size:12.5px;color:#a8b5c7;margin-bottom:10px;transition:color .2s}
/* L'adresse n'est pas cliquable : elle ne prend donc pas l'état de survol. */
.foot-col p{margin-top:0}
.foot-col a:hover{color:#fff}
/* Le filigrane occupe toute la largeur disponible sans jamais la dépasser :
c'est le SVG qui met le texte à l'échelle, plus une taille en vw qui ignorait
la longueur du mot. */
.watermark{display:block;width:100%;height:auto;user-select:none;pointer-events:none;
transform:translateY(14%)}
.watermark text{fill:rgba(255,255,255,.05);font-family:var(--font);font-weight:800;font-size:120px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
/* ═════ PAGE HUB — les typologies de services ═════ */
.hub{min-height:100vh;background:var(--bg-dark);padding:150px 0 60px}
.hub-shell{background:linear-gradient(160deg,#0c1b33,#02091f 70%);border:1px solid rgba(255,255,255,.06);
border-radius:30px;padding:90px 40px 70px;text-align:center;position:relative;overflow:hidden}
.hub-shell::before{content:"";position:absolute;inset:0;
background:radial-gradient(ellipse at 50% 0%, rgba(54,121,248,.18), transparent 55%)}
.hub h1{font-size:clamp(32px,4.6vw,50px);font-weight:600;color:#fcf6f7;line-height:1.25;position:relative}
.hub-sub{margin-top:18px;color:#c6d0de;font-size:15px;position:relative}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1060px;margin:60px auto 0;position:relative}
.hub-card{position:relative;text-align:left;background:rgba(6,17,38,.75);border:1px solid rgba(54,121,248,.35);
border-radius:18px;padding:22px 22px 26px;display:flex;flex-direction:column;gap:0;
box-shadow:0 0 34px rgba(54,121,248,.16), inset 0 0 40px rgba(54,121,248,.05);
transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease}
.hub-card:hover{transform:translateY(-6px);border-color:rgba(54,121,248,.75);
box-shadow:0 0 55px rgba(54,121,248,.35), inset 0 0 40px rgba(54,121,248,.08)}
.hub-arrow{position:absolute;top:18px;right:18px;color:#fff;font-size:17px;opacity:.85;transition:transform .3s}
.hub-card:hover .hub-arrow{transform:translate(3px,-3px)}
.hub-visual{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:20px}
.hub-visual span{height:120px;border-radius:10px;display:block;opacity:.85}
.hub-visual span:nth-child(2){transform:translateY(10px)}
.hub-kicker{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:15px;color:var(--violet-soft);margin-bottom:6px}
.hub-card h2{font-size:21px;font-weight:700;color:#fff;line-height:1.3}
.hub-card p{font-size:13px;color:#c6d0de;margin:8px 0 14px;line-height:1.6}
.hub-list{list-style:none;margin:0 0 20px;display:flex;flex-direction:column;gap:7px}
.hub-list li{font-size:12.5px;color:#d2dbe6;display:flex;gap:8px;align-items:center}
.hub-list svg{width:13px;height:13px;flex:none;color:var(--violet-soft)}
.hub-card .btn{align-self:flex-start;margin-top:auto}
.hub-back{margin-top:56px;position:relative}
@media(max-width:900px){.hub-grid{grid-template-columns:1fr;max-width:440px}}
/* ═════ PAGE TYPOLOGIE — hero, liste de services, atouts ═════ */
.fam-hero{background:var(--bg-dark);padding:170px 0 90px;text-align:center;position:relative;overflow:hidden}
.fam-hero::before{content:"";position:absolute;inset:0;
background:radial-gradient(ellipse at 50% -10%, rgba(54,121,248,.25), transparent 55%)}
.fam-kicker{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:20px;color:var(--violet-soft);position:relative}
.fam-hero h1{font-size:clamp(32px,5vw,52px);font-weight:600;color:#fcf6f7;line-height:1.25;margin-top:10px;position:relative}
.fam-hero .sub{margin:18px auto 28px;max-width:620px;color:#c6d0de;font-size:15.5px;line-height:1.7;position:relative}
.fam-hero .btn{position:relative}
.fam-checks{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-size:13px;color:#d2dbe6;position:relative;list-style:none}
.fam-checks li{display:flex;align-items:center;gap:7px}
.fam-checks svg{width:14px;height:14px;flex:none}
.svc{background:var(--bg-light);padding:90px 0}
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;margin-bottom:80px}
.svc-row:last-child{margin-bottom:0}
.svc-row.flip .svc-visual{order:2}
.svc-visual{height:340px;border-radius:22px;position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);
font-size:14px;letter-spacing:1px;text-transform:uppercase;
box-shadow:0 24px 60px rgba(1,12,40,.18)}
.svc-tag{display:inline-block;font-size:11px;font-weight:600;background:var(--violet-pale);color:var(--ink);
padding:5px 12px;border-radius:999px;margin-bottom:14px}
.svc-info h2{font-size:clamp(24px,2.8vw,32px)}
.svc-info p{margin:14px 0 18px;font-size:14px;color:var(--ink-soft);line-height:1.75}
.svc-feats{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.svc-feats li{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--ink-soft)}
.svc-feats svg{width:14px;height:14px;color:var(--violet);flex:none}
@media(max-width:860px){.svc-row{grid-template-columns:1fr}.svc-row.flip .svc-visual{order:0}.svc-visual{height:240px}}
.convert{background:linear-gradient(180deg,#02091f,#0a1833);padding:100px 0;color:#fff;text-align:center}
.convert h2{color:#fff}
.convert .lead{margin:14px auto 50px;max-width:560px;color:#c6d0de;font-size:14.5px;line-height:1.7}
.cv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cv-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:18px;
padding:28px 22px;text-align:left;transition:transform .3s,background .3s}
.cv-card:hover{transform:translateY(-5px);background:rgba(54,121,248,.14)}
.cv-card .ic{width:40px;height:40px;border-radius:12px;background:var(--violet);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cv-card .ic svg{width:19px;height:19px}
.cv-card b{display:block;font-size:15px;margin-bottom:8px}
.cv-card p{font-size:12.5px;color:#c6d0de;line-height:1.65}
@media(max-width:900px){.cv-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cv-grid{grid-template-columns:1fr}}
.fam-cta{background:var(--bg-light);padding:90px 0}
/* ═════ FICHE MICRO-SERVICE — hero produit, problèmes, process, autres services ═════ */
.ms-hero{background:var(--bg-dark);padding:150px 0 90px;position:relative;overflow:hidden}
.ms-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 0%, rgba(54,121,248,.22), transparent 55%)}
.ms-hero .container{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:start}
.ms-visual{position:sticky;top:110px}
.ms-visual-main{height:360px;border-radius:22px;background:linear-gradient(150deg,hsl(219,45%,34%),hsl(240,45%,12%));
display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);font-size:13px;
letter-spacing:1px;text-transform:uppercase;box-shadow:0 0 60px rgba(54,121,248,.25)}
.ms-badges{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.ms-badge{flex:1;min-width:130px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
border-radius:12px;padding:12px 14px;font-size:11.5px;color:#cfc6de;display:flex;align-items:center;gap:8px}
.ms-badge svg{width:15px;height:15px;flex:none;color:var(--violet-soft)}
.ms-cat{display:inline-block;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
color:var(--violet-soft);background:rgba(54,121,248,.14);border:1px solid rgba(54,121,248,.35);
padding:5px 12px;border-radius:999px;margin-bottom:16px}
.ms-hero h1{font-size:clamp(28px,3.8vw,42px);font-weight:600;color:#fcf6f7;line-height:1.25}
.ms-desc{margin:16px 0 22px;color:#cfc6de;font-size:14.5px;line-height:1.75}
.ms-price-row{display:flex;align-items:baseline;gap:14px;margin:6px 0 4px}
.ms-price{font-size:46px;font-weight:800;color:#fff}
.ms-price small{font-size:22px}
.ms-price-note{font-size:12.5px;color:#9d8fb5}
.ms-delay{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--violet-soft);font-weight:600;margin-bottom:22px}
.ms-delay svg{width:15px;height:15px}
.ms-incl{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:26px}
.ms-incl li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:#d9d2e6;line-height:1.5}
.ms-incl svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--violet-soft)}
.ms-ctas{display:flex;gap:12px;flex-wrap:wrap}
.ms-reassure{margin-top:18px;font-size:12px;color:#9d8fb5}
@media(max-width:900px){.ms-hero .container{grid-template-columns:1fr}.ms-visual{position:static}.ms-visual-main{height:240px}}
.ms-covered{background:var(--bg-light);padding:100px 0}
.ms-covered h2,.ms-how h2,.ms-cross h2{text-align:center}
.ms-covered .lead{text-align:center;margin:14px auto 50px;max-width:560px;color:var(--ink-soft);font-size:14px}
.pb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pb-card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 4px 16px rgba(21,1,40,.05);
transition:transform .3s,box-shadow .3s;font-size:13px}
.pb-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(54,121,248,.14)}
.pb-card .em{font-size:22px;display:block;margin-bottom:10px}
.pb-card b{display:block;font-size:13.5px;margin-bottom:6px;color:var(--ink)}
.pb-card p{font-size:12px;color:var(--ink-soft);line-height:1.6}
@media(max-width:900px){.pb-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pb-grid{grid-template-columns:1fr}}
.ms-how{background:linear-gradient(180deg,#020a20,#0a1733);padding:100px 0;color:#fff}
.ms-how h2{color:#fff;margin-bottom:56px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto}
.how-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:28px;
position:relative;transition:transform .3s,background .3s}
.how-card:hover{transform:translateY(-5px);background:rgba(54,121,248,.13)}
.how-num{width:34px;height:34px;border-radius:50%;background:var(--violet);display:flex;align-items:center;
justify-content:center;font-weight:700;font-size:14px;margin-bottom:16px;box-shadow:0 0 18px rgba(54,121,248,.5)}
.how-card b{display:block;font-size:15px;margin-bottom:8px}
.how-card p{font-size:12.5px;color:#cfc6de;line-height:1.65}
@media(max-width:800px){.how-grid{grid-template-columns:1fr}}
.ms-cross{background:var(--bg-light);padding:100px 0}
.ms-cross .lead{text-align:center;margin:14px auto 46px;max-width:520px;color:var(--ink-soft);font-size:14px}
.cross-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cross-card{background:#fff;border-radius:16px;padding:20px 22px;box-shadow:0 4px 16px rgba(21,1,40,.05);
display:flex;flex-direction:column;gap:4px;transition:transform .3s,box-shadow .3s}
.cross-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(54,121,248,.14)}
.cross-card b{font-size:13.5px;color:var(--ink)}
.cross-card span{font-size:13px;color:var(--violet);font-weight:700}
.cross-card em{font-style:normal;font-size:11px;color:var(--ink-soft)}
@media(max-width:900px){.cross-grid{grid-template-columns:1fr 1fr}}
.msfaq{background:#050f28;padding:100px 0;color:#fff}
.msfaq h2{color:#fff;text-align:center;margin-bottom:50px}
.ms-final{background:#050f28;padding:0 0 100px}
/* ═════ SEO LOCAL — hero à compteurs et index à onglets ═════ */
.lo-hero{background:var(--bg-dark);padding:170px 0 70px;text-align:center;position:relative;overflow:hidden}
.lo-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%, rgba(54,121,248,.25), transparent 55%)}
.lo-hero h1{font-size:clamp(30px,4.6vw,48px);font-weight:600;color:#fcf6f7;line-height:1.25;position:relative}
.lo-hero .sub{margin:18px auto 0;max-width:640px;color:#c6d0de;font-size:15px;line-height:1.75;position:relative}
.lo-stats{display:flex;justify-content:center;gap:36px;margin-top:34px;position:relative;flex-wrap:wrap}
.lo-stat b{display:block;font-size:30px;color:#fff;font-weight:700}
.lo-stat span{font-size:12px;color:#8f9fb5;text-transform:uppercase;letter-spacing:1px}
.lo-body{background:var(--bg-light);padding:70px 0 100px}
.lo-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:50px}
.lo-tab{padding:11px 22px;border-radius:999px;font-size:13.5px;font-weight:600;background:#fff;color:var(--ink);
box-shadow:0 3px 12px rgba(1,12,40,.06);transition:background .25s,color .25s,transform .25s}
.lo-tab:hover{transform:translateY(-2px)}
.lo-tab.active{background:var(--ink);color:#fff}
.lo-panel{display:none}
.lo-panel.active{display:block}
.lo-region{background:#fff;border-radius:18px;padding:26px 28px;margin-bottom:18px;box-shadow:0 4px 18px rgba(1,12,40,.05)}
.lo-region h2{font-size:17px;font-weight:700;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.lo-region h2 .pin{width:28px;height:28px;flex:none;border-radius:9px;background:var(--violet-pale);color:var(--violet);
display:flex;align-items:center;justify-content:center}
.lo-region h2 .pin svg{width:14px;height:14px}
.lo-chips{display:flex;flex-wrap:wrap;gap:8px}
.lo-chips a{font-size:12.5px;color:var(--ink-soft);background:var(--bg-light);border:1px solid #e2eaf5;
padding:7px 13px;border-radius:999px;transition:all .22s}
.lo-chips a:hover{background:var(--violet);border-color:var(--violet);color:#fff;transform:translateY(-2px)}
.lo-note{text-align:center;margin-top:40px;font-size:12.5px;color:var(--ink-soft)}
.lo-cta{background:var(--bg-light);padding:0 0 100px}
/* ═════ PAGE SERVICE — hero, inclus, timeline, tarif unique ═════ */
.sv-hero{background:var(--bg-dark);padding:170px 0 90px;position:relative;overflow:hidden}
.sv-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%, rgba(54,121,248,.25), transparent 55%)}
.sv-hero .container{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.crumb{font-size:12.5px;color:#8f9fb5;margin-bottom:16px}
.crumb a{color:var(--violet-soft)}
.crumb a:hover{text-decoration:underline}
.sv-hero h1{font-size:clamp(30px,4.2vw,46px);font-weight:600;color:#fcf6f7;line-height:1.25}
.sv-hero .sub{margin:18px 0 26px;color:#c6d0de;font-size:15px;line-height:1.75;max-width:520px}
.sv-hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.sv-hero-visual{height:400px;border-radius:22px;position:relative;overflow:hidden;
background:linear-gradient(150deg,hsl(215,42%,36%),hsl(238,45%,12%));
display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);
font-size:13px;letter-spacing:1px;text-transform:uppercase;
box-shadow:0 0 60px rgba(54,121,248,.25)}
.sv-note{margin-top:18px;font-size:12px;color:#8f9fb5}
.sv-hero-wrap{position:relative}
.sv-hero .float-tool{z-index:2;box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 28px var(--violet)}
.svf1{top:-18px;right:-14px;animation-delay:-.8s}
.svf2{bottom:-16px;left:-16px;width:56px;height:56px;animation-delay:-2.6s}
@media(max-width:900px){.sv-hero .container{grid-template-columns:1fr}.sv-hero-visual{height:260px}}
.inc{background:var(--bg-light);padding:100px 0}
.inc h2,.tl h2,.svfaq h2{text-align:center}
.inc .lead{text-align:center;margin:14px auto 54px;max-width:560px;color:var(--ink-soft);font-size:14px;line-height:1.7}
.inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.inc-card{background:#fff;border-radius:18px;padding:26px;box-shadow:0 4px 20px rgba(1,12,40,.05);
transition:transform .3s,box-shadow .3s}
.inc-card:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(54,121,248,.13)}
.inc-card .ic{width:42px;height:42px;border-radius:12px;background:var(--violet-pale);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--violet)}
.inc-card .ic svg{width:20px;height:20px}
.inc-card b{display:block;font-size:15px;margin-bottom:8px;color:var(--ink)}
.inc-card p{font-size:12.5px;color:var(--ink-soft);line-height:1.65}
@media(max-width:860px){.inc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.inc-grid{grid-template-columns:1fr}}
.tl{background:linear-gradient(180deg,#02091f,#0a1833);padding:100px 0;color:#fff}
.tl h2{color:#fff;margin-bottom:60px}
.tl-list{max-width:720px;margin:0 auto;position:relative;display:flex;flex-direction:column;gap:0}
.tl-list::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;
background:linear-gradient(180deg,var(--violet),rgba(54,121,248,.1))}
.tl-item{position:relative;padding:0 0 42px 64px}
.tl-item:last-child{padding-bottom:0}
.tl-num{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--violet);
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
box-shadow:0 0 22px rgba(54,121,248,.5)}
.tl-item b{display:block;font-size:16px;margin-bottom:6px}
.tl-date{font-size:11.5px;color:var(--violet-soft);display:block;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.tl-item p{font-size:13px;color:#c6d0de;line-height:1.7;max-width:540px}
.sv-pricing{background:var(--bg-light);padding:100px 0;text-align:center}
.svfaq{background:#050f28;padding:100px 0;color:#fff}
.svfaq h2{color:#fff;margin-bottom:50px}
.sv-cta{background:#050f28;padding:0 0 100px}
/* ═════ BLOG — hub d'articles filtrable ═════ */
.bg-hero{background:var(--bg-dark);padding:160px 0 70px;text-align:center;position:relative;overflow:hidden}
.bg-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%, rgba(54,121,248,.22), transparent 55%)}
.bg-hero h1{font-size:clamp(30px,4.4vw,46px);font-weight:600;color:#fcf6f7;line-height:1.25;position:relative}
.bg-hero .sub{margin:16px auto 0;max-width:560px;color:#cfc6de;font-size:14.5px;line-height:1.7;position:relative}
.blog-body{background:var(--bg-light);padding:60px 0 100px}
.cat-filters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:46px}
.cat-btn{padding:10px 20px;border-radius:999px;font-size:13px;font-weight:600;background:#fff;color:var(--ink);
box-shadow:0 3px 12px rgba(21,1,40,.06);transition:background .25s,color .25s,transform .25s}
.cat-btn:hover{transform:translateY(-2px)}
.cat-btn.active{background:var(--ink);color:#fff}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 18px rgba(21,1,40,.05);
display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease,opacity .35s ease}
.post:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(54,121,248,.14)}
.post.hidden{display:none}
.post-visual{height:170px;position:relative;display:flex;align-items:flex-end;padding:14px}
.post-cat{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:rgba(0,0,0,.45);
color:#fff;border:1px solid rgba(255,255,255,.25);padding:5px 11px;border-radius:999px}
.post-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-body h2{font-size:16px;font-weight:700;line-height:1.4;color:var(--ink);margin-bottom:8px}
.post-body p{font-size:12.5px;color:var(--ink-soft);line-height:1.65;flex:1}
.post-meta{display:flex;gap:14px;margin-top:16px;font-size:11px;color:#9d8fb5}
@media(max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.posts{grid-template-columns:1fr}}
.blog-cta{background:var(--bg-light);padding:0 0 100px}
/* ═════ ARTICLE — gabarit rédactionnel ═════ */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--violet);z-index:200;transition:width .1s linear}
.art-hero{background:var(--bg-dark);padding:150px 0 60px;position:relative;overflow:hidden}
.art-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%, rgba(54,121,248,.2), transparent 55%)}
.art-hero .container{position:relative;max-width:1128px}
.art-cat{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
background:rgba(54,121,248,.16);border:1px solid rgba(54,121,248,.4);color:var(--violet-soft);
padding:6px 13px;border-radius:999px;margin-bottom:18px}
.art-hero h1{font-size:clamp(28px,4vw,42px);font-weight:600;color:#fcf6f7;line-height:1.3}
.art-meta{display:flex;align-items:center;gap:18px;margin-top:22px;font-size:12.5px;color:#9d8fb5;flex-wrap:wrap}
.art-meta .pav{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#5c8bd6,#162e57);flex:none}
.art-meta .meta-i{display:inline-flex;align-items:center;gap:7px;color:#9d8fb5}
.art-meta .meta-i svg{color:var(--violet-soft)}
.art-meta b{color:#fff;display:block;font-size:13px}
.art-wrap{background:var(--bg-light);padding:70px 0 100px}
/* Colonne unique : le nouveau gabarit d'article abandonne le sommaire
latéral au profit d'une lecture centrée, carte auteur en dessous. */
.art-grid{max-width:760px;margin:0 auto}
.toc{position:sticky;top:110px;background:#fff;border-radius:16px;padding:22px 22px 18px;box-shadow:0 4px 16px rgba(21,1,40,.05)}
.toc b{display:block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.toc a{display:block;font-size:12px;color:var(--ink-soft);padding:6px 0 6px 12px;border-left:2px solid #eee6f8;line-height:1.4;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--violet)}
.toc a.active{color:var(--violet);border-color:var(--violet);font-weight:600}
.art{max-width:660px}
.art p{font-size:14.5px;color:#3d3550;line-height:1.85;margin-bottom:18px}
.art .lead{font-size:16px;color:var(--ink);font-weight:500}
.art h2{font-size:22px;margin:44px 0 14px;scroll-margin-top:110px;display:flex;gap:12px;align-items:baseline}
.art h2 .num{color:var(--violet);font-weight:800}
.art-tip{background:#fff;border-left:3px solid var(--violet);border-radius:0 14px 14px 0;padding:18px 22px;margin:24px 0;
font-size:13.5px;color:var(--ink-soft);box-shadow:0 4px 14px rgba(21,1,40,.05)}
.art-tip b{color:var(--ink)}
.art-cta{background:var(--ink);border-radius:18px;padding:30px 32px;margin:40px 0;color:#fff;
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.art-cta b{font-size:16px;display:block;margin-bottom:4px}
.art-cta > div > span{font-size:12.5px;color:#b9c4de}
.author{display:flex;gap:18px;background:#fff;border-radius:18px;padding:26px;margin-top:56px;box-shadow:0 4px 16px rgba(21,1,40,.05)}
.author .pav{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#5c8bd6,#162e57);flex:none;object-fit:cover}
.author b{font-size:15px;display:block;margin-bottom:4px}
.author p{font-size:12.5px;margin:0;color:var(--ink-soft);line-height:1.7}
.related{max-width:1080px;margin:70px auto 0}
.related h3{font-size:20px;margin-bottom:24px}
.related .post h2{margin:0;display:block}
@media(max-width:900px){.toc{position:static;margin-bottom:10px}}
/* cartes articles (À lire ensuite) */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 18px rgba(21,1,40,.05);
display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease,opacity .35s ease}
.post:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(54,121,248,.14)}
.post.hidden{display:none}
.post-visual{height:170px;position:relative;display:flex;align-items:flex-end;padding:14px}
.post-cat{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:rgba(0,0,0,.45);
color:#fff;border:1px solid rgba(255,255,255,.25);padding:5px 11px;border-radius:999px}
.post-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-body h2{font-size:16px;font-weight:700;line-height:1.4;color:var(--ink);margin-bottom:8px}
.post-body p{font-size:12.5px;color:var(--ink-soft);line-height:1.65;flex:1}
.post-meta{display:flex;gap:14px;margin-top:16px;font-size:11px;color:#9d8fb5}
@media(max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.posts{grid-template-columns:1fr}}
/* ═════ ÉTUDE DE CAS — récit de projet ═════ */
.cs-hero{background:var(--bg-dark);padding:150px 0 80px;position:relative;overflow:hidden}
.cs-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%, rgba(54,121,248,.22), transparent 55%)}
.cs-hero .container{position:relative}
.cs-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font);font-size:12.5px;
font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--violet-soft);position:relative}
.cs-kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--violet)}
.cs-hero h1{font-size:clamp(30px,4.4vw,48px);font-weight:600;color:#fcf6f7;line-height:1.25;margin-top:10px;max-width:820px}
.cs-meta{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 40px}
.cs-chip{font-size:12px;color:#d9d2e6;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
padding:7px 14px;border-radius:999px}
.cs-chip b{color:#fff;font-weight:600}
.cs-cover{height:420px;border-radius:22px;position:relative;overflow:hidden;
background:linear-gradient(150deg,#1a1a1a,#000 60%);border:1px solid rgba(255,255,255,.08);
display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);
font-size:13px;letter-spacing:1px;text-transform:uppercase;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.cs-cover .live{position:absolute;top:18px;right:18px}
.cs-cover{align-items:flex-start;justify-content:stretch}
.cs-scroll{width:100%;display:block;animation:csScroll 70s ease-in-out infinite alternate}
.cs-cover:hover .cs-scroll{animation-play-state:paused}
@keyframes csScroll{from{transform:translateY(0)}to{transform:translateY(calc(-100% + 420px))}}
@media(max-width:700px){.cs-cover{height:240px}@keyframes csScroll{from{transform:translateY(0)}to{transform:translateY(calc(-100% + 240px))}}}
.cs-body{background:var(--bg-light);padding:90px 0}
.cs-grid{display:grid;grid-template-columns:2fr 1fr;gap:60px;align-items:start}
.cs-section{margin-bottom:56px}
.cs-section:last-child{margin-bottom:0}
.cs-section h2{font-size:24px;margin-bottom:16px}
.cs-section p{font-size:14px;color:var(--ink-soft);line-height:1.8;margin-bottom:12px}
.cs-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:8px}
.cs-list li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.cs-list svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--violet)}
.cs-list b{color:var(--ink)}
.cs-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
.cs-card{background:#fff;border-radius:18px;padding:24px;box-shadow:0 4px 18px rgba(21,1,40,.06)}
.cs-card h3{font-size:14px;font-weight:700;margin-bottom:14px;color:var(--ink)}
.cs-facts{list-style:none;display:flex;flex-direction:column;gap:10px}
.cs-facts li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink-soft);
border-bottom:1px dashed #eee6f8;padding-bottom:9px}
.cs-facts li:last-child{border:none;padding-bottom:0}
.cs-facts b{color:var(--ink);text-align:right}
.cs-stack{display:flex;flex-wrap:wrap;gap:7px}
.cs-stack span{font-size:11.5px;background:var(--violet-pale);color:var(--ink);padding:5px 11px;border-radius:999px;font-weight:600}
.cs-side .btn{width:100%;text-align:center;justify-content:center}
@media(max-width:900px){.cs-grid{grid-template-columns:1fr}.cs-side{position:static}}
.cs-results{background:linear-gradient(180deg,#020a20,#0a1733);padding:100px 0;color:#fff;text-align:center}
.cs-results h2{color:#fff}
.cs-results .lead{margin:14px auto 50px;max-width:540px;color:#cfc6de;font-size:14px}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:860px;margin:0 auto}
.res-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:34px 22px;
transition:transform .3s,background .3s}
.res-card:hover{transform:translateY(-5px);background:rgba(54,121,248,.14)}
.res-card b{display:block;font-size:38px;font-weight:800;color:#fff}
.res-card b em{font-style:normal;font-size:13px;opacity:.5}
.res-card span{font-size:12.5px;color:#cfc6de;display:block;margin-top:8px;line-height:1.5}
@media(max-width:700px){.res-grid{grid-template-columns:1fr}}
.cs-quote{max-width:680px;margin:60px auto 0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
border-radius:20px;padding:34px;text-align:left}
.cs-quote .q{font-size:30px;color:var(--violet);font-family:Georgia,serif;line-height:1}
.cs-quote p{font-size:14px;color:#d9d2e6;line-height:1.8;margin:10px 0 18px}
.cs-quote .who{display:flex;align-items:center;gap:11px;font-size:13px;font-weight:600}
.cs-quote .pav{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#5c8bd6,#162e57)}
.cs-final{background:var(--bg-light);padding:90px 0}
/* ═════ CONNEXION — espace client ═════ */
.login{min-height:100vh;background:var(--bg-dark);padding:150px 0 90px;position:relative;overflow:hidden;
display:flex;align-items:center}
.login::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%, rgba(54,121,248,.22), transparent 55%)}
.login-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:960px;margin:0 auto;align-items:stretch}
.login-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:44px 40px;
backdrop-filter:blur(10px)}
.login-card h1{font-size:26px;font-weight:600;color:#fff;margin-bottom:6px}
.login-card .sub{font-size:13px;color:#9d8fb5;margin-bottom:30px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:600;color:#d9d2e6;margin-bottom:7px}
.field input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:12px;
padding:13px 16px;color:#fff;font-family:var(--font);font-size:13.5px;outline:none;transition:border-color .25s, box-shadow .25s}
.field input::placeholder{color:#6f6488}
.field input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(54,121,248,.2)}
.login-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 22px}
.login-row label{display:flex;align-items:center;gap:7px;font-size:12px;color:#9d8fb5;cursor:pointer}
.login-row a{font-size:12px;color:var(--violet-soft)}
.login-row a:hover{text-decoration:underline}
.login-card .btn{width:100%;justify-content:center}
.login-note{margin-top:18px;font-size:11.5px;color:#6f6488;text-align:center}
.access-card{background:linear-gradient(150deg,#0d1d40,#050f28 70%);border:1px solid rgba(54,121,248,.3);
border-radius:22px;padding:44px 40px;display:flex;flex-direction:column;
box-shadow:0 0 40px rgba(54,121,248,.15)}
.access-kicker{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:3px;
text-transform:uppercase;color:var(--violet-soft);margin-bottom:14px}
.access-kicker::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--violet)}
.access-card h2{font-size:21px;color:#fff;line-height:1.4}
.access-card p{font-size:13px;color:#cfc6de;line-height:1.75;margin:14px 0 20px}
.access-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.access-list li{display:flex;gap:9px;align-items:center;font-size:12.5px;color:#d9d2e6}
.access-list svg{width:14px;height:14px;flex:none;color:var(--violet-soft)}
.access-card .btn{margin-top:auto;justify-content:center}
@media(max-width:860px){.login-grid{grid-template-columns:1fr}}
/* ═════ BOUTONS FLOTTANTS — panier et prise de rendez-vous ═════ */
.fab-stack{position:fixed;right:18px;bottom:22px;z-index:150;
display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.fab{display:flex;align-items:center;flex-direction:row-reverse;height:40px;width:40px;
border-radius:999px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35);
transition:width .4s cubic-bezier(.65,0,.25,1);white-space:nowrap}
.fab:hover{width:186px}
.fab-ic{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;position:relative}
.fab-ic svg{width:17px;height:17px}
.fab-label{font-size:12.5px;font-weight:600;padding-left:16px;opacity:0;transform:translateX(8px);
transition:opacity .3s ease .1s,transform .3s ease .1s}
.fab:hover .fab-label{opacity:1;transform:translateX(0)}
.fab-cart{background:#fff;color:var(--ink)}
.fab-call{background:var(--violet);color:#fff;box-shadow:0 10px 30px rgba(54,121,248,.45)}
.fab-wrap{position:relative}
.fab-qty{position:absolute;top:-5px;right:-5px;z-index:2;pointer-events:none;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
background:var(--violet);color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
border:1.5px solid #fff}
@media(max-width:700px){.fab-stack{right:10px;bottom:14px}}
/* ═════ HUB SERVICES & MICRO-SERVICES — familles, filtres, process ═════ */
.hub2-hero{background:var(--bg-dark);padding:165px 0 80px;text-align:center;position:relative;overflow:hidden}
.hub2-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%, rgba(54,121,248,.25), transparent 55%)}
.hub2-hero h1{font-size:clamp(30px,4.4vw,48px);font-weight:600;color:#fcf6f7;line-height:1.25;position:relative;max-width:820px;margin:0 auto}
.hub2-hero .sub{margin:18px auto 0;max-width:600px;color:#cfc6de;font-size:14.5px;line-height:1.75;position:relative}
.hub2-hero .btn{position:relative;margin-top:26px}
.hub2-body{background:var(--bg-light);padding:80px 0 100px}
.fam-block{margin-bottom:70px}
.fam-block:last-child{margin-bottom:0}
.fam-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.fam-head .k{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--violet);margin-bottom:8px}
.fam-head .k::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--violet)}
.fam-head h2{font-size:24px}
.fam-head p{font-size:13px;color:var(--ink-soft);margin-top:6px;max-width:560px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-card{background:#fff;border-radius:18px;padding:26px;box-shadow:0 4px 18px rgba(21,1,40,.05);
display:flex;flex-direction:column;gap:10px;position:relative;transition:transform .3s,box-shadow .3s}
.svc-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(54,121,248,.14)}
.svc-card .arr{position:absolute;top:20px;right:20px;color:var(--violet);opacity:.7;transition:transform .3s}
.svc-card:hover .arr{transform:translate(3px,-3px)}
.hub2-ic{width:44px;height:44px;border-radius:13px;background:var(--violet);display:flex;align-items:center;justify-content:center;color:#fff}
.hub2-ic svg{width:20px;height:20px}
.svc-card b{font-size:15.5px;color:var(--ink)}
.svc-card p{font-size:12.5px;color:var(--ink-soft);line-height:1.65;flex:1}
.svc-card .price{font-size:13px;font-weight:700;color:var(--violet)}
.svc-card .tagd{font-size:11px;color:#9d8fb5}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.svc-grid{grid-template-columns:1fr}}
.hub2-cta{background:var(--bg-light);padding:0 0 100px}
.mfilters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:44px}
.mf{padding:10px 20px;border-radius:999px;font-size:13px;font-weight:600;background:#fff;color:var(--ink);
box-shadow:0 3px 12px rgba(21,1,40,.06);transition:background .25s,color .25s,transform .25s;cursor:pointer}
.mf:hover{transform:translateY(-2px)}
.mf.active{background:var(--ink);color:#fff}
.mstrip{background:linear-gradient(180deg,#020a20,#0a1733);padding:80px 0;color:#fff;text-align:center}
.mstrip h2{color:#fff;margin-bottom:44px}
.mstrip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:920px;margin:0 auto}
.mstrip-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;text-align:left}
.mstrip-card .n{width:30px;height:30px;border-radius:50%;background:var(--violet);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;margin-bottom:12px}
.mstrip-card b{display:block;font-size:14px;margin-bottom:6px}
.mstrip-card p{font-size:12px;color:#cfc6de;line-height:1.65}
@media(max-width:800px){.mstrip-grid{grid-template-columns:1fr}}
/* ═════ OUTILS IA — présentation, accès, tarifs ═════ */
.tools-hero{background:var(--bg-dark);padding:170px 0 90px;text-align:center;position:relative;overflow:hidden}
.tools-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%, rgba(54,121,248,.28), transparent 55%)}
.tools-hero h1{font-size:clamp(32px,4.8vw,52px);font-weight:600;color:#fcf6f7;line-height:1.22;position:relative;max-width:860px;margin:0 auto}
.tools-hero .sub{margin:20px auto 30px;max-width:640px;color:#cfc6de;font-size:15.5px;line-height:1.75;position:relative}
.tools-hero .btn{position:relative}
.tools-badges{display:flex;justify-content:center;gap:12px;margin-top:34px;flex-wrap:wrap;position:relative}
.t-badge{font-size:12px;color:#d9d2e6;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
padding:8px 16px;border-radius:999px;display:flex;align-items:center;gap:8px}
.t-badge svg{width:14px;height:14px;color:var(--violet-soft)}
.tool{padding:100px 0;background:var(--bg-light)}
section.tool:nth-of-type(3){background:linear-gradient(180deg,#020a20,#0a1733)}
section.tool:nth-of-type(3) h2{color:#fff}
section.tool:nth-of-type(3) .pitch{color:#cfc6de}
section.tool:nth-of-type(3) .tool-feats li{color:#d9d2e6}
section.tool:nth-of-type(3) .tool-feats svg{color:var(--violet-soft)}
section.tool:nth-of-type(3) .tool-price-chip{background:rgba(54,121,248,.2);color:#fff;border:1px solid rgba(54,121,248,.45)}
section.tool:nth-of-type(3) .btn-dark{background:#fff;color:var(--ink)}
.tool-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.tool-row.flip .tool-visual{order:2}
.tool-visual{height:360px;border-radius:22px;position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);
font-size:13px;letter-spacing:1px;text-transform:uppercase;box-shadow:0 24px 60px rgba(21,1,40,.18)}
.tool-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:3px;
text-transform:uppercase;color:var(--violet);margin-bottom:12px}
.tool-kicker::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--violet)}
.tool-info h2{font-size:clamp(26px,3vw,34px);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tool-price-chip{font-size:13px;font-weight:700;background:var(--violet-pale);color:var(--ink);padding:6px 14px;border-radius:999px}
.tool-info .pitch{margin:14px 0 20px;font-size:14px;color:var(--ink-soft);line-height:1.8}
.tool-feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;margin-bottom:26px}
.tool-feats li{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-soft);line-height:1.5}
.tool-feats svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--violet)}
@media(max-width:860px){.tool-row{grid-template-columns:1fr}.tool-row.flip .tool-visual{order:0}.tool-visual{height:240px}.tool-feats{grid-template-columns:1fr}}
.access{background:linear-gradient(180deg,#020a20,#0a1733);padding:100px 0;color:#fff;text-align:center}
.access h2{color:#fff}
.access .lead{margin:16px auto 54px;max-width:600px;color:#cfc6de;font-size:14.5px;line-height:1.75}
.access .lead b{color:#fff}
.acc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto}
.acc-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:30px 26px;
text-align:left;transition:transform .3s,background .3s}
.acc-card:hover{transform:translateY(-5px);background:rgba(54,121,248,.13)}
.acc-num{width:34px;height:34px;border-radius:50%;background:var(--violet);display:flex;align-items:center;
justify-content:center;font-weight:700;font-size:14px;margin-bottom:16px;box-shadow:0 0 18px rgba(54,121,248,.5)}
.acc-card b{display:block;font-size:15px;margin-bottom:8px}
.acc-card p{font-size:12.5px;color:#cfc6de;line-height:1.7}
@media(max-width:800px){.acc-grid{grid-template-columns:1fr}}
.t-pricing{background:var(--bg-light);padding:100px 0;text-align:center}
.t-pricing .lead{margin:14px auto 50px;max-width:560px;color:var(--ink-soft);font-size:14px}
.tp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1020px;margin:0 auto}
.tp-card{background:#fff;border-radius:20px;padding:34px 28px;box-shadow:0 4px 18px rgba(21,1,40,.06);
text-align:left;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;position:relative}
.tp-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(54,121,248,.15)}
.tp-card.hot{background:var(--ink);color:#fff;box-shadow:0 20px 60px rgba(1,12,40,.4)}
.tp-card.hot .tp-name, .tp-card.hot .tp-price{color:#fff}
.tp-card.hot .tp-desc, .tp-card.hot li{color:#b9c4de}
.tp-tag{position:absolute;top:-12px;right:22px;background:var(--violet);color:#fff;font-size:10.5px;font-weight:700;
letter-spacing:1px;text-transform:uppercase;padding:6px 13px;border-radius:999px}
.tp-name{font-size:18px;font-weight:700;color:var(--ink)}
.tp-desc{font-size:12px;color:var(--ink-soft);margin:6px 0 18px}
.tp-price{font-size:38px;font-weight:800;color:var(--ink)}
.tp-price small{font-size:16px}
.tp-price .per{font-size:12px;font-weight:500;color:#9d8fb5;margin-left:5px}
.tp-note{font-size:10.5px;color:#9d8fb5;margin-top:2px}
.tp-card ul{list-style:none;margin:18px 0 24px;display:flex;flex-direction:column;gap:8px}
.tp-card li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.tp-card li svg{width:13px;height:13px;flex:none;margin-top:2px;color:var(--violet)}
.tp-card .btn{margin-top:auto;justify-content:center}
.tp-bundle{max-width:1020px;margin:22px auto 0;background:linear-gradient(140deg,#0d1d40,#050f28 70%);
border:1px solid rgba(54,121,248,.35);border-radius:20px;padding:28px 34px;color:#fff;
display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;text-align:left;
box-shadow:0 0 40px rgba(54,121,248,.15)}
.tp-bundle b{font-size:17px;display:block;margin-bottom:4px}
.tp-bundle span{font-size:12.5px;color:#b9c4de}
.tp-bundle .bp{font-size:30px;font-weight:800;white-space:nowrap}
.tp-bundle .bp small{font-size:14px}
.tp-bundle .bp .per{font-size:12px;font-weight:500;color:#b9c4de}
@media(max-width:900px){.tp-grid{grid-template-columns:1fr}}
.tfaq{background:#050f28;padding:100px 0;color:#fff}
.tfaq h2{color:#fff;text-align:center;margin-bottom:50px}
.t-final{background:#050f28;padding:0 0 100px}
/* ═════════════════════════════════════════════════════════════════════════
AJOUTS WORDPRESS
Tout ce qui précède reprend la maquette à l'identique. Ce bloc contient
uniquement ce que la maquette ne prévoyait pas : les images réelles à la
place des aplats, le menu mobile, les pages de texte, et deux correctifs.
═════════════════════════════════════════════════════════════════════════ */
/* ---------- Images réelles dans les cartes ---------- */
.ps-couvre{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.decor-card .decor-info,.studio-card .studio-name,.studio-card .btn,.vid .play,.vid .tag{position:relative;z-index:2}
.step-visual .ps-couvre{z-index:0}
.avatars span{background-size:cover;background-position:center}
.pav{background-size:cover;background-position:center}
/* ---------- Correctifs de la maquette ---------- */
/* Les icônes du mega-menu se posent sur une pastille violette : sans cette
ligne, currentColor leur donnerait la couleur de texte sombre du site.
(Les icônes d'étapes, elles, étaient blanches sur carte blanche donc
invisibles : elles suivent désormais .step-title svg, qui les met en violet.) */
.mega-item .mi{color:#fff}
/* Un prix exprimé en toutes lettres (« Sur devis ») ne tient pas en 52px. */
.price-value .price-mot{font-size:38px}
.price-cta{margin-top:18px}
.dots .dot{border:none;padding:0;cursor:pointer}
/* ---------- Menu mobile ---------- */
.nav-mobile{position:fixed;top:76px;left:50%;transform:translateX(-50%);z-index:99;
width:min(1160px,calc(100% - 32px));max-height:calc(100vh - 96px);overflow-y:auto;
background:rgba(2,11,32,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px 22px 22px;
box-shadow:0 30px 80px rgba(0,0,0,.55)}
/* :not(.btn) — sans cette exclusion, la règle repeignait aussi les deux boutons
du bas : texte clair sur fond blanc, rembourrage horizontal supprimé et trait
de séparation sous le bouton. */
.nav-mobile a:not(.btn){display:block;color:#e2e9f2;font-size:15px;padding:11px 0;
border-bottom:1px solid rgba(255,255,255,.06)}
.nav-mobile a:not(.btn):hover{color:var(--violet-soft)}
.nav-mobile b{display:block;color:var(--violet-soft);font-size:10px;letter-spacing:2.5px;
text-transform:uppercase;margin:22px 0 4px}
.nav-mobile-cta{margin-top:22px}
.nav-mobile-cta .btn{width:100%}
.ps-menu-ouvert{overflow:hidden}
/* Le masquage du menu mobile suit le nouveau seuil, plus bas. */
/* ---------- Pages de texte, listes, 404 ---------- */
.ps-texte{background:var(--bg-light);padding:150px 0 100px;min-height:60vh}
.ps-texte .container{max-width:780px}
.ps-texte h1{font-size:clamp(30px,4vw,42px);font-weight:700;color:var(--ink);margin-bottom:26px}
.ps-texte h2{margin:38px 0 14px}
.ps-texte h3{font-size:19px;font-weight:600;color:var(--ink);margin:28px 0 10px}
.ps-texte p,.ps-texte li{font-size:15px;line-height:1.75;color:var(--ink-soft);margin-bottom:14px}
.ps-texte ul,.ps-texte ol{padding-left:22px;margin-bottom:20px}
.ps-texte a{color:var(--violet);text-decoration:underline}
.ps-texte img{border-radius:14px;margin:20px 0}
.ps-texte blockquote{border-left:3px solid var(--violet);padding-left:20px;margin:22px 0;font-style:italic}
.ps-404{text-align:center}
.ps-404 .btn{margin-top:26px}
.ps-liste{display:grid;gap:14px;margin-top:30px}
.ps-liste-item{display:block;background:#fff;border-radius:var(--card-radius);padding:24px 26px;
box-shadow:0 4px 20px rgba(1,12,40,.05);transition:transform .3s,box-shadow .3s}
.ps-liste-item:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(54,121,248,.13)}
.ps-liste-date{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--violet)}
.ps-liste-item b{display:block;font-size:18px;color:var(--ink);margin:6px 0 8px}
.ps-liste-item > span:last-child{font-size:13.5px;line-height:1.65;color:var(--ink-soft)}
.pagination{margin-top:34px;display:flex;gap:10px;justify-content:center}
.pagination .page-numbers{padding:8px 14px;border-radius:10px;background:#fff;color:var(--ink);font-size:13px}
.pagination .current{background:var(--violet);color:#fff}
/* ---------- Message d'aide (visible uniquement des administrateurs) ---------- */
.ps-vide{background:var(--bg-light);padding:170px 0 110px;text-align:center}
.ps-vide p{max-width:520px;margin:14px auto 26px;font-size:14px;color:var(--ink-soft);line-height:1.7}
/* ---------- Accessibilité et barre d'administration ---------- */
.ps-skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--ink);
padding:12px 18px;border-radius:0 0 12px 0;font-size:13px;font-weight:600}
.ps-skip:focus{left:0}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.admin-bar .nav{top:46px}
@media(min-width:783px){.admin-bar .nav{top:46px}}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}
/* ---------- Ajouts liés aux pages de service et au SEO local ---------- */
/* Les coches des maquettes étaient peintes en dur (fill="#3679f8"). Nos icônes
suivent currentColor : on redonne donc l'accent là où le texte est clair. */
.hero-checks svg,.fam-checks svg,.hub-list svg{color:var(--violet)}
.cv-card .ic{color:#fff}
.pb-card .em svg{width:22px;height:22px;color:var(--violet)}
.ms-visual-main{position:relative;overflow:hidden}
.price-shell-simple{max-width:760px;margin:44px auto 0;text-align:left}
/* Une page locale encore en brouillon : visible des seuls administrateurs. */
.lo-chips a.lo-brouillon{opacity:.5;border-style:dashed}
.lo-chips a.lo-brouillon:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.ps-texte-local{padding:80px 0}
.ms-boutique{padding:160px 0 100px}
.ms-boutique .msa-grid{margin-top:40px}
/* ---------- Robustesse de la barre de navigation ----------
La maquette tenait à 5 entrées de menu, avec 87 px de marge. Passée à 6, la
barre réclamait 1 158 px pour 1 160 disponibles : les libellés se coupaient en
deux lignes et la barre débordait entre 860 et 1190 px de large.
Trois règles suffisent à la rendre indifférente au nombre d'entrées. */
/* 1. Un libellé de navigation ne se coupe jamais. */
.nav-links a,.nav-cta .btn,.logo span{white-space:nowrap}
/* 2. Les boutons gardent leur largeur : c'est le menu qui cède en premier. */
.nav-cta{flex:none}
.nav-cta .btn,.btn-user{flex:none}
.nav-links{min-width:0}
/* 3. La barre se dégarnit par paliers nets, avant de déborder.
Le bouton transparent part en premier, les liens ensuite. */
/* La barre est plafonnée à 1160 px quelle que soit la fenêtre. À 5 entrées,
l'espacement d'origine de la maquette tient largement (88 px de marge).
⚠ Au-delà de 5 entrées de menu, il faut le ramener à 20 px : avec 6, cet
espacement réclamait 1161 px et ne rentrait à aucune largeur. */
.nav-links{gap:26px}
/* Restreint à la barre de navigation : cette règle désencombre l'en-tête sur
les écrans étroits. Appliquée à tous les .btn-ghost, elle faisait aussi
disparaître « Voir le tarif » des pages de service et « Mon compte » du
menu mobile — deux boutons qui doivent rester atteignables. */
@media(max-width:1200px){.nav-cta .btn-ghost{display:none}}
@media(max-width:1040px){.nav-links{display:none}.burger{display:block}}
@media(min-width:1041px){.nav-mobile{display:none}}
/* ---------- Rythme vertical du bandeau CTA ----------
La maquette ne donnait au bandeau qu'une marge basse : il empruntait sa marge
haute à la section précédente. Cela ne tenait que tant qu'il suivait un fond
clair identique. Après une section sombre, la bande claire démarrait net et
la carte s'y retrouvait collée (0 px au-dessus, 100 px en dessous).
Le bandeau porte maintenant sa propre respiration ; la classe « continu »,
posée par le template quand le fond ne change pas, évite de la doubler. */
.booster{padding:100px 0}
.booster.booster-continu{padding-top:0}
/* ---------- Pastille des avis ----------
Les avis affichés proviennent de la fiche Google : on montre le logo Google
à la place de la photo de profil. Le logo est celui déjà présent dans le
thème, utilisé par les outils flottants du hero. */
.review .who .pav-google{background:#fff;background-image:url(../img/outils/google.png);
background-size:62%;background-position:center;background-repeat:no-repeat;flex:none}
/* Texte réservé aux lecteurs d'écran : il nomme la source de l'avis, que le
logo seul ne peut pas énoncer. */
.ps-lu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
clip-path:inset(50%);white-space:nowrap}
/* ---------- Décor des aperçus d'étapes ----------
La maquette dessinait ces pastilles avec des styles en dur dans le HTML.
Les voici en classes : le champ « Aperçu » d'une étape s'écrit alors
Analyser mon marché plutôt qu'une ligne de CSS. */
.step-visual .mini .pill{background:var(--ink);color:#fff;padding:3px 10px;
border-radius:6px;display:inline-block;margin-top:6px}
.step-visual .mini .tag{border-radius:4px;padding:0 8px;display:inline-block}
.step-visual .mini .tag-bleu{background:var(--violet-soft)}
.step-visual .mini .tag-vert{background:#a7e3b8}
.step-visual .mini .tag-sable{background:#f3d9a4}
/* Sur un téléphone, le logo, le bouton blanc, l'icône compte et le burger
réclamaient 508 px pour 343 disponibles — la maquette débordait déjà.
Le bouton d'appel reste accessible : il est repris dans le menu déroulant. */
@media(max-width:600px){.nav-cta .btn-white{display:none}}
@media(max-width:400px){.logo{font-size:17px}.logo small{letter-spacing:3px}}
@media(max-width:360px){.nav-cta .btn-user{display:none}}
@media(min-width:361px){.nav-mobile-compte{display:none}}
.nav-mobile-cta .btn + .btn{margin-top:10px}
/* ---------- Mise à jour des maquettes du 19/30 ----------
Le mega-menu passe à deux panneaux (Services et Micro-services), et la
signature de colonne abandonne le grand mot italique pour une capitale
espacée précédée d'un tiret. Les surtitres de page suivent le même motif. */
/* Deux panneaux : chacun a son déclencheur et sa classe d'ouverture.
La maquette n'en avait qu'un : sa règle `.nav.mega-open .mega` ouvrait les
deux d'un coup, et celui des micro-services, placé après dans le code,
recouvrait celui des services. On referme donc tous les panneaux, puis on
n'ouvre que celui dont l'état est actif. */
.nav.mega-open .chev:not(.chev2){transform:rotate(180deg)}
.nav.mega2-open .chev2{transform:rotate(180deg)}
/* Même histoire que pour les panneaux : la règle de la maquette fait pivoter
tous les chevrons à l'ouverture des Services. Celui des Micro-services ne
suit que son propre panneau. */
.nav.mega-open .chev2{transform:none}
.nav.mega-open .mega,.nav.mega2-open .mega{opacity:0;visibility:hidden;transform:translateY(10px)}
.nav.mega-open #mega,.nav.mega2-open #mega2{opacity:1;visibility:visible;transform:translateY(0)}
/* Signature de colonne du mega-menu. */
/* margin-top:auto plutôt qu'une marge fixe : les colonnes n'ont pas le même
nombre d'entrées, et sans cela la signature de la plus courte — Performer —
flotte au milieu pendant que les autres sont en bas. */
.mega-sig{align-self:flex-end;margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:10px;
font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:4px;
text-transform:uppercase;color:var(--violet-soft);font-style:normal}
.mega-sig::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--violet)}
/* Surtitres : un tiret de part et d'autre sur les pages, un seul dans le menu. */
.fam-kicker,.hub-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font);
font-size:12.5px;font-weight:700;letter-spacing:4px;text-transform:uppercase;
color:var(--violet-soft);position:relative;font-style:normal}
.fam-kicker::before,.fam-kicker::after,
.hub-kicker::before,.hub-kicker::after{content:"";width:26px;height:2px;border-radius:2px;background:var(--violet)}
.ps-pleine-largeur{width:100%}
.ps-relance{margin-bottom:18px}
.ps-ghost-clair{border-color:rgba(255,255,255,.35)}
/* Le formulaire de l'espace client est une maquette : ses champs sont inertes,
on l'assume visuellement plutôt que de laisser croire qu'ils fonctionnent. */
.ps-form-maquette input:disabled,.ps-form-maquette button:disabled{cursor:not-allowed;opacity:.75}
.ps-note-admin{margin-top:10px;color:var(--violet-soft)}
.ps-note-admin a{text-decoration:underline}
/* Le sommaire signale la section en cours de lecture. */
.toc a.active{color:var(--violet);font-weight:600}
/* ---------- Grille des réalisations ----------
Elle empruntait la carte des résultats chiffrés, dont ce n'est pas l'objet :
elle a désormais la sienne. */
.ps-cas-grille{background:var(--bg-light);padding:100px 0;text-align:center}
.ps-cas-grille .lead{margin:14px auto 46px;max-width:560px;color:var(--ink-soft);font-size:14px}
.cas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cas-card{background:#fff;border-radius:18px;padding:26px 24px;text-align:left;
box-shadow:0 4px 18px rgba(1,12,40,.05);display:flex;flex-direction:column;gap:6px;
transition:transform .3s,box-shadow .3s}
.cas-card:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(54,121,248,.14)}
.cas-card b{font-size:15px;color:var(--ink);line-height:1.4}
.cas-card span{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--violet)}
@media(max-width:900px){.cas-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cas-grid{grid-template-columns:1fr}}
/* ---------- Mise à jour des maquettes du 20/15 ----------
La signature de colonne du mega-menu devient un lien vers la page qui
détaille la famille : elle réagit donc au survol. */
.mega-sig{transition:color .25s}
.mega-sig:hover{color:#fff}
.mega-sig:hover::before{background:#fff}
/* Les blocs de catégorie du hub sont des cibles d'ancre : la barre fixe ne doit
pas les recouvrir à l'arrivée. */
.hub2-body .fam-block{scroll-margin-top:110px}
/* ---------- Commande d'un micro-service ----------
Le bouton d'origine était un simple lien qui ajoutait une unité. C'est
désormais un vrai formulaire : quantité choisie, puis validation. */
.ps-commande{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ps-commande .quantity{display:inline-flex;align-items:center;background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.16);border-radius:14px;overflow:hidden;height:42px}
.ps-commande .quantity label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ps-commande .quantity input.qty{width:64px;height:100%;background:transparent;border:none;color:#fff;
font-family:var(--font);font-size:14px;font-weight:600;text-align:center;outline:none;
-moz-appearance:textfield;appearance:textfield}
.ps-commande .quantity input.qty::-webkit-outer-spin-button,
.ps-commande .quantity input.qty::-webkit-inner-spin-button{opacity:1;height:26px}
.ps-commande .quantity input.qty:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.ps-commande button.btn{height:42px}
/* Ce que le visiteur a déjà commandé : sans cette ligne, on ajoute deux fois
la même prestation sans s'en apercevoir. */
.ps-deja-panier{display:flex;align-items:center;gap:8px;margin-top:14px;
font-size:12.5px;color:var(--violet-soft)}
.ps-deja-panier svg{width:14px;height:14px;flex:none}
.ps-deja-panier a{text-decoration:underline}
/* Les messages de WooCommerce, habillés comme le reste du site. */
.ps-avis-panier .woocommerce-message,.ps-avis-panier .woocommerce-error,.ps-avis-panier .woocommerce-info{
list-style:none;margin:0 0 18px;padding:14px 18px;border-radius:14px;font-size:13px;
background:rgba(54,121,248,.14);border:1px solid rgba(54,121,248,.35);color:#e2e9f2}
.ps-avis-panier .woocommerce-error{background:rgba(248,84,84,.14);border-color:rgba(248,84,84,.4)}
.ps-avis-panier a{color:var(--violet-soft);text-decoration:underline;margin-left:8px}
.ps-avis-panier .button{display:none}
/* ---------- Logos flottants du hero d'accueil ----------
Un cran plus discrets que dans la maquette : ils encadrent le titre sans lui
disputer l'attention. Les proportions relatives sont conservées (les six
pastilles n'ont pas toutes la même taille), et seul le hero est concerné —
le bandeau CTA et les heros de service gardent les leurs. */
.hero .float-tool{width:54px;height:54px;border-radius:14px}
.hero .hft2,.hero .hft4{width:48px;height:48px}
.hero .hft5{width:50px;height:50px}
.hero .float-tool img{width:32px;height:32px}
.hero .float-tool svg{width:34px;height:auto}
/* ---------------------------------------------------------------------------
MISE À JOUR — page GEO, panier sur mesure, quantités (maquettes all-18-40)
------------------------------------------------------------------------ */
/* Puces « ChatGPT / Perplexity… » posées sur le visuel d'un hero de service. */
.ai-chips{position:absolute;inset:auto 20px 20px 20px;display:flex;gap:8px;flex-wrap:wrap}
.ai-chip{font-size:11px;font-weight:600;color:#fff;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.2);
padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}
/* Section « Inclus — fond sombre » : liste en deux colonnes. */
.gi{background:linear-gradient(180deg,#020a20,#0a1733);padding:100px 0;color:#fff}
.gi h2{color:#fff;text-align:center}
.gi .lead{text-align:center;margin:14px auto 50px;max-width:560px;color:#cfc6de;font-size:14px}
.gi-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:880px;margin:0 auto}
.gi-item{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
border-radius:14px;padding:18px 20px;font-size:13px;color:#d9d2e6;line-height:1.6}
.gi-item svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--violet-soft)}
.gi-item b{color:#fff}
@media(max-width:760px){.gi-grid{grid-template-columns:1fr}}
/* Section « Micro-services associés » : vente croisée en bas de page service. */
.ms-strip{background:var(--bg-light);padding:90px 0}
.ms-strip h2{text-align:center}
.ms-strip .lead{text-align:center;margin:12px auto 44px;max-width:540px;color:var(--ink-soft);font-size:13.5px}
.msa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1020px;margin:0 auto}
.msa-card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 4px 16px rgba(21,1,40,.06);
display:flex;flex-direction:column;gap:6px;position:relative;transition:transform .3s,box-shadow .3s}
.msa-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(54,121,248,.15)}
.msa-card .tag{position:absolute;top:18px;right:18px;font-size:10px;font-weight:700;letter-spacing:1px;
text-transform:uppercase;color:var(--violet);background:var(--violet-pale);padding:4px 9px;border-radius:999px}
.msa-card b{font-size:14.5px;color:var(--ink);padding-right:86px}
.msa-card p{font-size:12px;color:var(--ink-soft);line-height:1.6;flex:1}
.msa-card .pr{font-size:15px;font-weight:800;color:var(--violet)}
.msa-card .pr em{font-style:normal;font-size:10.5px;font-weight:500;color:#9d8fb5}
@media(max-width:860px){.msa-grid{grid-template-columns:1fr}}
/* Sélecteur de quantité sur la fiche micro-service (fond sombre). */
.ms-qty-row{display:flex;align-items:center;gap:16px;margin:2px 0 24px;flex-wrap:wrap}
.qty-box{display:inline-flex;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
border-radius:999px;overflow:hidden}
.qty-box button{width:38px;height:38px;color:#fff;font-size:17px;font-weight:600;display:flex;align-items:center;justify-content:center;
transition:background .2s}
.qty-box button:hover{background:rgba(54,121,248,.3)}
.qty-box button[disabled]{opacity:.35;cursor:not-allowed}
.qty-box .qv{min-width:36px;text-align:center;color:#fff;font-size:14px;font-weight:700}
.ms-total{font-size:13.5px;color:#cfc6de}
.ms-total b{color:#fff;font-size:16px}
.ms-total .detail{color:#9d8fb5;font-size:11.5px}
.btn-added{background:var(--violet)!important;color:#fff!important}
@keyframes qtyPulse{0%{transform:scale(1)}50%{transform:scale(1.45)}100%{transform:scale(1)}}
.fab-qty.pulse{animation:qtyPulse .45s ease}
/* ---------- PAGE PANIER ---------- */
.cart{background:var(--bg-light);padding:150px 0 100px;min-height:80vh}
.cart h1{font-size:clamp(30px,4vw,42px);margin-bottom:40px}
.cart-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.cart-list{background:#fff;border-radius:20px;padding:10px 28px;box-shadow:0 4px 18px rgba(21,1,40,.06)}
.cart-head{display:flex;justify-content:space-between;padding:18px 0 12px;border-bottom:1px solid #eee6f8;
font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9d8fb5}
.cart-item{display:grid;grid-template-columns:86px 1fr auto;gap:20px;padding:24px 0;border-bottom:1px solid #eee6f8;align-items:start}
.cart-item:last-child{border-bottom:none}
.ci-thumb{width:86px;height:86px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden}
.ci-thumb svg{width:30px;height:30px;opacity:.85}
.ci-thumb img{width:100%;height:100%;object-fit:cover}
.ci-name{font-size:15px;font-weight:700;color:var(--ink);display:inline-block}
.ci-name:hover{color:var(--violet)}
.ci-unit{font-size:13px;color:var(--ink-soft);margin:3px 0 4px}
.ci-desc{font-size:12px;color:#9d8fb5;margin-bottom:12px}
.ci-actions{display:flex;align-items:center;gap:12px}
.ci-qty{display:inline-flex;align-items:center;background:var(--bg-light);border:1px solid #e3dcf2;border-radius:999px;overflow:hidden}
.ci-qty button{width:34px;height:34px;color:var(--ink);font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;transition:background .2s}
.ci-qty button:hover{background:var(--violet-pale)}
.ci-qty button[disabled]{opacity:.35;cursor:not-allowed}
.ci-qty .qv{min-width:32px;text-align:center;font-size:13.5px;font-weight:700;color:var(--ink)}
.ci-del{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#9d8fb5;transition:background .2s,color .2s}
.ci-del:hover{background:#fde8ec;color:#d33}
.ci-del svg{width:16px;height:16px}
.ci-total{font-size:15px;font-weight:700;color:var(--ink);text-align:right;white-space:nowrap}
.cart-empty{padding:60px 0;text-align:center;color:var(--ink-soft);font-size:14px}
.cart-empty .btn{margin-top:18px}
.cart-side{background:var(--ink);border-radius:20px;padding:30px 28px;color:#fff;position:sticky;top:110px;
box-shadow:0 24px 60px rgba(1,12,40,.3)}
.cs-title{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8fa3cc;
padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:6px}
.promo-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 0;
color:#fff;font-size:13.5px;font-weight:500;border-bottom:1px solid rgba(255,255,255,.12)}
.promo-toggle .chevp{transition:transform .3s;font-size:11px;color:#8fa3cc}
.promo-open .promo-toggle .chevp{transform:rotate(180deg)}
.promo-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.promo-open .promo-body{max-height:160px}
.promo-body .pin{display:flex;gap:8px;padding:4px 0 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.promo-body input{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:10px;
padding:10px 14px;color:#fff;font-family:var(--font);font-size:12.5px;outline:none}
.promo-body input:focus{border-color:var(--violet)}
.promo-body .btn{padding:10px 16px;font-size:12px}
.cs-row{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.cs-row .l{font-size:19px;font-weight:700}
.cs-row .v{font-size:26px;font-weight:800}
.cs-row.cs-sub .l{font-size:13.5px;font-weight:500;color:#8fa3cc}
.cs-row.cs-sub .v{font-size:14px;font-weight:600}
.cs-note{font-size:11px;color:#8fa3cc;margin-top:12px;line-height:1.6}
.cart-side .btn{width:100%;justify-content:center;margin-top:20px}
.cart-cont{margin-top:16px;text-align:center}
.cart-cont a{font-size:12.5px;color:#8fa3cc}
.cart-cont a:hover{color:#fff;text-decoration:underline}
.cart .woocommerce-message,.cart .woocommerce-error,.cart .woocommerce-info{margin-bottom:24px}
@media(max-width:860px){.cart-grid{grid-template-columns:1fr}.cart-side{position:static}}
/* Le burger porte désormais une icône SVG : pas de ligne de base à corriger. */
.burger svg{display:block}
/* Les champs de quantité gardent l'apparence d'un simple nombre. */
.qty-box input.qv,.ci-qty input.qv{background:none;border:none;outline:none;padding:0;font-family:var(--font);
-moz-appearance:textfield;appearance:textfield}
.qty-box input.qv::-webkit-outer-spin-button,.qty-box input.qv::-webkit-inner-spin-button,
.ci-qty input.qv::-webkit-outer-spin-button,.ci-qty input.qv::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ps-maj-panier{padding:0 0 22px}
.cart-grid{transition:opacity .2s}
.msa-cta{text-align:center;margin-top:34px}
/* Le bandeau CTA qui suit une section sombre en prolonge le fond. */
.booster.booster-sombre{background:#050f28}
/* L'unité qui suit le prix d'un micro-service : /page, /mois. */
.ps-suffixe{font-size:.72em;font-weight:500;opacity:.72}
/* Panier sur petit écran : le total passe sous la prestation, faute de place
pour trois colonnes à côté d'une vignette. */
@media(max-width:560px){
.cart{padding:120px 0 70px}
.cart-list{padding:6px 18px}
.cart-item{grid-template-columns:64px 1fr;gap:14px}
.ci-thumb{width:64px;height:64px;border-radius:12px}
.ci-total{grid-column:2;text-align:left;margin-top:10px}
.cart-head span:last-child{display:none}
}
/* Les messages de WooCommerce, habillés comme le reste du site. */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
list-style:none;border:1px solid #e3dcf2;border-left:3px solid var(--violet);border-radius:14px;
background:#fff;padding:16px 20px;margin:0 0 18px;font-size:13.5px;color:var(--ink);
box-shadow:0 4px 16px rgba(21,1,40,.05);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.woocommerce-error{border-left-color:#d33}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto;background:var(--ink);color:#fff;
border-radius:999px;padding:9px 18px;font-size:12.5px;font-weight:600;text-decoration:none}
/* Sur les pages Panier et Commande, le bouton « Voir le panier » du message
renvoie là où l'on est déjà, ou en arrière : il n'aide personne. */
.cart .woocommerce-message .wc-forward,.co .woocommerce-message .wc-forward{display:none}
/* ---------------------------------------------------------------------------
MISE À JOUR — les illustrations des cartes de service
Le carrousel de la page d'accueil ne montrait qu'un texte de remplacement :
il porte maintenant les dessins de la maquette, posés dans .decor-ph.
------------------------------------------------------------------------ */
.decor-ph svg{width:82%;height:auto;transform:rotate(-2deg);
filter:drop-shadow(0 14px 28px rgba(0,0,0,.4)) drop-shadow(0 0 22px rgba(125,163,255,.18));
transition:transform .4s ease}
.decor-card:hover .decor-ph svg{transform:rotate(0deg) scale(1.03)}
/* Le texte de remplacement ne concerne plus que les services sans dessin. */
.decor-ph-vide{color:rgba(255,255,255,.25);font-size:15px;letter-spacing:1px;text-transform:uppercase}
/* ---------------------------------------------------------------------------
MISE À JOUR — carrousels au glissement, icônes du bandeau CTA
------------------------------------------------------------------------ */
/* Les carrousels se font glisser à la souris et au doigt. `pan-y` laisse le
doigt faire défiler la page verticalement : seul l'horizontal est capté. */
.car-track{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.car-track img,.car-track svg{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.car-track.ps-glisse,.car-track.ps-glisse *{cursor:grabbing}
/* Les logos d'outils du bandeau CTA, un cran plus discrets : ils encadrent le
message, ils ne lui disputent pas la place. */
.booster .float-tool{width:56px;height:56px;border-radius:14px}
.booster .ft2,.booster .ft4{width:49px;height:49px}
.booster .ft5,.booster .ft6{width:51px;height:51px}
.booster .float-tool img{width:33px;height:33px}
.booster .float-tool svg{width:35px;height:auto}
/* ---------------------------------------------------------------------------
PAGE COMMANDE
Le tunnel de WooCommerce dans la mise en page de la maquette. Les sélecteurs
en `woocommerce-` sont ceux que l'extension impose ; on les habille sans les
renommer, sinon ses scripts ne s'y retrouvent plus.
------------------------------------------------------------------------ */
.co{background:var(--bg-light);padding:150px 0 100px;min-height:80vh}
.co h1{font-size:clamp(30px,4vw,42px);margin-bottom:38px}
.co-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
.co-main{background:#fff;border-radius:20px;padding:34px 32px;box-shadow:0 4px 18px rgba(21,1,40,.06)}
.co-sec{margin-bottom:32px}
.co-sec:last-of-type{margin-bottom:0}
.co-sec h2{font-size:18px;margin-bottom:15px}
.co-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-form .full,.co-form .form-row-wide{grid-column:span 2}
.co-form label{display:block;font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-bottom:5px}
.co-form .required{color:var(--violet);text-decoration:none}
.co-form .optional{font-weight:400;color:#9d8fb5}
.co-form input[type=text],.co-form input[type=email],.co-form input[type=tel],.co-form input[type=password],
.co-form select,.co-form textarea,.co-form .select2-selection{
width:100%;background:var(--bg-light);border:1px solid #e3dcf2;border-radius:11px;
padding:12px 14px;font-family:var(--font);font-size:13px;color:var(--ink);outline:none;
transition:border-color .2s,box-shadow .2s}
.co-form input:focus,.co-form select:focus,.co-form textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(54,121,248,.15)}
.co-form textarea{resize:vertical;min-height:84px}
.co-addr-more{font-size:12px;color:var(--violet);font-weight:600;cursor:pointer;grid-column:span 2;text-align:left}
.co-addr-more:hover{text-decoration:underline}
/* Le sélecteur de pays de WooCommerce (select2) reprend l'habillage des champs. */
.co-form .select2-container--default .select2-selection--single{height:auto;border:none;background:none;padding:0}
.co-form .select2-container--default .select2-selection--single .select2-selection__rendered{
line-height:1.4;color:var(--ink);padding:0}
.co-form .select2-container--default .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);right:10px}
/* Moyens de paiement. WooCommerce enveloppe la liste dans un cadre gris et lui
donne ses marges : on les annule, en reprenant sa spécificité pour y arriver. */
.woocommerce-checkout .co #payment{background:none;border-radius:0}
.woocommerce-checkout .co #payment ul.payment_methods{padding:0;border:none;margin:0;list-style:none}
.woocommerce-checkout .co #payment ul.payment_methods li{line-height:1.5;margin:0 0 10px}
.woocommerce-checkout .co #payment ul.payment_methods li input{margin:0}
.payment_methods{list-style:none;margin:0;padding:0}
.pay-opt{position:relative;border:1px solid #e3dcf2;border-radius:13px;margin-bottom:10px;
transition:border-color .2s,background .2s,box-shadow .2s}
.pay-opt:hover{border-color:var(--violet)}
.pay-opt.active{border-color:var(--violet);background:rgba(54,121,248,.05);box-shadow:0 0 0 3px rgba(54,121,248,.12)}
.pay-opt > label{display:flex;align-items:center;gap:13px;padding:15px 16px;cursor:pointer;margin:0}
.ps-paiement-radio{position:absolute;opacity:0;width:1px;height:1px}
.ps-paiement-radio:focus-visible + label{outline:2px solid var(--violet);outline-offset:2px;border-radius:13px}
.pay-radio{width:18px;height:18px;border-radius:50%;border:2px solid #cfc6e2;flex:none;position:relative}
.pay-opt.active .pay-radio{border-color:var(--violet)}
.pay-opt.active .pay-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--violet)}
.pay-txt{flex:1;min-width:0}
.pay-txt b{font-size:13.5px;color:var(--ink);display:block}
.pay-txt span{font-size:11.5px;color:#9d8fb5;display:block}
.pay-ic{width:38px;height:26px;border-radius:6px;background:var(--violet-pale);color:var(--violet);
display:flex;align-items:center;justify-content:center;flex:none;margin-left:auto}
.pay-ic svg{width:17px;height:17px}
.pay-ic img{max-width:34px;max-height:20px}
.payment_box{padding:0 16px 15px;font-size:12.5px;color:var(--ink-soft);line-height:1.6}
/* Note de commande */
.co-note-box{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-soft);margin-top:14px;cursor:pointer;font-weight:500}
.co-note-box input{width:auto;accent-color:var(--violet)}
.co-note-area{max-height:0;overflow:hidden;transition:max-height .35s ease}
.co-note-open .co-note-area{max-height:220px;margin-top:10px}
/* Mentions, bouton et garanties */
.co-legal{font-size:11.5px;color:#9d8fb5;line-height:1.7;margin:24px 0 14px}
.co-legal a{color:var(--violet)}
.co-main #place_order{width:100%;justify-content:center}
.co-secure{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:11px;color:#9d8fb5}
.co-secure span{display:flex;align-items:center;gap:6px}
.co-secure svg{width:13px;height:13px;color:var(--violet)}
/* Récapitulatif */
.co-side{background:var(--ink);border-radius:20px;padding:28px;color:#fff;position:sticky;top:110px;box-shadow:0 24px 60px rgba(1,12,40,.3)}
.co-side .cs-title{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8fa3cc;
padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:6px}
.co-item{display:flex;gap:13px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.co-thumb{width:46px;height:46px;border-radius:11px;flex:none;position:relative;display:flex;align-items:center;justify-content:center}
.co-thumb svg{width:19px;height:19px}
.co-qty{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
background:var(--violet);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--ink)}
.co-item .inf{flex:1;min-width:0}
.co-item b{font-size:12.5px;display:block;line-height:1.35}
.co-item small{font-size:10.5px;color:#8fa3cc;display:block;margin-top:3px;line-height:1.5}
.co-item .lt{font-size:12.5px;font-weight:700;white-space:nowrap}
.co-row{display:flex;justify-content:space-between;font-size:12.5px;color:#b9c4de;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.co-remise a{color:#8fa3cc;margin-left:8px;font-size:11px}
.co-remise a:hover{color:#fff}
.co-total{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0 0}
.co-total .l{font-size:18px;font-weight:700}
.co-total .v{font-size:25px;font-weight:800}
.co-back{margin-top:18px;text-align:center}
.co-back a{font-size:12.5px;color:#8fa3cc}
.co-back a:hover{color:#fff;text-decoration:underline}
/* Les avis de WooCommerce dans la colonne de gauche. */
.co .woocommerce-NoticeGroup{margin-bottom:20px}
.co .woocommerce-error{list-style:none}
@media(max-width:860px){
.co{padding:120px 0 70px}
.co-grid{grid-template-columns:1fr}
.co-side{position:static}
.co-form{grid-template-columns:1fr}
.co-form .full,.co-form .form-row-wide{grid-column:span 1}
.co-addr-more{grid-column:span 1}
.co-main{padding:26px 20px}
}
/* ---------------------------------------------------------------------------
Visuels des micro-services
Les illustrations produit sont carrées : dans le bandeau de 360px du hero,
« cover » leur coupait le haut et le bas — là où plusieurs d'entre elles
posent justement leur légende. Le cadre devient donc carré dès qu'il porte
une image ; sans image, il garde sa bande et son dégradé.
------------------------------------------------------------------------ */
.ms-visual-main:has(img){height:auto;aspect-ratio:1/1}
@media(max-width:900px){.ms-visual-main:has(img){height:auto;aspect-ratio:1/1}}
/* L'illustration d'une carte du hub Booster remplace les trois bandes : elle
occupe toute la largeur intérieure de la carte, à son format d'origine.
Le dessin vectoriel arrondit lui-même ses coins, la photo a besoin qu'on
les lui coupe. */
.hub-visual-image{display:block;margin-bottom:20px}
.hub-visual-image img{display:block;width:100%;height:auto;border-radius:12px}
.hub-visual-image svg{display:block;width:100%;height:auto}
/* ---------------------------------------------------------------------------
Visuels et badges d'outils du hero de service
Le dessin est vectoriel et porte son propre dégradé : il remplit le cadre
sans qu'on lui ajoute un fond. Les badges peuvent maintenant être quatre —
deux de plus que la maquette, pour les services qui s'appuient sur autant
d'outils.
------------------------------------------------------------------------ */
.sv-hero-dessin{background:none;box-shadow:none;height:auto;aspect-ratio:800/548}
.sv-hero-dessin svg{display:block;width:100%;height:100%}
.svf3{top:-18px;left:-14px;width:56px;height:56px;animation-delay:-1.7s}
.svf4{bottom:-16px;right:-16px;width:52px;height:52px;animation-delay:-3.4s}
.sv-hero-wrap .float-tool svg{width:60%;height:60%}
@media(max-width:900px){.sv-hero-dessin{aspect-ratio:800/548;height:auto}}
/* La précision sous le prix d'une offre — le mensuel n'accélère pas la production. */
.price-note{font-size:11.5px;color:var(--ink-soft);line-height:1.6;margin:14px 0 0;max-width:520px}
/* ---------------------------------------------------------------------------
GABARIT v2 DES FICHES — bloc à onglets, déroulé en jalons, transparence
Repris tel quel des maquettes du 2 septembre. Ce gabarit sert aussi bien
les micro-services que les pages de service mère.
------------------------------------------------------------------------ */
.tools-used{margin:26px 0 4px}
.tools-used .tu-label{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;
letter-spacing:3px;text-transform:uppercase;color:var(--violet);margin-bottom:14px}
.tools-used .tu-label::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--violet)}
.tu-grid{display:flex;flex-wrap:wrap;gap:10px}
.tu-item{display:inline-flex;align-items:center;gap:11px;background:#fff;border:1px solid #e9e2f5;
border-radius:14px;padding:11px 18px 11px 13px;font-size:13.5px;font-weight:600;color:var(--ink);
box-shadow:0 3px 12px rgba(21,1,40,.05)}
.tu-item svg{width:22px;height:22px;fill:currentColor;flex:none;color:var(--ink)}
.tools-used.on-dark .tu-item{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.11);color:#fff}
.tools-used.on-dark .tu-item svg{color:#fff}
.tools-used .tu-note{font-size:11px;color:#9d8fb5;margin-top:12px}
.tools-used.on-dark .tu-note{color:#8fa3cc}
/* ---- v2 : deroule sombre + section transparence ---- */
.how-tl{list-style:none;max-width:760px;margin:34px auto 0;padding:0 0 0 34px;position:relative}
.how-tl::before{content:"";position:absolute;left:7px;top:8px;bottom:10px;width:2px;background:rgba(255,255,255,.13)}
.how-tl li{position:relative;padding:0 0 30px}
.how-tl li:last-child{padding-bottom:0}
.how-tl li::before{content:"";position:absolute;left:-34px;top:4px;width:16px;height:16px;border-radius:50%;
background:#0a1733;border:2.5px solid var(--violet)}
.how-tl .when{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:var(--violet-soft);margin-bottom:5px}
.how-tl b{display:block;font-size:16.5px;font-weight:700;margin-bottom:5px;color:#fff}
.how-tl p{font-size:14px;line-height:1.68;color:#aab3d6;margin:0;max-width:62ch}
.how-need{max-width:760px;margin:38px auto 0;background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.11);border-radius:16px;padding:22px 26px}
.how-need b{display:block;font-size:13px;font-weight:700;color:#fff;margin-bottom:9px;
letter-spacing:.05em;text-transform:uppercase}
.how-need p{font-size:13.6px;line-height:1.7;color:#aab3d6;margin:0}
.how-need strong{color:#fff;font-weight:600}
.honest{background:var(--bg-light);padding:96px 0}
.honest .container{max-width:1200px}
.honest-wrap{max-width:1152px;margin:0 auto;display:grid;grid-template-columns:1.3fr .9fr;gap:44px;align-items:start}
.honest h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.honest .hlead{font-size:15px;color:#5b4e72;margin:0 0 26px;max-width:56ch}
.honest .notinc li{padding:13px 0;border-bottom:1px solid rgba(31,20,58,.07)}
.honest .notinc li:last-child{border-bottom:0}
.spec-card{background:#fff;border:1px solid rgba(31,20,58,.09);border-radius:18px;padding:26px 28px;
box-shadow:0 18px 50px -34px rgba(31,20,58,.5);position:sticky;top:100px}
.spec-card>b{display:block;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
margin-bottom:8px}
@media(max-width:900px){.honest-wrap{grid-template-columns:1fr;gap:28px}.spec-card{position:static}}
/* ---- section fiche produit a onglets ---- */
.ms-tabs{background:var(--bg-light);padding:64px 0 0}
/* pas de padding bas : la section suivante (meme fond clair) fournit l'espacement */
.ms-tabs .container{max-width:1200px}
.tabs-shell{max-width:1152px;margin:0 auto}
.tabs-bar{display:flex;gap:0;border-bottom:1px solid rgba(31,20,58,.12);overflow-x:auto;
scrollbar-width:none}
.tabs-bar::-webkit-scrollbar{display:none}
.tab-btn{flex:0 0 auto;appearance:none;background:none;border:0;cursor:pointer;font:inherit;
font-size:14px;font-weight:600;color:#7b6d93;padding:17px 22px;position:relative;
white-space:nowrap;transition:color .18s ease;display:flex;align-items:center;gap:8px}
.tab-btn svg{width:16px;height:16px;opacity:.75}
.tab-btn:hover{color:var(--ink)}
.tab-btn[aria-selected="true"]{color:var(--ink)}
.tab-btn[aria-selected="true"]::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;
height:2px;background:var(--violet);border-radius:2px}
.tab-btn:focus-visible{outline:2px solid var(--violet);outline-offset:-4px;border-radius:8px}
.tab-panels{padding:38px 0 0}
.tab-panel[hidden]{display:none}
.tab-panel h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0 0 12px}
.tab-panel h3+p{margin-top:0}
.tab-panel p{font-size:14.5px;line-height:1.72;color:#4d4162;margin:0 0 14px;max-width:74ch}
.tab-panel p:last-child{margin-bottom:0}
.tab-panel strong{color:var(--ink);font-weight:600}
.tp-split{display:grid;grid-template-columns:1.35fr .95fr;gap:34px;align-items:start}
.tp-note{background:#f6f3ff;border:1px solid rgba(107,63,201,.14);border-radius:14px;padding:18px 20px}
.tp-note b{display:block;font-size:13px;font-weight:700;margin-bottom:7px;color:var(--ink)}
.tp-note p{font-size:13.2px;line-height:1.65;margin:0;color:#5b4e72}
.dl-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.dl-list li{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:15px 0;
border-bottom:1px solid rgba(31,20,58,.07);align-items:start}
.dl-list li:last-child{border-bottom:0;padding-bottom:0}
.dl-list li:first-child{padding-top:0}
.dl-ico{width:26px;height:26px;border-radius:8px;background:#f1ecfd;color:var(--violet);
display:flex;align-items:center;justify-content:center;margin-top:1px}
.dl-ico svg{width:15px;height:15px}
.dl-list b{display:block;font-size:14px;font-weight:600;margin-bottom:3px}
.dl-list span{font-size:13.4px;line-height:1.62;color:#5b4e72}
.spec-table{width:100%;border-collapse:collapse;font-size:14px}
.spec-table th,.spec-table td{text-align:left;padding:13px 0;border-bottom:1px solid rgba(31,20,58,.07);
vertical-align:top}
.spec-table th{font-weight:600;color:#7b6d93;width:38%;font-size:13.4px}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.tl{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:8px;width:2px;background:#eae4fb}
.tl li{position:relative;padding:0 0 22px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-26px;top:4px;width:12px;height:12px;border-radius:50%;
background:#fff;border:2.5px solid var(--violet)}
.tl b{display:block;font-size:14px;font-weight:600;margin-bottom:3px}
.tl .when{font-size:12px;font-weight:600;color:var(--violet);letter-spacing:.02em;
text-transform:uppercase;margin-bottom:4px;display:block}
.tl p{font-size:13.4px;line-height:1.62;color:#5b4e72;margin:0;max-width:60ch}
.notinc{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.notinc li{display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:13.8px;line-height:1.6;
color:#5b4e72;align-items:start}
.notinc svg{width:16px;height:16px;color:#b9aed0;margin-top:2px}
.notinc b{color:var(--ink);font-weight:600}
.tools-inline{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 18px}
.ti{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:11px;
background:#f6f3ff;border:1px solid rgba(107,63,201,.13);font-size:13px;font-weight:600;color:var(--ink)}
/* Les logos portent la couleur de leur marque, posée sur le