/* =========================
   PHOENIX STUDIO - eSHOP
   ========================= */

:root {
    --shop-bg: #07070b;
    --shop-bg-soft: #10101a;
    --shop-card: rgba(255, 255, 255, 0.055);
    --shop-card-strong: rgba(255, 255, 255, 0.09);
    --shop-border: rgba(255, 255, 255, 0.12);
    --shop-text: #ffffff;
    --shop-muted: #b6b6c8;
    --shop-gold: #ffcc66;
    --shop-orange: #ff7a1a;
    --shop-red: #ff3d5a;
    --shop-purple: #9b5cff;
    --shop-cyan: #00e5ff;
    --shop-green: #45ff9a;
    --shop-shadow: 0 25px 80px rgba(0, 0, 0, 0.45);
}

* {
    box-sizing: border-box;
}

body.eshop-page {
    background: var(--shop-bg);
    color: var(--shop-text);
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}

/* ================= HERO ================= */

.eshop-hero {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(255, 122, 26, 0.28), transparent 35%),/*35 32*/
        radial-gradient(circle at top right, rgba(155, 92, 255, 0.28), transparent 32%),
        linear-gradient(rgba(5, 5, 10, 0.55), rgba(5, 5, 10, 0.92)),
        url("Illustration/Illustration2\ copie.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
}

.eshop-hero-layer {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(0, 0, 0, 0.82), rgba(7, 7, 11, 0.35), rgba(0, 0, 0, 0.9)),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 70px
        );
    pointer-events: none;
}

.eshop-header-text {
    position: relative;
    z-index: 2;
    width: min(1180px, 90%);
    margin: auto;
    padding: 130px 0 80px;
}

.eshop-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--shop-gold);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 2px;
    font-weight: 700;
}

.eshop-kicker::before {
    content: "";
    width: 34px;
    height: 2px;
    background: linear-gradient(90deg, var(--shop-orange), var(--shop-gold));
    border-radius: 50px;
}

.eshop-header-text h1 {
    max-width: 950px;
    margin: 18px 0 22px;
    font-size: clamp(2.5rem, 6vw, 6.4rem);
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -4px;
    color: #fff;
    text-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
}

.eshop-header-text p {
    max-width: 740px;
    color: var(--shop-muted);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.8;
}

.eshop-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.eshop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: 0.35s ease;
    font-family: inherit;
}

.eshop-btn.primary {
    color: #160b00;
    background: linear-gradient(135deg, var(--shop-gold), var(--shop-orange));
    box-shadow: 0 16px 45px rgba(255, 122, 26, 0.25);
}

.eshop-btn.primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 60px rgba(255, 122, 26, 0.42);
}

.eshop-btn.secondary {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
}

.eshop-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-4px);
}

.eshop-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 16px;
    width: min(720px, 100%);
    margin-top: 50px;
}

.eshop-hero-stats div {
    padding: 22px;
    border: 1px solid var(--shop-border);
    background: rgba(255, 255, 255, 0.07);
    border-radius: 24px;
    backdrop-filter: blur(16px);
}

.eshop-hero-stats strong {
    display: block;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 900;
}

.eshop-hero-stats span {
    color: var(--shop-muted);
    font-size: 0.9rem;
}

/* ================= SECTIONS ================= */

.section-padding {
    width: min(1180px, 90%);
    margin: 0 auto;
    padding: 110px 0;
}

.eshop-section-header {
    max-width: 780px;
    margin-bottom: 44px;
}

.eshop-section-header h2,
.toolbar-left h2 {
    margin: 12px 0 16px;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.05;
    color: #fff;
    font-weight: 900;
    letter-spacing: -2px;
}

.eshop-section-header p {
    color: var(--shop-muted);
    line-height: 1.8;
}

/* ================= CATEGORIES ================= */

.eshop-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.eshop-category-card {
    position: relative;
    padding: 30px;
    min-height: 250px;
    border-radius: 32px;
    border: 1px solid var(--shop-border);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
        var(--shop-bg-soft);
    box-shadow: var(--shop-shadow);
    overflow: hidden;
    transition: 0.35s ease;
}

.eshop-category-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -45px;
    bottom: -45px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 122, 26, 0.35), transparent 68%);
}

.eshop-category-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 204, 102, 0.35);
}

.category-icon {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    background: rgba(255, 204, 102, 0.12);
    border: 1px solid rgba(255, 204, 102, 0.22);
    margin-bottom: 22px;
}

.eshop-category-card h3 {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 12px;
}

.eshop-category-card p {
    color: var(--shop-muted);
    line-height: 1.7;
}

/* ================= TOOLBAR ================= */

.eshop-toolbar {
    width: min(1180px, 90%);
    margin: 0 auto;
    padding: 30px;
    border-radius: 34px;
    border: 1px solid var(--shop-border);
    background: rgba(255, 255, 255, 0.055);
    display: grid;
    grid-template-columns: 0.9fr 1.4fr;
    gap: 30px;
    align-items: center;
    backdrop-filter: blur(18px);
}

.toolbar-right {
    display: grid;
    gap: 18px;
}

.search-box {
    position: relative;
}

.search-box i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--shop-gold);
}

.search-box input {
    width: 100%;
    min-height: 52px;
    border-radius: 999px;
    border: 1px solid var(--shop-border);
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    padding: 0 20px 0 48px;
    outline: none;
    font-family: inherit;
}

.search-box input:focus {
    border-color: rgba(255, 204, 102, 0.55);
    box-shadow: 0 0 0 4px rgba(255, 204, 102, 0.08);
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-btn {
    border: 1px solid var(--shop-border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--shop-muted);
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    transition: 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: linear-gradient(135deg, var(--shop-gold), var(--shop-orange));
    color: #120800;
    border-color: transparent;
}

/* ================= PRODUITS ================= */

.product-grid {
    width: min(1180px, 90%);
    margin: 36px auto 0;
    padding-bottom: 110px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.product-card {
    border-radius: 34px;
    border: 1px solid var(--shop-border);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
        #0c0c14;
    overflow: hidden;
    box-shadow: var(--shop-shadow);
    transition: 0.35s ease;
}

.product-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 204, 102, 0.35);
}

.product-image {
    position: relative;
    height: 270px;
    overflow: hidden;
    background: #15151f;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: 0.5s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.08);
}

.product-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.68);
    color: var(--shop-gold);
    border: 1px solid rgba(255, 204, 102, 0.28);
    backdrop-filter: blur(12px);
    font-size: 0.78rem;
    font-weight: 800;
}

.product-content {
    padding: 26px;
}

.product-category {
    color: var(--shop-cyan);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 800;
}

.product-content h3 {
    color: #fff;
    margin: 10px 0 12px;
    font-size: 1.28rem;
    line-height: 1.3;
}

.product-content p {
    color: var(--shop-muted);
    line-height: 1.7;
    min-height: 78px;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: 22px 0 16px;
}

.product-footer strong {
    color: var(--shop-gold);
    font-size: 1.12rem;
}

.details-btn {
    border: 0;
    background: transparent;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: 0.3s ease;
}

.details-btn:hover {
    color: var(--shop-gold);
}

.add-cart-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 18px;
    border: 1px solid rgba(255, 204, 102, 0.2);
    background: rgba(255, 204, 102, 0.1);
    color: var(--shop-gold);
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: 0.3s ease;
}

.add-cart-btn:hover {
    background: linear-gradient(135deg, var(--shop-gold), var(--shop-orange));
    color: #130900;
    transform: translateY(-3px);
}

/* ================= PROCESS ================= */

.shop-process {
    padding-top: 30px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.process-card {
    padding: 30px;
    border-radius: 30px;
    border: 1px solid var(--shop-border);
    background: rgba(255, 255, 255, 0.055);
    transition: 0.35s ease;
}

.process-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.085);
}

.process-card span {
    display: inline-flex;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    align-items: center;
    justify-content: center;
    color: #150900;
    background: linear-gradient(135deg, var(--shop-gold), var(--shop-orange));
    font-weight: 900;
    margin-bottom: 22px;
}

.process-card h3 {
    color: #fff;
    margin-bottom: 12px;
}

.process-card p {
    color: var(--shop-muted);
    line-height: 1.7;
}

/* ================= CTA ================= */

.eshop-cta {
    width: min(1180px, 90%);
    margin: 0 auto 110px;
    padding: 46px;
    border-radius: 38px;
    border: 1px solid rgba(255, 204, 102, 0.24);
    background:
        radial-gradient(circle at top right, rgba(255, 122, 26, 0.22), transparent 35%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    box-shadow: var(--shop-shadow);
}

.eshop-cta h2 {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.05;
    margin: 12px 0 14px;
}

.eshop-cta p {
    color: var(--shop-muted);
    line-height: 1.8;
    max-width: 720px;
}

/* ================= MODAL ================= */

.product-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.product-modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(10px);
}

.modal-content {
    position: relative;
    z-index: 2;
    width: min(920px, 96%);
    border-radius: 34px;
    overflow: hidden;
    border: 1px solid var(--shop-border);
    background: #0d0d15;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--shop-border);
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
}

.modal-image {
    min-height: 440px;
    background: #171722;
}

.modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-info {
    padding: 44px;
}

.modal-info h2 {
    color: #fff;
    font-size: 2rem;
    margin: 14px 0;
}

.modal-info p {
    color: var(--shop-muted);
    line-height: 1.8;
}

.modal-price {
    color: var(--shop-gold);
    font-size: 1.8rem;
    font-weight: 900;
    margin: 28px 0;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ================= PANIER ================= */

.floating-cart {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(255, 204, 102, 0.32);
    background: linear-gradient(135deg, var(--shop-gold), var(--shop-orange));
    color: #120800;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    cursor: pointer;
    box-shadow: 0 18px 55px rgba(255, 122, 26, 0.35);
}

.floating-cart span {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--shop-red);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 900;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: -440px;
    width: min(420px, 92%);
    height: 100vh;
    z-index: 9998;
    background: #0b0b12;
    border-left: 1px solid var(--shop-border);
    box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6);
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: 0.35s ease;
}

.cart-drawer.active {
    right: 0;
}

.cart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid var(--shop-border);
    padding-bottom: 20px;
}

.cart-header h3 {
    color: #fff;
    font-size: 1.6rem;
    margin-top: 6px;
}

.cart-header button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--shop-border);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 24px 0;
}

.empty-cart {
    color: var(--shop-muted);
    text-align: center;
    margin-top: 50px;
}

.cart-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-item img {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    object-fit: cover;
}

.cart-item h4 {
    color: #fff;
    font-size: 0.92rem;
    line-height: 1.3;
}

.cart-item span {
    color: var(--shop-gold);
    font-size: 0.85rem;
    font-weight: 800;
}

.remove-item {
    border: 0;
    background: rgba(255, 61, 90, 0.12);
    color: var(--shop-red);
    width: 34px;
    height: 34px;
    border-radius: 12px;
    cursor: pointer;
}

.cart-footer {
    border-top: 1px solid var(--shop-border);
    padding-top: 20px;
}

.cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.cart-total span {
    color: var(--shop-muted);
}

.cart-total strong {
    color: var(--shop-gold);
    font-size: 1.2rem;
}

.cart-footer .eshop-btn {
    width: 100%;
}

.clear-cart-btn {
    width: 100%;
    margin-top: 10px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 61, 90, 0.25);
    background: rgba(255, 61, 90, 0.08);
    color: var(--shop-red);
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
}

/* ================= ANIMATIONS ================= */

.animate-fade {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

html.js-enabled .animate-fade {
    opacity: 0;
    transform: translateY(35px);
}

html.js-enabled .animate-fade.active {
    opacity: 1;
    transform: translateY(0);
}
/* ================= RESPONSIVE ================= */

@media (max-width: 1050px) {
    .eshop-category-grid,
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .eshop-toolbar {
        grid-template-columns: 1fr;
    }

    .eshop-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 760px) {
    .eshop-hero {
        min-height: auto;
        background-attachment: scroll;
    }

    .eshop-header-text {
        padding: 120px 0 70px;
    }

    .eshop-header-text h1 {
        letter-spacing: -2px;
    }

    .eshop-hero-stats {
        grid-template-columns: 1fr;
    }

    .section-padding {
        padding: 80px 0;
    }

    .eshop-category-grid,
    .process-grid,
    .product-grid {
        grid-template-columns: 1fr;
    }

    .eshop-toolbar {
        padding: 22px;
    }

    .filter-buttons {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
    }

    .filter-btn {
        flex: 0 0 auto;
    }

    .modal-content {
        grid-template-columns: 1fr;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-image {
        min-height: 260px;
    }

    .modal-info {
        padding: 28px;
    }

    .eshop-cta {
        padding: 30px;
        margin-bottom: 80px;
    }
}

@media (max-width: 480px) {
    .product-image {
        height: 230px;
    }

    .eshop-btn {
        width: 100%;
    }

    .eshop-hero-actions {
        width: 100%;
    }

    .floating-cart {
        right: 18px;
        bottom: 18px;
    }
}

/*********************************************************************************************************/

/* =========================
   BOUTONS COMMANDE WHATSAPP / EMAIL
   ========================= */

.order-actions {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.order-actions .eshop-btn {
    width: 100%;
    gap: 8px;
}

.order-actions .eshop-btn.secondary {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.order-actions .eshop-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.14);
}



/* Correctif sécurité clics eShop */
.product-card,
.product-card *,
.filter-btn,
.add-cart-btn,
.details-btn,
.floating-cart,
.cart-drawer,
.cart-drawer * {
    pointer-events: auto;
}

.floating-cart {
    z-index: 10001;
}

.cart-drawer {
    z-index: 10000;
}

.product-modal {
    z-index: 10002;
}
/* =====================================================================
   PATCH E-SHOP UNIQUEMENT — NAVIGATION, SCROLL ET RESPONSIVE
   Ce bloc est volontairement isolé dans ser_shop.css : style.css,
   Portfolio.css et SmallResolution.js restent intacts.
   ===================================================================== */

:root {
    --eshop-nav-height: 88px;
}

/* Un seul conteneur de défilement sur la page e-Shop.
   La gouttière réservée garde la scrollbar toujours visible et empêche la
   navbar fixe de la recouvrir. */
html.eshop-root {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scroll-padding-top: calc(var(--eshop-nav-height) + 22px);
}

html.eshop-root:not(.site-menu-locked) body.eshop-page {
    min-height: 100%;
    height: auto;
    overflow-y: visible;
}

html.eshop-root.site-menu-locked,
html.eshop-root.eshop-modal-open {
    overflow: hidden;
}

body.eshop-page {
    position: relative;
    overflow-x: clip;
}

/* La navbar reste au-dessus de toute section, sans couvrir la scrollbar. */
body.eshop-page .sticky-nav {
    position: fixed;
    inset: 0 var(--site-scrollbar-width, 0px) auto 0;
    width: auto;
    min-height: var(--eshop-nav-height);
    z-index: 11050;
    overflow: visible;
    background: rgba(18, 20, 26, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
}

body.eshop-page .sticky-nav > a {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}

body.eshop-page .sticky-nav img {
    display: block;
}

/* Le height: 50vh hérité de .sub-header provoquait le chevauchement mobile.
   Le hero reprend maintenant sa hauteur réelle, y compris les boutons et stats. */
body.eshop-page .sub-header.eshop-hero {
    width: 100%;
    height: auto !important;
    min-height: 100svh;
    display: block;
    background-attachment: scroll;
}

@supports (min-height: 100dvh) {
    body.eshop-page .sub-header.eshop-hero {
        min-height: 100dvh;
    }
}

body.eshop-page .eshop-header-text {
    width: min(1120px, 90%);
    margin: 0 auto;
    padding: clamp(112px, 14vh, 142px) 0 clamp(34px, 6vh, 72px);
}

body.eshop-page .eshop-header-text h1 {
    max-width: 980px;
    margin: 16px 0 18px;
    font-size: clamp(3.1rem, 4.5vw, 6rem);
    line-height: 0.92;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

body.eshop-page .eshop-header-text p {
    max-width: 780px;
    margin: 0;
    padding: 0;
    font-size: clamp(1rem, 1.25vw, 1.16rem);
    line-height: 1.65;
}

body.eshop-page .eshop-hero-actions {
    margin-top: 26px;
}

body.eshop-page .eshop-hero-stats {
    width: min(740px, 100%);
    margin-top: 30px;
    gap: 14px;
}

body.eshop-page .eshop-hero-stats div {
    min-height: 94px;
    display: grid;
    align-content: center;
    padding: 16px 18px;
    border-radius: 22px;
}

body.eshop-page .eshop-hero-stats strong {
    font-size: 1.65rem;
    line-height: 1.15;
}

body.eshop-page #shop-products,
body.eshop-page #shop-process {
    scroll-margin-top: calc(var(--eshop-nav-height) + 22px);
}

/* Le GIF fixe était coûteux pendant le scroll, surtout avec les filtres
   translucides. Le fond reste visuel mais défile avec le contenu. */
body.eshop-page .eshop-hero,
body.eshop-page .eshop-hero::before,
body.eshop-page .eshop-hero::after {
    background-attachment: scroll !important;
}

/* Sous-menus desktop : pile supérieure stable + zone invisible anti-coupure
   entre l'onglet principal et le panneau. */
@media (min-width: 1051px) {
    body.eshop-page .nav-links .dropdown-content {
        z-index: 11060;
    }

    body.eshop-page .nav-links .dropdown-content::before {
        content: "";
        position: absolute;
        top: -14px;
        right: 0;
        left: 0;
        height: 14px;
    }

    body.eshop-page .nav-links .dropdown:hover > .dropdown-content,
    body.eshop-page .nav-links .dropdown:focus-within > .dropdown-content {
        display: block;
    }
}

/* Navigation compacte pour 13, 14 et 16 pouces : elle reste sur une ligne
   jusqu'au vrai seuil tablette, puis le panneau burger prend le relais. */
@media (min-width: 1051px) and (max-width: 1450px) {
    body.eshop-page .sticky-nav {
        padding: 9px 16px;
    }

    body.eshop-page .sticky-nav img {
        width: 116px;
    }

    body.eshop-page .nav-links ul li {
        padding: 7px 6px;
    }

    body.eshop-page .nav-links ul li a {
        font-size: 11.5px;
    }
}

/* Ordinateurs à faible hauteur : les trois statistiques restent dans le hero
   sans couper la première section qui suit. */
@media (min-width: 1051px) and (max-height: 850px) {
    body.eshop-page .eshop-header-text {
        padding-top: calc(var(--eshop-nav-height) + 24px);
        padding-bottom: 30px;
    }

    body.eshop-page .eshop-header-text h1 {
        margin: 13px 0 15px;
        font-size: clamp(3rem, 4.25vw, 4.85rem);
    }

    body.eshop-page .eshop-header-text p {
        line-height: 1.55;
    }

    body.eshop-page .eshop-hero-actions {
        margin-top: 22px;
    }

    body.eshop-page .eshop-hero-stats {
        margin-top: 24px;
    }

    body.eshop-page .eshop-hero-stats div {
        min-height: 82px;
        padding: 13px 16px;
    }
}

/* Les espaces très larges utilisent mieux l'écran sans modifier la structure
   ni le nombre de cartes. */
@media (min-width: 1800px) {
    body.eshop-page .eshop-header-text,
    body.eshop-page .section-padding,
    body.eshop-page .eshop-toolbar,
    body.eshop-page .product-grid,
    body.eshop-page .eshop-cta {
        width: min(1420px, 88%);
    }

    body.eshop-page .eshop-header-text h1 {
        max-width: 1120px;
    }

    body.eshop-page .eshop-header-text p {
        max-width: 830px;
    }

    body.eshop-page .eshop-hero-stats {
        width: min(860px, 100%);
    }
}

/* =====================================================================
   MENU BURGER E-SHOP — MOBILE + TABLETTE (jusqu'à 1050px)
   SmallResolution.js déplace déjà le panneau dans body : ce style garantit
   qu'il reste réellement au-dessus de la navbar et du reste de la page.
   ===================================================================== */
@media (max-width: 1050px) {
    body.eshop-page .sticky-nav {
        min-height: 90px;
        padding: 11px 20px;
    }

    body.eshop-page .sticky-nav img {
        width: 126px;
    }

    body.eshop-page .sticky-nav > .fa.fa-bars {
        width: 48px;
        height: 48px;
        margin: 0;
        display: grid !important;
        place-items: center;
        flex: 0 0 auto;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 14px;
        background: linear-gradient(145deg, rgba(0, 229, 255, 0.22), rgba(255, 122, 26, 0.2));
        color: #ffffff;
        font-size: 23px;
        line-height: 1;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
        cursor: pointer;
        transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    }

    body.eshop-page .sticky-nav > .fa.fa-bars:hover,
    body.eshop-page .sticky-nav > .fa.fa-bars:focus-visible {
        background: linear-gradient(145deg, rgba(0, 229, 255, 0.36), rgba(255, 122, 26, 0.36));
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36);
        outline: none;
        transform: translateY(-1px);
    }

    .site-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 11080;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        background: rgba(2, 3, 8, 0.64);
        backdrop-filter: blur(3px);
        transition: opacity 0.28s ease, visibility 0.28s ease;
    }

    .site-menu-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.eshop-page .nav-links {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: min(88vw, 390px) !important;
        max-width: 390px !important;
        height: 100dvh !important;
        min-height: 100vh;
        z-index: 11100 !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 0 34px;
        text-align: left;
        background:
            radial-gradient(circle at right top, rgba(0, 229, 255, 0.16), transparent 34%),
            radial-gradient(circle at left bottom, rgba(255, 122, 26, 0.18), transparent 34%),
            #11131c !important;
        border-left: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: -20px 0 55px rgba(0, 0, 0, 0.52);
        transition: right 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
        will-change: right;
    }

    body.eshop-page .nav-links.menu-open {
        right: 0 !important;
    }

    body.eshop-page .nav-links.menu-transition-disabled,
    body.eshop-page.is-resizing .nav-links {
        transition: none !important;
    }

    body.eshop-page .nav-links .fa-close {
        position: absolute;
        top: 18px;
        right: 18px;
        left: auto;
        z-index: 2;
        width: 44px;
        height: 44px;
        margin: 0;
        display: grid !important;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        transition: transform 0.22s ease, background 0.22s ease;
    }

    body.eshop-page .nav-links .fa-close:hover,
    body.eshop-page .nav-links .fa-close:focus-visible {
        background: rgba(255, 61, 90, 0.22);
        outline: none;
        transform: rotate(90deg);
    }

    body.eshop-page .nav-links ul {
        padding: 86px 18px 24px;
    }

    body.eshop-page .nav-links ul li {
        display: block;
        width: 100%;
        margin: 0 0 5px;
        padding: 0;
    }

    body.eshop-page .nav-links ul li > a {
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 13px;
        border-radius: 12px;
        color: #f7f9ff !important;
        font-size: 13px;
        font-weight: 650;
        line-height: 1.35;
        letter-spacing: 0.01em;
    }

    body.eshop-page .nav-links ul li > a:hover,
    body.eshop-page .nav-links ul li > a:focus-visible,
    body.eshop-page .nav-links ul li.active-menu > a,
    body.eshop-page .nav-links ul li.active-parent > a {
        background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(255, 122, 26, 0.15)) !important;
        color: #ffffff !important;
        outline: none;
        text-shadow: none;
    }

    body.eshop-page .nav-links .dropdown:hover > .dropdown-content,
    body.eshop-page .nav-links .services-dropdown:hover > .services-dropdown-content,
    body.eshop-page .nav-links .portfolio-dropdown:hover > .portfolio-dropdown-content {
        display: none !important;
    }

    body.eshop-page .nav-links .dropdown.open > .dropdown-content,
    body.eshop-page .nav-links .dropdown.open:hover > .dropdown-content {
        display: block !important;
    }

    body.eshop-page .nav-links .dropdown-content,
    body.eshop-page .nav-links .services-dropdown-content,
    body.eshop-page .nav-links .portfolio-dropdown-content {
        position: static !important;
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 4px 0 11px !important;
        padding: 8px !important;
        background: rgba(0, 0, 0, 0.2) !important;
        border: 1px solid rgba(255, 255, 255, 0.11) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    body.eshop-page .nav-links .services-dropdown-content li a,
    body.eshop-page .nav-links .portfolio-dropdown-content li a {
        display: grid !important;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        min-height: 56px;
        padding: 10px !important;
        border-radius: 10px;
        color: #ffffff !important;
        transform: none !important;
    }

    body.eshop-page .nav-links .services-dropdown-content li a:hover,
    body.eshop-page .nav-links .portfolio-dropdown-content li a:hover {
        padding-left: 10px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        transform: none !important;
    }

    body.eshop-page .nav-links .service-icon,
    body.eshop-page .nav-links .portfolio-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 10px;
        font-size: 16px;
        background: rgba(0, 229, 255, 0.11);
        border-color: rgba(0, 229, 255, 0.2);
    }

    body.eshop-page .nav-links .service-text,
    body.eshop-page .nav-links .portfolio-text {
        min-width: 0;
        display: block;
        text-align: left;
    }

    body.eshop-page .nav-links .service-text strong,
    body.eshop-page .nav-links .portfolio-text strong {
        display: block;
        margin-bottom: 3px;
        color: #ffffff !important;
        font-size: 12.5px;
        line-height: 1.3;
    }

    body.eshop-page .nav-links .service-text small,
    body.eshop-page .nav-links .portfolio-text small {
        display: block;
        max-width: none !important;
        color: rgba(234, 240, 255, 0.74) !important;
        font-size: 10.5px;
        line-height: 1.38;
        overflow-wrap: anywhere;
    }

    body.eshop-page .eshop-header-text {
        width: min(920px, 90%);
        padding-top: calc(var(--eshop-nav-height) + 36px);
    }
}

/* Téléphones : le hero se développe naturellement. Aucun titre, bouton,
   compteur ou début de section ne peut se superposer. */
@media (max-width: 760px) {
    body.eshop-page .sub-header.eshop-hero {
        min-height: 0;
    }

    body.eshop-page .eshop-header-text {
        width: min(560px, 90%);
        padding: calc(var(--eshop-nav-height) + 34px) 0 48px;
    }

    body.eshop-page .eshop-kicker {
        gap: 7px;
        font-size: 0.68rem;
        letter-spacing: 1.55px;
    }

    body.eshop-page .eshop-kicker::before {
        width: 30px;
    }

    body.eshop-page .eshop-header-text h1 {
        max-width: 100%;
        margin: 14px 0 20px;
        font-size: clamp(2.3rem, 10vw, 3.45rem);
        line-height: 0.96;
        letter-spacing: -0.055em;
    }

    body.eshop-page .eshop-header-text p {
        font-size: 1rem;
        line-height: 1.68;
    }

    body.eshop-page .eshop-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
        margin-top: 26px;
    }

    body.eshop-page .eshop-hero-actions .eshop-btn {
        width: 100%;
        min-height: 54px;
    }

    body.eshop-page .eshop-hero-stats {
        grid-template-columns: 1fr;
        width: 100%;
        margin-top: 28px;
        gap: 14px;
    }

    body.eshop-page .eshop-hero-stats div {
        min-height: 112px;
        padding: 20px;
        border-radius: 22px;
        backdrop-filter: none;
    }

    body.eshop-page .eshop-hero-stats strong {
        font-size: 1.8rem;
    }

    body.eshop-page .eshop-intro.section-padding {
        padding-top: 72px;
    }

    body.eshop-page .section-padding {
        width: min(560px, 90%);
    }

    body.eshop-page .eshop-toolbar,
    body.eshop-page .product-grid,
    body.eshop-page .eshop-cta {
        width: min(560px, 90%);
    }
}

@media (max-width: 480px) {
    body.eshop-page .sticky-nav {
        padding-inline: 16px;
    }

    body.eshop-page .sticky-nav img {
        width: 118px;
    }

    body.eshop-page .eshop-header-text h1 {
        font-size: clamp(2.25rem, 10.2vw, 2.9rem);
    }

    body.eshop-page .eshop-header-text p {
        font-size: 0.98rem;
    }

    body.eshop-page .eshop-hero-stats div {
        min-height: 106px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.eshop-root {
        scroll-behavior: auto;
    }

    body.eshop-page *,
    body.eshop-page *::before,
    body.eshop-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Les interfaces d'action de l'e-Shop gardent leur priorité fonctionnelle
   (panier / modal), tandis que les sections ordinaires restent sous la navbar. */
body.eshop-page .floating-cart {
    z-index: 11060;
}

body.eshop-page .cart-drawer {
    z-index: 11200;
}

body.eshop-page .product-modal {
    z-index: 11300;
}

/* =====================================================================
   PATCH E-SHOP — POPUP PRODUIT ENTIÈREMENT VISIBLE
   Limité à ser_shop.css : aucune structure HTML ni feuille globale modifiée.
   ===================================================================== */

/* Le fond ne défile pas pendant l'ouverture ; la modale garde son propre
   défilement tactile, y compris sur téléphone et tablette. */
html.eshop-root.eshop-modal-open,
html.eshop-root.eshop-modal-open body.eshop-page {
    overscroll-behavior: none;
}

body.eshop-page .product-modal {
    position: fixed;
    inset: 0;
    z-index: 11300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2.5vw, 30px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body.eshop-page .product-modal.active {
    display: flex;
}

body.eshop-page .product-modal .modal-overlay {
    position: fixed;
    inset: 0;
}

/* La hauteur de la carte ne dépasse jamais la fenêtre. Le contenu trop long
   se parcourt à l'intérieur de la popup, sans masquer l'image ou les actions. */
body.eshop-page .product-modal .modal-content {
    position: relative;
    z-index: 2;
    width: min(920px, 100%);
    max-width: 920px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

body.eshop-page .product-modal .modal-content > * {
    min-width: 0;
}

/* Le bouton de fermeture reste attaché à la partie haute de la carte,
   même lorsqu'on fait défiler une popup longue. */
body.eshop-page .product-modal .modal-close {
    position: sticky;
    top: 14px;
    right: auto;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    margin: 14px 14px 0 0;
    z-index: 8;
    flex: 0 0 auto;
    touch-action: manipulation;
}

body.eshop-page .product-modal .modal-image {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    height: clamp(360px, 62dvh, 580px);
}

body.eshop-page .product-modal .modal-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    padding: clamp(30px, 4vw, 44px);
}

body.eshop-page .product-modal .modal-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@media (min-width: 761px) and (max-width: 1050px) {
    body.eshop-page .product-modal {
        padding: 18px;
    }

    body.eshop-page .product-modal .modal-content {
        width: min(900px, 100%);
        max-height: calc(100dvh - 36px);
        grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
        border-radius: 28px;
    }

    body.eshop-page .product-modal .modal-image {
        height: clamp(330px, 58dvh, 500px);
    }

    body.eshop-page .product-modal .modal-info {
        padding: 32px 30px;
    }

    body.eshop-page .product-modal .modal-info h2 {
        font-size: clamp(1.65rem, 3.1vw, 2rem);
    }

    body.eshop-page .product-modal .modal-price {
        margin: 22px 0;
    }
}

/* Téléphone : une seule colonne et défilement interne. Ainsi, aucune partie
   de la carte n'est hors écran, même en paysage ou avec un écran bas. */
@media (max-width: 760px) {
    body.eshop-page .product-modal {
        align-items: flex-start;
        padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    }

    body.eshop-page .product-modal .modal-content {
        width: 100%;
        max-height: calc(100dvh - 20px);
        grid-template-columns: minmax(0, 1fr);
        border-radius: 24px;
    }

    body.eshop-page .product-modal .modal-close {
        top: 10px;
        grid-column: 1;
        grid-row: 1;
        margin: 10px 10px 0 0;
        width: 46px;
        height: 46px;
        font-size: 1.7rem;
        background: rgba(5, 5, 10, 0.82);
        backdrop-filter: blur(10px);
    }

    body.eshop-page .product-modal .modal-image {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: clamp(220px, 36dvh, 320px);
        min-height: 0;
    }

    body.eshop-page .product-modal .modal-info {
        grid-column: 1;
        grid-row: 2;
        padding: 26px 22px 30px;
    }

    body.eshop-page .product-modal .modal-info h2 {
        margin: 10px 0 14px;
        font-size: clamp(1.55rem, 7vw, 2rem);
        line-height: 1.18;
    }

    body.eshop-page .product-modal .modal-info p {
        line-height: 1.65;
    }

    body.eshop-page .product-modal .modal-price {
        margin: 22px 0;
        font-size: 1.55rem;
    }

    body.eshop-page .product-modal .modal-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body.eshop-page .product-modal .modal-actions .eshop-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    body.eshop-page .product-modal {
        padding-inline: 8px;
    }

    body.eshop-page .product-modal .modal-content {
        max-height: calc(100dvh - 16px);
        border-radius: 20px;
    }

    body.eshop-page .product-modal .modal-image {
        height: clamp(205px, 33dvh, 280px);
    }

    body.eshop-page .product-modal .modal-info {
        padding: 22px 18px 26px;
    }
}

/* Tablettes en paysage et ordinateurs peu hauts : aucun débordement vertical. */
@media (min-width: 761px) and (max-height: 700px) {
    body.eshop-page .product-modal {
        padding: 10px 18px;
    }

    body.eshop-page .product-modal .modal-content {
        max-height: calc(100dvh - 20px);
    }

    body.eshop-page .product-modal .modal-image {
        height: clamp(280px, 74dvh, 440px);
    }

    body.eshop-page .product-modal .modal-info {
        padding: 26px 28px;
    }
}


/* =====================================================================
   PATCH E-SHOP — IMAGE PRODUIT ENTIÈRE, SANS ZOOM NI ROGNAGE
   La photo conserve son ratio natif : aucun object-fit: cover dans la popup.
   Le fond diffuse une version floutée du même visuel, afin d'éviter les bandes
   noires lorsque l'image est verticale, horizontale ou carrée.
   ===================================================================== */

body.eshop-page .product-modal .modal-image {
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
    background: #11121a;
}

/* Le fond est renseigné par ser_shop.js au moment de l'ouverture de la popup. */
body.eshop-page .product-modal .modal-image::before {
    content: "";
    position: absolute;
    inset: -28px;
    z-index: -1;
    background-image: var(--modal-product-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(24px);
    transform: scale(1.12);
    opacity: 0.46;
}

/* Affichage intégral : l'image n'est ni agrandie par un effet, ni coupée. */
body.eshop-page .product-modal .modal-image img,
body.eshop-page .product-modal .modal-image img:hover {
    position: relative;
    z-index: 1;
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center;
    transform: none !important;
    transition: none !important;
    background: transparent !important;
}

/* Sur téléphone, une hauteur plus généreuse permet de lire un visuel vertical
   sans rogner l'image. Le contenu de la popup reste défilable à l'intérieur. */
@media (max-width: 760px) {
    body.eshop-page .product-modal .modal-image {
        height: clamp(290px, 48dvh, 470px);
    }
}

@media (max-width: 480px) {
    body.eshop-page .product-modal .modal-image {
        height: clamp(265px, 45dvh, 410px);
    }
}

@media (min-width: 761px) and (max-height: 700px) {
    body.eshop-page .product-modal .modal-image {
        height: clamp(270px, 70dvh, 430px);
    }
}


/* =====================================================================
   PATCH E-SHOP v4 — POPUP ADAPTATIVE SELON LE FORMAT DE L'IMAGE
   - Images horizontales, verticales ou carrées affichées intégralement.
   - Aucun object-fit: cover dans la popup : aucun zoom ni recadrage.
   - Les zones libres utilisent un fond flouté du même visuel, jamais une
     bande noire issue de la carte.
   - Limité à ser_shop.css et aux classes ajoutées par ser_shop.js.
   ===================================================================== */

/* Le fond flouté occupe réellement le panneau image. La version précédente
   plaçait le pseudo-élément derrière le fond du panneau, ce qui pouvait laisser
   apparaître une large bande sombre au bas de certaines images. */
body.eshop-page .product-modal .modal-image {
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
    background-color: #151621;
    background-image: var(--modal-product-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body.eshop-page .product-modal .modal-image::before {
    inset: -32px;
    z-index: 0;
    background-image: var(--modal-product-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(28px);
    transform: scale(1.14);
    opacity: 0.72;
}

/* Voile léger : le fond reste harmonieux, mais l'image principale reste
   parfaitement lisible et conserve sa taille complète. */
body.eshop-page .product-modal .modal-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(8, 9, 15, 0.16);
}

body.eshop-page .product-modal .modal-image img,
body.eshop-page .product-modal .modal-image img:hover {
    position: relative;
    z-index: 1;
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center;
    transform: none !important;
    transition: none !important;
    background: transparent !important;
}

/* Écran desktop et tablette : la carte reçoit une hauteur maîtrisée. Le
   panneau image couvre donc toute sa colonne et l'information défile dans sa
   propre colonne lorsque nécessaire. Cela supprime définitivement la zone
   vide/noire créée par une image plus courte que le texte. */
@media (min-width: 761px) {
    body.eshop-page .product-modal .modal-content {
        width: min(1020px, 100%);
        max-width: 1020px;
        height: min(680px, calc(100dvh - 48px));
        max-height: calc(100dvh - 48px);
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.92fr);
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        overflow: hidden;
    }

    /* Un visuel horizontal reçoit davantage de largeur afin de rester grand
       et naturel dans la popup, sans étirement. */
    body.eshop-page .product-modal .modal-content.modal-media-landscape {
        width: min(1180px, 100%);
        max-width: 1180px;
        grid-template-columns: minmax(0, 1.28fr) minmax(350px, 0.72fr);
    }

    body.eshop-page .product-modal .modal-content.modal-media-portrait {
        grid-template-columns: minmax(300px, 0.92fr) minmax(360px, 1.08fr);
    }

    body.eshop-page .product-modal .modal-image {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: stretch;
    }

    body.eshop-page .product-modal .modal-info {
        grid-column: 2;
        grid-row: 1;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: clamp(30px, 4vw, 48px);
    }

    /* Le bouton est toujours disponible et ne modifie plus la hauteur de la
       grille, même lorsque le contenu de droite est plus long. */
    body.eshop-page .product-modal .modal-close {
        position: absolute;
        top: 16px;
        right: 16px;
        grid-column: auto;
        grid-row: auto;
        margin: 0;
        z-index: 10;
    }

    body.eshop-page .product-modal .modal-info .eshop-kicker,
    body.eshop-page .product-modal .modal-info h2,
    body.eshop-page .product-modal .modal-info p,
    body.eshop-page .product-modal .modal-price,
    body.eshop-page .product-modal .modal-actions {
        max-width: 100%;
    }
}

/* Tablet en paysage ou laptop bas : la card reste dans la fenêtre, image et
   actions comprises. */
@media (min-width: 761px) and (max-height: 700px) {
    body.eshop-page .product-modal .modal-content {
        height: calc(100dvh - 28px);
        max-height: calc(100dvh - 28px);
    }

    body.eshop-page .product-modal .modal-info {
        padding: 28px 30px;
    }
}

/* Mobile : la popup devient une seule colonne avec défilement intérieur.
   Chaque orientation reçoit une hauteur d'image adaptée ; le visuel complet
   reste visible avant le texte, sans rognage ni espace noir. */
@media (max-width: 760px) {
    body.eshop-page .product-modal .modal-content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.eshop-page .product-modal .modal-image {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-height: 0 !important;
        max-height: none !important;
    }

    /* Les images horizontales conservent leur proportion naturelle et ne
       prennent pas inutilement la hauteur d'un portrait. */
    body.eshop-page .product-modal .modal-content.modal-media-landscape .modal-image {
        height: auto !important;
        min-height: min(190px, 34dvh) !important;
        max-height: 44dvh !important;
        aspect-ratio: var(--modal-media-aspect, 16 / 9);
    }

    body.eshop-page .product-modal .modal-content.modal-media-square .modal-image,
    body.eshop-page .product-modal .modal-content.modal-media-loading .modal-image {
        height: clamp(255px, 43dvh, 410px) !important;
    }

    body.eshop-page .product-modal .modal-content.modal-media-portrait .modal-image {
        height: clamp(285px, 52dvh, 540px) !important;
    }

    body.eshop-page .product-modal .modal-info {
        grid-column: 1;
        grid-row: 2;
        height: auto;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 480px) {
    body.eshop-page .product-modal .modal-content.modal-media-landscape .modal-image {
        min-height: min(170px, 31dvh) !important;
        max-height: 40dvh !important;
    }

    body.eshop-page .product-modal .modal-content.modal-media-portrait .modal-image {
        height: clamp(255px, 49dvh, 470px) !important;
    }
}

/* =====================================================================
   PATCH E-SHOP v5 — IMAGE POPUP : AFFICHAGE COMPLET GARANTI
   ---------------------------------------------------------------------
   Correctif ciblé pour les visuels très verticaux, horizontaux ou carrés.
   L'image occupe la zone média sans jamais être découpée : object-fit: contain
   garde le ratio original. Le fond flouté existant remplit uniquement les
   espaces libres de la carte, sans créer de bordure noire.
   ===================================================================== */

body.eshop-page .product-modal .modal-image {
    display: grid !important;
    place-items: center !important;
}

/* IMPORTANT : width + height à 100 % avec object-fit: contain est plus fiable
   que les dimensions auto lorsque des règles communes du site sont chargées.
   Le navigateur réduit l'image juste ce qu'il faut pour que ses quatre bords
   restent visibles, quelle que soit son orientation. */
body.eshop-page .product-modal .modal-image > img,
body.eshop-page .product-modal .modal-image > img:hover {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    transition: none !important;
}

/* Les très grands écrans conservent la même logique : le panneau image peut
   grandir, mais le visuel ne passe jamais en mode cover / zoom. */
@media (min-width: 1200px) {
    body.eshop-page .product-modal .modal-content.modal-media-portrait .modal-image > img,
    body.eshop-page .product-modal .modal-content.modal-media-landscape .modal-image > img,
    body.eshop-page .product-modal .modal-content.modal-media-square .modal-image > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

/* Mobile et tablette : la zone média reste bornée par la fenêtre, l'image
   est entièrement visible, puis le reste de la popup se lit au défilement. */
@media (max-width: 760px) {
    body.eshop-page .product-modal .modal-image > img,
    body.eshop-page .product-modal .modal-image > img:hover {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}