/* La Mer Loc, feuille de style */

:root {
  --navy: #1c3a4b;
  --navy-dark: #12262f;
  --sand: #f8fafb;
  --sand-soft: #e9eef2;
  --terracotta: #2f7fb0;
  --terracotta-dark: #1f5f87;
  --ink: #262421;
  --muted: #6d6a63;
  --white: #fffdfa;
  --border: rgba(28, 58, 75, 0.14);
  --shadow: 0 12px 30px rgba(18, 38, 47, 0.10);
  --radius: 14px;
  --header-h: 68px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* La page occupe au moins la hauteur de la fenêtre et s'empile en colonne, pour
   que le pied reste en bas sur les pages courtes. Sans cela, la page contact —
   908 px de contenu — laissait le pied flotter au milieu d'un grand écran, avec
   440 px de vide en dessous sur une fenêtre de 1348 px.
   `svh` double `vh` pour les navigateurs mobiles, dont la barre d'adresse fausse
   `vh` ; les deux déclarations sont lues dans l'ordre, la seconde l'emporte là
   où elle est comprise. */
body {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--sand);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* C'est le contenu qui absorbe la hauteur restante, jamais le pied ni la vague :
   `flex: none` les empêche de se laisser étirer ou tasser. */
body > main { flex: 1 0 auto; }
body > .wave-divider,
body > footer.site-footer { flex: none; }

h1, h2, h3, .logo-word {
  font-family: "Fraunces", "Playfair Display", Georgia, serif;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

img { max-width: 100%; }

a { color: var(--terracotta-dark); }
a:hover { color: var(--terracotta); }

/* L'en-tête est collant : sans cette marge, une ancre (#equipements)
   arrive sous l'en-tête et le titre visé reste masqué. */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Utilitaires ---------- */

.text-center { text-align: center; }
.apt-specs { margin-bottom: 28px; }
.cta-block { text-align: center; margin-top: 36px; }
/* Le bouton de fin de l'accueil suit directement son titre, sans paragraphe
   entre les deux : il lui faut un peu moins d'air que les boutons posés après
   un bloc de texte. La marge du `h2`, plus basse, fusionne avec celle-ci. */
.cta-block.cta-tight { margin-top: 24px; }
.equip-link { margin-top: 8px; }

.intro-centered {
  margin: 0 auto 8px;
  text-align: center;
  max-width: 640px;
}

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

/* ---------- Lien d'évitement ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--white);
  color: var(--navy);
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow);
}

.skip-link:focus { left: 0; }

/* ---------- Header ---------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.logo svg { width: 22px; height: 22px; flex: none; }

/* Aucun libellé de la barre du haut ne doit se couper en deux lignes :
   c'est la largeur disponible qui déclenche le menu burger, pas le retour
   à la ligne. */
.logo-word {
  font-size: 1.35rem;
  margin: 0;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
}

nav.main-nav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

nav.main-nav a:hover,
nav.main-nav a[aria-current="page"] {
  color: var(--terracotta-dark);
  border-bottom-color: var(--terracotta);
}

.btn.header-contact-link {
  display: inline-flex;
  padding: 8px 16px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Contact vit dans le bouton de l'en-tête sur desktop, et dans le menu
   déroulant sur mobile : jamais les deux à la fois. */
.nav-contact { display: none; }

/* Sélecteur de langue. Il vit hors du menu, en enfant direct de l'en-tête :
   sur mobile il reste ainsi visible à côté du bouton burger, et un visiteur
   anglophone n'a pas à ouvrir un menu écrit en français pour trouver sa langue.

   Les deux langues sont affichées côte à côte, la courante en gris et non
   cliquable, l'autre en lien. On voit qu'il y a un choix sans avoir à le
   deviner — un mot seul, « English », se lit comme une page de plus.

   L'ordre FR | EN ne change jamais d'une page à l'autre : c'est la couleur qui
   dit où l'on est, pas la position. Le lien ne se déplace donc pas sous le
   curseur quand on bascule.

   Le trait de séparation est une bordure, pas un caractère : un « | » écrit
   dans le HTML serait lu par les lecteurs d'écran. */
.lang-switch {
  display: flex;
  align-items: center;
  order: 1;   /* desktop : après le menu, juste avant le bouton de contact */
}
.btn.header-contact-link { order: 2; }

.lang-switch .lang-current,
.lang-switch a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0 8px;
  text-decoration: none;
  white-space: nowrap;
}

.lang-switch .lang-current { color: var(--muted); }
.lang-switch a { color: var(--terracotta-dark); }
.lang-switch a:hover { color: var(--terracotta); }

.lang-switch > * + * { border-left: 1px solid var(--border); }

/* ---------- Bouton menu (mobile) ---------- */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  flex: none;
}

.nav-toggle-bars {
  display: block;
  position: relative;
  width: 20px;
  height: 14px;
}

.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Logo + 4 entrées + bouton demandent environ 750 px. En dessous, la barre
   se tasse et les libellés passent sur deux lignes : on bascule sur le
   menu burger bien avant, dès le format tablette. */
@media (max-width: 860px) {
  .site-header .container { flex-wrap: wrap; }

  .logo { order: 1; }
  .btn.header-contact-link { display: none; }

  /* Le sélecteur de langue se cale contre le bouton burger, à sa gauche :
     `margin-left: auto` pousse la paire vers la droite, le `space-between` du
     conteneur laisserait sinon le sélecteur au milieu de la barre. */
  .lang-switch { order: 2; margin-left: auto; margin-right: 4px; }
  .nav-toggle { order: 3; display: inline-flex; }

  .nav-contact { display: list-item; }
  .nav-contact a { color: var(--terracotta-dark); font-weight: 600; }

  nav.main-nav {
    order: 4;
    flex-basis: 100%;
    display: none;
  }
  nav.main-nav.is-open { display: block; }

  nav.main-nav ul {
    flex-direction: column;
    gap: 0;
    padding-top: 6px;
  }

  nav.main-nav li { border-top: 1px solid var(--border); }

  nav.main-nav a {
    display: block;
    padding: 13px 2px;
    border-bottom: none;
  }

  nav.main-nav a[aria-current="page"] {
    border-bottom: none;
    border-left: 3px solid var(--terracotta);
    padding-left: 10px;
  }

}

/* ---------- Wave divider ---------- */

.wave-divider {
  display: block;
  width: 100%;
  height: 44px;
  line-height: 0;
}
.wave-divider svg { width: 100%; height: 100%; display: block; }
.wave-flip { transform: scaleY(-1); }

/* Il ne reste que la vague qui précède le pied de page. Son tracé est de la
   couleur du pied de page, elle se détache donc sur le fond sable. Celle qui
   suivait les bandeaux était peinte en sable sur du sable : invisible, et
   44 px de vide sous la photo. Retirée. */

/* ---------- Hero ---------- */

/* Les images sont fournies par la page via deux variables :
   --hero-sm (800 px, mobile) et --hero-lg (1800 px, desktop), en WebP. */

.hero {
  position: relative;
  color: var(--white);
  min-height: 58vh;
  min-height: 58svh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: var(--hero-pos, center);
  background-image: var(--hero-sm);
}

@media (min-width: 721px) {
  .hero {
    background-position: var(--hero-pos-lg, center 80%);
    background-image: var(--hero-lg);
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,38,47,0.15) 0%, rgba(18,38,47,0.72) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 48px 24px 64px;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--sand-soft);
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero h1 { color: var(--white); margin-bottom: 6px; }
.hero .subtitle { font-style: italic; font-size: 1.15rem; color: var(--sand-soft); margin: 0; }

/* En-tête sans bandeau, pour les trois pages d'appartement et la page contact.
   Le titre entre dans le flux de la page, sur le fond du site, et le bloc ne fait
   que la hauteur de ce qu'il contient — là où le bandeau en réservait un tiers
   d'écran. L'accueil est désormais la seule page à garder une photo d'en-tête ;
   `.hero-small`, qui donnait au bandeau de la page contact sa hauteur réduite,
   est partie avec elle, faute d'utilisateur. */

.page-head {
  padding: 40px 0 10px;
}

.page-head .eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 10px;
}

.page-head h1 { margin-bottom: 0; }

/* L'accueil est la seule page à porter un bandeau photo. */

.hero-facade {
  --hero-sm: url("../assets/images/thumb/Commun-Facade-02.webp");
  --hero-lg: url("../assets/images/full/Commun-Facade-02.webp");
  /* Le bâtiment occupe la moitié haute du cadre : on cale le recadrage plus haut. */
  --hero-pos: center 45%;
  --hero-pos-lg: center 52%;
}

/* ---------- Sections ---------- */

section { padding: 56px 0; }
section.tight { padding: 32px 0; }

.section-intro { max-width: 760px; }

/* Le premier bloc ne rajoute pas sa marge au padding de la section : sans cela,
   un encadré placé en tête décale tout le contenu de 24 px vers le bas. */
.section-intro > :first-child { margin-top: 0; }

.callout {
  background: var(--white);
  border-left: 4px solid var(--terracotta);
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: var(--shadow);
  margin: 24px 0;
  font-weight: 500;
}

.section-alt {
  background: var(--sand-soft);
}

/* ---------- Table ---------- */

table.info-table {
  width: 100%;
  margin-top: 1.5rem;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

table.info-table th,
table.info-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

table.info-table tr:last-child th,
table.info-table tr:last-child td { border-bottom: none; }

table.info-table th {
  width: 34%;
  color: var(--navy);
  font-family: "Fraunces", "Playfair Display", Georgia, serif;
  font-weight: 600;
  background: rgba(28,58,75,0.045);
}

/* Sous 600 px, la colonne d'intitulés devient trop étroite :
   on empile intitulé et valeur. */
@media (max-width: 600px) {
  table.info-table,
  table.info-table tbody,
  table.info-table tr,
  table.info-table th,
  table.info-table td {
    display: block;
    width: auto;
  }

  table.info-table tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }
  table.info-table tr:last-child { border-bottom: none; }

  table.info-table th {
    padding: 0 0 2px;
    background: transparent;
    border-bottom: none;
    font-size: 0.95rem;
  }

  table.info-table td {
    padding: 0;
    border-bottom: none;
  }
}

/* ---------- Cards (apartments) ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 860px) {
  .card-grid { grid-template-columns: 1fr; }
}

.apt-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.apt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(18,38,47,0.16);
}

.apt-card .thumb {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.apt-card .apt-body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }

.apt-card .apt-tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--terracotta-dark);
  font-weight: 600;
  margin-bottom: 6px;
}

.apt-card h2,
.apt-card h3 {
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.apt-card .apt-meta {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 14px;
}

.apt-card .apt-cta {
  margin-top: auto;
  font-weight: 600;
  color: var(--terracotta-dark);
  font-size: 0.92rem;
}

/* ---------- Gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0;
}

/* À deux colonnes, la galerie des équipements laisse sa troisième photo seule sur
   la ligne du bas : elle prend alors toute la largeur, comme la section sur la
   ville. La règle est portée par `#equipements` et non par `.gallery`, qui sert
   aussi aux trois pages de logement : à sept images elle étirerait la dernière
   sans raison, à huit elle chasserait la huitième sur une ligne à elle en
   laissant la septième seule à mi-largeur. */
@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  #equipements .gallery a:last-child { grid-column: 1 / -1; }
}

.gallery a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.gallery a:hover img { transform: scale(1.05); }

/* Illustration de la section sur la ville. Trois images calées sur la largeur du
   texte, sans ombre, sans agrandissement au clic : elles accompagnent le propos,
   elles ne se donnent pas à regarder comme la galerie d'un logement. Sous 600 px,
   deux au-dessus et la troisième en pleine largeur : à trois de front sur un
   téléphone, elles ne seraient plus lisibles. */
.illus-ville {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}

@media (max-width: 600px) {
  .illus-ville { grid-template-columns: repeat(2, 1fr); }
  .illus-ville img:last-child { grid-column: 1 / -1; }
}

.illus-ville img {
  width: 100%;
  /* Sans height:auto, l'attribut height="600" du HTML l'emporte sur
     aspect-ratio et l'image s'affiche en 372 x 600. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* ---------- Visionneuse (lightbox) ---------- */

/* Construite par js/site.js. Sans JavaScript, les liens de la galerie
   ouvrent simplement l'image en grand : rien n'est perdu. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 38, 47, 0.92);
}

.lightbox[hidden] { display: none; }

.lightbox-figure {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.lightbox-figure img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  display: block;
}

.lightbox-caption {
  color: var(--sand-soft);
  font-size: 0.9rem;
  text-align: center;
}

.lightbox-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 253, 250, 0.14);
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease;
}

.lightbox-btn:hover { background: rgba(255, 253, 250, 0.28); }
.lightbox-btn[hidden] { display: none; }

.lightbox-close { top: 16px; right: 16px; font-size: 1.6rem; }
.lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
  .lightbox { padding: 12px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

body.lightbox-open { overflow: hidden; }

/* ---------- Breadcrumb / back link ---------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--muted);
  margin-bottom: 18px;
}
.back-link:hover { color: var(--terracotta-dark); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--terracotta);
  color: var(--white) !important;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  border: none;
  font-size: 0.98rem;
  cursor: pointer;
  transition: background 0.18s ease;
}
.btn:hover { background: var(--terracotta-dark); }

.btn.btn-outline {
  background: transparent;
  color: var(--navy) !important;
  border: 1.5px solid var(--navy);
}
.btn.btn-outline:hover { background: var(--navy); color: var(--white) !important; }

/* Appel à l'action de fin de page : même réaction au survol que les fiches
   d'appartement, le bouton se soulève de 4 px avec une ombre portée plus large.
   Réservé à ces boutons-là ; celui de l'en-tête garde son simple changement de
   fond, il est trop petit et trop souvent survolé au passage pour bouger.
   Doit rester après .btn, dont il complète la transition à specificite egale. */
.btn-lift {
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(18, 38, 47, 0.16);
}

/* ---------- Contact page ---------- */

.contact-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.contact-row:last-child { border-bottom: none; }

.contact-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.contact-value {
  font-weight: 600;
  color: var(--navy);
  font-size: 1.05rem;
}

/* ---------- Page 404 ---------- */

.error-page {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.error-page .apt-card { text-align: left; }

/* ---------- Footer ---------- */

footer.site-footer {
  background: var(--navy);
  color: var(--sand-soft);
}

footer.site-footer .container {
  padding: 36px 24px 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

footer.site-footer a { color: var(--sand-soft); text-decoration: none; }
footer.site-footer a:hover { color: var(--white); text-decoration: underline; }

footer.site-footer .logo-word { color: var(--white); }

.foot-tagline {
  max-width: 280px;
  opacity: 0.85;
  font-size: 0.9rem;
  margin-top: 10px;
  /* Dernier élément de son bloc : sa marge basse ne sépare de rien. */
  margin-bottom: 0;
}

/* Le pied est fait de deux `.container` empilés, et la règle commune ci-dessus
   leur donne à chacun 36 px en haut et 30 px en bas. Entre l'accroche et la
   ligne du bas, cela faisait 80 px de vide : 14 px de marge de l'accroche,
   30 px de padding du premier bloc, 36 px du second. Depuis que la navigation
   a quitté le pied, ce creux ne sépare plus que deux lignes de texte. Ramené à
   24 px, partagés entre les deux blocs. */
footer.site-footer .container:not(.foot-bottom) { padding-bottom: 12px; }
footer.site-footer .foot-bottom { padding-top: 12px; }

footer.site-footer .foot-bottom {
  font-size: 0.82rem;
  opacity: 0.75;
  display: flex;
  align-items: center;
  gap: 8px;
}

footer.site-footer .foot-bottom svg { width: 14px; height: 14px; opacity: 0.9; }

/* ---------- Préférences d'animation ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .apt-card:hover { transform: none; }
  .btn-lift:hover { transform: none; }
  .gallery a:hover img { transform: none; }
}

/* ---------- Impression ---------- */

@media print {
  .site-header,
  .wave-divider,
  .nav-toggle,
  .skip-link,
  .lightbox,
  body { background: #fff; color: #000; }
  .hero { min-height: auto; color: #000; }
  .hero::after { display: none; }
  .hero h1, .hero .subtitle, .hero .eyebrow { color: #000; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}