/* ========================================================================== STYLE CLAIR DE L'EN-TÊTE - FIX COMP SERVICE Langue : Français ========================================================================== */ /* Variables globales de design (Thème Blanc Dominant, Noir, Jaune) */ :root { --couleur-fond-claire: #ffffff; --couleur-fond-alternative: #f7f7f9; --couleur-fond-carte: #ffffff; --couleur-accent-jaune: #ffd200; --couleur-accent-jaune-rgb: 255, 210, 0; --couleur-texte-principal: #111113; --couleur-texte-secondaire: #5c6470; --couleur-bordure: rgba(0, 0, 0, 0.07); --police-titres: 'Outfit', sans-serif; --police-corps: 'Plus Jakarta Sans', sans-serif; --transition-douce: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } html, body { overflow-x: hidden; max-width: 100vw; } /* Fondu d'apparition en opacité SEULE. IMPORTANT : ne pas utiliser transform ici — un transform persistant sur (fill forwards) transforme le body en bloc conteneur et casse le position:fixed de ses descendants (bulle WhatsApp, cookies, modales…) qui se retrouvent mal placés. */ @keyframes pageLoadFadeUp { 0% { opacity: 0; } 100% { opacity: 1; } } body { background-color: var(--couleur-fond-claire) !important; color: var(--couleur-texte-principal) !important; font-family: var(--police-corps) !important; overflow-x: hidden; padding-top: 90px; /* Offset for fixed-top header */ animation: pageLoadFadeUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; /* Sticky footer : garantit un pied de page collé au bas, uniforme sur toutes les pages */ display: flex; flex-direction: column; min-height: 100vh; } /* Pousse le footer vers le bas quand le contenu est court (évite le vide en bas sur mobile) */ .pied-de-page-principal { margin-top: auto; } /* --- Navigation & Glassmorphism Claire --- */ .barre-navigation { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--couleur-bordure); z-index: 1050; transition: var(--transition-douce); } .logo-image { height: 65px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08)); } .logo-texte-conteneur { display: flex; flex-direction: column; line-height: 1.1; } .logo-texte-principal { font-family: var(--police-titres); font-weight: 800; font-size: 1.2rem; color: var(--couleur-texte-principal); letter-spacing: 0.5px; } .logo-texte-secondaire { font-family: var(--police-titres); font-weight: 700; font-size: 0.75rem; color: #cca200; letter-spacing: 2px; text-transform: uppercase; } /* --- Liens de navigation --- */ .nav-lien { font-family: var(--police-titres); font-weight: 600; font-size: 0.95rem; color: var(--couleur-texte-secondaire) !important; text-decoration: none; padding: 8px 16px; position: relative; transition: var(--transition-douce); } .nav-lien::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 3px; border-radius: 2px; background-color: var(--couleur-accent-jaune); transform: scaleX(0); transition: transform 0.25s ease; } .nav-lien:hover, .nav-lien.active { color: var(--couleur-texte-principal) !important; } .nav-lien.active { font-weight: 800; } .nav-lien:hover::after, .nav-lien.active::after { transform: scaleX(1); } /* --- Conteneur actions header (panier + CTA) --- */ .nav-actions-conteneur { flex-shrink: 0; } /* --- Bouton Panier --- */ .bouton-panier-navigation { position: relative; display: inline-flex; align-items: center; background-color: var(--couleur-fond-alternative); color: var(--couleur-texte-principal) !important; font-family: var(--police-titres); font-weight: 600; font-size: 0.9rem; padding: 9px 18px; border-radius: 4px; text-decoration: none; border: 1px solid var(--couleur-bordure); transition: var(--transition-douce); white-space: nowrap; } .bouton-panier-navigation:hover { background-color: var(--couleur-accent-jaune); border-color: var(--couleur-accent-jaune); color: #000000 !important; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(var(--couleur-accent-jaune-rgb), 0.3); } /* Badge compteur panier */ .badge-panier-compteur { display: inline-flex; align-items: center; justify-content: center; background-color: var(--couleur-accent-jaune); color: #000000; font-size: 0.65rem; font-weight: 800; border-radius: 50%; width: 17px; height: 17px; position: absolute; top: -6px; right: -6px; line-height: 1; border: 1.5px solid #ffffff; } /* --- Bouton CTA En-tête --- */ .bouton-cta-navigation { display: inline-flex; align-items: center; background-color: #000000; color: #ffffff !important; font-family: var(--police-titres); font-weight: 600; font-size: 0.9rem; padding: 10px 22px; border-radius: 4px; text-decoration: none; transition: var(--transition-douce); border: 1px solid #000000; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); white-space: nowrap; } .bouton-cta-navigation:hover { background-color: var(--couleur-accent-jaune); color: #000000 !important; border-color: var(--couleur-accent-jaune); box-shadow: 0 4px 15px rgba(var(--couleur-accent-jaune-rgb), 0.3); transform: translateY(-2px); } /* ========================================================================== BOUTON WHATSAPP FLOTTANT ========================================================================== */ .whatsapp-float { position: fixed; right: 24px; bottom: 28px; z-index: 9999; width: 54px; height: 54px; background-color: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff !important; font-size: 1.6rem; text-decoration: none; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transition: var(--transition-douce); } .whatsapp-float:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55); color: #ffffff !important; background-color: #1ebe5d; } /* Petite animation de pulsation pour attirer l'attention */ @keyframes pulse-wa { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); } 70% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } .whatsapp-float { animation: pulse-wa 2.5s infinite; } .whatsapp-float:hover { animation: none; } /* --- Bulle d'invitation WhatsApp (pop-up animé) --- */ .wa-popup { position: fixed; right: 24px; bottom: 96px; z-index: 9999; width: 300px; max-width: calc(100vw - 40px); background: #ffffff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); padding: 18px 18px 20px; border: 1px solid rgba(0, 0, 0, 0.06); opacity: 0; transform: translateY(20px) scale(0.96); transform-origin: bottom right; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .wa-popup.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .wa-popup-close { position: absolute; top: 8px; right: 10px; background: transparent; border: none; font-size: 1.4rem; line-height: 1; color: #9aa0a6; cursor: pointer; padding: 2px 6px; border-radius: 50%; transition: var(--transition-douce); } .wa-popup-close:hover { background: #f1f1f4; color: #333; } .wa-popup-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .wa-popup-avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: #25D366; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .wa-popup-ident strong { font-family: var(--police-titres); font-size: 0.98rem; color: var(--couleur-texte-principal); display: block; line-height: 1.2; } .wa-popup-status { font-size: 0.78rem; color: #6c757d; display: inline-flex; align-items: center; gap: 5px; } .wa-dot { width: 8px; height: 8px; border-radius: 50%; background: #25D366; display: inline-block; } .wa-popup-msg { font-size: 0.9rem; color: #4a4f57; line-height: 1.5; margin: 0 0 14px; } .wa-popup-btn { display: flex; align-items: center; justify-content: center; background: #25D366; color: #ffffff !important; font-family: var(--police-titres); font-weight: 700; font-size: 0.92rem; padding: 11px 16px; border-radius: 10px; text-decoration: none; transition: var(--transition-douce); } .wa-popup-btn:hover { background: #1ebe5d; transform: translateY(-2px); color: #ffffff !important; } /* --- Indicateur de défilement (pages catalogue) --- */ .scroll-indicator { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--couleur-texte-secondaire); font-family: var(--police-titres); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; pointer-events: none; opacity: 0; animation: scrollIndFadeIn 0.6s ease 1.2s forwards; transition: opacity 0.4s ease, visibility 0.4s ease; } .scroll-indicator.hide { opacity: 0 !important; visibility: hidden; } .scroll-indicator-chevron { font-size: 1.3rem; color: var(--couleur-accent-jaune); line-height: 1; animation: scrollBounce 1.8s ease-in-out infinite; } @keyframes scrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @keyframes scrollIndFadeIn { to { opacity: 0.92; } } @media (max-width: 767.98px) { /* Décalé pour ne pas gêner le bouton WhatsApp surélevé */ .scroll-indicator { bottom: 18px; } .scroll-indicator-text { display: none; } } /* ========================================================================== ADAPTABILITÉ MOBILE (RESPONSIVE) ========================================================================== */ @media (max-width: 991.98px) { body { padding-top: 85px; /* Offset for taller mobile header */ } .navbar-collapse { background: var(--couleur-fond-claire); border: 1px solid var(--couleur-bordure); border-radius: 8px; padding: 20px; margin-top: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .navbar-nav { align-items: flex-start !important; } .nav-lien { display: block; padding: 16px 15px; margin-bottom: 8px; width: 100%; border-radius: 6px; } .nav-lien.active, .nav-lien:hover { font-weight: 800; color: var(--couleur-texte-principal) !important; background-color: var(--couleur-fond-alternative) !important; border-left: 4px solid var(--couleur-accent-jaune); } .nav-lien::after { display: none !important; } /* On mobile, the cart button in the collapse should stretch full width */ .nav-actions-conteneur { width: 100%; margin-top: 15px; flex-direction: column; align-items: stretch !important; gap: 10px !important; } .nav-actions-conteneur .bouton-panier-navigation, .nav-actions-conteneur .bouton-cta-navigation { width: 100%; justify-content: center; } /* The always-visible mobile cart button: compact */ .d-lg-none .bouton-panier-navigation { padding: 7px 12px; font-size: 0.85rem; } /* WhatsApp flottant un peu plus petit sur mobile */ .whatsapp-float { width: 48px !important; height: 48px !important; font-size: 1.4rem !important; right: 16px !important; bottom: 80px !important; /* Surélevé pour éviter la barre du navigateur mobile */ } /* Bulle d'invitation repositionnée au-dessus du bouton surélevé */ .wa-popup { right: 16px; bottom: 140px; } } @media (max-width: 575.98px) { body { padding-top: 80px; /* Offset adjusted since header will stay on one line */ } /* Ensure logo and buttons fit on one line */ .logo-image { height: 45px; /* Smaller logo */ } .logo-texte-principal { font-size: 1.15rem; } .logo-texte-secondaire { font-size: 0.65rem; } .d-lg-none .bouton-panier-navigation { padding: 5px 10px; font-size: 0.8rem; } } /* ========================================================================== ANIMATION D'OUVERTURE DE PAGE ========================================================================== */ @keyframes fadeInLight { from { opacity: 0; } to { opacity: 1; } } .fade-in-light { animation: fadeInLight 0.25s ease-out forwards; } /* ========================================================================== BADGE BOUNCE ANIMATION ========================================================================== */ @keyframes badgeBounce { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } /* ========================================================================== BOUTON RETOUR EN HAUT (MOBILE) ========================================================================== */ #bouton-haut-de-page { display: none; position: fixed; bottom: 100px; right: 16px; z-index: 9998; background-color: #1a1a1a; color: #ffd200; border: none; border-radius: 50%; width: 44px; height: 44px; font-size: 1.2rem; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.25); align-items: center; justify-content: center; transition: all 0.3s ease; } #bouton-haut-de-page.visible { display: flex; } #bouton-haut-de-page:hover { background-color: #ffd200; color: #1a1a1a; transform: translateY(-3px); } @media (max-width: 991.98px) { #bouton-haut-de-page { bottom: 140px !important; /* Surélevé au-dessus du bouton WhatsApp sur mobile */ right: 16px !important; } } /* Rendre la pagination responsive sur mobile */ @media (max-width: 768px) { .pagination { flex-wrap: wrap !important; justify-content: center !important; gap: 5px; } .pagination .page-item .page-link { padding: 0.375rem 0.5rem; font-size: 0.875rem; } } /* ============================================================ APPARITION AU DÉFILEMENT Les cartes (produits, services, avis, formulaires) sont invisibles et légèrement décalées vers le bas au départ. Quand elles entrent dans l'écran, js/commun.js leur ajoute la classe "visible" et la transition les fait apparaître. ============================================================ */ .apparition { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; will-change: opacity, transform; } .apparition.visible { opacity: 1; transform: translateY(0); } /* Certains visiteurs demandent à leur système de limiter les animations (confort visuel, mal des transports). On respecte ce réglage : le contenu s'affiche alors directement. */ @media (prefers-reduced-motion: reduce) { .apparition { transition: none !important; transform: none !important; opacity: 1 !important; } } /* ============================================================ BANDEAU DU PROGRAMME DE FIDÉLITÉ Affiché en haut des pages catalogue, sous la barre de menu. ============================================================ */ .bandeau-fidelite { background: linear-gradient(90deg, #111 0%, #2a2a2a 50%, #111 100%); border-bottom: 2px solid #ffc107; letter-spacing: 0.5px; } /* ============================================================ DÉFILEMENT VERS LA GRILLE DE PRODUITS Les liens de catégorie se terminent par #products : le navigateur amène alors directement le visiteur sur les produits, depuis la page d'accueil comme depuis les onglets du catalogue. Sans scroll-margin-top, la grille se placerait tout en haut de l'écran et passerait SOUS la barre de menu, qui est fixée. Ce décalage réserve la place du menu et du bandeau de fidélité. ============================================================ */ #products { scroll-margin-top: 230px; }