/* =========================================
   RESPONSIVE — MOBILE FIRST
   Breakpoints : 480px · 768px · 1024px · 1280px
   ========================================= */

/* -----------------------------------------------
   TABLETTE — max 1024px
   ----------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --space-lg: 24px;
  }

  /* Header */
  .clj-nav {
    display: none;
  }
  .clj-menu-toggle {
    display: block;
  }

  /* Hero accueil */
  .clj-hero {
    padding: 60px var(--space-lg) 56px;
  }
  .clj-hero h1 {
    font-size: 36px;
  }
  .hero-stats {
    gap: 28px;
  }

  /* Catégories */
  .categories-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Articles accueil */
  .articles-grid-home {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Guides accueil */
  .coming-grid {
    grid-template-columns: 1fr 1fr;
  }
  .coming-nl-cta {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  /* Newsletter accueil */
  .newsletter-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 32px;
  }

  /* Layout articles */
  .articles-layout {
    grid-template-columns: 1fr;
  }
  .clj-sidebar { display: none; }

  /* Article featured */
  .featured-article {
    grid-template-columns: 1fr;
  }
  .featured-thumb { min-height: 180px; }

  /* Grille articles 2 col → 2 col (ok sur tablette) */
  .articles-grid-2col {
    grid-template-columns: 1fr 1fr;
  }

  /* Article single */
  .article-page-wrapper {
    grid-template-columns: 1fr;
    padding-top: 28px;
  }
  .toc-card {
    position: static;
    display: none;
  }
  .sidebar-share { display: none; }
  .sidebar-nl { display: none; }

  /* Related */
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* À propos hero */
  .about-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .identity-card {
    max-width: 400px;
  }

  /* À propos sections */
  .story-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .values-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .is-isnot-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .deonto-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cta-section-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* Guides */
  .guides-grid {
    grid-template-columns: 1fr;
  }
  .faq-grid {
    grid-template-columns: 1fr;
  }

  /* Contact */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Footer */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .footer-deonto {
    text-align: left;
  }
}

/* -----------------------------------------------
   MOBILE — max 768px
   ----------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --space-lg: 16px;
  }

  /* Typographie */
  .section-title {
    font-size: 24px;
  }
  .clj-hero h1 {
    font-size: 28px;
  }

  /* Articles accueil */
  .articles-grid-home {
    grid-template-columns: 1fr;
  }

  /* Guides accueil */
  .coming-grid {
    grid-template-columns: 1fr;
  }

  /* Articles grid */
  .articles-grid-2col {
    grid-template-columns: 1fr;
  }

  /* Related */
  .related-grid {
    grid-template-columns: 1fr;
  }

  /* Valeurs */
  .values-grid {
    grid-template-columns: 1fr;
  }

  /* CTA section */
  .cta-section-grid {
    grid-template-columns: 1fr;
  }

  /* Newsletter card */
  .newsletter-card {
    padding: 28px var(--space-lg);
  }

  /* Article title */
  h1.article-title {
    font-size: 24px;
  }

  /* About hero */
  .about-hero-section h1 {
    font-size: 28px;
  }

  /* Cookie banner */
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .cookie-btns {
    width: 100%;
    justify-content: flex-end;
  }

  /* Footer */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Inline NL */
  .inline-nl {
    flex-direction: column;
    text-align: center;
  }
  .inline-nl .btn-inline {
    width: 100%;
    justify-content: center;
  }

  /* Contact form */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Guides hero */
  .guides-grid {
    grid-template-columns: 1fr;
  }

  /* Hero stats */
  .hero-stats {
    gap: 20px;
  }
}

/* -----------------------------------------------
   PETIT MOBILE — max 480px
   ----------------------------------------------- */
@media (max-width: 480px) {
  .clj-header {
    padding: 0 var(--space-sm);
  }
  .clj-logo-text {
    font-size: 14px;
  }
  .clj-hero {
    padding: 48px var(--space-sm) 40px;
  }
  .hero-ctas {
    flex-direction: column;
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  .category-card {
    padding: 24px 20px;
  }
  .cookie-btns {
    flex-direction: column;
  }
  .btn-cookie-accept,
  .btn-cookie-refuse {
    width: 100%;
    text-align: center;
  }
  .deonto-banner {
    padding: 16px var(--space-sm);
  }
  .clj-footer {
    padding: 36px var(--space-sm) 24px;
  }
  .filters-inner {
    padding: 10px 0;
  }
}

/* -----------------------------------------------
   DESKTOP LARGE — min 1280px
   ----------------------------------------------- */
@media (min-width: 1280px) {
  .clj-hero::before {
    font-size: 400px;
  }
}

/* -----------------------------------------------
   FOCUS VISIBLE — ACCESSIBILITÉ
   ----------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}