/* Photographies interactives dans les en-têtes des dossiers du cabinet. */
.td .td-hero.cab-hero {
  display: grid;
  grid-template-columns: minmax(0,1.14fr) minmax(0,1fr);
  align-items: start;
  column-gap: clamp(1.3rem,3vw,3rem);
}
.td .cab-hero > :not(.cab-intro):not(.cab-scene) { grid-column: 1 / -1; }
.td .cab-hero .td-lede, .td .cab-hero h1 { max-width: none; }
.td .cab-hero .cab-scene {
  min-width: 0;
  align-self: start;
  margin: clamp(.5rem,3vw,2.5rem) 0 0;
  text-align: start;
}
.td .cab-scene.cab-scene-corps { width: min(100%, 43rem); margin: 1.6rem auto; color: inherit; text-align: start; }
.cab-photo { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 1rem; background: #203038; }
.cab-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 85% at var(--sujet-x,50%) var(--sujet-y,50%),transparent 18%,rgb(12 25 28 / 25%) 85%);
  opacity: 0;
  transition: opacity .55s ease;
}
.cab-photo.cab-photo-lue::after { opacity: 1; }
.cab-photo .cab-image, .cab-photo .cab-detail-image {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}
.cab-photo .cab-lumiere, .cab-photo .cab-detail, .cab-photo .cab-marque {
  position: absolute;
  pointer-events: none;
}
.cab-photo .cab-lumiere {
  inset: 0;
  background: radial-gradient(ellipse 22% 24% at var(--x, 78%) var(--y, 30%), rgba(255,221,156,.49), transparent 98%);
  mix-blend-mode: soft-light;
  transform-origin: var(--x,78%) var(--y,30%);
  animation: cab-soleil 3.9s ease-in-out -1.1s infinite alternate;
}
.cab-photo .cab-detail {
  inset: 0;
  mask-image: radial-gradient(ellipse var(--w,16%) var(--h,14%) at var(--x,78%) var(--y,23%), #000 42%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse var(--w,16%) var(--h,14%) at var(--x,78%) var(--y,23%), #000 42%, transparent 90%);
}
.cab-photo .cab-detail-image {
  transform-origin: var(--x,78%) var(--y,23%);
  animation: cab-detail-vivant 3.2s ease-in-out -.9s infinite alternate;
}
.cab-photo .cab-marque {
  left: var(--x);
  top: var(--y);
  width: var(--largeur,5%);
  aspect-ratio: 231 / 195;
  transform: translate(-50%,-50%) var(--plan, rotate(var(--angle,0deg)) scaleY(var(--aplati,.8)));
  background: var(--encre,linear-gradient(155deg,#d9c397,#ad9065));
  opacity: var(--opacite,.65);
  mix-blend-mode: var(--fusion,screen);
  mask: url("/outils/logo-mark.png") center/contain no-repeat;
  -webkit-mask: url("/outils/logo-mark.png") center/contain no-repeat;
}
.cab-photo .cab-objet {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: var(--w,18%);
  height: var(--h,20%);
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  margin: 0;
  transform: translate(-50%,-50%);
  border: 0;
  border-radius: 35%;
  appearance: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.cab-photo .cab-objet::before {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse,#ffe7b955 8%,#ffe5bb38 46%,transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .22s;
}
.cab-photo .cab-objet[aria-pressed="true"]::before { opacity: .55; }
.cab-photo .cab-objet:focus-visible::before, .cab-photo .cab-objet.cab-survole::before { opacity: 1; }
@media (hover:hover) {
  .cab-photo .cab-objet:hover::before { opacity: 1; }
  .cab-choix button:hover { text-decoration: underline; text-underline-offset: .22em; }
}
.cab-photo .cab-son {
  position: absolute;
  z-index: 2;
  right: .25rem;
  bottom: .25rem;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: white;
  cursor: pointer;
}
.cab-son::before { content: ""; position: absolute; inset: 6px; background: rgb(15 29 39 / 82%); border-radius: 50%; }
.cab-son svg { position: relative; }
.cab-son[aria-pressed="true"] .cab-muet, .cab-son[aria-pressed="false"] .cab-ondes { display: none; }
.cab-photo button:focus-visible { outline: 3px solid white; outline-offset: -3px; box-shadow: inset 0 0 0 5px #183f59; }
.td .cab-scene figcaption { margin: 0; color: inherit; font: inherit; text-align: start; }
.cab-choix { display: flex; align-items: stretch; border-bottom: 1px solid var(--td-line,#a99b86); }
.cab-choix button {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: .55rem .3rem .45rem;
  background: none;
  color: inherit;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font: inherit;
  font-size: clamp(.8rem,1.1vw,.96rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.cab-choix button[aria-pressed="true"] { border-bottom-color: currentColor; text-shadow: .25px 0 currentColor; }
.cab-choix button:focus-visible, .cab-legendes a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.cab-legendes { display: grid; padding-top: .65rem; }
.cab-legendes [data-legende] { grid-area: 1 / 1; align-self: start; visibility: hidden; }
.td .cab-legendes p { margin: 0 0 .35rem; color: inherit; font-size: clamp(.92rem,1.15vw,1rem); line-height: 1.45; }
.td .cab-legendes a { font-size: .875rem; line-height: 1.4; text-decoration: underline; text-underline-offset: .15em; }
.cab-scene[data-etape="0"] [data-legende="0"], .cab-scene[data-etape="1"] [data-legende="1"], .cab-scene[data-etape="2"] [data-legende="2"] { visibility: visible; }
@keyframes cab-soleil { from { opacity: .25; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
@keyframes cab-detail-vivant { from { transform: rotate(-.4deg) translate(-.65%,0); } to { transform: rotate(1deg) translate(.65%,.16%); } }
@media (max-width: 760px) {
  .td .td-hero.cab-hero { grid-template-columns: minmax(0,1fr); }
  .cab-hero .cab-intro { display: contents; }
  .cab-hero .cab-intro > * { order: 2; }
  .cab-hero .cab-intro > .td-eyebrow, .cab-hero .cab-intro > h1 { order: 0; justify-self: start; }
  .td .cab-hero .cab-scene { order: 1; width: min(100%,34rem); margin: .55rem auto 1.1rem; }
  .td .cab-hero > :not(.cab-intro):not(.cab-scene) { order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .cab-scene *, .cab-scene *::before { animation: none !important; transition: none !important; }
}
html[data-lect-anim="reduites"] .cab-scene *, html[data-lect-anim="reduites"] .cab-scene *::before { animation: none !important; transition: none !important; }