/* =========================================================
   WAY-BE — styles globaux (layout, nav, footer, composants)
   Direction : pastiche « web 2000 » maîtrisé (Win98/XP + Aqua + néon).
   Les variables viennent de css/tokens.css (chargé avant).
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* Curseur flèche façon Windows 98, liseré rose */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='26' viewBox='0 0 22 26'%3E%3Cpath d='M2 2v18.5l4.6-4.4 3.1 7.2 3.4-1.5-3.1-7H16.6z' fill='%23ffffff' stroke='%23200818' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M3.6 5.6v11l2.6-2.5' fill='none' stroke='%23ff3ea5' stroke-width='1.2'/%3E%3C/svg%3E") 2 2, auto;
  scrollbar-color: #ff3ea5 #140a26;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img, svg, video, canvas { display: block; max-width: 100%; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .97rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: #000080; color: #fff; } /* la sélection bleu marine de Windows */

:focus-visible {
  outline: 1px dotted #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(57, 225, 255, .55);
}

/* Scrollbars biseautées (Chrome/Safari ; Firefox prend scrollbar-color) */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: repeating-conic-gradient(#1a0f30 0 25%, #0c0618 0 50%) 0 0 / 2px 2px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #ff7cc4, #e0177f 60%, #b80d66);
  border: 1px solid #000; border-radius: 3px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.55), inset -1px -1px 0 rgba(0,0,0,.4);
}
::-webkit-scrollbar-corner { background: #0c0618; }

.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--accent); color: #fff; border-radius: var(--radius);
  text-decoration: none; font-weight: 700;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-3); }

/* ---------- Fond animé (étoiles + grille synthwave + halos tramés) ---------- */
.bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-fx__grid {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 60vh;
  background-image:
    linear-gradient(rgba(255, 62, 165, .45) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 62, 165, .45) 2px, transparent 2px);
  background-size: 64px 64px;
  transform: perspective(380px) rotateX(62deg);
  transform-origin: center top;
  mask-image: linear-gradient(to top, rgba(0,0,0,.85), transparent 85%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.85), transparent 85%);
  animation: grid-scroll 6s linear infinite;
  opacity: .5;
}
@keyframes grid-scroll { to { background-position: 0 64px, 0 0; } }
.bg-fx__glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .45; }
.bg-fx__glow--a { width: 520px; height: 520px; background: #ff3ea5; top: -180px; left: -140px; opacity: .3; }
.bg-fx__glow--b { width: 480px; height: 480px; background: #4b2bff; top: 20%; right: -180px; opacity: .28; }
/* Trame (dithering 2×2) posée sur les halos : dégradés « 256 couleurs » */
.bg-fx__dither {
  position: absolute; inset: 0;
  background: repeating-conic-gradient(var(--bg) 0 25%, transparent 0 50%) 0 0 / 4px 4px;
  opacity: .55;
}
/* Ciel étoilé en tuiles + étoiles à 4 branches qui scintillent */
.bg-fx__stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 8% 14%, #fff, transparent),
    radial-gradient(1px 1px at 23% 41%, #ffc2e3, transparent),
    radial-gradient(1.5px 1.5px at 37% 9%, #fff, transparent),
    radial-gradient(1px 1px at 52% 33%, #bff6ff, transparent),
    radial-gradient(1px 1px at 66% 18%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 79% 46%, #fff, transparent),
    radial-gradient(1px 1px at 91% 7%, #ffc2e3, transparent),
    radial-gradient(1px 1px at 14% 62%, #fff, transparent),
    radial-gradient(1px 1px at 45% 58%, #fff, transparent),
    radial-gradient(1px 1px at 86% 66%, #bff6ff, transparent);
  background-size: 640px 520px;
  opacity: .8;
}
.bg-fx__twinkles { position: absolute; inset: 0; }
.bg-fx__twinkle {
  position: absolute; width: 14px; aspect-ratio: 1; background: #fff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px var(--accent));
  animation: bg-twinkle 3.6s ease-in-out infinite;
}
.bg-fx__twinkle:nth-child(1) { top: 18%; left: 6%; }
.bg-fx__twinkle:nth-child(2) { top: 9%; left: 58%; width: 10px; animation-delay: 1.1s; }
.bg-fx__twinkle:nth-child(3) { top: 36%; right: 7%; width: 12px; animation-delay: 2.3s; }
.bg-fx__twinkle:nth-child(4) { top: 64%; left: 22%; width: 9px; animation-delay: .6s; }
.bg-fx__twinkle:nth-child(5) { top: 52%; left: 81%; width: 8px; animation-delay: 1.8s; }
@keyframes bg-twinkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: .25; } 50% { transform: scale(1) rotate(45deg); opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .bg-fx__grid, .bg-fx__twinkle { animation: none; } }

/* Écran CRT : scanlines légères + grain, par-dessus tout (non interactif) */
.crt {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .13) 2px 3px),
    radial-gradient(120% 90% at 50% 45%, transparent 62%, rgba(0, 0, 0, .35) 100%);
}
.crt::after { /* grain */
  content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { .crt { display: none; } }

/* ---------- Layout ---------- */
.site-main { flex: 1; width: 100%; padding-top: var(--nav-h); }
.container { width: min(var(--container), 100% - 2 * var(--space-4)); margin-inline: auto; }
.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-7); }
.stack > * + * { margin-top: var(--space-4); }
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* ---------- Typo ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; letter-spacing: .01em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 4rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); }
h3 { font-size: 1.15rem; }
p { max-width: 68ch; }
.lead { font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); color: var(--text-muted); }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); letter-spacing: .04em; }

/* Gros titres façon WordArt : chrome + extrusion rose + halo */
.site-main h1 {
  background: linear-gradient(180deg, #ffffff 0%, #f4ecff 38%, #b9a6dc 50%, #6e5a96 53%, #e7dcff 78%, #ffffff 100%);
  background-size: 100% 1.1em; background-size: 100% 1lh; /* reflet chromé répété à chaque ligne */
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter:
    drop-shadow(1px 1px 0 #b0126b) drop-shadow(1px 1px 0 #8a0c55) drop-shadow(1px 1px 0 #5a0838)
    drop-shadow(0 0 14px rgba(255, 62, 165, .45));
  padding-bottom: .06em;
}
.site-main h2 { text-shadow: 2px 2px 0 #7a0f4f, 0 0 18px rgba(255, 62, 165, .35); }
.site-main h1 .muted { -webkit-text-fill-color: currentColor; color: var(--text-muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-pixel); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-2);
  text-shadow: 0 0 8px rgba(57, 225, 255, .45);
}
.eyebrow::before {
  content: ""; width: 12px; height: 12px; flex-shrink: 0;
  background: currentColor;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 4px currentColor);
  animation: eyebrow-spin 4s linear infinite;
}
@keyframes eyebrow-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .eyebrow::before { animation: none; } }

.text-gradient {
  background: linear-gradient(180deg, #ffd1ec 0%, #ff4fb0 45%, #c9248f 52%, #b388ff 78%, #7ef0ff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.text-chrome {
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(255, 62, 165, .55));
}

/* Texte qui clignote… avec modération (lent, jamais éteint) */
.blink { animation: blink 1.6s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

/* Pastille « NEW! » en étoile */
.new-burst {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 3.4em; aspect-ratio: 1; margin-inline: .3em;
  font-family: var(--font-pixel); font-size: .62rem; line-height: 1; color: #2a0016;
  background: radial-gradient(circle at 40% 35%, #fff6a8, #ffc61a 55%, #ff8a00);
  clip-path: polygon(50% 0, 61% 18%, 82% 10%, 80% 32%, 100% 40%, 85% 55%, 98% 74%, 76% 76%, 70% 98%, 52% 86%, 32% 100%, 27% 79%, 4% 78%, 15% 58%, 0 40%, 20% 31%, 17% 9%, 38% 17%);
  transform: rotate(-12deg);
  animation: burst-pulse 1.8s ease-in-out infinite;
}
@keyframes burst-pulse { 50% { transform: rotate(-12deg) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .new-burst { animation: none; } }

.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.section-head p { color: var(--text-muted); }

/* ---------- Navigation : barre façon XP / Aqua ---------- */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 48%, rgba(0,0,0,0) 50%),
    linear-gradient(180deg, #2c1656 0%, #1c0c3c 50%, #12072a 51%, #1e0d40 100%);
  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 rgba(0,0,0,.35);
  transition: box-shadow var(--dur) var(--ease);
}
.site-nav.is-scrolled { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.55); }
.site-nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: linear-gradient(90deg, #ff3ea5, #b388ff, #39e1ff, #ffc61a, #ff3ea5);
  background-size: 200% 100%;
}
.site-nav__inner {
  height: 100%;
  width: min(var(--container), 100% - 2 * var(--space-4)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
}
.site-nav__brand { display: flex; align-items: center; flex-shrink: 0; }
.site-nav__brand img {
  height: 54px; width: auto; margin-left: -10px;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.site-nav__brand:hover img { transform: translateY(-1px) rotate(-2deg) scale(1.03); filter: drop-shadow(0 0 12px rgba(255, 62, 165, .6)); }

.site-nav__links { display: flex; align-items: center; gap: 3px; }
.site-nav__links a {
  position: relative;
  padding: 5px 13px;
  border: 1px solid transparent; border-radius: 4px;
  font-family: var(--font-ui); font-weight: 700; font-size: .86rem; text-decoration: none;
  color: #e6dcf5;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* survol : bouton de barre d'outils qui se « soulève » */
.site-nav__links a:hover {
  color: #fff;
  border-color: rgba(255,255,255,.35) rgba(0,0,0,.6) rgba(0,0,0,.6) rgba(255,255,255,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
}
/* actif : gel Aqua rose */
.site-nav__links a.is-active {
  color: #fff; border-color: #6a0638; border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.2) 46%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #ff5fb8 0%, #d8127c 55%, #ff4fb0 100%);
  box-shadow: 0 0 12px rgba(255, 62, 165, .55), inset 0 -2px 4px rgba(120, 0, 60, .5);
  text-shadow: 0 1px 1px rgba(90, 0, 45, .8);
}

.site-nav__toggle {
  display: none;
  width: 44px; height: 40px; padding: 0;
  background: var(--silver); border: 1px solid #000; border-radius: 4px;
  box-shadow: inset -1px -1px 0 #9a8cb5, inset 1px 1px 0 #fff;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.site-nav__toggle span { width: 20px; height: 3px; background: #2a1840; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.site-nav.is-open .site-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.is-open .site-nav__toggle span:nth-child(2) { opacity: 0; }
.site-nav.is-open .site-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .site-nav__toggle { display: flex; }
  /* menu déroulant : un vrai menu Démarrer */
  .site-nav__links {
    position: absolute; top: calc(var(--nav-h) + 2px); left: var(--space-3); right: var(--space-3);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: var(--space-2) var(--space-2) var(--space-2) 34px;
    background:
      linear-gradient(180deg, #ff4fb0, #8a0c55) 0 0 / 26px 100% no-repeat,
      var(--win-face);
    border: 2px solid; border-color: var(--win-hi) var(--win-lo) var(--win-lo) var(--win-hi);
    box-shadow: var(--hard-shadow);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .site-nav__links::before {
    content: "WAY-BE 2000"; position: absolute; left: 4px; bottom: 10px;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--font-ui); font-weight: 700; font-size: .85rem; color: rgba(255,255,255,.9);
  }
  .site-nav.is-open .site-nav__links { transform: none; opacity: 1; visibility: visible; }
  .site-nav__links a { padding: var(--space-3) var(--space-4); font-size: 1rem; border-radius: 2px; }
  .site-nav__links a:hover, .site-nav__links a.is-active { border-radius: 2px; }
}

/* ---------- Ticker (marquee) sous la nav ---------- */
.ticker {
  position: relative; overflow: hidden; white-space: nowrap;
  height: 30px; display: flex; align-items: center;
  background: linear-gradient(180deg, #05020c, #120a24);
  border-bottom: 1px solid rgba(255, 62, 165, .35);
  font-family: var(--font-mono); font-size: 1.2rem; letter-spacing: .06em; color: #ffd6ee;
  text-shadow: 0 0 6px rgba(255, 62, 165, .7);
}
.ticker__label {
  position: relative; z-index: 1; flex-shrink: 0; height: 100%;
  display: flex; align-items: center; padding: 0 var(--space-3);
  background: var(--win-title); color: #fff;
  font-family: var(--font-pixel); font-size: .68rem; letter-spacing: .06em; text-shadow: 1px 1px 0 #5a0838;
  box-shadow: 4px 0 10px rgba(0,0,0,.6);
}
.ticker__viewport { flex: 1; min-width: 0; overflow: hidden; }
.ticker__track { display: inline-flex; animation: ticker 48s linear infinite; }
.ticker__track > span { padding-right: 2.5em; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker b { color: var(--accent-yellow); font-weight: 400; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---------- Footer : le pied de page des années 2000 ---------- */
.site-footer {
  margin-top: var(--space-8);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,0) 40%),
    #0d0620;
  border-top: 2px solid; border-image: linear-gradient(90deg, #ff3ea5, #b388ff, #39e1ff) 1;
}
.site-footer__inner {
  width: min(var(--container), 100% - 2 * var(--space-4)); margin-inline: auto;
  padding-block: var(--space-5);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5);
  font-size: .85rem; color: var(--text-muted);
}
.site-footer__brand .mono { color: var(--accent); font-size: 1.2rem; }
.site-footer a { color: var(--accent-2); }
.site-footer a:hover { color: #fff; }

.retro-foot {
  width: 100%;
  display: grid; gap: var(--space-4); justify-items: center; text-align: center;
  padding-bottom: var(--space-5); margin-bottom: var(--space-2);
  border-bottom: 1px dashed rgba(255, 140, 220, .25);
}
.retro-foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-5); }

/* Compteur de visites LCD */
.counter { display: inline-flex; align-items: center; gap: var(--space-2); font-size: .82rem; }
.counter__digits {
  display: inline-flex; gap: 2px; padding: 3px;
  background: #000; border: 2px solid; border-color: var(--win-lo) var(--win-hi) var(--win-hi) var(--win-lo);
}
.counter__digits span {
  display: inline-block; width: .62em; text-align: center;
  background: linear-gradient(180deg, #1a0710 0 49%, #000 50%);
  font-family: var(--font-mono); font-size: 1.45rem; line-height: 1.1; color: #ff4fb0;
  text-shadow: 0 0 6px rgba(255, 62, 165, .9);
}

/* Webring */
.webring {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--space-2);
  padding: 4px var(--space-2);
  border: 2px solid; border-color: var(--win-hi) var(--win-lo) var(--win-lo) var(--win-hi);
  background: var(--win-face); font-family: var(--font-ui); font-size: .8rem;
}
.webring__name { color: var(--text); font-weight: 700; padding-inline: var(--space-2); }
.webring a { text-decoration: none; padding: 1px 6px; }
.webring a:hover { background: #000080; color: #fff; }

/* Boutons 88×31 */
.b88s { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.b88 {
  position: relative; display: flex; align-items: center; overflow: hidden;
  width: 88px; height: 31px;
  border: 1px solid; border-color: #c9b8ea #1a0b2c #1a0b2c #c9b8ea;
  background: #000; color: #fff; text-decoration: none;
  font-family: var(--font-pixel); font-size: 8px; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase;
  image-rendering: pixelated;
  transition: transform 150ms var(--ease), filter 150ms var(--ease);
}
a.b88:hover, button.b88:hover { transform: translateY(-2px); filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 62, 165, .7)); }
.b88__ico { flex-shrink: 0; display: grid; place-items: center; width: 27px; height: 100%; font-size: 15px; font-family: var(--font-ui); text-transform: none; }
.b88__txt { flex: 1; padding: 0 3px; text-align: center; }
.b88__txt b { display: block; font-size: 10px; font-weight: 400; }
.b88--waybe { background: linear-gradient(180deg, #ff6fbf, #a00a5a); text-shadow: 1px 1px 0 #3a0022; }
.b88--waybe .b88__ico { background: #000; color: var(--accent-yellow); }
.b88--netscape { background: linear-gradient(180deg, #0b2a6e, #000); }
.b88--netscape .b88__ico { background: radial-gradient(circle at 50% 120%, #39e1ff, #0a4a8a 60%, #00102a); color: #fff; font-weight: 700; }
.b88--ie { background: linear-gradient(180deg, #e9f2ff, #8fb2e6); color: #002a72; }
.b88--ie .b88__ico { color: #1a5bd6; font-weight: 700; font-style: italic; font-size: 18px; }
.b88--telraam { background: linear-gradient(180deg, #7dffb8, #2ae38a); color: #00140a; }
.b88--telraam .b88__ico { background: #001a0d; color: #5dffb0; }
.b88--html { background: #fff; color: #000; }
.b88--html .b88__ico { background: #ffc61a; color: #000; font-weight: 700; font-size: 11px; }
.b88--flask { background: repeating-linear-gradient(45deg, #1d1236 0 4px, #2b1a4f 4px 8px); color: #bff6ff; }
.site-footer a.b88--waybe { color: #fff; }
.site-footer a.b88--telraam { color: #00140a; }
.b88--book { background: linear-gradient(180deg, #ffe680, #ff9d00); color: #3a1a00; cursor: pointer; padding: 0; }
.b88--book .b88__ico { background: #3a1a00; color: #ffe680; }

/* Sous construction */
.construction {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 4px var(--space-4) 4px 4px;
  background: #ffc61a; color: #1a1000;
  font-family: var(--font-pixel); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  border: 2px solid #000;
}
.construction__tape {
  width: 36px; height: 22px;
  background: repeating-linear-gradient(-45deg, #000 0 6px, #ffc61a 6px 12px);
  border: 1px solid #000;
  animation: tape 1.2s linear infinite;
  background-size: 17px 17px;
}
@keyframes tape { to { background-position: 17px 0; } }
@media (prefers-reduced-motion: reduce) { .construction__tape { animation: none; } }
.best-viewed { font-family: var(--font-pixel); font-size: .66rem; letter-spacing: .05em; color: var(--text-muted); text-transform: uppercase; }

/* ---------- Barre d'état façon Internet Explorer ---------- */
.statusbar { display: none; }
@media (min-width: 900px) and (pointer: fine) {
  body.has-statusbar { padding-bottom: 26px; }
  .statusbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    display: grid; grid-template-columns: minmax(0, 1fr) 190px 150px; gap: 2px;
    height: 26px; padding: 2px;
    background: linear-gradient(180deg, #2a1a48, #1a0f30);
    border-top: 1px solid var(--win-hi);
    font-family: var(--font-ui); font-size: .74rem; color: #e6dcf5;
  }
  .statusbar > div {
    display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 8px;
    border: 1px solid; border-color: var(--win-lo) rgba(255,255,255,.18) rgba(255,255,255,.18) var(--win-lo);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .statusbar__text { overflow: hidden; text-overflow: ellipsis; }
  .statusbar__ico { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #bff6ff, #1a7fd6 55%, #0b2a6e); box-shadow: inset -2px -1px 0 rgba(93, 255, 176, .7); }
}
/* Barre de progression XP (segments) — réutilisable */
.xp-progress {
  position: relative; height: 14px; width: 100%;
  background: #05020c; border: 1px solid; border-color: var(--win-lo) var(--win-hi) var(--win-hi) var(--win-lo);
  border-radius: 3px; overflow: hidden; padding: 1px;
}
.xp-progress i {
  display: block; height: 100%; width: var(--p, 0%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 45%, rgba(0,0,0,.15)),
    var(--accent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 9px);
  mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 9px);
  transition: width 200ms linear;
}

/* ---------- Boutons ---------- */
/* .btn par défaut et --ghost : bouton argenté façon XP ; --primary : gel Aqua rose */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5);
  border: 1px solid #1a0b2c; border-radius: 5px;
  background: var(--silver); color: #23123a;
  box-shadow: inset -1px -2px 0 rgba(120, 95, 170, .35), inset 1px 1px 0 #fff, 0 2px 0 rgba(0, 0, 0, .45);
  font-family: var(--font-ui); font-weight: 700; font-size: .95rem; text-decoration: none; letter-spacing: .01em;
  cursor: pointer;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), filter 150ms var(--ease);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: inset -1px -2px 0 rgba(120, 95, 170, .35), inset 0 0 0 2px #ffb3dd, 0 3px 0 rgba(0, 0, 0, .45), 0 0 14px rgba(255, 62, 165, .45);
}
.btn:active { transform: translateY(1px); box-shadow: inset 1px 1px 2px rgba(60, 30, 90, .6), 0 1px 0 rgba(0,0,0,.45); }
.btn:disabled { filter: grayscale(.8) opacity(.6); cursor: not-allowed; transform: none; }
.btn--primary {
  border-color: #5a0434; border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #ff86c8 0%, #e8238f 48%, #c40c6f 62%, #e3348f 100%);
  color: #fff;
  text-shadow: 0 1px 1px rgba(80, 0, 40, .85);
  box-shadow: 0 4px 14px rgba(255, 62, 165, .45), inset 0 -3px 6px rgba(255, 170, 215, .45), 0 1px 0 rgba(0,0,0,.5);
}
.btn--primary::before { /* reflet gel */
  content: ""; position: absolute; z-index: -1; left: 10px; right: 10px; top: 2px; height: 46%;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.12));
  pointer-events: none;
}
.btn--primary:hover { box-shadow: var(--accent-glow), inset 0 -3px 6px rgba(255, 170, 215, .5); filter: saturate(1.15) brightness(1.05); }
.btn--primary:active { box-shadow: inset 0 2px 6px rgba(80, 0, 40, .6); }
.btn--ghost { /* = bouton argenté */ }
.btn--sm { min-height: 34px; padding: 0 var(--space-4); font-size: .85rem; }
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Fenêtres (panels) ---------- */
.panel {
  --pad: var(--space-6);
  position: relative;
  padding: var(--pad);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(26, 16, 48, .94), rgba(18, 10, 36, .94));
  border: 2px solid; border-color: var(--win-hi) var(--win-lo) var(--win-lo) var(--win-hi);
  border-radius: 8px 8px 3px 3px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.08), 0 0 0 1px #000, var(--hard-shadow);
}
@media (max-width: 560px) { .panel { --pad: var(--space-5); } }
.panel--glow { box-shadow: inset 1px 1px 0 rgba(255,255,255,.08), 0 0 0 1px #000, var(--hard-shadow), 0 0 34px rgba(255, 62, 165, .28); }
.panel--glow::before {
  content: ""; position: absolute; inset: -3px; border-radius: 10px 10px 5px 5px; padding: 1px; pointer-events: none;
  background: var(--gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .8;
}
.panel__title { font-size: 1.1rem; margin-bottom: var(--space-3); }

/* Barre de titre : Win98 dans le cadre, dégradé Luna rose, boutons _ □ × */
.window-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 30px;
  margin: calc(-1 * var(--pad, var(--space-6)) + 2px) calc(-1 * var(--pad, var(--space-6)) + 2px) var(--space-5);
  padding: 3px 4px 3px 8px;
  border-radius: 6px 6px 0 0;
  background: var(--win-title);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.35);
  font-family: var(--font-ui); font-weight: 700; font-size: .84rem; letter-spacing: .01em; color: #fff;
  text-shadow: 1px 1px 0 #5a0838;
  user-select: none;
}
.window-bar > span:first-child {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.window-bar > span:first-child::before { /* icône de fenêtre */
  content: ""; flex-shrink: 0; width: 14px; height: 12px;
  background: linear-gradient(#000080 0 3px, #fff 3px) ; border: 1px solid #000;
  box-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.window-bar__dots { display: flex; gap: 2px; flex-shrink: 0; }
.window-bar__dots i {
  position: relative; width: 21px; height: 21px; border-radius: 3px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #ffe6f3, #ff9fd3 50%, #f070b5);
  border: 1px solid #fff; outline: 1px solid rgba(90, 8, 56, .7); outline-offset: -2px;
  box-shadow: 0 0 0 1px #6a0638;
  font-style: normal; font-family: var(--font-ui); font-weight: 900; font-size: 12px; line-height: 1; color: #fff;
  text-shadow: 0 0 2px #6a0638, 0 0 2px #6a0638;
}
.window-bar__dots i::before { content: "_"; transform: translateY(-3px); }
.window-bar__dots i:nth-child(2)::before { content: ""; width: 9px; height: 8px; border: 1px solid #fff; border-top-width: 3px; box-shadow: 0 0 1px #6a0638; transform: none; }
.window-bar__dots i:last-child { background: linear-gradient(180deg, #ffb39a, #f0603a 50%, #d0391a); }
.window-bar__dots i:last-child::before { content: "×"; font-size: 17px; transform: translateY(-1px); }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 3px var(--space-3);
  border: 1px solid; border-color: var(--win-hi) var(--win-lo) var(--win-lo) var(--win-hi);
  background: var(--win-face);
  font-family: var(--font-pixel); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: #ffc2e3;
}

kbd {
  display: inline-block; padding: 0 7px; border-radius: 3px;
  border: 1px solid #1a0b2c; background: var(--silver); color: #23123a;
  box-shadow: inset -1px -2px 0 rgba(120, 95, 170, .35), 0 2px 0 #000;
  font-family: var(--font-ui); font-size: .8rem; font-weight: 700;
}

/* ---------- Formulaires : champs « creusés » Win98 ---------- */
.field { display: grid; gap: var(--space-2); }
label, .label { font-family: var(--font-ui); font-size: .8rem; font-weight: 700; letter-spacing: .03em; color: var(--text-muted); }
.input, .site-main input[type="text"], .site-main input[type="date"], .site-main input[type="time"],
.site-main input[type="number"], .site-main select, .site-main textarea {
  width: 100%; min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: #07030f;
  border: 2px solid; border-color: var(--win-lo) var(--win-hi) var(--win-hi) var(--win-lo);
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.8);
  color: #fff; font-family: var(--font-mono); font-size: 1.25rem; letter-spacing: .04em;
  transition: box-shadow var(--dur) var(--ease);
}
.site-main select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px; font-family: var(--font-ui); font-size: .95rem;
  background-image:
    linear-gradient(45deg, transparent 50%, #23123a 50%), linear-gradient(135deg, #23123a 50%, transparent 50%),
    var(--silver);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%, 100% 0;
  background-size: 5px 5px, 5px 5px, 28px 100%;
  background-repeat: no-repeat;
}
.site-main select option { background: var(--bg-elev); color: var(--text); }
.site-main input:focus, .site-main select:focus, .site-main textarea:focus {
  outline: none; box-shadow: inset 1px 1px 0 rgba(0,0,0,.8), 0 0 0 2px var(--accent), 0 0 14px rgba(255, 62, 165, .45);
}
.site-main input[type="date"]::-webkit-calendar-picker-indicator,
.site-main input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) hue-rotate(280deg); cursor: pointer; }
.site-main input[type="submit"], .site-main button[type="submit"]:not(.btn) {
  min-height: 44px; padding: 0 var(--space-5);
  border: 1px solid #5a0434; border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #ff86c8 0%, #e8238f 48%, #c40c6f 62%, #e3348f 100%); color: #fff;
  font-family: var(--font-ui); font-weight: 700; cursor: pointer;
  text-shadow: 0 1px 1px rgba(80, 0, 40, .85);
  box-shadow: 0 4px 14px rgba(255, 62, 165, .45);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-main input[type="submit"]:hover, .site-main button[type="submit"]:not(.btn):hover { transform: translateY(-1px); box-shadow: var(--accent-glow); }

/* ---------- Tableaux : liste façon Explorateur ---------- */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid rgba(255, 140, 220, .12); }
.table th {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700; color: #23123a;
  background: var(--silver);
  border: 1px solid; border-color: #fff #6e5a96 #6e5a96 #fff;
}
.table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .025); }
.table tbody tr:hover { background: #000080; color: #fff; }

/* ---------- Stats / chiffres ---------- */
.stat { display: grid; gap: var(--space-1); }
.stat__value { font-family: var(--font-display); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); font-weight: 900; line-height: 1; }
.stat__label { font-size: .82rem; color: var(--text-muted); letter-spacing: .02em; }

/* ---------- Boîte de dialogue XP (livre d'or) ---------- */
.xp-dialog {
  width: min(440px, calc(100% - 32px)); padding: 0; color: var(--text);
  background: var(--win-face);
  border: 2px solid; border-color: var(--win-hi) var(--win-lo) var(--win-lo) var(--win-hi);
  border-radius: 8px 8px 3px 3px;
  box-shadow: 0 0 0 1px #000, 8px 8px 0 rgba(0,0,0,.55), 0 0 40px rgba(255, 62, 165, .35);
}
.xp-dialog::backdrop { background: rgba(5, 2, 12, .6); backdrop-filter: grayscale(.6); }
.xp-dialog .window-bar { --pad: 0px; margin: 0 0 0; border-radius: 6px 6px 0 0; }
.xp-dialog .window-bar__dots button { all: unset; display: grid; cursor: pointer; border-radius: 3px; }
.xp-dialog .window-bar__dots button:focus-visible { outline: 1px dotted #fff; outline-offset: 1px; }
.xp-dialog__body { padding: var(--space-5); display: grid; gap: var(--space-4); font-size: .9rem; }
.guestbook { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.guestbook li {
  padding: var(--space-3); background: #07030f;
  border: 2px solid; border-color: var(--win-lo) var(--win-hi) var(--win-hi) var(--win-lo);
}
.guestbook b { color: var(--accent); }
.guestbook time { float: right; font-family: var(--font-mono); font-size: 1rem; color: var(--text-muted); }
.xp-dialog__actions { display: flex; justify-content: flex-end; }

/* ---------- Sparkles qui suivent la souris (y2k.js) ---------- */
.spark {
  position: fixed; z-index: 160; pointer-events: none; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 3px var(--c, #ff3ea5));
  animation: spark-fade 750ms ease-out forwards;
}
@keyframes spark-fade { to { transform: translate(var(--dx, 0), 22px) scale(.1) rotate(90deg); opacity: 0; } }

/* ---------- Animations utilitaires ---------- */
/* [data-reveal] : apparition au scroll (JS). Sans JS, tout reste visible. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 90ms; }
[data-reveal][data-delay="2"] { transition-delay: 180ms; }
[data-reveal][data-delay="3"] { transition-delay: 270ms; }
/* .rise : apparition au chargement (CSS pur, pour le haut de page) */
.rise { animation: rise 800ms var(--ease) both; }
.rise[data-delay="1"] { animation-delay: 90ms; }
.rise[data-delay="2"] { animation-delay: 180ms; }
.rise[data-delay="3"] { animation-delay: 270ms; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } .rise { animation: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Compat temporaire : pages encore en {% block body %} ---------- */
.legacy-page:empty { display: none; }
.legacy-page > nav { display: none; } /* l'ancienne nav de chaque template est remplacée par .site-nav */
.legacy-page { width: min(var(--container), 100% - 2 * var(--space-4)); margin: var(--space-6) auto 0; }

/* ---------- Transitions entre pages ----------
   1) View Transitions natives (navigateurs qui les supportent entre documents) :
      la nav et le fond restent fixes, seul le contenu fond/glisse.
   2) Repli JS (.no-vt) : le contenu s'efface au clic, puis réapparaît sur la page suivante. */
.bg-fx__grid { animation-delay: var(--grid-delay, 0s); }

@view-transition { navigation: auto; }
.site-nav { view-transition-name: site-nav; }
.bg-fx    { view-transition-name: bg-fx; }

::view-transition-group(site-nav),
::view-transition-group(bg-fx),
::view-transition-new(site-nav),
::view-transition-new(bg-fx) { animation: none; }
::view-transition-old(site-nav),
::view-transition-old(bg-fx) { display: none; }

::view-transition-old(root) { animation: page-out 200ms var(--ease) both; }
::view-transition-new(root) { animation: page-in 420ms var(--ease) both; }

@keyframes page-out { to   { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }
@keyframes page-in  { from { opacity: 0; transform: translateY(14px);  filter: blur(6px); } }

.no-vt .site-main,
.no-vt .site-footer { animation: page-in 420ms var(--ease) backwards; }
.no-vt.is-leaving .site-main,
.no-vt.is-leaving .site-footer {
  animation: none;
  opacity: 0; transform: translateY(-10px); filter: blur(4px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), filter 180ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .no-vt .site-main, .no-vt .site-footer { animation: none; }
  .no-vt.is-leaving .site-main, .no-vt.is-leaving .site-footer { opacity: 1; transform: none; filter: none; transition: none; }
}