/* Tsilaosa Hôtel & Spa · « la maison de dentelle au pied du Piton des Neiges »
   Noir et or du logo, blanc des lambrequins et des têtes de lit sculptées, jaune pâle de la façade,
   brume verte du cirque. Bellefair pour les titres, Onest pour le texte. */
@font-face { font-family: "Bellefair"; src: url("/polices/bellefair.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/polices/onest.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --nuit: #15120F; --nuit-2: #241D17; --or: #C6A15B; --or-fonce: #7E6026; --or-clair: #E9D7A8;
  --dentelle: #FBF8F2; --ivoire: #F4EEE2; --case: #F5E9C6; --piton: #3F5A57; --piton-fonce: #26393A;
  --brume: #E4EAE5; --rose: #F2E3DA; --encre: #241D17; --texte: #3E352C; --doux: #6A5E50;
  --titres: "Bellefair", "Cormorant Garamond", Georgia, serif; --corps: "Onest", system-ui, sans-serif;
  --gouttiere: 16px; --entete: 64px; --rayon: 6px; --ease: cubic-bezier(.22, .8, .2, 1);
}
@media (min-width: 900px) { :root { --gouttiere: 40px; --entete: 78px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 12px); }
body { margin: 0; font: 400 17px/1.6 var(--corps); color: var(--texte); background: var(--dentelle); padding-top: var(--entete); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titres); font-weight: 400; color: var(--encre); line-height: 1.12; margin: 0 0 .5em; font-synthesis: none; letter-spacing: .005em; text-wrap: balance; }
h1 { font-size: clamp(30px, 4.2vw, 58px); }
h2 { font-size: clamp(28px, 3.4vw, 46px); }
h3 { font-size: clamp(22px, 2vw, 28px); }
h1 em, h2 em { font-style: normal; color: var(--or-fonce); }
p { margin: 0 0 1em; }
.surtitre { font: 600 12.5px/1.4 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--or-fonce); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.surtitre::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* — boutons — */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 24px; border-radius: 999px; font: 600 16px/1.2 var(--corps); text-decoration: none; letter-spacing: .01em; transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s; border: 1.5px solid transparent; text-align: center; }
.bouton .ic { width: 20px; height: 20px; }
.bouton:hover { transform: translateY(-2px); }
.bouton-or { background: linear-gradient(180deg, #D4B272, var(--or)); color: var(--nuit); box-shadow: 0 6px 18px -8px rgba(126, 96, 38, .7), inset 0 1px 0 rgba(255, 255, 255, .45); }
.bouton-or:hover { box-shadow: 0 10px 26px -8px rgba(126, 96, 38, .8), inset 0 1px 0 rgba(255, 255, 255, .45); }
.bouton-trait { border-color: var(--encre); color: var(--encre); background: rgba(255, 255, 255, .35); }
.bouton-trait:hover { background: var(--encre); color: var(--dentelle); }
.bouton-trait-clair { border-color: rgba(233, 215, 168, .7); color: var(--or-clair); background: transparent; }
.bouton-trait-clair:hover { background: var(--or-clair); color: var(--nuit); }
.bouton-petit { min-height: 42px; padding: 8px 18px; font-size: 15px; }

/* — l'en-tête, toujours visible — */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--entete); display: flex; align-items: center; gap: 10px; padding: 0 var(--gouttiere); background: rgba(21, 18, 15, .94); color: var(--dentelle); border-bottom: 1px solid rgba(198, 161, 91, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.entete-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--or); margin-right: auto; min-width: 0; }
.logo-t { width: 40px; height: 40px; flex: none; }
.logo-mots { display: flex; flex-direction: column; line-height: 1; }
.logo-nom { font: 400 21px/1 var(--titres); letter-spacing: .2em; text-transform: uppercase; color: var(--dentelle); }
.logo-sous { font: 500 9.5px/1.4 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin-top: 4px; white-space: nowrap; }
.apercu { font: 600 11px/1 var(--corps); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border: 1px solid rgba(233, 215, 168, .55); border-radius: 999px; color: var(--or-clair); flex: none; }
.menu-bouton { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: var(--or); color: var(--nuit); font: 700 15px/1 var(--corps); cursor: pointer; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.barres { display: grid; gap: 4px; width: 18px; }
.barres span { height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .3s; }
.menu-ouvert .barres span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-ouvert .barres span:nth-child(2) { opacity: 0; }
.menu-ouvert .barres span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.entete-resa { display: none; }
.entete-nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; gap: 4px; padding: 14px var(--gouttiere) 22px; background: var(--nuit); border-bottom: 1px solid rgba(198, 161, 91, .4); max-height: calc(100svh - var(--entete)); overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s var(--ease), visibility .3s; }
.menu-ouvert .entete-nav { opacity: 1; transform: none; visibility: visible; }
.entete-nav > a:not(.bouton) { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 4px; text-decoration: none; font: 400 23px/1.2 var(--titres); color: var(--dentelle); border-bottom: 1px solid rgba(233, 215, 168, .14); }
.entete-nav > a:not(.bouton) .ic { color: var(--or); }
.entete-nav > a[aria-current="page"] { color: var(--or-clair); }
.entete-nav .bouton { margin-top: 10px; }
@media (min-width: 600px) { .entete-resa { display: inline-flex; } }
@media (min-width: 1180px) {
  .menu-bouton, .entete-resa, .menu-tel, .nav-accueil { display: none; }
  .entete-nav { position: static; display: flex; align-items: center; gap: 4px; padding: 0; background: none; border: 0; opacity: 1; visibility: visible; transform: none; max-height: none; overflow: visible; }
  .entete-nav > a:not(.bouton) { border: 0; font: 500 15px/1 var(--corps); min-height: 44px; padding: 0 12px; gap: 8px; }
  .entete-nav > a:not(.bouton) .ic { width: 18px; height: 18px; }
  .entete-nav > a:not(.bouton):hover, .entete-nav > a[aria-current="page"] { color: var(--or); }
  .entete-nav .bouton { margin: 0 0 0 10px; min-height: 46px; padding: 8px 20px; }
  .apercu { order: 3; margin-left: 10px; }
}
@media (max-width: 380px) { .logo-sous { display: none; } .logo-nom { font-size: 19px; letter-spacing: .16em; } }

/* — matières des fonds — */
.filigrane { background-image: url("/deco/jour-clair.svg"); background-size: 220px; }
section, article, .pied { position: relative; }
main > section, main > article { overflow: hidden; padding: clamp(64px, 9vw, 130px) var(--gouttiere); }
.section-tete { max-width: 760px; margin: 0 auto 40px; text-align: center; position: relative; z-index: 2; }
.section-tete .surtitre { justify-content: center; }
.section-tete .surtitre::after { content: ""; width: 28px; height: 1px; background: currentColor; }

/* les lambrequins : la frise de bois découpé en haut des sections */
.lambrequins { position: absolute; top: 0; left: 0; width: 100%; height: 30px; z-index: 3; fill: #FFFDF8; filter: drop-shadow(0 3px 3px rgba(36, 29, 23, .16)); pointer-events: none; }
.lambrequins .trou { fill: rgba(126, 96, 38, .3); }
.cadre-feston .lambrequins { top: auto; bottom: -1px; height: 24px; transform: scaleY(-1); }
/* le jour de Cilaos : rosace brodée */
.jour { position: absolute; width: clamp(120px, 16vw, 220px); height: auto; aspect-ratio: 1; z-index: 1; pointer-events: none; color: var(--or); }
.jour .trait { stroke: currentColor; stroke-width: 1.3; }
.jour .point { fill: currentColor; }
/* les crêtes du cirque */
.cretes { display: block; width: 100%; height: auto; }
.cretes-fond { fill: rgba(63, 90, 87, .14); }
.cretes-ligne { fill: none; stroke: var(--or); stroke-width: 1.6; }
/* les fanjans */
.fanjan { position: absolute; width: clamp(130px, 18vw, 250px); height: auto; z-index: 1; pointer-events: none; }
.fanjan .tige { fill: none; stroke: #4F6B55; stroke-width: 1.6; stroke-linecap: round; }
.fanjan .pennes { fill: #5E7D62; opacity: .85; }
.fanjan-hg { top: 26px; left: -14px; } .fanjan-hd { top: 26px; right: -14px; }
.fanjan-bg { bottom: -6px; left: -14px; } .fanjan-bd { bottom: -6px; right: -14px; }
@media (max-width: 899px) { .fanjan { width: 120px; opacity: .8; } }

/* — apparitions — */
.js .r { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .r.vu { opacity: 1; transform: none; }
.decoupe.coupe .mot { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 40ms); }
.decoupe.coupe.vu .mot { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .r, .decoupe.coupe .mot { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* — cadres photo — */
figure { margin: 0; }
figure img { width: 100%; height: 100%; object-fit: cover; }

/* — le haut de l'accueil — */
.heros { background: radial-gradient(120% 70% at 80% 10%, rgba(233, 215, 168, .55), transparent 60%), url("/deco/jour-clair.svg") 0 0 / 220px, var(--ivoire); padding: 18px var(--gouttiere) 40px !important; display: grid; gap: 22px; }
.heros-cadre { position: relative; z-index: 2; height: clamp(240px, calc(100svh - 410px), 520px); border-radius: 999px 999px var(--rayon) var(--rayon); overflow: hidden; box-shadow: 0 0 0 1px rgba(198, 161, 91, .6), 0 0 0 7px var(--ivoire), 0 0 0 8px rgba(198, 161, 91, .5), 0 30px 60px -30px rgba(36, 29, 23, .55); }
.heros-cadre img { object-position: 50% 62%; transform: scale(1.06); transition: transform 2.2s var(--ease); }
.heros.ouvert .heros-cadre img { transform: none; }
.cadre-feston { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; z-index: 2; }
.heros-texte { position: relative; z-index: 2; }
.heros-titre { font-size: clamp(29px, 7.6vw, 62px); margin-bottom: 0; }
.heros-intro { margin: 18px 0 0; max-width: 520px; color: var(--doux); }
.heros-actions { margin-top: 18px; }
.heros-actions .bouton { flex: 1 1 140px; }
.note { position: absolute; z-index: 3; left: 14px; bottom: 34px; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(21, 18, 15, .88); color: var(--or-clair); text-decoration: none; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
.note-chiffre { font: 400 30px/1 var(--titres); color: var(--dentelle); grid-row: span 2; }
.note-etoiles { display: flex; color: var(--or); } .note-etoiles .ic { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.note-texte { font: 500 11.5px/1.3 var(--corps); letter-spacing: .04em; }
.heros-jour { position: absolute; right: -40px; bottom: 30px; width: 200px; z-index: 1; opacity: .7; }
.heros-jour .jour { position: static; width: 100%; }
@media (max-width: 899px) { .heros-jour { display: none; } }
.heros .fanjan-hg { top: auto; bottom: -10px; left: -20px; }
.js .heros-texte > * { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .heros.ouvert .heros-texte > * { opacity: 1; transform: none; }
.js .heros.ouvert .heros-texte > :nth-child(2) { transition-delay: .12s; } .js .heros.ouvert .heros-texte > :nth-child(3) { transition-delay: .24s; }
.js .heros.ouvert .heros-texte > :nth-child(4) { transition-delay: .36s; } .js .heros.ouvert .heros-texte > :nth-child(5) { transition-delay: .3s; }
@media (max-width: 899px) {
  .heros-texte { display: flex; flex-direction: column; }
  .heros-sur { order: 1; } .heros-titre { order: 2; } .heros-actions { order: 3; } .heros-intro { order: 4; }
}
@media (min-width: 900px) {
  .heros { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 56px; min-height: calc(100svh - var(--entete)); padding: 40px var(--gouttiere) 60px !important; max-width: 1440px; margin: 0 auto; }
  .heros-cadre { order: 2; height: min(78svh, 720px); max-width: 640px; width: 100%; justify-self: end; }
  .heros-texte { order: 1; padding-left: clamp(0px, 3vw, 40px); }
  .note { left: 22px; bottom: 44px; }
  .heros-actions .bouton { flex: none; }
  .heros-jour { left: 33%; right: auto; bottom: 40px; width: 200px; }
}

/* — la maison — */
.maison { background: linear-gradient(180deg, var(--case), #FAF2DA 70%, var(--ivoire)); display: grid; gap: 40px; }
.maison::before { content: ""; position: absolute; inset: 0; background: url("/deco/jour-clair.svg") 0 0 / 220px; opacity: .6; }
.maison-texte, .maison-photos { position: relative; z-index: 2; }
.atouts { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.atouts li { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: rgba(255, 253, 248, .75); border: 1px solid rgba(198, 161, 91, .35); font-size: 15px; line-height: 1.35; }
.atouts .ic { width: 28px; height: 28px; color: var(--or-fonce); }
.atouts strong { font: 400 22px/1 var(--titres); color: var(--encre); margin-right: 3px; }
.maison-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp1 { grid-column: 1 / -1; aspect-ratio: 3 / 2; border-radius: 200px 200px var(--rayon) var(--rayon); overflow: hidden; }
.mp2, .mp3 { aspect-ratio: 3 / 4; border-radius: var(--rayon); overflow: hidden; box-shadow: 0 0 0 1px rgba(198, 161, 91, .5); }
.mp3 { margin-top: 30px; }
@media (min-width: 900px) {
  .maison { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 70px; padding-left: max(var(--gouttiere), calc((100vw - 1280px) / 2)) !important; padding-right: max(var(--gouttiere), calc((100vw - 1280px) / 2)) !important; }
  .maison-photos { grid-template-columns: 1.2fr 1fr; }
  .mp1 { grid-column: 1 / -1; }
}

/* — une journée au Tsilaosa — */
.journee { padding: clamp(64px, 9vw, 120px) 0 !important; background: var(--ivoire); }
.journee-tete { max-width: 760px; margin: 0 auto 30px; padding: 0 var(--gouttiere); text-align: center; }
.journee-tete .surtitre { justify-content: center; }
.moments { list-style: none; margin: 0; padding: 0; }
.moment { position: relative; overflow: hidden; display: grid; gap: 22px; padding: 70px var(--gouttiere) 120px; --ciel: #F4EEE2; --ciel-2: #F4EEE2; background: linear-gradient(180deg, var(--ciel), var(--ciel-2)); }
.moment-matin { --ciel: #F7E6DA; --ciel-2: #F3D7C4; }
.moment-jour { --ciel: #E6EFF0; --ciel-2: #D3E3E2; }
.moment-apres { --ciel: #F7E9C9; --ciel-2: #EFD29A; }
.moment-soir { --ciel: #6E5260; --ciel-2: #3A2B36; color: #F3E7DD; }
.moment-nuit { --ciel: #1E2530; --ciel-2: var(--nuit); color: #EDE5D6; }
.moment-soir h3, .moment-nuit h3 { color: var(--dentelle); }
.moment-nuit::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1.4px 1.4px at 12% 18%, #FFF6DD 50%, transparent), radial-gradient(1.2px 1.2px at 32% 9%, #FFF6DD 50%, transparent), radial-gradient(1.6px 1.6px at 58% 22%, #FFF6DD 50%, transparent), radial-gradient(1.1px 1.1px at 74% 12%, #FFF6DD 50%, transparent), radial-gradient(1.3px 1.3px at 88% 30%, #FFF6DD 50%, transparent), radial-gradient(1px 1px at 45% 35%, #FFF6DD 50%, transparent), radial-gradient(1.2px 1.2px at 22% 40%, #FFF6DD 50%, transparent); opacity: .8; }
.astre { position: absolute; z-index: 0; top: 34px; left: 12%; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle, #FFF3D6 0 40%, rgba(255, 220, 150, .55) 41%, transparent 70%); }
.moment-jour .astre { left: 70%; top: 18px; } .moment-apres .astre { left: 84%; top: 60px; background: radial-gradient(circle, #FFE3A6 0 40%, rgba(240, 170, 80, .5) 41%, transparent 70%); }
.moment-soir .astre { left: 6%; top: 70px; background: radial-gradient(circle, #F6B38A 0 40%, rgba(230, 120, 90, .45) 41%, transparent 70%); }
.moment-nuit .astre { left: 78%; top: 30px; width: 54px; height: 54px; background: radial-gradient(circle at 38% 40%, #FFF6DD 0 45%, transparent 46%), radial-gradient(circle, rgba(255, 246, 221, .25), transparent 70%); }
.moment-cretes { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; }
.moment-soir .cretes-fond, .moment-nuit .cretes-fond { fill: rgba(10, 8, 6, .45); }
.moment-photo, .moment-texte { position: relative; z-index: 2; }
.moment-photo { aspect-ratio: 4 / 3; border-radius: 160px 160px var(--rayon) var(--rayon); overflow: hidden; box-shadow: 0 0 0 1px rgba(198, 161, 91, .6), 0 24px 50px -28px rgba(0, 0, 0, .6); max-width: 560px; }
.moment-heure { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--or-fonce); padding: 9px 14px; border-radius: 999px; background: rgba(255, 253, 248, .7); border: 1px solid rgba(198, 161, 91, .45); }
.moment-soir .moment-heure, .moment-nuit .moment-heure { color: var(--or-clair); background: rgba(21, 18, 15, .45); }
.moment-texte h3 { font-size: clamp(26px, 3vw, 38px); margin-top: 18px; }
.moment-texte p:last-child { max-width: 520px; }
.journee-actions { justify-content: center; padding: 34px var(--gouttiere) 0; margin: 0; }
@media (min-width: 900px) {
  .moment { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 70px; padding: 100px max(var(--gouttiere), calc((100vw - 1200px) / 2)) 150px; }
  .moment:nth-child(even) .moment-photo { order: 2; }
  .moment-photo { justify-self: center; width: 100%; }
}

/* — aperçu des chambres — */
.apercu-chambres { background: linear-gradient(180deg, var(--rose), #F7EDE6); }
.apercu-chambres::before { content: ""; position: absolute; inset: 0; background: url("/deco/jour-clair.svg") 0 0 / 220px; opacity: .55; }
.cartes-chambres { position: relative; z-index: 2; list-style: none; padding: 0; margin: 0 auto; max-width: 1200px; display: grid; gap: 22px; }
.carte-chambre a { display: block; text-decoration: none; color: inherit; background: var(--dentelle); border-radius: 180px 180px 10px 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(198, 161, 91, .45), 0 24px 40px -30px rgba(36, 29, 23, .5); transition: transform .4s var(--ease); }
.carte-chambre a:hover { transform: translateY(-6px); }
.carte-chambre figure { aspect-ratio: 4 / 3; overflow: hidden; }
.carte-chambre img { transition: transform 1s var(--ease); }
.carte-chambre a:hover img { transform: scale(1.04); }
.carte-texte { display: grid; gap: 6px; padding: 20px 22px 24px; }
.carte-nombre { font: 600 12px/1 var(--corps); letter-spacing: .18em; text-transform: uppercase; color: var(--or-fonce); }
.carte-nom { font: 400 27px/1.15 var(--titres); color: var(--encre); }
.carte-faits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 15px; color: var(--doux); }
.carte-faits .ic { width: 20px; height: 20px; color: var(--or-fonce); }
.carte-voir { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 600; color: var(--encre); padding: 12px 18px; border-radius: 999px; border: 1.5px solid var(--encre); width: fit-content; min-height: 48px; }
.carte-voir .ic { width: 18px; height: 18px; }
@media (min-width: 760px) { .cartes-chambres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* — avis — */
.avis { background: url("/deco/jour-nuit.svg") 0 0 / 220px, radial-gradient(80% 60% at 20% 0%, #3A2F24, transparent 70%), var(--nuit); color: #E9DFCF; }
.avis-tete { position: relative; z-index: 2; display: grid; gap: 30px; max-width: 1200px; margin: 0 auto; align-items: center; }
.avis-note { display: grid; justify-items: start; gap: 8px; }
.avis-chiffre { font: 400 clamp(110px, 18vw, 200px)/.85 var(--titres); color: var(--or); }
.avis-etoiles { display: flex; gap: 4px; color: var(--or); } .avis-etoiles .ic { fill: currentColor; stroke: none; width: 22px; height: 22px; }
.avis-nb { font-size: 17px; color: var(--or-clair); max-width: 280px; }
.avis-grande { position: relative; border-radius: 200px 200px var(--rayon) var(--rayon); overflow: hidden; aspect-ratio: 4 / 5; max-height: 640px; box-shadow: 0 0 0 1px rgba(198, 161, 91, .6); }
.avis-grande blockquote { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 70px 22px 24px; background: linear-gradient(180deg, transparent, rgba(21, 18, 15, .92) 45%); }
.avis-grande blockquote p { font: 400 clamp(23px, 2.4vw, 32px)/1.25 var(--titres); color: var(--dentelle); margin-bottom: 10px; }
cite { font: 600 13px/1.3 var(--corps); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--or); }
.avis-etiquette { position: relative; z-index: 2; max-width: 560px; margin: 40px auto 0; padding: 26px 26px 22px; background: var(--dentelle); color: var(--encre); border-radius: 10px; transform: rotate(-1.5deg); box-shadow: 0 0 0 1px var(--or), 0 0 0 6px var(--dentelle), 0 0 0 7px rgba(198, 161, 91, .6), 0 30px 40px -24px rgba(0, 0, 0, .7); }
.js .avis-etiquette.r.vu { transform: rotate(-1.5deg); }
.avis-etiquette p { font: 400 clamp(22px, 2.4vw, 30px)/1.25 var(--titres); margin-bottom: 10px; }
.avis-etiquette cite { color: var(--or-fonce); }
.bande { position: relative; z-index: 2; margin: 46px calc(-1 * var(--gouttiere)) 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.bande::-webkit-scrollbar { display: none; }
.bande-liste { list-style: none; margin: 0; padding: 0 var(--gouttiere) 6px; display: flex; gap: 14px; width: max-content; }
.bande-avis { scroll-snap-align: start; width: min(78vw, 330px); padding: 22px; border-radius: 14px; border: 1px solid rgba(198, 161, 91, .4); background: rgba(255, 253, 248, .04); }
.bande-avis:nth-child(3n+2) { background: rgba(198, 161, 91, .12); }
.bande-avis p { font-size: 16px; color: #EFE6D6; margin-bottom: 12px; }
@media (min-width: 900px) {
  .avis-tete { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 70px; }
  .avis-grande { aspect-ratio: 4 / 4.4; }
  .avis-etiquette { margin-top: -40px; margin-left: 6%; }
  .bande-liste { padding-left: max(var(--gouttiere), calc((100vw - 1200px) / 2)); }
}
.avis-court .avis-actions { position: relative; z-index: 2; justify-content: center; }
.avis .bouton-trait { border-color: var(--or-clair); color: var(--or-clair); background: transparent; }

/* — coffrets (accueil) — */
.coffrets-apercu { background: linear-gradient(160deg, var(--brume), var(--ivoire)); display: grid; gap: 30px; align-items: center; }
.coffrets-carte { position: relative; z-index: 2; padding: 34px 24px; background: var(--dentelle); border-radius: 12px; box-shadow: 0 0 0 1px rgba(198, 161, 91, .5), 0 30px 50px -36px rgba(36, 29, 23, .6); overflow: hidden; }
.coffrets-carte .jour { right: -50px; top: -50px; width: 190px; opacity: .55; }
.coffrets-carte > :not(.jour) { position: relative; }
.coffrets-photo { position: relative; z-index: 2; aspect-ratio: 4 / 5; max-width: 420px; justify-self: center; width: 100%; border-radius: 999px 999px 10px 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(198, 161, 91, .6), 0 0 0 7px var(--ivoire), 0 0 0 8px rgba(198, 161, 91, .45); }
@media (min-width: 900px) { .coffrets-apercu { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr); gap: 70px; padding-left: max(var(--gouttiere), calc((100vw - 1200px) / 2)) !important; padding-right: max(var(--gouttiere), calc((100vw - 1200px) / 2)) !important; } .coffrets-carte { padding: 54px 50px; } }

/* — réserver (fin de page) — */
.reserver { background: linear-gradient(180deg, #5B7671, var(--piton) 45%, var(--piton-fonce)); color: #EDE6D8; text-align: center; padding-bottom: 0 !important; }
.reserver-fond { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; }
.reserver-fond .cretes-fond { fill: rgba(21, 18, 15, .45); }
.reserver-carte { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 46px 22px 40px; border-radius: 300px 300px 12px 12px; background: url("/deco/jour-nuit.svg") 0 0 / 220px, var(--nuit); box-shadow: 0 0 0 1px var(--or), 0 0 0 8px rgba(21, 18, 15, .6), 0 0 0 9px rgba(198, 161, 91, .4), 0 40px 70px -40px rgba(0, 0, 0, .8); transform: translateY(0); margin-bottom: clamp(60px, 9vw, 120px); }
.reserver-logo { width: 64px; height: 64px; color: var(--or); margin: 0 auto 16px; display: block; }
.reserver-carte .surtitre { justify-content: center; color: var(--or); }
.reserver-carte .surtitre::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.reserver-carte h2 { color: var(--dentelle); }
.reserver-carte p { color: #D9CFBE; max-width: 560px; margin-left: auto; margin-right: auto; }
.reserver-carte .actions { justify-content: center; }
.reserver .fanjan .tige { stroke: #9DB59C; } .reserver .fanjan .pennes { fill: #9DB59C; opacity: .6; }

/* — pied — */
.pied { background: var(--nuit); color: #CFC4B2; padding: 70px var(--gouttiere) 110px; font-size: 15px; }
.pied .lambrequins { fill: var(--piton-fonce); filter: none; }
.pied .lambrequins .trou { fill: rgba(0, 0, 0, .35); }
.pied-haut { text-align: center; margin-bottom: 40px; }
.pied-logo { width: 70px; height: 70px; color: var(--or); }
.pied-nom { font: 400 30px/1 var(--titres); letter-spacing: .24em; text-transform: uppercase; color: var(--dentelle); margin: 14px 0 6px; }
.pied-sous { color: var(--or); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.pied-plan { display: grid; gap: 30px; max-width: 1200px; margin: 0 auto 30px; }
.pied-plan nav { display: grid; gap: 2px; }
.pied-plan nav a { text-decoration: none; padding: 8px 0; min-height: 40px; color: #E9DFCF; }
.pied-titre { font: 600 12px/1 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--or); margin-bottom: 12px; }
.pied-contact { display: flex; align-items: flex-start; gap: 12px; text-decoration: none; margin: 0 0 12px; color: #E9DFCF; }
.pied-contact .ic { color: var(--or); }
.pied-resa { display: grid; gap: 12px; align-content: start; }
.pied-petit { max-width: 1200px; margin: 0 auto 8px; font-size: 13px; color: #A99D89; text-align: center; }
@media (min-width: 900px) { .pied-plan { grid-template-columns: 1fr 1.3fr 1fr; } .pied { padding-bottom: 50px; } }

/* — la barre du bas au téléphone — */
.barre-appel { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom)); background: rgba(21, 18, 15, .95); border-top: 1px solid rgba(198, 161, 91, .4); }
.barre-appel .bouton { min-height: 50px; padding: 10px 14px; }
@media (min-width: 900px) { .barre-appel { display: none; } }

/* — hauts des pages intérieures — */
.tete-page { background: radial-gradient(100% 70% at 10% 0%, rgba(233, 215, 168, .5), transparent 60%), url("/deco/jour-clair.svg") 0 0 / 220px, var(--ivoire); display: grid; gap: 24px; padding-top: 18px !important; padding-bottom: 50px !important; }
.tete-photo { position: relative; z-index: 2; height: clamp(210px, calc(100svh - 460px), 500px); border-radius: 999px 999px var(--rayon) var(--rayon); overflow: hidden; box-shadow: 0 0 0 1px rgba(198, 161, 91, .6), 0 0 0 7px var(--ivoire), 0 0 0 8px rgba(198, 161, 91, .5), 0 30px 60px -30px rgba(36, 29, 23, .55); }
.tete-photo img { transform: scale(1.06); transition: transform 2.2s var(--ease); }
.tete-page.ouvert .tete-photo img { transform: none; }
.tete-solarium img { object-position: 18% 40%; }
.tete-enseigne img { object-position: 50% 40%; }
.tete-texte { position: relative; z-index: 2; }
.tete-texte h1 { font-size: clamp(28px, 6.6vw, 54px); }
.tete-texte > p:not(.surtitre) { color: var(--doux); max-width: 560px; }
.js .tete-texte > * { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .tete-page.ouvert .tete-texte > * { opacity: 1; transform: none; }
.js .tete-page.ouvert .tete-texte > :nth-child(2) { transition-delay: .12s; } .js .tete-page.ouvert .tete-texte > :nth-child(3) { transition-delay: .24s; } .js .tete-page.ouvert .tete-texte > :nth-child(4) { transition-delay: .32s; }
@media (min-width: 900px) {
  .tete-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 60px; min-height: min(calc(100svh - var(--entete)), 820px); padding-left: max(var(--gouttiere), calc((100vw - 1300px) / 2)) !important; padding-right: max(var(--gouttiere), calc((100vw - 1300px) / 2)) !important; }
  .tete-photo { order: 2; height: min(72svh, 680px); max-width: 620px; width: 100%; justify-self: end; }
}

/* — chambres : la visite — */
.visite { display: grid; gap: 30px; background: linear-gradient(180deg, var(--ivoire), var(--dentelle)); }
.visite::before { content: ""; position: absolute; inset: 0; background: url("/deco/jour-clair.svg") 0 0 / 220px; opacity: .5; }
.visite-inverse { background: linear-gradient(180deg, var(--rose), #F8EEE8); }
.visite-suite { background: linear-gradient(180deg, var(--case), #FBF4DF); }
.visite-inverse .jour { right: 4%; bottom: 30px; }
.visite-photos { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.visite-photos .v1 { grid-column: 1 / -1; aspect-ratio: 3 / 2; border-radius: 220px 220px var(--rayon) var(--rayon); overflow: hidden; box-shadow: 0 0 0 1px rgba(198, 161, 91, .55), 0 26px 50px -32px rgba(36, 29, 23, .6); }
.visite-photos .v2, .visite-photos .v3 { aspect-ratio: 1; border-radius: var(--rayon); overflow: hidden; box-shadow: 0 0 0 1px rgba(198, 161, 91, .5); }
.visite-texte { position: relative; z-index: 2; }
.visite-nombre { font: 600 12.5px/1 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--or-fonce); }
.visite-texte h2 { font-size: clamp(32px, 4vw, 52px); }
.faits { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.faits li { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: rgba(255, 253, 248, .8); border: 1px solid rgba(198, 161, 91, .35); font-size: 15px; line-height: 1.3; }
.faits .ic { width: 26px; height: 26px; color: var(--or-fonce); }
@media (min-width: 900px) {
  .visite { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 70px; padding-left: max(var(--gouttiere), calc((100vw - 1280px) / 2)) !important; padding-right: max(var(--gouttiere), calc((100vw - 1280px) / 2)) !important; }
  .visite-inverse .visite-photos { order: 2; }
}
.equipements { background: linear-gradient(180deg, var(--brume), #EEF2EE); }
.grille-equip { position: relative; z-index: 2; list-style: none; padding: 0; margin: 0 auto; max-width: 1100px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grille-equip li { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 10px; background: rgba(255, 253, 248, .85); border: 1px solid rgba(63, 90, 87, .18); font-size: 15px; line-height: 1.3; }
.grille-equip .ic { width: 26px; height: 26px; color: var(--piton); }
@media (min-width: 760px) { .grille-equip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.details { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1100px; margin: 50px auto 0; }
.details .d1 { grid-column: 1 / -1; aspect-ratio: 3 / 2; border-radius: var(--rayon); overflow: hidden; }
.details .d1 img { object-position: 50% 35%; }
.details .d2, .details .d3 { aspect-ratio: 3 / 4; border-radius: 160px 160px var(--rayon) var(--rayon); overflow: hidden; }
@media (min-width: 900px) { .details { grid-template-columns: 2fr 1fr 1fr; align-items: end; } .details .d1 { grid-column: auto; } }

/* — séjour — */
.petit-dej { background: linear-gradient(180deg, var(--case), #FBF3DC); display: grid; gap: 30px; }
.petit-dej .jour { right: -40px; top: 60px; opacity: .6; }
.petit-dej-texte, .petit-dej-photo { position: relative; z-index: 2; }
.petit-dej-photo { aspect-ratio: 3 / 2; border-radius: 220px 220px var(--rayon) var(--rayon); overflow: hidden; box-shadow: 0 0 0 1px rgba(198, 161, 91, .6), 0 0 0 7px #FBF3DC, 0 0 0 8px rgba(198, 161, 91, .45); }
.citation { margin: 24px 0 0; padding: 20px 22px; border-left: 2px solid var(--or); background: rgba(255, 253, 248, .7); border-radius: 0 10px 10px 0; }
.citation p { font: 400 22px/1.3 var(--titres); color: var(--encre); margin-bottom: 8px; }
.citation cite { color: var(--or-fonce); }
@media (min-width: 900px) { .petit-dej { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 70px; padding-left: max(var(--gouttiere), calc((100vw - 1280px) / 2)) !important; padding-right: max(var(--gouttiere), calc((100vw - 1280px) / 2)) !important; } }
.carnotzet { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 46px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 92px), radial-gradient(90% 60% at 50% 0%, #4A3A2A, transparent 70%), var(--nuit-2); color: #E5DACA; }
.carnotzet-tete { position: relative; z-index: 2; max-width: 760px; margin: 0 auto 40px; text-align: center; }
.carnotzet-tete .surtitre { justify-content: center; color: var(--or); }
.carnotzet h2 { color: var(--dentelle); }
.carnotzet-photos { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1200px; margin: 0 auto; }
.carnotzet-photos .c2 { grid-column: 1 / -1; order: -1; aspect-ratio: 3 / 2; border-radius: 220px 220px var(--rayon) var(--rayon); overflow: hidden; box-shadow: 0 0 0 1px var(--or); }
.carnotzet-photos .c1, .carnotzet-photos .c3 { aspect-ratio: 3 / 4; border-radius: var(--rayon); overflow: hidden; box-shadow: 0 0 0 1px rgba(198, 161, 91, .6); }
.carnotzet-photos .c1 img { object-position: 40% 40%; }
@media (min-width: 900px) { .carnotzet-photos { grid-template-columns: 1fr 1.5fr 1fr; align-items: center; } .carnotzet-photos .c2 { grid-column: auto; order: 0; aspect-ratio: 4 / 5; } }
.cases-nuit, .cases { list-style: none; padding: 0; margin: 34px auto 0; display: grid; gap: 10px; max-width: 1100px; position: relative; z-index: 2; }
.cases-nuit li { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 10px; border: 1px solid rgba(198, 161, 91, .4); background: rgba(21, 18, 15, .45); font-size: 15.5px; line-height: 1.35; }
.cases-nuit .ic { width: 28px; height: 28px; color: var(--or); }
.cases-nuit strong { color: var(--dentelle); font-weight: 600; }
@media (min-width: 760px) { .cases-nuit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carnotzet .actions { justify-content: center; position: relative; z-index: 2; }
.bien-etre { background: linear-gradient(180deg, var(--brume), #DCE5DF); display: grid; gap: 34px; }
.bien-etre-photos { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.bien-etre-photos .b1 { aspect-ratio: 3 / 4; border-radius: 999px 999px var(--rayon) var(--rayon); overflow: hidden; box-shadow: 0 0 0 1px rgba(198, 161, 91, .6); }
.bien-etre-photos .b2 { aspect-ratio: 3 / 4; border-radius: var(--rayon); overflow: hidden; margin-bottom: 40px; box-shadow: 0 0 0 1px rgba(198, 161, 91, .6); }
.bien-etre-photos .b2 img { object-position: 35% 50%; }
.bien-etre-texte { position: relative; z-index: 2; }
.cases { margin: 22px 0 0; }
.cases li { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 10px; background: rgba(255, 253, 248, .8); border: 1px solid rgba(63, 90, 87, .2); font-size: 15.5px; line-height: 1.35; }
.cases .ic { width: 28px; height: 28px; color: var(--piton); }
@media (min-width: 900px) { .bien-etre { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 70px; padding-left: max(var(--gouttiere), calc((100vw - 1280px) / 2)) !important; padding-right: max(var(--gouttiere), calc((100vw - 1280px) / 2)) !important; } }
.coffrets { background: url("/deco/jour-clair.svg") 0 0 / 220px, linear-gradient(180deg, var(--ivoire), var(--rose)); }
.coffrets > .jour { left: -40px; top: 80px; opacity: .6; }
.liste-coffrets { position: relative; z-index: 2; list-style: none; padding: 0; margin: 0 auto; max-width: 1100px; display: grid; gap: 12px; }
.coffret { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 18px; background: var(--dentelle); border-radius: 12px; box-shadow: 0 0 0 1px rgba(198, 161, 91, .45); }
.coffret .ic { grid-row: span 2; width: 30px; height: 30px; color: var(--or-fonce); }
.coffret-nom { font: 400 23px/1.15 var(--titres); color: var(--encre); }
.coffret-quoi { grid-column: 2; font-size: 14.5px; line-height: 1.4; color: var(--doux); }
.coffret-prix { grid-row: 1 / span 2; grid-column: 3; font: 400 26px/1 var(--titres); color: var(--or-fonce); white-space: nowrap; }
.coffret-fort { background: var(--nuit); box-shadow: 0 0 0 1px var(--or); }
.coffret-fort .coffret-nom { color: var(--dentelle); } .coffret-fort .coffret-quoi { color: #CFC4B2; } .coffret-fort .ic, .coffret-fort .coffret-prix { color: var(--or); }
@media (min-width: 760px) { .liste-coffrets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.coffrets .actions { justify-content: center; position: relative; z-index: 2; }

/* — alentours — */
.sentiers { background: linear-gradient(180deg, #E7EEEB, #D5E1DC); padding-bottom: 180px !important; }
.sentiers-fond { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; }
.liste-sentiers { position: relative; z-index: 2; list-style: none; padding: 0; margin: 0 auto; max-width: 900px; display: grid; gap: 10px; counter-reset: s; }
.liste-sentiers li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 999px; background: rgba(255, 253, 248, .85); border: 1px solid rgba(63, 90, 87, .25); }
.liste-sentiers .ic { width: 26px; height: 26px; color: var(--piton); }
.sentier-nom { font: 400 22px/1.2 var(--titres); color: var(--encre); }
.sentier-sommet { background: var(--piton) !important; } .sentier-sommet .ic, .sentier-sommet .sentier-nom { color: var(--dentelle); }
@media (min-width: 760px) { .liste-sentiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sentier-sommet { grid-column: 1 / -1; justify-content: center; } }
.loisirs { background: url("/deco/jour-clair.svg") 0 0 / 220px, var(--ivoire); }
.grille-loisirs { position: relative; z-index: 2; list-style: none; padding: 0; margin: 0 auto; max-width: 1200px; display: grid; gap: 14px; }
.loisir { padding: 22px; border-radius: 12px; background: var(--dentelle); box-shadow: 0 0 0 1px rgba(198, 161, 91, .4); }
.loisir .ic { width: 32px; height: 32px; color: var(--or-fonce); margin-bottom: 10px; }
.loisir h3 { font-size: 25px; margin-bottom: 6px; }
.loisir p { font-size: 15.5px; margin: 0; color: var(--doux); }
.loisir:nth-child(4n+1) { background: var(--case); } .loisir:nth-child(4n+3) { background: var(--rose); }
@media (min-width: 640px) { .grille-loisirs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grille-loisirs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vue-balcon { background: linear-gradient(180deg, var(--case), #FBF3DC); display: grid; gap: 30px; align-items: center; }
.vue-photo { position: relative; z-index: 2; aspect-ratio: 3 / 2; border-radius: 220px 220px var(--rayon) var(--rayon); overflow: hidden; box-shadow: 0 0 0 1px rgba(198, 161, 91, .6); }
.vue-photo img { object-position: 30% 50%; }
.vue-texte { position: relative; z-index: 2; }
.vue-texte .jour { right: -30px; top: -60px; width: 150px; opacity: .6; }
@media (min-width: 900px) { .vue-balcon { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 70px; padding-left: max(var(--gouttiere), calc((100vw - 1280px) / 2)) !important; padding-right: max(var(--gouttiere), calc((100vw - 1280px) / 2)) !important; } }

/* — infos — */
.reserver-direct { background: url("/deco/jour-clair.svg") 0 0 / 220px, linear-gradient(180deg, var(--ivoire), var(--dentelle)); }
.reserver-direct > .jour { right: -40px; top: 60px; opacity: .55; }
.etapes { position: relative; z-index: 2; list-style: none; padding: 0; margin: 0 auto; max-width: 1150px; display: grid; gap: 16px; }
.etape { position: relative; padding: 30px 24px 26px; border-radius: 160px 160px 12px 12px; background: var(--dentelle); box-shadow: 0 0 0 1px rgba(198, 161, 91, .5), 0 26px 40px -34px rgba(36, 29, 23, .6); text-align: center; display: grid; justify-items: center; }
.etape > .ic { width: 34px; height: 34px; color: var(--or-fonce); margin: 6px 0 10px; }
.etape-n { font: 400 46px/1 var(--titres); color: var(--or); }
.etape p { font-size: 15.5px; color: var(--doux); }
.etape .bouton { margin-top: auto; }
@media (min-width: 860px) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.contact-infos { background: linear-gradient(180deg, var(--brume), #DDE6E1); }
.contact-grille { position: relative; z-index: 2; display: grid; gap: 24px; max-width: 1200px; margin: 0 auto; }
.cles { margin: 0; display: grid; gap: 10px; }
.cles > div { display: grid; gap: 4px; padding: 16px; border-radius: 10px; background: rgba(255, 253, 248, .85); border: 1px solid rgba(63, 90, 87, .2); }
.cles dt { display: flex; align-items: center; gap: 10px; font: 600 12.5px/1.2 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--piton); }
.cles dt .ic { width: 26px; height: 26px; }
.cles dd { margin: 0 0 0 36px; font-size: 16px; color: var(--encre); }
.venir { position: relative; overflow: hidden; padding: 34px 24px 120px; border-radius: 12px; background: var(--nuit); color: #DCD2C2; }
.venir h2 { color: var(--dentelle); font-size: clamp(26px, 3vw, 38px); }
.venir .surtitre { color: var(--or); }
.venir .venir-cretes { position: absolute; left: 0; right: 0; bottom: 0; }
.venir .cretes-fond { fill: rgba(63, 90, 87, .55); }
.venir > :not(.cretes) { position: relative; z-index: 2; }
@media (min-width: 900px) { .contact-grille { grid-template-columns: 1fr 1fr; align-items: stretch; } .venir { padding: 50px 44px 150px; } }
.faq { background: linear-gradient(180deg, var(--rose), #F8EEE8); }
.faq-liste { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--dentelle); border-radius: 12px; box-shadow: 0 0 0 1px rgba(198, 161, 91, .4); }
.faq summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; min-height: 60px; cursor: pointer; list-style: none; font: 400 22px/1.25 var(--titres); color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { width: 28px; height: 28px; color: var(--or-fonce); }
.faq summary::after { content: "+"; margin-left: auto; font: 300 28px/1 var(--corps); color: var(--or-fonce); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 20px 20px 62px; margin: 0; font-size: 16px; }