/* Hauteur unique pour la barre du haut */ .top_bar { height: 64px; padding: 0; } /* Centre verticalement le logo texte ET le menu dans cette hauteur */ .top_bar .logo_container .logo_align, .top_bar #menu_wrapper, .top_bar #menu_wrapper .nav_wrapper_inner { height: 64px; display: flex; align-items: center; } /* Nettoyage d’éventuels offsets du thème */ #logo_wrapper { margin: 0; } #logo_wrapper .logo_container { margin: 0; } /* Logo texte */ #logo_wrapper .logo_container { width: auto; } /* évite une largeur figée d’image */ #custom_logo, #custom_logo_transparent { display: flex; align-items: center; text-decoration: none; } .brand-name { display: inline-block; font-family: 'Karla', sans-serif; /* déjà chargé dans ton */ font-weight: 700; font-size: 20px; /* ajuste si tu veux plus grand/petit */ letter-spacing: .08em; line-height: 29px; /* ~ hauteur de l’ancien logo */ text-transform: uppercase; color: #111; /* version header normal */ } .brand-name--light { color: #fff; } /* version header transparent (sur image) */ /* État hover (optionnel) */ #custom_logo:hover .brand-name, #custom_logo_transparent:hover .brand-name { opacity: .8; } .portfolio_nav { display:none; } .top_bar.fixed { position: fixed; animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 0.5s; -webkit-animation-duration: 0.5s; z-index: 999; visibility: visible !important; top: 0px; } .top_bar.fixed #menu_wrapper div .nav { margin-top: 16px; } .top_bar.fixed #searchform { margin-top: 8px; } .top_bar.fixed .header_cart_wrapper { margin-top: 21px; } .top_bar.fixed #menu_wrapper div .nav > li > a { padding-bottom: 24px; } .top_bar.fixed .logo_wrapper img { max-height: 40px; width: auto; } #mobile_nav_icon { display: none; } #option_btn { position: fixed; top: 120px; right: -2px; cursor:pointer; z-index: 9; background: #fff; border-right: 0; width: 45px; height: 120px; text-align: center; border-radius: 5px 0px 0px 5px; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); } #option_btn i { font-size: 18px; line-height: 40px; color: #000; } #option_btn a { display: block; } #option_wrapper { position: fixed; top: 0; right:-290px; width: 280px; height: 100%; background: #fff; border: 1px solid #e1e1e1; border-left: 0; z-index: 99999; color: #222; font-size: 13px; box-shadow: 0px -4px 30px rgba(0, 0, 0, 0.1); overflow: auto; } #option_wrapper:hover { overflow-y: auto; } #option_wrapper .button.buy { width: 100%; box-sizing: border-box; } #option_wrapper select { width: 100%; margin-top: 5px; } #option_wrapper .note_icon { color: #ff3e36; margin-right: 5px; } strong.label, div.label { font-weight: normal; margin-bottom: 5px; color: #000; display: block; } .demo_list { list-style: none; display: block; margin: 30px 0 0 0; } .demo_list li { display: block; position: relative; margin-bottom: 15px; width: 100%; overflow: hidden; line-height: 0; } .demo_list li img { max-width: 260px; height: auto; line-height: 0; } .demo_list li:hover img { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-filter: blur(2px); filter: blur(2px); -moz-filter: blur(2px); } .demo_list li:hover .demo_thumb_hover_wrapper { opacity: 1; } .demo_thumb_hover_wrapper { background-color: rgba(0, 0, 0, 0.5); height: 100%; left: 0; opacity: 0; overflow: hidden; position: absolute; top: 0; transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; -ms-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -webkit-transition: opacity 0.4s ease-in-out; visibility: visible; width: 100%; line-height: normal; } .demo_thumb_hover_inner { display: table; height: 100%; width: 100%; text-align: center; vertical-align: middle; } .demo_thumb_desc { display: table-cell; height: 100%; text-align: center; vertical-align: middle; width: 100%; padding: 0 10% 0 10%; box-sizing: border-box; } #option_wrapper .inner h6 { margin: 10px 0 0 0; } .demo_thumb_hover_inner h6 { color: #fff !important; line-height: 24px; font-size: 18px; } .demo_thumb_desc .button.white { margin-top: 10px; font-size: 12px !important; } .demo_thumb_desc .button.white:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; } #option_wrapper .inner { padding: 25px 15px 0 15px; box-sizing: border-box; } #option_wrapper .button.buy { background: #000; border-color: #000; } @media only screen and (max-width: 768px) { html[data-menu=leftmenu] .mobile_menu_wrapper { right: 0; left: initial; -webkit-transform: translate(360px, 0px); -ms-transform: translate(360px, 0px); transform: translate(360px, 0px); -o-transform: translate(360px, 0px); } } .post_header_title, .post_header.grid { text-align: center; } .top_bar.hasbg { background: rgba(0,0,0,0.20); } #page_caption, #page_caption .page_title_wrapper { text-align: left; float: left; } #page_caption .page_title_wrapper .page_title_inner { position: relative; float: left; width: 100%; box-sizing: border-box; margin-top: 10px; margin-bottom: 10px; } .post_caption { position: relative; } #page_caption hr.title_break, .post_caption hr.title_break { display: none; } #page_caption h1 { width: 55%; display: block; float: left; } #page_caption .page_tagline, .post_caption .page_tagline { width: 45%; text-align: right; position: absolute; right: 0; bottom: 0.5em; } .post_caption { text-align: left; float: left; width: 100%; } .page_tagline { font-style: normal; } .post_caption .page_tagline { right: 30px; } #portfolio_wall_filters { width: 45%; float: right; text-align: right; margin-left: 0 !important; } @media only screen and (min-width: 1100px) { #page_caption .page_tagline { right: 90px; } } .two_cols.gallery .element img, .three_cols.gallery .element img, .four_cols.gallery .element img, .five_cols.gallery .element img, .two_cols.gallery .element:hover img, .three_cols.gallery .element:hover img, .four_cols.gallery .element:hover img, .five_cols.gallery .element:hover img, .post_img img, .post_img:hover img, #horizontal_gallery_wrapper .gallery_image_wrapper.archive img, .horizontal_gallery_wrapper .gallery_image_wrapper.archive img { transition: all 4.5s ease-out; -webkit-transition: all 4.5s ease-out; } .footer_bar_wrapper { background: #fff; } #horizontal_gallery_wrapper tbody tr td .wp-caption, .horizontal_gallery_wrapper tbody tr td .wp-caption { display: none; } .header_cart_wrapper { display: none; } body.home .top_bar { background: transparent; border: 0; } body.home .top_bar.scroll { border-bottom: 1px solid #e1e1e1; } html[data-style=fullscreen] .top_bar.hasbg, .top_bar.hasbg { border: 0; } body.home .one_third img { border: 1px solid #e1e1e1; } /* centre le menu */ #menu_wrapper { display: flex; justify-content: center !important; } /* empêche la nav interne d'être étirée full */ #menu_wrapper .nav_wrapper_inner { width: auto !important; margin: 0 auto !important; } /* on neutralise tentatives du thème de left align */ html[data-menu="leftalign_center"] #menu_wrapper, html[data-menu="leftalign_center"] #menu_wrapper .nav_wrapper_inner { justify-content: center !important; text-align: center !important; } /* optionnel : menu items centrés en texte */ #main_menu > li > a { text-align: center; } /* --- Unblock scroll au cas où le thème/slider le bloque --- */ html, body { height: auto !important; overflow: auto !important; } /* --- Mettre le slider derrière tout --- */ #supersized, #supersized-loader { z-index: 0 !important; } /* --- Tous les calques/contrôles slider sous le contenu et non bloquants --- */ #controls-wrapper, #nextslide, #prevslide, #thumb-tray, .load-item { z-index: 9998 !important; /* footer reste au-dessus (99999) */ pointer-events: auto !important; bottom: 96px !important; /* libère la zone du footer (hauteur = padding-bottom du body) */ } /* Le fond slider reste derrière */ #supersized, #supersized-loader { z-index: 0 !important; } /* Footer reste au-dessus de tout */ .site-footer { z-index: 99999 !important; } /* --- Footer visible au-dessus de tout --- */ .site-footer { position: fixed !important; left: 0; right: 0; bottom: 0; display: block !important; background: #000 !important; padding: 24px 0 !important; z-index: 100000 !important; } /* Liens du footer */ .site-footer a { color:#fff !important; text-decoration:none; } .site-footer a:hover { text-decoration:underline; } /* Espace pour que le footer fixe ne masque pas le contenu */ body { padding-bottom: 96px !important; } /* (Debug visuel — décommente pour vérifier) .site-footer { outline: 2px solid red !important; } */ /* Le slider reste derrière tout */ #supersized, #supersized-loader { z-index: 0 !important; } /* Contrôles du slider : clics actifs, mais sous le footer */ #controls-wrapper, #nextslide, #prevslide, #thumb-tray, .load-item { z-index: 1 !important; /* footer passera au-dessus */ pointer-events: auto !important; bottom: 0 !important; /* remet les contrôles au bas de l’écran */ } /* Espace de scroll plein écran au-dessus du footer, mais laisse passer les clics au slider */ .hero-spacer { height: 100vh; /* 1 écran */ pointer-events: none; /* clics passent au slider */ } /* Footer "normal" (non fixe), visible au-dessus des contrôles */ .site-footer { position: relative !important; background: #000 !important; padding: 40px 0 !important; margin-top: 0 !important; z-index: 2 !important; /* > contrôles du slider */ } /* Liens footer */ .site-footer a { color:#fff !important; text-decoration:none; } .site-footer a:hover { text-decoration:underline; } /* IMPORTANT : pas de padding-bottom sur le body pour cette variante */ body { padding-bottom: 0 !important; } .site-footer .standard_wrapper ul{ justify-content: flex-start !important; text-align:left !important; } .site-footer .standard_wrapper{ text-align:left !important; } /* Full-bleed (bord à bord) pour le header et le footer */ .top_bar .standard_wrapper, .site-footer .standard_wrapper{ max-width: none !important; width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Logo vraiment collé à gauche */ #logo_normal, #logo_normal .logo_align, #custom_logo{ display: flex !important; justify-content: flex-start !important; } .brand-name{ margin-left: 0 !important; } /* Footer: liste alignée à gauche */ .site-footer .standard_wrapper ul{ display: flex !important; justify-content: flex-start !important; gap: 35px; list-style: none; margin: 0; padding: 0; } .top_bar .standard_wrapper, .site-footer .standard_wrapper{ padding-left:40px !important; padding-right:40px !important; } /* wrapper global top bar full width */ .top_bar .standard_wrapper{ max-width:none !important; width:100% !important; display:flex; justify-content:space-between; align-items:center; padding-left:40px; /* tu ajustes ici */ padding-right:40px; /* tu ajustes ici pour le menu */ } /* force le menu à aller à droite */ #menu_wrapper{ margin-left:auto !important; } /* ================================ FINAL OVERRIDES — header & menu (à placer TOUT EN BAS du fichier) ================================ */ /* Wrapper header full-bleed + paddings réglables */ .top_bar .standard_wrapper{ max-width: none !important; width: 100% !important; display: flex !important; align-items: center !important; padding-left: 40px !important; /* ← ajuste ici le recul à gauche du logo */ padding-right: 40px !important; /* ← ajuste ici le recul à droite du menu */ margin: 0 !important; } /* Logo à gauche */ #logo_normal, #logo_normal .logo_align, #custom_logo{ display: flex !important; justify-content: flex-start !important; } #logo_normal{ margin-right: auto !important; } /* pousse le menu à droite */ /* Écrase toutes les règles qui centrent le menu */ #menu_wrapper, html[data-menu="leftalign_center"] #menu_wrapper, html[data-menu="leftalign_center"] #menu_wrapper .nav_wrapper_inner{ display: flex !important; justify-content: flex-end !important; /* menu à droite */ text-align: right !important; width: auto !important; margin: 0 !important; } /* Barre de navigation en ligne + espacements */ #main_menu{ display: flex !important; gap: 28px !important; /* espace entre items (à ajuster) */ } #main_menu > li > a{ text-align: right !important; } /* ================================ Footer — aligné à gauche avec marge ================================ */ .site-footer .standard_wrapper{ max-width: none !important; width: 100% !important; margin: 0 !important; padding-left: 40px !important; /* ← ajuste le recul à gauche du footer */ padding-right: 40px !important; /* ← si besoin */ } .site-footer .standard_wrapper ul{ display: flex !important; justify-content: flex-start !important; gap: 35px !important; margin: 0 !important; padding: 0 !important; } .site-footer .standard_wrapper ul{ display:flex !important; justify-content:space-between !important; width:100% !important; padding:0 !important; margin:0 !important; } .footer-left, .footer-right{ display:flex; gap:35px; } .footer-right{ justify-content:flex-end; } .site-footer{ padding-top:14px !important; padding-bottom:14px !important; } /* ======= FORCE LE MENU EN NOIR PARTOUT ======= */ /* états : normal, hasbg, fixed, fullscreen, hover/active/visited */ #menu_wrapper #main_menu.nav > li > a, #menu_wrapper ul.nav > li > a, .header_style_wrapper .top_bar #menu_wrapper .nav > li > a, .header_style_wrapper .top_bar.hasbg #menu_wrapper .nav > li > a, .header_style_wrapper .top_bar.fixed #menu_wrapper .nav > li > a, html[data-style="fullscreen"] .top_bar #menu_wrapper .nav > li > a, body.home #menu_wrapper .nav > li > a, #menu_wrapper .nav > li.current-menu-item > a, #menu_wrapper .nav > li.current_page_item > a, #menu_wrapper .nav > li > a:link, #menu_wrapper .nav > li > a:visited, #menu_wrapper .nav > li > a:hover, #menu_wrapper .nav > li > a:active { color: #000 !important; -webkit-text-fill-color: #000 !important; /* certains thèmes WebKit */ text-shadow: none !important; /* coupe les effets "blanc" */ opacity: 1 !important; } .hero-title-img{ position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; z-index: 9999; pointer-events:none; /* IMPORTANT pour laisser cliquer le slider */ } .hero-title-img img{ width: 60vw; /* tu ajustes la taille ici */ max-width: 1200px; } /* Bloc candidature centré et lisible */ .apply-bloc{ max-width: 820px; margin: 6rem auto; padding: 0 24px; text-align: center; font-size: 18px; line-height: 1.7; } .apply-bloc p{ margin: 0.6rem 0; } .apply-email{ font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: .02em; margin-bottom: 1rem; } .apply-email a{ color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; } .apply-email a:hover{ opacity:.8; } /* accessibilité */ .visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* un peu plus d’air sous l’image de couverture si besoin */ #page_caption + #page_content_wrapper .inner{ padding-top: 0; } .site-footer a:hover, .site-footer a:focus { text-decoration: none !important; } #main_menu li.lang-flag { margin-left: 18px; } #main_menu li.lang-flag img { display:block; } /* Accessibilité : texte caché pour lecteurs d'écran */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Bouton hamburger */ #mobile_nav_icon{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; /* zone de clic confortable */ font-size:22px; line-height:1; /* taille de l’icône */ background:transparent; border:0; cursor:pointer; } /* Place le bouton à droite si besoin */ #logo_right_button .logo_right_button { display:flex; align-items:center; } #logo_right_button { display:flex; align-items:center; } /* Affichage spécifique mobile */ @media (max-width: 991px){ /* Afficher le bouton sur mobile */ #mobile_nav_icon{ display:inline-flex; } /* Option : cacher le menu desktop si nécessaire */ #menu_wrapper #nav_wrapper{ display:none; } } /* S'assurer que le menu mobile passe par-dessus */ .mobile_menu_wrapper{ position:fixed; inset:0; background:#111; color:#fff; transform:translateX(100%); transition:transform .3s ease; z-index:9999; } .mobile-menu-open .mobile_menu_wrapper{ transform:translateX(0); } /* Style simple pour les liens du menu mobile */ .mobile_main_nav{ list-style:none; margin:40px 20px; padding:0; } .mobile_main_nav li{ margin:0 0 12px; } .mobile_main_nav a{ color:#fff; text-decoration:none; font-size:18px; } /* Par défaut : caché (desktop/tablette) */ #mobile_nav_icon { display: none; } /* Mobile uniquement (ex: < 992px) */ @media (max-width: 991px){ #mobile_nav_icon { display: inline-flex; } /* si besoin, on masque le menu desktop en mobile */ #menu_wrapper #nav_wrapper { display: none; } } #mobile_nav_icon { display: none !important; } @media (max-width: 991px){ #mobile_nav_icon { display: inline-flex !important; } } /* 1) Le header et le bouton passent en tout premier plan */ .header_style_wrapper, .top_bar, #menu_wrapper, #logo_right_button, #mobile_nav_icon{ position: relative; z-index: 10010; /* au-dessus des overlays du slider */ } /* 2) Le bouton est cliquable et propre */ #mobile_nav_icon{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; -webkit-appearance: none; appearance: none; } /* 3) Désactiver la capture de clics par les calques du slider */ #nextslide, #controls-wrapper, .load-item{ pointer-events: none; /* les taps traversent */ z-index: 1 !important; /* et restent sous le header */ } /* 4) Desktop vs mobile (si besoin) */ #mobile_nav_icon{ display: none; } @media (max-width: 991px){ #mobile_nav_icon{ display: inline-flex; } #menu_wrapper #nav_wrapper{ display: none; } } /* Fix clic bloqué sur mobile : le header doit passer au-dessus du slider */ .header_style_wrapper, .top_bar, #menu_wrapper, #logo_right_button, #mobile_nav_icon { position: relative !important; z-index: 99999 !important; } /* Désactive la capture de clics par les calques du slider */ #supersized, #supersized-loader, #nextslide, #controls-wrapper, .load-item { pointer-events: none !important; z-index: 1 !important; } /* Réactive les clics à l’intérieur du header */ .header_style_wrapper * { pointer-events: auto !important; } /* === PATCH FINAL — METTRE TOUT EN BAS DU FICHIER === */ /* 1) Bouton visible uniquement en mobile */ #mobile_nav_icon { display: none !important; } @media (max-width: 991px){ #mobile_nav_icon { display: inline-flex !important; } #menu_wrapper #nav_wrapper { display: none !important; } /* on cache le menu desktop en mobile */ } /* 2) Le panneau mobile est OFF-canvas par défaut */ .mobile_menu_wrapper{ position: fixed !important; inset: 0 !important; background: #111 !important; color: #fff !important; transform: translateX(100%) !important; opacity: 0 !important; transition: transform .3s ease, opacity .3s ease !important; z-index: 100000 !important; /* AU-DESSUS du header */ pointer-events: none !important; /* fermé = inactif */ } /* 3) Ouverture quand reçoit .mobile-menu-open (déjà fait par ton JS) */ .mobile-menu-open .mobile_menu_wrapper{ transform: translateX(0) !important; opacity: 1 !important; pointer-events: auto !important; /* ouvert = cliquable */ } /* 4) Le header reste légèrement dessous (mais cliquable quand le menu est fermé) */ .header_style_wrapper, .top_bar, #menu_wrapper, #logo_right_button, #mobile_nav_icon{ position: relative !important; z-index: 99990 !important; pointer-events: auto !important; } /* 5) Empêcher toute règle héritée de re-déplacer le panneau (leftmenu) */ @media (max-width: 1024px){ html[data-menu=leftmenu] .mobile_menu_wrapper{ right: auto !important; left: 0 !important; transform: translateX(100%) !important; /* état fermé normal */ } .mobile-menu-open html[data-menu=leftmenu] .mobile_menu_wrapper{ transform: translateX(0) !important; } } /* 6) Les calques du slider ne doivent JAMAIS capturer les clics devant le menu */ #supersized, #supersized-loader, #nextslide, #prevslide, #thumb-tray, #controls-wrapper, .load-item{ pointer-events: none !important; z-index: 1 !important; } /* Panneau mobile au-dessus de tout */ .mobile_menu_wrapper{ position: fixed !important; inset: 0 !important; background:#111 !important; color:#fff !important; transform: translateX(100%) !important; opacity: 0 !important; transition: transform .3s ease, opacity .3s ease !important; z-index: 100000 !important; /* > header */ pointer-events: none !important; /* fermé */ } .mobile-menu-open .mobile_menu_wrapper{ transform: translateX(0) !important; opacity: 1 !important; pointer-events: auto !important; /* ouvert */ } /* Le slider ne capte JAMAIS les clics par-dessus */ #supersized, #supersized-loader, #nextslide, #prevslide, #thumb-tray, #controls-wrapper, .load-item{ pointer-events: none !important; z-index: 1 !important; } /* ÉTAT FERMÉ (par défaut) */ #mobile_menu, .mobile_menu_wrapper{ position: fixed !important; inset: 0 !important; background: #111 !important; color: #fff !important; opacity: 0 !important; visibility: hidden !important; transform: translateX(100%) !important; /* off-canvas à droite */ transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s !important; pointer-events: none !important; z-index: 2147483646 !important; } /* ÉTAT OUVERT (quand a la classe) */ html.mobile-menu-open #mobile_menu, html.mobile-menu-open .mobile_menu_wrapper{ transform: translateX(0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition: transform .3s ease, opacity .3s ease !important; z-index: 2147483647 !important; } /* Neutralise les règles du thème qui décalent en mobile (leftmenu) */ @media (max-width: 1200px){ html[data-menu=leftmenu] .mobile_menu_wrapper{ left: 0 !important; right: auto !important; transform: translateX(100%) !important; /* fermé */ } html.mobile-menu-open[data-menu=leftmenu] .mobile_menu_wrapper{ transform: translateX(0) !important; /* ouvert */ } } /* Le slider ne capte jamais les clics au-dessus du menu */ #supersized, #supersized-loader, #nextslide, #prevslide, #thumb-tray, #controls-wrapper, .load-item{ pointer-events: none !important; z-index: 1 !important; } /* ===== PATCH ULTIME MENU MOBILE — À METTRE TOUT EN BAS ===== */ /* Fermé par défaut */ #mobile_menu, .mobile_menu_wrapper{ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; background: #111 !important; color: #fff !important; overflow-y: auto !important; transform: translateX(110%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 2147483646 !important; /* sous l'état ouvert, au-dessus du header */ } /* Ouvert quand a la classe */ html.mobile-menu-open #mobile_menu, html.mobile-menu-open .mobile_menu_wrapper{ transform: none !important; /* PAS de translate: il prend tout l'écran */ opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; display: block !important; /* au cas où un display:none traîne dans un autre CSS */ z-index: 2147483647 !important; /* tout en haut */ } /* Le slider et ses calques ne bloquent jamais les clics */ #supersized, #supersized-loader, #nextslide, #prevslide, #thumb-tray, #controls-wrapper, .load-item{ pointer-events: none !important; z-index: 1 !important; } /* Le bouton hamburger n’apparaît que sur mobile */ #mobile_nav_icon{ display:none !important; } @media (max-width: 991px){ #mobile_nav_icon{ display:inline-flex !important; } #menu_wrapper #nav_wrapper{ display:none !important; } } /* === SUPERSIZED VISIBLE EN ARRIÈRE-PLAN (HOME SEULEMENT) === */ body.home #supersized, body.home #supersized-loader{ position: fixed !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; z-index: 0 !important; /* slider tout au fond, mais visible */ } /* Le contenu passe au-dessus du slider, sans le masquer par un fond opaque */ body.home, body.home #wrapper, body.home .top_bar{ background: transparent !important; /* laisse voir les photos derrière */ } /* Header au-dessus du slider (texte/menu visibles) */ body.home .header_style_wrapper, body.home .top_bar, body.home #menu_wrapper{ position: relative !important; z-index: 2 !important; } /* === MENU MOBILE : z-index haut UNIQUEMENT quand il est ouvert === */ body.home #mobile_menu, body.home .mobile_menu_wrapper{ /* fermé : bas dans la pile + invisible */ z-index: 1 !important; /* < header (2) < menu ouvert (2147483647) */ } html.mobile-menu-open body.home #mobile_menu, html.mobile-menu-open body.home .mobile_menu_wrapper{ z-index: 2147483647 !important; /* ouvert : tout en haut */ } /* === CLICS DU SLIDER === - quand le menu est ouvert, on coupe les clics du slider - quand il est fermé, on les laisse (navigation du slider) */ html.mobile-menu-open #controls-wrapper, html.mobile-menu-open #nextslide, html.mobile-menu-open #prevslide, html.mobile-menu-open .load-item{ pointer-events: none !important; } html:not(.mobile-menu-open) #controls-wrapper, html:not(.mobile-menu-open) #nextslide, html:not(.mobile-menu-open) #prevslide, html:not(.mobile-menu-open) .load-item{ pointer-events: auto !important; } /* === Footer full width === */ .site-footer { width: 100% !important; margin: 0 !important; padding: 14px 0 !important; /* hauteur du footer */ background: #000 !important; } .site-footer .standard_wrapper { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 0 !important; /* enlève le padding gauche/droite */ box-sizing: border-box; } .site-footer .standard_wrapper ul { justify-content: space-between !important; width: 100% !important; padding: 0 40px !important; /* tu ajustes ici si tu veux un peu d’air */ } /* --- FIX FOOTER MOBILE: full width, pas de "trou" à droite --- */ @media (max-width: 991px){ .site-footer{ position: relative !important; width: 100% !important; background: #000 !important; margin: 0 !important; padding: 14px 0 !important; /* hauteur */ } /* enlève les marges/paddings qui créent la coupure à droite */ .site-footer .standard_wrapper{ max-width: 100% !important; width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; background: transparent !important; } /* on met l’air uniquement sur le contenu, pas sur le conteneur */ .site-footer .standard_wrapper ul{ display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 16px !important; /* ← ajuste si tu veux plus/moins d'air */ box-sizing: border-box !important; } /* évite tout débordement horizontal qui crée des “gaps” visuels */ html, body{ overflow-x: hidden !important; } } /* Desktop intact (tu peux ajuster le padding si besoin) */ @media (min-width: 992px){ .site-footer .standard_wrapper ul{ padding: 0 40px !important; } } /* --- Footer desktop: pas de coupe à droite --- */ @media (min-width: 992px){ html, body{ overflow-x: visible !important; /* réactive l'overflow horizontal en desktop */ } .site-footer{ width: 100% !important; margin: 0 !important; padding: 14px 0 !important; background: #000 !important; } .site-footer .standard_wrapper{ max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; /* pas de padding au wrapper */ box-sizing: border-box !important; overflow: visible !important; /* ne coupe rien */ } .site-footer .standard_wrapper ul{ display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin: 0 !important; padding: 0 32px !important; /* air interne, sans dépasser */ box-sizing: border-box !important; } .footer-left, .footer-right{ display: flex !important; align-items: center !important; gap: 24px !important; flex-wrap: nowrap !important; } .footer-right{ margin-left: auto !important; } /* Empêche toute troncature sur le lien Instagram */ .footer-right li, .footer-right a{ white-space: nowrap !important; overflow: visible !important; } } /* Mobile: on laisse l'overflow-x caché pour éviter les scrolls latéraux */ @media (max-width: 991px){ html, body{ overflow-x: hidden !important; } }