@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face {
  font-family: "Petrona";
  src: url("../fonts/petrona.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Petrona";
  src: url("../fonts/petrona-italique.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

:root {
  --lac: #17323c;
  --lac-profond: #10262f;
  --brume: #dfe6e3;
  --ecume: #f2efe6;
  --alpes: #e8a9b5;
  --lumiere: #ffd59a;
  --trait: rgba(223, 230, 227, .16);
  --g: clamp(16px, 4.5vw, 64px);
  --texte: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  --sans: "Anybody", "Arial Narrow", sans-serif;
  --barre: 68px;
  --nuit: 0;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barre) + 12px);
}

body {
  margin: 0;
  background: var(--lac);
  color: var(--brume);
  font-family: "Petrona", Georgia, serif;
  font-size: var(--texte);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 { font-family: var(--sans); font-weight: 800; margin: 0; }
p { margin: 0; }

a { color: inherit; text-decoration-color: var(--alpes); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--ecume); }
:focus-visible { outline: 2px solid var(--alpes); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--alpes); color: var(--lac-profond); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
  position: fixed; top: 10px; left: 10px; z-index: 50;
  padding: .6rem 1rem; background: var(--ecume); color: var(--lac-profond);
  font-family: var(--sans); font-weight: 700; text-decoration: none;
  transform: translateY(-160%);
}
.evitement:focus { transform: none; }

/* ——— boutons et liens de navigation ——— */

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.15rem;
  font-family: var(--sans); font-weight: 700; font-size: 1rem; font-stretch: 104%;
  text-decoration: none; border-radius: 3px;
  background: var(--ecume); color: var(--lac-profond);
  transition: background-color .2s ease, transform .2s ease;
}
.bouton:hover { background: var(--lumiere); color: var(--lac-profond); }
.bouton:active { transform: translateY(1px); }

.liens { display: flex; align-items: center; gap: .35rem 1.75rem; }
.liens a:not(.bouton) {
  font-family: var(--sans); font-weight: 600; font-size: 1rem; font-stretch: 104%;
  text-decoration: none; padding: .55rem 0;
  background: linear-gradient(var(--alpes), var(--alpes)) 0 100% / 0 2px no-repeat;
  transition: background-size .25s ease;
}
.liens a:not(.bouton):hover, .liens a[aria-current] { background-size: 100% 2px; }

/* ——— la scène : le lac reste en place le temps que la nuit tombe ——— */

.scene { position: relative; height: 165vh; height: 165svh; }

.lac {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  color: var(--ecume);
  display: grid;
  grid-template-rows: auto 1fr;
  padding: max(var(--g), env(safe-area-inset-top)) max(var(--g), env(safe-area-inset-right)) max(calc(var(--g) * .75), env(safe-area-inset-bottom)) max(var(--g), env(safe-area-inset-left));
  -webkit-user-select: none;
  user-select: none;
  cursor: crosshair;
}
.lac__eau {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  background: linear-gradient(#28465a 0%, #d7aea4 38%, #4f7179 38.4%, #17323c 100%);
}
.lac__guirlande {
  position: absolute; top: 0; left: 0; width: 100%; height: 34%;
  display: block; pointer-events: none;
}
.lac > :not(canvas) { position: relative; }

.lac__signature {
  grid-row: 1; grid-column: 1; justify-self: start; align-self: start;
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 .8rem;
  font-family: var(--sans); font-weight: 600; font-size: .8rem; font-stretch: 104%;
  color: var(--ecume); text-decoration: none; cursor: pointer;
  background: rgba(16, 38, 47, .5); border: 1px solid rgba(223, 230, 227, .22); border-radius: 3px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .2s ease, border-color .2s ease;
}
.lac__signature:hover { color: var(--ecume); background: rgba(16, 38, 47, .75); border-color: rgba(223, 230, 227, .45); }

.lac__nav { grid-row: 1; grid-column: 1; justify-self: end; cursor: auto; text-shadow: 0 1px 10px rgba(16, 38, 47, .6); }
.lac__nav .bouton { text-shadow: none; }

.lac__bas { grid-row: 2; align-self: end; cursor: auto; }

.titre {
  font-size: clamp(3.4rem, 14.5vw, 15rem);
  line-height: .84;
  letter-spacing: -.01em;
  font-weight: 700;
  margin-left: -.04em;
  text-shadow: 0 .04em .5em rgba(14, 37, 45, .55);
  cursor: crosshair;
}
.titre__ligne { display: block; white-space: nowrap; }
.titre__ligne .l { font-variation-settings: "wdth" 118, "wght" 560; }

.lac__infos {
  display: grid;
  gap: 1rem 3rem;
  margin-top: clamp(1rem, 2.2vw, 1.75rem);
  text-shadow: 0 1px 12px rgba(16, 38, 47, .7);
}
@media (min-width: 900px) {
  .lac__infos { grid-template-columns: minmax(0, 33rem) auto; justify-content: space-between; align-items: end; }
}
.lac__recit { display: grid; }
.recit {
  grid-area: 1 / 1;
  font-size: clamp(1.0625rem, .98rem + .5vw, 1.375rem);
  line-height: 1.42;
  text-wrap: pretty;
  transition: opacity .3s linear;
}
.recit--jour { opacity: clamp(0, calc(1 - var(--nuit) * 2.6), 1); }
.recit--nuit { opacity: clamp(0, calc((var(--nuit) - .42) * 2.6), 1); }

.lac__faits { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: 1rem; }
@media (min-width: 900px) { .lac__faits { justify-items: end; text-align: right; } }
.statut { display: flex; align-items: baseline; gap: .55rem; color: var(--ecume); font-weight: 600; }
.statut__point {
  flex: none; width: .55rem; height: .55rem; border-radius: 50%;
  border: 1.5px solid rgba(223, 230, 227, .7);
  transform: translateY(-.05em);
}
.statut[data-ouvert="oui"] .statut__point { background: var(--lumiere); border-color: var(--lumiere); box-shadow: 0 0 10px 2px rgba(255, 213, 154, .55); }
[data-soleil] { opacity: .88; }

.lac__geste {
  margin-top: 1rem;
  font-size: .9rem;
  font-style: italic;
  opacity: calc(.78 - var(--nuit) * .5);
}

/* ——— la barre du haut, une fois le lac passé ——— */

.barre {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: var(--barre);
  display: none; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 0 max(var(--g), env(safe-area-inset-right)) 0 max(var(--g), env(safe-area-inset-left));
  background: rgba(16, 38, 47, .84);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(223, 230, 227, .08);
  transform: translateY(-101%);
  visibility: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .4s;
}
.barre .liens { margin-left: auto; }
.barre__nom {
  font-family: var(--sans); font-weight: 800; font-size: 1.15rem; font-stretch: 116%;
  color: var(--ecume); text-decoration: none;
}
.apres-lac .barre { transform: none; visibility: visible; transition-delay: 0s; }
@media (min-width: 900px) { .barre { display: flex; } }

/* ——— la barre d'accès rapide sur téléphone ——— */

.actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 4px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
  background: rgba(16, 38, 47, .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid rgba(223, 230, 227, .1);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .4s;
}
.apres-lac .actions { transform: none; visibility: visible; transition-delay: 0s; }
.actions a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 58px;
  font-family: var(--sans); font-weight: 600; font-size: .8rem; font-stretch: 104%;
  color: var(--ecume); text-decoration: none; border-radius: 6px;
}
.actions a:active { background: rgba(223, 230, 227, .08); }
.actions svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) { .actions { display: none; } }

/* ——— les sections ——— */

main { padding-top: clamp(64px, 10vw, 150px); }

.bloc {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--g) clamp(80px, 11vw, 160px);
  display: grid;
  gap: 1.75rem 4rem;
}
@media (min-width: 900px) {
  .bloc { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .bloc__tete { position: sticky; top: calc(var(--barre) + 2rem); align-self: start; }
  .bloc--large { grid-template-columns: 1fr; }
  .bloc--large .bloc__tete { position: static; max-width: 40rem; }
}
.bloc--large .bloc__corps { max-width: none; }

.bloc h2 {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.75rem);
  line-height: .95;
  font-stretch: 112%;
  color: var(--ecume);
  text-wrap: balance;
}
.bloc__intro { margin-top: 1rem; max-width: 26rem; opacity: .86; text-wrap: pretty; }
.bloc__tete .bouton { margin-top: 1.5rem; }
.bloc__corps { max-width: 44rem; }
.bloc__corps > p + p { margin-top: 1em; }
.grand {
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.35;
  color: var(--ecume);
  font-style: italic;
  text-wrap: pretty;
}

h3 {
  font-size: 1.2rem;
  font-weight: 700;
  font-stretch: 104%;
  color: var(--alpes);
}

/* ——— la carte ——— */

.onglets {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-bottom: 1.75rem;
  border: 1px solid var(--trait); border-radius: 4px; padding: 3px;
}
.onglets[hidden] { display: none; }
.onglets button {
  min-height: 44px;
  font: 700 1rem/1 var(--sans); font-stretch: 104%;
  color: var(--brume); background: none; border: 0; border-radius: 2px; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.onglets button[aria-selected="true"] { background: var(--ecume); color: var(--lac-profond); }

.carte { display: grid; gap: 2.5rem 3.5rem; }
@media (min-width: 760px) { .carte { grid-template-columns: 1fr 1fr; } }
.carte__volet h3 { margin-bottom: 1.1rem; }
.carte__volet[hidden] { display: none; }
.avec-onglets .carte__volet h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.plats { list-style: none; margin: 0; padding: 0; }
.plats li { margin-bottom: 1.4rem; }
.plat { display: flex; align-items: baseline; gap: .6rem; color: var(--ecume); line-height: 1.35; }
.plat__nom { font-weight: 600; }
.plat__points { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 2px dotted rgba(223, 230, 227, .34); transform: translateY(-.28em); }
.plat__prix { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.plat__detail { font-style: italic; font-size: .92em; opacity: .78; line-height: 1.45; margin-top: .2rem; max-width: 30rem; }
.carte__note { margin-top: .75rem; font-size: .9rem; opacity: .7; }

/* ——— le joran : une fenêtre sur le lac ——— */

.joran {
  position: relative;
  min-height: clamp(520px, 80vh, 780px);
  display: grid;
  align-items: end;
  margin-bottom: clamp(80px, 11vw, 160px);
  overflow: hidden;
  cursor: crosshair;
}
.joran__eau { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #1b3a45; }
.joran::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(23, 50, 60, 0) 38%, rgba(16, 38, 47, .72) 78%, rgba(23, 50, 60, 1));
}
.joran__texte {
  position: relative; z-index: 1;
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 0 var(--g) clamp(40px, 6vw, 80px);
  text-shadow: 0 1px 14px rgba(16, 38, 47, .8);
  cursor: auto;
}
.joran__texte > * { max-width: 42rem; }
.joran h2 {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.75rem); line-height: .95; font-stretch: 112%;
  color: var(--ecume); text-wrap: balance; margin-bottom: 1.25rem;
}
.joran .grand + p { margin-top: 1em; }

/* ——— la saison ——— */

.frise { list-style: none; margin: 0; padding: 0 0 0 1.75rem; display: grid; gap: 2.25rem; border-left: 1px solid var(--trait); }
.frise__etape { position: relative; }
.frise__etape::before {
  content: ""; position: absolute; left: calc(-1.75rem - 5.5px); top: .45rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--lac); border: 1.5px solid var(--alpes);
}
.frise__quand sup { font-size: .68em; line-height: 0; }
.frise__quand { font-family: var(--sans); font-weight: 700; font-stretch: 104%; font-size: .95rem; color: var(--alpes); }
.frise__etape h3 { color: var(--ecume); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.15; margin: .3rem 0 .45rem; }
.frise__etape p:last-child { font-size: .95em; opacity: .85; max-width: 22rem; }
.frise__etape--hiver { opacity: .82; }
.frise__etape--hiver::before { border-color: rgba(223, 230, 227, .5); }
.frise__etape.est-maintenant { opacity: 1; }
.frise__etape.est-maintenant::before { background: var(--lumiere); border-color: var(--lumiere); box-shadow: 0 0 12px 3px rgba(255, 213, 154, .45); }
.aujourdhui {
  display: inline-block; margin-left: .6rem; padding: .1rem .5rem;
  font-family: "Petrona", serif; font-style: italic; font-weight: 600; font-size: .85rem;
  color: var(--lac-profond); background: var(--lumiere); border-radius: 3px;
  vertical-align: .1em;
}
@media (min-width: 1000px) {
  .frise { grid-template-columns: repeat(5, 1fr); gap: 2rem; padding: 2.25rem 0 0; border-left: 0; border-top: 1px solid var(--trait); }
  .frise__etape::before { left: 0; top: calc(-2.25rem - 5.5px); }
}

/* ——— venir ——— */

.venir { display: grid; gap: 2.25rem; }
.plan { margin: 0; }
.plan svg { display: block; width: 100%; height: auto; background: #132c35; border: 1px solid rgba(223, 230, 227, .1); border-radius: 4px; }
.plan__nom { font: 700 17px var(--sans); fill: var(--ecume); }
.plan__note { font: italic 15px "Petrona", serif; fill: var(--brume); opacity: .85; }
.plan__eau { font: italic 18px "Petrona", serif; fill: var(--brume); opacity: .55; letter-spacing: .04em; }
.plan__onde { transform-box: fill-box; transform-origin: center; animation: onde 2.6s ease-out infinite; }
@keyframes onde { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }

.infos { margin: 0; }
.infos > div { display: grid; gap: .1rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--trait); }
.infos > div:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 640px) { .infos > div { grid-template-columns: 10rem 1fr; } }
.infos dt { font-family: var(--sans); font-weight: 700; font-stretch: 104%; color: var(--alpes); line-height: 1.6; }
.infos dd { margin: 0; }

/* ——— le pied ——— */

.pied {
  background: var(--lac-profond);
  padding: clamp(56px, 8vw, 110px) var(--g) max(2.5rem, env(safe-area-inset-bottom));
}
.pied__haut, .pied__demo { max-width: 1240px; margin: 0 auto; }
.pied__haut { display: grid; gap: 1.25rem 3rem; align-items: end; padding-bottom: 2.5rem; border-bottom: 1px solid var(--trait); }
@media (min-width: 900px) { .pied__haut { grid-template-columns: 1fr auto auto; } }
.pied__nom { font-family: var(--sans); font-weight: 800; font-stretch: 118%; font-size: clamp(2.2rem, 1.2rem + 4.5vw, 5rem); line-height: .9; color: var(--ecume); }
.pied__adresse { font-size: 1rem; line-height: 1.5; }
.pied__retour { font-family: var(--sans); font-weight: 600; font-size: 1rem; display: inline-flex; align-items: center; min-height: 44px; }
.pied__demo { padding-top: 1.5rem; font-size: .9rem; opacity: .7; max-width: 1240px; }
.pied__demo { text-wrap: pretty; }
.pied__demo a { white-space: nowrap; }

@media (max-width: 899px) {
  .lac__nav { display: none; }
  .pied { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .titre { font-size: 16vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene { height: auto; }
  .lac { position: relative; cursor: auto; }
  .joran { cursor: auto; }
  .titre { cursor: auto; }
  .lac__geste { display: none; }
  .plan__onde { animation: none; opacity: 0; }
  .barre, .actions, .bouton, .liens a { transition: none; }
}