/* Menu « Modèle A — plein écran éditorial » (choisi par la propriétaire le 11/10/2026 parmi
   4 maquettes). Remplace l'ancien tiroir à droite. Appelé par un <link> dans chaque page, juste avant
   css/style.css ou css/entete-site.css (Espace mannequin) : une seule copie pour tout le site.
   Le contenu du menu vient de js/gabarit.js ; js/menu.js ajoute Femmes / Hommes sous
   The Book et le bloc contact (téléphones, réseaux). */

html body .menu-overlay {
  inset: 0 !important; width: 100% !important; max-width: none !important;
  background: radial-gradient(120% 80% at 85% 0%, #3a0c13 0%, #060606 58%) !important;
  border: 0 !important; box-shadow: none !important;
  padding: 6rem clamp(22px, 6vw, 80px) 2.2rem !important;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-start;
  transform: none !important;
  opacity: 1 !important; visibility: hidden;
  /* ouverture : un cercle part du bouton Menu (en haut à droite) et couvre tout l'écran ;
     à la fermeture, il se referme vers le bouton */
  clip-path: circle(0 at calc(100% - 52px) 42px);
  transition: clip-path 0.7s cubic-bezier(.7,0,.2,1), visibility 0.7s !important;
}
html body .menu-overlay.active { visibility: visible; clip-path: circle(150% at calc(100% - 52px) 42px); }

/* logo en haut à gauche, rond de fermeture en haut à droite (repris de l'ancien tiroir) */
html body .menu-overlay::before { top: 1.6rem !important; left: clamp(22px, 6vw, 80px) !important; }
html body .menu-overlay .close-menu { top: 1.3rem !important; right: clamp(18px, 6vw, 76px) !important; }

html body .menu-overlay .nav-links {
  display: flex !important; flex-direction: column; counter-reset: rubrique;
  width: 100%; max-width: 760px; margin: 0 auto !important; text-align: left;
}
/* Animation d'ouverture, en trois temps après le cercle (11/10/2026, « plus poussée ») :
   1. chaque rubrique surgit d'en bas en se redressant, l'une après l'autre ;
   2. son numéro glisse depuis la gauche ;
   3. le filet rouge sous la rubrique se dessine de gauche à droite.
   À la fermeture, tout repart d'un coup (pas de délai). */
html body .menu-overlay .nav-links li { position: relative; border: 0 !important; margin: 0 !important; opacity: 0; filter: blur(10px); transform: translate(-46px, 30px) skewX(-8deg) !important; transform-origin: left bottom; transition: opacity 0.5s ease, transform 0.25s ease, filter 0.25s ease !important; }
html body .menu-overlay.active .nav-links li { opacity: 1; filter: none; transform: none !important; transition: opacity 0.7s ease, transform 1s cubic-bezier(.16,1,.3,1), filter 0.8s ease !important; transition-delay: calc(0.3s + 0.06s * var(--rang, 1)) !important; }
/* grand filigrane « MA2M » qui traverse lentement le fond à l'ouverture (12/10/2026) */
html body .menu-overlay::after {
  content: 'MA2M'; position: fixed; right: -4vw; bottom: -3vw; z-index: 0; pointer-events: none;
  font: 400 clamp(8rem, 38vw, 26rem)/0.8 var(--display); letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(213,84,104,0.16);
  opacity: 0; transform: translateX(18%); transition: opacity 0.3s ease, transform 0.3s ease;
}
html body .menu-overlay.active::after { opacity: 1; transform: none; transition: opacity 1.4s ease 0.25s, transform 2.6s cubic-bezier(.16,1,.3,1) 0.25s; }
html body .menu-overlay .nav-links, html body .menu-overlay .menu-contact { position: relative; z-index: 1; }
html body .menu-overlay .nav-links li:not(.menu-sous):not(.item-cta):not(.menu-rejoindre):not(.item-marketplace)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--bordeaux-clair, #d55468), rgba(255,255,255,0.08) 60%);
  transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease;
}
html body .menu-overlay.active .nav-links li::after { transform: scaleX(1); transition: transform 0.9s cubic-bezier(.65,0,.35,1) calc(0.6s + 0.07s * var(--rang, 1)); }
html body .menu-overlay .nav-links li a::before { opacity: 0; transform: translateX(-18px); }
html body .menu-overlay.active .nav-links li a::before { opacity: 1; transform: none; transition: opacity 0.5s ease calc(0.55s + 0.07s * var(--rang, 1)), transform 0.6s cubic-bezier(.16,1,.3,1) calc(0.55s + 0.07s * var(--rang, 1)) !important; }
/* logo, bouton de fermeture (qui tourne) et bloc contact arrivent avec le menu */
html body .menu-overlay::before, html body .menu-overlay .close-menu, html body .menu-overlay .menu-contact { opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease !important; }
html body .menu-overlay .close-menu { transform: rotate(-90deg) scale(0.6); }
html body .menu-overlay .menu-contact { transform: translateY(24px); }
html body .menu-overlay.active::before { opacity: 1; transition: opacity 0.6s ease 0.3s !important; }
html body .menu-overlay.active .close-menu { opacity: 1; transform: none; transition: opacity 0.5s ease 0.35s, transform 0.8s cubic-bezier(.16,1,.3,1) 0.35s !important; }
html body .menu-overlay.active .menu-contact { opacity: 1; transform: none; transition: opacity 0.7s ease 1.1s, transform 0.9s cubic-bezier(.16,1,.3,1) 1.1s !important; }

/* rubriques : grands titres numérotés 01, 02, 03… */
html body .menu-overlay .nav-links li:not(.menu-sous):not(.item-cta):not(.menu-rejoindre):not(.item-marketplace) { counter-increment: rubrique; }
html body .menu-overlay .nav-links li a {
  display: flex !important; align-items: baseline; gap: 14px; justify-content: flex-start !important;
  /* même police et même taille que le bouton « Espace mannequin de l'agence » (12/10/2026) */
  padding: 1.05rem 0 !important; border-radius: 0 !important;
  font-family: var(--texte) !important; font-weight: 500 !important;
  font-size: 0.95rem !important; line-height: 1.3 !important;
  text-transform: uppercase !important; letter-spacing: 0.16em !important;
  color: var(--titre-clair, #f5efe7) !important;
  /* appui : un voile rouge se remplit de gauche à droite et la rubrique glisse */
  background: linear-gradient(90deg, rgba(122,18,32,0.55), rgba(122,18,32,0)) no-repeat left / 0% 100% !important;
  transition: color 0.3s ease, letter-spacing 0.4s ease, background-size 0.45s cubic-bezier(.16,1,.3,1), transform 0.35s cubic-bezier(.16,1,.3,1), padding-left 0.35s ease !important;
}
html body .menu-overlay .nav-links li:not(.item-cta):not(.menu-rejoindre) a:active,
html body .menu-overlay .nav-links li:not(.item-cta):not(.menu-rejoindre) a.appui {
  background-size: 100% 100% !important; padding-left: 0.7rem !important; color: #fff !important;
  transition-duration: 0.18s !important;
}
html body .menu-overlay .nav-links li.item-cta a:active, html body .menu-overlay .nav-links li.item-cta a.appui,
html body .menu-overlay .nav-links li.menu-rejoindre a:active, html body .menu-overlay .nav-links li.menu-rejoindre a.appui {
  transform: scale(0.96); box-shadow: 0 0 0 6px rgba(213,84,104,0.25) !important; transition-duration: 0.15s !important;
}
html body .menu-overlay .nav-links li:not(.menu-sous):not(.item-cta):not(.menu-rejoindre):not(.item-marketplace) a::before {
  content: counter(rubrique, decimal-leading-zero) !important; position: static !important;
  width: auto !important; background: none !important;
  font: 500 0.8rem var(--texte); letter-spacing: 0.1em; color: var(--bordeaux-clair, #d55468);
  min-width: 1.8rem; transition: opacity 0.2s ease, transform 0.2s ease;
}
html body .menu-overlay .nav-links li a::after { content: none !important; }
@media (hover: hover) {
  html body .menu-overlay .nav-links li:not(.item-cta):not(.menu-rejoindre) a:hover { color: var(--bordeaux-clair, #d55468) !important; letter-spacing: 0.2em !important; background-size: 100% 100% !important; }
  html body .menu-overlay .nav-links li a:hover::before { transform: translateX(6px); transition: transform 0.3s ease !important; }
}
html body .menu-overlay .nav-links li a.actif { color: var(--bordeaux-clair, #d55468) !important; font-style: normal !important; background: none !important; }

/* « Marketplace » (administratrices seulement, ajouté par js/menu.js) : non numéroté, en rouge */
html body .menu-overlay .nav-links li.item-marketplace a { color: var(--bordeaux-clair, #d55468) !important; }

/* Femmes / Hommes : petits liens sous The Book */
html body .menu-overlay .nav-links li.menu-sous { border: 0 !important; }
html body .menu-overlay .nav-links li.menu-sous a {
  font-family: var(--texte) !important; font-size: 0.78rem !important; text-transform: uppercase !important;
  letter-spacing: 0.18em !important; color: var(--texte-doux, #948c85) !important;
  padding: 0.4rem 0 0.4rem 3.1rem !important;
}

/* « Intégrer l'agence » : grand bouton rouge ; « Espace mannequin » : bouton en contour */
html body .menu-overlay .nav-links li.menu-rejoindre { order: 90; margin-top: 1.6rem !important; }
html body .menu-overlay .nav-links li.item-cta { order: 91; margin-top: 0.7rem !important; }
html body .menu-overlay .nav-links li.menu-rejoindre a,
html body .menu-overlay .nav-links li.item-cta a {
  justify-content: center !important; border-radius: 999px !important; padding: 1.05rem 1rem !important;
  font-family: var(--texte) !important; font-size: 0.95rem !important; font-weight: 500 !important;
  letter-spacing: 0.16em !important; font-style: normal !important;
}
html body .menu-overlay .nav-links li.menu-rejoindre a { background: var(--bordeaux, #7a1220) !important; color: #fff !important; }
html body .menu-overlay .nav-links li.item-cta a { border: 1px solid rgba(255,255,255,0.22) !important; color: var(--titre-clair, #f5efe7) !important; }
@media (hover: hover) {
  html body .menu-overlay .nav-links li.menu-rejoindre a:hover { background: var(--bordeaux-vif, #9c1c2c) !important; color: #fff !important; }
  html body .menu-overlay .nav-links li.item-cta a:hover { border-color: var(--bordeaux-clair, #d55468) !important; }
}

/* contact et réseaux en bas */
html body .menu-overlay .menu-contact { width: 100%; max-width: 760px; margin: 2rem auto 0 !important; text-align: left !important; font-size: 0.85rem; color: var(--texte-doux, #948c85); }
html body .menu-overlay .menu-reseaux { justify-content: flex-start !important; }

/* Grand écran : deux colonnes de très grands titres, le menu tient sur une seule page */
@media (min-width: 1024px) {
  html body .menu-overlay .nav-links { display: block !important; columns: 2; column-gap: 5rem; max-width: 1240px; }
  html body .menu-overlay .nav-links li { break-inside: avoid; }
  html body .menu-overlay .menu-contact { max-width: 1240px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .menu-overlay, html body .menu-overlay .nav-links li, html body .menu-overlay .nav-links li::after,
  html body .menu-overlay .nav-links li a::before, html body .menu-overlay::before, html body .menu-overlay::after,
  html body .menu-overlay .close-menu, html body .menu-overlay .menu-contact { transition: none !important; }
}
html body .menu-overlay .nav-links li.item-cta a::before,
html body .menu-overlay .nav-links li.menu-rejoindre a::before { content: none !important; }