.mask{background: rgba(0,0,0,.74)}
.mask-alt{background: rgba(0, 0, 0, 0.3)}
.banner-gradient {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
}
.bg-gradient-gray{
background: linear-gradient(90deg, var(--gray-color), #fff);
}
.shadow{box-shadow: 3px 4px 11px 2px rgba(0, 0, 0, 0.22);}
.shadow-alt{box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .1);}
.shadow-alt-2{box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .2);}
.font-galada{font-family: galada;}
.text-shadow{text-shadow: 0px 4px 4px rgba(0, 0, 0, .25);}
.text-shadow-white{text-shadow: 0px 0px 2px rgba(255, 255, 255, .75);}
.blur{filter: blur(2px)}
.transparent{opacity: 0.65}
.transparent-alt{opacity: 0.07}
.transparent-alt-2{opacity: 0.44}
.transparent-alt-3{opacity: 0.17}
.font-63{font-size: 3.28125vw}
.font-48{font-size: 2.5vw}
.font-43{font-size: 2.2395833vw}
.font-28{font-size: 1.4583333vw}
.font-25{font-size: 1.3020833vw}
.font-12{font-size: 0.625vw}
@media(max-width:768px){
.font-28{font-size: 12pt}
.font-12{font-size: 8pt}
}
.xright-half-alt{transform: translateX(-50%);}
.xleft-half-alt{transform: translateX(50%);}
.ytop-half-alt{transform: translateY(50%);}
.ybottom-half-alt{transform: translateY(-50%);}
#productsMenus{display: none;}
#productsMenus.opened{display: block; animation: show-alt 1s}
.os-slider-btn > i{
min-width: var(--slide-dot-size);
width: var(--slide-dot-size);
height: var(--slide-dot-size);
border: var(--2px) solid white;
}
@media(max-width:768px){
.os-slider-btn > i{
min-width: 15px;
width: 15px;
height: 15px;
}
}
#testimonies .os-slider-btn > i{border-color: var(--success-color)}
.os-slider-btn.active > i{background: transparent}
.product:not(.half-10){
width: 11.875vw;
min-width: 120px;
}
.product figure{height: 11.875vw; min-height: 150px}
.os-increment:active, .os-decrement:active{background-color: rgba(201, 201, 201,1);}
.os-increment:active *, .os-decrement:active *{transform: scale(.75);}
.addproduct:active {
background-color: #FF8C00 !important; /* Orange foncé pour le clic */
}
.addproduct img{transform: scale(1); transition: all .5s}
.addproduct:active img{transform: scale(.8)}
#basketCounter{
width: 1.1458333vw;
height: 1.1458333vw;
font-size: .6770833vw;
}
@media(max-width:768px){
#basketCounter{
width: 20px;
height: 20px;
font-size: 8px;
}
}
@keyframes animBasket{
from{transform: rotate(15deg); transform-origin: 50% 0%;}
50%{transform: rotate(-15deg); transform-origin: 50% 0%;}
to{transform: rotate(0deg); transform-origin: 50% 0%;}
}
#basketIcon.animate{
transform-origin: 50% 0%;
animation: animBasket 1s;
}
#basket {
top: var(--header-height);
width: 27.0729167vw;
min-width: 350px;
display: none;
}
#basket.opened {display: block;}
#basket > div{max-height: calc(100vh - var(--header-height));}
@media(max-width:768px){
#basket{
width: calc(100% - var(--content-margin));
height: calc(100vh - var(--header-height));
}
#basket > div{height: 100%;}
}
#caddy {
max-height: 100%;
overflow: auto;
}
#loginPopup, #signupPopup{display: none;}
#loginPopup.opened, #signupPopup.opened{display: block;}
.os-search::-webkit-input-placeholder{color: white; opacity: 1;}
.os-search::-moz-placeholder{color: white; opacity: 1;}
.os-search::-ms-input-placeholder{color: white; opacity: 1;}
.os-search::placeholder{color: white; opacity: 1;}
.yt-preview{width: 56.5625vw; height: 31.6145vw}
.flickr-frame, .youtube-frame, #article .slide-box{height: 31.6145vw;}
.video figure{height: 14.25vw}
.video i.fa{opacity: .65; transform: scale(1); transition: all .5s}
.video:hover i.fa{opacity: 1; transform: scale(1.05); }
.recipe figure{animation: rotateRecipe 30s infinite; transition-timing-function: ease-out;}
@keyframes rotateRecipe{
from{transform: rotate(0deg); transform-origin: 50% 50%;}
to{transform: rotate(360deg); transform-origin: 50% 50%;}
}
textarea{height: 12vw}
.cooform label{
font-size: var(--h4-size);
font-weight: 500;
display: block;
color: var(--gray-color-alt);
margin-top: var(--10px);
margin-bottom: var(--8px);
}
.cooform input:not(.fill),
.cooform textarea,
.cooform select{
border-radius: var(--8px);
background: unset;
font-size: var(--h4-size);
color: var(--success-color-alt);
width: 100%;
border: solid var(--3px) var(--success-color-alt);
padding: var(--10px) var(--15px);
}
@media(max-width:768px){
.cooform input:not(.fill),
.cooform textarea,
.cooform select{
border-radius: var(--5px);
border-width: 1px;
padding: var(--7px) var(--15px);
}
}
.cooformAlt input:not(.fill),
.cooformAlt textarea,
.cooformAlt select{
font-size: var(--p-size);
border: var(--1px) solid var(--black-color-alt);
width: 100%;
background: none;
border-radius: 0;
padding: var(--5px) var(--15px);
margin-top: var(--3px);
margin-bottom: var(--10px);
}
.check-btn{
display: inline-block;
width: 40px;
height: 16px;
border-radius: 8px;
background: #ccc;
position: relative;
}
input[type='checkbox']:checked + .check-btn {
background: rgba(255, 183, 51, 0.5) !important; /* Jaune-orange semi-transparent */
}
.check-btn::before{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--gray-color);
position: absolute;
left: -2px;
top: -2px;
content: "";
transition: all .3s;
}
input[type='checkbox']:checked + .check-btn::before {
background: #FFB733 !important; /* Jaune-orange vif pour le curseur */
}
/* =========================================
REGLES GLOBALES (Pour éviter le double header)
========================================= */
/* Par défaut (Desktop), on cache TOUS les éléments mobiles */
.mobile-only,
.mobile-only-img,
.mobile-menu-trigger,
.mobile-user-icon {
display: none !important;
}
/* On s'assure que les éléments desktop sont visibles */
.desktop-only,
.desktop-only-img,
.desktop-auth {
display: flex !important; /* ou block selon besoin */
}
/* Style du bouton "Nos catégories" desktop */
.os-click[data-target="#productsMenus"] {
cursor: pointer;
transition: all 0.3s ease;
}
.os-click[data-target="#productsMenus"]:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* ==========================================================================
1. RÈGLES GLOBALES (DESKTOP PAR DÉFAUT)
========================================================================== */
/* --- Nettoyage Desktop (Pour éviter les doublons) --- */
/* On cache strictement tout ce qui appartient au mobile */
.mobile-only,
.mobile-only-img,
.mobile-menu-trigger,
.mobile-user-icon {
display: none !important;
}
/* On affiche les éléments desktop */
.desktop-only,
.desktop-only-img,
.desktop-auth {
display: flex !important;
}
/* --- Fix Espacement Desktop (Panier collé) --- */
/* Ajoute de l'espace entre le bloc "Se connecter/S'inscrire" et le Panier */
.desktop-auth {
margin-right: 25px; /* Espace confortable */
}
/* Style du bouton "Nos catégories" desktop */
.os-click[data-target="#productsMenus"] {
cursor: pointer;
transition: all 0.3s ease;
}
/* ==========================================================================
VERSION MOBILE (≤ 768px)
========================================================================== */
@media (max-width: 768px) {
/* --- VISIBILITÉ ÉLÉMENTS ------------------------------------------ */
.desktop-only,
.desktop-only-img,
.desktop-auth {
display: none !important;
}
.mobile-only,
.mobile-only-img,
.mobile-menu-trigger,
.mobile-user-icon {
display: flex !important;
}
/* --- HEADER GLOBAL ------------------------------------------------ */
#header {
padding: 0 5px !important;
background-color: var(--success-color) !important;
height: var(--header-height);
}
/* Logo */
.logo-link {
flex: 0 0 auto;
margin-right: 4px !important; /* un peu plus d'air qu'avant */
}
.logo-link img {
height: 34px !important; /* légèrement plus petit pour harmonie */
}
/* --- ZONE RECHERCHE ----------------------------------------------- */
.search-group-container {
flex: 1 1 auto;
min-width: 0;
padding: 0 !important;
margin-right: 6px !important; /* espace avant icônes droite */
}
.search-container {
background: transparent !important;
height: 34px !important;
margin: 0 4px 0 0 !important;
position: relative;
display: flex;
align-items: stretch;
}
/* Burger menu */
.mobile-menu-trigger {
width: 34px;
min-width: 34px;
height: 100%;
background: #fff !important;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
padding: 0;
}
.mobile-menu-trigger i {
color: #000 !important;
font-size: 18px;
}
/* Input recherche */
#search {
flex: 1 1 auto;
min-width: 0;
width: 100% !important;
height: 100% !important;
border: none !important;
background: transparent !important;
padding: 0 6px !important;
color: white !important;
font-size: 14px !important;
outline: none;
}
#search::placeholder {
color: rgba(255, 255, 255, 0.75);
}
/* Bouton loupe (priorité très haute) */
.os-search-btn {
z-index: 105 !important;
width: 32px !important;
min-width: 32px !important;
height: 32px !important;
margin: 1px !important;
background-color: var(--warning-color) !important;
border-radius: 4px !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto !important;
}
/* --- ZONE ICÔNES DROITE ------------------------------------------- */
.icons-group {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px !important;
position: relative;
z-index: 100 !important;
}
/* Icône utilisateur (priorité > panier) */
.mobile-user-icon {
z-index: 104 !important;
position: relative;
width: 34px !important;
height: 34px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
pointer-events: auto !important;
cursor: pointer;
}
.mobile-user-icon i {
font-size: 26px !important;
color: white !important;
}
/* Panier (zone cliquable réduite) */
.cart-container {
z-index: 103 !important;
position: relative;
margin: 0 !important;
padding: 0 !important;
}
.cart-container > span.os-click {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
pointer-events: auto !important;
}
.cart-container figure {
width: 28px !important;
height: 28px !important;
}
#basketCounter {
width: 16px !important;
height: 16px !important;
font-size: 9px !important;
top: -4px;
right: -4px;
}
/* --- POPUP PANIER ------------------------------------------------- */
#basket {
position: fixed !important;
inset: var(--header-height) 0 0 0 !important;
width: 100% !important;
height: calc(100% - var(--header-height)) !important;
z-index: 9999 !important; /* très haut, mais après ouverture */
background: rgba(0,0,0,0.6) !important;
display: none !important;
pointer-events: none !important; /* ← important : empêche les clics fantômes */
}
#basket.opened,
#basket.show {
display: block !important;
pointer-events: auto !important;
}
#basket > div {
background: white;
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
display: flex;
flex-direction: column;
pointer-events: auto !important;
}
#caddy {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* --- CORRECTION CONNEXION (popup) -------------------------------- */
#loginPopup.anim-show {
display: none !important;
}
#loginPopup.opened {
display: block !important;
}
}
@media (max-width: 768px) {
/* On force la priorité absolue pour éviter tout chevauchement */
.os-search-btn,
.mobile-user-icon,
.mobile-user-icon *,
.os-search-btn * {
z-index: 9999 !important;
pointer-events: auto !important;
position: relative;
}
/* Le panier et son déclencheur en dessous */
.cart-container,
.cart-container > span.os-click {
z-index: 9000 !important;
}
/* Le popup panier reste très haut MAIS n'interfère pas avant clic */
#basket {
pointer-events: none !important;
}
#basket.opened,
#basket.show {
pointer-events: auto !important;
}
}
/* =========================================
FIX BANNIERE (Slider Principal) - Version Compacte
========================================= */
@media (max-width: 768px) {
/* 1. Conteneur Global : On réduit la taille */
#banner {
height: auto !important;
min-height: auto !important; /* CORRECTION : On enlève le 100vh pour réduire la taille globale */
padding-top: var(--header-height);
background-attachment: scroll; /* Fixe le fond sur mobile */
}
/* 2. Zone du Slider */
#banner .fill.relative {
padding-top: 0 !important;
height: auto !important;
display: flex;
flex-direction: column;
}
/* 3. Structure interne */
.banner {
display: flex;
flex-direction: column;
height: auto !important;
}
/* 4. L'Image (Vos réglages conservés) */
.banner figure {
width: 95% !important;
height: 25vh !important;
/* On met une petite marge en bas (10px) pour l'espace avec le texte */
margin: 10px auto 10px auto !important;
overflow: hidden;
}
.banner figure img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
/* 5. Le Bloc Texte : On réduit les espaces ici */
.banner > div.absolute {
position: relative !important;
width: 100% !important;
height: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
/* CORRECTION : On réduit fortement le padding pour remonter le texte */
/* Haut | Droite | Bas | Gauche */
padding: 5px 15px 30px 15px !important;
margin-left: 0 !important;
}
/* 6. Centrage */
.banner .fill.flex.col.middle.left {
align-items: center !important;
text-align: center !important;
justify-content: center !important;
}
/* 7. Typographie plus compacte */
.banner strong.h2 {
font-size: 20px !important; /* Un peu plus petit */
display: block;
margin-bottom: 5px !important; /* Réduit l'espace en dessous */
}
.banner h2.h1 {
font-size: 24px !important; /* Titre réduit pour prendre moins de place */
line-height: 1.2 !important;
width: 100% !important;
margin-top: 0 !important; /* Supprime l'espace au-dessus */
margin-bottom: 15px !important; /* Réduit l'écart avec le bouton */
}
/* Bouton plus compact */
.banner a.h3 {
font-size: 14px !important;
padding: 12px 22px !important;
}
/* 8. Les points de navigation (bullets) */
#banner .hheight.flex.col.center {
position: absolute;
bottom: 0px; /* On les colle en bas */
left: 0;
width: 100%;
height: auto !important;
z-index: 5;
padding-bottom: 25px;
margin-bottom: 35px !important; /* Réduit l'écart avec le bouton */
}
/* Réduire la taille des points */
.os-slider-btn > i {
width: 15px !important;
height: 15px !important;
min-width: 10px !important;
}
}
/* =========================================
1. STYLE DESKTOP (Fix du texte fouilli)
========================================= */
#categories-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.category-card {
display: flex; /* On passe la carte en flexbox colonne */
flex-direction: column;
width: 8.2vw; /* Largeur d'origine (desktop) */
max-width: 160px;
margin-bottom: 15px;
/* On s'assure que le contenu qui dépasse est caché */
overflow: hidden;
}
/* Image Desktop */
.category-card icon {
display: block;
position: relative;
width: 100%;
height: 8vw; /* Hauteur fixe pour l'image */
min-height: 80px;
}
/* TEXTE Desktop : C'est ici qu'on corrige le "fouilli" */
.category-card > div {
/* On annule le h100 qui posait problème */
height: auto !important;
flex: 1; /* Prend l'espace restant proprement */
display: flex;
align-items: center; /* Centre verticalement */
justify-content: center; /* Centre horizontalement */
padding: 5px 2px; /* Un peu d'espace */
}
/* On ajuste la taille du texte pour qu'il rentre */
.category-card span {
line-height: 1.2;
display: block;
}
/* =========================================
2. STYLE MOBILE (Jusqu'à 768px)
========================================= */
@media (max-width: 768px) {
/* --- LE CONTENEUR SLIDER (Correction du scroll bloqué) --- */
#categories-container {
display: flex;
flex-wrap: nowrap !important;
overflow-x: auto !important;
justify-content: flex-start !important; /* Force le début à gauche */
/* NOUVELLE METHODE pour "libérer les côtés" sans casser le scroll */
width: 100vw; /* Largeur de l'écran */
/* Cette formule magique annule les marges du parent pour toucher les bords */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
/* Espace interne pour que le premier et dernier item ne collent pas trop */
padding-left: 15px;
padding-right: 15px;
padding-bottom: 20px;
/* Fluidité */
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Cache la barre de scroll */
#categories-container::-webkit-scrollbar {
display: none;
}
/* --- IMPORTANT : CACHER LE SAUT DE LIGNE --- */
/* Il y a un
dans votre HTML après le 10ème item qui casse le slider */
#categories-container br {
display: none;
}
/* ... (Gardez le reste du code pour .category-card comme avant) ... */
/* --- LES CARTES (Plus grandes) --- */
.category-card {
display: flex;
flex-direction: column;
flex: 0 0 auto;
/* CHANGEMENT ICI : On passe de 28vw à 40vw */
width: 40vw !important;
/* On augmente la limite max pour les grands téléphones */
max-width: 180px;
margin-right: 15px;
margin-bottom: 0px;
background-color: var(--gray-color) !important;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
overflow: hidden;
}
/* --- L'IMAGE (Plus haute pour correspondre à la largeur) --- */
.category-card icon {
width: 100%;
/* CHANGEMENT ICI : On passe de 20vw à 30vw */
height: 30vw;
min-height: 110px; /* On augmente la taille minimale */
background: #fff;
display: block;
border-radius: 0 !important;
}
/* --- LE TEXTE --- */
.category-card > div {
height: auto !important;
min-height: 50px; /* Un peu plus d'espace vertical */
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
}
.category-card span {
font-size: 13px; /* Texte légèrement plus grand aussi */
line-height: 1.2;
white-space: normal;
text-align: center;
font-weight: 500; /* Un peu plus gras pour la lisibilité */
}
}
/* ==========================================================================
CORRECTIFS FINAUX (Header, Recherche, Panier)
========================================================================== */
/* ----------------------------------------------------------
1. FIX DESKTOP (Écrans > 768px)
---------------------------------------------------------- */
@media (min-width: 769px) {
/* Corrige la barre de recherche "trop longue" */
.search-container {
width: 100% !important;
max-width: 450px !important; /* Limite la largeur pour que la loupe reste à sa place */
}
/* Force l'input à remplir l'espace disponible dans la barre limitée */
#search {
flex: 1 !important;
width: auto !important;
}
/* Décolle le bouton Panier du bouton S'inscrire */
.desktop-auth {
margin-right: 35px !important; /* Espace ajouté ici */
}
}
/* ----------------------------------------------------------
2. FIX MOBILE (Écrans <= 768px)
---------------------------------------------------------- */
@media (max-width: 768px) {
/* --- LOGO & RECHERCHE --- */
/* Réduit la marge du logo pour donner de la place à la recherche */
.logo-link {
margin-right: 5px !important;
}
/* Le groupe de recherche prend TOUT l'espace disponible */
.search-group-container {
flex: 1 !important; /* Indispensable */
padding: 0 !important;
margin-right: 8px !important; /* Petit espace avant le bonhomme */
min-width: 0 !important; /* Permet au flex de réduire si besoin */
}
/* La barre blanche */
.search-container {
width: 150px !important;
margin: 0 !important;
}
/* L'INPUT : C'est ici qu'on l'élargit au maximum */
#search {
width: 35px !important; /* Astuce CSS : démarre à 0... */
flex-grow: 1 !important; /* ... et grandit pour remplir tout le vide */
min-width: 0 !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
/* --- PANIER & ICONES --- */
/* Groupe icônes droite */
.icons-group {
gap: 10px !important;
padding-left: 0 !important;
}
/* STABILITÉ DU PANIER (Empêche la fermeture auto) */
#basket {
position: fixed !important;
top: 60px !important; /* Hauteur du header */
left: 0 !important;
width: 100vw !important;
height: calc(100vh - 60px) !important;
/* Z-INDEX MAXIMUM : Passe au-dessus de tout le reste */
z-index: 2147483647 !important;
background: rgba(0,0,0,0.5) !important; /* Fond sombre */
display: none;
}
/* Quand il est ouvert */
#basket.opened {
display: block !important;
}
/* La boite blanche du panier */
#basket > div {
background: #fff !important;
width: 100% !important;
height: 100% !important;
display: flex;
flex-direction: column;
pointer-events: auto !important; /* Capture les clics pour éviter la fermeture */
}
}
/* ==========================================================================
CORRECTION DES HAUTEURS EN DESKTOP
========================================================================== */
@media (min-width: 769px) {
/* ----------------------------------------------------------
FIX HAUTEUR UNIFORME POUR TOUS LES ÉLÉMENTS DU HEADER
---------------------------------------------------------- */
/* 1. HEADER GLOBAL - Hauteur fixe - CORRIGÉ */
#header {
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
}
.hheight {
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
}
/* 2. LOGO - Même hauteur que le header */
.logo-link,
.logo-link figure {
height: 100% !important;
display: flex;
align-items: center;
}
.desktop-only-img {
height: 40px !important;
width: auto !important;
max-height: 100% !important;
object-fit: contain;
}
/* 3. BOUTON "NOS CATÉGORIES" - Même hauteur */
.os-click[data-target="#productsMenus"] {
height: 40px !important;
}
/* 4. BARRE DE RECHERCHE - Même hauteur */
.search-container {
height: 40px !important;
}
/* Input recherche */
#search {
height: 100% !important;
padding: 0 15px !important;
font-size: 14px !important;
}
/* Bouton loupe */
.os-search-btn {
height: 34px !important;
width: 34px !important;
margin: 3px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* 5. BOUTONS AUTHENTIFICATION - Même hauteur */
.desktop-auth {
height: 100% !important;
display: flex !important;
align-items: center !important;
gap: 15px !important;
margin-right: 25px !important;
}
.desktop-auth a {
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 25px !important;
font-size: 14px !important;
border-radius: 4px !important;
}
/* 6. PANIER - Même hauteur */
.cart-container {
height: 100% !important;
display: flex !important;
align-items: center !important;
}
.cart-container figure {
width: 30px !important;
height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#basketCounter {
width: 18px !important;
height: 18px !important;
font-size: 10px !important;
}
/* 7. ALIGNEMENT VERTICAL GLOBAL */
#header .flex.row.middle {
align-items: center !important;
}
/* 8. GARANTIR QUE TOUT EST SUR LA MÊME LIGNE */
#header > .relative > .relative.w100.flex.row.middle.space {
align-items: stretch !important;
}
/* Chaque enfant s'étire pour remplir la hauteur */
#header .logo-link,
#header .search-group-container,
#header .icons-group {
display: flex;
align-items: center;
}
/* =========================================
CORRECTION : EXCLURE LE MODAL DES RÈGLES DE HAUTEUR
========================================= */
/* Exclure spécifiquement le modal panier des règles de hauteur */
#basket,
#basket *,
#basket .hheight,
#basket .relative,
#basket > div,
#basket > div > * {
height: auto !important;
min-height: auto !important;
max-height: none !important;
}
}
/* ==========================================================================
OPTIMISATION MOBILE (Garder les réglages existants)
========================================================================== */
@media (max-width: 768px) {
/* Garder vos réglages mobiles existants */
#header {
height: 50px !important; /* Hauteur réduite en mobile */
}
.logo-link img {
height: 30px !important; /* Logo plus petit en mobile */
}
.search-container {
height: 35px !important;
}
.mobile-menu-trigger {
height: 35px !important;
}
/* Alignement vertical pour mobile */
#header .flex.row.middle {
align-items: center !important;
}
}
/* ==========================================================================
RÈGLES SUPPLÉMENTAIRES POUR L'ALIGNEMENT
========================================================================== */
/* Garantir que tout le contenu du header est aligné */
#header * {
box-sizing: border-box;
}
/* Flexbox pour alignement parfait */
#header > .relative {
display: flex !important;
align-items: center !important;
height: 100% !important;
}
/* Structure interne */
#header > .relative > .relative.w100.flex.row.middle.space {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 100% !important;
}
/* Logo */
.logo-link {
flex-shrink: 0;
display: flex;
align-items: center;
}
/* Zone de recherche */
.search-group-container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
/* Zone icônes droite */
.icons-group {
flex-shrink: 0;
display: flex;
align-items: center;
height: 100%;
}
/* =========================================
MENU CATÉGORIES MOBILE - 2 COLONNES AVEC POINTS
========================================= */
@media (max-width: 768px) {
/* Conteneur principal du menu */
#productsMenus {
position: fixed !important;
top: 60px !important; /* Ajustez selon la hauteur de votre header */
left: 0 !important;
right: 0 !important;
width: 100vw !important;
height: calc(100vh - 60px) !important;
background: #fff !important;
z-index: 9999 !important;
padding: 0 !important;
margin: 0 !important;
overflow-y: auto !important;
display: none !important;
}
#productsMenus.opened {
display: block !important;
}
/* Conteneur interne - Structure en 2 colonnes */
#productsMenus > div {
display: grid !important;
grid-template-columns: 1fr 1fr !important; /* Deux colonnes égales */
gap: 0 !important;
width: 100% !important;
max-width: 100% !important;
padding: 15px !important;
box-shadow: none !important;
margin: 0 !important;
background: transparent !important;
align-items: start !important;
justify-content: start !important;
}
/* Style des liens catégories */
#productsMenus a {
display: flex !important;
align-items: center !important;
padding: 12px 8px !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
text-decoration: none !important;
min-height: 50px;
width: 100% !important;
border-bottom: 1px solid #f0f0f0 !important;
transition: all 0.2s ease !important;
}
/* Colonne gauche (première moitié des catégories) */
#productsMenus a:nth-child(-n+10) {
grid-column: 1 !important;
border-right: 1px solid #f0f0f0 !important;
}
/* Colonne droite (deuxième moitié des catégories) */
#productsMenus a:nth-child(n+11) {
grid-column: 2 !important;
}
/* Cacher les icônes/images d'origine */
#productsMenus a icon,
#productsMenus a icon i,
#productsMenus a img {
display: none !important;
}
/* Points numérotés */
#productsMenus a::before {
content: "" !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 24px !important;
width: 24px !important;
height: 24px !important;
background: var(--success-color) !important;
color: white !important;
border-radius: 50% !important;
font-size: 11px !important;
font-weight: bold !important;
margin-right: 10px !important;
flex-shrink: 0 !important;
font-family: Arial, sans-serif !important;
}
/* Numérotation automatique - Colonne gauche (1-10) */
#productsMenus a:nth-child(1)::before { content: "1" !important; background: var(--success-color) !important; }
#productsMenus a:nth-child(2)::before { content: "2" !important; background: var(--success-color-alt) !important; }
#productsMenus a:nth-child(3)::before { content: "3" !important; background: #2ecc71 !important; }
#productsMenus a:nth-child(4)::before { content: "4" !important; background: #f39c12 !important; }
#productsMenus a:nth-child(5)::before { content: "5" !important; background: #9b59b6 !important; }
#productsMenus a:nth-child(6)::before { content: "6" !important; background: #1abc9c !important; }
#productsMenus a:nth-child(7)::before { content: "7" !important; background: var(--success-color) !important; }
#productsMenus a:nth-child(8)::before { content: "8" !important; background: var(--success-color-alt) !important; }
#productsMenus a:nth-child(9)::before { content: "9" !important; background: #16a085 !important; }
#productsMenus a:nth-child(10)::before { content: "10" !important; background: #8e44ad !important; }
/* Numérotation automatique - Colonne droite (11-20) */
#productsMenus a:nth-child(11)::before { content: "11" !important; background: #27ae60 !important; }
#productsMenus a:nth-child(12)::before { content: "12" !important; background: #2980b9 !important; }
#productsMenus a:nth-child(13)::before { content: "13" !important; background: var(--success-color) !important; }
#productsMenus a:nth-child(14)::before { content: "14" !important; background: #f1c40f !important; }
#productsMenus a:nth-child(15)::before { content: "15" !important; background: #7f8c8d !important; }
#productsMenus a:nth-child(16)::before { content: "16" !important; background: var(--success-color) !important; }
#productsMenus a:nth-child(17)::before { content: "17" !important; background: var(--success-color-alt) !important; }
#productsMenus a:nth-child(18)::before { content: "18" !important; background: var(--success-color) !important; }
#productsMenus a:nth-child(19)::before { content: "19" !important; background: #95a5a6 !important; }
#productsMenus a:nth-child(20)::before { content: "20" !important; background: var(--success-color) !important; }
/* Style du texte des catégories */
#productsMenus a span {
font-size: 13px !important;
color: #2c3e50 !important;
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
font-weight: 500 !important;
line-height: 1.3 !important;
flex: 1 !important;
}
/* Effet au survol */
#productsMenus a:hover {
background-color: #f8f9fa !important;
padding-left: 12px !important;
}
#productsMenus a:hover::before {
transform: scale(1.1);
transition: transform 0.2s ease;
}
}
/* =========================================
ANIMATION D'OUVERTURE
========================================= */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
#productsMenus.opened a {
animation: fadeInUp 0.3s ease forwards;
opacity: 0;
}
/* Délai progressif pour l'animation */
#productsMenus a:nth-child(1) { animation-delay: 0.05s; }
#productsMenus a:nth-child(2) { animation-delay: 0.1s; }
#productsMenus a:nth-child(3) { animation-delay: 0.15s; }
#productsMenus a:nth-child(4) { animation-delay: 0.2s; }
#productsMenus a:nth-child(5) { animation-delay: 0.25s; }
#productsMenus a:nth-child(6) { animation-delay: 0.3s; }
#productsMenus a:nth-child(7) { animation-delay: 0.35s; }
#productsMenus a:nth-child(8) { animation-delay: 0.4s; }
#productsMenus a:nth-child(9) { animation-delay: 0.45s; }
#productsMenus a:nth-child(10) { animation-delay: 0.5s; }
#productsMenus a:nth-child(11) { animation-delay: 0.55s; }
#productsMenus a:nth-child(12) { animation-delay: 0.6s; }
#productsMenus a:nth-child(13) { animation-delay: 0.65s; }
#productsMenus a:nth-child(14) { animation-delay: 0.7s; }
#productsMenus a:nth-child(15) { animation-delay: 0.75s; }
#productsMenus a:nth-child(16) { animation-delay: 0.8s; }
#productsMenus a:nth-child(17) { animation-delay: 0.85s; }
#productsMenus a:nth-child(18) { animation-delay: 0.9s; }
#productsMenus a:nth-child(19) { animation-delay: 0.95s; }
#productsMenus a:nth-child(20) { animation-delay: 1s; }
}
/* =========================================
RÈGLES DE SÛRETÉ
========================================= */
/* S'assurer que les anciens styles sont écrasés en mobile */
@media (max-width: 768px) {
#productsMenus a.scale-hover,
#productsMenus a.hoverflow,
#productsMenus a.transition,
#productsMenus a.bg-gray,
#productsMenus a.middle,
#productsMenus a.hz-10,
#productsMenus a.vt-15,
#productsMenus a.radius-40 {
all: unset !important;
display: flex !important;
align-items: center !important;
padding: 12px 8px !important;
width: 100% !important;
border-bottom: 1px solid #f0f0f0 !important;
}
/* Cacher absolument tous les éléments icon */
#productsMenus icon,
#productsMenus .icon,
#productsMenus i.fill,
#productsMenus img.contain {
display: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
}
}
/* =========================================
SECTION "FAIS TES COURSES EN UNE MINUTE" - MOBILE
========================================= */
@media (max-width: 768px) {
/* Conteneur principal */
.bg-warning.relative.w100.flex.row.space.gpadding {
flex-direction: column !important; /* Empile les éléments verticalement */
padding: 20px 15px !important; /* Réduit le padding */
min-height: auto !important;
gap: 20px !important; /* Espace entre les sections */
}
/* Figure avec l'image */
.bg-warning .relative.flex.row.center.anim-scrollt.anim-from-left.transition-3s.half {
width: 100% !important;
height: 200px !important; /* Hauteur fixe pour l'image */
overflow: hidden !important; /* Cache ce qui dépasse */
}
/* Image à l'intérieur */
.bg-warning img.h100 {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* Couvre l'espace sans déformation */
object-position: center !important;
}
/* Contenu texte et bouton */
.bg-warning .flex.col.middle.left.third-40.vt-80-in {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
order: 1 !important; /* Met le texte en haut */
text-align: center !important; /* Centre le texte en mobile */
align-items: center !important; /* Centre horizontalement */
}
/* Bouton "Faire mes courses" */
.bg-warning .os-click.bg-error.white.h3.bold.shadow.flex.row.middle.hz-40-in.vt-20-in.radius-5 {
width: 90% !important;
max-width: 280px !important;
height: 50px !important;
padding: 0 25px !important;
font-size: 16px !important;
background: linear-gradient(180deg, var(--success-color) 15.56%, var(--success-color-alt) 77.58%) !important;
transition: all 0.3s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important; /* Espace entre icône et texte */
}
/* Effet au survol du bouton */
.bg-warning .os-click.bg-error:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 15px rgba(59, 167, 255, 0.4) !important;
}
/* Effet au clic du bouton */
.bg-warning .os-click.bg-error:active {
transform: translateY(1px) !important;
box-shadow: 0 2px 8px rgba(59, 167, 255, 0.3) !important;
}
/* Icône dans le bouton */
.bg-warning .os-click .icon.small.relative.right-10 {
margin-right: 5px !important;
width: 24px !important;
height: 24px !important;
}
.bg-warning .os-click img.contain {
width: 100% !important;
height: 100% !important;
filter: brightness(0) invert(1) !important; /* Rend l'icône blanche */
}
/* Animation pour l'image */
@keyframes floatAnimation {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.bg-warning .relative.flex.row.center {
animation: floatAnimation 3s ease-in-out infinite;
}
}
/* =========================================
VERSION TABLETTE (769px - 1024px)
========================================= */
@media (min-width: 769px) and (max-width: 1024px) {
.bg-warning.relative.w100.flex.row.space.gpadding {
padding: 40px 30px !important;
gap: 40px !important;
}
.bg-warning .relative.flex.row.center {
height: 300px !important;
}
.bg-warning .success.extrabold.h1.font-galada {
font-size: 32px !important;
}
.bg-warning h2.flex.col.center.middle.white.bottom-40.top-20 {
font-size: 18px !important;
}
.bg-warning .os-click.bg-error.white.h3.bold.shadow.flex.row.middle {
height: 55px !important;
font-size: 17px !important;
}
/* Ajouter un dégradé de fond */
.bg-warning.relative.w100.flex.row.space.gpadding {
background: linear-gradient(135deg, var(--warning-color) 0%, var(--success-color) 100%) !important;
position: relative;
overflow: hidden;
}
/* Effet de bulles décoratives */
.bg-warning::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
top: -50px;
right: -50px;
}
.bg-warning::after {
content: "";
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
bottom: -30px;
left: -30px;
}
/* S'assurer que le contenu est au-dessus */
.bg-warning > * {
position: relative;
z-index: 2;
}
}
/* =========================================
ANIMATIONS SUPPLÉMENTAIRES
========================================= */
/* Animation d'apparition du texte */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.bg-warning .flex.col.middle.left.third-40.vt-80-in > * {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
}
.bg-warning .success.extrabold.h1.font-galada {
animation-delay: 0.2s;
}
.bg-warning h2.flex.col.center.middle.white.bottom-40.top-20 {
animation-delay: 0.4s;
}
.bg-warning .os-click.bg-error.white.h3.bold.shadow {
animation-delay: 0.6s;
}
}
/* =========================================
AMÉLIORATIONS VISUELLES POUR MOBILE
========================================= */
@media (max-width: 768px) {
/* Ajouter un dégradé de fond */
.bg-warning.relative.w100.flex.row.space.gpadding {
background: linear-gradient(135deg, var(--warning-color) 0%, var(--success-color) 100%) !important;
position: relative;
overflow: hidden;
}
/* Effet de bulles décoratives */
.bg-warning::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
top: -50px;
right: -50px;
}
.bg-warning::after {
content: "";
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
bottom: -30px;
left: -30px;
}
/* S'assurer que le contenu est au-dessus */
.bg-warning > * {
position: relative;
z-index: 2;
}
}
/* =========================================
CORRECTIONS POUR LES PETITS ÉCRANS
========================================= */
@media (max-width: 480px) {
.bg-warning.relative.w100.flex.row.space.gpadding {
padding: 15px 10px !important;
gap: 15px !important;
}
.bg-warning .relative.flex.row.center {
height: 180px !important;
}
.bg-warning .success.extrabold.h1.font-galada {
font-size: 24px !important;
margin-bottom: 10px !important;
}
.bg-warning h2.flex.col.center.middle.white.bottom-40.top-20 {
font-size: 14px !important;
margin: 5px 0 20px 0 !important;
}
.bg-warning .os-click.bg-error.white.h3.bold.shadow {
height: 45px !important;
font-size: 15px !important;
width: 100% !important;
max-width: 250px !important;
}
.bg-warning .os-click .icon.small.relative.right-10 {
width: 20px !important;
height: 20px !important;
}
}
/* =========================================
ACCESSIBILITÉ ET INTERACTIVITÉ
========================================= */
@media (max-width: 768px) {
/* Agrandir la zone cliquable du bouton */
.bg-warning .os-click {
cursor: pointer;
-webkit-tap-highlight-color: rgba(59, 167, 255, 0.3);
}
/* Feedback tactile pour mobile */
.bg-warning .os-click:active {
background-color: var(--success-color-alt) !important; /* Couleur plus foncée au clic */
}
/* Amélioration de la lisibilité */
.bg-warning h2.flex.col.center.middle.white {
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
}
/* =========================================
TRANSITIONS FLUIDES
========================================= */
.bg-warning .relative.flex.row.center,
.bg-warning .flex.col.middle.left.third-40,
.bg-warning .os-click {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* =========================================
MODAL "COURSE CHRONO" - VERSION MOBILE
========================================= */
@media (max-width: 768px) {
/* MODAL PRINCIPAL */
#shoppingChrono {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.85) !important; /* Fond plus sombre pour mieux faire ressortir */
z-index: 99999 !important; /* Au-dessus de tout */
display: none !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0 !important;
margin: 0 !important;
}
#shoppingChrono.anim-show,
#shoppingChrono.show,
#shoppingChrono.opened { /* <--- AJOUT ICI */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
animation: modalFadeIn 0.3s ease-out !important;
}
@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* CONTENEUR PRINCIPAL */
#shoppingChrono .flex.row.center {
width: 100% !important;
height: 100% !important;
padding: 20px 15px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
}
#shoppingChrono .htop-in.gpadding.top-40-in.flex.row.center.bottom-40-in {
width: 100% !important;
max-width: 500px !important; /* Largeur maximale pour les grands écrans */
padding: 0 !important;
margin: 0 !important;
}
/* BOÎTE BLANCHE DU MODAL */
#shoppingChrono .bg-white.shadow.bottom-20-in.half_80.hz-60-in.top-40-in.w100 {
width: 100% !important;
max-width: 100% !important;
padding: 25px 20px !important;
border-radius: 20px !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
margin: 0 !important;
max-height: 85vh !important;
overflow-y: auto !important;
}
/* TITRE */
#shoppingChrono h1.success.h2 {
font-size: 24px !important;
color: var(--success-color) !important;
text-align: center !important;
margin-bottom: 10px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
/* SOUS-TITRE */
#shoppingChrono p.gray-alt.h4.medium {
font-size: 15px !important;
color: #666 !important;
text-align: center !important;
margin-bottom: 25px !important;
line-height: 1.5 !important;
padding: 0 5px !important;
}
/* FORMULAIRE */
#shoppingChrono form#shoppingFormEmbedded {
width: 100% !important;
}
/* CHAMPS DE SAISIE */
#shoppingChrono .shopping-field.relative {
position: relative !important;
margin-bottom: 15px !important;
width: 100% !important;
}
#shoppingChrono input.os-obj {
width: 100% !important;
height: 50px !important;
padding: 0 15px 0 40px !important;
font-size: 16px !important;
border: 2px solid #e0e0e0 !important;
border-radius: 10px !important;
background: #f8f9fa !important;
transition: all 0.3s ease !important;
}
#shoppingChrono input.os-obj:focus {
border-color: var(--success-color) !important;
background: #fff !important;
box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2) !important;
outline: none !important;
}
#shoppingChrono input.os-obj::placeholder {
color: #999 !important;
font-size: 15px !important;
}
/* ICÔNE DE SUPPRESSION */
#shoppingChrono .os-remove {
position: absolute !important;
right: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 30px !important;
height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--success-color-alt) !important;
border-radius: 50% !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
z-index: 10 !important;
}
#shoppingChrono .os-remove:hover {
background: var(--success-color) !important;
transform: translateY(-50%) scale(1.1) !important;
}
#shoppingChrono .os-remove i.fa-times {
color: white !important;
font-size: 14px !important;
}
/* BOUTONS */
#shoppingChrono .flex.row.space.vt-20-in {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-top: 30px !important;
gap: 15px !important;
}
/* Bouton "Ajouter un besoin" */
#shoppingChrono button.os-obj-add {
width: 50px !important;
height: 50px !important;
background: linear-gradient(135deg, var(--success-color-alt), #27ae60) !important;
border: none !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3) !important;
}
#shoppingChrono button.os-obj-add:hover {
transform: scale(1.1) rotate(90deg) !important;
box-shadow: 0 6px 18px rgba(46, 204, 113, 0.4) !important;
}
#shoppingChrono button.os-obj-add .fa-plus {
font-size: 20px !important;
color: white !important;
}
/* Bouton "Lancer la course" */
#shoppingChrono button[type="submit"].anim-btn {
flex: 1 !important;
height: 50px !important;
background: linear-gradient(135deg, var(--success-color), #2ecc71) !important;
border: none !important;
border-radius: 25px !important;
font-size: 16px !important;
font-weight: 600 !important;
color: white !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#shoppingChrono button[type="submit"]:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(46, 204, 113, 0.4) !important;
}
#shoppingChrono button[type="submit"]:active {
transform: translateY(1px) !important;
box-shadow: 0 2px 10px rgba(46, 204, 113, 0.3) !important;
}
/* BOUTON FERMER */
#shoppingChrono .absolute.top.right.bg-error.padding-10 {
position: absolute !important;
top: 20px !important;
right: 20px !important;
width: 40px !important;
height: 40px !important;
background: var(--success-color-alt) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 100000 !important;
box-shadow: 0 4px 12px rgba(59, 167, 255, 0.3) !important;
transition: all 0.3s ease !important;
}
#shoppingChrono .absolute.top.right.bg-error.padding-10:hover {
background: var(--success-color) !important;
transform: rotate(90deg) scale(1.1) !important;
}
#shoppingChrono span[data-target="#shoppingChrono"] {
width: 20px !important;
height: 20px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
/* ANIMATION POUR LES NOUVEAUX CHAMPS */
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#shoppingChrono .shopping-field {
animation: slideIn 0.3s ease-out;
}
}
/* =========================================
AMÉLIORATIONS POUR TRÈS PETITS ÉCRANS
========================================= */
@media (max-width: 480px) {
#shoppingChrono .bg-white.shadow.bottom-20-in.half_80.hz-60-in.top-40-in.w100 {
padding: 20px 15px !important;
border-radius: 15px !important;
max-height: 90vh !important;
}
#shoppingChrono h1.success.h2 {
font-size: 22px !important;
}
#shoppingChrono p.gray-alt.h4.medium {
font-size: 14px !important;
}
#shoppingChrono input.os-obj {
height: 45px !important;
font-size: 15px !important;
}
#shoppingChrono .flex.row.space.vt-20-in {
flex-direction: column !important;
gap: 10px !important;
}
#shoppingChrono button.os-obj-add {
order: 2 !important;
width: 45px !important;
height: 45px !important;
margin-top: 10px !important;
}
#shoppingChrono button[type="submit"].anim-btn {
order: 1 !important;
width: 100% !important;
height: 45px !important;
}
#shoppingChrono .absolute.top.right.bg-error.padding-10 {
top: 15px !important;
right: 15px !important;
width: 35px !important;
height: 35px !important;
}
}
/* =========================================
ACCESSIBILITÉ ET INTERACTIVITÉ
========================================= */
@media (max-width: 768px) {
/* Agrandir les zones cliquables pour le tactile */
#shoppingChrono button,
#shoppingChrono .os-remove,
#shoppingChrono .os-click {
min-height: 44px !important; /* Taille minimale recommandée pour le tactile */
min-width: 44px !important;
}
/* Feedback visuel pour les interactions tactiles */
#shoppingChrono button:active,
#shoppingChrono .os-remove:active {
opacity: 0.8 !important;
transform: scale(0.98) !important;
}
/* Empêcher le zoom sur les inputs iOS */
#shoppingChrono input.os-obj {
font-size: 16px !important; /* Empêche le zoom automatique sur iOS */
}
/* Style pour les états focus (accessibilité) */
#shoppingChrono button:focus,
#shoppingChrono input:focus {
outline: 3px solid rgba(46, 204, 113, 0.5) !important;
outline-offset: 2px !important;
}
}
/* =========================================
SCROLL PERSONNALISÉ POUR LE MODAL
========================================= */
@media (max-width: 768px) {
#shoppingChrono .bg-white.shadow {
scrollbar-width: thin !important;
scrollbar-color: var(--success-color) #f1f1f1 !important;
}
#shoppingChrono .bg-white.shadow::-webkit-scrollbar {
width: 6px !important;
}
#shoppingChrono .bg-white.shadow::-webkit-scrollbar-track {
background: #f1f1f1 !important;
border-radius: 10px !important;
}
#shoppingChrono .bg-white.shadow::-webkit-scrollbar-thumb {
background: var(--success-color) !important;
border-radius: 10px !important;
}
}
/* =========================================
ANIMATION DE FERMETURE
========================================= */
@keyframes modalFadeOut {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.95);
}
}
@media (max-width: 768px) {
#shoppingChrono.anim-hide {
animation: modalFadeOut 0.3s ease-in forwards !important;
}
}
@media (max-width: 768px) {
/* =========================================
SECTION PRODUITS LES PLUS VENDUS (#bestSellers) - Mobile
========================================= */
/* Conteneur principal */
.bg-white.gpadding.relative.w100.top-40-in {
padding-top: 20px !important;
padding-bottom: 20px !important;
/* Le padding horizontal doit être à 0 pour le slider */
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Titre */
.bg-white.gpadding h2.h1 {
/* Correction des marges desktop (vt-40-in) */
padding-top: 0 !important;
margin-top: 0 !important;
margin-bottom: 20px !important;
font-size: 24px !important;
padding-left: 15px; /* Pour aligner le texte avec le contenu */
padding-right: 15px;
}
/* Conteneur du slider (pour l'espace horizontal) */
.bg-white.gpadding .relative.w100 {
padding-left: 15px; /* Marge au début du slider */
}
/* L'élément produit (via le CSS global .product) */
.product {
/* Redéfinition de la largeur pour le mobile : 45% permet d'en avoir deux */
width: 45vw !important;
min-width: 150px !important;
/* Assure que la colonne est bien utilisée */
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100% !important;
}
/* Figure (Image) */
.product figure {
/* Hauteur proportionnelle à la largeur */
height: 45vw !important;
min-height: 150px !important;
overflow: hidden;
}
/* Titre du produit (h3) */
.product h3.vt-5 {
/* Réduire la marge verticale */
padding-top: 5px !important;
padding-bottom: 5px !important;
font-size: 13px !important;
line-height: 1.3;
}
/* Prix */
.product span.bold.success {
font-size: 16px !important;
margin-bottom: 5px;
}
/* Controls (Quantité et Panier) */
.product > div.flex.col.text-center > .vt-5.flex.row.space {
/* Réduire la marge verticale */
padding-top: 5px !important;
padding-bottom: 10px;
align-items: center;
justify-content: space-around;
gap: 5px;
}
/* Bloc de quantité (+ / input / -) */
.product .flex.row.radius-3 {
flex-grow: 1;
max-width: 120px;
min-height: 35px;
}
/* Boutons +/- */
.product .os-decrement, .product .os-increment {
width: 35px !important;
height: 35px !important;
font-size: 18px !important;
min-width: 30px;
}
/* Input quantité */
.product input.quantity {
height: 35px !important;
font-size: 14px !important;
flex-grow: 1;
}
/* Bouton Ajouter au panier (i.addproduct) */
.product i.addproduct {
width: 35px !important; /* Taille fixe */
height: 35px !important;
min-width: 35px;
padding: 5px !important;
margin-left: 10px !important;
flex-shrink: 0;
background: linear-gradient(180deg, var(--success-color) 15.56%, var(--success-color-alt) 77.58%) !important;
}
/* Espacement entre les slides (os-slider-child) */
#bestSellers .os-slider-child {
margin-right: 15px !important; /* Ajoute un écart de 15px entre les produits */
/* Retirer l'ancien style right-40-in (qui est une marge droite trop grande) */
padding-right: 0 !important;
}
/* Flèches de navigation (Cachées pour le mobile) */
.bg-white.gpadding .absolute.h100.xright-100.top,
.bg-white.gpadding .absolute.h100.xleft-100.top {
display: none !important;
}
}
/* =========================================
VERSION ALTERNATIVE AVEC PSEUDO-ÉLÉMENTS
========================================= */
/* Si la version ci-dessus ne fonctionne pas, essayez celle-ci : */
@media (max-width: 768px) {
#productsMenus {
counter-reset: category-counter;
}
/* Version avec compteur CSS */
#productsMenus a::before {
counter-increment: category-counter;
content: counter(category-counter) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 26px !important;
width: 26px !important;
height: 26px !important;
background: linear-gradient(135deg, var(--success-color), #27ae60) !important;
color: white !important;
border-radius: 50% !important;
font-size: 12px !important;
font-weight: bold !important;
margin-right: 12px !important;
flex-shrink: 0 !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
/* Couleurs alternées */
#productsMenus a:nth-child(odd)::before {
background: linear-gradient(135deg, var(--success-color), var(--success-color-alt)) !important;
}
#productsMenus a:nth-child(even)::before {
background: linear-gradient(135deg, var(--warning-color), #f39c12) !important;
}
}
/* Desktop - garder l'ancien style */
@media (min-width: 769px) {
#productsMenus {
/* Votre style desktop existant */
}
}
@media (max-width: 768px) {
/* =========================================
SECTION RECETTES (#recipes) - Mobile
========================================= */
/* Conteneur principal */
.bg-white.gpadding.vt-40-in {
padding-top: 20px !important;
padding-bottom: 20px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Titres de section */
.bg-white.gpadding h2.h1,
.bg-white.gpadding p.h2 {
margin-top: 0 !important;
margin-bottom: 12px !important;
padding-left: 15px !important;
padding-right: 15px !important;
font-size: 22px !important;
line-height: 1.15 !important;
}
/* Slider */
#recipes {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
#recipes::-webkit-scrollbar {
display: none;
}
/* Carte recette */
.recipe.flex.col.space.center.text-center {
width: 100% !important;
min-width: unset !important;
}
/* Image */
.recipe figure.circle {
width: 38vw !important;
height: 38vw !important;
min-width: 130px !important;
min-height: 130px !important;
margin: 0 auto !important;
}
/* Header (zone titres) */
.recipe header {
width: 100% !important;
padding: 6px 0 4px 0 !important; /* encore plus serré */
margin: 0 !important;
box-sizing: border-box;
}
.recipe header h3.success {
font-size: 17px !important;
margin: 0 0 3px 0 !important; /* marge très réduite sous h3 */
line-height: 1.2;
}
.recipe header h4.success-alt.semibold {
font-size: 12px !important; /* ou 11.5px si tu veux être encore plus prudent */
line-height: 1.22 !important; /* ← serré pour limiter la hauteur totale */
margin: 3px auto 6px auto !important; /* très peu d'espace au-dessus / dessous */
padding: 0 8px !important; /* marge intérieure réduite */
max-width: 78% !important; /* ← force à être plus étroit que le bouton */
width: fit-content !important;
text-align: center !important;
/* Contrôle strict du nombre de lignes */
display: -webkit-box !important;
-webkit-line-clamp: 3 !important; /* ← limite à 3 lignes max */
-webkit-box-orient: vertical !important;
overflow: hidden !important;
/* Fallback pour les navigateurs qui ne supportent pas line-clamp */
max-height: 3.66em !important; /* ≈ 3 lignes à line-height 1.22 */
overflow: hidden !important;
word-break: break-word !important; /* casse les mots longs si besoin */
hyphens: auto !important; /* tirets automatiques sur certains navigateurs */
}
/* Bouton (pour cohérence visuelle) */
.recipe a.bg-error {
margin: 4px auto 8px auto !important;
padding: 7px 16px !important;
font-size: 13px !important;
min-width: 110px !important;
max-width: 82% !important; /* légèrement plus large que le h4 */
background: linear-gradient(180deg, var(--success-color) 15.56%, var(--success-color-alt) 77.58%) !important;
}
/* Réduire encore l'espace global sous le header si besoin */
.recipe header {
padding-bottom: 3px !important; /* encore plus serré */
}
/* Flèches cachées */
.os-slider-prev,
.os-slider-next,
.absolute.h100.xright-100.top,
.absolute.h100.xleft-100.top {
display: none !important;
}
}
@media (max-width: 768px) {
/* =========================================
SECTION #bestRecos (RECOMMANDATIONS) - Mobile
========================================= */
#bestRecos {
flex-direction: column !important;
}
#bestRecos > div {
width: 100% !important;
padding: 20px 12px !important; /* réduit le padding global */
margin: 0 !important;
}
/* Bloc texte (bg-success) */
#bestRecos .bg-success {
padding: 20px 0 !important; /* moins de padding haut/bas */
height: auto !important;
}
#bestRecos .bg-success > div.flex.col.center {
padding: 0 12px !important;
}
/* Titre principal */
#bestRecos h2.font-galada {
margin: 0 0 10px 0 !important; /* très peu d'espace après le titre */
padding: 0 !important;
font-size: 35px !important;
line-height: 1.15 !important;
}
#bestRecos h2.font-galada span {
font-size: 25px !important;
line-height: 1.2;
margin: 2px 0 !important; /* espace très réduit entre les deux lignes */
}
/* Conteneur du slider texte */
#bestRecos .hoverflow.fill {
height: auto !important;
}
/* Chaque slide du texte */
#bestRecos .os-slider-child {
padding: 10px 0 !important; /* espace très réduit haut/bas */
margin: 0 !important;
min-height: auto !important;
}
/* Les paragraphes importants */
#bestRecos .os-slider-child p.warning.semibold {
margin: 0 0 6px 0 !important; /* espace très réduit entre les deux */
padding: 0 !important;
font-size: 18px !important; /* un peu plus gros que 14px pour la lisibilité */
line-height: 1.3 !important; /* line-height plus serré */
}
#bestRecos .os-slider-child p.h3.semibold.white {
margin: 4px 0 12px 0 !important; /* espace minimal avant le bouton / prochain élément */
padding: 0 !important;
font-size: 16px !important;
line-height: 1.35 !important;
}
/* Points de navigation (dots) */
#bestRecos .w100.bottom.left {
padding: 8px 0 4px 0 !important;
margin-top: 8px !important;
}
#bestRecos .w100.bottom.left .vt-40-in {
padding: 0 !important;
}
/* Bloc image – FORCER la visibilité */
#bestRecos .bg-gray {
min-height: 350px !important;
height: 70px !important; /* ← hauteur relative à la largeur → très fiable sur mobile */
padding: 0 !important;
}
/* Le slider et tous ses enfants doivent prendre TOUTE la hauteur disponible */
#bestRecos .bg-gray .os-slider,
#bestRecos .bg-gray .os-slider.auto,
#bestRecos .bg-gray .os-slider-child,
#bestRecos .bg-gray .os-slider-child figure,
#bestRecos .bg-gray .os-slider-child figure.msquare {
height: 100% !important;
min-height: 100% !important;
width: 100% !important;
}
/* L'image elle-même */
#bestRecos .bg-gray img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important; /* parfois display:none ou inline pose problème */
}
/* Supprime tout ce qui pourrait cacher l'image */
#bestRecos .bg-gray .hoverflow,
#bestRecos .bg-gray .fill {
height: 100% !important;
overflow: visible !important; /* ou hidden si tu veux clipper proprement */
}
}
@media (max-width: 768px) {
/* =========================================
SECTION ARTICLES (bg-success-alt) - Mobile
========================================= */
.bg-success-alt {
padding: 20px 15px !important; /* Réduit le padding général */
}
.bg-success-alt .vt-80-in {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
/* Titre */
.bg-success-alt h2.h1 {
font-size: 24px !important;
margin-bottom: 15px !important;
}
/* Conteneur des articles (force l'empilement) */
.bg-success-alt .flex.row.space.wrap {
flex-direction: column !important; /* Empilement vertical */
gap: 20px; /* Espace entre les articles */
}
/* Article individuel */
.bg-success-alt article.post {
width: 100% !important; /* Pleine largeur */
margin: 0 !important;
padding: 0 !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
overflow: hidden;
}
/* Figure (Image) */
.bg-success-alt article.post figure {
/* Hauteur fixe et responsive (45vw = environ 150px-180px) */
height: 45vw !important;
min-height: 150px !important;
overflow: hidden;
}
/* Contenu texte */
.bg-success-alt article.post a.lh-3x {
padding: 15px !important; /* Espacement interne */
font-size: 16px !important;
line-height: 1.4 !important;
min-height: auto;
}
/* Tags et Date */
.bg-success-alt .fill.absolute.top.left.padding-20 {
padding: 10px !important;
}
.bg-success-alt .fill.absolute a,
.bg-success-alt .fill.absolute time {
font-size: 10px !important;
padding: 6px 10px !important;
background: linear-gradient(180deg, var(--success-color) 15.56%, var(--success-color-alt) 77.58%) !important;
}
/* Bouton "Toutes nos publications" */
.bg-success-alt .text-center a {
font-size: 14px !important;
padding: 10px 20px !important;
background: linear-gradient(180deg, var(--success-color) 15.56%, var(--success-color-alt) 77.58%) !important;
}
/* Ajouter un dégradé de fond */
.bg-warning.relative.w100.flex.row.space.gpadding {
background: linear-gradient(135deg, var(--warning-color) 0%, var(--success-color) 100%) !important;
position: relative;
overflow: hidden;
}
/* Effet de bulles décoratives */
.bg-warning::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
top: -50px;
right: -50px;
}
.bg-warning::after {
content: "";
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
bottom: -30px;
left: -30px;
}
/* S'assurer que le contenu est au-dessus */
.bg-warning > * {
position: relative;
z-index: 2;
}
}
@media (max-width: 768px) {
/* =========================================
SECTION VIDÉOS (bg-white gpadding) - Mobile
========================================= */
/* Conteneur principal */
.bg-white.gpadding {
padding: 20px 15px !important;
}
.bg-white.gpadding .vt-80-in {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
/* Titre */
.bg-white.gpadding h2.h1 {
font-size: 24px !important;
margin-bottom: 15px !important;
}
/* Conteneur des éléments */
.bg-white.gpadding .flex.row.space.wrap {
flex-direction: column !important; /* Empilement vertical */
gap: 20px;
}
/* Lien Vidéo (l'élément ) */
.bg-white.gpadding a.video {
width: 100% !important; /* Pleine largeur */
margin: 0 !important;
padding: 0 !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
border-radius: 12px !important;
overflow: hidden;
/* Annuler les paddings/marges desktop spécifiques au troisième item */
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Le faux élément vide (l'élément ) */
.bg-white.gpadding .flex.row.space.wrap i.third-20 {
display: none !important; /* On cache ce div vide qui faussait le wrap */
}
/* Figure (Conteneur Image/Vidéo) */
.bg-white.gpadding a.video figure {
/* Ratio standard 16:9 ou similaire */
height: 56vw !important; /* Environ 56% de la largeur pour un ratio vidéo */
min-height: 180px !important;
overflow: hidden;
border-radius: 12px 12px 0 0 !important;
}
/* Image (Couverture de la vidéo) */
.bg-white.gpadding a.video img.cover {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Icône Play (Ajuster la taille pour le mobile) */
.bg-white.gpadding a.video i.fa-play {
font-size: 24px !important;
padding: 10px 18px !important;
border-width: 3px !important;
transition: transform 0.2s ease;
border-color: var(--success-color) !important;
color: var(--success-color) !important;
}
.bg-white.gpadding a.video:hover i.fa-play {
transform: scale(1.1);
border-color: var(--success-color-alt) !important;
color: var(--success-color-alt) !important;
}
/* Titre de la vidéo (Span) */
.bg-white.gpadding a.video span.lh-3x {
padding: 12px 15px !important; /* Espacement interne réduit */
font-size: 16px !important;
line-height: 1.3 !important;
height: auto !important;
background: linear-gradient(180deg, var(--success-color) 15.56%, var(--success-color-alt) 77.58%) !important;
border-radius: 0 0 12px 12px;
}
/* Bouton "Toutes nos vidéos" */
.bg-white.gpadding .text-center a {
font-size: 14px !important;
padding: 10px 20px !important;
background: linear-gradient(180deg, var(--success-color) 15.56%, var(--success-color-alt) 77.58%) !important;
}
}
@media (max-width: 768px) {
/* =========================================
SECTION PARTENAIRES (bg-warning) - Mobile
========================================= */
/* Conteneur principal */
.bg-warning.gpadding.text-center.vt-80-in {
/* Réduire le padding vertical global (vt-80-in) */
padding-top: 20px !important;
padding-bottom: 20px !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Titre */
.bg-warning h2.h1.font-galada {
font-size: 24px !important;
margin-bottom: 20px !important;
}
/* Conteneur des logos */
.bg-warning .flex.row.space.wrap.vt-80-in {
/* Réduire le padding vertical des logos (vt-80-in) */
padding-top: 15px !important;
padding-bottom: 25px !important;
/* Utiliser le wrapping par défaut mais optimiser la taille des figures */
justify-content: space-around !important;
align-items: center;
gap: 20px 10px; /* Espace vertical et horizontal entre les logos */
}
/* Chaque figure (Logo) */
.bg-warning figure.quarter-80 {
/* Forcer l'adaptation à deux colonnes */
width: 45% !important;
/* Hauteur fixe plus grande pour la visibilité (ex: 15vw ou 60px) */
height: 15vw !important;
min-height: 50px !important;
max-height: 80px !important;
flex-shrink: 0;
margin: 0 !important; /* Retirer les marges potentielles des quarter-80 */
/* Assurer que l'image est bien centrée */
display: flex;
align-items: center;
justify-content: center;
}
/* Image du logo */
.bg-warning figure.quarter-80 img.contain {
/* Laissez "contain" pour éviter la déformation */
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
/* Paragraphe de conclusion */
.bg-warning p.h3.semibold.success {
font-size: 16px !important;
margin-top: 15px !important;
}
}
@media (max-width: 768px) {
/* =========================================
SECTION TÉMOIGNAGES (#testimonies) - Mobile
========================================= */
/* Conteneur principal (gpadding vt-60-in) */
.gpadding.vt-60-in {
padding: 20px 0 !important; /* On retire le padding horizontal ici pour laisser la marge du témoignage le gérer */
padding-top: 30px !important;
padding-bottom: 30px !important;
}
/* Titre (h2) */
.gpadding h2.h1.font-galada {
font-size: 24px !important;
/* Correction des marges desktop (vt-30-in) */
padding-top: 0 !important;
}
/* Conteneur w100 vt-60-in (la zone juste sous le titre) */
.gpadding .w100.vt-60-in {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Bloc autour du témoignage (w100 relative hz-60-in) */
.gpadding .w100.relative.hz-60-in {
/* On retire les marges horizontales desktop (hz-60-in) */
padding-left: 15px !important;
padding-right: 15px !important;
/* On s'assure que le bloc ne soit pas trop large si le parent le permet */
max-width: 100%;
}
/* Le bloc de témoignage lui-même (#testimonies) */
#testimonies {
/* Annuler les marges desktop (vt-30-in hz-60-in) */
padding: 30px 20px !important;
margin: 0 !important;
position: relative;
overflow: hidden; /* Empêche l'apostrophe géante de déborder trop */
background: linear-gradient(180deg, var(--success-color) 15.56%, var(--success-color-alt) 77.58%) !important;
}
/* L'apostrophe géante () */
#testimonies b {
/* Fixer la taille au lieu de 15vw */
font-size: 80px !important;
/* Ajuster le positionnement pour le mobile */
right: 0 !important;
top: 20px !important;
transform: translateY(0%) !important;
line-height: 0.8;
color: rgba(255, 255, 255, 0.3) !important;
}
/* L'icône de citation (figure) */
#testimonies figure.icon.big {
width: 60px !important;
height: 60px !important;
/* Ajuster le positionnement */
left: 0 !important;
top: 0 !important;
transform: translate(-15px, -15px) !important;
}
@media (max-width: 768px) {
/* =========================================
FOOTER (bg-success-alt) - Mobile
========================================= */
/* Conteneur principal */
.bg-success-alt.gpadding.vt-60-in {
padding-top: 25px !important; /* Réduire vt-60-in */
padding-bottom: 25px !important;
padding-left: 15px !important;
padding-right: 15px !important;
text-align: center;
background: linear-gradient(180deg, var(--success-color) 15.56%, var(--success-color-alt) 77.58%) !important;
}
/* Logo */
.bg-success-alt figure.hheight {
height: 80px !important; /* Taille fixe pour le logo */
margin-top: 10px !important; /* Réduire vt-15-in */
}
/* Texte de copyright */
.bg-success-alt p.white.medium.p {
font-size: 12px !important;
}
/* Icônes Réseaux Sociaux */
.bg-success-alt .flex.row.middle.white.h2.top-20 {
font-size: 20px !important; /* Réduire la taille des icônes (h2 -> 20px) */
justify-content: center !important;
}
/* Conteneurs des listes de liens */
.bg-success-alt .flex.col.center {
width: 100% !important;
margin-top: 10px;
}
/* Listes de liens (Blog, Vidéos, etc.) */
.bg-success-alt ul.list {
/* Permettre l'enveloppement sur plusieurs lignes */
flex-wrap: wrap !important;
justify-content: center !important;
margin-top: 15px !important; /* Réduire top-40 */
margin-bottom: 15px;
padding: 0 5px;
}
/* Liens individuels */
.bg-success-alt ul.list li {
display: flex;
align-items: center;
margin-bottom: 5px; /* Pour gérer l'espacement vertical lors de l'enveloppement */
flex-shrink: 0;
}
/* Texte des liens */
.bg-success-alt ul.list a.iblock {
font-size: 14px !important; /* Réduire la taille (h4 -> 14px) */
padding: 0 8px !important; /* Réduire hz-15-in */
line-height: 1.2;
}
/* Points séparateurs */
.bg-success-alt ul.list i.iblock.circle {
margin: 0 4px; /* Réduire l'espace autour du point */
}
}
/* Contenu du slider */
#testimonies .fill.hoverflow.vt-40-in {
/* Suppression de la marge verticale desktop (vt-40-in) */
padding-top: 15px !important;
padding-bottom: 0 !important;
}
/* Texte du témoignage (P) */
#testimonies p.medium.h5 {
font-size: 14px !important;
line-height: 1.5 !important;
text-align: left !important;
padding-right: 15px; /* Pour que le texte n'aille pas sous l'apostrophe */
}
/* Bloc Auteur */
#testimonies .flex.col.top-30 {
margin-top: 15px !important;
align-items: flex-start !important; /* Aligner à gauche */
}
#testimonies h3.upper.h3 {
font-size: 16px !important;
line-height: 1.2;
}
#testimonies .flex.col.top-30 span {
font-size: 13px !important;
}
/* Points de navigation */
#testimonies .w100.bottom.left {
padding-top: 15px !important; /* Remplace vt-40-in */
padding-bottom: 0 !important;
}
/* S'assurer que les points sont au-dessus de tout */
#testimonies .w100.bottom.left {
z-index: 10;
}
#testimonies .os-slider-btn > i {
width: 10px !important;
height: 10px !important;
}
}
/* Page connexion - Styles spécifiques */
@media (min-width: 769px) {
.max-w-500 {
max-width: 500px !important;
}
}
.coform input {
height: 48px;
font-size: 16px;
border: 1px solid #d1d5db;
transition: all 0.2s ease;
}
.coform input:focus {
border-color: #FFB733 !important;
box-shadow: 0 0 0 3px rgba(255, 183, 51, 0.15) !important;
outline: none;
}
.coform button {
font-size: 16px;
letter-spacing: 0.5px;
}
.coform .success {
color: #FFB733 !important;
}
.coform .gray-alt {
color: #6b7280;
}
/* Accents verts ananas (feuilles, frais) */
.ananas-accent {
color: #7ED321 !important;
border-color: #7ED321 !important;
}
.ananas-accent-bg {
background-color: #7ED321 !important;
}
/* ==========================================================================
PAGE INSCRIPTION / CONNEXION - RESPONSIVE MOBILE
========================================================================== */
/* Conteneur principal de la page */
@media (max-width: 768px) {
#content .htop.bg-gray {
padding: 0 10px !important;
}
/* Carte blanche centrale */
.bg-white.bottom-20-in.hz-60-in.top-40-in.half-30 {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 20px 15px !important; /* ← plus d'air sur les côtés */
border-radius: 16px !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.12) !important;
min-height: auto !important;
}
/* Titres */
.bg-white h1.gray-alt.h2 {
font-size: 1.8rem !important;
margin-bottom: 0.75rem !important;
line-height: 1.2 !important;
}
.bg-white p.warning.h4.medium {
font-size: 1rem !important;
line-height: 1.4 !important;
margin-bottom: 1.5rem !important;
}
/* Formulaire cooform */
.cooform {
padding: 0 !important;
}
.cooform .vt-20 {
margin-bottom: 1.25rem !important; /* ← espacement plus naturel */
}
.cooform label {
font-size: 0.95rem !important;
margin-bottom: 0.5rem !important;
}
.cooform input:not(.fill),
.cooform input.os-phone,
.cooform input.os-pwd {
height: 50px !important;
font-size: 1rem !important;
padding: 0 16px !important;
border-width: 1.5px !important;
border-radius: 10px !important;
background: #f9fafb !important;
}
/* Messages d'erreur / succès */
.alert.alert-danger,
.alert.alert-success {
font-size: 0.95rem !important;
padding: 12px 16px !important;
border-radius: 8px !important;
margin-bottom: 1.5rem !important;
}
/* Cases à cocher */
.cooform .flex.row.middle.relative {
margin: 2rem 0 !important;
}
.cooform .os-checkbox + label {
font-size: 0.95rem !important;
line-height: 1.4 !important;
}
/* reCAPTCHA */
.g-recaptcha {
transform: scale(0.85) !important;
transform-origin: 0 0 !important;
margin: 1rem auto !important;
width: 304px !important; /* taille standard reCAPTCHA */
}
/* Bouton principal */
.anim-btn {
height: 52px !important;
font-size: 1.05rem !important;
padding: 0 2rem !important;
min-height: 52px !important; /* tactile friendly */
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
color: white !important; /* Pour que le texte reste lisible */
}
.anim-btn:hover {
opacity: 0.92;
transform: translateY(-1px);
}
.anim-btn span {
font-size: 1.05rem !important;
}
/* Lien "Se connecter" */
.top-10 + a.bold.success.underline {
font-size: 1rem !important;
padding: 8px 0 !important;
display: inline-block;
color: var(--success-color) !important;
}
}
/* Très petits écrans (≤ 480px) */
@media (max-width: 480px) {
.bg-white.bottom-20-in.hz-60-in.top-40-in.half-30 {
padding: 16px 12px !important;
}
.cooform input:not(.fill),
.cooform input.os-phone,
.cooform input.os-pwd {
font-size: 0.95rem !important;
height: 48px !important;
}
.g-recaptcha {
transform: scale(0.78) !important;
}
.anim-btn {
height: 48px !important;
font-size: 1rem !important;
}
}
/* Amélioration accessibilité tactile */
@media (max-width: 768px) {
.cooform label,
.cooform input,
.cooform button,
.cooform a {
min-height: 44px !important; /* norme tactile Apple */
touch-action: manipulation;
}
/* Meilleur focus visible */
.cooform input:focus,
.cooform button:focus {
outline: 3px solid var(--success-color) !important;
outline-offset: 2px !important;
}
}
/* Ajoutez ces styles à la fin de votre fichier CSS */
@media(min-width: 769px) {
/* Layout principal - Sidebar à gauche, produits à droite */
.content > .bg-white.htop {
display: flex;
flex-direction: row;
gap: 2vw;
padding-left: 1vw;
padding-right: 1vw;
}
/* Container du filtre (sidebar) */
.content > .bg-white.htop > div:first-child {
width: 25%;
min-width: 50px;
position: sticky;
top: calc(var(--header-height) + 20px);
align-self: flex-start;
height: fit-content;
max-height: calc(100vh - var(--header-height) - 40px);
overflow-y: visible; /* Retirer le scroll */
}
/* Afficher le formulaire de filtre par défaut sur desktop */
#filter.hide {
display: block !important;
padding: 20px;
background: var(--gray-color);
}
/* Cacher le bouton "Filtre" sur desktop */
.os-click.flex.row.space.middle.success.bold.upper.h2[data-target="#filter"] {
display: none;
}
/* Container des produits */
#products {
width: 75%;
flex-grow: 1;
margin-top: 0 !important;
}
/* 5 produits par ligne */
#products .product {
width: calc(20% - 16px) !important;
}
/* Section Catégories - 2 par ligne avec détection automatique de longueur */
#categories {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#basket{
width: calc(100% - var(--content-margin));
height: calc(100vh - var(--header-height));
}
#basket > div{height: 100%;}
#basketCounter{
width: 20px;
height: 20px;
font-size: 8px;
}
#basketCounter{
width: 1.1458333vw;
height: 1.1458333vw;
font-size: .6770833vw;
}
}
#tags {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
}
#tags > div {
width: 50% !important;
display: flex;
}
/* =========================================
NETTOYAGE FINAL - FORCER LE THÈME ANANAS PARTOUT
========================================= */
/* Footer mobile */
.bg-success-alt.gpadding.vt-60-in {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
}
/* Bouton "Faire mes courses" et similaires dans .bg-warning */
.bg-warning .os-click.bg-error,
.bg-warning .os-click.bg-error.white.h3.bold.shadow.flex.row.middle.hz-40-in.vt-20-in.radius-5 {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
}
/* Boutons dans modals et sections produits/vidéos */
.bg-error,
.bg-warning .os-click.bg-error,
#shoppingChrono button[type="submit"].anim-btn,
#shoppingChrono button.os-obj-add {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
}
/* Textes / spans fond bleu (vidéos, tags, etc.) */
.bg-white.gpadding a.video span.lh-3x,
.bg-success-alt .fill.absolute a,
.bg-success-alt .fill.absolute time,
.bg-warning .os-click .icon.small img.contain {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
}
/* Icônes play vidéo */
.bg-white.gpadding a.video i.fa-play {
border-color: #FFB733 !important;
color: #FFB733 !important;
}
.bg-white.gpadding a.video:hover i.fa-play {
border-color: #FF8C00 !important;
color: #FF8C00 !important;
}
/* Témoignages (#testimonies) */
#testimonies {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
}
/* Points numérotés menu catégories mobile - uniformiser en orange */
#productsMenus a::before {
background: #FFB733 !important;
}
#productsMenus a:nth-child(even)::before {
background: #FF8C00 !important;
}
/* Tous les .bg-error restants (sécurité) */
.bg-error {
background-color: #FF8C00 !important;
}
/* Liens success qui traînent encore */
a.success,
a.bold.success.underline {
color: #FFB733 !important;
}
/* =========================================
NETTOYAGE SPÉCIFIQUE PAGE D'ACCUEIL MOBILE
========================================= */
/* 1. Tous les .bg-error de la page d'accueil → orange */
.bg-error,
.bg-warning .os-click.bg-error,
.bg-error.hz-20-in.medium.h4.white.radius-5.vt-10-in,
a.bg-error {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
color: white !important;
}
/* 2. Bouton "Découvrir maintenant" bannière */
.banner a.bg-warning.error {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
}
/* 3. Icônes play vidéo */
.video i.fa-play {
border-color: #FFB733 !important;
color: #FFB733 !important;
background: rgba(255, 183, 51, 0.2) !important; /* fond léger orange */
}
.video:hover i.fa-play {
border-color: #FF8C00 !important;
color: #FF8C00 !important;
}
/* 4. Tags et dates dans articles */
.bg-success-alt .fill.absolute a.bg-warning,
.bg-success-alt .fill.absolute time.bg-success-alt {
background: #FFB733 !important;
color: white !important;
}
/* 5. Boutons "Toutes nos..." */
.bg-success-alt .text-center a.iblock.bg-white.success,
.bg-white.gpadding .text-center a.iblock.bg-gray-alt.white {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
color: white !important;
border: none !important;
}
/* 6. Témoignages fond */
#testimonies.bg-error {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
}
/* 7. Textes success qui traînent (prix, titres recettes, etc.) */
.success,
h3.success,
span.success,
a.success,
.bold.success {
color: #FFB733 !important;
}
/* 8. Menu catégories mobile - uniformiser les cercles */
#productsMenus a::before {
background: #FFB733 !important;
color: white !important;
}
/* =========================================
THÈME ANANAS FINAL - FORCE SUR TOUT LE LAYOUT (HEADER + FOOTER + ACCUEIL)
========================================= */
/* Header principal (desktop + mobile) */
#header.bg-success {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
}
/* Footer */
footer.bg-success-alt {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
}
/* Tous les .bg-success et .bg-success-alt restants */
.bg-success,
.bg-success-alt,
#testimonies.bg-error,
.bg-warning .os-click.bg-error,
a.bg-error,
.bg-error {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
color: white !important;
}
/* Boutons "Découvrir maintenant", "Faire mes courses", "Découvrir" recettes */
.banner a.bg-warning.error,
.bg-warning .os-click.bg-error,
.recipe a.bg-error,
.bg-success-alt .text-center a.iblock.bg-white.success {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
color: white !important;
border: none !important;
}
/* Icônes loupe (search-btn) */
.os-search-btn.bg-warning {
background-color: #FFEB3B !important; /* Jaune ananas vif pour la loupe */
}
/* Textes .success qui traînent (prix, titres recettes, etc.) */
.success,
h3.success,
span.success,
.bold.success,
.warning.success {
color: #FFB733 !important;
}
/* Icônes play vidéo */
.video i.fa-play {
border-color: #FFB733 !important;
color: #FFB733 !important;
}
.video:hover i.fa-play {
border-color: #FF8C00 !important;
color: #FF8C00 !important;
}
/* Tags / dates articles */
.bg-success-alt .fill.absolute a.bg-warning,
.bg-success-alt .fill.absolute time.bg-success-alt {
background: #FFB733 !important;
color: white !important;
}
/* Menu catégories mobile - cercles numérotés */
#productsMenus a::before {
background: #FFB733 !important;
color: white !important;
}
/* Sécurité : tous les .bg-warning → orange clair/ananas */
.bg-warning {
background-color: #FFEB3B !important; /* Jaune vif ananas */
color: black !important; /* Pour lisibilité */
}
/* Si certains éléments restent gris/bleu foncé */
.bg-gray-alt,
.bg-gray {
background-color: #FFFACD !important; /* Jaune très clair cassé */
}
/* =========================================
FIX DESKTOP : "NOS CATÉGORIES" + DROPDOWN VISIBLES
========================================= */
/* 1. Rendre "Nos catégories" lisible sur desktop */
.desktop-only .os-click.bg-white.nowrap.medium.flex.row.middle.hz-20-in {
color: #000000 !important; /* Noir bien lisible sur blanc */
font-weight: 600 !important; /* Un peu plus gras pour la visibilité */
}
/* Hover + focus pour feedback visuel */
.desktop-only .os-click.bg-white:hover,
.desktop-only .os-click.bg-white:focus {
background: #FFF8E1 !important; /* Jaune très clair ananas au survol */
color: #FF8C00 !important; /* Orange foncé pour le texte au hover */
}
/* Contenu interne du menu */
#productsMenus > div {
background: white !important;
padding: 20px !important;
}
/* Les cartes catégories dans le dropdown */
#productsMenus a {
color: #333 !important; /* Texte sombre lisible */
background: #f8f9fa !important; /* Fond clair */
transition: all 0.2s;
}
#productsMenus a:hover {
background: #FFF3E0 !important; /* Orange très clair au survol */
color: #FF8C00 !important;
transform: translateX(4px);
}
/* Les cercles numérotés (si tu utilises ::before) */
#productsMenus a::before {
background: #FFB733 !important;
color: #000 !important; /* Chiffre noir sur jaune */
font-weight: bold !important;
}
/* Sécurité : si le clic ne passe pas */
.os-click[data-target="#productsMenus"] {
cursor: pointer !important;
pointer-events: auto !important;
z-index: 10000 !important;
}
/* Forcer blanc sur le texte "Fais tes courses en une minute" */
.success.extrabold.h1.font-galada.force-white,
.success.extrabold.h1.font-galada.force-white * {
color: white !important;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* ombre douce pour pop sur fond orange/jaune */
}
#basket {
background: #FFF8E1 !important; /* Jaune très clair ananas pour le fond */
}
#basket .bg-success-alt,
#basket .bg-success {
background: linear-gradient(180deg, #FFB733 15.56%, #FF8C00 77.58%) !important;
}
#basket .bg-warning {
background-color: #FFEB3B !important; /* Jaune vif pour les totaux */
}
/* Forcer l'icône panier en orange/jaune en mobile */
@media (max-width: 768px) {
#basketIcon,
.cart-container figure img[src*="shopping-basket"] {
filter: brightness(0) saturate(100%) invert(68%) sepia(93%) saturate(749%) hue-rotate(358deg) brightness(105%) contrast(102%) !important;
/* Ce filtre transforme n'importe quelle couleur en orange vif (#FFB733 / #FF8C00) */
}
/* Le compteur (petit cercle) */
#basketCounter {
background: #FF8C00 !important;
color: white !important;
border: 1px solid #FFB733 !important;
}
}
/* =========================================
FIX FOND COMPTEUR PANIER (petit cercle bleu → orange)
========================================= */
/* Le compteur du panier (chiffre + fond) */
#basketCounter {
background: #FF8C00 !important; /* Orange foncé vif */
color: white !important;
border: 1px solid #FFB733 !important; /* Contour jaune-orangé pour pop */
box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; /* Petit relief */
}
/* Au clic ou animation */
#basketIcon.animate + span #basketCounter,
.cart-container:hover #basketCounter {
background: #FFB733 !important; /* Jaune vif quand on hover/anime */
transform: scale(1.15) !important;
transition: all 0.2s ease;
}
/* Sécurité : force sur toutes les variantes possibles */
.bg-warning #basketCounter,
.bg-success #basketCounter,
.bg-error #basketCounter,
.cart-container .bg-warning,
.cart-container .bg-success,
.cart-container .bg-error {
background: #FF8C00 !important !important;
}
/* =========================================
FIX COMPTEUR PANIER (petit cercle bleu → orange en mobile & desktop)
========================================= */
/* Le compteur lui-même (chiffre + fond) */
#basketCounter {
background: #FF8C00 !important; /* Orange foncé vif */
color: white !important;
border: 1px solid #FFB733 !important; /* Contour jaune-orangé pour pop */
box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
font-weight: bold !important;
}
/* Au survol ou animation du panier → jaune plus vif */
.cart-container:hover #basketCounter,
#basketIcon.animate + span #basketCounter {
background: #FFB733 !important;
transform: scale(1.15) !important;
transition: all 0.25s ease;
}
/* Sécurité : écrase toutes les classes de fond possibles */
.cart-container .bg-warning,
.cart-container .bg-success,
.cart-container .bg-error,
#basketCounter.bg-warning,
#basketCounter.bg-success,
#basketCounter.bg-error {
background: #FF8C00 !important;
}
/* Mobile spécifique (au cas où un style mobile écrase) */
@media (max-width: 768px) {
#basketCounter {
background: #FF8C00 !important;
min-width: 18px !important;
min-height: 18px !important;
font-size: 10px !important;
}
}