/** * Comm360 — Menu burger (Underlay Navigation, reprise fidèle d'Osmo). * * Le BOUTON reste dans le flux. Le PANNEAU (menu + overlay) est déplacé sous * par le JS. Principe Osmo : le menu est fixé à droite DERRIÈRE le * contenu (z-index 1) ; à l'ouverture le contenu principal et l'overlay * (voile + cadre) glissent vers la gauche pour révéler le menu. * * Personnalisation : variables CSS posées EN LIGNE sur .comm360-burger et * .comm360-burger__panel. Les couleurs sont forcées (!important) pour ne pas * être écrasées par le thème. */ .comm360-burger, .comm360-burger__panel { --c360b-menu-width: 30em; --c360b-bg: #621702; --c360b-color: #ffffff; --c360b-large-hover: #ff3800; --c360b-current-bg: #ff3800; --c360b-current-color: #ffffff; --c360b-small-color: #ffffff; --c360b-small-hover: #ff3800; --c360b-toggle-color: #ffffff; --c360b-dark: rgba(0, 0, 0, 0.3); } /* --- Wrapper du bouton (dans le flux) --- */ .comm360-burger { display: inline-flex; align-items: center; color: var(--c360b-toggle-color) !important; line-height: 1; } .comm360-burger a { color: inherit; text-decoration: none; } /* --- Bouton burger --- */ .comm360-burger__toggle { grid-column-gap: .75em; grid-row-gap: .75em; background-color: var(--c360b-toggle-bg, transparent); border: 0; border-radius: var(--c360b-toggle-radius, 0); outline: 0; box-shadow: none; color: inherit; cursor: pointer; justify-content: center; align-items: center; margin: 0; padding: var(--c360b-toggle-pad, .25em); display: inline-flex; transition: background-color .25s ease; } /* Fond du bouton quand le menu est ouvert (repli : fond fermé). */ body[data-menu-status="open"] .comm360-burger__toggle { background-color: var(--c360b-toggle-open-bg, var(--c360b-toggle-bg, transparent)); } .comm360-burger__toggle-text { flex-flow: column; flex: none; justify-content: flex-start; align-items: flex-end; font-size: 1.25em; height: 1.2em; display: flex; overflow: hidden; } .comm360-burger__toggle-label { font-size: inherit; line-height: 1.2; color: inherit !important; } .comm360-burger__toggle-icon { grid-column-gap: .375em; grid-row-gap: .375em; flex-flow: column; flex: none; justify-content: center; align-items: center; width: 1.5em; display: flex; } .comm360-burger__toggle-bar { background-color: currentColor; flex: none; width: 100%; height: .125em; padding: 0; } /* --- Panneau déplacé sous : masqué tant que le JS n'a pas posé l'état --- */ .comm360-burger__panel { visibility: hidden; } .comm360-burger__panel.is-ready { visibility: visible; } /* --- Menu (fixé à droite, DERRIÈRE le contenu : z-index 1) --- */ .comm360-burger__menu { z-index: 1; width: var(--c360b-menu-width); color: var(--c360b-color) !important; background: var(--c360b-bg) !important; position: fixed; top: 0; bottom: 0; right: 0; } /* --- Overlay (voile + cadre), au-dessus du contenu (z-index 100), glisse avec lui --- */ .comm360-burger__overlay { z-index: 100; color: var(--c360b-frame, var(--c360b-bg)); pointer-events: none; cursor: pointer; visibility: hidden; position: fixed; inset: 0% -1px 0% 0%; overflow: clip; } .comm360-burger__inner { grid-column-gap: 2em; grid-row-gap: 2em; flex-flow: column; justify-content: space-between; align-items: stretch; width: 100%; height: 100%; max-height: 100%; min-height: 0; padding: 7.5em 2em 2em; display: flex; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .comm360-burger__list { flex-flow: column; width: 100%; margin-bottom: 0; padding: 0; list-style: none; display: flex; } .comm360-burger__list.is--small { grid-column-gap: .75em; grid-row-gap: .75em; } /* --- Grands liens (menu WordPress) --- */ .comm360-burger__link-large { border-radius: .25em; width: 100%; padding: .75em 1em; display: block; color: var(--c360b-color) !important; transition: color .25s, background-color .25s; } .comm360-burger__link-large:not(.is--current):not(.w--current):hover { color: var(--c360b-large-hover) !important; } .comm360-burger__link-large.is--current, .comm360-burger__link-large.w--current { color: var(--c360b-current-color) !important; background-color: var(--c360b-current-bg) !important; } .comm360-burger__link-label { letter-spacing: -.04em; font-family: "Montserrat", "Haffer XH", Arial, sans-serif; font-size: 3.25em; font-weight: 600; line-height: .9; color: inherit !important; } /* --- Liens du bas --- */ .comm360-burger__bottom { grid-column-gap: 2em; grid-row-gap: 2em; justify-content: flex-start; align-items: flex-start; width: 100%; padding-top: 1.5em; display: flex; position: relative; } .comm360-burger__bottom-col { grid-column-gap: 1em; grid-row-gap: 1em; flex-flow: column; flex: 1; justify-content: flex-start; align-items: flex-start; display: flex; } .comm360-burger__link-small { font-size: 1em; line-height: 1.1; color: var(--c360b-small-color) !important; display: inline-flex; align-items: center; gap: .5em; transition: color .2s; } .comm360-burger__link-small:hover { color: var(--c360b-small-hover) !important; } .comm360-burger__link-small.is--faded { color: var(--c360b-color) !important; opacity: .5; } .comm360-burger__link-small svg, .comm360-burger__link-small img { width: 1.1em; height: 1.1em; flex: none; } /* --- Cadre décoratif (fidèle Osmo) --- */ .comm360-burger__corner { transform-origin: 100% 0; color: var(--c360b-frame, var(--c360b-bg)); background-image: radial-gradient(circle farthest-side at 0 100%, #fff0 99%, currentColor); width: 2em; height: 2em; } .comm360-burger__corner.is--bottom { transform-origin: 100% 100%; background-image: radial-gradient(circle farthest-side at 0 0, #fff0 99%, currentColor); } .comm360-burger__dark { opacity: 0; background-color: var(--c360b-dark) !important; position: absolute; inset: 0%; } .comm360-burger__bottom-border { opacity: .15; transform-origin: 0%; background-color: currentColor; width: 100%; height: 1px; position: absolute; inset: 0% 0% auto; } .comm360-burger__borders { flex-flow: column; justify-content: space-between; align-items: stretch; display: flex; position: absolute; inset: 0; } .comm360-burger__border { background-color: var(--c360b-frame, var(--c360b-bg)) !important; width: 100%; height: 1em; } .comm360-burger__border-row { flex-flow: column; justify-content: flex-start; align-items: flex-end; display: flex; } @media screen and (max-width: 767px) { /* Sur mobile, le menu prend toute la largeur de l'écran, sans dépasser. width: 100% sur un élément fixed = largeur du viewport (pas de scrollbar, contrairement à 100vw). Le !important passe devant la variable en ligne. */ .comm360-burger__menu { width: 100% !important; } .comm360-burger__link-label { font-size: 2em; } .comm360-burger__toggle-text { font-size: 1em; } .comm360-burger__inner { padding: 5em 1.25em 1.25em; } .comm360-burger__bottom { flex-flow: column; padding-left: 1em; padding-right: 1em; } } /* --- Blocage du défilement du site quand le menu est ouvert --- */ html.comm360-burger-locked { overflow: hidden !important; } html.comm360-burger-locked body { overflow: hidden !important; padding-right: var(--c360b-sbw, 0px); } /* --- Aperçu dans l'éditeur : on n'affiche QUE le bouton du widget. Le panneau (menu + voile + cadre) est masqué pour ne pas gêner l'édition. La racine garde son display par défaut (inline-flex), comme sur le front. --- */ .comm360-burger.is-editor .comm360-burger__panel { display: none !important; }