/* ============================================
   RESTAURANT SULTANA — page d'accueil
   Mobile d'abord. Couleurs du logo (bordeaux + or) ; la chaleur vient des photos des plats.
   ============================================ */

:root {
    /* Couleurs */
    --bordeaux: #6E1423;          /* calligraphie du logo */
    --bordeaux-deep: #4A0E18;
    --bordeaux-night: #2A070D;    /* fond de l'ouverture et du pied de page */
    --gold: #C9A961;              /* couronne du logo */
    --gold-soft: #EAD49C;
    --saffron: #E4AE4C;           /* boutons principaux */
    --saffron-hover: #D49A33;
    --paper: #FFFCF6;             /* blanc chaulé des maisons de Djerba */
    --sand: #F6EEDF;
    --ink: #2A1A12;
    --ink-soft: #6B5544;
    --line: #E8DCC6;
    --wa: #148447;                /* vert WhatsApp foncé : texte blanc lisible (contraste 4,75:1) */
    --wa-hover: #11743D;

    /* Typographie */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    /* Jost : géométrique dans l'esprit de Futura. Lettres plus petites qu'Inter à taille égale :
       les tailles de texte ci-dessous sont d'un cran au-dessus. Futura / Century Gothic en secours. */
    --font-body: 'Jost', 'Futura', 'Century Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Mise en page */
    --gutter: 20px;
    --container-max: 1200px;
    --header-h: 64px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

html[lang="ar"] {
    --font-display: 'Cairo', 'Jost', sans-serif;
    --font-body: 'Cairo', 'Jost', sans-serif;
}
/* L'arabe est une écriture liée : aucun espacement entre les lettres, sinon les liaisons se cassent */
html[lang="ar"] body * { letter-spacing: 0 !important; }

/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top));
}
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
/* « clip » coupe le débordement sans créer de zone de défilement : les onglets collants restent collants */
@supports (overflow: clip) {
    html, body { overflow-x: clip; }
}
/* height: auto : sinon l'attribut height des photos (800, 729…) l'emporte sur les proportions voulues */
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin: 0 0 12px; }
p { margin: 0 0 14px; }
ul { list-style: none; padding: 0; margin: 0; }
[hidden] { display: none !important; }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

/* ===== BOUTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font: 500 1.0625rem/1.2 var(--font-body);
    letter-spacing: .02em;
    white-space: nowrap;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn-lg { min-height: 54px; padding-inline: 28px; font-size: 1.125rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--saffron); color: var(--bordeaux-night); }
.btn-primary:hover { background: var(--saffron-hover); }
.btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.btn-outline { color: var(--ink); border-color: var(--line); background: #fff; }
.btn-outline:hover { border-color: var(--ink-soft); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-hover); }

/* ===== EN-TÊTE ===== */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: calc(var(--header-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* Voile sombre en haut de la photo, pour lire le logo et les liens */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 -48px 0;
    background: linear-gradient(to bottom, rgba(42, 7, 13, .6), rgba(42, 7, 13, 0));
    pointer-events: none;
    transition: opacity .25s var(--ease);
}
.site-header.scrolled {
    background: rgba(255, 252, 246, .96);
    box-shadow: 0 1px 0 var(--line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.site-header.scrolled::before { opacity: 0; }
.site-header.nav-open { background: transparent; box-shadow: none; }

.header-inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.brand {
    position: relative;
    z-index: 2;
    margin-inline-end: auto;
    display: flex;
    align-items: center;
    min-height: 44px;
}
.brand-logo {
    height: 42px;
    width: auto;
    filter: brightness(0) invert(1);
    transition: filter .25s var(--ease);
}
.scrolled .brand-logo { filter: none; }
.nav-open .brand-logo { filter: brightness(0) invert(1); }

.header-tools {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-book { display: none; }

/* Bouton menu (mobile) */
.menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.menu-toggle span {
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .25s var(--ease), opacity .2s var(--ease), background-color .25s var(--ease);
}
.scrolled .menu-toggle span { background: var(--ink); }
.menu-toggle.open span { background: #fff; }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu plein écran (mobile) */
.nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    padding: calc(var(--header-h) + env(safe-area-inset-top) + 16px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
    background: var(--bordeaux-night);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s var(--ease), visibility 0s linear .3s;
}
html[dir="rtl"] .nav { transform: translateX(-100%); }
.nav.open { transform: none; visibility: visible; transition-delay: 0s; }
.nav-links { display: flex; flex-direction: column; gap: 4px; }
.nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
}
.nav-links a:hover { color: var(--gold-soft); }
.nav-links a[aria-current="page"] { color: var(--gold-soft); }
.nav-book { align-self: flex-start; min-height: 54px; padding-inline: 32px; font-size: 1.125rem; }
.nav-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}
.nav-quick a { color: var(--gold-soft); min-height: 44px; display: inline-flex; align-items: center; font-weight: 500; }

/* ===== SÉLECTEUR DE LANGUE ===== */
.lang { position: relative; }
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 10px 0 8px;
    border-radius: 999px;
    background: rgba(20, 4, 8, .35);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    font: 500 .9375rem/1 var(--font-body);
    letter-spacing: .04em;
    transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.scrolled .lang-btn { background: #fff; color: var(--ink); border-color: var(--line); }
.nav-open .lang-btn { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .28); }
.lang-caret { width: 16px; height: 16px; }
.flag-svg { display: block; overflow: hidden; border-radius: 50%; flex: none; }
.flag-svg svg { display: block; width: 100%; height: 100%; }
.lang-btn .flag-svg { width: 24px; height: 24px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 200px;
    padding: 6px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(42, 7, 13, .25);
}
.lang-flag {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--ink);
    font: 500 1.0625rem/1.2 var(--font-body);
    text-align: start;
}
.lang-flag:hover, .lang-flag:focus-visible { background: var(--sand); }
.lang-flag.active { background: var(--sand); font-weight: 600; }
.lang-flag .flag-svg { width: 24px; height: 24px; box-shadow: 0 0 0 1px var(--line); }
.lang-flag[lang="ar"] { font-family: 'Cairo', sans-serif; }

/* ===== OUVERTURE ===== */
.hero {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: #fff;
    background: var(--bordeaux-night);
}
/* Photo + vapeur : un même cadre, voilé en bas (mobile) ou à gauche (ordinateur) */
.hero-media {
    position: absolute;
    inset: 0 0 auto 0;
    height: 80%;
    z-index: -1;
    overflow: hidden;
}
.hero-photo { position: absolute; inset: 0; }
.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
}
.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(42, 7, 13, 0) 30%, rgba(42, 7, 13, .7) 68%, var(--bordeaux-night) 100%);
}
.hero-inner {
    padding-top: calc(var(--header-h) + 24px);
    padding-bottom: calc(36px + env(safe-area-inset-bottom));
}
.hero-content {
    max-width: 36rem;
    text-shadow: 0 1px 18px rgba(42, 7, 13, .45);
}
.hero-actions .btn { text-shadow: none; }
.hero-title {
    font-size: clamp(3rem, 14vw, 6.75rem);
    font-weight: 650;
    line-height: .92;
    letter-spacing: -.02em;
    margin: 0 0 18px;
    text-wrap: balance;
}
.hero-title span { display: block; }
html[lang="ar"] .hero-title { line-height: 1.2; letter-spacing: 0; font-weight: 700; }
.hero-lede {
    font-size: 1.125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
    max-width: 32rem;
    margin-bottom: 18px;
}
.hero-facts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 26px;
    font-size: 1.03rem;
}
.status { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.status-dot {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: #B8A9A0;
    box-shadow: 0 0 0 4px rgba(184, 169, 160, .2);
}
.status.is-open .status-dot { background: #4ADE80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .22); }
.status.is-closing .status-dot { background: #FBBF24; box-shadow: 0 0 0 4px rgba(251, 191, 36, .22); }
.rating { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: #fff; }
.rating:hover .rating-text { text-decoration: underline; text-underline-offset: 3px; }
.hero-actions { display: grid; gap: 10px; }

/* Étoiles (note Google) */
.stars {
    position: relative;
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 2px;
    white-space: nowrap;
}
.stars-bg { color: var(--line); }
.hero .stars-bg { color: rgba(255, 255, 255, .3); }
.stars-fill {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    color: #FBBC05;
}
html[dir="rtl"] .stars { direction: ltr; }

/* ===== BANDEAU QUI DÉFILE ===== */
.ticker {
    position: relative;
    overflow: hidden;
    direction: ltr;                      /* même sens de défilement dans toutes les langues */
    background: var(--bordeaux);
    color: var(--gold-soft);
    padding-block: 15px 23px;           /* 8 px du bas : le rebord de bol */
}
/* Bord : les tirets rouges du rebord des bols peints tunisiens */
.ticker::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 8px;
    background: repeating-linear-gradient(90deg, var(--bordeaux-deep) 0 14px, var(--paper) 14px 22px);
}
.ticker-track { display: flex; width: max-content; }
.ticker-group { display: flex; align-items: center; flex: none; }
.ticker-group span {
    padding-inline: 20px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.ticker-group span[lang="ar"] { font-family: 'Cairo', sans-serif; font-size: 1.3rem; }
/* Séparateur : l'étoile à huit branches des motifs de Djerba */
.ticker-group i {
    flex: none;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0l3 5.2 5.8-1.6-1.6 5.8L24 12l-5.2 3 1.6 5.8-5.8-1.6L12 24l-3-5.2-5.8 1.6 1.6-5.8L0 12l5.2-3-1.6-5.8 5.8 1.6z' fill='%23C9A961'/></svg>") center / contain no-repeat;
}

/* ===== SECTIONS ===== */
.section { padding-block: 56px; }
.section-head { max-width: 40rem; margin-bottom: 28px; }
.section-head h2,
.about-text h2,
.contact-info h2 {
    font-size: clamp(2rem, 8vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: -.01em;
    color: var(--bordeaux);
    margin-bottom: 10px;
    text-wrap: balance;
}
html[lang="ar"] .section-head h2,
html[lang="ar"] .about-text h2,
html[lang="ar"] .contact-info h2 { line-height: 1.3; letter-spacing: 0; }
.section-sub { color: var(--ink-soft); font-size: 1.125rem; line-height: 1.55; margin: 0; }
.section-head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 32px;
    max-width: none;
}
.link-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--bordeaux);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
}
.link-more:hover { color: var(--bordeaux-deep); }

/* ===== SPÉCIALITÉS ===== */
.specials { background: var(--paper); padding-top: 64px; }
.specials-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(76%, 300px);
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 8px;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
}
.specials-track::-webkit-scrollbar { display: none; }
.dish { scroll-snap-align: start; min-width: 0; }
.dish-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    background: var(--sand);
    margin-bottom: 14px;
}
.dish-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.dish-photo.is-empty,
.menu-item-img.is-empty {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M20 6l3.6 8.2 8.9.8-6.7 5.9 2 8.7L20 25l-7.8 4.6 2-8.7L7.5 15l8.9-.8z' fill='none' stroke='%236E1423' stroke-width='1.6' stroke-linejoin='round' opacity='.45'/></svg>") center / 40% no-repeat,
        linear-gradient(135deg, var(--gold-soft), var(--gold));
}
.dish-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dish-name { font-size: 1.375rem; line-height: 1.15; margin: 0; color: var(--ink); }
.dish-price { flex: none; font-size: 1.0625rem; font-weight: 600; color: var(--bordeaux); white-space: nowrap; }
.dish-price small, .menu-item-price small { font-size: .875rem; font-weight: 400; color: var(--ink-soft); }
.dish-desc { margin: 6px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.sk-line { height: 14px; width: 70%; border-radius: 7px; background: var(--sand); margin-top: 10px; }
.sk-short { width: 45%; }

/* ===== CARTE ===== */
.menu-section { background: var(--sand); }
.menu-tabs {
    position: sticky;
    top: calc(var(--header-h) + env(safe-area-inset-top));
    z-index: 5;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--gutter)) 4px;
    padding: 10px var(--gutter);
    background: var(--sand);
    scrollbar-width: none;
}
.menu-tabs::-webkit-scrollbar { display: none; }
.tab {
    flex: none;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font: 500 1rem/1 var(--font-body);
    letter-spacing: .01em;
    white-space: nowrap;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.tab:hover { border-color: var(--gold); }
.tab.active { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }

.menu-grid { display: grid; grid-template-columns: 1fr; min-height: 200px; }
.menu-item {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.menu-item-img {
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 14px;
    object-fit: cover;
    background: var(--line);
}
.menu-item-body { min-width: 0; }
.menu-item-body h3 { font-size: 1.1875rem; line-height: 1.2; margin: 0 0 3px; color: var(--ink); }
.menu-item-body p {
    margin: 0 0 4px;
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.menu-item-price { font-size: 1.0625rem; font-weight: 600; color: var(--bordeaux); white-space: nowrap; }

/* Carte : chargement, erreur, vide */
.menu-status {
    grid-column: 1 / -1;
    margin-top: 12px;
    padding: 40px 20px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--line);
}
.menu-status p { max-width: 26rem; margin: 0 auto 20px; line-height: 1.55; }
.menu-loading p { color: var(--ink-soft); margin: 0 auto; }
.spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 14px;
    border: 3px solid var(--sand);
    border-top-color: var(--bordeaux);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.menu-error-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.menu-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); padding: 32px 0; }
.menu-notice {
    max-width: 40rem;
    margin: 8px 0 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #FFF6DE;
    border: 1px solid var(--gold-soft);
    font-size: .95rem;
}
.menu-order { margin-top: 32px; }
.menu-order-note { margin: 12px 0 0; max-width: 28rem; font-size: .95rem; color: var(--ink-soft); }

/* ===== NOTRE HISTOIRE ===== */
.about-section { background: var(--bordeaux-deep); color: #fff; padding-top: 0; }
.about-grid { display: grid; gap: 32px; align-items: center; }
.about-photo { margin-inline: calc(-1 * var(--gutter)); overflow: hidden; }
.about-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-text h2 { color: var(--gold-soft); }
.about-text p { color: rgba(255, 255, 255, .86); font-size: 1.125rem; line-height: 1.7; max-width: 34rem; }
.about-text p:last-child { margin-bottom: 0; }

/* ===== CONTACT + RÉSERVATION ===== */
.contact-section { background: var(--paper); }
.contact-grid { display: grid; gap: 40px; }
.info-list { margin-top: 20px; border-top: 1px solid var(--line); }
.info-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
a.info-row:hover .info-value { color: var(--bordeaux); }
.info-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(110, 20, 35, .08);
    color: var(--bordeaux);
}
.info-icon svg { width: 22px; height: 22px; }
.info-icon--wa { background: rgba(20, 132, 71, .12); color: var(--wa); }
.info-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.info-label { font-size: .9rem; letter-spacing: .01em; color: var(--ink-soft); }
.info-value { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; transition: color .2s var(--ease); }
.info-chevron { flex: none; width: 20px; height: 20px; color: var(--ink-soft); }
html[dir="rtl"] .info-chevron { transform: scaleX(-1); }
.status--light { margin-top: 6px; font-size: .95rem; color: var(--ink); }
.status--light.is-open .status-dot { background: #1F9D55; box-shadow: 0 0 0 4px rgba(31, 157, 85, .15); }
.status--light.is-closing .status-dot { background: #D97706; box-shadow: 0 0 0 4px rgba(217, 119, 6, .15); }

.contact-form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 24px 20px;
    box-shadow: 0 24px 48px -32px rgba(42, 7, 13, .35);
}
.contact-form h3 { font-size: 1.75rem; color: var(--bordeaux); margin-bottom: 6px; }
.form-sub { font-size: 1rem; color: var(--ink-soft); margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.form-row--3 label:first-child { grid-column: 1 / -1; }
.contact-form label { display: block; margin-bottom: 14px; min-width: 0; }
.contact-form label > span { display: block; margin-bottom: 6px; font-size: .9375rem; font-weight: 500; color: var(--ink-soft); }
.contact-form input,
.contact-form select,
.contact-form textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    font: 17px/1.4 var(--font-body);   /* 16 px minimum : pas de zoom automatique sur iPhone */
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.contact-form textarea { resize: vertical; min-height: 88px; }
.contact-form select {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: 38px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%236B5544' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: right 12px center;
}
html[dir="rtl"] .contact-form select { background-position: left 12px center; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--bordeaux);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(110, 20, 35, .14);
}
.contact-form .btn { margin-top: 4px; }

/* ===== NOUS TROUVER ===== */
.map-section { background: var(--sand); }
.map-layout { display: grid; gap: 20px; align-items: start; }
.map-side .section-head { margin-bottom: 20px; }
.reviews-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
}
.reviews-top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.google-logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 12px;
    border-radius: 50%;
    background: var(--sand);
}
.google-logo svg { width: 100%; height: 100%; display: block; }
.reviews-score { display: flex; align-items: center; gap: 10px; }
.google-score { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1; }
.google-count { font-size: 1rem; color: var(--ink-soft); }
.google-count strong { color: var(--ink); }
.reviews-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--bordeaux);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}
.reviews-link--soft { font-weight: 500; color: var(--ink-soft); }
.map-wrap {
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: #fff;
}
.map-frame { display: block; width: 100%; height: 320px; border: 0; }
.map-directions { border-radius: 0; min-height: 56px; }

/* ===== PIED DE PAGE ===== */
/* La fiche du restaurant (écrite comme sur Google) et les liens vers toutes les pages */
.site-footer {
    position: relative;
    background: var(--bordeaux-night);
    color: rgba(255, 255, 255, .78);
    padding-block: 56px calc(104px + env(safe-area-inset-bottom));   /* place pour la barre d'actions */
}
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 8px;
    background: repeating-linear-gradient(90deg, var(--bordeaux) 0 14px, var(--sand) 14px 22px);
}
.footer-grid { display: grid; gap: 40px; }
.footer-logo { height: 56px; width: auto; filter: brightness(0) invert(1); }
.footer-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: #fff; margin: 14px 0 6px; }
.footer-nap { font-style: normal; line-height: 1.65; }
.footer-nap a { color: rgba(255, 255, 255, .86); }
.footer-nap a:hover { color: var(--gold-soft); }
.footer-since { margin: 12px 0 0; font-size: .95rem; color: rgba(255, 255, 255, .6); }
.footer-social { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 8px 0 0; }
.footer-social a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-soft); font-weight: 500; }
.footer-social a:hover { color: #fff; }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.footer-h { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: .01em; line-height: 1.3; color: #fff; margin: 0 0 6px; }
.footer-cols a { display: inline-flex; align-items: center; min-height: 44px; font-size: .98rem; line-height: 1.3; color: rgba(255, 255, 255, .72); }
.footer-cols a:hover { color: var(--gold-soft); }
.footer-bottom { display: grid; gap: 10px; margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; font-size: .95rem; }
.footer-langs span { color: rgba(255, 255, 255, .6); }
.footer-langs ul { display: flex; flex-wrap: wrap; gap: 0 16px; }
.footer-langs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-soft); }
.footer-langs a:hover { color: #fff; }
.footer-langs a[lang="ar"] { font-family: "Cairo", sans-serif; }
.footer-copy { margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .55); }
.footer-copy a { color: rgba(255, 255, 255, .72); text-decoration: underline; text-underline-offset: 3px; }

/* Lien « aller au contenu » : visible seulement au clavier */
.skip-link { position: absolute; top: -100px; inset-inline-start: 8px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--saffron); color: var(--bordeaux-night); font-weight: 600; }
.skip-link:focus { top: 8px; }

/* Liens ajoutés dans l'accueil vers les nouvelles pages */
.link-inline { color: var(--bordeaux); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.link-more--light { color: var(--gold-soft); }
.link-more--light:hover { color: #fff; }

/* ===== BARRE D'ACTIONS (mobile) ===== */
.action-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 252, 246, .97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 -10px 30px rgba(42, 7, 13, .14);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .28s var(--ease), visibility 0s linear .28s;
}
.action-bar.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    border-radius: 14px;
    color: var(--bordeaux);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.1;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.action-btn:active { background: var(--sand); }
.action-btn--wa { background: var(--wa); color: #fff; }
.action-btn--wa:active { background: var(--wa-hover); }

/* Bulle WhatsApp : ordinateur seulement (sur mobile, la barre d'actions la remplace) */
.fab-whatsapp { display: none; }

/* ===== FOCUS CLAVIER ===== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--saffron);
    outline-offset: 2px;
}
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: none; }

/* ============================================
   TABLETTE
   ============================================ */
@media (min-width: 560px) {
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .form-row--3 { grid-template-columns: 1.4fr 1fr 1fr; }
    .form-row--3 label:first-child { grid-column: auto; }
}

@media (min-width: 760px) {
    :root { --gutter: 32px; }
    .specials-track {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
        overflow: visible;
        margin-inline: 0;
        padding: 0;
        gap: 40px 28px;
    }
    .specials-track[data-count="3"],
    .specials-track[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
    .dish-media { aspect-ratio: 1; }
    .menu-grid { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
    .contact-form { padding: 32px; }
}

/* ============================================
   ORDINATEUR
   ============================================ */
@media (min-width: 960px) {
    :root { --header-h: 80px; }

    .brand-logo { height: 50px; }
    .menu-toggle { display: none; }
    .header-book { display: inline-flex; min-height: 44px; padding: 10px 22px; font-size: 1rem; }

    .nav {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 28px;
        padding: 0;
        margin-inline-end: 12px;
        background: none;
        transform: none;
        visibility: visible;
        transition: none;
    }
    .nav-links { flex-direction: row; gap: 26px; }
    .nav-links a { min-height: 44px; font: 500 1.0625rem/1 var(--font-body); letter-spacing: .02em; color: #fff; }
    .nav-links a:hover { color: var(--gold-soft); }
    .scrolled .nav-links a { color: var(--ink); }
    .scrolled .nav-links a:hover { color: var(--bordeaux); }
    .nav-book, .nav-quick { display: none; }

    /* Ouverture : texte à gauche sur le bordeaux, photo à droite qui s'y fond */
    .hero { min-height: max(620px, min(100svh, 900px)); align-items: center; }
    .hero-media { inset: 0 0 0 auto; width: 60%; height: 100%; }
    html[dir="rtl"] .hero-media { inset: 0 auto 0 0; }
    .steam { left: 30%; top: 8%; width: 42%; height: 46%; }
    .hero-photo img { object-position: 50% 50%; }
    .hero-media::after {
        background:
            linear-gradient(to right, var(--bordeaux-night) 0%, rgba(42, 7, 13, .55) 22%, rgba(42, 7, 13, 0) 50%),
            linear-gradient(to top, rgba(42, 7, 13, .35), rgba(42, 7, 13, 0) 30%);
    }
    html[dir="rtl"] .hero-media::after {
        background:
            linear-gradient(to left, var(--bordeaux-night) 0%, rgba(42, 7, 13, .55) 22%, rgba(42, 7, 13, 0) 50%),
            linear-gradient(to top, rgba(42, 7, 13, .35), rgba(42, 7, 13, 0) 30%);
    }
    .hero-inner { padding-top: calc(var(--header-h) + 40px); padding-bottom: 80px; }
    .hero-content { max-width: 34rem; }
    .hero-lede { font-size: 1.3125rem; margin-bottom: 22px; }
    .hero-facts { flex-direction: row; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 34px; font-size: 1.0625rem; }

    .section { padding-block: 96px; }
    .specials { padding-top: 104px; }
    .section-head { margin-bottom: 40px; }

    .about-section { padding-block: 96px; }
    .about-grid { grid-template-columns: 1.1fr 1fr; gap: 72px; }
    .about-photo { margin-inline: 0; border-radius: 20px; --reveal-r: 20px; }
    .about-photo img { aspect-ratio: 5 / 4; }

    .contact-grid { grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
    .map-layout { grid-template-columns: 380px 1fr; gap: 48px; align-items: center; }
    .map-side .section-head { margin-bottom: 28px; }
    .map-frame { height: 460px; }

    .site-footer { padding-bottom: 48px; }
    .footer-grid { grid-template-columns: minmax(260px, 340px) 1fr; gap: 64px; }
    .footer-cols { grid-template-columns: repeat(4, 1fr); gap: 24px; }
    .footer-bottom { grid-template-columns: 1fr auto; align-items: center; gap: 24px; }

    .nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--gold); }

    .action-bar { display: none; }
    .fab-whatsapp {
        position: fixed;
        inset-block-end: 24px;
        inset-inline-end: 24px;
        z-index: 90;
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--wa);
        color: #fff;
        box-shadow: 0 10px 28px rgba(22, 138, 74, .38);
        transition: transform .2s var(--ease), background-color .2s var(--ease);
    }
    .fab-whatsapp:hover { transform: scale(1.06); background: var(--wa-hover); }
}

/* Menu à 5 entrées : plus serré entre 960 et 1180 px (l'allemand est long) */
@media (min-width: 960px) and (max-width: 1180px) {
    .nav { gap: 18px; margin-inline-end: 4px; }
    .nav-links { gap: 16px; }
    .nav-links a { font-size: 1rem; }
    .header-book { padding-inline: 16px; }
}

@media (min-width: 1100px) {
    .specials-track[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1200px) {
    .menu-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Téléphone à l'horizontale (peu de hauteur) */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 959px) {
    .hero { min-height: auto; }
    .hero-media { height: 100%; }
    .hero-inner { padding-top: calc(var(--header-h) + 48px); }
    .hero-title { font-size: 3rem; }
}

/* ============================================
   MOUVEMENTS
   Actifs seulement avec la classe .motion sur <html>, posée par index.html quand le
   téléphone ne demande pas de réduire les animations (et retirée si main.js ne démarre
   pas : rien ne reste caché). Uniquement transform / opacity / clip-path : fluide sur mobile.
   ============================================ */
:root {
    --ease-out: cubic-bezier(.16, 1, .3, 1);    /* entrées : départ vif, arrivée douce */
    --ease-io: cubic-bezier(.65, 0, .35, 1);    /* mouvements continus */
}

/* --- Ouverture : la photo se pose puis dérive lentement, le texte arrive ligne à ligne --- */
.motion .hero-photo img {
    animation: hero-settle 1.4s var(--ease-out) both, hero-drift 24s var(--ease-io) 1.4s infinite alternate;
}
@keyframes hero-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes hero-drift { from { transform: none; } to { transform: scale(1.09) translate3d(-1.5%, -1.2%, 0); } }

.motion .hero-title span,
.motion .hero-lede,
.motion .hero-facts > li,
.motion .hero-actions .btn { animation: hero-in .65s var(--ease-out) backwards; }
.motion .hero-title span:nth-child(2) { animation-delay: .07s; }
.motion .hero-lede { animation-delay: .15s; }
.motion .hero-facts > li:nth-child(1) { animation-delay: .22s; }
.motion .hero-facts > li:nth-child(2) { animation-delay: .28s; }
.motion .hero-actions .btn:nth-child(1) { animation-delay: .34s; }
.motion .hero-actions .btn:nth-child(2) { animation-delay: .4s; }
@keyframes hero-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }

/* Étoiles Google qui se remplissent */
.motion .hero .stars-fill { animation: stars-in 1.1s var(--ease-out) .6s backwards; }
.motion .reviews-card .stars-fill { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out) .45s; }
.motion .reviews-card.is-in .stars-fill { clip-path: inset(0); }
@keyframes stars-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* --- Vapeur qui monte du plat chaud --- */
.steam {
    position: absolute;
    z-index: 1;
    left: 24%;
    top: 3%;
    width: 50%;
    height: 50%;
    pointer-events: none;
}
.steam span {
    position: absolute;
    bottom: 0;
    width: 58%;
    height: 78%;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 250, 240, .78), rgba(255, 250, 240, .3) 42%, rgba(255, 250, 240, 0) 70%);
    opacity: 0;
}
.steam span:nth-child(1) { left: -4%; }
.steam span:nth-child(2) { left: 22%; }
.steam span:nth-child(3) { left: 46%; }
.motion .steam span { animation: steam-rise 7.5s var(--ease-io) infinite; will-change: transform, opacity; }
.motion .steam span:nth-child(1) { animation-delay: -1.2s; }
.motion .steam span:nth-child(2) { animation-duration: 8.6s; animation-delay: -4s; }
.motion .steam span:nth-child(3) { animation-duration: 6.8s; animation-delay: -6.1s; }
@keyframes steam-rise {
    0%   { transform: translate3d(0, 30%, 0) scale(.5, .6) rotate(0deg); opacity: 0; }
    22%  { opacity: .85; }
    55%  { transform: translate3d(12%, -28%, 0) scale(.9, 1.1) rotate(9deg); opacity: .55; }
    100% { transform: translate3d(-10%, -92%, 0) scale(1.3, 1.55) rotate(-7deg); opacity: 0; }
}

/* --- Point « Ouvert » : pulsation, comme un voyant allumé --- */
.motion .status.is-open .status-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: ping 2.4s var(--ease-out) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.8); opacity: 0; } }

/* --- Bandeau qui défile (4 groupes identiques recopiés par main.js : -25 % = une boucle) --- */
.motion .ticker-track { animation: ticker 46s linear infinite; }
@keyframes ticker { to { transform: translate3d(-25%, 0, 0); } }
@media (hover: hover) { .ticker:hover .ticker-track { animation-play-state: paused; } }

/* Mouvements continus en pause quand ils sont hors de l'écran (main.js pose .is-offscreen) */
.hero.is-offscreen .hero-photo img,
.hero.is-offscreen .steam span,
.ticker.is-offscreen .ticker-track { animation-play-state: paused; }

/* --- Apparition au défilement (main.js pose .is-in quand l'élément entre à l'écran) --- */
.motion [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Titres : dévoilés comme un rideau qui descend */
.motion [data-reveal="title"] {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 16px, 0);
    transition: clip-path .7s var(--ease-out), transform .7s var(--ease-out);
}
.motion [data-reveal="title"].is-in { clip-path: inset(-20% -4% -30% -4%); transform: none; }

/* Photo « Notre histoire » : le cadre s'ouvre, puis la photo défile moins vite que la page */
.motion [data-reveal="photo"] {
    opacity: 1;
    transform: none;
    clip-path: inset(7% 7% 7% 7% round var(--reveal-r, 0px));
    transition: clip-path .9s var(--ease-out);
}
.motion [data-reveal="photo"].is-in { clip-path: inset(0 0 0 0 round var(--reveal-r, 0px)); }
.motion .about-photo img { transform: scale(1.12); will-change: transform; }

/* Spécialités : les plats arrivent l'un après l'autre, comme des assiettes posées sur la table */
.motion .dish[data-reveal] { transform: translate3d(0, 28px, 0) scale(.97); }
.motion .dish[data-reveal].is-in { transform: none; }
.motion .dish[data-reveal] .dish-photo { transition: transform 1.2s var(--ease-out); }
.motion .dish[data-reveal]:not(.is-in) .dish-photo { transform: scale(1.12); }
/* Carrousel mobile : petit « coucou » pour montrer qu'on peut glisser */
.motion .specials-track.nudge .dish { animation: nudge 1.3s var(--ease-io); }
.motion .specials-track.nudge .dish:nth-child(2) { animation-delay: .05s; }
.motion .specials-track.nudge .dish:nth-child(3) { animation-delay: .1s; }
.specials-track { --nudge: -44px; }
html[dir="rtl"] .specials-track { --nudge: 44px; }
@keyframes nudge {
    0%, 100% { transform: none; }
    35% { transform: translate3d(var(--nudge), 0, 0); }
    65% { transform: translate3d(calc(var(--nudge) * -.1), 0, 0); }
}
/* Carrousel mobile (Chrome, Android) : le plat qui arrive grandit en entrant */
@supports (animation-timeline: view()) {
    @media (max-width: 759px) {
        .motion .specials-track .dish-media {
            animation: dish-depth linear both;
            animation-timeline: view(inline);
            animation-range: entry 0% entry 100%;
        }
    }
}
@keyframes dish-depth { from { transform: scale(.88); } to { transform: none; } }

/* Carte : les plats arrivent en cascade (à l'arrivée sur la carte et à chaque onglet) */
.motion .menu-grid:not(.rows-in) .menu-item { opacity: 0; }
.motion .menu-grid.rows-in .menu-item { animation: row-in .5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes row-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
.motion .tab.active { animation: tab-pop .3s var(--ease-out); }
@keyframes tab-pop { from { transform: scale(.92); } }

/* Menu mobile : les liens glissent en place à l'ouverture */
@media (max-width: 959px) {
    .motion .nav.open .nav-links li,
    .motion .nav.open .nav-book,
    .motion .nav.open .nav-quick { animation: nav-in .45s var(--ease-out) backwards; }
    .motion .nav.open .nav-links li:nth-child(1) { animation-delay: .1s; }
    .motion .nav.open .nav-links li:nth-child(2) { animation-delay: .15s; }
    .motion .nav.open .nav-links li:nth-child(3) { animation-delay: .2s; }
    .motion .nav.open .nav-links li:nth-child(4) { animation-delay: .25s; }
    .motion .nav.open .nav-book { animation-delay: .31s; }
    .motion .nav.open .nav-quick { animation-delay: .36s; }
}
.nav { --nav-from: 28px; }
html[dir="rtl"] .nav { --nav-from: -28px; }
@keyframes nav-in { from { opacity: 0; transform: translate3d(var(--nav-from), 0, 0); } }

/* Liste des langues : s'ouvre depuis le bouton */
.motion .lang-menu:not([hidden]) { animation: pop-in .22s var(--ease-out); transform-origin: top right; }
html[dir="rtl"] .lang-menu { transform-origin: top left; }
@keyframes pop-in { from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.96); } }

/* Barre du bas : le bouton WhatsApp fait signe à sa première apparition */
.motion .action-btn--wa.hello svg { animation: wa-hello 1s var(--ease-io) .3s; }
@keyframes wa-hello {
    0%, 100% { transform: none; }
    15% { transform: rotate(-16deg) scale(1.15); }
    30% { transform: rotate(12deg) scale(1.15); }
    45% { transform: rotate(-8deg) scale(1.08); }
    60% { transform: rotate(4deg); }
    75% { transform: none; }
}
.motion .fab-whatsapp { animation: fab-in .5s var(--ease-out) 1.2s backwards; }
@keyframes fab-in { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.8); } }

/* Ordinateur : réponses au survol */
.info-chevron { transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0) scale(.98); }
    a.info-row:hover .info-chevron { transform: translateX(4px); }
    html[dir="rtl"] a.info-row:hover .info-chevron { transform: scaleX(-1) translateX(4px); }
    .dish .dish-photo { transition: transform .6s var(--ease-out); }
    .dish:hover .dish-photo,
    .motion .dish[data-reveal].is-in:hover .dish-photo { transform: scale(1.06); transition-duration: .6s; }
    .menu-item-img { transition: transform .4s var(--ease-out); }
    .menu-item:hover .menu-item-img { transform: scale(1.05); }
}

/* ===== MOUVEMENT RÉDUIT ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }
}