/* ===========================================================================
   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;
  }
}

/* ---------------------------------------------------------------------------
   13. Services page — hero intro paragraph hidden behind the banner image on
   phones. The banner image widget (948aed7) carries an Elementor mobile-only
   custom transform (--e-transform-scale:1.5). A transform is purely visual —
   it reserves NO layout space — so the enlarged image bleeds upward over the
   last line(s) of the intro text (590b885). Cancel the scale on phones; the
   image then renders at its natural laid-out size and the text flows clear.
   (Only scale > 1 in the whole site; the 0.9 card scales elsewhere are fine.)
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-25 .elementor-element.elementor-element-948aed7 > .elementor-widget-container {
    --e-transform-scale: 1 !important;
  }
}

/* ---------------------------------------------------------------------------
   14. Cards that LOOK clickable but are not links (client request).
   a) Home, "Notre expérience couvre tous les secteurs": the 6 sector pills
      (Restauration/CHR, Industrie, Immobilier, Commerces, Agricole, Grand
      Tertiaire) are button widgets WITHOUT a link. Hide their circled ↗ badge
      (both the original icon span and the theme's cloned slide-animation
      wrapper), neutralise the hover border/icon reactions and force the
      default cursor so they read as plain informational labels.
   b) Services, "Pourquoi choisir Diva Energie ?" green card: not a link
      either — its ↗ badge (b97201b) was already hidden on mobile; hide it at
      every width, and keep the card's normal green (#018749) on hover instead
      of the button-like colour swap.
   The real link-cards (home services/about cards, CTAs) are untouched.
   --------------------------------------------------------------------------- */
.elementor-22 .elementor-element-d50b252 .elementor-button-icon,
.elementor-22 .elementor-element-5955618 .elementor-button-icon,
.elementor-22 .elementor-element-ee3a6a9 .elementor-button-icon,
.elementor-22 .elementor-element-6faf593 .elementor-button-icon,
.elementor-22 .elementor-element-2f48d81 .elementor-button-icon,
.elementor-22 .elementor-element-864872e .elementor-button-icon,
.elementor-22 .elementor-element-d50b252 .vamtam-btn-icon-wrap,
.elementor-22 .elementor-element-5955618 .vamtam-btn-icon-wrap,
.elementor-22 .elementor-element-ee3a6a9 .vamtam-btn-icon-wrap,
.elementor-22 .elementor-element-6faf593 .vamtam-btn-icon-wrap,
.elementor-22 .elementor-element-2f48d81 .vamtam-btn-icon-wrap,
.elementor-22 .elementor-element-864872e .vamtam-btn-icon-wrap {
  display: none !important;
}
.elementor-22 .elementor-element-d50b252 .elementor-button,
.elementor-22 .elementor-element-5955618 .elementor-button,
.elementor-22 .elementor-element-ee3a6a9 .elementor-button,
.elementor-22 .elementor-element-6faf593 .elementor-button,
.elementor-22 .elementor-element-2f48d81 .elementor-button,
.elementor-22 .elementor-element-864872e .elementor-button {
  cursor: default !important;
}
.elementor-22 .elementor-element-d50b252:hover .elementor-widget-container,
.elementor-22 .elementor-element-5955618:hover .elementor-widget-container,
.elementor-22 .elementor-element-ee3a6a9:hover .elementor-widget-container,
.elementor-22 .elementor-element-6faf593:hover .elementor-widget-container,
.elementor-22 .elementor-element-2f48d81:hover .elementor-widget-container,
.elementor-22 .elementor-element-864872e:hover .elementor-widget-container {
  border-color: #02010100 !important; /* same transparent border as at rest */
}
.elementor-25 .elementor-element.elementor-element-b97201b {
  display: none !important; /* all widths now, was ≤1024px only (section 4) */
}
.elementor-25 .elementor-element.elementor-element-3891c87:hover {
  background-color: #018749 !important; /* same green as at rest */
}

/* ---------------------------------------------------------------------------
   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;
  }
}

/* ---------------------------------------------------------------------------
   15. Footer legal bar — kill the site-wide horizontal scroll (home page).
   diva-custom.css gives the legal-menu column (54e49c0) width:auto so the
   three links stay on one line on large desktops. But width:auto lets the
   column grow to its single-line max-content (~543px), wider than a phone
   viewport — the whole page then overflows sideways at EVERY width (even
   1366px desktop was 50px too wide). Cap the column at its container width
   and let it shrink; the menu ul already flex-wraps (section 8), so links
   wrap to a second centred line only when space actually runs out.
   --------------------------------------------------------------------------- */
.elementor-element-54e49c0,
.elementor-element-4eeef6a {
  max-width: 100% !important;
  min-width: 0 !important;
}
/* slightly tighter link gap so the row still fits on one line at ~1366px */
@media (min-width: 1025px) {
  .elementor-element-0b3fb66 .elementor-nav-menu--main > .elementor-nav-menu,
  .elementor-element-356e000 .elementor-nav-menu--main > .elementor-nav-menu {
    gap: 4px 14px !important;
  }
}

/* ---------------------------------------------------------------------------
   16. Home hero slide-switcher pills — clipped on small phones.
   With the section-12 sizing (11px font / 10px padding / 12px gap) the three
   pills need ~392px, so on 360-400px screens the first and last pill are cut
   off at the viewport edges. Tighten sizing a bit further on small phones.
   --------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .elementor-22 .elementor-element.elementor-element-5d3c08b {
    --n-tabs-title-gap: 8px !important;
    --n-tabs-title-padding-left: 8px !important;
    --n-tabs-title-padding-right: 8px !important;
    --n-tabs-title-font-size: 10px !important;
  }
}

/* ---------------------------------------------------------------------------
   17. Entrance animations on mobile / tablet — content must never be hidden.
   Waypoint-triggered entrance animations (elementor-invisible + animated)
   proved unreliable on touch devices: the home newsletter block and footer
   columns can stay visibility:hidden even when scrolled into view. Reveal
   everything and cancel entrance animations below the desktop breakpoint,
   site-wide (generalises section 7, which did this for services only).
   Desktop (>1024px) keeps its animations.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-invisible {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .animated,
  .animated-fast {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
   18. Sticky-header spacer — its cloned burger dropdown is never stretched
   by Elementor's JS, so the little menu box sits past the right edge of the
   screen. The spacer only reserves vertical space; hide the clone entirely.
   --------------------------------------------------------------------------- */
.elementor-sticky__spacer .elementor-nav-menu--dropdown {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   19. Belt and braces: the page must never pan sideways. If any element
   still ends up wider than the viewport, clip it instead of letting the
   whole site scroll horizontally. (clip, unlike hidden, cannot create a
   new scroll container — position:sticky keeps working.)
   --------------------------------------------------------------------------- */
body {
  overflow-x: hidden;
  overflow-x: clip;
}