:root {
  color-scheme: light;
  --bg: #fffdfb; --paper: #fff; --soft: #f8f5ff; --ink: #2a2347; --mute: #6c6788; --line: #ece6f8;
  --pri: #d92b63; --pri-soft: #ffe5ee; --pri-ink: #a3123f;
  --violet: #7b6cf6; --violet-soft: #ece9ff; --violet-ink: #5546d6;
  --sun: #ffc94d; --sun-soft: #fff1c4; --sun-ink: #6b4700;
  --mint: #2fc29b; --mint-soft: #d9f6ec; --mint-ink: #0a6a51;
  --shadow: 0 1px 2px rgb(42 35 71 / .05), 0 12px 32px rgb(123 108 246 / .12);
  --confetti: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%20viewBox='0%200%20220%20220'%3E%3Cg%20fill='none'%20stroke-linecap='round'%20stroke-width='3'%3E%3Cpath%20d='M24%2036q7-9%2014%200t14%200'%20stroke='%23ff8fb1'/%3E%3Cpath%20d='M140%20168q7-9%2014%200t14%200'%20stroke='%238d7dfa'/%3E%3Cpath%20d='M170%2040l10%2010M180%2040l-10%2010'%20stroke='%23ffc94d'/%3E%3C/g%3E%3Ccircle%20cx='98'%20cy='44'%20r='4.5'%20fill='%23ffc94d'/%3E%3Ccircle%20cx='176'%20cy='104'%20r='3.5'%20fill='%233ecfa8'/%3E%3Ccircle%20cx='44'%20cy='132'%20r='4'%20fill='%238d7dfa'/%3E%3Ccircle%20cx='120'%20cy='196'%20r='4.5'%20fill='%23ff8fb1'/%3E%3Ccircle%20cx='20'%20cy='190'%20r='3'%20fill='%233ecfa8'/%3E%3Cpath%20d='M190%20160l3%207%207%203-7%203-3%207-3-7-7-3%207-3z'%20fill='%23ffc94d'/%3E%3Cpath%20d='M68%2088l2.5%206%206%202.5-6%202.5-2.5%206-2.5-6-6-2.5%206-2.5z'%20fill='%233ecfa8'/%3E%3C/svg%3E");
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.55 ui-rounded, "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--ink); }
a { color: inherit; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
.logo { font: italic 700 1.7rem/1 var(--serif); letter-spacing: -.02em; text-decoration: none; }
.logo b { color: var(--pri); font-style: normal; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.01em; }
h1, h2 { font-family: var(--serif); font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-bottom: 1.2rem; }
h3 { font-size: 1.1rem; }
.mute { color: var(--mute); }

button, .btn { font: inherit; font-weight: 700; border: 0; border-radius: 99px; padding: .7rem 1.4rem; background: var(--pri); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; box-shadow: 0 4px 14px rgb(217 43 99 / .25); }
button.ghost, .btn.ghost { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.small { padding: .4rem .95rem; font-size: .88rem; }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
input, textarea, select { font: inherit; width: 100%; padding: .7rem .95rem; border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper); color: inherit; }
label { display: grid; gap: .3rem; font-weight: 700; font-size: .92rem; }
.form { display: grid; gap: .8rem; }
.msg { margin: 0; min-height: 1.4em; font-size: .9rem; }
.hint { margin: 0; font-size: .86rem; color: var(--mute); }
.pill { display: inline-block; padding: .15rem .8rem; border-radius: 99px; background: var(--pri-soft); color: var(--pri-ink); font-weight: 700; font-size: .82rem; }
.pill.role { background: var(--violet-ink); color: #fff; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Motifs : confettis sur les en-têtes, pois sur les bandeaux */
.hero-bg, .cover { position: relative; overflow: hidden; background: linear-gradient(135deg, #ffe4ee 0%, #efeaff 55%, #fff2cf 100%); }
.hero-bg::before, .cover::before { content: ''; position: absolute; inset: 0; background: var(--confetti); opacity: .75; pointer-events: none; }
.hero-bg > *, .cover > * { position: relative; }
.cover { padding-bottom: 2.4rem; border-radius: 0 0 44px 44px; }

/* Accueil */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; padding: 2rem 0 4rem; }
.lead { font-size: 1.15rem; color: var(--mute); margin: 1rem 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.chips li { padding: .3rem .85rem; border-radius: 99px; background: var(--paper); color: var(--violet-ink); font-weight: 700; font-size: .88rem; box-shadow: 0 2px 8px rgb(123 108 246 / .15); }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 26px; padding: 1.6rem; box-shadow: var(--shadow); }
.panel h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.band { background: var(--soft) radial-gradient(var(--violet-soft) 2px, transparent 2.6px) 0 0 / 24px 24px; padding: 3.5rem 0; }
section.pad { padding: 3.5rem 0; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.feat { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 1.4rem; box-shadow: var(--shadow); }
.feat .ico { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: var(--pri-soft); }
.feat:nth-child(3n+2) .ico { background: var(--violet-soft); }
.feat:nth-child(3n+3) .ico { background: var(--sun-soft); }
.feat h3 { margin: .7rem 0 .3rem; }
.feat p { margin: 0; color: var(--mute); font-size: .95rem; }
.steps { counter-reset: s; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 0; margin: 0; list-style: none; }
.steps li { counter-increment: s; position: relative; padding-top: 3.2rem; }
.steps li::before { content: counter(s); position: absolute; top: 0; left: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--sun); color: var(--sun-ink); display: grid; place-items: center; font: 700 1.2rem var(--serif); }
.steps p { margin: .3rem 0 0; color: var(--mute); }
.occ { display: flex; flex-wrap: wrap; gap: .7rem; }
.occ span { padding: .6rem 1.1rem; border-radius: 99px; background: var(--paper); box-shadow: 0 2px 10px rgb(123 108 246 / .14); font-weight: 700; }
details.faq { border-bottom: 1px solid var(--line); padding: 1rem 0; }
details.faq summary { cursor: pointer; font-weight: 700; }
details.faq p { margin: .6rem 0 0; color: var(--mute); }
.foot { padding: 2rem 0; color: var(--mute); font-size: .9rem; text-align: center; }
.loginbox { max-width: 440px; margin: 1rem auto 4rem; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } }

/* Page d’une liste */
.banner { margin: 0 0 1.2rem; padding: .7rem 1rem; border-radius: 16px; background: rgb(255 255 255 / .75); color: var(--violet-ink); font-size: .92rem; font-weight: 700; }
.head { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 1.4rem; box-shadow: var(--shadow); }
.avatar { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: var(--sun-soft); display: grid; place-items: center; font-size: 2.6rem; flex: none; box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--pri-soft); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.head .txt { flex: 1; min-width: 240px; }
.head h1 { margin: .5rem 0 0; font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
.desc { margin: .5rem 0 0; color: var(--mute); white-space: pre-line; overflow-wrap: anywhere; }
.tools { display: flex; gap: .5rem; flex-wrap: wrap; margin: .9rem 0 0; }
.adder { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.6rem 0; padding: 1rem; background: var(--soft); border-radius: 22px; }
.adder input { flex: 1; min-width: 220px; }
.items { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding: 0; margin: 1.6rem 0; list-style: none; }
.gift { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.gift.taken { border-left: 6px solid var(--mint); }
@media (prefers-reduced-motion: no-preference) { .gift { transition: transform .15s; } .gift:hover { transform: translateY(-3px); } }
.pic { position: relative; aspect-ratio: 4 / 3; background: var(--soft); display: grid; place-items: center; font-size: 2.4rem; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.flag { position: absolute; top: .6rem; left: .6rem; padding: .2rem .75rem; border-radius: 99px; background: var(--mint); color: #053b2c; font-weight: 800; font-size: .8rem; z-index: 1; }
.gbody { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.price { align-self: flex-start; padding: .1rem .75rem; border-radius: 12px; background: var(--sun-soft); color: var(--sun-ink); box-shadow: inset 0 0 0 1.5px var(--sun); font-weight: 800; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.gname { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; text-decoration: none; }
.shop { font-size: .8rem; color: var(--mute); }
.note { margin: 0; padding-left: .6rem; border-left: 2px solid var(--violet-soft); font-size: .84rem; font-style: italic; color: var(--mute); overflow-wrap: anywhere; }
.who { margin: 0; font-size: .88rem; font-weight: 700; color: var(--mint-ink); overflow-wrap: anywhere; }
.acts { margin-top: auto; padding-top: .5rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.foot-tools { display: flex; gap: .5rem; flex-wrap: wrap; margin: 2rem 0 3rem; }
.authwrap { max-width: 460px; margin: 1rem auto 4rem; padding: 0 1.25rem; }
.inv { display: flex; gap: .6rem; align-items: center; justify-content: space-between; padding: .4rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

dialog { border: 0; border-radius: 26px; background: var(--paper); color: var(--ink); padding: 1.5rem; width: min(94vw, 480px); box-shadow: 0 24px 70px rgb(42 35 71 / .35); }
dialog::backdrop { background: rgb(42 35 71 / .45); }
dialog h2 { font-size: 1.45rem; margin-bottom: 1rem; }

.pics { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem; }
.thumb { flex: none; width: 76px; height: 76px; padding: 0; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 2px var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb.on { box-shadow: inset 0 0 0 3px var(--pri); }

/* Participants, partage, rejoindre la liste */
.people { margin: 1.6rem 0 0; }
.people h3 { font-family: var(--serif); font-size: 1.2rem; }
.count { display: inline-block; min-width: 1.6rem; padding: 0 .5rem; border-radius: 99px; background: var(--violet-soft); color: var(--violet-ink); font: 700 .85rem/1.6rem ui-rounded, system-ui, sans-serif; text-align: center; }
.plist { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.who-chip { padding: .25rem .85rem; border-radius: 99px; background: var(--violet-soft); color: var(--violet-ink); font-weight: 700; font-size: .9rem; overflow-wrap: anywhere; }
.who-chip.me { background: var(--sun-soft); color: var(--sun-ink); }
.who-chip small { font-weight: 400; opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  .who-chip.new { animation: pop .5s ease-out; }
  @keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
}
.sharecard { display: grid; gap: .6rem; padding: 1rem; border-radius: 20px; background: var(--soft); border: 1px solid var(--line); }
.sharecard h3 { font-family: var(--serif); font-size: 1.15rem; }

.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); max-width: min(92vw, 520px); padding: .8rem 1.2rem; border-radius: 18px; background: var(--ink); color: #fff; font-weight: 700; box-shadow: 0 12px 40px rgb(42 35 71 / .4); z-index: 50; text-align: center; }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: .55rem; }
.logo img { width: 38px; height: 38px; object-fit: contain; }
.pic img.ph { position: static; width: 44%; height: auto; background: transparent; opacity: .9; }

/* Une couleur par rôle, pour les reconnaître d’un coup d’œil */
.pill.role.e { background: var(--sun); color: var(--sun-ink); }   /* Je donne mes idées cadeaux ! */
.pill.role.a { background: var(--violet-ink); color: #fff; }       /* J’administre la liste */
.pill.role.l { background: #0b7a60; color: #fff; }                  /* Je réserve les cadeaux */
.banner { border-left: 6px solid var(--violet-ink); }
body[data-role="e"] .banner { border-left-color: var(--sun); color: #7a5200; }
body[data-role="a"] .banner { border-left-color: var(--violet-ink); color: var(--violet-ink); }
body[data-role="l"] .banner { border-left-color: #0b7a60; color: #0a6a51; }