/* Salle Prestations PC : une seule feuille (audit n° 2, lot 7, phase 2). Elle reprend, dans le même ordre, les quatre
   feuilles qui s'empilaient (style.css, approved-room.css, approved-interactions.css, approved-finitions-room.css).
   Retirées seulement : les déclarations reprises plus loin par le même sélecteur, dans des conditions au moins aussi
   larges, et les règles des éléments que la salle n'a jamais (barre de l'ancien aperçu, salles graphite et encre).
   style.css reste pour l'ancien aperçu room.html, hors des paquets 10Web. */
/* Base de la salle (ancien style.css) */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--ink, #403a35);
  font-family: 'DM Sans Accueil', 'DM Sans', sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
}
a,
button {
  -webkit-tap-highlight-color: transparent;
}
#viewport {
  position: relative;
}
#scene {
  width: 1672px;
  height: 941px;
  position: absolute;
  transform-origin: top left;
  overflow: hidden;
}
.room {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
}
header {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 36px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand img {
  width: 154px;
  height: auto;
  display: block;
}
header nav {
  display: flex;
  gap: 35px;
  font-size: 15px;
}
header nav a {
  padding: 10px 0;
}
header nav a:hover,
header nav a[aria-current] {
  opacity: 1;
}
.contact {
  height: 50px;
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border: 1px solid var(--accent);
  border-radius: 30px;
  background: var(--accent);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.contact:before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff20;
  transform: translateY(103%);
  transition: transform 0.4s;
}
.contact:hover:before {
  transform: translateY(0);
}
.contact span,
.contact b {
  position: relative;
  font-weight: 400;
}
.contact b {
  font-size: 24px;
}
.heading {
  position: absolute;
  top: 124px;
  left: 0;
  right: 0;
  text-align: center;
}
.heading h1 {
  font:
    normal 48px/1.08 'Nimbus Roman Accueil',
    'Nimbus Roman',
    serif;
  margin: 0 0 10px;
  letter-spacing: -1px;
}
.heading p {
  font-size: 17px;
  margin: 0;
}
.offer {
  position: absolute;
  padding: 17px 15px;
  cursor: pointer;
  outline: none;
  isolation: isolate;
  --art-ink: var(--accent);
}
.offer.dark {
  --art-ink: #dccbc0;
}
.offer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
.offer-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  pointer-events: none;
}
.offer h2 {
  font:
    normal 29px/1.02 'Nimbus Roman',
    serif;
  margin: 0;
  white-space: pre-line;
}
.offer .index {
  font-size: 10px;
  letter-spacing: 0.14em;
  padding-top: 4px;
}
.art {
  position: absolute;
  left: 6px;
  right: 6px;
  pointer-events: none;
}
.art canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.features {
  position: absolute;
  left: 15px;
  right: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.features li {
  position: relative;
  padding-left: 13px;
}
.features li:before {
  content: '·';
  position: absolute;
  left: 0;
  font-weight: bold;
  opacity: 0.55;
}
.offer-foot {
  position: absolute;
  bottom: 10px;
  left: 15px;
  right: 15px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  pointer-events: none;
}
.price small {
  display: block;
  font-size: 10px;
  margin-bottom: 4px;
}
.price strong {
  font:
    normal 30px/1 'Nimbus Roman',
    serif;
}
.arrow {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  border-radius: 50%;
  font-size: 21px;
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.25s;
}
.offer:hover .arrow {
  transform: translateX(3px);
}
.caption {
  position: absolute;
  bottom: 31px;
  left: 65px;
  right: 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  gap: 30px;
}
.caption span:first-child {
  font:
    normal 24px 'Nimbus Roman',
    serif;
}
.caption span:last-child {
  font-size: 12px;
  max-width: 640px;
  text-align: right;
  opacity: 0.85;
}
#overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #17191790;
  backdrop-filter: blur(9px);
}
#overlay[hidden] {
  display: none;
}
#popups {
  border: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before {
    transition: none !important;
  }
}
.features {
  top: 222px;
  font-size: 13px;
  line-height: 1.3;
}
.features li {
  margin-bottom: 7px;
}
.art {
  top: 78px;
  height: 139px;
}
.offer-foot {
  padding-top: 10px;
}
.offer h2 {
  font-size: 28px;
}
.offer.compact {
  padding: 12px 10px;
}
.offer.compact h2 {
  font-size: 26px;
}
.offer.compact .art {
  top: 65px;
  height: 100px;
  left: 3px;
  right: 3px;
}
.offer.compact .features {
  top: 171px;
  left: 10px;
  right: 10px;
  font-size: 12px;
  line-height: 1.25;
}
.offer.compact .features li {
  margin-bottom: 5px;
}
.offer.compact .offer-foot {
  left: 10px;
  right: 10px;
  bottom: 6px;
  padding-top: 8px;
}
.offer.compact .price strong {
  font-size: 26px;
}
.offer.compact .arrow {
  width: 32px;
  height: 32px;
  font-size: 18px;
}
.argile .heading {
  top: 117px;
}
.argile .heading h1 {
  font-size: 45px;
}
.sauge .heading {
  top: 117px;
}
.sauge .heading h1 {
  font-size: 46px;
}
/* Full source frame, sized by width; no viewport-height crop. */
#viewport {
  width: 100%;
  margin: 0;
  overflow: clip;
}
body {
  background: #e5e1d9;
}
.motion-access {
  position: fixed;
  z-index: 30;
  left: 12px;
  top: 12px;
  transform: translateY(-160%);
  padding: 9px 16px;
  border: 1px solid var(--accent);
  border-radius: 24px;
}
.motion-access:focus-visible {
  transform: none;
}

/* Salle grenat, en-tête et logo (ancien approved-room.css) */
#scene {
  isolation: isolate;
}
.red-preview-decor {
  position: absolute;
  inset: 0;
  width: 1672px;
  height: 941px;
  pointer-events: none;
}
header,
header nav a,
.heading h1,
.heading p,
header .contact,
header .contact span,
header .contact b,
.offer,
.offer.dark,
.offer h2,
.offer .features,
.offer .index,
.offer .price,
.offer .arrow,
.caption {
  color: #fff !important;
}
header nav a {
  opacity: 1;
}
header .brand img {
  filter: brightness(0) invert(1);
}
.heading {
  text-shadow: 0 1px 7px #42282365;
}
.offer {
  text-shadow: 0 1px 2px #461b1b35;
}
.offer .index,
.price small {
  opacity: 1;
}
header .contact {
  background: #994b48;
  border-color: #994b48;
}
header .contact:hover {
  background: #994b48;
}
.offer .arrow {
  background: #8d302c;
  border-color: #ffd5cb;
}
.offer:hover .arrow,
.offer.dark:hover .arrow {
  background: #e7776e;
  border-color: white;
  color: white;
  box-shadow: 0 0 18px #ff8f8960;
}
.offer:focus-visible {
  outline-color: white;
}
.motion-access {
  color: #fff;
  background: #963c36;
}
.offer[data-offer='classique'],
.offer[data-offer='maintenance'],
.offer[data-offer='classique'] h2,
.offer[data-offer='maintenance'] h2,
.offer[data-offer='classique'] .features,
.offer[data-offer='maintenance'] .features,
.offer[data-offer='classique'] .index,
.offer[data-offer='maintenance'] .index,
.offer[data-offer='classique'] .price,
.offer[data-offer='maintenance'] .price,
.offer[data-offer='classique'] .arrow,
.offer[data-offer='maintenance'] .arrow {
  color: var(--ink) !important;
  text-shadow: none;
}
.offer[data-offer='classique'] .index,
.offer[data-offer='maintenance'] .index {
  opacity: 0.6;
}
.offer[data-offer='classique'] .price small,
.offer[data-offer='maintenance'] .price small {
  opacity: 0.75;
}
.offer[data-offer='classique'] .arrow,
.offer[data-offer='maintenance'] .arrow {
  border-color: color-mix(in srgb, currentColor 55%, transparent);
}
@font-face {
  font-family: preview-header-dm;
  /* Même fichier que la police du pied de page : un seul téléchargement (audit n° 2, lot 7, phase 2). */
  src: url('../../../grlab-abonnements-wordpress/public/footer/assets/dm.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
.gr-home-logo {
  display: inline-block;
  width: var(--gr-logo-width, 150px);
  perspective: 900px;
  line-height: 0;
  overflow: visible;
  vertical-align: middle;
}
.gr-home-logo__motion {
  display: block;
  transform-style: preserve-3d;
}
.gr-home-logo__image {
  display: block;
  width: 100%;
  height: auto;
}
.gr-home-logo[data-tone='white'] .gr-home-logo__image {
  filter: brightness(0) invert(1);
}
.gr-home-logo[data-tone='black'] .gr-home-logo__image {
  filter: brightness(0);
}
.gr-home-logo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 8px;
}
.gr-home-logo.is-animating .gr-home-logo__motion {
  animation: gr-lab-suspension 2s cubic-bezier(0.45, 0, 0.25, 1) both;
}
@keyframes gr-lab-suspension {
  0%,
  100% {
    transform: translateY(0) rotateY(0) rotateX(0);
  }
  30% {
    transform: translateY(-18px) rotateY(-25deg) rotateX(9deg);
  }
  65% {
    transform: translateY(-12px) rotateY(23deg) rotateX(-5deg);
  }
  86% {
    transform: translateY(2px) rotateY(-3deg) rotateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gr-home-logo.is-animating .gr-home-logo__motion {
    animation: none;
  }
}
#scene > header {
  left: 0;
  right: auto;
  top: 0;
  width: 1672px;
  height: 110px;
  display: block;
  z-index: 8;
  --header-glow: #ed9b96;
  --header-holo: 237, 155, 150;
}
#scene > header .brand.gr-home-logo {
  position: absolute;
  left: 37px;
  top: 23px;
  width: 145px;
  filter: drop-shadow(0 1px 3px #00000020);
}
#scene > header .brand .gr-home-logo__image {
  width: 100%;
  height: auto;
}
#scene > header nav {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1930.6666666667px;
  height: 110px;
  display: block;
  transform: scale(0.866);
  transform-origin: 0 0;
  font-family: preview-header-dm;
}
#scene > header nav a {
  position: absolute;
  display: block;
  padding: 0;
  opacity: 1;
  isolation: isolate;
  text-decoration: none;
  border: 0;
}
#scene > header nav a .ink {
  color: inherit !important;
}
#scene > header .ink {
  position: absolute;
  white-space: pre;
  font-family: preview-header-dm !important;
  font-synthesis: none;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
#scene > header nav a:before {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  opacity: 0;
  scale: 0.7;
  transition:
    opacity 0.55s,
    scale 0.55s;
  pointer-events: none;
}
#scene > header nav a:is(:hover, :focus-visible) {
  opacity: 1;
}
#scene > header nav a:is(:hover, :focus-visible):before {
  opacity: 1;
  scale: 1.15;
}
#scene > header .contact {
  position: absolute;
  display: block;
  width: 251px;
  height: 55px;
  padding: 0;
  border: 0;
  gap: 0;
  transform: scale(0.866);
  transform-origin: 0 0;
  border-radius: 30px;
  isolation: isolate;
  overflow: hidden;
  background: none;
  transition: translate 0.3s ease;
}
#scene > header .contact:before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 26px;
  transform: none;
  transition:
    background 0.3s,
    box-shadow 0.3s;
  z-index: -1;
}
#scene > header .contact:after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 26px;
  background: linear-gradient(110deg, transparent 20%, #ffffff26 48%, transparent 78%);
  transform: translateX(-115%);
  transition: transform 0.65s ease;
  pointer-events: none;
}
#scene > header .contact:is(:hover, :focus-visible) {
  translate: 0 -1.732px;
  background: none;
}
#scene > header .contact:is(:hover, :focus-visible):before {
  box-shadow: none;
}
#scene > header .contact:is(:hover, :focus-visible):after {
  transform: translateX(115%);
}
#scene > header .contact .preview-arrow {
  position: absolute;
  left: 210px;
  top: 20px;
  width: 19px;
  height: 16px;
  transition: translate 0.3s;
  pointer-events: none;
}
#scene > header .contact:is(:hover, :focus-visible) .preview-arrow {
  translate: 4px 0;
}
#scene > header .contact:active {
  translate: 0 0;
}
.offer .index {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  #scene > header nav a,
  #scene > header nav a:before,
  #scene > header .contact,
  #scene > header .contact:before,
  #scene > header .contact:after,
  #scene > header .preview-arrow {
    transition: none !important;
  }
  #scene > header .contact:after {
    display: none;
  }
  #scene > header nav a:is(:hover, :focus-visible),
  #scene > header .contact:is(:hover, :focus-visible),
  #scene > header .contact:is(:hover, :focus-visible) .preview-arrow {
    translate: none;
  }
}
#scene > header nav {
  pointer-events: none;
}
#scene > header nav a {
  pointer-events: auto;
}
#scene > header nav a:before {
  inset: -8px -19px;
  background: radial-gradient(ellipse, rgba(237, 155, 150, 0.22), transparent 70%);
  filter: none;
}

/* Lueur des onglets, flèches des panneaux et bouton d’appel (ancien approved-interactions.css) */
/* Home's entire 17px navigation glow, without the scaled subscription text matrices. */
#scene > header nav a {
  transition:
    translate 0.4s,
    color 0.5s,
    text-shadow 0.5s,
    opacity 0.4s !important;
  --exact-glow: 237, 155, 150;
}
#scene > header nav a:before {
  content: none !important;
}
#scene > header nav a .ink,
#scene > header nav a:is(:hover, :focus-visible) .ink {
  filter: none !important;
  text-shadow: none !important;
  transition: none !important;
}
#scene > header nav a:is(:hover, :focus-visible) {
  translate: 0 -3.464203233px !important;
  color: #c77770 !important;
  text-shadow: none !important;
}
#scene > header nav a .home-nav-glow {
  position: absolute;
  left: var(--glow-center-x);
  top: var(--glow-center-y);
  display: block;
  width: max-content;
  box-sizing: border-box;
  padding: 10px 0;
  white-space: nowrap;
  font: 400 17px/normal preview-header-dm;
  letter-spacing: normal;
  color: transparent !important;
  pointer-events: none;
  isolation: isolate;
  z-index: -1;
  transform: translate(-50%, -50%) scale(1.154734411085);
  transform-origin: center;
  text-shadow: none;
  transition: text-shadow 0.5s;
}
#scene > header nav a .home-nav-glow:before {
  content: '';
  position: absolute;
  inset: -8px -19px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 209, 198, 0.82), rgba(252, 176, 161, 0.5) 34%, transparent 70%);
  opacity: 0;
  scale: 0.7;
  transition:
    opacity 0.55s,
    scale 0.55s;
  pointer-events: none;
}
#scene > header nav a:is(:hover, :focus-visible) .home-nav-glow {
  text-shadow:
    0 0 12px rgba(255, 198, 187, 1),
    0 0 28px rgba(246, 156, 144, 0.85);
}
#scene > header nav a:is(:hover, :focus-visible) .home-nav-glow:before {
  opacity: 1;
  scale: 1.15;
}
@media (prefers-reduced-motion: reduce) {
  #scene > header nav a,
  #scene > header nav a .home-nav-glow,
  #scene > header nav a .home-nav-glow:before {
    transition: none !important;
  }
  #scene > header nav a:is(:hover, :focus-visible) {
    translate: none !important;
  }
  #scene > header nav a .home-nav-glow:before {
    scale: 1 !important;
  }
}
/* Exact Premium arrow appearance and transition, at rest and on hover. */
.offer[data-offer='classique'] .arrow,
.offer[data-offer='maintenance'] .arrow {
  background: #8d302c;
  border-color: #ffd5cb;
  color: #fff !important;
  box-shadow: none;
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.25s;
}
.offer[data-offer='classique']:hover .arrow,
.offer[data-offer='maintenance']:hover .arrow {
  background: #e7776e;
  border-color: #fff;
  color: #fff !important;
  box-shadow: 0 0 18px #ff8f8960;
  transform: translateX(3px);
}
/* CTA palette taken directly from the approved navigation hover. */
#scene > header .contact,
#scene > header .contact span,
#scene > header .contact b,
#scene > header .contact .ink,
#scene > header .contact .preview-arrow {
  color: #c77770 !important;
}
#scene > header .contact:before {
  background: #f7c9be;
}
#scene .offer,
#scene .offer .art,
#scene .offer .art canvas {
  cursor: pointer !important;
}
/* 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. */
#scene > header nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0;
}
#scene > header nav a:hover::after {
  height: 4px;
}

/* Finitions ivoire (ancien approved-finitions-room.css) */
/* Approved desktop preview 9882. Only the inner scene is clipped; WordPress owns page scrolling. */
html,
body {
  overflow: hidden !important;
}
/* Fixed lettering only. Existing hover colors, halos and animation rules win unchanged. */
#scene > header nav a {
  color: #f6f1e8 !important;
}
#scene .heading h1,
#scene .heading p,
#motion,
#scene .offer[data-offer='premium'] h2,
#scene .offer[data-offer='premium'] .features li,
#scene .offer[data-offer='premium'] .price small,
#scene .offer[data-offer='premium'] .price strong {
  color: #f6f1e8 !important;
}
#scene .offer:not(:hover):not(:focus-visible) .arrow {
  color: #f6f1e8 !important;
}
/* Only Premium's resting ring changes color; its native border width is untouched. */
#scene .offer[data-offer='premium']:not(:hover):not(:focus-visible) .arrow {
  border-color: #f6f1e8 !important;
}
/* Hover colors sampled from the header CTA; resting colors and motion stay unchanged. */
#scene .offer:hover .arrow {
  background: #f7c9be !important;
  color: #c77770 !important;
}
/* Keep an arrow cursor on the room heading without changing text selection. */
#scene .heading,
#scene .heading h1,
#scene .heading p {
  cursor: default;
}