/* =========================================================
   SCIENTIA — RESPONSIVE FIXES v2.2
   Remplace responsive-fixes.css (charger après components.css)
   
   CAUSES DES OVERFLOWS CONSTATÉS SUR SCREENSHOTS :
   ① .article-layout grid avec colonnes px fixes sur < 768 px
   ② .hero-container col 360px fixe → déborde sur mobile
   ③ .hero-stats flex sans flex-wrap strict → slide horizontal
   ④ .article-title clamp mal calibré sur très petit écran
   ⑤ .breadcrumb, .article-identifiers, .article-dates
      pas de max-width:100% / overflow-wrap
   ⑥ .header-inner min-height:72px pas réduit sur mobile
   ⑦ body sans max-width sécurisé → enfants peuvent déborder
   ========================================================= */

/* ─────────────────────────────────────────
   0. GLOBAL OVERFLOW GUARD
   Empêche tout débordement horizontal
   ───────────────────────────────────────── */
html, body {
  overflow-x: hidden;
  /* NOTE: overflow-x:hidden sur body casse position:sticky,
     on le compense avec un wrapper */
}

/* Wrapper global (présent dans header.php autour de #main-content) */
#page,
.site-wrapper,
#main-content,
.scientia-container {
  max-width: 100%;
  overflow-x: hidden;
}

/* Tous les enfants directs du container ne débordent pas */
.scientia-container > * { min-width: 0; }

/* Images & médias responsifs par défaut */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Tables scrollables sans casser la mise en page */
.article-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─────────────────────────────────────────
   1. VARIABLES — padding container mobile
   ───────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --space-6: 1rem;   /* réduit le padding container par défaut */
  }
  .scientia-container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ─────────────────────────────────────────
   2. HEADER
   ───────────────────────────────────────── */
.scientia-header { position: sticky; top: 0; z-index: 100; }

.header-inner {
  min-height: 64px;   /* réduit depuis 72px */
  padding: var(--space-3) 0;
  gap: var(--space-3);
  flex-wrap: nowrap;
}

/* Logo header */
.header-brand { flex-shrink: 0; max-width: 55vw; }
.header-brand .custom-logo-link { display: inline-flex; align-items: center; }
.header-brand .custom-logo-link img {
  height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}
.site-title {
  font-size: clamp(0.85rem, 3.5vw, 1.25rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vw;
}
.site-tagline { display: none; } /* toujours masqué en-dehors du desktop */

/* Nav principale – masquée < 1024 px (déjà dans components) */
@media (max-width: 1023px) {
  .primary-nav { display: none; }
  .header-submit-btn { display: none !important; }
  .mobile-menu-toggle { display: flex; }
}

/* Actions header – réduire gap sur mobile */
.header-actions {
  flex-shrink: 0;
  gap: var(--space-2);
}

@media (max-width: 480px) {
  .header-inner { min-height: 54px; padding: var(--space-2) 0; }
  .header-brand .custom-logo-link img { height: 34px; max-width: 120px; }
  .site-title { font-size: 0.85rem; }
}

/* ─────────────────────────────────────────
   3. TOPBAR
   ───────────────────────────────────────── */
@media (max-width: 768px) {
  .scientia-topbar { display: none; }
}

/* ─────────────────────────────────────────
   4. MENU MOBILE
   ───────────────────────────────────────── */
.mobile-menu-inner {
  width: min(320px, 90vw);
  padding: var(--space-6) var(--space-5);
  padding-top: var(--space-14, 3.5rem);
}
.mobile-nav-menu { margin-top: var(--space-6); }
.mobile-nav-menu a {
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  display: block;
}
/* Sous-menus */
.mobile-nav-menu .sub-menu {
  list-style: none;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
  margin: var(--space-2) 0 var(--space-2) var(--space-2);
  display: none;
}
.mobile-nav-menu .menu-item-has-children.is-open > .sub-menu { display: block; }
.mobile-nav-menu .sub-menu a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
}

/* ─────────────────────────────────────────
   5. HERO SECTION — FIX OVERFLOW PRINCIPAL
   ───────────────────────────────────────── */

/* ① Conteneur hero : forcer 1 colonne dès 900 px et ne jamais déborder */
.hero-container {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-10);
  padding: var(--space-16) 0;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .hero-container {
    grid-template-columns: 1fr;
    max-width: 640px;
    padding: var(--space-14) 0;
  }
  /* Panneau de recherche sur tablette : centré, largeur limitée */
  .hero-search-panel {
    max-width: 540px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .hero-section { min-height: auto; }
  .hero-container { padding: var(--space-10) 0; gap: var(--space-8); }
  .hero-title { font-size: clamp(1.5rem, 6vw, 2.25rem); }
  .hero-subtitle { font-size: var(--text-base); margin-bottom: var(--space-6); }
  .hero-actions { gap: var(--space-2); }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .hero-container { padding: var(--space-8) 0; }
  .hero-title { font-size: clamp(1.25rem, 7vw, 1.75rem); margin-bottom: var(--space-3); }
  .hero-subtitle { font-size: var(--text-sm); margin-bottom: var(--space-4); }
  .hero-badge { font-size: 0.65rem; padding: var(--space-1) var(--space-3); }
}

/* ② Stats hero — évite le débordement horizontal */
.hero-stats {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  row-gap: var(--space-4);
}
.hero-stat-divider {
  /* Masquer les dividers quand ça wrap */
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .hero-stats {
    gap: 0;
    column-gap: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .hero-stat-divider { display: none; }
  .hero-stat { padding: var(--space-3); }
  .stat-number { font-size: var(--text-2xl); }
  .stat-label  { font-size: 0.6rem; }
}

/* ③ Panneau recherche hero */
@media (max-width: 480px) {
  .hero-search-panel { padding: var(--space-4); border-radius: var(--radius-lg); }
  .hero-search-title { font-size: var(--text-lg); }
  .hero-search-filters { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   6. PAGE ARTICLE — FIX OVERFLOW PRINCIPAL
   ───────────────────────────────────────── */

/* Layout 3 colonnes → 2 → 1 */
.article-layout {
  display: grid;
  grid-template-columns: 240px 1fr 280px;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-6);
  /* CRUCIAL : évite que le contenu central déborde */
  min-width: 0;
}

/* Colonne centrale ne doit jamais forcer un scroll */
.article-main { min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.article-toc   { min-width: 0; }
.article-sidebar { min-width: 0; }

@media (max-width: 1280px) {
  .article-layout { grid-template-columns: 200px 1fr 260px; }
}
@media (max-width: 1100px) {
  .article-layout { grid-template-columns: 1fr 240px; gap: var(--space-6); }
  .article-toc { display: none; }
}
@media (max-width: 768px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-5) 0;   /* retire le padding horizontal, le container s'en charge */
  }
  .article-toc { display: none; }
  /* Sidebar réapparaît en bas en grille 2 col sur tablette paysage */
  .article-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    position: static;
    height: auto;
  }
  .article-sidebar .sidebar-card--download { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .article-layout { padding: var(--space-4) 0; }
  .article-sidebar { grid-template-columns: 1fr; }
}

/* ④ Titre article : ne sort jamais du cadre */
.article-title {
  font-size: clamp(1.2rem, 4vw, 2.25rem);
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 480px) {
  .article-title { font-size: clamp(1.1rem, 5vw, 1.5rem); }
}

/* ⑤ Métadonnées article — tous les éléments flex wrap */
.article-badges,
.article-identifiers,
.article-dates,
.article-authors,
.abstract-tabs,
.article-metrics-bar,
.article-keywords {
  flex-wrap: wrap;
  max-width: 100%;
  overflow-x: hidden;
}

.article-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  overflow: hidden; /* empêche les enfants de déborder */
}

/* Breadcrumb scrollable si débordement */
.breadcrumb-list {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  max-width: 100%;
}
.breadcrumb-list::-webkit-scrollbar { display: none; }

@media (max-width: 640px) {
  .article-header { margin-bottom: var(--space-4); padding-bottom: var(--space-4); }
  .article-badges { gap: var(--space-2); }
  .article-identifiers { gap: var(--space-2); }
  .article-dates { gap: var(--space-2); font-size: 0.68rem; }
  .article-metrics-bar { padding: var(--space-3); gap: var(--space-3); }
  .article-share { margin-left: 0; margin-top: var(--space-2); }
}

@media (max-width: 480px) {
  .article-section-title { font-size: var(--text-lg); }
  .abstract-tabs { flex-wrap: wrap; gap: var(--space-1); }
  .abstract-tab-btn { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }
  .abstract-text { font-size: var(--text-sm); text-align: left; } /* justify difficile sur mobile */
  .article-keywords { padding: var(--space-3); }
  .keyword-tag { font-size: 0.68rem; padding: 2px var(--space-2); }
}

/* Fichiers attachés — nom de fichier ne déborde pas */
.file-library-item { flex-wrap: wrap; }
.file-details { min-width: 0; }
.file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 480px) {
  .file-library-item { padding: var(--space-3); gap: var(--space-3); }
  .file-big-icon { width: 36px; height: 36px; line-height: 36px; font-size: 1.25rem; }
  .file-actions-wrap { flex-wrap: wrap; }
}

/* Citation block */
.cite-text {
  word-break: break-all;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  max-width: 100%;
}

/* Contenu article */
.article-content {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
.article-content pre {
  overflow-x: auto;
  white-space: pre;
  max-width: 100%;
}
.article-content figure img { width: 100%; height: auto; }

@media (max-width: 640px) {
  .article-content { font-size: var(--text-sm); }
  .article-content h2 { font-size: var(--text-xl); margin: var(--space-6) 0 var(--space-3); }
  .article-content h3 { font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-2); }
  .article-content blockquote { padding: var(--space-3) var(--space-4); }
}

/* Sidebar article desktop sticky */
@media (min-width: 769px) {
  .article-sidebar { position: sticky; top: 90px; height: fit-content; max-height: calc(100vh - 120px); overflow-y: auto; }
}

/* ─────────────────────────────────────────
   7. GRILLES ARTICLES
   ───────────────────────────────────────── */
.articles-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
@media (max-width: 640px) {
  .articles-grid--3,
  .articles-grid--2 { grid-template-columns: 1fr; }
  .articles-grid--list .article-card { flex-direction: column; max-height: none; }
  .articles-grid--list .article-card-image { width: 100%; aspect-ratio: 16/9; }
}
.article-card-title { word-break: break-word; overflow-wrap: break-word; }
.article-card-footer { flex-wrap: wrap; }

/* Featured article */
@media (max-width: 900px) {
  .featured-article-card { grid-template-columns: 1fr; }
  .featured-article-image img { min-height: 200px; max-height: 280px; }
  .featured-article-content { padding: var(--space-6); }
}
@media (max-width: 480px) {
  .featured-article-content { padding: var(--space-4); }
  .featured-article-title { font-size: var(--text-xl); }
  .featured-article-abstract { display: none; } /* gagne de la place sur très petit écran */
}

/* ─────────────────────────────────────────
   8. SECTIONS PRINCIPALES HOME
   ───────────────────────────────────────── */
.section-spacing { padding: var(--space-16) 0; }
@media (max-width: 768px) { .section-spacing { padding: var(--space-10) 0; } }
@media (max-width: 480px) { .section-spacing { padding: var(--space-8) 0;  } }

.section-header { flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }
@media (max-width: 480px) {
  .section-header { margin-bottom: var(--space-5); }
  .section-title { font-size: var(--text-2xl); }
}

/* Stats grid home */
@media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 360px)  { .stats-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .stat-card { padding: var(--space-4); }
  .stat-card-number { font-size: var(--text-2xl); }
}

/* CTA card */
@media (max-width: 768px) {
  .cta-card { padding: var(--space-8); }
  .cta-title { font-size: var(--text-2xl); }
}
@media (max-width: 480px) {
  .cta-card { padding: var(--space-6); border-radius: var(--radius-lg); }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; justify-content: center; }
  .cta-features { gap: var(--space-2); }
}

/* Newsletter */
@media (max-width: 768px) {
  .newsletter-block { flex-direction: column; padding: var(--space-6); }
  .newsletter-input-group { flex-direction: column; }
  .newsletter-input-group .btn { width: 100%; }
}

/* ─────────────────────────────────────────
   9. CATÉGORIES
   ───────────────────────────────────────── */
@media (max-width: 1024px) { .categories-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .categories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px)  { .categories-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .category-card { padding: var(--space-4); }
  .category-name { font-size: var(--text-base); }
}

/* ─────────────────────────────────────────
   10. ARCHIVE
   ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .archive-page { grid-template-columns: 1fr; }
  .archive-sidebar { display: none; }
}
@media (max-width: 768px) {
  .archive-controls { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .archive-sort { justify-content: space-between; }
  .archive-title { font-size: var(--text-2xl); }
}
@media (max-width: 480px) {
  .archive-controls { padding: var(--space-3); }
  .view-toggle { margin-left: auto; }
}

/* ─────────────────────────────────────────
   11. AUTEURS
   ───────────────────────────────────────── */
@media (max-width: 1024px) { .authors-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .authors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px)  { .authors-grid { grid-template-columns: 1fr; } }

@media (max-width: 768px) {
  .author-profile { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6) 0; }
  .author-profile-sidebar { max-width: 320px; margin: 0 auto; }
  .author-profile-avatar { width: 120px; height: 120px; }
  .author-profile-name { font-size: var(--text-xl); }
}
@media (max-width: 480px) {
  .author-card { padding: var(--space-4); }
  .author-card-avatar, .author-card-avatar-placeholder { width: 64px; height: 64px; }
  .author-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────
   12. RECHERCHE
   ───────────────────────────────────────── */
@media (max-width: 768px) {
  .search-form-large { padding: var(--space-5); }
  .search-form-large-title { font-size: var(--text-xl); }
  .search-form-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}
@media (max-width: 480px) {
  .search-form-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   13. PAGINATION
   ───────────────────────────────────────── */
@media (max-width: 480px) {
  .scientia-pagination { gap: var(--space-1); }
  .scientia-pagination a,
  .scientia-pagination span { min-width: 34px; height: 34px; font-size: var(--text-xs); padding: 0 var(--space-2); }
}

/* ─────────────────────────────────────────
   14. SOUMISSION / FORMULAIRES
   ───────────────────────────────────────── */
@media (max-width: 768px) {
  .submission-page { padding: var(--space-6) 0; }
  .submission-section { padding: var(--space-5); border-radius: var(--radius-lg); }
  .submission-steps { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .submission-step-label { display: none; }
}
@media (max-width: 480px) {
  .dropzone-area { padding: var(--space-6) var(--space-4); }
  .dropzone-icon { font-size: 2rem; }
  .form-grid-2 { grid-template-columns: 1fr; }
}
/* Inputs — évite le zoom iOS (font-size >= 16px) */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ─────────────────────────────────────────
   15. LOGO FOOTER — FIX ÉLARGISSEMENT
   ───────────────────────────────────────── */
.footer-col--brand .footer-logo-wrap { display: block; margin-bottom: var(--space-4); }
.footer-col--brand .custom-logo-link { display: inline-block; }
.footer-col--brand .custom-logo-link img,
.footer-col--brand .custom-logo-link .custom-logo {
  display: inline-block !important;  /* annule display:block WP */
  height: 48px;
  width: auto;             /* respecte le ratio */
  max-width: 180px;        /* limite l'élargissement */
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin-bottom: 0;
}

/* ─────────────────────────────────────────
   16. FOOTER WIDGETS GRID
   ───────────────────────────────────────── */
.footer-widgets-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-10);
}

/* Listes de navigation footer */
.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-nav-list li a {
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}
.footer-nav-list li a:hover { color: #fff; }

/* Contact */
.footer-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.8);
}
.footer-contact-list a { color: rgba(255,255,255,.9); text-decoration: none; }
.footer-contact-list a:hover { color: #fff; text-decoration: underline; }

.footer-cta-btns {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

@media (max-width: 1100px) {
  .footer-widgets-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer-widgets { padding: var(--space-10) 0; }
  .footer-widgets-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-col--brand .custom-logo-link img { height: 38px; max-width: 140px; }
  .footer-issn-badges { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); }
}

/* Footer bottom */
@media (max-width: 640px) {
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .footer-bottom-nav { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .footer-tech-info { font-size: 0.65rem; }
}

/* ─────────────────────────────────────────
   17. BACK TO TOP & COOKIE
   ───────────────────────────────────────── */
@media (max-width: 480px) {
  .back-to-top { bottom: var(--space-4); right: var(--space-4); width: 38px; height: 38px; }
  .cookie-notice { padding: var(--space-3) var(--space-4); }
  .cookie-notice-content { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .cookie-notice-content .btn { width: 100%; }
}

/* ─────────────────────────────────────────
   18. BOUTONS — pleine largeur sur mobile
   ───────────────────────────────────────── */
@media (max-width: 360px) {
  .btn { min-width: 0; }
}

/* ─────────────────────────────────────────
   19. UTILITAIRES
   ───────────────────────────────────────── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* Scrollbar webkit fine */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }