/* ============================================================
   IT Learning Academy — Elementor Overrides v26.2
   Full audit & rewrite — fixes all design/UX issues found
   ============================================================ */

/* ── 1. Global token bridge ── */
:root {
  --itl-header-h: 66px;
  --e-global-color-primary:   #0b1630;
  --e-global-color-secondary: #e8b422;
  --e-global-color-text:      #374163;
  --e-global-color-accent:    #163060;
  --e-global-typography-primary-font-family:   'Fraunces', serif;
  --e-global-typography-secondary-font-family: 'Plus Jakarta Sans', sans-serif;
  --e-global-typography-text-font-family:      'Plus Jakarta Sans', sans-serif;
  --e-global-typography-accent-font-family:    'JetBrains Mono', monospace;
}

/* ── 2. Body / Page offset for sticky header ── */
body.elementor-page,
body.page-template-default,
body.page {
  /* Header is 66px sticky — offset page content */
}
/* The main content wrapper gets the offset via JS in header-footer.php
   but we add a CSS fallback for non-JS and Elementor canvas pages */
.elementor-page .elementor-section:first-child,
.elementor-page .e-con:first-child {
  scroll-margin-top: var(--itl-header-h);
}

/* ── 3. Typography inside Elementor ── */
.elementor-widget-container {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #374163;
  font-size: 15px;
  line-height: 1.72;
}
.elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4 {
  font-family: 'Fraunces', serif !important;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.elementor-widget-heading h5,
.elementor-widget-heading h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.elementor-widget-text-editor { line-height: 1.75; }

/* ── 4. Button defaults ── */
.elementor-button {
  border-radius: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
}

/* ============================================================
   ITL WIDGET FULL-WIDTH SYSTEM
   
   Architecture:
     .elementor-section              ← must be 100vw
       .elementor-container          ← must be 100%
         .elementor-widget-wrap      ← must have padding:0
           .elementor-widget-container ← must have padding:0
             <section.itl-*>         ← widget markup, full-width bg
               .itl-inner / [style*="max-width"] ← content constraint
   ============================================================ */

/* A. Zero out the widget-container wrapper — universal rule */
[class*="elementor-widget-itl_"] > .elementor-widget-container {
  padding:    0 !important;
  margin:     0 !important;
  width:      100% !important;
  max-width:  100% !important;
  display:    block !important;
}

/* B. Widget element itself: full width, no margin collapse */
[class*="elementor-widget-itl_"] {
  width:          100% !important;
  margin-bottom:  0 !important;
  padding:        0 !important;
}

/* C. The widget's direct child (section or div): fill width */
[class*="elementor-widget-itl_"] > .elementor-widget-container > section,
[class*="elementor-widget-itl_"] > .elementor-widget-container > div,
[class*="elementor-widget-itl_"] > .elementor-widget-container > form {
  width:      100%;
  max-width:  100%;
  box-sizing: border-box;
  display:    block;
}

/* D. Sections containing ITL widgets: remove all padding */
.elementor-section:has([class*="elementor-widget-itl_"]),
.e-con:has([class*="elementor-widget-itl_"]) {
  padding-top:    0 !important;
  padding-bottom: 0 !important;
  padding-left:   0 !important;
  padding-right:  0 !important;
}

/* E. Elementor container inside stretched sections */
.elementor-section:has([class*="elementor-widget-itl_"]) > .elementor-container,
.elementor-section.elementor-section-stretched > .elementor-container {
  max-width: 100% !important;
  width:     100% !important;
  padding:   0 !important;
}

/* F. Column padding reset inside ITL sections */
.elementor-section:has([class*="elementor-widget-itl_"]) .elementor-column,
.elementor-section:has([class*="elementor-widget-itl_"]) .elementor-column > .elementor-widget-wrap {
  padding: 0 !important;
}

/* G. Elementor 3.x e-con (Flexbox container) support */
.e-con:has([class*="elementor-widget-itl_"]) {
  --padding-block-start:  0px !important;
  --padding-block-end:    0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end:   0px !important;
  padding:    0 !important;
  max-width:  100% !important;
  width:      100% !important;
}

/* H. Row margin reset */
.elementor-section:has([class*="elementor-widget-itl_"]) .elementor-row {
  margin-left:  0 !important;
  margin-right: 0 !important;
}

/* I. Widget gap reset — no space between consecutive ITL sections */
.elementor-widget:not(:last-child) {
  margin-bottom: 0 !important;
}
.elementor-section {
  margin-bottom: 0 !important;
}

/* ============================================================
   SPECIFIC WIDGET FULL-BLEED LIST
   Belt-and-suspenders for hero/strip/banner widgets
   ============================================================ */
.elementor-widget-itl_sec_page_hero > .elementor-widget-container,
.elementor-widget-itl_hero_section > .elementor-widget-container,
.elementor-widget-itl_hero_inner > .elementor-widget-container,
.elementor-widget-itl_hp_hero > .elementor-widget-container,
.elementor-widget-itl_hero_compact > .elementor-widget-container,
.elementor-widget-itl_sec_cta_banner > .elementor-widget-container,
.elementor-widget-itl_cta_section > .elementor-widget-container,
.elementor-widget-itl_cta_two_buttons > .elementor-widget-container,
.elementor-widget-itl_sec_atouts_strip > .elementor-widget-container,
.elementor-widget-itl_sec_diplo_cta > .elementor-widget-container,
.elementor-widget-itl_sec_stats_grid > .elementor-widget-container,
.elementor-widget-itl_stats_strip > .elementor-widget-container,
.elementor-widget-itl_sec_partners_strip > .elementor-widget-container,
.elementor-widget-itl_lead_mini_form > .elementor-widget-container,
.elementor-widget-itl_lead_roi_strip > .elementor-widget-container,
.elementor-widget-itl_lead_urgency > .elementor-widget-container,
.elementor-widget-itl_lead_testimonial_cta > .elementor-widget-container,
.elementor-widget-itl_lead_entreprises_cta > .elementor-widget-container,
.elementor-widget-itl_lead_trust_badges > .elementor-widget-container,
.elementor-widget-itl_countdown_banner > .elementor-widget-container,
.elementor-widget-itl_gold_band > .elementor-widget-container,
.elementor-widget-itl_sec_campus_grid > .elementor-widget-container,
.elementor-widget-itl_campus_map_cards > .elementor-widget-container,
.elementor-widget-itl_social_proof > .elementor-widget-container,
.elementor-widget-itl_hp_offer_cards > .elementor-widget-container,
.elementor-widget-itl_hp_why_us > .elementor-widget-container,
.elementor-widget-itl_hp_diplo_band > .elementor-widget-container,
.elementor-widget-itl_hp_campus_strip > .elementor-widget-container,
.elementor-widget-itl_hp_lead_form > .elementor-widget-container,
.elementor-widget-itl_hp_faq > .elementor-widget-container,
.elementor-widget-itl_testimonials_grid > .elementor-widget-container,
.elementor-widget-itl_lead_debouches > .elementor-widget-container,
.elementor-widget-itl_lead_comparison > .elementor-widget-container,
.elementor-widget-itl_lead_career_timeline > .elementor-widget-container,
.elementor-widget-itl_lead_faq_cta > .elementor-widget-container,
.elementor-widget-itl_info_cards > .elementor-widget-container,
.elementor-widget-itl_process_steps > .elementor-widget-container,
.elementor-widget-itl_two_col_content > .elementor-widget-container,
.elementor-widget-itl_sec_conditions_grid > .elementor-widget-container,
.elementor-widget-itl_sec_values_grid > .elementor-widget-container,
.elementor-widget-itl_sec_diplo_partners > .elementor-widget-container,
.elementor-widget-itl_sec_themes_grid > .elementor-widget-container,
.elementor-widget-itl_sec_approach_steps > .elementor-widget-container,
.elementor-widget-itl_sec_profile_cards > .elementor-widget-container,
.elementor-widget-itl_sec_contact_block > .elementor-widget-container,
.elementor-widget-itl_sec_offer_cards > .elementor-widget-container,
.elementor-widget-itl_sec_programme_grid > .elementor-widget-container,
.elementor-widget-itl_sec_steps_timeline > .elementor-widget-container,
.elementor-widget-itl_sec_docs_checklist > .elementor-widget-container,
.elementor-widget-itl_sec_certs_grid > .elementor-widget-container,
.elementor-widget-itl_inscription_form_section > .elementor-widget-container,
.elementor-widget-itl_mentions_legales > .elementor-widget-container,
.elementor-widget-itl_politique_confidentialite > .elementor-widget-container {
  padding:    0 !important;
  margin:     0 !important;
  width:      100% !important;
  max-width:  100% !important;
  display:    block !important;
}

/* ============================================================
   CANVAS PAGE TEMPLATE
   ============================================================ */
.elementor-page-template-elementor_canvas .elementor-page {
  padding: 0 !important;
  margin:  0 !important;
}
/* Body offset for sticky header on canvas pages */
.elementor-page-template-elementor_canvas .elementor-section:first-of-type section,
.elementor-page-template-elementor_canvas .e-con:first-of-type section {
  padding-top: calc(var(--itl-header-h) + var(--section-pt, 0px));
}

/* ============================================================
   RESPONSIVE GRID FIXES
   All inline-style grids inside ITL widgets that need collapse
   ============================================================ */

/* --- General: any 2+ column inline grid inside an ITL widget --- */
@media (max-width: 900px) {
  /* 2-col content grids */
  [class*="elementor-widget-itl_"] [style*="grid-template-columns:1fr 1.4fr"],
  [class*="elementor-widget-itl_"] [style*="grid-template-columns:1.4fr 1fr"],
  [class*="elementor-widget-itl_"] [style*="grid-template-columns:1fr 1fr"],
  [class*="elementor-widget-itl_"] [style*="grid-template-columns:1.2fr 1fr"],
  [class*="elementor-widget-itl_"] [style*="grid-template-columns:1fr 1.6fr"],
  [class*="elementor-widget-itl_"] [style*="grid-template-columns:1.6fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* 3-col grids */
  [class*="elementor-widget-itl_"] [style*="grid-template-columns:1fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Comparison table 3-col */
  .elementor-widget-itl_lead_comparison [style*="grid-template-columns:1.5fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  .elementor-widget-itl_lead_comparison [style*="grid-template-columns:1.5fr 1fr 1fr"] > :first-child {
    display: none !important; /* hide criteria label col on mobile — show inline in value cells */
  }
}

@media (max-width: 768px) {
  /* ROI strip — 4 cols → 2 cols */
  .elementor-widget-itl_lead_roi_strip [style*="grid-template-columns:repeat("] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .elementor-widget-itl_lead_roi_strip [style*="border-right:1px"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }

  /* Process steps 4-col → 2-col */
  .elementor-widget-itl_process_steps [style*="grid-template-columns:repeat("] {
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 32px !important;
  }
  /* Hide the connector line on mobile */
  .elementor-widget-itl_process_steps [style*="position:absolute;top:32px"] {
    display: none !important;
  }

  /* Comparison table → single column */
  .elementor-widget-itl_lead_comparison [style*="grid-template-columns:1.5fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Mini form inline → stacked */
  .elementor-widget-itl_lead_mini_form [style*="grid-template-columns:1fr 1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Campus map cards — 3 cols → 2 cols */
  .elementor-widget-itl_campus_map_cards [style*="grid-template-columns:repeat(auto-fill,minmax(220px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Gold band inner → column */
  .elementor-widget-itl_gold_band [style*="display:flex"] {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Trust badges → 2 cols */
  .elementor-widget-itl_lead_trust_badges [style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Debouches grid → 1 col */
  .elementor-widget-itl_lead_debouches [style*="grid-template-columns:repeat(auto-fill,minmax(300px"] {
    grid-template-columns: 1fr !important;
  }

  /* Career timeline → stacked */
  .elementor-widget-itl_lead_career_timeline [style*="grid-template-columns:1fr auto 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  /* Hide arrow column on mobile */
  .elementor-widget-itl_lead_career_timeline [style*="display:flex;flex-direction:column;align-items:center"] {
    display: none !important;
  }

  /* Info cards */
  .elementor-widget-itl_info_cards [style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }

  /* Stats strip */
  .elementor-widget-itl_lead_roi_strip [style*="border-right:1px solid rgba(255,255,255,.07)"] {
    border-right: none !important;
  }

  /* B2B band */
  .elementor-widget-itl_lead_entreprises_cta [style*="grid-template-columns:1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Testimonial CTA */
  .elementor-widget-itl_lead_testimonial_cta [style*="grid-template-columns:1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* FAQ + CTA */
  .elementor-widget-itl_lead_faq_cta [style*="grid-template-columns:1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* Unstick the sidebar on mobile */
  .elementor-widget-itl_lead_faq_cta [style*="position:sticky"] {
    position: static !important;
  }

  /* Inscription form */
  .elementor-widget-itl_inscription_form_section [style*="grid-template-columns:1fr 1.4fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Inscription form name/email rows */
  .elementor-widget-itl_inscription_form_section [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  /* ROI → 1 col */
  .elementor-widget-itl_lead_roi_strip [style*="grid-template-columns:repeat("] {
    grid-template-columns: 1fr !important;
  }
  /* Process steps → 1 col */
  .elementor-widget-itl_process_steps [style*="grid-template-columns:repeat("] {
    grid-template-columns: 1fr !important;
  }
  /* Campus cards → 1 col */
  .elementor-widget-itl_campus_map_cards [style*="grid-template-columns:repeat("] {
    grid-template-columns: 1fr !important;
  }
  /* Trust badges → 1 col */
  .elementor-widget-itl_lead_trust_badges [style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }
  /* Testimonials grid → 1 col */
  .elementor-widget-itl_testimonials_grid [style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }
  /* Info cards → 1 col */
  .elementor-widget-itl_info_cards [style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   UX FIXES — Hover states, focus rings, transitions
   ============================================================ */

/* Focus ring for accessibility */
[class*="elementor-widget-itl_"] a:focus-visible,
[class*="elementor-widget-itl_"] button:focus-visible {
  outline: 2px solid #e8b422;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Button hover transitions */
[class*="elementor-widget-itl_"] a[style*="background:#e8b422"],
[class*="elementor-widget-itl_"] a[style*="background:#0b1630"],
[class*="elementor-widget-itl_"] button[style*="background:#0b1630"] {
  transition: background .2s ease, transform .18s ease, box-shadow .18s ease !important;
}

/* Card hover — apply to all itl-card-like divs */
[class*="elementor-widget-itl_"] [style*="border:1.5px solid #e2e6f0"][style*="border-radius:1"],
[class*="elementor-widget-itl_"] [style*="border:1.5px solid #e2e6f0"][style*="border-radius:1"]:hover {
  transition: box-shadow .22s ease, transform .22s ease !important;
}

/* ============================================================
   CF7 FORM POLISH inside ITL widgets
   ============================================================ */
.elementor-widget-itl_sec_contact_block .wpcf7 {
  margin: 0;
}

/* Contact block lives on a white card — gold submit to match the brand */
.elementor-widget-itl_sec_contact_block .wpcf7 .wpcf7-submit {
  background: var(--itl-gold-400) !important;
  color: var(--itl-navy-950) !important;
  box-shadow: 0 4px 16px rgba(232,180,34,.30) !important;
}
.elementor-widget-itl_sec_contact_block .wpcf7 .wpcf7-submit:hover {
  background: var(--itl-gold-300) !important;
  box-shadow: 0 6px 22px rgba(232,180,34,.40) !important;
}

/* ============================================================
   NOTICE / ALERT BLOCK
   ============================================================ */
.elementor-widget-itl_notice_block {
  margin-bottom: 0 !important;
}
.elementor-widget-itl_notice_block > .elementor-widget-container {
  padding: 0 !important;
}

/* ============================================================
   LEGAL PAGES — no padding override
   ============================================================ */
.elementor-widget-itl_mentions_legales > .elementor-widget-container,
.elementor-widget-itl_politique_confidentialite > .elementor-widget-container {
  padding: 0 !important;
  display: block !important;
}

/* ============================================================
   CHECKLIST / INLINE BLOCK WIDGETS — keep padding
   These are meant to be embedded inside other elements
   ============================================================ */
.elementor-widget-itl_checklist_block > .elementor-widget-container,
.elementor-widget-itl_notice_block > .elementor-widget-container,
.elementor-widget-itl_eyebrow > .elementor-widget-container {
  padding: 8px 0 !important;
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  #itl-floats,
  #itl-site-header,
  .itl-site-header { display: none !important; }
  .elementor-widget-itl_countdown_banner,
  .elementor-widget-itl_lead_mini_form,
  .elementor-widget-itl_lead_urgency { display: none !important; }
}