/* DM : fichier du pied de page partagé, déjà chargé par la page (même fichier que la copie assets/dm.woff, gardée dans
   le dépôt mais plus livrée ; audit n° 2, lot 7, phase 2). */
@font-face {
  font-family: DM;
  src: url('../../../grlab-abonnements-wordpress/public/footer/assets/dm.woff');
  font-display: swap;
}
@font-face {
  font-family: Roman;
  src: url('assets/roman.woff');
  font-display: swap;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #e4dfd6;
  color: var(--ink, #17384a);
  font-family: DM, sans-serif;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.room {
  position: absolute;
  width: 1672px;
  height: 941px;
  transform-origin: 0 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.7s;
}
.ready .room {
  opacity: 1;
}
.decor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.installation {
  position: absolute;
  z-index: 2;
  outline: 0;
}
.installation:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: -8px;
  border-radius: 18px;
}
#art {
  display: block;
  width: 100%;
  height: 100%;
}
header {
  position: absolute;
  inset: 0 0 auto;
  height: 105px;
  z-index: 8;
  color: var(--nav);
}
.gr-home-logo {
  position: absolute;
  left: 37px;
  top: 23px;
  width: 111px;
}
header nav {
  gap: 35px;
  position: absolute;
  font-size: 17px;
  align-items: center;
}
header nav a {
  display: block;
  padding: 10px 0;
  white-space: nowrap;
}
header nav a:hover {
  translate: 0 -3px;
  opacity: 0.7;
}
.intro {
  position: absolute;
  z-index: 4;
  left: 110px;
  top: 267px;
  width: 640px;
  pointer-events: none;
}
.intro h1 {
  font:
    400 91px/0.97 Roman,
    serif;
  letter-spacing: -2px;
  margin: 0 0 31px;
  text-wrap: balance;
}
.intro p {
  font:
    400 22px/1.5 DM,
    sans-serif;
  margin: 0 0 37px;
}
.actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 21px;
  pointer-events: auto;
}
.contact {
  display: flex;
  align-items: center;
  gap: 23px;
  padding: 17px 25px;
  border-radius: 50px;
  font: 16px DM;
  background: var(--accent);
  color: var(--buttonText);
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 20px #00000008;
  isolation: isolate;
}
.contact:before {
  content: '';
  position: absolute;
  z-index: -1;
}
.contact:after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.contact svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.35;
  fill: none;
}
.contact:hover,
.contact:focus-visible {
  translate: 0 -4px;
  box-shadow: 0 14px 28px #0000001d;
}
.contact:hover:before {
  opacity: 1;
}
.contact:hover svg {
  transform: translateX(6px);
}
.discover {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 7px 0;
  transition: opacity 0.3s;
}
.discover span {
  font-size: 23px;
  transition: transform 0.3s;
}
.discover:hover span {
  transform: translate(3px, -3px);
}
.discover:hover {
  opacity: 0.72;
}
.hint {
  grid-column: 2;
  font-size: 13px;
  opacity: 0.75;
}
.transform {
  position: absolute;
  z-index: 6;
  border: 1px solid currentColor;
  border-radius: 30px;
  backdrop-filter: blur(4px);
  padding: 12px 18px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.transform:hover {
  translate: 0 -3px;
}
.transform span {
  font-size: 20px;
}
.art-shadow {
  position: absolute;
  z-index: 1;
  background: radial-gradient(ellipse, #080a1035 0%, #080a100c 45%, transparent 70%);
  pointer-events: none;
}
.announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.direction {
  flex: 1;
}
.direction b {
  font-weight: 400;
  font-size: 16px;
  display: block;
}
.direction small {
  font-size: 11px;
  color: #686c66;
  display: block;
  margin-top: 3px;
}
.variants {
  display: flex;
  gap: 8px;
}
.variants a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #c9cdc5;
  border-radius: 50%;
  transition:
    background 0.25s,
    translate 0.25s;
}
.variants a:hover {
  background: #e4e6dc;
  translate: 0 -2px;
}
.variants a[aria-current] {
  background: #243b36;
  color: #fff;
  border-color: #243b36;
}
.dock button,
.current {
  border: 1px solid #c6ccc1;
  background: none;
  padding: 10px 13px;
  border-radius: 5px;
  font-size: 12px;
}
.dock button:hover,
.current:hover {
  background: #e3e6dd;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
body[data-room='spectre'] .intro {
  left: 1040px;
  top: 245px;
  width: 575px;
}
body[data-room='spectre'] .intro h1 {
  font-size: 83px;
}
body[data-room='spectre'] .intro p {
  font-size: 20px;
}
body[data-room='matiere'] .intro {
  left: 114px;
  width: 615px;
}
body[data-room='matiere'] .intro h1 {
  font-size: 82px;
}
body[data-room='matiere'] .intro p {
  font-size: 21px;
  margin-bottom: 26px;
}
body[data-room='equilibres'] .intro {
  left: 119px;
  top: 260px;
  width: 635px;
}
body[data-room='traversee'] .intro {
  left: 320px;
  top: 204px;
  width: 1032px;
  text-align: center;
}
body[data-room='traversee'] .intro h1 {
  font-size: 92px;
  line-height: 1.1;
  margin-bottom: 14px;
}
body[data-room='traversee'] .intro p {
  font-size: 21px;
  margin-bottom: 27px;
}
body[data-room='traversee'] .intro p br {
  display: none;
}
body[data-room='traversee'] .actions {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 34px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    transition: none !important;
    animation-duration: 0.001ms !important;
  }
  .contact:hover,
  header nav a:hover,
  .transform:hover {
    translate: none;
  }
}
@media (max-width: 900px) {
  .direction small,
  .current {
    display: none;
  }
  .direction b {
    font-size: 13px;
  }
  .variants {
    gap: 5px;
  }
  .variants a {
    width: 31px;
    height: 31px;
  }
}
@media (max-width: 560px) {
  .direction {
    display: none;
  }
}
body[data-room='equilibres'] header {
  background: linear-gradient(#07121ba0, transparent);
}
body[data-room='matiere'] .discover {
  border-radius: 3px;
}
body[data-room='equilibres'] header nav {
  top: 10px;
}
body[data-room='matiere'] .intro {
  top: 184px;
}
body[data-room='matiere'] .discover {
  background: none;
  padding: 7px 0;
}
body[data-variant='nacre'] .transform {
  color: #f3f7fa;
  background: #34526b90;
}
body[data-variant='ambre'] header nav {
  color: #f9eddb;
}
/* The artwork and its navigation echoes share one quiet cool spectrum. */
.holo-target {
  position: absolute;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  outline-offset: -8px !important;
  z-index: 3;
  -webkit-user-select: none;
  user-select: none;
}
.holo-target span {
  position: absolute;
  left: 0;
  right: 0;
  font: 13px DM;
  letter-spacing: 0.4px;
  transition:
    opacity 0.5s,
    translate 0.5s;
}
header nav a {
  isolation: isolate;
  transition:
    translate 0.4s,
    color 0.5s,
    text-shadow 0.5s,
    opacity 0.4s;
}
header nav a:before {
  content: '';
  position: absolute;
  inset: -8px -19px;
  z-index: -1;
  border-radius: 50%;
  opacity: 0;
  scale: 0.7;
  transition:
    opacity 0.55s,
    scale 0.55s;
  pointer-events: none;
}
header nav a.is-linked {
  opacity: 1;
  translate: 0 -3px;
}
header nav a.is-linked:before {
  opacity: 1;
  scale: 1.15;
}
body[data-variant='porcelaine'] header nav a.is-linked,
body[data-variant='sable'] header nav a.is-linked {
  color: #084967;
  text-shadow: 0 0 13px #71beff;
}
.gr-home-logo {
  filter: drop-shadow(0 1px 3px #00000020);
}
@media (prefers-reduced-motion: reduce) {
  .holo-target span,
  .holo-target.is-active span,
  header nav a.is-linked {
    translate: none;
  }
  header nav a:before {
    scale: 1;
  }
}
.ambient-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    transparent 46%,
    rgba(4, 11, 22, 0.15) 59%,
    rgba(4, 11, 22, 0.25) 83%,
    rgba(4, 11, 22, 0.18)
  );
}
/* V6: full room floor and hidden-at-rest discoveries. */
.ambient-shade,
.art-shadow {
  display: none;
}
.holo-target {
  border-radius: 0;
}
.holo-target span {
  opacity: 0;
  bottom: auto;
  top: 272px;
  font-size: 14px;
}
.holo-target:hover span,
.holo-target:focus-visible span,
.holo-target.is-active span {
  opacity: 1;
  translate: none;
}
.holo-target:focus-visible {
  outline: 1px dashed #8fc9ed;
  outline-offset: -18px !important;
}
body[data-variant='portiques'] header nav a.is-linked,
body[data-variant='voute'] header nav a.is-linked {
  color: #084967;
  text-shadow: 0 0 13px #71beff;
}
/* V7: the room palette also controls the waves, objects and navigation light. */
.holo-target {
  color: rgb(var(--holo));
}
.holo-target span {
  text-shadow: 0 1px 8px #000;
}
.holo-target:focus-visible {
  outline-color: rgb(var(--holo));
}
header nav a.is-linked {
  color: var(--navGlow);
  text-shadow:
    0 0 12px rgba(var(--holo), 0.8),
    0 0 28px rgba(var(--holo), 0.5);
}
header nav a:before {
  background: radial-gradient(ellipse, rgba(var(--holo), 0.22), transparent 70%);
}
.transform {
  color: rgb(var(--holo));
  background: #141c23e6;
}
.transform:hover {
  background: #29343be6;
}
/* Same logical scene; links replace preview buttons without changing their label alignment. */
.holo-target {
  display: block;
  text-align: center;
}
.decor {
  object-fit: fill;
}
.installation {
  touch-action: pan-y;
}
/* Abonnements motion, retaining the original Accueil geometry and palette. */
.contact {
  transition: translate 0.3s ease;
}
.contact::before {
  inset: 0;
  background: none;
  opacity: 1;
  transition: box-shadow 0.3s;
  border-radius: inherit;
  border: 1px solid #ffffff35;
  pointer-events: none;
}
.contact::after {
  background: linear-gradient(110deg, transparent 20%, #ffffff26 48%, transparent 78%);
  transform: translateX(-115%);
  transition: transform 0.65s ease;
  border: 0;
}
.contact:is(:hover, :focus-visible) {
  translate: 0 -2px;
  box-shadow: 0 5px 20px #00000008;
}
.contact:is(:hover, :focus-visible)::before {
  box-shadow: inset 0 0 0 1px #ffffff55;
}
.contact:is(:hover, :focus-visible)::after {
  transform: translateX(115%);
}
.contact:active {
  translate: 0 0;
}
.contact svg {
  transition: translate 0.3s;
  transform: none;
}
.contact:is(:hover, :focus-visible) svg {
  translate: 4px 0;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .contact,
  .contact::before,
  .contact::after,
  .contact svg {
    transition: none !important;
  }
  .contact::after {
    display: none;
  }
  .contact:is(:hover, :focus-visible),
  .contact:is(:hover, :focus-visible) svg {
    translate: none;
  }
}
/* Move the original Accueil links intact: no font, size, cloud or motion override. */
header nav {
  display: block;
  left: 0;
  top: 0;
  width: 1672px;
  height: 105px;
  transform: none;
  pointer-events: none;
}
header nav a {
  position: absolute;
  pointer-events: auto;
}
header nav a[data-route='prestations'] {
  left: 584.0653381347656px;
  top: 16.52281665802002px;
}
header nav a[data-route='abonnements'] {
  left: 701.5123901367188px;
  top: 16.425254821777344px;
}
header nav a[data-route='galerie'] {
  left: 840.3294067382812px;
  top: 16.496005058288574px;
}
header nav a[data-route='a-propos'] {
  left: 928.0842590332031px;
  top: 16.465229988098145px;
}
header nav a[data-route='contact'] {
  left: 1029.575927734375px;
  top: 16.496005058288574px;
}
/* The wave control shares the Contact CTA motion, not its palette or dimensions. */
.transform {
  overflow: hidden;
  isolation: isolate;
  transition: translate 0.3s ease;
}
.transform::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: box-shadow 0.3s;
}
.transform::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, #ffffff26 48%, transparent 78%);
  transform: translateX(-115%);
  transition: transform 0.65s ease;
  pointer-events: none;
}
.transform:is(:hover, :focus-visible) {
  translate: 0 -2px;
  background: #141c23e6;
}
.transform:is(:hover, :focus-visible)::before {
  box-shadow: inset 0 0 0 1px #ffffff55;
}
.transform:is(:hover, :focus-visible)::after {
  transform: translateX(115%);
}
.transform:active {
  translate: 0 0;
}
.transform span {
  transition: translate 0.3s;
}
.transform:is(:hover, :focus-visible) span {
  translate: 4px 0;
}
@media (prefers-reduced-motion: reduce) {
  .transform,
  .transform::before,
  .transform::after,
  .transform span {
    transition: none !important;
  }
  .transform::after {
    display: none;
  }
  .transform:is(:hover, :focus-visible),
  .transform:is(:hover, :focus-visible) span {
    translate: none;
  }
}
/* Ivory typography; the original active-link glow still takes precedence. */
.intro p,
.discover,
header nav {
  color: #f6f1e8;
}
/* Hand cursor is limited to the nearby page targets. */
.installation,
.installation:active {
  cursor: default;
}
/* Fluidité des clics (22 octobre 2026) : l'onglet survolé remonte de 3 px ; une zone transparente accrochée sous lui prolonge sa zone de clic pour que la souris ne la quitte pas. Aucun effet visible. */
header nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0;
}
header nav a:is(:hover, .is-linked)::after {
  height: 4px;
}