/*
 * ListeKdo — feuille de style unique, sans framework.
 * Les thèmes (birthday, noel, naissance, mariage, wishlist) ne changent que les variables.
 */

/* ---------- Thèmes ---------- */

:root {
    --brand: #2f7cf6;
    --brand-strong: #1f66da;
    --brand-soft: #e8f0fe;
    --on-brand: #fff;
    --page: #fff8ec;
    --hero-from: #ffe7b3;
    --hero-to: #fff8ec;
    --confetti-1: #ffb4c8;
    --confetti-2: #8fc1ff;
    --confetti-3: #ffd36b;
    --surface: #fff;
    --surface-muted: #f4f6fb;
    --line: #e9ecf3;
    --text: #1d2440;
    --text-muted: #626a85;
    --success: #1f9d55;
    --success-soft: #e3f6ea;
    --danger: #e5484d;
    --heart: #f0445e;
    --radius: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --shadow-sm: 0 2px 8px rgb(29 36 64 / .06);
    --shadow: 0 10px 30px rgb(29 36 64 / .08), 0 2px 6px rgb(29 36 64 / .04);
    --shadow-lg: 0 24px 60px rgb(29 36 64 / .18);
    --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-hand: "Caveat", "Segoe Print", cursive;
    --ease: cubic-bezier(.2, .8, .2, 1);
    color-scheme: light;
}

[data-theme="noel"] {
    --brand: #d93644;
    --brand-strong: #b82533;
    --brand-soft: #fde8ea;
    --page: #fff6f3;
    --hero-from: #ffd9d3;
    --hero-to: #fff6f3;
    --confetti-1: #ff8f8f;
    --confetti-2: #79c69a;
    --confetti-3: #ffd36b;
}

/* Naissance : rose et bleu mélangés (lilas, pervenche), pour ne favoriser aucun genre. */
[data-theme="naissance"] {
    --brand: #6b74d0;
    --brand-strong: #5059b8;
    --brand-soft: #fbe8f1;
    --page: #faf8fd;
    --hero-from: #ebe6f8;
    --hero-to: #faf8fd;
    --confetti-1: #f7a8c8;
    --confetti-2: #9cc8f2;
    --confetti-3: #ffe08a;
}

/* Mariage : or, ivoire, rose poudré et vert sauge. */
[data-theme="mariage"] {
    --brand: #a5722b;
    --brand-strong: #85591d;
    --brand-soft: #f6ecdc;
    --page: #fcf9f4;
    --hero-from: #f1e4cf;
    --hero-to: #fcf9f4;
    --confetti-1: #f2c9c4;
    --confetti-2: #b9cbb0;
    --confetti-3: #e3c27d;
}

/* Wishlist (neutre) : bleu marine, crème et touches de corail. */
[data-theme="wishlist"] {
    --brand: #2d4f86;
    --brand-strong: #1e3864;
    --brand-soft: #e6edf8;
    --page: #fbf9f5;
    --hero-from: #eee7db;
    --hero-to: #fbf9f5;
    --confetti-1: #f3a0a0;
    --confetti-2: #a9c4ea;
    --confetti-3: #e9c46a;
}

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

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

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

body {
    margin: 0;
    min-height: 100dvh;
    /* Le dégradé de l'en-tête part du haut de la page : pas de raccord sous la barre du haut. */
    /* Haut de page de la couleur de l'en-tête : pas de raccord sous la barre du haut et les amis. */
    background: linear-gradient(var(--hero-from), var(--hero-from)) top / 100% 480px no-repeat, var(--page);
    color: var(--text);
    font: 16px/1.5 var(--font);
    -webkit-font-smoothing: antialiased;
}

body.is-locked {
    overflow: hidden;
}

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

a {
    color: inherit;
}

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

button {
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 55%, white);
    outline-offset: 2px;
}

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex: none;
}

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

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 44px;
    padding: .55em 1.25em;
    border: 0;
    border-radius: 999px;
    background: var(--surface-muted);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s var(--ease), background-color .15s, box-shadow .15s;
}

.btn:hover {
    transform: translateY(-1px);
}

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

.btn--primary {
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 35%, transparent);
}

.btn--primary:hover {
    background: var(--brand-strong);
}

.btn--light {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.btn--soft {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.btn--ghost {
    background: transparent;
}

.btn--ghost:hover {
    background: var(--surface-muted);
}

.btn--danger {
    background: #fdecec;
    color: var(--danger);
}

.btn--sm {
    min-height: 36px;
    padding: .35em 1em;
    font-size: .9rem;
}

.btn--lg {
    min-height: 56px;
    padding: .7em 2em;
    font-size: 1.1rem;
}

.btn[aria-busy="true"],
.round-btn[aria-busy="true"] {
    opacity: .6;
    pointer-events: none;
}

.round-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    font-size: 17px;
    text-decoration: none;
    transition: transform .15s var(--ease), background-color .15s, box-shadow .15s;
}

.round-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.round-btn--sm {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.round-btn--primary {
    border-color: transparent;
    background: var(--brand);
    color: #fff;
}

.round-btn__count,
.badge {
    position: absolute;
    right: -5px;
    bottom: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.badge {
    top: -4px;
    bottom: auto;
    background: var(--heart);
    animation: pop .4s var(--ease);
}

@keyframes pop {
    from { transform: scale(0); }
}

/* ---------- Infobulles (affichées par js/app.js pour les éléments [data-tip]) ---------- */

.tooltip {
    position: fixed;
    z-index: 1000;
    max-width: 220px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgb(20 24 40 / .92);
    color: #fff;
    font: 500 12px/1.4 var(--font);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s;
}

.tooltip.is-visible {
    opacity: 1;
}

/* ---------- Barre du haut ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    pointer-events: none;
}

.topbar > * {
    pointer-events: auto;
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 6px 20px 6px 6px;
    border-radius: 999px;
    background: rgb(255 255 255 / .92);
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    text-decoration: none;
}

.topbar__logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffb347, #ff6f61);
    color: #fff;
    font-size: 19px;
}

.topbar__title {
    overflow: hidden;
    font-size: 1.15rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar .round-btn,
.topbar .btn--light {
    border: 0;
    box-shadow: var(--shadow);
}

.pill-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 6px 0 16px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 35%, transparent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pill-switch input {
    appearance: none;
    position: relative;
    width: 44px;
    height: 28px;
    margin: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / .3);
    cursor: pointer;
    transition: background-color .25s;
}

.pill-switch input::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgb(0 0 0 / .2);
    transition: transform .25s var(--ease);
}

.pill-switch input:checked {
    background: rgb(0 0 0 / .2);
}

.pill-switch input:checked::after {
    transform: translateX(16px);
}

.my-list {
    min-height: 44px;
    color: var(--brand-strong);
}

.bell {
    width: 44px;
    height: 44px;
    color: var(--brand);
    font-size: 19px;
}

.user-menu {
    position: relative;
}

.user-menu summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px 3px 3px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: background-color .15s;
}

.user-menu summary:hover,
.user-menu[open] summary {
    background: var(--brand-soft);
}

.user-menu summary:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
}

.user-menu__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.user-menu__chevron {
    width: 10px;
    height: 10px;
    transform: rotate(90deg);
    transition: transform .15s;
}

.user-menu[open] .user-menu__chevron {
    transform: rotate(270deg);
}

.user-menu summary::-webkit-details-marker {
    display: none;
}

.user-menu__avatar {
    width: 44px;
    height: 44px;
    border: 3px solid #fff;
    border-radius: 50%;
    object-fit: cover;
}

.user-menu__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    min-width: 210px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    animation: rise .2s var(--ease);
}

.user-menu__panel form {
    display: contents;
}

.user-menu__panel a,
.user-menu__panel button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

.user-menu__panel a:hover,
.user-menu__panel button:hover {
    background: var(--surface-muted);
}

.user-menu__panel .icon {
    flex: none;
    width: 1.1em;
    color: var(--brand);
}

/* Sections du menu, séparées par un filet. */
.user-menu__group {
    display: grid;
}

.user-menu__group + .user-menu__group {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

/* Section « petits écrans » (masquée sinon) : son filet est en bas, pour ne pas en laisser un en trop. */
.user-menu__group.user-menu__mobile {
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
}

.user-menu__group.user-menu__mobile + .user-menu__group {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.user-menu__panel .user-menu__minor {
    color: var(--text-muted);
    font-size: 13px;
}

.user-menu__name {
    margin: 2px 10px 4px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ---------- Amis ---------- */

.friends {
    position: fixed;
    z-index: 35;
    top: 92px;
    left: 14px;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    padding: 8px;
    border-radius: 999px;
    background: rgb(255 255 255 / .92);
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    scrollbar-width: none;
}

.friends ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.friends li {
    flex: none;
}

.friends a {
    display: block;
    border-radius: 50%;
}

.friends__avatar {
    flex: none;
    width: 38px;
    height: 38px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    transition: transform .15s var(--ease);
}

.friends a:hover .friends__avatar {
    transform: scale(1.1);
}

/* En contour (outline) et non en ombre : le cadre (.mini-frame, avatar()) reste visible. */
.friends a[aria-current] .friends__avatar {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.friends a[aria-current] .friends__avatar[data-frame] {
    outline-offset: 5px;
}

/* 6 amis au maximum (ordinateur et mobile) ; le bouton « +N » ouvre la fenêtre avec tout le monde. */
.friends li:nth-child(n + 7) {
    display: none;
}

.friends__more {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 14px;
    font-weight: 700;
}

.friends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 16px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.friends-grid a {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.friends-grid a:hover {
    background: var(--surface-muted);
}

.friends-grid__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

/* En contour (outline) et non en ombre : le cadre (.mini-frame, avatar()) reste visible. */
.friends-grid a[aria-current] .friends-grid__avatar {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.friends-grid a[aria-current] .friends-grid__avatar[data-frame] {
    outline-offset: 5px;
}

/* ---------- Notifications ---------- */

.drawer {
    position: fixed;
    z-index: 60;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(380px, 90vw);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .3s var(--ease);
}

.drawer.is-open {
    transform: none;
}

.drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 18px 24px;
    border-bottom: 1px solid var(--line);
}

.drawer__header h2 {
    margin: 0;
    font-size: 1.3rem;
}

.drawer__header button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-muted);
}

.drawer__empty {
    padding: 32px;
    color: var(--text-muted);
    text-align: center;
}

.notifications {
    flex: 1;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.notification a {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0 12px;
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    text-decoration: none;
}

.notification a:hover {
    background: var(--surface-muted);
}

.notification--new a {
    background: var(--brand-soft);
}

.notification__avatar {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.drawer__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
}

.drawer__tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    background: var(--surface-muted);
}

.drawer__tabs button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.drawer__tabs button[aria-selected="true"] {
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.drawer__tabs [data-unread-count] {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--heart);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

.drawer__tools .link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    text-decoration: none;
}

.notification {
    position: relative;
}

.notification a {
    padding-right: 40px;
}

/* Pastille : non lue (pleine) / lue (contour, visible au survol pour remarquer non lue) */
.notification__toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    transform: translateY(-50%);
}

.notification__toggle::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 2px solid var(--line);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .15s, background-color .15s;
}

.notification:hover .notification__toggle::before,
.notification__toggle:focus-visible::before {
    opacity: 1;
}

.notification--new .notification__toggle::before {
    border-color: var(--brand);
    background: var(--brand);
    opacity: 1;
}

.notifications__more {
    display: flex;
    justify-content: center;
    padding: 12px 0 16px;
}

.notification__date {
    color: var(--text-muted);
    font-size: 12px;
}

/* ---------- En-tête ---------- */

.hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(0, 620px) 1fr;
    align-items: center;
    margin-top: -72px;
    padding: 96px 24px 120px;
    background:
        radial-gradient(circle at 12% 30%, var(--confetti-1) 0 5px, transparent 6px),
        radial-gradient(circle at 88% 22%, var(--confetti-2) 0 6px, transparent 7px),
        radial-gradient(circle at 22% 82%, var(--confetti-3) 0 5px, transparent 6px),
        radial-gradient(circle at 76% 76%, var(--confetti-1) 0 4px, transparent 5px),
        radial-gradient(circle at 35% 18%, var(--confetti-3) 0 4px, transparent 5px),
        radial-gradient(circle at 64% 12%, var(--confetti-1) 0 5px, transparent 6px),
        linear-gradient(180deg, var(--hero-from), color-mix(in srgb, var(--hero-from) 70%, var(--page)));
}

.hero__center {
    position: relative;
    z-index: 1;
    grid-column: 2;
    display: grid;
    gap: 24px;
}

.hero__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.profile {
    display: grid;
    justify-items: center;
    flex: none;
}

.profile__avatar {
    position: relative;
    z-index: 1;
}

.profile__avatar > img {
    width: 132px;
    height: 132px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    box-shadow: var(--shadow);
}

/* Pastille « modifier » en haut à droite, posée sur le bord du cercle (loin du prénom). */
.profile__action {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    border: 3px solid #fff;
    box-shadow: var(--shadow);
}

.profile__name {
    position: relative;
    margin: -14px 0 0;
    padding: 18px 20px 0;
    border-radius: 16px 16px 0 0;
    background: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.profile__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0 20px 8px;
    border-radius: 0 0 16px 16px;
    background: #fff;
    color: var(--text-muted);
    font-size: 13px;
    box-shadow: 0 8px 16px rgb(29 36 64 / .06);
}

.profile__meta .icon {
    color: #f5a524;
}

.hero__titles {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-width: 0;
    text-align: center;
}

.hero__title {
    margin: 0;
}

.hero__title img {
    width: min(420px, 100%);
    height: auto;
    margin-inline: auto;
    filter: drop-shadow(0 8px 16px rgb(0 0 0 / .08));
}

.hero__subtitle {
    max-width: 380px;
    margin: 0;
    color: #3d4560;
    font-weight: 500;
}

/* Choix du thème : pastilles, chacune avec la couleur de son thème. */
.theme-picker {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgb(255 255 255 / .75);
    box-shadow: var(--shadow-sm);
}

.theme-picker__option {
    --dot: #2f7cf6;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 14px 0 10px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    transition: background-color .2s, color .2s;
}

.theme-picker__option::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--dot);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--dot) 40%, transparent);
}

.theme-picker__option--noel { --dot: #d93644; }
.theme-picker__option--naissance { --dot: #8f8ad8; }
.theme-picker__option--naissance::before { background: linear-gradient(135deg, #f7a8c8 50%, #9cc8f2 50%); }
.theme-picker__option--birthday { --dot: #f5a524; }
.theme-picker__option--mariage { --dot: #c19a5b; }
.theme-picker__option--wishlist { --dot: #2d4f86; }

.theme-picker__option:hover {
    background: rgb(255 255 255 / .9);
    color: var(--text);
}

.theme-picker__option[aria-pressed="true"] {
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    cursor: default;
}

/* Choix du type de liste dans les formulaires (partials/theme_field.php). */
.theme-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.theme-field legend {
    margin-bottom: 6px;
    padding: 0;
}

.theme-field__options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 520px) {
    .theme-field__options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.theme-field__option {
    --ring: #f5a524;
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 12px 6px 10px;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px rgb(29 36 64 / .06);
    font-size: 13px;
    cursor: pointer;
    transition: transform .2s var(--ease), box-shadow .15s;
}

.theme-field__option--birthday {
    background: linear-gradient(160deg, #fff1cf, #ffe2a8);
}

.theme-field__option--noel {
    --ring: #d93644;
    background: linear-gradient(160deg, #ffe8e4, #ffd2cb);
}

.theme-field__option--naissance {
    --ring: #6b74d0;
    background: linear-gradient(120deg, #fde4ef, #e4e2f7 50%, #d8eafb);
}

.theme-field__option--mariage {
    --ring: #a5722b;
    background: linear-gradient(160deg, #fbf5ea, #f0e2c9);
}

.theme-field__option--wishlist {
    --ring: #2d4f86;
    background: linear-gradient(160deg, #f8f4ec, #e5ebf5);
}

.theme-field__option:hover {
    transform: translateY(-2px);
}

.theme-field__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-field__option img {
    width: 100%;
    height: 48px;
    object-fit: contain;
    filter: saturate(.6);
    opacity: .7;
    transition: filter .15s, opacity .15s, transform .2s var(--ease);
}

.theme-field__option:has(input:checked) {
    box-shadow: inset 0 0 0 2px var(--ring), 0 6px 16px -6px var(--ring);
}

.theme-field__option:has(input:checked) img {
    filter: none;
    opacity: 1;
    transform: scale(1.08);
}

/* Coche sur la carte choisie. */
.theme-field__option:has(input:checked)::after {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ring);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.theme-field__option:has(input:focus-visible) {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.hero__deco {
    position: relative;
    align-self: stretch;
    min-height: 280px;
    pointer-events: none;
}

.deco {
    position: absolute;
    height: auto;
    filter: drop-shadow(0 10px 18px rgb(0 0 0 / .10));
    animation: float 6s ease-in-out infinite;
}

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

.deco:nth-child(3) {
    animation-delay: -4s;
}

@keyframes float {
    50% { translate: 0 -8px; }
}

/* Positions des décorations, par thème (colonnes de part et d'autre du titre, 280 px de haut au moins) */
[data-theme="birthday"] .deco--gifts { width: 250px; left: 0; bottom: 0; }
[data-theme="birthday"] .deco--star { width: 46px; left: 200px; top: 20px; }
[data-theme="birthday"] .deco--balloons { width: 150px; right: 30px; top: -20px; }
[data-theme="birthday"] .deco--bunting { width: 230px; right: 0; bottom: 0; }

[data-theme="noel"] .deco--ornament { width: 80px; left: 30px; top: 0; }
[data-theme="noel"] .deco--candy { width: 150px; left: 0; bottom: 0; }
[data-theme="noel"] .deco--star { width: 44px; left: 160px; top: 90px; }
[data-theme="noel"] .deco--gifts { width: 280px; right: 0; bottom: 0; }
[data-theme="noel"] .deco--gingerbread { width: 90px; right: 200px; top: 0; rotate: -8deg; }
[data-theme="noel"] .deco--snowflake { width: 44px; right: 40px; top: 30px; }

[data-theme="naissance"] .deco--mobile { width: 130px; left: 20px; top: -20px; }
[data-theme="naissance"] .deco--bottle { width: 64px; left: 170px; bottom: 10px; rotate: -10deg; }
[data-theme="naissance"] .deco--heart { width: 40px; left: 190px; top: 40px; }
[data-theme="naissance"] .deco--teddy { width: 150px; right: 10px; bottom: 0; }
[data-theme="naissance"] .deco--rattle { width: 90px; right: 190px; bottom: 20px; rotate: 10deg; }
[data-theme="naissance"] .deco--pacifier { width: 70px; right: 60px; top: 0; }

[data-theme="mariage"] .deco--bouquet { width: 230px; left: 0; bottom: 0; }
[data-theme="mariage"] .deco--hearts { width: 110px; left: 170px; top: 0; }
[data-theme="mariage"] .deco--balloons { width: 140px; right: 10px; top: -30px; }
[data-theme="mariage"] .deco--dove { width: 120px; right: 170px; top: 50px; }
[data-theme="wishlist"] .deco--gifts { width: 280px; left: 0; bottom: 0; }
[data-theme="wishlist"] .deco--heart { width: 80px; left: 40px; top: 0; rotate: -10deg; }
[data-theme="wishlist"] .deco--leaf { width: 80px; left: 200px; top: 50px; }
[data-theme="wishlist"] .deco--bag { width: 140px; right: 20px; bottom: 0; }
[data-theme="wishlist"] .deco--tag { width: 120px; right: 170px; top: 20px; rotate: -6deg; }
[data-theme="wishlist"] .deco--star { width: 54px; right: 50px; top: 0; }

[data-theme="mariage"] .deco--glasses { width: 170px; right: 120px; bottom: 0; }

/* ---------- Vagues (séparateurs, templates/partials/waves.php) ---------- */

.waves {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
}

/* Sous l'en-tête : bord ondulé doux qui passe de la teinte de l'en-tête au fond de page. */
.waves--hero {
    bottom: -1px;
    height: 70px;
}

.waves--hero .waves__a1 { stop-color: color-mix(in srgb, var(--page) 45%, var(--hero-from)); }
.waves--hero .waves__a2 { stop-color: color-mix(in srgb, var(--page) 30%, var(--hero-from)); }
.waves--hero .waves__b1 { stop-color: color-mix(in srgb, var(--page) 75%, var(--hero-from)); }
.waves--hero .waves__b2 { stop-color: color-mix(in srgb, var(--page) 60%, var(--hero-from)); }
.waves--hero .waves__c1,
.waves--hero .waves__c2 { stop-color: var(--page); }

/* Au-dessus du pied de page : grandes ondulations de plus en plus soutenues. */
.waves--footer {
    bottom: calc(100% - 1px);
    height: 130px;
    transform: scaleX(-1);
}

.waves--footer .waves__a1 { stop-color: color-mix(in srgb, var(--hero-from) 30%, var(--page)); }
.waves--footer .waves__a2 { stop-color: color-mix(in srgb, var(--hero-from) 50%, var(--page)); }
.waves--footer .waves__b1 { stop-color: color-mix(in srgb, var(--hero-from) 70%, var(--page)); }
.waves--footer .waves__b2 { stop-color: color-mix(in srgb, var(--hero-from) 55%, var(--page)); }
.waves--footer .waves__c1,
.waves--footer .waves__c2 { stop-color: var(--hero-from); }

/* ---------- Partage ---------- */

.share {
    display: grid;
    gap: 10px;
    padding: 16px 20px;
    border-radius: var(--radius);
    background: rgb(255 255 255 / .85);
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
}

.share__label {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.share__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.share__link {
    display: flex;
    align-items: center;
    flex: 1 1 260px;
    gap: 6px;
    min-width: 0;
    padding: 4px 4px 4px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
}

.share__link input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    outline: 0;
}

.share__buttons {
    display: flex;
    gap: 8px;
}

.share__buttons .round-btn {
    border: 0;
}

.share__buttons .share--whatsapp {
    background: #25d366;
    color: #fff;
}

.share__buttons .share--facebook {
    background: #1877f2;
    color: #fff;
}

.share__buttons .share--x {
    background: #111;
    color: #fff;
}

/* ---------- Onglets ---------- */

.tabs {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 4px;
    width: fit-content;
    max-width: calc(100% - 32px);
    margin: -46px auto 32px;
    padding: 6px;
    overflow-x: auto;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow);
    scrollbar-width: none;
}

.tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    min-height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}

.tabs__tab .icon {
    color: var(--text-muted);
}

.tabs__tab span {
    color: var(--text-muted);
    font-weight: 500;
}

.tabs__tab:hover {
    background: var(--surface-muted);
}

.tabs__tab[aria-pressed="true"] {
    background: var(--brand);
    color: #fff;
}

.tabs__tab[aria-pressed="true"] .icon,
.tabs__tab[aria-pressed="true"] span {
    color: #fff;
}

.tabs__tab--heart .icon {
    color: var(--heart);
}

/* ---------- Grille et vignettes ---------- */

.page {
    min-height: 40vh;
}



.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 24px;
    width: min(1200px, 100% - 32px);
    margin: 0 auto;
}

/* Masonry (calculé par js/app.js) : chaque vignette occupe autant de rangées de 4 px que sa hauteur. */
.grid.is-masonry {
    grid-auto-rows: 4px;
    row-gap: 0;
    align-items: start;
}

.grid.is-masonry > * {
    margin-bottom: 24px;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform .25s var(--ease), box-shadow .25s;
    animation: rise .5s var(--ease) both;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card.is-highlighted {
    animation: highlight 1.6s var(--ease);
}

@keyframes highlight {
    0%, 40% {
        box-shadow: 0 0 0 4px var(--brand), var(--shadow-lg);
    }
}

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

.card__media {
    position: relative;
}

.card__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 14px;
    border: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #fff, var(--surface-muted));
    cursor: zoom-in;
}

.card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .4s var(--ease);
}

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

.card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent);
    pointer-events: none;
}

.card__badge.card__badge--gifted {
    background: var(--success);
    box-shadow: 0 4px 12px rgb(31 157 85 / .3);
}

.show-gifted .card--gifted .card__badge:not(.card__badge--gifted):not(.card__badge--received) {
    display: none;
}

.card__favorite {
    position: absolute;
    top: 10px;
    right: 10px;
}

.heart-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--text);
    font-size: 18px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease);
}

button.heart-btn:hover {
    transform: scale(1.1);
}

.heart-btn .heart-btn__on {
    display: none;
    color: var(--heart);
}

.heart-btn[aria-pressed="true"] .heart-btn__on {
    display: block;
    animation: pop .35s var(--ease);
}

.heart-btn[aria-pressed="true"] .heart-btn__off {
    display: none;
}

.card__body {
    flex: 1;
    padding: 14px 6px 4px;
}

.card__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.card__text {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 12px 4px 2px;
    border-top: 1px solid var(--line);
}

.card__cta {
    margin-left: auto;
}

.card--add {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-height: 360px;
    border: 2px dashed color-mix(in srgb, var(--brand) 35%, transparent);
    background: rgb(255 255 255 / .55);
    box-shadow: none;
    color: var(--text-muted);
    font-size: 14px;
    animation: none;
}

.card--add strong {
    color: var(--text);
    font-size: 1.15rem;
}

.card--add__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 28px;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 35%, transparent);
    transition: transform .3s var(--ease);
}

.card--add:hover {
    border-color: var(--brand);
    background: #fff;
}

.card--add:hover .card--add__icon {
    transform: rotate(90deg) scale(1.05);
}

/* Infos de don : masquées tant que « Voir les idées offertes » est désactivé */
.gift-slot,
.gift-only {
    display: none !important;
}

.show-gifted .gift-slot {
    display: block !important;
}

.show-gifted .gift-only {
    display: inline-flex !important;
}

.show-gifted .card:not(.card--gifted) .card__badge--gifted {
    display: none !important;
}

.gift-btn .gift-btn__chevron {
    font-size: 12px;
}

.gifted-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    max-width: 190px;
    padding: 0 16px 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--success-soft);
    color: #157a42;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gifted-pill .icon {
    color: var(--success);
    font-size: 18px;
}

.gifted-pill--mine {
    cursor: pointer;
}

.gifted-pill--mine:hover {
    background: #d2efdc;
}

/* ---------- Réactions ---------- */

.reactions {
    position: relative;
    display: flex;
    align-items: center;
}

.reactions__summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 4px;
}

.reactions__icons {
    display: flex;
}

.reactions__icons img {
    width: 26px;
    height: 26px;
    margin-left: -6px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
}

.reactions__icons img:first-child {
    margin-left: 0;
}

.reactions__total {
    font-size: 14px;
    font-weight: 600;
}

/* Aucune réaction : même cercle que les boutons commentaire et panier. */
.reactions__summary--empty {
    justify-content: center;
    width: 42px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    font-size: 17px;
}

.reactions__picker {
    position: relative;
}

.reactions__toggle {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    transition: transform .15s var(--ease);
}

.reactions__toggle:hover {
    transform: translateY(-2px);
}

.reactions__toggle.is-mine .reactions__total {
    color: var(--brand-strong);
}

.reactions__choices {
    position: absolute;
    z-index: 20;
    bottom: calc(100% + 10px);
    left: 50%;
    display: flex;
    gap: 4px;
    width: max-content;
    padding: 8px 10px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px) scale(.9);
    transform-origin: bottom center;
    transition: opacity .15s, transform .2s var(--ease), visibility .2s;
}

.reactions__picker.is-open .reactions__choices {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (hover: hover) {
    .reactions__picker:hover .reactions__choices,
    .reactions__picker:focus-within .reactions__choices {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
}

.reactions__choices button {
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    transition: transform .15s var(--ease);
}

.reactions__choices button:hover,
.reactions__choices button[aria-pressed="true"] {
    transform: scale(1.25) translateY(-3px);
}

.reactions__choices img {
    width: 38px;
    height: 38px;
}

/* Fiche de l'idée : un petit bouton (sa réaction ou l'icône vide), les six choix au clic, la liste à côté. */
.detail__react {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.detail__react:not(:has(.reactions, .reactors__row)) {
    display: none;
}

.reactions--compact .reactions__summary {
    width: 38px;
    height: 38px;
}

.reactions--compact .reactions__summary--mine {
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
}

.reactions--compact .reactions__summary--empty {
    color: var(--text-muted);
    font-size: 16px;
}

.reactions--compact .reactions__choices {
    left: 0;
    transform: translate(0, 8px) scale(.9);
    transform-origin: bottom left;
}

.reactions--compact .reactions__picker.is-open .reactions__choices {
    transform: none;
}

@media (hover: hover) {
    .reactions--compact .reactions__picker:hover .reactions__choices,
    .reactions--compact .reactions__picker:focus-within .reactions__choices {
        transform: none;
    }
}

.detail__react .reactors {
    flex: 1;
    min-width: 0;
}

.detail__react .reactors__type,
.detail__react .reactors__avatar {
    width: 28px;
    height: 28px;
}

.reactors {
    display: grid;
    gap: 8px;
}

.reactors:empty {
    display: none;
}

.reactors__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.reactors__type {
    width: 34px;
    height: 34px;
    margin-right: 6px;
}

.reactors__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

/* ---------- Fenêtres (dialog) ---------- */

.modal {
    width: min(620px, 100% - 24px);
    max-height: calc(100dvh - 24px);
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

.modal[open] {
    display: flex;
    flex-direction: column;
    animation: modal-in .25s var(--ease);
}

.modal > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal::backdrop {
    background: rgb(20 24 40 / .5);
    backdrop-filter: blur(4px);
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.97);
    }
}

.modal__header {
    position: relative;
    flex: none;
    padding: 24px 64px 8px 28px;
}

.modal__header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-muted);
    font-size: 16px;
}

.modal__close:hover {
    background: var(--line);
}

.modal__body {
    flex: 1 1 auto;
    display: grid;
    gap: 18px;
    padding: 16px 28px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal__footer {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 28px 22px;
    border-top: 1px solid var(--line);
}

.modal__footer .gift-slot {
    order: 2;
}

.modal__spacer {
    flex: 1;
}

/* Suppression du compte, repliée en bas de « Mon profil ». */
.danger-zone {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.danger-zone summary {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    color: var(--danger);
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    list-style: none;
}

.danger-zone summary::-webkit-details-marker {
    display: none;
}

.danger-zone__body {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.danger-zone p {
    margin: 0;
    color: var(--text-muted);
    font-size: .9rem;
}

.danger-zone .btn {
    justify-self: start;
}

@media (max-width: 600px) {
    .modal {
        width: 100%;
        max-width: none;
        max-height: 94dvh;
        margin: auto 0 0;
        border-radius: 28px 28px 0 0;
    }

    @keyframes modal-in {
        from {
            transform: translateY(100%);
        }
    }

    .modal__header {
        padding: 20px 60px 6px 20px;
    }

    .modal__body {
        padding: 12px 20px 20px;
    }

    .modal__footer {
        padding: 14px 20px 20px;
    }
}

.detail__media {
    padding: 16px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #fff, var(--surface-muted));
}

.detail__image {
    width: 100%;
    max-height: 46dvh;
    object-fit: contain;
}

.detail__text a,
.comment__text a {
    color: var(--brand-strong);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.detail__text {
    margin: 0;
    color: #3d4560;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* ---------- Formulaires ---------- */

.form {
    gap: 16px;
}

.field {
    display: grid;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    font-weight: 400;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.field input[type="file"] {
    padding: 8px;
}

.field input:focus,
.field textarea:focus {
    border-color: var(--brand);
    outline: 0;
    background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}

.field textarea {
    resize: vertical;
}

[data-autosize] {
    field-sizing: content;
    min-height: 46px;
    max-height: 40dvh;
}

.field__status {
    min-height: 1.2em;
    color: var(--text-muted);
    font-weight: 400;
}

.field__status.is-loading::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -1px;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.field-group {
    display: grid;
    gap: 8px;
}

.field-group__or {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

@media (min-width: 600px) {
    .field-group {
        grid-template-columns: 1fr auto 1fr;
        align-items: end;
        gap: 12px;
    }

    .field-group__or {
        padding-bottom: 12px;
    }
}

.image-preview {
    max-height: 180px;
    margin: 0 auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

/* ---------- Commentaires ---------- */

.comments h3 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.comments__list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.comments__list:empty::before {
    content: "Aucun commentaire pour l'instant.";
    color: var(--text-muted);
    font-size: 14px;
}

.comment {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: rise .3s var(--ease);
}

.comment__avatar {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

/* Bulle et bouton « Réagir » sur une ligne, réactions en dessous. */
.comment__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    max-width: calc(100% - 48px);
}

.comment__row {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.comment__bubble {
    position: relative;
    min-width: 0;
    padding: 10px 16px;
    border-radius: 4px 18px 18px 18px;
    background: var(--surface-muted);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.comment__author {
    display: block;
    font-size: 13px;
}

/* Image ou GIF envoyé en commentaire, comme dans une messagerie. */
.comment__image {
    display: block;
    margin: 6px 0 4px;
}

.comment__image img {
    display: block;
    max-width: min(240px, 100%);
    max-height: 260px;
    border-radius: 12px;
    background: var(--line);
}

.comment__date {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: right;
}

.comment__bubble:has(.comment__delete) .comment__date {
    padding-right: 16px;
}

.comment__image {
    cursor: zoom-in;
}

.comment__react {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text-muted);
    font-size: 20px;
    opacity: 0;
    transition: opacity .15s, color .15s, transform .15s var(--ease);
}

.comment:hover .comment__react,
.comment__react:focus-visible,
.comment__react[aria-expanded="true"] {
    opacity: 1;
}

.comment__react:hover,
.comment__react[aria-expanded="true"] {
    color: var(--text);
    transform: scale(1.08);
}

/* Écrans tactiles : pas de survol. Bouton discret, et appui long sur la bulle comme dans WhatsApp. */
@media (hover: none) {
    .comment__react {
        opacity: .7;
    }

    .comment__row {
        -webkit-touch-callout: none;
        user-select: none;
    }
}

/* Barre de réactions rapide, et sélecteur complet au-dessus (popover : par-dessus la fiche). */
.reaction-pop {
    position: fixed;
    inset: auto;
    width: min(360px, 100vw - 16px);
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: var(--text);
}

.reaction-pop:popover-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.reaction-pop--below:popover-open {
    flex-direction: column-reverse;
}

.reaction-pop__bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    animation: pop-in .18s var(--ease);
}

.reaction-pop__quick {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    transition: transform .15s var(--ease), background .15s;
}

.reaction-pop__quick:hover {
    transform: scale(1.2);
}

.reaction-pop__quick[aria-pressed="true"] {
    background: var(--surface-muted);
}

.reaction-pop__more {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-muted);
    color: var(--text);
    font-size: 16px;
}

.reaction-pop__more[aria-expanded="true"] {
    background: var(--line);
}

.reaction-pop__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: min(400px, 55vh);
    overflow: hidden;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    animation: pop-in .18s var(--ease);
}

.reaction-pop__panel[hidden] {
    display: none;
}

.emoji-tabs {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px 0;
}

.emoji-tabs__tab {
    position: relative;
    display: grid;
    flex: 1;
    place-items: center;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 21px;
}

.emoji-tabs__tab::after {
    position: absolute;
    right: 25%;
    bottom: 0;
    left: 25%;
    height: 3px;
    border-radius: 3px;
    content: "";
}

.emoji-tabs__tab.is-active {
    color: var(--text);
}

.emoji-tabs__tab.is-active::after {
    background: var(--brand);
}

.emoji-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 12px 6px;
    padding: 0 14px;
    border: 2px solid var(--line);
    border-radius: 999px;
    color: var(--text-muted);
}

.emoji-search:focus-within {
    border-color: var(--brand);
}

.emoji-search input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    outline: 0;
}

.emoji-scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 8px 8px;
}

.emoji-section[hidden] {
    display: none;
}

.emoji-section h4 {
    margin: 10px 6px 4px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
}

.emoji-grid__item {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 26px;
    line-height: 1;
}

.emoji-grid__item:hover,
.emoji-grid__item:focus-visible {
    background: var(--surface-muted);
}

.emoji-empty {
    margin: 12px 6px;
    color: var(--text-muted);
    font-size: 14px;
}

@keyframes pop-in {
    from {
        opacity: 0;
        transform: scale(.92);
    }
}

/* Réactions posées : pastille accrochée sous la bulle, comme dans une messagerie. */
.comment-reactions:empty {
    display: none;
}

.comment-reactions {
    position: relative;
    z-index: 1;
    margin: -10px 0 0 12px;
}

.comment-reactions__summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 32px;
    height: 32px;
    padding: 0 7px;
    border: 0;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: 18px;
    line-height: 1;
}

.comment-reactions__summary.is-mine {
    background: var(--surface-muted);
}

.comment-reactions__total {
    margin-left: 3px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.comment-reactions__list {
    display: grid;
    gap: 6px;
    min-width: 200px;
    margin: 6px 0 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    list-style: none;
    font-size: 14px;
}

.comment-reactions__list[hidden] {
    display: none;
}

.comment-reactions__list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-reactions__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-reactions__name {
    flex: 1;
}

.comment-reactions__remove {
    padding: 2px 8px;
    border: 0;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--danger);
    font-size: 12px;
}

.comment-reactions__list .comment-reactions__emoji {
    font-size: 18px;
}

/* Visionneuse d'images des commentaires, par-dessus la fenêtre de l'idée. */
.viewer {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.viewer[open] {
    display: grid;
    place-items: center;
}

.viewer::backdrop {
    background: rgb(0 0 0 / .85);
}

.viewer__image {
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 96px);
    border-radius: 8px;
    cursor: zoom-out;
    animation: rise .2s var(--ease);
}

.viewer__close {
    position: fixed;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / .15);
    color: #fff;
    font-size: 18px;
}

.comment__delete {
    position: absolute;
    right: -6px;
    bottom: -8px;
}

.comment__delete button {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--danger);
    font-size: 11px;
    box-shadow: var(--shadow-sm);
}

.comment-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.comment-form textarea {
    flex: 1;
    width: 100%;
    min-height: 46px;
    padding: 11px 18px;
    border: 1px solid var(--line);
    border-radius: 23px;
    background: var(--surface-muted);
    resize: none;
}

/* Champ éditable (accepte les GIF du clavier du téléphone), même allure que la zone de texte. */
.comment-form__input {
    flex: 1;
    width: 100%;
    min-height: 46px;
    max-height: 160px;
    overflow-y: auto;
    padding: 11px 48px 11px 18px;
    border: 1px solid var(--line);
    border-radius: 23px;
    background: var(--surface-muted);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    cursor: text;
}

.comment-form__input:empty::before {
    display: block;
    overflow: hidden;
    color: var(--text-muted);
    content: attr(data-placeholder);
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment-form__input:focus {
    border-color: var(--brand);
    outline: 0;
    background: #fff;
}

.comment-form__input img {
    display: none;
}

.comment-form--drop .comment-form__input {
    border-color: var(--brand);
    border-style: dashed;
}

.comment-form textarea:focus {
    border-color: var(--brand);
    outline: 0;
    background: #fff;
}

/* Champ du commentaire : aperçu de l'image au-dessus, bouton image dans la bulle (à droite). */
.comment-form__field {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.comment-form[data-comment-images] textarea {
    padding-right: 48px;
}

/* Bouton « GIF » (recherche GIPHY), à gauche du bouton image dans le champ. */
.comment-form--gif .comment-form__input {
    padding-right: 90px;
}

.comment-form__gif {
    position: absolute;
    right: 44px;
    bottom: 11px;
    height: 24px;
    padding: 0 6px;
    border: 1.5px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1;
    cursor: pointer;
    transition: color .15s;
}

.comment-form__gif:hover,
.comment-form__gif[aria-expanded="true"] {
    color: var(--brand);
}

/* Panneau de recherche de GIF (popover, par-dessus la fiche). */
.gif-pop {
    position: fixed;
    inset: auto;
    width: min(440px, 100vw - 16px);
    height: min(440px, 60vh);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}

.gif-pop:popover-open {
    display: flex;
    flex-direction: column;
    animation: pop-in .18s var(--ease);
}

.gif-pop__scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 10px 10px;
}

.gif-pop__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
}

.gif-pop__item {
    height: 110px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: var(--surface-muted);
    cursor: pointer;
}

.gif-pop__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s var(--ease);
}

.gif-pop__item:hover img {
    transform: scale(1.05);
}

.gif-pop__item[aria-busy="true"] {
    opacity: .5;
}

.gif-pop__status {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

.gif-pop__status:empty {
    display: none;
}

.gif-pop__credit {
    margin: 0;
    padding: 6px 12px 10px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: right;
}

.comment-form__attach {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s, background .15s;
}

.comment-form__attach:hover,
.comment-form__attach:focus-within {
    background: var(--line);
    color: var(--brand);
}

.comment-form__attach input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.comment-form__preview {
    position: relative;
    align-self: flex-start;
}

.comment-form__preview[hidden] {
    display: none;
}

.comment-form__preview img {
    display: block;
    max-width: 160px;
    max-height: 120px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.comment-form__preview button {
    position: absolute;
    top: -8px;
    right: -8px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--danger);
    font-size: 11px;
    box-shadow: var(--shadow-sm);
}

.comment-form--drop textarea {
    border-color: var(--brand);
    border-style: dashed;
}

.comment-form .icon-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
}

.hint {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 18px;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    color: var(--text-muted);
    text-align: center;
}

.hint p {
    margin: 0;
}

/* ---------- Pied de page ---------- */

.empty {
    margin: 0 auto 40px;
    color: var(--text-muted);
    font-size: 1.1rem;
    text-align: center;
}

.cta {
    display: flex;
    justify-content: center;
    margin: 32px 0 0;
}

.footer {
    position: relative;
    margin-top: 170px;
    padding: 0 16px 56px;
    background: var(--hero-from);
}

.footer__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(760px, 100%);
    margin: 0 auto;
    padding-top: 8px;
}

.footer__deco {
    position: relative;
    z-index: 1;
    flex: none;
    width: 190px;
    max-height: 180px;
    margin-right: -40px;
    object-fit: contain;
    animation: float 6s ease-in-out infinite;
}

/* Petit mot du propriétaire : carte postale scotchée, papier ligné, écriture manuscrite. */
.note {
    position: relative;
    max-width: 440px;
    margin: 0;
    padding: 34px 36px 22px 56px;
    border-radius: 4px 4px 22px 4px;
    background:
        repeating-linear-gradient(transparent 0 33px, color-mix(in srgb, var(--brand) 14%, transparent) 33px 34px) 0 30px / 100% calc(100% - 64px) no-repeat,
        #fffdf8;
    box-shadow: 0 1px 1px rgb(0 0 0 / .04), 0 18px 40px rgb(29 36 64 / .14);
    rotate: -2deg;
    transition: rotate .3s var(--ease);
}

.note:hover {
    rotate: 0deg;
}

/* Marge rouge du cahier */
.note::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 38px;
    width: 2px;
    background: color-mix(in srgb, var(--heart) 30%, transparent);
}

/* Bande de scotch */
.note::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    width: 120px;
    height: 30px;
    background: color-mix(in srgb, var(--brand) 22%, rgb(255 255 255 / .55));
    box-shadow: 0 1px 3px rgb(0 0 0 / .08);
    transform: translateX(-50%) rotate(-4deg);
}

.note__text {
    margin: 0;
    color: #2b3150;
    font: 600 1.65rem/34px var(--font-hand);
    overflow-wrap: anywhere;
}

.note__text a {
    color: var(--brand-strong);
}

.note__signature {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    color: var(--brand-strong);
    font: 700 1.4rem/1 var(--font-hand);
}

.note__signature::before {
    content: "—";
}

.note__avatar {
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}

.note__edit {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 0;
    box-shadow: var(--shadow-sm);
}

@media (max-width: 700px) {
    .footer__inner {
        flex-direction: column;
    }

    .footer__deco {
        width: 150px;
        margin: 0 0 -24px;
    }

    .note {
        padding: 30px 24px 20px 48px;
    }

    .note::after {
        left: 32px;
    }

    .note__text {
        font-size: 1.45rem;
    }
}

/* ---------- Messages ---------- */

.toasts {
    position: fixed;
    z-index: 100;
    left: 50%;
    bottom: 24px;
    display: grid;
    gap: 8px;
    width: min(420px, 100% - 32px);
    transform: translateX(-50%);
    pointer-events: none;
}

.toast {
    padding: 14px 20px;
    border-radius: 16px;
    background: var(--text);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toast-in .35s var(--ease);
}

.toast--error {
    background: var(--danger);
}

.toast--success {
    background: var(--success);
}

.toast.is-leaving {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s, transform .3s;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
    .hero__deco {
        scale: .75;
    }

    .hero__deco--left {
        transform-origin: left center;
    }

    .hero__deco--right {
        transform-origin: right center;
    }
}

@media (max-width: 960px) {
    .hero {
        grid-template-columns: 1fr;
        padding-top: 88px;
    }

    .hero__center {
        grid-column: 1;
        width: min(620px, 100%);
        margin: 0 auto;
    }

    .hero__deco {
        display: none;
    }

}

@media (max-width: 700px) {
    .topbar {
        padding: 10px 12px;
    }

    .topbar__brand {
        padding-right: 14px;
    }

    .topbar__title {
        font-size: 1rem;
    }

    .pill-switch {
        padding-left: 12px;
    }

    .pill-switch__label {
        display: none;
    }

    .hero {
        padding: 72px 16px 100px;
    }

    .tabs__tab {
        padding: 0 14px;
    }
}

@media (max-width: 480px) {
    /* Le titre est déjà affiché en grand dans l'en-tête : la barre ne garde que le logo. */
    body:has(.hero) .topbar__title {
        display: none;
    }

    body:has(.hero) .topbar__brand {
        padding: 6px;
    }
}

@media (max-width: 420px) {
    body:not(:has(.hero)) .topbar__brand {
        flex: 1;
    }

    .topbar .btn__label {
        display: none;
    }

    .topbar .btn--light {
        width: 44px;
        padding: 0;
    }

    .card__actions {
        flex-wrap: wrap;
    }
}

/* ---------- Page d'accueil (visiteur sans liste) ---------- */

[data-theme="home"] {
    --brand: #f25f4c;
    --brand-strong: #d94a38;
    --brand-soft: #feece9;
    --page: #fffaf4;
    --hero-from: #ffeedd;
    --hero-to: #fffaf4;
}

/* Fond de l'accueil : dégradé progressif, sans la coupure nette des listes. */
body[data-theme="home"] {
    background:
        radial-gradient(circle at 85% 8%, #ffe3d0 0, transparent 420px),
        radial-gradient(circle at 5% 30%, #fff1c9 0, transparent 380px),
        linear-gradient(var(--hero-from), var(--page) 760px) top / 100% 760px no-repeat,
        var(--page);
}

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 48px;
    width: min(1180px, 100% - 32px);
    margin: 0 auto;
    padding: 40px 0 72px;
}

.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--brand-strong);
    font-size: 14px;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.home-eyebrow .gem {
    width: 18px;
    height: 18px;
}

.home-hero__text h1 {
    margin: 0 0 18px;
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.home-hero__text h1 em {
    font-style: normal;
    color: var(--brand);
    background: linear-gradient(transparent 68%, rgb(255 211 107 / .6) 68% 92%, transparent 92%);
}

.home-hero__lead {
    max-width: 500px;
    margin: 0 0 28px;
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1.55;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.home-hero__alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--brand-strong);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.home-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 24px 0 0;
    padding: 0;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    list-style: none;
}

.home-checks li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.home-checks .icon {
    color: var(--success);
}

/* Visuel : un téléphone et des pastilles qui flottent autour. */
.home-hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    padding: 12px 0;
}

.home-phone {
    width: 270px;
    overflow: hidden;
    border: 8px solid #1d2440;
    border-radius: 42px;
    background: #1d2440;
    box-shadow: var(--shadow-lg);
    transform: rotate(3deg);
}

.home-phone img {
    display: block;
    width: 100%;
    height: 520px;
    border-radius: 34px;
    object-fit: cover;
    object-position: top;
}

.home-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 10px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    font-size: 14px;
    line-height: 1.25;
    animation: home-float 5s ease-in-out infinite;
}

.home-float > span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-soft);
    font-size: 22px;
}

.home-float div {
    display: grid;
}

.home-float small {
    color: var(--text-muted);
    font-size: 12px;
}

.home-float small .gem {
    width: 13px;
    height: 13px;
    vertical-align: -2px;
}

.home-float--gift {
    top: 16%;
    left: 0;
}

.home-float--badge {
    right: 0;
    bottom: 24%;
    animation-delay: -2s;
}

.home-float--badge > span {
    background: #fff3d6;
}

.home-float--heart {
    bottom: 6%;
    left: 10%;
    padding: 8px 14px;
    color: var(--heart);
    font-weight: 700;
    animation-delay: -3.5s;
}

@keyframes home-float {
    50% { transform: translateY(-8px); }
}

/* Sections */
.home-section {
    width: min(1180px, 100% - 32px);
    margin: 0 auto 80px;
}

.home-title {
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-align: center;
}

.home-subtitle {
    max-width: 620px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 1.05rem;
    text-align: center;
}

.home-steps__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.home-steps__list li {
    position: relative;
    padding: 26px 24px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    counter-increment: step;
}

.home-steps__list li::after {
    content: counter(step);
    position: absolute;
    top: -18px;
    right: 14px;
    color: var(--brand-soft);
    font-size: 6.5rem;
    font-weight: 800;
    line-height: 1;
}

.home-steps__icon,
.home-feature__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 20px;
}

.home-steps__list h3,
.home-feature h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 6px;
    font-size: 1.15rem;
}

.home-steps__list p,
.home-feature p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
}

/* Types de liste */
.occasions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.occasion {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 170px;
    padding: 22px 16px 46px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .3s var(--ease);
}

.occasion:hover {
    transform: translateY(-4px) rotate(-1deg);
}

.occasion img {
    width: 100%;
    max-width: 220px;
    height: auto;
}

.occasion span {
    position: absolute;
    bottom: 14px;
    padding: 2px 12px;
    border-radius: 999px;
    background: rgb(255 255 255 / .85);
    font-size: 13px;
    font-weight: 600;
}

.occasion--birthday { background: linear-gradient(160deg, #fff1cf, #ffe2a8); }
.occasion--noel { background: linear-gradient(160deg, #ffe8e4, #ffd2cb); }
.occasion--naissance { background: linear-gradient(120deg, #fde4ef, #e4e2f7 50%, #d8eafb); }
.occasion--mariage { background: linear-gradient(160deg, #fbf5ea, #f0e2c9); }
.occasion--wishlist { background: linear-gradient(160deg, #f8f4ec, #e5ebf5); }

/* Fonctionnalités */
.home-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 32px;
}

.home-feature {
    padding: 22px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
}

.home-feature__icon {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    font-size: 18px;
}

/* Badges, gemmes et boutique : mêmes couleurs que la boutique. */
.home-play {
    width: min(1180px, 100% - 32px);
    margin: 0 auto 80px;
    padding: 48px 40px 40px;
    border-radius: 32px;
    background:
        radial-gradient(circle at 12% 18%, rgb(255 255 255 / .35) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 10%, rgb(255 255 255 / .3) 0 2px, transparent 3px),
        radial-gradient(circle at 90% 70%, rgb(255 255 255 / .25) 0 2px, transparent 3px),
        linear-gradient(135deg, #1e2a5e, #4c1d95 60%, #7c3aed);
    color: #fff;
    box-shadow: var(--shadow-lg);
}

.home-play__head {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
}

.home-eyebrow--light {
    background: rgb(255 255 255 / .14);
    color: #fff;
    box-shadow: none;
}

.home-play h2 {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.home-play__head > p:last-child {
    margin: 0;
    color: rgb(255 255 255 / .8);
    font-size: 1.05rem;
}

.home-play__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.home-play__card {
    padding: 22px;
    border-radius: 22px;
    background: rgb(255 255 255 / .1);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
}

.home-play__card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 1.1rem;
}

.home-play__card > p {
    margin: 0 0 16px;
    color: rgb(255 255 255 / .75);
    font-size: 14px;
    line-height: 1.5;
}

.home-play__num {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: #4c1d95;
    font-size: 14px;
    font-weight: 800;
}

.home-medals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-medal {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 10px 4px;
    border-radius: 16px;
    background: rgb(255 255 255 / .94);
    color: var(--text);
    text-align: center;
}

.home-medal span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fde7d6;
    box-shadow: 0 0 0 3px var(--tier, #d8925f);
    font-size: 22px;
}

.home-medal small {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.home-medal--silver { --tier: #a7b0c0; }
.home-medal--silver span { background: #eef1f6; }
.home-medal--gold { --tier: #e7b416; }
.home-medal--gold span { background: #fff4cc; }
.home-medal--legend { --tier: #a855f7; }
.home-medal--legend span { background: #f3e8ff; }

.home-rates {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-rates li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgb(255 255 255 / .1);
    font-size: 14px;
}

.home-rates b {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.home-skins {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-skin {
    position: relative;
    display: grid;
    place-items: center;
    padding: 22px 6px 26px;
    border-radius: 16px;
    background: rgb(255 255 255 / .94);
    box-shadow: inset 0 0 0 2px var(--rarity, transparent);
    transition: transform .2s var(--ease);
}

.home-skin:hover {
    transform: translateY(-3px) rotate(-1deg);
}

.home-skin img {
    width: 100%;
    height: 56px;
    object-fit: contain;
}

.home-skin__rarity {
    position: absolute;
    top: 5px;
    left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--rarity, #64748b);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.home-skin__price {
    position: absolute;
    bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.home-skin__price .gem {
    width: 13px;
    height: 13px;
}

.home-skin--rare { --rarity: #2563eb; }
.home-skin--epique { --rarity: #9333ea; }
.home-skin--heroique { --rarity: #d97706; }
.home-skin--prestige { --rarity: #b8860b; }
.home-skin--legendaire { --rarity: #db2777; }

.home-play__referral {
    margin: 24px 0 0;
    color: rgb(255 255 255 / .85);
    font-size: 15px;
    text-align: center;
}

.home-cta {
    width: min(820px, 100% - 32px);
    margin: 0 auto 80px;
    padding: 44px 24px;
    border-radius: 32px;
    background: linear-gradient(135deg, var(--brand-soft), #fff 70%);
    box-shadow: var(--shadow);
    text-align: center;
}

.home-cta h2 {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.home-cta p {
    margin: 0 0 22px;
    color: var(--text-muted);
}

.home-cta .home-hero__actions {
    justify-content: center;
}

@media (max-width: 1000px) {
    .home-play__grid {
        grid-template-columns: 1fr 1fr;
    }

    .home-play__card--shop {
        grid-column: 1 / -1;
    }

    .home-skins {
        grid-template-columns: repeat(6, 1fr);
    }

    .home-features {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .home-hero {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 0 56px;
        text-align: center;
    }

    .home-hero__lead {
        margin-inline: auto;
    }

    .home-hero__actions,
    .home-checks {
        justify-content: center;
    }

    .home-hero__visual {
        width: min(420px, 100%);
        margin: 0 auto;
    }

    /* Les types de liste défilent à l'horizontale, au doigt. */
    .occasions {
        display: flex;
        gap: 12px;
        margin-inline: -16px;
        padding: 6px 16px 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .occasions::-webkit-scrollbar {
        display: none;
    }

    .occasion {
        flex: 0 0 min(220px, 62%);
        min-height: 150px;
        scroll-snap-align: center;
    }

    .home-steps__list {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 700px) {
    .home-section,
    .home-play,
    .home-cta {
        margin-bottom: 56px;
    }

    .home-hero__actions .btn {
        flex: 1 1 100%;
    }

    .home-checks {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .home-phone {
        width: 210px;
        border-width: 6px;
        border-radius: 34px;
    }

    .home-phone img {
        height: 400px;
        border-radius: 28px;
    }

    .home-float {
        padding: 7px 12px 7px 7px;
        font-size: 12px;
    }

    .home-float > span {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .home-float small {
        font-size: 11px;
    }

    .home-float--gift { left: 0; }
    .home-float--badge { right: 0; }
    .home-float--heart { left: 4%; }

    /* Étapes et fonctionnalités : icône à gauche, plus compact. */
    .home-steps__list li,
    .home-feature {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        padding: 18px;
        text-align: left;
    }

    .home-steps__list li > :not(span),
    .home-feature > :not(span) {
        grid-column: 2;
    }

    .home-steps__icon,
    .home-feature__icon {
        grid-row: span 2;
        width: 42px;
        height: 42px;
        margin: 0;
        font-size: 18px;
    }

    .home-steps__list li::after {
        top: -10px;
        font-size: 4.5rem;
    }

    .home-features {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .home-play {
        width: 100%;
        padding: 36px 16px 28px;
        border-radius: 28px;
    }

    .home-play__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home-play__card {
        padding: 18px 16px;
    }

    .home-skins {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-cta {
        padding: 32px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-float {
        animation: none;
    }
}

.guide-back a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--brand-strong);
    font-weight: 700;
}

/* ---------- Page « Comment ça marche ? » ---------- */

/* Fond en dégradé progressif (couleurs du thème de la personne connectée) : pas de coupure nette sous le texte d'intro. */
body[data-page="guide"]:not([data-theme="home"]) {
    background: linear-gradient(var(--hero-from), var(--page) 760px) top / 100% 760px no-repeat, var(--page);
}

.guide-hero,
.guide-steps,
.guide-toc,
.guide-feature,
.guide-faq,
.guide-cta {
    width: min(1120px, 100% - 32px);
    margin-inline: auto;
}

.guide-hero {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 48px;
    padding: 56px 0 64px;
}

.guide-hero__eyebrow,
.guide-feature__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    color: var(--brand);
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.guide-feature__eyebrow .gem { width: 18px; height: 18px; }

.guide-hero h1 {
    margin: 0;
    font-size: clamp(2.1rem, 4.4vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -.04em;
}

.guide-hero__text > p:not(.guide-hero__eyebrow) {
    margin: 22px 0 28px;
    color: var(--text-muted);
    font-size: 1.13rem;
    line-height: 1.55;
}

.guide-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Capture ordinateur, avec le téléphone posé par-dessus. */
.guide-hero__visual { position: relative; padding: 0 0 40px 0; }
.guide-hero__visual img { display: block; height: auto; border-radius: 18px; box-shadow: 0 24px 60px rgb(29 36 64 / .18); }
.guide-hero__desktop { width: 100%; }
.guide-hero__mobile { position: absolute; right: -12px; bottom: 0; width: 28%; border: 6px solid #1d2440; border-radius: 26px !important; }

.guide-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.guide-step { position: relative; padding: 30px 24px 26px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.guide-step__number { position: absolute; top: -20px; right: 14px; color: var(--brand-soft); font-size: 7rem; font-weight: 800; line-height: 1; }
.guide-step__icon { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); font-size: 20px; }
.guide-step h2 { position: relative; margin: 0 0 8px; font-size: 1.2rem; }
.guide-step p { position: relative; margin: 0; color: var(--text-muted); line-height: 1.55; }

/* Sommaire : pastilles qui renvoient vers chaque partie. */
.guide-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; margin-bottom: 24px; }
.guide-toc a { padding: 8px 14px; text-decoration: none; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .92rem; font-weight: 600; transition: border-color .2s, color .2s; }
.guide-toc a:hover { border-color: var(--brand); color: var(--brand); }

/* Une fonctionnalité : texte d'un côté, captures de l'autre (alternés). */
.guide-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
    padding: 64px 0;
    border-top: 1px solid var(--line);
    scroll-margin-top: 80px;
}

.guide-feature--reverse .guide-feature__text { order: 2; }
.guide-feature h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; }
.guide-feature__text > p { margin: 0 0 14px; color: var(--text-muted); line-height: 1.55; }
.guide-feature__text .icon { display: inline-block; vertical-align: -2px; color: var(--brand); }

.guide-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.guide-list li { position: relative; padding-left: 30px; color: var(--text-muted); line-height: 1.55; }
.guide-list li strong { color: var(--text); }
.guide-list li::before { content: "✓"; position: absolute; top: 1px; left: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 800; }

.guide-feature__media { position: relative; margin: 0; }

.guide-shot { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 44px rgb(29 36 64 / .12); transition: transform .25s var(--ease, ease); }
.guide-shot:hover { transform: translateY(-3px); }
.guide-shot img { display: block; width: 100%; height: auto; }
.guide-shot--narrow { max-width: 440px; margin-inline: auto; }
/* Captures très hautes : on n'en montre que le haut. */
.guide-shot--crop { max-height: 560px; }
.guide-shot--crop img { object-fit: cover; object-position: top; }

/* Une grande capture et une petite posée en bas à droite. */
.guide-feature__media--stack { padding: 0 0 70px; }
.guide-feature__media--stack .guide-shot--float { position: absolute; right: -16px; bottom: 0; width: 52%; }
.guide-feature__media--stack .guide-shot--float.guide-shot--crop { max-height: 300px; }

.guide-feature__media--duo { display: grid; grid-template-columns: 1.4fr 1fr; align-items: start; gap: 16px; }
.guide-feature__media--duo .guide-shot--wide { grid-column: 1 / -1; }

.guide-faq { padding: 64px 0 24px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.guide-faq h2 { margin: 0 0 24px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); text-align: center; }
.guide-faq details { max-width: 760px; margin: 0 auto 10px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.guide-faq summary { position: relative; padding: 18px 52px 18px 22px; font-weight: 700; cursor: pointer; list-style: none; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: "+"; position: absolute; top: 50%; right: 20px; color: var(--brand); font-size: 1.4rem; font-weight: 600; transform: translateY(-50%); }
.guide-faq details[open] summary::after { content: "–"; }
.guide-faq details p { margin: 0; padding: 0 22px 18px; color: var(--text-muted); line-height: 1.55; }

.guide-cta { padding: 48px 0 0; text-align: center; }
.guide-cta h2 { margin: 0 0 20px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.guide-cta .guide-hero__actions { justify-content: center; }
.guide-back { margin: 28px 0 72px; text-align: center; }

/* ---------- Visite guidée (templates/partials/onboarding.php, js/app.js) ---------- */
/* Le fond sombre bloque la page ; le projecteur est un trou dans ce fond (ombre géante autour d'une boîte vide). */

.tour {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.tour__backdrop {
    position: absolute;
    inset: 0;
}

.tour__spotlight {
    position: fixed;
    border-radius: 14px;
    box-shadow: 0 0 0 4px var(--brand), 0 0 0 100vmax rgb(20 24 40 / .62);
    pointer-events: none;
    transition: left .35s var(--ease), top .35s var(--ease), width .35s var(--ease), height .35s var(--ease), border-radius .35s var(--ease);
}

.tour__spotlight::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    animation: tour-pulse 1.8s ease-out infinite;
}

@keyframes tour-pulse {
    from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
    to { box-shadow: 0 0 0 16px transparent; }
}

/* Étape sans cible : pas de trou, la bulle au centre. */
.tour.is-centered .tour__spotlight {
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    box-shadow: 0 0 0 100vmax rgb(20 24 40 / .62);
}

.tour.is-centered .tour__spotlight::after,
.tour.is-centered .tour__arrow {
    display: none;
}

.tour.is-centered .tour__bubble {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tour__bubble {
    position: fixed;
    width: min(380px, calc(100vw - 24px));
    padding: 20px 22px 16px;
    border-radius: 20px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    outline: none;
    transition: left .35s var(--ease), top .35s var(--ease);
}

.tour__bubble.is-entering > :not(.tour__arrow) {
    animation: tour-in .3s var(--ease);
}

@keyframes tour-in {
    from { opacity: 0; transform: translateY(6px); }
}

.tour__arrow {
    position: absolute;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    background: var(--surface);
    transform: rotate(45deg);
}

.tour__bubble[data-side="below"] .tour__arrow { top: -7px; }
.tour__bubble[data-side="above"] .tour__arrow { bottom: -7px; }

.tour__close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.tour__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 36px 12px 0;
}

.tour__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 18px;
}

.tour__eyebrow {
    margin: 0;
    color: var(--brand);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tour__bubble h2 {
    margin: 0 0 6px;
    font-size: 1.25rem;
    letter-spacing: -.02em;
}

.tour__text {
    margin: 0;
    color: var(--text-muted);
    font-size: .95rem;
    line-height: 1.5;
}

.tour__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.tour__nav {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.tour__progress {
    flex: 1;
    max-width: 90px;
    height: 5px;
    border-radius: 999px;
    background: var(--brand-soft);
    overflow: hidden;
}

.tour__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand);
    transition: width .3s var(--ease);
}

.tour__count {
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Accueil et fin : plus grand, centré. */
.tour__bubble--intro {
    width: min(440px, calc(100vw - 24px));
    padding: 32px 28px 22px;
    text-align: center;
}

.tour__bubble--intro .tour__head {
    flex-direction: column;
    margin: 0 0 14px;
}

.tour__bubble--intro .tour__icon {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    font-size: 30px;
}

.tour__bubble--intro h2 {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
}

.tour__bubble--intro .tour__footer {
    flex-direction: column-reverse;
    margin-top: 24px;
}

.tour__bubble--intro .tour__nav {
    margin: 0;
}

.tour__bubble--intro .tour__progress,
.tour__bubble--intro .tour__count {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .tour__spotlight,
    .tour__bubble {
        transition: none;
    }

    .tour__spotlight::after,
    .tour__bubble.is-entering > * {
        animation: none;
    }
}

/* ---------- Écrans moyens ---------- */

@media (max-width: 900px) {
        .guide-hero,
    .guide-feature,
    .guide-steps { grid-template-columns: 1fr; }
    .guide-hero { gap: 32px; padding-top: 32px; text-align: center; }
    .guide-hero__actions { justify-content: center; }
    .guide-hero__mobile { right: 0; }
    .guide-feature { gap: 28px; padding: 48px 0; }
    .guide-feature--reverse .guide-feature__text { order: 0; }
    .guide-feature__media--stack .guide-shot--float { right: 0; }
}

/* ---------- Extension Chrome ---------- */

.extension__intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    color: #3d4560;
}

.extension__logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 24px;
}

.extension__download {
    justify-self: start;
}

.extension__steps {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 16px 16px 16px 36px;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    font-size: 14px;
}

.extension__steps .icon {
    display: inline-block;
    vertical-align: -2px;
}

.extension__steps code {
    padding: 1px 6px;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
}

.extension__note {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.form__tip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.form__tip .icon {
    color: var(--brand);
}

.link-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-strong);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.extension-promo {
    display: flex;
    align-items: center;
    gap: 20px;
    width: min(1180px, 100% - 32px);
    margin: 0 auto 56px;
    padding: 20px 24px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--brand-soft), #fff);
    box-shadow: var(--shadow);
}

.extension-promo__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #fff;
    color: var(--brand);
    font-size: 26px;
    box-shadow: var(--shadow-sm);
}

.extension-promo h2 {
    margin: 0 0 2px;
    font-size: 1.1rem;
}

.extension-promo p {
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
}

.extension-promo .btn {
    margin-left: auto;
}

@media (max-width: 700px) {
    .extension-promo {
        flex-direction: column;
        text-align: center;
    }

    .extension-promo .btn {
        margin: 0;
    }
}

/* ---------- Collections (templates/partials/items.php) ---------- */

.items {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 4px 10px 4px 6px;
    border-radius: 10px;
    background: var(--surface-muted);
    font-size: 14px;
}

/* Sans case à cocher (propriétaire, visiteur, infos de don masquées) : une puce. */
.item::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin: 0 4px 0 6px;
    border-radius: 50%;
    background: var(--brand);
}

.show-gifted .item:has(.item__form)::before {
    display: none;
}

.item__name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.item__link {
    color: inherit;
    text-decoration: none;
}

.item__link:hover {
    color: var(--brand-strong);
    text-decoration: underline;
}

.item__link .icon {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 4px;
    vertical-align: -1px;
    color: var(--text-muted);
}

.item--received .item__name { color: var(--text-muted); }
.item__received-form { flex: none; margin: 0; }

.item__received {
    width: 32px;
    height: 32px;
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
}

.item__received:hover {
    background: var(--surface);
    color: var(--brand-strong);
    box-shadow: none;
}

.item__received[aria-pressed="true"] {
    background: var(--success-soft);
    color: var(--success);
}

.item__received .icon { width: 14px; height: 14px; }

/* Cases et réservations : seulement quand « Voir les idées offertes » est activé. */
.item__form,
.item__by {
    display: none;
}

.show-gifted .item__form {
    display: block;
}

.show-gifted .item__by {
    display: inline-flex;
}

.item__check {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid color-mix(in srgb, var(--brand) 45%, var(--line));
    border-radius: 50%;
    background: #fff;
    color: transparent;
    font-size: 12px;
    transition: background-color .15s, border-color .15s, transform .15s var(--ease);
}

.item__check:not(:disabled):hover {
    border-color: var(--brand);
    transform: scale(1.1);
}

.item__check[aria-checked="true"] {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
    animation: pop .3s var(--ease);
}

.item__check:disabled {
    border-color: var(--line);
    background: var(--line);
    color: var(--text-muted);
    cursor: not-allowed;
}

.show-gifted .item--taken .item__name {
    color: var(--text-muted);
    text-decoration: line-through;
}

.show-gifted .item--mine {
    background: var(--success-soft);
}

.item__by {
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 2px;
    border-radius: 999px;
    background: #fff;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.item__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.item--mine .item__by {
    color: #157a42;
}

.items__more {
    padding-left: 6px;
    font-size: 13px;
}

.detail__items h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.collection-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* Éditeur de collection dans le formulaire d'idée */
.collection {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand-soft) 45%, #fff);
}

.collection__toggle,
.switch {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.collection__toggle span,
.switch span {
    display: grid;
    font-size: 14px;
}

.collection__toggle small,
.switch small {
    color: var(--text-muted);
    font-weight: 400;
}

.collection__toggle input,
.switch input {
    appearance: none;
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    margin: 0;
    border-radius: 999px;
    background: var(--line);
    cursor: pointer;
    transition: background-color .2s;
}

.collection__toggle input::after,
.switch input::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgb(0 0 0 / .2);
    transition: transform .2s var(--ease);
}

.collection__toggle input:checked,
.switch input:checked {
    background: var(--brand);
}

.collection__toggle input:checked::after,
.switch input:checked::after {
    transform: translateX(18px);
}

.collection__editor {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.collection__list {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0 0 0 22px;
    color: var(--text-muted);
    font-size: 13px;
}

.collection__row {
    padding-left: 4px;
}

.collection__row > * {
    vertical-align: middle;
}

.collection__row input[type="text"] {
    width: calc(100% - 48px);
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 14px;
}

.collection__row input[type="text"]:focus {
    border-color: var(--brand);
    outline: 0;
}

.collection__row .round-btn {
    margin-left: 6px;
}

.collection__row input[name="item_links[]"] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
}

/* ---------- Date de l'événement : compte à rebours ---------- */

.countdown {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin: 6px 0 2px;
}

.countdown__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-strong);
    font-size: 14px;
    font-weight: 700;
}

.countdown__units {
    display: flex;
    gap: 8px;
    perspective: 400px;
}

.countdown__unit {
    display: grid;
    justify-items: center;
    min-width: 64px;
    padding: 8px 10px 6px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-sm), inset 0 -3px 0 color-mix(in srgb, var(--brand) 18%, transparent);
}

.countdown__value {
    display: block;
    color: var(--text);
    font-size: 1.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    transform-origin: 50% 0;
}

.countdown__value.is-ticking {
    animation: tick .45s var(--ease);
}

@keyframes tick {
    0% {
        opacity: 0;
        transform: rotateX(-90deg) translateY(-6px);
    }
    60% {
        opacity: 1;
        transform: rotateX(12deg);
    }
}

.countdown__unit small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Les secondes battent comme un cœur */
.countdown__unit--s {
    background: var(--brand);
    animation: heartbeat 1s ease-in-out infinite;
}

.countdown__unit--s .countdown__value,
.countdown__unit--s small {
    color: #fff;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.08); }
    30% { transform: scale(.98); }
}

.countdown__today {
    display: none;
}

/* Jour J : message et confettis */
.countdown.is-today .countdown__label,
.countdown.is-today .countdown__units {
    display: none;
}

.countdown.is-today .countdown__today {
    position: relative;
    display: inline-block;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 40%, transparent);
    animation: party 1.2s ease-in-out infinite;
}

.countdown.is-today .countdown__today::before,
.countdown.is-today .countdown__today::after {
    content: "🎊";
    position: absolute;
    top: -14px;
    font-size: 1.4rem;
    animation: confetti 1.6s ease-in-out infinite;
}

.countdown.is-today .countdown__today::before {
    left: -18px;
}

.countdown.is-today .countdown__today::after {
    right: -18px;
    animation-delay: -.8s;
}

@keyframes party {
    0%, 100% { transform: rotate(-2deg) scale(1); }
    50% { transform: rotate(2deg) scale(1.05); }
}

@keyframes confetti {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(20deg); }
}

@media (max-width: 420px) {
    .countdown__unit {
        min-width: 56px;
        padding: 6px 6px 4px;
    }

    .countdown__value {
        font-size: 1.4rem;
    }
}

.friends-grid__event {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--brand-strong);
    font-size: 11px;
}

/* ---------- Listes d'enfants ---------- */

.hero__children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.child-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 14px 3px 3px;
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .15s var(--ease);
}

.child-chip:hover {
    transform: translateY(-2px);
}

.child-chip__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.form__intro {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: #3d4560;
    font-size: 14px;
}

/* ---------- Prix ---------- */

/* Étiquette de prix posée sur l'image, en bas à droite */
.card__price {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 4px 12px;
    border-radius: 10px 10px 10px 2px;
    background: #fff;
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 4px 14px rgb(29 36 64 / .14);
    pointer-events: none;
}

.detail__price {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
}

.detail__price small {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.field--price {
    position: relative;
}

.field--price input {
    padding-right: 34px;
}

.field__suffix {
    position: absolute;
    right: 14px;
    bottom: 12px;
    color: var(--text-muted);
}

.toolbar {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    width: min(1200px, 100% - 32px);
    margin: -18px auto 24px;
}

.toolbar__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.toolbar__label {
    margin-right: 4px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.toolbar button {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.toolbar button[aria-pressed="true"] {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

/* ---------- Idées reçues ---------- */

.card__badge.card__badge--received {
    background: var(--text-muted);
    box-shadow: none;
}

.card--received .card__image img {
    filter: grayscale(.6);
    opacity: .75;
}

.card__cta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card__cta form {
    display: contents;
}

/* ---------- Offrir à plusieurs ---------- */

.gift-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gift-actions form {
    display: contents;
}

button.collection-pill {
    border: 0;
    cursor: pointer;
}

.collection-pill--mine {
    background: var(--success-soft);
    color: #157a42;
}

/* Cadeau à plusieurs : la pastille se remplit avec les participations (--progress). */
.group-pill {
    padding: 0 12px;
    gap: 6px;
    background: linear-gradient(90deg, color-mix(in srgb, currentColor 16%, transparent) var(--progress, 0%), transparent 0), var(--brand-soft);
}

.group-pill.collection-pill--mine {
    background: linear-gradient(90deg, color-mix(in srgb, currentColor 16%, transparent) var(--progress, 0%), transparent 0), var(--success-soft);
}

.gift-only-block {
    display: none;
}

.show-gifted .gift-only-block {
    display: block;
}

.group {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--brand-soft) 50%, #fff);
}

.group h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1rem;
}

.group__hint,
.group__total {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.group__total strong {
    color: var(--text);
}

.group__progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #fff;
}

.group__progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand), var(--success));
    transition: width .4s var(--ease);
}

.group__list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.group__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
}

.group__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.group__amount {
    margin-left: auto;
    color: var(--brand-strong);
}

.group__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.group__amount-field {
    position: relative;
    display: grid;
    flex: 1 1 160px;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.group__amount-field input {
    min-height: 44px;
    padding: 8px 32px 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}

.group__currency {
    position: absolute;
    right: 12px;
    bottom: 12px;
    color: var(--text-muted);
}

.managers__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.managers__list .child-chip {
    font-size: 13px;
}

.managers__remove {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0 -8px 0 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 10px;
}

.managers__add {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.managers__add select {
    flex: 1;
}

/* ---------- Les cadeaux que j'offre ---------- */

.user-menu__count {
    margin-left: auto;
    min-width: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.my-gifts__empty {
    margin: 0;
    color: var(--text-muted);
}

.my-gifts__group h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 1rem;
}

.my-gifts__group h3 a {
    text-decoration: none;
}

.my-gifts__group h3 small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: var(--brand-strong);
    font-size: 12px;
}

.my-gifts__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.my-gifts__group ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.my-gifts__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    text-decoration: none;
    transition: background-color .15s;
}

.my-gifts__item:hover {
    background: var(--brand-soft);
}

.my-gifts__item img {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #fff;
    object-fit: contain;
}

.my-gifts__name {
    display: grid;
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.my-gifts__name small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

.my-gifts__price {
    color: var(--brand-strong);
    font-weight: 700;
    white-space: nowrap;
}

.my-gifts__chevron {
    color: var(--text-muted);
}


/* ---------- Menu « ⋯ » des vignettes (gestion de la liste) ---------- */

.card-menu {
    position: relative;
}

.card-menu summary {
    list-style: none;
    cursor: pointer;
}

.card-menu summary::-webkit-details-marker {
    display: none;
}

.card:has(.card-menu[open]) {
    z-index: 5;
}

.card-menu__panel {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: calc(100% + 8px);
    display: grid;
    min-width: 220px;
    padding: 6px;
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: var(--shadow-lg);
    animation: rise .15s var(--ease);
}

.card-menu__panel button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    font-weight: 500;
    text-align: left;
}

.card-menu__panel button:hover {
    background: var(--surface-muted);
}

.card-menu__panel .icon {
    color: var(--brand);
}

.card-menu__panel form {
    display: contents;
}

.card-menu__panel .card-menu__danger,
.card-menu__panel .card-menu__danger .icon {
    color: var(--danger);
}

/* ---------- « Je l'offre » : seul ou à plusieurs ---------- */

.modal--small {
    width: min(440px, 100% - 24px);
}

.gift-choice__name {
    margin: 0;
    color: var(--text-muted);
    font-weight: 600;
}

.gift-choice {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    text-align: left;
    transition: border-color .15s, background-color .15s, transform .15s var(--ease);
}

.gift-choice:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    transform: translateY(-1px);
}

.gift-choice > span:nth-child(2) {
    display: grid;
    flex: 1;
}

.gift-choice small {
    color: var(--text-muted);
    font-size: 13px;
}

.gift-choice__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--brand);
    color: #fff;
    font-size: 20px;
}

.gift-choice__icon--group {
    background: var(--success);
}

.gift-choice__chevron {
    color: var(--text-muted);
}

/* ---------- Question secrète ---------- */

.secret-fields {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand-soft) 40%, #fff);
}

.form__link {
    margin: -8px 28px 12px;
    text-align: right;
    font-size: 14px;
}

/* Confirmation de l'adresse e-mail (fenêtre du code à 6 chiffres) */
.field__code {
    font-size: 1.5rem;
    letter-spacing: .35em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.email-code__spam {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 2px solid #f59e0b;
    border-radius: var(--radius-sm);
    background: #fff4d6;
    color: #7a4a00;
    font-size: 14px;
    line-height: 1.5;
}

.email-code__spam .icon {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: #d97706;
}

.email-code__spam p {
    margin: 0;
}

.email-code__spam strong {
    display: block;
    margin-bottom: 2px;
    font-size: 15px;
    color: #5c3700;
}

.email-code__resend {
    display: flex;
    justify-content: center;
    margin: -6px 28px 4px;
    font-size: 14px;
}

.email-code__resend .link-btn {
    display: inline-flex;
    align-items: center;
    gap: .4em;
}

.email-code__change {
    margin: 0 28px 22px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 14px;
}

.email-code__change summary {
    cursor: pointer;
    color: var(--text-muted);
    text-align: center;
}

.email-code__change .form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.forgot__step {
    display: grid;
    gap: 14px;
}

.forgot__question {
    margin: 0;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-weight: 700;
}


/* ---------- En-tête mobile : une seule barre collante ---------- */

/* Interrupteur « Voir les idées offertes » près des onglets : seulement sur mobile. */
.pill-switch--inline {
    display: none;
}

@media (max-width: 700px) {
    .topbar {
        gap: 8px;
        padding: 8px 10px;
        background: color-mix(in srgb, var(--hero-from) 82%, transparent);
        backdrop-filter: blur(10px);
        box-shadow: 0 1px 0 rgb(0 0 0 / .04);
        pointer-events: auto;
    }

    .topbar .pill-switch,
    .topbar .my-list {
        display: none;
    }

    .topbar__brand {
        flex: none;
        padding: 4px;
        box-shadow: none;
    }

    .topbar__logo {
        width: 36px;
        height: 36px;
        font-size: 17px;
    }

    .topbar__title {
        display: none;
    }

    .topbar__actions {
        gap: 6px;
    }

    .topbar .round-btn,
    .bell,
    .user-menu__avatar {
        width: 40px;
        height: 40px;
    }

    /* Pile d'amis dans la barre : reste visible au défilement. */
    .friends {
        position: static;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        min-width: 0;
        max-height: none;
        margin: 0;
        padding: 3px 4px 3px 12px;
        overflow: hidden;
        border-radius: 999px;
        background: rgb(255 255 255 / .9);
        box-shadow: none;
    }

    .friends ul {
        flex-direction: row;
        gap: 0;
        min-width: 0;
        overflow: hidden;
    }

    .friends li {
        margin-left: -10px;
    }

    .friends__avatar {
        width: 32px;
        height: 32px;
        box-shadow: 0 0 0 2px #fff;
    }

    .friends__more {
        width: 32px;
        height: 32px;
        margin: 0 0 0 4px;
        font-size: 12px;
    }

    .hero {
        margin-top: 0;
        padding-top: 20px;
    }

    .pill-switch--inline {
        display: flex;
        width: fit-content;
        margin: -60px auto 12px;
        position: relative;
        z-index: 2;
    }

    .pill-switch--inline + .tabs {
        margin-top: 0;
    }

    /* Onglets en grille : tous visibles, sans défilement caché. */
    .tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: calc(100% - 32px);
        border-radius: 22px;
        overflow: visible;
    }

    .tabs__tab {
        justify-content: center;
        min-height: 40px;
        padding: 0 8px;
        font-size: 14px;
    }

    .tabs__tab:only-child,
    .tabs__tab:last-child:nth-child(odd) {
        grid-column: span 2;
    }
}

@media (max-width: 380px) {
    .friends li:nth-child(n + 5) {
        display: none;
    }
}

@media (max-width: 700px) {
    .friends {
        flex: 0 1 auto;
        padding-left: 4px;
    }

    .friends li:first-child {
        margin-left: 0;
    }

    .topbar__actions {
        margin-left: auto;
    }

    .pill-switch--inline .pill-switch__label {
        display: inline;
    }
}

/* ---------- Filtre en menu de sélection (mobile) ---------- */

.tabs-select {
    display: none;
}

@media (max-width: 700px) {
    .tabs {
        display: none !important;
    }

    .tabs-select {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        width: calc(100% - 32px);
        margin: 0 auto 24px;
        border-radius: 999px;
        background: #fff;
        box-shadow: var(--shadow);
    }

    .tabs-select > .icon:not(.tabs-select__chevron) {
        position: absolute;
        left: 18px;
        color: var(--brand);
        pointer-events: none;
    }

    .tabs-select select {
        appearance: none;
        width: 100%;
        min-height: 50px;
        padding: 0 48px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--text);
        font-weight: 700;
        cursor: pointer;
    }

    .tabs-select select:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--brand) 40%, transparent);
    }

    .tabs-select__chevron {
        position: absolute;
        right: 20px;
        color: var(--text-muted);
        transform: rotate(90deg);
        pointer-events: none;
    }

    .pill-switch--inline {
        margin: -60px auto 12px;
    }
}

@media (max-width: 700px) {
    /* Photo au-dessus du titre (règle perdue lors du déplacement de la pile d'amis). */
    .hero__head {
        flex-direction: column;
        gap: 12px;
    }

    .hero__center,
    .hero__titles {
        min-width: 0;
        max-width: 100%;
    }

    .theme-picker {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        border-radius: 22px;
    }
}

@media (max-width: 960px) {
    /* La colonne ne doit jamais s'élargir à la taille de son contenu. */
    .hero {
        grid-template-columns: minmax(0, 1fr);
    }

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


/* ---------- Barre du haut mobile : interrupteur compact + raccourci « Amis » ---------- */

.friends-shortcut {
    display: none;
}

@media (max-width: 700px) {
    .friends {
        display: none !important;
    }

    .friends-shortcut {
        display: inline-grid;
        color: var(--brand);
    }

    .topbar .pill-switch {
        display: flex;
        height: 40px;
        padding: 0 4px 0 10px;
    }

    .topbar .pill-switch__label {
        display: none;
    }

    .topbar .pill-switch input {
        width: 40px;
        height: 26px;
    }

    .topbar .pill-switch input::after {
        width: 20px;
        height: 20px;
    }

    .topbar .pill-switch input:checked::after {
        transform: translateX(14px);
    }
}


/* ---------- Liste consultée dans la barre du haut (mobile) ---------- */

.topbar__owner {
    display: none;
}

@media (max-width: 700px) {
    body:has(.hero) .topbar__brand {
        flex: 0 1 auto;
        min-width: 0;
        padding: 4px 14px 4px 4px;
        box-shadow: var(--shadow);
    }

    body:has(.hero) .topbar__logo {
        display: none;
    }

    .topbar__owner {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .topbar__owner-avatar {
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        object-fit: cover;
    }

    .topbar__owner-name {
        overflow: hidden;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Mobile : toutes les fenêtres en panneau pleine largeur (y compris les petites). */
@media (max-width: 600px) {
    .modal,
    .modal--small {
        width: 100%;
        max-width: none;
        margin: auto 0 0;
    }
}


/* ---------- Cartouche de la barre du haut ---------- */

.topbar__brand {
    gap: 12px;
    padding: 6px 8px 6px 6px;
    border: 1px solid rgb(255 255 255 / .7);
    transition: transform .2s var(--ease), box-shadow .2s;
}

.topbar__brand:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.topbar__logo {
    position: relative;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 70%, #ffb347), var(--brand));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 35%, transparent);
}

.topbar__brand:hover .topbar__logo .icon {
    animation: wiggle .5s ease-in-out;
}

@keyframes wiggle {
    25% { transform: rotate(-12deg); }
    75% { transform: rotate(12deg); }
}

/* Petite étincelle sur le logo */
.topbar__logo::after {
    content: "✦";
    position: absolute;
    top: -4px;
    right: -3px;
    color: #ffc93c;
    font-size: 13px;
    animation: twinkle 2.4s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: .2; transform: scale(.7) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.1) rotate(20deg); }
}

.topbar__text {
    display: grid;
    min-width: 0;
    line-height: 1.15;
}

.topbar__kicker {
    color: var(--brand-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.topbar__title {
    font-size: 1.1rem;
}

.topbar__days {
    margin-left: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.notification__hint {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 700px) {
    .topbar__text,
    .topbar__days {
        display: none;
    }
}


/* ---------- Nom et nombre d'idées sous la photo : deux pastilles distinctes ---------- */

.profile__card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    z-index: 2;
    margin-top: -16px;
}

/* Prénom : pastille blanche à cheval sur le bas de la photo */
.profile__card .profile__name {
    margin: 0;
    padding: 6px 20px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: #fff;
    font-size: 1.2rem;
    line-height: 1.2;
    box-shadow: 0 6px 18px rgb(29 36 64 / .12);
}

/* Nombre d'idées : petite pastille aux couleurs du thème */
.profile__card .profile__meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgb(255 255 255 / .6);
    color: var(--brand-strong);
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
    backdrop-filter: blur(4px);
}

.profile__card .profile__meta .icon {
    color: currentColor;
}

/* Liste privée : pastille à côté du nombre d'idées */
.profile__private {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding-left: 9px;
    border-left: 1px solid currentColor;
}

/* Liste privée : amis autorisés à la voir (paramètres de la liste), affichés seulement si la case est cochée */
.switch:has(input[type="checkbox"][name="is_private"]:not(:checked)) + .private-viewers {
    display: none;
}

.private-viewers {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.private-viewers legend {
    margin-bottom: 6px;
    padding: 0;
}

.private-viewers__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.private-viewers__option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px 3px 3px;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.private-viewers__option:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.private-viewers__option:has(input:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Case invisible mais toujours atteignable au clavier : la pastille entière sert de case. */
.field .private-viewers__option input {
    width: 0;
    min-height: 0;
    height: 0;
    margin: 0 -8px 0 0;
    padding: 0;
    border: 0;
    opacity: 0;
}

.private-viewers__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.private-invite {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
}

.private-invite__label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    color: var(--text-muted);
    font-weight: 400;
}

.private-invite__label .icon {
    flex: none;
    align-self: center;
}

.field .private-invite .share__link input {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.private-invite__reset {
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.private-viewers__empty {
    margin: 0;
    color: var(--text-muted);
    font-weight: 400;
}

/* Lien vers une liste privée qu'on ne peut pas voir */
.private-notice {
    display: grid;
    justify-items: center;
    gap: 12px;
    max-width: 440px;
    margin: 80px auto;
    padding: 40px 24px;
    border-radius: var(--radius);
    background: #fff;
    text-align: center;
    box-shadow: 0 8px 24px rgb(29 36 64 / .08);
}

.private-notice__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.private-notice h1 {
    margin: 0;
    font-size: 1.5rem;
}

.private-notice p {
    margin: 0 0 8px;
    color: var(--text-muted);
}

.private-notice__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 26px;
}

/* Ajouter / retirer des amis : bouton avec libellé sous le nombre d'idées. */
.profile__friend {
    margin: 4px 0 0;
}

/* Retirer : action rare, donc discrète. */
.profile__unfriend {
    min-height: 30px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Réaction dans le texte d'une notification */
.notification__reaction {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: -3px;
}

/* Mobile : mêmes infos que sur ordinateur (type de liste, nom, J-xx), en plus petit, à côté de la photo. */
@media (max-width: 700px) {
    .topbar__owner-name {
        display: none;
    }

    .topbar__owner ~ .topbar__text {
        display: grid;
        min-width: 0;
    }

    /* C'est la carte de la liste qui rétrécit, jamais les boutons de droite. */
    .topbar__owner ~ .topbar__text ~ .topbar__days,
    .topbar__actions {
        flex-shrink: 0;
    }

    .topbar__owner ~ .topbar__text .topbar__kicker {
        overflow: hidden;
        font-size: 9px;
        letter-spacing: .04em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body .topbar__owner ~ .topbar__text .topbar__title {
        display: block;
        overflow: hidden;
        font-size: 15px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar__owner ~ .topbar__days {
        display: inline-block;
        flex: none;
        margin-left: 2px;
        padding: 3px 7px;
        font-size: 11px;
    }
}

/* Petits écrans : le J-xx devient une pastille posée sur la photo, pour laisser la place au nom. */
@media (max-width: 420px) {
    .topbar__brand {
        position: relative;
    }

    body .topbar__owner ~ .topbar__days {
        position: absolute;
        left: 0;
        bottom: -4px;
        margin: 0;
        padding: 1px 5px;
        border: 2px solid #fff;
        font-size: 9px;
        line-height: 1.3;
    }
}

/* « Offert par … » : la photo de celui qui offre, avec une petite coche verte. */
.gifted-pill__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
    text-align: left;
    line-height: 1.2;
}

.gifted-pill__label {
    font-size: 10px;
    font-weight: 500;
}

.gifted-pill__name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.gifted-pill__avatar {
    flex: none;
    width: 28px;
    height: 28px;
    margin-left: -6px;
    border: 2px solid #fff;
    border-radius: 50%;
    object-fit: cover;
}

.gifted-pill:has(.gifted-pill__avatar) {
    position: relative;
    padding-left: 12px;
}

.gifted-pill:has(.gifted-pill__avatar)::before {
    content: "✓";
    position: absolute;
    left: 24px;
    bottom: 4px;
    /* Par-dessus la photo, même entourée d'un cadre de la boutique (.mini-frame, positionné). */
    z-index: 2;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
}

/* Idée déjà offerte : vignette atténuée (les boutons du bas restent nets). */
.show-gifted .card--gifted .card__image img {
    opacity: .5;
    filter: grayscale(.5);
    transition: opacity .2s, filter .2s;
}

.show-gifted .card--gifted .card__body {
    opacity: .55;
}

.show-gifted .card--gifted:hover .card__image img {
    opacity: .8;
    filter: none;
}

/* Naissance : voile rose à gauche et bleu à droite par-dessus l'en-tête lilas. */
[data-theme="naissance"] .hero {
    background-image:
        linear-gradient(105deg, rgb(250 200 222 / .6), transparent 42%, transparent 58%, rgb(176 210 246 / .6)),
        radial-gradient(circle at 12% 30%, var(--confetti-1) 0 5px, transparent 6px),
        radial-gradient(circle at 88% 22%, var(--confetti-2) 0 6px, transparent 7px),
        radial-gradient(circle at 22% 82%, var(--confetti-3) 0 5px, transparent 6px),
        radial-gradient(circle at 76% 76%, var(--confetti-1) 0 4px, transparent 5px),
        radial-gradient(circle at 35% 18%, var(--confetti-3) 0 4px, transparent 5px),
        radial-gradient(circle at 64% 12%, var(--confetti-1) 0 5px, transparent 6px),
        linear-gradient(180deg, var(--hero-from), color-mix(in srgb, var(--hero-from) 70%, var(--page)));
}

/* Accueil mobile : la pastille de la barre du haut garde son texte (sinon elle est vide). */
@media (max-width: 700px) {
    body .topbar__brand:not(:has(.topbar__owner)) .topbar__text {
        display: grid;
    }

    body .topbar__brand:not(:has(.topbar__owner)) .topbar__title {
        display: block;
        font-size: 15px;
    }
}

/* Choix parmi les images trouvées sur la page du produit (formulaire d'idée). */
.image-choices {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.image-choices__label {
    color: var(--text-muted);
    font-size: 13px;
}

.image-choices__list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 6px;
    scrollbar-width: thin;
}

.image-choices__item {
    flex: none;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--line);
    cursor: pointer;
    overflow: hidden;
    transition: transform .15s var(--ease), box-shadow .15s;
}

.image-choices__item:hover {
    transform: translateY(-2px);
}

.image-choices__item[aria-pressed="true"] {
    outline: 3px solid var(--brand);
    outline-offset: 1px;
}

.image-choices__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- Fenêtre de confirmation (templates/partials/confirm.php) ---------- */

.confirm {
    width: min(400px, calc(100% - 32px));
}

.confirm__body {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding-top: 28px;
    text-align: center;
}

.confirm__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: #fdecec;
    color: var(--danger);
    font-size: 24px;
    box-shadow: 0 0 0 8px #fef5f5;
    animation: confirm-pop .35s var(--ease);
}

.confirm__title {
    margin: 0;
    font-size: 1.25rem;
}

.confirm__text {
    margin: 0;
    color: var(--text-muted);
}

.confirm__footer {
    justify-content: center;
}

.confirm__footer .btn {
    flex: 1;
}

/* Action confirmée : rouge plein, plus visible que le bouton « danger » habituel. */
.confirm__footer .btn--danger {
    background: var(--danger);
    color: #fff;
    box-shadow: 0 8px 20px rgb(229 72 77 / .3);
}

.confirm__footer .btn--danger:hover {
    background: #cf3a3f;
}

/* Mobile : panneau pleine largeur, comme les autres fenêtres. */
@media (max-width: 600px) {
    .confirm {
        width: 100%;
    }
}

@keyframes confirm-pop {
    from { transform: scale(.6); opacity: 0; }
}

/* ---------- Animation de suppression d'une idée (js/app.js : throwInTrash) ---------- */

.trash-fly {
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 1000;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    font-size: 30px;
    box-shadow: 0 0 0 10px rgb(229 72 77 / .15), 0 18px 40px rgb(229 72 77 / .35);
    pointer-events: none;
    transform: translateY(140%);
    transform-origin: 50% 80%;
}

.trash-fly__ghost {
    position: fixed;
    z-index: 999;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    transform-origin: center;
}

/* Plis et ombres du papier chiffonné (js/app.js : crumple). */
.trash-fly__ghost::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 30%, rgb(0 0 0 / .14) 31%, transparent 34%),
        linear-gradient(65deg, transparent 55%, rgb(0 0 0 / .12) 56%, transparent 60%),
        linear-gradient(160deg, transparent 20%, rgb(255 255 255 / .5) 22%, transparent 26%),
        linear-gradient(20deg, transparent 68%, rgb(0 0 0 / .1) 69%, transparent 73%),
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / .35), transparent 45%),
        radial-gradient(circle at 70% 75%, rgb(0 0 0 / .22), transparent 55%);
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
}

.trash-fly__ghost.is-crumpled::after {
    opacity: 1;
}

/* Carton d'archives (« J'ai reçu ») : même pastille que la corbeille, en vert. */
.trash-fly--archive {
    background: var(--success);
    box-shadow: 0 0 0 10px rgb(31 157 85 / .15), 0 18px 40px rgb(31 157 85 / .35);
}

/* ---------- Nouvelle idée : elle tombe à sa place, avec des confettis (js/app.js : burstConfetti) ---------- */

.card.is-new {
    animation: card-new .7s cubic-bezier(.2, .9, .3, 1.25) both, highlight 1.8s .5s var(--ease);
}

@keyframes card-new {
    from {
        opacity: 0;
        transform: translateY(-60px) scale(.7) rotate(-4deg);
    }
}

.confetti-piece {
    position: fixed;
    z-index: 1000;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .card.is-new {
        animation: highlight 1.6s var(--ease);
    }
}

/* Étiquette « Reçu » ou étiquette habituelle, selon l'état de la vignette (basculé par js/app.js). */
.card:not(.card--received) .card__badge--received,
.card--received .card__badge--idea,
.card--received .card__badge--gifted {
    display: none !important;
}

/* « Cling ! » : onomatopée de bande dessinée, sur une étoile jaune (js/app.js : onomatopoeia). */
.onomatopoeia {
    position: fixed;
    z-index: 1001;
    display: grid;
    place-items: center;
    padding: 18px 22px;
    color: #fff;
    font: 800 26px/1 var(--font);
    letter-spacing: .02em;
    white-space: nowrap;
    text-shadow: 2px 2px 0 #1d2440, -1px -1px 0 #1d2440, 1px -1px 0 #1d2440, -1px 1px 0 #1d2440;
    pointer-events: none;
}

.onomatopoeia::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #ffd23f;
    clip-path: polygon(50% 0, 61% 26%, 90% 10%, 78% 40%, 100% 52%, 76% 63%, 88% 92%, 59% 76%, 46% 100%, 37% 74%, 8% 88%, 22% 60%, 0 46%, 25% 37%, 12% 10%, 40% 24%);
}

/* ---------- En-tête épuré : partage et thème dans des fenêtres (templates/partials/hero.php) ---------- */

/* Partage dans la fenêtre : plus de carte, la fenêtre suffit. */
.share-dialog .share {
    display: grid;
    gap: 16px;
    padding-top: 4px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
}

.share-dialog .share__label {
    color: var(--text-muted);
    font-weight: 400;
}

.share-dialog .share__row {
    flex-direction: column;
    align-items: stretch;
}

.share-dialog .share__link {
    flex: none;
}

.share-dialog .share__buttons {
    justify-content: center;
}

/* Parrainage sous le partage : même carte que dans la boutique, en plus compact. */
.share-dialog .referral--share {
    margin: 4px 0 0;
    padding: 14px 16px;
}

.share-dialog .referral--share .referral__code {
    justify-content: center;
}

.share-dialog .referral--share .referral__code {
    gap: 6px;
}

.share-dialog .referral--share .referral__value {
    padding: 4px 10px;
    font-size: 1.05rem;
    letter-spacing: .12em;
}

.share-dialog .referral--share .btn {
    padding-inline: 10px;
}





/* En-tête (ordinateur) : trois colonnes, la photo à gauche et une colonne vide de même largeur à droite,
 * pour que le titre reste parfaitement centré. Plus étroit (tablette, mobile) : la photo passe au-dessus du titre. */
@media (max-width: 1100px) {
    .hero__head {
        flex-direction: column;
        gap: 12px;
    }
}

@media (min-width: 1101px) {
    .hero__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px minmax(0, 1fr);
        align-items: center;
        gap: 90px;
    }

    .hero__head > .profile {
        grid-column: 1;
        justify-self: end;
    }

    .hero__head > .hero__titles {
        grid-column: 2;
        width: 100%;
    }

    .profile__avatar > img {
        width: 120px;
        height: 120px;
    }
}

/* Colonne centrale un peu plus large pour loger photo + titre + colonne vide (les décors gardent leurs côtés). */
@media (min-width: 1101px) {
    .hero {
        grid-template-columns: 1fr minmax(0, 820px) 1fr;
    }
}
/* Partager / paramètres de la liste dans la barre du haut : même couleur que la cloche. */
.topbar__share,
.topbar__settings {
    color: var(--brand);
}

/* ---------- Badges et trophées (templates/partials/badges.php, lib/badges.php) ---------- */

/* Niveaux : dégradé de l'icône (from → to), ombre colorée (glow) et couleur du texte (ink). */
.medal--bronze { --medal-bg: #fde7d6; --medal-ink: #b45315; --medal-ring: #f4c7a4; }
.medal--silver { --medal-bg: #eaeef4; --medal-ink: #55657d; --medal-ring: #cdd5e1; }
.medal--gold { --medal-bg: #fdf0c4; --medal-ink: #a16207; --medal-ring: #f2d474; }
.medal--legend { --medal-bg: #ece6ff; --medal-ink: #6d3fe6; --medal-ring: #c9bbff; }

.profile__badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    padding: 3px 12px;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / .6);
    color: var(--brand-strong);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, transform .15s var(--ease);
}

.profile__badges:hover {
    background: #fff;
    transform: translateY(-1px);
}

.badges__summary {
    margin: 0 0 4px;
    color: var(--text-muted);
}

.badges__summary strong {
    color: var(--text);
    font-size: 1.2rem;
}

.badges__heading {
    margin: 20px 0 12px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Vitrine : cartes verticales, icône « squircle » en dégradé. */
.trophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trophy-tile {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 4px;
    padding: 18px 12px 14px;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    text-align: center;
    transition: transform .2s var(--ease), box-shadow .2s;
}

.trophy-tile.is-earned {
    box-shadow: inset 0 0 0 1px var(--medal-ring);
}

.trophy-tile.is-earned:hover {
    transform: translateY(-3px);
}

.trophy-tile__medal {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin-bottom: 8px;
    border-radius: 22px;
    background: var(--medal-bg);
}

.trophy-tile__icon {
    position: relative;
    z-index: 1;
    font-size: 34px;
    line-height: 1;
}

/* À débloquer : icône éteinte, entourée d'un anneau de progression. */
.trophy-tile.is-locked .trophy-tile__medal {
    background: var(--surface-muted);
}

.trophy-tile.is-locked .trophy-tile__icon {
    filter: grayscale(1);
    opacity: .35;
}

.trophy-tile__medal.has-progress::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 26px;
    background: conic-gradient(var(--brand) var(--progress), var(--line) 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    padding: 3px;
}

.trophy-tile__name {
    font-size: 14px;
    line-height: 1.2;
}

.trophy-tile__desc {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.trophy-tile__chip {
    margin-top: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--medal-bg);
    color: var(--medal-ink);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.trophy-tile__count {
    margin-top: 6px;
    color: var(--brand-strong);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Médailles de la fenêtre « Nouveau badge ! » (même style que la vitrine). */
.badge-new__medal,
.badge-new__list li {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    border-radius: 22px;
    background: var(--medal-bg);
}

/* Fenêtre « Nouveau badge ! » */
.badge-new__body {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding-top: 30px;
    text-align: center;
}

.badge-new__medal {
    width: 96px;
    height: 96px;
    border-radius: 30px;
    margin-bottom: 8px;
    font-size: 48px;
    animation: badge-pop .7s cubic-bezier(.2, .9, .3, 1.4) both;
}

.badge-new__title {
    margin: 0;
    font-size: 1.4rem;
}

.badge-new__name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-strong);
}

.badge-new__text {
    margin: 0;
    color: var(--text-muted);
}

.badge-new__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.badge-new__list li {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 24px;
    animation: badge-pop .6s cubic-bezier(.2, .9, .3, 1.4) both;
}

.badge-new__list li:nth-child(2) { animation-delay: .06s; }
.badge-new__list li:nth-child(3) { animation-delay: .12s; }
.badge-new__list li:nth-child(4) { animation-delay: .18s; }
.badge-new__list li:nth-child(5) { animation-delay: .24s; }
.badge-new__list li:nth-child(6) { animation-delay: .3s; }
.badge-new__list li:nth-child(7) { animation-delay: .36s; }
.badge-new__list li:nth-child(8) { animation-delay: .42s; }

.badge-new__footer {
    justify-content: center;
}

@keyframes badge-pop {
    from {
        opacity: 0;
        transform: scale(.3) rotate(-30deg);
    }
}

/* Sous le nom : une seule barre (idées · badges · privée), au lieu de pastilles empilées. */
.profile__card .profile__meta {
    flex-wrap: nowrap;
    gap: 0;
    width: max-content;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
}

.profile__stat {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    padding: 4px 12px;
    color: inherit;
    font: inherit;
}

.profile__stat + .profile__stat {
    border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.profile__card .profile__badges {
    margin: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    background: none;
    font-size: 12px;
}

.profile__card .profile__badges:hover {
    background: rgb(255 255 255 / .7);
    transform: none;
}

.profile__card .profile__private {
    margin: 0;
}

/* Retirer de mes amis : icône discrète sur la photo, rouge au survol. */
.profile__action-form {
    display: contents;
}

.profile__unfriend {
    color: var(--text-muted);
}

.profile__unfriend:hover {
    color: var(--danger);
}

/* ---------- Habillages (lib/skins.php) : positions communes des décorations découpées ---------- */
/* Gauche : d1 (grand groupe), d3, d5 ; droite : d2, d4. Les couleurs viennent de l'attribut style de <body>. */

[data-skin] .hero__deco--left .deco:nth-child(1) { width: 250px; left: 0; bottom: 0; }
[data-skin] .hero__deco--left .deco:nth-child(2) { width: 100px; left: 150px; top: 0; }
[data-skin] .hero__deco--left .deco:nth-child(3) { width: 90px; left: 20px; top: 10px; }
[data-skin] .hero__deco--right .deco:nth-child(1) { width: 200px; right: 0; bottom: 10px; }
[data-skin] .hero__deco--right .deco:nth-child(2) { width: 120px; right: 170px; top: 0; }

[data-skin] .hero__deco .deco {
    max-height: 260px;
    object-fit: contain;
}

/* ---------- Gemmes et boutique (templates/partials/shop.php, lib/skins.php) ---------- */

.user-menu__gem {
    width: 1.1em;
    text-align: center;
}

.user-menu__count--gems {
    background: #e0f2fe;
    color: #0369a1;
}

.trophy-tile__gems {
    color: #0369a1;
    font-size: 11px;
    font-weight: 700;
}

.trophy-tile__gems.is-pending {
    color: var(--text-muted);
    opacity: .7;
}

.badge-new__gems {
    margin: 10px 0 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 800;
}

.badge-new__gems span {
    font-weight: 500;
}


/* Icône des gemmes (img/gem.png, gem_icon()) : à la taille du texte, plus grande dans le porte-monnaie. */
.gem {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -.2em;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgb(14 116 220 / .35));
}

.gem--lg {
    width: 1.6em;
    height: 1.6em;
    vertical-align: -.4em;
}

/* Sur un bouton coloré (« Acheter »), la gemme bleue se perd : petite pastille blanche derrière. */
.btn--primary .gem {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 3px;
    border-radius: 50%;
    background: #fff;
    filter: none;
    vertical-align: -.3em;
}

/* ---------- Pastille de gemmes (barre du haut) ---------- */

.gem-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 14px 0 8px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #1e3a8a, #6d28d9);
    color: #fff;
    font: inherit;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 6px 16px -6px rgb(76 29 149 / .6);
    cursor: pointer;
    transition: transform .15s var(--ease), box-shadow .15s;
}

.gem-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgb(76 29 149 / .7);
}

.gem-pill__icon.gem {
    width: 28px;
    height: 28px;
    vertical-align: 0;
    filter: drop-shadow(0 2px 6px rgb(56 189 248 / .7));
    animation: gem-float 3s ease-in-out infinite;
}

@keyframes gem-float {
    50% { transform: translateY(-2px) rotate(-6deg); }
}

/* ---------- Boutique ---------- */

.shop {
    width: min(980px, calc(100% - 32px));
    max-width: none;
    padding: 0;
    overflow: hidden;
}

.shop__hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px 24px;
    padding: 28px 32px 24px;
    background:
        radial-gradient(circle at 12% 20%, rgb(255 255 255 / .18) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 30%, rgb(255 255 255 / .25) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 40% 80%, rgb(255 255 255 / .2) 0 2px, transparent 3px),
        radial-gradient(circle at 88% 70%, rgb(255 255 255 / .2) 0 1.5px, transparent 2.5px),
        radial-gradient(120% 140% at 100% 0%, #7c3aed 0%, transparent 55%),
        linear-gradient(135deg, #172554, #1e3a8a 55%, #4c1d95);
    color: #fff;
}

.shop__close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgb(255 255 255 / .15);
    color: #fff;
}

.shop__close:hover {
    background: rgb(255 255 255 / .28);
}

.shop__intro h2 {
    margin: 0;
    font-size: 1.9rem;
    letter-spacing: -.01em;
}

.shop__intro p {
    margin: 4px 0 0;
    max-width: 440px;
    color: rgb(255 255 255 / .8);
}

.shop__wallet {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 36px;
    padding: 10px 18px 10px 12px;
    border-radius: 20px;
    background: rgb(255 255 255 / .12);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2);
    backdrop-filter: blur(6px);
}

.shop__wallet-gem.gem {
    width: 54px;
    height: 54px;
    vertical-align: 0;
    filter: drop-shadow(0 4px 12px rgb(56 189 248 / .8));
    animation: gem-float 3s ease-in-out infinite;
}

.shop__wallet-text {
    display: grid;
    line-height: 1;
}

.shop__wallet-text strong {
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
}

.shop__wallet-text span {
    color: rgb(255 255 255 / .75);
    font-size: 13px;
}

.shop__tabs {
    display: flex;
    gap: 6px;
    padding: 14px 32px 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}

.shop__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 10px 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.shop__tab span {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-muted);
    font-size: 11px;
}

.shop__tab[aria-pressed="true"] {
    border-bottom-color: #6d28d9;
    color: var(--text);
}

.shop__body {
    max-height: min(62vh, 760px);
    padding: 20px 32px 24px;
    overflow-y: auto;
}

.shop__note {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 13px;
}

.shop__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop__earn {
    margin: 22px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

/* Carte d'article : aperçu façon mini-liste (couleurs, confettis et titre de l'habillage). */
.shop-item {
    --rarity: #64748b;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line), 0 6px 18px -12px rgb(29 36 64 / .3);
    transition: transform .2s var(--ease), box-shadow .2s;
}

.shop-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px var(--line), 0 18px 34px -16px rgb(29 36 64 / .45);
}

.shop-item--rare { --rarity: #2563eb; }
.shop-item--epique { --rarity: #9333ea; }
.shop-item--heroique { --rarity: #d97706; }

.shop-item--epique {
    box-shadow: 0 0 0 1px rgb(147 51 234 / .35), 0 10px 26px -12px rgb(147 51 234 / .55);
}

/* Héroïque : bordure dégradée qui tourne lentement. */
.shop-item--heroique::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: 22px;
    background: conic-gradient(from var(--spin, 0deg), #f59e0b, #f472b6, #a78bfa, #38bdf8, #f59e0b);
    animation: shop-spin 6s linear infinite;
}

@property --spin {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes shop-spin {
    to { --spin: 360deg; }
}

.shop-item.is-worn {
    box-shadow: 0 0 0 3px var(--sk-brand, var(--brand)), 0 10px 26px -12px rgb(29 36 64 / .4);
}

.shop-item__preview {
    position: relative;
    display: grid;
    place-items: center;
    height: 150px;
    padding: 18px 16px 22px;
    border-radius: 20px 20px 0 0;
    background:
        radial-gradient(circle at 12% 22%, var(--sk-c1, #ffd36b) 0 4px, transparent 5px),
        radial-gradient(circle at 88% 30%, var(--sk-c2, #8fc1ff) 0 3px, transparent 4px),
        radial-gradient(circle at 20% 82%, var(--sk-c3, #ffb4c8) 0 3px, transparent 4px),
        radial-gradient(circle at 82% 78%, var(--sk-c1, #ffd36b) 0 3px, transparent 4px),
        linear-gradient(180deg, var(--sk-hero, #f4f6fb), var(--sk-page, #fff));
    overflow: hidden;
}

.shop-item__preview img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgb(0 0 0 / .12));
    transition: transform .3s var(--ease);
}

.shop-item:hover .shop-item__preview img {
    transform: scale(1.06) rotate(-1deg);
}

.shop-item__rarity {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--rarity);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: 0 4px 10px -4px var(--rarity);
}

.shop-item__owned {
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--success);
    font-size: 22px;
    filter: drop-shadow(0 2px 4px rgb(0 0 0 / .2));
}

/* Les trois couleurs de l'habillage, en bas de l'aperçu. */
.shop-item__swatch {
    position: absolute;
    bottom: 8px;
    left: 50%;
    display: flex;
    gap: 4px;
    translate: -50% 0;
}

.shop-item__swatch i {
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--sk-brand);
    box-shadow: 0 1px 3px rgb(0 0 0 / .2);
}

.shop-item__swatch i:nth-child(2) { background: var(--sk-c1); }
.shop-item__swatch i:nth-child(3) { background: var(--sk-c2); }

.shop-item__body {
    display: grid;
    align-content: start;
    gap: 3px;
    padding: 12px 16px 4px;
}

.shop-item__name {
    font-size: 16px;
}

.shop-item__desc {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.shop-item__action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 56px;
    padding: 8px 16px 14px;
}

.shop-item__buy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #1e3a8a, #6d28d9);
    color: #fff;
    font: inherit;
    font-weight: 800;
    box-shadow: 0 8px 18px -8px rgb(76 29 149 / .7);
    cursor: pointer;
    transition: transform .15s var(--ease), box-shadow .15s;
}

.shop-item__buy:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -10px rgb(76 29 149 / .8);
}

.shop-item__buy .gem {
    filter: drop-shadow(0 0 6px rgb(56 189 248 / .9));
}

.shop-item.is-affordable .shop-item__buy {
    animation: shop-glow 2.4s ease-in-out infinite;
}

@keyframes shop-glow {
    50% { box-shadow: 0 8px 22px -6px rgb(56 189 248 / .8); }
}

.shop-item__state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sk-brand, var(--brand-strong));
    font-size: 13px;
    font-weight: 800;
}

.shop-item__state--owned {
    color: var(--text-muted);
}

.shop-item__price {
    font-weight: 800;
}

.shop-item__price.is-short {
    color: var(--text-muted);
}

.shop-item__price.is-short .gem {
    filter: grayscale(.6);
    opacity: .7;
}

.shop-item__missing {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 600px) {
    .shop {
        width: 100%;
    }

    .shop__hero {
        grid-template-columns: 1fr;
        padding: 22px 18px 18px;
    }

    .shop__wallet {
        justify-self: start;
        margin-right: 0;
    }

    .shop__tabs {
        padding: 10px 12px 0;
    }

    .shop__body {
        max-height: 58vh;
        padding: 16px;
    }

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

    .shop-item__preview {
        height: 110px;
    }

    .shop-item__desc {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-item--heroique::before,
    .shop-item--legendaire::before,
    .shop-item--prestige::before,
    .gem-pill__icon.gem,
    .shop__wallet-gem.gem,
    .shop-item.is-affordable .shop-item__buy {
        animation: none;
    }
}

/* ---------- Aperçu d'un habillage (boutique) ---------- */

.shop-item__zoom {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    border: 0;
    background: rgb(15 23 42 / 0);
    cursor: zoom-in;
    transition: background-color .2s;
}

.shop-item__zoom-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgb(15 23 42 / .75);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s, transform .2s var(--ease);
}

.shop-item__zoom:hover,
.shop-item__zoom:focus-visible {
    background: rgb(15 23 42 / .12);
}

.shop-item__zoom:hover .shop-item__zoom-label,
.shop-item__zoom:focus-visible .shop-item__zoom-label {
    opacity: 1;
    transform: none;
}

/* Sur écran tactile, l'étiquette reste visible. */
@media (hover: none) {
    .shop-item__zoom-label {
        opacity: 1;
        transform: none;
        padding: 4px 10px;
        font-size: 11px;
    }

    .shop-item__zoom {
        place-items: end center;
        padding-bottom: 26px;
    }
}

.skin-preview {
    width: min(1040px, calc(100% - 24px));
    max-width: none;
    padding: 0;
    overflow: hidden;
}

.skin-preview__stage {
    position: relative;
    background: var(--page);
    color: var(--text);
}

.skin-preview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--hero-from);
}

.skin-preview__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    background: #fff;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.skin-preview__brand .icon {
    padding: 6px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    box-sizing: content-box;
}

.skin-preview__dots {
    display: flex;
    gap: 8px;
}

.skin-preview__dots i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.skin-preview__hero {
    display: grid;
    grid-template-columns: 1fr minmax(0, 420px) 1fr;
    align-items: center;
    gap: 12px;
    min-height: 290px;
    padding: 4px 20px 40px;
    background:
        radial-gradient(circle at 10% 25%, var(--confetti-1) 0 5px, transparent 6px),
        radial-gradient(circle at 90% 20%, var(--confetti-2) 0 6px, transparent 7px),
        radial-gradient(circle at 22% 85%, var(--confetti-3) 0 5px, transparent 6px),
        radial-gradient(circle at 78% 80%, var(--confetti-1) 0 4px, transparent 5px),
        radial-gradient(circle at 60% 10%, var(--confetti-3) 0 4px, transparent 5px),
        linear-gradient(180deg, var(--hero-from), var(--page));
}

.skin-preview__deco {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 220px;
}

.skin-preview__deco img {
    max-width: 48%;
    max-height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgb(0 0 0 / .12));
    animation: float 6s ease-in-out infinite;
}

.skin-preview__deco img:first-child {
    max-width: 90%;
    max-height: 170px;
}

.skin-preview__deco img:nth-child(2) { animation-delay: -2s; }
.skin-preview__deco img:nth-child(3) { animation-delay: -4s; }

.skin-preview__center {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
}

.skin-preview__title {
    width: 100%;
    max-height: 190px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgb(0 0 0 / .12));
}

.skin-preview__subtitle {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.skin-preview__countdown {
    display: flex;
    gap: 6px;
}

.skin-preview__countdown b {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff;
    font-size: 17px;
    box-shadow: var(--shadow-sm);
}

.skin-preview__countdown b:last-child {
    background: var(--brand);
    color: #fff;
}

.skin-preview__tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    margin: -22px auto 0;
    padding: 5px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow);
    position: relative;
}

.skin-preview__tabs span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.skin-preview__tabs .is-on {
    background: var(--brand);
    color: #fff;
}

.skin-preview__tabs .icon {
    color: var(--brand);
}

.skin-preview__tabs .is-on .icon {
    color: #fff;
}

.skin-preview__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 22px 24px 26px;
}

.skin-preview__cards i {
    height: 110px;
    border-radius: 18px;
    background:
        linear-gradient(var(--brand-soft), var(--brand-soft)) 14px 14px / 70px 18px no-repeat,
        linear-gradient(var(--line), var(--line)) 14px 76px / calc(100% - 112px) 10px no-repeat,
        linear-gradient(var(--brand), var(--brand)) right 14px bottom 14px / 70px 26px no-repeat,
        #fff;
    box-shadow: var(--shadow-sm);
}

.skin-preview__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.skin-preview__footer > div {
    display: grid;
    flex: 1;
}

.skin-preview__footer > div span {
    color: var(--text-muted);
    font-size: 13px;
}

.skin-preview__buy {
    width: auto;
    padding: 0 22px;
}

@media (max-width: 700px) {
    .skin-preview {
        width: 100%;
    }

    .skin-preview__hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding-bottom: 36px;
    }

    .skin-preview__deco {
        display: none;
    }

    .skin-preview__deco--left {
        display: flex;
        order: 2;
        min-height: 0;
    }

    .skin-preview__deco--left img {
        max-height: 90px !important;
        max-width: 30% !important;
    }

    .skin-preview__cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .skin-preview__cards i:nth-child(3) {
        display: none;
    }
}

.skin-preview__price {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Barre du haut sur mobile : l'essentiel seulement ---------- */
/* Restent : la liste, l'interrupteur « idées offertes », les gemmes, la cloche et le compte.
   Partager, paramètres et amis passent dans le menu du compte (.user-menu__mobile). */

.user-menu__mobile {
    display: none !important;
}

@media (max-width: 700px) {
    .topbar__share,
    .topbar__settings,
    .friends-shortcut {
        display: none !important;
    }

    .user-menu__mobile {
        display: flex !important;
    }

    .user-menu__group.user-menu__mobile {
        display: grid !important;
    }

    .topbar__actions {
        gap: 8px;
    }

    .user-menu summary {
        flex-direction: column;
        gap: 1px;
        padding: 4px 6px;
        border-radius: 18px;
    }

    .user-menu summary .user-menu__avatar {
        width: 36px;
        height: 36px;
        border-width: 2px;
    }

    .user-menu__label {
        gap: 4px;
        font-size: 11px;
    }

    /* Gemmes : bouton rond, le solde en pastille (comme la cloche). */
    .gem-pill {
        position: relative;
        flex: none;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
    }

    .gem-pill__icon.gem {
        width: 26px;
        height: 26px;
    }

    .gem-pill__value {
        position: absolute;
        top: -6px;
        right: -8px;
        min-width: 20px;
        padding: 1px 5px;
        border: 2px solid #fff;
        border-radius: 999px;
        background: #6d28d9;
        font-size: 10px;
        line-height: 14px;
        text-align: center;
    }
}

/* Onglets de la boutique sur mobile : sur deux lignes, tous visibles (pas de défilement caché). */
@media (max-width: 600px) {
    .shop__tabs {
        flex-wrap: wrap;
        gap: 2px 4px;
        overflow: visible;
    }

    .shop__tab {
        padding: 8px 8px;
        font-size: 14px;
    }

    .shop__tab span {
        font-size: 10px;
    }
}

.shop__earn p {
    margin: 0 0 10px;
}

.shop__rates {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop__rates li {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text);
    font-size: 12px;
}

.shop__rates b {
    color: #0369a1;
}

/* ---------- Vitrine des badges (refonte, même esprit que la boutique) ---------- */

.badges-dialog {
    width: min(980px, calc(100% - 32px));
    max-width: none;
    padding: 0;
    overflow: hidden;
}

.badges-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px 24px;
    padding: 28px 32px 24px;
    background:
        radial-gradient(circle at 10% 25%, rgb(255 255 255 / .2) 0 2px, transparent 3px),
        radial-gradient(circle at 65% 20%, rgb(255 255 255 / .25) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 38% 80%, rgb(255 255 255 / .2) 0 2px, transparent 3px),
        radial-gradient(120% 140% at 0% 0%, #f59e0b 0%, transparent 50%),
        linear-gradient(135deg, #7c2d12, #9a3412 30%, #6d28d9);
    color: #fff;
}

.badges-hero__close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgb(255 255 255 / .15);
    color: #fff;
}

.badges-hero__close:hover {
    background: rgb(255 255 255 / .28);
}

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

.badges-hero__avatar {
    flex: none;
    width: 58px;
    height: 58px;
    border: 3px solid rgb(255 255 255 / .8);
    border-radius: 50%;
    object-fit: cover;
}

.badges-hero__intro h2 {
    margin: 0;
    font-size: 1.8rem;
    letter-spacing: -.01em;
}

.badges-hero__intro p {
    margin: 2px 0 0;
    color: rgb(255 255 255 / .8);
}

.badges-hero__score {
    display: grid;
    justify-items: end;
    margin-right: 40px;
    line-height: 1;
}

.badges-hero__count strong {
    font-size: 2.6rem;
    font-variant-numeric: tabular-nums;
}

.badges-hero__count span {
    margin-left: 4px;
    color: rgb(255 255 255 / .7);
    font-size: 1.2rem;
    font-weight: 700;
}

.badges-hero__label {
    margin-top: 4px;
    color: rgb(255 255 255 / .75);
    font-size: 13px;
}

.badges-hero__progress {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px;
}

.badges-hero__bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgb(255 255 255 / .2);
    overflow: hidden;
}

.badges-hero__bar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--done);
    border-radius: inherit;
    background: linear-gradient(90deg, #fde68a, #f59e0b, #f472b6);
    box-shadow: 0 0 12px rgb(253 230 138 / .8);
}

.badges-hero__next {
    color: rgb(255 255 255 / .85);
    font-size: 13px;
}

.badges-hero__shop {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px 10px 10px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #1e3a8a, #6d28d9);
    color: #fff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    text-align: left;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25), 0 10px 24px -10px rgb(30 58 138 / .8);
    cursor: pointer;
    transition: transform .15s var(--ease), box-shadow .15s;
}

.badges-hero__shop:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 14px 28px -10px rgb(30 58 138 / .9);
}

.badges-hero__shop > span {
    display: grid;
    flex: 1;
}

.badges-hero__shop small {
    color: rgb(255 255 255 / .75);
    font-size: 12px;
    font-weight: 500;
}

.badges-hero__gem.gem {
    width: 44px;
    height: 44px;
    vertical-align: 0;
    filter: drop-shadow(0 3px 10px rgb(56 189 248 / .8));
    animation: gem-float 3s ease-in-out infinite;
}

.badges-tabs .shop__tab[aria-pressed="true"] {
    border-bottom-color: #ea580c;
}

.badges-body {
    max-height: min(58vh, 720px);
    padding: 20px 32px 26px;
    overflow-y: auto;
}

.badges-empty {
    margin: 30px 0;
    color: var(--text-muted);
    text-align: center;
}

/* Cartes : étiquette de niveau, pied (date ou progression + gemmes). */
.badges-dialog .trophy-grid {
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 14px;
}

.badges-dialog .trophy-tile {
    padding: 26px 12px 12px;
    border-radius: 20px;
}

.badges-dialog .trophy-tile.is-earned:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px var(--medal-ring), 0 16px 28px -16px rgb(29 36 64 / .4);
}

.badges-dialog .trophy-tile.is-trophy.is-earned {
    background: linear-gradient(180deg, var(--medal-bg), #fff 55%);
}

.trophy-tile__tier {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--medal-bg);
    color: var(--medal-ink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.trophy-tile.is-locked .trophy-tile__tier {
    background: var(--surface-muted);
    color: var(--text-muted);
}

.trophy-tile__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    margin-top: 6px;
}

.trophy-tile__foot .trophy-tile__count,
.trophy-tile__foot .trophy-tile__gems {
    margin: 0;
}

.trophy-tile__date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--success);
    font-size: 11px;
    font-weight: 700;
}

.trophy-tile__foot .trophy-tile__gems {
    padding: 1px 8px;
    border-radius: 999px;
    background: #e0f2fe;
}

.trophy-tile__foot .trophy-tile__gems.is-pending {
    background: var(--surface-muted);
}

@media (max-width: 600px) {
    .badges-dialog {
        width: 100%;
    }

    .badges-hero {
        grid-template-columns: 1fr auto;
        padding: 22px 18px 18px;
    }

    .badges-hero__intro p {
        display: none;
    }

    .badges-hero__intro h2 {
        font-size: 1.4rem;
    }

    .badges-hero__avatar {
        width: 44px;
        height: 44px;
    }

    .badges-hero__score {
        margin-right: 36px;
    }

    .badges-hero__count strong {
        font-size: 2rem;
    }

    .badges-body {
        max-height: 56vh;
        padding: 16px;
    }

    .badges-dialog .trophy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .badges-dialog .trophy-tile__desc {
        font-size: 11px;
    }
}

/* ---------- Choix de l'habillage (Paramètres de la liste) : carrousel horizontal ---------- */

.skin-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.skin-field legend {
    margin-bottom: 6px;
    padding: 0;
}

.skin-field__track {
    display: flex;
    gap: 10px;
    margin: 0 -4px;
    padding: 4px 4px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.skin-field__option,
.skin-field__shop {
    --ring: var(--brand);
    position: relative;
    display: grid;
    flex: none;
    grid-template-rows: 78px auto;
    width: 132px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    cursor: pointer;
    overflow: hidden;
    scroll-snap-align: start;
    transition: transform .2s var(--ease), box-shadow .15s;
}

.skin-field__option[hidden] {
    display: none;
}

/* Contour au-dessus de l'aperçu : une ombre « inset » sur la carte serait masquée par son fond. */
.skin-field__option::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--line);
    pointer-events: none;
}

.skin-field__option:hover,
.skin-field__shop:hover {
    transform: translateY(-2px);
}

.skin-field__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.skin-field__preview {
    display: grid;
    place-items: center;
    padding: 8px;
    background: var(--preview-bg, var(--surface-muted));
}

.skin-field__preview img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.skin-field__name {
    padding: 6px 8px 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.skin-field__option:has(input:checked) {
    box-shadow: 0 6px 16px -6px var(--ring);
}

.skin-field__option:has(input:checked)::before {
    box-shadow: inset 0 0 0 2px var(--ring);
}

.skin-field__option:has(input:checked)::after {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ring);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.skin-field__option:has(input:focus-visible) {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.skin-field__shop {
    place-items: center;
    align-content: center;
    gap: 6px;
    border: 0;
    background: linear-gradient(135deg, #1e3a8a, #6d28d9);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    grid-template-rows: none;
    min-height: 110px;
}

.skin-field__gem.gem {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 2px 8px rgb(56 189 248 / .8));
}

/* Cadre (« Mon profil ») et compte à rebours (« Paramètres de la liste ») : le vrai rendu, réduit dans la carte. */
.accessory-field .skin-field__option {
    grid-template-rows: 96px auto;
}

.accessory-field__preview {
    position: relative;
    overflow: hidden;
}

.accessory-field .accessory-field__preview > * {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--zoom, .6));
}

.accessory-field--frame .accessory-field__preview > * { --zoom: .55; }
.accessory-field--countdown .accessory-field__preview > * { --zoom: .62; }

.accessory-field .frame-host__img {
    width: 84px;
    height: 84px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
}

.accessory-field .frame-host--img .frame-host__img {
    border-color: transparent;
    background: transparent;
}

/* ---------- Animation des gains et dépenses de gemmes (js/app.js : showGems) ---------- */

.gem-pill.is-gaining {
    animation: gem-gain-pop .7s cubic-bezier(.2, .9, .3, 1.4);
}

@keyframes gem-gain-pop {
    30% { transform: scale(1.25) rotate(-6deg); box-shadow: 0 0 0 6px rgb(56 189 248 / .35), 0 0 24px rgb(56 189 248 / .8); }
    60% { transform: scale(.95) rotate(3deg); }
}

.gem-pill.is-losing {
    animation: gem-loss-pop .7s ease-in-out;
}

@keyframes gem-loss-pop {
    30% { transform: scale(.88) translateY(2px); opacity: .75; }
    65% { transform: scale(1.03); }
}

.gem-gain {
    position: fixed;
    z-index: 1002;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1e3a8a, #6d28d9);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 8px 20px -6px rgb(76 29 149 / .7);
    pointer-events: none;
}

.gem-gain img {
    width: 18px;
    height: 18px;
}

.gem-loss {
    background: var(--surface);
    color: var(--danger);
    box-shadow: var(--shadow-sm);
}

.gem-spark {
    position: fixed;
    z-index: 1002;
    width: 16px;
    height: 16px;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgb(56 189 248 / .9));
}

.gem-spark--leaving {
    filter: drop-shadow(0 0 3px rgb(56 189 248 / .45));
}

/* Pied de vignette : une seule ligne d'actions (commentaires, boutique, réactions, puis « Je l'offre » et « ⋯ »
   à droite). Boutons un peu plus compacts pour que tout tienne, les libellés longs sont coupés (…). */
.card__actions {
    flex-wrap: nowrap;
    gap: 6px;
}

.card__actions > .round-btn,
.card__actions .reactions .round-btn,
.card__actions .card-menu .round-btn {
    flex: none;
    width: 40px;
    height: 40px;
}

.card__actions .reactions {
    flex: none;
}

.card__actions .card__cta {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    gap: 6px;
}

.card__actions .gift-slot {
    min-width: 0;
}

.card__actions .gift-btn {
    min-height: 40px;
    padding: 0 14px;
    white-space: nowrap;
}

.card__actions .gift-btn__chevron {
    display: none;
}

.card__actions .gifted-pill,
.card__actions .collection-pill {
    max-width: 100%;
    min-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vignette étroite : « Je l'offre » se réduit à son icône pour que la ligne d'actions tienne. */
.card {
    container-type: inline-size;
}

@container (max-width: 340px) {
    .card__actions .gift-btn {
        width: 44px;
        padding: 0;
    }

    .card__actions .gift-btn__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
}

/* Couche d'animation des gemmes (popover : au-dessus des fenêtres ouvertes et de leur fond flouté). */
.gem-layer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    pointer-events: none;
}

.gem-layer::backdrop {
    display: none;
}

.gem-layer .gem-gain,
.gem-layer .gem-spark,
.gem-pill--copy {
    position: fixed;
}

.gem-pill--copy {
    z-index: 1;
    margin: 0;
    pointer-events: none;
}

/* Rareté « Prestige » (habillage Or) : étiquette dorée et bordure or qui scintille. */
.shop-item--prestige {
    --rarity: #b8860b;
}

.shop-item--prestige .shop-item__rarity {
    background: linear-gradient(135deg, #f5d77a, #b8860b 60%, #f5d77a);
    color: #3b2a05;
}

.shop-item--prestige::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: 22px;
    background: conic-gradient(from var(--spin, 0deg), #b8860b, #fff3c4, #d4af37, #8a6312, #fff3c4, #b8860b);
    animation: shop-spin 5s linear infinite;
}

.shop-item--prestige .shop-item__buy {
    background: linear-gradient(135deg, #8a6312, #d4af37);
    color: #2b1d02;
}

/* Légendaire (habillage Diamant, le plus rare) : étiquette irisée, bordure arc-en-ciel et éclats qui scintillent. */
.shop-item--legendaire {
    --rarity: #7c3aed;
    box-shadow: 0 0 0 1px rgb(124 58 237 / .3), 0 14px 34px -12px rgb(124 58 237 / .6);
}

.shop-item--legendaire .shop-item__rarity {
    background: linear-gradient(110deg, #f9a8d4, #c4b5fd, #a5f3fc, #fde68a, #f9a8d4);
    background-size: 200% 100%;
    color: #3b0764;
    animation: shop-iridescent 3s linear infinite;
}

.shop-item--legendaire::before {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: -1;
    border-radius: 23px;
    background: conic-gradient(from var(--spin, 0deg), #f9a8d4, #c4b5fd, #a5f3fc, #fde68a, #f9a8d4);
    animation: shop-spin 4s linear infinite;
}

.shop-item--legendaire .shop-item__preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 30%, #fff 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 80% 22%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 70% 78%, #fff 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 30% 75%, #fff 0 1px, transparent 2px);
    animation: shop-twinkle 2.2s ease-in-out infinite;
    pointer-events: none;
}

.shop-item--legendaire .shop-item__buy {
    background: linear-gradient(110deg, #7c3aed, #db2777, #7c3aed);
    background-size: 200% 100%;
    animation: shop-iridescent 4s linear infinite;
}

@keyframes shop-iridescent {
    to { background-position: -200% 0; }
}

@keyframes shop-twinkle {
    50% { opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
    .shop-item--legendaire .shop-item__rarity,
    .shop-item--legendaire .shop-item__preview::after,
    .shop-item--legendaire .shop-item__buy {
        animation: none;
    }
}

/* ---------- Parrainage (boutique) ---------- */

.referral {
    display: grid;
    gap: 10px;
    margin: 22px 0 0;
    padding: 16px 18px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 20%, rgb(255 255 255 / .5) 0 2px, transparent 3px),
        linear-gradient(135deg, #ecfdf5, #e0f2fe);
    box-shadow: inset 0 0 0 1px rgb(16 185 129 / .25);
}

.referral__intro {
    display: grid;
    gap: 2px;
}

.referral__intro span,
.referral__stats {
    color: var(--text-muted);
    font-size: 13px;
}

.referral__code {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.referral__value {
    padding: 6px 16px;
    border: 2px dashed #10b981;
    border-radius: 12px;
    background: #fff;
    color: #047857;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: .18em;
    font-variant-numeric: tabular-nums;
}

/* Mobile : la carte de la liste (en haut à gauche) ouvre « Mes amis » ; petit chevron pour le signaler. */
@media (max-width: 700px) {
    .topbar__brand[data-mobile-friends] {
        position: relative;
        padding-right: 30px;
    }

    .topbar__brand[data-mobile-friends]::after {
        content: "";
        position: absolute;
        right: 12px;
        top: 50%;
        width: 7px;
        height: 7px;
        border-right: 2px solid var(--brand);
        border-bottom: 2px solid var(--brand);
        transform: translateY(-70%) rotate(45deg);
    }
}

/* Carte de la liste sur mobile : le chevron « amis » prend la place, le J-xx passe en pastille sur la photo
   (comme sur les petits écrans) pour ne pas écraser le nom ni la photo. */
@media (max-width: 700px) {
    .topbar__brand[data-mobile-friends] {
        flex-shrink: 1;
        min-width: 0;
    }

    body .topbar__brand[data-mobile-friends] .topbar__owner ~ .topbar__days {
        position: absolute;
        left: 0;
        bottom: -4px;
        margin: 0;
        padding: 1px 5px;
        border: 2px solid #fff;
        font-size: 9px;
        line-height: 1.3;
    }

    .topbar__brand[data-mobile-friends] .topbar__owner-avatar {
        flex: none;
    }
}

/* ---------- Idées suggérées par les amis (jamais visibles du propriétaire) ---------- */

.card__badge.card__badge--suggestion {
    background: #f6b100;
    color: #3d2a00;
    box-shadow: 0 4px 12px rgb(246 177 0 / .35);
}

/* Avatar de l'auteur, avec une petite ampoule en pastille. */
.card__badge--suggestion {
    padding-left: 4px;
}

.suggester {
    position: relative;
    flex: none;
    display: inline-grid;
}

.suggester__avatar {
    width: 26px;
    height: 26px;
    border: 2px solid #fff;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

.suggester svg.suggester__bulb {
    position: absolute;
    right: -4px;
    bottom: -3px;
    width: 14px;
    height: 14px;
    padding: 2px;
    border-radius: 50%;
    background: #3d2a00;
    color: #f6b100;
    margin: 0;
}

.detail__suggestion {
    align-items: center;
}

.detail__suggestion .suggester__avatar {
    width: 36px;
    height: 36px;
}

.card--suggestion {
    outline: 2px dashed rgb(246 177 0 / .55);
    outline-offset: -2px;
}

.card--suggest .card--add__icon {
    background: #f6b100;
    color: #3d2a00;
    box-shadow: 0 10px 24px rgb(246 177 0 / .35);
}

.card--suggest:hover .card--add__icon {
    transform: rotate(-12deg) scale(1.08);
}

.card--suggest span:last-child {
    max-width: 240px;
    padding: 0 16px;
    text-align: center;
}

.detail__suggestion,
.form__notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgb(246 177 0 / .14);
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
}

.detail__suggestion .icon,
.form__notice .icon {
    flex: none;
    margin-top: 2px;
    color: #c98f00;
}

/* ---------- Cadres de photo (boutique, lib/skins.php : frames()) ----------
 * Style épuré : lumière, dégradés et matières, sans ornement. La rareté se lit à la matière et au mouvement :
 *   commun     anneau net et immobile (Trait, Duo) ;
 *   rare       un mouvement lent (point de lumière en orbite, étincelles, reflet) ;
 *   épique     anneau lumineux animé et halo diffus derrière la photo (Aurore, Néon) ;
 *   héroïque   matière (verre, métal en fusion) traversée par un reflet, lueur, étincelles ;
 *   prestige   or brossé, filets fins, éclat qui passe, rayonnement doux ;
 *   légendaire holographique : couleurs changeantes, traînée de lumière, trois éclats en orbite, aura.
 * Les effets restent à moins de 0,6 em de la photo (pas de coupure dans l'aperçu de la boutique).
 * .frame__orbit i : un point de lumière qui fait le tour (chacun à sa vitesse), posé sur l'anneau.
 * .mini-frame : le même cadre, réduit, sur les petites photos (avatar() : amis, notifications, commentaires…).
 */
.has-frame > img,
.frame-host > img {
    position: relative;
    z-index: 1;
}

.profile__avatar.has-frame {
    z-index: 3;
}

/* Petites photos (avatar()) : l'enveloppe prend la classe de la photo (taille, bordure, place dans la grille),
 * la photo la remplit et le cadre est mis à l'échelle (em en cqw : 20 % de la largeur, comme sur sa liste). */
.mini-frame {
    position: relative;
    display: inline-block;
    flex: none;
    vertical-align: middle;
    isolation: isolate;
    container-type: inline-size;
}

.mini-frame > .mini-frame__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.mini-frame .frame,
.mini-frame .frame-back {
    inset: -8%;
    font-size: 20cqw;
}

.mini-frame .frame.frame--img {
    inset: -34%;
}

.mini-frame .frame-back.frame-back--img {
    inset: -30%;
}

.mini-frame.mini-frame--img {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

/* Avec un cadre, le prénom reste par-dessus le bas du cadre et de ses effets. */
.profile__avatar.has-frame + .profile__card {
    z-index: 4;
}

.frame,
.frame-back {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    font-size: 18px;
    pointer-events: none;
}

.frame {
    --ring: var(--brand);
    --ring-w: .16em;
    z-index: 2;
}

.frame-back {
    z-index: 0;
}

.profile__avatar .frame,
.profile__avatar .frame-back {
    inset: -10px;
    font-size: 26px;
}

.frame__ring {
    position: absolute;
    inset: 0;
    padding: var(--ring-w);
    border-radius: 50%;
    background: var(--ring);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Reflet qui fait le tour, limité à l'anneau par son masque. */
.frame__ring::after {
    content: "";
    position: absolute;
    inset: 0;
    display: none;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 78%, rgb(255 255 255 / .95) 88%, transparent 97%);
    animation: frame-spin var(--sweep-t, 4s) linear infinite;
}

.frame__orbit {
    position: absolute;
    inset: calc(var(--ring-w) / 2);
}

.frame__orbit i {
    position: absolute;
    inset: var(--o-inset, 0);
    display: none;
    border-radius: 50%;
    animation: frame-spin var(--o-t, 4s) linear var(--o-delay, 0s) infinite;
}

.frame__orbit i::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--dot, .2em);
    height: var(--dot, .2em);
    border-radius: 50%;
    background: var(--dot-color, #fff);
    box-shadow: 0 0 .25em .06em var(--dot-glow, #fff), 0 0 .6em .1em var(--dot-glow, #fff);
    transform: translate(-50%, -50%);
}

@keyframes frame-spin {
    to { transform: rotate(360deg); }
}

@keyframes frame-breathe {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@keyframes frame-hue {
    to { filter: hue-rotate(360deg); }
}

.frame-host {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 84px;
    height: 84px;
}

.shop-item__preview .frame-host__img {
    width: 84px;
    height: 84px;
    min-height: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    box-shadow: 0 6px 16px rgb(15 23 42 / .14);
    filter: none;
}

.shop-item:hover .shop-item__preview .frame-host__img {
    transform: none;
}

/* ===== Commun ===== */

.frame--trait {
    --ring-w: .12em;
}

.frame--duo {
    --ring: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 25%, #fbcfe8));
    --ring-w: .17em;
}

/* ===== Rare ===== */



.frame--orbite {
    --ring: color-mix(in srgb, var(--brand) 35%, transparent);
    --ring-w: .1em;
    --dot: .26em;
    --dot-color: #fff;
    --dot-glow: var(--brand);
}

.frame--orbite .frame__orbit i:nth-child(1) {
    display: block;
    --o-t: 3.5s;
}

/* ===== Épique ===== */

.frame--aurore {
    --ring: conic-gradient(#22d3ee, #6366f1, #ec4899, #f59e0b, #22d3ee);
    --ring-w: .2em;
}

.frame--aurore .frame__ring {
    animation: frame-spin 6s linear infinite;
}

.frame-back--aurore {
    inset: -6px;
    background: conic-gradient(#22d3ee, #6366f1, #ec4899, #f59e0b, #22d3ee);
    filter: blur(9px);
    opacity: .6;
    animation: frame-spin 6s linear infinite;
}

.frame--neon {
    --ring: transparent;
}

.frame--neon .frame__ring {
    border: .07em solid #cffafe;
    background: none;
    -webkit-mask: none;
    mask: none;
    box-shadow: 0 0 .12em #22d3ee, 0 0 .4em #22d3ee, inset 0 0 .25em rgb(34 211 238 / .7);
    animation: frame-breathe 2.6s ease-in-out infinite;
}

.frame--neon .frame__ring::before {
    content: "";
    position: absolute;
    inset: .17em;
    border: .06em solid #fae8ff;
    border-radius: 50%;
    box-shadow: 0 0 .12em #d946ef, 0 0 .4em #d946ef, inset 0 0 .2em rgb(217 70 239 / .6);
    animation: frame-breathe 2.6s ease-in-out -1.3s infinite;
}

/* ===== Héroïque ===== */

.frame--cristal {
    --ring: linear-gradient(145deg, rgb(255 255 255 / .95), rgb(186 230 253 / .75) 35%, rgb(255 255 255 / .55) 55%, rgb(125 211 252 / .85));
    --ring-w: .24em;
    --sweep-t: 3.2s;
    --dot: .14em;
    --dot-glow: #7dd3fc;
}

.frame--cristal .frame__ring {
    box-shadow: inset 0 0 0 .03em rgb(255 255 255 / .9);
    filter: drop-shadow(0 0 .25em rgb(125 211 252 / .8));
}

.frame--cristal .frame__ring::after { display: block; }
.frame--cristal .frame__orbit i:nth-child(1) { display: block; --o-t: 5s; }
.frame--cristal .frame__orbit i:nth-child(2) { display: block; --o-t: 7s; --o-delay: -3s; --o-inset: -.18em; }

.frame-back--cristal {
    inset: -4px;
    background: radial-gradient(circle, transparent 58%, rgb(125 211 252 / .55) 66%, transparent 72%);
    animation: frame-breathe 3s ease-in-out infinite;
}

.frame--braise {
    --ring: conic-gradient(#451a03, #c2410c, #f97316, #fde047, #f97316, #c2410c, #451a03);
    --ring-w: .24em;
    --dot: .12em;
    --dot-color: #fef3c7;
    --dot-glow: #f97316;
}

.frame--braise .frame__ring {
    filter: drop-shadow(0 0 .2em rgb(249 115 22 / .8));
    animation: frame-spin 3s linear infinite;
}

.frame--braise .frame__orbit i:nth-child(1) { display: block; --o-t: 2.2s; --o-inset: -.2em; }
.frame--braise .frame__orbit i:nth-child(2) { display: block; --o-t: 3.1s; --o-delay: -1s; --o-inset: -.32em; }
.frame--braise .frame__orbit i:nth-child(3) { display: block; --o-t: 4.3s; --o-delay: -2.4s; --o-inset: -.12em; }

.frame-back--braise {
    inset: -6px;
    background: radial-gradient(circle, rgb(251 146 60 / .55) 55%, rgb(220 38 38 / .25) 64%, transparent 72%);
    filter: blur(4px);
    animation: frame-breathe 1.6s ease-in-out infinite;
}

/* ===== Prestige ===== */

.frame--or {
    --ring: conic-gradient(#fef3c7, #d4a017, #fff7d6, #a16207, #fde68a, #b45309, #fef3c7, #ca8a04, #fef3c7);
    --ring-w: .26em;
    --sweep-t: 5s;
}

/* Filets fins à l'intérieur et à l'extérieur de l'or. */
.frame--or .frame__ring {
    box-shadow: inset 0 0 0 .03em rgb(120 53 15 / .55), inset 0 0 0 .08em rgb(255 251 235 / .7);
    filter: drop-shadow(0 .06em .15em rgb(161 98 7 / .45));
}

.frame--or .frame__ring::after { display: block; }

.frame--or::after {
    content: "";
    position: absolute;
    inset: -.14em;
    border: .03em solid rgb(202 138 4 / .7);
    border-radius: 50%;
}

.frame-back--or {
    inset: -8px;
    background: radial-gradient(circle, transparent 54%, rgb(250 204 21 / .45) 62%, transparent 72%);
    animation: frame-breathe 4s ease-in-out infinite;
}

/* ===== Légendaire ===== */

.frame--prisme {
    --ring: conic-gradient(#a5f3fc, #c4b5fd, #f9a8d4, #fde68a, #86efac, #a5f3fc);
    --ring-w: .26em;
    --sweep-t: 2.6s;
    --dot: .16em;
    --dot-glow: #c4b5fd;
}

.frame--prisme .frame__ring {
    box-shadow: inset 0 0 .2em rgb(255 255 255 / .9);
    animation: frame-spin 8s linear infinite, frame-hue 6s linear infinite;
}

.frame--prisme .frame__ring::after { display: block; }
.frame--prisme .frame__orbit i:nth-child(1) { display: block; --o-t: 3s; --o-inset: -.3em; }
.frame--prisme .frame__orbit i:nth-child(2) { display: block; --o-t: 4.5s; --o-delay: -1.5s; --o-inset: -.3em; --dot: .1em; }
.frame--prisme .frame__orbit i:nth-child(3) { display: block; --o-t: 6s; --o-delay: -4s; --o-inset: -.3em; --dot: .12em; }

/* Traînée de lumière qui tourne juste derrière l'anneau, et aura irisée. */
.frame-back--prisme {
    inset: -10px;
    background:
        conic-gradient(from 0deg, transparent 0 62%, rgb(165 243 252 / .2) 70%, rgb(196 181 253 / .85) 92%, #fff 100%),
        radial-gradient(circle, transparent 56%, rgb(249 168 212 / .45) 64%, transparent 72%);
    -webkit-mask: radial-gradient(circle, transparent 55%, #000 58%, #000 68%, transparent 72%);
    mask: radial-gradient(circle, transparent 55%, #000 58%, #000 68%, transparent 72%);
    animation: frame-spin 2.4s linear infinite;
}


/* ---------- Cadres illustrés (frames() avec 'image', img/frames/<clé>.webp) ----------
 * L'image déborde de 30 px autour de la photo (45 px sur sa liste, 34 % sur les petites photos) : son trou faisant 46 % de sa largeur (docker/cut-frames.py),
 * l'anneau recouvre le bord de la photo.
 * Couches : .frame-back (halo derrière la photo), .frame__img, .frame__glint (reflet qui passe, masqué par
 * l'image elle-même, posée en style inline par frame_html()) et .frame__sparks i (étincelles posées sur l'anneau).
 * Rareté : commun immobile ; rare un détail qui bouge ; épique un halo qui respire ; héroïque une lueur forte
 * qui pulse ; prestige un éclat d'or ; légendaire tout à la fois, aux couleurs changeantes.
 */
.frame.frame--img {
    inset: -30px;
    border-radius: 0;
}

/* Sur sa liste, le cadre déborde davantage (45 px pour une photo de 132 px, soit 34 %). */
.profile__avatar .frame.frame--img {
    inset: -45px;
}

.frame__img {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgb(15 23 42 / .25));
    /* Le masque s'applique après le filtre : la lueur ne déborde pas dans le trou, sur la photo. --hole : là où
     * commencent les ornements qui rentrent dans le trou (coffre du pirate, cristaux du diamant), en % du rayon. */
    -webkit-mask: radial-gradient(circle closest-side, transparent var(--hole, 34%), #000 calc(var(--hole, 34%) + 6%));
    mask: radial-gradient(circle closest-side, transparent var(--hole, 34%), #000 calc(var(--hole, 34%) + 6%));
}

.frame__glint,
.frame__sparks {
    position: absolute;
    inset: 0;
}

.frame__glint {
    display: none;
    background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .85) 48%, rgb(255 255 255 / .15) 54%, transparent 62%) no-repeat;
    background-size: 300% 100%;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mix-blend-mode: soft-light;
    animation: frame-glint var(--glint-t, 4s) ease-in-out infinite;
}

/* Étincelles : une étoile à quatre branches, sur l'anneau (à 37 % du centre). */
.frame__sparks i {
    position: absolute;
    display: none;
    width: 7%;
    aspect-ratio: 1;
    background: var(--spark, #fff);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    filter: drop-shadow(0 0 3px var(--spark-glow, #fff));
    transform: translate(-50%, -50%) scale(0);
    animation: frame-twinkle var(--spark-t, 2.4s) ease-in-out infinite;
}

.frame__sparks i:nth-child(1) { top: 16%; left: 66%; }
.frame__sparks i:nth-child(2) { top: 64%; left: 86%; animation-delay: -.6s; }
.frame__sparks i:nth-child(3) { top: 82%; left: 34%; animation-delay: -1.2s; }
.frame__sparks i:nth-child(4) { top: 30%; left: 15%; animation-delay: -1.8s; }

.frame-back.frame-back--img {
    inset: -30%;
}

@keyframes frame-glint {
    0% { background-position: 120% 0; }
    55%, 100% { background-position: -20% 0; }
}

@keyframes frame-twinkle {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0deg); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); }
}

@keyframes frame-glow {
    0%, 100% { filter: drop-shadow(0 0 2px var(--glow)) drop-shadow(0 0 6px var(--glow)); }
    50% { filter: drop-shadow(0 0 4px var(--glow)) drop-shadow(0 0 9px var(--glow)); }
}

@keyframes frame-flicker {
    0%, 18%, 22%, 62%, 64%, 100% { filter: drop-shadow(0 0 4px #f0abfc) drop-shadow(0 0 12px #22d3ee); }
    20%, 63% { filter: drop-shadow(0 0 1px #f0abfc) brightness(.8); }
}

@keyframes frame-heartbeat {
    0%, 40%, 100% { transform: scale(1); }
    10%, 26% { transform: scale(1.035); }
    18% { transform: scale(1.01); }
}

@keyframes frame-day-night {
    0%, 100% { filter: drop-shadow(0 0 4px #fde047) drop-shadow(0 0 9px rgb(251 191 36 / .7)); }
    50% { filter: drop-shadow(0 0 4px #bfdbfe) drop-shadow(0 0 9px rgb(96 165 250 / .7)); }
}

@keyframes frame-ooze {
    0%, 100% { filter: drop-shadow(0 0 3px #a3e635) drop-shadow(0 0 8px rgb(132 204 22 / .6)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 6px #bef264) drop-shadow(0 0 11px rgb(132 204 22 / .8)); transform: scale(1.015, .99); }
}

@keyframes frame-halo {
    0%, 100% { opacity: .45; transform: scale(.94); }
    50% { opacity: .9; transform: scale(1.04); }
}

/* Halo derrière la photo (épique et plus) : un disque flou de la couleur du cadre. */
.frame-back--img {
    border-radius: 50%;
    background: radial-gradient(circle, transparent 30%, var(--halo, transparent) 48%, transparent 70%);
    filter: blur(6px);
    animation: frame-halo 3.2s ease-in-out infinite;
}

/* ===== Commun : Cerisier, Champêtre (immobiles) ===== */

.frame--pirate { --hole: 22%; }
.frame--diamant { --hole: 25%; }

/* ===== Rare : un détail qui bouge ===== */

.frame--pirate .frame__sparks i:nth-child(2) { display: block; top: 77%; left: 71%; --spark: #fef3c7; --spark-glow: #f59e0b; }

.frame--farwest .frame__glint { display: block; --glint-t: 5s; }

.frame--etoiles .frame__sparks i:nth-child(odd) { display: block; --spark: #fff; --spark-glow: #93c5fd; --spark-t: 2.8s; }

.frame--lavande .frame__sparks i:nth-child(-n+2) { display: block; --spark: #f5f3ff; --spark-glow: #a855f7; --spark-t: 3s; }

.frame--romance .frame__img { animation: frame-heartbeat 1.8s ease-in-out infinite; }

/* ===== Épique : un halo qui respire ===== */

.frame--steampunk { --glow: rgb(251 146 60 / .75); }
.frame--steampunk .frame__img { animation: frame-glow 3s ease-in-out infinite; }
.frame--steampunk .frame__sparks i:nth-child(-n+2) { display: block; --spark: #fed7aa; --spark-glow: #f97316; --spark-t: 1.8s; }
.frame-back--steampunk { --halo: rgb(251 146 60 / .55); }

.frame--cosmos { --glow: rgb(167 139 250 / .8); }
.frame--cosmos .frame__img { animation: frame-glow 3.4s ease-in-out infinite; }
.frame--cosmos .frame__sparks i { display: block; --spark: #fef9c3; --spark-glow: #c4b5fd; }
.frame-back--cosmos { --halo: rgb(129 140 248 / .55); }

.frame--soleil-lune .frame__img { animation: frame-day-night 6s ease-in-out infinite; }
.frame--soleil-lune .frame__sparks i { display: block; --spark: #fef3c7; --spark-glow: #fbbf24; --spark-t: 3s; }
.frame-back--soleil-lune { --halo: rgb(250 204 21 / .45); animation-duration: 6s; }

/* ===== Héroïque : une lueur forte qui pulse ===== */

.frame--neon-retro .frame__img { animation: frame-flicker 4.5s linear infinite; }
.frame--neon-retro .frame__sparks i:nth-child(even) { display: block; --spark: #fdf4ff; --spark-glow: #e879f9; --spark-t: 1.6s; }
.frame-back--neon-retro { --halo: rgb(217 70 239 / .6); animation-duration: 2.2s; }

.frame--zombie .frame__img { animation: frame-ooze 2.4s ease-in-out infinite; }
.frame-back--zombie { --halo: rgb(132 204 22 / .65); animation-duration: 2.4s; }

/* ===== Prestige ===== */

.frame--royal { --glow: rgb(250 204 21 / .7); }
.frame--royal .frame__img { animation: frame-glow 3s ease-in-out infinite; }
.frame--royal .frame__glint { display: block; --glint-t: 3.5s; mix-blend-mode: normal; opacity: .7; }
.frame--royal .frame__sparks i { display: block; --spark: #fffbeb; --spark-glow: #facc15; }
.frame-back--royal { --halo: rgb(250 204 21 / .55); }

/* ===== Légendaire ===== */

.frame--diamant { --glow: rgb(165 243 252 / .9); }
.frame--diamant .frame__img { animation: frame-diamond 6s linear infinite; }
.frame--diamant .frame__glint { display: block; --glint-t: 3s; mix-blend-mode: normal; opacity: .8; }
.frame--diamant .frame__sparks i { display: block; --spark: #fff; --spark-glow: #a5f3fc; --spark-t: 1.8s; }
.frame-back--diamant {
    --halo: rgb(196 181 253 / .7);
    background: conic-gradient(from 0deg, #a5f3fc, #f9a8d4, #fde68a, #86efac, #c4b5fd, #a5f3fc);
    -webkit-mask: radial-gradient(circle, transparent 32%, #000 42%, transparent 62%);
    mask: radial-gradient(circle, transparent 32%, #000 42%, transparent 62%);
    filter: blur(8px);
    animation: frame-spin 6s linear infinite;
}

@keyframes frame-diamond {
    0%, 100% { filter: drop-shadow(0 0 4px #a5f3fc) drop-shadow(0 0 9px rgb(196 181 253 / .9)); }
    33% { filter: drop-shadow(0 0 4px #f9a8d4) drop-shadow(0 0 9px rgb(253 230 138 / .9)); }
    66% { filter: drop-shadow(0 0 4px #86efac) drop-shadow(0 0 9px rgb(165 243 252 / .9)); }
}

/* Sous un cadre illustré, pas de liseré blanc : l'anneau de l'image recouvre directement le bord de la photo. */
.shop-item__preview .frame-host--img .frame-host__img,
.profile__avatar.has-frame--img > img {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

/* Le cadre illustré déborde de la photo : un peu d'air avant les pastilles du dessous. */
.profile__avatar.has-frame--img {
    margin-bottom: 29px;
}

/* ---------- Effets du compte à rebours (boutique, lib/skins.php : countdown_effects()) ----------
 * Inspirés des types de liste et des habillages. La rareté se lit à la matière et au mouvement :
 *   commun     matière douce et immobile (Pastel, Plume) ;
 *   rare       un mouvement discret derrière ou devant les chiffres (Flocons, Fête) ;
 *   épique     lumière animée : trait qui fait le tour des cases, néon qui respire, reflet au sol ;
 *   héroïque   vraie mécanique ou vraie matière : volets qui basculent, chrome et reflets qui glissent ;
 *   prestige   or brossé, chiffres gravés, éclat qui passe et scintillements ;
 *   légendaire nébuleuse vivante, étoiles en mouvement, étoiles filantes, chiffres holographiques.
 * .countdown__fx contient dix <i> (neige, confettis, scintillements, étoiles filantes selon l'effet),
 * placés par --x (position), --d (décalage) et --t (durée).
 */
@property --fx-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.countdown[data-fx] {
    position: relative;
}

.countdown[data-fx] .countdown__units {
    position: relative;
    z-index: 1;
}

.countdown[data-fx] .countdown__unit {
    position: relative;
    isolation: isolate;
}

.countdown__fx {
    position: absolute;
    inset: -14px -20px;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.countdown__fx i {
    position: absolute;
    left: var(--x);
    display: block;
}

.countdown__fx i:nth-child(1) { --x: 3%; --y: 18%; --d: 0s; --t: 7s; }
.countdown__fx i:nth-child(2) { --x: 13%; --y: 72%; --d: -2.2s; --t: 9s; }
.countdown__fx i:nth-child(3) { --x: 24%; --y: 35%; --d: -4.1s; --t: 6.4s; }
.countdown__fx i:nth-child(4) { --x: 35%; --y: 84%; --d: -1.1s; --t: 8.6s; }
.countdown__fx i:nth-child(5) { --x: 46%; --y: 10%; --d: -5.3s; --t: 7.6s; }
.countdown__fx i:nth-child(6) { --x: 56%; --y: 60%; --d: -3.4s; --t: 9.4s; }
.countdown__fx i:nth-child(7) { --x: 66%; --y: 28%; --d: -6.2s; --t: 6.8s; }
.countdown__fx i:nth-child(8) { --x: 76%; --y: 78%; --d: -.7s; --t: 8.2s; }
.countdown__fx i:nth-child(9) { --x: 86%; --y: 44%; --d: -2.9s; --t: 7.2s; }
.countdown__fx i:nth-child(10) { --x: 95%; --y: 66%; --d: -4.7s; --t: 8.8s; }

@keyframes fx-angle {
    to { --fx-angle: 360deg; }
}

@keyframes fx-sweep {
    0%, 55% { transform: translateX(-160%) skewX(-18deg); }
    100% { transform: translateX(260%) skewX(-18deg); }
}

@keyframes fx-twinkle {
    0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* ===== Commun : Pastel ===== */

.countdown[data-fx="pastel"] .countdown__unit {
    border: 1px solid #f3dbe2;
    border-radius: 18px;
    background: linear-gradient(165deg, #fff, var(--tint, #fdf0f3));
    box-shadow: 0 8px 18px -10px rgb(201 103 125 / .35);
}

.countdown[data-fx="pastel"] .countdown__unit--d { --tint: #fdeef2; }
.countdown[data-fx="pastel"] .countdown__unit--h { --tint: #eaf3fd; }
.countdown[data-fx="pastel"] .countdown__unit--m { --tint: #ecf8f1; }
.countdown[data-fx="pastel"] .countdown__value { color: #a9566b; }
.countdown[data-fx="pastel"] .countdown__unit small { color: #c49aa6; }

.countdown[data-fx="pastel"] .countdown__unit--s {
    border-color: transparent;
    background: linear-gradient(150deg, #f6c4cf, #c7d7fe);
}

.countdown[data-fx="pastel"] .countdown__unit--s .countdown__value,
.countdown[data-fx="pastel"] .countdown__unit--s small { color: #fff; }

/* ===== Commun : Plume (papier crème, écriture à la main, filet doré) ===== */

.countdown[data-fx="plume"] .countdown__unit,
.countdown[data-fx="plume"] .countdown__unit--s {
    border-radius: 6px;
    background: #fffaf0;
    box-shadow: inset 0 0 0 3px #fffaf0, inset 0 0 0 4px #d8bf86, 0 8px 16px -10px rgb(90 70 30 / .45);
    animation: none;
}

.countdown[data-fx="plume"] .countdown__value {
    color: #3b2f1e;
    font-family: var(--font-hand);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: .95;
}

.countdown[data-fx="plume"] .countdown__unit small,
.countdown[data-fx="plume"] .countdown__unit--s small {
    color: #9c8458;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
}

.countdown[data-fx="plume"] .countdown__unit--s .countdown__value { color: #2f6b4f; }

/* ===== Rare : Flocons (verre givré, neige fine) ===== */

.countdown[data-fx="flocons"] .countdown__unit {
    border: 1px solid rgb(255 255 255 / .9);
    background: rgb(255 255 255 / .55);
    box-shadow: inset 0 1px 0 #fff, 0 10px 22px -12px rgb(30 64 120 / .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.countdown[data-fx="flocons"] .countdown__value { color: #1e3a5f; }
.countdown[data-fx="flocons"] .countdown__unit small { color: #6b88a8; }

.countdown[data-fx="flocons"] .countdown__unit--s {
    background: linear-gradient(165deg, #eff6ff, #93c5fd);
}

.countdown[data-fx="flocons"] .countdown__unit--s .countdown__value,
.countdown[data-fx="flocons"] .countdown__unit--s small { color: #0f2f57; }

.countdown[data-fx="flocons"] .countdown__fx { z-index: 2; }

.countdown[data-fx="flocons"] .countdown__fx i {
    top: -8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgb(96 165 250 / .8);
    animation: fx-snow var(--t) linear var(--d) infinite;
}

.countdown[data-fx="flocons"] .countdown__fx i:nth-child(3n) { width: 3px; height: 3px; opacity: .8; }

@keyframes fx-snow {
    0% { transform: translate(0, 0); opacity: 0; }
    12% { opacity: 1; }
    50% { transform: translate(9px, 60px); }
    100% { transform: translate(-5px, 130px); opacity: 0; }
}

/* ===== Rare : Fête (bandeau de couleur, confettis qui virevoltent derrière) ===== */

.countdown[data-fx="fete"] .countdown__unit {
    overflow: hidden;
}

.countdown[data-fx="fete"] .countdown__unit::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--band, var(--confetti-1, #ff8f8f));
}

.countdown[data-fx="fete"] .countdown__unit--h { --band: var(--confetti-2, #79c69a); }
.countdown[data-fx="fete"] .countdown__unit--m { --band: var(--confetti-3, #ffd36b); }
.countdown[data-fx="fete"] .countdown__unit--s { --band: rgb(255 255 255 / .5); }
.countdown[data-fx="fete"] .countdown__value { color: var(--brand-strong); }

.countdown[data-fx="fete"] .countdown__fx i {
    top: -10px;
    width: 8px;
    height: 5px;
    border-radius: 2px;
    background: var(--confetti-1, #ff8f8f);
    animation: fx-tumble var(--t) linear var(--d) infinite;
}

.countdown[data-fx="fete"] .countdown__fx i:nth-child(3n+1) { background: var(--confetti-2, #79c69a); }
.countdown[data-fx="fete"] .countdown__fx i:nth-child(3n+2) { background: var(--confetti-3, #ffd36b); width: 5px; height: 5px; border-radius: 50%; }

@keyframes fx-tumble {
    0% { transform: translateY(0) rotate3d(1, 1, 0, 0deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(130px) rotate3d(1, 1, 0, 720deg); opacity: 0; }
}

/* ===== Épique : Aurore (un trait de lumière fait le tour de chaque case) ===== */

.countdown[data-fx="aurore"] .countdown__unit {
    background: #fff;
}

.countdown[data-fx="aurore"] .countdown__unit::before,
.countdown[data-fx="aurore"] .countdown__unit::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(from var(--fx-angle), #22d3ee, #6366f1, #ec4899, #f59e0b, #22d3ee);
    animation: fx-angle 4s linear var(--lag, 0s) infinite;
}

.countdown[data-fx="aurore"] .countdown__unit::before {
    z-index: 1;
    padding: 2px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.countdown[data-fx="aurore"] .countdown__unit::after {
    z-index: -1;
    filter: blur(10px);
    opacity: .45;
}

.countdown[data-fx="aurore"] .countdown__unit--h { --lag: -1s; }
.countdown[data-fx="aurore"] .countdown__unit--m { --lag: -2s; }
.countdown[data-fx="aurore"] .countdown__unit--s { --lag: -3s; }

.countdown[data-fx="aurore"] .countdown__value {
    background: linear-gradient(120deg, #4f46e5, #db2777);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.countdown[data-fx="aurore"] .countdown__unit--s {
    background: linear-gradient(135deg, #6366f1, #ec4899);
}

.countdown[data-fx="aurore"] .countdown__unit--s .countdown__value {
    background: none;
    color: #fff;
}

/* ===== Épique : Néon (chiffres lumineux qui respirent, reflet au sol) ===== */

.countdown[data-fx="neon"] .countdown__units {
    -webkit-box-reflect: below 4px linear-gradient(transparent 55%, rgb(0 0 0 / .22));
}

.countdown[data-fx="neon"] .countdown__unit,
.countdown[data-fx="neon"] .countdown__unit--s {
    border: 1px solid rgb(232 121 249 / .55);
    background: #120b22;
    box-shadow: 0 0 0 1px rgb(34 211 238 / .12), 0 12px 26px -10px rgb(217 70 239 / .7);
}

.countdown[data-fx="neon"] .countdown__value {
    color: #fdf4ff;
    animation: fx-neon 3s ease-in-out infinite;
}

.countdown[data-fx="neon"] .countdown__unit small,
.countdown[data-fx="neon"] .countdown__unit--s small {
    color: #67e8f9;
    text-shadow: 0 0 6px #22d3ee;
}

.countdown[data-fx="neon"] .countdown__unit--s { border-color: rgb(34 211 238 / .7); }
.countdown[data-fx="neon"] .countdown__unit--s .countdown__value { color: #ecfeff; animation-name: fx-neon-cyan; }

@keyframes fx-neon {
    0%, 100% { text-shadow: 0 0 3px #f0abfc, 0 0 8px #d946ef; }
    50% { text-shadow: 0 0 4px #f5d0fe, 0 0 14px #d946ef, 0 0 26px #a21caf; }
}

@keyframes fx-neon-cyan {
    0%, 100% { text-shadow: 0 0 3px #a5f3fc, 0 0 8px #22d3ee; }
    50% { text-shadow: 0 0 4px #cffafe, 0 0 14px #22d3ee, 0 0 26px #0891b2; }
}

/* ===== Héroïque : Horloge à volets (bascule à chaque changement) ===== */

.countdown[data-fx="volets"] .countdown__units {
    perspective: 300px;
}

.countdown[data-fx="volets"] .countdown__unit,
.countdown[data-fx="volets"] .countdown__unit--s {
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / .07), transparent 40%),
        linear-gradient(180deg, #30343c 0 50%, #25282e 50% 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 12px 20px -10px rgb(0 0 0 / .6);
    animation: none;
}

/* Fente du milieu et charnières. */
.countdown[data-fx="volets"] .countdown__unit::before {
    content: "";
    position: absolute;
    inset: calc(50% - 7px) 0 auto;
    z-index: 2;
    height: 2px;
    background: rgb(0 0 0 / .65);
    box-shadow: 0 1px 0 rgb(255 255 255 / .06);
}

.countdown[data-fx="volets"] .countdown__unit::after {
    content: "";
    position: absolute;
    inset: calc(50% - 10px) -3px auto;
    z-index: 2;
    height: 8px;
    background:
        linear-gradient(#5b616c, #3b4048) left / 4px 100% no-repeat,
        linear-gradient(#5b616c, #3b4048) right / 4px 100% no-repeat;
}

.countdown[data-fx="volets"] .countdown__value {
    color: #f5f5f4;
    text-shadow: 0 2px 4px rgb(0 0 0 / .5);
    backface-visibility: hidden;
}

.countdown[data-fx="volets"] .countdown__value.is-ticking {
    animation: fx-flip .55s cubic-bezier(.3, 1.4, .5, 1);
}

.countdown[data-fx="volets"] .countdown__unit small { color: #a8a29e; }
.countdown[data-fx="volets"] .countdown__unit--s .countdown__value { color: #fbbf24; }

/* Dans l'aperçu de la boutique (pas de JS) : les secondes basculent toutes seules. */
.countdown--mini[data-fx="volets"] .countdown__unit--s .countdown__value {
    animation: fx-flip 1s cubic-bezier(.3, 1.4, .5, 1) infinite;
}

@keyframes fx-flip {
    0% { transform: rotateX(95deg); opacity: .3; }
    100% { transform: rotateX(0deg); opacity: 1; }
}

/* ===== Héroïque : Chrome (métal poli, reflets qui glissent) ===== */

.countdown[data-fx="chrome"] .countdown__units {
    -webkit-box-reflect: below 3px linear-gradient(transparent 60%, rgb(255 255 255 / .3));
}

.countdown[data-fx="chrome"] .countdown__unit {
    overflow: hidden;
    border: 1px solid #94a3b8;
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 46%, #f1f5f9 52%, #94a3b8 100%);
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 5px rgb(15 23 42 / .25), 0 12px 22px -12px rgb(15 23 42 / .55);
}

.countdown[data-fx="chrome"] .countdown__unit::after {
    content: "";
    position: absolute;
    inset: -10% auto -10% 0;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .9), transparent);
    animation: fx-sweep 3.6s ease-in-out var(--lag, 0s) infinite;
}

.countdown[data-fx="chrome"] .countdown__unit--h { --lag: .15s; }
.countdown[data-fx="chrome"] .countdown__unit--m { --lag: .3s; }
.countdown[data-fx="chrome"] .countdown__unit--s { --lag: .45s; }

.countdown[data-fx="chrome"] .countdown__value {
    color: #1e293b;
    text-shadow: 0 1px 0 rgb(255 255 255 / .85);
}

.countdown[data-fx="chrome"] .countdown__unit small { color: #475569; }

.countdown[data-fx="chrome"] .countdown__unit--s {
    border-color: #38bdf8;
    background: linear-gradient(180deg, #f0f9ff 0%, #7dd3fc 46%, #e0f2fe 52%, #0ea5e9 100%);
}

.countdown[data-fx="chrome"] .countdown__unit--s .countdown__value { color: #0c4a6e; }
.countdown[data-fx="chrome"] .countdown__unit--s small { color: #075985; }

/* ===== Prestige : Or (brossé, gravé, éclat et scintillements) ===== */

.countdown[data-fx="or"] .countdown__unit,
.countdown[data-fx="or"] .countdown__unit--s {
    overflow: hidden;
    background:
        repeating-linear-gradient(90deg, rgb(255 255 255 / .09) 0 1px, transparent 1px 3px),
        linear-gradient(135deg, #fef3c7, #e6c35c 30%, #fff3c4 50%, #c9971c 75%, #8a6312);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6), inset 0 0 0 3px rgb(138 99 18 / .3), 0 14px 26px -12px rgb(138 99 18 / .65);
}

.countdown[data-fx="or"] .countdown__unit::after {
    content: "";
    position: absolute;
    inset: -10% auto -10% 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .85), transparent);
    animation: fx-sweep 4.5s ease-in-out var(--lag, 0s) infinite;
}

.countdown[data-fx="or"] .countdown__unit--h { --lag: .2s; }
.countdown[data-fx="or"] .countdown__unit--m { --lag: .4s; }
.countdown[data-fx="or"] .countdown__unit--s { --lag: .6s; }

.countdown[data-fx="or"] .countdown__value {
    color: #4a3000;
    text-shadow: 0 1px 0 rgb(255 248 220 / .8), 0 -1px 0 rgb(90 60 0 / .35);
}

.countdown[data-fx="or"] .countdown__unit small {
    color: #6b4a07;
    letter-spacing: .12em;
}

.countdown[data-fx="or"] .countdown__unit--s {
    background:
        repeating-linear-gradient(90deg, rgb(255 255 255 / .06) 0 1px, transparent 1px 3px),
        linear-gradient(135deg, #c9971c, #8a6312);
}

.countdown[data-fx="or"] .countdown__unit--s .countdown__value { color: #fff8dc; text-shadow: 0 1px 2px rgb(60 40 0 / .6); }
.countdown[data-fx="or"] .countdown__unit--s small { color: #fde68a; }

.countdown[data-fx="or"] .countdown__fx { z-index: 2; }

.countdown[data-fx="or"] .countdown__fx i {
    top: var(--y);
    width: 10px;
    height: 10px;
    background: #fff7d6;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    filter: drop-shadow(0 0 3px #fbbf24);
    animation: fx-twinkle calc(var(--t) / 2.5) ease-in-out var(--d) infinite;
}

.countdown[data-fx="or"] .countdown__fx i:nth-child(even) { width: 7px; height: 7px; }

/* ===== Légendaire : Galaxie ===== */

.countdown[data-fx="galaxie"] .countdown__unit,
.countdown[data-fx="galaxie"] .countdown__unit--s {
    overflow: visible;
    background:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 70% 20%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 40% 75%, #e0e7ff, transparent),
        radial-gradient(1px 1px at 85% 65%, #fff, transparent),
        radial-gradient(circle at 25% 15%, rgb(124 58 237 / .85), transparent 60%),
        radial-gradient(circle at 85% 90%, rgb(219 39 119 / .7), transparent 55%),
        radial-gradient(circle at 60% 50%, rgb(14 165 233 / .35), transparent 60%),
        #070418;
    background-size: 60px 60px, 70px 70px, 80px 80px, 50px 50px, 180% 180%, 180% 180%, 160% 160%, auto;
    box-shadow: 0 0 22px -4px rgb(124 58 237 / .7);
    animation: fx-space 14s linear infinite;
}

/* Trait de lumière blanche et violette qui fait le tour de chaque case. */
.countdown[data-fx="galaxie"] .countdown__unit::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    z-index: 1;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--fx-angle), transparent 0 65%, #a78bfa 82%, #fff 90%, transparent 97%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: fx-angle 3s linear var(--lag, 0s) infinite;
}

.countdown[data-fx="galaxie"] .countdown__unit--h { --lag: -.75s; }
.countdown[data-fx="galaxie"] .countdown__unit--m { --lag: -1.5s; }
.countdown[data-fx="galaxie"] .countdown__unit--s { --lag: -2.25s; }

.countdown[data-fx="galaxie"] .countdown__value {
    background: linear-gradient(110deg, #a5f3fc, #c4b5fd, #f9a8d4, #fde68a, #a5f3fc);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 6px rgb(167 139 250 / .8));
    animation: fx-holo 5s linear infinite;
}

.countdown[data-fx="galaxie"] .countdown__unit small,
.countdown[data-fx="galaxie"] .countdown__unit--s small { color: #c4b5fd; }

.countdown[data-fx="galaxie"] .countdown__unit--s {
    animation: fx-space 14s linear infinite, fx-pulse 2s ease-in-out infinite;
}

@keyframes fx-space {
    to { background-position: 60px 30px, -70px 35px, 80px -40px, -50px 25px, 100% 100%, 0 0, 50% 100%, 0 0; }
}

@keyframes fx-holo {
    to { background-position: 250% 0; }
}

@keyframes fx-pulse {
    0%, 100% { box-shadow: 0 0 22px -4px rgb(124 58 237 / .7); }
    50% { box-shadow: 0 0 30px 0 rgb(219 39 119 / .75); }
}

/* Étoiles filantes, de temps en temps, par-dessus. */
.countdown[data-fx="galaxie"] .countdown__fx { z-index: 2; }

.countdown[data-fx="galaxie"] .countdown__fx i {
    top: calc(var(--y) - 20%);
    width: 46px;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #c4b5fd 60%, #fff);
    opacity: 0;
    transform: rotate(18deg);
    animation: fx-shoot var(--t) ease-in var(--d) infinite;
}

.countdown[data-fx="galaxie"] .countdown__fx i:nth-child(odd) { display: none; }

@keyframes fx-shoot {
    0%, 82% { opacity: 0; transform: rotate(18deg) translateX(-40px); }
    86% { opacity: 1; }
    100% { opacity: 0; transform: rotate(18deg) translateX(120px); }
}

/* Aperçu de la boutique : le vrai compte à rebours, en petit. */
/* ===== Rare : Pirate (parchemin de carte au trésor, pièces d'or qui scintillent) ===== */

.countdown[data-fx="pirate"] .countdown__unit {
    border-radius: 6px 12px 7px 10px;
    background:
        radial-gradient(circle at 85% 20%, rgb(139 69 19 / .18) 0 6px, transparent 7px),
        radial-gradient(ellipse at 50% 50%, #f8ebcb 55%, #e4c48e);
    box-shadow: inset 0 0 0 1px rgb(120 72 24 / .35), inset 0 0 14px rgb(139 90 43 / .35), 0 8px 16px -10px rgb(70 40 10 / .6);
}

.countdown[data-fx="pirate"] .countdown__value {
    color: #5b3413;
    font-family: Georgia, "Times New Roman", serif;
    text-shadow: 0 1px 0 rgb(255 255 255 / .5);
}

.countdown[data-fx="pirate"] .countdown__unit small {
    color: #a3341f;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
}

/* Les secondes : planche de bois du navire, chiffres dorés. */
.countdown[data-fx="pirate"] .countdown__unit--s {
    background:
        repeating-linear-gradient(0deg, transparent 0 9px, rgb(0 0 0 / .18) 9px 10px),
        linear-gradient(180deg, #7a4a24, #4e2c12);
    box-shadow: inset 0 0 0 2px #c9952b, 0 8px 16px -8px rgb(70 40 10 / .7);
}

.countdown[data-fx="pirate"] .countdown__unit--s .countdown__value { color: #fcd34d; text-shadow: 0 0 8px rgb(252 211 77 / .6); }
.countdown[data-fx="pirate"] .countdown__unit--s small { color: #fde68a; }

/* Pièces d'or qui scintillent derrière les cases. */
.countdown[data-fx="pirate"] .countdown__fx i {
    top: var(--y);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff7c2, #f5c518 45%, #b7791f);
    box-shadow: 0 0 6px rgb(245 197 24 / .7);
    animation: fx-coin calc(var(--t) / 2.5) ease-in-out var(--d) infinite;
}

@keyframes fx-coin {
    0%, 100% { opacity: .2; transform: scaleX(1) translateY(0); }
    50% { opacity: 1; transform: scaleX(.25) translateY(-4px); }
}

/* ===== Rare : Far West (affiches « Wanted », poussière du désert) ===== */

.countdown[data-fx="farwest"] .countdown__unit {
    border-radius: 3px;
    background: linear-gradient(175deg, #f6e7c8, #e9cf9f);
    box-shadow: inset 0 0 0 3px #f6e7c8, inset 0 0 0 4px #8b5a2b, inset 0 0 18px rgb(139 69 19 / .35), 0 10px 18px -10px rgb(90 50 15 / .6);
}

.countdown[data-fx="farwest"] .countdown__value {
    color: #3f2410;
    font-family: Rockwell, "Courier New", Georgia, serif;
    font-weight: 900;
    letter-spacing: .02em;
}

.countdown[data-fx="farwest"] .countdown__unit small {
    color: #8b5a2b;
    font-family: Rockwell, "Courier New", Georgia, serif;
    font-weight: 700;
    letter-spacing: .12em;
}

/* Les secondes : cuir et étoile de shérif. */
.countdown[data-fx="farwest"] .countdown__unit--s {
    background:
        radial-gradient(circle at 50% 50%, transparent 60%, rgb(0 0 0 / .25)),
        linear-gradient(160deg, #b5651d, #7c3f12);
    box-shadow: inset 0 0 0 2px #e0a85a, inset 0 0 0 3px #7c3f12, 0 10px 18px -8px rgb(90 50 15 / .7);
}

.countdown[data-fx="farwest"] .countdown__unit--s .countdown__value { color: #fef3c7; }
.countdown[data-fx="farwest"] .countdown__unit--s small { color: #fcd9a0; }

/* Poussière qui passe au ras du sol, de gauche à droite. */
.countdown[data-fx="farwest"] .countdown__fx i {
    top: auto;
    bottom: calc(var(--y) / 4);
    left: -10%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(196 140 80 / .55);
    filter: blur(1px);
    animation: fx-dust var(--t) linear var(--d) infinite;
}

.countdown[data-fx="farwest"] .countdown__fx i:nth-child(3n) { width: 12px; height: 12px; background: rgb(214 170 110 / .35); filter: blur(3px); }

@keyframes fx-dust {
    0% { transform: translateX(0) translateY(0); opacity: 0; }
    15% { opacity: 1; }
    50% { transform: translateX(var(--x)) translateY(-6px); }
    100% { transform: translateX(calc(var(--x) + 400px)) translateY(0); opacity: 0; }
}

/* ===== Héroïque : Zombie (chiffres fluo, bave verte qui coule, bulles toxiques) ===== */

.countdown[data-fx="zombie"] .countdown__unit {
    background: linear-gradient(180deg, #1f2a17, #11180c);
    box-shadow: inset 0 0 0 1px rgb(163 230 53 / .35), 0 10px 20px -10px rgb(20 40 5 / .8), 0 0 14px -4px rgb(132 204 22 / .6);
}

/* Bave en haut de chaque case, avec une goutte qui tombe. */
.countdown[data-fx="zombie"] .countdown__unit::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto;
    height: 14px;
    border-radius: 16px 16px 0 0;
    background:
        radial-gradient(circle at 20% 60%, #84cc16 0 4px, transparent 5px),
        radial-gradient(circle at 58% 75%, #84cc16 0 5px, transparent 6px),
        radial-gradient(circle at 84% 55%, #84cc16 0 3px, transparent 4px),
        linear-gradient(#a3e635, #84cc16) top / 100% 8px no-repeat;
    filter: drop-shadow(0 0 4px rgb(163 230 53 / .7));
}

.countdown[data-fx="zombie"] .countdown__unit::after {
    content: "";
    position: absolute;
    top: 10px;
    left: var(--drip, 58%);
    width: 5px;
    height: 7px;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    background: #a3e635;
    box-shadow: 0 0 6px #a3e635;
    animation: fx-drip var(--drip-t, 2.6s) ease-in var(--drip-d, 0s) infinite;
}

.countdown[data-fx="zombie"] .countdown__unit--h { --drip: 22%; --drip-t: 3.1s; --drip-d: -1.2s; }
.countdown[data-fx="zombie"] .countdown__unit--m { --drip: 80%; --drip-t: 2.2s; --drip-d: -.5s; }
.countdown[data-fx="zombie"] .countdown__unit--s { --drip: 40%; --drip-t: 1.8s; }

@keyframes fx-drip {
    0%, 20% { transform: translateY(0) scaleY(.4); opacity: 0; }
    35% { transform: translateY(0) scaleY(1.3); opacity: 1; }
    90% { transform: translateY(46px) scaleY(1); opacity: 1; }
    100% { transform: translateY(52px) scaleY(.5); opacity: 0; }
}

.countdown[data-fx="zombie"] .countdown__value {
    color: #bef264;
    text-shadow: 0 0 6px rgb(163 230 53 / .9), 0 0 16px rgb(132 204 22 / .6);
    animation: fx-toxic 2.4s ease-in-out infinite;
}

.countdown[data-fx="zombie"] .countdown__unit small { color: #a78bfa; }

.countdown[data-fx="zombie"] .countdown__unit--s {
    background: linear-gradient(180deg, #2e1065, #1a0b3d);
    box-shadow: inset 0 0 0 1px rgb(167 139 250 / .5), 0 0 18px -4px rgb(168 85 247 / .7);
}

.countdown[data-fx="zombie"] .countdown__unit--s .countdown__value { color: #d9f99d; }
.countdown[data-fx="zombie"] .countdown__unit--s small { color: #c4b5fd; }

@keyframes fx-toxic {
    0%, 100% { text-shadow: 0 0 4px rgb(163 230 53 / .8), 0 0 10px rgb(132 204 22 / .4); }
    50% { text-shadow: 0 0 8px rgb(190 242 100 / 1), 0 0 22px rgb(132 204 22 / .8); }
}

/* Bulles toxiques qui montent derrière les cases. */
.countdown[data-fx="zombie"] .countdown__fx i {
    bottom: -12px;
    width: 9px;
    height: 9px;
    border: 2px solid rgb(163 230 53 / .8);
    border-radius: 50%;
    background: rgb(163 230 53 / .15);
    box-shadow: 0 0 6px rgb(163 230 53 / .6);
    animation: fx-bubble var(--t) ease-in var(--d) infinite;
}

.countdown[data-fx="zombie"] .countdown__fx i:nth-child(3n) { width: 5px; height: 5px; border-color: rgb(196 181 253 / .8); }

@keyframes fx-bubble {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    15% { opacity: 1; }
    50% { transform: translateY(-60px) translateX(5px); }
    85% { opacity: 1; }
    100% { transform: translateY(-120px) translateX(-4px) scale(1.4); opacity: 0; }
}

/* ===== Épique : Steampunk (laiton riveté, engrenages qui tournent, vapeur qui s'échappe) ===== */

.countdown[data-fx="steampunk"] .countdown__unit {
    border-radius: 8px;
    background:
        radial-gradient(circle at 7px 7px, #f6d48b 0 1.5px, #7c4a1a 2.5px, transparent 3px),
        radial-gradient(circle at calc(100% - 7px) 7px, #f6d48b 0 1.5px, #7c4a1a 2.5px, transparent 3px),
        radial-gradient(circle at 7px calc(100% - 7px), #f6d48b 0 1.5px, #7c4a1a 2.5px, transparent 3px),
        radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #f6d48b 0 1.5px, #7c4a1a 2.5px, transparent 3px),
        linear-gradient(160deg, #e9c27a, #b98235 45%, #8a5a22);
    box-shadow: inset 0 0 0 2px #6b3f14, inset 0 0 0 3px rgb(255 226 160 / .45), inset 0 -8px 14px rgb(60 30 5 / .35), 0 10px 18px -10px rgb(60 30 5 / .7);
}

/* Un engrenage qui tourne, posé sur le coin de chaque case (vitesse et sens différents). */
.countdown[data-fx="steampunk"] .countdown__unit::before {
    content: "";
    position: absolute;
    top: -9px;
    right: -9px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #3b220c 0 16%, transparent 18%),
        radial-gradient(circle, #d9a54a 0 36%, #8a5a22 38%, transparent 40%),
        repeating-conic-gradient(#c08a3a 0 14deg, transparent 14deg 30deg);
    -webkit-mask: radial-gradient(circle, #000 48%, transparent 50%);
    mask: radial-gradient(circle, #000 48%, transparent 50%);
    filter: drop-shadow(0 1px 1px rgb(40 20 5 / .6));
    animation: fx-gear var(--gear-t, 6s) linear infinite var(--gear-dir, normal);
}

.countdown[data-fx="steampunk"] .countdown__unit--h { --gear-t: 5s; --gear-dir: reverse; }
.countdown[data-fx="steampunk"] .countdown__unit--m { --gear-t: 4s; }
.countdown[data-fx="steampunk"] .countdown__unit--s { --gear-t: 2s; --gear-dir: reverse; }

@keyframes fx-gear {
    to { transform: rotate(360deg); }
}

.countdown[data-fx="steampunk"] .countdown__value {
    color: #3b220c;
    font-family: Georgia, "Times New Roman", serif;
    text-shadow: 0 1px 0 rgb(255 236 190 / .7);
}

.countdown[data-fx="steampunk"] .countdown__unit small {
    color: #5b3410;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: .08em;
}

/* Les secondes : cadran de cuivre sombre, chiffres qui rougeoient comme une chaudière. */
.countdown[data-fx="steampunk"] .countdown__unit--s {
    background:
        radial-gradient(circle at 7px 7px, #f6d48b 0 1.5px, #7c4a1a 2.5px, transparent 3px),
        radial-gradient(circle at calc(100% - 7px) 7px, #f6d48b 0 1.5px, #7c4a1a 2.5px, transparent 3px),
        radial-gradient(circle at 7px calc(100% - 7px), #f6d48b 0 1.5px, #7c4a1a 2.5px, transparent 3px),
        radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #f6d48b 0 1.5px, #7c4a1a 2.5px, transparent 3px),
        radial-gradient(ellipse at 50% 40%, #6b3a17, #2e1707);
    box-shadow: inset 0 0 0 2px #c08a3a, inset 0 0 12px rgb(0 0 0 / .5), 0 10px 18px -8px rgb(60 30 5 / .8), 0 0 14px -4px rgb(251 146 60 / .6);
}

.countdown[data-fx="steampunk"] .countdown__unit--s .countdown__value {
    color: #fdba74;
    text-shadow: 0 0 6px rgb(249 115 22 / .8);
    animation: fx-boiler 2.6s ease-in-out infinite;
}

.countdown[data-fx="steampunk"] .countdown__unit--s small { color: #f6d48b; }

@keyframes fx-boiler {
    0%, 100% { text-shadow: 0 0 4px rgb(249 115 22 / .6); }
    50% { text-shadow: 0 0 10px rgb(251 146 60 / 1), 0 0 18px rgb(234 88 12 / .6); }
}

/* Vapeur qui s'échappe derrière les cases et monte en se dissipant. */
.countdown[data-fx="steampunk"] .countdown__fx i {
    bottom: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgb(255 255 255 / .9);
    filter: blur(3px);
    animation: fx-steam calc(var(--t) / 2) ease-out var(--d) infinite;
}

.countdown[data-fx="steampunk"] .countdown__fx i:nth-child(3n) { width: 9px; height: 9px; background: rgb(245 222 179 / .7); }

@keyframes fx-steam {
    0% { transform: translateY(0) scale(.4); opacity: 0; }
    20% { opacity: .9; }
    100% { transform: translateY(-70px) translateX(8px) scale(2.2); opacity: 0; }
}

.countdown--mini {
    margin: 0;
}

.countdown--mini[data-fx="plume"] .countdown__value {
    font-size: 1.45rem;
}

.countdown--mini[data-fx="zombie"] .countdown__unit::before { height: 9px; }
.countdown--mini[data-fx="zombie"] .countdown__unit::after { top: 6px; width: 4px; height: 5px; }
.countdown--mini[data-fx="steampunk"] .countdown__unit::before { top: -6px; right: -6px; width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
    .frame *,
    .frame *::after,
    .frame-back,
    .countdown[data-fx] *,
    .countdown[data-fx] *::before,
    .countdown[data-fx] *::after {
        animation: none !important;
    }
}

/* ---------- Boutique : catégories, types de liste en pastilles, groupes par rareté ----------
 * La fenêtre est une colonne : en-tête, catégories et types de liste gardent leur hauteur (flex: none),
 * seule la liste des articles défile. Hauteur fixe : pas de saut quand on change d'onglet.
 */
.shop[open] {
    height: min(900px, calc(100dvh - 24px));
}

.shop > .shop__hero,
.shop > .shop__cats,
.shop > .shop__tabs {
    flex: none;
}

.shop > .shop__body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

/* Sur téléphone, l'en-tête prend trop de place pour une liste qui défile seule : toute la fenêtre défile,
 * et les catégories restent collées en haut. */
@media (max-width: 600px) {
    .shop[open] {
        height: auto;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .shop > .shop__body {
        overflow: visible;
    }

    .shop__intro p {
        display: none;
    }

    .shop > .shop__cats {
        position: sticky;
        top: 0;
        z-index: 4;
        padding: 10px 12px;
        background: var(--surface);
        box-shadow: 0 1px 0 var(--line);
    }

    .shop__cat {
        justify-content: center;
        padding: 8px 6px;
        border-radius: 14px;
    }

    .shop__cat-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 15px;
    }

    .shop__cats + .shop__tabs {
        flex-wrap: nowrap;
        padding: 10px 12px 12px;
        overflow-x: auto;
    }
}

.shop__cats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 32px 0;
}

.shop__cat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}

.shop__cat:hover {
    transform: translateY(-1px);
}

.shop__cat-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--surface-muted);
    color: #6d28d9;
    font-size: 19px;
}

.shop__cat-text {
    display: grid;
    min-width: 0;
}

.shop__cat-text strong {
    font-size: 15px;
}

.shop__cat-text small {
    color: var(--text-muted);
    font-size: 12px;
}

.shop__cat[aria-pressed="true"] {
    border-color: #6d28d9;
    background: color-mix(in srgb, #6d28d9 6%, var(--surface));
    box-shadow: 0 8px 20px -10px rgb(109 40 217 / .5);
}

.shop__cat[aria-pressed="true"] .shop__cat-icon {
    background: linear-gradient(135deg, #4338ca, #7c3aed);
    color: #fff;
}

/* Types de liste (habillages seulement) : grandes pastilles avec la vignette du type. */
.shop__cats + .shop__tabs {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 32px 16px;
    overflow: visible;
    border-bottom: 1px solid var(--line);
}

.shop__tabs[hidden] {
    display: none;
}

.shop__cats + .shop__tabs .shop__tab {
    gap: 8px;
    min-height: 46px;
    padding: 6px 8px 6px 6px;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    line-height: 1;
    transition: border-color .2s, background .2s;
}

.shop__tab-thumb {
    width: 32px;
    height: 32px;
    padding: 3px;
    border-radius: 50%;
    background: var(--surface-muted);
    object-fit: contain;
}

.shop__cats + .shop__tabs .shop__tab .shop__tab-label {
    padding: 0;
    background: none;
    font-size: 14px;
}

.shop__cats + .shop__tabs .shop__tab .shop__tab-count {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 12px;
}

.shop__cats + .shop__tabs .shop__tab:hover {
    border-color: color-mix(in srgb, #6d28d9 40%, var(--line));
}

.shop__cats + .shop__tabs .shop__tab[aria-pressed="true"] {
    border-color: #6d28d9;
    background: color-mix(in srgb, #6d28d9 7%, var(--surface));
}

.shop__cats + .shop__tabs .shop__tab[aria-pressed="true"] .shop__tab-thumb {
    background: #fff;
    box-shadow: 0 0 0 2px #6d28d9;
}

.shop__cats + .shop__tabs .shop__tab[aria-pressed="true"] .shop__tab-count {
    background: #6d28d9;
    color: #fff;
}

.shop__rarity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 10px;
    color: var(--rarity, #64748b);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.shop__rarity:first-of-type {
    margin-top: 4px;
}

.shop__rarity::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--rarity, #64748b) 40%, transparent), transparent);
}

.shop__rarity span {
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rarity, #64748b) 12%, transparent);
    font-size: 11px;
    letter-spacing: 0;
}

.shop__rarity--rare { --rarity: #2563eb; }
.shop__rarity--epique { --rarity: #9333ea; }
.shop__rarity--heroique { --rarity: #d97706; }
.shop__rarity--prestige { --rarity: #b8860b; }
.shop__rarity--legendaire { --rarity: #db2777; }

@media (max-width: 640px) {
    .shop__cats {
        gap: 6px;
        padding: 12px 16px 0;
    }

    .shop__cat {
        flex-direction: column;
        gap: 6px;
        padding: 10px 6px;
        text-align: center;
    }

    .shop__cat-text small {
        display: none;
    }

    .shop__cat-text strong {
        font-size: 13px;
    }

    .shop__cats + .shop__tabs {
        padding: 10px 16px 12px;
    }
}

/* Aperçu du compte à rebours : dessiné en petit (pas de scale, qui garderait la largeur réelle). */
.countdown--mini {
    transform: none;
}

.countdown--mini .countdown__units {
    gap: 5px;
}

.countdown--mini .countdown__unit {
    min-width: 40px;
    padding: 5px 6px 4px;
    border-radius: 11px;
}

.countdown--mini .countdown__value {
    font-size: 1.15rem;
}

.countdown--mini .countdown__unit small {
    font-size: 8px;
}

.countdown--mini .countdown__fx {
    inset: -30px -14px;
}

@media (max-width: 640px) {
    .countdown--mini .countdown__units {
        gap: 3px;
    }

    .countdown--mini .countdown__unit {
        min-width: 31px;
        padding: 4px 3px 3px;
        border-radius: 9px;
    }

    .countdown--mini .countdown__value {
        font-size: .95rem;
    }

    .countdown--mini .countdown__unit small {
        font-size: 7px;
        letter-spacing: 0;
    }
}

/* La couronne dépasse du cadre : un peu de marge en haut de l'aperçu. */
.shop-item__preview--frame {
    height: 170px;
    padding: 18px 16px;
}