/* ============================================================
   responsive.css — Couche responsive & zoom (chargée en dernier)
   Cible : mobiles, tablettes, grands écrans, et zoom navigateur.
   Additif et non destructif : ne remplace pas le design existant,
   il le borne et le rend fluide. Compatible LTR et RTL.
   ============================================================ */

/* ---------- 1. Garde-fous globaux (anti-débordement / zoom) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }
/* Empêche un mot/URL très long de pousser la mise en page */
p, h1, h2, h3, h4, span, a, label, td, th { overflow-wrap: break-word; }

/* ---------- 2. Plafond de largeur sur grands écrans + centrage ---------- */
:root { --gs-maxw: 1400px; }

.container { width: 92%; max-width: var(--gs-maxw); margin-inline: auto; }
.container-grid,
.banner-container-dark,
.banner-container-light,
.product-slider-section { max-width: var(--gs-maxw); margin-inline: auto; }
.smartlife .container,
.hits-section .hits-header,
.hits-section .hits-grid { max-width: var(--gs-maxw); margin-inline: auto; }

/* Très grands écrans (2K/4K) : on élargit un peu le plafond */
@media (min-width: 1800px) {
  :root { --gs-maxw: 1600px; }
}

/* ---------- 3. Typographie fluide (zoom + mobile) ---------- */
.hero .main-card h1 { font-size: clamp(1.5rem, 4.2vw, 2.6rem); line-height: 1.12; }

.contact-main-title, .success-card h2, .payment-page h2 {
  font-size: 68px;
}

/* ---------- 4. order_detail : barre latérale fixe → empile ---------- */
.order-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
@media (max-width: 900px) {
  .order-detail-grid { grid-template-columns: 1fr; }
}

/* ---------- 5. Bannières & grille « Hits » : repli mobile ---------- */
@media (max-width: 768px) {
  .banner-container-dark,
  .banner-container-light { grid-template-columns: 1fr; }
  .hits-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
  .hits-grid { grid-template-columns: 1fr; }
}

/* ---------- 6. Renforts mobiles transverses ---------- */
@media (max-width: 768px) {
  /* Notifications : pleine largeur en haut */
  .messages-container { left: 12px; right: 12px; top: 70px; max-width: none; }

  /* Formulaires : champs confortables, pas de débordement */
  input, select, textarea, button { max-width: 100%; }

  /* Prix qui ne se coupent pas */
  .pay-method-content small { word-break: break-word; }
}

@media (max-width: 480px) {
  /* Laisser les prix passer à la ligne plutôt que déborder */
  .new-price, .old-price, .hit-new-price, .hit-old-price,
  .new-price-slider, .old-price-slider { white-space: normal; }

  /* Boutons d'action sur fiche produit / cartes : pleine largeur */
  .pd-cart-form { flex-wrap: wrap; }
}

/* ---------- 7. Specs (fiche produit) sur mobile : label au-dessus de la valeur ---------- */
@media (max-width: 600px) {
  .pd-spec-row { flex-direction: column; align-items: flex-start; gap: 3px; }
  .pd-spec-value { text-align: left; }
}

/* ---------- 8. Hero : colonnes gauche = centre = droite (même hauteur) ---------- */
@media (min-width: 992px) {
  .container-grid { align-items: stretch; }
  /* Hauteur de référence = 2 cartes (350px) + l'écart (35px) */
  .main-card,
  .left,
  .right { height: 800px; }
  /* Les deux cartes de chaque colonne se partagent la hauteur à parts égales */
  .left .card,
  .right .card { flex: 1 1 0; height: auto; min-height: 0; }
}

/* ---------- 9. Flèches de slider : petits ronds (corrige l'étirement vertical) ---------- */
.slider-container .slider-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.slider-container .slider-btn.left  { left: 0 !important; right: auto !important; }
.slider-container .slider-btn.right { right: 0 !important; left: auto !important; }

/* ============================================================
   10. SYSTÈME TYPOGRAPHIQUE UNIFIÉ (toutes les pages)
   Police  : titres h1..h6 → "degular" · texte → "urbane" · arabe → IBM Plex
   Tailles : échelle fluide (clamp) — s'adapte mobile ↔ desktop.
   NB : les tailles sont posées sur les BALISES sans !important, donc les
   composants qui ont leur propre classe (ex. noms de produits .name-slider)
   gardent leur taille et les grilles ne cassent pas.
   ============================================================ */
:root {
  --fs-h1:   clamp(2.6rem, 6.2vw, 68px);   /* gros titre de page   ~42→68px */
  --fs-h2:   clamp(2rem,   4.6vw, 46px);   /* titre de section     ~32→46px */
  --fs-h3:   clamp(1.5rem, 3.2vw, 32px);   /* sous-titre           ~24→32px */
  --fs-h4:   clamp(1.25rem,2.2vw, 23px);   /* petit titre          ~20→23px */
  --fs-h5:   19px;
  --fs-h6:   16px;
  --fs-body: 16px;                          /* texte courant, liens, listes */
  --fs-small:13px;
  --lh-body: 1.6;
}

/* ----- Polices ----- */
body, p, li, label, td, th, small, strong, b, em, blockquote, figcaption,
button, input, select, textarea, optgroup, option,
.btn, .da-btn, .slider-tab, .filter-tag, .badge {
  font-family: "urbane", sans-serif !important;
}
h1, h2, h3, h4, h5, h6 , a {
  font-family: "degular", sans-serif !important;
}

/* ----- Échelle de tailles (sur les balises, sans !important) ----- */
h1 { font-size: var(--fs-h1); line-height: 1.08; font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: 1.12; font-weight: 700; }
h3 { font-size: var(--fs-h3); line-height: 1.20; font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: 1.30; font-weight: 600; }
h5 { font-size: var(--fs-h5); line-height: 1.35; font-weight: 600; }
h6 { font-size: var(--fs-h6); line-height: 1.40; font-weight: 700; }
p, li, a, label, td, th { font-size: var(--fs-body); line-height: var(--lh-body); }
ul, ol { font-size: var(--fs-body); }
small { font-size: var(--fs-small); }

/* ----- Pages en arabe : tout en IBM Plex Sans Arabic, sauf les icônes ----- */
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] *:not(i):not(svg):not(path):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab) {
  font-family: "IBM Plex Sans Arabic", sans-serif !important;
}

/* ============================================================
   11. BANNIERES : limites de lignes
   Titre = 2 lignes max | Description = 2 lignes max (+ "...") | Tag = 1 ligne
   ============================================================ */
.bd-title-left, .bd-title-right,
.bl-title-light-left, .bl-title-light-right {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.bd-desc-dark-left, .bd-desc-dark-right,
.bl-desc-light-left, .bl-desc-light-right {
    min-width: 200;
    flex: 1;
    white-space: normal;
}
/* Tag = 1 ligne, et le trait coloré ne doit JAMAIS se comprimer */
.bd-tag-dark-left, .bd-tag-dark-right,
.bl-tag-light-left, .bl-tag-light-right {
  white-space: nowrap;
}
.bd-tag-dark-left::before, .bd-tag-dark-right::before,
.bl-tag-light-left::before, .bl-tag-light-right::before {
  flex-shrink: 0;
}

/* === Pagination Groshop (remplace les fleches geantes) === */
.gs-pagination { margin-top: 20px; }
.gs-pages { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; justify-content:center; }
.gs-page a, .gs-page span { display:flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border-radius:8px; border:1px solid #d8e2ec; background:#fff; color:#17344c; font-size:14px; font-weight:600; line-height:1; text-decoration:none; transition:all .15s ease; }
.gs-page a:hover { background:#17344c; color:#fff; border-color:#17344c; }
.gs-page.gs-active span { background:#17344c; color:#fff; border-color:#17344c; }
.gs-page.gs-disabled span { opacity:.4; cursor:not-allowed; }

/* ============================================================
   12. RESPONSIVE COMPLÉMENTAIRE
   Bannières internes (mobile), ruban "trust" à l'échelle,
   avantages sur très petit écran. Couvre mobile / zoom.
   ============================================================ */

/* --- Bannières : image SOUS le texte sur tablette/mobile --- */
/* (en desktop : image absolue à droite + padding-right 220px ; ici on neutralise) */
@media (max-width: 768px) {
  .banner-dark-left, .banner-dark-right,
  .banner-light-left, .banner-light-right {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: 0;
    min-height: 0;
    text-align: left;
  }
  .bd-image-dark-left, .bd-image-dark-right,
  .bl-image-light-left, .bl-image-light-right {
    position: static;
    inset: auto;
    top: auto; right: auto; bottom: auto; left: auto;
    width: auto;
    max-width: 42%;
    flex: 0 0 42%;
    margin: 0;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .bd-image-dark-left img, .bd-image-dark-right img,
  .bl-image-light-left img, .bl-image-light-right img {
    max-height: 150px;
    margin: 0;
    display: block;
    width: 100%;
    object-fit: contain;
    object-position: bottom right;
  }
  .bd-content-dark-left, .bd-content-dark-right,
  .bl-content-light-left, .bl-content-light-right { max-width: 100%; flex: 1 1 auto; min-width: 0; padding: 16px 4px 16px 14px; align-items: flex-start; justify-content: center; text-align: left; }
  /* bouton + description peuvent s'empiler si trop étroit */
  .bd-content-bas-dark-left, .bd-content-bas-dark-right,
  .bd-content-bas-light-left, .bd-content-bas-light-right {
    flex-wrap: wrap;
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .bd-image-dark-left, .bd-image-dark-right,
  .bl-image-light-left, .bl-image-light-right { max-width: 42%; }
}

/* --- Ruban "trust" : 44px en desktop -> mis à l'échelle sur petits écrans --- */
@media (max-width: 1199px) {
  .trust-slider { gap: 44px; }
  .trust__item { font-size: 34px; gap: 18px; }
  .trust__item img { width: 60px; height: 60px; }
}
@media (max-width: 991px) {
  .trust-slider { gap: 34px; }
  .trust__item { font-size: 28px; gap: 14px; }
  .trust__item img { width: 50px; height: 50px; }
}
@media (max-width: 600px) {
  .trust-slider { gap: 24px; }
  .trust__item { font-size: 21px; gap: 11px; }
  .trust__item img { width: 38px; height: 38px; }
  .trust { padding: 20px 0; }
}

/* --- Avantages : 1 colonne pleine largeur sur très petit écran --- */
/* (le logo À CÔTÉ du texte respire mieux ainsi) */
@media (max-width: 430px) {
  .avantages-wrap { grid-template-columns: 1fr 1fr; }
  .av-card { min-height: 0; padding: 16px 18px; justify-content: flex-start; }
}

/* --- Sliders produits : la carte ne déborde pas sur mobile --- */
@media (max-width: 600px) {
  .slider-container { padding-inline: 6px; }
  .slider-btn { display: none; } /* mobile : défilement au doigt, pas de flèches */
}

/* ============================================================
   Corrections RTL (arabe) — page d'accueil
   ============================================================ */

/* Bouton de la carte centrale du hero : toujours collé en bas */
.btn-center { margin-top: auto; }

/* Flèches des cartes hero 1-2-3-4 : sens inversé en arabe */
html[dir="rtl"] .shop-btn::after       { transform: scaleX(-1) rotate(-45deg); }
html[dir="rtl"] .shop-btn:hover::after { transform: scaleX(-1) rotate(0deg); }

/* Flèche "voir tout / عرض كل المنتجات" : sens inversé en arabe */
.va-arrow { display: inline-block; }
html[dir="rtl"] .va-arrow { transform: scaleX(-1); }

/* Titres des sliders (اختر الثقة / حسب الماركة) alignés à droite en arabe */
html[dir="rtl"] .slider-title,
html[dir="rtl"] .slider-subtitle { text-align: right; }

/* Cartes produits (nom, catégorie, prix) : identiques aux autres langues
   -> on garde le sens LTR pour éviter que "Dhs" et les noms latins se réordonnent */
html[dir="rtl"] .product-card,
html[dir="rtl"] .product-card-slider,
html[dir="rtl"] .hit-card { direction: ltr; }

/* Sécurité : prix toujours au format "00,00 Dhs" même hors carte */
html[dir="rtl"] .price-box,
html[dir="rtl"] .price-box-slider,
html[dir="rtl"] .hit-price,
html[dir="rtl"] .new-price,  html[dir="rtl"] .old-price,
html[dir="rtl"] .new-price-slider, html[dir="rtl"] .old-price-slider,
html[dir="rtl"] .hit-new-price, html[dir="rtl"] .hit-old-price { direction: ltr; }

/* Bannières : même disposition que les autres langues (pas d'effet miroir) */
html[dir="rtl"] .banner-container-dark,
html[dir="rtl"] .banner-container-light { direction: ltr; }