/* ========================================================================= Evok Chrome - raccord entre le header/footer Evok et le theme hote. Adapte a Storefront (theme classique), la ou le site forms visait un theme a blocs. C'est le SEUL fichier a revoir si le theme change : header.css et footer.css sont autonomes. NOTE : ce fichier est volontairement ecrit sans accents. Il a deja ete corrompu une fois par un outil qui l'a relu en ANSI puis reecrit en UTF-8, doublant l'encodage et cassant l'analyse de la feuille par le navigateur. Des commentaires sans accents suppriment le risque. ========================================================================= */ /* ---- Neutralisation du header et du footer du theme ---- Les actions `storefront_header` / `storefront_footer` sont deja retirees cote PHP, donc ces conteneurs sont vides. On les masque quand meme : le gabarit de Storefront les ecrit en dur et leurs bordures et marges laisseraient deux bandes vides. */ #masthead.site-header, #colophon.site-footer, .storefront-breadcrumb { display: none !important; } /* ========================================================================= DEGAGEMENT SOUS LE HEADER FIXE Le header Evok est en position:fixed, le menu principal aussi : ni l'un ni l'autre ne prend de place dans le flux. Sans compensation, le contenu passerait dessous. Le calcul passe par des variables CSS plutot que par une cascade de `padding-top` concurrents : une seule declaration de padding, et les variantes ne font que changer une valeur. Plus lisible, et surtout insensible aux surprises de specificite. header seul ......... 130px menu principal ...... 61px (18 + 22 + 20 + 1 de filet) barre d'admin ....... 32px (46px sous 782px de large) respiration ......... 72px (ecart sous le menu, toutes pages) ATTENTION : `header.css` posait ici, en heritage du site forms : body:not(.evok-has-hero) { padding-top: 130px; } Sa specificite (0,1,1) l'emportait sur ce calcul (0,0,1) et le contenu demarrait a 130px : le titre du produit disparaissait derriere le menu. La regle a ete retiree. Si un jour le contenu remonte a nouveau sous le header, chercher une declaration concurrente de `padding-top` sur `body` avant toute autre hypothese. ========================================================================= */ body { --evok-header: 130px; --evok-menu: 0px; --evok-bandeau: 0px; --evok-adminbar: 0px; /* Respiration entre le menu et le premier element de la page. Une seule valeur pour tout le site : la reduire ici remonte le contenu partout, sans avoir a reprendre chaque gabarit. */ --evok-air: 72px; padding-top: calc(var(--evok-header) + var(--evok-menu) + var(--evok-bandeau) + var(--evok-adminbar) + var(--evok-air)); } body.evok-a-menu { --evok-menu: 61px; } /* Le bandeau d'annonce grandit le header d'autant : il est rendu DEDANS (bandeau.php). La valeur ci-dessous n'est qu'une reserve — un script mesure la hauteur reelle et reecrit la variable, car un message un peu long occupe deux lignes sur un telephone. Sans le script, un message court reste correct. */ body.evok-a-bandeau { --evok-bandeau: 44px; } body.admin-bar { --evok-adminbar: 32px; } @media (max-width: 782px) { body.admin-bar { --evok-adminbar: 46px; } } /* Sur telephone, le menu principal n'est plus une barre sous l'en-tete : il passe dans le burger (header.css), et .header_nav est masque. On ne reserve donc plus sa hauteur dans le degagement. Et la respiration sous l'en-tete se resserre : 72px pesent lourd sur un petit ecran. */ @media (max-width: 767px) { body.evok-a-menu { --evok-menu: 0px; } body { --evok-air: 28px; } } /* La respiration (--evok-air) est comptee ICI et non sur `.site-content`. Storefront neutralise le padding de ce conteneur sur les pages boutique : le titre venait alors se coller sous le filet du menu, voire passer dessous. Tout regrouper sur le body evite d'en dependre. */ /* ========================================================================= MENU PRINCIPAL - reproduction de evokcollection.com (themes/evok/assets/css/main.css, regle `.header_nav`) Unites converties en pixels : le theme Evok pose 1rem = 10px, Storefront 16px. LA CHOREGRAPHIE DU SITE PRINCIPAL N'A PLUS LIEU D'ETRE ICI, et c'est une simplification, pas une perte. Chez eux, header et barre de menu sont deux elements fixes distincts : la barre doit donc suivre le header a la trace quand il passe de 130 a 80px, ce qu'ils obtiennent par des retards croises sur `top` — immediat en descendant, differe de 0,4 s en remontant. Ici, la barre est DANS le header (header.php). Elle en suit la hauteur par construction : il n'y a plus deux mouvements a synchroniser, donc plus de retards a regler. Ce qui reste anime est la hauteur du header et le fond de la barre. ========================================================================= */ /* LA BARRE EST UNE RANGEE DU HEADER, plus un element fixe a part. Elle etait auparavant `position: fixed` avec un `top` calcule (hauteur du header + bandeau + barre d'admin). Trois valeurs a tenir d'accord, dont une MESUREE au chargement : au moindre ecart — et il y en avait un a chaque transition, le bandeau disparaissant d'un coup quand le header, lui, s'anime — la barre se decrochait et la page defilait dans l'intervalle. Rendue DANS le header (header.php), elle suit sa hauteur par construction : il n'y a plus de calcul, donc plus rien qui puisse etre faux. Le header reste le seul element fixe, et c'est lui qui porte l'empilement. Les marges laterales viennent du header (48 px) : les redeclarer ici les doublerait. */ .header_nav { --white: #ffffff; --body-color: #121212; transition: background .4s ease; } /* SELECTEUR VOLONTAIREMENT LONG. `header.css` remet a zero toutes les listes du header (`header.header ul { margin: 0; padding: 0 }`, deux classes et deux types). Tant que la barre de menu vivait dehors, ce reset ne la concernait pas ; en la rentrant dans le header, elle est passee dessous — et ses retraits disparaissaient, libelles colles au filet. On reprend donc la chaine du reset et on lui ajoute la classe de la barre. */ header.header .header_nav ul { display: flex; justify-content: center; gap: 0 25px; margin: 0; /* Un peu plus d'air sous les libelles que dessus : le soulignement de l'entree courante occupe le bas de la ligne, et sans ce supplement il arrivait a deux pixels du bord de la barre. Ces valeurs commandent la HAUTEUR de la barre, reprise dans `--evok-menu` (en tete de fichier) : les deux se corrigent ensemble, sans quoi le contenu de la page remonte sous le header ou s'en ecarte. */ padding: 18px 0 20px; list-style: none; border-top: 1px solid var(--white); transition: border .4s ease; } .header_nav li { margin: 0; } .header_nav li a { position: relative; display: inline-block; color: var(--white); font-family: var(--font-body, 'Futura PT', Arial, sans-serif); font-size: 15px; line-height: 22px; letter-spacing: 2.4px; text-transform: uppercase; text-decoration: none; transition: color .4s ease; } /* Soulignement qui se deploie depuis la gauche au survol. Au ras de la ligne de base (`bottom: 0`) et non trois pixels dessous : a cette distance, le trait se lisait comme un filet pose sous le mot plutot que comme son soulignement. C'est aussi l'ecriture des liens du reste du site. */ .header_nav li a::after { display: block; content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--white); transition: width .35s ease, background .4s ease; } /* DEPLOYE, LE TRAIT S'ARRETE A LA DERNIERE LETTRE. L'interlettrage de 2,4 px est applique APRES chaque caractere, y compris le dernier : la boite du lien est donc plus large que le mot qu'on lit, et un soulignement a 100 % depassait d'autant a droite. Sur deux entrees voisines, ce decalage se voit — c'est ce qui donnait l'impression que le menu n'etait pas cale. `calc()` retranche exactement l'espace de trop, pas une valeur choisie a l'oeil : si l'interlettrage change, cette valeur doit changer avec lui. */ /* LES CLASSES D'ETAT COURANT SONT PLUS NOMBREUSES QU'IL N'Y PARAIT. Sur la page de categorie, WordPress marque l'entree `current-menu-item`. Sur une FICHE PRODUIT, il ne la marque plus — le produit n'est pas la categorie — mais pose trois autres classes sur l'entree parente : current-menu-parent / current-product-parent / current-product-ancestor Sans elles, le soulignement disparaissait des qu'on ouvrait un bon : on ne savait plus dans quelle rubrique on se trouvait, alors qu'on y etait toujours. Les deux dernieres sont propres a WooCommerce (le type de contenu s'appelle `product`) ; un autre type de contenu en ajouterait encore d'autres, sur le meme modele `current-{type}-parent`. */ .header_nav li:hover a::after, .header_nav li.current-menu-item a::after, .header_nav li.current-menu-parent a::after, .header_nav li.current-menu-ancestor a::after, .header_nav li.current-product-parent a::after, .header_nav li.current-product-ancestor a::after, .header_nav li.current-page-ancestor a::after, .header_nav li.current_page_parent a::after { width: calc(100% - 2.4px); } /* ---- Variante sur fond blanc ---- C'est celle de la boutique : le header y est toujours `header_black`, faute de visuel plein ecran derriere. La variante claire reste declaree au-dessus pour que la bascule soit possible sans reecrire la regle. */ .header_nav.header_nav_black { background: var(--white); } header.header .header_nav.header_nav_black ul { border-top: 1px solid var(--body-color); } .header_nav.header_nav_black li a { color: var(--body-color); } .header_nav.header_nav_black li a::after { background: var(--body-color); } /* ---- Au defilement ---- */ .header_nav.scrolled { background: var(--white); transition: background .4s ease .4s; } /* (Une regle masquait ici le soulignement de l'entree courante en position collee. Elle repondait a un trait qu'on voyait depasser sous le header — mais ce trait etait le SYMPTOME du decalage corrige plus haut, pas un defaut de reperage. Une fois la barre remise a sa place, le soulignement se trouve sous son libelle, ou il indique la rubrique en cours : il n'y a plus rien a masquer.) */ header.header .header_nav.scrolled ul { border-top: 1px solid var(--body-color); transition: border .4s ease .4s; } .header_nav.scrolled li a { color: var(--body-color); transition: color .4s ease .4s; } /* En position collee, le soulignement passe au GRIS DE PIERRE et non a l'encre : la barre est alors accolee au header reduit, et un trait plein y pesait autant que les libelles. Il indique la rubrique, il ne la souligne pas deux fois. `--evok-stone` vient des jetons du theme (`:root`, style.css). Le repli en dur n'est pas une precaution de style : ce fichier doit rester lisible si le theme change — c'est sa regle depuis le premier jour. */ .header_nav.scrolled li a::after { background: var(--evok-stone, #6b6b66); transition: background .4s ease .4s; } /* (Les decalages de la barre de menu selon la barre d'administration ont ete retires : elle est desormais une rangee du header, qui porte seul ces compensations.) */ /* UN SEUL FILET, ET C'EST CELUI DU HEADER. Deux traits se superposaient a un pixel l'un de l'autre : le `border-bottom` du header (header.css) et le `border-top` de la barre de menu. On les lisait comme une bordure epaisse mal dessinee. C'est celui du MENU qu'on retire, et non l'inverse — l'essai contraire a ete fait, il enlevait le seul trait visible. Le filet du header va d'un bord a l'autre de l'ecran ; celui du menu s'arrete a la marge interieure de la barre (48 px de chaque cote) et se trouve AU-DESSUS des libelles, la ou le regard n'attend pas la fermeture du bandeau logo. Le trait reste donc a sa place habituelle, sous la bande du logo, quel que soit l'etat — au repos comme en position collee. */ body.evok-a-menu header.header .header_nav ul, body.evok-a-menu header.header .header_nav.header_nav_black ul, body.evok-a-menu header.header .header_nav.scrolled ul { border-top: 0; } /* ========================================================================= LE BANDEAU D'ANNONCE REPOUSSE LA BARRE DE MENU Le bandeau est rendu DANS le header (bandeau.php) : il grandit celui-ci d'une quarantaine de pixels. La barre de menu, elle, est epinglee a une valeur fixe — elle se retrouvait donc DERRIERE le header, qui est au-dessus d'elle (z-index 999 contre 777). Symptome, et il etait trompeur : le menu semblait absent a l'arrivee sur la page, alors que seul son bas depassait — le soulignement de l'entree courante, qu'on prenait pour une bordure en trop. Il reapparaissait au defilement, ou le bandeau s'efface et ou le header reprend 80px. La regle lit les MEMES variables que le degagement du contenu : header, bandeau (mesure par le script) et barre d'admin. Une seule declaration couvre donc les quatre combinaisons possibles, et le jour ou la hauteur du bandeau change, rien n'est a recalculer ici. Elle est ecrite APRES celle de la barre d'admin : a specificite egale, c'est la derniere qui l'emporte. ========================================================================= */ /* (Le decalage de la barre de menu selon le bandeau a ete retire : rendue dans le header, elle en suit la hauteur sans calcul. La variable --evok-bandeau sert toujours au degagement du contenu, plus haut.) */ @media (max-width: 767px) { .header_nav { padding: 0 20px; } header.header .header_nav ul { gap: 0 16px; padding: 18px 0 16px; flex-wrap: wrap; } .header_nav li a { font-size: 13px; letter-spacing: 1.6px; } body.evok-a-menu { --evok-menu: 55px; } } /* ========================================================================= PIED DE PAGE ========================================================================= */ /* Le footer Evok apporte son propre conteneur : on annule la largeur maximale de Storefront, qui le brimerait. */ .evok-site-footer { width: 100%; margin-top: 64px; } /* Sans bandeau des maisons, l'espacement prevu pour lui laisse un grand vide en haut du pied de page. On le resserre tant qu'il n'est pas renseigne. */ .evok-site-footer footer.no-brands .footer_top { margin-top: 0; } /* Le selecteur de langue de WPML s'ajoute en pied de page par defaut, en doublon du notre qui est integre au design Evok. On masque le sien. (Il reste preferable de le desactiver dans WPML puis Langues : ce qui n'est pas produit ne coute rien a masquer.) */ .wpml-ls-statics-footer { display: none !important; } /* ========================================================================= SURCHARGES DE STOREFRONT Storefront habille tous les