@font-face{font-family:'Manrope';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/manrope-400.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/manrope-500.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/manrope-600.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/manrope-700.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/manrope-800.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500.woff2) format('woff2')}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root,
:root[data-theme="light"]{
  --font-sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --bg:#F6F5FA;
  --surface:#FFFFFF;
  --surface-2:#EFEBF7;
  --ink:#180830;
  --ink-soft:#423A55;
  --muted:#6E6784;
  --primary:#603890;
  --primary-strong:#4C2C7A;
  --primary-deep:#3A1D66;
  --primary-light:#9878C0;
  --primary-tint:#ECE6F6;
  --on-primary:#FFFFFF;
  --line:rgba(24,8,48,0.10);
  --line-2:rgba(24,8,48,0.16);
  --star:#E7A33E;
  --logo-filter:none;

  /* the dark finale — constant across themes */
  --dark-bg:#170A2E;
  --dark-bg-2:#100522;
  --dark-ink:#F3EFFA;
  --dark-soft:#C9BEE4;
  --dark-line:rgba(243,239,250,0.14);

  --shadow-sm:0 1px 2px rgba(24,8,48,.05);
  --shadow-md:0 14px 34px -14px rgba(24,8,48,.16);
  --shadow-lg:0 30px 60px -24px rgba(24,8,48,.24);
  --shadow-glow:0 24px 60px -20px rgba(96,56,144,.35);

  --r-card:20px;
  --r-sm:12px;
  --r-pill:999px;

  --container:1200px;
  --pad-x:clamp(1.25rem,4vw,2.5rem);
  --sect-y:clamp(4.5rem,9vw,8rem);
}

/* OS dark — only when no explicit theme is forced */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#120A22;
    --surface:#1A1030;
    --surface-2:#211640;
    --ink:#F3EFFA;
    --ink-soft:#CFC6E4;
    --muted:#9B90B8;
    --primary:#B79BE6;
    --primary-strong:#C6B0EC;
    --primary-deep:#8A6BC0;
    --primary-light:#8A6BC0;
    --primary-tint:#241738;
    --on-primary:#180830;
    --line:rgba(243,239,250,0.12);
    --line-2:rgba(243,239,250,0.20);
    --logo-filter:brightness(0) invert(1);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 14px 34px -14px rgba(0,0,0,.6);
    --shadow-lg:0 30px 60px -24px rgba(0,0,0,.7);
    --shadow-glow:0 24px 60px -20px rgba(140,100,200,.35);
  }
}
/* Explicit toggle (Artifact viewer) */
:root[data-theme="dark"]{
  --bg:#120A22;
  --surface:#1A1030;
  --surface-2:#211640;
  --ink:#F3EFFA;
  --ink-soft:#CFC6E4;
  --muted:#9B90B8;
  --primary:#B79BE6;
  --primary-strong:#C6B0EC;
  --primary-deep:#8A6BC0;
  --primary-light:#8A6BC0;
  --primary-tint:#241738;
  --on-primary:#180830;
  --line:rgba(243,239,250,0.12);
  --line-2:rgba(243,239,250,0.20);
  --logo-filter:brightness(0) invert(1);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 14px 34px -14px rgba(0,0,0,.6);
  --shadow-lg:0 30px 60px -24px rgba(0,0,0,.7);
  --shadow-glow:0 24px 60px -20px rgba(140,100,200,.35);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink-soft);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none;padding:0}
strong,b{font-weight:700;color:var(--ink)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}

/* ============================================================
   HELPERS
   ============================================================ */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--sect-y);position:relative}
.mono{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.mauve{color:var(--primary)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--font-mono);font-weight:500;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--primary);
}
.eyebrow::before{content:"";width:1.7rem;height:1px;background:var(--primary);opacity:.7}
.eyebrow--center{justify-content:center}

.section__head{margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.section__head .h2{margin-top:1rem}
.section__head .lead{margin-top:1.15rem}

.h1{
  font-weight:800;font-size:clamp(2.7rem,6vw,5rem);line-height:1.02;
  letter-spacing:-.035em;color:var(--ink);text-wrap:balance;
}
.h2{
  font-weight:800;font-size:clamp(2rem,4vw,3.15rem);line-height:1.06;
  letter-spacing:-.03em;color:var(--ink);text-wrap:balance;
}
.h3{font-weight:700;font-size:1.3rem;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.lead{
  font-weight:500;font-size:clamp(1.08rem,1.6vw,1.25rem);line-height:1.55;
  color:var(--ink-soft);max-width:58ch;text-wrap:pretty;
}
p{text-wrap:pretty}

.skip-link{
  position:absolute;left:1rem;top:-999px;z-index:200;
  background:var(--primary);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-sm);
  font-weight:700;font-size:.95rem;
}
.skip-link:focus{top:1rem}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:.95rem;line-height:1;
  padding:.9rem 1.5rem;min-height:44px;border-radius:var(--r-pill);
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .2s,box-shadow .25s,border-color .2s,color .2s;
  white-space:nowrap;
}
.btn .ico{width:18px;height:18px;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.btn:hover .ico{transform:translateX(3px)}
.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--primary-strong);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;border:1.5px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--primary-tint);transform:translateY(-2px)}
.btn-on-dark{background:transparent;border:1.5px solid var(--dark-line);color:var(--dark-ink)}
.btn-on-dark:hover{border-color:var(--dark-ink);background:rgba(243,239,250,.08);transform:translateY(-2px)}
.btn-lg{padding:1.05rem 1.85rem;font-size:1rem}

.textlink{
  display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:var(--primary);
  font-size:.98rem;transition:color .2s;
}
.textlink .ico{width:17px;height:17px;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.textlink:hover{color:var(--primary-strong)}
.textlink:hover .ico{transform:translateX(3px)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);transition:box-shadow .25s,border-color .25s}
@supports not (background:color-mix(in srgb,red,blue)){.site-header{background:var(--bg)}}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .25s}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.site-header.scrolled::after{opacity:1}
.header-inner{display:flex;align-items:center;gap:1.5rem;padding-block:1.15rem;transition:padding .25s}
.site-header.scrolled .header-inner{padding-block:.8rem}
.brand{display:inline-flex;align-items:center;flex-shrink:0}
.logo{height:57px;width:auto;margin:-5px 0;filter:var(--logo-filter)}
.primary-nav{display:none;margin-left:auto;margin-right:.5rem}
.primary-nav ul{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}
.primary-nav a{position:relative;font-weight:600;font-size:.95rem;color:var(--ink-soft);padding:.35rem 0;transition:color .2s}
.primary-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--primary);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.primary-nav a:hover{color:var(--ink)}
.primary-nav a:hover::after,.primary-nav a:focus-visible::after{transform:scaleX(1)}
.header-cta{display:none;flex-shrink:0}
.burger{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:46px;height:46px;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--ink)}
.burger svg{width:22px;height:22px}
.burger:hover{background:var(--primary-tint)}

@media (min-width:900px){
  .primary-nav{display:block}
  .header-cta{display:inline-flex}
  .burger{display:none}
}

/* mobile overlay */
.mobile-nav{
  position:fixed;inset:0;z-index:150;background:var(--bg);
  display:flex;flex-direction:column;padding:1.15rem var(--pad-x) 2.5rem;
  visibility:hidden;opacity:0;transition:opacity .3s ease,visibility 0s linear .3s;
}
.mobile-nav.open{visibility:visible;opacity:1;transition:opacity .3s ease,visibility 0s linear 0s}
.mobile-nav__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.mobile-nav__close{width:46px;height:46px;border-radius:var(--r-sm);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.mobile-nav__close svg{width:22px;height:22px}
.mobile-nav__links{display:flex;flex-direction:column;gap:.35rem;margin-top:.5rem}
.mobile-nav__links a{font-weight:700;font-size:1.75rem;letter-spacing:-.02em;color:var(--ink);padding:.7rem 0;border-bottom:1px solid var(--line)}
.mobile-nav__links a:hover{color:var(--primary)}
.mobile-nav .btn{margin-top:2rem;width:100%}
html.nav-lock{overflow:hidden}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;padding-block:clamp(3rem,6vw,5.5rem) var(--sect-y)}
.hero::before{content:"";position:absolute;top:-16%;right:-12%;width:60vw;max-width:720px;aspect-ratio:1;background:radial-gradient(circle at 60% 40%,rgba(152,120,192,.42),rgba(152,120,192,0) 62%);z-index:0;pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-20%;left:-14%;width:44vw;max-width:520px;aspect-ratio:1;background:radial-gradient(circle,rgba(236,230,246,.7),rgba(236,230,246,0) 64%);z-index:0;pointer-events:none}
.hero .container{position:relative;z-index:1}
.hero__grid{display:grid;gap:clamp(2.75rem,5vw,4rem);align-items:center}
.hero__eyebrow{margin-bottom:1.6rem}
.hero__lead{margin-top:1.6rem;max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.1rem}
.hero__trust{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.stars{display:inline-flex;gap:2px;color:var(--star)}
.stars svg{width:16px;height:16px}
.hero__trust .mono{color:var(--ink-soft);letter-spacing:.1em}

.hl{position:relative;color:var(--primary);white-space:nowrap}
.hl .swash{position:absolute;left:0;bottom:-.16em;width:100%;height:.34em;overflow:visible;color:var(--primary)}
.hl .swash path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}

/* hero visual — browser mockup */
.hero__visual{position:relative;z-index:1;justify-self:center;width:100%;max-width:560px}

.mock{
  border-radius:var(--r-card);background:var(--surface);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
.mock__bar{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,var(--surface-2))}
@supports not (background:color-mix(in srgb,red,blue)){.mock__bar{background:var(--surface-2)}}
.mock__dot{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.mock__dot:nth-child(1){background:#E5A3A3}
.mock__dot:nth-child(2){background:#E7C58A}
.mock__dot:nth-child(3){background:#9FCDA6}
.mock__url{margin-left:.55rem;flex:1;font-family:var(--font-mono);font-size:.72rem;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:.35rem .8rem;text-align:center;letter-spacing:.02em}
.mock__view{position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,var(--primary-light),var(--primary-deep));display:flex;flex-direction:column;padding:1.4rem;overflow:hidden}
.mock__brand{font-weight:800;font-size:clamp(1.5rem,3.4vw,2rem);letter-spacing:-.03em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.18)}
.mock__nav{display:flex;gap:.9rem;margin-top:.55rem}
.mock__nav span{height:6px;width:38px;border-radius:3px;background:rgba(255,255,255,.5)}
.mock__nav span:last-child{width:24px;background:rgba(255,255,255,.32)}
.mock__products{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.mock__product{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:12px;padding:.6rem;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mock__product .ph{height:38px;border-radius:8px;background:rgba(255,255,255,.28);margin-bottom:.5rem}
.mock__product .l1{height:5px;width:80%;border-radius:3px;background:rgba(255,255,255,.55);margin-bottom:.35rem}
.mock__product .l2{height:5px;width:52%;border-radius:3px;background:rgba(255,255,255,.35)}

.chip-float{position:absolute;display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md);border-radius:var(--r-pill);padding:.6rem .95rem;font-weight:600;font-size:.82rem;color:var(--ink)}
.chip-float--proj{left:-6px;bottom:-16px;transform:rotate(-3deg)}
.chip-float--rating{right:-10px;top:-14px;transform:rotate(4deg);gap:.35rem}
.chip-float--rating .star{color:var(--star)}
.dot-live{width:9px;height:9px;border-radius:50%;background:#3FB27A;box-shadow:0 0 0 4px rgba(63,178,122,.18)}

@media (min-width:920px){
  .hero__grid{grid-template-columns:1.15fr 1fr}
  .hero__visual{justify-self:end;max-width:520px}
  .chip-float--proj{left:-28px}
  .chip-float--rating{right:-24px}
}

/* ============================================================
   CLIENT MARQUEE
   ============================================================ */
.clients{background:var(--surface);padding-block:clamp(2.5rem,5vw,3.5rem);border-block:1px solid var(--line)}
.clients__label{text-align:center;color:var(--ink-soft);margin-bottom:1.75rem}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;width:max-content}
.marquee__group{display:flex;align-items:center;flex-shrink:0}
.marquee__group span{display:inline-flex;align-items:center;font-weight:600;font-size:clamp(1.1rem,2vw,1.5rem);color:var(--muted);letter-spacing:-.01em;padding-inline:clamp(1rem,2.5vw,1.9rem);transition:color .2s;white-space:nowrap}
.marquee__group span:hover{color:var(--ink)}
.marquee__group span::after{content:"·";margin-left:clamp(2rem,5vw,3.8rem);color:var(--primary);font-weight:800}

/* ============================================================
   SERVICES
   ============================================================ */
.services-grid{display:grid;gap:1.25rem}
.services-col{display:grid;gap:1.25rem}

.card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:clamp(1.5rem,2.4vw,2rem);box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .3s;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md),var(--shadow-glow);border-color:var(--primary)}
.card__index{color:var(--primary);margin-bottom:1.25rem}
.card__icon{width:52px;height:52px;border-radius:14px;background:var(--primary-tint);color:var(--primary);display:grid;place-items:center;margin-bottom:1.25rem;transition:background .3s,color .3s}
.card__icon svg{width:26px;height:26px}
.card:hover .card__icon{background:var(--primary);color:var(--on-primary)}
.card__title{margin-bottom:.65rem}
.card__desc{color:var(--ink-soft);font-size:1rem;margin-bottom:1.5rem}
.card__foot{margin-top:auto}
.price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.price__label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.price__val{font-weight:800;color:var(--primary);font-size:1.35rem;letter-spacing:-.02em}
.card--featured .price__val{font-size:1.9rem}
.arrow-out{position:absolute;top:clamp(1.4rem,2.2vw,1.9rem);right:clamp(1.4rem,2.2vw,1.9rem);color:var(--primary);opacity:.55;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s}
.arrow-out svg{width:20px;height:20px}
.card:hover .arrow-out{transform:translate(3px,-3px);opacity:1}

.card--featured{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--primary-tint) 55%,var(--surface)));padding:clamp(1.75rem,3vw,2.6rem)}
@supports not (background:color-mix(in srgb,red,blue)){.card--featured{background:var(--surface)}}
.card--featured .card__title{font-size:clamp(1.5rem,2.5vw,1.9rem);letter-spacing:-.025em;line-height:1.12}
.card--featured .card__desc{font-size:1.06rem;max-width:44ch}
.card--featured .card__icon{width:60px;height:60px}
.card--featured .card__icon svg{width:30px;height:30px}

@media (min-width:960px){
  .services-grid{grid-template-columns:1.35fr 1fr;align-items:stretch}
  .services-col{grid-template-rows:repeat(2,1fr)}
}

/* ============================================================
   PROCESS (timeline)
   ============================================================ */
.process{background:var(--surface-2)}
.timeline{position:relative;display:grid;gap:clamp(1.75rem,3vw,2.5rem);max-width:820px}
.timeline::before{content:"";position:absolute;left:26px;top:26px;bottom:26px;width:2px;background:linear-gradient(var(--primary),var(--primary-light) 60%,transparent);opacity:.55}
.step{position:relative;display:grid;grid-template-columns:54px 1fr;gap:clamp(1rem,2vw,1.5rem);align-items:start}
.step__node{position:relative;z-index:1;width:54px;height:54px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--primary);display:grid;place-items:center;font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums;box-shadow:var(--shadow-sm);transition:transform .3s,background .3s,color .3s}
.step:hover .step__node{transform:scale(1.06);background:var(--primary);color:var(--on-primary)}
.step__title{font-weight:700;font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin-bottom:.55rem}
.step__desc{color:var(--ink-soft);font-size:1rem;max-width:60ch;margin-bottom:1rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:var(--primary);background:var(--primary-tint);border:1px solid var(--line);border-radius:var(--r-pill);padding:.4rem .85rem}

/* ============================================================
   CASES
   ============================================================ */
.cases{background:var(--surface)}
.cases-grid{display:grid;gap:1.25rem}
.cases-col{display:grid;gap:1.25rem}
.case{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .3s;display:flex;flex-direction:column}
.case:hover{transform:translateY(-4px);box-shadow:var(--shadow-md),var(--shadow-glow);border-color:var(--primary)}
.case__media{padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2rem) 0}
.case--featured .mock{box-shadow:var(--shadow-md)}
.case__body{padding:clamp(1.4rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);background:var(--primary-tint);border-radius:var(--r-pill);padding:.35rem .8rem}
.case__title{font-weight:800;font-size:clamp(1.35rem,2.2vw,1.75rem);letter-spacing:-.025em;color:var(--ink);line-height:1.14}
.case__desc{color:var(--ink-soft);font-size:1rem;max-width:52ch}
.case__link{margin-top:.35rem}

.case--sm{flex-direction:row;align-items:center;gap:1.1rem;padding:1.1rem}
.case--sm .case__thumb{flex-shrink:0;width:78px;height:78px;border-radius:16px;display:grid;place-items:center;font-weight:800;font-size:2rem;color:#fff;letter-spacing:-.03em;overflow:hidden}
.case--sm .case__thumb--img{background:none}
.case--sm .case__thumb--img img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- Blog ---- */
.container--narrow{max-width:760px}
.blog-index__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.7rem}
.acard{display:flex;flex-direction:column;gap:.85rem}
.acard__cover{display:grid;place-items:center;aspect-ratio:16/10;border-radius:18px;background:linear-gradient(150deg,var(--primary-light),var(--primary-deep));overflow:hidden}
.acard__cat{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:.95}
.acard__meta{color:var(--muted);font-size:.78rem}
.acard__title{font-size:1.24rem;line-height:1.25;letter-spacing:-.01em}
.acard__title a{color:var(--ink)}
.acard__title a:hover{color:var(--primary-strong)}
.acard__desc{color:var(--ink-soft);font-size:.97rem;line-height:1.55}
.acard__link{margin-top:auto}
.article-hero{padding:2.4rem 0 1rem}
.article-hero__title{margin:.5rem 0}
.article-hero__lead{color:var(--ink-soft)}
.article-hero__meta{color:var(--muted);margin-top:.9rem}
.article-hero .eyebrow a{color:var(--primary);font-weight:600}
.article-bref{background:var(--surface-2);border:1px solid var(--primary-tint);border-radius:18px;padding:1.3rem 1.5rem;margin:1.4rem 0 .4rem}
.article-bref__label{color:var(--primary);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.5rem}
.article-bref__q{font-weight:700;color:var(--ink);margin-bottom:.4rem}
.article-bref__a{color:var(--ink-soft);line-height:1.6}
.article-body{max-width:none;margin-top:1.6rem}
.article-body h2{font-size:1.58rem;line-height:1.25;letter-spacing:-.01em;margin:2.2rem 0 .8rem;color:var(--ink)}
.article-body h3{font-size:1.24rem;margin:1.6rem 0 .5rem;color:var(--ink)}
.article-body p{margin-top:1rem;line-height:1.72}
.article-body ul,.article-body ol{margin:1rem 0 1rem 1.25rem;color:var(--ink-soft);line-height:1.72}
.article-body li{margin:.4rem 0}
.article-body blockquote{margin:1.5rem 0;padding:.5rem 1.2rem;border-left:3px solid var(--primary);color:var(--ink-soft);font-style:italic}
.article-faq,.article-related{padding-top:1.4rem}
@media(max-width:640px){.blog-index__grid{grid-template-columns:1fr}}
.thumb-m{background:linear-gradient(150deg,var(--primary-light),var(--primary))}
.thumb-l{background:linear-gradient(150deg,var(--primary),var(--primary-deep))}
.case--sm .case__body{padding:0;gap:.45rem}
.case--sm .case__title{font-size:1.2rem}
.cases__more{margin-top:2.25rem}

@media (min-width:900px){
  .cases-grid{grid-template-columns:1.45fr 1fr;align-items:stretch}
  .cases-col{grid-template-rows:1fr 1fr}
}

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.testi{background:var(--surface-2)}
.testi__inner{max-width:900px;margin-inline:auto;text-align:center}
.testi__mark{font-family:var(--font-sans);font-weight:800;font-size:6rem;line-height:.6;color:var(--primary);opacity:.25;height:.6em}
blockquote.testi__quote{font-weight:700;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.28;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;margin:1.25rem auto 0;max-width:900px}
.testi__cite{display:inline-flex;align-items:center;gap:.85rem;margin-top:2rem;font-style:normal}
.avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(150deg,var(--primary-light),var(--primary-deep));color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.05rem;letter-spacing:.01em}
.testi__cite-name{font-weight:700;color:var(--ink);text-align:left;line-height:1.3}
.testi__cite-role{font-size:.9rem;color:var(--muted);text-align:left}
.stats{display:grid;grid-template-columns:1fr;gap:1.75rem;margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:clamp(2rem,4vw,2.75rem);border-top:1px solid var(--line)}
.stat__num{font-weight:800;font-size:clamp(2rem,4vw,2.75rem);letter-spacing:-.03em;color:var(--primary);font-variant-numeric:tabular-nums;line-height:1}
.stat__label{margin-top:.5rem;color:var(--ink-soft);font-size:.95rem}
@media (min-width:640px){.stats{grid-template-columns:repeat(3,1fr)}}

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid{display:grid;gap:1.25rem}
.blog-col{display:grid;gap:1.25rem}
.post{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .3s;display:flex;flex-direction:column}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-md),var(--shadow-glow);border-color:var(--primary)}
.post__cover{aspect-ratio:16/8;background:linear-gradient(150deg,var(--surface-2),var(--primary-tint));display:grid;place-items:center}
.post__cover span{font-weight:800;font-size:clamp(3rem,7vw,4.75rem);letter-spacing:-.04em;color:var(--primary);opacity:.85}
.post__body{padding:clamp(1.35rem,2.2vw,1.75rem);display:flex;flex-direction:column;gap:.65rem;align-items:flex-start}
.post__meta{color:var(--primary);letter-spacing:.1em}
.post__title{font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.18;font-size:1.2rem}
.post--featured .post__title{font-size:clamp(1.4rem,2.4vw,1.85rem)}
.post__desc{color:var(--ink-soft);font-size:.98rem;max-width:54ch}
.post__link{margin-top:.35rem}
.post--sm{flex-direction:column}
.blog__more{margin-top:2.25rem}
@media (min-width:900px){
  .blog-grid{grid-template-columns:1.35fr 1fr;align-items:stretch}
  .blog-col{grid-template-rows:1fr 1fr}
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--surface)}
.faq-grid{display:grid;gap:clamp(2.25rem,4vw,3.5rem)}
.faq__helper{margin-top:1.25rem;color:var(--ink-soft);max-width:36ch}
.faq__list{display:grid;gap:.85rem}
details.qa{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 1.35rem;transition:border-color .25s,box-shadow .25s,background .25s}
details.qa[open]{border-color:var(--primary);box-shadow:var(--shadow-sm);background:var(--surface)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none;cursor:pointer;padding:1.3rem 0;font-weight:700;font-size:1.08rem;letter-spacing:-.01em;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa__sign{flex-shrink:0;position:relative;width:24px;height:24px;color:var(--primary);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.qa__sign::before,.qa__sign::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:currentColor;border-radius:2px}
.qa__sign::before{width:15px;height:2.4px}
.qa__sign::after{width:2.4px;height:15px;transition:opacity .3s}
.qa[open] .qa__sign{transform:rotate(45deg)}
.qa__answer{padding:0 0 1.4rem;color:var(--ink-soft);font-size:1rem;max-width:62ch}
@media (min-width:900px){.faq-grid{grid-template-columns:.85fr 1.15fr}}
@media (prefers-reduced-motion:no-preference){
  .qa[open] .qa__answer{animation:qaIn .4s cubic-bezier(.16,1,.3,1)}
  @keyframes qaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* ============================================================
   FINAL CTA (dark finale)
   ============================================================ */
.cta{position:relative;overflow:hidden;background:var(--dark-bg);color:var(--dark-ink);text-align:center}
.cta__word{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-weight:800;font-size:clamp(5rem,20vw,18rem);letter-spacing:-.04em;line-height:1;white-space:nowrap;color:var(--primary-light);opacity:.10;pointer-events:none;z-index:0}
.cta::before{content:"";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:80vw;max-width:820px;aspect-ratio:1;background:radial-gradient(circle,rgba(120,80,180,.55),rgba(120,80,180,0) 60%);z-index:0;pointer-events:none}
.cta .container{position:relative;z-index:1}
.cta__inner{max-width:680px;margin-inline:auto}
.cta__inner .h2{color:var(--dark-ink)}
.cta__lead{margin:1.35rem auto 0;color:var(--dark-soft);font-weight:500;font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.55;max-width:52ch}
.cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;margin-top:2.25rem}
.cta__hint{margin-top:1.75rem;color:var(--dark-soft);letter-spacing:.1em}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--dark-bg-2);color:var(--dark-soft);padding-block:clamp(3.5rem,6vw,5rem) 2rem}
.footer-grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
.foot-brand__mark{font-weight:800;font-size:1.5rem;letter-spacing:-.03em;color:#fff}
.foot-brand__mark .dot{color:var(--primary-light)}
.foot-brand p{margin-top:1rem;color:var(--dark-soft);max-width:34ch;font-size:.98rem}
.foot-col__title{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-light);margin-bottom:1.15rem}
.foot-col ul{display:grid;gap:.7rem}
.foot-col a{color:var(--dark-soft);font-size:.98rem;transition:color .2s}
.foot-col a:hover{color:#fff}
.footer-bottom{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.75rem;border-top:1px solid var(--dark-line);display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between}
.footer-bottom__legal{font-size:.85rem;color:var(--dark-soft);opacity:.85}
.footer-bottom__links{display:flex;flex-wrap:wrap;gap:1.1rem}
.footer-bottom__links a{font-size:.85rem;color:var(--dark-soft);transition:color .2s}
.footer-bottom__links a:hover{color:#fff}
@media (min-width:680px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr}}
@media (min-width:960px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}

/* ============================================================
   MOTION
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--rd,0ms)}
  html.js .reveal.in{opacity:1;transform:none}
  .marquee__track{animation:marquee 34s linear infinite}
  .marquee:hover .marquee__track{animation-play-state:paused}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .chip-float--proj{animation:floatyA 6s ease-in-out infinite}
  .chip-float--rating{animation:floatyB 7s ease-in-out infinite .6s}
  @keyframes floatyA{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(-3deg)}}
  @keyframes floatyB{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
  .hl .swash path{stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) .35s}
  html.js .reveal.in .hl .swash path{stroke-dashoffset:0}
}
/* reduced-motion fallback for marquee: static, centered, single set */
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee__track{flex-wrap:wrap;justify-content:center;width:100%}
  .marquee__group[aria-hidden="true"]{display:none}
  .marquee__group span:last-child::after{content:none}
}

/* ============================================================
   PROGRAMMATIC LOCAL-SEO ENGINE (métier / ville / métier×ville)
   Reuses the home tokens: mauve, 20px cards, pill buttons, mono labels.
   ============================================================ */

/* landing wrapper — a touch tighter vertical rhythm than the home */
.lp .section{padding-block:clamp(3rem,6vw,5rem)}
.lp .lp-intro{padding-top:clamp(2rem,4vw,3rem);padding-bottom:0}

/* breadcrumb */
.breadcrumb-nav{border-bottom:1px solid var(--line);background:var(--surface)}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-block:.9rem;font-size:.85rem}
.breadcrumb__item{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted)}
.breadcrumb__item a{color:var(--muted);font-weight:600;transition:color .2s}
.breadcrumb__item a:hover{color:var(--primary)}
.breadcrumb__sep{color:var(--line-2)}
.breadcrumb__current{color:var(--ink);font-weight:700}

/* local hero */
.local-hero{position:relative;overflow:hidden;padding-block:clamp(2.5rem,5vw,4.5rem) clamp(2rem,4vw,3.5rem)}
.local-hero::before{content:"";position:absolute;top:-30%;right:-10%;width:48vw;max-width:560px;aspect-ratio:1;background:radial-gradient(circle at 60% 40%,rgba(152,120,192,.30),rgba(152,120,192,0) 62%);z-index:0;pointer-events:none}
.local-hero .container{position:relative;z-index:1}
.local-hero__title{margin-top:1.4rem;max-width:20ch}
.local-hero__lead{margin-top:1.4rem;max-width:58ch}
.local-hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

/* prose (trusted HTML: intro / ressources) */
.prose{max-width:70ch}
.prose p{margin-top:1rem;color:var(--ink-soft)}
.prose p:first-child{margin-top:0}
.prose a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:var(--primary-strong)}
.prose strong{color:var(--ink)}

/* besoins grid */
.besoins-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
.besoin{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.4rem,2.4vw,1.9rem);box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .3s}
.besoin:hover{transform:translateY(-4px);box-shadow:var(--shadow-md),var(--shadow-glow);border-color:var(--primary)}
.besoin__icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--primary-tint);color:var(--primary);margin-bottom:1rem}
.besoin__icon svg{width:22px;height:22px}
.besoin__title{margin-bottom:.5rem;font-size:1.15rem}
.besoin__text{color:var(--ink-soft);font-size:1rem}
@media (min-width:640px){.besoins-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.besoins-grid{grid-template-columns:repeat(3,1fr)}}

/* taglist (sections_site, secteurs) */
.taglist{display:flex;flex-wrap:wrap;gap:.7rem}
.tag-pill{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:var(--primary);background:var(--primary-tint);border:1px solid var(--line);border-radius:var(--r-pill);padding:.5rem 1rem}

/* tarif teaser */
.tarif-teaser{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.6rem,3vw,2.5rem)}
.tarif-teaser__label{color:var(--muted);margin-bottom:.6rem}
.tarif-teaser__body{max-width:52ch}
.tarif-teaser__text{margin-top:.6rem;color:var(--ink-soft)}

/* related grid (internal mesh) */
.related__title{max-width:22ch}
.related__lead{margin-top:1rem}
.related-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:clamp(1.75rem,3vw,2.5rem)}
.related-card{display:flex;flex-direction:column;gap:.35rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:1.15rem 1.3rem;box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--primary)}
.related-card__label{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.related-card__label .ico{width:16px;height:16px;color:var(--primary);flex-shrink:0;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.related-card:hover .related-card__label .ico{transform:translateX(3px)}
.related-card__sub{font-size:.9rem;color:var(--muted)}
.related + .related{margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:640px){.related-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.related-grid{grid-template-columns:repeat(3,1fr)}}

/* callout (E-E-A-T ressources) */
.callout{background:var(--primary-tint);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.25rem)}
.callout .eyebrow{margin-bottom:1rem}
.callout .prose{max-width:80ch}

/* compact dark CTA band */
.cta-local .cta-local__inner{background:var(--dark-bg);color:var(--dark-ink);border-radius:var(--r-card);padding:clamp(2.25rem,5vw,3.5rem);text-align:center;position:relative;overflow:hidden}
.cta-local__inner .h2{color:var(--dark-ink)}
.cta-local__lead{margin:1.1rem auto 0;max-width:52ch;color:var(--dark-soft);font-size:clamp(1.02rem,1.5vw,1.15rem)}
.cta-local__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;margin-top:1.9rem}
.cta-local__hint{margin-top:1.4rem;color:var(--dark-soft);letter-spacing:.1em}

/* index category / province groups: collapse the gap between successive groups */
.lp-catgroup + .lp-catgroup{padding-top:0}

/* 404 */
.page-404{text-align:center}
.page-404__inner{max-width:640px;margin-inline:auto}
.page-404__code{color:var(--primary);margin-bottom:1rem}
.page-404 .lead{margin:1.25rem auto 0;text-align:center}
.page-404__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;margin-top:2rem}

/* ============================================================
   CONTACT / DEVIS FORM
   Reuses the home tokens (mauve, pill buttons, 12–20px radii, visible
   focus). Status colours are scoped to .contact-main so both themes read.
   ============================================================ */
.contact-main{
  --danger:#B23A48;--danger-bg:#FBEDEF;--danger-line:rgba(178,58,72,.35);
  --ok:#1E7A4D;--ok-bg:#E9F7EF;--ok-line:rgba(30,122,77,.30);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .contact-main{
    --danger:#F2A9B0;--danger-bg:rgba(178,58,72,.18);--danger-line:rgba(242,169,176,.34);
    --ok:#8FE0B4;--ok-bg:rgba(63,178,122,.15);--ok-line:rgba(143,224,180,.30);
  }
}
:root[data-theme="dark"] .contact-main{
  --danger:#F2A9B0;--danger-bg:rgba(178,58,72,.18);--danger-line:rgba(242,169,176,.34);
  --ok:#8FE0B4;--ok-bg:rgba(63,178,122,.15);--ok-line:rgba(143,224,180,.30);
}

.contact-hero{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.contact-section{padding-top:clamp(1.5rem,3vw,2.25rem)}
.contact-layout{display:grid;gap:clamp(1.75rem,4vw,3rem)}
@media (min-width:920px){.contact-layout{grid-template-columns:.82fr 1.18fr;align-items:start}}

/* aside — reassurance */
@media (min-width:920px){.contact-aside{position:sticky;top:96px}}
.contact-aside .eyebrow{margin-bottom:1.35rem}
.contact-points{display:grid;gap:1.1rem;margin-bottom:2rem}
.contact-points li{display:flex;gap:.75rem;align-items:flex-start;color:var(--ink-soft);font-size:1rem}
.contact-points svg{flex-shrink:0;width:22px;height:22px;color:var(--primary);margin-top:.15rem}
.contact-points strong{color:var(--ink)}
.contact-direct{padding-top:1.5rem;border-top:1px solid var(--line)}
.contact-direct .mono{color:var(--muted);margin-bottom:.55rem}

/* form card */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--shadow-md);display:grid;gap:1.25rem}
.form-grid{display:grid;gap:1.25rem}
@media (min-width:560px){.form-grid--2{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field__label{font-weight:700;color:var(--ink);font-size:.95rem}
.field__req{color:var(--primary)}
.field__opt{font-weight:500;color:var(--muted);font-size:.85rem}

.control{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:.85rem 1rem;line-height:1.45;
  transition:border-color .2s,box-shadow .2s;
}
.control::placeholder{color:var(--muted)}
.control:hover{border-color:var(--primary-light)}
.control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-tint)}
.control:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
textarea.control{min-height:150px;resize:vertical}
select.control{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.75rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23603890' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:18px;
}

.field--error .control{border-color:var(--danger)}
.field--error .control:focus{box-shadow:0 0 0 4px var(--danger-bg)}
.field__error{color:var(--danger);font-size:.87rem;font-weight:600}

/* consent */
.field--consent .consent{display:flex;flex-direction:row;align-items:flex-start;gap:.7rem;cursor:pointer;font-size:.95rem;color:var(--ink-soft)}
.consent input{flex-shrink:0;width:1.2rem;height:1.2rem;margin-top:.12rem;accent-color:var(--primary)}

/* alerts */
.form-alert{background:var(--danger-bg);border:1px solid var(--danger-line);border-radius:var(--r-sm);padding:1rem 1.25rem;color:var(--ink)}
.form-alert__title{font-weight:700;color:var(--danger);margin-bottom:.5rem}
.form-alert ul{display:grid;gap:.35rem;padding-left:1.15rem;list-style:disc}
.form-alert a{color:var(--danger);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.form-success{background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.25rem)}
.form-success .h3{color:var(--ink);margin-bottom:.6rem}
.form-success p{color:var(--ink-soft)}
.form-success a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:2px}

.form-submit{width:100%;margin-top:.25rem}
.form-note{color:var(--muted);text-align:center;letter-spacing:.08em}

/* honeypot — visually + AT hidden, still submittable */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ── Hero carousel (rotating métier showcases) ───────────────────────────── */
.hero__carousel{position:relative;display:grid}
.hero__slide{grid-area:1/1;position:relative;opacity:0;transform:scale(.985);transition:opacity .7s ease,transform .7s ease;pointer-events:none}
.hero__slide.is-active{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.hero__slide{transition:opacity .2s ease;transform:none}}
/* per-métier gradient (falls back to theme violet when a/b absent) */
.mock__view{background:linear-gradient(160deg,var(--mock-a,var(--primary-light)),var(--mock-b,var(--primary-deep)))}
/* layout: menu (restaurant) */
.mock__menu{margin-top:auto;display:flex;flex-direction:column;gap:.5rem}
.mock__row{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:10px;padding:.5rem .7rem}
.mock__row-l{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.5)}
.mock__row-p{width:34px;height:14px;border-radius:7px;background:rgba(255,255,255,.32)}
/* layout: gallery (photographe / tatoueur) */
.mock__gallery{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.mock__gallery span{aspect-ratio:1;border-radius:10px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.28)}
/* layout: booking (coiffeur / institut) */
.mock__booking{margin-top:auto;display:flex;flex-direction:column;gap:.7rem}
.mock__days{display:flex;gap:.5rem}
.mock__days span{flex:1;height:34px;border-radius:9px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28)}
.mock__days span.on{background:rgba(255,255,255,.55)}
.mock__cta{height:34px;border-radius:9px;background:rgba(255,255,255,.62)}
/* layout: service (plombier) */
.mock__service{margin-top:auto;display:flex;flex-direction:column;gap:.7rem}
.mock__cta--lg{height:46px;border-radius:11px}
.mock__lines{display:flex;flex-direction:column;gap:.4rem}
.mock__lines span{height:6px;border-radius:3px;background:rgba(255,255,255,.4)}
.mock__lines span:nth-child(1){width:90%}
.mock__lines span:nth-child(2){width:68%}
.mock__lines span:nth-child(3){width:80%}
/* pause/play control (WCAG 2.2.2) */
.carousel-toggle{position:absolute;right:.55rem;bottom:.55rem;z-index:6;width:30px;height:30px;display:grid;place-items:center;padding:0;border:none;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.9);color:var(--ink);box-shadow:var(--shadow-sm);opacity:.5;transition:opacity .2s ease,transform .2s ease}
.hero__carousel:hover .carousel-toggle{opacity:1}
.carousel-toggle:hover{transform:scale(1.06)}
.carousel-toggle:focus-visible{opacity:1;outline:2px solid var(--primary);outline-offset:2px}
.carousel-toggle svg{width:15px;height:15px;display:block}
.carousel-toggle .ico-play{display:none}
.hero__carousel[data-paused] .ico-pause{display:none}
.hero__carousel[data-paused] .ico-play{display:block}

/* ── Réalisations : 2 phares (capture réelle) + grille de 6 compacts ──────── */
.cases-featured{display:grid;gap:1.25rem;margin-bottom:1.25rem}
@media (min-width:800px){.cases-featured{grid-template-columns:1fr 1fr}}
.cases-small-grid{display:grid;gap:1rem}
@media (min-width:560px){.cases-small-grid{grid-template-columns:1fr 1fr}}
@media (min-width:920px){.cases-small-grid{grid-template-columns:repeat(3,1fr)}}
/* real screenshot fills the browser-mock viewport edge-to-edge */
.mock__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* compact-thumb gradient variants */
.thumb-a{background:linear-gradient(150deg,var(--primary-light),var(--primary))}
.thumb-b{background:linear-gradient(150deg,var(--primary),var(--primary-deep))}
.thumb-c{background:linear-gradient(150deg,#8E79C4,#3A1D66)}

/* ── Avis clients (3 cartes) ──────────────────────────────────────────────── */
.reviews{background:var(--surface-2)}
.reviews-grid{display:grid;gap:1.1rem}
@media (min-width:720px){.reviews-grid{grid-template-columns:repeat(3,1fr)}}
.review{display:flex;flex-direction:column;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);padding:clamp(1.4rem,2.4vw,1.9rem)}
.review__stars{display:flex;gap:.15rem;color:var(--star)}
.review__stars svg{width:18px;height:18px}
.review__text{margin:0;color:var(--ink);font-size:1.02rem;line-height:1.55;flex:1}
.review__cite{display:flex;align-items:center;gap:.85rem;margin:0}
.review__meta{display:flex;flex-direction:column;line-height:1.3}
.review__name{font-weight:700;color:var(--ink);font-size:.98rem}
.review__role{color:var(--muted);font-size:.85rem}

/* ============================================================
   TARIFS (pricing page)
   Reuses the home tokens: mauve, 20px cards, pill buttons, mono
   labels, visible focus. Grid goes 1 col → 3 col; the "populaire"
   tier gets a mauve badge + border + tinted surface.
   ============================================================ */
.tarifs-group + .tarifs-group{padding-top:0}
.tarifs-group .section__head{margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}

.tarifs-grid{display:grid;gap:1.25rem;grid-template-columns:1fr;align-items:stretch}
@media (min-width:600px){.tarifs-grid{grid-template-columns:repeat(auto-fit,minmax(260px,340px));justify-content:center}}

.tarif-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.5rem,2.6vw,2rem);box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .3s;
}
.tarif-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md),var(--shadow-glow);border-color:var(--primary)}

/* highlighted "populaire" tier */
.tarif-card--pop{
  border-color:var(--primary);
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--primary-tint) 55%,var(--surface)));
  box-shadow:var(--shadow-md),var(--shadow-glow);
}
@supports not (background:color-mix(in srgb,red,blue)){.tarif-card--pop{background:var(--surface)}}
.tarif-card__badge{
  align-self:flex-start;display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-weight:500;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-primary);background:var(--primary);border-radius:var(--r-pill);
  padding:.4rem .85rem;margin-bottom:1rem;
}

.tarif-card__title{margin-bottom:.35rem}
.tarif-card__for{color:var(--muted);font-size:.92rem;line-height:1.4;margin-bottom:1.25rem}
.tarif-card__price{display:flex;flex-direction:column;gap:.1rem;padding-bottom:1.25rem;margin-bottom:1.25rem;border-bottom:1px solid var(--line)}
.tarif-card__from{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tarif-card__amount{font-weight:800;font-size:clamp(2.1rem,4vw,2.6rem);letter-spacing:-.03em;color:var(--primary);line-height:1.05;font-variant-numeric:tabular-nums}
.tarif-card__per{font-size:1rem;font-weight:700;color:var(--muted);letter-spacing:0}
.tarif-card__ht{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.45rem}

.tarif-card__features{display:grid;gap:.7rem;margin-bottom:1.75rem}
.tarif-card__features li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-soft);font-size:.96rem;line-height:1.45}
.tarif-card__check{flex-shrink:0;display:inline-grid;place-items:center;width:20px;height:20px;margin-top:.1rem;border-radius:50%;background:var(--primary-tint);color:var(--primary)}
.tarif-card__check svg{width:13px;height:13px}
.tarif-card__subhead{font-weight:700;color:var(--ink);font-size:.9rem;margin-top:.25rem}

.tarif-card__foot{margin-top:auto}
.tarif-card__cta{width:100%}

/* toujours inclus */
.tarifs-inclus{background:var(--surface-2)}
.inclus-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:600px){.inclus-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.inclus-grid{grid-template-columns:repeat(3,1fr)}}
.inclus-item{display:flex;gap:.8rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:1.1rem 1.25rem;box-shadow:var(--shadow-sm);color:var(--ink-soft);font-size:.98rem;line-height:1.5}
.inclus-item__check{flex-shrink:0;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--primary-tint);color:var(--primary);margin-top:.15rem}
.inclus-item__check svg{width:15px;height:15px}

/* Liste "ce qui est inclus" dans une carte service (carte vedette) */
.card__list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.55rem}
.card__list li{display:flex;align-items:flex-start;gap:.6rem;color:var(--ink-soft);font-size:.98rem;line-height:1.4}
.card__list .chk{width:18px;height:18px;color:var(--primary);flex-shrink:0;margin-top:1px}

.tarif-card__amount--devis{font-size:clamp(1.6rem,3vw,2rem)}

/* ============================================================
   SERVICE PAGES (/creation-site-vitrine/ …)
   Generic data-driven service template. Reuses the home tokens
   and the .lp / .inclus-grid / .timeline / .tarifs-grid /
   .callout / .tarif-teaser blocks; only the strictly-needed
   extras live here.
   ============================================================ */
/* mid-page tonal band under the method timeline, echoing the home process */
.service-methode{background:var(--surface-2)}
/* space the "délais" callout below the livrables checklist */
.service-delais{margin-top:clamp(1.75rem,3.5vw,2.5rem)}