/* =====================================================================
   Le Bar à Pieds — couche responsive
   ---------------------------------------------------------------------
   Les pages sont stylées en inline : ces règles doivent donc porter
   !important pour reprendre la main. Rien n'est modifié au-dessus de
   900 px : l'affichage bureau existant reste strictement identique.
   ===================================================================== */

/* ---------- 1. Aucune page ne doit déborder latéralement ---------- */
html, body { max-width: 100%; overflow-x: hidden; }

/* Le décor végétal est positionné en absolu : il ne doit jamais
   élargir la page (c'est lui qui créait une partie du défilement). */
#lbap-decor { overflow: hidden !important; }

/* ---------- 2. Bouton burger (masqué sur bureau) ---------- */
.lbap-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; color: #7A2236;
  -webkit-tap-highlight-color: transparent;
}
.lbap-burger span {
  display: block; position: relative;
  width: 22px; height: 1.6px; background: currentColor;
  transition: transform .28s ease, opacity .18s ease;
}
.lbap-burger span::before,
.lbap-burger span::after {
  content: ""; position: absolute; left: 0;
  width: 22px; height: 1.6px; background: currentColor;
  transition: transform .28s ease, top .28s ease;
}
.lbap-burger span::before { top: -7px; }
.lbap-burger span::after  { top:  7px; }

.lbap-nav-open .lbap-burger span { background: transparent; }
.lbap-nav-open .lbap-burger span::before { top: 0; transform: rotate(45deg); }
.lbap-nav-open .lbap-burger span::after  { top: 0; transform: rotate(-45deg); }

/* =====================================================================
   3. TABLETTE ET MOBILE — jusqu'à 900 px
   ===================================================================== */
@media (max-width: 900px) {

  /* ---- En-tête ---- */
  header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 16px !important;
  }
  header > * { margin: 0 !important; }
  header img { height: 54px !important; }

  .lbap-burger { display: flex !important; order: 3; }

  /* Le bouton RÉSERVER reste visible : c'est l'action principale. */
  header > a[data-lbap="planity"] {
    order: 2;
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    gap: 7px !important;
  }

  /* ---- Navigation en panneau deroulant ----
     Ouverture par bascule d'affichage plutot que par animation de
     max-height : sur un conteneur flex en colonne, la hauteur calculee
     restait a zero et le panneau ne s'ouvrait jamais. Moins spectaculaire,
     mais fiable partout. */
  header nav {
    position: absolute !important;
    top: 100% !important; left: 0; right: 0;
    display: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #F6F1EC;
    border-top: 1px solid rgba(122,34,54,.12);
    box-shadow: 0 18px 40px rgba(64,34,27,.14);
    max-height: 80vh;
    overflow-y: auto;
    /* L'en-tete applique margin:0 auto a ses enfants directs : remis a zero
       ici, sinon le premier lien est decale et le dernier deborde du panneau. */
    /* Une reserve en bas garantit que le dernier lien reste atteignable
       quel que soit le decalage introduit par les styles de l'en-tete. */
    padding: 0 0 34px !important;
    margin: 0 !important;
  }
  .lbap-nav-open header nav { display: flex !important; }

  header nav > a {
    margin: 0 !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 15px 22px !important;
    font-size: 13px !important;
    letter-spacing: 1.6px !important;
    border-bottom: 1px solid rgba(122,34,54,.08);
  }
  header nav > a:last-child { border-bottom: 0; }
  /* Le soulignement de l'onglet actif n'a plus de sens en liste */
  header nav > a > span { display: none !important; }

  /* ---- Contenu : les grilles multi-colonnes passent en pile ----
     Portee volontairement large : plusieurs rangees (les 4 avantages de
     l'accueil par exemple) ne sont pas dans un <section>, un selecteur
     scope sur section/main les laissait deborder. L'en-tete est repris
     juste au-dessus en display:flex, il n'est donc pas concerne. */
  .lbap-wrap [style*="grid-template-columns"],
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Uniquement les flex en LIGNE : sur un flex en colonne, autoriser le
     retour a la ligne empeche les enfants de s'etirer sur la largeur du
     conteneur et les fait deborder (cas des cartes de la page contact). */
  .lbap-wrap [style*="display:flex"]:not([style*="column"]):not(header):not(nav),
  footer [style*="display:flex"]:not([style*="column"]) {
    flex-wrap: wrap !important;
  }

  /* Largeurs calculees pour le bureau (calc(100% - 96px) et consorts) :
     elles depassent une fois les marges laterales mobiles appliquees. */
  .lbap-wrap [style*="calc(100%"] { width: auto !important; }

  /* Un enfant de grille ou de flexbox a min-width:auto par defaut : il
     refuse de descendre sous la largeur minimale de son contenu et
     deborde donc de sa colonne. C'est ce qui elargissait la page contact. */
  .lbap-wrap [style*="display:grid"] > *,
  .lbap-wrap [style*="display: grid"] > *,
  .lbap-wrap [style*="display:flex"] > *,
  .lbap-wrap [style*="display: flex"] > * { min-width: 0 !important; }

  /* Menus deroulants sur mesure (choix du soin, choix de l'institut) :
     le panneau doit epouser la largeur du champ, pas garder sa largeur bureau. */
  .lbap-sel, .lbap-sel__list {
    width: 100% !important; max-width: 100% !important;
    left: 0 !important; right: 0 !important;
  }

  /* ---- Tableaux : defilement horizontal plutot que debordement ----
     Concerne le comparatif des soins et les tableaux des pages legales. */
  .lbap-tablewrap {
    display: block; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .lbap-tablewrap > table { min-width: 520px; }

  /* ---- Marges intérieures raisonnables ---- */
  .lbap-wrap section,
  .lbap-wrap > div > section { padding-left: 20px !important; padding-right: 20px !important; }
  footer { padding-left: 20px !important; padding-right: 20px !important; }

  /* ---- Médias ---- */
  img, video { max-width: 100% !important; height: auto !important; }
  svg { max-width: 100%; }

  /* ---- Largeurs figées ---- */
  .lbap-wrap [style*="width:4"],
  .lbap-wrap [style*="width:5"],
  .lbap-wrap [style*="width:6"],
  .lbap-wrap [style*="min-width"] { max-width: 100% !important; }
}

/* =====================================================================
   4. MOBILE — jusqu'à 640 px
   ===================================================================== */
@media (max-width: 640px) {

  header { padding: 8px 12px !important; }
  header img { height: 46px !important; }
  header > a[data-lbap="planity"] {
    height: 36px !important; padding: 0 13px !important;
    font-size: 10px !important; gap: 6px !important;
  }

  /* Typographie : les grands titres du bureau sont illisibles ici */
  .lbap-wrap h1, .lbap-wrap [style*="font-size:7"], .lbap-wrap [style*="font-size:6"],
  .lbap-wrap [style*="font-size:5"] { font-size: 34px !important; line-height: 1.14 !important; }
  .lbap-wrap h2, .lbap-wrap [style*="font-size:4"] { font-size: 27px !important; line-height: 1.2 !important; }
  .lbap-wrap h3 { font-size: 20px !important; }

  .lbap-wrap section { padding-left: 16px !important; padding-right: 16px !important; }
  footer { padding-left: 16px !important; padding-right: 16px !important; text-align: center; }

  /* Boutons : pleine largeur, cible tactile confortable */
  .lbap-wrap a[style*="border-radius:999px"] {
    min-height: 46px !important;
    justify-content: center !important;
  }

  /* Tarifs : le prix passe sous le nom du soin plutôt que de le comprimer */
  .tf-row { flex-wrap: wrap !important; row-gap: 4px !important; }
  .tf-nom { flex: 1 1 100% !important; }
  .tf-prix { margin-left: 0 !important; }

  /* Cartes cadeaux : la grille de montants garde 3 colonnes, elle est lisible */
  .cc-amt { grid-template-columns: repeat(3, 1fr) !important; }

  /* Menus déroulants de réservation : pleine largeur */
  .lbap-sel { width: 100% !important; max-width: 100% !important; }
}

/* =====================================================================
   5. Confort tactile — indépendant de la largeur
   ===================================================================== */
@media (hover: none) {
  a, button, .lbap-sel { -webkit-tap-highlight-color: rgba(122,34,54,.10); }
}