/* Scène PC des Abonnements : une seule feuille (audit n° 2, lot 7, phase 2). Elle réunit, dans le même ordre, les
   quatre couches validées preview.css (base de la scène), approved-interactions.css (bouton rond, fenêtres des offres,
   prix), approved-ivory.css (textes ivoire, traits bleus) et approved-separators.css (calque plat des traits, 14 octobre
   2026). Chaque propriété garde la valeur finale que donnait leur empilement. Retirés : les règles sans élément (outils
   et pied de l'ancien aperçu, décor « verre », plein écran, fenêtres de moins de 800 px, où la scène PC n'est jamais
   affichée) et les déclarations toujours remplacées par une suivante. source/offers.css (source fournie) reste chargée
   juste avant. */

/* Base de la scène (ancien preview.css). */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #e9e8e4;
  color: #23394b;
  font:
    400 13px/1.4 study-dm,
    sans-serif;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
}
#viewport {
  position: relative;
  overflow: hidden;
  height: 100dvh;
  width: 100%;
}
#scene {
  position: absolute;
  width: 1672px;
  height: 941px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  overflow: hidden;
}
#room {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.page-title {
  position: absolute;
  top: 116px;
  left: 220px;
  right: 220px;
  text-align: center;
  text-shadow: 0 1px 5px #17354b55;
}
.page-title h1 {
  font:
    400 45px/1.04 study-roman,
    serif;
  letter-spacing: -0.9px;
  margin: 0 0 10px;
}
.page-title p {
  font:
    400 21px/1.4 study-dm,
    sans-serif;
  margin: 0;
}
.plan {
  position: absolute;
  left: 0;
  top: 0;
  width: 500px;
  height: 700px;
  transform-origin: 0 0;
}
.panel-logo {
  position: absolute;
  left: 38px;
  top: 37px;
  width: 100px;
  height: auto;
}
.headline {
  position: absolute;
  left: 37px;
  top: 100px;
  margin: 0;
  white-space: pre;
  font:
    400 47px/1.06 study-roman,
    serif;
  letter-spacing: -0.7px;
}
.price {
  position: absolute;
  left: 37px;
  top: 246px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
}
.price strong {
  font:
    400 65px/1 study-dm,
    sans-serif;
}
.price span {
  font-size: 21px;
}
.description {
  position: absolute;
  left: 38px;
  top: 330px;
  font:
    400 18px/1.42 study-dm,
    sans-serif;
  white-space: pre;
  margin: 0;
  letter-spacing: -0.15px;
}
.constellation {
  position: absolute;
  left: 310px;
  top: 165px;
  width: 175px;
  height: 282px;
}
.constellation canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.features {
  position: absolute;
  top: 521px;
  left: 25px;
  right: 25px;
  padding: 20px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--panel-ink), transparent 70%);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 0;
}
.feature {
  font:
    400 14.5px/1.45 study-dm,
    sans-serif;
  white-space: pre;
  text-align: center;
  padding: 0 5px;
  border-left: 1px solid color-mix(in srgb, var(--panel-ink), transparent 70%);
  transition:
    color 0.25s,
    translate 0.25s;
}
.feature:first-child {
  border-left: 0;
}
.feature:hover {
  translate: 0 -2px;
}
.plan-name {
  position: absolute;
  top: 626px;
  left: 0;
  width: 100%;
  padding: 15px 38px 0;
  border-top: 1px solid color-mix(in srgb, var(--panel-ink), transparent 70%);
  margin: 0;
}
.plan-name small {
  display: block;
  font:
    400 14px/1.1 study-dm,
    sans-serif;
}
.plan-name strong {
  font:
    400 23px/1.2 study-dm,
    sans-serif;
}
.offer-dialog {
  --tone: var(--popup-tone) !important;
  --ink: var(--popup-ink) !important;
  --popup-ink: #fff !important;
  --accent: #b6d9ff !important;
  color: #fff;
  background: #2d4b64;
  border-color: #b6d9ff;
}
.offer-dialog[data-tier='essentiel'] {
  --popup-tone: #6589a5 !important;
}
.offer-dialog[open] {
  animation: offer-reveal 0.35s ease-out;
}
.offer-dialog .offer-animation {
  pointer-events: auto !important;
  cursor: default !important;
  aspect-ratio: 1 !important;
  width: 180px !important;
  height: 210px !important;
  right: 0 !important;
}
.offer-dialog .offer-features li {
  border-bottom-color: #b6d9ff;
  transition:
    padding-left 0.2s,
    background 0.2s;
}
.offer-dialog .offer-features li:first-child {
  border-top-color: #b6d9ff;
}
.offer-dialog .offer-features li:hover {
  padding-left: 5px;
  background: #2b4b6810;
}
@keyframes offer-reveal {
  from {
    opacity: 0;
    translate: 0 10px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
/* Seulement si la scène est ouverte seule dans une fenêtre étroite (dans la page, elle n'est affichée qu'au-delà de
   1 024 px). */
@media (max-width: 800px) {
  .offer-dialog .offer-animation {
    width: 115px !important;
    height: 150px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* Local preview: white typography and one slightly darker Essentiel panel. */
.plan,
.plan[data-tier='essentiel'] {
  color: #fff;
  --panel-ink: #fff;
  --fill: #23455e;
  --fill-ink: #fff;
}

/* Bouton rond, fenêtres des offres et prix (ancien approved-interactions.css). */
/* Local variant: Prestations circular arrow, scaled into each existing panel plane. */
.plan,
.plan .constellation,
.plan .constellation canvas {
  cursor: pointer;
}
.plan .round-offer {
  position: absolute;
  left: auto;
  right: 37px;
  top: 444px;
  bottom: auto;
  width: 52px;
  height: 52px;
  min-width: 0;
  padding: 0;
  display: grid;
  place-items: center;
  justify-content: center;
  gap: 0;
  border: 1.4px solid #b6d9ff;
  border-radius: 50%;
  overflow: visible;
  isolation: isolate;
  font:
    400 30px/1 study-dm,
    sans-serif;
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}
/* Remplissage et pictogramme d'origine, jamais affichés : seule la flèche reste. */
.plan .round-offer:before,
.plan .round-offer > svg {
  display: none;
}
.plan .round-offer > [data-block] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.plan .round-offer .offer-arrow {
  display: block;
  font: inherit;
  line-height: 1;
}
/* Same two blue hues as the navigation cloud; same ink as its hovered labels. */
.offer-dialog .offer-contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, #d6edff 0%, #b6d9ff 100%);
  border-color: #b6d9ff;
  color: #71a5e5;
  box-shadow: none;
  transition: translate 0.3s ease;
}
.offer-dialog .offer-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  transition: box-shadow 0.3s;
}
.offer-dialog .offer-contact::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: linear-gradient(110deg, transparent 20%, #ffffff26 48%, transparent 78%);
  transform: translateX(-115%);
  transition: transform 0.65s ease;
  pointer-events: none;
}
.offer-dialog .offer-contact:is(:hover, :focus-visible) {
  background: radial-gradient(ellipse at 50% 50%, #d6edff 0%, #b6d9ff 100%);
  color: #71a5e5;
  box-shadow: none;
  translate: 0 -2px;
}
.offer-dialog .offer-contact:is(:hover, :focus-visible)::before {
  box-shadow: inset 0 0 0 1px #ffffff55;
}
.offer-dialog .offer-contact:is(:hover, :focus-visible)::after {
  transform: translateX(115%);
}
.offer-dialog .offer-contact svg {
  color: inherit;
  transition: translate 0.3s;
}
.offer-dialog .offer-contact:is(:hover, :focus-visible) svg {
  translate: 4px 0;
}
.offer-dialog .offer-contact:active {
  translate: 0 0;
}
.offer-dialog .offer-contact:focus-visible {
  outline-color: #b6d9ff;
}
@media (prefers-reduced-motion: reduce) {
  .offer-dialog .offer-contact,
  .offer-dialog .offer-contact::before,
  .offer-dialog .offer-contact::after,
  .offer-dialog .offer-contact svg {
    transition: none !important;
  }
  .offer-dialog .offer-contact::after {
    display: none;
  }
  .offer-dialog .offer-contact:is(:hover, :focus-visible),
  .offer-dialog .offer-contact:is(:hover, :focus-visible) svg {
    translate: none;
  }
}
/* One visible circle. Hover is driven by real pointer movement, never by restored focus. */
.plan .round-offer,
.plan .round-offer:is(:hover, :focus-visible, :active) {
  outline: none !important;
  outline-offset: 0;
  box-shadow: none;
}
.plan:not([data-pointer-over]) .round-offer {
  background: #41617c;
  border-color: #b6d9ff;
  color: #f6f1e8;
  transform: none;
}
/* Match the project CTA ink only while the panel button is illuminated. */
.plan[data-pointer-over] .round-offer {
  background: #b6d9ff;
  border-color: #fff;
  color: #71a5e5;
  box-shadow: 0 0 25px #b6d9ff60;
  transform: translateX(4.2px);
}
.plan .constellation,
.plan .constellation canvas {
  cursor: pointer !important;
}
.offer-dialog .offer-close,
.offer-dialog .offer-close:is(:hover, :focus-visible, :active) {
  background: transparent;
  border-color: #b6d9ff;
  box-shadow: none;
  transform: none;
  outline: none !important;
  outline-offset: 0;
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}
.offer-dialog .offer-close svg,
.offer-dialog .offer-close:is(:hover, :focus-visible) svg {
  color: inherit;
  rotate: 0deg;
  transition: rotate 0.3s;
}
.offer-dialog .offer-close[data-pointer-over] {
  background: radial-gradient(ellipse at 50% 50%, #d6edff 0%, #b6d9ff 100%);
  color: #71a5e5;
  border-color: #fff;
  box-shadow: 0 0 18px #b6d9ff60;
}
.offer-dialog .offer-close[data-pointer-over] svg {
  rotate: 90deg;
}
/* Keyboard focus brightens the existing border, without adding another ring. */
html[data-input='keyboard'] .plan .round-offer:focus-visible,
html[data-input='keyboard'] .offer-dialog .offer-close:focus-visible {
  border-color: #fff;
  box-shadow: 0 0 12px #b6d9ff80;
}
@media (prefers-reduced-motion: reduce) {
  .offer-dialog .offer-close,
  .offer-dialog .offer-close svg {
    transition: none !important;
  }
  .offer-dialog .offer-close[data-pointer-over],
  .plan[data-pointer-over] .round-offer {
    transform: none;
  }
  .offer-dialog .offer-close[data-pointer-over] svg {
    rotate: none;
  }
}
@font-face {
  font-family: GRPrestationsPrice;
  src: url('assets/NimbusRoman-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
.plan .price strong,
.offer-dialog .offer-price strong {
  font-family: GRPrestationsPrice, serif;
  font-weight: 400;
  letter-spacing: normal;
}
.plan[data-tier='premium'] .feature:not(:first-child)::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: var(--separator-height, 42px);
  background: #b6d9ff;
  pointer-events: none;
}
/* Textes ivoire et traits bleus (ancien approved-ivory.css). */
/* Approved white text only: no animation, hover, geometry or lighting overrides. */
.page-title,
.page-title h1,
.page-title p {
  color: #f6f1e8;
}
.plan .headline,
.plan .price,
.plan .description,
.plan .feature,
.plan .plan-name {
  color: #f6f1e8;
}
.offer-dialog .offer-eyebrow,
.offer-dialog h2,
.offer-dialog .offer-price,
.offer-dialog .offer-description,
.offer-dialog .offer-audience,
.offer-dialog h3,
.offer-dialog .offer-feature-label,
.offer-dialog .offer-feature-detail,
.offer-dialog .offer-return {
  color: #f6f1e8;
}
.panel-logo,
.plan[data-tier='essentiel'] .panel-logo,
.offer-dialog .offer-logo img {
  filter: url(#ivory-logo);
}
/* Resting cross only; preserve the existing pointer-driven hover and rotation. */
.offer-dialog .offer-close:not([data-pointer-over]) {
  color: #f6f1e8;
}
.page-title,
.page-title *,
.offer-dialog {
  cursor: default;
}
.offer-dialog a,
.offer-dialog button {
  cursor: pointer;
}
/* Match fixed panel separators and popup checkmarks to the CTA blue. */
.offer-dialog .offer-check {
  color: #b6d9ff;
}
/* Extend the bottom rule to the front-face joins, with a tiny raster-edge allowance. */
.plan .plan-name {
  border-top-color: transparent;
}
.plan .plan-name::before {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: -1px;
  height: 1px;
  background: #b6d9ff;
  pointer-events: none;
}
/* Match each painted panel's right-hand front-face join. */
.plan[data-tier='essentiel'] .plan-name::before {
  right: 0;
}
.plan[data-tier='premium'] .plan-name::before {
  right: 5px;
}
/* Same one-pixel painted rule as the bottom separator; original border retains layout. */
.plan .features {
  border-top-color: transparent;
}
/* The upper rule is drawn 1.5 times thicker to compensate its visually finer rendering after scene scaling. */
.plan .features::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: #b6d9ff;
  pointer-events: none;
  transform-origin: 50% 50%;
  transform: scaleY(1.5);
}
/* Approved vertical separators: heights and optical stroke placement from preview 9883. */
.plan .feature {
  position: relative;
}
.plan[data-tier] .feature:not(:first-child) {
  border-left-color: transparent;
}
.plan .feature:not(:first-child)::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  background: #b6d9ff;
  pointer-events: none;
  transform-origin: left center;
}
.plan[data-tier='essentiel'] .feature:nth-child(2)::before {
  height: 44.942804px;
  transform: translateX(0.644593px) scaleX(1.095807);
}
.plan[data-tier='essentiel'] .feature:nth-child(3)::before {
  height: 46.095957px;
  transform: translateX(-1.152755px) scaleX(0.806929);
}
.plan[data-tier='essentiel'] .feature:nth-child(4)::before {
  height: 47.259406px;
  transform: translateX(0.712749px) scaleX(0.997849);
}
.plan[data-tier='serenite'] .feature:nth-child(2)::before {
  height: 42.016433px;
  transform: translateX(0.802328px) scaleX(0.862503);
}
.plan[data-tier='serenite'] .feature:nth-child(3)::before {
  height: 41.475792px;
  transform: translateX(1.675311px) scaleX(0.781812);
}
.plan[data-tier='serenite'] .feature:nth-child(4)::before {
  height: 40.898703px;
  transform: translateX(1.248909px) scaleX(1.004557);
}
.plan[data-tier='serenite'] .feature:nth-child(5)::before {
  height: 40.424882px;
  transform: translateX(0px) scaleX(1.379285);
}
.plan[data-tier='premium'] .feature:nth-child(2)::before {
  height: 47.269702px;
  transform: translateX(0.719288px) scaleX(2.301722);
}
.plan[data-tier='premium'] .feature:nth-child(3)::before {
  height: 46.116549px;
  transform: translateX(0.684618px) scaleX(0.958465);
}

/* Traits plats (ancien approved-separators.css). */
/* Traits uniformes validés le 14 octobre 2026 (aperçu 9420, épaisseur 1,25 px).
   Les traits natifs restent dans le DOM pour la géométrie, les contrôles et les fenêtres ;
   seul leur dessin est masqué pendant que le calque plat est actif (panneaux au repos). */
html[data-separators='flat']:not(:has(dialog[open])) .plan .feature:not(:first-child)::before,
html[data-separators='flat']:not(:has(dialog[open])) .plan .features::before,
html[data-separators='flat']:not(:has(dialog[open])) .plan .plan-name::before {
  visibility: hidden;
}
#grlab-flat-separators {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  display: none;
}
html[data-separators='flat']:not(:has(dialog[open])) #grlab-flat-separators {
  display: block;
}