/* =====================================================================
   BIA — MOBILE
   Couche responsive finale : se charge APRÈS styles.css et vision.css.
   Charte (navy / crème / corail) et animations conservées ; on adapte
   les tailles, les espacements et les zones tactiles (≥ 44 px), le
   menu devient plein écran, les modales arrivent par le bas, et le
   zoom automatique d'iOS dans les formulaires est neutralisé.
   Deux seuils : ≤ 900 px (tablettes, grands téléphones) et
   ≤ 560 px (petits écrans).
   ===================================================================== */

/* ==================== TABLETTES ET MOBILES (≤ 900 px) ==================== */
@media(max-width:900px){

  /* ---------- rythme global ---------- */
  .wrap{padding:0 18px}
  .pad{padding:72px 0}
  .head{margin-bottom:42px}
  .head h2{margin:10px 0}
  html{scroll-padding-top:88px}           /* les ancres ne passent plus sous l'en-tête fixe */
  .subpage{padding-top:76px}

  /* les décors (orbes, slider) dépassaient à droite : plus de défilement latéral.
     clip plutôt que hidden pour ne pas casser position:sticky ; hidden = repli Safari<16 */
  body{overflow-x:hidden;overflow-x:clip}

  /* iOS : taille de saisie ≥ 16 px pour bloquer le zoom automatique */
  .field input,.field select,.field textarea,.nav-search input{font-size:16px}
  input,select,textarea{font-size:16px}

  /* ---------- menu plein écran ---------- */
  /* ponytail: le flou du header créait un bloc conteneur -> le menu en
     position:fixed restait enfermé dans la barre. Sans flou il couvre l'écran. */
  header{background:rgba(18,19,43,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
  header.scrolled{background:rgba(18,19,43,.97)}
  header .logo{position:relative;z-index:65}
  .logo svg{width:38px}
  .logo b{font-size:1.15rem}
  .burger{position:relative;z-index:65;padding:10px}   /* zone tactile plus large */
  .burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  body.menu-open{overflow:hidden}                       /* le fond ne défile plus sous le menu */

  /* la langue reste dans la barre : plus besoin d'ouvrir le menu pour en changer */
  nav>.lang-switch{position:relative;z-index:65;margin:0 auto 0 12px;padding:3px}
  .lang-switch button{padding:9px 10px;font-size:.7rem;min-height:38px}

  /* le panneau couvre tout l'écran et défile si l'écran est court */
  .nav-links{position:fixed;inset:0;z-index:60;flex-direction:column;align-items:center;
    justify-content:center;justify-content:safe center;gap:4px;
    padding:calc(76px + 12px) 20px 26px;background:var(--ink);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transform:translateY(-103%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .nav-links.open{transform:none}
  .nav-links a{font-size:clamp(1.05rem,4.6vw,1.35rem);padding:11px 8px;flex-shrink:0;
    opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s,color .25s}
  .nav-links.open a{opacity:1;transform:none}
  .nav-links.open a:nth-child(1){transition-delay:.07s}
  .nav-links.open a:nth-child(2){transition-delay:.12s}
  .nav-links.open a:nth-child(3){transition-delay:.17s}
  .nav-links.open a:nth-child(4){transition-delay:.22s}
  .nav-links.open a:nth-child(5){transition-delay:.27s}
  .nav-links.open a:nth-child(6){transition-delay:.32s}
  .nav-links.open a:nth-child(7){transition-delay:.37s}
  .nav-links.open a:nth-child(8){transition-delay:.42s}
  .nav-links a::after{bottom:2px}

  /* ---------- hero d'accueil ---------- */
  .hero{min-height:100svh;padding:132px 0 56px}
  .hero h1{font-size:clamp(2.3rem,11vw,3.4rem)}
  .hero p.lead{font-size:1rem;margin:22px auto 30px;max-width:34ch}
  .hero-cta{gap:12px;width:100%}
  .hero-search{max-width:100%}
  .hero-watermark{font-size:36vw}
  .orb{filter:blur(64px)}
  .orb.o1{width:290px;height:290px;top:-8%;left:-22%}
  .orb.o2{width:230px;height:230px;right:-20%}
  .orb.o3{width:160px;height:160px}
  .tag{font-size:.72rem;padding:7px 14px}

  /* préchargeur allégé */
  .pre-word{letter-spacing:3px;font-size:.6rem;text-align:center;padding:0 20px}

  /* ---------- grilles et cartes ---------- */
  .card{height:300px}
  .card .go{opacity:1;transform:none}      /* tactile : la flèche est toujours visible */
  .theme-grid{grid-template-columns:1fr 1fr}
  .spirit-row{flex-direction:column;gap:14px}
  .spirit-pill{min-width:0;width:100%;padding:16px 18px}
  .rev-grid{grid-template-columns:1fr;gap:28px}
  .rev-list{max-height:380px}
  .stars-pick span{font-size:2.1rem;padding:6px}       /* étoiles faciles à toucher */
  .step .num{animation:none}                            /* bob 3D continu : inutile au tactile */

  /* ---------- formulaires ---------- */
  .form-card{padding:28px 20px}
  .field input,.field select,.field textarea{min-height:48px}
  .field textarea{min-height:120px}
  .btn{min-height:48px}
  form .btn[type="submit"]{width:100%;justify-content:center}

  /* ---------- modales : feuille montant du bas ---------- */
  .overlay{padding:0;align-items:flex-end}
  .modal{max-width:100%;max-height:94dvh;border-radius:22px 22px 0 0;border-bottom:none}
  .overlay.on .modal{animation:sheetIn .42s cubic-bezier(.2,.7,.2,1)}
  .modal-head{padding:18px 20px}
  .modal-head h3{font-size:1.25rem}
  .modal-body{padding:20px}
  .modal-x{width:42px;height:42px}
  .sent-modal .modal-body{padding:38px 24px 30px}
  .promo-modal{border-radius:22px 22px 0 0}
  .promo-img{height:170px}
  .promo-body{padding:24px 22px 28px}
  .promo-body h3{font-size:1.4rem}
  .promo-actions .btn{width:100%;justify-content:center}

  /* ---------- pied de page ---------- */
  footer{padding:54px 0 28px}
  .foot-grid{gap:26px;margin-bottom:30px}
  .foot-brand p{max-width:none}
  footer ul a{display:inline-block;padding:5px 0}      /* liens plus faciles à viser */

  /* ---------- utilitaires flottants ---------- */
  .compare-fab{right:16px;bottom:76px;padding:11px 18px;font-size:.82rem}
  html[dir="rtl"] .compare-fab{right:auto;left:16px}

  /* ---------- page voyage organisé (charter) ---------- */
  .sh-hero{padding:64px 0 48px}
  .sh-hero p{font-size:.95rem}
  .chips{gap:8px}
  .chip{padding:8px 13px;font-size:.8rem}
  .step-head{gap:10px;margin-bottom:20px}
  .cat-tabs{flex-wrap:nowrap;overflow-x:auto;padding:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cat-tabs::-webkit-scrollbar{display:none}
  .cat-tabs .tt{flex-shrink:0;width:auto;align-self:center;margin:0 4px 0 0}
  .cat-tab{flex-shrink:0;padding:10px 16px}
  .hotel-card2{padding:20px 18px}
  .hotel-card2 .hh{flex-direction:column}
  .room-boxes{grid-template-columns:1fr 1fr}
  .card-foot{flex-direction:column;align-items:stretch;text-align:center;gap:16px}
  .card-foot .from-price b{display:inline-block;margin-left:6px}
  .card-book-btn{width:100%;padding:14px;min-height:48px}
  .compare-check{justify-content:center;padding:6px 0}
  .sel-bar{padding:14px 0 calc(14px + env(safe-area-inset-bottom))}
  .sel-bar .wrap{flex-direction:column;gap:10px;text-align:center}
  .sel-bar .btn{width:100%;justify-content:center}
  .cmp-modal{padding:22px 14px;max-height:92dvh}
  .cmp-table{min-width:540px}
  .photo-main{aspect-ratio:4/3}
  .pax-panel{padding:16px}
  .pp-ctrl button{width:44px;height:44px;font-size:1.25rem}
  .chd-chip{padding:10px 14px}

  /* ---------- page réservation ---------- */
  .journey{position:static;padding:24px 18px}
  .trip-hero{min-height:280px}
  .res-grid{padding:32px 0 64px;gap:22px}
  .flight .d{font-size:1.05rem}
  .flight .mid{min-width:64px}

  /* ---------- espace admin ---------- */
  .admin-top{position:static}
  .admin-top .wrap{gap:10px}
  .admin-top .logo small{display:none}
  .admin-tabs{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .admin-tabs::-webkit-scrollbar{display:none}
  .admin-tabs button{flex-shrink:0;padding:10px 16px;min-height:44px}
  .admin-body{padding:26px 0}
  .admin-card{padding:20px 16px;overflow-x:auto}
  .admin-card h3{font-size:1.15rem}
  .atable{min-width:580px}
  .atable th,.atable td{padding:11px 12px}
  .mini-grid{grid-template-columns:1fr 1fr}
  .thumbs{grid-template-columns:repeat(3,1fr)}
  .login-box{margin:48px auto}
  .rq-l b{max-width:62%}
  .btn-del{min-height:44px}
}

/* ==================== PETITS ÉCRANS (≤ 560 px) ==================== */
@media(max-width:560px){
  .wrap{padding:0 16px}
  .pad{padding:60px 0}
  .head{margin-bottom:34px}
  .card{height:280px}
  .theme-grid{grid-template-columns:1fr 1fr;gap:12px}
  .theme{height:120px}
  .theme .lbl{font-size:.82rem}
  .room-boxes{grid-template-columns:1fr}
  .charter-grid{grid-template-columns:1fr}
  .gallery{gap:8px}
  .gallery .main{height:200px}
  .room-main{height:250px}
  .mini-grid{grid-template-columns:1fr}
  .thumbs{grid-template-columns:1fr 1fr}
  .img-prev{height:120px}
  .contact-card{padding:28px 20px}
  .sh-hero h1{font-size:clamp(1.7rem,8.5vw,2.2rem)}
  .step-head h2{font-size:1.25rem}
  .modal-head h3{font-size:1.12rem}
  .promo-img{height:150px}
  .rev-list{max-height:320px}
  .login-box{margin:36px auto}
  .quote-box .qt b{font-size:1.3rem}
}

/* ==================== TRÈS PETITS ÉCRANS (≤ 380 px) ==================== */
@media(max-width:380px){
  .theme-grid{grid-template-columns:1fr}
  .chips .chip{font-size:.74rem;padding:7px 11px}
  .logo svg{width:32px}
  .logo b{font-size:1rem}
  .logo small{font-size:.5rem;letter-spacing:2px}
  .lang-switch button{padding:8px 9px;font-size:.66rem}
  nav>.lang-switch{margin-left:6px;margin-right:6px}
}

/* ============ TÉLÉPHONE EN PAYSAGE (écran court) ============ */
@media(max-width:900px) and (max-height:520px){
  .nav-links{display:grid;grid-template-columns:1fr 1fr;align-content:center;justify-items:center;
    gap:2px 20px;padding:calc(76px + 8px) 16px 14px}
  .nav-links a{font-size:1rem;padding:8px 6px}
}

/* ==================== mouvement réduit ==================== */
@media (prefers-reduced-motion:reduce){
  .overlay.on .modal{animation:none}
  .nav-links,.nav-links a{transition:none}
  .nav-links a{opacity:1;transform:none}
}

@keyframes sheetIn{from{transform:translateY(64px);opacity:0}}