/* ============================================================================
   SILEX MATERIEL : FEUILLE DU SITE VITRINE
   Le noir est le sujet, pas le fond : un studio photo, ou le materiel est la
   seule chose lumineuse de l'ecran. Un halo orange par section, jamais deux.

   Les jetons sont declares ICI et nulle part ailleurs : aucune couleur en dur
   dans les pages. L'en-tete partage (idmp_public_header.css) reste autonome,
   il est aussi charge par le catalogue qui ne lit pas cette feuille.

   Regles d'animation, non negociables :
   : transform et opacity pour les effets, jamais top/left/width ;
   : le contenu part VISIBLE, html.sx-anim (pose par silex_site.js) arme les
     etats caches, donc sans JavaScript tout reste lisible et indexable ;
   : prefers-reduced-motion neutralise tout, c'est une obligation.

   Paliers d'ecran : la grammaire du projet, aucune autre.
     telephone           (max-width: 768px)
     tablette debout     (min-width: 600px) and (max-width: 1024px) and (orientation: portrait)
     tablette couchee    (min-width: 769px) and (max-width: 1366px) and (orientation: landscape)
     bureau              (min-width: 1025px), (min-width: 769px) and (orientation: landscape)
   ========================================================================== */

:root {
  --sx-or:      #FF3019;
  --sx-or-h:    #DD2714;
  --sx-black:   #000000;
  --sx-deep:    #0B0B0D;
  --sx-surface: #0E1014;
  --sx-line:    rgba(255, 255, 255, .13);
  --sx-tx:      #FFFFFF;
  --sx-mu:      rgba(255, 255, 255, .62);
  --sx-mu2:     rgba(255, 255, 255, .55);
  --sx-halo:    rgba(255, 48, 25, .15);
  --sx-ease:    cubic-bezier(.16, 1, .3, 1);
  --iph-height: 80px;
}

/* ── Socle ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.sx-route-alt #sx-home { display: none; }
body {
  margin: 0;
  background: var(--sx-black);
  color: var(--sx-tx);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--sx-or); color: #fff; }
:focus-visible { outline: 2px solid var(--sx-or); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 3000;
  padding: 12px 18px;
  background: var(--sx-or);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ── Gabarit ─────────────────────────────────────────────────────────────── */
.sx-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.sx-sec {
  position: relative;
  padding: clamp(64px, 10vh, 140px) 0;
  overflow: clip;
}
.sx-sec-flush { padding: 0; }

/* ── Typographie ─────────────────────────────────────────────────────────── */
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
h1 { font-size: clamp(38px, 6vw, 96px); letter-spacing: -.03em; }
h2 { font-size: clamp(30px, 4vw, 56px); }
h3 { font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -.01em; }
p  { margin: 0; }

.sx-eyebrow {
  display: block;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sx-or);
}
.sx-lead {
  max-width: 640px;
  margin-top: 22px;
  font-size: clamp(16px, 1.35vw, 19px);
  color: var(--sx-mu);
}
.sx-head { position: relative; z-index: 1; max-width: 860px; }
.sx-head p { margin-top: 18px; color: var(--sx-mu); }

/* ── Halo orange : la signature ──────────────────────────────────────────
   Un seul par section. Il vit derriere le contenu, ne recoit aucun clic, et
   silex_site.js le translate a 12 pour cent de la vitesse du defilement. ── */
.sx-halo {
  position: absolute;
  inset: -18% -12%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 44% 56% at 50% 50%, var(--sx-halo), transparent 70%);
}
.sx-halo-soft { --sx-halo: rgba(255, 48, 25, .09); }
.sx-halo-strong { --sx-halo: rgba(255, 48, 25, .18); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.sx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .18s var(--sx-ease);
}
.sx-btn i { font-size: 19px; }
.sx-btn-or { background: var(--sx-or); color: #fff; }
.sx-btn-or:hover { background: var(--sx-or-h); }
.sx-btn-ghost {
  background: transparent;
  color: var(--sx-tx);
  border: 1px solid rgba(255, 255, 255, .35);
}
.sx-btn-ghost:hover { border-color: #fff; }
.sx-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}
.sx-note {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--sx-mu2);
}

/* ── Badges de stores dans les pages ─────────────────────────────────────── */
.sx-stores {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.sx-stores .iph-store.is-primary { border-color: rgba(255, 255, 255, .7); }

/* ── Bandeau de reassurance : quatre piliers ─────────────────────────────── */
.sx-pillars {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  padding: clamp(18px, 2.4vh, 28px) 0;
  border-top: 1px solid var(--sx-line);
  border-bottom: 1px solid var(--sx-line);
}
.sx-pillar { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sx-pillar i { flex: 0 0 auto; font-size: 22px; color: var(--sx-or); }
.sx-pillar span { font-size: 13.5px; font-weight: 600; color: var(--sx-mu); }

/* ── Bandeau defilant ────────────────────────────────────────────────────── */
.sx-marquee {
  overflow: hidden;
  border-top: 1px solid var(--sx-line);
  border-bottom: 1px solid var(--sx-line);
  padding: 15px 0;
}
.sx-marquee-track {
  display: flex;
  align-items: center;
  gap: 52px;
  width: max-content;
  animation: sx-mq 30s linear infinite;
  will-change: transform;
}
.sx-marquee:hover .sx-marquee-track { animation-play-state: paused; }
.sx-marquee span {
  display: flex;
  align-items: center;
  gap: 52px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sx-mu2);
  white-space: nowrap;
}
.sx-marquee b {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sx-or);
  flex: 0 0 auto;
}
@keyframes sx-mq { to { transform: translateX(-50%); } }

/* ── Heros ───────────────────────────────────────────────────────────────── */
.sx-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--iph-height) + 24px);
  overflow: clip;
}
.sx-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  width: 100%;
}
.sx-hero-media { position: relative; }
.sx-hero-foot { position: relative; z-index: 1; margin-top: clamp(30px, 5vh, 56px); }

/* Heros interieurs de pages : plus courts, meme langage. */
.sx-hero-page {
  position: relative;
  padding: calc(var(--iph-height) + clamp(56px, 9vh, 110px)) 0 clamp(44px, 7vh, 90px);
  overflow: clip;
}

/* ── La gamme : section epinglee, defilement horizontal ──────────────────
   position sticky, jamais de confiscation du defilement : la hauteur du
   conteneur donne la course, silex_site.js traduit la progression en
   translateX. Sur telephone : defilement horizontal natif avec accroche. ── */
.sx-gamme { position: relative; }
.sx-gamme-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 4vh, 44px);
  overflow: hidden;
  padding: calc(var(--iph-height) + 10px) 0 24px;
}
.sx-gamme-track {
  display: flex;
  gap: clamp(18px, 2vw, 32px);
  padding: 0 clamp(20px, 4vw, 48px);
  will-change: transform;
}
.sx-mach {
  position: relative;
  flex: 0 0 clamp(300px, 34vw, 440px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2vw, 30px);
  border: 1px solid var(--sx-line);
  border-radius: 22px;
  background: var(--sx-surface);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .18s ease;
}
.sx-mach-ton {
  position: absolute;
  top: 2px;
  right: 14px;
  z-index: 0;
  font-size: clamp(84px, 9vw, 140px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: rgba(255, 255, 255, .05);
  pointer-events: none;
}
.sx-mach > * { position: relative; z-index: 1; }
.sx-mach .sx-ph { border-radius: 14px; }
.sx-mach h3 { display: flex; align-items: baseline; gap: 10px; }
.sx-mach h3 small { font-size: 13px; font-weight: 600; color: var(--sx-mu); letter-spacing: 0; }
.sx-mach ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.sx-mach li { display: flex; gap: 9px; align-items: center; font-size: 13.5px; color: var(--sx-mu); }
.sx-mach li i { color: var(--sx-or); font-size: 15px; flex: 0 0 auto; }
/* ── LE PRIX, ANNONCE ET NON DEVINE ──────────────────────────────────────
   Demande de Gloire le 21 aout 2026. Le hors taxes est mis en avant, le
   toutes taxes le suit en petit : c'est la presentation deja retenue dans
   l'espace client, et la loi impose d'annoncer le TTC a un particulier
   (article L.112-1 du Code de la consommation). Une seule facon de dire un
   prix sur tout le site, sinon le meme chiffre parait different. */
.sx-mach-prix {
  margin: 2px 0 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.sx-mach-prix b {
  font-size: clamp(21px, 2.1vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--sx-tx);
}
.sx-mach-prix span { font-size: 13px; font-weight: 600; color: var(--sx-mu); }

.sx-mach-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sx-tx);
}
.sx-mach-link i { color: var(--sx-or); transition: transform .3s var(--sx-ease); }
.sx-mach:hover .sx-mach-link i { transform: translateX(5px); }

/* Le T18, produit d'appel : liseré et halo qui le distinguent du rang. */
.sx-mach.is-star { border-color: rgba(255, 48, 25, .55); }
.sx-mach.is-star::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 56% at 50% 8%, rgba(255, 48, 25, .12), transparent 70%);
}
.sx-mach-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--sx-or);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Cartes : une bordure et une icone reagissent, sans couche tournante geante. */
.sx-grid { position: relative; z-index: 1; display: grid; gap: clamp(14px, 1.6vw, 24px); }
.sx-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sx-card {
  position: relative;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: 20px;
  background: var(--sx-surface);
  border: 1px solid var(--sx-line);
  overflow: hidden;
  transition: border-color .18s ease;
}
.sx-card > * { position: relative; z-index: 1; }
.sx-card i.sx-card-ic {
  display: inline-flex;
  font-size: 26px;
  color: var(--sx-or);
  margin-bottom: 14px;
  transition: transform .22s var(--sx-ease);
}
.sx-card h3 { margin-bottom: 10px; }
.sx-card p { font-size: 14.5px; color: var(--sx-mu); }

/* ── Comparateur de flocage ──────────────────────────────────────────────── */
.sx-cmp {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--sx-line);
}
.sx-cmp .sx-ph { border: 0; border-radius: 0; }
.sx-cmp-top {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--sx-x, 50%)) 0 0);
}
.sx-cmp-bar {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--sx-x, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--sx-or);
  pointer-events: none;
}
.sx-cmp-bar::after {
  content: "\2194";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sx-or);
  color: #fff;
  font-size: 19px;
}
.sx-cmp-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}
.sx-cmp:focus-within { outline: 2px solid var(--sx-or); outline-offset: 4px; }
.sx-cmp-tag {
  position: absolute;
  bottom: 14px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  border: 1px solid var(--sx-line);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sx-mu);
  pointer-events: none;
}
.sx-cmp-tag.is-left { left: 14px; }
.sx-cmp-tag.is-right { right: 14px; color: var(--sx-or); border-color: rgba(255, 48, 25, .5); }

/* ── Section application : la maquette de telephone ──────────────────────── */
.sx-app-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.sx-phone-col { position: sticky; top: calc(var(--iph-height) + 30px); display: flex; justify-content: center; }
.sx-phone {
  position: relative;
  width: min(300px, 76vw);
  aspect-ratio: 1290 / 2796;   /* le ratio exact des captures fournies : zero rognage */
  border-radius: 44px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: var(--sx-deep);
  padding: 12px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
}
.sx-phone::before {
  content: "";
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 38%; height: 24px;
  border-radius: 0 0 16px 16px;
  background: #000;
  z-index: 3;
}
.sx-phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: #000;
}
.sx-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.sx-shot.is-on { opacity: 1; }
/* aspect-ratio:auto INDISPENSABLE : le data-ratio de l'emplacement imposait
   encore sa forme a l'interieur du chassis, et cover rognait la capture de
   22 pour cent en hauteur (mesure). C'est l'ecran du telephone qui donne la
   forme ici, pas la figure. */
.sx-shot .sx-ph { position: absolute; inset: 0; border: 0; border-radius: 0; aspect-ratio: auto; }
.sx-steps { display: grid; gap: clamp(16px, 2.4vh, 26px); }
.sx-step {
  padding: 20px 22px;
  border-left: 2px solid var(--sx-line);
  transition: border-color .3s ease;
}
.sx-step.is-on { border-left-color: var(--sx-or); }
.sx-step h3 { margin-bottom: 8px; font-size: 18px; }
.sx-step p { font-size: 14.5px; color: var(--sx-mu); }

/* ── Chiffres ────────────────────────────────────────────────────────────── */
.sx-counts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
}
.sx-count { border-top: 1px solid var(--sx-line); padding-top: 18px; }
.sx-count strong {
  display: block;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
.sx-count strong b { color: var(--sx-or); font-weight: 800; }
.sx-count span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--sx-mu); }

/* ── Questions frequentes ────────────────────────────────────────────────── */
.sx-faq { position: relative; z-index: 1; display: grid; gap: 10px; max-width: 860px; }
.sx-faq-item { border: 1px solid var(--sx-line); border-radius: 16px; background: var(--sx-surface); }
.sx-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border: 0;
  background: transparent;
  color: var(--sx-tx);
  font: inherit;
  font-size: 15.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.sx-faq-q i { color: var(--sx-or); font-size: 19px; transition: transform .3s var(--sx-ease); flex: 0 0 auto; }
.sx-faq-item.is-open .sx-faq-q i { transform: rotate(180deg); }
.sx-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--sx-ease);
}
.sx-faq-item.is-open .sx-faq-a { grid-template-rows: 1fr; }
.sx-faq-a > div {
  overflow: hidden;
  padding: 0 22px;
  font-size: 14.5px;
  color: var(--sx-mu);
}
.sx-faq-item.is-open .sx-faq-a > div { padding-bottom: 20px; }

/* ── Section vehicules : revelation par volet ────────────────────────────── */
.sx-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 70px);
  align-items: center;
}
.sx-split.is-flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.sx-veh-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.sx-veh-type {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--sx-line);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sx-mu);
}
.sx-veh-type i { color: var(--sx-or); font-size: 18px; }

/* ── Pied de page ────────────────────────────────────────────────────────── */
.sx-footer {
  border-top: 1px solid var(--sx-line);
  padding: clamp(44px, 7vh, 80px) 0 34px;
  background: var(--sx-deep);
}
.sx-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 3vw, 48px);
}
.sx-footer-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.sx-footer-brand img { width: 44px; height: 44px; }
.sx-footer-brand span { font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.sx-footer-brand b { font-weight: 700; }
.sx-footer-slogan { margin-top: 16px; font-size: 13.5px; color: var(--sx-mu); max-width: 260px; }
.sx-footer h3 {
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sx-mu2);
}
.sx-footer nav { display: grid; gap: 9px; }
.sx-footer nav a { font-size: 14px; color: var(--sx-mu); text-decoration: none; transition: color .16s ease; }
.sx-footer nav a:hover { color: var(--sx-tx); }
.sx-footer address { font-style: normal; font-size: 14px; color: var(--sx-mu); display: grid; gap: 9px; }
.sx-footer address a { text-decoration: none; }
.sx-footer .iph-store { min-height: 46px; padding: 6px 14px; }
.sx-footer-stores { display: flex; flex-wrap: wrap; gap: 10px; }
.sx-footer-bottom {
  margin-top: clamp(30px, 5vh, 52px);
  padding-top: 22px;
  border-top: 1px solid var(--sx-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--sx-mu2);
}
.sx-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; }
.sx-footer-bottom a { color: inherit; text-decoration: none; }
.sx-footer-bottom a:hover { color: var(--sx-tx); }
.sx-footer-entity { width: 100%; font-size: 11.5px; color: rgba(255, 255, 255, .38); }

/* ── Pages juridiques (servies par index.html sur leurs routes) ──────────── */
.sx-legal { max-width: 820px; margin: 0 auto; padding: calc(var(--iph-height) + 60px) 0 90px; }
.sx-legal h1 { font-size: clamp(30px, 4vw, 52px); }
.sx-legal-date { margin-top: 12px; color: var(--sx-mu2); font-size: 13.5px; }
.sx-legal article { margin-top: 40px; display: grid; gap: 28px; }
.sx-legal h2 { font-size: 20px; letter-spacing: -.01em; }
.sx-legal section p { margin-top: 10px; color: var(--sx-mu); font-size: 15px; }

/* ── Pages de paiement : autonomes, sans en-tete ni pied ─────────────────── */
.sx-pay {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  overflow: clip;
}
.sx-pay-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--sx-line);
  border-radius: 24px;
  background: var(--sx-surface);
  text-align: center;
}
.sx-pay-card img { height: 30px; width: auto; margin: 0 auto 22px; }
.sx-pay-ok {
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 48, 25, .12);
  color: var(--sx-or);
  font-size: 30px;
}
.sx-pay-card h1 { font-size: clamp(24px, 3vw, 34px); }
.sx-pay-card > p { margin-top: 14px; color: var(--sx-mu); font-size: 14.5px; }
.sx-pay-actions { display: grid; gap: 12px; margin-top: 26px; }
.sx-pay-note { margin-top: 18px; font-size: 12px; color: var(--sx-mu2); }

/* ── Contact ─────────────────────────────────────────────────────────────── */
.sx-contact-meta { display: grid; gap: 12px; margin-top: 26px; }
.sx-contact-meta a, .sx-contact-meta span {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--sx-mu); text-decoration: none;
}
.sx-contact-meta i { color: var(--sx-or); font-size: 18px; }
.sx-agences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.sx-agence { padding: 20px 22px; border: 1px solid var(--sx-line); border-radius: 16px; background: var(--sx-surface); }
.sx-agence h3 { font-size: 17px; margin-bottom: 6px; }
.sx-agence p { font-size: 13.5px; color: var(--sx-mu); }
/* Les horaires se detachent de l'adresse : deux paragraphes de meme graisse
   colles l'un a l'autre se lisent comme une seule adresse de cinq lignes.
   Le filet vaut mieux qu'une marge seule, il dit qu'il y a deux informations. */
.sx-agence .sx-agence-h { margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--sx-line); font-size: 12.5px; }

/* ── Fenetre de contact ──────────────────────────────────────────────────── */
.sx-modal { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sx-modal[hidden] { display: none; }
.sx-modal-back { position: absolute; inset: 0; border: 0; background: rgba(0, 0, 0, .7); cursor: pointer; }
.sx-modal-panel {
  position: relative;
  width: min(520px, 100%);
  max-height: 86vh;
  max-height: 86dvh;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 28px;
  border: 1px solid var(--sx-line);
  border-radius: 22px;
  background: var(--sx-surface);
}
.sx-modal-panel header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.sx-modal-panel h2 { font-size: 22px; }
.sx-modal-close {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--sx-line); border-radius: 50%;
  background: transparent; color: var(--sx-tx); font-size: 18px; cursor: pointer;
}
.sx-form { display: grid; gap: 14px; }
.sx-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sx-mu); }
.sx-form input, .sx-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sx-line);
  border-radius: 10px;
  background: var(--sx-deep);
  color: var(--sx-tx);
  font: inherit;
  font-size: 16px;
}
.sx-form input:focus, .sx-form textarea:focus { outline: 2px solid var(--sx-or); outline-offset: 0; border-color: transparent; }
.sx-form-err { color: var(--sx-or); font-size: 13px; }
.sx-form-status { font-size: 13px; color: var(--sx-mu); min-height: 18px; }

/* ── Couches d'ambiance : grain, halo curseur, voile de transition ───────── */
.sx-grain {
  position: fixed;
  inset: -60px;
  z-index: 2000;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sx-cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 1;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 48, 25, .07), transparent 62%);
  will-change: transform;
  opacity: 0;
  transition: opacity .4s ease;
}
.sx-cursor.is-on { opacity: 1; }
/* ── Animations d'entree ─────────────────────────────────────────────────
   Tout part visible. html.sx-anim, pose par le script quand le mouvement est
   permis, arme les etats initiaux ; .is-in les libere. Une seule fois. ───── */
/* Seuls les blocs encore hors ecran recoivent sx-reveal-pending. Les titres
   gardent leur texte natif. Le comparateur conserve son masque fonctionnel. */
html.sx-anim [data-reveal].sx-reveal-pending > .sx-zoom {
  opacity: 0;
  transform: scale(1.018);
  transition: opacity .24s ease, transform .36s var(--sx-ease);
}
html.sx-anim [data-reveal].sx-reveal-pending.is-in > .sx-zoom {
  opacity: 1;
  transform: scale(1);
}
html.sx-anim [data-reveal-fade].sx-reveal-pending,
html.sx-anim [data-split].sx-reveal-pending {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .32s var(--sx-ease);
}
html.sx-anim [data-reveal-fade].sx-reveal-pending.is-in,
html.sx-anim [data-split].sx-reveal-pending.is-in { opacity: 1; transform: none; }

@media (hover: hover) and (pointer: fine) {
  .sx-btn:not(:disabled):hover { transform: translateY(-1px); }
  .sx-card:hover, .sx-mach:hover { border-color: rgba(255,48,25,.48); }
  .sx-card:hover i.sx-card-ic { transform: translateY(-2px); }
  .sx-modal-close:hover { border-color: var(--sx-or); }
}
.sx-btn:not(:disabled):active { transform: scale(.985); }
.sx-btn:disabled { cursor: wait; opacity: .65; }

/* ── Paliers ─────────────────────────────────────────────────────────────── */

/* Tablette couchee : les grands gabarits respirent moins large. */
@media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) {
  h1 { font-size: clamp(36px, 5.2vw, 72px); }
  .sx-hero-grid { gap: clamp(22px, 3vw, 44px); }
  .sx-mach { flex-basis: clamp(290px, 36vw, 400px); }
}

/* Tablette debout : une colonne pour les duos, deux pour les grilles. */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
  .sx-hero { min-height: 72vh; }
  .sx-hero-grid, .sx-split, .sx-split.is-flip, .sx-app-grid { grid-template-columns: 1fr; }
  .sx-phone-col { position: static; order: -1; }
  .sx-grid-4, .sx-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-gamme { height: auto !important; }
  .sx-gamme-pin { position: static; min-height: 0; height: auto; padding-top: 0; }
  .sx-gamme-track { overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 14px; transform: none !important; }
  .sx-gamme-track .sx-mach { flex-basis: min(68vw, 440px); scroll-snap-align: start; }
}

/* Telephone. */
@media (max-width: 768px) {
  .sx-hero { min-height: 92svh; }
  .sx-hero-grid, .sx-split, .sx-split.is-flip, .sx-app-grid { grid-template-columns: 1fr; }
  .sx-phone-col { position: static; order: -1; }
  .sx-grid-4, .sx-grid-3, .sx-grid-2 { grid-template-columns: 1fr; }
  .sx-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-footer-grid { grid-template-columns: 1fr; }
  .sx-agences { grid-template-columns: 1fr; }
  .sx-veh-types { grid-template-columns: 1fr; }

  /* La gamme quitte l'epingle : defilement horizontal natif, accroche douce.
     Aucun script ne pilote, c'est le doigt. */
  .sx-gamme { height: auto !important; }
  .sx-gamme-pin { position: static; min-height: 0; height: auto; padding-top: 0; }
  .sx-gamme-track {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
    transform: none !important;
  }
  .sx-mach { flex-basis: 82vw; scroll-snap-align: center; }
  .sx-cmp-bar::after { width: 38px; height: 38px; }
}

/* ── Mouvement reduit : tout est neutralise, rien n'est perdu ────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sx-marquee-track { animation: none; }
  .sx-card:hover::before { animation: none; opacity: 0; }
  .sx-card:hover { border-color: rgba(255, 48, 25, .55); }
  .sx-grain, .sx-cursor { display: none; }
  html.sx-anim [data-reveal],
  html.sx-anim [data-reveal-fade],
  html.sx-anim [data-split],
  html.sx-anim [data-reveal] .sx-zoom,
  html.sx-anim .sx-line span {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sx-btn, .sx-card i.sx-card-ic, .sx-mach-link i { transform: none !important; }
  .sx-gamme { height: auto !important; }
  .sx-gamme-pin { position: static; min-height: 0; }
  .sx-gamme-track { overflow-x: auto; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE HERO SUR ORDINATEUR : la photo a la hauteur du texte
   Pose le 17 aout 2026, a la demande de Gloire : "suffisamment grande pour
   qu'elle soit en adequation avec le texte a gauche, j'ai fait expres de faire
   un bras qui montre vers le haut pour que ca match bien".

   MESURE DE DEPART, a 1440x900 : colonne de texte 570x827, photo 516x516,
   soit 62 pour cent de la hauteur du texte. La photo etait perdue a cote de
   son texte, et le bras releve ne montait nulle part.

   POURQUOI LA LARGEUR EST LE SEUL LEVIER. La nouvelle photo est CARREE et
   DETOUREE. En object-fit:contain, un carre remplit exactement sa boite : sa
   hauteur rendue EGALE donc sa largeur, quelle que soit la hauteur qu'on
   donne au cadre. Grandir la boite en hauteur ne change rien a l'ecran. Il
   n'y a que trois facons de gagner de la largeur, et je les ai mesurees
   toutes les trois.

   CE QUI N'A PAS MARCHE, ET POURQUOI JE NE L'AI PAS GARDE. Rebalancer la
   grille seule plafonne a 73 pour cent : retrecir la colonne de texte fait
   RETOMBER le paragraphe sur plus de lignes, sa hauteur passe de 827 a 917,
   et le rapport photo/texte REDESCEND alors meme que la photo grandit. Mesure
   sur cinq repartitions : 62, 70, 67, 70, 73. C'est une boucle, pas une
   pente.

   CE QUI MARCHE. La photo sort de sa cellule vers la GOUTTIERE DROITE, celle
   que .sx-wrap reserve entre son contenu et le bord de la fenetre, en
   s'arretant a 24px du bord. Combine a une gouttiere interieure ramenee a
   24px et a une repartition 1 / 1,08, cela donne 706x706, soit 85 pour cent
   de la hauteur du texte, sans toucher a la hauteur de la colonne de texte,
   qui reste a 827.

   C'est le MAXIMUM honnete. Aller au-dela demanderait soit de rogner la
   photo, ce qui couperait le bras releve, soit de la faire passer sous le
   texte. Les deux defont l'intention.

   Le debord ne cree AUCUN defilement horizontal : .sx-hero porte deja
   overflow:clip. Verifie a 1440, 1366 couche, 1024 couche : debordement 0.

   PALIER : bureau et tablette COUCHEE, les deux ou la grille est a deux
   colonnes. Ce bloc est en FIN de feuille pour passer apres le bloc tablette
   couchee, qui posait sa propre gouttiere. La tablette DEBOUT et le telephone
   passent la grille a une seule colonne : le debord y serait un desastre, la
   photo depasserait la fenetre. Ils sont hors de ce palier par construction,
   la condition exigeant soit 1025px, soit le mode paysage.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px), (min-width: 769px) and (orientation: landscape) {
  .sx-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 24px;
  }
  /* La gouttiere droite disponible vaut la moitie de ce que .sx-wrap laisse
     de chaque cote, plus son propre remplissage. On en rend 24px pour que la
     machine ne colle pas au bord. min() protege les fenetres plus etroites
     que 1240px, ou la moitie exterieure vaut zero. */
  .sx-hero-media {
    width: calc(100% + (100vw - min(1240px, 100vw)) / 2 + clamp(20px, 4vw, 48px) - 24px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA GAMME EPINGLEE TIENT DANS L'ECRAN, PRIX ET LIEN COMPRIS
   Demande de Gloire du 31 aout 2026 : "lors du scroll reveal du site vitrine
   version ordinateur les mini-pelles defilent mais on ne voit pas l'essentiel,
   tarifs et element valorise, elles sont coupees au niveau des blocs".

   MESURE DU DEFAUT, au banc a 1512x900. La bande epinglee se compose ainsi :
     90  padding haut (la barre d'invitation fait 80, plus 10)
    164  le bloc titre
     36  l'ecart
    816  la piste de cartes
     24  padding bas
   ────
   1130 px pour une fenetre de 900. Le pin porte overflow:hidden : les 230 px
   de trop sont COUPES, et ce qui tombe en bas d'une carte, dans l'ordre, ce
   sont exactement le prix et le lien vers la fiche. Gloire ne decrivait pas
   une impression, il decrivait une soustraction.

   POURQUOI LA PHOTO EST LE SEUL LEVIER. La carte empile photo, nom, trois
   arguments, prix, lien. Les quatre derniers sont du texte : les rogner, c'est
   perdre l'information. La photo, elle, est une machine detouree sur fond
   transparent : elle supporte de maigrir sans rien perdre de son sens. Elle
   passe donc de aspect-ratio:1/1, qui la faisait haute comme la carte est
   large, a flex:1 1 0, qui lui donne ce qui reste une fois le texte servi.

   LA CARTE SUIT AUSSI LA HAUTEUR, et non plus la seule largeur :
   min(30vw, 40vh) la retrecit sur un ecran bas, ou une carte large afficherait
   une machine minuscule au milieu de deux colonnes de vide.

   align-self:stretch ET NON height:100%. Mesure faite : avec height:100% la
   carte s'arretait a 528 px dans une piste de 654, et la photo restait collee
   a son plancher de 90 px. Le stretch explicite la porte a 654, et la photo
   remonte a 216.

   RESULTAT MESURE, meme fenetre : pin 900 (debordement zero), carte 360x654,
   photo 216, prix et lien DANS le cadre.

   PALIER : celui de la bande epinglee, c'est-a-dire celui que silex_site.js
   interroge (innerWidth >= 769). Le mode "mouvement reduit" en est exclu
   explicitement : la-bas le pin est static et la piste defile a la main, ces
   regles n'auraient aucun sens et casseraient un affichage qui va bien.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference),
       (min-width: 769px) and (orientation: landscape) and (prefers-reduced-motion: no-preference) {
  .sx-gamme-pin { gap: clamp(14px, 2.2vh, 26px); padding-bottom: 16px; }
  .sx-gamme-pin > .sx-wrap { flex: 0 0 auto; }
  .sx-gamme-pin > .sx-wrap h2 { margin-bottom: 6px; }
  .sx-gamme-pin > .sx-wrap p { font-size: 14px; line-height: 1.45; margin: 0; }

  /* La piste prend ce qui reste sous le titre, et le laisse se comprimer :
     sans min-height:0 un enfant flex refuse de descendre sous sa taille de
     contenu, et la piste repousserait le bas du pin hors de l'ecran. */
  .sx-gamme-track { flex: 1 1 auto; min-height: 0; align-items: stretch; }

  .sx-mach {
    align-self: stretch;
    min-height: 0;
    flex-basis: clamp(280px, min(30vw, 40vh), 380px);
  }
  .sx-mach .sx-ph { flex: 1 1 0; min-height: 90px; aspect-ratio: auto; }
  .sx-mach .sx-ph img { width: 100%; height: 100%; object-fit: contain; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ... ET ELLE TIENT AUSSI SUR LES ECRANS BAS
   Suite du bloc precedent. Le premier correctif rend la bande exacte a 900px
   de haut, mais la mesure sur quatre formats montre que le contenu cesse de
   se comprimer en dessous : la carte atteint sa hauteur incompressible et
   c'est le PIN qui s'etire, hors de la fenetre.
     1512 x 900  ->  pin 900, debordement 0        (le cas de reference)
     1512 x 768  ->  pin 881, debordement 113
     1280 x 660  ->  pin 784, debordement 124
     1024 x 600  ->  pin 728, debordement 128
   Un debordement de 113 rejette le lien, qui vit a 47px du bas, 66px sous le
   bord de l'ecran. Le defaut de depart revenait donc tel quel sur tout
   portable dont la fenetre utile descend sous 900, ce qui est le cas courant
   d'un 13 pouces une fois les barres du navigateur deduites.

   CE QUI COUTE LE PLUS CHER, mesure sur une carte a 1024x600 :
     92  le chiffre geant du tonnage        <- le poste dominant
    120  la photo
     79  les trois arguments
     70  les cinq ecarts internes
     41  les marges internes hautes et basses
     34  le prix
     22  le lien
   Le chiffre du tonnage pese donc plus lourd que la photo qu'il annonce. Il
   etait en unites de largeur : sur une fenetre large et basse il grandissait
   pendant que la place manquait.

   LA REGLE : tout ce qui occupe de la hauteur passe en unites de HAUTEUR,
   avec un plafond CALIBRE POUR ETRE ATTEINT DES 900px. 90/900 fait 10vh,
   92/900 fait 10,2vh, 14/900 fait 1,55vh, et ainsi de suite. Consequence
   voulue : au-dessus de 900 tous les plafonds sont satures, RIEN NE CHANGE
   par rapport a ce que Gloire voit aujourd'hui sur son ecran. En dessous,
   tout retrecit du meme rapport que la fenetre, sans marche d'escalier.

   Le second palier, sous 820, va plus loin sur les deux seuls postes qui
   peuvent encore rendre de la place sans retirer d'information : le chiffre
   geant, qui est un ornement, et le titre de section. Les arguments, le prix
   et le lien ne sont jamais touches : ce sont eux que Gloire veut voir.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference),
       (min-width: 769px) and (orientation: landscape) and (prefers-reduced-motion: no-preference) {
  .sx-gamme-pin {
    padding-top: clamp(68px, 10vh, 90px);
    padding-bottom: clamp(10px, 1.78vh, 16px);
  }
  .sx-gamme-track .sx-mach {
    padding-top: clamp(12px, 2.28vh, 20.5px);
    padding-bottom: clamp(12px, 2.28vh, 20.5px);
    gap: clamp(7px, 1.55vh, 14px);
  }
  .sx-gamme-track .sx-mach-ton { font-size: clamp(42px, 10.2vh, 92px); line-height: 1; }
  .sx-gamme-track .sx-mach ul { line-height: clamp(1.3, 2.85vh, 1.6); }
  .sx-gamme-track .sx-mach .sx-ph { min-height: clamp(70px, 10vh, 90px); }
}

/* Second palier : la fenetre est trop basse pour que le rapport suffise. */
@media (min-width: 1025px) and (max-height: 820px) and (prefers-reduced-motion: no-preference),
       (min-width: 769px) and (orientation: landscape) and (max-height: 820px) and (prefers-reduced-motion: no-preference) {
  .sx-gamme-track .sx-mach-ton { font-size: clamp(30px, 7vh, 58px); }
  .sx-gamme-pin > .sx-wrap h2 { font-size: clamp(20px, 3.2vh, 28px); margin-bottom: 4px; }
  .sx-gamme-pin > .sx-wrap p { font-size: 13px; line-height: 1.4; }
}