/** * ========================================================================== * HELENERIU.FR - Menu Mobile Amélioré * ========================================================================== * Corrige le bug du menu caché et ajoute des animations fluides * Remplace les styles problématiques de core.min.css *//* ========================================================================== 1. VARIABLES DU MENU ========================================================================== */:root {/* Dimensions */ --menu-width:min(320px, 85vw);--menu-toggle-size:44px;--header-height-mobile:60px;/* Couleurs */ --menu-bg:#ffffff;--menu-overlay-bg:rgba(0, 0, 0, 0.6);--menu-text:#2c2c2c;--menu-text-light:#666666;--menu-border:#e8e8e8;--menu-accent:#8b7355;--menu-hover-bg:#f5f5f5;/* Transitions */ --menu-transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);--menu-transition-fast:0.15s ease;}/* ========================================================================== 2. BOUTON HAMBURGER ========================================================================== */.mobile-menu-toggle {display:none;flex-direction:column;justify-content:center;align-items:center;width:var(--menu-toggle-size);height:var(--menu-toggle-size);padding:8px;background:transparent;border:1px solid var(--menu-border);border-radius:6px;cursor:pointer;z-index:1001;position:relative;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--menu-transition-fast), border-color var(--menu-transition-fast);}.mobile-menu-toggle:hover,.mobile-menu-toggle:focus {background-color:var(--menu-hover-bg);border-color:var(--menu-accent);outline:none;}.mobile-menu-toggle:focus-visible {outline:2px solid var(--menu-accent);outline-offset:2px;}/* Lignes du hamburger */.burger-line,.mobile-menu-toggle span {display:block;width:22px;height:2px;background-color:var(--menu-text);border-radius:2px;transition:transform var(--menu-transition), opacity var(--menu-transition), background-color var(--menu-transition-fast);transform-origin:center;}.burger-line + .burger-line,.mobile-menu-toggle span + span {margin-top:5px;}/* Animation hamburger → X */.mobile-menu-toggle.active .burger-line:nth-child(1),.mobile-menu-toggle[aria-expanded="true"] .burger-line:nth-child(1) {transform:translateY(7px) rotate(45deg);}.mobile-menu-toggle.active .burger-line:nth-child(2),.mobile-menu-toggle[aria-expanded="true"] .burger-line:nth-child(2) {opacity:0;transform:scaleX(0);}.mobile-menu-toggle.active .burger-line:nth-child(3),.mobile-menu-toggle[aria-expanded="true"] .burger-line:nth-child(3) {transform:translateY(-7px) rotate(-45deg);}/* Afficher le toggle sur mobile */@media (max-width:991px) {.mobile-menu-toggle {display:flex;} /* Cacher la navigation desktop */ .main-nav, .desktop-nav, .nav-desktop, #header .nav-links:not(.mobile-nav-links) {display:none !important;}}/* ========================================================================== 3. OVERLAY DU MENU ========================================================================== *//* CORRECTION CRITIQUE:Supprimer le display:none!important de core.min.css */.mobile-menu-overlay {display:block !important;/* Force l'affichage */ position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-color:transparent;visibility:hidden;opacity:0;z-index:9998;transition:background-color var(--menu-transition), visibility var(--menu-transition), opacity var(--menu-transition);-webkit-overflow-scrolling:touch;}/* État ouvert de l'overlay */.mobile-menu-overlay.is-open,.mobile-menu-overlay[aria-hidden="false"] {visibility:visible;opacity:1;background-color:var(--menu-overlay-bg);}/* ========================================================================== 4. PANNEAU DU MENU ========================================================================== */.mobile-menu-panel {position:fixed;top:0;left:0;width:var(--menu-width);height:100%;max-height:100vh;max-height:100dvh;/* Dynamic viewport height pour mobile */ background-color:var(--menu-bg);box-shadow:4px 0 20px rgba(0, 0, 0, 0.15);z-index:9999;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;transform:translateX(-100%);transition:transform var(--menu-transition);display:flex;flex-direction:column;}/* État ouvert du panneau */.mobile-menu-overlay.is-open .mobile-menu-panel,.mobile-menu-overlay[aria-hidden="false"] .mobile-menu-panel {transform:translateX(0);}/* Variante:Menu depuis la droite */.mobile-menu-panel--right {left:auto;right:0;transform:translateX(100%);}.mobile-menu-overlay.is-open .mobile-menu-panel--right,.mobile-menu-overlay[aria-hidden="false"] .mobile-menu-panel--right {transform:translateX(0);}/* ========================================================================== 5. HEADER DU MENU ========================================================================== */.mobile-menu-header {display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--menu-border);flex-shrink:0;min-height:var(--header-height-mobile);background:var(--menu-bg);position:sticky;top:0;z-index:1;}.mobile-menu-logo {max-height:40px;width:auto;}.mobile-menu-logo img {max-height:40px;width:auto;}/* Bouton de fermeture */.mobile-close,.mobile-menu-close {display:flex;align-items:center;justify-content:center;width:var(--menu-toggle-size);height:var(--menu-toggle-size);padding:0;background:transparent;border:1px solid var(--menu-border);border-radius:6px;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--menu-text);transition:background-color var(--menu-transition-fast), border-color var(--menu-transition-fast), color var(--menu-transition-fast);touch-action:manipulation;-webkit-tap-highlight-color:transparent;}.mobile-close:hover,.mobile-close:focus,.mobile-menu-close:hover,.mobile-menu-close:focus {background-color:var(--menu-hover-bg);border-color:var(--menu-accent);color:var(--menu-accent);outline:none;}.mobile-close:focus-visible,.mobile-menu-close:focus-visible {outline:2px solid var(--menu-accent);outline-offset:2px;}/* ========================================================================== 6. CONTENU DU MENU ========================================================================== */.mobile-menu-content {flex:1;overflow-y:auto;padding:0;}/* Navigation principale */.mobile-nav,.mobile-menu-nav {list-style:none;margin:0;padding:0;}.mobile-nav-item,.mobile-menu-item {border-bottom:1px solid var(--menu-border);}.mobile-nav-link,.mobile-menu-link {display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;color:var(--menu-text);text-decoration:none;font-size:1rem;font-weight:500;transition:background-color var(--menu-transition-fast), color var(--menu-transition-fast);min-height:48px;}.mobile-nav-link:hover,.mobile-nav-link:focus,.mobile-menu-link:hover,.mobile-menu-link:focus {background-color:var(--menu-hover-bg);color:var(--menu-accent);outline:none;}.mobile-nav-link:focus-visible,.mobile-menu-link:focus-visible {outline:2px solid var(--menu-accent);outline-offset:-2px;}/* Icône de flèche pour sous-menus */.mobile-nav-arrow,.submenu-arrow {font-size:0.875rem;color:var(--menu-text-light);transition:transform var(--menu-transition-fast);}.mobile-nav-item.open .mobile-nav-arrow,.mobile-menu-item.open .submenu-arrow {transform:rotate(180deg);}/* ========================================================================== 7. SOUS-MENUS ========================================================================== */.mobile-submenu,.mobile-menu-submenu {list-style:none;margin:0;padding:0;background-color:#fafafa;max-height:0;overflow:hidden;transition:max-height var(--menu-transition);}.mobile-nav-item.open .mobile-submenu,.mobile-menu-item.open .mobile-menu-submenu {max-height:500px;/* Valeur suffisamment grande */}.mobile-submenu-link,.mobile-menu-submenu a {display:block;padding:0.75rem 1.25rem 0.75rem 2rem;color:var(--menu-text-light);text-decoration:none;font-size:0.9375rem;border-bottom:1px solid var(--menu-border);min-height:44px;display:flex;align-items:center;transition:background-color var(--menu-transition-fast), color var(--menu-transition-fast);}.mobile-submenu-link:hover,.mobile-submenu-link:focus,.mobile-menu-submenu a:hover,.mobile-menu-submenu a:focus {background-color:#f0f0f0;color:var(--menu-accent);}/* ========================================================================== 8. FOOTER DU MENU ========================================================================== */.mobile-menu-footer {padding:1rem;border-top:1px solid var(--menu-border);background:#fafafa;flex-shrink:0;}.mobile-menu-contact {display:flex;flex-direction:column;gap:0.75rem;}.mobile-menu-contact a {display:flex;align-items:center;gap:0.5rem;color:var(--menu-text);text-decoration:none;font-size:0.9375rem;padding:0.5rem;border-radius:4px;transition:background-color var(--menu-transition-fast);}.mobile-menu-contact a:hover,.mobile-menu-contact a:focus {background-color:var(--menu-hover-bg);}.mobile-menu-social {display:flex;gap:0.75rem;margin-top:0.75rem;}.mobile-menu-social a {display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--menu-border);color:var(--menu-text);transition:background-color var(--menu-transition-fast), color var(--menu-transition-fast);}.mobile-menu-social a:hover,.mobile-menu-social a:focus {background:var(--menu-accent);color:#fff;}/* ========================================================================== 9. ÉTAT DU BODY QUAND MENU OUVERT ========================================================================== *//* Empêcher le scroll du body */body.menu-open,html.menu-open {overflow:hidden;position:fixed;width:100%;height:100%;}/* Alternative iOS-friendly (utilisée par le JS) */body.menu-open-ios {position:fixed;width:100%;left:0;right:0;}/* ========================================================================== 10. ANIMATIONS & EFFETS ========================================================================== *//* Animation d'entrée des éléments du menu */.mobile-menu-overlay.is-open .mobile-nav-item {animation:slideInLeft 0.3s ease forwards;opacity:0;}.mobile-menu-overlay.is-open .mobile-nav-item:nth-child(1) {animation-delay:0.05s;}.mobile-menu-overlay.is-open .mobile-nav-item:nth-child(2) {animation-delay:0.1s;}.mobile-menu-overlay.is-open .mobile-nav-item:nth-child(3) {animation-delay:0.15s;}.mobile-menu-overlay.is-open .mobile-nav-item:nth-child(4) {animation-delay:0.2s;}.mobile-menu-overlay.is-open .mobile-nav-item:nth-child(5) {animation-delay:0.25s;}.mobile-menu-overlay.is-open .mobile-nav-item:nth-child(6) {animation-delay:0.3s;}.mobile-menu-overlay.is-open .mobile-nav-item:nth-child(7) {animation-delay:0.35s;}.mobile-menu-overlay.is-open .mobile-nav-item:nth-child(8) {animation-delay:0.4s;}@keyframes slideInLeft {from {opacity:0;transform:translateX(-20px);} to {opacity:1;transform:translateX(0);}}/* Respect des préférences de mouvement réduit */@media (prefers-reduced-motion:reduce) {.mobile-menu-overlay, .mobile-menu-panel, .mobile-menu-toggle, .burger-line, .mobile-nav-item {transition:none !important;animation:none !important;} .mobile-menu-overlay.is-open .mobile-nav-item {opacity:1;}}/* ========================================================================== 11. RESPONSIVE SPÉCIFIQUE ========================================================================== *//* Très petits écrans */@media (max-width:359px) {.mobile-menu-panel {width:100%;} .mobile-nav-link, .mobile-menu-link {padding:0.875rem 1rem;font-size:0.9375rem;}}/* Paysage sur mobile */@media (max-height:500px) and (orientation:landscape) {.mobile-menu-header {padding:0.5rem 1rem;min-height:50px;} .mobile-nav-link, .mobile-menu-link {padding:0.625rem 1rem;min-height:40px;} .mobile-submenu-link {padding:0.5rem 1rem 0.5rem 1.5rem;min-height:36px;}}/* iPad et tablettes */@media (min-width:768px) and (max-width:991px) {.mobile-menu-panel {width:min(400px, 60vw);} .mobile-nav-link, .mobile-menu-link {font-size:1.0625rem;}}/* ========================================================================== 12. SUPPORT DARK MODE ========================================================================== */@media (prefers-color-scheme:dark) {:root {--menu-bg:#1a1a1a;--menu-overlay-bg:rgba(0, 0, 0, 0.8);--menu-text:#e0e0e0;--menu-text-light:#b0b0b0;--menu-border:#333333;--menu-accent:#a8906f;--menu-hover-bg:#2a2a2a;} .mobile-submenu, .mobile-menu-submenu {background-color:#151515;} .mobile-menu-footer {background:#151515;}}/* ========================================================================== 13. PRINT ========================================================================== */@media print {.mobile-menu-toggle, .mobile-menu-overlay {display:none !important;}}/** * FIX FORCE - Menu Mobile * Override TOUS les styles qui bloquent le menu *//* FORCE:Override core.min.css display:none!important */#mobile-menu,.mobile-menu-overlay,div.mobile-menu-overlay,div#mobile-menu.mobile-menu-overlay,#header .mobile-menu-overlay,header .mobile-menu-overlay {display:block !important;position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;height:100% !important;z-index:99999 !important;opacity:0 !important;visibility:hidden !important;background:rgba(0, 0, 0, 0.6) !important;transition:opacity 0.3s ease, visibility 0.3s ease !important;pointer-events:none !important;}/* OUVERT - Forcer l'affichage */#mobile-menu.is-open,.mobile-menu-overlay.is-open,div.mobile-menu-overlay.is-open,div#mobile-menu.is-open,#mobile-menu[aria-hidden="false"],.mobile-menu-overlay[aria-hidden="false"] {opacity:1 !important;visibility:visible !important;pointer-events:auto !important;}/* Panel du menu - PLEIN ÉCRAN */#mobile-menu .mobile-menu-panel,.mobile-menu-overlay .mobile-menu-panel,.mobile-menu-panel {position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;max-width:100% !important;height:100% !important;height:100vh !important;height:100dvh !important;background:#ffffff !important;box-shadow:none !important;transform:translateY(-100%) !important;transition:transform 0.3s ease !important;overflow-y:auto !important;overflow-x:hidden !important;z-index:100000 !important;display:flex !important;flex-direction:column !important;}#mobile-menu.is-open .mobile-menu-panel,.mobile-menu-overlay.is-open .mobile-menu-panel,#mobile-menu[aria-hidden="false"] .mobile-menu-panel,.mobile-menu-overlay[aria-hidden="false"] .mobile-menu-panel {transform:translateY(0) !important;}/* Header du menu mobile - PLEIN ÉCRAN */.mobile-header {display:flex !important;align-items:center !important;justify-content:space-between !important;padding:20px 25px !important;background:#8b7355 !important;border-bottom:none !important;position:sticky !important;top:0 !important;z-index:1 !important;min-height:70px !important;}.mobile-title {margin:0 !important;font-size:24px !important;font-weight:600 !important;color:#fff !important;}/* Bouton fermer - Plus gros */.mobile-close {display:flex !important;align-items:center !important;justify-content:center !important;width:50px !important;height:50px !important;background:rgba(255,255,255,0.2) !important;border:none !important;border-radius:50% !important;cursor:pointer !important;font-size:28px !important;color:#fff !important;transition:all 0.2s !important;}.mobile-close:hover {background:rgba(255,255,255,0.3) !important;transform:scale(1.1) !important;}/* Navigation mobile - PLEIN ÉCRAN */.mobile-navigation {padding:20px 0 !important;flex:1 !important;}.mobile-nav-list {list-style:none !important;margin:0 !important;padding:0 !important;}.mobile-nav-item {border-bottom:1px solid #f0f0f0 !important;}.mobile-nav-link {display:flex !important;align-items:center !important;gap:20px !important;padding:22px 30px !important;color:#333 !important;text-decoration:none !important;font-size:20px !important;font-weight:500 !important;transition:all 0.2s !important;}.mobile-nav-link:hover,.mobile-nav-link:active {background:#f8f5f2 !important;color:#8b7355 !important;padding-left:40px !important;}.mobile-nav-icon {font-size:28px !important;}.mobile-nav-text {font-size:20px !important;}/* Recherche mobile */.mobile-search {padding:15px 20px !important;background:#fff !important;border-bottom:1px solid #e0e0e0 !important;}.mobile-search-wrapper {display:flex !important;border:1px solid #ddd !important;border-radius:6px !important;overflow:hidden !important;}.mobile-search-field {flex:1 !important;padding:12px 15px !important;border:none !important;font-size:16px !important;outline:none !important;}.mobile-search-submit {padding:12px 15px !important;background:#8b7355 !important;border:none !important;color:#fff !important;cursor:pointer !important;}/* Contact mobile */.mobile-contact {padding:20px !important;background:#f8f8f8 !important;border-top:1px solid #e0e0e0 !important;margin-top:auto !important;}.mobile-contact-title {font-weight:600 !important;margin-bottom:10px !important;color:#333 !important;}.mobile-phone-link {display:flex !important;align-items:center !important;gap:10px !important;color:#8b7355 !important;text-decoration:none !important;font-size:18px !important;}/* Bouton hamburger */.mobile-menu-toggle {display:none !important;}@media (max-width:991px) {.mobile-menu-toggle {display:flex !important;flex-direction:column !important;justify-content:center !important;align-items:center !important;width:44px !important;height:44px !important;padding:8px !important;background:transparent !important;border:1px solid #ddd !important;border-radius:6px !important;cursor:pointer !important;} .burger-line {display:block !important;width:22px !important;height:2px !important;background:#333 !important;margin:2px 0 !important;transition:all 0.3s ease !important;} .mobile-menu-toggle.active .burger-line:nth-child(1) {transform:rotate(45deg) translate(5px, 5px) !important;} .mobile-menu-toggle.active .burger-line:nth-child(2) {opacity:0 !important;} .mobile-menu-toggle.active .burger-line:nth-child(3) {transform:rotate(-45deg) translate(5px, -5px) !important;}}/* Body quand menu ouvert */body.menu-open {overflow:hidden !important;}/** * BOUTON BURGER - Style amélioré *//* Bouton burger plus gros et visible */.mobile-menu-toggle {display:none !important;}@media (max-width:991px) {.mobile-menu-toggle {display:flex !important;flex-direction:column !important;justify-content:center !important;align-items:center !important;gap:6px !important;width:52px !important;height:52px !important;padding:10px !important;background:#8b7355 !important;border:none !important;border-radius:8px !important;cursor:pointer !important;box-shadow:0 2px 8px rgba(139, 115, 85, 0.3) !important;transition:all 0.2s ease !important;} .mobile-menu-toggle:hover, .mobile-menu-toggle:focus {background:#7a6548 !important;transform:scale(1.05) !important;box-shadow:0 4px 12px rgba(139, 115, 85, 0.4) !important;} .mobile-menu-toggle:active {transform:scale(0.98) !important;} /* Lignes du burger plus épaisses */ .burger-line {display:block !important;width:26px !important;height:3px !important;background:#ffffff !important;border-radius:2px !important;transition:all 0.3s ease !important;} /* Animation quand actif */ .mobile-menu-toggle.active {background:#333 !important;} .mobile-menu-toggle.active .burger-line:nth-child(1) {transform:rotate(45deg) translate(6px, 6px) !important;} .mobile-menu-toggle.active .burger-line:nth-child(2) {opacity:0 !important;transform:scaleX(0) !important;} .mobile-menu-toggle.active .burger-line:nth-child(3) {transform:rotate(-45deg) translate(6px, -6px) !important;}}/* Encore plus gros sur petits écrans */@media (max-width:480px) {.mobile-menu-toggle {width:56px !important;height:56px !important;} .burger-line {width:28px !important;height:4px !important;}}/** * ========================================================================== * HELENERIU.FR - Grille Responsive Améliorée * ========================================================================== * Corrige les problèmes de grille Bootstrap et ajoute un système moderne * À placer APRÈS le fichier theme.css dans le head *//* ========================================================================== 1. VARIABLES CSS - Breakpoints Standardisés ========================================================================== */:root {/* Breakpoints unifiés (résout le problème 767px vs 768px) */ --bp-xs:0;--bp-sm:576px;--bp-md:768px;--bp-lg:992px;--bp-xl:1200px;--bp-xxl:1400px;/* Container max-widths */ --container-sm:540px;--container-md:720px;--container-lg:960px;--container-xl:1140px;--container-xxl:1320px;/* Espacement responsive */ --gutter:1rem;--gutter-sm:0.75rem;--gutter-lg:1.5rem;}/* ========================================================================== 2. RESET & BASE RESPONSIVE ========================================================================== *//* Box-sizing global */*,*::before,*::after {box-sizing:border-box;}/* Images responsives par défaut (corrige le problème des images qui débordent) */img,picture,video,canvas,svg {display:block;max-width:100%;height:auto;}/* Conteneur principal responsive */.container,.container-fluid {width:100%;padding-right:var(--gutter);padding-left:var(--gutter);margin-right:auto;margin-left:auto;}/* ========================================================================== 3. GRILLE BOOTSTRAP CORRIGÉE - Media Queries Manquantes ========================================================================== *//* Base:Mobile First (xs) - Toujours pleine largeur */.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {float:left;position:relative;min-height:1px;padding-right:var(--gutter-sm);padding-left:var(--gutter-sm);}.col-xs-1 {width:8.33333%;}.col-xs-2 {width:16.66667%;}.col-xs-3 {width:25%;}.col-xs-4 {width:33.33333%;}.col-xs-5 {width:41.66667%;}.col-xs-6 {width:50%;}.col-xs-7 {width:58.33333%;}.col-xs-8 {width:66.66667%;}.col-xs-9 {width:75%;}.col-xs-10 {width:83.33333%;}.col-xs-11 {width:91.66667%;}.col-xs-12 {width:100%;}/* Small devices (landscape phones, 576px and up) */@media (min-width:576px) {.container {max-width:var(--container-sm);} .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {float:left;position:relative;min-height:1px;padding-right:var(--gutter-sm);padding-left:var(--gutter-sm);} .col-sm-1 {width:8.33333%;} .col-sm-2 {width:16.66667%;} .col-sm-3 {width:25%;} .col-sm-4 {width:33.33333%;} .col-sm-5 {width:41.66667%;} .col-sm-6 {width:50%;} .col-sm-7 {width:58.33333%;} .col-sm-8 {width:66.66667%;} .col-sm-9 {width:75%;} .col-sm-10 {width:83.33333%;} .col-sm-11 {width:91.66667%;} .col-sm-12 {width:100%;}}/* Medium devices (tablets, 768px and up) */@media (min-width:768px) {.container {max-width:var(--container-md);} .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {float:left;position:relative;min-height:1px;padding-right:var(--gutter);padding-left:var(--gutter);} .col-md-1 {width:8.33333%;} .col-md-2 {width:16.66667%;} .col-md-3 {width:25%;} .col-md-4 {width:33.33333%;} .col-md-5 {width:41.66667%;} .col-md-6 {width:50%;} .col-md-7 {width:58.33333%;} .col-md-8 {width:66.66667%;} .col-md-9 {width:75%;} .col-md-10 {width:83.33333%;} .col-md-11 {width:91.66667%;} .col-md-12 {width:100%;}}/* Large devices (desktops, 992px and up) */@media (min-width:992px) {.container {max-width:var(--container-lg);} .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {float:left;position:relative;min-height:1px;padding-right:var(--gutter);padding-left:var(--gutter);} .col-lg-1 {width:8.33333%;} .col-lg-2 {width:16.66667%;} .col-lg-3 {width:25%;} .col-lg-4 {width:33.33333%;} .col-lg-5 {width:41.66667%;} .col-lg-6 {width:50%;} .col-lg-7 {width:58.33333%;} .col-lg-8 {width:66.66667%;} .col-lg-9 {width:75%;} .col-lg-10 {width:83.33333%;} .col-lg-11 {width:91.66667%;} .col-lg-12 {width:100%;}}/* Extra large devices (large desktops, 1200px and up) */@media (min-width:1200px) {.container {max-width:var(--container-xl);} .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {float:left;position:relative;min-height:1px;padding-right:var(--gutter-lg);padding-left:var(--gutter-lg);} .col-xl-1 {width:8.33333%;} .col-xl-2 {width:16.66667%;} .col-xl-3 {width:25%;} .col-xl-4 {width:33.33333%;} .col-xl-5 {width:41.66667%;} .col-xl-6 {width:50%;} .col-xl-7 {width:58.33333%;} .col-xl-8 {width:66.66667%;} .col-xl-9 {width:75%;} .col-xl-10 {width:83.33333%;} .col-xl-11 {width:91.66667%;} .col-xl-12 {width:100%;}}/* XXL devices (1400px and up) */@media (min-width:1400px) {.container {max-width:var(--container-xxl);}}/* Clearfix pour les rows */.row::before,.row::after {display:table;content:" ";}.row::after {clear:both;}/* ========================================================================== 4. GRILLE CSS GRID MODERNE (Alternative Flexbox/Grid) ========================================================================== */.grid {display:grid;gap:var(--gutter);}/* Grilles auto-adaptatives (corrige le problème minmax(350px)) */.grid-auto-fit {display:grid;gap:var(--gutter);grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));}.grid-auto-fill {display:grid;gap:var(--gutter);grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr));}/* Grilles fixes par breakpoint */.grid-cols-1 {grid-template-columns:repeat(1, 1fr);}.grid-cols-2 {grid-template-columns:repeat(2, 1fr);}.grid-cols-3 {grid-template-columns:repeat(3, 1fr);}.grid-cols-4 {grid-template-columns:repeat(4, 1fr);}@media (max-width:767px) {.grid-cols-2, .grid-cols-3, .grid-cols-4 {grid-template-columns:1fr;} .grid-cols-2-mobile {grid-template-columns:repeat(2, 1fr);}}@media (min-width:768px) and (max-width:991px) {.grid-cols-4 {grid-template-columns:repeat(2, 1fr);} .grid-cols-3 {grid-template-columns:repeat(2, 1fr);}}/* ========================================================================== 5. FLEXBOX UTILITIES ========================================================================== */.flex {display:flex;}.flex-wrap {flex-wrap:wrap;}.flex-col {flex-direction:column;}.items-center {align-items:center;}.justify-center {justify-content:center;}.justify-between {justify-content:space-between;}.gap-1 {gap:0.5rem;}.gap-2 {gap:1rem;}.gap-3 {gap:1.5rem;}@media (max-width:767px) {.flex-col-mobile {flex-direction:column;} .items-start-mobile {align-items:flex-start;}}/* ========================================================================== 6. TYPOGRAPHIE RESPONSIVE ========================================================================== *//* Taille de police minimale pour accessibilité (corrige font-size:0.75em) */html {font-size:16px;}body {font-size:1rem;line-height:1.6;}/* Clamp pour typographie fluide */h1 {font-size:clamp(1.75rem, 4vw, 2.5rem);}h2, .section-title {font-size:clamp(1.5rem, 3vw, 2rem);}h3 {font-size:clamp(1.25rem, 2.5vw, 1.75rem);}/* Taille minimale garantie pour la lisibilité */p, li, a, span, label, input, textarea, select {font-size:max(0.875rem, 14px);}/* FAQ et petits textes - minimum 14px (corrige le 0.75em) */.faq-item,.small-text,.meta-text,.breadcrumb a,.footer-links a {font-size:max(0.875rem, 14px);}@media (max-width:479px) {/* Éviter les textes trop petits sur très petits écrans */ body {font-size:max(1rem, 16px);} .small-text, .meta-text {font-size:max(0.8125rem, 13px);}}/* ========================================================================== 7. COMPOSANTS SPÉCIFIQUES - Corrections ========================================================================== *//* Grille des témoignages (corrige minmax(350px)) */.testimonials-grid,.temoignages-grid {display:grid;gap:var(--gutter);grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));}/* Grille des marques */.brands-grid,.marques-grid {display:grid;gap:var(--gutter);grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));}/* Grille produits */.products-grid,.produits-grid {display:grid;gap:var(--gutter);grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));}@media (max-width:479px) {.products-grid, .produits-grid {grid-template-columns:repeat(2, 1fr);gap:0.5rem;}}/* Breadcrumb responsive (améliore le truncation) */.breadcrumb {display:flex;flex-wrap:wrap;padding:0.5rem 0;font-size:max(0.875rem, 14px);}.breadcrumb-item {max-width:none;overflow:visible;}@media (max-width:479px) {.breadcrumb {font-size:max(0.75rem, 12px);} .breadcrumb-item:not(:last-child) {max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Afficher seulement les 2 derniers items sur très petit écran */ .breadcrumb-item:nth-last-child(n+4) {display:none;} .breadcrumb-item:nth-last-child(4)::before {content:"...";margin-right:0.5rem;}}/* Trust bar responsive unifié */.trust-bar,.trust-bar-content {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;}@media (max-width:767px) {.trust-bar, .trust-bar-content {flex-direction:column;text-align:center;padding:1rem;} .trust-bar-item {width:100%;}}/* ========================================================================== 8. BOUTONS TACTILES - Accessibilité Mobile ========================================================================== *//* Taille minimale pour les cibles tactiles (44x44px minimum WCAG) */button,.btn,[role="button"],a.btn,input[type="submit"],input[type="button"] {min-height:44px;min-width:44px;padding:0.75rem 1.25rem;touch-action:manipulation;}/* Boutons plus grands sur mobile */@media (max-width:767px) {.btn, .btn-primary, .btn-secondary, .add-to-cart, .checkout-btn {min-height:48px;padding:0.875rem 1.5rem;font-size:1rem;width:100%;max-width:100%;} /* Boutons inline sur mobile */ .btn-group, .button-group {flex-direction:column;gap:0.5rem;}}/* ========================================================================== 9. ESPACEMENT RESPONSIVE ========================================================================== *//* Sections */.section,section {padding:3rem 1rem;}@media (max-width:767px) {.section, section {padding:2rem 0.75rem;}}@media (max-width:479px) {.section, section {padding:1.5rem 0.5rem;}}/* Margins responsive */.my-responsive {margin-top:clamp(1rem, 3vw, 2rem);margin-bottom:clamp(1rem, 3vw, 2rem);}.py-responsive {padding-top:clamp(1rem, 3vw, 2rem);padding-bottom:clamp(1rem, 3vw, 2rem);}/* ========================================================================== 10. UTILITAIRES D'AFFICHAGE RESPONSIVE ========================================================================== *//* Hide/Show par breakpoint */.hide-xs {display:none !important;}@media (min-width:576px) {.hide-xs {display:block !important;} .hide-sm {display:none !important;} .show-xs-only {display:none !important;}}@media (min-width:768px) {.hide-sm {display:block !important;} .hide-md {display:none !important;} .show-sm-only {display:none !important;}}@media (min-width:992px) {.hide-md {display:block !important;} .hide-lg {display:none !important;} .show-md-only {display:none !important;}}@media (min-width:1200px) {.hide-lg {display:block !important;} .show-lg-only {display:none !important;}}/* Mobile only */@media (max-width:767px) {.hide-mobile {display:none !important;} .show-desktop-only {display:none !important;}}@media (min-width:768px) {.show-mobile-only {display:none !important;} .hide-desktop {display:none !important;}}/* ========================================================================== 11. ACCESSIBILITÉ & PRÉFÉRENCES UTILISATEUR ========================================================================== *//* Respect des préférences de mouvement réduit */@media (prefers-reduced-motion:reduce) {*, *::before, *::after {animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}}/* Mode sombre amélioré (garde la couleur de marque) */@media (prefers-color-scheme:dark) {:root {--color-primary:#2c2c2c;--color-accent:#a8906f;/* Version plus claire du marron signature */ --color-text:#e0e0e0;--color-text-light:#b0b0b0;--color-border:#404040;--color-surface:#1a1a1a;--color-background:#121212;}}/* Contraste élevé */@media (prefers-contrast:high) {:root {--color-text:#000000;--color-border:#000000;} a, button, .btn {text-decoration:underline;outline:2px solid currentColor;}}/* ========================================================================== 12. IMPRESSION ========================================================================== */@media print {/* Cacher les éléments non essentiels */ .mobile-menu-toggle, .mobile-menu-overlay, .cart-icon, .search-toggle, .social-links, .cookie-banner, .newsletter-popup {display:none !important;} /* Afficher les URLs des liens */ a[href^="http"]::after {content:" (" attr(href) ")";font-size:0.8em;color:#666;} /* Optimiser les couleurs pour l'impression */ body {color:#000;background:#fff;}}/** * SOUS-CATÉGORIES - Style moderne badges/pills * heleneriu.fr - 2024-12-23 *//* Container principal */#subcategories {background:linear-gradient(135deg, #faf8f5 0%, #f5f0eb 100%) !important;border:none !important;border-radius:12px !important;padding:20px 24px !important;margin:20px 0 30px !important;box-shadow:0 2px 8px rgba(139, 115, 85, 0.08) !important;}/* Titre */#subcategories .subcategory-heading {font-size:16px !important;font-weight:600 !important;color:#8b7355 !important;margin:0 0 16px 0 !important;padding-bottom:12px !important;border-bottom:2px solid rgba(139, 115, 85, 0.15) !important;text-transform:uppercase !important;letter-spacing:0.5px !important;}/* Liste en flex wrap */#subcategories .subcategories-list {display:flex !important;flex-wrap:wrap !important;gap:10px !important;list-style:none !important;margin:0 !important;padding:0 !important;}/* Chaque sous-catégorie = badge cliquable */#subcategories .subcategories-list li {margin:0 !important;padding:0 !important;}/* Cacher les images vides */#subcategories .subcategory-image {display:none !important;}/* Style badge/pill pour le nom */#subcategories .subcategories-list h5 {margin:0 !important;}#subcategories .subcategory-name {display:inline-flex !important;align-items:center !important;padding:10px 18px !important;background:#ffffff !important;color:#5a4a3a !important;font-size:14px !important;font-weight:500 !important;text-decoration:none !important;border-radius:25px !important;border:1px solid rgba(139, 115, 85, 0.25) !important;transition:all 0.25s ease !important;white-space:nowrap !important;box-shadow:0 1px 3px rgba(0, 0, 0, 0.04) !important;}#subcategories .subcategory-name:hover {background:#8b7355 !important;color:#ffffff !important;border-color:#8b7355 !important;transform:translateY(-2px) !important;box-shadow:0 4px 12px rgba(139, 115, 85, 0.3) !important;text-decoration:none !important;}#subcategories .subcategory-name:active {transform:translateY(0) !important;}/* Description cachée pour design épuré */#subcategories .cat_desc {display:none !important;}/* Version compacte pour mobile */@media (max-width:767px) {#subcategories {padding:16px !important;margin:15px 0 20px !important;border-radius:10px !important;} #subcategories .subcategory-heading {font-size:14px !important;margin-bottom:12px !important;} #subcategories .subcategories-list {gap:8px !important;} #subcategories .subcategory-name {padding:8px 14px !important;font-size:13px !important;border-radius:20px !important;}}/* Très petits écrans - scroll horizontal */@media (max-width:479px) {#subcategories {padding:14px 16px !important;overflow:hidden !important;} #subcategories .subcategories-list {flex-wrap:nowrap !important;overflow-x:auto !important;padding-bottom:8px !important;margin:0 -16px !important;padding-left:16px !important;padding-right:16px !important;-webkit-overflow-scrolling:touch !important;scrollbar-width:none !important;} #subcategories .subcategories-list::-webkit-scrollbar {display:none !important;} #subcategories .subcategory-name {padding:8px 12px !important;font-size:12px !important;}}/* Animation d'apparition */@keyframes fadeInUp {from {opacity:0;transform:translateY(10px);} to {opacity:1;transform:translateY(0);}}#subcategories .subcategories-list li {animation:fadeInUp 0.3s ease forwards !important;}#subcategories .subcategories-list li:nth-child(1) {animation-delay:0.05s;}#subcategories .subcategories-list li:nth-child(2) {animation-delay:0.1s;}#subcategories .subcategories-list li:nth-child(3) {animation-delay:0.15s;}#subcategories .subcategories-list li:nth-child(4) {animation-delay:0.2s;}#subcategories .subcategories-list li:nth-child(5) {animation-delay:0.25s;}#subcategories .subcategories-list li:nth-child(n+6) {animation-delay:0.3s;}