/* swm-met.css — bundle du design system de Site Web Montpellier.
 * Genere par build_css.py — NE PAS EDITER A LA MAIN.
 * Sources, dans cet ordre (l'ordre porte la cascade) :
 *   1. assets/swm-met.css        design system
 *   2. generate.py SUPPLEMENT_CSS correctifs responsive
 *   3. assets/wt-layout.css      mise en page WebTensor, avis a logos,
 *                                contexte gauche-droite, FAQ 2 colonnes,
 *                                divergence au scroll, routage hub secteur
 * Servi par wp-content/mu-plugins/swm-assets.php, mis en cache navigateur.
 * A exclure du RUCSS de WP Rocket (il a deja casse le menu mobile une fois).
 */

/* --- 1/3 design system ------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');
.swm-met{
  --lila:#3524FF; --lila-bright:#8b7dff; --dark:#160042; --grey:#6b6b7a; --lav:#f5f5f8;
  --rose:#FF2C54; --green:#00D141; --green-ok:#10b981; --star:#fbbf24; --white:#fff;
  --line:rgba(22,0,66,.10); --line-soft:rgba(22,0,66,.06);
  --lila-wash:rgba(53,36,255,.06); --lila-wash-2:rgba(53,36,255,.10);
  --green-wash:rgba(16,185,129,.10);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:24px;
  --sh-sm:0 2px 12px rgba(22,0,66,.05); --sh:0 4px 24px rgba(22,0,66,.07);
  --sh-lg:0 12px 48px rgba(22,0,66,.12); --sh-lila:0 10px 30px rgba(53,36,255,.25);
  --container:1280px; --gutter:clamp(20px,4vw,40px);
  --ease:cubic-bezier(.22,.61,.36,1); --font:'Inter Tight',sans-serif;
  font-family:var(--font); color:var(--grey); background:#fff;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.swm-met *{ box-sizing:border-box; margin:0; }
.swm-met img{ max-width:100%; display:block; }
.swm-met a{ text-decoration:none; color:inherit; }
.swm-met ul{ list-style:none; padding:0; }
.swm-met .wrap{ width:100%; max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.swm-met .sec{ padding-block:clamp(56px,7vw,96px); }
.swm-met .sec-lav{ background:var(--lav); }
.swm-met .sec-head{ text-align:center; max-width:860px; margin:0 auto clamp(34px,5vw,52px); }
.swm-met .sec-head .lead{ margin-top:16px; }
.swm-met h1,.swm-met h2,.swm-met h3{ color:var(--dark); font-weight:800; line-height:1.12; letter-spacing:-1px; text-wrap:balance; }
.swm-met .h1{ font-size:clamp(34px,4.6vw,54px); line-height:1.08; }
.swm-met .h2{ font-size:clamp(28px,3.4vw,42px); }
.swm-met .h3{ font-size:clamp(18px,1.8vw,22px); letter-spacing:-.3px; line-height:1.28; }
.swm-met .accent{ color:var(--lila); font-style:normal; }
.swm-met .lead{ font-size:clamp(16px,1.4vw,18px); color:var(--grey); }
.swm-met .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:15px; line-height:1.2; padding:15px 28px; border-radius:10px; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s; }
.swm-met .btn svg{ width:17px; height:17px; flex:none; }
.swm-met .btn-lila{ background:var(--lila); color:#fff; box-shadow:var(--sh-lila); }
.swm-met .btn-lila:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(53,36,255,.35); }
.swm-met .btn-outline{ border:2px solid var(--lila); color:var(--lila); padding:13px 26px; background:#fff; }
.swm-met .btn-outline:hover{ background:var(--lila); color:#fff; transform:translateY(-2px); }
.swm-met .btn-2l{ flex-direction:column; gap:2px; }
.swm-met .btn-2l small{ font-size:11.5px; font-weight:500; opacity:.85; }
.swm-met .card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; transition:transform .3s var(--ease),box-shadow .3s var(--ease); }
.swm-met .card:hover{ box-shadow:var(--sh-lg); }
/* Badge canon v4 — NE PAS MODIFIER */
.swm-met .swm-pill{ display:inline-flex; align-items:center; gap:10px; height:32px; background:#3524FF; color:#fff; border-radius:6px; padding:0 12px 0 15px; font-family:var(--font); font-size:16px; font-weight:600; line-height:32px; text-transform:none; letter-spacing:normal; white-space:nowrap; }
.swm-met .swm-pill::before{ content:""; width:10px; height:10px; border-radius:50%; background:#00D141; flex:none; }
.swm-met .badge-row{ display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.swm-met .badge-side{ font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--grey); }
/* Reveal SÛR (v3) — progressive enhancement strict :
   le HTML ne masque JAMAIS rien (un crawler sans JS voit tout).
   C'est le JS qui pose .pre (état masqué) sur les seuls éléments encore
   sous la ligne de flottaison, jamais dans le hero ; puis .in les révèle.
   Micro-décalages : transition-delay posé en inline par le JS (fratrie). */
/* Masquage INSTANTANE (pas de transition sur .pre : une transition posee sur
   l'etat masque cree une CSSTransition persistante — piege documente) ;
   la transition ne vit que sur l'etat revele .pre.in. */
.swm-met .rvg.pre{ opacity:0; transform:translateY(26px); }
.swm-met .rvg.pre.in{ opacity:1; transform:none; transition:opacity .7s var(--ease),transform .7s var(--ease); }
/* Le hero n'est JAMAIS masqué, même JS actif (règle du fix perf 07/2026) */
.swm-met .hero .rvg{ opacity:1!important; transform:none!important; }
@media (prefers-reduced-motion:reduce){ .swm-met .rvg,.swm-met .rvg.pre{ opacity:1!important; transform:none!important; transition:none!important; } }


/* ---------- 01 · HERO ---------- */
.swm-met .hero{ padding:clamp(120px,14vw,200px) 0 clamp(46px,6vw,72px); background:linear-gradient(175deg,#f6f5ff 0%,#fff 62%); }
.swm-met .hero-grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,4.5vw,64px); align-items:center; }
.swm-met .crumb{ font-size:13px; margin-bottom:18px; color:var(--grey); }
.swm-met .crumb a{ color:var(--lila); font-weight:600; }
.swm-met .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.swm-met .hero-assure{ margin-top:16px; font-size:13.5px; }
.swm-met .hero-assure b{ color:var(--dark); font-weight:600; }
.swm-met .trust-pill{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; background:#fff; border:1px solid var(--line-soft); border-radius:999px; padding:10px 20px 10px 12px; box-shadow:var(--sh); margin-top:22px; }
.swm-met .tp-avatars{ display:inline-flex; }
.swm-met .tp-avatars span{ width:34px; height:34px; border-radius:50%; border:2.5px solid #fff; margin-left:-10px; overflow:hidden; flex:none; }
.swm-met .tp-avatars span:first-child{ margin-left:0; }
.swm-met .tp-avatars img{ width:100%; height:100%; object-fit:cover; }
.swm-met .tp-score{ font-size:13px; line-height:1.35; }
.swm-met .tp-score .stars{ color:var(--star); letter-spacing:1.5px; }
.swm-met .tp-score b{ color:var(--dark); font-size:15px; margin-inline:4px; }
.swm-met .tp-sep{ width:1px; height:30px; background:var(--line); }
.swm-met .tp-price{ font-size:12.5px; line-height:1.4; }
.swm-met .tp-price b{ color:var(--dark); font-size:14px; }
/* SERP mock */
.swm-met .serp{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-lg); overflow:hidden; }
.swm-met .serp-bar{ display:flex; align-items:center; gap:6px; padding:11px 15px; border-bottom:1px solid var(--line-soft); background:var(--lav); }
.swm-met .serp-bar i{ width:10px; height:10px; border-radius:50%; }
.swm-met .serp-url{ margin-left:8px; font-size:11.5px; color:var(--grey); background:#fff; border:1px solid var(--line-soft); border-radius:999px; padding:3px 12px; overflow-wrap:anywhere; }
.swm-met .serp-body{ padding:18px 20px 22px; }
.swm-met .serp-input{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:999px; padding:10px 16px; font-size:14px; color:var(--dark); box-shadow:var(--sh-sm); margin-bottom:16px; }
.swm-met .serp-input svg{ width:16px; height:16px; color:var(--lila); flex:none; }
.swm-met .serp-res{ border:1px solid var(--line-soft); border-radius:var(--r); padding:13px 16px; margin-bottom:10px; }
.swm-met .serp-res .url{ font-size:11.5px; color:var(--green-ok); }
.swm-met .serp-res .tt{ font-size:15px; font-weight:700; color:#1a0dab; margin:2px 0; }
.swm-met .serp-res .ds{ font-size:12.5px; }
.swm-met .serp-res.you{ position:relative; border:2px solid var(--lila); background:var(--lila-wash); }
.swm-met .serp-you-badge{ position:absolute; top:-11px; right:12px; background:var(--lila); color:#fff; font-size:10.5px; font-weight:700; border-radius:999px; padding:3px 10px; }
.swm-met .serp-res.lose{ opacity:.55; filter:grayscale(.4); }
.swm-met .serp-cap{ font-size:12.5px; text-align:center; margin-top:12px; }
/* ---------- 02 · STATS LOCALES ---------- */
.swm-met .statsband{ background:var(--lav); border-block:1px solid var(--line-soft); padding-block:clamp(26px,3.5vw,40px); }
.swm-met .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center; }
.swm-met .stat b{ display:block; font-size:clamp(26px,3vw,40px); font-weight:800; letter-spacing:-1px; white-space:nowrap; font-variant-numeric:tabular-nums; background:linear-gradient(90deg,var(--lila),var(--lila-bright)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.swm-met .stat span{ font-size:12.5px; font-weight:600; }
.swm-met .stat{ min-width:0; }
.swm-met .stats-src{ text-align:center; font-size:11.5px; margin-top:14px; opacity:.75; }
/* ---------- 03 · MARCHÉ ---------- */
.swm-met .mk-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:start; }
.swm-met .mk-copy p{ margin-bottom:16px; }
.swm-met .mk-copy strong{ color:var(--dark); }
.swm-met .mk-cards{ display:grid; gap:14px; }
.swm-met .mk-card{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--lila); border-radius:var(--r); padding:18px 20px; box-shadow:var(--sh-sm); }
.swm-met .mk-card b{ display:block; color:var(--dark); font-size:15px; margin-bottom:4px; }
.swm-met .mk-card p{ font-size:13.5px; margin:0; }
/* ---------- 03 · RÉALISATIONS (preuve visuelle) ---------- */
.swm-met .pf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.swm-met .pf-card{ display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:transform .3s var(--ease),box-shadow .3s var(--ease); }
.swm-met .pf-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.swm-met .pf-shot{ display:block; position:relative; aspect-ratio:16/10.5; overflow:hidden; background:var(--lav); }
.swm-met .pf-shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform 2.8s var(--ease); }
.swm-met .pf-card:hover .pf-shot img{ transform:scale(1.045); }
.swm-met .pf-meta{ display:block; padding:15px 18px 17px; }
.swm-met .pf-meta b{ display:block; color:var(--dark); font-size:16px; }
.swm-met .pf-loc{ display:block; font-size:12.5px; color:var(--grey); margin-top:3px; }
.swm-met .pf-res{ display:inline-block; margin-top:10px; margin-right:6px; font-size:12.5px; font-weight:700; color:var(--green-ok); background:var(--green-wash); border-radius:6px; padding:4px 10px; }
.swm-met .pf-tag{ display:inline-block; margin-top:10px; font-size:12px; font-weight:600; color:var(--lila); background:var(--lila-wash); border-radius:6px; padding:4px 10px; }
/* Marquee de captures — défilement infini pur CSS */
.swm-met .pf-mq{ overflow:hidden; margin-top:28px; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.swm-met .pf-mq-track{ display:flex; gap:14px; width:max-content; animation:swm-mq 36s linear infinite; }
.swm-met .pf-mq:hover .pf-mq-track{ animation-play-state:paused; }
.swm-met .pf-mq img{ width:170px; aspect-ratio:16/10; object-fit:cover; object-position:top center; border-radius:10px; border:1px solid var(--line); box-shadow:var(--sh-sm); }
@keyframes swm-mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.swm-met .pf-more{ font-size:13px; font-weight:700; color:var(--lila); background:var(--lila-wash); border-radius:999px; padding:8px 16px; white-space:nowrap; }
/* ---------- 01b · PREUVE SOCIALE — marquee réalisations sous le hero (v2) ----------
   100 % CSS (translateX + piste dupliquée), pause au hover, statique en
   prefers-reduced-motion. Tokens existants uniquement. */
.swm-met .sp-band{ padding-block:clamp(26px,3.5vw,42px); background:#fff; border-block:1px solid var(--line-soft); overflow:hidden; }
.swm-met .sp-cap{ text-align:center; font-size:13.5px; color:var(--grey); margin-bottom:18px; padding-inline:var(--gutter); }
.swm-met .sp-cap b{ color:var(--dark); font-weight:700; }
.swm-met .sp-mq{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.swm-met .sp-track{ display:flex; gap:16px; width:max-content; animation:swm-sp-mq 40s linear infinite; }
.swm-met .sp-mq:hover .sp-track{ animation-play-state:paused; }
.swm-met .sp-grp{ display:flex; gap:16px; flex:none; }
.swm-met .sp-grp a{ display:block; flex:none; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-sm); transition:transform .3s var(--ease),box-shadow .3s var(--ease); }
.swm-met .sp-grp a:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.swm-met .sp-grp img{ width:190px; aspect-ratio:16/10; object-fit:cover; object-position:top center; display:block; }
@keyframes swm-sp-mq{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion:reduce){ .swm-met .sp-track{ animation:none!important; } .swm-met .sp-mq{ -webkit-mask-image:none; mask-image:none; } }
/* gap FIXE à 16px sur tous les écrans : le décalage de boucle (-50% - 8px) en dépend */
@media (max-width:700px){ .swm-met .sp-grp img{ width:138px; } }
/* Badge SERP flottant + curseur de frappe */
@keyframes swm-float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } }
.swm-met .serp-you-badge{ animation:swm-float 3.2s ease-in-out infinite; }
.swm-met #serp-kw::after{ content:"|"; color:var(--lila); font-weight:400; margin-left:1px; animation:swm-caret 1s steps(1) infinite; }
@keyframes swm-caret{ 50%{ opacity:0; } }
/* ---------- Panneau savoir-faire : mur d'aperçus 3D animé (copie pages service) ---------- */
.swm-met .savoir{ padding-block:clamp(40px,5vw,64px); }
.swm-met .savoir-panel{ position:relative; overflow:hidden; border-radius:32px; padding:clamp(36px,5vw,68px); background:linear-gradient(135deg,#3524FF 0%,#2a1bd6 52%,#160042 100%); display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,56px); align-items:center; box-shadow:0 30px 80px rgba(22,0,66,.30); }
.swm-met .savoir-panel::before{ content:""; position:absolute; left:-10%; top:-30%; width:60%; height:140%; background:radial-gradient(circle,rgba(255,255,255,.12),transparent 60%); pointer-events:none; }
.swm-met .savoir-panel>*{ min-width:0; }
.swm-met .savoir-left{ position:relative; z-index:1; color:#fff; }
.swm-met .savoir-pill{ display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); color:#fff; padding:8px 17px; border-radius:6px; font-size:14px; font-weight:600; margin-bottom:20px; }
.swm-met .savoir-pill::before{ content:""; width:8px; height:8px; border-radius:50%; background:#34E29B; box-shadow:0 0 0 0 rgba(52,226,155,.7); animation:swmPulseDot 1.8s infinite; }
@keyframes swmPulseDot{ 0%{ box-shadow:0 0 0 0 rgba(52,226,155,.7); } 70%{ box-shadow:0 0 0 9px rgba(52,226,155,0); } 100%{ box-shadow:0 0 0 0 rgba(52,226,155,0); } }
.swm-met .savoir-left h2{ color:#fff; font-size:clamp(28px,3.2vw,42px); font-weight:800; line-height:1.1; letter-spacing:-1px; margin-bottom:16px; }
.swm-met .savoir-left h2 span{ color:#bcb0ff; }
.swm-met .savoir-left p{ color:rgba(255,255,255,.82); font-size:15.5px; line-height:1.65; margin-bottom:26px; max-width:480px; }
.swm-met .savoir-cta{ display:inline-flex; align-items:center; gap:14px; background:#fff; border-radius:100px; padding:8px 26px 8px 8px; box-shadow:0 16px 40px rgba(0,0,0,.28); transition:transform .25s,box-shadow .25s; }
.swm-met .savoir-cta:hover{ transform:translateY(-2px); box-shadow:0 22px 50px rgba(0,0,0,.36); }
.swm-met .savoir-cta img{ width:54px; height:54px; border-radius:50%; object-fit:cover; flex:none; }
.swm-met .savoir-cta b{ display:block; color:#3524FF; font-size:15px; font-weight:700; line-height:1.2; }
.swm-met .savoir-cta small{ display:block; color:#6b6b7a; font-size:12px; font-weight:500; overflow-wrap:anywhere; }
.swm-met .savoir-stars{ margin-top:18px; font-size:13.5px; color:rgba(255,255,255,.85); }
.swm-met .savoir-stars b{ color:#fff; }
.swm-met .savoir-stars .s{ color:#fbbf24; letter-spacing:1px; margin-right:8px; }
.swm-met .savoir-wall{ position:relative; z-index:1; height:460px; overflow:hidden; perspective:1600px; }
.swm-met .savoir-stage{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotateX(8deg) rotateY(-17deg) rotateZ(-3deg); transform-style:preserve-3d; display:flex; gap:16px; }
.swm-met .savoir-col{ display:flex; flex-direction:column; gap:16px; width:152px; }
.swm-met .savoir-col.up{ animation:savoirUp 30s linear infinite; }
.swm-met .savoir-col.down{ animation:savoirDown 34s linear infinite; }
.swm-met .savoir-col img{ width:100%; border-radius:12px; display:block; box-shadow:0 18px 40px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.12); }
@keyframes savoirUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes savoirDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
.swm-met .savoir-wall::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom,#241596 0%,rgba(36,21,150,0) 15%,rgba(36,21,150,0) 85%,#241596 100%); }
@media (prefers-reduced-motion:reduce){ .swm-met .savoir-col,.swm-met .pf-mq-track,.swm-met .serp-you-badge,.swm-met .savoir-pill::before{ animation:none!important; } }
.swm-met .pv-note{ text-align:center; font-size:13px; margin-top:22px; }
.swm-met .pv-note a{ color:var(--lila); font-weight:700; }
/* ---------- 05 · SECTEURS ---------- */
.swm-met .st-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.swm-met .st-card .emo{ font-size:26px; }
.swm-met .st-card b.t{ display:block; color:var(--dark); font-size:17px; margin:10px 0 2px; }
.swm-met .st-card .who{ font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--lila); }
.swm-met .st-card p{ font-size:14px; margin-top:10px; }
.swm-met .st-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.swm-met .st-links a{ font-size:12.5px; font-weight:700; color:var(--lila); background:var(--lila-wash); border:1px solid transparent; border-radius:999px; padding:6px 13px; transition:.2s; }
.swm-met .st-links a:hover{ border-color:var(--lila); background:#fff; }
/* ---------- 06 · OFFRE ---------- */
.swm-met .svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.swm-met .svc-ico{ width:52px; height:52px; border-radius:14px; background:var(--lila); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.swm-met .svc-ico svg{ width:26px; height:26px; stroke:#fff; }
.swm-met .svc b.t{ display:block; color:var(--dark); font-size:18px; }
.swm-met .svc>p{ font-size:14px; margin:8px 0 14px; }
.swm-met .svc-acc{ border-top:1px solid var(--line-soft); }
.swm-met .svc-acc summary{ display:flex; justify-content:space-between; align-items:center; gap:10px; cursor:pointer; list-style:none; font-size:13.5px; font-weight:700; color:var(--dark); padding:11px 2px; text-transform:none; white-space:normal; }
.swm-met .svc-acc summary::-webkit-details-marker{ display:none; }
.swm-met .svc-acc summary::after{ content:"+"; font-size:17px; color:var(--lila); font-weight:600; flex:none; transition:transform .25s; }
.swm-met .svc-acc[open] summary::after{ transform:rotate(45deg); }
.swm-met .svc-acc div{ font-size:13.5px; padding:0 2px 13px; }
.swm-met .svc-more{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:var(--lila); margin-top:13px; }
.swm-met .svc-more:hover{ text-decoration:underline; }
.swm-met .svc-mini{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:18px; }
.swm-met .svc-mini a{ display:flex; align-items:center; gap:12px; background:#fff; border:1px dashed var(--line); border-radius:var(--r); padding:15px 18px; font-size:14px; font-weight:600; color:var(--dark); transition:.2s; }
.swm-met .svc-mini a:hover{ border-color:var(--lila); box-shadow:var(--sh-sm); }
/* ---------- 00 · BANDEAU PROMO (1 place + offre datée, auto-extinction) ---------- */
.swm-met .promo-band{ background:linear-gradient(90deg,#160042,#2a1bd6); color:#fff; font-size:13.5px; line-height:1.45; padding:10px 18px; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; text-align:center; }
/* respecter l'attribut hidden : sinon le display:flex ci-dessus force l'affichage même promo désactivée (piège vécu 17/07) */
.swm-met .promo-band[hidden]{ display:none!important; }
/* Site réel : le header WP flotte par-dessus — on dégage le bandeau (le body WP porte une classe page-id ; l'aperçu autonome n'est pas affecté) */
body[class*="page-id"] .swm-met .promo-band{ padding-top:112px; }
@media (min-width:701px){ body[class*="page-id"] .swm-met .promo-band{ padding-top:124px; } }
/* Le bandeau dégage déjà le header → le hero n'a plus besoin de son grand padding-top (sinon gros vide bandeau↔hero). Fix marge signalée 17/07. */
body[class*="page-id"] .swm-met .hero{ padding-top:clamp(28px,3.5vw,46px); }
/* Filet : promo expirée → bandeau masqué (attribut hidden) → le hero reprend le dégagement du header. */
body[class*="page-id"] #swm-promo-band[hidden] ~ .hero{ padding-top:clamp(104px,13vw,120px); }
.swm-met .promo-band b{ font-weight:700; color:#fff; }
.swm-met .pb-dot{ width:8px; height:8px; border-radius:50%; background:#34E29B; box-shadow:0 0 0 0 rgba(52,226,155,.7); animation:swmPulseDot 1.8s infinite; flex:none; }
.swm-met .pb-cnt{ font-variant-numeric:tabular-nums; font-weight:800; color:#bcb0ff; white-space:nowrap; }
.swm-met .pb-cta{ color:#fff!important; font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
@media (max-width:700px){ .swm-met .pb-cnt{ display:none; } }
/* ---------- Popup exit-intent (desktop uniquement, 1×/session) ---------- */
.swm-met .exitpop{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(22,0,66,.45); backdrop-filter:blur(4px); opacity:0; transition:opacity .28s; }
.swm-met .exitpop.on{ opacity:1; }
.swm-met .exitpop[hidden]{ display:none; }
.swm-met .ep-card{ position:relative; background:#fff; border-radius:20px; max-width:530px; width:100%; padding:36px 34px 30px; box-shadow:0 40px 90px rgba(22,0,66,.4); transform:translateY(16px); transition:transform .28s var(--ease); }
.swm-met .exitpop.on .ep-card{ transform:none; }
.swm-met .ep-close{ position:absolute; top:14px; right:16px; font-size:22px; line-height:1; color:var(--grey); background:none; border:none; cursor:pointer; padding:6px; }
.swm-met .ep-close:hover{ color:var(--dark); }
.swm-met .ep-card h3{ font-size:clamp(20px,2vw,25px); margin:14px 0 10px; }
.swm-met .ep-card p{ font-size:14.5px; margin-bottom:10px; }
.swm-met .ep-card .ep-offre{ background:var(--lila-wash); border:1px solid var(--lila-wash-2); border-radius:12px; padding:13px 16px; font-size:14px; color:var(--dark); margin:14px 0 18px; }
.swm-met .ep-card .ep-offre b{ color:var(--lila); }
.swm-met .ep-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.swm-met .ep-nope{ font-size:13px; color:var(--grey); text-decoration:underline; text-underline-offset:3px; cursor:pointer; background:none; border:none; }
/* ---------- 05b · EXCLUSIVITÉ (offre Hormozi : 1 métier = 1 client) ---------- */
.swm-met .excl-panel{ position:relative; background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#3524ff 20%,#ff2c54) border-box; border:2px solid transparent; border-radius:20px; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,4vw,52px); align-items:center; padding:clamp(28px,4.5vw,56px); }
.swm-met .excl-panel::before{ content:""; position:absolute; inset:0; border-radius:20px; background:linear-gradient(90deg,rgba(53,36,255,.5),rgba(255,44,84,.5)); filter:blur(35px); opacity:.18; z-index:-1; }
.swm-met .excl-copy h2{ margin:14px 0 14px; }
.swm-met .excl-copy p{ margin-bottom:14px; }
.swm-met .excl-copy strong{ color:var(--dark); }
.swm-met .excl-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.swm-met .excl-slot{ position:relative; background:linear-gradient(150deg,#1d0a55,#160042); color:#fff; border-radius:18px; padding:clamp(24px,3vw,34px); box-shadow:0 24px 60px rgba(22,0,66,.35); overflow:hidden; }
.swm-met .excl-slot::after{ content:""; position:absolute; right:-30%; top:-40%; width:80%; height:120%; background:radial-gradient(circle,rgba(53,36,255,.5),transparent 65%); pointer-events:none; }
.swm-met .excl-slot .sl-l{ font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#bcb0ff; }
.swm-met .excl-slot .m{ display:block; font-size:clamp(26px,2.8vw,36px); font-weight:800; letter-spacing:-1px; margin:8px 0 10px; min-height:1.2em; transition:opacity .35s var(--ease); }
.swm-met .excl-slot .m.sw{ opacity:0; }
.swm-met .excl-free{ display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:#34E29B; }
.swm-met .excl-free i{ width:9px; height:9px; border-radius:50%; background:#34E29B; box-shadow:0 0 0 0 rgba(52,226,155,.7); animation:swmPulseDot 1.8s infinite; }
.swm-met .excl-slot .sl-note{ display:block; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.14); font-size:13px; color:rgba(255,255,255,.75); }
/* ---------- 07 · TARIFS + stack & garanties ---------- */
.swm-met .pri-inc{ margin-top:14px; border-top:1px solid var(--line-soft); padding-top:12px; }
.swm-met .pri-inc li{ position:relative; padding-left:24px; font-size:13px; color:var(--grey); margin-bottom:7px; }
.swm-met .pri-inc li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--green-ok); font-weight:800; }
.swm-met .pri-inc li b{ color:var(--dark); font-weight:700; }
.swm-met .gar-strip{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:24px; }
.swm-met .gar-strip .gt{ font-size:13.5px; font-weight:800; color:var(--dark); }
.swm-met .gar-strip span:not(.gt){ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--dark); background:var(--green-wash); border:1px solid rgba(16,185,129,.25); border-radius:999px; padding:7px 14px; }

.swm-met .pri-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.swm-met .pri b.p{ display:block; font-size:clamp(26px,2.6vw,34px); font-weight:800; color:var(--dark); letter-spacing:-1px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.swm-met .pri b.p small{ font-size:13px; font-weight:600; color:var(--grey); letter-spacing:0; }
.swm-met .pri .n{ font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--lila); }
.swm-met .pri p{ font-size:13.5px; margin-top:8px; }
.swm-met .pri.hot{ border:2px solid var(--lila); position:relative; }
.swm-met .pri-note{ text-align:center; font-size:13px; margin-top:20px; }
.swm-met .pri-note a{ color:var(--lila); font-weight:700; }
/* ---------- 08 · AVIS ---------- */
.swm-met .rev-band{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.swm-met .rev-note{ text-align:center; }
.swm-met .rev-note b{ font-size:clamp(34px,4vw,48px); font-weight:800; color:var(--dark); letter-spacing:-2px; }
.swm-met .rev-note .stars{ display:block; color:var(--star); font-size:19px; letter-spacing:2px; }
.swm-met .rev-note span{ font-size:12.5px; }
.swm-met .rev-quotes{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:760px; }
.swm-met .rev-q{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; font-size:13.5px; font-style:italic; }
.swm-met .rev-q b{ display:block; font-style:normal; font-size:12.5px; color:var(--dark); margin-top:10px; }
/* ---------- 09 · FAQ ---------- */
.swm-met .faq{ max-width:820px; margin:0 auto; }
.swm-met .faq details{ background:#fff; border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px; overflow:hidden; }
.swm-met .faq summary{ display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; list-style:none; padding:17px 20px; font-weight:700; color:var(--dark); font-size:15.5px; text-transform:none; white-space:normal; }
.swm-met .faq summary::-webkit-details-marker{ display:none; }
.swm-met .faq summary::after{ content:"+"; font-size:20px; color:var(--lila); flex:none; transition:transform .25s; }
.swm-met .faq details[open] summary::after{ transform:rotate(45deg); }
.swm-met .faq .a{ padding:0 20px 17px; font-size:14.5px; }
/* ---------- 10 · GRAPPE ---------- */
.swm-met .geo{ text-align:center; }
.swm-met .geo-links{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:20px; }
.swm-met .geo-links a{ font-size:13.5px; font-weight:700; color:var(--dark); background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 17px; transition:.2s; }
.swm-met .geo-links a:hover{ border-color:var(--lila); color:var(--lila); transform:translateY(-2px); }
.swm-met .geo-links a.pil{ background:var(--lila); border-color:var(--lila); color:#fff; }
/* ---------- 11 · BOOKING ---------- */
.swm-met .book{ background:var(--lav); border-top:1px solid var(--line-soft); text-align:center; }
.swm-met .book-per{ display:inline-flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 22px 9px 10px; box-shadow:var(--sh); margin:18px 0 26px; text-align:left; }
.swm-met .book-per img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.swm-met .book-per b{ display:block; color:var(--dark); font-size:14px; }
.swm-met .book-per span{ font-size:12.5px; }
.swm-met #swm-cal{ min-height:560px; max-width:1040px; margin:0 auto; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--sh-lg); }
.swm-met .book-alt{ margin-top:18px; font-size:14px; }
.swm-met .book-alt a{ color:var(--lila); font-weight:700; }
/* ---------- Diagnostic 60 s (porté des pages service) ---------- */
.swm-met .diag-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,56px); max-width:1100px; margin:0 auto; align-items:center; }
.swm-met .diag-grid>*{ min-width:0; }
.swm-met .diag-side h2{ margin-bottom:16px; }
.swm-met .diag-side .lead{ margin-bottom:18px; }
.swm-met .diag-side ul{ display:flex; flex-direction:column; gap:10px; }
.swm-met .diag-side li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--grey); }
.swm-met .diag-side li::before{ content:"✓"; color:var(--green-ok); font-weight:800; flex:none; }
.swm-met .diag-card{ background:#fff; border-radius:22px; box-shadow:0 30px 70px rgba(22,0,66,.16); border:1px solid var(--line-soft); padding:32px; max-width:560px; width:100%; }
.swm-met .diag-prog{ height:6px; background:var(--lav); border-radius:99px; overflow:hidden; margin-bottom:22px; }
.swm-met .diag-prog i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lila),var(--lila-bright)); border-radius:99px; transition:width .35s var(--ease); }
.swm-met .diag-q{ font-size:17px; font-weight:700; color:var(--dark); margin-bottom:18px; min-height:48px; }
.swm-met .diag-opts{ display:flex; flex-direction:column; gap:10px; }
.swm-met .diag-opts button{ cursor:pointer; text-align:left; border:1.5px solid #e6e6ee; border-radius:12px; padding:13px 16px; font-size:14.5px; font-weight:600; color:var(--dark); background:#fff; transition:all .2s; }
.swm-met .diag-opts button:hover{ background:var(--lila); border-color:var(--lila); color:#fff; transform:translateX(3px); }
.swm-met .diag-result{ display:none; text-align:center; }
.swm-met .diag-score{ font-size:62px; font-weight:800; letter-spacing:-2px; line-height:1; margin-bottom:6px; }
.swm-met .diag-score small{ font-size:22px; color:var(--grey); font-weight:600; }
.swm-met .diag-verdict{ font-size:16px; font-weight:700; margin-bottom:8px; }
.swm-met .diag-explain{ font-size:14px; color:var(--grey); margin-bottom:22px; }
.swm-met .diag-result .btn{ width:100%; margin-bottom:10px; }
.swm-met .diag-retry{ font-size:13px; font-weight:600; color:var(--grey); cursor:pointer; background:none; border:none; }
.swm-met .diag-retry:hover{ color:var(--lila); }
/* ---------- Pastille fondateur (hero) ---------- */
.swm-met .founder-chip{ display:inline-flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--line-soft); border-radius:999px; padding:7px 18px 7px 8px; box-shadow:var(--sh-sm); margin-top:14px; }
.swm-met .founder-chip img{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; }
.swm-met .founder-chip b{ display:block; color:var(--dark); font-size:13.5px; line-height:1.25; }
.swm-met .founder-chip span span{ display:block; font-size:12px; color:var(--grey); }
/* ---------- Barre sticky mobile (apparaît après scroll) ---------- */
.swm-met .mob-bar{ position:fixed; left:0; right:0; bottom:0; z-index:950; display:none; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-top:1px solid var(--line); box-shadow:0 -8px 30px rgba(22,0,66,.12); transform:translateY(110%); transition:transform .3s var(--ease); }
.swm-met .mob-bar.on{ transform:none; }
.swm-met .mob-bar a{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:15.5px; padding:15px 10px; border-radius:12px; white-space:nowrap; min-height:52px; }
.swm-met .mob-bar .mb-tel{ border:2px solid var(--lila); color:var(--lila); background:#fff; }
.swm-met .mob-bar .mb-cta{ background:var(--lila); color:#fff; box-shadow:var(--sh-lila); }
.swm-met .mb-short{ display:none; }
@media (max-width:700px){ .swm-met .mob-bar{ display:flex; } }
@media (max-width:400px){
  /* écrans étroits : libellés courts, boutons toujours confortables */
  .swm-met .mb-full{ display:none; }
  .swm-met .mb-short{ display:inline; }
}
/* Sur le site réel : masquer le bouton d'appel flottant global (.swm-callfab) sur les pages villes quand la barre est présente — sinon doublon bas d'écran. */
/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .swm-met .hero-grid{ grid-template-columns:1fr; }
  .swm-met .hero-vis{ max-width:560px; }
  .swm-met .mk-grid{ grid-template-columns:1fr; }
  .swm-met .pv-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1024px){
  .swm-met .pf-grid{ grid-template-columns:1fr 1fr; }
  .swm-met .savoir-panel{ grid-template-columns:1fr; }
  .swm-met .savoir-wall{ height:340px; }
  .swm-met .excl-panel{ grid-template-columns:1fr; }
  .swm-met .diag-grid{ grid-template-columns:1fr; }
  .swm-met .diag-card{ max-width:100%; }
}
@media (max-width:700px){
  .swm-met .st-grid,.swm-met .svc-grid,.swm-met .svc-mini,.swm-met .pri-grid,.swm-met .rev-quotes,.swm-met .pf-grid{ grid-template-columns:1fr; }
  .swm-met .hero{ padding-top:130px; }
  .swm-met .pf-mq img{ width:128px; }
}
@media (max-width:640px){
  /* mur savoir-faire : grille statique 2×2 sur mobile (le 3D ne tient pas) */
  .swm-met .savoir-panel{ padding:30px 20px; }
  .swm-met .savoir-wall{ height:auto; perspective:none; margin-top:22px; overflow:visible; }
  .swm-met .savoir-stage{ position:static; transform:none!important; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .swm-met .savoir-col{ display:contents; }
  .swm-met .savoir-col.up,.swm-met .savoir-col.down{ animation:none!important; }
  .swm-met .savoir-col img{ box-shadow:0 10px 24px rgba(0,0,0,.35); }
  .swm-met .savoir-col img:nth-child(n+3){ display:none; }
  .swm-met .savoir-wall::after{ display:none; }
}
@media (max-width:600px){
  .swm-met .stats-grid{ grid-template-columns:repeat(2,1fr); row-gap:22px; }
  .swm-met .tp-sep{ display:none; }
}
.swm-met .stat b,.swm-met .pri b.p{ min-width:0; }

/* ================================================================
   v3 — alignement sur le pilier « référencement seo montpellier »
   (composants repris du live, tokens existants uniquement)
   ================================================================ */
/* --- Badge Google avis : fond dégradé bleu-violet (demande Noham v3),
       posé APRÈS les règles de base pour l'emporter à spécificité égale --- */
.swm-met .trust-pill{ background:linear-gradient(135deg,#3524FF 0%,#2a1bd6 55%,#160042 100%); border:1px solid rgba(255,255,255,.18); box-shadow:0 12px 32px rgba(53,36,255,.35); }
.swm-met .tp-avatars span{ border-color:rgba(255,255,255,.92); }
.swm-met .tp-score{ color:rgba(255,255,255,.85); }
.swm-met .tp-score b{ color:#fff; }
.swm-met .tp-score span{ color:rgba(255,255,255,.85); }
.swm-met .tp-sep{ background:rgba(255,255,255,.28); }
.swm-met .tp-price{ color:rgba(255,255,255,.85); }
.swm-met .tp-price b{ color:#fff; }
/* --- Réassurance — bandeaux logos clients (repris du pilier / accueil) --- */
.swm-met .reassure{ background:#fff; border-block:1px solid var(--line-soft); padding-block:clamp(40px,5vw,64px); }
.swm-met .reassure-bandeaux{ display:flex; flex-direction:column; gap:10px; max-width:1080px; margin:0 auto; background:#f3f3f3; border-radius:16px; padding:20px 26px; }
.swm-met .reassure-bandeaux img{ width:100%; height:auto; display:block; border-radius:10px; }
@media (max-width:640px){ .swm-met .reassure-bandeaux{ padding:14px 16px; gap:8px; } }
/* --- Mid-CTA : panneau dégradé bleu-violet (cassure visuelle, pilier) --- */
.swm-met .midcta{ position:relative; overflow:hidden; }
.swm-met .midcta-panel{ position:relative; background:linear-gradient(135deg,#3524FF 0%,#2a1bd6 55%,#160042 100%); border-radius:28px; padding:clamp(40px,5vw,64px); text-align:center; box-shadow:0 30px 80px rgba(22,0,66,.28); overflow:hidden; color:#fff; }
.swm-met .midcta-panel::before{ content:""; position:absolute; left:50%; top:-40%; width:70%; height:160%; transform:translateX(-50%); background:radial-gradient(circle,rgba(255,255,255,.14),transparent 60%); pointer-events:none; }
.swm-met .midcta-pill{ display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); color:#fff; padding:8px 17px; border-radius:6px; font-size:14px; font-weight:600; margin-bottom:20px; }
.swm-met .midcta-pill::before{ content:""; width:9px; height:9px; border-radius:50%; background:#34E29B; }
.swm-met .midcta-panel h2{ position:relative; color:#fff; font-size:clamp(26px,3.2vw,40px); font-weight:800; line-height:1.12; letter-spacing:-1px; margin-bottom:16px; }
.swm-met .midcta-panel h2 span{ color:#bcb0ff; }
.swm-met .midcta-panel p{ position:relative; color:rgba(255,255,255,.82); font-size:16px; max-width:600px; margin:0 auto 28px; line-height:1.6; }
.swm-met .midcta-row{ position:relative; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; }
.swm-met .midcta-trust{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-size:14px; }
.swm-met .midcta-trust .av{ display:flex; }
.swm-met .midcta-trust .av span{ width:30px; height:30px; border-radius:50%; border:2px solid #2a1bd6; margin-left:-9px; overflow:hidden; flex:none; }
.swm-met .midcta-trust .av span:first-child{ margin-left:0; }
.swm-met .midcta-trust .av img{ width:100%; height:100%; object-fit:cover; }
.swm-met .midcta-trust b{ font-weight:800; }
@media (max-width:700px){ .swm-met .midcta-row{ flex-direction:column; } .swm-met .midcta-row .btn{ width:100%; } }
/* --- Conversion (#Contact) : passe en bloc violet sombre façon .final du pilier --- */
.swm-met .book{ position:relative; background:var(--dark); border-top:none; overflow:hidden; color:rgba(255,255,255,.85); }
.swm-met .book::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:700px; height:700px; border-radius:50%; background:radial-gradient(circle,rgba(53,36,255,.45),transparent 65%); pointer-events:none; }
.swm-met .book .wrap{ position:relative; z-index:1; }
.swm-met .book .h2{ color:#fff; }
.swm-met .book .h2 .accent{ color:#a8a0ff; }
.swm-met .book .lead{ color:rgba(255,255,255,.75); }
.swm-met .book .btn-lila{ background:#fff; color:var(--lila); box-shadow:0 10px 30px rgba(0,0,0,.25); }
.swm-met .book .btn-lila:hover{ box-shadow:0 16px 40px rgba(0,0,0,.35); }
.swm-met .book .btn-outline{ border-color:#fff; color:#fff; background:transparent; }
.swm-met .book .btn-outline:hover{ background:#fff; color:var(--lila); }
.swm-met .book-alt{ color:rgba(255,255,255,.75); }
.swm-met .book-alt a{ color:#bcb0ff; }

/* --- 2/3 correctifs responsive (SUPPLEMENT_CSS) ----------- */
/* --- Complement au design system .swm-met : composants specifiques
       aux pages metier x ville. Aucun nouveau framework, tokens existants. --- */
.swm-met .pri-grid{ grid-template-columns:repeat(4,1fr); }
@media(max-width:1024px){ .swm-met .pri-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .swm-met .pri-grid{ grid-template-columns:1fr; } }
.swm-met .mkt{ max-width:820px; margin:0 auto 28px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--sh-sm); }
.swm-met .mkt table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.swm-met .mkt td{ padding:13px 18px; border-top:1px solid var(--line-soft); vertical-align:middle; }
.swm-met .mkt tr:first-child td{ border-top:none; }
.swm-met .mkt tr:nth-child(even){ background:var(--lav); }
.swm-met .mkt td.k{ color:var(--grey); }
.swm-met .mkt td.n{ text-align:right; font-weight:800; color:var(--dark); font-variant-numeric:tabular-nums; white-space:nowrap; }
.swm-met .mkt td.n small{ font-weight:500; color:var(--grey); font-size:12px; }
.swm-met .mkt-src{ text-align:center; font-size:12.5px; color:var(--grey); margin-top:-14px; }
.swm-met .mkt-read{ max-width:820px; margin:26px auto 0; }
.swm-met .mkt-read p+p{ margin-top:14px; }
.swm-met .rel{ max-width:820px; margin:0 auto; display:grid; gap:0; border-top:1px solid var(--line); }
.swm-met .rel a{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 4px; border-bottom:1px solid var(--line); font-weight:600; color:var(--dark); font-size:15.5px; text-transform:none; transition:color .2s,padding .2s; }
.swm-met .rel a:hover{ color:var(--lila); padding-left:10px; }
.swm-met .rel a span{ color:var(--lila); font-weight:800; flex:none; }
.swm-met .swm-trio{ position:relative; width:100%; max-width:520px; min-height:515px; margin:0 auto; }
.swm-met .swm-trio .tri{ position:absolute; border-radius:13px; overflow:hidden; background:#fff; border:3px solid #fff; box-shadow:0 44px 90px -34px rgba(6,11,28,.55),0 12px 30px -12px rgba(6,11,28,.42); animation:swmTriFloat 7.5s ease-in-out infinite; }
.swm-met .swm-trio .tri img{ width:100%; height:auto; display:block; }
.swm-met .swm-trio .tri-1{ --r:-6deg; width:70%; left:0; top:0; z-index:1; animation-delay:0s; }
.swm-met .swm-trio .tri-2{ --r:5deg; width:72%; right:2%; top:26%; z-index:2; animation-delay:1.2s; }
.swm-met .swm-trio .tri-3{ --r:-3deg; width:74%; left:7%; top:52%; z-index:3; animation-delay:2.4s; }
@keyframes swmTriFloat{ 0%,100%{transform:rotate(var(--r)) translateY(0)} 50%{transform:rotate(var(--r)) translateY(-8px)} }
@media(max-width:1024px){ .swm-met .swm-trio{ max-width:430px; min-height:clamp(360px,104vw,470px); } }
@media(prefers-reduced-motion:reduce){ .swm-met .swm-trio .tri{ animation:none } }
/* --- v4 : composants ajoutes --- */
.swm-met .pri-sub{ display:block; font-size:12.5px; color:var(--grey); margin:2px 0 8px; }
.swm-met .pri-flag{ display:block; width:max-content; max-width:100%; background:var(--lila); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.3px; padding:4px 12px; border-radius:999px; margin-bottom:10px; }
.swm-met .pri-reco{ max-width:820px; margin:26px auto 0; background:#fff; border:1px solid var(--line); border-left:4px solid var(--lila); border-radius:var(--r); padding:18px 22px; font-size:14.5px; line-height:1.6; }
.swm-met .pri-reco b{ color:var(--dark); }
/* --- v7.1 : CORRECTIF BUG — texte blanc sur fond blanc dans .book-per.
       Cause : la surcharge violette `.swm-met .book{ color:rgba(255,255,255,.85) }`
       cascade dans la pilule BLANCHE .book-per, qui ne redefinit pas `color`.
       Seul `.book-per b` avait une couleur explicite (var(--dark)) : la
       sous-ligne « 60 sites livres · 21 jours · 40 avis 5,0/5 » heritait du
       blanc => invisible (d'ou la carte large au vide inexplique a droite).
       Regle generale appliquee : TOUTE carte blanche posee dans un contexte
       de texte clair redefinit sa propre couleur de texte. --- */
.swm-met .book .book-per{ color:var(--grey); }
.swm-met .book .book-per b{ color:var(--dark); }
.swm-met .book .swm-badge-avis{ color:var(--grey); }
.swm-met .book .swm-badge-avis b{ color:var(--dark); }
.swm-met .book .swm-form-ph{ color:var(--grey); }
.swm-met .book .swm-form-ph b{ color:var(--dark); }
/* Meme garde-fou pour les deux autres contextes clairs (panneaux violets) */
.swm-met .savoir-panel .swm-badge-avis,.swm-met .midcta-panel .swm-badge-avis{ color:var(--grey); }
.swm-met .savoir-panel .swm-badge-avis b,.swm-met .midcta-panel .swm-badge-avis b{ color:var(--dark); }
/* --- v7.2 : CTA du hero ramenes a la proportion du pilier live (retour
       Noham : « trop gros »). Mesure : nos boutons faisaient 84 px de haut
       contre 64 px sur le pilier — le texte passait a la ligne dans la
       colonne etroite du hero. Correctif : padding et typo resserres +
       libelle principal insecable => plus de retour a la ligne. --- */
.swm-met .hero-ctas .btn{ font-size:14.5px; padding:13px 24px; border-radius:10px; }
.swm-met .hero-ctas .btn-outline{ padding:11px 22px; }
.swm-met .hero-ctas .btn-lila,.swm-met .hero-ctas .btn-2l{ white-space:nowrap; }
.swm-met .hero-ctas .btn-2l small{ font-size:11px; white-space:nowrap; }
.swm-met .hero-ctas .btn-l1{ display:block; white-space:nowrap; }
.swm-met .hero-ctas .btn svg{ width:16px; height:16px; }
@media(max-width:640px){
  .swm-met .hero-ctas .btn{ font-size:13.5px; padding:12px 16px; }
  .swm-met .hero-ctas .btn-lila,.swm-met .hero-ctas .btn-2l{ white-space:normal; }
  .swm-met .hero-ctas .btn-2l small{ white-space:normal; }
}
/* --- v7.3 : CTA d'appel du bloc conversion — photo de Noham + 2 lignes
       (au lieu d'un bloc a 3 niveaux). Pilule blanche, lien tel: intact. --- */
.swm-met .tel-card{ display:inline-flex; align-items:center; gap:13px; background:#fff; border:1px solid var(--line-soft); border-radius:999px; padding:8px 24px 8px 8px; box-shadow:0 14px 36px rgba(6,11,28,.28); color:var(--grey); text-align:left; transition:transform .25s var(--ease),box-shadow .25s var(--ease); }
.swm-met .tel-card:hover{ transform:translateY(-2px); box-shadow:0 20px 46px rgba(6,11,28,.34); }
.swm-met .tel-card img{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; }
.swm-met .tel-card small{ display:block; font-size:12.5px; color:var(--grey); line-height:1.3; }
.swm-met .tel-card b{ display:block; color:var(--dark); font-size:19px; font-weight:800; line-height:1.25; letter-spacing:-.3px; white-space:nowrap; }
@media(max-width:640px){
  .swm-met .tel-card{ padding:8px 18px 8px 8px; gap:11px; max-width:100%; }
  .swm-met .tel-card img{ width:42px; height:42px; }
  .swm-met .tel-card b{ font-size:17px; }
}
/* --- v6.1 : badge avis lisible sur fond violet (retour Noham).
       Pilule BLANCHE (pattern badge hero du pilier live), avatars 34px bordes
       blanc, texte sombre, etoiles or. Fonctionne sur violet ET sur blanc
       (bordure + ombre). --- */
.swm-met .swm-badge-avis{ display:inline-flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line-soft); border-radius:999px; padding:9px 20px 9px 10px; box-shadow:0 14px 36px rgba(6,11,28,.28); }
.swm-met .swm-badge-avis .av{ display:inline-flex; }
.swm-met .swm-badge-avis .av span{ width:34px; height:34px; border-radius:50%; border:2.5px solid #fff; margin-left:-10px; overflow:hidden; flex:none; }
.swm-met .swm-badge-avis .av span:first-child{ margin-left:0; }
.swm-met .swm-badge-avis .av img{ width:100%; height:100%; object-fit:cover; display:block; }
.swm-met .swm-badge-avis .stars{ color:var(--star,#fbbf24); letter-spacing:1.5px; font-size:13px; }
.swm-met .swm-badge-avis .txt{ font-size:13.5px; color:var(--grey); line-height:1.35; white-space:nowrap; text-align:left; }
.swm-met .swm-badge-avis .txt b{ color:var(--dark); font-size:15px; margin-inline:3px; }
@media(max-width:640px){
  .swm-met .swm-badge-avis{ flex-wrap:wrap; justify-content:center; border-radius:22px; padding:12px 16px; max-width:100%; }
  .swm-met .swm-badge-avis .txt{ white-space:normal; text-align:center; }
}
/* --- v6.2 : section « Un site pense pour les {metier}s » en 3 colonnes
       desktop (2 tablette, 1 mobile), cartes compactes. --- */
.swm-met .fx-grid{ grid-template-columns:repeat(3,1fr); gap:18px; max-width:1140px; margin-inline:auto; }
.swm-met .fx-grid .svc{ padding:22px 20px; }
.swm-met .fx-grid .svc .t{ font-size:15.5px; }
.swm-met .fx-grid .svc p{ font-size:13.5px; line-height:1.55; }
@media(max-width:1024px){ .swm-met .fx-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .swm-met .fx-grid{ grid-template-columns:1fr; } }
/* --- v6.3 : timeline moderne du deroule 21 jours. Rail vertical gauche,
       pastilles emoji bordees lila, trait de progression qui se dessine au
       scroll (CSS scroll-driven `animation-timeline: view()` — si le
       navigateur ne le supporte pas le trait reste plein, rien ne casse ;
       prefers-reduced-motion : statique). Contenu 100 % visible sans JS. --- */
.swm-met .tl2{ position:relative; max-width:880px; margin:0 auto; display:grid; gap:22px; }
.swm-met .tl2::before,.swm-met .tl2::after{ content:""; position:absolute; left:28px; top:30px; bottom:30px; width:3px; border-radius:2px; }
.swm-met .tl2::before{ background:var(--line); }
.swm-met .tl2::after{ background:linear-gradient(180deg,var(--lila),#8f7dff); transform-origin:top; }
@supports (animation-timeline: view()){
  .swm-met .tl2::after{ animation:swmTl2Grow linear both; animation-timeline:view(); animation-range:entry 25% cover 70%; }
}
@keyframes swmTl2Grow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.swm-met .tl2-it{ position:relative; display:grid; grid-template-columns:60px 1fr; gap:20px; align-items:start; }
.swm-met .tl2-node{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.swm-met .tl2-dot{ width:58px; height:58px; border-radius:50%; background:#fff; border:3px solid var(--lila); display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 8px 22px rgba(53,36,255,.16); }
.swm-met .tl2-day{ font-weight:800; color:var(--lila); font-size:13px; white-space:nowrap; }
.swm-met .tl2-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 24px; box-shadow:var(--sh-sm); transition:transform .25s,box-shadow .25s,border-color .25s; }
.swm-met .tl2-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); border-color:var(--lila); }
.swm-met .tl2-card b{ display:block; color:var(--dark); font-size:16.5px; margin-bottom:6px; }
.swm-met .tl2-card p{ font-size:14px; }
.swm-met .tl2-you{ margin-top:12px; background:var(--lav); border-radius:10px; padding:10px 14px; font-size:13px; color:var(--grey); }
.swm-met .tl2-you b{ display:inline; color:var(--lila); font-size:13px; margin:0; }
@media(max-width:640px){
  .swm-met .tl2::before,.swm-met .tl2::after{ left:22px; top:26px; bottom:26px; }
  .swm-met .tl2-it{ grid-template-columns:48px 1fr; gap:14px; }
  .swm-met .tl2-dot{ width:46px; height:46px; font-size:19px; border-width:2.5px; }
  .swm-met .tl2-card{ padding:16px 16px; }
}
@media(prefers-reduced-motion:reduce){ .swm-met .tl2::after{ animation:none!important; transform:scaleY(1); } }
/* --- v5 : emplacement du formulaire (template Elementor 47659).
       En local le shortcode ne rend pas : l'embed (texte brut) est masque et
       le placeholder s'affiche. Une fois rendu par WordPress, .swm-form-embed
       contient un .elementor : l'embed s'affiche, le placeholder disparait.
       Bascule 100 % CSS (:has, base 2023+), zero JS — Delay JS sans effet. --- */
.swm-met .swm-form-slot{ max-width:760px; margin:26px auto 0; text-align:left; }
.swm-met .swm-form-ph{ border:2px dashed var(--line); border-radius:var(--r-lg); background:#fff; padding:38px 26px; text-align:center; color:var(--grey); font-size:14px; line-height:1.6; }
.swm-met .swm-form-ph b{ color:var(--dark); }
.swm-met .swm-form-slot:has(.elementor) .swm-form-ph{ display:none; }
.swm-met .swm-form-embed:not(:has(.elementor)){ display:none; }
.swm-met [data-swm-var="tel"]{ white-space:nowrap; }
/* --- v4 : correctif responsive du badge avis Google (retour Noham 27/07).
       En mobile le pill 999px wrappait sur 3 lignes : texte rogne par l'arrondi,
       moitie droite vide. Passage en carte arrondie, avatars reduits, prix sur
       une ligne, séparateur masque. Aucun overflow horizontal. --- */
@media(max-width:640px){
  .swm-met .trust-pill{ display:flex; flex-wrap:wrap; align-items:center; row-gap:9px; column-gap:8px;
    border-radius:20px; padding:14px 16px; max-width:100%; box-sizing:border-box; }
  .swm-met .trust-pill .tp-sep{ display:none; }
  .swm-met .tp-avatars span{ width:26px; height:26px; border-width:2px; margin-left:-8px; }
  .swm-met .tp-score{ font-size:12px; }
  .swm-met .tp-score b{ font-size:13.5px; }
  .swm-met .tp-score .stars{ letter-spacing:.5px; }
  .swm-met .tp-price{ flex-basis:100%; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .swm-met .tp-price br{ display:none; }
  .swm-met .founder-chip{ max-width:100%; box-sizing:border-box; border-radius:22px; }
  .swm-met .midcta-trust{ flex-wrap:wrap; justify-content:center; row-gap:6px; }
}

/* --- 3/3 mise en page WebTensor --------------------------- */
/* =========================================================
   wt-layout.css — mise en page WebTensor, couleurs Site Web Montpellier.
   Se charge APRES swm-met.css et n'utilise QUE les tokens existants
   (--lila #3524FF, --dark #160042, --lav, --line, Inter Tight).
   Principes repris de WebTensor :
     hero centre sans visuel · eyebrow + H2 centre · colonnes de texte
     etroites · cartes tres aerees a bordure fine · maillage en cartes
     a icone (pas des chips) · beaucoup d'air vertical.
   Ajouts SWM (ce que WebTensor n'a pas) : bandeau contact avec avis
   Google, mur de realisations, preuve client repetee.
   ========================================================= */

.swm-met{ --wt-air:clamp(64px,8vw,116px); --wt-mesure:760px; }

/* ---------- Bandeau contact sticky (WT : tel + badge) ---------- */
.swm-met .wt-topbar{
  position:sticky; top:0; z-index:900;
  background:linear-gradient(90deg,#160042,#2a1bd6);
  color:#fff; padding:10px 18px;
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  font-size:13.5px; line-height:1.4;
}
.swm-met .wt-topbar a{ color:#fff; font-weight:700; display:inline-flex; align-items:center; gap:8px; }
.swm-met .wt-topbar svg{ width:16px; height:16px; flex:none; }
.swm-met .wt-topbar .sep{ width:1px; height:20px; background:rgba(255,255,255,.28); }
.swm-met .wt-topbar .wt-stars{ color:#fbbf24; letter-spacing:1px; }
.swm-met .wt-topbar .wt-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  border-radius:999px; padding:4px 13px; font-weight:600; font-size:12.5px;
}
@media(max-width:640px){ .swm-met .wt-topbar{ gap:10px; font-size:12.5px; padding:9px 12px; } .swm-met .wt-topbar .sep{ display:none; } }

/* ---------- Sections : rythme aere ---------- */
.swm-met .wt{ padding-block:var(--wt-air); }
.swm-met .wt-lav{ background:var(--lav); }
.swm-met .wt-head{ max-width:860px; margin:0 auto clamp(38px,5vw,58px); text-align:center; }
.swm-met .wt-eyebrow{
  display:block; font-size:12.5px; font-weight:800; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--lila); margin-bottom:16px;
}
.swm-met .wt-head h2{ font-size:clamp(28px,3.5vw,44px); line-height:1.1; }
.swm-met .wt-head p{ margin-top:18px; font-size:clamp(16px,1.4vw,18px); color:var(--grey); }

/* ---------- Hero centre, sans visuel (le coeur du layout WT) ---------- */
.swm-met .wt-hero{ padding:clamp(56px,7vw,92px) 0 clamp(48px,6vw,80px); background:linear-gradient(175deg,#f6f5ff 0%,#fff 70%); text-align:center; }
.swm-met .wt-hero .crumb{ justify-content:center; display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.swm-met .wt-tag{
  display:inline-flex; align-items:center; border-radius:999px; overflow:hidden;
  border:1px solid var(--line); background:#fff; box-shadow:var(--sh-sm);
  font-size:13.5px; font-weight:700; margin-bottom:26px;
}
.swm-met .wt-tag b{ background:var(--lila); color:#fff; padding:7px 15px; font-weight:800; letter-spacing:.4px; }
.swm-met .wt-tag span{ color:var(--dark); padding:7px 16px; }
.swm-met .wt-hero h1{ font-size:clamp(34px,5.2vw,62px); line-height:1.05; max-width:16ch; margin-inline:auto; }
.swm-met .wt-hero .wt-intro{
  max-width:var(--wt-mesure); margin:26px auto 0;
  font-size:clamp(16px,1.35vw,18px); line-height:1.72; color:var(--grey);
}
.swm-met .wt-hero .wt-intro strong{ color:var(--dark); font-weight:700; }
.swm-met .wt-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.swm-met .wt-hero .trust-pill{ margin:30px auto 0; }
.swm-met .wt-assure{
  display:flex; justify-content:center; gap:10px 22px; flex-wrap:wrap;
  margin-top:22px; font-size:13.5px; color:var(--grey);
}
.swm-met .wt-assure span{ display:inline-flex; align-items:center; gap:7px; }
.swm-met .wt-assure svg{ width:16px; height:16px; color:var(--green-ok); flex:none; }
.swm-met .wt-assure b{ color:var(--dark); font-weight:600; }
@media(max-width:640px){ .swm-met .wt-hero h1{ max-width:none; } .swm-met .wt-ctas .btn{ width:100%; } }

/* ---------- Colonne de texte long (WT : mesure etroite, aligne gauche) ---------- */
.swm-met .wt-prose{ max-width:var(--wt-mesure); margin:0 auto; }
.swm-met .wt-prose h2{ font-size:clamp(26px,3.2vw,38px); margin-bottom:22px; line-height:1.12; }
.swm-met .wt-prose p{ font-size:16.5px; line-height:1.75; color:var(--grey); }
.swm-met .wt-prose p + p{ margin-top:18px; }
.swm-met .wt-prose strong{ color:var(--dark); font-weight:700; }
.swm-met .wt-prose .wt-note{
  margin-top:26px; border-left:3px solid var(--lila); background:var(--lila-wash);
  border-radius:0 var(--r) var(--r) 0; padding:18px 22px; font-size:15.5px; color:var(--dark);
}

/* ---------- Cartes WT : bordure fine, beaucoup d'air ---------- */
.swm-met .wt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.swm-met .wt-grid-2{ grid-template-columns:repeat(2,1fr); }
.swm-met .wt-grid-4{ grid-template-columns:repeat(4,1fr); }
.swm-met .wt-card{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 28px;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.swm-met .wt-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); border-color:rgba(53,36,255,.28); }
.swm-met .wt-ico{
  width:50px; height:50px; border-radius:14px; background:var(--lila-wash);
  display:flex; align-items:center; justify-content:center; color:var(--lila); margin-bottom:20px;
}
.swm-met .wt-ico svg{ width:24px; height:24px; }
.swm-met .wt-card h3{ font-size:17.5px; line-height:1.3; letter-spacing:-.2px; margin-bottom:10px; }
.swm-met .wt-card p{ font-size:14.5px; line-height:1.65; color:var(--grey); }
/* pastille numerotee (process WT) */
.swm-met .wt-num{
  width:44px; height:44px; border-radius:50%; background:var(--lila); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; margin-bottom:20px;
}

/* ---------- Bande de chiffres (WT : 4 cartes bordees) ---------- */
.swm-met .wt-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.swm-met .wt-stat{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 20px; text-align:center; min-width:0; }
.swm-met .wt-stat b{
  display:block; font-size:clamp(26px,3vw,38px); font-weight:800; color:var(--lila);
  letter-spacing:-1.2px; font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.1;
}
.swm-met .wt-stat span{ display:block; margin-top:8px; font-size:13.5px; color:var(--grey); font-weight:500; }
.swm-met .wt-src{ text-align:center; font-size:12.5px; color:var(--grey); margin-top:22px; }
.swm-met .wt-src a{ color:var(--grey); text-decoration:underline; }

/* ---------- Maillage en cartes a icone centree (signature WT) ---------- */
.swm-met .wt-links{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.swm-met .wt-link{
  display:block; background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:26px 18px; text-align:center;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.swm-met .wt-link:hover{ transform:translateY(-3px); box-shadow:var(--sh); border-color:var(--lila); }
.swm-met .wt-link .ic{
  width:46px; height:46px; margin:0 auto 14px; border-radius:14px; background:var(--lila-wash);
  display:flex; align-items:center; justify-content:center; color:var(--lila);
}
.swm-met .wt-link .ic svg{ width:22px; height:22px; }
.swm-met .wt-link b{ display:block; color:var(--dark); font-size:15.5px; font-weight:700; line-height:1.3; }
.swm-met .wt-link span{ display:block; margin-top:5px; font-size:13px; color:var(--grey); }
/* variante « en savoir plus » : icone a gauche, 2 colonnes */
.swm-met .wt-links-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:960px; margin-inline:auto; }
.swm-met .wt-links-row .wt-link{ display:flex; align-items:center; gap:16px; text-align:left; padding:18px 22px; }
.swm-met .wt-links-row .ic{ margin:0; flex:none; }

/* ---------- FAQ facon WT : cartes empilees, large ---------- */
.swm-met .wt-faq{ max-width:900px; margin:0 auto; display:grid; gap:14px; }
.swm-met .wt-faq details{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.swm-met .wt-faq details[open]{ border-color:rgba(53,36,255,.3); box-shadow:var(--sh-sm); }
.swm-met .wt-faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer;
  list-style:none; padding:22px 26px; font-weight:700; font-size:16.5px; color:var(--dark);
  text-transform:none; white-space:normal;
}
.swm-met .wt-faq summary::-webkit-details-marker{ display:none; }
.swm-met .wt-faq summary::after{ content:"+"; font-size:22px; font-weight:400; color:var(--lila); flex:none; transition:transform .25s; }
.swm-met .wt-faq details[open] summary::after{ transform:rotate(45deg); }
.swm-met .wt-faq .a{ padding:0 26px 24px; font-size:15.5px; line-height:1.72; color:var(--grey); }
.swm-met .wt-faq .a strong{ color:var(--dark); }

/* ---------- Preuve : mur de realisations (l'avantage SWM) ---------- */
.swm-met .wt-real{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.swm-met .wt-real a{
  display:block; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.swm-met .wt-real a:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.swm-met .wt-real .shot{ display:block; position:relative; aspect-ratio:16/10.5; overflow:hidden; background:var(--lav); }
.swm-met .wt-real .shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform 2.6s var(--ease); }
.swm-met .wt-real a:hover .shot img{ transform:scale(1.045); }
.swm-met .wt-real .meta{ display:block; padding:18px 20px 20px; }
.swm-met .wt-real .meta b{ display:block; color:var(--dark); font-size:16.5px; }
.swm-met .wt-real .meta em{ display:block; font-style:normal; font-size:13px; color:var(--grey); margin-top:4px; }
.swm-met .wt-real .meta .tag{
  display:inline-block; margin-top:12px; font-size:12.5px; font-weight:700;
  color:var(--lila); background:var(--lila-wash); border-radius:999px; padding:5px 12px;
}
.swm-met .wt-real .meta .tag.win{ color:var(--green-ok); background:var(--green-wash); }

/* ---------- Bandeau de reassurance (garanties) ---------- */
.swm-met .wt-gar{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:34px; }
.swm-met .wt-gar span{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--dark);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 18px;
}
.swm-met .wt-gar svg{ width:15px; height:15px; color:var(--green-ok); flex:none; }

/* ---------- CTA final pleine largeur ---------- */
.swm-met .wt-final{ position:relative; overflow:hidden; background:var(--dark); color:rgba(255,255,255,.82); text-align:center; padding-block:var(--wt-air); }
.swm-met .wt-final::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:820px; height:820px; border-radius:50%;
  background:radial-gradient(circle,rgba(53,36,255,.42),transparent 65%); pointer-events:none;
}
.swm-met .wt-final .wrap{ position:relative; z-index:1; }
.swm-met .wt-final h2{ color:#fff; font-size:clamp(28px,3.6vw,46px); line-height:1.1; max-width:20ch; margin-inline:auto; }
.swm-met .wt-final h2 .accent{ color:#a8a0ff; }
.swm-met .wt-final p{ color:rgba(255,255,255,.78); font-size:17px; max-width:620px; margin:18px auto 0; }
.swm-met .wt-final .wt-ctas{ margin-top:30px; }
.swm-met .wt-final .btn-lila{ background:#fff; color:var(--lila); box-shadow:0 12px 34px rgba(0,0,0,.3); }
.swm-met .wt-final .btn-outline{ border-color:rgba(255,255,255,.75); color:#fff; background:transparent; }
.swm-met .wt-final .btn-outline:hover{ background:#fff; color:var(--lila); }
.swm-met .wt-final .wt-gar span{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); color:#fff; }
/* ⚠️ MEME PIEGE QUE LE CORRECTIF v7.1 DE LA CHARTE :
   .wt-final impose color:rgba(255,255,255,.82) a toute la section. Les cartes
   BLANCHES posees dedans (pilule fondateur, emplacement du formulaire)
   heritent de ce blanc → texte blanc sur fond blanc, invisible.
   Regle generale : toute carte claire dans un contexte de texte clair
   redefinit sa propre couleur de texte. */
.swm-met .wt-final .book-per{ color:var(--grey); }
.swm-met .wt-final .book-per b{ color:var(--dark); }
.swm-met .wt-final .book-per span span{ color:var(--grey); }
.swm-met .wt-final .swm-form-ph{ color:var(--grey); }
.swm-met .wt-final .swm-form-ph b{ color:var(--dark); }
.swm-met .wt-final .swm-badge-avis{ color:var(--grey); }
.swm-met .wt-final .swm-badge-avis b{ color:var(--dark); }

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .swm-met .wt-grid,.swm-met .wt-real{ grid-template-columns:repeat(2,1fr); }
  .swm-met .wt-links{ grid-template-columns:repeat(2,1fr); }
  .swm-met .wt-stats{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:700px){
  .swm-met .wt-grid,.swm-met .wt-grid-2,.swm-met .wt-grid-4,.swm-met .wt-real,.swm-met .wt-links-row{ grid-template-columns:1fr; }
  .swm-met .wt-card{ padding:24px 22px; }
  .swm-met .wt-faq summary{ padding:18px 20px; font-size:15.5px; }
  .swm-met .wt-faq .a{ padding:0 20px 20px; }
}
@media(max-width:520px){
  .swm-met .wt-links{ grid-template-columns:1fr; }
  .swm-met .wt-stats{ grid-template-columns:1fr; }
}


/* ===== COMPOSANTS REELS repris du site live (avis + tarifs) ===== */
/* --- AVIS (page d'accueil live) --- */
.swm-rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1200px;margin:0 auto;width:100%}@media(max-width:1024px){.swm-rev-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.swm-rev-grid{grid-template-columns:1fr}}.swm-rev{background:#fff;border:1px solid #e5e5ec;border-radius:10px;padding:24px;position:relative;transition:transform .2s,box-shadow .2s,border-color .2s}.swm-rev:hover{transform:translateY(-3px);box-shadow:0 12px 48px rgba(22,0,66,.12);border-color:rgba(53,36,255,.08)}.swm-rev-head{display:flex;gap:12px;margin-bottom:12px;align-items:center}.swm-rev-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#c4b8ff,#3524ff);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:14px;flex-shrink:0}.swm-rev-info{flex:1;min-width:0}.swm-rev-name{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:14px;color:#160042;margin-bottom:2px}.swm-rev-stars{font-size:11px;color:#fbbf24;letter-spacing:1px}.swm-rev-google{position:absolute;top:14px;right:14px;width:22px;height:22px;background:#fff;border:1px solid #e5e5ec;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}.swm-rev-google span{background:linear-gradient(135deg,#4285f4 0,#34a853 50%,#fbbc04 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.swm-rev-text{font-size:13px;color:#333;line-height:1.55;margin:0 0 12px}.swm-rev-date{font-size:11px;color:#6b6b7a;font-style:italic}.swm-rev-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}.swm-rev-metier{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,rgba(53,36,255,.1),rgba(53,36,255,.04));color:#3524ff;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:11px;padding:5px 10px;border-radius:6px;border:1px solid rgba(53,36,255,.2);line-height:1.2}.swm-rev-seo{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(16,185,129,.05));color:#0c8a5e;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:11px;padding:5px 10px;border-radius:6px;border:1px solid rgba(16,185,129,.25);line-height:1.2}.swm-rev-seo::before{content:"\1F4C8";font-size:11px}
/* --- TARIFS (page d'accueil live) --- */
.swm-pri-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1300px;margin:24px auto 0;align-items:start}@media(max-width:1100px){.swm-pri-grid{grid-template-columns:repeat(2,1fr);gap:24px}}@media(max-width:600px){.swm-pri-grid{grid-template-columns:1fr;gap:24px}}.swm-pri-card{background:#fff;border:2px solid #e5e5ec;border-radius:14px;padding:28px 22px;position:relative;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}.swm-pri-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(22,0,66,.1);border-color:#c4b8ff}.swm-pri-card.featured{border-color:#3524ff;box-shadow:0 0 10px 3px rgba(53,36,255,.39);transform:scale(1.03)}@media(max-width:1100px){.swm-pri-card.featured{transform:none}}.swm-pri-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#3524ff;color:#fff;padding:5px 12px;border-radius:999px;font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;box-shadow:0 0 10px 3px rgba(53,36,255,.39);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}.swm-pri-badge.advanced{background:#160042;box-shadow:0 0 10px 3px rgba(22,0,66,.39)}.swm-pri-icon{position:absolute;top:-22px;right:18px;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid #e5e5ec;display:inline-flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 12px rgba(22,0,66,.08)}.swm-pri-card.featured .swm-pri-icon{border-color:#3524ff;color:#3524ff}.swm-pri-name{font-family:'Inter Tight',sans-serif;font-size:18px;font-weight:700;color:#3524ff;margin-bottom:4px;letter-spacing:-.3px}.swm-pri-sub{display:inline-block;background:#160042;color:#fff;font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px;margin-bottom:14px;letter-spacing:.3px}.swm-pri-from{font-family:'Inter Tight',sans-serif;font-size:12px;color:#6b6b7a;margin-bottom:2px;font-weight:500}.swm-pri-amt{font-family:'Inter Tight',sans-serif;font-size:38px;font-weight:800;color:#160042;line-height:1;letter-spacing:-1.5px;display:inline-block}.swm-pri-amt small{font-size:13px;font-weight:600;color:#6b6b7a;margin-left:4px;letter-spacing:0}.swm-pri-jour{display:block;font-size:11px;color:#6b6b7a;margin-top:6px;font-weight:500;border-top:1px dashed #e5e5ec;padding-top:6px}.swm-pri-jour strong{color:#3524ff;font-weight:700;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:rgba(53,36,255,.4)}.swm-pri-tag{margin-bottom:18px}.swm-pri-list{list-style:none;padding:0;margin:0 0 22px;flex:1}.swm-pri-list li{padding:7px 0;font-size:13px;display:flex;align-items:flex-start;gap:8px;line-height:1.4;color:#160042}.swm-pri-list li::before{content:"\2713";color:#10b981;font-weight:700;flex-shrink:0;margin-top:1px;font-size:14px;background:rgba(16,185,129,.1);width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.swm-pri-list li.offert::before{content:"\1f381";font-size:13px;background:0 0;width:auto}.swm-pri-list li.offert{font-weight:600}.swm-pri-list li.offert s{color:#ef4444;text-decoration-thickness:1.5px;font-weight:700;margin-right:4px}.swm-pri-list li .pri-cat{display:inline-flex;align-items:center;gap:4px;background:rgba(53,36,255,.08);color:#3524ff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.3px;margin-left:6px;flex-shrink:0;font-family:'Inter Tight',sans-serif}.swm-pri-list li .pri-cat.adv{background:rgba(16,185,129,.1);color:#047857}.swm-pri-list li .pri-cat.prem{background:rgba(53,36,255,.1);color:#3524ff}.swm-pri-cta{display:flex;flex-direction:column;align-items:center;text-align:center;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:14px;text-decoration:none;border-radius:10px;padding:14px 16px;transition:all .25s;gap:3px}.swm-pri-cta.outline{background:#fff;color:#3524ff;border:2px solid #3524ff}.swm-pri-cta.outline:hover{background:#3524ff;color:#fff;transform:translateY(-2px);box-shadow:0 8px 22px rgba(53,36,255,.35)}.swm-pri-cta.solid{background:#3524ff;color:#fff;border:2px solid #3524ff;box-shadow:0 0 16px 4px rgba(53,36,255,.4)}.swm-pri-cta.solid:hover{background:#160042;border-color:#160042;transform:translateY(-2px);box-shadow:0 0 22px 6px rgba(53,36,255,.55)}.swm-pri-cta-main{display:inline-flex;align-items:center;gap:6px}.swm-pri-cta-sub{font-size:11px;font-weight:500;opacity:.85;letter-spacing:.2px}.swm-pri-enterprise{max-width:840px;margin:32px auto 0;text-align:center;background:linear-gradient(135deg,#160042 0,#3524ff 100%);border-radius:14px;padding:24px 28px;font-family:'Inter Tight',sans-serif;color:#fff;box-shadow:0 8px 32px rgba(22,0,66,.2)}.swm-pri-enterprise-title{font-size:18px;font-weight:700;margin-bottom:8px}.swm-pri-enterprise p{font-size:14px;opacity:.9;line-height:1.5;margin:0 0 16px}@media(max-width:600px){.swm-pri-amt{font-size:32px!important}.swm-pri-name{font-size:17px!important}.swm-pri-card{padding:24px 18px!important}.swm-pri-card.featured{transform:none!important;margin:0!important}.swm-pri-grid{gap:22px!important}.swm-hml-cta a{width:100%;text-align:center}}@media(max-width:480px){.swm-pri-amt{font-size:28px!important}.swm-pri-enterprise-title{font-size:17px!important}}

/* =========================================================
   V2 (retours Noham 29/07) — composants REELS du site live
   + corrections de mise en page demandees.
   ========================================================= */

/* --- 1. Badges : on reprend le badge canon .swm-pill du site (plus de
       pseudo-eyebrow invente). L'eyebrow devient un simple porteur. --- */
.swm-met .wt-head .swm-pill{ margin-bottom:18px; }

/* --- 2. Hero : l'espace au-dessus du fil d'Ariane etait trop grand --- */
.swm-met .wt-hero{ padding-top:clamp(28px,3.5vw,46px); }
.swm-met .wt-hero .crumb{ margin-bottom:16px; }

/* --- 3. Bandeau logos clients (repris de l'accueil) --- */
.swm-met .wt-logos{ background:#fff; border-block:1px solid var(--line-soft); padding-block:clamp(30px,4vw,48px); }
.swm-met .wt-logos-cap{ text-align:center; font-size:14px; color:var(--grey); margin-bottom:20px; }
.swm-met .wt-logos-cap b{ color:var(--dark); font-weight:700; }
.swm-met .wt-logos-band{ display:flex; flex-direction:column; gap:10px; max-width:1080px; margin:0 auto; background:#f3f3f3; border-radius:16px; padding:20px 26px; }
.swm-met .wt-logos-band img{ width:100%; height:auto; display:block; border-radius:10px; }
@media(max-width:640px){ .swm-met .wt-logos-band{ padding:14px 16px; gap:8px; } }

/* --- 4. Triple bandeau de captures pilote AU SCROLL (zero JS, zero boucle
       infinie : le defilement suit la position de scroll, il s'arrete
       quand on s'arrete). Repli statique si le navigateur ne supporte pas
       animation-timeline. --- */
.swm-met .wt-wall{ overflow:hidden; padding-block:clamp(26px,3.5vw,40px); }
.swm-met .wt-wall-row{ overflow:hidden; margin-bottom:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.swm-met .wt-wall-track{ display:flex; gap:14px; width:max-content; will-change:transform; }
.swm-met .wt-wall-track img{ width:210px; aspect-ratio:16/10; object-fit:cover; object-position:top center;
  border-radius:12px; border:1px solid var(--line); box-shadow:var(--sh-sm); display:block; }
@supports (animation-timeline: scroll()){
  .swm-met .wt-wall-track{ animation:wtWallL linear both; animation-timeline:scroll(root block); }
  .swm-met .wt-wall-row.rev .wt-wall-track{ animation-name:wtWallR; }
}
@keyframes wtWallL{ from{ transform:translateX(0); } to{ transform:translateX(-38%); } }
@keyframes wtWallR{ from{ transform:translateX(-38%); } to{ transform:translateX(0); } }
@media(prefers-reduced-motion:reduce){ .swm-met .wt-wall-track{ animation:none!important; } }
@media(max-width:700px){ .swm-met .wt-wall-track img{ width:150px; } }

/* --- 5. Realisations en blocs de 4 (plus de masse) --- */
.swm-met .wt-real-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:1024px){ .swm-met .wt-real-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .swm-met .wt-real-4{ grid-template-columns:1fr; } }
.swm-met .wt-cta-center{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:34px; }

/* --- 6. Section « tous les metiers » sur fond de marque (repris de WT,
       version SWM : degrade lila -> dark) --- */
.swm-met .wt-band{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(135deg,#3524FF 0%,#2a1bd6 52%,#160042 100%); padding-block:var(--wt-air); }
.swm-met .wt-band::before{ content:""; position:absolute; left:-8%; top:-40%; width:60%; height:180%;
  background:radial-gradient(circle,rgba(255,255,255,.13),transparent 60%); pointer-events:none; }
.swm-met .wt-band .wrap{ position:relative; z-index:1; }
.swm-met .wt-band .wt-head h2{ color:#fff; }
.swm-met .wt-band .wt-head h2 .accent{ color:#bcb0ff; }
.swm-met .wt-band .wt-head p{ color:rgba(255,255,255,.8); }
.swm-met .wt-band .swm-pill{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32); }
.swm-met .wt-band .wt-link{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
.swm-met .wt-band .wt-link:hover{ background:rgba(255,255,255,.16); border-color:#fff; transform:translateY(-3px); }
.swm-met .wt-band .wt-link b{ color:#fff; }
.swm-met .wt-band .wt-link span{ color:rgba(255,255,255,.72); }
.swm-met .wt-band .wt-link .ic{ background:rgba(255,255,255,.14); color:#fff; }
.swm-met .wt-band .wt-src{ color:rgba(255,255,255,.7); }

/* --- 7. Tarifs : deroulants de details + argument WordPress --- */
.swm-met .wt-pri-more{ border-top:1px dashed #e5e5ec; margin-top:6px; padding-top:10px; }
.swm-met .wt-pri-more summary{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  cursor:pointer; list-style:none; font-family:'Inter Tight',sans-serif; font-size:13px; font-weight:700;
  color:var(--lila); padding:6px 0; text-transform:none; white-space:normal; }
.swm-met .wt-pri-more summary::-webkit-details-marker{ display:none; }
.swm-met .wt-pri-more summary::after{ content:"+"; font-size:17px; font-weight:400; flex:none; transition:transform .25s; }
.swm-met .wt-pri-more[open] summary::after{ transform:rotate(45deg); }
.swm-met .wt-pri-more .swm-pri-list{ margin-bottom:6px; }
.swm-met .wt-wp{ max-width:900px; margin:36px auto 0; background:#fff; border:1px solid var(--line);
  border-left:4px solid var(--lila); border-radius:var(--r); padding:22px 26px; }
.swm-met .wt-wp b{ color:var(--dark); }
.swm-met .wt-wp p{ font-size:15px; line-height:1.7; color:var(--grey); }
.swm-met .wt-wp p + p{ margin-top:12px; }

/* --- 8. Avis : la grille reelle du site, adaptee --- */
.swm-met .swm-rev-grid{ max-width:1280px; }
.swm-met .wt-rev-head{ display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; margin-bottom:30px; }
.swm-met .wt-rev-score{ display:inline-flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:14px 22px; box-shadow:var(--sh-sm); }
.swm-met .wt-rev-score b{ font-size:34px; font-weight:800; color:var(--dark); letter-spacing:-1.5px; line-height:1; }
.swm-met .wt-rev-score .st{ color:var(--star); font-size:15px; letter-spacing:2px; display:block; }
.swm-met .wt-rev-score span{ font-size:13px; color:var(--grey); }

/* =========================================================
   V3 — sections manquantes relevees sur WebTensor (29/07)
   ========================================================= */

/* --- A. « Trouvez un site web pour votre metier » :
       grille dense de petites cartes-liens (icone a gauche). --- */
.swm-met .wt-mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1180px; margin-inline:auto; }
.swm-met .wt-mini a{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.swm-met .wt-mini a:hover{ transform:translateY(-2px); box-shadow:var(--sh); border-color:var(--lila); }
.swm-met .wt-mini .ic{
  width:40px; height:40px; flex:none; border-radius:11px; background:var(--lila-wash);
  display:flex; align-items:center; justify-content:center; color:var(--lila);
}
.swm-met .wt-mini .ic svg{ width:19px; height:19px; }
.swm-met .wt-mini b{ display:block; color:var(--dark); font-size:15px; font-weight:700; line-height:1.25; }
.swm-met .wt-mini span{ display:block; font-size:12.5px; color:var(--grey); margin-top:2px; }
@media(max-width:1024px){ .swm-met .wt-mini{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .swm-met .wt-mini{ grid-template-columns:1fr; } }

/* --- B. Section secteurs sur fond de marque : 6 blocs icone + titre +
       description, sans carte, facon WebTensor. --- */
.swm-met .wt-sect{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 30px; max-width:1180px; margin-inline:auto; }
.swm-met .wt-sect > div{ display:flex; gap:16px; align-items:flex-start; }
.swm-met .wt-sect .ic{
  width:44px; height:44px; flex:none; border-radius:12px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.swm-met .wt-sect .ic svg{ width:21px; height:21px; }
.swm-met .wt-sect b{ display:block; color:#fff; font-size:16.5px; font-weight:700; line-height:1.3; margin-bottom:7px; }
.swm-met .wt-sect p{ font-size:14px; line-height:1.6; color:rgba(255,255,255,.74); }
.swm-met .wt-band .wt-cta-center{ margin-top:46px; }
.swm-met .wt-band .btn-lila{ background:#fff; color:var(--lila); box-shadow:0 12px 30px rgba(0,0,0,.28); }
.swm-met .wt-band .btn-lila:hover{ box-shadow:0 18px 40px rgba(0,0,0,.36); }
@media(max-width:520px){ .swm-met .wt-cta-center .btn{ width:100%; } }
.swm-met .wt-band .btn-outline{ border-color:rgba(255,255,255,.7); color:#fff; background:rgba(255,255,255,.06); }
.swm-met .wt-band .btn-outline:hover{ background:#fff; color:var(--lila); }
@media(max-width:1024px){ .swm-met .wt-sect{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .swm-met .wt-sect{ grid-template-columns:1fr; gap:26px; } }

/* --- C. Ressources / guides : cartes d'articles --- */
.swm-met .wt-res{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.swm-met .wt-res a{
  display:block; background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 24px 22px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.swm-met .wt-res a:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); border-color:var(--lila); }
.swm-met .wt-res .kicker{
  display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--lila); background:var(--lila-wash); border-radius:6px; padding:5px 10px; margin-bottom:14px;
}
.swm-met .wt-res b{ display:block; color:var(--dark); font-size:17px; font-weight:700; line-height:1.35; }
.swm-met .wt-res p{ font-size:14px; line-height:1.6; color:var(--grey); margin-top:9px; }
.swm-met .wt-res .more{ display:inline-block; margin-top:14px; font-size:13.5px; font-weight:700; color:var(--lila); }
.swm-met .wt-res-count{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--dark);
  background:var(--green-wash); border:1px solid rgba(16,185,129,.25); border-radius:999px; padding:8px 16px;
}
@media(max-width:1024px){ .swm-met .wt-res{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .swm-met .wt-res{ grid-template-columns:1fr; } }

/* =========================================================
   V4 — visuels (retours Noham 29/07)
   ========================================================= */

/* --- Vignette de secteur : bande de mockups recadree depuis les visuels
       Meta Ads deja produits (ou composee depuis les captures clients
       pour le batiment, faute de visuel Meta BTP). --- */
.swm-met .wt-sect{ grid-template-columns:repeat(3,1fr); gap:30px 26px; }
/* ⚠️ ces deux regles doivent rester APRES la ligne ci-dessus, sinon la grille
   repasse a 3 colonnes sur mobile et les vignettes debordent (bug vecu). */
@media(max-width:1024px){ .swm-met .wt-sect{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .swm-met .wt-sect{ grid-template-columns:1fr; gap:26px; } }
.swm-met .wt-sect > div{ display:block; }
.swm-met .wt-sect .vign{
  display:block; width:100%; aspect-ratio:760/470; overflow:hidden;
  border-radius:14px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); margin-bottom:16px;
}
.swm-met .wt-sect .vign img{ width:100%; height:auto; display:block;
  transition:transform 2.4s var(--ease); }
.swm-met .wt-sect a:hover .vign img{ transform:scale(1.04); }
.swm-met .wt-sect .hd{ display:flex; align-items:center; gap:12px; margin-bottom:9px; }
.swm-met .wt-sect .hd .ic{ width:38px; height:38px; border-radius:11px; margin:0; }
.swm-met .wt-sect .hd .ic svg{ width:18px; height:18px; }
.swm-met .wt-sect a{ display:block; color:inherit; }
.swm-met .wt-sect .more{ display:inline-block; margin-top:10px; font-size:13px; font-weight:700; color:#bcb0ff; }
.swm-met .wt-sect a:hover .more{ color:#fff; }

/* --- Vignette d'article --- */
.swm-met .wt-res a{ padding:0; overflow:hidden; }
.swm-met .wt-res .thumb{ display:block; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--lav); }
.swm-met .wt-res .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 2.4s var(--ease); }
.swm-met .wt-res a:hover .thumb img{ transform:scale(1.04); }
/* article sans image a la une : aplat de marque + initiale, jamais de trou */
.swm-met .wt-res .thumb.none{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#3524FF 0%,#2a1bd6 55%,#160042 100%);
  color:rgba(255,255,255,.9); font-weight:800; font-size:15px; letter-spacing:.4px; text-align:center; padding:0 26px;
}
.swm-met .wt-res .body{ display:block; padding:22px 24px 24px; }
.swm-met .wt-res .body .kicker{ margin-bottom:12px; }

/* --- Bloc video (contenu supplementaire + schema VideoObject) --- */
.swm-met .wt-video{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,56px); align-items:center; max-width:1100px; margin-inline:auto; }
.swm-met .wt-video video{ width:100%; border-radius:20px; display:block; box-shadow:var(--sh-lg); background:#000; }
.swm-met .wt-video h2{ margin-bottom:16px; }
.swm-met .wt-video p{ font-size:16px; line-height:1.7; color:var(--grey); }
.swm-met .wt-video p + p{ margin-top:14px; }
.swm-met .wt-video .wt-gar{ justify-content:flex-start; margin-top:24px; }
@media(max-width:900px){ .swm-met .wt-video{ grid-template-columns:1fr; } .swm-met .wt-video video{ max-width:420px; margin-inline:auto; } }


/* =========================================================
   BLOC « divergence au scroll » (repris du prototype 20-)
   ========================================================= */

/* ⚠️ LE PIEGE DE CE CHANTIER (45 min de debug)
   La charte pose .swm-met{ overflow-x:hidden }. En CSS, « overflow-x:hidden »
   avec « overflow-y:visible » fait calculer overflow-y en AUTO : .swm-met
   devient un conteneur de defilement. Toutes les view-timeline des descendants
   sont alors mesurees dans ce conteneur — qui ne defile jamais — et restent
   FIGEES a une valeur constante.
   Correctif : « overflow-x:clip », qui coupe le debordement horizontal SANS
   creer de conteneur de defilement. Meme protection, timeline fonctionnelle. */
.swm-met{ overflow-x:clip; }   /* surcharge indispensable, voir ci-dessus */

/* ---------- Scène ----------
   La section est volontairement haute : c'est elle qui fournit la course de
   scroll. Le contenu reste collé (sticky) pendant qu'on la traverse, et
   l'animation suit cette traversée. Sans ça, sur mobile la section entre et
   sort du viewport trop vite : l'animation est finie avant d'être vue. */
.swm-met .dv{
  position:relative; background:var(--lav);
  padding-block:clamp(70px,9vw,120px);
}
.swm-met .dv-sticky{
  /* PAS de clip ici : un ancetre qui clippe rend les cartes « invisibles »
     au sens de la view-timeline, et FIGE l animation (bug vecu, 45 min).
     Le debordement horizontal est deja tenu par .swm-met{overflow-x:hidden}
     dans la charte. */
}
.swm-met .dv-stage{ position:relative; height:clamp(500px,60vw,720px); display:grid; place-items:center; }
/* le texte central reste net et lisible par-dessus les cartes */
.swm-met .dv-mid{
  position:relative; z-index:5; text-align:center; max-width:520px;
  padding:26px var(--gutter); pointer-events:none;
  /* le texte passe DEVANT les cartes : il lui faut son propre fond, sinon il
     devient illisible des que les cartes se rapprochent du centre */
  background:radial-gradient(ellipse 62% 58% at center, var(--lav) 62%, rgba(245,245,248,0) 100%);
}
.swm-met .dv-mid > *{ pointer-events:auto; }
.swm-met .dv-mid h2{ font-size:clamp(28px,3.6vw,46px); line-height:1.08; }
.swm-met .dv-mid p{ margin-top:16px; font-size:clamp(15px,1.3vw,17px); color:var(--grey); }
.swm-met .dv-mid .btn{ margin-top:22px; }

/* ---------- Cartes ---------- */
.swm-met .dv-card{
  position:absolute; top:50%; left:50%; width:clamp(280px,34vw,470px);
  margin:calc(-1 * clamp(88px,10.6vw,147px)) 0 0 calc(-1 * clamp(140px,17vw,235px));
  border-radius:16px; overflow:hidden; background:#fff;
  border:3px solid #fff; box-shadow:0 30px 70px -28px rgba(6,11,28,.55);
  will-change:transform;
}
.swm-met .mk-bar{
  display:flex; align-items:center; gap:5px;
  height:clamp(18px,2.1vw,26px); padding:0 clamp(8px,1vw,12px);
  background:linear-gradient(#f6f6fa,#ececf3); border-bottom:1px solid rgba(22,0,66,.09);
}
.swm-met .mk-bar i{ width:clamp(5px,.62vw,8px); aspect-ratio:1; border-radius:50%; background:#d6d6e2; flex:none; }
.swm-met .mk-bar i:first-child{ background:#ff5f57; }
.swm-met .mk-bar i:nth-child(2){ background:#febc2e; }
.swm-met .mk-bar i:nth-child(3){ background:#28c840; }
.swm-met .mk-bar b{ flex:1; height:52%; margin-left:6px; border-radius:99px; background:#fff; border:1px solid rgba(22,0,66,.08); }
.swm-met .mk-screen{ display:block; }
.swm-met .dv-card img{
  width:100%; height:auto; display:block;
  /* Les captures clients n'ont pas toutes le meme format : 1280x614 pour la
     plupart, 1280x800 pour Achillea Paysage et Mlle Therapeute. Sans ratio
     impose, ces deux-la sont nettement plus hautes que les autres et cassent
     l alignement. On force donc un format unique, cadre par le haut. */
  aspect-ratio:16/10; object-fit:cover; object-position:top center;
}

/* état de départ : les cartes sont empilées au centre, légèrement décalées */
.swm-met .dv-card{ transform:translate3d(var(--x0,0px), var(--y,0px), 0) rotate(var(--r0,0deg)) scale(.92); }

/* ---------- Animation pilotée par le scroll (zéro JS) ---------- */
@supports (animation-timeline: view()){
  .swm-met .dv-card{
    animation:dv-out both;
    /* « linear » donne un mouvement mecanique colle au doigt. Cette courbe
       demarre doucement, accelere au milieu et se pose en fin de course :
       c est ce qui donne la sensation de fluidite demandee. Elle est
       approximee en points, seule forme acceptee par les animations de
       scroll (les fonctions cubic-bezier y sont ignorees). */
    animation-timing-function:linear(
      0, .004 2%, .018 5%, .05 10%, .11 16%, .2 23%, .32 31%, .46 40%,
      .6 49%, .72 58%, .82 67%, .89 75%, .94 82%, .97 89%, .99 95%, 1);
    animation-timeline:view();
    animation-range:cover 12% cover 88%;
  }
}
@keyframes dv-out{
  from{ transform:translate3d(var(--x0), var(--y), 0) rotate(var(--r0)) scale(.88); }
  to  { transform:translate3d(var(--x1), var(--y), 0) rotate(var(--r1)) scale(1.14); }
}

/* Répartition : 3 cartes partent à gauche, 3 à droite, à des vitesses différentes.
   Les valeurs reprennent l'ordre de grandeur mesuré sur le site de référence.
   RÈGLE D'INCLINAISON : toutes les cartes d'une même colonne tournent dans le
   même sens — négatif à gauche, positif à droite. Une carte à contresens au
   milieu d'une colonne casse la lecture en éventail (défaut corrigé le 29/07). */
.swm-met .dv-1{ --x0:-360px; --x1:-980px; --y:-165px; --r0:-5deg;  --r1:-19deg; z-index:3; }
.swm-met .dv-2{ --x0:-435px; --x1:-1140px; --y:  80px; --r0:-4deg; --r1:-16deg; z-index:2; }
.swm-met .dv-3{ --x0:-325px; --x1:-880px; --y: 255px; --r0:-4deg;  --r1:-14deg; z-index:1; }
.swm-met .dv-4{ --x0: 360px; --x1: 980px; --y:-180px; --r0: 5deg;  --r1: 19deg; z-index:3; }
.swm-met .dv-5{ --x0: 435px; --x1: 1140px; --y:  65px; --r0: 4deg; --r1: 17deg; z-index:2; }
.swm-met .dv-6{ --x0: 325px; --x1: 880px; --y: 245px; --r0: 4deg;  --r1: 14deg; z-index:1; }

/* ---------- Mobile : course réduite, sinon les cartes sortent trop vite ---------- */
@media(max-width:780px){
  /* MOBILE — le reglage qui compte.
     Mesure du 29/07 : avec un depart a ±150 px, les cartes etaient deja
     coupees par les bords au demarrage (337 px de carte visibles en tout) et
     sorties de l ecran au premier tiers du scroll : l effet ne se voyait pas.
     Elles partent desormais PRESQUE AU CENTRE, entierement visibles, puis
     s ecartent franchement — c est le contraste qui rend le mouvement lisible
     sur un petit ecran. */
  .swm-met .dv-stage{ height:clamp(520px,132vw,680px); }
  .swm-met .dv-card{
    width:clamp(190px,52vw,240px);
    margin:calc(-1 * clamp(59px,16.2vw,75px)) 0 0 calc(-1 * clamp(95px,26vw,120px));
    border-width:2px; border-radius:12px;
  }
  .swm-met .dv-1{ --x0: -84px; --x1:-360px; --y:-168px; }
  .swm-met .dv-2{ --x0:-104px; --x1:-430px; --y: 165px; }
  .swm-met .dv-3{ --x0: -60px; --x1:-300px; --y: 178px; }
  .swm-met .dv-4{ --x0:  84px; --x1: 360px; --y:-176px; }
  .swm-met .dv-5{ --x0: 104px; --x1: 430px; --y: 158px; }
  .swm-met .dv-6{ --x0:  60px; --x1: 300px; --y: 170px; }
  /* 6 cartes se chevauchent trop sur petit ecran : on en garde 4 */
  .swm-met .dv-3, .swm-met .dv-6{ display:none; }
  /* La plage est decalee vers la FIN de la traversee : sur un petit ecran, une
     section courte a fini d entrer tres tot, et avec la plage desktop les
     cartes etaient deja sorties quand la section arrivait au centre du regard.
     En demarrant a 30 % et en finissant a 100 %, l ecartement se joue pendant
     qu on regarde la section. */
  @supports (animation-timeline: view()){
    .swm-met .dv-card{ animation-range:cover 30% cover 100%; }
  }
  /* les cartes passent au centre au demarrage : le texte a besoin d un fond
     plus opaque qu en desktop pour rester lisible par-dessus */
  .swm-met .dv-mid{
    background:radial-gradient(ellipse 78% 62% at center, var(--lav) 66%, rgba(245,245,248,0) 100%);
    padding-block:22px;
  }
}

/* ---------- Repli : pas de scroll-timeline → grille statique propre ---------- */
@supports not (animation-timeline: view()){
  .swm-met .dv{ height:auto; padding-block:clamp(48px,6vw,80px); }
  .swm-met .dv-sticky{ position:static; height:auto; }
  .swm-met .dv-stage{ height:auto; display:block; }
  .swm-met .dv-mid{ max-width:640px; margin:0 auto 34px; }
  .swm-met .dv-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .swm-met .dv-card{ position:static; width:auto; margin:0; transform:none!important; }
  @media(max-width:780px){ .swm-met .dv-cards{ grid-template-columns:repeat(2,1fr); } }
}
/* ---------- Accessibilité : mouvement désactivé ---------- */
@media(prefers-reduced-motion:reduce){
  .swm-met .dv-card{ animation:none!important; }
  .swm-met .dv{ height:auto; padding-block:clamp(48px,6vw,80px); }
  .swm-met .dv-sticky{ position:static; height:auto; }
  .swm-met .dv-stage{ height:auto; display:block; }
  .swm-met .dv-mid{ max-width:640px; margin:0 auto 34px; }
  .swm-met .dv-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .swm-met .dv-card{ position:static; width:auto; margin:0; transform:none!important; }
}

/* ==========================================================================
   v8 — L'OFFRE DANS LE H1
   Le code postal sortait de la ligne la plus lue de la page sans capter de
   requete ; le prix le remplace. Ligne dediee, plus legere : le titre reste
   percutant, et il devient IDENTIQUE au <title> — Google reecrit d'autant
   moins un title qu'il concorde avec le H1.
   ========================================================================== */
.swm-met .h1 .h1-offre{
  display:block; margin-top:.30em;
  font-size:.42em; font-weight:600; line-height:1.25;
  letter-spacing:-.005em; color:var(--lila);
}
@media(max-width:760px){ .swm-met .h1 .h1-offre{ font-size:.52em; margin-top:.36em; } }

/* ==========================================================================
   v9 — AVIS : LOGO REEL DU CLIENT + G OFFICIEL DE GOOGLE
   Les initiales ne disaient rien. Le logo, si. La pastille s'adapte a la
   luminance du logo (assets/logos/manifeste.json) : un logo blanc sur
   pastille sombre reste lisible, ce qu'un fond blanc uniforme interdisait.
   ========================================================================== */
.swm-rev-logo{ width:44px; height:44px; flex-shrink:0; border-radius:12px;
  display:grid; place-items:center; overflow:hidden; padding:5px;
  border:1px solid #e5e5ec; }
.swm-rev-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.swm-rev-logo.clair { background:#f7f7fb; }
.swm-rev-logo.sombre{ background:#160042; border-color:#160042; }

/* Le G officiel remplace le degrade maison : 22px de rond, 13px de glyphe. */
.swm-rev-google{ padding:4px; }
.swm-rev-google svg{ width:100%; height:100%; display:block; }

/* ==========================================================================
   v10 — CONTEXTE LOCAL EN GAUCHE-DROITE
   L'ancienne version empilait trois paragraphes ferres a gauche dans une
   colonne centree : du texte flottant sans ancrage visuel. Ici, portrait
   d'artisan a gauche, propos a droite, chiffre local pose sur la photo.
   ========================================================================== */
.wt-ctx{ background:#fbfbfe; }
.ctx-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:56px; align-items:center; max-width:1180px; margin:0 auto; }

.ctx-photo{ position:relative; margin:0; border-radius:18px; overflow:hidden;
  box-shadow:0 24px 70px rgba(22,0,66,.16); }
.ctx-photo img{ width:100%; height:100%; display:block; object-fit:cover;
  aspect-ratio:2/3; }
/* le chiffre local, pose en bas de la photo sur un voile sombre */
.ctx-stat{ position:absolute; left:16px; right:16px; bottom:16px;
  background:rgba(22,0,66,.90); color:#fff; border-radius:14px; padding:16px 18px;
  backdrop-filter:blur(6px); }
.ctx-stat b{ display:block; font-family:'Inter Tight',sans-serif; font-weight:800;
  font-size:34px; line-height:1; letter-spacing:-.02em; color:#fff; }
.ctx-stat span{ display:block; margin-top:6px; font-size:12.5px; line-height:1.45;
  color:rgba(255,255,255,.82); }

.ctx-texte .h2{ margin:14px 0 18px; }
.ctx-texte p{ font-size:15.5px; line-height:1.72; color:#4a4a5a; margin:0 0 14px; }
.ctx-zone{ margin:22px 0 18px; }
.ctx-zone-t{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:13px;
  color:#160042; margin:0 0 10px !important; }
.ctx-villes{ display:flex; flex-wrap:wrap; gap:7px; }
.ctx-ville{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:12.5px;
  color:#3524ff; background:rgba(53,36,255,.07); border:1px solid rgba(53,36,255,.16);
  border-radius:999px; padding:5px 12px; }

@media(max-width:900px){
  .ctx-grid{ grid-template-columns:1fr; gap:28px; }
  .ctx-photo img{ aspect-ratio:4/3; object-position:center 22%; }
  .ctx-stat b{ font-size:28px; }
}

/* La note etait accrochee a .wt-prose ; hors de ce conteneur elle retombait
   en texte nu. On la rend disponible dans la colonne du contexte local. */
.swm-met .ctx-texte .wt-note{
  margin-top:26px; border-left:3px solid var(--lila); background:var(--lila-wash);
  border-radius:0 var(--r) var(--r) 0; padding:18px 22px; font-size:15.5px; color:var(--dark);
}

/* ==========================================================================
   v11 — FAQ SUR DEUX COLONNES (PC) / UNE (MOBILE)
   Dix accordeons empiles faisaient une colonne interminable. Deux colonnes
   sur PC divisent la hauteur par deux ; sur mobile on reste sur une colonne,
   c'est la seule mise en page tenable au pouce.
   `align-content:start` evite que les accordeons s'etirent quand l'un
   d'eux est ouvert et pas l'autre.
   ========================================================================== */
.swm-met .wt-faq{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 22px; align-content:start; align-items:start; }
.swm-met .wt-faq > details{ margin:0; height:auto; }
/* les paragraphes fusionnes respirent */
.swm-met .wt-faq .a p{ margin:0 0 12px; }
.swm-met .wt-faq .a p:last-child{ margin-bottom:0; }
@media(max-width:860px){
  .swm-met .wt-faq{ grid-template-columns:1fr; gap:12px; }
}

/* ==========================================================================
   v12 — FONCTIONNALITES SUR FOND DE MARQUE + RENDU MOBILE
   Le defaut : section blanche, cartes blanches, icones grises — aucune
   difference de valeur, donc aucune hierarchie. Le fond sombre remet du
   contraste, et le telephone donne un point d'ancrage concret.
   ========================================================================== */
.wt-fn .wt-head{ margin-bottom:38px; }
.fn-grid{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:52px; align-items:center; max-width:1180px; margin-inline:auto; }

.fn-device{ position:relative; justify-self:center; }
.fn-device img{ width:100%; max-width:330px; height:auto; display:block;
  filter:drop-shadow(0 34px 70px rgba(0,0,0,.5)); }
.fn-tag{ position:absolute; right:-14px; bottom:44px; background:#fff; color:#160042;
  border-radius:13px; padding:11px 15px; box-shadow:0 14px 40px rgba(0,0,0,.34); }
.fn-tag b{ display:block; font-family:'Inter Tight',sans-serif; font-weight:800;
  font-size:13px; line-height:1.1; }
.fn-tag span{ display:block; margin-top:3px; font-size:11.5px; color:#6b6b7a; }

.fn-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.fn-card{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  border-radius:15px; padding:20px; transition:background .22s, border-color .22s, transform .22s; }
.fn-card:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3);
  transform:translateY(-3px); }
.fn-card .wt-ico{ width:40px; height:40px; border-radius:11px; margin-bottom:13px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24);
  display:flex; align-items:center; justify-content:center; color:#fff; }
.fn-card .wt-ico svg{ width:19px; height:19px; }
.fn-card h3{ color:#fff; font-family:'Inter Tight',sans-serif; font-weight:700;
  font-size:15.5px; line-height:1.3; margin:0 0 7px; }
.fn-card p{ font-size:13.5px; line-height:1.62; color:rgba(255,255,255,.76); margin:0; }

@media(max-width:1000px){
  .fn-grid{ grid-template-columns:1fr; gap:36px; }
  .fn-device img{ max-width:270px; }
}
@media(max-width:620px){
  .fn-cards{ grid-template-columns:1fr; }
  .fn-tag{ right:-6px; bottom:30px; }
}

/* ==========================================================================
   v13 — POURQUOI UN SITE : DEUX COLONNES, ARGUMENTS NUMEROTES
   Trois paragraphes dans une colonne centree ne donnaient aucune prise a
   l'oeil. Le titre reste a gauche pendant que les arguments defilent.
   ========================================================================== */
.wt-pq{ background:#fbfbfe; }
.pq-grid{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:56px; align-items:start; max-width:1180px; margin-inline:auto; }
.pq-tete{ position:sticky; top:96px; }
.pq-tete .h2{ margin:14px 0 20px; }

.pq-item{ display:flex; gap:20px; padding:22px 0; border-top:1px solid var(--line); }
.pq-item:first-child{ border-top:0; padding-top:0; }
.pq-num{ flex:none; font-family:'Inter Tight',sans-serif; font-weight:800; font-size:14px;
  color:var(--lila); background:var(--lila-wash); border:1px solid rgba(53,36,255,.18);
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; }
.pq-corps h3{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:17px;
  color:var(--dark); margin:6px 0 9px; line-height:1.28; }
.pq-corps p{ font-size:15px; line-height:1.72; color:#4a4a5a; margin:0; }

@media(max-width:900px){
  .pq-grid{ grid-template-columns:1fr; gap:30px; }
  .pq-tete{ position:static; }
  .pq-item{ gap:15px; padding:18px 0; }
}

/* Variante sans telephone : la grille occupe toute la largeur, trois colonnes.
   Elle sert la section a cartes du hub, qui doit avoir la meme finition que
   les fonctionnalites de la feuille sans en reprendre le visuel. */
.fn-cards-3{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1180px; margin-inline:auto; }
@media(max-width:980px){ .fn-cards-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px){ .fn-cards-3{ grid-template-columns:1fr; } }

/* ==========================================================================
   v14 — HUB SECTEUR : ROUTAGE PAR METIER
   Au niveau secteur, le visiteur n'a ni sa ville ni son metier resolus. Cette
   grille est l'INTERFACE de la page, pas un maillage de bas de page — d'ou
   sa position au rang 3. Les communes sont repliees dans un <details> : les
   356 liens restent dans le DOM (35 feuilles ne sont liees que par ce hub)
   sans faire un mur de 356 ancres a l'ecran.
   ========================================================================== */
.rt-grid{ display:grid; gap:16px; max-width:1000px; margin-inline:auto; }
.rt-card{ display:flex; gap:18px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:22px 24px; transition:border-color .2s, box-shadow .2s; }
.rt-card:hover{ border-color:rgba(53,36,255,.28); box-shadow:0 14px 44px rgba(22,0,66,.09); }
.rt-ic{ flex:none; width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:var(--lila-wash); border:1px solid rgba(53,36,255,.18); color:var(--lila); }
.rt-ic svg{ width:22px; height:22px; }
.rt-corps{ min-width:0; flex:1; }
.rt-corps > b{ display:block; font-family:'Inter Tight',sans-serif; font-weight:700;
  font-size:17px; color:var(--dark); line-height:1.28; }
.rt-desc{ display:block; margin-top:5px; font-size:14px; color:#4a4a5a; }
.rt-chiffres{ display:block; margin-top:9px; font-size:13px; color:#6b6b7a; }
.rt-chiffres b{ color:var(--lila); font-weight:700; }

.rt-com{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.rt-com > summary{ cursor:pointer; list-style:none; font-family:'Inter Tight',sans-serif;
  font-weight:600; font-size:13px; color:var(--lila); }
.rt-com > summary::-webkit-details-marker{ display:none; }
.rt-com > summary::after{ content:" +"; font-weight:800; }
.rt-com[open] > summary::after{ content:" ‘2"; }
.rt-liens{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;
  max-height:230px; overflow-y:auto; }
.rt-liens a{ font-size:12.5px; color:#4a4a5a; background:#f6f6fb;
  border:1px solid var(--line); border-radius:999px; padding:4px 11px; text-decoration:none; }
.rt-liens a:hover{ color:var(--lila); border-color:rgba(53,36,255,.3); background:var(--lila-wash); }

/* Tableau des metiers du secteur, sous la bande de chiffres. */
.sc-tab{ max-width:760px; margin:28px auto 0; overflow-x:auto; }
.sc-tab table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.sc-tab th, .sc-tab td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); }
.sc-tab th{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.04em; color:#6b6b7a; }
.sc-tab td:nth-child(2), .sc-tab td:nth-child(3){ font-variant-numeric:tabular-nums; color:#4a4a5a; }
.sc-tab td a{ color:var(--dark); font-weight:600; text-decoration:none; }
.sc-tab td a:hover{ color:var(--lila); }

/* Fonctionnalites sans telephone : la grille prend toute la largeur. */
.fn-grid-plein{ grid-template-columns:1fr !important; }

@media(max-width:620px){
  .rt-card{ flex-direction:column; gap:14px; padding:20px; }
  .rt-liens{ max-height:190px; }
}

/* maillage villes (mu-plugin swm-maillage-villes, 07/08/2026) */
.swm-mp{max-width:1080px;margin:48px auto;padding:0 20px}.swm-mp h2{font-weight:800;letter-spacing:-1px;color:#160042}.swm-mp p.l{color:#6b6b7a;margin:10px 0 18px}.swm-mp .g{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}.swm-mp .g a{display:block;padding:12px 14px;border:1px solid #e6e6ef;border-radius:10px;text-decoration:none;color:#160042;font-weight:600;font-size:15px;background:#fff}.swm-mp .g a:hover{border-color:#3524FF;color:#3524FF}