/* Extrait de inclure/tabbar.html : feuille du composant, appelée par <link> à son emplacement (HTML valide dans le body) */
/* Styles du panneau plein écran (.mb27-overlay) — repris à l'identique de menu-barre.html,
   qui les définit dans son propre <style> (absents de citron.css). */
.mb27-overlay{position:fixed;inset:0;z-index:1040;
  background:
    radial-gradient(120% 120% at 85% 0%,rgba(0,104,149,.55),transparent 55%),
    radial-gradient(120% 120% at 0% 100%,rgba(233,108,37,.42),transparent 50%),
    linear-gradient(135deg,#0055A4 0%,var(--fdc-bleu-nuit) 100%);
  clip-path:circle(0% at calc(100% - 48px) 40px);transition:clip-path .6s cubic-bezier(.76,0,.24,1);visibility:hidden;
  display:flex;flex-direction:column;padding:84px clamp(22px,6vw,80px) 36px;overflow-y:auto}
body.mb27-open .mb27-overlay{clip-path:circle(150% at calc(100% - 48px) 40px);visibility:visible}

.mb27-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex:none;
  width:100%;max-width:1200px;margin:0 auto;padding:0 12px 16px;border-bottom:1px solid rgba(255,255,255,.20)}
.mb27-eyebrow{font-family:'CaviarDreamsBold',Arial,sans-serif;text-transform:uppercase;letter-spacing:.24em;font-size:.72rem;color:var(--fdc-jaune)}
.mb27-dates{font-family:'CaviarDreamsBold',Arial,sans-serif;color:#fff;font-size:clamp(1rem,1.8vw,1.3rem);letter-spacing:.04em;white-space:nowrap;margin-right:auto;margin-left:12px}
.mb27-close{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s,border-color .2s}
.mb27-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.mb27-close:hover,.mb27-close:focus-visible{background:var(--fdc-jaune);border-color:var(--fdc-jaune);color:var(--fdc-bleu-nuit);outline:none}

.mb27-overlay-inner{flex:1;display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(24px,5vw,72px);align-content:center;
  width:100%;max-width:1200px;margin:0 auto}

.mb27-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mb27-nav li{border-bottom:1px solid rgba(255,255,255,.14);opacity:0;transform:translateY(22px);transition:opacity .5s,transform .5s}
.mb27-nav li:last-child{border-bottom:none}
body.mb27-open .mb27-nav li{opacity:1;transform:none}
.mb27-nav li:nth-child(1){transition-delay:.06s}
.mb27-nav li:nth-child(2){transition-delay:.10s}
.mb27-nav li:nth-child(3){transition-delay:.14s}
.mb27-nav li:nth-child(4){transition-delay:.18s}
.mb27-nav li:nth-child(5){transition-delay:.22s}
.mb27-nav li:nth-child(6){transition-delay:.26s}
.mb27-nav li:nth-child(7){transition-delay:.30s}
.mb27-nav li:nth-child(8){transition-delay:.34s}
.mb27-nav li:nth-child(9){transition-delay:.38s}
.mb27-nav li:nth-child(10){transition-delay:.42s}
.mb27-nav li:nth-child(11){transition-delay:.46s}
.mb27-nav li:nth-child(12){transition-delay:.50s}
.mb27-nav a{position:relative;display:flex;align-items:baseline;gap:20px;font-family:'CaviarDreamsBold',Arial,sans-serif;font-weight:normal;text-transform:uppercase;text-decoration:none;color:#fff;letter-spacing:.03em;font-size:clamp(1.1rem,2.6vw,2rem);line-height:1.05;padding:13px 12px;transition:color .25s,transform .3s cubic-bezier(.76,0,.24,1)}
.mb27-nav a .idx{font-family:'CaviarDreamsBold',Arial,sans-serif;font-size:.4em;font-weight:normal;color:var(--fdc-jaune);min-width:2.6em;letter-spacing:.1em;transition:color .25s}
.mb27-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;background:var(--fdc-jaune);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.76,0,.24,1)}
.mb27-nav a:hover,.mb27-nav a:focus-visible{color:var(--fdc-jaune);transform:translateX(12px);outline:none}
.mb27-nav a:hover .idx,.mb27-nav a:focus-visible .idx{color:#fff}
.mb27-nav a:hover::after,.mb27-nav a:focus-visible::after{transform:scaleX(1)}

.mb27-side{opacity:0;transform:translateY(22px);transition:opacity .6s .28s,transform .6s .28s;display:flex;flex-direction:column;gap:16px}
body.mb27-open .mb27-side{opacity:1;transform:none}
.mb27-kicker{font-family:'CaviarDreamsBold',Arial,sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--fdc-jaune);padding-bottom:6px;border-bottom:2px solid rgba(252,212,43,.45);align-self:flex-start}
.mb27-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mb27-alert{padding:16px;font-size:.9rem;line-height:1.45;color:#eaf1fb}
.mb27-alert p{margin:0;color:#eaf1fb}
.mb27-alert a{color:var(--fdc-jaune);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.mb27-zou{display:block;border-radius:16px;overflow:hidden;line-height:0;box-shadow:0 16px 36px rgba(0,0,0,.45)}
.mb27-zou img{width:100%;height:auto;display:block}

@media (prefers-reduced-motion:reduce){.mb27-overlay,.mb27-nav li,.mb27-side{transition:none}}
@media (max-width:860px){
  .mb27-overlay-inner{grid-template-columns:1fr;gap:24px;align-content:start}
  .mb27-side{order:2}
  .mb27-nav{order:1}
  .mb27-nav a{font-size:clamp(1.1rem,6vw,1.6rem)}
  .mb27-dates{font-size:.9rem}
}
#app-tabbar-plus[aria-expanded="true"]{color:var(--fdc-bleu-nuit)}