/* =============================
   Havre Scintillant Finance — style.css
   Design style: professional_corporate (blue/gray palette, structured layout, business fonts, formal tone)
   Mobile-first, flexbox-only layouts, high contrast, smooth interactions
   ============================= */

/* =============================
   0) RESET & NORMALIZE
   ============================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.6; }
img, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding-left: 1.2rem; }
p { margin: 0; }
button { font: inherit; color: inherit; background: transparent; border: none; padding: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #6B5CA5; outline-offset: 2px; }

/* =============================
   1) THEME TOKENS & TYPOGRAPHY
   ============================= */
:root {
  --color-primary: #0F4C5C; /* brand primary */
  --color-secondary: #6B5CA5; /* brand secondary */
  --color-accent: #F5F7FA; /* brand accent (light) */
  --color-text: #1F2937; /* gray-800 */
  --color-muted: #6B7280; /* gray-500 */
  --color-border: #E5E7EB; /* gray-200 */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F8FAFC; /* light alt background */
  --color-success: #2A9D8F;
  --color-danger: #B00020;

  --font-display: Georgia, "Times New Roman", serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 6px 16px rgba(15, 76, 92, 0.08);
  --shadow-lg: 0 14px 28px rgba(15, 76, 92, 0.12);

  --transition-fast: 180ms ease;
  --transition-base: 240ms ease;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 16px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: #0B1F2A; /* deep corporate heading */
  margin: 0;
  line-height: 1.25;
}

h1 { font-size: 32px; letter-spacing: -0.2px; }
h2 { font-size: 24px; margin-bottom: 8px; }
h3 { font-size: 18px; }

p, li { color: var(--color-text); font-size: 16px; }
small { font-size: 14px; color: var(--color-muted); }

/* Typography scale for larger screens */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
}

/* =============================
   2) GLOBAL LAYOUT HELPERS (FLEXBOX-ONLY)
   ============================= */
.container {
  display: flex; /* flexbox-only */
  justify-content: center;
  width: 100%;
  padding: 0 20px;
}
.content-wrapper {
  display: flex; /* flexbox-only */
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* Sections spacing (global + mandatory class) */
section { margin-bottom: 60px; padding: 40px 20px; background: transparent; }
.section { margin-bottom: 60px; padding: 40px 20px; }

/* Alternating subtle backgrounds for corporate rhythm */
main section:nth-of-type(even) { background: var(--color-accent); }

/* Generic card pattern */
.card, .text-section, .info-card {
  display: flex; /* flexbox-only */
  flex-direction: column;
  gap: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.card:hover, .text-section:hover, .info-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Mandatory spacing & alignment patterns */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Responsive rule for text-image sections */
@media (max-width: 768px) { .text-image-section { flex-direction: column; } }

/* =============================
   3) HEADER & NAVIGATION
   ============================= */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
}
header .content-wrapper {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}
.logo { display: flex; align-items: center; }
.logo img { height: 40px; width: auto; }

.main-nav {
  display: none; /* mobile hidden */
}
.main-nav a {
  padding: 8px 10px;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.main-nav a[aria-current="page"], .main-nav a:hover {
  color: var(--color-primary);
  background: var(--color-accent);
}

.header-cta {
  display: none; /* mobile hidden */
}
.header-cta .btn { margin-left: 8px; }

.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.mobile-menu-toggle:hover { background: #E9EEF5; transform: translateY(-1px); }

/* Desktop header layout */
@media (min-width: 992px) {
  header .content-wrapper {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .main-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .header-cta { display: flex; align-items: center; gap: 10px; }
  .mobile-menu-toggle { display: none; }
}

/* =============================
   4) MOBILE MENU (overlay)
   ============================= */
.mobile-menu {
  position: fixed;
  inset: 0;
  display: flex; /* flexbox-only */
  flex-direction: column;
  background: #FFFFFF;
  transform: translateX(100%);
  transition: transform var(--transition-base);
  z-index: 1200;
  border-left: 1px solid var(--color-border);
}
/* Open state controlled via aria-hidden toggle (JS should set to false) */
.mobile-menu[aria-hidden="false"], .mobile-menu.open {
  transform: translateX(0);
}
.mobile-menu-close {
  align-self: flex-end;
  margin: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
}
.mobile-nav {
  display: flex; /* flexbox-only */
  flex-direction: column;
  gap: 8px;
  padding: 0 20px 20px 20px;
}
.mobile-nav a {
  padding: 14px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.mobile-nav a:hover { background: var(--color-accent); border-color: #D6DBE1; }
.mobile-nav a[aria-current="page"] { border-color: var(--color-primary); color: var(--color-primary); }

/* =============================
   5) BUTTONS & LINKS
   ============================= */
.btn {
  display: inline-flex; /* flexbox-only */
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: #FFFFFF;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-primary {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}
.btn-primary:hover { background: #0D4250; border-color: #0D4250; box-shadow: var(--shadow-md); }

.btn-secondary {
  background: #FFFFFF;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover { background: var(--color-accent); }

.actions {
  display: flex; /* flexbox-only */
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Inline links */
main a { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 2px; }
main a:hover { color: #584c8e; }

/* =============================
   6) HOMEPAGE & COMMON BLOCKS
   ============================= */
.trust-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.trust-badges .badge {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.trust-badges .badge img { width: 20px; height: 20px; }

.feature-grid, .module-list, .price-cards, .testimonial-list, .faq-accordion,
.case_highlight_cards {
  display: flex; /* flexbox-only */
  flex-wrap: wrap;
  gap: 20px;
}

.feature-grid .text-section,
.module-list .text-section,
.price-cards .text-section,
.case_highlight_cards .text-section,
.faq-accordion .text-section {
  flex: 1 1 260px;
  min-width: 240px;
}

.benefit-list, .inclusions-list, .exercises-list, .tools-list, .outcome-list,
.behavior-changes, .checkpoint-milestones, .bonus-list, .instructor-credentials,
.values_list, .credentials_list, .approach_principles, .ethics_principles,
.certifications_list, .rights_list, .measures_list, .assistive_features_list,
.before_after_list, .key_learnings, .behavior_shift_points, .cookie_categories,
.footer_links, .main_navigation_links, .help_topics, .next_steps_list, .refund_policy_points,
.conditions_list, .pacing_options, .help_links {
  display: flex; /* flexbox-only */
  flex-direction: column;
  gap: 8px;
}

.rating-summary, .proof-points, .duration-overview, .access-details,
.payment-options, .plan-comparison, .taxes-note, .lesson-outline,
.time-commitment, .weekly-rhythm, .live-sessions-info, .replay-policy,
.skill-tags, .support-channels, .timeline, .secure_payment_note,
.response_times, .escalation_paths, .lawful_bases, .consent_management,
.processors_list, .transfer_safeguards, .retention_schedule, .request_form,
.identity_verification_note, .processing_time_note, .appeal_instructions,
.offer_headline, .templates_and_worksheets, .community_access,
.certificate_info, .privacy_note, .signup_form, .frequency_note,
.opt_in_checkbox, .categories_filter, .search_bar, .teaching_philosophy,
.professional_background, .evidence_points, .frameworks_list,
.privacy_commitment, .data_handling_overview, .associations_membership,
.satisfaction_guarantees, .quote_highlights, .result_metrics,
.lawful_bases, .purposes_list, .cookie_table, .third_party_cookies,
.retention_periods, .disable_instructions, .preferences_manager,
.guarantee-badge, .brand-values-snippet, .duration, .social-proof-notes,
.rating, .payment_note, .reassurance, .download_form, .support_contacts,
.community_note, .time-note, .start-dates, .pacing-options, .replay-policy,
.certificate_info, .lesson-outline, .time-commitment {
  display: flex; /* flexbox-only */
  flex-direction: column;
  gap: 6px;
}

/* Testimonial cards — high contrast on light bg */
.testimonial-list { align-items: stretch; }
.testimonial-card {
  background: #FFFFFF; /* light bg */
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.testimonial-card p { margin: 0; }
.testimonial-card strong { color: #0B1F2A; }

/* Price cards emphasized */
.price-cards .text-section h3 { color: var(--color-primary); }
.price-cards .text-section p strong { font-size: 20px; }

/* Guarantee badge row */
.guarantee-badge {
  align-items: center;
  background: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.guarantee-badge img { width: 20px; height: 20px; }

/* FAQ accordion items as cards */
.faq-accordion .text-section h3 { font-size: 18px; }

/* Lists visuals */
ul li { margin: 0; }

/* =============================
   7) FOOTER
   ============================= */
footer {
  background: #758c97; /* deep corporate navy */
  color: #E5EAF0;
}
footer .content-wrapper { padding: 20px 0; gap: 24px; }
footer a { color: #E5EAF0; text-decoration: underline; text-underline-offset: 2px; }
footer a:hover { color: #FFFFFF; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-brand img { width: 40px; height: 40px; }
.footer-contact, .footer-nav {
  display: flex; /* flexbox-only */
  flex-direction: column;
  gap: 8px;
}
.footer-nav { flex-wrap: wrap; }
footer .container:last-of-type { border-top: 1px solid rgba(255,255,255,0.1); }
footer .container:last-of-type p { margin: 0; padding: 12px 0; text-align: center; }

/* =============================
   8) UTILITIES & REUSABLE LAYOUTS
   ============================= */
.lead { font-size: 18px; color: #1B2633; }
.muted { color: var(--color-muted); }
.center { text-align: center; }
.stack-8 { display: flex; flex-direction: column; gap: 8px; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }

/* Content alignment tweaks */
@media (min-width: 992px) {
  .actions { justify-content: flex-start; }
}

/* =============================
   9) RESPONSIVE RULES
   ============================= */
/* Tablet */
@media (min-width: 768px) {
  .feature-grid .text-section,
  .module-list .text-section,
  .price-cards .text-section,
  .faq-accordion .text-section,
  .case_highlight_cards .text-section {
    flex: 1 1 calc(50% - 20px);
  }
}
/* Desktop */
@media (min-width: 1024px) {
  .feature-grid .text-section,
  .module-list .text-section,
  .price-cards .text-section,
  .faq-accordion .text-section,
  .case_highlight_cards .text-section {
    flex: 1 1 calc(33.333% - 20px);
  }
}

/* =============================
   10) COOKIE CONSENT (banner + modal)
   ============================= */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex; /* flexbox-only */
  flex-direction: column;
  gap: 12px;
  background: #FFFFFF;
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
  padding: 16px 20px;
  z-index: 1400;
  transform: translateY(110%);
  transition: transform var(--transition-base);
}
.cookie-banner.is-visible, .cookie-banner[aria-hidden="false"] { transform: translateY(0); }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: 10px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { min-width: 140px; }
.cookie-actions .btn-primary { background: var(--color-secondary); border-color: var(--color-secondary); }
.cookie-actions .btn-primary:hover { background: #5D5094; border-color: #5D5094; }
.cookie-actions .btn-secondary { border-color: var(--color-secondary); color: var(--color-secondary); }

/* Cookie preferences modal */
.cookie-modal {
  position: fixed; inset: 0;
  display: none; /* hidden by default */
  align-items: center; justify-content: center;
  background: rgba(15, 31, 42, 0.6);
  z-index: 1500;
}
.cookie-modal.is-open, .cookie-modal[aria-hidden="false"] { display: flex; }
.cookie-modal .modal-panel {
  display: flex; /* flexbox-only */
  flex-direction: column;
  gap: 14px;
  width: 92%; max-width: 640px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-lg);
}
.cookie-modal .modal-header { display: flex; justify-content: space-between; align-items: center; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: 10px; }
.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* Toggle style suggestion (for JS-enhanced switches) */
.toggle {
  display: inline-flex; align-items: center; gap: 8px;
}
.toggle input { accent-color: var(--color-primary); }

/* =============================
   11) ACCESSIBILITY & STATES
   ============================= */
[aria-current="page"] { font-weight: 700; }
::selection { background: rgba(104, 155, 102, 0.15); }

/* Visible skip/utility (if ever added) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* =============================
   12) PAGE-SPECIFIC TUNING
   ============================= */
/* Hero-like first sections: emphasize spacing */
main section:first-of-type .content-wrapper { gap: 18px; }
main section:first-of-type h1 { color: var(--color-primary); }

/* Reassurance text */
.reassurance { color: var(--color-muted); font-style: italic; }

/* Contact blocks with icons */
.footer-contact p img,
#adresse p img,
.footer-brand img { filter: none; }
#adresse p { display: flex; align-items: center; gap: 10px; }

/* Cookie page action buttons alignment */
.policies-actions, .actions.policy-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Sitemap lists spacing */
.main_navigation_links, .footer_links, .utility_links { gap: 6px; }

/* =============================
   13) HIGH-CONTRAST TESTIMONIAL/REVIEW RULES
   ============================= */
/* Ensure dark text on light background for all testimonial contexts */
.testimonial-list, .testimonial-card, .rating-summary, .social-proof-notes {
  color: #111827; /* gray-900 */
  background: transparent; /* parent inherits, cards are white */
}
.testimonial-card { background: #FFFFFF; }

/* =============================
   14) FORMS (email instructions blocks styled as cards)
   ============================= */
.signup_form, .download_form, .request_form {
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 14px;
}

/* =============================
   15) MISC CARDS (cookie table / purposes)
   ============================= */
.cookie_table, .purposes_list, .third_party_cookies {
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 14px;
}

/* =============================
   16) PRINT TWEAKS (basic)
   ============================= */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal, footer { display: none !important; }
  section { padding: 0; margin: 0 0 24px; }
  a { text-decoration: underline; }
}

/* =============================
   17) COMPLIANCE CHECK (no grid/columns used)
   Note: All layout containers use display:flex or inline-flex.
   ============================= */