/* Scène PC de la page À propos : une seule feuille (audit n° 2, lot 7, phase 2). Elle reprend, dans le même ordre, les
   quatre feuilles qui s'empilaient (scene.css, interactions.css, approved-9796.css, approved-9799.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 salles et couleurs que la scène n'a jamais (jade, céladon, olivine, portiques, hélice, écrin, facettes,
   nettoyage du sol). La copie d'origine reste dans reference/about-petrole-approved/src/styles.css. */
/* Salle pétrole, fondateurs, œuvres et fenêtres de parcours (ancienne scene.css, copie de la référence validée) */
/* DM : fichier du pied de page partagé, déjà chargé par la page (même fichier que l'ancienne copie fonts/study-dm.woff,
   audit n° 2, lot 7, phase 2). */
@font-face {
  font-family: DM;
  src: url('../../../grlab-abonnements-wordpress/public/footer/assets/dm.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: Roman;
  src: url('./fonts/study-roman.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: Roman;
  src: url('./fonts/nimbus-roman-italic.woff') format('woff');
  font-style: italic;
  font-display: swap;
}
:root {
  font-family: DM, Arial, sans-serif;
  color: #302b26;
  background: #eee8dd;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
h1,
h2,
p {
  margin: 0;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}
button,
a,
canvas {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible,
canvas:focus-visible,
.copy-section:focus-visible {
  outline: 2px solid var(--left, #9c704c);
  outline-offset: 5px;
}
button,
a {
  touch-action: manipulation;
}
.room {
  position: relative;
  width: 1672px;
  height: 941px;
  overflow: hidden;
  --left: #8d513d;
  --right: #677772;
  --ink: #302b26;
  --paper: #f1e8d9;
  --metal: #a88a55;
}
.room-backdrop {
  position: absolute;
  inset: 0;
  width: 1672px;
  height: 941px;
  pointer-events: none;
}
.museum-header {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 20px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}
.museum-logo {
  width: 112px;
  line-height: 0;
  perspective: 700px;
}
.museum-logo img {
  width: 112px;
  height: auto;
  filter: brightness(0);
  display: block;
}
.museum-logo.moving img {
  animation: logo-turn 1.8s ease both;
}
.museum-header nav {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 95px;
}
.museum-header nav a {
  position: relative;
  text-decoration: none;
  font-size: 15px;
  padding: 12px 19px;
  border: 1px solid transparent;
  transition:
    color 0.3s,
    background 0.3s,
    border-color 0.3s,
    transform 0.5s;
}
.museum-header nav a:after {
  content: '';
  position: absolute;
  left: 19px;
  right: 19px;
  bottom: 4px;
  height: 1px;
  background: var(--metal);
  transform: scaleX(0);
  transform-origin: var(--pointer-x, 50%) center;
  transition: transform 0.45s;
}
.museum-header nav a:hover:after,
.museum-header nav a[aria-current]:after {
  transform: scaleX(1);
}
.museum-header nav a:hover {
  background: #fff9ed75;
  transform: translateY(-2px);
}
.project-link {
  display: flex;
  align-items: center;
  gap: 28px;
  border: 1px solid #5c4b34;
  background: #4a3c2e;
  color: #fff7e9;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 28px;
  font-size: 13px;
  text-decoration: none;
  transition:
    background 0.3s,
    box-shadow 0.4s;
}
.project-link > span:last-child {
  font-size: 19px;
  transition: transform 0.45s;
}
.project-link:hover {
  background: #71523c;
  box-shadow: 0 5px 18px #6a49212b;
}
.project-link:hover > span:last-child {
  transform: translate(4px, -4px);
}
.central-title {
  position: absolute;
  top: 136px;
  left: 493px;
  width: 686px;
  text-align: center;
  z-index: 2;
}
.page-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: #766957;
}
.central-title h1 {
  font:
    normal 57px/1.04 Roman,
    Georgia,
    serif;
  letter-spacing: -1.3px;
}
.central-title em {
  font-weight: 400;
  color: var(--left);
}
.founder {
  position: absolute;
  top: 302px;
  width: 340px;
  height: 310px;
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 3;
  --px: 0;
  --py: 0;
  padding: 12px 0 0;
  color: var(--ink);
}
.founder-rubens {
  left: 133px;
  --person: var(--left);
}
.founder-gregoire {
  right: 133px;
  --person: var(--right);
}
.portrait {
  position: relative;
  display: block;
  width: 92px;
  height: 140px;
  margin-bottom: 20px;
  perspective: 800px;
  transition:
    transform 0.8s cubic-bezier(0.2, 0.75, 0.2, 1),
    filter 0.8s;
  filter: drop-shadow(3px 4px 2px #67563b20);
}
.portrait-native {
  display: block;
  width: 188px;
  height: 286px;
  transform: scale(0.489);
  transform-origin: top left;
  background: var(--person);
  mask-image: url('/assets/silhouette-mask-0.png');
  mask-size: 1672px 941px;
  mask-position: -55px -328px;
  mask-repeat: no-repeat;
  opacity: 0.88;
}
.portrait-gregoire .portrait-native {
  mask-image: url('/assets/silhouette-mask-1.png');
  mask-position: -1436px -328px;
}
.founder:hover .portrait,
.founder:focus-visible .portrait {
  transform: translate(calc(var(--px) * 5px), -7px) rotateY(calc(var(--px) * 9deg)) rotateX(calc(var(--py) * -5deg));
  filter: drop-shadow(8px 10px 3px #67563b30);
}
.founder-kicker {
  font-size: 10px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--person, var(--left));
}
.founder-name {
  font:
    normal 32px/1.22 Roman,
    Georgia,
    serif;
  margin-top: 7px;
  white-space: nowrap;
}
.founder-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-width: 145px;
  margin-top: 18px;
  padding: 9px 0;
  border-bottom: 1px solid #8b745568;
  font-size: 12px;
  transition:
    border-color 0.5s,
    gap 0.5s;
}
.founder-action .arrow {
  font-size: 17px;
  transition: transform 0.5s;
}
.founder:hover .founder-action {
  gap: 50px;
  border-color: var(--person);
}
.founder:hover .arrow {
  transform: translate(3px, -3px);
}
.main-art {
  position: absolute;
  left: 488px;
  top: 314px;
  width: 696px;
  height: 352px;
  z-index: 2;
}
.artwork {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  outline-offset: -5px !important;
}
.shared-copy {
  position: absolute;
  left: 485px;
  top: 712px;
  width: 702px;
  text-align: center;
  z-index: 2;
}
.shared-copy > p {
  font-size: 17px;
  line-height: 1.7;
}
.disciplines {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 10px;
  margin-top: 22px;
  letter-spacing: 0.025em;
}
.disciplines span + span {
  border-left: 1px solid #8d7d6555;
  padding-left: 18px;
}
.art-instruction {
  position: absolute;
  bottom: 31px;
  width: 100%;
  text-align: center;
  font-size: 10px;
  color: #756a5d;
  letter-spacing: 0.04em;
}
/* Each closed room has its own material, supports and graphic proportions. */
.prisme {
  --left: #32556d;
  --right: #a38142;
  --paper: #edf0e9;
  --metal: #8e9b92;
}
.prisme .central-title {
  top: 195px;
}
.prisme .central-title h1 {
  font-size: 54px;
}
.prisme .main-art {
  top: 355px;
  height: 315px;
}
.prisme .founder {
  top: 315px;
  width: 320px;
}
.prisme .founder-rubens {
  left: 70px;
}
.prisme .founder-gregoire {
  right: 70px;
}
.prisme .founder-action {
  padding: 12px 18px;
  border: 1px solid #a8b4b18a;
  background: #f5f6ef80;
  backdrop-filter: blur(5px);
  min-width: 170px;
}
.prisme .museum-header nav {
  gap: 1px;
  background: #fffcf34a;
  border: 1px solid #aca59044;
}
.prisme .museum-header nav a:hover {
  background: #e7eeedc9;
}
.prisme .project-link {
  border-radius: 3px;
  background: #3e565c;
  border-color: #637979;
}
.prisme .project-link:hover {
  background: #576b6e;
}
.accord {
  --left: #9f793b;
  --right: #415367;
  --paper: #efe4cf;
  --metal: #a68b56;
}
.accord .central-title {
  top: 186px;
}
.accord .central-title h1 {
  font-size: 52px;
}
.accord .main-art {
  left: 459px;
  top: 355px;
  width: 754px;
  height: 308px;
}
.accord .founder-action {
  border-color: #cdb27d;
  min-width: 165px;
}
.accord .shared-copy {
  top: 735px;
}
.accord .museum-header nav a {
  border-color: #a28a5a55;
  border-radius: 2px;
  padding-inline: 16px;
}
.accord .museum-header nav a:hover {
  border-color: #a28a5a;
  background: #f5e8ce9c;
}
.accord .project-link {
  background: #493323;
  border-radius: 2px;
  border-color: #aa8b4e;
}
.accord .project-link:hover {
  background: #6b4c2e;
}
.sillage {
  --left: #a64c32;
  --right: #2d505b;
  --paper: #ede6d9;
  --metal: #8f7652;
}
.sillage .main-art {
  top: 348px;
  height: 302px;
}
.sillage .founder {
  top: 302px;
}
.sillage .founder-rubens {
  left: 90px;
}
.sillage .founder-gregoire {
  right: 90px;
}
.sillage .founder-action {
  border: 1px solid #94725377;
  padding: 11px 18px;
  min-width: 170px;
  clip-path: polygon(0 0, 92% 0, 100% 24%, 100% 100%, 8% 100%, 0 76%);
}
.sillage .project-link {
  border-radius: 0;
  clip-path: polygon(0 0, 94% 0, 100% 28%, 100% 100%, 6% 100%, 0 72%);
  background: #294752;
}
.sillage .project-link:hover {
  background: #486773;
}
.sillage .museum-header nav a {
  border-bottom: 1px solid #9b775857;
}
.sillage .museum-header nav a[aria-current] {
  color: #99472f;
}
.resonance {
  --left: #854143;
  --right: #757367;
  --paper: #f0e8dc;
  --metal: #a48c61;
}
.resonance .central-title h1 {
  font-size: 54px;
}
.resonance .main-art {
  top: 316px;
  left: 465px;
  width: 742px;
  height: 350px;
}
.resonance .founder {
  width: 340px;
}
.resonance .founder-rubens {
  left: 72px;
}
.resonance .founder-gregoire {
  right: 72px;
}
.resonance .portrait {
  height: 118px;
  width: 78px;
  margin-bottom: 13px;
}
.resonance .portrait-native {
  transform: scale(0.415);
}
.resonance .founder-name {
  font-size: 30px;
}
.resonance .founder-action {
  border: 1px solid #9c866477;
  border-radius: 40px;
  padding: 10px 20px;
  min-width: 170px;
  margin-top: 16px;
}
.resonance .museum-header nav {
  gap: 3px;
}
.resonance .museum-header nav a {
  border-radius: 40px;
}
.resonance .museum-header nav a[aria-current] {
  background: #fff5e79a;
  border-color: #b49a7766;
}
.resonance .project-link {
  background: #743f40;
  border-color: #743f40;
}
.resonance .project-link:hover {
  background: #8b5451;
}
/* Biography windows preserve source copy and keep the kinetic work interactive. */
#parcours-dialog {
  --left: #8d513d;
  --right: #677772;
  --paper: #f1e8d9;
  border: 1px solid #b6a07b;
  padding: 0;
  width: 1170px;
  height: 730px;
  max-width: none;
  max-height: none;
  margin: auto;
  background: var(--paper);
  color: #322b24;
  box-shadow: 0 25px 130px #231b1560;
  overflow: hidden;
}
#parcours-dialog[open] {
  display: grid;
  grid-template-columns: 43% 57%;
  animation: modal-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
#parcours-dialog::backdrop {
  background: #211a1385;
  backdrop-filter: blur(10px);
  animation: fade 0.5s both;
}
.dialog-identity {
  position: relative;
  padding: 38px;
  background: #e4d8c1 url('/assets/confluence-v2.png') center/auto 100%;
  overflow: hidden;
}
.dialog-identity:before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f4e8dba6;
}
.dialog-identity > * {
  position: relative;
  z-index: 1;
}
.dialog-logo {
  width: 96px;
  height: auto;
  filter: brightness(0);
  margin-bottom: 72px;
}
.dialog-identity h2 {
  font: normal 48px/1.05 Roman;
  margin-top: 18px;
  max-width: 350px;
}
.dialog-role {
  font-size: 14px;
  margin-top: 25px;
}
.dialog-identity .artwork {
  position: absolute;
  left: 3%;
  width: 94%;
  height: 41%;
  bottom: 5%;
}
.dialog-copy {
  position: relative;
  padding: 57px 52px 30px;
  overflow: auto;
  scrollbar-width: thin;
}
.dialog-eyebrow {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.21em;
  color: var(--left);
  margin-bottom: 12px;
}
.dialog-copy > h2 {
  font: normal 30px/1.25 DM;
  margin-bottom: 25px;
}
.close {
  position: absolute;
  right: 21px;
  top: 18px;
  width: 44px;
  height: 44px;
  border: 1px solid #8e775673;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition:
    background 0.3s,
    transform 0.45s;
}
.close svg {
  height: 20px;
  width: 20px;
}
.close:hover {
  background: #baa58335;
  transform: rotate(90deg);
}
.copy-section {
  display: block;
  position: relative;
  border-top: 1px solid #b9a78a78;
  padding: 21px 0;
  transition:
    padding 0.45s,
    background 0.45s;
}
.copy-section:before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--left);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s;
}
.copy-section:hover,
.copy-section:focus-visible {
  padding-left: 12px;
  padding-right: 5px;
  background: #ffffff24;
}
.copy-section:hover:before,
.copy-section:focus-visible:before {
  transform: scaleX(1);
}
.copy-heading {
  display: flex;
  align-items: center;
  gap: 17px;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--left);
}
.copy-number {
  font: italic 22px Roman;
  transition: transform 0.5s;
}
.copy-section:hover .copy-number {
  transform: translateY(-3px);
}
.copy-paragraph {
  display: block;
  font-size: 15px;
  line-height: 1.8;
  margin-top: 12px;
}
.return {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
  min-width: 135px;
  font-size: 13px;
  padding: 12px 0;
  margin-top: 4px;
  border-bottom: 1px solid var(--left);
  transition: gap 0.4s;
}
.return:hover {
  gap: 65px;
}
.bio .copy-section {
  animation: copy-rise 0.7s both;
}
.bio .copy-section:nth-child(2) {
  animation-delay: 0.1s;
}
.bio .copy-section:nth-child(3) {
  animation-delay: 0.2s;
}
body:has(dialog[open]) {
  overflow: hidden;
}
#parcours-dialog.prisme {
  --left: #32556d;
  --right: #a38142;
  --paper: #edf0e9;
  border-color: #91a29f;
}
#parcours-dialog.prisme[open] {
  animation: glass-open 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.prisme .dialog-identity {
  background-image: url('/assets/prisme-v2.png');
}
.prisme .dialog-identity:before {
  background: #e5eeebad;
}
.prisme .copy-section {
  border-color: #99adaa77;
}
.prisme .bio .copy-section {
  animation-name: copy-slide;
}
#parcours-dialog.accord {
  --left: #b99d5d;
  --right: #a2b0bd;
  --paper: #342b23;
  color: #f1e8d8;
  border-color: #ad925b;
}
#parcours-dialog.accord[open] {
  animation: hinge-open 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.accord .dialog-identity {
  background-image: url('/assets/accord-v2.png');
  color: #30291f;
}
.accord .dialog-identity:before {
  background: #edddbddb;
}
.accord .dialog-identity .founder-kicker {
  color: #765b2e;
}
.accord .copy-section {
  border-color: #95845c66;
}
.accord .copy-section:hover {
  background: #aa905d10;
}
.accord .close {
  border-color: #b99d5d88;
}
.accord .bio .copy-section {
  animation-name: fade;
}
#parcours-dialog.sillage {
  --left: #a64c32;
  --right: #2d505b;
  --paper: #eee8dc;
  border-left: 5px solid #a64c32;
}
#parcours-dialog.sillage[open] {
  animation: fold-open 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.sillage .dialog-identity {
  background-image: url('/assets/sillage-v2.png');
}
.sillage .dialog-identity:before {
  background: #f0e5d9b5;
}
.sillage .close {
  border-radius: 2px;
}
.sillage .bio .copy-section {
  animation-name: copy-slide;
}
#parcours-dialog.resonance {
  --left: #854143;
  --right: #757367;
  --paper: #f1e9dd;
  border-radius: 28px;
}
#parcours-dialog.resonance[open] {
  animation: arc-open 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.resonance .dialog-identity {
  background-image: url('/assets/resonance-v2.png');
}
.resonance .dialog-identity:before {
  background: #f1e8d8bd;
}
.resonance .return {
  border: 1px solid #a28b6877;
  border-radius: 30px;
  padding: 12px 20px;
  width: 150px;
}
.resonance .bio .copy-section {
  animation-name: copy-rise;
}
#parcours-dialog[data-person='gregoire'] .dialog-copy {
  --left: var(--right);
}
#parcours-dialog.is-closing::backdrop {
  animation: fade 0.42s reverse both;
}
@keyframes logo-turn {
  0%,
  100% {
    transform: none;
  }
  35% {
    transform: translateY(-10px) rotateY(-25deg);
  }
  70% {
    transform: translateY(-6px) rotateY(20deg);
  }
}
@keyframes modal-rise {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes glass-open {
  from {
    opacity: 0;
    clip-path: inset(0 47%);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
  }
}
@keyframes hinge-open {
  from {
    opacity: 0;
    transform: perspective(1500px) rotateX(8deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fold-open {
  from {
    opacity: 0;
    transform: perspective(1500px) rotateY(-8deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes arc-open {
  from {
    opacity: 0;
    clip-path: ellipse(15% 70% at 50% 50%);
  }
  to {
    opacity: 1;
    clip-path: ellipse(100% 100% at 50% 50%);
  }
}
@keyframes copy-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes copy-slide {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes modal-out {
  to {
    opacity: 0;
    transform: translateY(12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Revisions after reviewing the five full-size PC captures. */
.accord .founder {
  top: 270px;
  width: 205px;
  color: #382c21;
}
.accord .founder-rubens {
  left: 60px;
}
.accord .founder-gregoire {
  right: 60px;
}
.accord .portrait {
  margin-bottom: 20px;
}
.accord .founder-name {
  font-size: 28px;
  line-height: 1.05;
  white-space: normal;
}
.accord .founder-kicker,
.accord .founder-gregoire .founder-kicker {
  color: #725b3a;
}
.accord .founder-action {
  color: #fff1d9;
}
.resonance .founder {
  top: 290px;
}
.sillage .central-title {
  top: 190px;
}
.confluence .central-title {
  top: 145px;
  left: 386px;
  width: 900px;
}
.confluence .central-title h1 {
  font-size: 55px;
}
.confluence .central-title h1 br,
.resonance .central-title h1 br {
  display: none;
}
.resonance .central-title {
  top: 113px;
  left: 386px;
  width: 900px;
}
.accord .founder-name {
  max-width: 160px;
  min-height: 60px;
}
.accord .founder-action {
  margin-top: 20px;
}
/* Série 3 — cinq nouvelles architectures. Les styles de la série 2 restent disponibles. */
.series-three {
  --ink: #302f29;
}
.series-three .museum-header {
  top: 10px;
  height: 54px;
}
.series-three .museum-header nav {
  margin-left: 80px;
}
.series-three .museum-header nav a {
  font-size: 14px;
  padding: 10px 18px;
}
.series-three .project-link {
  font-size: 12px;
  min-height: 42px;
}
.series-three .museum-logo,
.series-three .museum-logo img {
  width: 108px;
}
.series-three .founder-name {
  font-size: 30px;
}
.series-three .founder-action {
  min-width: 162px;
}
.series-three .art-instruction {
  bottom: 29px;
}
.series-three .central-title h1 {
  font-size: 48px;
}
.series-three .shared-copy > p {
  font-size: 16px;
}
.series-three .disciplines {
  margin-top: 15px;
}
.series-three .page-eyebrow {
  margin-bottom: 12px;
}
.nef {
  --left: #9c6044;
  --right: #365867;
  --metal: #946b45;
  --paper: #f0e7da;
}
.nef .central-title {
  top: 415px;
  left: 558px;
  width: 556px;
}
.nef .central-title h1 {
  font-size: 43px;
  line-height: 1.06;
}
.nef .founder {
  top: 398px;
  width: 300px;
}
.nef .founder-rubens {
  left: 62px;
}
.nef .founder-gregoire {
  right: 62px;
}
.nef .portrait {
  height: 135px;
  width: 89px;
  margin-bottom: 15px;
}
.nef .portrait-native {
  transform: scale(0.473);
}
.nef .shared-copy {
  top: 780px;
}
.nef .founder-action {
  border: 1px solid #a4825c90;
  padding: 12px 18px;
  border-radius: 1px;
  background: #eee2cf50;
}
.nef .museum-header nav a[aria-current] {
  background: #e5d4ba80;
}
.nef .project-link {
  background: #36515a;
  border-radius: 3px;
  border-color: #36515a;
}
.nef .project-link:hover {
  background: #527079;
}
.agora {
  --left: #996c54;
  --right: #536b5e;
  --metal: #947859;
  --paper: #eee4d4;
}
.agora .central-title {
  top: 288px;
  left: 531px;
  width: 610px;
}
.agora .central-title h1 {
  font-size: 46px;
}
.agora .main-art {
  top: 426px;
  left: 546px;
  width: 580px;
  height: 264px;
}
.agora .founder {
  top: 298px;
  width: 300px;
  height: 276px;
}
.agora .founder-rubens {
  left: 178px;
}
.agora .founder-gregoire {
  right: 178px;
}
.agora .portrait {
  height: 113px;
  width: 75px;
  margin-bottom: 13px;
}
.agora .portrait-native {
  transform: scale(0.399);
}
.agora .founder-name {
  font-size: 28px;
}
.agora .founder-action {
  margin-top: 13px;
  border-bottom: 1px solid var(--person);
}
.agora .shared-copy {
  top: 735px;
}
.agora .museum-header nav a {
  border: 1px solid #97815b55;
  background: #f1e9da52;
}
.agora .museum-header nav a:hover {
  border-color: #97815b;
}
.agora .project-link {
  border-radius: 2px;
  background: #526659;
  border-color: #526659;
}
.agora .project-link:hover {
  background: #6d8274;
}
.velum {
  --left: #917151;
  --right: #607581;
  --metal: #a68b64;
  --paper: #f1eee5;
}
.velum .central-title {
  top: 243px;
  left: 492px;
  width: 688px;
}
.velum .central-title h1 {
  font-size: 55px;
}
.velum .main-art {
  top: 391px;
  left: 494px;
  width: 684px;
  height: 290px;
}
.velum .founder {
  top: 320px;
  width: 270px;
}
.velum .founder-rubens {
  left: 112px;
}
.velum .founder-gregoire {
  right: 112px;
}
.velum .founder-name {
  font-size: 29px;
}
.velum .portrait {
  margin-bottom: 24px;
}
.velum .founder-action {
  background: #eee9df94;
  padding: 12px 18px;
  border: 1px solid #a08c6d77;
  border-radius: 28px;
}
.velum .shared-copy {
  top: 738px;
}
.velum .project-link {
  background: #686a5b;
  border-color: #686a5b;
}
.velum .project-link:hover {
  background: #838374;
}
.velum .museum-header nav a:hover {
  background: #f6f2e9b3;
  border-radius: 24px;
}
.diptyque {
  --left: #95534b;
  --right: #596f86;
  --metal: #9b7e53;
  --paper: #eee5d8;
}
.diptyque .central-title {
  top: 290px;
  left: 568px;
  width: 536px;
}
.diptyque .central-title h1 {
  font-size: 45px;
}
.diptyque .main-art {
  top: 434px;
  left: 578px;
  width: 516px;
  height: 238px;
}
.diptyque .founder {
  top: 328px;
  width: 350px;
  height: 270px;
}
.diptyque .founder-rubens {
  left: 146px;
  transform: skewY(3deg);
}
.diptyque .founder-gregoire {
  right: 146px;
  transform: skewY(-3deg);
}
.diptyque .portrait {
  height: 114px;
  width: 76px;
  margin-bottom: 14px;
}
.diptyque .portrait-native {
  transform: scale(0.404);
}
.diptyque .founder-action {
  margin-top: 14px;
  min-width: 180px;
  border: 1px solid #95775380;
  padding: 12px 20px;
}
.diptyque .shared-copy {
  top: 735px;
}
.diptyque .project-link {
  background: #7d4e45;
  border-color: #7d4e45;
  border-radius: 0;
}
.diptyque .project-link:hover {
  background: #95675d;
}
.diptyque .museum-header nav a {
  border-bottom: 1px solid #a18b6855;
}
.oblique {
  --left: #94704b;
  --right: #496579;
  --metal: #997640;
  --paper: #eae4d8;
}
.oblique .central-title {
  top: 329px;
  left: 586px;
  width: 536px;
  text-align: left;
}
.oblique .central-title h1 {
  font-size: 50px;
}
.oblique .page-eyebrow {
  margin-left: 3px;
}
.oblique .main-art {
  top: 464px;
  left: 527px;
  width: 652px;
  height: 277px;
}
.oblique .founder {
  width: 270px;
  top: 288px;
}
.oblique .founder-rubens {
  left: 182px;
}
.oblique .founder-gregoire {
  right: 136px;
  top: 330px;
}
.oblique .portrait {
  height: 119px;
  width: 79px;
  margin-bottom: 15px;
}
.oblique .portrait-native {
  transform: scale(0.42);
}
.oblique .founder-name {
  font-size: 28px;
}
.oblique .founder-action {
  border: 1px solid #98744b77;
  padding: 11px 20px;
  min-width: 174px;
  transform: skewX(-7deg);
}
.oblique .founder-action > span {
  transform: skewX(7deg);
}
.oblique .shared-copy {
  top: 778px;
  left: 549px;
  width: 652px;
  text-align: left;
}
.oblique .disciplines {
  justify-content: flex-start;
}
.oblique .project-link {
  border-radius: 0;
  background: #405b6a;
  border-color: #405b6a;
}
.oblique .project-link:hover {
  background: #5c7988;
}
.oblique .museum-header nav a[aria-current] {
  border-bottom: 1px solid #856843;
}
#parcours-dialog.nef {
  --left: #9c6044;
  --right: #365867;
  --paper: #f0e7da;
  border-radius: 100px 100px 3px 3px;
}
#parcours-dialog.nef[open] {
  animation: nef-open 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.nef .dialog-identity {
  background-image: url('/assets/nef-v3.png');
}
.nef .dialog-identity:before {
  background: #ecdcc7c2;
}
.nef .dialog-logo {
  margin-top: 20px;
}
.nef .close {
  top: 33px;
  right: 33px;
}
.nef .copy-section:hover {
  background: #ad76520b;
}
#parcours-dialog.agora {
  --left: #996c54;
  --right: #536b5e;
  --paper: #eee4d4;
  border: 1px solid #9b8462;
  box-shadow:
    12px 12px 0 #dacbb2,
    24px 24px 0 #c7b99e,
    0 24px 100px #231b1560;
}
#parcours-dialog.agora[open] {
  animation: agora-open 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.agora .dialog-identity {
  background-image: url('/assets/agora-v3.png');
}
.agora .dialog-identity:before {
  background: #e8ddcabb;
}
.agora .close {
  border-radius: 2px;
}
.agora .return {
  border: 1px solid #a68d65;
  padding: 12px 18px;
  width: 150px;
}
#parcours-dialog.velum {
  --left: #917151;
  --right: #607581;
  --paper: #f2eee6;
  border-radius: 3px;
  border-color: #b2a78e;
}
#parcours-dialog.velum[open] {
  animation: velum-open 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.velum .dialog-identity {
  background-image: url('/assets/velum-v3.png');
}
.velum .dialog-identity:before {
  background: #f4ede3a9;
}
.velum .copy-section {
  transition:
    padding 0.6s,
    background 0.6s;
}
.velum .copy-section:hover {
  background: #d4caba19;
}
.velum .return {
  border-radius: 30px;
  border: 1px solid #a99b7c;
  padding: 12px 18px;
  width: 155px;
}
#parcours-dialog.diptyque {
  --left: #95534b;
  --right: #596f86;
  --paper: #eee5d8;
  border: 2px solid #a68a5c;
}
#parcours-dialog.diptyque[open] {
  animation: diptyque-open 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.diptyque .dialog-identity {
  background-image: url('/assets/diptyque-v3.png');
}
.diptyque .dialog-identity:before {
  background: #e9dacec9;
}
.diptyque .close {
  border-radius: 0;
}
.diptyque .dialog-copy {
  border-left: 1px solid #b7a080;
}
.diptyque .return {
  border: 1px solid #a08467;
  padding: 12px 18px;
  width: 150px;
}
#parcours-dialog.oblique {
  --left: #94704b;
  --right: #496579;
  --paper: #eae4d8;
  border-left: 7px solid #496579;
  border-right: 2px solid #a58c63;
}
#parcours-dialog.oblique[open] {
  animation: oblique-open 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.oblique .dialog-identity {
  background-image: url('/assets/oblique-v3.png');
}
.oblique .dialog-identity:before {
  background: #e7dfced0;
}
.oblique .close {
  border-radius: 0;
  transform: skewX(-7deg);
}
.oblique .close:hover {
  transform: skewX(-7deg) rotate(90deg);
}
.oblique .return {
  border: 1px solid #947b56;
  padding: 12px 18px;
  width: 150px;
}
.oblique .copy-section:hover {
  background: #5d7a8908;
}
@keyframes nef-open {
  from {
    opacity: 0;
    clip-path: inset(25% 7% 0 round 100px 100px 0 0);
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}
@keyframes agora-open {
  from {
    opacity: 0;
    transform: translateY(45px);
    box-shadow:
      0 0 0 #dacbb2,
      0 0 0 #c7b99e;
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes velum-open {
  from {
    opacity: 0;
    clip-path: inset(0 45%);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
  }
}
@keyframes diptyque-open {
  from {
    opacity: 0;
    transform: perspective(1600px) rotateY(13deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes oblique-open {
  from {
    opacity: 0;
    transform: translate(35px, 15px) skewX(-4deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
#parcours-dialog.is-closing[open] {
  animation: modal-out 0.42s ease both;
}
.nef .main-art {
  top: 528px;
  left: 486px;
  width: 700px;
  height: 290px;
}
/* Série 4 — le cristal Iris original, placé au centre de cinq salles vertes. */
.iris-room {
  --left: #315445;
  --right: #63796b;
  --ink: #26372e;
  --metal: #7e8e77;
  --paper: #eeeade;
}
.iris-room .museum-header {
  top: 21px;
  left: 48px;
  right: 48px;
}
.iris-room .museum-logo,
.iris-room .museum-logo img {
  width: 120px;
}
.iris-room .museum-header nav {
  gap: 13px;
  margin-left: 70px;
}
.iris-room .museum-header nav a {
  font-size: 15px;
  padding: 12px 17px;
}
.iris-room .museum-header nav a[aria-current] {
  border-bottom: 1px solid var(--left);
}
.iris-room .project-link {
  background: var(--left);
  border-color: var(--left);
  border-radius: 27px;
}
.iris-room .project-link:hover {
  background: var(--right);
}
.iris-room .central-title {
  top: 250px;
  left: 466px;
  width: 740px;
  color: #f1edda;
}
.iris-room .central-title h1 {
  font-size: 47px;
  line-height: 1.12;
  letter-spacing: -0.8px;
}
.iris-room .central-title h1 br {
  display: none;
}
.iris-room .central-title em {
  color: #f1edda;
}
.iris-room .page-eyebrow {
  color: #d8decd;
  font-size: 10px;
  margin-bottom: 15px;
}
.iris-room .main-art {
  left: 608.5px;
  top: 325px;
  width: 455px;
  height: 415px;
}
.iris-sculpture {
  width: 100%;
  height: 100%;
  position: relative;
}
.iris-sculpture .kinetic-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: crosshair;
  border-radius: 30px;
}
.iris-sculpture canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: hue-rotate(-125deg);
}
.iris-sculpture .kinetic-art:focus-visible {
  outline: 1px dashed #ddebd0;
  outline-offset: 0;
}
.iris-room .founder {
  width: 300px;
  top: 330px;
  height: 300px;
}
.iris-room .founder-rubens {
  left: 96px;
}
.iris-room .founder-gregoire {
  right: 86px;
}
.iris-room .portrait {
  height: 128px;
  width: 84px;
  margin-bottom: 22px;
}
.iris-room .portrait-native {
  transform: scale(0.447);
}
.iris-room .founder-name {
  font-size: 30px;
}
.iris-room .founder-kicker {
  font-size: 10px;
}
.iris-room .founder-action {
  min-width: 176px;
  border: 1px solid #6d7c6688;
  border-radius: 0;
  padding: 12px 19px;
  background: #f2ecd532;
}
.iris-room .founder:hover .founder-action {
  background: #f2ecd584;
  border-color: var(--person);
}
.iris-room .shared-copy {
  top: 760px;
  left: 486px;
  width: 700px;
  color: #28392e;
}
.iris-room .shared-copy > p {
  font-size: 17px;
}
.iris-room .art-instruction {
  bottom: 31px;
  color: #566455;
}
.iris-motion-control {
  position: absolute;
  right: 45px;
  bottom: 20px;
  border: 1px solid #819079;
  border-radius: 25px;
  padding: 11px 17px;
  font-size: 11px;
  color: #344e3f;
  background: #f5f1e1a0;
  transition:
    background 0.3s,
    transform 0.3s;
}
.iris-motion-control:hover {
  background: #fff7e7;
  transform: translateY(-2px);
}
.petrole {
  --left: #2a5653;
  --right: #6a8a81;
  --metal: #769a8a;
}
.petrole .central-title {
  top: 282px;
}
.petrole .main-art {
  top: 362px;
}
.petrole .shared-copy {
  top: 781px;
}
.petrole .museum-logo {
  border-radius: 2px;
}
.petrole .founder {
  top: 350px;
}
.petrole .founder-rubens {
  left: 100px;
}
.petrole .founder-gregoire {
  right: 78px;
}
.petrole .iris-sculpture canvas {
  filter: hue-rotate(-105deg);
}
#parcours-dialog.iris-dialog {
  --left: #315445;
  --right: #63796b;
  --paper: #eeeee2;
  border: 1px solid #7a8a70;
  border-radius: 2px;
  color: #28362e;
}
#parcours-dialog.iris-dialog[open] {
  animation: iris-dialog-open 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
#parcours-dialog.iris-dialog::backdrop {
  background: #12251f91;
}
.iris-dialog .dialog-identity {
  background: none !important;
  background-color: var(--left) !important;
  color: #f1edde;
}
.iris-dialog .dialog-identity:before {
  background: none;
}
.iris-dialog .dialog-logo {
  filter: brightness(0) invert(1);
}
.iris-dialog .dialog-identity .founder-kicker {
  color: #dae3ce;
}
.iris-dialog .dialog-identity .iris-sculpture {
  position: absolute;
}
.iris-dialog .dialog-role {
  color: #d5dfc9;
}
.iris-dialog .dialog-copy {
  background: var(--paper);
}
.iris-dialog .copy-section {
  border-color: #9baa9380;
}
.iris-dialog .copy-section:hover {
  background: #a8b69814;
}
.iris-dialog .return {
  border: 1px solid #85977b;
  padding: 12px 18px;
  width: 156px;
}
.iris-dialog .close {
  border-color: #819578;
}
.iris-dialog .close:hover {
  background: #a0b19530;
}
.iris-dialog .dialog-identity h2 {
  font-size: 46px;
}
.iris-dialog.petrole {
  --left: #2a5653;
  --right: #6a8a81;
  --paper: #e8ede7;
}
.iris-dialog .iris-sculpture canvas {
  filter: hue-rotate(-125deg);
}
.iris-dialog.petrole .iris-sculpture canvas {
  filter: hue-rotate(-105deg);
}
@keyframes iris-dialog-open {
  from {
    opacity: 0;
    transform: perspective(1800px) rotateY(-7deg) translateY(18px);
    clip-path: inset(0 9%);
  }
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
  }
}
#parcours-dialog.iris-dialog.is-closing[open] {
  animation: modal-out 0.42s ease both;
}
.petrole .museum-logo {
  background: none;
  padding: 0;
  box-sizing: border-box;
  transform: translateX(85px);
}
.iris-dialog .dialog-identity .iris-sculpture {
  left: 49px;
  bottom: 32px;
  width: 400px;
  height: 364.835px;
}
#parcours-dialog.iris-dialog.petrole {
  --left: #2a5653;
  --right: #6a8a81;
  --paper: #e8ede7;
}
/* Série 5 — palette pétrole et cristal verrouillés, nouvelles salles et sculptures jumelles. */
.dual-room {
  --left: #2a5653;
  --right: #2a5653;
  --ink: #264b46;
  --metal: #769a8a;
  --center-ink: #f1edda;
}
.dual-room .central-title {
  top: 195px;
  left: 466px;
  width: 740px;
  color: var(--center-ink);
}
.dual-room .central-title h1 {
  font-size: 46px;
  line-height: 1.12;
  color: var(--center-ink);
}
.dual-room .central-title em {
  color: var(--center-ink);
}
.dual-room .main-art {
  left: 608.5px;
  top: 266px;
  width: 455px;
  height: 415px;
}
.dual-room .shared-copy {
  left: 526px;
  top: 666px;
  width: 620px;
  color: var(--center-ink);
}
.dual-room .shared-copy > p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--center-ink);
}
.dual-room .disciplines {
  font-size: 11px;
  letter-spacing: 0.055em;
  color: var(--center-ink);
  gap: 20px;
}
.dual-room .disciplines span + span {
  border-color: #f1edda66;
  padding-left: 20px;
}
.dual-room .founder {
  top: 349px;
  width: 314px;
  height: 365px;
  padding: 0;
  color: #244b46;
}
.dual-room .founder-rubens {
  left: 92px;
}
.dual-room .founder-gregoire {
  right: 92px;
}
.dual-room .founder-name {
  font-size: 31px;
  margin: 0;
  line-height: 1.2;
}
.dual-room .founder-kicker {
  font-size: 10px;
  letter-spacing: 0.18em;
  margin-top: 10px;
  color: #45655b;
}
.founder-object {
  position: relative;
  display: block;
  width: 300px;
  height: 262.5px;
  margin-top: 17px;
  cursor: pointer;
}
.founder-3d {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.dual-room .founder:focus-visible {
  outline: 1px solid #4a7065;
  outline-offset: 8px;
}
.dual-room .founder:hover .founder-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 9px;
  text-decoration-color: #769a8a80;
}
.dual-room .iris-sculpture canvas {
  filter: hue-rotate(-105deg);
}
.dual-room .museum-logo {
  transform: translateX(55px);
}
.dual-room .shared-copy p {
  font-size: 17px;
  line-height: 1.5;
}
.dual-room .disciplines {
  margin-top: 14px;
}
/* Choix final : décor pétrole original, facettes translucides, retouches localisées. */
.selected-petrole .central-title {
  top: 282px;
}
.selected-petrole .shared-copy {
  top: 347px;
}
.selected-petrole .disciplines {
  margin-top: 0;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 0.035em;
  gap: 24px;
}
.selected-petrole .disciplines span + span {
  padding-left: 24px;
}
.selected-petrole .main-art {
  top: 390px;
}
.selected-petrole .founder-rubens {
  left: 100px;
}
.selected-petrole .founder-gregoire {
  right: 78px;
}
.selected-petrole .museum-logo {
  transform: translateX(85px);
}
/* Retouches validées : sans double trait ; facettes seules en verts translucides. */
.selected-petrole .museum-header nav a[aria-current='page'] {
  border-bottom-color: transparent;
}
.selected-petrole .museum-header nav a[aria-current='page']:after {
  display: none;
}
.selected-petrole .founder-3d {
  filter: hue-rotate(0deg);
}

/* Retouches du 11 octobre 2026 : LED pétrole, biographies au clic, en-tête (ancienne interactions.css) */
/* Approved 11 October 2026: petroleum LEDs, click-only biographies and Prestations header motion. */
.selected-petrole {
  --about-led: #5da599;
  --about-led-rgb: 93, 165, 153;
}
.selected-petrole .about-led-overlay {
  position: absolute;
  inset: 0;
  width: 1672px;
  height: 941px;
  pointer-events: none;
  z-index: 1;
}
.selected-petrole .museum-header nav a {
  isolation: isolate;
  background: transparent;
}
.selected-petrole .museum-header nav a::before {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.selected-petrole .museum-header nav a:is(:hover, :focus-visible) {
  background: transparent;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .selected-petrole .museum-header nav a,
  .selected-petrole .museum-header nav a::before {
    transition: none !important;
  }
}
/* Preserve the existing text, navigation and CTA positions while enlarging only the logo. */
.selected-petrole .museum-header nav {
  position: absolute;
  left: 504px;
  top: 9px;
  margin-left: 0;
}
.selected-petrole .museum-header .museum-logo.gr-home-logo {
  position: absolute;
  display: inline-block;
  width: 145px;
  padding: 0;
  transform: none;
  perspective: 900px;
  line-height: 0;
  overflow: visible;
  vertical-align: middle;
  filter: drop-shadow(0 1px 3px #00000020);
}
.selected-petrole .gr-home-logo__motion {
  display: block;
  transform-style: preserve-3d;
}
.selected-petrole .museum-logo .gr-home-logo__image {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}
.selected-petrole .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);
  }
}
/* Prestations: light sweep, subtle lift, inset highlight and moving arrow. */
.selected-petrole .museum-header .project-link {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  isolation: isolate;
  overflow: hidden;
  background: none;
  box-shadow: none;
  transition: translate 0.3s ease;
}
.selected-petrole .project-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 27px;
  background: #2a5653;
  transition:
    background 0.3s,
    box-shadow 0.3s;
}
.selected-petrole .project-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 27px;
  background: linear-gradient(110deg, transparent 20%, #ffffff26 48%, transparent 78%);
  transform: translateX(-115%);
  transition: transform 0.65s ease;
  pointer-events: none;
}
.selected-petrole .project-label {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  pointer-events: none;
}
.selected-petrole .project-arrow {
  position: absolute;
  right: 22px;
  top: 17.072px;
  width: 16.454px;
  height: 13.856px;
  transition: translate 0.3s;
  pointer-events: none;
}
.selected-petrole .project-link:is(:hover, :focus-visible) {
  background: none;
  box-shadow: none;
  translate: 0 -1.732px;
}
.selected-petrole .project-link:is(:hover, :focus-visible)::after {
  transform: translateX(115%);
}
.selected-petrole .project-link:is(:hover, :focus-visible) .project-arrow {
  translate: 3.464px 0;
}
.selected-petrole .project-link:active {
  translate: 0 0;
}
/* Keep the ordinary arrow over the artwork and all selectable copy. */
.selected-petrole,
.selected-petrole * {
  cursor: default !important;
}
.selected-petrole .founder:focus,
.selected-petrole .founder:focus-visible {
  outline: none;
  box-shadow: none;
}
.selected-petrole .founder:focus-visible .founder-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 9px;
  text-decoration-color: #769a8a80;
}
/* One existing circle; the cross retains its original quarter-turn animation. */
.selected-petrole #parcours-dialog .close:focus,
.selected-petrole #parcours-dialog .close:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.selected-petrole #parcours-dialog .close:focus-visible {
  background: #a0b19530;
}
.selected-petrole #parcours-dialog .iris-sculpture canvas {
  filter: hue-rotate(-105deg);
}
@media (prefers-reduced-motion: reduce) {
  .selected-petrole .gr-home-logo.is-animating .gr-home-logo__motion {
    animation: none;
  }
  .selected-petrole .project-link,
  .selected-petrole .project-link::before,
  .selected-petrole .project-link::after,
  .selected-petrole .project-arrow {
    transition: none !important;
  }
  .selected-petrole .project-link::after {
    display: none;
  }
  .selected-petrole .project-link:is(:hover, :focus-visible),
  .selected-petrole .project-link:is(:hover, :focus-visible) .project-arrow {
    translate: none;
  }
}

/* Finitions ivoire et néons (ancienne approved-9796.css) */
/* Local preview: only the three requested About adjustments. */
.selected-petrole .iris-motion-control {
  display: none !important;
}
.selected-petrole .founder:hover .founder-name {
  text-decoration: none;
}
/* White resting labels; keep the petroleum hover, fonts and light-cloud motion.
   Label centres match the approved Abonnements header at native 1672px. */
.selected-petrole .museum-header nav a {
  position: absolute;
  white-space: nowrap;
  cursor: pointer !important;
}
.selected-petrole .museum-header nav a * {
  cursor: pointer !important;
}
.selected-petrole .museum-header nav a:nth-child(1) {
  left: 18.69614px;
  top: -15.46245px;
}
.selected-petrole .museum-header nav a:nth-child(2) {
  left: 137.47736px;
  top: -15.54842px;
}
.selected-petrole .museum-header nav a:nth-child(3) {
  left: 273.31158px;
  top: -15.48298px;
}
.selected-petrole .museum-header nav a:nth-child(4) {
  left: 361.91638px;
  top: -15.51989px;
}
.selected-petrole .museum-header nav a:nth-child(5) {
  left: 463.02423px;
  top: -15.48298px;
}
/* Requested ivory text palette. Decoration, light and animation colours stay intact. */
.selected-petrole .museum-header nav a,
.selected-petrole .project-label,
.selected-petrole .central-title h1,
.selected-petrole .central-title h1 em,
.selected-petrole .disciplines,
.selected-petrole .disciplines span,
.selected-petrole .founder .founder-name,
.selected-petrole .founder .founder-kicker {
  color: #f6f1e8 !important;
}
/* Popup text and logo retain their original scene.css palette. */
/* Match the live Accueil logo: x=37, y=23, width=145 at native 1672px. */
.selected-petrole .museum-header .museum-logo.gr-home-logo {
  left: -11px;
  top: 2px;
}
/* Home halo motion, uniform largest-reference footprint, contrast balanced for the pale ceiling. */
.selected-petrole .museum-header nav a {
  --nav-neon-rgb: 194, 255, 235;
  --home-halo-width: 139.328px;
  transition:
    translate 0.4s,
    color 0.5s,
    text-shadow 0.5s,
    opacity 0.4s;
  text-shadow: none;
  filter: none;
  opacity: 1;
}
.selected-petrole .museum-header nav a::before {
  inset: auto;
  left: calc(50% - var(--home-halo-width) / 2);
  top: calc(50% - 29px);
  width: var(--home-halo-width);
  height: 58px;
  background: radial-gradient(
    ellipse,
    rgba(var(--nav-neon-rgb), 0.68) 0%,
    rgba(var(--nav-neon-rgb), 0.34) 30%,
    rgba(var(--nav-neon-rgb), 0) 70%
  );
  opacity: 0;
  scale: 0.7;
  transition:
    opacity 0.55s,
    scale 0.55s;
}
.selected-petrole .museum-header nav a:is(:hover, :focus-visible) {
  color: #466c67 !important;
  opacity: 1;
  translate: 0 -3px;
  filter: none;
  text-shadow:
    0 0 12px rgba(var(--nav-neon-rgb), 0.8),
    0 0 28px rgba(var(--nav-neon-rgb), 0.5);
}
.selected-petrole .museum-header nav a:is(:hover, :focus-visible)::before {
  opacity: 1;
  scale: 1.15;
}
@media (prefers-reduced-motion: reduce) {
  .selected-petrole .museum-header nav a:is(:hover, :focus-visible) {
    translate: none;
  }
  .selected-petrole .museum-header nav a::before,
  .selected-petrole .museum-header nav a:is(:hover, :focus-visible)::before {
    scale: 1;
    transition: none;
  }
}
/* Retouched base now includes the restrained neon glow. Avoid stacking light layers. */
.selected-petrole .about-led-overlay {
  display: none;
}
/* Four restrained washes, tied to LED endpoints; no sharp beams or mirrored streaks. */
.selected-petrole .gentle-projections {
  position: absolute;
  inset: 0;
  width: 1672px;
  height: 941px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
/* Localized photographic wall lighting; scene content remains above this layer. */
.selected-petrole .natural-wall-light,
.selected-petrole .natural-floor-light {
  position: absolute;
  inset: 0;
  width: 1672px;
  height: 941px;
  pointer-events: none;
  z-index: 1;
}
/* Align with the published Abonnements CTA at native width 1672. */
.selected-petrole .museum-header .project-link {
  left: 1371.942260742px;
  right: auto;
  top: -15.803999901px;
  cursor: pointer !important;
}
.selected-petrole .museum-header .project-link * {
  cursor: pointer !important;
}
.selected-petrole .project-link:is(:hover, :focus-visible)::before {
  box-shadow: none;
}
/* Opaque neon fill; ink sampled from the petroleum rear wall. */
.selected-petrole .museum-header .project-link {
  min-height: 0;
  color: #345654;
}
.selected-petrole .museum-header .project-link::before {
  inset: 2.598px;
  background: #c2ffeb;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
}
.selected-petrole .museum-header .project-label,
.selected-petrole .museum-header .project-arrow {
  color: #345654 !important;
}
.selected-petrole .museum-header .project-link::after {
  inset: 2.598px;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.15) 48%, transparent 78%);
}
.selected-petrole .museum-header .project-link:is(:hover, :focus-visible)::before {
  box-shadow: none;
}
/* Same white sweep strength/timing as Abonnements, clipped to the painted capsule. */
.selected-petrole .museum-header .project-link {
  border-radius: 25.98px;
  clip-path: inset(2.598px round 22.516px);
}
.selected-petrole .museum-header .project-link::before,
.selected-petrole .museum-header .project-link::after {
  border-radius: 22.516px;
}
/* Requested popup-only identity palette and neon reading panel. */
.selected-petrole #parcours-dialog .dialog-identity,
.selected-petrole #parcours-dialog .dialog-identity h2,
.selected-petrole #parcours-dialog .dialog-identity .founder-kicker,
.selected-petrole #parcours-dialog .dialog-role {
  color: #f6f1e8;
}
.selected-petrole #parcours-dialog .dialog-logo {
  filter: url(#grlab-logo-ivory);
}
.selected-petrole #parcours-dialog .dialog-eyebrow {
  display: none;
}
.selected-petrole #parcours-dialog :is(.return, .close),
.selected-petrole #parcours-dialog :is(.return, .close) * {
  cursor: pointer !important;
}
.selected-petrole #parcours-dialog .iris-sculpture,
.selected-petrole #parcours-dialog .iris-sculpture * {
  cursor: default !important;
}
/* Same row-hover motion as Abonnements offer details, adapted to petroleum. */
.selected-petrole #parcours-dialog .copy-section {
  padding: 21px 0;
  transition:
    padding-left 0.2s ease,
    background 0.2s ease;
}
.selected-petrole #parcours-dialog .copy-section::before {
  display: none;
}
.selected-petrole #parcours-dialog .copy-section:is(:hover, :focus-visible) {
  padding-left: 5px;
  padding-right: 0;
}
.selected-petrole #parcours-dialog .copy-number,
.selected-petrole #parcours-dialog .copy-section:is(:hover, :focus-visible) .copy-number {
  transform: none;
  transition: none;
}
.selected-petrole #parcours-dialog .copy-section,
.selected-petrole #parcours-dialog .copy-section * {
  cursor: default !important;
}
@media (prefers-reduced-motion: reduce) {
  .selected-petrole #parcours-dialog .copy-section {
    animation: none !important;
    transition: none;
  }
}
/* Right-hand popup copy matches the project CTA ink; headings remain unnumbered. */
.selected-petrole #parcours-dialog .dialog-copy,
.selected-petrole
  #parcours-dialog
  .dialog-copy
  :is(h2, p, .copy-section, .copy-heading, .copy-paragraph, .return, .return span, .close) {
  color: #345654;
}
.selected-petrole #parcours-dialog .copy-number {
  display: none;
}
.selected-petrole #parcours-dialog .copy-heading {
  gap: 0;
  justify-content: flex-start;
}
/* Popup outline uses the room neon colour; retain its existing thickness. */
.selected-petrole #parcours-dialog.iris-dialog.petrole {
  border-color: #c2ffeb;
}
/* Same fine frame and 3px corners as the Abonnements popup offer button. */
.selected-petrole #parcours-dialog .return {
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
}
/* Return buttons share the room project CTA's opaque neon fill and petroleum ink. */
.selected-petrole #parcours-dialog .return {
  background: #c2ffeb;
  border-color: #c2ffeb;
  color: #345654;
}
.selected-petrole #parcours-dialog .return span {
  color: #345654;
}
/* Abonnements popup button motion, retaining About dimensions and colours. */
.selected-petrole #parcours-dialog .return {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 45px;
  transition: translate 0.3s ease;
  box-shadow: none;
}
.selected-petrole #parcours-dialog .return::before,
.selected-petrole #parcours-dialog .return::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
}
.selected-petrole #parcours-dialog .return::before {
  transition: box-shadow 0.3s;
}
.selected-petrole #parcours-dialog .return::after {
  background: linear-gradient(110deg, transparent 20%, #ffffff26 48%, transparent 78%);
  transform: translateX(-115%);
  transition: transform 0.65s ease;
}
.selected-petrole #parcours-dialog .return:is([data-pointer-over], :focus-visible) {
  translate: 0 -2px;
}
.selected-petrole #parcours-dialog .return:is([data-pointer-over], :focus-visible)::before {
  box-shadow: inset 0 0 0 1px #ffffff55;
}
.selected-petrole #parcours-dialog .return:is([data-pointer-over], :focus-visible)::after {
  transform: translateX(115%);
}
.selected-petrole #parcours-dialog .return span[aria-hidden] {
  display: block;
  transition: translate 0.3s;
}
.selected-petrole #parcours-dialog .return:is([data-pointer-over], :focus-visible) span[aria-hidden] {
  translate: 4px 0;
}
.selected-petrole #parcours-dialog .return:active {
  translate: 0 0;
}
.selected-petrole #parcours-dialog .return:focus-visible {
  outline: 2px solid #c2ffeb;
  outline-offset: 3px;
}
/* Larger filled close control, retaining Abonnements pointer-reset and rotation. */
.selected-petrole #parcours-dialog .close,
.selected-petrole #parcours-dialog .close:is(:hover, :focus-visible, :active) {
  width: 56px;
  height: 56px;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid #c2ffeb;
  border-radius: 50%;
  background: #c2ffeb;
  color: #345654;
  box-shadow: none;
  transform: none;
  outline: none;
  outline-offset: 0;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.selected-petrole #parcours-dialog .close svg {
  width: 22px;
  height: 22px;
  color: inherit;
  rotate: 0deg;
  transition: rotate 0.3s;
}
.selected-petrole #parcours-dialog .close[data-pointer-over] {
  background: #d6fff2;
  color: #345654;
  border-color: #fff;
  box-shadow: 0 0 18px #6fe8bc60 !important;
  transform: none;
}
.selected-petrole #parcours-dialog .close[data-pointer-over] svg {
  rotate: 90deg;
}
html[data-popup-input='keyboard'] .selected-petrole #parcours-dialog .close:focus-visible {
  border-color: #fff;
  box-shadow: 0 0 12px #c2ffeb80 !important;
}
@media (prefers-reduced-motion: reduce) {
  .selected-petrole #parcours-dialog .return,
  .selected-petrole #parcours-dialog .return::before,
  .selected-petrole #parcours-dialog .return::after,
  .selected-petrole #parcours-dialog .return span[aria-hidden],
  .selected-petrole #parcours-dialog .close,
  .selected-petrole #parcours-dialog .close svg {
    transition: none !important;
  }
  .selected-petrole #parcours-dialog .return::after {
    display: none;
  }
  .selected-petrole #parcours-dialog .return:is([data-pointer-over], :focus-visible),
  .selected-petrole #parcours-dialog .return:is([data-pointer-over], :focus-visible) span[aria-hidden] {
    translate: none;
  }
  .selected-petrole #parcours-dialog .close[data-pointer-over] {
    transform: none;
  }
  .selected-petrole #parcours-dialog .close[data-pointer-over] svg {
    rotate: none;
  }
}
/* 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. */
.selected-petrole .museum-header nav a::after {
  display: block !important;
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  bottom: auto;
  height: 0;
  background: none;
  transform: none;
  transition: none;
}
.selected-petrole .museum-header nav a:hover::after {
  height: 4px;
}

/* Navigation vers Contact, papier des parcours (ancienne approved-9799.css) */
.selected-petrole #parcours-dialog .copy-section,
.selected-petrole #parcours-dialog .copy-section:is(:hover, :focus-visible) {
  background: transparent;
  border-color: #c2ffeb;
}
.selected-petrole .founder {
  cursor: default !important;
}
.selected-petrole .founder-name {
  cursor: pointer !important;
}
.selected-petrole .founder-object,
.selected-petrole .founder-object * {
  cursor: default !important;
  pointer-events: none;
}
.selected-petrole .founder-object .founder-hit {
  position: absolute;
  left: 54px;
  top: 21.25px;
  width: 192px;
  height: 220px;
  border-radius: 50%;
  clip-path: ellipse(50% 50% at 50% 50%);
  z-index: 2;
  pointer-events: auto;
  cursor: pointer !important;
}
/* Slightly deeper ivory, confined to both profile popups' pale surface. */
.selected-petrole #parcours-dialog.iris-dialog.petrole {
  --paper: #ded6c9;
}
.selected-petrole #parcours-dialog .dialog-copy {
  background-color: #ded6c9;
}
/* CTA size follows Abonnements; local palette and effects are unchanged. */
.selected-petrole .museum-header .project-link {
  width: 217.366088867px;
  height: 47.630001068px;
}
.selected-petrole .museum-header .project-label {
  display: block;
  left: 26.250610352px;
  top: 17.238812447px;
  width: max-content;
  margin: 0;
  padding: 0;
  font:
    400 100px/100px GRLabNavDM,
    sans-serif;
  font-synthesis: none;
  letter-spacing: normal;
  transform-origin: 0 0;
  transform: matrix(0.1467004, 0, 0, 0.150608658, 0, 0);
}
.selected-petrole .museum-header .project-arrow {
  left: 181.859985352px;
  right: auto;
  top: 17.320000648px;
  width: 16.454px;
  height: 13.856px;
}
/* Approved logo hit cursor; artwork and suspension remain unchanged. */
.selected-petrole .museum-header .museum-logo,
.selected-petrole .museum-header .museum-logo * {
  cursor: pointer !important;
}
/* Cristal central : curseur de base ; le défilement vertical au doigt reste possible. */
.selected-petrole .main-art .kinetic-art {
  cursor: default !important;
  touch-action: pan-y;
  user-select: none;
}