/* SAYSABOK — Restaurant & Rooms — site public.
 * Identité D1 « Crème et anthracite » (choisie le 05/10/2026) : monochrome strict, en-tête centré façon grand hôtel,
 * photos en grand, beaucoup d'air, boutons rectangulaires anthracite.
 * Titres : Playfair Display (italique pour l'accent). Texte et libellés : Jost, majuscules espacées.
 * Khmer : Noto Serif Khmer pour les titres, Noto Sans Khmer pour le texte courant.
 * Seule couleur hors palette : le rouge d'alerte (erreurs, refus), qui n'est pas de la marque. */

:root {
    --bg: #F2EFE8;          /* crème */
    --surface: #F8F6F1;     /* champ, carte posée sur la crème */
    --ink: #2A2C2E;         /* anthracite */
    --muted: #5E5D59;       /* gris : 5,7:1 sur la crème (AA) */
    --pale: #B9B6AE;        /* gris clair : filets et décor seulement, jamais du texte sur la crème */
    --line: rgba(42, 44, 46, .16);
    --line-strong: #5E5D59;
    --ph-bg: #E6E2D8;       /* fond d'une photo absente */
    --alert: #A1262B;       /* rouge d'erreur : 6,4:1 sur la crème */
    --alert-bg: #F6E3E1;
    --ok: #2F5D3A;
    --ok-bg: #E4ECE2;
    --display: 'Playfair Display', 'Noto Serif Khmer', Georgia, 'Times New Roman', serif;
    --body: 'Jost', 'Noto Sans Khmer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --gut: clamp(20px, 5vw, 72px);
    --head-h: 60px;         /* hauteur de l'en-tête collant (la barre des catégories QR se colle dessous) */
}
@media (min-width: 521px) { :root { --head-h: 76px; } }
@media (min-width: 1180px) { :root { --head-h: 98px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }  /* chiffres alignés (Playfair a des chiffres elzéviriens par défaut ; « font » ne réinitialise pas ce réglage) */
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--body); -webkit-font-smoothing: antialiased; }
/* Le khmer a besoin de place au-dessus et au-dessous des lignes ; jamais de majuscules ni d'espacement forcés */
html.lang-km body { line-height: 1.9; }
/* (un espacement entre lettres sépare les signes d'une même syllabe khmère : « ម្ហូ ប ខ្មែ រ ») */
[lang="km"], [lang="km"] *, html.lang-km body * { letter-spacing: 0 !important; text-transform: none !important; }
.km-serif { font-family: 'Noto Serif Khmer', var(--display); }
a { color: inherit; }
img { max-width: 100%; }
h1, h2, h3 { font-weight: 400; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: var(--bg); padding: .7rem 1.1rem; z-index: 50; }
/* Focus clavier toujours visible : filet anthracite décollé ; crème sur les fonds anthracite */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-primary:focus-visible, .cta:focus-visible, .qr-bar:focus-visible, .qr-add:focus-visible { outline-color: var(--ink); outline-offset: 3px; box-shadow: inset 0 0 0 2px var(--bg); }
/* Le menu et les onglets QR défilent (overflow) : un contour extérieur y serait coupé */
.qr-cats a:focus-visible, .room-gallery:focus-visible { outline-offset: -3px; }

/* Libellés : petites capitales espacées */
.kicker { font: 500 .75rem/1.5 var(--body); letter-spacing: .32em; text-transform: uppercase; color: var(--muted); margin: 0; }
html.lang-km .kicker { font-size: .95rem; }
.kicker a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.kicker a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- En-tête : logo au centre, façon grand hôtel ---------- */
.top {
    position: sticky; top: 0; z-index: 20;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 12px;
    min-height: var(--head-h); padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top));
    background: rgba(242, 239, 232, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.menu-toggle { grid-column: 1; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-width: 44px; min-height: 44px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer;
    font: 500 .75rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; }
/* Deux traits ; menu ouvert : ils se croisent en « × » */
.menu-toggle .bars { position: relative; width: 22px; height: 10px; }
.menu-toggle .bars::before, .menu-toggle .bars::after { content: ''; position: absolute; left: 0; right: 0; border-top: 1.5px solid currentColor; transition: transform .2s ease, top .2s ease; }
.menu-toggle .bars::before { top: 0; }
.menu-toggle .bars::after { top: 8.5px; }
.menu-toggle[aria-expanded="true"] .bars::before { top: 4.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after { top: 4.25px; transform: rotate(-45deg); }
.menu-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; }
/* Logo validé le 04/10/2026 (SVG, texte en tracés) : principal, compact sous 520 px */
.brand picture { display: block; }
.brand .logo { display: block; height: 30px; width: auto; max-width: 100%; }
.tools { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 4px; }
.account { display: none; }
.langs { display: flex; align-items: center; }
.langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 4px;
    font: 500 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.langs a span { padding: 4px 0; border-bottom: 1px solid transparent; }
.langs a[lang="km"] { font-size: .85rem; }
.langs a.on span { border-color: var(--ink); }
.langs a:hover span { border-color: var(--pale); }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; white-space: nowrap;
    background: var(--ink); color: var(--bg); border: 1px solid var(--ink); text-decoration: none;
    font: 500 .7rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; transition: background .15s ease, color .15s ease; }
.cta:hover { background: transparent; color: var(--ink); }
html.lang-km .cta { font-size: .9rem; }
/* Petit téléphone : la langue affichée est masquée (il reste les deux autres, chacune de 44 px) */
@media (max-width: 520px) {
    .langs a.on { display: none; }
}
/* Menu : sur téléphone et tablette, un panneau qui s'ouvre sous l'en-tête (sans JavaScript, il reste affiché en dessous) */
.nav { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0 4px; padding-top: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; text-decoration: none;
    font: 500 .75rem/1.2 var(--body); letter-spacing: .2em; text-transform: uppercase; }
.nav a span { padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a.on span { border-color: var(--ink); }
.nav a:hover span { border-color: var(--pale); }
html.lang-km .nav a { font-size: .95rem; }
.nav-account svg { flex: none; margin-right: 8px; }
.js .menu-toggle { display: inline-flex; }
.menu-toggle { display: none; }
@media (max-width: 1179px) {
    .js .nav { display: none; }
    .js .nav.open { display: grid; position: absolute; left: 0; right: 0; top: 100%; padding: 8px var(--gut) 20px; gap: 0;
        background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -28px rgba(42, 44, 46, .35); }
    .js .nav.open a { min-height: 52px; border-top: 1px solid var(--line); padding: 0; font-size: .82rem; }
    html.lang-km.js .nav.open a { font-size: 1.05rem; }
    .js .nav.open a:first-child { border-top: 0; }
}
@media (min-width: 521px) {
    .top { padding-left: var(--gut); padding-right: var(--gut); }
    .brand .logo { height: 40px; }
    .tools { gap: 10px; }
    .cta { padding: 0 22px; }
}
/* Ordinateur : menu à gauche, logo au centre, compte, langues et « Réserver » à droite */
@media (min-width: 1180px) {
    .top { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: 14px; }
    .js .menu-toggle, .menu-toggle { display: none; }
    .nav { grid-column: 1; grid-row: 1; padding: 0; gap: 0 22px; }
    .nav a { padding: 0; }
    .nav-account { display: none !important; }
    .brand .logo { height: 50px; }
    .account { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none;
        font: 500 .72rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
    .account.on span, .account:hover span { text-decoration: underline; text-underline-offset: 5px; }
    html.lang-km .account { font-size: .9rem; }
    .tools { gap: 18px; }
    .langs a { min-width: 36px; }
}
@media (min-width: 1180px) and (max-width: 1359px) {
    /* Entre deux : le compte en icône seule (libellé gardé pour les lecteurs d'écran) */
    .account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .account { min-width: 44px; justify-content: center; }
}

/* ---------- Boutons : rectangles, capitales espacées ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 30px; text-align: center;
    font: 500 .78rem/1.3 var(--body); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; cursor: pointer;
    border: 1px solid var(--ink); border-radius: 0; transition: background .15s ease, color .15s ease; }
html.lang-km .btn { font-size: 1rem; line-height: 1.5; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: #121314; border-color: #121314; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 44px; padding: 8px 18px; font-size: .72rem; }
button.btn { font-family: var(--body); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Photos ---------- */
.photo { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ph-bg); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Photo pas encore prise : un « S » discret et la mention, à la place du motif */
.photo.ph-empty { display: grid; place-items: center; align-content: center; gap: 10px; padding: 16px; text-align: center; }
.photo.ph-empty::before { content: 'S'; font: 400 4rem/1 var(--display); color: var(--muted); opacity: .55; }
.photo.ph-empty figcaption { display: grid; gap: 4px; }
.photo.ph-empty figcaption span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.photo.ph-empty figcaption small { font: 500 .72rem/1.4 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
html.lang-km .photo.ph-empty figcaption small { font-size: .9rem; letter-spacing: 0; }

/* ---------- Accueil ---------- */
.hero { display: grid; justify-items: center; gap: 22px; max-width: 980px; margin: 0 auto; text-align: center; padding: 64px 20px 44px; }
@media (min-width: 801px) { .hero { padding: 112px var(--gut) 72px; } }
.pun { margin: 0; font: 400 clamp(3.1rem, 7.6vw, 6.75rem)/1.02 var(--display); letter-spacing: -.012em; text-wrap: balance; }
.pun em { font-style: italic; }
html.lang-km .pun { font-size: clamp(2.5rem, 6.4vw, 5.2rem); line-height: 1.35; letter-spacing: 0; }
html.lang-km .pun em { font-style: normal; }
.pun-note { margin: 0; color: var(--muted); font-size: 1rem; }
.pun-note .km-serif { margin-left: 10px; font-size: 1.15rem; color: var(--ink); white-space: nowrap; }
.lead { margin: 0; max-width: 35rem; font-size: 1.1875rem; line-height: 1.7; font-weight: 300; }
html.lang-km .lead { font-weight: 400; font-size: 1.1rem; }
.hero .actions { justify-content: center; margin-top: 12px; }
@media (max-width: 800px) {
    .hero .actions { display: grid; width: 100%; justify-content: stretch; }
    .lead { font-size: 1.0625rem; }
}
/* La photo de la galerie porte aussi la classe « hero » : la mise en page de la section ne doit pas s'y appliquer */
.photo.hero { display: block; padding: 0; margin: 0; max-width: none; }
/* Triptyque de photos ; sur téléphone, seule celle du milieu */
.hero-photos { display: grid; gap: 14px; align-items: end; padding: 0; }
.hero-photos .photo { aspect-ratio: 4 / 5; }
.hero-photos .photo:not(.center) { display: none; }
@media (min-width: 801px) {
    .hero-photos { padding: 0 var(--gut); }
    .hero-photos.trio { grid-template-columns: 1fr 1.25fr 1fr; }
    .hero-photos.trio .photo { display: block; aspect-ratio: 3 / 4; }
    .hero-photos.trio .photo.center { aspect-ratio: 4 / 5; }
    .hero-photos.solo { max-width: 1100px; margin: 0 auto; }
    .hero-photos.solo .photo { aspect-ratio: 16 / 9; }
}

.stats { display: flex; justify-content: center; padding: 64px 12px 8px; }
.stats div { display: grid; justify-items: center; padding: 0 clamp(18px, 4.5vw, 64px); border-left: 1px solid var(--line); text-align: center; }
.stats div:first-child { border-left: 0; }
.stats strong { font: 400 clamp(2.9rem, 6vw, 4rem)/1 var(--display); }
.stats span { margin-top: 10px; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
html.lang-km .stats span { font-size: .95rem; }
@media (min-width: 801px) { .stats { padding: 96px var(--gut) 24px; } }

.intro { display: grid; justify-items: center; gap: 24px; max-width: 760px; margin: 0 auto; text-align: center; padding: 48px 24px 80px; }
@media (min-width: 801px) { .intro { padding: 72px var(--gut) 112px; } }
.intro h2, .section-head h2, .kitchen h2, .page-head h1, .book-band h2, .contact-card h2 {
    margin: 0; font: 400 clamp(2.1rem, 4.4vw, 3.5rem)/1.12 var(--display); text-wrap: balance; }
html.lang-km :is(.intro h2, .section-head h2, .kitchen h2, .page-head h1, .book-band h2, .contact-card h2) { line-height: 1.5; }
.intro p { margin: 0; font-size: 1.1875rem; font-weight: 300; }
html.lang-km .intro p { font-weight: 400; font-size: 1.1rem; }
@media (max-width: 800px) { .intro p { font-size: 1.0625rem; } }
/* Équipements : uniquement le vrai (Wi-Fi, climatisation, blanchisserie, parking motos) */
.amen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.amen li { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
html.lang-km .amen li { font-size: .95rem; }
.intro .amen { margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--line); width: 100%; }
@media (max-width: 800px) { .intro .amen { display: grid; gap: 10px; } }

.section-head { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 0 24px 40px; }
@media (min-width: 801px) { .section-head { padding: 0 var(--gut) 56px; } }
.section-head p { margin: 0; color: var(--muted); }
.section-head a, .more, .room-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none;
    font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.section-head a span, .more span, .room-link span { padding-bottom: 4px; border-bottom: 1px solid var(--ink); }
html.lang-km :is(.section-head a, .more, .room-link) { font-size: .95rem; }

.rooms-grid { display: grid; gap: 56px; padding: 0 20px 88px; grid-template-columns: 1fr; }
/* Colonnes de largeur fixe + auto-fit : avec moins de cartes que de colonnes (2 types de chambre), elles se centrent au lieu de laisser un trou à droite */
@media (min-width: 700px) { .rooms-grid { grid-template-columns: repeat(auto-fit, calc((100% - 28px) / 2)); justify-content: center; gap: 48px 28px; padding: 0 var(--gut) 112px; } }
@media (min-width: 1100px) { .rooms-grid { grid-template-columns: repeat(auto-fit, calc((100% - 56px) / 3)); gap: 40px 28px; padding-bottom: 128px; } }
.rooms-full { padding-top: 16px; }
.room { display: flex; flex-direction: column; min-width: 0; }
.room .photo { aspect-ratio: 4 / 5; }
.room-body { display: flex; flex-direction: column; gap: 6px; padding-top: 22px; flex: 1; }
.room :is(h2, h3) { margin: 0; font: 400 1.75rem/1.2 var(--display); }
html.lang-km .room :is(h2, h3) { line-height: 1.6; font-size: 1.5rem; }
.room p { margin: 0; }
.rc-km { font-size: .9rem; color: var(--muted); line-height: 1.7; }
.room-desc { color: var(--muted); font-size: 1rem; }
.facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.facts li { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
html.lang-km .facts li { font-size: .95rem; }
.price { margin: 8px 0 0; }
.price strong { font: 400 1.65rem/1 var(--display); }
.price small { font-size: .875rem; color: var(--muted); }
.riel { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.room .more { align-self: flex-start; margin-top: 4px; }

.kitchen { display: grid; gap: 36px; align-items: center; padding: 0 0 88px; }
.kitchen .photo { aspect-ratio: 4 / 5; }
.kitchen-text { display: grid; gap: 22px; padding: 0 24px; max-width: 30rem; }
.kitchen-text > p { margin: 0; font-size: 1.125rem; font-weight: 300; }
html.lang-km .kitchen-text > p { font-weight: 400; }
.kitchen .btn { justify-self: start; margin-top: 6px; }
@media (min-width: 900px) {
    .kitchen { grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 88px); padding: 112px var(--gut); border-top: 1px solid var(--line); }
    .kitchen-text { padding: 0; }
}
/* Boutique sœur Kabas (pont Kabas × SaySabok, 24/10/2026) */
.kabas-shop { display: grid; gap: 32px; padding: 0 24px 88px; }
.kabas-shop-text { display: grid; gap: 18px; max-width: 34rem; }
.kabas-shop-text h2 { font: 400 clamp(1.9rem, 4vw, 2.6rem)/1.15 var(--display); margin: 0; text-wrap: balance; }
html.lang-km .kabas-shop-text h2 { line-height: 1.5; }
.kabas-shop-text > p:not(.kicker) { margin: 0; font-size: 1.125rem; font-weight: 300; }
html.lang-km .kabas-shop-text > p:not(.kicker) { font-weight: 400; }
.kabas-shop .btn { justify-self: start; margin-top: 6px; }
.kabas-shop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kabas-shop-list li { background: var(--surface); border: 1px solid var(--line); padding: 20px 22px; display: grid; gap: 4px; }
.kabas-shop-list strong { font: 400 1.4rem/1.2 var(--display); }
.kabas-shop-hours { color: var(--muted); font-size: .95rem; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
    .kabas-shop { grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(40px, 6vw, 88px); padding: 112px var(--gut); border-top: 1px solid var(--line); }
}
/* Horaires, avec points de conduite */
.hours { list-style: none; padding: 0; margin: 0; }
.hours li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
.hours li span { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }
html.lang-km .hours li span { font-size: 1rem; }
.hours li i, .dots { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }
.hours li strong { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours li.hh :is(span, strong) { font-style: italic; }
.hours-inline { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; font-size: .95rem; }
.hours-inline span { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
html.lang-km .hours-inline span { font-size: .95rem; }
.hours-inline strong { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- Pages intérieures ---------- */
.page-head { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 48px 24px 32px; max-width: 60rem; margin: 0 auto; }
@media (min-width: 801px) { .page-head { padding: 72px var(--gut) 48px; } }
.page-head .lead { color: var(--ink); }
.sub-km { margin: 0; color: var(--muted); font-size: 1rem; }
.hh-banner { margin: 0; font: italic 400 1.25rem/1.4 var(--display); }
html.lang-km .hh-banner { font-style: normal; font-family: var(--body); font-size: 1.1rem; }
.book-band { display: grid; justify-items: center; gap: 16px; text-align: center; margin: 0 20px 88px; padding: 40px 24px; border: 1px solid var(--ink); }
@media (min-width: 801px) { .book-band { margin: 0 var(--gut) 112px; padding: 64px var(--gut); } }
.book-band h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.book-band p { margin: 0; max-width: 36rem; color: var(--muted); }
.book-band .btn { margin-top: 8px; }

/* La carte, façon menu imprimé : points de conduite entre le plat et le prix */
.menu { max-width: 760px; margin: 0 auto; padding: 0 20px 72px; }
@media (min-width: 801px) { .menu { padding: 24px var(--gut) 96px; } }
.menu-cat { padding-top: 48px; }
.menu-cat h2 { display: grid; gap: 2px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--ink); text-align: center;
    font: 500 .9rem/1.4 var(--body); letter-spacing: .3em; text-transform: uppercase; }
html.lang-km .menu-cat h2 { font: 400 1.35rem/1.6 'Noto Serif Khmer', var(--display); }
.cat-km { font: 400 1rem/1.7 'Noto Sans Khmer', var(--body); color: var(--muted); }
.menu-cat ul { list-style: none; margin: 0; padding: 0; }
.dish { padding: 16px 0; border-bottom: 1px solid var(--line); }
.dish-line { display: flex; align-items: baseline; gap: 10px; }
.dish-name { font: 400 1.25rem/1.3 var(--display); }
html.lang-km .dish-name { font-size: 1.15rem; line-height: 1.7; }
.dish-price { font: 400 1.15rem/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dish-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 4px; font-size: .875rem; color: var(--muted); }
.dish-sub .km { font-family: 'Noto Sans Khmer', var(--body); font-size: .95rem; }
.dish-sub .riel { display: inline; margin: 0; }
/* Plat avec photo (facultative) : petite vignette à gauche ; sans photo, rien ne change */
.dish.has-thumb { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 16px; align-items: start; }
.dish.has-thumb > .dish-line, .dish.has-thumb > .dish-sub { grid-column: 2; }
.dish-thumb { grid-column: 1; grid-row: 1 / span 2; width: 4.5rem; height: 4.5rem; object-fit: cover; background: var(--ph-bg); display: block; }
.tag, .tag-hh { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.tag-hh { color: var(--ink); font-style: italic; text-transform: none; letter-spacing: 0; font-size: .85rem; }
html.lang-km :is(.tag, .tag-hh) { font-size: .82rem; font-style: normal; }
.note { margin: 36px 0 0; font-size: .875rem; color: var(--muted); text-align: center; }

.contact-grid { display: grid; gap: 28px; padding: 0 20px 88px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); align-items: stretch; }
@media (min-width: 801px) { .contact-grid { padding: 0 var(--gut) 112px; } }
.contact-card { display: grid; align-content: start; gap: 16px; padding: 28px 22px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
@media (min-width: 801px) { .contact-card { padding: 36px 32px; } }
.contact-card:first-child { border-color: var(--ink); }
.contact-card h2 { font-size: 1.75rem; }
.contact-card p { margin: 0; }
.contact-card .actions { margin-top: 4px; }
.contact-card .actions .btn { flex: 1 1 auto; padding-left: 20px; padding-right: 20px; }
.contact-card .btn-ghost { text-transform: none; letter-spacing: .02em; font-size: .9rem; }
.contact-card .actions .btn-primary, .contact-card .actions .btn-ghost[data-whatsapp], .contact-card .actions .btn-ghost[data-telegram] { text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; }
.contact-grid .photo { aspect-ratio: auto; min-height: 16rem; }
@media (min-width: 1100px) { .contact-grid .photo { grid-column: 1 / -1; height: 22rem; } }
.contact-address { font-style: normal; margin: 0; }
.contact-phone { display: inline-flex; align-items: center; min-height: 44px; }
.contact-hours { margin-top: 8px; }

/* ---------- Pied de page ---------- */
.foot { display: grid; gap: 28px; padding: 48px 20px calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: .95rem; text-align: center; justify-items: center; }
@media (min-width: 900px) { .foot { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; padding: 64px var(--gut) 56px; text-align: left; justify-items: stretch; } }
.foot-logo { display: block; height: 44px; width: auto; max-width: 100%; }
@media (max-width: 899px) { .foot-logo { margin: 0 auto; } }
.foot-brand p { margin: 18px 0 0; color: var(--muted); font-size: .875rem; }
.foot-links, .foot-contact { display: grid; align-content: start; justify-items: inherit; gap: 0; }
/* Liens du pied de page : 44 px de haut au doigt */
.foot-links a, .foot-contact a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
@media (max-width: 899px) { .foot-links a, .foot-contact a { justify-content: center; } }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-contact address { font-style: normal; color: var(--ink); margin-bottom: 4px; max-width: 22rem; }

/* ---------- Arrivée de la page ---------- */
@media (prefers-reduced-motion: no-preference) {
    section.hero > *, .hero-photos { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
    section.hero > :nth-child(2) { animation-delay: .06s; }
    section.hero > :nth-child(3) { animation-delay: .12s; }
    section.hero > :nth-child(4) { animation-delay: .18s; }
    section.hero > :nth-child(5) { animation-delay: .24s; }
    .hero-photos { animation-delay: .3s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Formulaires ---------- */
.book-flow label, .room-book label, .account-form label, .fld { display: grid; gap: 7px; min-width: 0;
    font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
html.lang-km :is(.book-flow label, .room-book label, .account-form label) { font-size: .95rem; }
:is(.book-flow, .room-book, .account-form) :is(input:not([type=radio]):not([type=checkbox]), select, textarea) {
    font: 400 1rem/1.4 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink);
    width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 0; background-color: var(--surface); }
:is(.book-flow, .room-book, .account-form) select { appearance: none; -webkit-appearance: none; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232A2C2E' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; }
:is(.book-flow, .room-book, .account-form) :is(input, select, textarea):focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.book-flow input[readonly] { background: var(--ph-bg); color: var(--muted); }
.field { display: grid; gap: 6px; min-width: 0; }
.field-error { color: var(--alert); font-weight: 500; font-size: .9rem; letter-spacing: 0; text-transform: none; }
.book-flow [aria-invalid="true"] { border-color: var(--alert) !important; background: #FBF1EF !important; }
.book-error { margin: 0; padding: 12px 16px; background: var(--alert-bg); color: var(--alert); border-left: 3px solid var(--alert); font-weight: 500; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Réservation en ligne ---------- */
.book-flow { max-width: 680px; margin: 0 auto; padding: 0 20px 72px; display: grid; gap: 40px; }
@media (min-width: 801px) { .book-flow { padding: 8px var(--gut) 96px; gap: 48px; } }
.book-search { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; padding: 22px 18px; border: 1px solid var(--ink); background: transparent; }
@media (min-width: 801px) { .book-search { padding: 28px; } }
.book-search > .step-label, .book-search > .btn, .book-search > h2 { grid-column: 1 / -1; }
.step-label { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 1.5rem/1.25 var(--display); }
html.lang-km .step-label { font-size: 1.3rem; line-height: 1.6; }
.step { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--ink); border-radius: 50%;
    font: 500 .8rem/1 var(--body); letter-spacing: 0; }
.book-empty { display: grid; gap: 12px; justify-items: start; padding: 28px 22px; border: 1px solid var(--line); background: var(--surface); }
.book-empty h2 { margin: 0; font: 400 1.6rem/1.25 var(--display); }
.book-empty p { margin: 0; }
.offers { display: grid; gap: 0; }
.offers > .step-label { margin-bottom: 14px; }
.offer { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.offer:last-child { border-bottom: 1px solid var(--line); }
.offer.no-thumb { grid-template-columns: minmax(0, 1fr); }
.offer-thumb { grid-row: span 3; align-self: start; width: 84px; height: 84px; aspect-ratio: 1; }
.offer:not(.no-thumb) > :not(.offer-thumb) { grid-column: 2; }
.offer.on { outline: 1px solid var(--ink); outline-offset: -1px; padding: 18px 14px; background: var(--surface); }
.offer h2 { margin: 0; font: 400 1.3rem/1.25 var(--display); }
html.lang-km .offer h2 { line-height: 1.6; }
.offer-meta { margin: 4px 0 0; font-size: .875rem; color: var(--muted); }
.few { color: var(--ink); font-weight: 500; }
.offer-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.offer-price strong { font: 400 1.4rem/1 var(--display); }
.offer-price .riel { display: inline; margin: 0; }
.offer-price small { width: 100%; font-size: .8rem; color: var(--muted); }
.offer .btn, .offer .chosen { justify-self: start; }
.chosen { display: inline-flex; align-items: center; min-height: 44px; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
html.lang-km .chosen { font-size: .95rem; }
.book-details { display: grid; gap: 16px; padding: 22px 18px; border: 1px solid var(--ink); scroll-margin-top: calc(var(--head-h) + 16px); }
@media (min-width: 801px) { .book-details { padding: 28px; } }
.recap { margin: 0; font-size: .95rem; color: var(--muted); }
.recap strong { color: var(--ink); font-weight: 500; }
.grid2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pay-note { margin: 0; font-size: .9rem; color: var(--muted); }
.legal-note { margin: 0; font-size: .875rem; color: var(--muted); }
.legal-note a { color: var(--ink); }
.book-details > .btn[data-confirm] { min-height: 58px; font-size: .84rem; width: 100%; }
.done-recap { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 10px 24px; margin: 8px 0; text-align: left; font-size: 1.05rem; width: 100%; max-width: 32rem; }
/* Téléphone : libellé au-dessus de la valeur */
@media (max-width: 520px) { .done-recap { grid-template-columns: 1fr; gap: 0; } .done-recap dd { margin-bottom: 10px; } }
.done-recap dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); align-self: center; }
html.lang-km .done-recap dt { font-size: .95rem; letter-spacing: 0; }
.done-recap dd { margin: 0; font-weight: 400; }
.done-recap dd strong { font: 400 1.4rem/1.2 var(--display); }
.account-card .done-recap { margin: 0; max-width: none; }
.book-done { max-width: 44rem; }
.book-done .actions { justify-content: center; }
.book-done .pay-note { max-width: 32rem; }

/* ---------- « Bon à savoir » ---------- */
.good-to-know { display: grid; gap: 10px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; }
.good-to-know h2 { margin: 0; font: 400 1.35rem/1.25 var(--display); }
.good-to-know ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.good-to-know li { position: relative; padding-left: 22px; }
.good-to-know li::before { content: ''; position: absolute; left: 0; top: .82em; width: 10px; border-top: 1px solid var(--ink); }
.good-to-know a { color: var(--ink); text-underline-offset: 3px; }
.good-to-know.compact { border: 0; padding: 0; }
.good-to-know.compact h2 { font-size: 1.15rem; }
.book-done .good-to-know { width: 100%; max-width: 32rem; }
.contact-card .good-to-know { border: 0; padding: 0; }
.contact-card .good-to-know h2 { font-size: 1.75rem; }

/* ---------- Page d'un type de chambre ---------- */
.room-gallery { display: grid; gap: 10px; padding: 0 var(--gut); }
.room-gallery .photo.hero { aspect-ratio: 16 / 9; max-height: 640px; }
/* Téléphone : carrousel horizontal qu'on fait glisser */
@media (max-width: 799px) {
    .room-gallery { padding: 0 20px; }
    .room-gallery.multi { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .room-gallery.multi::-webkit-scrollbar { display: none; }
    .room-gallery.multi .photo { flex: 0 0 84%; scroll-snap-align: center; aspect-ratio: 4 / 5; }
    .room-gallery:not(.multi) .photo.hero { aspect-ratio: 4 / 5; }
}
/* Ordinateur : grande photo + vignettes, disposition selon le nombre (jamais de case vide) */
@media (min-width: 800px) {
    .room-gallery.multi { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); height: min(35rem, 42vw); }
    .room-gallery.multi.t4 { grid-template-columns: 2fr 1fr 1fr; }
    .room-gallery.multi .photo { aspect-ratio: auto; height: 100%; }
    .room-gallery.multi .photo.hero { grid-row: span 2; max-height: none; }
    .room-gallery.multi.t1 .photo:not(.hero) { grid-row: span 2; }
}
@media (min-width: 800px) { .photo.mobile-only { display: none; } }
.room-detail { display: grid; gap: 28px; max-width: 720px; margin: 0 auto; padding: 36px 20px 72px; }
@media (min-width: 801px) { .room-detail { padding: 56px var(--gut) 96px; } }
.room-summary { display: grid; justify-items: center; gap: 14px; text-align: center; }
.room-summary .facts { justify-content: center; }
.price.big strong { font-size: 2.5rem; }
.room-detail .good-to-know { margin: 0; }
.room-book { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 24px 20px; border: 1px solid var(--ink); }
@media (min-width: 801px) { .room-book { padding: 32px; } }
.room-book h2 { margin: 0; font: 400 1.75rem/1.2 var(--display); text-align: center; }
.room-book .btn { width: 100%; }
.others { padding-top: 0; }
/* Les autres chambres (souvent deux) : centrées, à la largeur d'une colonne, sans case vide */
@media (min-width: 1100px) { .rooms-grid.others { grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 56px) / 3))); justify-content: center; } }

/* ---------- Pages de contenu (règlement, conditions…) ---------- */
.prose { max-width: 44rem; margin: 0 auto; padding: 0 20px 88px; font-size: 1.0625rem; }
@media (min-width: 801px) { .prose { padding: 0 var(--gut) 112px; } }
.prose h2 { margin: 2.4rem 0 .7rem; font: 400 1.6rem/1.25 var(--display); }
.prose h3 { margin: 1.8rem 0 .5rem; font: 500 .85rem/1.4 var(--body); letter-spacing: .18em; text-transform: uppercase; }
html.lang-km .prose h3 { font-size: 1.05rem; letter-spacing: 0; text-transform: none; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin: .3rem 0; }
.prose a { color: var(--ink); text-underline-offset: 3px; }
/* Le khmer s'écrit sans espace entre les mots : coupure autorisée entre deux syllabes en dernier recours */
html[lang="km"] .prose, html[lang="km"] .prose li, html[lang="km"] .prose p { overflow-wrap: anywhere; }

/* ---------- Espace client ---------- */
.account-flow { max-width: 44rem; margin: 0 auto; padding: 0 20px 88px; display: grid; gap: 24px; }
@media (min-width: 801px) { .account-flow { padding: 0 var(--gut) 112px; } }
.account-card { display: grid; gap: 16px; padding: 24px 20px; border: 1px solid var(--ink); background: transparent; min-width: 0; }
@media (min-width: 801px) { .account-card { padding: 32px; } }
.account-card .lead { margin: 0; }
.account-card p { margin: 0; }
.account-card form { margin: 0; }
.account-form { display: grid; gap: 16px; }
.account-form .btn { justify-self: start; }
@media (max-width: 520px) { .account-form .btn, .account-card form > .btn { justify-self: stretch; width: 100%; } }
.account-ok { margin: 0; padding: 12px 16px; background: var(--ok-bg); color: var(--ok); border-left: 3px solid var(--ok); font-weight: 500; overflow-wrap: anywhere; }
.account-hint, .account-who, .account-email { margin: 0; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.account-hint a { color: var(--ink); }
.account-head .actions { margin-top: 8px; justify-content: center; }
.account-head form { margin: 0; }
.social { display: grid; gap: 12px; }
.btn-social { border: 1px solid var(--ink); background: var(--surface); color: var(--ink); text-transform: none; letter-spacing: .02em; font-size: .95rem; }
.btn-social:hover { background: var(--ink); color: var(--bg); }
.btn-apple { background: #000; color: #fff; border-color: #000; }
.btn-apple:hover { background: var(--ink); }
.or { display: flex; align-items: center; gap: 14px; margin: 4px 0; color: var(--muted); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
html.lang-km .or { font-size: .95rem; letter-spacing: 0; }
.or::before, .or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.account-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--muted); }
.account-perks li { position: relative; padding-left: 22px; }
.account-perks li::before { content: ''; position: absolute; left: 0; top: .82em; width: 10px; border-top: 1px solid var(--muted); }
.account-h2 { margin: 12px 0 0; font: 400 1.6rem/1.25 var(--display); }
.account-empty { margin: 0; color: var(--muted); }
.stay-card { display: grid; gap: 10px; grid-template-columns: 1fr; padding: 20px 0; border-top: 1px solid var(--line); text-decoration: none; }
.stay-card + .stay-card { border-top: 1px solid var(--line); }
.stay-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 640px) { .stay-card { grid-template-columns: 1fr auto; align-items: center; } }
.stay-card h3 { margin: 2px 0; font: 400 1.4rem/1.25 var(--display); }
.stay-ref { margin: 0; font-size: .75rem; font-weight: 500; letter-spacing: .14em; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: inherit; }
.account-head .stay-ref { justify-content: center; }
.stay-dates { margin: 0; color: var(--muted); font-size: .95rem; }
.stay-side { display: grid; gap: 2px; justify-items: start; }
@media (min-width: 640px) { .stay-side { text-align: right; justify-items: end; } }
.stay-side strong { font: 400 1.5rem/1 var(--display); }
.stay-side small { color: var(--muted); }
.pill { font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--line-strong); color: var(--ink); }
.pill-confirmed, .pill-checked_in { border-color: var(--ok); color: var(--ok); }
.pill-cancelled, .pill-no_show { border-color: var(--alert); color: var(--alert); }
.back-link { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.invoice-line { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; }
.invoice-line a { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.invoice-line span { color: var(--muted); }
.choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.choice legend { font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; }
html.lang-km .choice legend { font-size: .95rem; }
.account-form .choice label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.choice input { width: 1.2rem; height: 1.2rem; accent-color: var(--ink); }

/* ---------- Commande par QR code (téléphone d'abord) ---------- */
.qr-head { padding-bottom: 20px; }
.qr-head h1 { font-size: clamp(2.4rem, 9vw, 4rem); }
.qr-pay-note { margin: 0; font-size: .875rem; color: var(--muted); }
.qr-closed { margin: 0; padding: 14px 18px; background: var(--ink); color: var(--bg); font-weight: 500; max-width: 36rem; }
.qr-hours { display: inline-block; margin: 0; padding: 8px 16px; border: 1px solid var(--ink); font-size: .9rem; font-weight: 500; }
.qr-readonly { margin: 0 0 16px; font: 400 1.4rem/1.3 var(--display); color: var(--muted); }
.qr-cats { position: sticky; top: var(--head-h); z-index: 10; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    padding: 8px var(--gut); background: rgba(242, 239, 232, .96); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.qr-cats::-webkit-scrollbar { display: none; }
.qr-cats a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; text-decoration: none; border: 1px solid var(--line-strong);
    font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; background: var(--surface); }
html.lang-km .qr-cats a { font-size: .95rem; }
.qr-cats a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.qr-menu { max-width: 46rem; margin: 0 auto; padding: 16px 20px 120px; }
.qr-cat { scroll-margin-top: calc(var(--head-h) + 76px); margin-bottom: 28px; }
.qr-cat h2 { margin: 0 0 4px; padding: 14px 0 12px; border-bottom: 1px solid var(--ink); font: 500 .85rem/1.4 var(--body); letter-spacing: .28em; text-transform: uppercase; }
html.lang-km .qr-cat h2 { font: 400 1.3rem/1.6 'Noto Serif Khmer', var(--display); }
.qr-cat ul { list-style: none; margin: 0; padding: 0; }
.qr-item { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.qr-item img, .qr-noimg { width: 4.2rem; height: 4.2rem; object-fit: cover; background: var(--ph-bg); display: block; }
.qr-noimg { display: grid; place-items: center; }
.qr-noimg::before { content: 'S'; font: 400 1.6rem/1 var(--display); color: var(--muted); opacity: .45; }
.qr-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qr-item-body strong { font: 400 1.15rem/1.3 var(--display); }
html.lang-km .qr-item-body strong { font-size: 1.05rem; line-height: 1.7; }
.qr-desc { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.qr-price { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; font-size: 1rem; font-variant-numeric: tabular-nums; }
.qr-price s { color: var(--muted); font-size: .85rem; }
.qr-item.out { opacity: .6; }
.qr-add { width: 48px; height: 48px; border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--bg); font: 300 1.6rem/1 var(--body); cursor: pointer; }
.qr-add:active { transform: translateY(1px); }
.qr-bar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 12px;
    justify-content: space-between; min-height: 56px; padding: 12px 20px; border: 0; border-radius: 0; background: var(--ink); color: var(--bg);
    font: 500 .8rem/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .45); cursor: pointer; max-width: 40rem; margin: 0 auto; }
html.lang-km .qr-bar { font-size: 1rem; letter-spacing: 0; text-transform: none; }
.qr-bar strong { font: 400 1.3rem/1 var(--display); letter-spacing: 0; }
.qr-bar.bump { animation: qr-bump .3s ease; }
@keyframes qr-bump { 50% { transform: scale(1.03); } }
.qr-sheet-bg { position: fixed; inset: 0; z-index: 40; background: rgba(42, 44, 46, .55); display: flex; align-items: flex-end; justify-content: center; }
.qr-sheet { background: var(--bg); width: 100%; max-width: 40rem; max-height: 88vh; overflow-y: auto; padding: 24px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ink); }
.qr-sheet h2 { margin: 0 0 16px; font: 400 1.5rem/1.25 var(--display); }
.qr-sheet-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; padding-top: 10px; position: sticky; bottom: 0; background: var(--bg); }
.qr-sheet-foot .btn { min-height: 48px; padding: 10px 20px; }
.qr-group { border: 0; padding: 0; margin: 0 0 18px; }
.qr-group legend { margin-bottom: 8px; font-weight: 500; }
.qr-group small { font-weight: 400; color: var(--muted); }
.qr-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.qr-opt { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--surface); color: var(--ink); font: 400 .95rem/1.2 var(--body); cursor: pointer; }
.qr-opt.on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.qr-line { padding: 12px 0; border-bottom: 1px solid var(--line); }
.qr-line-top { display: flex; justify-content: space-between; gap: 12px; }
.qr-line-top strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.qr-line-tools { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.qr-qty { flex: none; width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 400 1.2rem/1 var(--body); cursor: pointer; }
.qr-qty[disabled] { opacity: .35; }
.qr-q { min-width: 1.6rem; text-align: center; font-weight: 500; }
.qr-line-tools input, .qr-field input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; font: 400 16px/1.3 var(--body); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: 0; background-color: var(--surface); }
.qr-field { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
html.lang-km .qr-field { font-size: .95rem; letter-spacing: 0; text-transform: none; }
.qr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qr-total { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 6px; font-weight: 500; }
.qr-total strong { font: 400 1.6rem/1 var(--display); }
.qr-error { margin: 12px 0 0; padding: 10px 14px; background: var(--alert-bg); color: var(--alert); border-left: 3px solid var(--alert); font-weight: 500; }
.qr-empty { color: var(--muted); }
.qr-sent { max-width: 46rem; margin: 8px auto 0; padding: 0 20px; }
.qr-sent h2 { margin: 0 0 10px; font: 400 1.4rem/1.25 var(--display); }
.qr-order-card { margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--line-strong); background: var(--surface); }
.qr-order-card header { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.qr-order-card header strong { font-weight: 500; }
.qr-order-card ul { margin: 6px 0 0; padding-left: 1.1rem; font-size: .92rem; }
.qr-order-card p { margin: 6px 0 0; font-size: .9rem; }
.qr-badge { padding: 2px 10px; font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; }
/* États d'une commande : ce sont des signaux, pas de la marque */
.qr-order-card.pending { border-left: 3px solid #8A6100; }
.qr-order-card.pending .qr-badge { color: #6E4E00; }
.qr-order-card.accepted { border-left: 3px solid var(--ok); }
.qr-order-card.accepted .qr-badge { color: var(--bg); background: var(--ok); border-color: var(--ok); }
.qr-order-card.rejected { border-left: 3px solid var(--alert); }
.qr-order-card.rejected .qr-badge { color: #fff; background: var(--alert); border-color: var(--alert); }
.qr-reason { font-weight: 500; color: var(--alert); }
/* L'attribut hidden doit gagner sur display:flex des panneaux */
.qr-sheet-bg[hidden], .qr-bar[hidden], .qr-sent[hidden], .qr-error[hidden] { display: none; }

/* ---------- Pages d'erreur (403, 404, 419, 429) ---------- */
.not-found { padding-bottom: 112px; }
.not-found .kicker { font: 400 1.1rem/1 var(--display); letter-spacing: .2em; }
.not-found .actions { justify-content: center; margin-top: 12px; }

/* ---------- Enfants et lits (réservation) ---------- */
.book-flow [hidden] { display: none !important; }
.book-search > .kids-ages, .book-search > .check { grid-column: 1 / -1; }
.kids-ages { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.kids-help { grid-column: 1 / -1; margin: 0; font-size: .875rem; color: var(--muted); }
.book-flow label.check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.check input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--ink); }
.offer-extra { margin: 4px 0 0; font-size: .875rem; }
.combo-rooms { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: .925rem; }
.combo-rooms li { display: grid; gap: 2px; min-width: 0; }
.combo-rooms span { color: var(--muted); }

/* ---------- Paiement en ligne (ABA PayWay, 15/10/2026) ---------- */
/* Formulaire de réservation : payer maintenant / à l'hôtel */
.pay-choice { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.pay-choice legend { padding: 0; margin-bottom: 10px; font: 400 1.25rem/1.3 var(--display); }
.book-flow label.pay-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: 16px; border: 1px solid var(--line-strong);
    background: var(--surface); cursor: pointer; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.book-flow label.pay-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pay-card input { width: 1.25rem; height: 1.25rem; margin: 3px 0 0; accent-color: var(--ink); }
.pay-card-body { display: grid; gap: 6px; min-width: 0; }
.pay-card-title { font-weight: 500; }
.pay-card-text, .pay-card-policy { font-size: .9rem; color: var(--muted); }
.pay-card-policy { color: var(--ink); }
.pay-card-logos-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pay-card-logos-row > img { border-radius: 6px; }
.pay-card-logos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pay-card-logos img { width: 30px; height: 18px; display: block; }
.pay-card-logos img.jcb { object-fit: contain; }
/* Trois options (15/10/2026) : prix de chaque option, remise du non remboursable */
.pay-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pay-badge { display: inline-block; padding: 2px 8px; background: var(--ink); color: var(--surface, #FBF6EE); font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.pay-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.pay-card-price strong { font-size: 1.2rem; font-weight: 600; }
.pay-card-price s, .pay-card-price small { color: var(--muted); font-size: .9rem; }

/* Page de paiement */
.pay-head .lead { max-width: 38rem; }
.pay-flow { max-width: 64rem; margin: 0 auto; padding: 0 20px 88px; display: grid; gap: 24px; }
@media (min-width: 801px) { .pay-flow { padding: 0 var(--gut) 112px; } }
.pay-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .pay-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.pay-hold { margin: 0; padding: 12px 16px; background: var(--ph-bg); font-size: .95rem; }
.pay-hold strong { font-variant-numeric: tabular-nums; margin-left: 6px; }
.pay-policy { margin: 0; font-size: .92rem; }
.pay-policy a { color: var(--ink); }
.pay-options { display: grid; gap: 12px; }
.pay-option { display: grid; grid-template-columns: 40px minmax(0, 1fr) 32px; align-items: center; gap: 14px; width: 100%; padding: 16px; min-height: 72px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, .04); cursor: pointer; text-align: left; font: inherit; color: #1a1a2e; }
.pay-option:hover, .pay-option:focus-visible { border-color: var(--ink); }
.pay-option:disabled { opacity: .6; cursor: wait; }
.pay-option-logo { width: 40px; height: 40px; border-radius: 8px; }
.pay-option-text { display: grid; gap: 4px; min-width: 0; }
.pay-option-title { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.pay-option-desc { font-size: .82rem; color: #8e8e93; }
.pay-option-arrow { justify-self: center; width: 32px; height: 32px; padding: 11px 13px; box-sizing: border-box; background: #F2F3F7; border-radius: 8px; object-fit: none; }
.pay-option .pay-card-logos img { width: 24px; height: 14px; }
.pay-secure { margin: 0; font-size: .85rem; color: var(--muted); }
.pay-wait { margin: 0; padding: 12px 16px; background: var(--ph-bg); }
.pay-hotel { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.pay-hotel p { margin: 0; font-size: .92rem; color: var(--muted); }
@media (max-width: 520px) { .pay-hotel .btn { width: 100%; } }
.pay-released { justify-items: start; }

/* « We Accept » du pied de page (exigé par ABA), visible seulement quand le paiement en ligne est allumé */
.foot-accept { display: grid; gap: 10px; justify-items: inherit; }
@media (min-width: 900px) { .foot-accept { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); } }
.foot-accept-title { margin: 0; font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
html.lang-km .foot-accept-title { font-size: .95rem; letter-spacing: 0; }
.foot-accept-logos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: inherit; }
@media (max-width: 899px) { .foot-accept-logos { justify-content: center; } }
.foot-accept-logos img { height: 26px; width: auto; border-radius: 4px; display: block; }
.foot-accept-logos .on-black { background: #000; }
.foot-accept-logos .jcb { min-width: 44px; object-fit: contain; }
.account-form label.check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Tailles d'un plat (17/10/2026) : « à partir de » et liste des tailles */
.dish-from, .qr-from { font: 400 .78rem/1 var(--body, inherit); opacity: .7; margin-right: .2rem; }
.dish-sizes { font-weight: 600; }