/* ============================================================
   mobile-clean.css — consolidation de l'expérience mobile
   Objectif : une seule barre d'action, un seul message de dispo.
   Réversible : retirer le <link> de cette feuille restaure l'ancien état.
   ============================================================ */

@media (max-width: 768px) {

  /* ---------- 1. Supprimer les doublons ---------- */
  /* Deux bandeaux de disponibilité empilés en haut : on n'en garde qu'un */
  #availBar { display: none !important; }

  /* Badge d'avis en surimpression : les avis figurent déjà dans le contenu */
  #trust-badge { display: none !important; }

  /* Deuxième barre d'action en bas : masquée UNIQUEMENT si stickyBook existe.
     Les pages sans stickyBook conservent #mob-cta comme barre unique. */
  body.has-sticky-book #mob-cta { display: none !important; }

  /* Pages sans stickyBook : #mob-cta devient la barre principale */
  body:not(.has-sticky-book) #mob-cta {
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    background: rgba(13,20,32,.97) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,.09) !important;
  }
  body:not(.has-sticky-book) #mob-cta a { min-height: 52px; }

  /* Boutons flottants redondants avec la barre du bas */
  .float-phone, .float-wa, #waFloat65, #price-fab { display: none !important; }

  /* Troisième message « réponse en 2 min » */
  #online-bar { display: none !important; }

  /* Pop-ups intrusifs sur petit écran */
  #exit-overlay, #pwa-install { display: none !important; }

  /* ---------- 2. Barre d'action unique, en bas ---------- */
  #stickyBook {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    align-items: stretch;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    flex-wrap: nowrap !important;
    background: rgba(13, 20, 32, .97) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, .09) !important;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .45) !important;
  }

  /* Le libellé de ville prend de la place pour rien sur mobile */
  #stickyBook > span { display: none !important; }

  /* Les trois liens deviennent trois boutons de taille égale */
  #stickyBook > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 52px;
    padding: 0 8px !important;
    border-radius: 14px !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
    text-align: center;
    box-shadow: none !important;
    transition: opacity .15s ease, transform .15s ease;
  }
  #stickyBook > a:active { transform: scale(.97); opacity: .9; }

  /* Appeler = action primaire (cuivre plein) */
  #stickyBook > a[href^="tel:"] {
    order: 1;
    background: linear-gradient(135deg, #B87333, #d4955e) !important;
    color: #0a0f1a !important;
    border: none !important;
    font-size: 0 !important;               /* masque le numéro brut */
  }
  #stickyBook > a[href^="tel:"]::before {
    content: "📞 Appeler";
    font-size: .82rem;
    font-weight: 700;
  }

  /* WhatsApp = action secondaire */
  #stickyBook > a[href*="wa.me"] {
    order: 2;
    background: rgba(37, 211, 102, .12) !important;
    border: 1px solid rgba(37, 211, 102, .35) !important;
    color: #25d366 !important;
  }

  /* SMS = action tertiaire (utile pour les clients qui n'ont pas WhatsApp) */
  #stickyBook > a[href^="sms:"] {
    order: 3;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    color: #e8e4de !important;
    font-size: 0 !important;
  }
  #stickyBook > a[href^="sms:"]::before {
    content: "📱 SMS";
    font-size: .82rem;
    font-weight: 700;
  }

  /* ---------- 3. Le contenu ne doit pas passer sous la barre ---------- */
  body.has-sticky-book:not(.app-mode) { padding-bottom: 84px !important; }
  body:not(.has-sticky-book):not(.app-mode) { padding-bottom: 76px !important; }

  /* ---------- 4. Bandeau de disponibilité : discret ---------- */
  #avail-bar {
    padding: 5px 12px !important;
    font-size: .7rem !important;
    line-height: 1.3;
  }


  /* ---------- 6. Page d'accueil : suppression de l'écran d'attente ----------
     Le splash imposait 2,1 s d'animations PUIS un tap sur « C'EST PARTI »
     avant d'accéder au formulaire de réservation. Sur une page d'atterrissage
     issue de Google, c'est un interstitiel : mauvais pour la conversion
     et signalé par Google sur mobile. Le contenu s'affiche désormais direct. */
  #appSplash { display: none !important; }

  /* La pop-up d'installation ne doit pas s'ouvrir toute seule à l'arrivée.
     Le bouton d'installation reste disponible dans l'en-tête de l'app. */
  .install-popup { display: none !important; }

  /* ---------- 5. Confort de lecture ---------- */
  /* Tableaux de tarifs : défilement horizontal plutôt que débordement */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Cibles tactiles minimales sur les liens de navigation en bas de page */
  footer a { display: inline-block; min-height: 32px; line-height: 1.9; }
}

/* Respect des préférences système */
@media (prefers-reduced-motion: reduce) {
  #stickyBook > a { transition: none; }
  #stickyBook > a:active { transform: none; }
}

/* ============================================================
   Zoom automatique iOS : tout champ sous 16px provoque un zoom
   au focus. On force 16px sur mobile, sans toucher au reste.
   ============================================================ */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }
  /* Le champ garde sa hauteur confortable malgré la police plus grande */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select { min-height: 48px; }
  textarea { min-height: 72px; }
}

/* Mode app plein écran : neutralise le déplacement par pincement,
   sans interdire le zoom du navigateur (accessibilité préservée). */
@media (max-width: 768px) {
  body.app-mode { touch-action: pan-y; overscroll-behavior: none; }
  body.app-mode .mobile-app { touch-action: pan-y; }
}

/* ============================================================
   Animation d'apparition : le contenu ne doit jamais dépendre
   du JavaScript pour être visible. Sans cette règle, les blocs
   .reveal restent à opacity:0 — ils occupent la place sans rien
   afficher, d'où des écrans entiers vides au défilement.
   L'animation reste active via .visible pour les navigateurs
   où l'observateur fonctionne.
   ============================================================ */
.reveal { opacity: 1 !important; transform: none !important; }
.reveal.visible { opacity: 1 !important; transform: none !important; }
.fade-in { opacity: 1 !important; transform: none !important; }

/* Ancien module de réservation (écran carte) : définitivement neutralisé.
   Plus aucun bouton n'y mène ; cette règle empêche toute réouverture
   par un script résiduel. */
#mapScreen, #mapScreen.open { display: none !important; }

/* ============================================================
   Un seul bandeau de disponibilité : le second (sous l'en-tête)
   faisait doublon avec celui du haut, sur toutes les tailles.
   ============================================================ */
#availBar { display: none !important; }

/* ============================================================
   TRANSITIONS ENTRE RUBRIQUES
   Le site alterne trois fonds : --bg (#0a0f1a), --bg2 (#0e1525)
   et le vert de la section médicale. Les jonctions étaient des
   lignes nettes. On adoucit chaque changement de fond par un
   dégradé haut et bas, placé au-dessus du calque de fond mais
   sous le contenu, et limité à la marge intérieure des sections.
   ============================================================ */

/* Sections à fond alterné (--bg2) */
.sec-dk { position: relative; }
.sec-dk::before,
.sec-dk::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: 80px; pointer-events: none; z-index: 0;
}
.sec-dk::before { top: -1px;    background: linear-gradient(to bottom, #0a0f1a, rgba(10,15,26,0)); }
.sec-dk::after  { bottom: -1px; background: linear-gradient(to top,    #0a0f1a, rgba(10,15,26,0)); }
.sec-dk > * { position: relative; z-index: 1; }

/* Section médicale : fond image + voile vert (calque en z-index 1) */
#medical { position: relative; }
#medical::before,
#medical::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: 70px; pointer-events: none; z-index: 3;
}
#medical::before {
  top: -1px;
  background: linear-gradient(to bottom, #0a0f1a 0%, rgba(10,15,26,.72) 38%, rgba(10,15,26,0) 100%);
}
#medical::after {
  bottom: -1px;
  background: linear-gradient(to top, #0a0f1a 0%, rgba(10,15,26,.72) 38%, rgba(10,15,26,0) 100%);
}

/* Blocs à fond --bg2 en pied de page (articles, villes voisines) */
#articles-utiles, #villes-voisines { position: relative; }

.sec { scroll-margin-top: 90px; }