/* ============================================================
   INSTANT PHOTO — responsive.css
   Surcouche mobile-first : menu mobile premium + ajustements
   responsive globaux. Chargée APRÈS styles.css & animations.css.
   ============================================================ */

/* ─────────────────────────────────────────────
   1. HEADER MOBILE
───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .site-header-inner { height: 4.25rem; padding: 0 1.25rem; }
  .site-logo img { width: 2.25rem; height: 2.25rem; }
  /* nom du studio visible aussi sur mobile, plus discret */
  .site-logo-name {
    display: inline; font-size: .58rem; letter-spacing: .26em;
    color: var(--rose-deep); white-space: nowrap;
  }
  .mobile-menu-btn {
    width: 2.75rem; height: 2.75rem; border-radius: 999px;
    color: var(--rose-deep);
    transition: background .2s;
  }
  .mobile-menu-btn:active { background: var(--rose-soft); }
}

/* ─────────────────────────────────────────────
   2. MENU MOBILE — overlay plein écran premium
───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .mobile-nav {
    display: flex; flex-direction: column;
    background: var(--background);
    /* léger halo rose en haut pour la profondeur */
    background-image:
      radial-gradient(ellipse 70% 40% at 80% 0%, var(--rose-soft) 0%, transparent 60%);
    overscroll-behavior: contain;
  }

  .mobile-nav-header {
    height: 4.25rem; padding: 0 1.25rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
  }
  .mobile-nav-header .site-logo-name { display: inline; color: var(--foreground); }
  .mobile-nav-close {
    width: 2.75rem; height: 2.75rem; border-radius: 999px;
    color: var(--rose-deep); transition: background .2s;
  }
  .mobile-nav-close:active { background: var(--rose-soft); }

  /* corps scrollable */
  .mobile-nav-body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 1.5rem 1.5rem .5rem;
    display: flex; flex-direction: column; gap: .25rem;
  }

  /* liens simples */
  .m-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem .5rem;
    font-family: var(--font-display); font-size: 1.6rem;
    color: var(--foreground);
    border-bottom: 1px solid var(--border);
    transition: color .2s, padding-left .2s;
  }
  .m-link:active { color: var(--rose); padding-left: 1rem; }
  .m-link .m-chevron { color: var(--rose); opacity: .5; }

  /* accordéons (Séances / Événement) via <details> */
  .m-acc { border-bottom: 1px solid var(--border); }
  .m-acc > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem .5rem;
    font-family: var(--font-display); font-size: 1.6rem;
    color: var(--foreground);
  }
  .m-acc > summary::-webkit-details-marker { display: none; }
  .m-acc > summary .m-acc-icon {
    width: 1.75rem; height: 1.75rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--rose-soft); color: var(--rose-deep);
    transition: transform .25s;
  }
  .m-acc[open] > summary .m-acc-icon { transform: rotate(45deg); }
  .m-acc[open] > summary { color: var(--rose); }

  .m-acc-body {
    padding: .25rem 0 1rem .5rem;
    display: flex; flex-direction: column;
    animation: mAccIn .25s ease;
  }
  @keyframes mAccIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  .m-sublink {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .7rem .75rem; border-radius: .5rem;
    transition: background .15s;
  }
  .m-sublink:active { background: var(--rose-soft); }
  .m-sublink strong { font-size: .95rem; font-weight: 500; color: var(--foreground); }
  .m-sublink span { font-size: .78rem; color: var(--muted-foreground); line-height: 1.35; }

  /* zone CTA bas de menu */
  .mobile-nav-cta {
    flex-shrink: 0;
    padding: 1.25rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--secondary);
    display: flex; flex-direction: column; gap: .625rem;
  }
  .mobile-nav-cta .btn { width: 100%; min-height: 52px; }

  /* on neutralise l'ancien conteneur de liens s'il subsiste */
  .mobile-nav-links { display: none !important; }
}

/* ─────────────────────────────────────────────
   3. TYPOGRAPHIE & SECTIONS — petits écrans
───────────────────────────────────────────── */
@media (max-width: 640px) {
  h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); line-height: 1.12; }
  h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .section-md { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .section-lg { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .container { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* formulaire contact : 2 colonnes → 1 colonne */
  .contact-form-grid { grid-template-columns: 1fr !important; }

  /* hero d'accueil un peu moins haut sur tel */
  .hero { height: 86vh; min-height: 560px; }
  .hero-content { padding-bottom: 3.5rem; }
}

/* hero-split : carte méta sous le titre, non collante sur mobile */
@media (max-width: 1023px) {
  .hero-meta-card { position: static; }
}

/* ─────────────────────────────────────────────
   4. PAGES CONNEXION (client / partenaire)
───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .client-login-panel { padding: 2.5rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom)); }
  .back-link { margin-bottom: 2rem; }
}
@media (max-width: 380px) {
  .client-login-panel { padding-left: 1.15rem; padding-right: 1.15rem; }
}

/* ============================================================
   CORRECTIFS — navbar mobile, grille séances, anim connexion
   ============================================================ */

/* Bug : scroll horizontal qui révèle la navbar mobile hors-écran */
html { overflow-x: hidden; }
@media (max-width: 1023px) {
  .mobile-nav:not(.open) { pointer-events: none; }
}

/* Accueil — "Des séances sur-mesure" : 2×2 sur téléphone */
@media (max-width: 639px) {
  .sessions-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; margin-top: 2.5rem !important; }
  .session-card:nth-child(even) { margin-top: 0 !important; }
  .session-card > div { margin-top: .8rem !important; }
  .session-title  { font-size: 1.1rem !important; }
  .session-number { font-size: .55rem !important; }
  .session-desc   { font-size: .78rem !important; line-height: 1.45 !important; }
}

/* Animation d'entrée des panneaux de connexion (espace client/partenaire) */
@media (prefers-reduced-motion: no-preference) {
  .client-login-panel { animation: ipsAuthIn .6s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes ipsAuthIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Animation d'entrée des cartes de connexion (.cl-card = inscription/connexion/dashboard) */
@media (prefers-reduced-motion: no-preference) {
  .cl-card { animation: ipsAuthIn .55s cubic-bezier(.16,1,.3,1) both; }
  .cl-card .cl-btn { animation: ipsAuthIn .5s cubic-bezier(.16,1,.3,1) .12s both; }
  .page-contact .form-group,
  .page-contact .btn-primary { animation: ipsAuthIn .55s cubic-bezier(.16,1,.3,1) both; }
}
/* Champs : focus plus vivant */
.form-input:focus, .form-textarea:focus, .form-select:focus, .cl-input:focus { transform: translateY(-1px); }
.cl-btn, .form-input, .cl-input, .form-textarea, .form-select { transition: border-color .2s, box-shadow .2s, background .2s, transform .15s; }

/* Pages détail séance : photos moins imposantes (cliquables pour agrandir) */
[class*="page-seance-"] .two-col > div:first-child .img-frame { max-width: 22rem; }
@media (max-width: 1023px) {
  [class*="page-seance-"] .two-col > div:first-child .img-frame { max-width: 18rem; margin: 0 auto; }
}