/* =================================================
   MOBILE.CSS — CL’OSE RÉPARATIONS (VERSION PROPRE)
   Objectif : mobile clean, zéro débordement horizontal,
   CTA utilisables, grilles en 1 colonne, footer lisible.
================================================= */

@media (max-width: 768px){

  /* ========== Anti-débordement global ========== */
  html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  *{ min-width: 0; }

  .container{
    width: 100%;
    max-width: 100%;
    padding-left: .8rem;
    padding-right: .8rem;
  }

  main, .site, .section, .hero, .site-header, .site-footer{
    max-width: 100%;
    overflow-x: hidden;
  }

  img, svg, video, iframe{
    max-width: 100%;
    height: auto;
  }

  /* Typo */
  .section{ padding: 1.1rem 0; }
  h1{ font-size: 1.55rem; line-height: 1.15; }
  h2{ font-size: 1.32rem; line-height: 1.2; }
  p, li{ font-size: 1rem; line-height: 1.55; }

  /* Header / Logo */
  .logo-img{ height: 38px; width: auto; }

  /* Menu mobile (sécurité anti overflow) */
  .site-nav{ max-width: 100%; }
  .site-nav ul{ max-width: 100%; }
  .site-nav a{ overflow-wrap: anywhere; }

  /* HERO */
  .hero{ min-height: 72vh; }
  .hero-inner{ padding: 1rem 0; }
  .hero-center{ padding: 1rem; }

  .hero-title-row{
    gap: .6rem;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .hero-mark{ height: 54px; width: auto; }

  .hero-marquee{
    max-width: 100%;
    overflow: hidden;
  }
  .hero-marquee-track{
    display: inline-flex;
    white-space: nowrap;
    max-width: 100%;
    will-change: transform;
  }
  .hero-marquee-track span{
    display: inline-block;
    max-width: 100%;
  }

  /* CTA : full width (sauf override plus bas) */
  .hero-cta{
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
    width: 100%;
    margin-top: .9rem;
  }
  .hero-cta .btn{
    width: 100%;
    justify-content: center;
    padding: .95rem 1rem;
    font-size: 1rem;
  }

  /* Prestations / Cards */
  .cards{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: .9rem;
  }
  .card{ padding: 1rem; }
  .card-icon{ height: 44px; width: auto; }

  /* Zone */
  .areas{
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
  }
  .areas span{
    padding: .45rem .65rem;
    font-size: .95rem;
  }

  /* Avantages */
  .advantages{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: .85rem;
  }
  .advantage{ padding: 1rem; }

  /* Service pages : listes alignées */
  .service-content ul,
  .service-content ol{
    padding-left: 1.1rem;
    margin-left: 0;
  }
  .service-content li{ margin-left: 0; }

  /* Contact */
  .contact-info{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: .85rem;
  }
  .contact-details p{ word-break: break-word; }

  /* ===== Bandeau partenaires (ta règle, sans @media imbriqué) ===== */
  .partners-band{ padding: 1.2rem; }
  .partners-band-inner{ padding: 12px 12px; }
  .partner-logo{ height: 64px; width: auto; }

  /* Blocs plus blancs (override styles.css) */
  #services,
  #zone,
  #avantages,
  #contact,
  .faq{
    background-color: rgba(255,255,255,.98);
  }
  .partners-band{
    background-color: rgba(255,255,255,.98);
  }

  /* Cookies */
  .cookie-banner__inner{
    width: calc(100% - 1rem);
    padding: .85rem;
  }
  .cookie-banner__actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
  }
  .btn-cookie{
    width: 100%;
    padding: .85rem .75rem;
  }

  /* Barre fixe mobile */
  .call-fixed{
    padding-bottom: env(safe-area-inset-bottom);
  }
  .call-fixed a{
    padding: 1rem .75rem;
    font-size: 1.05rem;
  }

  /* Anti-scroll horizontal (plus strict) */
  html, body{ overflow-x: clip; }

  /* Le coupable le plus fréquent chez toi : menu avec transform */
  .site-nav{
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    width: min(92vw, 320px) !important;
    max-width: 92vw !important;
  }

  .site, main, .container, .section, .hero, .site-header, .site-footer{
    overflow-x: clip;
  }

  /* ===== AUDIT FIX — CTA + barre fixe + cartes ===== */
  .hero-cta{ display: none !important; }

  .call-fixed{
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: var(--color-accent) !important;
    padding: .75rem !important;
    gap: .75rem !important;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom)) !important;
  }

  .call-fixed a{
    flex: 1 !important;
    text-align: center !important;
    background: #fff !important;
    color: var(--color-accent) !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 1rem .5rem !important;
    text-decoration: none !important;
    font-size: 1rem !important;
  }

  body{ padding-bottom: 90px !important; }
  .cookie-banner{ bottom: calc(1rem + 90px) !important; }

  .card{ padding: 1.1rem 1rem 1rem !important; }
  .card-icon{
    position: static !important;
    transform: none !important;
    display: block !important;
    width: 120px !important;
    height: 56px !important;
    margin: .2rem auto .65rem !important;
    object-fit: contain !important;
  }

  /* ===== Marquee vitesse mobile ===== */
  .hero-marquee{
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero-marquee-track{
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    font-size: 1.5rem !important;
    width: max-content !important;
    max-width: none !important;
    gap: 3rem !important;
    will-change: transform !important;
    animation: marqueeMobile 50s linear infinite !important;
  }
  .hero-marquee-track > span{
    display: inline-block !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    padding-right: 5rem !important;
  }
  @keyframes marqueeMobile{
    0%   { transform: translate3d(0,0,0); }
    100% { transform: translate3d(-50%,0,0); }
  }

  /* Cookie banner (lisible, boutons empilés) */
  .cookie-banner{
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(90px + env(safe-area-inset-bottom)) !important;
    width: calc(100% - 1.2rem) !important;
    max-width: 100% !important;
  }
  .cookie-banner__inner{ padding: 1rem !important; }
  .cookie-banner__inner p{
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.75rem !important;
  }
  .cookie-banner__actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }
  .btn-cookie{
    width: 100% !important;
    white-space: normal !important;
    padding: 0.75rem 0.5rem !important;
    font-size: 0.95rem !important;
  }

  /* FAQ alignement */
  .faq{ padding: 2rem !important; }
  .faq.container{
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Index prestations 2 colonnes */
  #services .cards{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
    align-items: stretch;
  }
  #services .card{
    min-width: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  #services .card a{
    margin-top: auto;
    display: inline-block;
  }
  #services .card-icon{
    max-width: 56px;
    height: auto;
  }

  /* Zone map */
  .zone-map-wrap{
    max-width:520px;
    margin:14px auto 4px;
  }

  #zone .zone-map-wrap{
    display:block !important;
    position:relative !important;
    z-index:50 !important;
    isolation:isolate;
  }
  #zone img.zone-map{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  #zone{ overflow:hidden; }
  #zone .zone-map-wrap{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  #zone img.zone-map{
    max-width:100% !important;
    width:100% !important;
    height:auto !important;
    display:block !important;
  }

  body.index-page #services .card > p{
    display: none !important;
  }

 /* =================================================
   MENU iOS — FIX RÉEL (sans transform GPU)
================================================= */
@supports (-webkit-touch-callout: none) {

  /* Header au-dessus de tout, SANS transform */
  .site-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20000 !important;
    isolation: isolate;
    transform: none !important;
  }

  /* Menu déroulant iOS */
  .site-header .site-nav{
    position: fixed !important;
    top: calc(var(--logo-header-height, 65px) + env(safe-area-inset-top)) !important;
    right: 10px !important;
    left: auto !important;

    z-index: 20001 !important;

    width: 260px !important;
    max-width: 92vw !important;
    max-height: calc(100vh - (var(--logo-header-height, 65px) + 20px)) !important;

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Le hero et le slideshow ne doivent JAMAIS capter les taps */
  .bg-slideshow,
  .bg-slideshow *,
  .hero::before{
    pointer-events: none !important;
  }
}
/* =================================================
   MOBILE — CONTACT : FORMULAIRE AVANT INFOS
   (CSS only, sans impact desktop)
================================================= */
@media (max-width: 768px){

  /* Le conteneur devient une colonne ordonnée */
  .contact-info{
    display: flex !important;
    flex-direction: column !important;
  }

  /* Formulaire en premier */
  .contact-form{
    order: -1 !important;
  }

  /* Bloc identité après */
  .contact-pro{
    order: 1 !important;
  }

  /* Message succès reste après le formulaire */
  .form-success{
    order: 0 !important;
  }
}
/* =========================================
   CARTES PRESTATIONS (SECTION SERVICES) — MOBILE
   TITRE ORANGE / TEXTE + "VOIR DÉTAILS" BLEU
========================================= */
@media (max-width: 768px){

  /* Titre (h3) en ORANGE */
  #services .cards .card h3{
    color: var(--color-accent) !important;
    font-weight: 700;
  }

  /* Ligne courte (p) en BLEU */
  #services .cards .card p{
    color: var(--color-primary) !important;
    font-weight: 500;
  }

  /* Lien "Voir détails" en BLEU (et hover cohérent) */
  #services .cards .card a{
    color: var(--color-primary) !important;
    font-weight: 700;
  }
  #services .cards .card a:hover{
    opacity: .9;
  }
}
/* =========================================================
   FIX FINAL (MOBILE) — BLOCS PRESTATIONS “COMME INDEX”
   Objectif :
   - Sur mobile : blocs plus “plein écran” (mais avec une petite marge)
   - Uniformité (plus d’arrondis / fonds au hasard)
   - Centrage des textes demandés (intro + FAQ + zone)
   - Sans toucher au HTML
========================================================= */
@media (max-width:768px){

  /* Gouttière mobile : calée “comme index” mais un peu plus serrée */
  :root{
    --mobile-gutter: .6rem;         /* marge extérieure (écran -> contenu) */
    --mobile-block-pad: 1.15rem;    /* padding interne des gros blocs */
    --mobile-text-safe: .45rem;     /* mini marge interne texte (écran arrondi) */
  }

  /* Container : garde une petite marge sur les côtés */
  .container{
    max-width:100% !important;
    width:100% !important;
    margin:0 auto !important;
    padding-left:var(--mobile-gutter) !important;
    padding-right:var(--mobile-gutter) !important;
  }

  /* ====== GROS BLOC PRINCIPAL DES PAGES PRESTATIONS ====== */
  .legal-box.service-content{
    width:100% !important;
    max-width:none !important;
    margin:1rem 0 !important;
    padding:var(--mobile-block-pad) !important;
    border-radius:var(--radius) !important; /* même arrondi partout */
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* IMPORTANT :
     Sur certaines pages, tes sections (FAQ / Avantages / Zone) se retrouvent
     “à l’intérieur” de .legal-box (souvent à cause d’un </div> manquant).
     => On neutralise l’effet “bloc blanc dans bloc blanc” sur mobile.
  */
  .legal-box.service-content .section.container{
    width:100% !important;
    max-width:none !important;
    margin:1.25rem 0 0 !important;
    padding:0 !important;

    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    border-radius:0 !important;
  }

  /* Petits “safe paddings” pour éviter que le texte colle aux bords arrondis de l’écran */
  .legal-box.service-content > p:nth-of-type(-n+2){
    text-align:center !important;                 /* texte AVANT “Ce que je fais” */
    margin-left:var(--mobile-text-safe) !important;
    margin-right:var(--mobile-text-safe) !important;
  }

  /* Zone : centre + safe margins */
  .legal-box.service-content #zone p{
    text-align:center !important;
    margin-left:var(--mobile-text-safe) !important;
    margin-right:var(--mobile-text-safe) !important;
  }

  /* FAQ : centre titres + textes + safe margins */
  .legal-box.service-content .faq h3,
  .legal-box.service-content .faq p{
    text-align:center !important;
    margin-left:var(--mobile-text-safe) !important;
    margin-right:var(--mobile-text-safe) !important;
  }

  /* Sécurité anti-débordement */
  .legal-box.service-content,
  .legal-box.service-content *{
    max-width:100% !important;
  }
}