/* ============================================================
   MADEMOISELLE TRÉSORS — Bandeau d'annonce (vacances / absence)
   Shortcode [mt_vacation]. À poser juste sous le header.
   Classes non scopées (comme le FAB) → marche partout.
   ============================================================ */
.mt-annonce{
  position:relative;overflow:hidden;
  background:linear-gradient(90deg,#0c0c11 0%,#15151f 50%,#0c0c11 100%);
  border-top:1px solid var(--mt-line);border-bottom:1px solid var(--mt-line);
  color:#f4f1ea;font-family:'Montserrat',sans-serif;
}
.mt-annonce[hidden]{display:none}
.mt-annonce-inner{
  max-width:95vw;margin:0 auto;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:11px 52px 11px 22px;text-align:center;position:relative;z-index:2;
}
.mt-annonce .ic{display:inline-grid;place-items:center;color:var(--mt-gold);flex:none}
.mt-annonce .ic svg{width:19px;height:19px}
.mt-annonce .lbl{
  font-size:.64rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mt-gold);white-space:nowrap;
}
.mt-annonce .sep{width:5px;height:5px;border-radius:50%;background:var(--mt-gold);opacity:.5;flex:none}
.mt-annonce .msg{font-size:.87rem;letter-spacing:.02em;color:#e9e5db;line-height:1.4}
.mt-annonce .msg b{color:#fff;font-weight:600}
.mt-annonce .msg .dates{color:var(--mt-gold);font-weight:600;white-space:nowrap}

/* reflet doré qui balaie doucement */
.mt-annonce::before{
  content:"";position:absolute;top:0;left:-45%;width:45%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(229,192,104,.10),transparent);
  animation:mtAnnonceShine 7s ease-in-out infinite;
}
@keyframes mtAnnonceShine{0%{left:-45%}55%,100%{left:135%}}

/* fermeture */
.mt-annonce-x{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:3;
  background:none;border:0;color:#8f8a80;cursor:pointer;width:28px;height:28px;
  display:grid;place-items:center;border-radius:50%;font-size:.95rem;line-height:1;transition:.25s;
}
.mt-annonce-x:hover{color:var(--mt-gold);background:rgba(229,192,104,.08)}

@media(max-width:640px){
  .mt-annonce-inner{flex-wrap:wrap;gap:6px 10px;padding:10px 44px 10px 16px}
  .mt-annonce .lbl{order:-1;width:100%}
  .mt-annonce .sep{display:none}
  .mt-annonce .msg{font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){.mt-annonce::before{display:none}}

/* ============================================================
   [mt_annonce] — couleur d'accent par type + bouton CTA
   Accent piloté par la variable --acc (défaut : or).
   ============================================================ */
.mt-annonce{--acc:var(--mt-gold)}
.mt-annonce .ic{color:var(--acc)}
.mt-annonce .lbl{color:var(--acc)}
.mt-annonce .sep{background:var(--acc)}
.mt-annonce .msg .dates{color:var(--acc)}
.mt-annonce::before{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 22%,transparent),transparent)}

/* bouton d'action (CTA) optionnel */
.mt-annonce-cta{display:inline-flex;align-items:center;gap:.4em;margin-left:4px;padding:.5em 1.05em;
  border-radius:100px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;color:#161616;background:var(--acc);text-decoration:none;flex:none;
  transition:transform .3s var(--mt-ease),box-shadow .3s var(--mt-ease)}
.mt-annonce-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--acc) 70%,transparent)}
.mt-annonce-cta svg{width:13px;height:13px}

/* type « live » : pastille pulsante */
.mt-annonce.type-live .ic{position:relative}
.mt-annonce.type-live .ic::after{content:"";position:absolute;top:-2px;right:-2px;width:7px;height:7px;
  border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 60%,transparent);
  animation:mtAnnLive 1.8s ease-out infinite}
@keyframes mtAnnLive{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 55%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

@media(max-width:640px){
  .mt-annonce-inner{padding-right:44px}
  .mt-annonce-cta{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.mt-annonce.type-live .ic::after{animation:none}}

/* ============================================================
   Bandeau AUTO (Personnalisateur) : fixe en haut, le header et
   le contenu se décalent de sa hauteur (--mt-annonce-h, posée en JS).
   ============================================================ */
.mt-annonce.is-fixed{position:fixed;top:0;left:0;right:0;z-index:96}
.mt-root .header{top:var(--mt-annonce-h,0px)}
body{padding-top:var(--mt-annonce-h,0px)}

/* ============================================================
   TYPE « LADY » — style repris de la carte Lady Pineapple
   (collabs). Couleurs pink/violet/gold, Syne + Space Grotesk.
   ============================================================ */
.mt-annonce.type-lady{
  --acc:#ff5cae;
  font-family:'Space Grotesk',system-ui,sans-serif;
  color:#fdf0f8;
  border-top-color:transparent;border-bottom-color:transparent;
  background:
    radial-gradient(120% 220% at 12% 0%,rgba(255,92,174,.30),transparent 55%),
    radial-gradient(120% 220% at 88% 100%,rgba(199,125,255,.28),transparent 55%),
    radial-gradient(90% 160% at 62% 20%,rgba(255,205,0,.16),transparent 55%),
    #100a14;
}
/* bord dégradé pink → gold → violet (haut & bas) */
.mt-annonce.type-lady::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;padding:1px;
  background:linear-gradient(120deg,rgba(255,92,174,.75),rgba(255,205,0,.6),rgba(199,125,255,.75));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* reflet doré */
.mt-annonce.type-lady::before{background:linear-gradient(90deg,transparent,rgba(255,205,0,.14),transparent)}

/* icône couronne dorée */
.mt-annonce.type-lady .ic{color:#ffcd00;width:30px;height:30px}
.mt-annonce.type-lady .ic .mt-ananas{width:30px;height:30px;object-fit:contain;
  filter:drop-shadow(0 3px 10px rgba(255,205,0,.45)) drop-shadow(0 0 14px rgba(255,92,174,.4));
  animation:mtAnanasBob 5s ease-in-out infinite}
@keyframes mtAnanasBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* libellé = nom brillant (Syne 800) */
.mt-annonce.type-lady .lbl{
  font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(1rem,2.6vw,1.22rem);
  letter-spacing:.01em;line-height:1;text-transform:none;
  background:linear-gradient(110deg,#ff5cae,#e6c4ff 45%,#ffcd00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;animation:lp-shine 6s linear infinite;
  filter:drop-shadow(0 1px 8px rgba(255,92,174,.35));
}
@keyframes lp-shine{0%{background-position:-200% 0}100%{background-position:200% 0}}

.mt-annonce.type-lady .sep{background:#ff5cae;opacity:.7}
.mt-annonce.type-lady .msg{font-family:'Space Grotesk',sans-serif;color:#fdf0f8}
.mt-annonce.type-lady .msg b{color:#fff}
.mt-annonce.type-lady .msg .dates{color:#ffcd00;font-weight:600}

/* CTA doré vitré (comme .lp-cta) */
.mt-annonce.type-lady .mt-annonce-cta{
  font-family:'Syne',sans-serif;font-weight:800;color:#ffe9ac;
  background:linear-gradient(135deg,rgba(255,205,0,.34),rgba(255,179,0,.2));
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,205,0,.7);
  box-shadow:0 10px 26px rgba(255,205,0,.35),inset 0 0 0 1px rgba(255,255,255,.12);
}
.mt-annonce.type-lady .mt-annonce-cta:hover{transform:scale(1.05);box-shadow:0 14px 30px rgba(255,205,0,.45),inset 0 0 0 1px rgba(255,255,255,.16)}

/* croix de fermeture rose clair */
.mt-annonce.type-lady .mt-annonce-x{color:#ffb0dc}
.mt-annonce.type-lady .mt-annonce-x:hover{color:#fff;background:rgba(255,92,174,.15)}

@media(prefers-reduced-motion:reduce){.mt-annonce.type-lady .lbl{animation:none}}


/* responsive du bandeau Lady */
@media(max-width:640px){
  .mt-annonce.type-lady .mt-annonce-inner{flex-direction:column;gap:8px;padding:12px 44px 12px 16px}
  .mt-annonce.type-lady .lbl{order:-1;width:auto;font-size:1.18rem}
  .mt-annonce.type-lady .ic{order:-2}
  .mt-annonce.type-lady .msg{font-size:.86rem;line-height:1.45}
  .mt-annonce.type-lady .mt-annonce-cta{margin-top:2px}
}
@media(prefers-reduced-motion:reduce){.mt-annonce.type-lady .ic .mt-ananas{animation:none}}
/* le menu mobile plein écran doit couvrir le bandeau d'annonce */
.mt-root .mobile-menu{z-index:97}

/* Quand le menu plein écran (ou une modale) est ouvert, on masque le
   bandeau fixe : le body reçoit .locked → le menu passe au-dessus. */
body.locked .mt-annonce.is-fixed{display:none}