/* ---------------------------------------------------------------------------
   tillap.com — feuille de style du site multi-pages.

   Palette violette conservée (identité validée le 26/07). Repensé : densité,
   trame technique, cartes à bordure dégradée, blocs dépliables animés, menu
   mobile plein écran, alternance stricte blanc / gris des sections.

   Isolée de site-vitrine/main.css tant que la refonte n'est pas validée : la
   production ne doit pas bouger pendant la phase dev.
--------------------------------------------------------------------------- */

:root{
  --light:#ffffff; --light-alt:#f6f5fc; --light-line:#e7e4f6; --ink:#0a2540; --muted:#6b7280;
  --ink-soft:#334155;
  --accent:#6c5ce7; --accent-deep:#5646d6; --accent-soft:#efedff;
  --success:#0a8a5f; --success-soft:#e8f7f0;
  --grad-c:#6c5ce7; --grad-g:#ff6fa5; --grad-p:#ffb648;
  --radius:14px; --radius-lg:20px; --radius-xl:26px; --radius-pill:999px; --radius-tag:8px;
  --font-head:'Fraunces',serif; --font-body:'Inter',system-ui,sans-serif;
  --font-num:'Inter',system-ui,sans-serif;
  --header-h:58px;
  --shadow-sm:0 2px 8px -4px rgba(10,37,64,.10);
  --shadow-md:0 14px 34px -20px rgba(10,37,64,.24);
  --shadow-lg:0 30px 70px -34px rgba(10,37,64,.34);
  --ease:cubic-bezier(.22,1,.36,1);
  --dot:rgba(108,92,231,.13);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:calc(var(--header-h) + 12px)}
body{font-family:var(--font-body);background:var(--light);color:var(--muted);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100vw}
h1,h2,h3.display{font-family:var(--font-head);font-weight:600;line-height:1.13;letter-spacing:-.008em;color:var(--ink)}
em{font-style:italic;background:linear-gradient(96deg,var(--accent),var(--grad-g) 52%,var(--grad-p));-webkit-background-clip:text;background-clip:text;color:transparent}
a{color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;text-align:left}
[hidden]{display:none !important}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:840px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Sections & alternance ---------- */
section{padding:76px 0;position:relative}
.sec-white{background:var(--light)}
.sec-tint{background:var(--light-alt)}
/* Fond dégradé décoratif — utilisé pour le héros et le bandeau de fin. Le
   voile en ::before fond le haut de la section vers le blanc pour éviter la
   cassure nette signalée entre la FAQ et « On en parle ? ». */
.sec-mesh{
  background-color:#f7f6fd;
  background-image:
    radial-gradient(58% 66% at 3% -12%, #e9e5ff 0%, transparent 62%),
    radial-gradient(52% 62% at 100% -8%, #ffe3bd 0%, transparent 60%),
    radial-gradient(58% 68% at 92% 112%, #ffd6e6 0%, transparent 58%),
    radial-gradient(62% 74% at -6% 110%, #d9d2ff 0%, transparent 58%);
  isolation:isolate;
}
.sec-mesh::before{
  content:"";position:absolute;inset:0 0 auto 0;height:150px;z-index:-1;
  background:linear-gradient(180deg,var(--light) 0%,rgba(255,255,255,.55) 45%,transparent 100%);
  pointer-events:none;
}
.sec-mesh.from-tint::before{background:linear-gradient(180deg,var(--light-alt) 0%,rgba(246,245,252,.5) 45%,transparent 100%)}
.sec-mesh.no-fade::before{display:none}
/* Trame de points, signature « tech » discrète */
.dotted::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(75% 65% at 50% 40%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(75% 65% at 50% 40%,#000 0%,transparent 78%);
}

.eyebrow{display:inline-flex;align-items:center;gap:.55em;font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-deep)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:2px;background:linear-gradient(135deg,var(--accent),var(--grad-g))}
.section-head{max-width:680px;margin:0 auto 38px;text-align:center}
.section-head h2{font-size:clamp(1.72rem,3.6vw,2.35rem);margin-top:.35em}
.section-head p.sub{margin-top:12px;font-size:1rem}
.section-head p.sub strong{color:var(--ink)}

/* ---------- Boutons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  text-decoration:none;font-weight:600;font-size:.93rem;padding:.85em 1.65em;
  border-radius:var(--radius-pill);border:1.5px solid transparent;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .2s ease,border-color .2s ease,color .2s ease;
}
.btn svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-accent{background:linear-gradient(120deg,var(--accent-deep),var(--accent) 60%,#8b7cf0);color:#fff;box-shadow:0 10px 26px -12px rgba(86,70,214,.66)}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(86,70,214,.7)}
.btn-line{background:#fff;border-color:var(--light-line);color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-line:hover{border-color:var(--accent);color:var(--accent-deep);transform:translateY(-2px)}
.btn-ghost{color:var(--accent-deep);padding:.5em 0}
.btn-ghost:hover{text-decoration:underline;text-underline-offset:4px}
.btn-lg{padding:1em 2.05em;font-size:1rem}
.btn-lg svg{width:18px;height:18px}

/* ---------- Bandeau offre de lancement ---------- */
.launch-banner{background:linear-gradient(96deg,#4a3ac4,var(--accent) 55%,#8b7cf0);color:#fff;position:relative;overflow:hidden}
.launch-banner-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 18px;padding:6px 24px;text-align:center;position:relative}
.launch-banner-msg{font-size:.85rem}
.launch-banner-msg s{position:relative;display:inline-block;text-decoration:none}
.launch-banner-msg s::before{content:"";position:absolute;left:-4%;top:50%;width:108%;height:1.5px;background:currentColor;opacity:.55;transform:rotate(-12deg)}
.launch-price{font-weight:700;font-size:1.04rem}
.launch-chip{background:rgba(255,255,255,.2);border-radius:var(--radius-tag);padding:.25em .95em;font-size:.77rem;white-space:nowrap}
.launch-chip strong{font-weight:700}

/* ---------- Bandeau « Prochainement » ---------- */
.soon-strip{background:linear-gradient(96deg,#4a3ac4,var(--accent) 60%,#8b7cf0);color:#fff}
.soon-strip-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;padding:11px 24px;text-align:center;font-size:.87rem}
.soon-strip strong{font-weight:700}
.soon-strip a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---------- Bandeau dev ---------- */
.devbar{background:#0a2540;color:#fff;font-size:.76rem;text-align:center;padding:6px 16px;font-weight:600}
.devbar b{color:var(--grad-p)}

/* ---------- Header ---------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease,background .3s ease}
.topbar.scrolled{border-bottom-color:var(--light-line);box-shadow:0 10px 30px -22px rgba(10,37,64,.3);background:rgba(255,255,255,.93)}
.header-in{display:flex;align-items:center;gap:30px;height:var(--header-h)}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand svg{height:42px;width:auto}
.brand svg .logo-mark{fill:var(--ink)}
.brand svg .logo-dot,.brand svg .logo-com{fill:var(--accent)}
.header-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.account-link{display:inline-flex;align-items:center;gap:.4em;text-decoration:none;color:var(--muted);font-size:.88rem;font-weight:500;transition:color .2s ease}
.account-link svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.account-link:hover{color:var(--ink)}
.header-in .btn{height:42px;padding:0 1.35em}

/* Nav desktop */
nav{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:500}
nav > a,.nav-toggle{
  display:inline-flex;align-items:center;gap:.35em;text-decoration:none;color:var(--ink-soft);
  padding:.5em .8em;border-radius:var(--radius-pill);transition:background .18s ease,color .18s ease;
}
nav > a:hover,.nav-toggle:hover{background:var(--accent-soft);color:var(--accent-deep)}
nav > a.current{color:var(--accent-deep);background:var(--accent-soft);font-weight:600}
.nav-toggle svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6;transition:transform .25s var(--ease)}
.nav-item{position:relative}
.nav-item.open .nav-toggle{background:var(--accent-soft);color:var(--accent-deep)}
.nav-item.open .nav-toggle svg{transform:rotate(180deg)}
.nav-item.is-current .nav-toggle{color:var(--accent-deep);font-weight:600}

/* Méga-menu univers */
.nav-menu{
  position:absolute;top:calc(100% + 10px);left:-14px;z-index:70;
  width:min(720px,92vw);padding:20px;
  background:#fff;border:1px solid var(--light-line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);
  transition:opacity .2s ease,transform .24s var(--ease),visibility .2s;
}
.nav-item.open .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 14px}
.nav-menu-grid a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  text-decoration:none;color:var(--ink);font-size:.85rem;font-weight:500;
  padding:7px 10px;border-radius:var(--radius-tag);transition:background .15s ease;
}
.nav-menu-grid a:hover{background:var(--light-alt)}
.nav-menu-grid a[aria-current]{background:var(--accent-soft);color:var(--accent-deep);font-weight:600}
.nav-menu-grid .np{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.nav-menu-grid .flag{width:6px;height:6px;border-radius:50%;background:var(--success);flex:none}
.nav-menu-foot{margin-top:14px;padding-top:13px;border-top:1px solid var(--light-line);font-size:.82rem;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between}
.nav-menu-foot a{color:var(--accent-deep);font-weight:600;text-decoration:none}
.nav-menu-foot a:hover{text-decoration:underline}

/* Burger */
.burger{display:none;width:42px;height:42px;border:1.5px solid var(--light-line);background:#fff;border-radius:var(--radius-pill);place-items:center;color:var(--ink);box-shadow:var(--shadow-sm)}
.burger span{position:relative;display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .28s var(--ease),opacity .18s ease}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .28s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
body.nav-open .burger span{transform:rotate(45deg)}
body.nav-open .burger span::before{transform:translateY(6px) rotate(-90deg)}
body.nav-open .burger span::after{transform:translateY(-6px) rotate(-90deg);opacity:0}

/* ---------- Menu mobile (feuille plein écran) ---------- */
.msheet{
  position:fixed;inset:0;z-index:80;display:none;flex-direction:column;
  background:#fff;
}
.msheet.on{display:flex}
.msheet-head{display:flex;align-items:center;justify-content:space-between;gap:14px;height:var(--header-h);padding:0 14px;border-bottom:1px solid var(--light-line);flex:none}
.msheet-head .brand svg{height:38px}
.msheet-close{width:42px;height:42px;display:grid;place-items:center;border:1.5px solid var(--light-line);border-radius:var(--radius-pill);color:var(--ink)}
.msheet-close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.msheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 14px 28px}
.msheet-body > *{opacity:0;transform:translateY(12px)}
.msheet.on .msheet-body > *{animation:msIn .42s var(--ease) forwards}
.msheet.on .msheet-body > *:nth-child(1){animation-delay:.02s}
.msheet.on .msheet-body > *:nth-child(2){animation-delay:.06s}
.msheet.on .msheet-body > *:nth-child(3){animation-delay:.10s}
.msheet.on .msheet-body > *:nth-child(4){animation-delay:.14s}
.msheet.on .msheet-body > *:nth-child(5){animation-delay:.18s}
@keyframes msIn{to{opacity:1;transform:none}}
.ms-label{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px 6px}
.ms-univers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}
.ms-univers a{
  display:flex;flex-direction:column;gap:4px;text-decoration:none;
  background:var(--light-alt);border:1px solid var(--light-line);border-radius:var(--radius);
  padding:12px 12px 11px;color:var(--ink);
}
.ms-univers a:active{background:var(--accent-soft);border-color:var(--accent)}
.ms-univers .u-ico{width:26px;height:26px;border-radius:7px;background:#fff;border:1px solid var(--light-line);display:grid;place-items:center;margin-bottom:2px}
.ms-univers .u-ico svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ms-univers b{font-size:.84rem;font-weight:600;line-height:1.25}
.ms-univers .np{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ms-univers .live{color:var(--success);font-weight:700}
.ms-links{display:grid;gap:2px;margin-bottom:22px}
.ms-links a{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:var(--ink);font-size:1.02rem;font-weight:600;padding:13px 8px;border-bottom:1px solid var(--light-line)}
.ms-links a svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ms-links a:active{color:var(--accent-deep)}
.ms-cta{display:grid;gap:10px}
.ms-cta .btn{width:100%}

/* ---------- Fil d'Ariane ---------- */
.breadcrumb{font-size:.79rem;color:var(--muted);padding:16px 0 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.45em}
.breadcrumb a{text-decoration:none;color:var(--muted)}
.breadcrumb a:hover{color:var(--accent-deep);text-decoration:underline}
.breadcrumb li+li::before{content:"›";margin-right:.45em;opacity:.55}
.breadcrumb [aria-current]{color:var(--ink);font-weight:600}

/* ---------- Héros ---------- */
.hero{padding:60px 0 88px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:36px;align-items:center}
.hero h1{font-size:clamp(2.2rem,4.7vw,3.2rem)}
.hero p.lead{font-size:1.05rem;max-width:34em;margin:18px 0 28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.badges{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.83rem}
.badges span{display:inline-flex;align-items:center;gap:.4em}
.badges svg{width:15px;height:15px;stroke:var(--success);fill:none;stroke-width:2.4}

/* Mockups du héros */
.mock-stack{position:relative;height:390px}
.hero-browser{position:absolute;top:0;left:0;width:340px;border-radius:var(--radius-lg);overflow:hidden;background:#fff;border:1px solid var(--light-line);box-shadow:var(--shadow-lg);animation:floatA 7s ease-in-out infinite}
.hero-browser .bar{background:var(--light-alt);padding:10px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--light-line)}
.hero-browser .bar i{width:7px;height:7px;border-radius:50%;background:var(--light-line);flex:none}
.hero-browser .bar span{font-family:ui-monospace,monospace;font-size:.65rem;color:#a9a4c9;margin-left:8px}
.hero-browser .body{padding:22px 20px 26px}
.hb-title{height:12px;width:68%;border-radius:4px;background:var(--ink);opacity:.88;margin-bottom:10px}
.hb-sub{height:8px;width:88%;border-radius:3px;background:#c9c5e4;margin-bottom:7px}
.hb-sub.w60{width:54%}
.hb-cta{margin-top:16px;display:inline-block;height:30px;width:118px;border-radius:var(--radius-pill);background:linear-gradient(120deg,var(--accent-deep),var(--accent))}
.hb-cards{margin-top:22px;display:flex;gap:10px}
.hb-cards i{flex:1;height:44px;border-radius:var(--radius-tag);border:1px solid var(--light-line);background:color-mix(in srgb,var(--accent) 26%,#fff)}
.hb-cards i:nth-child(2){background:color-mix(in srgb,var(--grad-g) 26%,#fff)}
.hb-cards i:nth-child(3){background:color-mix(in srgb,var(--grad-p) 30%,#fff)}
.hero-phone{position:absolute;bottom:8px;right:0;width:122px;border-radius:22px;background:#fff;padding:8px;border:1px solid var(--light-line);box-shadow:var(--shadow-lg);animation:floatB 8s ease-in-out infinite}
.hero-phone .screen{background:var(--light-alt);border-radius:15px;padding:12px 10px;height:212px}
.hp-line{height:6px;border-radius:3px;background:#c9c5e4;margin-bottom:7px}
.hp-line.w70{width:70%} .hp-line.w50{width:50%}
.hp-block{margin-top:10px;height:50px;border-radius:var(--radius-tag);background:color-mix(in srgb,var(--grad-p) 28%,#fff)}
.hp-cta{margin-top:10px;height:20px;border-radius:var(--radius-pill);background:linear-gradient(120deg,var(--accent-deep),var(--accent))}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}

/* Héros de page univers */
.cat-hero{padding:24px 0 70px;overflow:hidden}
.cat-hero-in{max-width:790px;padding-top:30px}
.cat-hero h1{font-size:clamp(1.95rem,4.3vw,2.9rem);margin-top:.35em}
.cat-hero p.lead{font-size:1.05rem;max-width:37em;margin:16px 0 26px}
.cat-hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cat-hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;align-items:center}

/* Badges de statut */
.status-badge{display:inline-flex;align-items:center;gap:.55em;border-radius:var(--radius-pill);padding:.5em 1.1em;font-size:.82rem;font-weight:700}
.status-badge .dot{width:8px;height:8px;border-radius:50%;flex:none}
.status-soon{background:linear-gradient(96deg,#4a3ac4,var(--accent));color:#fff;box-shadow:0 10px 24px -12px rgba(86,70,214,.65)}
.status-soon .dot{background:#fff;animation:soonPulse 1.9s ease-in-out infinite}
.status-live{background:var(--success-soft);border:1px solid color-mix(in srgb,var(--success) 34%,transparent);color:var(--success)}
.status-live .dot{background:var(--success)}
@keyframes soonPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.price-badge{display:inline-flex;align-items:baseline;gap:.4em;background:#fff;border:1px solid var(--light-line);border-radius:var(--radius-pill);padding:.45em 1.05em;font-size:.83rem;box-shadow:var(--shadow-sm);font-variant-numeric:tabular-nums}
.price-badge b{color:var(--ink);font-size:.98rem;font-weight:700}

/* ---------- Cartes à bordure dégradée ---------- */
.gcard{
  position:relative;background:#fff;border-radius:var(--radius-lg);
  border:1px solid var(--light-line);box-shadow:var(--shadow-sm);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .2s ease;
}
.gcard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(135deg,var(--accent),var(--grad-g) 48%,var(--grad-p));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .26s ease;pointer-events:none;
}
.gcard:hover,.gcard:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.gcard:hover::before,.gcard:focus-visible::before,.gcard.is-open::before{opacity:1}

/* ---------- Grille des univers ---------- */
.u-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px}
.u-card{display:flex;flex-direction:column;text-decoration:none;padding:20px 18px 16px;color:var(--ink);overflow:hidden}
.u-card .u-icon{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:13px;transition:transform .26s var(--ease)}
.u-card .u-icon svg{width:19px;height:19px;stroke:var(--accent-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u-card:hover .u-icon{transform:scale(1.08) rotate(-4deg)}
.u-grid .u-card:nth-child(3n+2) .u-icon{background:#ffeef4}
.u-grid .u-card:nth-child(3n+2) .u-icon svg{stroke:#e34a80}
.u-grid .u-card:nth-child(3n) .u-icon{background:#fff4e2}
.u-grid .u-card:nth-child(3n) .u-icon svg{stroke:#c9791a}
.u-card h3{font-family:var(--font-body);font-weight:700;font-size:.97rem;margin-bottom:4px;line-height:1.3}
.u-card p{font-size:.8rem;color:var(--muted);margin:0}
.u-card .u-opt-note{color:var(--muted);font-weight:600}
.u-card .u-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.78rem;color:var(--muted)}
.u-card .u-price{font-variant-numeric:tabular-nums}
.u-card .u-price b{color:var(--ink);font-weight:700}
.u-card .u-go{width:24px;height:24px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;flex:none;transition:transform .24s var(--ease),background .2s ease}
.u-card .u-go svg{width:12px;height:12px;stroke:var(--accent-deep);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.u-card:hover .u-go{transform:translateX(3px);background:var(--accent);}
.u-card:hover .u-go svg{stroke:#fff}
/* Badge de statut en flux (plus une pastille absolue de coin) : même langage
   visuel que .status-badge des pages univers — fond teinté, couleur évidente,
   pastille fixe (ouvert) ou animée (en préparation). */
.u-flag{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:.4em .8em;border-radius:var(--radius-pill);margin-bottom:12px;line-height:1.3}
.u-flag .dot{width:7px;height:7px;border-radius:50%;flex:none}
.u-flag.live{background:var(--success-soft);color:var(--success)}
.u-flag.live .dot{background:var(--success)}
.u-flag.soon{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-deep)}
.u-flag.soon .dot{background:var(--accent-deep);animation:soonPulse 1.9s ease-in-out infinite}
.u-card.is-live{border-color:color-mix(in srgb,var(--success) 34%,var(--light-line));background:linear-gradient(180deg,#f4fcf8,#fff 42%)}

/* ---------- Bloc « le problème » ----------
   La barre verticale en dégradé qui marquait ce bloc se lisait comme un
   artefact d'affichage plutôt que comme une intention. Remplacée par une
   pastille avec une loupe : le propos du bloc (ce que le client tape sur
   Google) devient explicite au premier coup d'œil. */
.problem{max-width:780px;margin:0 auto;position:relative;padding:30px 32px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--light-line)}
.problem-head{display:flex;align-items:center;gap:13px;margin-bottom:.7em}
.problem-ico{flex:none;width:38px;height:38px;border-radius:11px;background:var(--accent-soft);display:grid;place-items:center}
.problem-ico svg{width:19px;height:19px;stroke:var(--accent-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.problem h2{font-family:var(--font-body);font-size:1.1rem;font-weight:700;margin:0;line-height:1.3}
.problem p{font-size:1rem;margin:0}

/* ---------- Listes de bénéfices ---------- */
.bullets{max-width:900px;margin:0 auto;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.bullets li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem}
.bullets li::before{
  content:"";flex:none;width:20px;height:20px;margin-top:.16em;border-radius:6px;
  background-color:var(--success-soft);border:1px solid color-mix(in srgb,var(--success) 32%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a8a5f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px;
}

/* Item de liste « libellé + description » : le libellé prend sa propre ligne,
   sinon il se renvoie à la ligne au milieu du texte et chaque description
   démarre à une abscisse différente d'un item à l'autre. */
.b-def{display:block}
.b-def b{display:block;color:var(--ink);font-weight:700;margin-bottom:1px}

/* ---------- Encart d'avertissement ---------- */
.note-box{max-width:900px;margin:26px auto 0;display:flex;gap:12px;background:#fffaf0;border:1px solid #f3dfb4;border-radius:var(--radius);padding:16px 20px;font-size:.87rem;color:#7a5410}
.note-box svg{width:18px;height:18px;flex:none;margin-top:.18em;stroke:#c08a1a;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Liste de métiers dépliable ---------- */
.metier-list{max-width:900px;margin:0 auto;display:grid;gap:10px}
.metier-row{overflow:hidden}
.metier-btn{width:100%;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:inherit}
.metier-btn .mi{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);display:grid;place-items:center;flex:none;font-family:var(--font-body);font-weight:700;font-size:.78rem;color:var(--accent-deep)}
.metier-main{flex:1;min-width:0}
.metier-main b{display:block;font-size:.98rem;font-weight:700;color:var(--ink);line-height:1.3}
.metier-main span{display:block;font-size:.83rem;color:var(--muted);margin-top:2px}
.metier-price{flex:none;text-align:right;font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--muted);line-height:1.35}
.metier-price b{display:block;font-size:1.02rem;color:var(--ink);font-weight:700}
.metier-chev{flex:none;width:26px;height:26px;border-radius:50%;background:var(--light-alt);display:grid;place-items:center;transition:transform .3s var(--ease),background .2s ease}
.metier-chev svg{width:13px;height:13px;stroke:var(--ink);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.metier-row.is-open .metier-chev{transform:rotate(180deg);background:var(--accent);}
.metier-row.is-open .metier-chev svg{stroke:#fff}
.metier-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}
.metier-row.is-open .metier-panel{grid-template-rows:1fr}
.metier-panel > div{overflow:hidden}
.metier-inner{padding:2px 18px 18px 66px;border-top:1px solid var(--light-line);margin-top:2px;padding-top:16px}
.metier-inner .mp-lead{font-size:.9rem;margin-bottom:14px}
.mod-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.mod-tag{display:inline-flex;align-items:center;gap:.4em;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);color:var(--accent-deep);border-radius:var(--radius-tag);padding:.35em .8em;font-size:.78rem;font-weight:600}
.mod-tag svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mod-tag.socle{background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 26%,transparent);color:var(--success)}
.mod-tag.opt{background:#fff;border-color:var(--light-line);color:var(--muted);font-weight:500}
.mod-tag.opt::after{content:"en option";margin-left:.35em;font-size:.9em;opacity:.75}
/* Métiers et modules hors grille tarifaire (annonces, commande en ligne) :
   « offre sur-mesure » plutôt qu'un prix qu'on ne pourrait pas tenir. */
.metier-price b.is-custom{font-size:.92rem;color:var(--accent-deep)}
.mod-price.is-custom{color:var(--accent-deep);font-weight:700}
.mod-card.is-custom-mod{border-style:dashed}
.mod-card.is-custom-mod .mod-ico{background:var(--accent-soft)}
.ct-big.is-custom-total{font-size:1.5rem;font-family:var(--font-head);font-weight:600;color:var(--accent-deep)}
.mp-calc{display:grid;gap:5px;font-size:.83rem;font-variant-numeric:tabular-nums;background:var(--light-alt);border-radius:var(--radius);padding:13px 15px;margin-bottom:14px}
.mp-calc div{display:flex;justify-content:space-between;gap:12px}
.mp-calc .mp-total{border-top:1px solid var(--light-line);margin-top:4px;padding-top:7px;font-weight:700;color:var(--ink);font-size:.94rem}
.mp-links{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Modules (catalogue dépliable) ---------- */
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.mod-card{overflow:hidden;display:flex;flex-direction:column}
.mod-head{width:100%;display:flex;align-items:flex-start;gap:13px;padding:18px}
.mod-ico{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;flex:none}
.mod-ico svg{width:18px;height:18px;stroke:var(--accent-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mod-grid .mod-card:nth-child(3n+2) .mod-ico{background:#ffeef4}
.mod-grid .mod-card:nth-child(3n+2) .mod-ico svg{stroke:#e34a80}
.mod-grid .mod-card:nth-child(3n) .mod-ico{background:#fff4e2}
.mod-grid .mod-card:nth-child(3n) .mod-ico svg{stroke:#c9791a}
.mod-txt{flex:1;min-width:0}
.mod-txt b{display:block;font-size:.95rem;font-weight:700;color:var(--ink)}
.mod-txt .mod-price{display:block;font-size:.8rem;color:var(--accent-deep);font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.mod-txt p{font-size:.83rem;margin-top:7px}
.mod-more{display:inline-flex;align-items:center;gap:.35em;font-size:.79rem;font-weight:600;color:var(--accent-deep);padding:0 18px 16px 67px}
.mod-more svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.mod-card.is-open .mod-more svg{transform:rotate(180deg)}
.mod-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}
.mod-card.is-open .mod-panel{grid-template-rows:1fr}
.mod-panel > div{overflow:hidden}
.mod-detail{padding:0 18px 18px 67px;font-size:.85rem}
.mod-detail p{margin-top:-4px}
.mod-req{margin-top:9px;font-size:.79rem;color:var(--muted);font-style:italic}

/* ---------- Socle ---------- */
.socle{max-width:940px;margin:0 auto;padding:30px 32px}
.socle-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;padding-bottom:20px;border-bottom:1px solid var(--light-line)}
.socle-name{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--success)}
.socle-price{font-size:2.15rem;font-weight:700;color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums;margin-top:6px}
.socle-price small{font-size:.84rem;font-weight:500;color:var(--muted);margin-left:.35em}
.socle-monthly{font-size:1rem;color:var(--muted);font-variant-numeric:tabular-nums}
.socle-monthly b{color:var(--ink);font-weight:700;font-size:1.3rem}
.socle-tag{margin-top:18px;font-size:.95rem}
.socle-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px}
.socle-col h4{font-family:var(--font-body);font-size:.71rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.socle-col ul{list-style:none;display:grid;gap:7px}
.socle-col li{display:flex;gap:9px;font-size:.87rem;align-items:flex-start}
.socle-col li::before{
  content:"";flex:none;width:17px;height:17px;margin-top:.18em;border-radius:5px;
  background-color:var(--success-soft);border:1px solid color-mix(in srgb,var(--success) 30%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a8a5f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:11px;
}

/* ---------- Configurateur de prix ---------- */
.config{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.config-panel{padding:24px 26px}
.config-panel h3{font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.config-select{position:relative;margin-bottom:20px}
.config-select select{
  width:100%;appearance:none;font:inherit;font-size:.96rem;font-weight:600;color:var(--ink);
  background:#fff;border:1.5px solid var(--light-line);border-radius:var(--radius);
  padding:.85em 2.6em .85em 1em;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c5ce7' stroke-width='2.4' 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 1em center;background-size:17px;
}
.config-select select:hover{border-color:var(--accent)}
.config-select select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.config-hint{display:none;font-size:.79rem;color:var(--accent-deep);font-weight:600;margin-bottom:10px}
.config-hint.on{display:block}
.config-mods{display:grid;gap:8px}
.cmod{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--light-line);border-radius:var(--radius);cursor:pointer;transition:border-color .2s ease,background .2s ease,opacity .2s ease}
.cmod:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--light-line))}
.cmod.on{border-color:var(--accent);background:var(--accent-soft)}
.cmod.locked{cursor:not-allowed;opacity:.55}
/* Grisé mais toujours cliquable : module qui ne sert pas au métier choisi
   (ou tous les modules tant qu'aucun métier n'est choisi). */
.cmod.dim{opacity:.45}
.cmod.dim:hover{opacity:.75}
.config-mods.no-metier .cmod{opacity:.4}
.config-mods.no-metier .cmod:hover{opacity:.65}
.cmod input{position:absolute;opacity:0;pointer-events:none}
.cbox{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--light-line);background:#fff;flex:none;display:grid;place-items:center;transition:background .2s ease,border-color .2s ease}
.cbox svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .22s var(--ease)}
.cmod.on .cbox{background:var(--accent);border-color:var(--accent)}
.cmod.on .cbox svg{opacity:1;transform:none}
.cmod-txt{flex:1;min-width:0}
.cmod-txt b{display:block;font-size:.89rem;font-weight:600;color:var(--ink)}
.cmod-txt span{display:block;font-size:.78rem;color:var(--muted)}
.cmod-price{font-size:.79rem;color:var(--accent-deep);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.config-note{margin-top:16px;font-size:.79rem}

.config-total{position:sticky;top:calc(var(--header-h) + 16px);padding:26px 24px;text-align:center;overflow:hidden}
.config-total .ct-label{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.config-total .ct-big{font-size:2.7rem;font-weight:700;color:var(--ink);line-height:1.02;margin:8px 0 2px;font-variant-numeric:tabular-nums}
.config-total .ct-sub{font-size:.84rem;color:var(--muted)}
.config-total .ct-monthly{margin-top:16px;padding-top:16px;border-top:1px solid var(--light-line);font-size:1rem;color:var(--muted);font-variant-numeric:tabular-nums}
.config-total .ct-monthly b{font-size:1.6rem;color:var(--ink);font-weight:700}
.config-total .ct-list{margin-top:16px;text-align:left;display:grid;gap:5px;font-size:.8rem}
.config-total .ct-list div{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.config-total .ct-list .ct-socle{color:var(--success);font-weight:600}
.config-total .btn{margin-top:20px;width:100%}
.ct-pulse{animation:ctPulse .5s var(--ease)}
@keyframes ctPulse{0%{transform:scale(1)}35%{transform:scale(1.045)}100%{transform:scale(1)}}

/* ---------- Offre BTP (2 colonnes, page /btp/) ---------- */
.offre-card{max-width:1000px;margin:0 auto;background:#fff;border:1px solid var(--light-line);border-radius:var(--radius-xl);padding:34px 32px;box-shadow:var(--shadow-md)}
.offre-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.offre-col{background:var(--light-alt);border:1px solid var(--light-line);border-radius:var(--radius-lg);padding:24px 22px}
.offre-price{font-size:2.1rem;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.offre-price small{font-size:.85rem;font-weight:500;color:var(--muted);margin-left:.3em}
.offre-price-strike{font-size:1.1rem;color:var(--muted);margin-right:.35em;font-weight:500;position:relative;display:inline-block}
.offre-price-strike::before{content:"";position:absolute;left:-4%;top:50%;width:108%;height:1.5px;background:currentColor;opacity:.55;transform:rotate(-12deg)}
.offre-price-main-wrap{position:relative;display:inline-block}
#offrePriceMain{background:linear-gradient(96deg,var(--accent),var(--grad-g) 55%,var(--grad-p));-webkit-background-clip:text;background-clip:text;color:transparent}
.offre-discount-badge{position:absolute;top:-14px;right:-24px;background:linear-gradient(120deg,var(--accent),var(--grad-g) 55%,var(--grad-p));color:#fff;font-size:.65rem;font-weight:700;line-height:1;padding:4px 7px;border-radius:6px;transform:rotate(6deg);box-shadow:var(--shadow-sm);white-space:nowrap}
.offre-launch-note{margin-top:10px;font-size:.82rem;color:var(--accent-deep);font-weight:600}
.offre-launch-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.offre-chip{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:var(--radius-tag);padding:.3em .95em;font-size:.78rem;color:var(--ink);white-space:nowrap}
.offre-chip strong{font-weight:700}
.offre-countdown{display:flex;gap:7px;margin-top:12px}
.offre-countdown-unit{flex:1;background:#fff;border:1px solid var(--light-line);border-radius:var(--radius-tag);padding:.5em .3em;text-align:center}
.offre-countdown-num{display:block;font-size:1.2rem;font-weight:700;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.offre-countdown-label{display:block;font-size:.57rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.offre-col ul{list-style:none;margin-top:18px}
.offre-col li{display:flex;gap:10px;padding:6px 0;font-size:.89rem;align-items:flex-start}
.offre-col li::before{
  content:"";flex:none;width:18px;height:18px;margin-top:.14em;border-radius:5px;
  background-color:var(--success-soft);border:1px solid color-mix(in srgb,var(--success) 32%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a8a5f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:11px;
}
.offre-note{margin-top:22px;text-align:center;font-size:.82rem}
.offre-note b{color:var(--ink)}

/* ---------- Métiers BTP (panneau de chips) ---------- */
.metiers-panel{max-width:1000px;margin:0 auto;padding:28px 26px}
.metiers-panel > p{margin-bottom:18px;max-width:60em}
.metiers-chips{display:flex;flex-wrap:wrap;gap:7px}
.metiers-chips span,.metiers-chips a{background:var(--light-alt);border:1px solid var(--light-line);border-radius:var(--radius-tag);padding:.4em .95em;font-size:.84rem;font-weight:500;color:var(--ink-soft);text-decoration:none;transition:transform .18s var(--ease),background .18s ease,border-color .18s ease}
.metiers-chips a{background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 34%,transparent);color:var(--success);font-weight:600}
.metiers-chips a:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--success) 18%,#fff)}
.metiers-chips a::after{content:"↗";margin-left:.35em;font-size:.82em;opacity:.85}
.metiers-note{margin-top:14px;font-size:.83rem}
.zone-note{margin-top:20px;padding-top:18px;border-top:1px solid var(--light-line);font-size:.88rem}
.zone-note strong{color:var(--ink)}

/* ---------- Méthode ---------- */
.timeline{max-width:820px;margin:0 auto;display:grid;gap:12px}
.tl-item{position:relative;background:#fff;border:1px solid var(--light-line);border-radius:var(--radius-lg);padding:20px 22px 20px 84px;box-shadow:var(--shadow-sm)}
.tl-num{position:absolute;left:20px;top:20px;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent-deep),var(--accent));color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:1.12rem}
.tl-item:nth-child(2) .tl-num{background:linear-gradient(135deg,#e34a80,var(--grad-g))}
.tl-item:nth-child(3) .tl-num{background:linear-gradient(135deg,#e08a12,var(--grad-p))}
.tl-item h3{font-family:var(--font-body);font-size:1.04rem;font-weight:700;color:var(--ink);margin-bottom:.35em}
.tl-item p{font-size:.93rem;max-width:46em}

/* ---------- Pourquoi ---------- */
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px}
.point{padding:22px 20px}
.point .pic{width:38px;height:38px;border-radius:11px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:14px}
.point .pic svg{width:19px;height:19px;stroke:var(--accent-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.points .point:nth-child(3n+2) .pic{background:#ffeef4}
.points .point:nth-child(3n+2) .pic svg{stroke:#e34a80}
.points .point:nth-child(3n) .pic{background:#fff4e2}
.points .point:nth-child(3n) .pic svg{stroke:#c9791a}
.point h3{font-family:var(--font-body);font-size:.98rem;font-weight:700;color:var(--ink);margin-bottom:.4em}
.point p{font-size:.88rem}

/* ---------- À propos ---------- */
.apropos-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;align-items:center;max-width:960px;margin:0 auto}
.apropos-photo{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-xl);border:1px solid var(--light-line);box-shadow:var(--shadow-lg)}
.apropos-text p{margin-bottom:12px}
.apropos-text p:last-child{margin-bottom:0}
.apropos-sign{margin-top:16px;font-family:var(--font-head);font-weight:600;color:var(--ink)}

/* ---------- FAQ ---------- */
.faq-list{max-width:800px;margin:0 auto;display:grid;gap:8px}
.faq-item{overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 20px;font-weight:600;color:var(--ink);font-size:.97rem}
.faq-plus{position:relative;flex:none;width:26px;height:26px;border-radius:8px;background:var(--light-alt);border:1px solid var(--light-line);transition:background .2s ease,border-color .2s ease}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;top:50%;left:50%;background:var(--accent-deep);transform:translate(-50%,-50%);transition:transform .26s var(--ease),background .2s ease}
.faq-plus::before{width:11px;height:2px;border-radius:2px}
.faq-plus::after{width:2px;height:11px;border-radius:2px}
.faq-item.is-open .faq-plus{background:var(--accent);border-color:var(--accent)}
.faq-item.is-open .faq-plus::before,.faq-item.is-open .faq-plus::after{background:#fff}
.faq-item.is-open .faq-plus::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 20px 19px;font-size:.92rem;max-width:60em}
.faq-a a{color:var(--accent-deep);font-weight:600}

/* ---------- Bandeau CTA de fin ---------- */
.cta-band{text-align:center;max-width:740px;margin:0 auto}
.cta-band h2{font-size:clamp(1.55rem,3.3vw,2.15rem);margin-bottom:.5em}
.cta-band p{font-size:1rem;margin-bottom:26px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cta-related{margin-top:38px;padding-top:26px;border-top:1px solid rgba(10,37,64,.09)}
.cta-related p{font-size:.79rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.cta-related div{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.cta-related a{background:rgba(255,255,255,.75);border:1px solid rgba(10,37,64,.09);border-radius:var(--radius-tag);padding:.4em .95em;font-size:.83rem;font-weight:500;color:var(--ink);text-decoration:none;transition:background .18s ease,transform .18s var(--ease)}
.cta-related a:hover{background:#fff;transform:translateY(-2px)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:start}
.contact-info p{margin:0 0 20px}
.contact-line{display:flex;align-items:center;gap:10px;font-size:.93rem;margin-bottom:9px}
.contact-line svg{width:17px;height:17px;stroke:var(--accent-deep);fill:none;stroke-width:2;flex:none}
.contact-line a{text-decoration:none;font-weight:600;color:var(--ink)}
.form-card{padding:26px 24px}
.form-reassure{display:flex;align-items:center;gap:.5em;font-size:.85rem;font-weight:600;color:var(--success);margin-bottom:16px}
.form-reassure svg{width:15px;height:15px;stroke:var(--success);fill:none;stroke-width:2.4;flex:none}
.form-univers{display:none;align-items:center;gap:.55em;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:var(--radius);padding:.75em 1em;font-size:.86rem;color:var(--ink);margin-bottom:16px}
.form-univers.on{display:flex}
.form-univers b{font-weight:700}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.f-field{margin-bottom:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.f-field.full{grid-column:1/-1}
.f-field label{font-size:.82rem;font-weight:600;color:var(--ink)}
.f-field input,.f-field select,.f-field textarea{border:1.5px solid var(--light-line);border-radius:11px;padding:.75em 1em;font:inherit;font-size:.93rem;background:#fff;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
.f-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' 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 .9em center;background-size:16px;padding-right:2.4em;cursor:pointer}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.f-field textarea{min-height:110px;resize:vertical}
.f-submit{width:100%;margin-top:4px}

/* ---------- Pages légales ---------- */
.legal h2{font-family:var(--font-body);font-size:1.15rem;font-weight:700;color:var(--ink);margin:34px 0 12px}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:.93rem;margin-bottom:12px;line-height:1.72}
.legal p strong{color:var(--ink)}
.legal a{color:var(--accent-deep);font-weight:600}
.legal-intro{padding:14px 18px;margin-bottom:26px;background:var(--light-alt);border-radius:var(--radius);font-size:.86rem}

/* ---------- Footer ---------- */
footer{background:var(--light-alt);border-top:1px solid var(--light-line);padding:22px 0 40px;font-size:.87rem}
.foot-breadcrumb{padding:0 0 18px;margin-bottom:24px;border-bottom:1px solid var(--light-line)}
.foot-top{display:grid;grid-template-columns:1.25fr 1.5fr 1fr 1fr;gap:30px;padding-bottom:28px;border-bottom:1px solid var(--light-line)}
.foot-logo svg{height:42px;width:auto;margin-bottom:12px}
.foot-logo svg .logo-mark{fill:var(--ink)}
.foot-logo svg .logo-dot,.foot-logo svg .logo-com{fill:var(--accent)}
.foot-col h3{font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:13px}
.foot-col ul{list-style:none;display:grid;gap:6px}
.foot-col a{color:var(--ink-soft);text-decoration:none;font-size:.85rem;transition:color .2s ease}
.foot-col a:hover{color:var(--accent-deep);text-decoration:underline}
.foot-univers ul{grid-template-columns:1fr 1fr;gap:6px 18px}
.foot-univers .soon-mini{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#a5a3b8;margin-left:.35em}
.foot-social-label{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:18px 0 10px}
.foot-social{display:flex;gap:9px}
.foot-social a{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--light-line);background:#fff;color:var(--ink);transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s var(--ease)}
.foot-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.foot-social a:nth-child(2):hover{background:#e34a80;border-color:#e34a80}
.foot-social a:nth-child(3):hover{background:#c9791a;border-color:#c9791a}
.foot-social svg{width:16px;height:16px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:20px;font-size:.76rem;color:var(--muted)}
.foot-version{opacity:.8}

/* ---------- Plan du site (Univers → Métier) ---------- */
.foot-sitemap{padding:26px 0;border-bottom:1px solid var(--light-line)}
.fs-title{font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.fs-grid{column-count:4;column-gap:28px}
.fs-group{break-inside:avoid;margin-bottom:20px}
.fs-head{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.83rem;color:var(--ink);text-decoration:none}
.fs-head:hover{color:var(--accent-deep);text-decoration:underline}
.fs-metiers{margin-top:7px;font-size:.78rem;line-height:2}
.fs-metiers a{color:var(--ink-soft);text-decoration:none;margin-right:12px;white-space:nowrap}
.fs-metiers a:hover{color:var(--accent-deep);text-decoration:underline}

/* ---------- Révélation au scroll ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-1{transition-delay:.05s} .reveal-2{transition-delay:.1s} .reveal-3{transition-delay:.15s}
.reveal-4{transition-delay:.2s} .reveal-5{transition-delay:.25s} .reveal-6{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-browser,.hero-phone{animation:none}
  .status-soon .dot,.u-flag.soon .dot{animation:none}
  .msheet.on .msheet-body > *{animation:none;opacity:1;transform:none}
  .metier-panel,.mod-panel,.faq-a{transition:none}
}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .header-in{gap:18px}
  nav{gap:2px;font-size:.87rem}
  nav > a,.nav-toggle{padding:.5em .65em}
  .account-link span{display:none}
  .config{grid-template-columns:1fr}
  .config-total{position:static}
}

@media (max-width:900px){
  .header-in > nav,.account-link{display:none}
  .burger{display:grid}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .mock-stack{display:none}
  .apropos-grid,.contact-grid,.socle-cols,.offre-grid{grid-template-columns:1fr}
  .bullets{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr;gap:26px}
  .foot-univers{grid-column:1/-1;order:3}
  .fs-grid{column-count:3}
}

@media (max-width:880px){
  .wrap,.wrap-narrow,.launch-banner-in,.soon-strip-in{padding-left:14px;padding-right:14px}
  section{padding:54px 0}
  .hero{padding:36px 0 56px}
  .cat-hero{padding-bottom:48px}
  .cat-hero-in{padding-top:20px}
  .socle{padding:24px 16px}
  .metiers-panel{padding:24px 14px}
  .offre-card{padding:18px 14px 24px}
  .offre-col{padding:20px 14px}
  .problem{padding:24px 18px 24px 22px}
  .config-panel,.config-total,.form-card{padding:20px 16px}
  .metier-inner{padding-left:18px}
  .mod-more,.mod-detail{padding-left:18px}
  .apropos-photo{max-width:280px;margin:0 auto}
  .f-grid{grid-template-columns:1fr;gap:0}
  .u-grid{grid-template-columns:1fr 1fr;gap:10px}
  .u-card{padding:14px}
  .u-card h3{font-size:.9rem}
  .u-card p{display:none}
  .u-flag{margin-bottom:8px}
  .tl-item{padding:18px 16px 18px 74px}
  .tl-num{left:14px;top:16px;width:40px;height:40px}
  .socle-price{font-size:1.85rem}
  .config-total .ct-big{font-size:2.3rem}
  .metier-btn{gap:10px;padding:14px}
  .metier-btn .mi{display:none}
  .metier-price{font-size:.74rem}
  .metier-price b{font-size:.94rem}
}

@media (max-width:600px){
  .u-grid{grid-template-columns:1fr}
  .u-card p{display:block}
  .foot-top{grid-template-columns:1fr}
  .foot-univers ul{grid-template-columns:1fr 1fr}
  .fs-grid{column-count:2}
  .launch-banner-msg{font-size:.79rem}
  .ms-univers{grid-template-columns:1fr}
  .ms-univers a{flex-direction:row;align-items:center;gap:11px}
  .ms-univers .u-ico{margin-bottom:0}
  .ms-univers .np{margin-left:auto;white-space:nowrap}
  .modele-grid{grid-template-columns:1fr}
  .modele-more{gap:8px;font-size:.82rem}
}

/* ==========================================================================
   Familles de métiers, modèles de site, portée, plan du site
   Ajoutés avec la refonte taxonomique : univers → famille → métier.
   ========================================================================== */

/* ---------- Fil d'Ariane en haut de page ---------- */
/* Le fil d'Ariane existait mais n'était rendu qu'en pied de page. En tête de
   hero il lui faut un peu d'air sous lui, sinon il colle à l'eyebrow. */
.cat-hero .breadcrumb,.hero .breadcrumb{padding:14px 0 18px}

/* ---------- Grille des familles (page univers) ---------- */
.famille-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.famille-card{padding:22px 20px 18px;display:flex;flex-direction:column}
.famille-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;text-decoration:none;margin-bottom:14px}
.famille-head b{font-family:var(--font-head);font-size:1.02rem;color:var(--ink);line-height:1.25}
.famille-head span{display:inline-flex;align-items:center;gap:.4em;font-size:.76rem;color:var(--accent-deep);font-weight:600;white-space:nowrap;flex:none}
.famille-head span svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.famille-card:hover .famille-head span svg{transform:translateX(3px)}
.famille-metiers{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}
.famille-metiers a{
  font-size:.79rem;text-decoration:none;color:var(--ink-soft);background:var(--light-alt);
  border:1px solid var(--light-line);border-radius:var(--radius-tag);padding:.34em .7em;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.famille-metiers a:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
.famille-metiers a.has-demo{border-color:var(--success);color:var(--success);background:var(--success-soft);font-weight:600}
.famille-metiers a.has-demo:hover{background:var(--success);color:#fff;border-color:var(--success)}

/* ---------- Modèles de site ---------- */
.modele-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.modele-card{display:flex;flex-direction:column;gap:8px;padding:22px 20px;text-decoration:none;color:var(--ink)}
.modele-card .modele-icon{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:2px;transition:transform .26s var(--ease)}
.modele-card .modele-icon svg{width:19px;height:19px;stroke:var(--accent-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.modele-card:hover .modele-icon{transform:scale(1.08) rotate(-4deg)}
.modele-card b{font-family:var(--font-head);font-size:1.08rem;line-height:1.2}
.modele-what{font-size:.83rem;color:var(--muted);line-height:1.5}
.modele-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.modele-meta{font-size:.74rem;color:var(--accent-deep);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.modele-price{padding-top:12px;border-top:1px solid var(--light-line);font-size:.84rem;color:var(--muted);font-variant-numeric:tabular-nums}
.modele-price b{color:var(--ink);font-weight:700}

/* Ligne « chercher par métier » sous la grille des modèles : deux chips
   cliquables plutôt que des liens soulignés perdus dans du texte plat. */
.modele-more{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;text-align:center;font-size:.86rem;color:var(--muted)}
.modele-more a{display:inline-flex;align-items:center;gap:.5em;padding:.55em 1.1em;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-deep);font-weight:600;text-decoration:none;transition:background .2s ease,transform .2s ease}
.modele-more a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.modele-more a:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}

/* ---------- Portée ---------- */
.portee-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.portee-card{display:flex;flex-direction:column;gap:9px;padding:24px 20px}
.portee-card b{font-family:var(--font-head);font-size:1.08rem;color:var(--ink)}
.portee-what{font-size:.85rem;color:var(--ink-soft);font-weight:600}
.portee-card p{font-size:.83rem;line-height:1.6;margin:0}
.portee-price{margin-top:auto;padding-top:12px;border-top:1px solid var(--light-line);font-size:.82rem;color:var(--accent-deep);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Sélecteur de portée dans le configurateur ---------- */
.config-portees{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.cportee{
  display:flex;align-items:center;gap:12px;cursor:pointer;padding:11px 14px;
  border:1.5px solid var(--light-line);border-radius:var(--radius);background:#fff;
  transition:border-color .18s ease,background .18s ease;
}
.cportee input{position:absolute;opacity:0;pointer-events:none}
.cportee:hover{border-color:var(--accent)}
.cportee.on{border-color:var(--accent);background:var(--accent-soft)}
.cp-label{display:flex;flex-direction:column;gap:1px;font-size:.83rem;color:var(--muted)}
.cp-label b{font-size:.9rem;color:var(--ink)}
.cp-price{margin-left:auto;font-size:.78rem;color:var(--accent-deep);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Module hors vague commerciale ---------- */
/* Reste lisible et compté quand le métier choisi en dépend — son prix est
   publié — mais n'est pas cochable tant que sa vague n'est pas ouverte. */
.cmod-wave{display:block;margin-top:3px;font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.cmod.out-of-wave{opacity:.62}
.cmod.out-of-wave .cbox{border-style:dashed}
.ct-modele{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted);margin-bottom:10px;display:none}
.ct-modele.on{display:block}
.ct-modele a{color:var(--accent-deep);text-decoration:none}
.ct-modele a:hover{text-decoration:underline}

/* ---------- Pied de page : univers + liens transverses ---------- */
.fs-univers{margin-top:18px;padding-top:18px;border-top:1px solid var(--light-line)}
.fs-more{margin-top:16px;font-size:.79rem;color:var(--muted)}
.fs-more a{color:var(--muted);text-decoration:none}
.fs-more a:hover{color:var(--accent-deep);text-decoration:underline}

/* ---------- Plan du site ---------- */
.pds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.pds-univers{border:1px solid var(--light-line);border-radius:var(--radius-lg);padding:20px 18px;background:#fff}
.pds-head{display:flex;align-items:center;gap:.6em;text-decoration:none;font-family:var(--font-head);font-size:1rem;color:var(--ink);margin-bottom:14px}
.pds-head span{margin-left:auto;font-family:var(--font-body);font-size:.73rem;color:var(--muted);font-weight:600;white-space:nowrap}
.pds-head:hover{color:var(--accent-deep)}
.pds-famille{margin-bottom:14px}
.pds-fam-head{display:block;font-size:.82rem;font-weight:700;color:var(--ink-soft);text-decoration:none;margin-bottom:6px}
.pds-fam-head:hover{color:var(--accent-deep)}
.pds-autres{margin-top:8px}

/* ---------- Prix en tête de page famille / modèle ---------- */
.cat-price{margin-top:14px;font-size:.92rem;color:var(--muted);font-variant-numeric:tabular-nums}
.cat-price b{color:var(--ink);font-weight:700}

/* ---------- Familles dans la feuille mobile ---------- */
.ms-familles a{flex-direction:row;align-items:center;gap:11px}
.ms-familles b{font-size:.92rem}
.ms-familles .np{margin-left:auto;white-space:nowrap;color:var(--muted);font-size:.78rem}

/* ---------- Configurateur en quatre étapes ---------- */
/* Une seule étape est visible à la fois : c'est le fil du parcours, et ça évite
   d'afficher des options dont le visiteur ne sait pas encore si elles le
   concernent. Les étapes sans objet pour le modèle choisi (portée unique,
   sur-mesure) sont neutralisées dans la barre de progression, pas retirées :
   leur disparition brutale ferait sauter la numérotation. */
.wiz-nav{
  display:flex;gap:4px;list-style:none;margin:0 0 24px;padding:0 0 16px;
  border-bottom:1px solid var(--light-line);
}
.wiz-nav li{
  flex:1;display:flex;align-items:center;gap:8px;padding:8px 6px;border-radius:var(--radius);
  font-size:.78rem;font-weight:600;color:var(--muted);cursor:pointer;
  transition:background .2s ease,color .2s ease;min-width:0;
}
.wiz-nav li:hover{background:var(--light-alt)}
.wiz-nav li b{
  width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--light-alt);border:1.5px solid var(--light-line);
  font-size:.76rem;font-weight:700;color:var(--muted);transition:all .2s ease;
}
.wiz-nav li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wiz-nav li.done b{background:var(--success-soft);border-color:var(--success);color:var(--success)}
.wiz-nav li.on{color:var(--ink)}
.wiz-nav li.on b{background:var(--accent);border-color:var(--accent);color:#fff}
.wiz-nav li.off{opacity:.35;pointer-events:none}
.wiz-nav li.off::after{content:"—";margin-left:auto;font-size:.7rem}

.wiz-step{display:none}
.wiz-step.on{display:block;animation:wizIn .28s var(--ease) both}
@keyframes wizIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wiz-step h3{
  font-family:var(--font-head);font-size:1.06rem;font-weight:600;color:var(--ink);
  text-transform:none;letter-spacing:0;margin-bottom:6px;
}
/* Dans le wizard l'indication est permanente : elle explique le choix en cours,
   elle n'est pas un message conditionnel comme ailleurs sur le site. */
.wiz-step .config-hint{display:block;color:var(--muted);font-weight:500;margin-bottom:16px}
.wiz-step .config-hint:empty{display:none}

.wiz-modeles{display:grid;gap:9px}
.cmodele{
  display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;
  padding:14px 16px;border:1.5px solid var(--light-line);border-radius:var(--radius);
  cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .18s var(--ease);
}
.cmodele:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--light-line));transform:translateX(2px)}
.cmodele.on{border-color:var(--accent);background:var(--accent-soft)}
.cmodele input{position:absolute;opacity:0;pointer-events:none}
.cm-name{font-size:.95rem;font-weight:700;color:var(--ink)}
.cm-what{grid-column:1;font-size:.79rem;color:var(--muted);line-height:1.45}
.cm-price{
  grid-row:1 / span 2;grid-column:2;font-size:.82rem;color:var(--accent-deep);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;
}
.cm-price b{font-weight:700}

/* Les options de l'étape 4 sont une simple liste à cocher : le détail de
   chaque module vit dans le catalogue plus haut sur la page, pas ici. */
.cmod-label{flex:1;min-width:0;font-size:.89rem;font-weight:600;color:var(--ink)}

.wiz-actions{
  display:flex;gap:10px;justify-content:space-between;
  margin-top:24px;padding-top:18px;border-top:1px solid var(--light-line);
}
.wiz-actions .btn{min-width:130px;justify-content:center}
.wiz-actions .btn:disabled{opacity:.4;pointer-events:none}

/* Le paiement direct pour qui est déjà décidé, le configurateur pour qui veut
   d'abord voir ce que des options changeraient au prix. */
.offre-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}

/* ---------- Méga-menu par type de site ---------- */
/* Cinq entrées descriptives au lieu de seize libellés : chacune doit dire ce
   que le modèle fait, sinon « Catalogue » ou « Vitrine » seuls ne veulent rien
   dire pour un artisan qui découvre le site. */
.nav-menu-modeles .nav-menu-grid{grid-template-columns:repeat(2,1fr);gap:6px 14px}
.nav-menu-modeles .nav-menu-grid a{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px}
.nav-menu-modeles .nw{font-size:.76rem;color:var(--muted);line-height:1.4;white-space:normal}
.nav-menu-modeles .np{font-size:.73rem;color:var(--accent-deep);font-weight:600}

@media (max-width:880px){
  .famille-grid,.modele-grid,.portee-grid{gap:10px}
  .pds-grid{gap:10px}
  .famille-card,.modele-card,.portee-card{padding-left:10px;padding-right:10px}
  .pds-univers{padding-left:10px;padding-right:10px}
  .cat-hero .breadcrumb,.hero .breadcrumb{padding:10px 0 14px}
  .cp-price{font-size:.73rem}
  .config-panel{padding-left:10px;padding-right:10px}
  /* La barre d'étapes garde ses pastilles numérotées et perd ses libellés :
     quatre intitulés côte à côte ne tiennent pas sous 880 px. */
  .wiz-nav{gap:2px}
  .wiz-nav li{flex:0 0 auto;justify-content:center;padding:8px}
  .wiz-nav li span{display:none}
  .wiz-nav li.on span{display:block}
  .wiz-actions .btn{min-width:0;flex:1}
  .cmodele{grid-template-columns:1fr;gap:4px}
  .cm-price{grid-row:auto;grid-column:1;text-align:left}
}