: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;
    /* Même fond à pointillés que l'application de caisse Le Foyer Store,
       pour une continuité visuelle entre les deux (voir static/style.css
       de lefoyer-pos). Motif qui se répète naturellement (18px), léger et
       sans impact sur la lisibilité ni sur l'adaptation mobile/tablette. */
    background-color: var(--bg);
    background-image:
        radial-gradient(#D87E5C 0.6px, transparent 0.6px),
        radial-gradient(#5B90A5 0.6px, transparent 0.6px);
    background-size: 18px 18px;
    background-position: 0 0, 9px 9px;
    color: var(--ink);
    line-height: 1.4;
}

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

/* Bandeau + barre du haut regroupés dans un même conteneur "collant" :
   le bandeau "livraison gratuite" reste visible en permanence au-dessus
   de la barre, comme la barre elle-même (voir .free-shipping-banner). */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
}

.free-shipping-banner {
    background: var(--accent);
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.2px;
    padding: 7px 12px;
}
.free-shipping-banner .icon { margin-right: 6px; }
html[dir="rtl"] .free-shipping-banner .icon { margin-right: 0; margin-left: 6px; }

.topbar {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* flex-wrap : sur un très petit écran (téléphone étroit), le logo/nom
       et les 3 boutons (langue, contact, panier) ne tiennent pas toujours
       sur une seule ligne. Plutôt que de les compresser ou de déborder
       hors de l'écran, les boutons repassent proprement sur une deuxième
       ligne sous le logo. */
    flex-wrap: wrap;
    gap: 8px 12px;
}

.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;
    white-space: nowrap;
    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;
    white-space: nowrap;
}
.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 .price-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.product-card .price-original {
    color: var(--warn-ink);
    text-decoration: line-through;
    font-weight: 600;
    font-size: 0.82em;
}
.product-card .price-promo { color: var(--warn-ink); font-weight: 800; }
.promo-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--warn-ink);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 3px 8px;
    border-radius: 10px;
    pointer-events: none;
    z-index: 1;
}
html[dir="rtl"] .promo-badge { left: auto; right: 6px; }
/* Urgence marketing (compte a rebours + stock factice) : purement
   incitatif, voir app.js promoUrgencyHtml(). Style volontairement discret
   mais visible (rouge/orange coherent avec .promo-badge), sans etre plus
   gros que le prix. */
.promo-countdown {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--warn-ink);
    font-weight: 600;
}
.promo-countdown-clock {
    font-family: ui-monospace, "SF Mono", "Courier New", monospace;
    background: var(--warn-bg);
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}
.promo-stock-left {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--warn-ink);
}
.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;
}

/* Sélecteur couleur/motif (voir addToCart / openVariantDialog dans app.js) :
   même famille visuelle que la lightbox (overlay sombre plein écran) mais
   avec une boîte de dialogue claire, plus adaptée à une liste de choix
   qu'à une photo. */
.variant-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(32,29,27,0.55);
    display: none;
    z-index: 70;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.variant-dialog-overlay.open { display: flex; }
.variant-dialog-box {
    background: var(--panel);
    border-radius: 14px;
    padding: 18px;
    width: min(420px, 100%);
    max-height: 80vh;
    overflow-y: auto;
}
.variant-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 1.05rem;
}
.variant-dialog-header button.close {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--muted);
}
.variant-dialog-hint { color: var(--muted); font-size: 0.85rem; margin: 6px 0 14px; }
.variant-dialog-list { display: flex; flex-direction: column; gap: 8px; }
.variant-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    font-size: 0.95rem;
    cursor: pointer;
}
.variant-choice:hover { border-color: var(--accent); }
.variant-choice.unavailable { opacity: 0.5; cursor: not-allowed; }
.variant-choice .tag { font-size: 0.75rem; color: var(--muted); }
.variant-choice-main { display: flex; align-items: center; gap: 10px; }
.variant-choice-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--bg);
    flex-shrink: 0;
}
.variant-choice-thumb.placeholder { background: var(--border); }
.cart-line .variant { font-size: 0.8rem; color: var(--muted); }

[dir="rtl"] .variant-choice { text-align: right; }