/* ════════════════════════════════════════════════════════════
   ASWAQ JOMLA — offre.css  (v1.0.0)
   Page offre redesign — design Tirma + données 2026
   Repo : Aswaqjomla/aswaqjomla-assets
   Charger via :
   https://cdn.jsdelivr.net/gh/Aswaqjomla/aswaqjomla-assets@v1.0.0/offre.css
   (utiliser un tag versionné, pas @main — cache jsDelivr)
   Convention : tout est préfixé aj- et scopé sous .aj-offre-page
   ════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Inter:wght@400;500;600&family=Tajawal:wght@400;500;700&display=swap');

.aj-offre-page{
  --ink:#161310; --surface:#f7f4ef; --card:#ffffff;
  --accent:#c8522a; --accent-deep:#8f3517;
  --brass:#a87420; --brass-soft:#f4ead2;
  --border:#e6dfd6; --muted:#8a8078;
  --radius:16px; --shadow:0 2px 18px rgba(60,40,20,.08);
  font-family:'Inter',sans-serif;
  background:var(--surface);
  color:var(--ink);
  line-height:1.55;
  padding-bottom:92px; /* espace barre sticky */
}
.aj-offre-page *,.aj-offre-page *::before,.aj-offre-page *::after{box-sizing:border-box;}
.aj-ar{font-family:'Tajawal',sans-serif;}

.aj-wrap{max-width:960px;margin:0 auto;padding:0 18px;}

/* ── Fil d'ariane ── */
.aj-crumb{padding:14px 0 10px;font-size:12.5px;color:var(--muted);}
.aj-crumb a{color:var(--accent);text-decoration:none;font-weight:500;}
.aj-crumb span{margin:0 6px;color:#c9c1b8;}

/* ── Layout haut : galerie + résumé ──
   minmax(0,…) : les colonnes fr peuvent rétrécir sous leur contenu (fix overflow paysage)
   breakpoint 900px : téléphones en paysage restent en 1 colonne */
.aj-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;}
@media(max-width:900px){.aj-top{grid-template-columns:minmax(0,1fr);}}

/* ── Galerie ── */
.aj-gal{display:flex;flex-direction:column;gap:10px;}
.aj-gal-main{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  background:#efe5d6;box-shadow:var(--shadow);}
.aj-gal-main img{width:100%;height:100%;object-fit:cover;display:block;}
.aj-gal-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.aj-gal-thumb{aspect-ratio:1;border-radius:12px;overflow:hidden;background:#efe5d6;
  border:2px solid transparent;cursor:pointer;}
.aj-gal-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.aj-gal-thumb.active{border-color:var(--accent);}
.aj-gal-thumb.aj-empty{display:none;} /* masquer les vignettes sans image */

/* ── Résumé ── */
.aj-sum{display:flex;flex-direction:column;gap:14px;}
.aj-sum h1{font-family:'Syne',sans-serif;font-size:clamp(24px,4.5vw,34px);
  font-weight:800;line-height:1.1;margin:0;}

/* Bandeau combiné : offre validée + vendeur vérifié */
.aj-verified{display:flex;align-items:center;gap:10px;background:#e8f5ee;border:1px solid #bfe3cd;
  border-radius:12px;padding:10px 14px;width:fit-content;max-width:100%;}
.aj-verified .ico{width:26px;height:26px;border-radius:50%;background:#1d7a45;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;font-weight:700;}
.aj-verified b{font-size:13px;color:#1d7a45;display:block;}
.aj-verified small{font-size:11.5px;color:#3f7a58;display:block;}

/* Chips (type-commerce / type-vente / état / type-offre) */
.aj-chips{display:flex;flex-wrap:wrap;gap:8px;}
.aj-chip{background:var(--card);border:1px solid var(--border);border-radius:100px;padding:7px 14px;
  font-size:12.5px;font-weight:600;color:#5c544b;}
.aj-chip b{color:var(--ink);font-weight:700;}

/* Plaque prix + Quantité_minimum */
.aj-plaque{display:flex;align-items:stretch;border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);border:1px solid #e2d2ab;}
.aj-plaque-prix{flex:1;background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:#fff;padding:14px 18px;}
.aj-plaque-prix-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8;}
.aj-plaque-prix-val{font-family:'Syne',sans-serif;font-size:clamp(24px,5vw,30px);font-weight:800;line-height:1.1;}
.aj-plaque-prix-val small{font-size:.48em;font-weight:700;opacity:.9;margin-left:4px;}
.aj-plaque-moq{flex:0 0 auto;background:var(--brass-soft);color:#6e4d0e;padding:14px 18px;
  display:flex;flex-direction:column;justify-content:center;text-align:center;}
.aj-plaque-moq b{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;color:var(--brass);}
.aj-plaque-moq span{font-size:10.5px;font-weight:600;}
.aj-plaque-moq .aj-ar{font-size:11px;opacity:.85;}

/* Carte vendeur */
.aj-seller{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);text-decoration:none;color:inherit;
  transition:border-color .15s;}
.aj-seller:hover{border-color:var(--accent);}
.aj-seller-pic{width:46px;height:46px;border-radius:50%;background:#e5d9c4;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:10px;color:#b3a68f;}
.aj-seller-pic img{width:100%;height:100%;object-fit:cover;display:block;}
.aj-seller-name{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;}
.aj-seller-meta{font-size:12px;color:var(--muted);}
.aj-seller-go{margin-left:auto;color:var(--accent);font-weight:700;font-size:13px;white-space:nowrap;}

/* Têtes de section bilingues */
.aj-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:30px 0 12px;}
.aj-sec-title{font-family:'Syne',sans-serif;font-size:19px;font-weight:700;}
.aj-sec-title-ar{font-family:'Tajawal',sans-serif;font-size:15px;font-weight:500;color:var(--muted);direction:rtl;}

/* Description (dir=auto : FR ou Darija) */
.aj-desc{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);}
.aj-desc p{font-family:'Tajawal','Inter',sans-serif;font-size:16px;line-height:1.9;color:#3d362f;margin:0;}
.aj-desc p[dir="rtl"],.aj-desc p:dir(rtl){text-align:right;}

/* Vidéo (conditionnel — champ futur post-étape IA) */
.aj-video{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#241f19;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);}
.aj-video mux-player,.aj-video video,.aj-video iframe{position:absolute;inset:0;width:100%;height:100%;}
.aj-video-play{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.aj-video-note{position:absolute;bottom:12px;left:14px;color:#fff;font-size:12px;opacity:.85;}

/* Variantes : couleurs / tailles */
.aj-vars{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.aj-vars{grid-template-columns:1fr;}}
.aj-var-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:15px 16px;box-shadow:var(--shadow);}
.aj-var-title{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between;align-items:baseline;}
.aj-var-title .aj-ar{font-size:12.5px;text-transform:none;letter-spacing:0;}
.aj-var-chips{display:flex;flex-wrap:wrap;gap:8px;}
.aj-var-chip{background:var(--surface);border:1px solid var(--border);border-radius:100px;
  padding:6px 13px;font-size:12.5px;font-weight:600;color:#5c544b;display:inline-flex;align-items:center;gap:7px;}
.aj-dot{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:inline-block;}

/* Dimensions & poids */
.aj-dims-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:12px;}
.aj-dims-svg{width:100%;max-width:340px;height:auto;}
.aj-poids{background:var(--brass-soft);border:1px solid #e2d2ab;border-radius:100px;
  padding:8px 16px;font-size:13px;font-weight:600;color:#6e4d0e;}
.aj-poids b{color:var(--brass);}

/* Footer */
.aj-offre-footer{margin-top:44px;padding:22px 0 8px;text-align:center;font-size:12px;color:var(--muted);}

/* Barre d'action sticky — Commander uniquement */
.aj-actionbar{position:fixed;inset:auto 0 0 0;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));z-index:50;}
.aj-actionbar-in{max-width:960px;margin:0 auto;display:flex;gap:10px;}
.aj-btn{display:flex;align-items:center;justify-content:center;gap:9px;border-radius:14px;
  padding:15px 18px;font-family:'Syne',sans-serif;font-size:15.5px;font-weight:700;
  text-decoration:none;transition:transform .12s;cursor:pointer;border:none;}
.aj-btn:active{transform:scale(.98);}
.aj-btn-order{flex:1;background:var(--accent);color:#fff;box-shadow:0 4px 18px rgba(200,82,42,.3);}
.aj-btn-order:hover{background:var(--accent-deep);}
.aj-btn .aj-ar{font-family:'Tajawal',sans-serif;font-weight:500;font-size:13px;opacity:.9;}

@media (prefers-reduced-motion:reduce){.aj-offre-page *{transition:none!important;animation:none!important;}}

/* ════════════════════════════════════════════════════════════
   v1.0.1 — retours design (breadcrumb, badge, vidéo galerie,
   MOQ, reveal on scroll, sticky rotator)
   ════════════════════════════════════════════════════════════ */

/* [N1] Breadcrumb : forcer l'affichage en ligne (les Text Blocks Webflow sont block) */
.aj-crumb a,.aj-crumb span,.aj-crumb div,.aj-crumb p{display:inline;margin:0;}

/* [N3] Badge "Offre validée" en overlay haut-droite de l'image principale */
.aj-gal-badge{position:absolute;top:12px;right:12px;z-index:6;
  background:#e8f5ee;border:1px solid #bfe3cd;color:#1d7a45;
  border-radius:100px;padding:6px 12px;font-size:11.5px;font-weight:700;
  display:inline-flex;align-items:center;gap:5px;
  box-shadow:0 2px 10px rgba(20,60,35,.18);}
/* bandeau restant dans le résumé (présence physique) — version compacte */
.aj-verified{padding:8px 12px;}

/* [N2] Vidéo dans la galerie */
.aj-gal-video{position:absolute;inset:0;z-index:2;background:#241f19;display:none;}
.aj-gal-video.is-active{display:block;}
.aj-gal-video mux-player,.aj-gal-video video,.aj-gal-video iframe{width:100%;height:100%;object-fit:cover;}
.aj-gal-main img.is-hidden{visibility:hidden;}
.aj-gal-thumb--video{position:relative;background:#241f19;}
.aj-gal-thumb--video::after{content:"▶";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;color:#fff;
  background:rgba(20,15,10,.35);font-size:20px;border-radius:10px;pointer-events:none;}
/* 4 vignettes quand la vidéo existe */
.aj-gal-thumbs.has-video{grid-template-columns:repeat(4,1fr);}

/* [N5] MOQ de la plaque — classes explicites (indépendantes des balises Webflow) */
.aj-plaque-moq-val{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;
  color:var(--brass);display:block;line-height:1.1;margin:0;}
.aj-plaque-moq-label{font-size:10.5px;font-weight:600;display:block;margin:0;}
/* [N5b] anti-troncature du panneau MOQ (texte "min. commande" coupé sur mobile) */
.aj-plaque-prix{min-width:0;}
.aj-plaque-moq{flex:0 1 auto;min-width:96px;max-width:46%;padding:12px;}
.aj-plaque-moq span,.aj-plaque-moq .aj-plaque-moq-label{white-space:normal;line-height:1.25;}

/* [N6] Carte vendeur — métas en ligne sous le nom (gère plusieurs blocs .aj-seller-meta frères) */
.aj-seller-name{display:block;}
.aj-seller-meta{display:inline;margin:0;}
.aj-seller-meta > *{display:inline;}

/* [N9] Pill poids : forcer les blocs Webflow en ligne (ils s'empilaient sur 3 lignes) */
.aj-poids{display:inline-flex;align-items:baseline;gap:5px;flex-wrap:wrap;justify-content:center;}
.aj-poids > *,.aj-poids p,.aj-poids div,.aj-poids span{display:inline;margin:0;}
.aj-poids-val{color:var(--brass);font-weight:800;}

/* [N4+N7] Reveal on scroll (appliqué automatiquement par le script) */
.aj-reveal{opacity:0;transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--aj-delay,0s);}
.aj-reveal.is-in{opacity:1;transform:none;}
/* les chips apparaissent une par une */
.aj-chips.is-in .aj-chip{animation:aj-chip-pop .45s cubic-bezier(.22,.61,.36,1) both;}
.aj-chips.is-in .aj-chip:nth-child(1){animation-delay:.05s;}
.aj-chips.is-in .aj-chip:nth-child(2){animation-delay:.15s;}
.aj-chips.is-in .aj-chip:nth-child(3){animation-delay:.25s;}
.aj-chips.is-in .aj-chip:nth-child(4){animation-delay:.35s;}
@keyframes aj-chip-pop{from{opacity:0;transform:translateY(10px) scale(.94);}to{opacity:1;transform:none;}}

/* [N8] Sticky bar — rotation infinie des messages (si Quantité_minimum définie) */
.aj-btn-rotator{position:relative;flex:1;height:1.5em;overflow:hidden;display:block;}
.aj-btn-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;}
.aj-btn-msg:nth-child(1){animation:aj-swap-a 7s cubic-bezier(.45,0,.25,1) infinite;}
.aj-btn-msg:nth-child(2){animation:aj-swap-b 7s cubic-bezier(.45,0,.25,1) infinite;}
/* un seul message (pas de MOQ) → pas d'animation */
.aj-btn-msg:only-child{position:static;animation:none;}
@keyframes aj-swap-a{
  0%,40%{transform:translateY(0);opacity:1;}
  48%,90%{transform:translateY(-120%);opacity:0;}
  98%,100%{transform:translateY(0);opacity:1;}}
@keyframes aj-swap-b{
  0%,40%{transform:translateY(120%);opacity:0;}
  48%,90%{transform:translateY(0);opacity:1;}
  98%,100%{transform:translateY(120%);opacity:0;}}

/* ════════════════════════════════════════════════════════════
   v1.1.2 — vignettes scrollables quand la vidéo existe
   ════════════════════════════════════════════════════════════ */
.aj-gal-thumbs.has-video{display:flex;overflow-x:auto;gap:10px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding-bottom:4px;scrollbar-width:thin;}
.aj-gal-thumbs.has-video::-webkit-scrollbar{height:4px;}
.aj-gal-thumbs.has-video::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.aj-gal-thumbs.has-video .aj-gal-thumb{flex:0 0 76px;width:76px;scroll-snap-align:start;}

/* ════════════════════════════════════════════════════════════
   v1.1.3 — correctifs structure Webflow (source réel)
   ════════════════════════════════════════════════════════════ */
/* Prix "150 / MAD" en blocs empilés → une seule ligne */
.aj-plaque-prix-val{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.aj-plaque-prix-val > *{display:inline;}
/* Chips injectées dans .aj-var-title → passage à la ligne propre, sans uppercase */
.aj-var-title{flex-wrap:wrap;}
.aj-var-title .aj-var-chips{flex-basis:100%;margin-top:10px;}
.aj-var-chips{text-transform:none;letter-spacing:normal;font-weight:600;}
/* Messages sticky : contenus en blocs → en ligne */
.aj-btn-msg > *{display:inline;white-space:nowrap;}

/* ── média principal : 25rem, produit entier ── */
.aj-gal-main{height:25rem;aspect-ratio:auto;width:100%;}
.aj-gal-main img{object-fit:contain;background:#f3eee6;}
.aj-gal-thumb img{object-fit:cover;object-position:center;}
/* ── bouton vidéo ── */
.aj-video-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:10px;padding:13px 16px;border:1.5px solid var(--border);border-radius:13px;
  background:var(--card);font-family:'Syne',sans-serif;font-weight:700;font-size:14px;
  color:var(--ink);cursor:pointer;box-shadow:var(--shadow);transition:border-color .15s,color .15s;}
.aj-video-btn:hover{border-color:var(--accent);color:var(--accent);}
/* ── overlay plein écran ── */
.aj-video-overlay{position:fixed;inset:0;z-index:1000;background:rgba(15,12,9,.85);
  display:none;align-items:center;justify-content:center;padding:4vh 4vw;}
.aj-video-overlay.is-open{display:flex;}
.aj-video-overlay mux-player{width:min(92vw,900px);max-height:90vh;--media-object-fit:contain;
  background:#000;border-radius:14px;overflow:hidden;}
.aj-video-close{position:absolute;top:14px;right:16px;z-index:1001;background:rgba(255,255,255,.14);
  border:none;color:#fff;font-size:20px;width:42px;height:42px;border-radius:50%;cursor:pointer;}
body.aj-no-scroll{overflow:hidden;}