:root {
  --bg-glow: rgba(255,255,255,0.06);
  --bg-start: #080808;
  --bg-mid: #040404;
  --bg-end: #090909;
  --panel: rgba(255,255,255,0.05);
  --panel-top: rgba(255,255,255,0.08);
  --panel-bottom: rgba(255,255,255,0.02);
  --surface: rgba(255,255,255,0.04);
  --surface-strong: rgba(255,255,255,0.07);
  --line: rgba(255,255,255,0.11);
  --text: #f5f5f5;
  --muted: rgba(255,255,255,0.72);
  --soft: rgba(255,255,255,0.48);
  --pattern-dot: rgba(255,255,255,0.04);
  --shadow: 0 24px 60px rgba(0,0,0,0.42);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --container: min(1380px, 100%);
  --transition: 320ms cubic-bezier(.2,.8,.2,1);
  --button-bg: #ffffff;
  --button-text: #0a0a0a;
  --button-shadow: 0 18px 34px rgba(255,255,255,0.12);
  --button-secondary-bg: rgba(255,255,255,0.04);
  --button-secondary-border: rgba(255,255,255,0.14);
  --focus-ring: rgba(255,255,255,0.05);
  --spotlight-glow: radial-gradient(circle, rgba(255,255,255,0.24) 0%, rgba(176,176,176,0.14) 24%, rgba(82,82,82,0.08) 42%, transparent 72%);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-glow: rgba(255,255,255,0.98);
  --bg-start: #ffffff;
  --bg-mid: #ffffff;
  --bg-end: #ffffff;
  --panel: rgba(255,255,255,0.9);
  --panel-top: rgba(255,255,255,0.98);
  --panel-bottom: rgba(255,255,255,0.84);
  --surface: rgba(255,255,255,0.8);
  --surface-strong: rgba(255,255,255,0.92);
  --line: rgba(20,20,20,0.1);
  --text: #161616;
  --muted: rgba(22,22,22,0.76);
  --soft: rgba(22,22,22,0.5);
  --pattern-dot: rgba(20,20,20,0.05);
  --shadow: 0 24px 60px rgba(0,0,0,0.08);
  --button-bg: #161616;
  --button-text: #faf7f2;
  --button-shadow: 0 18px 34px rgba(0,0,0,0.12);
  --button-secondary-bg: rgba(255,255,255,0.82);
  --button-secondary-border: rgba(20,20,20,0.12);
  --focus-ring: rgba(20,20,20,0.05);
  --spotlight-glow: radial-gradient(circle, rgba(120,120,120,0.2) 0%, rgba(120,120,120,0.1) 24%, rgba(120,120,120,0.04) 42%, transparent 72%);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top, var(--bg-glow), transparent 32%),
    linear-gradient(180deg, var(--bg-start) 0%, var(--bg-mid) 48%, var(--bg-end) 100%);
  overflow-x: hidden;
  transition: background 0.55s ease, color 0.55s ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(var(--pattern-dot) 0.7px, transparent 0.7px);
  background-size: 4px 4px;
  opacity: 0.22;
  z-index: 0;
}

html[data-theme="light"] body::before {
  opacity: 0.12;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

p,
li {
  margin: 0;
  color: var(--muted);
  line-height: 1.78;
}

ul {
  margin: 0;
  padding-left: 18px;
}

body,
.eyebrow,
.panel-card,
.btn,
.btn-secondary,
.anchor-pills a,
.text-link {
  transition:
    background 0.45s ease,
    color 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    transform var(--transition);
}

.site-shell {
  position: relative;
  z-index: 1;
  padding-top: 96px;
  padding-bottom: 0;
}

#premiumFooterSlot {
  padding-top: 28px;
}

main {
  width: 100%;
  display: grid;
  gap: 20px;
}

section,
[id] {
  scroll-margin-top: 120px;
}

.marketing-hero,
.section-shell {
  width: 100%;
}

.marketing-hero {
  padding: 40px 0 12px;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(320px, 0.97fr);
  gap: 26px;
  align-items: center;
}

.hero-copy {
  display: grid;
  align-content: start;
  gap: 19px;
  padding: 24px 0 10px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  opacity: 0.85;
  flex: none;
}

h1 {
  font-size: clamp(3.15rem, 7.4vw, 6rem);
  max-width: none;
}

.hero-copy p {
  max-width: 62ch;
  font-size: 1.04rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-pills,
.anchor-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-pills span,
.anchor-pills a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 1rem;
}

.anchor-pills a:hover {
  transform: translateY(-2px);
  color: var(--text);
}

.btn,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
}

.btn {
  background: var(--button-bg);
  color: var(--button-text);
  box-shadow: var(--button-shadow);
}

.btn-secondary {
  border: 1px solid var(--button-secondary-border);
  background: var(--button-secondary-bg);
  color: var(--text);
}

.btn:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
}

.panel-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
    rgba(10,10,10,0.58);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-theme="light"] .panel-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.84)),
    rgba(255,255,255,0.88);
}

.spotlight-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.spotlight-card > *:not(.spotlight-glow) {
  position: relative;
  z-index: 1;
}

.spotlight-glow {
  position: absolute;
  z-index: 0;
  width: 620px;
  height: 620px;
  left: var(--glow-x, 70%);
  top: var(--glow-y, 24%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--spotlight-glow);
  filter: blur(22px);
  opacity: 0;
  transition: opacity 220ms ease, background 0.45s ease;
  pointer-events: none;
}

.spotlight-card.is-active .spotlight-glow {
  opacity: 0.95;
}

.hero-visual {
  display: grid;
  gap: 18px;
  padding: 28px;
}

.hero-visual h2,
.proof-panel h2,
.cta-panel h2 {
  font-size: clamp(2.25rem, 4vw, 3.9rem);
}

.section-head h2 {
  font-size: clamp(3rem, 5.5vw, 5rem);
}

.hero-visual h2 {
  max-width: 11.5ch;
}

.hero-preview {
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
  padding: 6px;
}

.hero-preview img {
  width: 100%;
  aspect-ratio: 1.18 / 1;
  object-fit: cover;
  border-radius: 17px;
  display: block;
}

.hero-kpis {
  display: grid;
  gap: 12px;
}

.kpi-item {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.kpi-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
}

.section-shell {
  padding: 26px 0;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: end;
  column-gap: 28px;
  row-gap: 12px;
  margin-bottom: 22px;
}

.section-head .eyebrow,
.section-head h2 {
  grid-column: 1;
}

.section-head h2 {
  max-width: none;
}

.section-head p {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  max-width: 72ch;
  padding-bottom: 10px;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.insight-grid .panel-card,
.service-card,
.process-card,
.proof-panel,
.cta-panel {
  padding: 28px;
  display: grid;
  gap: 12px;
}

.panel-kicker,
.process-step {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--soft);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.insight-grid h3,
.service-card h3,
.process-card h3 {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.service-card.featured {
  grid-column: span 2;
}

.service-points {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-left: 18px;
}

.service-points li::marker {
  color: var(--text);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--text);
  font-size: 1rem;
}

.text-link::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}

.text-link:hover::after {
  transform: translateX(4px);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.proof-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto;
  align-items: end;
  gap: 22px;
}

.proof-panel p {
  max-width: 66ch;
}

.proof-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.proof-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
}

.cta-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 24px;
}

.cta-panel > div {
  max-width: 64ch;
  display: grid;
  gap: 12px;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition:
    opacity 700ms cubic-bezier(.2,.8,.2,1),
    transform 700ms cubic-bezier(.2,.8,.2,1),
    filter 700ms cubic-bezier(.2,.8,.2,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (max-width: 1080px) {
  .marketing-hero,
  .section-head,
  .insight-grid,
  .service-grid,
  .process-grid,
  .proof-panel {
    grid-template-columns: 1fr;
  }

  .section-head p {
    grid-column: auto;
    grid-row: auto;
  }

  .service-card.featured {
    grid-column: auto;
  }
}

@media (max-width: 980px) {
  .site-shell {
    padding-top: 120px;
  }
}

@media (max-width: 760px) {
  .site-shell {
    padding-top: 126px;
    padding-bottom: 0;
  }

  .marketing-hero {
    padding-top: 26px;
  }

  h1 {
    max-width: 100%;
    font-size: clamp(2.8rem, 12vw, 4.8rem);
  }

  .hero-visual,
  .insight-grid .panel-card,
  .service-card,
  .process-card,
  .proof-panel,
  .cta-panel {
    padding: 22px;
  }

  .section-shell,
  #premiumFooterSlot {
    padding-top: 0;
  }

  .cta-panel {
    align-items: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════════
   PAGE RÉFÉRENCEMENT — composants spécifiques
══════════════════════════════════════════════════════════════ */

/* ─── Hero metrics panel ─────────────────────────────────── */
.seo-metrics-panel {
  display: grid;
  gap: 14px;
  padding: 28px;
  align-content: start;
}

.seo-metrics-panel h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  max-width: 18ch;
  margin-bottom: 4px;
}

.seo-metric-item {
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 3px;
}

.seo-metric-val {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text);
}

.seo-metric-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-top: 2px;
}

.seo-metric-label {
  font-size: 1rem;
  color: var(--soft);
  line-height: 1.5;
  margin-top: 2px;
}

/* ─── Quote block ────────────────────────────────────────── */
.quote-block {
  text-align: center;
  max-width: 70ch;
  margin: 0 auto 36px;
  padding: 12px 0;
}

.quote-block blockquote {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--text);
  margin: 0 0 16px;
}

.quote-block p {
  font-size: 1rem;
  max-width: 58ch;
  margin: 0 auto;
}

/* ─── Problem grid ───────────────────────────────────────── */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.problem-card {
  padding: 28px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.problem-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  margin-bottom: 4px;
}

.problem-card h3 {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
}

/* ─── Service featured 2-col list ───────────────────────── */
.service-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.service-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  flex: none;
}

.service-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  margin-top: 6px;
}

.service-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.service-tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--soft);
  font-size: 0.85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ─── Comparison ─────────────────────────────────────────── */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 18px;
}

.comparison-card {
  padding: 30px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.comparison-card h3 {
  font-size: clamp(1.7rem, 2.4vw, 2.6rem);
  max-width: 20ch;
}

.comparison-badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.badge-seo {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--text);
}

.badge-ads {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}

html[data-theme="light"] .badge-seo {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.14);
  color: #0a0a0a;
}

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

.comparison-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.5;
}

.comparison-list li svg {
  flex: none;
  margin-top: 3px;
  color: var(--text);
}

.comparison-list li.comparison-neutral svg {
  color: var(--soft);
}

.comparison-ideal {
  font-size: 1rem;
  color: var(--soft);
  line-height: 1.6;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.comparison-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}

.comparison-banner p {
  max-width: 64ch;
  font-size: 1rem;
}

.comparison-banner strong {
  color: var(--text);
}

/* ─── Process 4 colonnes ─────────────────────────────────── */
.process-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* ─── FAQ SEO ────────────────────────────────────────────── */
.faq-seo {
  display: grid;
  gap: 1px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line);
}

.faq-item {
  background: var(--surface);
  transition: background 0.3s ease;
}

.faq-item:first-child { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.faq-item:last-child  { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.4;
}

.faq-question:hover { background: rgba(255,255,255,.04); }
html[data-theme="light"] .faq-question:hover { background: rgba(0,0,0,.03); }

.faq-icon {
  flex: none;
  color: var(--soft);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 400ms cubic-bezier(.2,.8,.2,1);
}

.faq-answer[aria-hidden="false"] {
  max-height: 400px;
}

.faq-answer-inner {
  padding: 0 28px 24px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.78;
  border-top: 1px solid var(--line);
  margin: 0 28px;
  padding-top: 18px;
  padding-left: 0;
  padding-right: 0;
}

/* ─── Responsive additions ───────────────────────────────── */
@media (max-width: 1080px) {
  .problem-grid,
  .comparison-grid,
  .process-grid-4 {
    grid-template-columns: 1fr;
  }

  .service-two-col {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .comparison-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .problem-grid {
    grid-template-columns: 1fr;
  }

  .comparison-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .faq-question {
    padding: 18px 20px;
    font-size: .94rem;
  }

  .faq-answer-inner {
    margin: 0 20px;
    padding-top: 14px;
    padding-bottom: 18px;
  }

  .seo-metrics-panel { padding: 22px; }
  .problem-card, .comparison-card { padding: 22px; }
}

/* ══════════════════════════════════════════════════════════════
   PAGE GOOGLE ADS — composants spécifiques
══════════════════════════════════════════════════════════════ */

/* ─── Hero panel Ads ────────────────────────────────────── */
.ads-hero-panel {
  padding: 28px;
  display: grid;
  gap: 18px;
  align-content: start;
}

.ads-hero-panel h2 {
  display: none;
}

.ads-panel-lead {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 52ch;
}

.ads-panel-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  width: fit-content;
}

.ads-panel-note svg { color: var(--text); flex: none; }

/* ─── Google Search Mock ────────────────────────────────── */
.google-search-mock {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}

html[data-theme="light"] .google-search-mock {
  background: #fafafa;
  border-color: rgba(0,0,0,0.08);
}

.gsm-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--soft);
  font-size: 1rem;
  margin-bottom: 4px;
}

.gsm-bar svg { flex: none; color: var(--soft); }

.gsm-result {
  padding: 12px 14px;
  border-radius: 12px;
  display: grid;
  gap: 3px;
}

.gsm-ad {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

html[data-theme="light"] .gsm-ad {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.gsm-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.gsm-ad-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html[data-theme="light"] .gsm-ad-badge {
  background: #e8f0fe;
  border-color: #c5d8ff;
  color: #1a56c4;
}

.gsm-url {
  font-size: 0.85rem;
  color: var(--soft);
}

.gsm-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

html[data-theme="light"] .gsm-ad .gsm-title { color: #1a0dab; }

.gsm-desc {
  font-size: 1rem;
  color: var(--soft);
  line-height: 1.5;
}

.gsm-organic { opacity: 0.5; }
.gsm-organic--fade { opacity: 0.28; }

/* ─── Guarantee banner in service card ──────────────────── */
.ads-guarantee-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 8px;
}

.ads-guarantee-banner svg { flex: none; color: var(--muted); }

/* ─── Pour qui grid ─────────────────────────────────────── */
.ads-who-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.ads-who-card {
  padding: 28px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.ads-who-card h3 {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
}

.ads-who-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}

/* ─── Différenciation ────────────────────────────────────── */
.ads-diff-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: start;
}

.ads-diff-copy {
  display: grid;
  gap: 24px;
}

.ads-diff-copy h2 {
  font-size: clamp(2.2rem, 3.8vw, 3.8rem);
}

.ads-diff-list {
  display: grid;
  gap: 20px;
}

.ads-diff-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}

.ads-diff-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text);
  margin-top: 7px;
  flex: none;
}

.ads-diff-item strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.ads-diff-item span {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.65;
}

.ads-diff-quote {
  padding: 32px;
  display: grid;
  gap: 16px;
}

.ads-diff-quote blockquote {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--text);
  margin: 0;
}

.ads-diff-quote p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ─── Responsive Google Ads ─────────────────────────────── */
@media (max-width: 1080px) {
  .ads-who-grid {
    grid-template-columns: 1fr;
  }

  .ads-diff-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ads-who-grid {
    grid-template-columns: 1fr;
  }

  .ads-who-card, .ads-diff-quote { padding: 22px; }

  .google-search-mock { padding: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   STATISTIQUES DE SCANS
   ═══════════════════════════════════════════════════════════ */

/* ─── Hero panel mock dashboard ─────────────────────────── */
.scan-hero-panel {
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-theme="light"] .scan-hero-panel {
  background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(248,248,250,0.9));
  box-shadow: 0 8px 40px rgba(0,0,0,0.07);
}

.shp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shp-label {
  font-size: 0.85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soft);
}

.shp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
}

.shp-badge--up {
  color: #22c55e;
  border-color: rgba(34,197,94,0.3);
  background: rgba(34,197,94,0.08);
}

.shp-main-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.shp-big-number {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--text);
}

.shp-big-label {
  font-size: 1rem;
  color: var(--soft);
}

.shp-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shp-bar-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
}

.shp-bar-name {
  font-size: 1rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shp-bar-track {
  width: 80px;
  height: 5px;
  border-radius: 99px;
  background: var(--surface-strong);
  overflow: hidden;
  flex-shrink: 0;
}

.shp-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--text);
  opacity: 0.7;
}

.shp-bar-pct {
  font-size: 1rem;
  color: var(--soft);
  min-width: 28px;
  text-align: right;
}

.shp-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.shp-mini-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.shp-mini-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.shp-mini-label {
  font-size: 0.85rem;
  color: var(--soft);
  line-height: 1.3;
}

/* ─── Data grid (6 cards) ────────────────────────────────── */
.scan-data-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.scan-data-card {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.scan-data-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex: none;
}

.scan-data-card strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.scan-data-card p {
  font-size: 1rem;
  line-height: 1.65;
}

/* ─── Use cases ──────────────────────────────────────────── */
.scan-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.scan-usecase-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.scan-usecase-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.scan-usecase-card h3 {
  font-size: clamp(1.4rem, 2vw, 1.9rem);
}

.scan-usecase-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.scan-usecase-body p {
  font-size: 1rem;
  line-height: 1.7;
}

.scan-usecase-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.scan-usecase-list li {
  font-size: 1rem;
  color: var(--muted);
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}

.scan-usecase-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--soft);
  font-size: .78rem;
}

/* ─── Light mode ─────────────────────────────────────────── */
html[data-theme="light"] .section-shell:has(.scan-data-grid),
html[data-theme="light"] .section-shell:has(.scan-usecase-grid) {
  position: relative;
  padding-top: 56px;
  padding-bottom: 56px;
}

html[data-theme="light"] .section-shell:has(.scan-data-grid)::before,
html[data-theme="light"] .section-shell:has(.scan-usecase-grid)::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: #f5f5f7;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .scan-data-grid { grid-template-columns: repeat(2, 1fr); }
  .scan-usecase-grid { grid-template-columns: 1fr; }
  .shp-bar-track { width: 60px; }
}

@media (max-width: 760px) {
  .scan-data-grid { grid-template-columns: 1fr; }
  .scan-hero-panel { padding: 20px; }
  .shp-footer { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .shp-bar-row { grid-template-columns: 1fr auto; }
  .shp-bar-track { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   PAGE ANALYSE PERFORMANCES QR CODE — composants spécifiques
══════════════════════════════════════════════════════════════ */

/* ─── Hero insights panel ────────────────────────────────── */
.aperf-hero-panel {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  backdrop-filter: blur(12px);
}

html[data-theme="light"] .aperf-hero-panel {
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(245,245,247,0.9));
  box-shadow: 0 8px 32px rgba(0,0,0,0.07);
}

.aperf-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.aperf-panel-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soft);
}

.aperf-panel-client {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--soft);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.aperf-insight-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.aperf-insight-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  transition: background var(--transition);
}

.aperf-insight-row:hover {
  background: var(--surface-strong);
}

.aperf-irow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  flex: none;
  margin-top: 1px;
}

.aperf-insight--good .aperf-irow-badge {
  background: rgba(29,184,122,0.15);
  border: 1px solid rgba(29,184,122,0.3);
  color: #1db87a;
}

.aperf-insight--warn .aperf-irow-badge {
  background: rgba(234,179,8,0.12);
  border: 1px solid rgba(234,179,8,0.28);
  color: #d4a017;
}

html[data-theme="light"] .aperf-insight--warn .aperf-irow-badge {
  color: #b8860b;
}

.aperf-insight--neutral .aperf-irow-badge {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  color: var(--muted);
}

.aperf-irow-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.aperf-irow-body strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.aperf-irow-body span {
  font-size: 1rem;
  color: var(--soft);
  line-height: 1.4;
}

.aperf-panel-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--muted);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.aperf-panel-footer svg {
  flex: none;
  color: var(--soft);
}

/* ─── Case study grid ────────────────────────────────────── */
.aperf-case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.aperf-case-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-content: start;
}

.aperf-case-step {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 2px;
}

.aperf-case-card--action .aperf-case-step {
  color: #1db87a;
}

.aperf-case-card h3 {
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  line-height: 1.2;
}

.aperf-case-card p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}

.aperf-case-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.aperf-case-list li {
  font-size: 1rem;
  color: var(--muted);
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}

.aperf-case-card--action .aperf-case-list li {
  color: var(--text);
  font-weight: 500;
}

.aperf-case-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--soft);
  font-size: .78rem;
}

.aperf-case-card--action .aperf-case-list li::before {
  color: #1db87a;
}

/* ─── Light mode stripes ─────────────────────────────────── */
html[data-theme="light"] .section-shell:has(.aperf-case-grid) {
  position: relative;
  padding-top: 56px;
  padding-bottom: 56px;
}

html[data-theme="light"] .section-shell:has(.aperf-case-grid)::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: #f5f5f7;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .aperf-case-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .aperf-hero-panel { padding: 20px; }
  .aperf-case-card { padding: 22px; }
}


/* ══════════════════════════════════════════════════════════════
   PAGE PUBLICITÉ EN LIGNE — composants spécifiques
══════════════════════════════════════════════════════════════ */

/* ─── Hero panel canaux ──────────────────────────────────── */
.pub-channels-panel {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
  background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-theme="light"] .pub-channels-panel {
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,255,255,0.84));
}

.pub-panel-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.pub-channel-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.pub-channel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  transition: background var(--transition);
}

.pub-channel-row:hover {
  background: var(--surface-strong);
}

.pub-channel-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pub-channel-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  color: var(--muted);
}

.pub-channel-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pub-channel-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

.pub-channel-desc {
  font-size: 1rem;
  color: var(--soft);
  line-height: 1;
}

.pub-channel-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pub-channel-stat {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.pub-channel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.pub-dot--active {
  background: #1db87a;
  box-shadow: 0 0 8px rgba(29,184,122,0.55);
}

.pub-panel-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--soft);
}

/* ─── Process 4-col grid ─────────────────────────────────── */
.pub-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ─── Links grid ─────────────────────────────────────────── */
.pub-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pub-link-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.pub-link-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 70px rgba(0,0,0,0.55);
}

html[data-theme="light"] .pub-link-card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}

.pub-link-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  color: var(--muted);
}

.pub-link-card strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.pub-link-card span:not(.pub-link-arrow) {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
}

.pub-link-arrow {
  font-size: 1rem;
  color: var(--soft);
  margin-top: auto;
  transition: transform var(--transition), color var(--transition);
}

.pub-link-card:hover .pub-link-arrow {
  transform: translateX(4px);
  color: var(--muted);
}

/* ─── Light mode stripe for canaux section ───────────────── */
html[data-theme="light"] .section-shell:has(.pub-links-grid) {
  position: relative;
  padding-top: 56px;
  padding-bottom: 56px;
}

html[data-theme="light"] .section-shell:has(.pub-links-grid)::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: #f5f5f7;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .pub-process-grid { grid-template-columns: repeat(2, 1fr); }
  .pub-links-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .pub-channels-panel { padding: 20px; }
  .pub-process-grid { grid-template-columns: 1fr; }
  .pub-links-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   PAGE STRATÉGIE DIGITALE — composants spécifiques
══════════════════════════════════════════════════════════════ */

/* ─── Hero panel diagnostic ─────────────────────────────── */
.strat-diag-panel {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
  background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-theme="light"] .strat-diag-panel {
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,255,255,0.84));
}

.strat-panel-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.strat-diag-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.strat-diag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: var(--surface);
  transition: background var(--transition);
}

.strat-diag-row:hover {
  background: var(--surface-strong);
}

.strat-diag-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.strat-diag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.strat-dot--warn {
  background: #d4a017;
  box-shadow: 0 0 8px rgba(212,160,23,0.5);
}

.strat-diag-label {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.3;
}

.strat-diag-fix {
  font-size: 1rem;
  font-weight: 600;
  color: var(--soft);
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
}

.strat-panel-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--soft);
}

/* ─── 4 piliers grid ─────────────────────────────────────── */
.strat-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.strat-pillar-card {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.strat-pillar-num {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--soft);
  letter-spacing: -0.03em;
}

.strat-pillar-card h3 {
  font-size: 1.25rem;
  line-height: 1.1;
}

.strat-pillar-card p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
  flex: 1;
}

/* ─── Light mode stripe for piliers ─────────────────────── */
html[data-theme="light"] .section-shell:has(.strat-pillars-grid) {
  position: relative;
  padding-top: 56px;
  padding-bottom: 56px;
}

html[data-theme="light"] .section-shell:has(.strat-pillars-grid)::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: #f9f9fb;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .strat-pillars-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .strat-diag-panel { padding: 20px; }
  .strat-pillars-grid { grid-template-columns: 1fr; }
  .strat-diag-fix { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   PAGE SUIVI & ANALYSE — composants spécifiques
══════════════════════════════════════════════════════════════ */

/* ─── Hero panel dashboard ──────────────────────────────── */
.suivi-dashboard-panel {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
  background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-theme="light"] .suivi-dashboard-panel {
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,255,255,0.84));
}

.suivi-panel-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.suivi-metric-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.suivi-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: var(--surface);
  transition: background var(--transition);
}

.suivi-metric-row:hover {
  background: var(--surface-strong);
}

.suivi-metric-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.suivi-metric-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  color: var(--soft);
}

.suivi-metric-label {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suivi-metric-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.suivi-metric-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.suivi-metric-badge {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.suivi-badge--good {
  color: #1db87a;
  background: rgba(29,184,122,0.15);
}

.suivi-badge--warn {
  color: #d4a017;
  background: rgba(212,160,23,0.14);
}

.suivi-badge--neutral {
  color: var(--muted);
  background: var(--surface-strong);
  border: 1px solid var(--line);
}

.suivi-action-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--soft);
  padding-top: 2px;
  border-top: 1px solid var(--line);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 760px) {
  .suivi-dashboard-panel { padding: 20px; }
  .suivi-metric-value { display: none; }
}