@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/outfit-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* L'app est en thème clair uniquement (apps/mobile/src/constants/theme.ts n'a pas de palette
   sombre) : la page web garde les mêmes couleurs, sinon un lien partagé ne ressemble pas à Maark. */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #111111;
  --muted: #666666;
  --accent: #111111;
  --card: #f5f5f5;
  --line: rgba(17, 17, 17, 0.2);
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0b;
    --fg: #f5f5f5;
    --muted: #999999;
    --accent: #ffffff;
    --card: #1a1a1a;
    --line: rgba(245, 245, 245, 0.22);
  }
}

/* La page d'une liste porte les couleurs de l'app, qui est en thème clair uniquement. Les pages
   de repli (/invite, /lists) gardent leur palette neutre et leur mode sombre. */
/* Les valeurs de la page de liste viennent de l'app : ItemMark.tsx (carte, padding 10,
   bordure 1px), LinkThumbnail.tsx (vignette 52), Page.tsx (gap 10, gouttière 20), theme.ts. */
body.page {
  color-scheme: light;
  background: var(--ground, #F9F8F6);
  --bg: #F9F8F6;
  --fg: #1A1A1A;
  --muted: #75706A;
  --accent: #A8483A;
  --card: #ffffff;
  --line: #EFE9E3;
  --radius: 5px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
main {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
}
.cover {
  width: 100%;
  aspect-ratio: 1.91;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 16px;
}
h1 { font-size: 22px; margin: 0 0 8px; }
p { color: var(--muted); margin: 8px 0 16px; line-height: 1.5; }
.hint { font-size: 13px; margin: 0 0 6px; }
.stores { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.store-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.store-btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.store-btn svg[fill="none"] { fill: none; }
.store-btn.secondary {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
  padding: 13px 18px;
}
.hidden { display: none; }
body.page main {
  display: block;
  align-items: initial;
  justify-content: initial;
  min-height: 0;
  padding: 0;
}
.hero-inner,
.cta-inner,
.links { max-width: 680px; margin: 0 auto; }

/* En-tête : la photo en bande pleine largeur, comme le hero de Header.tsx dans l'app
   (132 = HERO_CONTENT_HEIGHT de useHeaderHeights.ts). Le titre passe dessous : posé dessus
   il échouerait au contraste sur une photo claire. */
.hero { padding: 16px 0 20px; }
.hero-inner { padding: 0 20px; }

.brand {
  display: inline-block;
  color: var(--accent);
  margin: 0 0 14px;
  text-decoration: none;
}
.brand .logo { width: 65px; height: 18px; display: block; }

.cover-band {
  position: relative;
  display: block;
  width: 100%;
  /* Fixe en mobile : la page ne doit pas sauter selon le ratio de la photo. */
  height: clamp(132px, 34vw, 200px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tint, var(--line));
  margin: 0 0 14px;
}
.cover-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pas le centre : sur une photo portrait le sujet est dans le tiers haut. */
  object-position: 50% 40%;
  display: block;
}
.cover-band::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.08);
  pointer-events: none;
}

.cover-band.is-empty {
  background: var(--list-avatar, var(--tint));
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Le voile suit le fg du thème : un blanc fixe disparaît sur les thèmes clairs. */
.cover-initial {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  background: color-mix(in srgb, var(--list-avatar-fg, #fff) 18%, transparent);
  color: var(--list-avatar-fg, #fff);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}

.author { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover; }
.avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--fg);
}
.author-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.author-name { font-size: 16px; }
.author-meta, .author-handle { font-size: 14px; color: var(--muted); }

.meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.meta span + span::before { content: '·'; margin: 0 6px; }

.links {
  list-style: none;
  padding: 0 20px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.link-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}
.link-top { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.link-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }

/* Deux lignes plutôt qu'une : sur le web, le commentaire du curateur est tout ce dont dispose
   le lecteur pour décider de cliquer. Le reste de la carte suit l'app. */
.link-title,
.link-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.4;
}
.link-title { font-size: 16px; line-height: 1.35; }
.link-desc { font-size: 14px; color: var(--muted); margin-top: 2px; }
.link-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}
.link-host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.link-tallies { display: flex; align-items: center; gap: 10px; flex: none; }
.tally { display: inline-flex; align-items: center; gap: 4px; }
.tally-emojis { display: inline-flex; align-items: center; }
.tally-emojis span {
  font-size: 11px;
  line-height: 1;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tally-emojis span + span { margin-left: -6px; }
.tally-icon { width: 13px; height: 13px; }

.thumb-wrap { position: relative; width: 52px; height: 52px; flex: none; }
.thumb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-favicon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tile);
}
.thumb-favicon img { width: 26px; height: 26px; object-fit: contain; }
.thumb-initial { font-size: 21px; color: var(--fg); }
.thumb-badge {
  position: absolute;
  bottom: -3px;
  left: -3px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #fff;
  border: 2px solid #fff;
  overflow: hidden;
}
.thumb-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

@media (hover: hover) {
  .link-card:hover { border-color: var(--accent); }
}
.link-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.more {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 20px 0;
  font-size: 14px;
  color: var(--muted);
}

.cta {
  margin-top: 32px;
  padding: 36px 20px 44px;
  background: #fff;
  border-top: 1px solid var(--line);
}
.cta h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 8px;
}
.cta p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 22px;
}
.cta .stores { margin-top: 0; gap: 10px; }
.cta .store-btn {
  height: 52px;
  padding: 0 20px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.cta .store-btn.secondary {
  background: #fff;
  color: var(--fg);
  border-color: var(--line);
  font-weight: 400;
}
.cta .stores .store-btn:first-of-type {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.cta .store-btn svg { width: 20px; height: 20px; }
.cta [data-stores-pending] { font-size: 14px; color: var(--muted); margin: 0; }

.web-app {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.more-lists {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin: 24px auto 0;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--fg);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.more-lists svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}