/* ==========================================================================
   ui-framer.css — le lecteur et le menu ticket du nouveau site, posés sur une
   page reprise de l'ancien site Framer (ein.html).  Tout est rangé sous
   .ui143 pour ne pas toucher au style de la page Framer.
   Repris de style.css (sections Lecteur, Ticket, menu replié, téléphone).
   ========================================================================== */
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

.ui143 {
  --noir: #050505;
  --papier: #ededea;
  --gris: rgba(237, 237, 234, .45);
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --taille-ui: 11px;
  --marge: clamp(16px, 2.2vw, 34px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}
.ui143 .ui {
  position: fixed; z-index: 2147483000;
  color: var(--papier);
  font: 400 var(--taille-ui)/1.75 var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  zoom: var(--zoom143, 1);          /* compense la réduction de la page (echelle.js) */
}
.ui143 *, .ui143 *::before, .ui143 *::after { box-sizing: border-box; }
.ui143 p { margin: 0; }
.ui143 a, .ui143 button { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; }
.ui143 button { background: none; border: 0; padding: 0; cursor: pointer; }
.ui143 :focus-visible { outline: 1px dashed var(--papier); outline-offset: 4px; }
.ui143 .ticket__papier { margin: 0; }
.ui143 ul { margin: 0; padding: 0; }

/* les anciens menu et lecteur de la page Framer sont masqués (ui-framer.js) */
.framer-1fj8skx, .framer-9etcjm-container { visibility: hidden !important; pointer-events: none !important; }
.ancien-menu-143 { visibility: hidden !important; pointer-events: none !important; }

.ui143 .lecteur { top: var(--marge); left: var(--marge); }
.ui143 .lecteur__bouton { display: flex; align-items: center; gap: 12px; text-align: left; }
.ui143 .lecteur__icone {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--papier);
  display: grid; place-items: center;
  transition: background .35s var(--ease);
}
.ui143 .lecteur__icone svg { width: 10px; height: 10px; fill: var(--papier); transition: fill .35s; }
.ui143 .lecteur__pause { display: none; }
.ui143 .lecteur__bouton[aria-pressed="true"] .lecteur__play { display: none; }
.ui143 .lecteur__bouton[aria-pressed="true"] .lecteur__pause { display: inline; }
.ui143 .lecteur__bouton:hover .lecteur__icone { background: var(--papier); }
.ui143 .lecteur__bouton:hover .lecteur__icone svg { fill: var(--noir); }
.ui143 .lecteur__texte { white-space: pre; }

/* Ticket (menu) */
.ui143 .ticket { top: var(--marge); right: var(--marge); }
.ui143 .ticket__ouvrir { display: none; }
.ui143 .ticket__papier { width: calc(31 * (1ch + .06em)); }  /* 31 caractères, espacement compris */
.ui143 .ticket__entete { margin: 0 0 .35em; color: var(--gris); white-space: pre; }
.ui143 .ticket__liste, .ui143 .ligne__sous { list-style: none; margin: 0; padding: 0; }
.ui143 .ligne__titre {
  display: flex; width: 100%; white-space: pre; text-align: left;
  cursor: pointer;
}
.ui143 .ligne__titre { transition: color .3s; }
/* la section survolée reste blanche, les autres s'estompent */
.ui143 .ticket__liste:has(.est-ouverte) .ligne:not(.est-ouverte) > .ligne__titre { color: var(--gris); }
.ui143 .ligne__points { flex: 1; overflow: hidden; color: var(--gris); }
.ui143 .ligne__total { min-width: 2ch; text-align: right; }
.ui143 .ligne__sous { display: none; }
.ui143 .ligne__sous.est-imprime { display: block; }
.ui143 .ligne__sous a {
  display: flex; white-space: pre; color: var(--gris);
  transition: color .25s;
}
.ui143 .ligne__sous a:hover, .ui143 .ligne__sous a:focus-visible { color: var(--papier); }
.ui143 .ligne__sous .sous__points { flex: 1; overflow: hidden; }
.ui143 .ligne__sous .sous__qte { color: var(--papier); }

/* Menu replié pendant le défilement : il ne reste que « MENU », le ticket s'imprime au survol */
@media (min-width: 761px) {
  /* « MENU » : posé en haut à droite, invisible tant que le menu est déplié */
  .ui143 .ticket__ouvrir {
    display: block; position: absolute; top: 0; right: 0;
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .35s var(--ease), transform .45s var(--ease);
  }
  .ui143 .ticket__papier { transition: clip-path .55s cubic-bezier(.7,0,.2,1); clip-path: inset(0 0 0 0); }
  .ui143 .ticket__papier > * { transition: transform .5s var(--ease), opacity .4s var(--ease); }
  .ui143 .ticket__liste > li { transition: transform .5s var(--ease), opacity .4s var(--ease); }

  /* replié : les lignes remontent une à une et s'effacent, il ne reste que MENU */
  .menu-replie .ui143 .ticket { pointer-events: none; }
  .menu-replie .ui143 .ticket__ouvrir { opacity: 1; transform: none; pointer-events: auto; transition-delay: .25s; }
  .menu-replie .ui143 .ticket__papier { clip-path: inset(0 0 100% 0); }
  .menu-replie .ui143 .ticket__entete,
  .menu-replie .ui143 .ticket__liste > li { opacity: 0; transform: translateY(-14px); }
  .menu-replie .ui143 .ticket__liste > li:nth-child(6) { transition-delay: 0s; }
  .menu-replie .ui143 .ticket__liste > li:nth-child(5) { transition-delay: .04s; }
  .menu-replie .ui143 .ticket__liste > li:nth-child(4) { transition-delay: .08s; }
  .menu-replie .ui143 .ticket__liste > li:nth-child(3) { transition-delay: .12s; }
  .menu-replie .ui143 .ticket__liste > li:nth-child(2) { transition-delay: .16s; }
  .menu-replie .ui143 .ticket__liste > li:nth-child(1) { transition-delay: .2s; }
  .menu-replie .ui143 .ticket__entete { transition-delay: .2s; }

  /* survol de MENU : le ticket redescend, ligne par ligne */
  .menu-replie .ui143 .ticket:hover .ticket__ouvrir,
  .menu-replie .ui143 .ticket:focus-within .ticket__ouvrir { opacity: 0; transform: translateY(-6px); transition-delay: 0s; }
  .menu-replie .ui143 .ticket:hover .ticket__papier,
  .menu-replie .ui143 .ticket:focus-within .ticket__papier,
  .menu-replie .ui143 .ticket.est-ouvert .ticket__papier { clip-path: inset(0 0 -40px 0); pointer-events: auto; }
  .menu-replie .ui143 .ticket:hover .ticket__entete,
  .menu-replie .ui143 .ticket:hover .ticket__liste > li,
  .menu-replie .ui143 .ticket:focus-within .ticket__entete,
  .menu-replie .ui143 .ticket:focus-within .ticket__liste > li { opacity: 1; transform: none; }
  .menu-replie .ui143 .ticket:hover .ticket__entete { transition-delay: 0s; }
  .menu-replie .ui143 .ticket:hover .ticket__liste > li:nth-child(1) { transition-delay: .04s; }
  .menu-replie .ui143 .ticket:hover .ticket__liste > li:nth-child(2) { transition-delay: .08s; }
  .menu-replie .ui143 .ticket:hover .ticket__liste > li:nth-child(3) { transition-delay: .12s; }
  .menu-replie .ui143 .ticket:hover .ticket__liste > li:nth-child(4) { transition-delay: .16s; }
  .menu-replie .ui143 .ticket:hover .ticket__liste > li:nth-child(5) { transition-delay: .2s; }
  .menu-replie .ui143 .ticket:hover .ticket__liste > li:nth-child(6) { transition-delay: .24s; }
}


@media (max-width: 760px) {
  .ui143 { --taille-ui: 10px; }
  .ui143 .lecteur__texte { max-width: 22ch; white-space: normal; }
  .ui143 .lecteur__icone { width: 22px; height: 22px; }
  .ui143 .ticket__ouvrir { display: block; padding: 4px 0; }
  .ui143 .ticket__papier {
    position: fixed; top: 0; left: 0; right: 0;
    width: auto;
    padding: calc(var(--marge) + 34px) var(--marge) 34px calc(var(--marge) + 2ch);
    background: var(--papier); color: var(--noir);
    --gris: rgba(5,5,5,.5);
    font-size: 12px;
    transform: translateY(-105%);
    transition: transform .7s var(--ease);
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
            mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  }
  .ui143 .ticket.est-ouvert .ticket__papier { transform: none; }
  .ui143 .ticket.est-ouvert .ticket__ouvrir { position: relative; z-index: 2; color: var(--noir); }
  .ui143 .ticket__entete { text-align: center; }
  .ui143 .ligne__titre, .ui143 .ligne__sous a { padding: 5px 0; }
}

/* liens de menu inactifs : pages pas encore faites, ou la page sur laquelle on est déjà */
.ticket a[aria-disabled="true"], .fin a[aria-disabled="true"], .fin__menu a[aria-disabled="true"] { cursor: default; pointer-events: none !important; }