/* ═══════════════════════════════════════════════════════════════
   PerfShop.io — Light Theme Override
   Charge APRÈS theme.css et index.css pour convertir dark → light.
   Qualité production — ne modifie que les couleurs, pas la structure.
   ═══════════════════════════════════════════════════════════════ */

/* ── Polices ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ══════════════════════════════════════
   1. VARIABLES — override complet
══════════════════════════════════════ */
:root {
  /* Fonds */
  --bg:       #FFFFFF;
  --surface:  #F7F8FC;
  --surface2: #ECEEF8;

  /* Bordures */
  --border:  #E0E3F2;
  --border2: rgba(91,106,208,.18);

  /* Accents — calibrés pour fond clair */
  --accent:   #5B6AD0;
  --electric: #0891B2;
  --teal:     #0D9488;
  --purple:   #7C3AED;
  --cyan:     #0891B2;
  --danger:   #DC2626;
  --warning:  #D97706;
  --success:  #059669;

  /* Textes */
  --text:  #0F1123;
  --text2: #4B5170;
  --text3: #8B90B5;

  /* Zones sombres (features.html) */
  --zd1: #2A2D6E;
  --zd2: #1C1F58;
  --zd4: #0C0E30;
}

/* ══════════════════════════════════════
   2. BODY / GLOBAL
══════════════════════════════════════ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'DM Sans', sans-serif;
}

/* Bruit — très discret sur fond clair */
body::before { opacity: .015; }

/* ══════════════════════════════════════
   3. NAVIGATION
══════════════════════════════════════ */
nav {
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 16px rgba(91,106,208,.07) !important;
}
.nav-logo { color: var(--text) !important; }
.nav-links a { color: var(--text2) !important; }
.nav-links a:hover,
.nav-links a.active { color: var(--text) !important; }

/* Language switcher */
.lang-switch {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
.lang-switch span { color: var(--text2) !important; }
.lang-switch span.active {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════
   4. BOUTONS
══════════════════════════════════════ */
.btn-primary {
  background: var(--accent) !important;
  box-shadow: 0 4px 14px rgba(91,106,208,.25) !important;
}
.btn-primary:hover {
  background: #4A59C4 !important;
  box-shadow: 0 6px 22px rgba(91,106,208,.38) !important;
}
.btn-ghost {
  background: transparent !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
}
.btn-ghost:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(91,106,208,.04) !important;
}
.btn-electric {
  background: linear-gradient(135deg,var(--electric),#0369A1) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(8,145,178,.25) !important;
}
.btn-purple {
  background: var(--purple) !important;
  box-shadow: 0 4px 14px rgba(124,58,237,.25) !important;
}
/* Hero-specific buttons on light bg */
.btn-hero {
  background: linear-gradient(135deg,var(--accent),var(--purple)) !important;
  box-shadow: 0 4px 20px rgba(91,106,208,.28) !important;
}
.btn-hero:hover { box-shadow: 0 8px 30px rgba(91,106,208,.4) !important; }
.btn-hero-ghost {
  border-color: var(--border2) !important;
  color: var(--text) !important;
}
.btn-hero-ghost:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(91,106,208,.04) !important;
}
/* Plan buttons (pricing) */
.featured-btn {
  background: linear-gradient(135deg,var(--accent),var(--purple)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(91,106,208,.3) !important;
}
.btn-plan {
  border-color: var(--border) !important;
  color: var(--text2) !important;
}
.btn-plan:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ══════════════════════════════════════
   5. SECTION / LAYOUT
══════════════════════════════════════ */
.section-wrap { /* bg transparent, hérite du body */ }
.full-divider  { border-color: var(--border) !important; }
.section-title { color: var(--text) !important; }
.section-sub   { color: var(--text2) !important; }
.page-hero     { background: linear-gradient(180deg,#F0F3FF 0%,#FFFFFF 100%) !important; }
.hero-sub      { color: var(--text2) !important; }

/* ══════════════════════════════════════
   6. CARDS GÉNÉRIQUES
══════════════════════════════════════ */
.card {
  background: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 12px rgba(91,106,208,.05) !important;
}
.card:hover {
  box-shadow: 0 10px 36px rgba(91,106,208,.1) !important;
  border-color: rgba(91,106,208,.22) !important;
}
.card-label { color: var(--text2) !important; }

/* ══════════════════════════════════════
   7. TAGS
══════════════════════════════════════ */
/* Couleurs de tag calibrées WCAG AA ≥4.5:1 sur fond clair (texte plus sombre que la variable) */
.section-tag {
  background: rgba(91,106,208,.08) !important;
  color: #3D4BB5 !important;           /* accent assombri — 6.4:1 */
  border-color: rgba(91,106,208,.22) !important;
}
.section-tag.tag-teal   { background: rgba(13,148,136,.07) !important; color: #0A6E66 !important; border-color: rgba(13,148,136,.22) !important; }  /* 5.1:1 */
.section-tag.tag-purple { background: rgba(124,58,237,.07) !important; color: #5B22C4 !important; border-color: rgba(124,58,237,.22) !important; }  /* 5.8:1 */
.section-tag.tag-danger { background: rgba(220,38,38,.07)  !important; color: #B91C1C !important; border-color: rgba(220,38,38,.18)  !important; }  /* 5.6:1 */
.section-tag.tag-warn   { background: rgba(217,119,6,.07)  !important; color: #92400E !important; border-color: rgba(217,119,6,.18)  !important; }  /* 5.2:1 */
.section-tag.tag-elec   { background: rgba(8,145,178,.07)  !important; color: #0C6E89 !important; border-color: rgba(8,145,178,.18)  !important; }  /* 5.3:1 */
.section-tag.tag-cyan   { background: rgba(8,145,178,.07)  !important; color: #0C6E89 !important; border-color: rgba(8,145,178,.18)  !important; }  /* 5.3:1 */
.section-tag.tag-accent { background: rgba(91,106,208,.08) !important; color: #3D4BB5 !important; border-color: rgba(91,106,208,.22) !important; }  /* 6.4:1 */

/* Feature tags (features.html anomaly cards) */
.feature-tag.tag-backend   { background: rgba(91,106,208,.09) !important;  color: var(--accent)  !important; }
.feature-tag.tag-frontend  { background: rgba(13,148,136,.08) !important;  color: var(--teal)    !important; }
.feature-tag.tag-scripting { background: rgba(124,58,237,.08) !important;  color: var(--purple)  !important; }
.feature-tag.tag-apm       { background: rgba(8,145,178,.08)  !important;  color: var(--cyan)    !important; }
.feature-tag.tag-new       { background: rgba(5,150,105,.08)  !important;  color: var(--success) !important; }

/* ══════════════════════════════════════
   8. HERO — index.html
══════════════════════════════════════ */
.hero {
  background: linear-gradient(180deg,#F0F3FF 0%,#FFFFFF 100%) !important;
  position: relative;
}
/* Désactiver les orbs sombres en mode clair */
.hero .orb { opacity: .05 !important; }

/* Grille de points plus claire */
.hero::after {
  background-image:
    linear-gradient(rgba(91,106,208,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,106,208,.05) 1px,transparent 1px) !important;
}
.hero-title { color: var(--text) !important; }
.hero-badge {
  background: rgba(91,106,208,.08) !important;
  border-color: rgba(91,106,208,.2) !important;
  color: var(--accent) !important;
}
.hero-badge .dot { background: var(--success) !important; }
.stat-num   { color: var(--accent) !important; }
.stat-label { color: var(--text2) !important; }

/* ── Preview frame (mockup app) — RESTER SOMBRE ── */
.preview-frame {
  background: #13131e !important;
  border-color: rgba(255,255,255,.06) !important;
  box-shadow: 0 40px 80px rgba(15,17,35,.15) !important;
}
.preview-titlebar { background: #0a0a12 !important; border-color: rgba(255,255,255,.07) !important; }
.preview-url { background: #0d0d18 !important; border-color: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.35) !important; }
.preview-content { background: #13131e !important; }
.mock-card { background: #1c1c2e !important; border-color: rgba(255,255,255,.07) !important; }
.mock-card-title { color: rgba(255,255,255,.4) !important; }
.mock-value { color: #e8e8f0 !important; }
.mock-value.green { color: #2ed573 !important; }
.mock-value.blue  { color: #667eea !important; }
.mock-value.red   { color: #ff4757 !important; }
.mock-value.warn  { color: #ffa502 !important; }
.mock-sub { color: rgba(255,255,255,.35) !important; }
.mock-chart { background: #1c1c2e !important; }
.mock-bar { opacity: .35 !important; }
.mock-chaos-row { background: transparent !important; }
.mock-chaos-card { background: #1c1c2e !important; border-color: rgba(255,255,255,.07) !important; }
.mock-chaos-level.off { color: rgba(255,255,255,.2) !important; }

/* ══════════════════════════════════════
   9. SECTION FEATURES — index.html
══════════════════════════════════════ */
.features-section { background: transparent !important; }
.feature-card {
  background: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 12px rgba(91,106,208,.05) !important;
}
.feature-card::before { background: radial-gradient(circle at 0% 0%,rgba(91,106,208,.08),transparent 70%) !important; }
.feature-card:hover {
  box-shadow: 0 14px 44px rgba(91,106,208,.1) !important;
  border-color: rgba(91,106,208,.22) !important;
}
.feature-name { color: var(--text) !important; }
.feature-desc { color: var(--text2) !important; }
.feature-item {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
}

/* ══════════════════════════════════════
   10. SECTION DEMO — index.html
══════════════════════════════════════ */
.demo-section {
  background: var(--surface) !important;
}
.demo-panel {
  background: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 24px rgba(91,106,208,.07) !important;
}
.demo-panel-title { color: var(--text) !important; }
.slider-label      { color: var(--text2) !important; }
.slider-val        { color: var(--accent) !important; }
.slider-track      { background: var(--border) !important; }

/* ══════════════════════════════════════
   11. PRICING — index.html + pricing.html
══════════════════════════════════════ */
.pricing-section { background: var(--surface) !important; }
.pricing-card {
  background: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 12px rgba(91,106,208,.05) !important;
}
.pricing-card.featured {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(91,106,208,.08), 0 8px 40px rgba(91,106,208,.12) !important;
}
.plan-name   { color: var(--text) !important; }
.plan-price  { color: var(--text) !important; }
.plan-desc   { color: var(--text2) !important; border-color: var(--border) !important; }
.plan-features li { color: var(--text2) !important; }
.plan-features .check { color: var(--success) !important; }
.plan-features .cross { color: var(--text3) !important; }

/* ══════════════════════════════════════
   12. STACK — index.html
══════════════════════════════════════ */
.stack-section {
  background: linear-gradient(180deg,var(--surface) 0%,#FFFFFF 100%) !important;
}
.stack-card {
  background: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 8px rgba(91,106,208,.04) !important;
}
.stack-card:hover {
  border-color: rgba(91,106,208,.2) !important;
  box-shadow: 0 8px 28px rgba(91,106,208,.08) !important;
}
.stack-name { color: var(--text) !important; }
.stack-type { color: var(--text2) !important; }
.stack-badge.available { background: rgba(5,150,105,.08) !important; color: var(--success) !important; border-color: rgba(5,150,105,.15) !important; }
.stack-badge.soon      { background: rgba(217,119,6,.08)  !important; color: var(--warning) !important; border-color: rgba(217,119,6,.15)  !important; }

/* ══════════════════════════════════════
   13. SOCIAL / LOGOS
══════════════════════════════════════ */
.social-section { background: var(--surface) !important; }
.social-label { color: var(--text3) !important; }
.logo-item { color: var(--text3) !important; }

/* ══════════════════════════════════════
   14. CTA SECTION — gradient conservé
══════════════════════════════════════ */
.cta-section::before {
  background: radial-gradient(ellipse at 50% 0%,rgba(91,106,208,.1),transparent 70%) !important;
}
.cta-title { color: var(--text) !important; }
.cta-sub   { color: var(--text2) !important; }

/* ══════════════════════════════════════
   15. FOOTER — indigo profond
══════════════════════════════════════ */
footer {
  background: var(--zd4) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
footer .footer-brand p,
footer .footer-col h4,
footer .footer-col a { color: rgba(255,255,255,.68) !important; }
footer .footer-col a:hover { color: rgba(255,255,255,.9) !important; }
footer .footer-bottom,
footer .footer-bottom a { color: rgba(255,255,255,.42) !important; }
footer .footer-bottom a:hover { color: rgba(255,255,255,.72) !important; }
/* Logo PerfShop dans le footer */
footer .footer-brand .nav-logo { color: rgba(255,255,255,.88) !important; }
footer .footer-brand .nav-logo span { color: rgba(255,255,255,.5) !important; }

/* ══════════════════════════════════════
   16. FORMULAIRES — toutes pages
══════════════════════════════════════ */
.form-input,
.form-select,
.form-textarea {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(91,106,208,.1) !important;
}
.form-label { color: var(--text2) !important; }
input::placeholder,
textarea::placeholder { color: var(--text3) !important; }

/* ══════════════════════════════════════
   17. CODE BLOCK
══════════════════════════════════════ */
.code-block {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--teal) !important;
}

/* ══════════════════════════════════════
   18. FEATURES.HTML — anomaly cards
══════════════════════════════════════ */
.anomaly-card {
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(91,106,208,.05) !important;
}
.anomaly-card:hover {
  box-shadow: 0 10px 36px rgba(91,106,208,.1) !important;
}
.anomaly-name { color: var(--text) !important; }
.anomaly-type { color: var(--text2) !important; }
.anomaly-desc { color: var(--text2) !important; }
.level-pills .pill { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text2) !important; }
.level-pills .pill.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* Screenshot box */
.screenshot-box {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Stack groups (Docker section) */
.stack-group-hdr { color: var(--text2) !important; }
.stack-dot { background: var(--border) !important; }
.socle-card {
  background: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 8px rgba(91,106,208,.04) !important;
}
.socle-card:hover {
  border-color: rgba(91,106,208,.2) !important;
  box-shadow: 0 8px 28px rgba(91,106,208,.08) !important;
}

/* Tabs (scripting section) */
.tab-btn {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
}
.tab-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.tab-content {
  background: #fff !important;
  border-color: var(--border) !important;
}

/* ══════════════════════════════════════
   19. FEATURES.HTML — ZONE SOMBRE (anomalies)
   Classe ajoutée à la section-wrap du chaos
══════════════════════════════════════ */
.zone-dark {
  background: linear-gradient(180deg,var(--zd1) 0%,var(--zd2) 100%) !important;
  position: relative;
  z-index: 1;
}

/* Cacher les <hr> autour de zone-dark — classe explicite, sans :has() */
.hr-zone-transition,
.zone-dark + hr.full-divider {
  display: none !important;
}

/* Vague d'entrée — blanc → indigo */
.zone-dark::before {
  content: '';
  position: absolute;
  top: -52px;
  left: 0; right: 0;
  height: 52px;
  pointer-events: none;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 52' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C360 52 1080 0 1440 34 L1440 52 L0 52 Z' fill='%232A2D6E'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

/* Vague de sortie — indigo → blanc */
.zone-dark::after {
  content: '';
  position: absolute;
  bottom: -52px;
  left: 0; right: 0;
  height: 52px;
  pointer-events: none;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 52' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 52 C480 0 960 52 1440 18 L1440 0 L0 0 Z' fill='%231C1F58'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

/* Textes dans la zone sombre */
.zone-dark .section-title,
.zone-dark h2,
.zone-dark h3 { color: #fff !important; }
.zone-dark .section-sub,
.zone-dark p:not(.anomaly-desc) { color: rgba(255,255,255,.5) !important; }
.zone-dark .section-tag.tag-danger {
  background: rgba(239,68,68,.15) !important;
  color: #FCA5A5 !important;
  border-color: rgba(239,68,68,.25) !important;
}
.zone-dark .section-tag.tag-warn {
  background: rgba(251,191,36,.12) !important;
  color: #FDE68A !important;
  border-color: rgba(251,191,36,.2) !important;
}

/* Anomaly cards dans zone sombre */
.zone-dark .anomaly-card {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: none !important;
}
.zone-dark .anomaly-card:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(165,180,252,.3) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.3) !important;
}
.zone-dark .anomaly-name { color: #fff !important; }
.zone-dark .anomaly-type { color: rgba(165,180,252,.8) !important; }
.zone-dark .anomaly-desc { color: rgba(255,255,255,.45) !important; }
.zone-dark .feature-tag.tag-backend   { background: rgba(91,106,208,.15) !important; color: #A5B4FC !important; }
.zone-dark .feature-tag.tag-frontend  { background: rgba(13,148,136,.12) !important; color: #5EEAD4 !important; }
.zone-dark .feature-tag.tag-scripting { background: rgba(124,58,237,.12) !important; color: #C4B5FD !important; }
.zone-dark .feature-tag.tag-apm       { background: rgba(8,145,178,.12)  !important; color: #7DD3FC !important; }
.zone-dark .feature-tag.tag-new       { background: rgba(5,150,105,.12)  !important; color: #6EE7B7 !important; }
.zone-dark .level-pills .pill {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.5) !important;
}
.zone-dark .level-pills .pill.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
/* Notice/info box dans zone sombre */
.zone-dark [style*="background:rgba(250,204,21"] {
  background: rgba(251,191,36,.1) !important;
  border-color: rgba(251,191,36,.2) !important;
}

/* APM grid dans zone sombre */
.zone-dark .apm-grid .card,
.zone-dark .socle-card {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.zone-dark .socle-card:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(165,180,252,.25) !important;
}
.zone-dark .stack-group-hdr { color: rgba(255,255,255,.35) !important; }

/* ══════════════════════════════════════
   20. PRICING.HTML — page dédiée
══════════════════════════════════════ */
.notice-banner {
  background: rgba(91,106,208,.07) !important;
  border-color: rgba(91,106,208,.18) !important;
  color: var(--text2) !important;
}

/* Segments / onglets de profil */
.seg-tabs {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.seg-tab {
  color: var(--text2) !important;
  background: transparent !important;
}
.seg-tab.active {
  background: #fff !important;
  color: var(--text) !important;
  box-shadow: 0 2px 8px rgba(91,106,208,.1) !important;
}

/* Profile card */
.seg-profile.active { background: transparent !important; }
.seg-pd-card {
  background: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 24px rgba(91,106,208,.07) !important;
}
.seg-pd-glow { display: none !important; } /* pas de glow sur fond clair */
.seg-pd-badge {
  background: rgba(91,106,208,.08) !important;
  border-color: rgba(91,106,208,.18) !important;
  color: var(--accent) !important;
}
.seg-pd-name { color: var(--text) !important; }
.seg-model-row { border-color: var(--border) !important; }
.seg-price { color: var(--text) !important; }
.seg-price-sub { color: var(--text2) !important; }
.seg-divider { border-color: var(--border) !important; }
.seg-feat { color: var(--text2) !important; }
.seg-feat-check { color: var(--success) !important; }
.seg-feat-cross { color: var(--text3) !important; }

/* Colonne droite pricing */
.seg-pd-right { background: var(--surface) !important; border-color: var(--border) !important; }

/* FAQ */
.faq-item { border-color: var(--border) !important; }
.faq-q { color: var(--text) !important; }
.faq-q:hover { color: var(--accent) !important; }
.faq-arrow { color: var(--text3) !important; }
.faq-a {
  color: var(--text2) !important;
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
}

/* ══════════════════════════════════════
   21. CONTACT.HTML — page dédiée
══════════════════════════════════════ */
/* Zone de contact (fond de la page) */
.contact-wrap + * { background: var(--bg) !important; }

.cp-info-card {
  background: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 12px rgba(91,106,208,.05) !important;
  color: var(--text) !important;
}
.cp-info-label { color: var(--text2) !important; }
.cp-info-icon  { background: var(--surface) !important; border-color: var(--border) !important; }

.cp-demo-badge {
  background: rgba(91,106,208,.08) !important;
  border-color: rgba(91,106,208,.18) !important;
  color: var(--accent) !important;
}
.cp-demo-desc { color: var(--text2) !important; }

/* Form card */
.cp-form-card {
  background: #fff !important;
  border-color: rgba(91,106,208,.18) !important;
  box-shadow: 0 4px 30px rgba(91,106,208,.07) !important;
}
.cp-form-card::after {
  background: var(--accent) !important;
  opacity: .035 !important;
}
/* Gradient top border conservé */
.cp-form-title { color: var(--text) !important; }
.cp-form-group-title { color: var(--text2) !important; }
.cp-label { color: var(--text2) !important; }

.cp-input,
.cp-select {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.cp-input:focus,
.cp-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(91,106,208,.1) !important;
  background: #fff !important;
}
.cp-required-note { color: var(--text3) !important; }
.cp-success {
  background: rgba(5,150,105,.06) !important;
  border-color: rgba(5,150,105,.2) !important;
  color: var(--success) !important;
}
.cp-error {
  background: rgba(220,38,38,.05) !important;
  border-color: rgba(220,38,38,.15) !important;
  color: var(--danger) !important;
}

/* Email link */
.cp-email-link { color: var(--accent) !important; }
.cp-email-link:hover { color: #4A59C4 !important; }

/* ══════════════════════════════════════
   22. LEGAL.HTML — mentions légales
══════════════════════════════════════ */
/* Sous-nav sticky — fond hardcodé dark dans inline <style>, override requis */
.legal-nav {
  background: rgba(255,255,255,.95) !important;
  border-bottom-color: var(--border) !important;
}
.legal-nav a { color: var(--text2) !important; }
.legal-nav a:hover { color: var(--text) !important; }
.legal-nav a.active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }

.legal-section { background: var(--bg) !important; }
.legal-section h2,
.legal-section h3 { color: var(--text) !important; }
.legal-section p,
.legal-section li { color: var(--text2) !important; }
.legal-section a { color: var(--accent) !important; }
.legal-toc { background: var(--surface) !important; border-color: var(--border) !important; }

/* ══════════════════════════════════════
   23. SCREENSHOTS.HTML
══════════════════════════════════════ */
.filter-btn {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
}
.filter-btn.active {
  background: #fff !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
}
.filter-count { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text3) !important; }
.shot-card {
  background: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 12px rgba(91,106,208,.05) !important;
}
.shot-card:hover {
  box-shadow: 0 12px 40px rgba(91,106,208,.1) !important;
  border-color: rgba(91,106,208,.22) !important;
}
.browser-chrome { background: #1A1B36 !important; } /* garde dark pour le chrome navigateur */

/* ══════════════════════════════════════
   24. DEMO.HTML
══════════════════════════════════════ */
.demo-hero { background: linear-gradient(180deg,#F0F3FF,#fff) !important; }
.demo-card {
  background: #fff !important;
  border-color: var(--border) !important;
}

/* ══════════════════════════════════════
   25. ABOUT.HTML
══════════════════════════════════════ */
.about-card {
  background: #fff !important;
  border-color: var(--border) !important;
}

/* ══════════════════════════════════════
   26. RESPONSIVE — ajustements light
══════════════════════════════════════ */
@media (max-width: 900px) {
  nav { background: rgba(255,255,255,.97) !important; }
  /* Mobile menu */
  .nav-mobile-menu {
    background: rgba(255,255,255,.97) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .nav-mobile-menu a { color: var(--text2) !important; }
  .nav-mobile-menu a:hover { color: var(--text) !important; background: var(--surface) !important; }
}

@media (max-width: 480px) {
  /* Zone dark — vagues SVG réduites pour éviter chevauchement sur 375px */
  .zone-dark::before {
    height: 32px !important;
    top: -32px !important;
  }
  .zone-dark::after {
    height: 32px !important;
    bottom: -32px !important;
  }
}