/* ==========================================================
   melaniem.fr — correctifs responsive (13/10/2026)
   1. Étoiles flottantes : elles flottent toujours, sans couvrir les textes
   2. Menu mobile : barre de liens défilante + menu burger
   ========================================================== */

/* ---------- 1. Étoiles flottantes ---------- */

img.animate-float-star { pointer-events: none; }

/* Accueil — la signature « Mélanie » et son étoile flottante, puis le slogan en très grand */
.mm-signature { position: relative; width: clamp(260px, 74vw, 660px); margin-left: -2%; }
.mm-signature__name { display: block; width: 100%; height: auto; }
.mm-signature__star { position: absolute; left: 80.5%; top: -1%; width: 17%; height: auto; pointer-events: none; }
h1.mm-hero-title { margin-top: .25rem; }
@media (max-width: 639.98px) {
  h1.mm-hero-title { font-size: min(3.75rem, 14vw); line-height: .95; letter-spacing: -.035em; }
}
@media (min-width: 1024px) {
  h1.mm-hero-title { font-size: min(7.75rem, 8.6vw); line-height: .92; letter-spacing: -.035em; }
}

/* Accueil — grand encadré « Ensemble, atteignons les étoiles » */
.rounded-3xl.border-2 > h2 { max-width: min(48rem, calc(100% - 5.5rem)); }
@media (max-width: 639.98px) {
  .rounded-3xl.border-2 > img.animate-float-star {
    width: 6.5rem; height: 6.5rem; top: -1rem; right: -1rem;
  }
  .rounded-3xl.border-2 > .eyebrow { padding-right: 4.25rem; }
  .rounded-3xl.border-2 > h2 { max-width: none; }
}

/* Encadré de fin de page « Partagez-moi votre projet », « Envie de vous former ? »... */
@media (max-width: 1023.98px) {
  .rounded-3xl.text-center:has(> img.animate-float-star) { padding-top: 5.5rem; }
  .rounded-3xl.text-center > img.animate-float-star {
    top: 1.25rem; right: 50%; margin-right: -1.75rem;
  }
}

/* Consulting — titre « Des formations alignées avec vos enjeux » */
div.relative:has(> img.animate-float-star.right-0.top-0) > h2 { padding-right: 3rem; }
@media (min-width: 1024px) {
  div.relative:has(> img.animate-float-star.right-0.top-0) > h2 { padding-right: 5rem; }
}

/* Contact — carte jaune « Directement » */
.overflow-hidden > img.animate-float-star.-right-4 ~ h3 { padding-right: 4rem; }

/* ---------- Logos « Ils m'ont fait confiance » ----------
   Ordinateur : inchangé (80 % puis pleine couleur au survol).
   Mobile et tablette (pas de survol possible) : pleine couleur d'emblée. */
@media (max-width: 1023.98px), (hover: none) {
  img.opacity-80[src*="/images/logo-"] { opacity: 1; }
}

/* ---------- 2. Menu mobile ---------- */

.mm-burger, .mm-strip, .mm-menu { display: none; }

@media (max-width: 767.98px) {
  header.sticky > div { flex-wrap: wrap; row-gap: 0; padding-top: .625rem; padding-bottom: 0; }
  header.sticky > div > a:first-child { margin-right: auto; }
  /* Place réservée à la barre de liens pendant le chargement (évite que la page saute) */
  header.sticky > div:not(:has(.mm-strip)) { padding-bottom: 2.75rem; }
  header.sticky nav { flex-wrap: nowrap; gap: .875rem; }
  header.sticky nav > a.link-underline { display: none; }
  header.sticky nav svg { width: 1.125rem; height: 1.125rem; }

  /* Bouton burger */
  .mm-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; margin-left: .25rem; margin-right: -.5rem;
    border: 0; background: transparent; color: var(--foreground);
    border-radius: 999px; cursor: pointer;
  }
  .mm-burger:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
  .mm-burger span, .mm-burger span::before, .mm-burger span::after {
    display: block; width: 1.25rem; height: 2px; border-radius: 2px;
    background: currentColor; position: relative;
  }
  .mm-burger span::before, .mm-burger span::after { content: ""; position: absolute; left: 0; }
  .mm-burger span::before { top: -6px; }
  .mm-burger span::after { top: 6px; }

  /* Barre de liens défilante (le menu « normal ») */
  .mm-strip {
    display: flex; flex: 0 0 100%; order: 10; gap: 1.25rem;
    margin: .375rem -1rem 0; padding: .5rem 1rem .625rem;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    font-size: .8125rem; white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
            mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .mm-strip::-webkit-scrollbar { display: none; }
  .mm-strip a { color: color-mix(in oklab, var(--foreground) 80%, transparent); text-decoration: none; padding: .125rem 0; position: relative; }
  .mm-strip a[aria-current="page"] { color: var(--foreground); }
  .mm-strip a[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--sun); border-radius: 2px;
  }
  .mm-strip a:last-child { padding-right: 1.5rem; }

  /* Panneau du menu burger */
  .mm-menu {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 100;
    background: var(--background); color: var(--foreground);
    padding: 1rem 1.5rem 2rem; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-.75rem);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .mm-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
  .mm-menu__top { display: flex; align-items: center; justify-content: space-between; }
  .mm-menu__top img { width: 6rem; height: auto; }
  .mm-close {
    width: 2.5rem; height: 2.5rem; margin-right: -.5rem; border: 0; background: transparent;
    color: var(--foreground); font-size: 1.75rem; line-height: 1; cursor: pointer; border-radius: 999px;
  }
  .mm-close:focus-visible, .mm-menu a:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
  .mm-menu__links { list-style: none; margin: 2.5rem 0 0; padding: 0; }
  .mm-menu__links li + li { border-top: 1px solid var(--border); }
  .mm-menu__links a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .875rem 0; font-size: 1.75rem; color: var(--foreground); text-decoration: none;
  }
  .mm-menu__links a::after { content: "→"; font-size: 1.125rem; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
  .mm-menu__links a[aria-current="page"] { font-style: italic; }
  .mm-menu__links a[aria-current="page"]::after { content: "★"; color: var(--sun); }
  .mm-menu__contact {
    margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem;
  }
  .mm-menu__contact a {
    display: inline-flex; align-items: center; gap: .5rem;
    border-radius: 999px; padding: .75rem 1.25rem; font-size: .875rem; font-weight: 600; text-decoration: none;
    border: 1px solid color-mix(in oklab, var(--foreground) 30%, transparent); color: var(--foreground);
  }
  .mm-menu__contact a.mm-primary { background: var(--sun); border-color: var(--sun); color: #fff; }
  .mm-menu__social { margin-top: 1.5rem; display: flex; gap: 1.25rem; font-size: .875rem; }
  .mm-menu__social a { color: color-mix(in oklab, var(--foreground) 70%, transparent); }
  /* L'étoile du logo flotte aussi dans le menu, dans un coin libre */
  .mm-menu__star { margin: auto 0 0 auto; padding-top: 2rem; width: 4.5rem; height: auto; }

  html.mm-lock, html.mm-lock body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-menu, .mm-menu.is-open { transition: none; }
  .animate-float-star { animation: none !important; }
}