/* ===================================================================== ENSO Menu — Widget Elementor (v1.1.0) Les sélecteurs d'état/animation sont ancrés sur .enso-overlay lui-même, afin de fonctionner que le panneau soit enfant du widget (éditeur) ou déplacé dans (site publié, pour éviter tout ancêtre "transform"). ===================================================================== */ /* Valeurs par défaut : posées UNIQUEMENT sur .enso-menu-root. IMPORTANT — ne PAS les redéclarer sur .enso-overlay : Elementor écrit tes couleurs personnalisées sur .enso-menu-root ({{WRAPPER}} .enso-menu-root). Si .enso-overlay redéclarait ces variables, sa valeur par défaut MASQUERAIT (shadow) la valeur héritée du parent → tes couleurs ne s'appliqueraient jamais au panneau. En les laissant sur la racine seule, le panneau (enfant) HÉRITE correctement de tes réglages. Quand le panneau est déplacé dans (site publié), le widget repose les variables EN LIGNE sur le panneau (voir render()), ce qui reste valable après le déplacement. */ .enso-menu-root{ --enso-open: 850ms; --enso-close: 650ms; --enso-stagger: 80ms; --enso-ease: cubic-bezier(.65,.05,.16,1); --enso-blur: 26px; --enso-overlay: rgba(18,15,11,.62); --enso-border: rgba(233,227,213,.14); --enso-num: #D0674F; --enso-accent: #D0674F; --enso-title: #E9E3D5; --enso-sub: #8A8073; --enso-close-c: #E9E3D5; --enso-foot-c: #8A8073; --enso-toggle-c: #16130F; --enso-dot: #C0402E; --enso-focus: #C0402E; --enso-focus-w: 2px; --enso-close-bg: transparent; --enso-close-bg-h: transparent; --enso-close-radius: 0px; --enso-item-pad: clamp(12px, 2.2vw, 26px); } .enso-menu-root{ perspective: 1600px; position: relative; } .enso-menu-root *, .enso-overlay *{ box-sizing: border-box; } body.enso-lock{ overflow: hidden !important; } /* -------------------- BOUTON D'OUVERTURE -------------------- */ .enso-toggle{ display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; cursor: pointer; padding: 8px 4px; color: var(--enso-toggle-c); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; line-height: 1; transition: background-color .3s var(--enso-ease), color .3s var(--enso-ease), border-color .3s var(--enso-ease); } /* Reset renforcé : neutralise le fond de bouton imposé par le thème. (spécificité .enso-menu-root .enso-toggle pour battre les règles "header button") */ .enso-menu-root .enso-toggle{ background-color: transparent; } .enso-toggle .enso-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--enso-dot); transition: transform .4s var(--enso-ease); } .enso-toggle:hover .enso-dot{ transform: scale(1.7); } /* -------------------- PANNEAU (OVERLAY) -------------------- */ .enso-overlay{ position: fixed; inset: 0; z-index: 999990; pointer-events: none; background: var(--enso-overlay); -webkit-backdrop-filter: blur(var(--enso-blur)) saturate(140%); backdrop-filter: blur(var(--enso-blur)) saturate(140%); transition: opacity var(--enso-close) var(--enso-ease), transform var(--enso-close) var(--enso-ease), clip-path var(--enso-close) var(--enso-ease), -webkit-backdrop-filter var(--enso-close) var(--enso-ease), backdrop-filter var(--enso-close) var(--enso-ease); will-change: transform, clip-path, opacity; } .enso-overlay.is-open{ pointer-events: auto; } /* Durée d'OUVERTURE (l'état fermé conserve la durée de fermeture) */ .enso-overlay.is-open, .enso-overlay.is-open .enso-item, .enso-overlay.is-open .enso-top, .enso-overlay.is-open .enso-foot, .enso-overlay.is-open .enso-slab{ transition-duration: var(--enso-open); } .enso-overlay-inner{ position: relative; z-index: 2; min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(18px, 4vw, 54px); overflow: hidden; } /* -------------------- HAUT / FERMETURE -------------------- */ .enso-top{ display: flex; justify-content: flex-end; } .enso-close{ display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; cursor: pointer; color: var(--enso-close-c); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; transition: background-color .3s var(--enso-ease), color .3s var(--enso-ease); } /* Fond du bouton Fermer via variables (fonctionne même quand le panneau est déplacé dans ) + reset du fond imposé par le thème. */ .enso-overlay .enso-close{ background-color: var(--enso-close-bg, transparent); border-radius: var(--enso-close-radius, 0px); padding: var(--enso-close-pad, 6px 4px); } .enso-overlay .enso-close:hover{ background-color: var(--enso-close-bg-h, var(--enso-close-bg, transparent)); } .enso-x{ position: relative; width: 14px; height: 14px; } .enso-x::before, .enso-x::after{ content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; } .enso-x::before{ transform: rotate(45deg); } .enso-x::after{ transform: rotate(-45deg); } /* -------------------- LISTE -------------------- */ .enso-list{ list-style: none; margin: 0 auto; padding: 0; align-self: center; width: 100%; max-width: 1100px; /* Quand il y a beaucoup d'entrées, la liste défile au lieu d'être coupée */ max-height: 100%; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .enso-list::-webkit-scrollbar{ width: 6px; } .enso-list::-webkit-scrollbar-thumb{ background: var(--enso-border); border-radius: 3px; } .enso-item{ display: block; padding: var(--enso-item-pad, clamp(12px, 2.2vw, 26px)) 0; border-top: 1px solid var(--enso-border); } .enso-item:last-child{ border-bottom: 1px solid var(--enso-border); } .enso-row{ display: flex; align-items: baseline; gap: clamp(14px, 3vw, 40px); position: relative; } .enso-num{ color: var(--enso-num); flex: none; min-width: 34px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; } .enso-link{ flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; text-decoration: none; } .enso-title{ color: var(--enso-title); line-height: 1; display: inline-block; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(30px, 6vw, 74px); letter-spacing: -.01em; transition: color .4s, transform .5s var(--enso-ease); } .enso-link:hover .enso-title, .enso-link:focus-visible .enso-title{ color: var(--enso-accent); transform: translateX(16px); } /* Page courante : l'entrée du menu correspondant à la page affichée est mise en évidence (couleur d'accent, comme au survol mais permanent). */ .enso-link.is-current .enso-title{ color: var(--enso-accent); } .enso-item.is-current > .enso-row .enso-num{ color: var(--enso-accent); opacity: 1; } .enso-sublink.is-current .enso-subtitle{ color: var(--enso-accent); } .enso-sub{ color: var(--enso-sub); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; } /* -------------------- PIED -------------------- */ .enso-foot{ display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--enso-foot-c); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; } /* -------------------- RÉVÉLATION DES ENTRÉES -------------------- */ .enso-item, .enso-top, .enso-foot{ opacity: 0; transform: translateY(24px); transition: opacity var(--enso-close) var(--enso-ease), transform var(--enso-close) var(--enso-ease); } .enso-overlay.is-open .enso-item, .enso-overlay.is-open .enso-top, .enso-overlay.is-open .enso-foot{ opacity: 1; transform: none; } .enso-overlay.is-open .enso-item{ transition-delay: calc(var(--enso-stagger) * var(--i, 0)); } .enso-overlay.is-open .enso-foot{ transition-delay: calc(var(--enso-stagger) * 6); } /* ===================================================================== ANIMATIONS (12) — fermé = "from", .is-open = "to" ===================================================================== */ /* 01 · Cercle */ .enso-overlay[data-anim="circle"]{ clip-path: circle(0% at var(--enso-ox, 100%) var(--enso-oy, 0px)); } .enso-overlay.is-open[data-anim="circle"]{ clip-path: circle(160% at var(--enso-ox, 100%) var(--enso-oy, 0px)); } /* 02 · Volet vers le bas */ .enso-overlay[data-anim="reveal-down"]{ clip-path: inset(0 0 100% 0); } .enso-overlay.is-open[data-anim="reveal-down"]{ clip-path: inset(0 0 0 0); } /* 03 · Volet vers le haut */ .enso-overlay[data-anim="reveal-up"]{ clip-path: inset(100% 0 0 0); } .enso-overlay.is-open[data-anim="reveal-up"]{ clip-path: inset(0 0 0 0); } /* 04-07 · Glissés */ .enso-overlay[data-anim="slide-down"]{ transform: translateY(-100%); } .enso-overlay[data-anim="slide-up"]{ transform: translateY(100%); } .enso-overlay[data-anim="slide-left"]{ transform: translateX(100%); } .enso-overlay[data-anim="slide-right"]{ transform: translateX(-100%); } .enso-overlay.is-open[data-anim="slide-down"], .enso-overlay.is-open[data-anim="slide-up"], .enso-overlay.is-open[data-anim="slide-left"], .enso-overlay.is-open[data-anim="slide-right"]{ transform: none; } /* 08 · Fondu */ .enso-overlay[data-anim="fade"]{ opacity: 0; } .enso-overlay.is-open[data-anim="fade"]{ opacity: 1; } /* 09 · Zoom */ .enso-overlay[data-anim="zoom"]{ opacity: 0; transform: scale(.86); } .enso-overlay.is-open[data-anim="zoom"]{ opacity: 1; transform: scale(1); } /* 10 · Flou + zoom */ .enso-overlay[data-anim="blur"]{ opacity: 0; transform: scale(1.06); } .enso-overlay.is-open[data-anim="blur"]{ opacity: 1; transform: scale(1); } /* 11 · Bascule 3D */ .enso-overlay[data-anim="flip"]{ opacity: 0; transform: perspective(1600px) rotateX(-90deg); transform-origin: top center; } .enso-overlay.is-open[data-anim="flip"]{ opacity: 1; transform: perspective(1600px) rotateX(0deg); } /* 12 · Rideau (lamelles) */ .enso-slabs{ position: absolute; inset: 0; display: none; z-index: 0; } .enso-slab{ flex: 1; background: var(--enso-overlay); transform: translateY(-101%); transition: transform var(--enso-close) var(--enso-ease); } .enso-overlay[data-anim="curtain"] .enso-slabs{ display: flex; } .enso-overlay[data-anim="curtain"]{ background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .enso-overlay.is-open[data-anim="curtain"] .enso-slab{ transform: translateY(0); transition-delay: calc(var(--enso-stagger) * var(--s, 0)); } .enso-overlay.is-open[data-anim="curtain"] .enso-item{ transition-delay: calc(var(--enso-open) * .45 + var(--enso-stagger) * var(--i, 0)); } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 767px){ .enso-title{ font-size: clamp(28px, 9vw, 46px); } .enso-link{ flex-direction: column; gap: 6px; } .enso-foot{ flex-direction: column; gap: 8px; } /* Sur mobile, on n'anime pas le flou (backdrop-filter) : c'est ce qui provoque le "mauvais chargement" / scintillement de l'effet au démarrage. Le flou reste appliqué, mais n'est plus transitionné → ouverture nette et fluide. */ .enso-overlay{ transition-property: clip-path, transform, opacity; transform: translateZ(0); } /* Filet de sécurité anti-scintillement avant l'ouverture. */ .enso-overlay:not(.is-open){ will-change: auto; } } @media (prefers-reduced-motion: reduce){ .enso-overlay, .enso-item, .enso-top, .enso-foot, .enso-slab, .enso-title, .enso-toggle .enso-dot{ transition-duration: .001ms !important; transition-delay: 0ms !important; } } /* -------------------- FOCUS (contour clavier / clic) -------------------- */ /* Navigation clavier : contour à la couleur choisie. */ .enso-toggle:focus-visible, .enso-close:focus-visible, .enso-link:focus-visible{ outline: var(--enso-focus-w) solid var(--enso-focus); outline-offset: 4px; } /* Au clic de souris : on retire le contour violet du navigateur + tout halo. */ .enso-toggle:focus:not(:focus-visible), .enso-close:focus:not(:focus-visible), .enso-link:focus:not(:focus-visible){ outline: none; } .enso-toggle:focus, .enso-close:focus{ box-shadow: none; } /* Option : afficher aussi le contour coloré au clic de souris. */ [data-focus-click="yes"] .enso-toggle:focus, [data-focus-click="yes"] .enso-close:focus, [data-focus-click="yes"] .enso-link:focus{ outline: var(--enso-focus-w) solid var(--enso-focus); outline-offset: 4px; } /* ===================================================================== APERÇU DANS L'ÉDITEUR ELEMENTOR Le panneau s'affiche en ligne (non plein écran), ouvert et visible, pour éditer et prévisualiser le contenu / l'espacement en direct. ===================================================================== */ .enso-editor-preview .enso-overlay{ position: relative !important; inset: auto !important; width: 100%; clip-path: none !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--enso-overlay); min-height: 60vh; margin-top: 14px; border: 1px dashed var(--enso-border); border-radius: 4px; } .enso-editor-preview .enso-slabs{ display: none !important; } .enso-editor-preview .enso-overlay-inner{ overflow: visible; } .enso-editor-preview .enso-list{ max-height: none; overflow: visible; } .enso-editor-preview .enso-item, .enso-editor-preview .enso-top, .enso-editor-preview .enso-foot{ opacity: 1 !important; transform: none !important; } .enso-editor-preview .enso-overlay::before{ content: "Aperçu du menu (éditeur) — visible ainsi uniquement dans Elementor"; position: absolute; top: 8px; left: 14px; z-index: 2; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--enso-sub); opacity: .7; pointer-events: none; } /* ===================================================================== BLOC EXTRA (sélecteur de langue / shortcode) dans le panneau ===================================================================== */ .enso-extra{ position: absolute; z-index: 3; color: var(--enso-extra-c, var(--enso-sub, currentColor)); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; letter-spacing: .04em; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .enso-extra a{ color: inherit; } .enso-extra-bl{ left: clamp(18px, 4vw, 54px); bottom: clamp(18px, 4vw, 54px); } .enso-extra-br{ right: clamp(18px, 4vw, 54px); bottom: clamp(18px, 4vw, 54px); } .enso-extra-tl{ left: clamp(18px, 4vw, 54px); top: clamp(18px, 4vw, 54px); } /* réutilise l'apparition douce des autres éléments */ .enso-overlay .enso-extra{ opacity: 0; transform: translateY(14px); transition: opacity .5s var(--enso-ease), transform .5s var(--enso-ease); transition-delay: .12s; } .enso-overlay.is-open .enso-extra{ opacity: 1; transform: none; } .enso-editor-preview .enso-extra{ opacity: 1 !important; transform: none !important; } @media (max-width: 767px){ /* Sur mobile, le sélecteur de langue / contenu extra repasse DANS LE FLUX, centré, sous le pied de menu — quelle que soit la position choisie (bas gauche / bas droite / haut gauche). En absolu dans un coin, il se retrouvait empilé derrière le pied ou rogné par la barre du navigateur (plein écran), donc invisible. Ici il est toujours visible et cliquable. */ .enso-extra, .enso-extra-bl, .enso-extra-br, .enso-extra-tl{ position: static; inset: auto; width: 100%; justify-content: center; margin-top: 16px; } } /* ===================================================================== SOUS-MENUS (accordéon, 2 niveaux) — titre + sous-titre, sans numéro ===================================================================== */ .enso-subtoggle{ margin-left: auto; flex: none; width: 40px; height: 40px; background: transparent; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--enso-title); opacity: .8; transition: opacity .3s; } .enso-subtoggle:hover{ opacity: 1; } .enso-chevron{ width: 11px; height: 11px; display: block; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .35s var(--enso-ease); } .enso-open > .enso-row .enso-chevron{ transform: rotate(-135deg); } /* liste de SOUS-MENU repliée par défaut, animée à l'ouverture. NB : classe dédiée .enso-submenu (et non .enso-sub) pour ne PAS écraser le SOUS-TITRE des entrées, qui utilise .enso-sub — sinon le max-height:0 rendait les sous-titres invisibles sur le site publié. */ .enso-submenu{ list-style: none; margin: 0; padding: 0; overflow: hidden; max-height: 0; transition: max-height .5s var(--enso-ease); } .enso-open > .enso-submenu{ max-height: 1500px; } /* indentation par niveau */ .enso-sub-l1{ padding-left: clamp(20px, 4vw, 58px); } .enso-sub-l2{ padding-left: clamp(16px, 3vw, 34px); } .enso-subitem{ border-top: 1px solid var(--enso-border); } .enso-subitem:first-child{ border-top: 0; } .enso-subitem .enso-row{ padding: clamp(9px, 1.4vw, 16px) 0; } .enso-sublink{ flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; text-decoration: none; } .enso-subtitle{ color: var(--enso-sub-color, var(--enso-title)); font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.05; font-size: var(--enso-subtitle-size, clamp(20px, 3vw, 34px)); letter-spacing: -.01em; transition: color .35s, transform .45s var(--enso-ease); } .enso-subitem-l2 .enso-subtitle{ font-size: var(--enso-subsubtitle-size, clamp(17px, 2.4vw, 26px)); opacity: .92; } .enso-sublink:hover .enso-subtitle, .enso-sublink:focus-visible .enso-subtitle{ color: var(--enso-accent); transform: translateX(12px); } .enso-subsub{ color: var(--enso-sub); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; } /* Dans l'aperçu éditeur, on ouvre tout pour voir la structure */ .enso-editor-preview .enso-submenu{ max-height: none; } .enso-editor-preview .enso-chevron{ transform: rotate(-135deg); }