/* mobile.css - Breakpoints: ≤768px - Dépendances: style.css - Dernière MAJ: 2026-08-03 */

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

@media (max-width: 768px) {

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body { font-size: 16px; line-height: 1.6; }

  /* Cible tactile ≥44px partout où applicable (ignoré sur les liens inline en display:inline) */
  a, button, .btn, input[type="button"], input[type="submit"], input[type="reset"] {
    min-height: 44px;
  }

  /* Focus clavier toujours visible */
  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;
  }

  /* Champs de formulaire : 16px mini (empêche le zoom auto iOS) */
  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;
  }
}

/* Mouvement réduit — s'applique quelle que soit la largeur, regroupé ici car c'est le fichier chargé en dernier sur mobile */
@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;
  }
}

@media (max-width: 768px) {

/* =========================================================================
   1. NAVIGATION — Burger menu (details/summary natif, sans JS)
   ========================================================================= */

.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; }

.drc-nav-panel {
  position: fixed;
  inset: 0;
  z-index: 4;
  background: rgba(10,10,10,.98);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 5.5rem 1.5rem 2.5rem;
  overflow-y: auto;
}

.mobile-nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  width: 100%;
}
.mobile-nav .menu-item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 1rem 1.25rem;
  font-family: var(--font-heading, inherit);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 1.1rem;
  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 {
  list-style: none;
  margin: 0;
  padding: 0 0 .5rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.mobile-nav .sub-menu a {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  font-size: .92rem;
  color: #b5bcc4;
  text-align: center;
}

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

/* Topbar supprimée sur mobile : gain d'espace vertical, infos redondantes avec le hero */
.topbar { display: none; }

.site-header__inner {
  gap: .5rem;
  /* La colonne du logo peut se réduire : l'ensemble logo + actions doit tenir
     dans la largeur disponible (320 px inclus). */
  grid-template-columns: minmax(0, auto) 1fr auto;
}

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

/* --- Correctif 1.0.8 : logo navbar mobile ---------------------------------
   Le logo était rendu à sa hauteur CSS de 52 px, soit ~205 px de large.
   Avec les 4 actions d'en-tête (4 x 44 px), la navbar débordait de 126 px
   à 320 px, 71 px à 375 px, 56 px à 390 px et 32 px à 414 px.
   On autorise le logo à se réduire ; sa hauteur reste plafonnée et son
   ratio est conservé (aucune déformation, aucune image coupée).
   Couvre les deux structures possibles : `the_custom_logo()` (img.custom-logo
   dans a.custom-logo-link) et le repli du thème (img.drc-brand-logo). */
.site-header__logo,
.site-header__logo .custom-logo-link {
  min-width: 0;
  flex-shrink: 1;
}

.site-header__logo img,
.site-header__logo .custom-logo,
.site-header__logo .drc-brand-logo {
  height: auto;
  width: auto;
  max-height: 40px;
  max-width: 100%;
  object-fit: contain;
}

/* Très petits écrans : cibles tactiles ramenées à 40 px pour dégager la
   place du logo. Reste très au-dessus du minimum WCAG 2.2 (24 x 24 px). */
@media (max-width: 400px) {
  .header-action-btn { width: 40px; height: 40px; }
}

/* --- Correctif 1.0.8 : panneau de recherche mobile -------------------------
   Le panneau était en `position: absolute` avec `right: 0`, donc ancré sur la
   LOUPE (44 px) située en début de groupe d'actions : il s'étendait vers la
   gauche et sortait de l'écran (7 px à 320 px, jusqu'à 79 px à 414 px et plus).
   En `position: fixed` il est ancré sur la FENÊTRE : il reste entièrement
   visible et utilisable à toutes les largeurs. */
.drc-search__panel {
  position: fixed;
  top: calc(var(--navbar-h) + .5rem);
  left: .75rem;
  right: .75rem;
  width: auto;
  max-width: none;
}

/* =========================================================================
   3. HERO (front page)
   ========================================================================= */

/* Navbar + hero + bandeau réassurance = exactement 100dvh (topbar masquée sur mobile) */
.hero { min-height: calc(100dvh - var(--navbar-h)); }

.hero__trust-bar { width: 100%; padding: .9rem 0; }

/* Titre : le clamp() desktop a un plancher (3rem) trop grand pour les petits écrans
   -> "légaux" etc. débordait et était coupé (nowrap sur l'accent). */
.hero__title {
  font-size: clamp(2rem, 8.5vw, 3rem);
  overflow-wrap: break-word;
}
.hero__title-accent {
  white-space: normal;
}

/* Bandeau réassurance : titres passant à 2 lignes sur certains items (ex: "LIVRAISON
   RAPIDE") mais pas d'autres -> hauteurs de ligne incohérentes entre les 4 blocs.
   On uniformise: titre sur 1 seule ligne partout + gaps resserrés. */
.hero__trust { gap: .6rem .75rem; }
.hero__trust-item { gap: .5rem; }
.hero__trust-item svg { width: 20px; height: 20px; }
.hero__trust-item strong {
  font-size: .68rem;
  letter-spacing: .01em;
  white-space: nowrap;
  margin-bottom: .15rem;
}
.hero__trust-item span { font-size: .66rem; line-height: 1.15; }
/* Le <div> qui enveloppe strong+span hérite du line-height du body (16px/1.6=25.6px) :
   ce "strut" de bloc imposait ~25px par ligne de <span> quel que soit son propre
   line-height. On réduit le strut à la source pour que le vrai resserrement s'applique. */
.hero__trust-item > div { font-size: .66rem; line-height: 1.15; }

/* =========================================================================
   3bis. MOLÉCULES PHARES
   ========================================================================= */

/* 1 colonne : évite le débordement du badge (flex sans wrap) et la hauteur fixe trop grande */
.molecules-grid { grid-template-columns: 1fr; }
.mol-card { min-height: auto; }
.mol-card__content { min-height: auto; padding: 1.1rem; }
.mol-card__top { flex-wrap: wrap; }
.mol-card__desc { margin-top: .5rem; margin-bottom: .75rem; }

/* =========================================================================
   3ter. MEILLEURES VENTES — les flèches slider chevauchaient le titre centré
   ========================================================================= */

.bs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
}
.bs-header .sec-title {
  align-items: flex-start;
  text-align: left;
  font-size: 1.15rem;
}
.best-sellers-nav {
  position: static;
  transform: none;
  flex-shrink: 0;
}

/* =========================================================================
   4. GRILLES HOME (pièges de largeurs/hauteurs fixes)
   ========================================================================= */

.blog-preview-grid { grid-template-columns: 1fr; }

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

/* =========================================================================
   5. FOOTER — colonnes empilées
   ========================================================================= */

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

/* =========================================================================
   6. BOUTIQUE (grille produits) — 1 colonne, gap 16px
   ========================================================================= */

.catalog-body ul.products {
  grid-template-columns: 1fr;
  gap: 16px;
}

.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; }

/* Fil d'ariane : sans wrap le texte se cassait mot par mot (colonne étroite) */
.sp-breadcrumb {
  flex-wrap: wrap;
  row-gap: .3rem;
  font-size: .72rem;
}
.sp-breadcrumb a { white-space: nowrap; }

/* Fils d'ariane (toutes pages) : les liens sont des enfants flex -> la règle
   tactile globale (min-height:44px, section 0) les grandit et décale le
   séparateur "›" (resté à sa hauteur naturelle) vers le bas. On restaure une
   hauteur naturelle centrée par le flex parent. */
.sp-breadcrumb a,
.page-hero__crumbs a,
.single-post__crumbs a {
  min-height: auto;
  display: inline-flex;
  align-items: center;
}
.page-hero__crumbs,
.single-post__crumbs {
  flex-wrap: wrap;
  row-gap: .3rem;
}

/* Barre sticky "Ajouter au panier" : masque vignette/prix, garde qty + bouton plein largeur */
.sp-sticky-bar__thumb,
.sp-sticky-bar__info { display: none; }
.sp-sticky-bar__form { width: 100%; }
.sp-sticky-bar .sp-qty-wrap { flex: 0 0 100px; }
.sp-sticky-bar .sp-btn-cart {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  font-size: .78rem;
  padding: 0 .6rem;
}

/* =========================================================================
   8. PANIER (page /panier) & SIDECART (drawer) — cibles tactiles
   ========================================================================= */

.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;
}

/* Coupon + Mettre à jour : en ligne ça écrasait le champ de saisie à ~100px */
.drc-cart-actions {
  flex-direction: column;
  align-items: stretch;
}
.drc-coupon { width: 100%; min-width: 0; }
.drc-cart-update { width: 100%; }


/* =========================================================================
   9. FORMULAIRES — 1 colonne, full-width
   ========================================================================= */

.contact-form__row { grid-template-columns: 1fr; }

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

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

/* =========================================================================
   11. TABLEAUX — scroll horizontal
   ========================================================================= */

.page-body table,
.sp-tab-richtext table,
.woocommerce-account .woocommerce-MyAccount-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

/* Récap panier/checkout : table 2 colonnes simple, le nowrap coupait "(dont x€ TVA 20%)"
   et les libellés de mode de livraison. */
.drc-cart-page__aside .cart_totals table,
.drc-checkout .shop_table {
  display: table;
  white-space: normal;
}
.drc-cart-page__aside .cart_totals th,
.drc-cart-page__aside .cart_totals td,
.drc-checkout .shop_table th,
.drc-checkout .shop_table td {
  white-space: normal;
  word-break: break-word;
}
.drc-checkout #shipping_method li label { white-space: normal; }
.drc-checkout #shipping_method li {
  flex-wrap: wrap;
}
.drc-checkout #shipping_method li label {
  flex: 1 1 auto;
  min-width: 0;
}
.drc-checkout .shipping_method_description {
  flex: 1 1 100%;
  margin-left: 1.6rem;
}

/* Ligne "Expédition" : th+td côte à côte trop étroit -> empile label puis options */
.drc-checkout .shop_table tr.shipping th,
.drc-checkout .shop_table tr.shipping td {
  display: block;
  width: 100%;
  text-align: left;
  padding-top: .3rem;
}

}