/* ============ TOKENS (DA L & L conservée) ============ */
:root{
  --bg:#FAFAF7; --bg-2:#F3F2EC; --ink:#15151E; --ink-soft:#5A5A70; --ink-faint:#6B6B80;
  --line:#E3E2DA; --card:#FFFFFF; --accent:#4F46E5; --accent-ink:#4338CA; --accent-tint:#ECEBFF;
  --on-accent:#FFFFFF; --dark:#15151E; --on-dark:#EDEDF7; --on-dark-soft:#9A9AB5;
  --cat-vitrine:#4F46E5; --cat-refonte:#F59E0B; --cat-boutique:#10B981; --cat-saas:#DB2777; --cat-wordpress:#3B82F6; --cat-jeuvideo:#0E7490;
  --free:#059669;
  --font:'DM Sans',system-ui,sans-serif; --font-display:'Bricolage Grotesque','DM Sans',sans-serif; --hand:'Caveat','Segoe Script','Bradley Hand',cursive;
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.2,1.12,.32,1);
  --r:18px; --r-lg:28px; --r-xl:40px; --pill:999px;
  --maxw:1360px; --pad:clamp(20px,5vw,56px); --nav-h:72px;
  --shadow-md:0 4px 24px rgba(21,21,30,.08),0 12px 40px -16px rgba(21,21,30,.16);
  --shadow-lg:0 20px 60px -20px rgba(21,21,30,.28),0 8px 24px -12px rgba(21,21,30,.12);
}
:root[data-theme="dark"]{
  --bg:#0D0D18; --bg-2:#11111D; --ink:#E8E8F4; --ink-soft:#9A9AB8; --ink-faint:#8A8AA6;
  --line:#252538; --card:#16162A; --accent:#818CF8; --accent-ink:#A0A8FF; --accent-tint:#1A1A30;
  --dark:#06060C; --on-dark:#EDEDF7; --on-dark-soft:#8888AA;
  --free:#34D399;
  --shadow-md:0 4px 24px rgba(0,0,0,.4),0 12px 40px -16px rgba(0,0,0,.5);
  --shadow-lg:0 20px 60px -20px rgba(0,0,0,.6),0 8px 24px -12px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.lock{overflow:hidden;height:100%}
html.lock body{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1;margin:0;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);animation:pulse 2.4s infinite}
.lead{color:var(--ink-soft);font-size:clamp(17px,1.4vw,20px);max-width:62ch}
.it{font-style:italic;font-weight:600;color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:var(--pill);font-weight:600;font-size:15px;background:var(--accent);color:var(--on-accent);position:relative;overflow:hidden;transition:transform .5s var(--spring),box-shadow .4s var(--ease);will-change:transform}
.btn::after{content:"";position:absolute;top:-40%;bottom:-40%;width:34%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 7s ease-in-out infinite;will-change:transform}
.btn.ghost::after,.btn.light::after,.btn.dark::after{display:none}
@keyframes shine{0%,82%{transform:skewX(-20deg) translateX(0)}100%{transform:skewX(-20deg) translateX(529%)}}
.btn .arr{display:inline-block;transition:transform .5s var(--spring)}
.btn:hover .arr{transform:translateX(5px)}
.btn:hover{box-shadow:0 12px 30px -10px rgba(79,70,229,.55)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.dark{background:var(--ink);color:var(--bg)}
.btn.light{background:var(--bg);color:var(--ink)}
.btn.big{padding:20px 34px;font-size:18px}

/* ============ FAIT MAIN (SVG dessinés, annotations) ============ */
.hand{font-family:var(--hand);font-size:22px;font-weight:600;color:var(--ink-soft);line-height:1.1;letter-spacing:0}
.note{position:absolute;transform:rotate(-4deg);white-space:nowrap;pointer-events:none;z-index:8}
.draw path,.draw circle,.draw ellipse{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease) var(--d,0s)}
.in .draw path,.in .draw circle,.in .draw ellipse,.in.draw path,.on .draw path{stroke-dashoffset:0}
.scr{position:absolute;left:-.02em;width:calc(100% - .22em);bottom:-.02em;height:.16em;overflow:visible;color:var(--accent);opacity:.5;mix-blend-mode:multiply;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) var(--d,1.2s)}
#hero.in .scr{transform:scaleX(1)}
.scr path{stroke-width:9;stroke-dasharray:none;stroke-dashoffset:0}
.arrow{position:absolute;width:110px;height:56px;color:var(--ink-soft)}
.arrow path{stroke-width:2.2}
#grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:97;opacity:.075;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
:root[data-theme="dark"] #grain{mix-blend-mode:screen;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(2%,2%)}}
#glow-off{position:fixed;left:0;top:0;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%);pointer-events:none;z-index:-1;will-change:transform}

/* ============ INTRO ============ */
/* ============================================================
   Écran d'arrivée (2026-08-27, 2e version) : le logo ne s'efface pas,
   il VA SE POSER dans la barre de navigation, et le site se construit
   autour de lui. Rien n'est masqué ni mis à l'échelle en géant : le
   fond de l'écran d'arrivée est celui de la page, donc il n'y a pas de
   rideau qui se lève, juste un texte qui rejoint sa place.
   ============================================================ */
#intro{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;
  transition:opacity .55s var(--ease);will-change:opacity}
#intro.out{opacity:0;pointer-events:none}
#intro .ibrand{position:relative;text-rendering:geometricPrecision;backface-visibility:hidden;font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(46px,6.6vw,92px);line-height:1;display:flex;align-items:baseline;gap:.3em;
  color:var(--ink);transform-origin:left center;will-change:transform}
#intro .ibrand .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .14em .04em;margin:0 -.06em -.14em -.04em}
#intro .ibrand .w i{display:inline-block;font-style:normal;transform:translateY(112%);
  animation:iMonte .58s cubic-bezier(.16,.84,.3,1) forwards}
#intro .ibrand .w:nth-child(2) i{animation-delay:.06s}
#intro .ibrand .w:nth-child(3) i{animation-delay:.12s}
/* dans la barre, la marque est monochrome : l'esperluette repasse à l'encre
   pendant le vol, sinon elle change de couleur d'un coup à l'échange */
#intro .ibrand i.amp{color:var(--accent);transition:color .55s var(--ease)}
#intro.vol .ibrand i.amp{color:var(--ink)}
#intro .ibrand small{font-family:var(--font);font-weight:500;letter-spacing:0;font-size:.65em;
  color:var(--ink-faint);opacity:0;animation:iParait .38s .26s forwards}
@keyframes iMonte{to{transform:none}}
@keyframes iParait{to{opacity:1}}
/* la barre de navigation attend que le logo se pose */
html.intro-en-cours #nav .brand{opacity:0}
#nav .brand{transition:opacity .25s}
html.nav-attente #nav .bar{opacity:0;transform:translateY(-9px)}
html.nav-attente #nav .links a,html.nav-attente #nav .bar>.btn,html.nav-attente #theme{opacity:0;transform:translateY(-4px)}
#nav .links a,#nav .bar>.btn,#theme{transition:opacity .4s var(--ease),transform .45s var(--ease),background .3s,color .3s}
#nav .links a:nth-child(1){transition-delay:.02s}#nav .links a:nth-child(2){transition-delay:.05s}
#nav .links a:nth-child(3){transition-delay:.08s}#nav .links a:nth-child(4){transition-delay:.11s}
#nav .links a:nth-child(5){transition-delay:.14s}#nav .links a:nth-child(6){transition-delay:.17s}
#nav .links a:nth-child(7){transition-delay:.2s}
#nav .bar>.btn{transition-delay:.24s}#theme{transition-delay:.22s}
/* le filet de la barre fait une passe unique à l'arrivée : la même ligne qui
   servira ensuite d'indicateur de défilement signe la fin du chargement */
@keyframes navPasse{0%{transform:scaleX(0);opacity:.9}55%{transform:scaleX(1);opacity:.9}100%{transform:scaleX(1);opacity:0}}
#nav .bar .prog.passe{animation:navPasse .85s var(--ease) forwards}
#intro .sub{position:absolute;bottom:42px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);opacity:0;animation:iParait .4s .34s forwards;
  transition:opacity .3s var(--ease),transform .35s var(--ease)}
/* le sous-titre sort quand le vol commence, pas à une heure fixe : le vol
   attend les polices, les deux resteraient sinon désynchronisés */
#intro.vol .sub{opacity:0!important;transform:translateY(9px)}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fade{to{opacity:1}}
@keyframes load{to{width:100%}}

/* ============ NAV ============ */
#nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;width:min(calc(100% - 32px),var(--maxw));transition:width .6s var(--ease),top .6s var(--ease)}
#nav .bar .prog{position:absolute;left:24px;right:24px;bottom:0;height:2px;background:var(--accent);transform-origin:left;transform:scaleX(var(--sp,0));border-radius:2px;opacity:.8}
#nav .bar{position:relative;display:flex;align-items:center;gap:8px;padding:10px 10px 10px 20px;transition:opacity .45s var(--ease),transform .6s var(--ease);border-radius:var(--pill);background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-md);transition:padding .6s var(--ease)}
#nav .brand{white-space:nowrap;font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;font-size:20px;margin-right:auto;display:flex;align-items:baseline;gap:6px}
#nav .brand small{font-family:var(--font);font-weight:500;letter-spacing:0;font-size:13px;color:var(--ink-faint)}
#nav .links{display:flex;gap:4px}
#nav .links a{white-space:nowrap;padding:8px 12px;border-radius:var(--pill);font-size:14px;font-weight:500;color:var(--ink-soft);transition:color .3s,background .3s}
#nav .links a:hover,#nav .links a.on{color:var(--ink);background:var(--accent-tint)}
#nav .btn{padding:10px 18px;font-size:14px}
#theme{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--spring)}
#theme:hover{transform:rotate(-20deg)}
#nav.small{top:10px;width:min(calc(100% - 32px),1000px)}
#nav.small .bar{padding:6px 6px 6px 18px}
#burger{display:none;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);place-items:center;flex-direction:column;gap:5px}
#burger{position:relative}#burger i{position:absolute;left:11px;top:16px;display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transform-origin:50% 50%;transition:transform .4s var(--spring)}#burger i:last-child{top:22px}
body.nav-open #burger i:first-child{transform:translateY(3px) rotate(45deg)}body.nav-open #burger i:last-child{transform:translateY(-3px) rotate(-45deg)}
#mmenu{position:fixed;inset:0;z-index:49;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .4s}
body.nav-open #mmenu{opacity:1;pointer-events:auto}
.mm-in{padding:110px 28px 40px;display:flex;flex-direction:column;gap:6px}
.mm-in>a:not(.btn){font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:-.03em;padding:8px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(14px);transition:opacity .4s,transform .6s var(--ease)}
body.nav-open .mm-in>a{opacity:1;transform:none}
body.nav-open .mm-in>a:nth-child(2){transition-delay:.05s}body.nav-open .mm-in>a:nth-child(3){transition-delay:.1s}body.nav-open .mm-in>a:nth-child(4){transition-delay:.15s}body.nav-open .mm-in>a:nth-child(5){transition-delay:.2s}body.nav-open .mm-in>a:nth-child(6){transition-delay:.25s}
.mm-in small{color:var(--ink-faint);font-size:13px;margin-top:14px}
@media (max-width:900px){#nav .links{display:none}#burger{display:grid}#nav .bar{padding:8px 8px 8px 16px}#nav .bar>.btn{display:none}#nav .brand{font-size:18px}}

/* ============ HERO ============ */
#hero{padding:calc(var(--nav-h) + 72px) 0 40px;position:relative;overflow:hidden}
.hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;min-height:calc(100svh - var(--nav-h) - 140px)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.pills span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:8px 13px;border-radius:99px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft)}
.pills span i{width:7px;height:7px;border-radius:50%;background:var(--cat-boutique);box-shadow:0 0 0 3px color-mix(in srgb,var(--cat-boutique) 22%,transparent)}
#hero h1{font-size:clamp(42px,5.6vw,82px);font-variation-settings:"wdth" 84,"opsz" 96;line-height:.96;letter-spacing:-.045em}
#hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .12em .16em .04em;margin:0 -.12em -.16em -.04em}
#hero h1 .w i{display:inline-block;font-style:normal;transform:translateY(105%);opacity:0;transition:transform 1s var(--ease),opacity .5s}
#hero h1 .w i.it{font-style:italic;color:var(--accent);font-weight:600}
#hero.in h1 .w i{transform:none;opacity:1}
#hero .pills,#hero .lead,#hero .cta,#hero .stats{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
#hero.in .pills{opacity:1;transform:none;transition-delay:.1s}
.pills span{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .7s var(--spring)}
#hero.in .pills span{opacity:1;transform:none}
#hero.in .pills span:nth-child(1){transition-delay:.2s}#hero.in .pills span:nth-child(2){transition-delay:.32s}#hero.in .pills span:nth-child(3){transition-delay:.44s}
#hero.in .lead{opacity:1;transform:none;transition-delay:.8s}
#hero.in .cta{opacity:1;transform:none;transition-delay:.95s}
#hero.in .stats{opacity:1;transform:none;transition-delay:1.2s}
#hero .lead{margin:26px 0 30px;max-width:48ch}
#hero .cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.link{font-weight:600;display:inline-flex;align-items:center;gap:8px;padding:12px 4px;border-bottom:2px solid var(--ink);transition:transform .5s var(--spring)}
.link .arr{transition:transform .5s var(--spring)}.link:hover .arr{transform:translateX(5px)}
#hero .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--line);padding-top:24px;margin-top:40px;position:relative}
#hero .stats::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--accent);transition:width 1.6s var(--ease) 1.4s}
#hero.in .stats::before{width:100%}
#hero .stat b{font-family:var(--font-display);font-size:clamp(24px,2.6vw,36px);font-weight:700;letter-spacing:-.04em;display:block;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
#hero .stat b em{font-style:normal;color:var(--accent)}
#hero .stat span{font-size:13px;color:var(--ink-faint);display:block;margin-top:6px}
/* showcase of real sites */
.hgrid{grid-template-columns:.85fr 1.15fr}
@media (min-width:1101px){#hero .show{margin-right:calc(-1 * clamp(0px,6vw,120px))}#hero .show .frame{border-radius:16px 0 0 16px}}
#hero .show{position:relative;opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease) .5s,transform 1.2s var(--ease) .5s}
#hero.in .show{opacity:1;transform:none}
.show .frame{background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line)}
.show .tb{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--card)}
.show .tb i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.show .tb i:first-child{background:#F87171}.show .tb i:nth-child(2){background:#FBBF24}.show .tb i:nth-child(3){background:#34D399}
.show .url{flex:1;margin-left:8px;background:var(--bg-2);border-radius:99px;padding:5px 12px;font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums}
.show .url b{font-weight:500}
.show .url u{width:1.5px;height:12px;background:var(--accent);animation:blink 1s steps(2) infinite;text-decoration:none}
.show .live{font-style:normal;font-size:11px;font-weight:600;color:#047857;display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:rgba(16,185,129,.12)}
.show .live i{width:7px;height:7px;border-radius:50%;background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.25);animation:pulse 2s infinite}
/* site générique qui change d'identité */
.morph{--t1:#8B5E3C;--t2:#F6F1EA;--t3:#3B2A1E;--tf:Georgia,'Times New Roman',serif;--r:6px}
.site{aspect-ratio:16/9.6;background:var(--t2);color:var(--t3);padding:14px 18px;display:flex;flex-direction:column;gap:14px;transition:background .9s var(--ease),color .9s var(--ease);font-family:var(--font)}
.snav{display:flex;align-items:center;gap:14px;font-size:11px}
.slogo{display:flex;align-items:center;gap:7px;font-family:var(--tf);font-size:14px;font-weight:700;transition:font-family .2s}
.slogo i{width:16px;height:16px;border-radius:var(--r);background:var(--t1);transition:background .9s,border-radius .9s}
.slinks{display:flex;gap:12px;margin-left:auto;opacity:.75}.slinks em{font-style:normal}
.sbtn{background:var(--t1);color:#fff;padding:6px 11px;border-radius:99px;font-weight:600;font-size:10px;white-space:nowrap;transition:background .9s,border-radius .9s;border-radius:var(--r)}
.sbtn.big{font-size:11px;padding:9px 14px;display:inline-block;margin-top:12px}
.shero{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:center;flex:1}
.stxt small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t1);font-weight:700;display:block;margin-bottom:6px;transition:color .9s}
.stxt h4{font-family:var(--tf);font-size:clamp(18px,1.9vw,28px);line-height:1.05;letter-spacing:-.02em;font-weight:700;min-height:2.1em}
.stxt p{font-size:11px;opacity:.75;margin-top:8px;max-width:30ch}
.spic{position:relative;aspect-ratio:4/3;border-radius:calc(var(--r) * 2);background:linear-gradient(135deg,color-mix(in srgb,var(--t1) 85%,#000),var(--t1) 60%,color-mix(in srgb,var(--t1) 70%,#fff));overflow:hidden;transition:background .9s,border-radius .9s}
.spic i{position:absolute;border-radius:50%;background:rgba(255,255,255,.18);transition:all .9s var(--ease)}
.spic .a{width:60%;aspect-ratio:1;left:-18%;bottom:-30%}.spic .b{width:34%;aspect-ratio:1;right:8%;top:10%;background:rgba(255,255,255,.28)}.spic .c{width:14%;aspect-ratio:1;right:22%;bottom:16%;background:rgba(0,0,0,.18)}
.morph[data-t="1"] .spic .a{border-radius:50%;width:70%;left:15%;bottom:-40%}.morph[data-t="1"] .spic .b{width:16%;right:14%;top:14%}.morph[data-t="1"] .spic .c{width:10%;right:40%;bottom:30%}
.morph[data-t="2"] .spic .a{border-radius:4px;width:24%;left:20%;bottom:18%;height:60%}.morph[data-t="2"] .spic .b{border-radius:4px;width:24%;right:20%;top:22%;height:60%}
.morph[data-t="3"] .spic .a{width:40%;left:8%;bottom:10%}.morph[data-t="3"] .spic .b{width:40%;right:8%;top:8%;background:rgba(255,255,255,.4)}
.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.scards div{background:rgba(255,255,255,.7);border-radius:var(--r);padding:9px 10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);transition:border-radius .9s}
.scards b{display:block;height:7px;width:55%;border-radius:3px;background:var(--t1);opacity:.9;transition:background .9s}
.scards span{display:block;height:5px;width:80%;border-radius:3px;background:currentColor;opacity:.2;margin-top:6px}
.site{transition:background .9s var(--ease),color .9s var(--ease),opacity .35s,transform .5s var(--ease);position:relative}
.site.sw{opacity:0;transform:scale(.985)}
.lay{display:none;flex-direction:column;gap:14px;height:100%}
.morph[data-t="0"] .lay0,.morph[data-t="1"] .lay1,.morph[data-t="2"] .lay2,.morph[data-t="3"] .lay3{display:flex}
/* lay0 : classique */
.scards div{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center}
.scards .wd{grid-row:1/3;width:28px;height:28px;border-radius:6px;background:repeating-linear-gradient(90deg,var(--t1) 0 3px,color-mix(in srgb,var(--t1) 70%,#fff) 3px 6px)}
/* lay1 : restaurant, photo pleine largeur */
.snav.center{justify-content:center;gap:22px}.snav.center .slinks{margin:0}
.fullhero{flex:1;position:relative;border-radius:calc(var(--r) * 1.5);overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--t1) 40%,#000) 0%,color-mix(in srgb,var(--t1) 85%,#000) 70%);display:grid;place-items:center;text-align:center;color:#fff;padding:18px}
.fullhero::before{content:"";position:absolute;right:-10%;bottom:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F4D19B,#C0672B 60%,#7A3A17);box-shadow:inset 0 0 30px rgba(0,0,0,.35)}
.fullhero::after{content:"";position:absolute;right:8%;bottom:-16%;width:24%;aspect-ratio:1;border-radius:50%;border:4px dotted rgba(255,255,255,.35)}
.fh{position:relative;z-index:1}.fh small{color:#fff;opacity:.85;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;display:block;margin-bottom:6px}
.fh h4{font-family:var(--tf);font-size:clamp(20px,2.2vw,32px);line-height:1;letter-spacing:-.03em;font-weight:800;max-width:16ch;margin:0 auto}
.fbtns{display:flex;gap:8px;justify-content:center;margin-top:12px}.sbtn.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.opn{position:absolute;left:12px;top:12px;font-style:normal;font-size:10px;font-weight:700;background:#fff;color:var(--t3);padding:5px 9px;border-radius:99px;display:flex;align-items:center;gap:5px;z-index:1}.opn i{width:6px;height:6px;border-radius:50%;background:#10B981}
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.menu div{display:flex;align-items:baseline;gap:6px;font-size:11px;padding:8px 10px;border-radius:var(--r);background:rgba(0,0,0,.04)}
.menu b{font-family:var(--tf);font-weight:700}.menu s{flex:1;border-bottom:1px dotted currentColor;opacity:.4;text-decoration:none;height:0}.menu span{font-weight:700;color:var(--t1)}
/* lay2 : salon, éditorial */
.snav.upper{border-bottom:1px solid rgba(0,0,0,.12);padding-bottom:10px}
.snav.upper .slogo{font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;font-size:12px;font-weight:800}
.snav.upper .slinks em{letter-spacing:.12em;text-transform:uppercase;font-size:9px;font-weight:600}
.sal{flex:1;display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:stretch}
.saltxt small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.6;display:block;margin-bottom:8px}
.saltxt h4{font-family:var(--font-display);font-size:clamp(26px,3.2vw,46px);line-height:.95;letter-spacing:-.04em;font-weight:800;font-variation-settings:"wdth" 82}
.saltxt p{font-size:11px;opacity:.7;margin-top:10px;max-width:28ch}
.prices{display:flex;flex-direction:column;justify-content:flex-end;gap:0;font-size:11px}
.prices>div{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid rgba(0,0,0,.12)}
.prices b{font-weight:700}
.prices .slot{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;background:var(--t1);color:#fff;border-radius:var(--r);padding:10px 12px;margin-top:8px;border:0}
.prices .slot em{font-style:normal;font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.75;grid-column:1}.prices .slot b{grid-column:1;font-size:13px}.prices .slot .sbtn{grid-column:2;grid-row:1/3;background:#fff;color:var(--t1)}
/* lay3 : boutique, grille produits */
.promo{text-align:center;font-size:10px;font-weight:700;background:var(--t1);color:#fff;padding:5px;border-radius:99px;margin:-6px 0 0}
.cartic{margin-left:auto;font-size:10px;font-weight:700;display:flex;align-items:center;gap:6px}.cartic b{width:18px;height:18px;border-radius:50%;background:var(--t1);color:#fff;display:grid;place-items:center;font-size:10px}
.lay3 .slinks{margin-left:0}
.grid3{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pr{background:#fff;border-radius:calc(var(--r) * .8);padding:8px;display:flex;flex-direction:column;gap:3px;font-size:11px;box-shadow:0 8px 24px -14px rgba(0,0,0,.25)}
.pr i{aspect-ratio:1;border-radius:calc(var(--r) * .7);background:linear-gradient(135deg,color-mix(in srgb,var(--t1) 25%,#fff),color-mix(in srgb,var(--t1) 55%,#fff));position:relative;overflow:hidden;margin-bottom:4px}
.pr i::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:5px solid #E8C27A;border-radius:50%;width:46%;aspect-ratio:1}
.pr .p2::after{border-radius:50%;border-width:7px;width:34%}.pr .p3::after{border:0;width:16px;height:16px;background:#F4EBDD;box-shadow:0 0 0 3px #fff,0 -20px 0 -4px #E8C27A}
.pr b{font-family:var(--tf);font-weight:700}.pr span{opacity:.7}.pr u{text-decoration:none;text-align:center;background:var(--t1);color:#fff;border-radius:99px;padding:5px;font-weight:700;font-size:10px;margin-top:4px}
.morph[data-t="3"] .pr:nth-child(2) u{animation:addpulse 4.2s ease-in-out infinite}
@keyframes addpulse{0%,45%{background:var(--t1)}55%,80%{background:#10B981}90%,100%{background:var(--t1)}}
.site [data-k]{transition:opacity .35s}
.thumbs.chips{grid-template-columns:repeat(4,1fr)}
.thumbs.chips button{aspect-ratio:auto;padding:10px 8px;font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--card);border-radius:99px;opacity:1;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.thumbs.chips button.on{color:#fff;background:var(--ink);transform:none;box-shadow:none}
.thumbs.chips button i{height:2px;background:var(--accent)}
.slides{position:relative;aspect-ratio:16/9.6;overflow:hidden;background:var(--bg-2)}
.slide{position:absolute;inset:0;transform:translateY(70%) rotate(3deg) scale(.96);opacity:0;transition:transform 1.1s var(--ease),opacity .5s;transform-origin:50% 100%}
.slide.on{transform:none;opacity:1;z-index:2}
.slide.out{transform:translateY(-6%) scale(.94);opacity:0;transition:transform .9s var(--ease),opacity .6s;z-index:1}
.slide img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.cap{display:flex;align-items:baseline;gap:12px;margin-top:14px;padding:0 4px}
.cap b{font-family:var(--font-display);font-size:18px;letter-spacing:-.02em}
.cap span{font-size:13px;color:var(--ink-faint)}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
.thumbs button{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);opacity:.55;transition:opacity .4s,transform .5s var(--spring)}
.thumbs button img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.thumbs button i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent)}
.thumbs button.on{opacity:1;transform:translateY(-3px);box-shadow:0 0 0 2px var(--accent)}
.thumbs button.on i{animation:tabp 3.8s linear forwards}
.thumbs button:hover{opacity:1}
.fbadge{position:absolute;left:-14px;top:-16px;transform:scale(.6);opacity:0;background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;padding:9px 14px;border-radius:99px;box-shadow:var(--shadow-md);transition:transform .9s var(--spring) 1.3s,opacity .5s 1.3s;z-index:3;white-space:nowrap}
#hero.in .fbadge{transform:none;opacity:1}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.3;pointer-events:none;z-index:0;will-change:auto}
.blob.a{width:520px;height:520px;background:var(--accent);left:-160px;top:-120px;animation:drift 14s ease-in-out infinite alternate}
.blob.b{width:420px;height:420px;background:var(--cat-saas);right:-120px;bottom:-80px;opacity:.14;animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(60px,40px) scale(1.1)}}
#hero .wrap{position:relative;z-index:1}
@media (max-width:900px){.hgrid{grid-template-columns:1fr;min-height:auto;gap:28px}#hero .show{margin-top:8px}.thumbs.chips{grid-template-columns:repeat(2,1fr)}#hero .stats{grid-template-columns:1fr;gap:14px;margin-top:28px}#hero .stat span{margin-top:2px}#hero{padding-top:calc(var(--nav-h) + 40px)}#hero h1{font-size:clamp(38px,11vw,52px)}#hero .lead{font-size:16px;margin:18px 0 22px}#hero .cta{gap:14px}.fbadge{left:8px;top:-12px;font-size:11px}.site{padding:12px;gap:10px}.slinks{display:none}.stxt h4{font-size:16px}.stxt p{display:none}.sbtn.big{margin-top:8px}.scards{display:none}.shero{grid-template-columns:1fr 1fr}.menu{grid-template-columns:1fr}.menu div:nth-child(n+3){display:none}.sal{grid-template-columns:1fr}.prices>div:nth-child(-n+2){display:none}.saltxt h4{font-size:22px}.grid3 .pr:nth-child(3){display:none}.grid3{grid-template-columns:1fr 1fr}.fh h4{font-size:18px}.cap b{font-size:15px}.cap span{font-size:12px}}

/* ============ MARQUEE ============ */
.mlabel{text-align:center;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:18px}
#marq{padding:28px 0 34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg-2)}
.track{display:flex;gap:56px;width:max-content;animation:marq 38s linear infinite}
.track:hover{animation-play-state:paused}
#marq .row2 .track{animation-direction:reverse;animation-duration:46s;margin-top:18px}
.track span{font-family:var(--font-display);font-size:clamp(30px,4.6vw,68px);font-weight:700;letter-spacing:-.03em;white-space:nowrap;display:flex;align-items:center;gap:18px;color:var(--ink);opacity:.9}
.track span::after{content:"✳";color:var(--c,var(--accent));font-size:.55em;animation:spin 9s linear infinite}
.track span.soft{color:var(--ink-faint)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============ MANIFESTE ============ */
#manif{padding:clamp(90px,12vw,170px) 0;position:relative}
#manif .wrap{position:relative}
.mtext{font-family:var(--font-display);font-size:clamp(28px,4.6vw,66px);font-weight:600;letter-spacing:-.035em;line-height:1.1;max-width:1100px;text-wrap:pretty}
.mtext .mw{opacity:.13;transition:opacity .35s;display:inline}
.mtext .mw.on{opacity:1}
.mtext mark{background:none;color:var(--accent);font-style:italic;position:relative;z-index:0}
.mtext mark::before{content:"";position:absolute;left:-.1em;right:-.1em;top:.1em;bottom:0;background:var(--accent-tint);z-index:-1;transform:skew(-8deg) scaleX(0);transform-origin:left;transition:transform .9s var(--ease);border-radius:.15em}
.mtext mark.on::before{transform:skew(-8deg) scaleX(1)}
#manif .note{right:0;bottom:-30px;transform:rotate(3deg);color:var(--accent)}
#manif .note .arrow{left:-120px;top:-30px;transform:scaleX(-1) rotate(-30deg)}

@keyframes badgepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* Avant / après */
.cmp{position:relative;overflow:hidden;border-radius:14px;background:var(--bg-2);box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line);--p:55;aspect-ratio:16/9;user-select:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.cmp .bef{position:absolute;inset:0;width:calc(var(--p) * 1%);overflow:hidden}
.cmp .bef img{width:calc(100% * (100 / var(--p)));height:100%;max-width:none}
.cmp .hdl{position:absolute;top:0;bottom:0;left:calc(var(--p) * 1%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);transform:translateX(-1px)}
.cmp .hdl i{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-md);display:grid;place-items:center}
.cmp .hdl i::before{content:"◂ ▸";font-size:12px;color:var(--ink);letter-spacing:-2px}
.cmp.play .hdl i{animation:hdl 2.2s ease-in-out infinite}
@keyframes hdl{50%{transform:scale(1.12)}}
.cmp .lab{position:absolute;top:12px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:99px;background:rgba(21,21,30,.75);color:#fff;backdrop-filter:blur(6px)}
.cmp .lab.l{left:12px}.cmp .lab.r{right:12px;background:var(--accent)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp .wl{position:absolute;left:12px;bottom:12px;font-size:12px;font-weight:600;background:#fff;color:var(--ink);padding:6px 10px;border-radius:99px;box-shadow:var(--shadow-md)}
.cmp.auto.play{animation:sweep 7s ease-in-out infinite}
@keyframes sweep{0%,10%{--p:62}45%,55%{--p:18}90%,100%{--p:62}}
@property --p{syntax:"<number>";inherits:true;initial-value:55}
/* Islands */
.isl{transform:scale(.965) translateY(30px);opacity:.6;transition:transform 1.1s var(--ease),opacity .8s var(--ease)}
.isl.in{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.isl{transform:none;opacity:1}}

/* ============ CHAPITRES ============ */
#why{padding:clamp(60px,8vw,110px) 0 clamp(40px,5vw,70px)}
.chap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:start}
.cblock::before{content:attr(data-n);position:absolute;left:-.08em;top:50%;transform:translateY(-58%);font-family:var(--font-display);font-size:clamp(160px,22vw,320px);font-weight:800;letter-spacing:-.06em;color:var(--ink);opacity:.045;line-height:1;pointer-events:none;z-index:-1}
.cblock{position:relative;min-height:88svh;display:flex;flex-direction:column;justify-content:center;gap:18px;opacity:.22;transform:translateX(-14px);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.cblock.on{opacity:1;transform:none}
.cnum{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cblock h2{font-size:clamp(32px,3.8vw,56px);line-height:.98}
.cblock p{color:var(--ink-soft);font-size:clamp(16px,1.25vw,19px);max-width:46ch}
.cchips{display:flex;flex-wrap:wrap;gap:8px}
.cchips span{font-size:13px;font-weight:600;padding:7px 12px;border-radius:99px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-soft);transition:background .4s,color .4s}
.cblock.on .cchips span.lit{background:var(--accent);color:#fff;box-shadow:none}
.cvis{position:relative;align-self:stretch}
/* Visuel épinglé des chapitres : sa hauteur s'adapte à l'écran, donc le coller
   à 96px du haut le laissait trop haut sur grand écran et collé au bas sur un
   portable. On le centre dans l'espace réellement disponible sous la barre. */
.cpin{--cpin-h:min(calc(100svh - var(--nav-h) - 96px),620px);position:sticky;top:calc(var(--nav-h) + max(16px,(100svh - var(--nav-h) - var(--cpin-h)) / 2));height:var(--cpin-h);min-height:360px}
.cv{position:absolute;inset:0;opacity:0;transform:translateY(30px) scale(.97);transition:opacity .6s var(--ease),transform .9s var(--ease);pointer-events:none}
.cv.on{opacity:1;transform:none;pointer-events:auto}
.cdots{position:absolute;right:-28px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}
.cdots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s,transform .4s var(--spring);cursor:pointer}
.cdots i.on{background:var(--accent);transform:scale(1.5)}
/* v0: planche d'identité */
.board{--pick:#8B5E3C;--pick-ink:#fff;position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:12px}
.bi{background:var(--card);border-radius:16px;box-shadow:var(--shadow-md),inset 0 0 0 1px var(--line);padding:14px;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(24px) rotate(-1deg);transition:opacity .5s,transform .9s var(--spring);position:relative;overflow:hidden}
.cv.on .bi{opacity:1;transform:none}
.cv.on .bi:nth-child(2){transition-delay:.1s}.cv.on .bi:nth-child(3){transition-delay:.2s}.cv.on .bi:nth-child(4){transition-delay:.3s}.cv.on .bi:nth-child(5){transition-delay:.4s}.cv.on .bi:nth-child(6){transition-delay:.55s}
.bi small{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.bi em{display:block;font-style:normal;font-size:11px;color:var(--ink-soft);margin-top:8px}
.sw1{grid-column:1/4;grid-row:1/3}.ph1{grid-column:4/7;grid-row:1/4;padding:0}.ph2{grid-column:5/7;grid-row:4/7;padding:0}.ty{grid-column:1/4;grid-row:3/5}.tone{grid-column:1/3;grid-row:5/7}.res{grid-column:3/5;grid-row:5/7}
.swl{display:flex;gap:6px}.swl i{flex:1;aspect-ratio:1;border-radius:8px;transform:scale(.4);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(21,21,30,.12);transition:transform .7s var(--spring),box-shadow .3s}
.cv.on .swl i{transform:none}.cv.on .swl i:nth-child(2){transition-delay:.15s}.cv.on .swl i:nth-child(3){transition-delay:.25s}.cv.on .swl i:nth-child(4){transition-delay:.35s}.cv.on .swl i:nth-child(5){transition-delay:.45s}
.ph1 i,.ph2 i{position:absolute;inset:0;transition:background .55s var(--ease)}.ph1 i{background:linear-gradient(160deg,color-mix(in srgb,var(--pick) 42%,#fff),var(--pick) 55%,color-mix(in srgb,var(--pick) 55%,#000))}
.ph1 i::after{content:"";position:absolute;left:12%;right:12%;top:30%;height:46%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 10px,transparent 10px 22px);border-radius:8px;transform:skewY(-6deg)}
.ph2 i{background:linear-gradient(160deg,color-mix(in srgb,var(--pick) 10%,#fff),var(--pick))}.ph2 i::after{content:"";position:absolute;left:20%;top:22%;width:60%;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--pick) 72%,#000);box-shadow:inset -14px -10px 0 rgba(0,0,0,.18);transition:background .55s var(--ease)}
.ph1 small{position:absolute;left:12px;bottom:10px;color:#fff;background:rgba(0,0,0,.45);padding:4px 8px;border-radius:99px;margin:0;font-size:9px;backdrop-filter:blur(4px)}
.ty b{display:flex;gap:10px;align-items:baseline}.ty b span{font-size:34px;line-height:1;color:var(--ink);opacity:.58;transition:opacity .5s,transform .5s}
.ty .f1{font-family:Georgia,serif}.ty .f2{font-family:var(--font-display);font-weight:800}.ty .f3{font-family:var(--font);font-weight:300}
.cv.on .ty .f1{opacity:1;transform:scale(1.15)}
.tone .chips{display:flex;flex-wrap:wrap;gap:5px}.tone .chips span{font-size:11px;font-weight:600;padding:5px 9px;border-radius:99px;background:var(--bg-2);color:var(--ink-soft);transition:background .4s,color .4s}
.tone .chips span.lit{background:var(--pick);color:var(--pick-ink)}
.swl i[aria-pressed="true"]{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--pick),inset 0 0 0 1px rgba(21,21,30,.12)}
.comp{display:flex;flex-direction:column;gap:8px}.cbtn{display:inline-block;background:var(--pick);color:var(--pick-ink);font-size:11px;font-weight:700;padding:8px 12px;border-radius:8px;align-self:flex-start;font-family:Georgia,serif}
.ccard{display:block;background:color-mix(in srgb,var(--pick) 9%,#fff);border-radius:8px;padding:8px;transition:background .55s var(--ease)}.ccard b{display:block;height:8px;width:50%;background:color-mix(in srgb,var(--pick) 78%,#000);border-radius:3px;margin-bottom:6px;transition:background .55s var(--ease)}.ccard u{display:block;height:4px;width:85%;background:color-mix(in srgb,var(--pick) 45%,#fff);border-radius:2px;margin-bottom:4px;transition:background .55s var(--ease)}.ccard u.s{width:60%}
@media (max-width:1100px){.bi em{display:none}.ty b span{font-size:26px}}
/* v0: avant/après (remplacé) */
.v0in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px}
.v0cap{font-size:14px;color:var(--ink-soft);padding:0 4px}.v0cap b{color:var(--ink);font-weight:600}
/* v0: three sites (inutilisé) */
.duo2{position:absolute;inset:0}
.dcard{position:absolute;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line);width:62%}
.dcard .tb{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line)}
.dcard .tb i{width:8px;height:8px;border-radius:50%;background:var(--line)}.dcard .tb i:first-child{background:#F87171}.dcard .tb i:nth-child(2){background:#FBBF24}.dcard .tb i:nth-child(3){background:#34D399}.dcard .tb span{margin-left:6px;font-size:11px;color:var(--ink-faint)}
.dcard img{display:block;width:100%;height:clamp(140px,15vw,210px);object-fit:cover;object-position:top}
.dcard b{position:absolute;left:12px;bottom:12px;font-size:12px;font-weight:600;background:var(--ink);color:var(--bg);padding:6px 10px;border-radius:99px}
.dcard.a{left:0;top:2%;z-index:3;transform:rotate(-2.5deg)}.dcard.b{right:0;top:31%;z-index:2;transform:rotate(2deg)}.dcard.c{left:10%;top:60%;z-index:1;transform:rotate(-1deg);width:58%}
.cv.on .dcard{animation:floatc 7s ease-in-out infinite}
.cv.on .dcard.b{animation-delay:-2s}.cv.on .dcard.c{animation-delay:-4s}
@keyframes floatc{50%{translate:0 -8px}}
/* v1: four scenes */
.cv .steps2{position:absolute;inset:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px}
.steps2>div{position:relative;display:flex;flex-direction:column}
.steps2 .scene{margin:0;aspect-ratio:auto;flex:1;min-height:0}
/* On n'estompe plus la case entière : les pastilles numérotées restent lisibles
   sur les quatre, sinon on ne voit qu'un visuel allumé et jamais la suite des
   étapes. Seule la scène s'estompe. */
.steps2 .sq{opacity:1;filter:none;transition:transform .6s var(--ease);padding:0}
.steps2 .sq .scene{opacity:.42;filter:saturate(.6);transition:opacity .5s,filter .5s}
.steps2 .sq.on .scene{opacity:1;filter:none}
.steps2 .sq .stp{opacity:.72;transition:opacity .4s}
.steps2 .sq.on .stp{opacity:1}
.steps2 .sq:nth-child(1){grid-area:1/1}.steps2 .sq:nth-child(2){grid-area:1/2}.steps2 .sq:nth-child(3){grid-area:2/2}.steps2 .sq:nth-child(4){grid-area:2/1}
.stp{position:absolute;left:10px;top:10px;z-index:5;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;background:var(--ink);color:var(--bg);padding:5px 12px 5px 5px;border-radius:99px;overflow:hidden}
.stp i{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700}
.stp em{font-style:normal;color:var(--ink-faint);font-weight:500}
.stp u{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);width:0}
.sq.on .stp u{animation:tabp 4.2s linear forwards}
.con{position:absolute;width:30px;height:30px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line),var(--shadow-md);display:grid;place-items:center;font-size:15px;font-weight:700;color:var(--ink-faint);z-index:6;transition:background .4s,color .4s,transform .5s var(--spring)}
.con.on{background:var(--accent);color:#fff;transform:scale(1.15);box-shadow:none}
.con.c1{left:50%;top:25%;margin:-15px 0 0 -15px}.con.c2{left:75%;top:50%;margin:-15px 0 0 -15px}.con.c3{left:50%;top:75%;margin:-15px 0 0 -15px}
/* v2: chat */
.cv.v2 .chat{position:absolute;inset:0;min-height:0}
@media (max-width:900px){.chap{grid-template-columns:1fr;gap:0}.cvis{display:none}.cblock{min-height:auto;opacity:1;transform:none;padding:28px 0;border-top:1px solid var(--line)}.cblock:first-child{border-top:0}.cdots{display:none}.cblock h2{font-size:clamp(30px,8.5vw,40px)}.cblock .mvis{display:block}
.mvis{display:none;margin-top:14px}.mvis .mboard{position:relative;inset:auto;height:420px}.mvis .mboard .bi{opacity:1;transform:none}.mvis .cmp{aspect-ratio:16/10}.mvis .steps2m{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mvis .steps2m .scene{aspect-ratio:1;margin:0}.mvis .steps2m .stp{left:8px;top:8px;font-size:10px;padding:4px 9px 4px 4px}.mvis .steps2m .stp i{width:18px;height:18px;font-size:10px}.mvis .steps2m .stp em{display:none}.mvis .chat{min-height:380px}
#why .who{grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}#why .whol,#why .claim{grid-column:1/-1}}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}
.sec-h{margin-bottom:48px;max-width:820px;position:relative;padding-left:clamp(0px,4vw,72px)}
.sec-h .idx{position:absolute;right:calc(-1 * clamp(0px,20vw,420px));top:6px;font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink-faint);white-space:nowrap}
.sec-h .idx:empty{display:none}
@media (max-width:1100px){.sec-h{padding-left:0}.sec-h .idx{display:none}}
.sec-h h2{font-size:clamp(34px,4.4vw,60px);margin:16px 0 20px;line-height:.98}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .12em .18em .04em;margin:0 -.12em -.18em -.04em}
.split .w i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform 1s var(--ease)}
.split.in .w i{transform:none}
section{padding:clamp(72px,9vw,120px) 0;scroll-margin-top:calc(var(--nav-h) + 12px)}
@media (max-width:900px){section{padding:56px 0}#seconde,#service{padding:48px var(--pad)}#seconde,#service,#projets{margin-left:10px!important;margin-right:10px!important;border-radius:28px}#outils,#contact{padding-left:10px!important;padding-right:10px!important}#outils .blk,#contact .blk{border-radius:28px}.sec-h{margin-bottom:28px}.sec-h h2{font-size:clamp(30px,8.5vw,40px)}.lead{font-size:16px}#why{padding-top:40px}.who .person{padding:12px 14px}}
#seconde,#service{padding:clamp(60px,8vw,100px) var(--pad)}

/* ============ PROJETS (horizontal pinned) ============ */
#projets{padding:0;position:relative;margin:0 calc(var(--pad) * .5);border-radius:var(--r-xl);background:color-mix(in srgb,var(--tint,var(--bg)) 16%,var(--bg));transition:background .7s var(--ease);overflow:clip}
#projets .pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
#projets .cnt2{font-family:var(--font-display);font-size:clamp(36px,4.5vw,68px);font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.15em}
#projets .cnt2 small{font-size:.35em;color:var(--ink-soft);font-weight:600;letter-spacing:-.02em}
#projets .pj .note{top:-14px;right:18px;background:#fff;color:var(--ink);padding:4px 12px;border-radius:8px;box-shadow:var(--shadow-md);transform:rotate(4deg);font-size:19px}
#projets .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px}
#projets .head>div{min-width:0;max-width:100%}
#projets .pin .wrap{width:100%}
.filters{max-width:100%}
#projets .head h2{font-size:clamp(30px,3.6vw,52px)}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.filters button{font-size:13px;font-weight:600;padding:7px 13px;border-radius:99px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-soft);transition:background .3s,color .3s}
.filters button:hover{color:var(--ink)}
.filters button.on{background:var(--ink);color:var(--bg);box-shadow:none}
.pj.hide{display:none}
#projets .prog{width:220px;height:3px;background:var(--line);border-radius:3px;overflow:hidden;flex:none;margin-bottom:14px}
#projets .hr{display:flex;flex-direction:column;align-items:flex-end;flex:none}
#projets .prog i{display:block;height:100%;background:var(--accent);width:var(--p,0%)}
#projets .rail{display:flex;gap:24px;padding-left:var(--pad);will-change:transform}
.pj{flex:none;width:clamp(280px,25vw,400px);aspect-ratio:4/4.6;border-radius:var(--r-lg);overflow:hidden;position:relative;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;opacity:0;transform:translateY(60px) rotate(2deg);transition:transform .9s var(--ease),opacity .6s,box-shadow .5s}
#projets.in .pj{opacity:1;transform:none}
#projets.in .pj:nth-child(2){transition-delay:.08s}#projets.in .pj:nth-child(3){transition-delay:.16s}#projets.in .pj:nth-child(4){transition-delay:.24s}#projets.in .pj:nth-child(5){transition-delay:.32s}
#projets.in .pj:hover{transform:translateY(-10px) scale(1.01);box-shadow:var(--shadow-lg);transition-delay:0s}
.pj .art{flex:1;position:relative;background:var(--c);overflow:hidden}
.pj .art img{position:absolute;left:0;top:10%;width:100%;height:auto;border-radius:10px 10px 0 0;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);transform:translateY(16px);transition:transform .25s linear;will-change:transform}
#projets.in .pj:not(:hover) .art{animation:artfloat 6s ease-in-out infinite}
#projets.in .pj:nth-child(2n) .art{animation-delay:-2s}#projets.in .pj:nth-child(3n) .art{animation-delay:-4s}
@keyframes artfloat{50%{translate:0 -5px}}
.pj .meta .tag::before{animation:pulse 2.4s infinite}
.pj:hover .art img{transform:translateY(0) scale(1.03)}
.pj .art::after{content:"Voir la fiche";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);background:var(--ink);color:var(--bg);font-size:13px;font-weight:600;padding:10px 16px;border-radius:99px;opacity:0;transition:opacity .4s,transform .6s var(--spring);box-shadow:var(--shadow-lg);z-index:2}
.pj:hover .art::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pj:hover .art::after{opacity:1}
#projets .cnt2 span{display:inline-block;transition:transform .4s var(--spring),opacity .3s}
#projets .cnt2 span.flip{transform:translateY(-.4em);opacity:0}
.pj .art.app{--x:1}.pj .art.app .mini{position:absolute;left:0;top:10%;right:0;bottom:-10%;background:#16162A;border-radius:12px 12px 0 0;padding:14px;color:#E8E8F4;box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}
.pj .art.app .kpis b{font-size:18px}.pj .art.app .bars{height:70px}
.pj .art .win{position:absolute;left:10%;right:-6%;top:14%;bottom:-4%;background:var(--bg);border-radius:12px 0 0 0;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);transform:translateY(24px) rotate(-1deg);transition:transform 1s var(--ease);padding:14px}
.pj:hover .art .win{transform:translateY(8px) rotate(0)}
.pj .art .win b{display:block;height:8px;width:38%;border-radius:4px;background:var(--ink);opacity:.85;margin-bottom:8px}
.pj .art .win i{display:block;height:5px;border-radius:3px;background:var(--line);margin-bottom:6px}
.pj .art .win i:nth-child(3){width:70%}.pj .art .win i:nth-child(4){width:52%}
.pj .art .win u{display:inline-block;margin-top:10px;height:16px;width:56px;border-radius:99px;background:var(--c)}
.pj .art .big{position:absolute;left:16px;top:18px;font-family:var(--font-display);font-size:clamp(60px,7vw,110px);font-weight:800;letter-spacing:-.05em;color:#fff;opacity:.28;line-height:1;mix-blend-mode:overlay}
.pj .meta{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px}
.pj .meta .tag{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c);display:flex;align-items:center;gap:6px}
.pj .meta .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.pj .meta h3{font-size:24px;letter-spacing:-.03em}
.pj .meta p{font-size:14px;color:var(--ink-soft)}
.pj .meta .go{margin-top:10px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.pj .meta .go .arr{transition:transform .5s var(--spring)}
.pj:hover .go .arr{transform:translateX(6px)}
.pj.end{background:var(--accent);color:#fff;align-items:center;justify-content:center;text-align:center;padding:32px;box-shadow:none}
.pj.end h3{font-size:34px;color:#fff}
.pj.end p{color:rgba(255,255,255,.75);margin:12px 0 24px}
@media (max-width:800px){#projets{height:auto!important;margin:0}#projets .pin{position:static;height:auto;padding:64px 0 56px}#projets .head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:22px}#projets .hr{align-items:flex-start}#projets .cnt2{display:none}.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:14px calc(var(--pad) * -1) 0;padding:0 var(--pad)}.filters button{white-space:nowrap;flex:none}#projets .rail{overflow-x:auto;padding-right:var(--pad);scroll-snap-type:x mandatory;transform:none!important;scrollbar-width:none;gap:14px}.pj{scroll-snap-align:start;width:80vw;aspect-ratio:4/4.4;opacity:1;transform:none}.pj .art img{left:0;width:100%}#projets .prog{display:none}#projets.in .pj .art{animation:none}}

/* ============ SECONDE MAIN ============ */
/* Vitrine des sites déjà prêts. Le « c'est gratuit » est répété à quatre
   niveaux pour qu'on ne puisse pas le rater : bandeau de garanties, étiquette
   0 €, pastille sur chaque aperçu et prix barré sur chaque carte. */
#seconde{background:var(--accent-tint);border-radius:var(--r-xl);margin:24px calc(var(--pad) * .5);padding:0 var(--pad) clamp(40px,4.6vw,64px);position:relative;overflow:hidden}
#seconde::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;background:var(--accent);filter:blur(150px);opacity:.16;right:-180px;top:-260px;pointer-events:none}
#seconde>*{position:relative}
#seconde .shead{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,56px);align-items:center}
#seconde h2{font-size:clamp(32px,4vw,54px);margin:14px 0 18px;max-width:15ch}
#seconde .lead{max-width:58ch}

/* ce qui est offert / ce qui reste payant, annoncé tout de suite */
.sfacts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0}
.sfacts li{display:inline-flex;align-items:center;gap:7px;background:var(--card);border-radius:var(--pill);padding:9px 16px;box-shadow:var(--shadow-md);font-size:13.5px;line-height:1.2}
.sfacts li::before{font-family:var(--font-display);font-weight:800;font-size:13px;line-height:1}
.sfacts .sf-ok::before{content:"✓";color:var(--free)}
.sfacts .sf-pay::before{content:"€";color:var(--ink-faint)}
.sfacts b{font-weight:700}
.sfacts .sf-ok span{color:var(--free);font-weight:700}
.sfacts .sf-pay span{color:var(--ink-soft)}

/* étiquette de prix */
.ptag{position:relative;justify-self:end;width:304px;background:var(--card);border-radius:22px;padding:46px 26px 26px;text-align:center;transform:rotate(-4deg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center}
.ptag::before{content:"";position:absolute;inset:40px 12px 12px;border:1.5px dashed color-mix(in srgb,var(--accent) 32%,transparent);border-radius:14px;pointer-events:none}
.ptag .phole{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:52px;height:11px;border-radius:99px;background:var(--accent-tint);box-shadow:inset 0 1px 2px rgba(21,21,30,.3)}
.pmeta{display:contents}
.ptag .pk{order:1;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.ptag s{order:2;margin-top:6px;font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink-faint);text-decoration-thickness:3px;text-decoration-color:var(--cat-saas)}
.ptag b{order:3;font-family:var(--font-display);font-size:104px;font-weight:800;letter-spacing:-.06em;line-height:.92;color:var(--accent);margin:4px 0 12px}
.ptag b small{font-size:.34em;color:var(--ink);margin-left:.02em;letter-spacing:-.02em}
.ptag .pseal{order:4;background:var(--free);color:var(--dark);font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:6px 15px;border-radius:var(--pill);margin-bottom:14px}
.ptag .pnote{order:5;font-size:11.5px;line-height:1.45;color:var(--ink-soft);max-width:26ch}

/* les six sites, dans une fenêtre de navigateur */
.shelf{max-width:var(--maxw);margin:clamp(34px,4vw,54px) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.scard{background:var(--card);border-radius:var(--r);padding:10px 10px 12px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;transition:transform .5s var(--spring),box-shadow .4s}
.scard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.sfrm{display:block;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.sbar{display:flex;align-items:center;gap:5px;padding:8px 11px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.sbar i{width:6px;height:6px;border-radius:50%;background:var(--line);flex:none}
.sbar em{font-style:normal;font-size:10.5px;color:var(--ink-faint);margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spv{display:block;position:relative;aspect-ratio:8/5;overflow:hidden;background:var(--bg-2)}
.spv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.1s var(--ease)}
.scard:hover .spv img{transform:scale(1.04)}
.sfree{position:absolute;top:10px;left:10px;background:var(--free);color:var(--dark);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:var(--pill);box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.scap{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 6px 0;margin-bottom:12px}
.sct b{display:block;font-family:var(--font-display);font-size:16.5px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.sct small{display:block;color:var(--ink-faint);font-size:12.5px;margin-top:5px}
.sprice{flex:none;text-align:right;line-height:1}
.sprice s{display:block;font-size:12px;color:var(--ink-faint);text-decoration-thickness:2px;text-decoration-color:var(--cat-saas)}
.sprice b{display:block;font-family:var(--font-display);font-size:25px;font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--accent);margin-top:4px}
.sgo{display:flex;align-items:center;gap:6px;margin-top:auto;padding:12px 6px 0;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--accent)}
.sgo .arr{transition:transform .4s var(--spring)}
.scard:hover .sgo .arr{transform:translateX(4px)}

/* les 3 étapes + rappel */
.show3{max-width:var(--maxw);margin:clamp(30px,3.4vw,42px) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;padding:0}
.show3 li{display:flex;gap:14px;align-items:center;background:color-mix(in srgb,var(--card) 62%,transparent);border-radius:var(--r);padding:16px 20px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent);font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.show3 b{font-family:var(--font-display);font-size:13px;font-weight:800;color:var(--accent);flex:none;width:34px;height:34px;border-radius:50%;background:var(--card);display:grid;place-items:center;box-shadow:var(--shadow-md)}
.srail-hint{display:none;margin:12px auto 0;max-width:var(--maxw);font-size:12px;color:var(--ink-faint)}
.scta{max-width:var(--maxw);margin:clamp(26px,3vw,34px) auto 0;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.scta>span{font-size:13px;color:var(--ink-soft);max-width:42ch;line-height:1.5}
.scta>span b{color:var(--accent-ink);font-weight:700}

@media (max-width:1100px){
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .show3{grid-template-columns:1fr;gap:10px}
  #seconde .lead{max-width:none}
  .ptag{width:266px;padding:40px 20px 22px}
  .ptag b{font-size:88px}
}
@media (max-width:900px){
  #seconde .shead{grid-template-columns:1fr}
  /* plus assez de large pour l'étiquette à côté du texte : elle devient un
     bandeau horizontal, même message en deux fois moins de hauteur */
  .ptag{justify-self:start;width:100%;max-width:560px;transform:none;text-align:left;padding:20px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"price meta" "note note";column-gap:20px;row-gap:12px;align-items:center}
  .ptag::before{inset:10px}
  .ptag .phole{display:none}
  .pmeta{display:block;grid-area:meta}
  .ptag b{grid-area:price;font-size:80px;margin:0}
  .ptag .pk,.ptag s,.ptag .pseal{display:block}
  .ptag s{margin:2px 0 9px;font-size:20px}
  .ptag .pseal{width:max-content;margin:0}
  .ptag .pnote{grid-area:note;max-width:none;border-top:1px solid var(--line);padding-top:12px;font-size:12px}
}
@media (max-width:620px){
  #seconde h2{max-width:none}
  /* les garanties passent en 2 colonnes : 4 pastilles empilées mangeaient un écran */
  .sfacts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sfacts li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1px 8px;border-radius:16px;padding:10px 13px;font-size:12.5px;line-height:1.25}
  .sfacts li::before{grid-row:1/3;font-size:14px}
  .sfacts b,.sfacts span{grid-column:2}
  /* Section trop longue à parcourir sur téléphone (1 508 px, presque deux
     écrans) : on resserre tout ce qui n'est pas le produit. La fin du chapô
     est masquée parce qu'elle répète mot pour mot les étapes 01/02/03. */
  #seconde{padding:36px var(--pad)}
  #seconde h2{margin:10px 0 12px}
  #seconde .lead{font-size:15px;line-height:1.5}
  .lead-plus{display:none}
  .sfacts{gap:6px;margin-top:18px}
  .sfacts li{padding:8px 11px;font-size:12px;border-radius:14px}
  .ptag{column-gap:16px;padding:16px;margin-top:18px}
  .ptag b{font-size:60px}
  .ptag s{font-size:17px;margin:1px 0 7px}
  .ptag .pk{font-size:10.5px}
  .ptag .pseal{font-size:10.5px;padding:5px 12px;letter-spacing:.12em}
  .ptag .pnote{font-size:11px;padding-top:10px}
  .shelf{margin-top:22px}
  .scard{padding:8px 8px 10px}
  .sbar{padding:6px 9px}
  .sbar em{font-size:10px}
  .scap{padding:11px 4px 0;margin-bottom:9px}
  .sgo{padding:9px 4px 0;font-size:12.5px}
  .srail-hint{margin-top:10px}
  /* les étapes perdent leur habillage de carte : une simple liste numérotée */
  .show3{margin-top:20px;gap:9px}
  .show3 li{padding:0;background:none;box-shadow:none;font-size:13.5px;line-height:1.4;gap:10px}
  .show3 b{width:26px;height:26px;font-size:11.5px;box-shadow:none;background:color-mix(in srgb,var(--card) 78%,transparent)}
  .scta{margin-top:20px;gap:14px}
  .scta>span{font-size:12px}
  /* la vitrine défile à l'horizontale : la section reste courte et les aperçus
     restent lisibles (sinon 6 cartes empilées = 3 000 px). */
  .shelf{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);padding-bottom:4px}
  .shelf::-webkit-scrollbar{display:none}
  .scard{flex:0 0 78vw;scroll-snap-align:start}
  .scard:hover{transform:none}
  /* dans le rail, les cartes hors écran ne rencontrent jamais l'observateur :
     on les affiche directement plutôt que de les faire apparaître au glissement */
  .shelf .scard.rv{opacity:1;transform:none}
  .srail-hint{display:block}
}

/* ============ SERVICES (stack) ============ */
#services .stack{position:relative;max-width:1320px;margin:0 auto}
.svc{position:sticky;top:var(--stick,calc(var(--nav-h) + 24px));min-height:min(660px,calc(100svh - var(--nav-h) - 48px));border-radius:var(--r-xl);padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-content:start;margin-bottom:24px;box-shadow:var(--shadow-lg);transform-origin:top center;transition:transform .2s linear,filter .2s linear;overflow:hidden;color:var(--fg,#fff);background:var(--c)}
.svc .note{position:absolute;left:clamp(32px,5vw,64px);top:calc(clamp(32px,5vw,64px) + 34px);color:var(--fg,#fff);opacity:.9}
.svc .note .arrow{left:-6px;top:24px;width:70px;height:40px;color:var(--fg,#fff)}
.svc .n{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.08em;opacity:.88;margin-bottom:clamp(30px,6vh,80px)}
.svc h3{font-size:clamp(36px,4.8vw,70px);letter-spacing:-.045em;line-height:.95;font-variation-settings:"wdth" 90}
.svc p{font-size:clamp(16px,1.3vw,19px);opacity:.96;max-width:44ch;margin-top:22px}
.svc .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.svc .chips span{font-size:13px;font-weight:600;padding:7px 14px;border-radius:99px;background:color-mix(in srgb,var(--fg,#fff) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg,#fff) 30%,transparent);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .6s var(--spring)}
.svc.on .chips span{opacity:1;transform:none}
.svc.on .chips span:nth-child(2){transition-delay:.08s}.svc.on .chips span:nth-child(3){transition-delay:.16s}.svc.on .chips span:nth-child(4){transition-delay:.24s}
.svc .btn{margin-top:auto;justify-self:start;align-self:end;background:var(--fg,#fff);color:var(--c)}
.svc .side{display:flex;flex-direction:column;justify-content:space-between;gap:20px}
@media (min-width:1101px){.svc .side{margin-right:calc(-1 * clamp(0px,3vw,40px))}}
.svc .side .price{margin-top:auto}
/* Mini-interfaces des services */
.svc .ui{border-radius:20px;background:#fff;color:#15151E;box-shadow:0 30px 60px -24px rgba(0,0,0,.45);padding:24px;font-size:14px;min-height:min(360px,40vh);display:flex;flex-direction:column;justify-content:center;transform:translateY(30px) rotate(1.5deg);opacity:0;transition:transform 1.1s var(--ease),opacity .8s;font-size:12px}
.svc.on .ui{transform:none;opacity:1}
.gcard{display:flex;flex-direction:column;gap:14px}
.gh{display:flex;justify-content:space-between;align-items:center}.gh b{font-family:var(--font-display);font-size:20px}
.open{display:flex;align-items:center;gap:6px;color:#059669;font-weight:600;font-size:11px}.open i{width:7px;height:7px;border-radius:50%;background:#10B981;animation:pulse 2s infinite}
.stars{display:flex;align-items:center;gap:3px}.stars i{width:18px;height:18px;background:#E3E2DA;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transform:scale(.6)}
.svc.on .stars i{animation:star .5s var(--spring) forwards}
.svc.on .stars i:nth-child(2){animation-delay:.12s}.svc.on .stars i:nth-child(3){animation-delay:.24s}.svc.on .stars i:nth-child(4){animation-delay:.36s}.svc.on .stars i:nth-child(5){animation-delay:.48s}
@keyframes star{to{background:#F59E0B;transform:scale(1)}}
.stars em{font-style:normal;color:#5A5A70;margin-left:6px;font-size:11px}
.gmap{height:130px;border-radius:10px;background:#EEF0EA;background-image:linear-gradient(#E1E4DC 1px,transparent 1px),linear-gradient(90deg,#E1E4DC 1px,transparent 1px);background-size:22px 22px;position:relative;overflow:hidden}
.gmap::before{content:"";position:absolute;left:-10%;top:40%;width:120%;height:14px;background:#fff;transform:rotate(-8deg)}
.gmap .pin{position:absolute;left:50%;top:42%;width:14px;height:14px;margin:-7px;border-radius:50% 50% 50% 0;background:#EF4444;transform:rotate(-45deg);box-shadow:0 0 0 4px rgba(239,68,68,.25)}
.svc.on .gmap .pin{animation:drop .8s var(--spring) .4s both}
@keyframes drop{from{transform:rotate(-45deg) translate(-30px,-30px);opacity:0}}
.gbtn{display:flex;gap:6px}.gbtn span{flex:1;text-align:center;padding:11px 0;border-radius:99px;box-shadow:inset 0 0 0 1px #E3E2DA;font-weight:600;font-size:13px}.gbtn span.p{background:var(--c);color:#fff;box-shadow:none}
.shop{display:flex;flex-direction:column;gap:14px}
.prod{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
.pimg{aspect-ratio:1;border-radius:10px;background:#7A4A2B;position:relative;overflow:hidden}.pimg i{position:absolute;inset:22% 18% 30%;border-radius:8px 8px 12px 12px;background:#A8683F;box-shadow:inset 0 -8px 0 #8B5533}
.pinfo b{display:block;font-size:16px}.pinfo span{display:block;color:#5A5A70;margin:2px 0 8px;font-weight:600}
.add{position:relative;display:inline-block;text-decoration:none;background:#15151E;color:#fff;border-radius:99px;padding:11px 18px;font-weight:600;font-size:13px;overflow:hidden;min-width:130px;text-align:center}
.add em{font-style:normal;display:block}.add em.ok{position:absolute;inset:0;display:grid;place-items:center;background:#10B981;transform:translateY(100%)}
.svc.on .add em.ok{animation:addok 5s var(--ease) infinite}
@keyframes addok{0%,30%{transform:translateY(100%)}38%,70%{transform:translateY(0)}78%,100%{transform:translateY(100%)}}
.cart{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-size:14px;border-radius:10px;background:#F3F2EC;font-weight:600}
.cnt3{width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;position:relative;font-size:12px;display:grid;place-items:center}
.cnt3::after{content:"1"}
.svc.on .cnt3::after{animation:cntc 5s var(--ease) infinite}
@keyframes cntc{0%,40%{content:"1";transform:scale(1)}42%{transform:scale(.6)}44%,100%{content:"2"}52%{transform:scale(1.25)}60%,100%{transform:scale(1)}}
.pay{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.pay span{font-size:12px;font-weight:700;padding:6px 10px;border-radius:6px;box-shadow:inset 0 0 0 1px #E3E2DA}.pay span.s{margin-left:auto;box-shadow:none;color:#5A5A70;font-weight:500}
.book{display:flex;flex-direction:column;gap:14px}
.bh{display:flex;justify-content:space-between;align-items:baseline}.bh b{font-family:var(--font-display);font-size:19px}.bh span{color:#5A5A70;font-size:11px}
.bgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.bd{display:flex;flex-direction:column;gap:5px}.bd span{font-size:10px;text-align:center;color:#5A5A70;font-weight:600}
.bd i{height:30px;border-radius:6px;background:#EEF0EA;box-shadow:inset 0 0 0 1px #E3E2DA}.bd i.x{background:repeating-linear-gradient(-45deg,#F3F2EC 0 5px,#E3E2DA 5px 6px);box-shadow:none}
.svc.on .bd i.pick{animation:pick 5s var(--ease) infinite}
@keyframes pick{0%,20%{background:#EEF0EA;transform:none}28%,100%{background:var(--c);transform:scale(1.06);box-shadow:0 0 0 3px rgba(0,0,0,.08)}}
.bconf{background:rgba(16,185,129,.12);border-radius:10px;padding:10px 12px;opacity:0;transform:translateY(6px)}
.bconf b{display:block;color:#059669;font-size:15px}.bconf span{color:#5A5A70;font-size:12px}
.svc.on .bconf{animation:bconf 5s var(--ease) infinite}
@keyframes bconf{0%,34%{opacity:0;transform:translateY(6px)}44%,92%{opacity:1;transform:none}100%{opacity:0}}
.ref{display:flex;flex-direction:column;gap:16px}
.rh{display:flex;justify-content:space-between;align-items:baseline}.rh b{font-family:var(--font-display);font-size:15px}.rh span{color:#5A5A70;font-size:11px}
.gauges{display:grid;grid-template-columns:92px 24px 92px 1fr;gap:12px;align-items:center}
.g{position:relative;width:92px;height:92px;text-align:center}.g svg{width:92px;height:92px;transform:rotate(-90deg)}
.g circle{fill:none;stroke:#EEF0EA;stroke-width:8}.g circle.v{stroke:#EF4444;stroke-linecap:round;stroke-dasharray:var(--v) 100;stroke-dashoffset:100;transition:stroke-dashoffset 1.4s var(--ease) .3s}
.g.ok circle.v{stroke:#10B981}
.svc.on .g circle.v{stroke-dashoffset:calc(100 - var(--v))}
.g b{position:absolute;left:0;right:0;top:28px;font-family:var(--font-display);font-size:26px;letter-spacing:-.03em}.g b i{font-style:normal}
.g small{position:absolute;left:0;right:0;top:58px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#5A5A70}
.garr{text-align:center;font-weight:700;color:#5A5A70}
.glbl{font-weight:600;font-size:12px}.glbl span{font-weight:400;color:#5A5A70;font-size:11px}
.rows div{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;padding:9px 0;border-top:1px solid #EEF0EA;font-size:13px;align-items:center}
.rows span{color:#5A5A70}.rows s{color:#EF4444;text-decoration-color:rgba(239,68,68,.5)}.rows b{color:#059669}
.svc .ex-cmp{border-radius:16px;transform:translateY(30px) rotate(1.5deg);opacity:0;transition:transform 1.1s var(--ease),opacity .8s}
.svc.on .ex-cmp{transform:none;opacity:1}
.svc .ex{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -24px rgba(0,0,0,.45);transform:translateY(30px) rotate(1.5deg);opacity:0;transition:transform 1.1s var(--ease),opacity .8s}
.svc.on .ex{transform:none;opacity:1}
.svc .ex .tb{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid #EEE;background:#FAFAFA;color:#888;font-size:11px}
.svc .ex .tb i{width:8px;height:8px;border-radius:50%;background:#DDD}.svc .ex .tb i:first-child{background:#F87171}.svc .ex .tb i:nth-child(2){background:#FBBF24}.svc .ex .tb i:nth-child(3){background:#34D399}.svc .ex .tb span{margin-left:6px}
.svc .ex img{display:block;width:100%;height:auto}
.svc .ex.dark{background:#16162A;min-height:min(360px,40vh)}.svc .ex.dark .tb{background:#1C1C33;border-color:#2A2A44;color:#8888AA}.svc .ex .mini{padding:22px;color:#E8E8F4}.svc .ex .mini .kpis b{font-size:24px}.svc .ex .mini .bars{height:110px}
.svc .exl{font-size:13px;opacity:.93;margin-top:12px}.svc .exl b{font-weight:600}
.svc .fig{border-radius:var(--r-lg);background:color-mix(in srgb,var(--fg,#fff) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg,#fff) 22%,transparent);aspect-ratio:4/3;position:relative;overflow:hidden}
.svc .fig .ln{position:absolute;left:10%;right:10%;height:10px;border-radius:99px;background:color-mix(in srgb,var(--fg,#fff) 55%,transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.svc.on .fig .ln{transform:scaleX(1)}
.svc .fig .ln:nth-child(1){top:18%;width:40%;right:auto}.svc .fig .ln:nth-child(2){top:32%;transition-delay:.1s}.svc .fig .ln:nth-child(3){top:44%;width:60%;right:auto;transition-delay:.2s}
.svc .fig .bx{position:absolute;left:10%;bottom:12%;width:34%;aspect-ratio:1;border-radius:14px;background:var(--fg,#fff);opacity:.9;transform:translateY(30px) rotate(-6deg);transition:transform 1s var(--spring) .3s}
.svc .fig .bx2{left:auto;right:10%;width:28%;border-radius:50%;transition-delay:.45s}
.svc.on .fig .bx{transform:none}
.svc .price{font-family:var(--font-display);font-size:clamp(26px,3vw,40px);letter-spacing:-.04em;font-weight:700}
.svc .price small{font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:0;opacity:.75;display:block;margin-top:4px}
/* Mobile : on garde l'empilement (les cartes se recouvrent au scroll comme sur
   desktop). Le --stick est calculé en JS carte par carte : si la carte est plus
   haute que l'écran, elle se cale sur le bas de l'écran au lieu du haut. */
@media (max-width:900px){.svc{grid-template-columns:1fr;gap:0;min-height:auto;padding:24px 20px;margin-bottom:14px;border-radius:24px}.svc .side .price{display:none}.svc .side{margin-top:14px}.svc h3{font-size:32px}.svc p{font-size:14.5px;margin-top:14px}.svc .chips{gap:6px;margin-top:16px}.svc .chips span{font-size:12.5px;padding:6px 12px}.svc>div:first-child{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline}.svc .n{grid-column:1;margin:0;font-size:12px}.svc h3{grid-column:2}.svc>div:first-child>p,.svc .chips,.svc>div:first-child>.btn{grid-column:1/-1}.svc .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}.svc .chips::-webkit-scrollbar{display:none}.svc .chips span{flex:none}.svc p{font-size:14px;line-height:1.5}.svc .exl{font-size:11.5px;margin-top:8px}.svc .ui{min-height:0;padding:16px}.svc .ex.dark{min-height:0}.svc .ex .mini{padding:16px}.svc .ex .mini .bars{height:64px}.svc .ex .mini .kpis b{font-size:20px}.gauges{grid-template-columns:64px 20px 64px 1fr;gap:8px}.g,.g svg{width:64px;height:64px}.rows div{padding:6px 0;font-size:12px}.bconf{padding:10px 12px}.svc .btn{margin-top:16px}}
@media (prefers-reduced-motion:reduce){.svc{position:relative;top:0;transform:none!important;filter:none!important}}

/* ============ OUTILS (dark) ============ */
#outils{padding:0 calc(var(--pad) * .5);margin:24px 0}
#outils .blk{background:var(--bg-2);color:var(--ink);border-radius:var(--r-xl);padding:clamp(60px,8vw,120px) var(--pad);position:relative;overflow:hidden}
#outils .blk::before{content:"";position:absolute;width:700px;height:700px;border-radius:50%;background:var(--accent);filter:blur(140px);opacity:.1;right:-200px;top:-200px;pointer-events:none}
#outils .inner{max-width:var(--maxw);margin:0 auto;position:relative}
#outils .grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:40px;margin-top:56px;align-items:start}
/* le portable déborde volontairement vers la droite, mais la carte est en
   overflow:hidden : calibré pour que le SOCLE (3 % plus large que l'écran)
   arrive au ras du bord au lieu d'être tranché */
@media (min-width:1101px){.laptop{margin-right:calc(-1 * clamp(0px,2.3vw,32px))}}
.tabs{display:flex;flex-direction:column;gap:6px}
.tab{opacity:0;transform:translateX(-10px);transition:opacity .5s,transform .7s var(--ease),background .4s}
#outils .blk.in .tab{opacity:1;transform:none}
#outils .blk.in .tab:nth-child(2){transition-delay:.1s}#outils .blk.in .tab:nth-child(3){transition-delay:.2s}#outils .blk.in .tab:nth-child(4){transition-delay:.3s}
.tab{text-align:left;padding:16px 18px;border-radius:var(--r);display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start;position:relative;overflow:hidden;transition:background .4s}
.tab .ic{width:38px;height:38px;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;color:var(--accent);transition:background .4s,color .4s}
.tab b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.tab small{display:block;font-size:13px;color:var(--ink-soft);margin-top:3px;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s}
.tab.on{background:var(--card);box-shadow:var(--shadow-md)}
.tab.on .ic{background:var(--accent);color:#fff;animation:icpop .6s var(--spring)}
@keyframes icpop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.tab.on small{max-height:60px;opacity:1}
.tab .pr{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);width:0}
.tab.on .pr{animation:tabp 4.5s linear forwards}
@keyframes tabp{to{width:100%}}
.dash{background:var(--card);border-radius:8px;overflow:hidden;min-height:500px;position:relative;color:var(--ink)}
.dash .tb{display:flex;align-items:center;gap:6px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-faint)}
.dash .tb i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dash .tb span{margin-left:8px}
.dash .tb u{margin-left:auto;text-decoration:none;background:var(--accent-tint);padding:4px 10px;border-radius:99px;font-size:11px}
.pane{position:absolute;inset:48px 0 0 0;padding:16px;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .7s var(--ease);pointer-events:none}
.pane.on{opacity:1;transform:none;pointer-events:auto}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpis div{background:var(--bg-2);border-radius:12px;padding:14px}
.kpis small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);display:block}
.kpis b{font-family:var(--font-display);font-size:24px;display:block;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.kpis em{font-style:normal;font-size:11px;color:#059669;font-weight:600}
.chart{background:var(--bg-2);border-radius:12px;padding:16px;margin-top:10px}
.chart .t{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-faint);margin-bottom:10px}
.chart .t b{color:var(--ink);font-weight:600}
.bars{display:flex;align-items:flex-end;gap:6px;height:64px;padding-top:6px}
.bars i{flex:1;background:var(--accent-tint);border-radius:5px 5px 2px 2px;height:var(--h);transform:scaleY(0);transform-origin:bottom;transition:transform 1.2s var(--ease)}
.bars i:last-child{background:var(--accent)}
.in .bars i,.on .bars i{transform:scaleY(1)}
.bars i:nth-child(2){transition-delay:.06s}.bars i:nth-child(3){transition-delay:.12s}.bars i:nth-child(4){transition-delay:.18s}.bars i:nth-child(5){transition-delay:.24s}.bars i:nth-child(6){transition-delay:.3s}
.dash .bars{height:120px;gap:10px}
.dash .bars i{background:color-mix(in srgb,var(--accent) 38%,transparent);border-radius:6px 6px 3px 3px;position:relative}
.kpis.k4{grid-template-columns:repeat(4,1fr)}
.kpis.k4 div{padding:12px 12px 10px;position:relative;overflow:hidden}
.kpis.k4 b{font-size:20px}
.kpis em.w{color:#B45309}
.spark{position:absolute;right:10px;bottom:10px;width:52px;height:18px;opacity:.9}
.spark path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) .3s}
.pane.on .spark path{stroke-dashoffset:0}
.dgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;margin-top:10px}
.dgrid .chart{margin-top:0}
.bars2{position:relative;padding-bottom:16px;height:160px}
.bars2 i s{position:absolute;left:0;right:0;bottom:-16px;text-decoration:none;font-size:9px;color:var(--ink-faint);text-align:center;transform:scaleY(1)}
.bars2 i::after{content:attr(data-v);position:absolute;left:50%;top:-20px;transform:translateX(-50%) scale(.8);background:var(--ink);color:var(--bg);font-size:9px;font-weight:600;padding:2px 6px;border-radius:99px;white-space:nowrap;opacity:0;transition:opacity .3s,transform .4s var(--spring)}
.bars2 i:hover::after,.bars2 i:last-child::after{opacity:1;transform:translateX(-50%) scale(1)}
.bars2 i:last-child::after{transition-delay:1.2s}
.bars2 .goal{position:absolute;left:0;right:0;bottom:calc(16px + 82%);height:0;border-top:1.5px dashed var(--ink-faint);text-decoration:none;opacity:.7}
.bars2 .goal span{position:absolute;right:0;top:-14px;font-size:9px;color:var(--ink-faint)}
.side2{display:flex;flex-direction:column;gap:10px}
.mini2{background:var(--bg-2);border-radius:12px;padding:12px 14px}
.mini2 .t{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-faint);margin-bottom:8px}.mini2 .t b{color:var(--ink);font-weight:600}
.stk{display:flex;height:10px;border-radius:99px;overflow:hidden;gap:2px}
.stk i{width:var(--w);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.pane.on .stk i{transform:scaleX(1)}.pane.on .stk i:nth-child(2){transition-delay:.15s}.pane.on .stk i:nth-child(3){transition-delay:.3s}
.leg{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:10px;color:var(--ink-soft)}
.leg span{display:flex;align-items:center;gap:4px}.leg i{width:7px;height:7px;border-radius:2px}
.inv div{display:grid;grid-template-columns:1fr auto auto;gap:8px;font-size:11px;padding:5px 0;border-top:1px solid var(--line);align-items:center;opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .5s var(--ease)}
.pane.on .inv div{opacity:1;transform:none}.pane.on .inv div:nth-child(2){transition-delay:.12s}.pane.on .inv div:nth-child(3){transition-delay:.24s}
.inv div:first-child{border-top:0}
.inv b{font-variant-numeric:tabular-nums}
.inv em{font-style:normal;font-size:10px;font-weight:600;color:#059669;background:rgba(16,185,129,.14);padding:2px 7px;border-radius:99px}
.inv em.w{color:#B45309;background:rgba(245,158,11,.16)}
.dash .bars i:last-child{background:var(--accent)}
.list{display:flex;flex-direction:column;gap:8px}
.list div{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;background:var(--bg-2);border-radius:12px;padding:10px 14px;font-size:13px;transform:translateX(-10px);opacity:0;transition:transform .6s var(--ease),opacity .5s}
.pane.on .list div{transform:none;opacity:1}
.list div:nth-child(2){transition-delay:.08s}.list div:nth-child(3){transition-delay:.16s}.list div:nth-child(4){transition-delay:.24s}.list div:nth-child(5){transition-delay:.32s}
.list .av{width:36px;height:36px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff}
.list small{color:var(--ink-faint);display:block;font-size:11px}
.list .st{font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;background:rgba(16,185,129,.14);color:#059669}
.list .st.w{background:rgba(245,158,11,.16);color:#B45309}
.list .st.p{background:var(--accent-tint);color:var(--accent-ink)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal div{background:var(--bg-2);border-radius:8px;aspect-ratio:1;display:grid;place-items:center;font-size:11px;color:var(--ink-faint);position:relative}
.cal div.ev::after{content:"";position:absolute;bottom:6px;width:60%;height:4px;border-radius:2px;background:var(--e,var(--accent))}
.cal div.tod{background:var(--accent);color:#fff;font-weight:700}
.cal .hd{grid-column:1/-1;display:flex;justify-content:space-between;font-size:12px;color:var(--ink-faint);margin-bottom:4px;aspect-ratio:auto;background:none}
.plan{display:flex;flex-direction:column;gap:6px}
.phd{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink-faint);margin-bottom:6px}
.phd b{font-size:13px;color:var(--ink);font-weight:600}
.prow{display:grid;grid-template-columns:96px repeat(5,1fr);gap:6px;align-items:stretch}
.prow.head span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);text-align:center;padding:2px 0}
.prow .who{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
.prow .who i{width:24px;height:24px;border-radius:50%;color:#fff;font-size:9px;font-style:normal;display:grid;place-items:center;font-weight:700}
.prow .d{height:38px;border-radius:8px;background:var(--bg-2);position:relative;overflow:hidden}
.prow .d.off{display:grid;place-items:center;font-size:10px;color:var(--ink-faint);background:repeating-linear-gradient(-45deg,var(--bg-2) 0 6px,var(--line) 6px 7px)}
.prow .d b{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--c);color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;padding:0 8px;border-radius:8px;white-space:nowrap;overflow:hidden;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.pane.on .prow .d b{transform:scaleX(1)}
.pane.on .prow:nth-child(3) .d b{transition-delay:.1s}.pane.on .prow:nth-child(4) .d b{transition-delay:.25s}.pane.on .prow:nth-child(5) .d b{transition-delay:.4s}.pane.on .prow:nth-child(6) .d b{transition-delay:.55s}
.pane.on .prow .d:nth-child(3) b{transition-delay:calc(var(--rd,0s) + .1s)}
.pfoot{display:flex;gap:14px;margin-top:8px;font-size:11px;color:var(--ink-faint)}
.pfoot span{display:flex;align-items:center;gap:5px}.pfoot i{width:8px;height:8px;border-radius:2px}
.steps{display:flex;flex-direction:column;gap:0}
.steps div{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
.steps i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;background:var(--line);color:var(--ink-faint)}
.steps div.ok i{background:#10B981;color:#fff}
.steps div.now i{background:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-tint)}
.steps small{color:var(--ink-faint)}
.toasts{position:absolute;right:-6px;bottom:-26px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;z-index:5}
.toast{background:var(--ink);color:var(--bg);border-radius:14px;padding:10px 14px 10px 10px;font-size:13px;display:flex;gap:10px;align-items:center;box-shadow:0 20px 50px -14px rgba(0,0,0,.6);transform:translateX(40px) scale(.9);opacity:0;transition:transform .7s var(--spring),opacity .4s}
.toast.show{transform:none;opacity:1}
.toast i{width:30px;height:30px;border-radius:9px;background:var(--c);display:grid;place-items:center;color:#fff;font-style:normal;font-weight:700;font-size:12px;flex:none}
.toast b{display:block;font-weight:600}
.toast small{color:var(--ink-faint);display:block;font-size:11px}
#outils .grid{position:relative}
.integ{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;align-items:center}
.integ span{font-size:13px;color:var(--ink-soft)}
.integ b{font-size:13px;font-weight:600;padding:8px 14px;border-radius:99px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:center;gap:8px}
.integ b i{width:8px;height:8px;border-radius:2px;background:var(--c)}
@media (max-width:900px){#outils .grid{grid-template-columns:1fr;gap:20px;margin-top:32px}.tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:8px;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}.tab{flex:none;width:200px;grid-template-columns:30px 1fr;padding:12px}.tab small{display:none}.tab b{font-size:13px}.tab .ic{width:30px;height:30px}.dash{min-height:0}.pane{position:relative;inset:auto;display:none;padding:12px}.pane.on{display:block}.kpis.k4{grid-template-columns:1fr 1fr}.dgrid{grid-template-columns:1fr}.prow{grid-template-columns:70px repeat(5,1fr);gap:4px}.prow .who{font-size:11px}.prow .d{height:30px}.prow .d b{font-size:8px;padding:0 5px}.laptop .screen{padding:8px 8px 10px;border-radius:12px 12px 4px 4px}.toasts{display:none}.integ{margin-top:24px}#outils .blk{padding:56px var(--pad)}}

/* Laptop */
.laptop{position:relative;padding:0 0 0 0;perspective:1200px}
.laptop .screen{background:#111118;border-radius:18px 18px 6px 6px;padding:14px 14px 18px;box-shadow:0 40px 80px -30px rgba(21,21,30,.5),inset 0 0 0 1px #2a2a36;position:relative}
.laptop .screen::before{content:"";position:absolute;top:5px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2a2a36}
.laptop .base{height:16px;background:linear-gradient(#E4E4EA,#C9C9D2);border-radius:0 0 14px 14px;margin:0 -3%;position:relative;box-shadow:0 10px 30px -10px rgba(21,21,30,.4)}
.laptop .base::before{content:"";position:absolute;left:50%;top:0;width:14%;height:5px;margin-left:-7%;background:#B8B8C2;border-radius:0 0 6px 6px}
.dark-ui .kpis div,.dark-ui .chart{background:#1C1C33}
.dark-ui .kpis b,.dark-ui .chart .t b{color:#E8E8F4}
.dark-ui .kpis small,.dark-ui .chart .t{color:#8888AA}
.dark-ui .bars i{background:#2A2A55}.dark-ui .bars i:last-child{background:#818CF8}
/* ============ SERVICE (chat) ============ */
#service{background:var(--bg-2);border-radius:var(--r-xl);margin:24px calc(var(--pad) * .5)}
#why .who{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;align-items:center;margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.whol{font-size:15px;color:var(--ink-soft)}.whol b{display:block;font-family:var(--font-display);font-size:24px;letter-spacing:-.03em;color:var(--ink);margin-top:4px;font-weight:700}
#why .who .person{padding:16px 18px;grid-template-columns:56px 1fr;gap:14px;border-radius:var(--r)}
#why .who .person .av{width:56px;height:56px;border-radius:16px;font-size:22px}
#why .who .person h3{font-size:20px}.who .person .role{margin:2px 0 0;font-size:11px}
#why .claim{grid-column:1/-1;margin-top:8px;display:flex;gap:28px;flex-wrap:wrap}
#why .claim div{font-size:14px;display:flex;gap:8px;align-items:center;color:var(--ink-soft)}
.who .claim div::before{content:"✓";width:20px;height:20px;border-radius:50%;background:var(--accent-tint);color:var(--accent-ink);display:grid;place-items:center;font-size:11px;font-weight:700}
@media (max-width:900px){#why .who{grid-template-columns:1fr 1fr}#why .whol,#why .claim{grid-column:1/-1}}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags span{font-size:13px;font-weight:600;padding:7px 13px;border-radius:99px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-soft);transition:background .3s,color .3s,transform .5s var(--spring)}
.tags span.on{background:var(--accent);color:#fff;transform:translateY(-3px);box-shadow:none}
#service h2{font-size:clamp(38px,5.2vw,72px);margin:14px 0 22px}
.sgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.vs div{border-radius:var(--r);padding:20px 22px;font-size:15px}
.vs .no{background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-soft)}
.vs .no p{text-decoration:line-through;text-decoration-color:var(--ink-faint);text-decoration-thickness:1.5px}
.vs .yes{background:var(--accent);color:#fff}
.vs b{display:block;font-family:var(--font-display);font-size:18px;letter-spacing:-.02em;margin-bottom:10px}
.vs p{margin:0 0 6px}
.chat{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line);overflow:hidden;display:flex;flex-direction:column;min-height:480px}
.chead{display:flex;gap:12px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.chead .av{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800}
.chead b{display:block;font-size:14px}.chead small{font-size:12px;color:var(--ink-faint)}
.cbody{flex:1;padding:18px;display:flex;flex-direction:column;gap:10px;justify-content:flex-end}
.msg{max-width:78%;padding:11px 14px;border-radius:18px;font-size:14px;line-height:1.4;opacity:0;transform:translateY(12px) scale(.96);transition:opacity .4s,transform .6s var(--spring)}
.msg.show{opacity:1;transform:none}
.msg.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:6px}
.msg.them{align-self:flex-start;background:var(--bg-2);border-bottom-left-radius:6px}
.msg.sys{align-self:center;background:none;color:var(--ink-faint);font-size:12px;padding:4px}
.msg.done{background:color-mix(in srgb,var(--cat-boutique) 14%,var(--bg-2));color:var(--ink)}
.msg.done b{color:#059669}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:var(--bg-2);border-radius:18px;border-bottom-left-radius:6px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:bl 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bl{50%{opacity:.3;transform:translateY(-2px)}}
.cfoot{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-faint)}
.cfoot i{width:30px;height:30px;border-radius:50%;background:var(--accent)}
@media (max-width:900px){.sgrid{grid-template-columns:1fr}.chat{min-height:440px}}

/* ============ MÉTHODE ============ */
#methode .line{position:relative;height:2px;background:var(--line);margin:56px 0 40px}
#methode .line i{position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .15s linear}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.step{position:relative;padding-top:8px}
.step .dd{position:absolute;right:0;top:0;width:64px;height:64px;color:var(--accent);opacity:.9}
.step .dd path{stroke-width:2;transition-duration:1.4s}
.step::before{content:"";position:absolute;top:-49px;left:0;width:14px;height:14px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .4s,background .4s}
.step.on::before{background:var(--accent);box-shadow:0 0 0 6px var(--accent-tint)}
.step .n{font-family:var(--font-display);font-size:clamp(40px,4.4vw,64px);font-weight:800;letter-spacing:-.06em;line-height:.85;color:var(--accent);opacity:.15;transition:opacity .6s;font-variant-numeric:tabular-nums}
.step.on .n{opacity:1}
.step h3{font-size:24px;margin:18px 0 10px;letter-spacing:-.03em}
.step p{font-size:15px;color:var(--ink-soft)}
.step .dur{display:inline-block;margin-top:14px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:99px;background:var(--accent-tint);color:var(--accent-ink)}
@media (max-width:900px){.steps4{grid-template-columns:1fr 1fr}#methode .line{display:none}.step::before{display:none}.step .n{opacity:1}}

/* Scènes méthode */
.scene{aspect-ratio:4/3;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);position:relative;overflow:hidden;margin-bottom:22px;transition:box-shadow .5s,transform .8s var(--spring)}
.step.on .scene{box-shadow:inset 0 0 0 1.5px var(--accent),var(--shadow-md);transform:translateY(-4px)}
.scene .lbl{position:absolute;left:12px;bottom:10px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.scene .mode{position:absolute;inset:0;opacity:0;transition:opacity .5s;display:grid;place-items:center}
.scene .mode.on{opacity:1}
/* s1 call */
.ph{position:relative;width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}
.step.on .m-call.on .ph svg{animation:ring .9s ease-in-out infinite}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
.ph i{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.step.on .m-call.on .ph i{animation:wave 1.8s ease-out infinite}
.ph i:nth-child(3){animation-delay:.6s!important}.ph i:nth-child(4){animation-delay:1.2s!important}
@keyframes wave{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.3);opacity:0}}
/* s1 visio */
.vw{position:relative;width:74%;aspect-ratio:16/10;background:var(--dark);border-radius:10px;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vw .cam{border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff}
.vw .cam.a{background:var(--accent)}.vw .cam.b{background:var(--cat-jeuvideo)}
.vw .cam b{opacity:.9}
.step.on .m-visio.on .cam.a{animation:talk 1.6s ease-in-out infinite}
.step.on .m-visio.on .cam.b{animation:talk 1.6s ease-in-out infinite .8s}
@keyframes talk{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}50%{box-shadow:0 0 0 3px #10B981}}
.vw .rec{position:absolute;top:-6px;right:-6px;width:12px;height:12px;border-radius:50%;background:#EF4444;animation:blink 1s steps(2) infinite}
/* s1 meet */
.mt{position:relative;display:flex;align-items:center;gap:0}
.mt .pp{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;box-shadow:0 0 0 3px var(--card)}
.mt .pp.a{background:var(--cat-jeuvideo)}.mt .pp.b{background:var(--accent);margin-left:-10px}
.step.on .m-meet.on .pp.a{animation:nod 1.4s ease-in-out infinite}
.step.on .m-meet.on .pp.b{animation:nod 1.4s ease-in-out infinite .7s}
@keyframes nod{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.mt .pin{position:absolute;top:-24px;left:50%;transform:translateX(-50%);color:var(--cat-saas)}
.step.on .m-meet.on .pin{animation:nod 1.4s ease-in-out infinite .35s}
.mt em{position:absolute;top:56px;left:50%;transform:translateX(-50%);font-style:normal;font-size:12px;font-weight:600;white-space:nowrap;background:var(--accent-tint);color:var(--accent-ink);padding:3px 9px;border-radius:99px}
/* s2 maquette */
.canvas{position:absolute;inset:12px;background:var(--bg-2);border-radius:10px;overflow:hidden}
.canvas .tools{position:absolute;left:8px;top:8px;bottom:8px;width:22px;background:var(--card);border-radius:7px;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:8px;box-shadow:inset 0 0 0 1px var(--line)}
.canvas .tools i{width:12px;height:12px;border-radius:50%}
.canvas .tools span{font-size:9px;font-weight:700;color:var(--ink-faint);margin-top:2px}
.canvas .frame{position:absolute;left:40px;top:14px;right:14px;bottom:14px;background:var(--card);border-radius:8px;overflow:hidden;box-shadow:0 10px 30px -14px rgba(21,21,30,.4)}
.canvas .wire{position:absolute;inset:8px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:8px 1fr 22px;gap:5px;transition:opacity .6s}
.canvas .wire b{background:var(--bg-2);border-radius:4px;box-shadow:inset 0 0 0 1px var(--line)}
.canvas .wire .h,.canvas .wire .big{grid-column:1/-1}
.canvas .wire .big{background:var(--accent-tint)}
.canvas .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0}
.step.on .canvas .frame img{animation:mq 7s ease-in-out infinite}
.step.on .canvas .wire{animation:mqw 7s ease-in-out infinite}
@keyframes mq{0%,38%{opacity:0}52%,88%{opacity:1}100%{opacity:0}}
@keyframes mqw{0%,38%{opacity:1}52%,88%{opacity:0}100%{opacity:1}}
.canvas .sel{position:absolute;left:8%;top:10%;width:60%;height:34%;border:1.5px solid var(--accent);border-radius:2px;opacity:0}
.canvas .sel i{position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid var(--accent);border-radius:2px}
.canvas .sel i:nth-child(1){left:-4px;top:-4px}.canvas .sel i:nth-child(2){right:-4px;top:-4px}.canvas .sel i:nth-child(3){left:-4px;bottom:-4px}.canvas .sel i:nth-child(4){right:-4px;bottom:-4px}
.step.on .canvas .sel{animation:sel 7s ease-in-out infinite}
@keyframes sel{0%,8%{opacity:0;left:8%;top:10%;width:60%;height:34%}12%,30%{opacity:1;left:8%;top:10%;width:60%;height:34%}36%,50%{opacity:1;left:8%;top:52%;width:84%;height:30%}56%,100%{opacity:0}}
.canvas .cursor{position:absolute;display:flex;align-items:center;gap:4px;left:20%;top:20%;z-index:3}
.canvas .cursor b{font-size:10px;background:var(--ink);color:var(--bg);padding:2px 6px;border-radius:99px}
.step.on .canvas .cursor{animation:cur 7s ease-in-out infinite}
@keyframes cur{0%{left:20%;top:20%}12%{left:44%;top:26%}36%{left:50%;top:66%}60%{left:72%;top:40%}80%{left:30%;top:70%}100%{left:20%;top:20%}}
.canvas .ver{position:absolute;right:20px;bottom:20px;font-size:10px;font-weight:700;background:#10B981;color:#fff;padding:4px 9px;border-radius:99px;opacity:0;transform:scale(.6);z-index:3}
.step.on .canvas .ver{animation:verp 7s var(--spring) infinite}
@keyframes verp{0%,60%{opacity:0;transform:scale(.6)}68%,90%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}
/* mock générique */
.gen{position:absolute;inset:0;padding:10px;display:flex;flex-direction:column;gap:8px;background:#fff}
.gnav{display:flex;align-items:center;gap:6px}.gnav i{width:12px;height:12px;border-radius:4px;background:var(--accent)}.gnav b{width:22px;height:4px;border-radius:2px;background:#DDD}.gnav b:first-of-type{margin-left:auto}.gnav u{width:34px;height:12px;border-radius:99px;background:var(--accent);margin-left:4px}
.ghero{flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:8px;align-items:center}
.ghero s{display:block;height:8px;border-radius:3px;background:#15151E;margin-bottom:6px;width:90%;text-decoration:none}.ghero s.w{width:65%}.ghero s.k{height:12px;width:44%;background:var(--accent);border-radius:99px;margin-top:10px}
.ghero em{display:block;aspect-ratio:4/3;border-radius:8px;background:linear-gradient(135deg,var(--accent),#A78BFA)}
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.gcards i{height:22px;border-radius:5px;background:#F3F2EC;box-shadow:inset 0 0 0 1px #E3E2DA}
.canvas .frame .gen{opacity:0}
.step.on .canvas .frame .gen{animation:mq 7s ease-in-out infinite}
.dev .prev .gen{top:24px;clip-path:inset(0 0 100% 0)}
.step.on .dev .prev .gen{animation:reveal 6s var(--ease) infinite}
.brw .gen{top:28px}
/* s3 dev */
.dev{position:absolute;inset:12px;display:grid;grid-template-columns:1fr 1.15fr;gap:8px}
.dev .code{background:var(--dark);border-radius:10px;padding:12px 10px;display:flex;flex-direction:column;gap:8px}
.dev .ln{display:flex;gap:5px;height:6px;padding-left:8px}
.dev .ln i{display:block;height:100%;width:var(--w);border-radius:3px;background:var(--c);transform:scaleX(0);transform-origin:left;opacity:.95}
.step.on .dev .ln i{animation:typeln 6s var(--ease) infinite}
.dev .ln:nth-child(2) i{animation-delay:.35s}.dev .ln:nth-child(3) i{animation-delay:.7s}.dev .ln:nth-child(4) i{animation-delay:1.05s}.dev .ln:nth-child(5) i{animation-delay:1.4s}.dev .ln:nth-child(6) i{animation-delay:1.75s}.dev .ln:nth-child(7) i{animation-delay:2.1s}.dev .ln:nth-child(8) i{animation-delay:2.45s}
@keyframes typeln{0%{transform:scaleX(0)}8%,85%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}
.dev .prev{background:var(--card);border-radius:10px;overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px var(--line)}
.dev .prev .ub{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--ink-faint);padding:6px 8px;border-bottom:1px solid var(--line)}
.dev .prev .ub i{width:6px;height:6px;border-radius:50%;background:#10B981}
.dev .prev img{position:absolute;left:0;right:0;top:24px;width:100%;height:calc(100% - 24px);object-fit:cover;object-position:top;clip-path:inset(0 0 100% 0)}
.step.on .dev .prev img{animation:reveal 6s var(--ease) infinite}
@keyframes reveal{0%,5%{clip-path:inset(0 0 100% 0)}55%,88%{clip-path:inset(0 0 0 0)}96%,100%{clip-path:inset(0 0 100% 0)}}
.dev .prev .sk{position:absolute;left:8px;right:8px;top:32px;bottom:8px;background:repeating-linear-gradient(var(--bg-2) 0 10px,transparent 10px 16px);border-radius:6px;opacity:.7;z-index:-1}
.lbl2{position:absolute;left:12px;bottom:-1px;font-size:10px;color:var(--ink-faint);display:none}
/* s4 live */
.brw{position:absolute;inset:12px;background:var(--card);border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.brw .url{display:flex;align-items:center;gap:5px;background:var(--bg-2);padding:7px 10px;font-size:10px;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.brw .url i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.brw .url i:first-child{background:#F87171}.brw .url i:nth-child(2){background:#FBBF24}.brw .url i:nth-child(3){background:#34D399}
.brw .url span{flex:1;background:var(--card);border-radius:99px;padding:3px 9px;margin-left:4px;display:flex;align-items:center;gap:4px}
.brw .url b{font-size:9px}
.brw>img{position:absolute;left:0;right:0;top:28px;width:100%;height:calc(100% - 28px);object-fit:cover;object-position:top}
.brw .live{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%) scale(.5);opacity:0;background:var(--ink);color:var(--bg);font-size:13px;font-weight:700;padding:9px 16px;border-radius:99px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-lg);z-index:2}
.brw .live i{width:9px;height:9px;border-radius:50%;background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.3)}
.step.on .brw .live{animation:live 5s var(--spring) infinite}
@keyframes live{0%,18%{transform:translate(-50%,-50%) scale(.5);opacity:0}28%,88%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(.5);opacity:0}}
.brw .gg{position:absolute;left:10px;bottom:10px;font-size:10px;font-weight:600;background:#fff;color:var(--ink);padding:5px 9px;border-radius:99px;box-shadow:var(--shadow-md);opacity:0;transform:translateY(8px);z-index:2}
.step.on .brw .gg{animation:gg 5s var(--ease) infinite}
@keyframes gg{0%,50%{opacity:0;transform:translateY(8px)}60%,88%{opacity:1;transform:none}100%{opacity:0}}
.brw .cf{position:absolute;width:7px;height:10px;border-radius:2px;opacity:0;left:50%;top:56%;z-index:2}
.step.on .brw .cf{animation:cf 5s ease-out infinite}
.brw .c1{background:var(--accent);--dx:-60px;--dy:-50px;--r:120deg}.brw .c2{background:var(--cat-refonte);--dx:50px;--dy:-60px;--r:-80deg}.brw .c3{background:var(--cat-boutique);--dx:-40px;--dy:40px;--r:200deg}.brw .c4{background:var(--cat-saas);--dx:70px;--dy:20px;--r:60deg}.brw .c5{background:var(--cat-jeuvideo);--dx:0;--dy:-75px;--r:300deg}
@keyframes cf{0%,24%{transform:translate(0,0) rotate(0);opacity:0}28%{opacity:1}55%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:1}70%,100%{transform:translate(var(--dx),calc(var(--dy) + 40px)) rotate(var(--r));opacity:0}}
@media (max-width:900px){.scene{aspect-ratio:16/10}}

/* ============ DUO ============ */
#duo{background:var(--bg-2)}
#duo .grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.person{background:var(--card);border-radius:var(--r-lg);padding:28px;display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:center;box-shadow:inset 0 0 0 1px var(--line);transition:transform .7s var(--spring),box-shadow .5s}
.person:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.person .av{width:96px;height:96px;border-radius:26px;display:grid;place-items:center;font-family:var(--font-display);font-size:34px;font-weight:800;letter-spacing:-.05em;color:#fff;background:var(--c);transition:transform .7s var(--spring)}
.person:hover .av{transform:rotate(-8deg) scale(1.05)}
.person h3{font-size:26px;letter-spacing:-.03em}
.person .hand{font-size:20px;color:var(--accent);display:block;margin-top:8px;transform:rotate(-2deg)}
.person .role{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c);margin:4px 0 10px}
.person p{font-size:15px;color:var(--ink-soft)}
#duo .claim{margin-top:40px;display:flex;gap:36px;flex-wrap:wrap}
#duo .claim div{font-size:15px;display:flex;gap:10px;align-items:center;color:var(--ink-soft)}
#duo .claim div::before{content:"✓";width:22px;height:22px;border-radius:50%;background:var(--accent-tint);color:var(--accent-ink);display:grid;place-items:center;font-size:12px;font-weight:700}
@media (max-width:800px){#duo .grid{grid-template-columns:1fr}.person{grid-template-columns:72px 1fr}.person .av{width:72px;height:72px;font-size:26px;border-radius:20px}}

/* ============ FAQ ============ */
#faq .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
#faq h2{font-size:clamp(32px,3.8vw,54px)}
.q{border-top:1px solid var(--line)}
.q:last-child{border-bottom:1px solid var(--line)}
.q button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;text-align:left;font-family:var(--font-display);font-size:clamp(18px,1.6vw,22px);font-weight:600;letter-spacing:-.02em}
.q .pm{width:32px;height:32px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px var(--line);display:grid;place-items:center;transition:background .4s,transform .6s var(--spring),color .3s}
.q .pm::before{content:"+";font-size:20px;font-weight:400;line-height:1}
.q.open .pm{background:var(--accent);color:#fff;transform:rotate(135deg)}
.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.q.open .a{grid-template-rows:1fr}
.q .a>div{overflow:hidden}
.q .a p{padding:0 0 22px;color:var(--ink-soft);max-width:60ch;font-size:16px}
@media (max-width:900px){#faq .grid{grid-template-columns:1fr}}

/* ============ CONTACT / FOOTER ============ */
#contact{padding:0 calc(var(--pad) * .5) calc(var(--pad) * .5)}
#contact .blk{background:var(--dark);color:var(--on-dark);border-radius:var(--r-xl);padding:clamp(60px,9vw,130px) var(--pad) 0;position:relative;overflow:hidden}
#contact .blk::after{content:"";position:absolute;width:800px;height:800px;border-radius:50%;background:var(--accent);filter:blur(160px);opacity:.25;left:-300px;bottom:-400px;pointer-events:none}
#contact .inner{max-width:var(--maxw);margin:0 auto;position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
#contact h2{font-size:clamp(40px,5vw,74px);color:var(--on-dark);letter-spacing:-.05em;line-height:.9;font-variation-settings:"wdth" 85}
#contact h2 .it{color:#A0A8FF}
#contact .lead{color:var(--on-dark-soft);margin:28px 0}
#contact .tick{display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--on-dark-soft)}
#contact .tick div{display:flex;gap:10px;align-items:center;opacity:0;transform:translateX(-8px);transition:opacity .5s,transform .7s var(--ease)}
#contact .tick.in div{opacity:1;transform:none}#contact .tick.in div:nth-child(2){transition-delay:.15s}#contact .tick.in div:nth-child(3){transition-delay:.3s}
#contact .tick div::before{content:"✓";color:#34D399;font-weight:700}
.faqc{margin-top:36px;max-width:560px}
.faqh{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-soft);margin-bottom:6px}
#contact .q{border-top:1px solid rgba(255,255,255,.12)}
#contact .q:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
#contact .q button{padding:14px 0;font-size:16px;color:var(--on-dark)}
#contact .q .pm{width:26px;height:26px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2);color:var(--on-dark)}
#contact .q .a p{color:var(--on-dark-soft);font-size:14px;padding-bottom:14px}
#contact .mail{margin-top:28px;color:var(--on-dark-soft);font-size:14px}
#contact .mail a{color:#A0A8FF;font-weight:600}
.form{background:#16162A;border-radius:var(--r-lg);padding:28px;box-shadow:inset 0 0 0 1px #2A2A44;display:grid;gap:14px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{font-size:13px;font-weight:600;display:grid;gap:6px;color:#E8E8F4;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .7s var(--ease)}
.form.in label{opacity:1;transform:none}.form.in .two label:nth-child(2){transition-delay:.08s}.form.in>label:nth-of-type(1){transition-delay:.16s}.form.in>label:nth-of-type(2){transition-delay:.24s}.form.in>label:nth-of-type(3){transition-delay:.32s}
.form input,.form select,.form textarea{font:inherit;font-size:15px;color:#E8E8F4;background:#0D0D18;border:1px solid #2A2A44;border-radius:12px;padding:12px 14px;width:100%;transition:border-color .3s,box-shadow .3s}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:#818CF8;box-shadow:0 0 0 4px rgba(129,140,248,.18)}
.form textarea{min-height:110px;resize:vertical}
.form .btn{justify-self:start}
.form .sent-msg{display:none;background:rgba(16,185,129,.12);color:#E8E8F4;border-radius:12px;padding:14px 16px;font-size:14px}
.form .sent-msg b{display:block;color:#34D399;margin-bottom:4px}
.form.sent .sent-msg{display:block}
.form.sent .btn{display:none}
#contact form{position:relative}
#contact .form .note{right:10px;top:-34px;color:#A0A8FF;transform:rotate(3deg)}
.wm{font-family:var(--font-display);font-size:clamp(120px,26vw,400px);font-weight:800;letter-spacing:-.07em;line-height:.78;text-align:center;color:rgba(255,255,255,.04);-webkit-text-stroke:1px rgba(255,255,255,.22);margin:40px 0 -.3em;transform:translateY(40%);transition:transform 1.6s var(--ease);position:relative;user-select:none;font-variation-settings:"wdth" 80}
.wm.in{transform:none}
.wm em{font-style:normal;color:var(--accent);-webkit-text-stroke:0}
.foot{max-width:var(--maxw);margin:80px auto 0;position:relative;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--on-dark-soft);border-top:1px solid rgba(255,255,255,.1);padding-top:24px}
.foot b{font-family:var(--font-display);color:var(--on-dark);font-size:16px;letter-spacing:-.03em}
.foot .ln{display:flex;gap:18px}
.foot .ln a:hover{color:var(--on-dark)}
@media (max-width:900px){#contact .inner{grid-template-columns:1fr;gap:36px}#contact h2{font-size:clamp(36px,10vw,48px)}.form{padding:20px}.form .two{grid-template-columns:1fr}.foot{flex-direction:column;gap:12px;margin-top:48px}.foot .ln{flex-wrap:wrap;gap:12px}.wm{font-size:38vw}}

/* Modal */
#modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;pointer-events:none}
#modal .mbg{position:absolute;inset:0;background:rgba(21,21,30,.55);backdrop-filter:blur(8px);opacity:0;transition:opacity .4s}
#modal .mbox{position:relative;width:min(1000px,100%);background:var(--card);border-radius:var(--r-lg);overflow:hidden;display:grid;grid-template-columns:1.25fr .75fr;box-shadow:var(--shadow-lg);transform:translateY(40px) scale(.96);opacity:0;transition:transform .7s var(--spring),opacity .4s}
#modal.open{pointer-events:auto}#modal.open .mbg{opacity:1}#modal.open .mbox{transform:none;opacity:1}
#modal .mclose{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;background:var(--card);box-shadow:var(--shadow-md);font-size:22px;line-height:1;z-index:2}
#modal .mimg{background:var(--bg-2);position:relative}
#modal .mimg .tb{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:11px;color:var(--ink-faint)}
#modal .mimg .tb i{width:8px;height:8px;border-radius:50%;background:var(--line)}#modal .mimg .tb i:first-child{background:#F87171}#modal .mimg .tb i:nth-child(2){background:#FBBF24}#modal .mimg .tb i:nth-child(3){background:#34D399}#modal .mimg .tb span{margin-left:6px}
#modal .mimg img{display:block;width:100%;height:auto}
#modal #mcmp .cmp{border-radius:0;box-shadow:none}
#modal .mimg .cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
#modal .mimg .cmp .bef img{width:calc(100% * (100 / var(--p)))}
#modal .mtxt{padding:32px 28px;display:flex;flex-direction:column;gap:10px}
#modal .mtxt .tag{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--accent))}
#modal .mtxt h3{font-size:32px;letter-spacing:-.03em}
#modal .mtxt p{color:var(--ink-soft);font-size:15px}
#modal .mchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
#modal .mchips span{font-size:12px;font-weight:600;padding:5px 10px;border-radius:99px;background:var(--accent-tint);color:var(--accent-ink)}
#modal .mcta{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:20px}
#modal .mcta .btn{justify-content:center}
@media (max-width:800px){#modal .mbox{grid-template-columns:1fr;max-height:92vh;overflow:auto}}

/* Cursor */

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.mock,.badge,#hero .eyebrow,#hero .lead,#hero .cta,#hero .stats{opacity:1;transform:none}
  #hero h1 .w i,.split .w i{transform:none;filter:none;opacity:1}
  #intro{display:none}
}

/* Formulaire de contact : état d'erreur d'envoi + honeypot anti-robot (ajout intégration) */
.form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form .err-msg{display:none;background:rgba(224,67,63,.14);color:#E8E8F4;border-radius:12px;padding:14px 16px;font-size:14px}
.form .err-msg b{display:block;color:#FF8F8C;margin-bottom:4px}
.form .err-msg a{color:#FFB4B2;text-decoration:underline}
.form.err .err-msg{display:block}

/* ============================================================
   Repli sans JavaScript (progressive enhancement).
   Nos apparitions sont pilotées par le JS (classe .in) : si le JS ne tourne pas
   (désactivé, bloqué par une extension, erreur de chargement), la page resterait
   à moitié blanche. Ici on annule les états "avant apparition" et on rend la
   galerie horizontale scrollable nativement, comme sur mobile.
   ============================================================ */
html:not(.js) #intro{display:none}
html:not(.js) .rv,
html:not(.js) #hero h1 .w i,
html:not(.js) .split .w i,
html:not(.js) #hero .pills,
html:not(.js) #hero .pills span,
html:not(.js) #hero .lead,
html:not(.js) #hero .cta,
html:not(.js) #hero .stats,
html:not(.js) #hero .show,
html:not(.js) #hero .fbadge,
html:not(.js) #projets .pj,
html:not(.js) #outils .blk .tab,
html:not(.js) #outils .pane,
html:not(.js) #contact .tick div,
html:not(.js) .form label{opacity:1;transform:none;filter:none}
html:not(.js) .scard.rv{transform:none}
html:not(.js) #projets{height:auto!important;margin:0}
html:not(.js) #projets .pin{position:static;height:auto;padding:64px 0 56px}
html:not(.js) #projets .rail{overflow-x:auto;transform:none!important;gap:14px}
html:not(.js) #projets .prog,html:not(.js) #projets .cnt2{display:none}
html:not(.js) #outils .pane{position:relative}


/* ============================================================
   CHATBOT (porté du site principal): variables de thème aliasées
   sur la palette claire de la refonte. Le reste du bloc est verbatim.
   ============================================================ */
.cmb {
  --color-accent: var(--accent);
  --color-accent-hover: #4338CA;
  --color-white: var(--card);
  --color-text: var(--ink);
  --color-text-soft: var(--ink-faint);
  --color-border: var(--line);
  --color-bg: var(--bg);
}
/* en sombre, le dégradé du chatbot reprend l'accent-hover de la page devis */
[data-theme="dark"] .cmb { --color-accent-hover: #6366F1; }
/* ============================================================
   CHATBOT (assistant L&L): scopé .cmb, suit palette + thème
   ============================================================ */
.cmb {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  /* le conteneur ne doit jamais avaler les clics : sa zone (~380x630 en bas à
     droite) recouvrait sinon les éléments derrière, dont les puces de filtre. */
  pointer-events: none;
}

/* Fiabilité du tap mobile : pas de délai 300 ms, pas de surcouche qui avale
   le clic, le halo décoratif ne capte jamais les événements. */
.cmb__launcher,
.cmb__close,
.cmb__send,
.cmb__chip,
.cmb__msg a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cmb__ring { pointer-events: none; }
/* seuls le lanceur (toujours) et le panneau quand il est ouvert reçoivent le clic ;
   panneau fermé = visibility:hidden, donc déjà non cliquable. */
.cmb__launcher,
.cmb__panel { pointer-events: auto; }

/* --- Bouton flottant --- */
.cmb__launcher {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-accent) 40%, transparent),
              0 4px 12px rgba(0, 0, 0, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cmb__launcher:hover { transform: translateY(-2px) scale(1.04); }
.cmb__launcher:active { transform: scale(0.97); }
.cmb__launcher svg {
  width: 25px;
  height: 25px;
  position: absolute;
  transition: opacity 0.18s ease, transform 0.25s ease;
}
.cmb__ico-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.cmb--open .cmb__ico-open { opacity: 0; transform: rotate(90deg) scale(0.6); }
.cmb--open .cmb__ico-close { opacity: 1; transform: rotate(0) scale(1); }
.cmb__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0;
  animation: cmb-ring 2.6s ease-out infinite;
}
.cmb--open .cmb__ring { display: none; }
@keyframes cmb-ring {
  0%   { opacity: 0.5; transform: scale(1); }
  70%  { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .cmb__ring { animation: none; }
  .cmb__launcher, .cmb__launcher svg { transition: none; }
}

/* --- Panneau --- */
.cmb__panel {
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 130px));
  height: min(560px, calc(100dvh - 130px)); /* dvh : tient compte de la barre mobile */
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.cmb--open .cmb__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.cmb__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
}
.cmb__head-id { display: flex; align-items: center; gap: 12px; }
.cmb__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cmb__avatar svg { width: 20px; height: 20px; }
.cmb__title { font-weight: 700; font-size: 0.98rem; }
.cmb__status {
  font-size: 0.76rem;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cmb__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: cmb-pulse 2s infinite;
}
@keyframes cmb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.cmb__close {
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.cmb__close:hover { background: rgba(255, 255, 255, 0.3); }
.cmb__close svg { width: 15px; height: 15px; }

.cmb__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain; /* le scroll du chat ne fait pas défiler la page */
  -webkit-overflow-scrolling: touch;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-bg);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-accent) 45%, transparent) transparent;
}
.cmb__body::-webkit-scrollbar { width: 7px; }
.cmb__body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-accent) 38%, transparent);
  border-radius: 4px;
}

.cmb__msg {
  max-width: 86%;
  padding: 11px 14px;
  font-size: 0.9rem;
  line-height: 1.55;
  border-radius: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
  animation: cmb-in 0.25s ease;
}
@keyframes cmb-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cmb__msg--bot {
  align-self: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px;
}
.cmb__msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.cmb__msg a {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 34%, transparent);
  transition: filter 0.15s ease, transform 0.12s ease;
}
.cmb__msg a::after { content: " \2192"; }
.cmb__msg a:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cmb__msg a:active { transform: translateY(0) scale(0.98); }
.cmb__msg--user a {
  background: #fff;
  color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.cmb__msg b, .cmb__msg strong { font-weight: 700; }

.cmb__typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.cmb__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text);
  opacity: 0.4;
  animation: cmb-bounce 1.2s infinite;
}
.cmb__typing span:nth-child(2) { animation-delay: 0.15s; }
.cmb__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cmb-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30%           { transform: translateY(-4px); opacity: 0.9; }
}

/* Suggestions dans le fil (sous la réponse) : pas de barre, pas de scroll
   propre, elles passent à la ligne. Un seul ascenseur = le corps du chat. */
.cmb__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: stretch;
  margin-top: -4px;
}
.cmb__chip {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-white);
  border: 1.5px solid var(--color-accent);
  border-radius: 999px;
  padding: 7px 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.cmb__chip:hover {
  background: var(--color-accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.cmb__chip:active { transform: translateY(0) scale(0.97); }

.cmb__input {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
  background: var(--color-white);
}
.cmb__input input {
  flex: 1;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--color-text);
  background: var(--color-bg);
  outline: none;
  transition: border-color 0.15s ease;
}
.cmb__input input:focus { border-color: var(--color-accent); }
.cmb__send {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, opacity 0.15s ease;
}
.cmb__send:hover { transform: scale(1.06); }
.cmb__send:disabled { opacity: 0.5; }
.cmb__send svg { width: 18px; height: 18px; }

.cmb__foot {
  font-size: 0.72rem;
  color: var(--color-text-soft);
  text-align: center;
  padding: 8px 14px 12px;
  background: var(--color-white);
}
.cmb__foot a { color: var(--color-accent); font-weight: 600; }

/* --- Mobile : plein écran, pas de panneau flottant étriqué --- */
@media (max-width: 560px) {
  /* Quand le chat est ouvert, on masque le bouton flottant :
     on ferme via la croix de l'en-tête (sinon il flotte sur le plein écran). */
  .cmb--open .cmb__launcher { display: none; }

  .cmb__panel {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform-origin: center;
    transform: translateY(100%);
  }
  .cmb--open .cmb__panel { transform: translateY(0); }

  /* Encoche / barre d'état et zone du bouton accueil iOS */
  .cmb__head { padding-top: max(16px, env(safe-area-inset-top)); }
  .cmb__foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

  /* Confort tactile */
  .cmb__body { padding: 16px; }
  .cmb__msg { max-width: 90%; font-size: 0.92rem; }
  .cmb__close { width: 40px; height: 40px; }
  .cmb__close svg { width: 17px; height: 17px; }
  .cmb__chip { padding: 9px 15px; font-size: 0.85rem; }
  .cmb__send { width: 46px; height: 46px; }
  .cmb__send svg { width: 19px; height: 19px; }
  /* font-size 16px : empêche le zoom auto au focus sur iOS */
  .cmb__input { padding: 12px; }
  .cmb__input input { font-size: 16px; padding: 12px 16px; }

  /* Le lanceur respecte les marges sûres et reste bien atteignable */
  .cmb { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .cmb__panel { transition: opacity 0.2s ease, visibility 0.2s; }
}

/* --- Chatbot : reglages propres a la v4 ---------------------------------
   Il doit passer au-dessus de la barre de navigation (50) mais sous la fiche
   projet (80). Et il s'efface quand une surcouche verrouille le scroll
   (menu mobile ou fiche projet ouverte), sinon il flotte par-dessus. */
.cmb{z-index:70;transition:opacity .25s var(--ease),visibility .25s}
html.lock .cmb{opacity:0;visibility:hidden;pointer-events:none}

/* ============================================================
   Mise au point mobile (2026-08-26)
   ============================================================ */
@media (max-width:900px){
  /* cibles tactiles : les liens de pied de page faisaient 17 à 22 px de haut,
     sous le seuil confortable au doigt. */
  .foot .ln{gap:6px 18px}
  .foot .ln a{padding:11px 0;display:inline-flex;align-items:center;min-height:44px}
  #nav .brand{padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
  /* petits textes d'interface remontés au-dessus du seuil de lisibilité */
  .fbadge{font-size:12px}
  /* le rail d'onglets se coupait en plein mot : on le fait accrocher et on
     signale qu'il défile par un dégradé sur le bord droit. */
  #outils .tabs{scroll-snap-type:x mandatory;scroll-padding-left:var(--pad)}
  #outils .tab{scroll-snap-align:start;flex:0 0 auto}
  /* le dégradé est posé sur le bloc parent, le rail lui-même défile */
  #outils .grid{position:relative}
  #outils .grid::before{content:"";position:absolute;right:calc(var(--pad) * -1);top:0;height:64px;width:52px;pointer-events:none;z-index:2;background:linear-gradient(90deg,transparent,var(--accent-tint))}
}
@media (max-width:900px){
  /* libellés lisibles des illustrations (les textes à l'intérieur des mini-sites
     restent petits : c'est un site miniature, pas de l'interface). */
  /* la version mobile des visuels est un bloc à part (.mvis / .steps2m) :
     c'est celle-là qu'il faut viser, pas la copie desktop. */
  .steps2 .lbl,.mvis .lbl,.steps2m .lbl{font-size:12px}
  .cv .cbtn,.mvis .cbtn{font-size:12px}
}
@media (max-width:900px){
  /* Sur téléphone, les mots du titre montaient derrière un cache : le titre
     n'était donc peint qu'après 1,5 s d'animation, et c'est lui que Google
     mesure (LCP). Il s'affiche maintenant d'emblée ; l'effet reste sur desktop. */
  #hero h1 .w i{transform:none;opacity:1;transition:none}
  /* 2026-08-27 : le chapô du hero devenait l'élément LCP et restait en
     opacity:0 jusqu'à ce que le JS pose la classe .in, soit 2,8 s de retard
     d'affichage. Au-dessus de la ligne de flottaison, rien ne doit dépendre
     du JS pour être visible : l'entrée se fait au translate seul. */
  #hero .lead,#hero .cta,#hero .pills,#hero .stat{opacity:1;transition-delay:0s}
  #hero .lead.rv,#hero .cta.rv,#hero .pills.rv{transform:none;transition:none}
}

/* ============================================================
   Vue mobile : refonte de trois blocs (2026-08-26)
   ============================================================ */
@media (max-width:800px){
  /* --- Galerie projets : rail qui défile au doigt, une carte à la fois
     (2026-08-27, demande de Liham : la liste verticale mettait les 11 projets
     les uns sous les autres). La première version du rail faisait défiler la
     page au lieu des cartes : `touch-action:pan-x` règle ça en réservant le
     geste horizontal au rail et le geste vertical à la page. --- */
  #projets .rail{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;touch-action:pan-x;
    overscroll-behavior-x:contain;scrollbar-width:none;padding:0 var(--pad) 6px;
    transform:none!important;will-change:auto}
  #projets .rail::-webkit-scrollbar{display:none}
  #projets .pj{flex:0 0 78vw;width:auto;aspect-ratio:auto;scroll-snap-align:start;opacity:1;transform:none}
  #projets .pj .art{flex:none;aspect-ratio:16/10}
  #projets .pj.end{aspect-ratio:auto;padding:26px 22px}
  #pmore{display:none}
  .prail-hint{display:block}
}
.prail-hint{display:none;margin:12px var(--pad) 0;font-size:12px;color:var(--ink-faint)}
@media (min-width:801px){ #pmore{display:none} }

/* --- Chiffres du hero : trois blocs empilés faisaient une colonne molle.
   Sur téléphone : une seule rangée, valeur + libellé court. --- */
.stat .sh{display:none}
@media (max-width:800px){
  #hero .stats{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px;padding-top:18px}
  .stat b{font-size:19px;letter-spacing:-.03em}
  /* le libellé long est défini par #hero .stat span : il faut la même portée */
  #hero .stat span{display:none}
  #hero .stat .sh{display:block;font-style:normal;font-size:11.5px;line-height:1.35;color:var(--ink-faint);margin-top:5px}
}

/* --- Bouton de devis collant : sur téléphone il suit le visiteur partout,
   et disparaît du hero pour ne pas faire doublon. --- */
#mcta{display:none}
@media (max-width:800px){
  #hero .cta .btn.big{display:none}
  #hero .cta{margin-top:22px}
  #mcta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:46;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 -1px 0 var(--line),0 -12px 30px -22px rgba(21,21,30,.5);
    transform:translateY(120%);transition:transform .45s var(--ease)}
  #mcta.on{transform:none}
  #mcta .btn{width:100%;justify-content:center}
  /* le lanceur du chat remonte pour ne pas passer sous la barre */
  .cmb{bottom:calc(104px + env(safe-area-inset-bottom))}
  body.nav-open #mcta{transform:translateY(120%)}
}

/* --- Étapes, vue mobile : on retrouve la notion de séquence.
   Les 4 cases suivent le même parcours que sur desktop (1 haut-gauche,
   2 haut-droite, 3 bas-droite, 4 bas-gauche) et les flèches le montrent. --- */
@media (max-width:900px){
  .mvis .steps2m{position:relative}
  .mvis .steps2m .sq:nth-child(1){grid-area:1/1}
  .mvis .steps2m .sq:nth-child(2){grid-area:1/2}
  .mvis .steps2m .sq:nth-child(3){grid-area:2/2}
  .mvis .steps2m .sq:nth-child(4){grid-area:2/1}
  .mvis .steps2m .con{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line),var(--shadow-md);display:grid;place-items:center;font-size:13px;font-weight:700;z-index:6}
  .mvis .steps2m .con.c1{left:50%;top:25%;margin:-13px 0 0 -13px}
  .mvis .steps2m .con.c2{left:75%;top:50%;margin:-13px 0 0 -13px}
  .mvis .steps2m .con.c3{left:50%;top:75%;margin:-13px 0 0 -13px}
  /* le jour redevient visible : c'est lui qui raconte la semaine */
  .mvis .steps2m .stp{flex-wrap:wrap;max-width:calc(100% - 16px);row-gap:1px}
  .mvis .steps2m .stp em{display:inline;font-size:9.5px;color:var(--on-dark-soft);width:100%;padding-left:26px;margin-top:-1px}
}

/* --- Planche d'identité, vue mobile : la grille 6x6 d'origine écrasait les
   cartes dans 420 px de haut (chevauchements, libellés coupés). On repasse
   sur deux colonnes qui prennent la hauteur qu'il leur faut. --- */
@media (max-width:900px){
  .mvis .mboard{height:auto}
  .mvis .board{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:none;gap:10px}
  .mvis .board .bi{grid-column:auto;grid-row:auto;min-height:0}
  .mvis .board .sw1,.mvis .board .res{grid-column:1/-1}
  .mvis .board .ph1,.mvis .board .ph2{aspect-ratio:4/3;position:relative}
  .mvis .board .bi em{display:block;font-size:11.5px;margin-top:6px}
  .mvis .board .bi small{font-size:11.5px;letter-spacing:.1em}
  .mvis .board .ty b span{font-size:28px}
  /* les pastilles de couleur restaient à 40 % de leur taille : leur animation
     d'apparition dépend d'une classe que la copie mobile ne reçoit pas. */
  .mvis .board .swl i{transform:none}
}

/* --- Planche d'identité interactive : on peut essayer les couleurs, la
   typographie et le ton, et voir le « Résultat » se mettre à jour. --- */
.board .swl i,.board .ty b span,.board .tone .chips span{cursor:pointer;transition:transform .3s var(--spring),opacity .3s,box-shadow .3s}
.board .swl i:hover,.board .ty b span:hover,.board .tone .chips span:hover{transform:translateY(-2px)}
.board .swl i:focus-visible,.board .ty b span:focus-visible,.board .tone .chips span:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.board .swl i[aria-pressed="true"]{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink);transform:translateY(-2px)}
.board .ty b span[aria-pressed="true"]{opacity:1}
.board .res .cbtn{background:var(--pick,#8B5E3C);font-family:var(--pickf,Georgia,serif);transition:background .4s var(--ease),font-family .1s}
.board .res .ccard b{background:var(--pick,#8B5E3C);transition:background .4s var(--ease)}
.board .bhint{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-top:8px}

/* --- Conversation jouable : suggestions à la place du faux champ de saisie --- */
.csug{border-top:1px solid var(--line);padding:12px 16px 14px;display:grid;gap:9px;background:var(--bg-2)}
.csug small{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.csug-r{display:flex;flex-wrap:wrap;gap:7px}
.csug-b{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--card);border:0;box-shadow:inset 0 0 0 1.5px var(--line);border-radius:99px;padding:9px 14px;cursor:pointer;transition:box-shadow .3s,transform .35s var(--spring),opacity .3s}
.csug-b:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-ink)}
.csug-b:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.csug-b:disabled{opacity:.4;cursor:default}
.chat .cbody{overflow-y:auto;scrollbar-width:none}
.chat .cbody::-webkit-scrollbar{display:none}

/* ============ PERF : animations décoratives ============ */
/* Mesuré au repos, mobile bridé x4 : les animations en boucle coûtaient
   2 600 ms sur 6 s. Deux leviers : mise en pause hors écran (classe posée en
   JS) et retrait des effets plein écran les plus chers sur téléphone. */
.anim-off,.anim-off *,.anim-off *::before,.anim-off *::after{animation-play-state:paused!important}
@media (max-width:900px){
  /* calque de grain : fixe, plein écran, mix-blend-mode -> le navigateur
     refond toute la page à chaque image. Imperceptible sur un téléphone. */
  /* on garde le grain, en version allégée : calque à la taille de l'écran et
     sans mix-blend-mode (le noir en normal donne le même rendu que multiply
     sur fond clair) -> plus de refonte de toute la page à chaque image. */
  #grain{inset:0;width:100%;height:100%;mix-blend-mode:normal;opacity:.06}
  :root[data-theme="dark"] #grain{mix-blend-mode:normal;opacity:.07}
  /* halos flous : un flou de 90 px re-rasterisé à chaque image du mouvement */
  .blob{animation:none!important}
}

/* ============ DUO (mobile) ============ */
/* Lenny et Liham côte à côte plutôt qu'empilés (demande du 2026-08-27).
   Sous 620 px la demi-largeur ne suffit plus pour l'avatar à gauche du nom :
   la fiche passe en colonne centrée. */
@media (max-width:620px){
  #why .who{gap:10px}
  #why .who .person{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px;padding:14px 10px}
  #why .who .person .av{width:46px;height:46px;font-size:18px;border-radius:14px}
  #why .who .person h3{font-size:17px}
  #why .who .person .role{font-size:11px;line-height:1.3}
  #why .whol b{font-size:21px}
  /* Les trois arguments passaient en pleine largeur, l'un sous l'autre : bloc
     de texte lourd juste après deux fiches côte à côte. On les met côte à côte
     en trois pastilles, dans le même langage que les fiches. */
  #why .claim{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
  #why .claim div{flex-direction:column;align-items:center;text-align:center;gap:7px;
    padding:12px 6px;background:var(--card);border:1px solid var(--line);border-radius:16px;
    font-size:11px;line-height:1.3;font-weight:600;color:var(--ink-soft)}
  #why .claim div::before{width:22px;height:22px;font-size:12px}
}

/* ============ OUTILS : accordéon mobile ============ */
/* Le rail d'onglets horizontal (2026-06) obligeait à faire défiler
   latéralement, et le cadre d'écran de portable débordait de la largeur.
   Sur téléphone chaque outil devient une ligne dépliable qui contient sa
   propre maquette : plus rien ne défile à l'horizontale. */
@media (max-width:900px){
  .acc{display:flex;flex-direction:column;gap:10px}
  .accitem{background:var(--card);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:box-shadow .3s}
  .accitem:has(.tab.on){box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent),var(--shadow-md)}
  .accitem .tab{width:100%;display:grid;grid-template-columns:34px 1fr 18px;align-items:center;gap:12px;
    padding:14px 16px;text-align:left;background:none;box-shadow:none;border-radius:0}
  .accitem .tab .ic{width:34px;height:34px}
  .accitem .tab b{font-size:14.5px}
  .accitem .tab small{display:block;max-height:none;opacity:1;font-size:12.5px;line-height:1.35;margin-top:3px;color:var(--ink-soft)}
  .accitem .tab .pr{display:none}
  /* chevron : indique qu'on peut déplier */
  .accitem .tab::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);
    transform:rotate(45deg);justify-self:center;margin-top:-4px;transition:transform .35s var(--ease),border-color .3s}
  .accitem .tab.on::after{transform:rotate(-135deg);margin-top:2px;border-color:var(--accent)}
  /* Ouverture/fermeture animée : la ligne de grille passe de 0fr à 1fr, ce qui
     anime la hauteur réelle sans avoir à la mesurer en JS. En display:none le
     volet apparaissait d'un coup, et surtout les transitions internes (barres,
     listes, courbes) ne jouaient jamais : un élément qui passe de none à block
     n'a pas d'état de départ à animer. Le volet reste donc affiché, simplement
     replié. */
  .accbody{display:grid;grid-template-rows:0fr;visibility:hidden;
    transition:grid-template-rows .5s var(--ease),visibility 0s linear .5s}
  .accbody .accin{overflow:hidden;min-height:0}
  .tab.on+.accbody{grid-template-rows:1fr;visibility:visible;
    transition:grid-template-rows .5s var(--ease),visibility 0s}
  /* la maquette reprend sa place dans le flux, sans cadre d'écran */
  .accbody .pane{position:relative;inset:auto;display:block;padding:0 10px 12px;opacity:1;transform:none;pointer-events:auto}
  /* rien ne doit dépasser en largeur */
  .accbody .kpis.k4{grid-template-columns:1fr 1fr;gap:8px}
  .accbody .bars,.accbody .bars2{gap:4px}
  .accbody .chart,.accbody .mini2{padding:12px}
  .accbody .prow{grid-template-columns:58px repeat(5,1fr);gap:3px}
  .accbody .prow .who{font-size:10px;gap:5px}
  .accbody .prow .who i{width:20px;height:20px;font-size:8px}
  .accbody .prow .d b{font-size:7.5px;padding:0 3px}
  .accbody .list>div{grid-template-columns:32px 1fr auto;gap:10px;padding:10px 0}
  .accbody .steps{gap:8px}
  /* maquettes resserrées : sur téléphone elles doivent rester lisibles sans
     transformer la section en tunnel de défilement */
  .accbody .kpis div{padding:10px}
  .accbody .kpis b{font-size:19px}
  .accbody .kpis small{font-size:9px}
  .accbody .bars{height:84px}
  .accbody .dgrid{gap:10px}
  /* les deux encarts secondaires du tableau de bord (devis par statut,
     dernières factures) doublaient la hauteur de la maquette : les chiffres
     clés et la courbe suffisent à montrer l'outil sur un téléphone */
  .accbody .side2{display:none}
  .accbody .leg{font-size:10px}
  /* en-têtes plus courts : 4 x 87 px, c'était un tiers de la section */
  .accitem .tab{padding:12px 14px}
  .accitem .tab small{font-size:12px}
  #outils .sec-h{margin-bottom:22px}
  #outils .lead{font-size:15px}
  .integ{gap:8px}
}

/* ============================================================
   Services sur téléphone (2026-08-27) : les pastilles filaient sur
   un rail horizontal et se faisaient couper au bord de la carte —
   « Google Maps », « SEO conservé » ou « Formulaires » restaient
   invisibles, et la page mélangeait deux sens de défilement. Elles
   reviennent à la ligne. Deux détails des maquettes débordaient
   aussi : le libellé des heures et le bouton du panier.
   ============================================================ */
@media (max-width:900px){
  .svc .chips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0;gap:6px}
  .svc .chips span{flex:0 1 auto;max-width:100%}
  /* « cette sem. » passait à la ligne et sortait de sa tuile */
  .svc .kpis{gap:8px}
  .svc .kpis div{padding:12px 10px;min-width:0}
  .svc .kpis small{font-size:9px;letter-spacing:.06em}
  .svc .kpis em{font-size:10px;white-space:nowrap}
  /* le bouton du panier passait sur deux lignes dans une pastille à
     hauteur fixe (overflow:hidden pour l'animation) : le second mot
     était rogné */
  .svc .add{min-width:0;white-space:nowrap;padding:10px 14px;font-size:12px}
  .svc .prod{grid-template-columns:92px 1fr;gap:12px}
  .svc .pinfo b{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .accbody,.tab.on+.accbody{transition:none}
}

/* ============================================================
   Photos des maquettes (2026-08-27) : les zones « image » des faux
   sites étaient des aplats dégradés, on ne comprenait pas ce que
   montrait la page. Images générées pour le site (elles nous
   appartiennent : pas de banque d'images, aucune attribution à
   afficher), converties en WebP aux dimensions d'affichage :
   86 Ko pour les huit, et seule celle de l'ébéniste est chargée
   d'emblée, les autres calques restent en display:none.
   ============================================================ */
/* Ébéniste : la photo remplace le dégradé et ses ronds décoratifs */
.spic{background-image:url(assets/v4/img/maq-ebeniste.webp);background-size:cover;background-position:center}
.spic i{display:none}

/* Pizzeria : photo plein cadre, le texte se cale sur la zone sombre à gauche */
.fullhero{background-image:linear-gradient(90deg,rgba(10,30,24,.92) 0%,rgba(10,30,24,.78) 38%,rgba(10,30,24,.3) 68%,rgba(10,30,24,.1) 100%),url(assets/v4/img/maq-pizza.webp);
  background-size:cover;background-position:center;place-items:center start;text-align:left;padding-left:6%}
.fullhero::before,.fullhero::after{display:none}
.fullhero .fh h4{margin:0;max-width:14ch}
.fullhero .fbtns{justify-content:flex-start}

/* Salon : une photo occupe le vide sous le titre */
.saltxt{display:flex;flex-direction:column}
.salpic{display:block;flex:1;min-height:70px;margin-top:14px;border-radius:var(--r);
  background:url(assets/v4/img/maq-salon.webp) center/cover}

/* Boutique : trois vrais visuels produit à la place des ronds dorés */
.pr i{background-size:cover;background-position:center}
.pr i::after{display:none}
.lay3 .pr:nth-child(1) i{background-image:url(assets/v4/img/maq-bijou-1.webp)}
.lay3 .pr:nth-child(2) i{background-image:url(assets/v4/img/maq-bijou-2.webp)}
.lay3 .pr:nth-child(3) i{background-image:url(assets/v4/img/maq-bijou-3.webp)}

/* Planche d'identité : « vos photos » deviennent de vraies photos. Le voile
   garde le lien avec les pastilles de couleur : on touche une couleur, la
   photo prend la teinte — c'est tout le propos de « tirées de vos photos ». */
.ph1 i,.ph2 i{background-size:cover;background-position:center}
.ph1 i{background-image:url(assets/v4/img/maq-photo-1.webp)}
.ph2 i{background-image:url(assets/v4/img/maq-photo-2.webp)}
.ph1 i::after,.ph2 i::after{content:"";position:absolute;inset:0;left:0;right:0;top:0;height:auto;width:auto;
  aspect-ratio:auto;border-radius:0;transform:none;background:var(--pick);mix-blend-mode:color;opacity:.5;
  transition:background .55s var(--ease),opacity .55s}

/* Salon : la liste de tarifs était calée en bas de sa colonne, laissant une
   grande zone vide en haut à droite. Elle se répartit sur toute la hauteur,
   à hauteur du texte de gauche. */
.lay2 .prices{justify-content:space-between}
.lay2 .prices>.plist{display:flex;flex-direction:column;justify-content:space-between;flex:1;padding:0;border-top:0}
.lay2 .plist>div{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid rgba(0,0,0,.12)}

/* Les aperçus de site des étapes 2 à 4 montraient un aplat violet en guise de
   photo. On y remet celle de l'ébéniste, déjà chargée pour le hero : zéro
   octet de plus, et c'est le même site qu'on voit se construire d'une étape à
   l'autre puis passer en ligne. */
.ghero em{background:url(assets/v4/img/maq-ebeniste.webp) center/cover}

/* Maquette salon sur téléphone : le titre gardait un minimum de 26 px et
   sortait du cadre de la fausse page. */
@media (max-width:900px){
  .saltxt h4{font-size:19px}
  .saltxt p{font-size:10px}
  .lay2 .prices,.lay2 .plist>div{font-size:10px}
}

/* ============================================================
   Seconde main (2026-08-27) : le bloc était décalé (28 px à gauche
   contre 86 px à droite) et surtout il ne criait pas l'offre. Un
   bandeau d'annonce ouvre maintenant la section sur toute sa
   largeur, et le rythme vertical a été resserré.
   ============================================================ */
.spromo{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;
  margin:0 calc(var(--pad) * -1) clamp(34px,3.6vw,52px);
  padding:14px clamp(20px,3vw,40px);background:var(--accent);color:var(--on-accent);
  border-radius:var(--r-xl) var(--r-xl) 0 0}
.spromo__tag{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;background:rgba(255,255,255,.16);padding:6px 12px;border-radius:99px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);flex:none}
.spromo__txt{font-size:14px;line-height:1.4;opacity:.94}
.spromo__txt b{font-weight:700;opacity:1}
.spromo__reste{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:13px;
  font-weight:700;background:var(--card);color:var(--accent-ink);padding:7px 14px;border-radius:99px;flex:none}
.spromo__reste i{width:7px;height:7px;border-radius:50%;background:var(--free);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--free) 25%,transparent)}
/* rythme resserré : la section faisait 1 580 px de haut */
#seconde .shead{align-items:start}
.sfacts{margin-top:20px}
.shelf{margin-top:clamp(26px,3vw,38px)}
.show3{margin-top:clamp(22px,2.6vw,32px)}
.scta{margin-top:clamp(20px,2.4vw,28px)}
.spv{aspect-ratio:16/9}
@media (max-width:900px){
  .spromo{margin-bottom:26px;padding:12px 16px;gap:8px 12px}
  .spromo__txt{font-size:12.5px;width:100%;order:3}
  .spromo__reste{margin-left:auto;font-size:12px;padding:6px 11px}
  .spromo__tag{font-size:11px;padding:5px 10px}
}

/* la section restait haute : on resserre les cartes et l'étiquette de prix,
   sans toucher à la lisibilité (deux rangées de six aperçus, c'est le sujet) */
@media (min-width:901px){
  .ptag{width:278px;padding:38px 22px 22px}
  .scard{padding:8px 8px 10px}
  .scap{padding:11px 5px 0;margin-bottom:9px;gap:12px}
  .sct b{font-size:15.5px}
  .sct small{font-size:12px;margin-top:4px}
  .sprice b{font-size:23px}
  .sgo{padding:9px 5px 0;font-size:12.5px}
  .sbar{padding:7px 10px}
}

/* ============ SELECT CUSTOM (formulaire de contact) ============ */
.dsel{position:relative;display:block}
.dsel.js>select{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;border:0;padding:0}
.dsel-btn{font:inherit;font-size:15px;font-weight:400;color:#E8E8F4;background:#0D0D18;border:1px solid #2A2A44;border-radius:12px;padding:12px 14px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer;transition:border-color .3s,box-shadow .3s}
.dsel-btn:hover{border-color:#3C3C60}
.dsel-btn:focus-visible,.dsel.open .dsel-btn{outline:0;border-color:#818CF8;box-shadow:0 0 0 4px rgba(129,140,248,.18)}
.dsel-arr{flex:none;color:#8888AA;transition:transform .25s var(--ease),color .25s}
.dsel.open .dsel-arr{transform:rotate(180deg);color:#A0A8FF}
.dsel-pop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;background:#16162A;border:1px solid #35355A;border-radius:14px;padding:6px;box-shadow:0 28px 56px -20px rgba(0,0,0,.75);max-height:min(320px,52vh);overflow:auto;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s ease,transform .18s var(--ease)}
.dsel-pop:focus{outline:0}
.dsel.open .dsel-pop{opacity:1;transform:none;pointer-events:auto}
.dsel.up .dsel-pop{top:auto;bottom:calc(100% + 8px);transform:translateY(6px)}
.dsel.up.open .dsel-pop{transform:none}
.dsel-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:10px;font-size:15px;font-weight:400;color:#B9B9D2;cursor:pointer;transition:background .18s,color .18s}
.dsel-opt.hl,.dsel-opt:hover{background:rgba(129,140,248,.16);color:#E8E8F4}
.dsel-opt[aria-selected="true"]{color:#E8E8F4;font-weight:600}
.dsel-opt[aria-selected="true"]::after{content:"";width:14px;height:14px;flex:none;background:#818CF8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.dsel-pop,.dsel-arr{transition:none}}