/**
 * Fashion Lookbook Pro — Frontend v2.0
 * Direction : « Atelier Éditorial » — Noemi Boutique
 *
 * Porcelaine + encre + taupe doré. Cormorant Garamond × Jost.
 * Vignettes couvertures magazine, hotspots couture → lien produit direct.
 * RTL-first : propriétés logiques uniquement. Namespace strict : .flp-
 */


/* ═══════════════════════════════════════════
   0. INTÉGRATION DANS LE THÈME

   Le lookbook est injecté dans the_content d'une page virtuelle : il vit
   donc DANS le conteneur du thème. On ne force plus 100vw par défaut —
   en RTL ce calcul provoquait un débordement horizontal. La largeur est
   désormais un réglage (Settings → Lookbook pages).
   ═══════════════════════════════════════════ */

/* ── Par défaut : on suit la largeur du thème ── */
.flp-wrap {
    max-inline-size: 100%;
}

/* ── Option « wide » ── */
.flp-width-wide .flp-archive,
.flp-width-wide .flp-lookbook {
    max-inline-size: 1600px;
}

/* ── Option « full bleed » ──
   Le fond va de bord à bord, mais le CONTENU garde une marge : des photos
   collées au bord de l'écran font amateur. La marge suit la taille de
   l'écran (clamp) plutôt qu'une valeur fixe. */
.flp-width-full .flp-wrap {
    inline-size: 100vw;
    max-inline-size: 100vw;
    margin-inline-start: calc(50% - 50vw);
    margin-inline-end: calc(50% - 50vw);
    padding-inline: clamp(1.25rem, 5vw, 5rem);
}

/* Le contenu reste centré et ne s'étire pas indéfiniment sur grand écran */
.flp-width-full .flp-archive,
.flp-width-full .flp-lookbook {
    max-inline-size: 1720px;
    margin-inline: auto;
}

/* Le débordement horizontal est le risque n°1 du plein écran, surtout en RTL */
.flp-width-full {
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════
   BANDEAU DE TITRE DU THÈME

   Sur /lookbooks/ et /lookbook/{slug}/ le hero du plugin porte déjà le
   titre. Le bandeau du thème fait doublon — et sur un post virtuel il
   affiche parfois un titre étranger. On le masque, en restant strictement
   limité à nos pages (body.flp-no-theme-title).
   ═══════════════════════════════════════════ */

.flp-no-theme-title .page-header,
.flp-no-theme-title .entry-header,
.flp-no-theme-title .page-title-bar,
.flp-no-theme-title .page-title-inner,
.flp-no-theme-title .title-wrapper,
.flp-no-theme-title .page-heading,
.flp-no-theme-title .breadcrumbs,
.flp-no-theme-title .breadcrumb,
.flp-no-theme-title .woocommerce-breadcrumb,
.flp-no-theme-title .elementor-page-title,
.flp-no-theme-title .ast-archive-description,
.flp-no-theme-title .wd-page-title,
.flp-no-theme-title .title-shop,
.flp-no-theme-title #mad_title,
.flp-no-theme-title .mfn-main-slider,
.flp-no-theme-title .porto-page-header,
.flp-no-theme-title .page-title-section,
.flp-no-theme-title > .site-content > .page-title,
.flp-no-theme-title .content-area > header.page-header {
    display: none;
}

/* Titre d'entrée vide laissé par notre filtre the_title */
.flp-page .entry-title:empty,
.flp-page .page-title:empty,
.flp-page h1:empty,
.flp-page h2:empty {
    display: none;
}

/* Le conteneur du thème garde parfois un padding énorme prévu pour le bandeau */
.flp-page .flp-wrap {
    margin-block-start: 0;
}


/* ═══════════════════════════════════════════
   FOND CONTINU + HAUT COLLÉ

   Le lookbook vit dans le conteneur du thème. Sans ces règles on voit une
   bande blanche au-dessus du hero et des liserés blancs sur les côtés.

   Le fond latéral est peint par box-shadow + clip-path plutôt que par des
   marges négatives en 100vw : aucun risque de débordement horizontal, et
   ça fonctionne identiquement en RTL.

   Tout est scopé à body.flp-page — le reste du site n'est pas touché.
   ═══════════════════════════════════════════ */

body.flp-page {
    background-color: var(--flp-set-page-bg, #F6F3EE);
}

/* Conteneurs de CONTENU rendus transparents.
   Volontairement, ni .container ni .row : ces classes servent aussi à
   l'en-tête et au pied de page, les vider casserait leur habillage. */
body.flp-page .site-content,
body.flp-page .site-main,
body.flp-page .content-area,
body.flp-page #content,
body.flp-page #primary,
body.flp-page .page-content,
body.flp-page .entry-content,
body.flp-page .main-content,
body.flp-page .hentry,
body.flp-page .type-page,
body.flp-page .elementor-widget-theme-post-content,
body.flp-page article.post,
body.flp-page article.page {
    background-color: transparent;
    background-image: none;
}

/* Fond du lookbook étendu de bord à bord, sans débordement possible */
body.flp-page .flp-wrap {
    background-color: var(--flp-set-page-bg, #F6F3EE);
    box-shadow: 0 0 0 100vmax var(--flp-set-page-bg, #F6F3EE);
    clip-path: inset(0 -100vmax);
}

/* Repli : si clip-path n'est pas supporté, on retire l'ombre pour éviter
   qu'elle ne recouvre la page entière. */
@supports not (clip-path: inset(0 -100vmax)) {
    body.flp-page .flp-wrap {
        box-shadow: none;
    }
}

/* En plein écran le wrap couvre déjà toute la largeur : l'ombre ferait
   doublon. Même spécificité que la règle ci-dessus, placée après — c'est
   l'ordre source qui tranche. */
body.flp-width-full .flp-wrap {
    box-shadow: none;
    clip-path: none;
}

/* ── Haut collé sous l'en-tête ── */
body.flp-flush-top .flp-wrap {
    padding-block-start: 0;
    margin-block-start: 0;
}

body.flp-flush-top .site-content,
body.flp-flush-top .site-main,
body.flp-flush-top .content-area,
body.flp-flush-top #content,
body.flp-flush-top #primary,
body.flp-flush-top .page-content,
body.flp-flush-top .entry-content,
body.flp-flush-top .main-content,
body.flp-flush-top .elementor-widget-theme-post-content,
body.flp-flush-top article.page {
    padding-block-start: 0;
    margin-block-start: 0;
}

/* Le hero garde sa respiration propre, indépendante du thème */
body.flp-flush-top .flp-archive__hero,
body.flp-flush-top .flp-lookbook__breadcrumb {
    padding-block-start: clamp(1.5rem, 4vw, 3.5rem);
}

/* ═══════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════ */
.flp-wrap {
    /* Couleurs */
    --flp-porcelain:   #F6F3EE;
    --flp-ink:         #191613;
    --flp-ink-soft:    #4A443C;
    --flp-taupe:       #A07B50;
    --flp-taupe-deep:  #85643E;
    --flp-hairline:    #E3DCD2;
    --flp-white:       #FFFFFF;
    --flp-veil:        rgba(25, 22, 19, 0.55);

    /* Typographie */
    --flp-font-display: 'Cormorant Garamond', 'Times New Roman', 'David Libre', serif;
    --flp-font-body:    'Jost', 'Helvetica Neue', 'Heebo', Arial, sans-serif;

    /* Échelle (ratio 1.25) */
    --flp-text-xs:   0.75rem;
    --flp-text-sm:   0.875rem;
    --flp-text-base: 1rem;
    --flp-text-lg:   1.25rem;
    --flp-text-xl:   1.563rem;
    --flp-text-2xl:  1.953rem;
    --flp-text-3xl:  2.441rem;
    --flp-text-4xl:  3.052rem;
    --flp-text-5xl:  3.815rem;

    /* Espacements */
    --flp-space-1:  0.25rem;
    --flp-space-2:  0.5rem;
    --flp-space-3:  0.75rem;
    --flp-space-4:  1rem;
    --flp-space-6:  1.5rem;
    --flp-space-8:  2rem;
    --flp-space-12: 3rem;
    --flp-space-16: 4rem;
    --flp-space-24: 6rem;

    /* Divers */
    --flp-tracking-wide: 0.18em;
    --flp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --flp-shadow-card: 0 24px 48px -24px rgba(25, 22, 19, 0.28);
    --flp-shadow-tip:  0 16px 40px -12px rgba(25, 22, 19, 0.35);

    background: var(--flp-porcelain);
    color: var(--flp-ink);
    font-family: var(--flp-font-body);
    font-size: var(--flp-text-base);
    line-height: 1.65;
    padding-block: clamp(2rem, 5vw, 4rem);
    padding-inline: clamp(1rem, 3vw, 2.5rem);
}

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

.flp-wrap img {
    max-inline-size: 100%;
    block-size: auto;
    display: block;
}

/* Focus visible — accessibilité clavier */
.flp-wrap a:focus-visible,
.flp-wrap button:focus-visible {
    outline: 2px solid var(--flp-taupe);
    outline-offset: 3px;
}

/* ═══════════════════════════════════════════
   2. PRIMITIVES PARTAGÉES
   ═══════════════════════════════════════════ */

/* Étiquette letterspaced (kicker) */
.flp-kicker {
    font-family: var(--flp-font-body);
    font-size: var(--flp-text-xs);
    font-weight: 500;
    letter-spacing: var(--flp-tracking-wide);
    text-transform: uppercase;
    color: var(--flp-taupe-deep);
    margin: 0 0 var(--flp-space-3);
}

/* Filet éditorial */
.flp-rule {
    inline-size: 56px;
    block-size: 1px;
    background: var(--flp-taupe);
    border: 0;
    margin-block: var(--flp-space-6);
    margin-inline: auto;
}

/* Boutons */
.flp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--flp-space-2);
    font-family: var(--flp-font-body);
    font-size: var(--flp-text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding-block: 0.85em;
    padding-inline: 2em;
    border: 1px solid var(--flp-ink);
    background: var(--flp-ink);
    color: var(--flp-porcelain);
    cursor: pointer;
    transition: background 0.3s var(--flp-ease), color 0.3s var(--flp-ease), border-color 0.3s var(--flp-ease);
}

.flp-btn:hover {
    background: var(--flp-taupe-deep);
    border-color: var(--flp-taupe-deep);
    color: var(--flp-white);
}

.flp-btn--outline {
    background: transparent;
    color: var(--flp-ink);
}

.flp-btn--outline:hover {
    background: var(--flp-ink);
    color: var(--flp-porcelain);
}

/* Notice */
.flp-notice {
    text-align: center;
    font-family: var(--flp-font-display);
    font-size: var(--flp-text-lg);
    font-style: italic;
    color: var(--flp-ink-soft);
    padding-block: var(--flp-space-16);
}

/* ═══════════════════════════════════════════
   3. RÉVÉLATION AU SCROLL
   ═══════════════════════════════════════════ */
.flp-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--flp-ease), transform 0.9s var(--flp-ease);
}

.flp-reveal.is-inview {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .flp-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .flp-wrap * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════
   4. PAGE COLLECTION (ARCHIVE) — HERO
   ═══════════════════════════════════════════ */
.flp-archive {
    max-inline-size: 1320px;
    margin-inline: auto;
}

.flp-archive__hero {
    text-align: center;
    max-inline-size: 760px;
    margin-inline: auto;
    margin-block-end: var(--flp-space-12);
}

.flp-archive__kicker {
    font-size: var(--flp-text-xs);
    font-weight: 500;
    letter-spacing: var(--flp-tracking-wide);
    text-transform: uppercase;
    color: var(--flp-taupe-deep);
    margin: 0 0 var(--flp-space-4);
}

.flp-archive__title {
    font-family: var(--flp-font-display);
    font-size: clamp(var(--flp-text-3xl), 6vw, var(--flp-text-5xl));
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--flp-ink);
}

.flp-archive__rule {
    inline-size: 56px;
    block-size: 1px;
    background: var(--flp-taupe);
    margin-block: var(--flp-space-6);
    margin-inline: auto;
}

.flp-archive__subtitle {
    font-family: var(--flp-font-display);
    font-style: italic;
    font-size: var(--flp-text-lg);
    color: var(--flp-ink-soft);
    margin: 0;
}

.flp-archive__share {
    margin-block-start: var(--flp-space-6);
    display: flex;
    justify-content: center;
}

/* ── Filtres collections ── */
.flp-archive__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--flp-space-2);
    margin-block-end: var(--flp-space-12);
    padding-block-end: var(--flp-space-6);
    border-block-end: 1px solid var(--flp-hairline);
}

.flp-filter {
    font-family: var(--flp-font-body);
    font-size: var(--flp-text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--flp-ink-soft);
    padding-block: var(--flp-space-2);
    padding-inline: var(--flp-space-4);
    border: 1px solid transparent;
    transition: color 0.25s var(--flp-ease), border-color 0.25s var(--flp-ease);
}

.flp-filter:hover {
    color: var(--flp-ink);
    border-color: var(--flp-hairline);
}

.flp-filter.is-active {
    color: var(--flp-taupe-deep);
    border-color: var(--flp-taupe);
}

/* ═══════════════════════════════════════════
   5. VIGNETTES — COUVERTURES DE MAGAZINE
   ═══════════════════════════════════════════ */
.flp-covers {
    display: grid;
    grid-template-columns: repeat(var(--flp-cols, 3), 1fr);
    gap: var(--flp-space-8) var(--flp-space-6);
}

.flp-cover {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--flp-white);
    box-shadow: 0 1px 0 var(--flp-hairline);
    transition: box-shadow 0.5s var(--flp-ease), transform 0.5s var(--flp-ease);
}

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

/* Cadre image ratio couverture 4:5 */
.flp-cover__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--flp-hairline);
}

.flp-cover__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transition: transform 1.2s var(--flp-ease);
}

.flp-cover:hover .flp-cover__img {
    transform: scale(1.05);
}

/* Voile dégradé bas pour lisibilité du titre */
.flp-cover__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(25, 22, 19, 0.62) 0%, rgba(25, 22, 19, 0.12) 42%, transparent 65%);
    pointer-events: none;
}

/* Numéro éditorial romain — signature */
.flp-cover__no {
    position: absolute;
    inset-block-start: var(--flp-space-4);
    inset-inline-start: var(--flp-space-4);
    font-family: var(--flp-font-display);
    font-style: italic;
    font-size: var(--flp-text-sm);
    letter-spacing: 0.14em;
    color: var(--flp-white);
    background: rgba(25, 22, 19, 0.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding-block: var(--flp-space-1);
    padding-inline: var(--flp-space-3);
    border: 1px solid rgba(246, 243, 238, 0.35);
}

/* Badge nombre de looks */
.flp-cover__count {
    position: absolute;
    inset-block-start: var(--flp-space-4);
    inset-inline-end: var(--flp-space-4);
    font-family: var(--flp-font-body);
    font-size: var(--flp-text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--flp-white);
    background: rgba(25, 22, 19, 0.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding-block: var(--flp-space-1);
    padding-inline: var(--flp-space-3);
    border: 1px solid rgba(246, 243, 238, 0.35);
}

/* Titre en overlay bas */
.flp-cover__meta {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: var(--flp-space-6);
    color: var(--flp-white);
}

.flp-cover__collection {
    font-size: var(--flp-text-xs);
    font-weight: 500;
    letter-spacing: var(--flp-tracking-wide);
    text-transform: uppercase;
    color: rgba(246, 243, 238, 0.85);
    margin: 0 0 var(--flp-space-2);
}

.flp-cover__title {
    font-family: var(--flp-font-display);
    font-size: var(--flp-text-2xl);
    font-weight: 500;
    line-height: 1.15;
    margin: 0;
    color: var(--flp-white);
}

/* Barre « Découvrir » qui glisse au survol */
.flp-cover__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--flp-space-4);
    padding-block: var(--flp-space-4);
    padding-inline: var(--flp-space-6);
    background: var(--flp-white);
    border-block-start: 1px solid var(--flp-hairline);
}

.flp-cover__cta-label {
    font-family: var(--flp-font-body);
    font-size: var(--flp-text-xs);
    font-weight: 500;
    letter-spacing: var(--flp-tracking-wide);
    text-transform: uppercase;
    color: var(--flp-ink);
    transition: color 0.3s var(--flp-ease);
}

.flp-cover__cta-arrow {
    font-family: var(--flp-font-display);
    font-size: var(--flp-text-lg);
    line-height: 1;
    color: var(--flp-taupe-deep);
    transform: translateX(0);
    transition: transform 0.4s var(--flp-ease);
}

.flp-cover:hover .flp-cover__cta-label { color: var(--flp-taupe-deep); }
.flp-cover:hover .flp-cover__cta-arrow { transform: translateX(6px); }

[dir="rtl"] .flp-cover__cta-arrow { transform: scaleX(-1); }
[dir="rtl"] .flp-cover:hover .flp-cover__cta-arrow { transform: scaleX(-1) translateX(6px); }

/* Mini-partage sur vignette */
.flp-mini-share {
    position: absolute;
    inset-block-end: calc(100% + var(--flp-space-2));
    inset-inline-end: 0;
}

/* État vide */
.flp-covers-empty {
    grid-column: 1 / -1;
}

/* ═══════════════════════════════════════════
   6. PAGE LOOKBOOK — EN-TÊTE ÉDITORIAL
   ═══════════════════════════════════════════ */
.flp-lookbook {
    max-inline-size: 1180px;
    margin-inline: auto;
}

.flp-lookbook__breadcrumb {
    display: flex;
    justify-content: center;
    gap: var(--flp-space-2);
    font-size: var(--flp-text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-block-end: var(--flp-space-8);
}

.flp-lookbook__breadcrumb a {
    color: var(--flp-ink-soft);
    text-decoration: none;
    transition: color 0.25s var(--flp-ease);
}

.flp-lookbook__breadcrumb a:hover { color: var(--flp-taupe-deep); }

.flp-lookbook__breadcrumb-sep { color: var(--flp-hairline); }

.flp-lookbook__header {
    text-align: center;
    max-inline-size: 720px;
    margin-inline: auto;
    margin-block-end: var(--flp-space-16);
}

.flp-lookbook__kicker {
    font-size: var(--flp-text-xs);
    font-weight: 500;
    letter-spacing: var(--flp-tracking-wide);
    text-transform: uppercase;
    color: var(--flp-taupe-deep);
    margin: 0 0 var(--flp-space-3);
}

.flp-lookbook__title {
    font-family: var(--flp-font-display);
    font-size: clamp(var(--flp-text-3xl), 6vw, var(--flp-text-5xl));
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0;
}

.flp-lookbook__rule {
    inline-size: 56px;
    block-size: 1px;
    background: var(--flp-taupe);
    margin-block: var(--flp-space-6);
    margin-inline: auto;
}

.flp-lookbook__description {
    font-family: var(--flp-font-display);
    font-size: var(--flp-text-lg);
    font-style: italic;
    line-height: 1.7;
    color: var(--flp-ink-soft);
}

.flp-lookbook__description p { margin-block: 0 var(--flp-space-3); }

/* Indice « shop the look » */
.flp-lookbook__hint {
    display: inline-flex;
    align-items: center;
    gap: var(--flp-space-2);
    font-size: var(--flp-text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--flp-ink-soft);
    margin-block-start: var(--flp-space-4);
}

.flp-lookbook__hint-dot {
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--flp-taupe-deep);
    background: var(--flp-white);
    box-shadow: 0 0 0 3px rgba(160, 123, 80, 0.25);
}

.flp-lookbook__share {
    display: flex;
    justify-content: center;
    margin-block-start: var(--flp-space-6);
}

/* ═══════════════════════════════════════════
   7. GALERIE — RYTHME ÉDITORIAL
   ═══════════════════════════════════════════ */
.flp-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--flp-space-12) var(--flp-space-8);
}

.flp-look { margin: 0; }

.flp-look--wide { grid-column: 1 / -1; }

.flp-look__frame {
    position: relative;
    overflow: hidden;
    background: var(--flp-hairline);
    box-shadow: 0 1px 0 var(--flp-hairline);
}

.flp-look__img {
    inline-size: 100%;
    block-size: auto;
}

.flp-look__caption {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: var(--flp-text-xs);
    font-family: var(--flp-font-display);
    font-style: italic;
    font-size: var(--flp-text-sm);
    color: var(--flp-ink-soft);
    text-align: center;
    padding-block-start: var(--flp-space-3);
}

/* ═══════════════════════════════════════════
   8. CONTENEUR DES NODES
   (le style des nodes lui-même est en section 14)
   ═══════════════════════════════════════════ */
.flp-nodes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ═══════════════════════════════════════════
   9. FOOTER LOOKBOOK
   ═══════════════════════════════════════════ */
.flp-lookbook__footer {
    text-align: center;
    margin-block-start: var(--flp-space-24);
    padding-block-start: var(--flp-space-12);
    border-block-start: 1px solid var(--flp-hairline);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--flp-space-6);
}

.flp-lookbook__footer-text {
    font-family: var(--flp-font-display);
    font-style: italic;
    font-size: var(--flp-text-xl);
    color: var(--flp-ink);
    margin: 0;
}

/* ═══════════════════════════════════════════
   10. PARTAGE SOCIAL
   ═══════════════════════════════════════════ */
.flp-share {
    display: flex;
    align-items: center;
    gap: var(--flp-space-2);
    flex-wrap: wrap;
    justify-content: center;
}

/* Reset : les <button> (Instagram, copier, partage natif) héritaient
   de la couleur de texte du thème. Les icônes en currentColor
   devenaient blanches sur fond blanc — donc invisibles. */
.flp-share .flp-share__btn,
.flp-share a.flp-share__btn,
.flp-share button.flp-share__btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    min-inline-size: 0;
    min-block-size: 0;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--flp-hairline);
    background: var(--flp-white);
    background-image: none;
    color: var(--flp-ink);          /* la couleur que suivent les icônes */
    font: inherit;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.3s var(--flp-ease), color 0.3s var(--flp-ease), border-color 0.3s var(--flp-ease), transform 0.3s var(--flp-ease);
}

.flp-share .flp-share__btn::before,
.flp-share .flp-share__btn::after {
    content: none;
}

.flp-share__btn svg {
    inline-size: 16px;
    block-size: 16px;
    /* Pas de `fill` ici : les icônes en traits déclarent fill="none"
       + stroke="currentColor" et une règle CSS les noircirait entièrement. */
}

.flp-share .flp-share__btn:hover,
.flp-share .flp-share__btn:focus-visible {
    background: var(--flp-ink);
    border-color: var(--flp-ink);
    color: var(--flp-porcelain);
    transform: translateY(-2px);
}

.flp-share .flp-share__btn.is-copied {
    background: var(--flp-taupe);
    border-color: var(--flp-taupe);
    color: var(--flp-white);
}

.flp-share__btn.is-copied {
    background: var(--flp-taupe);
    border-color: var(--flp-taupe);
    color: var(--flp-white);
}

/* Label « Partager » */
.flp-share__label {
    font-family: var(--flp-font-body);
    font-size: var(--flp-text-xs);
    font-weight: 500;
    letter-spacing: var(--flp-tracking-wide);
    text-transform: uppercase;
    color: var(--flp-ink-soft);
    margin-inline-end: var(--flp-space-2);
}

.flp-share__buttons {
    display: flex;
    align-items: center;
    gap: var(--flp-space-2);
    flex-wrap: wrap;
    justify-content: center;
}

/* Mini-partage (popover) */
.flp-mini-share {
    position: relative;
    display: inline-block;
}

.flp-mini-share .flp-mini-share__toggle,
.flp-mini-share .flp-mini-share__item {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: 1;
    text-transform: none;
    box-shadow: none;
    background-image: none;
}

.flp-mini-share__toggle {
    display: inline-grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    border: 1px solid var(--flp-hairline);
    background: var(--flp-white);
    color: var(--flp-ink);
    cursor: pointer;
    transition: background 0.3s var(--flp-ease), color 0.3s var(--flp-ease);
}

.flp-mini-share__toggle svg {
    inline-size: 15px;
    block-size: 15px;
}

.flp-mini-share__toggle:hover {
    background: var(--flp-ink);
    color: var(--flp-porcelain);
}

.flp-mini-share__popover {
    display: none;
    position: absolute;
    inset-block-end: calc(100% + 8px);
    inset-inline-end: 0;
    background: var(--flp-white);
    border: 1px solid var(--flp-hairline);
    box-shadow: var(--flp-shadow-tip);
    padding: var(--flp-space-2);
    gap: var(--flp-space-1);
    z-index: 10;
}

.flp-mini-share.is-open .flp-mini-share__popover { display: flex; }

.flp-mini-share__item {
    display: inline-grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--flp-ink);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s var(--flp-ease), color 0.25s var(--flp-ease);
}

.flp-mini-share__item svg {
    inline-size: 15px;
    block-size: 15px;
}

.flp-mini-share__item:hover {
    background: var(--flp-porcelain);
    color: var(--flp-taupe-deep);
}

.flp-mini-share__item.is-copied { color: var(--flp-taupe-deep); }

/* Champ copier (modal Instagram) */
.flp-copyfield {
    display: flex;
    gap: var(--flp-space-2);
    margin-block-end: var(--flp-space-4);
}

.flp-copyfield__input {
    flex: 1;
    min-inline-size: 0;
    font-family: var(--flp-font-body);
    font-size: var(--flp-text-sm);
    color: var(--flp-ink-soft);
    background: var(--flp-white);
    border: 1px solid var(--flp-hairline);
    padding-block: var(--flp-space-2);
    padding-inline: var(--flp-space-3);
}

.flp-copyfield__btn {
    font-family: var(--flp-font-body);
    font-size: var(--flp-text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--flp-ink);
    background: var(--flp-ink);
    color: var(--flp-porcelain);
    padding-block: var(--flp-space-2);
    padding-inline: var(--flp-space-4);
    cursor: pointer;
    transition: background 0.3s var(--flp-ease), border-color 0.3s var(--flp-ease);
}

.flp-copyfield__btn:hover,
.flp-copyfield__btn.is-copied {
    background: var(--flp-taupe-deep);
    border-color: var(--flp-taupe-deep);
}

/* Bouton ghost (modal) */
.flp-btn--ghost {
    background: transparent;
    border-color: var(--flp-hairline);
    color: var(--flp-ink);
}

.flp-btn--ghost:hover {
    border-color: var(--flp-ink);
    background: transparent;
    color: var(--flp-ink);
}

/* ═══════════════════════════════════════════
   11. MODAL INSTAGRAM
   ═══════════════════════════════════════════ */
.flp-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: var(--flp-space-4);
}

.flp-modal[hidden] { display: none; }

.flp-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--flp-veil);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.flp-modal__dialog {
    position: relative;
    background: var(--flp-porcelain);
    max-inline-size: 420px;
    inline-size: 100%;
    padding: var(--flp-space-8);
    box-shadow: var(--flp-shadow-card);
    text-align: center;
}

.flp-modal__close {
    position: absolute;
    inset-block-start: var(--flp-space-2);
    inset-inline-end: var(--flp-space-2);
    inline-size: 36px;
    block-size: 36px;
    border: 0;
    background: transparent;
    font-size: var(--flp-text-xl);
    color: var(--flp-ink-soft);
    cursor: pointer;
}

.flp-modal__title {
    font-family: var(--flp-font-display);
    font-size: var(--flp-text-xl);
    font-weight: 500;
    margin: 0 0 var(--flp-space-3);
}

.flp-modal__text {
    font-size: var(--flp-text-sm);
    color: var(--flp-ink-soft);
    margin: 0 0 var(--flp-space-6);
}

.flp-modal__actions {
    display: flex;
    flex-direction: column;
    gap: var(--flp-space-3);
}

/* ═══════════════════════════════════════════
   12. TOAST
   ═══════════════════════════════════════════ */
.flp-toast {
    position: fixed;
    inset-block-end: var(--flp-space-6, 1.5rem);
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(16px);
    background: #191613;
    color: #F6F3EE;
    font-family: 'Jost', 'Helvetica Neue', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    padding-block: 0.75rem;
    padding-inline: 1.5rem;
    box-shadow: 0 16px 40px -12px rgba(25, 22, 19, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
    z-index: 100000;
}

.flp-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}


/* ═══════════════════════════════════════════
   14. NODES — reset blindé + signature couture

   Le thème (Elementor, WooCommerce, Hello…) applique ses styles de
   <button> et de <a> à nos nodes : fond sombre, padding, border-radius.
   D'où les rectangles noirs. Ce reset annule tout, avec une spécificité
   assez haute pour gagner sans recourir à !important partout.
   ═══════════════════════════════════════════ */

.flp-nodes .flp-node,
.flp-nodes a.flp-node,
.flp-nodes button.flp-node,
.flp-look__frame .flp-node,
.flp-slide__frame .flp-node {
    /* Reset complet des styles hérités du thème */
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    border-radius: 0;
    text-transform: none;
    letter-spacing: normal;
    font: inherit;
    line-height: 1;
    text-decoration: none;
    color: inherit;
    min-inline-size: 0;
    min-block-size: 0;
    inline-size: calc(var(--flp-set-node-size, 18px) + 24px);
    block-size: calc(var(--flp-set-node-size, 18px) + 24px);

    /* Positionnement PHYSIQUE — un spot est ancré à un point de l'image,
       pas au sens de lecture. Aucun miroir en RTL. */
    position: absolute;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;

    /* Palette de la carte — chaîne de repli vers le thème du site */
    --flp-card-bg:     var(--flp-set-card-bg, #FFFFFF);
    --flp-card-text:   var(--flp-set-card-text, #191613);
    --flp-card-radius: var(--flp-set-card-radius, 2px);
    --flp-card-accent: var(--flp-set-card-accent,
                         var(--e-global-color-accent,
                         var(--wp--preset--color--primary,
                         var(--flp-taupe, #A07B50))));
}

.flp-nodes .flp-node::before,
.flp-nodes .flp-node::after {
    content: none; /* certains thèmes ajoutent des pseudo-éléments aux boutons */
}

.flp-nodes .flp-node:hover,
.flp-nodes .flp-node:focus,
.flp-nodes .flp-node:active {
    background: none;
    background-color: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%);
}



/* ── Halo pulsant ── */
.flp-node__pulse {
    position: absolute;
    inline-size: calc(var(--flp-set-node-size, 18px) + 12px);
    block-size: calc(var(--flp-set-node-size, 18px) + 12px);
    border-radius: 50%;
    border: 2px solid var(--flp-set-node-border, #FFFFFF);
    animation: flp-pulse 2.6s var(--flp-ease) infinite;
    pointer-events: none;
}

@keyframes flp-pulse {
    0%   { transform: scale(0.7); opacity: 0.85; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}

.flp-node:hover .flp-node__pulse,
.flp-node.is-open .flp-node__pulse {
    animation-play-state: paused;
    opacity: 0;
}

/* ── Pastille ── */
.flp-nodes .flp-node__dot {
    position: relative;
    inline-size: var(--flp-set-node-size, 18px);
    block-size: var(--flp-set-node-size, 18px);
    border-radius: 50%;
    background: var(--flp-set-node-bg, #FFFFFF);
    box-shadow:
        0 2px 10px rgba(25, 22, 19, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.55);
    transition:
        transform 0.4s var(--flp-ease),
        background 0.4s var(--flp-ease),
        box-shadow 0.4s var(--flp-ease);
    pointer-events: none;
}

/* Croix / plus, tracés en CSS pur */
.flp-node__dot::before,
.flp-node__dot::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    background: var(--flp-set-node-color, #191613);
    transition: transform 0.45s var(--flp-ease), background 0.4s var(--flp-ease);
}

.flp-node__dot::before {
    inline-size: 45%;
    block-size: 1.5px;
    transform: translate(-50%, -50%);
}

.flp-node__dot::after {
    inline-size: 1.5px;
    block-size: 45%;
    transform: translate(-50%, -50%);
}

/* ── Variante « dot » (défaut) ──
   Rond plein cerclé de blanc. Le contour est un box-shadow plutôt qu'une
   bordure : il ne consomme pas la taille du rond, donc `node_size`
   correspond exactement au diamètre visible du disque coloré.
   La double ombre (blanc puis noir diffus) le rend lisible aussi bien sur
   une robe blanche que sur du bitume sombre. */
.flp-node--dot .flp-node__dot {
    background: var(--flp-set-node-color, #2563EB);
    box-shadow:
        0 0 0 3px var(--flp-set-node-bg, #FFFFFF),
        0 2px 6px rgba(0, 0, 0, 0.28),
        0 4px 16px rgba(0, 0, 0, 0.22);
}

.flp-node--dot .flp-node__dot::before,
.flp-node--dot .flp-node__dot::after { content: none; }

/* Au survol : le rond grossit, le contour blanc s'épaissit */
.flp-node--dot:hover .flp-node__dot,
.flp-node--dot:focus-visible .flp-node__dot,
.flp-node--dot.is-open .flp-node__dot {
    background: var(--flp-set-node-color, #2563EB);
    transform: scale(1.22);
    box-shadow:
        0 0 0 4px var(--flp-set-node-bg, #FFFFFF),
        0 3px 10px rgba(0, 0, 0, 0.34),
        0 6px 22px rgba(0, 0, 0, 0.26);
}

/* Variante « ring » : cercle creux */
.flp-node--ring .flp-node__dot {
    background: transparent;
    border: 2px solid var(--flp-set-node-bg, #FFFFFF);
    box-shadow: 0 2px 10px rgba(25, 22, 19, 0.3);
}

.flp-node--ring .flp-node__dot::before,
.flp-node--ring .flp-node__dot::after { content: none; }

/* États : la pastille s'inverse */
.flp-node:hover .flp-node__dot,
.flp-node:focus-visible .flp-node__dot,
.flp-node.is-open .flp-node__dot {
    transform: scale(1.3);
    background: var(--flp-set-node-color, var(--flp-ink));
    box-shadow:
        0 4px 16px rgba(25, 22, 19, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.85);
}

.flp-node--ring:hover .flp-node__dot,
.flp-node--ring.is-open .flp-node__dot {
    border-color: var(--flp-set-node-color, var(--flp-ink));
}

.flp-node:hover .flp-node__dot::before,
.flp-node:focus-visible .flp-node__dot::before,
.flp-node.is-open .flp-node__dot::before,
.flp-node:hover .flp-node__dot::after,
.flp-node:focus-visible .flp-node__dot::after,
.flp-node.is-open .flp-node__dot::after {
    background: var(--flp-set-node-bg, #FFFFFF);
}

/* Variante « plus » : la croix ne pivote jamais — aucune règle nécessaire,
   c'est l'absence de la rotation ci-dessous qui la définit. Bloc conservé
   pour que ce soit un choix lisible et non un oubli. */
.flp-node--plus .flp-node__dot::before,
.flp-node--plus .flp-node__dot::after {
    transform: translate(-50%, -50%);
}

/* La croix pivote en × — uniquement en mode « cross » */
.flp-node--cross:hover .flp-node__dot::before,
.flp-node--cross:focus-visible .flp-node__dot::before,
.flp-node--cross.is-open .flp-node__dot::before,
.flp-node--cross:hover .flp-node__dot::after,
.flp-node--cross:focus-visible .flp-node__dot::after,
.flp-node--cross.is-open .flp-node__dot::after {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* ── Étiquette ── */
.flp-node__label {
    position: absolute;
    bottom: calc(100% - 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap;
    max-inline-size: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--flp-font-body);
    font-size: var(--flp-text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--flp-set-title-color, var(--flp-ink));
    background: var(--flp-set-title-bg, #FFFFFF);
    padding-block: 4px;
    padding-inline: var(--flp-space-3);
    box-shadow: 0 4px 14px rgba(25, 22, 19, 0.18);
    opacity: 0.96;
    transition: opacity 0.3s var(--flp-ease), transform 0.35s var(--flp-ease);
    pointer-events: none;
}



/* La carte prend le relais : l'étiquette s'efface pour ne pas se superposer */
.flp-node:hover .flp-node__label,
.flp-node:focus-visible .flp-node__label,
.flp-node.is-open .flp-node__label {
    opacity: 0;
}

/* ═══════════════════════════════════════════
   CARTE PRODUIT — palette du site
   Verticale, façon étiquette de vitrine : visuel pleine largeur,
   puis nom, prix et appel à l'action sur fond de la marque.
   ═══════════════════════════════════════════ */

.flp-nodes .flp-node__card {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    inline-size: 208px;
    display: block;
    background: var(--flp-card-bg);
    color: var(--flp-card-text);
    border-radius: var(--flp-card-radius);
    box-shadow:
        0 18px 44px -16px rgba(25, 22, 19, 0.35),
        0 0 0 1px rgba(25, 22, 19, 0.05);
    padding: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.38s var(--flp-ease),
        transform 0.38s var(--flp-ease),
        visibility 0.38s;
    z-index: 5;
    pointer-events: none;
    text-align: start;
}



.flp-node:hover .flp-node__card,
.flp-node:focus-visible .flp-node__card,
.flp-node.is-open .flp-node__card {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}



/* Pointe */
.flp-nodes .flp-node__card::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7px;
    border: 7px solid transparent;
    border-block-start-color: var(--flp-card-bg);
    filter: drop-shadow(0 3px 2px rgba(25, 22, 19, 0.12));
}

.flp-node--below .flp-node__card {
    bottom: auto;
    top: calc(100% + 14px);
}

.flp-node--below .flp-node__card::after {
    top: auto;
    bottom: 100%;
    border-block-start-color: transparent;
    border-block-end-color: var(--flp-card-bg);
    filter: drop-shadow(0 -3px 2px rgba(25, 22, 19, 0.12));
}

/* Visuel : pleine largeur, ratio mode */
.flp-nodes .flp-node__thumb {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    background: var(--flp-hairline, #E3DCD2);
    margin: 0;
    border-radius: 0;
    max-inline-size: none;
}

/* Bloc texte */
.flp-node__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--flp-space-3) var(--flp-space-3) calc(var(--flp-space-3) + 2px);
}

.flp-node__name {
    font-family: var(--flp-font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--flp-card-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.flp-node__price {
    font-family: var(--flp-font-display);
    font-size: 1.0625rem;
    line-height: 1.2;
    color: var(--flp-card-accent);
}

.flp-node__price del {
    opacity: 0.45;
    margin-inline-end: 0.4em;
    font-size: 0.78em;
}

.flp-node__price ins { text-decoration: none; }

/* Mention des deux lignes */
.flp-node__lines {
    display: inline-block;
    font-family: var(--flp-font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--flp-card-accent);
    background: color-mix(in srgb, var(--flp-card-accent) 12%, transparent);
    padding-block: 3px;
    padding-inline: 7px;
    border-radius: calc(var(--flp-card-radius) / 2);
    align-self: flex-start;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Repli si color-mix n'est pas supporté */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .flp-node__lines { background: rgba(160, 123, 80, 0.12); }
}

/* Appel à l'action */
.flp-node__go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--flp-space-2);
    margin-block-start: 3px;
    padding-block-start: 8px;
    border-block-start: 1px solid rgba(25, 22, 19, 0.08);
    font-family: var(--flp-font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--flp-card-text);
    transition: color 0.3s var(--flp-ease);
}

.flp-node__go::after {
    content: '→';
    font-family: var(--flp-font-display);
    font-size: 13px;
    color: var(--flp-card-accent);
    transform: translateX(0);
    transition: transform 0.35s var(--flp-ease);
}

[dir="rtl"] .flp-node__go::after { content: '←'; }

.flp-node:hover .flp-node__go { color: var(--flp-card-accent); }
.flp-node:hover .flp-node__go::after { transform: translateX(4px); }
[dir="rtl"] .flp-node:hover .flp-node__go::after { transform: translateX(-4px); }


/* ═══════════════════════════════════════════
   RESET GLOBAL DES BOUTONS DU PLUGIN

   Les thèmes e-commerce (Ecomus, WooCommerce, Elementor…) stylent tous les
   <button> : fond coloré, padding, arrondi, texte majuscule. Nos boutons
   d'interface héritaient de ce brun — bouton fermer sombre, onglets en
   pavés, quantités déformées.

   Un reset commun, avec une spécificité suffisante pour l'emporter sans
   recourir à !important.
   ═══════════════════════════════════════════ */

.flp-modal button.flp-quickview__close,
.flp-modal button.flp-modal__close,
.flp-modal button.flp-lines__tab,
.flp-modal button.flp-qty__btn,
.flp-modal button.flp-quickview__thumb,
.flp-modal button.flp-copyfield__btn,
.flp-modal button.flp-btn,
.flp-wrap button.flp-btn,
.flp-wrap button.flp-slides__nav,
.flp-wrap button.flp-slides__dot,
.flp-wrap button.flp-slides__playpause,
.flp-wrap button.flp-filter {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    border: 0;
    outline: 0;
    background-image: none;
    box-shadow: none;
    font-family: var(--flp-font-body);
    font-weight: 500;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    text-shadow: none;
    min-inline-size: 0;
    min-block-size: 0;
    inline-size: auto;
    block-size: auto;
    cursor: pointer;
}

/* Les thèmes ajoutent volontiers un ::before / ::after décoratif aux boutons */
.flp-modal button.flp-btn::before,
.flp-modal button.flp-btn::after,
.flp-wrap button.flp-btn::before,
.flp-wrap button.flp-btn::after,
.flp-modal button.flp-lines__tab::before,
.flp-modal button.flp-lines__tab::after,
.flp-modal button.flp-qty__btn::before,
.flp-modal button.flp-qty__btn::after {
    content: none;
}

/* …et un état :hover qui repeint le fond */
.flp-modal button.flp-quickview__close:hover,
.flp-modal button.flp-lines__tab:hover,
.flp-modal button.flp-qty__btn:hover,
.flp-modal button.flp-quickview__thumb:hover {
    background-image: none;
    box-shadow: none;
}


/* ═══════════════════════════════════════════
   BADGE INSTAGRAM SUR LES IMAGES
   Discret au repos, net au survol. En pied d'image pour ne jamais
   entrer en conflit avec les nodes produits.
   ═══════════════════════════════════════════ */

.flp-look__ig {
    position: absolute;
    inset-block-end: 14px;
    inset-inline-end: 14px;
    inline-size: 36px;
    block-size: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--flp-ink);
    box-shadow: 0 2px 10px rgba(25, 22, 19, 0.18);
    opacity: 0.55;
    z-index: 3;
    transition: opacity 0.3s var(--flp-ease), transform 0.3s var(--flp-ease), color 0.3s var(--flp-ease);
}

.flp-look__ig svg { inline-size: 17px; block-size: 17px; }

.flp-look__frame:hover .flp-look__ig { opacity: 1; }

.flp-look__ig:hover {
    color: #E1306C;
    transform: translateY(-2px);
    opacity: 1;
}

/* ═══════════════════════════════════════════
   15. QUICKVIEW — fiche produit
   Deux colonnes de hauteur égale, pilotées par le ratio de l'image.
   La colonne texte se centre verticalement quand le contenu est court,
   et défile quand il est long — sans jamais rogner le haut.
   ═══════════════════════════════════════════ */

.flp-quickview {
    padding: var(--flp-space-4);
}

.flp-quickview__dialog {
    position: relative;
    inline-size: 100%;
    max-inline-size: 880px;
    max-block-size: min(86vh, 620px);
    background: var(--flp-set-qv-bg, var(--flp-porcelain));
    color: var(--flp-set-qv-text, var(--flp-ink));
    border-radius: var(--flp-set-qv-radius, 16px);
    box-shadow: 0 40px 90px -34px rgba(25, 22, 19, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: flp-qv-in 0.45s var(--flp-ease);
}

@keyframes flp-qv-in {
    from { opacity: 0; transform: translateY(16px) scale(0.99); }
    to   { opacity: 1; transform: none; }
}

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

/* ── Fermer ── */
.flp-modal button.flp-quickview__close {
    position: absolute;
    top: 14px;
    right: 14px;
    inline-size: 34px;
    block-size: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.94);
    color: var(--flp-ink);
    z-index: 6;
    box-shadow: 0 2px 10px rgba(25, 22, 19, 0.16);
    transition: background-color 0.3s var(--flp-ease), color 0.3s var(--flp-ease), transform 0.3s var(--flp-ease);
}

[dir="rtl"] .flp-modal button.flp-quickview__close {
    right: auto;
    left: 14px;
}

.flp-modal button.flp-quickview__close svg {
    inline-size: 16px;
    block-size: 16px;
}

.flp-modal button.flp-quickview__close:hover {
    background-color: var(--flp-ink);
    color: var(--flp-porcelain);
    transform: rotate(90deg);
}

/* ── Chargement ── */
.flp-quickview__loading {
    display: grid;
    place-items: center;
    min-block-size: 380px;
}

.flp-quickview__loading[hidden] { display: none; }

.flp-spinner {
    inline-size: 28px;
    block-size: 28px;
    border: 1.5px solid var(--flp-hairline);
    border-block-start-color: var(--flp-set-qv-accent, var(--flp-taupe));
    border-radius: 50%;
    animation: flp-spin 0.8s linear infinite;
}

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

/* ── Corps ── */
.flp-quickview__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-block-size: 0;
    flex: 1;
}

.flp-quickview__body[hidden] { display: none; }

/* ── Colonne visuelle ── */
.flp-quickview__media {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--flp-white);
    min-inline-size: 0;
    min-block-size: 0;
}

.flp-quickview__stage {
    position: relative;
    flex: 1;
    min-block-size: 0;
    /* Ratio mode : sans lui, une photo 900x1600 imposait sa hauteur naturelle
       et laissait un grand vide dans la colonne texte. */
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.flp-quickview__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Pastille promo — ancrée au coin, jamais au milieu de l'image */
.flp-quickview__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--flp-font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--flp-white);
    background: var(--flp-set-qv-accent, var(--flp-taupe-deep));
    padding-block: 5px;
    padding-inline: 11px;
    z-index: 2;
}

[dir="rtl"] .flp-quickview__badge {
    left: auto;
    right: 14px;
}

.flp-quickview__badge[hidden] { display: none; }

/* Vignettes : bande centrée sous l'image */
.flp-quickview__thumbs {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--flp-white);
    border-block-start: 1px solid var(--flp-hairline);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}

.flp-quickview__thumbs::-webkit-scrollbar { display: none; }
.flp-quickview__thumbs[hidden] { display: none; }

.flp-modal button.flp-quickview__thumb {
    flex: 0 0 auto;
    inline-size: 42px;
    block-size: 54px;
    padding: 0;
    border-radius: calc(var(--flp-set-qv-radius, 16px) / 4);
    border: 1px solid var(--flp-hairline);
    background-color: var(--flp-white);
    overflow: hidden;
    opacity: 0.62;
    transition: opacity 0.25s var(--flp-ease), border-color 0.25s var(--flp-ease);
}

.flp-quickview__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.flp-modal button.flp-quickview__thumb.is-active,
.flp-modal button.flp-quickview__thumb:hover {
    opacity: 1;
    border-color: var(--flp-set-qv-accent, var(--flp-taupe));
}

/* ── Colonne informations ── */
.flp-quickview__info {
    display: flex;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    overflow-y: auto;
    min-block-size: 0;
    text-align: start;
}

/* margin auto : centre verticalement s'il reste de la place,
   sans rogner le haut quand le contenu déborde. */
.flp-quickview__inner {
    inline-size: 100%;
    margin-block: auto;
    display: flex;
    flex-direction: column;
    gap: var(--flp-space-4);
}

/* ── Sélecteur de ligne ── */
.flp-lines {
    display: inline-flex;
    padding: 3px;
    background: var(--flp-white);
    border: 1px solid var(--flp-hairline);
    border-radius: 999px;
    align-self: flex-start;
    max-inline-size: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.flp-lines::-webkit-scrollbar { display: none; }
.flp-lines[hidden] { display: none; }

.flp-modal button.flp-lines__tab {
    flex: 0 0 auto;
    border-radius: 999px;
    background-color: transparent;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--flp-ink-soft);
    padding-block: 0.7em;
    padding-inline: 1.3em;
    white-space: nowrap;
    transition: background-color 0.3s var(--flp-ease), color 0.3s var(--flp-ease);
}

.flp-modal button.flp-lines__tab:hover { color: var(--flp-ink); }

.flp-modal button.flp-lines__tab.is-active {
    background-color: var(--flp-set-qv-accent, var(--flp-ink));
    color: #FFFFFF;
}

/* ── Titre & prix ── */
.flp-quickview__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flp-quickview__name {
    font-family: var(--flp-font-display);
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    font-weight: 500;
    line-height: 1.22;
    margin: 0;
    color: var(--flp-set-qv-text, var(--flp-ink));
}

.flp-quickview__price {
    font-family: var(--flp-font-display);
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--flp-set-qv-accent, var(--flp-taupe-deep));
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.flp-quickview__price del {
    font-size: 0.78em;
    opacity: 0.45;
}

.flp-quickview__price ins { text-decoration: none; }

/* ── Description ── */
.flp-quickview__desc {
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--flp-set-qv-text, var(--flp-ink-soft));
    opacity: 0.8;
    padding-block-start: var(--flp-space-3);
    border-block-start: 1px solid var(--flp-hairline);
}

.flp-quickview__desc[hidden] { display: none; }
.flp-quickview__desc p { margin-block: 0 var(--flp-space-2); }
.flp-quickview__desc p:last-child { margin-block-end: 0; }

/* ── Attributs ──
   Une ligne par attribut : intitulé en petites capitales au-dessus,
   valeurs en pastilles. L'ancienne grille collait « SIZE » à « S, M, L ». */
.flp-quickview__attrs {
    display: flex;
    flex-direction: column;
    gap: var(--flp-space-3);
    margin: 0;
    padding-block: var(--flp-space-3);
    border-block: 1px solid var(--flp-hairline);
}

.flp-quickview__attrs[hidden] { display: none; }

.flp-quickview__attrs > div { margin: 0; }

.flp-quickview__attrs dt {
    display: block;
    font-family: var(--flp-font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--flp-ink-soft);
    opacity: 0.65;
    margin: 0 0 6px;
}

.flp-quickview__attrs dd {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    font-size: 0.8125rem;
}

.flp-quickview__attrs dd span {
    border: 1px solid var(--flp-hairline);
    background: var(--flp-white);
    padding-block: 4px;
    padding-inline: 10px;
    line-height: 1.2;
}


/* ── Sélecteurs de variante ── */
.flp-variations {
    display: flex;
    flex-direction: column;
    gap: var(--flp-space-4);
    padding-block: var(--flp-space-3);
    border-block-end: 1px solid var(--flp-hairline);
}

/* Filet supérieur seulement si rien ne précède déjà avec un filet */
.flp-quickview__head + .flp-variations {
    border-block-start: 1px solid var(--flp-hairline);
}

.flp-variations[hidden] { display: none; }

.flp-variations__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flp-variations__label {
    font-family: var(--flp-font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--flp-ink-soft);
    opacity: 0.7;
}

.flp-variations__options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.flp-modal button.flp-variations__opt {
    min-inline-size: 44px;
    padding-block: 9px;
    padding-inline: 14px;
    border: 1px solid var(--flp-hairline);
    border-radius: calc(var(--flp-set-qv-radius, 16px) / 3);
    background-color: var(--flp-white);
    color: var(--flp-ink);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition:
        border-color 0.25s var(--flp-ease),
        background-color 0.25s var(--flp-ease),
        color 0.25s var(--flp-ease);
}

.flp-modal button.flp-variations__opt:hover:not(:disabled) {
    border-color: var(--flp-set-qv-accent, var(--flp-taupe));
}

.flp-modal button.flp-variations__opt.is-active {
    background-color: var(--flp-set-qv-accent, var(--flp-ink));
    border-color: var(--flp-set-qv-accent, var(--flp-ink));
    color: #FFFFFF;
}

/* Combinaison indisponible : barrée plutôt que masquée, pour que la cliente
   comprenne que la taille existe mais qu'elle est épuisée. */
.flp-modal button.flp-variations__opt.is-unavailable {
    color: var(--flp-ink-soft);
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.flp-modal button.flp-variations__opt:disabled {
    pointer-events: none;
}

/* Bouton panier indisponible : présent mais clairement inactif.
   Le bouton ne disparaît jamais — il informe. */
.flp-modal button.flp-btn.is-waiting,
.flp-modal button.flp-btn--primary.is-waiting,
.flp-modal button.flp-btn:disabled {
    background-color: var(--flp-hairline);
    border-color: var(--flp-hairline);
    color: var(--flp-ink-soft);
    opacity: 0.85;
    cursor: not-allowed;
}

/* ── Stock ── */
.flp-quickview__stock {
    font-size: 0.8125rem;
    margin: 0;
    color: var(--flp-ink-soft);
}

.flp-quickview__stock[hidden] { display: none; }
.flp-quickview__stock.is-out { color: #B4432E; font-weight: 500; }

/* ── Actions ── */
.flp-quickview__actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding-block-start: var(--flp-space-2);
}

.flp-quickview__actions .flp-btn {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding-block: 1.05em;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    border-radius: calc(var(--flp-set-qv-radius, 16px) / 3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La quantité s'aligne sur le même arrondi */
.flp-quickview__actions .flp-qty {
    border-radius: calc(var(--flp-set-qv-radius, 16px) / 3);
    overflow: hidden;
}

.flp-quickview__actions .flp-btn[hidden] { display: none; }

/* Le reset global remet border:0 — on redéclare ici, avec une spécificité
   supérieure, pour que le bouton principal garde son aspect plein. */
.flp-modal button.flp-btn--primary,
.flp-modal a.flp-btn--primary,
.flp-wrap button.flp-btn--primary,
.flp-wrap a.flp-btn--primary {
    background-color: var(--flp-set-qv-accent, var(--flp-ink));
    border: 1px solid var(--flp-set-qv-accent, var(--flp-ink));
    color: #FFFFFF;
}

.flp-modal button.flp-btn--primary:hover:not(:disabled),
.flp-modal a.flp-btn--primary:hover,
.flp-wrap button.flp-btn--primary:hover:not(:disabled) {
    background-color: var(--flp-ink);
    border-color: var(--flp-ink);
    color: var(--flp-porcelain);
}

.flp-modal button.flp-btn--primary.is-success {
    background-color: #2E7D5B;
    border-color: #2E7D5B;
}

/* Quantité */
.flp-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--flp-hairline);
    background: var(--flp-white);
    flex: 0 0 auto;
}

.flp-qty[hidden] { display: none; }

.flp-modal button.flp-qty__btn {
    inline-size: 34px;
    background-color: transparent;
    color: var(--flp-ink);
    font-size: 1rem;
    transition: background-color 0.25s var(--flp-ease);
}

.flp-modal button.flp-qty__btn:hover { background-color: var(--flp-porcelain); }

.flp-qty__input {
    inline-size: 42px;
    border: 0;
    border-inline: 1px solid var(--flp-hairline);
    text-align: center;
    font-family: var(--flp-font-body);
    font-size: 0.8125rem;
    background: transparent;
    color: var(--flp-ink);
    -moz-appearance: textfield;
}

.flp-qty__input::-webkit-outer-spin-button,
.flp-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Pied de fiche : liens discrets, plus de barre pleine largeur ── */
.flp-quickview__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--flp-space-6);
    flex-wrap: wrap;
    padding-block-start: 2px;
}

.flp-quickview__more,
.flp-quickview__instagram {
    font-family: var(--flp-font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--flp-ink-soft);
    border-block-end: 1px solid var(--flp-hairline);
    padding-block-end: 3px;
    transition: color 0.25s var(--flp-ease), border-color 0.25s var(--flp-ease);
}

.flp-quickview__more:hover,
.flp-quickview__instagram:hover {
    color: var(--flp-set-qv-accent, var(--flp-taupe-deep));
    border-block-end-color: currentColor;
}

.flp-quickview__instagram[hidden] { display: none; }

/* ═══════════════════════════════════════════
   16. SLIDES / CARROUSEL / GALERIE
   ═══════════════════════════════════════════ */

.flp-slides {
    margin-inline: auto;
    position: relative;
}

.flp-slides__viewport { overflow: hidden; }

/* ── Carrousel ── */
.flp-slides--carousel .flp-slides__track {
    display: flex;
    transition: transform 0.7s var(--flp-ease);
    will-change: transform;
}

.flp-slides--carousel .flp-slide {
    flex: 0 0 100%;
    min-inline-size: 0;
}

@media (prefers-reduced-motion: reduce) {
    .flp-slides--carousel .flp-slides__track { transition: none; }
}

/* ── Galerie ── */
.flp-slides--gallery .flp-slides__track {
    display: grid;
    grid-template-columns: repeat(var(--flp-cols, 3), 1fr);
    gap: var(--flp-space-6);
}

.flp-slide__figure { margin: 0; }

.flp-slide__frame {
    position: relative;
    overflow: hidden;
    background: var(--flp-hairline);
}

.flp-slide__img {
    inline-size: 100%;
    block-size: var(--flp-slide-height, auto);
    object-fit: cover;
    display: block;
}

.flp-slide__caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-block: var(--flp-space-3);
    text-align: center;
}

.flp-slide__collection {
    font-size: var(--flp-text-xs);
    font-weight: 500;
    letter-spacing: var(--flp-tracking-wide);
    text-transform: uppercase;
    color: var(--flp-taupe-deep);
}

.flp-slide__title {
    font-family: var(--flp-font-display);
    font-size: var(--flp-text-lg);
    color: var(--flp-ink);
    text-decoration: none;
    transition: color 0.25s var(--flp-ease);
}

.flp-slide__title:hover { color: var(--flp-taupe-deep); }

/* ── Navigation ── */
.flp-slides__nav {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 44px;
    block-size: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--flp-hairline);
    border-radius: 50%;
    background: var(--flp-white);
    color: var(--flp-ink);
    font-size: var(--flp-text-lg);
    cursor: pointer;
    z-index: 3;
    transition: background 0.3s var(--flp-ease), color 0.3s var(--flp-ease);
}

.flp-slides__nav:hover {
    background: var(--flp-ink);
    color: var(--flp-porcelain);
}

.flp-slides__nav--prev { inset-inline-start: var(--flp-space-3); }
.flp-slides__nav--next { inset-inline-end: var(--flp-space-3); }

[dir="rtl"] .flp-slides__nav span { display: inline-block; transform: scaleX(-1); }

/* ── Pagination ── */
.flp-slides__dots {
    display: flex;
    justify-content: center;
    gap: var(--flp-space-2);
    padding-block-start: var(--flp-space-4);
}

.flp-slides__dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    border: 1px solid var(--flp-taupe);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s var(--flp-ease), transform 0.3s var(--flp-ease);
}

.flp-slides__dot.is-active {
    background: var(--flp-taupe);
    transform: scale(1.3);
}

/* ── Lecture / pause ── */
.flp-slides__playpause {
    position: absolute;
    inset-block-end: var(--flp-space-3);
    inset-inline-end: var(--flp-space-3);
    inline-size: 34px;
    block-size: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--flp-hairline);
    border-radius: 50%;
    background: var(--flp-white);
    cursor: pointer;
    z-index: 3;
}

.flp-slides__playpause-icon {
    inline-size: 0;
    block-size: 0;
    border-block: 6px solid transparent;
    border-inline-start: 9px solid var(--flp-ink);
    margin-inline-start: 2px;
}

/* En lecture : icône pause (deux barres) */
.flp-slides.is-playing .flp-slides__playpause-icon {
    inline-size: 9px;
    block-size: 11px;
    border: 0;
    margin-inline-start: 0;
    background: linear-gradient(
        to right,
        var(--flp-ink) 0 3px,
        transparent 3px 6px,
        var(--flp-ink) 6px 9px
    );
}

/* ═══════════════════════════════════════════
   17. BLOC FICHE PRODUIT
   ═══════════════════════════════════════════ */

.flp-product-lookbooks {
    padding-block: var(--flp-space-12);
    margin-block-start: var(--flp-space-8);
}

.flp-product-lookbooks__header {
    text-align: center;
    margin-block-end: var(--flp-space-8);
}

.flp-product-lookbooks__title {
    font-family: var(--flp-font-display);
    font-size: clamp(var(--flp-text-xl), 3.5vw, var(--flp-text-3xl));
    font-weight: 500;
    margin: 0;
    color: var(--flp-ink);
}

.flp-product-lookbooks__cta {
    text-align: center;
    margin-block-start: var(--flp-space-8);
}

/* ═══════════════════════════════════════════
   18. RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .flp-covers { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .flp-wrap {
        padding-block: var(--flp-space-8);
        padding-inline: var(--flp-space-4);
    }

    .flp-covers {
        grid-template-columns: 1fr;
        gap: var(--flp-space-6);
    }

    .flp-gallery {
        grid-template-columns: 1fr;
        gap: var(--flp-space-8);
    }

    .flp-look--wide { grid-column: auto; }

    .flp-lookbook__header { margin-block-end: var(--flp-space-8); }

    .flp-node {
        inline-size: 44px;  /* cible tactile 44px minimum */
        block-size: 44px;
    }

    .flp-node__card { inline-size: 210px; }

    /* Fiche : empilée, image plafonnée pour laisser voir les infos */
    .flp-quickview { padding: 0; }

    .flp-quickview__dialog {
        max-block-size: 100vh;
        max-block-size: 100dvh;
        border-radius: 0;
    }

    .flp-quickview__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        overflow-y: auto;
    }

    .flp-quickview__stage {
        /* Sur mobile la hauteur prime sur le ratio : on plafonne pour que
           les options et le bouton panier restent visibles sans scroller. */
        aspect-ratio: auto;
        block-size: 42vh;
        max-block-size: 42vh;
    }

    .flp-quickview__info {
        padding: var(--flp-space-6);
        overflow: visible;
    }

    .flp-quickview__inner { margin-block: 0; }

    .flp-quickview__actions {
        flex-wrap: wrap;
        position: sticky;
        inset-block-end: 0;
        background: var(--flp-set-qv-bg, var(--flp-porcelain));
        padding-block: var(--flp-space-3);
    }

    .flp-quickview__actions .flp-btn { flex: 1 1 100%; }

    .flp-qty { align-self: stretch; justify-content: center; flex: 1 1 100%; }

    .flp-lines { inline-size: 100%; }
    .flp-modal button.flp-lines__tab { flex: 1; text-align: center; }

    .flp-slides--gallery .flp-slides__track { grid-template-columns: 1fr; }

    .flp-slides__nav { inline-size: 38px; block-size: 38px; }
}