/** * MENU MOBILE — reprise du design du site principal ECOinfos * (cf. httpdocs/wp-content/themes/ecoinfos/css/header.css, section * "REDESIGN MENU MOBILE"). * * Le site principal utilise un header maison (#offcanvas-top-bar.mobile_active) ; * ici on part de la structure GeneratePress (nav#secondary-navigation + * nav#site-navigation) et on reproduit le même rendu : * * MENU FERMÉ (§0) : une seule barre blanche de 80px, hamburger nu à gauche, * logo centré ; la barre bleue est masquée. * * MENU OUVERT (§1 à §4) : * 1) bandeau logo illustré + bouton de fermeture rond en haut à gauche * 2) barre bleue avec les liens du "Menu du haut" alignés horizontalement * 3) items du menu principal sous forme de cartes blanches avec pastille * d'icône à gauche et chevron à droite * * La classe `eco-mobile-open` est posée sur par js/theme.js quand le * menu principal est ouvert (nécessaire car la barre bleue précède la barre de * navigation dans le DOM : aucun sélecteur CSS ne peut remonter jusqu'à elle). * * IMPORTANT : tout ce fichier est sous @media (max-width: 767px), la version * desktop du menu n'est jamais impactée. 767px = mobile_menu_breakpoint de * GP Premium (generate_menu_plus_settings). */ @media (max-width: 767px) { /* ============================================================= */ /* 0. MENU FERMÉ — barre blanche unique */ /* ============================================================= */ /* La référence n'affiche qu'une seule barre blanche de 80px en mobile : hamburger à gauche, logo centré, pas de barre bleue (celle-ci n'apparaît qu'une fois le menu ouvert, cf. §2). Les réseaux sociaux qu'elle contenait restent accessibles dans le pied de page. */ body:not(.eco-mobile-open) .eco-header nav#secondary-navigation { display: none; } body:not(.eco-mobile-open) .eco-header nav#site-navigation .inside-navigation { position: relative; justify-content: center; min-height: 80px; padding: 0; } /* Hamburger seul, calé à gauche : on retire le libellé "MENU" et le cadre du bouton pour retrouver le "☰" nu de la référence (40px, #001a64). */ body:not(.eco-mobile-open) .eco-header nav#site-navigation .menu-toggle { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 60px; padding: 0; background: transparent; } body:not(.eco-mobile-open) .eco-header nav#site-navigation .menu-toggle .mobile-menu { display: none; } body:not(.eco-mobile-open) .eco-header nav#site-navigation .menu-toggle .gp-icon { margin: 0; color: rgb(0, 26, 100); font-size: 30px; } /* Même correctif qu'à l'état ouvert : le libellé "MENU" étant masqué, le `top: 2.75px` de GeneratePress décentre l'icône dans son bouton. */ body:not(.eco-mobile-open) .eco-header nav#site-navigation .menu-toggle .gp-icon svg { top: 0; } /* Logo centré dans la barre, à la taille de la référence (140px). `width: 100%` : le hamburger est en position absolue, la branding doit occuper toute la ligne pour que le centrage porte sur la barre entière (sinon elle se cale à gauche, sous le hamburger). */ body:not(.eco-mobile-open) .eco-header nav#site-navigation .navigation-branding, body:not(.eco-mobile-open) .eco-header nav#site-navigation .site-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; margin: 0 !important; } body:not(.eco-mobile-open) .eco-header nav#site-navigation .navigation-branding img, body:not(.eco-mobile-open) .eco-header nav#site-navigation .site-logo img { height: auto !important; width: 140px; max-width: 45vw; } /* ============================================================= */ /* 1. BANDEAU LOGO (barre de navigation principale, en-tête) */ /* ============================================================= */ /* Hauteurs de reference : le bandeau logo et la barre bleue empilés en haut du menu. La barre bleue est sortie du flux (cf. §2) car GeneratePress la place avant la navigation dans le DOM, alors que la référence l'affiche entre le bandeau et la liste ; ces deux variables gardent son décalage et la réserve de place dans la liste synchronisés. */ body.eco-mobile-open .eco-header { --eco-banner-h: 110px; --eco-topbar-h: 44px; --eco-social-h: 46px; } /* --- Animation d'ouverture --------------------------------------- Comme la référence (#header-navs : translateX(-100%) → 0 en 0.5s), le panneau glisse depuis la gauche. `eco-mobile-in` est posée par js/theme.js une frame après `eco-mobile-open`, et retirée 500ms avant le démontage, pour que la fermeture s'anime aussi. Durée à garder synchronisée avec SLIDE_MS dans js/theme.js. `-100vw` et non `-100%` : la barre du haut est en position absolue et se dimensionne sur son contenu, un pourcentage la ferait glisser d'une distance plus courte que la largeur de l'écran. */ body.eco-mobile-open .eco-header nav#secondary-navigation.secondary-navigation, body.eco-mobile-open .eco-header nav#site-navigation .main-nav { transform: translateX(-100vw); transition: transform 0.5s ease; } body.eco-mobile-in .eco-header nav#secondary-navigation.secondary-navigation, body.eco-mobile-in .eco-header nav#site-navigation .main-nav { transform: translateX(0); } /* Le bandeau logo ne glisse pas : il grandit de 80px à 110px, comme le `transition: all 0.3s` du #site-title de la référence. */ .eco-header nav#site-navigation .navigation-branding, .eco-header nav#site-navigation .site-logo { transition: height 0.3s ease; } /* GeneratePress masque la liste dès que `.toggled` saute ; on la maintient visible pendant l'animation de fermeture. */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul { display: flex; } @media (prefers-reduced-motion: reduce) { body.eco-mobile-open .eco-header nav#secondary-navigation.secondary-navigation, body.eco-mobile-open .eco-header nav#site-navigation .main-nav, .eco-header nav#site-navigation .navigation-branding, .eco-header nav#site-navigation .site-logo { transition: none; } } body.eco-mobile-open .eco-header nav#site-navigation.main-navigation { background: #ffffff; border-bottom: none; } body.eco-mobile-open .eco-header nav#site-navigation .inside-navigation { position: relative; display: block; padding: 0; } /* Bandeau illustré de 110px : image de fond + logo agrandi centré. Le fond est porté par .navigation-branding (et non par le

, qui contient aussi la liste et ferait déborder le cadrage `cover`). */ body.eco-mobile-open .eco-header nav#site-navigation .navigation-branding, body.eco-mobile-open .eco-header nav#site-navigation .site-logo { display: flex; align-items: center; justify-content: center; height: var(--eco-banner-h); margin: 0; background: #ffffff url(../img/menu/menu-mobile-background.webp) no-repeat center 50%; background-size: cover; } body.eco-mobile-open .eco-header nav#site-navigation .navigation-branding img, body.eco-mobile-open .eco-header nav#site-navigation .site-logo img { height: auto !important; width: 210px; max-width: 60vw; } /* Bouton de fermeture : carré blanc arrondi en haut à gauche (le libellé "MENU" disparaît, seule la croix reste). */ body.eco-mobile-open .eco-header nav#site-navigation .menu-toggle { position: absolute; left: 12px; top: 12px; z-index: 5; width: 40px; height: 40px; min-height: 0; padding: 0; background: #ffffff; border-radius: 15px; box-shadow: 0 2px 10px rgba(0, 50, 80, 0.18); /* `line-height: 1` : hérité à 40px, il décalait le SVG de la croix vers le bas à l'intérieur de la pastille (l'icône est alignée sur la ligne de base du bouton, pas sur sa boîte). */ line-height: 1; } body.eco-mobile-open .eco-header nav#site-navigation .menu-toggle .mobile-menu { display: none; } body.eco-mobile-open .eco-header nav#site-navigation .menu-toggle .gp-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; color: #1f4885; font-size: 22px; } /* Ne pas toucher au `display` des deux SVG (barres + croix) : GeneratePress les empile tous les deux dans le bouton et masque l'inutile en le réduisant à une largeur nulle — les forcer en `block` les afficherait côte à côte. GP les descend de `top: 2.75px` (position: relative) pour les caler sur la ligne de base du libellé "MENU" ; ce libellé étant masqué ici, ce décalage décentre la croix dans sa pastille : on l'annule. */ body.eco-mobile-open .eco-header nav#site-navigation .menu-toggle .gp-icon svg { top: 0; } /* ============================================================= */ /* 2. BARRE BLEUE (menu du haut) */ /* ============================================================= */ /* Menu ouvert : les liens du "Menu du haut" s'affichent en ligne, comme sur le site principal, sans passer par le second hamburger. */ /* Sortie du flux et calée sous le bandeau logo, pour retrouver l'ordre de la référence (bandeau > barre bleue > cartes) sans toucher au DOM. */ body.eco-mobile-open .eco-header nav#secondary-navigation.secondary-navigation { position: absolute; top: var(--eco-banner-h); left: 0; right: 0; /* Doit passer devant #site-navigation, que GeneratePress place à z-index: 100 pour le menu collant. */ z-index: 200; margin-left: 0; /* Le dégradé est redéclaré ici : ecoinfos-identity.css le pose en `!important` mais notre bloc, plus spécifique, doit rester autoportant si cette barre est un jour restylée. */ /* Le dégradé est porté par .main-nav (la barre bleue proprement dite) : le

englobe aussi la bande des réseaux sociaux, qui reste claire. */ background: none; border-bottom: none; border-top-left-radius: 0; } /* Deux bandes empilées : les liens (bleu) puis les réseaux sociaux (clair). */ body.eco-mobile-open .eco-header nav#secondary-navigation .inside-navigation { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; } body.eco-mobile-open .eco-header nav#secondary-navigation .main-nav { order: 1; flex: 0 0 100%; display: flex; justify-content: center; min-height: var(--eco-topbar-h); padding: 0 6px; background: linear-gradient(to right, #0a7fc3, #1f4885); } /* ecoinfos-identity.css masque "Actualités" en mobile pour économiser la place dans la barre repliée ; menu ouvert, la référence l'affiche. */ body.eco-mobile-open .eco-header nav#secondary-navigation .main-nav > ul > li:has(> a[href$="/actualites/"]) { display: flex; } body.eco-mobile-open .eco-header nav#secondary-navigation button.secondary-menu-toggle { display: none; } /* Réseaux sociaux : bande claire sous la barre bleue, au-dessus des cartes. Le bloc est réinjecté dans la barre du haut par functions.php ; en mobile on le repasse simplement sur sa propre ligne, centré. */ body.eco-mobile-open .eco-header nav#secondary-navigation .secondary-nav-social { order: 2; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; /* Hauteur donnée par un padding symétrique plutôt que par min-height : le bloc widget qu'elle contient porte des marges verticales propres qui décentraient les icônes vers le bas. */ box-sizing: border-box; min-height: var(--eco-social-h); margin: 0; padding: 10px 0; background: #f3f7fa; border-right: none; } body.eco-mobile-open .eco-header nav#secondary-navigation .secondary-nav-social .widget { margin: 0; padding: 0; } body.eco-mobile-open .eco-header nav#secondary-navigation .secondary-nav-social .wp-block-social-links { gap: 18px; } /* Les icônes gardent les pastilles de couleur de chaque réseau, identiques au desktop (le bloc "Réseaux sociaux" de WordPress les pose sur le

) : on se contente de rétablir le SVG blanc, qu'ecoinfos-identity.css réduit à 16px pour la barre bleue. */ body.eco-mobile-open .eco-header nav#secondary-navigation .secondary-nav-social .wp-block-social-links a svg { width: 16px; height: 16px; fill: #ffffff; } body.eco-mobile-open .eco-header nav#secondary-navigation .main-nav { flex: 1 1 auto; display: flex; justify-content: center; } /* Bat la règle `nav#secondary-navigation:not(.toggled) .main-nav > ul {display:none}` de ecoinfos-identity.css : ici la barre est dépliée en permanence. */ body.eco-mobile-open .eco-header nav#secondary-navigation:not(.toggled) .main-nav > ul, body.eco-mobile-open .eco-header nav#secondary-navigation .main-nav > ul { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center; width: 100%; padding: 0; margin: 0; } body.eco-mobile-open .eco-header nav#secondary-navigation .main-nav > ul > li { display: flex; width: auto; min-width: 0; } /* Séparateurs verticaux entre les liens (comme la référence) */ body.eco-mobile-open .eco-header nav#secondary-navigation .main-nav > ul > li::after { display: block; content: ""; position: absolute; right: 0; top: 25%; height: 50%; border-right: 1px solid rgba(255, 255, 255, 0.7); } body.eco-mobile-open .eco-header nav#secondary-navigation .main-nav > ul > li:last-child::after { display: none; } body.eco-mobile-open .eco-header nav#secondary-navigation .main-nav > ul > li > a { display: flex; align-items: center; justify-content: center; padding: 12px 7px; font-size: 12px; line-height: 1.2; text-align: center; text-transform: uppercase; white-space: nowrap; } /* Très petits écrans : on resserre pour garder les 4 liens sur une ligne */ @media (max-width: 420px) { body.eco-mobile-open .eco-header nav#secondary-navigation .main-nav > ul > li > a { padding: 12px 4px; font-size: 10px; } } @media (max-width: 340px) { body.eco-mobile-open .eco-header nav#secondary-navigation .main-nav > ul > li > a { padding: 12px 3px; font-size: 9px; } } /* ============================================================= */ /* 3. ITEMS DU MENU PRINCIPAL EN CARTES */ /* ============================================================= */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav { background: #f3f7fa; } body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: auto; /* La barre bleue et la bande sociale sont en position absolue au-dessus : on leur réserve leur hauteur en haut de la liste. */ padding: calc(var(--eco-topbar-h) + var(--eco-social-h) + 12px) 0 18px; margin: 0; } /* Carte */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li { position: relative; display: block; /* `flex: 0 0` obligatoire : le CSS desktop pose `flex: 1 1 0` sur les items pour qu'ils se partagent la largeur, ce qui étirerait les cartes. */ flex: 0 0 calc(100% - 20px); width: calc(100% - 20px); margin: 5px 0; background: #ffffff; border-radius: 15px; box-shadow: 0 2px 10px rgba(0, 50, 80, 0.12); } body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li::after { display: none !important; } /* Lien : place pour la pastille à gauche et le chevron à droite */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li > a { position: relative; display: flex; align-items: center; /* flex-start : le CSS desktop centre les libellés, la référence mobile les aligne à gauche derrière la pastille. */ justify-content: flex-start; padding: 22px 40px 22px 58px !important; border-radius: 15px !important; font-size: 16px; font-weight: 500; line-height: 1.25; color: #21005d; text-align: left; background: transparent; transition: background 0.25s, color 0.25s; } /* Pastille d'icône (::before) */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li > a::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background-color: #eaf3fc; background-repeat: no-repeat; background-position: center center; background-size: 24px 24px; box-sizing: border-box; } /* Chevron (::after) */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li > a::after { content: "\203a"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: "Helvetica", sans-serif; font-size: 30px; font-style: normal; font-weight: bold; line-height: 1; color: #1f4885; } /* État actif / survol : carte bleu marine */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav ul > li:not(:has(> a[href*="/devis_index"])):not(:has(> a[href*="/annuaire_search"])) > a:hover, body.eco-mobile-open .eco-header nav#site-navigation .main-nav ul > li:not(:has(> a[href*="/devis_index"])):not(:has(> a[href*="/annuaire_search"])) > a:active, body.eco-mobile-open .eco-header nav#site-navigation .main-nav ul > li:not(:has(> a[href*="/devis_index"])):not(:has(> a[href*="/annuaire_search"])):hover > a { background: #1f4885; color: #ffffff; } body.eco-mobile-open .eco-header nav#site-navigation .main-nav ul > li:not(:has(> a[href*="/devis_index"])):not(:has(> a[href*="/annuaire_search"])) > a:hover::before, body.eco-mobile-open .eco-header nav#site-navigation .main-nav ul > li:not(:has(> a[href*="/devis_index"])):not(:has(> a[href*="/annuaire_search"])) > a:active::before { background-color: #ffffff; } body.eco-mobile-open .eco-header nav#site-navigation .main-nav ul > li:not(:has(> a[href*="/devis_index"])):not(:has(> a[href*="/annuaire_search"])) > a:hover::after, body.eco-mobile-open .eco-header nav#site-navigation .main-nav ul > li:not(:has(> a[href*="/devis_index"])):not(:has(> a[href*="/annuaire_search"])) > a:active::after { color: #ffffff; } /* ---- Icônes par item de menu ---- */ /* Actualités (journal) */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href$="/actualites/"]) > a::before { background-image: url("../img/menu/menu-actualites.svg"); } /* Énergies (éclair) */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/category/energies"]) > a::before { background-image: url("../img/menu/menu-energies.svg"); } /* Environnement (feuille) */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/category/environnement"]) > a::before { background-image: url("../img/menu/menu-environnement.svg"); } /* Mobilité durable (véhicule électrique) */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/category/mobilite-durable"]) > a::before { background-image: url("../img/menu/menu-mobilite.svg"); } /* Réglementations (balance) */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/category/reglementations"]) > a::before { background-image: url("../img/menu/menu-reglementations.svg"); } /* Entreprises (immeuble) — icône du site principal */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/category/entreprises"]) > a::before { background-image: url("../img/menu/menu-collectivites.svg"); } /* Simulateur photovoltaïque (panneau solaire) — icône du site principal */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/simulation-simulateur"]) > a::before { background-image: url("../img/menu/menu-simulateur.svg"); } /* ---- Boutons d'action (vert / orange) ---- */ /* Comme sur le site principal, le simulateur passe avant les deux CTA, qui ferment la liste. */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/simulation-simulateur"]) { order: 1; } body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/devis_index"]), body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/annuaire_search"]) { order: 2; margin-top: 10px; } /* On repasse par-dessus les styles "pleine largeur sans arrondi" de ecoinfos-identity.css : ici les CTA sont des cartes comme les autres. */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/devis_index"]), body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/annuaire_search"]) { border-radius: 15px !important; } body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/devis_index"]) > a, body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/annuaire_search"]) > a { padding: 22px 40px 22px 58px !important; border-radius: 15px !important; color: #ffffff !important; } /* La règle générique ci-dessus met `background: transparent` sur tous les liens : on redonne leur couleur aux deux CTA (sinon texte blanc sur carte blanche). */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/devis_index"]) > a { background: #619e2b; } body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/annuaire_search"]) > a { background: #ffa000; } body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/devis_index"]) > a::after, body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/annuaire_search"]) > a::after { color: #ffffff; } /* Pastille translucide + icône blanche sur fond coloré */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/devis_index"]) > a::before { background-color: rgba(255, 255, 255, 0.25); background-image: url("../img/menu/menu-devis.svg"); } body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/annuaire_search"]) > a::before { background-color: rgba(255, 255, 255, 0.25); background-image: url("../img/menu/menu-annuaire.svg"); } /* Survol : on assombrit simplement le fond coloré */ body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/devis_index"]) > a:hover, body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/devis_index"]) > a:active { background: #4d871d; } body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/annuaire_search"]) > a:hover, body.eco-mobile-open .eco-header nav#site-navigation .main-nav > ul > li:has(> a[href*="/annuaire_search"]) > a:active { background: #e08e00; } /* ============================================================= */ /* 4. PLEIN ÉCRAN */ /* ============================================================= */ /* Le menu occupe tout l'écran et défile seul, comme sur le site principal (#offcanvas-top-bar.mobile_active : height 100vh, position fixed). */ body.eco-mobile-open .eco-header { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #f3f7fa; } body.admin-bar.eco-mobile-open .eco-header { top: 46px; } /* Empêche le défilement de la page derrière le menu */ body.eco-mobile-open { overflow: hidden; } }