/*
 * Responsive fixes — garde-fous globaux pour éviter les overflow horizontaux,
 * les images débordantes et les grids cassées sur petit écran.
 * Chargé en dernier (après tokens-overrides.css) pour gagner les batailles
 * d'ordre sans toucher aux feuilles existantes.
 */

/* ========== 1. Anti-overflow horizontal ========== */
html, body { overflow-x: clip; }

/* Tous les éléments respectent leur conteneur */
*, *::before, *::after { min-width: 0; }

/* ========== 2. Images / vidéos / iframes fluides par défaut ========== */
img, video, picture, svg, iframe {
    max-width: 100%;
    height: auto;
}

/* iframes pleine largeur (Stripe checkout, OAuth popups) */
iframe { display: block; }

/* ========== 3. Grids responsive : auto-fit avec minmax adapté ========== */
/* Sur écrans très étroits (<400px), on force les grilles connues à 1 col
   pour éviter qu'un minmax(220px+, 1fr) déborde. Liste explicite plutôt
   qu'un sélecteur générique [class*="grid"] qui peut frapper trop large. */
@media (max-width: 400px) {
    .card-grid,
    .card-grid-catalog,
    .product-grid,
    .home-overview-grid,
    .checkout-trust-list,
    .product-trust-list,
    .footer-grid,
    .footer-bottom-original,
    .home-intro-panel,
    .manifesto-home-shell {
        grid-template-columns: 1fr !important;
    }
}

/* ========== 4. Container fluide : padding plus petit sur mobile ========== */
@media (max-width: 480px) {
    .container {
        width: calc(100% - 1rem);
    }
}

/* ========== 5. Titres : wrap naturel + balance ========== */
/* text-wrap: balance distribue harmonieusement les lignes quand ça wrap,
   sans forcer une coupure agressive. overflow-wrap: break-word ne casse
   un mot QUE s'il est vraiment plus long que sa ligne (ex : URL). */
h1, h2, h3 {
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
}

/* ========== 6. Boutons et liens : ne dépassent jamais ========== */
.button-primary,
.button-secondary,
.button-ghost,
button {
    max-width: 100%;
    word-break: normal;
}

/* ========== 7. Tables responsives ========== */
table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========== 8. Forms : champs ne dépassent pas ========== */
input, select, textarea {
    max-width: 100%;
}

/* Particulièrement les inputs type number/email/tel */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"] {
    width: 100%;
    box-sizing: border-box;
}

/* ========== 9. Header nav : burger sur mobile ========== */
@media (max-width: 720px) {
    .nav-row {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
}

/* ========== 10. Spacing vertical homogène pour les sections ========== */
@media (max-width: 640px) {
    .section,
    .account-page-section,
    .checkout-page-section {
        padding-block: clamp(1.5rem, 5vw, 2.5rem);
    }
}

/* ========== 11. Flash messages : pleine largeur lisible ========== */
.flash-stack {
    max-width: 100%;
}

.flash {
    word-break: normal;
    overflow-wrap: anywhere;
}

/* ========== 12. Cart drawer : adapter à très petit écran ========== */
@media (max-width: 380px) {
    .cart-drawer-panel {
        width: 100vw;
    }
    .cart-drawer-item {
        grid-template-columns: 56px 1fr auto;
        gap: 0.5rem;
    }
    .cart-drawer-item-media {
        width: 56px;
        height: 70px;
    }
}

/* ========== 13. Checkout wizard : stepper compact sur mobile ========== */
@media (max-width: 480px) {
    .checkout-stepper-link {
        padding: 0.4rem 0.4rem;
        font-size: 0.6rem;
    }
    .checkout-wizard-nav {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }
    .checkout-wizard-nav button {
        width: 100%;
        justify-content: center;
    }
}

/* ========== 14. Pre/code : scroll horizontal au lieu de déborder ========== */
pre, code {
    max-width: 100%;
    overflow-x: auto;
    word-break: normal;
}

/* ========== 15. Account dashboard : grid mobile-first ========== */
@media (max-width: 900px) {
    .account-dashboard,
    .account-bottom-grid,
    .account-chat-layout,
    .checkout-dashboard {
        grid-template-columns: 1fr;
    }
}

/* ========== 16. Product hero : grid passe en 1 col plus tôt ========== */
@media (max-width: 820px) {
    .product-hero-layout,
    .product-story-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== 17. Accessibilité : zones tactiles minimum 44px ========== */
/* Boutons d'action principaux : viser 44px (WCAG 2.5.5 Niveau AAA / Niveau AA
   en mobile). Les boutons compacts du drawer (× close, qty +/-) gardent
   leur taille volontairement réduite car ils sont espacés de >24px. */
.button-primary,
.button-secondary,
.button-ghost,
.nav-toggle {
    min-height: 44px;
}

.button-primary,
.button-secondary,
.button-ghost {
    min-width: 44px;
}

/* ========== 18. Long mots dans les meta/spans ========== */
.product-meta,
.account-meta,
.account-contact-line,
.checkout-contact-line,
.cart-drawer-item-title {
    overflow-wrap: anywhere;
}