/* Menu commun (inspiré de cominvi.com.mx) :
   barre fixe « Sanlé Sory · Menu ◯ » ; à l'ouverture, la page glisse vers le bas
   en carte arrondie et découvre le panneau des liens. */
:root {
  /* Échelle typographique commune à tout le site */
  --t-titre: clamp(2.6rem, 6.4vw, 7rem);     /* h1 des pages */
  --t-rubrique: clamp(1.8rem, 3.2vw, 3.4rem); /* intitulés, repères, email */
  --t-texte: clamp(19px, 1.75vw, 28px);       /* textes et listes (Archivo Black) */
  --t-info: clamp(15px, 1.15vw, 19px);        /* lieux, dates, villes (Archivo 500) */
  --t-petit: clamp(12px, 1.25vw, 18px);       /* menu, pied, mentions */
  --filet: 2px;                               /* épaisseur de tous les filets */
  --menu-panneau: #111;          /* fond du panneau */
  /* Motif du fond du menu (images/motif_menu.jpg, 146 px affiché à 73 px : net sur Retina) */
  --menu-motif: url("images/motif_menu.jpg");
  --menu-motif-taille: 73px;
  --menu-texte: #000;            /* couleur de la barre, menu fermé (redéfinie par page) */
  --menu-fond-barre: transparent;
  --menu-pad: clamp(12px, 1.6vw, 22px);
  --menu-cote: clamp(24px, 7vw, 128px); /* = marges des pages intérieures */
  --menu-bouton: 44px;
  --menu-ease: cubic-bezier(.7, 0, .2, 1);
  --menu-duree: .8s;
}

/* Page : carte qui glisse */
.page {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fond, #fff);
  transform-origin: 50% var(--menu-y, 0px);
  transition: transform var(--menu-duree) var(--menu-ease), clip-path var(--menu-duree) var(--menu-ease);
  clip-path: inset(var(--menu-y, 0px) 0 0 0 round 0);
}
.menu-actif .page {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--menu-y, 0px) * -1);
  cursor: pointer;
}
.menu-ouvert .page {
  transform: translateY(var(--menu-h, 240px)) scale(var(--menu-echelle, .96));
  clip-path: inset(var(--menu-y, 0px) 0 0 0 round 16px);
}
.menu-actif .page > * { pointer-events: none; }
html.menu-actif, .menu-actif body {
  background: var(--menu-motif) 0 0 / var(--menu-motif-taille) fixed, var(--menu-panneau);
  overflow: hidden;
}

/* Barre */
.menu-barre {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--menu-pad) var(--menu-cote);
  color: var(--menu-texte);
  background: var(--menu-fond-barre);
  font: 400 var(--t-petit)/1 "Archivo Black", sans-serif;
  transition: color .4s ease, background-color .4s ease;
}
.menu-ouvert .menu-barre { color: #fff; background: transparent; }
.menu-barre a { color: inherit; text-decoration: none; }
.menu-barre a, .menu-barre button { white-space: nowrap; }
/* « Sanlé Sory » en haut des pages : plus grand que le reste de la barre */
.menu-logo { font-size: min(var(--t-rubrique), 40px); letter-spacing: -0.02em; line-height: 1; } /* ≤ hauteur du bouton : la barre ne grandit pas */
/* Le petit « Sanlé Sory » s'efface quand le menu est ouvert (il est dans le panneau) */
.menu-logo { transition: opacity .4s ease; }
.menu-ouvert .menu-logo { opacity: 0; pointer-events: none; }

.menu-bouton {
  margin-left: auto; /* reste à droite même sans logo (accueil) */
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.menu-rond {
  position: relative;
  width: var(--menu-bouton);
  height: var(--menu-bouton);
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: background-color .4s ease, border-color .4s ease, transform .4s ease;
}
.menu-rond::before, .menu-rond::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  height: 1.5px;
  background: currentColor;
  transition: transform .5s var(--menu-ease), top .5s var(--menu-ease), background-color .4s ease;
}
.menu-rond::before { top: calc(50% - 4px); }
.menu-rond::after  { top: calc(50% + 3px); }
.menu-bouton:hover .menu-rond { transform: scale(1.06); }
.menu-ouvert .menu-rond { background: #fff; border-color: #fff; }
.menu-ouvert .menu-rond::before, .menu-ouvert .menu-rond::after { top: calc(50% - .75px); background: #000; }
.menu-ouvert .menu-rond::before { transform: rotate(45deg); }
.menu-ouvert .menu-rond::after  { transform: rotate(-45deg); }

/* Panneau des liens, derrière la page */
.menu-panneau {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px var(--menu-cote);
  /* Marges haute et basse égales : les liens sont centrés dans la hauteur du panneau */
  --menu-marge-v: calc(var(--menu-pad) * 2 + var(--menu-bouton) + clamp(16px, 3vh, 40px));
  padding: var(--menu-marge-v) var(--menu-cote);
  align-items: center;
  background: var(--menu-motif) 0 0 / var(--menu-motif-taille) fixed, var(--menu-panneau);
  color: #fff;
  font: 400 var(--t-rubrique)/1.05 "Archivo Black", sans-serif;
  letter-spacing: -0.02em;
  visibility: hidden;
}
.menu-actif .menu-panneau { visibility: visible; }
.menu-panneau ul { list-style: none; margin: 0; padding: 0; align-self: start; } /* colonnes alignées en haut (Sanlé Sory sur Biography) */
/* Neutralise les styles de listes propres aux pages (ex. Exhibitions) */
.menu-panneau li { display: block; margin: 0; padding: 0; border: 0; }
/* Liens secondaires (mentions légales) : petits, à droite, sur la ligne de base de « Contact » */
.menu-panneau ul:nth-child(2),
.menu-panneau .menu-secondaire { align-self: last baseline; }
.menu-panneau .menu-secondaire {
  justify-self: end;
  font-size: clamp(11px, .85vw, 13px);
  letter-spacing: 0;
}
.menu-panneau a {
  display: inline-block;
  white-space: nowrap; /* « Exhibitions / & Publications » : deux lignes, pas trois */
  color: #fff;
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .6s var(--menu-ease), color .3s ease;
}
.menu-ouvert .menu-panneau a {
  opacity: 1;
  transform: none;
  transition-delay: calc(.25s + var(--i, 0) * .06s), calc(.25s + var(--i, 0) * .06s), 0s;
}
.menu-panneau a:hover, .menu-panneau a:focus-visible { color: rgba(255, 255, 255, .55); outline: none; }
/* Pas de soulignement pour « Sanlé Sory » (accueil) */
.menu-panneau a[href="index.html"][aria-current="page"] { text-decoration: none; }
.menu-panneau a[aria-current="page"]:not([href="index.html"]) {
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .14em;
}

@media (max-width: 700px) {
  :root { --menu-cote: 24px; --menu-bouton: 40px; }
  .menu-bouton > span { display: none; } /* sur mobile, le rond suffit */
  .menu-panneau { grid-template-columns: 1fr; gap: 0; font-size: clamp(26px, 8.4vw, 34px); }
  .menu-panneau a { white-space: normal; } /* « Exhibitions & Publications » passe à la ligne au lieu de déborder */
  .menu-panneau ul:last-child { margin-top: 28px; }
  .menu-panneau .menu-secondaire { justify-self: start; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .page, .menu-panneau a, .menu-rond, .menu-rond::before, .menu-rond::after { transition: none !important; }
}

/* Pied de page (pages intérieures) */
.pied {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0 var(--menu-cote);
  padding: clamp(20px, 2.5vw, 32px) 0 clamp(28px, 4vw, 48px);
  border-top: var(--filet) solid currentColor;
  font: 400 var(--t-petit)/1.2 "Archivo Black", sans-serif;
}
.pied ul { display: flex; flex-wrap: wrap; gap: 8px clamp(20px, 2.4vw, 40px); list-style: none; margin: 0; padding: 0; }
/* Neutralise les styles de listes propres aux pages (ex. Exhibitions) */
.pied li { display: block; margin: 0; padding: 0; border: 0; }
/* Mobile : même disposition partout — « © Sanlé Sory » puis les liens en dessous */
@media (max-width: 700px) {
  .pied { flex-direction: column-reverse; align-items: stretch; gap: 20px; padding-top: 18px; font-size: 12px; }
  .pied ul { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
  .pied p { margin: 0; opacity: .55; }
}
.pied a { color: inherit; text-decoration: none; }
.pied a:hover, .pied a:focus-visible, .pied a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: .12em;
  text-underline-offset: .2em;
  outline: none;
}