*, ::before, ::after {
    box-sizing: border-box;
}
:root {
    --opsim-brand: #531628;
    --opsim-brand-rgb: 83, 22, 40;
    --opsim-text-primary: #111827;
    --opsim-text-secondary: #4B5563;
    --opsim-bg-primary: #FFFFFF;
    --opsim-bg-secondary: #F9FAFB;
    --opsim-border: rgba(var(--opsim-brand-rgb), 0.15);
    --opsim-shadow-sm: 0 1px 2px rgba(var(--opsim-brand-rgb), 0.05);
    --opsim-shadow-md: 0 4px 6px -1px rgba(var(--opsim-brand-rgb), 0.1);
    --opsim-space-xs: 4px;
    --opsim-space-sm: 8px;
    --opsim-space-md: 16px;
    --opsim-space-lg: 24px;
    --opsim-space-xl: 40px;
    /* Max content width shared by .opsim-container and any future full-width
       section that needs to line up with it. Same 1200px the container has
       always used — this only gives it a name. */
    --opsim-container: 1200px;
    --opsim-border-width: 1px;
    /* ── Border-radius system ─────────────────────────────────────────
       ONE master radius for the whole storefront. It is the subtle corner
       of the product-card image (template-parts/product/product-card.css),
       promoted to the global visual identity: minimal, premium, not heavily
       rounded. Every rectangular UI element — cards, images, inputs,
       selects, textareas, buttons, drawers, popups, filters, badges —
       resolves to this one value, on desktop, tablet and mobile alike.

       Do NOT hardcode a radius in a component stylesheet, and do NOT
       introduce a larger radius for a breakpoint. Use var(--opsim-radius).

       Genuinely round controls are the deliberate exception and keep their
       own value: circular add-to-cart (.fp-atc-circle), icon buttons,
       avatars, count dots, toggle switches — those stay 50% / pill. */
    --opsim-radius: 5px;
    /* Size aliases kept so existing consumers resolve to the master value.
       They are intentionally all the same — the scale is deliberately flat. */
    --opsim-radius-sm: var(--opsim-radius);
    --opsim-radius-md: var(--opsim-radius);
    --opsim-radius-lg: var(--opsim-radius);
    /* Escape hatches for the shapes that must NOT be squared off. */
    --opsim-radius-pill: 999px;
    --opsim-radius-circle: 50%;
    --opsim-font-primary: 'Mulish', sans-serif;
    --opsim-font-secondary: 'Mulish', sans-serif;

    /* Button design-system aliases, consumed by the button contract below.
       A button with its own color re-points --ostore-button-bg on itself
       (see featured-products.css, whatsapp.css). */
    --color-primary: var(--opsim-brand);
    --shadow-button: var(--opsim-shadow-sm);
    --theme-radius: var(--opsim-radius);
    --transition-fast: 0.2s;
    --color-bg-white: #fff;
    --radius-sm: var(--opsim-radius);
    --radius-md: var(--opsim-radius);
    --ostore-primary: var(--opsim-brand);
    --ostore-primary-hover: color-mix(in srgb, var(--opsim-brand) 85%, #000);
    /* --ostore-button-bg / -hover / -pressed are intentionally NOT defined here.
       Leaving them unset lets the var() fallback chain below resolve to
       --ostore-primary, while any individual button can re-point itself by
       declaring --ostore-button-bg on its own selector. */
}

/* ── Button contract ──────────────────────────────────────────────────
   One shared style for every storefront call-to-action. Add .opsim-btn
   to new buttons to opt in; set --ostore-button-bg on a button to give
   it its own color without forking the rest of the style.
   Deliberately excluded: icon/stepper/close/arrow controls (.qty-btn,
   .opsim-qty-btn, .hero-arrow, .carousel-arrow,
   .opsim-video-play-btn, .drawer-close,
   .cart-item-remove, .header-action-item) and all wp-admin UI, which
   keeps brand color out of the dashboard. */
.opsim-btn,
.fp-atc-btn:not(.fp-atc-circle),
.btn-voir-tout,
.checkout-button,
.sticky-atc-btn,
.opsim-confirm-checkout-btn,
.btn-404,
.contact-support-btn,
.submit-review-btn,
.write-review-toggle,
.return-btn,
.opsim-thankyou-whatsapp-btn {
    --qt-action-bg: var(--ostore-button-bg, var(--ostore-primary));
    --qt-action-hover: var(--ostore-button-bg-hover, var(--ostore-primary-hover));
    --qt-action-pressed: var(--ostore-button-bg-pressed, var(--ostore-primary-hover));
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    color: var(--color-bg-white) !important;
    text-decoration: none !important;
    gap: 8px;
    padding: 10px 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--qt-action-bg) 70%, transparent) !important;
    outline: none !important;
    box-shadow: var(--shadow-button) !important;
    border-radius: var(--theme-radius, var(--radius-md)) !important;
    background: var(--qt-action-bg) !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast) !important;
}

.opsim-btn svg,
.fp-atc-btn svg,
.btn-voir-tout svg,
.checkout-button svg,
.sticky-atc-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: currentColor;
    display: inline-block;
    vertical-align: middle;
}

/* --qt-action-hover / --qt-action-pressed are declared above but unused
   without these two rules. Buttons that deliberately suppress hover
   (.btn-404, .return-btn) override these from their own files. */
.opsim-btn:hover,
.fp-atc-btn:not(.fp-atc-circle):hover,
.btn-voir-tout:hover,
.checkout-button:hover,
.sticky-atc-btn:hover,
.opsim-confirm-checkout-btn:hover,
.contact-support-btn:hover,
.submit-review-btn:hover,
.write-review-toggle:hover,
.opsim-thankyou-whatsapp-btn:hover {
    background: var(--qt-action-hover) !important;
    border-color: color-mix(in srgb, var(--qt-action-hover) 70%, transparent) !important;
}

.opsim-btn:active,
.fp-atc-btn:not(.fp-atc-circle):active,
.btn-voir-tout:active,
.checkout-button:active,
.sticky-atc-btn:active,
.opsim-confirm-checkout-btn:active,
.contact-support-btn:active,
.submit-review-btn:active,
.write-review-toggle:active,
.opsim-thankyou-whatsapp-btn:active {
    background: var(--qt-action-pressed) !important;
    border-color: color-mix(in srgb, var(--qt-action-pressed) 70%, transparent) !important;
}

html, body {
    width: 100%;
}
body {
    font-family: var(--opsim-font-primary);
    color: var(--opsim-text-primary);
    background-color: var(--opsim-bg-primary);
    line-height: 1.5;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--opsim-font-secondary);
    font-weight: 700;
}

.opsim-container {
    max-width: var(--opsim-container);
    margin: 0 auto;
    padding: 0 var(--opsim-space-md);
}

.opsim-stable-media {
    aspect-ratio: 16 / 9;
    background-color: var(--opsim-bg-secondary);
    overflow: hidden;
}

.opsim-stable-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.opsim-container > article.page,
.opsim-container > article.post,
.opsim-container > article.opsim-page-article,
.opsim-container > article {
    max-width: 820px;
    margin: 0 auto;
    padding: 35px 20px 70px;
    box-sizing: border-box;
}

.entry-header {
    text-align: left;
    padding: 0 0 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--opsim-border, #f1f5f9);
}

.entry-title {
    font-family: var(--opsim-font-secondary, inherit);
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0;
    color: var(--opsim-text-primary, #1e293b);
    line-height: 1.35;
    text-align: left;
}

.entry-meta {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--opsim-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}

.post-thumbnail {
    margin: 24px 0;
    border-radius: var(--opsim-radius, 5px);
    overflow: hidden;
    box-shadow: var(--opsim-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.entry-content {
    max-width: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--opsim-text-secondary, #4b5563);
    text-align: left;
    word-break: break-word;
}

.entry-content p {
    font-size: inherit;
    line-height: inherit;
    margin-top: 0;
    margin-bottom: 16px;
    color: inherit;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--opsim-text-primary, #1e293b);
    text-align: left;
    font-family: var(--opsim-font-secondary, inherit);
    line-height: 1.4;
}

.entry-content h1 {
    font-size: 18px;
    font-weight: 700;
    margin-top: 28px;
    margin-bottom: 14px;
}

.entry-content h2 {
    font-size: 16.5px;
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 12px;
}

.entry-content h3 {
    font-size: 15px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-size: 14px;
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 8px;
}

.entry-content ul,
.entry-content ol {
    margin: 0 0 18px 0;
    padding-left: 20px;
    padding-right: 0;
}

.entry-content li {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 8px;
    color: inherit;
}

.entry-content li:last-child {
    margin-bottom: 0;
}

.entry-content strong,
.entry-content b {
    font-weight: 600;
    color: var(--opsim-text-primary, #1e293b);
}

.entry-content p a,
.entry-content li a,
.entry-content a:not([class]) {
    color: var(--opsim-brand, #531628);
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.entry-content a.return-btn,
.entry-content a.opsim-thankyou-whatsapp-btn,
.entry-content a.btn,
.entry-content a.button,
.opsim-thank-you-container a,
.opsim-thank-you-container a:hover,
.opsim-thankyou-whatsapp-btn,
.opsim-thankyou-whatsapp-btn *,
.return-btn,
.return-btn * {
    text-decoration: none !important;
}

.entry-content a:hover {
    opacity: 0.8;
}

.page-thank-you-layout {
    padding-top: 15px !important;
}

@media (max-width: 767px) {
    .opsim-container > article.page,
    .opsim-container > article.post,
    .opsim-container > article.opsim-page-article,
    .opsim-container > article {
        padding: 22px 14px 45px;
    }

    .entry-header {
        padding: 0 0 10px;
        margin-bottom: 16px;
        text-align: left;
    }

    .entry-title {
        font-size: 16px !important;
        font-weight: 700;
        letter-spacing: 0.4px;
        line-height: 1.35;
        text-align: left;
    }

    .entry-content {
        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    .entry-content p {
        font-size: 13px !important;
        line-height: 1.65 !important;
        margin-bottom: 12px;
    }

    .entry-content h1 {
        font-size: 15.5px !important;
        margin-top: 20px;
        margin-bottom: 8px;
    }

    .entry-content h2 {
        font-size: 14.5px !important;
        margin-top: 18px;
        margin-bottom: 8px;
    }

    .entry-content h3 {
        font-size: 13.5px !important;
        margin-top: 14px;
        margin-bottom: 6px;
    }

    .entry-content ul,
    .entry-content ol {
        padding-left: 16px;
        margin-bottom: 14px;
    }

    .entry-content li {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-bottom: 6px;
    }

    .post-thumbnail {
        margin: 16px 0;
        border-radius: var(--opsim-radius);
    }
}

@media (max-width: 767px) {
    .opsim-btn,
    .btn-voir-tout:not(.fp-btn-compact),
    .checkout-button,
    .btn-404,
    .contact-support-btn,
    .submit-review-btn,
    .write-review-toggle,
    .return-btn,
    .opsim-thankyou-whatsapp-btn {
        min-height: 38px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        padding: 7px 14px !important;
        border-radius: var(--radius-sm, 5px) !important;
    }
}

/* ── Accessibility: visually-hidden utility ──────────────────────
 * header.php prints .skip-link.screen-reader-text on every page. Without a
 * global rule for it the literal "Aller au contenu" text rendered at the top
 * left of every page. Defined here (not beside a component) because base.css
 * is the only sheet loaded on every request — the near-identical rule in
 * shop-sidebar.css is descendant-scoped to .shop-sidebar and only enqueued on
 * shop pages, so it never applied to the skip link.
 */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* A skip link exists to be reachable by keyboard, so it must become visible
 * once focused — otherwise the rule above just hides it from everyone. */
.screen-reader-text:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 20px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    background: #fff;
    color: var(--opsim-brand, #531628);
    border-radius: var(--opsim-radius, 5px);
    box-shadow: var(--opsim-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    outline: 2px solid var(--opsim-brand, #531628);
    outline-offset: 2px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* ── WordPress admin bar offset ──────────────────────────────────────────
 * Single source of truth for how far sticky/fixed chrome must sit from the
 * top of the viewport once #wpadminbar is present. Everything that pins to
 * the top adds var(--opsim-admin-bar) rather than hardcoding 32/46px.
 *
 * Logged-out visitors never get body.admin-bar, so the value stays 0px and
 * the storefront renders byte-identically to before.
 *
 * WordPress declares --wp-admin--admin-bar--height on <html> (32px, and 46px
 * at <=782px), so desktop/mobile heights are read from core rather than
 * duplicated here. The literal 32px is only a fallback for the case where
 * that variable is unavailable.
 */
:root {
    --opsim-admin-bar: 0px;
}

body.admin-bar {
    --opsim-admin-bar: var(--wp-admin--admin-bar--height, 32px);
}

/* Below 600px core switches #wpadminbar to position:absolute, so it scrolls
 * away with the page instead of staying pinned. Reserving space for it there
 * would leave a permanent empty band under a sticky header once scrolled —
 * so the offset goes back to zero. 600px matches core's own breakpoint for
 * that switch (it is NOT the 782px height breakpoint). */
@media screen and (max-width: 600px) {
    body.admin-bar {
        --opsim-admin-bar: 0px;
    }
}