/* ========================================================================= Biomnigène – Méga-menu Palette modifiable ci-dessous (variables CSS). ========================================================================= */ /* Variables aussi sur .mm-drawer : le tiroir mobile est déplacé dans (hors de .mm-nav) à l'ouverture, il doit donc porter ses propres tokens. */ .mm-nav,.mm-drawer{ --mm-navy:#001289; --mm-mag:#C2188E; --mm-teal:#16A697; --mm-dark:#16162E; --mm-body:#5A5A6B; --mm-border:#E7E8F0; --mm-panel:#F7F8FB; --mm-tint-navy:#EEF0FB; --mm-tint-mag:#FBEAF4; --mm-tint-teal:#E4F5F2; --mm-radius:20px; --mm-font:"DM Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-family:var(--mm-font); letter-spacing:-.02em; } .mm-nav{position:relative;z-index:1001} /* Empilement : le header Divi (Theme Builder) est en position:static / z-index:auto, donc il ne crée aucun contexte d'empilement et le contenu de page se peint PAR-DESSUS le méga-panneau (panneau invisible + survol intercepté). On élève le header au-dessus du contenu. Sans !important pour ne pas casser un header sticky. */ .et-l--header, #main-header, .et_pb_sticky_module_wrapper{position:relative;z-index:1000} .mm-nav *,.mm-drawer *{box-sizing:border-box} .mm-container{max-width:1200px;margin:0 auto;padding:0 24px} /* Resets robustes : neutralise puces ET padding/marge hérités de Divi (ex. .et-l--header ul { padding:0 0 23px 1em } qui décalait le menu). */ .mm-nav ul,.mm-nav li,.mm-nav ol, .mm-drawer ul,.mm-drawer li,.mm-drawer ol{list-style:none !important;margin:0 !important;padding:0 !important;line-height:normal} .mm-nav li::before,.mm-nav li::marker,.mm-drawer li::before,.mm-drawer li::marker{content:none !important;display:none !important} .mm-nav,.mm-nav a,.mm-nav span,.mm-nav p,.mm-nav h3,.mm-nav h4, .mm-drawer,.mm-drawer a,.mm-drawer span,.mm-drawer p,.mm-drawer h3,.mm-drawer h4{text-align:left} .mm-nav .mm-txt,.mm-drawer .mm-txt{display:flex;flex-direction:column;text-align:left;min-width:0} /* Alignement en haut des colonnes / listes (prioritaire sur le flex de Divi) */ .mm-inner{align-items:flex-start !important} .mm-fams,.mm-grid{align-items:start !important;align-content:start !important} .mm-main,.mm-fam,.mm-fam-list{align-self:flex-start} /* ---------- Top bar ---------- */ .mm-topbar{border-bottom:1px solid rgba(59,59,59,.12)} .mm-topbar-inner{display:flex;align-items:center;justify-content:flex-start;min-height:44px} .mm-topbar-contacts{display:flex;gap:24px;align-items:center} .mm-tb-link{color:#000;text-decoration:none;font-size:15px} .mm-tb-link:hover{color:var(--mm-navy)} /* ---------- Main bar ---------- */ .mm-bar{background:#fff} .mm-bar-inner{display:flex;align-items:center;min-height:80px;gap:24px} .mm-logo{display:inline-flex;align-items:center;text-decoration:none;margin-right:auto} .mm-logo img{max-height:48px;width:auto;display:block} .mm-wordmark{font-weight:700;font-size:24px;color:var(--mm-navy);white-space:nowrap} .mm-wordmark span{color:var(--mm-mag)} /* ---------- Menu (desktop) ---------- */ .mm-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:28px} .mm-li{position:relative} .mm-top-link{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--mm-dark); font-size:16px;font-weight:500;padding:28px 0;line-height:1;cursor:pointer} .mm-top-link:hover,.mm-has-mega:hover>.mm-top-link{color:var(--mm-navy)} .mm-caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);transition:transform .2s;margin-top:-3px} /* ---------- Sélecteur de langue ---------- */ .mm-li--lang{display:flex;align-items:center} .mm-li--spacer{display:none} .mm-lang{display:inline-flex;align-items:center;gap:9px;line-height:1} .mm-lang-link{text-decoration:none;font-size:15px;font-weight:600;color:var(--mm-body);text-transform:uppercase;letter-spacing:.02em} .mm-lang-link:hover,.mm-lang-link.is-active{color:var(--mm-navy)} .mm-lang-sep{width:1px;height:14px;background:var(--mm-border)} /* Variante autonome (shortcode [biomnigene_lang_switcher]) : porte ses propres tokens car placée hors de .mm-nav (ex. barre du haut Divi). */ .mm-lang--standalone{--mm-navy:#001289;--mm-body:#5A5A6B;--mm-border:#c9ccdb; display:inline-flex;align-items:center;gap:11px;vertical-align:middle; font-family:"DM Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .mm-lang--standalone .mm-lang-link{font-size:16px;font-weight:600} .mm-lang--standalone .mm-lang-sep{height:18px} .mm-lang-sep--lead{margin-right:2px} /* ---------- Panneau méga ---------- */ .mm-inner{background:#fff;border:1px solid var(--mm-border);border-radius:var(--mm-radius); box-shadow:0 24px 48px -8px rgba(10,26,107,.16);padding:36px 40px;display:flex;gap:40px;align-items:flex-start} .mm-main{flex:1;min-width:0} .mm-head{margin-bottom:22px} .mm-kicker{display:block;text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:12px;color:var(--mm-teal);margin-bottom:6px} .mm-heading{margin:0;font-size:20px;font-weight:600;color:var(--mm-dark)} .mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 24px} /* Carte item */ .mm-card{display:flex;align-items:center;gap:14px;padding:9px 12px;border-radius:12px;text-decoration:none;transition:background .15s} .mm-card:hover{background:var(--mm-tint-navy)} .mm-card:hover .mm-card-title{color:var(--mm-navy)} .mm-vig{flex:0 0 auto;width:46px;height:46px;border-radius:14px;overflow:hidden;position:relative;display:block;background:var(--mm-tint-navy)} .mm-vig img{width:100%;height:100%;object-fit:cover;display:block} .mm-card-title{display:block;font-size:15px;font-weight:500;color:var(--mm-dark);line-height:1.28} .mm-card-sub{display:block;font-size:13px;color:var(--mm-body);margin-top:2px;line-height:1.3} /* Vignette placeholder (motif molécule) */ .mm-vig--ph::before,.mm-vig--ph::after{content:"";position:absolute;border-radius:50%} .mm-vig--ph::before{width:15px;height:15px;left:9px;top:11px} .mm-vig--ph::after{width:11px;height:11px;left:24px;top:21px;opacity:.55} .mm-vig--mag{background:var(--mm-tint-mag)} .mm-vig--mag::before,.mm-vig--mag::after{background:var(--mm-mag)} .mm-vig--teal{background:var(--mm-tint-teal)} .mm-vig--teal::before,.mm-vig--teal::after{background:var(--mm-teal)} .mm-vig--navy{background:var(--mm-tint-navy)} .mm-vig--navy::before,.mm-vig--navy::after{background:var(--mm-navy)} /* ---------- Familles ---------- */ .mm-fams{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start} .mm-fam{min-width:0} .mm-fam-head{display:flex;align-items:center;gap:12px;text-decoration:none;padding:0 0 12px;border-bottom:1px solid var(--mm-border);margin-bottom:8px} .mm-fam-tb{display:flex;flex-direction:column;gap:1px;min-width:0} .mm-fam-title{font-size:16.5px;font-weight:700;color:var(--mm-navy);line-height:1.2} .mm-fam-count{font-size:12.5px;font-weight:500;color:var(--mm-teal)} .mm-fam-list{display:flex;flex-direction:column;gap:2px} /* ---------- Colonne visuelle ---------- */ .mm-photo{flex:0 0 312px;width:312px;align-self:stretch;min-height:340px;border-radius:16px;padding:26px;color:#fff; display:flex;flex-direction:column;justify-content:flex-end;gap:14px;overflow:hidden} .mm-photo--vignettes{background:linear-gradient(150deg,var(--mm-navy),var(--mm-teal))} .mm-photo--familles{background:linear-gradient(150deg,var(--mm-mag),var(--mm-navy))} .mm-photo-tag{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:700;opacity:.85} .mm-photo-title{margin:0;font-size:22px;font-weight:600;line-height:1.2} .mm-photo-text{margin:0;font-size:14px;opacity:.92;line-height:1.4} .mm-photo-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--mm-navy); text-decoration:none;font-weight:600;font-size:14px;padding:12px 22px;border-radius:200px;margin-top:4px;transition:transform .15s} .mm-photo-cta:hover{transform:translateY(-1px)} /* ---------- Boutons CTA navbar ---------- */ .mm-cta{display:inline-flex;align-items:center;gap:10px;background:var(--mm-navy);color:#fff;text-decoration:none; font-weight:500;font-size:16px;padding:13px 30px;border-radius:200px;white-space:nowrap;transition:opacity .15s} .mm-cta:hover{opacity:.92} .mm-arrow{font-size:1em;line-height:1} /* ---------- Burger / drawer (états mobiles, cachés par défaut) ---------- */ .mm-burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;border:0;background:var(--mm-panel); border-radius:12px;cursor:pointer;align-items:center;justify-content:center;margin-left:auto} .mm-burger span{display:block;width:20px;height:2.4px;background:var(--mm-navy);border-radius:2px;transition:.2s} .mm-drawer-head,.mm-close,.mm-cta--mobile{display:none} /* ========================================================================= MODE "INLINE" (auto-remplacement du menu Divi : pas de logo/burger/CTA, on s'insère à la place du