/* =========================================================
   DCB AGENCY — « La Salle de Stratégie »
   ---------------------------------------------------------
   Page-specific styles. Naming by room:
   agx- hero/scanner · tk- ticker · stg- transformation stage
   bl- brand identity lab · wl- website experience lab
   pa- project architect · sh- showroom · mt- méthode
   of- offres · pr- project room · dh- dossier HUD
   Legacy blocks (.agp-*, .pcard2, .faq-*) are kept verbatim:
   js/pricing-data.js re-renders inside .agp-pane.
   ========================================================= */

/* ---------- room shell : construction-plan framing ---------- */
/* padding-top only — must NOT reset .wrap's horizontal padding (0 40px) */
.salle{position:relative;padding-top:96px}
.salle-head{position:relative;margin-bottom:40px}
.salle-tag{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.salle-tag .rn{color:var(--violet);font-weight:700}
.salle-tag::before{content:"";width:26px;height:1px;background:var(--violet);box-shadow:0 0 8px var(--violet-glow)}
.salle-tag.cy .rn{color:var(--cyan)}.salle-tag.cy::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow)}
.salle-t{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.9;font-size:clamp(36px,4.6vw,68px);margin:18px 0 0;
  background:linear-gradient(176deg,#fff,#cfcfdb 60%,#9d9db0);-webkit-background-clip:text;background-clip:text;color:transparent}
.salle-sub{color:var(--muted);font-size:16px;line-height:1.55;max-width:560px;margin-top:18px}
/* construction ticks that overflow the frame */
.blueprint{position:relative}
.blueprint::before,.blueprint::after{content:"+";position:absolute;font-family:var(--mono);font-size:13px;color:var(--dim);pointer-events:none;z-index:3}
.blueprint::before{left:-7px;top:-9px}
.blueprint::after{right:-7px;bottom:-9px}
.bp-line{position:absolute;background:var(--line-soft);pointer-events:none}
.bp-line.h{left:-60px;right:-60px;height:1px}
.bp-line.v{top:-60px;bottom:-60px;width:1px}

/* photo window — every photo lives in one of these */
.ph-win{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0a0a10}
.ph-win img{width:100%;height:100%;object-fit:cover;display:block}
.ph-win .grade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,11,.14) 0%,transparent 34%,rgba(8,8,11,.88) 100%);pointer-events:none}
.ph-win .mesh{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:38px 38px;opacity:.35;mask-image:radial-gradient(ellipse at 50% 20%,#000,transparent 82%)}
.ph-win .cap{position:absolute;left:16px;bottom:13px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:9px}
.ph-win .cap::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet);box-shadow:0 0 9px var(--violet-glow)}
.ph-win .corner{color:rgba(255,255,255,.28)}

/* reco badge (profile-aware recommendations) */
.reco-badge{display:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#06060a;background:var(--lime);border-radius:5px;padding:4px 8px;white-space:nowrap}
.is-reco .reco-badge{display:inline-block;animation:recoIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes recoIn{from{opacity:0;transform:translateY(-4px)}}

/* =========================================================
   SALLE 01 — HERO + AUTHORITY SCANNER
   ========================================================= */
.agx-hero{padding-top:128px}
.agx-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:60px;align-items:start}
.agx-head{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.87;letter-spacing:.005em;font-size:clamp(50px,6vw,96px);margin:22px 0 0;
  background:linear-gradient(176deg,#fff,#cfcfdb 55%,#9494a6);-webkit-background-clip:text;background-clip:text;color:transparent}
.agx-head em{font-style:normal;-webkit-text-fill-color:transparent;background:linear-gradient(120deg,var(--violet),#b794ff);-webkit-background-clip:text;background-clip:text}
.agx-accent{width:170px;height:2px;background:linear-gradient(90deg,var(--violet),transparent);margin-top:16px}
.agx-sub{color:var(--muted);font-size:17px;max-width:470px;margin:26px 0 30px;line-height:1.55}
.agx-actions{display:flex;gap:14px;flex-wrap:wrap}
.agx-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.agx-meta span{display:inline-flex;align-items:center;gap:8px}
.agx-meta i{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow)}

/* scanner */
.scan-shell{position:relative}
.scan-frame{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0a0a10;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.scan-bg{position:absolute;inset:0}
.scan-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.scan-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,11,.55),rgba(8,8,11,.86) 78%)}
.scan-inner{position:relative;z-index:2;padding:26px 26px 24px}
.scan-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.scan-top .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:9px}
.scan-top .lab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime-glow);animation:scanBlink 1.5s infinite}
@keyframes scanBlink{0%,100%{opacity:1}50%{opacity:.2}}
.scan-top .st2{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.scan-q{font-family:var(--display);font-size:clamp(21px,2vw,27px);letter-spacing:.03em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.scan-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scan-opt{position:relative;text-align:left;border:1px solid var(--line);border-radius:13px;padding:15px 15px 13px;background:rgba(10,10,16,.55);backdrop-filter:blur(4px);transition:.3s;cursor:pointer;display:flex;flex-direction:column;gap:5px}
.scan-opt .so-ico{color:var(--violet);margin-bottom:3px}
.scan-opt .so-t{font-size:14.5px;font-weight:700;color:#fff;line-height:1.25}
.scan-opt .so-d{font-size:11.5px;color:var(--muted);line-height:1.4}
.scan-opt:hover{border-color:rgba(139,92,246,.55);transform:translateY(-2px);background:rgba(139,92,246,.08)}
.scan-opt[aria-pressed="true"]{border-color:var(--violet);background:linear-gradient(160deg,rgba(139,92,246,.2),rgba(10,10,16,.6));box-shadow:0 0 0 1px var(--violet),0 12px 34px rgba(124,58,237,.25)}
.scan-opt[aria-pressed="true"] .so-ico{color:#fff}
/* sweep beam */
.scan-beam{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}
.scan-beam i{position:absolute;top:0;bottom:0;width:2px;background:var(--cyan);box-shadow:0 0 22px var(--cyan-glow),0 0 6px var(--cyan);left:-2%}
.scan-frame.scanning .scan-beam{opacity:1}
.scan-frame.scanning .scan-beam i{animation:beamSweep .9s cubic-bezier(.6,.05,.3,1) forwards}
@keyframes beamSweep{from{left:-2%}to{left:102%}}
/* result */
.scan-res{margin-top:16px;border-top:1px dashed var(--line);padding-top:15px;min-height:96px}
.scan-res .sr-lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.scan-res.on .sr-lab{color:var(--lime)}
.scan-res .sr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sr-chip{font-size:12.5px;font-weight:600;color:#fff;border:1px solid rgba(139,92,246,.5);background:rgba(139,92,246,.13);border-radius:999px;padding:7px 13px;opacity:0;transform:translateY(6px)}
.scan-res.on .sr-chip{animation:chipIn .5s cubic-bezier(.2,.8,.2,1) forwards}
.scan-res.on .sr-chip:nth-child(2){animation-delay:.08s}
.scan-res.on .sr-chip:nth-child(3){animation-delay:.16s}
@keyframes chipIn{to{opacity:1;transform:none}}
.scan-res .sr-note{font-size:11.5px;color:var(--muted);margin-top:11px;display:none;align-items:center;gap:8px}
.scan-res.on .sr-note{display:flex}
.scan-res .sr-note svg{color:var(--lime);flex:none}
.scan-res .sr-idle{font-size:12.5px;color:var(--dim);margin-top:10px}
.scan-res.on .sr-idle{display:none}

/* =========================================================
   TICKER
   ========================================================= */
.tk{margin-top:64px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);overflow:hidden;position:relative}
.tk::before,.tk::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.tk::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.tk::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.tk-track{display:flex;width:max-content;animation:tkScroll 46s linear infinite}
.tk:hover .tk-track{animation-play-state:paused}
.tk-seq{display:flex;align-items:center;padding:15px 0;flex:none}
.tk-seq span{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding:0 20px}
.tk-seq i{width:6px;height:6px;border-radius:50%;background:var(--violet);box-shadow:0 0 9px var(--violet-glow);flex:none}
.tk-seq i:nth-child(6n+3){background:var(--cyan);box-shadow:0 0 9px var(--cyan-glow)}
@keyframes tkScroll{to{transform:translateX(-50%)}}

/* =========================================================
   SALLE 02 — TRANSFORMATION STAGE
   ========================================================= */
.stg{position:relative;overflow-x:clip}
.stg-atmo{position:absolute;inset:40px -40px 0;z-index:-1;overflow:hidden;border-radius:24px}
.stg-atmo img{width:100%;height:100%;object-fit:cover;opacity:.13;filter:saturate(.8)}
.stg-atmo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 10%,transparent 20%,var(--bg) 78%)}
.stg-wrap{display:grid;grid-template-columns:1fr;gap:26px}
.stg-scene{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;aspect-ratio:16/8.4;min-height:380px;background:#0b0b10;box-shadow:0 50px 110px rgba(0,0,0,.55);touch-action:pan-y}
/* the two worlds */
.stg-before,.stg-after{position:absolute;inset:0;display:flex;flex-direction:column}
.stg-after{clip-path:inset(0 0 0 var(--cut,50%))}
/* BEFORE — the amateur website */
.stg-before{background:#efe9dc;color:#3c3a35;font-family:Verdana,Geneva,sans-serif}
.sb-bar{display:flex;align-items:center;gap:10px;background:#c9c2b2;padding:8px 14px;font-size:11px;color:#5d594e}
.sb-bar .dots{display:flex;gap:5px}
.sb-bar .dots i{width:9px;height:9px;border-radius:50%;background:#a39d8d}
.sb-bar .url{background:#efe9dc;border:1px solid #a39d8d;border-radius:4px;padding:3px 10px;flex:1;max-width:280px;white-space:nowrap;overflow:hidden}
.sb-body{flex:1;padding:18px 26px;position:relative;overflow:hidden}
.sb-logo{font-family:"Comic Sans MS","Segoe Script",cursive;font-size:clamp(20px,2.4vw,30px);color:#2b6cb0;font-weight:700;margin-top:28px}
.sb-logo .star{color:#e2a33c}
.sb-marquee{margin-top:10px;background:#ffe86b;border:2px dashed #e2574c;color:#c03d33;font-weight:700;font-size:clamp(10px,1.15vw,14px);padding:7px 10px;white-space:nowrap;overflow:hidden}
.sb-marquee span{display:inline-block;animation:sbSlide 7s linear infinite}
@keyframes sbSlide{from{transform:translateX(102%)}to{transform:translateX(-102%)}}
.sb-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-top:14px}
.sb-txt{font-size:clamp(9.5px,1.05vw,12.5px);line-height:1.55;color:#57544b}
.sb-txt b{color:#3fa34d;text-decoration:underline}
.sb-img{border:2px inset #a39d8d;background:linear-gradient(120deg,#b9d8b0,#7fae8d 55%,#5a8a6c);min-height:84px;display:grid;place-items:center;color:#f4f1ea;font-size:11px;letter-spacing:.06em;text-shadow:0 1px 2px rgba(0,0,0,.4);transform:scaleX(1.18);transform-origin:left}
.sb-btn{display:inline-block;margin-top:12px;background:linear-gradient(#fdfdfd,#d5d2c6);border:2px outset #b5b0a0;padding:6px 16px;font-size:11.5px;color:#444;font-weight:700}
.sb-count{position:absolute;right:16px;bottom:12px;font-size:10px;color:#8b867a}
.stg-label-b{position:absolute;left:16px;top:52px;z-index:4;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#7c7566;background:rgba(239,233,220,.85);border:1px solid #c9c2b2;border-radius:5px;padding:4px 9px}
/* AFTER — the DCB-built premium café brand */
.stg-after{background:#120e0b;color:#f0e6d6;font-family:var(--body)}
.sa-bar{display:flex;align-items:center;gap:10px;background:#1a1410;padding:8px 14px;font-size:11px;color:#b7a68a;border-bottom:1px solid rgba(217,164,65,.18)}
.sa-bar .dots{display:flex;gap:5px}
.sa-bar .dots i{width:9px;height:9px;border-radius:50%;background:#3a2f24}
.sa-bar .url{border:1px solid rgba(217,164,65,.3);border-radius:5px;padding:3px 10px;flex:1;max-width:280px;color:#d9a441;font-family:var(--mono);font-size:10px;letter-spacing:.06em;white-space:nowrap;overflow:hidden}
.sa-body{flex:1;padding:16px 26px;position:relative;overflow:hidden;background:radial-gradient(120% 130% at 84% -10%,rgba(217,164,65,.16),transparent 55%),#120e0b}
.sa-body::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#120e0b 0%,rgba(18,14,11,.97) 28%,rgba(18,14,11,.72) 46%,rgba(18,14,11,.08) 72%),linear-gradient(0deg,rgba(18,14,11,.55),transparent 38%)}
.sa-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;z-index:3;margin-top:28px}
.sa-word{font-family:var(--display);font-size:clamp(17px,1.7vw,23px);letter-spacing:.22em;color:#f0e6d6}
.sa-word i{font-style:normal;color:#d9a441}
.sa-links{display:flex;gap:14px;font-size:clamp(9px,1vw,11.5px);color:#b7a68a;letter-spacing:.08em}
.stg-scene .sa-body .sa-visual{position:absolute;inset:18px 18px 18px 44%;overflow:hidden;border:1px solid rgba(217,164,65,.2);border-radius:14px;background:#21170f;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.sa-visual img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.sa-visual-cap{position:absolute;right:12px;bottom:12px;padding:6px 9px;border:1px solid rgba(240,230,214,.22);border-radius:4px;background:rgba(18,14,11,.68);backdrop-filter:blur(8px);font-family:var(--mono);font-size:clamp(7px,.75vw,9px);letter-spacing:.16em;color:#f0e6d6;white-space:nowrap}
.sa-hero{position:relative;z-index:3;margin-top:clamp(24px,4.2vw,66px);max-width:43%}
.sa-kick{font-family:var(--mono);font-size:clamp(8px,.9vw,10px);letter-spacing:.3em;text-transform:uppercase;color:#d9a441}
.sa-h1{font-family:var(--display);font-size:clamp(19px,2.6vw,36px);line-height:.95;letter-spacing:.02em;text-transform:uppercase;margin-top:8px;color:#f7efe2}
.sa-p{font-size:clamp(9.5px,1.05vw,12.5px);color:#cbbb9e;margin-top:9px;max-width:400px;line-height:1.5}
.sa-cta{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(8px,1.4vw,16px);background:#d9a441;color:#191106;font-weight:700;font-size:clamp(9.5px,1.05vw,12.5px);border-radius:8px;padding:8px 16px;box-shadow:0 10px 26px rgba(217,164,65,.35)}
.stg-scene .sa-body .sa-badges{position:absolute;left:26px;bottom:18px;z-index:3;display:flex;gap:8px}
.sa-badges span{font-family:var(--mono);font-size:clamp(7.5px,.85vw,9.5px);letter-spacing:.14em;text-transform:uppercase;color:#d9a441;border:1px solid rgba(217,164,65,.4);border-radius:999px;padding:4px 10px;background:rgba(18,14,11,.6)}
.stg-label-a{position:absolute;right:16px;top:52px;z-index:4;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#d9a441;background:rgba(18,14,11,.8);border:1px solid rgba(217,164,65,.4);border-radius:5px;padding:4px 9px}
/* focus layers : highlight ring on tagged elements */
.stg-scene [data-layer]{position:relative;transition:box-shadow .35s,outline .35s}
.stg-scene.f-branding [data-layer~="branding"],
.stg-scene.f-site [data-layer~="site"],
.stg-scene.f-content [data-layer~="content"],
.stg-scene.f-conversion [data-layer~="conversion"]{outline:1.5px solid var(--cyan);outline-offset:4px;border-radius:4px;box-shadow:0 0 26px rgba(45,214,238,.25)}
/* divider + handle (driven by the invisible range input) */
.stg-cut{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:2px;background:var(--lime);box-shadow:0 0 18px var(--lime-glow);z-index:5;pointer-events:none}
.stg-cut .grip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;border:1.5px solid var(--lime);background:rgba(8,8,11,.82);backdrop-filter:blur(4px);display:grid;place-items:center;color:var(--lime);font-size:13px;letter-spacing:2px;box-shadow:0 0 30px rgba(205,242,58,.3)}
.stg-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:6;margin:0;-webkit-appearance:none;appearance:none;background:transparent}
.stg-range::-webkit-slider-thumb{-webkit-appearance:none;width:60px;height:100%}
.stg-range:focus-visible ~ .stg-cut .grip{outline:2px solid #fff;outline-offset:3px}
/* layer toggles + readout */
.stg-layers{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stg-layers .lt{font-size:13.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:10px 18px;transition:.25s;cursor:pointer;display:inline-flex;align-items:center;gap:9px}
.stg-layers .lt i{width:7px;height:7px;border-radius:50%;background:var(--dim);transition:.25s;flex:none}
.stg-layers .lt:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.stg-layers .lt[aria-pressed="true"]{color:#fff;border-color:var(--cyan);background:rgba(45,214,238,.09)}
.stg-layers .lt[aria-pressed="true"] i{background:var(--cyan);box-shadow:0 0 9px var(--cyan-glow)}
.stg-read{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-left:auto}
.stg-read b{color:var(--lime);font-weight:400}

/* =========================================================
   SALLE 03 — BRAND IDENTITY LAB
   ========================================================= */
.bl-grid{display:grid;grid-template-columns:340px 1fr;gap:34px;align-items:start}
.bl-side .ph-win{aspect-ratio:4/3.4}
.bl-side .note{font-size:13px;color:var(--muted);line-height:1.6;margin-top:18px;padding-left:16px;border-left:2px solid var(--violet)}
.bl-dirs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.bl-dir{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:11px 19px;cursor:pointer;transition:.28s}
.bl-dir:hover{color:#fff;border-color:rgba(255,255,255,.35);transform:translateY(-2px)}
.bl-dir[aria-pressed="true"]{color:#06060a;background:var(--violet);border-color:var(--violet);box-shadow:0 10px 30px rgba(124,58,237,.4);font-weight:700}
/* the living specimen */
.bl-canvas{--bl-bg:#0c0a09;--bl-ink:#f4ead8;--bl-acc:#c8a24d;--bl-soft:rgba(244,234,216,.14);--bl-font:'Fraunces',serif;--bl-track:.14em;--bl-radius:2px;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bl-bg);transition:background .55s ease;box-shadow:0 40px 90px rgba(0,0,0,.45)}
.bl-inner{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:auto auto;gap:1px;background:var(--bl-soft);transition:background .55s}
.bl-cell{background:var(--bl-bg);padding:24px;transition:background .55s,color .55s;color:var(--bl-ink);position:relative;min-height:150px;display:flex;flex-direction:column}
.bl-cell .cl{font-family:var(--mono);font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;opacity:.45;margin-bottom:auto}
.bl-word{grid-column:1;grid-row:1/3;justify-content:center;align-items:flex-start}
.bl-word .wm{font-family:var(--bl-font);font-size:clamp(40px,4.6vw,72px);letter-spacing:var(--bl-track);line-height:1;color:var(--bl-ink);transition:.55s;font-weight:700}
.bl-word .wm i{font-style:normal;color:var(--bl-acc);transition:.55s}
.bl-word .bl-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--bl-acc);margin-top:14px;transition:.55s}
.bl-pal .sw{display:flex;gap:7px;margin-top:14px}
.bl-pal .sw i{flex:1;height:56px;border-radius:var(--bl-radius);transition:.55s;position:relative}
.bl-pal .sw i::after{content:attr(data-hex);position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;opacity:.5;color:var(--bl-ink)}
.bl-pal{padding-bottom:34px}
.bl-type .aa{font-family:var(--bl-font);font-size:52px;line-height:1;color:var(--bl-ink);transition:.55s}
.bl-type .tn{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--bl-acc);margin-top:10px;transition:.55s}
.bl-mark svg{width:64px;height:64px;color:var(--bl-acc);transition:.55s;margin-top:8px}
.bl-mark .mk-note{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;opacity:.4;margin-top:10px}
.bl-card{grid-column:2/4}
.bl-card .bc{margin-top:12px;border-radius:calc(var(--bl-radius) + 6px);background:linear-gradient(150deg,color-mix(in srgb,var(--bl-acc) 16%,var(--bl-bg)),var(--bl-bg) 60%);border:1px solid color-mix(in srgb,var(--bl-acc) 38%,transparent);padding:18px 20px;display:flex;justify-content:space-between;align-items:flex-end;transition:.55s;min-height:104px}
.bl-card .bc .n{font-family:var(--bl-font);font-size:19px;letter-spacing:var(--bl-track);color:var(--bl-ink);transition:.55s}
.bl-card .bc .r{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bl-acc);margin-top:5px}
.bl-card .bc .c{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--bl-ink);opacity:.55;text-align:right;line-height:1.7}
.bl-quote{margin-top:34px;text-align:center}
.bl-quote .q{font-family:var(--display);font-size:clamp(22px,2.6vw,36px);letter-spacing:.02em;text-transform:uppercase;line-height:1.05;color:#fff}
.bl-quote .q b{color:var(--violet);font-weight:400}
.bl-quote .sub{font-size:13px;color:var(--dim);margin-top:12px;max-width:640px;margin-inline:auto;line-height:1.6}

/* =========================================================
   SALLE 04 — WEBSITE EXPERIENCE LAB
   ========================================================= */
.wl{position:relative;overflow-x:clip}
.wl-atmo{position:absolute;right:-60px;top:0;width:52%;height:100%;z-index:-1;overflow:hidden;border-radius:24px}
.wl-atmo img{width:100%;height:100%;object-fit:cover;opacity:.1}
.wl-atmo::after{content:"";position:absolute;inset:0;background:radial-gradient(100% 100% at 70% 40%,transparent 10%,var(--bg) 75%)}
.wl-grid{display:grid;grid-template-columns:380px 1fr;gap:34px;align-items:stretch}
.wl-formats{display:flex;flex-direction:column;gap:10px}
.wl-fmt{text-align:left;border:1px solid var(--line);border-radius:14px;padding:17px 18px;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent);cursor:pointer;transition:.28s;position:relative}
.wl-fmt .f-t{font-family:var(--display);font-size:19px;letter-spacing:.05em;text-transform:uppercase;color:#dcdce6;display:flex;align-items:center;gap:10px;transition:.25s}
.wl-fmt .f-d{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.wl-fmt .f-m{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:10px;display:flex;align-items:center;gap:8px}
.wl-fmt .f-m i{width:5px;height:5px;border-radius:50%;background:var(--cyan);flex:none}
.wl-fmt:hover{border-color:rgba(45,214,238,.4);transform:translateX(4px)}
.wl-fmt[aria-pressed="true"]{border-color:var(--cyan);background:linear-gradient(120deg,rgba(45,214,238,.1),transparent 60%);box-shadow:inset 3px 0 0 var(--cyan)}
.wl-fmt[aria-pressed="true"] .f-t{color:#fff}
.wl-fmt .reco-badge{position:absolute;right:14px;top:14px}
/* viewport */
.wl-view{border:1px solid var(--line);border-radius:18px;background:#0a0a10;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 90px rgba(0,0,0,.5);min-height:480px}
.wl-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.015)}
.wl-bar .dots{display:flex;gap:6px}
.wl-bar .dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.wl-bar .dots i:first-child{background:rgba(226,87,76,.7)}
.wl-bar .dots i:nth-child(2){background:rgba(226,163,60,.7)}
.wl-bar .dots i:nth-child(3){background:rgba(63,163,77,.7)}
.wl-bar .url{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:5px 12px;flex:1;max-width:300px}
.wl-bar .url b{color:var(--cyan);font-weight:400}
.wl-dev{margin-left:auto;display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.wl-dev button{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:7px 13px;transition:.25s}
.wl-dev button[aria-pressed="true"]{color:#06060a;background:var(--cyan)}
.wl-stage{flex:1;display:grid;place-items:center;padding:26px;position:relative;overflow:hidden}
.wl-shot{width:100%;max-width:640px;transition:max-width .45s cubic-bezier(.2,.8,.2,1)}
.wl-view.mobile .wl-shot{max-width:290px}
.wl-scene{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0d0d14;aspect-ratio:16/10;position:relative;display:flex;flex-direction:column;transition:aspect-ratio .45s}
.wl-view.mobile .wl-scene{aspect-ratio:9/16.5}
/* --- scene: landing --- */
.ws-land{background:radial-gradient(120% 120% at 80% -20%,rgba(139,92,246,.35),transparent 55%),#0d0d14;justify-content:center;padding:8%}
.ws-land .k{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan)}
.ws-land .h{font-family:var(--display);font-size:clamp(20px,2.6vw,34px);text-transform:uppercase;line-height:.95;color:#fff;margin-top:9px;max-width:320px}
.ws-land .p{font-size:11px;color:var(--muted);margin-top:9px;max-width:300px;line-height:1.5}
.ws-land .row{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.ws-land .in{flex:1;min-width:130px;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:10px;color:var(--dim);background:rgba(255,255,255,.03)}
.ws-land .go{background:linear-gradient(120deg,var(--violet-deep),var(--violet));color:#fff;font-weight:700;font-size:11px;border-radius:8px;padding:9px 16px;animation:wsPulse 2.2s infinite}
@keyframes wsPulse{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.5)}55%{box-shadow:0 0 0 12px rgba(139,92,246,0)}}
.ws-land .proof{margin-top:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
/* --- scene: corporate --- */
.ws-corp{background:#0e1016}
.ws-corp .nv{display:flex;justify-content:space-between;align-items:center;padding:5% 6% 0}
.ws-corp .nv .lg{font-family:var(--display);font-size:15px;letter-spacing:.16em;color:#fff}
.ws-corp .nv .ls{display:flex;gap:11px}
.ws-corp .nv .ls i{width:34px;height:5px;border-radius:3px;background:rgba(255,255,255,.16)}
.ws-corp .hd{padding:6% 6% 0}
.ws-corp .hd .t{font-family:var(--display);font-size:clamp(16px,2vw,26px);text-transform:uppercase;color:#fff;line-height:.98}
.ws-corp .hd .s{font-size:10px;color:var(--muted);margin-top:7px;max-width:320px}
.ws-corp .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:5% 6%}
.wl-view.mobile .ws-corp .cards{grid-template-columns:1fr;padding-top:7%}
.ws-corp .cards i{height:52px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(160deg,rgba(45,214,238,.1),transparent 60%);position:relative}
.ws-corp .cards i::after{content:"";position:absolute;left:9px;top:9px;width:14px;height:14px;border-radius:4px;background:rgba(45,214,238,.4)}
.ws-corp .logos{margin-top:auto;display:flex;gap:14px;align-items:center;padding:0 6% 6%}
.ws-corp .logos i{flex:1;height:9px;border-radius:3px;background:rgba(255,255,255,.09)}
/* --- scene: interactive --- */
.ws-inter{background:#07070d;justify-content:center;align-items:center;cursor:none}
.ws-inter .blob{position:absolute;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.55),rgba(45,214,238,.25) 55%,transparent 72%);filter:blur(24px);left:var(--bx,50%);top:var(--by,50%);transform:translate(-50%,-50%);transition:left .25s ease-out,top .25s ease-out;pointer-events:none}
.ws-inter .wm{position:relative;font-family:var(--display);font-size:clamp(26px,3.4vw,46px);letter-spacing:.06em;text-transform:uppercase;color:#fff;mix-blend-mode:screen;text-align:center;line-height:1}
.ws-inter .wm i{font-style:normal;display:block;font-size:.42em;letter-spacing:.5em;color:var(--cyan);margin-top:10px;font-family:var(--mono)}
.ws-inter .ring{position:absolute;border:1px solid rgba(255,255,255,.1);border-radius:50%;animation:wsSpin 14s linear infinite}
.ws-inter .r1{width:220px;height:220px}
.ws-inter .r2{width:330px;height:330px;animation-duration:22s;animation-direction:reverse;border-style:dashed}
@keyframes wsSpin{to{transform:rotate(360deg)}}
.ws-inter .hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
/* --- scene: platform --- */
.ws-plat{background:#0c0e13;flex-direction:row}
.ws-plat .sb{width:26%;border-right:1px solid var(--line-soft);padding:7% 4%;display:flex;flex-direction:column;gap:9px}
.wl-view.mobile .ws-plat{flex-direction:column}
.wl-view.mobile .ws-plat .sb{width:100%;flex-direction:row;border-right:none;border-bottom:1px solid var(--line-soft);padding:4%}
.ws-plat .sb i{height:8px;border-radius:3px;background:rgba(255,255,255,.1)}
.wl-view.mobile .ws-plat .sb i{flex:1}
.ws-plat .sb i.on{background:var(--violet);box-shadow:0 0 10px var(--violet-glow)}
.ws-plat .mn{flex:1;padding:5%}
.ws-plat .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.wl-view.mobile .ws-plat .tiles{grid-template-columns:1fr 1fr}
.ws-plat .tiles b{border:1px solid var(--line);border-radius:7px;padding:9px 8px;font-family:var(--mono);font-size:10px;color:var(--lime);font-weight:400;letter-spacing:.04em}
.ws-plat .tiles b i{display:block;font-style:normal;font-size:7px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.ws-plat .chart{display:flex;align-items:flex-end;gap:6px;height:44%;margin-top:12px;border:1px solid var(--line-soft);border-radius:8px;padding:10px}
.ws-plat .chart i{flex:1;background:linear-gradient(180deg,var(--cyan),rgba(45,214,238,.15));border-radius:3px 3px 0 0;height:calc(var(--h)*1%);transition:height .8s cubic-bezier(.2,.8,.2,1)}
.wl-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line-soft);padding:14px 18px;flex-wrap:wrap}
.wl-cta .m{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.wl-cta .m b{color:var(--cyan);font-weight:400}
.wl-cta a{font-size:13.5px;font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:9px;transition:.25s}
.wl-cta a:hover{color:var(--cyan);gap:13px}

/* =========================================================
   SALLE 05 — PROJECT ARCHITECT
   ========================================================= */
.pa-banner{margin-bottom:34px}
.pa-banner .ph-win{aspect-ratio:16/4.6;min-height:170px}
.pa-shell{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(139,92,246,.05),transparent 30%),rgba(255,255,255,.008);padding:34px;box-shadow:0 40px 90px rgba(0,0,0,.4)}
.pa-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.pa-step{position:relative;padding-top:16px}
.pa-step::before{content:"";position:absolute;left:0;right:-26px;top:0;height:1px;background:var(--line-soft)}
.pa-step:last-child::before{right:0}
.pa-step::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:0;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .5s cubic-bezier(.2,.8,.2,1);border-radius:2px}
.pa-step.done::after{width:calc(100% + 26px)}
.pa-step:last-child.done::after{width:100%}
.pa-num{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase}
.pa-step.done .pa-num,.pa-step.live .pa-num{color:var(--violet)}
.pa-qt{font-family:var(--display);font-size:20px;letter-spacing:.05em;text-transform:uppercase;color:#fff;margin:8px 0 14px}
.pa-opts{display:flex;flex-direction:column;gap:7px}
.pa-opt{text-align:left;font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:11px 13px;cursor:pointer;transition:.24s;display:flex;align-items:center;gap:9px}
.pa-opt::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--dim);flex:none;transition:.24s}
.pa-opt:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.pa-opt[aria-pressed="true"]{color:#fff;border-color:var(--violet);background:rgba(139,92,246,.1)}
.pa-opt[aria-pressed="true"]::before{background:var(--violet);border-color:var(--violet);box-shadow:0 0 9px var(--violet-glow)}
.pa-step[data-locked="true"]{opacity:.38;pointer-events:none;filter:saturate(.4)}
/* result */
.pa-res{margin-top:32px;border-top:1px dashed var(--line);padding-top:26px;display:none;grid-template-columns:1.5fr 1fr;gap:30px;align-items:start}
.pa-res.on{display:grid;animation:paIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes paIn{from{opacity:0;transform:translateY(14px)}}
.pa-res .lab{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:9px}
.pa-res .lab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime-glow)}
.pa-stack{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.pa-stack span{font-size:13.5px;font-weight:700;color:#fff;border:1px solid rgba(139,92,246,.55);background:linear-gradient(150deg,rgba(139,92,246,.18),rgba(139,92,246,.04));border-radius:10px;padding:10px 15px}
.pa-stack span.plus{border:none;background:none;color:var(--violet);padding:10px 2px}
.pa-deliv{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pa-deliv li{display:flex;gap:10px;font-size:13px;color:var(--muted);line-height:1.45;align-items:flex-start}
.pa-deliv li svg{color:var(--cyan);flex:none;margin-top:2px}
.pa-fig{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:rgba(8,8,11,.5)}
.pa-fig .row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.pa-fig .row:last-of-type{border-bottom:none}
.pa-fig .row .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.pa-fig .row .v{font-weight:700;color:#fff;text-align:right}
.pa-fig .row .v small{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:2px}
.pa-fig .row .v .dt{color:var(--lime);font-size:12px;vertical-align:super}
.pa-note{font-size:11px;color:var(--dim);line-height:1.55;margin-top:12px}
.pa-ctas{display:flex;gap:11px;margin-top:18px;flex-wrap:wrap}
.pa-ctas .btn{flex:1;justify-content:center;min-width:170px}

/* =========================================================
   SALLE 06 — DIGITAL SHOWROOM
   ========================================================= */
.sh-banner .ph-win{aspect-ratio:16/5;min-height:200px}
.sh-list{display:flex;flex-direction:column;gap:14px;margin-top:34px}
.sh-item{display:grid;grid-template-columns:150px 1.15fr 2fr auto;gap:26px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:24px 28px;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent);transition:.35s;position:relative;overflow:hidden;--mx:50%;--my:0%}
.sh-item::before{content:"";position:absolute;inset:0;opacity:0;transition:.35s;pointer-events:none;background:radial-gradient(320px 220px at var(--mx) var(--my),rgba(139,92,246,.12),transparent 70%)}
.sh-item:hover{border-color:rgba(139,92,246,.45);transform:translateY(-4px)}
.sh-item:hover::before{opacity:1}
.sh-num{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;line-height:1.9}
.sh-num b{display:block;font-size:22px;color:var(--violet);font-weight:400;letter-spacing:.06em}
.sh-id .t{font-family:var(--display);font-size:24px;letter-spacing:.03em;text-transform:uppercase;color:#fff;line-height:1}
.sh-id .s{font-size:12.5px;color:var(--muted);margin-top:7px}
.sh-flow{display:flex;flex-direction:column;gap:7px}
.sh-flow .fr{display:flex;gap:12px;font-size:12.5px;line-height:1.45;align-items:baseline}
.sh-flow .fr .fk{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);flex:none;width:74px;padding-top:2px}
.sh-flow .fr .fv{color:var(--muted)}
.sh-flow .fr:last-child .fk{color:var(--lime)}
.sh-flow .fr:last-child .fv{color:#e8f3c7}
.sh-go{width:52px;height:52px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--text);transition:.3s;flex:none}
.sh-item:hover .sh-go{border-color:var(--violet);color:var(--violet);transform:translate(4px,-4px)}
.sh-all{margin-top:24px;text-align:center}
/* academix strip */
.sh-ax{margin-top:44px;display:flex;align-items:center;gap:20px;border:1px solid rgba(205,242,58,.28);border-radius:16px;padding:20px 26px;background:radial-gradient(130% 200% at 0 0,rgba(205,242,58,.08),transparent 55%);transition:.3s;flex-wrap:wrap}
.sh-ax:hover{border-color:rgba(205,242,58,.5);transform:translateY(-2px)}
.sh-ax .ico{width:46px;height:46px;color:var(--lime);flex:none;display:grid;place-items:center}
.sh-ax .t{font-family:var(--display);font-size:20px;letter-spacing:.05em;color:var(--lime);text-transform:uppercase}
.sh-ax .d{font-size:13px;color:var(--muted);margin-top:4px;max-width:520px;line-height:1.45}
.sh-ax .go{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);white-space:nowrap;border:1px solid rgba(205,242,58,.4);border-radius:999px;padding:11px 18px;transition:.25s}
.sh-ax:hover .go{background:rgba(205,242,58,.12)}

/* =========================================================
   SALLE 07 — LA MÉTHODE
   ========================================================= */
.mt-grid{display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:start}
.mt-steps{display:flex;flex-direction:column}
.mt-step{position:relative;padding:26px 0 26px 66px;border-bottom:1px solid var(--line-soft);transition:.4s;opacity:.42}
.mt-step:last-child{border-bottom:none}
.mt-step .n{position:absolute;left:0;top:26px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--dim);transition:.4s;background:var(--bg)}
.mt-step .t{font-family:var(--display);font-size:clamp(22px,2.2vw,30px);letter-spacing:.04em;text-transform:uppercase;color:#fff;line-height:1}
.mt-step .d{font-size:13.5px;color:var(--muted);margin-top:8px;max-width:430px;line-height:1.5}
.mt-step.on{opacity:1}
.mt-step.on .n{border-color:var(--violet);color:#fff;background:linear-gradient(140deg,var(--violet-deep),var(--violet));box-shadow:0 0 24px rgba(124,58,237,.4)}
.mt-mono{position:sticky;top:110px;display:flex;flex-direction:column;align-items:center;gap:18px}
.mt-mono svg{width:100%;max-width:360px;height:auto}
.mt-mono .stroke{fill:none;stroke:rgba(255,255,255,.1);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.mt-mono .stroke.lit{stroke:url(#mtGrad);stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1s cubic-bezier(.3,.7,.2,1)}
.mt-mono .stroke.lit.on{stroke-dashoffset:0}
.mt-mono.done svg{animation:mtPulse 1.1s ease-out 1}
@keyframes mtPulse{0%{filter:drop-shadow(0 0 0 rgba(139,92,246,0))}45%{filter:drop-shadow(0 0 34px rgba(139,92,246,.75))}100%{filter:drop-shadow(0 0 10px rgba(139,92,246,.3))}}
.mt-cap{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);transition:.4s}
.mt-mono.done .mt-cap{color:var(--lime)}

/* =========================================================
   OFFRES — 3 tiers + legacy admin-driven grids
   ========================================================= */
.of-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.of-tier{position:relative;border:1px solid var(--line);border-radius:18px;padding:30px 28px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);transition:.35s;overflow:hidden;text-align:left;cursor:pointer;--mx:50%;--my:0%}
.of-tier::before{content:"";position:absolute;inset:0;opacity:0;transition:.35s;pointer-events:none;background:radial-gradient(280px 220px at var(--mx) var(--my),rgba(139,92,246,.14),transparent 70%)}
.of-tier:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.5)}
.of-tier:hover::before{opacity:1}
.of-tier .k{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--violet);display:flex;align-items:center;justify-content:space-between;gap:10px}
.of-tier .t{font-family:var(--display);font-size:clamp(24px,2.2vw,32px);letter-spacing:.03em;text-transform:uppercase;color:#fff;margin:14px 0 4px;line-height:.95}
.of-tier .m{font-size:14px;color:var(--muted);font-weight:600}
.of-tier ul{list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
.of-tier ul li{display:flex;gap:10px;font-size:13.5px;color:var(--text);align-items:flex-start;line-height:1.4}
.of-tier ul li svg{color:var(--cyan);flex:none;margin-top:2px}
.of-tier .f{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid var(--line-soft);padding-top:18px}
.of-tier .f .p{font-family:var(--display);font-size:26px;color:#fff;letter-spacing:.02em}
.of-tier .f .p small{font-family:var(--body);font-size:12px;color:var(--muted);font-weight:600;letter-spacing:0;margin-right:6px}
.of-tier .f .p .dt{color:var(--lime);font-size:15px;vertical-align:super;margin-left:2px}
.of-tier .f .go{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:.25s}
.of-tier:hover .f .go{color:var(--cyan)}
.of-tier.pop{border-color:rgba(139,92,246,.55);background:radial-gradient(130% 130% at 50% 0,rgba(139,92,246,.13),transparent 60%)}
.of-tier.pop .k{color:#fff}
/* disclosure for detailed grids */
.of-disc{margin-top:34px;text-align:center}
.of-disc button{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:13px 24px;transition:.3s}
.of-disc button:hover{color:#fff;border-color:var(--violet);background:rgba(139,92,246,.08)}
.of-disc button .pl{transition:transform .3s;color:var(--violet)}
.of-disc button[aria-expanded="true"] .pl{transform:rotate(45deg)}
.of-detail{display:none;margin-top:30px}
.of-detail.on{display:block;animation:paIn .45s cubic-bezier(.2,.8,.2,1)}

/* ---- legacy pricing blocks (contract with js/pricing-data.js) ---- */
.agp-tabs{display:inline-flex;gap:6px;border:1px solid var(--line);border-radius:13px;padding:6px;background:rgba(255,255,255,.012);flex-wrap:wrap;margin-bottom:20px}
.agp-tab{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;padding:11px 18px;border-radius:9px;cursor:pointer;color:var(--muted);transition:.25s;white-space:nowrap}
.agp-tab svg{width:16px;height:16px}
.agp-tab:hover{color:#fff}
.agp-tab.on{background:linear-gradient(120deg,var(--violet-deep),var(--violet));color:#fff;box-shadow:0 8px 24px rgba(124,58,237,.35)}
.agp-pane{display:none;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px}
.agp-pane.on{display:grid}
.pcard2{position:relative;border:1px solid var(--line);border-radius:16px;padding:24px 22px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);transition:.35s;--mx:50%;--my:0%;overflow:hidden}
.pcard2::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:.35s;background:radial-gradient(220px 170px at var(--mx) var(--my),rgba(139,92,246,.14),transparent 70%)}
.pcard2:hover{transform:translateY(-5px);border-color:rgba(139,92,246,.45)}
.pcard2:hover::before{opacity:1}
.pcard2 .pc2-name{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pcard2 .pc2-price{font-family:var(--display);font-size:38px;letter-spacing:.01em;color:#fff;margin:12px 0 2px;line-height:.9}
.pcard2 .pc2-price small{font-family:var(--body);font-size:14px;color:var(--muted);font-weight:600;letter-spacing:0}
.pcard2 .pc2-price .dt{color:var(--lime);font-size:18px;vertical-align:super;margin-left:2px}
.pcard2 .pc2-sub{font-size:12.5px;color:var(--dim);margin-bottom:16px}
.pcard2 ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0 0 20px;padding:0}
.pcard2 ul li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text);line-height:1.4}
.pcard2 ul li svg{color:var(--cyan);flex:none;margin-top:2px}
.pcard2 .pc2-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:13.5px;font-weight:600;transition:.3s;color:var(--text)}
.pcard2 .pc2-cta:hover{border-color:var(--violet);background:rgba(139,92,246,.12)}
.pcard2.pop{border-color:rgba(139,92,246,.55);background:radial-gradient(120% 130% at 50% 0,rgba(139,92,246,.14),transparent 60%)}
.pcard2.pop .pc2-cta{background:linear-gradient(120deg,var(--violet-deep),var(--violet));color:#fff;border-color:transparent}
.pcard2.pop .pc2-cta:hover{box-shadow:0 8px 26px rgba(124,58,237,.4)}
.pc2-badge{position:absolute;right:14px;top:14px;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:#06060a;background:var(--lime);padding:4px 8px;border-radius:5px}
.agp-foot{margin-top:30px;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);flex-wrap:wrap}
.agp-foot .wa{display:inline-flex;align-items:center;gap:9px;color:var(--lime);border:1px solid rgba(205,242,58,.4);border-radius:9px;padding:9px 14px;transition:.25s;letter-spacing:.06em}
.agp-foot .wa:hover{background:rgba(205,242,58,.1)}

/* =========================================================
   FAQ (kept, re-dressed)
   ========================================================= */
.faq-list{max-width:920px}
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-q{display:flex;align-items:center;gap:18px;padding:24px 4px;cursor:pointer;font-size:17px;font-weight:600;color:#fff;transition:.25s}
.faq-q .qn{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim);flex:none;width:44px;transition:.25s}
.faq-q:hover{color:var(--violet)}
.faq-q:hover .qn{color:var(--violet)}
.faq-q .ic{width:30px;height:30px;flex:none;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--violet);transition:.3s;margin-left:auto}
.faq-item.open .faq-q .ic{transform:rotate(45deg);background:var(--violet);color:#fff;border-color:var(--violet)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.open .faq-a{max-height:260px}
.faq-a p{color:var(--muted);font-size:14.5px;line-height:1.6;padding:0 4px 24px 66px;max-width:720px}
.faq-a a{color:var(--lime)}

/* =========================================================
   PROJECT ROOM (finale)
   ========================================================= */
.pr{margin-top:110px;position:relative}
.pr-shell{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:linear-gradient(180deg,rgba(139,92,246,.07),transparent 40%),#0a0a10;box-shadow:0 60px 130px rgba(0,0,0,.5);position:relative}
.pr-shell::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:52px 52px;opacity:.4;mask-image:radial-gradient(ellipse 90% 70% at 50% 0,#000,transparent 78%);pointer-events:none}
.pr-inner{position:relative;padding:64px 60px}
.pr-h{font-family:var(--display);font-size:clamp(32px,4.2vw,60px);line-height:.94;text-transform:uppercase;letter-spacing:.01em;color:#fff;max-width:900px}
.pr-h em{font-style:normal;color:var(--violet)}
.pr-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;margin-top:44px;align-items:start}
/* dossier recap */
.pr-doss{border:1px solid var(--line);border-radius:16px;background:rgba(8,8,11,.55);backdrop-filter:blur(6px)}
.pr-doss .hd{display:flex;align-items:center;gap:11px;padding:16px 22px;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.pr-doss .hd svg{color:var(--violet)}
.pr-doss .hd .ct{margin-left:auto;color:var(--lime)}
.pr-line{display:flex;align-items:center;gap:14px;padding:15px 22px;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.pr-line:last-of-type{border-bottom:none}
.pr-line .k{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);width:130px;flex:none}
.pr-line .v{color:var(--dim);font-style:italic}
.pr-line .v a{color:var(--violet);font-style:normal;font-weight:600}
.pr-line.filled .v{color:#fff;font-style:normal;font-weight:600}
.pr-line .ok{margin-left:auto;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:transparent;flex:none;transition:.3s}
.pr-line.filled .ok{border-color:var(--lime);color:var(--lime);box-shadow:0 0 12px rgba(205,242,58,.25)}
.pr-send{padding:20px 22px}
.pr-send .btn{width:100%;justify-content:center}
.pr-send .hint{font-size:11px;color:var(--dim);text-align:center;margin-top:10px;line-height:1.5}
/* lead form (existing ids preserved) */
.lead-form{border:1px solid var(--line);border-radius:16px;padding:28px;background:radial-gradient(140% 120% at 100% 0,rgba(139,92,246,.1),transparent 55%)}
.lead-form .lf-t{font-family:var(--display);font-size:24px;letter-spacing:.04em;text-transform:uppercase}
.lead-form .lf-d{font-size:13.5px;color:var(--muted);margin:8px 0 22px;line-height:1.5}
.lf-field{position:relative;margin-bottom:12px}
.lf-field input{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:14px 44px 14px 15px;color:#fff;font-family:inherit;font-size:14.5px;transition:.25s}
.lf-field input::placeholder{color:var(--dim)}
.lf-field input:focus{outline:none;border-color:var(--violet);background:rgba(139,92,246,.06)}
.lf-field .fi{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--dim);pointer-events:none}
.lead-form .btn{width:100%;justify-content:center;margin-top:8px}
.lf-ok{color:var(--lime);font-size:13px;margin-top:12px;text-align:center;opacity:0;transition:.3s}
.lf-ok.show{opacity:1}
.pr-assure{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:34px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.pr-assure span{display:inline-flex;align-items:center;gap:9px}
.pr-assure i{width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime-glow)}

/* =========================================================
   DOSSIER HUD (floating)
   ========================================================= */
.dh{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:10px;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s;pointer-events:none}
.dh.show{opacity:1;transform:none;pointer-events:auto}
.dh-toast{font-size:12px;font-weight:600;color:#06060a;background:var(--lime);border-radius:9px;padding:9px 14px;box-shadow:0 14px 40px rgba(205,242,58,.3);opacity:0;transform:translateY(8px);transition:.35s;max-width:250px}
.dh-toast.on{opacity:1;transform:none}
.dh-chip{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:999px;padding:12px 18px;background:rgba(10,10,16,.9);backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.55);cursor:pointer;transition:.3s}
.dh-chip:hover{border-color:var(--violet);transform:translateY(-2px)}
.dh-chip svg{color:var(--violet);flex:none}
.dh-chip .lb{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.dh-chip .n{font-family:var(--mono);font-size:11px;color:#fff;letter-spacing:.06em}
.dh-chip .n b{color:var(--lime);font-weight:400}
.dh-ticks{display:flex;gap:4px}
.dh-ticks i{width:12px;height:3px;border-radius:2px;background:rgba(255,255,255,.14);transition:.3s}
.dh-ticks i.on{background:var(--lime);box-shadow:0 0 8px var(--lime-glow)}
.dh-chip.pulse{animation:dhPulse .9s cubic-bezier(.2,.8,.2,1) 1}
@keyframes dhPulse{0%{box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 0 rgba(205,242,58,.55)}70%{box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 16px rgba(205,242,58,0)}100%{box-shadow:0 18px 50px rgba(0,0,0,.55)}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1180px){
  .mt-grid{grid-template-columns:1fr 320px;gap:40px}
  .sh-item{grid-template-columns:110px 1fr 1.6fr auto;gap:18px;padding:20px 22px}
}
@media(max-width:1080px){
  .agx-grid{grid-template-columns:1fr;gap:44px}
  .bl-grid{grid-template-columns:1fr}
  .bl-side{display:flex;gap:22px;align-items:flex-start}
  .bl-side .ph-win{flex:1;aspect-ratio:16/8}
  .bl-side .note{flex:1;margin-top:0}
  .wl-grid{grid-template-columns:1fr}
  .wl-formats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .pa-steps{grid-template-columns:1fr 1fr;gap:22px}
  .pa-step::before{right:0}
  .pa-step.done::after{width:100%}
  .pa-res{grid-template-columns:1fr}
  .mt-grid{grid-template-columns:1fr}
  .mt-mono{position:relative;top:0;order:-1;max-width:280px;margin:0 auto}
  .of-tiers{grid-template-columns:1fr}
  .pr-grid{grid-template-columns:1fr}
  .pr-inner{padding:44px 34px}
  .sh-item{grid-template-columns:1fr;gap:16px}
  .sh-go{display:none}
}
@media(max-width:640px){
  .salle{padding-top:72px}
  .agx-hero{padding-top:108px}
  .scan-opts{grid-template-columns:1fr}
  .stg-scene{aspect-ratio:auto;height:420px}
  .sb-logo,.sa-nav{margin-top:24px}
  .sa-links{display:none}
  .stg-scene .sa-body .sa-visual{inset:58px 10px 10px 36%}
  .sa-body::after{background:linear-gradient(90deg,#120e0b 0%,rgba(18,14,11,.96) 42%,rgba(18,14,11,.18) 78%),linear-gradient(0deg,rgba(18,14,11,.68),transparent 55%)}
  .sa-hero{margin-top:28px;max-width:68%}
  .sa-p{max-width:250px}
  .stg-label-b,.stg-label-a{font-size:7px;letter-spacing:.12em;padding:4px 6px}
  .stg-scene .sa-body .sa-badges{left:18px;bottom:14px}
  .sa-badges span{padding:4px 7px}
  .sa-visual-cap{display:none}
  .sb-cols{grid-template-columns:1fr}
  .stg-read{margin-left:0;width:100%}
  .bl-side{flex-direction:column}
  .bl-inner{grid-template-columns:1fr 1fr}
  .bl-word{grid-column:1/3;grid-row:auto;min-height:130px}
  .bl-card{grid-column:1/3}
  .wl-formats{grid-template-columns:1fr}
  .wl-bar .url{display:none}
  .pa-shell{padding:22px 18px}
  .pa-steps{grid-template-columns:1fr}
  .pa-ctas .btn{min-width:100%}
  .pr-inner{padding:36px 20px}
  .faq-a p{padding-left:4px}
  .faq-q .qn{width:34px}
  .dh{right:14px;bottom:14px}
  .dh-chip{padding:11px 14px;gap:8px}
  .dh-chip .lb{display:none}
  .sh-banner .ph-win,.pa-banner .ph-win{aspect-ratio:16/9;min-height:150px}
}
@media(max-width:560px){.agp-tabs{width:100%}.agp-tab{flex:1;justify-content:center}}

/* quick links vers les grilles web détaillées (maillage) */
.agx-mesh{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin:26px 0 36px;padding:15px 20px;
  border:1px solid var(--line);border-radius:12px;background:linear-gradient(90deg,rgba(139,92,246,.08),transparent 62%)}
.agx-mesh .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--dim);display:inline-flex;align-items:center;gap:9px}
.agx-mesh .k::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--violet);box-shadow:0 0 9px var(--violet-glow);flex:none}
.agx-mesh a{font-size:13.5px;color:#c9b6ff;transition:color .25s}
.agx-mesh a:hover{color:#fff}
.agx-mesh .sep{color:var(--dim)}