/* Maison Essente · version 3 · villa de 1898 sur la digue de Houlgate.
   Couleurs prises sur la côte : nuit, bleu des tentes de Cabourg, sable, brique des villas, ardoise, mer de la Manche, écume.
   Grands aplats, aucune ombre au repos, aucun dégradé décoratif. Newsreader pour les titres, Manrope pour le reste. */
:root {
  --nuit: #13202B; --ardoise: #39434D; --tente: #23408E; --sable: #E6E2DA; --brique: #9B4A30; --mer: #7B9893;
  --ecume: #F3F4F1; --blanc: #FFFFFF; --or: #B8894A;
  --ton: #D9D4CA; --ton-nuit: #1C2D3B; --gris: #50565B;
  /* noms de la v2 gardés pour l'Espace hôtelier */
  --bassin: var(--tente); --coque: var(--brique); --ocre: var(--or); --brume: #D6DDDA;
  --f-titre: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-texte: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --marge: clamp(16px, 3vw, 48px);
  --t-affiche: clamp(50px, 7.6vw, 124px);
  --t-titre: clamp(36px, 4.8vw, 76px);
  --t-sous: clamp(25px, 2.3vw, 34px);
  --t-texte: 17px;
  --t-petit: 14.5px;
  --courbe: cubic-bezier(.22, 1, .36, 1);
  --entete: 76px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
/* hors couche : l'hôte des Artifacts injecte body{font:14px…;background:#fff;color:#000} */
body { overflow-x: clip; margin: 0; background: var(--ecume); color: var(--nuit); font-family: var(--f-texte); font-size: var(--t-texte); line-height: 1.62; font-weight: 400; font-optical-sizing: auto; }
[hidden] { display: none !important; }
img, canvas, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
p { margin: 0 0 1em; max-width: 66ch; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
.t-affiche, .t-titre, .t-sous { font-family: var(--f-titre); font-weight: 400; letter-spacing: -0.018em; }
.t-affiche { font-size: var(--t-affiche); line-height: 0.98; }
.t-titre { font-size: var(--t-titre); line-height: 1.02; }
.t-sous { font-size: var(--t-sous); line-height: 1.08; letter-spacing: -0.01em; }
.t-chapo { font-family: var(--f-titre); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.4; font-weight: 400; max-width: 38ch; }
.t-petit { font-size: var(--t-petit); line-height: 1.5; }
.t-mention { font-size: 14px; color: var(--gris); }
[data-ciel="nuit"] .t-mention, [data-ciel="tente"] .t-mention, [data-ciel="ardoise"] .t-mention, .pied-nom .t-mention, .ouverture .t-mention { color: #B9C3C8; }
.chiffres { font-variant-numeric: tabular-nums; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.saut { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ecume); color: var(--nuit); padding: 10px 14px; font-weight: 700; }
.saut:focus { top: 12px; }

/* Boutons : rectangles pleins. La brique est réservée à l'action de réserver. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 24px; border: 0; font-weight: 600; font-size: 15.5px; letter-spacing: .01em; line-height: 1.15; text-decoration: none; transition: transform .25s var(--courbe), background-color .25s, color .25s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn-coque, .btn-brique { background: var(--brique); color: var(--blanc); }
.btn-coque:hover, .btn-brique:hover { background: #823B25; }
.btn-clair { background: var(--ecume); color: var(--nuit); }
.btn-clair:hover { background: var(--blanc); }
.btn-nuit { background: var(--nuit); color: var(--ecume); }
.btn-nuit:hover { background: var(--ardoise); }
.btn-sable, .btn-brume { background: var(--sable); color: var(--nuit); }
.btn-sable:hover, .btn-brume:hover { background: var(--ton); }
.btn-tente { background: var(--tente); color: var(--blanc); }
.btn-tente:hover { background: #1A3270; }
.lien-fleche { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; padding: 10px 0; }
.lien-fleche::after { content: '→'; transition: transform .3s var(--courbe); }
.lien-fleche:hover::after { transform: translateX(5px); }
.lien-fleche:hover { text-decoration: underline; }
.lien-fort { font-weight: 700; text-decoration: underline; }

/* Chapitres de couleur */
.chapitre { position: relative; padding: clamp(88px, 11vw, 168px) var(--marge); }
.chapitre > .col, .col { max-width: 1440px; margin: 0 auto; }
[data-ciel="ecume"], [data-ciel="matin"] { background: var(--ecume); color: var(--nuit); }
[data-ciel="sable"], [data-ciel="aube"] { background: var(--sable); color: var(--nuit); }
[data-ciel="soir"] { background: var(--ton); color: var(--nuit); }
[data-ciel="tente"], [data-ciel="midi"] { background: var(--tente); color: var(--ecume); }
[data-ciel="nuit"] { background: var(--nuit); color: var(--ecume); }
[data-ciel="ardoise"] { background: var(--ardoise); color: var(--ecume); }
[data-ciel="mer"] { background: var(--mer); color: var(--nuit); }
[data-ciel="brique"] { background: var(--brique); color: var(--ecume); }
.sec-tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(40px, 5vw, 76px); }
.sec-tete p { margin: 0; max-width: 52ch; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 72px); }
.trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
.quatre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.photo { position: relative; overflow: hidden; background: var(--ton); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-r43 { aspect-ratio: 4 / 3; }
.photo-r32 { aspect-ratio: 3 / 2; }
.photo-r45 { aspect-ratio: 4 / 5; }
.photo-r169 { aspect-ratio: 16 / 9; }
figure { margin: 0; }
figcaption { font-size: 13.5px; margin-top: 10px; color: var(--gris); }
[data-ciel="nuit"] figcaption, [data-ciel="tente"] figcaption { color: #B9C3C8; }
.liste-nette { list-style: none; padding: 0; margin: 0; }

/* En-tête : transparent sur les grandes images, écume ensuite */
header[data-essente-entete] { height: var(--entete); }
header[data-essente-entete="heros"] { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 40; }
header[data-essente-entete="elevate"] { height: auto; min-height: 72px; background: var(--blanc); }
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--entete); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; padding: 0 var(--marge); background: var(--ecume); color: var(--nuit); transition: background-color .4s, color .4s, transform .45s var(--courbe); }
.entete.sur-heros:not(.colle) { background: transparent; color: var(--ecume); }
.entete.cache { transform: translateY(-100%); }
.entete .nav-g { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); font-size: 15px; font-weight: 500; }
.entete .nav-g a { text-decoration: none; white-space: nowrap; padding: 8px 0; }
.entete .nav-g a:hover, .entete .nav-g a[aria-current="page"] { text-decoration: underline; }
.entete .marque { display: flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; }
.entete .marque b { font-family: var(--f-titre); font-weight: 500; font-size: 26px; letter-spacing: -0.012em; white-space: nowrap; }
.entete .marque span { font-size: 12px; font-weight: 600; letter-spacing: .06em; margin-top: 5px; opacity: .8; }
.entete .nav-d { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.entete .nav-d .tel { font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.entete .nav-d .tel:hover { text-decoration: underline; }
.entete .btn { min-height: 44px; padding: 10px 18px; }
.entete .menu-ouvrir { display: none; background: transparent; border: 0; color: inherit; font-weight: 700; min-height: 44px; padding: 0 2px; }
.entete-elevate { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px var(--marge); background: var(--blanc); color: var(--nuit); }
.entete-elevate .marque-elevate { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; }
.entete-elevate .marque-elevate img { width: 30px; height: 30px; }
.menu { position: fixed; inset: 0; z-index: 60; background: var(--nuit); color: var(--ecume); padding: 22px var(--marge) 32px; display: flex; flex-direction: column; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu-haut { display: flex; justify-content: space-between; align-items: center; }
.menu-haut .marque { font-family: var(--f-titre); font-size: 24px; }
.menu-haut button { background: transparent; border: 0; color: inherit; font-weight: 700; min-height: 44px; }
.menu ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 2px; }
.menu ul a { font-family: var(--f-titre); letter-spacing: -0.012em; font-weight: 400; font-size: clamp(34px, 9vw, 64px); line-height: 1.1; text-decoration: none; }
.menu .menu-pied { margin-top: auto; padding-top: 28px; font-size: 16px; display: grid; gap: 6px; }

/* Bandeau de démonstration et onglet hôtelier */
.demo { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0; max-width: none; background: var(--sable); color: var(--nuit); font-size: 13px; line-height: 1.35; padding: 7px var(--marge); padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px)); }

.demo { display: flex; justify-content: space-between; align-items: center; gap: 6px 24px; }
.demo a { flex: none; font-weight: 700; color: var(--nuit); text-underline-offset: 3px; }
.onglet-hotelier { position: fixed; right: var(--marge); bottom: 52px; z-index: 46; background: var(--nuit); color: var(--ecume); font-size: 14.5px; font-weight: 700; padding: 10px 14px; text-decoration: none; transition: transform .25s var(--courbe); }
.onglet-hotelier:hover { transform: translateY(-2px); background: var(--ardoise); }
body { padding-bottom: 34px; }

/* Barre de réservation (dates, voyageurs, action) */
.resa { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .9fr) auto; background: var(--ecume); color: var(--nuit); max-width: 920px; }
.resa .champ { display: flex; flex-direction: column; justify-content: center; padding: 10px 18px; font-size: 12.5px; font-weight: 600; border: 0; background: transparent; text-align: left; min-height: 68px; color: var(--ardoise); }
.resa .champ + .champ { box-shadow: inset 1px 0 0 var(--ton); } /* taste-skill-ignore : séparation des champs */
.resa .champ .val { font-size: 18px; font-weight: 500; white-space: nowrap; color: var(--nuit); font-variant-numeric: tabular-nums; }
.resa .champ select { border: 0; background: transparent; font-size: 18px; font-weight: 500; padding: 0; min-height: 28px; color: var(--nuit); }
.resa .champ:hover { background: var(--blanc); }
.resa .btn { min-height: 68px; padding: 0 28px; }
.resa-note { margin: 12px 0 0; font-size: 14.5px; }

/* Calendrier fait maison */
.cal-pop { position: absolute; z-index: 55; background: var(--blanc); color: var(--nuit); padding: 20px; width: min(700px, calc(100vw - 32px)); box-shadow: 0 18px 48px rgba(16, 26, 36, .26); } /* taste-skill-ignore : fenêtre flottante */
.cal-pop[hidden] { display: none; }
.cal { --cell: 48px; }
.cal-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.cal-tete p { margin: 0; font-size: 15px; }
.cal-tete button { min-width: 44px; min-height: 44px; border: 0; background: var(--sable); font-weight: 700; font-size: 20px; }
.cal-tete button:disabled { opacity: .35; cursor: default; }
.cal-mois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cal-mois h3 { font-family: var(--f-titre); font-size: 22px; font-weight: 400; margin: 0 0 8px; text-transform: capitalize; }
.cal table { border-collapse: separate; border-spacing: 2px; width: 100%; table-layout: fixed; }
.cal th { font-size: 12.5px; font-weight: 600; color: var(--gris); padding: 2px 0; text-align: center; border: 0; }
.cal td { padding: 0; border: 0; }
.cal td button { width: 100%; min-height: var(--cell); border: 0; background: var(--ecume); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; font-variant-numeric: tabular-nums; transition: background-color .15s; }
.cal td button .j { font-weight: 700; font-size: 15px; }
.cal td button .p { font-size: 11.5px; color: var(--gris); margin-top: 3px; }
.cal td button:hover:not([aria-disabled="true"]) { background: var(--sable); }
.cal td button[aria-disabled="true"] { background: transparent; color: #9AA0A5; cursor: default; }
.cal td button[aria-disabled="true"] .j { text-decoration: line-through; font-weight: 500; }
.cal td button.dans { background: var(--sable); }
.cal td button.bout { background: var(--nuit); color: var(--ecume); }
.cal td button.bout .p, .cal td button.fort .p { color: inherit; }
.cal td button.fort:not(.bout) { box-shadow: inset 0 -3px 0 var(--or); } /* taste-skill-ignore : repère plein des temps forts, pas une ombre */
.cal td button:focus-visible { outline: 3px solid var(--or); outline-offset: 0; position: relative; z-index: 1; }
.cal-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 13.5px; }
.cal-legende span::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background: var(--ecume); }
.cal-legende .l-sel::before { background: var(--nuit); }
.cal-legende .l-fort::before { background: var(--or); }
.cal-legende .l-plein::before { background: transparent; outline: 1px solid #9AA0A5; }
.cal-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.cal-pied p { margin: 0; font-size: 15px; }

/* Grandes images de tête des pages intérieures */
.tete-page { position: relative; min-height: 86svh; display: flex; align-items: flex-end; color: var(--ecume); background: var(--nuit); overflow: hidden; }
.tete-page > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tete-page::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 32, 43, .38) 0%, rgba(19, 32, 43, 0) 24%, rgba(19, 32, 43, .08) 44%, rgba(19, 32, 43, .78) 100%); } /* taste-skill-ignore : voile de lisibilité du texte sur photo */
.tete-page .col { position: relative; z-index: 1; width: 100%; padding: 0 var(--marge) clamp(48px, 7vw, 96px); }
.tete-page h1 { max-width: 16ch; }
.tete-page .t-chapo { margin-top: 22px; }

/* Repères chiffrés */
.reperes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.reperes li b { display: block; font-family: var(--f-titre); font-weight: 400; font-size: clamp(40px, 4.4vw, 68px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.reperes li span { display: block; margin-top: 10px; font-size: 15px; max-width: 24ch; }

/* Cartes de chambre */
.chambres-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px); }
.carte-chambre { display: flex; flex-direction: column; text-decoration: none; }
.carte-chambre .photo { aspect-ratio: 4 / 3; }
.carte-chambre .photo img { transition: transform 1.2s var(--courbe); }
.carte-chambre:hover .photo img { transform: scale(1.035); }
.carte-chambre h3 { font-family: var(--f-titre); font-weight: 400; font-size: 32px; letter-spacing: -0.012em; line-height: 1.05; margin-top: 18px; }
.carte-chambre .meta { font-size: 14.5px; margin-top: 8px; color: var(--gris); }
[data-ciel="nuit"] .carte-chambre .meta { color: #B9C3C8; }
.carte-chambre .vue { margin-top: 8px; font-size: 16px; }
.carte-chambre .prix { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.carte-chambre .prix b { font-size: 19px; font-variant-numeric: tabular-nums; }
.etiquette { display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 9px; background: var(--sable); color: var(--nuit); }
.etiquette.libre { background: #DCE6DD; }
.etiquette.complet { background: #EAD9D2; }

/* Listes de la table et du bain */
.carte-menu { display: grid; gap: 0; }
.carte-menu .ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 11px 0; }
.carte-menu .ligne b { font-weight: 600; }
.carte-menu .ligne span { display: block; font-size: 15px; color: var(--gris); margin-top: 2px; }
[data-ciel="nuit"] .carte-menu .ligne span { color: #B9C3C8; }
.carte-menu .ligne .p { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* Pied de page */
.pied-photo { position: relative; min-height: 88svh; display: flex; align-items: flex-end; color: var(--ecume); background: var(--nuit); overflow: hidden; }
.pied-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pied-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 32, 43, 0) 40%, rgba(19, 32, 43, .7) 100%); } /* taste-skill-ignore : voile de lisibilité */
.pied-photo .col { position: relative; z-index: 1; width: 100%; padding: 0 var(--marge) clamp(64px, 9vw, 120px); }
.pied-photo h2 { max-width: 20ch; margin-bottom: 28px; }
.pied-photo .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pied-photo .tel { margin-left: 14px; font-size: 20px; font-weight: 700; }
.pied-nom { background: var(--nuit); color: var(--ecume); padding: clamp(72px, 9vw, 120px) var(--marge) 48px; overflow: hidden; }
.pied-nom .geant { font-family: var(--f-titre); letter-spacing: -0.015em; font-weight: 400; font-size: clamp(56px, 12.4vw, 200px); line-height: 1; margin: 0 0 56px; white-space: nowrap; max-width: none; }
.pied-rangee { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
.pied-lieux { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: clamp(21px, 2vw, 30px); font-weight: 600; }
.pied-lieux a { text-decoration: none; color: var(--sable); }
.pied-lieux a:hover { color: var(--ecume); text-decoration: underline; }
.pied-liens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; font-size: 15px; }
.pied-liens h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--sable); }
.pied-liens ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.pied-liens a { text-decoration: none; }
.pied-liens a:hover { text-decoration: underline; }
.pied-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 80px; font-size: 13.5px; color: #B9C3C8; }
.pied-legal p { margin: 0; max-width: 92ch; }
.signature-elevate { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px var(--marge) 26px; background: linear-gradient(90deg, #8A63FF, #E05BD6); /* taste-skill-ignore : signature Elevate imposée par le brief */ color: #fff; font-size: 15px; }
.signature-elevate a { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-weight: 700; text-decoration: none; }
.signature-elevate a:hover { text-decoration: underline; }
.signature-elevate img { width: 34px; height: 34px; }

/* Rideau entre les pages */
/* Changement de page : fondu natif (View Transitions), sans rideau */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
html.essente-test *, html.essente-test *::before, html.essente-test *::after { transition: none !important; animation: none !important; }

/* Entrées au défilement : contenu visible au repos ; JS ajoute .entree-prete puis anime */
.entree-prete [data-entree] { opacity: 0; transform: translateY(24px); }
.entree-prete [data-entree].vu { opacity: 1; transform: none; transition: opacity .9s var(--courbe), transform .9s var(--courbe); transition-delay: var(--retard, 0ms); }

/* Dialogue */
.dialogue { border: 0; padding: 0; max-width: min(620px, calc(100vw - 32px)); background: var(--blanc); color: var(--nuit); box-shadow: 0 24px 60px rgba(16, 26, 36, .35); } /* taste-skill-ignore : dialogue */
.dialogue::backdrop { background: rgba(19, 32, 43, .6); }
.dialogue .dlg-corps { padding: 26px 26px 22px; }
.dialogue img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.dialogue h3 { font-family: var(--f-titre); font-weight: 400; letter-spacing: -0.01em; font-size: 32px; line-height: 1.04; margin-bottom: 10px; }
.dialogue .dlg-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.dialogue .fermer { position: absolute; top: 10px; right: 10px; min-width: 44px; min-height: 44px; border: 0; background: var(--ecume); font-weight: 700; font-size: 18px; }

@media (max-width: 1180px) {
  .entete .nav-g a { display: none; }
  .entete .menu-ouvrir { display: inline-block; }
  .entete .nav-d .tel { display: none; }
}
@media (max-width: 900px) {
  :root { --entete: 64px; }
  .entete { grid-template-columns: auto minmax(0, 1fr); }
  .entete .nav-g { display: none; }
  .entete .marque { align-items: flex-start; }
  .entete .marque b { font-size: 22px; }
  .entete .marque span { display: none; }
  .entete .nav-d { gap: 12px; }
  .entete .btn { min-height: 40px; padding: 8px 14px; font-size: 14.5px; }
  .sec-tete, .pied-rangee, .deux { grid-template-columns: 1fr; }
  .trois, .chambres-grille { grid-template-columns: 1fr; }
  .quatre, .reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-liens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo { position: static; flex-wrap: wrap; padding: calc(var(--entete) + 8px) var(--marge) 10px; }
  .entete.sur-heros:not(.colle) { background: var(--ecume); color: var(--nuit); }
  header[data-essente-entete="heros"] { position: relative; height: 0; }
  body { padding-bottom: 0; }
  .onglet-hotelier { display: none; }
  .cal-mois { grid-template-columns: 1fr; }
  .cal-mois > div + div { display: none; }
  .cal-pop { position: fixed; left: 16px !important; right: 16px; top: auto !important; bottom: 16px; width: auto; max-height: calc(100svh - 32px); overflow: auto; }
  .resa { grid-template-columns: 1fr 1fr; }
  .resa .champ:nth-child(3) { grid-column: 1 / -1; box-shadow: inset 0 1px 0 var(--ton); } /* taste-skill-ignore : séparation */
  .resa .btn { grid-column: 1 / -1; min-height: 56px; }
  .tete-page { min-height: 78svh; }
  .pied-photo .tel { margin-left: 0; width: 100%; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* La façade sert de plan (chambres, réservation) */
.facade-plan .fp-image { position: relative; }
.facade-plan .fp-image > img { width: 100%; height: auto; }
.fp-baie { position: absolute; padding: 0; border: 0; background: rgba(243, 244, 241, .08); box-shadow: inset 0 0 0 2px rgba(243, 244, 241, .95); color: var(--nuit); cursor: pointer; transition: background-color .25s, box-shadow .25s; text-decoration: none; } /* taste-skill-ignore : contour de fenêtre */
.fp-baie::after { content: ''; position: absolute; inset: -10px; }
.fp-baie:hover, .fp-baie:focus-visible, .fp-baie.vue { background: rgba(243, 244, 241, .42); }
.fp-baie[data-etat="libre"] { background: rgba(243, 244, 241, .22); }
.fp-baie[data-etat="choisie"] { background: rgba(155, 74, 48, .72); box-shadow: inset 0 0 0 2px var(--brique); } /* taste-skill-ignore : contour */
.fp-baie[data-etat="complet"] { background: rgba(19, 32, 43, .62); box-shadow: none; cursor: not-allowed; } /* taste-skill-ignore : annule le contour */
.fp-baie[data-etat="complet"] .fp-num { background: var(--ardoise); color: #C9D0D3; }
.fp-num { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--ecume); color: var(--nuit); padding: 0 5px; font-variant-numeric: tabular-nums; }
.fp-baie[data-etat="choisie"] .fp-num { background: var(--brique); color: var(--blanc); }
.fp-bulle { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 6px); z-index: 3; width: max-content; max-width: 240px; background: var(--nuit); color: var(--ecume); font-size: 13.5px; line-height: 1.35; padding: 9px 12px; text-align: left; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--courbe); }
.fp-bulle b { display: block; font-family: var(--f-titre); font-weight: 400; font-size: 21px; }
.fp-bulle em { display: block; font-style: normal; font-weight: 700; margin-top: 3px; color: var(--sable); }
.fp-bulle em:empty { display: none; }
.fp-baie:hover .fp-bulle, .fp-baie:focus-visible .fp-bulle { opacity: 1; transform: translate(-50%, 0); }
.fp-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 13.5px; }
.fp-legende span::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.fp-legende .l-libre::before { background: var(--ecume); box-shadow: inset 0 0 0 2px var(--nuit); } /* taste-skill-ignore : pastille */
.fp-legende .l-choisie::before { background: var(--brique); }
.fp-legende .l-complet::before { background: var(--nuit); }

/* Filtres en pastilles */
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pastilles button { min-height: 40px; padding: 8px 14px; border: 0; background: var(--sable); color: var(--nuit); font-weight: 600; font-size: 14.5px; transition: background-color .2s; }
.pastilles button:hover { background: var(--ton); }
.pastilles button[aria-pressed="true"] { background: var(--nuit); color: var(--ecume); }

/* ───────────── v3.1 · prestige : îlot de navigation, pilules, médias adoucis, grain, nouveau pied ───────────── */
:root { --rayon: 18px; --rayon-s: 12px; --ressort: cubic-bezier(.32, .72, 0, 1); --lent: cubic-bezier(.16, 1, .3, 1); }
.t-affiche, .t-titre { font-weight: 300; letter-spacing: -0.022em; }
.t-sous, .carte-chambre h3, .offre h3 { font-weight: 400; }
.chapitre { padding-top: clamp(104px, 12vw, 190px); padding-bottom: clamp(104px, 12vw, 190px); }
/* grain très léger, posé sur une couche fixe */
body::after { content: ''; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .045; background-image: 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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Îlot de navigation */
header[data-essente-entete]:not([data-essente-entete="elevate"]) { height: 0; position: relative; }
.entete { top: 14px; left: 50%; right: auto; width: min(1240px, calc(100% - 28px)); height: 62px; transform: translateX(-50%); border-radius: 999px; padding: 0 8px 0 18px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; background: rgba(243, 244, 241, .86); color: var(--nuit); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 10px 40px -18px rgba(19, 32, 43, .35); overflow: visible; transition: background-color .5s var(--ressort), color .5s var(--ressort), transform .6s var(--ressort), box-shadow .5s; } /* taste-skill-ignore : îlot flottant (barre collante) */
.entete.cache { transform: translate(-50%, calc(-100% - 20px)); }
.entete.sur-heros:not(.colle) { background: rgba(19, 32, 43, .28); color: var(--ecume); box-shadow: none; } /* taste-skill-ignore : soulignement animé et état transparent de la barre */
.entete .marque { flex-direction: row; align-items: center; gap: 10px; }
.entete .marque b { font-size: 22px; font-weight: 400; }
.monogramme { width: 34px; height: 34px; flex: none; }
.entete .nav-g { justify-content: center; gap: clamp(12px, 1.5vw, 26px); font-size: 14.5px; }
.entete .nav-g a { position: relative; text-decoration: none !important; }
.entete .nav-g a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ressort); } /* taste-skill-ignore : soulignement animé et état transparent de la barre */
.entete .nav-g a:hover::after, .entete .nav-g a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.entete .nav-d { gap: 14px; }
.entete .btn { min-height: 46px; }
.entete .menu-ouvrir { width: 46px; height: 46px; border-radius: 50%; background: rgba(19, 32, 43, .08); position: relative; padding: 0; }
.entete.sur-heros:not(.colle) .menu-ouvrir { background: rgba(243, 244, 241, .14); }
.menu-ouvrir span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: currentColor; transition: transform .45s var(--ressort); }
.menu-ouvrir span:first-child { top: 19px; } .menu-ouvrir span:last-child { top: 26px; }
.menu-ouvrir[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-ouvrir[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu { background: rgba(19, 32, 43, .96); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.menu ul li { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ressort), transform .7s var(--ressort); transition-delay: calc(var(--i) * 55ms + 80ms); }
.menu.ouvert ul li { opacity: 1; transform: none; }
.menu ul a { font-weight: 300; }

/* Boutons en pilule, flèche dans son propre cercle */
.btn { border-radius: 999px; padding: 12px 22px; gap: 12px; transition: transform .5s var(--ressort), background-color .35s, color .35s; }
.btn:active { transform: scale(.98); }
.btn-brique::after, .btn-nuit::after, .btn-clair::after, .btn-verre::after { content: '→'; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: -10px; border-radius: 50%; font-size: 14px; background: rgba(255, 255, 255, .16); transition: transform .5s var(--ressort); }
.btn-clair::after, .btn-sable::after { background: rgba(19, 32, 43, .08); }
.btn:hover::after { transform: translateX(3px) scale(1.06); }
.entete .btn::after { width: 24px; height: 24px; }
.btn-verre { background: rgba(243, 244, 241, .14); color: var(--ecume); box-shadow: inset 0 0 0 1px rgba(243, 244, 241, .32); } /* taste-skill-ignore : contour du bouton sur photo */
.btn-verre:hover { background: rgba(243, 244, 241, .24); }
.lien-fleche { font-weight: 600; }

/* Médias adoucis */
.photo, .carte-chambre .photo, .offre, .volet .photo, .attentions .photo, .facade-plan, .cal-pop, .dialogue { border-radius: var(--rayon); }
.photo { isolation: isolate; }
.resa { border-radius: 22px; overflow: hidden; }
.heros-resa .resa { border-radius: 999px; }
.resa .btn { border-radius: 999px; margin: 6px; min-height: 56px; }
.pastilles button { border-radius: 999px; }

/* Apparitions : montée lente et légère netteté */
.entree-prete [data-entree] { opacity: 0; transform: translateY(34px); filter: blur(6px); }
.entree-prete [data-entree].vu { opacity: 1; transform: none; filter: none; transition: opacity 1.1s var(--lent), transform 1.1s var(--lent), filter 1.1s var(--lent); transition-delay: var(--retard, 0ms); }

/* Fin du site : une dernière image, puis le pied */
.fin { position: relative; min-height: 92svh; display: grid; place-items: center; text-align: center; color: var(--ecume); overflow: hidden; background: var(--nuit); }
.fin-img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.fin::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 60%, rgba(19, 32, 43, .2) 0%, rgba(19, 32, 43, .62) 100%); } /* taste-skill-ignore : voile de lisibilité sur photo */
.fin-texte { position: relative; z-index: 1; padding: 0 var(--marge); max-width: 980px; }
.fin-texte .t-chapo { margin: 22px auto 34px; color: #E7E9E6; }
.fin-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pied { background: var(--nuit); color: var(--ecume); padding: clamp(72px, 8vw, 120px) var(--marge) 28px; }
.pied > * { max-width: 1440px; margin-left: auto; margin-right: auto; }
.pied-haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 40px; padding-bottom: clamp(40px, 5vw, 72px); }
.pied-marque { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; }
.pied-marque .monogramme { width: 64px; height: 64px; }
.pied-marque span { font-family: var(--f-titre); font-weight: 300; font-size: clamp(44px, 6vw, 92px); line-height: 1; letter-spacing: -0.02em; }
.pied-haut p { margin: 0; max-width: 34ch; color: #C9D0D3; font-family: var(--f-titre); font-size: 21px; line-height: 1.35; }
.pied-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.pied-grille h3 { font-size: 14px; font-weight: 600; color: #B9C3C8; margin-bottom: 14px; }
.pied-grille ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 16px; }
.pied-grille a { text-decoration: none; }
.pied-grille a:hover { text-decoration: underline; }
.pied-carte { position: relative; display: block; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 3 / 2; }
.pied-carte img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--lent); }
.pied-carte:hover img { transform: scale(1.04); }
.pied-carte .repere { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--brique); box-shadow: 0 0 0 5px rgba(243, 244, 241, .9); } /* taste-skill-ignore : repère de carte */
.pied-carte .legende { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: var(--rayon-s); background: rgba(19, 32, 43, .78); font-size: 15px; font-weight: 600; }
.pied-carte .legende small { display: block; font-weight: 500; font-size: 13px; color: #C9D0D3; margin-top: 2px; }
.pied-lettre p { font-size: 15px; color: #C9D0D3; margin: 0 0 14px; }
.champ-lettre { display: flex; align-items: center; background: rgba(243, 244, 241, .08); border-radius: 999px; padding: 5px 5px 5px 18px; box-shadow: inset 0 0 0 1px rgba(243, 244, 241, .2); } /* taste-skill-ignore : champ de formulaire */
.champ-lettre input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ecume); font-size: 15.5px; padding: 10px 0; }
.champ-lettre input::placeholder { color: #9FAAB0; }
.champ-lettre input:focus { outline: none; }
.champ-lettre:focus-within { box-shadow: inset 0 0 0 2px var(--or); } /* taste-skill-ignore : focus */
.champ-lettre button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ecume); color: var(--nuit); font-size: 18px; }
.pied-bas { margin-top: clamp(56px, 6vw, 88px); padding-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 40px; align-items: center; font-size: 13.5px; color: #AEB8BD; box-shadow: inset 0 1px 0 rgba(243, 244, 241, .12); } /* taste-skill-ignore : séparation du pied */
.pied-bas p { margin: 0; }
.pied-liens-bas { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pied-liens-bas a { text-decoration: none; color: var(--ecume); }
.pied-liens-bas a:hover { text-decoration: underline; }
.pied-elevate { grid-column: 1 / -1; }
.pied-elevate a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #C9D0D3; }
.pied-elevate a:hover { color: var(--ecume); }
.pied-court { background: var(--nuit); padding: 20px var(--marge); }

/* Visite à 360° */
.pano { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: #0B1219; color: var(--ecume); }
.pano::backdrop { background: rgba(11, 18, 25, .9); }
.pano-scene { position: absolute; inset: 0; }
.pano-scene canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.pano-scene canvas:active { cursor: grabbing; }
.pano-voile { position: absolute; inset: 0; background: #0B1219; opacity: 0; pointer-events: none; transition: opacity .35s var(--ressort); }
.pano-voile.on { opacity: 1; }
.pano-haut { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px var(--marge); background: linear-gradient(180deg, rgba(11, 18, 25, .6), rgba(11, 18, 25, 0)); pointer-events: none; } /* taste-skill-ignore : voile de lisibilité */
.pano-haut > * { pointer-events: auto; }
.pano-sur { margin: 0 0 4px; font-size: 14px; color: #C9D0D3; }
.pano-haut h2 { font-family: var(--f-titre); font-weight: 300; font-size: clamp(34px, 4vw, 58px); line-height: 1; }
.pano-fermer { width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(243, 244, 241, .14); color: var(--ecume); font-size: 28px; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pano-fermer:hover { background: rgba(243, 244, 241, .26); }
.pano-bas { position: absolute; left: var(--marge); right: var(--marge); bottom: 46px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.pano-vues { display: flex; flex-wrap: wrap; gap: 8px; }
.pano-vues button { text-align: left; border: 0; border-radius: 16px; padding: 10px 16px; background: rgba(11, 18, 25, .62); color: var(--ecume); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .3s; }
.pano-vues button b { display: block; font-family: var(--f-titre); font-weight: 400; font-size: 20px; }
.pano-vues button span { display: block; font-size: 13px; color: #C9D0D3; }
.pano-vues button[aria-pressed="true"] { background: var(--ecume); color: var(--nuit); }
.pano-vues button[aria-pressed="true"] span { color: var(--gris); }
.pano-aide { margin: 0; font-size: 13.5px; color: #C9D0D3; background: rgba(11, 18, 25, .5); padding: 6px 12px; border-radius: 999px; }
.pano-credit { position: absolute; left: var(--marge); bottom: 14px; margin: 0; font-size: 12px; color: #9FAAB0; }

@media (max-width: 1180px) {
  .entete { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 900px) {
  .entete { top: 10px; height: 56px; width: calc(100% - 20px); padding: 0 6px 0 12px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .entete .marque b { font-size: 19px; }
  .monogramme { width: 30px; height: 30px; }
  .entete .btn { min-height: 42px; padding: 8px 14px; }
  .entete .btn::after { display: none; }
  .entete .nav-d { grid-column: 3; }
  .entete.sur-heros:not(.colle) { background: rgba(19, 32, 43, .72); color: var(--ecume); }
  .demo { padding-top: calc(56px + 18px); }
  .resa { border-radius: 22px; }
  .resa .btn { margin: 4px 6px 6px; }
  .btn { white-space: normal; text-align: center; }
  .pied-grille { grid-template-columns: 1fr; }
  .pied-bas { grid-template-columns: 1fr; }
  .fin { min-height: 80svh; }
  .pano-bas { bottom: 40px; }
  .pano-vues button { padding: 8px 12px; }
  .pano-vues button b { font-size: 17px; }
  .pano-vues button span, .pano-aide { display: none; }
}
@media (min-width: 901px) and (max-width: 1180px) { .entete .nav-g { display: none; } }

/* v3.2 · le bon cadeau (page Offrir, page Séjours) */
.bon { container-type: inline-size; position: relative; aspect-ratio: 1.6; border-radius: 16px; overflow: hidden; padding: 6% 6.5% 5%; display: grid; grid-template-rows: auto 1fr auto auto; color: var(--nuit); background: var(--ecume); }
.bon > * { position: relative; }
.bon-haut { display: flex; align-items: center; gap: 2.6cqi; font-family: var(--f-titre); font-size: 4.8cqi; line-height: 1.05; }
.bon-haut > span { white-space: nowrap; }
.bon-haut small { display: block; font-family: var(--f-texte); font-size: 3cqi; opacity: .75; margin-top: .6cqi; }
.bon-haut em { margin-left: auto; font-style: italic; font-size: 4.2cqi; opacity: .9; }
.bon-mono { width: 10cqi; height: 10cqi; flex: none; }
.bon-valeur { align-self: center; margin: 0; font-family: var(--f-titre); font-weight: 300; font-size: 16cqi; line-height: .95; letter-spacing: -0.02em; }
.bon-exp .bon-valeur { font-size: 9.6cqi; line-height: 1.02; max-width: 82%; }
.bon-pour p { margin: 0; font-size: 4.3cqi; line-height: 1.3; max-width: 74%; }
.bon-pour b { font-weight: 700; }
.bon-mot { font-family: var(--f-titre); font-style: italic; font-size: 4.4cqi !important; margin-top: 1.2cqi !important; opacity: .92; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bon-bas { display: flex; justify-content: space-between; gap: 3cqi; margin: 3cqi 0 0; font-size: 3.1cqi; opacity: .78; }
.bon-nuit { background: var(--nuit); color: var(--ecume); }
.bon-nuit .bon-mono, .bon-nuit .bon-haut em { color: #D9B57F; }
.bon-tentes { background: var(--ecume); }
.bon-tentes::before { content: ''; position: absolute; inset: 0 0 0 auto; width: 24%; background: repeating-linear-gradient(90deg, var(--tente) 0 5cqi, var(--ecume) 5cqi 10cqi); } /* taste-skill-ignore : rayures des tentes de la plage, motif de la marque */
.bon-tentes .bon-haut em, .bon-tentes .bon-bas { margin-right: 24%; }
.bon-tentes .bon-valeur { max-width: 74%; }
.bon-couchant { background: #2b2a33 url('photos/couchant-800.jpg') center / cover; color: var(--ecume); }
.bon-couchant::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 32, 43, .18) 0%, rgba(19, 32, 43, .2) 40%, rgba(19, 32, 43, .78) 100%); } /* taste-skill-ignore : voile de lecture sur la photo */