/*
 * Header Villa O'Kalm — design : templates/design/_handoff-header/ (variante « bandeau de cartes »).
 * Chargé par base.html.twig (hors app.css, comme l'ancien header-navy.css). Tout est scopé sous .hb.
 * États : .scrolled (barre compacte et opaque après défilement), .hide (masquée en descendant),
 * .hb--solid (pages sans hero photo), .open (menu ouvert).
 * Sticky « intelligent » (option B du handoff) piloté par site_header_controller.js.
 */
.hb {
    --hb-ink: #181e26;
    --hb-navy: #1E3A4C;
    --hb-sun: #F4C542;
    --hb-sun-2: #E8B629;
    --hb-line: rgba(255, 255, 255, .14);
    --hb-height: 96px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    color: #fff;
    font-family: 'DM Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.hb *, .hb *::before, .hb *::after { box-sizing: border-box; border-radius: 0; }
.hb a { color: inherit; text-decoration: none; }
.hb a:hover { color: var(--hb-sun); }
.hb .lnum { font-variant-numeric: lining-nums; }
.hb .eyebrow { margin: 0; letter-spacing: .26em; text-transform: uppercase; font-size: 11px; font-weight: 600; color: var(--hb-sun); }
.hb svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Ombrage de lisibilité sur le hero */
.hb .shade {
    position: absolute; top: 0; left: 0; right: 0; height: 220px; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,16,22,.78) 0%, rgba(10,16,22,.5) 35%, rgba(10,16,22,.18) 70%, rgba(10,16,22,0) 100%);
    transition: opacity .4s;
}
.hb.open .shade, .hb.scrolled .shade, .hb--solid .shade { opacity: 0; }

/* Barre */
.hb .bar {
    position: relative; z-index: 3;
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
    height: var(--hb-height); padding: 0 clamp(20px, 3vw, 48px);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    transition: height .45s cubic-bezier(.2,.7,.2,1), background-color .45s, border-color .45s,
                box-shadow .45s, transform .5s cubic-bezier(.2,.7,.2,1);
}
.hb--solid .bar { background: rgba(24, 30, 38, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Sticky : barre compacte après défilement, masquée en descendant (jamais quand le menu est ouvert) */
.hb.scrolled .bar {
    height: 72px; background: rgba(24, 30, 38, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, .08); box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .6);
}
.hb.hide:not(.open) .bar { transform: translateY(-100%); }
.hb.open .bar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

.hb .menu-btn {
    display: inline-flex; align-items: center; gap: 16px; justify-self: start;
    background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
    font: 600 11.5px 'DM Sans', sans-serif; letter-spacing: .26em; text-transform: uppercase;
}
.hb .menu-btn em { font-style: normal; display: inline-block; height: 14px; overflow: hidden; line-height: 14px; }
.hb .menu-btn em span { display: block; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.hb.open .menu-btn em span { transform: translateY(-14px); }
.hb .lines { width: 30px; height: 12px; position: relative; }
.hb .lines::before, .hb .lines::after {
    content: ""; position: absolute; left: 0; height: 1px; background: currentColor;
    transition: transform .45s cubic-bezier(.2,.7,.2,1), width .35s, top .45s;
}
.hb .lines::before { top: 0; width: 30px; }
.hb .lines::after { top: 11px; width: 20px; }
.hb .menu-btn:hover .lines::after { width: 30px; }
.hb.open .lines::before { top: 6px; transform: rotate(45deg); }
.hb.open .lines::after { top: 6px; width: 30px; transform: rotate(-45deg); }

.hb .brand { display: block; }
.hb .logo { display: block; height: 42px; width: auto; filter: drop-shadow(0 1px 6px rgba(0,0,0,.25)); transition: height .45s cubic-bezier(.2,.7,.2,1); }
.hb.scrolled .logo { height: 32px; }

.hb .r { display: flex; align-items: center; gap: 26px; justify-self: end; }
.hb .r .tel { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.hb .r .tel svg { color: var(--hb-sun); }
.hb .lang { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .16em; font-weight: 600; }
.hb .lang b { color: var(--hb-sun); font-weight: 600; }
.hb .lang span { opacity: .5; }
.hb .hb-btn {
    display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px;
    font: 600 11.5px 'DM Sans', sans-serif; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
    background: var(--hb-sun); color: var(--hb-ink); transition: background .25s;
}
.hb .hb-btn:hover { background: var(--hb-sun-2); color: var(--hb-ink); }

/* Menu plein écran */
.hb .menu {
    position: fixed; inset: 0; z-index: 2; padding-top: var(--hb-height);
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    background: rgba(24, 30, 38, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s linear .6s;
}
.hb.open .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hb.scrolled .menu { padding-top: 72px; }

.hb .cols {
    flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center;
    max-width: 900px; width: 100%; margin: 0 auto; padding: clamp(28px, 4vw, 52px) 32px 20px;
}
.hb .cols > div { border-left: 1px solid var(--hb-line); padding-left: 36px; }
.hb .cols > div:first-child { border-left: 0; padding-left: 0; }
.hb .big { display: flex; flex-direction: column; align-items: flex-start; }
.hb .big .eyebrow { margin-bottom: 20px; }
.hb .big a {
    position: relative; display: inline-block; padding: 4px 0 6px; color: #fff; transition: color .3s;
    font-family: 'Cormorant Garamond', serif; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.15;
}
.hb .big a::after {
    content: ""; position: absolute; left: 0; bottom: 2px; height: 1px; width: 100%; background: var(--hb-sun);
    transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.hb .big a:hover, .hb .big a.is-active { color: var(--hb-sun); }
.hb .big a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Bandeau hébergements */
.hb .row { max-width: 1240px; width: 100%; margin: 0 auto; padding: 12px 32px 40px; }
.hb .row .eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.hb .row .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--hb-line); }
.hb .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.hb .cards a { display: flex; flex-direction: column; gap: 16px; color: #fff; }
.hb .cards .th { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(255,255,255,.06); }
.hb .cards .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hb .cards .th::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hb-sun);
    transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.hb .cards a:hover .th::after { transform: scaleX(1); }
.hb .cards .meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.hb .cards b { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 21px; line-height: 1.1; white-space: nowrap; transition: color .3s; }
.hb .cards a:hover b { color: var(--hb-sun); }
.hb .cards .info { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: #fff; white-space: nowrap; }
.hb .cards .info em { font-style: normal; font-family: 'Cormorant Garamond', serif; font-size: 17px; color: #fff; }
.hb .cards .info em small { font-family: 'DM Sans', sans-serif; font-size: 11px; opacity: .8; }

/* Bande contact */
.hb .strip {
    border-top: 1px solid var(--hb-line); padding: 22px 32px;
    display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 40px;
    color: rgba(255,255,255,.75); font-size: 13.5px;
}
.hb .strip a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: color .3s; }
.hb .strip svg { color: var(--hb-sun); }

/* Défilement bloqué quand le menu est ouvert */
html.hb-locked { overflow: hidden; }
/* Hauteur visible de la barre, pour les éléments sticky qui se calent dessous (jump nav Offres & Services) :
   classes posées sur <html> par site_header_controller.js */
html { --hb-offset: 96px; }
html.hb-scrolled { --hb-offset: 72px; }
html.hb-hidden { --hb-offset: 0px; }
/* Ancres (#gastronomie…) : la barre est compacte une fois la page défilée */
html { scroll-padding-top: 72px; }
/* Pages sans hero photo : le contenu commence sous la barre */
body.has-solid-header main { padding-top: 96px; }

/* Bouton Menu quand le bottom sheet mobile est ouvert (classe .open posée par mobile_menu_controller.js) */
.hb .menu-btn.open em span { transform: translateY(-14px); }
.hb .menu-btn.open .lines::before { top: 6px; transform: rotate(45deg); }
.hb .menu-btn.open .lines::after { top: 6px; width: 30px; transform: rotate(-45deg); }

@media (max-width: 1000px) {
    /* ≤ 1000px : menu plein écran (cartes hébergements) remplacé par le bottom sheet mobile */
    .hb .menu { display: none; }
    .hb .r .tel { display: none; }
    .hb .big a { font-size: 30px; }
    .hb .cols { flex: none; gap: 28px 40px; }
    .hb .cards .meta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
    .hb.scrolled .bar { height: 64px; }
    .hb.scrolled .menu { padding-top: 64px; }
    html.hb-scrolled:not(.hb-hidden) { --hb-offset: 64px; }
    .hb .r .lang, .hb .r .hb-btn { display: none; }
    .hb .menu-btn em { display: none; }
    .hb .logo { height: 32px; }
    .hb .cols { grid-template-columns: 1fr; gap: 28px; }
    .hb .cols > div { border: 0; padding: 0; }
    .hb .cols > div:nth-child(2) .eyebrow { display: none; }
    .hb .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .hb .strip { flex-direction: column; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
    .hb *, .hb *::before, .hb *::after { transition-duration: .01ms !important; }
}