/* Villa Anvers — self-hosted rebuild of the Cargo site (villa-anvers.com) */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cargo sizes everything in rem and scales the root with the viewport */
html {
  font-size: calc(10px + 0.0716vw);
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 768px) {
  html { font-size: calc(9.5px + 0.098vw); }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background-color: #fff;
  color: #000;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

a:active { opacity: 0.7; }
i, em { font-style: italic; }
b, strong { font-weight: bolder; }
sub, sup { position: relative; vertical-align: baseline; }
sub { top: 0.3em; }
sup { top: -0.4em; }
hr {
  background: rgba(127, 127, 127, 0.2);
  border: 0;
  height: 1px;
  display: block;
}
ul, ol { margin: 0; padding: 0 0 0 1em; }
table { border-collapse: collapse; }
td { padding: 0; }
img { border: 0; padding: 0; max-width: 100%; height: auto; }

/* ---------- Typography (Cargo "predefined styles") ---------- */
.bodycopy {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3;
  color: #000;
  padding: 3.9rem;
}
.bodycopy a {
  color: rgba(7, 25, 120, 0.87);
  text-decoration: none;
  padding-bottom: 0.1em;
}
h1 {
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 0.9;
  margin: 0;
  padding: 0;
  color: #000;
}
h1 a { color: #000; text-decoration: none; }
h2 {
  font-weight: 425;
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  color: #000;
}
h2 a { color: rgba(10, 23, 91, 0.87); text-decoration: none; }
small {
  display: inline-block;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.1rem;
  font-weight: 600;
  color: #000;
}
small a { color: rgba(10, 23, 91, 0.87); text-decoration: none; }

/* Inline icons replacing Cargo's icon font */
.ic {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-chevron { width: 0.8em; height: 0.8em; vertical-align: -0.05em; stroke-width: 2.2; }

/* ---------- Page container ---------- */
.page {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #fff;
}
.page--home {
  width: 85%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
}
.page--home .bodycopy { width: 100%; }
.page--home h2 { font-size: 1.7rem; }
.page--Les-Appartements .bodycopy { padding: 3.5rem; }
.page--Infos-Pratiques h2 { font-size: 2.1rem; }

.bodycopy > img, [grid-col] > img, .bodycopy .img-full {
  width: 100%;
  height: auto;
  margin-bottom: 0.5em;
}

/* ---------- Fixed header (Cargo "pinned" header, overlay) ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
  pointer-events: none;
  padding: 1.4rem;
}
.site-header h1 a { pointer-events: auto; }

/* ---------- Menu button ---------- */
.menu-button {
  position: fixed;
  top: 3rem;
  right: 3rem;
  z-index: 5;
  background: none;
  border: 0;
  padding: 6px;
  margin: 0;
  cursor: pointer;
  color: #000;
  line-height: 1;
}
.menu-button svg {
  display: block;
  width: 3.5rem;
  height: 2.6rem;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}
.menu-button.is-hidden { display: none; }

/* ---------- Site menu panel ---------- */
.site-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  background: rgb(115, 115, 115);
  min-width: 300px;
  max-width: 400px;
  padding: 50px 30px 90px 30px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.3;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.site-menu.is-open { display: flex; }
.site-menu a {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.site-menu a:active { opacity: 0.7; }
.site-menu a.active { opacity: 0.4; }
.menu-close {
  display: none;
  align-self: flex-end;
  background: none;
  border: 0;
  padding: 0;
  margin: -20px 0 20px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 45px;
  line-height: 0.85em;
  cursor: pointer;
}

/* ---------- Grid (Cargo grid-row / grid-col, 12 columns) ---------- */
[grid-row] {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start; /* like Cargo: columns keep their own height */
  margin: 0 calc(var(--gp, 4) * -0.5rem);
}
[grid-col] {
  flex: 0 0 auto;
  min-width: 0;
  padding: calc(var(--gp, 4) * 0.5rem);
}
[grid-col="2"] { width: 16.6667%; }
[grid-col="3"] { width: 25%; }
[grid-col="4"] { width: 33.3333%; }
[grid-col="5"] { width: 41.6667%; }
[grid-col="6"] { width: 50%; }
[grid-col="7"] { width: 58.3333%; }
[grid-col="8"] { width: 66.6667%; }
[grid-col="9"] { width: 75%; }
[grid-col="10"] { width: 83.3333%; }
[grid-col="12"] { width: 100%; }
[grid-col="x11"] { width: 50%; }

/* ---------- Image galleries ---------- */
.gallery { margin: 0 0 0.5em; }
.gallery figure { margin: 0; min-width: 0; }
.gallery img { display: block; width: 100%; height: auto; }

.gallery-justify .grow {
  display: flex;
  align-items: flex-start;
  gap: var(--pad, 1rem);
  margin-bottom: var(--pad, 1rem);
}
.gallery-justify .grow:last-child { margin-bottom: 0; }
.gallery-justify figure { flex: var(--ar, 1) 1 0; }

.gallery-columns {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: var(--pad, 1rem);
  align-items: start;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .bodycopy { padding: 1.6rem; }
  .page--home { width: 100%; }
  .site-header { padding: 1.2rem; }
  .menu-button { top: 1.2rem; right: 1.2rem; padding: 0; }
  .menu-button svg { width: 2.4rem; height: 1.8rem; }
  .site-menu { width: 100%; max-width: none; min-width: 0; }
  .menu-close { display: block; font-size: 50px; line-height: 1em; }

  [grid-row] { flex-direction: column; }
  [grid-col] { width: 100%; }
  [grid-col="7"] { order: 1; }
  [grid-col="5"] { order: 2; }

  .gallery-justify .grow {
    gap: var(--mpad, 1rem);
    margin-bottom: var(--mpad, 1rem);
  }
  .gallery-columns { grid-template-columns: repeat(var(--mcols, 2), 1fr); }
}