/* Villa Roméo · démo Vixya
   Identité reprise de son site : le monogramme VR et son éventail de feuilles, l'or (#C69D03, adouci en or champagne),
   modernisée par l'ivoire, EB Garamond et Readex Pro. Les cinq couleurs des parfums viennent des chambres. */

@font-face { font-family: "EB Garamond"; src: url("polices/garamond.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("polices/garamond-italique.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("polices/readex.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }

:root {
  --ivoire: #F8F4EC; --sable: #EFE6D6; --sable-2: #E4D7C0; --blanc: #FFFDF8;
  --or: #B48A1C; --or-clair: #D9B65A; --or-texte: #85650F; --or-doux: #E9D7A6;
  --encre: #211E19; --gris: #5E574C; --filet: rgba(33, 30, 25, 0.14);
  --nuit: #121A24; --nuit-2: #1B2533; --creme: #F3EBDD;
  --geranium: #C25A78; --camphre: #5E8F80; --vetiver: #8C7A3A; --cryptomeria: #2F5D4A; --ylang: #C9961F;
  --parfum: var(--geranium);
  --titres: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --texte: "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fond: var(--ivoire);
  --entete-h: 64px;
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--entete-h) + 12px); }
body { margin: 0; background: var(--ivoire); color: var(--encre); font: 300 1.0625rem/1.62 var(--texte); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
b, strong { font-weight: 500; }
h1, h2, h3 { font-family: var(--titres); font-weight: 450; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
em { font-style: italic; }
h1 em, h2 em, .maison-phrase em { color: var(--or-texte); font-weight: 450; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
blockquote { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 4px; }
.saut { position: absolute; left: 12px; top: -60px; background: var(--encre); color: var(--ivoire); padding: 10px 14px; border-radius: 8px; z-index: 100; }
.saut:focus { top: 10px; }

.surtitre { font: 500 0.8125rem/1.3 var(--texte); letter-spacing: 0.18em; text-transform: uppercase; color: var(--or-texte); display: flex; align-items: center; gap: 12px; }
.surtitre::before { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; }
.titre { font-size: clamp(2.05rem, 1.4rem + 3.1vw, 4rem); line-height: 1.06; }
.petit-titre { font: 500 0.8125rem/1.3 var(--texte); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); margin-bottom: 14px; }

/* — boutons — */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 500 1rem/1.1 var(--texte); text-decoration: none; letter-spacing: 0.01em; transition: transform 0.35s var(--courbe), background-color 0.3s, box-shadow 0.35s, color 0.3s; -webkit-tap-highlight-color: transparent; }
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0) scale(0.98); }
.bouton-or { background: linear-gradient(135deg, #DDBD62, #B48A1C 62%, #A47D16); color: var(--encre); box-shadow: 0 10px 26px -14px rgba(132, 98, 14, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.bouton-or:hover { box-shadow: 0 16px 32px -14px rgba(132, 98, 14, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.bouton-trait { border: 1.5px solid var(--encre); color: var(--encre); }
.bouton-trait:hover { background: var(--encre); color: var(--ivoire); }
.bouton-encre { background: var(--encre); color: var(--ivoire); }
.bouton-encre:hover { background: var(--parfum); }
.bouton-clair { border: 1.5px solid rgba(243, 235, 221, 0.55); color: var(--creme); }
.bouton-clair:hover { background: var(--creme); color: var(--nuit); }

.pastille { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--filet); font-size: 0.9375rem; line-height: 1.2; }
.etoiles { color: var(--or); letter-spacing: 0.06em; font-size: 0.875rem; }

/* — le tirage : chaque photo dans un passe-partout blanc et un filet d'or — */
.tirage { position: relative; margin: 0; padding: 9px; background: var(--blanc); border-radius: 5px; box-shadow: 0 1px 2px rgba(33, 30, 25, 0.08), 0 26px 50px -30px rgba(33, 30, 25, 0.55); }
.tirage::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(180, 138, 28, 0.42); border-radius: 3px; pointer-events: none; }
.tirage img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.tirage figcaption { font: 500 0.8125rem/1.25 var(--texte); letter-spacing: 0.06em; padding: 8px 2px 0; color: var(--gris); }

/* — en-tête — */
.entete { position: sticky; top: 0; z-index: 40; height: var(--entete-h); display: flex; align-items: center; gap: 10px; padding: 0 14px; background: rgba(248, 244, 236, 0.97); border-bottom: 1px solid transparent; transition: border-color 0.3s, box-shadow 0.3s; }
.entete.defile { border-bottom-color: var(--filet); box-shadow: 0 10px 24px -22px rgba(33, 30, 25, 0.6); }
.entete-logo { text-decoration: none; display: flex; align-items: center; min-height: 48px; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--encre); }
.monogramme { width: 46px; height: auto; overflow: visible; }
.monogramme .eventail path { fill: var(--or-clair); opacity: 0.42; transform-box: view-box; }
.monogramme text { font-family: var(--titres); font-weight: 500; font-size: 46px; fill: var(--encre); }
.monogramme .vr-r { font-size: 46px; }
.logo-nom { font: italic 500 1.3rem/1 var(--titres); white-space: nowrap; letter-spacing: 0.01em; }
.apercu { font: 500 0.6875rem/1 var(--texte); letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 8px; border: 1px solid var(--or); color: var(--or-texte); border-radius: 999px; white-space: nowrap; }
.entete-nav { display: none; }
.entete-tel { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--encre); color: var(--ivoire); text-decoration: none; font-weight: 500; font-size: 0.9375rem; white-space: nowrap; }
.entete-tel svg { width: 17px; height: 17px; fill: currentColor; }
.tel-court { display: none; }
.entete-reserver { display: none; }
@media (max-width: 419px) { .tel-long { display: none; } .tel-court { display: inline; } }
@media (max-width: 374px) { .logo-nom { display: none; } }

/* — haut de page — */
.heros { padding: 14px 16px 40px; display: flex; flex-direction: column; }
.heros-visuel { position: relative; height: clamp(250px, calc(100svh - 372px), 470px); margin-bottom: 36px; }
.heros-photo { position: absolute; inset: 0; }
.heros-photo img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
.pastille-note { position: absolute; left: 20px; top: 20px; z-index: 2; background: rgba(255, 253, 248, 0.94); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.5); font-size: 0.875rem; min-height: 34px; padding: 5px 12px; }
.vignette { position: absolute; z-index: 3; width: 31%; padding: 5px 5px 0; }
.vignette::after { inset: 2px; }
.vignette img { aspect-ratio: 1 / 0.86; height: auto; }
.vignette figcaption { padding: 5px 2px 6px; font-size: 0.75rem; letter-spacing: 0.02em; white-space: nowrap; text-align: center; color: var(--encre); }
.vignette-a { right: 10px; bottom: -30px; transform: rotate(3.5deg); }
.vignette-b { right: calc(31% + 18px); bottom: -24px; transform: rotate(-3deg); }
.heros-texte { display: flex; flex-direction: column; gap: 16px; }
.heros-texte .surtitre { order: 3; margin-top: 6px; }
.heros-titre { order: 1; font-size: clamp(1.8rem, 1.05rem + 3.3vw, 4.15rem); line-height: 1.05; font-weight: 450; }
.heros-actions { order: 2; display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; }
.heros-actions .bouton { padding: 0 14px; }
.heros-actions .long { display: none; }
.heros-actions .bouton:has(.long) { gap: 0; }
.heros-intro { order: 4; color: var(--gris); max-width: 34em; }
.heros-pastilles { order: 5; display: flex; flex-wrap: wrap; gap: 8px; }

/* — ruban des parfums — */
.ruban-cadre { overflow: hidden; padding: 26px 0; margin: -16px 0; position: relative; z-index: 2; }
.ruban { overflow: hidden; background: var(--nuit); color: var(--or-clair); transform: rotate(-2deg); margin: 10px -20px 0; padding: 14px 0; box-shadow: 0 20px 40px -26px rgba(18, 26, 36, 0.8); position: relative; z-index: 2; }
.ruban-piste { display: flex; align-items: center; gap: 26px; width: max-content; animation: ruban 36s linear infinite; font: italic 450 1.85rem/1 var(--titres); white-space: nowrap; }
.ruban-piste i { font-style: normal; font-size: 0.9rem; color: var(--or); }
@keyframes ruban { to { transform: translateX(-50%); } }

/* — la maison — */
.maison { padding: 84px 16px 70px; display: grid; gap: 28px; }
.maison-phrase { font: 400 clamp(1.85rem, 1.2rem + 3vw, 4.1rem)/1.22 var(--titres); letter-spacing: -0.012em; max-width: 21em; }
.maison-phrase em { font-style: italic; }
.pilule { display: inline-block; vertical-align: -0.12em; width: 2.15em; height: 0.98em; border-radius: 999px; overflow: hidden; box-shadow: 0 0 0 2px var(--blanc), 0 0 0 3px rgba(180, 138, 28, 0.5); margin: 0 0.06em; }
.pilule img { width: 100%; height: 100%; object-fit: cover; }
.mot { transition: opacity 0.2s; }
.maison-bas { display: grid; gap: 30px; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; border-top: 1px solid var(--filet); padding-top: 22px; }
.chiffres div { display: flex; flex-direction: column; gap: 6px; }
.chiffres dt { font: 450 2.75rem/1 var(--titres); color: var(--or-texte); }
.chiffres dt small { font-size: 0.5em; }
.chiffres dd { margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--gris); }
.maison-texte { color: var(--gris); max-width: 36em; }

/* — les chambres — */
.chambres { --teinte: #F6E6EA; padding: 80px 16px 84px; background: var(--teinte); transition: background-color 0.8s ease; position: relative; }
.chambres[data-parfum="geranium"] { --parfum: var(--geranium); --teinte: #F6E6EA; }
.chambres[data-parfum="camphre"] { --parfum: var(--camphre); --teinte: #E4EEEA; }
.chambres[data-parfum="vetiver"] { --parfum: var(--vetiver); --teinte: #EFEADB; }
.chambres[data-parfum="cryptomeria"] { --parfum: var(--cryptomeria); --teinte: #E1EBE4; }
.chambres[data-parfum="ylang"] { --parfum: var(--ylang); --teinte: #F7EDD2; }
.chambres-tete { display: grid; gap: 18px; max-width: 760px; }
.chambres-intro { color: var(--gris); max-width: 34em; }
.parfums { display: flex; flex-wrap: wrap; gap: 7px; margin: 30px 0 26px; }
.parfum { display: none; }
.js .parfum { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--filet); background: var(--blanc); cursor: pointer; font: italic 500 1.12rem/1 var(--titres); transition: background-color 0.35s, color 0.35s, border-color 0.35s, transform 0.35s var(--courbe); -webkit-tap-highlight-color: transparent; }
.parfum i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); transition: transform 0.4s var(--courbe); }
.parfum[data-parfum="geranium"] { --c: var(--geranium); } .parfum[data-parfum="camphre"] { --c: var(--camphre); } .parfum[data-parfum="vetiver"] { --c: var(--vetiver); } .parfum[data-parfum="cryptomeria"] { --c: var(--cryptomeria); } .parfum[data-parfum="ylang"] { --c: var(--ylang); }
.parfum:hover { transform: translateY(-2px); border-color: var(--c); }
.parfum:hover i { transform: scale(1.35); }
.parfum[aria-selected="true"] { background: var(--c); color: #fff; border-color: var(--c); }
.parfum[aria-selected="true"] i { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); }
.diffuseur { position: relative; display: grid; gap: 56px; }
.js .diffuseur { gap: 0; }
.vapeur { position: absolute; inset: -40px -16px 0; width: calc(100% + 32px); height: calc(100% + 40px); pointer-events: none; z-index: 0; display: none; }
.js .vapeur { display: block; }
.chambre { position: relative; z-index: 1; display: grid; gap: 22px; --c: var(--parfum); }
.chambre[data-parfum="geranium"] { --c: var(--geranium); } .chambre[data-parfum="camphre"] { --c: var(--camphre); } .chambre[data-parfum="vetiver"] { --c: var(--vetiver); } .chambre[data-parfum="cryptomeria"] { --c: var(--cryptomeria); } .chambre[data-parfum="ylang"] { --c: var(--ylang); }
.js .chambre:not(.active) { display: none; }
.chambre-photo { aspect-ratio: 4 / 3.1; }
.chambre-photo img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
.chambre-plante { position: absolute; right: 14px; top: calc((100vw - 32px) * 0.775 - 74px); width: 124px; height: 124px; z-index: 2; color: var(--c); pointer-events: none; background: var(--blanc); border-radius: 50%; padding: 12px 16px 14px; box-shadow: 0 16px 34px -18px rgba(33, 30, 25, 0.55), inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent), inset 0 0 0 6px var(--blanc), inset 0 0 0 7px color-mix(in srgb, var(--c) 22%, transparent); display: grid; place-items: center; }
.chambre-plante .plante { width: auto; height: 100%; }
.plante { width: 100%; height: auto; overflow: visible; }
.plante path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.plante path.fin { stroke-width: 1; opacity: 0.75; }
.chambre-texte { display: grid; gap: 12px; }
.chambre-nom { font: italic 450 clamp(3.2rem, 2.4rem + 4vw, 5.6rem)/0.95 var(--titres); color: var(--c); letter-spacing: -0.02em; }
.chambre-plante-legende { font: italic 400 1.15rem/1.35 var(--titres); color: var(--gris); }
.chambre-desc { max-width: 30em; }
.chambre-faits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chambre-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; }
.chambre-faits b { color: var(--c); }
.chambres-bas { display: grid; gap: 30px; margin-top: 48px; align-items: start; }
.equipements ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.equipements li { display: flex; align-items: baseline; gap: 9px; font-size: 0.9375rem; line-height: 1.35; }
.equipements li::before { flex: none; transform: translateY(-2px); }
.equipements li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--parfum); transition: background-color 0.6s; }
.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(--parfum); max-width: 30em; transition: border-color 0.6s; }
.etiquette p { font: italic 450 1.3rem/1.35 var(--titres); }
.etiquette footer { margin-top: 10px; font-size: 0.875rem; color: var(--gris); }
.chambres-bas .bouton { justify-self: start; }

/* — la journée — */
.journee { padding: 84px 16px 60px; background: linear-gradient(180deg, #F8F4EC 0%, #F7EEDC 22%, #EAF1ED 55%, #F2E1C6 100%); }
.maison, .lieu, .heros { background: var(--ivoire); }
.journee-tete { display: grid; gap: 18px; max-width: 820px; margin-bottom: 40px; }
.heure { display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 40px; padding: 6px 16px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--filet); font-size: 0.9375rem; }
.heure b { font-variant-numeric: tabular-nums; }
.heure-point { width: 8px; height: 8px; border-radius: 50%; background: #3FA36B; box-shadow: 0 0 0 0 rgba(63, 163, 107, 0.5); animation: pouls 2.4s ease-out infinite; }
@keyframes pouls { 70% { box-shadow: 0 0 0 9px rgba(63, 163, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 163, 107, 0); } }
.moments { display: grid; gap: 22px; }
.moment-carte { border-radius: 10px; padding: 12px 12px 26px; display: grid; gap: 22px; box-shadow: 0 30px 60px -42px rgba(33, 30, 25, 0.7); transform-origin: 50% 0; }
.moment-matin .moment-carte { background: #FCF5E8; }
.moment-jour .moment-carte { background: #F0F6F3; }
.moment-soir .moment-carte { background: var(--nuit-2); color: var(--creme); }
.moment-photo { aspect-ratio: 4 / 3; }
.moment-photo img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
.moment-soir .tirage { background: #243042; }
.moment-soir .tirage::after { border-color: rgba(217, 182, 90, 0.5); }
.moment-texte { display: grid; gap: 14px; padding: 0 8px; }
.moment-heure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 0.9375rem; color: var(--gris); }
.moment-heure span { font: italic 500 1.6rem/1 var(--titres); color: var(--or-texte); }
.moment-soir .moment-heure { color: rgba(243, 235, 221, 0.75); }
.moment-soir .moment-heure span { color: var(--or-clair); }
.moment h3 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.6rem); line-height: 1.1; }
.moment-avis { border-left: 2px solid var(--or); padding: 2px 0 2px 16px; margin-top: 4px; }
.moment-avis p { font: italic 450 1.18rem/1.38 var(--titres); }
.moment-avis footer { font-size: 0.875rem; margin-top: 6px; color: var(--gris); }
.moment-soir .moment-avis footer { color: rgba(243, 235, 221, 0.7); }
.moment-soir .moment-avis { border-color: var(--or-clair); }

/* — le lieu — */
.lieu { padding: 84px 16px 80px; }
.lieu-tete { display: grid; gap: 18px; max-width: 860px; }
.lieu-intro { color: var(--gris); max-width: 36em; }
.lieu-corps { display: grid; gap: 34px; margin-top: 40px; }
.lieu-carte { position: relative; }
.carte { width: 100%; height: auto; overflow: visible; display: block; }
.carte-ile { fill: #EDE2CB; stroke: var(--or); stroke-width: 1.6; stroke-linejoin: round; }
.js .carte-route { opacity: 0; }
.carte-route { fill: none; stroke: var(--or-texte); stroke-width: 2; stroke-dasharray: 0.012 0.012; opacity: 0.8; }
.carte-point { fill: var(--encre); }
.et-d { transform: translate(14px, -50%); }
.et-b { transform: translate(-72%, 12px); white-space: normal; width: 7.5em; text-align: center; }
.et-villa { transform: translate(20px, -150%); }
.et-zone { transform: translate(0, -50%); }
.et-zone-sud { transform: translate(-100%, -50%); }
.carte-villa circle { fill: var(--or); stroke: var(--blanc); stroke-width: 3; }
.carte-villa .onde { fill: none; stroke: var(--or); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: onde 2.8s ease-out infinite; }
@keyframes onde { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.4); opacity: 0; } }
.etiquettes-carte { position: absolute; inset: 0; pointer-events: none; }
.et { position: absolute; font-size: 0.9375rem; line-height: 1.15; white-space: nowrap; color: var(--encre); }
.et-villa { font: italic 600 1.35rem/1 var(--titres); color: var(--or-texte); }
.et-zone { font: italic 450 1.3rem/1 var(--titres); color: var(--gris); }
.lieu-listes { display: grid; gap: 28px; }
.lieu-liste ul { display: grid; gap: 0; }
.lieu-liste li { padding: 12px 0; border-bottom: 1px solid var(--filet); font: 450 1.3rem/1.25 var(--titres); display: flex; gap: 12px; align-items: baseline; }
.lieu-liste li::before { content: "✦"; font-size: 0.7rem; color: var(--or); }
.lieu-photo img { aspect-ratio: 3 / 2; height: auto; }
.lieu-photo figcaption { font: italic 450 1.15rem/1.4 var(--titres); letter-spacing: 0; color: var(--encre); padding: 12px 6px 6px; }
.lieu-photo figcaption b { font: 500 0.875rem/1 var(--texte); font-style: normal; color: var(--gris); margin-left: 6px; }
.adresse { display: grid; gap: 10px; padding: 22px; border-radius: 8px; background: var(--blanc); border: 1px solid var(--filet); }
.adresse b { font: 500 1.4rem/1.2 var(--titres); }
.adresse-note { color: var(--gris); font-size: 0.9375rem; }
.adresse .bouton { justify-self: start; margin-top: 6px; }

/* — les avis — */
.avis { padding: 84px 0 84px; background: var(--sable); overflow: hidden; }
.avis-haut { display: grid; gap: 34px; padding: 0 16px; }
.note { display: grid; gap: 4px; justify-items: start; }
.note .surtitre { margin-bottom: 12px; }
.note-chiffre { font: 400 7.5rem/0.86 var(--titres); letter-spacing: -0.04em; color: var(--encre); }
.note-chiffre small { font-size: 0.28em; letter-spacing: 0; color: var(--gris); margin-left: 6px; }
.note-etoiles span { display: inline-block; }
.note-etoiles { color: var(--or); font-size: 1.4rem; letter-spacing: 0.12em; margin-top: 8px; }
.note-total { font-weight: 500; }
.barres { display: grid; gap: 6px; width: min(100%, 300px); margin-top: 12px; }
.barres p { display: grid; grid-template-columns: 34px 1fr 26px; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--gris); }
.barres i { height: 6px; border-radius: 6px; background: rgba(33, 30, 25, 0.1); position: relative; overflow: hidden; }
.barres i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--or); border-radius: 6px; }
.barres b { text-align: right; font-weight: 500; color: var(--encre); }
.avis-geant p { font: italic 400 clamp(2rem, 1.3rem + 3.2vw, 4.2rem)/1.08 var(--titres); letter-spacing: -0.015em; }
.avis-geant em { color: var(--or-texte); font-style: normal; }
.avis-geant footer { margin-top: 16px; font-weight: 500; display: flex; align-items: center; gap: 12px; }
.avis-geant footer::before { content: ""; width: 26px; height: 1px; background: var(--or); }
.avis-photo { margin: 54px 16px 0; padding: 9px; }
.avis-photo img { aspect-ratio: 4 / 5; height: auto; }
.avis-photo blockquote { position: absolute; left: 9px; right: 9px; bottom: 9px; padding: 70px 20px 20px; color: #fff; background: linear-gradient(to top, rgba(10, 14, 22, 0.9) 10%, rgba(10, 14, 22, 0.55) 60%, transparent); border-radius: 0 0 2px 2px; }
.avis-photo blockquote p { font: italic 450 1.35rem/1.32 var(--titres); }
.avis-photo blockquote footer { margin-top: 10px; font-size: 0.875rem; opacity: 0.85; }
.rail-cadre { margin-top: 46px; }
.rail { display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; padding: 18px 16px 30px; scroll-snap-type: x proximity; scroll-padding: 0 16px; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.carte-avis { flex: none; width: min(78vw, 320px); scroll-snap-align: start; background: var(--blanc); border-radius: 8px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 16px 34px -26px rgba(33, 30, 25, 0.7); transition: transform 0.45s var(--courbe), box-shadow 0.45s; }
.carte-avis:nth-child(odd) { transform: rotate(-1.2deg); }
.carte-avis:nth-child(even) { transform: rotate(1deg) translateY(10px); }
.carte-avis:nth-child(3n) { width: min(84vw, 360px); }
.carte-avis:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 26px 44px -26px rgba(33, 30, 25, 0.75); }
.carte-avis p { font: 400 1.2rem/1.38 var(--titres); flex: 1; }
.carte-avis footer { font-size: 0.875rem; font-weight: 500; color: var(--gris); }
.initiale { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: italic 500 1.25rem/1 var(--titres); }
.c1 .initiale { background: var(--geranium); } .c2 .initiale { background: var(--camphre); } .c3 .initiale { background: var(--vetiver); } .c4 .initiale { background: var(--cryptomeria); } .c5 .initiale { background: var(--ylang); }
.rail-fleches { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.fleche { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--encre); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.fleche svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fleche:hover { background: var(--encre); color: var(--ivoire); }
.rail-fleches .bouton { margin-left: auto; }
@media (max-width: 560px) { .fleche { display: none; } .rail-fleches .bouton { margin-left: 0; } }

/* — réserver — */
.reserver { position: relative; overflow: hidden; background: var(--nuit); color: var(--creme); padding: 92px 16px 90px; }
.reserver-grand { position: absolute; right: -70px; bottom: 30px; width: 300px; opacity: 0.18; pointer-events: none; }
.reserver-grand .monogramme { width: 100%; }
.reserver-grand .monogramme .eventail path { opacity: 1; fill: none; stroke: var(--or-clair); stroke-width: 0.5; }
.reserver-grand .monogramme text { fill: var(--or-clair); }
.reserver-texte { position: relative; display: grid; gap: 22px; max-width: 760px; }
.reserver .surtitre { color: var(--or-clair); }
.reserver .titre em { color: var(--or-clair); }
.reserver-texte > p:not(.surtitre) { color: rgba(243, 235, 221, 0.82); max-width: 34em; }
.reserver-actions { display: grid; gap: 10px; margin-top: 8px; }
.reserver-infos { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 12px; padding-top: 22px; border-top: 1px solid rgba(243, 235, 221, 0.18); font-size: 0.9375rem; color: rgba(243, 235, 221, 0.82); }
.reserver-infos b { color: var(--or-clair); font-weight: 500; margin-right: 4px; }

/* — pied de page — */
.pied { background: #0D131B; color: rgba(243, 235, 221, 0.78); padding: 56px 16px 40px; display: grid; gap: 26px; border-top: 1px solid rgba(217, 182, 90, 0.25); }
.pied .logo { color: var(--creme); }
.pied .monogramme { width: 70px; }
.pied .monogramme text { fill: var(--or-clair); }
.pied .logo-nom { font-size: 2rem; display: inline; }
.pied-infos { display: grid; gap: 6px; font-size: 0.9375rem; }
.pied a { color: var(--creme); }
.pied-demo { font-size: 0.875rem; color: rgba(243, 235, 221, 0.6); border-top: 1px solid rgba(243, 235, 221, 0.12); padding-top: 20px; }

/* — barre d'appel collante (procédé « barre d'appel », adaptée) — */
.barre-appel { display: none; }
@media (max-width: 760px) {
  :root { --barre-h: 67px; }
  .barre-appel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: var(--ivoire); border-top: 1px solid var(--filet); box-shadow: 0 -10px 26px -16px rgba(33, 30, 25, 0.5); }
  .barre-appel a { display: flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 50px; padding: 0 12px; border-radius: 999px; font: 500 1rem/1.1 var(--texte); text-decoration: none; background: var(--encre); color: var(--ivoire); border: 1.5px solid var(--encre); }
  .barre-appel a + a { background: linear-gradient(135deg, #DDBD62, #B48A1C 62%, #A47D16); color: var(--encre); border-color: #B48A1C; }
  .barre-appel svg { width: 1.2em; height: 1.2em; fill: currentColor; }
  /* le fond du corps reste ivoire (un fond sombre se voit en noir le temps qu'un téléphone dessine la page pendant un défilement rapide) ;
     la place de la barre d'appel est prise par le pied de page lui-même */
  .pied { padding-bottom: calc(40px + var(--barre-h) + env(safe-area-inset-bottom, 0px)); }
}
@media print { .barre-appel { display: none; } }

/* — apparitions (avec JavaScript seulement) — */
.js [data-apparait] { opacity: 0; transform: translateY(26px); }
.js [data-apparait].vu { opacity: 1; transform: none; transition: opacity 0.9s var(--courbe), transform 1s var(--courbe); }
.js .heros-titre:not(.pret), .js [data-titre]:not(.pret) { visibility: hidden; }

/* ============ tablette et ordinateur ============ */
@media (min-width: 761px) {
  :root { --entete-h: 76px; }
  .entete { padding: 0 32px; gap: 18px; }
  .monogramme { width: 54px; }
  .logo-nom { font-size: 1.55rem; }
  .entete-reserver { display: inline-flex; min-height: 46px; padding: 0 22px; }
  .entete-tel { margin-left: auto; background: transparent; color: var(--encre); padding: 0 6px; }
  .heros { padding: 30px 32px 70px; }
  .heros-visuel { height: min(62vw, 620px); }
  .maison, .chambres, .journee, .lieu { padding-left: 32px; padding-right: 32px; }
  .avis-haut, .rail-fleches { padding-left: 32px; padding-right: 32px; }
  .rail { padding-left: 32px; padding-right: 32px; scroll-padding: 0 32px; }
  .avis-photo { margin-left: 32px; margin-right: 32px; }
  .reserver { padding: 120px 32px; }
  .reserver-actions { grid-template-columns: auto auto; justify-content: start; }
  .reserver-actions .bouton-or { grid-column: 1 / -1; justify-self: start; }
  .pied { padding: 64px 32px 44px; grid-template-columns: auto 1fr; align-items: center; }
  .pied-demo { grid-column: 1 / -1; }
  .chambre-plante { width: 150px; height: 150px; top: calc((100vw - 64px) * 0.775 - 90px); right: 24px; }
  .chiffres dt { font-size: 3.6rem; }
}

@media (min-width: 1000px) {
  .entete-nav { display: flex; gap: 6px; margin-left: 28px; }
  .entete-nav a { text-decoration: none; padding: 10px 12px; font-size: 0.9375rem; position: relative; }
  .entete-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--courbe); }
  .entete-nav a:hover::after { transform: scaleX(1); }
  .heros { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; min-height: calc(100svh - var(--entete-h)); padding: 40px 48px 80px; max-width: 1560px; margin: 0 auto; }
  .heros-visuel { order: 2; height: min(calc(100svh - var(--entete-h) - 120px), 700px); min-height: 520px; margin: 0; }
  .heros-photo { inset: 0 0 0 9%; }
  .heros-texte { order: 1; gap: 24px; }
  .heros-texte .surtitre { order: 0; margin: 0; }
  .heros-titre { order: 1; }
  .heros-intro { order: 2; font-size: 1.125rem; }
  .heros-actions { order: 3; display: flex; flex-wrap: wrap; }
  .heros-actions .bouton { padding: 0 28px; }
  .heros-actions .long { display: inline; }
  .heros-pastilles { order: 4; }
  .vignette { width: 24%; }
  .vignette-a { right: auto; left: 0; bottom: 6%; transform: rotate(-4deg); }
  .vignette-b { right: -14px; top: -22px; bottom: auto; transform: rotate(3.5deg); }
  .ruban { margin-top: 0; }
  .ruban-piste { font-size: 2.6rem; gap: 40px; }
  .maison { padding: 140px 48px 120px; max-width: 1440px; margin: 0 auto; gap: 48px; }
  .maison-bas { grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: end; }
  .chambres { padding: 130px 48px 130px; }
  .chambres > * { max-width: 1340px; margin-left: auto; margin-right: auto; }
  .chambres-tete { margin-left: auto; margin-right: auto; max-width: 1340px; grid-template-columns: 1.2fr 1fr; align-items: end; column-gap: 64px; }
  .chambres-tete .surtitre { grid-column: 1 / -1; }
  .chambre { grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; min-height: 520px; }
  .chambre-photo { aspect-ratio: 4 / 3.2; }
  .chambre-plante { left: calc((100% - 64px) * 1.15 / 2.15 - 210px); right: auto; top: auto; bottom: -34px; width: 180px; height: 180px; padding: 18px 22px 20px; }
  .chambre-texte { padding-top: 40px; gap: 16px; }
  .chambres-bas { grid-template-columns: 1.3fr 1fr auto; gap: 48px; align-items: center; margin-top: 70px; }
  .journee { padding: 130px 48px 80px; max-width: 1440px; margin: 0 auto; }
  .journee-tete { margin-bottom: 56px; }
  .moments { gap: 40px; }
  .moment-carte { grid-template-columns: 1.05fr 1fr; gap: 56px; padding: 18px 56px 18px 18px; align-items: center; }
  .moment-photo { aspect-ratio: 4 / 3.3; }
  .moment-texte { padding: 0; gap: 18px; }
  .lieu { padding: 130px 48px 120px; max-width: 1440px; margin: 0 auto; }
  .lieu-corps { grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; }
  .lieu-listes { grid-template-columns: 1fr 1fr; gap: 34px 34px; }
  .lieu-photo, .adresse { grid-column: 1 / -1; }
  .lieu-photo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
  .lieu-photo img { height: auto; }
  .lieu-photo figcaption { padding: 0 14px 0 0; }
  .adresse { grid-template-columns: 1fr auto; align-items: center; }
  .adresse .bouton { grid-row: 1 / 3; grid-column: 2; margin: 0; }
  .avis { padding: 130px 0 120px; }
  .avis-haut { grid-template-columns: 340px 1fr; gap: 80px; align-items: center; max-width: 1440px; margin: 0 auto; padding: 0 48px; }
  .note-chiffre { font-size: 10rem; }
  .avis-photo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1200px; margin: 80px auto 0; padding: 9px; }
  .avis-photo img { aspect-ratio: 4 / 3.4; }
  .avis-photo blockquote { position: static; background: var(--nuit-2); padding: 48px; display: grid; align-content: center; gap: 16px; }
  .avis-photo blockquote p { font-size: 2rem; }
  .rail-cadre { max-width: 1440px; margin: 70px auto 0; }
  .rail { padding-left: 48px; padding-right: 48px; scroll-padding: 0 48px; }
  .rail-fleches { padding: 0 48px; }
  .carte-avis { width: 340px; }
  .carte-avis:nth-child(3n) { width: 400px; }
  .reserver { padding: 150px 48px; }
  .reserver-texte { margin-left: max(0px, calc((100vw - 1344px) / 2)); }
  .reserver-grand { width: 560px; right: 4%; bottom: auto; top: 50%; transform: translateY(-50%); opacity: 0.3; }
  .pied { padding: 70px 48px 48px; }
}


/* — ornements végétaux (retouche du 19 octobre) : toujours en bordure des textes, jamais dessus — */
.orn { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.orn-coin-haut, .orn-coin-bas { display: none; }
.heros-photo { z-index: 1; }
.orn-brin-heros { position: absolute; right: -10px; top: -16px; width: 140px; z-index: 2; pointer-events: none; }
.maison-orn { width: min(64vw, 260px); margin: -46px -4px -18px auto; }
.journee { --pad: 16px; }
.journee-horizon { height: 150px; margin: 44px calc(-1 * var(--pad)) -60px; position: relative; }
.journee-horizon .orn { width: 100%; height: 100%; overflow: hidden; }
.avis-geant { position: relative; }
.avis-orn { display: block; width: 128px; margin: -14px 0 6px auto; }
.reserver-orn { position: absolute; right: -24px; top: 6px; width: 160px; opacity: 0.4; pointer-events: none; }
@media (min-width: 761px) {
  .journee { --pad: 32px; }
  .maison-orn { width: 360px; margin: -70px 0 -30px auto; }
}
@media (min-width: 1000px) {
  .orn-brin-heros { display: none; }
  .heros-visuel .orn-coin-haut { display: block; position: absolute; z-index: 0; width: 220px; left: calc(9% + 54px - 220px); top: -46px; }
  .heros-visuel .orn-coin-bas { display: block; position: absolute; z-index: 0; width: 230px; right: -34px; bottom: -64px; }
  .maison-orn { width: 440px; margin: -90px 0 -40px auto; }
  .journee { max-width: none; --pad: max(48px, calc((100% - 1344px) / 2)); padding-left: var(--pad); padding-right: var(--pad); }
  .journee-horizon { height: 230px; margin-top: 70px; margin-bottom: -80px; }
  .avis-orn { position: absolute; right: -10px; top: -128px; width: 190px; margin: 0; }
  .reserver-orn { right: auto; top: auto; left: -30px; bottom: -72px; width: 260px; opacity: 0.55; }
}


/* — fonds à thème (retouche du 19 octobre) : le ciel étoilé pour le soir, la lumière du matin, l'eau de la piscine — */
.ciel { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; border-radius: inherit;
  background: radial-gradient(120% 70% at 70% 118%, rgba(196, 128, 150, 0.32), transparent 60%), radial-gradient(90% 60% at 10% 110%, rgba(217, 182, 90, 0.16), transparent 60%), linear-gradient(180deg, #0C1220 0%, #141D33 48%, #232845 100%); }
.ciel-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ciel.scintille .etoiles-1 { animation: scintille 4.2s ease-in-out infinite; }
.ciel.scintille .etoiles-2 { animation: scintille 5.6s ease-in-out 1.4s infinite; }
.ciel.scintille .etoiles-vives { animation: scintille 6.8s ease-in-out 0.6s infinite; }
@keyframes scintille { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.moment-soir .moment-carte { position: relative; overflow: hidden; isolation: isolate; }
.moment-soir .moment-carte > :not(.ciel) { position: relative; z-index: 1; }
.reserver > .ciel { border-radius: 0; }
.reserver > :not(.ciel) { z-index: 1; }
.avis-photo blockquote .ciel { display: none; }
.avis-photo blockquote > :not(.ciel) { position: relative; z-index: 1; }
.moment-matin .moment-carte { background:
  repeating-conic-gradient(from 196deg at 96% -8%, rgba(255, 214, 140, 0.16) 0deg 3deg, transparent 3deg 9deg),
  radial-gradient(70% 60% at 96% -6%, rgba(255, 206, 120, 0.55), rgba(255, 220, 160, 0.12) 55%, transparent 75%),
  linear-gradient(170deg, #FFF4DF 0%, #FCF5E8 55%, #F8EEDD 100%); }
.moment-jour .moment-carte { background:
  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='.42' 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%3Cg fill='none' stroke='%237FC4CC' stroke-opacity='.35' stroke-width='1'%3E%3Cpath d='M20 44c14-6 26 6 40 0s28-8 42 2'/%3E%3Cpath d='M130 86c14-6 26 6 40 0s28-8 42 2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 120px,
  radial-gradient(80% 70% at 100% 0%, rgba(126, 200, 210, 0.35), transparent 70%),
  linear-gradient(170deg, #EAF6F6 0%, #DDEFF1 60%, #D2E9EC 100%); }
@media (min-width: 1000px) {
  .avis-photo blockquote { position: relative; overflow: hidden; }
  .avis-photo blockquote .ciel { display: block; }
}
@media (prefers-reduced-motion: reduce) { .ciel.scintille g { animation: none; } }


/* — fonds sans aplat (retouche du 19 octobre) : un grain très fin, et pour les chambres la plante du parfum en filigrane — */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .11 0 0 0 0 .09 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); }
.maison, .lieu, .heros { background-image: var(--grain); }
.chambres { isolation: isolate; overflow: hidden;
  background-image: var(--grain), radial-gradient(70% 55% at 100% 0%, color-mix(in srgb, var(--parfum) 16%, transparent), transparent 70%), radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--parfum) 12%, transparent), transparent 70%); }
.chambres > :not(.chambres-fond) { position: relative; z-index: 1; }
.chambres-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.filigrane { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; color: var(--c); }
.f-geranium { --c: var(--geranium); } .f-camphre { --c: var(--camphre); } .f-vetiver { --c: var(--vetiver); } .f-cryptomeria { --c: var(--cryptomeria); } .f-ylang { --c: var(--ylang); }
.chambres[data-parfum="geranium"] .f-geranium, .chambres[data-parfum="camphre"] .f-camphre, .chambres[data-parfum="vetiver"] .f-vetiver,
.chambres[data-parfum="cryptomeria"] .f-cryptomeria, .chambres[data-parfum="ylang"] .f-ylang { opacity: 1; }
.filigrane span { position: absolute; display: block; }
.filigrane .plante { width: 100%; height: auto; }
.filigrane .plante path { stroke-width: 0.9; opacity: 0.16; }
.filigrane .plante path.fin { stroke-width: 0.6; opacity: 0.12; }
.fil-a { width: 340px; right: -110px; top: 10px; transform: rotate(-12deg); }
.fil-b { width: 220px; left: -90px; bottom: 120px; transform: rotate(160deg) scaleX(-1); }
.avis { background-image: var(--grain), radial-gradient(60% 40% at 100% 0%, rgba(180, 138, 28, 0.08), transparent 70%); }
.pied { background-image: var(--grain); }
@media (min-width: 1000px) {
  .fil-a { width: 620px; right: -160px; top: -40px; }
  .fil-b { width: 380px; left: -120px; bottom: 60px; }
}

@media (min-width: 1000px) and (min-height: 700px) {
  /* les trois moments de la journée s'empilent : chacun reste en place et le suivant glisse par-dessus */
  .js .moment { position: sticky; top: calc(var(--entete-h) + 24px); }
  .js .moment-carte { min-height: min(620px, calc(100vh - var(--entete-h) - 60px)); }
  .js .moments { gap: 16vh; padding-bottom: 4vh; }
}
/* sur téléphone aussi, les moments s'empilent : chaque carte reste collée dès que son bas touche le bas de l'écran
   (top calculé par app.js, souvent négatif car la carte est plus haute que l'écran), et la suivante glisse par-dessus */
@media (max-width: 999px), (max-height: 699px) {
  .js .moment.empile { position: sticky; }
  .js .moments.empile { gap: 28px; padding-bottom: 10px; }
}
.moment-carte { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ruban-piste, .heure-point, .carte-villa .onde { animation: none; }
  .js .carte-route { opacity: 0.8; }
  .js [data-apparait] { opacity: 1; transform: none; }
  .js .heros-titre:not(.pret), .js [data-titre]:not(.pret) { visibility: visible; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}