@media (max-width: 640px) {
  .site-footer { padding: 26px 18px 20px; }
  .footer-top { flex-direction: column; gap: 22px; }
  .footer-sep { margin: 20px 18px 14px; max-width: none; }
  .footer-bottom { flex-direction: column; gap: 6px; max-width: none; }

  .footer-secondaire { display: none; }
}

@media (max-width: 640px) {
  .brand .logo-img { height: 40px; }
  .brand .brand-title { font-size: 19px; margin-top: 8px; }

  .brand p { display: none; }
}

@media (max-width: 640px) {
  .site-header { padding: 12px 12px; }
}

@media (max-width: 640px) {
  .search-btn, .theme-toggle, .btn-compte, .logout-btn, .menu-toggle {
    width: 27px; height: 27px;
  }
  .search-btn svg, .theme-toggle svg, .btn-compte svg, .logout-btn svg {
    width: 13px; height: 13px;
  }
  .menu-toggle svg { width: 14px; height: 14px; }
  .header-right { gap: 5px; }
  .compte-nav { gap: 5px; }
  .mobile-actions { gap: 5px; }
}

@media (max-width: 640px) {
  body.has-bottom-nav .search-btn-compte {
    display: none;
  }
}

@media (max-width: 640px) {
  .beta-banner { font-size: 10.5px; gap: 5px; padding: 6px 10px; }
  .beta-banner-livre { gap: 4px; }

  .beta-banner-livre, .beta-banner-sep { display: none; }

  .beta-banner { padding: 3px 10px; background: none; border-bottom: 1px solid var(--color-accent-pink-light); margin-bottom: 10px; }
  .beta-banner-texte,
  .beta-info { display: none; }
}

@media (max-width: 767px) {
  .menu-toggle { display: inline-flex; }
  .mobile-actions { gap: 8px; }
  .header-right { gap: 8px; }
  .compte-nav { gap: 8px; }

  .site-header { display: flex; justify-content: space-between; flex-wrap: wrap; }
}

@media (max-width: 767px) {

  .site-header { flex-wrap: nowrap; align-items: center; justify-content: space-between; }
  .brand-group { flex-shrink: 0; margin-right: auto; }
  .header-right { flex-wrap: nowrap; justify-content: flex-end; margin-left: auto; }
}

/* Tablette (768-1279px) : la nav principale reste une barre horizontale comme sur
   desktop (pas de panneau hamburger) -- seul le mobile en dessous de 768px bascule
   encore vers le menu replie. Les ecarts sont juste resserres pour laisser la place
   au bouton CTA installer et a l'icone de partage du header. */
@media (min-width: 768px) and (max-width: 1279px) {
  .site-header { padding-left: 24px; padding-right: 24px; gap: 8px; }
  .site-header nav#site-nav { gap: 14px; font-size: 14px; }
  .header-right { gap: 6px; }
  .compte-nav { gap: 6px; }
  .header-right .search-btn,
  .header-right .theme-toggle,
  .header-right .btn-compte,
  .header-right .logout-btn { width: 32px; height: 32px; }
  .header-install-cta.pwa-install-btn { padding: 7px 12px; font-size: 12px; gap: 5px; }
}

@media (max-width: 375px) {
  .compte-nav .pseudo { max-width: 64px; }
  .header-right { gap: 6px; }
}

@media (max-width: 420px) {
  .search-btn, .theme-toggle, .btn-compte, .logout-btn, .menu-toggle {
    width: 26px; height: 26px;
  }
  .search-btn svg, .theme-toggle svg, .btn-compte svg, .logout-btn svg {
    width: 12px; height: 12px;
  }
  .menu-toggle svg { width: 13px; height: 13px; }
  .header-right { gap: 4px; }
  .compte-nav { gap: 4px; }
  .mobile-actions { gap: 4px; }
}

@media (max-width: 767px) {

  .site-header nav,
  .app-nav {
    display: none;

    position: fixed;
    top: 58px;
    left: 12px;
    right: 12px;
    width: auto;

    justify-self: stretch;
    max-height: 70vh;

    overflow-y: auto;
    background: var(--color-bg-card);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 18px;
    z-index: 60;
    box-shadow: 0 14px 30px var(--shadow-color-black-50);
    box-sizing: border-box;
  }
  .site-header nav.open,
  .app-nav.open { display: flex; }

  .site-header nav a,
  .app-nav a,
  .site-header nav .nav-install-btn,
  .app-nav .nav-install-btn {
    padding: 15px 6px;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 16.5px;
    text-align: right;
    width: 100%;
  }
  .site-header nav .nav-install-btn,
  .app-nav .nav-install-btn { justify-content: flex-end; }
  .site-header nav a:last-child,
  .app-nav a:last-child,
  .site-header nav .nav-install-btn,
  .app-nav .nav-install-btn { border-bottom: none; }

  .site-header nav .nav-livre-link {
    display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end;
    color: var(--color-accent-pink-strong); font-weight: 700; text-decoration: none;
  }
}

/* Menu mobile #site-nav : presentation en cartes avec icone et alignement uniforme.
   Le positionnement et la visibilite du panneau sont definis ailleurs. */
@media (max-width: 767px) {
  /* Pas de display ici : le panneau reste gouverne par la regle .open existante
     (display:none / display:flex), on ne modifie que l'espacement interne. */
  #site-nav {
    gap: 8px;
    padding: 10px 14px;
  }
  #site-nav a,
  #site-nav .nav-install-btn,
  #site-nav .nav-partager-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    color: var(--color-text);
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
  }
  #site-nav a::after,
  #site-nav .nav-install-btn::after,
  #site-nav .nav-partager-btn::after { content: none; }
  #site-nav .nav-item-icone {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: linear-gradient(140deg, var(--color-accent-purple-deep), var(--color-bg-card));
    color: var(--color-accent-pink-light);
  }
  #site-nav .nav-item-icone svg { display: block; width: 22px; height: 22px; }
  #site-nav a[aria-current="page"],
  #site-nav .nav-install-btn {
    background: linear-gradient(115deg, var(--color-interactive-gradient-1), var(--color-interactive-gradient-2));
    border-color: transparent;
    color: var(--color-white);
  }
  #site-nav a[aria-current="page"] .nav-item-icone,
  #site-nav .nav-install-btn .nav-item-icone {
    background: var(--overlay-white-14);
    color: var(--color-white);
  }
  #site-nav .nav-partager-btn {
    border: 1px solid transparent;
    background: linear-gradient(115deg, var(--color-bg-surface), var(--color-bg-card)) padding-box,
      linear-gradient(115deg, var(--color-accent-pink), var(--color-accent-purple-light)) border-box;
  }
  #site-nav .badge-dot { margin-left: auto; }
}


@media (max-width: 1279px) {
  .page-auteur .app-nav {
    display: none;
    position: fixed;

    left: 10px;
    top: 100%;
    max-height: 80vh;

    width: calc(100vw - 20px);
    box-sizing: border-box;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    flex-direction: column;
    gap: 0;
    padding: 6px 18px;
    z-index: 60;
    box-shadow: 0 14px 30px var(--shadow-color-black-50);
    overflow-y: auto;
  }
  .page-auteur .app-nav.open { display: flex; }
  .page-auteur .app-nav a,
  .page-auteur .app-nav .nav-install-btn {
    padding: 15px 6px;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 16.5px;
    text-align: right;
    width: 100%;
  }
  .page-auteur .app-nav .nav-install-btn { justify-content: flex-end; }
  .page-auteur .app-nav a:last-child,
  .page-auteur .app-nav .nav-install-btn { border-bottom: none; }
}

@media (max-width: 900px) {
  .counter { display: none; }
  .counter-group { align-items: flex-end; }
  .badge-soumission { font-size: 10px; }
}

@media (max-width: 1279px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 55;
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 20px var(--shadow-color-black-50, rgba(0,0,0,0.35));
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    text-decoration: none;
    color: var(--color-text-muted-2);
    font-size: 10.5px;
    font-weight: 600;
  }
  .mobile-bottom-nav a[aria-current="page"] { color: var(--color-accent-pink-light); }

  body.has-bottom-nav { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1280px) {
  .mobile-bottom-nav { display: none; }
}

@media (min-width: 768px) {
  .nav-livre-link { display: none; }
}

@media (max-width: 640px) {

  .site-header { padding: 6px 12px; }

  .header-right { gap: 8px; }

  .header-right .search-btn,
  .header-right .theme-toggle,
  .header-right .btn-compte,
  .header-right .logout-btn,
  .header-right .menu-toggle {
    position: relative;
  }
  .header-right .search-btn::after,
  .header-right .theme-toggle::after,
  .header-right .btn-compte::after,
  .header-right .logout-btn::after,
  .header-right .menu-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 8px);
    height: 44px;
  }
}

@media (max-width: 340px) {
  .header-right { gap: 4px; }
  .header-right .search-btn::after,
  .header-right .theme-toggle::after,
  .header-right .btn-compte::after,
  .header-right .logout-btn::after,
  .header-right .menu-toggle::after {
    width: calc(100% + 4px);
  }
}

@media (min-width: 768px) {
  .header-install-cta.pwa-install-btn,
  .header-partager-btn.search-btn { display: inline-flex; }

  #site-nav .nav-partager-btn,
  #site-nav .nav-install-btn { display: none; }
}

.footer-beta { display: none; }

@media (max-width: 640px) {
  .footer-beta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 4px 0 2px; font-size: 11.5px; color: var(--color-text-muted);
  }
  .footer-beta strong { color: var(--color-accent-pink-strong); }

  .footer-beta .beta-info { display: inline-flex; }

  .footer-beta .beta-info-bulle {
    left: auto; right: 0; transform: none;
    top: auto; bottom: 28px;
    max-width: min(260px, calc(100vw - 32px)); box-sizing: border-box;
  }
}

@media (display-mode: standalone) {
  .pwa-install-btn,
  .pwa-install-zone { display: none !important; }
}