/*
  Easter egg ASCII : portrait en caractères, en plein écran
  (voir scripts/ascii-egg.js).

  Comme l'abeille de beez-egg.css, c'est une illustration : le dessin
  est sombre sur clair (les caractères denses sont les zones sombres :
  contours, ombres). Afficher le même dessin clair sur sombre en
  thème sombre en ferait un négatif. Les couleurs de la feuille sont
  donc des variables propres à l'easter egg, qui ne changent PAS avec
  le thème. Le reste (rayons, ombre, espacements) vient de tokens.css.

  Empilement : au-dessus de la navbar (100), des abeilles (800) et sous
  le trophée (900), pour que celui-ci s'affiche par-dessus le portrait.
*/

.ascii-egg {
  --ascii-paper: #faf7f3;
  --ascii-ink: #211e28;
  --ascii-scrim: rgba(18, 16, 24, 0.97);

  position: fixed;
  inset: 0;
  z-index: 850;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background-color: var(--ascii-scrim);
  cursor: pointer;
  animation: ascii-fade 250ms var(--ease-standard) both;
  -webkit-tap-highlight-color: transparent;
}

.ascii-egg[hidden] {
  display: none;
}

/* La fenêtre reçoit le focus à l'ouverture : pas d'anneau sur tout l'écran. */
.ascii-egg:focus {
  outline: none;
}

.ascii-egg__sheet {
  padding: clamp(0.75rem, 3vw, 1.5rem);
  background-color: var(--ascii-paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Le dessin : un <canvas> dont la taille est calculée par le script pour
   tenir à l'écran. Les nuances d'encre (caractères denses plus foncés) sont
   dans le script (ALPHA), pas ici. Pas de flou sur le fond de la fenêtre :
   un fond presque opaque suffit, et le flou était la partie la plus
   coûteuse à afficher sur un téléphone. */
.ascii-egg__canvas {
  display: block;
}

/* Bouton de fermeture : même apparence que celui de la lightbox
   (pastille sombre translucide, croix blanche), dans l'angle de l'écran,
   en tenant compte de l'encoche des téléphones. */
.ascii-egg__close {
  position: absolute;
  top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
  right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  color: #ffffff;
  background-color: rgba(30, 25, 38, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.ascii-egg__close svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

@media (hover: hover) and (pointer: fine) {
  .ascii-egg__close:hover {
    background-color: rgba(30, 25, 38, 0.85);
  }
}

/* Anneau de focus clair : visible sur le fond sombre de la fenêtre,
   quel que soit le thème du site. */
.ascii-egg__close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Le déclencheur tactile (nom « Clara » de la barre de navigation) : ni
   surbrillance au tap, ni sélection de texte, ni zoom au double-tap.
   Le texte ne fait qu'une ligne (20 px) : sa zone de tap est agrandie en
   hauteur. La marge négative compense exactement le remplissage, donc la
   barre de navigation ne bouge pas. Appliqué seulement quand l'easter egg
   est actif (classe posée par le script) : désactivé, le nom « Clara » se
   comporte comme n'importe quel texte. */
.ascii-egg-on [data-ascii-trigger] {
  padding-block: var(--space-3);
  margin-block: calc(-1 * var(--space-3));
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

@keyframes ascii-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ascii-egg {
    animation: none;
  }

  .ascii-egg__close {
    transition: none;
  }
}