/* =============================================================================
   Flowizy Print — design system
   -----------------------------------------------------------------------------
   Tokens, base reset, layout primitives, components. Organised by concern so a
   developer can jump straight to the section they need.

   Sections
     1. Tokens (custom properties)
     2. Reset & base
     3. Typography
     4. Layout primitives
     5. Buttons & inputs
     6. Header / nav
     7. Hero & sections
     8. Cards (category, product, post, testimonial)
     9. WooCommerce overrides
    10. FAQ
    11. Gabarits + about
    12. Footer
    13. Utilities & responsive
   ============================================================================= */

/* ---------- 1. Tokens ----------------------------------------------------- */
:root {
    /* Brand palette — Flowizy "ink" navy + a saturated coral accent. */
    --fp-ink-900: #0b1020;
    --fp-ink-800: #131a36;
    --fp-ink-700: #1d2748;
    --fp-ink-500: #3a4878;
    --fp-ink-300: #8a93b8;
    --fp-ink-100: #e6e9f5;
    --fp-paper: #f7f6f2;
    --fp-paper-2: #fdfcf8;
    --fp-white: #ffffff;

    --fp-accent: #ff5b3a;        /* "Print Coral" — primary CTA */
    --fp-accent-2: #ffb347;      /* warm secondary, gradients */
    --fp-mint: #5be1c4;          /* freshness accents */
    --fp-lemon: #f6e7a0;         /* highlights */
    --fp-violet: #6a5ae0;        /* tertiary, badges */

    --fp-success: #1aa873;
    --fp-warning: #f0a85b;
    --fp-danger: #e0492f;

    /* Surfaces & lines */
    --fp-surface: var(--fp-white);
    --fp-surface-alt: var(--fp-paper);
    --fp-border: rgba(11, 16, 32, 0.08);
    --fp-border-strong: rgba(11, 16, 32, 0.18);

    /* Shadows */
    --fp-shadow-sm: 0 1px 2px rgba(11,16,32,0.04), 0 1px 1px rgba(11,16,32,0.04);
    --fp-shadow-md: 0 8px 30px -10px rgba(11,16,32,0.18);
    --fp-shadow-lg: 0 30px 80px -30px rgba(11,16,32,0.35);
    --fp-shadow-glow: 0 18px 40px -16px rgba(255,91,58,0.45);

    /* Radii */
    --fp-radius-xs: 6px;
    --fp-radius-sm: 10px;
    --fp-radius: 16px;
    --fp-radius-lg: 24px;
    --fp-radius-xl: 36px;
    --fp-radius-pill: 999px;

    /* Type */
    --fp-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --fp-font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;

    /* Spacing scale (8pt grid). */
    --fp-space-1: 4px;
    --fp-space-2: 8px;
    --fp-space-3: 12px;
    --fp-space-4: 16px;
    --fp-space-5: 24px;
    --fp-space-6: 32px;
    --fp-space-7: 48px;
    --fp-space-8: 64px;
    --fp-space-9: 96px;
    --fp-space-10: 128px;

    /* Layout */
    --fp-container: 1240px;
    --fp-container-narrow: 880px;
    --fp-gutter: clamp(20px, 4vw, 40px);

    --fp-transition: 200ms ease;
}

/* ---------- 2. Reset & base ---------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--fp-font-body);
    color: var(--fp-ink-900);
    background: var(--fp-paper);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--fp-transition);
}
a:hover { color: var(--fp-accent); }

button { font: inherit; cursor: pointer; }

ul, ol { padding-left: 1.2em; margin: 0 0 var(--fp-space-4); }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.fp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--fp-ink-900);
    color: var(--fp-white);
    padding: 8px 12px;
    z-index: 9999;
}
.fp-skip:focus { left: 12px; top: 12px; }

.fp-no-scroll { overflow: hidden; }

/* ---------- 3. Typography ------------------------------------------------ */
.fp-display {
    font-family: var(--fp-font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 5vw + 1rem, 5rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 var(--fp-space-5);
    color: var(--fp-ink-900);
}

h1, h2, h3, h4, h5 {
    font-family: var(--fp-font-display);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 var(--fp-space-3);
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 3vw + 1rem, 3.2rem); }
h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); }
h3 { font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 var(--fp-space-4); }

.fp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-2);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fp-accent);
    background: rgba(255,91,58,0.08);
    padding: 6px 12px;
    border-radius: var(--fp-radius-pill);
    margin-bottom: var(--fp-space-4);
}
.fp-eyebrow--light {
    color: var(--fp-paper);
    background: rgba(255,255,255,0.12);
}

.fp-lead {
    font-size: clamp(1.05rem, 0.6vw + 1rem, 1.25rem);
    color: var(--fp-ink-500);
    max-width: 60ch;
}

.fp-prose h2 { margin-top: var(--fp-space-7); }
.fp-prose h3 { margin-top: var(--fp-space-6); }
.fp-prose a { color: var(--fp-accent); text-decoration: underline; text-underline-offset: 4px; }
.fp-prose blockquote {
    border-left: 4px solid var(--fp-accent);
    padding: var(--fp-space-3) var(--fp-space-5);
    background: var(--fp-surface);
    border-radius: var(--fp-radius-sm);
    margin: var(--fp-space-5) 0;
    font-style: italic;
}

.fp-link { color: var(--fp-accent); font-weight: 600; }
.fp-link:hover { color: var(--fp-ink-900); }

/* ---------- 4. Layout primitives ----------------------------------------- */
.fp-container {
    width: 100%;
    max-width: var(--fp-container);
    margin: 0 auto;
    padding-left: var(--fp-gutter);
    padding-right: var(--fp-gutter);
}
.fp-container--narrow { max-width: var(--fp-container-narrow); }

.fp-section {
    padding-top: clamp(64px, 8vw, 120px);
    padding-bottom: clamp(64px, 8vw, 120px);
}
.fp-section--tight { padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 72px); }
.fp-section--dark {
    background: var(--fp-ink-900);
    color: var(--fp-paper);
}
.fp-section--dark h1,
.fp-section--dark h2,
.fp-section--dark h3 { color: var(--fp-white); }
.fp-section--dark .fp-lead { color: rgba(255,255,255,0.7); }
.fp-section--paper { background: var(--fp-paper-2); }

.fp-section__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fp-space-3);
    margin-bottom: var(--fp-space-7);
    max-width: 740px;
}
.fp-section__head--center {
    align-items: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.fp-section__head--row {
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
    max-width: none;
    gap: var(--fp-space-5);
    flex-wrap: wrap;
}

.fp-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fp-space-3);
    align-items: center;
}

.fp-page-head {
    padding: clamp(40px, 6vw, 80px) 0 clamp(24px, 4vw, 40px);
}
.fp-page-head__title {
    font-family: var(--fp-font-display);
    font-size: clamp(2rem, 3vw + 1rem, 3.2rem);
    margin: 0;
}

/* ---------- 5. Buttons & inputs ------------------------------------------ */
.fp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-2);
    padding: 12px 22px;
    border-radius: var(--fp-radius-pill);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    transition: transform var(--fp-transition), background var(--fp-transition), color var(--fp-transition), box-shadow var(--fp-transition);
    cursor: pointer;
    will-change: transform;
}
.fp-btn:hover { transform: translateY(-2px); }
.fp-btn:active { transform: translateY(0); }

.fp-btn--primary {
    background: var(--fp-accent);
    color: var(--fp-white);
    box-shadow: var(--fp-shadow-glow);
}
.fp-btn--primary:hover { background: #ff4823; color: var(--fp-white); }

.fp-btn--dark {
    background: var(--fp-ink-900);
    color: var(--fp-white);
}
.fp-btn--dark:hover { background: var(--fp-ink-700); color: var(--fp-white); }

.fp-btn--ghost {
    background: transparent;
    color: var(--fp-ink-900);
    border-color: var(--fp-border-strong);
}
.fp-btn--ghost:hover { background: var(--fp-ink-900); color: var(--fp-white); border-color: var(--fp-ink-900); }

.fp-btn--ghost-light {
    background: transparent;
    color: var(--fp-white);
    border-color: rgba(255,255,255,0.3);
}
.fp-btn--ghost-light:hover { background: var(--fp-white); color: var(--fp-ink-900); }

.fp-btn--sm { padding: 8px 14px; font-size: 0.85rem; }
.fp-btn--lg { padding: 16px 28px; font-size: 1.05rem; }

.fp-icon-btn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--fp-surface);
    color: var(--fp-ink-900);
    border: 1px solid var(--fp-border);
    transition: background var(--fp-transition), color var(--fp-transition);
}
.fp-icon-btn:hover { background: var(--fp-ink-900); color: var(--fp-white); }

.fp-icon { width: 24px; height: 24px; flex: none; }
.fp-icon--xs { width: 14px; height: 14px; }
.fp-icon--sm { width: 18px; height: 18px; }
.fp-icon--lg { width: 32px; height: 32px; }

.fp-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--fp-radius-sm);
    border: 1px solid var(--fp-border-strong);
    background: var(--fp-white);
    font: inherit;
    color: var(--fp-ink-900);
    transition: border-color var(--fp-transition), box-shadow var(--fp-transition);
}
.fp-input:focus {
    outline: none;
    border-color: var(--fp-accent);
    box-shadow: 0 0 0 4px rgba(255,91,58,0.15);
}

.fp-search {
    display: flex;
    gap: var(--fp-space-2);
    align-items: stretch;
}

.fp-newsletter {
    display: flex;
    gap: var(--fp-space-2);
    align-items: stretch;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--fp-radius-pill);
    padding: 4px;
}
.fp-newsletter .fp-input {
    background: transparent;
    border: none;
    color: var(--fp-white);
    padding-left: 18px;
    flex: 1 1 auto;
    min-width: 0;
}
.fp-newsletter .fp-input::placeholder { color: rgba(255,255,255,0.5); }
.fp-newsletter .fp-btn { white-space: nowrap; flex: none; }

/* ---------- 6. Header / nav ---------------------------------------------- */
.fp-promo-bar {
    background: var(--fp-ink-900);
    color: var(--fp-paper);
    font-size: 0.85rem;
}
.fp-promo-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-3);
    padding: 8px 0;
    flex-wrap: wrap;
}
.fp-promo-bar__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--fp-accent);
    box-shadow: 0 0 0 6px rgba(255,91,58,0.15);
}
.fp-promo-bar__link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--fp-accent-2);
    font-weight: 600;
}

.fp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--fp-transition), background var(--fp-transition);
}
.fp-header.is-scrolled {
    border-bottom-color: var(--fp-border);
    background: rgba(247,246,242,0.92);
}
.fp-header__inner {
    display: flex;
    align-items: center;
    gap: var(--fp-space-5);
    padding-top: 14px;
    padding-bottom: 14px;
}
.fp-header__brand { flex: 0 0 auto; }
.fp-header__nav { flex: 1 1 auto; }
.fp-header__actions {
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
    margin-left: auto;
}

.fp-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-2);
    font-family: var(--fp-font-display);
    font-weight: 800;
    color: var(--fp-ink-900);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}
.fp-brand__mark {
    width: 36px; height: 36px;
    display: inline-grid;
    place-items: center;
    color: var(--fp-accent);
    background: var(--fp-ink-900);
    border-radius: 12px;
}
.fp-brand--footer { color: var(--fp-white); }
.fp-brand--footer .fp-brand__mark { background: var(--fp-white); color: var(--fp-accent); }

.fp-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--fp-space-5);
    justify-content: center;
}
.fp-menu li > a {
    font-weight: 500;
    color: var(--fp-ink-800);
    padding: 8px 4px;
    position: relative;
}
.fp-menu li > a::after {
    content: '';
    position: absolute;
    left: 4px; right: 4px; bottom: 2px;
    height: 2px;
    background: var(--fp-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--fp-transition);
    border-radius: 2px;
}
.fp-menu li > a:hover::after,
.fp-menu .current-menu-item > a::after { transform: scaleX(1); }

.fp-cart {
    position: relative;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--fp-ink-900);
    color: var(--fp-white);
}
.fp-cart:hover { background: var(--fp-accent); color: var(--fp-white); }
.fp-cart__count {
    position: absolute;
    top: -2px; right: -4px;
    background: var(--fp-accent);
    color: var(--fp-white);
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--fp-radius-pill);
    padding: 2px 6px;
    border: 2px solid var(--fp-paper);
    min-width: 18px;
    text-align: center;
}

.fp-burger {
    display: none;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--fp-border-strong);
    border-radius: 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.fp-burger span {
    display: block;
    width: 18px; height: 2px;
    background: var(--fp-ink-900);
    border-radius: 2px;
}

.fp-mobile-nav {
    background: var(--fp-white);
    border-top: 1px solid var(--fp-border);
    padding: var(--fp-space-4) var(--fp-gutter);
}
.fp-mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-3);
    font-size: 1.1rem;
    font-family: var(--fp-font-display);
}

/* ---------- 7. Hero & sections ------------------------------------------- */
.fp-hero {
    position: relative;
    padding-top: clamp(80px, 8vw, 120px);
    padding-bottom: clamp(80px, 10vw, 160px);
    overflow: hidden;
    background:
        radial-gradient(60% 80% at 80% 0%, rgba(255,179,71,0.35) 0%, transparent 60%),
        radial-gradient(50% 60% at 0% 30%, rgba(106,90,224,0.18) 0%, transparent 60%),
        var(--fp-paper);
}
.fp-hero::before {
    content: '';
    position: absolute;
    inset: -10% -10% auto auto;
    width: 60%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(91,225,196,0.35) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

.fp-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--fp-space-8);
    align-items: center;
}
.fp-hero__copy { max-width: 640px; }
.fp-hero__sub {
    font-size: clamp(1.05rem, 0.5vw + 1rem, 1.25rem);
    color: var(--fp-ink-500);
    margin-bottom: var(--fp-space-6);
    max-width: 56ch;
}
.fp-hero__visual {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--fp-radius-xl);
    background:
        linear-gradient(135deg, var(--fp-ink-900) 0%, var(--fp-ink-700) 100%);
    overflow: hidden;
    box-shadow: var(--fp-shadow-lg);
}
.fp-hero__cards {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 8px;
    padding: 24px;
}
.fp-hero__card {
    border-radius: var(--fp-radius);
    background: var(--fp-white);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.4);
    display: flex;
    align-items: end;
    padding: 14px;
    font-family: var(--fp-font-display);
    font-weight: 700;
    color: var(--fp-ink-900);
}
.fp-hero__card span { font-size: 0.9rem; }
.fp-hero__card--coral { background: linear-gradient(135deg, var(--fp-accent) 0%, var(--fp-accent-2) 100%); color: var(--fp-white); }
.fp-hero__card--mint  { background: linear-gradient(135deg, var(--fp-mint) 0%, #b6f0e3 100%); }
.fp-hero__card--lemon { background: linear-gradient(135deg, var(--fp-lemon) 0%, #fff5d2 100%); }
.fp-hero__card--violet{ background: linear-gradient(135deg, var(--fp-violet) 0%, #a99bff 100%); color: var(--fp-white); }
.fp-hero__card--paper { background: var(--fp-paper); }
.fp-hero__card--dark  { background: var(--fp-ink-800); color: var(--fp-white); }

.fp-hero__card--1 { grid-area: 1 / 1 / 4 / 4; }
.fp-hero__card--2 { grid-area: 1 / 4 / 3 / 7; }
.fp-hero__card--3 { grid-area: 3 / 4 / 5 / 7; }
.fp-hero__card--4 { grid-area: 4 / 1 / 7 / 3; }
.fp-hero__card--5 { grid-area: 4 / 3 / 7 / 5; }
.fp-hero__card--6 { grid-area: 5 / 5 / 7 / 7; }

.fp-hero__chips {
    display: flex;
    gap: var(--fp-space-2);
    margin-top: var(--fp-space-5);
    flex-wrap: wrap;
}
.fp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--fp-radius-pill);
    background: var(--fp-white);
    border: 1px solid var(--fp-border);
    font-size: 0.85rem;
    color: var(--fp-ink-700);
    font-weight: 500;
    box-shadow: var(--fp-shadow-sm);
}
.fp-chip svg { color: var(--fp-success); }

/* Logo strip ---------------------------------------------------------------- */
.fp-logos {
    padding-block: var(--fp-space-7);
    background: var(--fp-paper-2);
    border-block: 1px solid var(--fp-border);
}
.fp-logos__title {
    text-align: center;
    color: var(--fp-ink-500);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: var(--fp-space-5);
}
.fp-logos__track {
    display: flex;
    align-items: center;
    gap: var(--fp-space-8);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.fp-logos__item {
    flex: none;
    font-family: var(--fp-font-display);
    font-weight: 700;
    color: var(--fp-ink-500);
    font-size: 1.5rem;
    opacity: 0.7;
    white-space: nowrap;
}

/* Value props -------------------------------------------------------------- */
.fp-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--fp-space-5);
}
.fp-value {
    background: var(--fp-white);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: var(--fp-space-6);
    transition: transform var(--fp-transition), box-shadow var(--fp-transition);
}
.fp-value:hover { transform: translateY(-4px); box-shadow: var(--fp-shadow-md); }
.fp-value__icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: rgba(255,91,58,0.1);
    color: var(--fp-accent);
    border-radius: 14px;
    margin-bottom: var(--fp-space-4);
}
.fp-value h3 { margin-bottom: var(--fp-space-2); font-size: 1.15rem; }
.fp-value p { color: var(--fp-ink-500); margin: 0; font-size: 0.95rem; }

/* ---------- 8. Cards ----------------------------------------------------- */
.fp-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--fp-space-5);
}
.fp-cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    padding: var(--fp-space-5);
    border-radius: var(--fp-radius);
    background: var(--fp-white);
    border: 1px solid var(--fp-border);
    overflow: hidden;
    transition: transform var(--fp-transition), box-shadow var(--fp-transition), border-color var(--fp-transition);
    color: var(--fp-ink-900);
}
.fp-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fp-shadow-md);
    border-color: var(--fp-ink-900);
    color: var(--fp-ink-900);
}
.fp-cat-card__icon {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--fp-paper);
    color: var(--fp-ink-900);
    border-radius: 16px;
    margin-bottom: var(--fp-space-5);
    transition: background var(--fp-transition), color var(--fp-transition);
}
.fp-cat-card:hover .fp-cat-card__icon { background: var(--fp-accent); color: var(--fp-white); }
.fp-cat-card__title {
    font-family: var(--fp-font-display);
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0 0 var(--fp-space-2);
    color: var(--fp-ink-900);
}
.fp-cat-card__meta {
    color: var(--fp-ink-500);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fp-cat-card__arrow {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--fp-paper);
    border-radius: 50%;
    transition: background var(--fp-transition), color var(--fp-transition), transform var(--fp-transition);
}
.fp-cat-card:hover .fp-cat-card__arrow {
    background: var(--fp-ink-900);
    color: var(--fp-white);
    transform: translateX(4px);
}

/* Product card (used on shop, archive, homepage featured strip) ------------ */
.fp-product-card {
    display: flex;
    flex-direction: column;
    background: var(--fp-white);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    overflow: hidden;
    transition: transform var(--fp-transition), box-shadow var(--fp-transition);
    color: var(--fp-ink-900);
    height: 100%;
}
.fp-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fp-shadow-md);
    color: var(--fp-ink-900);
}
.fp-product-card__media {
    aspect-ratio: 4/3;
    background: var(--fp-paper);
    overflow: hidden;
    position: relative;
}
.fp-product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.fp-product-card:hover .fp-product-card__media img { transform: scale(1.04); }
.fp-product-card__media--placeholder {
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--fp-ink-100) 0%, var(--fp-paper) 100%);
    color: var(--fp-ink-300);
}
.fp-product-card__badge {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--fp-ink-900);
    color: var(--fp-white);
    padding: 4px 10px;
    border-radius: var(--fp-radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.fp-product-card__body {
    padding: var(--fp-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-2);
    flex: 1;
}
.fp-product-card__cat {
    font-size: 0.78rem;
    color: var(--fp-ink-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.fp-product-card__title {
    font-family: var(--fp-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--fp-ink-900);
}
.fp-product-card__price {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: var(--fp-space-3);
    font-weight: 600;
    color: var(--fp-accent);
}
.fp-product-card__price small { color: var(--fp-ink-500); font-weight: 400; font-size: 0.78rem; }

.fp-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--fp-space-5);
}

/* Testimonials ------------------------------------------------------------- */
.fp-testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--fp-space-5);
}
.fp-testimonial {
    background: var(--fp-white);
    border-radius: var(--fp-radius);
    padding: var(--fp-space-6);
    border: 1px solid var(--fp-border);
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-4);
}
.fp-testimonial__rating {
    display: inline-flex;
    gap: 2px;
    color: var(--fp-accent-2);
    font-size: 1.2rem;
}
.fp-testimonial__quote {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--fp-ink-800);
    margin: 0;
}
.fp-testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
    margin-top: auto;
}
.fp-testimonial__avatar {
    width: 44px; height: 44px;
    background: var(--fp-accent);
    color: var(--fp-white);
    display: grid; place-items: center;
    border-radius: 50%;
    font-weight: 700;
    font-family: var(--fp-font-display);
}
.fp-testimonial__name { font-weight: 600; }
.fp-testimonial__role { color: var(--fp-ink-500); font-size: 0.85rem; }

/* Stats strip -------------------------------------------------------------- */
.fp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--fp-space-5);
    margin-top: var(--fp-space-7);
}
.fp-stat__num {
    font-family: var(--fp-font-display);
    font-weight: 800;
    font-size: clamp(2.2rem, 3vw, 3.5rem);
    line-height: 1;
    background: linear-gradient(135deg, var(--fp-accent) 0%, var(--fp-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block;
}
.fp-stat__label {
    color: rgba(255,255,255,0.65);
    font-size: 0.92rem;
    margin-top: 6px;
}

/* CTA banner -------------------------------------------------------------- */
.fp-cta-banner {
    position: relative;
    overflow: hidden;
    border-radius: var(--fp-radius-xl);
    padding: clamp(48px, 6vw, 88px);
    background:
        radial-gradient(circle at 80% 20%, rgba(255,179,71,0.4), transparent 60%),
        radial-gradient(circle at 20% 80%, rgba(255,91,58,0.5), transparent 70%),
        linear-gradient(135deg, var(--fp-ink-900) 0%, var(--fp-ink-700) 100%);
    color: var(--fp-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fp-space-7);
    flex-wrap: wrap;
}
.fp-cta-banner h2 { color: var(--fp-white); max-width: 24ch; margin: 0; font-size: clamp(1.6rem, 2.5vw, 2.6rem); }
.fp-cta-banner p { color: rgba(255,255,255,0.75); max-width: 50ch; margin: var(--fp-space-3) 0 0; }

/* ---------- 9. WooCommerce overrides ------------------------------------- */
.fp-shop-main { padding-top: var(--fp-space-7); padding-bottom: var(--fp-space-9); }

.woocommerce-products-header__title,
.woocommerce-products-header { display: none !important; }

/* WooCommerce loop : remplace le layout flottant historique par une grille
   CSS pour qu'on contrôle vraiment les gouttières (le markup WC par défaut
   utilise margin négative + width pourcentage, ce qui rend `gap` impossible). */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fp-space-5);
    margin: 0 0 var(--fp-space-7);
    padding: 0;
    list-style: none;
}
/* WC injecte un ::before + ::after en `display: table` sur ul.products
   (clearfix legacy pour le layout flottant). En CSS grid ces pseudos
   deviennent des grid items et occupent la 1ère et la dernière cellule —
   ce qui crée une carte vide au début et à la fin du catalogue. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
    content: none !important;
}
.woocommerce ul.products li.product {
    background: var(--fp-white);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: var(--fp-space-4) !important;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    transition: transform var(--fp-transition), box-shadow var(--fp-transition);
}
@media (max-width: 900px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .woocommerce ul.products { grid-template-columns: 1fr; }
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--fp-shadow-md); }
.woocommerce ul.products li.product img { border-radius: var(--fp-radius-sm); margin-bottom: var(--fp-space-3); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--fp-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0;
    margin: 0 0 6px;
}
.woocommerce ul.products li.product .price {
    color: var(--fp-accent);
    font-weight: 600;
}
.woocommerce ul.products li.product .button {
    background: var(--fp-ink-900);
    color: var(--fp-white);
    border-radius: var(--fp-radius-pill);
    padding: 8px 18px;
    font-weight: 600;
    margin-top: var(--fp-space-3);
    text-decoration: none;
}
.woocommerce ul.products li.product .button:hover { background: var(--fp-accent); color: var(--fp-white); }
.woocommerce ul.products li.product .onsale {
    background: var(--fp-accent);
    color: var(--fp-white);
    border-radius: var(--fp-radius-pill);
    padding: 2px 12px;
    font-weight: 600;
    font-size: 0.75rem;
    min-height: auto;
    line-height: 1.8;
    right: 12px; top: 12px;
}

.woocommerce nav.woocommerce-pagination ul {
    border: none;
    display: flex; gap: 6px;
    justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    background: var(--fp-white);
    border: 1px solid var(--fp-border);
    border-radius: 12px;
    color: var(--fp-ink-800);
    padding: 8px 14px !important;
    font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--fp-ink-900);
    color: var(--fp-white);
    border-color: var(--fp-ink-900);
}

.woocommerce-result-count {
    color: var(--fp-ink-500);
    font-size: 0.9rem;
}
.woocommerce-ordering select {
    border-radius: var(--fp-radius-sm);
    border: 1px solid var(--fp-border-strong);
    padding: 8px 12px;
    background: var(--fp-white);
}

/* Single product polish */
.woocommerce div.product .product_title {
    font-family: var(--fp-font-display);
    font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--fp-accent);
    font-weight: 600;
    font-size: 1.5rem;
}
.woocommerce div.product form.cart .button {
    background: var(--fp-accent);
    color: var(--fp-white);
    border-radius: var(--fp-radius-pill);
    padding: 12px 22px;
    font-weight: 600;
}
.woocommerce div.product form.cart .button:hover { background: #ff4823; }
.woocommerce-tabs .tabs li {
    border-radius: var(--fp-radius-sm) var(--fp-radius-sm) 0 0;
    background: var(--fp-paper) !important;
    border: 1px solid var(--fp-border) !important;
}
.woocommerce-tabs .tabs li.active { background: var(--fp-white) !important; border-bottom-color: transparent !important; }

/* Category breadcrumb */
.woocommerce-breadcrumb {
    color: var(--fp-ink-500);
    font-size: 0.85rem;
    margin-bottom: var(--fp-space-5) !important;
}
.woocommerce-breadcrumb a { color: var(--fp-ink-800); }

/* Cart & checkout polish */
.woocommerce table.shop_table {
    border-radius: var(--fp-radius);
    border: 1px solid var(--fp-border);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading {
    font-family: var(--fp-font-display);
}

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
    border-radius: var(--fp-radius-sm) !important;
    border-top: none !important;
    padding: var(--fp-space-4) var(--fp-space-5) !important;
}
.woocommerce-message { background: rgba(26,168,115,0.08) !important; color: var(--fp-success) !important; }
.woocommerce-message::before { color: var(--fp-success) !important; }

/* Shop layout with sidebar */
.fp-shop-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--fp-space-7);
    align-items: start;
}
.fp-shop-sidebar {
    position: sticky;
    top: 120px;
    background: var(--fp-white);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: var(--fp-space-5);
}
.fp-shop-sidebar h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fp-ink-500);
    margin-bottom: var(--fp-space-3);
    font-weight: 600;
}
.fp-shop-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fp-shop-sidebar li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--fp-ink-800);
    font-weight: 500;
    transition: background var(--fp-transition), color var(--fp-transition);
}
.fp-shop-sidebar li a:hover,
.fp-shop-sidebar li.current-cat > a {
    background: var(--fp-ink-900);
    color: var(--fp-white);
}
.fp-shop-sidebar li .count {
    background: var(--fp-paper);
    color: var(--fp-ink-500);
    border-radius: var(--fp-radius-pill);
    padding: 2px 8px;
    font-size: 0.78rem;
}
.fp-shop-sidebar li a:hover .count,
.fp-shop-sidebar li.current-cat > a .count {
    background: rgba(255,255,255,0.2);
    color: var(--fp-white);
}

/* ---------- 10. FAQ ------------------------------------------------------- */
.fp-faq__groups {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--fp-space-7);
    align-items: start;
}
.fp-faq__nav {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-2);
}
.fp-faq__nav a {
    padding: 12px 16px;
    border-radius: var(--fp-radius-sm);
    color: var(--fp-ink-800);
    font-weight: 500;
}
.fp-faq__nav a:hover { background: var(--fp-paper-2); color: var(--fp-ink-900); }

.fp-faq__group { margin-bottom: var(--fp-space-7); }
.fp-faq__group-title {
    font-family: var(--fp-font-display);
    font-size: 1.5rem;
    margin-bottom: var(--fp-space-4);
    padding-bottom: var(--fp-space-2);
    border-bottom: 2px solid var(--fp-border);
}

.fp-faq__items { display: flex; flex-direction: column; gap: var(--fp-space-2); }
.fp-faq__item {
    background: var(--fp-white);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    overflow: hidden;
}
.fp-faq__trigger {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: var(--fp-space-5);
    font-family: var(--fp-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--fp-ink-900);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fp-space-3);
}
.fp-faq__trigger::after {
    content: '';
    width: 14px; height: 14px;
    border-right: 2px solid var(--fp-ink-900);
    border-bottom: 2px solid var(--fp-ink-900);
    transform: rotate(45deg);
    transition: transform var(--fp-transition);
    flex: none;
}
.fp-faq__item.is-open .fp-faq__trigger::after { transform: rotate(-135deg); }
.fp-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 350ms ease, padding 200ms ease;
    padding: 0 var(--fp-space-5);
    color: var(--fp-ink-500);
}
.fp-faq__item.is-open .fp-faq__answer {
    max-height: 480px;
    padding-bottom: var(--fp-space-5);
}

/* Homepage FAQ teaser ----------------------------------------------------- */
.fp-faq-teaser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fp-space-7);
    align-items: start;
}

/* ---------- 11. Gabarits + about ----------------------------------------- */
.fp-gabarits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--fp-space-5);
}
.fp-gabarit-card {
    display: flex;
    flex-direction: column;
    background: var(--fp-white);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    overflow: hidden;
    transition: transform var(--fp-transition), box-shadow var(--fp-transition);
}
.fp-gabarit-card:hover { transform: translateY(-4px); box-shadow: var(--fp-shadow-md); }
.fp-gabarit-card__preview {
    aspect-ratio: 4/3;
    background:
        repeating-linear-gradient(45deg, rgba(11,16,32,0.04) 0 1px, transparent 1px 12px),
        var(--fp-paper);
    display: grid;
    place-items: center;
    color: var(--fp-ink-500);
}
.fp-gabarit-card__preview svg { width: 64px; height: 64px; }
.fp-gabarit-card__body { padding: var(--fp-space-5); }
.fp-gabarit-card__meta { color: var(--fp-ink-500); font-size: 0.85rem; margin-bottom: var(--fp-space-3); display:flex; gap: var(--fp-space-3); }
.fp-gabarit-card__meta span::before { content: '·'; margin-right: 6px; color: var(--fp-ink-300); }
.fp-gabarit-card__meta span:first-child::before { content: none; margin: 0; }

.fp-process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--fp-space-5);
    counter-reset: step;
}
.fp-process__step {
    position: relative;
    background: var(--fp-white);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: var(--fp-space-6);
    counter-increment: step;
}
.fp-process__step::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--fp-font-display);
    font-weight: 800;
    font-size: 2.4rem;
    color: var(--fp-accent);
    line-height: 1;
    display: block;
    margin-bottom: var(--fp-space-3);
}
.fp-process__step h3 { margin-bottom: var(--fp-space-2); }
.fp-process__step p { color: var(--fp-ink-500); margin: 0; }

.fp-about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fp-space-7);
    align-items: center;
}
.fp-about-visual {
    aspect-ratio: 1;
    border-radius: var(--fp-radius-xl);
    background:
        radial-gradient(circle at 30% 30%, rgba(91,225,196,0.4), transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(255,91,58,0.4), transparent 50%),
        var(--fp-ink-900);
    color: var(--fp-white);
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--fp-space-7);
    box-shadow: var(--fp-shadow-lg);
}

/* ---------- 12. Footer --------------------------------------------------- */
.fp-footer {
    background: var(--fp-ink-900);
    color: rgba(255,255,255,0.75);
    padding-top: clamp(64px, 8vw, 96px);
    margin-top: clamp(64px, 8vw, 96px);
}
.fp-footer__grid {
    display: grid;
    /* 4 colonnes : brand / catalogue (synced) / aide / newsletter. La colonne
       catalogue est conditionnelle (présente seulement quand des catégories WC
       existent), donc on assigne les colonnes brand + newsletter explicitement
       pour qu'elles restent ancrées même si le catalogue est masqué. */
    grid-template-columns: 1.6fr 1fr 1fr 2fr;
    gap: var(--fp-space-7);
    padding-bottom: var(--fp-space-7);
}
.fp-footer__col--brand     { grid-column: 1; }
.fp-footer__col--newsletter { grid-column: 4; }
.fp-footer__title {
    color: var(--fp-white);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--fp-space-4);
}
.fp-footer__tagline {
    margin: var(--fp-space-4) 0 var(--fp-space-5);
    max-width: 36ch;
    line-height: 1.6;
}
.fp-footer__newsletter-intro {
    font-size: 0.9rem;
    margin-bottom: var(--fp-space-4);
}
.fp-footer__links {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: var(--fp-space-2);
    font-size: 0.95rem;
}
.fp-footer__links a:hover { color: var(--fp-white); }
.fp-footer__socials {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; gap: var(--fp-space-3);
}
.fp-footer__socials a {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--fp-white);
    transition: background var(--fp-transition);
}
.fp-footer__socials a:hover { background: var(--fp-accent); }

.fp-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: var(--fp-space-4) 0;
    font-size: 0.85rem;
}
.fp-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fp-space-4);
    flex-wrap: wrap;
}
.fp-footer__legal {
    list-style: none;
    display: flex;
    gap: var(--fp-space-5);
    padding: 0; margin: 0;
}
.fp-footer__legal a:hover { color: var(--fp-white); }

/* ---------- 13. Utilities & responsive ----------------------------------- */
.fp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fp-space-7); }
.fp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fp-space-5); }

.fp-pagination { margin-top: var(--fp-space-7); display: flex; justify-content: center; }

@media (max-width: 1024px) {
    .fp-shop-layout { grid-template-columns: 1fr; }
    .fp-shop-sidebar { position: static; }
    .fp-faq__groups { grid-template-columns: 1fr; }
    .fp-faq__nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .fp-hero__inner { grid-template-columns: 1fr; }
    .fp-hero__visual { max-width: 480px; margin-inline: auto; aspect-ratio: 1; }
    .fp-about-split { grid-template-columns: 1fr; }
    .fp-faq-teaser { grid-template-columns: 1fr; }
    .fp-grid-2, .fp-grid-3 { grid-template-columns: 1fr; }
    .fp-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .fp-header__nav, .fp-header__cta { display: none; }
    .fp-burger { display: inline-flex; }
    .fp-section__head--row { flex-direction: column; align-items: flex-start; }
    .fp-cta-banner { flex-direction: column; align-items: flex-start; text-align: left; }
    .fp-footer__grid { grid-template-columns: 1fr; }
    .fp-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   14. Polish v2 — corrections après audit visuel live
   -----------------------------------------------------------------------------
   - Tous les prix WooCommerce statiques sont masqués : avec Flowizy le tarif
     est calculé à la volée par le middleware sur la fiche produit, donc le prix
     stocké en BDD vaut systématiquement 0 et n'apporte rien.
   - Le bouton "Ajouter au panier" du loop est remplacé par un CTA "Configurer"
     qui pousse l'utilisateur à ouvrir la fiche (seul endroit où il peut choisir
     options + livraison + voir le prix réel).
   - Le titre WC de la page Boutique est masqué pour éviter le doublon avec le
     fp-page-head custom du thème.
   - Le formulaire shipping du plugin Flowizy peut générer une liste de dates
     plus large que la viewport (10+ boutons en ligne) → on force flex-wrap.
   ============================================================================= */

/* Masquage prix WC partout (boucle + fiche) */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product .summary > .price,
.woocommerce-product-details__short-description ~ .price {
    display: none !important;
}

/* Boucle produit : pas d'add-to-cart, on remplace par un CTA "Configurer" */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple,
.woocommerce ul.products li.product .added_to_cart {
    display: none !important;
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link::after {
    content: "Configurer →";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    align-self: flex-start;
    padding: 10px 18px;
    background: var(--fp-ink-900);
    color: var(--fp-white);
    border-radius: var(--fp-radius-pill);
    font-weight: 600;
    font-size: 0.85rem;
    transition: background var(--fp-transition), transform var(--fp-transition);
}
.woocommerce ul.products li.product:hover .woocommerce-LoopProduct-link::after {
    background: var(--fp-accent);
    transform: translateX(2px);
}

/* Masque le titre WC dupliqué sur la page Boutique (et catégories) */
.woocommerce-products-header,
.woocommerce-products-header__title,
.post-type-archive-product .entry-header .entry-title,
.tax-product_cat .entry-header .entry-title {
    display: none !important;
}
/* La page Boutique est un WP post-page : son the_title() s'affiche en grand
   au début de la zone de contenu. On le neutralise quand on est sur shop. */
body.woocommerce-shop .fp-shop-content > .entry-title,
body.woocommerce-shop main > .entry-header,
body.woocommerce-shop .page-title {
    display: none !important;
}

/* Fiche produit : layout aéré dans notre container */
.fp-single-product {
    padding-top: var(--fp-space-7);
    padding-bottom: var(--fp-space-9);
}
.fp-single-product .product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--fp-space-7);
    align-items: start;
}
.fp-single-product .product > .woocommerce-product-gallery {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}
.fp-single-product .product > .summary {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}
.fp-single-product .product > .woocommerce-tabs,
.fp-single-product .product > .related,
.fp-single-product .product > .upsells {
    grid-column: 1 / -1;
    margin-top: var(--fp-space-7);
}
@media (max-width: 900px) {
    .fp-single-product .product { grid-template-columns: 1fr; }
}

/* Galerie : la zoom image WC peut être plus large que la colonne — on contient */
.woocommerce div.product .woocommerce-product-gallery {
    overflow: hidden;
    border-radius: var(--fp-radius);
    background: var(--fp-paper);
}
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img,
img.zoomImg {
    max-width: 100% !important;
    height: auto !important;
}

/* Formulaire Flowizy : le bloc shipping ne doit JAMAIS élargir la carte ni
   déclencher un scroll horizontal de page. En block, la largeur est contrainte
   par le parent et le carrousel de dates scrolle en interne. */
.flowizy-fieldset.flowizy-shipping,
.flowizy-shipping__list {
    display: block !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible !important;
}

/* Dates de livraison : carrousel horizontal (scroll INTERNE au conteneur,
   ne déclenche pas de scroll de page — aligné sur l'admin Flowizy). */
.flowizy-ship-dates {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0; /* flex item : ne jamais s'élargir au-delà du conteneur */
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 8px;
}
.flowizy-ship-date {
    flex: 0 0 auto;
}
.flowizy-ship-carriers {
    width: 100%;
    min-width: 0;
}

/* Filet de sécurité global : aucune section ne doit déclencher un scroll H */
html, body {
    overflow-x: clip;
}

/* Le titre du produit doit suivre la typo display + couleur encre */
.fp-single-product .product_title {
    font-family: var(--fp-font-display);
    font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem);
    color: var(--fp-ink-900);
    margin: 0 0 var(--fp-space-3);
}

/* =============================================================================
   15. Layout variants — CSS dédié par variante
   -----------------------------------------------------------------------------
   Le thème expose un système de variantes (cf. inc/layout-variants.php) pour
   chaque grande zone (hero, shop, product, faq, gabarits, about, contact,
   cart). Chaque variante a son propre look — l'objectif est qu'avec un même
   thème, deux sites paraissent radicalement différents.
   ============================================================================= */

/* ---------- Hero : "split" ----------------------------------------------- */
.fp-hero--split {
    padding-block: clamp(64px, 8vw, 120px);
    background: linear-gradient(180deg, var(--fp-paper-2) 0%, var(--fp-paper) 100%);
}
.fp-hero-split__inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--fp-space-8);
    align-items: center;
}
.fp-hero-split__copy { max-width: 620px; }
.fp-display--xl { font-size: clamp(2.8rem, 6vw + 1rem, 5.5rem); }
.fp-hero-split__visual {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--fp-radius-xl);
    overflow: hidden;
    isolation: isolate;
}
.fp-hero-split__sheet {
    position: absolute;
    inset: 0;
    border-radius: var(--fp-radius-xl);
    box-shadow: var(--fp-shadow-lg);
}
.fp-hero-split__sheet--back {
    background: linear-gradient(135deg, var(--fp-accent) 0%, var(--fp-accent-2) 100%);
    transform: rotate(-3deg) translate(4%, 3%);
    z-index: 1;
}
.fp-hero-split__sheet--mid {
    background: linear-gradient(135deg, var(--fp-violet) 0%, var(--fp-mint) 100%);
    transform: rotate(2deg) translate(-3%, -2%);
    z-index: 2;
}
.fp-hero-split__sheet--front {
    background: var(--fp-white);
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--fp-space-7);
    color: var(--fp-ink-900);
}
.fp-hero-split__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--fp-radius-pill);
    background: var(--fp-ink-900);
    color: var(--fp-white);
    font-size: 0.85rem;
    font-weight: 600;
    align-self: flex-start;
}
.fp-hero-split__meta {
    display: flex;
    gap: var(--fp-space-3);
    color: var(--fp-ink-500);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
@media (max-width: 1024px) {
    .fp-hero-split__inner { grid-template-columns: 1fr; }
    .fp-hero-split__visual { max-width: 480px; margin-inline: auto; aspect-ratio: 1; }
}

/* ---------- Hero : "centered" -------------------------------------------- */
.fp-hero--centered {
    padding-block: clamp(80px, 10vw, 140px) 0;
    background:
        radial-gradient(60% 80% at 50% -10%, rgba(255,179,71,0.3) 0%, transparent 60%),
        var(--fp-paper);
    text-align: center;
}
.fp-hero-centered__inner { display: flex; flex-direction: column; align-items: center; }
.fp-display--center { text-align: center; max-width: 16ch; margin-inline: auto; }
.fp-lead--center { text-align: center; margin-inline: auto; }
.fp-cta-row--center { justify-content: center; margin-top: var(--fp-space-5); }
.fp-hero__chips--center { justify-content: center; margin-top: var(--fp-space-5); }

.fp-hero-centered__stripe {
    margin-top: clamp(48px, 6vw, 80px);
    padding-block: var(--fp-space-5);
    background: var(--fp-ink-900);
    overflow: hidden;
}
.fp-hero-centered__stripe-track {
    display: flex;
    gap: var(--fp-space-6);
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.fp-band {
    flex: none;
    padding: 12px 22px;
    border-radius: var(--fp-radius-pill);
    font-family: var(--fp-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--fp-ink-900);
}
.fp-band--coral  { background: linear-gradient(135deg, var(--fp-accent) 0%, var(--fp-accent-2) 100%); color: var(--fp-white); }
.fp-band--mint   { background: var(--fp-mint); }
.fp-band--lemon  { background: var(--fp-lemon); }
.fp-band--violet { background: var(--fp-violet); color: var(--fp-white); }
.fp-band--paper  { background: var(--fp-white); }
.fp-band--dark   { background: var(--fp-ink-800); color: var(--fp-white); }

/* ---------- Hero : "spotlight" ------------------------------------------- */
.fp-hero--spotlight {
    padding-block: clamp(80px, 10vw, 140px);
    background:
        radial-gradient(60% 80% at 80% 20%, rgba(255,91,58,0.25) 0%, transparent 60%),
        radial-gradient(40% 60% at 10% 80%, rgba(106,90,224,0.25) 0%, transparent 60%),
        var(--fp-ink-900);
    color: var(--fp-white);
}
.fp-hero-spot__head {
    display: grid;
    grid-template-columns: 1.4fr auto;
    gap: var(--fp-space-7);
    align-items: end;
    margin-bottom: var(--fp-space-7);
}
.fp-hero-spot__head h1,
.fp-display--light { color: var(--fp-white); }
.fp-hero__sub--light { color: rgba(255,255,255,0.7); }

.fp-hero-spot__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fp-space-5);
}
.fp-hero-spot__card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: 4/5;
    padding: var(--fp-space-6);
    border-radius: var(--fp-radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 100%);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--fp-white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--fp-transition), border-color var(--fp-transition);
}
.fp-hero-spot__card:hover {
    transform: translateY(-4px);
    border-color: var(--fp-accent);
}
.fp-hero-spot__chip {
    display: inline-flex;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: var(--fp-radius-pill);
    background: rgba(255,255,255,0.15);
    color: var(--fp-white);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.fp-hero-spot__shine {
    position: absolute;
    inset: 20% -10% auto 50%;
    height: 60%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.18), transparent 60%);
    filter: blur(40px);
    z-index: -1;
}
.fp-hero-spot__card--1 .fp-hero-spot__shine { background: radial-gradient(circle, rgba(255,91,58,0.4), transparent 60%); }
.fp-hero-spot__card--2 .fp-hero-spot__shine { background: radial-gradient(circle, rgba(91,225,196,0.4), transparent 60%); }
.fp-hero-spot__card--3 .fp-hero-spot__shine { background: radial-gradient(circle, rgba(255,179,71,0.4), transparent 60%); }

.fp-hero-spot__name {
    font-family: var(--fp-font-display);
    font-size: clamp(1.4rem, 2vw, 2rem);
    color: var(--fp-white);
    margin: var(--fp-space-3) 0 var(--fp-space-2);
    line-height: 1.1;
}
.fp-hero-spot__more {
    color: var(--fp-accent-2);
    font-weight: 600;
    font-size: 0.9rem;
}
@media (max-width: 900px) {
    .fp-hero-spot__head { grid-template-columns: 1fr; align-items: start; }
    .fp-hero-spot__grid { grid-template-columns: 1fr; }
}

/* ---------- Shop : "full-grid" ------------------------------------------- */
.fp-shop-main--fullgrid { padding-top: var(--fp-space-5); padding-bottom: var(--fp-space-9); }
.fp-pill-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: var(--fp-space-4) 0 var(--fp-space-6);
    padding-bottom: var(--fp-space-3);
    border-bottom: 1px solid var(--fp-border);
}
.fp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--fp-radius-pill);
    background: var(--fp-white);
    border: 1px solid var(--fp-border);
    color: var(--fp-ink-800);
    font-weight: 500;
    font-size: 0.92rem;
    transition: background var(--fp-transition), color var(--fp-transition), border-color var(--fp-transition);
}
.fp-pill small {
    background: var(--fp-paper);
    color: var(--fp-ink-500);
    border-radius: var(--fp-radius-pill);
    padding: 1px 7px;
    font-size: 0.7rem;
}
.fp-pill:hover { background: var(--fp-ink-900); color: var(--fp-white); border-color: var(--fp-ink-900); }
.fp-pill.is-active { background: var(--fp-ink-900); color: var(--fp-white); border-color: var(--fp-ink-900); }
.fp-pill:hover small, .fp-pill.is-active small { background: rgba(255,255,255,0.2); color: var(--fp-white); }

.fp-shop-main--fullgrid .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    .fp-shop-main--fullgrid .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .fp-shop-main--fullgrid .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Product : "stacked" ------------------------------------------ */
.fp-single-product--stacked .product {
    display: block;
}
.fp-single-product--stacked .woocommerce-product-gallery {
    width: 100% !important;
    aspect-ratio: 21/9;
    margin-bottom: var(--fp-space-7) !important;
}
.fp-single-product--stacked .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.fp-single-product--stacked .summary {
    max-width: var(--fp-container-narrow);
    margin: 0 auto !important;
    width: auto !important;
}
.fp-single-product--stacked .product_title { text-align: center; }

/* ---------- FAQ : "tabs" ------------------------------------------------- */
.fp-faq-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: var(--fp-space-4);
    margin-bottom: var(--fp-space-6);
    border-bottom: 1px solid var(--fp-border);
}
.fp-faq-tabs__tab {
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-radius: var(--fp-radius-pill);
    color: var(--fp-ink-500);
    font-weight: 600;
    font-family: var(--fp-font-body);
    cursor: pointer;
    transition: background var(--fp-transition), color var(--fp-transition);
}
.fp-faq-tabs__tab:hover { background: var(--fp-paper-2); color: var(--fp-ink-900); }
.fp-faq-tabs__tab.is-active { background: var(--fp-ink-900); color: var(--fp-white); }
.fp-faq-tabs__panel { display: none; }
.fp-faq-tabs__panel.is-active { display: block; }

/* ---------- Gabarits : "list" -------------------------------------------- */
.fp-gabarit-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fp-gabarit-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--fp-space-5);
    align-items: center;
    background: var(--fp-white);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: var(--fp-space-4) var(--fp-space-5);
    transition: border-color var(--fp-transition), transform var(--fp-transition);
}
.fp-gabarit-row:hover { transform: translateX(2px); border-color: var(--fp-ink-900); }
.fp-gabarit-row__icon {
    width: 56px; height: 56px;
    background: var(--fp-paper);
    border-radius: 14px;
    display: grid; place-items: center;
    color: var(--fp-ink-800);
}
.fp-gabarit-row__icon svg { width: 28px; height: 28px; }
.fp-gabarit-row__name { font-family: var(--fp-font-display); font-size: 1.1rem; margin: 0 0 4px; }
.fp-gabarit-row__meta { color: var(--fp-ink-500); font-size: 0.85rem; margin: 0; }
.fp-gabarit-row__actions { display: flex; gap: 6px; flex: none; }

/* ---------- About : "timeline" ------------------------------------------- */
.fp-timeline {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    padding-left: 28px;
}
.fp-timeline::before {
    content: "";
    position: absolute;
    left: 6px; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--fp-accent), var(--fp-accent-2));
    border-radius: 2px;
}
.fp-timeline__item {
    position: relative;
    padding-bottom: var(--fp-space-7);
}
.fp-timeline__item:last-child { padding-bottom: 0; }
.fp-timeline__dot {
    position: absolute;
    left: -28px; top: 8px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--fp-accent);
    box-shadow: 0 0 0 4px var(--fp-paper), 0 0 0 5px var(--fp-accent);
}
.fp-timeline__year {
    font-family: var(--fp-font-display);
    font-weight: 800;
    color: var(--fp-accent);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.fp-timeline__title { font-size: 1.4rem; margin: 0 0 8px; }
.fp-timeline__desc { color: var(--fp-ink-500); margin: 0; }

/* ---------- Contact : "big-form" ----------------------------------------- */
.fp-contact-form {
    background: var(--fp-white);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.fp-contact-form--big {
    padding: clamp(32px, 4vw, 56px);
    border-radius: var(--fp-radius-lg);
    box-shadow: var(--fp-shadow-md);
}
.fp-contact-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fp-space-5);
    margin-top: var(--fp-space-6);
    padding: var(--fp-space-5);
    background: var(--fp-paper-2);
    border-radius: var(--fp-radius);
}
.fp-contact-strip__item { display: flex; flex-direction: column; gap: 4px; font-size: 0.95rem; }
@media (max-width: 700px) {
    .fp-contact-strip { grid-template-columns: 1fr; }
}

/* ---------- Cart : "compact" --------------------------------------------- */
.fp-cart--compact { padding: var(--fp-space-7) 0 var(--fp-space-9); }
.fp-cart-compact__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--fp-space-7);
    align-items: start;
}
.fp-cart-compact__title { margin: 0 0 var(--fp-space-4); }
.fp-cart-compact__summary {
    position: sticky;
    top: 120px;
    background: var(--fp-white);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: var(--fp-space-5);
}
.fp-cart-compact__summary h3 {
    font-size: 1.1rem;
    margin: 0 0 var(--fp-space-3);
    padding-bottom: var(--fp-space-3);
    border-bottom: 1px solid var(--fp-border);
}
@media (max-width: 900px) {
    .fp-cart-compact__layout { grid-template-columns: 1fr; }
    .fp-cart-compact__summary { position: static; }
}