/* ==========================================================================
   about.css — page about (reprise de l'ancien site Framer)
   Le menu de fin du site (le même que sur les autres pages) se pose dans le bandeau noir
   de bas de page de Framer, à la place de l'ancien menu (masqué par ui-framer.js).
   ========================================================================== */
.mg-fin { position: absolute; left: 0; right: 0; top: 0; height: 155px; z-index: 50; pointer-events: none; }
.mg-fin .fin { position: absolute; left: 50%; top: 38%; width: min(84vw, 1200px); transform: translate(-50%, -50%); background: none; padding: 0; margin: 0; }
.mg-fin .fin__menu { display: flex; align-items: center; gap: 1ch; white-space: nowrap; color: #ededea; pointer-events: auto;
  font: 400 clamp(9px, .58vw, 11px)/1 "Plex Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.mg-fin .fin__menu > i { flex: 1; min-width: 2ch; height: 1em; background: radial-gradient(circle, rgba(237,237,234,.35) .7px, transparent 1px) 0 60% / 5px 5px repeat-x; }
.mg-fin .fin__item { position: relative; }
.mg-fin .fin__titre { color: #ededea; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-decoration: none; }
.mg-fin .fin__menu:has(.est-ouverte) .fin__item:not(.est-ouverte) .fin__titre { color: rgba(237,237,234,.45); }
.mg-fin .fin__sous { position: absolute; left: 0; top: 100%; white-space: nowrap; list-style: none; margin: 0; padding: 10px 0 0; min-width: 28ch; display: none; }
.mg-fin .fin__item.est-ouverte .fin__sous { display: block; }
.mg-fin .fin__item--droite .fin__sous { left: auto; right: 0; }
.mg-fin .fin__sous li { min-height: 1.8em; }
.mg-fin .fin__sous a { display: flex; white-space: pre; color: rgba(237,237,234,.55); line-height: 1.8; text-decoration: none; }
.mg-fin .fin__sous a:hover { color: #ededea; }
.mg-fin .fin__sous .sous__qte { color: #ededea; }
.mg-fin a[aria-disabled="true"] { cursor: default; pointer-events: none; }
@media (max-width: 760px) {
  .mg-fin .fin { width: 92vw; top: 30%; }
  .mg-fin .fin__menu { flex-wrap: wrap; row-gap: 12px; white-space: normal; justify-content: center; }
  .mg-fin .fin__menu > i { flex-basis: 2ch; }
}

/* la page est blanche : le lecteur et le menu ticket (clairs, faits pour les pages sombres) s'inversent selon le fond */
.ui143 .lecteur, .ui143 .ticket { mix-blend-mode: difference; }

/* l'ancien lecteur Framer (bouton rond en haut à gauche) : remplacé par celui du site */
.framer-4x1uag { visibility: hidden !important; pointer-events: none !important; }

/* téléphone : l'ancien menu de bas de page Framer (« MENU PHONE »), remplacé par celui du site */
.framer-1dkuxk9 { visibility: hidden !important; pointer-events: none !important; }
@media (max-width: 760px) { .mg-fin .fin { top: 50%; } .mg-fin .fin__menu { row-gap: 8px; } }

/* fond réactif à la souris (about-fond.js) : la toile est posée derrière la page, le fond noir de Framer devient transparent */
.ab-fond { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.ab-fond-actif body { background: #000 !important; }
.ab-fond-actif #main { position: relative; z-index: 1; }
.ab-fond-actif #main .framer-KsuH0, .ab-fond-actif #main > div { background: transparent !important; }

/* téléphone : la partie sous le trait (INFOS) remonte et se resserre, pour laisser la place au menu du bas */
@media (max-width: 760px) {
  .framer-x5sryl { translate: 0 -66px; overflow: visible !important; }
  .framer-1m5icjg { translate: 0 -18px; }
  .framer-2ms5n4 { translate: 0 -36px; }
  .framer-1dta1k { translate: 0 -54px; }
}