/* The header's navigation on every page, built by site/nav.mjs and run by nav.js. On a computer each item of the bar opens a
   panel under the header, the way shopify.com does: one white surface with the bar, a side column on paper, photo cards or a
   list with icons, a strip of facts at the foot; the panel grows to its height and its content fades in sliding down. On
   phones (and up to 1120px, where the bar shows the menu button) "Our stays" and "Plans" unfold in the menu.
   Palette: ink, paper, gold, white, muted, line. */
:root{--nav-ease:cubic-bezier(.215,.61,.355,1)}
/* The static pages carry both languages and show the one of <html lang>. */
html:not([lang="fr"]) .l-fr,html[lang="fr"] .l-en{display:none}

/* ───── the bar ───── */
.site-header .desktop-nav.mega{align-self:stretch;gap:0;margin-inline:-11px}
.mega-item{display:flex;align-items:center;padding-inline:11px}
.site-header .mega-link{gap:6px;padding:10px 0;transition:color .25s}
.site-header .mega-link:after{display:none}
.mega-chev{width:11px;height:11px;stroke-width:2;transition:transform .3s var(--nav-ease)}
.mega-link.is-current .mega-label{text-decoration-line:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:8px}
/* While a panel is open the header is the panel's white surface, over the film too. */
.site-header.is-mega,.site-header.is-mega.is-scrolled,.site-header.is-mega.is-scrolled.is-ocean{background:var(--white);color:var(--ink);box-shadow:none;transition:transform .3s ease}
/* The frame the header turns white (or back) over a see-through top, its logo, labels and buttons change with it, at once
   (nav.js adds .mega-snap for that frame), so the bar never shows white labels on white or a white logo on a fading white. */
.site-header.mega-snap,.site-header.mega-snap :is(.brand-logo,.nav-link,.language-toggle,.header-divider,.header-book,.header-whatsapp,.mobile-menu-toggle span){transition:none!important}
.site-header.is-mega .brand-logo-light{display:block}
.site-header.is-mega .brand-logo-dark{display:none}
.site-header.is-mega .nav-link,.site-header.is-mega .language-toggle{color:var(--ink)}
.site-header.is-mega .header-divider{background:#10101033}
.site-header.is-mega .header-book{background:var(--ink);border-color:var(--ink);color:var(--white)}
.site-header.is-mega .header-book:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
/* The open item is bright, the others step back; its chevron turns. */
.site-header .mega.is-open .mega-link{color:var(--muted)}
.site-header .mega.is-open .mega-item.is-open .mega-link,.site-header .mega.is-open .mega-link:hover{color:var(--ink)}
.mega-item.is-open .mega-chev{transform:rotate(180deg)}

/* ───── the panels ───── */
.mega{--mega-w:min(1280px,calc(100% - 128px));--mega-side:300px;--mega-gap:40px}
/* The surface: white, with the side column on paper out to the edge of the screen. Its height follows the open panel. */
.mega-sheet{position:absolute;top:100%;left:0;right:0;z-index:1;height:0;pointer-events:none;background:linear-gradient(90deg,var(--white) calc(50% + var(--mega-w) / 2 - var(--mega-side)),var(--paper) 0);transition:height .3s var(--nav-ease),box-shadow .3s}
.mega.is-open .mega-sheet{box-shadow:0 1px 0 var(--line),0 34px 44px -30px #10101038}
.mega-panel{position:absolute;top:100%;left:0;right:0;z-index:2;height:0;overflow:hidden;visibility:hidden;pointer-events:none;color:var(--ink);transition:height .3s var(--nav-ease),visibility 0s linear .3s}
.mega-item.is-open>.mega-panel{visibility:visible;pointer-events:auto;transition:height .3s var(--nav-ease)}
.mega-panel.is-scroll{overflow-y:auto;overscroll-behavior:contain}
.mega-inner{opacity:0;transform:translateY(-24px);transition:opacity .1s ease,transform .3s var(--nav-ease)}
.mega-item.is-open .mega-inner{opacity:1;transform:none;transition:opacity .3s var(--nav-ease) .05s,transform .3s var(--nav-ease) .05s}
/* From one item to another: the old content is gone (.1s) before the new one comes in. */
.mega.is-switch .mega-item.is-open .mega-inner{transition-delay:.12s}
.mega-shell{display:grid;grid-template-columns:minmax(0,1fr) var(--mega-side);column-gap:var(--mega-gap);width:var(--mega-w);margin-inline:auto}
.mega-main{min-width:0;padding:32px 0 36px}
.mega-side{min-width:0;padding:32px 0 36px var(--mega-gap)}
.mega-kicker{margin:0 0 18px;font:600 11px/1.4 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.mega-note{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--muted)}
.mega-sep{display:block;height:26px}
.mega-more{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font:600 14px/1.4 var(--sans);color:var(--ink);text-decoration:none}
.mega-note+.mega-more{border-top:1px solid var(--line)}
.mega-more .icon{width:16px;height:16px;color:var(--gold);transition:transform .2s var(--nav-ease)}
.mega-more:hover .icon{transform:translateX(3px)}
.mega-more .icon.is-ext{transform:rotate(-45deg)}
.mega-more:hover .icon.is-ext{transform:rotate(-45deg) translateX(3px)}

/* Photo cards: the photo, a gold kicker, the name, a line. */
.mega-cards{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:22px}
.mega-card{display:flex;flex-direction:column;min-width:0;color:var(--ink);text-decoration:none}
.mega-media{position:relative;display:block;overflow:hidden;aspect-ratio:3/2;border-radius:8px;background:var(--paper)}
.mega-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--nav-ease)}
.mega-card:hover .mega-media img{transform:scale(1.04)}
.mega-card-kicker{margin-top:14px;font:600 10.5px/1.45 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--gold)}
.mega-card-title{margin-top:4px;font:600 15px/1.3 var(--sans);letter-spacing:-.01em;text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .2s}
.mega-media+.mega-card-title{margin-top:14px}
.mega-card:hover .mega-card-title{text-decoration-color:var(--gold)}
.mega-card:focus-visible,.mega-row:focus-visible{outline-offset:4px;border-radius:10px}
.mega-card-sub{margin-top:5px;font-size:13px;line-height:1.5;color:var(--muted)}
.mega-card-sub b{font-weight:600;color:var(--ink);white-space:nowrap}
.mega-card-sub em{display:block;font-style:normal;color:var(--ink)}
.mega-card-sub small{display:block;margin-top:3px;font-size:12.5px}
.mega-guide .mega-card-sub em{margin-bottom:4px;color:var(--muted)}
.mega-pill{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:99px;background:#ffffffeb;color:var(--ink);font:600 10.5px/1.6 var(--sans);letter-spacing:.2px;white-space:nowrap}
.mega-plan .mega-media{aspect-ratio:4/5}
.mega-plan .mega-card-kicker{min-height:2.9em}
.mega-plan .mega-card-sub{margin-top:6px}
.mega-cards.is-two-rows .mega-plan .mega-media{aspect-ratio:2/1}
.mega-house .mega-media{aspect-ratio:2/1}
.mega-car .mega-media{aspect-ratio:1.47}
.mega-car .mega-media img{mix-blend-mode:multiply}
.mega-post .mega-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mega-guide{margin-bottom:18px}
.mega-guide .mega-media{aspect-ratio:16/9}

/* A list with icons, in columns (the experiences). */
.mega-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 32px;margin:0;padding:0;list-style:none}
.mega-row{display:flex;align-items:flex-start;gap:14px;margin:0 -12px;padding:12px;border-radius:8px;color:var(--ink);text-decoration:none;transition:background .2s}
.mega-row:hover{background:var(--paper)}
.mega-row .icon{width:22px;height:22px;margin-top:1px;stroke-width:1.4;color:var(--gold)}
.mega-row b{display:block;font:600 15px/1.35 var(--sans)}
.mega-row small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--muted)}

/* The strip at the foot; it stays in view when a tall panel scrolls. */
.mega-foot{border-top:1px solid var(--line);background:var(--white)}
.mega-panel.is-scroll .mega-foot{position:sticky;bottom:0;z-index:1}
.mega-foot-row{grid-column:1/-1;display:flex;align-items:center;gap:36px;padding:15px 0 16px}
.mega-foot-row .mega-kicker{flex:none;margin:0}
.mega-foot-row ul{display:flex;flex-wrap:wrap;gap:8px 32px;margin:0;padding:0;list-style:none}
.mega-foot-row li{display:flex;align-items:center;gap:10px;font-size:13.5px;line-height:1.4;color:var(--ink)}
.mega-foot-row .icon{width:18px;height:18px;color:var(--gold)}
/* The foot of the Experiences panel: the surf report and the weather, as links (a name, a line, an arrow). */
.mega-foot-row.is-live ul{gap:8px 48px}
.mega-live{display:flex;align-items:center;gap:12px;margin:-6px -10px;padding:6px 10px;border-radius:6px;color:var(--ink);text-decoration:none;transition:background .2s}
.mega-live:hover{background:var(--paper)}
.mega-live:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mega-live>span{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px}
.mega-live b{font:600 14px/1.4 var(--sans)}
.mega-live small{font-size:13px;line-height:1.4;color:var(--muted)}
.mega-foot-row .mega-live-go{width:15px;height:15px;color:var(--ink);transition:transform .2s var(--nav-ease)}
.mega-live:hover .mega-live-go{transform:translateX(3px)}

/* The faint veil over the page while a panel is open (nav.js adds it after the header). */
.mega-scrim{position:fixed;inset:0;z-index:29;background:#1010102e;opacity:0;visibility:hidden;transition:opacity .3s var(--nav-ease),visibility 0s linear .3s}
.mega-scrim.is-on{opacity:1;visibility:visible;transition:opacity .3s var(--nav-ease)}

.mega-n{display:none}
.mega-per{white-space:nowrap}
/* A narrower computer: a narrower side column, the plans as small cards in two columns, WhatsApp as its icon. */
@media(max-width:1279px){
  .mega{--mega-w:calc(100% - 96px);--mega-side:250px;--mega-gap:28px}
  .mega-cards.is-plans{--cols:2!important;gap:14px 24px}
  .mega-plan{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;align-items:start}
  .mega-plan .mega-media,.mega-cards.is-two-rows .mega-plan .mega-media{grid-row:1/4;aspect-ratio:4/5;border-radius:6px}
  .mega-plan .mega-card-kicker{min-height:0;margin-top:2px}
  .mega-plan .mega-pill{display:none}
  .mega-plan .mega-card-sub .mega-n{display:inline}
}
@media(min-width:1121px) and (max-width:1599px){
  .site-header .header-whatsapp{justify-content:center;width:46px;padding:0}
  .site-header .header-whatsapp span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

@media(prefers-reduced-motion:reduce){
  .mega-sheet,.mega-panel,.mega-item.is-open>.mega-panel,.mega-inner,.mega-item.is-open .mega-inner,.mega-chev,.mega-scrim,.mega-scrim.is-on{transition:none}
  .mega-inner{transform:none}
  .mega-card:hover .mega-media img{transform:none}
}

/* ───── the phone menu ───── */
.mobile-menu{max-height:calc(100svh - var(--header-height,72px) - var(--safe-top,0px));overflow-y:auto;overscroll-behavior:contain}
.mnav-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin:0;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:500 24px/1.4 var(--sans);letter-spacing:inherit;text-align:left;cursor:pointer}
.mnav-toggle .icon{width:18px;height:18px;stroke-width:1.8;transition:transform .3s var(--nav-ease)}
.mnav-group.is-open .mnav-toggle{border-bottom-color:transparent}
.mnav-group.is-open .mnav-toggle .icon{transform:rotate(180deg)}
.mnav-sub{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s var(--nav-ease),visibility 0s linear .3s}
.mnav-group.is-open .mnav-sub{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s var(--nav-ease)}
.mnav-sub-inner{min-height:0;overflow:hidden}
.mnav-list{display:grid;gap:2px;padding:2px 0 8px}
.mnav-item{display:flex;align-items:center;gap:14px;min-width:0;padding:7px 0;color:var(--ink);text-decoration:none}
.mnav-item img{flex:none;width:64px;height:48px;border-radius:6px;object-fit:cover;background:var(--paper)}
.mnav-item>span{min-width:0}
.mnav-item b{display:block;font:600 15px/1.3 var(--sans)}
.mnav-item small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted)}
.mnav-links{display:flex;flex-wrap:wrap;gap:4px 24px;padding:2px 0 16px;border-bottom:1px solid var(--line)}
.mnav-all{display:inline-flex;align-items:center;gap:10px;padding:8px 0;font:600 14px/1.4 var(--sans);color:var(--ink);text-decoration:none}
.mnav-all span{border-bottom:1px solid var(--gold);padding-bottom:2px}
.mnav-all .icon{width:15px;height:15px;color:var(--gold)}
@media(min-width:700px){.mnav-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}}
/* Under the links: "Live on the coast", the surf report and the weather side by side. */
.mnav-live{padding:14px 0 12px;border-bottom:1px solid var(--line)}
.mnav-live-k{margin:0 0 4px;font:600 11px/1.6 var(--sans);letter-spacing:1.75px;text-transform:uppercase;color:var(--gold)}
.mnav-live-links{display:flex;flex-wrap:wrap;gap:0 32px}
.mnav-live-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 17px/1.3 var(--sans);color:var(--ink);text-decoration:none}
.mnav-live-link .icon{width:20px;height:20px;stroke-width:1.5;color:var(--gold)}
@media(prefers-reduced-motion:reduce){.mnav-sub,.mnav-group.is-open .mnav-sub,.mnav-toggle .icon,.mega-live,.mega-foot-row .mega-live-go{transition:none}}

/* ───── the plan builder's panel: three steps, the way in, where to start ───── */
.mega-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none;counter-reset:step}
.mega-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:start;align-content:start;padding-top:16px;border-top:1px solid var(--line)}
.mega-steps .icon{grid-row:1/3;width:24px;height:24px;stroke-width:1.4;color:var(--gold)}
.mega-step-n{font:600 11px/1.4 var(--sans);letter-spacing:1.4px;color:var(--muted)}
.mega-steps li>span:last-child{grid-column:2}
.mega-steps b{display:block;margin-top:2px;font:600 15px/1.35 var(--sans);color:var(--ink)}
.mega-steps small{display:block;margin-top:5px;font-size:13px;line-height:1.5;color:var(--muted)}
.mega-cta{display:inline-flex;align-items:center;gap:14px;min-height:48px;margin-top:26px;padding:0 20px;border-radius:2px;background:var(--ink);color:var(--white);font:600 14px/1 var(--sans);text-decoration:none;transition:background .2s,color .2s}
.mega-cta .icon{width:16px;height:16px;transition:transform .2s var(--nav-ease)}
.mega-cta:hover{background:var(--gold);color:var(--ink)}
.mega-cta:hover .icon{transform:translateX(3px)}
.mega-starts{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.mega-start{display:flex;align-items:center;gap:14px;margin:0 -10px;padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none;transition:background .2s}
.mega-start:hover{background:var(--white)}
.mega-start img{flex:none;width:64px;height:48px;object-fit:cover;border-radius:4px}
.mega-start b{display:block;font:600 14px/1.35 var(--sans)}
.mega-start small{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--muted)}
/* ───── the location's panel: the houses as you arrive ───── */
.mega-arrive .mega-card-sub small{font-variant-numeric:tabular-nums}
@media(max-width:1279px){.mega-steps{grid-template-columns:1fr;gap:14px}.mega-steps li{padding-top:12px}}

/* Seven items in the bar since 15 November 2026 (the plan builder and the location joined): WhatsApp shows as its icon below
   1600px (above), the items sit closer below 1440px, and below 1400px they lose their small arrow, so that the bar keeps clear of
   the logo and the buttons in both languages (measured at 1121, 1180, 1280 and 1440px). */
@media(min-width:1121px) and (max-width:1439px){.mega-item{padding-inline:7px}}
@media(min-width:1121px) and (max-width:1399px){.mega-chev{display:none}}
@media(min-width:1121px) and (max-width:1279px){.mega-item{padding-inline:6px}}
@media(min-width:1121px) and (max-width:1199px){.mega-item{padding-inline:4px}.site-header .mega-link{font-size:13.5px}}

/* ───── the experiences' panel: photo cards in four columns, the last tile adds them to a plan; "Live on the coast" at the side ───── */
.mega-cards.is-xp{gap:22px 18px}
.mega-xp .mega-media{aspect-ratio:3/2}
.mega-xp .mega-card-kicker{min-height:0}
.mega-xp-add{border-radius:8px;background:var(--paper);transition:background .2s}
.mega-xp-add-in{display:flex;flex-direction:column;justify-content:flex-start;gap:8px;height:100%;padding:18px 18px 16px}
.mega-xp-add-in>.icon{width:28px;height:28px;padding:6px;border-radius:50%;background:var(--white);color:var(--gold);stroke-width:1.6}
.mega-xp-add b{margin-top:6px;font:600 15px/1.3 var(--sans);color:var(--ink)}
.mega-xp-add small{font-size:13px;line-height:1.5;color:var(--muted)}
.mega-xp-add-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;font:600 13.5px/1.3 var(--sans);color:var(--ink)}
.mega-xp-add-go .icon{width:15px;height:15px;color:var(--gold);transition:transform .2s var(--nav-ease)}
.mega-xp-add:hover{background:#ece5d6}
.mega-xp-add:hover .mega-xp-add-go .icon{transform:translateX(3px)}
.mega-live-row .mega-live-ico{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:8px;background:var(--white)}
.mega-live-row .mega-live-ico .icon{width:24px;height:24px;stroke-width:1.4;color:var(--gold)}
.mega-side .mega-note{margin-top:14px}
@media(max-width:1279px){.mega-cards.is-xp{gap:16px 14px}.mega-xp .mega-card-kicker{display:none}.mega-xp-add-in{padding:14px}.mega-xp-add small{display:none}}
/* short laptop screens (the panel may take 70% of the height, nav.js): flatter photos, no line over the names, less padding */
@media(min-width:1121px) and (max-height:820px){#mega-experiences .mega-main,#mega-experiences .mega-side{padding-top:22px;padding-bottom:22px}.mega-cards.is-xp{gap:14px}.mega-xp .mega-media{aspect-ratio:2/1}.mega-xp .mega-card-kicker{display:none}.mega-xp-add small{display:none}.mega-xp-add-in{padding:12px 14px}}

/* ───── the currency (MAD · EUR € · USD $), as on hilalluxurycars.com ───── */
.hdr-cur{position:relative;display:inline-flex;align-items:center;margin-right:2px}
.hdr-cur select{appearance:none;-webkit-appearance:none;margin:0;padding:8px 20px 8px 8px;border:0;background:transparent;color:inherit;font:600 13px/1.2 var(--sans);letter-spacing:.4px;cursor:pointer}
.hdr-cur .icon{position:absolute;right:4px;width:11px;height:11px;stroke-width:2;pointer-events:none}
.hdr-cur select:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
@media(max-width:1120px){.hdr-cur{display:none}}
.mnav-cur{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.mnav-cur-k{font:600 12px/1.4 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.mnav-cur select{appearance:none;-webkit-appearance:none;margin:0;padding:10px 26px 10px 12px;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--ink);font:600 14px/1.2 var(--sans);cursor:pointer}
.mnav-cur .icon{position:absolute;right:10px;width:12px;height:12px;pointer-events:none}
/* a chosen currency replaces the MAD figures, so the small ≈ hints under them rest */
html[data-cur="EUR"] .fx,html[data-cur="USD"] .fx{display:none}
.cx-price{white-space:inherit}

/* ───── the cookie question (T-08): one small card, both answers one press ───── */
.ck{position:fixed;left:16px;bottom:16px;z-index:90;max-width:360px;padding:18px 18px 16px;background:var(--white);border:1px solid var(--line);border-radius:4px;box-shadow:0 24px 60px #10101026}
.ck p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink)}
.ck a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.ck-b{display:flex;gap:10px;margin-top:14px}
.ck-b button{flex:1;min-height:44px;padding:0 14px;border:1px solid var(--ink);border-radius:2px;background:var(--white);color:var(--ink);font:600 13.5px/1 var(--sans);cursor:pointer;transition:background .2s,color .2s}
.ck-b button:hover{background:var(--ink);color:var(--white)}
.ck-b button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:480px){.ck{left:12px;right:12px;bottom:12px;max-width:none}}