/* Les classes de Dany — styles (DESIGN.md).
 * Plain CSS for old Android WebViews: no nesting, :has(), container queries or dvh.
 * Sizes in rem (px ÷ 16) so the phone's text-size setting applies; only the play button
 * and the flowers are fixed in px. */

@font-face {
  font-family: "Young Serif";
  src: url("/assets/young-serif.0473ce5e.woff2") format("woff2"); /* replaced by scripts/build.mjs */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Colours (§2.1) */
  --bg: #FFF8FA;
  --surface: #FFFFFF;
  --ink: #2B1B33;
  --ink-soft: #5E4A66;
  --line: #EADCE6;
  --line-strong: #8C7391;
  --primary: #A8245F;
  --leaf: #3C8A55;
  /* Unit colours; defaults = pivoine, overridden by .fleur-N */
  --petal: #E8609A;
  --deep: #A8245F;
  --tint: #FCE6EF;

  /* Type (§2.2) */
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing (§2.3) */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --gutter: 1rem;
  --radius: 16px;
  --radius-field: 14px;
  --pill-h: 3.5rem;
}

.fleur-0 { --petal: #E8553F; --deep: #B3261E; --tint: #FDE7E3; } /* coquelicot */
.fleur-1 { --petal: #5B82E0; --deep: #2F55B5; --tint: #E6EDFC; } /* bleuet */
.fleur-2 { --petal: #F5B021; --deep: #8A5A00; --tint: #FEF2D6; } /* souci */
.fleur-3 { --petal: #A07BDB; --deep: #6E44B0; --tint: #EFE7FB; } /* lavande */
.fleur-4 { --petal: #E8609A; --deep: #A8245F; --tint: #FCE6EF; } /* pivoine */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.125rem;
  line-height: 1.5;
  font-synthesis: none;
}
a { color: var(--primary); }
p { margin: 0 0 var(--s4); }
ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -10rem; z-index: 10;
  padding: var(--s2) var(--s4); background: var(--surface); color: var(--ink);
}
.skip-link:focus { top: var(--s2); }

/* ---------- Layout ---------- */
.site-header, .main, .search-results, .site-footer {
  max-width: 1040px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.page-unit .site-header, .page-unit .main, .page-unit .search-results,
.page-404 .site-header, .page-404 .main, .page-404 .search-results { max-width: 720px; }
.main:focus { outline: none; }
.main, .search-results { padding-bottom: var(--s4); }
@media (min-width: 720px) { :root { --gutter: 1.5rem; } }

/* ---------- Flower (§3.1) ---------- */
.fleur {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; flex: none;
}
.fleur svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; fill: var(--petal); stroke: var(--deep); }
.fleur-num { position: relative; font-family: var(--font-display); font-size: 18px; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
.fleur--grand { width: 88px; height: 88px; }
.fleur--grand .fleur-num { font-size: 26px; }
.fleur--petite { width: 40px; height: 40px; }
.fleur--petite .fleur-num { font-size: 14px; }
.fleur-num--2 { font-size: 15px; letter-spacing: -0.5px; } /* two digits must fit in the heart */
.fleur--grand .fleur-num--2 { font-size: 23px; }
.fleur--petite .fleur-num--2 { font-size: 12px; }
.fleur--mini { width: 24px; height: 24px; }

/* ---------- Header + search (§4.1, not sticky) ---------- */
.site-header { padding-top: var(--s4); padding-bottom: var(--s4); }
.brand {
  display: inline-flex; align-items: center;
  min-height: 3rem; color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2;
}
.hero { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s4) 0 var(--s2); }
.hero-text { margin-top: var(--s2); }

/* Flex rows use margins, not flex `gap` (needs Chrome 84 / Safari 14.1; REVIEW R2-6). */
.brand > * + *, .unite > * + *, .piste > * + * { margin-left: 16px; }
.brand > * + * { margin-left: var(--s2); }
.unit-head > .fleur { margin-right: 16px; }
.bouquet { display: block; width: 120px; height: 92px; }
.hero-title { overflow-wrap: break-word; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 2.125rem; line-height: 1.1; }
.hero-subtitle { margin: var(--s2) 0 0; color: var(--ink-soft); max-width: 65ch; }

.search { margin-top: var(--s3); }
.search-label { display: block; margin-bottom: var(--s2); font-size: 0.9375rem; font-weight: 600; }
.search-field { position: relative; }
.search-icon { position: absolute; left: 14px; top: 50%; margin-top: -12px; width: 24px; height: 24px; fill: var(--ink-soft); pointer-events: none; }
.search-input {
  display: block; width: 100%;
  min-height: 3.5rem;
  padding: var(--s2) 3.25rem var(--s2) 2.875rem;
  font: inherit; font-size: 1.125rem; color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-field);
  -webkit-appearance: none; appearance: none;
}
.search-input::placeholder { color: var(--ink-soft); opacity: 1; }
.search-input:focus { border-color: var(--ink); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-clear {
  position: absolute; right: 4px; top: 50%; margin-top: -24px;
  width: 48px; height: 48px; padding: 12px;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.search-clear .i { width: 24px; height: 24px; fill: var(--ink); display: block; }
.no-js .search { display: none; }

@media (min-width: 720px) {
  .page-unit .site-header, .page-404 .site-header {
    display: flex; align-items: flex-end; justify-content: space-between;
  }
  .page-unit .search, .page-404 .search { flex: 1; max-width: 420px; margin-top: 0; margin-left: var(--s5); }
  .page-home .hero-text { margin-top: 0; }
  .page-home .hero { flex-direction: row-reverse; justify-content: space-between; align-items: center; }
  .hero-title { font-size: 2.75rem; }
  .brand { font-size: 1.375rem; }
}

/* ---------- Search results (§6.2) ---------- */
.search-count { color: var(--ink-soft); font-size: 0.9375rem; margin-top: var(--s2); }
.search-count--none { color: var(--ink); font-size: 1.125rem; margin-bottom: var(--s2); }
.search-hint { color: var(--ink-soft); font-size: 0.9375rem; }
.search-group { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: var(--s5) 0 var(--s3); }

/* ---------- Text bits ---------- */
.page-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 2.25rem; line-height: 1.1; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; min-width: 0; }
@media (min-width: 720px) { .page-title { font-size: 2.75rem; } }
.page-404 .page-title { margin: var(--s4) 0; }
.help, .unit-count { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.4; }
.unit-count { margin: var(--s1) 0 0; }
.help { margin: var(--s5) 0 var(--s3); }
.notice { padding: var(--s3); border: 2px solid var(--deep); border-radius: var(--radius); background: var(--surface); }
.site-footer {
  margin-top: var(--s7); padding-bottom: var(--s6);
  text-align: center; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.4;
}

/* ---------- Unit rows (home + search, §4.2) ---------- */
.unites { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.unite {
  display: flex; align-items: flex-start;
  height: 100%;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.unite:active { background: var(--tint); }
@media (hover: hover) { .unite:hover { background: var(--tint); border-color: var(--deep); } }
.unite-texte { min-width: 0; flex: 1; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.unite-nom { display: block; font-family: var(--font-display); font-size: 1.375rem; line-height: 1.2; }
.unite-titres {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: var(--s1); color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.4;
}
.unite--piste { align-items: center; }
.unite--piste .unite-titres { -webkit-line-clamp: unset; display: block; }
.resultat-titre { display: block; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
@media (min-width: 720px) { .page-home .main .unites { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } }
@media (min-width: 1040px) { .page-home .main .unites { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Unit page (§4.3) ---------- */
.back { margin: var(--s2) 0 var(--s5); }
.unit-head { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: var(--s5); }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--pill-h);
  padding: var(--s2) 1.25rem;
  border: 2px solid var(--deep);
  border-radius: 999px;
  background: var(--surface);
  color: var(--deep);
  font-size: 1.125rem; font-weight: 600; line-height: 1.2;
  text-decoration: none;
}
.pill--primary { border-color: var(--primary); color: var(--primary); }
.unit-nav { display: flex; flex-wrap: wrap; margin: var(--s5) 0 var(--s2); }
.unit-nav .pill { margin: 0 var(--s3) var(--s3) 0; }
.unit-nav .pill--next { margin-left: auto; margin-right: 0; }
.unit-nav + .back { margin-top: 0; }

/* ---------- Track rows (§5): the whole row is the button ---------- */
.pistes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.piste {
  display: flex; align-items: flex-start; /* 16px margin between children (px: keep width at 200 % text) */
  width: 100%;
  min-height: 88px;
  padding: 16px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 359px) { .piste { padding: 12px; } }
.piste-bouton {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2.5px solid var(--deep);
  background: var(--surface);
  transition: transform 80ms;
}
.piste:active .piste-bouton { transform: scale(0.97); }
.piste-bouton .i { width: 24px; height: 24px; fill: var(--deep); display: none; }
.piste-texte { min-width: 0; flex: 1; }
.piste-titre { display: block; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.piste-meta { display: block; margin-top: var(--s1); color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.4; }
.piste-action { color: var(--deep); font-weight: 600; }
.piste-erreur { display: block; margin-top: var(--s2); color: var(--ink); font-size: 0.9375rem; line-height: 1.4; }
.no-js .piste-bouton, .no-js .piste-meta .piste-action { visibility: hidden; }
@media (min-width: 720px) { .piste-titre { font-size: 1.25rem; } }

/* Icons per state */
.piste[data-state="idle"] .i-play,
.piste[data-state="paused"] .i-play,
.piste[data-state="playing"] .i-pause,
.piste[data-state="error"] .i-retry { display: block; }
.spinner { display: none; width: 24px; height: 24px; border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; }
.piste[data-state="loading"] .spinner { display: block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Active row: tint + thick border + filled button + label (§5.2) */
.piste[data-state="loading"], .piste[data-state="playing"], .piste[data-state="paused"], .piste[data-state="error"] {
  border: 3px solid var(--deep);
  padding: 14px;
}
@media (max-width: 359px) {
  .piste[data-state="loading"], .piste[data-state="playing"], .piste[data-state="paused"], .piste[data-state="error"] { padding: 10px; }
}
.piste[data-state="loading"], .piste[data-state="playing"], .piste[data-state="paused"] { background: var(--tint); }
.piste[data-state="loading"] .piste-bouton, .piste[data-state="playing"] .piste-bouton { background: var(--deep); }
.piste[data-state="playing"] .piste-bouton .i { fill: #fff; }

/* Row reached from a search result (#piste-N): tint 2 s, then fade 600 ms */
.pistes li.is-target .piste { background: var(--tint); }
.pistes li.is-fading .piste { transition: background-color 600ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .piste[data-state="loading"] .spinner { animation: none; border-color: #fff; }
  .piste:active .piste-bouton { transform: none; }
  .piste-bouton, .pistes li.is-fading .piste { transition: none; }
}