/* La page /now — https://nownownow.com/about
 *
 * **Une page statique, à part de la console, et c'est voulu.** Une page /now
 * se lit en dix secondes, se lie depuis un annuaire et se met à jour en
 * changeant trois lignes : elle n'a rien à faire derrière un champ 3D, un
 * écran de chargement et une pile d'écrans en mémoire qui n'a pas d'adresse.
 *
 * **Habillée comme la transition qui y mène** (28/10, demandé : « elle est
 * dans le thème PS2, il faut qu'elle soit complètement dans le thème de la
 * transition »). Avant, elle reprenait la charte de la console, noir et cyan :
 * l'arc-en-ciel s'ouvrait en étoile sur une page sérieuse. C'est maintenant la
 * page perso de 2003 jusqu'au bout : le fond à rayons de la transition,
 * immobile, des étoiles, des titres en WordArt, des encarts biseautés, un
 * bandeau qui défile, un faux compteur, un chantier. Le texte, lui, reste sur
 * fond clair, en encre foncée : ringard, mais lisible.
 *
 * Les polices : Comic Sans MS là où elle est (Windows, macOS), sinon Comic
 * Neue (licence OFL, https://comicneue.com), servie par le site comme les
 * autres — la CSP n'autorise que `font-src 'self'`. Le WordArt prend la pile
 * de la transition (Impact d'abord), pour que le mot qui part et ceux qui
 * restent se ressemblent. */

@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/comic-neue-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/comic-neue-700-latin.woff2') format('woff2');
}

:root {
  /* L'encre des encarts, et l'ombre franche de tout ce qui dépasse. */
  --encre: #1b0b4a;
  --papier: #fffdf0;
  --violet: #4a148c;
  --rose: #ff00cc;
  --texte: 'Comic Sans MS', 'Comic Neue', 'Chalkboard SE', 'Trebuchet MS', sans-serif;
  --wordart: Impact, 'Haettenschweiler', 'Arial Black', 'Comic Sans MS', 'Comic Neue', sans-serif;
  /* Les rayons de la transition : un seul dessin, partout sur cette page. */
  --rayons:
    radial-gradient(circle 39vmax, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)),
    repeating-conic-gradient(
      #ff1f1f 0 15deg,
      #ff9f00 15deg 30deg,
      #fff200 30deg 45deg,
      #2bd62b 45deg 60deg,
      #1e90ff 60deg 75deg,
      #b23cff 75deg 90deg
    );
  --arc-en-ciel: linear-gradient(
    180deg,
    #ff2a2a 0%,
    #ff9a00 22%,
    #fff200 42%,
    #2bd62b 60%,
    #1e90ff 80%,
    #b23cff 100%
  );
  --bandeau-marge: clamp(14px, 2.4vh, 26px);
  --pad-base: clamp(20px, 4vw, 68px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* L'arc-en-ciel immobile, sur `html`, toujours (28/10) : le fond de la page,
   donc aussi ce qui se voit quand on tire la page au-delà de ses bords. Rapporté à la fenêtre,
   comme la roue : sans quoi l'image prend la taille de `html`, et une page
   qui n'a pas encore sa hauteur répète le dessin en fines rayures. */
html {
  background: var(--rayons);
  background-color: var(--rose);
  background-attachment: fixed;
  /* Safari ne grossit pas le texte quand on couche le téléphone (28/10). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  color: var(--encre);
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.55;
}

/* La page entière, dans une boîte à elle : c'est elle que le volet en étoile
   découpe, et le décor de la transition vit dessous (`ringard.css`). */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  /* `svh` (28/10) : au téléphone, `100vh` est la fenêtre barre d'adresse
     repliée — une page courte défilait de la hauteur de la barre. */
  min-height: 100svh;
  overflow-x: clip;
  /* En haut, de quoi laisser passer le retour : sa marge et ses 46 px. */
  padding: calc(var(--bandeau-marge) + 66px) 16px clamp(28px, 6vw, 72px);
}

/* --------------------------------------------------------------- le fond */

/* Le même dessin que la roue de la transition, au même endroit (centré sur
   la fenêtre, le halo blanc de la même taille) : quand l'étoile finit de
   s'ouvrir, la roue s'est posée sur ce dessin-là (`ringard.js`), et on ne voit
   pas où l'une finit et l'autre commence.

   Dans la page plutôt que sur `html` seul : la page est opaque sous l'étoile
   qui l'ouvre, et la roue qui tourne dessous ne se voit qu'autour. Un
   `position: fixed` plutôt qu'un `background-attachment: fixed`, que Safari
   sur iPhone ignore. Un fixe dans un `clip-path` est découpé avec lui. */
.fond {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--rayons);
  background-color: var(--rose);
  pointer-events: none;
}

.fond span {
  position: absolute;
  color: #ffffff;
  line-height: 1;
  text-shadow:
    0 0 6px #fff7a8,
    0 0 14px #ffe600;
  animation: scintille 1.4s ease-in-out infinite alternate;
}

/* Les étoiles de la transition, deux fois plus lentes : celles-là ne durent
   qu'une seconde, celles-ci restent sous le texte. */
@keyframes scintille {
  from {
    transform: scale(0.4) rotate(0deg);
    opacity: 0.5;
  }
  to {
    transform: scale(1.1) rotate(90deg);
    opacity: 1;
  }
}

main {
  max-width: 660px;
  margin: 0 auto;
}

/* ------------------------------------------------- le bandeau qui défile */

/* Le <marquee> d'époque, en CSS : l'élément est obsolète, et il ne connaît
   pas `prefers-reduced-motion`. Deux fois le même texte, décalé d'une
   longueur : la boucle ne se voit pas. */
.defile {
  overflow: hidden;
  margin-bottom: 26px;
  border: 4px ridge #c0c0c0;
  background: #000000;
  font:
    700 16px / 1 'Courier New',
    monospace;
  letter-spacing: 0.06em;
  color: #39ff14;
  text-shadow: 0 0 6px rgba(57, 255, 20, 0.8);
  white-space: nowrap;
}

.defile p {
  display: inline-flex;
  padding: 8px 0;
  animation: defile 18s linear infinite;
}

@keyframes defile {
  to {
    transform: translateX(-50%);
  }
}

/* ----------------------------------------------------------- le titre */

.titre {
  position: relative;
  text-align: center;
  margin-bottom: 30px;
}

/* L'étiquette « NOUVEAU ! » des catalogues : une étoile jaune à seize
   branches, penchée, collée au coin du titre. */
.eyebrow {
  display: inline-grid;
  place-items: center;
  width: 118px;
  height: 118px;
  margin-bottom: -10px;
  clip-path: polygon(
    50% 0%,
    58.5% 7.3%,
    69.1% 3.8%,
    73.3% 14.1%,
    84.4% 15.6%,
    85.9% 26.7%,
    96.2% 30.9%,
    92.7% 41.5%,
    100% 50%,
    92.7% 58.5%,
    96.2% 69.1%,
    85.9% 73.3%,
    84.4% 84.4%,
    73.3% 85.9%,
    69.1% 96.2%,
    58.5% 92.7%,
    50% 100%,
    41.5% 92.7%,
    30.9% 96.2%,
    26.7% 85.9%,
    15.6% 84.4%,
    14.1% 73.3%,
    3.8% 69.1%,
    7.3% 58.5%,
    0% 50%,
    7.3% 41.5%,
    3.8% 30.9%,
    14.1% 26.7%,
    15.6% 15.6%,
    26.7% 14.1%,
    30.9% 3.8%,
    41.5% 7.3%
  );
  background: radial-gradient(circle, #fffbb0 0 30%, #ffe600 55%, #ff9f00 100%);
  font: 700 17px / 1 var(--texte);
  color: #d10000;
  text-transform: uppercase;
  transform: rotate(-14deg);
  animation: pulse 0.9s ease-in-out infinite alternate;
}

@keyframes pulse {
  to {
    transform: rotate(-14deg) scale(1.08);
  }
}

/* Le WordArt : la même recette que le mot de la transition (dégradé dans les
   lettres, contour, extrusion en ombres franches), et la pente de « Vague
   montante » par la perspective. */
h1 {
  display: block;
  font:
    italic 900 clamp(40px, 11vw, 78px) / 1.05 var(--wordart);
  letter-spacing: 0.02em;
  color: transparent;
  background: var(--arc-en-ciel);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px var(--encre);
  filter: drop-shadow(2px 2px 0 #6a1b9a) drop-shadow(2px 2px 0 var(--violet))
    drop-shadow(2px 2px 0 #311b92) drop-shadow(6px 10px 8px rgba(0, 0, 0, 0.45));
  transform: perspective(500px) rotateX(14deg) rotateZ(-3deg);
  padding: 0 4px 6px;
}

/* La date, sur une étiquette de traitement de texte. */
.date {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 14px;
  border: 2px dashed var(--encre);
  background: #ffffff;
  font-size: 15px;
  box-shadow: 4px 4px 0 var(--violet);
  transform: rotate(1.5deg);
}

/* ---------------------------------------------------------- les encarts */

/* Un tableau à `border="6"` d'une page Geocities : relief en arête, papier
   clair, ombre portée franche. Un peu de travers, chacun dans son sens. */
.encart {
  position: relative;
  padding: 18px 22px 20px;
  border: 6px ridge #ff8ce6;
  background: var(--papier);
  box-shadow:
    0 0 0 2px var(--encre),
    9px 9px 0 2px var(--violet);
  transform: rotate(-0.8deg);
}

.encart:nth-of-type(even) {
  transform: rotate(0.7deg);
}

h2 {
  margin: 0 0 8px;
  font:
    italic 900 clamp(28px, 7vw, 38px) / 1.1 var(--wordart);
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1.5px var(--encre);
  filter: drop-shadow(2px 2px 0 var(--violet)) drop-shadow(1px 1px 0 #311b92);
  transform: skewX(-6deg);
  transform-origin: 0 100%;
}

/* Quatre WordArt de la galerie, un par rubrique. */
h2.feu {
  background-image: linear-gradient(180deg, #fff200 0%, #ff9a00 45%, #ff1f1f 100%);
}

h2.ocean {
  background-image: linear-gradient(180deg, #9ff3ff 0%, #1e90ff 50%, #6a1b9a 100%);
}

h2.arc {
  background-image: var(--arc-en-ciel);
}

h2.jungle {
  background-image: linear-gradient(180deg, #e6ff8a 0%, #2ecc40 50%, #0b5d1e 100%);
}

ul {
  list-style: none;
}

li {
  padding-left: 1.5em;
  position: relative;
  margin: 8px 0;
}

/* Des puces étoiles, de toutes les couleurs, avec leur contour. */
li::before {
  content: '★';
  position: absolute;
  left: 0;
  top: 0.02em;
  font-size: 1.05em;
  line-height: 1.45;
  color: #ff1f1f;
  -webkit-text-stroke: 1px var(--encre);
}

li:nth-child(5n + 2)::before {
  color: #ff9f00;
}
li:nth-child(5n + 3)::before {
  color: #2bd62b;
}
li:nth-child(5n + 4)::before {
  color: #1e90ff;
}
li:nth-child(5n + 5)::before {
  color: #b23cff;
}

/* Les liens d'époque : bleu souligné, violet une fois vus, rouge au survol. */
a {
  color: #0000ee;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:visited {
  color: #551a8b;
}

a:hover,
a:focus-visible {
  color: #e00000;
  background: #fff200;
  outline: 2px dashed var(--encre);
  outline-offset: 1px;
}

/* -------------------------------------------- ce qui sépare les encarts */

/* Une barre arc-en-ciel, une fleur au milieu. */
.trait {
  position: relative;
  height: 12px;
  width: 72%;
  margin: 34px auto;
  border: 2px solid var(--encre);
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    #ff1f1f,
    #ff9f00,
    #fff200,
    #2bd62b,
    #1e90ff,
    #b23cff
  );
  box-shadow: 3px 3px 0 var(--violet);
}

.trait span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  font-size: 34px;
  line-height: 1;
  color: #ff00cc;
  -webkit-text-stroke: 1.5px var(--encre);
  text-shadow: 2px 2px 0 #ffffff;
}

/* --------------------------------------------------------- le chantier */

/* Le « Page en construction » : les rayures jaunes et noires, qui avancent
   comme le GIF animé. */
.chantier {
  display: grid;
  place-items: center;
  margin: 38px auto 34px;
  max-width: 420px;
  padding: 10px;
  border: 3px solid var(--encre);
  background: repeating-linear-gradient(-45deg, #ffd400 0 16px, #111111 16px 32px);
  background-size: 45.25px 45.25px;
  box-shadow: 6px 6px 0 var(--violet);
  transform: rotate(-1.5deg);
  animation: chantier 0.8s linear infinite;
}

@keyframes chantier {
  to {
    background-position: 45.25px 0;
  }
}

.chantier span {
  padding: 4px 14px;
  border: 2px solid var(--encre);
  background: #ffd400;
  font: 700 18px / 1.2 var(--texte);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------- le bas */

footer {
  font-size: 16px;
}

footer p + p {
  margin-top: 10px;
}

/* Le compteur à rouleaux. */
.compteur {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.chiffres {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 3px inset #c0c0c0;
  background: #222222;
}

.chiffres span {
  display: inline-block;
  width: 18px;
  font:
    700 20px / 26px 'Courier New',
    monospace;
  text-align: center;
  color: #ff3b3b;
  text-shadow: 0 0 4px rgba(255, 59, 59, 0.9);
  background: linear-gradient(180deg, #000 0%, #3a3a3a 50%, #000 100%);
}

/* Les badges 88 × 31 du bas de page. */
.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 88px;
  height: 31px;
  justify-content: center;
  border: 1px solid #000000;
  outline: 1px solid #ffffff;
  outline-offset: -3px;
  font:
    10px / 1 Verdana,
    Tahoma,
    sans-serif;
  text-transform: uppercase;
  color: #ffffff;
}

.badge b {
  padding: 2px 3px;
  font-size: 9px;
}

.b-main {
  background: linear-gradient(180deg, #5a6fd6, #1e2a8a);
}
.b-main b {
  background: #ffcc00;
  color: #000000;
}

.b-cookie {
  background: linear-gradient(180deg, #4fd44f, #116611);
}
.b-cookie b {
  background: #ffffff;
  color: #116611;
}

.b-nix {
  background: linear-gradient(180deg, #9a7cff, #3a1f8a);
}
.b-nix b {
  background: #7ebae4;
  color: #000000;
}

/* ------------------------------------------------------------- le retour */

/* Le bouton d'action « Précédent » de PowerPoint : un pavé en relief, la
   flèche en arc-en-ciel avec son extrusion. Même place que le retour de la
   console, en haut à gauche. Il défile avec la page — un bouton fixe
   passerait sur le texte. Enfoncé, il s'enfonce. */
.back-btn {
  position: absolute;
  top: var(--bandeau-marge);
  left: var(--pad-base);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 10px;
  border: 4px outset #ffe680;
  background: linear-gradient(180deg, #fff9c4 0%, #ffe600 55%, #ffb300 100%);
  box-shadow:
    0 0 0 2px var(--encre),
    5px 5px 0 2px var(--violet);
  font: 700 18px / 1.4 var(--texte);
  text-decoration: none;
  color: var(--encre);
  transition: transform 0.1s ease;
}

.back-btn svg {
  width: 26px;
  height: 24px;
  overflow: visible;
  transition: transform 0.2s ease;
}

.back-btn:visited {
  color: var(--encre);
}

.back-btn:hover,
.back-btn:focus-visible {
  background: linear-gradient(180deg, #ffffff 0%, #fff27a 55%, #ffc93a 100%);
  color: var(--encre);
  outline: 2px dashed #ffffff;
  outline-offset: 5px;
}

.back-btn:hover svg {
  transform: translateX(-3px);
}

.back-btn:active {
  border-style: inset;
  transform: translate(3px, 3px);
  box-shadow:
    0 0 0 2px var(--encre),
    2px 2px 0 2px var(--violet);
}

@media (max-width: 900px) {
  .back-btn {
    left: 16px;
  }
}

@media (max-width: 480px) {
  .encart {
    padding: 14px 15px 16px;
  }

  body {
    font-size: 17px;
  }

  .eyebrow {
    width: 96px;
    height: 96px;
    font-size: 14px;
  }
}

/* Rien ne bouge : ni les étoiles, ni le bandeau (son texte reste au début,
   ce qui dépasse est coupé), ni l'étiquette, ni le chantier. */
@media (prefers-reduced-motion: reduce) {
  .fond span,
  .defile p,
  .eyebrow,
  .chantier {
    animation: none;
  }

  .back-btn,
  .back-btn svg {
    transition: none;
  }
}