/* ========================================================================== LBAC Mega Menu Mobile-first : le volet latéral est l'état de base, le mega menu desktop est l'exception (min-width: 980px, le breakpoint de Divi). ========================================================================== */ /* Les tokens sont déclarés sur :root, pas sur .lbac-mm. Le volet mobile est déplacé dans à l'ouverture (contournement du sticky header Divi) : s'il sortait du scope des variables, tous les fonds deviendraient transparents. */ :root { --lbac-navy: #14226b; --lbac-display: "Bricolage Grotesque", "Archivo", "Helvetica Neue", Arial, sans-serif; --lbac-blue: #3550e0; --lbac-blue-dark: #233bc9; --lbac-blue-soft: #b5d4f4; --lbac-yellow: #f4b851; --lbac-yellow-ink: #412402; --lbac-mint: #9fe1cb; --lbac-mint-ink: #04342c; --lbac-ink: #1a1a18; --lbac-muted: #7a7975; --lbac-line: #e7e7e2; --lbac-panel: #fbfaf7; --lbac-white: #fff; --lbac-radius: 12px; --lbac-max: 1180px; } /* Navigations fondues entre pages (View Transitions API). Une ligne : le rechargement flash-blanc devient un fondu croise. Ignore par les navigateurs qui ne le supportent pas. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } .lbac-mm { position: relative; font-family: inherit; z-index: 10; } .lbac-mm *, .lbac-mm *::before, .lbac-mm *::after { box-sizing: border-box; } .lbac-mm ul { margin: 0; padding: 0; list-style: none; } /* Divi impose sa couleur de lien via des sélecteurs très spécifiques (#et-boc a, #main-header a…). On monte en spécificité plutôt que d'empiler des !important partout. */ .lbac-mm a, .lbac-mm a:link, .lbac-mm a:visited, #et-boc .lbac-mm a, #page-container .lbac-mm a, body .lbac-mm a { text-decoration: none; color: inherit; } .lbac-mm :focus-visible { outline: 2px solid var(--lbac-yellow); outline-offset: 2px; border-radius: 4px; } .lbac-mm__icon { width: 18px; height: 18px; flex: none; } .lbac-mm .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .lbac-mm__empty { padding: 12px; background: #fff3cd; color: #664d03; font-size: 14px; } /* -------------------------------------------------------------------------- Bouton hamburger + voile -------------------------------------------------------------------------- */ /* 48 px minimum : le standard tactile. En dessous, le pouce rate. */ .lbac-mm__burger { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 48px; min-height: 48px; background: none; border: 0; padding: 10px 12px; margin: 0; color: #fff; cursor: pointer; font: inherit; line-height: 1; -webkit-tap-highlight-color: transparent; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .lbac-mm__burger:active { transform: scale(0.92); } .lbac-mm__burger-icon { width: 30px; height: 30px; } .lbac-mm__burger-icon--close, .lbac-mm__burger[aria-expanded="true"] .lbac-mm__burger-icon--open { display: none; } .lbac-mm__burger[aria-expanded="true"] .lbac-mm__burger-icon--close { display: block; } .lbac-mm__burger-label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .lbac-mm__scrim { position: fixed; inset: 0; background: rgba(26, 26, 24, 0.5); opacity: 0; transition: opacity 0.22s ease; z-index: 99998; } .lbac-mm__scrim.is-open { opacity: 1; } .lbac-mm__scrim[hidden] { display: none; } /* -------------------------------------------------------------------------- STRUCTURE COMMUNE Les primitives de mise en page partagees par les deux plages : display, flux, marges par defaut. Chaque media query ne porte plus que ses specificites (direction, tailles, couleurs). Sans cette couche, le bloc desktop n'etait qu'une suite de surcharges et dependait silencieusement du bloc mobile : une fois celui-ci encapsule, il perdait ses « display: flex » et la barre s'empilait en vertical. -------------------------------------------------------------------------- */ .lbac-mm__bar { display: flex; } .lbac-mm__panel-inner { display: flex; flex-direction: column; } .lbac-mm__cols { display: flex; flex-direction: column; } .lbac-mm__links { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .lbac-mm__link { display: flex; align-items: flex-start; gap: 13px; } .lbac-mm__link-body { flex: 1; min-width: 0; } .lbac-mm__link-label, .lbac-mm__link-sub { display: block; } .lbac-mm__badge { display: inline-block; border-radius: 999px; } .lbac-mm__thumb { flex: none; object-fit: contain; border-radius: 8px; } .lbac-mm__promo { display: block; position: relative; overflow: hidden; border-radius: var(--lbac-radius); } .lbac-mm__promo-badge { display: inline-block; border-radius: 999px; } .lbac-mm__promo-title, .lbac-mm__promo-sub { display: block; } .lbac-mm__promo-cta { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; } .lbac-mm__trust { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .lbac-mm__chip { display: flex; align-items: center; gap: 6px; } .lbac-mm__col-title { margin: 0; } /* -------------------------------------------------------------------------- MOBILE — menu plein ecran, navigation en cascade Tout ce bloc est enferme dans sa propre media query. Une media query n'ajoute aucune specificite : tant que les regles mobiles vivaient hors requete, il fallait qu'une regle desktop soit plus specifique pour les annuler. A chaque selecteur mobile affine, l'arbitrage basculait et le desktop cassait. Deux plages disjointes suppriment le probleme. -------------------------------------------------------------------------- */ @media (max-width: 979.98px) { /* Le tiroir n'est plus plein ecran : une carte arrondie de la largeur de la capsule (12 px de marge), alignee sur elle. Le JS cale son bord haut sur celui de la capsule a l'ouverture. */ .lbac-mm__root { position: fixed; top: 12px; left: 12px; right: 12px; bottom: 12px; border-radius: 24px; display: flex; flex-direction: column; background: #fff; color: var(--lbac-navy); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; overflow: hidden; overscroll-behavior: contain; z-index: 99999; } .lbac-mm__root.is-open { opacity: 1; visibility: visible; transition: opacity 0s, visibility 0s; } /* Ouverture rideau : deux voiles balayent l'ecran de gauche a droite et decouvrent le menu. Le geste d'entree, unique et identifiable. */ .lbac-mm__root::before, .lbac-mm__root::after { content: ""; position: absolute; inset: 0; z-index: 60; pointer-events: none; transform: scaleY(0); transform-origin: bottom; } .lbac-mm__root::before { background: var(--lbac-yellow); background: var(--lbac-yellow); } .lbac-mm__root::after { background: var(--lbac-blue); background: var(--lbac-blue); } @keyframes lbac-curtain { 0% { transform: scaleY(1); } 100% { transform: scaleY(0); } } .lbac-mm__root.is-open::after { animation: lbac-curtain 0.85s cubic-bezier(0.76, 0, 0.24, 1) 0.05s both; } .lbac-mm__root.is-open::before { animation: lbac-curtain 0.85s cubic-bezier(0.76, 0, 0.24, 1) 0.18s both; } body > .lbac-mm__root { background: var(--lbac-mm-bg, #fff) !important; opacity: 1 !important; } /* --- Motif de marque --- Un ballon de rugby plutot que des ronds pastel generiques : le decor doit dire quel est le metier. Pose en fond CSS et non en balise, il apparait donc aussi sur les volets de cascade, qui sont opaques. */ /* --- En-tete --- */ .lbac-mm__drawer-head { flex: none; position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; margin: 10px 12px 4px; padding: 8px 10px; border-radius: 17px; background: color-mix(in srgb, var(--lbac-navy) 6%, transparent); border: 1px solid color-mix(in srgb, var(--lbac-navy) 12%, transparent); } .lbac-mm__root--dark .lbac-mm__drawer-head { background: color-mix(in srgb, #fff 8%, transparent); border-color: color-mix(in srgb, #fff 14%, transparent); } .lbac-mm__drawer-logo, body .lbac-mm__root .lbac-mm__drawer-logo { display: block; width: auto; max-width: 150px; height: 40px; max-height: 40px; object-fit: contain; object-position: left center; } .lbac-mm__drawer-title { font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--lbac-blue); } .lbac-mm__drawer-close, .lbac-mm__pane-close { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 8px; color: var(--lbac-navy); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1; } .lbac-mm__drawer-close .lbac-mm__icon, .lbac-mm__pane-close .lbac-mm__icon { width: 22px; height: 22px; } /* --- Niveau 0 --- */ .lbac-mm__bar { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; position: relative; z-index: 2; padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 0; } .lbac-mm__item { position: static; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Un volet est ouvert : les rubriques du niveau 0 s'effacent en montant legerement, avec un leger decalage de haut en bas. Le pied suit. */ .lbac-mm__root.is-drilled .lbac-mm__bar > .lbac-mm__item { opacity: 0; transform: translateY(-10px); pointer-events: none; } .lbac-mm__root.is-drilled .lbac-mm__bar > .lbac-mm__item:nth-child(2) { transition-delay: 0.02s; } .lbac-mm__root.is-drilled .lbac-mm__bar > .lbac-mm__item:nth-child(3) { transition-delay: 0.04s; } .lbac-mm__root.is-drilled .lbac-mm__bar > .lbac-mm__item:nth-child(4) { transition-delay: 0.06s; } .lbac-mm__root.is-drilled .lbac-mm__bar > .lbac-mm__item:nth-child(5) { transition-delay: 0.08s; } .lbac-mm__root.is-drilled .lbac-mm__bar > .lbac-mm__item:nth-child(n+6) { transition-delay: 0.1s; } .lbac-mm__drawer-foot { transition: opacity 0.22s ease; } .lbac-mm__root.is-drilled .lbac-mm__drawer-foot { opacity: 0; pointer-events: none; } /* Rubriques : la typographie porte la hierarchie, pas les boites. Les rubriques a volet (Rugby, Football) sont les univers produit : elles portent le poids. Les pages simples passent au second plan. */ .lbac-mm__top, .lbac-mm__disc, .lbac-mm__drill, body .lbac-mm__top { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 0; background: none; border: 0; border-radius: 0; color: var(--lbac-navy); font: inherit; font-family: var(--lbac-display); font-size: clamp(34px, 9.4vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; overflow-wrap: break-word; position: relative; text-align: left; text-transform: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .lbac-mm__top:active, .lbac-mm__disc:active, .lbac-mm__drill:active, body .lbac-mm__top:active { color: var(--lbac-blue); } .lbac-mm__item--mega > .lbac-mm__top { display: none; } /* Une seule echelle pour tout le niveau 0. La hierarchie ne vient plus de la taille mais de l'encre : les univers produit (Rugby, Football) en navy plein, les pages simples en navy fantome. Pastilles et filets or supprimes — ils faisaient bouton de demo. */ .lbac-mm__item--mega .lbac-mm__disc { padding: 14px 0; } .lbac-mm__item--mega .lbac-mm__disc .lbac-mm__chevron { width: 24px; height: 24px; color: var(--lbac-yellow); color: var(--lbac-yellow); opacity: 1; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .lbac-mm__item--mega .lbac-mm__disc:active .lbac-mm__chevron { transform: translateX(6px); } .lbac-mm__item:not(.lbac-mm__item--mega) > .lbac-mm__top, body .lbac-mm__item:not(.lbac-mm__item--mega) > .lbac-mm__top { color: color-mix(in srgb, var(--lbac-navy) 34%, transparent); padding: 14px 0; transition: color 0.25s ease; } .lbac-mm__item:not(.lbac-mm__item--mega) > .lbac-mm__top:active { color: var(--lbac-navy); } .lbac-mm__disc-label, .lbac-mm__drill-label { flex: 1; min-width: 0; } /* Niveau 1 : les intitules de colonne sont souvent des phrases entieres. Deux tailles en dessous des rubriques, et jamais plus de trois lignes. */ .lbac-mm__drill { font-size: clamp(21px, 5.6vw, 26px); line-height: 1.18; padding: 11px 0; } .lbac-mm__drill-label { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .lbac-mm__disc .lbac-mm__chevron, .lbac-mm__drill .lbac-mm__chevron { width: 20px; height: 20px; flex: none; color: var(--lbac-blue); opacity: 0.8; } /* --- Volets de niveau 1 et 2 --- */ .lbac-mm__panel[data-lbac-pane], .lbac-mm__col-pane, .lbac-mm__contact-pane { position: absolute; top: 0; left: 0; right: 0; /* Le volet couvre tout, pied compris : le bloc secondaire n'a de sens qu'au premier niveau, plus bas il masquait la fin des listes. */ bottom: 0; display: flex; flex-direction: column; background: #fff; /* Fondu plutot que glissement : le niveau precedent s'efface, la section apparait en haut, son contenu monte en fondu. */ opacity: 0; visibility: hidden; transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.45s; } .lbac-mm__panel.is-active, .lbac-mm__col-pane.is-active, .lbac-mm__contact-pane.is-active { opacity: 1; visibility: visible; transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; } .lbac-mm__panel[hidden] { display: flex; } /* --- En-tete d'un volet --- */ .lbac-mm__pane-head { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 4px; } .lbac-mm__pane-bar { display: flex; align-items: center; justify-content: space-between; } .lbac-mm__back { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; background: #f1f0ec; border: 0; border-radius: 999px; color: var(--lbac-navy); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; } .lbac-mm__back:active { background: #e2e0d9; } .lbac-mm__back .lbac-mm__icon { width: 16px; height: 16px; } /* Le titre du volet reprend l'echelle des rubriques du niveau 0 : visuellement, la rubrique touchee « remonte » en tete d'ecran. */ .lbac-mm__pane-title { display: block; font-family: var(--lbac-display); font-size: clamp(34px, 9.4vw, 44px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; color: var(--lbac-navy); overflow-wrap: break-word; } /* --- « Voir tout » --- */ .lbac-mm__seeall { flex: none; display: inline-flex; align-self: flex-start; margin: 2px 20px 0; padding: 6px 0; border: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lbac-yellow); color: var(--lbac-yellow); text-decoration: none; } /* --- Contenu scrollable --- */ .lbac-mm__panel-inner { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 10px 20px 24px; display: flex; flex-direction: column; gap: 12px; } .lbac-mm__cols { display: flex; flex-direction: column; gap: 0; } .lbac-mm__col { position: static; } .lbac-mm__col-title { display: none; } .lbac-mm__links { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 20px 24px; display: flex; flex-direction: column; gap: 0; margin: 0; list-style: none; } /* --- Liens terminaux (niveau 2) --- */ .lbac-mm__link { display: flex; align-items: flex-start; gap: 13px; padding: 15px 0; background: none; border-radius: 0; border-bottom: 1px solid #e7e7e2; -webkit-tap-highlight-color: transparent; } .lbac-mm__links li:last-child .lbac-mm__link { border-bottom: 0; } .lbac-mm__link:active { background: #faf9f6; } /* Pastille ronde + icone + sous-titre + chevron : c'est le gabarit par defaut qu'on voit partout. On le remplace par une numerotation, plus editoriale et sans configuration a remplir. */ .lbac-mm__link > .lbac-mm__icon, .lbac-mm__link-chevron { display: none; } .lbac-mm__links { counter-reset: lbac-n; } .lbac-mm__link::before { counter-increment: lbac-n; content: counter(lbac-n, decimal-leading-zero); flex: none; width: 38px; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--lbac-yellow); letter-spacing: 0.02em; padding-top: 2px; } /* Si une vignette produit est renseignee, elle remplace le numero. */ .lbac-mm__link--thumb::before { display: none; } .lbac-mm__thumb { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; background: #faf9f6; flex: none; } .lbac-mm__link-body { flex: 1; min-width: 0; } .lbac-mm__link-label, body .lbac-mm__link .lbac-mm__link-label { display: block; font-family: var(--lbac-display); font-size: clamp(18px, 4.9vw, 20px); line-height: 1.25; color: var(--lbac-navy); font-weight: 700; letter-spacing: -0.015em; } .lbac-mm__link-sub { display: block; font-size: 13px; line-height: 1.4; color: #7a7975; margin-top: 3px; } .lbac-mm__badge { display: inline-block; margin-left: 7px; padding: 2px 9px; border-radius: 999px; background: var(--lbac-yellow); background: var(--lbac-yellow); color: var(--lbac-navy); font-size: 10px; letter-spacing: 0.05em; font-weight: 800; vertical-align: 2px; } .lbac-mm__link-chevron { width: 16px; height: 16px; flex: none; color: #b9b8b2; } /* --- Carte mise en avant --- Deux couleurs seulement : or et navy. Badge en micro-capitales nues, titre en display, CTA navy plein. */ .lbac-mm__promo { background: var(--lbac-yellow); background: var(--lbac-yellow); color: var(--lbac-navy); border-radius: 18px; padding: 20px; margin-top: 8px; } .lbac-mm__promo-img { display: block; width: 100%; height: 140px; object-fit: cover; object-position: left center; border-radius: 12px; margin-bottom: 14px; } .lbac-mm__promo-badge { padding: 0; background: none; color: var(--lbac-navy); font-size: 10.5px; letter-spacing: 0.16em; font-weight: 800; text-transform: uppercase; } .lbac-mm__promo-title { font-family: var(--lbac-display); font-size: clamp(22px, 6vw, 26px); font-weight: 800; letter-spacing: -0.02em; color: var(--lbac-navy); margin-top: 7px; } .lbac-mm__promo-sub { font-size: 13.5px; line-height: 1.45; margin-top: 4px; color: color-mix(in srgb, var(--lbac-navy) 75%, transparent); } .lbac-mm__promo-cta { margin-top: 15px; padding: 13px 22px; background: var(--lbac-navy); color: #fff; font-family: var(--lbac-display); font-size: 14px; font-weight: 700; } /* --- Reassurance --- */ .lbac-mm__trust { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .lbac-mm__chip { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #e7e7e2; border-radius: 999px; font-size: 12px; color: #7a7975; } .lbac-mm__chip .lbac-mm__icon { width: 14px; height: 14px; color: var(--lbac-blue); } /* --- Pied : secondaire et contact --- */ .lbac-mm__drawer-foot { flex: none; position: relative; z-index: 6; padding: 10px 20px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 20%); } .lbac-mm__foot-links { margin: 0; padding: 0; list-style: none; } /* Pied recompose : les avis d'abord (etoiles + libelle), puis Contact en lien typographique or, puis les reseaux en micro-capitales. Pas de capsule : la typographie porte tout, comme au niveau 0. */ .lbac-mm__foot-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 22px; border-top: 1px solid #eeece6; padding-top: 14px; } .lbac-mm__foot-links > li { display: inline-flex; } .lbac-mm__foot-li--reviews { order: -2; width: 100%; } .lbac-mm__foot-reviews { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 0; } .lbac-mm__foot-reviews .lbac-mm__stars { display: inline-flex; gap: 2px; flex: none; color: var(--lbac-yellow); color: var(--lbac-yellow); } .lbac-mm__foot-reviews .lbac-mm__spot { width: 18px; height: 18px; } .lbac-mm__foot-reviews { padding: 9px 0; } .lbac-mm__foot-reviews-label { font-family: var(--lbac-display); font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--lbac-navy); } .lbac-mm__contact-item { order: -1; width: 100%; display: block; } .lbac-mm__contact-toggle, body .lbac-mm__contact-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 0 12px; background: none; border: 0; color: var(--lbac-yellow); color: var(--lbac-yellow); font: inherit; font-family: var(--lbac-display); font-size: clamp(24px, 6.6vw, 28px); font-weight: 800; letter-spacing: -0.02em; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .lbac-mm__contact-toggle .lbac-mm__chevron { width: 22px; height: 22px; flex: none; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .lbac-mm__contact-toggle:active .lbac-mm__chevron { transform: translateX(6px); } .lbac-mm__foot-link, body .lbac-mm__foot-link { display: flex; align-items: center; width: 100%; padding: 9px 0; background: none; border: 0; color: color-mix(in srgb, var(--lbac-navy) 68%, transparent); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease; } .lbac-mm__foot-link:active { color: var(--lbac-navy); } .lbac-mm__foot-link:active { color: var(--lbac-blue); } .lbac-mm__foot-score { color: var(--lbac-yellow); color: var(--lbac-yellow); font-weight: 700; margin-left: 5px; letter-spacing: 0.05em; } /* Le plus se transforme en moins a l'ouverture. */ .lbac-mm__plus { position: relative; margin-left: auto; width: 16px; height: 16px; flex: none; } .lbac-mm__plus::before, .lbac-mm__plus::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; background: var(--lbac-blue); border-radius: 2px; transition: transform 0.2s ease; } .lbac-mm__plus::after { transform: rotate(90deg); } .lbac-mm__contact-toggle[aria-expanded="true"] .lbac-mm__plus::after { transform: rotate(0deg); } .lbac-mm__contact-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 20px calc(24px + env(safe-area-inset-bottom, 0px)); } /* WhatsApp ancre en bas du volet, comme une barre d'action d'app. */ .lbac-mm__contact-body .lbac-mm__wa { margin-top: auto; } .lbac-mm__contact-line, body .lbac-mm__contact-line { display: block; padding: 24px 0; border-bottom: 1px solid #eeece6; color: var(--lbac-navy); } .lbac-mm__contact-tag { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--lbac-yellow); margin-bottom: 4px; } .lbac-mm__contact-value { display: block; font-family: var(--lbac-display); font-size: clamp(34px, 10vw, 46px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--lbac-navy); } /* L'adresse e-mail est longue : elle ne peut pas suivre la meme echelle. */ .lbac-mm__contact-value--mail { font-size: clamp(17px, 4.6vw, 21px); overflow-wrap: anywhere; } .lbac-mm__contact-hours { display: block; margin-top: 6px; font-size: 12.5px; color: #7a7975; } .lbac-mm__wa, body .lbac-mm__wa { display: flex; width: 100%; align-items: center; justify-content: center; gap: 9px; margin-top: 22px; padding: 17px; border-radius: 999px; background: #1fa855; color: #fff; font-family: var(--lbac-display); font-size: 16px; font-weight: 700; } .lbac-mm__wa:active { background: #17853f; } .lbac-mm__wa .lbac-mm__icon { width: 18px; height: 18px; } /* --- Line reveals --- Chaque intitule est enveloppe en JS dans un masque a debordement cache ; le texte monte depuis le masque. Les delais partent apres le rideau. */ .lbac-mm__mask { display: block; overflow: hidden; } .lbac-mm__mask-i { display: block; transform: translateY(112%); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .lbac-mm__root.is-open .lbac-mm__bar .lbac-mm__mask-i { transform: translateY(0); } .lbac-mm__root.is-open .lbac-mm__bar > .lbac-mm__item:nth-child(1) .lbac-mm__mask-i { transition-delay: 0.52s; } .lbac-mm__root.is-open .lbac-mm__bar > .lbac-mm__item:nth-child(2) .lbac-mm__mask-i { transition-delay: 0.58s; } .lbac-mm__root.is-open .lbac-mm__bar > .lbac-mm__item:nth-child(3) .lbac-mm__mask-i { transition-delay: 0.64s; } .lbac-mm__root.is-open .lbac-mm__bar > .lbac-mm__item:nth-child(4) .lbac-mm__mask-i { transition-delay: 0.70s; } .lbac-mm__root.is-open .lbac-mm__bar > .lbac-mm__item:nth-child(5) .lbac-mm__mask-i { transition-delay: 0.76s; } .lbac-mm__root.is-open .lbac-mm__bar > .lbac-mm__item:nth-child(n+6) .lbac-mm__mask-i { transition-delay: 0.82s; } /* Dans un volet actif, le titre promu monte en premier. */ .lbac-mm__panel .lbac-mm__mask-i, .lbac-mm__col-pane .lbac-mm__mask-i, .lbac-mm__contact-pane .lbac-mm__mask-i { transition: none; transform: translateY(112%); } .lbac-mm__panel.is-active .lbac-mm__mask-i, .lbac-mm__col-pane.is-active .lbac-mm__mask-i, .lbac-mm__contact-pane.is-active .lbac-mm__mask-i { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.08s; transform: translateY(0); } /* Le pied arrive apres les rubriques. */ .lbac-mm__root .lbac-mm__drawer-foot { opacity: 0; transition: opacity 0.5s ease 0.9s; } .lbac-mm__root.is-open:not(.is-drilled) .lbac-mm__drawer-foot { opacity: 1; } /* --- Index editorial du niveau 0 --- */ .lbac-mm__bar { counter-reset: lbac-top; } .lbac-mm__bar > .lbac-mm__item { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid #eeece6; } .lbac-mm__bar > .lbac-mm__item:last-child { border-bottom: 0; } .lbac-mm__bar > .lbac-mm__item::before { counter-increment: lbac-top; content: counter(lbac-top, decimal-leading-zero); flex: none; width: 24px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lbac-yellow); color: var(--lbac-yellow); letter-spacing: 0.06em; } /* --- Entree du contenu : montee en fondu, decalage progressif --- */ @keyframes lbac-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } .lbac-mm__panel.is-active .lbac-mm__panel-inner > *, .lbac-mm__panel.is-active .lbac-mm__seeall, .lbac-mm__col-pane.is-active .lbac-mm__links > li, .lbac-mm__contact-pane.is-active .lbac-mm__contact-body > * { animation: lbac-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } .lbac-mm__panel.is-active .lbac-mm__panel-inner > *:nth-child(1), .lbac-mm__col-pane.is-active .lbac-mm__links > li:nth-child(1), .lbac-mm__contact-pane.is-active .lbac-mm__contact-body > *:nth-child(1) { animation-delay: 0.1s; } .lbac-mm__panel.is-active .lbac-mm__panel-inner > *:nth-child(2), .lbac-mm__col-pane.is-active .lbac-mm__links > li:nth-child(2), .lbac-mm__contact-pane.is-active .lbac-mm__contact-body > *:nth-child(2) { animation-delay: 0.16s; } .lbac-mm__panel.is-active .lbac-mm__panel-inner > *:nth-child(3), .lbac-mm__col-pane.is-active .lbac-mm__links > li:nth-child(3), .lbac-mm__contact-pane.is-active .lbac-mm__contact-body > *:nth-child(3) { animation-delay: 0.22s; } .lbac-mm__panel.is-active .lbac-mm__panel-inner > *:nth-child(4), .lbac-mm__col-pane.is-active .lbac-mm__links > li:nth-child(4), .lbac-mm__contact-pane.is-active .lbac-mm__contact-body > *:nth-child(4) { animation-delay: 0.28s; } .lbac-mm__panel.is-active .lbac-mm__panel-inner > *:nth-child(n+5), .lbac-mm__col-pane.is-active .lbac-mm__links > li:nth-child(n+5), .lbac-mm__contact-pane.is-active .lbac-mm__contact-body > *:nth-child(n+5) { animation-delay: 0.34s; } .lbac-mm__panel.is-active .lbac-mm__seeall { animation-delay: 0.08s; } @media (prefers-reduced-motion: reduce) { .lbac-mm__panel.is-active .lbac-mm__panel-inner > *, .lbac-mm__panel.is-active .lbac-mm__seeall, .lbac-mm__col-pane.is-active .lbac-mm__links > li, .lbac-mm__contact-pane.is-active .lbac-mm__contact-body > * { animation: none; } .lbac-mm__item, .lbac-mm__drawer-foot, .lbac-mm__mask-i { transition: none; } .lbac-mm__mask-i { transform: none !important; } .lbac-mm__root.is-open::before, .lbac-mm__root.is-open::after { animation: none; } } /* -------------------------------------------------------------------------- Theme sombre — [lbac_megamenu theme="dark"] Fond navy de marque, texte blanc, or inchange. Le rideau bleu devient blanc, sans quoi il serait invisible sur le fond. -------------------------------------------------------------------------- */ .lbac-mm__root--dark { --lbac-mm-bg: var(--lbac-navy); background: var(--lbac-navy); color: #fff; } .lbac-mm__root--dark::after { background: #fff; } .lbac-mm__root--dark .lbac-mm__drawer-title, .lbac-mm__root--dark .lbac-mm__drawer-close, .lbac-mm__root--dark .lbac-mm__pane-close { color: #fff; } .lbac-mm__root--dark .lbac-mm__top, .lbac-mm__root--dark .lbac-mm__disc, .lbac-mm__root--dark .lbac-mm__drill, .lbac-mm__root--dark .lbac-mm__pane-title { color: #fff; } .lbac-mm__root--dark .lbac-mm__item:not(.lbac-mm__item--mega) > .lbac-mm__top { color: rgba(255, 255, 255, 0.34); } .lbac-mm__root--dark .lbac-mm__item:not(.lbac-mm__item--mega) > .lbac-mm__top:active { color: #fff; } .lbac-mm__root--dark .lbac-mm__bar > .lbac-mm__item, .lbac-mm__root--dark .lbac-mm__link, .lbac-mm__root--dark .lbac-mm__contact-line, .lbac-mm__root--dark .lbac-mm__foot-links { border-color: rgba(255, 255, 255, 0.14); } /* La profondeur se lit par la couleur : chaque niveau eclaircit le navy d'un cran vers le bleu de marque. Combine au fondu, chaque clic change d'atmosphere. */ .lbac-mm__root--dark .lbac-mm__panel[data-lbac-pane], .lbac-mm__root--dark .lbac-mm__contact-pane { background: color-mix(in srgb, var(--lbac-navy) 72%, var(--lbac-blue)); } .lbac-mm__root--dark .lbac-mm__col-pane { background: color-mix(in srgb, var(--lbac-navy) 45%, var(--lbac-blue)); } .lbac-mm__root--dark .lbac-mm__back { background: rgba(255, 255, 255, 0.12); color: #fff; } .lbac-mm__root--dark .lbac-mm__back:active { background: rgba(255, 255, 255, 0.24); } .lbac-mm__root--dark .lbac-mm__seeall { color: var(--lbac-yellow); color: var(--lbac-yellow); } .lbac-mm__root--dark .lbac-mm__link-label, .lbac-mm__root--dark .lbac-mm__contact-value { color: #fff; } .lbac-mm__root--dark .lbac-mm__link-sub, .lbac-mm__root--dark .lbac-mm__contact-hours { color: rgba(255, 255, 255, 0.58); } .lbac-mm__root--dark .lbac-mm__link:active { background: rgba(255, 255, 255, 0.06); } .lbac-mm__root--dark .lbac-mm__foot-link, body .lbac-mm__root--dark .lbac-mm__foot-link { color: rgba(255, 255, 255, 0.66); } .lbac-mm__root--dark .lbac-mm__foot-link:active { color: #fff; } .lbac-mm__root--dark .lbac-mm__drawer-foot { background: linear-gradient(180deg, rgba(20, 34, 107, 0) 0%, var(--lbac-navy) 20%); } /* Correctifs de cascade du theme sombre : certaines regles claires portent un prefixe body qui les rendait plus fortes que leurs equivalents dark. Ces regles, plus specifiques ET plus tardives, tranchent. */ body .lbac-mm__root--dark .lbac-mm__link .lbac-mm__link-label, .lbac-mm__root--dark .lbac-mm__link .lbac-mm__link-label { color: #fff; } body .lbac-mm__root--dark .lbac-mm__foot-reviews-label, .lbac-mm__root--dark .lbac-mm__foot-reviews-label { color: rgba(255, 255, 255, 0.92); } body .lbac-mm__root--dark .lbac-mm__contact-toggle, .lbac-mm__root--dark .lbac-mm__contact-toggle { color: var(--lbac-yellow); color: var(--lbac-yellow); } body .lbac-mm__root--dark .lbac-mm__contact-value, .lbac-mm__root--dark .lbac-mm__contact-value { color: #fff; } body .lbac-mm__root--dark .lbac-mm__contact-line, .lbac-mm__root--dark .lbac-mm__contact-line { border-color: rgba(255, 255, 255, 0.14); color: #fff; } /* --- Retour tactile --- Chaque element cliquable s'enfonce legerement au tap, origine a gauche pour les rangees de texte. Complement des chevrons qui glissent. */ .lbac-mm__disc, .lbac-mm__drill, .lbac-mm__link, .lbac-mm__back, .lbac-mm__contact-toggle, .lbac-mm__foot-reviews, .lbac-mm__foot-link, .lbac-mm__seeall, .lbac-mm__wa, .lbac-mm__promo { transition-property: transform, color, background; transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); transform-origin: left center; } .lbac-mm__disc:active, .lbac-mm__drill:active, .lbac-mm__link:active, .lbac-mm__contact-toggle:active, .lbac-mm__foot-reviews:active, .lbac-mm__foot-link:active, .lbac-mm__seeall:active { transform: scale(0.975); } .lbac-mm__back:active, .lbac-mm__wa:active, .lbac-mm__promo:active { transform: scale(0.965); transform-origin: center; } .lbac-mm__root--light .lbac-mm__panel[data-lbac-pane], .lbac-mm__root--light .lbac-mm__contact-pane { background: #f6f7fd; } .lbac-mm__root--light .lbac-mm__col-pane { background: #edf1fb; } /* --- Pastille panier --- */ .lbac-mm__cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-left: auto; color: inherit; -webkit-tap-highlight-color: transparent; } .lbac-mm__cart .lbac-mm__icon { width: 23px; height: 23px; } .lbac-mm__cart-count { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--lbac-yellow); background: var(--lbac-yellow); color: var(--lbac-navy); font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; } /* Le panier prend l'auto-marge : la croix se cale a cote. */ .lbac-mm__cart + .lbac-mm__drawer-close, .lbac-mm__cart + .lbac-mm__pane-close { margin-left: 4px; } .lbac-mm__pane-bar { justify-content: flex-start; } .lbac-mm__pane-bar .lbac-mm__pane-close { margin-left: auto; } .lbac-mm__pane-bar .lbac-mm__cart + .lbac-mm__pane-close { margin-left: 4px; } /* --- Reassurance du volet contact --- */ .lbac-mm__contact-legal { display: block; padding: 24px 0; border-bottom: 1px solid #eeece6; } .lbac-mm__contact-company { display: block; font-family: var(--lbac-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--lbac-navy); margin-top: 3px; } .lbac-mm__contact-address { display: block; font-size: 13.5px; line-height: 1.55; color: #7a7975; margin-top: 5px; } .lbac-mm__contact-siret { display: block; margin-top: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #9a998f; } /* Theme sombre */ .lbac-mm__root--dark .lbac-mm__contact-legal { border-color: rgba(255, 255, 255, 0.14); } body .lbac-mm__root--dark .lbac-mm__contact-company, .lbac-mm__root--dark .lbac-mm__contact-company { color: #fff; } .lbac-mm__root--dark .lbac-mm__contact-address { color: rgba(255, 255, 255, 0.62); } .lbac-mm__root--dark .lbac-mm__contact-siret { color: rgba(255, 255, 255, 0.4); } /* --- Point or sur la page active --- */ .lbac-mm__bar > .lbac-mm__item.is-current > .lbac-mm__top::after, .lbac-mm__bar > .lbac-mm__item.is-current > .lbac-mm__disc::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lbac-yellow); flex: none; margin-left: 10px; } .lbac-mm__link.is-current .lbac-mm__link-label, body .lbac-mm__link.is-current .lbac-mm__link-label { color: var(--lbac-yellow); } /* Les avis de la carte sont un element desktop : le pied du tiroir les porte. */ .lbac-mm__promo-reviews { display: none; } /* --- Barre mobile capsule : Menu — logo — panier --- Detachee des bords, translucide et floutee, bouton Menu en pave navy. C'est le header mobile a elle seule. */ .lbac-mm__bar-mobile { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 12px; padding: 8px 10px; border-radius: 22px; background: color-mix(in srgb, var(--lbac-navy) 74%, transparent); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid color-mix(in srgb, #fff 18%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 24%, transparent), inset 0 -1px 0 color-mix(in srgb, #000 22%, transparent), 0 14px 36px -18px color-mix(in srgb, var(--lbac-navy) 85%, transparent); color: #fff; } /* Reflet oblique du verre : un voile clair fige en haut a gauche. */ .lbac-mm__bar-mobile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 115deg, color-mix(in srgb, #fff 16%, transparent) 0%, transparent 38%, transparent 70%, color-mix(in srgb, #fff 7%, transparent) 100% ); pointer-events: none; } /* Le contenu passe au-dessus du reflet. */ .lbac-mm__bar-mobile > * { position: relative; z-index: 1; } .lbac-mm__bar-mobile .lbac-mm__bar-logo { position: absolute; } /* Le bouton Menu ressort par une nuance bleue — compact, pour laisser le logo dominer le centre. */ .lbac-mm__bar-mobile .lbac-mm__burger { min-width: 0; min-height: 44px; padding: 0 12px; gap: 7px; border-radius: 14px; background: color-mix(in srgb, var(--lbac-blue) 42%, color-mix(in srgb, var(--lbac-navy) 86%, transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent); color: #fff; } .lbac-mm__bar-mobile .lbac-mm__burger-icon { width: 19px; height: 19px; } .lbac-mm__bar-mobile .lbac-mm__burger-label { font-size: 10.5px; letter-spacing: 0.09em; } /* Logo en centre optique vrai, independant des largeurs laterales. */ .lbac-mm__bar-logo { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; } .lbac-mm__bar-logo-img, body .lbac-mm__bar-logo-img { display: block; height: 38px !important; width: auto !important; max-width: 48vw !important; max-height: 38px !important; object-fit: contain; } .lbac-mm__logo-text { font-family: var(--lbac-display); font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: #fff; white-space: nowrap; } /* Panier : meme nuance que le bouton Menu, symetrie parfaite. */ .lbac-mm__bar-mobile .lbac-mm__cart { width: 44px; height: 44px; margin-left: 0; border-radius: 14px; background: color-mix(in srgb, var(--lbac-blue) 42%, color-mix(in srgb, var(--lbac-navy) 86%, transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent); color: #fff; } /* La bulle panier flottante de FunnelKit fait doublon avec la barre : escamotee (pas display:none — son declencheur doit rester clicable par script pour ouvrir le panneau coulissant). */ #fkcart-floating-toggler, .fkcart-floating-toggler { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Croix et panier du tiroir : paves de verre, la meme matiere que la pilule Retour — elegants sur toute palette. */ .lbac-mm__drawer-close, body .lbac-mm__drawer-close { width: 44px; height: 44px; justify-content: center; padding: 0; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--lbac-navy) 8%, transparent); } .lbac-mm__root--dark .lbac-mm__drawer-close, body .lbac-mm__root--dark .lbac-mm__drawer-close { background: color-mix(in srgb, #fff 13%, transparent); } /* Capsule sortie du header (portal) : positionnee en coordonnees de page, elle defile naturellement et plus aucune colonne Divi ne peut la rogner. */ .lbac-mm__bar-mobile--portal, body > .lbac-mm__bar-mobile--portal { position: fixed; top: 12px; left: 12px; right: 12px; margin: 0; width: auto; z-index: 9990; } /* Variante non fixee : posee en absolu a sa place d'origine, elle defile avec la page. Le JS cale son bord haut sur le marqueur d'ancrage. */ .lbac-mm__bar-mobile--portal-static, body > .lbac-mm__bar-mobile--portal-static { position: absolute; left: 12px; right: 12px; margin: 0; width: auto; z-index: 9990; } /* --- Bandeau d'information --- Colle sous la capsule, pilote par le back-office (afficher/masquer, texte, lien). Glisse derriere la capsule, seule sa partie basse depasse. */ /* Ruban fin, pas un pave : glisse de 12 px sous la capsule, marges rentrees, micro-capitales — le meme registre que les etiquettes du systeme. */ .lbac-mm__notice { position: absolute; z-index: 0; top: calc(100% - 12px); left: 20px; right: 20px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 19px 16px 8px; border-radius: 0 0 14px 14px; background: var(--lbac-yellow); color: var(--lbac-navy); font-family: var(--lbac-display); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; text-align: center; box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--lbac-navy) 70%, transparent); -webkit-tap-highlight-color: transparent; } .lbac-mm__notice-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lbac-mm__notice-icon { width: 12px; height: 12px; flex: none; } a.lbac-mm__notice:active { background: color-mix(in srgb, var(--lbac-yellow) 88%, var(--lbac-navy)); } /* Sous-menu en lien direct (pas d'enfants) : meme rangee que le drill, fleche au lieu du chevron, navigation immediate. */ .lbac-mm__drill--link { text-decoration: none; } .lbac-mm__drill--link .lbac-mm__chevron { color: var(--lbac-yellow); opacity: 1; } /* --- Produit star --- Carte de conversion entre la navigation et le pied : photo sur pastille blanche, titre display, prix or. */ .lbac-mm__spot { display: flex; align-items: center; gap: 14px; margin: 10px 20px 26px; padding: 13px; border-radius: 16px; background: color-mix(in srgb, var(--lbac-navy) 5%, transparent); border: 1px solid color-mix(in srgb, var(--lbac-navy) 10%, transparent); text-decoration: none; transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: left center; } .lbac-mm__spot:active { transform: scale(0.975); } .lbac-mm__spot-img { flex: none; width: 72px; height: 72px; object-fit: cover; border-radius: 12px; background: #fff; } .lbac-mm__spot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .lbac-mm__spot-title { font-family: var(--lbac-display); font-size: 16px; font-weight: 700; letter-spacing: -0.015em; color: var(--lbac-navy); } .lbac-mm__spot-text { font-size: 12.5px; line-height: 1.4; color: color-mix(in srgb, var(--lbac-navy) 60%, transparent); } .lbac-mm__spot-price { margin-top: 3px; font-family: var(--lbac-display); font-size: 14.5px; font-weight: 800; color: var(--lbac-yellow); } .lbac-mm__spot-arrow { flex: none; width: 18px; height: 18px; color: var(--lbac-yellow); } .lbac-mm__root--dark .lbac-mm__spot { background: color-mix(in srgb, #fff 6%, transparent); border-color: color-mix(in srgb, #fff 12%, transparent); } .lbac-mm__root--dark .lbac-mm__spot-title { color: #fff; } .lbac-mm__root--dark .lbac-mm__spot-text { color: color-mix(in srgb, #fff 58%, transparent); } /* --- Carte Google du volet contact --- */ /* Atelier et carte cote a cote : 50/50, hauteur donnee par le texte. */ .lbac-mm__contact-row { display: flex; align-items: stretch; gap: 14px; margin: 22px 0 12px; } .lbac-mm__contact-row .lbac-mm__contact-legal { flex: 1; min-width: 0; margin: 0; } .lbac-mm__contact-row .lbac-mm__contact-map { flex: 1; min-width: 0; margin: 0; align-self: stretch; } .lbac-mm__contact-row .lbac-mm__contact-map iframe { height: 100% !important; min-height: 168px; } .lbac-mm__contact-map { flex: none; margin: 22px 0 10px; border-radius: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, #fff 14%, transparent); line-height: 0; } .lbac-mm__contact-map iframe { display: block; width: 100% !important; height: 280px !important; border: 0; } /* Deux produits stars : 50/50 horizontal, cartes verticales compactes. (Classe distincte de .lbac-mm__stars, reservee aux etoiles d'avis.) */ .lbac-mm__spot-duo { display: flex; gap: 10px; margin: 6px 20px 22px; } .lbac-mm__spot-duo .lbac-mm__spot { flex: 1; min-width: 0; margin: 0; padding: 11px; flex-direction: column; align-items: flex-start; gap: 8px; } .lbac-mm__spot-duo .lbac-mm__spot-img { width: 100%; height: 88px; border-radius: 10px; } .lbac-mm__spot-duo .lbac-mm__spot-title { font-size: 14px; } .lbac-mm__spot-duo .lbac-mm__spot-text { font-size: 12px; } .lbac-mm__spot-duo .lbac-mm__spot-arrow { display: none; } /* Le panier, meme famille : pave de verre. */ .lbac-mm__drawer-head .lbac-mm__cart, .lbac-mm__pane-bar .lbac-mm__cart { width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--lbac-navy) 8%, transparent); color: var(--lbac-navy); } .lbac-mm__root--dark .lbac-mm__drawer-head .lbac-mm__cart, .lbac-mm__root--dark .lbac-mm__pane-bar .lbac-mm__cart { background: color-mix(in srgb, #fff 13%, transparent); } .lbac-mm__root--dark .lbac-mm__drawer-head .lbac-mm__cart, .lbac-mm__root--dark .lbac-mm__pane-bar .lbac-mm__cart { color: #fff; } /* Etoiles d'avis : geometrie et remplissage verrouilles contre les CSS globaux des themes (svg { fill: none }, flex herites, etc.). */ .lbac-mm__foot-reviews .lbac-mm__spot { width: 18px !important; height: 18px !important; flex: none !important; } .lbac-mm__stars .lbac-mm__star, .lbac-mm__stars .lbac-mm__star * { fill: currentColor !important; stroke: none !important; } } /* -------------------------------------------------------------------------- DESKTOP — barre + panneaux -------------------------------------------------------------------------- */ @media (min-width: 980px) { .lbac-mm__burger, .lbac-mm__scrim, .lbac-mm__drawer-head, .lbac-mm__drawer-foot, .lbac-mm__pane-head, .lbac-mm__seeall, .lbac-mm__drill:not(.lbac-mm__drill--link), .lbac-mm__disc-label, .lbac-mm__bar-mobile, .lbac-mm__foot-links, .lbac-mm__contact-pane, .lbac-mm__link > .lbac-mm__icon, .lbac-mm__link-chevron { display: none; } /* Les masques de reveal sont un habillage mobile. */ .lbac-mm__mask { display: inline; overflow: visible; } .lbac-mm__mask-i { display: inline; transform: none; transition: none; } .lbac-mm__bar > .lbac-mm__item::before { content: none; } .lbac-mm__root::before, .lbac-mm__root::after { content: none; } .lbac-mm__item--mega .lbac-mm__disc { display: inline-flex; border-bottom: 0; padding: 4px; } /* La meme hierarchie qu'en mobile : les univers produit portent le poids, les pages simples passent en navy fantome et se revelent au survol. */ .lbac-mm__item--mega > .lbac-mm__top { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.015em; } .lbac-mm__item:not(.lbac-mm__item--mega) > .lbac-mm__top { font-size: 14px; font-weight: 500; color: color-mix(in srgb, var(--lbac-navy) 55%, transparent); } .lbac-mm__item:not(.lbac-mm__item--mega) > .lbac-mm__top:hover { color: var(--lbac-navy); } .lbac-mm__top, body .lbac-mm__top { display: block; width: auto; padding: 22px 0; font-size: 13px; font-weight: 400; letter-spacing: 0.06em; line-height: normal; cursor: pointer; } /* Les volets de niveau 2 redeviennent de simples colonnes. */ .lbac-mm__col-pane { display: block; } .lbac-mm__root { position: static; width: auto; display: block; background: none; color: var(--lbac-ink); transform: none; overflow: visible; z-index: auto; } .lbac-mm__bar { display: flex; flex: none; flex-direction: row; align-items: center; gap: 30px; padding: 0; overflow: visible; } .lbac-mm__item { display: flex; align-items: center; gap: 2px; } /* Le filet statique devient un soulignement or qui se dessine de gauche a droite — meme famille de gestes que le mobile. */ .lbac-mm__top { position: relative; padding: 24px 0; font-family: var(--lbac-display); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--lbac-navy); border-bottom: 0; transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .lbac-mm__top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 2px; border-radius: 2px; background: var(--lbac-yellow); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .lbac-mm__item.is-current > .lbac-mm__top, .lbac-mm__item.is-open > .lbac-mm__top, .lbac-mm__top:hover { color: var(--lbac-blue); } .lbac-mm__item.is-current > .lbac-mm__top::after, .lbac-mm__item.is-open > .lbac-mm__top::after, .lbac-mm__top:hover::after { transform: scaleX(1); } .lbac-mm__chevron { color: var(--lbac-yellow); } .lbac-mm__disc { display: inline-flex; align-items: center; width: auto; background: none; border: 0; border-radius: 0; padding: 4px; color: var(--lbac-muted); cursor: pointer; line-height: 0; } .lbac-mm__chevron { width: 14px; height: 14px; transform: rotate(90deg); transition: transform 0.18s ease; } .lbac-mm__item.is-open .lbac-mm__chevron { transform: rotate(-90deg); color: var(--lbac-blue); } /* Pleine largeur d'ecran. La nav vit a droite du logo : un panneau centre sur elle est desaxe par rapport au viewport. Le JS mesure la position reelle de la nav et etire le panneau bord a bord ; le contenu, lui, est recentre par le conteneur interne. */ .lbac-mm__panel { position: absolute; top: 100%; left: 0; width: 100vw; transform: translateY(-16px); background: #fff; border: 0; border-top: 3px solid var(--lbac-yellow); border-radius: 0; box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--lbac-navy) 35%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .lbac-mm__panel[hidden] { display: none; } .lbac-mm__panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .lbac-mm__panel-inner { flex: none; display: block; max-width: 1240px; margin: 0 auto; padding: 0 24px; overflow: visible; } .lbac-mm__cols { display: grid; grid-template-columns: repeat(var(--lbac-cols, 3), minmax(0, 1fr)); gap: 0; } .lbac-mm__cols[data-cols="2"] { --lbac-cols: 2; } .lbac-mm__cols[data-cols="4"] { --lbac-cols: 4; } .lbac-mm__col { padding: 26px 30px; } /* Meme traitement que les etiquettes du volet contact mobile : petites capitales dorees, pour que les deux tailles se repondent. */ .lbac-mm__col-title { display: block; margin: 0 0 18px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lbac-yellow); } .lbac-mm__col-title a:hover { color: var(--lbac-blue); } .lbac-mm__links { display: flex; flex-direction: column; flex: none; gap: 0; padding: 0; overflow: visible; counter-reset: lbac-n; } .lbac-mm__link { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; background: none; border: 0; border-bottom: 1px solid #f0efea; border-radius: 0; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .lbac-mm__link:hover { transform: translateX(5px); } .lbac-mm__links li:last-child .lbac-mm__link { border-bottom: 0; } .lbac-mm__link::before { counter-increment: lbac-n; content: counter(lbac-n, decimal-leading-zero); flex: none; width: 26px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--lbac-yellow); padding-top: 3px; transition: color 0.15s ease; } .lbac-mm__link--thumb::before { display: none; } .lbac-mm__link:hover::before { color: var(--lbac-blue); } .lbac-mm__link > .lbac-mm__icon { width: 20px; height: 20px; padding: 0; background: none; color: var(--lbac-blue); margin-top: 1px; } .lbac-mm__thumb { width: 40px; height: 40px; background: var(--lbac-white); border: 1px solid var(--lbac-line); } .lbac-mm__link-label { color: var(--lbac-desk-link, var(--lbac-navy)); font-family: var(--lbac-display); font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; transition: color 0.12s ease; } .lbac-mm__link:hover .lbac-mm__link-label { color: var(--lbac-blue); } .lbac-mm__link-sub { color: var(--lbac-desk-link-soft, var(--lbac-muted)); font-size: 12.5px; margin-top: 3px; } .lbac-mm__link-chevron { display: none; } .lbac-mm__promo { order: 0; margin: 18px; background: var(--lbac-yellow); color: var(--lbac-navy); border-radius: 16px; padding: 20px; } .lbac-mm__promo-img { display: block; width: 100%; height: 120px; object-fit: cover; object-position: left center; border-radius: 10px; margin-bottom: 12px; } .lbac-mm__promo-badge { padding: 0; background: none; color: var(--lbac-navy); font-size: 10px; letter-spacing: 0.16em; font-weight: 800; text-transform: uppercase; } .lbac-mm__promo-title { display: block; font-family: var(--lbac-display); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--lbac-navy); margin-top: 7px; } .lbac-mm__promo-sub { color: color-mix(in srgb, var(--lbac-navy) 75%, transparent); font-size: 13px; line-height: 1.45; margin-top: 3px; } .lbac-mm__promo-cta { margin-top: 13px; padding: 11px 18px; background: var(--lbac-navy); color: #fff; font-family: var(--lbac-display); font-size: 13px; font-weight: 700; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .lbac-mm__promo:hover .lbac-mm__promo-cta { transform: translateX(4px); } .lbac-mm__trust { gap: 0; margin: 0; border-top: 1px solid var(--lbac-line); background: #fbfaf7; border-radius: 0 0 var(--lbac-radius) var(--lbac-radius); } .lbac-mm__chip { flex: 1; justify-content: center; padding: 12px; border: 0; border-radius: 0; font-size: 12px; color: var(--lbac-muted); } .lbac-mm__chip + .lbac-mm__chip { border-left: 1px solid var(--lbac-line); } .lbac-mm__chip .lbac-mm__icon { color: var(--lbac-blue); } /* --- Panneau sombre (theme dark) --- La barre reste aux couleurs du header du site ; seul le panneau deroulant adopte le navy, en miroir du menu mobile. */ .lbac-mm__root--dark .lbac-mm__panel { background: var(--lbac-navy); border-color: color-mix(in srgb, #fff 14%, transparent); border-top-color: var(--lbac-yellow); } .lbac-mm__root--dark .lbac-mm__link { border-bottom-color: color-mix(in srgb, #fff 10%, transparent); } .lbac-mm__root--dark .lbac-mm__link-label { color: var(--lbac-desk-link, #fff); } .lbac-mm__root--dark .lbac-mm__link:hover .lbac-mm__link-label { color: var(--lbac-yellow); } .lbac-mm__root--dark .lbac-mm__link-sub { color: var(--lbac-desk-link-soft, color-mix(in srgb, #fff 55%, transparent)); } .lbac-mm__root--dark .lbac-mm__col-title a:hover { color: #fff; } .lbac-mm__root--dark .lbac-mm__trust { background: color-mix(in srgb, var(--lbac-navy) 80%, black); border-top-color: color-mix(in srgb, #fff 10%, transparent); } .lbac-mm__root--dark .lbac-mm__chip { color: color-mix(in srgb, #fff 65%, transparent); } .lbac-mm__root--dark .lbac-mm__chip + .lbac-mm__chip { border-left-color: color-mix(in srgb, #fff 10%, transparent); } .lbac-mm__root--dark .lbac-mm__chip .lbac-mm__icon { color: var(--lbac-yellow); } /* Avis dans la carte or : etoiles navy (l'or sur or serait invisible). */ .lbac-mm__promo-reviews { display: flex; align-items: center; gap: 8px; margin-top: 15px; padding-top: 13px; border-top: 1px solid color-mix(in srgb, var(--lbac-navy) 22%, transparent); } .lbac-mm__promo-reviews .lbac-mm__stars { display: inline-flex; gap: 2px; color: var(--lbac-navy); } .lbac-mm__promo-reviews .lbac-mm__spot { width: 14px; height: 14px; } .lbac-mm__promo-reviews-label { font-size: 12.5px; font-weight: 700; color: var(--lbac-navy); } /* Page active au niveau des liens */ .lbac-mm__link.is-current .lbac-mm__link-label { color: var(--lbac-blue); } .lbac-mm__link.is-current::before { color: var(--lbac-blue); } .lbac-mm__root--dark .lbac-mm__link.is-current .lbac-mm__link-label { color: var(--lbac-yellow); } /* Colonne sans enfants : le lien direct s'affiche comme un titre de colonne cliquable, micro-caps or, fleche fine. */ .lbac-mm__drill--link { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0; font-family: var(--lbac-display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lbac-yellow); } .lbac-mm__drill--link:hover { color: var(--lbac-blue); } .lbac-mm__drill--link .lbac-mm__chevron { width: 14px; height: 14px; } /* --- Produit star en panneau desktop : carte compacte de grille --- */ .lbac-mm__spot { display: flex; align-items: center; gap: 12px; margin: 20px 18px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--lbac-navy) 4%, transparent); border: 1px solid color-mix(in srgb, var(--lbac-navy) 10%, transparent); text-decoration: none; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .lbac-mm__spot:hover { transform: translateY(-2px); } .lbac-mm__spot-img { flex: none; width: 58px; height: 58px; object-fit: cover; border-radius: 10px; background: #fff; } .lbac-mm__spot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .lbac-mm__spot-title { font-family: var(--lbac-display); font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--lbac-desk-link, var(--lbac-navy)); } .lbac-mm__spot-text { font-size: 12px; line-height: 1.35; color: var(--lbac-desk-link-soft, var(--lbac-muted)); } .lbac-mm__spot-price { margin-top: 2px; font-family: var(--lbac-display); font-size: 13.5px; font-weight: 800; color: var(--lbac-yellow); } .lbac-mm__spot-arrow { display: inline-block; flex: none; width: 16px; height: 16px; color: var(--lbac-yellow); } .lbac-mm__root--dark .lbac-mm__spot { background: color-mix(in srgb, #fff 6%, transparent); border-color: color-mix(in srgb, #fff 12%, transparent); } .lbac-mm__root--dark .lbac-mm__spot-title { color: var(--lbac-desk-link, #fff); } .lbac-mm__root--dark .lbac-mm__spot-text { color: var(--lbac-desk-link-soft, color-mix(in srgb, #fff 58%, transparent)); } .lbac-mm__spot-duo { display: flex; flex-direction: column; gap: 10px; margin: 20px 18px; } .lbac-mm__spot-duo .lbac-mm__spot { margin: 0; } .lbac-mm__stars .lbac-mm__star, .lbac-mm__stars .lbac-mm__star * { fill: currentColor !important; stroke: none !important; } .lbac-mm__promo-reviews .lbac-mm__spot { flex: none !important; } } /* -------------------------------------------------------------------------- Variante « blue » : barre desktop sur fond bleu (si le header passe en bleu) -------------------------------------------------------------------------- */ @media (min-width: 980px) { .lbac-mm--blue .lbac-mm__top { color: var(--lbac-white); } .lbac-mm--blue .lbac-mm__top:hover, .lbac-mm--blue .lbac-mm__item.is-open > .lbac-mm__top { color: var(--lbac-yellow); border-color: var(--lbac-yellow); } .lbac-mm--blue .lbac-mm__disc { color: rgba(255, 255, 255, 0.7); } } /* -------------------------------------------------------------------------- Accessibilité : mouvement réduit -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .lbac-mm__root, .lbac-mm__panel, .lbac-mm__scrim, .lbac-mm__chevron { transition: none; } } /* -------------------------------------------------------------------------- Divi — le header global rogne les enfants absolus. On rouvre le flux uniquement sur la ligne qui contient le menu. -------------------------------------------------------------------------- */ .et-l--header .et_pb_section, .et-l--header .et_pb_row, .et-l--header .et_pb_column, .et-l--header .et_pb_module, .et-l--header .et_pb_code_inner { overflow: visible !important; } .et-l--header .et_pb_section:has(.lbac-mm), .et-l--header .et_pb_row:has(.lbac-mm) { z-index: 100; } body.lbac-mm-locked { overflow: hidden; } /* -------------------------------------------------------------------------- Bandeaux tiers CookieYes affiche une pastille flottante a fort z-index qui recouvre le pied du menu. On la masque tant que le menu est ouvert : elle reste accessible des la fermeture. -------------------------------------------------------------------------- */ body.lbac-mm-locked .cky-btn-revisit-wrapper, body.lbac-mm-locked .cky-revisit-bottom-left, body.lbac-mm-locked .cky-revisit-bottom-right, body.lbac-mm-locked #cookieyes-revisit, body.lbac-mm-locked .cky-consent-container { display: none !important; }