/* ==========================================================================
   project-direction.css — page PROJECT DIRECTION (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; } }


/* petit trait de séparation entre les projets (pd-separateurs.js) : pointillés blancs */
.pd-sep { position: absolute; z-index: 5; width: 180px; height: 6px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, #fff 1.3px, transparent 1.7px) 0 50% / 9px 6px repeat-x; }
@media (max-width: 760px) { .pd-sep { width: 117px; } }

/* même espace partout : 200 px entre deux projets, 64 px entre une description et ses photos */
.framer-iasj67 { padding: 100px 0 0 !important; }
.framer-24ghju { padding-top: 100px !important; }
.framer-17py6d8 { margin-top: -36px !important; }
.framer-15nns8h, .framer-39xfxn { margin-top: 34px !important; }

/* descriptions : un en-tête de projet (numéro, type) sur un filet en pointillés, comme les menus du site */
.framer-6r60ws::before, .framer-1p3wa24::before, .framer-1ujghdo::before {
  display: block; margin: 0 0 18px; padding: 0 0 11px;
  border-bottom: 1px dashed rgba(237, 237, 234, .3);
  font: 400 10px/1.4 "Plex Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(237, 237, 234, .55); white-space: pre;
}
.framer-6r60ws::before { content: "[01]   PHOTOGRAPHY / SET DESIGN"; }
.framer-1p3wa24::before { content: "[02]   PACKAGING"; }
.framer-1ujghdo::before { content: "[03]   ARTBOOK"; }
@media (max-width: 760px) {
  .framer-6r60ws::before, .framer-1p3wa24::before, .framer-1ujghdo::before { font-size: 8.5px; margin-bottom: 12px; white-space: normal; text-align: center; }
}