/* ==========================================================================
Viva Discount — rafraîchissement visuel
v9 — 2026-09-30 : réécriture complète après les retours d'Eric.
Chargé APRÈS global.css par un en dur dans header.tpl (?v= à incrémenter).
Ne jamais modifier global.css.
RÈGLE DE PORTÉE, à respecter pour toute règle ajoutée ici :
aucune règle générique (a, h1-h5, .button, .btn) ne s'applique à tout le site.
Chaque règle est limitée à une zone (#header, #menu, #product_list, #product,
#layer_cart, .vv-reassurance) ou au corps HORS TUNNEL.
Le tunnel de commande — panier, adresses, livraison, paiement, identité —
est identifié par l'id du body et n'est JAMAIS touché.
Charte :
orange #e8590c accent : boutons d'achat, badges de remise
survol #c94d0a
sombre #1f2a3a titres, prix, menu, pied de page
gris #6b7280 texte secondaire
blocs #f3f3f1
Le vert #1e7e34 est RÉSERVÉ aux pastilles et bandeaux de viva-promo.js.
Le rouge ne subsiste que pour les messages d'erreur.
========================================================================== */
:root {
--vv-accent: #e8590c;
--vv-accent-fonce: #c94d0a;
--vv-sombre: #1f2a3a;
--vv-gris: #6b7280;
--vv-bloc: #f3f3f1;
--vv-bord: #e5e5e5;
}
/* ------------------------------------------------------------------ TYPO */
body { font-family: 'Montserrat', Verdana, Helvetica, sans-serif; }
#columns h1, #columns h2, #columns h3,
.bloc_selection > p,
#product_list li a.name,
#product_list li .prices .price,
#product h1, #product .our_price_display,
#layer_cart .layer_cart_product h2 {
font-family: 'Archivo', 'Montserrat', Verdana, Helvetica, sans-serif;
}
/* Titres : sombre. Limité à #columns, donc jamais dans le tunnel. */
body:not(#order):not(#order-opc):not(#order-confirmation):not(#address):not(#addresses):not(#authentication):not(#identity) #columns h1,
body:not(#order):not(#order-opc):not(#order-confirmation):not(#address):not(#addresses):not(#authentication):not(#identity) #columns h2,
body:not(#order):not(#order-opc):not(#order-confirmation):not(#address):not(#addresses):not(#authentication):not(#identity) #columns h3,
.bloc_selection > p {
color: var(--vv-sombre);
font-weight: 800;
letter-spacing: -0.01em;
}
#left_column li a:hover,
.breadcrumb a:hover,
#product_list li a.name:hover { color: var(--vv-accent); }
/* --------------------------------------------------------------- EN-TÊTE */
#header { padding: 14px 0; }
#header .logo { display: inline-block; line-height: 0; }
#header .logo img, #header .logo picture img {
height: 44px; width: auto; max-width: 100%; display: block;
}
/* Le téléphone était en rouge #ff151a. */
#header p.tel, #header p.tel a {
color: var(--vv-sombre) !important;
font-family: 'Archivo', 'Montserrat', sans-serif;
font-weight: 800;
}
#header p.tel span { color: var(--vv-gris) !important; font-weight: 400; }
/* Pastille du panier : orange, plus rouge. */
#header .shopping_cart .ajax_cart_quantity,
#header .shopping_cart span.ajax_cart_quantity,
#header .shopping_cart .cart_block_quantity,
.shopping_cart .ajax_cart_quantity {
background: var(--vv-accent) !important;
background-color: var(--vv-accent) !important;
color: #fff !important;
}
/* Menu principal : sombre au lieu du rouge. */
.bloc_menu, #menu { background: var(--vv-sombre) !important; }
/* NE JAMAIS masquer le débordement de .bloc_menu : il contient le hamburger,
et un overflow:hidden a supprimé tout accès aux catégories sur mobile. */
.bloc_menu { overflow: visible !important; }
#menu .menu_principal { overflow: hidden; }
#menu .menu_principal > li > a { color: #fff; }
#menu .menu_principal > li > a:hover,
#menu .menu_principal > li:hover > a { color: var(--vv-accent); }
#menu .menu_principal > li.flash > a { color: var(--vv-accent); font-weight: 800; }
/* z-index retire le 30/09 : seule regle de la refonte pouvant creer un calque
au-dessus de la fenetre « produit ajoute au panier ». */
/* ------------------------------------------------------------ RÉASSURANCE */
.vv-reassurance {
clear: both; float: none; width: 100%; display: block;
background: var(--vv-bloc);
border-bottom: 1px solid var(--vv-bord);
font-size: 13px; color: var(--vv-sombre);
}
.vv-reassurance .vv-rea-in {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 8px 28px; max-width: 1140px; margin: 0 auto; padding: 9px 16px;
}
.vv-reassurance .vv-rea-in span {
display: inline-flex; align-items: center; gap: 7px;
white-space: nowrap; float: none; position: static;
}
.vv-reassurance .vv-rea-in span::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--vv-accent); flex: none;
}
/* ------------------------------------------------------------- VIGNETTES */
#product_list li {
position: relative; background: #fff;
border: 1px solid var(--vv-bord); border-radius: 6px;
transition: box-shadow .18s ease, transform .18s ease;
}
#product_list li:hover {
box-shadow: 0 6px 18px rgba(31, 42, 58, .13);
transform: translateY(-2px);
}
#product_list li .product-image-container { position: relative; display: block; }
#product_list li a.name {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; min-height: 2.6em; line-height: 1.3;
font-weight: 600; font-size: 14px; color: var(--vv-sombre); text-decoration: none;
}
#product_list li .prices .price {
font-weight: 900; font-size: 19px; color: var(--vv-sombre) !important;
}
#product_list li .prices .old_price {
color: var(--vv-gris) !important; font-size: 13px; font-weight: 400;
text-decoration: line-through;
}
/* Badge de remise : DANS le conteneur de l'image, en bas à droite.
Le gabarit place .promo à l'intérieur de .product-image-container, qui est en
position:relative : le badge suit l'image à toutes les largeurs et ne peut plus
tomber sur le titre ni sur le prix, contrairement au calage en pixels précédent. */
#product_list li .comments_note,
#product_list li .star_content,
#product_list li .nb-comments { display: none !important; }
#product_list li .stock > span:first-child {
background: var(--vv-bloc) !important; color: var(--vv-sombre) !important;
border: 1px solid var(--vv-bord); border-radius: 3px;
font-size: 11px; font-weight: 600;
}
/* ------------------------------------------- BOUTONS D'ACHAT (hors tunnel) */
/* Limité aux boutons d'ajout au panier et à la fenêtre de confirmation.
Les boutons du tunnel et des formulaires de compte ne sont PAS touchés. */
#product #add_to_cart button,
#product #add_to_cart .exclusive,
#product_list .ajax_add_to_cart_button,
#layer_cart .button-container a.btn,
#layer_cart .button-container span.exclusive {
background: var(--vv-accent) !important;
background-image: none !important;
border: 0 !important;
border-radius: 4px !important;
color: #fff !important;
font-family: 'Archivo', 'Montserrat', sans-serif;
font-weight: 800;
text-shadow: none !important;
transition: background-color .15s ease;
}
#product #add_to_cart button:hover,
#product #add_to_cart .exclusive:hover,
#product_list .ajax_add_to_cart_button:hover,
#layer_cart .button-container a.btn:hover {
background: var(--vv-accent-fonce) !important;
color: #fff !important;
}
/* --------------------------- FENÊTRE « PRODUIT AJOUTÉ AU PANIER » */
/* Elle fait partie de l'expérience produit, pas du tunnel. Mes règles génériques
la laissaient bariolée : titre rouge, deux boutons de couleurs différentes,
croix rouge. Tout est ramené à la charte, sans revenir au style d'avant. */
#layer_cart { color: var(--vv-sombre); }
#layer_cart .layer_cart_product h2,
#layer_cart .layer_cart_cart h2,
#layer_cart #layer_cart_product_title,
#layer_cart .product-name,
#layer_cart .layer_cart_product .product-name,
#layer_cart .title { color: var(--vv-sombre) !important; font-weight: 800; }
/* « Continuer mes achats » : contour orange. « Voir mon panier » : plein orange. */
#layer_cart .button-container .continue,
#layer_cart .continue {
background: #fff !important;
background-image: none !important;
color: var(--vv-accent) !important;
border: 2px solid var(--vv-accent) !important;
border-radius: 4px !important;
font-family: 'Archivo', 'Montserrat', sans-serif;
font-weight: 800;
text-shadow: none !important;
}
#layer_cart .button-container .continue:hover,
#layer_cart .continue:hover {
background: var(--vv-accent) !important;
color: #fff !important;
}
#layer_cart .cross,
#layer_cart .icon-remove,
#layer_cart .close {
color: var(--vv-sombre) !important;
opacity: 1;
}
/* ---------------------------------------------------------- FICHE PRODUIT */
#product .our_price_display,
#product .our_price_display span,
#product #our_price_display {
color: var(--vv-sombre) !important;
font-family: 'Archivo', 'Montserrat', sans-serif;
font-weight: 900;
}
#product .old-price, #product #old_price { color: var(--vv-gris) !important; }
/* Icônes du bloc de réassurance de la fiche : elles étaient en rouge sombre. */
#product .viva-item svg,
#product .viva-item svg path,
#product .viva-item svg circle,
#product .viva-item svg rect {
stroke: var(--vv-accent) !important;
color: var(--vv-accent) !important;
}
#product .viva-item strong { color: var(--vv-sombre) !important; }
/* ----------------------------------------------------------------- MOBILE */
@media (max-width: 767px) {
#header { padding: 8px 0; height: auto !important; }
#header .logo img, #header .logo picture img { height: 34px; }
/* icônes compte et panier à 24 px, libellés masqués : ils chevauchaient
la ligne de réassurance et faisaient un en-tête de près de 400 px. */
#header .shopping_cart > a img,
#header .header_user_info img,
#header #blockuserinfo img,
#header .header_user_info a img { width: 24px !important; height: 24px !important; }
#header .shopping_cart > a > span:not(.ajax_cart_quantity),
#header .header_user_info span.title,
#header #blockuserinfo .title { display: none !important; }
/* réassurance : deux mentions, une seule ligne */
.vv-reassurance .vv-rea-in { gap: 4px 14px; padding: 7px 10px; font-size: 12px; }
.vv-reassurance .vv-rea-in span:nth-child(n+3) { display: none; }
/* bouton d'achat pleine largeur */
#product #add_to_cart button,
#product #add_to_cart .exclusive { width: 100% !important; display: block; }
}
/* ==========================================================================
v10 — 2026-09-30 : les 4 points d'Eric.
Les sélecteurs réels du thème sont #bloc_compte, #bloc_panier, span.nb_product,
#languages-block-top, p.tel, #search_block_top. Les règles v9 visaient
.shopping_cart et .header_user_info, qui n'existent PAS ici : sans effet.
========================================================================== */
/* ------- 3. TÉLÉPHONE : sombre, gras, avec une icône (ordinateur) ------- */
#header p.tel {
color: var(--vv-sombre) !important;
font-family: 'Archivo', 'Montserrat', sans-serif;
font-weight: 800;
display: inline-flex;
align-items: center;
gap: 8px;
}
#header p.tel span { color: var(--vv-gris) !important; font-weight: 400; }
/* pastille du nombre d'articles : orange */
#bloc_panier .nb_product,
#header .nb_product {
background: var(--vv-accent) !important;
color: #fff !important;
}
/* ---- 2. BADGE DE LA FICHE : étiquette, plus de gros rond rouge ---- */
#product .bloc_top_product .bloc_left { position: relative; }
/* ---- 4. BOUTON AXEPTIO : décalé, couleur inchangée ----
Injecté par Google Tag Manager, pas par un module PrestaShop. On ne touche
qu'à sa position pour qu'il cesse de masquer la galerie et les boutons d'achat. */
[class*="axeptio"][class*="widget"],
#axeptio_btn_configure,
div[id^="axeptio"],
.axeptio_mount > div {
bottom: auto !important;
top: 50% !important;
left: auto !important;
right: 6px !important;
transform: translateY(-50%) !important;
z-index: 9 !important;
}
/* ---- v11 : le VRAI bouton d'achat de ce thème est « input.add_cart ».
Mesuré à rgb(186,192,77) — un vert-kaki — parce que les règles précédentes
visaient #add_to_cart button, qui n'existe pas dans le gabarit pinkeo. ---- */
#product input.add_cart,
input.add_cart,
#buy_block .add_cart {
background: var(--vv-accent) !important;
background-image: none !important;
border: 0 !important;
border-radius: 4px !important;
color: #fff !important;
font-family: 'Archivo', 'Montserrat', sans-serif;
font-weight: 800;
text-shadow: none !important;
cursor: pointer;
}
#product input.add_cart:hover,
input.add_cart:hover { background: var(--vv-accent-fonce) !important; }
@media (max-width: 767px) {
#product input.add_cart, input.add_cart {
width: 100% !important; display: block; height: 50px;
}
}
/* ---- v12 : en-tête mobile — les règles flex/order de la v10 cassaient la mise en
page (réassurance au-dessus du logo, recherche par-dessus le contenu, hamburger
disparu). Elles sont RETIRÉES. On ne garde que le minimum sans risque. ---- */
@media (max-width: 767px) {
#header .logo img, #header .logo picture img { height: 32px !important; }
#bloc_compte, #languages-block-top, #header p.tel { display: none !important; }
.vv-reassurance .vv-rea-in { gap: 4px 16px; padding: 7px 10px; font-size: 13px; }
.vv-reassurance .vv-rea-in span:nth-child(n+3) { display: none !important; }
#product input.add_cart, input.add_cart { width: 100% !important; display: block; height: 50px; }
}
/* ---- v13 : le badge est desormais DANS .product-image-container (classe vv-badge).
Celui qui reste dans le bloc des prix est masque. ---- */
@media (max-width: 767px) {
}
/* v14 : .product-image-container contient un flottant, donc sa hauteur
etait nulle et le badge « bottom » se posait en haut. On englobe le flottant. */
#product_list li .product-image-container { overflow: hidden; }
/* ==========================================================================
v15 — 2026-09-30 : RETOUR A LA GEOMETRIE D ORIGINE des badges de remise.
Demande d Eric : forme, taille, position et taille de texte identiques a
l origine ; SEULE la couleur change, #ff151a -> #1f2a3a.
Les gabarits product-list.tpl et index.tpl ont ete restaures (le badge est
revenu dans le bloc des prix, la classe vv-badge n existe plus).
Regles d origine du theme pinkeo, relevees dans global.css :
#product_list li .promo -> rond 40x40, top/right 10px, 10 px de texte
#product .bloc_top_product .bloc_left .promo -> rond 80x80, top/right 10px, 15 px de texte
========================================================================== */
/* liste : rond de 40 px en haut a droite, comme avant */
/* fiche produit : rond de 80 px en haut a droite, comme avant */
/* on annule l englobement du flottant, qui ne servait qu au badge deplace */
#product_list li .product-image-container { overflow: visible; }
/* v16 : les gabarits sont restaures, mais le HTML servi contient encore les badges
« vv-badge » du rendu precedent (cache, et la regle Viva interdit tout vidage).
On les masque : il ne reste que le badge d origine. A retirer quand le cache
aura expire et que « vv-badge » aura disparu du HTML. */
/* ==========================================================================
v19 — 2026-09-30, point 0 : barre de defilement horizontale sur l accueil.
Mesure : scrollWidth 1708 pour clientWidth 1280, soit 428 px de trop, a 1280
comme a 1568 px. Coupable identifie par mesure : les