/* =====================================================================
   DÉTAILS : tout ce qui rend le site "fait main".
   Rien ici n'est indispensable, mais c'est ce qui fait la différence
   entre un gabarit et un produit fini :
     1) micro-typographie (césure, chiffres, guillemets, sélection)
     2) titres de chapitres numérotés en chiffres romains
     3) le vaisseau de progression, le hibou, les infos en direct
     5) "sous le capot" : les techniques écrites en police pixel
     6) l'horloge, les étincelles, l'étoile filante, le petit message
     7) le chat du pied de page
   Le JavaScript qui va avec : js/ui/details.js, typo.js, footer-cat.js, ship.js, owl.js, live.js
   Voir docs/08-details-humains.md
   ===================================================================== */

:root {
  --font-pixel: var(--font-body);          /* la police pixel des petites infos */
}

/* ---------- 1) MICRO-TYPOGRAPHIE ---------- */
body {
  font-feature-settings: "kern", "liga", "onum";   /* chiffres "elzéviriens" dans le texte courant, comme dans un livre */
  hanging-punctuation: first;                       /* les guillemets ouvrants dépassent dans la marge (Safari) */
}
p, li, dd, blockquote {
  text-wrap: pretty;          /* évite un mot tout seul sur la dernière ligne */
  hyphens: auto;              /* coupe les mots longs proprement (lang="fr" sur <html> obligatoire) */
  hyphenate-limit-chars: 8 4 3;
}
h1, h2, h3, .hero-intro, .lab-copy > p { hyphens: manual; }
.chip, .label, .fact dt, .jl-n, .email, .netlog, .db-line, time { font-variant-numeric: lining-nums tabular-nums; }

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* la barre de défilement, fine et dans les couleurs du site (Firefox + Chrome/Edge) */
html { scrollbar-width: thin; scrollbar-color: var(--border) var(--canvas); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb { background: var(--border); border: 3px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* les liens dans le texte : un soulignement en pointillés pixel qui devient plein au survol */
p a:not(.btn):not(.ghost) {
  text-decoration: underline dotted 2px;
  text-underline-offset: 4px;
}
p a:not(.btn):not(.ghost):hover { text-decoration-style: solid; }

/* les boutons s'enfoncent de 2 pixels quand on appuie, comme une vraie touche */
.btn:active { transform: translateY(2px); }

/* curseurs pixel art : les variables --cur-* sont fabriquées en JS (js/ui/details.js, pixelCursor) */
.world, .system canvas { cursor: var(--cur-grab, grab); }
.world:active, .system canvas:active { cursor: var(--cur-grabbing, grabbing); }
.journey-scene { cursor: var(--cur-grab, ew-resize); }
.journey-scene:active { cursor: var(--cur-grabbing, ew-resize); }

/* ---------- 2) CHAPITRES EN CHIFFRES ROMAINS ---------- */
/* chaque .section-title.left reçoit un numéro : I, II, III… calculé par le CSS (counter) */
main { counter-reset: chapitre; }
.section-title.left { counter-increment: chapitre; }
.section-title.left::before {
  display: inline-block;
  content: counter(chapitre, upper-roman) ".";
  flex: none;
  height: auto;
  max-width: none;
  background: none;
  font: italic 500 22px/1 var(--font-display);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  min-width: 1.6em;
}

/* ---------- 5) "SOUS LE CAPOT" EN POLICE PIXEL ---------- */
.lab-copy .kicker {
  font: 400 var(--fs-sm)/1.4 var(--font-pixel);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--accent);
}
.lab-copy .tags {
  gap: 0;
  row-gap: 2px;
  margin-top: var(--s2);
  padding-top: var(--s3);
  border-top: 1px dashed var(--border);
  max-width: 34ch;
}
.lab-copy .tags::before {
  content: "sous le capot :";
  width: 100%;
  margin-bottom: 2px;
  font: 400 var(--fs-sm)/1.4 var(--font-pixel);
  color: var(--text-3);
}
.lab-copy .tags .chip {
  padding: 0;
  border: 0;
  font: 400 var(--fs-sm)/1.5 var(--font-pixel);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
.lab-copy .tags .chip + .chip::before {
  content: "/";
  margin: 0 8px 0 2px;
  color: var(--text-disabled);
}

/* ---------- 6) HORLOGE, ÉTINCELLES, ÉTOILE FILANTE, PETIT MESSAGE ---------- */
/* l'horloge est une info "vivante" : on la distingue des autres pastilles avec la police pixel */
.glance .clock {
  font: 400 var(--fs-sm)/1 var(--font-pixel);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-2);
}
.glance .clock time { color: var(--accent); }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* étincelles : de petits carrés de 4px qui jaillissent d'un clic (créés par burst() dans details.js) */
.spark {
  position: fixed;
  z-index: 90;
  width: 4px;
  height: 4px;
  pointer-events: none;
  background: var(--c, var(--accent));
  animation: spark 520ms steps(7) forwards;   /* steps() : le mouvement saute de pixel en pixel, comme le pixel art */
}
@keyframes spark {
  to { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

.shooting-star {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  width: 90px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--star));
  transform-origin: right center;
  animation: shoot var(--t, 1100ms) var(--d, 0ms) cubic-bezier(0.3, 0, 0.7, 1) forwards;
  opacity: 0;
}
@keyframes shoot {
  0% { opacity: 0; transform: translate(var(--x0), var(--y0)) rotate(25deg); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--x0) + 520px), calc(var(--y0) + 240px)) rotate(25deg); }
}

.toast {
  position: fixed;
  z-index: 95;
  left: 50%;
  bottom: max(var(--s6), env(safe-area-inset-bottom, 0px));
  translate: -50% 0;
  padding: var(--s3) var(--s5);
  background: var(--raised);
  border: 1px solid var(--border-accent);
  color: var(--text-1);
  font: 400 var(--fs-sm)/1.4 var(--font-pixel);
  max-width: calc(100vw - 2 * var(--gutter));
  animation: toast-in 240ms var(--ease-enter);
}
.toast[data-leaving] { animation: toast-in 200ms var(--ease) reverse forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- 7) LE CHAT DU PIED DE PAGE ---------- */
.site-footer { position: relative; }
.footer-cat {
  position: absolute;
  right: max(var(--gutter), calc((100% - var(--container)) / 2));
  top: -48px;          /* 12 pixels × 4 = 48px : il est assis PILE sur le trait du pied de page */
  width: 80px;
  height: 48px;
}
.footer-cat { cursor: pointer; }
.footer-cat canvas { width: 80px; height: 48px; }
.footer-cat .cat-yarn {           /* la pelote de l'easter egg : 5 × 4 = 20px, posée sur le trait */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
}
.cat-zz {
  position: absolute;
  right: 6px;
  top: -14px;
  font: 400 var(--fs-sm)/1 var(--font-pixel);
  color: var(--text-3);
  animation: zz 2.4s ease-in-out infinite;
  pointer-events: none;
}
.footer-cat.awake .cat-zz { animation: none; color: var(--accent); }
@keyframes zz {
  0% { opacity: 0; transform: translate(0, 6px) scale(0.8); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(10px, -14px) scale(1.2); }
}

/* ---------- 8) LE VAISSEAU DE PROGRESSION (js/ui/ship.js) ---------- */
/* --p va de 0 (haut de page) à 1 (bas de page) ; il est mis à jour en JS pendant le défilement */
.ship-track {
  --p: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}
.site-header.scrolled .ship-track { opacity: 1; }   /* n'apparaît qu'une fois la page commencée */
.ship-trail {                                        /* la traînée derrière le vaisseau */
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * (100% - 33px));
  background: linear-gradient(90deg, transparent, var(--border-accent));
}
#ship {
  position: absolute;
  bottom: -7px;
  left: calc(var(--p) * (100% - 33px));
  width: 33px;            /* 11 × 3 : chaque pixel du sprite fait 3 px */
  height: 15px;
  transition: transform var(--dur-fast) steps(2);
}
.ship-track.back #ship { transform: scaleX(-1); }   /* on remonte : demi-tour */

/* ---------- 9) LE HIBOU (js/ui/owl.js) ---------- */
.contact-form { position: relative; }
.owl {
  position: absolute;
  right: calc(var(--s8) - 8px);   /* le canvas a 2 colonnes de marge de chaque côté pour les ailes */
  top: -44px;            /* 12 × 4 = 48px de haut : ses pattes se posent sur le bord du formulaire */
  width: 64px;           /* 16 × 4 */
  height: 48px;
  z-index: 1;
  cursor: pointer;
}
.owl.hop { animation: hop 520ms steps(4) 2; }
@keyframes hop { 50% { transform: translateY(-12px); } }

/* ---------- 10) LES INFOS EN DIRECT (js/ui/live.js) ---------- */
.live-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--s2);
  margin-top: calc(-1 * var(--s4));
  font: 400 var(--fs-sm)/1.5 var(--font-pixel);
  color: var(--text-3);
}
.live-line a { color: var(--text-2); text-decoration: underline dotted 1px; text-underline-offset: 3px; }
.live-line a:hover { color: var(--accent); }
.live-line .pip {
  width: 6px;
  height: 6px;
  background: var(--success);
  animation: blink 2s steps(1) infinite;
}