/* ==========================================================================
   Wishlist — feuille de styles (direction « A · Pop »)
   Palette : Faded Rose · Dried Plum · Lime Green · Ivory
   Deux fonds au choix : beige (par défaut) ou rose — voir [data-fond].
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/fonts/archivo-latin-ext-wdth-normal.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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/fonts/archivo-latin-wdth-normal.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;
}

/* Titres du thème Noël — téléchargée seulement quand ce thème est affiché. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 500 700;
  src: url('/fonts/cormorant-garamond-latin-ext-wght-normal.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 500 700;
  src: url('/fonts/cormorant-garamond-latin-wght-normal.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;
}

/* Titres du thème Étoiles — téléchargée seulement quand ce thème est affiché. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('/fonts/fraunces-latin-ext-wght-normal.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('/fonts/fraunces-latin-wght-normal.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;
}

/* Titres du thème Effort — téléchargée seulement quand ce thème est affiché. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-display: swap;
  font-weight: 300 600;
  src: url('/fonts/inter-tight-latin-ext-wght-normal.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-display: swap;
  font-weight: 300 600;
  src: url('/fonts/inter-tight-latin-wght-normal.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;
}

/* Titres du thème Velours (italique) — téléchargée seulement quand ce thème est affiché. */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  src: url('/fonts/bodoni-moda-latin-ext-wght-italic.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  src: url('/fonts/bodoni-moda-latin-wght-italic.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;
}

/* ---------- Jetons ---------- */

:root {
  --rose: #eab0c8;
  --plum: #6e1e3b;
  --lime: #c9d863;
  --ivory: #f7f6d7;

  --paper: color-mix(in srgb, var(--ivory) 42%, #fff);
  --ink: var(--plum);
  --plum-deep: color-mix(in srgb, var(--plum) 86%, #000);
  --halo: color-mix(in srgb, var(--lime) 75%, transparent);

  /* Fond beige (par défaut) */
  --bg: var(--ivory);
  --surface: var(--paper); /* tuiles, champs, cartes posées sur le fond */
  --ink-soft: color-mix(in srgb, var(--plum) 76%, var(--ivory));
  --line: color-mix(in srgb, var(--plum) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--plum) 30%, transparent);

  --r-s: 14px;
  --r-m: 22px;
  --r-l: 26px;
  --r-xl: 36px;

  --shadow: 0 22px 48px -24px color-mix(in srgb, var(--plum) 60%, transparent);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
}

/* Fond rose : les surfaces passent en ivoire, le texte secondaire reste bien lisible */
:root[data-fond='rose'] {
  --bg: var(--rose);
  --surface: var(--ivory);
  --ink-soft: var(--plum);
  --line: color-mix(in srgb, var(--plum) 22%, transparent);
  --line-strong: color-mix(in srgb, var(--plum) 45%, transparent);
}

/* Thèmes Noël et Étoiles : mêmes rôles, nouvelles palettes. Tout ce qui découle de ces jetons
   (papier, texte secondaire, filets, ombres…) suit tout seul. Chaque thème ajoute :
   --motif (le fond à motif : tartan ou ciel étoilé), la police des titres (--font-display,
   --display-caps, --display-weight, --display-tracking, --display-scale) et les couleurs
   du badge « Réservé » (--taken-bg, --taken-ink). Le reste est à la fin du fichier. */

/* Noël : Bordeaux · Or ancien · Lettrage · Parchemin · Sapin */
:root[data-fond='noel'] {
  --plum: #6e1a1e; /* Bordeaux */
  --lime: #d6b25e; /* Or ancien */
  --rose: #ead9bc; /* Lettrage : titres et filets sur bordeaux */
  --ivory: #f4ebdc; /* Parchemin */
  --sapin: #1f3a2d;
  --sapin-vert: #2f6b45; /* sapins de la notation d'envie */
  --gold-ink: #7e6220; /* or foncé, lisible sur parchemin */
  --taken-bg: var(--sapin);
  --taken-ink: var(--rose);

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --display-caps: small-caps;
  --display-weight: 600;
  --display-tracking: 0;
  --display-scale: 1;

  /* Tissu tartan : dégradés répétés, aucune image. */
  --tartan-base: #22372c;
  --tartan-x: repeating-linear-gradient(
    90deg,
    transparent 0 22px,
    rgba(132, 20, 30, 0.7) 22px 60px,
    transparent 60px 70px,
    rgba(232, 214, 160, 0.55) 70px 72px,
    transparent 72px 84px,
    rgba(16, 24, 50, 0.5) 84px 98px,
    transparent 98px 112px,
    rgba(132, 20, 30, 0.55) 112px 115px,
    transparent 115px 124px
  );
  --tartan-y: repeating-linear-gradient(
    0deg,
    transparent 0 22px,
    rgba(132, 20, 30, 0.7) 22px 60px,
    transparent 60px 70px,
    rgba(232, 214, 160, 0.55) 70px 72px,
    transparent 72px 84px,
    rgba(16, 24, 50, 0.5) 84px 98px,
    transparent 98px 112px,
    rgba(132, 20, 30, 0.55) 112px 115px,
    transparent 115px 124px
  );
  --motif: var(--tartan-x), var(--tartan-y) var(--tartan-base);
}

/* Étoiles (« des étoiles plein les yeux ») : Bleu nuit · Or stellaire · Lavande · Clair de lune */
:root[data-fond='etoiles'] {
  --plum: #1d2452; /* Bleu nuit */
  --lime: #e7c76b; /* Or stellaire */
  --rose: #d9d3f7; /* Lavande : titres sur bleu nuit */
  --ivory: #f1eff8; /* Clair de lune */
  --gold-ink: #7a5f12; /* or foncé, lisible sur clair de lune */
  --taken-bg: #5b4ba8; /* violet crépuscule */
  --taken-ink: #f1eff8;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --display-caps: normal;
  --display-weight: 500;
  --display-tracking: -0.02em;
  --display-scale: 0.88;

  /* Ciel de nuit calme : quelques étoiles discrètes (image répétée) sur un dégradé bleu nuit voilé de violet. */
  --ciel: url('/img/ciel.svg') 0 0 / 420px 420px;
  --nuit:
    radial-gradient(ellipse 80% 55% at 25% 0%, rgba(110, 92, 200, 0.42), transparent 70%),
    radial-gradient(ellipse 70% 50% at 95% 100%, rgba(52, 92, 170, 0.34), transparent 70%),
    linear-gradient(180deg, #0c112d, #19204f);
  --motif: var(--ciel), var(--nuit);
}

/* Effort (Florian — « verre dépoli et braise ») : Expresso · Orange braise · Pêche · Crème */
:root[data-fond='effort'] {
  --plum: #2a1f1b; /* Expresso */
  --lime: #f0743a; /* Orange braise */
  --rose: #ffd8c0; /* Pêche : titres sur verre fumé */
  --ivory: #f3eeea; /* Crème */
  --braise: #d2551f; /* vélos d'envie */
  --gold-ink: #a9441c; /* orange foncé, lisible sur crème */
  --taken-bg: #3b6e64; /* vert d'eau profond, distinct de l'orange */
  --taken-ink: #f3eeea;

  --font-display: 'Inter Tight', 'Archivo', system-ui, sans-serif;
  --display-caps: normal;
  --display-weight: 300;
  --display-tracking: -0.035em;
  --display-scale: 0.9;

  /* Verre dépoli (panneaux, cartes) et verre fumé (blocs foncés) */
  --verre: rgba(255, 255, 255, 0.55);
  --verre-bord: rgba(255, 255, 255, 0.82);
  --verre-ombre: 0 26px 44px -26px rgba(60, 28, 12, 0.55);
  --fume:
    radial-gradient(ellipse 60% 80% at 12% 0%, rgba(240, 105, 47, 0.4), transparent 70%),
    linear-gradient(165deg, #4a3c36, #1c1513);

  /* Fond : crème traversé de flous noirs et orange, comme une silhouette lancée à pleine vitesse. */
  --motif:
    radial-gradient(560px 360px at 36% 120px, rgba(30, 22, 19, 0.82), transparent 70%),
    radial-gradient(340px 220px at 22% 60px, rgba(240, 105, 47, 0.85), transparent 70%),
    radial-gradient(420px 300px at 88% 300px, rgba(255, 157, 92, 0.72), transparent 70%),
    radial-gradient(900px 110px at 50% 220px, rgba(30, 22, 19, 0.3), transparent 72%),
    radial-gradient(460px 320px at 8% 62%, rgba(240, 105, 47, 0.5), transparent 70%),
    radial-gradient(640px 300px at 82% 78%, rgba(30, 22, 19, 0.4), transparent 70%),
    radial-gradient(500px 260px at 30% 96%, rgba(255, 157, 92, 0.5), transparent 70%),
    #f3eeea;
}

/* Velours (Leticia, au choix avec le rose d'origine) : Bordeaux « Red Riding Hood » · Rose poudré · Blush */
:root[data-fond='velours'] {
  --plum: #551c25; /* Bordeaux */
  --lime: #f2afc0; /* Rose poudré */
  --rose: #ffd3de; /* Rose clair : titres sur bordeaux */
  --ivory: #fbeaee; /* Blush */
  --gold-ink: #b4233a; /* rouge profond des reflets, lisible sur blush */
  --taken-bg: #4f3a6b; /* prune, distinct du rose */
  --taken-ink: #fce7ec;

  --font-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --display-caps: normal;
  --display-style: italic;
  --display-weight: 500;
  --display-tracking: -0.015em;
  --display-scale: 0.92;

  /* Velours bordeaux profond ; les rubans de verre rose s'y ajoutent (décor plus bas). */
  --motif:
    radial-gradient(900px 520px at 20% 0, rgba(180, 35, 58, 0.5), transparent 70%),
    radial-gradient(700px 420px at 90% 60%, rgba(242, 140, 166, 0.2), transparent 70%),
    radial-gradient(800px 420px at 10% 95%, rgba(180, 35, 58, 0.35), transparent 70%),
    linear-gradient(170deg, #5e1f2a, #2e0d14);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 0.35s var(--ease);
}

main {
  flex: 1;
}

h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--lime);
  color: var(--plum);
}

:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* ---------- Typographie ---------- */

.display {
  font-weight: 700;
  font-stretch: 125%;
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.title {
  font-weight: 700;
  font-stretch: 125%;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--plum);
}

.lead {
  max-width: 34em;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--ink-soft);
  text-wrap: pretty;
}

.muted {
  color: var(--ink-soft);
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* ---------- Navigation ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 88px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1.1875rem;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--plum);
  color: var(--lime);
  transition: transform 0.5s var(--ease);
}

.brand__mark .icon {
  width: 16px;
  height: 16px;
}

.brand:hover .brand__mark {
  transform: rotate(90deg);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav__link {
  flex: none;
  white-space: nowrap;
  padding: 8px 2px;
  border: 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-size 0.3s var(--ease);
}

.nav__link:hover {
  background-size: 100% 1.5px;
}

.nav__user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.nav__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--lime);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 0.8125rem;
  text-transform: uppercase;
}

/* Sélecteur « Thème » : pour les profils qui peuvent choisir leur thème (enregistré sur le profil).
   Une pastille par thème ; celle du thème actif est cerclée. */
.theme-picker {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: 40px;
  margin-right: 6px;
  padding: 4px 5px 4px 12px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.theme-picker__label {
  margin-right: 4px;
  font-size: 0.59375rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.theme-picker__dot {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transform: scale(0.78);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.2s;
}

/* Zone de clic plus large que la pastille */
.theme-picker__dot::after {
  content: '';
  position: absolute;
  inset: -8px -3px;
}

.theme-picker__dot:hover {
  transform: scale(0.9);
}

.theme-picker__dot:focus-visible {
  outline-offset: 2px;
}

.theme-picker__dot[aria-pressed='true'] {
  box-shadow:
    inset 0 0 0 2px var(--plum),
    inset 0 0 0 4px var(--surface);
  transform: none;
}

/* Chaque pastille montre le thème qu'elle applique (couleurs fixes). */
.theme-picker__dot--beige {
  background: linear-gradient(135deg, #f7f6d7 0 58%, #6e1e3b 58% 80%, #c9d863 80%);
}

.theme-picker__dot--rose {
  background: linear-gradient(135deg, #eab0c8 0 58%, #6e1e3b 58% 80%, #c9d863 80%);
}

.theme-picker__dot--velours {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9) 0 12%, rgba(255, 255, 255, 0.25) 24%, transparent 44%),
    linear-gradient(140deg, #8a3242, #551c25 55%, #2a0b12);
}

/* Pastille foncée : l'anneau rose reste visible, cerné de bordeaux. */
.theme-picker__dot--velours[aria-pressed='true'] {
  box-shadow:
    inset 0 0 0 2px #f2afc0,
    inset 0 0 0 4px var(--surface),
    0 0 0 1.5px var(--plum);
}

.theme-picker__dot--noel {
  background: linear-gradient(135deg, #f4ebdc 0 58%, #6e1a1e 58% 80%, #d6b25e 80%);
}

.theme-picker__dot--etoiles {
  background: linear-gradient(135deg, #f1eff8 0 58%, #1d2452 58% 80%, #e7c76b 80%);
}

.theme-picker__dot--effort {
  background: linear-gradient(135deg, #f3eeea 0 58%, #2a1f1b 58% 80%, #f0743a 80%);
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: 50px;
  padding: 0 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
  font-stretch: 108%;
  font-size: 0.9375rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.2s var(--ease);
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.55;
  cursor: progress;
}

.btn--sm {
  height: 42px;
  padding: 0 18px;
  font-size: 0.875rem;
}

.btn--plum {
  background: var(--plum);
  color: var(--lime);
}

.btn--plum:hover {
  background: var(--plum-deep);
}

.btn--lime {
  background: var(--lime);
  color: var(--plum);
}

.btn--lime:hover {
  background: var(--ivory);
}

.btn--outline {
  border-color: var(--plum);
  color: var(--plum);
}

.btn--outline:hover {
  background: var(--plum);
  color: var(--lime);
}

/* Sur fond prune */
.btn--outline-light {
  border-color: var(--ivory);
  color: var(--ivory);
}

.btn--outline-light:hover {
  background: var(--ivory);
  color: var(--plum);
}

.btn--soft {
  background: color-mix(in srgb, var(--plum) 8%, transparent);
  color: var(--plum);
}

.btn--soft:hover {
  background: color-mix(in srgb, var(--plum) 15%, transparent);
}

.btn--paper {
  background: var(--ivory);
  color: var(--plum);
}

.btn--paper:hover {
  background: var(--lime);
}

.btn--text {
  height: auto;
  padding: 6px 2px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.btn--text.is-armed {
  text-decoration: none;
  padding-inline: 14px;
  height: 42px;
  border-radius: 999px;
  background: var(--plum);
  color: var(--ivory);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--plum) 8%, transparent);
  color: var(--plum);
  transition:
    background-color 0.2s,
    color 0.2s,
    transform 0.2s var(--ease);
}

.icon-btn:hover {
  background: var(--plum);
  color: var(--lime);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 6px;
  padding: 6px 12px 6px 8px;
  border: 1.5px dashed var(--plum);
  border-radius: 999px;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}

.chip .icon {
  width: 16px;
  height: 16px;
}

.chip:hover {
  border-style: solid;
  background: var(--lime);
}

/* ---------- Champ « pilule » (création, prénom, ajout de lien) ---------- */

.pillform {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 580px;
  padding: 8px;
  border: 1.5px solid var(--plum);
  border-radius: 999px;
  background: var(--surface);
  transition: box-shadow 0.2s;
}

.pillform:focus-within {
  box-shadow: 0 0 0 4px var(--halo);
}

.pillform__input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 8px 0 18px;
  border: 0;
  outline: 0;
  background: transparent;
  font-weight: 500;
}

.pillform__input::placeholder {
  color: var(--ink-soft);
  font-weight: 400;
  opacity: 1;
}

.pillform > .icon {
  width: 22px;
  height: 22px;
  margin-left: 16px;
}

.pillform > .icon + .pillform__input {
  padding-left: 4px;
}

.hint {
  min-height: 1.5em;
  margin-top: 12px;
  padding-left: 26px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ---------- Écran « Qui est-ce ? » ---------- */

.who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-block: clamp(40px, 9vw, 112px) clamp(32px, 6vw, 72px);
  text-align: center;
}

.who .pill {
  align-self: center;
}

.profiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 3vw, 32px);
  min-height: 160px;
  margin-top: clamp(16px, 3vw, 32px);
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: clamp(124px, 15vw, 168px);
  padding: 0;
  border: 0;
  background: none;
}

.profile:focus-visible {
  outline: none;
}

.profile__avatar {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-l);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.2s;
}

.profile__avatar--plum {
  background: var(--plum);
  color: var(--lime);
}

.profile__avatar--lime {
  background: var(--lime);
  color: var(--plum);
}

.profile__avatar--surface {
  background: var(--surface);
  color: var(--plum);
}

.profile__avatar--add {
  border: 1.5px dashed var(--plum);
  color: var(--plum);
}

.profile__avatar--add .icon {
  width: 40px;
  height: 40px;
}

.profile:hover .profile__avatar,
.profile:focus-visible .profile__avatar {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 4px var(--bg),
    0 0 0 7px var(--plum);
}

.profile:disabled {
  cursor: progress;
  opacity: 0.6;
}

.profile__name {
  font-weight: 700;
  font-stretch: 125%;
  font-size: 1.125rem;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.profile--add .profile__name {
  font-weight: 600;
  font-stretch: 100%;
  font-size: 0.9375rem;
  letter-spacing: 0;
}

.who .pillform {
  max-width: 440px;
  margin-top: 8px;
}

.who__hint {
  padding-left: 0;
}

/* Version compacte, à côté d'un article (page « Ajouter ») */
.add__side .who {
  align-items: flex-start;
  padding: 0;
  text-align: left;
}

.add__side .who .pill {
  align-self: flex-start;
}

.add__side .who__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}

.add__side .profiles {
  justify-content: flex-start;
  min-height: 0;
  margin-top: 8px;
}

.add__side .profile {
  width: 112px;
}

.add__side .profile__avatar {
  font-size: 2.75rem;
}

/* Tant que personne n'a choisi son profil, l'accueil n'affiche que cet écran */
.is-gate main > :not(.who) {
  display: none !important;
}

/* ---------- Accueil ---------- */

.landing {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(32px, 6vw, 72px);
  padding-block: clamp(24px, 5vw, 56px) clamp(48px, 7vw, 88px);
}

.landing__text {
  display: flex;
  flex-direction: column;
}

.landing__text .display {
  margin-top: 24px;
}

.landing__text .lead {
  margin-top: 24px;
}

.landing__text .pillform {
  margin-top: 36px;
}

.greeting {
  margin-top: 36px;
  font-size: 1.0625rem;
  font-weight: 600;
}

.greeting + .pillform {
  margin-top: 12px !important;
}

/* Trois exemples d'articles empilés */
.demo {
  display: grid;
  gap: 12px;
}

.demo__card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px 16px 16px;
  border-radius: var(--r-l);
  background: var(--bg-card);
  color: var(--fg-card);
  animation: rise 0.8s var(--ease) both;
}

.demo__card:nth-child(2) {
  animation-delay: 0.07s;
}

.demo__card:nth-child(3) {
  animation-delay: 0.14s;
}

.demo__card--surface {
  --bg-card: var(--surface);
  --fg-card: var(--plum);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.demo__card--lime {
  --bg-card: var(--lime);
  --fg-card: var(--plum);
}

.demo__card--plum {
  --bg-card: var(--plum);
  --fg-card: var(--lime);
}

.demo__thumb {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  flex: none;
  border-radius: 18px;
  background: color-mix(in srgb, var(--fg-card) 12%, transparent);
}

.demo__thumb .icon {
  width: 36px;
  height: 36px;
}

.demo__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.demo__site {
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo__name {
  font-weight: 700;
  font-stretch: 125%;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.demo__price {
  font-size: 0.9375rem;
  font-weight: 600;
}

.demo__go {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--fg-card);
  color: var(--bg-card);
}

.demo__go .icon {
  width: 16px;
  height: 16px;
}

.section {
  padding-block: clamp(32px, 5vw, 56px);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.section__head .muted {
  font-size: 0.9375rem;
}

.lists {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px 22px;
  margin-top: 28px;
}

.list-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}

.list-card__cover {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 12px;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--surface);
}

.list-card:nth-child(3n + 2) .list-card__cover {
  background: var(--lime);
}

.list-card:nth-child(3n + 3) .list-card__cover {
  background: var(--plum);
  color: var(--lime);
}

.list-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.list-card:hover .list-card__cover img {
  transform: scale(1.04);
}

.list-card__initial {
  font-weight: 800;
  font-stretch: 125%;
  font-size: 4.5rem;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  transition: transform 0.5s var(--ease);
}

.list-card:hover .list-card__initial {
  transform: scale(1.08);
}

.list-card__title {
  font-weight: 700;
  font-stretch: 125%;
  font-size: 1.1875rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.list-card__meta {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.list-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--plum);
  border-radius: var(--r-m);
  background: transparent;
  font-weight: 600;
  transition: background-color 0.2s;
}

.list-new:hover {
  background: var(--lime);
  border-style: solid;
}

.list-new .icon {
  width: 26px;
  height: 26px;
}

/* Bouton « + Ma wishlist » à glisser dans les favoris */
.magic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-xl);
  background: var(--plum);
  color: var(--ivory);
}

.magic__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.magic__text .eyebrow {
  color: var(--lime);
}

.magic__title {
  font-weight: 700;
  font-stretch: 125%;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--rose);
}

.magic__text p {
  max-width: 34em;
  text-wrap: pretty;
}

.magic__ios {
  align-self: flex-start;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lime);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.magic__drag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.bookmarklet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--plum);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  transform: rotate(-3deg);
  box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.55);
  cursor: grab;
  transition: transform 0.3s var(--ease);
}

.bookmarklet:hover {
  transform: rotate(0deg) scale(1.03);
}

.bookmarklet .icon {
  width: 18px;
  height: 18px;
}

.magic__hint {
  font-size: 0.8125rem;
  color: var(--rose);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  margin-top: 32px;
}

.step {
  padding-top: 18px;
  border-top: 1.5px solid var(--plum);
}

.step__num {
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.12em;
}

.step__title {
  margin: 24px 0 8px;
  font-weight: 700;
  font-stretch: 125%;
  font-size: 1.3125rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.step p {
  color: var(--ink-soft);
  text-wrap: pretty;
}

.ios-steps {
  display: grid;
  gap: 10px;
  padding-left: 1.4em;
  list-style: decimal;
}

/* ---------- Page wishlist : en-tête prune ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(20px, 4vw, 40px);
  padding: clamp(18px, 3vw, 40px);
  border-radius: var(--r-xl);
  background: var(--plum);
  color: var(--ivory);
}

.hero--text {
  grid-template-columns: minmax(0, 1fr);
}

.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-width: 0;
  padding: clamp(4px, 1vw, 8px);
}

.hero--text .hero__text {
  min-height: 240px;
}

.hero__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero__title {
  font-weight: 700;
  font-stretch: 125%;
  font-size: clamp(2.25rem, 4.4vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--rose);
  overflow-wrap: break-word; /* coupe un mot seulement s'il ne tient vraiment pas */
  hyphens: auto;
  text-wrap: balance;
}

.hero__meta {
  font-size: 1.0625rem;
  font-weight: 500;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.hero .btn:focus-visible,
.hero__cover:focus-visible {
  outline-color: var(--lime);
}

.hero__cover {
  position: relative;
  align-self: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--ivory);
}

.hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__cover .btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
}

.hero__cover.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

.hero__cover--empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  border: 1.5px dashed color-mix(in srgb, var(--ivory) 60%, transparent);
  background: color-mix(in srgb, var(--ivory) 8%, transparent);
  color: var(--ivory);
  font-weight: 600;
  transition: background-color 0.2s;
}

.hero__cover--empty:hover {
  background: color-mix(in srgb, var(--ivory) 16%, transparent);
}

.hero__cover--empty .icon {
  width: 28px;
  height: 28px;
  color: var(--lime);
}

.addbar {
  max-width: none;
  margin-top: 16px;
}

.addbar__input {
  font-size: 1.0625rem;
}

/* ---------- Grille d'articles ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 44px 22px;
  margin-top: clamp(28px, 4vw, 48px);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.card.is-new {
  animation: rise 0.6s var(--ease) both;
}

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--surface);
}

/* Par défaut : objet détouré sur fond blanc, affiché en entier ; le blanc se fond dans la tuile. */
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.7s var(--ease);
}

/* Photo « pleine » (fond non blanc) : elle remplit la tuile. */
.card__media img.is-photo {
  object-fit: cover;
  mix-blend-mode: normal;
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--lime);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.card__edit {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--ivory);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--plum) 70%, transparent);
}

@media (hover: hover) {
  .card__edit {
    opacity: 0;
    transform: translateY(-4px);
    transition:
      opacity 0.2s,
      transform 0.2s var(--ease),
      background-color 0.2s,
      color 0.2s;
  }

  .card:hover .card__edit,
  .card:focus-within .card__edit {
    opacity: 1;
    transform: none;
  }
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 16px 2px 18px;
}

.card__site {
  overflow: hidden;
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.card__price {
  margin-top: 6px;
  font-weight: 700;
  font-stretch: 125%;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.card__cta {
  height: 46px;
  color: var(--ivory);
}

/* ---------- Note rapide (taille, couleur…) ---------- */

.card__note-slot {
  display: flex;
  margin-top: 6px;
}

.card__note {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
  margin-top: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--lime) 45%, transparent);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

.card__note-slot .card__note {
  margin-top: 0;
}

.card__note-text {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.card__note--edit {
  transition: background-color 0.2s;
}

.card__note--edit .icon {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  opacity: 0.55;
}

.card__note--edit:hover {
  background: var(--lime);
}

.card__note--edit:hover .icon {
  opacity: 1;
}

.note-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
}

.note-add .icon {
  width: 14px;
  height: 14px;
}

.note-add:hover {
  color: var(--plum);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 16px minimum : sinon l'iPhone zoome sur le champ. */
.card__note-input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--plum);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
}

.card__note-input:focus-visible {
  outline-offset: 1px;
}

/* ---------- Étoiles d'envie ---------- */

.stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}

.star {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--line-strong);
}

.star .icon {
  width: 18px;
  height: 18px;
  fill: transparent;
  transition:
    fill 0.15s,
    transform 0.25s var(--ease);
}

.star.is-on {
  color: var(--plum);
}

.star.is-on .icon {
  fill: var(--plum);
}

/* Version modifiable : cibles plus grandes, et aperçu au survol. */
.stars--edit {
  margin-left: -5px;
  gap: 0;
}

.stars--edit .star {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
}

.stars--edit .star .icon {
  width: 20px;
  height: 20px;
}

.stars--edit .star:focus-visible {
  outline-offset: 0;
}

.stars--edit .star:active .icon {
  transform: scale(0.85);
}

@media (hover: hover) {
  .stars--edit:hover .star {
    color: var(--plum);
  }

  .stars--edit:hover .star .icon {
    fill: var(--lime);
  }

  .stars--edit .star:hover ~ .star {
    color: var(--line-strong);
  }

  .stars--edit .star:hover ~ .star .icon {
    fill: transparent;
  }

  .stars--edit .star:hover .icon {
    transform: scale(1.15);
  }
}

/* Chaque envie porte quatre icônes : l'étoile (par défaut), le sapin (thème Noël), le vélo (thème Effort)
   et le cœur (thèmes rose et velours). */
.icon--sapin,
.icon--velo,
.icon--coeur {
  display: none;
}

/* Thèmes rose et velours (Leticia) : des cœurs, avec les couleurs des étoiles. */
:root:is([data-fond='rose'], [data-fond='velours']) .icon--star {
  display: none;
}

:root:is([data-fond='rose'], [data-fond='velours']) .icon--coeur {
  display: block;
}

:root[data-fond='effort'] .icon--star {
  display: none;
}

:root[data-fond='effort'] .icon--velo {
  display: block;
}

/* Thème Effort : petits vélos orange. Non atteint = trait pâle ; atteint = trait braise, roues teintées. */
:root[data-fond='effort'] .star.is-on {
  color: var(--braise);
}

:root[data-fond='effort'] .star.is-on .icon {
  fill: color-mix(in srgb, var(--lime) 18%, transparent);
}

:root[data-fond='effort'] .star .icon {
  width: 22px;
  height: 22px;
}

:root[data-fond='effort'] .stars--edit .star .icon {
  width: 24px;
  height: 24px;
}

:root[data-fond='effort'] .card__badge .icon {
  fill: transparent;
}

@media (hover: hover) {
  :root[data-fond='effort'] .stars--edit:hover .star {
    color: var(--braise);
  }

  :root[data-fond='effort'] .stars--edit:hover .star .icon {
    fill: color-mix(in srgb, var(--lime) 30%, transparent);
  }

  :root[data-fond='effort'] .stars--edit .star:hover ~ .star {
    color: var(--line-strong);
  }

  :root[data-fond='effort'] .stars--edit .star:hover ~ .star .icon {
    fill: transparent;
  }
}

:root[data-fond='noel'] .icon--star {
  display: none;
}

:root[data-fond='noel'] .icon--sapin {
  display: block;
}

/* Thème Noël : sapins verts. Non atteint = contour vert pâle ; atteint = sapin plein,
   tronc brun et boule dorée au sommet. */
:root[data-fond='noel'] .star {
  color: color-mix(in srgb, var(--sapin-vert) 42%, transparent);
}

:root[data-fond='noel'] .star.is-on {
  color: var(--sapin-vert);
}

:root[data-fond='noel'] .star.is-on .icon {
  --sapin-tronc: #7a4a2a;
  --sapin-boule: var(--lime);
  fill: var(--sapin-vert);
}

/* Les sapins sont plus hauts que larges : un peu plus grands que les étoiles pour le même poids visuel. */
:root[data-fond='noel'] .star .icon {
  width: 20px;
  height: 20px;
}

:root[data-fond='noel'] .stars--edit .star .icon {
  width: 22px;
  height: 22px;
}

@media (hover: hover) {
  :root[data-fond='noel'] .stars--edit:hover .star {
    color: var(--sapin-vert);
  }

  :root[data-fond='noel'] .stars--edit:hover .star .icon {
    fill: color-mix(in srgb, var(--sapin-vert) 45%, transparent);
  }

  :root[data-fond='noel'] .stars--edit .star:hover ~ .star {
    color: color-mix(in srgb, var(--sapin-vert) 42%, transparent);
  }

  :root[data-fond='noel'] .stars--edit .star:hover ~ .star .icon {
    fill: transparent;
  }
}

/* Pastilles sur la photo : « Coup de cœur » (5 étoiles) et, pour les proches, « Réservé » / « Déjà acheté ». */
.card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}

.card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 7px;
  border-radius: 999px;
  background: var(--plum);
  color: var(--ivory);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--plum) 70%, transparent);
  animation: pop 0.35s var(--ease);
}

.card__badge .icon {
  width: 14px;
  height: 14px;
  color: var(--lime);
  fill: var(--lime);
}

.card__badge--favorite {
  display: none;
}

.card.is-favorite .card__badge--favorite {
  display: inline-flex;
}

.card__badge--taken {
  background: var(--lime);
  color: var(--plum);
}

.card__badge--taken .icon {
  color: var(--plum);
}

/* Article déjà pris par un proche : la photo s'efface un peu. */
.card.is-taken .card__media > :not(.card__badges) {
  opacity: 0.45;
  filter: grayscale(0.6);
}

.card__claim-btn {
  margin-top: 8px;
  min-width: 0;
}

.card__claim-btn .icon {
  width: 16px;
  height: 16px;
}

.card__claim-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pris par un autre proche : simple étiquette, à la place du bouton. */
.card__claim-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lime) 55%, transparent);
  font-size: 0.875rem;
  font-weight: 600;
}

/* ---------- Partage : explication / aperçu de la propriétaire ---------- */

.share-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--r-m);
  background: var(--surface);
  font-size: 0.9375rem;
  text-wrap: pretty;
}

.share-notice > .icon {
  margin-top: 1px;
  color: var(--plum);
}

.share-notice a {
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Fenêtre « Je l'offre » ---------- */

.claim-dialog__item {
  display: -webkit-box;
  overflow: hidden;
  font-weight: 600;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.choices {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}

.choice:hover {
  border-color: var(--plum);
}

.choice:has(.choice__input:checked) {
  border-color: var(--plum);
  background: color-mix(in srgb, var(--lime) 45%, var(--surface));
}

.choice__input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--plum);
}

.choice__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.choice__title {
  font-weight: 700;
}

.choice__text {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---------- Tri ---------- */

.sortbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: clamp(24px, 3vw, 36px);
}

.sortbar__sort {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px 0 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}

.filter-chip .icon {
  width: 16px;
  height: 16px;
  opacity: 0;
  margin-right: -22px;
  transition:
    opacity 0.2s,
    margin 0.2s var(--ease);
}

.filter-chip:hover {
  border-color: var(--plum);
}

.filter-chip[aria-pressed='true'] {
  border-color: var(--plum);
  background: var(--lime);
}

.filter-chip[aria-pressed='true'] .icon {
  opacity: 1;
  margin-right: 0;
}

.sortbar[hidden] {
  display: none;
}

.sortbar:not([hidden]) + .grid {
  margin-top: 18px;
}

.sortbar__label {
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--plum) 8%, transparent);
}

.segmented__option {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--plum);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.segmented__option[aria-pressed='true'] {
  background: var(--plum);
  color: var(--ivory);
}

.segmented__option[aria-pressed='false']:hover {
  background: color-mix(in srgb, var(--plum) 10%, transparent);
}

.card__cta .icon {
  width: 16px;
  height: 16px;
  color: var(--lime);
  transition: transform 0.25s var(--ease);
}

.card__cta:hover .icon {
  transform: translate(2px, -2px);
}

.skeleton {
  background: linear-gradient(
      100deg,
      transparent 20%,
      color-mix(in srgb, var(--ivory) 80%, transparent) 50%,
      transparent 80%
    )
    0 0 / 200% 100%,
    color-mix(in srgb, var(--plum) 10%, var(--bg));
  animation: shimmer 1.3s linear infinite;
}

.card--pending .card__title {
  color: var(--ink-soft);
}

.loading-block {
  height: clamp(220px, 34vw, 380px);
  border-radius: var(--r-xl);
}

.empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(40px, 8vw, 88px) 20px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-xl);
  text-align: center;
}

.empty p {
  max-width: 30em;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---------- Bandeau visiteur / pages d'état ---------- */

.band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--r-xl);
  background: var(--lime);
}

.band p {
  margin-top: 6px;
}

.state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding-block: clamp(40px, 10vw, 120px);
}

.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: clamp(40px, 6vw, 72px);
  padding-block: 28px;
  border-top: 1.5px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* ---------- Page « Ajouter » (bouton + Ma wishlist) ---------- */

.add {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 5vw, 64px);
  padding-block: clamp(16px, 4vw, 48px);
}

.add__preview {
  display: flex;
  flex-direction: column;
}

.add__open {
  width: 100%;
}

.add__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Ancien bouton « + Ma wishlist » : invitation à le remplacer. */
.add__update {
  padding: 14px 18px;
  border-radius: var(--r-m);
  background: var(--surface);
  font-size: 0.9375rem;
  text-wrap: pretty;
}

.add__update a {
  font-weight: 600;
}

.picker {
  display: grid;
  gap: 10px;
}

.picker__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 18px 10px 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  text-align: left;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}

.picker__item:hover {
  border-color: var(--plum);
}

.picker__item:disabled {
  cursor: progress;
  opacity: 0.6;
}

.picker__thumb {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--lime);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1.5rem;
  text-transform: uppercase;
}

.picker__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.picker__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.picker__title {
  font-weight: 700;
  font-stretch: 125%;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
}

.picker__meta {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.picker__item .icon {
  width: 22px;
  height: 22px;
}

.done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--r-xl);
  background: var(--lime);
}

.done__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Fenêtres ---------- */

.dialog {
  width: min(480px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--r-l);
  background: var(--ivory);
  color: var(--ink);
  box-shadow: 0 40px 90px -30px color-mix(in srgb, var(--plum) 80%, transparent);
  overflow: auto;
}

.dialog[open] {
  animation: pop 0.35s var(--ease);
}

.dialog::backdrop {
  background: color-mix(in srgb, var(--plum) 45%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fade 0.3s;
}

.dialog__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
}

.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dialog__title {
  font-weight: 700;
  font-stretch: 125%;
  font-size: 1.375rem;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.dialog__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.notice {
  padding: 12px 16px;
  border-radius: var(--r-s);
  background: var(--rose);
  font-size: 0.9375rem;
  text-wrap: pretty;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field__label {
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.field__input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1.5px solid color-mix(in srgb, var(--plum) 30%, transparent);
  border-radius: var(--r-s);
  outline: 0;
  background: var(--paper);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.field__input::placeholder {
  color: color-mix(in srgb, var(--plum) 50%, var(--ivory));
  opacity: 1;
}

.field__input:focus {
  border-color: var(--plum);
  box-shadow: 0 0 0 4px var(--halo);
}

.field__hint {
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--plum) 76%, var(--ivory));
  text-wrap: pretty;
}

.media-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.media-row__thumb {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  flex: none;
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--plum) 14%, transparent);
  color: color-mix(in srgb, var(--plum) 76%, var(--ivory));
}

.media-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.media-row__thumb--cover img {
  object-fit: cover;
  mix-blend-mode: normal;
}

.media-row__thumb.is-busy {
  opacity: 0.5;
}

.media-row__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.media-row__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.copy {
  display: flex;
  gap: 8px;
  padding: 6px;
  border: 1.5px solid var(--plum);
  border-radius: 999px;
  background: var(--paper);
}

.copy__input {
  flex: 1;
  min-width: 0;
  padding: 0 4px 0 14px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.9375rem;
  text-overflow: ellipsis;
}

.dialog .muted {
  color: color-mix(in srgb, var(--plum) 76%, var(--ivory));
}

.toast {
  position: fixed;
  inset: auto 0 24px;
  width: fit-content;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--plum);
  color: var(--ivory);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
  box-shadow: var(--shadow);
  overflow: visible;
  animation: rise 0.35s var(--ease);
}

/* ---------- Animations ---------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes shimmer {
  to {
    background-position:
      -200% 0,
      0 0;
  }
}

/* ---------- Adaptation aux écrans ---------- */

@media (max-width: 900px) {
  .landing,
  .add {
    grid-template-columns: minmax(0, 1fr);
  }

  .magic {
    grid-template-columns: minmax(0, 1fr);
  }

  .magic__drag {
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .nav {
    height: 72px;
  }

  .nav__user-name {
    display: none;
  }

  .theme-picker {
    height: 36px;
    margin-right: 2px;
    padding-left: 4px;
  }

  .theme-picker__label {
    display: none;
  }

  .theme-picker__dot {
    width: 26px;
    height: 26px;
  }

  /* Header compact : tout tient sur une ligne, sans défilement horizontal. */
  .nav {
    gap: 12px;
  }

  .nav__actions {
    gap: 10px;
  }

  .nav__user {
    gap: 6px;
  }

  .nav__link-more {
    display: none;
  }

  .nav .btn--sm {
    height: 38px;
    padding-inline: 14px;
    white-space: nowrap;
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .step__title {
    margin-top: 10px;
  }

  .lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
  }

  .list-card__initial {
    font-size: 3.25rem;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    border-radius: var(--r-l);
  }

  .hero__cover {
    order: -1;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-m);
  }

  .hero__cover--empty {
    order: 1;
    aspect-ratio: auto;
    grid-auto-flow: column;
    min-height: 68px;
  }

  .hero__cover--empty .icon {
    width: 22px;
    height: 22px;
  }

  .hero__text,
  .hero--text .hero__text {
    min-height: 0;
    gap: 22px;
  }
}

@media (max-width: 600px) {
  .landing .pillform,
  .add .pillform {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--r-l);
    padding: 10px;
  }

  .landing .pillform__input,
  .add .pillform__input {
    padding-inline: 12px;
  }

  .hint {
    padding-left: 4px;
  }

  .demo__thumb {
    width: 64px;
    height: 64px;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 12px;
  }

  .card__media {
    border-radius: var(--r-s);
  }

  .card__title {
    font-size: 0.875rem;
  }

  .card__price {
    font-size: 1.0625rem;
  }

  .card__cta,
  .card__claim-btn {
    padding-inline: 10px;
    font-size: 0.8125rem;
  }

  .addbar {
    padding-left: 4px;
  }

  .addbar > .icon {
    display: none;
  }

  .addbar .btn {
    padding-inline: 16px;
  }

  .addbar__input {
    font-size: 1rem;
  }

  .hero__actions .btn {
    flex: 1;
  }

  .dialog__form {
    padding: 20px;
  }
}

/* Petits téléphones : le logo seul suffit (le lien garde son nom pour les lecteurs d'écran). */
@media (max-width: 480px) {
  .brand__name {
    display: none;
  }
}

/* Indications réservées au clavier / à la souris */
@media (hover: none) {
  .only-pointer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Thèmes à motif — Noël (« Tartan de Noël ») et Étoiles (« des étoiles plein les yeux »)
   Mêmes écrans, mêmes composants : les couleurs, la police des titres et le motif
   viennent des jetons de chaque thème (en haut du fichier). Ce bloc donne la mise en
   page commune — partie haute de l'accueil « page et motif », pages de liste sur le
   motif avec des éléments posés sur papier, cartes article à infos intégrées — puis
   les décors propres à chaque thème : double filet du livre (Noël), ciel et
   constellations (Étoiles).
   ========================================================================== */

/* ---------- Titres ---------- */

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours'])
  :is(
    .display,
    .title,
    .brand__name,
    .hero__title,
    .magic__title,
    .step__title,
    .demo__name,
    .list-card__title,
    .list-card__initial,
    .profile__avatar,
    .profile__name,
    .dialog__title,
    .picker__title,
    .picker__thumb,
    .card__placeholder,
    .card__title,
    .nav__avatar,
    .footer > :first-child
  ) {
  font-family: var(--font-display);
  font-style: var(--display-style, normal);
  font-variant-caps: var(--display-caps);
  font-weight: var(--display-weight);
  font-stretch: 100%;
  letter-spacing: var(--display-tracking);
}

/* Les deux polices de titres paraissent plus petites qu'Archivo large : on rattrape les tailles
   (--display-scale ajuste selon la police). */
:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .display {
  font-size: calc(clamp(3rem, 7vw, 5.75rem) * var(--display-scale));
  line-height: 0.9;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .title {
  font-size: calc(clamp(1.875rem, 3.2vw, 2.75rem) * var(--display-scale));
  line-height: 1.02;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .brand__name {
  font-size: calc(1.75rem * var(--display-scale));
  line-height: 1;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .hero__title {
  font-size: calc(clamp(3rem, 6.4vw, 6rem) * var(--display-scale));
  line-height: 0.9;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .magic__title {
  font-size: calc(clamp(2.25rem, 4vw, 3.25rem) * var(--display-scale));
  line-height: 0.98;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .step__title {
  font-size: calc(1.875rem * var(--display-scale));
  line-height: 1.02;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .demo__name {
  font-size: calc(clamp(1.5rem, 2.4vw, 1.75rem) * var(--display-scale));
  line-height: 0.98;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .list-card__title {
  font-size: calc(1.625rem * var(--display-scale));
  line-height: 1.05;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .list-card__initial {
  font-size: calc(5.5rem * var(--display-scale));
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .profile__name {
  font-size: calc(1.5rem * var(--display-scale));
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .profile--add .profile__name {
  font-size: calc(1.25rem * var(--display-scale));
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .dialog__title {
  font-size: calc(1.875rem * var(--display-scale));
  line-height: 1.02;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .picker__title {
  font-size: calc(1.375rem * var(--display-scale));
  line-height: 1.05;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .nav__avatar {
  font-size: calc(1.125rem * var(--display-scale));
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .footer > :first-child {
  font-size: calc(1.125rem * var(--display-scale));
  line-height: 1.2;
}

/* Surtitres plus espacés */
:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .eyebrow {
  letter-spacing: 0.22em;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .step__num {
  color: var(--gold-ink);
  letter-spacing: 0.22em;
}

/* Logo : pastille foncée cerclée d'or */
:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .brand__mark {
  box-shadow:
    inset 0 0 0 3px var(--plum),
    inset 0 0 0 4px var(--lime);
}

/* ---------- Blocs foncés (en-tête de liste, bouton magique) ---------- */

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) :is(.hero, .magic, .card, .list-card__cover) {
  position: relative;
}

/* Le contenu laisse de la place au décor (double filet ou constellation). */
:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .hero {
  padding: clamp(32px, 4vw, 52px);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .magic {
  padding: clamp(36px, 5vw, 60px);
}

/* « La wishlist de… » devient une ligne de titre encadrée de deux traits dorés. */
:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .hero .pill {
  gap: 12px;
  padding: 0;
  background: none;
  color: var(--rose);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .hero .pill::before,
:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .hero .pill::after {
  content: '';
  flex: none;
  width: 22px;
  height: 1.5px;
  background: var(--lime);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .hero__meta {
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ---------- Accueil : partie haute « page et motif » ----------
   Un cadre réunit une page de papier (le texte) et un pan de motif
   (les exemples d'articles), comme un livre ouvert. */

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .landing {
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(1200px - 2 * var(--gutter));
  margin-block: clamp(4px, 1vw, 12px) clamp(24px, 4vw, 40px);
  padding: 8px;
  gap: 0;
  align-items: stretch;
  border: 1.5px solid var(--plum);
  border-radius: 44px;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .landing__text {
  justify-content: center;
  padding: clamp(28px, 5vw, 64px);
  border-radius: 36px 0 0 36px;
  background: var(--surface);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .landing .pillform {
  background: var(--bg);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .demo {
  align-content: center;
  gap: 14px;
  padding: clamp(24px, 4vw, 52px);
  border-radius: 0 36px 36px 0;
  background: var(--motif);
  /* liseré or et foncé à la jonction de la page et du motif */
  box-shadow:
    inset 6px 0 0 var(--lime),
    inset 9px 0 0 var(--plum);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .demo__card {
  box-shadow: 0 22px 40px -20px rgba(0, 0, 0, 0.7);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .demo__card--surface {
  box-shadow:
    inset 0 0 0 1.5px var(--line),
    0 22px 40px -20px rgba(0, 0, 0, 0.7);
}

/* ---------- Pages de liste et « Ajouter » : fond à motif, éléments posés sur papier ---------- */

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) body.page-motif {
  background: var(--motif);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif .nav {
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(1200px - 2 * var(--gutter));
  height: auto;
  min-height: 60px;
  margin-top: clamp(12px, 2vw, 20px);
  padding: 8px 10px 8px 12px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.7);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif main {
  margin-top: clamp(14px, 2vw, 20px);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif :is(.hero, .addbar, .band) {
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif .sortbar__sort {
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: var(--surface);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif .filter-chip:not([aria-pressed='true']) {
  background: var(--surface);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif .grid {
  gap: 24px 22px;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif :is(.empty, .state, .who) {
  border-radius: var(--r-xl);
  background: var(--surface);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif :is(.state, .who) {
  margin-top: 4px;
  padding-inline: clamp(20px, 5vw, 56px);
}

/* Page « Ajouter » : la colonne de droite (note, choix de la liste, confirmation)
   est posée sur un panneau papier, le bouton « Voir la page » aussi. */
:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif .add__side {
  padding: clamp(22px, 4vw, 40px);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7);
}

/* Sur ces panneaux papier, l'avatar « papier » se détache par le fond du thème et un filet. */
:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif :is(.add__side, .who) .profile__avatar--surface {
  background: var(--ivory);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif .add__open {
  margin-top: 12px;
  border-color: transparent;
  background: var(--surface);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.7);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif .add__open:hover {
  background: var(--plum);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif .footer {
  padding: 18px 24px;
  border: 0;
  border-radius: 22px;
  background: var(--surface);
  color: var(--ink-soft);
}

/* ---------- Cartes article : l'image et toutes les infos dans la carte ---------- */

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card {
  padding: 32px 30px 28px;
  border-radius: 26px;
  background: var(--ivory);
  box-shadow: var(--shadow);
  text-align: center;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif .card {
  box-shadow: 0 24px 44px -22px rgba(0, 0, 0, 0.75);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__media {
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--surface);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__edit {
  top: 40px;
  right: 38px;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__body {
  align-items: center;
  gap: 6px;
  padding: 18px 0 0;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__site {
  max-width: 100%;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__title {
  font-size: calc(1.5rem * var(--display-scale));
  line-height: 1.04;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card .stars {
  justify-content: center;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card .stars--edit {
  margin-left: 0;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card :is(.chip, .note-add) {
  align-self: center;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__note-slot {
  justify-content: center;
  max-width: 100%;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__note {
  text-align: center;
}

/* Petit fleuron doré au-dessus du prix */
:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__price::before {
  content: '✦';
  display: block;
  width: 76px;
  margin: 2px auto 8px;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) left center / 28px 1.5px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right center / 28px 1.5px no-repeat;
  color: var(--lime);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__cta {
  margin-top: 16px;
}

/* « Réservé » / « Déjà acheté » : couleur propre au thème, distincte de l'or */
:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__badge--taken {
  background: var(--taken-bg);
  color: var(--taken-ink);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__badge--taken .icon {
  color: var(--taken-ink);
}

:root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__claim-tag {
  background: color-mix(in srgb, var(--taken-bg) 13%, transparent);
  color: var(--taken-bg);
}

/* ==========================================================================
   Décor Noël : double filet aux coins creusés (repris de la couverture du livre)
   Dessiné en dégradés sur un pseudo-élément : aucune balise en plus.
   Filet extérieur à 14px du bord, intérieur à 21px, coins creusés concentriques.
   La couleur vient de --fc, posé sur chaque bloc.
   ========================================================================== */

:root[data-fond='noel'] :is(.hero, .magic) {
  --fc: color-mix(in srgb, var(--rose) 75%, transparent);
}

:root[data-fond='noel'] .list-card:nth-child(3n + 3) .list-card__cover:has(.list-card__initial) {
  --fc: color-mix(in srgb, var(--rose) 70%, transparent);
}

:root[data-fond='noel'] .card {
  --fc: color-mix(in srgb, var(--plum) 35%, transparent);
}

:root[data-fond='noel'] :is(.hero, .magic, .card, .list-card:nth-child(3n + 3) .list-card__cover:has(.list-card__initial))::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(var(--fc), var(--fc)) 34px 14px / calc(100% - 68px) 1.5px,
    linear-gradient(var(--fc), var(--fc)) 34px calc(100% - 14px) / calc(100% - 68px) 1.5px,
    linear-gradient(var(--fc), var(--fc)) 14px 34px / 1.5px calc(100% - 68px),
    linear-gradient(var(--fc), var(--fc)) calc(100% - 14px) 34px / 1.5px calc(100% - 68px),
    radial-gradient(circle at 0 0, transparent 19.25px, var(--fc) 19.5px 20.75px, transparent 21px) left 14px top 14px / 21px 21px,
    radial-gradient(circle at 100% 0, transparent 19.25px, var(--fc) 19.5px 20.75px, transparent 21px) right 14px top 14px / 21px 21px,
    radial-gradient(circle at 0 100%, transparent 19.25px, var(--fc) 19.5px 20.75px, transparent 21px) left 14px bottom 14px / 21px 21px,
    radial-gradient(circle at 100% 100%, transparent 19.25px, var(--fc) 19.5px 20.75px, transparent 21px) right 14px bottom 14px / 21px 21px,
    linear-gradient(var(--fc), var(--fc)) 40px 21px / calc(100% - 80px) 1.5px,
    linear-gradient(var(--fc), var(--fc)) 40px calc(100% - 21px) / calc(100% - 80px) 1.5px,
    linear-gradient(var(--fc), var(--fc)) 21px 40px / 1.5px calc(100% - 80px),
    linear-gradient(var(--fc), var(--fc)) calc(100% - 21px) 40px / 1.5px calc(100% - 80px),
    radial-gradient(circle at -7px -7px, transparent 26.25px, var(--fc) 26.5px 27.75px, transparent 28px) left 21px top 21px / 20px 20px,
    radial-gradient(circle at calc(100% + 7px) -7px, transparent 26.25px, var(--fc) 26.5px 27.75px, transparent 28px) right 21px top 21px / 20px 20px,
    radial-gradient(circle at -7px calc(100% + 7px), transparent 26.25px, var(--fc) 26.5px 27.75px, transparent 28px) left 21px bottom 21px / 20px 20px,
    radial-gradient(circle at calc(100% + 7px) calc(100% + 7px), transparent 26.25px, var(--fc) 26.5px 27.75px, transparent 28px) right 21px bottom 21px / 20px 20px;
  background-repeat: no-repeat;
}

/* ==========================================================================
   Décor Étoiles : ciel étoilé, constellations et carte du ciel
   La Grande Ourse veille sur l'en-tête des listes et sur l'accueil,
   Cassiopée sur le bouton magique. Le fond reste calme : un seul ciel, qui défile
   avec la page, et des blocs bleu nuit sans poussière d'étoiles autour de la constellation.
   ========================================================================== */

/* Blocs bleu nuit : une lueur douce et la constellation, rien d'autre */
:root[data-fond='etoiles'] .hero {
  background:
    url('/img/grande-ourse.svg') left 40% top 22px / 230px auto no-repeat,
    radial-gradient(ellipse 70% 80% at 10% 0%, rgba(110, 92, 200, 0.45), transparent 70%),
    var(--plum);
}

/* Sans photo de couverture, la constellation prend la place de droite. */
:root[data-fond='etoiles'] .hero--text {
  background:
    url('/img/grande-ourse.svg') right 48px center / 320px auto no-repeat,
    radial-gradient(ellipse 70% 80% at 10% 0%, rgba(110, 92, 200, 0.45), transparent 70%),
    var(--plum);
}

:root[data-fond='etoiles'] .magic {
  background:
    url('/img/cassiopee.svg') right 26% bottom 18px / 180px auto no-repeat,
    radial-gradient(ellipse 60% 90% at 100% 100%, rgba(110, 92, 200, 0.4), transparent 70%),
    var(--plum);
}

:root[data-fond='etoiles'] .list-card:nth-child(3n + 3) .list-card__cover:has(.list-card__initial) {
  background:
    radial-gradient(ellipse 80% 70% at 20% 0%, rgba(110, 92, 200, 0.45), transparent 70%),
    var(--plum);
  color: var(--lime);
}

/* Accueil : la Grande Ourse au-dessus des exemples d'articles */
:root[data-fond='etoiles'] .demo {
  background:
    url('/img/grande-ourse.svg') right 24px top 18px / 210px auto no-repeat,
    var(--motif);
  padding-top: clamp(96px, 10vw, 128px);
}

/* Cartes article : « carte du ciel » — un filet doré et une étoile au sommet */
:root[data-fond='etoiles'] .card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid color-mix(in srgb, var(--lime) 70%, transparent);
  border-radius: 18px;
  pointer-events: none;
}

:root[data-fond='etoiles'] .card::after {
  content: '✦';
  position: absolute;
  top: 3px;
  left: 50%;
  padding: 0 6px;
  transform: translateX(-50%);
  background: var(--ivory);
  color: var(--gold-ink);
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}

/* ---------- Thèmes à motif : adaptation aux écrans ---------- */

@media (max-width: 900px) {
  :root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .landing__text {
    border-radius: 36px 36px 0 0;
  }

  :root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .demo {
    border-radius: 0 0 36px 36px;
    box-shadow:
      inset 0 6px 0 var(--lime),
      inset 0 9px 0 var(--plum);
  }
}

@media (max-width: 760px) {
  :root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .page-motif .nav {
    min-height: 56px;
  }

  :root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .hero {
    padding: 32px 28px;
  }

  /* Le surtitre peut passer sur deux lignes : on garde seulement le trait de gauche. */
  :root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .hero .pill::after {
    display: none;
  }

  /* Sur téléphone, tout s'empile : la constellation a sa propre place, en bas à droite, sous le contenu. */
  :root[data-fond='etoiles'] :is(.hero, .magic) {
    padding-bottom: 116px;
  }

  :root[data-fond='etoiles'] :is(.hero, .hero--text) {
    background-position:
      right 22px bottom 20px,
      0 0;
    background-size:
      150px auto,
      auto;
  }

  :root[data-fond='etoiles'] .magic {
    background-position:
      right 22px bottom 22px,
      0 0;
    background-size:
      150px auto,
      auto;
  }
}

@media (max-width: 600px) {
  :root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .landing {
    border-radius: 32px;
    padding: 6px;
  }

  :root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .landing__text {
    padding: 28px 20px;
    border-radius: 26px 26px 0 0;
  }

  :root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .demo {
    padding: 24px 16px;
    border-radius: 0 0 26px 26px;
  }

  :root[data-fond='etoiles'] .demo {
    padding-top: 92px;
    background-size:
      170px auto,
      420px 420px,
      auto,
      auto,
      auto;
  }

  /* Deux cartes par ligne : marges et décor resserrés */
  :root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card {
    padding: 24px 22px 20px;
    border-radius: 20px;
  }

  :root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__media {
    border-radius: 10px;
  }

  :root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__edit {
    top: 30px;
    right: 28px;
  }

  :root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__body {
    padding-top: 14px;
  }

  :root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__title {
    font-size: calc(1.25rem * var(--display-scale));
  }

  :root:is([data-fond='noel'], [data-fond='etoiles'], [data-fond='effort'], [data-fond='velours']) .card__cta {
    margin-top: 12px;
  }

  :root[data-fond='etoiles'] .card::before {
    inset: 8px;
    border-radius: 14px;
  }

  :root[data-fond='etoiles'] .card::after {
    top: 1px;
    font-size: 12px;
  }

  :root[data-fond='noel'] .card::before {
    background:
      linear-gradient(var(--fc), var(--fc)) 24px 10px / calc(100% - 48px) 1.5px,
      linear-gradient(var(--fc), var(--fc)) 24px calc(100% - 10px) / calc(100% - 48px) 1.5px,
      linear-gradient(var(--fc), var(--fc)) 10px 24px / 1.5px calc(100% - 48px),
      linear-gradient(var(--fc), var(--fc)) calc(100% - 10px) 24px / 1.5px calc(100% - 48px),
      radial-gradient(circle at 0 0, transparent 13.25px, var(--fc) 13.5px 14.75px, transparent 15px) left 10px top 10px / 15px 15px,
      radial-gradient(circle at 100% 0, transparent 13.25px, var(--fc) 13.5px 14.75px, transparent 15px) right 10px top 10px / 15px 15px,
      radial-gradient(circle at 0 100%, transparent 13.25px, var(--fc) 13.5px 14.75px, transparent 15px) left 10px bottom 10px / 15px 15px,
      radial-gradient(circle at 100% 100%, transparent 13.25px, var(--fc) 13.5px 14.75px, transparent 15px) right 10px bottom 10px / 15px 15px,
      linear-gradient(var(--fc), var(--fc)) 28px 15px / calc(100% - 56px) 1.5px,
      linear-gradient(var(--fc), var(--fc)) 28px calc(100% - 15px) / calc(100% - 56px) 1.5px,
      linear-gradient(var(--fc), var(--fc)) 15px 28px / 1.5px calc(100% - 56px),
      linear-gradient(var(--fc), var(--fc)) calc(100% - 15px) 28px / 1.5px calc(100% - 56px),
      radial-gradient(circle at -5px -5px, transparent 18.25px, var(--fc) 18.5px 19.75px, transparent 20px) left 15px top 15px / 14px 14px,
      radial-gradient(circle at calc(100% + 5px) -5px, transparent 18.25px, var(--fc) 18.5px 19.75px, transparent 20px) right 15px top 15px / 14px 14px,
      radial-gradient(circle at -5px calc(100% + 5px), transparent 18.25px, var(--fc) 18.5px 19.75px, transparent 20px) left 15px bottom 15px / 14px 14px,
      radial-gradient(circle at calc(100% + 5px) calc(100% + 5px), transparent 18.25px, var(--fc) 18.5px 19.75px, transparent 20px) right 15px bottom 15px / 14px 14px;
    background-repeat: no-repeat;
  }
}

/* ==========================================================================
   Décor Effort (Florian) : verre dépoli et braise
   Panneaux et cartes en verre dépoli posés sur le fond flou ; en-tête de liste,
   bouton magique et couverture foncée en verre fumé, traversés d'une courbe
   d'effort orange lumineuse ; petits vélos à la place des étoiles (plus haut).
   ========================================================================== */

/* Verre dépoli sur le fond à motif */
:root[data-fond='effort'] .page-motif :is(.nav, .pillform, .sortbar__sort, .footer, .share-notice, .empty, .state, .who, .add__side, .add__open, .card),
:root[data-fond='effort'] .page-motif .filter-chip:not([aria-pressed='true']) {
  background: var(--verre);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  box-shadow:
    inset 0 0 0 1px var(--verre-bord),
    var(--verre-ombre);
}

:root[data-fond='effort'] .page-motif :is(.pillform, .filter-chip) {
  border-color: var(--verre-bord);
}

/* Verre fumé + courbe d'effort sur les blocs foncés */
:root[data-fond='effort'] :is(.hero, .magic) {
  background:
    url('/img/effort-courbe.svg') left bottom / 100% auto no-repeat,
    var(--fume);
}

/* La courbe a sa place sous le contenu (sa hauteur suit la largeur du bloc). */
:root[data-fond='effort'] :is(.hero, .magic) {
  padding-bottom: calc(15.5% + 16px);
}

:root[data-fond='effort'] .list-card:nth-child(3n + 3) .list-card__cover:has(.list-card__initial) {
  background:
    url('/img/effort-courbe.svg') left bottom / 100% auto no-repeat,
    var(--fume);
  color: var(--rose);
}

/* Accueil : les exemples d'articles en verre, en braise et en verre fumé */
:root[data-fond='effort'] .demo__card--surface {
  background: var(--verre);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  box-shadow:
    inset 0 0 0 1px var(--verre-bord),
    var(--verre-ombre);
}

:root[data-fond='effort'] .demo__card--lime {
  --fg-card: #ffffff;
  --bg-card: #c84a22;
  background: linear-gradient(120deg, #a93c1b 0%, #de5629 55%, #f39467 100%);
}

:root[data-fond='effort'] .demo__card--plum {
  --fg-card: var(--rose);
  background: var(--fume);
}

/* Cartes article : liseré de verre et point de braise lumineux au sommet */
:root[data-fond='effort'] .card {
  border-radius: 30px;
}

:root[data-fond='effort'] .card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  pointer-events: none;
}

:root[data-fond='effort'] .card::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #ffb085;
  box-shadow:
    0 0 0 5px rgba(240, 116, 58, 0.22),
    0 0 14px rgba(240, 116, 58, 0.9);
  pointer-events: none;
}

:root[data-fond='effort'] .card__media {
  border-radius: 16px;
  background: #ffffff;
}

:root[data-fond='effort'] .card__title {
  font-weight: 400;
}

/* Prix en chiffres fins, sous un point de braise */
:root[data-fond='effort'] .card__price {
  font-family: var(--font-display);
  font-weight: 300;
  font-stretch: 100%;
  font-size: 1.875rem;
  letter-spacing: -0.03em;
}

:root[data-fond='effort'] .card__price::before {
  content: '';
  height: 14px;
  margin: 2px auto 6px;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) left center / 28px 1.5px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right center / 28px 1.5px no-repeat,
    radial-gradient(circle, #f0743a 0 3.5px, rgba(240, 116, 58, 0.35) 4.5px, transparent 7px) center / 14px 14px no-repeat;
}

@media (max-width: 600px) {
  :root[data-fond='effort'] .card {
    border-radius: 22px;
  }

  :root[data-fond='effort'] .card::before {
    inset: 8px;
    border-radius: 15px;
  }

  :root[data-fond='effort'] .card::after {
    top: 3px;
  }
}

/* ==========================================================================
   Décor Velours (Leticia) : velours bordeaux et verre rose
   Pages de liste sur un velours bordeaux traversé de grands rubans de verre rose ;
   panneaux rose poudré ; en-tête de liste en verre rose clair écrit en bordeaux ;
   bouton magique et couverture foncée en velours ; cartes à double filet et perle.
   ========================================================================== */

/* Fond : velours + rubans (pages de liste et pan de droite de l'accueil) */
:root[data-fond='velours'] body.page-motif {
  background:
    url('/img/velours-rubans.svg') center top / max(1200px, 100%) auto no-repeat,
    var(--motif);
}

:root[data-fond='velours'] .demo {
  background:
    url('/img/velours-rubans.svg') center / cover no-repeat,
    var(--motif);
}

/* Blocs bordeaux en velours, traversés d'un ruban */
:root[data-fond='velours'] .magic,
:root[data-fond='velours'] .list-card:nth-child(3n + 3) .list-card__cover:has(.list-card__initial) {
  background:
    url('/img/velours-ruban-bande.svg') right center / cover no-repeat,
    var(--motif);
}

:root[data-fond='velours'] .list-card:nth-child(3n + 3) .list-card__cover:has(.list-card__initial) {
  color: var(--rose);
}

/* En-tête de liste : un bloc de verre rose clair, écrit en bordeaux (l'inverse des autres thèmes) */
:root[data-fond='velours'] .page-motif .hero {
  background:
    url('/img/velours-ruban-clair.svg') center bottom / 100% auto no-repeat,
    linear-gradient(160deg, rgba(255, 226, 233, 0.94), rgba(246, 190, 204, 0.86));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--plum);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    inset 0 -16px 36px rgba(180, 35, 58, 0.14),
    0 30px 60px -28px rgba(0, 0, 0, 0.85);
}

:root[data-fond='velours'] .page-motif :is(.hero__title, .hero .pill) {
  color: var(--plum);
}

:root[data-fond='velours'] .page-motif .hero .pill::before,
:root[data-fond='velours'] .page-motif .hero .pill::after {
  background: var(--gold-ink);
}

:root[data-fond='velours'] .page-motif .hero .btn--lime {
  background: var(--plum);
  color: var(--ivory);
}

:root[data-fond='velours'] .page-motif .hero .btn--lime:hover {
  background: var(--plum-deep);
}

:root[data-fond='velours'] .page-motif .hero .btn--outline-light {
  border-color: var(--plum);
  color: var(--plum);
}

:root[data-fond='velours'] .page-motif .hero .btn--outline-light:hover {
  background: var(--plum);
  color: var(--ivory);
}

:root[data-fond='velours'] .page-motif .hero__cover--empty {
  border-color: rgba(85, 28, 37, 0.45);
  background: rgba(255, 255, 255, 0.35);
  color: var(--plum);
}

:root[data-fond='velours'] .page-motif .hero__cover--empty .icon {
  color: var(--gold-ink);
}

:root[data-fond='velours'] .page-motif :is(.hero .btn, .hero__cover):focus-visible {
  outline-color: var(--plum);
}

/* Accueil : les exemples d'articles en blush, en rose et en verre sur le velours */
:root[data-fond='velours'] .demo__card--lime {
  background: linear-gradient(150deg, #f7c2cf, #ec9aaf);
}

:root[data-fond='velours'] .demo__card--plum {
  --fg-card: var(--rose);
  background: rgba(242, 175, 192, 0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 190, 205, 0.45),
    0 22px 40px -20px rgba(0, 0, 0, 0.7);
}

/* Cartes article : double filet bordeaux et perle de verre au sommet */
:root[data-fond='velours'] .card {
  border-radius: 26px;
}

:root[data-fond='velours'] .card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(85, 28, 37, 0.3);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 4px var(--ivory),
    inset 0 0 0 5px rgba(85, 28, 37, 0.14);
  pointer-events: none;
}

:root[data-fond='velours'] .card::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0 18%, rgba(255, 255, 255, 0.4) 32%, rgba(242, 140, 166, 0.65) 62%, #b4233a 100%);
  box-shadow: 0 4px 10px -4px rgba(85, 28, 37, 0.6);
  pointer-events: none;
}

:root[data-fond='velours'] .card__media {
  background: #ffffff;
}

/* Petite perle au-dessus du prix */
:root[data-fond='velours'] .card__price::before {
  content: '';
  height: 12px;
  margin: 2px auto 8px;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) left center / 28px 1.5px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right center / 28px 1.5px no-repeat,
    radial-gradient(circle at 42% 38%, #ffffff 0 1px, #f28ca6 2.5px, #b4233a 4.5px, transparent 5px) center / 12px 12px no-repeat;
}

@media (max-width: 600px) {
  :root[data-fond='velours'] .card {
    border-radius: 20px;
  }

  :root[data-fond='velours'] .card::before {
    inset: 8px;
    border-radius: 13px;
  }

  :root[data-fond='velours'] .card::after {
    top: 0;
    width: 15px;
    height: 15px;
    margin-left: -7.5px;
  }
}