:root {
    /* Même palette que l'application de caisse Le Foyer Store, pour une
       continuité visuelle totale entre Instagram, le site et le magasin. */
    --bg: #F7F5F1;
    --panel: #ffffff;
    --ink: #201D1B;
    --muted: #7C8489;
    --border: #E7E2DA;
    --primary: #D87E5C;
    --primary-dark: #B7603F;
    --accent: #5B90A5;
    --accent-dark: #416B7C;
    --success: #4C8C4A;
    --success-dark: #3A6E39;
    --warn-bg: #fdecea;
    --warn-ink: #b3372a;
    /* Police avec de bons fallbacks arabes (Geeza Pro sur iOS, Tahoma et les
       polices Noto sur Android/Windows) : pas de police chargée depuis
       l'extérieur, on reste sans dépendance, seulement un meilleur choix
       parmi les polices système déjà présentes sur le téléphone du client. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Geeza Pro", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic",
        Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.4;
}

a { color: var(--accent-dark); }

.topbar {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar .brand { display: flex; align-items: center; gap: 10px; }
.topbar img.logo { height: 40px; width: auto; }
.topbar .brand-text { font-weight: 700; font-size: 1.05rem; }
.topbar .brand-sub { font-size: 0.75rem; color: var(--muted); }

.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Sélecteur de langue FR/AR : très visible et compréhensible même sans
   savoir lire l'une des deux langues (les deux mots sont toujours affichés
   ensemble, celui de la langue active est simplement mis en évidence). Un
   léger clignotement au chargement de la page attire l'attention dessus
   les premières secondes, puis s'arrête pour ne pas gêner. */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    animation: lang-toggle-glow 1.6s ease-in-out 3;
}
.lang-toggle .lang-opt { font-size: 0.82rem; opacity: 0.6; transition: opacity 0.15s; }
.lang-toggle .lang-opt[data-lang-opt="ar"] { font-size: 0.95rem; }
.lang-toggle .lang-opt.active { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.lang-toggle .lang-sep { opacity: 0.5; font-size: 0.8rem; }

@keyframes lang-toggle-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(91,144,165,0.55); }
    50% { box-shadow: 0 0 0 8px rgba(91,144,165,0); }
}

/* Bouton "Contact" : icone + mot toujours visible (pas seulement une icone
   isolee), pour rester comprehensible du premier coup d'oeil, y compris
   pour la clientele moins a l'aise avec les icones/le numerique deja visee
   par le selecteur de langue. */
.contact-btn {
    background: var(--panel);
    border: 1.5px solid var(--accent);
    color: var(--accent-dark);
    border-radius: 20px;
    padding: 9px 14px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.cart-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cart-btn .count {
    background: rgba(255,255,255,0.3);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.78rem;
}

.hero {
    padding: 20px 16px 8px;
    text-align: center;
}
.hero h1 { font-size: 1.3rem; margin: 0 0 4px; }
.hero p { color: var(--muted); margin: 0; font-size: 0.9rem; }

.cat-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 16px;
    -webkit-overflow-scrolling: touch;
}
.cat-tabs button {
    flex: 0 0 auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}
.cat-tabs button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 16px 90px;
}
@media (min-width: 640px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
    .grid { grid-template-columns: repeat(4, 1fr); }
}

.product-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.photo-wrap { position: relative; }
.photo-wrap.clickable { cursor: zoom-in; }
.product-card .photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--bg);
}
.product-card .photo.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 0.75rem;
    text-align: center;
    padding: 8px;
}
.zoom-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(32,29,27,0.6);
    color: #fff;
    border-radius: 12px;
    padding: 3px 7px;
    font-size: 0.72rem;
    line-height: 1;
    pointer-events: none;
}
html[dir="rtl"] .zoom-badge { right: auto; left: 6px; }
.product-card .body { padding: 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card .name { font-size: 0.88rem; font-weight: 600; min-height: 2.4em; }
.product-card .price { color: var(--primary-dark); font-weight: 700; }
.product-card .stock-out {
    display: inline-block;
    background: var(--warn-bg);
    color: var(--warn-ink);
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 10px;
    align-self: flex-start;
}
.product-card button.add {
    margin-top: auto;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 9px;
    font-weight: 600;
    cursor: pointer;
}
.product-card button.add:disabled {
    background: var(--border);
    color: var(--muted);
    cursor: not-allowed;
}

/* Mise en évidence du produit ciblé par un lien publicitaire (?ref=...) à
   l'arrivée sur la page : le client voit tout de suite l'article annoncé,
   sans que rien d'autre sur la page ne soit restreint ou masqué. */
.product-card.deep-link-highlight {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    animation: deep-link-pulse 1.6s ease-in-out 2;
}
@keyframes deep-link-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(91,144,165,0.55); }
    50% { box-shadow: 0 0 0 10px rgba(91,144,165,0); }
}

/* -------------------------------------------------------------- panier ---- */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(32,29,27,0.45);
    display: none;
    z-index: 40;
}
.overlay.open { display: block; }

.drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 100%);
    background: var(--panel);
    z-index: 50;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}
.drawer.open { transform: translateX(0); }

.contact-drawer { width: min(340px, 100%); }
.contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    text-decoration: none;
    font-size: 0.92rem;
}
.contact-link:last-child { border-bottom: none; }
.contact-link:hover { background: var(--bg); }
.contact-static {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.92rem;
}

.drawer-header {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.drawer-header button.close {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--muted);
}
.drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
.drawer-footer { padding: 16px; border-top: 1px solid var(--border); }

.cart-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.cart-line .thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--bg); }
.cart-line .info { flex: 1; }
.cart-line .info .name { font-size: 0.85rem; font-weight: 600; }
.cart-line .info .unit { font-size: 0.75rem; color: var(--muted); }
.cart-line .qty-ctrl { display: flex; align-items: center; gap: 6px; }
.cart-line .qty-ctrl button {
    width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg); cursor: pointer; font-weight: 700;
}
.cart-line .remove { background: none; border: none; color: var(--warn-ink); cursor: pointer; font-size: 0.8rem; }

.total-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 1.05rem; font-weight: 700; margin-bottom: 12px;
}

.btn-primary-full {
    width: 100%;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 13px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
}
.btn-primary-full:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }

.form-field { margin-bottom: 12px; }
.form-field label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 4px; }
.form-field input, .form-field textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
}
.hint { font-size: 0.78rem; color: var(--muted); margin: 4px 0 12px; }

/* champ piège anti-robot : invisible pour un visiteur humain */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

.empty-cart { text-align: center; color: var(--muted); padding: 40px 0; }

.success-screen { text-align: center; padding: 24px; }
.success-screen .icon { font-size: 2.6rem; }
.success-screen a.whatsapp-link {
    display: inline-block;
    margin-top: 16px;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    padding: 11px 20px;
    border-radius: 10px;
    font-weight: 600;
}

.footer-info {
    text-align: center;
    color: var(--muted);
    font-size: 0.78rem;
    padding: 24px 16px 40px;
}

.error-banner {
    background: var(--warn-bg);
    color: var(--warn-ink);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

/* ------------------------------------------------------ galerie / zoom ---- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,9,8,0.92);
    display: none;
    z-index: 60;
    align-items: center;
    justify-content: center;
}
.lightbox-overlay.open { display: flex; }

.lightbox-content {
    max-width: 92vw;
    max-height: 82vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-content.zoomed,
.lightbox-img.zoomed {
    overflow: auto;
}
.lightbox-img {
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.15s ease;
    touch-action: pinch-zoom;
}
.lightbox-img.zoomed {
    max-width: none;
    max-height: none;
    width: auto;
    height: 220%;
    cursor: zoom-out;
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-counter {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 14px;
    padding: 4px 14px;
    font-size: 0.85rem;
}

html[dir="rtl"] .lightbox-close { right: auto; left: 20px; }
html[dir="rtl"] .lightbox-prev { left: auto; right: 16px; }
html[dir="rtl"] .lightbox-next { right: auto; left: 16px; }

/* -------------------------------------------------------------------- RTL ---- */
/* La plupart des mises en page (topbar, cartes produit, ligne de panier...)
   utilisent flexbox et se retournent déjà toutes seules avec dir="rtl" (le
   sens "début/fin" de flexbox suit la direction du texte). Seules les
   propriétés physiques (left/right, translateX) ci-dessous ont besoin
   d'un correctif explicite. */
html[dir="rtl"] .hp-field { left: auto; right: -9999px; }

html[dir="rtl"] .drawer {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}
html[dir="rtl"] .drawer.open { transform: translateX(0); }

html[dir="rtl"] select {
    background-position: left 10px center;
}