/* ===========================================================================
   site-overrides.css  —  local fixes layered on top of the original Elementor
   CSS. Loaded last so these rules win. Keep all custom tweaks here.
   ===========================================================================*/

/* ---------------------------------------------------------------------------
   1. Footer overlap on mobile / small screens
   The footer's columns (logo+CTA / CONTACTEZ-NOUS / address) are positioned
   for desktop and overlap when narrow. Force a clean vertical stack.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  footer.elementor-location-footer .e-con-inner,
  footer.elementor-location-footer > .e-con > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 28px !important;
  }
  /* every direct column becomes full-width, in normal flow (no overlap) */
  footer.elementor-location-footer .e-con-inner > .e-con,
  footer.elementor-location-footer .e-con-inner > .elementor-element {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    inset: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }
  /* the CONTACTEZ-NOUS column: space the phone / email / address blocks */
  footer.elementor-location-footer .elementor-widget-text-editor,
  footer.elementor-location-footer .elementor-widget-heading {
    margin-bottom: 14px !important;
  }
  footer.elementor-location-footer .elementor-widget-text-editor p {
    line-height: 1.55 !important;
    word-break: break-word !important;
  }
  /* sticky bottom legal bar must not float over content on mobile */
  footer.elementor-location-footer .elementor-sticky--effects,
  footer.elementor-location-footer .elementor-sticky {
    position: static !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   3. Services page — huge empty gap on mobile/tablet
   Two containers (the services-cards row and the "Zéro frais cachés" block)
   carry a hard-coded desktop min-height (720px / 600px) with NO responsive
   variant, so on narrow screens they reserve a tall empty area the stacked
   content can't fill. Let them hug their content below the desktop breakpoint.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-25 .elementor-element.elementor-element-c2690bb,
  .elementor-25 .elementor-element.elementor-element-ad2fa2d {
    --min-height: 0px !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   4. Services page — empty band between "Pourquoi choisir" and "Cas Client"
   The green card uses justify-content:space-between with a tall min-height
   (60vh on mobile), so the small arrow icon is shoved to the bottom and a big
   empty gap opens between it and the text. On narrow screens let the card hug
   its content and stack top-down instead.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-25 .elementor-element.elementor-element-e6c8511 {
    --min-height: 0px !important;
    min-height: 0 !important;
  }
  .elementor-25 .elementor-element.elementor-element-3891c87 {
    --min-height: 0px !important;
    min-height: 0 !important;
    --justify-content: flex-start !important;
    justify-content: flex-start !important;
  }
  /* hide the decorative ↗ arrow-link icon on small screens (user request) */
  .elementor-25 .elementor-element.elementor-element-b97201b {
    display: none !important;
  }
}

/* extra breathing room on phones */
@media (max-width: 767px) {
  footer.elementor-location-footer .e-con-inner,
  footer.elementor-location-footer > .e-con > .e-con-inner {
    gap: 22px !important;
    text-align: center;
  }
  footer.elementor-location-footer .elementor-social-icons-wrapper {
    justify-content: center !important;
  }
}

/* ---------------------------------------------------------------------------
   5. Header search icon — hide on mobile / tablet
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-location-header .elementor-element-b0464c7 {
    display: none !important;
  }
}


/* ---------------------------------------------------------------------------
   6. Footer — centre ONLY the logo and the social icons on mobile/tablet.
   (Intentionally gentle: no width / flex-direction / nav-display changes, so
   Elementor's own responsive layout and single menu stay intact.)
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  footer.elementor-location-footer .elementor-widget-theme-site-logo .elementor-widget-container,
  footer.elementor-location-footer .elementor-element-2139e23 .elementor-widget-container {
    text-align: center !important;
  }
  footer.elementor-location-footer .elementor-widget-theme-site-logo img,
  footer.elementor-location-footer .elementor-element-2139e23 img {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }
  footer.elementor-location-footer .elementor-social-icons-wrapper {
    justify-content: center !important;
  }
}

/* ---------------------------------------------------------------------------
   7. Services page — stop the entrance "zoom in / zoom out" replay on
   mobile/tablet WITHOUT changing the final layout. We only reveal the
   elements and cancel the entrance animation; transforms, scale and widths
   that define the mobile-optimised look are left exactly as designed.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-25 .elementor-invisible {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .elementor-25 .animated,
  .elementor-25 .animated-fast {
    animation: none !important;
  }
}


/* ---------------------------------------------------------------------------
   8. Footer menus & logo — element-ID scoped (cannot affect other widgets,
   never touches the hidden "--dropdown" nav).
   IDs:  home 998  -> logo 2139e23, quick f5a8cad, legal 0b3fb66, social eafb620
         3007       -> logo d60900b, quick e7ff7a4, legal 356e000, social e5cdb34
   --------------------------------------------------------------------------- */

/* legal links: single centred row, all widths (fixes desktop misalignment) */
.elementor-element-0b3fb66 .elementor-nav-menu--main > .elementor-nav-menu,
.elementor-element-356e000 .elementor-nav-menu--main > .elementor-nav-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px 26px !important;
}
.elementor-element-0b3fb66 .elementor-nav-menu--main .menu-item,
.elementor-element-356e000 .elementor-nav-menu--main .menu-item {
  width: auto !important;
  border: 0 !important;
}

@media (max-width: 1024px) {
  /* footer logo centred (home image widget + 3007 site-logo widget) */
  .elementor-element-2139e23,
  .elementor-element-2139e23 .elementor-widget-container,
  .elementor-element-d60900b,
  .elementor-element-d60900b .elementor-widget-container {
    text-align: center !important;
  }
  .elementor-element-2139e23 a,
  .elementor-element-d60900b a { display: inline-block !important; }
  .elementor-element-2139e23 img,
  .elementor-element-d60900b img {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }
  /* social icons centred on mobile (home 998 lacks the mobile-center class) */
  .elementor-element-eafb620 .elementor-social-icons-wrapper,
  .elementor-element-eafb620 .elementor-grid,
  .elementor-element-e5cdb34 .elementor-social-icons-wrapper,
  .elementor-element-e5cdb34 .elementor-grid {
    justify-content: center !important;
  }
  /* quick-links + legal menus centred on mobile (main nav only) */
  .elementor-element-f5a8cad .elementor-nav-menu--main > .elementor-nav-menu,
  .elementor-element-e7ff7a4 .elementor-nav-menu--main > .elementor-nav-menu,
  .elementor-element-0b3fb66 .elementor-nav-menu--main > .elementor-nav-menu,
  .elementor-element-356e000 .elementor-nav-menu--main > .elementor-nav-menu {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ---------------------------------------------------------------------------
   9. Contact page — the image + yellow "audit gratuit" block (container
   4408370) is given a fixed 383px width with zero side margins on mobile,
   so it leans left. Centre it (and its inner image/box) on mobile/tablet.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-element-4408370 {
    margin-left: auto !important;
    margin-right: auto !important;
    --margin-left: auto !important;
    --margin-right: auto !important;
    align-self: center !important;
  }
  .elementor-element-4e775ba,
  .elementor-element-dd3373a {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   10. Legal links closer together (all pages). The two menus stack with a
   big inter-item gap (home 0b3fb66 = 3vw, others 356e000 = 15px) plus link
   padding. Tighten — scoped to those two menu IDs only.
   --------------------------------------------------------------------------- */
.elementor-element-0b3fb66 .elementor-nav-menu > li,
.elementor-element-356e000 .elementor-nav-menu > li,
.elementor-element-0b3fb66 .elementor-nav-menu > li:not(:last-child),
.elementor-element-356e000 .elementor-nav-menu > li:not(:last-child) {
  margin-bottom: 2px !important;
}
.elementor-element-0b3fb66 .elementor-nav-menu--main .elementor-item,
.elementor-element-356e000 .elementor-nav-menu--main .elementor-item {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  line-height: 1.3 !important;
}

/* ---------------------------------------------------------------------------
   11. Footer social icons. Removing Instagram left a 3-column grid with only
   2 icons (spread out) and the widget is right-aligned. Collapse to 2 tight
   columns; centre on mobile. Scoped to the two social IDs only.
   IDs: home 998 -> eafb620, other pages 3007 -> e5cdb34
   --------------------------------------------------------------------------- */
.elementor-element-eafb620 .elementor-social-icons-wrapper,
.elementor-element-e5cdb34 .elementor-social-icons-wrapper {
  --grid-template-columns: repeat(2, max-content) !important;
  grid-template-columns: repeat(2, max-content) !important;
  --grid-column-gap: 10px !important;
  column-gap: 10px !important;
}
@media (max-width: 1024px) {
  .elementor-element-eafb620 .elementor-widget-container,
  .elementor-element-e5cdb34 .elementor-widget-container {
    text-align: center !important;
  }
  .elementor-element-eafb620 .elementor-social-icons-wrapper,
  .elementor-element-e5cdb34 .elementor-social-icons-wrapper {
    justify-content: center !important;
    width: max-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   12. Home hero — make it ~80% of the viewport on mobile (was a fixed 400px).
   The hero card (fa8150e) was pinned to --min-height:400px on phones, leaving
   it small and cramped in the upper third of tall screens. Set it to 80dvh so
   it dominates the screen without filling it completely. dvh handles the mobile
   browser address-bar shrink; a vh line precedes it as a fallback.

   IMPORTANT: keep the ORIGINAL padding. The tabs widget (5d3c08b) lays the
   pills out with --n-tabs-direction:column-reverse and --n-tabs-gap:0, so the
   FRANCHISE ENI / AUDIT GRATUIT / SERVICE LOCAL pills sit directly beneath the
   card. The original --padding-bottom:100px is what keeps the CTA button clear
   of those pills — do NOT shrink it, or the button and pills overlap.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* all three hero slide cards (Franchise ENI / Audit Gratuit / Service Local) */
  .elementor-22 .elementor-element.elementor-element-fa8150e,
  .elementor-22 .elementor-element.elementor-element-6a6d44b,
  .elementor-22 .elementor-element.elementor-element-d9b847b {
    --min-height: 80vh !important;
    --min-height: 80dvh !important;
    min-height: 80vh !important;
    min-height: 80dvh !important;
  }
  /* 3 slide-switcher pills on ONE line, evenly spaced, lifted off the edges.
     - nowrap + small font/padding so all three fit a phone width
     - --n-tabs-title-gap: even spacing BETWEEN the pills (not cramped, not far)
     - --n-tabs-gap: gap between the card and the pill row (lifts pills off the
       card's bottom edge so they're not jammed against it)
     - heading side padding: insets the row from the left/right card edges */
  .elementor-22 .elementor-element.elementor-element-5d3c08b {
    --n-tabs-heading-wrap: nowrap !important;
    --n-tabs-title-white-space: nowrap !important;
    --n-tabs-title-gap: 12px !important;
    --n-tabs-gap: 14px !important;
    --n-tabs-title-padding-left: 10px !important;
    --n-tabs-title-padding-right: 10px !important;
    --n-tabs-title-font-size: 11px !important;
  }
  /* space below the pill row so it isn't jammed against the next section */
  .elementor-22 .elementor-element.elementor-element-5d3c08b .e-n-tabs-heading {
    margin-bottom: 30px !important;
  }
}