@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&family=Playfair+Display:wght@500;700&family=Playfair+Display+SC:wght@400;700&display=swap');

/* =====================================================================
   HOTEL ELINA — Design System
   Implémentation de design-system/hotel-elina/MASTER.md
   Style : Elegant Minimal Hospitality (navy + gold, warm neutrals)

   Aucune valeur en dur dans les pages : toujours utiliser ces variables
   et ces classes.
   ===================================================================== */

:root {
    /* --- Couleurs --- */
    --color-primary: #1E3A8A;
    --color-on-primary: #FFFFFF;
    --color-secondary: #E7D9C0;
    --color-on-secondary: #1E293B;
    --color-accent: #A16207;
    --color-accent-hover: #854D0E;
    --color-on-accent: #FFFFFF;
    --color-background: #F8FAFC;
    --color-background-warm: #FAF7F2;
    --color-foreground: #1E293B;
    --color-card: #FFFFFF;
    --color-card-foreground: #1E293B;
    --color-muted: #E9EEF5;
    --color-muted-foreground: #475569;
    --color-border: #E2E8F0;
    --color-destructive: #DC2626;
    --color-on-destructive: #FFFFFF;
    --color-success: #15803D;
    --color-ring: #1E3A8A;

    /* --- Typographie --- */
    --font-display: 'Playfair Display SC', Georgia, serif;
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Karla', system-ui, sans-serif;

    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: clamp(2.25rem, 5vw, 3.5rem);

    /* --- Espacements --- */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 5rem;

    --container: 1200px;
    --gutter: 1rem;

    /* --- Rayons --- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* --- Ombres --- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.18);

    /* Hauteur de l'en-tête sticky (sert au scroll-padding des ancres) */
    --header-height: 80px;

    /* -----------------------------------------------------------------
       Alias de compatibilité
       Anciens noms de tokens encore présents dans certaines vues : ils
       sont redirigés vers les valeurs du design system ci-dessus, pour
       qu'aucune valeur ne soit codée en dur hors de ce fichier.
       ----------------------------------------------------------------- */
    --e-1: var(--space-xs);
    --e-2: var(--space-sm);
    --e-3: 0.75rem;
    --e-4: var(--space-md);
    --e-6: var(--space-lg);
    --e-8: var(--space-xl);
    --e-12: var(--space-2xl);
    --e-16: var(--space-3xl);

    --rayon-sm: var(--radius-sm);
    --rayon-md: var(--radius-md);
    --rayon-lg: var(--radius-lg);
    --rayon-pill: 999px;

    --ombre-sm: var(--shadow-sm);
    --ombre-md: var(--shadow-md);
    --ombre-lg: var(--shadow-lg);

    --taille-petite: var(--text-sm);
    --taille-base: var(--text-base);

    /* Anciennes couleurs « forêt / bois / gris » → palette navy + sable */
    --foret-900: var(--color-primary);
    --foret-700: var(--color-primary);
    --foret-500: var(--color-primary);
    --foret-300: var(--color-secondary);
    --foret-100: var(--color-muted);
    --bois-700: var(--color-accent);
    --bois-500: var(--color-accent-hover);
    --creme: var(--color-background-warm);
    --gris-900: var(--color-foreground);
    --gris-600: var(--color-muted-foreground);
    --gris-200: var(--color-border);
    --gris-100: var(--color-muted);
    --blanc: #FFFFFF;
}

/* --------------------------------------------------------------------
   Réinitialisation
   -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--header-height);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-foreground);
    background: var(--color-background);
    overflow-x: hidden;
}

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

a { color: var(--color-primary); text-decoration: none; cursor: pointer; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: 1.2;
    margin: 0 0 var(--space-md);
    color: var(--color-foreground);
    font-weight: 700;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-md); }

/* Focus visible au clavier (accessibilité) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-ring);
    outline-offset: 3px;
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------
   Mise en page
   -------------------------------------------------------------------- */
.container,
.conteneur {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Pas de retrait en haut : l'en-tête est immédiatement suivi du bandeau
   (ou du hero). L'espace sous le contenu reste confortable. */
main { padding: 0 0 var(--space-2xl); }

.section {
    padding: var(--space-xl) 0;
}
@media (min-width: 1024px) {
    .section { padding: var(--space-2xl) 0; }
}

/* Sections alternées (sans bordure) */
.section-warm,
.section-creme { background: var(--color-background-warm); }
.section-muted,
.section-foret-clair { background: var(--color-muted); }

/* --------------------------------------------------------------------
   Grille responsive
   -------------------------------------------------------------------- */
.grid,
.grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}
@media (min-width: 768px) {
    .grid, .grille { grid-template-columns: repeat(8, 1fr); }
}
@media (min-width: 1024px) {
    .grid, .grille { grid-template-columns: repeat(12, 1fr); }
}

.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (min-width: 1024px) {
    .col-md-3  { grid-column: span 3; }
    .col-md-4  { grid-column: span 4; }
    .col-md-5  { grid-column: span 5; }
    .col-md-6  { grid-column: span 6; }
    .col-md-7  { grid-column: span 7; }
    .col-md-8  { grid-column: span 8; }
    .col-md-12 { grid-column: span 12; }
}

/* --------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------- */
.btn,
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 44px;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color 200ms ease, color 200ms ease,
                border-color 200ms ease, box-shadow 200ms ease;
}
.btn:hover, .bouton:hover { text-decoration: none; }

/* Primaire = CTA de réservation (or) */
.btn-primary,
.bouton-primaire {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-color: var(--color-accent);
}
.btn-primary:hover, .btn-primary:focus,
.bouton-primaire:hover, .bouton-primaire:focus {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-on-accent);
}

/* Secondaire = contour navy */
.btn-secondary,
.bouton-secondaire {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-secondary:hover, .btn-secondary:focus,
.bouton-secondaire:hover, .bouton-secondaire:focus {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* Sur fond sombre / photo */
.btn-light {
    background: transparent;
    color: #FFFFFF;
    border-color: #FFFFFF;
}
.btn-light:hover, .btn-light:focus {
    background: #FFFFFF;
    color: var(--color-primary);
}

/* Accent bois (ancien) → rattaché au navy pour rester dans la palette */
.bouton-accent {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}
.bouton-accent:hover, .bouton-accent:focus {
    background: #16306F;
    border-color: #16306F;
    color: var(--color-on-primary);
}

.btn-danger,
.bouton-danger {
    background: var(--color-destructive);
    color: var(--color-on-destructive);
    border-color: var(--color-destructive);
}

.btn:disabled, .bouton:disabled,
.btn[disabled], .bouton[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Bouton d'en-tête « Réserver » */
.bouton-reserver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 24px;
    background: var(--color-accent);
    color: var(--color-on-accent) !important;
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease;
}
.bouton-reserver:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    text-decoration: none !important;
}

/* Lien-bouton discret (tableaux admin) */
.bouton-lien {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary);
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
    transition: color 200ms ease;
}
.bouton-lien:hover { color: var(--color-accent-hover); }
.bouton-lien.danger { color: var(--color-destructive); }

/* --------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------- */
.card,
.carte {
    background: var(--color-card);
    color: var(--color-card-foreground);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 200ms ease;
}
.card:hover, .carte:hover { box-shadow: var(--shadow-lg); }

a.card, .card--link, a.carte { cursor: pointer; }

.card-body,
.carte-corps {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
}

/* Photo de carte : ratio 4:3 */
.card-image,
.carte-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--color-muted);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-title,
.carte-titre {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0;
}

/* Prix : or, gras */
.card-price,
.carte-tarif {
    font-weight: 700;
    color: var(--color-accent);
}

/* Prix mis en avant sur la fiche détaillée d'une chambre */
.prix-chambre { font-size: var(--text-xl); }

/* Actions d'une carte chambre : « Voir la chambre » + « Réserver » */
.carte-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: auto;
}
.carte-actions .btn { flex: 1 1 auto; }

/* --------------------------------------------------------------------
   Badges de statut
   -------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
}
.badge-attente   { background: #FEF3C7; color: #92400E; }
.badge-confirmee { background: #DCFCE7; color: var(--color-success); }
.badge-annulee   { background: #FEE2E2; color: #991B1B; }
.badge-terminee  { background: var(--color-muted); color: var(--color-muted-foreground); }
.badge-nouvelle  { background: #DBEAFE; color: var(--color-primary); }

/* Équipement d'une chambre : neutre sable (ce n'est pas un statut) */
.badge-equipement {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    font-weight: 500;
    margin: 0 var(--space-xs) var(--space-xs) 0;
}

/* --------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------- */
.field,
.champ { margin-bottom: var(--space-md); }

.field label,
.champ label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--color-foreground);
}

.input,
.champ input,
.champ select,
.champ textarea,
select, textarea {
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-foreground);
    background: #FFFFFF;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.input:focus,
.champ input:focus,
.champ select:focus,
.champ textarea:focus,
select:focus, textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.2);
}

.input[aria-invalid="true"],
.champ.en-erreur input,
.champ.en-erreur select,
.champ.en-erreur textarea {
    border-color: var(--color-destructive);
}

.field-error,
.champ .erreur {
    color: var(--color-destructive);
    font-size: var(--text-sm);
    margin-top: var(--space-xs);
}

.field-hint,
.champ .aide {
    color: var(--color-muted-foreground);
    font-size: var(--text-sm);
    margin-top: var(--space-xs);
}

/* --------------------------------------------------------------------
   Alertes
   -------------------------------------------------------------------- */
.alerte {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    border-left: 4px solid transparent;
}
.alerte-succes { background: #DCFCE7; color: #14532D; border-color: var(--color-success); }
.alerte-erreur { background: #FEE2E2; color: #7F1D1D; border-color: var(--color-destructive); }
.alerte-info   { background: #DBEAFE; color: #1E3A8A; border-color: var(--color-primary); }

/* --------------------------------------------------------------------
   En-tête / Navigation
   -------------------------------------------------------------------- */
.entete-site {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-card);
    box-shadow: var(--shadow-sm);
}

.entete-site .conteneur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: var(--header-height);
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

.logo-site {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.logo-site:hover { color: var(--color-primary); text-decoration: none; }
.logo-site img {
    object-fit: cover;
    border-radius: var(--radius-sm);
}
/* Taille du logo propre à l'en-tête public (la barre latérale admin et la
   carte de connexion gardent la taille portée par leurs attributs HTML). */
.entete-site .logo-site img { width: 64px; height: 58px; }

.nav-principale ul {
    list-style: none;
    display: flex;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.nav-principale a {
    color: var(--color-foreground);
    font-weight: 500;
    padding: var(--space-sm) 0;
    transition: color 200ms ease;
}
.nav-principale a:hover,
.nav-principale a[aria-current="page"] {
    color: var(--color-accent);
    text-decoration: none;
}

/* Accès au back-office : présent dans la navigation mais visuellement
   secondaire, pour ne pas concurrencer les rubriques destinées aux clients. */
.nav-principale a[href="/admin/connexion"] {
    color: var(--color-muted-foreground);
    font-size: var(--text-sm);
    font-weight: 400;
}
.nav-principale a[href="/admin/connexion"]:hover { color: var(--color-accent); }

/* Bouton hamburger (mobile) */
.nav-bascule {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-primary);
    transition: background-color 200ms ease, border-color 200ms ease;
}
.nav-bascule:hover { background: var(--color-muted); }

/* Sous 1024 px la navigation passe derrière le bouton hamburger : les deux
   doivent basculer au MÊME point de rupture, faute de quoi le menu complet
   et le hamburger s'affichent ensemble et l'en-tête se casse sur deux lignes. */
@media (max-width: 1179px) {
    .nav-bascule { display: inline-flex; }

    /* Le nom de l'hôtel ne doit pas se casser sur plusieurs lignes */
    .logo-site { font-size: var(--text-base); gap: var(--space-xs); }
    .entete-site .logo-site img { width: 48px; height: 43px; }

    .entete-site .conteneur { position: relative; flex-wrap: nowrap; }

    .nav-principale {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-card);
        box-shadow: var(--shadow-lg);
        padding: var(--space-md) var(--gutter);
    }
    .nav-principale.est-ouvert { display: block; }
    .nav-principale ul { flex-direction: column; gap: 0; }
    .nav-principale li { border-bottom: 1px solid var(--color-border); }
    .nav-principale li:last-child { border-bottom: none; }
    .nav-principale a { display: block; padding: var(--space-md) 0; }
}

/* Très petits écrans : l'en-tête doit tenir sur une seule ligne */
@media (max-width: 560px) {
    /* Le visuel du logo porte déjà le nom de l'établissement : sur mobile on
       ne garde que l'image, le nom restant lisible par les lecteurs d'écran. */
    .entete-site .logo-site .nom-etablissement {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .bouton-reserver { padding: 12px var(--space-md); }
    .entete-site .conteneur { gap: var(--space-sm); }
}

/* --------------------------------------------------------------------
   Hero (photo plein écran + dégradé de lisibilité)
   -------------------------------------------------------------------- */
/* Pleine largeur même à l'intérieur d'un conteneur centré */
.pleine-largeur,
.hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Le fond s'étend sur toute la largeur, mais le contenu reste centré */
.pleine-largeur > * {
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: var(--space-3xl) var(--gutter);
    background-size: cover;
    background-position: center;
    text-align: center;
    color: #FFFFFF;
}

/* Photo du hero de la page d'accueil */
.hero-accueil { background-image: url('/assets/images/hero-accueil.jpg'); }

/* Bandeau réduit des pages intérieures : même traitement, moitié moins haut.
   L'image vient de la galerie (tirée au hasard) via --image-bandeau. */
.hero-compact {
    min-height: 0;
    padding: var(--space-2xl) var(--gutter);
    background-image: var(--image-bandeau);
}
.hero-compact h1 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-sm);
}
.hero-compact p { font-size: var(--text-base); margin-bottom: 0; }

/* Écart réduit entre le bandeau (titre) et le contenu qui le suit */
.hero-compact + .section,
.hero-compact + * > .section:first-child { padding-top: var(--space-lg); }
.hero-compact + p,
.hero-compact + div,
.hero-compact + form { margin-top: var(--space-lg); }
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.25));
}

/* Le bandeau des pages intérieures affiche une photo TIRÉE AU HASARD dans la
   galerie : le voile doit donc rester lisible sur la plus claire d'entre
   elles, et pas seulement sur la photo de hero choisie à la main. Mesuré sur
   l'ensemble des photos publiées, ce réglage tient le seuil de 4,5:1 exigé
   pour le sous-titre, qui est en taille de texte courant : 4,87:1 au pire,
   5,55:1 en médiane. Ne pas alléger le voile sans refaire cette mesure. */
.hero-compact::before {
    background: linear-gradient(rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.58));
}
.hero > * { position: relative; z-index: 1; }

.hero h1 {
    font-family: var(--font-display);
    color: #FFFFFF;
    margin-bottom: var(--space-md);
}
.hero p {
    color: #F1F5F9;
    font-size: var(--text-lg);
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-lg);
}

/* --------------------------------------------------------------------
   Formulaire de réservation rapide (encadré hero)
   -------------------------------------------------------------------- */
.booking-box {
    background: var(--color-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-lg);
    text-align: left;
}
@media (min-width: 1024px) {
    .booking-box { margin-top: calc(-1 * var(--space-2xl)); }
}
.booking-box .booking-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    align-items: end;
}
@media (min-width: 768px) {
    .booking-box .booking-grid { grid-template-columns: repeat(5, 1fr); }
}

/* --------------------------------------------------------------------
   Carrousel
   -------------------------------------------------------------------- */
.carrousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.carrousel-piste { display: flex; transition: transform 300ms ease; }
.carrousel-diapo { position: relative; flex: 0 0 100%; aspect-ratio: 16 / 7; }
.carrousel-diapo img { width: 100%; height: 100%; object-fit: cover; }

.carrousel-legende {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.75));
    color: #FFFFFF;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    font-weight: 600;
}

.carrousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-primary);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    transition: background-color 200ms ease;
}
.carrousel-nav:hover { background: #FFFFFF; }
.carrousel-precedent { left: var(--space-md); }
.carrousel-suivant  { right: var(--space-md); }

.carrousel-points {
    position: absolute;
    bottom: var(--space-sm);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-sm);
}
/* La puce reste visuellement petite, mais sa zone cliquable atteint 24 px
   (WCAG 2.2, « taille de cible minimale ») grâce au remplissage et au fond
   transparent : le repère visuel est dessiné par background-clip. */
.carrousel-points button {
    width: 24px; height: 24px;
    padding: 7px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    background-clip: content-box;
    cursor: pointer;
    transition: background-color 200ms ease;
}
.carrousel-points button.actif { background: var(--color-accent); }

@media (max-width: 767px) {
    .carrousel-diapo { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------
   Galerie + visionneuse (lightbox)
   -------------------------------------------------------------------- */
.filtres-galerie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}
.filtres-galerie .bouton,
.filtres-galerie .btn {
    min-height: 40px;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
}
.filtres-galerie .filtre-actif {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}

.declencheur-lightbox {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: rgba(15, 23, 42, 0.6);
}
/* L'attribut HTML hidden doit rester prioritaire sur display:flex */
.lightbox:not([hidden]) { display: flex; }

.lightbox figure {
    margin: 0;
    max-width: min(90vw, 900px);
    text-align: center;
}
.lightbox img {
    max-width: 100%;
    max-height: 75vh;
    border-radius: var(--radius-lg);
}
.lightbox figcaption {
    color: #FFFFFF;
    margin-top: var(--space-md);
}

.lightbox-fermer {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-size: var(--text-2xl);
    line-height: 1;
    cursor: pointer;
}

/* --------------------------------------------------------------------
   Modales
   -------------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.6);
}
.modal {
    background: var(--color-card);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-xl);
    max-width: 500px;
    width: 90%;
}

/* --------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------- */
.pied-site {
    background: var(--color-primary);
    color: #FFFFFF;
    padding: var(--space-2xl) 0 var(--space-lg);
    margin-top: var(--space-3xl);
}
.pied-site a { color: #FFFFFF; }
.pied-site a:hover { color: var(--color-secondary); }

.pied-colonnes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}
@media (min-width: 768px) {
    .pied-colonnes { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .pied-colonnes { grid-template-columns: repeat(4, 1fr); }
}

.pied-site h2,
.pied-site h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: #FFFFFF;
    margin-bottom: var(--space-md);
}
.pied-site ul { list-style: none; margin: 0; padding: 0; }
.pied-site li { margin-bottom: var(--space-sm); }
.pied-site p { color: #E2E8F0; }

.pied-reseaux {
    display: flex;
    gap: var(--space-md);
}
.pied-reseaux a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    transition: background-color 200ms ease, border-color 200ms ease;
}
.pied-reseaux a:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #FFFFFF;
}

.pied-legal {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: var(--text-sm);
    color: #CBD5E1;
}

/* --------------------------------------------------------------------
   Icônes SVG (jeu unique, pas d'emoji)
   -------------------------------------------------------------------- */
.icone {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icone-sm { width: 16px; height: 16px; }
.icone-lg { width: 32px; height: 32px; }

.fait-cle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-muted-foreground);
    font-size: var(--text-sm);
}

/* Étoiles d'avis (or) */
.etoiles { display: inline-flex; gap: 2px; color: var(--color-accent); }
.etoiles .icone { fill: currentColor; stroke: none; }

/* --------------------------------------------------------------------
   Back-office
   -------------------------------------------------------------------- */
.admin-corps { display: flex; min-height: 100vh; }

.admin-barre-laterale {
    width: 240px;
    flex-shrink: 0;
    background: var(--color-primary);
    color: #FFFFFF;
    padding: var(--space-lg) 0;
    display: flex;
    flex-direction: column;
}
.admin-barre-laterale .logo-site {
    color: #FFFFFF;
    padding: 0 var(--space-lg) var(--space-lg);
    font-size: var(--text-base);
}

.admin-nav { list-style: none; margin: 0; padding: 0; flex: 1; }
.admin-nav a {
    display: block;
    padding: var(--space-sm) var(--space-lg);
    color: #E2E8F0;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.admin-nav a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    text-decoration: none;
}
.admin-nav a.actif {
    background: rgba(255, 255, 255, 0.12);
    border-left-color: var(--color-accent);
    color: #FFFFFF;
}

.badge-compteur {
    display: inline-block;
    margin-left: var(--space-sm);
    padding: 1px 7px;
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-radius: 999px;
    font-size: 0.7rem;
}

.admin-principal { flex: 1; min-width: 0; background: var(--color-background); }

.admin-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-xl);
    background: var(--color-card);
    box-shadow: var(--shadow-sm);
}

.admin-contenu { padding: var(--space-xl); }

.admin-grille-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.stat-carte {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
}
.stat-carte .valeur {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-sm);
}
.stat-carte .libelle { color: var(--color-muted-foreground); font-size: var(--text-sm); }

.tableau-admin {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.tableau-admin th,
.tableau-admin td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.tableau-admin th {
    background: var(--color-muted);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
}
.tableau-admin tbody tr:hover { background: var(--color-background-warm); }
.tableau-admin td.actions { white-space: nowrap; }
.tableau-admin td.actions a,
.tableau-admin td.actions button { margin-right: var(--space-sm); }

/* --- Comptabilité --- */

/* Colonnes de montants : alignées à droite, chiffres de même largeur */
.tableau-admin th.montant,
.tableau-admin td.montant {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tableau-admin tr.ligne-total td {
    background: var(--color-muted);
    font-weight: 700;
    color: var(--color-primary);
    border-top: 2px solid var(--color-primary);
}

/* Mois non encore échus de l'exercice en cours */
.tableau-admin tr.mois-a-venir td { color: var(--color-muted-foreground); }

/* Filtres de période (formulaires en ligne) */
.filtres-periode {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.filtres-periode .champ { margin-bottom: 0; }
.filtres-periode input,
.filtres-periode select { width: auto; min-width: 150px; }

/* Graphique de tendance (barres CSS, sans dépendance externe) */
.graphique-barres {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    height: 180px;
    padding: var(--space-md);
    background: var(--color-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-sm);
}
.barre-mois {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: var(--space-xs);
}
.barre-mois .barre {
    width: 100%;
    max-width: 56px;
    height: var(--hauteur, 2%);
    background: var(--color-primary);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: background-color 200ms ease;
}
.barre-mois:hover .barre { background: var(--color-accent); }
.barre-mois .barre-valeur,
.barre-mois .barre-libelle {
    font-size: var(--text-sm);
    color: var(--color-muted-foreground);
}
.barre-mois .barre-valeur { font-weight: 600; color: var(--color-foreground); }

.barre-outils-admin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.miniature-admin {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

@media (max-width: 1023px) {
    .admin-corps { flex-direction: column; }
    .admin-barre-laterale { width: 100%; }
    .admin-nav { display: flex; flex-wrap: wrap; }
    .admin-nav li { flex: 1 1 auto; }
    .admin-contenu { padding: var(--space-md); }
}

/* Page de connexion back-office */
.page-connexion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
}
.carte-connexion {
    width: 100%;
    max-width: 400px;
    background: var(--color-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-xl);
}
.carte-connexion .logo-site {
    justify-content: center;
    margin-bottom: var(--space-lg);
}

/* --------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------- */
.texte-centre { text-align: center; }
.texte-secondaire { color: var(--color-muted-foreground); }
.espace-haut { margin-top: var(--space-xl); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lien d'évitement (accessibilité clavier) */
.lien-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: #FFFFFF;
    border-radius: 0 0 var(--radius-md) 0;
}
.lien-evitement:focus {
    left: 0;
    color: #FFFFFF;
    text-decoration: none;
}

/* --------------------------------------------------------------------
   Pages d'erreur (403, 404, 405)
   -------------------------------------------------------------------- */
.page-erreur {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--gutter);
    background: var(--color-background-warm);
}

.carte-erreur {
    width: 100%;
    max-width: 560px;
    text-align: center;
    background: var(--color-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2xl) var(--space-xl);
}

.carte-erreur .logo-erreur {
    width: 72px;
    height: 65px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin: 0 auto var(--space-lg);
}

.carte-erreur .code-erreur {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--color-accent);
    margin: 0 0 var(--space-sm);
}

.carte-erreur h1 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-md);
}

.carte-erreur p { color: var(--color-muted-foreground); }

.actions-erreur {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

/* --------------------------------------------------------------------
   Photo pleine largeur d'une section
   Le ratio est fixé en CSS : la place est réservée avant même que
   l'image soit chargée, ce qui évite le saut de mise en page (CLS).
   -------------------------------------------------------------------- */
.photo-large {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--color-muted);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
@media (max-width: 767px) {
    .photo-large { aspect-ratio: 4 / 3; }
}

/* Vignette utilisée hors d'une carte (grille galerie, photos restaurant) :
   contrairement à .carte-image, elle n'est pas collée à un corps de carte
   et doit donc être arrondie sur ses quatre coins. */
.photo-vignette { border-radius: var(--radius-lg); }

/* Miniatures sous la photo principale d'une fiche chambre */
.photo-miniature { border-radius: var(--radius-md); }

.espace-haut-moyen { margin-top: var(--space-md); }

/* --------------------------------------------------------------------
   Accessibilité : taille des cibles et plan de titres
   -------------------------------------------------------------------- */

/* Les liens du pied de page faisaient 19 px de haut : sous le minimum de
   24 px exigé par WCAG 2.2, et difficiles à viser au doigt. */
.pied-site a,
.pied-site li a {
    display: inline-block;
    padding: var(--space-xs) 0;
    min-height: 24px;
}

/* Un <h2> dont la taille visuelle reste celle d'un sous-titre : le plan du
   document doit être correct sans imposer une typographie démesurée. */
.titre-compact {
    font-size: var(--text-xl);
}

/* Caractéristiques d'une chambre : paires libellé / valeur */
.fiche-caracteristiques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.fiche-caracteristiques dt {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted-foreground);
}
.fiche-caracteristiques dd {
    margin: var(--space-xs) 0 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-primary);
}

/* --------------------------------------------------------------------
   Coordonnées cliquables (page Contact)
   -------------------------------------------------------------------- */
.liste-contacts {
    list-style: none;
    margin: 0 0 var(--space-lg);
    padding: 0;
    display: grid;
    gap: var(--space-sm);
}

.liste-contacts a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 56px;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.liste-contacts a:hover,
.liste-contacts a:focus-visible {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.libelle-contact {
    font-size: var(--text-sm);
    color: var(--color-muted-foreground);
}
.valeur-contact {
    font-weight: 600;
    color: var(--color-primary);
}

/* Lien de retour et numéro de téléphone cliquable : zone de 24 px minimum
   (WCAG 2.2), sans alourdir la mise en page. */
.lien-retour,
.lien-telephone {
    display: inline-block;
    padding: var(--space-xs) 0;
    min-height: 24px;
}
.lien-telephone { font-weight: 600; }