/* RMA Carbone : feuille du thème. Ordre d'origine : style.css, rtl.css (appliqué sous [dir=rtl]), puis les feuilles incluses dans les pages, puis les utilitaires (anciens styles en ligne). */
/* Geist latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-latin-ext-66a33f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-latin-9d846d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 450;
  font-display: swap;
  src: url("fonts/geist-latin-ext-66a33f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 450;
  font-display: swap;
  src: url("fonts/geist-latin-9d846d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-latin-ext-66a33f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-latin-9d846d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-latin-ext-66a33f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-latin-9d846d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/geist-latin-ext-66a33f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/geist-latin-9d846d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist Mono latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geistmono-latin-ext-fbd56f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist Mono latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geistmono-latin-0e04bb.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist Mono latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geistmono-latin-ext-fbd56f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist Mono latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geistmono-latin-0e04bb.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sora latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/sora-latin-ext-0af113.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sora latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/sora-latin-9067cf.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sora latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/sora-latin-ext-0af113.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sora latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/sora-latin-9067cf.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- style.css ---- */
/* ============================================================
   SUSTAINCORE - DESIGN SYSTEM (style.css)
   ------------------------------------------------------------
   DA : nature-inspired, premium-consultancy, blanc dominant
   Police titres : 'Geist'  ·  Police corps : 'Geist'
   Couleur primaire : #0C7099  (token --green)

   SOMMAIRE
     1.  Tokens          (couleurs, typo, espacements, rayons, ombres, motion, z-index)
     2.  Reset & base
     3.  Typographie
     4.  Layout helpers  (.container, .section, .section-title…)
     5.  Boutons         (.btn + variants)
     6.  Header & nav     (.sc-header, .sc-nav, .sc-mobile-nav)
     7.  Composants       (cards, callouts, tableaux, hero, TOC…)
     8.  Utilities
     9.  Reveal / motion  (.reveal, .in-view, .stagger)
     10. Responsive       (@media 960 / 768 / 600)
     11. Polish v2        (menu animé, hover-lift, halos) - fin de fichier

   Référence complète des tokens & composants : design-system.md
   Comportement (menu, header au scroll, reveal) : assets/js/site.js
   ============================================================ */

/* polices : voir le début du fichier (auto-hébergées) */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --green:        #0C7099;
  --green-hover:  #0A5F82;
  --green-dark:   #08506F;
  --green-light:  #E2F1F8;
  --green-pale:   #F2F8FB;
  --dark:         #08202E;
  --dark-2:       #0F2E40;
  --dark-3:       #0A2635;
  --text:         #0F2430;
  --text-muted:   #55707E;
  --border:       #D7E1E7;
  --white:        #FFFFFF;
  --bg:           #F4F8FA;
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    10px;
  --radius-pill:  100px;
  --shadow-sm:    0 2px 8px rgba(8,32,46,.06);
  --shadow-md:    0 4px 20px rgba(8,32,46,.10);
  --shadow-lg:    0 8px 40px rgba(8,32,46,.14);

  /* ── Ajouts design system (additifs - valeurs alignées sur l'existant,
        à utiliser pour les évolutions futures ; ne modifient pas le rendu) ── */

  /* Typographie */
  --font-head:   'Geist', system-ui, sans-serif;
  --font-body:   'Geist', system-ui, sans-serif;
  --fs-xs:       12px;
  --fs-sm:       13px;
  --fs-base:     16px;
  --fs-md:       18px;
  --fs-lg:       20px;
  --fs-xl:       26px;
  --fs-2xl:      clamp(28px, 4vw, 42px);

  /* Espacements (échelle 4px) */
  --space-1:     4px;
  --space-2:     8px;
  --space-3:     12px;
  --space-4:     16px;
  --space-5:     20px;
  --space-6:     24px;
  --space-8:     32px;
  --space-10:    40px;
  --space-12:    48px;
  --space-16:    64px;
  --space-24:    96px;

  /* Layout */
  --container-max: 1160px;
  --header-h:      72px;

  /* Motion */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: .15s ease;
  --transition-base: .25s ease;
  --transition-slow: .4s var(--ease-out);

  /* Z-index (échelle) */
  --z-header:     100;
  --z-mobile-nav: 200;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; }

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}
.h-white { color: var(--white); }
.h-green { color: var(--green); }

/* ── Layout helpers ─────────────────────────────────────── */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-title {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  margin-bottom: 16px;
}
.section-sub {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 600px;
  margin-bottom: 56px;
}
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 6px;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-green {
  background: var(--green);
  color: var(--dark);
}
.btn-green:hover { background: var(--green-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(12,112,153,.3); }

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.35);
}
.btn-outline-white:hover { border-color: var(--white); background: rgba(255,255,255,.08); }

.btn-outline-green {
  background: transparent;
  color: var(--green-dark);
  border: 2px solid var(--border);
}
.btn-outline-green:hover { border-color: var(--green); color: var(--green-dark); background: var(--green-pale); }

.btn-lg { padding: 16px 32px; font-size: 15px; }
.btn-full { width: 100%; justify-content: center; }

/* ── Badge / Pill ───────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
}
.badge-green { background: var(--green); color: var(--dark); }
.badge-outline { background: rgba(12,112,153,.12); color: var(--green); border: 1px solid rgba(12,112,153,.3); }
.badge-white { background: rgba(255,255,255,.12); color: var(--white); border: 1px solid rgba(255,255,255,.2); }

/* ═══════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════ */
.sc-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  height: 72px;
  transition: background .3s ease, border-color .3s ease;
}
.sc-header.scrolled {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.sc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}
.sc-logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.sc-logo-text { line-height: 1.1; }
.sc-logo-name {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .02em;
  transition: color .3s ease;
}
.sc-logo-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  transition: color .3s ease;
}
.sc-header:not(.scrolled) .sc-logo-name { color: #fff; }
.sc-header:not(.scrolled) .sc-logo-sub  { color: rgba(255,255,255,.55); }
.sc-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.sc-nav a {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color .2s;
}
.sc-header:not(.scrolled) .sc-nav a       { color: rgba(255,255,255,.65); }
.sc-header:not(.scrolled) .sc-nav a:hover,
.sc-header:not(.scrolled) .sc-nav a.active { color: #fff; }
.sc-nav a:hover,
.sc-nav a.active { color: var(--text); }
.sc-nav a.active { position: relative; }
.sc-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
}
.sc-header-cta { display: flex; align-items: center; gap: 12px; }

/* ── Scroll Reveal Animations ───────────────────────────────── */
/* Garde-fou no-JS (2026-08-26) : le masquage n'est applique QUE si le script
   a pose .js-reveal sur <html>. Sans ce garde-fou, un JS bloque ou en echec
   laissait des sections entieres invisibles pour toujours. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-reveal .reveal.from-left  { transform: translateX(-44px); }
.js-reveal .reveal.from-right { transform: translateX(44px); }
.js-reveal .reveal.from-scale { transform: scale(0.93); }
.js-reveal .reveal.in-view { opacity: 1; transform: none; }

.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.07s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.14s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.21s; }
.stagger > .reveal:nth-child(5) { transition-delay: 0.28s; }
.stagger > .reveal:nth-child(6) { transition-delay: 0.35s; }
.stagger > .reveal:nth-child(7) { transition-delay: 0.42s; }

/* 3D perspective on hero dashboard */
.sc-app-window {
  transform: perspective(1200px) rotateX(3deg) rotateY(-3deg);
  transform-origin: bottom center;
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.sc-app-window:hover {
  transform: perspective(1200px) rotateX(0.5deg) rotateY(-1deg);
}

/* Keyframes */
@keyframes float-y {
  0%, 100% { transform: translateY(0) perspective(1200px) rotateX(3deg) rotateY(-3deg); }
  50%       { transform: translateY(-6px) perspective(1200px) rotateX(3deg) rotateY(-3deg); }
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.04); }
}

/* Hero visual glow */
.sc-hero-visual::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at center, rgba(12,112,153,0.12) 0%, transparent 65%);
  animation: glow-pulse 5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
.sc-hero-visual { position: relative; }


/* WhatsApp floating button */
.sc-whatsapp-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,0.35);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sc-whatsapp-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(37,211,102,0.5);
}
.sc-whatsapp-fab svg { display: block; width: 22px; height: 22px; }

/* Mobile hamburger - hidden by default */
.sc-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.sc-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all .2s;
}

/* ═══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.sc-hero {
  background: var(--dark);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 72px;
  position: relative;
  overflow: hidden;
}
.sc-hero::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(12,112,153,.12) 0%, transparent 70%);
  pointer-events: none;
}
.sc-hero::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(12,112,153,.06) 0%, transparent 70%);
  pointer-events: none;
}
.sc-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 80px 0;
  position: relative;
  z-index: 1;
}
.sc-hero-badge { margin-bottom: 24px; }
.sc-hero-h1 {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(28px, 3.8vw, 46px);
  font-weight: 600;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 24px;
}
.sc-hero-h1 em {
  font-style: normal;
  color: rgba(255,255,255,.82);
  font-weight: 600;
  font-size: 0.72em;
}
.sc-hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 520px;
}
.sc-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.sc-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-logo-hero-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.sc-logo-hero-text {
  margin-top: 12px;
  text-align: center;
}
.sc-logo-hero-name {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: .06em;
}
.sc-logo-hero-tag {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════
   STRIP CHIFFRES
   ══════════════════════════════════════════════════════════ */
.sc-strip {
  background: var(--green-pale);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sc-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
}
.sc-stat {
  padding: 40px 32px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.sc-stat:last-child { border-right: none; }
.sc-stat-value {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1;
  margin-bottom: 6px;
}
.sc-stat-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   FEATURES
   ══════════════════════════════════════════════════════════ */
.sc-features { background: var(--white); }
.sc-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sc-feat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all .25s ease;
}
.sc-feat-card:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.sc-feat-icon {
  width: 48px; height: 48px;
  background: var(--green-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 22px;
}
.sc-feat-title {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text);
}
.sc-feat-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS (dark)
   ══════════════════════════════════════════════════════════ */
.sc-how { background: var(--dark); }
.sc-how .section-title { color: var(--white); }
.sc-how .section-sub { color: rgba(255,255,255,.55); }
.sc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  position: relative;
}
.sc-steps::before {
  content: '';
  position: absolute;
  top: 24px; left: 16px; right: calc(100% / 3 - 48px);
  height: 1px;
  background: linear-gradient(90deg, rgba(12,112,153,.35) 0%, rgba(12,112,153,.08) 100%);
}
.sc-step {
  text-align: left;
  position: relative;
  padding-top: 8px;
}
.sc-step-num {
  width: 32px; height: 32px;
  background: var(--dark);
  border: 1.5px solid rgba(12,112,153,.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: .08em;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.sc-step-title {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
}
.sc-step-desc {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   PRICING
   ══════════════════════════════════════════════════════════ */
.sc-pricing { background: var(--bg); }
.sc-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
.sc-plan {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  transition: box-shadow .25s;
  display: flex;
  flex-direction: column;
}
/* CTA ancré en bas → boutons alignés malgré des listes de features inégales */
.sc-plan > .btn { margin-top: auto; }
.sc-plan:hover { box-shadow: var(--shadow-md); }
.sc-plan.featured {
  background: var(--dark);
  border-color: var(--dark);
  transform: scale(1.03);
  box-shadow: var(--shadow-lg);
}
.sc-plan-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: #FFFFFF;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  letter-spacing: .04em;
}
.sc-plan-name {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}
.sc-plan.featured .sc-plan-name { color: var(--white); }
.sc-plan-target {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.sc-plan.featured .sc-plan-target { color: rgba(255,255,255,.5); }
.sc-plan-price {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.sc-plan-price-from {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 2px;
}
.sc-plan.featured .sc-plan-price { color: var(--green); }
.sc-plan-period {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.sc-plan.featured .sc-plan-period { color: rgba(255,255,255,.5); }
.sc-plan-annual {
  font-size: 13px;
  color: var(--green-dark);
  font-weight: 600;
  margin-bottom: 28px;
}
.sc-plan.featured .sc-plan-annual { color: var(--green); }
.sc-plan-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin-bottom: 24px;
}
.sc-plan.featured .sc-plan-divider { border-color: rgba(255,255,255,.12); }
.sc-plan-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.sc-plan-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}
.sc-plan.featured .sc-plan-feature { color: rgba(255,255,255,.8); }
.sc-plan-check {
  flex-shrink: 0;
  width: 18px; height: 18px;
  background: var(--green-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.sc-plan.featured .sc-plan-check { background: rgba(12,112,153,.2); }
.sc-plan-check svg { width: 10px; height: 10px; }
.sc-pricing-note {
  text-align: center;
  margin-top: 32px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--green-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════
   SERVICES ADDITIONNELS
   ══════════════════════════════════════════════════════════ */
.sc-services { background: var(--white); }
.sc-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sc-service-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all .25s;
}
.sc-service-card:hover {
  border-color: var(--green);
  background: var(--green-pale);
}
.sc-service-icon {
  font-size: 28px;
  margin-bottom: 14px;
}
.sc-service-name {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}
.sc-service-price {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 10px;
}
.sc-service-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   BANDEAU ANCRAGE LOCAL
   Bloc d'encre trame, au lieu d'une photo d'ambiance : RMA n'a
   pas de photothèque, et le langage Riskspot pose ses blocs
   d'accroche en encre, pas en image.
   ══════════════════════════════════════════════════════════ */
.sc-local-banner {
  position: relative;
  /* Pas de hauteur figee : le contenu (titre + accroche + 3 preuves) fait plus
     de 700 px en mobile. Avec l'ancienne hauteur de bande photo et un
     overflow:hidden, le badge, le titre et l'accroche etaient COUPES en haut
     sans qu'aucun audit ne le voie. Corrige le 2026-08-27. */
  padding: clamp(56px,8vw,96px) 0;
  background-color: #08202E;
  background-image: radial-gradient(circle, rgba(95,182,222,.10) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  display: block;
  text-align: center;
}
.sc-local-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8,32,46,.35) 0%, rgba(8,32,46,.62) 100%);
}
.sc-local-banner-content {
  position: relative;
  z-index: 1;
  max-width: 660px;
  padding: 0 32px;
}
.sc-local-banner-content .badge { margin-bottom: 20px; }
.sc-local-banner-content h2 {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 14px;
}
.sc-local-banner-content p {
  font-size: 16px;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
}

/* Maroc photo grid (a-propos) */
.sc-local-photos { overflow: hidden; line-height: 0; }
.sc-local-photos-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: 380px;
}
.sc-local-photo-item { overflow: hidden; }
.sc-local-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
  display: block;
}
.sc-local-photo-item:hover img { transform: scale(1.04); }

@media (max-width: 768px) {
  .sc-local-photos-grid { grid-template-columns: 1fr; height: auto; }
  .sc-local-photo-item { height: 220px; }
}

/* ═══════════════════════════════════════════════════════════
   CTA BANNER
   ══════════════════════════════════════════════════════════ */
.sc-cta-banner {
  background: var(--green-pale);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sc-cta-banner-inner {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.sc-cta-banner h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 16px;
}
.sc-cta-banner p {
  font-size: 17px;
  color: var(--text-muted);
  margin-bottom: 36px;
  line-height: 1.7;
}
.sc-cta-banner-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.sc-footer {
  background: var(--dark);
  padding: 64px 0 32px;
}
.sc-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
/* sans min-width:0, une colonne impose sa largeur min-content et fait
   deborder la grille de quelques pixels (invisible a l'oeil, reel au scroll) */
.sc-footer-grid > * { min-width: 0; }
.sc-footer-brand-name {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  margin-top: 12px;
  letter-spacing: .02em;
}
.sc-footer-brand-tag {
  font-size: 13px;
  color: rgba(255,255,255,.4);
  margin-top: 6px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.sc-footer-col-title {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 20px;
}
.sc-footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sc-footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  transition: color .2s;
}
.sc-footer-col a:hover { color: var(--green); }
.sc-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sc-footer-copy {
  font-size: 13px;
  color: rgba(255,255,255,.68);
}
.sc-footer-powered {
  font-size: 12px;
  color: rgba(255,255,255,.68);
}
.sc-footer-powered a {
  color: var(--blue-bright);
  transition: color .2s;
}
.sc-footer-powered a:hover { color: #FFFFFF; }

/* ═══════════════════════════════════════════════════════════
   PAGE HERO (intérieur - a-propos / contact)
   ══════════════════════════════════════════════════════════ */
.sc-page-hero {
  background: var(--dark);
  padding: 160px 0 96px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sc-page-hero::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, rgba(12,112,153,.1) 0%, transparent 70%);
  pointer-events: none;
}
.sc-page-hero-content { position: relative; z-index: 1; }
.sc-page-hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 20px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.sc-page-hero p {
  font-size: 18px;
  color: rgba(255,255,255,.6);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   A PROPOS - sections spécifiques
   ══════════════════════════════════════════════════════════ */
.sc-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.sc-about-text h2 {
  font-size: clamp(26px, 3.5vw, 38px);
  margin-bottom: 24px;
}
.sc-about-text p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 16px;
}
.sc-about-logo-card {
  background: var(--green-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.sc-about-logo-name {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .04em;
}
.sc-about-logo-sub {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.sc-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sc-diff-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  transition: all .25s;
}
.sc-diff-card:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.sc-diff-num {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 40px;
  font-weight: 600;
  color: var(--green);
  line-height: 1;
  margin-bottom: 12px;
}
.sc-diff-title {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
}
.sc-diff-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

.sc-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sc-value-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.sc-value-icon {
  width: 52px; height: 52px;
  background: var(--green);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
}
.sc-value-title {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 10px;
}
.sc-value-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

.sc-partner-section {
  background: var(--dark);
}
.sc-partner-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.sc-partner-inner h2 {
  font-size: clamp(26px, 3.5vw, 38px);
  color: var(--white);
  margin-bottom: 20px;
}
.sc-partner-inner p {
  font-size: 16px;
  color: rgba(255,255,255,.6);
  line-height: 1.75;
  margin-bottom: 16px;
}
.sc-partner-inner .badge { margin-bottom: 20px; }
.sc-partner-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.sc-partner-card-title {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}
.sc-partner-card-sub {
  font-size: 14px;
  color: rgba(255,255,255,.4);
  margin-bottom: 24px;
}
.sc-partner-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sc-partner-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.7);
}
.sc-partner-dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT - sections spécifiques
   ══════════════════════════════════════════════════════════ */
.sc-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.sc-contact-info h3 {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 32px;
}
.sc-contact-items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 36px;
}
.sc-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.sc-contact-item-icon {
  width: 44px; height: 44px;
  background: var(--green-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.sc-contact-item-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 3px;
}
.sc-contact-item-value {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
}
.sc-contact-item-value a {
  color: var(--green-dark);
  transition: color .2s;
}
.sc-contact-item-value a:hover { color: var(--green); }
.sc-contact-note {
  background: var(--green-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}
.sc-contact-note strong { color: var(--text); }

/* Form */
.sc-form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.sc-form-title {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 28px;
}
.sc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sc-form-group {
  margin-bottom: 20px;
}
.sc-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.sc-form-input,
.sc-form-select,
.sc-form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--text);
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.sc-form-input:focus,
.sc-form-select:focus,
.sc-form-textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(12,112,153,.12);
}
.sc-form-textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}
.sc-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A7A6A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.sc-form-submit {
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .sc-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .sc-hero-visual { display: none; }
  .sc-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .sc-stat:nth-child(2) { border-right: none; }
  .sc-stat:nth-child(3) { border-top: 1px solid var(--border); }
  .sc-features-grid { grid-template-columns: repeat(2, 1fr); }
  .sc-steps { grid-template-columns: 1fr; }
  .sc-steps::before { display: none; }
  .sc-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .sc-plan.featured { transform: scale(1); }
  .sc-services-grid { grid-template-columns: repeat(2, 1fr); }
  .sc-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .sc-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .sc-diff-grid { grid-template-columns: 1fr; }
  .sc-values-grid { grid-template-columns: 1fr; }
  .sc-partner-inner { grid-template-columns: 1fr; gap: 40px; }
  .sc-contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .sc-nav { display: none; }
  .sc-burger { display: flex; }
  .sc-header-cta .btn { display: none; }
}

@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .sc-strip-inner { grid-template-columns: 1fr 1fr; }
  .sc-stat { padding: 28px 16px; }
  .sc-stat-value { font-size: 28px; }
  .sc-features-grid { grid-template-columns: 1fr; }
  .sc-pricing-grid { grid-template-columns: 1fr; }
  .sc-services-grid { grid-template-columns: 1fr; }
  .sc-footer-grid { grid-template-columns: 1fr; }
  .sc-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .sc-hero-cta { flex-direction: column; }
  .sc-hero-cta .btn { width: 100%; justify-content: center; }
  .sc-cta-banner-btns { flex-direction: column; align-items: center; }
  .sc-form-row { grid-template-columns: 1fr; }
  .sc-form-card { padding: 24px; }
  .sc-page-hero { padding: 120px 0 64px; }
}

/* Mobile nav overlay */
.sc-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.sc-mobile-nav.open { display: flex; }
.sc-mobile-nav a {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  transition: color .2s;
}
.sc-mobile-nav a:hover,
.sc-mobile-nav a.active { color: var(--green); }
.sc-mobile-close {
  position: absolute;
  top: 24px; right: 24px;
  font-size: 28px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
}

/* Utility */
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.green-text { color: var(--green-dark); }

/* ── Pricing price unit (/an suffix) ─────────────────────── */
.sc-plan-price-unit {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  opacity: 0.75;
}

/* ── Service icon (SVG version) ──────────────────────────── */
.sc-service-icon {
  width: 52px; height: 52px;
  background: var(--green-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* ── Trust icons (contact page) ──────────────────────────── */
.sc-trust-icon {
  width: 52px; height: 52px;
  background: var(--green-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

/* ═══════════════════════════════════════════════════════════
   PRODUIT - Modules
   ══════════════════════════════════════════════════════════ */
.sc-prod-modules {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sc-prod-module {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0;
  padding: 36px 40px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  transition: background .2s;
}
.sc-prod-module:last-child { border-bottom: none; }
.sc-prod-module:nth-child(even) { background: var(--bg); }
.sc-prod-module:hover { background: var(--green-pale); }
.sc-prod-module-icon {
  width: 52px; height: 52px;
  background: var(--green-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 4px;
}
.sc-prod-module-body h3 {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 10px;
}
.sc-prod-module-body p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 16px;
  max-width: 680px;
}
.sc-prod-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 24px;
}
.sc-prod-list li {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sc-prod-list li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   PRODUIT - Klem IA
   ══════════════════════════════════════════════════════════ */
.sc-klem { background: var(--dark); }
.sc-klem .section-title { color: var(--white); }
.sc-klem-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.sc-klem-text h2 {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.15;
}
.sc-klem-text p {
  font-size: 16px;
  color: rgba(255,255,255,.6);
  line-height: 1.7;
  margin-bottom: 32px;
}
.sc-klem-features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sc-klem-feat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.sc-klem-feat-icon {
  width: 36px; height: 36px;
  background: rgba(12,112,153,.15);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sc-klem-feat strong {
  display: block;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}
.sc-klem-feat p {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
  margin: 0;
}

/* Klem chat card */
.sc-klem-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sc-klem-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.sc-klem-avatar {
  width: 38px; height: 38px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--dark);
  flex-shrink: 0;
}
.sc-klem-name {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--white);
}
.sc-klem-status {
  font-size: 12px;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 5px;
}
.sc-klem-status::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
}
.sc-klem-messages {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sc-klem-msg {
  font-size: 14px;
  line-height: 1.6;
  padding: 14px 18px;
  border-radius: 12px;
  max-width: 90%;
}
.sc-klem-msg-bot {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.85);
  align-self: flex-start;
  border-radius: 4px 12px 12px 12px;
}
.sc-klem-msg-bot strong { color: var(--green); }
.sc-klem-msg-user {
  background: var(--green);
  color: var(--dark);
  font-weight: 500;
  align-self: flex-end;
  border-radius: 12px 4px 12px 12px;
}
.sc-klem-input {
  padding: 16px 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 14px;
  color: rgba(255,255,255,.25);
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════
   PRODUIT - Méthodologies
   ══════════════════════════════════════════════════════════ */
.sc-methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.sc-method-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: all .25s;
}
.sc-method-card:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-sm);
}
.sc-method-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  color: var(--blue-bright);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 5px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.sc-method-card h4 {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 8px;
}
.sc-method-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════
   APP SCREEN MOCKUPS
   ══════════════════════════════════════════════════════════ */

/* Window chrome */
.sc-app-window {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
  width: 100%;
}
.sc-app-chrome {
  background: #101C2C;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sc-app-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.sc-app-dot-r { background: #FF5F57; }
.sc-app-dot-y { background: #FEBC2E; }
.sc-app-dot-g { background: #28C840; }
.sc-app-url {
  flex: 1; background: rgba(255,255,255,0.07); border-radius: 5px;
  padding: 3px 12px; font-size: 10px; color: rgba(255,255,255,0.35);
  text-align: center; margin: 0 12px;
}

/* App layout */
.sc-app-inner {
  display: grid;
  grid-template-columns: 48px 1fr;
  min-height: 280px;
}
.sc-app-sidebar {
  background: #08202E;
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.sc-app-nav-icon {
  width: 30px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
.sc-app-nav-icon.active { background: var(--green); }
.sc-app-nav-icon:not(.active) { background: rgba(255,255,255,0.06); }
.sc-app-nav-icon svg { display: block; }

/* Main content area */
.sc-app-main { padding: 18px 20px; background: #F4F8FA; }
.sc-app-toprow {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.sc-app-pagetitle {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 13px; font-weight: 600; color: #08202E;
}
.sc-app-badge-live {
  display: inline-flex; align-items: center; gap: 5px;
  background: #E2F1F8; border: 1px solid #D7E1E7;
  border-radius: 100px; padding: 3px 10px;
  font-size: 10px; font-weight: 600; color: #08506F;
}
.sc-app-badge-live::before {
  content: ''; width: 6px; height: 6px;
  background: #0C7099; border-radius: 50; display: inline-block;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.4; }
}

/* Metric cards */
.sc-app-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 14px;
}
.sc-app-metric {
  background: #fff; border: 1px solid #D7E1E7;
  border-radius: 8px; padding: 10px 12px;
}
.sc-app-metric-label {
  font-size: 9px; color: #55707E; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;
}
.sc-app-metric-value {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 18px; font-weight: 600; color: #08202E; line-height: 1;
}
.sc-app-metric-value.green { color: #08506F; }
.sc-app-metric-sub {
  font-size: 8px; color: #55707E; margin-top: 2px;
}

/* Chart */
.sc-app-chart-wrap {
  background: #fff; border: 1px solid #D7E1E7;
  border-radius: 8px; padding: 12px 14px; margin-bottom: 12px;
}
.sc-app-chart-title {
  font-size: 9px; font-weight: 600; color: #55707E;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}

/* Scope bars */
.sc-app-scopes {
  background: #fff; border: 1px solid #D7E1E7;
  border-radius: 8px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.sc-app-scope-row {
  display: grid; grid-template-columns: 110px 1fr 28px;
  align-items: center; gap: 8px;
}
.sc-app-scope-name {
  font-size: 9px; color: #0F2430; font-weight: 500; white-space: nowrap; overflow: hidden;
}
.sc-app-scope-bar {
  height: 6px; background: #E2F1F8; border-radius: 3px; overflow: hidden;
}
.sc-app-scope-bar div {
  height: 100%; background: var(--green); border-radius: 3px;
}
.sc-app-scope-pct {
  font-size: 9px; color: #08506F; font-weight: 600; text-align: right;
}

/* Status bar */
.sc-app-status {
  background: #08202E; padding: 8px 16px;
  font-size: 10px; color: rgba(255,255,255,0.4);
  display: flex; align-items: center; gap: 6px;
}
.sc-app-status::before {
  content: ''; width: 6px; height: 6px;
  background: #0C7099; border-radius: 50%; flex-shrink: 0;
  animation: pulse 2s infinite;
}

/* ── Hero app window - dark body override ──────────────────── */
.sc-app-body {
  padding: 12px 14px;
  background: #08111E;
  display: flex; flex-direction: column; gap: 10px;
}
.sc-app-body .sc-app-metrics { margin-bottom: 0; }
.sc-app-body .sc-app-metric {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px; padding: 10px 12px;
}
.sc-app-body .sc-app-metric-label {
  color: rgba(154,208,201,0.45);
}
.sc-app-metric-val {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 18px; font-weight: 600; color: #0C7099; line-height: 1;
}
.sc-app-metric-val span {
  font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.3);
}
.sc-app-body .sc-app-chart-wrap {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 0;
}
.sc-app-chart-labels {
  display: flex; justify-content: space-between;
  font-size: 9px; color: rgba(12,112,153,0.3); font-weight: 600; margin-top: 4px;
}
.sc-app-body .sc-app-scopes {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
}
.sc-app-scope {
  display: flex; flex-direction: column; gap: 4px;
}
.sc-app-scope-hd {
  display: flex; justify-content: space-between;
  font-size: 9px; color: rgba(255,255,255,0.45); font-weight: 500;
}

/* ── Screens section (3 mini-screens) ────────────────────── */
.sc-screens { background: var(--dark); overflow: hidden; }
.sc-screens .section-title { color: var(--white); }
.sc-screens .section-sub { color: rgba(255,255,255,0.55); }

.sc-screens-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.sc-screen-card {
  display: flex; flex-direction: column; gap: 14px;
}
/* Le mockup remplit la hauteur de la card → les 3 frames sont à hauteur
   égale et les libellés en dessous s'alignent (grille à hauteur uniforme). */
.sc-screen-card .sc-pscreen { flex: 1; }
.sc-screen-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 14px; font-weight: 600; color: var(--white);
}
.sc-screen-icon {
  width: 32px; height: 32px;
  background: rgba(12,112,153,.12);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sc-screen-name {
  font-size: 13px; font-weight: 600; color: var(--white);
  margin-bottom: 2px;
}
.sc-screen-desc {
  font-size: 11px; color: rgba(255,255,255,.4); font-weight: 400;
}
.sc-screen-sub {
  font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.6;
}

/* Mini app frame */
.sc-mini-frame {
  background: #fff; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.sc-mini-chrome {
  background: #101C2C; padding: 7px 10px;
  display: flex; align-items: center; gap: 4px;
}
.sc-mini-dot { width: 7px; height: 7px; border-radius: 50%; }
.sc-mini-title-bar { flex: 1; text-align: center; font-size: 9px; color: rgba(255,255,255,0.35); letter-spacing: .04em; }
.sc-mini-body { padding: 14px; background: #F4F8FA; }

/* Mini report frame */
.sc-mini-report { padding: 14px; background: #fff; }
.sc-mini-report-header {
  background: #08202E; padding: 14px;
  text-align: center; margin: -14px -14px 12px;
}
.sc-mini-report-header h4 {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 11px; font-weight: 600; color: var(--green);
  letter-spacing: 0.04em; margin-bottom: 2px;
}
.sc-mini-report-header p {
  font-size: 9px; color: rgba(255,255,255,0.4);
}
.sc-mini-report-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid #E2F1F8;
}
.sc-mini-report-row:last-child { border-bottom: none; }
.sc-mini-report-key { font-size: 9px; color: #55707E; }
.sc-mini-report-val { font-family: 'Geist', system-ui, sans-serif; font-size: 10px; font-weight: 600; color: #08202E; }
.sc-mini-report-val.green { color: #08506F; }
.sc-mini-report-stamp {
  margin-top: 10px; padding: 6px; background: #E2F1F8;
  border: 1px solid #D7E1E7; border-radius: 6px;
  text-align: center; font-size: 9px; font-weight: 600; color: #08506F;
}

/* Mini Klem chat */
.sc-mini-klem { padding: 12px; background: #08202E; }
.sc-mini-klem-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.sc-mini-klem-av {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--green); display: flex; align-items: center; justify-content: center;
  font-family: 'Geist', system-ui, sans-serif; font-size: 10px; font-weight: 600; color: #08202E;
}
.sc-mini-klem-name {
  font-family: 'Geist', system-ui, sans-serif; font-size: 10px; font-weight: 600; color: var(--white);
}
.sc-mini-klem-status { font-size: 8px; color: var(--green); }
.sc-mini-klem-msg {
  font-size: 9px; line-height: 1.5; padding: 8px 10px;
  border-radius: 6px; margin-bottom: 6px;
}
.sc-mini-klem-msg.bot {
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8);
  border-radius: 3px 6px 6px 6px;
}
.sc-mini-klem-msg.user {
  background: var(--green); color: #08202E; font-weight: 500;
  border-radius: 6px 3px 6px 6px; margin-left: auto; max-width: 80%;
}
.sc-mini-klem-msg strong { color: var(--green); }
.sc-mini-klem-msg.bot strong { color: var(--green); }
.sc-mini-klem-input {
  background: rgba(255,255,255,0.06); border-radius: 5px;
  padding: 6px 10px; font-size: 9px; color: rgba(255,255,255,0.2);
  font-style: normal; margin-top: 8px;
}

/* Screen card labels */
.sc-screen-label {
  display: flex; align-items: flex-start; gap: 10px;
}
.sc-screen-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(12,112,153,0.1); border: 1px solid rgba(12,112,153,0.2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sc-screen-name {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 3px;
}
.sc-screen-desc {
  font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.5;
}

/* Mini frame dark variant */
.sc-mini-frame--dark .sc-mini-body { background: #08202E; }

/* hero screen override on mobile */
@media (max-width: 960px) {
  .sc-screens-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .sc-app-scope-row { grid-template-columns: 80px 1fr 24px; }
}
@media (max-width: 600px) {
  .sc-app-metrics { grid-template-columns: 1fr 1fr; }
  .sc-app-metric:last-child { display: none; }
}

/* ── Responsive produit ──────────────────────────────────── */
@media (max-width: 960px) {
  .sc-prod-module { grid-template-columns: 1fr; gap: 16px; padding: 28px 24px; }
  .sc-prod-list { grid-template-columns: 1fr; }
  .sc-klem-inner { grid-template-columns: 1fr; gap: 40px; }
  .sc-methods-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sc-prod-module { padding: 24px 20px; }
  .sc-methods-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   PLATFORM SCREENS - sc-pscreen*
   Mini app mockup cards used in "La plateforme en action"
   ══════════════════════════════════════════════════════════ */

/* Outer frame */
.sc-pscreen {
  background: #08111E;
  border: 1px solid rgba(12,112,153,.15);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(12,112,153,.06);
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

/* Chrome bar (title bar with dots) */
.sc-pscreen-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  background: #0A1A10;
  border-bottom: 1px solid rgba(12,112,153,.1);
  flex-shrink: 0;
}

/* macOS-style window dots */
.sc-pscreen-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Centered title text */
.sc-pscreen-title {
  flex: 1;
  text-align: center;
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  letter-spacing: .4px;
}

/* Status badge pill */
.sc-pscreen-chip {
  font-family: 'Geist', sans-serif;
  font-size: 8px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(12,112,153,.18);
  color: #0C7099;
  letter-spacing: .3px;
  flex-shrink: 0;
}

/* Content area */
.sc-pscreen-body {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* KPI row (3 cards) */
.sc-pscreen-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* Individual KPI card */
.sc-pscreen-kpi {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  padding: 8px 9px;
}

.sc-pscreen-kpi-label {
  font-family: 'Geist', sans-serif;
  font-size: 8px;
  color: rgba(255,255,255,.4);
  margin-bottom: 4px;
  letter-spacing: .3px;
}

.sc-pscreen-kpi-val {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #0C7099;
  line-height: 1;
}

.sc-pscreen-kpi-val em {
  font-style: normal;
  font-size: 7px;
  font-weight: 500;
  color: rgba(255,255,255,.3);
  margin-left: 1px;
}

/* Mini SVG chart wrapper */
.sc-pscreen-chart {
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}

/* Scope breakdown bars */
.sc-pscreen-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc-pscreen-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  color: rgba(255,255,255,.45);
}

.sc-pscreen-row > span:first-child { width: 38px; flex-shrink: 0; }
.sc-pscreen-row > span:last-child { width: 24px; flex-shrink: 0; text-align: right; }

/* Bar track */
.sc-pscreen-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  overflow: hidden;
}

.sc-pscreen-track > div {
  height: 100%;
  border-radius: 99px;
}

/* Checklist items */
.sc-pscreen-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  color: rgba(255,255,255,.65);
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.sc-pscreen-check:last-child { border-bottom: none; }

.sc-pscreen-check svg { flex-shrink: 0; }

/* Chat messages */
.sc-pscreen-msg {
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  line-height: 1.55;
  padding: 8px 10px;
  border-radius: 0 8px 8px 8px;
  max-width: 88%;
}

.sc-pscreen-msg--bot {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.75);
  border-radius: 0 8px 8px 8px;
  align-self: flex-start;
}

.sc-pscreen-msg--user {
  background: #0C7099;
  color: #08202E;
  font-weight: 600;
  border-radius: 8px 0 8px 8px;
  align-self: flex-end;
}

/* Responsive: stack screens on narrow viewports */
@media (max-width: 960px) {
  .sc-pscreen-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .sc-pscreen { min-height: 220px; }
  .sc-pscreen-kpi-val { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════
   CEO CARD - A propos
   ══════════════════════════════════════════════════════════ */
.sc-ceo-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.06);
}

.sc-ceo-photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.sc-ceo-info {
  padding: 24px 28px;
  border-top: 1px solid var(--border);
}

.sc-ceo-name {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 3px;
}

.sc-ceo-role {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--green-dark);
  margin-bottom: 14px;
  letter-spacing: .02em;
}

.sc-ceo-quote {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
  font-style: normal;
  border-left: 2px solid var(--green);
  padding-left: 12px;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   LEGAL PAGES
   ══════════════════════════════════════════════════════════ */

.sc-legal-hero {
  background: var(--dark);
  padding: 100px 0 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sc-legal-breadcrumb {
  font-size: 13px;
  color: rgba(255,255,255,.35);
  margin-bottom: 16px;
}

.sc-legal-breadcrumb a {
  color: rgba(255,255,255,.45);
  text-decoration: none;
}

.sc-legal-breadcrumb a:hover { color: var(--green); }

.sc-legal-title {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}

.sc-legal-date {
  font-size: 13px;
  color: rgba(255,255,255,.35);
}

.sc-legal-content { background: var(--white); }

.sc-legal-body {
  max-width: 760px;
  margin: 0 auto;
}

.sc-legal-block {
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}

.sc-legal-block:last-child { border-bottom: none; }

.sc-legal-block h2 {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 14px;
}

.sc-legal-block h3 {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--dark);
  margin: 20px 0 10px;
}

.sc-legal-block p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 12px;
}

.sc-legal-block ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.sc-legal-block ul li {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  padding-left: 16px;
  position: relative;
}

.sc-legal-block ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  background: var(--green);
  border-radius: 50%;
}

.sc-legal-block a {
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sc-legal-block a:hover { color: var(--dark); }

/* Cookie table */
.sc-cookie-table {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 12px 0 20px;
  font-size: 13px;
}

.sc-cookie-row {
  display: grid;
  grid-template-columns: 160px 80px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.sc-cookie-row:last-child { border-bottom: none; }

.sc-cookie-row span {
  padding: 10px 14px;
  color: var(--text);
  border-right: 1px solid var(--border);
}

.sc-cookie-row span:last-child { border-right: none; }

.sc-cookie-header {
  background: var(--bg);
  font-weight: 600;
  color: var(--dark);
}

.sc-cookie-header span { color: var(--dark); }

code {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--dark);
}

@media (max-width: 600px) {
  .sc-cookie-row { grid-template-columns: 130px 60px 1fr; }
  .sc-legal-hero { padding: 80px 0 32px; }
}

/* ═══════════════════════════════════════════════════════════
   MACF / CBAM SECTION
   ══════════════════════════════════════════════════════════ */
.sc-macf {
  background: var(--dark);
  position: relative;
  overflow: hidden;
}

.sc-macf::before {
  content: '';
  position: absolute;
  top: -160px; right: -160px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(12,112,153,.07) 0%, transparent 70%);
  pointer-events: none;
}

.sc-macf-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Badge */
.sc-macf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0C7099;
  background: rgba(12,112,153,.12);
  border: 1px solid rgba(12,112,153,.2);
  border-radius: 99px;
  padding: 5px 14px;
  margin-bottom: 20px;
}

/* Title */
.sc-macf-title {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 18px;
}

/* Intro paragraph */
.sc-macf-intro {
  font-size: 15px;
  color: rgba(255,255,255,.55);
  line-height: 1.75;
  margin-bottom: 32px;
}

/* Checklist items */
.sc-macf-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sc-macf-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.sc-macf-item-icon {
  width: 28px; height: 28px;
  background: rgba(12,112,153,.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.sc-macf-item strong {
  display: block;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 3px;
}

.sc-macf-item span {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
}

/* Timeline */
.sc-macf-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 20px;
  margin-bottom: 28px;
}

.sc-macf-timeline::before {
  content: '';
  position: absolute;
  left: 19px; top: 10px; bottom: 10px;
  width: 2px;
  background: rgba(255,255,255,.1);
}

.sc-macf-tl-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding-bottom: 24px;
  position: relative;
}

.sc-macf-tl-item:last-child { padding-bottom: 0; }

.sc-macf-tl-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.2);
  flex-shrink: 0;
  margin-top: 3px;
  position: relative;
  z-index: 1;
  margin-left: -7px;
}

.sc-macf-tl-done .sc-macf-tl-dot {
  background: rgba(12,112,153,.3);
  border-color: rgba(12,112,153,.5);
}

.sc-macf-tl-active .sc-macf-tl-dot {
  background: #0C7099;
  border-color: #0C7099;
  box-shadow: 0 0 0 4px rgba(12,112,153,.2);
}

.sc-macf-tl-year {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.sc-macf-tl-active .sc-macf-tl-year { color: #0C7099; }

.sc-macf-tl-label {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}

.sc-macf-tl-desc {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  line-height: 1.6;
}

/* Sector chips */
.sc-macf-sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sc-macf-sector {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: 5px 12px;
}

/* Responsive */
@media (max-width: 960px) {
  .sc-macf-inner { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 600px) {
  .sc-macf-title { font-size: 22px; }
  .sc-macf-intro { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════
   KABAUN TEXTURE SYSTEM
   Superposition via ::after - ne touche pas aux backgrounds.
   ══════════════════════════════════════════════════════════ */

/* ── Dot grid vert - sections dark ─────────────────────────── */
.sc-tex-dots {
  position: relative;
  overflow: hidden;
}
.sc-tex-dots::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(12,112,153,.11) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}
.sc-tex-dots > .container { position: relative; z-index: 1; }

/* ── Line grid vert - sections dark (variante) ──────────────── */
.sc-tex-grid {
  position: relative;
  overflow: hidden;
}
.sc-tex-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(12,112,153,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,112,153,.06) 1px, transparent 1px);
  background-size: 60px 60px;
}
.sc-tex-grid > .container { position: relative; z-index: 1; }

/* ── Dot grid neutre - sections claires ─────────────────────── */
.sc-tex-dots-light {
  position: relative;
  overflow: hidden;
}
.sc-tex-dots-light::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(8,32,46,.065) 1px, transparent 1px);
  background-size: 24px 24px;
}
.sc-tex-dots-light > .container { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════════
   v2 - Polish menu + effets visuels (ajout ; identité conservée)
   ════════════════════════════════════════════════════════════════ */

/* Header : transition + ombre douce au scroll */
.sc-header { transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sc-header.scrolled { box-shadow: 0 4px 24px rgba(8,32,46,.06); }

/* Nav : soulignement vert animé au hover (compatible état actif) */
.sc-nav a { position: relative; }
.sc-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(0.16,1,0.3,1);
}
.sc-nav a:hover::after,
.sc-nav a.active::after { transform: scaleX(1); }

/* Menu mobile : ouverture animée + apparition échelonnée des liens */
.sc-mobile-nav {
  display: flex;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .3s ease, transform .35s cubic-bezier(0.16,1,0.3,1), visibility .3s;
  pointer-events: none;
}
.sc-mobile-nav.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.sc-mobile-nav a {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s cubic-bezier(0.16,1,0.3,1), color .2s ease;
}
.sc-mobile-nav.open a { opacity: 1; transform: none; }
.sc-mobile-nav.open a:nth-of-type(1) { transition-delay: .08s; }
.sc-mobile-nav.open a:nth-of-type(2) { transition-delay: .14s; }
.sc-mobile-nav.open a:nth-of-type(3) { transition-delay: .20s; }
.sc-mobile-nav.open a:nth-of-type(4) { transition-delay: .26s; }
.sc-mobile-nav.open a:nth-of-type(5) { transition-delay: .32s; }
.sc-mobile-nav.open a:nth-of-type(6) { transition-delay: .38s; }

/* Burger : micro-interaction */
.sc-burger { transition: transform .2s ease, opacity .2s ease; }
.sc-burger:hover { opacity: .7; }

/* Logo en pointillés : respiration subtile (hero) */
@keyframes scBreathe { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
#hero-dots { animation: scBreathe 6s ease-in-out infinite; }

/* Cards : hover-lift léger */
.sc-feat-card, .sc-service-card, .sc-value-card, .sc-method-card,
.sc-diff-card, .sc-screen-card, .sc-partner-card, .sc-klem-card,
.sc-ceo-card, .sc-scope-card, .verdict-card, .sc-about-logo-card {
  transition: transform .3s cubic-bezier(0.16,1,0.3,1), box-shadow .3s ease, border-color .3s ease;
}
.sc-feat-card:hover, .sc-service-card:hover, .sc-value-card:hover, .sc-method-card:hover,
.sc-diff-card:hover, .sc-screen-card:hover, .sc-partner-card:hover, .sc-klem-card:hover,
.sc-ceo-card:hover, .sc-scope-card:hover, .verdict-card:hover, .sc-about-logo-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--green);
}

/* Tableau comparatif : ombre au survol */
.sc-compare-table { transition: box-shadow .3s ease; }
.sc-compare-table:hover { box-shadow: var(--shadow-md); }

/* CTA header : halo vert au hover (cohérent avec btn-green) */
.sc-header-cta .btn-green:hover {
  box-shadow: 0 8px 28px rgba(12,112,153,.40);
  transform: translateY(-2px);
}

/* Sommaire (TOC) : accent au hover */
.sc-toc a { transition: color .2s ease, padding-left .2s ease; }
.sc-toc a:hover { padding-left: 6px; }

/* Accessibilité : respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  #hero-dots { animation: none !important; }
  .sc-mobile-nav, .sc-mobile-nav a, .sc-nav a::after,
  .sc-feat-card, .sc-service-card, .sc-value-card, .sc-method-card,
  .sc-diff-card, .sc-screen-card, .sc-partner-card, .sc-klem-card,
  .sc-ceo-card, .sc-scope-card, .verdict-card, .sc-about-logo-card,
  .sc-compare-table, .sc-toc a {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   DA v3 · langage Riskspot, en bleu profond          2026-08-25
   -----------------------------------------------------------
   Reprend le vocabulaire visuel de la demo Riskspot : Geist et
   Geist Mono, surtitres en mono capitales tres espacees, boutons
   en pilule, filets fins plutot que bordures, grands rayons,
   blocs sombres trames, ombres longues et basses.
   Le bleu est volontairement plus fonce que leur #0099FF.
   Ce bloc ferme la feuille et prime sur ce qui precede.
   ══════════════════════════════════════════════════════════ */

:root{
  /* rayons : le systeme arrondi de Riskspot */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* ombres longues et basses, teintees encre */
  --shadow-sm: 0 1px 2px rgba(8,32,46,.05), 0 4px 14px rgba(8,32,46,.06);
  --shadow-md: 0 2px 4px rgba(8,32,46,.05), 0 18px 44px rgba(8,32,46,.10);
  --shadow-lg: 0 30px 80px rgba(8,32,46,.18);

  /* bleu clair : le meme accent, lisible sur fond sombre */
  --blue-bright: #5FB6DE;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-rs: cubic-bezier(.22,.61,.36,1);
}

/* -- typographie : densite Riskspot ------------------------------------ */
body{ font-size:17px; line-height:1.62; }
h1,h2,h3,h4,h5,.section-title{
  font-weight:600; letter-spacing:-.028em; line-height:1.08;
}
h1,.sc-hero-h1{ letter-spacing:-.034em; line-height:1.05; }
.section-title{ font-size:clamp(30px,4.1vw,50px); }
.section-sub{ font-size:19px; line-height:1.6; }

/* -- surtitres : mono capitales, la signature Riskspot ----------------- */
.badge, .sc-hero-badge > .badge, .sc-macf-badge{
  font-family:var(--mono);
  font-size:11.5px; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
}
.badge-outline{
  background:transparent; border:0; padding-left:0;
  color:var(--text-muted);
  display:inline-flex; align-items:center; gap:10px;
}
.badge-outline::before{
  content:""; width:22px; height:1px; background:var(--border); flex:none;
}
.badge-white{
  background:transparent; border:0; padding-left:0; color:rgba(255,255,255,.62);
}
.badge-white::before{
  content:""; width:22px; height:1px; background:rgba(255,255,255,.28); flex:none;
  margin-right:10px;
}
.badge-green{ background:var(--green); color:#fff; }

/* -- boutons : pilules, texte blanc sur l'accent ----------------------- */
.btn{
  padding:14px 26px; border-radius:var(--radius-pill);
  font-weight:500; font-size:15px; letter-spacing:-.012em;
  transition:transform .28s var(--ease-rs), background-color .28s var(--ease-rs),
             box-shadow .28s var(--ease-rs), border-color .28s var(--ease-rs), color .28s var(--ease-rs);
}
.btn-lg{ padding:16px 32px; font-size:16px; }
.btn-green{ background:var(--green); color:#fff; box-shadow:0 8px 24px rgba(12,112,153,.26); }
.btn-green:hover{ background:var(--green-hover); color:#fff; transform:translateY(-2px); box-shadow:0 14px 34px rgba(12,112,153,.30); }
.btn-outline-green{ border-width:1px; border-color:var(--border); color:var(--text); background:var(--white); box-shadow:var(--shadow-sm); }
.btn-outline-green:hover{ border-color:var(--text); color:var(--text); background:var(--white); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.btn-outline-white{ border-width:1px; border-color:rgba(255,255,255,.22); }
.btn-outline-white:hover{ border-color:rgba(255,255,255,.55); transform:translateY(-2px); }

/* -- accent lisible sur les fonds sombres ------------------------------ */
.h-green{ color:var(--blue-bright); }

/* -- cartes : filet fin, grand rayon, hover-lift ----------------------- */
.sc-feat-card, .sc-service-card, .sc-value-card, .sc-method-card,
.sc-scope-card, .sc-diff-card, .sc-screen-card, .sc-partner-card,
.sc-klem-card, .sc-ceo-card, .verdict-card, .sc-res-card{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease-rs), box-shadow .4s var(--ease-rs), border-color .4s var(--ease-rs);
}
.sc-feat-card:hover, .sc-service-card:hover, .sc-value-card:hover,
.sc-method-card:hover, .sc-diff-card:hover, .sc-screen-card:hover,
.sc-res-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:#BFD2DC;
}

/* -- rythme de section, plus large ------------------------------------- */
.section{ padding:clamp(76px,9vw,132px) 0; }
.section-sm{ padding:clamp(56px,6vw,84px) 0; }

/* ═══════════════════════════════════════════════════════════
   DA v3b · fond clair dominant, comme Riskspot     2026-08-25
   -----------------------------------------------------------
   Riskspot est clair : papier dominant, texture de points tres
   discrete, encre reservee a quelques blocs. On bascule donc
   les quatre heros et le chrome de page en clair.
   ══════════════════════════════════════════════════════════ */

.sc-hero, .sc-page-hero, .sc-prod-hero, .sc-hub-hero{
  background: var(--white);
  color: var(--text);
}

/* texture de points, la signature de fond de Riskspot */
.sc-hero::before, .sc-prod-hero::before, .sc-page-hero::before, .sc-hub-hero::before{
  content:''; position:absolute; inset:0;
  top:0; left:0; right:0; bottom:0;
  width:auto; height:auto; transform:none;
  background-image: radial-gradient(rgba(8,32,46,.10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(90% 72% at 50% 0%, #000 0%, transparent 74%);
          mask-image: radial-gradient(90% 72% at 50% 0%, #000 0%, transparent 74%);
  pointer-events:none;
}
/* halo d'accent, en lavis bleu tres pale */
.sc-hero::after, .sc-prod-hero::after{
  content:''; position:absolute;
  top:-180px; right:-160px; bottom:auto; left:auto;
  width:680px; height:680px;
  background: radial-gradient(circle, rgba(12,112,153,.12) 0%, transparent 68%);
  pointer-events:none;
}

/* titres et textes des heros : encre */
.sc-hero-h1, .sc-page-hero h1, .sc-prod-hero h1, .sc-hub-hero h1{ color: var(--text); }
.sc-hero-h1 em{ color: var(--text-muted); }
.sc-hero-sub, .sc-page-hero p, .sc-prod-hero p, .sc-hub-hero p{ color: var(--text-muted); }
.sc-hero .h-white, .sc-page-hero .h-white,
.sc-prod-hero .h-white, .sc-hub-hero .h-white{ color: var(--text); }

/* surtitre clair dans un hero clair */
.sc-hero .badge-white, .sc-page-hero .badge-white,
.sc-prod-hero .badge-white, .sc-hub-hero .badge-white{ color: var(--text-muted); }
.sc-hero .badge-white::before, .sc-page-hero .badge-white::before,
.sc-prod-hero .badge-white::before, .sc-hub-hero .badge-white::before{ background: var(--border); }

/* bouton secondaire : contour encre au lieu de contour blanc */
.sc-hero .btn-outline-white, .sc-page-hero .btn-outline-white,
.sc-prod-hero .btn-outline-white, .sc-hub-hero .btn-outline-white{
  color: var(--text); border-color: var(--border); background: var(--white); box-shadow: var(--shadow-sm);
}
.sc-hero .btn-outline-white:hover, .sc-page-hero .btn-outline-white:hover,
.sc-prod-hero .btn-outline-white:hover, .sc-hub-hero .btn-outline-white:hover{
  border-color: var(--text); background: var(--white); box-shadow: var(--shadow-md);
}

/* header : encre sur le hero clair, verre blanc au scroll (inchange) */
.sc-header:not(.scrolled){ background: transparent; }
.sc-header:not(.scrolled) .sc-logo-name{ color: var(--text); }
.sc-header:not(.scrolled) .sc-logo-sub{ color: var(--text-muted); }
.sc-header:not(.scrolled) .sc-nav a{ color: var(--text-muted); }
.sc-header:not(.scrolled) .sc-nav a:hover,
.sc-header:not(.scrolled) .sc-nav a.active{ color: var(--text); }

/* -- v3b suite : les deux gros blocs sombres passent en clair ---------- */
/* « La plateforme en action » : cartes blanches, mockups sombres dedans,
   exactement le motif carte-claire / visuel-sombre de Riskspot.          */
.sc-screens{ background: var(--white); }
.sc-screens .section-title{ color: var(--text); }
.sc-screens .section-sub{ color: var(--text-muted); }
.sc-screen-card{ background: var(--white); border:1px solid var(--border); box-shadow: var(--shadow-sm); }
.sc-screen-name{ color: var(--text); }
.sc-screen-desc, .sc-screen-sub{ color: var(--text-muted); }

/* bloc MACF : passe en lavis clair, l'alternance respire */
.sc-macf{ background: var(--bg); }
.sc-macf-title{ color: var(--text); }
.sc-macf-intro{ color: var(--text-muted); }
.sc-macf-item strong{ color: var(--text); }
.sc-macf-item span{ color: var(--text-muted); }
.sc-macf-tl-year{ color: var(--text-muted); }
.sc-macf-tl-label{ color: var(--text); }
.sc-macf .badge-white{ color: var(--text-muted); }
.sc-macf .badge-white::before{ background: var(--border); }

/* ═══════════════════════════════════════════════════════════
   DA v3c · mockups produit en clair               2026-08-25
   -----------------------------------------------------------
   Les captures d'interface etaient restees sombres sur un site
   devenu clair. On leur donne la meme chrome que le reste :
   surface papier, barre de fenetre en lavis, filets fins,
   texte encre, accent bleu reserve aux elements actifs.
   ══════════════════════════════════════════════════════════ */

/* -- fenetre applicative du hero --------------------------------------- */
.sc-app-window{
  background: var(--white);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
}
.sc-app-chrome{ background: #EEF3F9; border-bottom: 1px solid var(--border); }
.sc-app-url{ background: rgba(8,32,46,.05); color: rgba(19,28,41,.5); }
.sc-app-inner{ background: var(--white); }
.sc-app-sidebar{ background: #F4F8FA; border-right: 1px solid var(--border); }
.sc-app-nav-icon:not(.active){ background: rgba(8,32,46,.07); }
.sc-app-status{ background: #F4F8FA; color: rgba(19,28,41,.5); border-top: 1px solid var(--border); }
.sc-app-body .sc-app-metric{ background: var(--white); border: 1px solid var(--border); }
.sc-app-body .sc-app-chart-wrap,
.sc-app-body .sc-app-scopes{ background: var(--white); border: 1px solid var(--border); }
.sc-app-metric-val span{ color: rgba(19,28,41,.5); }
.sc-app-scope-hd{ color: rgba(19,28,41,.55); }
.sc-app-chart-labels{ color: rgba(19,28,41,.45); }

/* -- vignettes « la plateforme en action » ------------------------------ */
.sc-pscreen{ background: var(--white); border: 1px solid var(--border); }
.sc-pscreen-bar{ background: #EEF3F9; border-bottom: 1px solid var(--border); }
.sc-pscreen-title{ color: rgba(19,28,41,.55); }
.sc-pscreen-kpi{ background: #F4F8FA; border: 1px solid var(--border); }
.sc-pscreen-kpi-label{ color: rgba(19,28,41,.55); }
.sc-pscreen-kpi-val em{ color: rgba(19,28,41,.5); }
.sc-pscreen-row{ color: rgba(19,28,41,.6); }
.sc-pscreen-track{ background: #E2F1F8; }
.sc-pscreen-check{ color: rgba(19,28,41,.7); border-bottom: 1px solid var(--border); }
.sc-pscreen-msg--bot{ background: #F0F4FA; color: var(--text); }
.sc-pscreen-msg--user{ background: var(--green); color: #fff; }

/* -- mini fenetres (rapport, assistant) --------------------------------- */
.sc-mini-frame{
  background: var(--white); border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.sc-mini-chrome{ background: #EEF3F9; border-bottom: 1px solid var(--border); }
.sc-mini-title-bar{ color: rgba(19,28,41,.55); }
.sc-mini-report-header{ background: #F4F8FA; }
.sc-mini-report-header p{ color: rgba(19,28,41,.55); }
.sc-mini-klem{ background: var(--white); }
.sc-mini-klem-av{ color: #fff; }
.sc-mini-klem-name{ color: var(--text); }
.sc-mini-klem-msg.bot{ background: #F0F4FA; color: var(--text); }
.sc-mini-klem-msg.user{ background: var(--green); color: #fff; }
.sc-mini-klem-input{ background: #F4F8FA; color: rgba(19,28,41,.45); }
.sc-mini-frame--dark .sc-mini-body{ background: var(--white); }

/* -- v3c suite : le corps de fenetre secondaire etait reste en encre --- */
.sc-app-body{ background: #F4F8FA; }
.sc-app-metric-label, .sc-app-metric-sub{ color: #55707E; }

/* -- v3c suite : le registre mono, etendu aux micro-libellés ------------
   Chez Riskspot, tout ce qui est libellé (et non phrase) est en mono
   capitales espacees. On l'applique aux libellés qui existent deja,
   sans inventer de texte.                                              */
.sc-plan-badge,
.sc-footer-col-title,
.sc-contact-item-label{
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.sc-plan-badge{ font-size: 10px; letter-spacing: .14em; }

/* -- v3d : visuels de concept, au registre de la reference ------------- */
.sc-viz{
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.sc-viz--sm{
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: var(--white);
}

/* -- v3e : reliquats de la bascule en clair, trouves par audit de contraste --
   Ces regles etaient ecrites en blanc pour un fond sombre et sont restees
   invisibles apres le passage en clair.                                    */
.sc-macf-tl-desc{ color: var(--text-muted); }
.sc-macf-timeline::before{ background: var(--border); }
.sc-macf-tl-dot{ background: #D7E1E7; border-color: #C3D2E0; }
.sc-macf-sector{ color: var(--text); background: var(--white); border: 1px solid var(--border); }

/* bandeau photo : voile renforce, le texte etait illisible sur le sable clair */
.sc-local-banner::before{
  background: linear-gradient(to bottom, rgba(6,14,26,.72) 0%, rgba(6,14,26,.86) 100%);
}
.sc-local-banner-content p{ color: rgba(255,255,255,.88); }
.sc-viz--card{ box-shadow: var(--shadow-lg); border-radius: 20px; }

/* ═══════════════════════════════════════════════════════════
   REFONTE · ossature alignee sur la reference     2026-08-25
   -----------------------------------------------------------
   Nouvelles sections : bande outils, bloc probleme, piliers,
   etapes, temoignage, tarifs, FAQ, derniers guides.
   Prefixe `sc-r-` pour ne rien croiser avec l'ancien.
   ══════════════════════════════════════════════════════════ */

/* -- hero : ligne de preuves sous les boutons -------------------------- */
.sc-r-herometa{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px;
  font-size:.86rem; color:var(--text-muted);
}
.sc-r-herometa b{ color:var(--text); font-weight:600; }
.sc-hero-content .badge{ margin-bottom:22px; }

/* -- bande outils : filet haut et bas, comme la reference -------------- */
.sc-r-strip{ border-block:1px solid var(--border); background:var(--white); padding:22px 0; }
.sc-r-strip-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px clamp(20px,4vw,48px); }
.sc-r-strip-lb{ font-size:.82rem; color:var(--text-muted); }
.sc-r-strip-it{ font-size:.93rem; font-weight:500; color:var(--text); }

/* -- bloc probleme, en encre ------------------------------------------- */
.sc-r-prob{ padding-block:clamp(84px,10vw,140px); position:relative; }
.sc-r-prob .badge{ margin-bottom:26px; }
.sc-r-prob-grid{ display:grid; gap:clamp(34px,5vw,64px); align-items:start; }
@media (min-width:960px){ .sc-r-prob-grid{ grid-template-columns:1.05fr .95fr; } }
.sc-r-prob-intro{ color:var(--grey,#8A9CB0); font-size:1.02rem; line-height:1.7; margin:18px 0 30px; max-width:52ch; }
.sc-r-prob .sc-macf-timeline{ padding-left:22px; }
.sc-r-prob-sectors{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:clamp(40px,5vw,60px); }
.sc-r-sect-lb{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-right:8px;
}
.sc-r-prob .sc-macf-sector{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:#fff; border-radius:var(--radius-pill); padding:6px 15px; font-size:.85rem;
}

/* -- piliers : 2 x 2, visuel en pied de carte -------------------------- */
.sc-r-pillars{ display:grid; gap:20px; margin-top:clamp(40px,5vw,56px); }
@media (min-width:760px){ .sc-r-pillars{ grid-template-columns:1fr 1fr; } }
.sc-r-pillar{ background:var(--white); padding:clamp(26px,3vw,34px); display:flex; flex-direction:column; }
.sc-r-pillar h3{ font-size:1.18rem; margin-bottom:10px; }
.sc-r-pillar p{ color:var(--text-muted); font-size:.97rem; }
.sc-r-pillar-art{
  margin-top:26px; padding:20px; border-radius:var(--radius-md);
  border:1px solid var(--border); background:var(--bg); line-height:0;
}
.sc-r-pillar-art svg{ width:100%; height:auto; display:block; }

/* -- etapes ------------------------------------------------------------ */
.sc-r-steps{ display:grid; gap:18px; margin-top:clamp(40px,5vw,56px); }
/* 4 etapes : 4 colonnes ou 2, jamais 3 (sinon la 4e reste orpheline). */
@media (min-width:700px){ .sc-r-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .sc-r-steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.sc-r-steps > *{ min-width:0; }
.sc-r-step{
  border:1px solid rgba(255,255,255,.13); border-radius:var(--radius-lg);
  background:rgba(255,255,255,.03); padding:clamp(24px,2.6vw,30px);
}
.sc-r-step-n{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--blue-bright); display:block; margin-bottom:16px;
}
.sc-r-step h3{ color:#fff; font-size:1.1rem; margin-bottom:10px; }
.sc-r-step p{ color:rgba(255,255,255,.62); font-size:.95rem; }
.sc-r-note{
  margin-top:30px; text-align:center; color:rgba(255,255,255,.55);
  font-size:.92rem; max-width:62ch; margin-inline:auto;
}

/* -- temoignage -------------------------------------------------------- */
.sc-r-quote{ background:var(--bg); }
.sc-r-quote-card{
  margin:0; background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:clamp(30px,4vw,52px); max-width:820px; margin-inline:auto; text-align:center;
}
.sc-r-quote-card blockquote{
  margin:0 0 22px; font-size:clamp(1.15rem,2.2vw,1.5rem);
  line-height:1.45; letter-spacing:-.02em; color:var(--text); font-weight:500;
}
.sc-r-quote-card figcaption b{ display:block; color:var(--text); font-weight:600; }
.sc-r-quote-card figcaption span{ color:var(--text-muted); font-size:.92rem; }

/* -- tarifs ------------------------------------------------------------ */
.sc-r-plans{ display:grid; gap:20px; margin-top:clamp(40px,5vw,56px); align-items:start; }
@media (min-width:760px){ .sc-r-plans{ grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); } }
.sc-r-plan{
  position:relative; background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:clamp(26px,3vw,34px); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:12px;
}
.sc-r-plan.is-featured{ border-color:var(--green); box-shadow:var(--shadow-md); }
.sc-r-plan h3{ font-size:1.2rem; }
.sc-r-plan-target{ color:var(--text-muted); font-size:.92rem; }
.sc-r-plan-price{ font-size:2rem; font-weight:600; letter-spacing:-.03em; color:var(--text); }
.sc-r-plan-price span{ font-size:.88rem; font-weight:400; color:var(--text-muted); margin-left:6px; }
.sc-r-plan-list{ list-style:none; padding:0; margin:6px 0 18px; display:grid; gap:9px; }
.sc-r-plan-list li{ position:relative; padding-left:22px; font-size:.94rem; color:var(--text-muted); }
.sc-r-plan-list li::before{
  content:''; position:absolute; left:0; top:.5em; width:9px; height:9px;
  border-radius:50%; background:var(--blue-wash); box-shadow:inset 0 0 0 2px var(--green);
}
.sc-r-plan .btn{ margin-top:auto; }

/* -- FAQ --------------------------------------------------------------- */
.sc-r-faq{ max-width:820px; margin:clamp(36px,4vw,48px) auto 0; display:grid; gap:12px; }
.sc-r-qa{
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--white); padding:18px 22px;
}
.sc-r-qa summary{
  cursor:pointer; font-weight:600; color:var(--text); font-size:1.02rem;
  list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.sc-r-qa summary::-webkit-details-marker{ display:none; }
.sc-r-qa summary::after{
  content:'+'; color:var(--green); font-weight:600; font-size:1.2rem; flex:none;
}
.sc-r-qa[open] summary::after{ content:'-'; }
.sc-r-qa p{ margin-top:12px; color:var(--text-muted); font-size:.96rem; line-height:1.7; }

/* -- derniers guides --------------------------------------------------- */
.sc-r-posts-hd{ display:flex; flex-wrap:wrap; gap:20px; align-items:flex-end; justify-content:space-between; }
.sc-r-posts{ display:grid; gap:20px; margin-top:clamp(34px,4vw,46px); }
@media (min-width:820px){ .sc-r-posts{ grid-template-columns:repeat(3,1fr); } }
.sc-r-post{
  display:flex; flex-direction:column; gap:10px; background:var(--white);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(22px,2.6vw,28px); box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease-rs), box-shadow .4s var(--ease-rs), border-color .4s var(--ease-rs);
}
.sc-r-post:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#BFD2DC; }
.sc-r-post-cat{
  font-family:var(--mono); font-size:10px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--green);
}
.sc-r-post h3{ font-size:1.05rem; line-height:1.3; }
.sc-r-post p{ color:var(--text-muted); font-size:.93rem; }
.sc-r-post-date{ margin-top:auto; font-size:.84rem; color:var(--text-muted); }

/* -- CTA final --------------------------------------------------------- */
.sc-r-cta-btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:26px; }

/* -- utilitaires de fond, absents de cette feuille --------------------- */
.on-dark{ background:linear-gradient(165deg,#08202E 0%,#0F2E40 52%,#0A2635 100%); color:#fff; }
.on-dark .section-title,.on-dark h2,.on-dark h3{ color:#fff; }
.on-dark .section-sub,.on-dark p{ color:rgba(255,255,255,.62); }
.on-mist{ background:var(--bg); }
.on-dark .sc-macf-tl-desc{ color:rgba(255,255,255,.6); }
.on-dark .sc-macf-tl-label{ color:#fff; }
.on-dark .sc-macf-tl-year{ color:rgba(255,255,255,.45); }
.on-dark .sc-macf-tl-active .sc-macf-tl-year{ color:var(--blue-bright); }
.on-dark .sc-macf-timeline::before{ background:rgba(255,255,255,.14); }
.on-dark .sc-macf-tl-dot{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.28); }
.on-dark .sc-macf-tl-done .sc-macf-tl-dot{ background:rgba(27,109,255,.5); border-color:rgba(95,182,222,.7); }
.on-dark .sc-macf-tl-active .sc-macf-tl-dot{ background:var(--blue-bright); border-color:var(--blue-bright); }
.on-dark .sc-macf-tl-desc strong{ color:var(--blue-bright); }

/* ═══════════════════════════════════════════════════════════
   REFONTE · le menu, au motif de la reference
   -----------------------------------------------------------
   La reference n'a pas de barre pleine largeur : une pilule
   flottante, transparente sur le hero, qui devient du verre
   au scroll. Les liens sont des pastilles.
   ══════════════════════════════════════════════════════════ */
.sc-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:auto; padding:14px 0;
  background:transparent !important;
  border-bottom:0 !important;
  transition:padding .3s var(--ease-rs);
}
.sc-header-inner{
  height:auto; gap:18px;
  padding:9px 9px 9px 20px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  transition:background-color .35s var(--ease-rs), border-color .35s var(--ease-rs), box-shadow .35s var(--ease-rs);
}
.sc-header.scrolled .sc-header-inner{
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
          backdrop-filter:blur(14px) saturate(1.6);
  border-color:var(--border);
  box-shadow:var(--shadow-md);
}
/* BUG CORRIGE 2026-08-26 : cette regle etait posee SANS media query, donc
   apres le @media (max-width:960px){ .sc-nav{display:none} } du bloc de base.
   A specificite egale, la derniere gagne : la nav desktop restait affichee
   sur mobile et le site ne basculait jamais en menu burger. */
@media (min-width:961px){ .sc-nav{ display:flex; gap:4px; margin-left:auto; } }
@media (max-width:960px){ .sc-nav{ display:none; } .sc-burger{ display:flex; } }
.sc-nav a{
  padding:9px 15px; border-radius:var(--radius-pill);
  font-size:.9rem; font-weight:450; color:var(--text-muted);
  transition:color .25s var(--ease-rs), background-color .25s var(--ease-rs);
}
.sc-nav a::after{ display:none; }
.sc-nav a:hover{ color:var(--text); background:var(--bg); }
.sc-nav a.active{ color:var(--text); background:var(--bg); }
.sc-header-cta{ display:flex; align-items:center; gap:8px; }
.sc-header-cta .btn{ padding:11px 20px; font-size:.9rem; }
.sc-burger{
  /* La pastille etait posee sans centrage : les 3 barres heritaient du
     padding:8px de la regle de base et s'empilaient en haut a gauche
     (9px en haut contre 17px en bas). Mesure et corrige le 2026-08-26. */
  width:42px; height:42px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--white);
  padding:0; align-items:center; justify-content:center; gap:4px;
}
.sc-burger span{ width:18px; }
@media (max-width:960px){ .sc-header-inner{ padding:8px 8px 8px 16px; } }

/* -- footer : titres de colonne en mono, comme la reference ------------ */
.sc-footer-col-title{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.sc-footer-brand-tag{ color:rgba(255,255,255,.6); max-width:34ch; }
@media (max-width:860px){ .sc-footer-grid{ grid-template-columns:1fr 1fr; } }
.sc-r-plan-from{ font-size:.82rem; color:var(--text-muted); }
.sc-r-plan-price{ margin-top:2px; }
.sc-r-plan-period{ font-size:.82rem; color:var(--text-muted); margin-top:-6px; display:block; }
.sc-r-plans-note{
  margin:clamp(28px,3vw,38px) auto 0; max-width:78ch; text-align:center;
  font-size:.88rem; line-height:1.65; color:var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════
   Logotype RMA · lockup texte, repris de leur charte
   -----------------------------------------------------------
   Leur identite n'est PAS un fichier image : c'est « rma. » en
   Sora 800 surmonte de « CARBONE » filete. Le logo-rma.svg du
   dossier assets est le logo corporate RMA Consulting, que leur
   site n'utilise nulle part. Sora est chargee pour ce seul usage.
   ══════════════════════════════════════════════════════════ */
.rma-logo-link{
  display:inline-flex; flex-direction:column; align-items:flex-start;
  text-decoration:none; flex-shrink:0; gap:2px; line-height:1;
}
.rma-logo-mark{
  font-family:'Sora', system-ui, sans-serif; font-weight:800; font-size:32px;
  line-height:.9; letter-spacing:-.04em; color:#0A0A0A;
  display:inline-flex; align-items:baseline;
}
.rma-logo-dot{ color:#1A9BD7; margin-left:1px; }
.rma-logo-tag{
  font-family:'Sora', system-ui, sans-serif; font-weight:700; font-size:10px;
  letter-spacing:.22em; color:#0E2A3D; border-top:2px solid #0E2A3D;
  padding-top:3px; margin-top:1px; width:100%; text-align:center;
}
.rma-logo-link--white .rma-logo-mark{ color:#FFFFFF; }
.rma-logo-link--white .rma-logo-tag{
  color:rgba(255,255,255,.9); border-top-color:rgba(255,255,255,.65);
}
.rma-logo-link--footer .rma-logo-mark{ font-size:28px; }
.rma-logo-link--footer .rma-logo-tag{ font-size:9px; }
@media (max-width:700px){
  .rma-logo-mark{ font-size:27px; }
  .rma-logo-tag{ font-size:9px; letter-spacing:.18em; }
}


/* Enfants de grille : jamais de largeur intrinseque imposee (scroll horizontal
   invisible aux breakpoints testes). Voir memoire css-min-height-aspect-ratio. */
.sc-articles-grid > *, .sc-diff-grid > *, .sc-values-grid > *,
.sc-feat-grid > *, .sc-services-grid > *, .sc-plans-grid > *{ min-width: 0; }


/* Sans carte dirigeant, le bloc « qui sommes-nous » repasse en une colonne
   centree, au lieu de laisser la moitie droite vide. */
.sc-about-grid.is-single{ grid-template-columns: 1fr; max-width: 780px; margin-inline: auto; }


/* Bloc a max-width dans un conteneur centre : sans marges auto il colle a
   gauche alors que son TEXTE est centre, ce qui se lit comme un decalage. */
/* Uniquement les heros dont le TEXTE est centre. Les heros de /ressources et
   /produit sont alignes a gauche : leur appliquer une marge auto centrait le
   titre au milieu d'un bloc aligne a gauche (retour Nicolas 2026-08-27). */
.sc-page-hero h1, .sc-page-hero .sc-page-hero-sub,
.sc-page-hero-content{ margin-inline: auto; }


/* Repli quand aucun formulaire n'est configure : on ne laisse pas une carte vide. */
.sc-form-fallback{ padding: clamp(24px,5vw,56px); text-align:center; }
.sc-form-fallback .btn{ max-width:100%; white-space:normal; word-break:break-word;
  padding-inline: clamp(16px,4vw,32px); }
.sc-form-fallback-title{ font-family:'Geist',system-ui,sans-serif; font-size:22px; font-weight:600;
  color:var(--text); margin-bottom:10px; }
.sc-form-fallback p{ color:var(--text-muted); margin-bottom:22px; }


/* Menu mobile : `.sc-mobile-nav a` (0,1,1) prime sur `.btn-green` (0,1,0) et
   ecrasait le blanc du bouton -> texte encre sur l'accent, contraste 2,88.
   Defaut invisible aux audits : le menu est masque au moment de la mesure. */
.sc-mobile-nav a.btn-green,
.sc-mobile-nav a.btn-green:hover{ color:#FFFFFF; }
.sc-mobile-nav a.btn-outline-green{ color:var(--text); }


/* ═══════════════════════════════════════════════════════════
   Bloc d'ancrage local · trois preuves, pas un pave
   -----------------------------------------------------------
   Retour Nicolas 2026-08-26 : le paragraphe centre de 60 mots
   ne prouvait rien. Les trois preuves viennent de leur propre
   site, ou elles etaient des pastilles au-dessus du texte.
   L'encre du langage Riskspot sert au STRUCTURE, pas a la prose.
   ══════════════════════════════════════════════════════════ */
.sc-local-banner-content{ text-align:left; max-width:1160px; }
.sc-local-banner-content .badge{ margin-bottom:18px; }
.sc-local-banner-content h2{ max-width:20ch; margin-bottom:14px; }
.sc-local-lead{
  max-width:56ch; color:rgba(255,255,255,.78); font-size:17px; line-height:1.6;
  margin-bottom:0;
}
.sc-local-proofs{
  display:grid; grid-template-columns:1fr;
  gap:clamp(24px,3.4vw,48px); margin-top:clamp(36px,4.5vw,56px);
}
/* 3 colonnes ou 1, jamais 2 : un auto-fit laissait une preuve orpheline
   sur une deuxieme ligne entre 700 et 900 px. */
@media (min-width:900px){ .sc-local-proofs{ grid-template-columns:repeat(3,1fr); } }
.sc-local-proofs > *{ min-width:0; }
.sc-local-proof{ border-top:1px solid rgba(255,255,255,.26); padding-top:16px; }
.sc-local-proof-label{
  display:block; font-family:var(--mono);
  font-size:11.5px; font-weight:500; letter-spacing:.19em; text-transform:uppercase;
  color:var(--blue-bright); margin-bottom:10px;
}
.sc-local-proof p{
  color:rgba(255,255,255,.82); font-size:15.5px; line-height:1.62; margin:0;
}
@media (max-width:700px){
  .sc-local-banner-content h2{ max-width:none; }
}


/* ═══════════════════════════════════════════════════════════
   En-tete sur un hero en encre (pages legales et articles)
   -----------------------------------------------------------
   Le header est transparent tant qu'on n'a pas scrolle. Sur ces
   pages le hero est en encre, donc le logotype (#0A0A0A) et les
   liens sortaient a 1,18 de contraste : invisibles. Mesure le
   2026-08-27 sur /cookies, /politique-confidentialite et les
   4 pages d'article.
   ══════════════════════════════════════════════════════════ */
.hero-encre .sc-header:not(.scrolled) .rma-logo-mark{ color:#FFFFFF; }
.hero-encre .sc-header:not(.scrolled) .rma-logo-tag{
  color:rgba(255,255,255,.9); border-top-color:rgba(255,255,255,.65);
}
.hero-encre .sc-header:not(.scrolled) .sc-nav a{ color:rgba(255,255,255,.75); }
.hero-encre .sc-header:not(.scrolled) .sc-nav a:hover,
.hero-encre .sc-header:not(.scrolled) .sc-nav a.active{
  color:#FFFFFF; background:rgba(255,255,255,.12);
}


/* Tableaux des pages legales : defilement dans le conteneur, jamais la page. */
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 18px; }
.sc-legal-body table, .tbl-scroll table{ width:100%; border-collapse:collapse; font-size:14px; }
.sc-legal-body th, .sc-legal-body td,
.tbl-scroll th, .tbl-scroll td{
  padding:10px 12px; border:1px solid var(--border); text-align:left; vertical-align:top;
}
.sc-legal-body thead th, .tbl-scroll thead th{ background:var(--bg); font-weight:600; }


/* ═══════════════════════════════════════════════════════════
   Reference client · logo a gauche, parole a droite
   -----------------------------------------------------------
   Premiere preuve reelle du site. Le logo du client garde ses
   couleurs de marque : une reference se montre telle qu'elle est.
   ══════════════════════════════════════════════════════════ */
.sc-ref-card{
  margin:0 auto; max-width:960px; background:var(--white);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:clamp(28px,3.6vw,48px);
  display:grid; gap:clamp(24px,3vw,40px); align-items:start;
  text-align:left;
}
@media (min-width:820px){ .sc-ref-card{ grid-template-columns:170px 1fr; } }
.sc-ref-card > *{ min-width:0; }
.sc-ref-logo{
  display:flex; align-items:center; justify-content:flex-start;
  padding-bottom:18px; border-bottom:1px solid var(--border);
}
@media (min-width:820px){
  .sc-ref-logo{
    padding-bottom:0; padding-right:clamp(24px,2.4vw,36px);
    border-bottom:0; border-right:1px solid var(--border);
    min-height:96px;
  }
}
.sc-ref-logo img{ display:block; width:auto; height:56px; max-width:100%; }
.sc-ref-body .badge{ margin-bottom:16px; }
.sc-ref-card blockquote{
  margin:0 0 20px; font-size:clamp(1.08rem,1.9vw,1.34rem); line-height:1.5;
  letter-spacing:-.018em; color:var(--text); font-weight:500;
}
.sc-ref-card figcaption b{ display:block; color:var(--text); font-weight:600; font-size:.98rem; }
.sc-ref-card figcaption span{ display:block; color:var(--text-muted); font-size:.9rem; margin-top:2px; }
.sc-ref-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:20px;
  font-size:.93rem; font-weight:500; color:var(--green);
  transition:gap .25s var(--ease-rs), color .25s var(--ease-rs);
}
.sc-ref-link:hover{ gap:11px; color:var(--green-hover); }


/* ═══════════════════════════════════════════════════════════
   Etapes de deploiement · pastille d'icone et periode
   -----------------------------------------------------------
   Retour Nicolas 2026-08-27 : le bloc n'etait « pas clean ».
   Deux causes : aucune icone pour accrocher l'oeil, et surtout
   la PERIODE (J1 a J3...) presente dans le contenu n'etait pas
   rendue, donc la promesse des 30 jours n'apparaissait nulle part.
   ══════════════════════════════════════════════════════════ */
.sc-r-step{ position:relative; }
.sc-r-step-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:14px;
  background:rgba(95,182,222,.12); border:1px solid rgba(95,182,222,.26);
  color:var(--blue-bright); margin-bottom:18px;
  transition:transform .45s var(--ease-rs), background-color .45s var(--ease-rs),
             border-color .45s var(--ease-rs);
}
/* Droites au repos. L'inclinaison etait permanente et, sans survol sur mobile,
   se lisait comme un defaut d'alignement (retour Nicolas 2026-08-27). */
@media (hover:hover){
  .sc-r-step:hover .sc-r-step-ico{ transform:rotate(-4deg) scale(1.06); }
}
.sc-r-step:hover .sc-r-step-ico{
  background:rgba(95,182,222,.2); border-color:rgba(95,182,222,.45);
}
.sc-r-step-ico svg{ display:block; }
.sc-r-step-n{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.sc-r-step-n i{
  font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:rgba(255,255,255,.55); padding-left:10px; border-left:1px solid rgba(255,255,255,.22);
}
@media (prefers-reduced-motion: reduce){
  .sc-r-step-ico, .sc-r-step:hover .sc-r-step-ico{ transform:none; transition:none; }
}

/* ═══════════════════════════════════════════════════════════
   Bandeau d'ancrage local · animation d'apparition
   -----------------------------------------------------------
   Le `from-scale` faisait grandir toute la bande d'encre pleine
   largeur, ce qui se lisait comme un defaut. Fondu simple.
   ══════════════════════════════════════════════════════════ */
.js-reveal .sc-local-banner.reveal.from-scale{ transform:translateY(18px); }
.js-reveal .sc-local-banner.reveal.from-scale.in-view{ transform:none; }

/* Pastilles d'icone des preuves d'ancrage local, meme langage que les etapes. */
.sc-local-proof-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:13px;
  background:rgba(95,182,222,.12); border:1px solid rgba(95,182,222,.26);
  color:var(--blue-bright); margin-bottom:14px;
  transition:transform .45s var(--ease-rs), background-color .45s var(--ease-rs),
             border-color .45s var(--ease-rs);
}
@media (hover:hover){
  .sc-local-proof:hover .sc-local-proof-ico{ transform:rotate(-4deg) scale(1.06); }
}
.sc-local-proof:hover .sc-local-proof-ico{
  background:rgba(95,182,222,.2); border-color:rgba(95,182,222,.45);
}
.sc-local-proof-ico svg{ display:block; }
@media (prefers-reduced-motion: reduce){
  .sc-local-proof-ico, .sc-local-proof:hover .sc-local-proof-ico{ transform:none; transition:none; }
}

/* Entree vers le diagnostic depuis le hero : un troisieme niveau, ni bouton
   plein ni bouton fantome, pour ne pas concurrencer les deux CTA existants. */
.sc-hero-diag{
  display:inline-flex; align-items:center; gap:11px; padding:8px 4px;
  color:var(--text-muted); transition:color .25s var(--ease-rs), gap .25s var(--ease-rs);
}
.sc-hero-diag svg{
  flex:none; width:38px; height:38px; padding:8px; border-radius:12px;
  background:var(--green-light); border:1px solid rgba(12,112,153,.2); color:var(--green);
  transition:transform .45s var(--ease-rs);
}
.sc-hero-diag span{ display:flex; flex-direction:column; font-size:15px; font-weight:500; color:var(--text); }
.sc-hero-diag i{ font-style:normal; font-size:12.5px; color:var(--text-muted); margin-top:1px; }
.sc-hero-diag:hover{ gap:14px; }
@media (hover:hover){ .sc-hero-diag:hover svg{ transform:rotate(-4deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce){
  .sc-hero-diag svg, .sc-hero-diag:hover svg{ transform:none; transition:none; }
}


/* ═══════════════════════════════════════════════════════════
   Invitation au diagnostic
   Modale sobre : pas de plein ecran agressif, une carte centree
   qui reprend le langage des autres cartes du site.
   ══════════════════════════════════════════════════════════ */
.rma-invite{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease-rs), visibility .28s var(--ease-rs);
}
.rma-invite.is-open{ opacity:1; visibility:visible; }
.rma-invite-fond{ position:absolute; inset:0; background:rgba(8,32,46,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.rma-invite-boite{
  position:relative; width:100%; max-width:460px;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:clamp(26px,4vw,38px); text-align:left;
  transform:translateY(14px); transition:transform .32s var(--ease-rs);
}
.rma-invite.is-open .rma-invite-boite{ transform:none; }
.rma-invite-x{
  position:absolute; top:12px; right:12px; width:34px; height:34px;
  border:0; background:none; cursor:pointer; border-radius:50%;
  font-size:24px; line-height:1; color:var(--text-muted);
  transition:background-color .2s var(--ease-rs), color .2s var(--ease-rs);
}
.rma-invite-x:hover{ background:var(--bg); color:var(--text); }
.rma-invite-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--text-muted);
  margin-bottom:14px;
}
.rma-invite-kicker::before{ content:""; width:22px; height:1px; background:var(--border); flex:none; }
.rma-invite-boite h2{
  font-size:clamp(20px,2.6vw,25px); font-weight:600; line-height:1.2;
  letter-spacing:-.024em; color:var(--text); margin:0 0 10px;
}
.rma-invite-boite p{ color:var(--text-muted); font-size:15px; line-height:1.6; margin:0 0 22px; }
.rma-invite-boite .btn{ width:100%; justify-content:center; }
.rma-invite-plus-tard{
  display:block; width:100%; margin-top:12px; padding:8px;
  background:none; border:0; cursor:pointer; font-family:inherit;
  font-size:14px; color:var(--text-muted);
  text-decoration:underline; text-underline-offset:3px;
}
.rma-invite-plus-tard:hover{ color:var(--text); }
@media (prefers-reduced-motion: reduce){
  .rma-invite, .rma-invite-boite{ transition:none; }
  .rma-invite-boite{ transform:none; }
}


/* ═══════════════════════════════════════════════════════════
   Formulaire de contact et entree vers le diagnostic
   Remplace le repli mailto : la page promettait un formulaire.
   ══════════════════════════════════════════════════════════ */
.ct-form{ padding:clamp(26px,4vw,40px); }
.ct-titre{ font-family:'Geist',system-ui,sans-serif; font-size:20px; font-weight:600;
  letter-spacing:-.02em; color:var(--text); margin:0 0 6px; }
.ct-sub{ color:var(--text-muted); font-size:15px; line-height:1.6; margin:0 0 22px; }
.ct-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
@media (min-width:620px){ .ct-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ct-form label{ display:block; font-size:13.5px; font-weight:500; color:var(--text); }
.ct-plein{ display:block; margin-top:14px; }
.ct-opt{ color:var(--text-muted); font-weight:400; }
.ct-form input, .ct-form select, .ct-form textarea{
  display:block; width:100%; box-sizing:border-box; margin-top:6px; padding:12px 14px;
  border:1px solid var(--border); border-radius:var(--radius-md);
  font-family:inherit; font-size:15px; color:var(--text); background:var(--white);
}
.ct-form textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus{
  outline:2px solid var(--green); outline-offset:1px; border-color:var(--green);
}
.ct-form button[type=submit]{ margin-top:20px; max-width:100%; white-space:normal;
  padding-inline:clamp(16px,5vw,32px); }
.ct-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ct-rgpd{ font-size:13px; color:var(--text-muted); line-height:1.55; margin:14px 0 0; }
.ct-rgpd a{ color:var(--green); text-decoration:underline; text-underline-offset:2px; }
.ct-err{ margin:12px 0 0; font-size:14px; color:#B42318; }
.ct-merci a{ color:var(--green); text-decoration:underline; text-underline-offset:2px; }
.ct-merci p:not(.ct-titre){ color:var(--text-muted); line-height:1.65; margin:0; }

.ct-diag{
  margin-top:18px; padding:clamp(22px,3vw,30px);
  background:var(--green-pale); border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.ct-diag-t{ font-family:'Geist',system-ui,sans-serif; font-size:16px; font-weight:600;
  color:var(--text); margin:0 0 6px; }
.ct-diag p:not(.ct-diag-t){ color:var(--text-muted); font-size:14.5px; line-height:1.6; margin:0 0 14px; }
.ct-diag-lien{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:500;
  color:var(--green); transition:gap .25s var(--ease-rs); }
.ct-diag-lien:hover{ gap:12px; }


/* ═══════════════════════════════════════════════════════════
   References clients : une carte par client, toutes visibles
   -----------------------------------------------------------
   Retour Nicolas : en rotation, on ne voyait qu'un client a la
   fois, la seconde reference passait pour une carte masquee.
   Grille auto-fit : 2 clients = 2 colonnes, 4 = 2x2, 1 = pleine
   largeur. Aucun code a toucher quand une reference s'ajoute.
   ══════════════════════════════════════════════════════════ */
.sc-refs{ max-width:1100px; margin-inline:auto; }
.sc-refs-piste{
  display:grid; gap:clamp(18px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:stretch;
}
/* En grille, la carte repasse en colonne : le logo au-dessus du texte,
   sinon 170px + 1fr etouffe le texte dans une colonne de 500px. */
.sc-refs-piste > .sc-ref-card{
  max-width:none; margin:0; height:100%;
  display:flex; flex-direction:column; gap:clamp(18px,2vw,24px);
  padding:clamp(24px,2.8vw,34px);
}
.sc-refs-piste > .sc-ref-card .sc-ref-logo{
  padding:0 0 18px; border:0; border-bottom:1px solid var(--border);
  min-height:0;
}
.sc-refs-piste > .sc-ref-card .sc-ref-logo img{ height:44px; }
.sc-refs-piste > .sc-ref-card .sc-ref-body{
  display:flex; flex-direction:column; flex:1;
}
.sc-refs-piste > .sc-ref-card blockquote{ font-size:clamp(1rem,1.35vw,1.12rem); }
.sc-refs-piste > .sc-ref-card .sc-ref-texte{ font-size:clamp(.97rem,1.3vw,1.06rem); }
/* Les citations n'ont pas la meme longueur : la signature et le lien
   se calent en bas pour que les cartes s'alignent. */
.sc-refs-piste > .sc-ref-card figcaption{ margin-top:auto; padding-top:6px; }
.sc-ref-texte{
  margin:0 0 20px; font-size:clamp(1.02rem,1.7vw,1.2rem); line-height:1.6;
  color:var(--text);
}

/* Formulaire generique servi depuis le back-office. */
.fm-wrap{ max-width:720px; margin-inline:auto; }
.fm-form{ background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.fm-aide{ display:block; font-weight:400; font-size:12.5px; color:var(--text-muted); margin-top:3px; }
.fm-merci{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:clamp(26px,4vw,40px); }
.fm-merci p:not(.ct-titre){ color:var(--text-muted); line-height:1.65; margin:0; }

/* Champ composite : un jeu de donnees appelle 4 reponses + un commentaire */
.fm-jeu{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:10px;padding:14px;
  border:1px solid var(--bord);border-radius:14px;background:var(--fond)}
.fm-sous{display:flex;flex-direction:column;gap:5px;flex:1 1 calc(50% - 7px);min-width:0}
.fm-sous-large{flex:1 1 100%}
.fm-sous i{font-style:normal;font-size:.74rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gris)}
.fm-jeu select,.fm-jeu input{width:100%;max-width:100%;padding:9px 11px;font:inherit;font-size:.92rem;
  color:var(--texte);background:#fff;border:1px solid var(--bord);border-radius:10px}
.fm-jeu select:focus-visible,.fm-jeu input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:520px){.fm-sous{flex:1 1 100%}}

/* Le hero sombre impose sa couleur de texte : dg-h1/dg-sub sont encre par defaut
   et devenaient illisibles (ratio 1.05) sur les pages formulaire. */
.sc-legal-hero .dg-h1 { color: #fff; }
.sc-legal-hero .dg-sub { color: rgba(255,255,255,.78); }

/* Bascule FR / AR. Le libelle arabe garde sa direction propre meme en page FR. */
.sc-lang{ display:flex; align-items:center; margin-inline-start:auto; }
.sc-lang a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:34px; padding:0 12px;
  font-size:13.5px; font-weight:500; line-height:1; color:var(--text-muted);
  border:1px solid var(--border); border-radius:var(--radius-pill);
  background:var(--white); transition:color .2s var(--ease-rs), border-color .2s var(--ease-rs);
}
.sc-lang a:hover{ color:var(--green); border-color:var(--green); }
.sc-lang a:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.sc-header.is-solid .sc-lang a{ background:transparent; }
@media (max-width:960px){ .sc-lang{ margin-inline-end:8px; } }

/* Encart « guide telechargeable » en fin d'article (ressource.php, cta = guide-cdc) */
.gd-cta{ display:grid; gap:clamp(22px,3vw,36px); margin:48px 0 8px; padding:clamp(24px,3.4vw,40px);
  background:var(--dark); border-radius:var(--radius-lg); color:#fff; scroll-margin-top:96px; }
@media (min-width:900px){ .gd-cta{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:start; } }
.gd-k{ display:inline-block; font-family:'Geist Mono',monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:#5FB6DE; margin-bottom:12px; }
.gd-titre{ font-family:'Geist',system-ui,sans-serif; font-size:clamp(1.3rem,2.2vw,1.65rem); font-weight:600;
  line-height:1.2; letter-spacing:-.02em; color:#fff; margin:0 0 12px; }
.gd-txt p{ color:rgba(255,255,255,.78); line-height:1.6; margin:0 0 14px; }
.gd-liste{ margin:0; padding:0; list-style:none; }
.gd-liste li{ position:relative; padding-left:20px; margin:0 0 8px; color:rgba(255,255,255,.86); font-size:15px; }
.gd-liste li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; background:#5FB6DE; border-radius:2px; }
.gd-form{ background:var(--white); border-radius:var(--radius-md); color:var(--text); }
.gd-form label{ margin-top:12px; }
.gd-form label:first-of-type{ margin-top:0; }
.gd-form button[type=submit]{ width:100%; justify-content:center; }
.gd-ok{ background:var(--white); border-radius:var(--radius-md); padding:clamp(22px,3vw,32px); color:var(--text); }
.gd-ok .gd-titre{ color:var(--text); }
.gd-ok p{ color:var(--text-muted); line-height:1.6; margin:0; }
/* L'encart vit dans <article> : les regles .sc-article p et .sc-article ul li du <style>
   de ressource.php, chargees apres cette feuille, repeignaient le texte en encre sur
   fond encre (invisible). Specificite relevee pour l'emporter. */
.sc-article .gd-cta .gd-txt p{ color:rgba(255,255,255,.8); }
.sc-article .gd-cta .gd-liste li{ color:rgba(255,255,255,.88); }

/* Visuels des articles dans les cartes (liste du blog, derniers guides de l'accueil).
   height:auto est indispensable : l'attribut height="630" imposerait sinon sa hauteur brute. */
.sc-article-card-img, .sc-r-post-img{
  display:block; height:auto; aspect-ratio:1200/630; object-fit:cover; background:var(--dark);
}
.sc-article-card-img{ width:100%; }
.sc-article-card-img + .sc-article-card-top{ min-height:0; padding-top:18px; }
/* La carte de l'accueil a un padding : l'image deborde dessus pour toucher les bords. */
.sc-r-post{ --pad:clamp(22px,2.6vw,28px); overflow:hidden; }
.sc-r-post-img{ width:calc(100% + 2 * var(--pad)); max-width:none;
  margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 6px; }

/* Fil d'Ariane sur bandeau sombre : .35 / .45 d'opacite donnaient 3,2 et 4,4 de contraste. */
.sc-legal-breadcrumb { color: rgba(255,255,255,.72); }
.sc-legal-breadcrumb a { color: rgba(255,255,255,.86); }

/* Second bouton de la section MACF (fond sombre) : lien vers la calculette */
.sc-macf-calc { margin-top: 12px; color: #fff; }

/* ---- rtl.css ---- */
/* Surcouche RTL, GENEREE par tools/gen-rtl.py depuis style.css.
[dir="rtl"] Ne pas editer a la main : relancer le script apres toute evolution du CSS.

   Trois regles issues des incidents passes :
   1. l'arabe est cursif : tout letter-spacing separe les lettres d'un mot ;
   2. l'arabe n'a pas d'italique,
[dir="rtl"] une oblique synthetique est illisible ;
   3. les decalages physiques left/right sont inverses ci-dessous. */

/* Les SVG sont des illustrations a coordonnees fixes : herite de direction:rtl,
[dir="rtl"] chaque <text> se reancre sur son x et l'illustration part de travers. Les
   nombres latins ("2 840") sont en plus reordonnes par l'algorithme bidi.
   On les garde donc en LTR ; un libelle arabe a l'interieur reste rendu RTL
   par le bidi,
[dir="rtl"] dans son propre run. */
[dir="rtl"] svg{direction:ltr}
[dir="rtl"] svg text,[dir="rtl"] svg tspan{direction:ltr;unicode-bidi:isolate}
/* Un nombre ou une plage de dates ne doit jamais etre reordonne. */
[dir="rtl"] time,[dir="rtl"] [class*="stat-v"],[dir="rtl"] [class*="-year"],
[dir="rtl"] [class*="price"],[dir="rtl"] [class*="tl-year"]{unicode-bidi:isolate}

[dir="rtl"] body{text-align:right}
[dir="rtl"] *{letter-spacing:0 !important}
[dir="rtl"] [class*="kicker"],[dir="rtl"] [class*="badge"],[dir="rtl"] [class*="eyebrow"],
[dir="rtl"] [class*="label"],[dir="rtl"] .btn,[dir="rtl"] button{text-transform:none !important}
[dir="rtl"] em,[dir="rtl"] i,[dir="rtl"] blockquote{font-style:normal}
[dir="rtl"] input,[dir="rtl"] textarea,[dir="rtl"] select{text-align:right;direction:rtl}
[dir="rtl"] input[type=email],[dir="rtl"] input[type=tel],[dir="rtl"] input[type=url]{direction:ltr;text-align:left}

[dir="rtl"] .mx-auto{margin-right:auto;margin-left:auto}
[dir="rtl"] .sc-header{left:0;right:0}
[dir="rtl"] .sc-nav a.active::after{left:0;right:0}
[dir="rtl"] .js-reveal .reveal.from-left{transform:translateX(44px)}
[dir="rtl"] .js-reveal .reveal.from-right{transform:translateX(-44px)}
[dir="rtl"] .sc-whatsapp-fab{left:24px;right:auto}
[dir="rtl"] .sc-hero::before{left:-200px;right:auto}
[dir="rtl"] .sc-hero::after{right:-100px;left:auto}
[dir="rtl"] .sc-stat{border-left:1px solid var(--border)}
[dir="rtl"] .sc-stat:last-child{border-left:none}
[dir="rtl"] .sc-steps::before{left:calc(100% / 3 - 48px);right:16px}
[dir="rtl"] .sc-step{text-align:right}
[dir="rtl"] .sc-plan-badge{right:50%;left:auto;transform:translateX(50%)}
[dir="rtl"] .sc-pricing-note{margin-right:auto;margin-left:auto}
[dir="rtl"] .sc-page-hero::before{right:50%;left:auto}
[dir="rtl"] .sc-page-hero h1{margin-right:auto;margin-left:auto}
[dir="rtl"] .sc-form-select{background-position:left 14px center;padding-left:40px}
[dir="rtl"] .sc-stat:nth-child(2){border-left:none}
[dir="rtl"] .sc-mobile-close{left:24px;right:auto}
[dir="rtl"] .sc-app-scope-pct{text-align:left}
[dir="rtl"] .sc-mini-klem-msg.user{margin-right:auto}
[dir="rtl"] .sc-screens-grid{margin-right:auto;margin-left:auto}
[dir="rtl"] .sc-pscreen-kpi-val em{margin-right:1px}
[dir="rtl"] .sc-pscreen-row > span:last-child{text-align:left}
[dir="rtl"] .sc-ceo-quote{border-right:2px solid var(--green);padding-right:12px}
[dir="rtl"] .sc-legal-block ul li{padding-right:16px}
[dir="rtl"] .sc-legal-block ul li::before{right:0;left:auto}
[dir="rtl"] .sc-cookie-row span{border-left:1px solid var(--border)}
[dir="rtl"] .sc-cookie-row span:last-child{border-left:none}
[dir="rtl"] .sc-macf::before{left:-160px;right:auto}
[dir="rtl"] .sc-macf-timeline{padding-right:20px}
[dir="rtl"] .sc-macf-timeline::before{right:19px;left:auto}
[dir="rtl"] .sc-macf-tl-dot{margin-right:-7px}
[dir="rtl"] .sc-nav a::after{left:0;right:0}
[dir="rtl"] .sc-toc a:hover{padding-right:6px}
[dir="rtl"] .badge-outline{padding-right:0}
[dir="rtl"] .badge-white{padding-right:0}
[dir="rtl"] .badge-white::before{margin-left:10px}
[dir="rtl"] .sc-hero::before,
[dir="rtl"] .sc-prod-hero::before,
[dir="rtl"] .sc-page-hero::before,
[dir="rtl"] .sc-hub-hero::before{left:0;right:0}
[dir="rtl"] .sc-hero::after,
[dir="rtl"] .sc-prod-hero::after{left:-160px;right:auto}
[dir="rtl"] .sc-app-sidebar{border-left:1px solid var(--border)}
[dir="rtl"] .sc-r-prob .sc-macf-timeline{padding-right:22px}
[dir="rtl"] .sc-r-sect-lb{margin-left:8px}
[dir="rtl"] .sc-r-plan-price span{margin-right:6px}
[dir="rtl"] .sc-r-plan-list li{padding-right:22px}
[dir="rtl"] .sc-r-plan-list li::before{right:0;left:auto}
[dir="rtl"] .sc-header{left:0;right:0}
[dir="rtl"] .sc-header-inner{padding:9px 20px 9px 9px}
[dir="rtl"] .sc-nav{margin-right:auto}
[dir="rtl"] .sc-header-inner{padding:8px 16px 8px 8px}
[dir="rtl"] .rma-logo-dot{margin-right:1px}
[dir="rtl"] .sc-local-banner-content{text-align:right}
[dir="rtl"] .sc-legal-body th,
[dir="rtl"] .sc-legal-body td,
[dir="rtl"] .tbl-scroll th,
[dir="rtl"] .tbl-scroll td{text-align:right}
[dir="rtl"] .sc-ref-card{text-align:right}
[dir="rtl"] .sc-ref-logo{padding-left:clamp(24px,2.4vw,36px);border-left:1px solid var(--border)}
[dir="rtl"] .sc-r-step-n i{padding-right:10px;border-right:1px solid rgba(255,255,255,.22)}
[dir="rtl"] .rma-invite-boite{text-align:right}
[dir="rtl"] .rma-invite-x{left:12px;right:auto}
[dir="rtl"] .ct-hp{right:-9999px;left:auto}
[dir="rtl"] .gd-liste li{padding-right:20px}
[dir="rtl"] .gd-liste li::before{right:0;left:auto}

/* ---- feuilles des pages ---- */
  .sc-prod-hero{background:var(--white);min-height:94vh;display:flex;align-items:center;padding-top:72px;position:relative;overflow:hidden;}
  .sc-prod-hero::before{content:'';position:absolute;top:-160px;right:-160px;width:640px;height:640px;background:radial-gradient(circle,rgba(12,112,153,.10) 0%,transparent 68%);pointer-events:none;}
  .sc-prod-hero::after{content:'';position:absolute;bottom:-80px;left:-80px;width:400px;height:400px;background:radial-gradient(circle,rgba(12,112,153,.05) 0%,transparent 70%);pointer-events:none;}
  .sc-prod-hero-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center;padding:72px 0 80px;position:relative;z-index:1;}
  .sc-prod-hero-h1{font-family:'Geist',sans-serif;font-size:clamp(26px,3.2vw,42px);font-weight:600;color:var(--text);line-height:1.1;margin-bottom:24px;}
  .sc-prod-hero-h1 em{font-style:normal;color:var(--green);}
  .sc-prod-hero-sub{font-size:17px;color:var(--text-muted);line-height:1.75;margin-bottom:40px;max-width:500px;}
  .sc-prod-hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:40px;}
  .sc-prod-hero-trust{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
  .sc-prod-hero-trust-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-muted);font-weight:600;letter-spacing:.02em;}
  .sc-prod-hero-trust-dot{width:6px;height:6px;background:var(--green);border-radius:50%;flex-shrink:0;}
  .sc-prod-hero-visual{position:relative;overflow:visible;}
  .sc-prod-hero-visual::before{content:'';position:absolute;inset:-24%;background:radial-gradient(ellipse at center,rgba(12,112,153,.09) 0%,transparent 65%);animation:glow-pulse 6s ease-in-out infinite;pointer-events:none;z-index:0;}
  .sc-prod-dashboard{background:#08111E;border:1px solid rgba(12,112,153,.14);border-radius:14px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.52),0 0 0 1px rgba(12,112,153,.06) inset;transform:perspective(1200px) rotateX(4deg) rotateY(-4deg);transition:transform .55s cubic-bezier(0.23,1,0.32,1),box-shadow .55s;position:relative;z-index:1;}
  .sc-prod-dashboard:hover{transform:perspective(1200px) rotateX(1.5deg) rotateY(-1.5deg) scale(1.01);box-shadow:0 52px 100px rgba(0,0,0,.6),0 0 0 1px rgba(12,112,153,.12) inset;}
  .sc-pd-dot-r{background:#FF5F57;}.sc-pd-dot-y{background:#FEBC2E;}.sc-pd-dot-g{background:#28C840;}
  @keyframes klem-pop{from{opacity:0;transform:rotate(-1.5deg) translateY(16px);}to{opacity:1;transform:rotate(-1.5deg) translateY(0);}}
  @keyframes scope-pop{from{opacity:0;transform:rotate(1.8deg) translateY(14px);}to{opacity:1;transform:rotate(1.8deg) translateY(0);}}
  @media(max-width:960px){.sc-prod-hero-inner{grid-template-columns:1fr;gap:48px;}.sc-prod-hero-visual{display:none;}}
  .sc-modules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:56px;}
  .sc-modules-grid > *{min-width:0;}
  .sc-module-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;position:relative;transition:all .25s ease;overflow:hidden;}
  .sc-module-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:background .25s;}
  .sc-module-card:hover{border-color:var(--green);box-shadow:var(--shadow-md);transform:translateY(-3px);}
  .sc-module-card:hover::before{background:var(--green);}
  .sc-module-num{position:absolute;top:20px;right:22px;font-family:'Geist',sans-serif;font-size:42px;font-weight:600;color:rgba(12,112,153,.08);line-height:1;letter-spacing:-.03em;pointer-events:none;user-select:none;transition:color .25s;}
  .sc-module-card:hover .sc-module-num{color:rgba(12,112,153,.16);}
  .sc-module-icon-wrap{width:48px;height:48px;background:var(--green-light);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex-shrink:0;}
  .sc-module-title{font-family:'Geist',sans-serif;font-size:17px;font-weight:600;color:var(--dark);margin-bottom:10px;}
  .sc-module-desc{font-size:14px;color:var(--text-muted);line-height:1.7;margin-bottom:18px;}
  .sc-module-tags{display:flex;flex-wrap:wrap;gap:6px;}
  .sc-module-tag{font-size:11px;font-weight:600;color:var(--green-dark);background:var(--green-light);border-radius:var(--radius-pill);padding:3px 10px;font-family:'Geist',sans-serif;}
  @media(max-width:960px){.sc-modules-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:600px){.sc-modules-grid{grid-template-columns:1fr;}}
  @keyframes typing-bounce{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(-4px);}}
    .sc-page-hero { background:var(--white);padding:100px 0 72px; }
    .sc-page-hero-content { max-width:640px; }
    .sc-page-hero-content h1 { font-family:'Geist',sans-serif;font-size:clamp(32px,4vw,52px);font-weight:600;color:var(--text);line-height:1.12;margin-bottom:18px; }
    .sc-page-hero-content h1 em { font-style: normal;color:var(--green); }
    .sc-page-hero-content p { font-size:18px;color:var(--text-muted);line-height:1.65; }
    .sc-contact-grid { display:grid;grid-template-columns:420px 1fr;gap:56px;align-items:start; }
    @media(max-width:900px){.sc-contact-grid{grid-template-columns:1fr}}
    .sc-contact-info h3 { font-family:'Geist',sans-serif;font-size:22px;font-weight:600;color:var(--dark);margin-bottom:28px; }
    .sc-contact-items { display:flex;flex-direction:column;gap:20px;margin-bottom:32px; }
    .sc-contact-item { display:flex;align-items:flex-start;gap:16px; }
    .sc-contact-item-icon { width:44px;height:44px;border-radius:10px;background:var(--green-pale);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
    .sc-contact-item-label { font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px; }
    .sc-contact-item-value { font-size:15px;color:var(--dark); }
    .sc-contact-item-value a { color:var(--dark);text-decoration:none; }
    .sc-contact-item-value a:hover { color:var(--green-dark); }
    .sc-contact-note { background:var(--green-pale);border:1px solid var(--border);border-radius:10px;padding:20px 22px;font-size:14px;color:var(--text);line-height:1.6; }
    .sc-form-card { background:var(--white);border:1px solid var(--border);border-radius:12px;padding:40px;box-shadow:var(--shadow-sm); }
    .sc-hub-hero { background: var(--white); padding: 96px 0 72px; }
    .sc-hub-tag { display:inline-flex;align-items:center;gap:6px;background:rgba(12,112,153,.12);border:1px solid rgba(12,112,153,.2);border-radius:100px;padding:5px 14px;font-size:12px;font-weight:600;color:var(--green);letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px; }
    .sc-hub-h1 { font-family:'Geist',sans-serif;font-size:clamp(26px,3.5vw,44px);font-weight:600;color:var(--text);line-height:1.12;max-width:680px;margin-bottom:18px; }
    .sc-hub-h1 em { color:var(--green);font-style:normal; }
    .sc-hub-sub { font-size:18px;color:var(--text-muted);max-width:560px;line-height:1.65; }
    .sc-hub-stats { display:flex;gap:40px;padding:32px 0 0;flex-wrap:wrap; }
    .sc-hub-stat-val { font-family:'Geist',sans-serif;font-size:28px;font-weight:600;color:var(--green); }
    .sc-hub-stat-label { font-size:13px;color:var(--text-muted);margin-top:2px; }
    .sc-hub-filters { display:flex;gap:10px;flex-wrap:wrap;padding:32px 0 0; }
    .sc-filter-btn { padding:8px 18px;border-radius:100px;font-family:'Geist',sans-serif;font-size:13px;font-weight:600;border:1px solid var(--border);color:var(--text-muted);background:var(--white);cursor:pointer;transition:all .15s; }
    .sc-filter-btn.active,.sc-filter-btn:hover { background:var(--green);border-color:var(--green);color:#fff; }
    .sc-hub-body { background:var(--bg);padding:72px 0 96px; }
    .sc-articles-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:28px; }
    .sc-articles-grid > * { min-width:0; }
    .sc-article-card { background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s,border-color .2s,transform .2s;display:flex;flex-direction:column;text-decoration:none; }
    .sc-article-card:hover { box-shadow:var(--shadow-lg);border-color:var(--green);transform:translateY(-3px); }
    .sc-article-card-top { background:var(--dark);padding:28px 28px 24px;min-height:140px;display:flex;flex-direction:column;justify-content:flex-end; }
    .sc-article-card-top.reglementation { background:linear-gradient(135deg,#08202E 0%,#1B2A4A 100%); }
    .sc-article-card-top.methode { background:linear-gradient(135deg,#08202E 0%,#12314F 100%); }
    .sc-article-card-top.secteur { background:linear-gradient(135deg,#08202E 0%,#26304A 100%); }
    .sc-article-card-top.guide { background:linear-gradient(135deg,#08202E 0%,#0D2440 100%); }
    .sc-article-tag { display:inline-block;padding:3px 11px;border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-bottom:12px; }
    .sc-article-tag.reglementation { background:rgba(239,68,68,.15);color:#f87171; }
    .sc-article-tag.methode { background:rgba(99,102,241,.15);color:#818cf8; }
    .sc-article-tag.secteur { background:rgba(234,179,8,.15);color:#fbbf24; }
    .sc-article-tag.guide { background:rgba(95,182,222,.16);color:var(--blue-bright); }
    .sc-article-card-title { font-family:'Geist',sans-serif;font-size:17px;font-weight:600;color:#fff;line-height:1.3;margin:0; }
    .sc-article-card-body { padding:22px 28px 28px;flex:1;display:flex;flex-direction:column; }
    .sc-article-card-desc { font-size:14px;color:var(--text-muted);line-height:1.65;margin-bottom:20px;flex:1; }
    .sc-article-card-meta { display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--border); }
    .sc-article-card-read { font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:5px; }
    .sc-article-card-cta { font-family:'Geist',sans-serif;font-size:13px;font-weight:600;color:var(--green-dark);display:flex;align-items:center;gap:4px;transition:gap .15s; }
    .sc-article-card:hover .sc-article-card-cta { gap:8px; }
    .sc-article-card.featured { grid-column:1/-1;flex-direction:row; }
    @media(max-width:700px){.sc-article-card.featured{flex-direction:column}}
    .sc-article-card.featured .sc-article-card-top { min-width:0;min-height:unset;flex:0 1 340px;border-radius:0; }
    @media(max-width:700px){.sc-article-card.featured .sc-article-card-top{min-width:unset;flex:none}}
    .sc-article-card.featured .sc-article-card-title{font-size:22px}
    .sc-article-card.featured .sc-article-card-desc{font-size:15px}
    .sc-res-hero { background:var(--dark);padding:100px 0 72px; }
    .sc-res-breadcrumb { display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.72);margin-bottom:28px; }
    .sc-res-breadcrumb a { color:var(--blue-bright); }
    .sc-res-breadcrumb span { color:rgba(255,255,255,.5); }
    .sc-res-tag { display:inline-flex;align-items:center;gap:6px;border-radius:100px;padding:5px 14px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px; }
    .sc-res-tag.reglementation { background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.2);color:#f87171; }
    .sc-res-tag.methode { background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.2);color:#818cf8; }
    .sc-res-tag.secteur { background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.2);color:#fbbf24; }
    .sc-res-tag.guide { background:rgba(95,182,222,.14);border:1px solid rgba(95,182,222,.24);color:var(--blue-bright); }
    .sc-res-h1 { font-family:'Geist',sans-serif;font-size:clamp(28px,4.5vw,50px);font-weight:600;color:#fff;line-height:1.15;max-width:760px;margin-bottom:20px; }
    .sc-res-h1 em { color:var(--green);font-style:normal; }
    .sc-res-meta { display:flex;align-items:center;gap:20px;flex-wrap:wrap; }
    .sc-res-meta-item { display:flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.45); }
    .sc-res-body { background:var(--bg);padding:72px 0 96px; }
    .sc-res-layout { display:grid;grid-template-columns:1fr 280px;gap:56px;align-items:start; }
    .sc-res-layout > * { min-width:0; }
    .sc-article .tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 18px; }
    .sc-article table { width:100%; border-collapse:collapse; font-size:14px; }
    .sc-article th, .sc-article td { padding:10px 12px; border:1px solid var(--border); text-align:left; vertical-align:top; }
    .sc-article thead th { background:var(--bg); font-weight:600; }
    @media(max-width:860px){.sc-res-layout{grid-template-columns:1fr}.sc-res-sidebar{order:-1}}
    .sc-article h2 { font-family:'Geist',sans-serif;font-size:clamp(20px,2.5vw,26px);font-weight:600;color:var(--dark);margin:56px 0 16px;padding-top:8px;border-top:2px solid var(--border); }
    .sc-article h2:first-of-type { margin-top:0;border-top:none; }
    .sc-article h3 { font-family:'Geist',sans-serif;font-size:18px;font-weight:600;color:var(--dark);margin:32px 0 10px; }
    .sc-article p { font-size:16px;line-height:1.75;color:var(--text);margin-bottom:18px; }
    .sc-article ul { margin:0 0 18px;padding-left:0;list-style:none; }
    .sc-article ul li { font-size:16px;line-height:1.7;color:var(--text);padding:6px 0 6px 28px;position:relative; }
    .sc-article ul li::before { content:'';position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:50%;background:var(--green); }
    .sc-article strong { font-weight:600;color:var(--dark); }
    .sc-article a { color:var(--green-dark);text-decoration:underline;text-underline-offset:2px; }
    .sc-callout { background:rgba(12,112,153,.07);border-left:3px solid var(--green);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:18px 22px;margin:24px 0; }
    .sc-callout-title { font-family:'Geist',sans-serif;font-size:13px;font-weight:600;color:var(--green-dark);letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px; }
    .sc-callout p { margin:0;font-size:15px; }
    .sc-callout-warn { background:rgba(239,68,68,.06);border-left-color:#ef4444; }
    .sc-callout-warn .sc-callout-title { color:#dc2626; }
    .sc-callout-orange { background:rgba(244,191,79,.07);border-left-color:#F4BF4F; }
    .sc-callout-orange .sc-callout-title { color:#c9960a; }
    .sc-timeline { display:flex;flex-direction:column;gap:0;margin:28px 0; }
    .sc-tl-item { display:flex;gap:20px;padding-bottom:28px;position:relative; }
    .sc-tl-item::before { content:'';position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--border); }
    .sc-tl-item:last-child::before { display:none; }
    .sc-tl-dot { flex-shrink:0;width:24px;height:24px;border-radius:50%;border:2px solid var(--border);background:var(--white);display:flex;align-items:center;justify-content:center;margin-top:2px; }
    .sc-tl-item.done .sc-tl-dot { background:var(--green);border-color:var(--green); }
    .sc-tl-item.active .sc-tl-dot { background:var(--dark);border-color:var(--green);box-shadow:0 0 0 3px rgba(12,112,153,.2); }
    .sc-tl-dot svg { display:none; }
    .sc-tl-item.done .sc-tl-dot svg { display:block; }
    .sc-tl-year { font-family:'Geist',sans-serif;font-size:12px;font-weight:600;color:var(--green-dark);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px; }
    .sc-tl-label { font-family:'Geist',sans-serif;font-size:16px;font-weight:600;color:var(--dark);margin-bottom:5px; }
    .sc-tl-desc { font-size:14px;color:var(--text-muted);line-height:1.6; }
    .sc-sectors-table { width:100%;border-collapse:collapse;margin:24px 0;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm); }
    .sc-sectors-table th { background:var(--dark);color:rgba(255,255,255,.7);font-family:'Geist',sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:14px 18px;text-align:left; }
    .sc-sectors-table td { padding:13px 18px;font-size:14px;color:var(--text);border-bottom:1px solid var(--border);background:var(--white); }
    .sc-sectors-table tr:last-child td { border-bottom:none; }
    .sc-sectors-table tr:hover td { background:var(--green-pale); }
    .pill { display:inline-block;padding:2px 10px;border-radius:100px;font-size:11px;font-weight:600; }
    .pill-red { background:rgba(239,68,68,.1);color:#dc2626; }
    .pill-orange { background:rgba(244,191,79,.15);color:#c9960a; }
    .pill-green { background:rgba(12,112,153,.12);color:var(--green-dark); }
    .sc-res-stats { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:28px 0; }
    .sc-res-stats > *{min-width:0;}
    @media(max-width:540px){.sc-res-stats{grid-template-columns:1fr}}
    .sc-res-stat { background:var(--dark);border-radius:var(--radius-md);padding:24px 20px;text-align:center; }
    .sc-res-stat-val { font-family:'Geist',sans-serif;font-size:28px;font-weight:600;color:var(--green);margin-bottom:4px; }
    .sc-res-stat-label { font-size:12px;color:rgba(255,255,255,.5);line-height:1.4; }
    .sc-inline-cta { background:linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 100%);border-radius:var(--radius-lg);padding:40px 36px;margin:48px 0;display:flex;align-items:center;gap:32px;flex-wrap:wrap; }
    .sc-inline-cta-text { flex:1;min-width:220px; }
    .sc-inline-cta-text h3 { font-family:'Geist',sans-serif;font-size:20px;font-weight:600;color:#fff;margin-bottom:8px; }
    .sc-inline-cta-text p { font-size:14px;color:rgba(255,255,255,.55);margin:0; }
    .sc-res-sidebar { position:sticky;top:96px; }
    @media(max-width:860px){.sc-res-sidebar{position:static;top:auto}}
    .sc-toc { background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-sm);margin-bottom:20px; }
    .sc-toc-title { font-family:'Geist',sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px; }
    .sc-toc ul { list-style:none;padding:0;margin:0; }
    .sc-toc ul li { padding:0; }
    .sc-toc ul li::before { display:none; }
    .sc-toc a { display:block;padding:7px 0;font-size:13px;color:var(--text-muted);border-bottom:1px solid var(--border);transition:color .15s;text-decoration:none;line-height:1.4; }
    .sc-toc ul li:last-child a { border-bottom:none; }
    .sc-toc a:hover { color:var(--green-dark); }
    .sc-sidebar-cta { background:var(--dark);border-radius:var(--radius-md);padding:24px;text-align:center; }
    .sc-sidebar-cta-title { font-family:'Geist',sans-serif;font-size:16px;font-weight:600;color:#fff;margin-bottom:10px;line-height:1.3; }
    .sc-sidebar-cta p { font-size:13px;color:rgba(255,255,255,.5);margin-bottom:18px;line-height:1.55; }
    .sc-sidebar-cta .btn { width:100%;justify-content:center;font-size:14px; }
    .related-section { background:var(--bg);padding:72px 0; }
    .related-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden; }
    @media(max-width:760px){.related-grid{grid-template-columns:1fr}}
    .related-card { background:var(--white);padding:28px;text-decoration:none;display:flex;flex-direction:column;gap:10px;transition:background .2s; }
    .related-card:hover { background:var(--dark); }
    .related-card-cat { font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dark); }
    .related-card:hover .related-card-cat { color:var(--green); }
    .related-card-title { font-family:'Geist',sans-serif;font-size:16px;font-weight:600;color:var(--dark);line-height:1.3; }
    .related-card:hover .related-card-title { color:#fff; }
/* ---- utilitaires ---- */
.rma-mb14{margin-bottom:14px}.rma-mb16{margin-bottom:16px}.rma-mb20{margin-bottom:20px}.rma-mb22{margin-bottom:22px}.rma-mb24{margin-bottom:24px}
.rma-mt14{margin-top:14px}.rma-mt40{margin-top:40px}.rma-mt48{margin-top:48px}
.rma-center{text-align:center}
.rma-bg-bg{background:var(--bg)}.rma-bg-white{background:var(--white)}.rma-bg-alt{background:var(--bg-alt)}
.rma-notop{border-top:none}
.rma-badge-page{margin-bottom:20px;display:inline-flex}
.rma-pied-adresse{color:rgba(255,255,255,.6)}
.rma-wa-ico{background:#25D36615;border-color:#25D36630}
.rma-wa-lien{color:var(--text);font-weight:600}
.rma-stats2{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rma-stat{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;text-align:center}
.rma-stat-val{font-family:'Geist',sans-serif;font-size:28px;font-weight:600;color:var(--dark);line-height:1;margin-bottom:4px}
.rma-stat-lab{font-size:13px;color:var(--text-muted)}
.rma-vide{color:var(--text-muted);text-align:center;padding:60px 0}
.ct-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[dir="rtl"] .ct-form .hp{right:-9999px;left:auto}
.acp-stats-section{background:var(--bg-alt);border-bottom:1px solid var(--border)}
.acp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;text-align:center}
.acp-stat{padding:32px 16px;border-right:1px solid var(--border)}
.acp-stat:last-child{border-right:none}
.acp-stat-val{font-family:'Geist',sans-serif;font-size:36px;font-weight:600;color:var(--green)}
.acp-stat-lab{font-size:13px;color:var(--text-muted);margin-top:4px}
.acp-points{margin-top:14px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.acp-points li{font-size:13px;color:var(--text-muted);display:flex;gap:8px;align-items:flex-start}
.acp-points li svg{flex-shrink:0;margin-top:1px}
.acp-deroule{background:var(--bg);color:var(--text)}
.acp-h2{color:var(--text)}
.acp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;margin-top:56px}
.acp-step{padding:0 28px;border-left:1px solid rgba(255,255,255,0.08)}
.acp-step:last-child{padding:0 0 0 28px}
.acp-step:first-child{padding:0 28px 0 0;border-left:none}
.acp-step-n{font-family:'Geist',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--green);margin-bottom:16px}
.acp-step h3{font-family:'Geist',sans-serif;font-size:18px;font-weight:600;color:var(--text);margin-bottom:10px}
.acp-step p{font-size:14px;color:var(--text-muted);line-height:1.65}
.acp-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:48px}
.acp-why-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px}
.acp-why-ico{width:44px;height:44px;background:var(--green-pale);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.acp-why-card h3{font-family:'Geist',sans-serif;font-size:16px;font-weight:600;color:var(--text);margin-bottom:8px}
.acp-why-card p{font-size:14px;color:var(--text-muted);line-height:1.65}
.sc-article-card.is-hors{display:none}
.rma-mb36{margin-bottom:36px}
.rma-pagination{display:flex;gap:10px;justify-content:center;margin-top:40px}
.rma-pagination a{padding:8px 14px;border:1px solid var(--border);border-radius:100px;color:var(--text-muted);text-decoration:none;font-family:'Geist',sans-serif;font-size:13px;font-weight:600}
.rma-pagination a[aria-current]{background:var(--green);border-color:var(--green);color:#fff}