/*
 * Serenia — « Reel » (refonte 2026-09-29)
 *
 * Direction : de la tempête au calme. Une ligne de signal traverse la page et
 * se transforme à chaque scène (houle → manifeste → dôme Secure → pouls Echo →
 * maillage Care → circuit Autopilot → packs → horizon calme).
 * Référence de style : hero cinématique de l’accueil (fond encre, verre, CTA
 * #a5d8ff, titres Cerebri Light 300). Tailles : tokens --cb-* de styles.css.
 * Palette narrative : les trois arrêts de --cb-accent-gradient sont les trois
 * briques (Secure #567eff · Echo #42bbdf · Care #67e0b9).
 * Mouvement : serenia-motion.js pilote canvas/SVG. Sans JS ou en mouvement
 * réduit, chaque scène s’affiche dans son état final, lisible et statique.
 */

/* ---------------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------------ */
.srl-page {
  --srl-bg: #030814;
  --srl-bg-2: #06102a;
  --srl-line: rgba(146, 176, 216, .14);
  --srl-line-2: rgba(146, 176, 216, .26);
  --srl-ink: var(--cb-display-ink-dark, #cbd7eb);
  --srl-text: var(--cb-lead-ink-dark, rgba(203, 215, 234, .78));
  --srl-muted: #8c9bb8;
  --srl-strong: #eef3fb;
  --srl-secure: #567eff;
  --srl-echo: #42bbdf;
  --srl-care: #67e0b9;
  --srl-alert: #ff5f7a;
  --srl-cta: #a5d8ff;
  --srl-cta-ink: #03101d;
  --srl-ease: cubic-bezier(.16, 1, .3, 1);
  --srl-ease-io: cubic-bezier(.65, 0, .35, 1);
  --srl-shell: min(calc(100% - 120px), 1360px);
  background: var(--srl-bg);
  color: var(--srl-text);
}

.serenity-page .serenia-main {
  position: relative;
  overflow: clip;
  background: var(--srl-bg);
}

.srl-page ::selection {
  background: rgba(66, 187, 223, .32);
  color: #fff;
}

.srl-page :where(a, button, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--srl-cta);
  outline-offset: 3px;
}

.srl-shell {
  width: var(--srl-shell);
  margin-inline: auto;
}

.srl-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
 * Header Serenia (topbar produit) — superposé au hero, opaque au défilement
 * ------------------------------------------------------------------------ */
body.story-skin .serenia-topbar.site-header {
  position: sticky;
  top: 0;
  z-index: 160;
  height: var(--cb-topbar-h);
  margin-bottom: calc(-1 * var(--cb-topbar-h));
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(3, 8, 20, .72) 0%, rgba(3, 8, 20, 0) 100%);
  box-shadow: none;
  backdrop-filter: none;
  transition: background-color .45s ease, box-shadow .45s ease;
}

body.story-skin .serenia-topbar.site-header.is-scrolled {
  background: rgba(3, 8, 20, .82);
  box-shadow: 0 1px 0 rgba(148, 209, 244, .08);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

body.story-skin .serenia-topbar.site-header::before,
body.story-skin .serenia-topbar.site-header::after {
  display: none;
}

.serenia-topbar__inner {
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0 var(--cb-topbar-pad-x);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 21px;
  align-items: center;
  box-sizing: border-box;
}

.serenia-nav-shell {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.serenia-nav.site-nav {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex: none;
  align-items: center;
  flex-direction: row;
  gap: clamp(35px, 3.25vw, 64px);
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  translate: none;
  transform: none;
}

.serenia-nav.site-nav a {
  position: relative;
  padding: 0;
  color: rgba(226, 235, 250, .92);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.015em;
  text-decoration: none;
  white-space: nowrap;
}

.serenia-nav.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -9px;
  height: 1px;
  background: #9fdcff;
  transition: right .25s ease;
}

.serenia-nav.site-nav a:hover::after,
.serenia-nav.site-nav a:focus-visible::after,
.serenia-nav.site-nav a[aria-current="location"]::after {
  right: 0;
}

.serenia-nav.site-nav a[aria-current="location"] {
  color: #fff;
}

.serenia-topbar__actions {
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.2vw, 42px);
}

.serenia-language.language-select {
  width: 82px;
  height: 46px;
  margin: 0;
}

.serenia-language.language-select select {
  width: 100%;
  height: 100%;
  padding: 0 30px 0 18px;
  border: 1px solid rgba(146, 176, 216, .26);
  border-radius: 12px;
  color: #eceae7;
  background-color: rgba(3, 12, 26, .62);
  font: 600 16px/1 var(--font-family, "Cerebri Sans"), sans-serif;
  box-shadow: none;
}

.serenia-login {
  color: #e8e6e2;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

.serenia-header-cta {
  min-width: 226px;
  height: 48px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(194, 233, 255, .68);
  border-radius: 10px;
  color: var(--srl-cta-ink);
  background: linear-gradient(110deg, #a7ddff 0%, #8dcef8 100%);
  box-shadow: 0 10px 30px rgba(78, 178, 243, .11);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition: filter .25s ease, translate .25s ease;
}

.serenia-header-cta:hover,
.serenia-header-cta:focus-visible {
  color: #061321;
  filter: brightness(1.06);
  translate: 0 -1px;
}

.serenia-menu-toggle.menu-toggle {
  display: none;
}

body.story-skin .serenia-cloudbizz-logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  text-decoration: none;
}

body.story-skin .serenia-cloudbizz-logo:focus-visible {
  outline: 2px solid #a9d8ff;
  outline-offset: 6px;
  border-radius: 3px;
}

@media (min-width: 1321px) {
  body.story-skin .serenia-topbar__inner {
    position: relative;
    width: 100%;
    gap: clamp(18px, 2vw, 34px);
  }

  body.story-skin .serenia-topbar .topbar-brand {
    grid-column: 1;
    justify-self: start;
    height: 48px;
  }

  body.story-skin .serenia-nav-shell {
    display: contents;
  }

  body.story-skin .serenia-nav.site-nav {
    gap: 45px;
    pointer-events: auto;
  }

  body.story-skin .serenia-topbar__actions {
    grid-column: 3;
    justify-self: end;
    width: auto;
    min-height: 48px;
    margin-left: 0;
    gap: 26px;
  }
}

@media (min-width: 1321px) and (max-width: 1500px) {
  body.story-skin .serenia-nav.site-nav {
    gap: clamp(18px, 1.5vw, 24px);
  }

  body.story-skin .serenia-topbar__actions {
    gap: 14px;
  }

  body.story-skin .serenia-language.language-select {
    width: 74px;
  }

  body.story-skin .serenia-header-cta {
    min-width: 180px;
    padding-inline: 15px;
    font-size: 14px;
  }
}

@media (max-width: 1320px) {
  body.story-skin .serenia-topbar__inner {
    position: relative;
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(18px, 2vw, 34px);
  }

  body.story-skin .serenia-topbar .topbar-brand {
    justify-self: start;
    height: 38px;
  }

  body.story-skin .serenia-nav-shell {
    position: static;
    height: 52px;
    justify-content: flex-end;
  }

  body.story-skin .serenia-topbar__actions {
    width: 100%;
    min-height: 52px;
    margin-left: 0;
    justify-content: flex-end;
    gap: clamp(14px, 1.6vw, 26px);
  }

  body.story-skin .serenia-header-cta {
    height: 48px;
    padding: 0 22px;
  }

  body.story-skin .serenia-menu-toggle.menu-toggle {
    position: static;
    width: auto;
    min-width: 111px;
    height: 48px;
    min-height: 48px;
    padding: 0 18px;
    display: grid;
    grid-template-columns: 20px auto;
    grid-template-rows: repeat(3, 4px);
    align-content: center;
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    border: 1px solid rgba(146, 176, 216, .26);
    border-radius: 12px;
    color: #e6eefb;
    background: rgba(10, 18, 32, .42);
    box-shadow: none;
    font: 600 16px/1 var(--font-family, "Cerebri Sans"), sans-serif;
  }

  body.story-skin .serenia-menu-toggle.menu-toggle span {
    position: static;
    inset: auto;
    grid-column: 1;
    width: 20px;
    height: 1px;
    margin: 0;
    background: currentColor;
  }

  body.story-skin .serenia-menu-toggle.menu-toggle span:nth-child(1) { grid-row: 1; }
  body.story-skin .serenia-menu-toggle.menu-toggle span:nth-child(2) { grid-row: 2; }
  body.story-skin .serenia-menu-toggle.menu-toggle span:nth-child(3) { grid-row: 3; }

  body.story-skin .serenia-menu-toggle.menu-toggle b {
    position: static;
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    font-weight: 600;
  }

  body.story-skin .serenia-nav.site-nav {
    position: absolute;
    z-index: 5;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    width: min(360px, calc(100vw - 32px));
    height: auto;
    padding: 18px;
    display: grid;
    gap: 0;
    border: 1px solid rgba(53, 82, 115, .72);
    border-radius: 14px;
    background: rgba(3, 13, 27, .98);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .36);
    opacity: 0;
    visibility: hidden;
    translate: 0 -8px;
    transform: none;
    pointer-events: none;
    transition: opacity .25s ease, translate .25s ease, visibility .25s;
  }

  body.story-skin .serenia-nav.site-nav.is-open {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    pointer-events: auto;
  }

  body.story-skin .serenia-nav.site-nav a {
    min-height: 48px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(46, 72, 101, .48);
    font-size: 17px;
    line-height: normal;
  }

  body.story-skin .serenia-nav.site-nav a:last-child { border-bottom: 0; }
  body.story-skin .serenia-nav.site-nav a::after { display: none; }

  body.story-skin .serenia-nav.site-nav a[aria-current="location"] {
    background: rgba(159, 220, 255, .08);
    box-shadow: inset 3px 0 0 #9fdcff;
  }
}

@media (max-width: 760px) {
  body.story-skin .serenia-login { display: none; }
}

@media (max-width: 620px) {
  body.story-skin .serenia-topbar__inner {
    padding: 10px 14px;
    gap: 10px;
  }

  body.story-skin .serenia-header-cta { display: none; }
  body.story-skin .serenia-topbar__actions { gap: 12px; }

  body.story-skin .serenia-menu-toggle.menu-toggle {
    min-width: 103px;
    padding: 0 14px;
  }
}

@media (max-width: 360px) {
  body.story-skin .serenia-language.language-select,
  body.story-skin .serenia-language.language-select select {
    width: 64px;
    min-width: 64px;
  }

  body.story-skin .serenia-language.language-select select {
    padding-inline: 12px 22px;
    font-size: 15px;
  }
}

@media (min-width: 761px) {
  .serenity-page .page-breadcrumb--product {
    left: var(--serenia-breadcrumb-left, var(--cb-topbar-pad-x));
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * Typographie & composants partagés
 * ------------------------------------------------------------------------ */
.srl-eyebrow {
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cb-eyebrow-ink-dark, rgba(211, 221, 237, .88));
  font-family: var(--cb-display-font);
  font-size: var(--cb-eyebrow-size, 16px);
  font-weight: var(--cb-eyebrow-weight, 500);
  letter-spacing: var(--cb-eyebrow-tracking, .08em);
  line-height: 1.3;
  text-transform: uppercase;
}

.srl-eyebrow > i {
  width: 28px;
  height: 1px;
  background: var(--cb-accent-gradient);
}

.srl-eyebrow--alert > i {
  background: linear-gradient(90deg, var(--srl-alert), #ffb547);
}

.srl-title,
.srl-hero__title,
.srl-statement,
.srl-finale__card h2 {
  margin: 0;
  color: var(--srl-ink);
  font-family: var(--cb-display-font);
  font-weight: var(--cb-display-weight);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
  text-wrap: balance;
}

.srl-title { font-size: var(--cb-title-section); }
.srl-title--side { font-size: var(--cb-title-section-side); }
.srl-statement { font-size: var(--cb-title-section); }

.srl-accent {
  font-style: normal;
  background: var(--cb-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.srl-lead {
  margin: 26px 0 0;
  color: var(--srl-text);
  font-family: var(--cb-display-font);
  font-size: var(--cb-lead-section);
  font-weight: var(--cb-lead-weight, 300);
  letter-spacing: var(--cb-lead-tracking, -.018em);
  line-height: 1.4;
  text-wrap: pretty;
}

.srl-head {
  position: relative;
  z-index: 2;
}

.srl-head--center {
  max-width: 1180px;
  text-align: center;
}

.srl-head--center .srl-lead {
  max-width: 900px;
  margin-inline: auto;
}

.srl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.srl-btn {
  --mx: 0px;
  --my: 0px;
  position: relative;
  min-height: 54px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: var(--cb-display-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  translate: var(--mx) var(--my);
  transition: translate .45s var(--srl-ease), border-color .3s ease, background-color .3s ease, box-shadow .3s ease, color .3s ease;
  isolation: isolate;
}

.srl-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--srl-ease);
}

.srl-btn:hover svg,
.srl-btn:focus-visible svg {
  transform: translateX(4px);
}

.srl-btn--primary {
  border-color: rgba(194, 233, 255, .7);
  color: var(--srl-cta-ink);
  background: linear-gradient(110deg, #a7ddff 0%, #8dcef8 100%);
  box-shadow: 0 14px 40px rgba(78, 178, 243, .18);
}

.srl-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--srl-ease);
}

.srl-btn--primary:hover::before,
.srl-btn--primary:focus-visible::before {
  transform: translateX(120%);
}

.srl-btn--primary:hover,
.srl-btn--primary:focus-visible {
  color: #020b16;
  box-shadow: 0 18px 48px rgba(78, 178, 243, .32);
}

.srl-btn--ghost {
  border-color: rgba(165, 216, 255, .3);
  color: #dbe8fb;
  background: rgba(8, 20, 44, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.srl-btn--ghost:hover,
.srl-btn--ghost:focus-visible {
  border-color: rgba(165, 216, 255, .68);
  color: #fff;
  background: rgba(20, 40, 80, .55);
}

.srl-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #bfe4ff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.srl-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--srl-ease);
}

.srl-link:hover { color: #fff; }
.srl-link:hover svg { transform: translateX(5px); }

/* Révélations au défilement (activées seulement quand le JS est présent). */
.srl-motion [data-srl-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition: opacity 1s var(--srl-ease), transform 1.2s var(--srl-ease);
}

.srl-motion [data-srl-reveal].is-in {
  opacity: 1;
  transform: none;
}

.srl-motion [data-srl-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition: opacity 1s var(--srl-ease), transform 1.3s var(--srl-ease);
  transition-delay: calc(var(--i, 0) * 120ms);
}

.srl-motion [data-srl-stagger].is-in > * {
  opacity: 1;
  transform: none;
}

/* Mots découpés (titres cinétiques). */
.srl-w {
  display: inline-block;
  white-space: nowrap;
}

.srl-w__i {
  display: inline-block;
  will-change: transform;
}

.srl-mask .srl-w {
  overflow: clip;
  padding-bottom: .12em;
  margin-bottom: -.12em;
  vertical-align: top;
}

.srl-motion .srl-mask .srl-w__i {
  transform: translate3d(0, 108%, 0);
  transition: transform 1.2s var(--srl-ease);
  transition-delay: calc(var(--wi, 0) * 70ms);
}

.srl-motion .srl-mask.is-in .srl-w__i {
  transform: none;
}

/* ---------------------------------------------------------------------------
 * Rail de chapitres (timecode de bobine)
 * ------------------------------------------------------------------------ */
.srl-rail {
  position: fixed;
  top: 50%;
  right: 20px;
  z-index: 90;
  display: none;
  justify-items: end;
  gap: 18px;
  transform: translateY(-50%);
  transition: opacity .5s ease, visibility .5s;
}

.srl-rail.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.srl-rail ol {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  list-style: none;
}

.srl-rail a {
  position: relative;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: rgba(203, 215, 234, .46);
  font-family: var(--cb-display-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .3s ease;
}

.srl-rail__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 6px);
  margin-top: -11px;
  padding: 5px 9px;
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(6, 16, 38, .82);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .3s ease, transform .4s var(--srl-ease);
  pointer-events: none;
}

.srl-rail__num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.srl-rail__num::after {
  content: "";
  width: 12px;
  height: 1px;
  background: currentColor;
  transition: width .45s var(--srl-ease), background-color .3s ease;
}

.srl-rail a:hover,
.srl-rail a:focus-visible,
.srl-rail a[aria-current="true"] {
  color: #eef6ff;
}

.srl-rail a:hover .srl-rail__label,
.srl-rail a:focus-visible .srl-rail__label {
  opacity: 1;
  transform: none;
}

.srl-rail a[aria-current="true"] .srl-rail__num::after {
  width: 26px;
  background: var(--srl-echo);
}

.srl-rail__progress {
  width: 1px;
  height: 64px;
  margin-right: 5px;
  overflow: hidden;
  background: rgba(146, 176, 216, .2);
}

.srl-rail__progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cb-accent-gradient);
  transform: scaleY(var(--srl-page-p, 0));
  transform-origin: top;
}

.srl-rail__tc {
  color: rgba(203, 215, 234, .44);
  font-family: var(--cb-display-font);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

@media (min-width: 1280px) and (min-height: 700px) {
  .srl-rail { display: grid; }
  .srl-page { --srl-shell: min(calc(100% - 170px), 1360px); }
}

/* ---------------------------------------------------------------------------
 * 01 · Hero — la houle
 * ------------------------------------------------------------------------ */
.srl-hero {
  position: relative;
  min-height: max(720px, 100svh);
  display: grid;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 55% at 68% 58%, rgba(40, 84, 170, .22), transparent 70%),
    linear-gradient(180deg, #02060f 0%, #030a1a 55%, var(--srl-bg) 100%);
}

.srl-hero__field {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
}

.srl-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 62% at 20% 46%, rgba(3, 8, 20, .78) 0%, rgba(3, 8, 20, .35) 55%, rgba(3, 8, 20, 0) 78%),
    linear-gradient(180deg, rgba(3, 8, 20, .5) 0%, rgba(3, 8, 20, 0) 24%, rgba(3, 8, 20, 0) 78%, var(--srl-bg) 100%);
}

.srl-hero__inner {
  position: relative;
  min-height: inherit;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: calc(var(--cb-topbar-h) + 88px);
  padding-bottom: 34px;
  box-sizing: border-box;
}

.srl-hero__copy {
  align-self: center;
  max-width: 780px;
}

.srl-hero__title {
  font-size: var(--cb-title-hero);
}

.srl-line {
  display: block;
  overflow: clip;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}

.srl-line__in {
  display: block;
}

.srl-hero__lead {
  max-width: 620px;
  margin-top: 28px;
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.5;
}

.srl-hero__actions {
  margin-top: 36px;
}

.srl-reassurance {
  margin: 20px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--srl-muted);
  font-size: 15px;
}

.srl-reassurance svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--srl-care);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.srl-hero__foot {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 24px;
}

.srl-bricks {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

.srl-brick a {
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--srl-line-2);
  border-radius: 999px;
  color: #dfe8f7;
  background: rgba(6, 16, 38, .5);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .3s ease, background-color .3s ease;
}

.srl-brick i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brick);
  box-shadow: 0 0 12px var(--brick);
}

.srl-brick--secure { --brick: var(--srl-secure); }
.srl-brick--echo { --brick: var(--srl-echo); }
.srl-brick--care { --brick: var(--srl-care); }

.srl-brick a:hover,
.srl-brick a:focus-visible {
  border-color: var(--brick);
  background: rgba(12, 28, 60, .7);
}

.srl-cue {
  min-height: 44px;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--srl-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
}

.srl-cue i {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: rgba(146, 176, 216, .22);
}

.srl-cue i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, transparent, var(--srl-echo));
  animation: srl-cue 2.2s var(--srl-ease-io) infinite;
}

.srl-hud {
  justify-self: end;
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--srl-line-2);
  border-radius: 999px;
  background: rgba(6, 16, 38, .55);
  color: #dfe8f7;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.srl-hud__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--srl-alert);
  box-shadow: 0 0 0 0 rgba(255, 95, 122, .6);
  animation: srl-hud-alert 1s ease-out infinite;
  transition: background-color .6s ease;
}

.srl-hud__label { color: var(--srl-muted); }

.srl-hud__state {
  position: relative;
  display: inline-block;
}

.srl-hud__state > span {
  display: inline-block;
  transition: opacity .6s ease, transform .6s var(--srl-ease);
}

/* L’état masqué sort du flux : la pastille épouse le mot affiché. */
.srl-hud__calm,
.srl-hud.is-calm .srl-hud__storm {
  position: absolute;
  top: 0;
  left: 0;
}

.srl-hud.is-calm .srl-hud__calm { position: static; }

.srl-hud__storm { color: #ff9aac; }
.srl-hud__calm { color: var(--srl-care); opacity: 0; transform: translateY(8px); }

.srl-hud__meter {
  width: 64px;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(146, 176, 216, .2);
}

.srl-hud__meter i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--srl-care), #ffb547 55%, var(--srl-alert));
  transform: scaleX(var(--srl-storm, .12));
  transform-origin: left;
}

.srl-hud.is-calm .srl-hud__dot {
  background: var(--srl-care);
  animation-name: srl-hud-calm;
  animation-duration: 3s;
}

.srl-hud.is-calm .srl-hud__storm { opacity: 0; transform: translateY(-8px); }
.srl-hud.is-calm .srl-hud__calm { opacity: 1; transform: none; }

/* Intro du hero en CSS pur : fonctionne même si le JS échoue. */
@media (prefers-reduced-motion: no-preference) {
  .srl-hero__eyebrow { animation: srl-rise 1s var(--srl-ease) .15s both; }
  .srl-line__in { animation: srl-line-in 1.3s var(--srl-ease) both; }
  .srl-line:nth-child(1) .srl-line__in { animation-delay: .28s; }
  .srl-line:nth-child(2) .srl-line__in { animation-delay: .42s; }
  .srl-line:nth-child(3) .srl-line__in { animation-delay: .56s; }
  .srl-hero__lead { animation: srl-rise 1.1s var(--srl-ease) .95s both; }
  .srl-hero__actions { animation: srl-rise 1.1s var(--srl-ease) 1.1s both; }
  .srl-reassurance { animation: srl-rise 1.1s var(--srl-ease) 1.25s both; }
  .srl-hero__foot { animation: srl-fade 1.4s ease 1.5s both; }
}

/* ---------------------------------------------------------------------------
 * Manifeste — du bruit au quart pris
 * ------------------------------------------------------------------------ */
.srl-manifesto {
  position: relative;
  background: linear-gradient(180deg, var(--srl-bg) 0%, #040b1d 50%, var(--srl-bg) 100%);
}

.srl-manifesto__sticky {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.srl-manifesto__swarm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.srl-manifesto__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 90px;
  padding-block: 140px;
}

.srl-beat {
  max-width: 1120px;
}

.srl-beat .srl-lead {
  max-width: 760px;
}

.srl-statement--chaos .srl-w__i {
  text-shadow:
    calc(var(--g, 0) * 3px) 0 rgba(255, 95, 122, .55),
    calc(var(--g, 0) * -3px) 0 rgba(66, 187, 223, .45);
}

.srl-beat--calm .srl-statement .srl-w:first-child .srl-w__i {
  background: var(--cb-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.srl-cinema .srl-manifesto.srl-pin { height: 250vh; }

.srl-cinema .srl-manifesto.srl-pin .srl-manifesto__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
}

.srl-cinema .srl-manifesto.srl-pin .srl-manifesto__inner {
  gap: 0;
  padding-block: 0;
}

.srl-cinema .srl-manifesto.srl-pin .srl-beat {
  grid-area: 1 / 1;
}

.srl-cinema .srl-manifesto.srl-pin .srl-beat--calm {
  opacity: 0;
}

/* ---------------------------------------------------------------------------
 * Trio — Secure / Echo / Care
 * ------------------------------------------------------------------------ */
.srl-trio {
  position: relative;
  padding: clamp(110px, 13vh, 160px) 0 clamp(90px, 11vh, 140px);
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(66, 187, 223, .1), transparent 70%),
    var(--srl-bg);
}

.srl-braid {
  width: 100%;
  margin: 34px 0 0;
  overflow: hidden;
}

.srl-braid svg {
  display: block;
  width: 100%;
  height: 110px;
}

.srl-braid__strand {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  animation: srl-braid 9s linear infinite;
}

.srl-braid__strand--secure { stroke: var(--srl-secure); filter: drop-shadow(0 0 6px rgba(86, 126, 255, .7)); }
.srl-braid__strand--echo { stroke: var(--srl-echo); filter: drop-shadow(0 0 6px rgba(66, 187, 223, .7)); animation-delay: -3s; transform: scaleY(.7); transform-origin: 50% 50%; transform-box: fill-box; }
.srl-braid__strand--care { stroke: var(--srl-care); filter: drop-shadow(0 0 6px rgba(103, 224, 185, .7)); animation-delay: -6s; }

.srl-scene {
  position: relative;
}

.srl-scene__sticky {
  position: relative;
}

.srl-scene__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(40px, 5vw, 96px);
  padding-block: clamp(70px, 10vh, 120px);
}

.srl-scene--flip .srl-scene__copy { order: 2; }

.srl-scene__copy {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.srl-scene--flip .srl-scene__copy { justify-self: end; }

.srl-scene__index {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--srl-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.srl-scene__index span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brick) 55%, transparent);
  border-radius: 50%;
  color: var(--srl-strong);
  font-size: 14px;
  letter-spacing: 0;
  box-shadow: 0 0 22px color-mix(in srgb, var(--brick) 25%, transparent);
}

.srl-scene--secure { --brick: var(--srl-secure); }
.srl-scene--echo { --brick: var(--srl-echo); }
.srl-scene--care { --brick: var(--srl-care); }

.srl-wordmark {
  margin: 22px 0 0;
  color: var(--srl-strong);
  font-family: var(--cb-display-font);
  font-size: clamp(38px, 3.4vw, 54px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1;
}

.srl-wordmark i {
  font-style: normal;
  color: var(--brick);
}

.srl-wordmark--echo {
  background: linear-gradient(90deg, #8fe6ff, var(--srl-echo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.srl-scene__quote {
  margin: 20px 0 0;
  color: #dce7f8;
  font-family: var(--cb-display-font);
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.15;
}

.srl-scene__sub {
  margin: 18px 0 0;
  color: color-mix(in srgb, var(--brick) 70%, #fff);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.srl-scene__text {
  margin: 12px 0 0;
  color: var(--srl-text);
  font-size: 17px;
  line-height: 1.65;
}

.srl-layers {
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.srl-layers li {
  min-height: 36px;
  padding: 0 14px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(86, 126, 255, .55);
  border-radius: 999px;
  color: #e3ebff;
  background: rgba(86, 126, 255, .14);
  font-size: 14px;
  font-weight: 600;
  transition: border-color .45s ease, background-color .45s ease, color .45s ease, box-shadow .45s ease;
}

.srl-layers li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--srl-secure);
  box-shadow: 0 0 10px var(--srl-secure);
  transition: background-color .45s ease, box-shadow .45s ease;
}

.srl-motion .srl-layers li:not(.is-on) {
  border-color: var(--srl-line);
  color: var(--srl-muted);
  background: transparent;
}

.srl-motion .srl-layers li:not(.is-on)::before {
  background: rgba(146, 176, 216, .35);
  box-shadow: none;
}

.srl-layers li.is-flash {
  box-shadow: 0 0 0 4px rgba(86, 126, 255, .2), 0 0 26px rgba(86, 126, 255, .5);
}

.srl-cover__title {
  margin: 26px 0 0;
  color: var(--srl-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.srl-cover {
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.srl-cover li {
  position: relative;
  padding-left: 26px;
  color: #c7d3e6;
  font-size: 15px;
  line-height: 1.45;
}

.srl-cover li::before {
  content: "";
  position: absolute;
  top: .3em;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brick) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brick) 70%, transparent);
}

.srl-cover li::after {
  content: "";
  position: absolute;
  top: calc(.3em + 4px);
  left: 5px;
  width: 5px;
  height: 3px;
  border-left: 1.5px solid var(--brick);
  border-bottom: 1.5px solid var(--brick);
  transform: rotate(-45deg);
}

.srl-stage {
  position: relative;
  width: min(100%, 640px);
  margin: 0 auto;
  aspect-ratio: 1;
}

.srl-stage > svg,
.srl-stage > canvas,
.srl-stage__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.srl-stage__fx { pointer-events: none; }

.srl-stage__hud {
  position: absolute;
  right: 6%;
  bottom: 4%;
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--srl-line-2);
  border-radius: 999px;
  background: rgba(6, 16, 38, .7);
  color: var(--srl-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}

.srl-stage__hud i {
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--srl-secure);
  box-shadow: 0 0 10px var(--srl-secure);
}

.srl-stage__hud b {
  color: #fff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.srl-stage__hud em {
  margin-left: 4px;
  font-style: normal;
}

/* --- Secure : le dôme ---------------------------------------------------- */
.srl-dome { overflow: visible; }

.srl-ring {
  transform-box: view-box;
  transform-origin: 320px 320px;
  transition: opacity .7s var(--srl-ease), transform 1.1s var(--srl-ease);
}

.srl-ring__spin {
  transform-box: view-box;
  transform-origin: 320px 320px;
  animation: srl-spin var(--spin, 40s) linear infinite;
}

.srl-ring__spin--rev { animation-direction: reverse; }

.srl-ring__base {
  fill: none;
  stroke: rgba(126, 160, 255, .2);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s var(--srl-ease);
}

.srl-ring__deco {
  fill: none;
  stroke: #7f9dff;
  stroke-linecap: round;
}

.srl-ring__deco--dash { stroke-width: 1.6; stroke-dasharray: 3 9; stroke-opacity: .85; }
.srl-ring__deco--ticks { stroke-width: 7; stroke-dasharray: .08 .92; stroke-linecap: butt; stroke-opacity: .5; }
.srl-ring__deco--arcs { stroke-width: 2.4; stroke-dasharray: .3 .2; stroke-opacity: .9; stroke: #9bb4ff; }
.srl-ring__deco--cycle { stroke-width: 2; stroke-dasharray: .21 .04; stroke-opacity: .7; }
.srl-ring__deco--dots { stroke-width: 3.2; stroke-dasharray: 0 1; stroke-opacity: .75; stroke: #a7bcff; }
.srl-ring__deco--hex { stroke-width: 4; stroke-dasharray: .82 .18; stroke-linecap: butt; stroke-opacity: .32; stroke: #6f8cff; }
.srl-ring__deco--scan { stroke-width: 3; stroke-dasharray: .1 .9; stroke: #cfe0ff; filter: drop-shadow(0 0 6px #7f9dff); }

.srl-ring__label {
  fill: rgba(190, 208, 255, .72);
  font-family: var(--cb-display-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
}

.srl-motion .srl-ring:not(.is-on) {
  opacity: 0;
  transform: scale(.94);
}

.srl-motion .srl-ring:not(.is-on) .srl-ring__base { stroke-dashoffset: 1; }

.srl-ring.is-flash .srl-ring__base {
  stroke: rgba(170, 196, 255, .9);
  stroke-width: 2;
}

.srl-dome__spokes path {
  fill: none;
  stroke: rgba(126, 160, 255, .18);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}

.srl-node > circle {
  fill: #0a1836;
  stroke: rgba(126, 160, 255, .45);
  stroke-width: 1.2;
  transition: fill .3s ease, stroke .3s ease;
}

.srl-node svg {
  fill: none;
  stroke: #cfdcff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.srl-node--ms rect { fill: #cfdcff; opacity: .85; }
.srl-node--ms rect:nth-of-type(1) { fill: #f25022; }
.srl-node--ms rect:nth-of-type(2) { fill: #7fba00; }
.srl-node--ms rect:nth-of-type(3) { fill: #00a4ef; }
.srl-node--ms rect:nth-of-type(4) { fill: #ffb900; }

.srl-node.is-hit > circle {
  fill: #3a0f1e;
  stroke: var(--srl-alert);
}

.srl-dome__halo {
  fill: rgba(86, 126, 255, .12);
  stroke: rgba(126, 160, 255, .35);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: srl-breathe 4.6s ease-in-out infinite;
}

.srl-dome__shield-body {
  fill: url(#srl-dome-shield);
  fill-opacity: .9;
  stroke: #e3ecff;
  stroke-width: .7;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  transition: fill-opacity 1s ease, stroke-dashoffset 1.6s var(--srl-ease);
}

.srl-dome__shield-check {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  transition: stroke-dashoffset .9s var(--srl-ease) .2s;
}

.srl-motion .srl-scene--secure:not(.is-armed) .srl-dome__shield-body { fill-opacity: .18; }
.srl-motion .srl-scene--secure:not(.is-armed) .srl-dome__shield-check { stroke-dashoffset: 1; }

/* --- Echo : le pouls ----------------------------------------------------- */
.srl-scene__visual {
  display: grid;
  justify-items: center;
  gap: 18px;
}

.srl-stage--echo::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 35, 70, .92) 0%, rgba(7, 20, 49, .78) 70%, rgba(3, 8, 20, 0) 100%);
}

.srl-stage--echo .srl-stage__fx { z-index: 1; }
.srl-stage--echo .srl-dial { z-index: 2; }

.srl-radar {
  position: absolute;
  z-index: 0;
  inset: 13%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(66, 187, 223, 0) 0deg, rgba(66, 187, 223, 0) 300deg, rgba(66, 187, 223, .26) 356deg, rgba(160, 235, 255, .5) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 17%, #000 18%, #000 70%, transparent 71%);
  mask: radial-gradient(circle, transparent 17%, #000 18%, #000 70%, transparent 71%);
  animation: srl-spin 12s linear infinite;
}

.srl-dial { overflow: visible; }

.srl-dial__day,
.srl-dial__night {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.srl-dial__day { stroke: url(#srl-dial-day); stroke-opacity: .75; }
.srl-dial__night { stroke: #253a78; stroke-opacity: .9; }

.srl-dial__ticks {
  fill: none;
  stroke: rgba(160, 200, 240, .3);
  stroke-width: 8;
  stroke-dasharray: .06 .94;
}

.srl-dial__hours {
  fill: none;
  stroke: rgba(190, 225, 255, .6);
  stroke-width: 16;
  stroke-dasharray: .03 .97;
  stroke-dashoffset: .015;
}

.srl-dial__num {
  fill: rgba(203, 215, 234, .62);
  font-family: var(--cb-display-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-anchor: middle;
}

.srl-dial__sun circle { fill: rgba(159, 232, 255, .2); stroke: #9fe8ff; stroke-width: 1.6; }
.srl-dial__sun path { fill: none; stroke: #9fe8ff; stroke-width: 1.6; stroke-linecap: round; }
.srl-dial__moon { fill: rgba(122, 150, 255, .25); stroke: #8ea6ff; stroke-width: 1.6; }

.srl-dial__hand {
  transform-box: view-box;
  transform-origin: 320px 320px;
  animation: srl-spin 12s linear infinite;
}

.srl-dial__hand path { stroke: rgba(159, 232, 255, .55); stroke-width: 1.4; }
.srl-dial__hand circle { fill: #bff1ff; filter: drop-shadow(0 0 6px #42bbdf); }

.srl-dial__reticle path {
  fill: none;
  stroke: var(--srl-alert);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.srl-dial__reticle {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 320px 320px;
  transform: scale(1.35);
  transition: opacity .35s ease, transform .6s var(--srl-ease);
}

.srl-dial__orb {
  fill: #0a1c3c;
  stroke: rgba(66, 187, 223, .6);
  stroke-width: 1.4;
  transition: fill .4s ease, stroke .4s ease;
}

.srl-glyph {
  overflow: visible;
  fill: none;
  stroke: #bfeeff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .35s ease;
}

.srl-glyph[data-glyph="idle"] { opacity: 1; }

[data-echo-step="1"] .srl-dial__reticle { opacity: 1; transform: none; }
[data-echo-step="1"] .srl-dial__orb { fill: #3a0f22; stroke: var(--srl-alert); }
[data-echo-step="1"] .srl-glyph[data-glyph="1"] { opacity: 1; stroke: #ff9aac; }
[data-echo-step="2"] .srl-glyph[data-glyph="2"] { opacity: 1; }
[data-echo-step="3"] .srl-glyph[data-glyph="3"] { opacity: 1; }
[data-echo-step="4"] .srl-glyph[data-glyph="4"] { opacity: 1; }
[data-echo-step="5"] .srl-glyph[data-glyph="5"] { opacity: 1; stroke: #b5f3de; }
[data-echo-step="1"] .srl-glyph[data-glyph="idle"],
[data-echo-step="2"] .srl-glyph[data-glyph="idle"],
[data-echo-step="3"] .srl-glyph[data-glyph="idle"],
[data-echo-step="4"] .srl-glyph[data-glyph="idle"],
[data-echo-step="5"] .srl-glyph[data-glyph="idle"] { opacity: 0; }
[data-echo-step="5"] .srl-dial__orb { stroke: var(--srl-care); }

.srl-pipeline {
  --srl-step-p: 1;
  position: relative;
  width: min(100%, 640px);
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  counter-reset: srl-step;
}

.srl-pipeline::before,
.srl-pipeline::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(146, 176, 216, .22);
}

.srl-pipeline::after {
  height: 2px;
  margin-top: -.5px;
  background: linear-gradient(90deg, var(--srl-alert), var(--srl-echo) 35%, var(--srl-care));
  box-shadow: 0 0 12px rgba(66, 187, 223, .6);
  transform: scaleX(var(--srl-step-p));
  transform-origin: left;
  transition: transform .7s var(--srl-ease);
}

.srl-pipeline li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  color: #c7d3e6;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  transition: color .4s ease;
}

.srl-pipeline svg {
  width: 44px;
  height: 44px;
  padding: 11px;
  box-sizing: border-box;
  border: 1px solid rgba(66, 187, 223, .55);
  border-radius: 50%;
  background: #071631;
  fill: none;
  stroke: #9fe8ff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: border-color .4s ease, box-shadow .4s ease, background-color .4s ease, transform .5s var(--srl-ease), stroke .4s ease;
}

.srl-motion .srl-pipeline li:not(.is-active):not(.is-done) { color: var(--srl-muted); }

.srl-motion .srl-pipeline li:not(.is-active):not(.is-done) svg {
  border-color: var(--srl-line-2);
  stroke: rgba(160, 180, 210, .6);
}

.srl-pipeline li.is-active { color: #fff; }

.srl-pipeline li.is-active svg {
  border-color: var(--srl-echo);
  background: #0b2a4a;
  stroke: #fff;
  box-shadow: 0 0 0 5px rgba(66, 187, 223, .16), 0 0 26px rgba(66, 187, 223, .55);
  transform: scale(1.1);
}

.srl-pipeline li:first-child.is-active svg {
  border-color: var(--srl-alert);
  background: #3a0f22;
  box-shadow: 0 0 0 5px rgba(255, 95, 122, .16), 0 0 26px rgba(255, 95, 122, .55);
}

/* --- Care : le maillage -------------------------------------------------- */
.srl-map { overflow: visible; }

.srl-stage--care { aspect-ratio: 1000 / 817; }

.srl-map__land {
  fill: rgba(103, 224, 185, .035);
  stroke: rgba(103, 224, 185, .6);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.4s var(--srl-ease-io);
  filter: drop-shadow(0 0 14px rgba(103, 224, 185, .25));
}

.srl-motion .srl-scene--care:not(.is-live) .srl-map__land { stroke-dashoffset: 1; }

.srl-map__dots circle {
  fill: #67e0b9;
  opacity: .22;
  animation: srl-dot 5.2s ease-in-out infinite;
  animation-delay: calc(var(--d, 0) * 2.8s);
}

.srl-map__arc-base {
  fill: none;
  stroke: rgba(103, 224, 185, .34);
  stroke-width: 2;
  stroke-dasharray: 4 7;
}

.srl-map__arc-comet {
  fill: none;
  stroke: url(#srl-map-arc);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: .16 1.2;
  stroke-dashoffset: .16;
  filter: drop-shadow(0 0 6px rgba(103, 224, 185, .8));
  animation: srl-comet 4.2s var(--srl-ease-io) infinite;
  animation-delay: var(--delay, 0s);
}

.srl-map__client circle:first-child {
  fill: #06182a;
  stroke: #67e0b9;
  stroke-width: 2;
}

.srl-map__client circle:last-child {
  fill: #67e0b9;
}

.srl-map__client-pulse {
  fill: none;
  stroke: #67e0b9;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: srl-land 4.2s ease-out infinite;
  animation-delay: var(--delay, 0s);
}

.srl-map__hub-core {
  fill: #0b2a36;
  stroke: #67e0b9;
  stroke-width: 2.5;
}

.srl-map__hub svg {
  fill: none;
  stroke: #d9fff1;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.srl-map__hub-ring {
  fill: none;
  stroke: #67e0b9;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: srl-ripple 3s ease-out infinite;
}

.srl-map__hub-ring--2 { animation-delay: 1.5s; }

.srl-badges {
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.srl-badges li {
  min-height: 38px;
  padding: 0 14px 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(103, 224, 185, .45);
  border-radius: 999px;
  color: #dcfff2;
  background: rgba(103, 224, 185, .1);
  font-size: 14px;
  font-weight: 600;
}

.srl-badges svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--srl-care);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Pin Secure ---------------------------------------------------------- */
.srl-cinema .srl-scene--secure.srl-pin { height: 280vh; }

.srl-cinema .srl-scene--secure.srl-pin .srl-scene__sticky {
  position: sticky;
  top: var(--cb-topbar-h);
  min-height: calc(100svh - var(--cb-topbar-h));
  display: grid;
  align-items: center;
}

.srl-cinema .srl-scene--secure.srl-pin .srl-scene__grid {
  padding-block: 24px;
}

.srl-cinema .srl-scene--secure.srl-pin .srl-stage {
  width: min(100%, 640px, calc(100svh - var(--cb-topbar-h) - 60px));
}

/* --- Tagline ------------------------------------------------------------- */
.srl-tagline {
  margin-top: clamp(30px, 6vh, 70px);
  padding: 44px 0 0;
  display: grid;
  justify-items: center;
  gap: 18px;
  border-top: 1px solid var(--srl-line);
  text-align: center;
}

.srl-tagline__text {
  margin: 0;
  color: var(--srl-text);
  font-family: var(--cb-display-font);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.25;
  text-wrap: balance;
}

.srl-tagline__word {
  font-weight: 600;
}

.srl-tagline__word--secure { color: #8aa6ff; }
.srl-tagline__word--echo { color: #7fd8f0; }
.srl-tagline__word--care { color: #8eecc9; }

/* ---------------------------------------------------------------------------
 * 05 · Autopilot — le circuit
 * ------------------------------------------------------------------------ */
.srl-autopilot {
  position: relative;
  padding: clamp(110px, 13vh, 160px) 0 clamp(100px, 12vh, 150px);
  background:
    radial-gradient(ellipse 70% 40% at 50% 30%, rgba(86, 126, 255, .12), transparent 70%),
    linear-gradient(180deg, var(--srl-bg), #050d22 60%, var(--srl-bg));
}

.srl-title__brand {
  display: block;
  color: var(--srl-ink);
}

.srl-circuit {
  position: relative;
  margin-top: 72px;
}

.srl-circuit__wire {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.srl-circuit__track {
  fill: none;
  stroke: rgba(146, 176, 216, .26);
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
}

.srl-circuit__lit {
  fill: none;
  stroke: var(--srl-echo);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(66, 187, 223, .9));
}

.srl-circuit__comet {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #eafcff;
  box-shadow: 0 0 0 4px rgba(66, 187, 223, .22), 0 0 22px 6px rgba(66, 187, 223, .75), 0 0 64px 18px rgba(86, 126, 255, .35);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
}

.srl-circuit.is-armed .srl-circuit__comet { opacity: 1; }

.srl-circuit__grid {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
}

.srl-pillar__link {
  position: relative;
  height: 100%;
  padding: 26px 22px 28px;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  justify-items: center;
  gap: 12px;
  box-sizing: border-box;
  border: 1px solid var(--srl-line);
  border-radius: 22px;
  color: inherit;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(14, 28, 62, .78), rgba(6, 13, 32, .78));
  transition: border-color .5s ease, box-shadow .5s ease, background-color .5s ease;
}

.srl-pillar__link:hover,
.srl-pillar__link:focus-visible {
  border-color: rgba(126, 160, 255, .55);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.srl-pillar__num {
  justify-self: start;
  min-width: 34px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(86, 126, 255, .14);
  color: #a9bcff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.srl-pillar__icon {
  position: relative;
  z-index: 2;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  margin-top: -6px;
  border: 1px solid rgba(126, 160, 255, .3);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #1c3570 0%, #0a1634 72%);
  transition: border-color .6s ease, box-shadow .6s ease, background .6s ease;
}

.srl-pillar__icon > svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: #b8c8ff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .5s ease;
}

.srl-pillar__icon--ms > svg .srl-pi-sq { stroke: none; }
.srl-pi-sq--1 { fill: #f25022; }
.srl-pi-sq--2 { fill: #7fba00; }
.srl-pi-sq--3 { fill: #00a4ef; }
.srl-pi-sq--4 { fill: #ffb900; }

.srl-pillar__check {
  position: absolute;
  right: -4px;
  bottom: 2px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 2px solid var(--srl-bg);
  border-radius: 50%;
  background: linear-gradient(135deg, #7fa0ff, var(--srl-secure));
  transform: scale(1);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
}

.srl-pillar__check svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.srl-motion .srl-pillar:not(.is-lit) .srl-pillar__check { transform: scale(0); }

.srl-pillar.is-lit .srl-pillar__icon,
.srl-pillar__link:hover .srl-pillar__icon {
  border-color: rgba(143, 176, 255, .85);
  box-shadow: 0 0 0 6px rgba(86, 126, 255, .1), 0 0 44px rgba(86, 126, 255, .5);
}

.srl-pillar.is-lit .srl-pillar__icon > svg { stroke: #fff; }

.srl-pillar h3 {
  margin: 6px 0 0;
  color: var(--srl-strong);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.srl-pillar__sub {
  margin: 0;
  color: #8fc8ff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.srl-pillar ul {
  align-self: start;
  width: 100%;
  margin: 8px 0 0;
  padding: 14px 0 0;
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--srl-line);
  list-style: none;
  text-align: left;
}

.srl-pillar li {
  position: relative;
  padding-left: 20px;
  color: #c7d3e6;
  font-size: 14px;
  line-height: 1.4;
}

.srl-pillar li::before {
  content: "";
  position: absolute;
  top: .45em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--srl-echo);
  box-shadow: 0 0 8px rgba(66, 187, 223, .8);
}

/* Micro-animations des pictos, jouées quand le pilier s’allume. */
.srl-pi-scan { stroke: var(--srl-echo); stroke-width: 1.6; opacity: 0; }
.srl-pi-orbit { transform-box: view-box; transform-origin: 24px 24px; }
.srl-pi-pulse { stroke-dasharray: 1; stroke-dashoffset: 0; }
.srl-pi-wave { opacity: .9; }

.srl-cinema .srl-pillar.is-lit .srl-pi-scan { animation: srl-scan 2.6s var(--srl-ease-io) infinite; }
.srl-cinema .srl-pillar.is-lit .srl-pi-orbit { animation: srl-spin 6s linear infinite; }
.srl-cinema .srl-pillar.is-lit .srl-pi-pulse { animation: srl-pulse-draw 2.4s var(--srl-ease-io) infinite; }
.srl-cinema .srl-pillar.is-lit .srl-pi-wave--1 { animation: srl-wave 1.8s ease-out infinite; }
.srl-cinema .srl-pillar.is-lit .srl-pi-wave--2 { animation: srl-wave 1.8s ease-out .3s infinite; }
.srl-cinema .srl-pillar.is-lit .srl-pi-sq { animation: srl-sq-pop 3.2s var(--srl-ease) infinite; transform-box: fill-box; transform-origin: center; }
.srl-cinema .srl-pillar.is-lit .srl-pi-sq--2 { animation-delay: .12s; }
.srl-cinema .srl-pillar.is-lit .srl-pi-sq--3 { animation-delay: .24s; }
.srl-cinema .srl-pillar.is-lit .srl-pi-sq--4 { animation-delay: .36s; }

/* Bandeau de garanties */
.srl-assurance {
  margin-top: 40px;
  padding: 26px 30px 26px 26px;
  display: grid;
  grid-template-columns: 150px minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 30px;
  box-sizing: border-box;
  border: 1px solid rgba(126, 160, 255, .22);
  border-radius: 26px;
  background:
    radial-gradient(ellipse 50% 120% at 0% 50%, rgba(86, 126, 255, .28), transparent 70%),
    linear-gradient(90deg, rgba(20, 34, 90, .7), rgba(8, 16, 40, .7));
}

.srl-assurance__art svg {
  display: block;
  width: 150px;
  height: auto;
  overflow: visible;
}

.srl-assurance__orbit {
  fill: none;
  stroke: #9aa8ff;
  stroke-opacity: .6;
  stroke-width: 1.4;
  stroke-dasharray: 40 18 6 18;
  animation: srl-orbit 6s linear infinite;
}

.srl-assurance__orbit--2 {
  stroke: #67e0b9;
  stroke-dasharray: 22 14;
  animation-duration: 4s;
  animation-direction: reverse;
}

.srl-assurance__check {
  fill: none;
  stroke: #fff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  transition: stroke-dashoffset 1s var(--srl-ease) .5s;
}

.srl-motion .srl-assurance:not(.is-in) .srl-assurance__check { stroke-dashoffset: 1; }

.srl-assurance__copy {
  margin: 0;
  display: grid;
  gap: 8px;
  color: var(--srl-text);
  font-size: 16px;
}

.srl-assurance__copy strong {
  color: var(--srl-strong);
  font-size: clamp(22px, 1.8vw, 27px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.15;
}

.srl-assurance__trust {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  list-style: none;
}

.srl-assurance__trust li {
  padding: 0 20px;
  display: grid;
  justify-items: center;
  gap: 8px;
  border-left: 1px solid var(--srl-line-2);
  color: #c7d3e6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.3;
  text-align: center;
  white-space: pre-line;
}

.srl-assurance__trust li:first-child { border-left: 0; }

.srl-assurance__trust svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: #9fb8ff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.srl-assurance .srl-link {
  padding: 0 20px;
  border: 1px solid rgba(165, 216, 255, .35);
  border-radius: 12px;
  background: rgba(3, 10, 26, .5);
}

/* ---------------------------------------------------------------------------
 * 06 · Packs
 * ------------------------------------------------------------------------ */
.srl-packs {
  position: relative;
  padding: clamp(110px, 13vh, 160px) 0 clamp(90px, 11vh, 130px);
  background:
    radial-gradient(ellipse 50% 32% at 50% 38%, rgba(66, 187, 223, .12), transparent 70%),
    var(--srl-bg);
}

@property --srl-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.srl-packs__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
  perspective: 1400px;
}

.srl-pack {
  --mx: 50%;
  --my: 0%;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--srl-line-2);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(15, 30, 66, .78), rgba(5, 12, 30, .9));
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .6s var(--srl-ease), border-color .4s ease, box-shadow .4s ease;
}

.srl-pack::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(66, 187, 223, .16), transparent 55%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.srl-pack:hover::before { opacity: 1; }

.srl-pack > * {
  position: relative;
  z-index: 1;
}

.srl-pack--featured {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(18, 36, 80, .95), rgba(6, 14, 36, .96)) padding-box,
    conic-gradient(from var(--srl-angle), #567eff, #42bbdf, #67e0b9, #42bbdf, #567eff) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 30px 90px rgba(35, 90, 200, .28);
  animation: srl-angle 7s linear infinite;
}

.srl-pack__flag {
  position: absolute !important;
  top: 22px;
  right: 22px;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--cb-accent-gradient);
  color: #031018;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.srl-emblem {
  width: 92px;
  height: 92px;
  margin: -6px 0 12px -8px;
  overflow: visible;
}

.srl-emblem__ring {
  fill: none;
  stroke: #7f9dff;
  stroke-width: 1.4;
  stroke-dasharray: .7 .06 .1 .14;
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: srl-spin 14s linear infinite;
}

.srl-emblem__ring--2 { stroke: #42bbdf; stroke-dasharray: .4 .1; animation-duration: 20s; animation-direction: reverse; }
.srl-emblem__ring--3 { stroke: #67e0b9; stroke-dasharray: .12 .08; animation-duration: 9s; }

.srl-emblem__sat {
  fill: #cfe7ff;
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: srl-spin 6s linear infinite;
}

.srl-emblem__sat--2 { fill: #42bbdf; animation-duration: 9s; animation-direction: reverse; }
.srl-emblem__sat--3 { fill: #67e0b9; animation-duration: 4.5s; }

.srl-emblem__shield {
  fill: rgba(86, 126, 255, .28);
  stroke: #cfe0ff;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.srl-emblem__mark {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  transition: stroke-dashoffset 1s var(--srl-ease) .6s;
}

.srl-emblem__mark--bolt { fill: rgba(103, 224, 185, .35); stroke-width: 2; }

.srl-motion [data-srl-stagger]:not(.is-in) .srl-emblem__mark { stroke-dashoffset: 1; }

.srl-pack h3 {
  margin: 0;
  color: var(--srl-strong);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.1;
}

.srl-pack h3 span {
  background: var(--cb-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.srl-pack__min {
  margin: 6px 0 0;
  color: var(--srl-muted);
  font-size: 14px;
}

.srl-pack__price {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  color: var(--srl-muted);
  font-size: 14px;
}

.srl-pack__price strong {
  color: #fff;
  font-family: var(--cb-display-font);
  font-size: clamp(50px, 4.2vw, 64px);
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.srl-odo {
  display: inline-flex;
  align-items: flex-start;
}

.srl-odo__col {
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

.srl-odo__strip {
  display: flex;
  flex-direction: column;
  transform: translate3d(0, calc(var(--n, 0) * -1em), 0);
  transition: transform 1.8s cubic-bezier(.2, .9, .25, 1);
  transition-delay: calc(var(--c, 0) * 140ms + 200ms);
}

.srl-odo__strip::before {
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
  display: block;
  line-height: 1;
  white-space: pre;
}

.srl-odo::after {
  content: "€";
  margin-left: .12em;
}

.srl-pack__desc {
  margin: 16px 0 0;
  color: #d5e0f1;
  font-size: 16px;
  line-height: 1.5;
}

.srl-pack__included {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--srl-line);
  color: var(--srl-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.srl-pack__list {
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.srl-pack__list li {
  position: relative;
  padding-left: 26px;
  color: #c7d3e6;
  font-size: 15px;
  line-height: 1.45;
}

.srl-pack__list li::before {
  content: "";
  position: absolute;
  top: .28em;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(103, 224, 185, .14);
  box-shadow: inset 0 0 0 1px rgba(103, 224, 185, .6);
}

.srl-pack__list li::after {
  content: "";
  position: absolute;
  top: calc(.28em + 5px);
  left: 5px;
  width: 6px;
  height: 3px;
  border-left: 1.6px solid var(--srl-care);
  border-bottom: 1.6px solid var(--srl-care);
  transform: rotate(-45deg);
}

.srl-pack__credit {
  margin: auto 0 0;
  padding-top: 22px;
  color: #bfe4ff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.srl-pack__credit b {
  color: #fff;
  font-size: 18px;
}

.srl-pack__cta {
  width: 100%;
  margin-top: 20px;
}

.srl-legal {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--srl-muted);
  font-size: 14px;
  text-align: center;
}

.srl-legal svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--srl-care);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Care Crédit */
.srl-credit {
  margin-top: 64px;
  padding: 40px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 44px;
  box-sizing: border-box;
  border: 1px solid var(--srl-line-2);
  border-radius: 30px;
  background:
    radial-gradient(ellipse 40% 90% at 0% 50%, rgba(66, 187, 223, .16), transparent 70%),
    linear-gradient(180deg, rgba(13, 26, 58, .72), rgba(5, 12, 30, .82));
}

.srl-credit__clock {
  position: relative;
  width: 220px;
  height: 220px;
}

.srl-credit__clock svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.srl-credit__face { fill: #071431; stroke: rgba(126, 160, 255, .3); stroke-width: 1; }

.srl-credit__ticks {
  fill: none;
  stroke: rgba(160, 200, 240, .35);
  stroke-width: 6;
  stroke-dasharray: .08 .92;
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
}

.srl-credit__quarters {
  fill: none;
  stroke: rgba(210, 235, 255, .8);
  stroke-width: 12;
  stroke-dasharray: .03 .97;
  stroke-dashoffset: .015;
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
}

.srl-credit__arc {
  fill: none;
  stroke: url(#srl-credit-arc);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 25 100;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
  filter: drop-shadow(0 0 8px rgba(66, 187, 223, .6));
}

.srl-credit__hand {
  transform-origin: 100px 100px;
  transform: rotate(90deg);
}

.srl-credit__hand circle { fill: #eaf8ff; filter: drop-shadow(0 0 6px #67e0b9); }

.srl-cinema .srl-credit.is-in .srl-credit__arc { animation: srl-credit-arc 5.2s var(--srl-ease-io) infinite; }
.srl-cinema .srl-credit.is-in .srl-credit__hand { animation: srl-credit-hand 5.2s var(--srl-ease-io) infinite; }

.srl-credit__token {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  pointer-events: none;
}

.srl-credit__token b {
  margin-top: 6px;
  color: #fff;
  font-family: var(--cb-display-font);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: 1;
}

.srl-credit__token small {
  color: var(--srl-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.srl-credit__intro h3 {
  margin: 0;
  color: var(--srl-strong);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.04em;
}

.srl-credit__lead {
  margin: 8px 0 0;
  color: var(--srl-text);
  font-size: 17px;
}

.srl-credit__eq {
  margin: 20px 0 0;
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  border: 1px solid rgba(66, 187, 223, .35);
  border-radius: 16px;
  background: rgba(66, 187, 223, .08);
  color: #d5e0f1;
  font-size: 16px;
}

.srl-credit__eq b { color: #fff; }
.srl-credit__eq-value { color: #8fe6ff !important; }

.srl-credit__note {
  margin: 12px 0 0;
  color: var(--srl-muted);
  font-size: 14px;
}

.srl-credit__usable {
  margin: 0;
  color: var(--srl-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.srl-credit__uses ul {
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.srl-credit__uses li {
  position: relative;
  padding-left: 24px;
  color: #c7d3e6;
  font-size: 15px;
}

.srl-credit__uses li::before {
  content: "";
  position: absolute;
  top: .5em;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--cb-accent-gradient);
  transform: rotate(45deg);
}

.srl-credit__more {
  grid-column: 1 / -1;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px 30px;
  border-top: 1px solid var(--srl-line);
}

.srl-credit__more p {
  margin: 0;
  color: var(--srl-text);
  font-size: 16px;
}

.srl-credit__more p b { color: #fff; }

/* ---------------------------------------------------------------------------
 * Comparatif
 * ------------------------------------------------------------------------ */
.srl-compare {
  position: relative;
  padding: clamp(40px, 6vh, 80px) 0 clamp(110px, 13vh, 160px);
  background: var(--srl-bg);
}

.srl-compare__wrap {
  margin-top: 48px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--srl-line-2);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(12, 24, 54, .7), rgba(5, 12, 30, .8));
  scrollbar-color: rgba(146, 176, 216, .4) transparent;
}

.srl-compare__table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}

.srl-compare__table th,
.srl-compare__table td {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(146, 176, 216, .1);
  color: var(--srl-text);
  font-size: 15px;
  text-align: center;
  transition: background-color .3s ease, color .3s ease;
}

.srl-compare__table thead th {
  padding-top: 28px;
  padding-bottom: 22px;
  color: var(--srl-strong);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.srl-compare__table thead th.is-featured {
  background: linear-gradient(180deg, rgba(86, 126, 255, .2), rgba(86, 126, 255, .08));
  box-shadow: inset 0 3px 0 #6f8cff;
}

.srl-compare__table tbody th {
  color: #dce7f8;
  font-weight: 600;
  text-align: left;
}

.srl-compare__table tbody tr:last-child > * { border-bottom: 0; }
.srl-compare__table td.is-featured { background: rgba(86, 126, 255, .07); }

.srl-compare__table .srl-compare__price {
  color: #fff;
  font-family: var(--cb-display-font);
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -.04em;
}

.srl-compare__table td[data-mark="yes"] { color: #bff3df; }
.srl-compare__table td[data-mark="no"] { color: rgba(140, 155, 184, .8); }

.srl-compare__table td[data-mark]::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
  border-radius: 50%;
}

.srl-compare__table td[data-mark="yes"]::before {
  background:
    no-repeat center / 10px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367e0b9' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-12'/%3E%3C/svg%3E"),
    rgba(103, 224, 185, .14);
  box-shadow: inset 0 0 0 1px rgba(103, 224, 185, .55);
}

.srl-compare__table td[data-mark="no"]::before {
  background: no-repeat center / 8px 2px linear-gradient(rgba(140, 155, 184, .8), rgba(140, 155, 184, .8));
  box-shadow: inset 0 0 0 1px rgba(140, 155, 184, .35);
}

.srl-compare__table td[data-level]::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 8px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--srl-secure), var(--srl-echo), var(--srl-care)) left / calc(var(--lv) * 33.34%) 100% no-repeat, rgba(146, 176, 216, .18);
}

.srl-compare__table td[data-level="1"] { --lv: 1; }
.srl-compare__table td[data-level="2"] { --lv: 2; }
.srl-compare__table td[data-level="3"] { --lv: 3; }

.srl-compare__table [data-col].is-col-hover { background: rgba(66, 187, 223, .1); color: #fff; }
.srl-compare__table tbody tr:hover > th { color: #fff; }

.srl-motion [data-srl-compare] tbody tr {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .7s var(--srl-ease), transform .9s var(--srl-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.srl-motion [data-srl-compare].is-in tbody tr {
  opacity: 1;
  transform: none;
}

.srl-compare__banner {
  margin: 22px 0 0;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(103, 224, 185, .3);
  border-radius: 18px;
  background: rgba(103, 224, 185, .07);
  color: #d8f7eb;
  font-size: 16px;
  font-weight: 600;
}

.srl-compare__banner svg {
  width: 34px;
  height: 34px;
  flex: none;
  fill: rgba(103, 224, 185, .12);
  stroke: var(--srl-care);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
 * 07 · Finale — l’horizon calme
 * ------------------------------------------------------------------------ */
.srl-finale {
  position: relative;
  min-height: max(760px, 100svh);
  padding: 140px 0 110px;
  display: grid;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--srl-bg) 0%, #041026 60%, #06183a 100%);
}

.srl-finale__field {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
}

.srl-finale__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.srl-finale__statement {
  max-width: 1100px;
}

.srl-finale__lead {
  max-width: 820px;
}

.srl-finale__card {
  width: min(100%, 880px);
  margin-top: 56px;
  padding: 40px 44px;
  box-sizing: border-box;
  border: 1px solid rgba(165, 216, 255, .24);
  border-radius: 30px;
  background: rgba(4, 12, 30, .62);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.srl-finale__card h2 {
  font-size: var(--cb-title-cta);
}

.srl-finale__card p {
  max-width: 680px;
  margin: 14px auto 0;
  color: var(--srl-text);
  font-size: 17px;
  line-height: 1.6;
}

.srl-finale__card .srl-actions {
  margin-top: 28px;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
 * Footer partagé : fond aligné sur la page
 * ------------------------------------------------------------------------ */
.srl-page .cb-shared-footer {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
 * Keyframes
 * ------------------------------------------------------------------------ */
@keyframes srl-rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes srl-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes srl-line-in {
  from { opacity: 0; transform: translate3d(0, 105%, 0) rotate(1.5deg); }
  to { opacity: 1; transform: none; }
}

@keyframes srl-cue {
  0% { top: -40%; }
  100% { top: 110%; }
}

@keyframes srl-hud-alert {
  0% { box-shadow: 0 0 0 0 rgba(255, 95, 122, .6); }
  100% { box-shadow: 0 0 0 10px rgba(255, 95, 122, 0); }
}

@keyframes srl-hud-calm {
  0%, 100% { box-shadow: 0 0 0 0 rgba(103, 224, 185, .45); }
  50% { box-shadow: 0 0 0 7px rgba(103, 224, 185, 0); }
}

@keyframes srl-spin {
  to { transform: rotate(360deg); }
}

@keyframes srl-braid {
  from { transform: translateX(0); }
  to { transform: translateX(-450px); }
}

@keyframes srl-breathe {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.12); opacity: .6; }
}

@keyframes srl-dot {
  0%, 100% { opacity: .16; }
  18% { opacity: .95; }
  40% { opacity: .22; }
}

@keyframes srl-comet {
  0% { stroke-dashoffset: .16; opacity: 1; }
  62% { stroke-dashoffset: -1; opacity: 1; }
  63%, 100% { stroke-dashoffset: -1; opacity: 0; }
}

@keyframes srl-land {
  0%, 58% { opacity: 0; transform: scale(.6); }
  64% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.2); }
}

@keyframes srl-ripple {
  0% { opacity: .85; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.6); }
}

@keyframes srl-scan {
  0%, 100% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  50% { opacity: 1; transform: translateY(22px); }
  65% { opacity: 0; transform: translateY(22px); }
}

@keyframes srl-pulse-draw {
  0% { stroke-dashoffset: 1; }
  55%, 100% { stroke-dashoffset: 0; }
}

@keyframes srl-wave {
  0% { opacity: 0; transform: translateX(-3px); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateX(4px); }
}

@keyframes srl-sq-pop {
  0%, 60%, 100% { transform: scale(1); }
  70% { transform: scale(.72); }
  82% { transform: scale(1.08); }
}

@keyframes srl-orbit {
  to { stroke-dashoffset: -164; }
}

@keyframes srl-angle {
  to { --srl-angle: 360deg; }
}

@keyframes srl-credit-arc {
  0% { stroke-dasharray: 0 100; opacity: 1; }
  48% { stroke-dasharray: 25 100; opacity: 1; }
  86% { stroke-dasharray: 25 100; opacity: 1; }
  100% { stroke-dasharray: 25 100; opacity: 0; }
}

@keyframes srl-credit-hand {
  0% { transform: rotate(0deg); }
  48%, 100% { transform: rotate(90deg); }
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */
@media (max-width: 1320px) {
  .srl-page { --srl-shell: min(calc(100% - 80px), 1180px); }

  .srl-assurance {
    grid-template-columns: 130px minmax(0, 1fr) auto;
  }

  .srl-assurance__art svg { width: 130px; }

  .srl-assurance__trust {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
  }

  .srl-assurance .srl-link {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 1180px) {
  .srl-circuit__grid {
    max-width: 720px;
    margin-inline: auto;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .srl-pillar__link {
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    justify-items: start;
    column-gap: 22px;
    row-gap: 6px;
    padding: 22px 24px 22px 26px;
    text-align: left;
  }

  .srl-pillar__num {
    position: absolute;
    top: 14px;
    right: 16px;
  }

  .srl-pillar__icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin-top: 0;
  }

  .srl-pillar h3,
  .srl-pillar__sub,
  .srl-pillar ul { grid-column: 2; }

  .srl-pillar h3 { margin-top: 4px; }

  .srl-pillar ul {
    margin-top: 6px;
    padding-top: 12px;
  }

  .srl-packs__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .srl-pack { padding: 30px 22px 24px; }

  .srl-credit {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .srl-credit__clock { width: 200px; height: 200px; }
  .srl-credit__uses { grid-column: 1 / -1; }
  .srl-credit__uses ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .srl-scene__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .srl-scene--flip .srl-scene__copy {
    order: 0;
    justify-self: start;
  }

  .srl-scene__copy { max-width: 720px; }
  .srl-stage { width: min(100%, 560px); }

  .srl-hero__foot {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .srl-cue { display: none; }
}

@media (max-width: 980px) {
  .srl-packs__grid {
    max-width: 580px;
    margin-inline: auto;
    grid-template-columns: 1fr;
  }

  .srl-assurance {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .srl-assurance__trust,
  .srl-assurance .srl-link {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .srl-page { --srl-shell: calc(100% - 40px); }

  .srl-hero__inner {
    padding-top: calc(var(--cb-topbar-h) + 56px);
    padding-bottom: 26px;
  }

  .srl-hero__lead { font-size: 17px; }

  .srl-actions .srl-btn {
    flex: 1 1 100%;
  }

  .srl-hero__foot {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 16px;
  }

  .srl-hud { justify-self: start; }

  .srl-manifesto__inner { gap: 70px; padding-block: 110px; }

  .srl-scene__text { font-size: 16px; }

  .srl-pipeline {
    width: min(100%, 360px);
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .srl-pipeline::before,
  .srl-pipeline::after {
    top: 22px;
    bottom: 22px;
    left: 21px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .srl-pipeline::after {
    width: 2px;
    margin: 0 0 0 -.5px;
    background: linear-gradient(180deg, var(--srl-alert), var(--srl-echo) 35%, var(--srl-care));
    transform: scaleY(var(--srl-step-p));
    transform-origin: top;
  }

  .srl-pipeline li {
    grid-template-columns: 44px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    text-align: left;
  }

  .srl-assurance__trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }

  .srl-assurance__trust li:nth-child(3) { border-left: 0; }

  .srl-credit {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 30px 22px;
    gap: 28px;
  }

  .srl-credit__intro,
  .srl-credit__uses { width: 100%; }
  .srl-credit__uses ul { grid-template-columns: 1fr; }

  .srl-credit__more .srl-btn {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .srl-compare__table th,
  .srl-compare__table td { padding: 14px 14px; font-size: 14px; }

  .srl-finale__card { padding: 30px 22px; }
  .srl-pack__flag { top: 16px; right: 16px; }
}

@media (max-width: 520px) {
  .srl-pillar__link {
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 16px;
    padding: 20px 16px 20px 18px;
  }

  .srl-pillar__icon {
    width: 58px;
    height: 58px;
  }

  .srl-pillar__icon > svg {
    width: 32px;
    height: 32px;
  }

  .srl-pillar__check {
    width: 22px;
    height: 22px;
    right: -6px;
  }

  .srl-pillar h3 { font-size: 18px; padding-right: 36px; }
}

/* ---------------------------------------------------------------------------
 * Mouvement réduit : états finaux, aucune boucle
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .srl-page *,
  .srl-page *::before,
  .srl-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .srl-cue i::after,
  .srl-radar { display: none; }
}

@media (forced-colors: active) {
  .srl-accent,
  .srl-wordmark--echo,
  .srl-pack h3 span,
  .srl-beat--calm .srl-statement .srl-w:first-child .srl-w__i {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}