/* Neutralise le footer du template sur les pages qui ont notre footer */
.has-glasster-footer .footer-section,
.has-glasster-footer .footer-copyright-section {
  display: none !important;
}
.has-glasster-footer .footer-section::before {
  content: none !important;
  display: none !important;
}

/* Notre footer passe au-dessus de tout */
#glasster-footer {
  position: relative;
  z-index: 2;
}


/* ===== [INDEX – MOBILE FIXES] ===== */

/* 1) Never allow horizontal scrolling (kills the white strip on the right) */
html, body { max-width: 100%; overflow-x: hidden; }
.section, .site-header, .slider-section, .single-slider { overflow-x: clip; } /* modern & safer than hidden */

/* 2) The two decorative slider image stacks overflow on small screens → hide them */
@media (max-width: 991.98px){
  .slider-section .slider-images,
  .slider-section .slider-images-02{
    display: none !important;
  }
  .single-slider{
    background-position: center top;
    background-size: cover;
  }
}

/* 3) Make the hero text readable on phones */
@media (max-width: 575.98px){
  .slider-section .slider-content{ padding-top: 200px; }   /* leaves space under header */
  .slider-section .sub-title{ font-size: 14px; }
  .slider-section .main-title{
    font-size: 24px;
    line-height: 1.15;
    margin-bottom: 8px;
  }
  .slider-section p{ font-size: 15px; }
  .slider-section .btn{ padding: 10px 14px; font-size: 14px; }
}

/* 4) Safety: images never exceed the viewport width */
.slider-section img{ max-width: 100%; height: auto; display: block; }

/* ========= MOBILE POLISH (≤ 576px) ========= */
@media (max-width: 576px){

  /* 1) Bouton principal : centré, touch-friendly */
  .btn.btn-custom-01{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:12px 18px;
    line-height:1.1;
    font-weight:800;
    width:100%;            /* plein largeur sur mobile */
    border-radius:12px;
    text-align:center;
  }

  /* 2) Cartes services : le lien reste visible
     - on passe la carte en flex colonne
     - le lien "En savoir plus" pousse vers le bas
     - hauteur mini pour éviter la coupe selon la longueur du titre */
  .single-service{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height: 240px;     /* ajuste 220–260 selon ton contenu */
    padding:16px;
    border-radius:14px;
  }
  .single-service .service-icon{ width:48px; height:auto; margin-bottom:10px; }
  .single-service .service-title{ margin:6px 0 8px; line-height:1.2; }
  .single-service .service-desc{ margin-bottom:10px; color:#475569; }
  .single-service .service-link{
    margin-top:auto;                 /* pousse le lien en bas de la carte */
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:700;
    text-decoration:none;
  }

  /* 3) Bloc CTA (bleu) : stack propre + centrage */
  .call-to-action-wrapper{
    display:flex;
    flex-direction:column;
    border-radius:18px;
    overflow:hidden;
  }
  .call-to-action-content{
    padding:18px 16px !important;
    text-align:center;
  }
  .call-to-action-content .section-title .main-title{
    font-size:28px; line-height:1.15;
  }
  .call-to-action-content p{ margin:8px 0; }
  .call-to-action-content .btn{ width:100%; }

  /* image décor CTA : hauteur fixe, pas d’empiètement sur le texte */
  .call-to-action-images{
    order:2;                 /* image après le texte */
    min-height:160px;
    background-size: cover;
    background-position: center right;
  }
}
@media (max-width: 576px){

  /* ... tout ce qu’on avait déjà ... */

  /* Espacement entre les cartes services */
  .services-grid{
    display:flex;
    flex-direction:column;
    gap:18px;         /* espace entre chaque carte */
  }
  .single-service{
    margin:0;         /* supprime marges aléatoires du thème */
  }
}

@media (max-width: 576px){
  .hero-services{
    padding: 7px 0 28px !important;
  }
    .page-devis .section{
    padding-top: 7px !important;
    padding-bottom: 30px !important;
  }
  
}

/* ===== Mobile offcanvas relook ===== */
@media (max-width: 991.98px){

  /* S'assurer que le panneau passe au-dessus du header */
  .site-header, .site-header .header-main, .neon { z-index: 1000; }
  .offcanvas.mobile-sheet { z-index: 1200; }
  .offcanvas-backdrop { z-index: 1190; opacity: .28; background: #0b1b3a; }

  .offcanvas.mobile-sheet{
    width: 86vw;
    max-width: 380px;
    background:#fff;
    border-right: 1px solid #eef2ff;
    box-shadow: 0 10px 40px rgba(0,0,0,.16);
  }

  .mobile-sheet__header{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px 8px; border-bottom:1px solid #eef2ff;
  }
  .mobile-sheet__brand img{ height:34px; width:auto; display:block; }

  .mobile-sheet__meta{ display:flex; align-items:center; gap:10px; }
  .mobile-sheet__lang{
    display:inline-flex; align-items:center; height:34px; padding:0 12px;
    border-radius:10px; background:#eef5ff; color:#0b5cff;
    font-weight:800; letter-spacing:.01em; text-decoration:none;
    border:1px solid #dbe6ff;
  }
  .mobile-sheet .btn-close{
    opacity:.85;
    filter: invert(29%) sepia(92%) saturate(2210%) hue-rotate(214deg) brightness(96%) contrast(101%);
  }

  .mobile-sheet__body{ padding:10px 16px 18px; }

  .mobile-sheet__nav a{
    display:block; padding:14px 2px; font-size:18px; font-weight:800;
    color:#0b1732; text-decoration:none; border-bottom:1px solid #eef2ff;
  }
  .mobile-sheet__nav a.is-active{ color:#0b5cff; }
  .mobile-sheet__nav a:last-child{ border-bottom:0; }

  .mobile-sheet__cta{
    display:block; margin-top:16px; text-align:center;
    padding:12px 14px; border-radius:12px;
    background: linear-gradient(0deg,#0b5cff,#0a54f6);
    color:#fff; text-decoration:none; font-weight:900;
    box-shadow: 0 10px 22px rgba(11,92,255,.22);
  }
  .mobile-sheet__hint{
    margin:10px 2px 2px; font-size:13px; color:#64748b;
  }
}

/* Mobile: give the offcanvas breathing room */
@media (max-width: 991.98px){
  #mobileMenu .offcanvas-header{
    padding:12px max(20px, env(safe-area-inset-right)) 0
            max(20px, env(safe-area-inset-left));
  }
  #mobileMenu .offcanvas-body{
    padding:10px max(20px, env(safe-area-inset-right)) 24px
            max(20px, env(safe-area-inset-left));
  }
  #mobileMenu .mobile-nav{ margin:0; padding:0; }
  #mobileMenu .mobile-nav a{
    display:block;
    padding:14px 2px;           /* vertical rhythm */
    font-size:18px; font-weight:800;
    border-bottom:1px solid #eef2ff;
  }
  #mobileMenu .mobile-nav a:last-child{ border-bottom:0; }

  /* Call button full-width & centered */
  #mobileMenu .btn-call{
    display:flex; justify-content:center; align-items:center;
    width:100%; margin-top:16px;
  }
}
/* Offcanvas mobile – style des liens + séparateurs */
@media (max-width: 991.98px){
  #mobileMenu .mobile-nav{
    list-style:none; margin:0; padding:0;
  }
  #mobileMenu .mobile-nav li{ margin:0; }
  #mobileMenu .mobile-nav li + li{
    border-top:1px solid #e9eefc;   /* la petite ligne de séparation */
  }
  #mobileMenu .mobile-nav a{
    display:block;
    padding:14px 0;                 /* espace autour du texte */
    text-decoration:none;
    color:#0b5cff; font-weight:800;
  }
  #mobileMenu .mobile-nav a:active{ opacity:.7; }
  #mobileMenu .btn-call{ width:100%; margin-top:16px; }
}

@media (max-width: 991.98px){
  #mobileMenu .offcanvas-body{ padding: 12px 16px 28px; }
  #mobileMenu .mobile-nav{ list-style:none; margin:0; padding:0; }
  #mobileMenu .mobile-nav li + li{ border-top:1px solid #e9eefc; }
  #mobileMenu .mobile-nav a{
    display:block;
    padding:14px 2px;
    text-decoration:none;
  }
  #mobileMenu .mobile-nav .btn-call{
    margin-top:14px;
    display:inline-block;
  }
}
/* overrides.css */
@media (max-width: 991.98px){
  /* le panneau doit être au-dessus du backdrop */
  .offcanvas{ z-index: 1045 !important; }

  /* le backdrop en dessous, avec une opacité correcte */
  .offcanvas-backdrop{
    z-index: 1040 !important;
    opacity: .24 !important;      /* PAS -20 */
    background: #0b1b3a !important;
  }
}

/* ===========================
   HERO – taille / placement de l'illustration (page d'accueil)
   =========================== */

/* Base mobile : image centrée, visible mais raisonnable */
.home .single-slider { position: relative; overflow: hidden; }
.home .single-slider .slider-images,
.home .single-slider .slider-images-02 {
  position: static;               /* on annule le positionnement absolu du thème sur mobile */
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.home .single-slider .slider-images img,
.home .single-slider .slider-images-02 img {
  width: 92vw;                    /* prend ~90% de la largeur écran */
  max-width: 420px;               /* évite qu’elle soit énorme */
  height: auto;
  object-fit: contain;
}

/* Tablet & desktop : image à droite, plus petite que 100% */
@media (min-width: 992px){
  .home .single-slider { min-height: 520px; }
  .home .single-slider .slider-images{
    position: absolute;
    right: 2vw;                   /* colle à droite */
    bottom: 0;
  }
  .home .single-slider .slider-images img{
    width: auto;
    max-width: 560px;             /* taille confortable sur desktop */
    height: auto;
  }
  /* Option : masquer la 2e image décorative si besoin */
  .home .single-slider .slider-images-02{ display:none; }
}

/* ====== Grille services ====== */
    .services-grid{ margin-top:10px; }
    .service-card{
      height:100%; display:flex; flex-direction:column;
      background:#ffffffcc; backdrop-filter:saturate(1.1) blur(0px);
      border:1px solid #e6ecff; border-radius:20px; padding:22px;
      box-shadow:0 10px 30px rgba(2,6,23,.06), inset 0 1px 0 rgba(255,255,255,.4);
      transition:transform .18s ease, box-shadow .18s ease;
    }
    .service-card:hover{ transform:translateY(-3px); box-shadow:0 14px 38px rgba(2,6,23,.12); }
    .service-card .icon-wrap{
      width:64px; height:64px; border-radius:16px; display:grid; place-items:center;
      background:linear-gradient(135deg, #f0f6ff, #ffffff);
      border:1px solid #e5edff; box-shadow:inset 0 1px 0 #fff; margin-bottom:14px;
    }
    .service-card .icon{ width:36px; height:36px; object-fit:contain; }
    .service-card h4{ font-size:22px; line-height:1.25; margin:6px 0 8px; }
    .service-card p{ color:#475569; margin:0 0 12px; }
    .mini-bullets{ margin:0 0 10px; padding:0; list-style:none; }
    .mini-bullets li{ display:flex; gap:8px; align-items:flex-start; color:#334155; font-size:.95rem; margin-bottom:6px; }
    .check{
      width:16px; height:16px; margin-top:2px; border-radius:4px; background:#0b5cff; display:inline-block; position:relative;
    }
    .check::after{
      content:""; position:absolute; inset:0;
      background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M6.173 12.672 2.2 8.7l1.4-1.4 2.573 2.573 6.227-6.227 1.4 1.4z"/></svg>') center/12px 12px no-repeat; opacity:.95;
    }
    .service-card .cta{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }
    .service-card .cta a{
      text-decoration:none; padding:10px 12px; border-radius:10px; font-weight:600; font-size:.97rem;
      border:1px solid #dbe6ff; color:#0b5cff; background:#fff;
    }
    .service-card .cta a.primary{ background:#0b5cff; color:#fff; border-color:#0b5cff; }
  <style>
    :root{
      --bg-base:#eef5ff;   /* fond global très clair */
      --bg-alt:#ffffff;    /* fond blanc pur        */
      --bg-soft:#f6f9ff;   /* léger alternatif      */
    }
    /* === Cartes services avec VRAIES PHOTOS === */
    .service-card--photo .icon-wrap{
      width:100%;
      height:180px;
      margin-bottom:16px;
      border-radius:14px;
      overflow:hidden;
      background:#000;
      border:none;
      box-shadow:0 6px 18px rgba(0,0,0,.08);
      display:block;
      padding:0; /* annule le grid centré */
    }

    .service-card--photo .icon{
      width:100% !important;     /* override le 36x36 */
      height:100% !important;    /* override le 36x36 */
      object-fit:cover;
      border-radius:14px !important;
    }
    @media (min-width: 992px){
      .service-card--photo .icon-wrap{ height:200px; }
    }

    /* ====== Fond général & header simplifié ====== */
    body.page-services{
      margin:0;
      background:
        radial-gradient(1200px 600px at 20% -10%, rgba(11,92,255,.08), transparent 60%),
        radial-gradient(1200px 700px at 90% 0%, rgba(11,92,255,.06), transparent 65%),
        var(--bg-base);
    }
    .site-header-simple{ background:transparent; margin:0; padding:0; }
    .site-header-simple::before,
    .site-header-simple::after{ content:none !important; display:none !important; }
    .site-header-simple .header-main{ background:transparent !important; }
    .site-header-simple .header-main::before,
    .site-header-simple .header-main::after{ content:none !important; display:none !important; }
    .site-header-simple .header-top{ background:#f7fafc; padding:6px 0; }
    .site-header-simple .header-top-info p{ margin:0 12px 0 0; display:inline-block; font-size:.95rem; }

    /* ====== Vagues / séparateurs ====== */
    .section{ position:relative; overflow:visible; }
    .section--alt{ background:var(--bg-alt); }
    .section--soft{ background:var(--bg-soft); }

    .wave{
      position:absolute; left:0; width:100%; height:90px;
      pointer-events:none; z-index:0;
    }
    .wave path{ fill:currentColor; }
    .wave--top{ top:-1px; transform:scaleY(-1); }
    .wave--bottom{ bottom:-1px; }

    .section.wave-pad-top{ padding-top:72px; }
    .section.wave-pad-bottom{ padding-bottom:72px; }

    /* ====== Hero ====== */
    .hero-services{ padding:72px 0 28px; }
    .hero-kicker{
      display:inline-block;
      font-size:.85rem; font-weight:600; letter-spacing:.02em;
      color:#0b5cff; background:#eaf1ff; border:1px solid #dbe6ff;
      padding:6px 12px; border-radius:999px;
    }
    .hero-services .main-title{
      margin:14px 0 8px; font-size:44px; line-height:1.1;
    }
    .hero-services .lead{ color:#475569; max-width:880px; margin:6px auto 0; }

    .hero-actions{ margin-top:20px; display:flex; gap:12px; justify-content:center; }
    .btn-primary-ghost{
      background:#0b5cff; color:#fff; border-radius:12px; padding:12px 18px;
      border:1px solid rgba(11,92,255,.2);
    }
    .btn-white-ghost{
      background:#fff; color:#0b5cff; border-radius:12px; padding:12px 18px;
      border:1px solid #dbe6ff;
    }

    .trustbar{ margin-top:26px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; color:#334155; font-size:.95rem; }
    .trustbar .item{ display:flex; align-items:center; gap:8px; }
    .trustbar .dot{ width:8px; height:8px; border-radius:50%; background:#0b5cff22; border:2px solid #0b5cff33; }

    
    /* ====== Avantages ====== */
    .benefit-tile{
      background:#fff; border:1px solid #e6ecff; border-radius:16px; padding:18px;
      display:flex; gap:12px; align-items:flex-start; height:100%;
    }
    .benefit-tile img{ width:42px; height:42px; object-fit:contain; }
    .benefit-tile h5{ margin:2px 0 4px; font-size:18px; }
    .benefit-tile p{ margin:0; color:#475569; }

    /* ====== CTA bas ====== */
    .cta-wrap{ border-radius:18px; overflow:hidden; }

    /* ====== Sticky help ====== */
    .sticky-help{ position:fixed; right:18px; bottom:18px; z-index:999; display:flex; gap:10px; }
    .sticky-help a{
      width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
      background:#0b5cff; color:#fff; text-decoration:none; box-shadow:0 10px 30px rgba(11,92,255,.35);
    }
    .sticky-help a.whatsapp{ background:#21c063; box-shadow:0 10px 30px rgba(33,192,99,.35); }

    /* AOS fallback si non chargé */
    .page-services [data-aos]{ opacity:1 !important; transform:none !important; transition:none !important; }

    /* === Services avec image pleine largeur === */
    .service-card--photo{
      padding:0; overflow:hidden; /* supprime padding global, l’image colle aux bords */
    }
    .service-card--photo .card-image{
      width:100%;
      height:200px;
      overflow:hidden;
    }
    .service-card--photo .card-image img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .service-card--photo .card-body{
      padding:22px;
    }

    .wave.wave--top path {
  fill: #EEF5FF !important; /* mets la couleur que tu veux */
}

.wave.wave--bottom path {
  fill: #EEF5FF!important; /* vert, change la couleur comme tu veux */
}
/* HERO – n'affecter que les téléphones (Bootstrap <576px) */
@media (max-width: 575.98px){
  .single-slider .slider-images img{
    transform: translateX(10px) !important; /* ajuste la valeur si besoin */
  }
}

/* (sécurité) à partir de 576px on remet à zéro */
@media (min-width: 576px){
  .single-slider .slider-images img{
    transform: none !important;
  }
}
/* HERO – forcer l'image sur mobile */
@media (max-width: 575.98px){

  /* 1) Certains thèmes cachent le bloc sur mobile */
  .slider-section .slider-images,
  .slider-section .slider-images-02{
    display: block !important;
    position: static !important;          /* redevient dans le flux */
    width: 100% !important;
    margin: 12px auto 8px !important;
    text-align: center !important;
  }

  /* 2) Les enfants sont souvent en absolute + transform */
  .slider-section .slider-images .image,
  .slider-section .slider-images-02 .image{
    position: static !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  /* 3) Si AOS n'est pas initialisé, ça reste invisible */
  .slider-section [data-aos]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* 4) Taille + centrage de l'image */
  .slider-section .slider-images img,
  .slider-section .slider-images-02 img{
    width: 85% !important;       /* ajuste si tu veux plus/moins grand */
    max-width: 420px !important;
    height: auto !important;
    display: inline-block !important;
  }
}

/* === Services > "choose" cards — MOBILE ONLY === */
@media (max-width: 575.98px){

  /* 1) Layout : icône au-dessus du texte, centré */
  .single-choose-item{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
    padding:14px 8px;
  }

  /* 2) Icône : même boîte pour toutes, taille cohérente */
  .single-choose-item .item-icon{
    width:56px;
    height:56px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 6px;
    background:#f1f6ff;
    border:1px solid #e6ecff;
    overflow:visible;         /* évite tout rognage */
  }

  .single-choose-item .item-icon img,
  .single-choose-item .item-icon svg{
    width:34px !important;
    height:34px !important;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    display:block;
  }

  /* 3) Typo compacte */
  .single-choose-item .title{ font-size:18px; line-height:1.2; margin-bottom:4px !important; }
  .single-choose-item p{ font-size:14px; margin:0 !important; }

  /* 4) Petits séparateurs (optionnel) pour l’air entre cartes */
  .choose-items-wrapper .row > [class*="col-"]{
    padding-top:14px;
    padding-bottom:14px;
    border-bottom:1px solid #edf2ff;
  }
  .choose-items-wrapper .row > [class*="col-"]:nth-last-child(-n+2){ border-bottom:0; }

  /* 5) Si le thème ajoute une barre verticale/pseudo-élément, on l’annule */
  .single-choose-item::before,
  .single-choose-item .title::before{ content:none !important; }
}


/* ===== HERO – NL : même ordre "texte → bouton → texte" que FR ===== */
html[lang="nl"] .slider-section .slider-content .btn.btn-custom-01{
  display:inline-block;
  margin: 14px 0 10px;         /* espace au-dessus/dessous comme en FR */
}

html[lang="nl"] .slider-section .slider-content .atelier{
  display:block;               /* force le passage à la ligne sous le bouton */
  margin-top: 10px;
}

/* Mobile: garder l’alignement propre + bouton centré */
@media (max-width: 575.98px){
  html[lang="nl"] .slider-section .slider-content{ text-align:center; }
  html[lang="nl"] .slider-section .slider-content .btn.btn-custom-01{
    margin-left:auto; margin-right:auto;
  }
  html[lang="nl"] .slider-section .slider-content .atelier{
    margin-top: 12px;          /* un poil plus d’air sous le bouton sur mobile */
  }
}
.form-message { margin-top: 10px; font-weight: 600; }