/* Curiosa — portail des applis de Morgan
   Concept : un seul écran, quatre grandes tuiles ; chaque tuile prend la couleur de son appli. */
:root {
  --bg: #f4f2ec;
  --fg: #181a22;
  --muted: #5d6070;
  --card: #ffffff;
  --line: #dcd8cc;
  --shadow: 0 8px 24px rgba(24, 26, 34, .08);
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #14161f; --fg: #eceae2; --muted: #a2a5b4; --card: #1d2030; --line: #2c3045; --shadow: 0 8px 24px rgba(0, 0, 0, .35); color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #14161f; --fg: #eceae2; --muted: #a2a5b4; --card: #1d2030; --line: #2c3045; --shadow: 0 8px 24px rgba(0, 0, 0, .35); color-scheme: dark; }

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.45; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { flex: 1; width: 100%; max-width: 920px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 28px 20px; display: grid; gap: 22px; align-content: start; }
.head { display: flex; align-items: center; gap: 14px; }
.mark { border-radius: 14px; flex: none; }
h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1; letter-spacing: -.01em; }
.head p { margin: 4px 0 0; color: var(--muted); }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .tiles { grid-template-columns: 1fr 1fr; gap: 16px; } }
.tile { display: flex; align-items: center; gap: 16px; height: 100%; padding: 16px; border-radius: 22px; text-decoration: none; color: inherit; border: 1px solid var(--line); box-shadow: var(--shadow); background: color-mix(in srgb, var(--c) 14%, var(--card)); transition: transform .15s ease, border-color .15s ease; }
.tile:hover { border-color: var(--c); transform: translateY(-2px); }
.tile:active { transform: scale(.99); }
.tile img { width: 72px; height: 72px; border-radius: 18px; flex: none; }
.txt { min-width: 0; display: grid; gap: 4px; }
.txt strong { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.txt span { color: var(--muted); font-size: .9rem; }
@media (min-width: 680px) { .tile { padding: 20px; min-height: 140px; } .tile img { width: 88px; height: 88px; border-radius: 22px; } }
:focus-visible { outline: 3px solid var(--c, #6a63f0); outline-offset: 3px; }

.foot { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 14px calc(14px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: .82rem; color: var(--muted); border-top: 1px solid var(--line); }
.foot strong { color: var(--fg); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } }