/* LE MODE 1999 : l'easter egg d'autodérision. Le site « parfait » devient une page perso de l'an 2000 :
   motifs criards, cinq polices qui se battent, texte arc-en-ciel, autocollants de travers,
   bouton gris en relief, bandeau qui défile, compteur de visites…
   Tout est sous html.ugly : sans cette classe, ce fichier ne fait RIEN.
   Règles pour que le site reste utilisable :
     - les décorations ne captent jamais la souris (pointer-events: none) ;
     - le texte reste foncé sur fond clair (ou l'inverse), donc lisible ;
     - les animations s'arrêtent si le visiteur a demandé moins d'animations ;
     - un gros bouton « Rendez-moi le bon goût » et la touche Échap ramènent le vrai site.
   Le JavaScript qui va avec : js/ui/egg-1999.js */

/* le déclencheur discret : le © du pied de page, qui a l'air d'un simple caractère */
.egg-1999 { all: unset; cursor: text; }
.egg-1999:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

html.ugly {
  --u-pink: #ff2fb9; --u-cyan: #19e3ff; --u-yellow: #fff500; --u-lime: #8aff00;
  --u-purple: #7a1fff; --u-orange: #ff7a00; --u-blue: #0000ee; --u-ink: #000;
  --u-comic: "Comic Sans MS", "Comic Neue", "Chalkboard SE", "Marker Felt", cursive;
  --u-impact: Impact, "Haettenschweiler", "Arial Narrow Bold", "Franklin Gothic Bold", sans-serif;
  --u-mono: "Courier New", Courier, monospace;
  --u-times: "Times New Roman", Times, serif;
  --u-papyrus: Papyrus, "Brush Script MT", fantasy;
  scroll-behavior: auto;
}

/* ---------- le fond : un papier peint « cachemire » fait de cercles, de losanges et de damier ---------- */
html.ugly body {
  background-color: var(--u-purple);
  background-image:
    radial-gradient(circle at 25% 25%, var(--u-yellow) 0 7px, var(--u-pink) 8px 14px, transparent 15px),
    radial-gradient(circle at 75% 75%, var(--u-cyan) 0 6px, var(--u-orange) 7px 12px, var(--u-lime) 13px 16px, transparent 17px),
    conic-gradient(from 45deg, var(--u-pink) 0 25%, var(--u-purple) 0 50%, var(--u-pink) 0 75%, var(--u-purple) 0);
  background-size: 64px 64px, 64px 64px, 32px 32px;
  color: var(--u-ink);
  font-family: var(--u-comic);
  cursor: crosshair;
}
html.ugly ::selection { background: var(--u-lime); color: var(--u-ink); }

/* ---------- l'en-tête : un dégradé arc-en-ciel qui tourne ---------- */
html.ugly .site-header,
html.ugly .site-header.scrolled {
  background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, magenta, red);
  background-size: 400% 100%;
  animation: ugly-rainbow 6s linear infinite;
  border-bottom: 6px ridge var(--u-yellow);
  backdrop-filter: none;
}
html.ugly .brand { color: var(--u-blue); font-family: var(--u-impact); letter-spacing: 0; font-size: 22px; text-shadow: 2px 2px 0 var(--u-yellow); }
html.ugly .nav-link { color: var(--u-ink); font-family: var(--u-times); font-size: 15px; text-decoration: underline; text-transform: none; letter-spacing: 0; background: var(--u-yellow); border: 2px outset #ddd; margin: 2px; }
html.ugly .primary-nav { background: transparent; }

/* ---------- chaque section a sa couleur qui pique, ses bordures en relief et son angle de travers ---------- */
html.ugly .hero { background: var(--u-cyan); border: 8px ridge var(--u-pink); }
html.ugly .hero-copy { background: var(--u-yellow); border: 4px dashed var(--u-blue); padding: 16px; transform: rotate(-1.5deg); box-shadow: 10px 10px 0 var(--u-pink); }
html.ugly .hero-copy::before { display: none; }
html.ugly .realm, html.ugly .realm::before { background: transparent; }
html.ugly .section { background: var(--u-lime); border: 10px groove var(--u-orange); margin: 24px 8px; box-shadow: 0 0 0 6px var(--u-blue); }
html.ugly #workshop { background: #fff; border-style: double; border-color: var(--u-purple); }
html.ugly #approach { background: var(--u-yellow); border-style: dotted; border-color: var(--u-pink); }
html.ugly #contact { background: #ffd1f2; border-style: inset; border-color: var(--u-cyan); }
html.ugly .site-footer { background: var(--u-ink); color: var(--u-lime); border-top: 8px ridge var(--u-lime); }

/* ---------- les textes : une police différente à chaque niveau, et de travers ---------- */
html.ugly h1, html.ugly h2, html.ugly h3, html.ugly h4 { color: var(--u-blue); letter-spacing: 0; }
html.ugly .hero h1 {
  font-family: var(--u-impact); font-weight: 400; text-transform: uppercase; line-height: 1;
  color: var(--u-pink); -webkit-text-stroke: 1px var(--u-ink); text-shadow: 3px 3px 0 var(--u-ink), 6px 6px 0 var(--u-cyan);
}
html.ugly .hero h1 em {
  font-family: var(--u-comic); font-style: normal; text-transform: none;
  background: linear-gradient(90deg, #d00000, #c04a00, #007a00, #0000c8, #7a00a8);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; text-shadow: none;
}
html.ugly h2 { font-family: var(--u-papyrus); font-size: 40px; transform: rotate(-2deg); display: inline-block; background: #fff; padding: 2px 10px; border: 3px solid var(--u-ink); }
html.ugly h2::after { content: " !!!"; color: red; }
html.ugly h3 { font-family: var(--u-mono); font-weight: 700; text-decoration: underline wavy red; transform: rotate(1deg); }
html.ugly p, html.ugly li, html.ugly dd, html.ugly label, html.ugly .lede, html.ugly .hero-intro { color: var(--u-ink); font-family: var(--u-comic); }
html.ugly .hero-intro strong, html.ugly strong { color: red; font-family: var(--u-times); font-style: italic; }
html.ugly .section-title, html.ugly .eyebrow, html.ugly .kicker, html.ugly .panel-label, html.ugly .label {
  font-family: var(--u-times); color: var(--u-purple); letter-spacing: 0; text-transform: none; font-size: 16px; text-decoration: underline;
}
html.ugly .section-title::before, html.ugly .section-title::after { display: none; }
html.ugly .lab-copy > p, html.ugly .project-what, html.ugly .why-one blockquote { font-family: var(--u-comic); color: var(--u-ink); }
html.ugly .why-one blockquote { background: var(--u-cyan); border: 4px dashed red; padding: 12px; transform: rotate(1deg); }
html.ugly a { color: var(--u-blue); text-decoration: underline; }
/* les petits textes clairs du site sage deviennent illisibles sur ces fonds : on les remet en noir */
html.ugly :is(.email, .fact dt, .fact dd, .tags, .tags *, .task-text, .live-line, .live-line *, .opt, .copy-note, .sheet-info p) { color: var(--u-ink); }
html.ugly .email { font-family: var(--u-impact); background: var(--u-yellow); padding: 0 6px; }
html.ugly .task.done .task-text { color: #555; }
html.ugly a:visited { color: #551a8b; }

/* ---------- les cartes : fenêtres « Windows 98 » posées de travers ---------- */
html.ugly .card {
  background: #c0c0c0; color: var(--u-ink); clip-path: none;
  border: 3px outset #fff; box-shadow: 8px 8px 0 var(--u-ink);
}
html.ugly .card::after, html.ugly .arch::before, html.ugly .arch::after { display: none; }
html.ugly .lab-item:nth-child(odd) .card { transform: rotate(0.6deg); }
html.ugly .lab-item:nth-child(even) .card { transform: rotate(-0.6deg); }
html.ugly .lab-item { border-top: 4px dotted var(--u-purple); }

/* ---------- boutons et champs : gris, en relief, Comic Sans ---------- */
html.ugly .btn, html.ugly .ghost, html.ugly .icon-btn, html.ugly .ptab, html.ugly .stop, html.ugly .seg label, html.ugly .chip {
  font-family: var(--u-comic); text-transform: none; letter-spacing: 0; font-size: 14px;
  color: var(--u-ink); background: #c0c0c0; border: 3px outset #fff; border-radius: 0; filter: none;
}
html.ugly .btn::before, html.ugly .btn::after { display: none; }
html.ugly .btn:active, html.ugly .icon-btn:active { border-style: inset; }
html.ugly .btn.solid { background: var(--u-yellow); font-weight: 700; }
html.ugly .btn .dia, html.ugly .dia { color: red; }
html.ugly .ptab[aria-selected="true"], html.ugly .stop[aria-selected="true"] { background: var(--u-yellow); border-style: inset; }
html.ugly .stop-n, html.ugly .stop-t, html.ugly .stop-w, html.ugly .ptab-status, html.ugly .sheet-count, html.ugly .proves { color: var(--u-ink); font-family: var(--u-mono); }
html.ugly .control, html.ugly .xr-input {
  background: #fff; color: var(--u-ink); font-family: var(--u-mono); border: 3px inset #fff; border-radius: 0;
}
html.ugly .control::placeholder { color: #666; }
html.ugly .help, html.ugly .lab-note, html.ugly .stop-note, html.ugly .db-line { color: #333; font-family: var(--u-times); }
html.ugly .error { color: red; font-family: var(--u-impact); }
html.ugly .glance li { background: var(--u-orange); color: var(--u-ink); font-family: var(--u-mono); border: 2px dashed var(--u-ink); text-transform: none; }
html.ugly .portal-title { color: var(--u-yellow); font-family: var(--u-impact); font-size: 20px; text-shadow: 2px 2px 0 var(--u-ink); }
html.ugly .portal-sub { color: #fff; font-family: var(--u-comic); text-shadow: 1px 1px 0 var(--u-ink); }
html.ugly .footer-links a, html.ugly .footer-links button, html.ugly .footer-note p { color: var(--u-lime); font-family: var(--u-mono); }

/* ---------- les scènes pixel art : couleurs passées à la moulinette ---------- */
html.ugly canvas.pixel:not(#cat):not(#owl) { filter: saturate(3) hue-rotate(140deg) contrast(1.2); }
html.ugly .arch { border: 4px ridge var(--u-yellow); border-radius: 0; }
html.ugly .portal + .portal::before { background: repeating-linear-gradient(90deg, red 0 6px, var(--u-yellow) 6px 12px); height: 4px; }

/* ---------- les décorations ajoutées par le JavaScript ---------- */
.ugly-layer { position: absolute; inset: 0 0 auto 0; height: 0; z-index: 70; pointer-events: none; }
.ugly-marquee {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; overflow: hidden; white-space: nowrap;
  background: var(--u-ink); color: var(--u-lime); font: 700 16px/32px var(--u-mono);
  border-top: 4px ridge var(--u-yellow); pointer-events: none;
}
.ugly-marquee span { display: inline-block; padding-left: 100%; animation: ugly-scroll 28s linear infinite; }
.ugly-sticker {
  position: absolute; pointer-events: none; font-family: var(--u-impact); text-transform: uppercase; color: var(--u-ink);
  padding: 6px 12px; border: 3px solid var(--u-ink); box-shadow: 4px 4px 0 var(--u-ink); white-space: nowrap;
}
.ugly-sticker.new {
  width: 84px; height: 84px; display: grid; place-items: center; padding: 0; border: 0; box-shadow: none;
  background: red; color: var(--u-yellow); font-size: 24px;
  clip-path: polygon(50% 0, 61% 18%, 82% 10%, 80% 32%, 100% 40%, 84% 56%, 96% 76%, 74% 78%, 68% 100%, 50% 86%, 32% 100%, 26% 78%, 4% 76%, 16% 56%, 0 40%, 20% 32%, 18% 10%, 39% 18%);
  animation: ugly-spin 4s linear infinite;
}
.ugly-sticker.tape {
  background: repeating-linear-gradient(-45deg, var(--u-yellow) 0 18px, var(--u-ink) 18px 36px);
  color: transparent; height: 26px; padding: 0; width: 320px; border: 2px solid var(--u-ink);
}
.ugly-sticker.tape b { position: absolute; inset: 0; display: grid; place-items: center; }
.ugly-sticker.tape b span { background: var(--u-yellow); color: var(--u-ink); padding: 0 8px; font-size: 15px; }
.ugly-sticker.counter { background: var(--u-ink); color: var(--u-lime); font-family: var(--u-mono); text-transform: none; border: 3px inset #888; }
.ugly-sticker.counter b { background: #222; color: red; letter-spacing: 3px; padding: 0 4px; margin-left: 6px; font-size: 18px; }
.ugly-sticker.note { background: var(--u-cyan); font-family: var(--u-comic); text-transform: none; font-size: 15px; }
.ugly-sticker.best { background: #fff; font-family: var(--u-times); text-transform: none; font-size: 13px; color: var(--u-blue); text-decoration: underline; }
.ugly-sticker.arrow { background: none; border: 0; box-shadow: none; color: red; font-size: 40px; text-shadow: 3px 3px 0 var(--u-yellow); }
.ugly-blink { animation: ugly-blink 1s steps(2, start) infinite; }
.ugly-trail { position: fixed; z-index: 90; pointer-events: none; font: 16px/1 var(--u-comic); color: var(--u-yellow); text-shadow: 0 0 4px var(--u-pink); animation: ugly-fall 900ms ease-in forwards; }

/* le bouton pour revenir : toujours visible, en haut à droite */
.ugly-exit {
  position: fixed; top: 76px; right: 12px; z-index: 95; cursor: pointer;
  font: 700 15px/1.2 var(--u-comic); color: var(--u-ink); background: var(--u-yellow);
  border: 4px outset #fff; padding: 10px 14px; box-shadow: 6px 6px 0 var(--u-ink); transform: rotate(2deg);
}
.ugly-exit:hover { background: var(--u-lime); }
.ugly-exit:active { border-style: inset; }
.ugly-exit:focus-visible { outline: 3px solid var(--u-blue); outline-offset: 3px; }

@keyframes ugly-rainbow { to { background-position: 400% 0; } }
@keyframes ugly-scroll { to { transform: translateX(-100%); } }
@keyframes ugly-spin { to { transform: rotate(360deg); } }
@keyframes ugly-blink { to { visibility: hidden; } }
@keyframes ugly-fall { to { transform: translateY(40px) rotate(90deg); opacity: 0; } }

/* moins d'animations demandées : tout reste moche, mais plus rien ne bouge */
@media (prefers-reduced-motion: reduce) {
  html.ugly .site-header, .ugly-marquee span, .ugly-sticker.new, .ugly-blink { animation: none !important; }
  .ugly-marquee span { padding-left: 16px; }
}
/* téléphone : moins d'autocollants pour ne pas tout recouvrir */
@media (max-width: 767px) {
  .ugly-sticker.hide-sm { display: none; }
  .ugly-exit { top: auto; bottom: 44px; right: 8px; font-size: 12px; padding: 6px 10px; box-shadow: 4px 4px 0 var(--u-ink); }
  html.ugly h2 { font-size: 28px; }
  html.ugly .section { margin: 16px 0; }
}

/* lisibilité : tout ce qui se lit reste foncé sur clair, même ici (vérifié avec axe-core) */
html.ugly :is(.need, .ratio, .stop-n, .stop-w, .stop-t, figcaption, #clock-time, .lab-copy .tags .chip, .bubble, .done > .task-text) { color: var(--u-ink) !important; }
html.ugly :is(.panel-label, .section-title, .eyebrow, .kicker, .label) { color: #3d0070; }
html.ugly :is(.hero-intro strong, strong) { color: #a00000; }
html.ugly .bubble { background: #fff; border: 3px solid var(--u-ink); font-family: var(--u-comic); }
html.ugly .chip.ok { color: #005a00 !important; border-color: #005a00; }
html.ugly .chip.bad { color: #a00000 !important; border-color: #a00000; }
html.ugly :is(#stop-facts dt, .why-one blockquote em, .contact-info .label) { color: var(--u-ink) !important; }
html.ugly .why-one blockquote em { color: #a00000 !important; }
html.ugly .ugly-sticker.counter b { color: #ff4040; }