/** * Styles de la vignette image ajoutee devant les elements de menu par * inc/menu-maxi.php (image mise en avant de la page ciblee, ou repli neutre), * et mise en grille adaptative des sous-menus de #primary-menu en tuiles * image + libelle en surimpression. La grille s'adapte a n'importe quel * nombre de tuiles (pas de gabarit fige par nombre d'entrees). */ .etika-menu-maxi-image { display: block; width: 100%; height: 150px; /* 14px et non 10 : aligne sur l'arrondi des tuiles du module liste (.el-tuile, mesure 14px), pour une seule langue visuelle entre les deux modules. Le lien pose par-dessus (#primary-menu .sub-menu > li > a) porte la MEME valeur : les deux se superposent exactement, un ecart ferait apparaitre un liseré carre dans les angles. */ border-radius: 14px; overflow: hidden; } .etika-menu-maxi-image img { width: 100%; height: 100%; object-fit: cover; object-position: var(--etika-focus-x, 50%) var(--etika-focus-y, 50%); } .etika-menu-maxi-image--vide { background: #4a5568; } /* Cadre de logo : l'image apparait ENTIERE sur un fond choisi a la saisie, au lieu d'etre rognee par object-fit: cover. Pose par inc/menu-maxi.php quand la meta etika_menu_image_cadre est renseignee ; la couleur arrive par la variable --etika-cadre, ecrite en style inline sur le span. MESURE du 24/09, panneau TOURISME a innerWidth 1920 : en cover, le logo 730x1024 de l'entree 1490 perdait 57,6 % de sa hauteur dans une cellule 215x128 ; celui de 101 (1024x1024) 40,5 % ; celui de 1491 (1024x877) 32,3 % de sa largeur. SPECIFICITE : .etika-menu-maxi-image--cadre img pese (0,1,1), soit EXACTEMENT le poids de .etika-menu-maxi-image img plus haut. Aucune des deux ne l'emporte : c'est l'ORDRE qui tranche, d'ou la position de ce bloc APRES elle. Le deplacer plus haut le rendrait sans effet. Le fond suit l'arrondi de 14px et l'overflow: hidden du span, portes par .etika-menu-maxi-image : un fond est peint dans la boite dessinee par border-radius. */ .etika-menu-maxi-image--cadre { background-color: var(--etika-cadre); } .etika-menu-maxi-image--cadre img { object-fit: contain; } /* ── Panneau du sous-menu : grille adaptative, remplissage colonne par colonne, largeur automatique (autant de colonnes que de tuiles l'exigent). L'habillage visible (fond, arrondi, ombre) n'est PAS ici : il vit sur le ::before, cf. plus bas. ─────────────────────────────────────────────── */ /* Le panneau ne porte plus lui-meme son habillage : fond, arrondi et ombre vivent sur le ::before ci-dessous. MOTIF, MESURE le 06/09 : avec un border-top transparent, le rayon INTERIEUR d'un coin dont les deux cotes n'ont pas la meme epaisseur de bordure devient une ellipse — les coins hauts rendaient ecrases quelle que soit la valeur declaree. Sans bordure, le rayon redevient circulaire aux quatre coins. L'espace de 10px sous la barre est desormais creuse par les 36px de padding haut (16 de marge + 20 d'espace) : un padding se survole, donc la souris traverse sans fermer le menu (decision CB preservee). Une marge ne conviendrait pas — elle ne se survole pas. */ #primary-menu .sub-menu { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, 128px); grid-auto-columns: 215px; gap: 16px; padding: 36px 16px 16px 16px; background: transparent; /* NEUTRALISATION, pas decoration : Kadence pose sur ce meme selecteur un box-shadow (rgba(0,0,0,0.1) 0 2px 13px, MESURE le 06/09) qui epouserait le panneau — lequel n'a plus d'arrondi. Un rectangle sombre depasserait alors sous les coins arrondis du ::before. Notre selecteur porte un ID, il l'emporte sans !important. border-radius: 0 est deja la valeur calculee : il est ecrit pour rendre l'intention explicite et resister a un futur style du theme. */ box-shadow: none; border-radius: 0; } /* Habillage visible du panneau. Decale de 20px vers le bas : le haut du panneau est l'espace traversable, il doit rester transparent. */ #primary-menu .sub-menu::before { content: ""; position: absolute; top: 20px; right: 0; bottom: 0; left: 0; background: #ffffff; border-radius: 34px; box-shadow: 0 24px 48px rgba(13, 17, 23, 0.14); z-index: 0; } /* Les tuiles passent au-dessus de l'habillage. */ #primary-menu .sub-menu > li { z-index: 1; } /* Kadence style ce meme sous-menu via : .header-navigation .header-menu-container ul ul.sub-menu (background: var(--global-palette9), box-shadow) — specificite (0 classe id, 3 classes, 2 types). Notre selecteur #primary-menu .sub-menu porte un ID (specificite (1 id, 1 classe, 0 type)) : un ID l'emporte toujours sur n'importe quel nombre de classes, donc notre background/box-shadow gagnent naturellement sans !important — pas necessaire ici, donc pas utilise. Depuis que l'habillage est passe sur le ::before, c'est background: transparent pose ici qui neutralise le fond de Kadence ; l'ombre et l'arrondi de Kadence sont neutralises par box-shadow: none et border-radius: 0 poses ici (cf. la regle), sans quoi son ombre rectangulaire depasserait sous les coins du ::before. */ /* ── Tuile : le lien (frere du span image, cf. inc/menu-maxi.php) recouvre exactement la cellule dont la hauteur est donnee par la grille ────────── */ #primary-menu .sub-menu > li { position: relative; } #primary-menu .sub-menu > li > a { position: absolute; inset: 0; width: auto; /* neutralise le 250px pose par Kadence */ display: flex; align-items: flex-end; padding: 12px; color: #ffffff; background: linear-gradient(to top, rgba(13, 17, 23, 0.85) 0%, rgba(13, 17, 23, 0) 45%); border-radius: 14px; font-family: var(--etika-police-script, cursive); font-weight: 700; font-size: 1.75rem; line-height: 1.15; } #primary-menu .sub-menu > li .etika-menu-maxi-image { height: 100%; } /* ── Survol : le libelle monte legerement, l'image ne bouge pas ── */ #primary-menu .sub-menu > li .etika-menu-maxi-libelle { transition: transform 0.35s ease; } #primary-menu .sub-menu > li:hover .etika-menu-maxi-libelle { transform: translateY(-12px); } /* ── Motif de relief, cyclique sur 7 tuiles : la 1re et la 4e de chaque cycle occupent 2 rangees (donnant du relief a la mosaique), les cinq autres restent a 1 rangee (span par defaut, aucune regle necessaire). Ce calibrage referme exactement 3 colonnes a chaque cycle complet (cf. ETAPE 2). ── */ #primary-menu .sub-menu > li:nth-child(7n+1), #primary-menu .sub-menu > li:nth-child(7n+4) { grid-row: span 2; } /* ── Cas de fin : referment la DERNIERE colonne quand le nombre total de tuiles n'est pas un multiple de 7 (cycle final incomplet). Combine nth-child (position dans le cycle) et nth-last-child(1) (est bien la toute derniere tuile) pour cibler uniquement la queue incomplete. ──────────── */ /* Cas A — reste 1, 3 ou 5 : la derniere tuile demarre seule une nouvelle colonne (aucune tuile suivante pour la completer) : elle doit remplir les 3 rangees a elle seule. */ #primary-menu .sub-menu > li:nth-child(7n+1):nth-last-child(1), #primary-menu .sub-menu > li:nth-child(7n+3):nth-last-child(1), #primary-menu .sub-menu > li:nth-child(7n+5):nth-last-child(1) { grid-row: span 3; } /* Cas B — reste 6 : la derniere tuile est la seconde tuile d'1 rangee d'une colonne a qui il manque exactement 1 rangee : elle passe de 1 a 2 rangees. */ #primary-menu .sub-menu > li:nth-child(7n+6):nth-last-child(1) { grid-row: span 2; } /* Cas C — reste 0, 2 ou 4 : le motif de base (cf. plus haut) referme deja la colonne exactement (1+1+1, ou 2+1, ou 1+2) : aucune regle n'est necessaire ici — en ecrire une (meme a titre de "confirmation") casserait le cas reste=4, ou la derniere tuile doit garder son span naturel de 2 rangees. */ /* A 3 rangees, 12 tuiles font 6 colonnes et 1402px de large. MESURE le 20/09 a innerWidth 1366 : debordement de 75,34px a droite, rogne silencieusement par le overflow-x: clip de #wrapper, SANS barre de defilement. La perte de contenu n'est signalee par rien. Le seuil de 12 tuiles : a 11 tuiles le panneau fait 5 colonnes et 1171px, qui tiennent. 12 est le premier compte qui casse. Le seuil de 1500px est une VALEUR CHOISIE, NON MESUREE. Le calcul donne 1466 (1402 + 2 marges de 32). La mesure du 07/09 montre que ce calcul sous-estime le seuil reel, sans que la cause soit elucidee. DETTE. Le motif a 9 : cycle de 9 tuiles sur 4 rangees, grandes en 9n+1, 9n+5 et 9n+9. La grande tuile descend d'un cran a chaque colonne (2+1+1, puis 1+2+1, puis 1+1+2). 12 tuiles + 4 grandes = 16 unites = 4 colonnes pleines. Le :nth-child(n) de la remise a zero n'est PAS decoratif : sans lui la regle pese (1,2,2) et PERD contre la regle du Cas A a (1,3,1), qui frappe la 12e tuile et lui donnerait 3 rangees. Avec lui elle pese (1,3,2). */ @media (max-width: 1500px) { #primary-menu .sub-menu:has(> li:nth-child(12)) { grid-template-rows: repeat(4, 128px); } #primary-menu .sub-menu:has(> li:nth-child(12)) > li:nth-child(n) { grid-row: auto; } #primary-menu .sub-menu:has(> li:nth-child(12)) > li:nth-child(9n+1), #primary-menu .sub-menu:has(> li:nth-child(12)) > li:nth-child(9n+5), #primary-menu .sub-menu:has(> li:nth-child(12)) > li:nth-child(9n+9) { grid-row: span 2; } } /* ── Pastille de survol des entrees de niveau 0 : voile sombre translucide laissant transparaitre le media d'arriere-plan quand l'en-tete est en mode transparent. Declencheur sur li:hover et non a:hover — l'espace creuse par border-top appartient au li, pas au lien : sur a:hover la pastille s'eteindrait des que la souris quitte le texte. CONTRAINTE MESUREE le 22/09 : pour que le survol ne pousse pas la boite, marge + padding doit valoir exactement le padding de repos pose par Kadence, soit 10.2px en vertical et 22.1px en horizontal. Les valeurs precedentes (marge 12/8, padding 11.46/21.75) donnaient 23.46 et 29.75 : chaque entree survolee grandissait de 26.53px en hauteur et de 15.31px en largeur, faisant deborder le menu de la barre a l'etat replie. La marge horizontale est nulle et non 8 : une marge horizontale ne retrecit pas la peinture, elle la DECALE (mesure : ecart gauche +8.00, droite -8.00, la pastille mordait de 8px sur l'entree voisine). Le li se dimensionne sur la largeur intrinseque du lien, marges non comprises. La pastille occupe donc toute la largeur de son entree. ── */ #primary-menu > li:hover > a { background: rgba(13, 17, 23, 0.55); color: #ffffff; border-radius: 999px; margin: 4px 0; padding: 6.2px 22.1px; } /* ── Lisibilite des entrees de niveau 0 quand l'en-tete est en mode transparent : le libelle se pose alors sur le media de la page (video, photo) et le gris de repos rgb(74,85,104) y est illisible. Conditionne a body.transparent-header, classe posee par Kadence : recherche, archives, seances et documents CR gardent une barre blanche opaque en permanence (aucun bloc editable, donc aucun media possible), ou du blanc serait invisible. Aucune media query : sous 1025px Kadence masque #primary-menu (display:none), la regle n'y peint donc rien. DETTE ASSUMEE : ce selecteur (1 id, 1 classe, 3 types) l'emporte sur #primary-menu > li:hover > a (1 id, 1 classe, 2 types) pour la propriete color. Sans effet ici, les deux valant #ffffff. Le meme motif se reproduit plus bas, cette fois avec un effet reel : body.transparent-header.header-is-fixed #primary-menu > li > a (1 id, 2 classes, 3 types) l'emporterait aussi sur ce survol, et le gris ecraserait le blanc — d'ou la regle de survol dediee ajoutee juste apres elle. Cette dette n'est donc plus purement theorique. ── */ body.transparent-header #primary-menu > li > a { color: #ffffff; } /* ── Graisse des entrees de niveau 0. NON conditionnee a body.transparent-header, contrairement a la couleur ci-dessus : le blanc repond a un besoin de lisibilite propre au mode transparent, la graisse est un choix typographique qui doit rester identique sur toutes les pages. Conditionner ferait maigrir le menu au passage sur une page de recherche ou d'archive. ── */ #primary-menu > li > a { font-weight: 600; } /* ── Lisibilite des entrees de niveau 0 quand la barre est COLLEE. MESURE 07/09 : au defilement, Kadence pose body.header-is-fixed et detache la rangee du menu (DIV.kadence-sticky-header, position fixed, z-index 1200) ; le fond blanc opaque vit sur son enfant DIV.site-header-row-container-inner. body.transparent-header RESTE posee : la regle du blanc ci-dessus continue donc de s'appliquer, et les huit libelles deviennent blancs sur blanc. La valeur rgb(74,85,104) est MESUREE sur /?s=test, page sans transparence, sur les huit entrees. ── */ body.transparent-header .site-main-header-wrap.item-is-stuck #primary-menu > li > a { color: rgb(74, 85, 104); } /* Rend la main au survol. Ce n'est PAS une precaution : la regle ci-dessus (1 id, 2 classes, 3 types) bat #primary-menu > li:hover > a (1 id, 1 classe, 2 types) sur color — c'est la dette documentee le 06/09 qui mord ici. Sans cette regle, le libelle survole resterait gris sur la pastille sombre rgba(13,17,23,0.55), illisible. Le fond et la geometrie de la pastille ne sont pas touches : ils sont lisibles sur blanc (recette visuelle du 07/09). ── */ body.transparent-header .site-main-header-wrap.item-is-stuck #primary-menu > li:hover > a { color: #ffffff; } /* ── Ombre sous la barre d'en-tete COLLEE. MESURE 07/09 : au defilement, Kadence detache la rangee du menu (DIV.kadence-sticky-header, position fixed, z-index 1200, 1905x60) et son enfant DIV.site-header-row-container-inner porte le fond blanc opaque. Les deux rendent box-shadow: none — c'est donc un AJOUT, pas une neutralisation d'une declaration du theme. L'ombre est portee par l'enfant, celui qui porte le fond : une ombre epouse la forme de SON element. NON conditionnee a body.transparent-header (decision de Lucie du 07/09) : la barre collee doit avoir le meme comportement sur toutes les pages, transparentes ou non. Valeur plus discrete que celle du panneau du maxi menu (0 24px 48px rgba(13,17,23,0.14)) : une barre n'est pas un objet flottant. RESERVE, NON MESUREE : DIV.site.wp-site-blocks, ancetre, est en overflow: clip. Un element fixed echappe normalement au rognage d'un ancetre en clip, sauf si celui-ci cree un bloc conteneur. Si l'ombre ne parait pas, c'est la premiere piste. Aucune media query : la barre colle a toutes les largeurs. ── */ /* Bornee au bureau le 17/09 : cette regle n avait aucune media query et peignait donc aussi sous 1025px. Depuis que la rangee du haut est epinglee en mobile (reglage Customizer), l ombre devenait visible sous la barre collee alors que celle-ci doit rester invisible. */ @media (min-width: 1025px) { .kadence-sticky-header.item-is-stuck .site-header-row-container-inner { box-shadow: 0 4px 12px rgba(13, 17, 23, 0.10); } } /* --------------------------------------------------------------- LOGO DE LA RANGEE PRINCIPALE — visible uniquement barre collee Decision DI du 08/09. Mesure : le logo (IMG.custom-logo, 190 x 57,14) est rendu a opacity 1 au repos ; il est illisible parce que gris sur photo, pas parce qu il est masque. Le selecteur passe par .kadence-sticky-header : un second IMG.custom-logo existe dans #mobile-header, dont la rangee ne porte PAS cette classe. Cibler .custom-logo seul frapperait les deux. visibility et non display : la boite est conservee, la grille de l en-tete ne bouge pas. --------------------------------------------------------------- */ .site-main-header-wrap.kadence-sticky-header .site-branding { visibility: hidden; } /* Contre-mesure, PAS une precaution : sans cette regle, la precedente s applique aussi en etat colle et le logo n apparaitrait jamais. */ .site-main-header-wrap.kadence-sticky-header.item-is-stuck .site-branding { visibility: visible; } /* Correctif MESURE, pas une precaution ni une duplication decorative : sonde a 16ms pendant la remontee, la visibility heritee depuis .site-branding a mis 98ms a se propager jusqu a IMG.custom-logo (1264ms stuck=false branding=hidden img=VISIBLE ; 1362ms stuck=false branding=hidden img=hidden), laissant le logo visible apres le decollage de la barre. Poser la valeur directement sur l element supprime la dependance a cet heritage. .site-branding conserve ses propres regles ci-dessus : le conteneur doit rester masque lui aussi. */ .site-main-header-wrap.kadence-sticky-header .site-branding img.custom-logo { visibility: hidden; } .site-main-header-wrap.kadence-sticky-header.item-is-stuck .site-branding img.custom-logo { visibility: visible; } /* --------------------------------------------------------------- ENTREE CONTACT — visible uniquement barre collee Decision DJ du 08/09. Mesure : les 8 entrees de niveau 0 portent le MEME padding 10.2px 22.1px ; le chevron est en position absolute et ne pousse rien. CONTACT fait 76,50 px de large pour un glyphe de 32,3 px. display et non visibility : le menu est en flex, une boite invisible laisserait un trou de 76,50 px. DETTE : #menu-item-492 est un identifiant propre a ce site. Il devra devenir une classe avant tout portage. --------------------------------------------------------------- */ .site-main-header-wrap.kadence-sticky-header #menu-item-492 { display: none; } /* Contre-mesure, PAS une precaution : sans elle, la regle precedente s applique aussi en etat colle et l entree ne reapparaitrait jamais. */ .site-main-header-wrap.kadence-sticky-header.item-is-stuck #menu-item-492 { display: list-item; }