/* ============================================================
SANTÉ VERTE — front.css
Overrides Bootstrap 5.3 + composants conversion e-commerce
Mobile-first — Charte : Vert #0e6d4a + Or #ffd700
============================================================ */
/* === Design Tokens === */
:root {
--sv-primary: #0e6d4a;
--sv-primary-light: #12855a;
--sv-primary-tint: rgba(14, 109, 74, 0.08);
--sv-accent: #ffd700;
--sv-accent-dark: #d4b200;
--sv-accent-tint: rgba(255, 215, 0, 0.12);
--sv-dark: #085041;
--sv-success: #3b6d11;
--sv-danger: #a32d2d;
--sv-info: #185fa5;
--sv-gray-50: #f9fafb;
--sv-gray-100: #e5e7eb;
--sv-gray-700: #374151;
--sv-gray-900: #111827;
--sv-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--sv-shadow-md:
0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
--sv-shadow-lg:
0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.06);
--sv-shadow-xl:
0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.08);
}
/* === Base overrides === */
html,
body {
/* Barrière ultime anti-overflow : quelle que soit la source d'un
contenu débordant (description pastée, image mal dimensionnée,
composant tiers), le document ne scrolle jamais horizontalement. */
overflow-x: hidden;
max-width: 100%;
}
body {
font-family:
system-ui,
-apple-system,
sans-serif;
color: var(--sv-gray-900);
-webkit-font-smoothing: antialiased;
background: #fff;
}
a {
color: var(--sv-primary);
transition: color 150ms;
}
a:hover {
color: var(--sv-dark);
}
.sv-hidden {
display: none !important;
}
/* Titres — typographie forte */
h1,
h2,
h3 {
letter-spacing: -0.01em;
}
/* ============================================================
BOOTSTRAP OVERRIDES — Charte Santé Verte
============================================================ */
/* Boutons primaires verts */
.btn-primary {
background: linear-gradient(
135deg,
var(--sv-primary) 0%,
var(--sv-primary-light) 100%
);
border: none;
box-shadow: 0 4px 12px rgba(14, 109, 74, 0.25);
font-weight: 600;
}
.btn-primary:hover {
background: linear-gradient(
135deg,
var(--sv-dark) 0%,
var(--sv-primary) 100%
);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(14, 109, 74, 0.35);
}
.btn-outline-primary {
color: var(--sv-primary);
border-color: var(--sv-primary);
font-weight: 600;
}
.btn-outline-primary:hover {
background: var(--sv-primary);
border-color: var(--sv-primary);
}
/* Bouton accent or */
.btn-warning {
background: linear-gradient(
135deg,
var(--sv-accent) 0%,
var(--sv-accent-dark) 100%
);
border: none;
color: var(--sv-gray-900);
font-weight: 700;
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}
.btn-warning:hover {
transform: translateY(-1px);
color: var(--sv-gray-900);
}
/* Cards */
.card {
border: none;
border-radius: 1rem;
box-shadow: var(--sv-shadow-md);
}
/* Forms : voir sv-forms.css (fichier partagé front + admin) */
/* ============================================================
NOTICE BAR — Bandeau animé
============================================================ */
.sv-notice-bar {
background: linear-gradient(
90deg,
var(--sv-dark) 0%,
var(--sv-primary) 50%,
var(--sv-dark) 100%
);
color: #fff;
padding: 0.5rem 0;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.03em;
overflow: hidden;
position: relative;
}
.sv-notice-bar .container {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.sv-notice-bar__icon {
width: 22px;
height: 22px;
background: rgba(255, 215, 0, 0.2);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.6875rem;
flex-shrink: 0;
color: var(--sv-accent);
}
.sv-notice-bar__text {
white-space: nowrap;
}
/* ============================================================
HEADER — Logo centré, navigation et actions
============================================================ */
/* ============================================================
HEADER — Navbar sticky glassmorphism
============================================================ */
.sv-header {
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
z-index: 1030;
border-bottom: 1px solid rgba(229, 231, 235, 0.5);
transition: box-shadow 0.4s, border-color 0.4s;
}
.sv-header.is-scrolled {
box-shadow: 0 4px 24px rgba(14, 109, 74, 0.06);
border-bottom-color: transparent;
}
/* Ligne accent dorée au scroll */
.sv-header::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--sv-accent), var(--sv-primary), var(--sv-accent), transparent);
opacity: 0;
transition: opacity 0.4s;
}
.sv-header.is-scrolled::after {
opacity: 0.5;
}
.sv-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0;
gap: 1.5rem;
}
/* Logo — identité forte */
.sv-header__logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex-shrink: 0;
position: relative;
}
.sv-header__logo img {
height: 44px;
width: auto;
filter: drop-shadow(0 2px 6px rgba(14, 109, 74, 0.12));
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s;
}
.sv-header__logo:hover img {
transform: scale(1.08) rotate(-2deg);
filter: drop-shadow(0 4px 12px rgba(14, 109, 74, 0.2));
}
.sv-header__logo-name {
font-size: 1.125rem;
font-weight: 800;
color: var(--sv-primary);
letter-spacing: -0.02em;
line-height: 1.1;
}
@media (min-width: 992px) {
.sv-header__logo img { height: 48px; }
.sv-header__logo-name { font-size: 1.25rem; }
}
/* Séparateur logo / nav */
@media (min-width: 992px) {
.sv-header__logo::after {
content: "";
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 28px;
background: var(--sv-gray-100);
}
.sv-header__inner { gap: 2rem; }
}
/* Navigation desktop — conteneur pill */
.sv-header__nav {
display: none;
align-items: center;
gap: 4px;
background: var(--sv-gray-50);
border-radius: 50px;
padding: 4px;
border: 1px solid rgba(229, 231, 235, 0.6);
}
@media (min-width: 992px) {
.sv-header__nav { display: flex; }
}
.sv-nav-link {
color: var(--sv-gray-700);
font-weight: 600;
font-size: 0.8125rem;
padding: 7px 16px;
border-radius: 50px;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
white-space: nowrap;
}
.sv-nav-link:hover {
color: var(--sv-primary);
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.sv-nav-link.is-active {
color: #fff;
background: var(--sv-primary);
box-shadow: 0 2px 8px rgba(14, 109, 74, 0.25);
font-weight: 700;
}
/* Bouton Boutique mis en avant */
.sv-nav-link--shop {
color: var(--sv-primary);
font-weight: 700;
}
.sv-nav-link--shop:not(.is-active):hover {
background: rgba(14, 109, 74, 0.08);
}
/* Actions droite */
.sv-header__actions {
display: flex;
align-items: center;
gap: 8px;
}
.sv-header__whatsapp {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
color: #fff;
background: #25d366;
text-decoration: none;
box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s;
}
.sv-header__whatsapp:hover {
transform: scale(1.1);
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
color: #fff;
}
/* Burger mobile */
.sv-header__burger {
width: 44px;
height: 44px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background: none;
border: 1.5px solid var(--sv-gray-100);
border-radius: 12px;
cursor: pointer;
padding: 0;
transition: border-color 0.2s, background 0.2s;
}
@media (min-width: 992px) {
.sv-header__burger { display: none; }
}
.sv-header__burger:hover {
border-color: var(--sv-primary);
background: rgba(14, 109, 74, 0.04);
}
.sv-header__burger-line {
display: block;
width: 18px;
height: 2px;
background: var(--sv-gray-900);
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
transform-origin: center;
}
.sv-header__burger.is-open .sv-header__burger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
background: var(--sv-primary);
}
.sv-header__burger.is-open .sv-header__burger-line:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.sv-header__burger.is-open .sv-header__burger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
background: var(--sv-primary);
}
/* ============================================================
DRAWER MOBILE — slide-in droite avec cascade
============================================================ */
.sv-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 1040;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s;
}
.sv-drawer-overlay.is-open {
opacity: 1;
visibility: visible;
}
.sv-drawer {
position: fixed;
top: 0;
right: 0;
width: 300px;
max-width: 85vw;
height: 100vh;
height: 100dvh;
background: #fff;
z-index: 1050;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
box-shadow: -12px 0 48px rgba(0, 0, 0, 0.12);
}
.sv-drawer.is-open {
transform: translateX(0);
}
.sv-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--sv-gray-100);
background: linear-gradient(135deg, rgba(14, 109, 74, 0.03) 0%, transparent 100%);
}
.sv-drawer__logo {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.sv-drawer__logo img {
height: 36px;
width: auto;
}
.sv-drawer__logo span {
font-size: 1rem;
font-weight: 800;
color: var(--sv-primary);
}
.sv-drawer__close {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: var(--sv-gray-50);
color: var(--sv-gray-700);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
cursor: pointer;
transition: background 0.2s, color 0.2s, transform 0.2s;
}
.sv-drawer__close:hover {
background: rgba(14, 109, 74, 0.08);
color: var(--sv-primary);
transform: rotate(90deg);
}
.sv-drawer__nav {
flex: 1;
padding: 1.25rem 1rem;
display: flex;
flex-direction: column;
gap: 4px;
overflow-y: auto;
}
/* Liens avec animation cascade */
.sv-drawer__link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
color: var(--sv-gray-700);
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
border-radius: 14px;
transition: background 0.2s, color 0.2s, transform 0.2s;
opacity: 0;
transform: translateX(20px);
}
.sv-drawer.is-open .sv-drawer__link {
opacity: 1;
transform: translateX(0);
}
.sv-drawer.is-open .sv-drawer__link:nth-child(1) { transition-delay: 0.05s; }
.sv-drawer.is-open .sv-drawer__link:nth-child(2) { transition-delay: 0.1s; }
.sv-drawer.is-open .sv-drawer__link:nth-child(3) { transition-delay: 0.15s; }
.sv-drawer.is-open .sv-drawer__link:nth-child(4) { transition-delay: 0.2s; }
.sv-drawer.is-open .sv-drawer__link:nth-child(5) { transition-delay: 0.25s; }
.sv-drawer__link-icon {
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--sv-gray-50);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
color: var(--sv-primary);
flex-shrink: 0;
transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.sv-drawer__link:hover {
background: rgba(14, 109, 74, 0.04);
color: var(--sv-primary);
}
.sv-drawer__link:hover .sv-drawer__link-icon {
background: rgba(14, 109, 74, 0.1);
box-shadow: 0 2px 8px rgba(14, 109, 74, 0.1);
}
.sv-drawer__link.is-active {
color: var(--sv-primary);
background: rgba(14, 109, 74, 0.04);
font-weight: 700;
}
.sv-drawer__link.is-active .sv-drawer__link-icon {
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(14, 109, 74, 0.25);
}
.sv-drawer__footer {
padding: 1rem 1.25rem;
border-top: 1px solid var(--sv-gray-100);
}
.sv-drawer__whatsapp {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px;
background: linear-gradient(135deg, #25d366 0%, #128c48 100%);
color: #fff;
border-radius: 14px;
font-size: 0.875rem;
font-weight: 700;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
min-height: 50px;
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25);
}
.sv-drawer__whatsapp:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
color: #fff;
}
/* ============================================================
HERO ACCUEIL — Impact et conversion
============================================================ */
.sv-hero {
background: linear-gradient(
135deg,
var(--sv-primary) 0%,
#1a8f62 40%,
var(--sv-dark) 100%
);
color: #fff;
padding: 4rem 0 3.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.sv-hero::before {
content: "";
position: absolute;
top: -40%;
right: -15%;
width: 400px;
height: 400px;
background: radial-gradient(
circle,
rgba(255, 215, 0, 0.1) 0%,
transparent 70%
);
border-radius: 50%;
pointer-events: none;
}
.sv-hero::after {
content: "";
position: absolute;
bottom: -30%;
left: -10%;
width: 300px;
height: 300px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.05) 0%,
transparent 70%
);
border-radius: 50%;
pointer-events: none;
}
.sv-hero__title {
font-size: 2.25rem;
font-weight: 800;
margin-bottom: 0.625rem;
position: relative;
z-index: 1;
}
.sv-hero__title span {
color: var(--sv-accent);
text-shadow: 0 2px 12px rgba(255, 215, 0, 0.3);
}
.sv-hero__sub {
font-size: 1.0625rem;
opacity: 0.85;
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.sv-hero .btn-warning {
padding: 0.75rem 2.5rem;
border-radius: 50px;
font-size: 1rem;
position: relative;
z-index: 1;
box-shadow: 0 6px 20px rgba(255, 215, 0, 0.35);
transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-hero .btn-warning:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 10px 28px rgba(255, 215, 0, 0.45);
}
@media (min-width: 992px) {
.sv-hero {
padding: 5rem 0 4.5rem;
}
.sv-hero__title {
font-size: 3rem;
}
.sv-hero__sub {
font-size: 1.125rem;
}
}
/* ============================================================
BANDEAU DE CONFIANCE — 4 piliers
============================================================ */
.sv-trust-bar {
background: #fff;
border-bottom: 1px solid var(--sv-gray-100);
padding: 1.5rem 0;
position: relative;
}
.sv-trust-bar::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(
90deg,
transparent,
rgba(255, 215, 0, 0.3),
transparent
);
}
.sv-trust-bar__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.sv-trust-bar__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.sv-trust-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
border-radius: 12px;
transition: all 200ms;
}
.sv-trust-item:hover {
background: var(--sv-primary-tint);
}
.sv-trust-item__icon {
width: 44px;
height: 44px;
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
color: #fff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(14, 109, 74, 0.15);
}
.sv-trust-item strong {
display: block;
font-size: 0.8125rem;
font-weight: 700;
color: var(--sv-gray-900);
line-height: 1.2;
}
.sv-trust-item span {
font-size: 0.6875rem;
color: var(--sv-gray-700);
}
/* Lien "Voir tout" dans les headers de section */
.sv-section-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--sv-primary);
text-decoration: none;
transition: all 150ms;
}
.sv-section-link:hover {
color: var(--sv-dark);
gap: 0.5rem;
}
.sv-section-badge {
display: inline-flex;
align-items: center;
font-size: 0.75rem;
font-weight: 600;
color: var(--sv-primary);
background: rgba(14, 109, 74, 0.06);
border: 1px solid rgba(14, 109, 74, 0.12);
border-radius: 20px;
padding: 4px 12px;
white-space: nowrap;
}
/* Header section accueil — centré, léger */
.sv-home-section-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
position: relative;
}
.sv-home-section-header::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--sv-primary), var(--sv-accent));
border-radius: 2px;
}
.sv-home-section-header__title {
font-size: 1.75rem;
font-weight: 800;
color: var(--sv-gray-900);
margin: 0 0 0.375rem;
}
@media (min-width: 992px) {
.sv-home-section-header__title {
font-size: 2rem;
}
}
.sv-home-section-header__subtitle {
font-size: 0.9375rem;
color: var(--sv-gray-700);
margin: 0 0 1rem;
}
.sv-home-section-header__link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--sv-primary);
text-decoration: none;
padding: 0.5rem 1.25rem;
border: 1.5px solid var(--sv-primary);
border-radius: 50px;
transition: all 200ms;
}
.sv-home-section-header__link:hover {
background: var(--sv-primary);
color: #fff;
gap: 0.625rem;
}
/* ============================================================
PAGE BOUTIQUE — Hero + Filtres + Grille + Cards
============================================================ */
/* Hero boutique — produit vedette */
.sv-shop-hero {
background: linear-gradient(135deg, #f0faf5 0%, #e8f5ee 50%, var(--sv-gray-50) 100%);
padding: 1.25rem 0 1.5rem;
position: relative;
overflow: hidden;
}
/* Fil d'Ariane */
.sv-shop-hero__breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
color: var(--sv-gray-700);
margin-bottom: 0.75rem;
}
.sv-shop-hero__breadcrumb a {
color: var(--sv-primary);
text-decoration: none;
font-weight: 500;
}
.sv-shop-hero__breadcrumb a:hover { color: var(--sv-dark); }
.sv-shop-hero__breadcrumb span i {
font-size: 0.5rem;
opacity: 0.4;
}
/* Row : texte gauche + carte vedette droite */
.sv-shop-hero__row {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (min-width: 768px) {
.sv-shop-hero__row {
flex-direction: row;
align-items: center;
gap: 2.5rem;
}
}
/* Contenu texte */
.sv-shop-hero__content {
flex: 1;
min-width: 0;
}
.sv-shop-hero__tagline {
display: inline-block;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sv-primary);
background: rgba(14, 109, 74, 0.08);
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 0.5rem;
}
.sv-shop-hero__title {
color: var(--sv-gray-900);
font-size: 1.75rem;
font-weight: 800;
margin: 0 0 0.5rem;
line-height: 1.15;
}
.sv-shop-hero__subtitle {
color: var(--sv-gray-700);
font-size: 0.875rem;
margin: 0 0 1rem;
max-width: 420px;
line-height: 1.5;
}
@media (min-width: 992px) {
.sv-shop-hero__title { font-size: 2.25rem; }
}
/* Barre de recherche */
.sv-shop-hero__search {
position: relative;
max-width: 400px;
}
.sv-shop-hero__search i {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--sv-gray-700);
font-size: 1rem;
}
.sv-shop-hero__search input {
width: 100%;
padding: 0.75rem 1rem 0.75rem 2.75rem;
border: 1.5px solid var(--sv-gray-100);
border-radius: 50px;
font-size: 16px;
font-family: inherit;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: border-color 200ms, box-shadow 200ms;
}
.sv-shop-hero__search input:focus {
outline: none;
border-color: var(--sv-primary);
box-shadow: 0 4px 16px rgba(14, 109, 74, 0.1), 0 0 0 3px rgba(14, 109, 74, 0.08);
}
.sv-shop-hero__search input::placeholder { color: #9ca3af; }
/* Dropdown résultats recherche */
.sv-search-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: #fff;
border: 1.5px solid var(--sv-gray-100);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
max-height: 360px;
overflow-y: auto;
z-index: 100;
display: none;
}
.sv-search-dropdown.is-open {
display: block;
}
.sv-search-dropdown__item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
text-decoration: none;
color: inherit;
transition: background 0.15s;
border-bottom: 1px solid var(--sv-gray-100);
}
.sv-search-dropdown__item:last-child {
border-bottom: none;
}
.sv-search-dropdown__item:first-child {
border-radius: 13px 13px 0 0;
}
.sv-search-dropdown__item:last-child {
border-radius: 0 0 13px 13px;
}
.sv-search-dropdown__item:only-child {
border-radius: 13px;
}
.sv-search-dropdown__item:hover {
background: var(--sv-gray-50);
}
.sv-search-dropdown__img {
width: 48px;
height: 48px;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
background: var(--sv-gray-50);
}
.sv-search-dropdown__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sv-search-dropdown__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--sv-gray-700);
opacity: 0.3;
}
.sv-search-dropdown__info {
flex: 1;
min-width: 0;
}
.sv-search-dropdown__name {
display: block;
font-size: 0.8125rem;
font-weight: 600;
color: var(--sv-gray-900);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sv-search-dropdown__prices {
display: flex;
align-items: center;
gap: 6px;
margin-top: 2px;
}
.sv-search-dropdown__price {
font-size: 0.8125rem;
font-weight: 700;
color: var(--sv-primary);
}
.sv-search-dropdown__old-price {
font-size: 0.6875rem;
color: var(--sv-gray-700);
text-decoration: line-through;
opacity: 0.6;
}
.sv-search-dropdown__empty {
padding: 1.5rem;
text-align: center;
font-size: 0.8125rem;
color: var(--sv-gray-700);
}
.sv-search-dropdown__empty i {
margin-right: 4px;
opacity: 0.5;
}
/* Carte produit vedette */
/* Groupe de produits vedettes — 1 visible mobile, 2 côte à côte dès md */
.sv-shop-hero__featured-group {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
}
/* Mobile : masquer le 2e produit (pas assez de place, trop de scroll) */
@media (max-width: 767.98px) {
.sv-shop-hero__featured-group > .sv-shop-hero__featured:nth-child(n+2) {
display: none;
}
}
/* Tablette + : 2 cartes côte à côte partagent l'espace du hero */
@media (min-width: 768px) {
.sv-shop-hero__featured-group {
flex-direction: row;
gap: 1rem;
flex: 1;
}
.sv-shop-hero__featured-group .sv-shop-hero__featured {
max-width: none;
flex: 1 1 0;
min-width: 0;
margin: 0;
}
}
@media (min-width: 992px) {
.sv-shop-hero__featured-group {
gap: 1.25rem;
}
}
.sv-shop-hero__featured {
flex-shrink: 0;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 20px;
border: 1.5px solid var(--sv-gray-100);
overflow: hidden;
text-decoration: none;
color: inherit;
box-shadow: 0 8px 32px rgba(14, 109, 74, 0.08);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
width: 100%;
}
.sv-shop-hero__featured:hover {
transform: translateY(-6px);
box-shadow: 0 16px 48px rgba(14, 109, 74, 0.14);
color: inherit;
}
@media (min-width: 576px) {
.sv-shop-hero__featured {
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 768px) {
.sv-shop-hero__featured { max-width: 300px; margin: 0; }
}
@media (min-width: 992px) {
.sv-shop-hero__featured { max-width: 320px; }
}
.sv-shop-hero__featured-img {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: var(--sv-gray-50);
}
.sv-shop-hero__featured-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-shop-hero__featured:hover .sv-shop-hero__featured-img img {
transform: scale(1.05);
}
.sv-shop-hero__featured-savings {
position: absolute;
top: 12px;
right: 12px;
background: var(--sv-danger);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 6px;
}
/* Info dans la carte vedette */
.sv-shop-hero__featured-info {
padding: 14px 16px 16px;
}
.sv-shop-hero__featured-label {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--sv-primary);
margin-bottom: 4px;
}
.sv-shop-hero__featured-name {
font-size: 0.9375rem;
font-weight: 700;
color: var(--sv-gray-900);
margin: 0 0 6px;
line-height: 1.3;
}
.sv-shop-hero__featured-prices {
display: flex;
align-items: center;
gap: 0.5rem;
}
.sv-shop-hero__featured-price {
font-size: 1.125rem;
font-weight: 800;
color: var(--sv-primary);
}
.sv-shop-hero__featured-old {
font-size: 0.8125rem;
color: var(--sv-gray-700);
text-decoration: line-through;
opacity: 0.6;
}
/* Compteur dans les filtres */
.sv-shop-filter__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
background: rgba(14, 109, 74, 0.15);
color: var(--sv-primary);
font-size: 0.6875rem;
font-weight: 700;
border-radius: 50px;
padding: 0 6px;
margin-left: 4px;
}
.sv-shop-filter.is-active .sv-shop-filter__count {
background: rgba(255, 255, 255, 0.25);
color: #fff;
}
/* Toolbar — compteur + tri */
.sv-shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
flex-wrap: wrap;
gap: 0.75rem;
}
.sv-shop-sort {
display: flex;
align-items: center;
gap: 0.375rem;
}
.sv-shop-sort label {
color: var(--sv-gray-700);
font-size: 0.875rem;
margin: 0;
cursor: pointer;
}
.sv-shop-sort__select {
border: 1.5px solid var(--sv-gray-100);
border-radius: 8px;
padding: 0.375rem 0.75rem;
font-size: 0.8125rem;
font-family: inherit;
color: var(--sv-gray-700);
background: #fff;
cursor: pointer;
transition: border-color 200ms;
min-height: 44px;
}
.sv-shop-sort__select:focus {
outline: none;
border-color: var(--sv-primary);
}
/* Badge livraison gratuite sur les cards */
.sv-shop-card__delivery {
position: absolute;
bottom: 0.5rem;
left: 0.5rem;
background: var(--sv-primary);
color: #fff;
font-size: 0.5625rem;
font-weight: 700;
padding: 0.2rem 0.5rem;
border-radius: 4px;
z-index: 2;
display: flex;
align-items: center;
gap: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
/* Aucun résultat recherche */
.sv-shop-no-results {
text-align: center;
padding: 3rem 1rem;
color: var(--sv-gray-700);
}
.sv-shop-no-results i {
font-size: 2rem;
opacity: 0.3;
margin-bottom: 0.75rem;
display: block;
}
/* Bandeau CTA avant footer */
.sv-shop-cta {
padding: 0 1rem;
margin-bottom: 0;
}
.sv-shop-cta__inner {
max-width: 1200px;
margin: 0 auto;
background: linear-gradient(
135deg,
var(--sv-primary) 0%,
#1a8f62 40%,
var(--sv-dark) 100%
);
border-radius: 16px;
padding: 2rem 2.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
position: relative;
overflow: hidden;
}
.sv-shop-cta__inner::before {
content: "";
position: absolute;
top: -40%;
right: -5%;
width: 200px;
height: 200px;
background: radial-gradient(
circle,
rgba(255, 215, 0, 0.1) 0%,
transparent 70%
);
border-radius: 50%;
pointer-events: none;
}
.sv-shop-cta__text {
position: relative;
z-index: 1;
}
.sv-shop-cta__text h3 {
color: #fff;
font-size: 1.25rem;
font-weight: 800;
margin: 0 0 0.375rem;
}
.sv-shop-cta__text p {
color: rgba(255, 255, 255, 0.75);
font-size: 0.875rem;
margin: 0;
max-width: 450px;
}
.sv-shop-cta__btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 2rem;
background: #25d366;
color: #fff;
border: none;
border-radius: 50px;
font-size: 0.9375rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
position: relative;
z-index: 1;
}
.sv-shop-cta__btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
color: #fff;
}
@media (max-width: 575.98px) {
.sv-shop-cta__inner {
padding: 1.5rem;
}
.sv-shop-cta__btn {
width: 100%;
justify-content: center;
}
}
/* Section boutique */
.sv-shop {
padding: 2.5rem 0 0;
}
/* Filtres catégories */
.sv-shop-filters {
display: flex;
gap: 0.5rem;
overflow-x: auto;
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sv-shop-filters::-webkit-scrollbar {
display: none;
}
.sv-shop-filter {
padding: 0.5rem 1.25rem;
border: 1.5px solid var(--sv-gray-100);
border-radius: 50px;
background: #fff;
font-size: 0.8125rem;
font-weight: 600;
color: var(--sv-gray-700);
cursor: pointer;
white-space: nowrap;
transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
min-height: 44px;
}
.sv-shop-filter:hover {
border-color: var(--sv-primary);
color: var(--sv-primary);
background: var(--sv-primary-tint);
}
.sv-shop-filter.is-active {
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 12px rgba(14, 109, 74, 0.25);
transform: scale(1.02);
}
/* Compteur */
.sv-shop-meta {
margin-bottom: 1.25rem;
}
.sv-shop-count {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: var(--sv-primary);
font-weight: 600;
background: var(--sv-primary-tint);
padding: 0.375rem 0.875rem;
border-radius: 50px;
border: 1px solid rgba(14, 109, 74, 0.1);
}
/* Grille produits */
.sv-shop-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (min-width: 768px) {
.sv-shop-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
}
@media (min-width: 992px) {
.sv-shop-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* Card produit — style Tchefon */
.sv-shop-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
border: 1.5px solid var(--sv-gray-100);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.sv-shop-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
opacity: 0;
box-shadow:
0 16px 32px rgba(14, 109, 74, 0.12),
0 0 0 1.5px rgba(255, 215, 0, 0.4);
transition: opacity 300ms;
pointer-events: none;
}
.sv-shop-card:hover {
transform: translateY(-6px);
border-color: transparent;
color: inherit;
}
.sv-shop-card:hover::after {
opacity: 1;
}
/* Image */
.sv-shop-card__img {
position: relative;
overflow: hidden;
background: var(--sv-gray-50);
aspect-ratio: 1;
}
.sv-shop-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-shop-card:hover .sv-shop-card__img img {
transform: scale(1.06);
}
.sv-shop-card__placeholder {
width: 100%;
height: 100%;
background: var(--sv-gray-100);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--sv-gray-700);
opacity: 0.3;
}
.sv-shop-card__badge {
position: absolute;
top: 0.625rem;
left: 0.625rem;
background: var(--sv-danger);
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
padding: 0.25rem 0.625rem;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.03em;
z-index: 2;
animation: sv-badge-pulse 2s ease-in-out infinite;
}
@keyframes sv-badge-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* Badge économie (pourcentage) */
.sv-shop-card__savings {
position: absolute;
top: 0.625rem;
right: 0.625rem;
background: var(--sv-accent);
color: var(--sv-gray-900);
font-size: 0.625rem;
font-weight: 800;
padding: 0.2rem 0.5rem;
border-radius: 6px;
z-index: 2;
}
/* Corps de la card */
.sv-shop-card__body {
padding: 1rem;
display: flex;
flex-direction: column;
flex: 1;
}
@media (max-width: 575.98px) {
.sv-shop-card__body {
padding: 0.75rem;
}
}
.sv-shop-card__category {
font-size: 0.6875rem;
font-weight: 600;
color: var(--sv-primary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.25rem;
}
.sv-shop-card__name {
font-size: 0.875rem;
font-weight: 700;
color: var(--sv-gray-900);
margin: 0 0 0.5rem;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sv-shop-card__prices {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
.sv-shop-card__price {
font-size: 1rem;
font-weight: 800;
color: var(--sv-primary);
}
.sv-shop-card__old-price {
font-size: 0.75rem;
color: #9ca3af;
text-decoration: line-through;
text-decoration-color: var(--sv-danger);
text-decoration-thickness: 1.5px;
}
/* Alertes stock */
.sv-shop-card__stock-alert {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.6875rem;
font-weight: 700;
color: var(--sv-danger);
margin-bottom: 0.5rem;
background: rgba(163, 45, 45, 0.06);
padding: 0.2rem 0.5rem;
border-radius: 4px;
}
.sv-shop-card__stock-out {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.6875rem;
font-weight: 600;
color: var(--sv-gray-700);
margin-bottom: 0.5rem;
background: var(--sv-gray-50);
padding: 0.2rem 0.5rem;
border-radius: 4px;
}
/* CTA */
.sv-shop-card__cta {
display: block;
text-align: center;
padding: 0.625rem;
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
color: #fff;
border-radius: 10px;
font-size: 0.8125rem;
font-weight: 700;
margin-top: auto;
transition: all 250ms;
box-shadow: 0 2px 8px rgba(14, 109, 74, 0.15);
position: relative;
z-index: 1;
}
.sv-shop-card:hover .sv-shop-card__cta {
box-shadow: 0 6px 16px rgba(14, 109, 74, 0.35);
transform: translateY(-1px);
}
/* État vide */
.sv-shop-empty {
text-align: center;
padding: 5rem 1rem;
background: linear-gradient(180deg, var(--sv-gray-50) 0%, #fff 100%);
border: 1.5px dashed var(--sv-gray-100);
border-radius: 16px;
}
.sv-shop-empty__icon {
width: 72px;
height: 72px;
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
color: #fff;
border-radius: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin: 0 auto 1.25rem;
box-shadow: 0 6px 16px rgba(14, 109, 74, 0.2);
}
.sv-shop-empty h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--sv-gray-900);
margin-bottom: 0.5rem;
}
.sv-shop-empty p {
font-size: 0.9375rem;
color: var(--sv-gray-700);
margin: 0;
}
/* Badge promo (réutilisable) */
.sv-badge-promo {
display: inline-block;
background: var(--sv-danger);
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
padding: 0.25rem 0.625rem;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* Prix */
.sv-price-row {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.sv-price-promo {
font-size: 1.5rem;
font-weight: 800;
color: var(--sv-primary);
}
@media (min-width: 992px) {
.sv-price-promo {
font-size: 1.75rem;
}
}
.sv-price-old {
font-size: 0.9375rem;
color: var(--sv-gray-700);
text-decoration: line-through;
}
/* ============================================================
PAGE PRODUIT — Layout 2 colonnes
============================================================ */
/* Layout principal — mobile-first : 1 colonne, desktop : 2 colonnes */
.sv-product-page {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
/* min-width: 0 essentiel sur les items de grille : sans lui, un contenu
intrinsèquement large (image avec width=, tableau, mot sans break)
force l'élargissement de la colonne au-delà du viewport. */
min-width: 0;
}
/* Colonne de contenu produit — empêche l'élargissement par contenu intrinsèque */
.sv-product-page > * {
min-width: 0;
max-width: 100%;
}
@media (min-width: 992px) {
.sv-product-page {
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
padding: 2rem 1.5rem;
align-items: start;
}
}
/* Galerie — sticky sur desktop : reste visible pendant que l'info scrolle */
@media (min-width: 992px) {
.sv-product-gallery {
position: sticky;
top: 70px;
align-self: start;
}
}
/* Galerie */
.sv-gallery-main {
position: relative;
border-radius: 1rem;
overflow: hidden;
aspect-ratio: 1;
}
.sv-gallery-main img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sv-gallery-placeholder {
width: 100%;
height: 100%;
background: var(--sv-gray-100);
border-radius: 1rem;
}
.sv-badge-livraison {
position: absolute;
top: 0.75rem;
left: 0.75rem;
background: var(--sv-primary);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
z-index: 2;
}
.sv-gallery-thumbs {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
overflow-x: auto;
}
.sv-thumb {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 0.5rem;
border: 2px solid transparent;
cursor: pointer;
flex-shrink: 0;
min-width: 44px;
min-height: 44px;
transition: border-color 150ms;
}
.sv-thumb.is-active {
border-color: var(--sv-accent);
}
/* Titre produit */
.sv-product-title {
font-size: 1.375rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
@media (min-width: 992px) {
.sv-product-title {
font-size: 1.75rem;
}
}
/* =====================================================================
SÉLECTEUR DE VARIANTES (axes multiples) — fiche produit publique
===================================================================== */
.sv-product-options {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #fafcfb 100%);
border: 1.5px solid var(--sv-gray-100);
border-radius: 16px;
padding: 1.25rem 1.25rem 1.375rem;
margin: 1rem 0 1.25rem;
box-shadow:
0 1px 0 rgba(14, 109, 74, 0.04) inset,
0 10px 30px -18px rgba(14, 109, 74, 0.18);
}
/* Accent doré sous le titre — vit la charte sans "jaune en texte" */
.sv-product-options::before {
content: "";
position: absolute;
top: 0;
left: 1.25rem;
width: 42px;
height: 3px;
background: var(--sv-accent);
border-radius: 0 0 3px 3px;
}
.sv-product-options__title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sv-primary);
margin-bottom: 1rem;
}
.sv-product-options__title::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sv-primary);
box-shadow: 0 0 0 3px rgba(14, 109, 74, 0.15);
}
.sv-product-option {
margin-bottom: 1rem;
}
.sv-product-option:last-of-type {
margin-bottom: 0;
}
.sv-product-option__label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--sv-gray-700);
margin-bottom: 0.625rem;
}
.sv-product-option__value {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.75rem;
border-radius: 999px;
background: rgba(14, 109, 74, 0.08);
color: var(--sv-primary);
font-weight: 700;
font-size: 0.8125rem;
letter-spacing: 0;
text-transform: none;
min-height: 22px;
border: 1px solid rgba(14, 109, 74, 0.12);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sv-product-option__chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.sv-product-option__chip {
position: relative;
min-height: 46px;
min-width: 46px;
padding: 0.5rem 1rem;
background: #ffffff;
border: 1.5px solid var(--sv-gray-100);
border-radius: 12px;
font-size: 0.9375rem;
font-weight: 600;
color: var(--sv-gray-900);
cursor: pointer;
overflow: hidden;
transition:
transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.18s ease,
background 0.18s ease,
color 0.18s ease,
box-shadow 0.18s ease;
}
.sv-product-option__chip:hover {
border-color: var(--sv-primary);
transform: translateY(-2px);
box-shadow:
0 2px 0 rgba(14, 109, 74, 0.06) inset,
0 8px 18px -8px rgba(14, 109, 74, 0.25);
}
.sv-product-option__chip:active {
transform: translateY(0) scale(0.97);
}
.sv-product-option__chip--selected,
.sv-product-option__chip--selected:hover {
padding-right: 2.25rem;
background: linear-gradient(135deg, var(--sv-primary) 0%, var(--sv-dark) 100%);
border-color: var(--sv-dark);
color: #ffffff;
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 0 3px rgba(14, 109, 74, 0.12),
0 10px 24px -8px rgba(14, 109, 74, 0.45);
}
/* Coche dorée sur chip sélectionnée — #ffd700 en fond, icône sombre */
.sv-product-option__chip--selected::after {
content: "";
position: absolute;
top: 50%;
right: 0.5rem;
width: 18px;
height: 18px;
transform: translateY(-50%);
border-radius: 50%;
background:
url("data:image/svg+xml;utf8,")
center / 12px no-repeat,
var(--sv-accent);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.sv-product-option__chip--unavailable {
color: var(--sv-gray-700);
background: repeating-linear-gradient(
135deg,
#f5f5f5,
#f5f5f5 6px,
#ffffff 6px,
#ffffff 12px
);
border-color: var(--sv-gray-100);
opacity: 0.55;
text-decoration: line-through;
cursor: not-allowed;
pointer-events: none;
}
.sv-product-option__chip:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(14, 109, 74, 0.35);
}
.sv-product-options__hint {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
padding: 0.625rem 0.875rem;
background: var(--sv-gray-50);
border: 1px solid var(--sv-gray-100);
border-radius: 10px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--sv-gray-700);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sv-product-options__hint--ok {
background: #ecfdf5;
border-color: rgba(14, 109, 74, 0.25);
color: var(--sv-primary);
}
.sv-product-options__hint--warn {
background: #fef2f2;
border-color: rgba(163, 45, 45, 0.25);
color: var(--sv-danger);
}
.sv-product-options__hint i {
font-size: 1rem;
flex-shrink: 0;
}
@media (max-width: 575.98px) {
.sv-product-options {
padding: 1rem 1rem 1.125rem;
border-radius: 14px;
}
.sv-product-option__chip {
padding: 0.5rem 0.875rem;
font-size: 0.9375rem;
}
.sv-product-option__chip--selected {
padding-right: 2rem;
}
}
@media (prefers-reduced-motion: reduce) {
.sv-product-option__chip {
transition: none;
}
.sv-product-option__chip:hover,
.sv-product-option__chip--selected {
transform: none;
}
}
/* Description produit — contenu rich text (Quill)
Protections défensives : un copier-coller depuis Word, Google Docs, un
site tiers ou un paste avec URL/mot interminable ne doit JAMAIS pouvoir
casser le layout responsive. Le sanitizer n'autorise plus style= sur
les spans, mais certains contenus en base contiennent encore des styles
inline — d'où l'usage défensif de !important sur les règles critiques. */
.sv-product-desc {
font-size: 0.9375rem;
color: var(--sv-gray-700);
line-height: 1.7;
margin-bottom: 1.25rem;
max-width: 100% !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
min-width: 0;
/* Garde-fou absolu : si un descendant ignore toutes les règles ci-dessus,
la description se clipe au lieu de casser le layout. */
overflow-x: hidden;
}
/* Garde-fou global : aucun descendant ne peut déborder son parent, et les
styles inline hérités de paste Word/Docs sont neutralisés. */
.sv-product-desc * {
max-width: 100% !important;
box-sizing: border-box !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
/* Annule les "white-space: nowrap" venant de paste Word — priorité
au wrap naturel par défaut. La règle / plus bas restaure
pre-wrap où c'est légitime. */
white-space: normal !important;
}
.sv-product-desc p {
margin-bottom: 0.5rem;
overflow-wrap: anywhere;
word-break: break-word;
}
.sv-product-desc p:last-child {
margin-bottom: 0;
}
.sv-product-desc strong {
color: var(--sv-gray-900);
}
.sv-product-desc ul,
.sv-product-desc ol {
padding-left: 1.25rem;
margin-bottom: 0.75rem;
}
.sv-product-desc li {
margin-bottom: 0.25rem;
overflow-wrap: anywhere;
word-break: break-word;
}
.sv-product-desc blockquote {
border-left: 3px solid var(--sv-primary);
padding-left: 1rem;
margin: 0.75rem 0;
color: var(--sv-gray-700);
font-style: italic;
overflow-wrap: anywhere;
}
.sv-product-desc a {
color: var(--sv-primary);
text-decoration: underline;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Médias : contraints à la largeur du conteneur, jamais débordants */
.sv-product-desc img,
.sv-product-desc video,
.sv-product-desc iframe,
.sv-product-desc embed,
.sv-product-desc object {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
margin: 0.5rem 0;
display: block;
}
/* Code / préformaté : forcer le wrap plutôt que l'overflow horizontal.
!important pour restaurer pre-wrap contre la règle globale white-space: normal. */
.sv-product-desc pre,
.sv-product-desc code {
white-space: pre-wrap !important;
word-break: break-word;
overflow-wrap: anywhere;
max-width: 100%;
}
/* Tableaux : scrollables en dernier recours, jamais débordants */
.sv-product-desc table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-collapse: collapse;
}
.sv-product-desc table td,
.sv-product-desc table th {
word-break: break-word;
overflow-wrap: anywhere;
}
/* Colonne produit — min-width: 0 obligatoire sur enfant de grid/flex
sinon le contenu intrinsèque peut forcer la colonne à s'élargir */
.sv-product-info {
min-width: 0;
}
/* =====================================================================
CARACTÉRISTIQUES PRODUIT — référence, code-barres, dimensions
===================================================================== */
.sv-product-specs {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #fafcfb 100%);
border: 1.5px solid var(--sv-gray-100);
border-radius: 14px;
padding: 1rem 1.125rem 1.125rem;
margin: 1rem 0 1.25rem;
}
.sv-product-specs::before {
content: "";
position: absolute;
top: 0;
left: 1.125rem;
width: 36px;
height: 3px;
background: var(--sv-accent);
border-radius: 0 0 3px 3px;
}
.sv-product-specs__title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sv-primary);
margin: 0 0 0.75rem;
}
.sv-product-specs__title i {
font-size: 1rem;
}
.sv-product-specs__list {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: 0;
}
.sv-product-specs__row {
display: grid;
grid-template-columns: minmax(140px, 1fr) 2fr;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0;
border-bottom: 1px dashed var(--sv-gray-100);
}
.sv-product-specs__row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.sv-product-specs__row:first-child {
padding-top: 0;
}
.sv-product-specs__row dt {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--sv-gray-700);
margin: 0;
}
.sv-product-specs__row dt i {
color: var(--sv-primary);
font-size: 1rem;
flex-shrink: 0;
}
.sv-product-specs__row dd {
margin: 0;
font-size: 0.9375rem;
font-weight: 600;
color: var(--sv-gray-900);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.sv-product-specs__hint {
font-size: 0.75rem;
font-weight: 500;
color: var(--sv-gray-700);
margin-left: 0.25rem;
}
@media (max-width: 575.98px) {
.sv-product-specs {
padding: 0.875rem 1rem 1rem;
border-radius: 12px;
}
.sv-product-specs__row {
grid-template-columns: 1fr;
gap: 0.25rem;
padding: 0.5rem 0;
}
.sv-product-specs__row dt {
font-size: 0.75rem;
}
.sv-product-specs__row dd {
font-size: 0.9375rem;
padding-left: 1.5rem;
}
}
/* Taxonomie produit — maillage interne SEO */
.sv-product-taxonomy {
display: flex;
flex-direction: column;
gap: 0.375rem;
margin-bottom: 1rem;
padding-top: 0.25rem;
}
.sv-product-taxonomy__group {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
align-items: center;
}
.sv-product-taxonomy__label {
font-size: 0.625rem;
font-weight: 600;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 0.25rem;
}
.sv-product-taxonomy__link {
display: inline-block;
font-size: 0.625rem;
font-weight: 500;
color: var(--sv-gray-700);
text-decoration: none;
background: #fff;
border: 1px solid var(--sv-gray-100);
border-radius: 4px;
padding: 0.125rem 0.4375rem;
transition:
color 200ms,
border-color 200ms;
}
.sv-product-taxonomy__link:hover {
color: var(--sv-primary);
border-color: var(--sv-primary);
}
.sv-product-taxonomy__tag {
display: inline-block;
font-size: 0.625rem;
font-weight: 500;
color: var(--sv-gray-700);
background: #fff;
border: 1px solid var(--sv-gray-100);
border-radius: 4px;
padding: 0.125rem 0.4375rem;
}
/* Badge visiteurs */
.sv-visitors-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
background: var(--sv-primary);
color: #fff;
border-radius: 20px;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.sv-live-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--sv-accent);
animation: sv-pulse 1.5s infinite;
flex-shrink: 0;
}
@keyframes sv-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
/* Barre stock — texte au-dessus, barre en dessous */
.sv-stock-row {
margin-bottom: 0.875rem;
}
.sv-stock-alert {
display: block;
color: var(--sv-danger);
font-weight: 700;
font-size: 0.8125rem;
margin-bottom: 0.375rem;
}
.sv-stock-bar {
width: 100%;
height: 8px;
background: var(--sv-gray-100);
border-radius: 4px;
overflow: hidden;
}
.sv-stock-fill {
height: 100%;
border-radius: 4px;
background: repeating-linear-gradient(
-45deg,
var(--sv-primary),
var(--sv-primary) 5px,
var(--sv-accent) 5px,
var(--sv-accent) 10px
);
background-size: 14px 14px;
animation: sv-stock-stripes 0.6s linear infinite;
transition: width 0.3s ease;
}
@keyframes sv-stock-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 14px 0;
}
}
/* Timer countdown — blocs verts avec labels */
.sv-timer-wrap {
background: var(--sv-gray-50);
border: 1px solid var(--sv-gray-100);
border-radius: 0.75rem;
padding: 1rem 1.25rem;
margin-bottom: 1rem;
}
.sv-timer-label {
color: var(--sv-gray-900);
font-size: 0.75rem;
font-weight: 600;
text-align: center;
margin-bottom: 0.75rem;
}
.sv-timer {
display: flex;
justify-content: center;
gap: 0.75rem;
align-items: flex-start;
}
.sv-tblock {
text-align: center;
}
.sv-tval {
display: flex;
align-items: center;
justify-content: center;
background: var(--sv-primary);
color: #fff;
font-size: 1.5rem;
font-weight: 800;
width: 56px;
height: 56px;
border-radius: 0.625rem;
font-variant-numeric: tabular-nums;
box-shadow: 0 2px 8px rgba(14, 109, 74, 0.2);
}
.sv-tunit {
display: block;
font-size: 0.625rem;
color: var(--sv-gray-700);
margin-top: 0.375rem;
font-weight: 600;
text-transform: capitalize;
}
.sv-tsep {
color: var(--sv-primary);
font-size: 1.5rem;
font-weight: 800;
line-height: 56px;
}
@media (max-width: 575.98px) {
.sv-tval {
font-size: 1.25rem;
width: 48px;
height: 48px;
}
.sv-tsep {
font-size: 1.25rem;
line-height: 48px;
}
}
/* ============================================================
FORMULAIRE CHECKOUT EXPRESS
============================================================ */
.sv-checkout-form-wrap {
background: var(--sv-gray-50);
border: 1px solid var(--sv-gray-100);
border-radius: 1rem;
padding: 1.25rem;
margin-top: 1rem;
}
.sv-form-title {
font-size: 0.9375rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--sv-primary);
}
.sv-form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.625rem;
}
@media (min-width: 768px) {
.sv-form-grid {
grid-template-columns: 1fr 1fr;
}
}
.sv-full {
grid-column: 1 / -1;
}
.sv-finput-wrap {
position: relative;
}
.sv-finput {
width: 100%;
font-family: inherit;
}
#customerName,
#city {
text-transform: uppercase;
}
#customerName::placeholder,
#city::placeholder {
text-transform: none;
}
/* intl-tel-input — intégration charte Santé Verte */
.sv-finput-wrap .iti {
width: 100%;
}
.sv-finput-wrap .iti__tel-input {
font-size: 16px;
font-family: inherit;
}
.sv-finput-wrap .iti__country-container {
border-radius: 8px 0 0 8px;
}
.sv-finput-wrap .iti__selected-country-primary {
background: var(--sv-gray-50);
border-right: 1.5px solid var(--sv-gray-100);
border-radius: 8px 0 0 8px;
padding: 0 10px;
min-height: 44px;
}
.sv-finput-wrap .iti__selected-dial-code {
font-size: 0.8125rem;
font-weight: 600;
color: var(--sv-gray-900);
}
.sv-finput-wrap .iti__dropdown-content {
border: 1.5px solid var(--sv-gray-100);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
margin-top: 4px;
}
.sv-finput-wrap .iti__search-input {
font-size: 16px;
font-family: inherit;
border-bottom: 1px solid var(--sv-gray-100);
padding: 10px 12px;
}
.sv-finput-wrap .iti__country {
padding: 8px 12px;
transition: background 0.15s;
}
.sv-finput-wrap .iti__country:hover,
.sv-finput-wrap .iti__country--highlight {
background: rgba(14, 109, 74, 0.06);
}
.sv-fee-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
font-size: 0.875rem;
border-top: 1px solid var(--sv-gray-100);
margin-top: 0.25rem;
}
/* === Sélecteur livraison (aujourd'hui / plus tard) === */
.sv-delivery-choice {
border: 1.5px solid var(--sv-gray-100);
border-radius: 0.75rem;
padding: 1rem 1rem 0.75rem;
background: #fff;
margin-top: 0.25rem;
}
/* En-tête avec icône + question */
.sv-delivery-choice__header {
display: flex;
align-items: center;
gap: 0.625rem;
margin-bottom: 0.875rem;
}
.sv-delivery-choice__icon-wrap {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: linear-gradient(135deg, var(--sv-primary), #1a8f62);
color: #fff;
font-size: 0.875rem;
flex-shrink: 0;
}
.sv-delivery-choice__question {
font-size: 0.875rem;
font-weight: 700;
color: var(--sv-gray-900);
line-height: 1.3;
}
/* Grille des deux boutons */
.sv-delivery-choice__options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.625rem;
}
.sv-delivery-choice__btn {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.75rem;
border: 2px solid var(--sv-gray-100);
border-radius: 0.75rem;
background: var(--sv-gray-50);
cursor: pointer;
font-family: inherit;
text-align: left;
transition:
border-color 200ms,
background 200ms,
box-shadow 200ms;
position: relative;
}
.sv-delivery-choice__btn:hover {
border-color: #b0d9c5;
background: #f0fdf4;
}
.sv-delivery-choice__btn-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 1rem;
flex-shrink: 0;
transition:
background 200ms,
color 200ms;
}
.sv-delivery-choice__btn--today .sv-delivery-choice__btn-icon {
background: rgba(14, 109, 74, 0.1);
color: var(--sv-primary);
}
.sv-delivery-choice__btn--later .sv-delivery-choice__btn-icon {
background: rgba(24, 95, 165, 0.1);
color: var(--sv-info);
}
.sv-delivery-choice__btn-content {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.sv-delivery-choice__btn-label {
font-size: 0.8125rem;
font-weight: 700;
color: var(--sv-gray-900);
line-height: 1.3;
}
.sv-delivery-choice__btn-sub {
font-size: 0.6875rem;
color: #9ca3af;
line-height: 1.3;
}
.sv-delivery-choice__tag {
position: absolute;
top: -8px;
right: 8px;
font-size: 0.5625rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
background: var(--sv-primary);
border-radius: 10px;
padding: 0.125rem 0.5rem;
line-height: 1.4;
}
/* État actif — bouton OUI */
.sv-delivery-choice__btn--today.sv-delivery-choice__btn--active {
border-color: var(--sv-primary);
background: #f0fdf4;
box-shadow: 0 0 0 3px rgba(14, 109, 74, 0.1);
}
.sv-delivery-choice__btn--today.sv-delivery-choice__btn--active
.sv-delivery-choice__btn-icon {
background: var(--sv-primary);
color: #fff;
}
/* État actif — bouton NON */
.sv-delivery-choice__btn--later.sv-delivery-choice__btn--active {
border-color: var(--sv-info);
background: #eff6ff;
box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.08);
}
.sv-delivery-choice__btn--later.sv-delivery-choice__btn--active
.sv-delivery-choice__btn-icon {
background: var(--sv-info);
color: #fff;
}
/* Bloc résultat — commun */
.sv-delivery-choice__result {
margin-top: 0.75rem;
padding: 0.75rem;
border-radius: 0.625rem;
animation: sv-fade-in 300ms ease-out;
}
/* Résultat gratuit (OUI) */
.sv-delivery-choice__result--free {
background: #f0fdf4;
border: 1px solid #bbf7d0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.sv-delivery-choice__result-icon {
font-size: 1.25rem;
line-height: 1;
}
.sv-delivery-choice__result--free .sv-delivery-choice__result-icon {
color: var(--sv-primary);
}
.sv-delivery-choice__result-text {
font-size: 0.875rem;
font-weight: 700;
color: var(--sv-primary);
}
/* Résultat tarifs (NON) */
.sv-delivery-choice__result--later {
background: var(--sv-gray-50);
border: 1px solid var(--sv-gray-100);
}
.sv-delivery-choice__tarifs {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sv-delivery-choice__tarif-line {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--sv-gray-900);
}
.sv-delivery-choice__tarif-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.sv-delivery-choice__tarif-dot--abidjan {
background: var(--sv-info);
}
.sv-delivery-choice__tarif-dot--interior {
background: var(--sv-accent);
}
/* Champ date + créneau intégrés dans le bloc tarifs */
.sv-delivery-choice__fields {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px dashed var(--sv-gray-100);
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.sv-delivery-choice__fields .sv-finput-wrap {
width: 100%;
}
.sv-delivery-choice__fields .sv-finput {
background: #fff;
}
@keyframes sv-fade-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile — boutons empilés sur petits écrans */
@media (max-width: 374px) {
.sv-delivery-choice__options {
grid-template-columns: 1fr;
}
}
.sv-btn--cta {
min-height: 52px;
font-size: 1rem;
font-weight: 700;
color: #fff;
border-radius: 0.625rem;
border: none;
width: 100%;
cursor: pointer;
background: #ff0000;
transition: all 200ms;
}
.sv-btn--cta:hover {
filter: brightness(1.1);
}
.sv-btn--cta:active {
transform: scale(0.99);
}
.sv-btn--cta:disabled,
.sv-btn--cta.sv-btn--disabled,
.sv-btn--cta[aria-disabled="true"] {
background: var(--sv-gray-100) !important;
color: #9ca3af;
cursor: pointer; /* reste cliquable — redirige vers le formulaire */
filter: none;
transform: none;
}
/* Ligne quantité + bouton commander dans le formulaire */
.sv-checkout-action {
display: flex;
align-items: center;
gap: 0.75rem;
}
.sv-checkout-action .sv-qty-row {
flex-shrink: 0;
}
.sv-checkout-action .sv-btn--cta {
flex: 1;
min-width: 0;
}
/* --- Overlay plein écran (soumission AJAX) --- */
.sv-no-scroll {
overflow: hidden !important;
}
.sv-overlay-full {
position: fixed;
inset: 0;
background: linear-gradient(
135deg,
var(--sv-primary) 0%,
#1a8f62 40%,
#085041 100%
);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: sv-overlay-fadein 0.35s ease;
}
.sv-overlay-full::before {
content: "";
position: absolute;
top: -20%;
right: -15%;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(255, 215, 0, 0.1) 0%,
transparent 70%
);
pointer-events: none;
}
.sv-overlay-full::after {
content: "";
position: absolute;
bottom: -25%;
left: -10%;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.04) 0%,
transparent 60%
);
pointer-events: none;
}
@keyframes sv-overlay-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.sv-overlay-full__inner {
position: relative;
z-index: 1;
text-align: center;
padding: 2rem;
max-width: 400px;
animation: sv-overlay-content-in 0.5s ease 0.15s both;
}
@keyframes sv-overlay-content-in {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sv-overlay-full__logo {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
border: 2px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
}
.sv-overlay-full__logo i {
font-size: 1.75rem;
color: #ffd700;
}
.sv-overlay-full__spinner {
width: 56px;
height: 56px;
border: 3px solid rgba(255, 255, 255, 0.15);
border-top-color: #ffd700;
border-right-color: rgba(255, 215, 0, 0.5);
border-radius: 50%;
margin: 0 auto 1.75rem;
animation: sv-spin 0.9s linear infinite;
}
@keyframes sv-spin {
to {
transform: rotate(360deg);
}
}
.sv-overlay-full__title {
color: #fff;
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.625rem;
letter-spacing: -0.01em;
}
.sv-overlay-full__subtitle {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9375rem;
line-height: 1.6;
margin: 0 0 1.5rem;
}
.sv-overlay-full__dots {
display: flex;
justify-content: center;
gap: 6px;
}
.sv-overlay-full__dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 215, 0, 0.6);
animation: sv-dot-pulse 1.4s ease-in-out infinite;
}
.sv-overlay-full__dots span:nth-child(2) {
animation-delay: 0.2s;
}
.sv-overlay-full__dots span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes sv-dot-pulse {
0%,
80%,
100% {
transform: scale(0.6);
opacity: 0.4;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* --- Résultat commande (succès / erreur) --- */
.sv-checkout-result {
text-align: center;
padding: 2.5rem 1.5rem;
animation: sv-result-fadein 0.5s ease;
}
@keyframes sv-result-fadein {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sv-checkout-result__icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
animation: sv-result-pop 0.45s ease 0.1s both;
}
.sv-checkout-result__icon--success {
background: linear-gradient(135deg, #e6f7ef 0%, #c8f0d8 100%);
box-shadow: 0 8px 24px rgba(14, 109, 74, 0.15);
}
@keyframes sv-result-pop {
0% {
transform: scale(0.3);
opacity: 0;
}
50% {
transform: scale(1.08);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.sv-checkout-result__icon i {
font-size: 2.25rem;
}
.sv-checkout-result__icon--success i {
color: var(--sv-primary);
}
.sv-checkout-result__title {
font-size: 1.5rem;
font-weight: 800;
color: var(--sv-gray-900);
margin-bottom: 0.5rem;
letter-spacing: -0.01em;
}
.sv-checkout-result__subtitle {
font-size: 0.9375rem;
color: var(--sv-gray-700);
line-height: 1.7;
max-width: 420px;
margin: 0 auto 1.75rem;
}
.sv-checkout-result__details {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 340px;
margin: 0 auto 2rem;
text-align: left;
}
.sv-checkout-result__detail {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--sv-gray-700);
background: var(--sv-gray-50);
border: 1px solid var(--sv-gray-100);
border-radius: 10px;
padding: 0.625rem 1rem;
}
.sv-checkout-result__detail i {
font-size: 1rem;
color: var(--sv-primary);
flex-shrink: 0;
}
.sv-checkout-result__actions {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.sv-checkout-result__btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 700;
text-decoration: none;
border: none;
transition: all 0.2s;
min-height: 48px;
cursor: pointer;
}
.sv-checkout-result__btn--primary {
color: #fff;
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
box-shadow: 0 4px 12px rgba(14, 109, 74, 0.2);
}
.sv-checkout-result__btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(14, 109, 74, 0.3);
color: #fff;
}
.sv-checkout-result__btn--whatsapp {
color: #fff;
background: #25d366;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}
.sv-checkout-result__btn--whatsapp:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
color: #fff;
}
/* --- Bandeau erreur contextuel --- */
.sv-checkout-error {
background: #fff;
border: 1.5px solid #fecaca;
border-left: 4px solid var(--sv-danger);
border-radius: 12px;
padding: 1rem 1.25rem;
margin-bottom: 1rem;
display: flex;
align-items: flex-start;
gap: 0.75rem;
animation: sv-error-slidein 0.35s ease;
box-shadow: 0 4px 12px rgba(163, 45, 45, 0.08);
}
@keyframes sv-error-slidein {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sv-checkout-error__icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.sv-checkout-error__icon i {
font-size: 1rem;
color: var(--sv-danger);
}
.sv-checkout-error__content {
flex: 1;
min-width: 0;
}
.sv-checkout-error__title {
font-size: 0.875rem;
font-weight: 700;
color: var(--sv-gray-900);
margin-bottom: 0.125rem;
}
.sv-checkout-error__subtitle {
font-size: 0.8125rem;
color: var(--sv-gray-700);
line-height: 1.5;
}
.sv-checkout-error__close {
background: none;
border: none;
color: var(--sv-gray-700);
font-size: 0.875rem;
cursor: pointer;
padding: 0.25rem;
border-radius: 4px;
flex-shrink: 0;
transition: color 0.15s;
min-width: 28px;
min-height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.sv-checkout-error__close:hover {
color: var(--sv-danger);
}
@media (max-width: 575.98px) {
.sv-overlay-full__title {
font-size: 1.25rem;
}
.sv-overlay-full__spinner {
width: 48px;
height: 48px;
}
.sv-checkout-result {
padding: 2rem 1rem;
}
.sv-checkout-result__title {
font-size: 1.25rem;
}
.sv-checkout-result__actions {
flex-direction: column;
}
.sv-checkout-result__btn {
width: 100%;
justify-content: center;
}
}
/* ============================================================
SECTION HEADER — style Tchefon partagé (avis + produits apparentés)
============================================================ */
.sv-section {
max-width: 1200px;
margin: 0 auto;
padding: 3rem 1rem;
}
.sv-section-header {
display: flex;
align-items: center;
gap: 0.875rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid rgba(255, 215, 0, 0.25);
}
.sv-section-icon {
width: 44px;
height: 44px;
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.25rem;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(14, 109, 74, 0.2);
}
.sv-section-title {
font-size: 1.375rem;
font-weight: 800;
color: var(--sv-gray-900);
margin: 0;
line-height: 1.2;
}
.sv-section-subtitle {
font-size: 0.8125rem;
color: var(--sv-gray-700);
margin: 0.125rem 0 0;
font-weight: 400;
}
.sv-section-header__right {
margin-left: auto;
flex-shrink: 0;
}
/* ============================================================
AVIS CLIENTS — Section Tchefon
============================================================ */
.sv-reviews-section {
border-top: 2px solid var(--sv-gray-100);
background: #fff;
}
/* Bouton ajouter avis */
.sv-reviews-add-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.5rem;
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
color: #fff;
border: none;
border-radius: 10px;
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
transition: all 200ms;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(14, 109, 74, 0.25);
}
.sv-reviews-add-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(14, 109, 74, 0.35);
}
/* Formulaire d'ajout d'avis */
.sv-review-form {
margin-bottom: 2rem;
}
.sv-review-form__inner {
background: var(--sv-gray-50);
border: 1.5px solid var(--sv-gray-100);
border-radius: 16px;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
transition: border-color 200ms;
}
.sv-review-form__inner:focus-within {
border-color: rgba(255, 215, 0, 0.4);
}
.sv-review-form__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.sv-review-form__grid {
grid-template-columns: 1fr 1fr;
}
}
.sv-reviews-submit-btn {
align-self: flex-start;
padding: 0.75rem 2rem;
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
color: #fff;
border: none;
border-radius: 10px;
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
transition: all 200ms;
box-shadow: 0 4px 12px rgba(14, 109, 74, 0.25);
}
.sv-reviews-submit-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(14, 109, 74, 0.35);
}
/* Liste des avis */
.sv-reviews-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.sv-review-card {
background: #fff;
border: 1.5px solid var(--sv-gray-100);
border-radius: 16px;
padding: 1.25rem 1.5rem;
transition: all 200ms;
}
.sv-review-card:hover {
border-color: rgba(255, 215, 0, 0.4);
box-shadow: 0 4px 20px rgba(14, 109, 74, 0.05);
}
.sv-review-card__top {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.875rem;
}
.sv-review-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.125rem;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(14, 109, 74, 0.15);
}
.sv-review-meta {
flex: 1;
min-width: 0;
}
.sv-review-name {
display: block;
font-size: 0.9375rem;
font-weight: 700;
color: var(--sv-gray-900);
}
.sv-review-date {
font-size: 0.75rem;
color: var(--sv-gray-700);
}
.sv-review-stars {
display: flex;
gap: 2px;
flex-shrink: 0;
}
.sv-star {
font-size: 1rem;
color: var(--sv-gray-100);
transition: color 150ms;
}
.sv-star--filled {
color: var(--sv-accent);
}
.sv-review-text {
font-size: 0.9375rem;
color: var(--sv-gray-700);
line-height: 1.7;
margin: 0;
}
/* État vide */
.sv-reviews-empty {
text-align: center;
padding: 3rem 1rem;
background: var(--sv-gray-50);
border: 1.5px dashed var(--sv-gray-100);
border-radius: 16px;
}
.sv-reviews-empty__icon {
font-size: 3rem;
color: var(--sv-accent);
opacity: 0.4;
margin-bottom: 0.75rem;
}
.sv-reviews-empty p {
font-size: 0.9375rem;
color: var(--sv-gray-700);
margin: 0;
}
/* ============================================================
PAGE CONTACT — Cards coordonnées
============================================================ */
.sv-contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 576px) {
.sv-contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
.sv-contact-grid { grid-template-columns: repeat(3, 1fr); }
}
.sv-contact-card {
display: flex;
align-items: flex-start;
gap: 14px;
background: #fff;
border: 1.5px solid var(--sv-gray-100);
border-radius: 14px;
padding: 1.25rem;
text-decoration: none;
color: inherit;
transition: border-color 0.2s, box-shadow 0.3s, transform 0.3s;
}
.sv-contact-card:hover {
border-color: var(--sv-primary);
box-shadow: 0 8px 24px rgba(14, 109, 74, 0.08);
transform: translateY(-2px);
color: inherit;
}
.sv-contact-card--whatsapp:hover {
border-color: #25d366;
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.12);
}
.sv-contact-card__icon {
width: 44px;
height: 44px;
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
color: #fff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(14, 109, 74, 0.15);
}
.sv-contact-card--whatsapp .sv-contact-card__icon {
background: linear-gradient(135deg, #25d366 0%, #128c48 100%);
box-shadow: 0 3px 10px rgba(37, 211, 102, 0.2);
}
.sv-contact-card__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sv-contact-card__title {
font-size: 0.875rem;
font-weight: 700;
color: var(--sv-gray-900);
margin: 0;
}
.sv-contact-card__detail {
font-size: 0.8125rem;
color: var(--sv-gray-700);
line-height: 1.4;
}
.sv-contact-card__cta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
font-weight: 700;
color: var(--sv-primary);
margin-top: 4px;
transition: gap 0.2s;
}
.sv-contact-card--whatsapp .sv-contact-card__cta {
color: #25d366;
}
.sv-contact-card:hover .sv-contact-card__cta {
gap: 8px;
}
.sv-contact-socials {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1.5rem;
}
.sv-contact-social {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--sv-primary);
text-decoration: none;
padding: 8px 16px;
border: 1.5px solid var(--sv-gray-100);
border-radius: 50px;
transition: border-color 0.2s, background 0.2s;
}
.sv-contact-social:hover {
border-color: var(--sv-primary);
background: rgba(14, 109, 74, 0.04);
}
/* ============================================================
PAGE AVIS CLIENTS (/avis) — Carte note dans le hero
============================================================ */
.sv-reviews-hero__rating-card {
flex-shrink: 0;
background: #fff;
border: 1.5px solid var(--sv-gray-100);
border-radius: 20px;
padding: 1.5rem 2rem;
text-align: center;
box-shadow: 0 8px 32px rgba(14, 109, 74, 0.08);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.sv-reviews-hero__avg {
display: flex;
align-items: baseline;
gap: 2px;
}
.sv-reviews-hero__avg-value {
font-size: 2.5rem;
font-weight: 800;
color: var(--sv-gray-900);
line-height: 1;
}
.sv-reviews-hero__avg-label {
font-size: 1.125rem;
color: var(--sv-gray-700);
font-weight: 600;
}
.sv-reviews-hero__stars {
display: flex;
gap: 2px;
}
.sv-reviews-hero__stars .sv-star {
font-size: 1.25rem;
color: var(--sv-gray-100);
}
.sv-reviews-hero__stars .sv-star--filled {
color: var(--sv-accent);
}
.sv-reviews-hero__count {
font-size: 0.75rem;
color: var(--sv-gray-700);
font-weight: 500;
}
.sv-review-product {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
color: var(--sv-primary);
text-decoration: none;
font-weight: 500;
transition: color 200ms;
}
.sv-review-product:hover {
color: var(--sv-dark);
text-decoration: underline;
}
.sv-review-product i {
font-size: 0.6875rem;
}
.sv-review-card__right {
margin-left: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
flex-shrink: 0;
}
@media (max-width: 575.98px) {
.sv-reviews-hero__avg-value { font-size: 2rem; }
.sv-review-card__top { flex-wrap: wrap; }
.sv-review-card__right {
margin-left: 0;
flex-direction: row;
align-items: center;
gap: 0.5rem;
width: 100%;
justify-content: space-between;
padding-top: 0.5rem;
}
}
/* ============================================================
PRODUITS APPARENTÉS — Cards Tchefon
============================================================ */
.sv-related-section {
background: var(--sv-gray-50);
border-top: 2px solid var(--sv-gray-100);
}
.sv-related-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.875rem;
}
@media (min-width: 768px) {
.sv-related-grid {
gap: 1.25rem;
}
}
@media (min-width: 992px) {
.sv-related-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* Card produit apparenté — lien complet */
.sv-related-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
border: 1.5px solid var(--sv-gray-100);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: all 250ms;
}
.sv-related-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
border-color: rgba(255, 215, 0, 0.4);
color: inherit;
}
/* Image */
.sv-related-card__img {
position: relative;
overflow: hidden;
aspect-ratio: 1;
}
.sv-related-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-related-card:hover .sv-related-card__img img {
transform: scale(1.06);
}
.sv-related-card__placeholder {
width: 100%;
height: 100%;
background: var(--sv-gray-100);
}
.sv-related-card__badge {
position: absolute;
top: 0.625rem;
left: 0.625rem;
background: var(--sv-danger);
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
padding: 0.25rem 0.625rem;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* Corps */
.sv-related-card__body {
padding: 1rem;
display: flex;
flex-direction: column;
flex: 1;
}
@media (max-width: 575.98px) {
.sv-related-card__body {
padding: 0.75rem;
}
}
.sv-related-card__name {
font-size: 0.875rem;
font-weight: 700;
color: var(--sv-gray-900);
margin: 0 0 0.5rem;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sv-related-card__prices {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.sv-related-card__price {
font-size: 1rem;
font-weight: 800;
color: var(--sv-primary);
}
.sv-related-card__old-price {
font-size: 0.8125rem;
color: var(--sv-gray-700);
text-decoration: line-through;
}
.sv-related-card__cta {
display: block;
text-align: center;
padding: 0.625rem;
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
color: #fff;
border-radius: 10px;
font-size: 0.8125rem;
font-weight: 700;
margin-top: auto;
transition: all 200ms;
box-shadow: 0 2px 8px rgba(14, 109, 74, 0.15);
}
.sv-related-card:hover .sv-related-card__cta {
box-shadow: 0 4px 12px rgba(14, 109, 74, 0.3);
}
/* ============================================================
STICKY BAR — style compact comme la référence
============================================================ */
.sv-sticky-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid var(--sv-gray-100);
padding: 0.5rem 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
z-index: 100;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
}
@media (min-width: 992px) {
.sv-sticky-bar {
padding: 0.5rem 2rem;
gap: 1.5rem;
}
}
.sv-qty-row {
display: flex;
align-items: center;
gap: 0;
}
.sv-qty-btn {
width: 36px;
height: 36px;
border: 1.5px solid var(--sv-gray-100);
background: #fff;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 150ms;
min-width: 44px;
min-height: 44px;
}
.sv-qty-btn:first-child {
border-radius: 0.5rem 0 0 0.5rem;
}
.sv-qty-btn:last-child {
border-radius: 0 0.5rem 0.5rem 0;
}
.sv-qty-btn:hover {
border-color: var(--sv-primary);
color: var(--sv-primary);
}
.sv-qty-val {
font-size: 0.9375rem;
font-weight: 700;
min-width: 2rem;
text-align: center;
border-top: 1.5px solid var(--sv-gray-100);
border-bottom: 1.5px solid var(--sv-gray-100);
height: 36px;
line-height: 36px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.sv-sticky-price {
font-size: 1rem;
font-weight: 800;
color: var(--sv-gray-900);
white-space: nowrap;
}
.sv-btn-sticky-cmd {
min-height: 44px;
padding: 0 1.5rem;
color: #fff;
background: #ff0000;
border: none;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
transition: all 200ms;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.sv-btn-sticky-cmd:hover {
filter: brightness(1.1);
}
.sv-btn-sticky-cmd:active {
transform: scale(0.98);
}
.sv-btn-sticky-cmd:disabled,
.sv-btn-sticky-cmd.sv-btn--disabled,
.sv-btn-sticky-cmd[aria-disabled="true"] {
background: var(--sv-gray-100) !important;
color: #9ca3af;
cursor: pointer; /* reste cliquable — redirige vers le formulaire */
filter: none;
transform: none;
}
/* Espace en bas du body pour compenser la sticky bar */
body {
padding-bottom: 60px;
}
/* ============================================================
SOCIAL PROOF POPUP — preuve sociale dynamique
============================================================ */
/* =====================================================================
POPUP SOCIAL PROOF — Refonte raffinée
Card à double surface (gradient très léger), ombres multi-couches,
liseré gauche signature, micro-signature accent dorée, animation organique.
Respect WCAG AA : #ffd700 jamais en texte, contrastes vérifiés.
===================================================================== */
.sv-proof {
position: fixed;
bottom: 76px;
left: 0.75rem;
width: calc(100% - 1.5rem);
max-width: 340px;
padding: 0;
display: flex;
align-items: stretch;
pointer-events: none;
z-index: 101;
opacity: 0;
transform: translateY(14px) translateX(-10px) scale(0.96);
transform-origin: left bottom;
transition:
opacity 360ms cubic-bezier(0.16, 1, 0.3, 1),
transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 220ms ease;
/* Fond blanc avec dégradé vert ultra-discret vers le bas */
background:
linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
border: 1px solid rgba(14, 109, 74, 0.08);
border-radius: 16px;
overflow: hidden;
isolation: isolate;
/* Ombres empilées — donne un vrai relief, pas une ombre plate */
box-shadow:
0 1px 2px rgba(17, 24, 39, 0.04),
0 4px 12px rgba(17, 24, 39, 0.06),
0 16px 36px rgba(14, 109, 74, 0.14),
0 0 0 1px rgba(14, 109, 74, 0.04);
}
/* Support glass effect si le navigateur le permet (sans pénaliser 3G) */
@supports (backdrop-filter: blur(10px)) {
.sv-proof {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(251, 253, 252, 0.94) 100%);
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
}
}
/* Liseré gauche signature — vert charte, dégradé vers accent doré en bas */
.sv-proof::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 3px;
background: linear-gradient(
180deg,
var(--sv-primary) 0%,
var(--sv-dark) 55%,
var(--sv-accent) 100%
);
z-index: 2;
}
/* Reflet lumineux très subtil qui traverse la card au montage — effet signature */
.sv-proof::after {
content: "";
position: absolute;
top: 0;
left: -40%;
width: 40%;
height: 100%;
background: linear-gradient(
110deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 215, 0, 0.08) 50%,
rgba(255, 255, 255, 0) 100%
);
pointer-events: none;
transform: skewX(-16deg);
z-index: 1;
}
.sv-proof.sv-proof-show {
opacity: 1;
transform: translateY(0) translateX(0) scale(1);
pointer-events: auto;
}
.sv-proof.sv-proof-show::after {
animation: sv-proof-shimmer 1400ms cubic-bezier(0.16, 1, 0.3, 1) 200ms 1;
}
@keyframes sv-proof-shimmer {
0% { left: -40%; opacity: 0; }
30% { opacity: 1; }
100% { left: 140%; opacity: 0; }
}
.sv-proof:hover {
box-shadow:
0 2px 4px rgba(17, 24, 39, 0.05),
0 8px 18px rgba(17, 24, 39, 0.08),
0 24px 48px rgba(14, 109, 74, 0.2),
0 0 0 1px rgba(14, 109, 74, 0.08);
}
/* Image produit — vignette avec subtile bordure interne + gradient si vide */
.sv-proof__img {
position: relative;
width: 76px;
flex-shrink: 0;
background-size: cover;
background-position: center;
background-color: var(--sv-gray-50);
margin: 8px 0 8px 10px;
border-radius: 12px;
overflow: hidden;
z-index: 2;
}
.sv-proof__img::after {
content: "";
position: absolute;
inset: 0;
border-radius: 12px;
box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.06);
pointer-events: none;
}
.sv-proof__img--empty {
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 30% 20%, rgba(255, 215, 0, 0.18) 0%, transparent 45%),
linear-gradient(135deg, #e6f7ef 0%, #cde9db 100%);
}
.sv-proof__img--empty::before {
content: "\F291";
font-family: "bootstrap-icons";
font-size: 1.375rem;
color: var(--sv-primary);
opacity: 0.55;
z-index: 1;
}
/* Corps — padding ajusté, respiration meilleure */
.sv-proof__body {
flex: 1;
padding: 0.625rem 0.875rem 0.625rem 0.75rem;
min-width: 0;
position: relative;
z-index: 2;
}
/* Texte principal — hiérarchie fine */
.sv-proof__main {
font-size: 0.8125rem;
line-height: 1.45;
color: var(--sv-gray-900);
margin-bottom: 0.25rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sv-proof__main strong {
color: var(--sv-primary);
font-weight: 700;
letter-spacing: -0.005em;
}
.sv-proof__action {
color: var(--sv-gray-700);
font-weight: 500;
}
.sv-proof__product {
font-weight: 600;
color: var(--sv-gray-900);
display: inline;
}
/* Meta — ville, temps avec typo raffinée */
.sv-proof__meta {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.6875rem;
font-weight: 500;
color: var(--sv-gray-700);
margin-bottom: 0.3rem;
letter-spacing: 0.01em;
}
.sv-proof__meta::before {
content: "\F282";
font-family: "bootstrap-icons";
font-size: 0.8125rem;
color: var(--sv-primary);
opacity: 0.75;
flex-shrink: 0;
}
.sv-proof__sep {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--sv-gray-700);
opacity: 0.35;
flex-shrink: 0;
}
.sv-proof__time {
display: inline-flex;
align-items: center;
gap: 2px;
}
.sv-proof__time::before {
content: "\F293";
font-family: "bootstrap-icons";
font-size: 0.75rem;
opacity: 0.55;
}
/* Badge livraison — fond jaune accent, texte noir conforme WCAG */
.sv-proof__delivery {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 3px 8px;
font-size: 0.6875rem;
font-weight: 700;
color: #111827;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.28) 0%, rgba(255, 215, 0, 0.16) 100%);
border: 1px solid rgba(255, 215, 0, 0.45);
border-radius: 999px;
letter-spacing: 0.01em;
}
.sv-proof__delivery::before {
content: "\F5E3";
font-family: "bootstrap-icons";
font-size: 0.8125rem;
color: var(--sv-primary);
}
/* Bouton fermer — cible tactile ≥ 24px, hover feedback */
.sv-proof__close {
position: absolute;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.9);
color: var(--sv-gray-700);
font-size: 0.75rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition:
background 160ms ease,
transform 160ms ease,
color 160ms ease;
padding: 0;
line-height: 1;
z-index: 3;
box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
}
.sv-proof__close:hover {
background: var(--sv-primary);
color: #fff;
transform: scale(1.08);
}
.sv-proof__close:active {
transform: scale(0.96);
}
/* Desktop — plus de place, typographie et padding étendus */
@media (min-width: 992px) {
.sv-proof {
bottom: 24px;
max-width: 380px;
transition-duration: 420ms;
}
.sv-proof__img {
width: 88px;
}
.sv-proof__body {
padding: 0.75rem 1rem 0.75rem 0.875rem;
}
.sv-proof__main {
font-size: 0.875rem;
}
.sv-proof:hover {
transform: translateY(-3px) scale(1.005);
}
}
/* Mobile — compact sans perdre en lisibilité */
@media (max-width: 575.98px) {
.sv-proof {
bottom: 76px;
left: 0.5rem;
max-width: calc(100% - 1rem);
}
.sv-proof__img {
width: 64px;
margin: 6px 0 6px 8px;
}
.sv-proof__body {
padding: 0.5rem 0.625rem 0.5rem 0.625rem;
}
.sv-proof__main {
font-size: 0.75rem;
}
.sv-proof__delivery {
padding: 2px 7px;
font-size: 0.625rem;
}
}
/* Reduced motion — respect utilisateur */
@media (prefers-reduced-motion: reduce) {
.sv-proof {
transition: opacity 160ms ease;
transform: none;
}
.sv-proof.sv-proof-show {
transform: none;
}
.sv-proof.sv-proof-show::after {
animation: none;
}
}
/* ============================================================
WHATSAPP FAB — au-dessus de la sticky bar
============================================================ */
.sv-whatsapp-fab {
position: fixed;
bottom: 70px;
right: 1rem;
width: 56px;
height: 56px;
background: #25d366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 101;
text-decoration: none;
transition: transform 200ms;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
color: #fff;
font-size: 1.75rem;
}
.sv-whatsapp-fab:hover {
transform: scale(1.08);
color: #fff;
}
/* ============================================================
FOOTER
============================================================ */
/* ============================================================
FOOTER — 4 colonnes avec logo
============================================================ */
.sv-footer {
margin-top: 0;
position: relative;
}
.sv-footer__top {
background: linear-gradient(180deg, var(--sv-gray-900) 0%, #0a0f14 100%);
color: #fff;
padding: 3.5rem 0 2.5rem;
position: relative;
}
.sv-footer__top::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(
90deg,
var(--sv-primary),
var(--sv-accent),
var(--sv-primary)
);
}
.sv-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.sv-footer__grid {
grid-template-columns: 1fr 1.8fr 0.8fr;
gap: 2rem;
}
}
/* Colonne logo */
.sv-footer__brand-col {
max-width: 280px;
}
.sv-footer__logo {
display: inline-block;
margin-bottom: 1rem;
}
.sv-footer__logo img {
height: 56px;
width: auto;
border-radius: 10px;
background: #fff;
padding: 4px;
transition: transform 200ms;
}
.sv-footer__logo:hover img {
transform: scale(1.03);
}
.sv-footer__desc {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.55);
line-height: 1.6;
margin-bottom: 1.25rem;
}
/* Réseaux sociaux */
.sv-footer__socials {
display: flex;
gap: 0.5rem;
}
.sv-footer__social {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
text-decoration: none;
transition: all 200ms;
}
.sv-footer__social:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
transform: translateY(-2px);
}
.sv-footer__social--whatsapp:hover {
background: rgba(37, 211, 102, 0.2);
color: #25d366;
}
/* Titres colonnes */
.sv-footer__title {
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 1.25rem;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.08em;
position: relative;
padding-bottom: 0.75rem;
}
.sv-footer__title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 24px;
height: 2px;
background: var(--sv-accent);
border-radius: 1px;
}
/* Listes */
.sv-footer__list {
list-style: none;
padding: 0;
margin: 0;
}
.sv-footer__list--2cols {
columns: 2;
column-gap: 1.5rem;
}
.sv-footer__list li {
margin-bottom: 0.5rem;
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.5);
break-inside: avoid;
}
.sv-footer__list a {
color: rgba(255, 255, 255, 0.55);
text-decoration: none;
transition:
color 200ms,
padding-left 200ms;
display: inline-block;
}
.sv-footer__list a:hover {
color: var(--sv-accent);
padding-left: 3px;
}
.sv-footer__list--contact li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.sv-footer__list--contact i {
color: var(--sv-primary);
font-size: 0.8125rem;
margin-top: 2px;
flex-shrink: 0;
}
/* Bottom bar */
.sv-footer__bottom {
background: #050810;
padding: 1rem 0;
}
.sv-footer__copy {
font-size: 0.6875rem;
color: rgba(255, 255, 255, 0.35);
text-align: center;
margin: 0;
letter-spacing: 0.02em;
}
/* ============================================================
AUTH
============================================================ */
.sv-auth {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
.sv-auth__card {
max-width: 400px;
width: 100%;
}
.sv-auth__title {
font-size: 1.25rem;
font-weight: 700;
text-align: center;
margin-bottom: 1.5rem;
}
/* ============================================================
PAGE LÉGALE — Hero + Layout 2 colonnes + Navigation
============================================================ */
/* Hero — compact, pas de cassure visuelle */
.sv-legal-hero {
background: linear-gradient(
135deg,
var(--sv-primary) 0%,
#1a8f62 40%,
var(--sv-dark) 100%
);
padding: 1.25rem 0 1.5rem;
position: relative;
overflow: hidden;
}
.sv-legal-hero::before {
content: "";
position: absolute;
top: -40%;
right: -10%;
width: 300px;
height: 300px;
background: radial-gradient(
circle,
rgba(255, 215, 0, 0.08) 0%,
transparent 70%
);
border-radius: 50%;
pointer-events: none;
}
.sv-legal-hero__breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 0.625rem;
position: relative;
z-index: 1;
}
.sv-legal-hero__breadcrumb a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 150ms;
}
.sv-legal-hero__breadcrumb a:hover {
color: #fff;
}
.sv-legal-hero__sep {
font-size: 0.625rem;
opacity: 0.5;
}
.sv-legal-hero__title {
color: #fff;
font-size: 1.5rem;
font-weight: 800;
margin: 0 0 0.25rem;
position: relative;
z-index: 1;
}
@media (min-width: 992px) {
.sv-legal-hero {
padding: 1.5rem 0 1.75rem;
}
.sv-legal-hero__title {
font-size: 1.75rem;
}
}
.sv-legal-hero__meta {
color: rgba(255, 255, 255, 0.6);
font-size: 0.8125rem;
margin: 0;
position: relative;
z-index: 1;
}
/* Body — layout 2 colonnes */
.sv-legal-body {
padding: 2.5rem 0 4rem;
}
.sv-legal-layout {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 992px) {
.sv-legal-layout {
grid-template-columns: 240px 1fr;
gap: 3rem;
}
}
/* Sidebar navigation */
.sv-legal-sidebar {
display: none;
}
@media (min-width: 992px) {
.sv-legal-sidebar {
display: block;
}
}
.sv-legal-sidebar__inner {
position: sticky;
top: 80px;
}
.sv-legal-sidebar__title {
font-size: 0.6875rem;
font-weight: 700;
color: var(--sv-gray-700);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 0.75rem;
padding-bottom: 0.625rem;
border-bottom: 2px solid rgba(255, 215, 0, 0.25);
}
.sv-legal-sidebar__nav {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.sv-legal-sidebar__link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--sv-gray-700);
text-decoration: none;
border-radius: 8px;
transition: all 200ms;
}
.sv-legal-sidebar__link i {
font-size: 0.875rem;
color: var(--sv-gray-700);
opacity: 0.5;
transition: all 200ms;
}
.sv-legal-sidebar__link:hover {
background: var(--sv-primary-tint);
color: var(--sv-primary);
}
.sv-legal-sidebar__link:hover i {
opacity: 1;
color: var(--sv-primary);
}
.sv-legal-sidebar__link.is-active {
background: var(--sv-primary-tint);
color: var(--sv-primary);
font-weight: 700;
}
.sv-legal-sidebar__link.is-active i {
opacity: 1;
color: var(--sv-primary);
}
/* Contenu principal */
.sv-legal-content__body {
background: #fff;
border: 1.5px solid var(--sv-gray-100);
border-radius: 16px;
padding: 2rem 2.5rem;
line-height: 1.8;
}
@media (max-width: 575.98px) {
.sv-legal-content__body {
padding: 1.25rem 1rem;
}
}
/* Navigation entre pages — cards en bas */
.sv-legal-content__nav {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
margin-top: 2rem;
}
@media (min-width: 576px) {
.sv-legal-content__nav {
grid-template-columns: repeat(2, 1fr);
}
}
.sv-legal-nav-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.25rem;
background: var(--sv-gray-50);
border: 1.5px solid var(--sv-gray-100);
border-radius: 12px;
text-decoration: none;
color: var(--sv-gray-700);
font-size: 0.875rem;
font-weight: 600;
transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-legal-nav-card i {
font-size: 1.125rem;
color: var(--sv-primary);
transition: transform 200ms;
}
.sv-legal-nav-card:hover {
border-color: rgba(255, 215, 0, 0.4);
background: #fff;
color: var(--sv-primary);
box-shadow: 0 4px 16px rgba(14, 109, 74, 0.06);
transform: translateY(-2px);
}
.sv-legal-nav-card:hover i {
transform: translateX(3px);
}
/* ============================================================
PAGE UPSELL — Design conversion
============================================================ */
.sv-upsell-page {
min-height: 100vh;
background: var(--sv-gray-50);
}
/* Header */
.sv-upsell-header {
background: linear-gradient(
135deg,
var(--sv-primary) 0%,
#1a8f62 40%,
var(--sv-dark) 100%
);
padding: 2rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.sv-upsell-header::before {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 300px;
height: 300px;
background: radial-gradient(
circle,
rgba(255, 215, 0, 0.1) 0%,
transparent 70%
);
border-radius: 50%;
pointer-events: none;
}
.sv-upsell-header__badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
background: rgba(255, 215, 0, 0.2);
color: var(--sv-accent);
font-size: 0.75rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 50px;
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
position: relative;
z-index: 1;
}
.sv-upsell-header__title {
color: #fff;
font-size: 1.5rem;
font-weight: 800;
margin: 0;
position: relative;
z-index: 1;
}
@media (min-width: 992px) {
.sv-upsell-header__title {
font-size: 2rem;
}
}
/* Body */
.sv-upsell-body {
padding: 2rem 0 3rem;
}
.sv-upsell-content {
max-width: 720px;
margin: 0 auto;
}
/* Description riche */
.sv-upsell-description {
background: #fff;
border: 1.5px solid var(--sv-gray-100);
border-radius: 16px;
padding: 2rem;
margin-bottom: 2rem;
}
@media (max-width: 575.98px) {
.sv-upsell-description {
padding: 1.25rem;
}
}
/* Cards produits offre */
.sv-upsell-products {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.sv-upsell-product-card {
display: flex;
align-items: center;
gap: 1.25rem;
background: #fff;
border: 1.5px solid var(--sv-gray-100);
border-radius: 16px;
padding: 1rem 1.25rem;
transition: all 250ms;
}
.sv-upsell-product-card:hover {
border-color: rgba(255, 215, 0, 0.4);
box-shadow: 0 4px 20px rgba(14, 109, 74, 0.06);
}
.sv-upsell-product-card__img {
width: 80px;
height: 80px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
}
.sv-upsell-product-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sv-upsell-product-card__info {
flex: 1;
}
.sv-upsell-product-card__name {
font-size: 1rem;
font-weight: 700;
color: var(--sv-gray-900);
margin: 0 0 0.25rem;
}
.sv-upsell-product-card__prices {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.sv-upsell-product-card__price {
font-size: 1.375rem;
font-weight: 800;
color: var(--sv-primary);
}
.sv-upsell-product-card__old-price {
font-size: 0.8125rem;
color: #9ca3af;
text-decoration: line-through;
text-decoration-color: var(--sv-danger);
}
.sv-upsell-product-card__savings {
display: inline-block;
background: rgba(255, 215, 0, 0.15);
color: var(--sv-gray-900);
font-size: 0.6875rem;
font-weight: 700;
padding: 0.2rem 0.5rem;
border-radius: 4px;
}
/* Boutons CTA */
.sv-upsell-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 2rem;
}
.sv-upsell-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
border-radius: 12px;
font-size: 1.0625rem;
font-weight: 700;
text-decoration: none;
transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
text-align: center;
}
.sv-upsell-btn--yes {
box-shadow: 0 6px 20px rgba(14, 109, 74, 0.25);
min-height: 56px;
}
.sv-upsell-btn--yes:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(14, 109, 74, 0.35);
}
.sv-upsell-btn--no {
font-size: 0.875rem;
min-height: 44px;
opacity: 0.85;
}
.sv-upsell-btn--no:hover {
opacity: 1;
}
/* Timer urgence */
.sv-upsell-timer {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: #111827;
color: #fff;
font-size: 0.875rem;
font-weight: 600;
padding: 0.75rem 1.25rem;
border-radius: 10px;
margin-bottom: 1rem;
}
.sv-upsell-timer i {
color: var(--sv-accent);
font-size: 1.125rem;
}
.sv-upsell-timer strong {
color: var(--sv-accent);
font-variant-numeric: tabular-nums;
font-size: 1rem;
}
/* Badges rassurance */
.sv-upsell-trust {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1.25rem;
margin-bottom: 2rem;
}
.sv-upsell-trust__item {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--sv-gray-700);
}
.sv-upsell-trust__item i {
color: var(--sv-primary);
font-size: 0.875rem;
}
@media (max-width: 575.98px) {
.sv-upsell-trust {
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
}
/* Footer content */
.sv-upsell-footer-content {
background: #fff;
border: 1.5px solid var(--sv-gray-100);
border-radius: 16px;
padding: 1.5rem 2rem;
}
@media (max-width: 575.98px) {
.sv-upsell-footer-content {
padding: 1rem;
}
}
/* =====================================================================
CATÉGORIES — Listing + navigation inter-catégorie
===================================================================== */
.sv-cat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (min-width: 576px) {
.sv-cat-grid {
gap: 1.25rem;
}
}
@media (min-width: 992px) {
.sv-cat-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* --- Card catégorie --- */
.sv-cat-card {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: var(--sv-gray-900);
border: 1.5px solid var(--sv-gray-100);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.sv-cat-card:hover {
transform: translateY(-6px);
box-shadow:
0 20px 40px rgba(14, 109, 74, 0.12),
0 0 0 1.5px var(--sv-primary);
}
.sv-cat-card__img {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: var(--sv-gray-50);
}
.sv-cat-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.sv-cat-card:hover .sv-cat-card__img img {
transform: scale(1.06);
}
.sv-cat-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
transparent 40%,
rgba(0, 0, 0, 0.45) 100%
);
transition: opacity 0.3s;
opacity: 0.7;
}
.sv-cat-card:hover .sv-cat-card__overlay {
opacity: 1;
}
.sv-cat-card__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--sv-gray-50) 0%, #e5f0eb 100%);
}
.sv-cat-card__placeholder i {
font-size: 3rem;
color: var(--sv-primary);
opacity: 0.25;
}
.sv-cat-card__body {
padding: 1.25rem 1.5rem 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.sv-cat-card__name {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 0.5rem;
color: var(--sv-gray-900);
}
.sv-cat-card__desc {
font-size: 0.875rem;
color: var(--sv-gray-700);
line-height: 1.5;
margin-bottom: 0.75rem;
flex: 1;
}
.sv-cat-card__link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
color: var(--sv-primary);
font-weight: 700;
font-size: 0.875rem;
transition: gap 0.2s;
}
.sv-cat-card:hover .sv-cat-card__link {
gap: 0.625rem;
}
.sv-cat-card__link i {
font-size: 0.75rem;
transition: transform 0.2s;
}
.sv-cat-card:hover .sv-cat-card__link i {
transform: translateX(3px);
}
/* Mobile xs : 2 cols étroites — compacter padding et typographie, masquer desc */
@media (max-width: 575.98px) {
.sv-cat-card__body {
padding: 0.875rem 1rem 1rem;
}
.sv-cat-card__name {
font-size: 1rem;
margin-bottom: 0.375rem;
}
.sv-cat-card__desc {
display: none;
}
.sv-cat-card__link {
font-size: 0.8125rem;
}
}
/* --- Navigation inter-catégorie (show page) --- */
.sv-cat-nav {
background: #fff;
border-bottom: 1.5px solid var(--sv-gray-100);
padding: 0.75rem 0;
position: sticky;
top: 64px;
z-index: 50;
}
.sv-cat-nav__scroll {
display: flex;
gap: 0.5rem;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 2px;
}
.sv-cat-nav__scroll::-webkit-scrollbar {
display: none;
}
.sv-cat-nav__item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.125rem;
border-radius: 50px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--sv-gray-700);
text-decoration: none;
white-space: nowrap;
background: var(--sv-gray-50);
border: 1.5px solid var(--sv-gray-100);
transition: all 0.2s;
flex-shrink: 0;
}
.sv-cat-nav__item:hover {
border-color: var(--sv-primary);
color: var(--sv-primary);
background: rgba(14, 109, 74, 0.06);
}
.sv-cat-nav__item.is-active {
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 2px 8px rgba(14, 109, 74, 0.25);
}
.sv-cat-nav__thumb {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.sv-cat-nav__item.is-active .sv-cat-nav__thumb {
border: 1.5px solid rgba(255, 255, 255, 0.5);
}
/* =====================================================================
CONFIRMATION COMMANDE — Page post-upsell
===================================================================== */
.sv-confirmation {
padding: 4rem 0;
min-height: 70vh;
display: flex;
align-items: center;
background: var(--sv-gray-50);
}
.sv-confirmation__card {
max-width: 520px;
margin: 0 auto;
background: #fff;
border-radius: 20px;
padding: 3rem 2.5rem;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
border: 1.5px solid var(--sv-gray-100);
animation: sv-result-fadein 0.5s ease;
}
.sv-confirmation__icon {
width: 88px;
height: 88px;
border-radius: 50%;
background: linear-gradient(135deg, #e6f7ef 0%, #c8f0d8 100%);
box-shadow: 0 8px 24px rgba(14, 109, 74, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
animation: sv-result-pop 0.45s ease 0.1s both;
}
.sv-confirmation__icon i {
font-size: 2.5rem;
color: var(--sv-primary);
}
.sv-confirmation__title {
font-size: 1.625rem;
font-weight: 800;
color: var(--sv-gray-900);
margin-bottom: 0.625rem;
letter-spacing: -0.01em;
}
.sv-confirmation__subtitle {
font-size: 0.9375rem;
color: var(--sv-gray-700);
line-height: 1.7;
margin: 0 auto 1.5rem;
}
.sv-confirmation__ref {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--sv-gray-50);
border: 1.5px solid var(--sv-gray-100);
border-radius: 10px;
padding: 0.5rem 1.25rem;
margin-bottom: 1.75rem;
}
.sv-confirmation__ref-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--sv-gray-700);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sv-confirmation__ref-value {
font-size: 0.875rem;
font-weight: 800;
color: var(--sv-primary);
font-family: monospace;
}
.sv-confirmation__details {
display: flex;
flex-direction: column;
gap: 0.625rem;
margin-bottom: 2rem;
text-align: left;
}
.sv-confirmation__detail {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--sv-gray-700);
background: var(--sv-gray-50);
border: 1px solid var(--sv-gray-100);
border-radius: 10px;
padding: 0.625rem 1rem;
}
.sv-confirmation__detail i {
font-size: 1rem;
color: var(--sv-primary);
flex-shrink: 0;
}
.sv-confirmation__actions {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.sv-confirmation__btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 700;
text-decoration: none;
border: none;
transition: all 0.2s;
min-height: 48px;
cursor: pointer;
}
.sv-confirmation__btn--primary {
color: #fff;
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
box-shadow: 0 4px 12px rgba(14, 109, 74, 0.2);
}
.sv-confirmation__btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(14, 109, 74, 0.3);
color: #fff;
}
.sv-confirmation__btn--whatsapp {
color: #fff;
background: #25d366;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}
.sv-confirmation__btn--whatsapp:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
color: #fff;
}
/* Hint sous le titre upsell */
.sv-upsell-header__hint {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9375rem;
margin: 0.75rem auto 0;
max-width: 500px;
}
@media (max-width: 575.98px) {
.sv-confirmation__card {
padding: 2rem 1.25rem;
border-radius: 16px;
}
.sv-confirmation__title {
font-size: 1.375rem;
}
.sv-confirmation__actions {
flex-direction: column;
}
.sv-confirmation__btn {
width: 100%;
justify-content: center;
}
}
/* ===================================================================
HERO CAROUSEL — produits les plus commandés
=================================================================== */
.sv-hero-carousel {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #f0faf5 0%, #e8f5ee 50%, #f9fafb 100%);
}
.sv-hero-carousel__track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sv-hero-carousel__track::-webkit-scrollbar {
display: none;
}
.sv-hero-carousel__slide {
min-width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
padding: 3rem 1.5rem;
flex-direction: column-reverse;
scroll-snap-align: start;
}
@media (min-width: 768px) {
.sv-hero-carousel__slide {
flex-direction: row;
padding: 4rem 3rem;
min-height: 420px;
}
}
@media (min-width: 992px) {
.sv-hero-carousel__slide {
padding: 4rem 6rem;
gap: 5rem;
}
}
.sv-hero-carousel__img {
flex-shrink: 0;
width: 240px;
height: 240px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(14, 109, 74, 0.15);
}
@media (min-width: 768px) {
.sv-hero-carousel__img {
width: 320px;
height: 320px;
}
}
@media (min-width: 992px) {
.sv-hero-carousel__img {
width: 380px;
height: 380px;
}
}
.sv-hero-carousel__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sv-hero-carousel__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--sv-gray-100);
color: var(--sv-gray-700);
font-size: 3rem;
}
.sv-hero-carousel__content {
text-align: center;
max-width: 440px;
}
@media (min-width: 768px) {
.sv-hero-carousel__content {
text-align: left;
}
}
.sv-hero-carousel__tagline {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--sv-primary);
background: rgba(14, 109, 74, 0.08);
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 0.75rem;
}
.sv-hero-carousel__title {
font-size: 1.5rem;
font-weight: 800;
color: var(--sv-gray-900);
line-height: 1.2;
margin: 0 0 1rem;
}
@media (min-width: 768px) {
.sv-hero-carousel__title {
font-size: 2rem;
}
}
@media (min-width: 992px) {
.sv-hero-carousel__title {
font-size: 2.25rem;
}
}
.sv-hero-carousel__prices {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
justify-content: center;
}
@media (min-width: 768px) {
.sv-hero-carousel__prices {
justify-content: flex-start;
}
}
.sv-hero-carousel__price {
font-size: 1.5rem;
font-weight: 800;
color: var(--sv-primary);
}
.sv-hero-carousel__old-price {
font-size: 1rem;
color: var(--sv-gray-700);
text-decoration: line-through;
opacity: 0.6;
}
.sv-hero-carousel__savings {
font-size: 0.75rem;
font-weight: 700;
color: #fff;
background: var(--sv-danger);
padding: 2px 8px;
border-radius: 4px;
}
.sv-hero-carousel__cta {
display: inline-flex;
align-items: center;
padding: 14px 32px;
background: var(--sv-primary);
color: #fff;
border-radius: 10px;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
transition:
background 0.2s,
transform 0.15s;
min-height: 52px;
}
.sv-hero-carousel__cta:hover {
background: var(--sv-dark);
transform: translateY(-1px);
color: #fff;
}
/* Flèches navigation */
.sv-hero-carousel__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--sv-gray-100);
color: var(--sv-gray-900);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.2s,
box-shadow 0.2s;
z-index: 10;
font-size: 1.125rem;
}
.sv-hero-carousel__arrow:hover {
background: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.sv-hero-carousel__arrow--prev {
left: 12px;
}
.sv-hero-carousel__arrow--next {
right: 12px;
}
@media (max-width: 575.98px) {
.sv-hero-carousel__arrow {
width: 36px;
height: 36px;
font-size: 0.875rem;
}
.sv-hero-carousel__arrow--prev {
left: 8px;
}
.sv-hero-carousel__arrow--next {
right: 8px;
}
}
/* Dots */
.sv-hero-carousel__dots {
display: flex;
justify-content: center;
gap: 8px;
padding-bottom: 1.5rem;
}
.sv-hero-carousel__dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background: var(--sv-gray-100);
cursor: pointer;
transition:
background 0.2s,
width 0.3s;
padding: 0;
}
.sv-hero-carousel__dot--active {
background: var(--sv-primary);
width: 28px;
border-radius: 5px;
}
/* ===================================================================
PREUVES D'EXPÉDITION
=================================================================== */
.sv-shipping-proofs {
padding: 2.5rem 0 2rem;
background: #fff;
}
/* --- Carousel --- */
.sv-shipping-proofs__carousel {
position: relative;
display: flex;
align-items: center;
gap: 12px;
}
.sv-shipping-proofs__viewport {
flex: 1;
overflow: hidden;
}
.sv-shipping-proofs__track {
display: flex;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-shipping-proofs__card {
flex: 0 0 100%;
padding: 0 8px;
box-sizing: border-box;
}
@media (min-width: 576px) {
.sv-shipping-proofs__card {
flex: 0 0 50%;
}
}
@media (min-width: 768px) {
.sv-shipping-proofs__card {
flex: 0 0 33.333%;
}
}
@media (min-width: 992px) {
.sv-shipping-proofs__card {
flex: 0 0 25%;
padding: 0 10px;
}
}
/* --- Card interne --- */
.sv-shipping-proofs__card-inner {
background: #fff;
border-radius: 16px;
border: 1.5px solid var(--sv-gray-100);
overflow: hidden;
transition:
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.3s;
}
.sv-shipping-proofs__card:hover .sv-shipping-proofs__card-inner {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(14, 109, 74, 0.1);
}
/* --- Image --- */
.sv-shipping-proofs__img {
position: relative;
aspect-ratio: 4/5;
background: var(--sv-gray-50);
overflow: hidden;
}
.sv-shipping-proofs__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-shipping-proofs__card:hover .sv-shipping-proofs__img img {
transform: scale(1.04);
}
.sv-shipping-proofs__number {
position: absolute;
top: 10px;
right: 10px;
background: var(--sv-primary);
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
padding: 3px 9px;
border-radius: 6px;
letter-spacing: 0.02em;
}
/* --- Zone info sous l'image --- */
.sv-shipping-proofs__info {
padding: 12px 14px 14px;
text-align: left;
}
.sv-shipping-proofs__caption {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--sv-gray-900);
line-height: 1.35;
}
.sv-shipping-proofs__caption i {
color: var(--sv-primary);
font-size: 0.8125rem;
flex-shrink: 0;
}
.sv-shipping-proofs__desc {
font-size: 0.75rem;
color: var(--sv-gray-700);
margin: 3px 0 0;
line-height: 1.4;
}
/* --- Flèches navigation --- */
.sv-shipping-proofs__arrow {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid var(--sv-gray-100);
background: #fff;
color: var(--sv-gray-900);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.2s,
border-color 0.2s,
box-shadow 0.2s,
color 0.2s;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
z-index: 2;
}
.sv-shipping-proofs__arrow:hover {
background: var(--sv-primary);
border-color: var(--sv-primary);
color: #fff;
box-shadow: 0 4px 16px rgba(14, 109, 74, 0.22);
}
.sv-shipping-proofs__arrow:disabled {
opacity: 0.25;
cursor: default;
pointer-events: none;
}
.sv-shipping-proofs__arrow i {
font-size: 1.125rem;
line-height: 1;
}
@media (max-width: 575.98px) {
.sv-shipping-proofs__arrow {
display: none;
}
}
/* --- Dots pagination --- */
.sv-shipping-proofs__dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 1.5rem;
}
.sv-shipping-proofs__dot {
width: 8px;
height: 8px;
border-radius: 4px;
border: none;
background: var(--sv-gray-100);
cursor: pointer;
padding: 0;
position: relative;
transition:
background 0.25s,
width 0.25s;
}
.sv-shipping-proofs__dot--active {
background: var(--sv-primary);
width: 24px;
}
/* --- Mobile : scroll-snap swipeable --- */
@media (max-width: 575.98px) {
.sv-shipping-proofs {
padding: 1.75rem 0 1.5rem;
}
.sv-shipping-proofs__carousel {
gap: 0;
}
.sv-shipping-proofs__viewport {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 6px;
}
.sv-shipping-proofs__viewport::-webkit-scrollbar {
display: none;
}
.sv-shipping-proofs__track {
transform: none !important;
transition: none;
}
.sv-shipping-proofs__card {
flex: 0 0 86%;
padding: 0 6px;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.sv-shipping-proofs__card-inner {
border-radius: 14px;
}
.sv-shipping-proofs__zoom {
opacity: 1;
transform: scale(1);
width: 28px;
height: 28px;
bottom: 8px;
right: 8px;
font-size: 0.75rem;
}
.sv-shipping-proofs__dots {
margin-top: 1rem;
gap: 4px;
}
.sv-shipping-proofs__dot {
width: 8px;
height: 8px;
}
.sv-shipping-proofs__dot::after {
content: "";
position: absolute;
inset: -14px;
}
.sv-shipping-proofs__dot--active {
width: 28px;
}
}
/* --- Total --- */
/* ===================================================================
TÉMOIGNAGES CLIENTS
=================================================================== */
.sv-testimonials {
padding: 2.5rem 0 2rem;
background: #fff;
}
/* --- Carousel --- */
.sv-testimonials__carousel {
position: relative;
display: flex;
align-items: center;
gap: 12px;
}
.sv-testimonials__viewport {
flex: 1;
overflow: hidden;
}
.sv-testimonials__track {
display: flex;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-testimonials__slide {
flex: 0 0 100%;
padding: 0 8px;
box-sizing: border-box;
}
@media (min-width: 576px) {
.sv-testimonials__slide {
flex: 0 0 50%;
}
}
@media (min-width: 768px) {
.sv-testimonials__slide {
flex: 0 0 33.333%;
}
}
@media (min-width: 992px) {
.sv-testimonials__slide {
flex: 0 0 25%;
padding: 0 10px;
}
}
/* --- Card --- */
.sv-testimonials__card {
background: #fff;
border-radius: 16px;
overflow: hidden;
border: 1.5px solid var(--sv-gray-100);
transition:
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.3s;
}
.sv-testimonials__slide:hover .sv-testimonials__card {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(14, 109, 74, 0.1);
}
/* --- Image --- */
.sv-testimonials__img {
position: relative;
width: 100%;
aspect-ratio: 4/5;
overflow: hidden;
background: var(--sv-gray-50);
}
.sv-testimonials__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-testimonials__slide:hover .sv-testimonials__img img {
transform: scale(1.04);
}
/* --- Info --- */
.sv-testimonials__info {
padding: 12px 14px 14px;
text-align: left;
}
.sv-testimonials__name {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.8125rem;
font-weight: 700;
color: var(--sv-gray-900);
}
.sv-testimonials__name i {
color: var(--sv-primary);
font-size: 0.8125rem;
flex-shrink: 0;
}
.sv-testimonials__desc {
display: block;
font-size: 0.75rem;
color: var(--sv-gray-700);
margin-top: 3px;
line-height: 1.4;
}
/* --- Flèches --- */
.sv-testimonials__arrow {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid var(--sv-gray-100);
background: #fff;
color: var(--sv-gray-900);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.2s,
border-color 0.2s,
box-shadow 0.2s,
color 0.2s;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
z-index: 2;
}
.sv-testimonials__arrow:hover {
background: var(--sv-primary);
border-color: var(--sv-primary);
color: #fff;
box-shadow: 0 4px 16px rgba(14, 109, 74, 0.22);
}
.sv-testimonials__arrow:disabled {
opacity: 0.25;
cursor: default;
pointer-events: none;
}
.sv-testimonials__arrow i {
font-size: 1.125rem;
line-height: 1;
}
@media (max-width: 575.98px) {
.sv-testimonials__arrow {
display: none;
}
}
/* --- Dots --- */
.sv-testimonials__dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 1.5rem;
}
.sv-testimonials__dot {
width: 8px;
height: 8px;
border-radius: 4px;
border: none;
background: var(--sv-gray-100);
cursor: pointer;
padding: 0;
position: relative;
transition:
background 0.25s,
width 0.25s;
}
.sv-testimonials__dot--active {
background: var(--sv-primary);
width: 24px;
}
/* --- Mobile : scroll-snap swipeable --- */
@media (max-width: 575.98px) {
.sv-testimonials {
padding: 1.75rem 0 1.5rem;
}
.sv-testimonials__carousel {
gap: 0;
}
.sv-testimonials__viewport {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 6px;
}
.sv-testimonials__viewport::-webkit-scrollbar {
display: none;
}
.sv-testimonials__track {
transform: none !important;
transition: none;
}
.sv-testimonials__slide {
flex: 0 0 86%;
padding: 0 6px;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.sv-testimonials__card {
border-radius: 14px;
}
.sv-testimonials__zoom {
opacity: 1;
transform: scale(1);
width: 28px;
height: 28px;
bottom: 8px;
right: 8px;
font-size: 0.75rem;
}
.sv-testimonials__dots {
margin-top: 1rem;
gap: 4px;
}
.sv-testimonials__dot {
width: 8px;
height: 8px;
}
.sv-testimonials__dot::after {
content: "";
position: absolute;
inset: -14px;
}
.sv-testimonials__dot--active {
width: 28px;
}
}
/* --- Total --- */
/* --- Icône zoom sur images cliquables (preuves + témoignages) --- */
.sv-shipping-proofs__zoom,
.sv-testimonials__zoom {
position: absolute;
bottom: 10px;
right: 10px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--sv-gray-900);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
opacity: 0;
transform: scale(0.8);
transition:
opacity 0.25s,
transform 0.25s;
pointer-events: none;
}
.sv-shipping-proofs__img:hover .sv-shipping-proofs__zoom,
.sv-testimonials__img:hover .sv-testimonials__zoom {
opacity: 1;
transform: scale(1);
}
.sv-shipping-proofs__img,
.sv-testimonials__img {
cursor: pointer;
}
/* ===================================================================
LIGHTBOX — Visualisation plein écran + zoom
=================================================================== */
.sv-lightbox {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition:
opacity 0.35s,
visibility 0.35s;
}
.sv-lightbox.is-open {
opacity: 1;
visibility: visible;
}
/* Backdrop */
.sv-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Fermer */
.sv-lightbox__close {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.2s,
border-color 0.2s;
}
.sv-lightbox__close:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.3);
}
/* Header : compteur + hint */
.sv-lightbox__header {
position: absolute;
top: 18px;
left: 20px;
z-index: 10;
display: flex;
align-items: center;
gap: 16px;
}
.sv-lightbox__counter {
font-size: 0.8125rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
letter-spacing: 0.04em;
}
.sv-lightbox__hint {
font-size: 0.6875rem;
color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
gap: 5px;
transition: opacity 0.4s;
}
.sv-lightbox.is-zoomed .sv-lightbox__hint {
opacity: 0;
}
/* Navigation */
.sv-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.2s,
border-color 0.2s,
transform 0.2s;
}
.sv-lightbox__nav--prev {
left: 16px;
}
.sv-lightbox__nav--next {
right: 16px;
}
.sv-lightbox__nav:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
}
.sv-lightbox__nav:disabled {
opacity: 0.15;
pointer-events: none;
}
@media (max-width: 575.98px) {
.sv-lightbox__nav {
width: 40px;
height: 40px;
font-size: 1.125rem;
}
.sv-lightbox__nav--prev {
left: 8px;
}
.sv-lightbox__nav--next {
right: 8px;
}
}
/* Zone image */
.sv-lightbox__stage {
position: relative;
z-index: 5;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 60px 80px;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
@media (max-width: 575.98px) {
.sv-lightbox__stage {
padding: 56px 8px 72px;
}
}
.sv-lightbox__img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
transform-origin: center center;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
cursor: zoom-in;
}
.sv-lightbox.is-zoomed .sv-lightbox__img {
cursor: grab;
transition: none;
}
.sv-lightbox.is-zoomed .sv-lightbox__img.is-dragging {
cursor: grabbing;
}
/* Caption */
.sv-lightbox__footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
text-align: center;
padding: 12px 20px 18px;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
pointer-events: none;
}
.sv-lightbox__caption {
font-size: 0.8125rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
margin: 0;
line-height: 1.4;
}
/* ===================================================================
LIVRAISON & PAIEMENT
=================================================================== */
.sv-delivery-payment {
padding: 2.5rem 0 2rem;
background: #fff;
}
/* Grille unifiée livraison + paiement */
.sv-delivery-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 576px) {
.sv-delivery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
.sv-delivery-grid { grid-template-columns: repeat(3, 1fr); }
}
.sv-delivery-grid__card {
display: flex;
align-items: flex-start;
gap: 14px;
background: #fff;
border: 1.5px solid var(--sv-gray-100);
border-radius: 14px;
padding: 1.25rem;
transition: border-color 0.2s, box-shadow 0.3s, transform 0.3s;
}
.sv-delivery-grid__card:hover {
border-color: var(--sv-primary);
box-shadow: 0 8px 24px rgba(14, 109, 74, 0.08);
transform: translateY(-2px);
}
.sv-delivery-grid__card--highlight {
border-color: var(--sv-primary);
background: rgba(14, 109, 74, 0.02);
}
/* Icône carrée gradient — même style que sv-section-icon et sv-trust-item__icon */
.sv-delivery-grid__icon {
width: 44px;
height: 44px;
background: linear-gradient(135deg, var(--sv-primary) 0%, #1a8f62 100%);
color: #fff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(14, 109, 74, 0.15);
}
.sv-delivery-grid__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sv-delivery-grid__title {
font-size: 0.875rem;
font-weight: 700;
color: var(--sv-gray-900);
margin: 0;
line-height: 1.3;
}
.sv-delivery-grid__price {
font-size: 1rem;
font-weight: 800;
color: var(--sv-primary);
}
.sv-delivery-grid__detail {
font-size: 0.75rem;
color: var(--sv-gray-700);
line-height: 1.4;
}
.sv-delivery-grid__note {
font-size: 0.6875rem;
color: var(--sv-gray-700);
margin-top: 2px;
display: flex;
align-items: center;
gap: 4px;
}
.sv-delivery-grid__note i {
color: var(--sv-primary);
font-size: 0.75rem;
}
/* ============================================================
GALERIE — Dots indicateurs + zoom desktop + curseur
============================================================ */
.sv-gallery-dots {
display: flex;
justify-content: center;
gap: 0.375rem;
margin-top: 0.625rem;
}
.sv-gallery-dot {
width: 44px;
height: 44px;
border-radius: 0;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sv-gallery-dot::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sv-gray-100);
transition: all 200ms;
}
.sv-gallery-dot--active::after {
background: var(--sv-primary);
width: 10px;
height: 10px;
}
/* Zoom desktop — curseur loupe */
@media (min-width: 992px) {
.sv-gallery-main {
cursor: zoom-in;
}
.sv-gallery-main--zoomed {
cursor: crosshair;
}
.sv-gallery-main img {
transition: transform 200ms ease;
}
}
/* ============================================================
FORMULAIRE — Validation visuelle par champ
============================================================ */
.sv-finput--error {
border-color: var(--sv-danger) !important;
}
.sv-finput--valid {
border-color: var(--sv-success) !important;
}
.sv-finput-error-msg {
color: var(--sv-danger);
font-size: 0.75rem;
margin-top: 0.25rem;
line-height: 1.3;
}
/* ============================================================
PARTAGE — Boutons WhatsApp + Facebook
============================================================ */
.sv-share-section {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--sv-gray-100);
text-align: center;
}
.sv-share-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--sv-gray-700);
margin-bottom: 0.75rem;
}
.sv-share-buttons {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.sv-share-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.625rem 1.25rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 700;
text-decoration: none;
color: #fff;
transition: all 200ms;
min-height: 44px;
}
.sv-share-btn--whatsapp {
background: #25d366;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}
.sv-share-btn--whatsapp:hover {
background: #1da851;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
color: #fff;
}
.sv-share-btn--facebook {
background: #1877f2;
box-shadow: 0 4px 12px rgba(24, 119, 242, 0.2);
}
.sv-share-btn--facebook:hover {
background: #1565c0;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(24, 119, 242, 0.3);
color: #fff;
}
@media (max-width: 575.98px) {
.sv-share-buttons {
flex-direction: column;
align-items: stretch;
}
.sv-share-btn {
justify-content: center;
}
}
/* ============================================================
PRODUITS APPARENTÉS — Carousel horizontal scroll-snap
============================================================ */
.sv-related-carousel-wrap {
position: relative;
}
.sv-related-carousel {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 0.5rem;
}
.sv-related-carousel::-webkit-scrollbar {
display: none;
}
.sv-related-carousel .sv-related-card {
scroll-snap-align: start;
flex-shrink: 0;
width: 200px;
}
@media (min-width: 576px) {
.sv-related-carousel .sv-related-card {
width: 220px;
}
}
@media (min-width: 992px) {
.sv-related-carousel .sv-related-card {
width: 240px;
}
}
/* Flèches navigation carousel */
.sv-related-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid var(--sv-gray-100);
background: #fff;
color: var(--sv-gray-900);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--sv-shadow-md);
transition: all 200ms;
font-size: 1rem;
min-width: 44px;
min-height: 44px;
}
.sv-related-arrow:hover {
background: var(--sv-primary);
color: #fff;
border-color: var(--sv-primary);
}
.sv-related-arrow--prev {
left: -0.5rem;
}
.sv-related-arrow--next {
right: -0.5rem;
}
@media (max-width: 767.98px) {
.sv-related-arrow {
display: none;
}
}
/* ============================================================
PAGE AUTHENTIFICATION — Login / Auth
============================================================ */
.sv-auth-body {
margin: 0;
min-height: 100vh;
background: linear-gradient(135deg, #f0faf5 0%, #e8f5ee 40%, var(--sv-gray-50) 100%);
font-family: system-ui, -apple-system, sans-serif;
}
.sv-auth-page {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
}
.sv-auth-card {
width: 100%;
max-width: 420px;
background: #fff;
border-radius: 20px;
border: 1px solid var(--sv-gray-100);
box-shadow: 0 8px 40px rgba(14, 109, 74, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
padding: 2.5rem 2rem 2rem;
}
@media (max-width: 575.98px) {
.sv-auth-card { padding: 2rem 1.5rem 1.5rem; border-radius: 16px; }
}
.sv-auth-card__logo {
text-align: center;
margin-bottom: 1.75rem;
}
.sv-auth-card__logo img {
height: 56px;
width: auto;
filter: drop-shadow(0 2px 8px rgba(14, 109, 74, 0.12));
}
.sv-auth-card__title {
font-size: 1.5rem;
font-weight: 800;
color: var(--sv-gray-900);
margin: 0 0 0.25rem;
letter-spacing: -0.02em;
}
.sv-auth-card__subtitle {
font-size: 0.875rem;
color: var(--sv-gray-700);
margin: 0 0 1.5rem;
}
/* Alerte erreur */
.sv-auth-alert {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: rgba(163, 45, 45, 0.06);
border: 1px solid rgba(163, 45, 45, 0.15);
border-radius: 10px;
font-size: 0.8125rem;
color: var(--sv-danger);
font-weight: 500;
margin-bottom: 1.25rem;
}
.sv-auth-alert i {
flex-shrink: 0;
font-size: 1rem;
}
/* Formulaire */
.sv-auth-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.sv-auth-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.sv-auth-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--sv-gray-900);
}
.sv-auth-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.sv-auth-input-wrap > i {
position: absolute;
left: 14px;
font-size: 1rem;
color: var(--sv-gray-700);
opacity: 0.5;
pointer-events: none;
z-index: 1;
}
.sv-auth-input {
width: 100%;
padding: 12px 14px 12px 42px;
border: 1.5px solid var(--sv-gray-100);
border-radius: 10px;
font-size: 16px;
font-family: inherit;
color: var(--sv-gray-900);
background: var(--sv-gray-50);
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.sv-auth-input:focus {
outline: none;
border-color: var(--sv-primary);
box-shadow: 0 0 0 3px rgba(14, 109, 74, 0.08);
background: #fff;
}
.sv-auth-input::placeholder {
color: #9ca3af;
}
/* Toggle mot de passe */
.sv-auth-toggle-pw {
position: absolute;
right: 10px;
width: 36px;
height: 36px;
border: none;
background: none;
color: var(--sv-gray-700);
opacity: 0.5;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
border-radius: 8px;
transition: opacity 0.2s, background 0.2s;
}
.sv-auth-toggle-pw:hover {
opacity: 1;
background: var(--sv-gray-50);
}
/* Bouton submit */
.sv-auth-submit {
width: 100%;
padding: 14px;
background: var(--sv-primary);
color: #fff;
border: none;
border-radius: 10px;
font-size: 0.9375rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
min-height: 50px;
margin-top: 0.5rem;
box-shadow: 0 4px 14px rgba(14, 109, 74, 0.2);
}
.sv-auth-submit:hover {
background: var(--sv-dark);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(14, 109, 74, 0.3);
}
.sv-auth-submit:active {
transform: translateY(0);
}
/* Footer carte */
.sv-auth-card__footer {
text-align: center;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--sv-gray-100);
}
.sv-auth-card__footer a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--sv-primary);
text-decoration: none;
transition: gap 0.2s;
}
.sv-auth-card__footer a:hover {
gap: 10px;
}
/* Alerte succès */
.sv-auth-alert--success {
background: rgba(14, 109, 74, 0.06);
border-color: rgba(14, 109, 74, 0.15);
color: var(--sv-primary);
}
/* Lien mot de passe oublié */
.sv-auth-forgot {
text-align: right;
margin-top: -0.25rem;
}
.sv-auth-forgot a {
font-size: 0.8125rem;
font-weight: 500;
color: var(--sv-primary);
text-decoration: none;
transition: color 0.2s;
}
.sv-auth-forgot a:hover {
color: var(--sv-dark);
text-decoration: underline;
}
/* Input code OTP */
.sv-auth-input--code {
font-family: 'Courier New', monospace;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 8px;
text-align: center;
padding-left: 42px;
}
/* Lien retour sous le formulaire */
.sv-auth-card__link-row {
text-align: center;
margin-top: 1.25rem;
}
.sv-auth-card__link-row a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--sv-primary);
text-decoration: none;
transition: gap 0.2s;
}
.sv-auth-card__link-row a:hover {
gap: 10px;
}
/* Copyright */
.sv-auth-page__copy {
margin-top: 1.5rem;
font-size: 0.75rem;
color: var(--sv-gray-700);
opacity: 0.6;
}
/* =====================================================================
SCROLL-ASSIST CTA — Pill flottante "Je commande" avec ring de progression
Apparaît pendant la lecture, masquée dès que le formulaire entre en vue.
Mobile-first, accessible, WCAG AA (44px min-height, contraste AA).
===================================================================== */
.sv-scroll-form-cta {
position: fixed;
/* Empilement droit (mobile) : sticky bar 0 → FAB WhatsApp (136) → gap aéré → CTA — hors zone social proof popup */
right: 16px;
bottom: 204px;
left: auto;
min-height: 44px;
padding: 8px 18px 8px 48px;
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
color: var(--sv-primary);
border: 1.5px solid var(--sv-primary);
border-radius: 28px;
font-family: inherit;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
box-shadow: 0 10px 24px rgba(14, 109, 74, 0.2), 0 2px 6px rgba(14, 109, 74, 0.08);
z-index: 99;
opacity: 0;
transform: translateY(14px) scale(0.96);
pointer-events: none;
transition:
opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
background 180ms ease,
color 180ms ease,
box-shadow 220ms ease;
will-change: transform, opacity;
}
.sv-scroll-form-cta.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
animation: sv-scroll-cta-breathe 4.8s ease-in-out 1s infinite;
}
/* Respiration subtile — dopamine sans agressivité */
@keyframes sv-scroll-cta-breathe {
0%, 85%, 100% { transform: translateY(0) scale(1); }
92% { transform: translateY(-2px) scale(1.03); }
}
.sv-scroll-form-cta:hover,
.sv-scroll-form-cta:focus-visible {
background: var(--sv-primary);
color: #fff;
box-shadow: 0 14px 30px rgba(14, 109, 74, 0.3);
outline: none;
}
.sv-scroll-form-cta:hover .sv-scroll-form-cta__icon,
.sv-scroll-form-cta:focus-visible .sv-scroll-form-cta__icon {
color: #fff;
}
.sv-scroll-form-cta:active {
transform: translateY(0) scale(0.98);
}
/* Ring SVG — progression de lecture */
.sv-scroll-form-cta__ring {
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
pointer-events: none;
}
.sv-scroll-form-cta__ring-bg {
fill: none;
stroke: rgba(14, 109, 74, 0.14);
stroke-width: 2.5;
}
.sv-scroll-form-cta__ring-fill {
fill: none;
stroke: var(--sv-accent);
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 106.8;
stroke-dashoffset: 106.8;
transform: rotate(-90deg);
transform-origin: center;
transition: stroke-dashoffset 220ms ease-out;
}
/* Flèche animée centrée sur l'axe exact du ring (ring.left 5 + ring.width/2 = 23) */
.sv-scroll-form-cta__icon {
position: absolute;
left: 23px;
top: 50%;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
line-height: 1;
color: var(--sv-primary);
transform: translate(-50%, -50%);
transition: color 180ms ease;
animation: sv-scroll-cta-arrow-down 1.8s ease-in-out infinite;
}
.sv-scroll-form-cta.is-upward .sv-scroll-form-cta__icon {
animation-name: sv-scroll-cta-arrow-up;
}
/* Descente : le chiffre va vers le bas, l'utilisateur doit descendre vers le formulaire */
@keyframes sv-scroll-cta-arrow-down {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(-50%, -30%); }
}
/* Remontée : le formulaire est au-dessus, invite au scroll vers le haut */
@keyframes sv-scroll-cta-arrow-up {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(-50%, -70%); }
}
.sv-scroll-form-cta__label {
white-space: nowrap;
}
/* Tablette — social proof reste à bottom:80px → laisser un bon écart au-dessus */
@media (min-width: 768px) {
.sv-scroll-form-cta {
right: 24px;
bottom: 200px;
font-size: 0.9375rem;
}
}
/* Desktop — social proof descend à bottom:24px, on peut baisser un peu la CTA */
@media (min-width: 992px) {
.sv-scroll-form-cta {
bottom: 152px;
}
}
/* Offset de scroll pour les cibles du CTA — laisse respirer le titre
sous le header sticky (~70px) + marge confort ; évite que la section
arrivée soit collée contre le haut du viewport. */
.sv-checkout-form-wrap,
.sv-product-options {
scroll-margin-top: 96px;
}
@media (max-width: 991.98px) {
.sv-checkout-form-wrap,
.sv-product-options {
scroll-margin-top: 80px;
}
}
/* Flash du formulaire à l'arrivée — confirme l'action, dopamine */
.sv-checkout-form-wrap.is-attracting,
.sv-product-options.is-attracting {
animation: sv-form-arrive-glow 1200ms ease-out;
}
@keyframes sv-form-arrive-glow {
0% {
box-shadow: 0 0 0 0 rgba(14, 109, 74, 0.45);
}
50% {
box-shadow: 0 0 0 14px rgba(14, 109, 74, 0.06);
}
100% {
box-shadow: 0 0 0 0 rgba(14, 109, 74, 0);
}
}
/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.sv-scroll-form-cta.is-visible {
animation: none;
}
}