/*
 * DiaspoBack — fixes.css
 * Correctifs CSS critiques pour LWS + comportements visuels
 * Chargé APRÈS design.css via functions.php
 */

/* ── Fix 1 : Nav mobile actions cachées sur desktop ── */
.nav-mobile-actions {
  display: none !important;
}
@media (max-width: 768px) {
  nav.pnav.open .nav-mobile-actions {
    display: flex !important;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--g100);
  }
}

/* ── Fix 2 : Barre admin WordPress masquée ── */
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }
body { padding-top: 0 !important; margin-top: 0 !important; }

/* ── Fix 3 : Header sticky positionné correctement ── */
body.admin-bar #masthead { top: 0 !important; }

/* ── Fix 4 : Bouton hamburger visible seulement sur mobile ── */
.mbtn {
  display: none !important;
}
@media (max-width: 768px) {
  .mbtn {
    display: flex !important;
  }
  nav.pnav {
    display: none;
  }
  nav.pnav.open {
    display: block;
  }
}

/* ── Fix 5 : Page entry plein écran sans scroll desktop ── */
body.page-template-page-entry {
  overflow: hidden;
}
@media (max-width: 768px) {
  body.page-template-page-entry {
    overflow-y: auto;
  }
}

/* ── Fix 6 : Masquer le header sur la page d'entrée ── */
body.page-template-page-entry #masthead,
body.page-template-page-entry #colophon,
body.db-entry-active #masthead,
body.db-entry-active #colophon,
body.db-entry-active .site-header {
  display: none !important;
}
/* Annuler le padding-top ajouté par le header sticky */
body.db-entry-active,
body.page-template-page-entry {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ── Fix 7 : Corrections typographie Outfit/Inter ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', system-ui, sans-serif;
}
body, p, span, a, button, input, select, textarea {
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Fix 8 : Transition hover panels split page ── */
.db-split__panel--left,
.db-split__panel--right,
.db-entry__panel {
  -webkit-transition: filter .25s ease, transform .25s ease;
  transition: filter .25s ease, transform .25s ease;
}

/* ════════════════════════════════════════════════════
   MENU MOBILE & TABLETTE — Scroll horizontal fluide
   < 768px  : liste horizontale scrollable, logo + icônes
   768-1024px: navigation compacte scrollable
════════════════════════════════════════════════════ */

/* ── Tablette (768–1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Nav en scroll horizontal */
  nav.pnav {
    display: flex !important;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    padding-bottom: 0;
  }
  nav.pnav::-webkit-scrollbar { display: none; }

  nav.pnav ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0;
    list-style: none;
    white-space: nowrap;
  }

  nav.pnav ul li a {
    padding: .5rem .7rem !important;
    font-size: .78rem !important;
    white-space: nowrap;
  }

  .nav-mobile-actions { display: none !important; }
  .mbtn { display: none !important; }
}

/* ── Mobile (< 768px) — Menu hamburger + overlay ── */
@media (max-width: 768px) {

  /* Cacher la nav par défaut */
  nav.pnav {
    display: none;
    position: fixed;
    top: 72px;
    left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow-y: auto;
    padding: 1rem 0 2rem;
    border-top: 1px solid var(--g100);
    z-index: 9998;
  }
  nav.pnav.open { display: block; }

  /* Liste verticale dans l'overlay */
  nav.pnav ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  nav.pnav ul li a {
    display: flex !important;
    padding: .9rem 1.5rem !important;
    font-size: .95rem !important;
    color: var(--vert) !important;
    border-bottom: 1px solid var(--g50) !important;
    border-radius: 0 !important;
    font-weight: 500;
    align-items: center;
    gap: .5rem;
  }
  nav.pnav ul li a:hover { background: var(--vert-bg) !important; }
  nav.pnav ul li.current-menu-item > a {
    background: var(--vert-bg) !important;
    font-weight: 700;
    color: var(--vert) !important;
  }

  /* Actions (Connexion / S'inscrire) en bas du menu */
  .nav-mobile-actions {
    display: flex !important;
    flex-direction: column;
    gap: .75rem;
    margin: 1.5rem 1.25rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--g100);
  }

  /* Hamburger visible */
  .mbtn { display: flex !important; }

  /* Masquer les boutons desktop */
  .hd-act > a.btn { display: none !important; }
  .hd-act > .hd-av { display: flex !important; } /* garder l'avatar si connecté */

  /* Indicateur de scroll dans la nav overlay */
  nav.pnav::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0; right: 0;
    height: 48px;
    background: linear-gradient(to top, rgba(255,255,255,.95), transparent);
    display: block;
    pointer-events: none;
  }
}

/* ── Très petit écran (< 400px) ── */
@media (max-width: 400px) {
  .logo-nm  { font-size: 1rem; }
  .logo-tg  { display: none; }
  .logo-em  { width: 34px; height: 34px; font-size: 12px; border-radius: 8px; }
  #masthead .W { padding: 0 .75rem; }
  .hd { gap: .75rem; }
}

/* ── Smooth scroll indicator sur mobile ── */
@media (max-width: 1024px) {
  /* Masque le scroll de la nav desktop */
  nav.pnav {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  nav.pnav::-webkit-scrollbar { display: none; }
}


/* ════════════════════════════════════════════════════
   PAGE D'ENTRÉE — Masquage agressif header WP
   S'applique dès que db-entry-active est sur le body
   ou quand le template page-entry est actif
════════════════════════════════════════════════════ */
body.db-entry-active #masthead,
body.db-entry-active #colophon,
body.db-entry-active .site-header,
body.db-entry-active .site-footer,
body.db-entry-active #wpadminbar,
body.page-template-page-entry #masthead,
body.page-template-page-entry #colophon,
body.page-template-page-entry #wpadminbar {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Supprimer TOUT espace en haut */
body.db-entry-active,
body.db-entry-active html,
body.page-template-page-entry {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.db-entry-active #page,
body.db-entry-active .site {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* La page d'entrée prend TOUT l'écran */
body.db-entry-active .db-entry,
body.page-template-page-entry .db-entry {
  height: 100vh !important;
  min-height: 100svh !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9000 !important;
}
@media (max-width: 768px) {
  body.db-entry-active .db-entry,
  body.page-template-page-entry .db-entry {
    position: relative !important;
    height: auto !important;
  }
}