/* ═══════════════════════════════════════════════════════════════ 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-). ═══════════════════════════════════════════════════════════════ */ @font-face{ font-family:'FP2 DM Sans'; src:url('../fonts/dm-sans.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; } @font-face{ font-family:'FP2 DM Serif Display'; src:url('../fonts/dm-serif-display.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } /* 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:'FP2 DM Sans','DM Sans',system-ui,sans-serif; 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:26px;display:flex;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px 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%;} .fp2-hd-logo{ font-family:'FP2 DM Serif Display','DM Serif Display',serif; font-size:24px;letter-spacing:.2px; display:flex;align-items:center;gap:6px; color:var(--fp2-encre);text-decoration:none; } .fp2-hd-logo .fp2-dot{ width:22px;height:22px;border-radius:50%;background:var(--fp2-vert); display:inline-flex;align-items:center;justify-content:center; color:#fff;font-family:'FP2 DM Sans','DM Sans',sans-serif;font-weight:700;font-size:13px; } .fp2-hd-logo em{font-style:normal;color:var(--fp2-vert);} .fp2-hd-cart{ width:34px;height:34px;border:1.5px solid var(--fp2-ligne);border-radius:10px; display:flex;align-items:center;justify-content:center;position:relative; 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:700; width:16px;height:16px;border-radius:50%; display:flex;align-items:center;justify-content:center; } .fp2-hd-cart-badge.fp2-hidden{display:none;} .fp2-hd-bandeau{ margin-top:12px;background:var(--fp2-vert-clair);border:1px solid #CBE8D8;border-radius:12px; padding:8px 0;display:flex;align-items:center; font-size:13px;font-weight:600;color:var(--fp2-vert-fonce); overflow:hidden;position:relative; } /* Un seul texte, aller-retour (pas de copie dupliquée qui se chevauche) : la distance et la durée sont calculées en JS selon le débordement réel (voir fiche-produit.php), via la variable --fp2-defile-x. Sans débordement, le texte reste simplement immobile et centré. */ .fp2-hd-defile{display:inline-block;white-space:nowrap;} .fp2-hd-defile span{display:inline-flex;align-items:center;gap:8px;} .fp2-hd-defile.fp2-hd-defile--scroll{animation:fp2-defile var(--fp2-defile-dur,10s) ease-in-out infinite alternate;} @keyframes fp2-defile{from{transform:translateX(0);}to{transform:translateX(var(--fp2-defile-x,0));}} .fp2-hd-bandeau:hover .fp2-hd-defile{animation-play-state:paused;} @media (prefers-reduced-motion:reduce){.fp2-hd-defile{animation:none !important;}} /* ═══ 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:700; 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--wish{bottom:14px;right:14px;} .fp2-gal-icon--wish.wishlisted{color:#e53935;} .fp2-gal-icon--wish.wishlisted svg{fill:#e53935;stroke:#e53935;} .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:600;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:10px 16px 0;background:var(--fp2-carte);border-radius:24px 24px 0 0;margin-top:8px;} .fp2-note{display:flex;align-items:center;gap:8px;padding:14px 0 6px;font-size:14px;flex-wrap:wrap;} .fp2-stars{color:var(--fp2-or);font-size:16px;letter-spacing:1px;} .fp2-note b{font-weight:700;} .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 toujours à droite (verticalement centrée sur le bloc) pour déplier le reste du nom si besoin. */ .fp2-h1-wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 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:'FP2 DM Serif Display','DM Serif Display',serif !important; font-size:23px !important;font-weight:400 !important;line-height:1.2;margin:0 !important;color:var(--fp2-encre); flex:1;min-width:0; 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{ flex-shrink:0;width:26px;height:26px;border-radius:50%; border:1.5px solid var(--fp2-ligne);background:#fff;color:var(--fp2-encre); display:flex;align-items:center;justify-content:center;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.55;padding-bottom:14px;margin:0;} .fp2-benef{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:16px;} .fp2-bf{display:flex;align-items:center;gap:10px;} .fp2-bf .fp2-bic{ width:38px;height:38px;border-radius:12px;background:var(--fp2-vert-clair); display:flex;align-items:center;justify-content:center;flex:0 0 auto; } .fp2-bf .fp2-bic svg{width:20px;height:20px;stroke:var(--fp2-vert-fonce);} .fp2-bf span{font-size:13.5px;font-weight:600;line-height:1.3;} .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, Poppins) */ .fp2-prix .fp2-actuel .price-display, .fp2-prix .fp2-actuel .price-fcfa{ font-size:22px !important;font-weight:700 !important;color:var(--fp2-encre) !important; font-family:'FP2 DM Sans','DM Sans',system-ui,sans-serif !important; } .fp2-prix .fp2-ancien .price-display, .fp2-prix .fp2-ancien .price-fcfa{ font-size:15px !important;font-weight:400 !important;color:var(--fp2-gris) !important; text-decoration:line-through;font-family:'FP2 DM Sans','DM Sans',system-ui,sans-serif !important; } .fp2-prix .fp2-save{ background:var(--fp2-vert-clair);color:var(--fp2-vert-fonce);font-size:12px;font-weight:700; 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:'FP2 DM Sans','DM Sans',system-ui,sans-serif;} .fp2-packs-titre{font-size:16px;font-weight:700;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:700;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:700;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:600 !important;color:var(--fp2-gris) !important; font-family:'FP2 DM Sans','DM Sans',system-ui,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:700;letter-spacing:.4px;padding:6px 0;border-radius:0 0 14px 14px; } .fp2-pk-save.fp2-best{background:var(--fp2-vert);}