
/* Layout : barre latérale fixe (nom + menu) façon carnet, à droite une promenade immersive en grandes images et textes lents */
:root {
  --lime: #f3f2ec;         /* calcaire du Quercy Blanc, légèrement vert */
  --linen: #e7e5da;        /* lin naturel */
  --moss: #2c3427;         /* mousse sur les vieux murs */
  --sage: #6f7a5e;         /* feuillage des chênes */
  --rose: #a9645f;         /* vieux rose du linge et des pivoines */
  --muted: #646b5b;
  --line: #d3d1c3;
  --paper: #faf9f5;
  --display: "Italiana", "Didot", Georgia, serif;
  --body: "Newsreader", "Iowan Old Style", Georgia, serif;
  --side: 250px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lime: #161a14; --linen: #1e231b; --moss: #e9e7dc; --sage: #a5b091;
    --rose: #d99891; --muted: #a6ab9b; --line: #343b2f; --paper: #1b2018;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --lime: #161a14; --linen: #1e231b; --moss: #e9e7dc; --sage: #a5b091;
  --rose: #d99891; --muted: #a6ab9b; --line: #343b2f; --paper: #1b2018;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--lime); color: var(--moss); font-family: var(--body); font-size: 18px; line-height: 1.7; font-weight: 300; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; text-wrap: balance; margin: 0; letter-spacing: .01em; }
p { margin: 0; }
em { font-style: italic; }
:focus-visible { outline: 1.5px solid var(--rose); outline-offset: 3px; }

.label { font-family: var(--body); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 500; color: var(--sage); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--moss); color: var(--lime); border: 0; padding: 14px 26px; font: 500 .78rem/1 var(--body); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .3s; }
.btn:hover { background: var(--rose); }
.link { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.link:hover { color: var(--rose); }

/* Barre latérale */
.side { position: fixed; inset: 0 auto 0 0; width: calc(var(--side) + env(safe-area-inset-left, 0px)); padding: calc(40px + env(safe-area-inset-top, 0px)) 30px calc(28px + env(safe-area-inset-bottom, 0px)) calc(30px + env(safe-area-inset-left, 0px)); background: var(--paper); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 40px; z-index: 30; }
.logo { text-decoration: none; display: grid; gap: 6px; }
.logo span { font-family: var(--display); font-size: 1.95rem; line-height: 1; }
.side .logo span { font-size: 1.8rem; }
.logo small { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--sage); }
.side nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.side nav a { display: block; padding: 6px 0; text-decoration: none; font-size: 1.02rem; color: var(--muted); transition: color .2s, padding .3s; }
.side nav a:hover { color: var(--moss); padding-left: 6px; }
.side .foot { margin-top: auto; font-size: .82rem; color: var(--muted); display: grid; gap: 16px; }
.side .btn { width: 100%; }
main, footer { margin-left: var(--side); }
.topbar { display: none; }

@media (max-width: 1080px) {
  .side { display: none; }
  main, footer { margin-left: 0; }
  .topbar { display: flex; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; align-items: center; justify-content: space-between; gap: 12px; background: var(--paper); border-bottom: 1px solid var(--line); padding-block: 12px; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--paper); }
  .topbar .logo span { font-size: 1.4rem; }
  .topbar .btn { padding: 11px 16px; }
}

.wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
@media (min-width: 700px) { .wrap { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)); } }
section { padding-block: 110px; }
@media (max-width: 700px) { section { padding-block: 72px; } }

/* Ouverture : diaporama lent */
.hero { position: relative; height: min(88vh, 840px); min-height: 520px; overflow: hidden; color: #fff; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2.4s ease; }
.slides img.on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .slides img.on { animation: breathe 9s ease-out both; } @keyframes breathe { from { transform: scale(1.07); } to { transform: scale(1); } } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,20,12,.45) 0%, rgba(14,20,12,.08) 45%, transparent 70%), linear-gradient(0deg, rgba(14,20,12,.35), transparent 30%); pointer-events: none; }
.hero-text { position: absolute; z-index: 2; left: 0; bottom: 0; padding-block: 0 56px; padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: var(--gutter-r); max-width: 640px; }
.hero-text .label { color: rgba(255,255,255,.85); }
.hero h1 { font-size: clamp(3rem, 7vw, 6.2rem); margin-top: 14px; }
.hero h1 em { font-family: var(--body); font-weight: 300; font-size: .42em; display: block; letter-spacing: .02em; margin-top: 10px; }
.dots { position: absolute; z-index: 2; left: max(48px, env(safe-area-inset-left, 0px)); bottom: 26px; display: flex; gap: 10px; }
.dots button { width: 26px; height: 2px; padding: 0; border: 0; background: rgba(255,255,255,.4); cursor: pointer; }
.dots button.on { background: #fff; }
@media (max-width: 700px) { .hero-text { padding-left: var(--gutter-l); padding-bottom: 60px; } .dots { left: var(--gutter-l); } }

/* Panneau de réservation (emplacement Elloha) */
.book { position: absolute; z-index: 3; right: max(40px, env(safe-area-inset-right, 0px)); top: 40px; width: 320px; background: var(--paper); color: var(--moss); padding: 26px 26px 22px; display: grid; gap: 14px; box-shadow: 0 24px 50px -30px rgba(0,0,0,.5); }
.book h2 { font-size: 1.6rem; }
.book .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.book label { display: grid; gap: 2px; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sage); font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: 6px; min-width: 0; }
.book input, .book select { border: 0; background: transparent; color: var(--moss); font: 400 1rem var(--body); padding: 0; width: 100%; letter-spacing: 0; text-transform: none; }
.book .note { font-size: .8rem; color: var(--muted); font-style: italic; display: flex; gap: 8px; align-items: center; }
.book .note i { width: 7px; height: 7px; border-radius: 50%; background: #3d8ea0; flex: none; }
@media (max-width: 860px) { .book { position: relative; right: auto; top: auto; width: auto; margin: -30px var(--gutter-r) 0 var(--gutter-l); } }

/* Manifeste */
.manifesto { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.manifesto h2 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); margin-top: 18px; }
.manifesto .txt { display: grid; gap: 20px; color: var(--muted); font-size: 1.12rem; padding-top: 44px; max-width: 54ch; }
.manifesto .txt p:first-child::first-letter { font-family: var(--display); float: left; font-size: 4.2em; line-height: .85; padding: 6px 10px 0 0; color: var(--rose); }
@media (max-width: 860px) { .manifesto { grid-template-columns: 1fr; gap: 10px; } .manifesto .txt { padding-top: 20px; } }

/* Vue aérienne */
.aerial { margin: 80px 0 0; }
.aerial img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.aerial figcaption { margin-top: 12px; font-style: italic; color: var(--muted); font-size: .95rem; }

/* Une journée ici */
.day { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; margin-top: 90px; }
.day figure { margin: 0; display: grid; gap: 18px; }
.day img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.day figure:nth-child(2) { margin-top: 70px; }
.day h3 { font-size: 1.7rem; }
.day .hour { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--rose); font-weight: 500; }
.day p { color: var(--muted); font-size: 1rem; margin-top: 6px; }
@media (max-width: 860px) { .day { grid-template-columns: 1fr; gap: 50px; } .day figure:nth-child(2) { margin-top: 0; } .day img { aspect-ratio: 4/3; } }

/* Hébergements */
.lodge { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; align-items: stretch; background: var(--paper); }
.lodge + .lodge { margin-top: 60px; }
.lodge.flip { grid-template-columns: 1fr 1.25fr; }
.lodge.flip .pic { order: 2; }
.lodge .pic { position: relative; min-height: 520px; overflow: hidden; }
.lodge .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lodge .pic .inset { position: absolute; width: 38%; right: 24px; bottom: -1px; aspect-ratio: 3/4; height: auto; inset: auto 24px 24px auto; border: 6px solid var(--paper); object-fit: cover; }
.lodge.flip .pic .inset { inset: auto auto 24px 24px; }
.lodge .txt { padding: 56px 52px; display: grid; gap: 18px; align-content: center; min-width: 0; }
.lodge h3 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.lodge p { color: var(--muted); }
.lodge dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; font-size: .95rem; border-top: 1px solid var(--line); padding-top: 18px; }
.lodge dt { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sage); font-weight: 500; padding-top: 4px; }
.lodge dd { margin: 0; }
.lodge .price { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.lodge .price b { font-family: var(--display); font-weight: 400; font-size: 2.1rem; font-variant-numeric: tabular-nums; }
.lodge .price small { color: var(--muted); font-size: .9rem; }
@media (max-width: 900px) {
  .lodge, .lodge.flip { grid-template-columns: 1fr; }
  .lodge.flip .pic { order: 0; }
  .lodge .pic { min-height: 340px; }
  .lodge .txt { padding: 36px 24px 40px; }
}
.together { margin-top: 60px; position: relative; overflow: hidden; color: #fff; min-height: 380px; display: grid; align-items: end; }
.together img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.together::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,20,12,.72), rgba(14,20,12,.1) 70%); }
.together .in { position: relative; z-index: 1; padding: 44px 48px; display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; }
.together .label { color: rgba(255,255,255,.85); }
.together h3 { font-size: clamp(2rem, 3.6vw, 3rem); margin: 10px 0 8px; }
.together p { max-width: 46ch; opacity: .92; }
.together .btn { background: #fff; color: #2c3427; }
.together .btn:hover { background: var(--rose); color: #fff; }
@media (max-width: 700px) { .together .in { padding: 30px 22px; } }

/* Chambres du gîte */
.rooms { margin-top: 28px; background: var(--paper); padding: 34px 40px 40px; }
.rooms-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.rooms-head h3 { font-size: 1.8rem; }
.rooms-head p { color: var(--muted); font-size: .95rem; }
.rooms-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 200px 200px; gap: 10px; }
.rooms-grid button { padding: 0; border: 0; background: none; overflow: hidden; cursor: zoom-in; position: relative; }
.rooms-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.rooms-grid button:hover img { transform: scale(1.04); }
.rooms-grid button:first-child { grid-row: span 2; }
.rooms-grid figcaption { position: absolute; left: 12px; bottom: 10px; color: #fff; font-style: italic; font-size: .9rem; text-shadow: 0 1px 8px rgba(0,0,0,.65); text-align: left; }
.rooms-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.rooms-strip button { padding: 0; border: 0; background: none; overflow: hidden; cursor: zoom-in; position: relative; aspect-ratio: 4/3; }
.rooms-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.rooms-strip button:hover img { transform: scale(1.04); }
.rooms-strip figcaption { position: absolute; left: 12px; bottom: 10px; color: #fff; font-style: italic; font-size: .9rem; text-shadow: 0 1px 8px rgba(0,0,0,.65); }
@media (max-width: 760px) {
  .rooms { padding: 26px 16px 20px; }
  .rooms-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 150px 150px; }
  .rooms-grid button:first-child { grid-column: 1 / -1; grid-row: auto; }
  .rooms-strip { grid-template-columns: 1fr 1fr; }
  .rooms-strip button:last-child { grid-column: 1 / -1; }
}

/* Piscine */
.pool { background: var(--moss); color: var(--lime); padding-block: 0; }
.pool .label { color: color-mix(in srgb, var(--lime) 72%, transparent); }
.pool-hero { position: relative; height: min(92vh, 900px); min-height: 520px; overflow: hidden; }
.pool-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 70%; }
.pool-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,26,18,.78) 0%, rgba(20,26,18,.15) 38%, transparent 60%); }
.pool-hero-text { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding-block: 0 56px; padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: var(--gutter-r); color: #fff; }
.pool-hero-text .label { color: rgba(255,255,255,.88); }
.pool-hero-text h2 { font-size: clamp(2.8rem, 7vw, 6rem); margin-top: 12px; max-width: 14ch; }
.pool-body { display: grid; grid-template-columns: 1.3fr .7fr; gap: 80px; padding-block: 80px; align-items: start; }
.pool-body .txt { display: grid; gap: 20px; }
.pool-body .lead { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.3; color: var(--lime); max-width: 30ch; }
.pool-body .txt > p:not(.lead) { color: color-mix(in srgb, var(--lime) 80%, transparent); max-width: 56ch; font-size: 1.08rem; }
.pool ul { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--lime) 22%, transparent); }
.pool li { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--lime) 22%, transparent); font-size: 1rem; }
.pool li span:first-child { font-style: italic; color: color-mix(in srgb, var(--rose) 55%, #fff); }
.pool li span:last-child { color: color-mix(in srgb, var(--lime) 82%, transparent); }
.voices { display: grid; gap: 26px; border-left: 1px solid color-mix(in srgb, var(--lime) 22%, transparent); padding-left: 32px; }
.voices blockquote { margin: 0; font-family: var(--display); font-size: 1.6rem; line-height: 1.3; }
.voices blockquote::before { content: "«\00a0"; color: color-mix(in srgb, var(--rose) 55%, #fff); }
.voices blockquote::after { content: "\00a0»"; color: color-mix(in srgb, var(--rose) 55%, #fff); }
.voices cite { display: block; font-family: var(--body); font-style: normal; font-size: .82rem; margin-top: 8px; color: color-mix(in srgb, var(--lime) 65%, transparent); }
.pool-strip { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 4px; }
.pool-strip button { padding: 0; border: 0; background: none; overflow: hidden; cursor: zoom-in; aspect-ratio: 4/3; }
.pool-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.pool-strip button:hover img { transform: scale(1.05); }
@media (max-width: 900px) {
  .pool-hero { height: 78vh; min-height: 440px; }
  .pool-hero-text { padding-left: var(--gutter-l); padding-bottom: 40px; }
  .pool-body { grid-template-columns: 1fr; gap: 44px; padding-block: 56px; }
  .voices { border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in srgb, var(--lime) 22%, transparent); padding-top: 30px; }
  .pool li { grid-template-columns: 1fr; gap: 2px; }
  .pool-strip { grid-template-columns: 1fr 1fr; }
}

/* Atmosphère des arbres */
.aura { background: var(--lime); }
.aura-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.aura-pic { margin: 0; }
.aura-pic img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 45% 40%; }
.aura .txt { display: grid; gap: 20px; }
.aura h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); margin-top: 14px; }
.aura .txt > p { color: var(--muted); max-width: 52ch; font-size: 1.08rem; }
.aura .txt > p.lead { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; color: var(--moss); }
.aura-detail { margin: 10px 0 0; display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; }
.aura-detail img { width: 120px; aspect-ratio: 1/1; object-fit: cover; }
.aura-detail figcaption { font-style: italic; color: var(--muted); font-size: .95rem; }
@media (max-width: 900px) { .aura-grid { grid-template-columns: 1fr; gap: 40px; } .aura-pic img { aspect-ratio: 4/3; } }

/* Détails de décoration */
.details-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 50px; }
.details-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); margin-top: 16px; }
.details-head p { color: var(--muted); max-width: 46ch; }
.details { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); grid-auto-rows: 150px; gap: 12px; }
.details button { padding: 0; border: 0; background: none; overflow: hidden; cursor: zoom-in; position: relative; }
.details img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.details button:hover img { transform: scale(1.04); }
.details .a { grid-column: 1 / 3; grid-row: span 3; }
.details .b { grid-column: 3 / 5; grid-row: span 2; }
.details .c { grid-column: 5 / 7; grid-row: span 2; }
.details .d { grid-column: 3 / 4; grid-row: span 2; }
.details .e { grid-column: 4 / 6; grid-row: span 2; }
.details .f { grid-column: 6 / 7; grid-row: span 2; }
.details figcaption { position: absolute; left: 10px; bottom: 10px; color: #fff; font-style: italic; font-size: .9rem; text-align: left; background: rgba(20,26,18,.62); padding: 4px 10px; }
@media (max-width: 860px) {
  .details-head { grid-template-columns: 1fr; gap: 18px; }
  .details { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
  .details .a, .details .b, .details .c, .details .d, .details .e, .details .f { grid-column: span 1; grid-row: span 2; }
  .details .a { grid-column: span 2; grid-row: span 3; }
}

/* Citation pleine largeur */
.quote { position: relative; min-height: 460px; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; }
.quote img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote::after { content: ""; position: absolute; inset: 0; background: rgba(18,24,15,.45); }
.quote p { position: relative; z-index: 1; font-family: var(--display); font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.2; max-width: 20ch; padding-left: var(--gutter-l); padding-right: var(--gutter-r); text-wrap: balance; }
.quote small { display: block; font-family: var(--body); font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; margin-top: 22px; opacity: .85; }

/* Jardin */
.garden { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.garden h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); margin-top: 16px; }
.garden .txt { display: grid; gap: 20px; }
.garden .txt > p { color: var(--muted); max-width: 48ch; }
.slow-list { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--line); }
.slow-list li { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.slow-list li span:first-child { font-style: italic; color: var(--rose); }
.slow-list li span:last-child { color: var(--muted); }
.garden .pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.garden .pics button { padding: 0; border: 0; background: none; overflow: hidden; cursor: zoom-in; }
.garden .pics img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; transition: transform 1.2s ease; }
.garden .pics button:hover img { transform: scale(1.04); }
.garden .pics button:nth-child(2) { margin-top: 60px; }
.garden .pics button:nth-child(3) { grid-column: 1 / -1; }
.garden .pics button:nth-child(3) img { aspect-ratio: 16/9; }
@media (max-width: 900px) { .garden { grid-template-columns: 1fr; gap: 50px; } .slow-list li { grid-template-columns: 1fr; gap: 2px; } }

/* Région */
.region-head { max-width: 640px; margin-bottom: 50px; }
.region-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); margin-top: 16px; }
.region-head p { color: var(--muted); margin-top: 18px; }
.places { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; }
.places article { padding: 26px 26px 26px 0; border-top: 1px solid var(--moss); margin-right: 26px; }
.places article:last-child { margin-right: 0; }
.places h3 { font-size: 1.6rem; margin-bottom: 10px; }
.places p { color: var(--muted); font-size: .98rem; }
.places .how { display: block; margin-top: 12px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); font-weight: 500; }
@media (max-width: 900px) { .places { grid-template-columns: 1fr 1fr; gap: 0 26px; } .places article { margin-right: 0; } }
@media (max-width: 560px) { .places { grid-template-columns: 1fr; } }

/* Hôte & coaching */
.host { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.host .pics { position: relative; }
.host .pics img:first-child { width: 86%; aspect-ratio: 4/5; object-fit: cover; object-position: 40% center; }
.host .pics img:last-child { position: absolute; width: 42%; aspect-ratio: 1/1; object-fit: cover; right: 0; bottom: -40px; border: 6px solid var(--linen); }
.host h2 { font-size: clamp(2.2rem, 4.2vw, 3.3rem); margin-top: 16px; }
.host .txt { display: grid; gap: 20px; }
.host .txt > p { color: var(--muted); max-width: 52ch; }
.coaching { background: var(--paper); padding: 28px 30px; display: grid; gap: 10px; margin-top: 10px; border-left: 2px solid var(--rose); }
.coaching h3 { font-size: 1.6rem; }
.coaching p { color: var(--muted); font-size: 1rem; }
.coaching .link { color: var(--moss); }
@media (max-width: 900px) { .host { grid-template-columns: 1fr; gap: 70px; } }

/* Petites attentions */
.extras { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 30px; margin-top: 50px; }
.extras article { display: grid; gap: 8px; align-content: start; }
.extras article { position: relative; }
.extras article img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 8px; }
.extras .illus { position: absolute; top: 8px; left: 8px; background: rgba(20,26,18,.6); color: #fff; font-size: .7rem; letter-spacing: .04em; padding: 3px 8px; }
.extras h3 { font-size: 1.35rem; }
.extras p { color: var(--muted); font-size: .95rem; }
.extras .cond { font-size: .8rem; font-style: italic; color: var(--rose); }
.extras b { font-family: var(--display); font-weight: 400; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .extras { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .extras { grid-template-columns: 1fr; } }

/* Réserver en direct */
.direct { background: var(--moss); color: var(--lime); }
.direct .label { color: color-mix(in srgb, var(--lime) 70%, transparent); }
.direct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.direct h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); margin-top: 16px; }
.direct p { color: color-mix(in srgb, var(--lime) 78%, transparent); margin-top: 18px; max-width: 48ch; }
.perks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }
.perks li { display: grid; grid-template-columns: 22px 1fr; color: color-mix(in srgb, var(--lime) 88%, transparent); }
.perks li::before { content: "—"; opacity: .5; }
.widget { display: block; min-height: 320px; }
/* Moteur Elloha : on masque le bouton « Click & Collect » (pas de vente à emporter) */
.widget .div-clickAndCollect { display: none !important; }
.widget .tag { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: .88rem; text-align: center; font-variant-numeric: tabular-nums; }
.cal .m { grid-column: 1 / -1; text-align: left; font-family: var(--display); font-size: 1.4rem; padding-bottom: 6px; }
.cal .dow { opacity: .55; font-size: .7rem; letter-spacing: .1em; padding-bottom: 4px; }
.cal .d { padding: 8px 0; background: color-mix(in srgb, var(--lime) 7%, transparent); }
.cal .x { opacity: .3; text-decoration: line-through; }
.cal .sel { background: var(--rose); color: #fff; }
.cal .rng { background: color-mix(in srgb, var(--rose) 35%, transparent); }
.widget code { font-size: .74rem; opacity: .6; word-break: break-all; font-family: ui-monospace, Consolas, monospace; }
@media (max-width: 900px) { .direct-grid { grid-template-columns: 1fr; gap: 44px; } }

/* Pied de page */
footer { padding-block: 70px 40px; background: var(--paper); border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.foot-grid h3 { font-size: 1.2rem; margin-bottom: 12px; }
.foot-grid p, .foot-grid li { color: var(--muted); font-size: .95rem; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.todo { border-bottom: 1px dotted var(--rose); }
.legal { margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

.mock-note { position: absolute; z-index: 4; left: max(48px, env(safe-area-inset-left, 0px)); top: 20px; background: rgba(20,26,18,.6); color: #fff; font-size: .74rem; letter-spacing: .04em; padding: 6px 12px; }
@media (max-width: 700px) { .mock-note { left: var(--gutter-l); top: 12px; } }

/* Lien d'évitement */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--moss); color: var(--lime); padding: 10px 16px; }
.skip:focus { left: calc(10px + env(safe-area-inset-left, 0px)); top: calc(10px + env(safe-area-inset-top, 0px)); }

/* Section active dans le menu */
.side { overflow-y: auto; }
.side nav a[aria-current="page"] { color: var(--moss); box-shadow: inset 2px 0 0 var(--rose); padding-left: 10px; }
.side nav .sub { list-style: none; margin: 0 0 4px; padding: 0 0 0 14px; border-left: 1px solid var(--line); display: grid; }
.side nav .sub a { font-size: .92rem; padding: 4px 0; }
.side nav a.active { color: var(--moss); padding-left: 10px; box-shadow: inset 2px 0 0 var(--rose); }

/* Menu mobile */
.burger { display: none; align-items: center; gap: 10px; background: none; border: 1px solid var(--moss); color: var(--moss); height: 44px; padding: 0 14px; cursor: pointer; font: 500 .78rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.burger .ico, .burger .ico::before, .burger .ico::after { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform .3s; }
.burger .ico::before, .burger .ico::after { content: ""; position: absolute; left: 0; }
.burger .ico::before { top: -6px; } .burger .ico::after { top: 6px; }
.burger[aria-expanded="true"] .ico { background: transparent; }
.burger[aria-expanded="true"] .ico::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .ico::after { transform: translateY(-6px) rotate(-45deg); }
.topnav { display: none; }
@media (max-width: 1080px) and (min-width: 761px) {
  .topnav { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; flex: 1; min-width: 0; }
  .topnav a { text-decoration: none; font-size: .92rem; color: var(--muted); white-space: nowrap; }
  .topnav a:hover { color: var(--moss); }
}
.drawer { position: fixed; z-index: 29; inset: 0; background: var(--paper); padding: calc(90px + env(safe-area-inset-top, 0px)) var(--gutter-r) 40px var(--gutter-l); display: grid; align-content: start; gap: 4px; }
.drawer a { font-family: var(--display); font-size: 1.9rem; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--line); }
.topbar .actions { display: flex; gap: 10px; align-items: center; }
@media (max-width: 760px) { .burger { display: inline-flex; } }
@media (max-width: 480px) { .topbar .actions .btn { display: none; } }

/* Barre de réservation mobile */
.mbar { display: none; }
@media (max-width: 1080px) {
  .mbar { display: flex; position: fixed; z-index: 28; left: 0; right: 0; bottom: 0; align-items: center; justify-content: space-between; gap: 12px; background: var(--paper); border-top: 1px solid var(--line); padding: 10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gutter-l); box-shadow: 0 -10px 30px -20px rgba(0,0,0,.35); }
  .mbar span { font-size: .9rem; line-height: 1.3; color: var(--muted); }
  .mbar b { font-family: var(--display); font-weight: 400; font-size: 1.25rem; color: var(--moss); }
  footer { padding-bottom: 110px; }
}

/* Formulaire : estimation */
.book .estimate { font-size: .92rem; color: var(--moss); display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.book .estimate b { font-family: var(--display); font-weight: 400; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.book .err { color: var(--rose); font-size: .85rem; font-style: italic; }

/* Avis Google */
.reviews { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 40px; }
.reviews .count { font-family: var(--display); font-size: clamp(3.4rem, 7vw, 5rem); line-height: 1; color: var(--rose); font-variant-numeric: tabular-nums; }
.reviews .score { display: grid; gap: 6px; justify-items: start; }
.reviews .stars { color: var(--rose); letter-spacing: .12em; font-size: 1.1rem; }
.reviews .of { font-size: .82rem; color: var(--muted); letter-spacing: .04em; }
.reviews h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: 8px; }
.reviews p { color: var(--muted); margin-top: 10px; max-width: 52ch; }
.reviews .acts { display: grid; gap: 12px; justify-items: start; }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; margin-top: 44px; }
.quotes figure { margin: 0; display: grid; gap: 14px; align-content: start; }
.quotes blockquote { margin: 0; font-family: var(--display); font-size: 1.45rem; line-height: 1.35; text-wrap: pretty; }
.quotes blockquote::before { content: "«\00a0"; color: var(--rose); }
.quotes blockquote::after { content: "\00a0»"; color: var(--rose); }
.quotes figcaption { font-size: .88rem; color: var(--muted); }
.quotes figcaption b { color: var(--moss); font-weight: 500; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; gap: 30px; } }
.gbadge { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); text-decoration: none; }
.gbadge b { color: var(--moss); font-weight: 500; }
.gbadge:hover b { color: var(--rose); }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; gap: 20px; } }

/* Questions fréquentes */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.faq h2 { font-size: clamp(2.2rem, 4.2vw, 3.3rem); margin-top: 16px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-size: 1.12rem; font-weight: 400; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-family: var(--display); font-size: 1.6rem; color: var(--rose); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 40px 22px 0; max-width: 60ch; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; gap: 30px; } }

/* Visionneuse */
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(10,12,9,.94); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) var(--gutter-r) max(16px, env(safe-area-inset-bottom, 0px)) var(--gutter-l); }
.lightbox img { max-height: 86vh; width: auto; max-width: 100%; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; padding: 10px 16px; font-family: var(--body); }
.lightbox .close { top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); }
.lightbox .prev { left: calc(6px + env(safe-area-inset-left, 0px)); top: 50%; }
.lightbox .next { right: calc(6px + env(safe-area-inset-right, 0px)); top: 50%; }

/* Pages logement */
.page-hero { position: relative; height: min(72vh, 700px); min-height: 440px; overflow: hidden; color: #fff; }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,26,18,.75) 0%, rgba(20,26,18,.12) 45%, transparent 70%); }
.page-hero .in { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding-block: 0 48px; padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: var(--gutter-r); }
.page-hero .label { color: rgba(255,255,255,.88); }
.page-hero h1 { font-size: clamp(2.6rem, 6.5vw, 5.4rem); margin-top: 12px; max-width: 16ch; }
.page-hero .sub { margin-top: 10px; font-size: 1.1rem; opacity: .92; }
@media (max-width: 700px) { .page-hero .in { padding-left: var(--gutter-l); padding-bottom: 36px; } }
.crumbs { font-size: .85rem; color: var(--muted); padding-block: 18px 0; }
.crumbs a { color: var(--muted); }
.lead-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: start; }
.lead-grid .txt { display: grid; gap: 18px; }
.lead-grid .txt p { color: var(--muted); font-size: 1.08rem; max-width: 58ch; }
.lead-grid h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 12px; }
.facts { background: var(--paper); padding: 30px 32px; display: grid; gap: 16px; position: sticky; top: calc(24px + env(safe-area-inset-top, 0px)); }
.facts .price b { font-family: var(--display); font-weight: 400; font-size: 2.4rem; font-variant-numeric: tabular-nums; }
.facts .price small { color: var(--muted); }
.facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: .95rem; border-top: 1px solid var(--line); padding-top: 16px; }
.facts dt { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); font-weight: 500; padding-top: 4px; }
.facts dd { margin: 0; }
.facts .btn { width: 100%; }
.facts .note { font-size: .82rem; color: var(--muted); font-style: italic; }
@media (max-width: 900px) { .lead-grid { grid-template-columns: 1fr; gap: 40px; } .facts { position: static; } }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 240px; gap: 10px; }
.gallery button { padding: 0; border: 0; background: none; overflow: hidden; cursor: zoom-in; position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.gallery button:hover img { transform: scale(1.04); }
.gallery button.big { grid-column: span 2; grid-row: span 2; }
.gallery button.tall { grid-row: span 2; }
.gallery figcaption { position: absolute; left: 10px; bottom: 10px; color: #fff; font-style: italic; font-size: .88rem; background: rgba(20,26,18,.6); padding: 3px 10px; text-align: left; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; } .gallery button.big { grid-column: span 2; } }
.others { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.others a { display: grid; text-decoration: none; background: var(--paper); }
.others img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.others .t { padding: 22px 24px 26px; display: grid; gap: 6px; }
.others h3 { font-size: 1.6rem; }
.others p { color: var(--muted); font-size: .95rem; }
.others .go { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rose); font-weight: 500; margin-top: 6px; }
@media (max-width: 760px) { .others { grid-template-columns: 1fr; } }
.faq-list details { border-bottom: 1px solid var(--line); }

/* Page « Le domaine entier » : 3 colonnes et liste des saisons */
.places.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.seasons .slow-list li { grid-template-columns: 200px 1fr; }
@media (max-width: 900px) { .places.three { grid-template-columns: 1fr; } .seasons .slow-list li { grid-template-columns: 1fr; } }
