/* tablet.css - Breakpoints: 769px-1024px - Dépendances: style.css - Dernière MAJ: 2026-08-03 */

@media (min-width: 769px) and (max-width: 1024px) {

  /* =======================================================================
     0. ACCESSIBILITÉ & BASE
     ======================================================================= */

  a:focus-visible, button:focus-visible, .btn:focus-visible,
  input:focus-visible, select:focus-visible, textarea:focus-visible,
  summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--drc-green, #28cc28);
    outline-offset: 2px;
  }

  input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
  input[type="number"], input[type="search"], input[type="url"], select, textarea,
  .contact-form input, .contact-form textarea, .contact-form select,
  .drc-checkout input.input-text, .drc-checkout textarea, .drc-checkout select,
  .woocommerce-account form input[type="email"], .woocommerce-account form input[type="password"],
  .woocommerce-account form input[type="tel"], .woocommerce-account form select,
  .drc-cart-row__qty .quantity input.qty {
    font-size: 16px;
  }

  /* =======================================================================
     1. NAVIGATION — Burger (panneau condensé, façon "modal" centré)
     ======================================================================= */

  .primary-nav { display: none; }

  .drc-nav-details {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 5;
  }

  .drc-nav-details > summary { list-style: none; }
  .drc-nav-details > summary::-webkit-details-marker,
  .drc-nav-details > summary::marker { display: none; content: none; }

  .drc-burger {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius, 8px);
    color: #fff;
    position: relative;
    z-index: 6;
  }
  .drc-burger:hover { background: rgba(255,255,255,.07); }

  .drc-burger__box { position: relative; width: 22px; height: 16px; display: block; }
  .drc-burger__box::before,
  .drc-burger__box::after,
  .drc-burger__inner {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s ease, opacity .2s ease;
  }
  .drc-burger__box::before { top: 0; }
  .drc-burger__inner { top: 7px; }
  .drc-burger__box::after { top: 14px; }

  .drc-nav-details[open] .drc-burger__box::before { transform: translateY(7px) rotate(45deg); }
  .drc-nav-details[open] .drc-burger__box::after { transform: translateY(-7px) rotate(-45deg); }
  .drc-nav-details[open] .drc-burger__inner { opacity: 0; }

  /* Panneau centré, type "modal", max-width 90% (au lieu du plein écran mobile) */
  .drc-nav-panel {
    position: fixed;
    inset: 0;
    z-index: 4;
    background: rgba(10,10,10,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }
  .mobile-nav {
    width: 100%;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--drc-dark, #111);
    border: 1px solid var(--drc-border-dark, #222);
    border-radius: var(--radius-lg, 16px);
    padding: 2rem;
  }

  .mobile-nav .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem;
  }
  .mobile-nav .menu-item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 1rem 1.25rem;
    font-family: var(--font-heading, inherit);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    border-radius: 10px;
    text-align: center;
  }
  .mobile-nav .menu-item > a:hover,
  .mobile-nav .menu-item > a:focus-visible {
    background: rgba(40,204,40,.12);
    color: var(--drc-green, #28cc28);
  }
  .mobile-nav .sub-menu {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0 0 .5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .3rem .6rem;
  }
  .mobile-nav .sub-menu a {
    display: flex;
    min-height: 44px;
    align-items: center;
    font-size: .9rem;
    color: #b5bcc4;
  }

  /* =======================================================================
     2. HEADER
     ======================================================================= */

  .header-action-btn {
    width: 44px;
    height: 44px;
  }

  /* =======================================================================
     3. HERO — texte gauche / image droite (layout par défaut conservé),
        on corrige uniquement le piège de largeur fixe.
     ======================================================================= */

  .hero__trust-bar { width: 100%; }

  /* =======================================================================
     4. GRILLES HOME
     ======================================================================= */

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

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

  /* =======================================================================
     5. FOOTER — 2 colonnes
     ======================================================================= */

  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }

  /* =======================================================================
     6. BOUTIQUE (grille produits) — 2 colonnes, gap 24px
     ======================================================================= */

  .catalog-body ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .catalog-body .woocommerce-pagination ul li a,
  .catalog-body .woocommerce-pagination ul li span {
    min-width: 44px;
    height: 44px;
  }

  /* =======================================================================
     7. FICHE PRODUIT — cibles tactiles
     ======================================================================= */

  .sp-qty-wrap { height: 50px; }
  .sp-qty-btn { min-width: 44px; }

  /* =======================================================================
     8. PANIER & SIDECART — cibles tactiles ; sidecart en panneau centré
     ======================================================================= */

  .drc-cart-row__remove .remove { width: 44px; height: 44px; }
  .drc-cart-close { width: 44px; height: 44px; }
  .drc-qty__btn { width: 44px; height: 44px; }
  .drc-cart-item__remove { width: 44px; height: 44px; }

  /* =======================================================================
     9. MON COMPTE — cibles tactiles
     ======================================================================= */

  .woocommerce-account .woocommerce-MyAccount-navigation li a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* =======================================================================
     10. TABLEAUX — scroll horizontal avec indicateur (fondu de bord)
     ======================================================================= */

  .page-body table,
  .sp-tab-richtext table,
  .woocommerce-account .woocommerce-MyAccount-content table,
  .drc-checkout .shop_table,
  .drc-cart-page__aside .cart_totals table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, #000 94%, transparent);
    mask-image: linear-gradient(to right, #000 94%, transparent);
  }

}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}