@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. */
/* Dégradé propre à CHAQUE section (blanc en haut → #f6f5fc en bas, recalé sur
   sa propre hauteur, pas sur celle de la page) plutôt qu'un seul dégradé
   étiré sur tout <main> : la première tentative finissait presque
   entièrement grise sur les pages longues (la portion visible après le
   héros n'était qu'une fin de dégradé). Ce recalage section par section
   marque aussi visuellement la frontière entre deux sections consécutives
   (fin grise puis reprise blanche), l'effet recherché. .sec-white et
   .sec-tint partagent donc désormais le même fond. */
.sec-white,.sec-tint{background:linear-gradient(180deg,#fff 0%,var(--light-alt) 100%)}
/* 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-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: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)}
}