/* =========================================================
   MOBILE OPTIMIZATIONS — Christelle Genier
   Corrections responsive < 768px
   Chargé APRÈS style.css sur toutes les pages
   ========================================================= */

/* ---------- BARRE DE NAVIGATION BASSE — masquée sur desktop ---------- */
.bottom-nav { display: none; }

/* ---------- Liste de soins mobile — masquée sur desktop ---------- */
.soins-mobile { display: none; }

/* ================================================================
   TOUT CE QUI SUIT s'applique UNIQUEMENT sur mobile (≤ 767px)
   ================================================================ */
@media (max-width: 767px) {

  /* ---------- Variables réduites ---------- */
  :root {
    --section-y: clamp(52px, 9vw, 72px);
    --arch: 120px;
  }

  /* ---------- Anti-débordement horizontal (stop "ça bouge à gauche/droite") ---------- */
  html, body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
    overscroll-behavior-x: none;
  }

  /* ---------- Corps : espace pour la bottom nav ---------- */
  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  /* ---------- BOTTOM NAV ---------- */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 108;
    background: rgba(251, 248, 241, 0.96);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    border-top: 1px solid var(--ligne);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 0;
    align-items: stretch;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
  }

  /* Sur l'ACCUEIL (JS actif) : la barre est cachée tant qu'on est sur le hero,
     puis glisse vers le haut quand on quitte le hero. Plein impact à l'arrivée. */
  html.js .is-home .bottom-nav {
    transform: translateY(calc(100% + 8px));
  }
  html.js .is-home .bottom-nav.nav-shown {
    transform: translateY(0);
  }

  .bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--texte-doux);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease;
    min-height: 52px;
    border-radius: 10px;
    position: relative;
  }

  .bottom-nav__item.active {
    color: var(--brun);
  }

  .bottom-nav__item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    flex-shrink: 0;
    transition: stroke .2s ease;
  }

  .bottom-nav__item.active svg {
    stroke-width: 2;
  }

  .bottom-nav__item--cta {
    flex: 1.5;
    color: var(--creme);
    background: var(--brun);
    border-radius: 14px;
    margin: 4px 6px;
    padding: 4px 6px;
    box-shadow: 0 6px 16px rgba(196, 148, 128, .35);
    font-size: 11px;
  }

  .bottom-nav__item--cta.active,
  .bottom-nav__item--cta {
    color: var(--creme);
  }

  .bottom-nav__item--cta svg {
    stroke: var(--creme);
  }

  /* ---------- Alléger : éléments redondants/décoratifs masqués sur mobile ---------- */
  /* Le bouton flottant "Réserver" fait doublon avec la barre du bas */
  .book-fab {
    display: none !important;
  }
  /* Le bandeau défilant est purement décoratif */
  .marquee {
    display: none !important;
  }

  /* ---------- Galerie SOINS (accueil) : remplacée par une liste claire ---------- */
  .soins {
    display: none !important;
  }

  .soins-mobile {
    display: block;
    background: var(--lin);
    padding: clamp(54px, 10vw, 78px) 0;
  }
  .soins-mobile .eyebrow {
    display: block;
    margin-bottom: 14px;
  }
  .soins-mobile h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(28px, 8vw, 40px);
    color: var(--anthracite);
    line-height: 1.05;
  }
  .soins-mobile__intro {
    color: var(--texte-doux);
    font-size: 16px;
    line-height: 1.6;
    margin: 14px 0 26px;
  }
  .soins-mobile__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    background: var(--creme);
    border: 1px solid var(--ligne);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
  }
  .soins-mobile__list li + li {
    border-top: 1px solid var(--ligne);
  }
  .soins-mobile__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 20px;
    min-height: 66px;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease;
  }
  .soins-mobile__list a:active {
    background: var(--lin);
  }
  .soins-mobile__list .sm-featured a {
    background: rgba(196, 148, 128, .08);
  }
  .sm-name {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 500;
    color: var(--anthracite);
    line-height: 1.22;
  }
  .sm-sub {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--texte-doux);
    margin-top: 3px;
  }
  .sm-flag {
    display: inline-block;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--espresso);
    background: var(--ocre);
    padding: 3px 8px;
    border-radius: 100px;
    margin-left: 6px;
    vertical-align: middle;
  }
  .sm-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
    text-align: right;
  }
  .sm-dur {
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texte-doux);
    white-space: nowrap;
  }
  .sm-prix {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--brun);
    white-space: nowrap;
    line-height: 1;
  }
  .sm-prix small {
    font-size: 14px;
  }
  .soins-mobile > .container > .btn {
    width: 100%;
    justify-content: center;
  }

  /* ---------- Page hero (pages internes) ---------- */
  .page-hero {
    padding-top: clamp(88px, 15vh, 116px) !important;
    padding-bottom: clamp(28px, 5vw, 44px) !important;
  }

  .page-hero h1 {
    font-size: clamp(34px, 9vw, 52px) !important;
  }

  .page-hero p {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  /* ---------- Hero accueil ---------- */

  /* Overlay plus sombre et régulier : la photo est très chaude (beige/ambre),
     tout le texte doit se lire clairement dessus */
  .hh-overlay {
    background: linear-gradient(
      180deg,
      rgba(20, 14, 8, .48) 0%,
      rgba(20, 14, 8, .30) 28%,
      rgba(20, 14, 8, .42) 52%,
      rgba(20, 14, 8, .72) 80%,
      rgba(20, 14, 8, .90) 100%
    ) !important;
  }

  /* Inner : la bottom nav est cachée sur le hero → padding modéré,
     le contenu descend bien et remplit l'écran (plus d'impact) */
  .hh-inner {
    padding-bottom: clamp(40px, 9vh, 80px) !important;
  }

  /* Eyebrow locations (Sceaux · Antony…) : masqué sur mobile
     — il apparaissait dans la zone du header fixe et faisait doublon */
  .hh-eyebrow {
    display: none !important;
  }

  /* Ombre portée sur le titre → lisible sur n'importe quelle zone de la photo */
  .hh-title {
    font-size: clamp(32px, 9.5vw, 50px) !important;
    text-shadow: 0 2px 24px rgba(18, 12, 6, .55), 0 1px 5px rgba(18, 12, 6, .4);
  }

  /* "Un corps plus léger" : on garde la teinte ocre de la marque,
     l'ombre portée du titre la rend bien visible */
  .hh-title em {
    color: var(--ocre-clair) !important;
  }

  /* Sous-titre : blanc + légère ombre pour le détacher de la photo */
  .hh-sub {
    color: rgba(255, 255, 255, .92) !important;
    font-size: 15.5px !important;
    max-width: 100% !important;
    text-shadow: 0 1px 14px rgba(18, 12, 6, .55);
  }

  .hh-cta {
    flex-direction: column;
    gap: 10px;
  }

  .hh-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
  }

  /* ---------- Boutons : pas de débordement ---------- */
  .btn {
    white-space: normal;
  }

  /* ---------- Titres de section ---------- */
  .sec-head h2 {
    font-size: clamp(26px, 7.5vw, 40px) !important;
  }

  .sec-head p {
    font-size: 16px !important;
  }

  /* ---------- CTA band ---------- */
  .cta-band h2 {
    font-size: clamp(26px, 7.5vw, 38px) !important;
  }

  .cta-band p {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  .cta-band .btn {
    width: 100%;
    justify-content: center;
  }

  /* ---------- Cartes séances ---------- */
  .carte {
    padding: 24px 20px 20px;
  }

  .carte h3 {
    font-size: 21px !important;
  }

  .carte-prix {
    font-size: 28px !important;
  }

  .carte-btn {
    min-height: 48px;
    padding: 14px 16px;
    font-size: 15px;
  }

  /* ---------- Cibles tactiles ---------- */
  .socials a {
    width: 44px !important;
    height: 44px !important;
  }

  .hotspot {
    width: 40px !important;
    height: 40px !important;
  }

  .carousel-arrow {
    width: 52px;
    height: 52px;
  }

  /* ---------- Footer ---------- */
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .footer-brand p {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
  }

  /* ---------- Header : sous-titre logo masqué sur mobile ---------- */
  .logo-sub {
    display: none !important;
  }

  .logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .logo-name {
    font-size: 17px !important;
  }

  /* ---------- Photo Christelle (home + à propos) : carré sans arc ---------- */
  .ha-media {
    border-radius: 16px !important;
  }

  .apropos-photo {
    border-radius: 16px !important;
  }

  /* ---------- Verre grid : 1 colonne (override inline style) ---------- */
  .verre-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---------- À propos / apropos tag ---------- */
  .apropos-tag {
    right: 8px !important;
    top: auto !important;
    bottom: -18px !important;
  }

  .ha-tag {
    right: 8px !important;
    top: 20px !important;
    max-width: 150px !important;
  }

  /* ---------- Grille verre (pourquoi) ---------- */
  .verre {
    padding: 24px 20px;
  }

  .verre h3 {
    font-size: 21px !important;
  }

  /* ---------- Chiffres stats ---------- */
  .chiffre .n {
    font-size: 34px !important;
  }

  /* ---------- Process / timeline ---------- */
  .process-photo {
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* ---------- Spotlight (seances) ---------- */
  .spotlight-body {
    padding: 24px 20px 26px !important;
  }

  .spotlight-body h2 {
    font-size: clamp(24px, 6.5vw, 34px) !important;
  }

  .spotlight-body p {
    font-size: 15.5px !important;
  }

  /* ---------- PAGE RÉSERVER : bande des 7 jours ---------- */
  .week-strip {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Override du breakpoint 880px (déjà en flex-row horizontal) */
  .day-col {
    flex-direction: row !important;
    min-height: 60px !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    gap: 12px !important;
    text-align: left !important;
    align-items: center !important;
    border-radius: 14px !important;
  }

  .day-name {
    font-size: 18px !important;
    min-width: 42px !important;
  }

  .day-ville {
    font-size: 14.5px !important;
    flex: 1 !important;
    min-width: 0 !important;
    align-items: center !important;
  }

  .day-pill {
    font-size: 10.5px !important;
    padding: 5px 10px !important;
    letter-spacing: .04em !important;
    flex-shrink: 0 !important;
  }

  /* ---------- Shortcut cards ---------- */
  .shortcut {
    padding: 22px 18px 20px;
  }

  .shortcut h3 {
    font-size: 22px !important;
  }

  .shortcut-note {
    font-size: 14px !important;
  }

  /* ---------- Infos pratiques (3 cartes inline-style sur reserver) ---------- */
  [style*="repeat(3,1fr)"].seances-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---------- Section réservation (formulaire + info) ---------- */
  .reserve-grid {
    gap: clamp(28px, 5vw, 44px) !important;
  }

  .reserve h2 {
    font-size: clamp(26px, 7vw, 40px) !important;
  }

  .reserve-info p {
    font-size: 16px !important;
  }

  .reserve-points li {
    font-size: 15px !important;
  }

  /* ---------- Formulaire (anti-zoom iOS : font-size ≥ 16px obligatoire) ---------- */
  .form-card {
    padding: 22px 16px 24px !important;
  }

  .form-card h3 {
    font-size: 22px !important;
  }

  .field input,
  .field textarea,
  .field select {
    font-size: 16px !important;    /* iOS ne zoome pas si ≥ 16px */
    padding: 12px 4px !important;
  }

  .field label {
    font-size: 11px !important;
  }

  .form-card .btn-primary {
    padding: 16px 20px !important;
    font-size: 16px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* ---------- Avis : grille ---------- */
  .temoins-grid {
    grid-template-columns: 1fr !important;
  }

  .avis {
    padding: 26px 20px;
  }

  .avis-txt {
    font-size: 18px !important;
  }

  /* ---------- Carrousel ---------- */
  .carousel-quote {
    font-size: clamp(20px, 5.5vw, 28px) !important;
  }

  /* ---------- Marquee (accueil) ---------- */
  .marquee-item {
    font-size: 22px !important;
  }

  /* ---------- Hero strip (accueil) ---------- */
  .hero-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .hero-strip .vignette:nth-child(5) {
    display: none !important;
  }

  /* ---------- Réflexologie chips ---------- */
  .reflexo-chip {
    font-size: 13.5px !important;
    padding: 9px 14px !important;
  }
}

/* ----------------------------------------------------------------
   TRÈS PETITS ÉCRANS (≤ 380px) — ajustements fins
   ---------------------------------------------------------------- */
@media (max-width: 380px) {
  .hh-title {
    font-size: 30px !important;
  }

  .page-hero h1 {
    font-size: 30px !important;
  }

  .bottom-nav__item {
    font-size: 9px;
  }

  .bottom-nav__item svg {
    width: 20px;
    height: 20px;
  }
}