:root {
  --noir: #0a0a0a;
  --noir-2: #121212;
  --blanc: #fafaf8;
  --creme: #f1efeb;
  --rouge: #d30100;
  --rouge-fonce: #a80100;
  --gris: #5f5f5f;
  --ligne: rgba(10, 10, 10, .14);
  --ligne-sombre: rgba(255, 255, 255, .16);
  --erreur: #ff7466;
  --hdr: 64px;
  --gout: clamp(16px, 5vw, 40px);
  --max: 1240px;
  --bande: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --trace: cubic-bezier(.65, 0, .35, 1);
  --sans: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
}
@media (min-width: 900px) { :root { --hdr: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 8px); }
html.menu-ouvert { overflow: hidden; }
body {
  margin: 0; background: var(--blanc); color: var(--noir);
  font: 400 17px/1.6 var(--sans); overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 300; }
p { margin: 0; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }
h1 em, h2 em { font-size: 1.06em; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr:focus { z-index: 60; top: 8px; left: 8px; width: auto; height: auto; clip: auto; padding: 12px 16px; background: #fff; color: var(--noir); }

.conteneur { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gout); }

.jaune {
  display: inline-block; margin: 6px 0 0; padding: 3px 9px; border-radius: 3px;
  background: #ffe066; color: #3b2f00; font: 500 12.5px/1.35 var(--sans);
  letter-spacing: 0; text-transform: none; vertical-align: middle;
}
.propre .jaune { display: none !important; }

.surtitre {
  display: flex; align-items: center; gap: 14px;
  font: 400 12px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase;
}
.surtitre::before { content: ''; flex: none; width: 28px; height: 1px; background: var(--rouge); }

.h2 { font-size: clamp(2.25rem, 5.2vw + .2rem, 4.75rem); line-height: 1.02; letter-spacing: -.035em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: 0;
  font: 500 15px/1 var(--sans); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-rouge { background: var(--rouge); color: #fff; }
.btn-rouge:hover { background: var(--rouge-fonce); }
.btn-contour { border-color: currentColor; color: inherit; background: transparent; }
.btn-contour:hover { background: #fff; color: var(--noir); border-color: #fff; }
.btn-noir { background: var(--noir); color: #fff; }
.btn-noir:hover { background: var(--rouge); }
.btn-petit { min-height: 44px; padding: 0 16px; font-size: 14px; }

.intro { display: none; }
.avec-intro .intro { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.intro-rideau { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--noir); }
.intro-haut { top: 0; animation: rideau-haut .75s 1.35s var(--ease) both; }
.intro-bas { bottom: 0; animation: rideau-bas .75s 1.35s var(--ease) both; }
.intro-marque {
  position: absolute; left: 50%; top: 50%; width: min(52vw, 280px);
  transform: translate(-50%, -50%); text-align: center; color: #fff;
  animation: intro-sort .35s 1.15s ease-in both;
}
.intro-marque svg { width: 100%; height: auto; overflow: visible; }
.intro-mots { margin-top: 22px; font: 300 11px/1 var(--sans); letter-spacing: .62em; text-transform: uppercase; padding-left: .62em; animation: fondu .5s .7s both; }
.trace-my path, .dessin path, .pied-my path { fill: none; stroke: var(--rouge); stroke-width: 7; stroke-linejoin: miter; stroke-dasharray: 1 2; }
.intro .trace-my path { animation: trace .8s .1s var(--trace) both; }
.intro .trace-my path + path { animation-duration: .7s; animation-delay: .38s; }
.intro-saute .intro { opacity: 0; transition: opacity .25s; }
@keyframes trace { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }
@keyframes rideau-haut { to { transform: translateY(-100%); } }
@keyframes rideau-bas { to { transform: translateY(100%); } }
@keyframes intro-sort { to { opacity: 0; transform: translate(-50%, -50%) scale(.94); } }
@keyframes fondu { from { opacity: 0; } }
@keyframes monte { from { opacity: 0; transform: translateY(28px); } }
@keyframes entre { from { transform: scale(1.14); } }

.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--hdr); color: #fff;
  background: linear-gradient(rgba(10, 10, 10, .6), rgba(10, 10, 10, 0));
  transition: background-color .4s;
}
.hdr.plein, .menu-ouvert .hdr { background: rgba(10, 10, 10, .94); }
@supports (backdrop-filter: blur(1px)) { .hdr.plein { background: rgba(10, 10, 10, .82); backdrop-filter: blur(12px); } }
.hdr-in { height: 100%; display: flex; align-items: center; gap: 12px; }
.hdr-logo { display: block; margin-right: auto; padding: 12px 0; }
.hdr-logo img { width: auto; height: 20px; }
.hdr-nav, .hdr-tel { display: none; }
.hdr-menu {
  width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  display: grid; place-content: center; gap: 7px;
}
.hdr-menu span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.hdr-menu[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.hdr-menu[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.hdr-progres { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rouge); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

@media (min-width: 900px) {
  .hdr-in { gap: 28px; }
  .hdr-logo img { height: 24px; }
  .hdr-nav { display: flex; gap: 28px; }
  .hdr-nav a { position: relative; font-size: 14px; letter-spacing: .04em; text-decoration: none; padding: 10px 0; }
  .hdr-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--rouge); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s var(--ease); }
  .hdr-nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
  .hdr-menu, .menu { display: none !important; }
}
@media (min-width: 1100px) {
  .hdr-tel { display: block; font-size: 14px; text-decoration: none; letter-spacing: .04em; padding: 10px 0; }
}

.menu {
  position: fixed; inset: 0; z-index: 45; background: var(--noir); color: #fff;
  padding: calc(var(--hdr) + 32px) var(--gout) 40px; display: flex; flex-direction: column; overflow-y: auto;
  animation: fondu .3s both;
}
.menu[hidden] { display: none; }
.menu nav { display: grid; }
.menu nav a { font-size: clamp(2rem, 9vw, 2.6rem); font-weight: 300; letter-spacing: -.03em; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--ligne-sombre); }
.menu-bas { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; }
.menu-bas .btn { width: 100%; }

.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; background: var(--noir); overflow: hidden; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media picture, .hero-img { width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: 50% 30%; transform: scale(calc(1 + var(--h, 0) * .08)) translateY(calc(var(--h, 0) * 5%)); }
.hero-voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.94) 0%, rgba(10,10,10,.7) 32%, rgba(10,10,10,.1) 62%, rgba(10,10,10,.3) 100%); }
.hero-texte {
  position: relative; padding-top: calc(var(--hdr) + 40px); padding-bottom: clamp(28px, 6vh, 72px);
  transform: translateY(calc(var(--h, 0) * -56px)); opacity: calc(1 - var(--h, 0) * 1.4);
}
.hero h1 { margin-top: 18px; font-size: clamp(2.5rem, 6.4vw + .4rem, 5.75rem); line-height: 1; letter-spacing: -.04em; max-width: 13ch; }
.hero-sous { margin-top: 20px; max-width: 34ch; font-size: clamp(1.02rem, .5vw + .95rem, 1.2rem); color: rgba(255,255,255,.86); }
.hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.statut { margin-top: 22px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,.8); }
.statut[hidden] { display: none; }
.pastille { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); flex: none; }
.statut.ouvert .pastille { background: #4ade80; border-color: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.18); }
@media (max-width: 420px) { .hero-actions .btn { flex: 1 1 100%; } }
@media (max-width: 899px) {
  .hero { display: block; min-height: 0; }
  .hero-media { position: relative; inset: auto; height: 62svh; min-height: 340px; }
  .hero-img { object-position: 50% 25%; }
  .hero-voile { background: linear-gradient(to top, var(--noir) 0%, rgba(10,10,10,.75) 25%, rgba(10,10,10,0) 55%, rgba(10,10,10,.35) 100%); }
  .hero-texte { margin-top: -120px; padding-top: 0; }
}
@media (min-width: 900px) {
  .hero h1 { max-width: none; }
  .hero h1 .ligne { display: block; }
}

.enonce { padding-block: clamp(88px, 14vw, 180px); }
.enonce-txt { --s: 1; margin-top: 28px; max-width: 1080px; font-size: clamp(1.65rem, 3.9vw + .3rem, 3.6rem); line-height: 1.16; letter-spacing: -.028em; font-weight: 300; }
.mot { opacity: calc(.13 + .87 * clamp(0, (var(--s) * (var(--n) + 4) - var(--i)) / 4, 1)); }

.vitrine { position: relative; background: var(--noir); }
.vitrine-colle { position: relative; height: 92svh; min-height: 520px; max-height: 1000px; overflow: hidden; }
.vitrine-cadre { position: absolute; inset: 0; overflow: hidden; }
.vitrine-cadre img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.vitrine-cadre::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.88), rgba(10,10,10,0) 64%); }
.vitrine-legende { position: absolute; left: 0; right: 0; bottom: clamp(32px, 8vh, 88px); color: #fff; }
.vitrine-legende .surtitre { margin-top: 18px; }
@media (max-width: 899px) { .vitrine-cadre::after { background: linear-gradient(to top, rgba(10,10,10,.94), rgba(10,10,10,.6) 38%, rgba(10,10,10,0) 78%); } }

.services { background: var(--noir); color: #fff; padding-block: clamp(88px, 12vw, 160px); }
.sec-tete { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 80px); }
.sec-tete > p:not(.surtitre) { max-width: 46ch; color: var(--gris); }
.services .sec-tete > p:not(.surtitre), .reserver .sec-tete > p:not(.surtitre) { color: rgba(255,255,255,.7); }
@media (min-width: 900px) {
  .sec-tete { grid-template-columns: 7fr 5fr; column-gap: 48px; align-items: end; }
  .sec-tete .surtitre { grid-column: 1 / -1; }
}

.cartes { display: grid; gap: 20px; }
.carte { position: relative; background: var(--noir-2); border-top: 1px solid var(--ligne-sombre); transform-origin: 50% 0; transform: scale(calc(1 - var(--c, 0) * .05)); }
.carte::after { content: ''; position: absolute; inset: 0; background: #000; opacity: calc(var(--c, 0) * .6); pointer-events: none; }
.carte-bande { height: var(--bande); display: flex; align-items: center; gap: 18px; padding: 0 20px; }
.carte-no { font-size: 12px; letter-spacing: .24em; color: var(--rouge); font-weight: 500; }
.carte h3 { font-size: clamp(1.35rem, 1.6vw + .9rem, 1.9rem); letter-spacing: -.02em; }
.carte-fleche { margin-left: auto; width: 20px; height: 20px; color: rgba(255,255,255,.5); }
.carte-media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: #0d0d0d; }
.carte-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-contenu { display: flex; flex-direction: column; gap: 22px; padding: 24px 20px 28px; }
.carte-contenu > p { color: rgba(255,255,255,.78); max-width: 48ch; }
.carte-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px 28px; font-size: 15.5px; }
.carte-liste li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.carte-liste li::before { content: ''; flex: none; width: 10px; height: 1px; margin-top: .8em; background: var(--rouge); }
.carte-contenu .btn { align-self: flex-start; }

.dessin { position: absolute; inset: 0; margin: auto; width: min(86%, 520px); height: auto; overflow: visible; }
.dessin path { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carte-media .jaune { position: absolute; left: 16px; bottom: 16px; margin: 0; }

@media (min-width: 640px) { .carte-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .carte-bande { padding: 0 32px; }
  .carte-corps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .carte-media { aspect-ratio: auto; min-height: 440px; }
  .carte-contenu { padding: 36px 40px 40px; justify-content: center; }
}
@media (min-width: 900px) and (min-height: 700px) {
  .mouvement .carte { position: sticky; top: calc(var(--hdr) + 16px + var(--n) * var(--bande)); }
  .mouvement .carte-corps { height: clamp(380px, calc(100svh - var(--hdr) - 240px), 600px); }
  .mouvement .carte-media { min-height: 0; }
  .mouvement .cartes { gap: 0; padding-bottom: 12vh; }
  .mouvement .carte + .carte { margin-top: 18vh; }
}

.details { background: var(--creme); padding-block: clamp(88px, 12vw, 160px); }
.details .sec-tete { margin-bottom: 40px; }
.piste-cadre {
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding-inline: var(--gout); scroll-padding-inline: var(--gout);
}
.piste-cadre::-webkit-scrollbar { display: none; }
.piste { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; width: max-content; }
.tuile { flex: none; width: min(74vw, 340px); scroll-snap-align: start; }
.tuile figure { margin: 0; }
.tuile-img { overflow: hidden; aspect-ratio: 4 / 5; background: #e2dfd9; }
.tuile-img img { width: 100%; height: 100%; object-fit: cover; }
.tuile figcaption { display: flex; gap: 12px; align-items: baseline; padding-top: 12px; font-size: 15px; }
.tuile figcaption b { font-size: 12px; letter-spacing: .2em; color: var(--rouge); font-weight: 500; }
.piste-indice { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.piste-indice svg { width: 18px; height: 18px; }
.piste-barre { display: none; }

@media (min-width: 900px) {
  .piste-cadre { overflow: visible; padding: 0; }
  .piste { width: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 920px; margin-inline: auto; padding-inline: var(--gout); }
  .tuile { width: auto; }
  .tuile:nth-child(even) { margin-top: 56px; }
  .piste-indice { display: none; }
}
@media (min-width: 900px) {
  .mouvement .tuile:nth-child(even) { transform: translateY(calc(var(--y, 0) * -40px)); }
}

.equipe { padding-block: clamp(88px, 12vw, 160px); }
.christine { display: grid; gap: 32px; }
.christine-photo { overflow: hidden; aspect-ratio: 1 / 1; }
.christine-photo img { width: 100%; height: 100%; object-fit: cover; }
.christine-texte { display: grid; gap: 18px; align-content: center; }
.christine-texte h3 { font-size: clamp(2rem, 3vw + 1rem, 3.25rem); letter-spacing: -.035em; line-height: 1.05; }
.christine-texte p:not(.surtitre) { color: #2a2a2a; max-width: 52ch; }
.christine-texte .btn { justify-self: start; margin-top: 8px; }
.maggy { margin-top: clamp(56px, 8vw, 96px); padding-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--ligne); display: grid; gap: 28px; }
.maggy-photo { overflow: hidden; aspect-ratio: 4 / 5; max-width: 420px; }
.maggy-photo img { width: 100%; height: 100%; object-fit: cover; }
.maggy-texte { display: grid; gap: 14px; align-content: center; }
.maggy-nom { font: italic 400 clamp(3.5rem, 8vw + 1rem, 6.5rem)/.9 var(--serif); letter-spacing: -.02em; }
.maggy-nom::after { content: '.'; color: var(--rouge); }
.maggy-role { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; }
.maggy p:not(.maggy-role) { color: #2a2a2a; max-width: 52ch; }
.maggy .btn { justify-self: start; margin-top: 8px; }
@media (min-width: 900px) {
  .christine { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; }
  .maggy { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; }
  .maggy-photo { order: 2; justify-self: end; width: 100%; }
}

.galerie { background: var(--creme); padding-block: clamp(88px, 12vw, 160px); }
.galerie-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; grid-auto-flow: row dense; }
.galerie figure { margin: 0; overflow: hidden; background: #e2dfd9; }
.galerie figure img { width: 100%; height: 100%; object-fit: cover; }
.g-salon { grid-column: 1 / -1; aspect-ratio: 1 / 1; }
.g-accueil { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.g-miroir { grid-column: 1 / -1; justify-self: end; width: 78%; aspect-ratio: 1 / 1; }
.mouvement .para img { transform: translateY(calc(var(--y, 0) * -5%)) scale(1.12); }
@media (min-width: 900px) {
  .galerie-grille { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; grid-auto-flow: row; }
  .g-salon { grid-column: 1 / 8; grid-row: 1; }
  .g-miroir { grid-column: 9 / 13; grid-row: 1; width: auto; margin-top: 22%; }
  .g-accueil { grid-column: 4 / 11; grid-row: 2; margin-top: 24px; }
}

.avis { background: var(--blanc); padding-block: clamp(88px, 12vw, 160px); overflow-x: clip; }
.note { display: grid; gap: 10px; justify-items: start; margin-top: 18px; }
.note-chiffre { margin: 0; padding-bottom: .12em; font: 200 clamp(5.5rem, 10vw + 2rem, 9rem)/.85 var(--sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums; opacity: calc(.15 + var(--a, 1) * .85); }
.note-sur { font-size: .22em; letter-spacing: 0; color: var(--gris); margin-left: .2em; }
.note-etoiles { position: relative; width: 150px; }
.note-etoiles svg { display: block; width: 100%; height: auto; }
.etoiles-fond { fill: #dcd8d1; }
.etoiles-plein { position: absolute; inset: 0; fill: var(--rouge); clip-path: inset(0 calc(100% - var(--a, 1) * 98%) 0 0); }
.note-total { margin: 0; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.avis-liste {
  list-style: none; display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--gout)); padding: 28px var(--gout) 44px; scroll-padding-inline: var(--gout); scrollbar-width: none;
}
.avis-liste::-webkit-scrollbar { display: none; }
.avis-carte {
  flex: none; width: min(80vw, 340px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 18px;
  padding: 28px 26px 22px; background: #fff; border: 1px solid var(--ligne);
}
.avis-etoiles { display: block; width: 92px; height: auto; fill: var(--rouge); }
.avis-carte blockquote { margin: 0; flex: 1; }
.avis-carte blockquote p { margin: 0; font: 300 clamp(1.15rem, 1rem + .5vw, 1.35rem)/1.45 var(--sans); letter-spacing: -.01em; }
.avis-carte blockquote p::before { content: '«\00a0'; font: italic 400 1.25em/1 var(--serif); color: var(--rouge); }
.avis-carte blockquote p::after { content: '\00a0»'; font: italic 400 1.25em/1 var(--serif); color: var(--rouge); }
.avis-auteur { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--ligne); font-weight: 500; }
.avis-auteur span { font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.mouvement .avis-carte {
  transform: translateY(calc((1 - var(--p, 1)) * 24px)) rotate(calc((1 - var(--p, 1)) * var(--r, 0deg)));
  opacity: calc(.2 + var(--p, 1) * .8);
}
.avis .piste-indice { margin-top: 0; }
.avis .lien-fleche { margin-top: 28px; border-bottom-color: var(--ligne); }
.avis .lien-fleche + p { margin: 20px 0 0; }
@media (min-width: 900px) {
  .note { justify-self: end; justify-items: end; margin-top: 0; }
  .avis-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; overflow: visible; align-items: start; }
  .avis-carte { width: auto; min-height: 260px; }
  .avis-carte:nth-child(3n+2) { margin-top: 48px; }
  .mouvement .avis-carte { transform: translateY(calc((1 - var(--p, 1)) * 56px)) rotate(calc((1 - var(--p, 1)) * var(--r, 0deg))); }
  .avis .lien-fleche { margin-top: 56px; }
}

.reserver { background: var(--noir); color: #fff; padding-block: clamp(88px, 12vw, 160px); }
.reserver-grille { display: grid; gap: 72px; }
@media (min-width: 1000px) { .reserver-grille { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 96px; } }
.reserver .sec-tete { grid-template-columns: 1fr; margin-bottom: 40px; }
.reserver .jaune { margin-top: 0; }

.form { display: grid; gap: 34px; }
.form[hidden] { display: none; }
.choix { margin: 0; padding: 0; border: 0; min-width: 0; }
.choix legend, .champ label { padding: 0; margin-bottom: 12px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.choix legend b { color: var(--rouge); font-weight: 500; margin-right: 8px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { position: relative; }
.puce input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.puce span {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px;
  border: 1px solid rgba(255,255,255,.3); font-size: 15.5px; transition: background-color .25s, color .25s, border-color .25s;
}
.puce:hover span { border-color: #fff; }
.puce input:checked + span { background: #fff; color: var(--noir); border-color: #fff; }
.puce input:focus-visible + span { outline: 2px solid var(--rouge); outline-offset: 3px; }
.puce.eclat span { animation: eclat 1.2s var(--ease); }
@keyframes eclat { 0%, 30% { box-shadow: 0 0 0 4px var(--rouge); } 100% { box-shadow: 0 0 0 0 rgba(211,1,0,0); } }

.champs { display: grid; gap: 26px; }
@media (min-width: 640px) { .champs { grid-template-columns: 1fr 1fr; column-gap: 28px; } .champ-large { grid-column: 1 / -1; } }
.champ { display: grid; }
.champ label { display: block; }
.facultatif { text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.5); }
.champ input, .champ textarea {
  width: 100%; min-height: 50px; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.32); border-radius: 0;
  background: transparent; color: #fff; font: 400 17px/1.4 var(--sans); transition: border-color .25s, box-shadow .25s;
}
.champ textarea { resize: vertical; min-height: 84px; }
.champ input:focus, .champ textarea:focus { outline: none; border-bottom-color: #fff; box-shadow: 0 1px 0 #fff; }
.erreur { margin-top: 8px; color: var(--erreur); font-size: 14px; }
.erreur[hidden] { display: none; }
.invalide input:not([type="radio"]):not([type="checkbox"]), .invalide textarea { border-bottom-color: var(--erreur); }
.invalide .puce span { border-color: rgba(255,116,102,.7); }

.champ .consent { display: flex; gap: 14px; align-items: flex-start; margin: 0; font-size: 14.5px; line-height: 1.5; letter-spacing: normal; text-transform: none; color: rgba(255,255,255,.78); cursor: pointer; }
.consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--rouge); cursor: pointer; }
.consent a { color: #fff; }
.envoyer { width: 100%; min-height: 58px; font-size: 16px; }
.envoyer:disabled { opacity: .6; cursor: progress; }
#echec { margin-top: -18px; }
#echec a { color: #fff; }
.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 640px) { .envoyer { width: auto; padding-inline: 40px; } }
.form-note { font-size: 14.5px; color: rgba(255,255,255,.6); }
.form-note a { color: #fff; }

.merci { padding: 40px 0; border-top: 1px solid var(--rouge); display: grid; gap: 18px; outline: none; }
.merci[hidden] { display: none; }
.merci h3 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; }
.merci p { color: rgba(255,255,255,.78); }
.merci .btn { justify-self: start; }

.infos { display: grid; gap: 40px; align-content: start; }
.gros-tel { display: inline-block; margin-top: 16px; font-size: clamp(2.1rem, 3vw + 1rem, 3rem); font-weight: 300; letter-spacing: -.03em; text-decoration: none; border-bottom: 1px solid var(--rouge); line-height: 1.15; padding-top: 3px; }
.infos h3 { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 14px; font-weight: 400; }
.heures { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.heures th, .heures td { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 400; text-align: left; }
.heures td { text-align: right; color: rgba(255,255,255,.8); }
.heures .ferme td { color: rgba(255,255,255,.6); }
.heures .aujourdhui th, .heures .aujourdhui td { color: #fff; font-weight: 500; }
.heures .aujourdhui th::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; background: var(--rouge); border-radius: 50%; }
.adresse { font-style: normal; color: rgba(255,255,255,.85); }
.lien-fleche { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 6px; font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.lien-fleche svg { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.lien-fleche:hover svg { transform: translate(3px, -3px); }

.pied { background: var(--noir); color: #fff; border-top: 1px solid var(--ligne-sombre); padding-top: clamp(64px, 9vw, 120px); padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.pied-my { width: 100%; height: auto; overflow: visible; margin-bottom: clamp(48px, 7vw, 96px); }
.pied-my path { stroke-width: 1.4; }
.pied-grille { display: grid; gap: 36px; font-size: 15.5px; color: rgba(255,255,255,.78); }
.pied-grille h3 { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 12px; font-weight: 400; }
.pied-grille ul { list-style: none; margin: 0; padding: 0; }
.pied-grille a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.pied-logo { width: 170px; height: auto; margin-bottom: 16px; }
.pied-bas { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--ligne-sombre); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: 13.5px; color: rgba(255,255,255,.55); }
.pied-bas a { color: inherit; }
a[href^="tel:"], .insec { white-space: nowrap; }
.pied-grille a, .pied-bas a, .form-note a, .consent a { position: relative; }
.pied-grille a::after, .pied-bas a::after, .form-note a::after, .consent a::after { content: ''; position: absolute; inset: -12px -6px; }
@media (min-width: 900px) {
  .pied { padding-bottom: 48px; }
  .pied-my { width: auto; max-width: 100%; height: min(34vh, 340px); }
  .pied-grille { grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: 40px; }
}

.pouce {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px;
  padding: 10px var(--gout) calc(10px + env(safe-area-inset-bottom));
  background: var(--noir); border-top: 1px solid var(--ligne-sombre);
  transform: translateY(110%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s;
}
.pouce.visible { transform: none; visibility: visible; transition: transform .45s var(--ease); }
.pouce .btn { min-height: 50px; padding: 0 12px; color: #fff; }
.pouce .btn-contour { border-color: rgba(255,255,255,.4); }
@media (min-width: 900px) { .pouce { display: none; } }

.mouvement .hero-texte > * { animation: monte 1s var(--ease) both; animation-delay: calc(var(--retard, .15s) + var(--d, 0) * .08s); }
.mouvement .hero-media { animation: entre 1.9s var(--retard-media, 0s) var(--ease) both; }
.avec-intro { --retard: 1.55s; --retard-media: 1.35s; }

.mouvement.js-ok .revele { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.mouvement.js-ok .revele.vu { opacity: 1; transform: none; }
.mouvement.js-ok .trace-vu path { stroke-dashoffset: 1.05; transition: stroke-dashoffset 1.8s var(--trace); }
.mouvement.js-ok .trace-vu path:nth-child(2) { transition-delay: .3s; }
.mouvement.js-ok .trace-vu path:nth-child(3) { transition-delay: .6s; }
.mouvement.js-ok .trace-vu path:nth-child(4) { transition-delay: .8s; }
.mouvement.js-ok .trace-vu path:nth-child(5) { transition-delay: 1s; }
.mouvement.js-ok .trace-vu.vu path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}