/* ═══════════════════════════════════════════════════════════════════
   13FLOW — Layer de polish global (couche finale design 2026)
   Améliore l'existant sans casser les styles spécifiques
   ═══════════════════════════════════════════════════════════════════ */

/* ───── 1. SHADOWS PREMIUM sur toutes les cards ───── */
.offre,
.pain-card,
.value-card,
.why-card,
.review-card,
.step-card,
.comp-card,
.faq-item,
.contact-block,
.commission-box,
.proc-card,
.av-result,
.exit-modal-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.3s ease;
}
.offre:hover,
.pain-card:hover,
.value-card:hover,
.why-card:hover,
.review-card:hover,
.step-card:hover,
.comp-card:hover {
  box-shadow: 0 4px 12px rgba(194, 65, 12, 0.06), 0 24px 56px rgba(0, 0, 0, 0.12);
}

/* Light mode shadows premium */
:root[data-theme="light"] .offre,
:root[data-theme="light"] .pain-card,
:root[data-theme="light"] .value-card,
:root[data-theme="light"] .why-card,
:root[data-theme="light"] .review-card,
:root[data-theme="light"] .step-card,
:root[data-theme="light"] .comp-card,
:root[data-theme="light"] .faq-item {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .offre:hover,
:root[data-theme="light"] .pain-card:hover,
:root[data-theme="light"] .value-card:hover,
:root[data-theme="light"] .why-card:hover,
:root[data-theme="light"] .review-card:hover,
:root[data-theme="light"] .step-card:hover,
:root[data-theme="light"] .comp-card:hover {
  box-shadow: 0 4px 14px rgba(194, 65, 12, 0.12), 0 24px 56px rgba(0, 0, 0, 0.10);
}

/* ───── 2. TYPOGRAPHIE : letter-spacing fines + line-height optimal ───── */
h1, .hero-h1 {
  font-feature-settings: "ss01" on, "kern" on;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h2, h3, h4, h5 {
  letter-spacing: -0.02em;
  font-feature-settings: "kern" on;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ───── 3. SCROLLBAR PREMIUM (Firefox + Webkit) ───── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(194, 65, 12, 0.35) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(194, 65, 12, 0.30);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(194, 65, 12, 0.55);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ───── 4. FOCUS STATES premium (a11y + premium feel) ───── */
*:focus { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #C2410C);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ───── 5. SELECTION ───── */
::selection {
  background: rgba(194, 65, 12, 0.30);
  color: var(--text, inherit);
}
:root[data-theme="light"] ::selection {
  background: rgba(194, 65, 12, 0.20);
  color: #1C1C1F;
}

/* ───── 6. SECTIONS — spacing harmonisé ───── */
section.sec {
  position: relative;
}
/* Smooth transitions when changing background between sections */
section.sec,
section.sec-dark {
  transition: background-color 0.4s ease;
}

/* ───── 7. SECTION EYEBROWS — premium uniform ───── */
.eyebrow,
.section-label,
.av-eyebrow,
.faq-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent, #C2410C);
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--accent-soft, rgba(194, 65, 12, 0.10));
  border: 1px solid rgba(194, 65, 12, 0.25);
  margin-bottom: 18px;
}
.eyebrow .dot,
.section-label .dot,
.av-eyebrow .dot,
.faq-section-label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #C2410C);
  box-shadow: 0 0 10px var(--accent, #C2410C);
  animation: pulse 2s infinite;
}

/* ───── 8. CARD CORNER ACCENT — subtle 1px highlight ───── */
.offre::before,
.pain-card::before,
.value-card::before,
.why-card::before,
.comp-card::before,
.faq-item:not([open])::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194, 65, 12, 0.20), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.offre:hover::before,
.pain-card:hover::before,
.value-card:hover::before,
.why-card:hover::before,
.comp-card:hover::before {
  opacity: 1;
}

/* ───── 9. SECTION DIVIDERS — soft gradient line ───── */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, var(--border, rgba(255, 255, 255, 0.07)) 50%, transparent 90%);
  margin: 40px 0;
}

/* ───── 10. NUMBERS / METRICS — tabular numerics ───── */
.sp-num,
.stat-num,
.score-num,
.av-impact-num,
.av-score-num,
.vs-result-num,
.cp-float-num,
.cp-bench-price-setup,
.cp-bench-price-monthly,
.cp-mini-val,
.spec-total-num,
.invest-stat .v em,
.sb-cell strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on;
}

/* ───── 11. LINKS hover smoothness ───── */
a {
  transition: color 0.2s ease, opacity 0.2s ease;
}
a:hover {
  text-decoration: none;
}

/* ───── 12. SECTION SPACING — generous breathing on premium pages ───── */
@media (min-width: 1024px) {
  .sec,
  .section {
    padding-top: clamp(72px, 9vw, 120px);
    padding-bottom: clamp(72px, 9vw, 120px);
  }
}

/* ───── 13. PREMIUM BUTTON DEFAULTS ───── */
.btn,
button[type="submit"]:not(.theme-toggle):not(.rdv-close):not(.faq-toggle) {
  letter-spacing: -0.005em;
  font-feature-settings: "kern" on;
}

/* ───── 14. ACCORDION FAQ — Polish ───── */
.faq-item summary {
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-ico {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq-item[open] .faq-ico {
  transform: rotate(180deg);
  color: var(--accent, #C2410C);
}

/* ───── 15. IMAGES — premium loading ───── */
img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

/* ───── 16. TOOLTIP-STYLE hover info (for trust signals) ───── */
[data-tooltip] {
  position: relative;
}

/* ───── 17. SOFT FADE EDGES on scrollable content ───── */
.compare-wrap,
.scroll-snap-x {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
}

/* ───── 18. MICRO-PULSE on primary CTAs at rest ───── */
@keyframes ctaSubtleBreath {
  0%, 100% { box-shadow: 0 8px 28px rgba(194, 65, 12, 0.30); }
  50%     { box-shadow: 0 12px 36px rgba(194, 65, 12, 0.45); }
}
.hero-cta-wrap .btn-fire,
.cp-final-cta,
.av-cta-primary,
.rdv-primary {
  animation: ctaSubtleBreath 3.5s ease-in-out infinite;
}
.hero-cta-wrap .btn-fire:hover,
.cp-final-cta:hover,
.av-cta-primary:hover,
.rdv-primary:hover {
  animation: none;
}

/* ───── 19. GENERAL CARDS in light mode — better contrast ───── */
:root[data-theme="light"] .pain-card,
:root[data-theme="light"] .value-card,
:root[data-theme="light"] .why-card,
:root[data-theme="light"] .step-card,
:root[data-theme="light"] .comp-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .pain-card:hover,
:root[data-theme="light"] .value-card:hover,
:root[data-theme="light"] .why-card:hover,
:root[data-theme="light"] .step-card:hover,
:root[data-theme="light"] .comp-card:hover {
  border-color: rgba(194, 65, 12, 0.30);
}

/* ───── 20. SECTION HEADERS — premium ───── */
.sec-header h2,
.section-title {
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.sec-header p,
.section-subtitle {
  text-wrap: pretty;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ───── 21. PRINT-FRIENDLY ───── */
@media print {
  .nav, .footer, .sticky-cta, .top-banner,
  .rdv-backdrop, .theme-toggle, #mia-bubble, #mia-window,
  .exit-modal {
    display: none !important;
  }
}

/* ───── 22. REDUCED MOTION ───── */
@media (prefers-reduced-motion: reduce) {
  .hero-cta-wrap .btn-fire,
  .cp-final-cta,
  .av-cta-primary,
  .rdv-primary {
    animation: none !important;
  }
}

/* ═══ HAMBURGER UNIVERSEL — appliqué à tous les viewports (desktop inclus) ═══
   Issu de la refonte mai 2026 : nav simplifiée, tous les liens dans le menu mobile. */
.nav .nav-links {
  display: none !important;
}
.nav .burger,
.nav .nav-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
/* Cache "À propos" et "Theme toggle" sur desktop — ils restent dans le menu mobile */
.nav .nav-actions .nav-signin {
  display: none !important;
}
/* CTA "Audit gratuit" reste visible à côté du hamburger sur desktop */
.nav .nav-actions .nav-cta {
  display: inline-flex !important;
}
@media (max-width: 720px) {
  .nav .nav-actions .nav-cta {
    display: none !important;
  }
}