/* =========================================================
   Terre de Femme & Hôrs Cadre — Styles communs
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Terre de Femme */
  --tdf-terracotta: #a0583c;
  --tdf-terracotta-dark: #7e4029;
  --tdf-clay: #b86d4e;
  --tdf-sand: #f3e9df;
  --tdf-beige: #e6d3c1;
  --tdf-ink: #4a2e22;

  /* Hôrs Cadre */
  --hc-black: #161514;
  --hc-charcoal: #1f1e1c;
  --hc-stone: #2c2a27;
  --hc-slate: #3b3834;
  --hc-light: #e4ded5;
  --hc-muted: #a9a298;
  --hc-beige: #c9bba7;

  /* Typo */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Allura", "Brush Script MT", cursive;

  --radius-pill: 999px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--tdf-ink);
  background: var(--tdf-sand);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
}

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1.2;
}

.rule {
  width: 48px;
  height: 1px;
  background: currentColor;
  opacity: .5;
  border: 0;
  margin: 1.5rem 0;
}

/* ---------- Boutons ---------- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  font-family: var(--font-sans);
  font-size: .85rem;
  letter-spacing: .04em;
  text-decoration: none;
  background: transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-pill .arrow { transition: transform .3s var(--ease); }
.btn-pill:hover .arrow { transform: translateX(4px); }

.btn-light-outline { color: #fff; border-color: rgba(255,255,255,.7); }
.btn-light-outline:hover { background: #fff; color: var(--tdf-ink); }

.btn-tdf { background: var(--tdf-terracotta); border-color: var(--tdf-terracotta); color: #fff; }
.btn-tdf:hover { background: var(--tdf-terracotta-dark); border-color: var(--tdf-terracotta-dark); color: #fff; }

.btn-hc { background: var(--hc-beige); border-color: var(--hc-beige); color: var(--hc-black); }
.btn-hc:hover { background: var(--hc-light); border-color: var(--hc-light); color: var(--hc-black); }

/* ---------- Logos (wordmarks provisoires) ---------- */
.logo-tdf,
.logo-hc {
  display: inline-block;
  font-family: var(--font-serif);
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
}

.logo-tdf {
  position: relative;
  padding-left: .55em;
  letter-spacing: .08em;
}
.logo-tdf span { display: block; }
.logo-tdf::before {            /* arc de cercle */
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1.6em; height: 1.6em;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: translateY(-50%) rotate(-45deg);
  opacity: .8;
}

.logo-hc {
  letter-spacing: .1em;
  white-space: nowrap;
}
.logo-hc .frame {              /* cadre autour de "HÔ" */
  display: inline-block;
  padding: .12em .05em .12em .18em;
  margin-right: .02em;
  border: 1px solid currentColor;
  border-right: 0;
}

/* ---------- Placeholders photo ---------- */
.ph {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.ph::after {                   /* grain */
  content: "";
  position: absolute;
  inset: 0;
  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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}
.ph-tdf {
  background-color: var(--tdf-terracotta);
  background-image:
    radial-gradient(ellipse at 75% 30%, rgba(236, 170, 130, .55), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(90, 40, 22, .55), transparent 60%),
    linear-gradient(135deg, #b0654a, #874430);
}
.ph-hc {
  background-color: var(--hc-stone);
  background-image:
    radial-gradient(ellipse at 70% 25%, rgba(190, 170, 145, .28), transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(0, 0, 0, .6), transparent 60%),
    linear-gradient(135deg, #3a3733, #151413);
}

/* ---------- Topbar ---------- */
.topbar {
  background: var(--hc-black);
  color: var(--hc-light);
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .06em;
}
.topbar a { text-decoration: none; }
.topbar a:hover { text-decoration: underline; }

/* ---------- Landing : double entrée ---------- */
.gateway {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 38px);
  min-height: calc(100svh - 38px);
}

.gate {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: clamp(2rem, 5vw, 4.5rem);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.gate .ph {
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: transform 1.2s var(--ease);
}
.gate::before {                /* voile pour lisibilité */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 60%);
}
.gate:hover .ph,
.gate:focus-visible .ph { transform: scale(1.04); }

.gate-content { max-width: 30rem; }

.gate .logo-tdf,
.gate .logo-hc { font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin-bottom: 1.5rem; }

.gate-logo { display: block; height: auto; margin-bottom: 1.5rem; }
.gate-logo-tdf {
  width: clamp(150px, 16vw, 220px);
  filter: brightness(0) invert(1);      /* logo noir -> blanc */
}
.gate-logo-hc { width: clamp(96px, 10vw, 140px); margin-bottom: 1rem; opacity: .95; }
.gate-name {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.gate-tagline {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  margin-bottom: .5rem;
}
.gate .eyebrow { opacity: .85; margin: 1rem 0 2rem; display: block; }

.gate-tdf { color: #fff; }
.gate-hc  { color: var(--hc-light); }

.gate-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.gate-link {
  font-family: var(--font-sans);
  font-size: .85rem;
  letter-spacing: .04em;
  align-self: center;
  text-underline-offset: 4px;
}

/* séparation centrale */
.gateway-mark {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tdf-sand);
  color: var(--tdf-ink);
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-style: italic;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  pointer-events: none;
}

/* ---------- Section adresse ---------- */
.intro {
  padding: clamp(4rem, 9vw, 7rem) 0;
  background: var(--tdf-sand);
}
.intro h2 { font-size: clamp(2rem, 4vw, 3rem); }
.intro .script {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  color: var(--tdf-terracotta);
}

.feature-icon {
  width: 40px; height: 40px;
  margin-bottom: 1rem;
  color: var(--tdf-terracotta);
}
.feature h3 { font-size: 1.35rem; margin-bottom: .35rem; }
.feature p { font-size: 1rem; opacity: .8; margin: 0; }

/* ---------- Accès ---------- */
.access { background: var(--tdf-beige); }
.access-info { padding: clamp(3rem, 6vw, 5rem); }
.access-info h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); }
.access-list { list-style: none; padding: 0; margin: 2rem 0; }
.access-list li { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.access-list svg { flex: none; width: 22px; height: 22px; margin-top: .2rem; color: var(--tdf-terracotta); }
.access-list strong { font-weight: 600; }
.hours-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .15rem .6rem;
  border-radius: var(--radius-pill);
  margin-right: .4rem;
}
.hours-line { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; margin-bottom: 1rem; }
.hours-tag.tdf { background: var(--tdf-terracotta); color: #fff; }
.hours-tag.hc { background: var(--hc-charcoal); color: var(--hc-light); }
a.hours-tag { text-decoration: none; transition: background-color .3s var(--ease), transform .3s var(--ease); }
a.hours-tag:hover { transform: translateY(-1px); }
a.hours-tag.tdf:hover { background: var(--tdf-terracotta-dark); color: #fff; }
a.hours-tag.hc:hover { background: #000; color: #fff; }

.map-wrap { min-height: 380px; height: 100%; }
.map-wrap iframe { width: 100%; height: 100%; min-height: 380px; border: 0; filter: grayscale(.35) sepia(.15); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--hc-black);
  color: var(--hc-muted);
  font-family: var(--font-sans);
  font-size: .85rem;
  padding: 3rem 0 6rem;
}
.site-footer a { color: var(--hc-light); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .logo-tdf,
.site-footer .logo-hc { font-size: 1.15rem; color: var(--hc-light); }
.footer-legal a { color: var(--hc-muted); margin-right: 1.25rem; }
.social a { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--hc-slate); border-radius: 50%; margin-right: .5rem; }
.social svg { width: 16px; height: 16px; }

/* ---------- Barre de réservation mobile ---------- */
.book-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  display: none;
  gap: .5rem;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(22, 21, 20, .92);
  backdrop-filter: blur(8px);
}
.book-bar .btn-pill { flex: 1; justify-content: center; padding: .65rem .5rem; font-size: .8rem; }

/* ---------- Accessibilité ---------- */
.skip-link {
  position: absolute;
  left: -999px; top: 0;
  z-index: 2000;
  padding: .75rem 1rem;
  background: #fff;
  color: #000;
}
.skip-link:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--tdf-clay); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  body { font-size: 1.05rem; }
  .gateway { grid-template-columns: 1fr; min-height: auto; }
  .gate { min-height: 72svh; }
  .gate + .gate { min-height: 72svh; }
  .gateway-mark { width: 52px; height: 52px; font-size: 1.5rem; }
  .book-bar { display: flex; }
  .map-wrap, .map-wrap iframe { min-height: 300px; }
}

/* =========================================================
   Page « Le lieu » (commune aux deux univers)
   ========================================================= */
.lieu-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(243, 233, 223, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(74, 46, 34, .12);
}
.lieu-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .8rem; padding-bottom: .8rem; }
.lieu-back {
  font-family: var(--font-sans);
  font-size: .85rem;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--tdf-ink);
}
.lieu-back:hover { color: var(--tdf-terracotta); }
.lieu-header .btn-pill { padding: .55rem 1.2rem; font-size: .8rem; white-space: nowrap; }

.lieu-hero { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem); text-align: center; }
.lieu-hero h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); margin: .5rem 0 .25rem; }
.lieu-hero .script { font-size: clamp(2rem, 3.5vw, 2.8rem); color: var(--tdf-terracotta); margin-bottom: 1.5rem; }
.lieu-hero p.lead { max-width: 40rem; margin: 0 auto; font-size: 1.2rem; }

/* Photo cliquable (agrandissement) */
.lieu-photo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}
.lieu-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.lieu-photo:hover img, .lieu-photo:focus-visible img { transform: scale(1.03); }

.lieu-facade { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 5.5rem); }
.lieu-facade .lieu-photo { aspect-ratio: 2 / 3; max-height: 720px; }
.lieu-facade h2 { font-size: clamp(2rem, 4vw, 2.9rem); }

.lieu-cabines { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--tdf-beige); }
.lieu-cabines h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
.cabine { height: 100%; display: flex; flex-direction: column; background: #fff; }
.cabine .lieu-photo { aspect-ratio: 4 / 5; }
.cabine-body { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
.cabine-body h3 { font-size: 1.7rem; margin-bottom: .75rem; }
.cabine-body p { opacity: .85; flex: 1; }
.cabine-body .btn-pill { align-self: flex-start; }
.cabine-tdf .cabine-tag { background: var(--tdf-terracotta); color: #fff; }
.cabine-hc .cabine-tag { background: var(--hc-charcoal); color: var(--hc-light); }
.cabine-tag {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .2rem .7rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
}
.cabine-hc .btn-pill { color: var(--hc-charcoal); }
.cabine-hc .btn-pill:hover { background: var(--hc-charcoal); color: var(--hc-light); }
.cabine-tdf .btn-pill { color: var(--tdf-terracotta); }
.cabine-tdf .btn-pill:hover { background: var(--tdf-terracotta); border-color: var(--tdf-terracotta); color: #fff; }

/* Visionneuse */
.lightbox {
  border: 0;
  padding: 0;
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(22, 21, 20, .88); }
.lightbox img { display: block; max-width: min(92vw, 1100px); max-height: 86vh; width: auto; height: auto; margin: 0 auto; }
.lightbox figcaption { color: var(--hc-light); font-family: var(--font-sans); font-size: .85rem; letter-spacing: .04em; text-align: center; margin-top: .75rem; }
.lightbox-close {
  position: absolute;
  top: -14px; right: -14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--tdf-sand);
  color: var(--tdf-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

@media (max-width: 767.98px) {
  .lieu-header .btn-pill { padding: .45rem .8rem; font-size: .72rem; }
  .lieu-back .long { display: none; }
  .lightbox-close { top: -52px; right: 0; }
}

/* =========================================================
   Consentement cookies & carte Google Maps
   ========================================================= */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1060;
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom));
  background: var(--hc-black);
  color: var(--hc-light);
  font-family: var(--font-sans);
  font-size: .85rem;
  line-height: 1.55;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .25);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 1rem 2rem;
}
.cookie-banner-text { margin: 0; flex: 1; }
.cookie-banner-text a { color: var(--hc-beige); }
.cookie-banner-actions { display: flex; gap: .75rem; flex: none; }
/* Les deux boutons ont volontairement le même poids visuel */
.cookie-btn {
  min-width: 8.5rem;
  padding: .6rem 1.2rem;
  border: 1px solid var(--hc-beige);
  border-radius: 999px;
  background: transparent;
  color: var(--hc-light);
  font: inherit;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.cookie-btn:hover { background: var(--hc-beige); color: var(--hc-black); }

/* Lien « Gestion des cookies » dans les footers */
.cookie-manage {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  margin-right: 1.25rem;
}
.cookie-manage:hover { text-decoration: underline; }
.footer-legal .cookie-manage { color: var(--hc-muted); }

/* Carte bloquée tant que le consentement n'est pas donné */
[data-map] { position: relative; }
[data-map] iframe:not([src]) { visibility: hidden; }
.map-consent {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--tdf-beige);
  color: var(--tdf-ink);
  font-family: var(--font-sans);
  font-size: .9rem;
}
.map-consent svg { width: 34px; height: 34px; color: var(--tdf-terracotta); }
.map-consent p { max-width: 28rem; margin: 0; }
.map-consent .map-consent-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.map-consent a { color: inherit; }
[data-map].is-loaded .map-consent { display: none; }
.theme-hc .map-consent { background: var(--hc-stone); color: var(--hc-light); }
.theme-hc .map-consent svg { color: var(--hc-beige); }

@media (max-width: 767.98px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions .cookie-btn { flex: 1; min-width: 0; }
}

/* =========================================================
   Page « Politique de confidentialité »
   ========================================================= */
.legal-page { padding: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 7vw, 5rem); }
.legal-page .container { max-width: 860px; }
.legal-head { text-align: center; margin-bottom: 2.5rem; }
.legal-head h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); margin: .4rem 0 .5rem; }
.legal-update { font-family: var(--font-sans); font-size: .85rem; opacity: .75; margin: 0; }
.legal-toc {
  margin-bottom: 3rem;
  padding: 1.4rem 1.6rem;
  background: var(--tdf-beige);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: .9rem;
}
.legal-toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.legal-toc a { color: var(--tdf-ink); }
.legal-page section { margin-bottom: 2.75rem; scroll-margin-top: 90px; }
.legal-page h2 {
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--tdf-terracotta);
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(74, 46, 34, .15);
}
.legal-page h3 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; }
.legal-page p, .legal-page li { font-size: 1.05rem; line-height: 1.7; }
.legal-page section a { color: var(--tdf-terracotta-dark); overflow-wrap: anywhere; }
.legal-note {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--tdf-terracotta);
  background: rgba(160, 88, 60, .07);
}
.legal-note p { margin: 0; }
.legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.25rem; font-family: var(--font-sans); font-size: .88rem; }
.legal-table th, .legal-table td { padding: .7rem .8rem; border: 1px solid rgba(74, 46, 34, .18); vertical-align: top; text-align: left; }
.legal-table th { background: var(--tdf-beige); font-weight: 500; }
.legal-table code { font-size: .85em; color: var(--tdf-terracotta-dark); }
.legal-cta { margin: 1.5rem 0; }
.legal-refs { font-size: .9rem !important; opacity: .8; }

@media (max-width: 575.98px) {
  .legal-toc ol { columns: 1; }
  .legal-table { min-width: 560px; }
}

/* Mentions légales & CGV */
blockquote.legal-note { margin: 1rem 0 1.5rem; }
blockquote.legal-note p + p { margin-top: .75rem; }
.legal-form { list-style: none; padding-left: 0; }
.legal-form li { padding: .35rem 0; }