/* ============================================================
 * Module Navigation — styles menu/sous-menu/logo/drawer (extrait de header.css).
 * DA dev2 via variables (charcoal/orange). Chargé après header.css.
 * ============================================================ */

/* ---------- Menu primaire ---------- */
.sfc-header__nav {
    grid-column: 2;
    display: flex;
    justify-content: center;
}

.sfc-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.sfc-menu li { position: relative; }

.sfc-menu a {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    padding: 8px 0;
    display: inline-block;
    position: relative;
}

.sfc-menu a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transition: width 300ms ease;
}

.sfc-menu a:hover::after,
.sfc-menu a:focus-visible::after,
.sfc-menu .current-menu-item > a::after,
.sfc-menu .current_page_item > a::after {
    width: 100%;
}

.sfc-menu a:hover,
.sfc-menu a:focus-visible {
    color: var(--color-accent);
}

/* Sous-menu */
.sfc-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: var(--color-white);
    box-shadow: 0 8px 24px rgba(34, 34, 34, 0.1);
    border-radius: var(--radius-ui);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
    z-index: 110;
}

.sfc-menu li:hover > .sub-menu,
.sfc-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.sfc-menu .sub-menu a {
    display: block;
    padding: 10px 20px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sfc-menu .sub-menu a::after { display: none; }

/* ---------- Logo centré dans le menu (desktop) ----------
   Item synthétique injecté entre la 3e et la 4e entrée top-level
   (entre « Traiteur » et « Coffrets »). Suspendu : il déborde sous
   le header sans grossir la barre (header en overflow:visible).
   Espace horizontal réservé via la largeur du <li>. */
/* Sélecteur volontairement spécifique (.sfc-menu li.sfc-menu__logo) pour
   l'emporter sur « .sfc-menu li { position: relative } » : le <li> doit être
   NON positionné pour que le lien logo (position:absolute) s'ancre sur
   .sfc-header__inner (le .sfc-container centré) et non sur cet emplacement de
   menu — ainsi le logo est centré sur la page, comme le contenu en dessous. */
.sfc-menu li.sfc-menu__logo {
    position: static;
    width: 300px;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
}

.sfc-menu__logo .custom-logo-link {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Biais vers le bas : le logo descend sous le header et ne chevauche
       plus la topbar (sfc-topbar__msg) au-dessus. */
    transform: translate(-50%, -18%);
    z-index: 110;
    display: block;
    line-height: 0;
    padding: 0;
    /* En absolu + left:50%, la largeur « shrink-to-fit » serait plafonnée à
       l'espace restant (50% du parent) et écraserait l'image quand on l'agrandit.
       max-content laisse le lien (et donc l'image) prendre sa largeur naturelle. */
    width: max-content;
}

.sfc-menu__logo .custom-logo-link img,
.sfc-menu__logo .custom-logo-link img.custom-logo {
    height: 150px;
    width: auto;
    max-height: none;
    display: block;
    transition: height 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop : le logo suspendu est agrandi en haut de page puis revient à sa
   taille standard (150px) dès que l'on scrolle (.is-scrolled posée par main.js > 50px). */
@media (min-width: 1025px) {
    .sfc-header:not(.is-scrolled) .sfc-menu__logo .custom-logo-link img,
    .sfc-header:not(.is-scrolled) .sfc-menu__logo .custom-logo-link img.custom-logo {
        height: 200px;
    }
}

/* Accessibilité : pas d'animation si l'utilisateur la refuse. */
@media (prefers-reduced-motion: reduce) {
    .sfc-menu__logo .custom-logo-link img,
    .sfc-menu__logo .custom-logo-link img.custom-logo {
        transition: none;
    }
}

/* Pas de soulignement doré ni de changement de couleur sur le logo. */
.sfc-menu__logo a::after { display: none; }
.sfc-menu__logo a:hover,
.sfc-menu__logo a:focus-visible { color: inherit; }

/* ============================================================
 * Mobile drawer — design « Liquid Glass » (variante dev2 charcoal/orange).
 * Translucide + backdrop-blur fort : le contenu derrière reste flouté en
 * arrière-plan (signature iOS 18 Control Center). Rollback via nav.css.bak.
 * ============================================================ */
.sfc-mobile-drawer {
    position: fixed;
    inset: 0;
    color: var(--color-primary);
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    transform: translateX(-100%);
    transition: transform 360ms cubic-bezier(.22, 1, .36, 1),
                opacity 240ms ease;
    overflow-y: auto;
    isolation: isolate;

    /* Couche 1 — verre blanc translucide (dégradé vertical) */
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--color-white) 78%, transparent) 0%,
            color-mix(in srgb, var(--color-white) 88%, transparent) 100%
        );

    /* Backdrop frosted (le contenu derrière reste lisiblement flou) */
    -webkit-backdrop-filter: blur(30px) saturate(180%);
            backdrop-filter: blur(30px) saturate(180%);

    /* Bord intérieur discret, comme un bord verre */
    box-shadow:
        inset 0 1px 0 0 rgba(34, 34, 34, 0.12),
        inset -1px 0 0 0 rgba(34, 34, 34, 0.12),
        4px 0 32px -8px rgba(0, 0, 0, 0.18);
}

/* Couche 2 — voile lumineux haut (specular highlight cream) */
.sfc-mobile-drawer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 30vh;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-cream) 12%, transparent) 0%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Couche 3 — halos orange diffus (catch light signature dev2) */
.sfc-mobile-drawer::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 0%,
            color-mix(in srgb, var(--color-gold) 22%, transparent) 0%,
            transparent 35%),
        radial-gradient(circle at 100% 110%,
            color-mix(in srgb, var(--color-gold) 14%, transparent) 0%,
            transparent 45%);
    pointer-events: none;
    z-index: 0;
}

.sfc-mobile-drawer[hidden] {
    display: none;
}

.sfc-mobile-drawer.is-open {
    transform: translateX(0);
}

/* Tous les enfants au-dessus des couches glass */
.sfc-mobile-drawer > * { position: relative; z-index: 1; }

/* ---------- HEAD ---------- */
.sfc-mobile-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    /* Filet horizontal lumineux (fade gauche/droite) à la place de la bordure plate */
    border-bottom: 0;
    position: relative;
}
.sfc-mobile-drawer__head::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(34, 34, 34, 0.12) 30%,
        color-mix(in srgb, var(--color-gold) 35%, transparent) 50%,
        rgba(34, 34, 34, 0.12) 70%,
        transparent 100%);
}

.sfc-mobile-drawer__brand {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    /* Léger glow texte pour intégrer la marque au glass */
    text-shadow: 0 1px 0 color-mix(in srgb, var(--color-white) 50%, transparent);
}

/* Bouton close — capsule glass */
.sfc-mobile-drawer__close {
    background: rgba(34, 34, 34, 0.05);
    border: 1px solid rgba(34, 34, 34, 0.12);
    color: var(--color-primary);
    padding: 8px;
    cursor: pointer;
    border-radius: 12px;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--color-white) 60%, transparent),
        0 2px 6px rgba(0, 0, 0, 0.18);
    transition: background-color 220ms ease, transform 140ms ease, border-color 220ms ease;
}
.sfc-mobile-drawer__close:hover,
.sfc-mobile-drawer__close:focus-visible {
    background: color-mix(in srgb, var(--color-gold) 22%, transparent);
    border-color: color-mix(in srgb, var(--color-gold) 45%, transparent);
}
.sfc-mobile-drawer__close:active { transform: scale(.92); }

.sfc-mobile-drawer__nav {
    flex: 1;
    margin-top: 32px;
}

/* ---------- MENU ---------- */
.sfc-mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Chaque item est désormais une pill glass au repos / hover / active */
.sfc-mobile-menu a {
    display: block;
    padding: 14px 18px;
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--color-primary);
    border: 1px solid transparent;
    border-radius: 14px;
    position: relative;
    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        color 220ms ease,
        transform 140ms ease,
        padding-left 240ms ease;
}

/* Filet très ténu en bas (remplace la bordure pleine de l'ancienne version) */
.sfc-mobile-menu a::after {
    content: "";
    position: absolute;
    left: 18px; right: 18px; bottom: 0;
    height: 1px;
    background: rgba(34, 34, 34, 0.12);
    transition: opacity 220ms ease;
    pointer-events: none;
}
.sfc-mobile-menu li:last-child > a::after { display: none; }

/* Capsule glass orange — hover + focus */
.sfc-mobile-menu a:hover,
.sfc-mobile-menu a:focus-visible {
    color: var(--color-accent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-gold) 22%, transparent) 0%,
        color-mix(in srgb, var(--color-gold) 8%,  transparent) 100%);
    border-color: color-mix(in srgb, var(--color-gold) 38%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--color-white) 60%, transparent),
        0 4px 14px -6px color-mix(in srgb, var(--color-gold) 50%, transparent);
    padding-left: 22px;
}
.sfc-mobile-menu a:hover::after,
.sfc-mobile-menu a:focus-visible::after { opacity: 0; }

.sfc-mobile-menu a:active { transform: scale(.985); }

/* Sous-menu */
.sfc-mobile-menu .sub-menu {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0 0 0 1rem;
}

.sfc-mobile-menu .sub-menu a {
    font-family: var(--font-body);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 10px 16px;
    border-radius: 10px;
}
.sfc-mobile-menu .sub-menu a::after { display: none; }

/* ---------- FOOT ---------- */
.sfc-mobile-drawer__foot {
    padding-top: 20px;
    border-top: 0;
    position: relative;
}
.sfc-mobile-drawer__foot::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(34, 34, 34, 0.12) 30%,
        color-mix(in srgb, var(--color-gold) 35%, transparent) 50%,
        rgba(34, 34, 34, 0.12) 70%,
        transparent 100%);
}

/* Pied du tiroir : réseaux sociaux (le téléphone a été retiré en 2.3.0). */
.sfc-mobile-drawer__foot {
    display: flex;
    justify-content: center;
    gap: 18px;
}

.sfc-mobile-drawer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-circle, 50%);
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-white) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-gold) 30%, transparent);
    transition: color 220ms ease, background 220ms ease, transform 220ms ease;
}

.sfc-mobile-drawer__social svg {
    width: 20px;
    height: 20px;
}

.sfc-mobile-drawer__social:hover,
.sfc-mobile-drawer__social:focus-visible {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-gold) 16%, transparent);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .sfc-mobile-drawer__social:hover,
    .sfc-mobile-drawer__social:focus-visible { transform: none; }
}

/* Fallback navigateurs sans backdrop-filter — fond blanc quasi-opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sfc-mobile-drawer {
        background: color-mix(in srgb, var(--color-white) 96%, transparent);
    }
}

/* Menu desktop masqué en mobile (le drawer prend le relais) */
@media (max-width: 1024px) {
    .sfc-header__nav { display: none; }
}

/* ============================================================
 * Phase 1 — Carets, sous-menu desktop animé, accordéon mobile,
 * entrée séquencée du drawer. transform/opacity ; a11y ; reduced-motion.
 * (Carets injectés par nav.js sur .menu-item-has-children.)
 * ============================================================ */

/* ---------- Desktop : caret + filet doré + stagger des sous-items ---------- */
.sfc-menu .sfc-caret {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    color: var(--color-gold);
    transition: transform 250ms ease;
}
.sfc-menu .sfc-caret__icon { width: 13px; height: 13px; }
.sfc-menu .menu-item-has-children:hover > a .sfc-caret,
.sfc-menu .menu-item-has-children:focus-within > a .sfc-caret { transform: rotate(180deg); }

.sfc-menu .sub-menu { border-top: 2px solid var(--color-gold); }

html.sfc-js .sfc-menu .sub-menu > li {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 280ms ease, transform 280ms ease;
}
.sfc-menu li:hover > .sub-menu > li,
.sfc-menu li:focus-within > .sub-menu > li { opacity: 1; transform: none; }
.sfc-menu .sub-menu > li:nth-child(1) { transition-delay: 30ms; }
.sfc-menu .sub-menu > li:nth-child(2) { transition-delay: 60ms; }
.sfc-menu .sub-menu > li:nth-child(3) { transition-delay: 90ms; }
.sfc-menu .sub-menu > li:nth-child(4) { transition-delay: 120ms; }
.sfc-menu .sub-menu > li:nth-child(5) { transition-delay: 150ms; }
.sfc-menu .sub-menu > li:nth-child(6) { transition-delay: 180ms; }
.sfc-menu .sub-menu > li:nth-child(7) { transition-delay: 210ms; }
.sfc-menu .sub-menu > li:nth-child(8) { transition-delay: 240ms; }
.sfc-menu .sub-menu > li:nth-child(n+9) { transition-delay: 270ms; }

/* ---------- Mobile : accordéon (drawer) ---------- */
.sfc-mobile-menu .menu-item-has-children {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}
.sfc-mobile-menu .menu-item-has-children > .sub-menu { grid-column: 1 / -1; }

.sfc-mobile-menu .sfc-submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-primary);
    cursor: pointer;
}
.sfc-mobile-menu .sfc-submenu-toggle .sfc-caret__icon {
    width: 22px;
    height: 22px;
    transition: transform 250ms ease;
}
.sfc-mobile-menu .menu-item-has-children.is-open > .sfc-submenu-toggle .sfc-caret__icon { transform: rotate(180deg); }

/* Repli par défaut + ouverture animée — uniquement si JS actif (fallback no-JS : visible) */
html.sfc-js .sfc-mobile-menu .menu-item-has-children > .sub-menu {
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    transition: max-height 350ms ease;
}
html.sfc-js .sfc-mobile-menu .menu-item-has-children.is-open > .sub-menu { max-height: 640px; }

/* ---------- Mobile : entrée séquencée des items à l'ouverture du drawer ---------- */
html.sfc-js .sfc-mobile-drawer .sfc-mobile-menu > li {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 400ms ease, transform 400ms ease;
}
html.sfc-js .sfc-mobile-drawer.is-open .sfc-mobile-menu > li { opacity: 1; transform: none; }
.sfc-mobile-drawer.is-open .sfc-mobile-menu > li:nth-child(1) { transition-delay: 60ms; }
.sfc-mobile-drawer.is-open .sfc-mobile-menu > li:nth-child(2) { transition-delay: 110ms; }
.sfc-mobile-drawer.is-open .sfc-mobile-menu > li:nth-child(3) { transition-delay: 160ms; }
.sfc-mobile-drawer.is-open .sfc-mobile-menu > li:nth-child(4) { transition-delay: 210ms; }
.sfc-mobile-drawer.is-open .sfc-mobile-menu > li:nth-child(5) { transition-delay: 260ms; }
.sfc-mobile-drawer.is-open .sfc-mobile-menu > li:nth-child(6) { transition-delay: 310ms; }
.sfc-mobile-drawer.is-open .sfc-mobile-menu > li:nth-child(n+7) { transition-delay: 360ms; }

/* ---------- Accessibilité : reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .sfc-menu .sfc-caret,
    .sfc-menu .sub-menu > li,
    .sfc-mobile-menu .sfc-submenu-toggle .sfc-caret__icon,
    html.sfc-js .sfc-mobile-menu .menu-item-has-children > .sub-menu,
    html.sfc-js .sfc-mobile-drawer .sfc-mobile-menu > li { transition: none; }
    html.sfc-js .sfc-menu .sub-menu > li,
    html.sfc-js .sfc-mobile-drawer .sfc-mobile-menu > li { opacity: 1; transform: none; }
}

/* ============================================================
 * Phase 2 — Méga-menu multi-colonnes + icônes sous-items catégorie.
 * ============================================================ */

/* Méga-menu desktop : sous-menus longs (≥6) sur 2 colonnes (classe posée par nav.js). */
.sfc-menu .sub-menu.sfc-sub-menu--mega {
    display: grid;
    grid-template-columns: repeat(2, minmax(190px, 1fr));
    min-width: 460px;
    column-gap: 8px;
}

/* Icône SVG discrète devant les sous-items de catégorie produit (desktop + mobile). */
.sfc-menu .sub-menu a,
.sfc-mobile-menu .sub-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
}
.sfc-menu-item-icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    stroke-width: 1.5;
    color: var(--color-gold);
}
.sfc-mobile-menu .sfc-menu-item-icon { width: 18px; height: 18px; }

/* ============================================================
 * dev2 — État actif (orange) + micro-interaction bouton RDV.
 * (Menu plat : carets/accordéon ci-dessus = future-proof, inactifs sans sous-menus.)
 * ============================================================ */
.sfc-mobile-menu .current-menu-item > a,
.sfc-mobile-menu .current-menu-ancestor > a,
.sfc-mobile-menu .current_page_item > a { color: var(--color-gold); }

.sfc-menu .sfc-rdv-btn {
    transition: transform 200ms ease, background-color .3s ease, box-shadow .3s ease;
}
.sfc-menu .sfc-rdv-btn:hover { transform: translateY(-2px); }

/* ============================================================
 * Logo desktop — même animation 3D que le mobile (header.css) :
 * entrée en flip depuis la tranche + lévitation continue, carte
 * arrondie à ombre orange qui respire.
 * ============================================================ */
@media (min-width: 1025px) {
    .sfc-menu__logo .custom-logo-link {
        perspective: 900px;
    }
    .sfc-menu__logo .custom-logo-link img,
    .sfc-menu__logo .custom-logo-link img.custom-logo {
        border-radius: 10px;
        box-shadow: 0 18px 38px -16px rgba(247, 99, 9, 0.38);
        transform-origin: 50% 15%;
        backface-visibility: hidden;
        animation:
            sfc-logo-entrance 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both,
            sfc-logo-float 6s ease-in-out 1.4s infinite;
    }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
    .sfc-menu__logo .custom-logo-link img,
    .sfc-menu__logo .custom-logo-link img.custom-logo {
        animation: none;
        box-shadow: none;
    }
}

/* ============================================================
 * Menu desktop resserré tant que la barre n'a pas la place complète.
 * Complète le bloc « largeur de barre » de header.css : sous ~1750 px, la
 * barre est bornée par le viewport, il faut donc récupérer de la place.
 *  - l'emplacement réservé au logo passe de 300 à 230 px (l'image en fait 200,
 *    le logo lui-même est en position absolue : cette largeur ne sert qu'à
 *    empêcher les entrées de menu de passer dessous) ;
 *  - espacements, corps de texte, bouton RDV et sélecteur de langue resserrés.
 * ============================================================ */
@media (min-width: 1025px) and (max-width: 1750px) {
    .sfc-menu li.sfc-menu__logo { width: 230px; }
    .sfc-menu { gap: clamp(0.75rem, 1.2vw, 2rem); }
    .sfc-menu a {
        font-size: 12px;
        letter-spacing: 0.05em;
    }
    .sfc-menu__rdv { margin: 0 8px; }
    .sfc-menu .sfc-rdv-btn {
        padding: 12px 15px;
        gap: 8px;
        letter-spacing: 0.03em;
    }
    .sfc-lang-switcher {
        margin-left: 0.4rem;
        padding-left: 0.4rem;
    }
    .sfc-header__actions { gap: 0.35rem; }
}

/* Pendant du bloc 1025 → 1350 de header.css : le menu desktop cède la place
   au tiroir (nav.css est chargé après header.css, il gagne la cascade). */
@media (min-width: 1025px) and (max-width: 1350px) {
    .sfc-header__nav { display: none; }
}

/* ============================================================
 * Ancrage du logo suspendu (2.3.0)
 *
 * Le logo était en absolu par rapport à `.sfc-header__inner` (donc centré sur
 * la PAGE) alors que son emplacement réservé est au milieu du MENU : les deux
 * ne coïncidaient que par tâtonnement, et le logo recouvrait « Notre histoire »
 * dès que la largeur de barre changeait. On l'ancre désormais sur son propre
 * <li> : il tombe toujours pile dans le trou qui lui est réservé.
 * ============================================================ */
@media (min-width: 1025px) {
    .sfc-menu li.sfc-menu__logo { position: relative; }
}

@media (min-width: 1025px) and (max-width: 1750px) {
    .sfc-menu li.sfc-menu__logo { width: 250px; }
}