/* =========================================================
   LE CODEUR FOU — la lumière de la pièce selon l'heure
   L'ordinateur reste le même : c'est l'éclairage autour qui change.
   html[data-moment] = matin · jour · soir · nuit (posé par le script dans <head>)
   ========================================================= */

/* transitions douces quand l'heure bascule pendant la visite */
body, .top, .foot, .monitor__bezel, .printer__body, .phone, .food {
    transition: background-color 1.6s ease, color 1.6s ease, box-shadow 1.6s ease, filter 1.6s ease;
}

/* calque de lumière posé sur toute la page (ne bloque jamais les clics) */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 140; pointer-events: none;
    opacity: 0; transition: opacity 1.6s ease, background 1.6s ease;
}

/* ---------------------------------------------------------
   MATIN (6 h – 11 h) : lumière pâle et fraîche, tout est clair et doux
   --------------------------------------------------------- */
html[data-moment="matin"] {
    --case:    #e3e1d8;
    --case-hi: #f1efe8;
    --case-lo: #c9c6ba;
    --case-dk: #a19e90;
    --ink:     #2d2b27;
    --ink-2:   #67645b;
    --paper:   #fbfbf7;
}
html[data-moment="matin"] body::after {
    opacity: 1;
    /* lumière rasante bleutée qui entre par la fenêtre, à gauche */
    background:
        linear-gradient(110deg, rgba(150,190,255,.42) 0%, rgba(200,225,255,.18) 40%, transparent 75%);
    mix-blend-mode: soft-light;
}
html[data-moment="matin"] .hero__title {
    text-shadow: -1px -1px 0 #fffdf6, 2px 2px 0 var(--case-dk), 4px 4px 0 var(--case-dk), 6px 6px 0 #8a8168, 8px 10px 18px rgba(0,0,0,.14);
}
html[data-moment="matin"] .crt__glass { filter: brightness(.92) saturate(.9); }   /* écran qui chauffe encore */

/* ---------------------------------------------------------
   JOURNÉE (11 h – 18 h) : plein soleil, plastique brillant, reflets
   --------------------------------------------------------- */
html[data-moment="jour"] {
    --case:    #dccd9f;
    --case-hi: #f2e6c0;
    --case-lo: #c2b07e;
    --case-dk: #978557;
    --amber:   #ffbe33;
    --hazard:  #ffd21a;
    --red:     #f0402a;
}
html[data-moment="jour"] body::after {
    opacity: 1;
    /* tache de soleil chaude en haut à droite */
    background: radial-gradient(75% 65% at 90% -5%, rgba(255,248,215,.75) 0%, rgba(255,240,180,.25) 40%, transparent 70%);
    mix-blend-mode: overlay;
}
/* plastique verni : reflet net sur les boîtiers */
html[data-moment="jour"] .monitor__bezel,
html[data-moment="jour"] .printer__body,
html[data-moment="jour"] .phone,
html[data-moment="jour"] .food { position: relative; overflow: hidden; }
html[data-moment="jour"] .monitor__bezel::after,
html[data-moment="jour"] .printer__body::after,
html[data-moment="jour"] .phone::after,
html[data-moment="jour"] .food::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 42%, rgba(255,255,255,.12) 48%, transparent 56%);
    background-size: 250% 100%; background-position: 120% 0;
    animation: glint 7s ease-in-out infinite;
}
@keyframes glint { 0%, 60% { background-position: 120% 0; } 85%, 100% { background-position: -40% 0; } }
html[data-moment="jour"] .monitor__bezel {
    box-shadow: inset 0 3px 0 rgba(255,255,255,.85), inset 0 -3px 0 rgba(0,0,0,.12), 0 34px 40px -22px rgba(40,30,10,.6), 0 4px 0 var(--case-dk);
}
/* ombres plus courtes et plus nettes (soleil haut) */
html[data-moment="jour"] .paper, html[data-moment="jour"] .listing, html[data-moment="jour"] .pv, html[data-moment="jour"] .dico {
    box-shadow: 0 2px 0 var(--case-dk), 0 10px 14px -8px rgba(40,30,10,.45);
}
html[data-moment="jour"] .disk:hover { filter: drop-shadow(0 10px 6px rgba(0,0,0,.3)) brightness(1.06); }

/* ---------------------------------------------------------
   SOIR (18 h – 22 h) : coucher de soleil, lumière orangée qui baisse
   --------------------------------------------------------- */
html[data-moment="soir"] {
    --case:    #b9a685;
    --case-hi: #c9b794;
    --case-lo: #9c8a6a;
    --case-dk: #776649;
    --ink:     #241d14;
    --ink-2:   #4a3f2f;
    --paper:   #f1e6cc;
    --bar:     #e2dcbf;
}
html[data-moment="soir"] body::after {
    opacity: 1;
    /* soleil couchant par la fenêtre : orange en bas à gauche, ombre bleutée en haut à droite */
    background:
        radial-gradient(80% 70% at 0% 100%, rgba(255,130,40,.38) 0%, rgba(255,110,40,.12) 45%, transparent 75%),
        linear-gradient(200deg, rgba(40,30,80,.28) 0%, transparent 55%);
    mix-blend-mode: multiply;
}
html[data-moment="soir"] .hero__title {
    text-shadow: -1px -1px 0 #f3dcb0, 2px 2px 0 var(--case-dk), 4px 4px 0 var(--case-dk), 6px 6px 0 #4f4330, 14px 14px 22px rgba(40,15,0,.35);
}
/* ombres longues, étirées vers la droite */
html[data-moment="soir"] .paper, html[data-moment="soir"] .listing, html[data-moment="soir"] .pv,
html[data-moment="soir"] .dico, html[data-moment="soir"] .polaroid, html[data-moment="soir"] .postit {
    box-shadow: 18px 22px 30px -14px rgba(50,20,0,.5);
}
/* l'écran commence à se voir davantage dans la pénombre */
html[data-moment="soir"] .crt__glass { text-shadow: 0 0 5px rgba(255,182,39,.9), 0 0 20px rgba(255,140,0,.5); }

/* ---------------------------------------------------------
   NUIT (22 h – 6 h) : pièce éteinte, seul l'écran éclaire
   --------------------------------------------------------- */
html[data-moment="nuit"] {
    --case:    #24211c;
    --case-hi: #2f2b24;
    --case-lo: #1a1814;
    --case-dk: #100f0c;
    --ink:     #e8dfc8;
    --ink-2:   #a69d88;
    --paper:   #d9d2bf;
    --bar:     #c4ccb9;
    --red:     #ff5a3d;
    color-scheme: dark;
}
html[data-moment="nuit"] body { background-color: #1c1a16; }
html[data-moment="nuit"] body::after {
    opacity: 1;
    /* halo ambré de l'écran qui éclaire la pièce depuis le moniteur */
    background:
        radial-gradient(60% 45% at 72% 22%, rgba(255,170,40,.10) 0%, transparent 70%),
        radial-gradient(140% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%);
}
html[data-moment="nuit"] .hero__title {
    color: #2c2821;
    text-shadow: -1px -1px 0 rgba(255,190,90,.25), 2px 2px 0 #0d0c0a, 4px 4px 0 #0d0c0a, 6px 6px 0 #070605, 0 0 40px rgba(255,170,40,.12);
}
html[data-moment="nuit"] .top { box-shadow: 0 6px 16px -8px rgba(0,0,0,.8); }
html[data-moment="nuit"] .monitor__bezel {
    box-shadow: inset 0 2px 0 rgba(255,255,255,.06), inset 0 -3px 0 rgba(0,0,0,.4), 0 30px 60px -20px rgba(0,0,0,.9), 0 4px 0 var(--case-dk), 0 0 120px -10px rgba(255,170,40,.18);
}
html[data-moment="nuit"] .crt__glass { text-shadow: 0 0 6px rgba(255,182,39,1), 0 0 24px rgba(255,140,0,.6); }
html[data-moment="nuit"] .plate { text-shadow: 1px 1px 0 rgba(255,255,255,.06), -1px -1px 0 rgba(0,0,0,.5); color: #4a4438; }

/* les objets « papier » restent lisibles : encre sombre, éclairés faiblement par l'écran */
html[data-moment="nuit"] :is(.paper, .listing, .notes li, .label, .polaroid, .pv, .postit, .joke, .receipt,
    .dico, .wanted, .debug__s, .hero__warn, .printer__paper, .disk__label, .food__joke, .mark__bubble,
    .procs, .win__cols, .win__foot, .diag__box, .debug__goto span, .route__paper) {
    --ink: #2a251d; --ink-2: #5b5344; --red: #c9361f;
    color: var(--ink);
    filter: brightness(.72) saturate(.85);
}
html[data-moment="nuit"] .win { box-shadow: 6px 6px 0 #000; border-color: #000; }
html[data-moment="nuit"] .hero__warn { box-shadow: 4px 4px 0 #000; }
html[data-moment="nuit"] .debug__s { box-shadow: 4px 4px 0 #000; }

/* touches de clavier : plastique sombre, légendes claires */
html[data-moment="nuit"] :is(.btn, .key, .horo__sign, .phone__key) {
    background: linear-gradient(#3a352c, #2a261f); color: #e8dfc8; border-color: #0d0c0a; box-shadow: 0 4px 0 #0d0c0a, 0 6px 10px rgba(0,0,0,.5);
}
html[data-moment="nuit"] .phone__key span { color: #a69d88; }
html[data-moment="nuit"] .btn--big { background: linear-gradient(#e2543c, #a8301d); color: #fff; border-color: #5e1a0e; box-shadow: 0 4px 0 #5e1a0e, 0 0 24px rgba(255,90,61,.25); }
html[data-moment="nuit"] .horo__sign[aria-selected="true"] { background: linear-gradient(#3a3424, #17150f); color: var(--amber); }
html[data-moment="nuit"] .switch__knob, html[data-moment="nuit"] .langs a[aria-current] { background: linear-gradient(#57503f, #3a352a); color: #e8dfc8; }
html[data-moment="nuit"] .diag__item:hover { background: rgba(255,255,255,.05); }

/* LED et écrans brillent plus fort dans le noir */
html[data-moment="nuit"] .led--on i { box-shadow: 0 0 14px #52e07a, 0 0 2px #fff inset; }
html[data-moment="nuit"] .seg__v { filter: brightness(1.15); }
html[data-moment="nuit"] .foot { background: linear-gradient(#1a1814, #0f0e0b); color: var(--ink); border-top-color: #000; }
html[data-moment="nuit"] .foot__links span, html[data-moment="nuit"] .foot__egg { color: var(--ink-2); }
html[data-moment="nuit"] :is(.tape, .crime__tape, .mark__n, .pv__n) { --ink: #2a251d; filter: brightness(.75); }
html[data-moment="nuit"] .crime__photo { filter: brightness(.7); border-color: #b9b3a2; }

/* ---------------------------------------------------------
   Le bouton « horloge » dans la barre du haut
   --------------------------------------------------------- */
.moment {
    display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer;
    font: 400 1.15rem/1 var(--f-crt); color: var(--amber); text-shadow: 0 0 4px rgba(255,182,39,.6);
    background: var(--crt); border: 0; border-radius: 6px; padding: 5px 9px 4px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 2px var(--case-lo);
}
.moment svg { width: 15px; height: 15px; flex: none; }
.moment__auto { font-size: .8rem; opacity: .6; }
.moment.is-forced .moment__auto { opacity: 1; color: #ff8a5c; }

@media (max-width: 640px) {
    .moment__time { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-moment="jour"] :is(.monitor__bezel, .printer__body, .phone, .food)::after { animation: none; }
}