/* ═══════════════════════════════════════════════════════════════ fp2-fiche-produit.css — Refonte fiche produit (entête + galerie carrousel + haut de colonne infos), chargé uniquement sur la page produit. Tout est scopé sous .fp2-page — aucun sélecteur global, aucune collision avec les préfixes existants (ico-pdp, fp-, pg-, sb-, rv-, rs-, bn-). ═══════════════════════════════════════════════════════════════ */ /* Variables au niveau :root (pas .fp2-page) : le sélecteur de pack (.fp2-packs, .fp2-pk...) est affiché à toutes les tailles d'écran, y compris en dehors de .fp2-page (voir plus bas), il a donc besoin de ces custom properties même quand .fp2-page est masqué. */ :root{ --fp2-vert:#0E8A4D; --fp2-vert-fonce:#0A6B3C; --fp2-vert-clair:#E7F5EE; --fp2-vert-pale:#F3FAF6; --fp2-encre:#14201A; --fp2-gris:#6B7A72; --fp2-ligne:#E4EAE6; --fp2-carte:#FFFFFF; --fp2-orange:#F59E0B; --fp2-or:#F5A623; --fp2-radius-xl:22px; --fp2-radius-lg:16px; --fp2-radius-md:12px; } /* Mode sombre — [data-theme="dark"] posé sur par themeInitScript() (config.php). En-tête + galerie + haut de colonne infos mobile (fp2-*) : système de tokens séparé du reste de la page, jamais couvert par les autres correctifs mode sombre. */ :root[data-theme="dark"]{ --fp2-encre:#f0f1f3; --fp2-gris:#9a9fa8; --fp2-ligne:#2a2e37; --fp2-carte:#1a1d24; } :root[data-theme="dark"] .fp2-page{background:#0f1115;} :root[data-theme="dark"] .fp2-h1-toggle{background:#1a1d24;} /* Entête, galerie et notation/titre/description/bénéfices/prix : mobile/tablette (≤1023px) uniquement — la maquette fournie est un mockup mobile ; au-delà, l'ancienne galerie/colonne infos (fp-, pg-) reste affichée telle quelle. Le sélecteur de pack fait exception : il est toujours visible (voir "Sélecteur de pack — toutes tailles d'écran" plus bas), il remplace "Nos offres" à la même place, à toutes les tailles. */ .fp2-page{display:block} .fp2-legacy-top{display:none} @media(min-width:1024px){ .fp2-page{display:none} .fp2-legacy-top{display:block} } .fp2-page{ font-family:'Montserrat',sans-serif; font-weight:500; color:var(--fp2-encre); background:#F6F8F7; } .fp2-page *{box-sizing:border-box;} /* ═══ ENTÊTE ═══ */ .fp2-hd{background:var(--fp2-carte);padding:14px 16px 10px;} .fp2-hd-row{display:flex;align-items:center;justify-content:space-between;} .fp2-hd-burger{width:22px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;cursor:pointer;background:none;border:none;padding:5px 0;} .fp2-hd-burger span{height:2.5px;background:var(--fp2-encre);border-radius:2px;display:block;} .fp2-hd-burger span:nth-child(2){width:70%;} /* Logo très réduit : doit tenir sur la même ligne que le cluster langue/devise/thème/panier/ burger à droite (5 éléments) sans déborder sur un écran de 360-375px de large — flex-shrink autorisé en secours (l'image a une largeur "auto", donc rétrécir sa hauteur suffit à la faire rentrer si jamais l'espace manque encore). */ .fp2-hd-logo{ display:flex;align-items:center;flex-shrink:1;min-width:0; } /* Même taille que .logo-icon (navbar page d'accueil) au même breakpoint mobile — voir assets/css/style.css: @media(max-width:768px){.logo-icon{height:36px}}. */ .fp2-hd-logo-img{ height:36px;width:auto;max-width:100%;display:block; } /* ── Boutons langue/devise/thème + panier, compacts pour tenir dans l'en-tête mobile ── */ .fp2-hd-actions{ display:flex;align-items:center;gap:4px;flex-shrink:0; } .fp2-hd-actions .lang-toggle{ font-size:.64rem;padding:3px 5px; } .fp2-hd-devise{ font-size:.64rem;padding:3px 5px; } .fp2-hd-theme{ width:25px;height:25px;font-size:.78rem; } .fp2-hd-cart{ width:26px;height:26px;border:1.5px solid var(--fp2-ligne);border-radius:8px; display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0; text-decoration:none;color:var(--fp2-encre); } .fp2-hd-cart-badge{ position:absolute;top:-6px;right:-6px; background:var(--fp2-vert);color:#fff;font-size:10px;font-weight:500; width:16px;height:16px;border-radius:50%; display:flex;align-items:center;justify-content:center; } .fp2-hd-cart-badge.fp2-hidden{display:none;} /* Bandeau livraison, avant la navbar (voir fiche-produit.php, juste après ) — défilement continu droite → gauche, EXACTEMENT le même mécanisme que .promo-banner de la page d'accueil (includes/navbar.php / assets/css/style.css) : piste dupliquée deux fois + translateX(0) → translateX(-50%) en boucle infinie. Élément et classes distincts (pas .promo-banner) pour ne jamais entrer en collision avec le bandeau promo générique du site si les deux sont actifs. */ .fp2-top-bandeau{ background:linear-gradient(90deg,#0b1a2b 0%,#00d084 40%,#fb2c36 100%); color:#fff;overflow:hidden; height:34px;display:flex;align-items:center; font-size:.82rem;font-weight:500; } .fp2-top-bandeau__track{display:flex;width:max-content;animation:fp2-top-scroll 25s linear infinite;} .fp2-top-bandeau__text{display:inline-block;padding-right:100vw;white-space:nowrap;flex-shrink:0;} @keyframes fp2-top-scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}} @media (prefers-reduced-motion:reduce){.fp2-top-bandeau__track{animation:none;}} /* ═══ GALERIE ═══ */ .fp2-gal{padding:12px 12px 0;} .fp2-gal-cadre{display:flex;gap:10px;align-items:stretch;} .fp2-gal-photo{position:relative;flex:1;aspect-ratio:1/1;border-radius:var(--fp2-radius-xl);overflow:hidden;background:#DCEAE2;} .fp2-gal-track{ display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; -webkit-overflow-scrolling:touch;scrollbar-width:none; } .fp2-gal-track::-webkit-scrollbar{display:none;} .fp2-gal-slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;background:#eef3f0;} .fp2-gal-slide img{width:100%;height:100%;object-fit:cover;display:block;} .fp2-gal-bestseller{ position:absolute;top:14px;left:14px;background:#fff;border-radius:999px; padding:7px 13px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500; box-shadow:0 4px 14px rgba(20,32,26,.12);z-index:2; } .fp2-gal-icon{ position:absolute;z-index:2;width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.92);border:none; display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:0 4px 14px rgba(20,32,26,.12);color:var(--fp2-encre); } .fp2-gal-icon--share{top:14px;right:14px;} .fp2-gal-icon--cart{bottom:14px;right:14px;} .fp2-gal-icon--cart.in-cart{background:var(--primary);color:#fff;} .fp2-gal-icon--cart.in-cart svg{stroke:#fff;} .fp2-gal-badges{flex:0 0 86px;display:flex;flex-direction:column;gap:10px;} .fp2-gb{ flex:1;background:#101C16;color:#fff;border-radius:16px;padding:10px 6px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center; } .fp2-gb svg{width:24px;height:24px;stroke:#8FD8B2;} .fp2-gb b{font-size:9.5px;font-weight:500;line-height:1.25;letter-spacing:.2px;} .fp2-gal-dots{display:flex;gap:6px;justify-content:center;padding:12px 0 4px;} .fp2-gal-dots i{width:7px;height:7px;border-radius:999px;background:#C8D4CD;transition:.2s;display:block;cursor:pointer;font-style:normal;} .fp2-gal-dots i.on{width:22px;background:var(--fp2-vert);} /* ═══ COLONNE INFOS ═══ */ .fp2-info{padding:16px 16px 8px;background:var(--fp2-carte);border-radius:24px 24px 0 0;margin-top:8px;} .fp2-note{display:flex;align-items:center;gap:8px;padding:16px 0 10px;font-size:14px;flex-wrap:wrap;} .fp2-stars{color:var(--fp2-or);font-size:16px;letter-spacing:1px;} .fp2-note b{font-weight:500;} .fp2-note .fp2-sep{color:var(--fp2-ligne);} .fp2-note .fp2-aime{color:var(--fp2-gris);} .fp2-note .fp2-aime b{color:var(--fp2-encre);} /* Nom produit sur 2 lignes + flèche accolée au dernier mot visible (comme un lien "en savoir plus" au fil du texte, cf. capture fournie) pour déplier le reste du nom si besoin — la flèche est un enfant inline du

(voir fiche-produit.php), pas un bouton séparé collé à droite. / .fp2-h1-wrap{padding:6px 0 8px;} / !important nécessaire : surcharge la règle globale "h1{font-size:28px/34px !important}" (assets/css/design-system.css, media queries mobile) qui cible le tag h1 lui-même / .fp2-h1{ font-family:'Montserrat',sans-serif !important; font-size:20px !important;font-weight:800 !important;line-height:1.2;margin:0 !important;color:var(--fp2-encre); letter-spacing:normal !important;text-shadow:none !important; flex:1;min-width:0; padding-right:26px;position:relative;box-sizing:border-box; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .fp2-h1-wrap.fp2-open .fp2-h1{-webkit-line-clamp:unset;overflow:visible;} .fp2-h1-toggle{ position:absolute;right:0;bottom:1px; display:inline-flex;align-items:center;justify-content:center; width:21px;height:21px; background:var(--fp2-vert-clair,#E7F5EE);border-radius:50%;border:none; color:var(--fp2-vert-fonce,#166534);cursor:pointer; transition:transform .2s; } .fp2-h1-wrap.fp2-open .fp2-h1-toggle{transform:rotate(180deg);} .fp2-desc{font-size:14.5px;color:var(--fp2-gris);line-height:1.6;padding-bottom:10px;margin:0;} .fp2-prix{display:flex;align-items:center;gap:10px;padding:4px 0 18px;flex-wrap:wrap;} / !important nécessaire : surcharge la règle globale ".price-display .price-fcfa" (assets/css/design-system.css, chargée avant, déjà !important à 36px/30px, verte, Montserrat) / .fp2-prix .fp2-actuel .price-display, .fp2-prix .fp2-actuel .price-fcfa{ font-size:22px !important;font-weight:500 !important;color:var(--fp2-encre) !important; font-family:'Montserrat',sans-serif !important; } .fp2-prix .fp2-ancien .price-display, .fp2-prix .fp2-ancien .price-fcfa{ font-size:15px !important;font-weight:500 !important;color:var(--fp2-gris) !important; text-decoration:line-through;font-family:'Montserrat',sans-serif !important; } .fp2-prix .fp2-save{ background:var(--fp2-vert-clair);color:var(--fp2-vert-fonce);font-size:12px;font-weight:500; padding:5px 10px;border-radius:999px;letter-spacing:.3px; } / ═══ Sélecteur de pack — toutes tailles d'écran (remplace "Nos offres", même emplacement) ═══ */ .fp2-packs-wrap{padding:10px 16px 16px;font-family:'Montserrat',sans-serif;} .fp2-packs-titre{font-size:16px;font-weight:800;padding-bottom:14px;color:var(--fp2-encre);} .fp2-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-bottom:8px;} .fp2-pk{ position:relative;border:1.5px solid var(--fp2-ligne);border-radius:var(--fp2-radius-lg); padding:10px 8px 12px;text-align:center;background:var(--fp2-carte);cursor:pointer; } .fp2-pk.fp2-pk--sel{border-color:var(--fp2-vert);background:var(--fp2-vert-pale);box-shadow:0 0 0 3px rgba(14,138,77,.12);} .fp2-pk.fp2-pk--ribbon{padding-bottom:34px;} .fp2-pk-tag{ position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:#14201A;color:#fff; font-size:9.5px;font-weight:500;letter-spacing:.5px;padding:4px 9px;border-radius:999px;white-space:nowrap; } .fp2-pk.fp2-pk--sel .fp2-pk-tag{background:var(--fp2-vert);} .fp2-pk-img{ height:64px;border-radius:10px;margin-bottom:8px;overflow:hidden; background:linear-gradient(150deg,#EAF3EE 0%,#CFE3D8 100%); } .fp2-pk-img img{width:100%;height:100%;object-fit:cover;display:block;} .fp2-pk-nom{font-size:13px;font-weight:500;padding-bottom:2px;color:var(--fp2-encre);} .fp2-pk-unite{font-size:11px;color:var(--fp2-gris);} .fp2-pk-unite .price-display, .fp2-pk-unite .price-fcfa{ font-size:11px !important;font-weight:500 !important;color:var(--fp2-gris) !important; font-family:'Montserrat',sans-serif !important; } .fp2-pk-save{ position:absolute;left:0;right:0;bottom:0;background:var(--fp2-orange);color:#fff; font-size:11px;font-weight:500;letter-spacing:.4px;padding:6px 0;border-radius:0 0 14px 14px; } .fp2-pk-save.fp2-best{background:var(--fp2-vert);}