/* ============================================
   HÔTEL AU COCHE DE BRIARE — COMPOSANTS DE L’HÔTEL
   Barre de réservation RateTiger (sous chaque héros, en bas de page,
   collante en bas d’écran), chambres, services, chiffres, frise,
   offres, lieux, comparatif. Repris du site Au Coche de Briare
   pour la réservation et les chambres.
   ============================================ */

/* Héros de fiche chambre et lien retour */
.hero-room { height: 78vh; min-height: 520px; }
/* Lien retour posé sur le héros (fiche chambre) */
.hero-back {
    position: absolute;
    top: 96px;
    left: 56px;
    z-index: 5;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(243, 234, 214, 0.75);
    text-decoration: none;
    transition: color 0.3s ease;
}
.hero-back:hover { color: var(--cream); }
@media (max-width: 768px) { .hero-back { left: 22px; top: 84px; } }

/* ============== BARRE DE RÉSERVATION (moteur RateTiger) ==============
   Posée à cheval sur le bas du héros : L'Hôtel, Nos chambres, fiches.
   Sans JS : champs natifs. Avec JS (.is-js) : calendrier et voyageurs
   en panneaux ; en mobile, ces panneaux s'ouvrent en feuille du bas. */
.bk-wrap {
    position: relative;
    z-index: 20;
    max-width: 1120px;
    margin: -64px auto 0;
    padding: 0 32px;
    scroll-margin-top: 110px;
}
/* Panneau ouvert : la barre passe devant la navigation et le fond sombre. */
.bk-wrap.is-open { z-index: 220; }
/* La ligne animée « défiler » passerait sous la barre. */
.hero:has(+ .bk-wrap) .hero-scroll { display: none; }
/* Fiche chambre : la barre se loge dans le bas du héros, sous le titre et sa
   phrase. Elle ne prend aucune place dans le flux (hauteur nulle), donc la
   bande des caractéristiques se colle au héros. Le contenu du héros remonte
   d'autant (padding-bottom) pour lui laisser la place. */
.bk-wrap.bk-room,
.bk-wrap.bk-room:has(.bk-note) { height: 0; margin: 0 auto; }
.bk-room .bk { position: absolute; left: 32px; right: 32px; bottom: 64px; }
.bk-room .bk-note { color: rgba(233, 223, 201, 0.72); }
.hero-has-bk .hero-content { justify-content: flex-end; padding-bottom: 244px; }
.hero-room.hero-has-bk { min-height: 600px; }

.bk {
    position: relative;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--gold-line-soft);
    box-shadow: 0 34px 70px -28px rgba(12, 9, 6, 0.55), 0 8px 22px -12px rgba(12, 9, 6, 0.25);
}
.bk::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-soft) 18%, var(--gold-soft) 82%, transparent);
}
.bk-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr minmax(210px, auto);
}
.bk-cell {
    position: relative;
    min-width: 0;
    padding: 22px 28px 20px;
    border-right: 1px solid rgba(43, 38, 32, 0.1);
    transition: background 0.25s ease;
}
.bk-cell.bk-go { padding: 0; border-right: 0; }
.bk.is-js .bk-cell:not(.bk-go):hover,
.bk-cell.is-active { background: rgba(169, 129, 74, 0.08); }
.bk-cell.is-active::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 0;
    height: 2px;
    background: var(--gold-soft);
}

.bk-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-gold);
    margin-bottom: 6px;
}

/* Valeur affichée (bouton posé par le script, cliquable sur toute la case). */
.bk-display {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    font-family: var(--display);
    font-size: 23px;
    line-height: 1.25;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.bk-display::before { content: ""; position: absolute; inset: 0; }
.bk-display:focus { outline: none; }
.bk-cell:focus-within { background: rgba(169, 129, 74, 0.08); }
.bk-display.is-empty { color: var(--ink-muted); font-style: italic; }
.bk-display small { font-family: var(--body); font-size: 13px; color: var(--ink-muted); margin-left: 6px; }

.bk-submit {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 84px;
    padding: 0 36px;
    background: var(--dark);
    border: 0;
    color: var(--badge-txt);
    font-family: var(--body);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.35s ease, color 0.35s ease;
}
.bk-submit:hover, .bk-submit:focus-visible { background: var(--gold); color: var(--dark); outline: none; }
.bk-submit::after {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 55%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-18deg);
    transition: left 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}
.bk-submit:hover::after { left: 150%; }

.bk-note {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 14px);
    text-align: center;
    font-size: 14px;
    font-style: italic;
    color: var(--ink-muted);
}
.bk-note-ico {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 10px 2px 0;
    border: 1px solid var(--gold-soft);
    transform: rotate(45deg);
}
.bk-wrap:has(.bk-note) { margin-bottom: 36px; }

/* Message « bientôt » : envoi avant le branchement du moteur. */
.bk-soon {
    padding: 14px 28px;
    border-top: 1px solid var(--gold-line-soft);
    background: rgba(169, 129, 74, 0.1);
    text-align: center;
    font-style: italic;
    font-size: 16px;
    color: var(--ink-soft);
}
.bk-soon[hidden] { display: none; }

/* Bas de page : la barre dans l'appel à l'action sombre, à la place du bouton. */
.cta-section.cta-booking { overflow: visible; padding-bottom: 150px; }
.cta-booking .bk-wrap { margin: 48px auto 0; text-align: left; }
.cta-booking .bk { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.cta-booking .bk-note { color: rgba(233, 223, 201, 0.6); }

/* ---------- Sans JavaScript : champs natifs ---------- */
.bk-native,
.bk-count select,
.bk-age select {
    width: 100%;
    padding: 6px 0 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(43, 38, 32, 0.2);
    font-family: var(--body);
    font-size: 17px;
    color: var(--ink);
}
.bk:not(.is-js) .bk-guests-pop { display: flex; gap: 18px; }
.bk:not(.is-js) .bk-count label { font-size: 13px; color: var(--ink-soft); }
.bk:not(.is-js) .bk-count small { display: none; }
.bk.is-js .bk-native { display: none; }

/* ---------- Panneaux (calendrier, voyageurs) ---------- */
.bk-pop-panel,
.bk.is-js .bk-guests-pop {
    position: absolute;
    top: calc(100% + 12px);
    z-index: 30;
    background: var(--paper);
    border: 1px solid var(--gold-line-soft);
    box-shadow: 0 30px 60px -24px rgba(12, 9, 6, 0.5);
    cursor: default;
}
.bk.is-js .bk-guests-pop { display: none; right: 0; width: 360px; padding: 10px 26px 22px; }
.bk.is-js .bk-guests-pop.is-open { display: block; }
.bk-cal { left: 0; width: 720px; max-width: 100%; padding: 24px 28px 20px; }
.bk-cal[hidden] { display: none; }

.bk-sheet-head { display: none; }

/* Calendrier */
.bk-cal-hint { margin-bottom: 14px; font-style: italic; font-size: 15px; color: var(--ink-soft); text-align: center; }
.bk-cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.bk-month-head { position: relative; margin-bottom: 12px; text-align: center; }
.bk-month-title { font-family: var(--display); font-size: 21px; font-style: italic; text-transform: capitalize; color: var(--ink); }
.bk-nav {
    position: absolute;
    top: 50%;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    background: none;
    border: 1px solid var(--gold-line-soft);
    color: var(--ink-gold);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.bk-nav:hover:not(:disabled) { background: var(--dark); color: var(--badge-txt); border-color: var(--dark); }
.bk-nav:disabled { opacity: 0.25; cursor: default; }
.bk-nav.prev { left: 0; }
.bk-nav.next { right: 0; }
.bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.bk-dow { padding: 6px 0; text-align: center; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); }
.bk-day {
    position: relative;
    height: 42px;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--body);
    font-size: 16px;
    color: var(--ink);
    cursor: pointer;
}
.bk-day:hover:not(:disabled) span { border-color: var(--gold-soft); }
.bk-day span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
}
.bk-day:disabled { color: rgba(43, 38, 32, 0.25); cursor: default; }
.bk-day.is-today span { box-shadow: inset 0 -2px 0 var(--gold-soft); }
.bk-day.in-range { background: rgba(169, 129, 74, 0.14); }
.bk-day.is-start { background: linear-gradient(90deg, transparent 50%, rgba(169, 129, 74, 0.14) 50%); }
.bk-day.is-end { background: linear-gradient(90deg, rgba(169, 129, 74, 0.14) 50%, transparent 50%); }
.bk-day.is-sel span { background: var(--dark); color: var(--badge-txt); border-color: var(--dark); }
.bk-day:focus-visible { outline: none; }
.bk-day:focus-visible span { border-color: var(--ink); }
.bk-blank { height: 42px; }

.bk-pop-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(43, 38, 32, 0.1);
}
.bk-nights { font-style: italic; color: var(--ink-soft); }
.bk-link { background: none; border: 0; padding: 0; font-family: var(--body); font-size: 14px; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bk-done {
    padding: 12px 28px;
    background: var(--dark);
    border: 1px solid var(--dark);
    color: var(--badge-txt);
    font-family: var(--body);
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}
.bk-done:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); }

/* Voyageurs */
.bk.is-js .bk-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(43, 38, 32, 0.1);
}
.bk.is-js .bk-count label { font-size: 17px; color: var(--ink); }
.bk.is-js .bk-count small { display: block; font-size: 13px; color: var(--ink-muted); }
.bk.is-js .bk-count select { display: none; }
.bk-step { display: flex; align-items: center; gap: 14px; }
.bk-step button {
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 1px solid var(--gold-line);
    border-radius: 50%;
    color: var(--ink);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bk-step button:hover:not(:disabled) { background: var(--dark); border-color: var(--dark); color: var(--badge-txt); }
.bk-step button:disabled { opacity: 0.3; cursor: default; }
.bk-step output { min-width: 18px; text-align: center; font-family: var(--display); font-size: 22px; }

.bk-ages { padding: 14px 0 6px; border-bottom: 1px solid rgba(43, 38, 32, 0.1); }
.bk-ages[hidden] { display: none; }
.bk-ages-title { margin-bottom: 10px; font-size: 13px; font-style: italic; color: var(--ink-muted); }
.bk-age { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.bk-age[hidden] { display: none; }
.bk-age label { font-size: 15px; color: var(--ink-soft); }
.bk-age select { width: 150px; padding: 8px 10px; border: 1px solid rgba(43, 38, 32, 0.2); background: rgba(255, 255, 255, 0.6); font-size: 15px; }
.bk-age select.is-missing { border-color: #A0412D; box-shadow: 0 0 0 1px #A0412D; }
.bk-guests-pop .bk-pop-foot { border-top: 0; margin-top: 10px; padding-top: 6px; }

.bk-backdrop { display: none; }

/* ---------- Tablette ---------- */
@media (max-width: 980px) {
    .bk-bar { grid-template-columns: 1fr 1fr; }
    .bk-cell { border-bottom: 1px solid rgba(43, 38, 32, 0.1); }
    .bk-cell:nth-child(2) { border-right: 0; }
    .bk-guests { grid-column: 1 / -1; border-right: 0; }
    .bk-go { grid-column: 1 / -1; }
    .bk-submit { min-height: 64px; }
    .bk.is-js .bk-guests-pop { left: 0; right: auto; }
    .hero-has-bk .hero-content { padding-bottom: 400px; }
    section.hero.hero-room.hero-has-bk { min-height: 720px; }
}

/* ---------- Mobile : panneaux en feuille du bas ---------- */
@media (max-width: 720px) {
    .bk-wrap { margin-top: -44px; padding: 0 16px; }
    .bk-room .bk { left: 16px; right: 16px; bottom: 50px; }
    .hero-has-bk .hero-content { padding-top: 70px; padding-bottom: 350px; }
    section.hero.hero-room.hero-has-bk { min-height: 700px; }
    .bk-cell { padding: 16px 18px 14px; }
    .bk-cell.is-active::after { left: 18px; right: 18px; }
    .bk-display { font-size: 20px; }
    .bk-display small { display: none; }
    .bk-note { font-size: 13px; }

    .bk-pop-panel,
    .bk.is-js .bk-guests-pop {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 210;
        width: auto;
        max-width: none;
        max-height: 86vh;
        overflow-y: auto;
        border: 0;
        border-top: 1px solid var(--gold-line);
        padding: 0 20px 22px;
        box-shadow: 0 -20px 50px rgba(12, 9, 6, 0.35);
    }
    .bk-sheet-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 -20px 8px;
        padding: 16px 20px;
        background: var(--paper);
        border-bottom: 1px solid rgba(43, 38, 32, 0.1);
        font-family: var(--display);
        font-size: 22px;
        font-style: italic;
    }
    .bk-sheet-close { width: 36px; height: 36px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--ink); cursor: pointer; }
    .bk-cal-months { grid-template-columns: 1fr; gap: 26px; }
    .bk-nav.prev, .bk-nav.next { display: none; }
    .bk-day span { width: 38px; height: 38px; }
    .bk-pop-foot { position: sticky; z-index: 3; bottom: -22px; margin: 16px -20px -22px; padding: 14px 20px 22px; background: var(--paper); }
    .bk-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 200;
        background: rgba(12, 9, 6, 0.55);
    }
    body.bk-lock { overflow: hidden; }
}

/* ============================================
   CHAMBRES — cartes (accueil, page Hôtel, autres chambres)
   ============================================ */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    max-width: 1160px;
    margin: 64px auto 0;
}
.rooms-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 968px) { .rooms-grid, .rooms-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .rooms-grid, .rooms-grid-3 { grid-template-columns: 1fr; } }

.room-card { display: block; text-decoration: none; color: var(--ink); }

.room-card-media {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--cream-warm);
    margin-bottom: 24px;
}
.room-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.room-card:hover .room-card-media img { transform: scale(1.06); }

/* Rangée « n° — filet — catégorie » */
.room-meta {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-bottom: 12px;
}
.room-meta i { flex: 1; height: 1px; background: rgba(169, 129, 74, 0.35); align-self: center; }

.room-card-body h3 {
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 10px;
    color: var(--ink);
}

.room-card-excerpt { font-size: 15px; line-height: 1.7; color: var(--ink-muted); margin-bottom: 16px; text-wrap: pretty; }

.room-card-link {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold-soft);
    border-bottom: 1px solid rgba(169, 129, 74, 0.5);
    padding-bottom: 4px;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.room-card:hover .room-card-link { color: var(--gold-deep); border-color: var(--gold-deep); }

/* ============================================
   CHAMBRES — liste « collection » (page Nos chambres)
   ============================================ */
.rooms-list {
    display: flex;
    flex-direction: column;
    gap: 130px;
    max-width: 1160px;
    margin: 80px auto 0;
}

.room-row {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
    text-decoration: none;
    color: var(--ink);
}
.room-row.reverse { direction: rtl; }
.room-row.reverse > * { direction: ltr; }

.room-row-media { position: relative; }
.room-frame {
    position: absolute;
    inset: 0;
    border: 1px solid var(--gold-line);
    transform: translate(-16px, 16px);
    pointer-events: none;
}
.room-row.reverse .room-frame { transform: translate(16px, 16px); }

.room-media-inner {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--cream-warm);
    box-shadow: 0 32px 66px rgba(22, 17, 12, 0.22);
}
.room-media-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.room-row:hover .room-media-inner img { transform: scale(1.045); }

.room-row-body h3 {
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    font-size: 34px;
    line-height: 1.15;
    margin-bottom: 18px;
}

.room-specs {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--ink-gold);
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--gold-line-soft);
}
.room-specs span + span::before { content: '·'; color: rgba(169, 129, 74, 0.5); margin-right: 22px; }

.room-row-excerpt {
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink-soft);
    margin-bottom: 28px;
    text-wrap: pretty;
}

.room-link {
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold-soft);
    border-bottom: 1px solid rgba(169, 129, 74, 0.5);
    padding-bottom: 5px;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.room-row:hover .room-link { color: var(--gold-deep); border-color: var(--gold-deep); }

@media (max-width: 820px) {
    .rooms-list { gap: 70px; margin-top: 50px; }
    .room-row, .room-row.reverse { grid-template-columns: 1fr; gap: 34px; direction: ltr; }
    .room-row-body h3 { font-size: 28px; }
    .room-frame { transform: translate(-10px, 10px); }
    .room-row.reverse .room-frame { transform: translate(10px, 10px); }
}

/* Prestations communes (page Nos chambres) */
.prestations-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.prestations-grid--five {
    max-width: 1140px;
    grid-template-columns: repeat(5, 1fr);
}
.prestations-grid--five .prestation { padding: 10px 20px; }
.prestation {
    padding: 10px 28px;
    border-left: 1px solid rgba(169, 129, 74, 0.3);
    text-align: center;
}
.diamond {
    width: 9px;
    height: 9px;
    border: 1px solid var(--gold-soft);
    transform: rotate(45deg);
    margin: 0 auto 20px;
}
.prestation-title {
    font-family: var(--display);
    font-style: italic;
    font-size: 21px;
    color: var(--ink);
    margin-bottom: 8px;
}
.prestation-detail { font-size: 14px; color: var(--ink-muted); line-height: 1.6; }

@media (max-width: 1100px) {
    .prestations-grid--five { grid-template-columns: repeat(3, 1fr); gap: 40px 0; }
}
@media (max-width: 820px) {
    .prestations-grid,
    .prestations-grid--five { grid-template-columns: 1fr 1fr; gap: 40px 0; }
}
@media (max-width: 520px) {
    .prestations-grid,
    .prestations-grid--five { grid-template-columns: 1fr; }
    .prestation { border-left: 0; }
}

/* ============================================
   CHAMBRE — détail
   ============================================ */

/* Bande des caractéristiques (sous la barre de réservation) */
.booking-bar {
    position: relative;
    background: var(--dark-2);
    border-bottom: 1px solid rgba(214, 183, 128, 0.2);
    color: var(--cream-soft);
}

.booking-bar-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.booking-bar-specs {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: rgba(233, 223, 201, 0.8);
}
.booking-bar-specs span + span::before { content: '·'; color: rgba(214, 183, 128, 0.5); margin-right: 20px; }

@media (max-width: 820px) {
    .booking-bar-inner { padding: 14px 22px; justify-content: center; }
    .booking-bar-specs { gap: 8px 14px; justify-content: center; }
    .booking-bar-specs span + span::before { margin-right: 14px; }
}
@media (max-width: 720px) {
    /* Une information par ligne : pas de séparateur orphelin en début de ligne. */
    .booking-bar-specs { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
    .booking-bar-specs span + span::before { content: none; }
}

/* Description : premier paragraphe en exergue */
.room-desc { text-align: center; }
.room-desc > p:first-child {
    font-family: var(--display);
    font-style: italic;
    font-size: 24px;
    line-height: 1.6;
    color: #4A4238;
    margin-bottom: 26px;
}
.room-desc > p {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Galerie de la chambre : jusqu'à 9 photos sur 3 colonnes, visionneuse au clic */
.room-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1160px;
    margin: 0 auto;
}
.room-gallery .g-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--cream-warm);
}
.room-gallery .g-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.room-gallery .g-item:hover img,
.room-gallery .g-item:focus-visible img { transform: scale(1.05); }
.room-gallery .g-item:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

@media (max-width: 900px) {
    .room-gallery { gap: 12px; }
}
@media (max-width: 560px) {
    .room-gallery { gap: 6px; }
}

/* Services & attentions */
.services-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 60px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.services-list li {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(169, 129, 74, 0.22);
    font-size: 16px;
    color: #4A4238;
    text-align: left;
}
.services-list li::before {
    content: '';
    width: 8px;
    height: 8px;
    border: 1px solid var(--gold-soft);
    transform: rotate(45deg);
    flex: none;
}
@media (max-width: 640px) { .services-list { grid-template-columns: 1fr; } }


/* ============================================
   PROPRE AU SITE DE L'HÔTEL
   ============================================ */

/* ---------- Navigation : nom en deux lignes, téléphone ---------- */
nav.site-nav .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
nav.site-nav .brand-kicker {
    font-family: var(--body);
    font-size: 9px;
    letter-spacing: 0.46em;
    color: var(--gold);
    margin-bottom: 4px;
}
nav.site-nav .brand-name { font-size: 15px; }
nav.site-nav .menu { gap: 30px; }
.nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    padding: 10px 18px;
    border: 1px solid rgba(214, 183, 128, 0.45);
    color: var(--badge-txt);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.nav-phone:hover { background: var(--gold); color: var(--dark); border-color: var(--gold); }
@media (max-width: 1360px) {
    nav.site-nav .menu { gap: 22px; }
    nav.site-nav .menu a { letter-spacing: 0.18em; }
}
@media (max-width: 1180px) {
    nav.site-nav .brand-name { font-size: 13px; }
    .nav-phone { font-size: 15px; padding: 14px 26px; }
}

/* ---------- Classement en étoiles ---------- */
.hero-stars,
.footer-stars { display: flex; gap: 9px; }
.hero-stars { justify-content: center; margin: -8px 0 22px; animation: fadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.6s backwards; }
.footer-stars { margin: -8px 0 16px; }
.hero-stars i,
.footer-stars i { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

/* ---------- Barre de réservation sous chaque héros ---------- */
/* Les héros des pages internes laissent la place à la barre qui les chevauche. */
.hero-short + .bk-wrap,
.hero-home + .bk-wrap { margin-top: -64px; }
.hero-short .hero-content { padding-bottom: 40px; }
.bk-wrap.bk-page + .section,
.bk-wrap.bk-page + section { padding-top: clamp(90px, 10vw, 130px); }

/* ---------- Barre collante du bas de l'écran ----------
   Même formulaire, en compact. Pas de transform sur ses ancêtres : les
   panneaux mobiles sont en position fixe. Les panneaux s'ouvrent vers le
   haut. */
.bk-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -140px;
    z-index: 150;
    padding: 0 24px 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: bottom 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease, visibility 0s linear 0.45s;
}
.bk-dock.is-shown {
    bottom: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: bottom 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease, visibility 0s;
}
.bk-dock .bk-wrap { margin: 0 auto; padding: 0; max-width: 980px; }
.bk-dock .bk-wrap:has(.bk-note) { margin-bottom: 0; }
.bk-dock .bk { box-shadow: 0 -10px 40px -12px rgba(12, 9, 6, 0.45), 0 18px 40px -18px rgba(12, 9, 6, 0.6); }
.bk-dock .bk-note { display: none; }
.bk-dock .bk-cell { padding: 12px 22px 11px; }
.bk-dock .bk-label { margin-bottom: 2px; }
.bk-dock .bk-display { font-size: 19px; }
.bk-dock .bk-submit { min-height: 62px; }
.bk-dock .bk-soon { position: absolute; left: 0; right: 0; bottom: 100%; border: 1px solid var(--gold-line-soft); border-bottom: 0; background: var(--paper); }
/* Au-delà du mobile, les panneaux s'ouvrent vers le haut ; en mobile ils
   restent en feuille du bas (position fixe, bas de l'écran). */
@media (min-width: 721px) {
    .bk-dock .bk-pop-panel,
    .bk-dock .bk.is-js .bk-guests-pop { top: auto; bottom: calc(100% + 12px); }
}
/* Place pour la barre en bas de page, une fois le pied de page atteint. */
body.has-dock .site-footer { padding-bottom: 110px; }

@media (max-width: 980px) {
    .bk-dock { padding: 0 12px 10px; }
    .bk-dock .bk-bar { grid-template-columns: 1fr 1fr 1fr auto; }
    .bk-dock .bk-cell { border-bottom: 0; border-right: 1px solid rgba(43, 38, 32, 0.1); padding: 10px 14px 9px; }
    .bk-dock .bk-guests { grid-column: auto; }
    .bk-dock .bk-go { grid-column: auto; }
    .bk-dock .bk-submit { min-height: 56px; padding: 0 20px; letter-spacing: 0.2em; }
}
@media (max-width: 720px) {
    .bk-dock .bk-bar { grid-template-columns: 1fr 1fr 1fr; }
    .bk-dock .bk-go { grid-column: 1 / -1; }
    .bk-dock .bk-cell { padding: 8px 12px 7px; }
    .bk-dock .bk-cell:nth-child(3) { border-right: 0; }
    .bk-dock .bk-label { font-size: 9px; letter-spacing: 0.18em; }
    .bk-dock .bk-display { font-size: 16px; }
    .bk-dock .bk-submit { min-height: 44px; }
    body.has-dock .site-footer { padding-bottom: 150px; }
}

/* ---------- Chiffres clés ---------- */
.facts-section { padding: 0 32px clamp(70px, 8vw, 110px); }
.facts {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1120px;
    margin: 0 auto;
    border-top: 1px solid var(--gold-line-soft);
    border-bottom: 1px solid var(--gold-line-soft);
}
.fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 20px 32px;
    text-align: center;
}
.fact + .fact { border-left: 1px solid var(--gold-line-soft); }
.fact-value {
    font-family: var(--display);
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 300;
    line-height: 1;
    color: var(--gold-soft);
    white-space: nowrap;
}
.fact-label {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-muted);
    max-width: 200px;
}
@media (max-width: 820px) {
    .facts { grid-template-columns: 1fr 1fr; }
    .fact:nth-child(3) { border-left: 0; }
    .fact:nth-child(n+3) { border-top: 1px solid var(--gold-line-soft); }
}

/* ---------- Aperçu des chambres : quatre colonnes ---------- */
.rooms-grid.rooms-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 34px; max-width: 1360px; }
.rooms-grid-4 .room-card-body h3 { font-size: 25px; }
/* Colonnes étroites : la catégorie sur une ligne, la surface en dessous. */
.rooms-grid-4 .room-meta { flex-direction: column; align-items: flex-start; gap: 4px; letter-spacing: 0.2em; }
.rooms-grid-4 .room-meta i { display: none; }
.rooms-grid-4 .room-meta span + i + span { color: var(--ink-muted); letter-spacing: 0.14em; }
@media (max-width: 1180px) { .rooms-grid.rooms-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .rooms-grid.rooms-grid-4 { grid-template-columns: 1fr; } }

/* ---------- Services en pictogrammes ---------- */
.amen-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1120px;
    margin: 0 auto;
    border-top: 1px solid var(--gold-line-soft);
    border-left: 1px solid var(--gold-line-soft);
}
.amen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 36px 22px 32px;
    text-align: center;
    border-right: 1px solid var(--gold-line-soft);
    border-bottom: 1px solid var(--gold-line-soft);
    transition: background 0.35s ease;
}
.amen:hover { background: rgba(169, 129, 74, 0.06); }
.amen-ico { color: var(--gold-soft); margin-bottom: 10px; }
.amen-ico svg { display: block; width: 32px; height: 32px; }
.amen-title { font-family: var(--display); font-size: 21px; line-height: 1.25; color: var(--ink); }
.amen-detail { font-size: 14px; font-style: italic; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 980px) { .amen-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .amen-grid { grid-template-columns: 1fr 1fr; } .amen { padding: 28px 14px 24px; } .amen-title { font-size: 18px; } }

/* ---------- Frise des repères ---------- */
.timeline {
    list-style: none;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
    max-width: 1160px;
    margin: 0 auto;
    padding-top: 10px;
}
.timeline::before {
    content: "";
    position: absolute;
    top: 64px;
    left: 4%;
    right: 4%;
    height: 1px;
    background: var(--gold-line);
}
.timeline-item { position: relative; text-align: center; }
.timeline-date {
    display: block;
    height: 44px;
    font-family: var(--display);
    font-size: 30px;
    font-style: italic;
    color: var(--gold-soft);
    white-space: nowrap;
}
.timeline-dot {
    display: block;
    width: 11px;
    height: 11px;
    margin: 4px auto 26px;
    background: var(--paper);
    border: 1px solid var(--gold-soft);
    transform: rotate(45deg);
    position: relative;
    z-index: 1;
}
.timeline-title {
    font-family: var(--body);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 12px;
}
.timeline-text { font-size: 15px; line-height: 1.7; color: var(--ink-muted); text-wrap: pretty; }
@media (max-width: 900px) {
    .timeline { grid-template-columns: 1fr; gap: 0; max-width: 560px; padding-left: 34px; }
    .timeline::before { top: 8px; bottom: 8px; left: 5px; right: auto; width: 1px; height: auto; }
    .timeline-item { text-align: left; padding-bottom: 38px; }
    .timeline-date { height: auto; margin-bottom: 6px; }
    .timeline-dot { position: absolute; left: -34px; top: 14px; margin: 0; }
}

/* ---------- Cartes « offre » et « lieu » ---------- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 34px;
    max-width: 1240px;
    margin: 0 auto;
}
.card { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.35); border: 1px solid var(--gold-line-soft); }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dark-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 30px 30px 32px; }
.card-eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-gold); margin-bottom: 10px; }
.card-title { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; color: var(--ink); margin-bottom: 14px; }
.card-title em { font-style: italic; color: var(--gold-soft); }
.card-text { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }
.card-text + .card-text { margin-top: 10px; }
.card-lines { list-style: none; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--gold-line-soft); }
.card-lines li { position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 15px; color: var(--ink-soft); }
.card-lines li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border: 1px solid var(--gold-soft); transform: rotate(45deg); }
.card-note { margin-top: auto; padding-top: 18px; font-size: 13px; font-style: italic; color: var(--ink-muted); }
.cards-note { max-width: 640px; margin: 60px auto 0; text-align: center; }
@media (max-width: 1024px) { .cards-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .cards-grid { grid-template-columns: 1fr; } .card-body { padding: 24px 22px 26px; } }

/* ---------- Tableau comparatif des chambres ---------- */
.compare-wrap { max-width: 1060px; margin: 0 auto; }
.compare { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.compare th,
.compare td { padding: 20px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--gold-line-soft); }
.compare thead th {
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-gold);
    border-bottom: 1px solid var(--gold-line);
}
.compare tbody th { font-weight: 400; }
.compare tbody th a { font-family: var(--display); font-size: 22px; color: var(--ink); text-decoration: none; transition: color 0.3s ease; }
.compare tbody th a:hover { color: var(--gold-deep); }
.compare tbody th small { display: block; margin-top: 4px; font-size: 13px; font-style: italic; color: var(--ink-muted); }
.compare td { color: var(--ink-soft); }
.compare tbody tr { transition: background 0.3s ease; }
.compare tbody tr:hover { background: rgba(169, 129, 74, 0.05); }
@media (max-width: 760px) {
    .compare thead { display: none; }
    .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
    .compare tr { padding: 18px 0; border-bottom: 1px solid var(--gold-line-soft); }
    .compare th, .compare td { border: 0; padding: 4px 0; }
    .compare td::before { content: attr(data-label) " · "; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-gold); }
}

/* ---------- Questions fréquentes en accordéon ---------- */
details.faq-item { padding: 0; }
details.faq-item > summary {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 24px 44px 24px 0;
    cursor: pointer;
}
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -7px;
    border-right: 1px solid var(--gold-soft);
    border-bottom: 1px solid var(--gold-soft);
    transform: rotate(45deg);
    transition: transform 0.3s ease, margin 0.3s ease;
}
details.faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
details.faq-item > summary:focus-visible { outline: 1px solid var(--gold-soft); outline-offset: 4px; }
details.faq-item .faq-answer:last-child { padding-bottom: 26px; }

/* ---------- Liens sous un bloc image + texte ---------- */
.feature-links { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 28px; }

/* ---------- Photo panoramique de La Forge ---------- */
.salle-photo { position: relative; max-width: 1160px; margin: 0 auto; }
.salle-photo-media { position: relative; overflow: hidden; aspect-ratio: 21 / 9; box-shadow: 0 34px 70px rgba(22, 17, 12, 0.2); }
.salle-photo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Galerie d'une fiche chambre : vignettes cliquables ---------- */
.room-gallery a.g-item { display: block; cursor: zoom-in; }

/* ---------- Pied de page : coordonnées ---------- */
.footer-contact { margin-top: 22px; }
.footer-contact a { color: rgba(233, 223, 201, 0.75); text-decoration: none; }
.footer-contact a:hover { color: var(--cream); }

/* Une section à filet juste sous la barre de réservation : pas de filet. */
.bk-wrap + .section-sep { border-top: 0; }

/* Panneau ouvert depuis la barre collante : elle passe devant le fond sombre
   (même règle que .bk-wrap.is-open pour les barres de la page). */
.bk-dock:has(.bk-wrap.is-open),
.bk-dock.is-open { z-index: 230; }

/* ---------- Fil d'Ariane (sous la barre de réservation) ---------- */
.breadcrumbs { max-width: 1120px; margin: 0 auto; padding: 22px 32px 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
.breadcrumbs li { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); }
.breadcrumbs li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 14px 2px; border: 1px solid var(--gold-soft); transform: rotate(45deg); }
.breadcrumbs a { color: var(--ink-gold); text-decoration: none; transition: color 0.3s ease; }
.breadcrumbs a:hover { color: var(--gold-deep); }
.bk-wrap:has(.bk-note) + .breadcrumbs { padding-top: 8px; }
.breadcrumbs + .section,
.breadcrumbs + section { padding-top: clamp(60px, 7vw, 100px); }
.breadcrumbs + .section-sep { border-top: 0; }
.booking-bar + .breadcrumbs { padding-top: 26px; }
@media (max-width: 720px) { .breadcrumbs { padding: 18px 16px 0; } .breadcrumbs li { font-size: 10px; letter-spacing: 0.12em; } }

/* ---------- Menu : une ligne par lien, téléphone en icône sur écran moyen ---------- */
nav.site-nav .menu a { white-space: nowrap; }
@media (min-width: 1181px) and (max-width: 1480px) {
    .nav-phone { padding: 10px 12px; }
    .nav-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ============== CARTE DES LIEUX À VISITER (Découvrir Montargis) ==============
   Liste à gauche, carte collante à droite. Sans JavaScript (.places sans
   .is-js), la carte est masquée et la liste occupe toute la largeur. */
.places { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 1240px; margin: 0 auto; }
.places.is-js { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.places:not(.is-js) .places-map-wrap { display: none; }

.places-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.places:not(.is-js) .places-list { display: grid; grid-template-columns: repeat(2, 1fr); }
.place {
    border: 1px solid var(--gold-line-soft);
    background: rgba(255, 255, 255, 0.35);
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.place:hover { border-color: var(--gold-line); }
.place.is-active { border-color: var(--gold-soft); background: #fffdf8; box-shadow: 0 18px 40px -24px rgba(22, 17, 12, 0.45); }
.place-btn {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 20px 22px 12px;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.places:not(.is-js) .place-btn { cursor: default; }
.place-btn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: -2px; }
.place-num {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: 2px;
    color: var(--gold-deep);
    font-family: var(--display);
    font-size: 17px;
    line-height: 1;
}
.place-num::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid var(--gold-soft);
    transform: rotate(45deg);
    transition: background 0.25s ease, border-color 0.25s ease;
}
.place.is-active .place-num { color: var(--badge-txt); }
.place.is-active .place-num::before { background: var(--dark); border-color: var(--dark); }
.place-num { isolation: isolate; }
.place-num::before { z-index: -1; }
.place-thumb { flex: none; width: 84px; height: 64px; overflow: hidden; background: var(--dark-2); }
.place-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.place-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.place-meta { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-gold); }
.place-title { font-family: var(--display); font-size: 23px; line-height: 1.2; color: var(--ink); }
.place-text { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); text-wrap: pretty; }
.place-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 0 22px 16px 70px;
    font-size: 12px;
    color: var(--ink-muted);
}
.place-mode { letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; color: var(--ink-gold); }
.place-trip:not(:empty)::before { content: "· "; }
.place-route {
    margin-left: auto;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-gold);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-line-soft);
    padding-bottom: 2px;
}
.place-route:hover { color: var(--gold-deep); border-color: var(--gold-deep); }

.places-map-wrap { position: sticky; top: 110px; }
.places-map {
    height: min(640px, calc(100vh - 150px));
    min-height: 420px;
    border: 1px solid var(--gold-line-soft);
    box-shadow: 0 34px 70px -34px rgba(22, 17, 12, 0.45);
    background: #e9e2d2;
    z-index: 1;
}
/* Fond de carte adouci, dans la palette du site. */
.places-map .leaflet-tile-pane { filter: sepia(0.35) saturate(0.75) brightness(1.02) contrast(0.95); }
.places-map .leaflet-control-attribution { font-family: var(--body); font-size: 10px; background: rgba(246, 240, 226, 0.85); }
.places-map .leaflet-control-zoom a { color: var(--ink); background: var(--paper); border-color: var(--gold-line-soft); }
.places-map .leaflet-popup-content-wrapper,
.places-map .leaflet-popup-tip { background: var(--paper); color: var(--ink); border-radius: 0; box-shadow: 0 14px 30px -12px rgba(22, 17, 12, 0.4); }
.places-map .leaflet-popup-content { font-family: var(--body); font-size: 14px; }

/* Repères : losange doré numéroté, l'hôtel en sombre. */
.map-pin { background: none; border: 0; }
.map-pin span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-family: var(--display);
    font-size: 17px;
    line-height: 1;
    color: var(--gold-deep);
    isolation: isolate;
}
.map-pin span::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: -1;
    background: var(--paper);
    border: 1px solid var(--gold-soft);
    box-shadow: 0 6px 14px rgba(22, 17, 12, 0.3);
    transform: rotate(45deg);
    transition: background 0.25s ease, transform 0.25s ease;
}
.map-pin.is-active span { color: var(--badge-txt); }
.map-pin.is-active span::before { background: var(--dark); border-color: var(--dark); transform: rotate(45deg) scale(1.25); }
.map-pin-hotel span { color: var(--gold); font-weight: 600; }
.map-pin-hotel span::before { background: var(--dark); border-color: var(--gold); }

/* Itinéraire. */
.map-route-halo { stroke: rgba(246, 240, 226, 0.9); }
.map-route { stroke: var(--gold-deep); stroke-linecap: round; stroke-linejoin: round; }
.map-route-direct { stroke-dasharray: 6 8; }

.places-panel {
    display: none;
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 500;
    background: var(--paper);
    border: 1px solid var(--gold-line-soft);
    border-top: 2px solid var(--gold-soft);
    box-shadow: 0 18px 40px -18px rgba(22, 17, 12, 0.5);
}
.places-panel.is-open { display: block; }
.places-panel-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 14px 18px; }
.places-panel-name { flex: 1 1 100%; font-family: var(--display); font-size: 21px; color: var(--ink); }
.places-panel-trip { font-size: 14px; font-style: italic; color: var(--ink-soft); }
.places-panel-link {
    margin-left: auto;
    padding: 9px 16px;
    background: var(--dark);
    color: var(--badge-txt);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.places-panel-link:hover { background: var(--gold); color: var(--dark); }
.places-reset {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 500;
    padding: 8px 14px;
    background: var(--paper);
    border: 1px solid var(--gold-line-soft);
    font-family: var(--body);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
}
.places-reset:hover { background: var(--dark); color: var(--badge-txt); }

@media (max-width: 900px) {
    .places.is-js { grid-template-columns: 1fr; gap: 24px; }
    .places-map-wrap { position: relative; top: 0; order: -1; }
    .places-map { height: 62vh; min-height: 340px; }
    .places:not(.is-js) .places-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .place-btn { padding: 16px 16px 10px; gap: 12px; }
    .place-thumb { display: none; }
    .place-title { font-size: 20px; }
    .place-foot { padding: 0 16px 14px 60px; }
    .places-panel-link { margin-left: 0; }
}

/* « overflow-x: hidden » sur html/body empêche position: sticky (la carte
   ne resterait pas à l'écran). « clip » coupe pareil sans créer de conteneur
   de défilement. */
@supports (overflow: clip) {
    html, body { overflow-x: clip; }
}
/* La barre de réservation collante occupe le bas de l'écran : la carte
   s'arrête au-dessus, pour que le panneau d'itinéraire reste lisible. */
@media (min-width: 901px) {
    body.has-dock .places-map { height: min(620px, calc(100vh - 260px)); }
}