/* ===================================================================== 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"). ===================================================================== */ .enso-menu-root, .enso-overlay{ --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: 1; 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: flex; align-items: baseline; gap: clamp(14px, 3vw, 40px); 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-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); } .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){ .enso-extra-bl, .enso-extra-br{ bottom: 12px; } }