/* =========================================================
   STYLE.CSS - Feuille de style de "Chez So !"
   Direction artistique : street-food premium, chaleureuse,
   énergique, très gourmande. Palette bordeaux / crème / orange.
   ========================================================= */

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

/* =========================================================
   VARIABLES DE COULEURS ET DE POLICES
   ========================================================= */
:root {
    /* Palette "street-food premium" */
    --color-cream: #FFF7E8;
    --color-cream-alt: #FFEABE;
    --color-beige-soft: #F8F3E9;
    --color-surface: #FFFFFF;
    --color-brown: #482820;
    --color-brown-muted: #7F675C;
    --color-bordeaux: #920711;
    --color-bordeaux-dark: #5F070D;
    --color-bordeaux-deep: #2C0205;
    --color-orange: #FC9E25;
    --color-border: #EADFCF;

    /* Polices : Tanker pour les grands titres (impact, street-food),
       Inter pour le texte courant (lisible, y compris sur mobile) */
    --font-heading: "Tanker", "Arial Black", Impact, sans-serif;
    --font-body: "Inter", Arial, Helvetica, sans-serif;

    --shadow-card: 0 10px 25px rgba(46, 20, 14, 0.1);
    --shadow-capsule: 0 10px 30px rgba(46, 20, 14, 0.18);
}

html {
    scroll-behavior: smooth;
    /* Empêche tout débordement horizontal, quelle que soit la section */
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--color-brown);
    background-color: var(--color-cream);
    overflow-x: hidden;
}

/* Bloque le défilement le temps très bref de l'animation d'entrée
   (retiré par script.js dès qu'elle est terminée). */
body.intro-lock {
    overflow: hidden;
}

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

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* =========================================================
   BOUTONS
   ========================================================= */
.btn {
    display: inline-block;
    padding: 0.9rem 1.7rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.98rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
}

.btn-primary {
    background-color: var(--color-bordeaux);
    color: var(--color-cream);
}

.btn-primary:hover {
    background-color: var(--color-bordeaux-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(146, 7, 17, 0.35);
}

.btn-accent {
    background-color: var(--color-orange);
    color: var(--color-bordeaux-deep);
}

.btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(252, 158, 37, 0.4);
}

.btn-outline {
    background-color: transparent;
    color: inherit;
    border: 2px solid currentColor;
}

.btn-outline:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

/* =========================================================
   EN-TÊTE : NAVIGATION EN CAPSULE
   ========================================================= */
.site-header {
    position: fixed;
    top: 0.75rem;
    left: 0;
    right: 0;
    z-index: 200;
    padding: 0 1rem;
}

/* Plus de capsule blanche : un fond très sombre et translucide (jamais
   blanc), qui se fond presque dans le rouge du hero. Nécessaire pour
   que le texte clair reste lisible même une fois qu'on a défilé au-delà
   du hero (le header reste fixe sur toute la page). */
.nav-capsule {
    position: relative;
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 0.5rem 0.6rem 0.5rem 1rem;
}

/* Le fond flouté vit sur un ::before plutôt que directement sur
   ".nav-capsule" : un élément avec "backdrop-filter" devient le repère
   de positionnement de tout descendant en "position: fixed" (au lieu du
   viewport), ce qui cassait le panneau plein écran du menu mobile
   (".main-nav.open ul"). En le déplaçant ici, le rendu visuel de la
   capsule est identique, mais elle ne perturbe plus ses descendants. */
.nav-capsule::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(44, 2, 5, 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: inherit;
}

/* Logo texte : clair et affirmé, toujours à l'extrême gauche */
.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    letter-spacing: 0.01em;
    color: var(--color-cream);
    white-space: nowrap;
    flex-shrink: 0;
}

.logo-bang {
    color: var(--color-orange);
}

/* Logo burger (pictogramme seul) dans la navbar : bien calé à
   gauche, avec un léger halo orangé au survol (::before flouté, animé
   en opacité seulement -> pas de recalcul de mise en page). */
.logo-image {
    position: relative;
    display: flex;
    align-items: center;
}

.logo-image::before {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(252, 158, 37, 0.45) 0%, transparent 72%);
    filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .logo-image:hover::before {
        opacity: 1;
    }
}

.logo-image img {
    position: relative;
    width: 180px;
    height: auto;
    display: block;
}

/* --- Rappels discrets du logo burger, en aplat de couleur ---
   Le fichier fourni est un dessin clair sur fond transparent : on
   l'utilise comme masque pour le teinter selon le contexte (mask-image
   = alpha du PNG, background-color = la couleur voulue), plutôt que de
   l'afficher tel quel (invisible sur fond clair). */
.logo-mark {
    display: block;
    width: 34px;
    height: 34px;
    background-color: var(--color-bordeaux);
    opacity: 0.85;
    -webkit-mask-image: url("images/logo burger.png");
    mask-image: url("images/logo burger.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Repère visuel fort au-dessus du titre "Notre carte" : nettement plus
   grand que les autres usages du logo-mark, bien centré et espacé. */
.logo-mark-carte {
    width: 72px;
    height: 72px;
    opacity: 0.9;
    margin: 0 auto 1.25rem;
}

.logo-mark-fiche {
    width: 28px;
    height: 28px;
    margin: 0 auto 1rem;
}

/* Logo texte, utilisé une seule fois : remplace le titre de la fiche
   établissement, teinté en bordeaux comme les autres titres de section. */
.etablissement-logo-heading {
    display: flex;
    justify-content: center;
}

.logo-mark-texte {
    display: block;
    width: 220px;
    height: 110px;
    background-color: var(--color-bordeaux);
    -webkit-mask-image: url("images/logo texte chez so.png");
    mask-image: url("images/logo texte chez so.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 1.35rem;
}

.main-nav ul {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

/* Liens simples, sans fioriture : juste une légère variation d'opacité
   au survol, rien de plus */
.main-nav ul a {
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.main-nav ul a:hover {
    opacity: 1;
}

/* Bouton "Commander" : seul élément avec un vrai fond plein, pour
   rester le point d'attention de la navbar (display:inline-flex évite
   tout décalage vertical avec le reste). */
.btn-order {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-surface);
    color: var(--color-bordeaux);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.nav-order {
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
}

.btn-order:hover {
    background-color: var(--color-surface);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px) scale(1.03);
}

/* Bouton "burger" : caché sur ordinateur, visible sur mobile */
.menu-toggle {
    display: none;
    position: relative;
    /* Doit rester au-dessus du panneau plein écran (z-index 300, voir
       ".main-nav ul" en mobile) pour qu'on puisse toujours le voir et
       le toucher pour refermer le menu. */
    z-index: 301;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--color-cream);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

/* Le bouton se transforme en croix quand le menu est ouvert : on sait
   toujours comment le refermer, pas seulement en choisissant un lien. */
.main-nav.open ~ .menu-toggle span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.main-nav.open ~ .menu-toggle span:nth-child(2) {
    opacity: 0;
}

.main-nav.open ~ .menu-toggle span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

/* =========================================================
   SECTIONS GÉNÉRIQUES
   ========================================================= */
.section {
    padding: 4.5rem 1.5rem;
    scroll-margin-top: 6.5rem;
}

.section > h2 {
    text-align: center;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    color: var(--color-bordeaux);
    margin-bottom: 0.6rem;
}

.section-intro {
    text-align: center;
    color: var(--color-brown-muted);
    max-width: 560px;
    margin: 0 auto 2.5rem;
}

/* =========================================================
   ANIMATION D'APPARITION AU DÉFILEMENT
   ========================================================= */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* =========================================================
   ANIMATION D'ENTRÉE (INTRO)
   Petit écran plein page joué au chargement : le pictogramme burger
   s'assemble, le mot-symbole "Chez So" se révèle, puis l'ensemble
   rétrécit et glisse jusqu'à la position réelle du logo dans la
   navbar (calculée en JavaScript pour un raccord précis), avant de
   disparaître. Purement décoratif, ne retarde jamais l'accès au site
   (le reste de la page est déjà chargé et utilisable en dessous).
   ========================================================= */
.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(165deg, var(--color-bordeaux-deep) 0%, var(--color-bordeaux-dark) 100%);
}

/* Une fois le JavaScript prêt à retirer l'écran d'intro, il ajoute
   cette classe : fondu de tout le calque, sans bloquer les clics. */
.intro-overlay.is-leaving {
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Complètement retiré de la mise en page une fois l'animation finie. */
.intro-overlay.is-hidden {
    display: none;
}

.intro-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    /* Le JS applique ici un translate()+scale() calculé pour rejoindre
       pile la position du vrai logo de la navbar. */
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.intro-mark {
    width: 92px;
    height: auto;
    opacity: 0;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.4));
    animation: introAssemble 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

/* Le pictogramme "s'assemble" : il arrive légèrement décalé et flou
   d'intention, puis se stabilise pile à sa taille finale. */
@keyframes introAssemble {
    0% { opacity: 0; transform: scale(0.55) translateY(18px); }
    65% { opacity: 1; transform: scale(1.06) translateY(-3px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.intro-word {
    width: 190px;
    height: auto;
    clip-path: inset(0 100% 0 0);
    animation: introWipe 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

/* Révélation gauche -> droite : comme "Chez" est à gauche du mot-symbole
   et "So" en cursive à droite, ce simple balayage donne naturellement
   l'impression que "Chez" apparaît d'abord, puis que "So" se dessine. */
@keyframes introWipe {
    to { clip-path: inset(0 0 0 0); }
}

@media (max-width: 700px) {
    /* Version mobile plus courte : mêmes étapes, resserrées. */
    .intro-mark {
        width: 72px;
        animation-duration: 0.35s;
        animation-delay: 0.03s;
    }

    .intro-word {
        width: 150px;
        animation-duration: 0.3s;
        animation-delay: 0.2s;
    }
}

/* Respecte la préférence "moins d'animations" : l'écran d'intro est
   simplement sauté (le JS le masque immédiatement dans ce cas). */
@media (prefers-reduced-motion: reduce) {
    .intro-mark,
    .intro-word {
        animation: none;
        opacity: 1;
        clip-path: none;
    }
}

/* =========================================================
   1. HERO
   ========================================================= */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(165deg, var(--color-bordeaux) 0%, var(--color-bordeaux-dark) 100%);
    color: var(--color-cream);
    text-align: center;
    /* Le header est maintenant "fixed" (flottant sur le rouge, plus de
       bande crème derrière) : cet espace en haut sert juste à ne pas
       passer sous la capsule de navigation. */
    padding: 6.25rem 1.5rem 0;
}

/* Formes organiques décoratives, 100% CSS (dégradés radiaux flous) */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.hero-blob-1 {
    width: 500px;
    height: 500px;
    top: -160px;
    right: -120px;
    background: radial-gradient(circle, var(--color-orange) 0%, transparent 70%);
    opacity: 0.4;
}

.hero-blob-2 {
    width: 440px;
    height: 440px;
    bottom: -180px;
    left: -140px;
    background: radial-gradient(circle, var(--color-bordeaux-deep) 0%, transparent 70%);
    opacity: 0.7;
}

@keyframes heroImageFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* Calque ARRIÈRE : le titre seul, minimal. Le burger (z-index supérieur)
   vient volontairement chevaucher le bas de sa 3e ligne. */
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
}

/* Identification claire de "Chez So" au-dessus du grand titre */
.hero-brand-mark {
    display: block;
    /* Beaucoup plus gros qu'un simple repère : la marque doit se
       reconnaître immédiatement, sur tous les écrans. */
    height: clamp(64px, 9vw, 108px);
    width: auto;
    margin: 0 auto 1.25rem;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.hero-title {
    font-size: clamp(2.8rem, 6.6vw, 5rem);
    line-height: 1.05;
    text-transform: uppercase;
    margin-bottom: 0;
    text-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
}

/* Chaque ligne du titre est un bloc distinct : ça permet de savoir
   précisément laquelle le burger vient chevaucher (ici, la 3e). */
.hero-title-line {
    display: block;
}

.hero-title-accent {
    color: var(--color-orange);
}

/* Le burger : élément star, ÉNORME. Il remonte directement sous le
   titre (chevauchement franc) et chevauche la vague blanche en bas. */
.hero-visual {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin: -48px auto -175px;
    width: min(920px, 98vw);
    pointer-events: none;
}

/* Enveloppe de la vague. */
.hero-transition {
    position: relative;
    z-index: 1;
}

.hero-visual-glow {
    position: absolute;
    inset: 6% 10%;
    background: radial-gradient(circle, rgba(252, 158, 37, 0.5) 0%, transparent 70%);
    filter: blur(38px);
    z-index: 0;
    pointer-events: none;
}

/* Cette image est déjà composée sur un fond sombre en dégradé (studio) :
   on l'estompe légèrement sur les bords avec un masque CSS pour qu'elle
   se fonde dans le bordeaux du hero. Aucune ombre portée : rendu net,
   sans effet parasite (surtout sur mobile). */
.hero-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    -webkit-mask-image: radial-gradient(ellipse 60% 64% at 50% 46%, black 66%, transparent 95%);
    mask-image: radial-gradient(ellipse 60% 64% at 50% 46%, black 66%, transparent 95%);
    animation: heroImageFloat 6s ease-in-out infinite;
}

/* Badge Halal : version typographique simple, petite, discrète —
   non répétée ailleurs sur le site. */
/* Repris du petit badge circulaire visible sur l'enseigne du restaurant
   (calligraphie "حلال" dans un simple cercle fin) plutôt qu'un texte
   "HALAL" générique : plus fidèle à l'identité réelle, plus discret,
   sans effet sticker (pas de fond plein, pas d'ombre marquée). */
.hero-badge-halal {
    position: absolute;
    z-index: 3;
    top: 10%;
    right: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--color-cream);
    background-color: rgba(44, 2, 5, 0.22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 247, 232, 0.45);
    font-size: 1.3rem;
    line-height: 1;
}

/* Vague organique de transition, en bas du hero : plus haute au centre,
   pour vraiment "porter" le burger qui vient s'y superposer. */
.hero-wave {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 170px;
    margin-top: -1px;
}

.hero-wave path {
    fill: var(--color-surface);
}

/* Boutons : sous le burger, sur fond blanc, propres et centrés. */
.hero-cta {
    position: relative;
    z-index: 1;
    background-color: var(--color-surface);
    padding: 1.75rem 1.5rem 3.5rem;
}

.hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.hero-actions .btn {
    position: relative;
    overflow: hidden;
    padding: 1.05rem 2.1rem;
    font-size: 1.05rem;
    box-shadow: 0 10px 22px rgba(46, 20, 14, 0.16);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Léger effet de brillance qui traverse le bouton au survol */
.hero-actions .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%);
    transform: translateX(-120%);
    pointer-events: none;
}

/* Hover "premium" réservé aux appareils avec une vraie souris : on évite
   tout effet de survol collé sur mobile/tactile (pas de hover là-bas). */
@media (hover: hover) and (pointer: fine) {
    .hero-actions .btn:hover {
        transform: translateY(-4px) scale(1.035);
        filter: brightness(1.06);
    }

    .hero-actions .btn:hover::before {
        transform: translateX(120%);
        transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .hero-actions .btn-primary:hover {
        box-shadow: 0 22px 40px rgba(146, 7, 17, 0.4), 0 0 26px rgba(146, 7, 17, 0.25);
    }

    .hero-actions .btn-accent:hover {
        box-shadow: 0 22px 40px rgba(252, 158, 37, 0.45), 0 0 28px rgba(252, 158, 37, 0.35);
    }
}

/* Retour tactile net au clic/tap, sur toutes les plateformes */
.hero-actions .btn:active {
    transform: scale(0.97);
    transition: transform 0.15s ease;
}

.hero-cta .btn-outline {
    border-color: var(--color-bordeaux);
    color: var(--color-bordeaux);
}

/* =========================================================
   COMPOSANT REUTILISABLE : carte produit (menu-card)
   ========================================================= */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem;
    max-width: 1100px;
    margin: 0 auto;
}

.menu-card {
    background-color: var(--color-surface);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.menu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(46, 20, 14, 0.16);
}

.menu-card-image {
    aspect-ratio: 4 / 3;
    background-color: var(--color-cream-alt);
    overflow: hidden;
}

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

.menu-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.menu-card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.menu-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.menu-card-header h3 {
    font-size: 1.1rem;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-brown);
}

.menu-card-price {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-bordeaux);
    white-space: nowrap;
}

.menu-card-desc {
    color: var(--color-brown-muted);
    font-size: 0.95rem;
}

/* =========================================================
   4. NOTRE CARTE
   ========================================================= */
/* Beige très léger et doux : distingue la carte du hero blanc/rouge
   sans jamais tirer vers le jaune franc. */
.carte-section {
    background-color: var(--color-beige-soft);
}

.carte-intro {
    text-align: center;
    color: var(--color-brown-muted);
    margin-bottom: 2rem;
}

/* --- Catégories visuelles : grandes images détourées, aucun fond,
   directement sur le beige de la section. Chaque catégorie a sa propre
   petite signature d'animation au survol (voir plus bas). --- */
.carte-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    max-width: 1150px;
    margin: 0 auto 3.5rem;
}

.carte-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    font-family: var(--font-body);
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
}

/* Halo doux derrière l'image : invisible au repos, apparaît au survol
   et reste visible pour la catégorie active. C'est la seule "surface" —
   jamais de bloc blanc. */
.carte-tab-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.carte-tab-media::before {
    content: "";
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(252, 158, 37, 0.35) 0%, transparent 72%);
    filter: blur(18px);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.carte-tab-media img {
    position: relative;
    z-index: 1;
    width: 78%;
    height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(46, 20, 14, 0.16));
    /* État de repos explicite : chaque catégorie en repart toujours
       exactement d'ici, sans rotation résiduelle. */
    transform: translateY(0) scale(1) rotate(0deg);
    transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.carte-tab-label {
    position: relative;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--color-brown-muted);
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Petit repère sous le nom : discret au repos, plein pour la
   catégorie active — remplace le "contour de carte" d'avant. */
.carte-tab-label::after {
    content: "";
    display: block;
    width: 22px;
    height: 3px;
    margin: 0.4rem auto 0;
    border-radius: 999px;
    background-color: var(--color-bordeaux);
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover "premium" réservé aux appareils avec une vraie souris : on évite
   tout effet de survol collé sur mobile/tactile. Le zoom + halo sont
   communs à toutes les catégories ; chaque catégorie ajoute sa propre
   petite signature de mouvement. */
@media (hover: hover) and (pointer: fine) {
    .carte-tab:hover .carte-tab-media::before {
        opacity: 1;
        transform: scale(1);
    }

    /* Le halo et le filtre d'ombre restent communs à toutes les
       catégories, mais AUCUNE règle générique ne fixe plus de transform
       ici : chaque catégorie a sa propre règle dédiée ci-dessous, donc
       aucune rotation ne peut être héritée par erreur. */
    .carte-tab:hover .carte-tab-media img {
        filter: drop-shadow(0 22px 22px rgba(46, 20, 14, 0.22));
    }

    .carte-tab:hover .carte-tab-label {
        color: var(--color-bordeaux);
    }

    /* Burger : rotation vers la droite. */
    .carte-tab.category-burger:hover .carte-tab-media img {
        transform: translateY(-8px) scale(1.08) rotate(6deg);
    }

    /* Tacos : rotation vers la gauche. */
    .carte-tab.category-tacos:hover .carte-tab-media img {
        transform: translateY(-8px) scale(1.08) rotate(-6deg);
    }

    /* Bowls : rotation vers la droite. */
    .carte-tab.category-bowls:hover .carte-tab-media img {
        transform: translateY(-8px) scale(1.08) rotate(6deg);
    }

    /* Kebab : rotation vers la gauche. */
    .carte-tab.category-kebab:hover .carte-tab-media img {
        transform: translateY(-8px) scale(1.08) rotate(-6deg);
    }

    /* Tenders : rotation vers la droite. */
    .carte-tab.category-tenders:hover .carte-tab-media img {
        transform: translateY(-8px) scale(1.08) rotate(6deg);
    }
}

/* Sur tactile, il n'y a pas de vrai :hover : script.js ajoute cette
   classe temporaire au tap pour rejouer exactement la même animation
   que sur desktop (voir ".carte-tab[...]:hover" plus haut), puis la
   retire — ne s'applique jamais sur les appareils qui gèrent le vrai
   hover, donc le comportement desktop ci-dessus reste inchangé. */
.carte-tab.is-tapped .carte-tab-media::before {
    opacity: 1;
    transform: scale(1);
}

.carte-tab.is-tapped .carte-tab-media img {
    filter: drop-shadow(0 22px 22px rgba(46, 20, 14, 0.22));
}

.carte-tab.category-burger.is-tapped .carte-tab-media img {
    transform: translateY(-8px) scale(1.08) rotate(6deg);
}

.carte-tab.category-tacos.is-tapped .carte-tab-media img {
    transform: translateY(-8px) scale(1.08) rotate(-6deg);
}

.carte-tab.category-bowls.is-tapped .carte-tab-media img {
    transform: translateY(-8px) scale(1.08) rotate(6deg);
}

.carte-tab.category-kebab.is-tapped .carte-tab-media img {
    transform: translateY(-8px) scale(1.08) rotate(-6deg);
}

.carte-tab.category-tenders.is-tapped .carte-tab-media img {
    transform: translateY(-8px) scale(1.08) rotate(6deg);
}

.carte-tab:active .carte-tab-media img {
    transform: scale(0.96);
    transition: transform 0.15s ease;
}

.carte-tab.active .carte-tab-media::before {
    opacity: 0.8;
    transform: scale(1);
}

.carte-tab.active .carte-tab-media img {
    transform: translateY(-4px) scale(1.05);
}

.carte-tab.active .carte-tab-label {
    color: var(--color-bordeaux);
    font-weight: 600;
}

.carte-tab.active .carte-tab-label::after {
    opacity: 1;
    transform: scaleX(1);
}

.carte-note {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2rem;
    color: var(--color-brown);
    background-color: var(--color-surface);
    border-radius: 999px;
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem;
}

.halal-note {
    max-width: 220px;
    font-weight: 700;
}

.carte-placeholder {
    text-align: center;
    color: var(--color-brown-muted);
    font-style: italic;
    padding: 2rem 1rem;
}

/* Catégorie sans formule dédiée pour l'instant (ex. Tenders) : on montre
   quand même le visuel du produit, avec un message clair. */
.carte-placeholder-visual {
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
}

.carte-placeholder-visual img {
    width: 220px;
    margin: 0 auto 1.5rem;
    filter: drop-shadow(0 16px 20px rgba(46, 20, 14, 0.18));
}

/* --- Composeur Tacos & Bowls --- */
.tacos-sizes {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.tacos-size {
    background-color: var(--color-surface);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.75rem;
    text-align: center;
    min-width: 140px;
}

.tacos-size-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-bordeaux);
}

.tacos-size-sub {
    display: block;
    font-size: 0.85rem;
    color: var(--color-brown-muted);
    margin-bottom: 0.4rem;
}

.tacos-size-price {
    display: block;
    font-weight: 700;
    color: var(--color-brown);
}

.tacos-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    max-width: 1100px;
    margin: 2rem auto 0;
}

.tacos-step {
    background-color: var(--color-surface);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
}

.tacos-step h4 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-bordeaux);
    margin-bottom: 1rem;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip-list li {
    background-color: var(--color-cream-alt);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    color: var(--color-brown);
}

.chip-extra {
    color: var(--color-bordeaux);
    font-weight: 700;
}

/* =========================================================
   5. HORAIRES & ADRESSE
   ========================================================= */
.horaires-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.horaires-card {
    background-color: var(--color-surface);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    padding: 1.75rem;
}

.horaires-status {
    display: inline-block;
    font-weight: 700;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background-color: var(--color-cream-alt);
    color: var(--color-brown);
    margin-bottom: 1.25rem;
}

.horaires-status.is-open {
    background-color: #DCEFD9;
    color: #2C6B2F;
}

.horaires-status.is-closed {
    background-color: #F3DCDC;
    color: var(--color-bordeaux-dark);
}

.horaires-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

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

.horaires-list li span:first-child {
    font-weight: 600;
}

.horaires-list li.is-today {
    color: var(--color-bordeaux);
    font-weight: 700;
}

/* Fiche établissement : adresse + téléphone, côte à côte */
.etablissement-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    text-align: left;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.etablissement-info p {
    color: var(--color-brown-muted);
    line-height: 1.5;
}

.etablissement-info strong {
    display: block;
    color: var(--color-bordeaux);
    margin-bottom: 0.1rem;
}

.etablissement-info a {
    color: var(--color-brown-muted);
}

.etablissement-info a:hover {
    color: var(--color-bordeaux);
}

/* Fiche établissement : sur place / à emporter / livraison, en résumé */
.etablissement-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.5rem 0;
}

.etablissement-services span {
    background-color: var(--color-cream-alt);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-brown);
}

.horaires-card .btn {
    margin-top: 0.5rem;
}

/* Colonne de droite : le plan, puis juste en dessous la photo de
   l'établissement, rangés l'un sous l'autre à côté du bloc horaires. */
.horaires-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.horaires-map {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.horaires-map iframe {
    width: 100%;
    height: 260px;
    border: 0;
    border-radius: 18px;
    box-shadow: var(--shadow-card);
}

.horaires-map .btn {
    align-self: flex-start;
    border-color: var(--color-bordeaux);
    color: var(--color-bordeaux);
}

/* Petite carte photo + texte, même habillage (fond blanc, ombre,
   coins arrondis) que le bloc horaires pour un ensemble cohérent. */
.horaires-photo {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background-color: var(--color-surface);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    padding: 1.25rem;
    text-align: left;
}

.horaires-photo-image {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    border-radius: 14px;
    overflow: hidden;
}

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

.horaires-photo-text h3 {
    color: var(--color-bordeaux);
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
}

.horaires-photo-text p {
    color: var(--color-brown-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* =========================================================
   6. PIED DE PAGE
   ========================================================= */
.site-footer {
    background-color: var(--color-bordeaux-deep);
    color: var(--color-cream-alt);
    padding: 3.5rem 1.5rem 1.5rem;
}

.footer-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 247, 232, 0.15);
}

.footer-logo {
    color: var(--color-cream);
    margin-bottom: 0.75rem;
}

.footer-brand p {
    color: var(--color-cream-alt);
    opacity: 0.85;
    font-size: 0.95rem;
}

.footer-col h4 {
    font-family: var(--font-body);
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--color-cream);
}

.footer-col p {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-bottom: 0.4rem;
}

.footer-col a:hover {
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* =========================================================
   RESPONSIVE : TABLETTE
   ========================================================= */
@media (max-width: 960px) {
    .hero {
        padding: 5.5rem 1.25rem 0;
    }

    .hero-visual {
        width: min(600px, 94vw);
        margin-top: -16px;
        margin-bottom: -125px;
    }

    .carte-tabs {
        grid-template-columns: repeat(3, 1fr);
        max-width: 560px;
    }

    .tacos-steps {
        grid-template-columns: 1fr;
    }

    .horaires-grid {
        grid-template-columns: 1fr;
    }

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

/* =========================================================
   RESPONSIVE : MOBILE
   ========================================================= */
@media (max-width: 700px) {

    .site-header {
        top: 0.5rem;
        padding: 0 0.75rem;
    }

    .nav-capsule {
        padding: 0.45rem 0.5rem 0.45rem 0.75rem;
        /* Resserré : logo + bouton Commander + bouton burger doivent
           tenir sur une seule ligne, même sur les écrans les plus
           étroits (375px), sans jamais déborder. */
        gap: 0.6rem;
    }

    .logo-image img {
        width: 128px;
        /* Le logo ne doit jamais forcer la capsule à déborder si un
           écran est plus étroit que prévu : il peut rétrécir avant le
           bouton Commander ou le bouton burger. */
        flex-shrink: 1;
        min-width: 0;
    }

    /* Une fois qu'on a défilé un peu, la capsule se fait légèrement
       plus présente (fond plus opaque, ombre discrète) pour rester
       bien lisible par-dessus n'importe quelle section — sans jamais
       devenir lourde. Uniquement sur mobile : le rendu desktop ne
       change pas. */
    .nav-capsule.is-scrolled {
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
    }

    .nav-capsule.is-scrolled::before {
        background-color: rgba(44, 2, 5, 0.62);
    }

    /* On affiche le bouton burger */
    .menu-toggle {
        display: flex;
    }

    /* Le logo reste à gauche ; "Commander" et le bouton burger se
       resserrent à droite (collés l'un à l'autre) au lieu d'être
       espacés uniformément dans toute la capsule. */
    .main-nav {
        margin-left: auto;
    }

    /* Le bouton "Commander" doit rester accessible en permanence dans la
       barre, même menu fermé : seule la LISTE de liens (<ul>) devient un
       panneau plein écran, pas tout ".main-nav". ".main-nav" lui-même
       garde donc son display:flex hérité (règle de base plus haut) et
       continue simplement à aligner "ul" + le bouton dans la capsule. */
    .main-nav ul {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.75rem;

        position: fixed;
        inset: 0;
        background-color: var(--color-bordeaux);
        padding: 2rem;
        z-index: 300;
    }

    /* Quand on ajoute la classe "open" (via JavaScript), le menu s'affiche */
    .main-nav.open ul {
        display: flex;
    }

    .main-nav ul a {
        color: var(--color-cream);
        font-size: 1.4rem;
        font-family: var(--font-heading);
        font-weight: 400;
    }

    .main-nav ul a:hover {
        color: var(--color-orange);
    }

    /* Version compacte : le bouton vit maintenant en permanence dans la
       capsule, à côté du logo et du bouton burger, pas dans un grand
       panneau centré. */
    .nav-order {
        padding: 0.55rem 1.1rem;
        font-size: 0.85rem;
    }

    /* Titres plus confortables à lire sur petit écran */
    .hero {
        padding: 5rem 1.1rem 0;
    }

    .hero-title {
        font-size: clamp(2.1rem, 10.5vw, 2.8rem);
    }

    .hero-visual {
        width: min(400px, 90vw);
        margin-top: -26px;
        margin-bottom: -84px;
    }

    .hero-badge-halal {
        top: 6%;
        right: 6%;
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .hero-wave {
        height: 100px;
    }

    .hero-cta {
        padding: 1.5rem 1.25rem 3rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        text-align: center;
    }

    .section {
        padding: 3.5rem 1.25rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    /* Sur petit écran, la photo passe au-dessus du texte plutôt
       qu'à côté (trop peu de place pour une vraie ligne). */
    .horaires-photo {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .horaires-photo-image {
        width: 100%;
        height: 170px;
    }

    /* Recadrage remonté pour laisser apparaître l'enseigne (haut de la
       photo), coupée par le recadrage centré par défaut. */
    .horaires-photo-image img {
        object-position: 50% 15%;
    }

    /* Une seule colonne : chaque produit prend toute la largeur */
    .menu-grid {
        grid-template-columns: 1fr;
    }

    .carte-tabs {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 1rem;
        max-width: 320px;
    }

    .carte-tab-label {
        font-size: 0.95rem;
    }

    .tacos-sizes {
        gap: 0.75rem;
    }

    .tacos-size {
        flex: 1 1 calc(33% - 0.75rem);
        min-width: 0;
        padding: 1rem 0.5rem;
    }
}