/* ============================================================
   Slava Driver — optimisations mobile / tactile
   Feuille chargée en DERNIER sur toutes les pages pour corriger
   les points suivants : zoom iOS, zones tactiles, CTA empilés,
   menu déroulant, encoches (safe-area), tableaux et médias.
   Aucune règle desktop n'est modifiée (tout est en media query).
   ============================================================ */

*{-webkit-tap-highlight-color:rgba(165,148,122,.22)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---------- Tablette / mobile (<= 900px) ---------- */
@media(max-width:900px){

  /* 1. iOS zoome automatiquement si un champ fait moins de 16px */
  input,select,textarea{font-size:16px}
  textarea{min-height:120px}

  /* 2. Zones tactiles confortables (>= 44-48px) */
  .btn,button{min-height:48px}
  nav.main a,#mobile a,#mobile-menu a,.sd-header-langs a{
    display:flex;align-items:center;min-height:46px
  }
  #mobile a,#mobile-menu a{padding:4px 2px;font-size:15px}
  #menu,.burger{min-width:48px;min-height:48px;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;margin-left:auto}
  footer a,footer.site a{display:flex;align-items:center;min-height:42px}
  .related a,.zone a,.zone span,.sdg-links a,.msg a{
    display:inline-flex;align-items:center;justify-content:center;min-height:44px
  }

  /* 3. Menus mobiles : scrollables si la liste est longue */
  #mobile,#mobile-menu{
    max-height:calc(100svh - 72px);overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch
  }

  /* 4. Barres collantes lisibles */
  .crumbs{font-size:11px}
}

/* ---------- Téléphone (<= 600px) ---------- */
@media(max-width:600px){

  /* 5. Titres fluides : plus de débordement horizontal */
  h1{font-size:clamp(30px,8.6vw,42px)}
  h2{font-size:clamp(25px,7vw,33px)}
  h3{font-size:clamp(19px,5vw,22px)}

  /* 6. Boutons d'action empilés pleine largeur (meilleure ergonomie) */
  .hero .actions,.page-hero .actions,.cta .actions,.hero-inner .actions{
    display:grid;grid-template-columns:1fr;gap:10px
  }
  .hero .actions .btn,.page-hero .actions .btn,.cta .actions .btn{width:100%}
  .msg{gap:8px}
  .msg a{flex:1 1 auto}
  .sdg-links a{flex:1 1 45%}

  /* 6b. Formulaire : boutons d'envoi pleine largeur */
  .contact-form .msg,form .msg{display:grid;grid-template-columns:1fr;gap:10px}
  .contact-form .msg button,form .msg button{width:100%}

  /* 6c. Boutons flottants plus compacts pour libérer l'écran */
  .floating a{padding:9px 13px;font-size:13px}

  /* 7. Espacements et blocs */
  .card{padding:20px}
  .cta{padding:24px}
  .hero,section{padding-left:0;padding-right:0}
  .stats{gap:14px;justify-content:space-between}
  .stats span{min-width:0;flex:1;overflow-wrap:anywhere}

  /* 8. Tableaux : défilement horizontal fluide */
  .table{-webkit-overflow-scrolling:touch}
  .table table{font-size:13px}
  table th,table td{padding:9px 11px}

  /* 9. Médias : hauteurs adaptées à l'écran */
  figure img,.sdg-gal img{height:210px}
  .videos video,.sdg-videos video{max-height:62svh}
  #map,.mapph{min-height:300px}

  /* 10. Flotte (accueil) : cartes plus compactes */
  .fleetgrid h3{font-size:19px}
  .fleetgrid article{padding:18px;font-size:26px}

  /* 11. Calendrier des tarifs : cellules lisibles au doigt */
  .calendar-grid button{min-height:52px}
}

/* ---------- Très petits écrans (<= 380px) ---------- */
@media(max-width:380px){
  #mobile-menu a,#mobile a{font-size:14px}
  .fleetgrid{grid-template-columns:1fr}
  .kpi b{font-size:20px}
}

/* ---------- Encoches / bords arrondis (iPhone, Android) ---------- */
@supports(padding:max(0px)){
  .c{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right))
  }
  .floating{right:max(15px,env(safe-area-inset-right))}
  #slava-language-flags{left:max(12px,env(safe-area-inset-left))}
}

/* ---------- Accessibilité : réduire les animations si demandé ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .sdg-gal figure:hover img,figure:hover img{transform:none}
}

/* ---------- Impression ---------- */
@media print{
  .floating,#sd-mobile-langs,#slava-language-flags,#mobile,#mobile-menu,.burger{display:none!important}
}