/* sx-theme.css — Sani Express bundle (2026-05-05) */

/* === 00-tokens.css === */
/* ========================================================================
   00-tokens.css — Design tokens Sani Express
   Source unique de vérité pour couleurs, typo, spacing, breakpoints.
   Aucune valeur design hardcodée ailleurs : tout passe par var(--sx-*).
   ======================================================================== */

:root {

  /* --- Couleurs marque ----------------------------------------------- */
  --sx-teal:           #3a9bb8;
  --sx-teal-dark:      #2a7a8e;
  --sx-teal-light:     #b3e8f1;
  --sx-dark:           #1d2327;
  --sx-bg-light:       #f7f9fa;
  --sx-bg-white:       #ffffff;

  /* Texte */
  --sx-text-primary:   #1d2327;
  --sx-text-secondary: rgba(29, 35, 39, 0.62);
  --sx-text-muted:     rgba(29, 35, 39, 0.42);
  --sx-text-on-dark:   #ffffff;
  --sx-text-on-dark-soft: rgba(255, 255, 255, 0.78);

  /* Bordures */
  --sx-border:         rgba(29, 35, 39, 0.10);
  --sx-border-strong:  rgba(29, 35, 39, 0.20);

  /* États */
  --sx-success:        #16a34a;
  --sx-warning:        #d97706;
  --sx-error:          #dc2626;
  --sx-info:           var(--sx-teal);

  /* --- Gradients ----------------------------------------------------- */
  --sx-gradient-hero-dark:  linear-gradient(135deg, #1d2327 0%, #2a7a8e 50%, #3a9bb8 100%);
  --sx-gradient-hero-light: linear-gradient(135deg, #ffffff 0%, #b3e8f1 38%, #3a9bb8 100%);
  --sx-gradient-cta:        linear-gradient(135deg, #2a7a8e 0%, #3a9bb8 100%);

  /* --- Typography ---------------------------------------------------- */
  --sx-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --sx-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Échelle modulaire (clamp = fluide entre mobile et desktop) */
  --sx-fs-xs:  clamp(0.75rem,  0.7vw + 0.65rem, 0.82rem);
  --sx-fs-sm:  clamp(0.85rem,  0.7vw + 0.75rem, 0.92rem);
  --sx-fs-base:clamp(0.95rem,  0.5vw + 0.9rem,  1.05rem);
  --sx-fs-lg:  clamp(1.05rem,  0.6vw + 0.95rem, 1.2rem);
  --sx-fs-xl:  clamp(1.2rem,   1vw   + 1rem,    1.4rem);
  --sx-fs-h3:  clamp(1.4rem,   1.5vw + 1.1rem,  1.85rem);
  --sx-fs-h2:  clamp(1.8rem,   2.2vw + 1.2rem,  2.6rem);
  --sx-fs-h1:  clamp(2.2rem,   3.5vw + 1.3rem,  3.6rem);
  --sx-fs-display: clamp(2.6rem, 5vw + 1.4rem,  4.4rem);

  /* Line-heights */
  --sx-lh-tight:  1.15;
  --sx-lh-snug:   1.3;
  --sx-lh-normal: 1.55;
  --sx-lh-loose:  1.75;

  /* Letter-spacing */
  --sx-tracking-tight:  -0.02em;
  --sx-tracking-normal: 0;
  --sx-tracking-wide:   0.05em;

  /* Font weights */
  --sx-fw-regular: 400;
  --sx-fw-medium:  500;
  --sx-fw-semibold:600;
  --sx-fw-bold:    700;
  --sx-fw-black:   900;

  /* --- Spacing scale (puissances 2, base 0.25rem = 4px) -------------- */
  --sx-space-0:    0;
  --sx-space-px:   1px;
  --sx-space-0-5:  0.125rem; /* 2px  */
  --sx-space-1:    0.25rem;  /* 4px  */
  --sx-space-2:    0.5rem;   /* 8px  */
  --sx-space-3:    0.75rem;  /* 12px */
  --sx-space-4:    1rem;     /* 16px */
  --sx-space-5:    1.25rem;  /* 20px */
  --sx-space-6:    1.5rem;   /* 24px */
  --sx-space-8:    2rem;     /* 32px */
  --sx-space-10:   2.5rem;   /* 40px */
  --sx-space-12:   3rem;     /* 48px */
  --sx-space-16:   4rem;     /* 64px */
  --sx-space-20:   5rem;     /* 80px */
  --sx-space-24:   6rem;     /* 96px */
  --sx-space-32:   8rem;     /* 128px */

  /* Espacements de section (fluides) */
  --sx-section-pad-y:    clamp(3rem, 6vw + 1rem, 7rem);
  --sx-section-gap:      clamp(2rem, 4vw, 4rem);

  /* --- Container ----------------------------------------------------- */
  --sx-container-max:        1380px;
  --sx-container-narrow:     1080px;
  --sx-container-wide:       1560px;
  --sx-container-padding:    clamp(1rem, 4vw, 4rem);

  /* --- Breakpoints (référence — utilisés en min-width media queries) - */
  --sx-bp-sm:  640px;
  --sx-bp-md:  768px;
  --sx-bp-lg:  1024px;
  --sx-bp-xl:  1280px;
  --sx-bp-2xl: 1536px;

  /* --- Border-radius ------------------------------------------------- */
  --sx-radius-sm:   4px;
  --sx-radius:      8px;
  --sx-radius-md:   12px;
  --sx-radius-lg:   16px;
  --sx-radius-xl:   24px;
  --sx-radius-full: 9999px;

  /* --- Shadows ------------------------------------------------------- */
  --sx-shadow-sm:  0 1px 2px rgba(29, 35, 39, 0.05);
  --sx-shadow:     0 2px 8px rgba(29, 35, 39, 0.08);
  --sx-shadow-md:  0 6px 18px rgba(29, 35, 39, 0.10);
  --sx-shadow-lg:  0 14px 38px rgba(29, 35, 39, 0.14);
  --sx-shadow-teal:0 8px 24px rgba(58, 155, 184, 0.30);

  /* --- Transitions --------------------------------------------------- */
  --sx-ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --sx-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --sx-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --sx-duration-fast:   140ms;
  --sx-duration:        220ms;
  --sx-duration-slow:   380ms;

  /* --- Z-index scale ------------------------------------------------- */
  --sx-z-base:    1;
  --sx-z-raised:  10;
  --sx-z-sticky:  100;
  --sx-z-overlay: 500;
  --sx-z-modal:   1000;
  --sx-z-toast:   2000;
}

/* Dark mode tokens (préparé, pas activé tant que pas validé Jeremy) */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --sx-bg-light:       #1a1d20;
    --sx-bg-white:       #232629;
    --sx-text-primary:   #f7f9fa;
    --sx-text-secondary: rgba(247, 249, 250, 0.7);
    --sx-text-muted:     rgba(247, 249, 250, 0.5);
    --sx-border:         rgba(247, 249, 250, 0.12);
  }
}

/* === 01-reset.css === */
/* ========================================================================
   01-reset.css — Modern reset (inspiré Andy Bell / Josh Comeau)
   Pas de normalize.css legacy, pas de hack.
   ======================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  line-height: var(--sx-lh-normal);
  font-family: var(--sx-font-base);
  font-size: var(--sx-fs-base);
  color: var(--sx-text-primary);
  background: var(--sx-bg-light);
}

/* Médias responsive par défaut */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inputs héritent de la typo */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

/* Pas d'overflow par défaut sur le texte */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--sx-lh-tight);
  font-weight: var(--sx-fw-bold);
  letter-spacing: var(--sx-tracking-tight);
}

/* Listes par défaut sans puces sur layouts */
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* Liens : héritent couleur, soulignement smart */
a {
  color: inherit;
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* Focus accessible visible (a11y) */
:focus-visible {
  outline: 2px solid var(--sx-teal);
  outline-offset: 2px;
  border-radius: var(--sx-radius-sm);
}

/* SR-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Préférence reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === 02-typography.css === */
/* ========================================================================
   02-typography.css — Typographie Sani Express
   ======================================================================== */

body {
  font-family: var(--sx-font-base);
  font-size: var(--sx-fs-base);
  line-height: var(--sx-lh-normal);
  color: var(--sx-text-primary);
}

h1, .sx-h1 {
  font-size: var(--sx-fs-h1);
  line-height: var(--sx-lh-tight);
  font-weight: var(--sx-fw-bold);
  letter-spacing: var(--sx-tracking-tight);
  margin-bottom: var(--sx-space-4);
}

h2, .sx-h2 {
  font-size: var(--sx-fs-h2);
  line-height: var(--sx-lh-snug);
  font-weight: var(--sx-fw-bold);
  letter-spacing: var(--sx-tracking-tight);
  margin-bottom: var(--sx-space-4);
}

h3, .sx-h3 {
  font-size: var(--sx-fs-h3);
  line-height: var(--sx-lh-snug);
  font-weight: var(--sx-fw-semibold);
  margin-bottom: var(--sx-space-3);
}

h4, .sx-h4 {
  font-size: var(--sx-fs-xl);
  font-weight: var(--sx-fw-semibold);
  margin-bottom: var(--sx-space-2);
}

p, .sx-p {
  margin-bottom: var(--sx-space-4);
  color: var(--sx-text-primary);
}

p:last-child { margin-bottom: 0; }

.sx-sub {
  font-size: var(--sx-fs-lg);
  color: var(--sx-text-secondary);
  line-height: var(--sx-lh-loose);
  max-width: 60ch;
}

.sx-eyebrow {
  display: inline-block;
  font-size: var(--sx-fs-xs);
  font-weight: var(--sx-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--sx-tracking-wide);
  color: var(--sx-teal-dark);
  margin-bottom: var(--sx-space-3);
}

.sx-text-muted    { color: var(--sx-text-muted); }
.sx-text-secondary{ color: var(--sx-text-secondary); }
.sx-text-on-dark  { color: var(--sx-text-on-dark); }

strong, b { font-weight: var(--sx-fw-semibold); }

small { font-size: var(--sx-fs-sm); color: var(--sx-text-secondary); }

code {
  font-family: var(--sx-font-mono);
  font-size: 0.9em;
  background: rgba(29, 35, 39, 0.06);
  padding: 0.1em 0.35em;
  border-radius: var(--sx-radius-sm);
}

/* Liens dans le contenu (article, FAQ) */
.sx-prose a {
  color: var(--sx-teal-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--sx-duration) var(--sx-ease);
}
.sx-prose a:hover { color: var(--sx-teal); }

/* === 03-layout.css === */
/* ========================================================================
   03-layout.css — Layout system Sani Express
   PRINCIPE : zéro mask-image, zéro overflow:hidden global, zéro hack.
   Container fluide, sections plein-largeur, breakpoints standardisés.
   ======================================================================== */

/* --- Bricks wrapper overrides (home post-hero) ---------------------------
   #brxe-ejehwy : div Bricks parent du Code HTML (a un max-width Bricks 1280px)
   #brxe-gjalcd : div Bricks contenant directement le Code HTML (max 896px)
   .custom-html-css-script-wrapper : wrapper script Bricks (héritait 864px)
   On force ces 3 niveaux à width 100% pour libérer la chaîne. Les enfants
   .sx-section + .sx-container imposent ensuite leur propre largeur (1380px).
   ------------------------------------------------------------------------- */
#brxe-ejehwy,
#brxe-gjalcd,
.custom-html-css-script-wrapper {
  max-width: none !important;
  width: 100% !important;
  flex-direction: column;
  align-items: stretch;
}

/* --- Section : conteneur full-bleed avec padding vertical fluide -------- */
.sx-section {
  width: 100%;
  padding-block: var(--sx-section-pad-y);
  position: relative;
}

.sx-section--tight  { padding-block: clamp(2rem, 4vw + 0.5rem, 4rem); }
.sx-section--loose  { padding-block: clamp(4rem, 8vw + 1rem, 9rem); }

.sx-section--bg-light { background: var(--sx-bg-light); }
.sx-section--bg-white { background: var(--sx-bg-white); }
.sx-section--bg-dark  {
  background: var(--sx-dark);
  color: var(--sx-text-on-dark);
}
.sx-section--bg-teal {
  background: var(--sx-teal);
  color: var(--sx-text-on-dark);
}
.sx-section--bg-gradient-light { background: var(--sx-gradient-hero-light); }
.sx-section--bg-gradient-dark  {
  background: var(--sx-gradient-hero-dark);
  color: var(--sx-text-on-dark);
}

/* --- Container : largeur max + padding fluide ---------------------------- */
.sx-container {
  width: 100%;
  max-width: var(--sx-container-max);
  margin-inline: auto;
  padding-inline: var(--sx-container-padding);
}

.sx-container--narrow { max-width: var(--sx-container-narrow); }
.sx-container--wide   { max-width: var(--sx-container-wide); }
.sx-container--full   { max-width: 100%; padding-inline: 0; }

/* --- Stack : espacement vertical entre enfants -------------------------- */
.sx-stack > * + * { margin-top: var(--sx-stack-gap, var(--sx-space-4)); }
.sx-stack-2  > * + * { margin-top: var(--sx-space-2); }
.sx-stack-4  > * + * { margin-top: var(--sx-space-4); }
.sx-stack-6  > * + * { margin-top: var(--sx-space-6); }
.sx-stack-8  > * + * { margin-top: var(--sx-space-8); }
.sx-stack-12 > * + * { margin-top: var(--sx-space-12); }

/* --- Cluster : items inline avec wrap (boutons, tags) ------------------- */
.sx-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sx-cluster-gap, var(--sx-space-3));
  align-items: var(--sx-cluster-align, center);
}

/* --- Grille auto-fit (cards) -------------------------------------------- */
.sx-grid {
  display: grid;
  gap: var(--sx-grid-gap, var(--sx-space-6));
  grid-template-columns: repeat(auto-fit, minmax(var(--sx-grid-min, 240px), 1fr));
}

.sx-grid-2 {
  display: grid;
  gap: var(--sx-grid-gap, var(--sx-space-6));
  grid-template-columns: 1fr;
}

.sx-grid-3 {
  display: grid;
  gap: var(--sx-grid-gap, var(--sx-space-6));
  grid-template-columns: 1fr;
}

.sx-grid-4 {
  display: grid;
  gap: var(--sx-grid-gap, var(--sx-space-6));
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .sx-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .sx-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .sx-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .sx-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Bento (grille asymétrique catégories) ------------------------------ */
.sx-bento {
  display: grid;
  gap: var(--sx-space-4);
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(180px, auto);
}

@media (min-width: 640px) {
  .sx-bento { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .sx-bento { grid-template-columns: repeat(4, 1fr); }
  .sx-bento > .sx-bento-item--lg  { grid-column: span 2; }
  .sx-bento > .sx-bento-item--row { grid-row: span 2; }
}

/* --- Center utility ----------------------------------------------------- */
.sx-center {
  display: grid;
  place-items: center;
  text-align: center;
}

/* --- Header de section (eyebrow + h2 + sub) ----------------------------- */
.sx-section-head {
  max-width: 760px;
  margin-bottom: var(--sx-space-12);
}
.sx-section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* --- Visibilité responsive --------------------------------------------- */
.sx-hide-mobile  { display: none; }
.sx-hide-desktop { display: initial; }

@media (min-width: 768px) {
  .sx-hide-mobile  { display: initial; }
  .sx-hide-desktop { display: none; }
}

/* === 04-components.css === */
/* ========================================================================
   04-components.css — Composants réutilisables
   Boutons, cards, badges, formulaires, icônes.
   ======================================================================== */

/* --- Boutons ----------------------------------------------------------- */
.sx-btn {
  --sx-btn-bg: var(--sx-teal);
  --sx-btn-color: var(--sx-text-on-dark);
  --sx-btn-bg-hover: var(--sx-teal-dark);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sx-space-2);
  padding: var(--sx-space-3) var(--sx-space-6);
  font-family: inherit;
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-fw-semibold);
  line-height: 1;
  letter-spacing: var(--sx-tracking-normal);
  text-decoration: none;
  background: var(--sx-btn-bg);
  color: var(--sx-btn-color);
  border: 1px solid var(--sx-btn-bg);
  border-radius: var(--sx-radius);
  cursor: pointer;
  transition: background var(--sx-duration) var(--sx-ease),
              border-color var(--sx-duration) var(--sx-ease),
              transform var(--sx-duration-fast) var(--sx-ease),
              box-shadow var(--sx-duration) var(--sx-ease);
  white-space: nowrap;
}

.sx-btn:hover {
  background: var(--sx-btn-bg-hover);
  border-color: var(--sx-btn-bg-hover);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--sx-shadow-md);
}

.sx-btn:active { transform: translateY(0); }

.sx-btn--lg {
  padding: var(--sx-space-4) var(--sx-space-8);
  font-size: var(--sx-fs-lg);
}

.sx-btn--sm {
  padding: var(--sx-space-2) var(--sx-space-4);
  font-size: var(--sx-fs-sm);
}

.sx-btn--ghost {
  --sx-btn-bg: transparent;
  --sx-btn-color: var(--sx-text-primary);
  --sx-btn-bg-hover: rgba(29, 35, 39, 0.05);
  border-color: var(--sx-border-strong);
}

.sx-btn--outline {
  --sx-btn-bg: transparent;
  --sx-btn-color: var(--sx-teal-dark);
  --sx-btn-bg-hover: var(--sx-teal);
  border-color: var(--sx-teal);
}
.sx-btn--outline:hover { color: var(--sx-text-on-dark); }

.sx-btn--on-dark {
  --sx-btn-bg: var(--sx-bg-white);
  --sx-btn-color: var(--sx-dark);
  --sx-btn-bg-hover: var(--sx-bg-light);
}

.sx-btn[aria-disabled="true"], .sx-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* --- Card -------------------------------------------------------------- */
.sx-card {
  background: var(--sx-bg-white);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius-md);
  padding: var(--sx-space-6);
  transition: border-color var(--sx-duration) var(--sx-ease),
              box-shadow var(--sx-duration) var(--sx-ease),
              transform var(--sx-duration) var(--sx-ease);
}

.sx-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.sx-card--link:hover {
  border-color: var(--sx-teal);
  box-shadow: var(--sx-shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.sx-card--padded { padding: var(--sx-space-8); }
.sx-card--flat   { background: transparent; border-color: transparent; padding: 0; }

/* --- Badge ------------------------------------------------------------- */
.sx-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sx-space-1);
  padding: var(--sx-space-1) var(--sx-space-3);
  font-size: var(--sx-fs-xs);
  font-weight: var(--sx-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--sx-tracking-wide);
  border-radius: var(--sx-radius-full);
  background: rgba(58, 155, 184, 0.12);
  color: var(--sx-teal-dark);
}
.sx-badge--success { background: rgba(22, 163, 74, 0.12); color: var(--sx-success); }
.sx-badge--warning { background: rgba(217, 119, 6, 0.12); color: var(--sx-warning); }

/* --- Icon (SVG) -------------------------------------------------------- */
.sx-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sx-icon--lg { width: 1.5em; height: 1.5em; }
.sx-icon--xl { width: 2em;   height: 2em; }

/* --- Phone CTA button (sticky-friendly) -------------------------------- */
.sx-phone-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sx-space-2);
  padding: var(--sx-space-3) var(--sx-space-5);
  background: var(--sx-bg-white);
  color: var(--sx-dark);
  border: 1px solid var(--sx-border-strong);
  border-radius: var(--sx-radius-full);
  font-weight: var(--sx-fw-semibold);
  text-decoration: none;
  transition: all var(--sx-duration) var(--sx-ease);
}
.sx-phone-cta:hover {
  background: var(--sx-teal);
  color: var(--sx-text-on-dark);
  border-color: var(--sx-teal);
  text-decoration: none;
}
.sx-phone-cta .sx-icon { color: var(--sx-teal); }
.sx-phone-cta:hover .sx-icon { color: currentColor; }

/* --- Divider ----------------------------------------------------------- */
.sx-divider {
  width: 100%;
  height: 1px;
  background: var(--sx-border);
  margin: var(--sx-space-8) 0;
  border: 0;
}

/* --- Inline list (chips/tags) ------------------------------------------ */
.sx-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--sx-space-2) var(--sx-space-4);
  background: var(--sx-bg-light);
  color: var(--sx-text-primary);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius-full);
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-fw-medium);
  text-decoration: none;
  transition: background var(--sx-duration) var(--sx-ease);
}
.sx-chip:hover {
  background: var(--sx-bg-white);
  border-color: var(--sx-teal);
  text-decoration: none;
}

/* === 05-sections/cat.css === */
/* ========================================================================
   05-sections/cat.css — Section .sx-cat (catégories) + .sx-services (services)
   Le markup utilise .sx-tile pour les deux. Mêmes styles, gilles différentes.
   Markup actuel cible (NE PAS toucher) :
     <section class="sx-section sx-cat" id="categories">
       <div class="sx-container">
         <h2>Magasinez par catégorie</h2>
         <p class="sx-sub">…</p>
         <div class="sx-cat-grid">
           <a class="sx-tile">
             <h3>…</h3><p>…</p><span class="sx-cta">Voir les N produits</span>
           </a>
         </div>
       </div>
     </section>
   ======================================================================== */

.sx-cat,
.sx-services {
  background: var(--sx-bg-light);
}

/* Section header (h2 + sx-sub) */
.sx-cat > .sx-container > h2,
.sx-services > .sx-container > h2 {
  text-align: center;
  margin-bottom: var(--sx-space-3);
}

.sx-cat > .sx-container > .sx-sub,
.sx-services > .sx-container > .sx-sub {
  text-align: center;
  margin: 0 auto var(--sx-space-12) auto;
  max-width: 60ch;
}

/* Grille — mobile-first */
.sx-cat-grid {
  display: grid;
  gap: var(--sx-space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .sx-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .sx-cat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sx-space-5);
  }
}

/* Variante services : 4 colonnes possible aussi sur lg */
.sx-services-grid { /* hérite de .sx-cat-grid */ }

/* Tile (carte cliquable) */
.sx-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sx-space-2);
  padding: var(--sx-space-6);
  background: var(--sx-bg-white);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius-md);
  color: var(--sx-text-primary);
  text-decoration: none;
  min-height: 180px;
  transition: transform var(--sx-duration) var(--sx-ease),
              border-color var(--sx-duration) var(--sx-ease),
              box-shadow var(--sx-duration) var(--sx-ease);
}

.sx-tile:hover {
  transform: translateY(-3px);
  border-color: var(--sx-teal);
  box-shadow: var(--sx-shadow-md);
  text-decoration: none;
}

.sx-tile h3 {
  font-size: var(--sx-fs-lg);
  font-weight: var(--sx-fw-bold);
  line-height: var(--sx-lh-snug);
  margin: 0;
  color: var(--sx-text-primary);
}

.sx-tile p {
  font-size: var(--sx-fs-sm);
  color: var(--sx-text-secondary);
  line-height: var(--sx-lh-normal);
  margin: 0;
  flex: 1;
}

/* Span "Voir les N produits" → CTA visuel discret */
.sx-tile .sx-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sx-space-2);
  margin-top: var(--sx-space-3);
  padding-top: var(--sx-space-3);
  border-top: 1px solid var(--sx-border);
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-fw-semibold);
  color: var(--sx-teal-dark);
  transition: color var(--sx-duration) var(--sx-ease);
}

.sx-tile .sx-cta::after {
  content: "→";
  display: inline-block;
  transition: transform var(--sx-duration) var(--sx-ease);
}

.sx-tile:hover .sx-cta { color: var(--sx-teal); }
.sx-tile:hover .sx-cta::after { transform: translateX(3px); }

/* === 05-sections/trust.css === */
/* ========================================================================
   05-sections/trust.css — Section .sx-trust
   FIX bug actuel : la section était dans une carte étroite max-width:1100px
   avec ::before "Quarante ans à servir le Québec" qui doublonait le titre.
   ICI : container plein-largeur, gradient hero clair, h2 ajouté via Bricks (pas ::before).

   Markup actuel (pas de h2 dans le markup, à corriger côté Bricks ou via JS optionnel) :
     <section class="sx-section sx-trust">
       <div class="sx-container">
         <div class="sx-trust-grid">
           <div class="sx-stat">
             <span class="num">40+</span>
             <span class="lbl">Ans d'expérience<br>famille (depuis 1985)</span>
           </div>
           ... (4 stats)
         </div>
       </div>
     </section>

   NOTE: idéalement Jeremy ajoute un <h2>Quarante ans à servir le Québec</h2>
   au tout début de .sx-container — 30 secondes dans Bricks. Sans ça, on garde
   le ::before contenu (mais c'est documenté ici comme exception, pas comme hack).
   ======================================================================== */

.sx-trust {
  background: var(--sx-gradient-hero-light);
  text-align: center;
  position: relative;
}

/* Le container reste plein-largeur — PAS de carte étroite. */
.sx-trust > .sx-container {
  /* Hérite du max-width: 1380px standard */
}

/* Si Jeremy ajoute un <h2> dans le markup, il sera stylé centré */
.sx-trust > .sx-container > h2 {
  font-size: var(--sx-fs-h1);
  letter-spacing: var(--sx-tracking-tight);
  text-wrap: balance;
  margin-bottom: var(--sx-space-12);
  text-align: center;
  max-width: 18ch;
  margin-inline: auto;
}

/* TEMPORAIRE — tant que Jeremy n'a pas ajouté de <h2> dans le markup Bricks,
   on injecte le titre via ::before sur .sx-trust > .sx-container. À retirer
   dès que le <h2> est ajouté. Documenté comme dette technique. */
.sx-trust > .sx-container:not(:has(> h2))::before {
  content: "Quarante ans à servir le Québec";
  display: block;
  font-size: var(--sx-fs-h1);
  font-weight: var(--sx-fw-bold);
  line-height: var(--sx-lh-tight);
  letter-spacing: var(--sx-tracking-tight);
  margin: 0 auto var(--sx-space-12) auto;
  max-width: 18ch;
  text-wrap: balance;
  color: var(--sx-text-primary);
}

/* Grille des 4 stats */
.sx-trust-grid {
  display: grid;
  gap: var(--sx-space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .sx-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sx-trust-grid { grid-template-columns: repeat(4, 1fr); } }

.sx-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sx-space-2);
}

.sx-stat .num {
  font-size: clamp(2.6rem, 4vw + 1rem, 4.2rem);
  font-weight: var(--sx-fw-black);
  line-height: 1;
  letter-spacing: var(--sx-tracking-tight);
  background: var(--sx-gradient-hero-dark);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.sx-stat .lbl {
  font-size: var(--sx-fs-base);
  color: var(--sx-text-secondary);
  line-height: var(--sx-lh-snug);
  max-width: 22ch;
}

/* === 05-sections/why.css === */
/* ========================================================================
   05-sections/why.css — Section .sx-why "Pourquoi Sani Express"
   FIX bug actuel : section coupée en bas (overflow:hidden parent).
   ICI : aucun overflow hack, contenu plein, grid responsive saine.

   Markup actuel cible :
     <section class="sx-section sx-why">
       <div class="sx-container">
         <h2>Pourquoi Sani Express</h2>
         <p class="sx-sub">Le bon produit, le bon conseil, livré où il faut.</p>
         <div class="sx-why-grid">
           <div class="sx-feat">
             <svg class="icon" viewBox="0 0 24 24">…</svg>
             <h3>40 ans sur le terrain</h3>
             <p>…</p>
           </div>
           ... (4 feat)
         </div>
       </div>
     </section>
   ======================================================================== */

.sx-why {
  background: var(--sx-bg-white) !important;
  /* PAS de overflow:hidden ici. Si un enfant déborde, on le repère et on le fixe. */
  /* !important = override des hacks Perfmatters Used CSS inline. À retirer
     une fois le Customizer custom_css source vidé (cf DEPLOY.md étape 6). */
}

/* Override Perfmatters Used CSS qui inline les anciens hacks blancs */
.sx-why h2,
.sx-why .sx-sub,
.sx-feat h3,
.sx-feat p {
  color: var(--sx-text-primary) !important;
}
.sx-why .sx-sub,
.sx-feat p {
  color: var(--sx-text-secondary) !important;
}
.sx-feat {
  background: transparent !important;
  border: none !important;
  border-top: 0 !important;
  padding: var(--sx-space-4) 0 !important;
  counter-increment: none !important;
}
.sx-feat::before { display: none !important; }
.sx-feat svg, .sx-feat .icon {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
}

.sx-why > .sx-container > h2 {
  text-align: center;
  margin-bottom: var(--sx-space-3);
}

.sx-why > .sx-container > .sx-sub {
  text-align: center;
  margin: 0 auto var(--sx-space-12) auto;
  max-width: 60ch;
}

/* Grille 4 colonnes responsive */
.sx-why-grid {
  display: grid;
  gap: var(--sx-space-8) var(--sx-space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .sx-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sx-why-grid { grid-template-columns: repeat(4, 1fr); } }

/* Feature individuel */
.sx-feat {
  display: flex;
  flex-direction: column;
  gap: var(--sx-space-3);
  padding: var(--sx-space-4) 0;
  /* FIX du bug font-size:0 ancien — TOUTES les colonnes ont la même typo */
}

.sx-feat .icon {
  width: 44px;
  height: 44px;
  padding: var(--sx-space-2);
  background: linear-gradient(135deg, rgba(58,155,184,0.14) 0%, rgba(58,155,184,0.04) 100%);
  border-radius: var(--sx-radius);
  color: var(--sx-teal-dark);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: var(--sx-space-1);
}

.sx-feat h3 {
  font-size: var(--sx-fs-xl);
  font-weight: var(--sx-fw-bold);
  line-height: var(--sx-lh-snug);
  margin: 0;
  color: var(--sx-text-primary);
}

.sx-feat p {
  font-size: var(--sx-fs-base);
  color: var(--sx-text-secondary);
  line-height: var(--sx-lh-loose);
  margin: 0;
  /* PAS de font-size:0 hack. Toutes les colonnes lisibles. */
}

/* === 05-sections/cta-band.css === */
/* ========================================================================
   05-sections/cta-band.css — Section .sx-cta-band (avant footer)
   Markup actuel cible :
     <section class="sx-section sx-cta-band">
       <div class="sx-container">
         <h2>Une commande urgente ou une soumission ?</h2>
         <p>418-862-2292 · sans frais 1-866-550-2292 · lundi au vendredi 8h à 16h</p>
         <div class="sx-cta-btns">
           <a href="tel:18665502292" class="sx-primary">Appeler maintenant</a>
           <a href="/contact/" class="sx-secondary">Demander une soumission</a>
         </div>
       </div>
     </section>

   NB: .sx-cta (span dans .sx-tile) est défini dans cat.css, pas ici.
   ======================================================================== */

.sx-cta-band {
  background: var(--sx-gradient-hero-dark);
  color: var(--sx-text-on-dark);
  text-align: center;
  position: relative;
  overflow: clip;
}

.sx-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.07) 0%, transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(58,155,184,0.20) 0%, transparent 50%);
  pointer-events: none;
}

.sx-cta-band > .sx-container {
  position: relative;
}

.sx-cta-band h2 {
  font-size: var(--sx-fs-h2);
  letter-spacing: var(--sx-tracking-tight);
  text-wrap: balance;
  margin-bottom: var(--sx-space-4);
  color: var(--sx-text-on-dark);
}

.sx-cta-band > .sx-container > p {
  font-size: var(--sx-fs-lg);
  color: var(--sx-text-on-dark-soft);
  max-width: 60ch;
  margin: 0 auto var(--sx-space-8) auto;
}

/* Boutons */
.sx-cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sx-space-4);
}

.sx-cta-btns .sx-primary,
.sx-cta-btns .sx-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sx-space-4) var(--sx-space-8);
  border-radius: var(--sx-radius);
  font-size: var(--sx-fs-lg);
  font-weight: var(--sx-fw-semibold);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--sx-duration) var(--sx-ease),
              border-color var(--sx-duration) var(--sx-ease),
              color var(--sx-duration) var(--sx-ease),
              transform var(--sx-duration-fast) var(--sx-ease),
              box-shadow var(--sx-duration) var(--sx-ease);
}

.sx-cta-btns .sx-primary {
  background: var(--sx-bg-white);
  color: var(--sx-dark);
  border-color: var(--sx-bg-white);
}
.sx-cta-btns .sx-primary:hover {
  background: var(--sx-bg-light);
  transform: translateY(-1px);
  box-shadow: var(--sx-shadow-lg);
  text-decoration: none;
}

.sx-cta-btns .sx-secondary {
  background: transparent;
  color: var(--sx-text-on-dark);
  border-color: rgba(255, 255, 255, 0.4);
}
.sx-cta-btns .sx-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--sx-text-on-dark);
  transform: translateY(-1px);
  text-decoration: none;
}

/* === 99-overrides.css === */
/* ========================================================================
   99-overrides.css — Overrides ciblés contre les hacks legacy
   inline dans <style id="perfmatters-used-css"> (Used CSS auto-générée
   par Perfmatters depuis le Customizer custom_css avant qu'il soit vidé).

   Pourquoi !important ici alors que la doctrine dit "zéro !important" ?
   → Les règles Perfmatters Used CSS sont elles-mêmes !important. À spécificité
     égale, le dernier dans le DOM gagne — sauf si les deux ont !important.
     Pour gagner, on match leur !important.
   → Cette dette est TEMPORAIRE. Une fois `wp_get_custom_css()` vidé en DB
     puis Perfmatters Used CSS régénéré, ce fichier devient obsolète.

   À supprimer après :
     1. Wipe Customizer custom_css (étape DEPLOY.md §4)
     2. Purge Perfmatters Used CSS (génère un nouveau critical CSS sans hacks)
     3. Vérification PSI + visuel sans ce fichier
   ======================================================================== */

/* --- sx-cat : retire le bandeau "🚐 LIVRAISON" qui sautait au-dessus ----- */
.sx-cat {
  padding-top: var(--sx-section-pad-y) !important;
}
.sx-cat::before { display: none !important; }

/* --- sx-trust : layout propre, pas de border-right entre stats -------- */
.sx-trust {
  padding: var(--sx-section-pad-y) 0 !important;
  background: var(--sx-gradient-hero-light) !important;
}
.sx-trust::before { display: none !important; }

.sx-trust-grid {
  display: grid !important;
  gap: var(--sx-space-8) !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
}
@media (min-width: 640px) {
  .sx-trust-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1024px) {
  .sx-trust-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

.sx-trust-grid .sx-stat {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.sx-trust-grid .sx-stat::after { display: none !important; }
.sx-trust-grid .sx-stat:nth-child(-n+2) { border-bottom: 0 !important; padding-bottom: 0 !important; }

.sx-stat .num {
  display: block !important;
  font-size: clamp(2.6rem, 4vw + 1rem, 4.2rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  background: var(--sx-gradient-hero-dark) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  font-variation-settings: normal !important;
}
.sx-stat:hover .num {
  font-weight: 900 !important;
  font-variation-settings: normal !important;
}

.sx-stat .lbl {
  display: block !important;
  margin-top: var(--sx-space-2) !important;
  font-size: var(--sx-fs-base) !important;
  font-weight: var(--sx-fw-regular) !important;
  letter-spacing: var(--sx-tracking-normal) !important;
  text-transform: none !important;
  color: var(--sx-text-secondary) !important;
  line-height: var(--sx-lh-snug) !important;
  max-width: 22ch !important;
  margin-inline: auto !important;
}

/* --- sx-why : fond blanc, texte lisible, icônes visibles -------------- */
.sx-why {
  background: var(--sx-bg-white) !important;
  padding: var(--sx-section-pad-y) 0 !important;
}
.sx-why::before { display: none !important; }

.sx-why h2 { color: var(--sx-text-primary) !important; }
.sx-why .sx-sub { color: var(--sx-text-secondary) !important; }

.sx-why-grid {
  display: grid !important;
  gap: var(--sx-space-8) var(--sx-space-6) !important;
  grid-template-columns: 1fr !important;
}
@media (min-width: 640px)  { .sx-why-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .sx-why-grid { grid-template-columns: repeat(4, 1fr) !important; } }

.sx-why-grid .sx-feat {
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  padding: var(--sx-space-4) 0 !important;
  counter-increment: none !important;
  animation: none !important;
}
.sx-why-grid .sx-feat::before { display: none !important; content: none !important; }
.sx-why-grid .sx-feat:hover { border-top-color: transparent !important; }

.sx-why-grid .sx-feat h3 {
  color: var(--sx-text-primary) !important;
  font-size: var(--sx-fs-xl) !important;
  font-weight: var(--sx-fw-bold) !important;
  letter-spacing: var(--sx-tracking-tight) !important;
  line-height: var(--sx-lh-snug) !important;
  margin-bottom: var(--sx-space-2) !important;
}

.sx-why-grid .sx-feat p {
  color: var(--sx-text-secondary) !important;
  font-size: var(--sx-fs-base) !important;
  line-height: var(--sx-lh-loose) !important;
}

.sx-why-grid .sx-feat svg,
.sx-why-grid .sx-feat .icon {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  padding: var(--sx-space-2) !important;
  background: linear-gradient(135deg, rgba(58,155,184,0.14) 0%, rgba(58,155,184,0.04) 100%) !important;
  border-radius: var(--sx-radius) !important;
  color: var(--sx-teal-dark) !important;
  margin-bottom: var(--sx-space-3) !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* --- sx-services : grille 4 cols cards (vs Perfmatters 2 cols flat) ---- */
.sx-services {
  background: var(--sx-bg-light) !important;
}
.sx-services-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--sx-space-6) !important;
  border-top: 0 !important;
}
@media (min-width: 640px)  { .sx-services-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .sx-services-grid { grid-template-columns: repeat(4, 1fr) !important; } }

.sx-services-grid > * {
  position: static !important;
  padding: var(--sx-space-6) !important;
  border: 1px solid var(--sx-border) !important;
  border-radius: var(--sx-radius-md) !important;
  background: var(--sx-bg-white) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--sx-space-2) !important;
}
.sx-services-grid > *:nth-child(odd) { border-right: 1px solid var(--sx-border) !important; }
.sx-services-grid > *::after { display: none !important; content: none !important; }
.sx-services-grid > *:hover {
  background: var(--sx-bg-white) !important;
  padding: var(--sx-space-6) !important;
  transform: translateY(-3px) !important;
  border-color: var(--sx-teal) !important;
  box-shadow: var(--sx-shadow-md) !important;
}

/* --- sx-tile (catégories) : laisse mon CSS standard prendre ------------ */
.sx-tile,
.sx-tile-large {
  border: 1px solid var(--sx-border) !important;
}
.sx-tile:hover,
.sx-tile-large:hover {
  transform: translateY(-3px) !important;
  border-color: var(--sx-teal) !important;
  box-shadow: var(--sx-shadow-md) !important;
}

/* --- Animations sxSectionReveal des hacks : neutralise --------------- */
/* L'animation source posait opacity:0 + translateY initial. animation:none
   ne reset pas ces valeurs — il faut explicitement forcer l'état "vu". */
.sx-feat,
.sx-services-grid > *,
.sx-tile,
.sx-trust-grid .sx-stat {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* === 06-home-extra.css === */
/* Sections home post-hero ajoutees 2026-05-05 (suite 4) */
/* ========================================================================
   05-sections/home-extra.css
   Sections home post-hero qui ne sont pas couvertes par cat/trust/why/cta-band.
   Markup: utilise les classes courtes .container et .sub (existant Bricks).
   ======================================================================== */

/* --- Container utilitaire (utilisé par les sections ci-dessous) -------- */
.sx-vedettes > .container,
.sx-installations > .container,
.sx-svc-tech > .container,
.sx-savoir-faire > .container,
.sx-pourqui > .container,
.sx-particuliers > .container,
.sx-engagements > .container,
.sx-commander > .container,
.sx-faq > .container {
  max-width: var(--sx-container-max);
  margin-inline: auto;
  padding-inline: var(--sx-container-padding);
}

/* --- Header de section partagé (h2 + .sub) ----------------------------- */
.sx-vedettes > .container > h2,
.sx-installations > .container > h2,
.sx-svc-tech > .container > h2,
.sx-savoir-faire > .container > h2,
.sx-pourqui > .container > h2,
.sx-engagements > .container > h2,
.sx-commander > .container > h2,
.sx-faq > .container > h2 {
  text-align: center;
  margin: 0 auto var(--sx-space-3);
}

.sx-vedettes > .container > .sub,
.sx-installations > .container > .sub,
.sx-svc-tech > .container > .sub,
.sx-savoir-faire > .container > .sub,
.sx-pourqui > .container > .sub,
.sx-engagements > .container > .sub,
.sx-commander > .container > .sub,
.sx-faq > .container > .sub {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto var(--sx-space-12);
  color: var(--sx-text-secondary);
  font-size: var(--sx-fs-lg);
  line-height: var(--sx-lh-normal);
}

/* ====================================================================== */
/* sx-vedettes — Produits vedettes (cards : image + name + price)        */
/* ====================================================================== */

.sx-vedettes {
  background: var(--sx-bg-white);
  padding-block: var(--sx-section-pad-y);
}

.sx-vedettes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sx-space-5);
}

.sx-ved-card {
  display: flex;
  flex-direction: column;
  background: var(--sx-bg-white);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--sx-duration) var(--sx-ease),
    box-shadow var(--sx-duration) var(--sx-ease),
    border-color var(--sx-duration) var(--sx-ease);
}

.sx-ved-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sx-shadow-md);
  border-color: var(--sx-teal);
}

.sx-ved-card .img-wrap {
  aspect-ratio: 1 / 1;
  background: var(--sx-bg-light);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.sx-ved-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--sx-space-4);
}

.sx-ved-card .img-wrap.no-img::after {
  content: "Sani Express";
  color: var(--sx-text-muted);
  font-size: var(--sx-fs-xs);
  letter-spacing: var(--sx-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--sx-fw-semibold);
}

.sx-ved-card .info {
  padding: var(--sx-space-4) var(--sx-space-5) var(--sx-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--sx-space-2);
  flex: 1;
}

.sx-ved-card .name {
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-fw-semibold);
  line-height: var(--sx-lh-snug);
  color: var(--sx-text-primary);
  margin: 0;
}

.sx-ved-card .price {
  margin: auto 0 0;
  color: var(--sx-teal-dark);
  font-weight: var(--sx-fw-bold);
  font-size: var(--sx-fs-base);
}

.sx-ved-card .price ins {
  text-decoration: none;
}

/* ====================================================================== */
/* sx-installations — Magasins / entrepôt (badge + h3 + addr + map)      */
/* ====================================================================== */

.sx-installations {
  background: var(--sx-bg-light);
  padding-block: var(--sx-section-pad-y);
}

.sx-instal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sx-space-5);
}

.sx-instal-card {
  background: var(--sx-bg-white);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius-lg);
  padding: var(--sx-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--sx-space-3);
  box-shadow: var(--sx-shadow-sm);
  transition: box-shadow var(--sx-duration) var(--sx-ease);
}

.sx-instal-card:hover {
  box-shadow: var(--sx-shadow-md);
}

.sx-instal-card .badge {
  align-self: flex-start;
  background: var(--sx-teal-light);
  color: var(--sx-teal-dark);
  padding: var(--sx-space-1) var(--sx-space-3);
  border-radius: var(--sx-radius-full);
  font-size: var(--sx-fs-xs);
  font-weight: var(--sx-fw-semibold);
  letter-spacing: var(--sx-tracking-wide);
  text-transform: uppercase;
}

.sx-instal-card h3 {
  margin: 0;
  font-size: var(--sx-fs-xl);
  color: var(--sx-text-primary);
}

.sx-instal-card .addr {
  font-style: normal;
  color: var(--sx-text-secondary);
  line-height: var(--sx-lh-normal);
  margin: 0;
}

.sx-instal-card .meta {
  font-size: var(--sx-fs-sm);
  color: var(--sx-text-muted);
}

.sx-instal-card .map-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sx-space-2);
  color: var(--sx-teal);
  font-weight: var(--sx-fw-semibold);
  text-decoration: none;
  font-size: var(--sx-fs-sm);
}

.sx-instal-card .map-link:hover {
  color: var(--sx-teal-dark);
}

.sx-instal-card .map-link::after {
  content: "→";
  transition: transform var(--sx-duration) var(--sx-ease);
}

.sx-instal-card .map-link:hover::after {
  transform: translateX(2px);
}

/* ====================================================================== */
/* sx-svc-tech — Services techniques (tag + h3 + p + more)               */
/* ====================================================================== */

.sx-svc-tech {
  background: var(--sx-bg-white);
  padding-block: var(--sx-section-pad-y);
}

.sx-svctech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sx-space-5);
}

.sx-svctech-card {
  background: var(--sx-bg-light);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius-lg);
  padding: var(--sx-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--sx-space-3);
  transition: border-color var(--sx-duration) var(--sx-ease),
              transform var(--sx-duration) var(--sx-ease);
}

.sx-svctech-card:hover {
  border-color: var(--sx-teal);
  transform: translateY(-2px);
}

.sx-svctech-card .tag {
  align-self: flex-start;
  background: var(--sx-bg-white);
  color: var(--sx-teal-dark);
  border: 1px solid var(--sx-border);
  padding: var(--sx-space-1) var(--sx-space-3);
  border-radius: var(--sx-radius-full);
  font-size: var(--sx-fs-xs);
  font-weight: var(--sx-fw-semibold);
  letter-spacing: var(--sx-tracking-wide);
  text-transform: uppercase;
}

.sx-svctech-card h3 {
  margin: 0;
  font-size: var(--sx-fs-xl);
  color: var(--sx-text-primary);
}

.sx-svctech-card p {
  margin: 0;
  color: var(--sx-text-secondary);
  line-height: var(--sx-lh-normal);
}

.sx-svctech-card .more {
  margin-top: auto;
  align-self: flex-start;
  color: var(--sx-teal);
  font-weight: var(--sx-fw-semibold);
  text-decoration: none;
  font-size: var(--sx-fs-sm);
}

.sx-svctech-card .more::after {
  content: " →";
  transition: transform var(--sx-duration) var(--sx-ease);
  display: inline-block;
}

.sx-svctech-card .more:hover {
  color: var(--sx-teal-dark);
}

.sx-svctech-card .more:hover::after {
  transform: translateX(2px);
}

/* ====================================================================== */
/* sx-savoir-faire — Notre savoir-faire (num + h3 + p)                   */
/* ====================================================================== */

.sx-savoir-faire {
  background: var(--sx-bg-light);
  padding-block: var(--sx-section-pad-y);
}

.sx-savoir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sx-space-8);
}

.sx-savoir-card .num {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--sx-radius-full);
  background: var(--sx-gradient-cta);
  color: var(--sx-text-on-dark);
  font-weight: var(--sx-fw-bold);
  font-size: var(--sx-fs-lg);
  margin-bottom: var(--sx-space-4);
  box-shadow: var(--sx-shadow-teal);
}

.sx-savoir-card h3 {
  margin: 0 0 var(--sx-space-3);
  font-size: var(--sx-fs-xl);
  color: var(--sx-text-primary);
}

.sx-savoir-card p {
  margin: 0;
  color: var(--sx-text-secondary);
  line-height: var(--sx-lh-normal);
}

/* ====================================================================== */
/* sx-pourqui — Pour qui on travaille (fond foncé + items)               */
/* ====================================================================== */

.sx-pourqui {
  background: var(--sx-gradient-hero-dark);
  color: var(--sx-text-on-dark);
  padding-block: var(--sx-section-pad-y);
}

.sx-pourqui > .container > h2 {
  color: var(--sx-text-on-dark);
}

.sx-pourqui > .container > .sub {
  color: var(--sx-text-on-dark-soft);
}

.sx-pq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sx-space-4);
}

.sx-pq-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--sx-radius-lg);
  padding: var(--sx-space-6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background-color var(--sx-duration) var(--sx-ease),
    border-color var(--sx-duration) var(--sx-ease);
}

.sx-pq-item:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
}

.sx-pq-item h4 {
  margin: 0 0 var(--sx-space-2);
  font-size: var(--sx-fs-lg);
  color: var(--sx-text-on-dark);
  font-weight: var(--sx-fw-semibold);
}

.sx-pq-item p {
  margin: 0;
  color: var(--sx-text-on-dark-soft);
  font-size: var(--sx-fs-sm);
  line-height: var(--sx-lh-normal);
}

/* ====================================================================== */
/* sx-particuliers — Pas juste pour les pros (2 cols sur fond teal)      */
/* ====================================================================== */

.sx-particuliers {
  background: var(--sx-gradient-cta);
  color: var(--sx-text-on-dark);
  padding-block: var(--sx-section-pad-y);
}

.sx-part-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sx-space-10);
  align-items: center;
}

@media (min-width: 768px) {
  .sx-part-inner {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--sx-space-16);
  }
}

.sx-part-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  color: var(--sx-text-on-dark);
  padding: var(--sx-space-1) var(--sx-space-3);
  border-radius: var(--sx-radius-full);
  font-size: var(--sx-fs-xs);
  font-weight: var(--sx-fw-semibold);
  letter-spacing: var(--sx-tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--sx-space-4);
}

.sx-particuliers .sx-part-left h2 {
  color: var(--sx-text-on-dark);
  margin: 0 0 var(--sx-space-4);
}

.sx-part-lead {
  color: var(--sx-text-on-dark-soft);
  font-size: var(--sx-fs-lg);
  line-height: var(--sx-lh-normal);
  margin: 0;
}

.sx-part-row {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--sx-radius-lg);
  padding: var(--sx-space-5) var(--sx-space-6);
  margin-bottom: var(--sx-space-3);
  display: flex;
  gap: var(--sx-space-4);
  align-items: center;
  color: var(--sx-text-on-dark);
}

.sx-part-row:last-child { margin-bottom: 0; }

.sx-part-row h3,
.sx-part-row h4 {
  color: var(--sx-text-on-dark);
  margin: 0 0 var(--sx-space-1);
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-fw-semibold);
}

.sx-part-row p {
  color: var(--sx-text-on-dark-soft);
  margin: 0;
  font-size: var(--sx-fs-sm);
  line-height: var(--sx-lh-normal);
}

/* ====================================================================== */
/* sx-engagements — Nos engagements (badge + h3 + p)                     */
/* ====================================================================== */

.sx-engagements {
  background: var(--sx-bg-white);
  padding-block: var(--sx-section-pad-y);
}

.sx-eng-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sx-space-5);
}

.sx-eng-card {
  background: var(--sx-bg-light);
  border: 1px solid var(--sx-border);
  border-top: 3px solid var(--sx-teal);
  border-radius: var(--sx-radius-lg);
  padding: var(--sx-space-8);
  transition: transform var(--sx-duration) var(--sx-ease),
              box-shadow var(--sx-duration) var(--sx-ease);
}

.sx-eng-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sx-shadow-md);
}

.sx-eng-card .badge {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--sx-radius-full);
  background: var(--sx-teal);
  color: var(--sx-text-on-dark);
  font-weight: var(--sx-fw-bold);
  font-size: var(--sx-fs-base);
  margin-bottom: var(--sx-space-4);
}

.sx-eng-card h3 {
  margin: 0 0 var(--sx-space-2);
  font-size: var(--sx-fs-xl);
  color: var(--sx-text-primary);
}

.sx-eng-card p {
  margin: 0;
  color: var(--sx-text-secondary);
  line-height: var(--sx-lh-normal);
}

/* ====================================================================== */
/* sx-commander — Comment commander (cards lien : num + h3 + p + cta)    */
/* ====================================================================== */

.sx-commander {
  background: var(--sx-bg-light);
  padding-block: var(--sx-section-pad-y);
}

.sx-cmd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sx-space-4);
}

.sx-cmd-card {
  background: var(--sx-bg-white);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius-lg);
  padding: var(--sx-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--sx-space-3);
  text-decoration: none;
  color: inherit;
  transition: transform var(--sx-duration) var(--sx-ease),
              box-shadow var(--sx-duration) var(--sx-ease),
              border-color var(--sx-duration) var(--sx-ease);
}

.sx-cmd-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sx-shadow-md);
  border-color: var(--sx-teal);
}

.sx-cmd-card .num {
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-lg);
  color: var(--sx-teal);
  font-weight: var(--sx-fw-bold);
  letter-spacing: var(--sx-tracking-wide);
}

.sx-cmd-card h3 {
  margin: 0;
  font-size: var(--sx-fs-xl);
  color: var(--sx-text-primary);
}

.sx-cmd-card p {
  margin: 0;
  color: var(--sx-text-secondary);
  line-height: var(--sx-lh-normal);
}

.sx-cmd-card .cta {
  margin-top: auto;
  color: var(--sx-teal);
  font-weight: var(--sx-fw-semibold);
  font-size: var(--sx-fs-sm);
}

.sx-cmd-card .cta::after {
  content: " →";
  transition: transform var(--sx-duration) var(--sx-ease);
  display: inline-block;
}

.sx-cmd-card:hover .cta::after {
  transform: translateX(3px);
}

/* ====================================================================== */
/* sx-faq — Questions fréquentes B2B (details/summary natifs)            */
/* ====================================================================== */

.sx-faq {
  background: var(--sx-bg-white);
  padding-block: var(--sx-section-pad-y);
}

.sx-faq > .container {
  max-width: 880px;
}

.sx-faq details {
  background: var(--sx-bg-light);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius-lg);
  margin-bottom: var(--sx-space-3);
  overflow: hidden;
  transition: border-color var(--sx-duration) var(--sx-ease);
}

.sx-faq details:hover {
  border-color: var(--sx-border-strong);
}

.sx-faq details[open] {
  border-color: var(--sx-teal);
}

.sx-faq summary {
  cursor: pointer;
  padding: var(--sx-space-5) var(--sx-space-12) var(--sx-space-5) var(--sx-space-6);
  font-weight: var(--sx-fw-semibold);
  color: var(--sx-text-primary);
  list-style: none;
  position: relative;
}

.sx-faq summary::-webkit-details-marker { display: none; }

.sx-faq summary::after {
  content: "+";
  position: absolute;
  right: var(--sx-space-6);
  top: 50%;
  transform: translateY(-50%);
  color: var(--sx-teal);
  font-size: var(--sx-fs-xl);
  font-weight: var(--sx-fw-regular);
  transition: transform var(--sx-duration) var(--sx-ease);
  line-height: 1;
}

.sx-faq details[open] summary::after {
  content: "−";
}

.sx-faq details > p,
.sx-faq details > div {
  padding: 0 var(--sx-space-6) var(--sx-space-5);
  margin: 0;
  color: var(--sx-text-secondary);
  line-height: var(--sx-lh-normal);
}