@font-face { font-family: "Outfit"; src: url("fonts/outfit.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-italic.woff2") format("woff2"); font-style: italic; font-weight: 300 700; font-display: swap; }

:root {
  --ink: #f4efe6;
  --ink-2: rgba(244, 239, 230, 0.72);
  --ink-3: rgba(244, 239, 230, 0.48);
  --accent: #e9c98b;
  --glass: rgba(18, 17, 16, 0.55);
  --glass-hi: rgba(255, 250, 240, 0.14);
  --ring: rgba(255, 246, 228, 0.95);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0a09; }
body { font-family: "Outfit", "Helvetica Neue", Arial, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; outline: none; }
* { box-sizing: border-box; }

/* Scène fixe 1920x1080, mise à l'échelle en JS */
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0; }

/* ---------- Fond ---------- */
#bg { position: absolute; inset: 0; left: 0; top: 0; right: 0; bottom: 0; }
.bg-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s ease; }
.bg-img.on { opacity: 1; }
.bg-shade { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background:
    linear-gradient(180deg, rgba(8,7,6,.72) 0%, rgba(8,7,6,.25) 26%, rgba(8,7,6,.35) 48%, rgba(8,7,6,.88) 72%, rgba(8,7,6,.97) 100%),
    linear-gradient(90deg, rgba(8,7,6,.55) 0%, rgba(8,7,6,0) 45%); }

/* ---------- Accueil ---------- */
#home { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transition: opacity .5s ease; }
#home.hidden { opacity: 0; }

#top { position: absolute; left: 96px; right: 96px; top: 64px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 3; transition: transform .45s var(--ease), opacity .45s ease; }
.greet { font-size: 30px; font-weight: 400; letter-spacing: .02em; color: var(--ink-2); }
.clock { font-size: 128px; font-weight: 200; line-height: 1; letter-spacing: -.02em; margin-top: 6px; }
.date { font-size: 30px; font-weight: 300; color: var(--ink-2); margin-top: 10px; text-transform: capitalize; }
.side { display: flex; flex-direction: column; align-items: flex-end; }
.weather { font-size: 30px; font-weight: 300; color: var(--ink-2); height: 44px; margin-bottom: 22px; }
.weather b { font-weight: 400; color: var(--ink); font-size: 38px; margin-left: 10px; }
.pills { display: flex; }
.pill { display: flex; align-items: center; height: 64px; padding: 0 30px; margin-left: 16px; border-radius: 32px; background: var(--glass); font-size: 26px; font-weight: 400; color: var(--ink); border: 2px solid rgba(255,255,255,.08); transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s; }
.pill .ico { font-size: 24px; margin-right: 12px; opacity: .8; }
.pill.focus { background: var(--ink); color: #15130f; border-color: var(--ink); transform: scale(1.06); }

#scroller { position: absolute; left: 0; top: 0; width: 1920px; transition: transform .5s var(--ease); z-index: 2; }
.row { position: relative; padding: 0 96px; }
#favRow { margin-top: 560px; }
#allRow { margin-top: 36px; }
.row-title { font-size: 26px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px 4px; }

/* Rangée des favoris (défilement horizontal) */
.dock { position: relative; height: 260px; white-space: nowrap; transition: transform .45s var(--ease); }
.tile { position: relative; display: inline-block; vertical-align: top; border-radius: 22px; overflow: visible; transition: transform .28s var(--ease); }
.tile .face { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.tile .face img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tile .label { position: absolute; left: 0; right: 0; text-align: center; font-size: 24px; font-weight: 400; color: var(--ink); opacity: 0; transition: opacity .25s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.focus { transform: scale(1.1); z-index: 5; }
.tile.focus .face { box-shadow: 0 0 0 4px var(--ring), 0 26px 60px rgba(0,0,0,.6); }
.tile.focus .label { opacity: 1; }

.dock .tile { width: 300px; height: 172px; margin-right: 34px; }
.dock .tile .face img { height: 172px; width: 172px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
.dock .tile .label { top: 194px; }

/* Grille de toutes les applis */
.grid { position: relative; width: 1728px; }
.grid .tile { width: 170px; height: 170px; margin: 0 24px 74px 0; }
.grid .tile .face img { width: 100%; height: 100%; left: 0; top: 0; transform: none; }
.grid .tile .label { top: 184px; font-size: 22px; }
.grid .tile:nth-child(9n) { margin-right: 0; }
.tile .star { position: absolute; right: -10px; top: -10px; width: 40px; height: 40px; border-radius: 20px; background: var(--accent); color: #1a150c; font-size: 24px; line-height: 40px; text-align: center; display: none; box-shadow: 0 6px 14px rgba(0,0,0,.4); }
#home.editing .grid .tile.fav .star { display: block; }

/* Mode organisation */
#editHint { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); padding: 16px 30px; border-radius: 30px; background: rgba(233,201,139,.95); color: #1a150c; font-size: 24px; font-weight: 500; white-space: nowrap; opacity: 0; transition: opacity .3s; z-index: 6; }
#home.editing #editHint { opacity: 1; }
#home.editing .dock .tile .face { animation: wiggle .9s ease-in-out infinite alternate; }
.tile.lifted { transform: scale(1.16) translateY(-14px) !important; }
.tile.lifted .face { box-shadow: 0 0 0 5px var(--accent), 0 34px 70px rgba(0,0,0,.7) !important; animation: none !important; }
@keyframes wiggle { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }

/* Légende de l'œuvre en fond */
#caption { position: absolute; right: 96px; top: 300px; text-align: right; max-width: 760px; z-index: 1; transition: opacity .5s; }
.cap-title { font-family: "Cormorant", Georgia, serif; font-style: italic; font-size: 38px; line-height: 1.15; color: var(--ink); text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.cap-meta { font-size: 22px; color: var(--ink-2); margin-top: 8px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }

/* Quand on descend dans la grille */
#home.deep #top { transform: translateY(-40px); opacity: 0; }
#home.deep #caption { opacity: 0; }

/* ---------- Mode tableau ---------- */
#art { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: #000; opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s; z-index: 20; overflow: hidden; }
#art.on { opacity: 1; visibility: visible; transition: opacity 1.2s ease, visibility 0s; }
.art-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2.4s ease; }
.art-layer.on { opacity: 1; }
.art-matte { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.art-layer img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.art-layer.cover img { width: 1920px; height: 1080px; object-fit: cover; }
.art-layer.cover.drift img { animation: drift 90s ease-in-out infinite alternate; }
.art-layer.framed img { max-width: 1440px; max-height: 800px; margin-top: -40px; box-shadow: 0 30px 90px rgba(0,0,0,.65), 0 0 0 14px rgba(245,238,226,.92), 0 0 0 15px rgba(0,0,0,.25); }
@keyframes drift { from { transform: translate(-50%, -50%) scale(1.02); } to { transform: translate(-49%, -51%) scale(1.09); } }
.art-caption { position: absolute; left: 80px; bottom: 44px; max-width: 1100px; opacity: 0; transition: opacity 1.4s ease; }
.art-caption.show { opacity: 1; }
.art-title { font-family: "Cormorant", Georgia, serif; font-style: italic; font-size: 44px; line-height: 1.15; text-shadow: 0 2px 22px rgba(0,0,0,.85); }
.art-meta { font-size: 24px; color: var(--ink-2); margin-top: 10px; text-shadow: 0 2px 14px rgba(0,0,0,.85); }
.art-clock { position: absolute; right: 80px; bottom: 44px; font-size: 54px; font-weight: 200; color: rgba(255,255,255,.75); text-shadow: 0 2px 18px rgba(0,0,0,.8); }

/* ---------- Réglages ---------- */
#settings { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: rgba(6,5,4,.72); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; z-index: 30; }
#settings.on { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
.panel { position: absolute; right: 0; top: 0; bottom: 0; width: 760px; padding: 60px 70px; background: #171512; box-shadow: -30px 0 80px rgba(0,0,0,.5); }
.panel h3 { margin: 0 0 30px; font-size: 52px; font-weight: 300; }
.opt { display: flex; justify-content: space-between; align-items: center; height: 80px; padding: 0 30px; margin-bottom: 12px; border-radius: 18px; background: rgba(255,255,255,.05); font-size: 28px; transition: background .2s, color .2s, transform .2s var(--ease); }
.opt .val { color: var(--accent); font-weight: 500; }
.opt .val:before { content: "\2039  "; opacity: .5; }
.opt .val:after { content: "  \203A"; opacity: .5; }
.opt.btn .val:before, .opt.btn .val:after { content: ""; }
.opt.focus { background: var(--ink); color: #15130f; transform: scale(1.02); }
.opt.focus .val { color: #7a5a1c; }
.foot { position: absolute; left: 70px; bottom: 26px; font-size: 20px; color: var(--ink-3); }

/* ---------- Divers ---------- */
#toast { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); padding: 18px 34px; border-radius: 34px; background: rgba(20,18,15,.92); font-size: 26px; opacity: 0; transition: opacity .3s; z-index: 40; white-space: nowrap; }
#toast.on { opacity: 1; }
#debug { position: absolute; left: 20px; bottom: 20px; width: 1100px; max-height: 420px; overflow: hidden; font: 18px/1.35 monospace; color: #9f9; background: rgba(0,0,0,.8); padding: 12px; z-index: 50; display: none; white-space: pre-wrap; }
#debug.on { display: block; }