/* Megève Signatures · conciergerie privée, locations Airbnb et services à la maison, à l'heure
   Feuille de style unique. Parti pris : un carnet de maison de montagne, ouvert sur une entrée de grand chalet.
   Papier froid légèrement grainé, encre bleu nuit, une seule couleur d'accent (airelle).
   Newsreader pour les titres et les textes posés, Schibsted Grotesk pour le courant,
   IBM Plex Mono pour ce qui relève du relevé (feuille de route, rotation, registre, carte, estimation). */

@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-opsz-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-opsz-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-wght.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --papier: #f2f0eb;
  --papier-2: #e8e4db;
  --feuille: #fbfaf7;
  --encre: #1a2129;
  --encre-2: #48515b;
  --encre-3: #6f7781;
  --trait: #cfc8bb;
  --trait-doux: #ddd8cd;
  --nuit: #131b25;
  --nuit-2: #1d2834;
  --givre: #d7dee5;
  --airelle: #9b2f2c;
  --airelle-clair: #c4544f;
  --plume: #22325a;

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --cadre: 1240px;
  --gouttiere: clamp(20px, 4vw, 40px);
  --entete-h: 76px;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .12  0 0 0 0 .15  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background-color: var(--papier);
  background-image: var(--grain);
  background-size: 180px 180px;
  color: var(--encre);
  font: 400 17px/1.62 var(--sans);
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 380; letter-spacing: -.012em; line-height: 1.06; font-variation-settings: "opsz" 72; }
em { font-style: italic; }
h1 em, h2 em { font-weight: 330; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--airelle); outline-offset: 3px; }
::selection { background: var(--plume); color: var(--feuille); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--nuit); color: var(--papier); text-decoration: none; }
.evitement:focus { top: 12px; }

.cadre { width: 100%; max-width: var(--cadre); margin: 0 auto; padding: 0 var(--gouttiere); }
.etroit { max-width: 980px; }

.etiquette {
  font: 400 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3);
  display: flex; align-items: center; gap: 12px;
}
.etiquette::before { content: ""; width: 28px; height: 1px; background: currentColor; }

section { scroll-margin-top: calc(var(--entete-h) + 8px); }

/* ---------- Boutons et liens ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 24px;
  background: var(--nuit); color: var(--feuille);
  font: 500 15px/1.2 var(--sans); letter-spacing: .02em; text-decoration: none;
  border: 1px solid var(--nuit); border-radius: 2px; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.bouton:hover { background: var(--airelle); border-color: var(--airelle); }
.bouton--clair { background: transparent; color: var(--nuit); }
.bouton--clair:hover { background: var(--nuit); color: var(--feuille); border-color: var(--nuit); }
.bouton--clair-nuit { background: var(--feuille); color: var(--nuit); border-color: var(--feuille); }
.bouton--clair-nuit:hover { background: var(--airelle); border-color: var(--airelle); color: var(--feuille); }
.fleche { width: 16px; height: 10px; flex: none; }
.fleche path { fill: none; stroke: currentColor; stroke-width: 1.4; }

.souligne { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .3s ease; }
.souligne:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- Bandeau du haut ---------- */
.bandeau { background: var(--nuit); color: var(--givre); font: 400 12px/1.3 var(--mono); letter-spacing: .06em; }
.bandeau__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; }
.bandeau a { color: var(--feuille); text-decoration: none; }
.bandeau a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.bandeau__milieu { opacity: .8; }
@media (max-width: 720px) { .bandeau__milieu, .bandeau__alt { display: none; } }
.bandeau__gauche { display: inline-flex; align-items: center; gap: 14px; }
.bandeau__neige {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 9px;
  font: inherit; letter-spacing: .06em; color: var(--feuille); background: transparent;
  border: 1px solid rgba(215, 222, 229, .28); border-radius: 2px; cursor: pointer;
  transition: border-color .2s, opacity .2s;
}
.bandeau__neige:hover { border-color: rgba(215, 222, 229, .7); }
.bandeau__neige[hidden] { display: none; }
.bandeau__neige[aria-pressed="false"] { opacity: .6; }
.bandeau__neige svg { width: 12px; height: 12px; }
.bandeau__neige path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 480px) { .bandeau__alt-m { display: none; } }

/* ---------- Neige : canvas fixe au-dessus de tout, qui ne capte aucun clic (dessiné par js/effets.js) ---------- */
.neige { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; pointer-events: none; }

/* ---------- Ouverture : les volets du chalet, une fois par visite ----------
   Tout se joue en CSS : la marque se trace, puis les deux volets s'ouvrent vers l'intérieur.
   L'écran se cache seul à 2,9 s, même si js/effets.js ne se charge pas. */
.ouverture-chalet { display: none; }
.volets .ouverture-chalet {
  display: block; position: fixed; inset: 0; z-index: 60; perspective: 1800px; cursor: pointer;
  animation: volets-fin 0s linear 2.9s forwards;
}
.volets-passe .ouverture-chalet { opacity: 0; transition: opacity .3s ease; }
.volet {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background-color: var(--nuit);
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(215, 222, 229, .07) calc(25% - 1px) 25%);
  backface-visibility: hidden;
  animation: 1.25s cubic-bezier(.62, .02, .24, 1) 1.35s forwards;
}
.volet--g { left: 0; transform-origin: left center; animation-name: volet-g; box-shadow: inset -1px 0 0 rgba(215, 222, 229, .16); }
.volet--d { right: 0; transform-origin: right center; animation-name: volet-d; box-shadow: inset 1px 0 0 rgba(215, 222, 229, .16); }
.volet__bois { position: absolute; inset: 0; width: 100%; height: 100%; }
.volet__bois path { fill: none; stroke: rgba(215, 222, 229, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.volet__sapin { position: absolute; left: 50%; top: 25%; width: clamp(15px, 1.8vw, 24px); height: auto; transform: translateX(-50%); fill: rgba(242, 240, 235, .9); }
.ouverture-chalet__marque {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; color: var(--feuille); white-space: nowrap;
  animation: marque-part .35s ease 1.15s forwards;
}
.ouverture-chalet__marque svg { display: block; width: 64px; height: 52px; margin: 0 auto 14px; }
.ouverture-chalet__marque path {
  fill: none; stroke: var(--givre); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: trace .8s cubic-bezier(.55, .1, .35, 1) .15s forwards;
}
.ouverture-chalet__marque path + path { animation-delay: .6s; animation-duration: .45s; }
.ouverture-chalet__marque p { font: 400 clamp(26px, 3.4vw, 38px)/1 var(--serif); letter-spacing: -.01em; font-variation-settings: "opsz" 36; opacity: 0; animation: apparait .6s ease .35s forwards; }
.ouverture-chalet__marque em { color: var(--givre); }
@keyframes volet-g { to { transform: rotateY(100deg); } } /* vers l'intérieur, comme une porte qu'on pousse */
@keyframes volet-d { to { transform: rotateY(-100deg); } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes apparait { to { opacity: 1; } }
@keyframes marque-part { to { opacity: 0; } }
@keyframes volets-fin { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .volets .ouverture-chalet { display: none; } }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 30;
  background: rgba(242, 240, 235, .94);
  backdrop-filter: saturate(1.1) blur(6px); -webkit-backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
.entete.est-defile { border-bottom-color: var(--trait); }
.entete__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--entete-h); }
.marque { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-decoration: none; color: var(--encre); }
.marque__trait { grid-row: 1 / 3; width: 40px; height: 32px; }
.marque__trait path { fill: none; stroke: var(--plume); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.marque__nom { font: 400 22px/1 var(--serif); letter-spacing: -.01em; font-variation-settings: "opsz" 36; }
.marque__nom em { color: var(--plume); }
.marque__metier { font: 400 10.5px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--encre-3); margin-top: 5px; }

.menu { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.menu a { text-decoration: none; color: var(--encre-2); white-space: nowrap; transition: color .2s; }
.menu a:hover { color: var(--encre); }
.menu a.menu__devis { color: var(--feuille); background: var(--nuit); padding: 11px 18px; border-radius: 2px; transition: background-color .25s; }
.menu a.menu__devis:hover { background: var(--airelle); color: var(--feuille); }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--trait); background: transparent; border-radius: 2px; cursor: pointer; position: relative; }
.burger span:not(.sr) { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--encre); transition: transform .3s ease, top .3s ease; }
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

@media (max-width: 1240px) {
  .burger { display: block; }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier); border-bottom: 1px solid var(--trait);
    padding: 8px var(--gouttiere) 20px;
    display: none;
  }
  .menu.est-ouvert { display: flex; }
  .menu a { padding: 14px 0; border-bottom: 1px solid var(--trait-doux); font-size: 17px; }
  .menu a.menu__devis { margin-top: 14px; text-align: center; border-bottom: 0; }
}

/* ---------- Ouverture : le grand séjour d'un chalet, en pleine largeur, sous un voile de nuit ---------- */
.ouverture { position: relative; overflow: hidden; background: var(--nuit); color: var(--feuille); }
.ouverture__photo { position: absolute; inset: 0; margin: 0; }
.ouverture__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.ouverture__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(19, 27, 37, .9) 0%, rgba(19, 27, 37, .72) 34%, rgba(19, 27, 37, .22) 70%, rgba(19, 27, 37, .08) 100%),
    linear-gradient(0deg, rgba(19, 27, 37, .92) 0%, rgba(19, 27, 37, .35) 26%, rgba(19, 27, 37, 0) 48%);
}
.ouverture__in {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 56px;
  min-height: min(calc(100svh - 112px), 900px); padding-top: clamp(56px, 9vw, 140px);
}
.ouverture__texte { max-width: 46rem; }
.ouverture .etiquette { color: var(--givre); }
.ouverture h1 { margin-top: 26px; font-size: clamp(2.5rem, 5.4vw, 5rem); font-weight: 330; line-height: 1.02; color: var(--feuille); }
.ouverture h1 em { color: var(--givre); }
.chapeau { margin-top: 28px; max-width: 34em; font-size: clamp(17px, 1.5vw, 19.5px); color: var(--encre-2); }
.ouverture .chapeau { color: rgba(251, 250, 247, .86); }
.actions { margin-top: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.combine { width: 18px; height: 18px; flex: none; }
.combine path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
/* Bouton d'appel de l'ouverture : contour clair sur la photo, plein au survol */
.bouton--appel { background: transparent; color: var(--feuille); border-color: rgba(251, 250, 247, .7); }
.bouton--appel:hover { background: var(--feuille); color: var(--nuit); border-color: var(--feuille); }
.bouton__num { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.actions__note { flex-basis: 100%; margin-top: -4px; font: 400 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--givre); }
@media (max-width: 520px) { .actions .bouton { width: 100%; } }

/* Les trois métiers, posés au pied de la photo */
.portes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(251, 250, 247, .4); }
.portes a { display: block; padding: 20px 24px clamp(26px, 3.5vw, 40px) 0; text-decoration: none; color: var(--feuille); transition: background-color .3s ease; }
.portes a + a { padding-left: 24px; border-left: 1px solid rgba(215, 222, 229, .2); }
.portes strong { display: block; font: 400 clamp(20px, 1.9vw, 24px)/1.2 var(--serif); font-weight: 400; font-variation-settings: "opsz" 30; }
.portes strong::after { content: " →"; font-family: var(--sans); font-size: .7em; opacity: 0; transition: opacity .25s ease, margin .25s ease; }
.portes a:hover strong::after { opacity: 1; }
.portes span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--givre); }

@media (max-width: 900px) {
  .ouverture__photo::after { background: linear-gradient(0deg, rgba(19, 27, 37, .94) 0%, rgba(19, 27, 37, .74) 55%, rgba(19, 27, 37, .45) 100%); }
  .ouverture__in { min-height: 0; padding-top: clamp(64px, 18vw, 120px); }
  .portes { grid-template-columns: 1fr; }
  .portes a, .portes a + a { padding: 16px 0 18px; border-left: 0; border-bottom: 1px solid rgba(215, 222, 229, .18); }
  .portes a:last-child { border-bottom: 0; padding-bottom: 30px; }
}

/* ---------- Manifeste et engagements ---------- */
.manifeste { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--trait); }
.manifeste__texte { font: 330 clamp(1.5rem, 2.9vw, 2.35rem)/1.32 var(--serif); letter-spacing: -.005em; font-variation-settings: "opsz" 48; }
.manifeste__texte em { color: var(--plume); }
.manifeste__texte::first-letter { font-size: 1.04em; }
.engagements { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--encre); }
.engagements li { padding: 16px 20px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--encre-2); }
.engagements li + li { padding-left: 20px; border-left: 1px solid var(--trait); }
.engagements strong { display: block; font: 400 20px/1.2 var(--serif); color: var(--encre); margin-bottom: 4px; font-variation-settings: "opsz" 24; }
@media (max-width: 900px) {
  .engagements { grid-template-columns: 1fr 1fr; }
  .engagements li:nth-child(3) { padding-left: 0; border-left: 0; }
  .engagements li:nth-child(n+3) { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--trait); }
}
@media (max-width: 520px) {
  .engagements { grid-template-columns: 1fr; }
  .engagements li, .engagements li + li { padding: 14px 0; margin: 0; border-left: 0; border-top: 0; border-bottom: 1px solid var(--trait-doux); }
}

/* ---------- Qui sommes-nous : la maison, le mot de Nicolas Soufflet et son portrait, sur fond nuit ---------- */
.maison { padding: clamp(72px, 9vw, 130px) 0; color: var(--feuille); background: var(--nuit); }
.maison__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.maison .etiquette { color: var(--givre); }
.maison h2 { margin-top: 22px; font-size: clamp(2.3rem, 4.4vw, 3.7rem); }
.maison h2 em { color: var(--givre); }
.maison__intro { margin-top: 24px; max-width: 34em; color: var(--givre); font-size: 18px; }
.maison__mot { margin: 34px 0 0; padding-left: 22px; border-left: 1px solid var(--airelle-clair); }
.maison__mot p { font: 330 clamp(1.2rem, 1.8vw, 1.45rem)/1.45 var(--serif); font-style: italic; font-variation-settings: "opsz" 36; }
.maison__mot footer { margin-top: 14px; font: 400 12.5px/1.4 var(--mono); letter-spacing: .08em; color: var(--givre); }
.maison__signature { margin-top: 38px; padding-top: 24px; border-top: 1px solid rgba(215, 222, 229, .22); display: flex; align-items: center; gap: 18px; }
.maison__signature img { width: 84px; flex: none; }
.maison__signature p { font-size: 14.5px; line-height: 1.5; color: var(--givre); }
.maison__signature strong { font-weight: 500; color: var(--feuille); }
.maison__photo { margin: 0; }
.maison__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 860px) {
  .maison__in { grid-template-columns: 1fr; }
  .maison__photo { order: -1; max-width: 520px; }
}

/* ---------- Titres de section ---------- */
.titre-section { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.titre-section .etiquette { grid-column: 1 / -1; }
.titre-section h2 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); }
.titre-section h2 em { color: var(--plume); }
.titre-section > p:last-child { color: var(--encre-2); max-width: 36em; }
@media (max-width: 820px) { .titre-section { grid-template-columns: 1fr; } }

/* ---------- Le séjour (fond nuit) ---------- */
.sejour { padding: clamp(64px, 9vw, 130px) 0; background: var(--nuit); color: var(--feuille); }
.sejour .etiquette { color: var(--givre); }
.sejour .titre-section h2 em { color: var(--givre); }
.sejour .titre-section > p:last-child { color: var(--givre); }

/* La galerie : sept photos en mosaïque sur deux rangs */
.galerie {
  display: grid; gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(170px, 17vw, 250px));
  grid-template-areas: "v v c h s" "t l c k s";
}
.galerie figure { position: relative; margin: 0; overflow: hidden; background: var(--nuit-2); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.galerie figure:hover img { transform: scale(1.035); }
.galerie figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 14px 12px;
  background: linear-gradient(0deg, rgba(19, 27, 37, .82), rgba(19, 27, 37, 0));
  font: 400 11.5px/1.4 var(--mono); letter-spacing: .05em; color: rgba(251, 250, 247, .92);
}
.g-v { grid-area: v; } .g-c { grid-area: c; } .g-h { grid-area: h; } .g-s { grid-area: s; }
.g-t { grid-area: t; } .g-l { grid-area: l; } .g-k { grid-area: k; }
.g-h img { object-position: 35% 40%; }
.g-l img { object-position: 38% 50%; }
@media (max-width: 1020px) {
  .galerie {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere);
    margin: 0 calc(var(--gouttiere) * -1); padding: 0 var(--gouttiere) 8px; scrollbar-width: thin;
  }
  .galerie figure { flex: 0 0 clamp(220px, 40%, 340px); height: 320px; scroll-snap-align: start; }
}
@media (max-width: 560px) { .galerie figure { flex-basis: 72%; } }

.sejour__in { margin-top: clamp(48px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.sejour .prestations { border-top: 1px solid rgba(251, 250, 247, .55); }
.sejour .prestations > div { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 4px 28px; padding: 20px 0 22px; border-bottom: 1px solid rgba(215, 222, 229, .16); }
.sejour .prestations dt { font: 400 21px/1.25 var(--serif); font-variation-settings: "opsz" 24; color: var(--feuille); }
.sejour .prestations dd { margin-top: 0; color: var(--givre); }
@media (max-width: 680px) { .sejour .prestations > div { grid-template-columns: 1fr; } }
.chapitre + .chapitre { margin-top: clamp(36px, 4vw, 52px); }
.chapitre h3 { margin-bottom: 14px; font: italic 400 clamp(1.6rem, 2.6vw, 2.1rem)/1.1 var(--serif); color: var(--givre); font-variation-settings: "opsz" 36; }
.sejour__promesse { margin-top: clamp(56px, 7vw, 96px); padding-top: 26px; border-top: 1px solid rgba(215, 222, 229, .22); max-width: 52em; color: var(--givre); font-size: 16px; }
.sejour__promesse span { display: block; margin-bottom: 6px; font: italic 400 clamp(1.5rem, 2.4vw, 2rem)/1.2 var(--serif); color: var(--feuille); font-variation-settings: "opsz" 36; }

.feuille {
  position: sticky; top: calc(var(--entete-h) + 32px);
  background: var(--feuille); color: var(--encre);
  padding: 30px clamp(22px, 3.4vw, 38px) 26px;
  transform: rotate(.9deg);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .65);
  font: 400 13.5px/1.5 var(--mono);
}
.feuille__entete { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--encre); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
.feuille__lieu { margin-top: 16px; font: 400 26px/1.15 var(--serif); font-variation-settings: "opsz" 36; }
.feuille__qui { margin-top: 4px; color: var(--encre-2); font-size: 13px; }
.feuille__heures { margin-top: 16px; }
.feuille__heures li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 10px 0; border-top: 1px dotted var(--trait); }
.feuille__heures time { color: var(--airelle); white-space: nowrap; }
.feuille__heures p { font: 400 14.5px/1.45 var(--sans); }
.feuille__jour { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--encre); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
.feuille__jour + .feuille__heures { margin-top: 4px; }
.feuille__pied { margin-top: 12px; padding-top: 12px; border-top: 1px dotted var(--trait); font: italic 400 15px/1.4 var(--serif); font-variation-settings: "opsz" 18; color: var(--encre-2); }
.feuille__mention { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%) rotate(-.9deg); font: italic 400 14px/1 var(--serif); color: rgba(215, 222, 229, .82); white-space: nowrap; }
@media (max-width: 900px) {
  .sejour__in { grid-template-columns: 1fr; }
  .feuille { position: relative; top: auto; transform: none; margin-bottom: 30px; }
  .feuille__mention { transform: translateX(-50%); }
}
@media (max-width: 480px) { .feuille__heures li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Listes de prestations (communes) ---------- */
.prestations > div { padding: 18px 0 20px; border-bottom: 1px solid var(--trait); }
.prestations dt { font-weight: 500; font-size: 16.5px; }
.prestations dd { margin-top: 6px; color: var(--encre-2); font-size: 15.5px; line-height: 1.55; }

/* ---------- Locations Airbnb ---------- */
.locations { padding: clamp(64px, 9vw, 130px) 0; }
.locations .titre-section strong { font-weight: 500; color: var(--encre); }
.locations__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.locations__photos { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: end; position: sticky; top: calc(var(--entete-h) + 24px); }
.locations__photos figure { margin: 0; }
.locations__photos img { width: 100%; object-fit: cover; background: var(--papier-2); }
.locations__photos .l1 img { aspect-ratio: 2 / 3; }
.locations__photos .l2 img { aspect-ratio: 3 / 4; }
.locations__photos figcaption { margin-top: 10px; font: 400 11.5px/1.45 var(--mono); letter-spacing: .05em; color: var(--encre-3); }
.prestations--deux { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 44px); border-top: 1px solid var(--encre); }
@media (max-width: 1020px) {
  .locations__in { grid-template-columns: 1fr; }
  .locations__photos { position: static; max-width: 640px; }
}
@media (max-width: 620px) { .prestations--deux { grid-template-columns: 1fr; } }

/* La rotation : six heures entre deux voyageurs, sur une piste de 10 h à 16 h */
.rotation { margin: clamp(56px, 7vw, 96px) 0 0; padding: 28px clamp(20px, 3vw, 36px) 30px; background: var(--feuille); border: 1px solid var(--trait); box-shadow: 0 30px 60px -40px rgba(19, 27, 37, .45); }
.rotation__entete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-bottom: 14px; border-bottom: 2px solid var(--encre); font: 400 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
.rotation__piste { position: relative; height: 10px; margin: 26px 0 0; background: repeating-linear-gradient(90deg, var(--trait) 0 1px, transparent 1px calc(100% / 6)); border-bottom: 1px solid var(--trait); }
.rotation__piste span {
  position: absolute; top: 0; bottom: 0; left: calc(var(--debut) / 6 * 100%); width: calc(var(--duree) / 6 * 100% - 3px);
  background: var(--plume); transform-origin: left center;
}
.rotation__piste span:nth-child(2) { background: var(--nuit); }
.rotation__piste span:nth-child(odd) { opacity: .62; }
.rotation__piste i { position: absolute; top: -6px; bottom: -6px; right: 0; width: 3px; background: var(--airelle); }
.js .rotation[data-apparait] .rotation__piste span { transform: scaleX(0); transition: transform .7s cubic-bezier(.3, .6, .2, 1); transition-delay: calc(var(--debut) * .16s + .3s); }
.js .rotation.est-visible .rotation__piste span { transform: none; }
.rotation__heures { display: flex; justify-content: space-between; margin-top: 8px; font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--encre-3); }
.rotation__heures span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.rotation__heures span:first-child { justify-content: flex-start; }
.rotation__heures span:last-child { justify-content: flex-end; color: var(--airelle); }
.rotation__etapes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 18px; margin-top: 22px; border-top: 1px dotted var(--trait); }
.rotation__etapes li { padding-top: 14px; font-size: 14px; line-height: 1.4; color: var(--encre-2); min-width: 0; }
.rotation__etapes time { display: block; font: 400 12px/1.3 var(--mono); color: var(--plume); white-space: nowrap; }
.rotation__etapes strong { display: block; margin-top: 4px; font: 400 18px/1.2 var(--serif); color: var(--encre); font-variation-settings: "opsz" 24; }
.rotation__etapes span { display: block; margin-top: 3px; }
.rotation__etapes li.arrivee time, .rotation__etapes li.arrivee strong { color: var(--airelle); }
@media (max-width: 1020px) { .rotation__etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; } }
@media (max-width: 640px) {
  .rotation__etapes { grid-template-columns: 1fr; border-top: 0; margin-top: 18px; }
  .rotation__etapes li { display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; padding: 11px 0; border-top: 1px dotted var(--trait); }
  .rotation__etapes time { grid-row: 1 / 3; padding-top: 4px; }
  .rotation__etapes strong { margin-top: 0; }
  .rotation__heures span:nth-child(even) { visibility: hidden; }
}

/* ---------- Services à l'heure : la carte ---------- */
.services { padding: clamp(64px, 9vw, 130px) 0; border-top: 1px solid var(--trait); }
.services__photos { display: grid; grid-template-columns: 1.15fr 1fr 1.15fr; gap: 16px; align-items: end; }
.services__photos figure { margin: 0; }
.services__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--papier); }
.services__photos figure:nth-child(2) img { aspect-ratio: 1 / 1; }
.services__photos figcaption { margin-top: 10px; font: 400 11.5px/1.45 var(--mono); letter-spacing: .05em; color: var(--encre-3); }
@media (max-width: 760px) {
  .services__photos {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere);
    margin: 0 calc(var(--gouttiere) * -1); padding: 0 var(--gouttiere) 8px; align-items: flex-start; scrollbar-width: thin;
  }
  .services__photos figure { flex: 0 0 78%; scroll-snap-align: start; }
  .services__photos img, .services__photos figure:nth-child(2) img { aspect-ratio: 4 / 3; }
}

.carte { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 48px); background: var(--feuille); border: 1px solid var(--trait); }
.carte__groupe h3 { font: italic 400 clamp(1.35rem, 2vw, 1.65rem)/1.15 var(--serif); padding-bottom: 14px; border-bottom: 1px solid var(--encre); font-variation-settings: "opsz" 30; }
.carte li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; padding: 16px 0 17px; border-bottom: 1px solid var(--trait-doux); }
.carte__nom { display: flex; align-items: baseline; gap: 10px; font-weight: 500; font-size: 16.5px; }
.carte__nom::after { content: ""; flex: 1; min-width: 16px; border-bottom: 1px dotted var(--encre-3); transform: translateY(-4px); }
.carte__prix { font: 400 14.5px/1 var(--mono); color: var(--plume); white-space: nowrap; }
.carte li p { grid-column: 1 / -1; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--encre-2); }
.carte__note { margin-top: 18px; max-width: 62em; font-size: 13.5px; line-height: 1.55; color: var(--encre-3); }
@media (max-width: 1020px) { .carte { grid-template-columns: 1fr 1fr; } .carte__groupe:last-child { grid-column: 1 / -1; } }
@media (max-width: 680px) { .carte { grid-template-columns: 1fr; padding: 24px 20px; } }

/* ---------- Blanchisserie et pressing : photos, ticket de linge, grille dépliable ---------- */
.blanchisserie { padding: clamp(64px, 9vw, 130px) 0; border-top: 1px solid var(--trait); }
.blanchisserie__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.blanchisserie__photos { position: relative; padding-bottom: 20%; }
.blanchisserie__photos figure { margin: 0; }
.blanchisserie__photos img { width: 100%; object-fit: cover; background: var(--papier-2); }
.blanchisserie__photos .b1 { width: 78%; }
.blanchisserie__photos .b1 img { aspect-ratio: 4 / 5; }
.blanchisserie__photos .b2 { position: absolute; right: 0; bottom: 0; width: 54%; }
.blanchisserie__photos .b2 img { aspect-ratio: 3 / 2; box-shadow: 0 0 0 8px var(--papier); }
.blanchisserie__photos figcaption { margin-top: 12px; font: 400 11.5px/1.45 var(--mono); letter-spacing: .05em; color: var(--encre-3); }

.ticket {
  position: relative; max-width: 360px; margin: 40px 0 56px 6%;
  background: var(--feuille); color: var(--encre);
  padding: 28px 26px 22px;
  rotate: -1.2deg;
  box-shadow: 0 1px 0 var(--trait), 0 24px 50px -24px rgba(19, 27, 37, .35);
  font: 400 13px/1.5 var(--mono);
}
.ticket::before { /* bord prédécoupé */
  content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px;
  background: radial-gradient(circle at 7px 6px, var(--papier) 4.5px, transparent 5px) 0 0 / 14px 12px repeat-x;
}
.ticket__entete { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--encre); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
.ticket__lieu { margin-top: 14px; font: 400 23px/1.15 var(--serif); font-variation-settings: "opsz" 36; }
.ticket__temps { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ticket__temps div { padding: 8px 10px; border: 1px solid var(--trait-doux); }
.ticket__temps dt { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); }
.ticket__temps dd { margin-top: 2px; color: var(--plume); }
.ticket__lignes { margin-top: 14px; }
.ticket__lignes li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px dotted var(--trait); }
.ticket__lignes li span:last-child { color: var(--plume); }
.ticket__tampon {
  display: inline-block; margin-top: 16px; padding: 7px 12px 6px;
  border: 1.5px solid var(--airelle); border-radius: 3px; color: var(--airelle);
  font: 400 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; rotate: -4deg;
}
.ticket__mention { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%) rotate(1deg); font: italic 400 14px/1 var(--serif); color: var(--encre-3); white-space: nowrap; }

.cycle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 18px; border-top: 1px solid var(--encre); counter-reset: cycle; }
.cycle li { counter-increment: cycle; font-size: 14.5px; line-height: 1.5; color: var(--encre-2); }
.cycle li::before { content: "0" counter(cycle); display: block; margin-bottom: 10px; font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--airelle); }
.cycle strong { display: block; margin-bottom: 4px; font: italic 400 20px/1.2 var(--serif); font-variation-settings: "opsz" 24; color: var(--encre); }

.familles { margin-top: clamp(28px, 4vw, 44px); padding: 4px clamp(18px, 3vw, 32px); background: var(--feuille); border: 1px solid var(--trait); }
.famille + .famille { border-top: 1px solid var(--trait-doux); }
.famille summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; gap: 14px; align-items: baseline; padding: 18px 0; }
.famille summary::-webkit-details-marker { display: none; }
.famille summary::after { content: "+"; justify-self: end; font: 300 24px/1 var(--sans); color: var(--encre-3); transition: transform .25s ease; }
.famille[open] summary::after { transform: rotate(45deg); color: var(--airelle); }
.famille summary:hover .famille__nom { color: var(--plume); }
.famille__nom { font: italic 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.15 var(--serif); font-variation-settings: "opsz" 30; transition: color .2s; }
.famille__meta { font: 400 12px/1.2 var(--mono); color: var(--encre-3); white-space: nowrap; }
.linge { padding-bottom: 20px; }
.linge li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 15px; line-height: 1.35; }
.linge__nom { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.linge__nom::after { content: ""; flex: 1; min-width: 12px; border-bottom: 1px dotted var(--encre-3); transform: translateY(-4px); }
.linge__nom small { font: 400 11px/1 var(--mono); color: var(--encre-3); white-space: nowrap; }
.linge__prix { font: 400 13.5px/1 var(--mono); color: var(--plume); white-space: nowrap; }
@media (max-width: 860px) {
  .blanchisserie__in { grid-template-columns: 1fr; }
  .blanchisserie__cote { max-width: 560px; }
}
@media (max-width: 680px) {
  .cycle { grid-template-columns: 1fr; gap: 18px; }
  .famille__meta { display: none; }
  .famille summary { grid-template-columns: minmax(0, 1fr) 22px; }
}

/* ---------- Registre ---------- */
.registre { padding: clamp(64px, 9vw, 130px) 0; background: var(--papier-2); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.registre__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.registre h2 { margin-top: 22px; font-size: clamp(2.3rem, 4.8vw, 4rem); }
.registre h2 em { color: var(--plume); }
.registre__texte > p:not(.etiquette) { margin-top: 22px; color: var(--encre-2); max-width: 32em; }
.registre__liste { margin-top: 28px; border-top: 1px solid var(--trait); }
.registre__liste li { padding: 12px 0 12px 28px; border-bottom: 1px solid var(--trait); position: relative; font-size: 15.5px; }
.registre__liste li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 12px; height: 1px; background: var(--airelle); }

.carnet {
  position: relative;
  background: var(--feuille);
  padding: 34px clamp(22px, 4vw, 44px) 30px;
  box-shadow: 0 1px 0 var(--trait), 0 24px 50px -24px rgba(19, 27, 37, .35);
  transform: rotate(-1.1deg);
  background-image: linear-gradient(to right, transparent 46px, rgba(155, 47, 44, .22) 46px, rgba(155, 47, 44, .22) 47px, transparent 47px);
  font: 400 14px/1.5 var(--mono); color: var(--encre);
}
.carnet::after { /* coin replié, discret */
  content: ""; position: absolute; right: 0; top: 0; width: 26px; height: 26px;
  background: linear-gradient(225deg, var(--papier-2) 50%, #ebe7df 50%);
}
.carnet__entete { display: flex; justify-content: space-between; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); padding-left: 38px; }
.carnet__lieu { margin-top: 18px; padding-left: 38px; font: 400 26px/1.15 var(--serif); font-variation-settings: "opsz" 36; color: var(--encre); }
.carnet__date { margin-top: 6px; padding-left: 38px; color: var(--encre-2); font-size: 13px; }
.carnet__lignes { margin-top: 20px; border-top: 1px solid var(--trait-doux); }
.carnet__lignes li {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--trait-doux);
}
.carnet__lignes .coche { width: 16px; height: 16px; align-self: center; margin-left: 8px; }
.carnet__lignes .coche path { fill: none; stroke: var(--plume); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.carnet__lignes .valeur { color: var(--plume); white-space: nowrap; }
.carnet__lignes .attente .valeur { color: var(--airelle); }
.carnet__lignes .attente .coche path { stroke: var(--airelle); }
.carnet__pied { margin-top: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-left: 38px; }
.carnet__pied small { font-size: 12px; color: var(--encre-3); }
.signature { width: min(250px, 60%); height: auto; overflow: visible; }
.signature path { fill: none; stroke: var(--plume); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.carnet__mention { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%) rotate(1.1deg); font: italic 400 14px/1 var(--serif); color: var(--encre-3); white-space: nowrap; }

/* Animation du registre : les coches puis la signature. Seulement si JS et animations autorisées. */
.js .carnet [data-trace] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .carnet.est-signe [data-trace] { transition: stroke-dashoffset .5s ease; stroke-dashoffset: 0; }
.js .carnet.est-signe .coche path { transition-delay: calc(var(--i) * .22s + .2s); }
.js .carnet .signature path { transition-duration: 1.6s !important; transition-timing-function: cubic-bezier(.55, .1, .35, 1) !important; }
.js .carnet.est-signe .signature .s1 { transition-delay: 1.7s; }
.js .carnet.est-signe .signature .s2 { transition-delay: 3.05s; transition-duration: .7s !important; }
@media (prefers-reduced-motion: reduce) {
  .js .carnet [data-trace] { stroke-dashoffset: 0; transition: none !important; }
}
@media (max-width: 900px) {
  .registre__in { grid-template-columns: 1fr; }
  .carnet { transform: none; margin-bottom: 30px; }
  .carnet__mention { transform: translateX(-50%); }
}
@media (max-width: 480px) {
  .carnet { font-size: 13px; background-image: none; }
  .carnet__entete, .carnet__lieu, .carnet__date, .carnet__pied { padding-left: 0; }
  .carnet__lignes li { grid-template-columns: 22px 1fr; }
  .carnet__lignes .coche { margin-left: 0; }
  .carnet__lignes .valeur { grid-column: 2; }
}

/* ---------- Estimation en ligne ---------- */
.devis { padding: clamp(64px, 9vw, 130px) 0; background: var(--feuille); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.devis__form { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start; counter-reset: etape; }
.etape { margin: 0; padding: 0 0 34px; border: 0; border-top: 1px solid var(--encre); counter-increment: etape; }
.etape + .etape { margin-top: 10px; }
.etape > legend { float: left; width: 100%; padding: 18px 0 6px; font: 400 26px/1.15 var(--serif); font-variation-settings: "opsz" 36; }
.etape > legend .n { font: 400 12px/1 var(--mono); letter-spacing: .14em; color: var(--airelle); margin-right: 12px; vertical-align: 5px; }
.etape > legend .n::before { content: counter(etape); } /* les étapes masquées ne comptent pas */
.etape > legend + * { clear: both; }
.champ { display: block; margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.champ > legend, .champ > span, .champ__titre { display: block; margin-bottom: 9px; font: 400 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); }
.champ > legend { float: left; width: 100%; }
.champ > legend + * { clear: both; }

.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille { position: relative; }
.pastille input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pastille > span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--trait); border-radius: 2px; background: var(--feuille);
  font-size: 15px; color: var(--encre-2); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s;
}
.pastille input:hover + span { border-color: var(--encre-3); }
.pastille input:checked + span { background: var(--nuit); border-color: var(--nuit); color: var(--feuille); }
.pastille input:focus-visible + span { outline: 2px solid var(--airelle); outline-offset: 2px; }
.pastille input:disabled + span { opacity: .4; cursor: not-allowed; }

select, input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  font: 400 16px/1.4 var(--sans); color: var(--encre);
  background: var(--feuille); border: 1px solid var(--trait); border-radius: 2px;
  transition: border-color .2s;
}
select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231a2129' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; }
textarea { min-height: 110px; resize: vertical; }
select:hover, input:hover, textarea:hover { border-color: var(--encre-3); }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--plume); box-shadow: 0 0 0 3px rgba(34, 50, 90, .14); }
.champ.est-invalide input { border-color: var(--airelle); }

.curseur { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
.curseur output { font: 400 22px/1 var(--serif); min-width: 2.2em; text-align: right; font-variation-settings: "opsz" 24; }
input[type="range"] { width: 100%; accent-color: var(--plume); height: 28px; }
.aide { margin-top: 7px; font-size: 13.5px; color: var(--encre-3); }

.services-liste { border-top: 1px solid var(--trait-doux); }
.service { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 14px; padding: 15px 0; border-bottom: 1px solid var(--trait-doux); }
.service input[type="checkbox"] { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--plume); cursor: pointer; }
.service label { cursor: pointer; }
.service strong { display: block; font-weight: 500; font-size: 16px; }
.service small { display: block; margin-top: 3px; font-size: 14px; color: var(--encre-3); line-height: 1.45; }
.service select { margin-top: 10px; max-width: 320px; min-height: 42px; font-size: 15px; transition: opacity .2s; }
.service input[type="checkbox"]:not(:checked) ~ select { opacity: .5; }

/* Un service à l'heure : tarif et nombre d'heures à droite */
.service--heures { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; }
.service__reglage { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; transition: opacity .2s; }
.service input[type="checkbox"]:not(:checked) ~ .service__reglage { opacity: .5; }
.service__tarif { font: 400 12.5px/1.2 var(--mono); color: var(--plume); white-space: nowrap; }
.service__option { grid-column: 2; }
.service--prix { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; }
.service--prix .service__tarif { padding-top: 3px; text-align: right; }
.service input[type="checkbox"]:not(:checked) ~ .service__tarif { opacity: .5; }
.service.est-indisponible { opacity: .45; }
.service.est-indisponible small::after { content: " Indiquez d'abord le nombre d'enfants."; color: var(--airelle); }
@media (max-width: 560px) {
  .service--prix { grid-template-columns: 22px minmax(0, 1fr); }
  .service--prix .service__tarif { grid-column: 2; text-align: left; margin-top: 6px; }
}
.heures { display: inline-flex; align-items: center; border: 1px solid var(--trait); border-radius: 2px; background: var(--feuille); }
.heures input { width: 3.6em; min-height: 40px; padding: 6px 2px 6px 8px; border: 0; background: transparent; font: 400 16px/1 var(--sans); color: var(--encre); text-align: right; }
.heures input:focus { box-shadow: none; }
.heures:focus-within { border-color: var(--plume); box-shadow: 0 0 0 3px rgba(34, 50, 90, .14); }
.heures__unite { padding: 0 10px 0 4px; font-size: 15px; color: var(--encre-3); }
.heures button { width: 36px; min-height: 40px; border: 0; background: transparent; font: 400 20px/1 var(--sans); color: var(--encre-2); cursor: pointer; }
.heures button:hover { background: var(--papier-2); color: var(--encre); }
.heures button:first-child { border-right: 1px solid var(--trait-doux); }
.heures button:last-child { border-left: 1px solid var(--trait-doux); }
.js .heures input { -moz-appearance: textfield; }
.js .heures input::-webkit-outer-spin-button, .js .heures input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 560px) {
  .service--heures { grid-template-columns: 22px minmax(0, 1fr); }
  .service__reglage { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 10px; }
}
.services-liste--colonnes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
@media (max-width: 560px) { .services-liste--colonnes { grid-template-columns: 1fr; } }
.service--pieces { grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; align-items: center; }
.heures--nombre input { width: 2.8em; padding: 6px 2px; text-align: center; }
@media (max-width: 560px) {
  .service--pieces .service__reglage { grid-column: auto; flex-direction: column; align-items: flex-end; justify-content: flex-start; margin-top: 0; }
}
.champ > legend small { margin-left: 8px; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 13px; color: var(--encre-3); }
.aide--haut { margin: 4px 0 14px; }
.champ--court select { max-width: 320px; }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grille-2 .plein { grid-column: 1 / -1; }
.requis { color: var(--airelle); }
.mention { margin-top: 18px; font-size: 13.5px; color: var(--encre-3); }
.mention a { color: var(--encre-2); }
.envoyer { margin-top: 22px; }
.erreur { margin-top: 14px; color: var(--airelle); font-size: 14.5px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .grille-2 { grid-template-columns: 1fr; } }

.estimation { position: sticky; top: calc(var(--entete-h) + 24px); }
.estimation__papier {
  background: #fff; border: 1px solid var(--trait);
  box-shadow: 0 30px 60px -36px rgba(19, 27, 37, .45);
  padding: 26px 26px 24px; font: 400 13.5px/1.45 var(--mono);
}
.estimation__entete { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--encre); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
.estimation__bloc + .estimation__bloc { margin-top: 34px; }
.estimation__titre { margin-top: 16px; font: 400 26px/1.1 var(--serif); font-variation-settings: "opsz" 36; }
.estimation__bien { margin-top: 6px; color: var(--encre-2); }
.estimation__lignes { width: 100%; margin-top: 16px; border-collapse: collapse; }
.estimation__lignes td { padding: 10px 0; border-top: 1px dotted var(--trait); vertical-align: top; }
.estimation__lignes td:last-child { text-align: right; white-space: nowrap; padding-left: 14px; color: var(--plume); }
.estimation__lignes small { display: block; color: var(--encre-3); font-size: 12px; margin-top: 2px; }
.estimation__vide { color: var(--encre-3); padding: 14px 0; }
.estimation__total { margin-top: 6px; padding-top: 14px; border-top: 2px solid var(--encre); }
.estimation__total span { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); }
.estimation__total strong { display: block; margin-top: 8px; font: 400 32px/1.05 var(--serif); font-variation-settings: "opsz" 36; color: var(--encre); }
.estimation__total strong small { display: block; font: 400 12px/1.3 var(--mono); color: var(--encre-3); margin-top: 4px; }
.estimation__note { margin-top: 16px; font: 400 13px/1.5 var(--sans); color: var(--encre-3); }
.estimation .bouton { width: 100%; margin-top: 18px; }
.estimation__aide { margin-top: 14px; font: 400 14px/1.5 var(--sans); color: var(--encre-2); text-align: center; }
.estimation__aide a { color: var(--encre); }
@media (max-width: 960px) {
  /* Sur téléphone et tablette : l'estimation s'intercale entre les services et les coordonnées */
  .devis__form { display: flex; flex-direction: column; gap: 0; }
  .devis__etapes { display: contents; }
  .estimation { position: static; order: 2; margin: 6px 0 40px; }
  #coordonnees { order: 3; }
}

/* ---------- La nuit ---------- */
.nuit { position: relative; color: var(--feuille); background: var(--nuit); overflow: hidden; }
.nuit__photo { position: absolute; inset: 0; margin: 0; }
.nuit__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.nuit__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19, 27, 37, .92) 0%, rgba(19, 27, 37, .7) 45%, rgba(19, 27, 37, .2) 100%); }
.nuit__in { position: relative; padding: clamp(80px, 12vw, 170px) var(--gouttiere); }
.nuit .etiquette { color: var(--givre); }
.nuit h2 { margin-top: 22px; max-width: 12em; font-size: clamp(2.4rem, 5vw, 4.2rem); }
.nuit h2 em { color: var(--givre); }
.nuit p.texte { margin-top: 22px; max-width: 30em; color: var(--givre); font-size: 18px; }
.nuit__tel { display: inline-block; margin-top: 34px; font: 400 clamp(1.8rem, 3.4vw, 2.7rem)/1 var(--serif); color: var(--feuille); text-decoration: none; font-variation-settings: "opsz" 48; border-bottom: 1px solid rgba(251, 250, 247, .4); padding-bottom: 6px; }
.nuit__tel:hover { border-bottom-color: var(--feuille); }
.nuit__wa { display: block; margin-top: 16px; font: 400 13px/1.4 var(--mono); letter-spacing: .08em; color: var(--givre); }
.nuit__wa a { color: var(--feuille); }
@media (max-width: 720px) { .nuit__photo::after { background: rgba(19, 27, 37, .78); } }

/* ---------- Secteur ---------- */
.secteur { padding: clamp(64px, 9vw, 130px) 0; }
.secteur__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.secteur figure { margin: 0; }
.secteur img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.secteur h2 { margin-top: 22px; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.secteur h2 em { color: var(--plume); }
.secteur__texte > p:not(.etiquette) { margin-top: 20px; color: var(--encre-2); }
.communes { margin-top: 28px; border-top: 1px solid var(--encre); }
.communes li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.communes li span:first-child { font: 400 20px/1.25 var(--serif); font-variation-settings: "opsz" 24; }
.communes li span:last-child { font: 400 12.5px/1.6 var(--mono); color: var(--encre-3); text-align: right; }
@media (max-width: 860px) { .secteur__in { grid-template-columns: 1fr; } }

/* ---------- Questions ---------- */
.questions { padding: 0 0 clamp(64px, 9vw, 130px); }
.questions__liste { border-top: 1px solid var(--encre); max-width: 920px; }
.questions details { border-bottom: 1px solid var(--trait); }
.questions summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
  padding: 22px 0; font: 400 clamp(1.2rem, 2vw, 1.5rem)/1.3 var(--serif); font-variation-settings: "opsz" 30;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; font: 300 26px/1 var(--sans); color: var(--encre-3); transition: transform .25s ease; flex: none; }
.questions details[open] summary::after { transform: rotate(45deg); color: var(--airelle); }
.questions details p { padding: 0 0 24px; max-width: 46em; color: var(--encre-2); }

/* ---------- Contact ---------- */
.contact { padding: clamp(64px, 8vw, 110px) 0; background: var(--papier-2); border-top: 1px solid var(--trait); }
.contact__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.contact__photo { margin: 0; }
.contact__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.contact__droite .contact__moyens { margin-top: 36px; }
.contact h2 { margin-top: 22px; font-size: clamp(2.3rem, 4.8vw, 4rem); }
.contact h2 em { color: var(--plume); }
.contact__texte > p:not(.etiquette) { margin-top: 20px; color: var(--encre-2); max-width: 30em; }
.contact__moyens { border-top: 1px solid var(--encre); }
.contact__moyens a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--trait); text-decoration: none; transition: color .2s, padding .25s ease; }
.contact__moyens a:hover { color: var(--airelle); padding-left: 6px; }
.contact__moyens span:first-child { font: 400 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); }
.contact__moyens span:last-child { font: 400 clamp(1.25rem, 2.2vw, 1.6rem)/1.2 var(--serif); font-variation-settings: "opsz" 30; text-align: right; }
@media (max-width: 860px) { .contact__in { grid-template-columns: 1fr; } }

/* ---------- Pied de page ---------- */
.pied { background: var(--nuit); color: var(--givre); padding: 56px 0 34px; font-size: 14.5px; }
.pied__haut { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; padding-bottom: 34px; border-bottom: 1px solid rgba(215, 222, 229, .18); }
.pied .marque { color: var(--feuille); align-self: flex-start; }
.pied .marque__trait path { stroke: var(--givre); }
.pied .marque__nom em { color: var(--givre); }
.pied .marque__metier { color: rgba(215, 222, 229, .65); }
.pied__colonnes { display: flex; flex-wrap: wrap; gap: 20px 56px; }
.pied__colonnes p { line-height: 1.8; }
.pied__colonnes .etiquette { color: rgba(215, 222, 229, .6); margin-bottom: 8px; }
.pied a { color: var(--feuille); text-decoration: none; }
.pied a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 22px; font: 400 12px/1.6 var(--mono); letter-spacing: .04em; color: rgba(215, 222, 229, .65); }

/* ---------- Apparitions au défilement ---------- */
.js [data-apparait] { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.js [data-apparait].est-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-apparait] { opacity: 1; transform: none; transition: none; } }

/* ---------- Pages simples (mentions, merci, 404) ---------- */
.page-simple { padding: clamp(48px, 8vw, 110px) 0; }
.page-simple h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); margin-top: 20px; }
.page-simple h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-top: 52px; padding-top: 18px; border-top: 1px solid var(--encre); }
.page-simple h3 { font-size: 1.3rem; margin-top: 28px; font-variation-settings: "opsz" 24; }
.page-simple p, .page-simple li { margin-top: 12px; color: var(--encre-2); max-width: 46em; }
.page-simple ul { list-style: disc; padding-left: 22px; }
.page-simple .date { margin-top: 12px; font: 400 12.5px/1.4 var(--mono); color: var(--encre-3); }
.page-simple .note { margin-top: 44px; padding: 16px 18px; background: var(--papier-2); border-left: 2px solid var(--airelle); color: var(--encre); }
.page-simple .bref { margin-top: 20px; padding: 18px 20px; background: var(--feuille); border: 1px solid var(--trait); }
.page-simple .bref li { margin-top: 6px; }
.a-completer { background: #f6e3cf; color: var(--encre); padding: 0 4px; }