/* Responsive styles externalisés */

/* Logo plus grand sur desktop */
@media (min-width: 992px) {
  .custom-logo { max-height: 72px; }
}

/* App bar mobile (header sticky) */
@media (max-width: 767px) {
  /* Verrouillage horizontal: pas de flottement gauche/droite sur mobile */
  html, body { overflow-x: hidden; overscroll-behavior-x: none; width: 100%; }
  .site-content { max-width: 100vw; overflow-x: hidden; }
  .nts-container { box-sizing: border-box; max-width: 100vw; }
  .nts-header, .nts-hero, .nts-header .nts-container { max-width: 100vw; }
  .nts-header {
    position: sticky;
    top: 0;
    z-index: 99980;
    background: var(--nts-color-bg, #ffffff);
    width: 100%;
  }
  /* Hero en style “app mobile” */
  .nts-hero { padding: 8px 0; }
  .nts-hero__featured { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .nts-hero__featured > aside { width: 100%; min-width: 0; }
  .web4-editorials__list { display: grid; gap: 8px; }
  .web4-editorials__item {
    background: #fff;
    border: 1px solid var(--nts-color-border, #e5e7eb);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
  }
  .web4-editorials__title { font-weight: 600; font-size: 1rem; line-height: 1.2; }
  .web4-editorials__meta { font-size: .85rem; }
  .web4-editorials__excerpt {
    margin-top: 6px;
    font-size: .95rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .web4-author-chip__img { width: 28px; height: 28px; }
  .web4-author-chip__name { font-size: .85rem; }
  .web4-featured-carousel { border-radius: 14px; overflow: hidden; }
  .nts-header .nts-container { max-width: 100% !important; padding-left: 12px; padding-right: 12px; }
  .nts-header.is-scrolled {
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
  }
  /* IMPORTANT:
     Ne pas masquer la rangée "brand" en mobile CSS, car sur desktop (template standard)
     c’est elle qui contient logo/nom. Sur mobile réel, le template mobile n’a pas cette rangée. */
  /* Force deux lignes distinctes pour le header mobile */
  .nts-header__row--top,
  .nts-header__row--nav { display:flex; align-items:center; justify-content: space-between; gap: 8px; min-height: 56px; }
  .nts-header__row--top .nts-nav-left,
  .nts-header__row--top .nts-nav-right,
  .nts-header__row--nav .nts-nav-left,
  .nts-header__row--nav .nts-nav-right { display:flex; align-items:center; gap: 8px; }
  .nts-nav-right, .nts-nav-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .nts-nav-center { flex: 1 1 auto; display:flex; justify-content:center; min-width: 0; }
  .nts-nav-center .custom-logo { max-height: 32px; height:auto; width:auto; }
  .nts-nav-center .site-name { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
  /* Réduire logo + slogan de 50% dans la 1re ligne */
  .nts-header__row--top .custom-logo { width: 37px !important; height: 37px !important; } /* +15% par rapport à 32px */
  .nts-header__row--top .site-name { font-size: calc(var(--nts-font-size-600) * .46) !important; } /* +15% par rapport à .4 */
  .nts-header__row--top .site-tagline { font-size: calc(var(--nts-font-size-600) * .40) !important; line-height: .95; } /* +15% par rapport à .35 */
  /* Espace entre logo et bloc texte + entre nom et slogan */
  .nts-header__row--top .nts-branding-tools { gap: 10px; }
  .nts-header__row--top .site-tagline { margin-top: 2px !important; }
  /* Espace contenu sous l’app bar (2 lignes) */
  .site-content { padding-top: 5px; }
  /* Masquer langues inline sur mobile (utiliser le bouton globe) */
  /* affichage souhaité dans le header mobile */
  .nts-header .nts-lang-inline { display: inline-flex; } /* visibles en 2e ligne */
  .nts-header__row--top .nts-branding-tools .nts-lang-inline { display: none !important; } /* cachées en 1re ligne */
  /* Ouvrir le menu en modal quand le burger est actif */
  body.nts-menu-open .nts-menu-overlay { display: block; }
  /* Neutraliser le slide plein écran du nav dans le contexte modal */
  .nts-menu-dialog #primary-navigation { position: static; inset: auto; transform: none; opacity: 1; display: block !important; overflow: visible; padding: 0; }
  .nts-menu-dialog #primary-navigation ul { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .nts-menu-dialog #primary-navigation a { width: 100%; display: block; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--nts-color-border); }

  /* Catégories – grille responsive en mobile */
  .nts-archive-grid .nts-archive-row {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    overflow-x: visible;
  }
  .nts-archive-grid .nts-archive-row > .nts-card {
    flex: none;
    max-width: 100%;
  }
}

/* Grille langues compacte sur très petits écrans */
@media (max-width: 575px) {
  .nts-lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Forcer branding + outils sur une seule ligne avec le brand */
  .nts-branding-tools { justify-content: space-between; flex-wrap: nowrap; gap: var(--nts-space-100); }
  .nts-branding-tools__left, .nts-branding-tools__right { flex: 0 0 auto; }
  .nts-branding-tools__center { flex: 1 1 auto; min-width: 0; text-align: center; }
  .site-name { max-width: 50vw; }
}

/* Largeur mobile courante: renforcer l’alignement et masquer les labels des chips */
@media (max-width: 767px) {
  .nts-header__row--top { justify-content: space-between; }
  .nts-header__row--top .nts-menu-toggle { position: static; }
  .nts-header__centered-nav { width: auto; flex: 0 1 auto; }
  .nts-branding-tools { justify-content: space-between; flex-wrap: nowrap; gap: var(--nts-space-100); width: 100%; }
  .nts-branding-tools__left, .nts-branding-tools__right { flex: 0 0 auto; }
  .nts-branding-tools__center { flex: 1 1 auto; min-width: 0; text-align: center; }
  .nts-chip-label { display: none; }
  .site-name { max-width: 45vw; }

  /* Pages Artistes / Clubs (grilles): éviter l'affichage trop serré sur mobile */
  .web4-authors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web4-authors-grid .web4-author-avatar { width: 72px; height: 72px; }

  /* Sidebars Artistes / Clubs: éviter tout débordement horizontal (widgets, tables, embeds) */
  .web4-authors-sidebar,
  .web4-clubs-sidebar { min-width: 0; }
  .web4-authors-sidebar img,
  .web4-clubs-sidebar img,
  .web4-authors-sidebar iframe,
  .web4-clubs-sidebar iframe,
  .web4-authors-sidebar video,
  .web4-clubs-sidebar video { max-width: 100%; height: auto; }
  .web4-authors-sidebar table,
  .web4-clubs-sidebar table { display: block; max-width: 100%; overflow-x: auto; }

  /* Catégories index: carrousel horizontal glissable (snap) */
  .web4-cat-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    align-items: stretch;
  }
  .web4-cat-item {
    flex: 0 0 calc(66% - 12px);
    scroll-snap-align: start;
    min-width: 0;
    box-sizing: border-box;
    max-width: 100%;
    border: 1px solid var(--nts-color-border, #e5e7eb);
    border-radius: 14px;
    background: #fff;
    display: block;
    overflow: hidden;
  }
  .web4-cat-thumb img {
    width: 100%;
    height: 140px;
    object-fit: contain;
    background-color: var(--nts-color-bg, #ffffff);
    display: block;
  }
  .web4-cat-title {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.3;
  }

  /* Section header des catégories compact */
  .web4-cat-section header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px !important;
  }
  .web4-cat-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .web4-cat-title-icon { height: 18px; width: 18px; opacity: .8; }
  .web4-cat-chevron::after { content: '›'; opacity: .5; }
}

/* Petites tablettes: 2 colonnes pour les listes de catégorie */
@media (min-width: 576px) and (max-width: 991px) {
  .web4-cat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nts-archive-grid .nts-archive-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .nts-archive-grid .nts-archive-row > .nts-card { max-width: 100%; }
}
/* Tablettes et desktop: menus séparés (nav au-dessus, branding en dessous) */
@media (min-width: 768px) {
  .nts-header__row--top { flex-wrap: wrap; align-items: center; }
  .nts-header__row--top .nts-branding-tools { flex-basis: 100%; order: 2; margin-top: var(--nts-space-150); justify-content: center; }
  .nts-header__centered-nav { order: 1; }
}
/* Modales (recherche/langues) en largeur plein écran sur mobiles */
@media (max-width: 860px) {
  .nts-search-dialog { width: 90vw; max-width: 90vw; }
  .nts-lang-dialog { width: 90vw; max-width: 90vw; }
  .nts-lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nts-lang-item { font-size: var(--nts-font-size-100); padding: var(--nts-space-100) var(--nts-space-150); }
}

/* Navigation mobile */
@media (max-width: 991px) {
  .nts-header__row--nav { position: relative; }
  /* Mobile full-screen overlay menu */
  #primary-navigation {
    position: fixed;
    z-index: 99990;
    inset: 0;
    background: var(--nts-color-bg, #ffffff);
    padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 24px);
    transform: translateX(-100%);
    transition: transform .28s ease, opacity .28s ease;
    opacity: 0;
    display: block !important; /* always in DOM for animation */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.nts-menu-open #primary-navigation {
    transform: translateX(0);
    opacity: 1;
  }
  /* Close button visible only when open */
  .nts-menu-close {
    position: fixed;
    z-index: 99991;
    right: 14px;
    top: calc(env(safe-area-inset-top) + 10px);
    background: rgba(0,0,0,.04);
    border-radius: 10px;
    backdrop-filter: saturate(180%) blur(10px);
    display: none;
  }
  body.nts-menu-open .nts-menu-close { display: inline-flex; }
  /* Menu list */
  #primary-navigation ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 32px;
  }
  #primary-navigation a {
    width: 100%;
    display: block;
    padding: 14px 12px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.25;
    border: 1px solid var(--nts-color-border, #e5e7eb);
    background: #fff;
  }
  #primary-navigation .sub-menu {
    position: static;
    border: 0;
    padding: 0 0 6px 12px;
    box-shadow: none;
    display: none;
  }
  #primary-navigation li.is-open > .sub-menu { display: block; }
  #primary-navigation li:hover > .sub-menu, #primary-navigation li:focus-within > .sub-menu { display: block; }
  .nts-nav-left { justify-content: flex-start; }
  /* Prevent background scroll while menu open */
  body.nts-menu-open { overflow: hidden; }
}

/* Navigation desktop */
@media (min-width: 992px) {
  .nts-menu-toggle { display: none; }
  .nts-primary-nav { display: block !important; }
  .nts-primary-nav ul { gap: var(--nts-space-200); }
}

/* Héros et catégories: grille à partir de 768px */
@media (min-width: 768px) {
  .nts-hero__featured { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .nts-hero__featured > *:only-child { grid-column: 1 / -1; }
  .nts-hero__featured > * { min-width: 0; }
  .nts-hero__cat-grid { grid-template-columns: 1fr; }
  /* Grille d'origine: une rangée scrollable horizontalement */
  .web4-cat-row { grid-auto-flow: column; grid-auto-columns: minmax(200px, 360px); overflow-x: auto; }
  .web4-cat-item { min-width: 200px; max-width: 360px; }
}

/* Grilles auteurs/clubs: colonnes configurables dès 768px */
@media (min-width: 768px) {
  .web4-authors-grid--authors { grid-template-columns: repeat(var(--web4-authors-cols, 4), minmax(0,1fr)); }
  .web4-authors-grid--clubs { grid-template-columns: repeat(var(--web4-clubs-cols, 4), minmax(0,1fr)); }
  .web4-authors-grid--club-members { grid-template-columns: repeat(var(--web4-club-members-cols, 4), minmax(0,1fr)); }
}

/* Grille principale */
@media (min-width: 768px) {
  .nts-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Lignes d'archives: cartes en grille dès 768px */
@media (min-width: 768px) {
  .nts-archive-row { overflow-x: visible; }
  .nts-archive-row > .nts-card {
    flex: 0 0 calc((100% - (var(--nts-archive-cols, 3) - 1) * var(--nts-space-300)) / var(--nts-archive-cols, 3));
    max-width: calc((100% - (var(--nts-archive-cols, 3) - 1) * var(--nts-space-300)) / var(--nts-archive-cols, 3));
  }
}

/* Espacement sous header sticky sur desktop */
@media (min-width: 992px) {
  .site-content { padding-top: var(--nts-space-200); }
}

/* Layout single avec sidebar dès 992px */
@media (min-width: 992px) {
  .web4-single-layout { grid-template-columns: minmax(0,1fr) 380px; align-items: start; }
}