/* monkeyneon.app — l'accueil et les pages d'information, en pixel art.
   Unité de base : 4 px (3 px sur petit écran) ; le ciel, les icônes et les cadres partagent la même grille.
   Tout le texte est posé sur une plaque sombre pleine : sa lisibilité ne dépend jamais du ciel.
   Le néon (halos flous) n'habille que les cadres et le logo, jamais le texte courant. */
:root{--s:72px;--px:4px;--ink:#fff6e4;--plaque:#150d2b;--plaque2:#1e1440;--bord:#6b4fd0;--or:#ffd24d;--rose:#ff4fd8;--cyan:#4dd0ff;
  --font:'Pixelify Sans','Courier New',monospace;
  --texte:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
/* Un cadre en marches d'escalier : 4 ombres pleines = coins coupés au pixel, de la couleur --c de l'élément.
   Déclaré sur chaque élément qui s'en sert : posé sur :root, var(--c) y serait résolu trop tôt (à vide). */
.top,.tag,.tile,.lbl,.bubble,.foot a,.doc,.retour{
  --cadre:0 calc(var(--px)*-1) 0 0 var(--c),0 var(--px) 0 0 var(--c),calc(var(--px)*-1) 0 0 0 var(--c),var(--px) 0 0 0 var(--c)}
/* Les icônes sont dessinées sur 24 × 24 : on ne les affiche qu'à des multiples entiers (48, 72, 96 px), sinon les pixels seraient inégaux. */
@media(min-width:700px){:root{--s:96px}}
@media(max-width:410px){:root{--px:3px}}
@media(max-width:340px){:root{--s:48px}}

@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/pixelify-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:#07061c;color-scheme:dark}
html,body{min-height:100%}
body{font-family:var(--font);font-variant-ligatures:none;color:var(--ink);background:#07061c;overflow-x:hidden;-webkit-font-smoothing:none}
a{color:inherit}
.sprites{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Le ciel : un canevas fixe derrière tout. Il apparaît en fondu une fois peint. */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;opacity:0;
  image-rendering:pixelated;image-rendering:crisp-edges}
#sky.pret{opacity:1;transition:opacity .4s}
/* Le décor « cabane » (decor.js, voir le README) est DE CÔTÉ depuis le 15/10/2026 : aucune page ne le charge, on est revenu au ciel
   pixel (#sky, ciel.js). Ces règles attendent son retour : un canevas fixe derrière tout, qui apparaît en fondu une fois peint. */
#decor{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;opacity:0;
  image-rendering:pixelated;image-rendering:crisp-edges}
#decor.pret{opacity:1;transition:opacity .5s}
.fiche #decor.pret,.sombre #decor.pret{opacity:.5}   /* assombri derrière une fiche ou la 404 */
/* Par-dessus le ciel, un voile d'écran cathodique : des lignes de balayage à peine visibles et des coins assombris. */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.07) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(4,3,18,.55) 100%)}

.frame{position:relative;z-index:2;min-height:100vh;min-height:100svh;max-width:470px;margin:0 auto;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px,env(safe-area-inset-left))}
@media(min-width:700px){.frame{max-width:540px}}
.frame.large{max-width:760px}

/* La barre du haut : l'heure, l'enseigne au néon */
.top{--c:var(--bord);display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;padding:12px 12px 13px;
  background:linear-gradient(to bottom,var(--plaque2),var(--plaque));
  box-shadow:var(--cadre),inset 0 var(--px) 0 0 rgba(255,255,255,.07),0 0 22px 2px rgba(107,79,208,.45),0 calc(var(--px)*3) 0 0 rgba(0,0,0,.35)}
.clock,.cale{width:46px;flex:none}
.clock{font-size:17px;letter-spacing:1px;font-variant-numeric:tabular-nums;color:#a9f5c4;text-shadow:0 0 6px rgba(98,245,138,.55)}
.logo{font-size:23px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:#ffe9fb;
  text-shadow:3px 3px 0 #b02a78,0 0 6px rgba(255,79,216,.9),0 0 16px rgba(255,79,216,.55),0 0 30px rgba(255,79,216,.3);
  animation:neon 7s steps(1) infinite}
@media(max-width:360px){.clock,.cale{width:40px}.logo{font-size:19px;letter-spacing:1px}}
.logo i{display:inline-block;width:10px;height:18px;margin-left:5px;vertical-align:-2px;background:var(--ink);box-shadow:0 0 8px rgba(255,79,216,.8);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* l'enseigne grésille une fois de temps en temps, comme un vrai tube */
@keyframes neon{0%,90%,93%,96%,100%{opacity:1}91%,95%{opacity:.55}}
a.logo:hover{color:#fff}

main:not(.doc){flex:1;display:flex;flex-direction:column}
.tag{--c:var(--plaque);position:relative;align-self:center;margin:26px 0 26px;padding:6px 14px 7px 30px;font-size:16px;line-height:1.25;color:#ffe9b8;background:var(--plaque);
  box-shadow:var(--cadre),0 0 0 calc(var(--px)*2) rgba(255,210,77,.16)}
/* une petite étoile qui scintille devant la phrase */
.tag::before{content:"";position:absolute;left:12px;top:50%;width:var(--px);height:var(--px);margin-top:calc(var(--px)*-.5);background:var(--or);
  box-shadow:0 calc(var(--px)*-1) 0 0 var(--or),0 var(--px) 0 0 var(--or),calc(var(--px)*-1) 0 0 0 var(--or),var(--px) 0 0 0 var(--or),0 0 8px 2px rgba(255,210,77,.6);
  animation:scintille 2.2s steps(1) infinite}
@keyframes scintille{50%{transform:scale(.5)}}

/* Les neuf tuiles : un carré de 3 × 3 */
.grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 10px;justify-items:center;align-content:start}
.grid li{width:100%;display:flex;justify-content:center}
.grid li:nth-child(2){--i:1}.grid li:nth-child(3){--i:2}.grid li:nth-child(4){--i:3}.grid li:nth-child(5){--i:4}
.grid li:nth-child(6){--i:5}.grid li:nth-child(7){--i:6}.grid li:nth-child(8){--i:7}.grid li:nth-child(9){--i:8}
.app{display:flex;flex-direction:column;align-items:center;gap:11px;text-decoration:none;color:var(--ink);width:100%;
  animation:pop .5s steps(5) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes pop{0%{transform:translateY(14px);opacity:0}100%{transform:none;opacity:1}}
.c-tou{--ac:#9b7bff}.c-ephemere{--ac:#ff5c8a}.c-agora{--ac:#5b9be0}.c-priceradar{--ac:#00e5b0}.c-troc{--ac:#5bbd6a}
.c-patte{--ac:#ff6b5e}.c-flane{--ac:#c9c0ad}.c-tastoff{--ac:#ff2e88}.c-bistro{--ac:#e0ad3f}
/* La tuile : une plaque sombre, presque opaque sur le décor, un liseré à la couleur de l'app et un halo discret. */
.tile{position:relative;overflow:hidden;width:calc(var(--s) + 12px);height:calc(var(--s) + 12px);display:grid;place-items:center;
  --a:color-mix(in srgb,var(--ac) 50%,#fff);--d:color-mix(in srgb,var(--ac) 55%,#000);
  --c:color-mix(in srgb,var(--ac) 78%,#000);
  background:linear-gradient(to bottom,color-mix(in srgb,var(--ac) 26%,rgba(17,11,38,.92)) 0 50%,color-mix(in srgb,var(--ac) 16%,rgba(17,11,38,.94)) 50%);
  box-shadow:var(--cadre),
    inset 0 var(--px) 0 0 rgba(255,255,255,.14),inset 0 calc(var(--px)*-1) 0 0 rgba(0,0,0,.35),
    0 calc(var(--px)*2) 0 0 rgba(0,0,0,.5),0 0 12px 1px color-mix(in srgb,var(--ac) 34%,transparent);
  transition:transform .12s steps(2),box-shadow .12s steps(2)}
/* le reflet : une bande de lumière passe une fois sur la tuile qu'on survole */
.tile::before{content:"";position:absolute;top:-20%;left:0;width:30%;height:140%;background:rgba(255,255,255,.2);
  box-shadow:calc(var(--px)*3) 0 0 0 rgba(255,255,255,.1);transform:translateX(-300%) skewX(-20deg)}
.app:hover .tile::before,.app:focus-visible .tile::before{animation:reflet .55s steps(8) 1}
@keyframes reflet{0%{transform:translateX(-300%) skewX(-20deg)}100%{transform:translateX(600%) skewX(-20deg)}}
.app:hover .tile,.app:focus-visible .tile{transform:translateY(calc(var(--px)*-1));--c:var(--ac);
  box-shadow:var(--cadre),
    inset 0 var(--px) 0 0 rgba(255,255,255,.22),inset 0 calc(var(--px)*-1) 0 0 rgba(0,0,0,.35),
    0 calc(var(--px)*3) 0 0 rgba(0,0,0,.5),0 0 20px 3px color-mix(in srgb,var(--ac) 60%,transparent)}
.app:hover .spr,.app:focus-visible .spr{animation:sautille .5s steps(2) infinite}
@keyframes sautille{50%{transform:translateY(calc(var(--px)*-1))}}
.app:active .tile{transform:translateY(var(--px))}
.spr{position:relative;width:var(--s);height:var(--s);display:block;shape-rendering:crispEdges;filter:drop-shadow(0 var(--px) 0 rgba(0,0,0,.3))}
.sw{fill:#fff3d6}.sk{fill:var(--plaque)}.sh{fill:#fff}.ss{fill:#e2c48f}.sa{fill:var(--a)}.sm{fill:var(--ac)}.sd{fill:var(--d)}
.lbl{--c:var(--plaque);max-width:100%;padding:.25em .55em .3em;font-size:clamp(12px,3.7vw,15px);line-height:1.1;text-align:center;overflow-wrap:anywhere;background:var(--plaque);
  box-shadow:var(--cadre);border-bottom:2px solid color-mix(in srgb,var(--ac) 80%,#fff)}
.app:hover .lbl,.app:focus-visible .lbl{color:#fff;background:color-mix(in srgb,var(--ac) 25%,var(--plaque))}

/* Le clavier : un anneau crème cerclé de sombre, lisible sur n'importe quel ciel */
:focus{outline:none}
:focus-visible{outline:var(--px) solid var(--ink);outline-offset:0;box-shadow:0 0 0 calc(var(--px)*2) var(--plaque)}
.app:focus-visible{outline:none;box-shadow:none}
.app:focus-visible .lbl{outline:var(--px) solid var(--ink);outline-offset:var(--px)}

/* La bulle de la page introuvable (404) */
.bubble{--c:var(--ink);position:relative;flex:1;min-width:0;margin:0 var(--px) var(--px) 0;padding:11px 13px 12px;font:15px/1.38 var(--font);color:var(--plaque);background:var(--ink);
  box-shadow:var(--cadre),0 0 0 calc(var(--px)*2) var(--plaque),0 calc(var(--px)*3) 0 calc(var(--px)*1) rgba(0,0,0,.35)}
.bubble.neuve{animation:bulle .24s steps(3)}
@keyframes bulle{0%{transform:scale(.94);opacity:.4}100%{transform:none;opacity:1}}
.bubble::after{content:"";position:absolute;right:calc(var(--px)*-3);bottom:calc(var(--px)*2);border:calc(var(--px)*1.5) solid transparent;border-left:calc(var(--px)*2) solid var(--ink);border-right:0}
.bubble .nom{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac,#9b4dff) 50%,#2a0f4d)}
.bubble .nom::before{content:"";flex:none;width:calc(var(--px)*2);height:calc(var(--px)*2);background:var(--ac,#9b4dff);box-shadow:0 0 0 1px rgba(21,13,43,.5)}

/* ───────────── L'accueil (body.accueil) ─────────────
   L'accroche et les neuf apps forment un seul bloc, posé au milieu de l'écran (entre l'enseigne et le pied) :
   centré en largeur par le carré de 3 × 3, en hauteur par main. Toucher une tuile ouvre la fiche de l'app. */
.accueil main{justify-content:center;padding:18px 0}
.accueil .tag{margin:0 auto 28px}
.accueil .grid{margin:0 auto;width:100%}
.accueil .foot{padding-bottom:12px}
@media(max-height:700px){.accueil{--s:48px}.accueil .tag{margin-bottom:18px}.accueil .grid{gap:16px 8px}}
@media(max-height:520px){.accueil main{justify-content:flex-start}}

/* Le pied : les pages d'information */
.foot{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 10px;padding:4px 0 20px;margin-top:auto}
.foot a{--c:var(--bord);display:inline-flex;align-items:center;min-height:44px;padding:0 13px;font-size:13.5px;color:#d9c9ff;background:var(--plaque);
  box-shadow:var(--cadre);margin:var(--px);text-decoration:none;transition:color .12s steps(2),box-shadow .12s steps(2)}
.foot a:hover{color:var(--ink);--c:#a58bff;box-shadow:var(--cadre),0 0 14px 1px rgba(107,79,208,.7)}
.foot a:focus-visible{outline:var(--px) solid var(--ink);outline-offset:var(--px)}

/* Les pages d'information (mentions légales, confidentialité) */
.doc{--c:var(--bord);margin:26px var(--px) 26px;padding:26px 22px 16px;background:var(--plaque);color:var(--ink);font-family:var(--texte);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-wrap:anywhere;
  box-shadow:var(--cadre),inset 0 var(--px) 0 0 rgba(255,255,255,.06),0 0 26px 2px rgba(107,79,208,.35)}
.doc h1,.doc h2{font-family:var(--font);font-weight:700;line-height:1.2;-webkit-font-smoothing:none}
.doc h1{font-size:32px;margin:0 0 8px;color:#ffe9fb;text-shadow:3px 3px 0 #b02a78,0 0 10px rgba(255,79,216,.45)}
.doc h2{display:flex;align-items:center;gap:10px;font-size:21px;margin:32px 0 10px;padding-top:18px;border-top:2px dashed rgba(107,79,208,.7);color:var(--or)}
.doc h2::before{content:"";flex:none;width:8px;height:8px;background:var(--or);box-shadow:3px 3px 0 0 #8a5a00}
.doc h2:first-of-type{margin-top:26px}
.doc p,.doc ul,.doc dl{margin:0 0 14px}
.doc ul{padding-left:22px}
.doc li{margin-bottom:6px}
.doc li::marker{color:var(--or)}
.doc strong{font-weight:650}
.doc a{color:var(--or);text-underline-offset:3px}
.doc a:hover{color:var(--ink)}
.doc .maj{margin-bottom:6px;color:#cdc2ea;font-size:14px}
.doc .chapo{margin:16px 0 6px;padding:13px 15px;background:var(--plaque2);border-left:var(--px) solid var(--or);box-shadow:inset 0 0 0 1px rgba(255,210,77,.15)}
.doc .chapo p:last-child{margin-bottom:0}
.doc dl{display:grid;grid-template-columns:max-content 1fr;gap:0 18px}
.doc dt,.doc dd{padding:7px 0;border-bottom:1px solid rgba(107,79,208,.3)}
.doc dt{color:#cdc2ea}
.doc dd{margin:0}
.doc code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;background:var(--plaque2);padding:1px 5px}
@media(max-width:520px){.doc{padding:22px 18px 12px}.doc h1{font-size:27px}.doc dl{grid-template-columns:1fr}.doc dt{padding-bottom:0;border-bottom:0}.doc dd{padding-top:2px}}

/* La page introuvable (404) */
.perdu{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:30px 0;text-align:center}
.perdu .code{font-size:clamp(64px,24vw,112px);font-weight:700;line-height:1;letter-spacing:4px;color:#ffe9fb;
  text-shadow:6px 6px 0 #b02a78,0 0 10px rgba(255,79,216,.9),0 0 30px rgba(255,79,216,.5);animation:neon 5s steps(1) infinite}
.perdu .message{width:100%;max-width:400px}
.perdu .message .bubble{text-align:left;margin:0 var(--px) var(--px)}
.perdu .bubble::after{display:none}
.retour{--c:var(--or);display:inline-block;line-height:48px;padding:0 18px;font-size:16px;color:var(--plaque);background:var(--or);text-decoration:none;
  box-shadow:var(--cadre),0 calc(var(--px)*2) 0 calc(var(--px)*1) rgba(0,0,0,.4),0 0 18px 2px rgba(255,210,77,.45)}
.retour:hover{background:#ffe07a;--c:#ffe07a}
.retour:active{transform:translateY(var(--px))}

/* Moins de mouvement : ciel figé (une seule image, voir ciel.js), tuiles sans entrée en scène ni reflet */
@media(prefers-reduced-motion:reduce){
  .app,.logo,.logo i,.tag::before,.perdu .code,.app:hover .spr,.app:focus-visible .spr,.bubble.neuve{animation:none}
  .tile::before{display:none}
  .tile,.foot a{transition:none}
  #sky.pret,#decor.pret{transition:none}
}