/**
 * Looks (Phase 3.1 MH) — section carrousel home + template single.
 * Chargé conditionnellement : home + is_singular('sfc_look') + archive sfc_look.
 */

/* ============================================================
 * SECTION HOME — carrousel scroll-snap natif
 * ============================================================ */
.sfc-looks__header {
    margin-bottom: var(--space-7);
}

.sfc-looks__carousel {
    position: relative;
    margin-bottom: var(--space-6);
}

.sfc-looks__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 32%);
    gap: var(--space-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-2);
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-block: var(--space-2);
    padding-inline: var(--space-2);
}

.sfc-looks__track::-webkit-scrollbar { display: none; }

.sfc-looks__card {
    scroll-snap-align: start;
}

.sfc-looks__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--duration-base) var(--ease-spring),
        box-shadow var(--duration-base) var(--ease-out);
}

.sfc-looks__link:hover,
.sfc-looks__link:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    outline: none;
}

.sfc-looks__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-cream);
}

.sfc-looks__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 800ms var(--ease-out);
}

.sfc-looks__link:hover .sfc-looks__img,
.sfc-looks__link:focus-visible .sfc-looks__img {
    transform: scale(1.05);
}

.sfc-looks__placeholder {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(201, 106, 114, 0.18), transparent 60%),
        linear-gradient(135deg, var(--color-cream), var(--color-beige-rose));
}

.sfc-looks__badge {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-3);
    padding: 4px 10px;
    background: color-mix(in srgb, var(--color-white) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
}

.sfc-looks__body {
    padding: var(--space-5) var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}

.sfc-looks__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--color-ink);
    margin: 0;
    line-height: var(--leading-snug);
}

.sfc-looks__excerpt {
    margin: 0;
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* Boutons navigation carrousel — masqués si pas besoin (1 écran) */
.sfc-looks__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-white);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-full);
    color: var(--color-ink);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 2;
    transition:
        background var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        transform var(--duration-fast) var(--ease-spring),
        opacity var(--duration-base) var(--ease-out);
}

.sfc-looks__nav:hover,
.sfc-looks__nav:focus-visible {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    outline: none;
}

.sfc-looks__nav:active { transform: translateY(-50%) scale(0.92); }

.sfc-looks__nav[disabled] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.sfc-looks__nav--prev { left: -22px; }
.sfc-looks__nav--next { right: -22px; }

@media (min-width: 769px) {
    .sfc-looks__nav { display: inline-flex; }
}

.sfc-looks__cta {
    margin-top: var(--space-5);
}

@media (max-width: 768px) {
    .sfc-looks__track {
        grid-auto-columns: 80%;
        padding-inline: var(--space-4);
    }
}

/* ============================================================
 * TEMPLATE SINGLE — sfc_look
 * ============================================================ */
.sfc-look-single__hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-cream);
}

.sfc-look-single__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    animation: sfc-hero-kenburns 22s var(--ease-in-out) infinite alternate;
}

.sfc-look-single__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(26, 26, 26, 0.0) 30%,
        rgba(26, 26, 26, 0.55) 100%);
    z-index: -1;
}

.sfc-look-single__hero-inner {
    padding-block: var(--space-8);
    color: var(--color-white);
}

.sfc-look-single__eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-primary-soft);
    margin-bottom: var(--space-3);
}

.sfc-look-single__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-3xl);
    font-weight: 400;
    line-height: var(--leading-tight);
    color: var(--color-white);
    margin: 0;
    max-width: 760px;
}

.sfc-look-single__body {
    padding-block: var(--space-section);
}

.sfc-look-single__intro {
    max-width: 720px;
    margin: 0 auto var(--space-section);
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-ink);
}

.sfc-look-single__intro p { margin: 0 0 var(--space-4); }

.sfc-look-single__shop {
    margin-bottom: var(--space-section);
}

.sfc-look-single__products.products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* rangée incomplète centrée */
    gap: var(--space-5);
}

/* Neutralise le clearfix ::before/::after de WooCommerce/Storefront : en flex/grid
 * ces pseudo-éléments (content:""; display:table) deviennent des items VIDES et
 * décalent toute la grille (cellule fantôme en 1re position → "vide,1,1,1"). */
.sfc-look-single__products.products::before,
.sfc-look-single__products.products::after {
    content: none;
    display: none;
}

/* Cards : base ~240px, s'étirent pour remplir la rangée mais plafonnées à 290px
 * → rangées pleines alignées bord à bord, rangée incomplète centrée. */
.sfc-look-single__products.products > li.product {
    flex: 1 1 240px;
    max-width: 290px;
}

/* Next look */
.sfc-look-single__next {
    border-top: 1px solid var(--color-rule);
    padding-top: var(--space-7);
    margin-top: var(--space-section);
    text-align: center;
}

.sfc-look-single__next-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 var(--space-4);
}

.sfc-look-single__next-link {
    display: inline-grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    color: inherit;
    text-align: left;
    transition:
        box-shadow var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-spring),
        border-color var(--duration-base) var(--ease-out);
}

.sfc-look-single__next-link:hover,
.sfc-look-single__next-link:focus-visible {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-primary-soft);
    outline: none;
}

.sfc-look-single__next-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.sfc-look-single__next-body { display: flex; flex-direction: column; gap: var(--space-1); }

.sfc-look-single__next-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--color-ink);
}

.sfc-look-single__next-cta {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
    .sfc-look-single__cover,
    .sfc-looks__img,
    .sfc-looks__link,
    .sfc-look-single__next-link {
        animation: none;
        transition: none;
    }
}

/* ============================================================
 * CAPSULE COFFRET (bundle WC) — liquid glass rose poudré
 * ============================================================ */
.sfc-look-single__bundle {
    margin: 0 0 var(--space-section);
    display: flex;
    justify-content: center;
}

.sfc-look-single__bundle-card {
    position: relative;
    isolation: isolate;
    max-width: 640px;
    width: 100%;
    padding: var(--space-7) var(--space-7) var(--space-6);
    border-radius: var(--radius-xl);
    text-align: center;
    color: var(--color-white);
    overflow: hidden;

    background: linear-gradient(180deg,
        var(--color-primary-deep) 0%,
        var(--color-primary) 100%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--color-cream) 30%, transparent),
        0 28px 56px -18px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.sfc-look-single__bundle-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 0%,
            color-mix(in srgb, var(--color-gold) 30%, transparent) 0%,
            transparent 38%),
        radial-gradient(circle at 100% 100%,
            color-mix(in srgb, var(--color-primary-soft) 30%, transparent) 0%,
            transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.sfc-look-single__bundle-card > * {
    position: relative;
    z-index: 1;
}

.sfc-look-single__bundle-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-primary-soft);
    margin-bottom: var(--space-3);
}

.sfc-look-single__bundle-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    color: var(--color-white);
    margin: 0 0 var(--space-2);
}

.sfc-look-single__bundle-meta {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    color: color-mix(in srgb, var(--color-cream) 78%, transparent);
    margin: 0 0 var(--space-5);
}

.sfc-look-single__bundle-price {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--color-white);
    margin-bottom: var(--space-6);
}

/* Override WC price markup à l'intérieur du prix bundle */
.sfc-look-single__bundle-price .price,
.sfc-look-single__bundle-price .amount,
.sfc-look-single__bundle-price .woocommerce-Price-amount,
.sfc-look-single__bundle-price ins,
.sfc-look-single__bundle-price bdi {
    color: var(--color-white);
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
}
.sfc-look-single__bundle-price del {
    color: color-mix(in srgb, var(--color-cream) 55%, transparent);
    font-size: 0.7em;
    margin-left: var(--space-3);
}

/* Bouton CTA principal (rose pâle sur fond rose deep = inversé) */
.sfc-look-single__bundle-cta {
    --btn-bg: var(--color-cream);
    --btn-fg: var(--color-primary-deep);
    --btn-bd: var(--color-cream);
    color: var(--color-primary-deep) !important;
    background: var(--color-cream) !important;
    border-color: var(--color-cream) !important;
    padding: 16px 36px;
    font-size: var(--text-base);
    box-shadow:
        inset 0 1px 0 var(--color-white),
        0 8px 18px -4px rgba(0, 0, 0, 0.25);
}

.sfc-look-single__bundle-cta:hover,
.sfc-look-single__bundle-cta:focus-visible {
    background: var(--color-white) !important;
    color: var(--color-primary-deep) !important;
    transform: translateY(-2px);
}

.sfc-look-single__bundle-cta svg {
    transition: transform var(--duration-base) var(--ease-spring);
}

.sfc-look-single__bundle-cta:hover svg {
    transform: translateX(4px);
}

.sfc-look-single__bundle-detail {
    display: inline-block;
    margin-top: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: color-mix(in srgb, var(--color-cream) 80%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-cream) 35%, transparent);
    text-decoration: none;
    transition: color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.sfc-look-single__bundle-detail:hover,
.sfc-look-single__bundle-detail:focus-visible {
    color: var(--color-white);
    border-color: var(--color-white);
}

@media (max-width: 640px) {
    .sfc-look-single__bundle-card {
        padding: var(--space-5);
    }
    .sfc-look-single__bundle-price { font-size: var(--text-2xl); }
}

@media (prefers-reduced-motion: reduce) {
    .sfc-look-single__bundle-cta,
    .sfc-look-single__bundle-cta svg,
    .sfc-look-single__bundle-detail { transition: none; }
}

/* ============================================================================
 * ARCHIVE LOOKS — /looks/ (Phase 3.2 MH)
 * Hero éditorial + featured horizontal + grille mosaïque + capsule CTA.
 * ============================================================================ */

.sfc-looks-archive {
    background: var(--color-cream);
    color: var(--color-ink);
    overflow: hidden;
}

/* ──────────────────────────────────────────────────────────
 * 1. HERO ÉDITORIAL — gradient rose + or + halos liquid glass
 * ────────────────────────────────────────────────────────── */
.sfc-looks-archive__hero {
    position: relative;
    isolation: isolate;
    padding: clamp(72px, 12vw, 140px) 0 clamp(56px, 10vw, 120px);
    background:
        radial-gradient(110% 80% at 50% 0%,
            color-mix(in srgb, var(--color-primary) 22%, transparent) 0%,
            color-mix(in srgb, var(--color-primary) 8%, transparent) 45%,
            transparent 75%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-cream) 60%, var(--color-white)) 0%,
            var(--color-cream) 100%);
    overflow: hidden;
}

.sfc-looks-archive__hero-halo {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    pointer-events: none;
}

.sfc-looks-archive__hero-halo--rose {
    top: -120px;
    left: -80px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
}

.sfc-looks-archive__hero-halo--gold {
    top: 40%;
    right: -100px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--color-gold, #c9a55c) 80%, transparent) 0%,
        transparent 70%);
    opacity: 0.4;
}

.sfc-looks-archive__hero-halo--cream {
    bottom: -100px;
    left: 35%;
    width: 420px;
    height: 280px;
    background: radial-gradient(ellipse, var(--color-white) 0%, transparent 70%);
    opacity: 0.7;
}

.sfc-looks-archive__hero-inner {
    position: relative;
    text-align: center;
    max-width: 820px;
}

.sfc-looks-archive__hero-eyebrow {
    display: inline-block;
    padding: 6px 18px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-primary-deep);
    background: color-mix(in srgb, var(--color-white) 75%, transparent);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-5);
}

.sfc-looks-archive__hero-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    line-height: 1.05;
    color: var(--color-ink);
    margin: 0 0 var(--space-5);
    letter-spacing: -0.01em;
}

.sfc-looks-archive__hero-intro {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
    max-width: 640px;
    margin: 0 auto var(--space-6);
}

.sfc-looks-archive__hero-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
    padding: 8px 20px;
    background: color-mix(in srgb, var(--color-white) 60%, transparent);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border-radius: var(--radius-pill);
}

.sfc-looks-archive__hero-count {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--color-primary-deep);
}

.sfc-looks-archive__hero-sep { color: var(--color-primary); opacity: 0.5; }

.sfc-looks-archive__hero-tag { letter-spacing: var(--tracking-wide); }

/* ──────────────────────────────────────────────────────────
 * 2. FEATURED LOOK — Card horizontal asymétrique
 * ────────────────────────────────────────────────────────── */
.sfc-looks-archive__featured {
    margin: clamp(-40px, -5vw, -64px) auto var(--space-section);
    position: relative;
    z-index: 2;
}

.sfc-looks-archive__featured-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: stretch;
    padding: clamp(20px, 3vw, 32px);
    background: color-mix(in srgb, var(--color-white) 78%, transparent);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
    border-radius: var(--radius-xl);
    box-shadow:
        0 1px 0 0 color-mix(in srgb, var(--color-white) 90%, transparent) inset,
        0 30px 80px -30px color-mix(in srgb, var(--color-primary-deep) 22%, transparent);
    text-decoration: none;
    color: inherit;
    transition:
        transform var(--duration-slow) var(--ease-out),
        box-shadow var(--duration-slow) var(--ease-out);
}

.sfc-looks-archive__featured-card:hover,
.sfc-looks-archive__featured-card:focus-visible {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 0 color-mix(in srgb, var(--color-white) 90%, transparent) inset,
        0 40px 90px -30px color-mix(in srgb, var(--color-primary-deep) 32%, transparent);
    outline: none;
}

.sfc-looks-archive__featured-media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-cream) 65%, var(--color-white)) 0%,
        var(--color-cream) 100%);
}

.sfc-looks-archive__featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 900ms var(--ease-out);
}

.sfc-looks-archive__featured-card:hover .sfc-looks-archive__featured-img,
.sfc-looks-archive__featured-card:focus-visible .sfc-looks-archive__featured-img {
    transform: scale(1.04);
}

.sfc-looks-archive__featured-badge {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 2;
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--color-primary-deep) 40%, transparent);
}

.sfc-looks-archive__featured-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4) var(--space-3);
}

.sfc-looks-archive__featured-eyebrow {
    display: inline-block;
    width: fit-content;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.sfc-looks-archive__featured-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.1;
    color: var(--color-ink);
    margin: 0 0 var(--space-4);
}

.sfc-looks-archive__featured-excerpt {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
    margin: 0 0 var(--space-5);
}

.sfc-looks-archive__featured-meta {
    display: flex;
    gap: var(--space-6);
    margin: 0 0 var(--space-6);
    padding: var(--space-4) 0;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.sfc-looks-archive__featured-meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sfc-looks-archive__featured-meta dt {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

.sfc-looks-archive__featured-meta dd {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-xl);
    color: var(--color-ink);
}

.sfc-looks-archive__featured-price .amount,
.sfc-looks-archive__featured-price bdi {
    font-family: inherit;
    font-size: inherit;
    color: var(--color-primary-deep);
}

.sfc-looks-archive__featured-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-primary-deep);
    transition: gap var(--duration-base) var(--ease-out);
}

.sfc-looks-archive__featured-card:hover .sfc-looks-archive__featured-cta,
.sfc-looks-archive__featured-card:focus-visible .sfc-looks-archive__featured-cta {
    gap: var(--space-3);
}

/* ──────────────────────────────────────────────────────────
 * 3. GRID — Mosaïque éditoriale des autres looks
 * ────────────────────────────────────────────────────────── */
.sfc-looks-archive__grid-wrap {
    margin-bottom: var(--space-section);
}

.sfc-looks-archive__grid-header {
    text-align: center;
    margin-bottom: var(--space-7);
}

.sfc-looks-archive__grid-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.sfc-looks-archive__grid-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    color: var(--color-ink);
    margin: 0;
}

.sfc-looks-archive__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: clamp(28px, 4vw, 56px);
}

.sfc-looks-archive__card-item {
    margin: 0;
    padding: 0;
    position: relative;
}

.sfc-looks-archive__card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    position: relative;
    isolation: isolate;
    transition: transform var(--duration-slow) var(--ease-out);
}

.sfc-looks-archive__card:hover,
.sfc-looks-archive__card:focus-visible {
    transform: translateY(-6px);
    outline: none;
}

.sfc-looks-archive__card-num {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 3;
    padding: 6px 14px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--color-primary-deep);
    background: color-mix(in srgb, var(--color-cream) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-radius: var(--radius-pill);
    letter-spacing: var(--tracking-wide);
}

.sfc-looks-archive__card-media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-cream) 65%, var(--color-white)) 0%,
        var(--color-cream) 100%);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--color-ink) 8%, transparent),
        0 20px 50px -20px color-mix(in srgb, var(--color-primary-deep) 25%, transparent);
    margin-bottom: var(--space-4);
    transition: box-shadow var(--duration-slow) var(--ease-out);
}

.sfc-looks-archive__card:hover .sfc-looks-archive__card-media,
.sfc-looks-archive__card:focus-visible .sfc-looks-archive__card-media {
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--color-ink) 8%, transparent),
        0 30px 60px -20px color-mix(in srgb, var(--color-primary-deep) 35%, transparent);
}

.sfc-looks-archive__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(0.95);
    transition:
        transform 900ms var(--ease-out),
        filter var(--duration-slow) var(--ease-out);
}

.sfc-looks-archive__card:hover .sfc-looks-archive__card-img,
.sfc-looks-archive__card:focus-visible .sfc-looks-archive__card-img {
    transform: scale(1.05);
    filter: saturate(1.05);
}

.sfc-looks-archive__placeholder {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 25%, var(--color-cream)) 0%,
        var(--color-cream) 100%);
}

.sfc-looks-archive__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-2);
}

.sfc-looks-archive__card-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-xl);
    line-height: 1.15;
    color: var(--color-ink);
    margin: 0;
}

.sfc-looks-archive__card-excerpt {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
    margin: 0;
}

.sfc-looks-archive__card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

.sfc-looks-archive__card-pieces { color: var(--color-primary); }
.sfc-looks-archive__card-sep { color: var(--color-primary); opacity: 0.5; }

.sfc-looks-archive__card-price .amount,
.sfc-looks-archive__card-price bdi {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--color-primary-deep);
    text-transform: none;
    letter-spacing: 0;
}

/* ──────────────────────────────────────────────────────────
 * 4. CAPSULE LIQUID GLASS — CTA « Composez votre table »
 * ────────────────────────────────────────────────────────── */
.sfc-looks-archive__capsule-wrap {
    margin: 0 auto var(--space-section);
}

.sfc-looks-archive__capsule {
    position: relative;
    isolation: isolate;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 56px);
    text-align: center;
    background:
        radial-gradient(120% 100% at 50% 0%,
            color-mix(in srgb, var(--color-primary) 25%, transparent) 0%,
            transparent 70%),
        color-mix(in srgb, var(--color-white) 70%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
            backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    border-radius: var(--radius-xl);
    box-shadow:
        0 1px 0 0 color-mix(in srgb, var(--color-white) 95%, transparent) inset,
        0 30px 80px -30px color-mix(in srgb, var(--color-primary-deep) 30%, transparent);
    overflow: hidden;
}

.sfc-looks-archive__capsule::before {
    content: "";
    position: absolute;
    top: -100px;
    left: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
    filter: blur(60px);
    opacity: 0.35;
    z-index: -1;
    pointer-events: none;
}

.sfc-looks-archive__capsule::after {
    content: "";
    position: absolute;
    bottom: -80px;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--color-gold, #c9a55c) 70%, transparent) 0%,
        transparent 70%);
    filter: blur(60px);
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
}

.sfc-looks-archive__capsule-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.sfc-looks-archive__capsule-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.1;
    color: var(--color-ink);
    margin: 0 0 var(--space-4);
}

.sfc-looks-archive__capsule-text {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
    margin: 0 auto var(--space-6);
    max-width: 540px;
}

.sfc-looks-archive__capsule-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.sfc-looks-archive__empty {
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-xl);
    color: var(--color-ink-soft);
    padding: var(--space-section) 0;
}

/* ──────────────────────────────────────────────────────────
 * RESPONSIVE
 * ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .sfc-looks-archive__featured-card {
        grid-template-columns: 1fr;
    }
    .sfc-looks-archive__featured-body {
        padding: var(--space-3) var(--space-2) var(--space-4);
    }
    .sfc-looks-archive__featured-meta {
        gap: var(--space-4);
    }
}

@media (max-width: 600px) {
    .sfc-looks-archive__hero {
        padding: clamp(56px, 14vw, 96px) 0 clamp(40px, 10vw, 72px);
    }
    .sfc-looks-archive__grid {
        grid-template-columns: 1fr;
        gap: var(--space-7);
    }
    .sfc-looks-archive__featured-meta {
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3) 0;
    }
    .sfc-looks-archive__capsule-actions {
        flex-direction: column;
        width: 100%;
    }
    .sfc-looks-archive__capsule-actions .sfc-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sfc-looks-archive__featured-card,
    .sfc-looks-archive__featured-img,
    .sfc-looks-archive__featured-cta,
    .sfc-looks-archive__card,
    .sfc-looks-archive__card-img,
    .sfc-looks-archive__card-media {
        transition: none;
    }
}