/* Villa Roméo · le site de plusieurs pages (20 octobre)
   Même direction que l'accueil (ivoire, or champagne, nuit étoilée, cinq couleurs des parfums, tirages à passe-partout,
   EB Garamond et Readex Pro). Ici : l'en-tête et le menu communs, puis chaque page. */

/* ============ en-tête et menu ============ */
.entete-tel { width: 44px; padding: 0; justify-content: center; flex: none; }
.entete-tel .tel-long { display: none; }
.entete-tel + .entete-reserver { margin-left: 0; }
/* 23 octobre : le bouton menu est une pilule pleine vert cryptoméria avec le mot « Menu » (l'or reste à Réserver, l'encre au téléphone) */
.entete-menu { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 15px 0 14px; border-radius: 999px; border: 0; background: var(--cryptomeria); color: #FFFDF8; cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 8px 20px -12px rgba(47, 93, 74, 0.9); transition: background-color 0.3s, color 0.3s; }
.entete-menu:hover { background: #24493A; }
.entete-menu:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.burger { display: grid; gap: 5px; width: 18px; }
.burger i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; }
.burger i:last-child { width: 12px; justify-self: end; }
.menu-mot { display: inline; font: 500 0.9375rem/1 var(--texte); }
/* au téléphone étroit, pour garder le mot « Menu » : logo et badge Aperçu un peu plus petits, espaces resserrés */
@media (max-width: 419px) {
  .entete { gap: 7px; }
  .monogramme { width: 42px; }
  .logo-nom { font-size: 1.16rem; }
  .apercu { padding: 5px 6px; letter-spacing: 0.08em; font-size: 0.625rem; }
}
.entete-nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 761px) {
  .entete-tel { width: auto; padding: 0 8px; margin-left: auto; }
  .entete-tel .tel-long { display: inline; }
}
@media (min-width: 1000px) and (max-width: 1279px) { .entete-nav { display: none; } }
@media (min-width: 1280px) {
  .entete-menu { display: none; }
  .entete-nav { gap: 0; margin-left: 22px; }
  .entete-nav a { padding: 10px 10px; white-space: nowrap; }
}

.menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--nuit); color: var(--creme); overflow-y: auto; overscroll-behavior: contain; }
.menu[open] { display: flex; flex-direction: column; }
.menu::backdrop { background: rgba(12, 18, 32, 0.6); }
.menu > :not(.ciel):not(.menu-orn) { position: relative; z-index: 1; }
.menu-orn { position: absolute; right: -40px; bottom: -30px; width: 280px; opacity: 0.35; pointer-events: none; z-index: 0; }
.menu-haut { display: flex; align-items: center; justify-content: space-between; height: var(--entete-h); padding: 0 14px; border-bottom: 1px solid rgba(243, 235, 221, 0.14); }
.logo-clair .logo { color: var(--creme); }
.logo-clair .monogramme text { fill: var(--or-clair); }
.logo-clair .logo-nom { display: inline; }
.menu-fermer { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(243, 235, 221, 0.5); background: transparent; color: var(--creme); cursor: pointer; }
.menu-fermer i { position: absolute; left: 14px; right: 14px; top: 50%; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.menu-fermer i + i { transform: rotate(-45deg); }
.menu-nav { display: grid; padding: 18px 16px 8px; }
.menu-lien { display: flex; align-items: center; gap: 16px; padding: 13px 4px; text-decoration: none; border-bottom: 1px solid rgba(243, 235, 221, 0.12); }
.menu-num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 500 0.8125rem/1 var(--texte); color: var(--nuit); background: var(--c); }
.menu-txt { display: grid; gap: 3px; }
.menu-titre { font: italic 450 1.75rem/1.05 var(--titres); color: var(--creme); }
.menu-sous { font-size: 0.875rem; line-height: 1.3; color: rgba(243, 235, 221, 0.66); }
.menu-lien[aria-current="page"] .menu-titre { color: var(--or-clair); }
.menu-lien:hover .menu-titre { color: var(--or-clair); }
.menu-contact { display: grid; gap: 10px; padding: 18px 16px calc(28px + env(safe-area-inset-bottom, 0px)); margin-top: auto; }
@media (min-width: 761px) {
  .menu-haut { padding: 0 32px; }
  .menu-nav { padding: 30px 32px 10px; max-width: 720px; }
  .menu-titre { font-size: 2.3rem; }
  .menu-contact { padding: 24px 32px 40px; grid-template-columns: auto auto; justify-content: start; }
  .menu-orn { width: 460px; }
}

/* ============ pied de page commun ============ */
.pied { display: block; }
.pied-haut { display: grid; gap: 30px; }
.pied-logo .logo-nom { font-size: 2rem; display: inline; }
.pied-accroche { margin-top: 12px; max-width: 22em; font: italic 450 1.2rem/1.35 var(--titres); color: rgba(243, 235, 221, 0.86); }
.pied-col { display: grid; gap: 10px; align-content: start; justify-items: start; font-size: 0.9375rem; }
.pied-titre { font: 500 0.75rem/1.3 var(--texte); letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-clair); }
.pied-pages a { text-decoration: none; padding: 3px 0; }
.pied-pages a[aria-current="page"] { color: var(--or-clair); }
.bouton-petit { min-height: 48px; padding: 0 20px; font-size: 0.9375rem; margin-top: 4px; }
.pied-demo { margin-top: 34px; }
@media (min-width: 761px) { .pied-haut { grid-template-columns: 1.3fr 1fr 1fr 0.8fr; gap: 36px; } }

/* — la réservation en direct, dans la section de fin — */
.reserver-direct { display: flex; align-items: center; gap: 14px; color: var(--creme) !important; font-size: 0.9375rem; }
.direct-pastille { flex: none; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #DDBD62, #B48A1C 62%, #A47D16); color: var(--encre); font: 600 1.05rem/1 var(--texte); box-shadow: 0 0 0 4px rgba(217, 182, 90, 0.18); transform: rotate(-8deg); }

/* — les boutons ajoutés à l'accueil — */
.chambre-voir { justify-self: start; margin-top: 6px; }
.chambres-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.journee-suite { display: grid; gap: 16px; justify-items: start; margin-top: 40px; max-width: 760px; }
.journee-suite p { font: italic 450 1.3rem/1.35 var(--titres); }
.lieu-lien { display: grid; gap: 10px; justify-items: start; padding: 22px; border-radius: 8px; text-decoration: none; background: linear-gradient(140deg, #F3EAD8, #EDE2CB); border: 1px solid rgba(180, 138, 28, 0.35); }
.lieu-lien-titre { font: 450 1.35rem/1.25 var(--titres); }
.lieu-lien .petit-titre { margin: 0; }
.rail-fleches { flex-wrap: wrap; }
@media (min-width: 1000px) { .chambres-bas { grid-template-columns: 1.3fr 1fr; } .chambres-boutons { grid-column: 1 / -1; } }

/* ============ titres et boutons des pages ============ */
.titre-moyen { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 3.2rem); line-height: 1.08; }
h2 em, .titre-moyen em { color: var(--or-texte); }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.page-actions .bouton { flex: 1 1 auto; }
.page-actions .bouton-or { flex-grow: 1.4; }

/* ============ haut de page des pages intérieures ============ */
.page-tete { position: relative; overflow: hidden; isolation: isolate; padding: 18px 16px 56px; display: grid; gap: 30px; background-color: var(--ivoire); background-image: var(--grain); }
.page-tete > * { position: relative; z-index: 1; }
.page-tete-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-tete-texte { display: grid; gap: 18px; align-content: start; }
.page-titre { font-size: clamp(2.05rem, 1.25rem + 3.4vw, 4.2rem); line-height: 1.05; font-weight: 450; }
.page-intro { color: var(--gris); max-width: 34em; }
.page-tete-visuel { position: relative; order: -1; }
.page-tete-visuel .tirage img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
@media (min-width: 1000px) {
  .page-tete { grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; min-height: calc(100svh - var(--entete-h)); padding: 40px max(48px, calc((100% - 1344px) / 2)) 80px; }
  .page-tete-visuel { order: 2; }
}

/* — les chambres : trois tirages — */
.tete-chambres { background-image: var(--grain), radial-gradient(60% 50% at 100% 0%, rgba(194, 90, 120, 0.16), transparent 70%), radial-gradient(50% 45% at 0% 100%, rgba(94, 143, 128, 0.14), transparent 70%), radial-gradient(40% 40% at 60% 100%, rgba(201, 150, 31, 0.12), transparent 70%); }
.tete-plante { position: absolute; display: block; opacity: 0.5; }
.tete-plante .plante path { stroke-width: 0.9; opacity: 0.5; }
.tp-1 { width: 260px; right: -90px; bottom: 30%; color: var(--geranium); transform: rotate(-14deg); }
.tp-2 { width: 200px; left: -80px; bottom: -40px; color: var(--ylang); transform: rotate(20deg); }
.trio { height: clamp(260px, calc(100svh - 430px), 440px); margin-bottom: 34px; }
.trio-a { position: absolute; inset: 0 0 0 0; }
.trio-b, .trio-c { position: absolute; width: 34%; aspect-ratio: 1 / 0.9; padding: 5px; z-index: 2; }
.trio-b::after, .trio-c::after { inset: 2px; }
.trio-b img, .trio-c img { inset: 5px !important; width: calc(100% - 10px) !important; height: calc(100% - 10px) !important; }
.trio-b { right: 8px; bottom: -28px; transform: rotate(3.5deg); }
.trio-c { right: calc(34% + 16px); bottom: -22px; transform: rotate(-3deg); }
.parfums-ancres { display: flex; flex-wrap: wrap; gap: 7px; }
.parfums-ancres a { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--filet); background: var(--blanc); text-decoration: none; font: italic 500 1.1rem/1 var(--titres); transition: background-color 0.35s, color 0.35s, transform 0.35s var(--courbe); }
.parfums-ancres a i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.parfums-ancres a:hover { background: var(--c); color: #fff; transform: translateY(-2px); }
.parfums-ancres a:hover i { background: #fff; }
@media (min-width: 1000px) {
  .trio { height: min(calc(100svh - var(--entete-h) - 140px), 640px); min-height: 500px; margin: 0; }
  .trio-a { inset: 0 0 0 10%; }
  .trio-b { width: 26%; right: -16px; top: -24px; bottom: auto; }
  .trio-c { width: 26%; left: 0; right: auto; bottom: 7%; transform: rotate(-4deg); }
  .tp-1 { width: 520px; right: -150px; bottom: auto; top: -60px; }
  .tp-2 { width: 360px; left: -120px; bottom: -80px; }
}

/* — l'aperçu des cinq : des étiquettes de flacons — */
.apercu-chambres { padding: 70px 16px 70px; background-color: var(--sable); background-image: var(--grain), radial-gradient(70% 60% at 0% 0%, rgba(255, 253, 248, 0.7), transparent 70%); }
.apercu-tete { display: grid; gap: 16px; max-width: 820px; margin-bottom: 34px; }
.flacons { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: f; }
.flacons a { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 18px 20px 18px 26px; border-radius: 6px; background: var(--blanc); text-decoration: none; box-shadow: 0 14px 30px -24px rgba(33, 30, 25, 0.7); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); transition: transform 0.4s var(--courbe), box-shadow 0.4s; overflow: hidden; }
.flacons a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.flacons a:hover { transform: translateY(-3px); box-shadow: 0 22px 36px -24px rgba(33, 30, 25, 0.75); }
.flacons span { font-size: 0.9375rem; line-height: 1.3; color: var(--gris); }
.flacon-nom { grid-column: 1; font: italic 450 1.9rem/1 var(--titres) !important; color: var(--c) !important; margin-bottom: 6px; }
.flacon-prix { grid-column: 2; grid-row: 1; align-self: start; text-align: right; }
.flacon-prix b { display: block; font: 450 1.6rem/1 var(--titres); color: var(--encre); }
.apercu-note { margin-top: 22px; color: var(--gris); max-width: 40em; }
@media (min-width: 1000px) {
  .apercu-chambres { padding: 120px max(48px, calc((100% - 1344px) / 2)); }
  .flacons { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .flacons a { grid-template-columns: 1fr; padding: 26px 22px 24px; min-height: 270px; align-content: start; }
  .flacons a::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 6px; }
  .flacon-prix { grid-column: 1; grid-row: auto; text-align: left; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--filet); }
}

/* — une section par chambre — */
.piece { --c: var(--parfum); position: relative; overflow: hidden; isolation: isolate; padding: 76px 16px 76px; display: grid; gap: 40px; background-color: var(--teinte); background-image: var(--grain), radial-gradient(70% 55% at 100% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%), radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%); }
.piece[data-parfum="geranium"] { --c: var(--geranium); --teinte: #F6E6EA; }
.piece[data-parfum="camphre"] { --c: var(--camphre); --teinte: #E4EEEA; }
.piece[data-parfum="vetiver"] { --c: var(--vetiver); --teinte: #EFEADB; }
.piece[data-parfum="cryptomeria"] { --c: var(--cryptomeria); --teinte: #E1EBE4; }
.piece[data-parfum="ylang"] { --c: var(--ylang); --teinte: #F7EDD2; }
.piece > * { position: relative; z-index: 1; }
.piece-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--c); }
.piece-fil { position: absolute; width: 320px; right: -100px; top: 30px; transform: rotate(-12deg); }
.piece-fil .plante path { stroke-width: 0.9; opacity: 0.18; }
.piece-fil .plante path.fin { opacity: 0.12; }
.piece-galerie { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.piece-galerie .tirage img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
.pg-a { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.pg-b, .pg-c { aspect-ratio: 4 / 3.2; padding: 6px; }
.pg-b img, .pg-c img { inset: 6px !important; width: calc(100% - 12px) !important; height: calc(100% - 12px) !important; }
.pg-b::after, .pg-c::after { inset: 3px; }
.pg-b { transform: rotate(-1.6deg) translateY(-22px); margin-left: 6px; }
.pg-c { transform: rotate(1.8deg) translateY(-8px); margin-right: 6px; }
.pg-portrait { aspect-ratio: 3 / 4; }
.piece-texte { display: grid; gap: 14px; align-content: start; }
.piece-medaille { width: 96px; height: 96px; border-radius: 50%; background: var(--blanc); color: var(--c); display: grid; place-items: center; padding: 10px 14px 12px; box-shadow: 0 14px 30px -18px rgba(33, 30, 25, 0.55), inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent), inset 0 0 0 5px var(--blanc), inset 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent); }
.piece-medaille .plante { width: auto; height: 100%; }
.piece-num { font: 500 0.8125rem/1.3 var(--texte); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); }
.piece-nom { font: italic 450 clamp(3.4rem, 2.4rem + 4.4vw, 6rem)/0.95 var(--titres); color: var(--c); letter-spacing: -0.02em; }
.piece-legende { font: italic 400 1.15rem/1.35 var(--titres); color: var(--gris); }
.piece-texte > p:not([class]) { max-width: 32em; }
.piece-faits { display: flex; flex-wrap: wrap; gap: 8px; }
.piece-faits li { padding: 7px 13px; border-radius: 999px; background: rgba(255, 253, 248, 0.86); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); font-size: 0.9375rem; line-height: 1.2; }
.piece-faits b { color: var(--c); }
.piece-prix { display: grid; gap: 4px; padding: 16px 18px; border-radius: 6px; background: var(--blanc); border-left: 4px solid var(--c); box-shadow: 0 14px 30px -24px rgba(33, 30, 25, 0.7); max-width: 30em; }
.piece-prix b { font: 450 2rem/1 var(--titres); color: var(--encre); margin-right: 4px; }
.piece-prix-direct { font-size: 0.9375rem; color: var(--gris); }
.piece-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.piece-actions .bouton-or { flex: 1 1 auto; }
@media (min-width: 761px) { .piece { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1000px) {
  .piece { grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; padding: 130px max(48px, calc((100% - 1344px) / 2)); }
  .piece-inverse .piece-galerie { order: 2; }
  .piece-fil { width: 560px; right: -140px; top: -40px; }
  .piece-inverse .piece-fil { right: auto; left: -160px; transform: rotate(160deg) scaleX(-1); }
  .piece-medaille { width: 120px; height: 120px; }
  .pg-b { transform: rotate(-2deg) translate(-20px, -46px); }
  .pg-c { transform: rotate(2deg) translate(16px, -28px); }
}

/* — dans chaque chambre : la nuit étoilée — */
.confort { position: relative; overflow: hidden; isolation: isolate; background: var(--nuit); color: var(--creme); padding: 84px 16px 80px; display: grid; gap: 34px; }
.confort > :not(.ciel) { position: relative; z-index: 1; }
.confort-tete { display: grid; gap: 16px; max-width: 820px; }
.confort .surtitre, .confort h2 em { color: var(--or-clair); }
.confort-corps { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: end; }
.confort-photo { background: #243042; }
.confort-photo::after { border-color: rgba(217, 182, 90, 0.5); }
.cp-a { aspect-ratio: 4 / 3; }
.cp-b { aspect-ratio: 3 / 4.4; transform: rotate(2deg); }
.confort-photo img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
.confort-liste { grid-column: 1 / -1; display: grid; gap: 0; margin-top: 18px; }
.confort-liste li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid rgba(243, 235, 221, 0.14); color: rgba(243, 235, 221, 0.82); font-size: 0.9375rem; }
.confort-liste b { font: italic 450 1.4rem/1.1 var(--titres); color: var(--creme); }
.confort-avis p { font: italic 400 clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem)/1.15 var(--titres); max-width: 24em; }
.confort-avis footer { margin-top: 12px; font-size: 0.875rem; color: rgba(243, 235, 221, 0.7); }
@media (min-width: 1000px) {
  .confort { padding: 130px max(48px, calc((100% - 1344px) / 2)); }
  .confort-corps { grid-template-columns: 1.3fr 0.7fr 1.4fr; gap: 28px; align-items: center; }
  .confort-liste { grid-column: auto; margin: 0; grid-template-columns: 1fr 1fr; column-gap: 28px; }
}

/* ============ le séjour ============ */
.tete-sejour { background-image: var(--grain),
  repeating-conic-gradient(from 196deg at 96% -8%, rgba(255, 214, 140, 0.13) 0deg 3deg, transparent 3deg 9deg),
  radial-gradient(70% 60% at 96% -6%, rgba(255, 206, 120, 0.5), rgba(255, 220, 160, 0.1) 55%, transparent 75%),
  linear-gradient(170deg, #FFF4DF 0%, #FCF5E8 55%, #F8EEDD 100%); }
.duo { height: clamp(250px, calc(100svh - 440px), 430px); margin-bottom: 30px; }
.duo-a { position: absolute; inset: 0; }
.duo-b { position: absolute; width: 40%; right: 8px; bottom: -30px; padding: 5px 5px 0; transform: rotate(3deg); z-index: 2; }
.duo-b::after { inset: 2px; }
.duo-b img { position: static !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 0.82; }
.duo-b figcaption { padding: 5px 2px 6px; font-size: 0.75rem; text-align: center; color: var(--encre); letter-spacing: 0.02em; }
.duo-orn { position: absolute; left: -12px; top: -18px; width: 130px; z-index: 3; pointer-events: none; }
@media (min-width: 1000px) {
  .duo { height: min(calc(100svh - var(--entete-h) - 140px), 640px); min-height: 500px; margin: 0; }
  .duo-a { inset: 0 0 0 8%; }
  .duo-b { width: 30%; right: -18px; bottom: 6%; }
  .duo-orn { width: 200px; left: 2%; top: -40px; }
}

/* — la frise des horaires — */
.horaires-jour { padding: 76px 16px 70px; background-color: var(--ivoire); background-image: var(--grain), linear-gradient(90deg, rgba(255, 214, 140, 0.18), rgba(126, 200, 210, 0.14) 50%, rgba(36, 48, 66, 0.12)); }
.horaires-tete { display: grid; gap: 16px; max-width: 820px; margin-bottom: 34px; }
.frise { position: relative; padding: 12px 0 0; --deb: 104px; }
.frise-heures { display: none; }
.frise-lignes { display: grid; gap: 18px; }
.frise-lignes li { display: grid; grid-template-columns: 1fr; gap: 8px; }
.frise-nom { font: italic 450 1.35rem/1.1 var(--titres); }
.frise-barre { position: relative; height: 12px; border-radius: 12px; background: rgba(33, 30, 25, 0.08); overflow: hidden; }
.frise-barre i { position: absolute; top: 0; bottom: 0; left: calc(var(--de) / 14 * 100%); width: max(10px, calc((var(--a) - var(--de)) / 14 * 100%)); border-radius: 12px; background: var(--c); transform-origin: left; }
.frise-h { font-size: 0.9375rem; color: var(--gris); }
.frise-maintenant { position: absolute; top: 0; bottom: -8px; width: 2px; background: var(--encre); border-radius: 2px; }
.frise-maintenant::before { content: attr(data-libelle); position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px); white-space: nowrap; font: 500 0.75rem/1 var(--texte); background: var(--encre); color: var(--ivoire); padding: 4px 8px; border-radius: 999px; }
.frise-echelle { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--gris); margin-top: 4px; }
@media (min-width: 761px) {
  .frise { --deb: 220px; padding-top: 34px; }
  .frise-heures { display: flex; justify-content: space-between; margin-left: var(--deb); font-size: 0.8125rem; color: var(--gris); border-bottom: 1px solid var(--filet); padding-bottom: 8px; margin-bottom: 16px; }
  .frise-lignes li { grid-template-columns: var(--deb) 1fr; align-items: center; column-gap: 0; }
  .frise-h { grid-column: 2; }
  .frise-maintenant { left: calc(var(--deb) + (100% - var(--deb)) * var(--t)); }
}
@media (max-width: 760px) { .frise-maintenant { display: none; } }
@media (min-width: 1000px) { .horaires-jour { padding: 120px max(48px, calc((100% - 1344px) / 2)); } }

/* — les blocs du séjour — */
.bloc { position: relative; overflow: hidden; isolation: isolate; padding: 76px 16px; display: grid; gap: 34px; }
.bloc > :not(.ciel) { position: relative; z-index: 1; }
.bloc-photos { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: end; }
.bloc-photos .tirage img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
.bp-a { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.bp-b { grid-column: 2; aspect-ratio: 4 / 3.2; padding: 6px; transform: rotate(2.5deg) translateY(-40px); margin-bottom: -40px; }
.bp-b::after { inset: 3px; }
.bp-b img { inset: 6px !important; width: calc(100% - 12px) !important; height: calc(100% - 12px) !important; }
.bp-portrait { aspect-ratio: 3 / 4; }
.bloc-texte { display: grid; gap: 16px; align-content: start; }
.bloc-texte > p:not([class]) { max-width: 34em; }
.bloc-heure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 0.9375rem; color: var(--gris); }
.bloc-heure span { font: italic 500 1.6rem/1 var(--titres); color: var(--or-texte); }
.bloc-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.bloc-pastilles li { padding: 7px 13px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--filet); font-size: 0.9375rem; line-height: 1.2; }
.bloc-avis { border-left: 2px solid var(--or); padding: 2px 0 2px 16px; }
.bloc-avis p { font: italic 450 1.2rem/1.38 var(--titres); }
.bloc-avis footer { font-size: 0.875rem; margin-top: 6px; color: var(--gris); }
.bloc-matin { background-color: #FCF5E8; background-image: var(--grain), radial-gradient(60% 50% at 0% 0%, rgba(255, 206, 120, 0.4), transparent 70%), linear-gradient(170deg, #FFF4DF, #F8EEDD); }
.bloc-table { background: var(--nuit); color: var(--creme); }
.bloc-table .tirage { background: #243042; }
.bloc-table .tirage::after { border-color: rgba(217, 182, 90, 0.5); }
.bloc-table .bloc-heure { color: rgba(243, 235, 221, 0.75); }
.bloc-table .bloc-heure span, .bloc-table h2 em { color: var(--or-clair); }
.bloc-table .bloc-avis footer { color: rgba(243, 235, 221, 0.7); }
.bloc-table .bloc-avis { border-color: var(--or-clair); }
.prix-geant { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.prix-geant b { font: 400 clamp(4rem, 3rem + 5vw, 6.4rem)/0.9 var(--titres); letter-spacing: -0.03em; color: var(--or-clair); }
.prix-geant span { font-size: 0.9375rem; max-width: 16em; }
.menu-table { display: grid; gap: 0; border-top: 1px solid rgba(243, 235, 221, 0.18); }
.menu-table li { padding: 12px 0; border-bottom: 1px solid rgba(243, 235, 221, 0.18); display: grid; gap: 2px; color: rgba(243, 235, 221, 0.86); font-size: 0.9375rem; }
.menu-table span { font: italic 450 1.35rem/1.1 var(--titres); color: var(--creme); }
.bloc-eau { background-color: #E3F1F2; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M0 22c20-10 38 8 58-2s34-14 52-2 40 6 58-4 46-6 72 4'/%3E%3Cpath d='M-6 64c24-8 40 10 62 0s30-12 50 0 44 8 66-4 44-4 74 6'/%3E%3Cpath d='M4 104c18-8 34 6 56-4s36-10 54 2 38 6 60-4 40-2 66 6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 120px,
  radial-gradient(80% 70% at 100% 0%, rgba(126, 200, 210, 0.4), transparent 70%), linear-gradient(170deg, #EAF6F6, #D2E9EC); }
.bloc-eau .bloc-photos { order: -1; }
.massages { position: relative; overflow: hidden; isolation: isolate; padding: 76px 16px; display: grid; gap: 26px; background-color: #F7EDD2; background-image: var(--grain), radial-gradient(60% 60% at 100% 100%, rgba(194, 90, 120, 0.16), transparent 70%), radial-gradient(60% 50% at 0% 0%, rgba(201, 150, 31, 0.2), transparent 70%); }
.massages > * { position: relative; z-index: 1; }
.massages-plante { position: absolute; z-index: 0; width: 230px; right: -50px; top: 20px; color: var(--ylang); opacity: 0.85; pointer-events: none; }
.massages-plante .plante path { stroke-width: 1.1; }
.massages-texte { display: grid; gap: 16px; max-width: 760px; }
.massages-texte > p:not(.surtitre) { max-width: 34em; }
.massages-prix { display: grid; gap: 18px; justify-items: start; padding: 24px 22px; border-radius: 8px; background: var(--blanc); border: 1px solid rgba(201, 150, 31, 0.4); box-shadow: 0 20px 40px -30px rgba(33, 30, 25, 0.7); max-width: 420px; transform: rotate(-1.2deg); }
.massages-prix .prix-geant b { color: var(--or-texte); }
.espaces { padding: 76px 16px; background-color: var(--ivoire); background-image: var(--grain), radial-gradient(50% 40% at 100% 0%, rgba(47, 93, 74, 0.1), transparent 70%); }
.espaces-tete { display: grid; gap: 16px; max-width: 820px; margin-bottom: 34px; }
.espaces-liste { display: grid; gap: 34px; }
.espace { display: grid; gap: 12px; }
.espace .tirage { aspect-ratio: 3 / 2; }
.espace .tirage img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
.espace h3 { font: italic 450 1.9rem/1.05 var(--titres); color: var(--cryptomeria); }
.espace p { color: var(--gris); max-width: 30em; }
.espaces-note { margin-top: 34px; font: italic 450 1.25rem/1.35 var(--titres); }
@media (min-width: 761px) { .bloc, .massages, .espaces, .horaires-jour, .apercu-chambres { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1000px) {
  .bloc { grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; padding: 130px max(48px, calc((100% - 1344px) / 2)); }
  .bloc-eau .bloc-photos { order: 2; }
  .bp-b { transform: rotate(2.5deg) translate(30px, -70px); margin-bottom: -70px; }
  .massages { grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; padding: 130px max(48px, calc((100% - 1344px) / 2)); }
  .massages-plante { width: 420px; right: 2%; top: auto; bottom: -60px; opacity: 0.6; }
  .espaces { padding: 130px max(48px, calc((100% - 1344px) / 2)); }
  .espaces-liste { grid-template-columns: repeat(3, 1fr); gap: 36px; align-items: start; }
  .espace-decale { margin-top: 70px; }
}

/* ============ les alentours ============ */
.tete-alentours { background-color: #F3EAD8; background-image: var(--grain),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23B48A1C' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M-20 80c60-30 120 20 180-6s110-50 170-10 80 30 110 20'/%3E%3Cpath d='M-20 120c60-30 120 24 180-2s110-46 170-6 80 30 110 20'/%3E%3Cpath d='M-20 160c70-24 120 26 180 0s110-40 170-2 80 28 110 18'/%3E%3Cpath d='M-20 230c50-40 140 10 200-14s100-30 160 6 60 20 80 14'/%3E%3Cpath d='M-20 270c50-36 140 14 200-10s100-26 160 8 60 22 80 16'/%3E%3Cpath d='M-20 340c80-20 130 30 210 4s120-20 160 10 50 10 70 6'/%3E%3Cpath d='M-20 380c80-18 130 32 210 8s120-18 160 12 50 10 70 6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 420px 420px; }
.alentours-visuel { height: clamp(250px, calc(100svh - 470px), 430px); margin-bottom: 20px; }
.al-photo { position: absolute; inset: 0; }
.boussole { position: absolute; width: 96px; height: 96px; left: -6px; bottom: -34px; z-index: 2; border-radius: 50%; background: var(--blanc); box-shadow: 0 14px 30px -18px rgba(33, 30, 25, 0.6); padding: 6px; }
.boussole svg { width: 100%; height: 100%; overflow: visible; }
.boussole circle { fill: none; stroke: var(--or); stroke-width: 1.4; }
.boussole circle.fin { stroke-width: 0.8; stroke-dasharray: 2 4; }
.boussole .aiguille { fill: var(--geranium); transform-origin: 60px 60px; }
.boussole text { font: 600 11px var(--texte); fill: var(--encre); text-anchor: middle; }
@media (min-width: 1000px) {
  .alentours-visuel { height: min(calc(100svh - var(--entete-h) - 160px), 600px); min-height: 480px; margin: 0; }
  .al-photo { inset: 0 0 0 8%; }
  .boussole { width: 150px; height: 150px; left: 0; bottom: -40px; }
}
.rayons { padding: 76px 16px; background-color: var(--ivoire); background-image: var(--grain), radial-gradient(60% 50% at 0% 100%, rgba(47, 93, 74, 0.12), transparent 70%); }
.rayons-tete { display: grid; gap: 16px; max-width: 820px; margin-bottom: 30px; }
.rayons-corps { display: grid; gap: 40px; }
.rayons-carte { position: relative; }
.carte-alentours .carte-rayon { fill: none; stroke-width: 1.4; stroke-dasharray: 0.006 0.008; }
.carte-rayon.r1 { stroke: var(--geranium); fill: rgba(194, 90, 120, 0.06); }
.carte-rayon.r2 { stroke: var(--camphre); }
.carte-rayon.r3 { stroke: var(--cryptomeria); }
.et-g { transform: translate(calc(-100% - 12px), -50%); }
.rayons-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 0.875rem; color: var(--gris); }
.rayons-legende li { display: flex; align-items: center; gap: 8px; }
.rayons-legende li::before { content: ""; width: 18px; height: 2px; border-top: 2px dotted currentColor; }
.rayons-legende .l1 { color: var(--geranium); } .rayons-legende .l2 { color: var(--camphre); } .rayons-legende .l3 { color: var(--cryptomeria); }
.cercles { display: grid; gap: 22px; }
.cercle { --c: var(--geranium); position: relative; padding: 22px 20px 12px; border-radius: 10px; background: var(--blanc); box-shadow: 0 20px 40px -32px rgba(33, 30, 25, 0.7); border-top: 4px solid var(--c); }
.cercle.c-2 { --c: var(--camphre); } .cercle.c-3 { --c: var(--cryptomeria); }
.cercle-temps { display: flex; align-items: baseline; gap: 10px; font-size: 0.9375rem; color: var(--gris); margin-bottom: 8px; }
.cercle-temps span { font: 400 3.2rem/0.9 var(--titres); color: var(--c); letter-spacing: -0.02em; }
.cercle li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--filet); font-size: 0.9375rem; color: var(--gris); }
.cercle li:last-child { border-bottom: 0; }
.cercle li b { font: 450 1.3rem/1.2 var(--titres); color: var(--encre); }
.conseils { position: relative; overflow: hidden; isolation: isolate; padding: 76px 16px; display: grid; gap: 34px; background-color: #E5EEEA; background-image: var(--grain), radial-gradient(70% 60% at 100% 0%, rgba(255, 253, 248, 0.7), transparent 70%), linear-gradient(170deg, #EAF1ED, #DCE8E2); }
.conseils > * { position: relative; z-index: 1; }
.conseils-fond { position: absolute; z-index: 0; width: 360px; right: -80px; top: -40px; opacity: 0.55; pointer-events: none; }
.conseils-photo { aspect-ratio: 3 / 2; }
.conseils-photo img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
.conseils-texte { display: grid; gap: 18px; align-content: start; }
.conseils-texte > p:not(.surtitre) { max-width: 34em; }
.grande-citation p { font: italic 400 clamp(1.7rem, 1.2rem + 2vw, 2.8rem)/1.12 var(--titres); }
.grande-citation footer, .petite-citation footer { margin-top: 10px; font-size: 0.875rem; color: var(--gris); font-weight: 500; }
.petite-citation { background: var(--blanc); padding: 18px 20px; border-radius: 4px; border-left: 4px solid var(--cryptomeria); transform: rotate(-1.2deg); max-width: 28em; box-shadow: 0 18px 36px -28px rgba(33, 30, 25, 0.7); }
.petite-citation p { font: italic 450 1.2rem/1.35 var(--titres); }
@media (min-width: 761px) { .rayons, .conseils { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1000px) {
  .rayons { padding: 130px max(48px, calc((100% - 1344px) / 2)); }
  .rayons-corps { grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
  .rayons-carte { position: sticky; top: calc(var(--entete-h) + 30px); }
  .conseils { grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; padding: 130px max(48px, calc((100% - 1344px) / 2)); }
  .conseils-fond { width: 620px; right: -120px; top: -90px; }
}

/* ============ infos pratiques ============ */
.tete-infos { background-color: var(--sable); background-image: var(--grain), radial-gradient(60% 50% at 100% 0%, rgba(255, 253, 248, 0.6), transparent 70%); }
.infos-eventail { position: absolute; width: 520px; right: -200px; bottom: -120px; opacity: 0.5; }
.monogramme.filigrane { width: 100%; }
.monogramme.filigrane .eventail path { fill: none; stroke: var(--or); stroke-width: 0.4; opacity: 0.6; }
.monogramme.filigrane text { fill: none; stroke: var(--or); stroke-width: 0.4; opacity: 0.5; }
.infos-visuel { height: clamp(250px, calc(100svh - 470px), 430px); margin-bottom: 26px; }
.infos-photo { position: absolute; inset: 0; }
.cle-tag { position: absolute; z-index: 2; right: 14px; bottom: -32px; width: 116px; height: 64px; border-radius: 14px 34px 34px 14px; background: linear-gradient(135deg, #C9A35A, #9C7631); color: var(--encre); display: flex; align-items: center; gap: 10px; padding: 0 14px 0 12px; box-shadow: 0 14px 26px -14px rgba(33, 30, 25, 0.7); transform: rotate(-8deg); }
.cle-tag .cle-trou { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sable); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); }
.cle-txt { font: italic 600 1.15rem/1 var(--titres); color: #2B2216; }
@media (min-width: 1000px) {
  .infos-visuel { height: min(calc(100svh - var(--entete-h) - 160px), 600px); min-height: 480px; margin: 0; }
  .infos-photo { inset: 0 0 0 8%; }
  .cle-tag { width: 160px; height: 84px; right: -18px; bottom: 8%; }
  .cle-txt { font-size: 1.5rem; }
}
.etiquettes-heures { padding: 76px 16px; background-color: var(--ivoire); background-image: var(--grain), repeating-linear-gradient(115deg, rgba(180, 138, 28, 0.05) 0 1px, transparent 1px 22px); }
.eh-tete { display: grid; gap: 16px; max-width: 820px; margin-bottom: 34px; }
.cles { display: grid; gap: 20px; }
.cle { position: relative; display: grid; gap: 8px; padding: 26px 22px 24px 64px; border-radius: 10px 40px 40px 10px; background: var(--blanc); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 18px 36px -28px rgba(33, 30, 25, 0.7); }
.cle:nth-child(2) { transform: rotate(-1deg); }
.cle:nth-child(3) { transform: rotate(0.8deg); }
.cle > .cle-trou { position: absolute; left: 20px; top: 28px; width: 18px; height: 18px; border-radius: 50%; background: var(--ivoire); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); }
.horloge { position: absolute; right: 18px; top: 18px; width: 54px; height: 54px; }
.horloge circle { fill: none; stroke: var(--c); stroke-width: 1.6; }
.horloge path { stroke: var(--encre); stroke-width: 2.4; stroke-linecap: round; }
.horloge .aig-m { stroke-width: 1.6; }
.cle-titre { font: italic 450 1.7rem/1.05 var(--titres); color: var(--c); padding-right: 64px; }
.cle-h { font: 500 1.1rem/1.2 var(--texte); }
.cle p:last-child { color: var(--gris); font-size: 0.9375rem; }
.conditions { padding: 76px 16px; background-color: #F7EEDC; background-image: var(--grain), radial-gradient(60% 50% at 0% 0%, rgba(255, 253, 248, 0.7), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(140, 122, 58, 0.14), transparent 70%); }
.conditions-tete { display: grid; gap: 16px; max-width: 820px; margin-bottom: 30px; }
.delai { margin-bottom: 34px; }
.delai-barre { display: grid; grid-template-columns: 2fr 1fr; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 30px -24px rgba(33, 30, 25, 0.7); }
.delai-barre > span { display: grid; gap: 2px; padding: 14px 14px; font-size: 0.875rem; line-height: 1.3; }
.delai-barre b { font: italic 500 1.2rem/1.1 var(--titres); }
.delai-libre { background: var(--camphre); color: #fff; }
.delai-du { background: var(--encre); color: var(--creme); }
.delai-reperes { display: grid; grid-template-columns: 2fr 1fr 0fr; margin-top: 8px; font-size: 0.8125rem; color: var(--gris); }
.delai-reperes span:nth-child(2) { transform: translateX(-50%); }
.delai-reperes span:last-child { white-space: nowrap; transform: translateX(-100%); }
.conditions-grille { display: grid; gap: 16px; }
.cond { position: relative; display: grid; gap: 12px; justify-items: start; padding: 22px 20px; border-radius: 8px; background: var(--blanc); border: 1px solid var(--filet); }
.cond h3 { font: italic 450 1.7rem/1.05 var(--titres); }
.cond p { color: var(--gris); font-size: 0.9375rem; }
.cond b { color: var(--encre); }
.cond-direct { background: var(--nuit); color: var(--creme); border-color: transparent; padding-right: 92px; }
.cond-direct p { color: rgba(243, 235, 221, 0.82); }
.cond-direct h3 { color: var(--or-clair); }
.cond-direct .direct-pastille { position: absolute; right: 16px; top: 16px; }
.vie { position: relative; overflow: hidden; isolation: isolate; padding: 76px 16px; background-color: #E1EBE4; background-image: var(--grain), radial-gradient(70% 60% at 100% 0%, rgba(255, 253, 248, 0.6), transparent 70%); }
.vie > * { position: relative; z-index: 1; }
.vie-orn { position: absolute; z-index: 0; width: 240px; right: -50px; bottom: -40px; opacity: 0.7; pointer-events: none; }
.vie-tete { display: grid; gap: 16px; max-width: 820px; margin-bottom: 26px; }
.vie-liste { display: grid; gap: 0; max-width: 900px; }
.vie-liste li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid rgba(47, 93, 74, 0.2); }
.vie-n { font: italic 450 1.6rem/1 var(--titres); color: var(--cryptomeria); }
.vie-liste p { color: var(--gris); }
.vie-liste b { color: var(--encre); font-weight: 500; }
.acces { padding: 76px 16px; display: grid; gap: 34px; background-color: var(--ivoire); background-image: var(--grain); }
.acces-texte { display: grid; gap: 16px; align-content: start; }
.acces-adresse b { font: 450 1.4rem/1.2 var(--titres); }
.acces-liste { display: grid; gap: 8px; }
.acces-liste li { display: flex; gap: 10px; color: var(--gris); }
.acces-liste li::before { content: "✦"; color: var(--or); font-size: 0.7rem; padding-top: 6px; }
.questions { padding: 76px 16px; background-color: var(--sable); background-image: var(--grain), radial-gradient(60% 40% at 100% 0%, rgba(180, 138, 28, 0.08), transparent 70%); }
.questions-tete { display: grid; gap: 16px; max-width: 820px; margin-bottom: 30px; }
.faq { display: grid; gap: 10px; max-width: 900px; }
.faq details { border-radius: 8px; background: var(--blanc); border: 1px solid var(--filet); box-shadow: 0 10px 24px -22px rgba(33, 30, 25, 0.6); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 14px 18px; font: 450 1.3rem/1.2 var(--titres); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--or); background: linear-gradient(var(--or-texte), var(--or-texte)) center / 10px 1.5px no-repeat, linear-gradient(var(--or-texte), var(--or-texte)) center / 1.5px 10px no-repeat; transition: transform 0.35s var(--courbe); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 18px 18px; color: var(--gris); max-width: 46em; }
.questions-bas { display: grid; gap: 14px; margin-top: 30px; max-width: 900px; }
.questions-bas p { font: italic 450 1.3rem/1.3 var(--titres); }
@media (min-width: 761px) { .etiquettes-heures, .conditions, .vie, .acces, .questions { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1000px) {
  .etiquettes-heures, .conditions, .vie, .questions { padding: 120px max(48px, calc((100% - 1344px) / 2)); }
  .cles { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .conditions-grille { grid-template-columns: repeat(4, 1fr); }
  .vie-orn { width: 420px; right: 0; }
  .acces { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 120px max(48px, calc((100% - 1344px) / 2)); }
  .questions { display: grid; grid-template-columns: 0.8fr 1.2fr; column-gap: 72px; align-items: start; }
  .questions-tete { position: sticky; top: calc(var(--entete-h) + 30px); }
  .questions-bas { grid-column: 2; }
}

/* ============ avis et contact ============ */
.tete-avis { background: var(--nuit); color: var(--creme); }
.tete-avis .page-intro { color: rgba(243, 235, 221, 0.82); }
.tete-avis .page-titre em, .tete-avis .surtitre { color: var(--or-clair); }
.tete-avis > .ciel { z-index: 0; }
.avis-visuel { height: clamp(250px, calc(100svh - 470px), 430px); margin-bottom: 20px; }
.av-photo { position: absolute; inset: 0 22% 0 0; background: #243042; }
.av-photo::after { border-color: rgba(217, 182, 90, 0.5); }
.sceau { position: absolute; right: 0; bottom: -22px; width: 150px; height: 150px; z-index: 2; border-radius: 50%; background: radial-gradient(circle, #1E2838 55%, #121A24); box-shadow: 0 0 0 1px rgba(217, 182, 90, 0.5), 0 20px 40px -20px rgba(0, 0, 0, 0.8); display: grid; place-items: center; }
.sceau svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sceau text { font: 500 10.5px var(--texte); letter-spacing: 0.12em; fill: var(--or-clair); }
.sceau-note { font: 400 3rem/1 var(--titres); color: var(--creme); }
@media (min-width: 1000px) {
  .avis-visuel { height: min(calc(100svh - var(--entete-h) - 160px), 620px); min-height: 480px; margin: 0; }
  .av-photo { inset: 0 18% 0 8%; }
  .sceau { width: 210px; height: 210px; bottom: 10%; }
  .sceau text { font-size: 10.5px; }
  .sceau-note { font-size: 4.2rem; }
}
.theme { position: relative; padding: 76px 16px; display: grid; gap: 30px; }
.theme-num { font: italic 400 4.4rem/0.8 var(--titres); color: var(--or); opacity: 0.55; }
.theme-tete { display: grid; gap: 10px; max-width: 820px; }
.theme-accueil { background-color: var(--ivoire); background-image: var(--grain), radial-gradient(60% 50% at 100% 0%, rgba(194, 90, 120, 0.1), transparent 70%); }
.theme-table { background-color: #F7EEDC; background-image: var(--grain), radial-gradient(60% 60% at 0% 100%, rgba(201, 150, 31, 0.16), transparent 70%); }
.theme-cadre { background-color: #E4EEEA; background-image: var(--grain), radial-gradient(60% 50% at 100% 100%, rgba(47, 93, 74, 0.14), transparent 70%); }
.theme-photo .tirage { aspect-ratio: 4 / 3; }
.theme-photo .tirage img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
.theme-corps { display: grid; gap: 30px; }
.mosaique-avis { display: grid; gap: 18px; }
.ma p { font-family: var(--titres); }
.ma footer { margin-top: 12px; font-size: 0.875rem; font-weight: 500; color: var(--gris); }
.ma-grand p { font: italic 400 clamp(1.7rem, 1.25rem + 2vw, 2.7rem)/1.14 var(--titres); letter-spacing: -0.01em; }
.ma-grand footer { display: flex; align-items: center; gap: 12px; }
.ma-grand footer::before { content: ""; width: 26px; height: 1px; background: var(--or); }
.ma-etiquette { background: var(--blanc); padding: 22px 22px 18px; border-radius: 4px; transform: rotate(-1.6deg); box-shadow: 0 18px 40px -26px rgba(33, 30, 25, 0.6); border-left: 4px solid var(--c); max-width: 30em; }
.ma-etiquette p { font: italic 450 1.3rem/1.35 var(--titres); }
.ma-simple { border-top: 1px solid var(--filet); padding-top: 18px; max-width: 30em; }
.ma-simple p { font: 400 1.25rem/1.4 var(--titres); }
.ma-ticket { position: relative; background: var(--c); color: #fff; padding: 24px 22px 20px; border-radius: 8px; transform: rotate(1.2deg); max-width: 30em; box-shadow: 0 20px 40px -28px rgba(33, 30, 25, 0.8); }
.ma-ticket::before, .ma-ticket::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--fond-section, var(--ivoire)); transform: translateY(-50%); }
.ma-ticket::before { left: -9px; } .ma-ticket::after { right: -9px; }
.theme-cadre .ma-ticket::before, .theme-cadre .ma-ticket::after { background: #E4EEEA; }
.ma-ticket p { font: italic 450 1.3rem/1.35 var(--titres); }
.ma-ticket footer { color: rgba(255, 255, 255, 0.85); }
.theme-bas { display: flex; flex-wrap: wrap; gap: 10px; }
.contact { position: relative; overflow: hidden; isolation: isolate; padding: 76px 16px; display: grid; gap: 30px; background-color: #F6E6EA; background-image: var(--grain), radial-gradient(60% 50% at 0% 0%, rgba(255, 253, 248, 0.7), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(194, 90, 120, 0.16), transparent 70%); }
.contact > * { position: relative; z-index: 1; }
.contact-orn { position: absolute; z-index: 0; width: 230px; right: -60px; top: -40px; opacity: 0.75; pointer-events: none; }
.contact-tete { display: grid; gap: 16px; max-width: 820px; }
.contact-grille { display: grid; gap: 14px; }
.carte-contact { display: grid; gap: 10px; justify-items: start; padding: 22px 20px; border-radius: 10px; background: var(--blanc); box-shadow: 0 18px 36px -28px rgba(33, 30, 25, 0.7); }
.carte-contact > p:not(.cc-titre):not(.cc-lieu) { color: var(--gris); font-size: 0.9375rem; }
.cc-titre { font: 500 0.75rem/1.3 var(--texte); letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-texte); }
.cc-numero { font: 450 2rem/1.05 var(--titres); text-decoration: none; }
.cc-adresse-mail { font-size: 1.45rem; overflow-wrap: anywhere; }
.cc-lieu { font: 450 1.3rem/1.25 var(--titres); }
.cc-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.carte-contact .bouton svg { width: 18px; height: 18px; fill: currentColor; }
.contact-photo { aspect-ratio: 16 / 10; }
.contact-photo img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
@media (min-width: 761px) {
  .theme, .contact { padding-left: 32px; padding-right: 32px; }
  .contact-grille { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .theme, .contact { padding: 120px max(48px, calc((100% - 1344px) / 2)); }
  .mosaique-avis { grid-template-columns: 1.3fr 1fr; gap: 34px 56px; align-items: start; }
  .mosaique-avis .ma-grand { grid-row: span 2; }
  .theme-table { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; }
  .mosaique-2 { grid-template-columns: 1fr 1fr; }
  .mosaique-2 .ma-grand { grid-column: 1 / -1; grid-row: auto; }
  .contact { grid-template-columns: 1.1fr 1fr; column-gap: 64px; }
  .contact-tete { grid-column: 1 / -1; }
  .contact-photo { align-self: stretch; aspect-ratio: auto; min-height: 420px; }
  .contact-orn { width: 380px; right: -40px; }
}

/* — sans animation, tout est visible — */
@media (prefers-reduced-motion: reduce) {
  .frise-barre i { transform: none !important; }
}
.js .carte-rayon { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .carte-rayon { opacity: 0.85; } }

/* — sur téléphone, une colonne qui ne s'élargit jamais au-delà de l'écran — */
@media (max-width: 999px) {
  .page-tete, .piece, .bloc, .conseils, .acces, .contact, .theme, .massages, .confort, .theme-corps, .rayons-corps { grid-template-columns: minmax(0, 1fr); }
  .piece > *, .bloc > *, .page-tete > * { min-width: 0; }
}
.acces-carte { position: relative; }
.carte-alentours { overflow: hidden; }
@media (max-width: 999px) {
  .massages-plante { width: 170px; right: -46px; top: auto; bottom: -24px; opacity: 0.55; }
}
@media (min-width: 1000px) {
  .piece { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .page-tete { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .bloc { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .conseils { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .acces { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contact { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .massages { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .theme-table { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .rayons-corps { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .questions { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
/* les tirages au format fixe ne doivent jamais élargir leur grille (une photo en hauteur élargissait la galerie d'Ylang-Ylang) */
.piece-galerie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.piece-galerie > *, .bloc-photos > *, .confort-corps > * { min-width: 0; align-self: start; }
.bloc-photos { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.confort-corps { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (min-width: 1000px) { .confort-corps { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 1.4fr); } .confort-corps > * { align-self: center; } }

/* ============ retouche du 20 octobre au soir : la mise en page d'« Avis et contact », les icônes, les décors ============ */
/* — le ciel étoilé d'un haut de page reste un fond : il prenait la première case de la grille (colonne de gauche vide
   et photo rejetée sous le texte, capture de Maoni à 1920) — */
.page-tete > .ciel { position: absolute; inset: 0; z-index: 0; }

/* — les icônes des petites cases : une famille au trait, dans l'or de la villa (icones.mjs) — */
.ic { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--or-texte); }
.pastille .ic, .bloc-pastilles .ic, .piece-faits .ic, .chambre-faits .ic, .reserver-infos .ic, .flacons .ic, .pied-titre .ic, .equipements .ic { width: 24px; height: 24px; }
.piece-faits li, .chambre-faits li, .bloc-pastilles li { display: inline-flex; align-items: center; gap: 8px; padding-left: 10px; }
.piece-faits .ic, .chambre-faits .ic { color: color-mix(in srgb, var(--c) 82%, #211E19); }
.equipements li { align-items: center; }
.equipements li::before { display: none; }
.equipements .ic { color: color-mix(in srgb, var(--parfum) 82%, #211E19); transition: color 0.6s; }
.lieu-liste li, .acces-liste li { align-items: center; }
.lieu-liste li::before, .acces-liste li::before { display: none; }
.acces-liste li { gap: 12px; }
.avec-ic { display: flex; align-items: flex-start; gap: 12px; }
.avec-ic .ic { width: 30px; height: 30px; margin-top: 2px; }
.reserver-infos li { display: inline-flex; align-items: center; gap: 8px; }
.reserver .ic, .confort .ic, .bloc-table .ic, .cond-direct .ic, .pied .ic { color: var(--or-clair); }
.pied-titre { display: flex; align-items: center; gap: 8px; }
.flacons .fl { display: flex; align-items: center; gap: 8px; }
.flacons .ic { color: color-mix(in srgb, var(--c) 82%, #211E19); }
.piece-prix, .massages-prix { position: relative; padding-right: 60px; }
.piece-prix > .ic, .massages-prix > .ic { position: absolute; right: 16px; top: 16px; width: 30px; height: 30px; color: color-mix(in srgb, var(--c, var(--or)) 82%, #211E19); }
.confort-liste li, .cercle li, .menu-table li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; }
.confort-liste li > .ic, .cercle li > .ic, .menu-table li > .ic { grid-column: 1; grid-row: 1 / span 2; width: 28px; height: 28px; margin-top: 3px; }
.cercle li > .ic { color: color-mix(in srgb, var(--c) 82%, #211E19); }
.frise-nom { display: inline-flex; align-items: center; gap: 10px; }
.frise-nom .ic { color: color-mix(in srgb, var(--c) 82%, #211E19); }
.vie-n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 253, 248, 0.75); box-shadow: inset 0 0 0 1px rgba(47, 93, 74, 0.25); }
.vie-n .ic { width: 28px; height: 28px; color: var(--cryptomeria); }
.vie-liste li { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; }
.cc-titre { display: flex; align-items: center; gap: 10px; }
.cc-titre .ic { width: 28px; height: 28px; }
.cond h3, .espace h3 { display: flex; align-items: center; gap: 12px; }
.cond h3 .ic, .espace h3 .ic { width: 30px; height: 30px; }
.espace h3 .ic { color: var(--cryptomeria); }
.cond-direct h3 { padding-right: 0; }

/* — les fonds : des motifs en filigrane (feuillage de palmes, éventail du logo), qui s'effacent sous le texte — */
.deco-hote { position: relative; overflow: clip; isolation: isolate; }
.motif-feuillage::before, .motif-eventail::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.motif-feuillage::before { background: url("motifs/feuillage.svg") 0 0 / 420px 420px; -webkit-mask-image: radial-gradient(95% 85% at 100% 0%, #000 15%, transparent 78%); mask-image: radial-gradient(95% 85% at 100% 0%, #000 15%, transparent 78%); }
.motif-bas::before { -webkit-mask-image: radial-gradient(95% 85% at 0% 100%, #000 15%, transparent 78%); mask-image: radial-gradient(95% 85% at 0% 100%, #000 15%, transparent 78%); }
.motif-eventail::before { background: url("motifs/eventail.svg") 0 0 / 180px 180px; -webkit-mask-image: linear-gradient(165deg, transparent 25%, #000 92%); mask-image: linear-gradient(165deg, transparent 25%, #000 92%); }
.piece.motif-eventail::before { opacity: 0.8; }

/* — les décors animés des pages : des bouquets de palmes aux coins des sections (ornements.mjs), qui poussent une fois
   puis se balancent au défilement (app.js, .orn), toujours dans la marge, derrière le texte — */
.deco-hote > .deco { position: absolute; z-index: -1; width: 104px; pointer-events: none; }
.deco-hote > .deco .orn { display: block; }
.deco-hd { top: -22px; right: -14px; }
.deco-hg { top: -22px; left: -14px; }
.deco-bd { bottom: -26px; right: -14px; }
.deco-bg { bottom: -26px; left: -14px; }
.deco-or { opacity: 0.6; }
.contact-orn .orn-coin-haut, .vie-orn .orn-coin-bas { display: block; }
@media (max-width: 999px) {
  .page-tete > .deco-hd { top: -14px; right: -18px; width: 92px; }
  .contact-orn { width: 150px; right: -40px; top: -34px; }
  .vie-orn { width: 150px; right: -36px; bottom: -34px; }
}
@media (min-width: 761px) and (max-width: 999px) { .deco-hote > .deco { width: 150px; } }
@media (min-width: 1000px) {
  .deco-hote > .deco { width: 230px; }
  .deco-hd, .deco-hg { top: -34px; }
  .deco-bd, .deco-bg { bottom: -40px; }
  .deco-hd, .deco-bd { right: -18px; }
  .deco-hg, .deco-bg { left: -18px; }
}
@media (min-width: 1600px) { .deco-hote > .deco { width: 280px; } }
.deco-hote > .deco-or { z-index: 0; }
/* l'aperçu des chambres et la frise des horaires reprennent la largeur des autres sections sur grand écran (la règle
   des tablettes, écrite plus bas dans le fichier, les collait aux bords de l'écran à 1440 et 1920) */
@media (min-width: 1000px) { .apercu-chambres, .horaires-jour { padding-left: max(48px, calc((100% - 1344px) / 2)); padding-right: max(48px, calc((100% - 1344px) / 2)); } }
/* — de la lumière sur les fonds clairs restés trop unis : un halo chaud du matin et l'ombre verte du jardin — */
.lumiere::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(55% 60% at 88% 8%, rgba(255, 214, 140, 0.36), transparent 70%), radial-gradient(45% 50% at 4% 96%, rgba(47, 93, 74, 0.1), transparent 70%); }