/* Polices hébergées sur le site (licence OFL) : aucune requête vers un tiers. */
@font-face { font-family: "Instrument Sans"; src: url(/assets/fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/assets/fonts/instrument-serif.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/assets/fonts/instrument-serif-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }

:root { --paper: #fff; --ink: #1a1816; --soft: #6b6660; --line: #e6e2dc; --serif: "Instrument Serif", Georgia, serif; --sans: "Instrument Sans", system-ui, sans-serif; --ease: cubic-bezier(.22,.61,.36,1); --gut: clamp(1.25rem, 3vw, 2.5rem); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.cap { font-size: .6875rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.soft { color: var(--soft); }
.under { border-bottom: 1px solid currentColor; padding-bottom: .3rem; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.01em; }
em { font-style: italic; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 50; background: #fff; color: var(--ink); padding: .5rem 1rem; }

/* En-tête : presque rien */
header.top { position: absolute; inset: 0 0 auto; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.75rem var(--gut); color: #fff; }
.burger { display: flex; align-items: center; gap: .8rem; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; font: inherit; }
.burger i { display: grid; gap: 5px; } .burger i::before, .burger i::after { content: ""; width: 22px; height: 1px; background: currentColor; }
.brand { font-size: .8125rem; font-weight: 500; letter-spacing: .38em; text-transform: uppercase; }
.right { justify-self: end; display: flex; align-items: center; gap: 1.75rem; }
.lang a[aria-current] { border-bottom: 1px solid currentColor; }
.ghost { border: 1px solid rgb(255 255 255 / .7); padding: .7rem 1.2rem; transition: background .4s, color .4s; }
.ghost:hover { background: #fff; color: var(--ink); }
/* Pages sans photo d'ouverture */
.plain header.top { position: relative; color: var(--ink); border-bottom: 1px solid var(--line); }
.plain .ghost { border-color: var(--ink); } .plain .ghost:hover { background: var(--ink); color: #fff; }

/* Ouverture */
.hero { position: relative; height: 100svh; min-height: 640px; color: #fff; display: grid; place-items: center; text-align: center; overflow: hidden; }
.hero > img { position: absolute; inset: 0; animation: settle 2.4s var(--ease) both; }
@keyframes settle { from { transform: scale(1.06); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .38), rgb(0 0 0 / .15) 40%, rgb(0 0 0 / .5)); }
.hero-text { position: relative; z-index: 1; padding: 0 1.5rem; margin-top: -6vh; }
.hero h1 { font-size: clamp(3rem, 7.4vw, 7rem); line-height: .98; }
.hero p { margin: 1.5rem 0 0; }
.hero--page { height: 72svh; min-height: 520px; }
.hero--page .hero-text { margin-top: 4vh; }
.hero--page h1 { font-size: clamp(2.75rem, 6vw, 5.75rem); }

/* Module de réservation */
.booking { position: absolute; z-index: 2; left: 50%; bottom: clamp(1.5rem, 5vh, 3rem); translate: -50% 0; width: min(920px, calc(100% - 2.5rem)); display: grid; grid-template-columns: 1.2fr 1fr 1.2fr auto; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .5); }
.booking--inline { position: relative; left: auto; bottom: auto; translate: none; margin: 2.5rem auto 0; box-shadow: none; border: 1px solid var(--line); }
.field { display: grid; gap: .2rem; padding: 1rem 1.4rem; border-right: 1px solid var(--line); }
.field .cap { color: var(--soft); font-size: .625rem; }
.field input, .field select { border: 0; padding: 0; background: none; font: 400 1.0625rem var(--sans); color: var(--ink); outline: none; appearance: none; cursor: pointer; }
.booking button { border: 0; background: var(--ink); color: #fff; padding: 0 2rem; font: 500 .6875rem var(--sans); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: background .3s; }
.booking button:hover { background: #45403a; }

/* Textes centrés */
.manifesto { text-align: center; padding: clamp(7rem, 18vh, 12rem) 1.5rem clamp(5rem, 12vh, 8rem); }
.manifesto h2 { font-size: clamp(2.5rem, 4.6vw, 4.25rem); line-height: 1.04; margin: 1.5rem auto 2rem; max-width: 14ch; }
.manifesto p { max-width: 34rem; margin: 0 auto 2.25rem; color: var(--soft); font-size: 1.0625rem; }
.manifesto p:last-child { margin-bottom: 0; }

/* Paire de photos décalées */
.pair { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; padding: 0 var(--gut) clamp(6rem, 14vh, 10rem); align-items: start; }
.pair .a { grid-column: 2 / 7; aspect-ratio: 4 / 5; }
.pair .b { grid-column: 8 / 12; aspect-ratio: 3 / 4; margin-top: 30%; }
.pair figcaption { margin-top: 1rem; color: var(--soft); font-size: .875rem; }
.pair figure { margin: 0; } .pair .frame { overflow: hidden; height: 100%; }

/* Prestations en grandes images */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 0 var(--gut); }
.svc { position: relative; aspect-ratio: 3 / 4; overflow: hidden; color: #fff; }
.svc img { transition: transform 1.6s var(--ease); }
.svc:hover img { transform: scale(1.04); }
.svc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / .55)); }
.svc div { position: absolute; z-index: 1; left: 1.75rem; right: 1.75rem; bottom: 1.75rem; }
.svc h3 { font-size: clamp(1.75rem, 2.4vw, 2.375rem); line-height: 1.05; margin-top: .5rem; }

.gala { text-align: center; padding: clamp(7rem, 18vh, 12rem) 1.5rem; }
.gala h2 { font-size: clamp(2.25rem, 4vw, 3.75rem); line-height: 1.06; max-width: 18ch; margin: 1.5rem auto; }
.gala p { color: var(--soft); max-width: 30rem; margin: 0 auto; }
.gala p a { color: var(--ink); margin-left: .25rem; }

/* Pages de contenu : image et texte en alternance */
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; align-items: center; padding: 0 var(--gut) clamp(6rem, 14vh, 9rem); }
.split figure { grid-column: 2 / 7; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.split .text { grid-column: 8 / 12; }
.split.rev figure { grid-column: 7 / 12; grid-row: 1; } .split.rev .text { grid-column: 2 / 6; grid-row: 1; }
.text h2 { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.06; margin: 1.25rem 0 1.5rem; }
.text p { color: var(--soft); margin: 0 0 1.1rem; }
.text p a, .prose p a, .faq p a { color: var(--ink); border-bottom: 1px solid var(--line); transition: border-color .3s; }
.text p a:hover, .prose p a:hover, .faq p a:hover { border-color: var(--ink); }

/* Repères chiffrés, sans cadre */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 64rem; margin: 0 auto; padding: 0 var(--gut) clamp(6rem, 14vh, 9rem); text-align: center; list-style: none; }
.facts strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.1; margin-top: .75rem; }

/* Texte long (parcours, mentions légales) */
.prose { max-width: 40rem; margin: 0 auto; padding: clamp(4rem, 10vh, 6rem) var(--gut) clamp(6rem, 14vh, 9rem); }
.prose h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.04; margin-bottom: 2rem; }
.prose h2 { font-size: 1.75rem; margin: 3rem 0 1rem; }
.prose p, .prose li { color: var(--soft); }
.prose ul { padding-left: 1.1rem; }
.timeline { list-style: none; padding: 0 !important; margin: 0; }
.timeline li { display: grid; grid-template-columns: 7rem 1fr; gap: 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline strong { display: block; color: var(--ink); font-weight: 500; }

/* Questions */
.faq { max-width: 46rem; margin: 0 auto; padding: 0 var(--gut) clamp(6rem, 14vh, 9rem); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; cursor: pointer; font-family: var(--serif); font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 1.25rem; color: var(--soft); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.5rem; color: var(--soft); max-width: 40rem; }

/* Appel final avec module de réservation */
.cta { text-align: center; padding: clamp(6rem, 14vh, 9rem) var(--gut); border-top: 1px solid var(--line); }
.cta h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.06; }

/* Formulaire de devis */
.devis { max-width: 46rem; margin: 0 auto; padding: clamp(3.5rem, 9vh, 6rem) var(--gut) clamp(6rem, 14vh, 9rem); }
.devis h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.04; text-align: center; }
.devis .lead { text-align: center; color: var(--soft); max-width: 32rem; margin: 1.25rem auto 3.5rem; }
.progress { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 2.5rem; }
.bar { flex: 1; height: 1px; background: var(--line); position: relative; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); width: 25%; transition: width .6s var(--ease); }
.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step[hidden] { display: none; }
.step legend { font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; padding: 0; margin-bottom: 2rem; }
.q { margin-bottom: 2rem; }
.q > .cap { display: block; color: var(--soft); margin-bottom: .75rem; }
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choices label { position: relative; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices span { display: inline-block; padding: .65rem 1.1rem; border: 1px solid var(--line); cursor: pointer; transition: border-color .3s, background .3s, color .3s; }
.choices label:hover span { border-color: var(--ink); }
.choices input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.choices input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 3px; }
.line { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: .6rem 0; font: 400 1.0625rem var(--sans); color: var(--ink); background: none; outline: none; border-radius: 0; transition: border-color .3s; }
.line:focus { border-color: var(--ink); }
textarea.line { resize: vertical; min-height: 6rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.check { display: flex; gap: .75rem; align-items: flex-start; color: var(--soft); font-size: .9375rem; cursor: pointer; }
.check input { margin-top: .3rem; accent-color: var(--ink); }
.notice { padding: .9rem 1.1rem; background: #f6f4f1; font-size: .9375rem; margin-top: 1rem; }
.notice[hidden] { display: none; }
.err { color: #9b2c1f; font-size: .875rem; margin-top: .5rem; }
.nav-steps { display: flex; justify-content: space-between; align-items: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.btn { border: 1px solid var(--ink); background: var(--ink); color: #fff; padding: 1rem 2rem; font: 500 .6875rem var(--sans); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: background .3s; }
.btn:hover { background: #45403a; }
.btn[disabled] { opacity: .5; cursor: wait; }
.back { background: none; border: 0; font: inherit; cursor: pointer; color: var(--soft); padding: 0; }
.back[hidden] { visibility: hidden; display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pied de page */
.site-foot { border-top: 1px solid var(--line); padding: 0 var(--gut); }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 4rem 0; font-size: .9375rem; line-height: 1.9; }
.foot-cols p { margin: 0 0 .75rem; }
.foot-cols a:hover { color: var(--soft); }
.foot-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.5rem 0 2rem; border-top: 1px solid var(--line); color: var(--soft); }
.foot-line > :last-child { justify-self: end; display: flex; gap: 1.5rem; }

/* Menu plein écran */
.menu { position: fixed; inset: 0; z-index: 20; background: var(--paper); color: var(--ink); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.menu.open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.menu ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.menu li a { font-family: var(--serif); font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.25; }
.menu li a:hover { font-style: italic; }
.menu .close { position: absolute; top: 1.75rem; left: var(--gut); background: none; border: 0; font: inherit; cursor: pointer; color: inherit; }
.menu .menu-foot { position: absolute; bottom: 2rem; left: 0; right: 0; display: flex; justify-content: center; gap: 1.5rem; }

.js .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

.sticky-book { display: none; }
@media (max-width: 820px) {
  .burger { font-size: 0; gap: 0; }
  .right .lang, .right .ghost { display: none; } .brand { letter-spacing: .2em; font-size: .75rem; }
  .hero { height: 88svh; } .hero--page { height: 64svh; }
  .booking { position: relative; left: auto; bottom: auto; translate: none; width: auto; margin: -2.5rem 1.25rem 0; grid-template-columns: 1fr 1fr; }
  .booking--inline { margin: 2.5rem 0 0; }
  .field:nth-child(2) { border-right: 0; } .field:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--line); border-right: 0; } .booking button { grid-column: 1 / -1; padding: 1.1rem; }
  .pair .a, .pair .b, .split figure, .split .text, .split.rev figure, .split.rev .text { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
  .split .text { margin-top: 1rem; }
  .services, .facts { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: .25rem; }
  .foot-cols { grid-template-columns: 1fr; padding: 3rem 0; } .foot-line { grid-template-columns: 1fr; gap: .5rem; text-align: center; padding-bottom: 6rem; } .foot-line > :last-child { justify-self: center; }
  .sticky-book { display: block; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 9; background: var(--ink); color: #fff; text-align: center; padding: 1rem; opacity: 0; transition: opacity .4s; pointer-events: none; }
  .sticky-book.show { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .hero > img { animation: none; } .js .reveal { opacity: 1; transform: none; transition: none; } }