/* =====================================================================
   LADEHORSIALE — Couche responsive MOBILE-FIRST (boutique client)
   Chargée APRÈS le <style> du layout : à spécificité égale, elle gagne.
   Cibles : 320 px → 1440 px. Priorité absolue : téléphone en 4G.
   ===================================================================== */

/* ── 1. Bases universelles ─────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-tap-highlight-color: transparent;
    overflow-wrap: break-word;
}
/* "clip" (et non "hidden") : coupe tout débordement horizontal SANS casser le header sticky */
@supports (overflow: clip) { body { overflow-x: clip; } }

img, video, canvas, svg, iframe { max-width: 100%; }
img { height: auto; }
.pcard-media img, .gallery-main img, .gallery-thumb img, .cart-thumb img,
.co-item-thumb img, .conf-item-thumb img { height: 100%; }

/* ".container.shop-page" : le layout définit .shop-page APRÈS .container avec "padding: 40px 0 20px",
   ce qui supprimait les marges latérales (contenu collé aux bords sur téléphone). */
.container, .container.shop-page {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

/* Un enfant de grille ne doit jamais forcer la largeur de la page */
.co-layout > *, .cart-layout > *, .prod-layout > *, .cat-layout > *,
.account-shell > *, .hero-inner > *, .footer-grid > * { min-width: 0; }

/* Contenus éditoriaux (pages TinyMCE, blog) : jamais de débordement */
.page-content, .prose, .post-body, .blog-body, .article-body { overflow-wrap: anywhere; }
.page-content img, .prose img, .post-body img, .blog-body img, .article-body img { height: auto; }
.page-content table, .prose table, .post-body table, .blog-body table, .article-body table {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.page-content iframe, .prose iframe, .post-body iframe, .blog-body iframe, .article-body iframe,
iframe[src*="youtube"], iframe[src*="vimeo"] {
    width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto;
}
.page-content pre, .prose pre { overflow-x: auto; max-width: 100%; }

/* ── 2. Tactile : champs ≥ 16px (sinon iOS zoome), cibles ≥ 44px ──── */
@media (max-width: 899px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select, textarea { font-size: 16px; }

    .btn            { min-height: 48px; }
    .btn-sm         { height: 44px; }
    .input, .select { height: 50px; }
    .qty-stepper button   { width: 48px; height: 50px; }
    .mini-stepper button  { width: 42px; height: 44px; }
    .filter-opt           { padding: 11px 0; }
    .variant-chip         { min-height: 44px; }
    .provider-chip        { min-height: 44px; }
    .line-remove          { min-height: 44px; padding: 0 6px; }
    .footer-link          { padding: 10px 0; }
    .account-link         { min-height: 44px; }
    .auth-check           { min-height: 44px; }
    .filter-opt input, .auth-check input { width: 20px; height: 20px; }
}

/* Pas de "hover collant" sur écran tactile */
@media (hover: none) {
    .pcard:hover { transform: none; box-shadow: none; border-color: var(--line); }
    .pcard:hover .pcard-media img { transform: none; }
    .btn-primary:hover, .btn-accent:hover { transform: none; }
}

/* ── 3. En-tête / navigation ───────────────────────────────────────── */
@media (max-width: 991px) {
    .mobile-menu {
        max-height: calc(100vh - var(--topbar-h) - 40px);
        max-height: calc(100dvh - var(--topbar-h) - 40px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
        box-shadow: 0 24px 40px rgba(15, 31, 61, 0.14);
    }
    .mobile-menu a { min-height: 48px; display: flex; align-items: center; }
}

@media (max-width: 575px) {
    :root { --topbar-h: 64px; }

    .announce-bar { font-size: 11.5px; padding: 7px 12px; line-height: 1.4; }

    .header-inner { gap: 10px; }
    .brand { flex-shrink: 1; min-width: 0; gap: 9px; }
    .brand img { height: 40px !important; max-width: 140px; object-fit: contain; }
    .brand-logo { width: 38px; height: 38px; border-radius: 11px; }
    .brand > div:last-child { min-width: 0; }
    .brand-name { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .brand-tag { display: none; }

    .header-actions { gap: 6px; flex-shrink: 0; }
    .icon-btn { width: 44px; height: 44px; border-radius: 12px; }
    .cart-count { top: -5px; right: -5px; }

    .hide-xs { display: none !important; }   /* "Mon compte" : accessible via le menu */

    .toast-wrap {
        left: 12px; right: 12px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        align-items: stretch;
    }
    .toast { max-width: none; }
}
@media (max-width: 359px) {
    .hide-xxs { display: none !important; }  /* très petits écrans : on garde panier + menu */
}

/* ── 4. Rythme général & pied de page ──────────────────────────────── */
@media (max-width: 767px) {
    .shop-page { padding-top: 22px; padding-bottom: 14px; }
    .page-head { margin-bottom: 18px; }
    .breadcrumbs {
        flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
        font-size: 12.5px; margin-bottom: 14px;
    }
    .breadcrumbs::-webkit-scrollbar { display: none; }

    .card, .co-panel, .acc-panel, .acc-stat { border-radius: 16px; }
    .co-panel { padding: 18px; }
    .acc-panel { padding: 18px 16px; }
    .btn { padding: 0 18px; }

    #shop-footer { margin-top: 48px; padding-top: 40px; }
    .footer-grid { gap: 28px; padding-bottom: 28px; }
    .footer-about { max-width: none; }
    .footer-bottom {
        flex-direction: column; text-align: center; justify-content: center;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
    .footer-pay { flex-wrap: wrap; justify-content: center; }
}

/* ── 5. Cartes produit & grilles ───────────────────────────────────── */
@media (max-width: 575px) {
    .pcard { border-radius: 14px; }
    .pcard-body { padding: 11px; }
    .pcard-cat { font-size: 10.5px; }
    .pcard-name { font-size: 13.5px; min-height: 36px; margin: 4px 0 8px; }
    .pcard-price { font-size: 15.5px; }
    .pcard-compare { font-size: 11.5px; }
    .pcard-badges { top: 8px; left: 8px; gap: 4px; }
    .pbadge { font-size: 10px; padding: 3px 8px; }
    .pcard-add { height: 44px; font-size: 12.5px; margin-top: 10px; }
    .prod-grid, .cat-grid-p, .similar-grid, .cat-grid { gap: 12px !important; }
}

/* ── 5 bis. Prix et bouton des cartes : jamais coupés en deux ───────── */
.pcard-price, .pcard-unit, .pcard-compare { white-space: nowrap; }
.pcard-price-row { gap: 2px 7px; }
.pcard-add { white-space: nowrap; overflow: hidden; }
@media (max-width: 575px) {
    body .pcard-price { font-size: 15px; letter-spacing: -0.2px; }
    body .pcard-unit { font-size: 11px; }
    body .pcard-compare { flex-basis: 100%; font-size: 12px; }   /* prix barré sous le prix */
    body .pcard-add { padding: 0 6px; gap: 6px; font-size: 12.5px; }
}
@media (max-width: 400px) { .pcard-add-more { display: none; } }   /* "Ajouter" seul sur petits écrans */

/* ── 5 ter. Cartes de l'ACCUEIL (.prod-*, copie des .pcard-*) ───────── */
/* "body" en préfixe : le <style> de la vue home est chargé après cette feuille. */
body .prod-price, body .prod-unit, body .prod-compare { white-space: nowrap; }
body .prod-price-row { flex-wrap: wrap; gap: 2px 7px; }
body .prod-add { white-space: nowrap; overflow: hidden; }
@media (hover: none) {
    body .prod-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
    body .prod-card:hover .prod-media img { transform: none; }
}
@media (max-width: 575px) {
    body .prod-card { border-radius: 14px; }
    body .prod-body { padding: 11px; }
    body .prod-cat { font-size: 10.5px; }
    body .prod-name { font-size: 13.5px; min-height: 36px; margin: 4px 0 8px; }
    body .prod-price { font-size: 15px; letter-spacing: -0.2px; }
    body .prod-unit { font-size: 11px; }
    body .prod-compare { flex-basis: 100%; font-size: 12px; }
    body .prod-tags { top: 8px; left: 8px; gap: 4px; }
    body .prod-tag { font-size: 10px; padding: 3px 8px; }
    body .prod-fav { top: 8px; right: 8px; width: 40px; height: 40px; }
    body .prod-add { height: 44px; padding: 0 6px; gap: 6px; font-size: 12.5px; margin-top: 10px; }
}

/* ── 6. Espace client ──────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .grid-2 { grid-template-columns: 1fr; } }

@media (max-width: 859px) {
    .account-shell { gap: 16px; }
    .account-nav {
        display: flex; align-items: center; gap: 6px; padding: 8px;
        overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .account-nav::-webkit-scrollbar { display: none; }
    .account-user { display: none; }
    .account-nav > div[style*="height:1px"] { display: none; }
    .account-nav form { margin-left: auto; flex-shrink: 0; }
    .account-link { white-space: nowrap; flex-shrink: 0; padding: 0 14px; }
    .account-link.logout { width: auto; }
    .order-row { align-items: flex-start; }
}

/* ── 7. Connexion / inscription / mot de passe ─────────────────────── */
@media (max-width: 575px) {
    body .auth-wrap { padding: 4px 0 20px; }
    body .auth-card { padding: 26px 18px; border-radius: 18px; }
    body .auth-title { font-size: 22px; }
    body .auth-icon { width: 54px; height: 54px; margin-bottom: 14px; font-size: 22px; }
    body .auth-head { margin-bottom: 22px; }
    .pw-toggle { width: 44px; height: 44px; right: 2px; }
}

/* ── 8. Panier / checkout : récap non collant en mobile ────────────── */
/* (les filtres du catalogue ont leur propre tiroir, voir catalogue.blade.php) */
@media (max-width: 899px) {
    .summary { position: static; }
}

/* ── 8 bis. Accueil : on arrive plus vite aux produits ──────────────── */
/* ("body" en préfixe : le <style> de la vue home est chargé après cette feuille) */
@media (max-width: 767px) {
    body .hero-inner { padding: 34px 0 42px; gap: 26px; }
    body .hero-badge { margin-bottom: 16px; font-size: 12px; padding: 6px 13px; }
    body .hero-title { letter-spacing: -0.6px; margin-bottom: 14px; }
    body .hero-sub { font-size: 15.5px; margin-bottom: 24px; }
    body .hero-cta { gap: 10px; }
    body .hero-cta .btn { flex: 1 1 100%; }
    body .hero-stats { gap: 16px 26px; margin-top: 28px; padding-top: 22px; }
    body .hero-stat-num { font-size: 23px; }
    body .hero-visual { padding: 24px 20px; min-height: 0; }
    body .hero-visual-icon { width: 60px; height: 60px; font-size: 26px; margin-bottom: 14px; }
}
@media (max-width: 575px) {
    /* encart décoratif masqué : le visiteur voit le catalogue plus tôt */
    body .hero-visual { display: none; }
}

/* Grilles à "1fr" : sans minmax(0,…) un texte long élargit la colonne et fait déborder la page.
   Limité au mobile pour ne pas écraser les colonnes desktop définies dans les vues. */
@media (max-width: 767px) { body .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) {
    body .prod-grid, body .cat-grid, body .cat-grid-p, body .similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body .trust-item { padding: 16px 10px; gap: 10px; }
    body .trust-ic { width: 38px; height: 38px; font-size: 16px; border-radius: 11px; }
    body .trust-txt { min-width: 0; }
    body .trust-txt strong { font-size: 13px; }
}

/* ── 9. Réduction de mouvement (économie batterie / accessibilité) ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}