/**
 * MboaFoot — Responsive / Mobile-First
 * Breakpoints : 1200px (xl), 992px (lg), 768px (md), 576px (sm), 480px (xs)
 *
 * Stratégie : mobile-first (min-width pour élargir)
 * Les règles ci-dessous sont des RÉDUCTIONS pour tablette et mobile.
 */

/* ══════════════════════════════════════════════════════════
   TABLETTES PAYSAGE — max 1200px
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {

  .mboa-hero__inner {
    grid-template-columns: 1fr 300px;
    gap: var(--mboa-space-8);
  }

  .mboa-hero__title {
    font-size: var(--mboa-text-4xl);
  }

  .mboa-dashboard__grid,
  .mboa-row--with-sidebar {
    grid-template-columns: 1fr 280px;
  }

  --mboa-sidebar-width: 280px;

  .mboa-footer__grid {
    grid-template-columns: 1fr repeat(2, 1fr);
    gap: var(--mboa-space-8);
  }

  .mboa-footer__grid > .mboa-footer__col:last-child {
    grid-column: 1 / -1;
  }
}

/* ══════════════════════════════════════════════════════════
   TABLETTES PORTRAIT — max 992px
   ══════════════════════════════════════════════════════════ */

@media (max-width: 992px) {

  /* Layout : passage à une colonne */
  .mboa-dashboard__grid,
  .mboa-row--with-sidebar {
    grid-template-columns: 1fr;
  }

  .mboa-dashboard__sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mboa-space-5);
  }

  /* Hero : colonne unique */
  .mboa-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .mboa-hero__scores {
    display: none; /* masqué sur tablette, sidebar disponible dessous */
  }

  .mboa-hero__actions {
    justify-content: center;
  }

  .mboa-hero__title {
    font-size: var(--mboa-text-3xl);
  }

  /* Navbar : hamburger visible */
  .mboa-hamburger {
    display: flex;
  }

  .mboa-navbar {
    display: none;
  }

  /* Grilles articles */
  .mboa-posts-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }

  .mboa-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .mboa-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mboa-footer__col:first-child {
    grid-column: 1 / -1;
  }

  /* Header search */
  .mboa-header__search {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE — max 768px
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Topbar masquée sur mobile */
  .mboa-topbar {
    display: none;
  }

  /* Header compact */
  .mboa-header__inner {
    height: 56px;
  }

  .custom-logo {
    height: 38px;
  }

  .mboa-brand__name {
    font-size: var(--mboa-text-lg);
  }

  /* Hero */
  .mboa-hero {
    min-height: auto;
    padding: var(--mboa-space-10) 0;
  }

  .mboa-hero__title {
    font-size: var(--mboa-text-2xl);
  }

  .mboa-hero__subtitle {
    font-size: var(--mboa-text-base);
  }

  .mboa-hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .mboa-hero__actions .mboa-btn {
    width: 100%;
    max-width: 280px;
  }

  /* Page hero */
  .mboa-page-hero {
    padding: var(--mboa-space-8) 0;
  }

  .mboa-page-hero__title {
    font-size: var(--mboa-text-2xl);
  }

  /* Quick nav : scroll horizontal */
  .mboa-quick-nav__link {
    padding: var(--mboa-space-3) var(--mboa-space-4);
    font-size: 10px;
  }

  .mboa-quick-nav__icon {
    font-size: 1.4rem;
  }

  /* Dashboard */
  .mboa-dashboard {
    padding: var(--mboa-space-6) 0 var(--mboa-space-10);
  }

  .mboa-dashboard__sidebar {
    grid-template-columns: 1fr;
  }

  /* Grilles */
  .mboa-posts-grid,
  .mboa-posts-grid--3col,
  .mboa-posts-grid--2col {
    grid-template-columns: 1fr;
  }

  .mboa-related__grid {
    grid-template-columns: 1fr;
  }

  /* Zones CAF */
  .mboa-zones-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Fil d'ariane : compact */
  .mboa-breadcrumb__item:not(:last-child):not(:first-child) {
    display: none;
  }

  /* Articles liés */
  .mboa-related__grid {
    grid-template-columns: 1fr;
  }

  /* Section header */
  .mboa-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mboa-space-2);
  }

  /* Footer */
  .mboa-footer__widgets {
    padding: var(--mboa-space-10) 0 var(--mboa-space-8);
  }

  .mboa-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--mboa-space-8);
  }

  .mboa-footer__col:first-child {
    grid-column: auto;
  }

  .mboa-footer__bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: var(--mboa-space-4);
  }

  .mboa-footer__menu {
    justify-content: center;
  }

  /* Classement plugin : masquer colonnes non essentielles */
  .mboafoot-classement-table .mboa-hide-sm {
    display: none;
  }

  /* Score item : simplifié */
  .mboafoot-score-item {
    gap: var(--mboa-space-2);
  }

  .mboafoot-team-name {
    max-width: 90px;
    font-size: var(--mboa-text-xs);
  }

  .mboafoot-score {
    font-size: var(--mboa-text-lg);
  }

  /* Match card */
  .mboafoot-match-card__body {
    gap: var(--mboa-space-4);
    padding: var(--mboa-space-6) var(--mboa-space-4);
  }

  .mboafoot-match-card__score {
    font-size: 2.5rem;
  }

  .mboafoot-match-card__logo {
    width: 48px;
    height: 48px;
  }

  /* Recherche */
  .mboa-search-result {
    grid-template-columns: 100px 1fr;
  }

  /* Page 404 */
  .mboa-404__number {
    font-size: 5rem;
  }

  /* Pagination */
  .mboa-pagination__item a,
  .mboa-pagination__item span {
    min-width: 36px;
    height: 36px;
    font-size: var(--mboa-text-xs);
  }

  /* Filtres scores */
  .mboa-scores-filters {
    gap: var(--mboa-space-2);
  }

  .mboa-filter-btn {
    font-size: 10px;
    padding: var(--mboa-space-2) var(--mboa-space-3);
  }

  /* Article */
  .mboa-article__title {
    font-size: var(--mboa-text-2xl);
  }

  .mboa-article__share {
    flex-wrap: wrap;
  }

  /* Main */
  .mboa-main {
    padding-top: var(--mboa-space-6);
    padding-bottom: var(--mboa-space-8);
  }

  .mboa-page-wrap {
    padding-top: var(--mboa-space-6);
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE PETIT — max 480px
   ══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  .mboa-hero__title {
    font-size: var(--mboa-text-xl);
  }

  .mboa-page-hero__title {
    font-size: var(--mboa-text-xl);
  }

  .mboa-zones-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mboa-zone-card {
    padding: var(--mboa-space-4) var(--mboa-space-3);
  }

  .mboa-zone-card__flags {
    font-size: 1.1rem;
  }

  /* Score item ultra-compact */
  .mboafoot-score-item {
    padding: var(--mboa-space-2) var(--mboa-space-3);
  }

  .mboafoot-team-logo {
    width: 22px;
    height: 22px;
  }

  .mboafoot-team-name {
    max-width: 75px;
  }

  /* Boutons full sur petit mobile */
  .mboa-404__actions {
    flex-direction: column;
  }

  .mboa-404__actions .mboa-btn {
    width: 100%;
  }

  /* Résultats de recherche */
  .mboa-search-result {
    grid-template-columns: 80px 1fr;
  }

  /* Quick nav plus compact */
  .mboa-quick-nav__link {
    padding: var(--mboa-space-3);
    font-size: 9px;
  }
}

/* ══════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════ */

@media print {
  .mboa-topbar,
  .mboa-header,
  .mboa-navbar,
  .mboa-quick-nav,
  .mboa-footer,
  .mboa-col-sidebar,
  .mboa-dashboard__sidebar,
  .mboa-ad-zone,
  .mboa-hamburger,
  .mboa-mobile-menu,
  .mboa-overlay,
  .mboa-pagination,
  .mboa-breadcrumb-bar,
  .mboa-related,
  .mboa-article__share,
  .mboa-article__footer {
    display: none !important;
  }

  .mboa-main {
    padding: 0;
  }

  .mboa-article__title,
  .mboa-article__content {
    color: #000;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #666;
  }
}

/* ══════════════════════════════════════════════════════════
   PRÉFÉRENCE MOTION RÉDUIT (accessibilité)
   ══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .mboa-card:hover {
    transform: none;
  }

  .mboa-btn:hover {
    transform: none;
  }
}