/* Deuxième bouton de la page et texte affiché par-dessus le circuit (infos.js).
   Le circuit continue de tourner derrière, assombri et flouté ; le texte vient de la page privée (/admin). */
.boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.boutons .bouton { white-space: nowrap; }
button.bouton { font-family: inherit; line-height: inherit; background: transparent; cursor: pointer; }

dialog.infos {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 32px 24px;
  border: 0; background: transparent; color: var(--blanc, #f5f5f6); overflow-y: auto;
}
dialog.infos[open] { display: grid; place-items: center; animation: infos-entree .5s ease; }
dialog.infos::backdrop { background: #050506c7; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
dialog.infos[open]::backdrop { animation: infos-voile .5s ease; }
/* À l'ouverture, le focus va au texte (lu en premier par un lecteur d'écran), pas au bouton Fermer */
dialog.infos .contenu { max-width: 34rem; text-align: center; outline: none; }
dialog.infos h2 {
  margin: 0 0 clamp(18px, 3vh, 28px);
  font-size: 12px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; color: var(--voile, #9a9aa2);
}
/* Le texte du client : fin et aéré, un peu espacé, un blanc légèrement cassé ; la taille reste lisible sur téléphone */
dialog.infos p {
  margin: 0 0 clamp(26px, 5vh, 44px); white-space: pre-line;
  font-size: clamp(16px, 1.55vw, 19px); font-weight: 300; line-height: 1.85; letter-spacing: .035em; color: #e8e8ec;
}
/* Le bouton Fermer reprend le bouton de la page, sans son apparition retardée */
dialog.infos .bouton { opacity: 1; animation: none; }
/* À la fermeture, le texte et le voile s'effacent (classe sortie, posée par infos.js le temps du fondu) */
dialog.infos[open].sortie { animation: infos-sortie .4s ease forwards; }
dialog.infos[open].sortie::backdrop { animation: infos-voile-sortie .4s ease forwards; }
/* (des animations à part : rejouer celle de l'entrée à l'envers ne repart pas, elle est déjà finie, et saute à la fin) */
@keyframes infos-sortie { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }
@keyframes infos-voile-sortie { from { opacity: 1; } to { opacity: 0; } }
@keyframes infos-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes infos-voile { from { opacity: 0; } to { opacity: 1; } }

/* Mode « glisse » : ce qui est au-dessus du texte monte, ce qui est en dessous descend (de --decalage,
   calculé par infos.js pour chaque élément), puis le texte apparaît en fondu dans l'espace libéré, la piste s'atténue ;
   pas de voile. À la fermeture, l'inverse : le texte s'efface d'abord, puis le nom et les boutons reviennent.
   Les deux temps se suivent (Tim, 03/10 : en même temps, le texte arrivait par-dessus le nom encore en mouvement).
   Classe serre : pas la place pour s'écarter, retour au voile ci-dessus. */
.marque, .phrase, .boutons, .pied { transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
/* Les mentions légales, quand elles n'ont plus la place, sont poussées entièrement hors de l'écran (classe sort, infos.js) */
.piste { transition: opacity .6s ease; }
body.ecarte .monte { transform: translateY(calc(-1 * var(--decalage, 0px))); }
body.ecarte .descend { transform: translateY(var(--decalage, 0px)); }
body.ecarte .piste { opacity: .22; }
/* Le texte passe sur la piste : une ombre douce, de la couleur du fond, le garde net sur les vibreurs */
dialog.infos.glisse:not(.serre) p { text-shadow: 0 0 10px #050506, 0 0 22px #050506; }
dialog.infos.glisse:not(.serre)::backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
dialog.infos.glisse:not(.serre)[open] { animation: none; }
dialog.infos.glisse:not(.serre)[open] .contenu { animation: infos-cote .7s cubic-bezier(.22, 1, .36, 1) .55s both; }
/* (plus précise que la règle d'entrée juste au-dessus, sinon elle ne s'appliquerait jamais) */
dialog.infos.glisse:not(.serre)[open].sortie .contenu { animation: infos-cote-sortie .3s ease forwards; }
/* Le nom est déjà à l'écran, au-dessus : le titre de la fenêtre reste pour les lecteurs d'écran seulement */
dialog.infos.glisse:not(.serre) h2 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@keyframes infos-cote { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes infos-cote-sortie { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-20px); } }

/* Pas d'exception pour « moins d'animations » (réglage Windows) : comme la lumière, l'ouverture fait partie de la page,
   et le mouvement est lent et doux (Tim, 03/10 : avec ce réglage, le nom et les boutons sautaient au lieu de glisser) */