/* =====================================================================
   GABARIT « LANDING SECTEUR » — feuille partagée
   ---------------------------------------------------------------------
   Sert TOUTES les pages /secteurs/<slug>/ (restauration, santé & bien-être,
   commerce & artisanat, services pro) ET le mini-hub /secteurs/ (§ 8 bis).
   Rien de propre à un secteur ici :
   ni métier, ni produit, ni nom, ni prix, ni image, ni lien, ni coordonnée
   de repère — tout cela vit dans le HTML de chaque page, y compris le
   DESSIN du plan (le SVG est inline : ses coordonnées sont du contenu).
   Cette feuille ne décrit que la composition et la matière.

   À charger APRÈS ../../styles.css (elle en surcharge .kktop) et AVANT
   ../../commun/panier.css.

   Plan de la page, dans l'ordre : hero split (le moment du métier + le
   collage réel dans un cadre dessiné) · le plan des lieux (SVG interactif,
   parcours + repères numérotés) · les fiches de poste achetables · le poste
   majeur · un bloc sombre inséré · la dégressivité branchée sur la formule
   du panier · la finale « tout équiper » avec ses steppers.

   Trois plans seulement : #FFF, --surface-sunken pour les sections
   encaissées, --surface-dark / --bg-dark pour les blocs insérés. Aucune
   couture dégradée : des coupes franches, des respirations identiques de
   part et d'autre (--sx-seam), et des blocs encartés en radius 28/22.
   ===================================================================== */

.sx{
  --sx-seam:clamp(60px,6.6vw,100px);
  --sx-panel:#F1F5FB;          /* fond EXACT des packshots ../../produits/ */
  --sx-card-r:22px;
  --sx-block-r:28px;
}

/* ---- En-tête : la pilule de nav vit dans .kktop, mais SANS le contrat
     « hauteur d'un viewport » du hero de l'accueil. ---- */
.sx-top.kktop{display:block;min-height:0;height:auto;background:var(--sx-panel)}

.sx-sec{padding:var(--sx-seam) 0}
/* La pilule est collante : les ancres se posent en dessous. */
.sx-sec[id],.sx-poste[id]{scroll-margin-top:96px}
.sx-sec--sunken{background:var(--surface-sunken)}
.sx-sec--tight{padding:calc(var(--sx-seam) * .55) 0}

/* =====================================================================
   1 · TYPO DU GABARIT
   ===================================================================== */
/* align-items:flex-start : quand la liste de métiers passe à deux lignes, le
   losange doit rester sur la PREMIÈRE, pas flotter au milieu du bloc. */
.sx-eyebrow{
  display:inline-flex;align-items:flex-start;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin:0 0 16px;
}
.sx-eyebrow--light{color:var(--ku-blue-100)}
.sx-eyebrow .sx-hex{width:13px;height:13px;margin-top:2px;fill:currentColor}
.sx-h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:-.03em;
  color:var(--text);margin:0;text-wrap:balance;
}
.sx-h2{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.022em;
  color:var(--text);margin:0;text-wrap:balance;
}
.sx-h2--light{color:#fff}
.sx-hl{color:var(--brand)}
.sx-lede{
  font-size:clamp(16.5px,1.35vw,18.5px);line-height:1.58;color:var(--text-soft);
  margin:20px 0 0;max-width:33em;
}
.sx-lede b{color:var(--text);font-weight:700}
.sx-head{max-width:44em;margin:0 0 clamp(30px,3.4vw,46px)}
.sx-head .sx-lede{margin-top:16px}

/* Le soulignement doit rester collé au texte, la CIBLE doit faire 44 px : on
   étend la zone tactile par un calque, pas par du padding — rien ne bouge à
   l'écran, et le calque ne déborde jamais latéralement de son propre lien. */
.sx-link{
  position:relative;
  display:inline-flex;align-items:center;gap:7px;
  font-size:15px;font-weight:600;color:var(--brand);
  border-bottom:1.5px solid var(--ku-blue-200);padding-bottom:2px;
  transition:border-color .18s ease,color .18s ease;
}
.sx-link::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px;
}
.sx-link:hover{color:var(--brand-hover);border-color:var(--brand)}
.sx-link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.sx-link:hover svg{transform:translateX(3px)}
.sx-link--light{color:var(--ku-blue-100);border-color:rgba(255,255,255,.28)}
.sx-link--light:hover{color:#fff;border-color:#fff}

/* Fil d'Ariane discret, posé sur le plan clair, aligné au rail. */
.sx-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:14px 0 clamp(16px,1.8vw,22px);font-size:13px;color:var(--text-muted)}
.sx-crumb a{position:relative;color:var(--text-muted);border-bottom:1px solid transparent}
.sx-crumb a::after{content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px}
.sx-crumb a:hover{color:var(--brand);border-bottom-color:currentColor}
.sx-crumb__sep{width:10px;height:10px;flex:none;fill:var(--ku-blue-200)}
.sx-crumb__here{color:var(--text);font-weight:600}

/* =====================================================================
   2 · HERO — texte à gauche, collage réel du secteur à droite
   ===================================================================== */
.sx-hero{background:var(--sx-panel);padding:clamp(30px,3.6vw,50px) 0 var(--sx-seam)}
.sx-hero__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(32px,4vw,58px);align-items:center}
.sx-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-top:30px}
/* Faits tarifaires : des données, pas des arguments. Une seule ligne sobre. */
.sx-facts{display:flex;flex-wrap:wrap;gap:9px 26px;margin:26px 0 0;padding:22px 0 0;
  border-top:1px solid var(--ku-blue-100)}
.sx-facts li{display:inline-flex;align-items:flex-start;gap:8px;font-size:14px;
  font-weight:600;color:var(--text-soft)}
.sx-facts .sx-hex{width:12px;height:12px;margin-top:5px;flex:none;fill:var(--brand)}
.sx-facts b{color:var(--text);font-weight:700}
/* Un fait tarifaire ne se coupe pas en son milieu : sous 360 px la ligne des
   deux prix doit casser APRÈS la virgule, jamais entre « la » et « carte ». */
.sx-nb{white-space:nowrap}

/* Cadre dessiné ASSUMÉ : carte blanche, photo à l'intérieur, légende dessous.
   Le collage est une scène réelle (bois, matière) : il lui faut un bord, pas
   un fondu. */
.sx-frame{background:#fff;border:1px solid var(--border);border-radius:var(--sx-card-r);
  box-shadow:var(--el-16);padding:12px;margin:0}
.sx-frame__img{position:relative;border-radius:14px;overflow:hidden;display:block;
  background:var(--ku-ink-50)}
.sx-frame__img img{width:100%;height:auto;display:block}
/* Repères posés dans le fond de chaque scène, jamais sur l'objet : un filin
   descend vers lui, le repère ne le masque pas. */
.sx-spotdot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:24px;height:24px;pointer-events:none}
.sx-spotdot svg{width:24px;height:24px;fill:var(--brand);
  filter:drop-shadow(0 3px 8px rgba(7,12,30,.5))}
.sx-spotdot::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;
  height:var(--len,54px);transform:translateX(-50%);background:rgba(255,255,255,.72)}
.sx-frame__legend{display:grid;grid-template-columns:repeat(4,1fr);margin:12px 2px 2px}
.sx-frame__legend li{padding:2px 12px;border-left:1px solid var(--border);
  font-size:12.5px;font-weight:600;color:var(--text-soft);line-height:1.35}
.sx-frame__legend li:first-child{border-left:0;padding-left:2px}
.sx-frame__legend b{display:block;color:var(--text);font-weight:700}

/* =====================================================================
   3 · LE PLAN DES LIEUX — pièce maîtresse du gabarit
   ---------------------------------------------------------------------
   Le dessin est inline dans la page (coordonnées = contenu). Ici : la
   matière, les repères, la légende, et le comportement mobile.
   ===================================================================== */
.sx-plan__card{background:#fff;border:1px solid var(--border);border-radius:24px;
  padding:clamp(12px,1.4vw,20px);box-shadow:var(--el-8)}
/* Conteneur de défilement : sous 820px le plan garde sa taille lisible et
   glisse à l'horizontale DANS sa carte. contain:paint empêche le débordement
   de peindre hors de la boîte (filet Safari). */
.sx-plan__view{overflow-x:auto;overflow-y:hidden;contain:paint;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  border-radius:12px}
.sx-plan__svg{display:block;width:100%;height:auto}
.sx-plan__cap{display:flex;align-items:center;gap:9px;margin:14px 6px 2px;
  font-size:13px;color:var(--text-muted)}
.sx-plan__cap .sx-hex{width:12px;height:12px;flex:none;fill:var(--ku-blue-300)}
.sx-plan__hint{display:none}

/* — matière du plan — */
.sx-p-out{fill:#E4ECFF}
.sx-p-floor{fill:#F7FAFF}
.sx-p-wall{fill:none;stroke:#5B7CFF;stroke-width:4;stroke-linejoin:round}
.sx-p-glass{fill:none;stroke:#2C4BFF;stroke-width:2.6}
.sx-p-furn{fill:#D7E3FF;stroke:#89A6FF;stroke-width:1.5}
.sx-p-mass{fill:#A9C0FF;stroke:#5B7CFF;stroke-width:1.5}
.sx-p-thin{fill:none;stroke:#89A6FF;stroke-width:1.4;opacity:.7}
.sx-p-lab{fill:#7C88A8;font-size:15px;font-weight:700;letter-spacing:.16em;
  font-family:var(--font-display);text-transform:uppercase}
.sx-p-route{fill:none;stroke:var(--brand);stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round;opacity:.34}
.sx-p-spot{cursor:default}
.sx-p-spot .sx-p-halo{fill:var(--brand);opacity:.12;transition:opacity .18s ease}
.sx-p-spot .sx-p-hex{fill:var(--brand);transition:fill .18s ease}
.sx-p-spot .sx-p-num{fill:#fff;font-size:16px;font-weight:700;text-anchor:middle;
  font-family:var(--font-display);font-variant-numeric:tabular-nums}
.sx-p-spot .sx-p-lead{stroke:var(--brand);stroke-width:1.8;opacity:.5}
.sx-p-spot.is-hot .sx-p-halo{opacity:.26}
.sx-p-spot.is-hot .sx-p-hex{fill:var(--brand-hover)}

/* Légende cliquable : chaque ligne mène à sa fiche de poste et allume son
   repère au survol comme au focus clavier. Le nombre de postes est du CONTENU :
   cinq supports (restauration) ou quatre (les autres familles) — d'où le
   modificateur, qui ne dit que le compte, jamais le secteur. */
.sx-legend{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:26px 0 0;
  padding:0;list-style:none}
.sx-legend--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sx-legend__it{display:block;height:100%;padding:16px 16px 16px 18px;
  border-left:1px solid var(--border);border-radius:12px;transition:background .18s ease}
.sx-legend li:first-child .sx-legend__it{border-left:0}
.sx-legend__it:hover,.sx-legend__it:focus-visible{background:var(--ku-blue-25)}
.sx-legend__n{display:inline-block;font-size:12.5px;font-weight:700;color:var(--brand);
  letter-spacing:.08em;font-variant-numeric:tabular-nums;margin-bottom:6px}
.sx-legend__pl{display:block;font-size:15.5px;font-weight:700;color:var(--text);line-height:1.25}
.sx-legend__pr{display:block;font-size:13px;color:var(--text-muted);margin-top:4px;line-height:1.35}

/* =====================================================================
   4 · FICHES DE POSTE — cartes achetables
   ===================================================================== */
.sx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,26px)}
/* Une famille de quatre supports laisse TROIS fiches en grille (le quatrième
   est le poste majeur, traité en pleine largeur plus bas). À deux colonnes, la
   troisième carte laisserait un trou : on passe à trois colonnes et le packshot
   remonte au-dessus du texte. Composition seulement — aucun secteur nommé. */
.sx-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* auto puis 1fr : la carte est étirée par sa rangée de grille et, sans
   gabarit de rangées, `align-content:stretch` répartissait le surplus entre
   la ligne packshot et la ligne texte — le panneau photo suivait alors la
   longueur du texte et la rangée finissait en dents de scie (262 / 273 /
   282 px). Seul le corps absorbe désormais le surplus : les trois panneaux
   photo font la même hauteur, la ligne basse est droite. */
.sx-grid--3 .sx-poste{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.sx-grid--3 .sx-poste__shot{padding:20px 0 14px;min-height:0}
.sx-grid--3 .sx-poste__shot img{width:auto;max-width:100%;max-height:228px}
.sx-poste{display:grid;grid-template-columns:42% minmax(0,1fr);
  background:#fff;border:1px solid var(--border);border-radius:var(--sx-card-r);
  overflow:hidden;box-shadow:var(--el-4);
  transition:box-shadow .22s ease,border-color .22s ease,transform .22s ease;
  scroll-margin-top:100px}
.sx-poste:hover{box-shadow:var(--el-16);border-color:var(--ku-blue-200);transform:translateY(-3px)}
/* Le packshot est sur #F1F5FB — exactement le fond du fichier .webp : le
   produit se fusionne au panneau, aucun liseré, aucun entre-deux. */
.sx-poste__shot{background:var(--sx-panel);display:flex;align-items:center;
  justify-content:center;padding:16px 0;min-height:100%}
.sx-poste__shot img{width:100%;height:auto;max-height:322px;object-fit:contain}
.sx-poste__body{padding:22px 22px 20px;display:flex;flex-direction:column}
.sx-poste__hd{display:flex;align-items:baseline;gap:10px;margin-bottom:3px}
.sx-num{font-size:12.5px;font-weight:700;color:var(--brand);letter-spacing:.1em;
  font-variant-numeric:tabular-nums;flex:none}
.sx-poste__place{font-family:var(--font-display);font-size:20px;font-weight:700;
  letter-spacing:-.015em;color:var(--text);margin:0;line-height:1.2}
.sx-poste__where{font-size:13px;color:var(--text-muted);margin:0 0 12px;line-height:1.45}
.sx-poste__angle{font-size:14.5px;line-height:1.55;color:var(--text-soft);margin:0 0 16px}
.sx-poste__buy{margin-top:auto;padding-top:14px;border-top:1px solid var(--border)}
.sx-prod{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.sx-prod__ic{width:17px;height:17px;flex:none}
.sx-prod__ic--mono{fill:var(--brand)}
.sx-prod__name{font-size:14px;font-weight:700;color:var(--text);line-height:1.3}
.sx-price{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.sx-price span{font-size:12.5px;font-weight:600;color:var(--text-muted);letter-spacing:0}
.sx-poste__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:14px}

/* Bouton d'ajout : la confirmation se pose SUR le bouton, là où le pouce
   vient d'appuyer — le tiroir, lui, s'ouvre par-dessus. */
.sx-add{position:relative;min-height:44px}
.sx-add__ok{display:none}
.sx-add.is-added{background:var(--ku-blue-700)}
.sx-add.is-added .sx-add__ic{display:none}
.sx-add.is-added .sx-add__ok{display:block}

/* =====================================================================
   5 · POSTE MAJEUR — bloc large, photo réelle + bloc d'achat
   ===================================================================== */
.sx-key{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(30px,3.6vw,54px);align-items:center}
.sx-key__cap{display:flex;align-items:center;gap:9px;margin:12px 4px 2px;
  font-size:12.5px;color:var(--text-muted)}
.sx-key__cap .sx-hex{width:12px;height:12px;flex:none;fill:var(--ku-blue-300)}
.sx-tag{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;
  border-radius:var(--r-pill);padding:6px 14px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;box-shadow:var(--el-brand-8)}
.sx-why{margin:24px 0 0;padding:0}
.sx-why li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.55;
  color:var(--text-soft);padding:9px 0;border-top:1px solid var(--border)}
.sx-why li:first-child{border-top:0;padding-top:0}
.sx-why .sx-hex{width:13px;height:13px;fill:var(--brand);flex:none;margin-top:5px}
.sx-buybar{margin-top:26px;padding:20px 22px;background:#fff;border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--el-4)}
.sx-buybar__line{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:14px}
.sx-buybar__line .sx-price{margin-right:auto}

/* =====================================================================
   6 · BLOCS SOMBRES INSÉRÉS — la transition est DESSINÉE, jamais fondue
   ===================================================================== */
.sx-dark{background:var(--surface-dark);border-radius:var(--sx-block-r);
  padding:clamp(28px,3.4vw,46px);color:var(--text-on-dark);box-shadow:var(--el-28);
  --focus-ring:var(--focus-ring-on-dark)}
.sx-dark--deep{background:var(--bg-dark)}
.sx-dark p{font-size:15.5px;line-height:1.62;color:var(--text-on-dark);margin:16px 0 0;max-width:38em}
.sx-dark__split{display:grid;grid-template-columns:minmax(0,1fr) 296px;
  gap:clamp(26px,3vw,44px);align-items:center}
.sx-dark__acts{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:24px}
/* Recadrage CSS d'une scène du collage — pas de fichier dérivé : la fenêtre
   est calculée en pourcentages, donc stable quelle que soit la largeur rendue.
   Le cadrage (--sx-crop-size / --sx-crop-pos / --sx-crop-ratio) est posé par
   la page.
   ⚠ background-image AUSSI : une url() passée par variable est résolue depuis
   la feuille où la var() est LUE (ici /secteurs/secteur.css), pas depuis la
   page — le chemin de la page tomberait un cran trop haut et servirait un 404.
   La page écrit donc son background-image en style inline, résolu contre le
   document. */
.sx-crop{aspect-ratio:var(--sx-crop-ratio,296/336);border-radius:16px;
  background-repeat:no-repeat;
  background-size:var(--sx-crop-size,533.33%) auto;
  background-position:var(--sx-crop-pos,50% 50%);
  box-shadow:var(--el-16),inset 0 0 0 1px rgba(255,255,255,.16)}

/* =====================================================================
   7 · DÉGRESSIVITÉ — prix réels, calculés par la formule du panier
   ===================================================================== */
.sx-deg{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(26px,3vw,44px);background:#fff;border:1px solid var(--border);
  border-radius:24px;padding:clamp(24px,2.8vw,38px);box-shadow:var(--el-8);align-items:center}
.sx-deg__q{font-size:15px;font-weight:700;color:var(--text);margin:0}
.sx-seg{display:inline-flex;background:var(--ku-ink-25);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:4px;gap:2px;margin-top:20px}
.sx-seg button{border-radius:var(--r-pill);padding:9px 17px;min-height:44px;font-size:14px;
  font-weight:700;color:var(--text-soft);font-variant-numeric:tabular-nums;
  transition:background .18s ease,color .18s ease}
.sx-seg button[aria-pressed="true"]{background:var(--brand);color:#fff;box-shadow:var(--el-brand-4)}
.sx-degnote{font-size:13px;color:var(--text-muted);margin:18px 0 0;line-height:1.5}
.sx-rows{display:grid;gap:12px}
.sx-row{display:flex;align-items:center;gap:14px;background:var(--ku-blue-25);
  border:1px solid var(--ku-blue-100);border-radius:16px;padding:14px 18px}
.sx-row__ic{width:34px;height:34px;border-radius:10px;background:#fff;display:grid;
  place-items:center;flex:none;box-shadow:var(--el-2)}
.sx-row__ic svg{width:17px;height:17px}
.sx-row__id{min-width:0;flex:1 1 auto}
.sx-row__t{display:block;font-size:14px;font-weight:700;color:var(--text);line-height:1.3}
.sx-row__s{display:block;font-size:12.5px;color:var(--text-muted);margin-top:2px}
.sx-row__p{margin-left:auto;text-align:right;flex:none}
.sx-row__pu{font-size:20px;font-weight:700;color:var(--brand);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;display:block;line-height:1.15}
.sx-row__was{font-size:12px;color:var(--text-muted);text-decoration:line-through;
  font-variant-numeric:tabular-nums}
.sx-row__off{font-size:12px;font-weight:700;color:var(--ku-blue-700);font-variant-numeric:tabular-nums}

/* Passerelle configurateur */
.sx-logo{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
  background:var(--ku-blue-25);border:1px solid var(--ku-blue-100);
  border-radius:20px;padding:22px 26px;margin-top:22px}
.sx-logo__in{flex:1 1 340px}
.sx-logo__t{font-size:15.5px;font-weight:700;color:var(--text);margin:0}
.sx-logo__s{font-size:14px;color:var(--text-soft);margin:5px 0 0;max-width:42em;line-height:1.5}

/* =====================================================================
   8 · FINALE — composer la sélection, l'ajouter d'un coup
   ===================================================================== */
.sx-final{background:var(--surface-sunken);padding:var(--sx-seam) 0 clamp(48px,5.4vw,78px)}
.sx-rowsel{margin:clamp(30px,3.6vw,44px) 0 0}
.sx-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:0;margin:0}
.sx-tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Retrait d'un support de la vente : la tuile de sélection et la ligne du
   barème portent « hidden ». Les deux règles sont là parce que .sx-tile et
   .sx-row sont en display:flex, qui gagne sur le display:none de [hidden].
   Retour des cartes : les attributs partent, ces règles dorment. */
.sx-tile[hidden],.sx-row[hidden]{display:none}
.sx-tile{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);
  border:1px solid var(--ku-blue-100);overflow:hidden;box-shadow:var(--el-2);
  transition:border-color .2s ease,box-shadow .2s ease}
.sx-tile.is-picked{border-color:var(--brand);box-shadow:var(--el-brand-8)}
.sx-tile__fig{margin:0;background:var(--sx-panel);display:flex;align-items:center;
  justify-content:center;padding:14px 8px 12px;border-bottom:1px solid var(--ku-blue-100)}
.sx-tile__fig img{width:auto;height:146px;max-width:100%;object-fit:contain}
.sx-tile__in{padding:13px 14px 15px;display:flex;flex-direction:column;flex:1}
.sx-tile__name{margin:0;font-size:14px;font-weight:700;line-height:1.3;color:var(--text)}
.sx-tile__name a{position:relative;display:block}
.sx-tile__name a::after{content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px}
.sx-tile__name a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.sx-tile__line{margin:5px 0 0;font-size:12.5px;line-height:1.45;color:var(--text-muted)}
.sx-tile__price{margin:9px 0 0;font-size:15px;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums}
.sx-tile__price small{font-size:11px;font-weight:700;color:var(--text-muted);margin-left:4px}
/* margin-top:auto : les cinq compteurs s'alignent quel que soit le nombre de
   lignes du titre. Une rangée doit se lire d'un seul balayage. */
.sx-step{display:flex;align-items:center;gap:6px;margin:12px 0 0;padding-top:12px;
  margin-top:auto;border-top:1px solid var(--ku-blue-50)}
.sx-step button{width:44px;height:44px;flex:none;border-radius:var(--r-sm);
  background:var(--ku-blue-25);border:1px solid var(--ku-blue-100);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,border-color .18s ease}
.sx-step button:hover:not(:disabled){background:var(--brand-soft);border-color:var(--brand)}
.sx-step button:disabled{color:var(--ku-ink-300);cursor:default}
.sx-step button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round}
.sx-step__v{flex:1;text-align:center;font-size:16px;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums}
.sx-step__v[data-zero="true"]{color:var(--ku-ink-300)}

.sx-selbar{margin:20px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  padding:clamp(16px,1.8vw,20px) clamp(18px,2vw,24px);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--ku-blue-100);box-shadow:var(--el-4)}
.sx-selbar__txt{font-size:14.5px;line-height:1.5;color:var(--text-soft)}
.sx-selbar__txt b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.sx-selbar__end{margin-left:auto;display:flex;flex-wrap:wrap;gap:10px}
.sx-add[disabled]{background:var(--ku-ink-200);color:#fff;box-shadow:none;cursor:default}
.sx-add[disabled]:hover{background:var(--ku-ink-200);transform:none;box-shadow:none}

/* Rappels transversaux : des faits, pas des promesses. */
.sx-reminders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 28px;
  margin:clamp(30px,3.6vw,44px) 0 0;padding:clamp(26px,3vw,34px) 0 0;
  border-top:1px solid var(--border)}
.sx-reminders li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;
  color:var(--text-soft)}
.sx-reminders .sx-hex{width:14px;height:14px;margin:3px 0 0;flex:none;fill:var(--brand)}
.sx-reminders b{color:var(--text);font-weight:700}
.sx-reminders a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* Passerelle devis pro */
.sx-pro{margin:clamp(30px,3.6vw,44px) 0 0;display:grid;
  grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(18px,2.4vw,32px);
  padding:clamp(22px,2.6vw,30px) clamp(22px,2.8vw,34px);border-radius:var(--r-xl);
  background:#fff;border:1px solid var(--ku-blue-100);box-shadow:var(--el-8)}
.sx-pro__t{margin:0;font-size:clamp(18px,1.7vw,22px);font-weight:700;letter-spacing:-.015em;
  line-height:1.25;color:var(--text)}
.sx-pro__p{margin:9px 0 0;font-size:14.5px;line-height:1.55;color:var(--text-soft);max-width:44em}
.sx-pro__cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 24px;border-radius:var(--r-pill);white-space:nowrap;
  background:transparent;color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand);
  font-size:15px;font-weight:700;transition:background .2s ease,color .2s ease}
.sx-pro__cta:hover{background:var(--brand);color:#fff}
.sx-pro__cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   8 bis · MINI-HUB /secteurs/ — la grille des familles
   ---------------------------------------------------------------------
   Une carte par famille : le collage réel en tête, le nom, la phrase
   d'angle, le lien. Rien d'achetable ici. Aucune famille n'est nommée dans
   cette feuille : le collage, le nom et l'angle sont du contenu de page.
   La carte entière est le lien (l'ancre enveloppe le contenu de flux), la
   cible tactile fait donc toute la hauteur.
   ===================================================================== */
/* Le hub n'a pas de collage en vis-à-vis de son titre : son en-tête respire
   moins bas que celui d'une landing, sinon la page s'ouvre sur un vide. */
.sx-hero--hub{padding-bottom:clamp(26px,3vw,40px)}
.sx-fams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,28px);margin:0;padding:0;list-style:none}
.sx-fam{background:#fff;border:1px solid var(--border);border-radius:var(--sx-card-r);
  overflow:hidden;box-shadow:var(--el-4);
  transition:box-shadow .22s ease,border-color .22s ease,transform .22s ease}
.sx-fam:hover{box-shadow:var(--el-16);border-color:var(--ku-blue-200);transform:translateY(-3px)}
.sx-fam__hit{display:flex;flex-direction:column;height:100%}
/* Le cadre porte le ratio DU FICHIER (1280×853). Il avait gardé 1280/520,
   celui d'un asset qui n'existe plus : le cover amputait alors 39 % de la
   hauteur, 19,5 % en haut et 19,5 % en bas, sur les quatre collages — alors
   que les landings servent le même fichier entier. */
.sx-fam__fig{margin:0;background:var(--ku-ink-50);aspect-ratio:1280/853;overflow:hidden}
.sx-fam__fig img{width:100%;height:100%;object-fit:cover;display:block}
.sx-fam__in{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.sx-fam__t{margin:0;font-family:var(--font-display);font-size:clamp(19px,1.7vw,22px);
  font-weight:700;letter-spacing:-.018em;line-height:1.2;color:var(--text)}
.sx-fam__p{margin:9px 0 0;font-size:14.5px;line-height:1.55;color:var(--text-soft)}
.sx-fam__jobs{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-muted)}
/* Faux lien : l'ancre est déjà la carte, on n'imbrique pas deux interactifs. */
.sx-fam__go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:18px;
  font-size:15px;font-weight:600;color:var(--brand)}
.sx-fam__go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.sx-fam__hit:hover .sx-fam__go svg{transform:translateX(3px)}
@media (max-width:760px){.sx-fams{grid-template-columns:1fr}}

/* =====================================================================
   9 · ANIMATIONS-SIGNATURE — une par section
   · hero : les repères se posent sur le collage (stagger court)
   · plan : le parcours se trace, les repères s'allument à son passage
   L'état PAR DÉFAUT du CSS est l'état FINAL : sans JS, sans mouvement, ou
   en reduced-motion, la page est déjà à l'arrivée — plan tracé, cinq
   repères allumés.
   ===================================================================== */
@keyframes sxDrop{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}
                  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes sxDraw{from{stroke-dashoffset:var(--sx-len)}to{stroke-dashoffset:0}}
@keyframes sxPop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}

@media (prefers-reduced-motion:no-preference){
  .sx-armed .sx-spotdot{opacity:0}
  .sx-armed.is-in .sx-spotdot{animation:sxDrop .5s cubic-bezier(.2,.8,.3,1) forwards;
    animation-delay:calc(var(--i) * 110ms)}

  .sx-armed .sx-p-route{stroke-dasharray:var(--sx-len);stroke-dashoffset:var(--sx-len)}
  .sx-armed.is-in .sx-p-route{animation:sxDraw 2s cubic-bezier(.4,0,.2,1) forwards}
  .sx-armed .sx-p-spot{opacity:0;transform-box:fill-box;transform-origin:center}
  .sx-armed.is-in .sx-p-spot{animation:sxPop .42s cubic-bezier(.2,.8,.3,1) forwards;
    animation-delay:calc(260ms + var(--i) * 330ms)}
}

/* =====================================================================
   10 · RESPONSIVE — Safari-first : aucune largeur en 100vw, rien ne
        déborde, toutes les cibles tactiles au-dessus de 44px.
   ===================================================================== */
@media (max-width:1000px){
  .sx-hero__grid{grid-template-columns:1fr;gap:34px}
  .sx-key{grid-template-columns:1fr;gap:30px}
  .sx-dark__split{grid-template-columns:1fr}
  .sx-crop{max-width:320px;aspect-ratio:1/1}
  .sx-deg{grid-template-columns:1fr}
  /* Trois colonnes deviennent trop étroites sous 1000 px (le bouton d'ajout
     casse en deux lignes) : on repasse en pleine largeur, carte horizontale,
     packshot à gauche. */
  .sx-grid--3{grid-template-columns:minmax(0,1fr)}
  .sx-grid--3 .sx-poste{grid-template-columns:30% minmax(0,1fr)}
  .sx-grid--3 .sx-poste__shot{padding:16px 0}
  .sx-grid--3 .sx-poste__shot img{max-height:222px}
  .sx-legend{grid-template-columns:repeat(2,1fr)}
  .sx-legend__it{border-left:0;border-top:1px solid var(--border);border-radius:0;padding-left:0}
  .sx-legend li:nth-child(-n+2) .sx-legend__it{border-top:0}
  .sx-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Quatre vignettes tiennent en deux rangs pleins plutôt qu'en 3 + 1. */
  .sx-tiles--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-reminders{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-pro{grid-template-columns:1fr}
  .sx-pro__cta{justify-self:start}
}
@media (max-width:860px){
  .sx-grid{grid-template-columns:1fr}
}
/* Sous 820px le plan cesse de rétrécir : il garde une largeur lisible et
   glisse à l'horizontale dans sa carte. La légende dessous reste le chemin
   d'accès sans défilement — et le seul, au clavier. */
@media (max-width:820px){
  .sx-plan__svg{width:720px}
  .sx-plan__hint{display:inline}
}
/* Le collage rétrécit bien plus vite que ses repères : sous 560 px un point de
   24 px pèse 8 % de la largeur de la scène et l'écrase. On redescend le
   diamètre et le filin par paliers — la scène reste lisible, le repère reste
   un repère. */
@media (max-width:560px){
  .sx-spotdot,.sx-spotdot svg{width:17px;height:17px}
  .sx-spotdot::after{height:calc(var(--len,54px) * .6);width:1.2px}
}
@media (max-width:400px){
  .sx-spotdot,.sx-spotdot svg{width:14px;height:14px}
  .sx-spotdot::after{height:calc(var(--len,54px) * .45)}
}
@media (max-width:640px){
  .sx-poste,.sx-grid--3 .sx-poste{grid-template-columns:1fr}
  .sx-poste__shot{padding:18px;min-height:0}
  .sx-poste__shot img{max-height:262px;width:auto}
  .sx-frame__legend{grid-template-columns:repeat(2,1fr);gap:10px 0}
  .sx-frame__legend li:nth-child(odd){border-left:0;padding-left:2px}
  /* Légende du plan : une ligne par poste, tout sur le même rang. */
  .sx-legend{grid-template-columns:1fr}
  .sx-legend li:nth-child(2) .sx-legend__it{border-top:1px solid var(--border)}
  .sx-legend__it{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:11px;padding:13px 0}
  .sx-legend__n{margin:0}
  .sx-legend__pl,.sx-legend__pr{display:inline;margin-top:0}
  .sx-buybar{padding:16px}
  .sx-row{flex-wrap:wrap}
  .sx-row__p{margin-left:0;width:100%;text-align:left;display:flex;align-items:baseline;gap:10px}
  .sx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-tile__fig img{height:120px}
  .sx-selbar__end{margin-left:0;width:100%}
  .sx-selbar__end .sx-add{width:100%}
  .sx-reminders{grid-template-columns:1fr}
}
@media (max-width:420px){
  .sx-tiles{grid-template-columns:1fr}
  .sx-tile{flex-direction:row;align-items:stretch}
  .sx-tile__fig{flex:0 0 118px;border-bottom:0;border-right:1px solid var(--ku-blue-100);padding:12px 8px}
  .sx-tile__fig img{height:104px}
  .sx-tile__in{flex:1;min-width:0}
}