/* La Villa des Oliviers · démo Vixya du 20 octobre 2026
   Direction : « chaque fenêtre donne sur l'océan ». Photos dans des fenêtres à cadre noir, ligne d'horizon qui court
   d'une section à l'autre, brins d'olivier qui se tracent, matières de la villa (chaux, pierre, océan, couchant, nuit). */

@font-face { font-family: "Labrada"; src: url("/polices/labrada.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Labrada"; src: url("/polices/labrada-italique.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Proza Libre"; src: url("/polices/proza.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Proza Libre"; src: url("/polices/proza-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Proza Libre"; src: url("/polices/proza-italique.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --chaux: #F3EEE3; --lin: #E9DFCC; --sable: #E4D8C4; --pierre: #B49879; --pierre-fonce: #8C7357;
  --sauge: #9DAF83; --sauge-pale: #DCE3CC; --olive: #4F5E35; --olive-fonce: #333D22;
  --encre: #1D211B; --ocean: #25536F; --ocean-nuit: #112838; --turquoise: #8FCFD6; --couchant: #E9A27A; --rose: #E6B9A6;
  --victoria: #C9A13B; --geranium: #C8664A; --carambole: #7E9A55; --vanille: #A8865A;
  --titres: "Labrada", Georgia, serif; --texte: "Proza Libre", "Segoe UI", sans-serif;
  --bord: clamp(16px, 4vw, 48px); --max: 1240px;
  --cadre: 10px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--chaux); color: var(--encre); font: 400 17px/1.6 var(--texte); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titres); font-weight: 500; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(31px, 5.4vw, 64px); }
h2 { font-size: clamp(27px, 3.6vw, 46px); }
h3 { font-size: clamp(21px, 2vw, 26px); }
h1 em, h2 em { font-style: italic; color: var(--olive); }
p { margin: 0 0 1em; }
.surtitre { font: 600 13px/1.3 var(--texte); letter-spacing: .16em; text-transform: uppercase; color: var(--olive); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.surtitre::before { content: ""; width: 34px; height: 1px; background: currentColor; flex: none; }
:focus-visible { outline: 3px solid var(--couchant); outline-offset: 3px; }

/* — Les boutons — */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.actions-centre { justify-content: center; }
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; border-radius: 2px; font: 600 16px/1.2 var(--texte); text-decoration: none; text-align: center; position: relative; transition: background .3s, color .3s, transform .3s; }
.bouton-plein { background: var(--encre); color: var(--chaux); box-shadow: 4px 4px 0 var(--sauge); }
.bouton-plein:hover { background: var(--olive-fonce); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sauge); }
.bouton-trait { border: 1.5px solid var(--encre); color: var(--encre); }
.bouton-trait:hover { background: var(--encre); color: var(--chaux); }
.bouton-clair { background: var(--chaux); color: var(--encre); box-shadow: 4px 4px 0 var(--couchant); }
.bouton-clair:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--couchant); }
.bouton-trait-clair { border: 1.5px solid var(--chaux); color: var(--chaux); }
.bouton-trait-clair:hover { background: var(--chaux); color: var(--encre); }

/* — L'en-tête — */
.entete { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px var(--bord); background: rgb(243 238 227 / .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgb(29 33 27 / .1); min-height: 64px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.logo-signe { position: relative; width: 40px; height: 40px; flex: none; }
.logo-croissant { position: absolute; inset: 0; width: 40px; height: 40px; color: var(--sauge); }
.logo-brin { position: absolute; left: 15px; top: 2px; width: 18px; height: 36px; color: var(--olive); }
.logo-nom { font: italic 500 19px/1.05 var(--titres); white-space: nowrap; }
.apercu { font: 600 11px/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px; border: 1px solid var(--pierre-fonce); color: var(--pierre-fonce); border-radius: 2px; flex: none; }
.nav { display: none; }
.entete-resa { margin-left: auto; min-height: 44px; padding: 10px 16px; font-size: 15px; box-shadow: none; }
/* Le bouton menu : pilule pleine couleur olive, avec le mot « Menu » (règle du 23 octobre), distincte du bouton Réserver encre */
.menu-bouton { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 14px; border-radius: 999px; background: var(--olive); border: 0; font: 600 15px var(--texte); color: var(--chaux); cursor: pointer; flex: none; box-shadow: 0 8px 18px -10px rgb(79 94 53 / .9); }
.menu-traits { display: grid; gap: 6px; width: 22px; }
.menu-traits span { height: 2px; background: currentColor; transition: transform .3s; }
.menu-ouvert .menu-traits span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-ouvert .menu-traits span:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 480px) {
  .logo-nom { font-size: 17px; } .logo-nom span { display: block; } .entete { gap: 6px; } .entete-resa { padding: 10px 11px; font-size: 14px; }
  .apercu { font-size: 9px; padding: 5px 5px; letter-spacing: .05em; }
  .menu-bouton { padding: 0 12px 0 11px; gap: 7px; font-size: 14px; }
  .menu-traits { width: 18px; gap: 5px; }
  .menu-ouvert .menu-traits span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-ouvert .menu-traits span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}
@media (max-width: 400px) { .logo { gap: 6px; } .logo-nom { font-size: 15px; } }
@media (max-width: 379px) {
  .entete { gap: 5px; padding-inline: 12px; }
  .logo-signe, .logo-croissant { width: 30px; height: 30px; } .logo-brin { left: 11px; top: 1px; width: 14px; height: 28px; }
  .logo-nom { font-size: 14px; }
  .entete-resa { padding: 10px 9px; font-size: 13.5px; }
  .menu-bouton { padding: 0 11px 0 10px; gap: 6px; }
}
@media (max-width: 359px) { .apercu { display: none; } }
@media (max-width: 1099px) {
  /* hauteur explicite : le flou de l’en-tête (backdrop-filter) fait de lui le repère du menu fixe, bottom: 0 le réduisait à 68 px (23 octobre) */
  .menu-ouvert .nav { display: flex; flex-direction: column; position: fixed; top: 64px; left: 0; right: 0; bottom: auto; height: calc(100vh - 64px); height: calc(100dvh - 64px); padding: 28px var(--bord) 40px; background: var(--chaux); gap: 4px; overflow-y: auto; }
  .nav a:not(.bouton) { font: 500 28px/1.2 var(--titres); text-decoration: none; padding: 10px 0; border-bottom: 1px solid rgb(29 33 27 / .12); }
  .nav a[aria-current] { color: var(--olive); font-style: italic; }
  .nav .bouton { margin-top: 14px; }
}
@media (min-width: 1100px) {
  .menu-bouton, .entete-resa { display: none; }
  .nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
  .nav a:not(.bouton) { text-decoration: none; font-size: 15px; padding: 6px 0; background: linear-gradient(var(--olive), var(--olive)) left bottom / 0 1.5px no-repeat; transition: background-size .35s; }
  .nav a:not(.bouton):hover, .nav a[aria-current] { background-size: 100% 1.5px; }
  .nav .nav-tel { display: none; }
  .nav .bouton { min-height: 44px; padding: 10px 18px; font-size: 15px; box-shadow: none; }
  .logo-nom { font-size: 22px; }
}

/* — Les fenêtres : toutes les photos sont posées dans un cadre noir, comme les baies de la villa — */
.fenetre { position: relative; margin: 0; background: var(--encre); padding: var(--cadre); border-radius: 3px; box-shadow: 0 30px 50px -30px rgb(17 40 56 / .55), 0 2px 0 rgb(255 255 255 / .2) inset; }
.fenetre .vitre { display: block; overflow: hidden; position: relative; aspect-ratio: 4 / 3; background: #2a3a44; }
.fenetre .vitre img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); will-change: transform; }
.fenetre .vitre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgb(255 255 255 / .16), transparent 34%); pointer-events: none; }
.fenetre.meneau .vitre::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 62%; width: var(--cadre); background: var(--encre); }
.fenetre figcaption { color: var(--chaux); font: italic 400 15px/1.3 var(--titres); padding: 10px 4px 2px; }
.fenetre-haute .vitre { aspect-ratio: 3 / 4; }
.fenetre-large .vitre { aspect-ratio: 3 / 2; }
.fenetre-petite .vitre { aspect-ratio: 1 / 1; }

/* — La ligne d'horizon — */
.horizon { position: absolute; left: 0; right: 0; top: var(--h, 50%); height: 1px; background: linear-gradient(90deg, transparent, var(--trait, rgb(29 33 27 / .35)) 12%, var(--trait, rgb(29 33 27 / .35)) 88%, transparent); transform-origin: left; pointer-events: none; }
.js .horizon { transform: scaleX(0); }

/* — Le brin d'olivier — */
.brin { position: absolute; pointer-events: none; width: 160px; height: auto; color: var(--olive); }
.brin .tige { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.brin .feuille { fill: color-mix(in srgb, currentColor 22%, transparent); stroke: currentColor; stroke-width: 1.4; transform-origin: 0 0; animation: feuille 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.45s); }
.js .brin .tige, .js .brin .feuille { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .brin .feuille { fill-opacity: 0; }
.brin.trace .tige, .brin.trace .feuille { stroke-dashoffset: 0; fill-opacity: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.6, 0, .2, 1), fill-opacity .8s 1s; }
.brin.trace .feuille { transition-delay: calc(.5s + var(--i) * .08s), calc(1s + var(--i) * .08s); }
@keyframes feuille { from { rotate: -5deg; } to { rotate: 6deg; } }
.a-gauche { transform: scaleX(-1); }

/* — Les fonds : jamais d'aplat — */
section { position: relative; overflow: hidden; }
.fond-chaux { background:
  radial-gradient(70% 60% at 85% 10%, rgb(255 255 255 / .8), transparent 70%),
  radial-gradient(60% 50% at 0% 100%, rgb(180 152 121 / .18), transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), var(--chaux); }
.fond-lin { background:
  radial-gradient(60% 70% at 100% 0%, rgb(233 162 122 / .22), transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 6h12M6 0v12' stroke='%238C7357' stroke-opacity='.08'/%3E%3C/svg%3E"), var(--lin); }
.fond-pierre { background-color: var(--sable); }
.fond-pierre::before, .motif-pierre { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='170' fill='none' stroke='%238C7357' stroke-opacity='.45' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M4 6h58l6 30-8 14H6zM66 4h70l-4 34H72zM140 6h56l8 22-12 20h-46zM210 4h46v40l-46 4 6-20zM4 56h44l10 34-8 18H4zM54 54h64l4 26-10 22H58l6-20zM126 56h50l14 30-16 20h-50l8-24zM196 54h60v50h-52l-12-28zM4 116h36l12 22-6 28H4zM46 112h70l-6 30 6 24H58zM122 112h64l-4 26 10 28h-62l4-24zM196 112h60v56h-58l8-30z'/%3E%3C/svg%3E") 0 0 / 260px 170px; }
.fond-pierre::before { mask-image: linear-gradient(180deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); }
.motif-pierre { opacity: .35; mask-image: radial-gradient(70% 80% at 0% 100%, #000, transparent 70%); -webkit-mask-image: radial-gradient(70% 80% at 0% 100%, #000, transparent 70%); }
.fond-sauge { background:
  radial-gradient(60% 60% at 10% 0%, rgb(255 255 255 / .35), transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M20 30c10-8 26-8 36 0-10 8-26 8-36 0zM70 90c10-8 26-8 36 0-10 8-26 8-36 0z' fill='%234F5E35' fill-opacity='.07'/%3E%3C/svg%3E"), var(--sauge-pale); }
.fond-ocean { background: radial-gradient(80% 60% at 50% 0%, rgb(143 207 214 / .25), transparent 70%), linear-gradient(180deg, var(--ocean), var(--ocean-nuit)); color: var(--chaux); }
.fond-ocean .surtitre, .fond-nuit .surtitre { color: var(--turquoise); }
.fond-ocean h2 em, .fond-nuit h2 em { color: var(--couchant); }
.fond-ocean .horizon, .fond-nuit .horizon { --trait: rgb(243 238 227 / .4); }
.fond-couchant { background: radial-gradient(50% 60% at 80% 70%, rgb(255 214 160 / .7), transparent 70%), linear-gradient(180deg, #F6D7BE 0%, #EDB596 45%, #C98C86 100%); }
.fond-couchant .surtitre { color: var(--olive-fonce); }
.fond-nuit { background: radial-gradient(60% 50% at 20% 0%, rgb(37 83 111 / .8), transparent 70%), linear-gradient(180deg, #16263A, #0D1622); color: var(--chaux); }
.fond-piscine { background: radial-gradient(70% 60% at 0% 100%, rgb(143 207 214 / .55), transparent 70%), linear-gradient(180deg, #EAF2EE, #CFE6E4); }

/* Les vagues, le soleil, les étoiles, les reflets */
.vagues { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; overflow: hidden; }
.vagues span { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='90' fill='none' stroke='%23F3EEE3' stroke-opacity='.22' stroke-width='1.3'%3E%3Cpath d='M0 40c50-14 100-14 150 0s100 14 150 0 100-14 100 0M0 64c50-12 100-12 150 0s100 12 150 0 100-12 100 0'/%3E%3C/svg%3E") repeat-x 0 0 / 400px 90px; animation: vague 26s linear infinite; }
.vagues span + span { bottom: -18px; opacity: .6; animation-duration: 38s; animation-direction: reverse; }
.fond-couchant .vagues span { filter: invert(1) brightness(.3); opacity: .5; }
@keyframes vague { to { transform: translateX(-400px); } }
.soleil { position: absolute; width: 340px; height: 340px; right: -60px; top: 18%; border-radius: 50%; background: radial-gradient(circle, #FFE7C4 0%, rgb(255 210 150 / .7) 35%, transparent 68%); pointer-events: none; animation: respire 9s ease-in-out infinite alternate; }
@keyframes respire { to { transform: scale(1.12); opacity: .85; } }
.etoiles-fond { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 62%, #fff, transparent), radial-gradient(1.6px 1.6px at 46% 12%, #fff, transparent), radial-gradient(1px 1px at 64% 40%, #fff, transparent), radial-gradient(1.4px 1.4px at 82% 22%, #fff, transparent), radial-gradient(1px 1px at 90% 70%, #fff, transparent), radial-gradient(1.2px 1.2px at 6% 84%, #fff, transparent), radial-gradient(1px 1px at 52% 88%, #fff, transparent), radial-gradient(1.2px 1.2px at 74% 92%, #fff, transparent); background-size: 520px 420px; opacity: .7; animation: scintille 5s ease-in-out infinite alternate; }
@keyframes scintille { to { opacity: .35; } }
.reflets { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.reflets span { position: absolute; inset: -50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.5'%3E%3Cpath d='M10 30c20-10 40 10 60 0s30-14 50-4M90 80c20-10 40 10 60 0s30-14 50-4M-30 100c20-10 40 10 60 0'/%3E%3C/svg%3E") 0 0 / 200px 120px; animation: reflet 18s linear infinite; }
@keyframes reflet { to { transform: translate(200px, 120px); } }

/* — Haut de page (accueil) — */
.haut { padding: 18px var(--bord) 48px; }
.haut-in { position: relative; max-width: var(--max); margin: 0 auto; display: grid; gap: 22px; }
.haut-vue { position: relative; order: -1; }
.fenetre-haut { --cadre: 9px; z-index: 1; }
.fenetre-haut .vitre { aspect-ratio: 5 / 4; }
.fenetre-haut .vitre img { object-position: 50% 50%; }
.horizon-haut { --h: calc(30% + 4px); left: calc(var(--bord) * -1); right: calc(var(--bord) * -1); --trait: rgb(37 83 111 / .55); z-index: 0; }
.etiquette { position: absolute; z-index: 2; margin: 0; background: var(--chaux); padding: 10px 14px; font-size: 14px; line-height: 1.3; box-shadow: 0 10px 24px -12px rgb(0 0 0 / .4); border-left: 3px solid var(--sauge); }
.etiquette strong { font: 600 20px var(--titres); }
.etiquette-prix { right: 12px; bottom: -16px; max-width: 220px; }
.haut h1 { margin-bottom: 12px; }
.haut-intro { font-size: 17px; max-width: 52ch; }
.note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 15px; }
.note-chiffre { font: 600 26px/1 var(--titres); }
.etoiles { display: inline-flex; gap: 2px; color: var(--victoria); }
.etoiles svg { width: 15px; height: 15px; }
.brin-haut { right: -30px; top: 40px; width: 150px; opacity: .55; }
@media (max-width: 760px) {
  .haut { padding-top: 14px; padding-bottom: 36px; }
  .haut h1 { font-size: clamp(27px, 7.4vw, 32px); }
  .haut-intro { display: none; }
  .haut-actions { margin-top: 14px; }
  .haut-actions .bouton-trait { display: none; }
  .brin-haut { display: none; }
}
@media (max-height: 700px) and (max-width: 760px) { .fenetre-haut .vitre { aspect-ratio: 16 / 11; } }
@media (min-width: 1000px) {
  .haut { padding: 56px var(--bord) 90px; }
  .haut-in { grid-template-columns: 1fr 1.25fr; align-items: center; gap: 56px; }
  .haut-vue { order: 0; }
  .fenetre-haut { --cadre: 14px; }
  .fenetre-haut .vitre { aspect-ratio: 4 / 3.3; }
  .horizon-haut { left: -48px; right: -10vw; --h: 35%; }
  .brin-haut { right: auto; left: 34%; top: auto; bottom: -40px; width: 190px; }
  .etiquette-prix { right: -20px; bottom: 40px; }
}

/* — Sections communes — */
.section-tete { max-width: 860px; margin: 0 auto 36px; text-align: center; position: relative; }
.section-tete .surtitre { justify-content: center; }
.section-tete .surtitre::after { content: ""; width: 34px; height: 1px; background: currentColor; }

/* La villa */
.villa { padding: 72px var(--bord); }
.villa-in { max-width: var(--max); margin: 0 auto; display: grid; gap: 40px; position: relative; }
.villa .horizon { --h: 64%; }
.atouts { list-style: none; margin: 26px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.atouts li { background: rgb(243 238 227 / .75); border-top: 2px solid var(--encre); padding: 12px 12px 14px; }
.atouts strong { display: block; font: 600 34px/1 var(--titres); color: var(--olive); margin-bottom: 6px; }
.atouts span { font-size: 15px; line-height: 1.35; display: block; }
.villa-photos { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); }
.villa-photos .fenetre-haute { grid-column: 1 / 5; grid-row: 1; }
.villa-photos .fenetre-large { grid-column: 2 / 7; grid-row: 1; margin-top: 62%; }
@media (min-width: 1000px) {
  .villa { padding: 120px var(--bord); }
  .villa-in { grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; }
  .villa-photos .fenetre-large { margin-top: 70%; }
}

/* L'aperçu des chambres */
.apercu-chambres { padding: 72px 0 80px; }
.apercu-chambres .section-tete { padding: 0 var(--bord); }
.apercu-chambres .horizon { --h: 46%; }
.brin-chambres { left: -40px; top: 30px; width: 140px; opacity: .5; }
.cartes-chambres { list-style: none; margin: 0; padding: 6px var(--bord) 24px; display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 320px); gap: 18px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.carte-chambre { scroll-snap-align: start; }
.carte-chambre a { display: block; text-decoration: none; height: 100%; }
.fenetre-carte { display: block; --cadre: 8px; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.fenetre-carte .vitre { aspect-ratio: 4 / 4.6; }
.carte-chambre a:hover .fenetre-carte { transform: translateY(-6px); }
.carte-chambre a:hover .vitre img { transform: scale(1.12); transition: transform .8s; }
.carte-texte { display: grid; gap: 4px; padding: 16px 4px 0; }
.carte-type { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--teinte); font-weight: 600; }
.carte-nom { font: italic 500 34px/1 var(--titres); }
.carte-detail { font-size: 15px; }
.carte-prix { font-size: 15px; }
.carte-prix strong { font: 600 21px var(--titres); }
.carte-voir { margin-top: 10px; justify-self: start; border-bottom: 2px solid var(--teinte); font-weight: 600; padding-bottom: 2px; }
@media (min-width: 1100px) {
  .cartes-chambres { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); max-width: var(--max); margin: 0 auto; overflow: visible; }
  .carte-chambre:nth-child(even) { margin-top: 56px; }
}

/* La journée */
.journee { padding: 80px var(--bord) 120px; }
.journee .section-tete { z-index: 1; }
.course { position: absolute; left: 0; right: 0; top: 40px; width: 100%; height: 260px; fill: none; stroke: rgb(243 238 227 / .25); stroke-width: 1.2; stroke-dasharray: .006 .01; pointer-events: none; }
.astre { position: absolute; left: 2%; top: 300px; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: radial-gradient(circle, #FFF2D6, #F4C178 60%, rgb(233 162 122 / 0) 72%); box-shadow: 0 0 60px 20px rgb(244 193 120 / .35); pointer-events: none; }
.moments { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; gap: 46px; position: relative; }
.moment { display: grid; gap: 18px; align-items: center; }
.fenetre-moment { --cadre: 8px; }
.fenetre-moment .vitre { aspect-ratio: 4 / 3.2; }
.moment-heure { font: italic 500 22px var(--titres); color: var(--couchant); margin-bottom: 4px; }
.moment h3 { color: var(--chaux); }
.moment-dessin svg { width: 100%; max-width: 300px; height: auto; fill: none; stroke: var(--turquoise); stroke-width: 2; stroke-linecap: round; }
.js .moment-dessin path, .js .moment-dessin circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s cubic-bezier(.6, 0, .2, 1); }
.moment-dessin.trace path, .moment-dessin.trace circle { stroke-dashoffset: 0; }
@media (min-width: 900px) {
  .journee { padding: 120px var(--bord) 150px; }
  .moment { grid-template-columns: 1fr 1.1fr; gap: 50px; }
  .moment:nth-child(even) > :first-child { order: 2; }
  .moment-dessin { display: grid; place-items: center; }
  .course { height: 360px; }
}

/* Les hôtes */
.hotes { padding: 80px var(--bord); }
.hotes-in { max-width: 820px; margin: 0 auto; position: relative; }
.croissant-geant { position: absolute; right: -80px; top: 20px; width: 380px; height: 380px; fill: none; stroke: var(--olive); stroke-width: .5; opacity: .28; pointer-events: none; }
.js .croissant-geant path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.croissant-geant.trace path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.6, 0, .2, 1); }
.brin-hotes { left: -20px; bottom: -30px; width: 150px; opacity: .6; }
.citation-hotes { margin: 26px 0 0; padding: 24px 0 0 26px; border-left: 3px solid var(--olive); }
.citation-hotes p { font: italic 400 clamp(21px, 2.4vw, 28px)/1.4 var(--titres); }
cite { font: normal 600 14px var(--texte); letter-spacing: .04em; }
@media (min-width: 1000px) { .hotes { padding: 130px var(--bord); } .croissant-geant { width: 520px; height: 520px; right: 4%; top: 40px; } }

/* Les avis */
.avis { padding: 80px 0; }
.avis-tete { max-width: var(--max); margin: 0 auto 30px; padding: 0 var(--bord); display: grid; gap: 14px; align-items: end; position: relative; }
.avis-note { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.avis-chiffre { font: 500 clamp(96px, 16vw, 190px)/.85 var(--titres); color: var(--couchant); }
.avis-sur { font: italic 400 24px var(--titres); }
.avis-forts { max-width: var(--max); margin: 0 auto; padding: 0 var(--bord); display: grid; gap: 36px; position: relative; }
.avis-geant { margin: 0; }
.avis-geant p { font: italic 400 clamp(24px, 3.2vw, 40px)/1.3 var(--titres); }
.avis-photo { margin: 0; position: relative; }
.fenetre-avis { display: block; --cadre: 8px; }
.avis-photo blockquote { position: relative; margin: -40px 18px 0; background: var(--chaux); color: var(--encre); padding: 18px 20px; border-top: 3px solid var(--couchant); box-shadow: 0 20px 40px -20px rgb(0 0 0 / .6); }
.avis-photo blockquote p { font: italic 500 21px/1.35 var(--titres); margin-bottom: 8px; }
.avis-bande { list-style: none; display: flex; gap: 16px; margin: 44px 0 0; padding: 4px var(--bord) 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; position: relative; scrollbar-width: thin; scrollbar-color: var(--couchant) transparent; }
.avis-bande li { flex: none; width: min(76vw, 300px); scroll-snap-align: start; padding: 20px; border: 1px solid rgb(243 238 227 / .25); border-radius: 2px; background: rgb(243 238 227 / .05); }
.avis-bande li:nth-child(3n+2) { width: min(76vw, 360px); background: rgb(233 162 122 / .14); }
.avis-bande li:nth-child(3n) { border-style: dashed; }
.avis-bande p { font: italic 400 18px/1.45 var(--titres); margin-bottom: 10px; }
.avis-bande cite { color: var(--turquoise); }
@media (min-width: 900px) {
  .avis { padding: 130px 0 100px; }
  .avis-tete { grid-template-columns: auto 1fr; gap: 40px; }
  .avis-forts { grid-template-columns: 1.3fr 1fr; align-items: center; gap: 70px; }
}

/* Réserver */
.reserver { padding: 80px var(--bord) 110px; }
.reserver-in { max-width: var(--max); margin: 0 auto; display: grid; gap: 36px; position: relative; }
.fenetre-reserver .vitre { aspect-ratio: 3 / 3.4; }
.fenetre-reserver { max-width: 420px; rotate: -2deg; }
.reserver h2 { max-width: 24ch; }
.brin-reserver { right: -30px; bottom: -20px; width: 170px; color: var(--olive-fonce); opacity: .5; }
@media (max-width: 760px) { .brin-reserver { bottom: auto; top: 10px; width: 120px; } .fenetre-reserver { max-width: 300px; } .reserver .actions .bouton { flex: 1 1 100%; } }
@media (min-width: 900px) { .reserver { padding: 120px var(--bord) 140px; } .reserver-in { grid-template-columns: .8fr 1.2fr; align-items: center; gap: 80px; } }

/* — Têtes de page (pages intérieures) — */
.tete-page { padding: 52px var(--bord) 64px; }
.tete-in { max-width: 900px; position: relative; margin: 0 auto 0 max(0px, calc((100% - var(--max)) / 2)); }
.tete-deux { max-width: var(--max); margin: 0 auto; display: grid; gap: 36px; }
.brin-tete { right: -24px; top: 24px; width: 140px; opacity: .5; }
.horizon-tete { --h: 70%; }
.sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sommaire a { text-decoration: none; padding: 10px 14px; border: 1px solid rgb(29 33 27 / .3); border-radius: 30px; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; background: rgb(243 238 227 / .7); }
.sommaire a:hover { background: var(--encre); color: var(--chaux); }
@media (min-width: 1000px) { .tete-page { padding: 90px var(--bord) 100px; } .tete-deux { grid-template-columns: 1.2fr .8fr; align-items: center; gap: 70px; } }
/* Hauts de page Chambres et Infos (23 oct) : la photo d'abord au téléphone, à droite sur grand écran */
@media (max-width: 999px) { .photo-avant > .fenetre { order: -1; } .photo-avant > .fenetre .vitre { aspect-ratio: 5 / 4; } }

/* Le tableau des chambres */
.comparer { max-width: var(--max); margin: 36px auto 0; display: grid; gap: 10px; position: relative; }
.comparer-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 16px; text-decoration: none; background: rgb(255 255 255 / .55); border-left: 4px solid var(--teinte); transition: background .3s, transform .3s; }
.comparer-ligne:hover { background: #fff; transform: translateX(4px); }
.comparer-tete { display: none; }
.comparer-nom { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.comparer-nom strong { font: italic 500 26px/1 var(--titres); }
.comparer-nom small { font-size: 14px; color: #4a4a40; }
.comparer-ligne > span[data-t]::before { content: attr(data-t); display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pierre-fonce); }
.comparer-prix { font: 600 20px var(--titres); }
@media (min-width: 900px) {
  .comparer { gap: 0; }
  .comparer-ligne { grid-template-columns: 1.6fr 1fr 1.4fr 1.6fr .7fr; align-items: center; border-bottom: 1px solid rgb(29 33 27 / .12); }
  .comparer-tete { display: grid; background: none; border-left-color: transparent; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pierre-fonce); padding-block: 8px; }
  .comparer-nom { grid-column: auto; }
  .comparer-ligne > span[data-t]::before { display: none; }
}

/* Une chambre */
.chambre { padding: 72px var(--bord); }
.chambre .horizon { --h: 30%; }
.chambre-in { max-width: var(--max); margin: 0 auto; display: grid; gap: 34px; position: relative; }
.chambre-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chambre-photos .fenetre-large { grid-column: 1 / -1; }
.chambre-photos .fenetre-petite { --cadre: 7px; }
.chambre-photos .fenetre-petite:last-child { margin-top: 30px; }
.chambre-nom { font: italic 500 clamp(52px, 9vw, 100px)/.95 var(--titres); color: var(--teinte); margin-bottom: 10px; }
.chambre-prix { font-size: 16px; }
.chambre-prix strong { font: 600 30px var(--titres); }
.pastilles { list-style: none; padding: 0; margin: 18px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles li { padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--teinte) 60%, transparent); background: rgb(255 255 255 / .5); font-size: 14px; border-radius: 2px; }
.equipements { border-top: 1px solid rgb(29 33 27 / .2); border-bottom: 1px solid rgb(29 33 27 / .2); }
.equipements summary { cursor: pointer; padding: 14px 0; font-weight: 600; min-height: 50px; display: flex; align-items: center; }
.equipements ul { margin: 0 0 16px; padding-left: 20px; columns: 2 220px; font-size: 15px; }
.fenetre-bandeau { max-width: 1000px; margin: 46px auto 0; }
.fenetre-bandeau .vitre { aspect-ratio: 21 / 9; }
.brin-chambre { right: -30px; top: 60px; width: 150px; opacity: .45; }
.brin-chambre.a-gauche { right: auto; left: -30px; }
@media (min-width: 1000px) {
  .chambre { padding: 120px var(--bord); }
  .chambre-in { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 70px; }
  .chambre-in.inverse .chambre-photos { order: 2; }
}

/* Espaces communs */
.commun { padding: 80px var(--bord) 110px; }
.commun-in { max-width: var(--max); margin: 0 auto; display: grid; gap: 36px; position: relative; }
.liste-points { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.liste-points li { padding-left: 26px; position: relative; }
.liste-points li::before { content: ""; position: absolute; left: 0; top: .7em; width: 14px; height: 1px; background: var(--couchant); }
@media (min-width: 1000px) { .commun-in { grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; } }

/* Blocs du séjour */
.bloc { padding: 72px var(--bord); }
.bloc .horizon { --h: 55%; }
.bloc-in { max-width: var(--max); margin: 0 auto; display: grid; gap: 34px; position: relative; }
.bloc-photos { display: grid; gap: 14px; }
.bloc-photos .fenetre { --cadre: 8px; }
.trio { grid-template-columns: 1fr 1fr; }
.trio .fenetre:first-child { grid-column: 1 / -1; }
.trio .fenetre:first-child .vitre { aspect-ratio: 3 / 2.4; }
.duo { grid-template-columns: 1.3fr 1fr; align-items: end; }
.duo .fenetre:last-child { margin-bottom: -24px; }
.petite-citation { margin: 22px 0 0; padding-left: 18px; border-left: 2px solid var(--couchant); }
.petite-citation p { font: italic 400 20px/1.4 var(--titres); margin-bottom: 6px; }
.encadre { background: rgb(255 255 255 / .6); padding: 16px 18px; border-left: 3px solid var(--ocean); font-size: 15px; }
.encadre strong { display: block; font: 600 18px var(--titres); margin-bottom: 4px; }
.brin-bloc { right: -30px; top: 40px; width: 140px; opacity: .45; }
.brin-bloc.a-gauche { right: auto; left: -30px; }
.bloc-seul .fenetre { max-width: 560px; }
@media (min-width: 1000px) {
  .bloc { padding: 120px var(--bord); }
  .bloc-in { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 70px; }
  .bloc-in.inverse .bloc-texte { order: 2; }
  .duo .fenetre:last-child { margin-left: -40px; }
}

/* La carte des alentours */
.carte { margin: 0; position: relative; }
.carte svg { width: 100%; height: auto; overflow: visible; }
.carte .ile { fill: var(--sauge-pale); stroke: var(--olive); stroke-width: 1.6; stroke-linejoin: round; }
.carte .relief { fill: none; stroke: var(--olive); stroke-opacity: .35; stroke-width: 1.2; }
.carte .trajets path { fill: none; stroke: var(--ocean); stroke-width: 2; stroke-dasharray: .02 .015; }
.js .carte .trajets path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.carte.trace .trajets path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.6, 0, .2, 1); }
.carte .lieux circle { fill: var(--chaux); stroke: var(--ocean); stroke-width: 2.5; }
.carte text { font: 600 24px var(--texte); fill: var(--encre); paint-order: stroke; stroke: var(--chaux); stroke-width: 5px; stroke-linejoin: round; }
.carte .villa-point circle { fill: var(--couchant); stroke: var(--encre); stroke-width: 2; }
.carte .villa-point .onde { fill: none; stroke: var(--couchant); stroke-width: 2; animation: onde 2.4s ease-out infinite; transform-origin: 0 0; }
.carte .villa-point text { font: italic 600 30px var(--titres); }
@keyframes onde { from { scale: .6; opacity: 1; } to { scale: 2.4; opacity: 0; } }
.lieux-liste { padding: 80px var(--bord) 120px; }
.lieux-cartes { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max); display: grid; gap: 16px; position: relative; }
.lieu { padding: 22px; border: 1px solid rgb(243 238 227 / .22); background: rgb(17 40 56 / .45); border-radius: 2px; }
.lieu:nth-child(3n+2) { background: rgb(143 207 214 / .12); }
.lieu-temps { display: inline-block; font: italic 600 30px/1 var(--titres); color: var(--couchant); margin-bottom: 10px; }
.lieu h3 { color: var(--chaux); }
.lieu p { margin: 0; font-size: 16px; }
@media (min-width: 760px) { .lieux-cartes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .lieux-cartes { grid-template-columns: repeat(3, 1fr); } .lieu:nth-child(3n+2) { transform: translateY(30px); } }
.baleines { padding: 80px var(--bord); }
.baleine { position: absolute; width: 260px; right: 4%; top: 20px; fill: var(--ocean); opacity: .16; pointer-events: none; }
.baleine .jet { fill: none; stroke: var(--ocean); stroke-width: 3; stroke-linecap: round; }
.baleine.anime { animation: nage 7s ease-in-out infinite alternate; }
@keyframes nage { to { transform: translate(-30px, 10px) rotate(-3deg); } }
@media (min-width: 1000px) { .baleines { padding: 120px var(--bord); } .baleine { width: 380px; } }

/* Infos */
.cles { max-width: var(--max); margin: 36px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }
.cles div { background: rgb(255 255 255 / .6); padding: 16px; border-top: 3px solid var(--olive); }
.cles dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--pierre-fonce); }
.cles dd { margin: 4px 0 0; font: 500 21px/1.25 var(--titres); }
@media (min-width: 900px) { .cles { grid-template-columns: repeat(4, 1fr); } }
.regles { padding: 72px var(--bord); }
.regles-in { max-width: var(--max); margin: 0 auto; display: grid; gap: 34px; position: relative; }
.etapes { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.etapes li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.etapes span { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--encre); display: grid; place-items: center; font: italic 600 22px var(--titres); }
.etapes p { margin: 8px 0 0; }
.regles-liste { list-style: none; margin: 0; padding: 24px; background: var(--chaux); border: 1px solid rgb(29 33 27 / .12); display: grid; gap: 16px; box-shadow: 10px 10px 0 rgb(140 115 87 / .25); }
.regles-liste strong { display: block; font: 600 19px var(--titres); }
@media (min-width: 1000px) { .regles { padding: 120px var(--bord); } .regles-in { grid-template-columns: 1.2fr .8fr; align-items: start; gap: 70px; } }
.questions { padding: 72px var(--bord); }
.questions-in { max-width: 860px; margin: 0 auto; position: relative; }
.faq details { border-bottom: 1px solid rgb(29 33 27 / .2); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font: 500 21px/1.3 var(--titres); min-height: 50px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; border-right: 2px solid; border-bottom: 2px solid; transform: translateY(-70%) rotate(45deg); transition: transform .3s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0 0 18px; }
.acces { padding: 80px var(--bord) 110px; }
.acces-in { max-width: var(--max); margin: 0 auto; display: grid; gap: 36px; position: relative; }
@media (min-width: 1000px) { .acces-in { grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; } .questions, .acces { padding-block: 120px; } }

/* — Pied de page — */
.pied { position: relative; background: var(--encre); color: var(--chaux); padding: 60px var(--bord) 30px; overflow: hidden; }
.horizon-pied { --h: 0; --trait: var(--sauge); }
.pied-in { max-width: var(--max); margin: 0 auto; display: grid; gap: 30px; }
.pied-croissant { width: 56px; height: 56px; color: var(--sauge); }
.pied-nom { font: italic 500 28px var(--titres); margin: 8px 0 4px; }
.pied-titre { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sauge); margin-bottom: 8px; }
.pied-bloc a:not(.pastille-lien) { display: block; text-decoration: none; padding: 4px 0; }
.pied-bloc p a { display: inline; }
.pastille-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid rgb(243 238 227 / .4); border-radius: 30px; text-decoration: none; font-size: 15px; }
.pastille-lien:hover { background: var(--chaux); color: var(--encre); }
.pied-mention { max-width: var(--max); margin: 40px auto 0; padding-top: 20px; border-top: 1px solid rgb(243 238 227 / .15); font-size: 14px; color: rgb(243 238 227 / .7); }
@media (min-width: 900px) { .pied-in { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }

/* — Barre collante (téléphone) — */
.barre-appel { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.4fr 1fr 1fr; background: var(--encre); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px -12px rgb(0 0 0 / .5); }
.barre-appel a { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--chaux); text-decoration: none; font: 600 15px var(--texte); border-left: 1px solid rgb(243 238 227 / .15); }
.barre-appel .barre-resa { background: var(--sauge); color: var(--encre); border: 0; }
.barre-appel svg { width: 19px; height: 19px; }
body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
@media (min-width: 761px) { .barre-appel { display: none; } body { padding-bottom: 0; } }

/* — Les icônes des cases (20 octobre) : une seule famille au trait, couleur olive sur fond clair, turquoise sur l'océan — */
.ic { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--olive); }
.fond-ocean .ic, .fond-nuit .ic { color: var(--turquoise); }
.bouton .ic { color: inherit; width: 24px; height: 24px; margin: 0 10px 0 -4px; }
.etiquette-prix { display: flex; gap: 10px; align-items: flex-start; }
.etiquette-prix .ic { margin-top: 1px; }
.atouts li { position: relative; padding-right: 46px; }
.atouts .ic { position: absolute; top: 12px; right: 10px; width: 30px; height: 30px; }
.pastilles li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; }
.pastilles .ic { width: 24px; height: 24px; }
.equipements ul { list-style: none; padding-left: 0; }
.equipements li { display: flex; gap: 10px; align-items: flex-start; break-inside: avoid; padding: 4px 0; }
.equipements .ic { width: 24px; height: 24px; margin-top: -1px; }
.comparer-ligne > span[data-t] { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.comparer-ligne > span[data-t]::before { grid-column: 1 / -1; }
.comparer .ic { width: 24px; height: 24px; }
.liste-points li { padding-left: 0; display: flex; gap: 12px; align-items: center; }
.liste-points li::before { display: none; }
.liste-points .ic { width: 28px; height: 28px; }
.sommaire a { gap: 8px; }
.sommaire .ic { width: 24px; height: 24px; }
.sommaire a:hover .ic { color: var(--sauge); }
.encadre { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; }
.encadre .ic { grid-row: span 2; width: 28px; height: 28px; color: var(--ocean); }
.lieu { position: relative; }
.lieu .ic { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; }
.cles .ic { display: block; width: 28px; height: 28px; margin-bottom: 8px; }
.etapes span { position: relative; color: var(--olive); }
.etapes span .ic { width: 24px; height: 24px; }
.etapes span::after { content: attr(data-n); position: absolute; top: -6px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--encre); color: var(--chaux); font: 600 12px/20px var(--texte); text-align: center; }
.regles-liste li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; }
.regles-liste .ic { width: 28px; height: 28px; }
.faq summary { padding-left: 42px; }
.faq summary .ic { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; }
.pied-titre { display: flex; align-items: center; gap: 10px; }
.pied .ic { width: 24px; height: 24px; color: var(--sauge); }

/* — Les décors qui se tracent puis bougent au défilement : brins d'olivier, houle de l'océan, paille-en-queue.
     Toujours dans les marges hautes ou basses des sections (ou sur les côtés des grands écrans), jamais sur un texte. — */
.deco { z-index: 0; }
.houle, .paille { position: absolute; pointer-events: none; height: auto; }
.houle path, .paille path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.houle { color: var(--ocean); opacity: .5; width: 150px; bottom: 12px; left: 10px; }
.paille { color: var(--encre); opacity: .45; width: 104px; top: 10px; right: 10px; }
.fond-ocean .houle, .fond-nuit .houle { color: var(--turquoise); opacity: .5; }
.fond-ocean .paille, .fond-nuit .paille { color: var(--chaux); opacity: .6; }
.js .houle path, .js .paille path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.houle.trace path, .paille.trace path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(.6, 0, .2, 1); }
.paille.trace g + g path { transition-delay: .5s; }
.houle-baleines { left: auto; right: 10px; }
.paille-commun { top: auto; bottom: 14px; }
.paille-tete { top: auto; bottom: 4px; width: 90px; }
@media (max-width: 760px) {
  /* au téléphone, les brins se posent petits dans la marge du bas de leur section */
  .brin:not(.brin-haut) { width: 50px; top: auto; bottom: -6px; right: 8px; left: auto; opacity: .6; }
  .brin.a-gauche { right: auto; left: 8px; }
  .brin.brin-reserver { width: 66px; bottom: 4px; }
  .tete-page .brin { bottom: -14px; }
  .questions .brin { top: 2px; bottom: auto; }
  .brin-villa, .brin-tete-carte, .brin-regles { display: none; }
}
@media (min-width: 761px) and (max-width: 1199px) { .brin-villa, .brin-tete-carte, .brin-regles { display: none; } }
@media (min-width: 1000px) {
  .houle { width: 260px; bottom: 16px; left: 4%; }
  .houle-baleines { left: auto; right: 6%; }
  .paille { width: 160px; top: 12px; right: 6%; }
  .paille-commun { width: 150px; top: auto; bottom: 10px; right: 8%; }
  .paille-tete { width: 130px; top: 6px; bottom: auto; right: 10%; }
  .paille-lieux, .paille-journee { width: 120px; top: 6px; }
}
@media (min-width: 1100px) {
  .paille-journee, .paille-lieux { width: 200px; top: 40px; right: auto; left: 4%; }
}
@media (min-width: 1200px) {
  .brin-villa { left: -50px; bottom: 30px; width: 120px; opacity: .5; }
  .brin-tete-carte { left: -36px; bottom: -10px; width: 120px; opacity: .45; }
  .brin-regles { left: -36px; top: 50px; width: 120px; opacity: .45; }
}

/* — Apparitions — */
.js .r { opacity: 0; transform: translateY(26px); }
.js .r.vu { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .decoupe .mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.js .decoupe .mot > span { display: inline-block; transform: translateY(105%); }
.js .decoupe.vu .mot > span { transform: none; transition: transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--m) * 35ms); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .r, .js .decoupe .mot > span { opacity: 1; transform: none; }
  .js .horizon { transform: none; }
  .js .brin .tige, .js .brin .feuille, .js .moment-dessin path, .js .moment-dessin circle, .js .croissant-geant path, .js .carte .trajets path, .js .houle path, .js .paille path { stroke-dashoffset: 0; fill-opacity: 1; }
  .fenetre .vitre img { transform: none; }
}