/* ============================================
   MODERN OVERRIDES
   Clean, contemporary e-commerce design
   ============================================ */

/* ── Product Cards — Full Rework ──────────── */

.th-product {
    text-align: left;
    margin-bottom: 30px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    position: relative;
}

.th-product:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
    border-color: transparent;
}

.th-product .product-img {
    background: linear-gradient(160deg, #fafafa 0%, #f0ece4 100%);
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.th-product .product-img img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
}

.th-product:hover .product-img img {
    transform: scale(1.06);
}

.th-product .product-img::after {
    display: none;
}

/* Floating action buttons — pill at bottom */
.th-product .product-actions {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(60px);
    display: flex;
    gap: 6px;
    z-index: 3;
    opacity: 0;
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.th-product:focus-within .product-actions,
.th-product:hover .product-actions {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.product-action-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    color: var(--title-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: 15px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.product-action-btn:hover {
    background: var(--theme-color);
    color: var(--white);
    transform: none;
}

/* Product text */
.th-product .product-title {
    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    padding: 14px 16px 4px;
    line-height: 1.4;
    color: var(--title-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.th-product .product-title a {
    color: inherit;
}

.th-product .product-title a:hover {
    color: var(--theme-color);
}

.th-product .price {
    display: block;
    color: var(--theme-color);
    font-weight: 800;
    font-size: 18px;
    padding: 2px 16px 16px;
    font-family: var(--body-font);
}

/* ── Menu Cards — Full Rework ─────────────── */

.menu-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    height: 100%;
    position: relative;
}

.menu-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
    border-color: transparent;
}

.menu-card-img {
    height: 200px;
    overflow: hidden;
    background: linear-gradient(160deg, #fafafa 0%, #f0ece4 100%);
    position: relative;
}

.menu-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
}

.menu-card:hover .menu-card-img img {
    transform: scale(1.06);
}


/* Price badge — subtle dark pill */
.menu-price {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--white);
    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 8px;
    z-index: 2;
    letter-spacing: 0.2px;
    transition: all 0.3s ease;
}

.menu-card:hover .menu-price {
    background: rgba(0, 0, 0, 0.85);
}

.menu-card-body {
    padding: 16px 18px 20px;
}

.menu-card-body h4 {
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.35;
    color: var(--title-color);
}

.menu-card-body p {
    font-size: 13px;
    color: var(--body-color);
    margin-bottom: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Menu WP-Style Layout ─────────────────── */

.menu-wp-layout {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 32px;
    align-items: start;
}

.menu-side-img {
    border-radius: 16px;
    overflow: hidden;
    position: sticky;
    top: 120px;
}

.menu-side-img img {
    width: 100%;
    height: auto;
    display: block;
}

.menu-list-center {
    padding: 0 8px;
}

.menu-list-item {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    align-items: flex-start;
}

.menu-list-item:last-child {
    border-bottom: none;
}

.menu-list-thumb {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--smoke);
}

.menu-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-list-info {
    flex: 1;
    min-width: 0;
}

.menu-list-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.menu-list-header h4 {
    font-family: var(--body-font);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    color: var(--title-color);
}

.menu-list-dots {
    flex: 1;
    border-bottom: 2px dotted var(--border-color);
    min-width: 20px;
    margin-bottom: 6px;
}

.menu-list-price {
    font-family: var(--body-font);
    font-size: 20px;
    font-weight: 800;
    color: var(--title-color);
    white-space: nowrap;
}

.menu-list-info p {
    font-size: 13px;
    color: var(--body-color);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1199px) {
    .menu-wp-layout {
        grid-template-columns: 1fr 3fr 1fr;
    }
}

@media (max-width: 991px) {
    .menu-wp-layout {
        grid-template-columns: 1fr;
    }
    .menu-side-img {
        display: none;
    }
    .menu-list-center {
        padding: 0;
    }
}

/* ── Blog Cards — Rework ──────────────────── */

.blog-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    height: 100%;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
    border-color: transparent;
}

.blog-card-img {
    height: 200px;
    overflow: hidden;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
}

.blog-card:hover .blog-card-img img {
    transform: scale(1.05);
}

.blog-card-body {
    padding: 20px;
}

.blog-date {
    font-size: 12px;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.blog-card-body :is(h2, h3, h4) {
    font-family: var(--body-font);
    font-size: 17px;
    font-weight: 700;
    margin: 10px 0 0;
    line-height: 1.4;
}

.blog-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.blog-card-link .blog-card-body :is(h2, h3, h4) {
    color: var(--title-color);
    transition: color 0.2s ease;
}

.blog-card-link:hover .blog-card-body :is(h2, h3, h4) {
    color: var(--theme-color);
}

.blog-card-body :is(h2, h3, h4) a { color: var(--title-color); }
.blog-card-body :is(h2, h3, h4) a:hover { color: var(--theme-color); }

.blog-read-more {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 20px;
    border: 1.5px solid var(--title-color);
    color: var(--title-color);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
}

.blog-read-more:hover {
    background: var(--title-color);
    color: var(--white);
}

.blog-category {
    display: inline-block;
    font-size: 11px;
    color: var(--body-color);
    font-weight: 600;
    margin-left: 12px;
    text-transform: lowercase;
    letter-spacing: 0;
    background: none;
    padding: 0;
}

.blog-date {
    font-size: 12px;
    color: var(--light);
    text-transform: lowercase;
}

.blog-sep {
    color: var(--border-color);
    margin: 0 6px;
    font-size: 12px;
}

/* ── Event Cards — Rework ─────────────────── */

.event-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    height: 100%;
}

.bg-dark-section .event-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
    box-shadow: none;
}

.event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

.bg-dark-section .event-card:hover {
    background: rgba(255,255,255,0.06);
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.event-card-img {
    height: 200px;
    overflow: hidden;
}

.event-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
}

.event-card:hover .event-card-img img {
    transform: scale(1.05);
}

.event-card-body {
    padding: 22px;
}

.event-card-body :is(h2, h4) {
    font-family: var(--body-font);
    font-size: 18px;
    font-weight: 700;
}

/* ── Filter Buttons — Pill ────────────────── */

.menu-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 40px;
}

.filter-btn {
    padding: 9px 22px;
    border: 1.5px solid rgba(0,0,0,0.1);
    background: transparent;
    font-weight: 600;
    font-size: 13px;
    color: var(--body-color);
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: none;
    font-family: var(--body-font);
    border-radius: 50px;
    letter-spacing: 0;
}

.filter-btn:hover {
    border-color: var(--theme-color);
    color: var(--theme-color);
    background: rgba(250, 133, 7, 0.06);
}

.filter-btn.active {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(250, 133, 7, 0.25);
}

/* ── Sidebar — Cleaner ────────────────────── */

.shop-sidebar {
    position: sticky;
    top: 120px;
}

.sidebar-widget {
    margin-bottom: 32px;
    background: var(--white);
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 24px;
}

.sidebar-widget :is(h2, h4) {
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    position: relative;
    color: var(--title-color);
}

.sidebar-widget :is(h2, h4)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--theme-color);
    border-radius: 1px;
}

.sidebar-widget :is(h2, h4)::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 36px;
    width: 6px;
    height: 2px;
    background: var(--theme-color);
    border-radius: 1px;
}

.search-form {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid rgba(0,0,0,0.08);
    transition: border-color 0.2s ease;
}

.search-form:focus-within {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(250, 133, 7, 0.25);
}

.search-form input {
    flex: 1;
    padding: 11px 14px;
    border: none;
    font-size: 14px;
    outline: none;
    font-family: var(--body-font);
    background: transparent;
}

.search-form button {
    padding: 11px 16px;
    background: var(--theme-color);
    color: var(--white);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 14px;
}

.search-form button:hover {
    background: var(--theme-color2);
}

/* ── Suggestions prédictives de la recherche (autocomplete à la Google) ──
   Le menu est positionné sous le champ via le wrapper relatif; il flotte
   au-dessus de la liste de catégories (z-index) et se referme au clic
   extérieur / Échap (géré en JS dans shop.html). */
.search-suggest-wrap {
    position: relative;
}

.search-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--white, #fff);
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.14);
    overflow: hidden;
    z-index: 60;
}

.search-suggest a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--body-color);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
}

.search-suggest a:last-child {
    border-bottom: none;
}

.search-suggest a i {
    font-size: 12px;
    color: var(--theme-color);
    opacity: 0.65;
    flex-shrink: 0;
}

.search-suggest a strong {
    font-weight: 700;
    color: var(--title-color);
}

.search-suggest a.active,
.search-suggest a:hover {
    background: rgba(0,0,0,0.05);
    color: var(--title-color);
}

.search-suggest a.suggest-all {
    font-weight: 600;
    color: var(--theme-color);
}

.category-list li a {
    display: flex;
    align-items: center;
    padding: 10px 0;
    color: var(--body-color);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}

.category-list li:last-child a {
    border-bottom: none;
}

.category-list li a::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 8px;
    margin-right: 10px;
    color: var(--gray);
    transition: all 0.2s ease;
}

.category-list li a:hover,
.category-list li a.active {
    color: var(--theme-color);
    padding-left: 4px;
}

.category-list li a:hover::before,
.category-list li a.active::before {
    color: var(--theme-color);
}

/* ── Buttons — Modern ─────────────────────── */

.th-btn {
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    padding: 13px 28px;
    min-width: auto;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    background: var(--title-color);
    border: 2px solid var(--title-color);
}

.th-btn:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    color: var(--title-color); /* contraste AA sur fond orange (audit a11y) */
}

.th-btn::before {
    display: none;
}

.th-btn.style2 {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
    border-radius: 50px;
}

.th-btn.style2:hover {
    background: var(--white);
    color: var(--title-color);
}

.th-btn.style-border {
    background: transparent;
    border: 2px solid var(--title-color);
    color: var(--title-color);
    border-radius: 50px;
}

.th-btn.style-border:hover {
    background: var(--title-color);
    color: var(--white);
}

/* ── Info Bar — Matching WP ───────────────── */

.info-bar {
    background: var(--white);
    padding: 48px 0;
}

.info-bar-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.info-bar-col {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    padding: 0 32px;
    border-right: 1px solid var(--border-color);
}

.info-bar-col:last-child {
    border-right: none;
}

.info-icon-circle {
    width: 56px;
    height: 56px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    color: var(--title-color);
    transition: all 0.3s ease;
}

.info-bar-col:hover .info-icon-circle {
    border-color: var(--theme-color);
    color: var(--theme-color);
}

.info-bar-col :is(h2, h5) {
    font-family: var(--body-font);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--title-color);
}

.info-bar-col p {
    margin: 0;
    color: var(--body-color);
    font-size: 14px;
}

.info-bar-col p a {
    color: var(--body-color);
}

.info-bar-col p a:hover {
    color: var(--theme-color);
}

/* Notice banner — full width, big centered text */
.notice-banner {
    background: var(--white);
    padding: 36px 0;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.notice-banner p {
    margin: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    font-family: var(--title-font);
    color: var(--title-color);
    line-height: 1.5;
}

@media (max-width: 991px) {
    .info-bar-grid {
        flex-direction: column;
        gap: 24px;
    }
    .info-bar-col {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 0 0 24px;
    }
    .info-bar-col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .notice-banner p {
        font-size: 18px;
    }
}

/* ── Section Titles — Cleaner ─────────────── */

.section-title h2 {
    font-family: var(--body-font);
    font-weight: 800;
    font-size: 32px;
    letter-spacing: -0.5px;
}

.sub-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: var(--body-font);
    color: var(--theme-color);
}

.title-line {
    width: 40px;
    height: 3px;
    background: var(--theme-color);
    border-radius: 2px;
    margin: 12px auto 0;
}

.title-line::after,
.title-line::before {
    display: none;
}

/* Tighter section spacing */
.section-space {
    padding: 60px 0;
}

.section-desc {
    font-size: 16px;
    color: var(--body-color);
    max-width: 550px;
    margin: 12px auto 0;
    line-height: 1.7;
}

.section-title {
    margin-bottom: 32px;
}

/* ── Hero — Cleaner ───────────────────────── */

.hero-title {
    font-family: var(--body-font);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.hero-tagline {
    font-family: 'Great Vibes', cursive;
    font-weight: 400;
}

/* ── Empty States ─────────────────────────── */

.empty-state {
    padding: 60px 20px;
    text-align: center;
}

.empty-state i {
    display: block;
    font-size: 48px;
    color: var(--border-color);
    margin-bottom: 16px;
}

.empty-state :is(h2, h4) {
    font-family: var(--body-font);
    font-weight: 700;
    font-size: 24px; /* niveau relevé h4→h2 (a11y) : garder la taille modeste */
}

/* ── Shop Toolbar ─────────────────────────── */

.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-bottom: 20px;
}

.results-count {
    font-size: 13px;
    color: var(--light);
    font-weight: 500;
}

.shop-sort select {
    padding: 8px 34px 8px 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background-color: var(--white);
    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--title-color);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.shop-sort select:focus {
    border-color: var(--theme-color);
}

/* ── Page Header — Subtle ─────────────────── */

.page-header {
    padding: 160px 0 50px;
}

.page-header h1 {
    font-family: var(--body-font);
    font-weight: 800;
    font-size: 36px;
}

.breadcrumb-nav {
    font-size: 14px;
    font-weight: 500;
}

/* ── Contact — Modern ─────────────────────── */

.contact-info-box {
    border-radius: 20px;
}

.contact-info-item .icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

.contact-form-box {
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: none;
}

.contact-form .form-control {
    border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.08);
    padding: 13px 16px;
    font-size: 14px;
}

.contact-form .form-control:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(250, 133, 7, 0.08);
}

/* ── Footer — Modern ──────────────────────── */

.footer-widget :is(h2, h4) {
    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-logo-img {
    max-height: 70px;
    margin-bottom: 24px;
}

.footer-bottom {
    font-size: 13px;
}

/* ── Hero Slider ──────────────────────────── */

.hero-slider {
    position: relative;
}

.hero-slide {
    display: none;
}

.hero-slide.active {
    display: flex;
}

.hero-slider-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 10;
    pointer-events: none;
}

.hero-nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    color: var(--white);
    border: none;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-nav-btn:hover {
    background: rgba(255,255,255,0.3);
}

.hero-slider-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    /* Les points sont désormais de vrais <button> (a11y clavier) : neutraliser
       les styles natifs, et garder un focus visible. */
    border: none;
    padding: 0;
}
.hero-dot:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

.hero-dot.active {
    background: var(--white);
    width: 28px;
    border-radius: 5px;
}

/* ── Promo Banner ─────────────────────────── */

.promo-banner {
    position: relative;
    z-index: 1001;
}

/* ── Promo Popup ──────────────────────────── */

.promo-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.promo-popup {
    position: relative;
    max-width: 500px;
    width: 100%;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    animation: slideUp 0.4s cubic-bezier(.4,0,.2,1);
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.promo-popup h3 {
    font-family: var(--body-font);
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
    color: inherit;
}

.promo-popup p {
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 0;
}

.promo-popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.promo-popup-close:hover {
    opacity: 1;
}

/* ── Global Smoothing ─────────────────────── */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--theme-color);
    color: var(--white);
}

/* ══════════════════════════════════════════════════════════════════════
   Accessibilité (WCAG 2.1 AA) — audit Lighthouse (Trello 170).
   Le orange de marque (#FA8507) n'a que 2,49:1 sur blanc. Il reste vif pour
   les FONDS / bordures / icônes / dégradés (décoratif, ou texte blanc dessus
   que axe marque « incomplete »), mais tout TEXTE orange sur fond CLAIR passe
   à --theme-ink (assombri, ≥4,5:1). Les cas orange-sur-fond-sombre (héros,
   fil d'Ariane, sections .light) gardent le orange vif.
   ══════════════════════════════════════════════════════════════════════ */

/* Texte orange sur fond clair → encre accessible */
.sub-title,
.read-more,
.event-date,
.th-product .price,
.product-detail-price,
.category-list li a:hover,
.category-list li a.active,
.filter-btn:hover { color: var(--theme-ink); }

/* Garder le orange vif là où le texte orange est sur fond sombre */
.section-title.light .sub-title,
.bg-dark-section .event-date { color: var(--theme-color); }

/* Liens de catégories : le gris clair par défaut (#bdbdbd ≈ 1,7:1) échouait ;
   les vieux prix barrés étaient dans le même gris. */
.category-list li a { color: var(--body-color); }
.th-product .price del { color: var(--light); }

/* Pastille de filtre active : texte blanc sur orange plein (2,49:1) → aplat
   accessible (blanc dessus = 4,6:1). Voir le bloc « contenu blanc sur aplat de
   marque » plus bas, qui applique --theme-solid à toute la famille (--theme-ink
   dépend du fond de page et s'éclaircirait sur un thème sombre).
   (.blog-category est du texte simple dans le design « modern », pas une
   pastille — ne pas lui donner de fond.) */

/* Fil d'Ariane : le lien orange n'était pas distinguable du texte gris voisin
   (link-in-text-block). Le soulignement est un repère non chromatique. */
.breadcrumb-nav a { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   Accessibilité (WCAG 2.1 AA) — passe manuelle (clavier + non-text contrast).
   ══════════════════════════════════════════════════════════════════════ */

/* 2.4.7 Focus Visible — le tri /produits/ retirait l'outline ; la recherche
   avait outline:none sur l'input. On rend le focus clavier nettement visible.
   (:focus-visible = clavier uniquement, pas au clic souris.) */
.shop-sort select:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
}

/* 1.4.11 Non-text Contrast — la bordure des champs (rgba(0,0,0,0.08) ≈ 1,16:1,
   et le #ced4da par défaut de Bootstrap ≈ 1,5:1) était sous le seuil 3:1 exigé
   pour la limite d'un contrôle. rgba(0,0,0,0.45) ≈ 3,2:1 sur blanc. */
.form-control,
.form-select,
.contact-form .form-control,
.search-form {
    border-color: rgba(0, 0, 0, 0.45);
}

/* ══════════════════════════════════════════════════════════════════════
   1.4.3 + 1.4.11 — CONTENU BLANC SUR APLAT DE MARQUE (Trello 171).
   Mesuré au navigateur : blanc sur #FA8507 = 2,49:1 partout ci-dessous —
   sous le 3:1 des icônes ET le 4,5:1 du texte. Le gros bouton (.th-btn) avait
   déjà été réglé autrement à l'audit 170 (texte foncé sur orange = 6,6:1),
   mais les pastilles, la pagination, la loupe et TOUS les boutons ronds au
   survol étaient restés en blanc-sur-orange.
   Remède : l'aplat passe à --theme-solid (orange assombri jusqu'à 4,5:1 sous
   du blanc, recalculé par tenant dans theme_utils) — le blanc reste blanc.
   Le orange VIF garde tout le reste : bordures, tints, dégradés, icônes sur
   fond clair, texte orange (--theme-ink), .th-btn:hover.
   ══════════════════════════════════════════════════════════════════════ */
.icon-btn:hover,
.qty-btn:hover,
.product-action-btn:hover,
.footer-social a:hover,
.search-form button,
.product-tag,
.filter-btn.active,
.shop-pagination .page-item.active .page-link,
.shop-pagination .page-link:hover {
    background: var(--theme-solid);
}

/* Les mêmes règles peignaient aussi leur bordure en orange vif : un liseré
   2,49:1 autour d'un aplat foncé se voyait comme un halo clair. */
.footer-social a:hover,
.filter-btn.active {
    border-color: var(--theme-solid);
}

/* Sélection de texte : le texte blanc surligné en orange vif était le pire cas
   (2,49:1) et touche TOUTES les pages. */
::selection {
    background: var(--theme-solid);
    color: var(--white);
}

/* ── Sections CMS (équipe, témoignages, chiffres clés) ──────────
   Includes réutilisables de templates/website/includes/ (InnoBook Website #5),
   affichés sur les pages personnalisées via les jetons [equipe], [temoignages],
   [chiffres], [faq] (CMS_SECTION_TOKENS, views/core.py). */

.page-cms-section {
    max-width: 960px;
    margin: 56px auto 0;
}

.page-cms-title {
    font-family: var(--body-font);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
}

/* Chiffres clés */
.key-stat {
    padding: 18px 10px;
}

.key-stat-value {
    font-family: var(--title-font);
    font-size: 34px;
    font-weight: 700;
    color: var(--theme-solid);
    line-height: 1.2;
}

.key-stat-label {
    font-size: 14px;
    color: var(--body-color);
    margin-top: 4px;
}

/* Équipe */
.team-card {
    background: var(--white);
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    padding: 26px 20px;
    height: 100%;
}

.team-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 16px;
    display: block;
}

.team-photo-placeholder {
    background: var(--theme-solid);
    color: var(--white);
    font-family: var(--title-font);
    font-size: 56px;
    line-height: 140px;
    text-align: center;
    text-transform: uppercase;
}

.team-name {
    font-family: var(--body-font);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
}

.team-role {
    font-size: 14px;
    color: var(--theme-solid);
    font-weight: 600;
    margin-bottom: 10px;
}

.team-bio {
    font-size: 14px;
    line-height: 1.7;
    color: var(--body-color);
    margin-bottom: 0;
}

/* Témoignages */
.testimonial-card {
    background: var(--white);
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    padding: 26px 24px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.testimonial-text {
    font-size: 15px;
    line-height: 1.8;
    color: var(--body-color);
    margin-bottom: 16px;
    flex-grow: 1;
}

.testimonial-text::before {
    content: "\201C";
    display: block;
    font-family: var(--title-font);
    font-size: 42px;
    line-height: 1;
    color: var(--theme-solid);
}

.testimonial-author {
    font-size: 14px;
}

.testimonial-author strong {
    color: var(--title-color);
}

.testimonial-context {
    color: var(--light);
}


/* ══════════════════════════════════════════════════════════════════════════
   SITE ÉPICERIE (danhpham.net) — maquette « Marché éditorial »

   Dans la maquette, l'en-tête et le héro ne font qu'UN : une seule nappe verte
   qui descend du haut de la fenêtre jusque sous les tuiles de catégories. Le
   site rendait l'en-tête commun (barre sombre + barre blanche) POSÉ SUR un héro
   vert, ce qui cassait justement l'effet — c'est le premier écart que le client
   a vu.

   Tout est accroché à `body.site-epicerie` (posée par base.html selon
   site_type) : le resto ne porte pas la classe, son en-tête est intact. Les
   couleurs viennent du thème du site (ThemeSettings), aucune n'est en dur.
   ══════════════════════════════════════════════════════════════════════════ */

.site-epicerie .th-header {
    background: var(--theme-color);
}

/* Barre du haut : même vert, séparée par un simple filet clair au lieu du
   contraste noir/blanc du resto. */
.site-epicerie .header-top {
    background: transparent;
    /* 78 % de blanc sur le vert = ~4,4:1, juste SOUS le 4,5:1 de WCAG 1.4.3. */
    color: rgba(255,255,255,0.92);
    border-bottom: 1px solid rgba(255,255,255,0.14);
}
.site-epicerie .header-top a,
.site-epicerie .header-top .btn-lang {
    color: rgba(255,255,255,0.95);
}
.site-epicerie .header-top a:hover,
.site-epicerie .header-top .btn-lang:hover {
    color: #fff;
}

/* Barre principale : transparente pour laisser passer le vert. `.sticky-wrapper`
   la repeint en blanc au défilement — on la garde verte pour que la nappe reste
   continue même une fois collée en haut. */
.site-epicerie .sticky-wrapper,
.site-epicerie .sticky-wrapper.sticky {
    background: var(--theme-color);
}
.site-epicerie .main-menu > li > a,
.site-epicerie .logo .logo-text {
    color: #fff;
}
.site-epicerie .main-menu > li > a:hover {
    color: var(--ep-tile-bg, #F3E9D6);
}

/* Boutons ronds (souhaits, compte, panier) : pastille claire sur le vert,
   miroir du panier de la maquette. */
.site-epicerie .header-buttons .icon-btn {
    background: rgba(255,255,255,0.14);
    color: #fff;
}
.site-epicerie .header-buttons .icon-btn:hover {
    background: #fff;
    color: var(--theme-color);
}
.site-epicerie .header-buttons .icon-btn .badge {
    background: var(--theme-color2);
    /* Blanc sur l'or : 2,1:1 — sous le 4,5:1 de WCAG 1.4.3. L'encre passe (~7,9:1). */
    color: var(--title-color);
}

/* Le bouton « Notre restaurant » du lien croisé : contour blanc sur le vert. */
.site-epicerie .header-buttons .th-btn {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.45);
    color: #fff;
}
.site-epicerie .header-buttons .th-btn:hover {
    background: #fff;
    color: var(--theme-color);
}

/* Les sous-menus retombent sur fond clair : ils sortent de la nappe verte. */
.site-epicerie .sub-menu {
    background: #fff;
}
.site-epicerie .sub-menu a {
    color: var(--title-color);
}

/* Pied de page : le resto le rend en noir bleuté (--black2). La maquette épicerie
   le veut dans l'encre chaude de sa palette, pour rester dans la même famille
   que le bandeau d'appel juste au-dessus. */
.site-epicerie .site-footer {
    background-color: var(--title-color);
}

/* Bandeau d'avis (config.notice_text) : plein cadre blanc, il tranchait net
   entre le vert du héro et le papier crème du catalogue et coupait la page en
   deux. Il passe sur le papier, en mention lisible mais discrète — la maquette
   n'a pas ce bloc, on le garde (c'est une mention utile) sans lui donner le
   poids d'un titre. */
.site-epicerie .notice-banner {
    background: var(--body-bg);
    border-top: none;
    padding: 22px 0;
}
.site-epicerie .notice-banner p {
    font-family: var(--body-font);
    font-size: 15px;
    color: var(--body-color);
    max-width: 760px;
    margin: 0 auto;
}

/* Bandeau de titre des pages intérieures (fiche produit, catalogue, contact,
   compte…). Chaque gabarit pose EN LIGNE `background-color: var(--theme-color2)`
   + un voile noir à 60 % (.page-header::before) : au resto la couleur 2 est un
   quasi-noir → bandeau anthracite; sur l'épicerie c'est l'OR #E0A82E → sous le
   voile, un brun boueux qui jure avec la nappe verte, et le fil d'Ariane vert
   dessus était illisible. Le bandeau reprend le vert de marque, à plat comme le
   héro de l'accueil — d'où le !important, seul moyen de passer devant un style
   en ligne présent dans une vingtaine de gabarits. */
.site-epicerie .page-header {
    background-color: var(--theme-color) !important;
}
.site-epicerie .page-header::before {
    background: none;
}
/* Fil d'Ariane sur le vert : crème lisible (≥4,5:1), page courante comprise. */
.site-epicerie .breadcrumb-nav {
    color: rgba(255,255,255,0.92);
}
.site-epicerie .breadcrumb-nav a {
    color: rgba(255,255,255,0.95);
}
.site-epicerie .breadcrumb-nav a:hover {
    color: #fff;
}

/* ── Composants partagés épicerie (accueil + fiche produit) ─────────────────
   Jetons et cartes déplacés du bloc inline de home.html le jour où la fiche
   produit a repris le même langage visuel : un seul endroit à maintenir. Tout
   est accroché à body.site-epicerie — le resto n'y touche jamais. */
.site-epicerie {
    --ep-cream: #F3E9D6;   /* aplat clair des tuiles et zones d'image */
    --ep-line: #E4D8C2;    /* filet des cartes */
    --ep-soft: #A39A89;    /* texte secondaire sur fond clair */
}
.site-epicerie .ep .container { max-width: 1180px; padding-left: 40px; padding-right: 40px; }
@media (max-width: 600px) { .site-epicerie .ep .container { padding-left: 18px; padding-right: 18px; } }
.site-epicerie .ep h1 { font-weight: 800; }
.site-epicerie .ep h2, .site-epicerie .ep h3 { font-weight: 700; }
.site-epicerie .ep-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }

.site-epicerie .ep-card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.site-epicerie .ep-card {
    background: #fff; border: 1px solid var(--ep-line); border-radius: 20px; overflow: hidden;
    height: 100%; display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s;
}
.site-epicerie .ep-card:hover { box-shadow: 0 18px 38px rgba(120,75,20,.12); transform: translateY(-4px); }
.site-epicerie .ep-card-img {
    position: relative; background: var(--ep-cream); height: 200px; padding: 16px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.site-epicerie .ep-card-img img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; border-radius: 8px; display: block;
}
.site-epicerie .ep-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.site-epicerie .ep-card-cat { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--theme-solid, var(--theme-color)); }
.site-epicerie .ep-card-name { font-size: 20px; font-weight: 700; color: var(--title-color); margin: 4px 0 0; line-height: 1.2; letter-spacing: -.01em; }
.site-epicerie .ep-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; }
.site-epicerie .ep-card-foot .price { font-family: var(--title-font); font-size: 22px; font-weight: 800; color: var(--title-color); }
.site-epicerie .ep-card-foot del { font-size: 13px; font-weight: 600; color: var(--ep-soft); }
.site-epicerie .ep-card-foot .tax-note { display: block; font-size: 11px; color: var(--ep-soft); }
.site-epicerie .ep-add {
    display: inline-flex; align-items: center; gap: 7px; background: var(--theme-solid, var(--theme-color));
    color: #fff; border: none; border-radius: 12px; padding: 11px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.site-epicerie .ep-badge { position: absolute; top: 24px; right: 24px; z-index: 2; color: #fff; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--theme-solid, var(--theme-color)); }
.site-epicerie .ep-badge-out { left: 24px; right: auto; background: #dc2626; }
.site-epicerie .ep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.site-epicerie .ep-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) { .site-epicerie .ep-grid, .site-epicerie .ep-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .site-epicerie .ep-grid, .site-epicerie .ep-grid-4 { grid-template-columns: 1fr; } }

/* ── Fiche produit épicerie (maquette « Marché éditorial - Fiche produit ») ── */
.site-epicerie .ep-pd-band { padding: 160px 0 26px; text-align: left; }
@media (max-width: 991px) { .site-epicerie .ep-pd-band { padding-top: 132px; } }
.ep-pd-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: start; padding-top: 34px; }
@media (max-width: 900px) { .ep-pd-grid { grid-template-columns: 1fr; gap: 30px; } }
.ep-pd-shot {
    position: relative; background: var(--ep-cream); border: 1px solid var(--ep-line);
    border-radius: 24px; height: 452px; padding: 22px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ep-pd-shot img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; cursor: zoom-in; }
@media (max-width: 600px) { .ep-pd-shot { height: 320px; } }
.ep-pd-badges { position: absolute; top: 20px; right: 22px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; z-index: 2; }
.ep-pd-badges .ep-badge { position: static; font-size: 11px; padding: 6px 12px; }
/* Pastille rabais : or du thème avec l'ENCRE (le blanc sur l'or = 2,1:1, WCAG 1.4.3). */
.ep-pd-badges .ep-badge-sale { background: var(--theme-color2); color: var(--title-color); font-weight: 800; }
.ep-pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.ep-pd-thumbs .thumb {
    height: 84px; border-radius: 14px; border: 1px solid var(--ep-line); background: var(--ep-cream);
    display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px; cursor: pointer;
}
.ep-pd-thumbs .thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; }
.ep-pd-thumbs .thumb.active { border: 2px solid var(--theme-solid, var(--theme-color)); }

.ep-pd-info { padding-top: 6px; }
.ep-pd-info .ep-eyebrow, .ep-pd-info .ep-eyebrow a { color: var(--theme-solid, var(--theme-color)); letter-spacing: .18em; }
.ep-pd-info h1 { font-size: clamp(30px, 4.5vw, 44px); line-height: 1.06; letter-spacing: -.03em; color: var(--title-color); margin: 10px 0 0; }
.ep-pd-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; font-weight: 700; }
.ep-pd-meta .ep-pd-stars { color: var(--theme-color2); }
.ep-pd-meta .ep-pd-stars b { color: var(--title-color); margin-left: 4px; }
.ep-pd-meta a { color: var(--ep-soft); font-weight: 600; }
.ep-pd-stock { color: var(--theme-solid, var(--theme-color)); }
.ep-pd-stock-out { color: #dc2626; }
.ep-pd-desc { font-size: 15.5px; line-height: 1.7; color: var(--body-color); margin-top: 18px; max-width: 490px; }
.ep-pd-sep { height: 1px; background: var(--ep-line); margin: 24px 0; }
.ep-pd-price .price { font-family: var(--title-font); font-size: 38px; font-weight: 800; color: var(--title-color); letter-spacing: -.02em; }
.ep-pd-price del { font-size: 16px; font-weight: 600; color: var(--ep-soft); }
.ep-pd-price .tax-note { display: block; font-size: 12px; color: var(--ep-soft); margin-top: 2px; }
.ep-pd-buy { display: flex; align-items: stretch; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.site-epicerie .ep-pd-buy .quantity-input { background: #fff; border: 1px solid var(--ep-line); border-radius: 13px; padding: 5px; display: inline-flex; align-items: center; }
.site-epicerie .ep-pd-buy .qty-btn { width: 36px; height: 36px; border: none; background: transparent; color: var(--title-color); border-radius: 9px; cursor: pointer; }
.site-epicerie .ep-pd-buy #productQty { width: 44px; border: none; background: transparent; text-align: center; font-family: var(--title-font); font-weight: 800; font-size: 16px; }
.site-epicerie .ep-pd-buy .add-to-cart-detail {
    flex: 1; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--theme-solid, var(--theme-color)); color: #fff; border: none; border-radius: 14px;
    padding: 16px 24px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 26px rgba(0,0,0,.14);
}
.ep-pd-promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
@media (max-width: 600px) { .ep-pd-promises { grid-template-columns: 1fr 1fr; } }
.ep-pd-promise { background: #fff; border: 1px solid var(--ep-line); border-radius: 14px; padding: 14px 14px 15px; }
.ep-pd-promise i { color: var(--theme-solid, var(--theme-color)); font-size: 14px; }
.ep-pd-promise b { display: block; font-family: var(--title-font); font-size: 12.5px; color: var(--title-color); margin-top: 8px; line-height: 1.25; }
.ep-pd-promise span { display: block; font-size: 11.5px; line-height: 1.45; color: var(--ep-soft); margin-top: 3px; }

.ep-pd-details { margin-top: 56px; background: #fff; border: 1px solid var(--ep-line); border-radius: 24px; overflow: hidden; }
.ep-pd-tabs { display: flex; border-bottom: 1px solid var(--ep-line); overflow: auto; }
.ep-pd-tab {
    padding: 16px 24px; background: transparent; border: none; border-bottom: 3px solid transparent;
    font-size: 14px; font-weight: 700; color: var(--ep-soft); cursor: pointer; white-space: nowrap;
}
.ep-pd-tab.is-active { color: var(--title-color); border-bottom-color: var(--theme-solid, var(--theme-color)); }
.ep-pd-panels { padding: 30px 34px 34px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .ep-pd-panels { grid-template-columns: 1fr; padding: 24px; } }
.ep-pd-panel p { font-size: 15px; line-height: 1.75; color: var(--body-color); margin: 0 0 12px; max-width: 640px; }
.ep-pd-panel p:last-child { margin-bottom: 0; }
.ep-pd-spec { background: var(--body-bg); border: 1px solid var(--ep-line); border-radius: 18px; padding: 20px 22px 22px; }
.ep-pd-spec-title { font-size: 10px; font-weight: 700; letter-spacing: .2em; color: var(--ep-soft); text-transform: uppercase; }
.ep-pd-spec-row { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--ep-line); font-size: 13px; }
.ep-pd-spec-row:last-child { border-bottom: none; }
.ep-pd-spec-row span:first-child { color: var(--ep-soft); font-weight: 600; }
.ep-pd-spec-row span:last-child { color: var(--title-color); font-weight: 700; text-align: right; }

.ep-pd-related { margin-top: 56px; }
.ep-pd-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ep-pd-related-head h2 { font-size: clamp(24px, 4vw, 30px); color: var(--title-color); margin: 8px 0 0; letter-spacing: -.02em; }
.ep-pd-related-head a { font-weight: 700; font-size: 13.5px; color: var(--theme-solid, var(--theme-color)); }

/* Fiche technique seule (produit sans ingredients/instructions) : une colonne. */
.ep-pd-panels-solo { grid-template-columns: 1fr; max-width: 620px; }

/* ── Raffinements d'agencement (revue couleurs header/footer/fond) ──────────
   Épicerie seulement. 1) le vert du pied de page vient du thème (theme_utils,
   marge 7:1). 2) en-tête compacté ~148 → ~111 px (maquette ~115). 3) signature
   dorée du héro. 4) bandeaux intérieurs minces alignés à gauche, comme la
   fiche produit. */
.site-epicerie .header-top { padding: 6px 0; font-size: 12.5px; }
.site-epicerie .nav-wrapper { min-height: 74px; }
.site-epicerie .logo-img { max-height: 52px; }
/* Le vrai gonfleur : les liens du menu portent padding 36px 0 (style.css) —
   la nav ne descendait jamais sous 98 px, min-height ou pas. */
.site-epicerie .main-menu > li > a { padding: 24px 0; }
@media (max-width: 991px) {
    .site-epicerie .nav-wrapper { min-height: 62px; }
    .site-epicerie .logo-img { max-height: 44px; }
}

/* Bandeaux des pages intérieures (contact, FAQ, panier, compte…) : mince,
   aligné à gauche, titre Poppins 26 px — le gros aplat centré 36-48 px était
   l'habillage du resto simplement reteint. */
.site-epicerie .page-header { padding: 136px 0 22px; text-align: left; }
.site-epicerie .page-header h1 {
    font-family: var(--title-font);
    font-size: 26px; font-weight: 800; letter-spacing: -.02em;
    margin-bottom: 4px;
}
.site-epicerie .breadcrumb-nav { font-size: 13px; }
@media (max-width: 991px) { .site-epicerie .page-header { padding-top: 118px; } }
/* La bande de la fiche produit garde son bas propre (fil d'Ariane seul). */
.site-epicerie .ep-pd-band { padding-top: 136px; padding-bottom: 26px; }
@media (max-width: 991px) { .site-epicerie .ep-pd-band { padding-top: 118px; } }

/* Signature dorée de la maquette : « Le Vietnam, dans votre *garde-manger.* »
   — l'admin encadre le segment d'astérisques (filtre gold_accents). */
.site-epicerie .ep-hero h1 em { font-style: normal; color: #F2C879; }