@charset "UTF-8";
/* ---------------------------------------------------------------------------
   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}
/* Le dégradé continu unique (blanc → #f6f5fc) sur <main> a été essayé puis
   abandonné (2026-07-29) : rendu trop terne/gris en usage réel, la portion
   visible entre héros et CTA finale n'étant qu'une tranche du dégradé complet
   plutôt qu'un 0→100% recalé sur cette zone (voir l'historique du commit).
   Retour à l'alternance franche de blocs pleins, qui donnait du contraste. */
/* Fonds pleins, pas un dégradé (deux tentatives précédentes, abandonnées) :
   .sec-tint (gris uni) pour les sections qui contiennent des blocs blancs
   (cartes, encadrés) — le gris fait ressortir le blanc du bloc — et
   .sec-white pour les sections sans bloc (texte seul), qui resteraient
   sinon indiscernables d'un fond gris. */
.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)}
.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:filter .2s 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{filter:brightness(1.06)}
.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)}
.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}
/* Simple ligne d'info sous les CTA du héros — texte plat, pas de fond ni de
   pilule, pour ne pas se confondre visuellement avec les vrais boutons
   au-dessus (.cat-hero-cta). */
.cat-hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;align-items:center;font-size:.86rem;color:var(--muted)}

/* Badges de statut */
.status-badge{display:inline-flex;align-items:center;gap:.5em;font-weight:600}
.status-badge .dot{width:7px;height:7px;border-radius:50%;flex:none}
.status-soon{color:var(--accent-deep)}
.status-soon .dot{background:var(--accent);animation:soonPulse 1.9s ease-in-out infinite}
.status-live{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:.35em;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: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{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}
.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-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}
/* Note de page (« vous ne trouvez pas votre activité ? »), pas à confondre
   avec le pied de carte ci-dessous qui partage la même classe — la règle
   plus spécifique .u-card .u-foot l'emporte pour ce second cas. */
p.u-foot{margin-top:28px;text-align:center;font-size:.88rem}
.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: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{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:#fff4e2;color:#c9791a}
.u-flag.soon .dot{background:#c9791a;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}
.tier-flag{margin-top:18px;font-size:.82rem;color:var(--muted);line-height:1.5}
.tier-flag b{color:var(--ink)}
.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:22px;padding:11px 14px;border-radius:var(--radius);font-size:.79rem;line-height:1.5;
  background:#fdf6e3;border:1px solid #eed692;border-left:3px solid #c9971e;color:#7a5c0a;
}
.mod-req + .mod-req{margin-top:10px}

/* ---------- 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}
/* ---------- Combobox recherchable (remplace les <select> natifs) ---------- */
.csel{position:relative;margin-bottom:20px}
.csel-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  font:inherit;font-size:.96rem;font-weight:600;color:var(--ink);text-align:left;
  background:#fff;border:1.5px solid var(--light-line);border-radius:var(--radius);
  padding:.85em 1em;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease;
}
.csel-btn:hover{border-color:var(--accent)}
.csel-btn[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.csel-btn:disabled{cursor:not-allowed;color:var(--muted);background:var(--light-alt)}
.csel-btn .csel-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csel-chev{width:16px;height:16px;flex:none;stroke:var(--accent);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.csel-btn[aria-expanded="true"] .csel-chev{transform:rotate(180deg)}
.csel-panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;
  background:#fff;border:1.5px solid var(--light-line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.csel-search-wrap{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--light-line)}
.csel-search-wrap svg{width:15px;height:15px;flex:none;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.csel-search{flex:1;min-width:0;border:none;font:inherit;font-size:.9rem;color:var(--ink);background:none}
.csel-search:focus{outline:none}
.csel-list{list-style:none;max-height:260px;overflow-y:auto;padding:6px}
.csel-list li[role="option"]{padding:.6em .7em;border-radius:8px;font-size:.89rem;color:var(--ink-soft);cursor:pointer}
.csel-list li[role="option"]:hover,.csel-list li[role="option"].is-active{background:var(--accent-soft);color:var(--ink)}
.csel-empty{padding:.6em .7em;font-size:.85rem;color:var(--muted);font-style:italic}
.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}
.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-label{flex:1;min-width:0;font-size:.89rem;font-weight:600;color:var(--ink)}
.cmod-price{font-size:.79rem;color:var(--accent-deep);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
/* Option pas encore construite (status !== 'built') : visible comme argument
   de vente, jamais cochable tant qu'elle n'est pas réellement livrable. */
.cmod.soon{opacity:.6}
.cmod-soon{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.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}
/* Bouton « Plus/Moins de détails » : invisible et sans effet sur bureau
   (.ct-details reste "contents", donc parfaitement transparent dans le flux) —
   seul le point de rupture mobile ci-dessous lui donne un rôle. */
.ct-toggle{display:none;width:100%;align-items:center;justify-content:center;gap:.4em;margin-top:14px;padding:.55em 0;background:none;border:none;border-top:1px solid var(--light-line);font:inherit;font-size:.82rem;font-weight:700;color:var(--accent-deep);cursor:pointer}
.ct-toggle svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.config-total.cfg-expanded .ct-toggle svg{transform:rotate(180deg)}
.ct-details{display:contents}
.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%}
.config-total #cfgLink{margin-top:10px}
.ct-pulse{animation:ctPulse .5s var(--ease)}
@keyframes ctPulse{0%{transform:scale(1)}35%{transform:scale(1.045)}100%{transform:scale(1)}}
.ct-error{margin-top:14px;font-size:.83rem;color:var(--danger,#c0392b)}
.cfg-alert{
  margin-top:14px;padding:16px 18px;border-radius:var(--radius);text-align:left;
  background:#fdf6e3;border:1px solid #eed692;border-left:3px solid #c9971e;
}
.cfg-alert-text{margin:0;font-size:.83rem;color:#7a5c0a;line-height:1.5}
.cfg-notify{margin-top:14px;display:grid;gap:8px}
.cfg-notify input[type="email"]{
  width:100%;font:inherit;font-size:.92rem;padding:.75em 1em;border:1.5px solid var(--light-line);
  border-radius:var(--radius);background:#fff;
}
.cfg-notify input[type="email"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.cfg-notify-note{font-size:.78rem;color:var(--muted)}
.cfg-notify-done{font-size:.9rem;color:var(--success);font-weight:600}

/* ---------- 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:28px auto 0;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: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{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}
.cta-related a:hover{background:#fff}

/* ---------- 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);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:70px;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}
.foot-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.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}

/* ---------- Bandeau défilant des métiers couverts ---------- */
.ticker{overflow:hidden;position:relative;padding:20px 0;background:var(--light-alt);border-top:1px solid var(--light-line);border-bottom:1px solid var(--light-line)}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--light-alt),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--light-alt),transparent)}
.ticker-track{display:flex;gap:36px;width:max-content;animation:tickerScroll 60s linear infinite}
.ticker-track span{font-family:var(--font-head);font-size:.98rem;color:var(--ink-soft);white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.ticker-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 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}
  .ticker-track{animation:none}
  .btn{transition:background .2s ease,border-color .2s ease,color .2s ease}
}
: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:680px){
  .u-grid{grid-template-columns:1fr}
  .u-card p{display:block}
  /* Logo/réseaux et « Types d'activité » gardent toute la largeur ; les
     colonnes Tillap et Informations (seules non spannées) se placent donc
     naturellement côte à côte dans les 2 pistes restantes. */
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-top > div:first-child{grid-column:1/-1}
  .foot-univers ul{grid-template-columns: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-more{gap:8px;font-size:.82rem}
  /* v6 — une ligne d'option (case + libellé + prix + badge) déborde du
     viewport en dessous de ~420px : le prix et le badge, tous deux en
     nowrap, ne laissent plus assez de place au libellé même réduit à son
     min-content. On les fait passer sous le libellé plutôt que de les
     tronquer. */
  .cmod{flex-wrap:wrap;row-gap:4px}
  .cmod-label{flex-basis:100%}
  .cmod-price,.cmod-flag{margin-left:32px}
  /* .modele-grid, .wiz-formats, .format-grid, .cformat-reco : leurs replis
     mobile sont déclarés plus bas (voir le dernier bloc @media en fin de
     fichier), APRÈS les règles de base qui les définissent sans media query
     — sinon, à spécificité égale, ce sont ces règles de base plus tardives
     dans la cascade qui gagnaient et le repli mobile ne s'appliquait jamais,
     à aucune largeur d'écran. */
}

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

/* ---------- 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}
.famille-metiers{display:flex;flex-wrap:wrap;gap:7px}
.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)}

/* Rangée icône + badge en tête de carte (modele-card, u-card) : flexbox plutôt
   que deux éléments en position absolute — un badge long (« Prochainement —
   en préparation ») passe l'icône à la ligne du dessous (wrap-reverse : la
   ligne ajoutée se place au-dessus) au lieu de la recouvrir. Les deux
   éléments sont alignés à 10px du bord de la carte dans les deux cas. */
/* align-items:flex-end (pas flex-start) : avec flex-wrap:wrap-reverse, le
   spec CSS inverse la signification de cross-start/cross-end, donc
   flex-start alignerait visuellement en bas plutôt qu'en haut. */
.card-head{display:flex;flex-wrap:wrap-reverse;align-items:flex-end;gap:10px;margin-bottom:12px}
.card-head > *{margin:0}
.card-head .u-flag{order:2;margin-left:auto;align-self:flex-end}
.card-head .modele-icon,.card-head .u-icon{order:1}
/* Marges négatives : ramène icône+badge à 10px du bord réel de la carte,
   quel que soit le padding (20px pour modele-card, 18px pour u-card) — sans
   modifier ce padding pour le reste du contenu (titre, texte, pied de carte). */
.modele-card .card-head{margin:-10px -10px 12px}
.u-card .card-head{margin:-10px -8px 12px}

/* ---------- Modèles de site ---------- */
.modele-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.modele-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;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}
.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 h3{font-family:var(--font-body);font-weight:700;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-row{margin-top:auto;padding-top:14px;border-top:1px solid var(--light-line);display:flex;align-items:center;justify-content:space-between;gap:8px}
.modele-price{font-size:.84rem;color:var(--muted);font-variant-numeric:tabular-nums}
.modele-price b{color:var(--ink);font-weight:700}
.modele-go{width:24px;height:24px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;flex:none;transition:background .2s ease}
.modele-go svg{width:12px;height:12px;stroke:var(--accent-deep);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.modele-card:hover .modele-go{background:var(--accent)}
.modele-card:hover .modele-go svg{stroke:#fff}

/* 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}
.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}

/* ---------- Portée (héritée, non utilisée par le configurateur v6 — la page
   /formules/ et .format-card ci-dessous la remplacent, gardée pour les blocs
   qui la référencent encore ailleurs) ---------- */
.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}

/* ---------- v6 : Formules (site une page / multi-pages) ---------- */
.format-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.format-card{display:flex;flex-direction:column;gap:10px;padding:30px 26px;position:relative;text-decoration:none;color:var(--ink)}
.format-card b{font-family:var(--font-head);font-size:1.3rem;color:var(--ink)}
.format-what{font-size:.88rem;color:var(--ink-soft);font-weight:600}
.format-card p{font-size:.85rem;line-height:1.65;margin:0;color:var(--muted)}
.format-price{margin-top:auto;padding-top:14px;border-top:1px solid var(--light-line);font-size:.86rem;color:var(--accent-deep);font-weight:700;font-variant-numeric:tabular-nums}
/* Prix + flèche sur une même ligne, calée en bas de carte (comme .modele-price-row) —
   nécessaire uniquement quand la carte est un lien (formules cliquables) ; les
   cartes purement informatives (tarifsPage) n'ont que .format-price, sans .format-foot. */
.format-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--light-line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.format-foot .format-price{margin-top:0;padding-top:0;border-top:none}
.format-card:hover .modele-go{background:var(--accent)}
.format-card:hover .modele-go svg{stroke:#fff}

/* Mini-maquette décorative : une colonne de barres pour le mono (une longue
   page en sections empilées), cinq onglets de hauteur inégale pour le multi
   (cinq pages distinctes). Purement CSS, aucune image à charger. */
.format-mock{display:flex;gap:5px;height:60px;margin-bottom:4px;align-items:flex-end}
.format-mock-mono{flex-direction:column;justify-content:flex-start;height:60px}
.format-mock-mono span{display:block;height:9px;border-radius:4px;background:var(--accent-soft);transition:background .2s ease}
.format-mock-mono span:nth-child(2){width:100%;background:var(--accent)}
.format-mock-mono span:nth-child(1){width:92%}
.format-mock-mono span:nth-child(3){width:78%}
.format-mock-mono span:nth-child(4){width:88%}
.format-mock-multi i{flex:1;border-radius:6px 6px 2px 2px;background:var(--accent-soft);font-style:normal;transition:background .2s ease}
.format-mock-multi i:nth-child(1){height:70%}
.format-mock-multi i:nth-child(2){height:100%;background:var(--accent)}
.format-mock-multi i:nth-child(3){height:55%}
.format-mock-multi i:nth-child(4){height:80%}
.format-mock-multi i:nth-child(5){height:45%}

/* ---------- Sélecteur de format dans le configurateur ---------- */
.wiz-formats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:4px}
.cformat{
  position:relative;display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:16px 16px 14px;
  border:1.5px solid var(--light-line);border-radius:var(--radius-lg);background:#fff;
  transition:border-color .18s ease,background .18s ease;
}
.cformat:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--light-line))}
.cformat.on{border-color:var(--accent);background:var(--accent-soft)}
.cformat input{position:absolute;opacity:0;pointer-events:none}
.cformat b{font-size:.94rem;color:var(--ink)}
.cformat .cf-what{font-size:.78rem;color:var(--muted);line-height:1.4}
.cformat .cf-price{margin-top:4px;font-size:.79rem;color:var(--accent-deep);font-weight:700;font-variant-numeric:tabular-nums}
.cformat .format-mock{height:32px;margin-bottom:2px}
.cformat-reco{
  position:absolute;top:-9px;left:12px;padding:.28em .7em;border-radius:var(--radius-pill);
  background:var(--accent);color:#fff;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;
}

/* ---------- Options du configurateur : prérequis / mention "Prochainement" ---------- */
.cmod-req{display:block;font-size:.72rem;color:var(--accent-deep);font-weight:600;margin-top:2px}
.cmod-flag{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);white-space:nowrap;margin-left:8px}
.cmod.is-custom .cmod-label{color:var(--accent-deep)}
.cmod.is-custom .cbox{border-color:var(--accent-deep)}

/* ---------- Récapitulatif de commande + capture de lead ---------- */
.cfg-recap,.cfg-lead{margin-top:22px;padding-top:20px;border-top:1px solid var(--light-line);text-align:left}
.cfg-recap-note{font-size:.76rem;color:var(--muted);line-height:1.5;margin-bottom:12px;font-style:italic}
.cfg-recap-body{
  background:var(--light-alt);border-radius:var(--radius);padding:14px 16px;font-size:.72rem;
  line-height:1.6;color:var(--ink-soft);overflow-x:auto;margin-bottom:16px;white-space:pre-wrap;word-break:break-word;
}
.cfg-inscription{display:flex;flex-direction:column;gap:10px}
.cfg-inscription h4{font-family:var(--font-head);font-size:1rem;color:var(--ink);margin-bottom:2px}
.cfg-inscription input{
  width:100%;padding:.75em .9em;border:1.5px solid var(--light-line);border-radius:var(--radius);
  font:inherit;font-size:.88rem;background:#fff;transition:border-color .15s ease;
}
.cfg-inscription input:focus{outline:none;border-color:var(--accent)}
.cfg-inscription .btn{width:100%;margin-top:4px}
.cfg-done{font-size:.85rem;color:var(--success);font-weight:600;line-height:1.6;background:var(--success-soft);padding:14px 16px;border-radius:var(--radius)}
#cfgLeadBtn{margin-top:10px}

/* ---------- 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}

.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 : liens transverses ---------- */
.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:14px 0 26px;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 colonne unique ---------- */
/* Les quatre blocs s'empilent et restent tous visibles : c'est ce qui permet
   de tout voir d'un coup d'œil. Un bloc sans choix possible pour le modèle
   choisi (portée unique, sur-mesure) reste affiché et numéroté, grisé et
   expliqué (.is-empty) — il ne disparaît jamais, sinon la numérotation 1→4
   sauterait selon le modèle. */
.cfg-block{padding-top:22px;margin-top:22px;border-top:1px solid var(--light-line)}
.cfg-block:first-child{padding-top:0;margin-top:0;border-top:none}
.cfg-block 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;
}
.cfg-block .config-hint{display:block;color:var(--muted);font-weight:500;margin-bottom:16px}
.cfg-block .config-hint:empty{display:none}
.cfg-block-empty{display:none;color:var(--muted);font-size:.85rem;font-style:italic}
.cfg-block.is-empty .config-portees,.cfg-block.is-empty .config-mods,.cfg-block.is-empty .config-note{display:none}
.cfg-block.is-empty .cfg-block-empty{display:block}

/* Étapes 2 et 3 verrouillées tant qu'aucune activité n'est choisie à l'étape 1
   — évite de composer un prix pour un métier qu'on n'a pas encore désigné. */
.cfg-block-locked{display:none;color:var(--muted);font-size:.85rem;font-style:italic}
.cfg-block.is-locked .config-hint,
.cfg-block.is-locked .wiz-formats,
.cfg-block.is-locked .config-mods,
.cfg-block.is-locked .config-note{display:none}
.cfg-block.is-locked .cfg-block-locked{display:block}

.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;
}
.cmodele:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--light-line))}
.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}

/* 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}
  .modele-card .card-head{margin-left:0;margin-right:0}
  .pds-univers{padding-left:10px;padding-right:10px}
  .cp-price{font-size:.73rem}
  .config-panel{padding-left:10px;padding-right:10px}
  .cmodele{grid-template-columns:1fr;gap:4px}
  .cm-price{grid-row:auto;grid-column:1;text-align:left}
  /* La colonne unique ne peut plus s'appuyer sur le sticky de bureau (déjà
     retiré à 1080px) : sans ce total collé en bas, le prix sortirait de
     l'écran dès qu'on déplie les blocs plus haut sur mobile. */
  .config-total{
    position:sticky;bottom:0;margin:0 -14px;border-radius:0;
    box-shadow:0 -8px 24px rgba(10,37,64,.12);z-index:5;
  }
  /* Collé en bas d'écran, le total ne doit laisser voir que le prix : le
     reste (détail, boutons, alerte, formulaires) se replie derrière
     « Plus de détails » pour ne pas manger plus de la moitié de l'écran. */
  .ct-toggle{display:flex}
  .ct-details{display:none}
  .config-total.cfg-expanded .ct-details{display:block}
  .config-total.cfg-expanded{max-height:80vh;overflow-y:auto}
}

/* Repli 1 colonne de .modele-grid/.wiz-formats/.format-grid : placé ici,
   après leurs règles de base (sans quoi, à spécificité égale, ce sont ces
   règles de base plus tardives dans la cascade qui l'emportaient et le
   repli mobile ne s'appliquait jamais). */
@media (max-width:680px){
  .modele-grid{grid-template-columns:1fr}
  .wiz-formats{grid-template-columns:1fr}
  .format-grid{grid-template-columns:1fr}
  .cformat-reco{max-width:calc(100% - 16px)}
}