/* ============================================================
   Saper Vedere - Pages internes - CSS partagée
   Cohérence avec homepage-variations/02-bento-grid.html
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --sv-celestial: #47A1DA;
  --sv-marian: #3769B1;
  --sv-aero: #49C1EE;
  --sv-verdigris: #6DC2B8;
  --sv-blue-deep: #2C6E8F;
  --sv-raspberry: #B4455C;
  --sv-gunmetal: #1C2732;
  --sv-charcoal: #2C3D4E;
  --sv-mist: #F4F6F8;
  --sv-ink: #1c2732;
  --sv-rule: rgba(15, 26, 36, 0.08);

  --grad-see: linear-gradient(135deg, #47A1DA 0%, #3769B1 100%);
  --grad-know: linear-gradient(135deg, #6DC2B8 0%, #49C1EE 100%);
  --grad-agir: linear-gradient(135deg, #B7E0E8 0%, #B1D0E8 50%, #86A0CF 100%);

  --shadow-1: 0 1px 2px rgba(15,26,36,.05);
  --shadow-2: 0 6px 20px rgba(15,26,36,.08);
  --shadow-3: 0 20px 50px rgba(15,26,36,.14);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Lato', 'Avenir Next', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--sv-ink);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4 {
  font-family: 'Avenir Next', 'Lato', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--sv-gunmetal);
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.1rem; font-weight: 700; }

p { color: var(--sv-charcoal); font-size: 1.05rem; }
a { color: var(--sv-celestial); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----------------- Header ------------------ */
.sv-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--sv-rule);
}
.sv-header__inner {
  max-width: 1440px; margin: 0 auto;
  padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.sv-logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sv-logo img { height: 82px !important; width: auto; display: block; max-width: none; }
@media (max-width: 1200px) { .sv-logo img { height: 68px !important; } }
@media (max-width: 1024px) { .sv-logo img { height: 58px !important; } }
@media (max-width: 640px)  { .sv-logo img { height: 46px !important; } }

.sv-nav { display: flex; gap: 10px; align-items: center; }
.sv-nav > .sv-nav-item > a,
.sv-nav > .sv-nav-item > a.sv-has-dropdown {
  color: var(--sv-gunmetal); font-weight: 600; font-size: 0.92rem;
  padding: 9px 16px; position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  transition: background .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, color .2s ease;
}
.sv-nav > .sv-nav-item:hover > a,
.sv-nav > .sv-nav-item:focus-within > a {
  background: #fff;
  border-color: rgba(26,43,69,.08);
  box-shadow: 0 4px 14px -4px rgba(26,43,69,.14), 0 1px 3px rgba(26,43,69,.05);
  color: var(--sv-celestial);
  text-decoration: none;
}
.sv-nav a.is-active,
.sv-nav a.active {
  background: #fff;
  border-color: rgba(71,161,218,.25);
  color: var(--sv-celestial);
  box-shadow: 0 4px 14px -4px rgba(71,161,218,.2);
}

/* Nav dropdowns (harmonisé avec homepage) */
.sv-nav-item { position: relative; }
.sv-has-dropdown::after { display: none; }
.sv-chev {
  width: 11px; height: 11px; flex-shrink: 0;
  opacity: .5; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.sv-nav-item:hover .sv-chev,
.sv-nav-item:focus-within .sv-chev { transform: rotate(180deg); opacity: 1; }

/* Navicons SV — pictogrammes uniques par item menu, gradient "COMPRENDRE" */
.sv-navicon {
  width: 16px; height: 16px; flex-shrink: 0;
  opacity: .85;
  stroke: url(#sv-navicon-grad);
  color: #3769B1; /* fallback si gradient pas supporté */
  transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.sv-nav-item:hover .sv-navicon,
.sv-nav-item:focus-within .sv-navicon { opacity: 1; }
.sv-nav-item:hover .sv-navicon--agence { transform: translateY(-1px) scale(1.08); }
.sv-nav-item:hover .sv-navicon--expertises { transform: rotate(-6deg) scale(1.1); }
.sv-nav-item:hover .sv-navicon--methodes { transform: rotate(12deg) scale(1.08); }
.sv-nav-item:hover .sv-navicon--projets { transform: scale(1.12); }
.sv-nav-item:hover .sv-navicon--contact { transform: translateY(-1px) scale(1.1); }
.sv-nav-dropdown {
  position: absolute; top: 100%; left: -16px;
  background: #fff;
  border: 1px solid var(--sv-rule);
  border-radius: 14px;
  box-shadow: 0 28px 56px -14px rgba(26, 43, 69, 0.22), 0 0 0 1px rgba(26, 43, 69, 0.05);
  padding: 12px; margin-top: 12px;
  min-width: 260px;
  opacity: 0; pointer-events: none;
  transform: translateY(-10px) scale(.98);
  transform-origin: top left;
  transition: opacity .24s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1);
  z-index: 60;
  display: flex; flex-direction: column;
}
.sv-nav-dropdown::before {
  content:''; position:absolute; top:-5px; left:32px; width:10px; height:10px;
  background:#fff; border-left:1px solid var(--sv-rule); border-top:1px solid var(--sv-rule);
  transform: rotate(45deg);
}
.sv-nav-item:hover .sv-nav-dropdown,
.sv-nav-item:focus-within .sv-nav-dropdown {
  opacity: 1; pointer-events: auto; transform: translateY(0) scale(1);
}
.sv-nav-dropdown a {
  display: block; padding: 9px 14px; border-radius: 8px;
  color: var(--sv-charcoal); font-size: .88rem; font-weight: 500;
  transition: background .2s ease, color .2s ease, transform .2s ease, padding-left .2s ease;
}
.sv-nav-dropdown a:hover {
  background: rgba(71, 161, 218, 0.1);
  color: var(--sv-celestial);
  padding-left: 18px;
}
.sv-nav-dropdown a::after { display: none; }
.sv-nav-sub { opacity: .55; font-weight: 400; font-size: .82em; }

/* Mega-menu for "Nos projets" */
.sv-nav-dropdown--mega {
  flex-direction: row; gap: 6px;
  min-width: 560px;
  left: -80px;
  padding: 16px;
}
.sv-mega-col {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  min-width: 160px;
}
.sv-mega-title {
  display: block; padding: 4px 12px 8px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--sv-celestial);
  border-bottom: 1px solid rgba(26, 43, 69, .08);
  margin-bottom: 4px;
}

.sv-header__actions { display: flex; gap: 10px; align-items: center; }
.sv-lang { display: flex; gap: 8px; font-size: 0.85rem; font-weight: 600; }
.sv-lang a { color: var(--sv-charcoal); }
.sv-lang a.active { color: var(--sv-celestial); }

/* Lang toggle single-button */
.sv-langbtn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem;
  border: 1px solid rgba(26, 43, 69, .1);
  background: rgba(26, 43, 69, .05);
  border-radius: 999px;
  font-weight: 600; font-size: .78rem;
  color: var(--sv-charcoal); cursor: pointer;
  transition: all .2s ease;
  margin-left: .25rem;
  font-family: inherit;
}
.sv-langbtn:hover {
  background: #fff;
  border-color: var(--sv-celestial);
  color: var(--sv-celestial);
  box-shadow: 0 2px 8px rgba(26, 43, 69, .1);
}
.sv-flag {
  width: 20px; height: 14px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(26, 43, 69, .12);
  flex-shrink: 0; display: block; overflow: hidden;
}

/* Pills (Follaw / RepLab) dans le header interne */
.sv-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--sv-rule);
  font-size: .9rem; font-weight: 600;
  color: var(--sv-charcoal);
  min-height: 40px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.sv-pill img {
  height: 22px; width: auto; max-width: 160px; object-fit: contain; display: block;
}
.sv-pill .sv-pill-sym { height: 26px; width: 26px; }
.sv-pill:hover {
  transform: translateY(-2px);
  border-color: var(--sv-celestial);
  box-shadow: 0 8px 16px rgba(71, 161, 218, .18);
  text-decoration: none;
}

/* Lien WTTJ dans dropdown — logo + label */
.sv-wttj-link {
  display: flex !important; align-items: center; gap: .55rem;
}
.sv-wttj-link img { height: 24px; width: auto; flex-shrink: 0; border-radius: 3px; }

/* Responsive : sur mobile, masquer dropdowns + pills, garder lang toggle */
@media (max-width: 1024px) {
  .sv-nav { display: none; }
  .sv-header__actions .sv-pill { display: none; }
}

.sv-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em;
  transition: all .3s; border: 1.5px solid transparent;
  cursor: pointer;
}
.sv-btn--primary { background: var(--sv-gunmetal); color:#fff; }
.sv-btn--primary:hover { background: var(--sv-celestial); text-decoration:none; }
.sv-btn--ghost { background: transparent; color: var(--sv-gunmetal); border-color: var(--sv-rule); }
.sv-btn--ghost:hover { border-color: var(--sv-celestial); color: var(--sv-celestial); text-decoration:none; }
.sv-btn--light { background: #fff; color: var(--sv-gunmetal); border-color: var(--sv-rule); }
.sv-btn--light:hover { background: var(--sv-gunmetal); color: #fff; text-decoration:none; }

/* ----------------- Breadcrumb ------------------ */
.sv-breadcrumb {
  max-width: 1440px; margin: 0 auto;
  padding: 20px 32px 0;
  font-size: 0.85rem; color: var(--sv-charcoal);
}
.sv-breadcrumb a { color: var(--sv-charcoal); }
.sv-breadcrumb a:hover { color: var(--sv-celestial); }
.sv-breadcrumb span.sep { margin: 0 8px; opacity: 0.5; }
.sv-breadcrumb span.current { color: var(--sv-gunmetal); font-weight: 600; }

/* ----------------- Hero (Nuit Profonde) ------------------ */
.sv-hero {
  max-width: 1440px; margin: 24px auto 56px;
  padding: 56px 48px;
  display: grid; grid-template-columns: 1fr auto; gap: 60px;
  align-items: end;
  background: linear-gradient(135deg, #0D1920 0%, #13242C 45%, #1E323D 100%);
  border: 1px solid #3A5261;
  border-radius: 22px;
}
.sv-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 18px;
}
.sv-hero h1 { margin-bottom: 20px; color: #fff; }
.sv-hero__intro {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  color: #C3D3E4; max-width: 760px; line-height: 1.55;
}
.sv-hero__stats {
  display: flex; flex-direction: column; gap: 18px;
  border-left: 1px solid rgba(255,255,255,.18); padding-left: 30px;
}
.sv-hero__stat-num {
  font-family: 'Avenir Next', sans-serif;
  font-size: 2.2rem; font-weight: 800; line-height: 1;
  color: #69B1F0;
}
.sv-hero__stat-label { font-size: 0.8rem; color: #A7BBD2; text-transform: uppercase; letter-spacing: 0.08em; }

@media (max-width: 900px) {
  .sv-hero { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px; }
  .sv-hero__stats { flex-direction: row; flex-wrap: wrap; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding-left: 0; padding-top: 20px; gap: 28px; }
}

/* ----------------- Sections ------------------ */
.sv-section {
  max-width: 1440px; margin: 0 auto;
  padding: 72px 32px;
}
.sv-section--muted { background: var(--sv-mist); max-width: none; padding-left: 0; padding-right: 0; }
.sv-section--muted > .sv-wrap { max-width: 1440px; margin: 0 auto; padding: 72px 32px; }

.sv-section__head {
  display: flex; justify-content: space-between; align-items: end; gap: 40px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--sv-rule);
  padding-bottom: 22px;
}
.sv-section__head h2 { margin: 0; }
.sv-section__tag { font-size: 0.72rem; font-weight: 700; color: var(--sv-celestial); text-transform: uppercase; letter-spacing: 0.12em; }

/* ----------------- 2-col text block ------------------ */
.sv-prose {
  display: grid; grid-template-columns: 1fr 2fr; gap: 64px;
  margin: 48px 0;
}
.sv-prose h3 { margin-bottom: 12px; }
.sv-prose__side { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sv-celestial); font-weight: 700; }
.sv-prose p + p { margin-top: 18px; }

@media (max-width: 780px) {
  .sv-prose { grid-template-columns: 1fr; gap: 16px; }
}

/* ----------------- Pillars (3 cards) ------------------ */
.sv-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sv-pillar {
  background: #fff; border: 1px solid var(--sv-rule); border-radius: 20px;
  padding: 32px 28px; transition: all .3s;
  position: relative; overflow: hidden;
}
.sv-pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: transparent; }
.sv-pillar::before {
  content:''; position:absolute; top:0; left:0; right:0; height: 4px;
  background: var(--grad-see);
}
.sv-pillar--2::before { background: var(--grad-know); }
.sv-pillar--3::before { background: var(--grad-agir); }
.sv-pillar__num {
  font-family: 'Avenir Next', sans-serif; font-weight: 800;
  font-size: 0.8rem; color: var(--sv-celestial);
  margin-bottom: 14px; letter-spacing: 0.08em;
}
.sv-pillar--2 .sv-pillar__num { color: var(--sv-verdigris); }
.sv-pillar--3 .sv-pillar__num { color: var(--sv-blue-deep); }
.sv-pillar h3 { margin-bottom: 14px; }
.sv-pillar p { font-size: 0.98rem; }

@media (max-width: 900px) { .sv-pillars { grid-template-columns: 1fr; } }

/* ----------------- Key points list ------------------ */
.sv-keys { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 48px; margin-top: 36px; }
.sv-key {
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  padding: 20px 0; border-top: 1px solid var(--sv-rule);
}
.sv-key__num {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sv-gunmetal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700;
}
.sv-key h4 { margin-bottom: 6px; }
.sv-key p { font-size: 0.95rem; }

@media (max-width: 780px) { .sv-keys { grid-template-columns: 1fr; } }

/* ----------------- Quote block ------------------ */
.sv-quote {
  background: var(--sv-gunmetal); color: #fff;
  padding: 56px 48px; border-radius: 24px;
  margin: 48px 0;
  position: relative; overflow: hidden;
}
.sv-quote::before {
  content: '"'; position: absolute; top: -30px; left: 20px;
  font-size: 16rem; line-height: 1;
  font-family: 'Avenir Next', serif; font-weight: 800;
  color: var(--sv-celestial); opacity: 0.2;
}
.sv-quote__text {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 300; line-height: 1.45;
  position: relative; z-index: 2;
  max-width: 820px;
  color: #fff;
}
.sv-quote::before { opacity: 0.12; }
.sv-quote__author { margin-top: 24px; font-size: 0.9rem; color: var(--sv-aero); font-weight: 600; letter-spacing: 0.02em; }

/* ----------------- CTA ------------------ */
.sv-cta {
  max-width: 1440px; margin: 80px auto; padding: 0 32px;
}
.sv-cta__inner {
  background: linear-gradient(135deg, var(--sv-gunmetal) 0%, var(--sv-charcoal) 100%);
  color: #fff; border-radius: 28px;
  padding: 64px 56px;
  display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: center;
  position: relative; overflow: hidden;
}
.sv-cta__inner::after {
  content: ''; position: absolute; top: -50%; right: -10%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(71,161,218,.25) 0%, transparent 70%);
}
.sv-cta h2 { color: #fff; margin-bottom: 14px; position: relative; z-index: 2; }
.sv-cta p { color: rgba(255,255,255,.78); font-size: 1.05rem; position: relative; z-index: 2; }
.sv-cta__actions { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2; }
.sv-cta .sv-btn--primary { background: var(--sv-celestial); }
.sv-cta .sv-btn--primary:hover { background: #fff; color: var(--sv-gunmetal); }
.sv-cta .sv-btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.sv-cta .sv-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }

@media (max-width: 900px) {
  .sv-cta__inner { grid-template-columns: 1fr; padding: 40px 28px; }
  .sv-cta__actions { flex-direction: row; flex-wrap: wrap; }
}

/* ----------------- Footer ------------------ */
.sv-footer {
  background: var(--sv-gunmetal); color: rgba(255,255,255,.8);
  padding: 60px 32px 28px; margin-top: 0;
}
.sv-footer__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
}
.sv-footer h4 {
  color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 18px; font-weight: 700;
}
.sv-footer a { color: rgba(255,255,255,.72); font-size: 0.92rem; display: block; padding: 4px 0; }
.sv-footer a:hover { color: var(--sv-aero); text-decoration: none; }
.sv-footer__brand p { color: rgba(255,255,255,.6); font-size: 0.9rem; margin-top: 12px; max-width: 360px; }
.sv-footer__bottom {
  max-width: 1440px; margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 20px;
  font-size: 0.8rem; color: rgba(255,255,255,.5); flex-wrap: wrap;
}
.sv-footer__bottom a { display: inline; color: rgba(255,255,255,.6); }

@media (max-width: 900px) {
  .sv-footer__inner { grid-template-columns: 1fr 1fr; }
}

/* ----------------- Reveal animations ------------------ */
.sv-reveal { opacity: 1; transform: translateY(0); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.85,.2,1); }
.js-enabled .sv-reveal { opacity: 0; transform: translateY(24px); }
.js-enabled .sv-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ----------------- FAQ accordion ------------------ */
.sv-faq {
  max-width: 880px; margin: 40px auto 0;
  display: flex; flex-direction: column; gap: 12px;
}
.sv-faq__item {
  border: 1px solid rgba(44, 61, 78, 0.12);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sv-faq__item:hover { border-color: rgba(71, 161, 218, 0.35); }
.sv-faq__item[open] {
  border-color: var(--sv-aero);
  box-shadow: 0 6px 24px rgba(44, 61, 78, .06);
}
.sv-faq__item summary {
  list-style: none; cursor: pointer;
  padding: 20px 56px 20px 24px;
  font-weight: 700; color: var(--sv-charcoal);
  font-size: 1.02rem; line-height: 1.4;
  position: relative;
  font-family: 'Lato', sans-serif;
}
.sv-faq__item summary::-webkit-details-marker { display: none; }
.sv-faq__item summary::after {
  content: "+"; position: absolute;
  right: 22px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sv-aero); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 300;
  transition: transform .25s ease, background .2s ease;
}
.sv-faq__item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  background: var(--sv-raspberry);
}
.sv-faq__answer {
  padding: 0 24px 24px; color: #4a5b6c;
  line-height: 1.7; font-size: 0.96rem;
}
.sv-faq__answer p { margin: 0 0 12px; }
.sv-faq__answer p:last-child { margin-bottom: 0; }

/* ----------------- Stats grid ------------------ */
.sv-stats-grid {
  max-width: 1200px; margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
}
.sv-stats-grid__item {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  border-left: 4px solid var(--sv-aero);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sv-stats-grid__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(44, 61, 78, .08);
}
.sv-stats-grid__item:nth-child(4n+2) { border-left-color: var(--sv-verdigris); }
.sv-stats-grid__item:nth-child(4n+3) { border-left-color: var(--sv-blue-deep); }
.sv-stats-grid__item:nth-child(4n+4) { border-left-color: var(--sv-raspberry); }
.sv-stats-grid__val {
  font-size: 2.4rem; font-weight: 900; line-height: 1;
  color: var(--sv-charcoal); margin-bottom: 10px;
  font-family: 'Lato', sans-serif;
}
.sv-stats-grid__label {
  font-size: 0.98rem; color: #4a5b6c; line-height: 1.5;
  margin-bottom: 6px;
}
.sv-stats-grid__src {
  font-size: 0.78rem; color: #8a98a7;
  font-style: italic; letter-spacing: 0.02em;
}

/* ----------------- Table of contents ------------------ */
.sv-toc {
  background: #f7f9fb;
  border-radius: 14px;
  padding: 24px 28px;
  max-width: 760px;
  margin: 24px auto 40px;
  border-left: 4px solid var(--sv-aero);
}
.sv-toc h3 {
  font-size: 0.95rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--sv-charcoal);
  margin-bottom: 14px;
}
.sv-toc ol {
  list-style-position: inside;
  padding: 0; margin: 0;
  counter-reset: toc;
  list-style: none;
}
.sv-toc li {
  counter-increment: toc;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(44, 61, 78, .08);
}
.sv-toc li:last-child { border-bottom: none; }
.sv-toc li::before {
  content: counter(toc, decimal-leading-zero) " · ";
  color: var(--sv-aero); font-weight: 700;
}
.sv-toc a { color: var(--sv-charcoal); }
.sv-toc a:hover { color: var(--sv-aero); }

/* ----------------- Long prose (legal pages) ------------------ */
.sv-longprose {
  max-width: 760px; margin: 0 auto;
  font-size: 1rem; line-height: 1.75; color: #37485a;
}
.sv-longprose h2 {
  font-size: 1.5rem; margin: 48px 0 18px;
  color: var(--sv-charcoal);
  scroll-margin-top: 100px;
  padding-top: 8px;
  border-top: 1px solid rgba(44, 61, 78, .08);
}
.sv-longprose h2:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.sv-longprose p { margin: 0 0 16px; }
.sv-longprose ul {
  margin: 0 0 20px; padding-left: 20px;
}
.sv-longprose ul li { margin-bottom: 8px; }
.sv-longprose a { color: var(--sv-aero); text-decoration: underline; }

/* ----------------- Newsletter hero ------------------ */
.sv-news-hero {
  background: linear-gradient(135deg, var(--sv-gunmetal) 0%, var(--sv-charcoal) 100%);
  color: #fff;
  padding: 80px 40px;
  border-radius: 20px;
  max-width: 1200px;
  margin: 0 auto 40px;
  text-align: center;
}
.sv-news-hero h1 { color: #fff; margin-bottom: 16px; }
.sv-news-hero p { color: rgba(255,255,255,.8); max-width: 600px; margin: 0 auto 32px; font-size: 1.05rem; }
.sv-news-hero__form {
  display: flex; gap: 8px; max-width: 480px; margin: 0 auto;
  flex-wrap: wrap; justify-content: center;
}
.sv-news-hero__form input[type="email"] {
  flex: 1; min-width: 260px;
  padding: 14px 20px; border-radius: 10px; border: none;
  background: rgba(255,255,255,.1); color: #fff;
  font-size: 0.95rem;
}
.sv-news-hero__form input[type="email"]::placeholder { color: rgba(255,255,255,.5); }
.sv-news-hero__form button {
  padding: 14px 28px; border-radius: 10px; border: none;
  background: var(--sv-aero); color: #fff;
  font-weight: 700; cursor: pointer;
  transition: background .2s ease;
}
.sv-news-hero__form button:hover { background: #3a8cc0; }

@media (max-width: 720px) {
  .sv-faq__item summary { padding: 16px 48px 16px 18px; font-size: 0.98rem; }
  .sv-stats-grid__val { font-size: 2rem; }
  .sv-news-hero { padding: 60px 24px; }
}

/* ================================================================
   BITONIAUX — sidebar verticale flottante droite
   LinkedIn / WTTJ / Follaw / Reputation Lab / Rechercher
   ================================================================ */
.sv-bito {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  z-index: 75;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--sv-gunmetal);
  padding: 8px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(28, 39, 50, 0.25);
}
.sv-bito a {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}
.sv-bito a:hover {
  background: linear-gradient(135deg, var(--sv-aero), var(--sv-verdigris));
  transform: translateX(-3px);
  text-decoration: none;
}
.sv-bito a svg { width: 20px; height: 20px; }
.sv-bito a.sv-bito-img { padding: 4px; }
.sv-bito a.sv-bito-img svg,
.sv-bito a.sv-bito-img img {
  width: 28px; height: 28px;
  object-fit: cover; object-position: center;
  border-radius: 6px;
  display: block;
  background: #fff;
}
.sv-bito a .sv-bito-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--sv-gunmetal);
  color: #fff;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}
.sv-bito a:hover .sv-bito-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(-3px);
}
.sv-bito-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 2px 8px;
}
@media (max-width: 1540px) {
  /* sous cette largeur la barre flottante recouvre la fin des lignes (mesure a 1440 px sur agence-accompagnement) : zero troncature */
  .sv-bito { display: none; }
}

/* ============================================================
   Sections riches (feature, imagegrid, steps, matrix)
   ============================================================ */
.sv-section--dark {
  background: var(--sv-gunmetal);
  color: rgba(255,255,255,.92);
}
.sv-section--dark h2, .sv-section--dark h3, .sv-section--dark h4 { color: #fff; }
.sv-section--dark .sv-section__tag { color: var(--sv-aero); }

/* Feature : image + texte côte à côte */
.sv-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.sv-feature__media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(15,26,36,.25), 0 0 0 1px rgba(15,26,36,.06);
  background: linear-gradient(135deg, #EEF2F6, #F9FBFC);
}
.sv-feature__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.sv-feature__caption {
  font-size: .82rem;
  color: var(--sv-charcoal);
  opacity: .7;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid var(--sv-rule);
}
.sv-feature__body .sv-section__tag {
  display: inline-block;
  margin-bottom: 14px;
}
.sv-feature__body h2 {
  margin-bottom: 18px;
}
.sv-feature__body p {
  color: var(--sv-charcoal);
  margin-bottom: 14px;
  font-size: 1.05rem;
  line-height: 1.65;
}
@media (max-width: 900px) {
  .sv-feature { grid-template-columns: 1fr; gap: 32px; }
}

/* Imagegrid : grille d'images avec légendes */
.sv-imgrid {
  display: grid;
  gap: 28px;
}
.sv-imgrid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.sv-imgrid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.sv-imgrid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .sv-imgrid--cols-3, .sv-imgrid--cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sv-imgrid { grid-template-columns: 1fr !important; } }
.sv-imgcard {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--sv-rule);
  transition: transform .3s ease, box-shadow .3s ease;
}
.sv-imgcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.sv-imgcard__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #EEF2F6, #F9FBFC);
}
.sv-imgcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.sv-imgcard:hover .sv-imgcard__media img { transform: scale(1.04); }
.sv-imgcard__cap {
  padding: 18px 20px;
}
.sv-imgcard__cap strong {
  display: block;
  color: var(--sv-gunmetal);
  font-size: 1.02rem;
  margin-bottom: 6px;
  font-weight: 800;
}
.sv-imgcard__cap p {
  color: var(--sv-charcoal);
  font-size: .92rem;
  line-height: 1.55;
  margin: 0;
}

/* Steps : timeline verticale numérotée */
.sv-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 20px;
  position: relative;
}
.sv-steps::before {
  content: '';
  position: absolute;
  left: 28px; top: 10px; bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--sv-celestial) 0%, var(--sv-marian) 50%, var(--sv-verdigris) 100%);
  opacity: .25;
}
.sv-step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  align-items: flex-start;
  position: relative;
}
.sv-step__num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--grad-see);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(71,161,218,.5);
  position: relative; z-index: 2;
}
.sv-step__body {
  padding-top: 10px;
}
.sv-step__body h4 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.sv-step__body p {
  color: var(--sv-charcoal);
  line-height: 1.6;
  font-size: .95rem;
}

/* Matrix 2x2 */
.sv-matrix {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: 1fr 28px;
  gap: 0;
  padding: 8px;
}
.sv-mtx-ylabel {
  grid-column: 1; grid-row: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--sv-charcoal);
  text-transform: uppercase;
  opacity: .6;
  display: flex; align-items: center; justify-content: center;
}
.sv-mtx-xlabel {
  grid-column: 2; grid-row: 2;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--sv-charcoal);
  text-transform: uppercase;
  opacity: .6;
  text-align: right;
  padding-right: 8px;
  padding-top: 8px;
}
.sv-mtx-grid {
  grid-column: 2; grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px -8px rgba(15,26,36,.15);
  background: var(--sv-rule);
}
.sv-mtx-cell {
  background: #fff;
  padding: 24px 28px;
  min-height: 180px;
  display: flex; flex-direction: column; gap: 10px;
}
.sv-mtx-cell:nth-child(1) { background: linear-gradient(135deg, #F6FBFF, #fff); }
.sv-mtx-cell:nth-child(2) { background: linear-gradient(135deg, #EEF4FA, #fff); }
.sv-mtx-cell:nth-child(3) { background: linear-gradient(135deg, #F4FAF9, #fff); }
.sv-mtx-cell:nth-child(4) { background: linear-gradient(135deg, #EDF9F7, #fff); }
.sv-mtx-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--sv-celestial);
  text-transform: uppercase;
}
.sv-mtx-cell h4 {
  font-size: 1.08rem;
}
.sv-mtx-cell p {
  color: var(--sv-charcoal);
  font-size: .92rem;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .sv-mtx-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
}

/* sv-wrap (utilitaire pour sections nouvelles) */
.sv-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }


/* ============================================
   Stakeholder Matrix v2 (agence-philosophie.html)
   Clean single-grid, no overlapping timeline.
   ============================================ */
.sv-stakeholder-matrix { padding-top: 64px; padding-bottom: 64px; }
.sv-stakeholder-matrix .sv-section__head { max-width: 1280px; margin: 0 auto 40px; padding: 0 32px; }
.sv-stakeholder-matrix .sv-section__lead {
  margin-top: 14px;
  color: var(--sv-charcoal);
  opacity: .78;
  max-width: 880px;
  font-size: 1.02rem;
  line-height: 1.65;
}

.sv-mx {
  display: grid;
  grid-template-columns: 160px repeat(3, 1fr);
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
  border: 1px solid rgba(44, 61, 78, .1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 40px -18px rgba(28, 39, 50, .2);
  background: #fff;
}

.sv-mx__rowhead {
  background: var(--sv-gunmetal);
  color: #fff;
  padding: 20px 18px;
  font-family: 'VAG Rundschrift', 'VAG Rounded', 'Lato', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sv-mx__rowhead--top { background: var(--sv-charcoal, #2C3D4E); }
.sv-mx__rowhead--example { background: var(--sv-celestial); color: #fff; }

/* Column headers */
.sv-mx__col {
  background: var(--sv-charcoal, #2C3D4E);
  color: #fff;
  padding: 18px 22px 20px;
  border-left: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.sv-mx__col--1 { border-top: 4px solid var(--sv-celestial); }
.sv-mx__col--2 { border-top: 4px solid var(--sv-sky, #5AC2D9); }
.sv-mx__col--3 { border-top: 4px solid var(--sv-turquoise, #4FCCB8); }

.sv-mx__year {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  line-height: 1.3;
  height: 16px;
}
.sv-mx__caption {
  font-size: .72rem;
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,.42);
  line-height: 1.35;
  min-height: 34px;
  margin: 6px 0 14px;
  display: block;
}
.sv-mx__title {
  font-family: 'VAG Rundschrift', 'VAG Rounded', 'Lato', sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sv-mx__col--1 .sv-mx__title { color: var(--sv-celestial); }
.sv-mx__col--2 .sv-mx__title { color: var(--sv-sky, #5AC2D9); }
.sv-mx__col--3 .sv-mx__title { color: var(--sv-turquoise, #4FCCB8); }
.sv-mx__sub {
  font-size: .88rem;
  font-style: italic;
  opacity: .75;
}

/* Content cells */
.sv-mx__cell {
  padding: 22px 24px;
  background: #fff;
  border-left: 1px solid rgba(44, 61, 78, .08);
  border-bottom: 1px solid rgba(44, 61, 78, .08);
}
.sv-mx__cell p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--sv-charcoal);
}
.sv-mx__cell ul {
  margin: 0;
  padding-left: 18px;
  font-size: .9rem;
  line-height: 1.75;
  color: var(--sv-charcoal);
}

/* Stakeholder split: Interne / Externe */
.sv-mx__cell--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding: 22px 20px;
}
.sv-mx__bucket ul {
  padding-left: 18px;
  margin-top: 6px;
}
.sv-mx__pill {
  display: inline-block;
  font-family: 'VAG Rundschrift', 'VAG Rounded', 'Lato', sans-serif;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .14em;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}
.sv-mx__pill--in { background: rgba(71, 161, 218, .12); color: var(--sv-celestial); }
.sv-mx__pill--ex { background: rgba(79, 204, 184, .14); color: #2a9a85; }

/* Example row */
.sv-mx__cell--example {
  background: linear-gradient(180deg, rgba(71, 161, 218, .035), rgba(71, 161, 218, .08));
  border-top: 2px dashed rgba(71, 161, 218, .22);
  padding-top: 20px;
}
.sv-mx__example-kicker {
  font-family: 'VAG Rundschrift', 'VAG Rounded', 'Lato', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--sv-celestial);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(71, 161, 218, .18);
}
.sv-mx__cell--example p {
  font-size: .88rem;
  font-style: italic;
  color: var(--sv-charcoal);
  opacity: .88;
}

/* Remove last-row bottom border */
.sv-mx > div:nth-last-child(-n+4) { border-bottom: none; }

@media (max-width: 980px) {
  .sv-mx { grid-template-columns: 1fr; }
  .sv-mx__rowhead,
  .sv-mx__rowhead--top,
  .sv-mx__rowhead--example {
    padding: 12px 18px;
    font-size: .76rem;
  }
  .sv-mx__rowhead--top { display: none; }
  .sv-mx__col { border-left: none; padding: 20px 22px 22px; }
  .sv-mx__cell { border-left: none; }
  .sv-mx__cell--split { grid-template-columns: 1fr; gap: 16px; padding: 20px 22px; }
}


/* Logos in example cells (replaces .sv-mx__example-kicker text) */
.sv-mx__logobar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(71, 161, 218, .18);
  min-height: 42px;
}
.sv-mx__logo {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: var(--sv-gunmetal, #1C2732);
  fill: currentColor;
}
.sv-mx__logo--wide {
  width: auto;
  height: 22px;
}
.sv-mx__logoline {
  font-family: 'VAG Rundschrift', 'VAG Rounded', 'Lato', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sv-charcoal);
}

/* ============================================
   Agora section (full-width diagram)
   ============================================ */
.sv-agora-section { padding: 80px 0; background: linear-gradient(180deg, #fff, #F4FAFE); }
.sv-agora-section .sv-section__head { max-width: 900px; margin: 0 auto 40px; text-align: center; }
.sv-agora-section .sv-section__head h2 { text-align: center; }
.sv-agora-section .sv-section__lead {
  margin: 14px auto 0;
  color: var(--sv-charcoal);
  opacity: .8;
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 720px;
}

.sv-agora {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.sv-agora img {
  width: 100%;
  max-width: 1100px;
  height: auto;
  background: #1C2732;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 20px 60px -24px rgba(28, 39, 50, .35);
}
.sv-agora figcaption {
  margin-top: 20px;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--sv-charcoal);
  opacity: .8;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.sv-agora figcaption strong { color: var(--sv-celestial); font-weight: 700; }

.sv-agora-note {
  max-width: 760px;
  margin: 32px auto 0;
  padding: 24px 28px;
  background: rgba(71, 161, 218, .06);
  border-left: 3px solid var(--sv-celestial);
  border-radius: 8px;
}
.sv-agora-note p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--sv-charcoal);
  font-style: italic;
}

/* ============================================
   Lifecycle trottinette (agence-philosophie.html)
   5 étapes en flow horizontal avec cas d'illustration
   ============================================ */
.sv-lifecycle { padding: 72px 0; }
.sv-lifecycle .sv-section__head { max-width: 980px; margin: 0 auto 48px; padding: 0 32px; }
.sv-lifecycle .sv-section__lead {
  margin-top: 14px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--sv-charcoal);
  opacity: .8;
  max-width: 820px;
}

.sv-lc {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.sv-lc::before {
  content: '';
  position: absolute;
  top: 38px;
  left: 32px; right: 32px;
  height: 2px;
  background: linear-gradient(to right,
    var(--sv-celestial) 0%,
    var(--sv-sky, #5AC2D9) 25%,
    var(--sv-turquoise, #4FCCB8) 50%,
    #4FCCB8 75%,
    #2C6E8F 100%);
  z-index: 0;
  opacity: .3;
}

.sv-lc__step {
  padding: 0 14px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sv-lc__step:not(:last-child) {
  border-right: 1px dashed rgba(44, 61, 78, .12);
}

.sv-lc__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}
.sv-lc__num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--sv-gunmetal);
  border: 2px solid var(--sv-celestial);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'VAG Rundschrift', 'VAG Rounded', 'Lato', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .05em;
  box-shadow: 0 4px 14px -6px rgba(71, 161, 218, .5);
}
.sv-lc__step--2 .sv-lc__num { border-color: var(--sv-sky, #5AC2D9); }
.sv-lc__step--3 .sv-lc__num { border-color: var(--sv-turquoise, #4FCCB8); }
.sv-lc__step--4 .sv-lc__num { border-color: #2C6E8F; }
.sv-lc__step--5 .sv-lc__num { border-color: #B4455C; }

.sv-lc__name {
  font-family: 'VAG Rundschrift', 'VAG Rounded', 'Lato', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sv-celestial);
}
.sv-lc__step--2 .sv-lc__name { color: var(--sv-sky, #5AC2D9); }
.sv-lc__step--3 .sv-lc__name { color: var(--sv-turquoise, #4FCCB8); }
.sv-lc__step--4 .sv-lc__name { color: #2C6E8F; }
.sv-lc__step--5 .sv-lc__name { color: #B4455C; }

.sv-lc__step h3 {
  font-family: 'VAG Rundschrift', 'VAG Rounded', 'Lato', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--sv-gunmetal);
  margin: 0;
  line-height: 1.3;
}
.sv-lc__step p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--sv-charcoal);
  opacity: .85;
}

.sv-lc__case {
  margin-top: 8px;
  padding: 14px 16px;
  background: #fff;
  border-left: 3px solid var(--sv-celestial);
  border-radius: 4px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--sv-charcoal);
  font-style: italic;
  box-shadow: 0 4px 16px -8px rgba(28, 39, 50, .12);
}
.sv-lc__step--2 .sv-lc__case { border-left-color: var(--sv-sky, #5AC2D9); }
.sv-lc__step--3 .sv-lc__case { border-left-color: var(--sv-turquoise, #4FCCB8); }
.sv-lc__step--4 .sv-lc__case { border-left-color: #2C6E8F; }
.sv-lc__step--5 .sv-lc__case { border-left-color: #B4455C; }

.sv-lc__case-label {
  display: inline-block;
  font-family: 'VAG Rundschrift', 'VAG Rounded', 'Lato', sans-serif;
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sv-celestial);
  margin-right: 8px;
  font-style: normal;
}
.sv-lc__step--2 .sv-lc__case-label { color: var(--sv-sky, #5AC2D9); }
.sv-lc__step--3 .sv-lc__case-label { color: var(--sv-turquoise, #4FCCB8); }
.sv-lc__step--4 .sv-lc__case-label { color: #2C6E8F; }
.sv-lc__step--5 .sv-lc__case-label { color: #B4455C; }

.sv-lc__footer {
  max-width: 880px;
  margin: 48px auto 0;
  padding: 24px 28px;
  background: rgba(71, 161, 218, .06);
  border-radius: 10px;
  border-left: 3px solid var(--sv-celestial);
}
.sv-lc__footer p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--sv-charcoal);
}
.sv-lc__footer strong {
  color: var(--sv-gunmetal);
  font-weight: 700;
}

@media (max-width: 1100px) {
  .sv-lc { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .sv-lc::before { display: none; }
  .sv-lc__step { border-right: none !important; padding: 18px; background: #fff; border-radius: 10px; box-shadow: 0 4px 16px -8px rgba(28, 39, 50, .1); }
}
@media (max-width: 640px) {
  .sv-lc { grid-template-columns: 1fr; }
}

/* ============================================
   Quote with NV avatar
   ============================================ */
.sv-quote--with-avatar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
  padding: 36px 40px;
  background: linear-gradient(135deg, rgba(71, 161, 218, .05), rgba(79, 204, 184, .04));
  border-radius: 16px;
  border-left: 4px solid var(--sv-celestial);
}
.sv-quote__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 6px 20px -8px rgba(28, 39, 50, .25);
  flex-shrink: 0;
}
.sv-quote__content { display: flex; flex-direction: column; gap: 14px; }
.sv-quote--with-avatar .sv-quote__text {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--sv-charcoal);
  margin: 0;
  font-style: italic;
}
.sv-quote--with-avatar .sv-quote__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sv-quote--with-avatar .sv-quote__author strong {
  font-family: 'VAG Rundschrift', 'VAG Rounded', 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sv-gunmetal);
  letter-spacing: .02em;
}
.sv-quote--with-avatar .sv-quote__author span {
  font-size: .88rem;
  color: var(--sv-charcoal);
  opacity: .7;
}
@media (max-width: 680px) {
  .sv-quote--with-avatar {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 28px 24px;
  }
  .sv-quote__avatar { margin: 0 auto; }
  .sv-quote--with-avatar .sv-quote__author { align-items: center; }
}

/* Real brand logo in matrix (bigger, for image-based logos) */
.sv-mx__logoimg {
  height: 28px;
  width: auto;
  max-width: 120px;
  display: block;
}

/* ============================================
   Venn diagram : Intérêt partagé
   Mon organisation ∩ Ma cible = Intérêt partagé
   ============================================ */
.sv-interet { padding-top: 72px; padding-bottom: 72px; }
.sv-interet .sv-prose { max-width: 820px; margin: 0 auto 40px; text-align: left; }

.sv-venn {
  max-width: 1180px;
  margin: 48px auto 0;
  padding: 56px 32px 32px;
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  align-items: center;
  gap: 0;
  background: var(--sv-gunmetal, #1C2732);
  border-radius: 20px;
  box-shadow: 0 20px 60px -24px rgba(28, 39, 50, .45);
  position: relative;
  overflow: hidden;
}
.sv-venn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(71, 161, 218, .12), transparent 60%);
  pointer-events: none;
}

.sv-venn__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 2;
}
.sv-venn__icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv-venn__icon--org { color: var(--sv-celestial); }
.sv-venn__icon--cible { color: #B4455C; }
.sv-venn__icon svg { width: 100%; height: 100%; }

.sv-venn__label {
  font-family: 'VAG Rundschrift', 'VAG Rounded', 'Lato', sans-serif;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .04em;
  padding: 8px 16px;
  border-radius: 8px;
  color: #fff;
  white-space: nowrap;
}
.sv-venn__label--org { background: var(--sv-celestial); }
.sv-venn__label--cible { background: #B4455C; }

.sv-venn__diagram {
  position: relative;
  height: 340px;
  z-index: 1;
}

.sv-venn__circle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.sv-venn__circle--org {
  left: 10%;
  background: radial-gradient(circle at 35% 35%, rgba(71, 161, 218, .85), rgba(71, 161, 218, .5) 70%, rgba(71, 161, 218, .2));
}
.sv-venn__circle--cible {
  right: 10%;
  background: radial-gradient(circle at 65% 35%, rgba(255, 100, 129, .85), rgba(255, 100, 129, .5) 70%, rgba(255, 100, 129, .2));
}

.sv-venn__list {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(255,255,255,.98);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 8px 28px -8px rgba(0,0,0,.4);
}
.sv-venn__list--left { left: 16%; }
.sv-venn__list--right { right: 16%; }
.sv-venn__list ul {
  list-style: disc;
  margin: 0;
  padding-left: 18px;
}
.sv-venn__list li {
  font-family: 'Lato', sans-serif;
  font-size: .88rem;
  color: var(--sv-gunmetal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  line-height: 1.8;
}

.sv-venn__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  background: rgba(255,255,255,.98);
  color: var(--sv-gunmetal);
  border-radius: 10px;
  padding: 14px 22px;
  text-align: center;
  font-family: 'VAG Rundschrift', 'VAG Rounded', 'Lato', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  line-height: 1.25;
  box-shadow: 0 10px 32px -10px rgba(0,0,0,.5);
  border: 2px solid rgba(71, 161, 218, .3);
}

@media (max-width: 960px) {
  .sv-venn {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 20px 32px;
  }
  .sv-venn__side { flex-direction: row; gap: 16px; }
  .sv-venn__diagram { height: 380px; width: 100%; max-width: 520px; margin: 0 auto; }
  .sv-venn__circle { width: 220px; height: 220px; }
  .sv-venn__circle--org { left: 5%; }
  .sv-venn__circle--cible { right: 5%; }
  .sv-venn__list { padding: 10px 12px; }
  .sv-venn__list li { font-size: .8rem; }
  .sv-venn__list--left { left: 2%; }
  .sv-venn__list--right { right: 2%; }
  .sv-venn__center { font-size: .85rem; padding: 10px 14px; }
}

/* ============== Manifesto : agence d'impact ============== */
.sv-manifest { padding-top: 80px; padding-bottom: 80px; }
.sv-manifest__intro {
  max-width: 920px;
  margin: 0 auto 56px;
  text-align: center;
}
.sv-manifest__intro h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  margin: 14px 0 18px;
  letter-spacing: -.01em;
}
.sv-manifest__intro h2 em {
  font-style: italic;
  background: linear-gradient(120deg, var(--sv-celestial, #47A1DA), var(--sv-turquoise, #4FCCB8));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sv-manifest__intro .sv-section__lead {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--sv-charcoal, #2C3D4E);
  opacity: .9;
  max-width: 800px;
  margin: 0 auto;
}

.sv-manifest__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.sv-manifest__col {
  position: relative;
  background: #fff;
  border: 1px solid var(--sv-rule, #E6ECF1);
  border-radius: 22px;
  padding: 36px 36px 30px;
  box-shadow: 0 24px 48px -28px rgba(15,26,36,.18);
  display: flex;
  flex-direction: column;
}
.sv-manifest__col::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 4px;
  border-radius: 0 0 6px 6px;
}
.sv-manifest__col--create::before {
  background: linear-gradient(90deg, var(--sv-celestial, #47A1DA), var(--sv-turquoise, #4FCCB8));
}
.sv-manifest__col--protect::before {
  background: linear-gradient(90deg, #2C6E8F, #B4455C);
}
.sv-manifest__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.sv-manifest__num {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--sv-celestial, #47A1DA);
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.sv-manifest__col--protect .sv-manifest__num {
  color: #2C6E8F;
}
.sv-manifest__head h3 {
  font-size: 1.5rem;
  margin: 0;
  letter-spacing: -.005em;
  color: var(--sv-charcoal, #2C3D4E);
}
.sv-manifest__lead {
  font-size: 1rem;
  color: var(--sv-charcoal, #2C3D4E);
  opacity: .85;
  margin: 0 0 16px;
}
.sv-manifest__list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sv-manifest__list li {
  position: relative;
  padding: 14px 16px 14px 44px;
  background: linear-gradient(180deg, #F7FAFC, #EEF2F6);
  border-radius: 12px;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--sv-charcoal, #2C3D4E);
}
.sv-manifest__list li::before {
  content: "";
  position: absolute;
  left: 16px; top: 22px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--sv-celestial, #47A1DA);
  box-shadow: 0 0 0 4px rgba(71,161,218,.15);
}
.sv-manifest__col--protect .sv-manifest__list li::before {
  background: #2C6E8F;
  box-shadow: 0 0 0 4px rgba(251,176,60,.16);
}
.sv-manifest__list strong {
  color: var(--sv-charcoal, #2C3D4E);
  font-weight: 700;
}
.sv-manifest__sum {
  margin-top: auto;
  padding: 14px 18px;
  border-left: 3px solid var(--sv-celestial, #47A1DA);
  background: rgba(71,161,218,.06);
  font-size: .92rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--sv-charcoal, #2C3D4E);
  border-radius: 0 8px 8px 0;
}
.sv-manifest__col--protect .sv-manifest__sum {
  border-left-color: #2C6E8F;
  background: rgba(251,176,60,.07);
}
@media (max-width: 900px) {
  .sv-manifest__grid { grid-template-columns: 1fr; gap: 22px; }
  .sv-manifest__col { padding: 28px 24px 24px; }
}

/* ============== Window closing — Ce qui se joue ============== */
.sv-windowclose {
  background: linear-gradient(180deg, #F9FBFC 0%, #EEF2F6 100%);
  padding: 72px 0;
  border-top: 1px solid var(--sv-rule, #E6ECF1);
  border-bottom: 1px solid var(--sv-rule, #E6ECF1);
}
.sv-windowclose__inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.sv-windowclose__inner h2 {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  margin: 14px 0 32px;
  letter-spacing: -.01em;
}
.sv-windowclose__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  text-align: left;
  max-width: 960px;
  margin: 0 auto;
}
.sv-windowclose__cols p {
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--sv-charcoal, #2C3D4E);
  margin: 0;
}
@media (max-width: 800px) {
  .sv-windowclose__cols { grid-template-columns: 1fr; gap: 18px; }
}

/* Narrative bridge between sections — liant éditorial */
.sv-bridge {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 32px;
  text-align: center;
  position: relative;
}
.sv-bridge::before,
.sv-bridge::after {
  content: "";
  display: block;
  width: 1px;
  height: 22px;
  margin: 0 auto 16px;
  background: linear-gradient(180deg, transparent, rgba(71,161,218,.55));
}
.sv-bridge::after {
  margin: 16px auto 0;
  background: linear-gradient(0deg, transparent, rgba(71,161,218,.55));
}
.sv-bridge p {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--sv-charcoal);
  font-style: italic;
  opacity: .78;
  margin: 0;
  font-family: var(--sv-serif, Georgia, "Times New Roman", serif);
}
@media (max-width: 720px) {
  .sv-bridge { padding: 20px 20px; }
  .sv-bridge p { font-size: .95rem; }
}

/* ============ SOMMAIRE LATÉRAL GAUCHE (auto-injecté par _toc.js) ============ */
.sv-side-toc {
  position: fixed;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  width: 360px;
  max-height: 86vh;
  z-index: 40;
  pointer-events: none;
  font-family: 'Lato', 'Avenir Next', sans-serif;
}
.sv-side-toc__inner {
  pointer-events: auto;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(28,39,50,.08);
  border-radius: 18px;
  padding: 28px 22px 24px;
  box-shadow: 0 12px 36px rgba(28,39,50,.1);
  max-height: 86vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.sv-side-toc__inner::-webkit-scrollbar { width: 6px; }
.sv-side-toc__inner::-webkit-scrollbar-thumb { background: rgba(28,39,50,.2); border-radius: 3px; }
.sv-side-toc__title {
  font-family: 'VAG Rounded','Avenir Next',sans-serif;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #47A1DA;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(71,161,218,.2);
}
.sv-side-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sv-side-toc__item { margin: 0; }
.sv-side-toc__link {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 12px 18px 18px;
  border-left: 4px solid transparent;
  color: #5A6B7A;
  text-decoration: none;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  border-radius: 0 8px 8px 0;
}
.sv-side-toc__link:hover {
  color: #2C3D4E;
  background: rgba(71,161,218,.07);
}
.sv-side-toc__link.is-active {
  color: #2C3D4E;
  border-left-color: #47A1DA;
  background: linear-gradient(90deg, rgba(71,161,218,.12), transparent);
  font-weight: 800;
}
.sv-side-toc__num {
  font-family: 'VAG Rounded','Avenir Next',sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  color: #B0BCC7;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  padding-top: 2px;
  transition: color .2s ease;
}
.sv-side-toc__link.is-active .sv-side-toc__num { color: #47A1DA; }
.sv-side-toc__lab {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1599px) {
  .sv-side-toc { width: 320px; left: 18px; }
  .sv-side-toc__link { font-size: 1.02rem; padding: 16px 10px 16px 16px; gap: 14px; }
}
@media (max-width: 1399px) {
  .sv-side-toc { width: 280px; left: 14px; }
  .sv-side-toc__link { font-size: 0.96rem; padding: 14px 10px 14px 14px; }
  .sv-side-toc__inner { padding: 22px 18px 20px; }
}
@media (max-width: 1199px) {
  .sv-side-toc { display: none; }
}
/* Pousse le contenu vers la droite pour libérer la zone du sommaire.
   10e tour (07/09/2026) : « Il faut que ce soit le même menu et la même top bar. » L'en-tête
   n'est plus poussé : il reprend la largeur entière par une marge négative égale au retrait du
   body, et le panneau du mega-menu, positionné sur lui, va de bord à bord comme sur l'accueil.
   Seul le contenu sous l'en-tête (et le pied) reste dans la colonne de droite. */
@media (min-width: 1600px) {
  body.sv-has-side-toc { padding-left: 410px; }
  body.sv-has-side-toc .bn-header { margin-left: -410px; }
}
@media (min-width: 1400px) and (max-width: 1599px) {
  body.sv-has-side-toc { padding-left: 360px; }
  body.sv-has-side-toc .bn-header { margin-left: -360px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  body.sv-has-side-toc { padding-left: 310px; }
  body.sv-has-side-toc .bn-header { margin-left: -310px; }
}

/* ============================================================
   REFONTE 06 (05/09/2026) : la grammaire de l'accueil sur les pages internes.
   Tuiles arrondies, degrades des quatre familles, tuiles Nuit Profonde,
   boutons et chiffres de l'accueil. Couche posee EN FIN de feuille : elle
   gagne par l'ordre, sans !important sauf mention.
   ============================================================ */
:root {
  --sv-r: 22px;
  --sv-nuit-line: #3A5261;
  --sv-grad-nuit: linear-gradient(135deg, #0D1920 0%, #13242C 45%, #1E323D 100%);
  --sv-grad-veille: linear-gradient(135deg, #47A1DA 0%, #3769B1 55%, #324E9D 100%);
  --sv-grad-ap: linear-gradient(135deg, #B7E0E8 0%, #B1D0E8 45%, #86A0CF 100%);
  --sv-grad-com: linear-gradient(135deg, #6DC2B8 0%, #5AC2D9 50%, #49C1EE 100%);
  --sv-grad-crise: linear-gradient(135deg, #3F81C3 0%, #284494 55%, #262F65 100%);
}
body { background: #fff; }

/* Sections : les bandes grises pleine largeur deviennent des tuiles arrondies */
.sv-section--muted { background: transparent; padding-top: 0; padding-bottom: 0; }
.sv-section--muted > .sv-wrap { background: #F5F8FB; border: 1px solid #E2E9F0; border-radius: var(--sv-r); max-width: 1376px; padding: 56px 48px; margin: 24px auto; }
.sv-section--dark { background: transparent; padding-top: 0; padding-bottom: 0; }
.sv-section--dark > .sv-wrap { background: var(--sv-grad-nuit); border: 1px solid var(--sv-nuit-line); border-radius: var(--sv-r); max-width: 1376px; padding: 56px 48px; margin: 24px auto; }
.sv-section__head { border-bottom: 0; padding-bottom: 0; margin-bottom: 36px; }
.sv-section__tag { color: #2C6E8F; letter-spacing: .2em; display: inline-flex; align-items: center; gap: .5rem; }
.sv-section__tag::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #47A1DA; flex: none; }
.sv-section--dark .sv-section__tag { color: #69B1F0; }
.sv-prose__side { color: #2C6E8F; }

/* Boutons : ceux de l'accueil (pilule, capitales, encre) */
.sv-btn { padding: .85rem 1.4rem; font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; font-family: 'Avenir Next','Lato',sans-serif; }
.sv-btn--primary { background: #2C3D4E; color: #fff; }
.sv-btn--primary:hover { background: #2C6E8F; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(44,110,143,.25); }
.sv-btn--ghost { background: #fff; color: #1C2732; border-color: #E2E9F0; }
.sv-btn--ghost:hover { background: #1C2732; color: #fff; border-color: #1C2732; transform: translateY(-2px); }

/* Piliers : les tuiles d'expertise de l'accueil (degrade de famille, texte blanc, numero en filigrane).
   Un pilier qui contient une liste ou un encart garde un fond blanc et prend un bandeau de famille. */
.sv-pillar { border-radius: 18px; border: 1px solid #E2E9F0; box-shadow: none; padding: 30px 26px 32px; }
.sv-pillar::before { height: 6px; background: var(--sv-grad-veille); }
.sv-pillar--2::before { background: var(--sv-grad-com); }
.sv-pillar--3::before { background: var(--sv-grad-crise); }
.sv-pillar:hover { box-shadow: 0 24px 48px rgba(44,61,78,.12); border-color: #E2E9F0; }
.sv-pillar__num { font-size: .74rem; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: #2C6E8F; margin-bottom: 12px; }
.sv-pillar--2 .sv-pillar__num { color: #1F8A76; }
.sv-pillar--3 .sv-pillar__num { color: #284494; }
.sv-pillar:not(:has(ul, ol, table, div, figure)) { background: var(--sv-grad-veille); border: 0; color: #fff; }
.sv-pillar--2:not(:has(ul, ol, table, div, figure)) { background: var(--sv-grad-com); }
.sv-pillar--3:not(:has(ul, ol, table, div, figure)) { background: var(--sv-grad-crise); }
.sv-pillar:not(:has(ul, ol, table, div, figure))::before { display: none; }
.sv-pillar:not(:has(ul, ol, table, div, figure))::after { content: ""; position: absolute; top: -50%; right: -30%; width: 80%; height: 180%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 60%); pointer-events: none; }
.sv-pillar:not(:has(ul, ol, table, div, figure)) > * { position: relative; z-index: 1; }
.sv-pillar:not(:has(ul, ol, table, div, figure)) h3, .sv-pillar:not(:has(ul, ol, table, div, figure)) h4 { color: #fff; }
.sv-pillar:not(:has(ul, ol, table, div, figure)) p { color: rgba(255,255,255,.9); }
.sv-pillar:not(:has(ul, ol, table, div, figure)) .sv-pillar__num { color: rgba(255,255,255,.85); opacity: 1; }

/* Points cles : cartes sur surface, numero en degrade */
.sv-keys { gap: 16px 20px; }
.sv-key { border-top: 0; background: #F5F8FB; border: 1px solid #E2E9F0; border-radius: 16px; padding: 18px 20px; align-items: start; }
.sv-key__num { width: 38px; height: 38px; border-radius: 12px; background: var(--sv-grad-veille); font-size: .8rem; }
.sv-key h4 { color: #1C2732; }

/* Etapes numerotees */
.sv-step__num { background: var(--sv-grad-veille); color: #fff; border-radius: 14px; }

/* Citation et appel a l'action : tuiles Nuit Profonde */
.sv-quote { background: var(--sv-grad-nuit); border: 1px solid var(--sv-nuit-line); border-radius: var(--sv-r); }
.sv-quote::before { color: #69B1F0; }
.sv-quote__author { color: #69B1F0; }
.sv-cta__inner { background: var(--sv-grad-nuit); border: 1px solid var(--sv-nuit-line); border-radius: var(--sv-r); }
.sv-cta__inner::after { background: radial-gradient(circle, rgba(105,177,240,.22) 0%, transparent 70%); }
.sv-cta .sv-btn--primary { background: #EAF1FB; color: #13242C; }
.sv-cta .sv-btn--primary:hover { background: #fff; color: #13242C; }
.sv-cta .sv-btn--ghost { background: rgba(255,255,255,.06); color: #EAF1FB; border-color: var(--sv-nuit-line); }
.sv-cta .sv-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #69B1F0; color: #fff; }

/* Grille de chiffres : tuile KPI, bandeau de couleur en tete, chiffre en couleur de famille, chiffres tabulaires */
.sv-stats-grid__item { border: 1px solid #E2E9F0; border-left-width: 1px; border-radius: 18px; padding: 30px 26px 26px; position: relative; overflow: hidden; }
.sv-stats-grid__item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: #47A1DA; }
.sv-stats-grid__item:nth-child(4n+2)::before { background: #4FCCB8; }
.sv-stats-grid__item:nth-child(4n+3)::before { background: #2C6E8F; }
.sv-stats-grid__item:nth-child(4n+4)::before { background: #B4455C; }
.sv-stats-grid__item:nth-child(4n+1), .sv-stats-grid__item:nth-child(4n+2), .sv-stats-grid__item:nth-child(4n+3), .sv-stats-grid__item:nth-child(4n+4) { border-left-color: #E2E9F0; }
.sv-stats-grid__val { font-family: 'Avenir Next','Lato',sans-serif; font-variant-numeric: tabular-nums; color: #2C6E8F; letter-spacing: -.03em; }
.sv-stats-grid__item:nth-child(4n+2) .sv-stats-grid__val { color: #1F8A76; }
.sv-stats-grid__item:nth-child(4n+4) .sv-stats-grid__val { color: #B4455C; }

/* Citation avec portrait : la tuile est Nuit Profonde, le texte doit etre clair (les regles d'origine le mettaient en encre :
   citations invisibles, retour de Nicolas du 05/09) */
.sv-quote--with-avatar { background: var(--sv-grad-nuit); border: 1px solid var(--sv-nuit-line); border-left-width: 1px; border-radius: var(--sv-r); max-width: 1000px; padding: 40px 44px; }
.sv-quote--with-avatar .sv-quote__text { color: #fff; font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-style: normal; font-weight: 600; }
.sv-quote--with-avatar .sv-quote__author strong { color: #fff; font-family: 'Avenir Next','Lato',sans-serif; }
.sv-quote--with-avatar .sv-quote__author span { color: #69B1F0; opacity: 1; }
.sv-quote__avatar { border: 3px solid rgba(255,255,255,.18); }
/* Citation courte : la photo ne monte pas sur le guillemet decoratif (mesure sur la citation d'Erwan, page histoire) */
.sv-quote--with-avatar .sv-quote__avatar { align-self: start; margin-top: 3.4rem; }
@media (max-width: 720px) { .sv-quote--with-avatar .sv-quote__avatar { align-self: center; margin-top: 2.4rem; } }
.sv-bridge p { color: #2C6E8F; font-weight: 600; font-style: italic; }

/* Tableau « Evolution du logiciel de l'organisation » : plus de grille pleine, des cartes arrondies par colonne,
   en-tetes de colonnes dans les degrades de famille, etiquettes de lignes en pastilles */
.sv-mx { border: 0; box-shadow: none; background: transparent; gap: 12px; overflow: visible; border-radius: 0; grid-template-columns: 150px repeat(3, 1fr); }
.sv-mx__rowhead { background: #EEF4FA; color: #2C6E8F; border: 1px solid #E2E9F0; border-radius: 16px; font-family: 'Avenir Next','Lato',sans-serif; letter-spacing: .14em; font-size: .72rem; padding: 18px 16px; }
.sv-mx__rowhead--top { background: transparent; border: 0; }
.sv-mx__rowhead--example { background: var(--sv-grad-veille); color: #fff; border: 0; }
.sv-mx__col { border: 0; border-radius: 18px; padding: 22px 24px 24px; position: relative; overflow: hidden; }
.sv-mx__col::after { content: ""; position: absolute; top: -50%; right: -30%; width: 80%; height: 180%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 60%); pointer-events: none; }
.sv-mx__col > * { position: relative; z-index: 1; }
.sv-mx__col--1 { background: var(--sv-grad-veille); border-top: 0; }
.sv-mx__col--2 { background: var(--sv-grad-com); border-top: 0; }
.sv-mx__col--3 { background: var(--sv-grad-crise); border-top: 0; }
.sv-mx__col--2, .sv-mx__col--2 .sv-mx__title, .sv-mx__col--2 .sv-mx__sub, .sv-mx__col--2 .sv-mx__year, .sv-mx__col--2 .sv-mx__caption { color: #13242C; }
.sv-mx__col .sv-mx__title { color: #fff; }
.sv-mx__col .sv-mx__sub { color: rgba(255,255,255,.85); }
.sv-mx__year, .sv-mx__caption { color: rgba(255,255,255,.8); }
.sv-mx__col--2 .sv-mx__year, .sv-mx__col--2 .sv-mx__caption { color: rgba(19,36,44,.75); }
.sv-mx__cell { background: #fff; border: 1px solid #E2E9F0; border-radius: 16px; padding: 18px 20px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sv-mx__cell:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(44,61,78,.10); border-color: #47A1DA; }
.sv-mx__cell--example { background: #F5F8FB; }
.sv-mx__pill { border-radius: 999px; }
@media (max-width: 900px) { .sv-mx { grid-template-columns: 1fr; } .sv-mx__rowhead { border-radius: 12px; } }

/* FAQ, cartes image, sommaire des pages legales, newsletter */
.sv-faq__item { border-radius: 16px; border-color: #E2E9F0; }
.sv-faq__item summary::after { background: #2C6E8F; }
.sv-faq__item[open] { border-color: #47A1DA; box-shadow: 0 12px 32px rgba(44,61,78,.08); }
.sv-imgcard { border-radius: 18px; border-color: #E2E9F0; box-shadow: none; }
.sv-imgcard:hover { box-shadow: 0 24px 48px rgba(44,61,78,.12); }
.sv-feature__media { border-radius: 18px; }
.sv-toc { background: #F5F8FB; border-radius: 16px; border-left-color: #47A1DA; }
.sv-news-hero { background: var(--sv-grad-nuit); border: 1px solid var(--sv-nuit-line); border-radius: var(--sv-r); }
.sv-news-hero__form button { background: #EAF1FB; color: #13242C; }
.sv-news-hero__form button:hover { background: #fff; }
.sv-breadcrumb a:hover { color: #2C6E8F; }