.title-line,
.title-line > span {
  display: block;
}

[data-reveal].is-revealing {
  animation: copy-in .52s cubic-bezier(.2, .68, .25, 1) both;
}

.letter-title { perspective: 1000px; }
.motion-word { display: inline-block; white-space: nowrap; }
.motion-letter { display: inline-block; transform-origin: 50% 100%; }

@media (prefers-reduced-motion: no-preference) {
  .letter-title.is-revealing .motion-letter {
    animation: letter-arrive .58s calc(var(--letter-index) * 12ms) cubic-bezier(.22, .7, .23, 1) backwards;
  }

  h3.letter-title.is-revealing .motion-letter {
    animation-duration: .46s;
    animation-delay: calc(var(--letter-index) * 8ms);
  }
}

@keyframes letter-arrive {
  from { opacity: 0; transform: translate3d(0, .42em, 0) rotateX(38deg); }
  to { opacity: 1; transform: none; }
}

.hero h1.hero-signature {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin-block: clamp(.9rem, 2.9vw, 1.55rem) clamp(1.1rem, 2.7vw, 1.65rem);
  padding-bottom: calc(.10em + clamp(.42rem, 1vw, .75rem));
  font-size: clamp(3rem, 12.25vw, 9.3rem);
  letter-spacing: -.023em;
}

.signature-lead {
  display: block;
  margin-bottom: .19em;
  font: 700 clamp(1.15rem, 3.55vw, 2.62rem)/1.12 var(--body);
  letter-spacing: .065em;
}

.signature-emphasis {
  display: block;
  color: var(--gold);
  text-shadow: 0 .035em .21em #090e17b0;
  transform: skewX(-8deg);
  transform-origin: left bottom;
}

.signature-rule {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: clamp(.42rem, 1vw, .75rem);
  overflow: visible;
  fill: none;
  stroke: rgb(var(--gold-rgb) / .66);
  stroke-width: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .is-opening .hero-signature .motion-letter {
    animation: letter-arrive .46s calc(var(--signature-start, .68s) + var(--letter-index) * 25ms) cubic-bezier(.22, .7, .23, 1) backwards;
  }

  .signature-emphasis { --signature-start: .88s; }

  .is-opening .signature-rule path {
    animation: signature-draw .43s 1.07s cubic-bezier(.36, .12, .25, 1) backwards;
  }
}

@keyframes signature-draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}

@keyframes copy-in {
  from { opacity: .2; transform: translateY(.8rem); }
  to { opacity: 1; transform: none; }
}

.hero-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .3rem 1rem;
}

.opening-replay {
  padding: .55rem 0;
  border: 0;
  background: none;
  color: var(--gold);
  font: 800 .72rem/1.4 var(--body);
  cursor: pointer;
}

.opening-replay span { margin-right: .3rem; font-size: 1rem; }
.opening-replay:hover { color: #fff; }
.opening-replay:focus-visible { outline: 2px solid #75b7fb; outline-offset: 4px; }

.opening {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgb(var(--gold-rgb) / .06) calc(25% - 1px) 25%),
    radial-gradient(ellipse at 55% 48%, #26303e, #0c121c 60%, #080d16);
}

.opening::before {
  position: absolute;
  inset: -25% auto -25% -20%;
  width: clamp(3rem, 9vw, 8.25rem);
  content: "";
  background: linear-gradient(90deg, transparent, #9bbff540 40%, var(--gold-light) 49%, #eff6ff 51%, #b9ccf227 58%, transparent);
  transform: skewX(-15deg);
}

.opening-lockup {
  position: relative;
  width: min(82vw, 31rem);
  text-align: center;
}

.opening-lockup p {
  margin-top: clamp(1rem, 3vw, 1.8rem);
  font: 750 .66rem/1.4 var(--body);
  letter-spacing: .31em;
  text-transform: uppercase;
  color: #e5e2db;
}

.opening-lockup p span { color: var(--gold); margin-inline: .35rem; }

.opening-mark {
  display: grid;
  grid-template-columns: minmax(1.8rem, 5vw) minmax(0, 1fr) minmax(1.8rem, 5vw);
  gap: clamp(.8rem, 3vw, 2.5rem);
  align-items: center;
}

.opening-mark img { width: 100%; height: auto; filter: brightness(1.27); }
.opening-mark span {
  height: 1px;
  transform-origin: right;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.opening-mark span:last-child {
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.is-opening .opening {
  visibility: visible;
  animation: booth-open 1.62s cubic-bezier(.42, .04, .23, 1) both;
}

.is-opening .opening::before { animation: booth-beam 1.27s .1s cubic-bezier(.4, .08, .22, 1) both; }
.is-opening .opening-lockup { animation: booth-mark 1.2s cubic-bezier(.22, .72, .22, 1) both; }
.is-opening .opening-mark span { animation: opening-rule .68s .14s cubic-bezier(.22, .72, .22, 1) both; }

@keyframes opening-rule {
  from { transform: scaleX(.06); opacity: .16; }
  to { transform: none; opacity: 1; }
}
.is-opening .hero .hero-photo img { animation: hero-exposure 1.6s cubic-bezier(.2, .7, .25, 1) both; }
.is-opening .hero .hero-copy .kicker { animation: copy-in .5s .7s both; }
.is-opening .hero .hero-intro { animation: copy-in .55s .9s both; }


@keyframes booth-open {
  0%, 32% { opacity: 1; }
  64% { opacity: .24; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes booth-mark {
  0% { opacity: .38; transform: scale(.975); }
  24%, 65% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.025); }
}

@keyframes booth-beam {
  0% { opacity: 0; transform: translateX(0) skewX(-15deg); }
  28%, 58% { opacity: .84; }
  100% { opacity: 0; transform: translateX(145vw) skewX(-15deg); }
}

@keyframes hero-exposure {
  from { transform: scale(1.1); }
  to { transform: scale(calc(1 + var(--reflection) * .045)); }
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem 1rem;
}

.panel-contact {
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  font-size: .77rem;
  font-weight: 750;
  color: #e2e9f2;
  text-decoration: underline;
  text-decoration-color: #ffffff6b;
  text-underline-offset: .24em;
}

.panel-contact:hover { color: #fff; }

.workshop {
  --scene-position: .5;
  --scene-entry: 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid #ffffff26;
  background: #0c121c;
}

.workshop-media,
.workshop-media picture,
.workshop-media img,
.workshop-shade,
.workshop-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.workshop-media { z-index: -1; overflow: hidden; }

.workshop-media img {
  object-fit: cover;
  object-position: 76% 57%;
  transform: translate3d(0, calc((.5 - var(--scene-position)) * 8%), 0)
    scale(calc(1.09 - var(--scene-entry) * .04));
}

.workshop-shade {
  background:
    linear-gradient(0deg, #0a101bf7 0%, #0a101b96 17%, transparent 39%),
    linear-gradient(90deg, #0a101bf2 0%, #0a101bb8 30%, #0a101b28 66%, #0a101b08 90%);
}

.workshop-light {
  background: linear-gradient(108deg, transparent 43%, #a6c9ef16 47%, rgb(var(--gold-rgb) / .49) 50%, #e6f0fc2d 51%, transparent 55%);
  mask-image: radial-gradient(ellipse at 67% 51%, black 3%, transparent 63%);
  opacity: calc(.13 + var(--scene-entry) * .28);
  transform: translateX(calc(-23% + var(--scene-position) * 54%));
}

.workshop-content {
  min-height: clamp(44rem, 96svh, 59rem);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: start;
  gap: 4.5rem;
  padding-block: clamp(5.3rem, 12svh, 8rem) clamp(2.1rem, 5vw, 4rem);
}

.workshop-story {
  width: min(100%, 45rem);
}

.workshop h2 {
  margin: 1.05rem 0 1.28rem;
  font-size: clamp(4.15rem, 8.2vw, 8rem);
  letter-spacing: .001em;
  text-shadow: 0 .08em .35em #030810aa;
}

.workshop-line {
  display: block;
  color: #f5f0e7;
}

.workshop-line + .workshop-line { color: var(--gold); }
.workshop [data-reveal].is-revealing { animation-name: workshop-copy-in; }
.workshop .nameplate[data-reveal].is-revealing { animation: none; }

@keyframes workshop-copy-in {
  from { transform: translateY(.46rem); }
  to { transform: none; }
}

.workshop-summary {
  max-width: 31rem;
  color: #e2e8ef;
  font-size: .97rem;
  text-shadow: 0 1px 8px #050a11;
}

.workshop-floor {
  display: grid;
  grid-template-columns: 1fr minmax(0, 35rem);
  align-items: end;
  gap: 1.25rem;
}

.workshop-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem .75rem;
  color: #dce3ec;
  font-size: .7rem;
}

.workshop-coordinate {
  color: var(--gold);
  font: 750 .68rem/1.4 monospace;
  letter-spacing: .13em;
}

.workshop-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.nameplate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  min-height: 6.25rem;
  display: grid;
  align-items: center;
  padding: .9rem 1rem;
  border: 1px solid #eceaf03b;
  border-top-color: rgb(var(--gold-rgb) / .55);
  background: linear-gradient(124deg, #192435fa, #0c1523ed);
}

.name-copy { position: relative; z-index: 1; }

.nameplate h3 {
  color: #fff;
  font: 800 clamp(1.74rem, 2.9vw, 2.55rem)/1 var(--display);
  letter-spacing: .015em;
  text-transform: uppercase;
}

.nameplate .name-surname { color: var(--gold); }
.nameplate p { color: #e2e8f1; font-size: .75rem; margin-top: .3rem; }

.name-index {
  position: absolute;
  inset: .56rem .72rem auto auto;
  color: var(--gold);
  font: 700 .66rem/1 monospace;
  letter-spacing: .07em;
}

.name-mark {
  position: absolute;
  inset: auto -.35rem -.25rem auto;
  width: 48%;
  height: auto;
  stroke: rgb(var(--gold-rgb) / .55);
  stroke-width: 1;
}

.name-mark path { vector-effect: non-scaling-stroke; }
.name-mark-echo { stroke: #9cc3ed45; }

@media (prefers-reduced-motion: no-preference) {
  .nameplate.is-revealing .name-mark path {
    stroke-dasharray: 1;
    animation: trace-reflection .76s .11s cubic-bezier(.2, .7, .25, 1) both;
  }

  .nameplate.is-revealing .name-mark-echo { animation-delay: .23s; }

  .service-panel.is-selected-entry .panel-copy {
    animation: service-copy-in .34s cubic-bezier(.24, .76, .3, 1) both;
  }

  .service-panel.is-selected-entry figure::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(112deg, transparent 36%, rgb(var(--gold-rgb) / .22) 48%, #d6e6fd20 51%, transparent 63%);
    animation: service-reflection .48s ease-out both;
  }
}

@keyframes trace-reflection { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes service-copy-in { from { transform: translateY(.42rem); } to { transform: none; } }
@keyframes service-reflection {
  from { transform: translateX(-55%); opacity: 0; }
  30% { opacity: 1; }
  to { transform: translateX(55%); opacity: 0; }
}

.detail-hero {
  padding-block: 1.45rem clamp(2.65rem, 6vw, 5rem);
  background: radial-gradient(ellipse at 75% 50%, #232c3a, #101521 74%);
}

.detail-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .24rem .62rem;
  margin-bottom: clamp(1.5rem, 3.3vw, 3rem);
  color: #d4dce8;
  font-size: .77rem;
}

.detail-breadcrumb a { text-decoration: underline; text-underline-offset: .2em; }
.detail-breadcrumb [aria-current] { color: var(--gold); }

.detail-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .97fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 4.7rem);
}

.detail-hero-copy h1 {
  font-size: clamp(3.2rem, 7.25vw, 7rem);
  margin: .8rem 0 1.35rem;
}

.detail-hero-copy h1 .title-line:last-child { color: var(--gold); }
.detail-hero-copy > p:not(.kicker) { max-width: 33rem; margin-bottom: 1.5rem; color: #e1e7f0; }
.detail-image {
  position: relative;
  isolation: isolate;
  min-height: clamp(15rem, 30vw, 28rem);
  overflow: hidden;
  border: 1px solid #e8ebf23b;
  border-top-color: rgb(var(--gold-rgb) / .70);
  background: #182331;
}

.detail-image::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(0deg, #080d17e3, transparent 44%);
}

.detail-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-image figcaption {
  position: absolute;
  z-index: 1;
  inset: auto 1rem .7rem;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  color: #f5f0e8;
  font-size: .68rem;
  font-weight: 750;
}

.detail-steps { background: var(--ivory); color: var(--ink); }
.detail-steps .kicker { color: var(--gold-ink); }
.detail-steps h2 { margin-top: .95rem; font-size: clamp(3.1rem, 6.65vw, 6.4rem); }
.detail-contact { background: #e4ded1; color: var(--ink); border-top: 1px solid #cfc7b7; }
.detail-contact .kicker { color: var(--gold-ink); }
.detail-contact h2, .detail-related h2 { margin: .8rem 0 1rem; }
.detail-contact p:not(.kicker) { color: #454a54; max-width: 36rem; }
.detail-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem 3rem;
}
.detail-contact-actions { display: grid; justify-items: start; gap: .45rem; }
.detail-contact-actions .button { background: #121824; color: #fff; }
.detail-contact-actions .button:hover { background: #344054; }
.detail-contact-actions .text-link:hover { color: var(--gold-ink); }
.detail-related { background: #101622; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1.45rem; }

.related-grid > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-content: start;
  align-items: baseline;
  gap: .26rem .6rem;
  min-height: 6.3rem;
  padding: .85rem 1rem;
  border: 1px solid #e0e4ed33;
  border-top-color: rgb(var(--gold-rgb) / .46);
  background: #182130;
  transition: background .18s;
}

.related-grid > a:hover { background: #253244; }
.related-grid strong { font-size: .9rem; }
.related-grid p { grid-column: 2 / -1; color: #d1d9e4; font-size: .77rem; }
.related-grid .choice-no, .related-grid [aria-hidden] { color: var(--gold); }

.site-head { view-transition-name: gp-header; }

::view-transition-group(root) {
  overflow: hidden;
  background: linear-gradient(110deg, #111723 0%, var(--gold-ink) 29%, var(--gold-light) 54%, var(--gold) 66%, #111723 100%);
  animation-duration: .58s;
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: .58s cubic-bezier(.58, .04, .18, .98) both;
}

::view-transition-old(root) { animation-name: page-leave; }
::view-transition-new(root) { animation-name: page-arrive; }
::view-transition-group(gp-header) { animation-duration: .58s; }
::view-transition-old(gp-header) { animation: none; opacity: 0; }
::view-transition-new(gp-header) { animation: none; opacity: 1; }

@keyframes page-leave {
  from { clip-path: polygon(-8% 0, 128% 0, 128% 100%, -2% 100%); }
  to { clip-path: polygon(111% 0, 128% 0, 128% 100%, 117% 100%); }
}

@keyframes page-arrive {
  from { clip-path: polygon(-25% 0, -11% 0, -5% 100%, -25% 100%); }
  to { clip-path: polygon(-25% 0, 108% 0, 114% 100%, -25% 100%); }
}

@media (max-width: 700px) {
  .hero h1.hero-signature { font-size: clamp(3.4rem, 15.7vw, 5.5rem); }
  html { scroll-padding-top: 6.1rem; }
  .head-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(3.9rem, auto) auto;
    gap: 0 .55rem;
  }
  .brand { justify-self: start; }
  .head-call { grid-area: 1 / 2; }
  .site-head nav {
    grid-area: 2 / 1 / auto / -1;
    justify-content: space-between;
    gap: .55rem;
    border-top: 1px solid var(--line);
    font-size: .76rem;
  }
  .site-head nav a { padding: .46rem 0 .57rem; }
  .hero-tools { gap: .15rem .58rem; }
  .hero-tools .credit { font-size: .62rem; }
  .opening-replay { font-size: .66rem; }
  .workshop-content {
    min-height: 37rem;
    gap: clamp(7rem, 34vw, 12.5rem);
    padding-block: 4rem 2.25rem;
  }
  .workshop h2 { font-size: clamp(2.9rem, 12.1vw, 5.35rem); }
  .workshop-summary { max-width: 31rem; font-size: .88rem; }
  .workshop-media picture {
    inset: 8.5rem 0 auto;
    height: clamp(19rem, 92vw, 26rem);
  }
  .workshop-media img { object-position: 87% 52%; }
  .workshop-shade {
    background: linear-gradient(180deg, #0c121c 15%, #0c121ce0 31%, #0c121c4b 55%, #0c121cbb 76%, #0c121c 96%);
  }
  .workshop-floor { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .nameplate { min-height: 6.1rem; padding: .7rem .6rem; }
  .nameplate h3 { font-size: clamp(1.66rem, 5.3vw, 2.28rem); }
  .nameplate .name-surname { display: block; }
  .nameplate p { font-size: .68rem; }
  .name-mark { width: 58%; opacity: .8; }
  .detail-hero-grid, .detail-contact-grid, .related-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-hero { padding-top: 1rem; }
  .detail-hero-copy h1 { font-size: clamp(2.65rem, 11.2vw, 5.5rem); }
  .detail-image { min-height: clamp(13rem, 56vw, 21rem); }
  .detail-steps h2 { font-size: clamp(2.7rem, 9.6vw, 5.4rem); }
  .related-grid > a { min-height: 0; }
}

@media (max-width: 380px) {
  .site-head nav { gap: .35rem; font-size: .68rem; }
  .site-head nav > a { white-space: nowrap; }
  .workshop-people { gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }

  .opening, .opening-replay { display: none; }
  .is-opening .hero .hero-photo img,
  .is-opening .hero .hero-copy .kicker,
  .is-opening .hero .hero-intro,
  [data-reveal].is-revealing,
  .workshop [data-reveal].is-revealing { animation: none; }
  .workshop-media img, .workshop-light { opacity: 1; transform: none; }
  .workshop-light { display: none; }
}


/* Repères de navigation */
.service-nav {
  position: relative;
}

.service-nav summary {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  list-style: none;
  cursor: pointer;
}

.service-nav summary::-webkit-details-marker { display: none; }
.service-nav summary:focus-visible { outline: 2px solid #8cc8fc; outline-offset: 4px; }
.service-nav[open] summary,
.service-nav summary:hover { color: var(--gold); }

.nav-chevron {
  width: .42rem;
  height: .42rem;
  margin-top: -.21rem;
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  rotate: 45deg;
}

.service-nav[open] .nav-chevron { rotate: 225deg; margin-top: .21rem; }

.service-nav-panel {
  position: absolute;
  inset: calc(100% + .3rem) auto auto -.85rem;
  z-index: 1;
  width: min(19rem, calc(100vw - 2rem));
  overflow: auto;
  max-height: min(20rem, 70svh);
  padding: .3rem .55rem;
  border: 1px solid rgb(var(--gold-rgb) / .32);
  background: #111a28;
  box-shadow: 0 18px 38px #04070d80;
}

.site-head .service-nav-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-height: 2.65rem;
  padding: .55rem .7rem;
  font-size: .86rem;
}

.service-nav-panel a + a { border-top: 1px solid #ffffff15; }
.service-nav-panel a:hover,
.service-nav-panel a:focus-visible,
.service-nav-panel a[aria-current="page"] { background: #223044; color: var(--gold-light); }
.service-nav-panel .service-nav-overview { color: var(--gold); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .75rem;
}

.button-outline {
  border: 1px solid rgb(var(--gold-rgb) / .55);
  color: #f7eddb;
  background: #0c1421a3;
}

.button-outline:hover { color: #fff; background: #1f2d40; border-color: var(--gold); }

.opening-skip {
  position: absolute;
  right: max(1.15rem, env(safe-area-inset-right));
  bottom: max(1.15rem, env(safe-area-inset-bottom));
  min-height: 2.75rem;
  padding: .45rem .85rem;
  border: 1px solid rgb(var(--gold-rgb) / .50);
  background: #131c2a;
  color: #fff3dc;
  font: 700 .8rem/1.35 var(--body);
  cursor: pointer;
  pointer-events: auto;
}

.opening-skip span { margin-left: .35rem; color: var(--gold); }
.opening-skip:hover { background: #243145; }
.opening-skip:focus-visible { outline: 2px solid #8cc8fc; outline-offset: 4px; }

.quick-access {
  padding-block: 1.1rem 1.4rem;
  color: #f8f1e5;
  background: linear-gradient(113deg, #101723, #1a2636);
  border-bottom: 1px solid rgb(var(--gold-rgb) / .26);
}

.quick-access h2 {
  margin-bottom: .65rem;
  color: var(--gold);
  font: 750 .7rem/1.4 var(--body);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .48rem;
}

.shortcut-grid a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .6rem;
  min-height: 4.1rem;
  padding: .72rem .78rem;
  border: 1px solid #dce7ff29;
  background: #111c29;
  line-height: 1.25;
}

.shortcut-grid a:hover,
.shortcut-grid a:focus-visible { border-color: rgb(var(--gold-rgb) / .61); background: #243247; }
.shortcut-grid strong { display: block; font-size: .87rem; }
.shortcut-grid small { display: block; margin-top: .19rem; color: #cbd6e5; font-size: .72rem; }
.shortcut-no { color: var(--gold); font: 700 .65rem/1.7 monospace; }
.shortcut-arrow { color: var(--gold); }

.workshop-contact { margin-top: .9rem; color: var(--gold); }
.workshop-contact:hover { color: #fff; }

.detail-index { background: #172333; color: #f3eee5; }
.detail-index-inner { display: flex; flex-wrap: wrap; gap: 0 1.7rem; }

.detail-index a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.85rem;
  font-size: .81rem;
  font-weight: 750;
}

.detail-index a span { color: var(--gold); }
.detail-index a:hover { color: var(--gold); }

.detail-image img { object-position: var(--detail-image-focus, 50% 50%); }
.detail-page[data-service="sinistres"] { --detail-image-focus: 50% 57%; }
.detail-page[data-service="peinture"] { --detail-image-focus: 53% 47%; }
.detail-page[data-service="pare-brise"] { --detail-image-focus: 52% 53%; }
.detail-page[data-service="preparation-expertise"] { --detail-image-focus: 49% 58%; }

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  gap: 1rem 2rem;
  padding-block: 1.3rem;
}

.footer-inner strong { color: #f8f1e4; font-size: .85rem; }
.footer-inner p { margin-top: .2rem; }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.footer-inner nav a, .footer-end a { display: inline-flex; align-items: center; min-height: 2.25rem; }
.footer-end { display: grid; justify-items: end; }
.footer-inner a:hover { color: #fff; }

@media (max-width: 700px) {
  html { scroll-padding-top: 6.9rem; }

  .site-head nav { position: relative; }
  .site-head nav > a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .service-nav { position: static; }
  .service-nav-panel { inset: 100% 0 auto; width: 100%; max-height: calc(100svh - 7rem); }

  .hero-actions .button { gap: .5rem; min-height: 2.85rem; padding: .55rem .7rem; font-size: .77rem; }
  .shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shortcut-grid a { grid-template-columns: minmax(0, 1fr) auto; gap: .3rem; padding: .6rem .55rem; }
  .shortcut-no { display: none; }
  .shortcut-grid strong { font-size: .82rem; }

  .detail-index-inner { gap: 0 .8rem; }
  .detail-index a { gap: .3rem; font-size: .76rem; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-end { justify-items: start; }
}


@media (prefers-reduced-motion: no-preference) {
  .is-opening .hero .hero-actions { animation: hero-action-in .46s .89s cubic-bezier(.2,.7,.2,1) both; }
  .shortcut-arrow { transition: transform .18s ease-out; }
  .shortcut-grid a:hover .shortcut-arrow { transform: translate(2px,-2px); }
}
@keyframes hero-action-in { from { transform: translateY(.36rem); } to { transform: none; } }

@media (min-width: 701px) and (max-width: 840px) {
  .head-inner { gap: .85rem; }
  .site-head nav { gap: .8rem; }
  .brand img { width: 7.8rem; }
  .head-call { padding-inline: .65rem; }
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.button-outline-ink {
  border: 1px solid #29251f80;
  color: #131823;
}
.button-outline-ink:hover { background: var(--gold-light); border-color: #131823; }