/* Site tiltou.fr : les couleurs et la police de l'app (CLAUDE.md §4). Polices servies
   depuis le site : aucune requête vers un tiers. */
@font-face { font-family: Fredoka; font-weight: 500; font-display: swap; src: url(/fonts/Fredoka_500Medium.ttf); }
@font-face { font-family: Fredoka; font-weight: 600; font-display: swap; src: url(/fonts/Fredoka_600SemiBold.ttf); }
@font-face { font-family: Fredoka; font-weight: 700; font-display: swap; src: url(/fonts/Fredoka_700Bold.ttf); }

:root {
  --background: #ECE8FA;
  --ink: #2A1A3A;
  --ink-soft: #5B4E6E;
  --card: #FFFFFF;
  --accent: #FF7A59;
  --line: #C7BEE0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: Fredoka, 'Arial Rounded MT Bold', system-ui, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
}

a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }

.page { max-width: 680px; margin: 0 auto; padding: 24px 16px 48px; }

.brand { display: inline-block; margin-bottom: 8px; }
.brand img { display: block; width: 136px; height: auto; }

h1 { font-weight: 700; font-size: 34px; line-height: 1.2; margin: 16px 0 8px; }
h2 { font-weight: 700; font-size: 24px; line-height: 1.25; margin: 40px 0 8px; }
strong { font-weight: 600; }
.meta { color: var(--ink-soft); margin-top: 0; }

.card { background: var(--card); border-radius: 28px; padding: 20px 24px; margin: 16px 0; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--line); }
th { font-weight: 600; }
td code { font-size: 13px; }
.table-wrap { overflow-x: auto; }

footer { color: var(--ink-soft); font-size: 15px; padding: 24px 16px 40px; text-align: center; }
footer a { color: var(--ink-soft); }

/* Accueil : une scène. Le ciel, le soleil et la colline suivent la journée des tuiles
   (data-phase 0 à 4 sur le body, posé par le script de index.html). Les couleurs déclarées
   avec @property peuvent s'animer ; ailleurs, elles changent d'un coup. */
@property --sky-top { syntax: '<color>'; inherits: true; initial-value: #EDE6FA; }
@property --sky-bottom { syntax: '<color>'; inherits: true; initial-value: #FFE1D2; }
@property --hill-back { syntax: '<color>'; inherits: true; initial-value: #CFF3F0; }
@property --hill-front { syntax: '<color>'; inherits: true; initial-value: #B8EBCB; }
@property --sun { syntax: '<color>'; inherits: true; initial-value: #FFE38A; }
@property --ring { syntax: '<color>'; inherits: true; initial-value: #2A1A3A; }

.home-page {
  --sky-top: #EDE6FA; --sky-bottom: #FFE1D2;
  --hill-back: #CFF3F0; --hill-front: #B8EBCB;
  --sun: #FFE38A; --sun-x: 12%; --sun-y: 86%;
  --text: var(--ink); --text-soft: var(--ink-soft); --ring: var(--ink);
  background: var(--sky-bottom);
  color: var(--text);
  transition: --sky-top 2s ease, --sky-bottom 2s ease, --hill-back 2s ease, --hill-front 2s ease,
    --sun 2s ease, --ring 2s ease, color 2s ease;
}
.home-page[data-phase="1"] { --sky-top: #E4ECFF; --sky-bottom: #F4F0FF; --sun-x: 26%; --sun-y: 34%; }
.home-page[data-phase="2"] { --sky-top: #DCE8FF; --sky-bottom: #FFF4E2; --sun-x: 50%; --sun-y: 9%; }
.home-page[data-phase="3"] { --sky-top: #B3A5DD; --sky-bottom: #FFBFA3; --sun: #FFB08A; --sun-x: 88%; --sun-y: 66%;
  --hill-back: #BCD3DA; --hill-front: #A6D2B8; }
.home-page[data-phase="4"] { --sky-top: #1D1736; --sky-bottom: #3B2F66; --sun: #FF9A73; --sun-x: 90%; --sun-y: 106%;
  --hill-back: #2C3554; --hill-front: #232B45; --text: #ECE8FA; --text-soft: #C7BEE0; --ring: #ECE8FA; }
/* Fin de la nuit : le soleil repasse sous la colline, à gauche, sans traverser le ciel. */
.home-page[data-phase="reset"] { --sun-x: 12%; --sun-y: 106%; }
.home-page.sun-jump .sun { transition: none; }
.home-page a, .home-page footer { color: var(--text-soft); }

.scene { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.sky { position: absolute; inset: 0; z-index: 0; background: linear-gradient(var(--sky-top), var(--sky-bottom)); }
.sun { position: absolute; z-index: 1; left: var(--sun-x); top: var(--sun-y); width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border-radius: 50%; background: var(--sun);
  box-shadow: 0 0 0 14px color-mix(in srgb, var(--sun) 32%, transparent), 0 0 64px 26px color-mix(in srgb, var(--sun) 42%, transparent);
  transition: left 2.4s cubic-bezier(.45, 0, .55, 1), top 2.4s ease; }
.moon { position: absolute; z-index: 1; top: 28px; left: 9%; width: 34px; height: 34px; border-radius: 50%;
  box-shadow: 10px -6px 0 0 #FFE38A; opacity: 0; transform: translateY(16px);
  transition: opacity 1.8s ease, transform 1.8s ease; }
.star { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%;
  background: #FFF6D6; opacity: 0; transition: opacity 1.6s ease var(--d);
  animation: twinkle 2.4s ease-in-out var(--d) infinite alternate; }
.home-page[data-phase="4"] .moon { opacity: 1; transform: none; }
.star:nth-child(even) { width: 4px; height: 4px; }
.home-page[data-phase="4"] .star { opacity: .9; }
@keyframes twinkle { to { transform: scale(.4); } }
.ground { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: clamp(120px, 22vh, 220px); }
.ground svg { display: block; width: 100%; height: 100%; }
.ground .back { fill: var(--hill-back); }
.ground .front { fill: var(--hill-front); }

.home { position: relative; z-index: 4; flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 56px 16px 24px; }
.home .lead { font-weight: 700; font-size: 26px; line-height: 1.25; margin: 28px 0 8px; }
.home p { max-width: 440px; margin: 8px auto; }
.home .soon { color: var(--text-soft); margin-top: 24px; }
.home-page footer { position: relative; z-index: 4; padding-top: 32px; }

/* Le logo : les lettres en image, le grelot du « o » dessiné, qui vacille sans arrêt et fait
   « tilt » (grand balancement et ondes) à chaque tuile cochée, comme l'intro de l'app. Les
   positions viennent de src/components/intro.tsx (MARK 272 × 135, BELL 138, 20, 64 × 69). */
.mark { position: relative; width: min(272px, 78vw); aspect-ratio: 272 / 135; }
.mark img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 2s ease; }
.mark .night { opacity: 0; }
.home-page[data-phase="4"] .mark .night { opacity: 1; }
.home-page[data-phase="4"] .mark .day { opacity: 0; }
.bell-wobble { position: absolute; left: 50.74%; top: 14.81%; width: 23.53%; height: 51.11%;
  transform-origin: 50% 10%; animation: wobble 2.6s ease-in-out infinite alternate; }
@keyframes wobble { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.bell { width: 100%; height: 100%; transform-origin: 50% 10%; }
.bell svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bell .ring { stroke: var(--ring); }
.bell.tilt { animation: tilt 620ms cubic-bezier(.3, .7, .3, 1); }
@keyframes tilt { 25% { transform: rotate(14deg); } 52% { transform: rotate(-10deg); } 77% { transform: rotate(5deg); } 100% { transform: none; } }
.waves { position: absolute; left: 44.12%; top: 11.85%; width: 36.76%; height: 29.63%; opacity: 0; transform: scale(.85); }
.waves path { fill: none; stroke: var(--accent); stroke-linecap: round; }
.waves.on { animation: waves 760ms ease-out; }
@keyframes waves { 25% { opacity: 1; transform: none; } 60% { opacity: 1; } 100% { opacity: 0; transform: scale(1.06); } }
.day-status { color: var(--text-soft); font-size: 15px; min-height: 1.5em; margin-top: 18px !important; }

/* Les tuiles, comme dans l'app (CLAUDE.md §4) : gonflées, puis enfoncées une fois faites.
   Sur grand écran, elles se posent autour du texte (--x, --y) ; sur petit écran, deux au-dessus
   du logo et deux sous le texte (--mx, --my). Chacune dérive à son rythme. */
.tile-float { position: absolute; z-index: 3; left: var(--x); top: var(--y); --amp: 1;
  transform: rotate(var(--tilt)); animation: drift var(--dur) ease-in-out var(--delay) infinite; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(var(--tilt)); }
  30% { transform: translate(calc(var(--dx) * var(--amp)), calc(var(--dy) * var(--amp) * -1)) rotate(calc(var(--tilt) + 2deg)); }
  65% { transform: translate(calc(var(--dx) * var(--amp) * -.6), calc(var(--dy) * var(--amp))) rotate(calc(var(--tilt) - 1.5deg)); }
}
.tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 148px; min-height: 124px; padding: 14px; border-radius: 28px; text-align: left; color: var(--ink);
  background: var(--tint); box-shadow: 0 6px 0 rgba(42, 26, 58, 0.12);
  transition: background-color .4s ease, box-shadow .4s ease; }
.tile.done { background: #DCD5F0; box-shadow: inset 0 3px 8px rgba(42, 26, 58, 0.16); }
.tile.pressing { animation: press 260ms ease; }
@keyframes press { 50% { transform: scale(.95); } }
.tile-icon { width: 44px; height: 44px; border-radius: 16px; background: rgba(255, 255, 255, 0.6);
  display: flex; align-items: center; justify-content: center; margin-bottom: auto; }
.tile svg { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile-icon svg { width: 24px; height: 24px; }
.tile-name { font-weight: 600; font-size: 17px; line-height: 1.2; margin-top: 12px; }
.tile-time { font-size: 14px; color: var(--ink-soft); }
.tile-check { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 999px;
  background: var(--ink); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0);
  transition: transform 250ms cubic-bezier(.34, 1.56, .64, 1), opacity 150ms ease; }
.tile-check svg { width: 16px; height: 16px; stroke: #FFFFFF; stroke-width: 3; }
.tile.done .tile-check { opacity: 1; transform: scale(1); }

@media (max-width: 1099px) {
  .tiles-zone { position: relative; z-index: 3; width: 100%; max-width: 420px; height: 160px; margin: 0 auto; }
  .moon { left: 44%; top: 16px; }
  .tiles-zone.top { margin-top: 12px; }
  .tile-float { left: var(--mx); top: var(--my); --amp: .5; }
  .tile { width: 136px; min-height: 112px; }
  .home { padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .tile-float, .star, .bell-wobble { animation: none; }
  .home-page, .sun, .moon, .mark img, .tile, .tile-check { transition: none; }
}