/* ============================================================
   RESPONSIVE — Mobile-first breakpoints
   ============================================================ */

/* ≤ 1200px — 3 colonnes */
@media (max-width: 1200px) {
  :root { --grid-cols: 3; }

  .hero__inner {
    grid-template-columns: 50fr 50fr;
    gap: var(--sp-8);
  }
}

/* ≤ 960px — Tablet */
@media (max-width: 960px) {
  :root { --grid-cols: 2; }

  /* Hero : stacking — padding-block only pour préserver padding-inline du .container */
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: var(--sp-10);
  }

  .hero__preview {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }

  /* Single coloriage */
  .single-coloriage__layout {
    grid-template-columns: 1fr;
  }

  .single-coloriage__figure {
    position: static;
    max-width: 560px;
    margin-inline: auto;
  }

  /* Footer */
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .site-footer__col--nav {
    grid-template-columns: 1fr 1fr;
  }

  /* Tips */
  .single-coloriage__tips {
    grid-template-columns: 1fr 1fr;
  }

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

  /* Categories grid : 3 colonnes sur tablet */
  .categories__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ≤ 720px — Mobile large */
@media (max-width: 720px) {
  :root {
    --header-height: 56px;
    --grid-gap: 14px;
  }

  /* Header : mode mobile */
  .site-header__toggle {
    display: flex;
  }

  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: var(--sp-4);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--t-base);
    gap: var(--sp-4);
    z-index: 99;
  }

  .site-nav.is-open {
    transform: translateX(0);
  }

  .site-nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__menu li a {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
  }

  .site-nav__menu .sub-menu,
  .site-nav__menu .cat-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--color-border);
    border-radius: 0;
    padding: 0;
    margin-left: var(--sp-4);
    display: none;
  }

  .site-nav__search {
    width: 100%;
  }

  .site-nav__search input[type="search"] {
    width: 100%;
    flex: 1;
  }

  .theme-toggle {
    align-self: flex-start;
  }

  /* Hamburger actif */
  .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Hero */
  .hero__title {
    font-size: var(--font-size-3xl);
  }

  .hero__preview {
    display: none;
  }

  /* Single coloriage tips */
  .single-coloriage__tips {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .site-footer__col--nav {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
}

/* ≤ 720px — cat-page-grid + taxonomy desc truncation */
@media (max-width: 720px) {
  .cat-page-grid {
    grid-template-columns: 1fr;
  }

  .taxonomy-header__desc {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .page-contact__layout {
    grid-template-columns: 1fr;
  }

  .page-contact__info {
    position: static;
  }
}

/* ≤ 480px — Mobile */
@media (max-width: 480px) {
  :root { --grid-cols: 2; }

  .hero__inner {
    padding-block: var(--sp-6);
  }

  .home-search__btn {
    display: none;
  }

  .post-grid {
    grid-template-columns: 1fr;
  }

  /* Categories grid : 2 colonnes sur mobile */
  .categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .filter-bar__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .error-404__code {
    font-size: 5rem;
  }
}

/* ≤ 360px */
@media (max-width: 360px) {
  :root { --grid-cols: 1; }
}

/* Print */
@media print {
  .site-header,
  .site-footer,
  .filter-bar,
  .single-coloriage__actions,
  .single-coloriage__share,
  .related-coloriages,
  .theme-toggle {
    display: none !important;
  }

  .single-coloriage__layout {
    grid-template-columns: 1fr;
  }

  .single-coloriage__figure {
    position: static;
    box-shadow: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}