/* ======== Mobile-only (≤767px) — réutilise tout ton contenu ======== */

/* Base layout mobile */
.page-container { display:block !important; min-height: 100dvh; }
.main-content-wrapper { display:grid !important; grid-template-rows: 1fr auto; min-height: 100dvh; }
.main-content { min-height:auto !important; }
#page-footer { margin-top:0 !important; }

/* Écrans par section via :target (zéro duplication) */
[data-section] { display:none !important; }
:target[data-section] { display:block !important; }
/* défaut si aucun hash → Accueil */
html:not(:has(:target)) #accueil { display:block !important; }

/* Pages courtes : neutraliser les contraintes desktop en mobile */
.short-page {
  height:auto !important;
  min-height:auto !important;
  overflow:visible !important;
  background:none !important;
}

/* Supprimer les scrolls imbriqués dans les pages longues */
#enfant-scroll-content,
#adulte-scroll-content,
#personne-agee-scroll-content {
  overflow:visible !important;
  height:auto !important;
}
/* Masquer les flèches de scroll sur mobile */
#enfant-scroll-up, #enfant-scroll-down,
#adulte-scroll-up,  #adulte-scroll-down,
#personne-agee-scroll-up, #personne-agee-scroll-down {
  display:none !important;
}

/* Tab bar fixe (app-like) — place-la APRÈS les sections dans le DOM */
#m-tabbar {
  position:fixed; left:0; right:0;
  bottom: max(0px, env(safe-area-inset-bottom));
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:8px; padding:10px 12px;
  background:#fff; border-top:1px solid #E2E8F0; z-index:60;
  box-shadow:0 -6px 24px rgba(26,32,44,.06);
}
#m-tabbar a{
  display:flex; align-items:center; justify-content:center;
  height:44px; border-radius:12px; font-weight:700;
  color:#1A202C; border:1px solid #E2E8F0; background:#fff;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
  touch-action: manipulation;
}
#m-tabbar a:hover{ border-color:#4299E1; color:#4299E1; }
#m-tabbar a:active{ transform:translateY(1px); }
#m-tabbar a:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(49,130,206,.35); border-color:#3182CE; }

/* Espace pour la tab bar */
.section-inner, .section-pad { padding-bottom:96px; }

/* Masquer la sidebar desktop en mobile (on garde ton header mobile) */
#sidebar-nav{ display:none !important; }
#sidebar{ position:static !important; height:auto !important; }

/* Typo mobile douce */
.title-hero{ font-size:clamp(24px, 6.5vw, 32px); line-height:1.2; }
.title-sec{  font-size:clamp(20px, 5.8vw, 28px); line-height:1.25; }

/* ===== Coloration de l’onglet actif (tab bar) — version bleue ===== */
:root{
  --m-tab-active-bg:#3182CE;   /* secondary-600 */
  --m-tab-active-text:#fff;
  --m-tab-active-border:#3182CE;
  --m-tab-active-shadow:0 6px 16px rgba(49,130,206,.25);
}
/* Par défaut (pas de hash) → Accueil actif */
html:not(:has(:target)) #m-tabbar a[href="#accueil"],
/* 1:1 sections principales */
#accueil:target     ~ #m-tabbar a[href="#accueil"],
#pourqui:target     ~ #m-tabbar a[href="#pourqui"],
#honoraires:target  ~ #m-tabbar a[href="#honoraires"],
#contact:target     ~ #m-tabbar a[href="#contact"],
/* Sous-sections → activent “Pour qui ?” */
#enfant:target         ~ #m-tabbar a[href="#pourqui"],
#adulte:target         ~ #m-tabbar a[href="#pourqui"],
#personne-agee:target  ~ #m-tabbar a[href="#pourqui"]{
  background: var(--m-tab-active-bg);
  color: var(--m-tab-active-text);
  border-color: var(--m-tab-active-border);
  box-shadow: var(--m-tab-active-shadow);
}
:root { --m-tabbar-h: 64px; } /* fallback */
/* Ultra-petits écrans : resserrer un peu */
@media (max-width: 360px) {
  #m-tabbar { gap:6px; padding:8px 10px; }
  #m-tabbar a { height:40px; font-size:13px; }
}
#mobile { display: none !important; }
/* Footer mobile : ne garder que notre bloc #m-footer-stack + la ligne © */
#page-footer .max-w-7xl > div:not(#m-footer-stack):not(.mt-1) {
  display: none !important;
}

/* Empilement propre du footer mobile */
#m-footer-stack{
  display: grid;
  gap: 6px;
  text-align: center;
  margin-top: 2px; /* léger resserrage haut */
}
#m-footer-stack .mfs-title{ font-weight: 700; color:#1A202C; }
#m-footer-stack .mfs-line{ color:#1A202C; }
#m-footer-stack .mfs-link{
  color:#3182CE; font-weight:700; text-decoration:none;
}
#m-footer-stack .mfs-link:hover{ text-decoration:underline; }

/* Remonter un peu le bloc et éviter qu'il soit couvert par la tab bar */
#page-footer{
  padding-top: 10px !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--m-tabbar-h) + 4px) !important;
}

@media (max-width: 767px){
  #page-footer .max-w-7xl > div:nth-of-type(1),
  #page-footer .max-w-7xl > div:nth-of-type(2){
    display: none !important;
  }
}
@media (max-width: 767px){
  /* cache la ligne © d'origine en mobile */
  #page-footer .mt-1 { display: none !important; }
}
@media (max-width: 767px){
  /* Plus de largeur utile dans le footer */
  #page-footer .max-w-7xl{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Lignes compactes sur une seule ligne (scroll horizontal discret si trop étroit) */
  #m-footer-stack .mfs-row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #m-footer-stack .mfs-row::-webkit-scrollbar{ display: none; }
  #m-footer-stack .sep{ opacity: .6; }

  /* Option : réduire un peu la taille sur très petits écrans */
  @media (max-width: 360px){
    #m-footer-stack .mfs-line{ font-size: 12px; }
  }
}
@media (max-width: 767px){
  #m-about-top{
    display:inline-flex; align-items:center; gap:6px;
    height:36px; padding:0 12px; border-radius:9999px;
    background:#3182CE; color:#fff; border:1px solid #2c6fb3;
    font:700 13px/1 system-ui,-apple-system,"Inter",sans-serif;
    box-shadow:0 6px 18px rgba(49,130,206,.25);
    flex-shrink:0;
  }
  #m-about-top svg{ width:16px; height:16px; }
  #m-about-top:active{ transform:translateY(1px); }
  #m-about-top:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(49,130,206,.35); }
}
@media (max-width: 767px){
  /* bouton déjà stylé plus haut ; on compresse juste sur tout petits écrans */
  @media (max-width: 360px){
    #m-about-top{ padding: 0 10px; }
    #m-about-top .label{ font-size: 12px; }
  }
  @media (max-width: 320px){
    #m-about-top{ padding: 0 8px; }
    #m-about-top .label{ font-size: 11.5px; }
  }
}