.jm-gift-finder {
margin-bottom: var(--space-10);
padding-top:0;
}
.jm-gift-finder__layout {
display: flex;
flex-direction: column;
gap: var(--space-6);
} .jm-gift-finder__visual {
flex-shrink: 0;
}
.jm-gift-finder__visual-frame {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
aspect-ratio: 1;
background: var(--color-bg-muted);
}
.jm-gift-finder__visual-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.jm-gift-finder__visual-placeholder {
position: absolute;
inset: 0;
background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 100%);
transition: background 0.35s ease;
}
.jm-gift-finder[data-gf-pepper="piment-espelette"] .jm-gift-finder__visual-placeholder {
background: linear-gradient(145deg, #fff3e0 0%, #ffcc80 100%);
}
.jm-gift-finder[data-gf-pepper="piment-cayenne"] .jm-gift-finder__visual-placeholder {
background: linear-gradient(145deg, #ffe0b2 0%, #ff9800 100%);
}
.jm-gift-finder[data-gf-pepper="harissa-grec"] .jm-gift-finder__visual-placeholder {
background: linear-gradient(145deg, #ffccbc 0%, #e64a19 100%);
}
.jm-gift-finder[data-gf-pepper="arrache-gueule"] .jm-gift-finder__visual-placeholder {
background: linear-gradient(145deg, #ffcdd2 0%, #b71c1c 100%);
} .jm-gift-finder__panel {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-5);
min-width: 0;
} .jm-gift-finder__timeline {
display: flex;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.jm-gift-finder__timeline-item {
display: flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
border: 2px solid var(--color-border);
border-radius: 50%;
color: var(--color-text-muted);
font-size: var(--fs-sm);
font-weight: var(--font-weight-semibold);
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.jm-gift-finder__timeline-item.is-done {
border-color: var(--color-gold);
background: var(--color-gold);
color: var(--color-text-inverse);
}
.jm-gift-finder__timeline-item.is-active {
border-color: var(--color-gold);
color: var(--color-gold);
} .jm-gift-finder__summary {
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
}
.jm-gift-finder__sentence {
margin: 0 0 var(--space-3);
font-size: var(--fs-base);
line-height: var(--lh-base);
}
.jm-gift-finder__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0;
padding: 0;
}
.jm-gift-finder__tag {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-full);
background: var(--color-surface);
font-size: var(--fs-sm);
line-height: 1.2;
}
.jm-gift-finder__tag-label {
font-weight: var(--font-weight-medium);
}
.jm-gift-finder__tag-remove {
display: flex;
width: 1.25rem;
height: 1.25rem;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
}
.jm-gift-finder__tag-remove:hover,
.jm-gift-finder__tag-remove:focus-visible {
background: var(--color-bg-muted);
color: var(--color-error);
} .jm-gift-finder__step-title {
margin: 0 0 var(--space-4);
font-family: var(--font-heading);
font-size: var(--fs-xl);
}
.jm-gift-finder__choices {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0;
padding: 0;
border: 0;
}
.jm-gift-finder__choice {
padding: var(--space-2) var(--space-4);
border: 2px solid var(--color-border);
border-radius: var(--radius-full);
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
font-size: var(--fs-sm);
font-weight: var(--font-weight-medium);
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.jm-gift-finder__choice:hover,
.jm-gift-finder__choice:focus-visible {
border-color: var(--color-gold);
}
.jm-gift-finder__choice.is-selected {
border-color: var(--color-gold);
background: color-mix(in srgb, var(--color-gold) 12%, var(--color-surface));
color: var(--color-text);
} .jm-gift-finder__nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: auto;
}
.jm-gift-finder__nav .jm-button {
flex: 1 1 auto;
min-width: 8rem;
} .jm-gift-finder__results {
margin-top: var(--space-10);
padding-top: var(--space-8);
border-top: 1px solid var(--color-border);
}
.jm-gift-finder__results-title {
margin: 0 0 var(--space-3);
font-family: var(--font-heading);
font-size: var(--fs-xl);
}
.jm-gift-finder__results-text {
margin: 0 0 var(--space-5);
color: var(--color-text-muted);
}
.jm-gift-finder__back {
margin-top: var(--space-6);
} @media (min-width: 900px) {
.jm-gift-finder__layout {
flex-direction: row;
align-items: flex-start;
gap: var(--space-10);
}
.jm-gift-finder__visual {
position: sticky;
top: var(--space-6);
width: min(42%, 28rem);
}
.jm-gift-finder__panel {
flex: 1;
}
}