:root {
    --ochre: #C8832A;
    --ochre-rgb: 200, 131, 42;
    --burnt-earth: #8B4513;
    --burnt-earth-rgb: 139, 69, 19;
    --forest-green: #2D5016;
    --forest-green-rgb: 45, 80, 22;
    --cream: #F5F0E8;
    --dark: #1A1A1A;
    --shadow-rgb: 26, 26, 26;
    --shadow: 0 16px 36px rgba(var(--shadow-rgb), 0.08);
    --shadow-soft: 0 10px 24px rgba(var(--shadow-rgb), 0.06);
    --transition: 0.3s ease;
    --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Skip Link for Accessibility */
.skip-link {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--burnt-earth);
    color: var(--cream);
    padding: 0.8rem 1.5rem;
    border-radius: 0 0 16px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(26, 26, 26, 0.24);
    transition: top 0.4s var(--ease-premium);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
}

.skip-link:focus-visible,
.skip-link:focus {
    top: 0;
    outline: none;
}

[data-theme="dark"] .skip-link {
    background: #FF6600;
    color: #F8F1E5;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    background: var(--cream);
    color: var(--dark);
    overflow-x: hidden;
}

body.cart-open {
    overflow: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

ul {
    list-style: none;
}

/* Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    padding: 1rem 1.25rem;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.site-header.scrolled {
    background: rgba(245, 240, 232, 0.94);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(26, 26, 26, 0.08);
}

.header-container {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cream);
}

.site-header.scrolled .logo {
    color: var(--burnt-earth);
}

.logo img {
    width: 38px;
    height: 38px;
}

.main-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.main-nav a {
    position: relative;
    padding: 0.4rem 0.7rem;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(245, 240, 232, 0.92);
    transition: color 0.25s ease;
}

.site-header.scrolled .main-nav a {
    color: var(--dark);
}

/* Underline qui se dessine au survol, plutôt qu'un simple changement de fond */
.main-nav a::after {
    content: '';
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.15rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease-premium);
}

.main-nav a:hover::after,
.main-nav a.active::after {
    transform: scaleX(1);
}

.main-nav a:hover,
.main-nav a.active {
    color: white;
}

.site-header.scrolled .main-nav a:hover,
.site-header.scrolled .main-nav a.active {
    color: var(--burnt-earth);
}

/* Hero */
.hero {
    min-height: 100vh;
    display: grid;
    align-items: end;
    gap: 1.2rem;
    padding: 6rem 1.25rem 2rem;
    background-image: linear-gradient(90deg, rgba(26, 26, 26, 0.72), rgba(26, 26, 26, 0.18)),
        url('../img/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    color: white;
}

.hero-content {
    max-width: 720px;
    display: grid;
    gap: 1.1rem;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--burnt-earth); /* Excellente lisibilité sur fond crème en mode clair */
    /* Petit trait avant le label — signature éditoriale discrète */
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.hero .eyebrow {
    color: #f0c88b; /* Conserve sa couleur claire sur le fond sombre de la bannière héro */
}

.eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

.hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.6rem, 6.5vw, 5.4rem);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: -0.01em;
    max-width: 13ch;
}

.hero p {
    color: rgba(245, 240, 232, 0.88);
    max-width: 52ch;
    font-size: 1.05rem;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.4rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.35s var(--ease-premium), background 0.3s ease, color 0.3s ease, box-shadow 0.35s ease;
}

/* BUGFIX : .button { display: inline-flex } bat [hidden] à spécificité égale
   (classe > attribut), donc cartValidateButton.hidden = true restait visible.
   On force explicitement le masquage ici. */
.button[hidden] {
    display: none;
}

.button-dark {
    background: var(--ochre);
    color: var(--cream);
}

.button-dark:hover {
    background: var(--burnt-earth);
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 14px 28px rgba(139, 69, 19, 0.28);
}

.button-light {
    border-color: rgba(245, 240, 232, 0.7);
    color: var(--cream);
    background: rgba(255, 255, 255, 0.08);
}

.button-light:hover {
    background: white;
    color: var(--dark);
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 14px 28px rgba(26, 26, 26, 0.18);
}

.hero-aside {
    justify-self: start;
    max-width: 290px;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(245, 240, 232, 0.24);
    background: rgba(26, 26, 26, 0.24);
    backdrop-filter: blur(8px);
}

.hero-aside h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    margin-top: 0.25rem;
}

/* Section Histoire styling */
.histoire-container {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.histoire-content {
    display: grid;
    gap: 1.25rem;
}

.histoire-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    color: var(--burnt-earth);
}

.histoire-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--dark);
    font-weight: 500;
}

.histoire-content p:not(.histoire-lead):not(.eyebrow) {
    color: #4e4638;
    font-size: 1rem;
    line-height: 1.7;
}

.histoire-stats {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(26, 26, 26, 0.08);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ochre);
}

.stat-label {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: #6a604e;
}

.histoire-image {
    position: relative;
}

.histoire-image .gallery-item {
    min-height: 380px;
}

/* Section Avis styling */
.avis-grid {
    display: grid;
    gap: 1.5rem;
}

.avis-card {
    background: white;
    border: 1px solid rgba(26, 26, 26, 0.06);
    border-radius: 24px;
    padding: 2rem 1.8rem;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    transition: transform 0.35s var(--ease-premium), box-shadow 0.35s ease;
}

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

.avis-stars {
    color: var(--ochre);
    font-size: 0.95rem;
    letter-spacing: 0.15em;
}

.avis-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--dark);
}

.avis-author {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6a604e;
    align-self: flex-start;
}

/* Sections */
.section {
    max-width: 1180px;
    margin: 0 auto;
    padding: 5.5rem 1.25rem;
}

/* Identité propre à chaque section : léger changement de fond pour rythmer le scroll,
   à la manière des sites primés qui distinguent chaque "chapitre" du parcours */
.section-histoire {
    background: linear-gradient(180deg, rgba(var(--burnt-earth-rgb), 0.05), transparent 60%);
}

.section-avis {
    background: linear-gradient(180deg, rgba(var(--ochre-rgb), 0.05), transparent 60%);
}

#menu {
    background: linear-gradient(180deg, rgba(var(--ochre-rgb), 0.05), transparent 60%);
}

#galerie {
    background: linear-gradient(180deg, rgba(var(--forest-green-rgb), 0.04), transparent 60%);
}

.section-intro {
    display: grid;
    gap: 0.9rem;
    margin-bottom: 3rem;
}

.section-intro h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    line-height: 1.05;
    color: var(--burnt-earth);
    max-width: 14ch;
}

.section-intro p:last-child {
    color: #4e4638;
    max-width: 58ch;
    font-size: 1.02rem;
}

.menu-categories {
    display: grid;
    gap: 1.25rem;
}

.category-block {
    background: white;
    border: 1px solid rgba(26, 26, 26, 0.06);
    border-radius: 24px;
    padding: 1.6rem 1.4rem;
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.4s ease;
}

.category-block:hover {
    box-shadow: var(--shadow);
}

.category-block h3 {
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.26em;
    color: var(--forest-green);
    margin-bottom: 1.3rem;
}

.dish-card {
    padding: 1.3rem 0;
    border-top: 1px solid rgba(26, 26, 26, 0.08);
}

.dish-card:first-of-type {
    border-top: none;
    padding-top: 0;
}

.dish-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.25rem;
}

.dish-head h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    color: var(--dark);
}

.dish-price {
    color: var(--ochre);
    font-weight: 700;
}

.dish-desc {
    color: #4e4638;
}

.dish-detail {
    margin-top: 0.45rem;
    color: var(--forest-green);
    font-size: 0.95rem;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.3s ease;
}

.dish-card:hover .dish-detail,
.dish-card:focus-within .dish-detail {
    opacity: 1;
    transform: translateY(0);
}

.dish-card:hover .dish-head h4 {
    color: var(--burnt-earth);
}

.dish-actions {
    margin-top: 0.75rem;
}

.add-to-cart {
    border: none;
    border-radius: 999px;
    background: var(--forest-green);
    color: white;
    padding: 0.7rem 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.add-to-cart:hover {
    background: var(--burnt-earth);
    transform: translateY(-2px);
}

.cart-icon-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: none;
    background: transparent;
    color: var(--cream);
    cursor: pointer;
    position: relative;
    padding: 0.25rem 0.2rem;
}

.site-header.scrolled .cart-icon-button {
    color: var(--dark);
}

.cart-icon-button svg {
    width: 20px;
    height: 20px;
}

.cart-badge {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--ochre);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    transition: transform 0.25s ease;
}

.cart-badge.bump {
    animation: cart-bump 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes cart-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.45); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 30;
}

.cart-overlay.is-visible {
    opacity: 1;
    pointer-events: auto; /* Bloque l'interaction avec le reste de la page */
}

.cart-drawer {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(92vw, 480px);
    max-height: 90vh;
    background: var(--cream);
    box-shadow: 0 24px 64px rgba(26, 26, 26, 0.24);
    padding: 1.8rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    border-radius: 24px;
    border: 1px solid rgba(26, 26, 26, 0.08);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    pointer-events: none;
    transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
    z-index: 35;
}

.cart-drawer.is-open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.cart-drawer__header,
.cart-drawer__footer,
.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.cart-drawer__header h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    color: var(--burnt-earth);
}

.drawer-close {
    border: none;
    background: transparent;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--dark);
    transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.drawer-close:hover {
    transform: rotate(90deg);
    opacity: 0.6;
}

.drawer-close:focus-visible {
    outline: none;
    transform: rotate(90deg);
    background: rgba(139, 69, 19, 0.08);
    box-shadow: 0 0 0 2px var(--ochre);
}

[data-theme="dark"] .drawer-close:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 2px var(--ochre);
}

.cart-drawer__body {
    flex: 1;
    overflow-y: auto;
}

.empty-state {
    color: #6a604e;
    padding-top: 0.5rem;
}

.empty-state-container {
    text-align: center;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.empty-state-text {
    margin: 0;
    color: #6a604e;
}

#empty-cart-cta {
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
}

.cart-items {
    display: grid;
    gap: 0.8rem;
}

.cart-item-card {
    background: white;
    border: 1px solid rgba(26, 26, 26, 0.07);
    border-radius: 16px;
    padding: 0.85rem;
    display: grid;
    gap: 0.7rem;
}

.cart-item-card__top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.cart-item-card__top strong {
    color: var(--burnt-earth);
}

.cart-item-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cart-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(26, 26, 26, 0.1);
    border-radius: 999px;
    padding: 0.2rem;
}

.cart-stepper button {
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cream);
    cursor: pointer;
    font-weight: 700;
}

.cart-stepper span {
    min-width: 1.4rem;
    text-align: center;
    font-weight: 700;
}

.cart-remove {
    border: none;
    background: transparent;
    color: #8a5a37;
    cursor: pointer;
    font-weight: 700;
}

.cart-summary {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(26, 26, 26, 0.08);
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
}

.cart-summary__row strong {
    color: var(--forest-green);
}

.cart-form {
    display: grid;
    gap: 0.8rem;
}

.cart-form label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.92rem;
    font-weight: 700;
}

.cart-form input,
.cart-form textarea {
    border: 1px solid rgba(26, 26, 26, 0.12);
    border-radius: 14px;
    padding: 0.75rem 0.85rem;
    font: inherit;
    background: white;
}

.cart-form textarea {
    min-height: 96px;
    resize: vertical;
}

.cart-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.cart-confirmation {
    display: grid;
    gap: 0.7rem;
    padding: 0.95rem;
    background: white;
    border-radius: 18px;
    border: 1px solid rgba(26, 26, 26, 0.08);
}

.cart-confirmation strong {
    color: var(--forest-green);
}

.full {
    width: 100%;
    justify-content: center;
}

.gallery-grid {
    display: grid;
    gap: 1rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    min-height: 260px;
    background: var(--dark);
    box-shadow: var(--shadow);
}

/* Léger voile chaud sur les photos pour une cohérence de teinte entre les images,
   même si elles viennent de sources différentes (technique utilisée par les sites
   de restaurant haut de gamme pour unifier une galerie hétérogène) */
.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(139, 69, 19, 0.06), rgba(26, 26, 26, 0.28));
    pointer-events: none;
}

.gallery-item img {
    transition: transform 0.9s var(--ease-premium);
}

.gallery-item:hover img {
    transform: scale(1.045);
}

.gallery-item figcaption {
    position: absolute;
    left: 1.1rem;
    bottom: 1.1rem;
    padding: 0.55rem 0.85rem;
    background: rgba(245, 240, 232, 0.94);
    color: var(--dark);
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    border-radius: 999px;
    z-index: 1;
}

.gallery-item.large {
    min-height: 360px;
}

/* Site Footer */
.site-footer {
    background: linear-gradient(180deg, rgba(139, 69, 19, 0.02) 0%, rgba(139, 69, 19, 0.05) 100%);
    border-top: 1px solid rgba(26, 26, 26, 0.08);
    padding: 5rem 1.25rem 3rem;
    color: #54483e;
    font-family: 'Inter', sans-serif;
}

.footer-container {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.footer-column h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--burnt-earth);
    margin-bottom: 1.25rem;
    letter-spacing: 0.02em;
}

.footer-column ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-column a {
    font-size: 0.9rem;
    color: #635649;
    transition: color 0.25s ease, padding-left 0.25s var(--ease-premium);
    display: inline-block;
}

.footer-column a:hover {
    color: var(--ochre);
    padding-left: 4px;
}

.brand-column {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--burnt-earth);
}

.footer-logo img {
    width: 32px;
    height: 32px;
}

.footer-philosophy {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #635649;
    max-width: 30ch;
}

.footer-socials {
    display: flex;
    gap: 1.2rem;
    margin-top: 0.5rem;
}

.footer-socials a {
    color: #635649;
    transition: color 0.25s ease, transform 0.25s ease;
}

.footer-socials a:hover {
    color: var(--ochre);
    transform: translateY(-2px);
}

.footer-bottom {
    max-width: 1180px;
    margin: 4rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(26, 26, 26, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.82rem;
    color: #8a7c6f;
}

.footer-copyright {
    font-weight: 400;
}

.footer-location {
    font-style: normal;
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Sticky Mobile CTA Bar CSS */
.sticky-mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(245, 240, 232, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(26, 26, 26, 0.1);
    padding: 0.85rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    z-index: 25;
    box-shadow: 0 -8px 24px rgba(26, 26, 26, 0.08);
    transform: translateY(100%);
    transition: transform 0.4s var(--ease-premium);
}

.sticky-mobile-cta.is-visible {
    transform: translateY(0);
}

.sticky-mobile-cta .sticky-cta-button {
    flex: 1;
    font-size: 0.95rem;
    padding: 0.85rem 1rem;
}

.sticky-mobile-cta .cart-icon-button {
    color: var(--dark);
}

/* Hide on desktop/tablet */
@media (min-width: 700px) {
    .sticky-mobile-cta {
        display: none !important;
    }
}

/* Cascade légère quand plusieurs cards apparaissent ensemble dans une même grille */
.avis-grid .avis-card:nth-child(2) { transition-delay: 0.08s; }
.avis-grid .avis-card:nth-child(3) { transition-delay: 0.16s; }
.menu-categories .category-block:nth-child(2) { transition-delay: 0.08s; }
.menu-categories .category-block:nth-child(3) { transition-delay: 0.16s; }
.gallery-grid .gallery-item:nth-child(2) { transition-delay: 0.08s; }
.gallery-grid .gallery-item:nth-child(3) { transition-delay: 0.16s; }
.gallery-grid .gallery-item:nth-child(4) { transition-delay: 0.24s; }

/* Contact page */
.contact-shell {
    display: grid;
    gap: 1rem;
}

.contact-card {
    background: white;
    border-radius: 24px;
    padding: 1.3rem;
    box-shadow: var(--shadow);
}

.contact-card h3 {
    font-family: 'Cormorant Garamond', serif;
    color: var(--forest-green);
    margin-bottom: 0.45rem;
}

@media (min-width: 700px) {
    .hero {
        padding: 7rem 2rem 2.5rem;
    }

    .histoire-container {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 3rem;
    }

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

    .menu-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .gallery-item.large {
        grid-row: span 2;
        min-height: 500px;
    }

    .contact-shell {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }

    .brand-column {
        grid-column: span 2;
    }
}

@media (min-width: 980px) {
    .section {
        padding: 5.5rem 1.25rem;
    }

    .avis-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .menu-categories {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gallery-grid {
        grid-template-columns: 1.1fr 0.8fr 0.8fr;
    }

    .gallery-item.large {
        grid-column: 1 / span 2;
        grid-row: span 2;
        min-height: 560px;
    }

    .gallery-item.tall {
        grid-column: 3;
        grid-row: span 2;
    }

    .footer-container {
        grid-template-columns: 2fr repeat(3, 1fr);
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* Section Contact */
#contact {
    background: linear-gradient(180deg, rgba(var(--burnt-earth-rgb), 0.04), transparent 60%);
}

.contact-shell {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

.contact-info p {
    margin-bottom: 1.2rem;
    line-height: 1.6;
    color: #4e4638;
}

.contact-info strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    color: var(--burnt-earth);
    margin-bottom: 0.2rem;
}

.contact-form {
    display: grid;
    gap: 0.9rem;
}

.contact-form label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.92rem;
    font-weight: 700;
}

.contact-form input,
.contact-form textarea {
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(26, 26, 26, 0.14);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    background: white;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--ochre);
    box-shadow: 0 0 0 3px rgba(var(--ochre-rgb), 0.16);
}

.contact-form textarea {
    resize: vertical;
}

/* Carte Google Maps */
.contact-map {
    margin-top: 1.5rem;
    width: 100%;
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 250px;
    border: 0;
    filter: grayscale(15%) contrast(105%);
    transition: filter var(--transition);
}

.contact-map iframe:hover {
    filter: none;
}

@media (min-width: 800px) {
    .contact-shell {
        grid-template-columns: 0.85fr 1.15fr;
        align-items: start;
    }
}

/* Étape paiement — choix du mode */
.payment-options {
    display: grid;
    gap: 0.75rem;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1.1rem;
    border-radius: 16px;
    border: 1px solid rgba(26, 26, 26, 0.12);
    background: white;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.25s ease, transform 0.25s var(--ease-premium), box-shadow 0.25s ease;
}

.payment-option:hover {
    border-color: var(--ochre);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.payment-option__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--forest-green);
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.payment-option__label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.payment-option__label small {
    color: #6b6255;
    font-size: 0.8rem;
}

/* Simulation Orange Money */
.om-disclaimer {
    font-size: 0.72rem;
    color: #8a8072;
    background: rgba(200, 131, 42, 0.1);
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    margin-bottom: 0.9rem;
}

/* Écran de traitement (spinner) */
.om-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: #4e4638;
}

.om-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(200, 131, 42, 0.2);
    border-top-color: var(--ochre);
    animation: om-spin 0.8s linear infinite;
}

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

/* ---- Extensions: dark theme, skeletons, badges, micro-feedback ---- */

/* Thème sombre — overrides via attribut data-theme="dark" sur <html> ou <body> */
[data-theme="dark"] {
    color-scheme: dark;
    --cream: #171311;
    --dark: #F8F1E5;
    --shadow-rgb: 0, 0, 0;
    --shadow: 0 18px 42px rgba(var(--shadow-rgb), 0.6);
    --shadow-soft: 0 12px 30px rgba(var(--shadow-rgb), 0.45);
    --ochre: #E0A64D;
    --ochre-rgb: 224, 166, 77;
    --burnt-earth: #C97A42;
    --burnt-earth-rgb: 201, 122, 66;
    --forest-green: #5D8D3B;
    --forest-green-rgb: 93, 141, 59;
}

[data-theme="dark"] body {
    background: linear-gradient(180deg, #171311 0%, #12110f 100%);
    color: var(--dark);
}

[data-theme="dark"] .site-header.scrolled {
    background: rgba(17, 15, 13, 0.94);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .logo,
[data-theme="dark"] .main-nav a,
[data-theme="dark"] .cart-icon-button,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .site-header.scrolled .logo,
[data-theme="dark"] .site-header.scrolled .main-nav a {
    color: #F8F1E5;
}

[data-theme="dark"] .histoire-content p:not(.histoire-lead):not(.eyebrow),
[data-theme="dark"] .section-intro p:last-child,
[data-theme="dark"] .dish-desc,
[data-theme="dark"] .dish-detail,
[data-theme="dark"] .contact-info p,
[data-theme="dark"] .reorder-text small,
[data-theme="dark"] .site-footer,
[data-theme="dark"] .avis-author,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .payment-option__label small {
    color: #D8CDB8;
}

[data-theme="dark"] .histoire-lead {
    color: #F3E8D0;
}

[data-theme="dark"] .avis-card,
[data-theme="dark"] .category-block,
[data-theme="dark"] .cart-drawer,
[data-theme="dark"] .cart-item-card,
[data-theme="dark"] .cart-confirmation,
[data-theme="dark"] .payment-option,
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .cart-form input,
[data-theme="dark"] .cart-form textarea,
[data-theme="dark"] .contact-success-panel {
    background: #221C18 !important;
    color: var(--dark) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

/* Carte Google Maps en mode sombre */
[data-theme="dark"] .contact-map {
    border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .contact-map iframe {
    filter: grayscale(50%) invert(90%) hue-rotate(180deg) opacity(0.85);
}

[data-theme="dark"] .contact-map iframe:hover {
    filter: grayscale(20%) invert(90%) hue-rotate(180deg) opacity(0.95);
}

[data-theme="dark"] .site-footer {
    border-top-color: rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.03) 100%);
}

[data-theme="dark"] .footer-column h3 {
    color: #F7C97A;
}

[data-theme="dark"] .footer-column a,
[data-theme="dark"] .footer-philosophy,
[data-theme="dark"] .footer-socials a {
    color: #D8CDB8;
}

[data-theme="dark"] .footer-column a:hover,
[data-theme="dark"] .footer-socials a:hover {
    color: var(--ochre);
}

[data-theme="dark"] .footer-logo {
    color: #F7C97A;
}

[data-theme="dark"] .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.1);
    color: #AFA28D;
}

[data-theme="dark"] .cart-drawer__header h3,
[data-theme="dark"] .section-intro h2,
[data-theme="dark"] .histoire-content h2,
[data-theme="dark"] .dish-head h4,
[data-theme="dark"] .contact-info strong {
    color: #F7C97A;
}

[data-theme="dark"] .button-light {
    border-color: rgba(248, 241, 229, 0.24);
    color: #F8F1E5;
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .button-light:hover {
    background: #F8F1E5;
    color: #171311;
}

[data-theme="dark"] .gallery-item figcaption {
    background: rgba(17, 15, 13, 0.95);
    color: #F8F1E5;
}

[data-theme="dark"] .cart-form input::placeholder,
[data-theme="dark"] .cart-form textarea::placeholder,
[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder {
    color: #AFA28D;
}

/* Fix: textes gris codés en dur (pas de variable) — invisibles/peu lisibles en mode sombre.
   On les repasse en blanc cassé plutôt que gris pour garder un bon contraste. */
[data-theme="dark"] .histoire-content p:not(.histoire-lead):not(.eyebrow),
[data-theme="dark"] .section-intro p:last-child,
[data-theme="dark"] .dish-desc,
[data-theme="dark"] .contact-info p,
[data-theme="dark"] .om-processing {
    color: rgba(245, 240, 232, 0.82);
}

[data-theme="dark"] .payment-option__label small {
    color: rgba(245, 240, 232, 0.65);
}

[data-theme="dark"] .om-disclaimer {
    color: rgba(245, 240, 232, 0.7);
    background: rgba(255, 255, 255, 0.06);
}

/* Badge d'avis (social proof) à côté du titre du menu */
.menu-intro-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.rating-badge {
    background: rgba(0,0,0,0.05);
    color: var(--dark);
    border: 1px solid rgba(0,0,0,0.08);
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
}

[data-theme="dark"] .rating-badge {
    background: rgba(255,255,255,0.12);
    color: #F8F1E5;
    border-color: rgba(255,255,255,0.2);
}

/* Petite pastille indiquant commandes aujourd'hui sur certaines cartes */
.order-pill {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.28rem 0.6rem;
    background: rgba(45, 80, 22, 0.08);
    color: var(--forest-green);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

[data-theme="dark"] .order-pill {
    background: rgba(224, 166, 77, 0.16);
    color: #F8F1E5;
    border: 1px solid rgba(224, 166, 77, 0.24);
}

/* Wrapper média + skeleton shimmer */
.media-wrap {
    position: relative;
    inset: 0;
    width: 100%;
    min-height: 100%;
    display: block;
    background: rgba(255,255,255,0.04);
}
.img-skeleton {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.035) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.2s linear infinite;
    z-index: 0;
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton-img {
    opacity: 0;
    transition: opacity 420ms var(--ease-premium), transform 0.9s var(--ease-premium);
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.skeleton-img.loaded {
    opacity: 1;
}

/* +1 micro-feedback flottant */
.add-feedback {
    position: absolute;
    pointer-events: none;
    font-weight: 800;
    color: var(--ochre);
    animation: addFeedback 600ms var(--ease-premium) forwards;
}
@keyframes addFeedback {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    60% { opacity: 0.9; transform: translateY(-14px) scale(1.08); }
    100% { opacity: 0; transform: translateY(-28px) scale(1); }
}

/* Reorder banner */
.reorder-banner {
    max-width: 1180px;
    margin: 0 auto 1.25rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(200,131,42,0.06), rgba(26,26,26,0.02));
    border: 1px solid rgba(26,26,26,0.06);
}
.reorder-content {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}
.reorder-text small {
    display: block;
    color: #52483b;
    margin-top: 0.25rem;
}

/* Bouton du toggle thème */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--burnt-earth);
    background: var(--cream);
    color: var(--burnt-earth);
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.35s var(--ease-premium), background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-toggle svg {
    transition: transform 0.45s var(--ease-premium);
}

.theme-toggle:hover {
    background: var(--burnt-earth);
    color: var(--cream);
    transform: translateY(-2px);
}

.theme-toggle:focus-visible {
    outline: none;
    background: var(--burnt-earth);
    color: var(--cream);
    box-shadow: 0 0 0 2px var(--ochre);
}

[data-theme="dark"] .theme-toggle {
    border-color: var(--ochre);
    background: var(--cream);
    color: var(--ochre);
}

[data-theme="dark"] .theme-toggle:hover {
    background: var(--ochre);
    color: var(--cream);
}

[data-theme="dark"] .theme-toggle:focus-visible {
    background: var(--ochre);
    color: var(--cream);
    box-shadow: 0 0 0 2px var(--dark);
}

/* Rotation de l'icône de thème au toggle */
.theme-toggle-rotated svg {
    transform: rotate(360deg);
}

/* Fix: bouton invisible une fois le header solidifié au scroll */
.site-header.scrolled .theme-toggle {
    border-color: var(--burnt-earth);
    color: var(--burnt-earth);
}

.site-header.scrolled .theme-toggle:hover {
    background: var(--burnt-earth);
    color: var(--cream);
}

/* FAQ Section */
#faq {
    background: linear-gradient(180deg, rgba(200, 131, 42, 0.03), transparent 60%);
}

/* Panel de succès pour le formulaire de contact */
.contact-success-panel {
    background: white;
    border: 1px solid rgba(26,26,26,0.06);
    border-radius: 24px;
    padding: 2rem 1.8rem;
    box-shadow: var(--shadow-soft);
    text-align: center;
    animation: addFeedback 0.6s var(--ease-premium);
}

.contact-success-panel h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: var(--forest-green);
    margin-bottom: 0.75rem;
}

.contact-success-panel p {
    font-size: 0.95rem;
    color: #4e4638;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.contact-success-panel .button {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

.faq-item:first-child {
    border-top: 1px solid rgba(26, 26, 26, 0.08);
}

.faq-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    padding: 1.5rem 0.5rem;
    cursor: pointer;
    text-align: left;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--burnt-earth);
    transition: color 0.3s ease;
}

.faq-trigger:hover,
.faq-trigger:focus-visible {
    color: var(--ochre);
    outline: none;
}

.faq-icon {
    transition: transform 0.4s var(--ease-premium);
    color: var(--ochre);
}

.faq-trigger[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

/* Checkout Stepper Progress Indicator */
.checkout-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: rgba(139, 69, 19, 0.04);
    border-radius: 14px;
    margin-bottom: 0.5rem;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    position: relative;
    opacity: 0.45;
    transition: opacity 0.3s ease;
}

.step-item.active {
    opacity: 1;
}

.step-item.completed {
    opacity: 0.85;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(26, 26, 26, 0.1);
    color: var(--dark);
    font-size: 0.8rem;
    font-weight: 700;
    transition: background 0.3s ease, color 0.3s ease;
}

.step-item.active .step-number {
    background: var(--ochre);
    color: white;
}

.step-item.completed .step-number {
    background: var(--forest-green);
    color: white;
}

.step-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dark);
}

.step-line {
    height: 2px;
    background: rgba(26, 26, 26, 0.1);
    flex: 1;
    max-width: 40px;
    transition: background 0.3s ease;
}

.step-line.active {
    background: var(--ochre);
}

.step-line.completed {
    background: var(--forest-green);
}

[data-theme="dark"] .checkout-stepper {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .step-number {
    background: rgba(255, 255, 255, 0.1);
}

/* Accordion slide animation with CSS Grid */
.faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--ease-premium);
    overflow: hidden;
}

.faq-content[aria-hidden="false"] {
    grid-template-rows: 1fr;
}

.faq-content-inner {
    min-height: 0;
}

.faq-content p {
    padding: 0 0.5rem 1.5rem;
    font-size: 1rem;
    line-height: 1.7;
    color: #4e4638;
}

/* Dark mode overrides for FAQ */
[data-theme="dark"] .faq-item {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .faq-trigger {
    color: #F7C97A;
}

[data-theme="dark"] .faq-trigger:hover {
    color: var(--ochre);
}

[data-theme="dark"] .faq-content p {
    color: #D8CDB8;
}

/* Accessibility focus-visible states and form focus visual enhancements */
.main-nav a:focus-visible {
    outline: 2px solid var(--ochre);
    outline-offset: 4px;
    border-radius: 4px;
}

#header-cart-toggle:focus-visible,
#mobile-cart-toggle:focus-visible,
.cart-icon-button:focus-visible {
    outline: 2px solid var(--ochre);
    outline-offset: 4px;
    border-radius: 4px;
}

.payment-option:focus-visible {
    outline: 2px solid var(--ochre);
    outline-offset: 3px;
    border-radius: 16px;
}

.cart-stepper button:focus-visible,
.cart-remove:focus-visible {
    outline: 2px solid var(--ochre);
    outline-offset: 2px;
    border-radius: 4px;
}

.footer-socials a:focus-visible {
    outline: 2px solid var(--ochre);
    outline-offset: 4px;
    border-radius: 50%;
}

.cart-form input:focus,
.cart-form textarea:focus {
    outline: none;
    border-color: var(--ochre);
    box-shadow: 0 0 0 3px rgba(var(--ochre-rgb), 0.16);
}

.add-to-cart:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--ochre);
    outline-offset: 3px;
}

.faq-trigger:focus-visible {
    outline: 2px solid var(--ochre);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Custom utility classes to replace inline styles in JS dynamic templates */
.cart-step-title {
    margin-bottom: 1rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    color: var(--burnt-earth);
}

.cart-confirmation-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    color: var(--forest-green);
    margin-bottom: 0.5rem;
}

.cart-actions--delivery {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
}

.cart-back-btn {
    padding: 0.75rem;
}

.cart-back-btn--cart {
    flex: 1;
}

.cart-back-btn--delivery {
    margin-top: 1rem;
    width: 100%;
}

.cart-back-btn--payment {
    margin-top: 0.75rem;
    width: 100%;
}

.payment-option__badge--om {
    background: #FF6600 !important;
}

.cart-amount-info {
    font-size: 0.9rem;
    margin: 0.5rem 0 1rem;
}

.cart-ref-text {
    font-size: 0.85rem;
    color: #4e4638;
}

.cart-congrats-text {
    font-size: 0.9rem;
    margin: 0.5rem 0 1rem;
}

.cart-summary--confirmation {
    margin-top: 1rem;
}

.cart-confirmation-btn {
    margin-top: 1rem;
}

.contact-form-wrapper {
    transition: opacity 0.3s ease;
}

.contact-form-wrapper.fade-out {
    opacity: 0;
}

[data-theme="dark"] .cart-step-title {
    color: #F7C97A;
}

[data-theme="dark"] .cart-ref-text {
    color: #D8CDB8;
}