/* =========================================================================
   ResoSys : design-system (préfixe .rs-)
   Direction « L'Objet » : fond blanc, encarts crème, module PPMS au centre,
   réseau de modules animé en fond du héros. Police unique : Hanken Grotesk.
   La grille et les utilitaires viennent de Bootstrap ; ce fichier porte l'habillage.
   ========================================================================= */

:root {
  /* Couleurs */
  --rs-white: #FFFFFF;
  --rs-cream: #F4F2EE;
  --rs-cream-2: #ECE9E3;
  --rs-ink: #141414;
  --rs-mute: #66635E;
  --rs-line: #E4E1DB;
  --rs-red: #9D0000;        /* rouge du logo : actions */
  --rs-red-hover: #7E0000;
  --rs-blue: #0051A4;       /* bleu du logo : liens, pictos, actions secondaires (rouge = contact / essai / devis) */
  --rs-blue-hover: #003F80;
  --rs-blue-soft: #E8EFF7;
  /* Couleurs des 4 modules du site actuel (vert et ocre assombris d'un cheveu : texte blanc lisible) */
  --rs-mod-1: #6967B8;
  --rs-mod-2: #A34819;
  --rs-mod-3: #4F7E5F;
  --rs-mod-4: #9C6A17;

  /* Typographie */
  --rs-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Formes et rythme */
  --rs-radius: 20px;
  --rs-radius-sm: 14px;
  --rs-pad-x: clamp(20px, 4vw, 56px);
  --rs-sec: clamp(88px, 11vw, 160px);
  --rs-header-h: 108px;
  --rs-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Base ---------- */
html { background: var(--rs-white); }
body {
  background: var(--rs-white);
  color: var(--rs-ink);
  font-family: var(--rs-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 600; }
h1, h2, h3, h4 { font-family: var(--rs-font); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; margin: 0; }
/* Liens dans les textes : couleur du texte, simplement soulignés (trait plus épais au survol) */
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: inherit; text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--rs-blue); outline-offset: 3px; }
.container-xxl { padding-inline: var(--rs-pad-x); }
/* Gouttière par défaut, sauf sur les rangées qui ont leur classe g-* / gx-* (qui doit alors s'appliquer) */
.row:where(:not(.g-0, .g-1, .g-2, .g-3, .g-4, .g-5, .gx-0, .gx-1, .gx-2, .gx-3, .gx-4, .gx-5)) { --bs-gutter-x: clamp(24px, 3vw, 48px); }
.rs-ico { width: 1.1em; height: 1.1em; flex: none; }
.rs-skip { position: absolute; z-index: 100; left: 12px; top: 12px; background: var(--rs-ink); color: #fff; padding: 10px 14px; border-radius: 8px; }

/* ---------- Titres et textes ---------- */
.rs-section { padding-block: var(--rs-sec); }
.rs-h2 { font-size: clamp(34px, 4.2vw, 60px); margin-bottom: 28px; }
.rs-h2--card { font-size: clamp(28px, 2.8vw, 40px); }
.rs-head { margin-bottom: clamp(40px, 5vw, 72px); }
.rs-lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; letter-spacing: -.01em; }
.rs-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rs-blue); margin-bottom: 18px; }
.rs-rule { border-top: 1px solid var(--rs-line); margin-bottom: 24px; }

/* ---------- Boutons ---------- */
.rs-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--rs-font); font-weight: 600; font-size: 16px; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--rs-ease), color .2s var(--rs-ease), border-color .2s var(--rs-ease);
}
.rs-btn .rs-ico { transition: transform .25s var(--rs-ease); }
.rs-btn:hover .rs-ico { transform: translateX(4px); }
.rs-btn--red { background: var(--rs-red); color: #fff; }
.rs-btn--red:hover { background: var(--rs-red-hover); color: #fff; }
.rs-btn--ink { background: var(--rs-ink); color: #fff; }
.rs-btn--ink:hover { background: #333; color: #fff; }
.rs-btn--blue { background: var(--rs-blue); color: #fff; }
.rs-btn--blue:hover { background: var(--rs-blue-hover); color: #fff; }
.rs-btn--ghost { border-color: var(--rs-ink); color: var(--rs-ink); }
.rs-btn--ghost:hover { background: var(--rs-ink); color: #fff; }
.rs-btn--outline { border-color: var(--rs-line); color: var(--rs-ink); background: #fff; }
.rs-btn--outline:hover { border-color: var(--rs-ink); color: var(--rs-ink); }
.rs-btn--ghost-light { border-color: rgba(255,255,255,.35); color: #fff; }
.rs-btn--ghost-light:hover { background: #fff; color: var(--rs-ink); }
/* Envoi d'un formulaire en cours : « En cours… » + roue qui tourne à la place de la flèche */
.rs-btn.is-loading { cursor: progress; }
.rs-spinner {
  width: 1.1em; height: 1.1em; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: rs-spin .7s linear infinite;
}
@keyframes rs-spin { to { transform: rotate(360deg); } }
.rs-btn--sm { min-height: 40px; padding: 0 18px; font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- En-tête ---------- */
.rs-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: rgba(255,255,255,0); border-bottom: 1px solid transparent;
  transition: background-color .3s var(--rs-ease), border-color .3s var(--rs-ease);
}
.rs-header.is-scrolled { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-color: var(--rs-line); }
.rs-header__bar { height: var(--rs-header-h); transition: height .35s var(--rs-ease); }
.rs-header__logo img { display: block; height: 78px; width: auto; transition: height .35s var(--rs-ease); }
.rs-header.is-scrolled .rs-header__bar { height: 80px; }
.rs-header.is-scrolled .rs-header__logo img { height: 58px; }
.rs-header__actions { gap: 22px; }
.rs-header__tel { font-family: var(--rs-font); font-weight: 600; font-size: 16px; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--rs-ink); text-decoration: none; white-space: nowrap; }
.rs-header__tel:hover { color: var(--rs-red); }

.rs-nav__list { gap: clamp(22px, 2.6vw, 40px); }
.rs-nav__item { position: relative; display: flex; align-items: center; gap: 2px; }
.rs-nav__item > a { position: relative; color: var(--rs-ink); text-decoration: none; font-weight: 500; font-size: 16px; padding: 8px 0; }
.rs-nav__item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--rs-blue); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--rs-ease); }
.rs-nav__item > a:hover::after, .rs-nav__item > a[aria-current]::after { transform: scaleX(1); }
.rs-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; background: none; color: var(--rs-ink); padding: 0; border-radius: 6px; }
.rs-nav__toggle svg { width: 16px; height: 16px; transition: transform .25s var(--rs-ease); }
.rs-nav__sub {
  position: absolute; left: -16px; top: 100%; min-width: 260px;
  background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-radius-sm);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s var(--rs-ease), transform .2s var(--rs-ease), visibility .2s;
}
.rs-nav__sub a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--rs-ink); text-decoration: none; }
.rs-nav__sub a:hover { background: var(--rs-cream); }
.rs-nav__item--sub:focus-within .rs-nav__sub,
.rs-nav__item--sub.is-open .rs-nav__sub { opacity: 1; visibility: visible; transform: none; }
.rs-nav__item--sub.is-open .rs-nav__toggle svg { transform: rotate(180deg); }
@media (hover: hover) {
  .rs-nav__item--sub:hover .rs-nav__sub { opacity: 1; visibility: visible; transform: none; }
}

.rs-burger { position: relative; width: 46px; height: 46px; border: 1px solid var(--rs-line); border-radius: 999px; background: #fff; padding: 0; }
.rs-burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--rs-ink); }
.rs-burger span:first-child { top: 18px; }
.rs-burger span:last-child { top: 26px; }
.rs-offcanvas { --bs-offcanvas-width: min(420px, 100vw); font-family: var(--rs-font); }
.rs-offcanvas__logo { height: 46px; width: auto; }
.rs-offcanvas__list { font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.rs-offcanvas__list > li { border-bottom: 1px solid var(--rs-line); padding: 14px 0; }
.rs-offcanvas__list a { color: var(--rs-ink); text-decoration: none; }
.rs-offcanvas__list ul { font-size: 17px; font-weight: 400; margin-top: 8px; }
.rs-offcanvas__list ul li { padding: 4px 0 4px 14px; border-left: 1px solid var(--rs-line); }

/* ---------- Héros ---------- */
.rs-hero { position: relative; min-height: max(760px, 100svh); padding: calc(var(--rs-header-h) + 32px) 0 clamp(40px, 6vh, 72px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.rs-hero__net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rs-hero__inner { position: relative; z-index: 1; width: 100%; }
.rs-hero__title { font-size: clamp(46px, 6.1vw, 100px); font-weight: 800; letter-spacing: -.045em; line-height: .94; }
.rs-hero__title > span { display: block; }
.rs-hero__sub { font-size: clamp(19px, 1.6vw, 23px); font-weight: 400; letter-spacing: -.01em; line-height: 1.35; color: var(--rs-mute); margin: clamp(20px, 2.4vw, 30px) 0 clamp(24px, 2.8vw, 36px); }

/* Visuel : photos qui défilent (avec leur type de lieu) + module PPMS devant, en grande partie sur le fond */
.rs-hero__visual { position: relative; padding-left: 22%; }
.rs-slides { position: relative; height: min(calc(100svh - var(--rs-header-h) - 110px), 820px); min-height: 520px; width: 100%; border-radius: var(--rs-radius); overflow: hidden; background: var(--rs-cream); isolation: isolate; }
.rs-slide { position: absolute; inset: 0; margin: 0; visibility: hidden; clip-path: inset(100% 0 0 0); }
.rs-slide.is-on { visibility: visible; clip-path: inset(0 0 0 0); z-index: 1; }
.rs-slide.is-prev { visibility: visible; clip-path: inset(0 0 0 0); z-index: 0; }
.rs-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Type de lieu de la photo affichée : une seule étiquette, en haut à droite */
.rs-slide__place {
  position: absolute; z-index: 2; top: 18px; right: 18px;
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border-radius: 999px;
  background: #fff; color: var(--rs-ink); font-weight: 600; font-size: 15px; letter-spacing: -.005em;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}

.rs-hero__device { position: absolute; z-index: 4; left: 22%; top: 13%; height: 74%; aspect-ratio: 249 / 522; }
.rs-hero__device .rs-stack { height: 100%; transform: translateX(-63%); }

/* Module : états superposés (veille, intrusion, risque majeur, autre alerte) */
.rs-stack { position: relative; aspect-ratio: 249 / 522; }
.rs-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .8s var(--rs-ease); filter: drop-shadow(6px 10px 12px rgba(0,0,0,.28)) drop-shadow(28px 32px 36px rgba(0,0,0,.45)); }
.rs-stack img.is-on { opacity: 1; }
.rs-stack__glow {
  position: absolute; left: 42%; top: 62%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); filter: blur(22px); opacity: .5; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, var(--rs-glow, transparent) 0, transparent 66%);
}

/* ---------- Photos ---------- */
.rs-photo { margin: 0; overflow: hidden; border-radius: var(--rs-radius); background: var(--rs-cream); }
.rs-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rs-photo--wide { aspect-ratio: 4 / 3; }

/* ---------- Encarts crème ---------- */
.rs-card { background: var(--rs-cream); border-radius: var(--rs-radius); padding: clamp(28px, 3.4vw, 52px); }
.rs-card--lg { padding: clamp(28px, 5vw, 80px); }
.rs-plate { background: var(--rs-cream); border-radius: var(--rs-radius); padding: clamp(14px, 2vw, 28px); }
.rs-plate img { display: block; width: 100%; height: auto; border-radius: calc(var(--rs-radius) - 8px); }
@media (min-width: 992px) { .rs-sticky { position: sticky; top: calc(var(--rs-header-h) + 32px); } }

/* ---------- Le PPMS : diptyque « Qu'est-ce que » (clair) / « À qui » (foncé) ----------
   Un titre en haut, le texte en bas ; le premier paragraphe en chapeau, les suivants plus discrets. */
.rs-duo { border-radius: var(--rs-radius); overflow: hidden; }
.rs-duo__item { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(40px, 6vw, 96px); min-height: clamp(460px, 40vw, 600px); padding: clamp(32px, 4.4vw, 72px); }
.rs-duo__item--light { background: var(--rs-cream); }
.rs-duo__item--dark { background: var(--rs-ink); color: #fff; }
.rs-duo__title { font-size: clamp(32px, 3.4vw, 52px); max-width: 13ch; margin: 0; }
.rs-duo__body { max-width: 54ch; }
.rs-duo__lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; letter-spacing: -.01em; margin-bottom: 0; }
.rs-duo__more { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rs-line); font-size: 16px; color: var(--rs-mute); }
.rs-duo__more p:last-child { margin-bottom: 0; }
.rs-duo__item--dark .rs-duo__more { border-top-color: rgba(255,255,255,.16); color: #BDB9B2; }
.rs-duo__item--dark strong { color: #fff; }

/* ---------- Vidéo (chargée au clic, sans cookie avant) ---------- */
.rs-video { position: relative; border-radius: var(--rs-radius); overflow: hidden; background: var(--rs-ink); aspect-ratio: 16 / 9; }
.rs-video__link { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.rs-video__link img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--rs-ease); }
.rs-video__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%); }
.rs-video__link:hover { color: #fff; }
.rs-video__link:hover img { transform: scale(1.03); }
.rs-video__play {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--rs-red); color: #fff;
  transition: transform .3s var(--rs-ease), background-color .3s var(--rs-ease);
}
.rs-video__play svg { width: 30px; height: 30px; margin-left: 4px; }
.rs-video__link:hover .rs-video__play { transform: translate(-50%, -50%) scale(1.08); background: var(--rs-red-hover); }
.rs-video__title { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 20px; font-weight: 500; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.35; }
.rs-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Avantages ---------- */
.rs-adv { border-top: 1px solid var(--rs-line); border-left: 1px solid var(--rs-line); }
.rs-adv__item {
  height: 100%; padding: 30px 26px 34px;
  border-right: 1px solid var(--rs-line); border-bottom: 1px solid var(--rs-line);
}
.rs-adv__ico {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: var(--rs-blue); color: #fff;
  margin-bottom: 44px;
}
.rs-adv__ico svg { width: 26px; height: 26px; }
.rs-adv__item h3 { font-size: 22px; letter-spacing: -.025em; margin-bottom: 10px; }
.rs-adv__item p { margin: 0; color: var(--rs-mute); font-size: 16px; }

/* ---------- Produits ---------- */
.rs-product { display: flex; flex-direction: column; }
.rs-product__shot {
  aspect-ratio: 4 / 5; background: var(--rs-cream); border-radius: var(--rs-radius);
  display: flex; align-items: center; justify-content: center; padding: 16%; overflow: hidden;
}
.rs-product__shot img { max-height: 100%; width: auto; object-fit: contain; }
.rs-product__body { display: flex; flex-direction: column; flex: 1; padding-top: 22px; }
.rs-product__body h3 { font-size: 23px; letter-spacing: -.025em; margin-bottom: 12px; }
.rs-product__body p { color: var(--rs-mute); font-size: 16px; flex: 1; }
.rs-product__body .rs-btn { align-self: flex-start; }
.rs-btn--mod { background: var(--c); color: #fff; }
.rs-btn--mod:hover { background: color-mix(in srgb, var(--c) 82%, #000); color: #fff; }
.rs-btn--mod1 { --c: var(--rs-mod-1); }
.rs-btn--mod2 { --c: var(--rs-mod-2); }
.rs-btn--mod3 { --c: var(--rs-mod-3); }
.rs-btn--mod4 { --c: var(--rs-mod-4); }

/* ---------- Divers ---------- */
.rs-center-cta { margin-top: clamp(48px, 6vw, 88px); }
.rs-links li + li { margin-top: 12px; }
.rs-links a { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }

/* ---------- Essai gratuit ---------- */
.rs-trial { background: var(--rs-cream); border-radius: var(--rs-radius); padding: clamp(12px, 1.4vw, 20px); }
.rs-trial__photo { position: relative; height: 100%; min-height: 340px; border-radius: var(--rs-radius-sm); overflow: hidden; }
.rs-trial__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.rs-trial__body { padding: clamp(24px, 4.4vw, 68px); }
.rs-trial__title { font-size: clamp(42px, 5.6vw, 88px); letter-spacing: -.05em; line-height: .95; margin-bottom: 24px; }

/* ---------- Pied de page ---------- */
.rs-footer { background: var(--rs-ink); color: #D9D6D0; padding: clamp(64px, 8vw, 112px) 0 32px; font-size: 15px; }
.rs-footer a { color: #fff; text-decoration: none; }
.rs-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.rs-footer__logo { display: inline-block; background: #fff; border-radius: var(--rs-radius-sm); padding: 12px 14px; }
.rs-footer__logo img { display: block; height: 64px; width: auto; }
.rs-footer__desc { max-width: 46ch; color: #fff; font-size: 16px; }
.rs-footer__contact p { margin-bottom: 6px; }
.rs-footer__contact .rs-tel { font-weight: 600; font-variant-numeric: tabular-nums; }
.rs-footer__menu li + li { margin-top: 10px; }
.rs-footer__legal { border-top: 1px solid #2E2C29; margin-top: 64px; padding-top: 24px; font-size: 14px; color: #9C978F; }
.rs-footer__legal .rs-btn { color: #fff; }
.rs-footer .rs-footer__legal .rs-btn:hover { background: #fff; color: var(--rs-ink); text-decoration: none; }

/* =========================================================================
   PAGES INTÉRIEURES
   ========================================================================= */

/* Les ancres (#module-ppms…) s'arrêtent sous l'en-tête fixe */
section[id], [id].rs-anchor, .rs-prose h2[id] { scroll-margin-top: calc(var(--rs-header-h) + 24px); }

/* ---------- En-tête de page : fil d'Ariane, grand titre, chapeau, visuel ---------- */
.rs-phero { position: relative; padding: calc(var(--rs-header-h) + clamp(20px, 2.6vw, 40px)) 0 clamp(72px, 9vw, 136px); }
.rs-phero--short { padding-bottom: clamp(40px, 5vw, 72px); }
.rs-phero__title { font-size: clamp(44px, 6.2vw, 100px); font-weight: 800; letter-spacing: -.045em; line-height: .94; margin-bottom: clamp(24px, 2.8vw, 36px); text-wrap: balance; }
.rs-phero__title--long { font-size: clamp(40px, 5.2vw, 84px); }
.rs-phero__title:last-child { margin-bottom: 0; }
.rs-phero .rs-lead { max-width: 46ch; }
.rs-phero__list { margin: -6px 0 clamp(24px, 2.8vw, 34px); }

/* Fil d'Ariane */
.rs-crumbs { margin-bottom: clamp(32px, 4.4vw, 64px); font-size: 14px; color: var(--rs-mute); }
.rs-crumbs ol { row-gap: 4px; }
.rs-crumbs li { display: inline-flex; align-items: center; }
.rs-crumbs li + li::before { content: ""; width: 18px; height: 1px; margin: 0 12px; background: currentColor; opacity: .45; }
.rs-crumbs a { color: var(--rs-mute); text-decoration: none; }
.rs-crumbs a:hover { color: var(--rs-ink); text-decoration: underline; }
.rs-crumbs a[aria-current] { color: var(--rs-ink); font-weight: 500; }

/* Visuel du titre : photos qui défilent + module PPMS posé devant (même principe que l'accueil) */
.rs-phero__visual { position: relative; padding-left: 20%; }
.rs-slides--ratio { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
.rs-phero__device { position: absolute; z-index: 3; left: 20%; bottom: 9%; height: 74%; aspect-ratio: 249 / 522; }
.rs-phero__device .rs-stack { height: 100%; transform: translateX(-62%); }

/* ---------- Titres secondaires, espacements ---------- */
.rs-h3 { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.035em; line-height: 1.08; margin-bottom: 18px; }
.rs-cap { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rs-blue); margin: 0 0 14px; }
.rs-gap { margin-top: clamp(72px, 9vw, 140px); }
.rs-gap-md { margin-top: clamp(48px, 6vw, 88px); }
.rs-duo__title--wide { max-width: 19ch; }
.rs-duo__more ul { margin: 0 0 1em; padding-left: 1.1em; }
.rs-duo__more li + li { margin-top: 4px; }
.rs-photo--32 { aspect-ratio: 3 / 2; }
.rs-photo--soft { background: none; }
.rs-photo--soft img { height: auto; }

/* ---------- Étapes avec pictogramme (déclenchement, diffusion…) ---------- */
.rs-step { height: 100%; padding-top: 28px; border-top: 1px solid var(--rs-line); }
.rs-step + .rs-step { margin-top: clamp(32px, 4vw, 48px); }
.rs-step__ico {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; background: var(--rs-blue); color: #fff;
  margin-bottom: clamp(22px, 2.6vw, 36px);
}
.rs-step__ico svg { width: 24px; height: 24px; }
.rs-step h3, .rs-step .rs-step__title { font-size: clamp(23px, 1.9vw, 28px); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 12px; }
.rs-step p { color: var(--rs-mute); }
.rs-step p:last-child { margin-bottom: 0; }

/* ---------- Listes « intitulé : texte » (fonctionnement, avantages) ---------- */
.rs-feats { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rs-line); }
.rs-feats li { position: relative; padding: 20px 0 20px 46px; border-bottom: 1px solid var(--rs-line); color: var(--rs-mute); font-size: 16px; }
.rs-feats li::before {
  content: ""; position: absolute; left: 0; top: 21px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--rs-blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230051A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.rs-feats__k { display: block; color: var(--rs-ink); font-weight: 600; font-size: 19px; letter-spacing: -.015em; line-height: 1.3; margin-bottom: 3px; }
.rs-feats li > .rs-feats__k:only-child { margin: 3px 0 0; }
.rs-feats strong { color: var(--rs-ink); }
.rs-feats--plain li { padding: 14px 0 14px 42px; color: var(--rs-ink); font-size: 17px; line-height: 1.45; }
.rs-feats--plain li::before { top: 13px; }

/* ---------- Produit détouré sur fond crème (lueur de la couleur de l'alerte) ---------- */
.rs-shot {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: clamp(340px, 34vw, 520px); padding: clamp(36px, 5vw, 72px);
  background: var(--rs-cream); border-radius: var(--rs-radius); overflow: hidden; isolation: isolate;
}
.rs-shot::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 58%; width: min(72%, 440px); aspect-ratio: 1;
  border-radius: 50%; transform: translate(-50%, -50%); filter: blur(26px); opacity: .5;
  background: radial-gradient(circle, var(--glow, rgba(0,81,164,.35)) 0, transparent 66%);
}
.rs-shot img { display: block; width: auto; height: auto; max-width: 100%; max-height: clamp(250px, 28vw, 420px); filter: drop-shadow(6px 10px 12px rgba(0,0,0,.22)) drop-shadow(24px 30px 34px rgba(0,0,0,.3)); }
.rs-shot--sm img { max-height: clamp(200px, 22vw, 330px); }
.rs-shot--wide img { max-height: none; width: min(100%, 360px); }
.rs-shot--joined { border-radius: 0; }
.rs-shot--photo { padding: 0; }
.rs-shot--photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none; }
.rs-glow--red { --glow: rgba(214,38,38,.55); }
.rs-glow--green { --glow: rgba(34,170,90,.55); }
.rs-glow--blue { --glow: rgba(40,96,214,.45); }

/* ---------- Encart d'appel « Essai gratuit » ---------- */
.rs-band { padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--rs-line); border-bottom: 1px solid var(--rs-line); }
.rs-band__text { font-size: clamp(24px, 2.7vw, 40px); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; margin: 0; max-width: 32ch; text-wrap: balance; }
.rs-band__text strong { color: var(--rs-red); font-weight: 600; }

/* ---------- Fiches techniques (schémas de dimensions, autonomie) ---------- */
.rs-spec { display: flex; flex-direction: column; height: 100%; padding: clamp(22px, 2.4vw, 34px); border: 1px solid var(--rs-line); border-radius: var(--rs-radius); background: #fff; }
.rs-spec h3 { font-size: clamp(22px, 1.8vw, 26px); letter-spacing: -.03em; line-height: 1.12; margin-bottom: 14px; }
.rs-spec p { color: var(--rs-mute); font-size: 16px; }
.rs-spec__fig { margin: auto 0 0; padding-top: 12px; }
.rs-spec__fig img { display: block; width: 100%; height: auto; }
.rs-spec__fig--tall img { width: auto; max-width: 100%; max-height: 440px; margin-inline: auto; }
.rs-spec__note { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--rs-line); }
.rs-spec .rs-spec__note { color: var(--rs-ink); font-weight: 600; }
.rs-spec__note svg { width: 24px; height: 24px; flex: none; color: var(--rs-blue); }
.rs-spec + .rs-spec { margin-top: clamp(12px, 1.4vw, 24px); }
.rs-spec__img { display: block; width: 100%; height: auto; }
.rs-spec__img--round { border-radius: var(--rs-radius-sm); }
figure.rs-spec > .rs-spec__img { max-width: 520px; margin-inline: auto; }
.rs-spec__dims { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--rs-line); }
.rs-dims li { font-weight: 600; font-variant-numeric: tabular-nums; }
.rs-dims li + li { margin-top: 4px; }
/* Caractéristiques techniques (intitulé / valeur) */
.rs-specs { margin: 28px 0 0; border-top: 1px solid var(--rs-line); }
.rs-specs > div { padding: 16px 0; border-bottom: 1px solid var(--rs-line); }
.rs-specs dt { font-weight: 600; font-size: 17px; letter-spacing: -.01em; margin-bottom: 2px; }
.rs-specs dd { margin: 0; color: var(--rs-mute); font-size: 16px; }

/* ---------- États d'alerte du module (voyant qui clignote + écran) ---------- */
.rs-alert { --c: 214,38,38; display: flex; flex-direction: column; height: 100%; padding: clamp(18px, 1.8vw, 24px); background: var(--rs-cream); border-radius: var(--rs-radius); }
.rs-alert--green { --c: 34,170,90; }
.rs-alert--blue { --c: 40,96,214; }
.rs-alert h4, .rs-alert .rs-alert__title { font-size: 20px; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 8px; }
.rs-alert__led { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--rs-mute); font-size: 15px; }
.rs-led { width: 12px; height: 12px; border-radius: 50%; flex: none; background: rgb(var(--c)); box-shadow: 0 0 0 4px rgba(var(--c), .16), 0 0 14px rgba(var(--c), .9); animation: rs-blink 1.1s ease-in-out infinite; }
@keyframes rs-blink { 50% { opacity: .3; box-shadow: 0 0 0 4px rgba(var(--c), .05), 0 0 0 rgba(var(--c), 0); } }
/* Le module est posé en absolu : c'est l'écran (4:3) qui donne la hauteur de la rangée */
.rs-alert__mod { position: relative; height: 100%; min-height: 110px; background: #fff; border-radius: var(--rs-radius-sm); }
.rs-alert__mod img { position: absolute; left: 8%; top: 9%; width: 84%; height: 82%; object-fit: contain; filter: drop-shadow(4px 8px 10px rgba(0,0,0,.22)); }
.rs-alert__screen { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rs-radius-sm); }

/* ---------- Vidéo verticale (format court) ---------- */
.rs-video--v { aspect-ratio: 9 / 16; max-width: 380px; margin-inline: auto; }
.rs-video--v .rs-video__link img { object-fit: contain; padding: 12% 22% 38%; filter: drop-shadow(10px 18px 22px rgba(0,0,0,.6)); }
.rs-video--v .rs-video__link:hover img { transform: none; }
.rs-video--v .rs-video__play { top: 46%; }

/* ---------- Sommaire de la page Modules (vignettes produit) ---------- */
.rs-index__item {
  display: flex; flex-direction: column; height: 100%; padding: 14px 14px 16px;
  background: var(--rs-cream); border-radius: var(--rs-radius); color: var(--rs-ink); text-decoration: none;
  transition: background-color .25s var(--rs-ease);
}
.rs-index__item:hover { background: var(--rs-cream-2); color: var(--rs-ink); }
.rs-index__shot { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 12%; }
.rs-index__shot img { width: auto; height: auto; max-width: 100%; max-height: 100%; filter: drop-shadow(4px 8px 10px rgba(0,0,0,.2)); transition: transform .5s var(--rs-ease); }
.rs-index__item:hover .rs-index__shot img { transform: translateY(-6px); }
.rs-index__shot--photo { padding: 0; overflow: hidden; border-radius: var(--rs-radius-sm); }
.rs-index__shot--photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none; }
.rs-index__name { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex: 1; margin-top: 12px; font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
.rs-index__name svg { width: 20px; height: 20px; flex: none; color: var(--rs-blue); transition: transform .3s var(--rs-ease); }
.rs-index__item:hover .rs-index__name svg { transform: translateY(3px); }

/* ---------- Appel final sur fond foncé ---------- */
.rs-cta {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  background: var(--rs-ink); color: #fff; border-radius: var(--rs-radius);
  padding: clamp(56px, 8vw, 128px) clamp(24px, 5vw, 80px);
}
.rs-cta::before {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -62%; width: min(980px, 130%); aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(214,38,38,.4) 0, rgba(157,0,0,.16) 34%, transparent 64%);
}
.rs-cta__title { font-size: clamp(36px, 5vw, 80px); letter-spacing: -.045em; line-height: .98; max-width: 16ch; margin: 0 auto clamp(22px, 2.6vw, 32px); text-wrap: balance; }
.rs-cta__text { max-width: 52ch; margin: 0 auto clamp(28px, 3.4vw, 44px); color: #CFCBC4; font-size: clamp(17px, 1.3vw, 19px); }

/* ---------- Logiciel : capture de l'interface annotée ---------- */
.rs-app__notes--top { margin-bottom: clamp(28px, 3vw, 44px); }
.rs-app__notes--bottom { margin-top: clamp(28px, 3vw, 44px); }
.rs-note { position: relative; height: 100%; padding: clamp(22px, 2.2vw, 30px); background: var(--rs-cream); border-radius: var(--rs-radius); }
.rs-note__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.rs-note__head h2 { font-size: clamp(22px, 1.8vw, 26px); letter-spacing: -.03em; line-height: 1.1; margin: 0; }
.rs-note p { color: var(--rs-mute); font-size: 16px; }
.rs-note p:last-child { margin-bottom: 0; }
.rs-note .rs-btn { margin-top: 6px; }
.rs-pin { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--rs-blue); color: #fff; box-shadow: 0 0 0 4px #fff, 0 6px 16px rgba(0,0,0,.18); }
.rs-pin svg { width: 18px; height: 18px; }
.rs-note .rs-pin { box-shadow: none; }
@media (min-width: 768px) {
  .rs-app__notes .rs-note::after { content: ""; position: absolute; left: 50%; width: 1px; height: clamp(28px, 3vw, 44px); background: var(--rs-blue); opacity: .4; }
  .rs-app__notes--top .rs-note::after { top: 100%; }
  .rs-app__notes--bottom .rs-note::after { bottom: 100%; }
}
.rs-app__screen { background: var(--rs-cream); border-radius: var(--rs-radius); padding: 0 clamp(8px, 1.2vw, 16px) clamp(8px, 1.2vw, 16px); }
.rs-app__bar { display: flex; gap: 7px; padding: 14px 4px; }
.rs-app__bar span { width: 10px; height: 10px; border-radius: 50%; background: #D7D3CC; }
.rs-app__view { position: relative; overflow: hidden; border-radius: calc(var(--rs-radius) - 8px); background: #fff; box-shadow: 0 1px 0 var(--rs-line); }
.rs-app__view > img { display: block; width: 100%; height: auto; }
.rs-app__spots { position: absolute; inset: 0; }
.rs-spot { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 1.5px solid rgba(0,81,164,.6); border-radius: 8px; background: rgba(0,81,164,.05); }
.rs-spot .rs-pin { position: absolute; left: -12px; top: -14px; }
@media (max-width: 767.98px) {
  .rs-spot .rs-pin { width: 24px; height: 24px; left: -8px; top: -10px; box-shadow: 0 0 0 2px #fff; }
  .rs-spot .rs-pin svg { width: 13px; height: 13px; }
}

/* ---------- Contact ---------- */
.rs-coords { margin: 0; padding: 0; list-style: none; }
.rs-coords li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rs-line); }
.rs-coords li:last-child { border-bottom: 1px solid var(--rs-line); }
.rs-coords p { margin: 0; }
.rs-coords__ico { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--rs-blue-soft); color: var(--rs-blue); }
.rs-coords__ico svg { width: 20px; height: 20px; }
.rs-coords__tel { font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-decoration: none; }
.rs-map { position: relative; height: 100%; min-height: 320px; border-radius: var(--rs-radius); overflow: hidden; background: var(--rs-cream); }
.rs-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.rs-guide { margin: 0; padding: 0; list-style: none; }
.rs-guide li { padding: 16px 0; border-top: 1px solid var(--rs-line); }
.rs-guide__shot { display: flex; align-items: center; justify-content: center; flex: none; width: 88px; height: 88px; padding: 8px; background: var(--rs-cream); border-radius: var(--rs-radius-sm); }
.rs-guide__shot img { width: auto; height: auto; max-width: 100%; max-height: 100%; filter: drop-shadow(3px 6px 8px rgba(0,0,0,.18)); }
.rs-guide p { margin: 0; font-size: 16px; color: var(--rs-mute); }
.rs-guide strong, .rs-guide strong a { color: var(--rs-ink); }

.rs-form { background: var(--rs-cream); border-radius: var(--rs-radius); padding: clamp(24px, 3.4vw, 52px); }
.rs-form label, .rs-form legend, .rs-form .rs-label { display: block; font-size: 14px; font-weight: 600; letter-spacing: .005em; margin-bottom: 8px; }
.rs-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.rs-form legend { float: none; width: auto; padding: 0; }
.rs-req { color: var(--rs-red); }
.rs-input {
  display: block; width: 100%; min-height: 52px; padding: 12px 16px;
  background: #fff; border: 1px solid transparent; border-radius: 12px;
  font: inherit; font-size: 16px; color: var(--rs-ink);
  transition: border-color .2s var(--rs-ease);
}
.rs-input:focus { outline: none; border-color: var(--rs-blue); box-shadow: 0 0 0 3px rgba(0,81,164,.15); }
textarea.rs-input { min-height: 170px; resize: vertical; }
.rs-input[type="number"] { font-variant-numeric: tabular-nums; }
.rs-check {
  position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 0;
  min-height: 46px; padding: 10px 18px 10px 12px; background: #fff; border: 1px solid transparent; border-radius: 999px;
  font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color .2s var(--rs-ease);
}
.rs-form .rs-check { display: inline-flex; margin-bottom: 0; font-size: 15px; font-weight: 500; }
.rs-form .rs-check--block { display: flex; }
.rs-check:has(input:checked) { border-color: var(--rs-blue); }
.rs-check input {
  appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0;
  border: 1.5px solid #B5B0A8; border-radius: 6px; background: #fff center / 14px no-repeat; cursor: pointer;
  transition: background-color .2s var(--rs-ease), border-color .2s var(--rs-ease);
}
.rs-check input:checked {
  background-color: var(--rs-blue); border-color: var(--rs-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
}
.rs-check input:focus-visible { outline: 2px solid var(--rs-blue); outline-offset: 2px; }
.rs-check--block { display: flex; align-items: flex-start; border-radius: 12px; padding: 14px 16px; line-height: 1.45; }
.rs-check--block input { margin-top: 1px; }
.rs-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rs-notice { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 12px; font-weight: 500; margin-bottom: 24px; }
.rs-notice svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.rs-notice--ok { background: #E7F4EC; color: #17603A; }
.rs-notice--err { background: #F8E6E6; color: var(--rs-red); }

/* ---------- Textes longs (mentions légales) ---------- */
.rs-prose { max-width: 760px; }
.rs-prose h2 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.03em; line-height: 1.12; margin: clamp(48px, 5vw, 72px) 0 18px; }
.rs-prose h3 { font-size: 21px; letter-spacing: -.02em; line-height: 1.2; margin: 32px 0 12px; }
.rs-prose .rs-prose__h { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.03em; line-height: 1.12; margin: clamp(48px, 5vw, 72px) 0 18px; }
.rs-prose h3[id] { scroll-margin-top: calc(var(--rs-header-h) + 24px); }
.rs-prose > :first-child { margin-top: 0; }
.rs-prose p, .rs-prose li { color: #3E3B37; }
.rs-prose ul { padding-left: 1.2em; margin-bottom: 1em; }
.rs-prose li + li { margin-top: 4px; }
.rs-prose li::marker { color: var(--rs-blue); }
.rs-prose a { overflow-wrap: anywhere; }
.rs-prose__part { margin-top: clamp(80px, 9vw, 128px) !important; padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rs-line); font-size: clamp(36px, 4.2vw, 60px) !important; letter-spacing: -.04em !important; line-height: 1 !important; }
.rs-toc { position: sticky; top: calc(var(--rs-header-h) + 24px); font-size: 14px; }
.rs-toc p { margin: 0 0 10px; font-weight: 600; color: var(--rs-ink); }
.rs-toc ul + p { margin-top: 28px; }
.rs-toc li + li { margin-top: 8px; }
.rs-toc a { color: var(--rs-mute); text-decoration: none; }
.rs-toc a:hover { color: var(--rs-ink); text-decoration: underline; }

/* ---------- Plan du site ---------- */
.rs-sitemap { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rs-line); }
.rs-sitemap li { border-bottom: 1px solid var(--rs-line); }
.rs-sitemap a {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(18px, 2vw, 28px) 0; color: var(--rs-ink); text-decoration: none;
  font-size: clamp(26px, 3.2vw, 48px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1;
  transition: color .25s var(--rs-ease);
}
.rs-sitemap a > span { transition: transform .3s var(--rs-ease); }
.rs-sitemap a:hover { color: var(--rs-blue); }
.rs-sitemap a:hover > span { transform: translateX(14px); }
.rs-sitemap svg { width: clamp(24px, 2.4vw, 34px); height: clamp(24px, 2.4vw, 34px); flex: none; transition: transform .3s var(--rs-ease); }
.rs-sitemap a:hover svg { transform: translateX(6px); }

/* ---------- Animations : états avant entrée (uniquement si .js-anim) ---------- */
.js-anim .rs-phero__title,
.js-anim .rs-phero [data-in],
.js-anim .rs-hero__title,
.js-anim .rs-hero__sub,
.js-anim .rs-hero__ctas,
.js-anim .rs-hero__visual,
.js-anim [data-duo],
.js-anim [data-reveal],
.js-anim [data-reveal-list] > * { opacity: 0; }

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
  :root { --rs-header-h: 92px; }
  .rs-header__logo img { height: 66px; }
  .rs-hero { min-height: auto; }
  .rs-hero__visual { padding-left: 22%; margin-top: 12px; }
  .rs-slides { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .rs-adv__item { padding: 26px 22px 30px; }
  .rs-adv__ico { margin-bottom: 28px; }
  .rs-trial__photo { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
  .rs-duo__item { min-height: 0; }
  .rs-phero__visual { padding-left: 16%; }
  .rs-phero__device { left: 16%; }
  .rs-shot { min-height: 320px; }
  .rs-shot--photo { min-height: 0; aspect-ratio: 1; }
  .rs-video--v { max-width: 340px; }
  .rs-map { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 767.98px) {
  .rs-index__shot { aspect-ratio: 4 / 3; padding: 6%; }
  .rs-index__name { font-size: 14px; }
}
@media (max-width: 575.98px) {
  :root { --rs-header-h: 80px; }
  .rs-header__logo img { height: 58px; }
  .rs-header.is-scrolled .rs-header__bar { height: 72px; }
  .rs-header.is-scrolled .rs-header__logo img { height: 50px; }
  .rs-btn { white-space: normal; }
  .rs-slide__place { top: 12px; right: 12px; min-height: 32px; padding: 0 13px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}