/* Polices auto-hébergées (fichiers variables, une seule requête par famille) — aucune
   dépendance CDN au runtime, conforme à la contrainte hors-ligne du projet. */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/fonts/fraunces-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/assets/fonts/manrope-variable.woff2') format('woff2');
}

:root {
    --hambol-forest: #8a4b2b;
    --hambol-forest-light: #a8663c;
    --hambol-terracotta: #b5622f;
    --hambol-gold: #c79a4b;
    --hambol-beige: #f4efe6;
    --hambol-bg: #f7f8f6;
    --hambol-card: #ffffff;
    --hambol-text: #24291f;
    --hambol-muted: #6b7568;
    --hambol-border: #e3e2da;
    --admin-bg: #ffffff;
    --admin-sidebar: var(--hambol-forest);
    --sidebar-width: 260px;
    --sidebar-width-reduite: 76px;
    --topbar-height: 64px;
    --radius: 0.6rem;
    --radius-lg: 1rem;
    --shadow-card: 0 12px 32px rgba(138, 75, 43, 0.12);
    --shadow-card-lg: 0 24px 48px -12px rgba(74, 40, 20, 0.28);
    --font-display: 'Fraunces', Iowan Old Style, Palatino Linotype, Georgia, serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Mode clair par défaut partout, carte publique comme admin, quelle que soit la préférence
   système du visiteur — le mode sombre ne s'active plus que via un choix explicite (bouton
   mode nuit), qui pose l'attribut data-theme="dark" en JS. */
:root[data-theme="dark"] {
    --hambol-bg: #14170f;
    --hambol-card: #1c211a;
    --hambol-text: #ecece4;
    --hambol-muted: #9aa192;
    --hambol-border: #2a2f24;
    --admin-bg: #14170f;
    --admin-sidebar: #241a12;
}

body {
    background-color: var(--hambol-bg);
    color: var(--hambol-text);
    font-family: var(--font-body);
}

a {
    color: var(--hambol-forest);
}

a:hover {
    color: var(--hambol-forest-light);
}

[x-cloak] {
    display: none !important;
}

/* ---------- Admin layout ---------- */

.admin-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.admin-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background-color: var(--admin-sidebar);
    color: #fff;
    overflow-y: auto;
    transition: width 0.2s ease;
}

.admin-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-brand-logo {
    height: 36px;
    width: auto;
    border-radius: 4px;
    flex-shrink: 0;
}

.sidebar-brand-texte {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bouton de réduction/agrandissement de la sidebar, desktop uniquement (le mobile utilise déjà
   le burger pour un menu plein écran hors-canevas — les deux mécanismes ne se combinent pas). */
.sidebar-toggle {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
}

.sidebar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.admin-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.82);
    padding: 0.55rem 1.25rem;
    border-left: 3px solid transparent;
}

.admin-sidebar .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.06);
}

.admin-sidebar .nav-link.active {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border-left-color: var(--hambol-gold);
}

.admin-sidebar .nav-section-title {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1rem 1.25rem 0.25rem;
}

.sidebar-etablissement-entete {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.7rem 1.25rem;
    margin-top: 0.4rem;
}

.sidebar-etablissement-entete:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.sidebar-etablissement-entete .bi-shop {
    color: var(--hambol-gold);
}

.sidebar-etablissement-chevron {
    margin-left: auto;
    transition: transform 0.18s ease;
}

.sidebar-etablissement-chevron.est-ouvert {
    transform: rotate(180deg);
}

.sidebar-etablissement-corps .nav-link {
    padding-left: 2.6rem;
}

.admin-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.admin-topbar {
    height: var(--topbar-height);
    flex-shrink: 0;
    background-color: var(--hambol-card);
    border-bottom: 1px solid var(--hambol-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
}

.admin-content {
    padding: 1.75rem;
    flex: 1;
    overflow-y: auto;
    background-color: var(--admin-bg);
}

.admin-burger {
    display: none;
    background: transparent;
    border: 1px solid var(--hambol-border);
    border-radius: var(--radius);
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: var(--hambol-text);
    font-size: 1.2rem;
}

.theme-toggle {
    background: transparent;
    border: 1px solid var(--hambol-border);
    border-radius: var(--radius);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hambol-text);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background-color: var(--hambol-bg);
}

.admin-overlay {
    display: none;
}

@media (max-width: 991.98px) {
    .admin-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        overflow-y: auto;
    }

    .admin-sidebar.est-ouverte {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
    }

    .admin-burger {
        display: inline-flex;
    }

    .admin-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 40;
    }

    /* Le mode réduit (icônes seules) n'a de sens qu'en sidebar fixe côte à côte avec le
       contenu ; en dessous de 992px la sidebar est déjà un panneau plein écran hors-canevas,
       donc on ignore la préférence "réduite" et on affiche toujours le menu complet. */
    .sidebar-toggle {
        display: none;
    }
}

@media (min-width: 992px) {
    .admin-sidebar.est-reduite,
    html[data-sidebar="reduite"] .admin-sidebar {
        width: var(--sidebar-width-reduite);
    }

    .admin-sidebar.est-reduite .sidebar-brand,
    html[data-sidebar="reduite"] .admin-sidebar .sidebar-brand {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        justify-content: center;
    }

    .admin-sidebar.est-reduite .sidebar-brand-texte,
    .admin-sidebar.est-reduite .nav-link-texte,
    .admin-sidebar.est-reduite .nav-section-title,
    .admin-sidebar.est-reduite .sidebar-etablissement-nom,
    .admin-sidebar.est-reduite .sidebar-etablissement-chevron,
    html[data-sidebar="reduite"] .admin-sidebar .sidebar-brand-texte,
    html[data-sidebar="reduite"] .admin-sidebar .nav-link-texte,
    html[data-sidebar="reduite"] .admin-sidebar .nav-section-title,
    html[data-sidebar="reduite"] .admin-sidebar .sidebar-etablissement-nom,
    html[data-sidebar="reduite"] .admin-sidebar .sidebar-etablissement-chevron {
        display: none;
    }

    .admin-sidebar.est-reduite .nav-link,
    .admin-sidebar.est-reduite .sidebar-etablissement-entete,
    html[data-sidebar="reduite"] .admin-sidebar .nav-link,
    html[data-sidebar="reduite"] .admin-sidebar .sidebar-etablissement-entete {
        display: flex;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .admin-sidebar.est-reduite .nav-link i,
    .admin-sidebar.est-reduite .sidebar-etablissement-entete i,
    html[data-sidebar="reduite"] .admin-sidebar .nav-link i,
    html[data-sidebar="reduite"] .admin-sidebar .sidebar-etablissement-entete i {
        margin-right: 0 !important;
        font-size: 1.1rem;
    }

    .admin-sidebar.est-reduite .sidebar-etablissement-corps .nav-link,
    html[data-sidebar="reduite"] .admin-sidebar .sidebar-etablissement-corps .nav-link {
        padding-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-sidebar {
        transition: none;
    }
}

.hambol-card {
    background-color: var(--hambol-card);
    border: 1px solid var(--hambol-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
}

/* Largeur commune aux formulaires admin (plats/chambres/prestations, etc.) — un formulaire
   d'une seule colonne reste lisible sans s'étirer sur toute la largeur d'un écran desktop. */
.admin-form-carte {
    max-width: 720px;
}

.admin-form-carte-md {
    max-width: 640px;
}

.admin-form-carte-sm {
    max-width: 560px;
}

.champ-etroit-sm {
    max-width: 200px;
}

.champ-etroit-md {
    max-width: 260px;
}

.filtre-etroit {
    max-width: 220px;
}

.etablissement-logo-apercu {
    width: 160px;
    height: 90px;
    object-fit: cover;
}

/* ---------- Tableau de bord ---------- */

.dashboard-stat-carte {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
}

.dashboard-stat-icone {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background-color: var(--hambol-beige);
    color: var(--hambol-forest);
}

.dashboard-stat-icone.alerte {
    background-color: rgba(181, 98, 47, 0.14);
    color: var(--hambol-terracotta);
}

.dashboard-stat-valeur {
    font-family: var(--font-display);
}

.dashboard-stat-valeur.alerte {
    color: var(--hambol-terracotta);
}

.dashboard-section-titre {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-section-titre .bi {
    color: var(--hambol-terracotta);
}

.dashboard-classement {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--hambol-beige);
    color: var(--hambol-forest);
    font-size: 0.72rem;
    font-weight: 700;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Vignettes des photos déjà envoyées, avec leur bouton de suppression superposé en haut à
   droite — partagé par les formulaires plats/chambres/prestations (partials.admin.photos-existantes). */
.photo-existante-miniature {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.photo-existante-supprimer {
    transform: translate(35%, -35%);
}

.photo-existante-bouton {
    width: 22px;
    height: 22px;
}

.photo-existante-icone {
    font-size: 0.9rem;
}

.btn-hambol {
    background-color: var(--hambol-forest);
    border-color: var(--hambol-forest);
    color: #fff;
}

.btn-hambol:hover {
    background-color: var(--hambol-forest-light);
    border-color: var(--hambol-forest-light);
    color: #fff;
}

.form-check-input:checked {
    background-color: var(--hambol-forest);
    border-color: var(--hambol-forest);
}

.form-check-input:focus {
    border-color: var(--hambol-forest-light);
    box-shadow: 0 0 0 0.25rem rgba(138, 75, 43, 0.25);
}

/* ---------- Auth ---------- */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--hambol-beige);
}

.auth-card {
    width: 100%;
    max-width: 380px;
}

/* ---------- Carte publique ---------- */

.font-serif {
    font-family: var(--font-display);
}

.carte-header {
    background: linear-gradient(135deg, var(--hambol-forest) 0%, #5f3119 100%);
    color: #fff;
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    box-shadow: 0 2px 16px rgba(36, 20, 10, 0.25);
    flex-wrap: wrap;
}

.carte-header-marque {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: #fff;
    min-width: 0;
}

.carte-header-logo {
    height: 40px;
    width: auto;
    border-radius: 4px;
    flex-shrink: 0;
}

.carte-header .etablissement-nom {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carte-header-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

.bouton-etablissement {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.45rem 0.9rem 0.45rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 40px;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.bouton-etablissement:hover {
    background-color: rgba(255, 255, 255, 0.24);
    color: #fff;
    transform: translateY(-1px);
}

.bouton-etablissement i {
    color: var(--hambol-gold);
    font-size: 1rem;
}

.bouton-icone-header {
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 999px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.bouton-icone-header:hover {
    background-color: rgba(255, 255, 255, 0.24);
}

.carte-header .lang-switch {
    display: inline-flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 0.2rem;
    height: 40px;
    box-sizing: border-box;
}

.carte-header .lang-switch a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    line-height: 1;
}

.carte-header .lang-switch a.actif {
    background-color: #fff;
    color: var(--hambol-forest);
}

/* En dessous de ~560px, le nom de l'établissement et le libellé de l'établissement voisin
   (dans l'en-tête) ne tiennent plus, avec les 5 boutons d'action (établissement, WhatsApp,
   avis, thème, langue), sur une seule ligne : on les masque (icônes seules) pour que l'en-tête
   garde une hauteur fixe et que le contenu de la page ne soit jamais poussé vers le bas. */
@media (max-width: 560px) {
    .carte-header .etablissement-nom {
        display: none;
    }

    .bouton-etablissement-texte {
        display: none;
    }

    .bouton-etablissement {
        padding: 0.45rem;
        width: 40px;
        justify-content: center;
    }
}

/* Marge de sécurité supplémentaire pour les très petits écrans (têtes de gamme d'entrée,
   anciens iPhone) : icônes légèrement plus compactes. */
@media (max-width: 430px) {
    .carte-header {
        gap: 0.4rem;
        padding: 0.65rem 0.6rem;
    }

    .carte-header-actions {
        gap: 0.35rem;
    }

    .bouton-etablissement,
    .bouton-icone-header {
        width: 34px;
        height: 34px;
        min-height: 34px;
        font-size: 0.95rem;
    }

    .carte-header .lang-switch {
        height: 34px;
    }

    .carte-header .lang-switch a {
        padding: 0.3rem 0.45rem;
    }
}

.carte-recherche-wrap {
    position: relative;
    margin-bottom: 0.85rem;
}

.carte-recherche-icone {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    transform: translateY(-50%);
    color: var(--hambol-muted);
}

.carte-recherche {
    width: 100%;
    border: 1px solid var(--hambol-border);
    background-color: var(--hambol-card);
    color: var(--hambol-text);
    border-radius: 999px;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    font-size: 0.95rem;
    min-height: 46px;
}

.carte-recherche:focus {
    outline: none;
    border-color: var(--hambol-terracotta);
    box-shadow: 0 0 0 0.2rem rgba(181, 98, 47, 0.15);
}

.carte-filtres-rangee {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scrollbar-width: none;
}

.carte-filtres-rangee::-webkit-scrollbar {
    display: none;
}

.filtre-pastille {
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--hambol-border);
    background-color: var(--hambol-card);
    color: var(--hambol-text);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.filtre-pastille i {
    font-size: 0.95rem;
}

.filtre-pastille.active {
    background-color: var(--hambol-terracotta);
    border-color: var(--hambol-terracotta);
    color: #fff;
}

.carte-vue-bascule {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.btn-vue {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid var(--hambol-border);
    background-color: var(--hambol-card);
    color: var(--hambol-text);
    min-height: 44px;
}

.btn-vue.active {
    background-color: var(--hambol-forest);
    border-color: var(--hambol-forest);
    color: #fff;
}

.btn-vue:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.plat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.1rem;
}

.plat-card {
    position: relative;
    background-color: var(--hambol-card);
    border: 1px solid var(--hambol-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(36, 20, 10, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.plat-card:hover,
.plat-card:focus-visible {
    box-shadow: var(--shadow-card);
    transform: translateY(-3px);
}

@media (hover: none) {
    .plat-card:hover {
        transform: none;
    }
}

.plat-photo-wrap {
    position: relative;
    display: block;
}

.plat-card .plat-photo {
    aspect-ratio: 4 / 3;
    background-color: var(--hambol-beige);
    object-fit: cover;
    width: 100%;
    display: block;
}

.plat-photo-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hambol-muted);
    font-size: 1.6rem;
}

.plat-badges {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.plat-card .plat-body {
    padding: 0.75rem 0.85rem 0.95rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.plat-card .plat-nom {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.2rem;
    color: var(--hambol-text);
}

.plat-card .plat-description {
    color: var(--hambol-muted);
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}

.plat-card .plat-prix {
    font-weight: 700;
    color: var(--hambol-terracotta);
    margin-top: auto;
    display: block;
}

.plat-card .plat-prix .prix-barre {
    text-decoration: line-through;
    color: var(--hambol-muted);
    font-weight: 400;
    font-size: 0.85em;
    margin-right: 0.35em;
}

.plat-card .plat-prix-demi {
    display: block;
    color: var(--hambol-muted);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.1rem;
}

.plat-card.epuise {
    opacity: 0.55;
    pointer-events: none;
}

.badge-hambol {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    color: #fff;
    display: inline-block;
    margin-right: 0.25rem;
}

.badge-nouveau { background-color: var(--hambol-forest-light); }
.badge-choix-chef { background-color: var(--hambol-gold); color: #24291f; }
.badge-specialite { background-color: var(--hambol-terracotta); }
.badge-promotion { background-color: #b23a3a; }

.etiquette-jours {
    font-size: 0.72rem;
    color: var(--hambol-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Le footer public est fixe en bas d'écran (toujours visible, coordonnées à portée de main
   en scrollant la carte) plutôt que de n'apparaître qu'en bas du document. Une seule variable
   pour sa hauteur : le padding du body et le bouton "Ma sélection" s'y calent dessus. */
body.a-un-footer-fixe {
    --hauteur-footer-fixe: 3.5rem;
    padding-bottom: var(--hauteur-footer-fixe);
}

.carte-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 35;
    min-height: var(--hauteur-footer-fixe, 3.5rem);
    display: flex;
    align-items: center;
    background-color: var(--hambol-forest);
    color: rgba(255, 255, 255, 0.85);
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}

.carte-footer .carte-footer-ligne {
    width: 100%;
}

.carte-footer a {
    color: #fff;
}

/* Une seule ligne toujours : l'adresse/le téléphone se tronquent avec des points de
   suspension avant de se laisser pousser hors écran, les icônes d'action (WhatsApp, réseaux
   sociaux) restent, elles, toujours entières et cliquables à droite. */
.carte-footer-ligne {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.carte-footer-infos {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carte-footer-separateur {
    margin: 0 0.5rem;
    opacity: 0.6;
}

/* Le crédit © fait partie de la même bande brune que l'adresse/les icônes (pas une seconde
   barre séparée) : il se tasse en premier (facteur de rétrécissement le plus élevé) pour
   laisser la priorité à l'adresse quand la place manque. */
.carte-footer-credit {
    flex: 0 3 220px;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 0.78rem;
    opacity: 0.75;
}

/* En dessous de 480px, l'adresse et le téléphone (informations utiles) ont priorité sur le
   crédit © (texte légal secondaire) : on le masque plutôt que de risquer de tronquer le
   numéro de téléphone. La ligne reste unique et brune, juste sans le crédit. */
@media (max-width: 480px) {
    .carte-footer-credit {
        display: none;
    }
}

.carte-footer-icones {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.site-credit {
    text-align: center;
    font-size: 0.72rem;
    color: var(--hambol-muted);
    padding: 0.85rem 1rem;
}

.site-credit a {
    color: inherit;
    text-decoration: underline;
}

.bouton-icone-header--whatsapp i {
    color: #25d366;
}

.bouton-icone-header--avis i {
    color: var(--hambol-gold);
}

/* Utilisé par le bouton flottant "Ma sélection" (menu/partials/ma-selection.blade.php) —
   le bouton "Donner mon avis" a lui été intégré à la navbar (.bouton-icone-header--avis).
   Remonté au-dessus du footer, désormais fixe en bas d'écran (voir .carte-footer). */
.bouton-avis-flottant {
    position: fixed;
    bottom: calc(var(--hauteur-footer-fixe, 3.5rem) + 0.75rem);
    right: 1.25rem;
    z-index: 30;
    background-color: var(--hambol-terracotta);
    color: #fff;
    border-radius: 999px;
    padding: 0.7rem 1.1rem;
    text-decoration: none;
    box-shadow: var(--shadow-card);
    font-size: 0.9rem;
}

.etoiles-notation {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
}

.etoile-bouton {
    background: transparent;
    border: none;
    padding: 0.4rem;
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    line-height: 1;
    color: var(--hambol-border);
    transition: transform 0.1s ease, color 0.1s ease;
}

.etoile-bouton .bi-star-fill {
    color: var(--hambol-gold);
}

.etoile-bouton:hover {
    transform: scale(1.12);
}

.fiche-plat-scene {
    max-width: 720px;
    margin: 0 auto;
}

.fiche-plat-galerie img {
    width: 100%;
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.fiche-plat-photo-vide {
    aspect-ratio: 4 / 3;
    background-color: var(--hambol-beige);
    border-radius: var(--radius-lg);
}

.fiche-plat-prix {
    color: var(--hambol-terracotta);
}

/* ---------- Carte : filtres persistants + accordéon de catégories ---------- */

.carte-filtres-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--hambol-bg);
    padding-top: 0.75rem;
    margin: 0 -0.01px;
}

.carte-retour-categories {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--hambol-muted);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.carte-section-titre {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    color: var(--hambol-forest);
    margin: 0 0 1rem;
}

.accordeon-categories {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.accordeon-item {
    background-color: var(--hambol-card);
    border: 1px solid var(--hambol-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.accordeon-entete {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.9rem 1rem;
    background: transparent;
    border: none;
    text-align: left;
    color: var(--hambol-text);
    min-height: 44px;
    cursor: pointer;
}

.accordeon-entete:hover {
    background-color: var(--hambol-bg);
}

.accordeon-icone {
    color: var(--hambol-terracotta);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.accordeon-nom {
    font-weight: 600;
    flex: 1;
}

.accordeon-compte {
    font-size: 0.78rem;
    color: var(--hambol-muted);
    background-color: var(--hambol-bg);
    border: 1px solid var(--hambol-border);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-variant-numeric: tabular-nums;
}

.accordeon-chevron {
    color: var(--hambol-muted);
    transition: transform 0.18s ease;
    flex-shrink: 0;
}

.accordeon-chevron.est-ouvert {
    transform: rotate(180deg);
}

.accordeon-corps {
    padding: 0 1rem 1.1rem;
    border-top: 1px solid var(--hambol-border);
    padding-top: 1rem;
}

.acc-enter {
    transition: opacity 160ms ease, transform 160ms ease;
}

.acc-enter-start {
    opacity: 0;
    transform: translateY(-6px);
}

.acc-enter-end {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .acc-enter,
    .accordeon-chevron {
        transition: none;
    }
}

/* ---------- Accueil (choix d'établissement) ---------- */

/* Même dispositif que la scène du livre : un dégradé chaud (terracotta/or) qui irradie
   depuis le haut sur le fond beige, pour que l'espace autour du contenu se lise comme un
   décor voulu plutôt que comme du vide — repris volontairement à l'identique ailleurs dans
   l'app (couverture du livre, page Services) pour une signature visuelle cohérente. */
.accueil-scene {
    min-height: calc(100vh - 61px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 3rem 1.25rem 4rem;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(181, 98, 47, 0.14) 0%, rgba(199, 154, 75, 0.08) 40%, transparent 72%),
        var(--hambol-beige);
}

.accueil-entete {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
}

.accueil-logo {
    width: 72px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(138, 75, 43, 0.18);
    margin-bottom: 0.35rem;
}

.accueil-titre {
    color: var(--hambol-forest);
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
}

.accueil-filet {
    display: block;
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--hambol-gold), transparent);
}

.accueil-sous-titre {
    color: var(--hambol-muted);
    margin: 0;
}

.accueil-liste {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 460px;
}

.carte-choix-etablissement {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background-color: var(--hambol-card);
    border: 1px solid var(--hambol-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.35rem 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.carte-choix-etablissement:hover,
.carte-choix-etablissement:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-lg);
    color: inherit;
}

.carte-choix-etablissement-icone {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 999px;
    background-color: var(--hambol-beige);
    color: var(--hambol-forest);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.carte-choix-etablissement-corps {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.carte-choix-etablissement-nom {
    color: var(--hambol-forest);
    font-size: 1.15rem;
    font-weight: 600;
}

.carte-choix-etablissement-ville {
    color: var(--hambol-muted);
    font-size: 0.85rem;
}

.carte-choix-etablissement-description {
    color: var(--hambol-muted);
    font-size: 0.82rem;
    margin-top: 0.2rem;
    line-height: 1.4;
}

.carte-choix-etablissement-chevron {
    color: var(--hambol-muted);
    flex-shrink: 0;
    font-size: 1.1rem;
    transition: transform 0.18s ease;
}

.carte-choix-etablissement:hover .carte-choix-etablissement-chevron {
    transform: translateX(3px);
    color: var(--hambol-terracotta);
}

/* ---------- Aperçu produit (aperçu au clic) ---------- */

.btn-hambol-plein,
.btn-hambol-contour {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.65rem 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    min-height: 46px;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-hambol-plein {
    background-color: var(--hambol-forest);
    color: #fff;
}

.btn-hambol-plein:hover {
    background-color: var(--hambol-forest-light);
    color: #fff;
}

.btn-hambol-contour {
    background-color: transparent;
    border-color: var(--hambol-border);
    color: var(--hambol-text);
}

.btn-hambol-contour:hover {
    background-color: var(--hambol-beige);
    color: var(--hambol-text);
}

.apercu-produit-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background-color: rgba(20, 12, 6, 0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.apercu-produit-carte {
    background-color: var(--hambol-card);
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.3);
}

.apercu-produit-image-wrap {
    position: relative;
}

.apercu-produit-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background-color: var(--hambol-beige);
}

.apercu-produit-image-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hambol-muted);
    font-size: 2.5rem;
}

.apercu-produit-fermer {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background-color: rgba(20, 12, 6, 0.55);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    backdrop-filter: blur(2px);
}

.apercu-produit-fermer:hover {
    background-color: rgba(20, 12, 6, 0.75);
}

.apercu-produit-badges {
    top: 0.75rem;
    left: 0.75rem;
    right: 3.5rem;
}

.apercu-produit-corps {
    padding: 1.25rem 1.25rem 1.75rem;
}

.apercu-produit-nom {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--hambol-text);
    margin-bottom: 0.4rem;
}

.apercu-produit-description {
    color: var(--hambol-muted);
    margin-bottom: 0.9rem;
}

.apercu-produit-prix {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--hambol-terracotta);
    margin-bottom: 1.1rem;
}

.apercu-produit-prix .prix-barre {
    text-decoration: line-through;
    color: var(--hambol-muted);
    font-weight: 400;
    font-size: 0.75em;
    margin-right: 0.4em;
}

.apercu-produit-prix-demi {
    color: var(--hambol-muted);
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: -0.6rem;
    margin-bottom: 1rem;
}

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

.apercu-produit-actions > * {
    flex: 1 1 180px;
}

@media (min-width: 576px) {
    .apercu-produit-overlay {
        align-items: center;
        padding: 1.5rem;
    }

    .apercu-produit-carte {
        border-radius: var(--radius-lg);
        max-height: 88vh;
    }
}

/* ---------- Vue livre (StPageFlip) ---------- */

/* La "scène" fait ressortir le livre comme un objet posé sur une surface de lecture,
   au lieu de le laisser se fondre dans le fond de page. Position relative : sert d'ancrage
   aux flèches précédent/suivant, superposées au livre plutôt qu'ajoutées sous lui, pour ne
   pas consommer de hauteur d'écran supplémentaire (précieuse sur mobile). */
.livre-carte-scene {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 1.25rem 0.75rem;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(138, 75, 43, 0.16) 0%, rgba(138, 75, 43, 0.05) 45%, transparent 72%),
        var(--hambol-bg);
}

/* Flèches précédent/suivant : feuillettent le livre au clic, en plus du glisser-déposer
   natif de StPageFlip, sans ajouter de ligne de boutons sous le livre. */
.livre-carte-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--hambol-border);
    background-color: var(--hambol-card);
    color: var(--hambol-text);
    font-size: 1.1rem;
    box-shadow: 0 6px 18px rgba(36, 20, 8, 0.18);
}

.livre-carte-fleche-gauche {
    left: 0.25rem;
}

.livre-carte-fleche-droite {
    right: 0.25rem;
}

.livre-carte-fleche:hover:not(:disabled) {
    border-color: var(--hambol-terracotta);
    color: var(--hambol-terracotta);
}

.livre-carte-fleche:disabled {
    opacity: 0.4;
    cursor: default;
}

@media (min-width: 640px) {
    .livre-carte-fleche {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }

    .livre-carte-fleche-gauche {
        left: 0;
    }

    .livre-carte-fleche-droite {
        right: 0;
    }
}

.livre-carte {
    margin: 0 auto;
    background-color: var(--hambol-card);
    box-shadow: 0 30px 60px -24px rgba(36, 20, 8, 0.5), 0 2px 0 rgba(0, 0, 0, 0.04);
}

/* Ombre de reliure : suggère la courbure de la page vers la couture centrale du livre. */
.livre-carte .page.--right {
    box-shadow: inset 14px 0 22px -20px rgba(20, 12, 4, 0.4);
}

.livre-carte .page.--left {
    box-shadow: inset -14px 0 22px -20px rgba(20, 12, 4, 0.4);
}

.livre-carte .page {
    background-color: var(--hambol-card);
    background-image: linear-gradient(180deg, rgba(138, 75, 43, 0.035), transparent 14%);
    padding: 1.75rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    /* Une couverture avec beaucoup de catégories (sommaire) ou une page dont le contenu
       dépasse la hauteur fixée par StPageFlip doit rester consultable au doigt/à la molette
       plutôt que d'être rognée sans indication qu'il manque du contenu. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.page-entete {
    flex-shrink: 0;
    margin: -0.35rem -0.25rem 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--hambol-border);
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hambol-muted);
}

.page-couverture {
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--hambol-beige) 0%, var(--hambol-card) 70%);
}

.page-couverture-cadre {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    max-width: 360px;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid var(--hambol-gold);
    outline: 1px solid var(--hambol-border);
    outline-offset: 7px;
    border-radius: 4px;
}

.page-couverture-logo {
    width: 76px;
    height: auto;
    border-radius: 8px;
}

.page-couverture-filet {
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--hambol-gold), transparent);
}

.page-couverture-titre {
    font-family: var(--font-display);
    color: var(--hambol-forest);
    margin: 0;
}

.page-couverture-description {
    color: var(--hambol-muted);
    font-size: 0.9rem;
    max-width: 32ch;
}

.page-couverture-sommaire {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.page-couverture-sommaire-lien {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.3rem 0;
    color: var(--hambol-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
}

.page-couverture-sommaire-lien i {
    color: var(--hambol-terracotta);
    flex-shrink: 0;
}

.page-couverture-sommaire-nom {
    white-space: nowrap;
}

.page-couverture-sommaire-pointilles {
    flex: 1 1 auto;
    min-width: 12px;
    margin: 0 0.35rem 0.2rem;
    border-bottom: 1px dotted var(--hambol-border);
}

.page-couverture-sommaire-numero {
    color: var(--hambol-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.page-couverture-sommaire-lien:hover .page-couverture-sommaire-nom,
.page-couverture-sommaire-lien:focus-visible .page-couverture-sommaire-nom {
    color: var(--hambol-terracotta);
}

/* Écrans étroits : le livre dispose de moins de hauteur qu'en desktop — on resserre les
   pages (couverture surtout, avec son sommaire) pour que le contenu tienne sans avoir à
   faire défiler la page à chaque catégorie ajoutée. */
@media (max-width: 480px) {
    .livre-carte .page {
        padding: 1.1rem 1rem 0.75rem;
    }

    .page-couverture-cadre {
        gap: 0.5rem;
        padding: 1.1rem 0.85rem;
        outline-offset: 5px;
    }

    .page-couverture-logo {
        width: 52px;
    }

    .page-couverture-titre {
        font-size: 1.35rem;
        line-height: 1.15;
    }

    .page-couverture-description {
        font-size: 0.78rem;
        line-height: 1.3;
    }

    .page-couverture-sommaire {
        gap: 0.1rem;
    }

    .page-couverture-sommaire-lien {
        padding: 0.2rem 0;
        font-size: 0.78rem;
    }

    .page-titre-badge {
        width: 56px;
        height: 56px;
    }

    .page-titre-icone {
        font-size: 1.5rem;
    }

    .page-titre-corps {
        gap: 0.5rem;
    }

    .page-titre-corps h2 {
        font-size: 1.05rem;
    }
}

.page-titre-categorie {
    align-items: center;
    justify-content: space-between;
    text-align: center;
    background: linear-gradient(180deg, var(--hambol-beige) 0%, var(--hambol-card) 100%);
}

.page-titre-corps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    margin: auto 0;
}

.page-titre-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background-color: var(--hambol-card);
    border: 2px solid var(--hambol-gold);
    box-shadow: 0 8px 20px rgba(138, 75, 43, 0.15);
}

.page-titre-icone {
    font-size: 2rem;
    color: var(--hambol-terracotta);
}

.page-titre-corps h2 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--hambol-forest);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.3rem;
}

.page-contenu-liste {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* <x-plat-card> reste le même composant qu'en vue grille : on le passe d'une carte verticale
   à une ligne de "menu" compacte, séparée par un filet, uniquement dans une page de livre. */
.page-contenu-liste .plat-card {
    flex-direction: row;
    align-items: center;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--hambol-border);
    border-radius: 0;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.page-contenu-liste .plat-card:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.page-contenu-liste .plat-card:hover {
    transform: none;
}

.page-contenu-liste .plat-photo-wrap {
    flex-shrink: 0;
    width: 84px;
}

.page-contenu-liste .plat-photo,
.page-contenu-liste .plat-photo-vide {
    aspect-ratio: 1 / 1;
    width: 84px;
    height: 84px;
    border-radius: var(--radius);
}

.page-contenu-liste .plat-body {
    padding: 0.5rem 0.75rem;
}

.page-contenu-liste .plat-description {
    display: none;
}

/* ---------- Page Services ---------- */

.services-scene {
    min-height: calc(100vh - 61px);
    padding: 3rem 1.25rem 4rem;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(181, 98, 47, 0.14) 0%, rgba(199, 154, 75, 0.08) 40%, transparent 72%),
        var(--hambol-beige);
}

.bouton-telecharger-pdf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--hambol-gold);
    background-color: var(--hambol-card);
    color: var(--hambol-forest);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(36, 20, 10, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bouton-telecharger-pdf:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
    color: var(--hambol-forest);
}

.services-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 960px;
    margin: 2.5rem auto 0;
}

.service-carte {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding: 1.25rem 1.4rem;
    background-color: var(--hambol-card);
    border: 1px solid var(--hambol-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--hambol-text);
    box-shadow: 0 2px 10px rgba(36, 20, 10, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.service-carte:hover,
.service-carte:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-lg);
    color: var(--hambol-text);
}

.service-carte-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--hambol-beige);
    color: var(--hambol-terracotta);
    font-size: 1.45rem;
    flex-shrink: 0;
}

.service-carte-corps {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.service-carte-nom {
    font-weight: 600;
    font-size: 1.05rem;
}

.service-carte-compte {
    color: var(--hambol-muted);
    font-size: 0.78rem;
}

.service-carte-chevron {
    color: var(--hambol-muted);
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.service-carte:hover .service-carte-chevron {
    transform: translateX(3px);
    color: var(--hambol-terracotta);
}

/* Fond commun aux trois gabarits de carte (grille de plats, hébergement, prestation) — même
   habillage discret que .accueil-scene/.services-scene, sans le centrage plein écran qui ne
   convient pas à une liste longue et défilante. */
.carte-scene {
    padding: 1.5rem 1rem 3rem;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(181, 98, 47, 0.1) 0%, rgba(199, 154, 75, 0.05) 40%, transparent 72%),
        var(--hambol-bg);
}

.carte-titre-service {
    color: var(--hambol-forest);
}

.service-a-venir-scene {
    max-width: 480px;
    margin: 0 auto;
}

.service-a-venir-icone {
    font-size: 3rem;
    color: var(--hambol-terracotta);
}

.ma-selection-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 40;
}

.ma-selection-panneau {
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ---------- Gabarit "hébergement" ---------- */

.service-hebergement-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.service-hebergement-carte {
    background-color: var(--hambol-card);
    border: 1px solid var(--hambol-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(36, 20, 10, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.service-hebergement-carte:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-3px);
}

@media (hover: none) {
    .service-hebergement-carte:hover {
        transform: none;
    }
}

.service-hebergement-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.service-hebergement-corps {
    padding: 1rem 1.15rem;
}

.service-hebergement-nom {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.service-hebergement-capacite {
    color: var(--hambol-muted);
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}

.service-hebergement-capacite .bi {
    color: var(--hambol-terracotta);
}

.service-hebergement-description {
    color: var(--hambol-muted);
    font-size: 0.88rem;
    margin-bottom: 0.6rem;
}

.service-hebergement-equipements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.service-hebergement-equipements li {
    background-color: var(--hambol-beige);
    color: var(--hambol-forest);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.78rem;
}

.service-hebergement-prix {
    color: var(--hambol-terracotta);
    font-weight: 700;
    margin-bottom: 0;
}

/* ---------- Gabarit "prestation" ---------- */

.service-prestation-liste {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

.service-prestation-ligne {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.85rem 0.6rem;
    margin: 0 -0.6rem;
    border-bottom: 1px solid var(--hambol-border);
    border-radius: var(--radius);
    transition: background-color 0.15s ease;
}

.service-prestation-ligne:hover {
    background-color: var(--hambol-beige);
}

.service-prestation-nom {
    font-weight: 600;
    flex-shrink: 0;
}

.service-prestation-duree {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background-color: var(--hambol-beige);
    color: var(--hambol-forest);
    font-size: 0.75rem;
    font-weight: 500;
}

.service-prestation-description {
    color: var(--hambol-muted);
    font-size: 0.85rem;
    flex: 1 1 auto;
}

.service-prestation-prix {
    color: var(--hambol-terracotta);
    font-weight: 700;
    flex-shrink: 0;
}

/* ---------- Écran de chargement ---------- */

#hambol-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background-color: var(--hambol-forest);
    transition: opacity 0.5s ease;
}

#hambol-splash.hambol-splash-cache {
    opacity: 0;
    pointer-events: none;
}

.hambol-splash-logo {
    width: 96px;
    height: auto;
    border-radius: 12px;
}

.hambol-splash-message {
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity 0.5s ease;
    text-align: center;
    padding: 0 1.5rem;
}

#hambol-splash.hambol-splash-message-visible .hambol-splash-message {
    opacity: 1;
}

.livre-carte-pagination {
    text-align: center;
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--hambol-muted);
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}

/* ---------- Page Satisfaction ---------- */

.satisfaction-scene {
    min-height: calc(100vh - 61px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem 3.5rem;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(181, 98, 47, 0.14) 0%, rgba(199, 154, 75, 0.08) 40%, transparent 72%),
        var(--hambol-beige);
}

.satisfaction-carte {
    width: 100%;
    max-width: 480px;
    background-color: var(--hambol-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-lg);
    padding: 2rem 1.75rem;
}

.satisfaction-progression {
    height: 6px;
    border-radius: 999px;
    background-color: var(--hambol-border);
    overflow: hidden;
}

.satisfaction-progression-remplissage {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hambol-terracotta), var(--hambol-gold));
    transition: width 0.4s ease;
}

.satisfaction-etape-compte {
    margin: 0.5rem 0 0;
    text-align: right;
    font-size: 0.75rem;
    color: var(--hambol-muted);
    font-variant-numeric: tabular-nums;
}

.satisfaction-question {
    color: var(--hambol-forest);
    font-size: 1.3rem;
    margin: 1.5rem 0 1.5rem;
    text-align: center;
}

.satisfaction-texte {
    border-color: var(--hambol-border);
    border-radius: var(--radius);
    resize: vertical;
}

.satisfaction-texte:focus {
    border-color: var(--hambol-terracotta);
    box-shadow: 0 0 0 0.2rem rgba(181, 98, 47, 0.15);
}

.satisfaction-choix {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.satisfaction-choix-bouton {
    border: 1px solid var(--hambol-border);
    border-radius: var(--radius);
    background-color: var(--hambol-card);
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.95rem;
    color: var(--hambol-text);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.satisfaction-choix-bouton:hover {
    border-color: var(--hambol-terracotta);
}

.satisfaction-choix-bouton--actif {
    border-color: var(--hambol-terracotta);
    background-color: rgba(181, 98, 47, 0.1);
    color: var(--hambol-terracotta);
    font-weight: 600;
}

/* Seule transition orchestrée de la page : un léger fondu-glissé entre chaque question,
   et pour l'écran final — pas d'effet dispersé sur chaque élément individuel. */
.satisfaction-etape-enter {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.satisfaction-etape-enter-start {
    opacity: 0;
    transform: translateY(8px);
}

.satisfaction-etape-enter-end {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .satisfaction-etape-enter {
        transition: none;
    }
}

.satisfaction-merci {
    text-align: center;
    padding: 1.5rem 0;
}

.satisfaction-coche {
    width: 84px;
    height: 84px;
    margin-bottom: 1rem;
}

.satisfaction-coche-cercle {
    fill: none;
    stroke: var(--hambol-forest);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 182;
    stroke-dashoffset: 182;
    animation: satisfaction-dessiner-cercle 0.6s ease-out forwards;
}

.satisfaction-coche-trait {
    fill: none;
    stroke: var(--hambol-forest);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: satisfaction-dessiner-coche 0.35s ease-out 0.55s forwards;
}

@keyframes satisfaction-dessiner-cercle {
    to { stroke-dashoffset: 0; }
}

@keyframes satisfaction-dessiner-coche {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .satisfaction-coche-cercle,
    .satisfaction-coche-trait {
        animation: none;
        stroke-dashoffset: 0;
    }
}

.satisfaction-merci-titre {
    color: var(--hambol-forest);
    font-size: 1.4rem;
    margin: 0;
}