/* SustainCarbon : feuille du thème. Ordre d'origine : style.css, 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;
}


/* ---- style.css ---- */
/* ============================================================
   SUSTAINCORE - DESIGN SYSTEM (style.css)
   ------------------------------------------------------------
   DA : nature-inspired, premium-consultancy, blanc dominant
   Police titres : 'Geist'  ·  Police corps : 'Geist'
   Couleur primaire : #0F52D9  (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:        #0F52D9;
  --green-hover:  #0B41B0;
  --green-dark:   #0A3A9E;
  --green-light:  #E7EEFF;
  --green-pale:   #F2F6FD;
  --dark:         #070F1C;
  --dark-2:       #0F1E33;
  --dark-3:       #0A1626;
  --text:         #131C29;
  --text-muted:   #5B6B80;
  --border:       #DDE4EE;
  --white:        #FFFFFF;
  --bg:           #F5F8FC;
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    10px;
  --radius-pill:  100px;
  --shadow-sm:    0 2px 8px rgba(7,15,28,.06);
  --shadow-md:    0 4px 20px rgba(7,15,28,.10);
  --shadow-lg:    0 8px 40px rgba(7,15,28,.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(15,82,217,.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(15,82,217,.12); color: var(--green); border: 1px solid rgba(15,82,217,.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 ───────────────────────────────── */
.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);
}
.reveal.from-left  { transform: translateX(-44px); }
.reveal.from-right { transform: translateX(44px); }
.reveal.from-scale { transform: scale(0.93); }
.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(15,82,217,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(15,82,217,.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(15,82,217,.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(15,82,217,.35) 0%, rgba(15,82,217,.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(15,82,217,.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: var(--dark);
  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(15,82,217,.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;
}

/* ═══════════════════════════════════════════════════════════
   MAROC BANNER (atmospheric image strip)
   ══════════════════════════════════════════════════════════ */
.sc-maroc-banner {
  position: relative;
  height: 400px;
  background: url('/assets/images/sahara.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.sc-maroc-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(7,15,28,.60) 0%, rgba(7,15,28,.75) 100%);
}
.sc-maroc-banner-content {
  position: relative;
  z-index: 1;
  max-width: 660px;
  padding: 0 32px;
}
.sc-maroc-banner-content .badge { margin-bottom: 20px; }
.sc-maroc-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-maroc-banner-content p {
  font-size: 16px;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
}

/* Maroc photo grid (a-propos) */
.sc-maroc-photos { overflow: hidden; line-height: 0; }
.sc-maroc-photos-grid {
  display: grid;
  grid-template-columns: 1fr 1.9fr 1.4fr;
  height: 380px;
}
@media (max-width: 820px) {
  .sc-maroc-photos-grid { grid-template-columns: 1fr 1fr; height: 260px; }
  .sc-maroc-photos-grid .sc-maroc-photo-item:last-child { display: none; }
}
.sc-maroc-photo-item { overflow: hidden; }
.sc-maroc-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
  display: block;
}
.sc-maroc-photo-item:hover img { transform: scale(1.04); }

@media (max-width: 768px) {
  .sc-maroc-banner { height: 280px; }
  .sc-maroc-photos-grid { grid-template-columns: 1fr; height: auto; }
  .sc-maroc-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;
}
.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,.35);
}
.sc-footer-powered {
  font-size: 12px;
  color: rgba(255,255,255,.25);
}
.sc-footer-powered a {
  color: rgba(15,82,217,.6);
  transition: color .2s;
}
.sc-footer-powered a:hover { color: var(--green); }

/* ═══════════════════════════════════════════════════════════
   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(15,82,217,.1) 0%, transparent 70%);
  pointer-events: none;
}
.sc-page-hero-content { position: relative; z-index: 1; margin-left: auto; margin-right: auto; }
.sc-page-hero-content > h1 { max-width: 100%; }
.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(15,82,217,.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(15,82,217,.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(--green);
  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: #070F1C;
  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: #F5F8FC; }
.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: #070F1C;
}
.sc-app-badge-live {
  display: inline-flex; align-items: center; gap: 5px;
  background: #E7EEFF; border: 1px solid #DDE4EE;
  border-radius: 100px; padding: 3px 10px;
  font-size: 10px; font-weight: 600; color: #0A3A9E;
}
.sc-app-badge-live::before {
  content: ''; width: 6px; height: 6px;
  background: #0F52D9; 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 #DDE4EE;
  border-radius: 8px; padding: 10px 12px;
}
.sc-app-metric-label {
  font-size: 9px; color: #5B6B80; 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: #070F1C; line-height: 1;
}
.sc-app-metric-value.green { color: #0A3A9E; }
.sc-app-metric-sub {
  font-size: 8px; color: #5B6B80; margin-top: 2px;
}

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

/* Scope bars */
.sc-app-scopes {
  background: #fff; border: 1px solid #DDE4EE;
  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: #131C29; font-weight: 500; white-space: nowrap; overflow: hidden;
}
.sc-app-scope-bar {
  height: 6px; background: #E7EEFF; 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: #0A3A9E; font-weight: 600; text-align: right;
}

/* Status bar */
.sc-app-status {
  background: #070F1C; 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: #0F52D9; 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: #0F52D9; 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(15,82,217,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(15,82,217,.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: #F5F8FC; }

/* Mini report frame */
.sc-mini-report { padding: 14px; background: #fff; }
.sc-mini-report-header {
  background: #070F1C; 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 #E7EEFF;
}
.sc-mini-report-row:last-child { border-bottom: none; }
.sc-mini-report-key { font-size: 9px; color: #5B6B80; }
.sc-mini-report-val { font-family: 'Geist', system-ui, sans-serif; font-size: 10px; font-weight: 600; color: #070F1C; }
.sc-mini-report-val.green { color: #0A3A9E; }
.sc-mini-report-stamp {
  margin-top: 10px; padding: 6px; background: #E7EEFF;
  border: 1px solid #DDE4EE; border-radius: 6px;
  text-align: center; font-size: 9px; font-weight: 600; color: #0A3A9E;
}

/* Mini Klem chat */
.sc-mini-klem { padding: 12px; background: #070F1C; }
.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: #070F1C;
}
.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: #070F1C; 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(15,82,217,0.1); border: 1px solid rgba(15,82,217,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: #070F1C; }

/* 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(15,82,217,.15);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(15,82,217,.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(15,82,217,.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(15,82,217,.18);
  color: #0F52D9;
  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: #0F52D9;
  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: #0F52D9;
  color: #070F1C;
  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(--white);
  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(15,82,217,.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: #0F52D9;
  background: rgba(15,82,217,.12);
  border: 1px solid rgba(15,82,217,.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(15,82,217,.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(15,82,217,.3);
  border-color: rgba(15,82,217,.5);
}

.sc-macf-tl-active .sc-macf-tl-dot {
  background: #0F52D9;
  border-color: #0F52D9;
  box-shadow: 0 0 0 4px rgba(15,82,217,.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: #0F52D9; }

.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(15,82,217,.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(15,82,217,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,82,217,.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(7,15,28,.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(7,15,28,.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(15,82,217,.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(7,15,28,.05), 0 4px 14px rgba(7,15,28,.06);
  --shadow-md: 0 2px 4px rgba(7,15,28,.05), 0 18px 44px rgba(7,15,28,.10);
  --shadow-lg: 0 30px 80px rgba(7,15,28,.18);

  /* bleu clair : le meme accent, lisible sur fond sombre */
  --blue-bright: #5B95FF;
  --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(15,82,217,.26); }
.btn-green:hover{ background:var(--green-hover); color:#fff; transform:translateY(-2px); box-shadow:0 14px 34px rgba(15,82,217,.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:#C7D3E4;
}

/* -- 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(7,15,28,.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(15,82,217,.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(7,15,28,.05); color: rgba(19,28,41,.5); }
.sc-app-inner{ background: var(--white); }
.sc-app-sidebar{ background: #F5F8FC; border-right: 1px solid var(--border); }
.sc-app-nav-icon:not(.active){ background: rgba(7,15,28,.07); }
.sc-app-status{ background: #F5F8FC; 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: #F5F8FC; 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: #E7EEFF; }
.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: #F5F8FC; }
.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: #F5F8FC; 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: #F5F8FC; }
.sc-app-metric-label, .sc-app-metric-sub{ color: #5B6B80; }

/* -- 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: #DDE4EE; 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-maroc-banner::before{
  background: linear-gradient(to bottom, rgba(6,14,26,.72) 0%, rgba(6,14,26,.86) 100%);
}
.sc-maroc-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); }
@media (min-width:820px){ .sc-r-steps{ grid-template-columns:repeat(3,1fr); } }
.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:#C7D3E4; }
.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,#070F1C 0%,#0F1E33 52%,#0A1626 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(91,149,255,.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);
}
.sc-nav{ display:flex; gap:4px; margin-left:auto; }
.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{
  width:42px; height:42px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--white);
}
@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);
}

/* -- tarifs : defauts de presentation releves au rendu ------------------ */
/* 1. cartes de meme hauteur, boutons alignes */
.sc-r-plans{ align-items:stretch; }
.sc-r-plan{ height:100%; }
/* 2. le badge chevauchait le bord de la carte : il rentre dedans */
.sc-plan-badge{
  position:static; transform:none; display:inline-flex; align-self:flex-start;
  color:#fff; background:var(--green); margin-bottom:2px;
}
.sc-r-plan.is-featured{ padding-top:clamp(22px,2.6vw,28px); }
/* 3. « Sur devis » n'est pas un montant : meme place, poids moindre */
.sc-r-plan-price:not(:has(+ .sc-r-plan-period)){ }
.sc-r-plan-devis .sc-r-plan-price{ font-size:1.45rem; }
/* 4. la liste occupe l'espace, le bouton reste en bas */
.sc-r-plan-list{ flex:1 1 auto; }

/* ═══════════════════════════════════════════════════════════
   NEUTRES · discipline de la reference             2026-08-26
   -----------------------------------------------------------
   La reference tient sur des gris strictement neutres plus UN
   accent sature. Nos neutres etaient tous bleutes, ce qui
   voilait la page et affaiblissait l'accent. On les neutralise
   et le bleu reste seul a porter la couleur.
   ══════════════════════════════════════════════════════════ */
:root{
  --dark:        #08090B;
  --dark-2:      #14161A;
  --dark-3:      #0B0C0E;
  --text:        #14161A;
  --text-muted:  #5C606B;
  --border:      #E4E6EB;
  --bg:          #F6F7F9;
  --night:       linear-gradient(165deg,#08090B 0%,#14161A 52%,#0B0C0E 100%);
  --shadow-sm:   0 1px 2px rgba(8,9,11,.05), 0 4px 14px rgba(8,9,11,.06);
  --shadow-md:   0 2px 4px rgba(8,9,11,.05), 0 18px 44px rgba(8,9,11,.10);
  --shadow-lg:   0 30px 80px rgba(8,9,11,.18);
}
.on-dark{ background:linear-gradient(165deg,#08090B 0%,#14161A 52%,#0B0C0E 100%); }
.sc-r-pillar-art{ background:var(--bg); }

/* ═══════════════════════════════════════════════════════════
   ECARTS RELEVES EN COMPARAISON DIRECTE            2026-08-26
   -----------------------------------------------------------
   Constats faits en posant les deux heros cote a cote au meme
   format, et non plus au jugé.
   ══════════════════════════════════════════════════════════ */

/* 1. le hero faisait 100vh : il fait desormais la hauteur de son
      contenu, comme la reference. La bande suivante entre dans l'ecran. */
.sc-hero{
  min-height:0;
  padding-top:clamp(120px,11vw,150px);
  padding-bottom:clamp(60px,7vw,92px);
  display:block;
}
.sc-hero-inner{ padding:0; gap:clamp(40px,5vw,64px); align-items:center; }

/* 2. hierarchie du H1 : les deux premieres lignes portent le titre,
      la troisieme devient un sous-titre, plus petit et plus clair. */
.sc-hero-h1{ font-size:clamp(2.3rem,4.2vw,3.4rem); letter-spacing:-.035em; line-height:1.04; }
.sc-hero-h1 em{
  display:block; margin-top:.35em;
  font-size:.46em; font-weight:500; line-height:1.3;
  letter-spacing:-.02em; color:var(--text-muted);
}
.sc-hero-content{ max-width:46ch; }
.sc-hero-sub{ font-size:1.02rem; line-height:1.65; max-width:46ch; }

/* 3. le fond : on retire le lavis bleu qui salissait, la texture de
      points devient franche, comme chez eux. */
.sc-hero::after{ display:none; }
.sc-hero::before{
  background-image:radial-gradient(rgba(8,9,11,.13) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(88% 68% at 50% 0%,#000 0%,transparent 72%);
          mask-image:radial-gradient(88% 68% at 50% 0%,#000 0%,transparent 72%);
}

/* 4. le panneau produit : barre de fenetre, ombre profonde, et il
      deborde legerement pour cesser de faire « image posee ». */
.sc-hero-visual{ position:relative; }
.sc-viz{ box-shadow:0 40px 90px rgba(8,9,11,.20), 0 0 0 1px var(--border); }
.sc-r-vizbar{
  display:flex; align-items:center; gap:7px;
  padding:12px 16px; background:var(--bg);
  border:1px solid var(--border); border-bottom:0;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.sc-r-vizbar i{ width:9px; height:9px; border-radius:50%; background:var(--border); display:block; }
.sc-r-vizbar span{
  margin-left:8px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted);
}
.sc-r-vizwrap{ position:relative; }
.sc-r-vizwrap .sc-viz{ border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.sc-r-vizflag{
  position:absolute; left:-18px; bottom:38px; z-index:2;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px 9px 10px; border-radius:var(--radius-pill);
  background:var(--white); border:1px solid var(--border);
  box-shadow:var(--shadow-md); font-size:.86rem; font-weight:500; color:var(--text);
}
.sc-r-vizflag b{
  width:22px; height:22px; border-radius:50%; background:var(--green);
  color:#fff; display:grid; place-items:center; font-size:11px; font-weight:600;
}

/* 5. bande outils : une icone devant chaque item, comme la reference */
.sc-r-strip-it{ display:inline-flex; align-items:center; gap:9px; }
.sc-r-strip-it svg{ width:17px; height:17px; color:var(--text-muted); flex:none; }

/* 6. logo : anneau plus discret, nom en casse normale et resserre */
.sc-logo-name{ letter-spacing:-.02em; font-size:16px; text-transform:none; }
.sc-header .sc-logo-link svg{ width:30px; height:30px; }
/* le panneau occupe sa colonne, comme dans la reference */
@media (min-width:1000px){
  .sc-hero-inner{ grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); }
}
.sc-hero-visual{ width:100%; }
.sc-r-vizwrap{ width:100%; }

/* ═══════════════════════════════════════════════════════════
   MOBILE · reaffirme APRES les ajouts de la refonte
   -----------------------------------------------------------
   Mes regles de refonte, ajoutees en fin de feuille, ecrasaient
   les media queries d'origine : la nav restait affichee et
   debordait, le burger disparaissait. On les repose ici, et le
   visuel du hero est rendu au mobile (la reference le garde).
   ══════════════════════════════════════════════════════════ */
@media (max-width: 960px){
  .sc-nav{ display:none !important; }
  .sc-burger{ display:inline-flex !important; align-items:center; justify-content:center; }
  .sc-header-cta{ margin-left:auto; gap:10px; }
  .sc-header-cta .btn{ padding:10px 16px; font-size:.85rem; }

  /* le panneau produit reste visible, comme dans la reference */
  .sc-hero-visual{ display:block !important; }
  .sc-hero-inner{ grid-template-columns:1fr; gap:34px; }
  .sc-hero{ padding-top:clamp(96px,22vw,120px); }
  .sc-hero-content{ max-width:none; }

  /* boutons : pleine largeur mais compacts */
  .sc-hero-cta{ flex-direction:column; align-items:stretch; gap:10px; }
  .sc-hero-cta .btn{ width:100%; padding:14px 20px; font-size:.95rem; }

  .sc-r-herometa{ gap:8px 18px; margin-top:22px; font-size:.82rem; }
  .sc-r-vizflag{ left:8px; bottom:22px; font-size:.78rem; padding:7px 13px 7px 8px; }
  .sc-r-vizbar span{ font-size:9.5px; }
}
@media (max-width: 560px){
  .sc-r-strip-in{ gap:12px 20px; }
  .sc-r-strip-lb{ width:100%; text-align:center; }
}
/* la reference garde son bouton d'action a cote du burger en mobile */
@media (max-width: 960px){
  .sc-header-cta .btn{ display:inline-flex !important; }
}
@media (max-width: 420px){
  .sc-header-cta .btn{ padding:9px 13px; font-size:.8rem; }
  .sc-logo-name{ font-size:14px; }
}

/* -- tarifs : alignement horizontal entre colonnes ---------------------
   Le badge, « A partir de » et la mention de periode n'existaient que
   dans certaines cartes : chaque absence decalait toute la colonne.
   On reserve leur emplacement partout, meme vide.                     */
.sc-plan-badge.is-empty,
.sc-r-plan-from.is-empty,
.sc-r-plan-period.is-empty{ visibility:hidden; }
.sc-plan-badge{ min-height:26px; align-items:center; }
.sc-r-plan-target{ min-height:2.9em; }
.sc-r-plan-from,.sc-r-plan-period{ display:block; min-height:1.25em; }
.sc-r-plan-price{ min-height:1.15em; }
.sc-r-plan h3{ min-height:1.4em; }
@media (max-width:760px){
  .sc-plan-badge.is-empty,
  .sc-r-plan-from.is-empty,
  .sc-r-plan-period.is-empty{ display:none; }
  .sc-r-plan-target{ min-height:0; }
  .sc-r-plan h3{ min-height:0; }
}
/* alignement au pixel : la compensation de padding sur la carte
   recommandee n'a plus lieu d'etre depuis que le badge est reserve
   partout, et les emplacements passent en hauteurs fixes.          */
.sc-r-plan.is-featured{ padding-top:clamp(26px,3vw,34px); }
.sc-plan-badge{ height:26px; box-sizing:border-box; margin-bottom:10px; }
.sc-r-plan h3{ min-height:26px; }
.sc-r-plan-target{ min-height:46px; }
.sc-r-plan-from,.sc-r-plan-period{ min-height:19px; }
.sc-r-plan-price{ min-height:44px; display:flex; align-items:flex-end; }

/* -- heros restes sombres apres la bascule en clair --------------------
   Consequence : le logo et la nav, passes en encre, devenaient
   invisibles sur les 21 pages d'article et les 3 pages legales.      */
.sc-legal-hero{ border-bottom:1px solid var(--border); }
.sc-legal-hero h1,.sc-res-hero h1{ color:var(--text); }
.sc-legal-hero p,.sc-res-hero p{ color:var(--text-muted); }
.sc-legal-breadcrumb,.sc-legal-date{ color:var(--text-muted); }
.sc-legal-breadcrumb a{ color:var(--text-muted); }
.sc-legal-breadcrumb a:hover{ color:var(--green); }
.sc-res-title{ color:var(--text); }
/* le logo garde son rendu en capitales, mais le DOM porte la forme
   canonique « SustainCarbon » : les moteurs et les LLM lisent le nom
   exact, sans variante flottante. */
.sc-logo-name{ text-transform:uppercase; letter-spacing:.02em; }

/* -- tres petits ecrans : le burger doit rester dans l ecran -----------
   A 320 px, le logo, le bouton CTA et le burger ne tiennent pas sur une
   ligne : le burger sortait a x=375, donc hors ecran et incliquable.
   Sous 400 px, le CTA cede sa place, il reste accessible dans le menu. */
@media (max-width:400px){
  .sc-header-cta .btn{ display:none !important; }
  .sc-header-inner{ padding:8px 8px 8px 12px; gap:10px; }
  .sc-logo-name{ font-size:14px; }
  .sc-logo-link svg{ width:26px !important; height:26px !important; }
}
/* garde-fou general : aucune grille ne depasse sa colonne */
.sc-articles-grid,.sc-r-posts,.sc-r-plans,.sc-r-pillars{ min-width:0; }
.sc-articles-grid > *,.sc-r-posts > *,.sc-r-plans > *,.sc-r-pillars > *{ min-width:0; }
/* contact : une URL insecable (linkedin.com/company/...) imposait sa
   largeur a toute la colonne. min-width:0 libere la grille, et la
   coupure de mot evite le debordement sur les tres petits ecrans.   */
.sc-contact-grid > *{ min-width:0; }
.sc-contact-info,.sc-contact-items,.sc-contact-item{ min-width:0; }
.sc-contact-item-value,.sc-contact-item-value a{ overflow-wrap:anywhere; word-break:break-word; }

/* -- carte claire posee sur un bloc d'encre ----------------------------
   Le motif de la reference : la section est sombre, la carte reste
   blanche. Son contenu ne doit donc PAS heriter du texte clair.      */
.on-dark .sc-diff-card,
.on-dark .sc-value-card,
.on-dark .sc-service-card,
.on-dark .sc-feat-card,
.on-dark .sc-method-card,
.on-dark .sc-r-plan,
.on-dark .sc-r-post{ background:var(--white); border-color:var(--border); }
.on-dark .sc-diff-card *,
.on-dark .sc-value-card *,
.on-dark .sc-service-card *,
.on-dark .sc-feat-card *,
.on-dark .sc-method-card *,
.on-dark .sc-r-plan *,
.on-dark .sc-r-post *{ color:var(--text); }
.on-dark .sc-diff-desc,
.on-dark .sc-value-desc,
.on-dark .sc-service-desc,
.on-dark .sc-feat-card p,
.on-dark .sc-method-card p{ color:var(--text-muted) !important; }

/* ═══════════════════════════════════════════════════════════
   FORMULAIRE DE CONTACT natif (remplace l'embed Tally)
   ══════════════════════════════════════════════════════════ */
.sc-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.sc-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; min-width:0; }
.sc-field-row{ display:grid; gap:18px; }
@media (min-width:620px){ .sc-field-row{ grid-template-columns:1fr 1fr; } }
.sc-form-label{ font-size:13px; font-weight:500; color:var(--text); }
.sc-form-label span{ color:var(--text-muted); font-weight:400; }
.sc-field input,.sc-field select,.sc-field textarea{
  width:100%; box-sizing:border-box;
  font-family:inherit; font-size:15px; color:var(--text);
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 14px;
  transition:border-color .2s var(--ease-rs), box-shadow .2s var(--ease-rs);
}
.sc-field textarea{ resize:vertical; min-height:120px; }
.sc-field input:focus,.sc-field select:focus,.sc-field textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--blue-wash);
}
.sc-consent{ display:flex; gap:11px; align-items:flex-start; margin:6px 0 22px; cursor:pointer; }
.sc-consent input{ margin-top:3px; flex:none; accent-color:var(--green); width:16px; height:16px; }
.sc-consent span{ font-size:13.5px; line-height:1.55; color:var(--text-muted); }
.sc-form-error{
  background:#FDECEC; border:1px solid #F3C2C2; color:#8B1E1E;
  border-radius:var(--radius-sm); padding:12px 16px; font-size:14px; margin-bottom:20px;
}
.sc-form-done{ text-align:center; padding:clamp(20px,4vw,40px) 0; }
.sc-form-done-mark{
  width:56px; height:56px; border-radius:50%; margin:0 auto 22px;
  background:var(--blue-wash); color:var(--green); display:grid; place-items:center;
}
.sc-form-done-mark svg{ width:26px; height:26px; }
.sc-form-done h3{ font-size:1.3rem; margin-bottom:10px; }
.sc-form-done p{ color:var(--text-muted); max-width:44ch; margin:0 auto 24px; }

/* -- pastille d'icone : carre a bords ronds, legere rotation ------------
   Au repos l'icone est legerement inclinee, elle se redresse au survol
   de la carte. Detail discret, mais il donne de la vie a la grille.   */
.sc-r-ico{
  display:inline-grid; place-items:center;
  width:46px; height:46px; margin-bottom:18px;
  border-radius:14px;
  background:#E7EEFF; border:1px solid #D4E0FA; color:var(--green);
  box-shadow:0 2px 6px rgba(15,82,217,.08);
  transform:rotate(-5deg);
  transition:transform .45s var(--ease-rs), background-color .45s var(--ease-rs), color .45s var(--ease-rs);
}
.sc-r-ico svg{ width:22px; height:22px; }
.sc-r-pillar:hover .sc-r-ico{
  transform:rotate(0deg) scale(1.06);
  background:var(--green); border-color:var(--green); color:#fff;
  box-shadow:0 8px 18px rgba(15,82,217,.28);
}
@media (prefers-reduced-motion: reduce){
  .sc-r-ico,.sc-r-pillar:hover .sc-r-ico{ transform:none; transition:none; }
}
.sc-r-pillar.is-hover .sc-r-ico{ transform:rotate(0deg) scale(1.06); background:var(--green); color:#fff; }

/* ═══════════════════════════════════════════════════════════
   ONGLET FLOTTANT · diagnostic carbone
   -----------------------------------------------------------
   Bord gauche, centre verticalement, pour ne pas percuter le
   bouton WhatsApp qui occupe le coin bas droit.
   ══════════════════════════════════════════════════════════ */
.sc-diag-fab{
  position:fixed; left:0; top:50%; z-index:9998;
  transform:translateY(-50%) translateX(-4px);
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 18px 13px 16px;
  background:var(--green); color:#fff; text-decoration:none;
  border-radius:0 999px 999px 0;
  font-size:.9rem; font-weight:500; letter-spacing:-.01em; white-space:nowrap;
  box-shadow:0 10px 30px rgba(15,82,217,.32);
  transition:transform .35s var(--ease-rs), box-shadow .35s var(--ease-rs), background-color .35s var(--ease-rs);
}
.sc-diag-fab svg{ width:18px; height:18px; flex:none; }
.sc-diag-fab:hover{
  transform:translateY(-50%) translateX(0);
  background:var(--green-hover);
  box-shadow:0 14px 36px rgba(15,82,217,.42);
}
.sc-diag-fab:focus-visible{ outline:3px solid var(--blue-bright); outline-offset:3px; }
/* sous 900 px, l'onglet ne garde que son icone pour ne pas manger l'ecran */
@media (max-width:900px){
  .sc-diag-fab{ padding:12px; border-radius:0 14px 14px 0; }
  .sc-diag-fab span{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .sc-diag-fab,.sc-diag-fab:hover{ transform:translateY(-50%); transition:none; }
}

/* -- bande diagnostic sur l'accueil ------------------------------------- */
.sc-diag-band{ background:var(--bg); border-block:1px solid var(--border); padding:clamp(44px,5vw,68px) 0; }
.sc-diag-band-in{ display:grid; gap:clamp(24px,3vw,44px); align-items:center; }
@media (min-width:900px){ .sc-diag-band-in{ grid-template-columns:1.25fr auto; } }
.sc-diag-band .section-title{ font-size:clamp(24px,3vw,34px); margin-bottom:10px; }
.sc-diag-band .section-sub{ font-size:16px; max-width:56ch; }
.sc-diag-band-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
@media (min-width:900px){ .sc-diag-band-cta{ align-items:flex-end; } }
.sc-diag-band-note{ font-size:.84rem; color:var(--text-muted); }

/* -- mobile : pas de bouton flottant -----------------------------------
   Un element colle au bord gauche interfere avec le geste de retour
   arriere sur iOS, et encombre un ecran deja occupe par le bouton
   WhatsApp. Il cede la place a une feuille differee.                  */
@media (max-width:899px){
  .sc-diag-fab{ display:none !important; }
}

/* -- feuille differee, mobile uniquement -------------------------------- */
.sc-diag-pop{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:9997;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:0 -6px 40px rgba(8,9,11,.22);
  padding:22px 20px 20px;
  transform:translateY(120%); opacity:0;
  transition:transform .38s var(--ease-rs), opacity .38s var(--ease-rs);
}
.sc-diag-pop.is-on{ transform:translateY(0); opacity:1; }
.sc-diag-pop-x{
  position:absolute; top:8px; right:10px;
  width:34px; height:34px; border:0; background:transparent;
  font-size:26px; line-height:1; color:var(--text-muted); cursor:pointer;
}
.sc-diag-pop-k{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.17em;
  color:var(--text-muted); margin:0 0 8px;
}
.sc-diag-pop h3{ font-size:1.12rem; margin:0 0 6px; }
.sc-diag-pop-s{ font-size:.9rem; color:var(--text-muted); margin:0 0 16px; }
@media (min-width:900px){ .sc-diag-pop{ display:none !important; } }
@media (prefers-reduced-motion: reduce){
  .sc-diag-pop{ transition:none; transform:none; }
}
/* le bouton WhatsApp chevauchait le CTA de la feuille : il s'efface
   tant qu'elle est ouverte, et revient des qu'on la ferme. */
@media (max-width:899px){
  .sc-whatsapp-fab{ transition:opacity .3s var(--ease-rs), transform .3s var(--ease-rs); }
  .sc-diag-pop.is-on ~ .sc-whatsapp-fab{
    opacity:0; transform:scale(.8); pointer-events:none;
  }
}

/* Bouton « Estimer mon coût MACF » de la section MACF (accueil) */
.sc-macf-calc { margin-top: 12px; color: #fff; }

/* ── Film de présentation (accueil) ────────────────────────────────
   Vidéo muette en boucle : aucune commande, elle ne démarre qu'une fois visible
   (assets/js/site.js) et se met en pause quand elle sort de l'écran. */
.sc-film-cadre { margin: 40px 0 0; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--dark); }
.sc-film-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  .sc-film-video { display: none; }
  .sc-film-cadre { aspect-ratio: 16 / 9; background: var(--dark) center / cover no-repeat
    url('/assets/video/sustaincarbon-site-16x9-poster.jpg'); }
}

/* ---- 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(15,82,217,.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(15,82,217,.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(15,82,217,.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(15,82,217,.14);border-radius:14px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.52),0 0 0 1px rgba(15,82,217,.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(15,82,217,.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(220px,1fr));gap:20px;margin-top:56px;}
  .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(15,82,217,.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(15,82,217,.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(auto-fit,minmax(260px,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(15,82,217,.12);border:1px solid rgba(15,82,217,.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(320px,100%),1fr));gap:28px; }
    .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:#0A0A0B;aspect-ratio:1200/630;overflow:hidden; }
    .sc-article-card-top img { display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease; }
    .sc-article-card:hover .sc-article-card-top img { transform:scale(1.03); }
    .sc-article-card-title { font-family:'Geist',sans-serif;font-size:17px;font-weight:600;color:var(--dark);line-height:1.3;margin:0 0 10px; }
    .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 { flex:0 0 52%;align-self:center; }
    @media(max-width:700px){.sc-article-card.featured .sc-article-card-top{flex:none;align-self:stretch}.sc-article-card.featured .sc-article-card-body{padding:22px 24px 26px}.sc-article-card.featured .sc-article-card-title{font-size:20px}}
    .sc-article-card.featured .sc-article-card-title{font-size:24px}
    .sc-article-card.featured .sc-article-card-body{justify-content:center;padding:36px 40px}
    .sc-article-card.featured .sc-article-card-desc{font-size:15px}
    .sc-res-hero { background:var(--white);padding:100px 0 72px;border-bottom:1px solid var(--border); }
    .sc-res-breadcrumb { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);margin-bottom:28px; }
    .sc-res-breadcrumb a { color:var(--green); }
    .sc-res-breadcrumb span { color:rgba(255,255,255,.25); }
    .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(15,82,217,.12);border:1px solid rgba(15,82,217,.2);color:var(--green); }
    .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:var(--text-muted); }
    .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; }
    @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:#2C4038;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:#2C4038;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(15,82,217,.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(15,82,217,.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); }
    /* Tableaux issus du Markdown (Parsedown sort un <table> nu) : meme rendu que
       .sc-sectors-table, sinon colonnes collees et aucun filet. Defilement
       horizontal sur mobile plutot qu'un debordement de la page. */
    .sc-article table:not([class]) { width:100%;border-collapse:collapse;margin:24px 0;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm); }
    /* Mobile seulement : en display:block le tableau se retracte a son contenu,
       ce qui laisse un bandeau d'en-tete tronque sur grand ecran. */
    @media (max-width:700px) { .sc-article table:not([class]) { display:block;overflow-x:auto; } }
    .sc-article table:not([class]) 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;text-align:left;padding:12px 18px;white-space:nowrap; }
    .sc-article table:not([class]) td { padding:13px 18px;font-size:14px;color:var(--text);border-bottom:1px solid var(--border);background:var(--white);vertical-align:top; }
    .sc-article table:not([class]) tr:last-child td { border-bottom:none; }
    /* Bloc « recevoir le guide » : le seul bloc sombre de l'article. */
    .sc-guide { margin:64px 0 8px;padding:36px;border-radius:var(--radius-lg);background:var(--dark);display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:start; }
    .sc-guide-kicker { font-family:'Geist Mono','DM Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5B95FF;margin:0 0 12px; }
    .sc-article .sc-guide h2 { color:#fff;margin:0 0 12px;padding:0;border:0; }
    .sc-article .sc-guide-intro p { color:rgba(255,255,255,.72); }
    .sc-guide .sc-form-card { margin:0; }
    @media (max-width:860px) { .sc-guide { grid-template-columns:1fr;padding:24px;gap:20px; } }
    .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(15,82,217,.12);color:var(--green-dark); }
    .sc-res-stats { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:28px 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(150px,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-h2{color:var(--text)}
.acp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,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(220px,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}
.sc-footer-marque{display:flex;align-items:center;gap:12px}
.sc-footer-adresse{color:rgba(255,255,255,.6)}
.rma-mb0{margin-bottom:0}
.sc-legal-body table{width:100%;border-collapse:collapse;font-size:14px;margin-top:16px}
.sc-legal-body thead tr{background:var(--bg-alt);border-bottom:1px solid var(--border)}
.sc-legal-body th{text-align:left;padding:10px 12px;font-weight:600;color:var(--dark)}
.sc-legal-body tbody tr{border-bottom:1px solid var(--border)}
.sc-legal-body td{padding:10px 12px;color:var(--text-muted)}
.sc-legal-body td:first-child{font-family:'DM Sans','Geist',sans-serif}