/* Aymen Meuble — vitrine et boutique, en trois langues (fr, en, ar).
   Refonte « grand site » du 2026-09-12 — demande PO : « un site mondial,
   design professionnel et beau », sur le modèle de Miliboo et Kasa :
   en-tête marchand (recherche, familles, panier, langues), carrousel photo,
   garanties, familles en cartes photo (les cartes que le PO voulait
   garder), nouveautés, showroom, inspirations.
   Ivoire, lin et noyer, le laiton du logo en accent ; titres en Fraunces
   (Amiri pour l'arabe), texte en Inter (Cairo pour l'arabe).
   Propriétés logiques partout (inline-start / inline-end) : la même feuille
   sert l'arabe, de droite à gauche. */

@font-face { font-family: "Fraunces"; src: url("assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("assets/fonts/fraunces-latin-wght-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Polices arabes : le navigateur ne les télécharge que si la page contient de l'arabe. */
@font-face { font-family: "Amiri"; src: url("assets/fonts/amiri-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Amiri"; src: url("assets/fonts/amiri-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Cairo"; src: url("assets/fonts/cairo-arabic-wght.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  --ivoire: #faf8f6;
  --lin: #f2eeea;
  --sable: #e4ddd6;
  --blanc: #ffffff;
  --noyer: #1d1b1a;
  --noyer-2: #2c2927;
  --noyer-3: #141312;
  --texte: #1d1b1a;
  --texte-doux: #5f5a56;
  --laiton: #e84e1b;          /* filets et décors */
  --laiton-texte: #c2400f;    /* texte doré lisible sur fond clair */
  --or: #e84e1b;              /* le doré du logo, sur fond sombre */
  --terracotta: #b86a4b;
  --bord: #e6e0da;
  --ombre: 0 1px 2px rgba(42, 33, 27, .05), 0 8px 24px -12px rgba(42, 33, 27, .18);
  --ombre-forte: 0 2px 4px rgba(42, 33, 27, .06), 0 24px 48px -20px rgba(42, 33, 27, .35);
  --rayon: 18px;
  --police-titre: "Fraunces", "Amiri", Georgia, "Times New Roman", serif;
  --police-texte: "Inter", "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --transition: .25s ease;
  --icone-canape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e84e1b' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M3 11a2 2 0 0 1 2 2v2h14v-2a2 2 0 1 1 4 0v5H1v-5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M5 20v1.5M19 20v1.5'/%3E%3C/svg%3E");
  --icone-loupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c2400f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ivoire); color: var(--texte);
  font-family: var(--police-texte); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
svg { flex: none; }
h1, h2, h3, h4 { font-family: var(--police-titre); font-weight: 500; line-height: 1.15; margin: 0 0 .5em; color: var(--noyer); letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--laiton-texte); }
p { margin: 0 0 1em; }
a { color: inherit; }
[hidden] { display: none !important; }
.conteneur { max-width: 1240px; margin: 0 auto; padding-inline: 24px; }
section[id] { scroll-margin-top: 150px; }

/* Arabe : l'espacement entre lettres casse la liaison des lettres, et
   l'arabe n'a pas d'italique — l'accent passe par la couleur seule. */
:lang(ar) body { line-height: 1.85; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 { font-weight: 700; line-height: 1.4; }
:lang(ar) * { letter-spacing: 0 !important; }
:lang(ar) em { font-style: normal; }

/* ---- Barre d'infos (livraison, langues) ---- */
.barre-infos { background: var(--noyer); color: #efe3d0; font-size: 13px; }
.barre-infos .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 6px 24px; min-height: 40px; }
.infos-livraison { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; }
.infos-livraison span { display: inline-flex; align-items: center; gap: 8px; }
.infos-livraison svg { width: 16px; height: 16px; fill: none; stroke: var(--or); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.langues { display: flex; gap: 2px; }
.langues a { padding: 4px 10px; border-radius: 99px; color: #efe3d0; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: color var(--transition), background var(--transition); }
.langues a:hover { color: var(--or); }
.langues a[aria-current="true"] { background: rgba(239, 227, 208, .14); color: var(--or); }

/* ---- En-tête marchand ---- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 253, 249, .96); border-bottom: 1px solid var(--bord);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
}
.entete-haut { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "marque recherche actions"; align-items: center; gap: 12px 40px; min-height: 84px; }
.marque { grid-area: marque; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marque .logo-img { height: 50px; width: auto; display: block; }
.nom-marque { font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; font-weight: 600; color: var(--noyer); line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.nom-marque b { font-weight: 500; font-style: italic; color: var(--laiton-texte); }
.recherche-entete { grid-area: recherche; position: relative; width: 100%; max-width: 640px; justify-self: center; margin: 0; }
.recherche-entete input {
  width: 100%; height: 50px; padding-inline: 52px 22px; border-radius: 999px;
  border: 1px solid var(--bord); background: var(--ivoire); color: var(--texte);
  font-family: var(--police-texte); font-size: .98rem;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.recherche-entete input::placeholder { color: #9a8c7e; }
.recherche-entete input:focus { outline: none; background: #fff; border-color: var(--laiton); box-shadow: 0 0 0 4px rgba(195, 154, 58, .15); }
.recherche-entete button { position: absolute; inset-inline-start: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--laiton-texte); cursor: pointer; }
.recherche-entete svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.actions-entete { grid-area: actions; display: flex; align-items: center; gap: 10px; }
.lien-panier {
  position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 999px;
  background: var(--noyer); color: var(--ivoire); font-size: .95rem; font-weight: 600; text-decoration: none; transition: background var(--transition);
}
.lien-panier:hover { background: var(--noyer-2); }
.lien-panier svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.badge-panier { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 99px; background: var(--terracotta); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.5; text-align: center; }
.lien-panier .badge-panier { position: absolute; top: -6px; inset-inline-end: -6px; border: 2px solid var(--blanc); }

/* Barre des familles, comme la barre de rayons des grands sites marchands. */
.nav-familles { border-top: 1px solid var(--bord); }
.nav-familles ul { display: flex; gap: 4px 30px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.nav-familles ul::-webkit-scrollbar { display: none; }
.nav-familles a { position: relative; display: block; padding-block: 13px; color: var(--texte); font-size: .92rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav-familles a::after { content: ""; position: absolute; inset-inline: 0; bottom: 6px; height: 1.5px; background: var(--laiton); transform: scaleX(0); transition: transform var(--transition); }
.nav-familles a:hover::after, .nav-familles a[aria-current="page"]::after { transform: scaleX(1); }
.nav-familles a[aria-current="page"], .nav-familles .tout { color: var(--laiton-texte); }
.nav-familles .tout { font-weight: 700; }

/* ---- Boutons ---- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; border-radius: 999px; border: 1.5px solid var(--noyer);
  background: var(--noyer); color: var(--ivoire);
  font-family: var(--police-texte); font-size: .98rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.bouton:hover { background: var(--noyer-2); border-color: var(--noyer-2); transform: translateY(-1px); }
.bouton.secondaire { background: transparent; color: var(--noyer); }
.bouton.secondaire:hover { background: var(--noyer); color: var(--ivoire); }
.bouton.or { background: var(--or); border-color: var(--or); color: var(--noyer); }
.bouton.or:hover { background: #e2b93a; border-color: #e2b93a; }
.bouton:disabled { opacity: .6; cursor: progress; transform: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; color: var(--laiton-texte); font-weight: 600; text-decoration: none; transition: gap var(--transition); }
.lien-fleche:hover { gap: 13px; }

/* ---- Surtitre ---- */
.surtitre {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px;
  color: var(--laiton-texte); font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.surtitre::before { content: ""; width: 32px; height: 1.5px; background: var(--laiton); }
:lang(ar) .surtitre { font-size: .9rem; }

/* ---- Carrousel du héros ---- */
.heros { padding-block: 24px 8px; }
.carrousel { position: relative; height: clamp(440px, 66vh, 620px); overflow: hidden; border-radius: 28px; background: var(--noyer); isolation: isolate; }
.diapo { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.diapo.active { opacity: 1; visibility: visible; transition: opacity .9s ease; }
.diapo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 7s ease-out; }
.diapo.active > img { transform: scale(1); }
.diapo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 21, 16, .82) 0%, rgba(28, 21, 16, .5) 42%, rgba(28, 21, 16, 0) 76%); }
[dir="rtl"] .diapo::after { background: linear-gradient(270deg, rgba(28, 21, 16, .82) 0%, rgba(28, 21, 16, .5) 42%, rgba(28, 21, 16, 0) 76%); }
.diapo-texte { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; height: 100%; max-width: 640px; padding-inline: clamp(28px, 6vw, 80px); }
.diapo-texte .surtitre { color: var(--or); }
.diapo-texte .surtitre::before { background: var(--or); }
.diapo-texte h1, .diapo-texte .titre-diapo { margin-bottom: 18px; color: #fff; font-size: clamp(2.3rem, 4.8vw, 4rem); line-height: 1.05; }
:lang(ar) .diapo-texte h1, :lang(ar) .diapo-texte .titre-diapo { line-height: 1.35; }
.diapo-texte em { color: var(--or); }
.diapo-texte p:not(.surtitre) { max-width: 470px; margin-bottom: 30px; color: #f1e9de; font-size: 1.08rem; }
.carrousel-fleche {
  position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 253, 249, .88); color: var(--noyer); cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.carrousel-fleche:hover { background: #fff; transform: scale(1.06); }
.carrousel-fleche svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carrousel-fleche.precedent { inset-inline-start: 18px; }
.carrousel-fleche.suivant { inset-inline-end: 18px; }
.carrousel-fleche.suivant svg, [dir="rtl"] .carrousel-fleche.precedent svg { transform: scaleX(-1); }
[dir="rtl"] .carrousel-fleche.suivant svg { transform: none; }
.carrousel-points { position: absolute; inset-inline: 0; bottom: 22px; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.carrousel-points button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .3s ease, background .3s ease; }
.carrousel-points button[aria-current="true"] { width: 32px; background: var(--or); }

/* ---- Garanties ---- */
.garanties { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 20px; overflow: hidden; border: 1px solid var(--bord); border-radius: 20px; background: var(--bord); }
.garantie { display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: var(--blanc); }
.garantie svg { width: 34px; height: 34px; fill: none; stroke: var(--laiton-texte); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.garantie p { margin: 0; line-height: 1.35; }
.garantie strong { display: block; margin-bottom: 3px; color: var(--noyer); font-size: .98rem; }
.garantie span { color: var(--texte-doux); font-size: .86rem; }

/* ---- Sections ---- */
.section { padding-block: 88px; }
.section.lin { background: var(--lin); }
.entete-section { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; margin-bottom: 40px; }
.entete-section h2, .titre-centre h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); }
.entete-section .intro { max-width: 440px; margin: 0; color: var(--texte-doux); }
.titre-centre { max-width: 660px; margin: 0 auto 48px; text-align: center; }
.titre-centre h2 { margin-bottom: 14px; }
.titre-centre p:not(.surtitre) { margin: 0; color: var(--texte-doux); }

/* ---- Nos univers : les cartes gardées à la demande du PO, avec leur photo ---- */
.grille-univers { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.carte-univers {
  display: flex; flex-direction: column; overflow: hidden; color: var(--texte); text-decoration: none;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-univers:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: var(--sable); }
.carte-univers .photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--lin); }
.carte-univers .photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.carte-univers:hover .photo img { transform: scale(1.06); }
.carte-univers .corps { position: relative; display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 0 20px 20px; }
.carte-univers .icone {
  display: grid; place-items: center; width: 58px; height: 58px; margin-top: -29px; margin-bottom: 8px;
  border: 3px solid var(--blanc); border-radius: 50%; background: var(--lin); box-shadow: var(--ombre); transition: background var(--transition);
}
.carte-univers .icone svg { width: 28px; height: 28px; fill: none; stroke: var(--laiton-texte); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--transition); }
.carte-univers:hover .icone { background: var(--noyer); }
.carte-univers:hover .icone svg { stroke: var(--or); }
.carte-univers h3 { margin: 0; font-size: 1.3rem; }
.carte-univers p { flex: 1; margin: 0; color: var(--texte-doux); font-size: .88rem; }
.carte-univers .en-savoir { margin-top: 10px; color: var(--laiton-texte); font-size: .88rem; font-weight: 600; }

/* ---- Cartes produits (boutique et nouveautés) ---- */
.grille-boutique { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.rangee-produits { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, calc((100% - 60px) / 4)); gap: 20px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.rangee-produits .carte-produit { scroll-snap-align: start; }
.carte-produit { display: flex; flex-direction: column; overflow: hidden; background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); transition: transform var(--transition), box-shadow var(--transition); }
.carte-produit:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.carte-produit .visuel { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--lin); }
.carte-produit .visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.carte-produit:hover .visuel img { transform: scale(1.04); }
.sans-image { width: 100%; height: 100%; min-height: 120px; background: var(--lin) var(--icone-canape) center / 64px no-repeat; }
.carte-produit .infos { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.carte-produit h3 { min-height: 2.6em; margin: 0; font-size: 1.12rem; line-height: 1.3; }
.carte-produit h3 a { text-decoration: none; transition: color var(--transition); }
.carte-produit h3 a:hover { color: var(--laiton-texte); }
.ligne-prix { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-top: auto; }
.prix { color: var(--noyer); font-family: var(--police-titre); font-size: 1.25rem; font-weight: 600; white-space: nowrap; }
.badge-stock { padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.badge-stock.en-stock { background: #e6ebde; color: #4b5a3d; }
.badge-stock.sur-commande { background: var(--lin); color: var(--texte-doux); }
.carte-produit .bouton { width: 100%; padding: 12px; font-size: .92rem; }
.message-boutique {
  grid-column: 1 / -1; margin: 0; padding: 132px 24px 56px; border-radius: 20px;
  background: var(--lin) var(--icone-canape) center 44px / 68px no-repeat;
  color: var(--texte-doux); font-size: 1.05rem; text-align: center;
}
.message-boutique a { color: var(--laiton-texte); font-weight: 600; }

/* ---- Showroom ---- */
.showroom { display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; border-radius: 28px; background: var(--noyer); }
.showroom-photo { position: relative; min-height: 480px; }
.showroom-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showroom-texte { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 64px); color: #e9dfd1; }
.showroom-texte .surtitre { color: var(--or); }
.showroom-texte .surtitre::before { background: var(--or); }
.showroom-texte h2 { color: var(--ivoire); font-size: clamp(2rem, 3.4vw, 2.7rem); }
.showroom-texte h2 em { color: var(--or); }
.showroom-texte p { color: #d3c6b5; font-size: 1.03rem; }
.coches { display: grid; gap: 12px; margin: 0 0 30px; padding: 0; list-style: none; }
.coches li { display: flex; align-items: center; gap: 12px; color: var(--ivoire); font-weight: 500; }
.coches svg { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: rgba(212, 168, 36, .16); fill: none; stroke: var(--or); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Inspirations ---- */
.mosaique { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: repeat(2, 260px); gap: 16px; }
.tuile-idee { position: relative; display: block; overflow: hidden; border-radius: 20px; background: var(--sable); }
.tuile-idee:first-child { grid-row: span 2; }
.tuile-idee img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.tuile-idee:hover img { transform: scale(1.06); }
.tuile-idee span { position: absolute; bottom: 16px; inset-inline-start: 16px; padding: 8px 16px; border-radius: 99px; background: rgba(255, 253, 249, .94); color: var(--noyer); font-size: .9rem; font-weight: 600; box-shadow: var(--ombre); }
.note-photos { margin: 16px 0 0; color: var(--texte-doux); font-size: .82rem; text-align: center; }

/* ---- Commander ---- */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: etape; }
.etape { padding: 32px 28px 28px; background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); }
.etape::before {
  counter-increment: etape; content: "0" counter(etape); display: block; margin-bottom: 18px;
  color: var(--laiton); font-family: "Fraunces", Georgia, serif; font-size: 3rem; font-style: italic; line-height: 1;
}
.etape h3 { font-size: 1.3rem; }
.etape p { margin: 0; color: var(--texte-doux); font-size: .95rem; }
.cta-centre { margin-top: 48px; text-align: center; }

/* ---- Pied de page ---- */
.pied { padding-top: 72px; background: var(--noyer-3); color: #c2b5a4; font-size: .93rem; }
.pied-haut { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.pied-marque { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; text-decoration: none; }
.pied-marque img { display: block; width: auto; height: 54px; }
.pied-marque span { color: var(--ivoire); font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; font-weight: 600; }
.pied-marque b { color: var(--or); font-style: italic; font-weight: 500; }
.pied-col p { max-width: 360px; margin: 0; }
.pied-col h4 { margin-bottom: 16px; color: var(--or); font-family: var(--police-texte); font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
:lang(ar) .pied-col h4 { font-size: .95rem; }
.pied-col ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.pied-col a { color: #e3d8c8; text-decoration: none; transition: color var(--transition); }
.pied-col a:hover { color: var(--or); }
.pied-barre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 22px; border-top: 1px solid rgba(239, 227, 208, .12); font-size: .85rem; }

/* ---- Boutique : en-tête de page, familles, recherche ---- */
.heros-boutique {
  padding-block: 44px 40px; border-bottom: 1px solid var(--bord);
  background: radial-gradient(700px 320px at 90% 0%, #f6ecdd 0%, rgba(246, 236, 221, 0) 70%), var(--lin);
}
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--texte-doux); font-size: .88rem; }
.fil-ariane a { color: var(--laiton-texte); font-weight: 500; text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }
.fil-famille { display: inline-flex; gap: 8px; color: var(--texte); font-weight: 600; }
.heros-boutique h1 { margin-bottom: 12px; font-size: clamp(2.1rem, 4.2vw, 3.2rem); }
.sous-titre { max-width: 560px; margin-bottom: 0; color: var(--texte-doux); font-size: 1.08rem; }
.section-catalogue { padding-block: 32px 96px; }
.section-produit, .section-panier { padding-block: 40px 96px; }
.puces-familles { display: flex; gap: 10px; margin-bottom: 20px; padding-block: 2px 8px; overflow-x: auto; scrollbar-width: none; }
.puces-familles::-webkit-scrollbar { display: none; }
.puce {
  flex: none; padding: 9px 18px; border: 1px solid var(--bord); border-radius: 99px; background: var(--blanc);
  color: var(--texte); font-size: .9rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.puce:hover { border-color: var(--noyer); }
.puce.actif { background: var(--noyer); border-color: var(--noyer); color: var(--ivoire); }
.barre-boutique { margin-bottom: 30px; }
.barre-boutique input[type="search"] {
  width: 100%; max-width: 520px; padding-block: 13px; padding-inline: 48px 20px; border-radius: 999px;
  border: 1px solid var(--bord); background: var(--blanc) var(--icone-loupe) no-repeat left 19px center;
  color: var(--texte); font-family: var(--police-texte); font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
[dir="rtl"] .barre-boutique input[type="search"] { background-position: right 19px center; }
.barre-boutique input::placeholder { color: #9a8c7e; }
.barre-boutique input:focus { outline: none; border-color: var(--laiton); box-shadow: 0 0 0 4px rgba(195, 154, 58, .16); }
.pagination-boutique { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.fil { margin: 0 0 26px; }
.retour { color: var(--laiton-texte); font-size: .92rem; font-weight: 600; text-decoration: none; }
.retour:hover { text-decoration: underline; }

/* ---- Fiche produit ---- */
.detail-produit { display: grid; grid-template-columns: minmax(280px, 540px) 1fr; gap: 56px; align-items: start; }
.detail-produit .visuel { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; border-radius: 24px; background: var(--lin); }
.detail-produit .visuel img { width: 100%; height: 100%; object-fit: contain; }
.detail-produit .visuel .sans-image { background-size: 120px; }
.detail-produit h1 { margin-bottom: 8px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.detail-produit .sku { display: inline-block; margin-bottom: 12px; color: var(--texte-doux); font-size: .85rem; letter-spacing: .04em; }
.detail-produit .prix { display: block; margin: 22px 0 4px; font-size: 2.2rem; }
.choix-quantite { display: flex; align-items: center; gap: 10px; margin: 26px 0; }
.choix-quantite button { width: 46px; height: 46px; border: 1px solid var(--bord); border-radius: 50%; background: var(--blanc); color: var(--noyer); font-size: 1.2rem; cursor: pointer; transition: border-color var(--transition); }
.choix-quantite button:hover { border-color: var(--noyer); }
.choix-quantite input { width: 76px; height: 46px; border: 1px solid var(--bord); border-radius: 999px; background: var(--blanc); color: var(--texte); font-family: var(--police-texte); font-size: 1.05rem; text-align: center; }
.note-confiance { max-width: 480px; margin-top: 24px; padding: 18px 20px; border-radius: 14px; background: var(--lin); color: var(--texte-doux); font-size: .92rem; }

/* ---- Panier et commande ---- */
.section-panier h1 { font-size: clamp(2rem, 4vw, 3rem); }
.table-panier { width: 100%; margin: 28px 0 8px; overflow: hidden; border: 1px solid var(--bord); border-collapse: separate; border-spacing: 0; border-radius: var(--rayon); background: var(--blanc); }
.table-panier th, .table-panier td { padding: 16px 14px; border-bottom: 1px solid var(--bord); text-align: start; }
.table-panier tbody tr:last-child td { border-bottom: none; }
.table-panier th { background: var(--lin); color: var(--texte-doux); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.table-panier td:first-child { font-weight: 600; }
.table-panier td:nth-child(4) { white-space: nowrap; }
.table-panier .qte input { width: 70px; padding: 8px; border: 1px solid var(--bord); border-radius: 999px; font-family: inherit; font-size: .95rem; text-align: center; }
.table-panier .retirer { border: none; background: none; color: var(--texte-doux); font-size: 1.05rem; cursor: pointer; transition: color var(--transition); }
.table-panier .retirer:hover { color: var(--terracotta); }
.total-panier { margin: 18px 0 40px; color: var(--texte-doux); font-size: 1.1rem; text-align: end; }
.total-panier strong { margin-inline-start: 8px; color: var(--noyer); font-family: var(--police-titre); font-size: 1.8rem; font-weight: 600; }
.formulaire-commande { max-width: 600px; padding: 36px 32px; border: 1px solid var(--bord); border-radius: 24px; background: var(--blanc); box-shadow: var(--ombre); }
.formulaire-commande h2 { font-size: 1.7rem; }
.formulaire-commande .aide { margin-bottom: 8px; color: var(--texte-doux); font-size: .92rem; }
.formulaire-commande label { display: block; margin: 16px 0 6px; font-size: .88rem; font-weight: 600; }
.formulaire-commande input, .formulaire-commande textarea {
  width: 100%; padding: 13px 16px; border: 1px solid var(--bord); border-radius: 12px;
  background: var(--ivoire); color: var(--texte); font-family: var(--police-texte); font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.formulaire-commande input::placeholder, .formulaire-commande textarea::placeholder { color: #9a8c7e; }
.formulaire-commande input:focus, .formulaire-commande textarea:focus { outline: none; border-color: var(--laiton); background: var(--blanc); box-shadow: 0 0 0 4px rgba(195, 154, 58, .16); }
.formulaire-commande .bouton { width: 100%; margin-top: 26px; }
/* Champ piège anti-robots : masqué sans décalage — un `left: -9999px`
   devient, en arabe (droite à gauche), 10 000 px de défilement horizontal. */
.champ-invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.erreur-commande { margin-top: 14px; color: #a4432a; font-weight: 500; }
.confirmation-commande { margin-top: 24px; padding: 64px 28px; border: 1px solid var(--bord); border-radius: 24px; background: var(--blanc); text-align: center; }
.confirmation-commande h2 { font-size: 1.9rem; }
.confirmation-commande .numero { display: block; margin: 12px 0; color: var(--laiton-texte); font-family: var(--police-titre); font-size: 1.6rem; }
.confirmation-commande .bouton { margin-top: 12px; }

/* ---- Apparition au défilement ---- */
.apparait:not(.visible) { opacity: 0; }
.apparait.visible { animation: monter .7s ease backwards; }
@keyframes monter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---- Écrans moyens et téléphones ---- */
@media (max-width: 1100px) {
  .pied-haut { grid-template-columns: 1fr 1fr; }
  .rangee-produits { grid-auto-columns: minmax(230px, calc((100% - 40px) / 3)); }
}
@media (max-width: 960px) {
  /* Sur téléphone l'en-tête défile avec la page : trois rangées fixes mangeraient l'écran. */
  .entete { position: relative; }
  .entete-haut { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marque actions" "recherche recherche"; gap: 10px 16px; min-height: 0; padding-block: 12px; }
  .recherche-entete { max-width: none; }
  .recherche-entete input { height: 46px; }
  .garanties { grid-template-columns: repeat(2, 1fr); }
  .showroom { grid-template-columns: 1fr; }
  .showroom-photo { min-height: 300px; }
  .etapes { grid-template-columns: 1fr; }
  .detail-produit { grid-template-columns: 1fr; gap: 28px; }
  .rangee-produits { grid-auto-columns: minmax(220px, 46%); }
}
@media (max-width: 760px) {
  .infos-livraison .optionnel { display: none; }
  .section { padding-block: 64px; }
  .carrousel { height: 540px; border-radius: 20px; }
  .diapo::after, [dir="rtl"] .diapo::after { background: linear-gradient(0deg, rgba(28, 21, 16, .88) 0%, rgba(28, 21, 16, .45) 55%, rgba(28, 21, 16, .08) 100%); }
  .diapo-texte { justify-content: flex-end; padding-block-end: 64px; }
  .carrousel-fleche { display: none; }
  .mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 170px 170px; }
  .tuile-idee:first-child { grid-row: auto; grid-column: span 2; }
  .table-panier .col-prix-unitaire { display: none; }
  .table-panier th, .table-panier td { padding: 12px 8px; }
  .formulaire-commande { padding: 26px 20px; }
  .heros-boutique { padding-block: 32px 30px; }
}
@media (max-width: 560px) {
  .conteneur { padding-inline: 16px; }
  .marque { gap: 9px; }
  .marque .logo-img { height: 42px; }
  .nom-marque { font-size: 1.2rem; }
  .lien-panier { padding: 11px 13px; }
  .lien-panier .texte { display: none; }
  .diapo-texte h1, .diapo-texte .titre-diapo { font-size: 2.1rem; }
  .garantie { gap: 10px; padding: 16px 14px; }
  .garantie svg { width: 28px; height: 28px; }
  .grille-univers { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .carte-univers .corps { padding: 0 14px 16px; }
  .carte-univers .icone { width: 46px; height: 46px; margin-top: -23px; }
  .carte-univers .icone svg { width: 22px; height: 22px; }
  .carte-univers h3 { font-size: 1.1rem; }
  .carte-univers p { display: none; }
  .grille-boutique { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .carte-produit .infos { padding: 12px 12px 14px; gap: 8px; }
  .carte-produit h3 { font-size: .98rem; }
  .carte-produit .prix { font-size: 1.05rem; }
  .carte-produit .bouton { padding: 10px 8px; font-size: .84rem; }
  .pied-haut { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .apparait:not(.visible), .apparait.visible { opacity: 1; animation: none; }
  *, *::before, *::after { transition: none !important; }
}

/* ---- Nos magasins (Thika, 2026-11-06) ---- */
.grille-magasins { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 32px; }
.carte-magasin { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 28px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 8px; }
.carte-magasin .icone svg { width: 34px; height: 34px; fill: none; stroke: var(--laiton); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.carte-magasin h3 { margin: 4px 0 0; font-size: 1.4rem; }
.carte-magasin .detail { color: var(--laiton-texte); font-weight: 600; margin: 0; }
.carte-magasin .adresse { display: flex; gap: 8px; align-items: flex-start; color: var(--texte-doux); margin: 4px 0 12px; }
.carte-magasin .adresse svg { width: 20px; height: 20px; margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.carte-magasin .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.carte-magasin .bouton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; margin-inline-end: 8px; vertical-align: -3px; }
.infos-livraison a { color: inherit; text-decoration: none; font-weight: 600; }

/* Un numéro de téléphone ne se coupe pas ; le logo noir et orange garde un fond
   clair sur le pied sombre, sinon ses lettres noires disparaissent. */
a[href^="tel:"] { white-space: nowrap; }
.pied-marque img { background: #fff; border-radius: 12px; padding: 6px 8px; }