/* ==========================================================================
   AZOBÉ Eco-Lodge & Spa — feuille de style unique
   Concept « Carnet de l'heure bleue » : le jour (sable) et la nuit (bleu), reliés par le laiton.
   ========================================================================== */
@layer reset, tokens, base, layout, components, utilities, pages;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-block-size: 100vh; min-block-size: 100dvh; }
  img, picture, svg, video { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  table { border-collapse: collapse; border-spacing: 0; }
  summary { cursor: pointer; }
  [hidden] { display: none !important; }
  dialog { color: inherit; }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  legend { padding: 0; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --color-sable: #F6EDE0;
    --color-sable-2: #EDE0CC;
    --color-ecume: #FBF7F0;
    --color-nuit: #0D2339;
    --color-nuit-profonde: #081726;
    --color-nuit-2: #16324D;
    --color-ardoise: #4A5768;
    --color-brume: #A9B4C2;
    --color-laiton: #BC9041;
    --color-laiton-clair: #D8B56E;
    --color-laiton-profond: #7A561B;
    --color-foret: #2F5B43;
    --color-corail: #A23A22;
    --color-lagune: #2B6C70;
    --color-saison-haute: #EBD5A6;
    --color-saison-basse: #D3E5E1;
    --color-desactive: #8C8F94;

    /* rôles (surchargés dans les sections de nuit) */
    --bg: var(--color-sable);
    --bg-alt: var(--color-sable-2);
    --surface: var(--color-ecume);
    --fg: var(--color-nuit);
    --fg-soft: var(--color-ardoise);
    --accent: var(--color-laiton-profond);
    --line: color-mix(in srgb, var(--color-laiton) 38%, transparent);
    --line-strong: var(--color-laiton);
    --focus: var(--color-laiton-profond);

    --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-body: "Instrument Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
    --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
    --step-2: clamp(1.44rem, 1.25rem + 0.9vw, 1.95rem);
    --step-3: clamp(1.73rem, 1.4rem + 1.6vw, 2.6rem);
    --step-4: clamp(2.07rem, 1.5rem + 2.8vw, 3.6rem);
    --step-5: clamp(2.6rem, 1.4rem + 5.4vw, 5.8rem);

    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem;
    --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;
    --section: clamp(4rem, 3rem + 5vw, 8rem);
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --radius: 2px;
    --shadow-1: 0 1px 2px rgb(8 23 38 / .08), 0 8px 24px rgb(8 23 38 / .08);
    --shadow-2: 0 2px 4px rgb(8 23 38 / .1), 0 24px 60px rgb(8 23 38 / .22);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
    --header-h: 64px;
    --bar-h: 0px;
    --demo-offset: 0px;
    --wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23D8B56E' stroke-width='1' opacity='.9'%3E%3Cpath d='M12 0c6 30-6 50 0 80s-6 50 0 80'/%3E%3Cpath d='M44 0c-5 25 7 55 0 80s5 55 0 80'/%3E%3Cpath d='M71 0c4 28-4 52 2 80s-4 52 0 80'/%3E%3Cpath d='M103 0c-6 34 6 46 0 80s6 46 0 80'/%3E%3Cpath d='M131 0c5 26-5 54 1 80s-5 54 0 80'/%3E%3Cpath d='M154 0c-3 30 3 50 0 80s3 50 0 80'/%3E%3C/g%3E%3C/svg%3E");
  }
  @media (min-width: 64em) { :root { --header-h: 72px; } }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + 1rem); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    font-synthesis: none;
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding-block-end: var(--bar-h);
    overflow-wrap: break-word;
  }
  h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; text-wrap: balance; letter-spacing: -0.01em; }
  h1 { font-weight: 300; font-size: var(--step-4); letter-spacing: -0.02em; }
  h2 { font-size: var(--step-3); letter-spacing: -0.02em; }
  h3 { font-size: var(--step-2); font-weight: 500; }
  h4 { font-size: var(--step-1); font-weight: 500; }
  h1 em, h2 em, h3 em, .em { font-style: italic; font-weight: 400; }
  p, li, dd, figcaption { text-wrap: pretty; }
  p { max-inline-size: 66ch; }
  strong, b { font-weight: 600; }
  a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease); }
  a:hover { text-decoration-color: currentColor; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: var(--color-laiton-clair); color: var(--color-nuit-profonde); }
  small, .small { font-size: var(--step--1); }
  abbr[title] { text-decoration: none; }
  .nums, table, output { font-variant-numeric: tabular-nums lining-nums; }
  hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--space-6); }
  svg.i { display: inline-block; vertical-align: -0.22em; inline-size: 1.25em; block-size: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .skip-link { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 2000; padding: 0.75rem 1.25rem; background: var(--color-nuit); color: var(--color-sable); font-weight: 600; text-decoration: none; transform: translateY(-200%); border-radius: var(--radius); }
  .skip-link:focus { transform: none; outline: 2px solid var(--color-laiton-clair); outline-offset: 2px; }
  html.has-modal { overflow: hidden; scrollbar-gutter: stable; }
}

@layer layout {
  .wrap { inline-size: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; }
  .wrap--wide { inline-size: min(100% - 2 * var(--gutter), 90rem); }
  .wrap--narrow { inline-size: min(100% - 2 * var(--gutter), 52rem); margin-inline: auto; }
  .prose > * + * { margin-block-start: 1em; }
  .prose h2 { margin-block-start: 2em; font-size: var(--step-2); }
  .prose h3 { margin-block-start: 1.6em; font-size: var(--step-1); }
  .prose ul, .prose ol { padding-inline-start: 1.25em; }
  .prose li + li { margin-block-start: 0.4em; }
  .prose a { color: var(--accent); }
  .stack > * + * { margin-block-start: var(--stack, 1rem); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 0.75rem 1rem); }
  .grid { display: grid; gap: var(--gap, 1.5rem); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

  /* ---------- sections : jour / nuit ---------- */
  .section { position: relative; padding-block: var(--section); background: var(--bg); color: var(--fg); }
  .section--alt { background: var(--bg-alt); }
  .section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); }
  .section--nuit {
    --bg: var(--color-nuit); --bg-alt: var(--color-nuit-2); --surface: var(--color-nuit-2);
    --fg: var(--color-sable); --fg-soft: var(--color-brume); --accent: var(--color-laiton-clair);
    --line: color-mix(in srgb, var(--color-laiton-clair) 30%, transparent); --focus: var(--color-laiton-clair);
    background-color: var(--color-nuit);
    background-image: var(--wood);
    background-size: 160px 160px;
    isolation: isolate;
  }
  .section--nuit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-nuit); opacity: 0.94; }
  .section--profonde { --bg: var(--color-nuit-profonde); background: var(--color-nuit-profonde); }
  .section--profonde::before { background: var(--color-nuit-profonde); }

  .sec-head { display: grid; gap: var(--space-4) var(--space-6); margin-block-end: clamp(2rem, 1.5rem + 2.5vw, 4rem); align-items: end; }
  .sec-head h2 { max-inline-size: 18ch; }
  .sec-head__lede { color: var(--fg-soft); font-size: var(--step-1); line-height: 1.5; max-inline-size: 44ch; }
  @media (min-width: 64em) {
    .sec-head { grid-template-columns: repeat(12, 1fr); }
    .sec-head > :first-child { grid-column: 1 / span 6; }
    .sec-head__lede { grid-column: 8 / span 5; }
    .sec-head--center { text-align: center; }
  }
  .eyebrow { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-block-end: var(--space-3); }
  .eyebrow--coords { font-variant-numeric: tabular-nums; }
  .chapter { display: flex; align-items: baseline; gap: 0.75rem; font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--accent); margin-block-end: var(--space-3); }
  .chapter::after { content: ""; flex: 0 1 4rem; border-block-start: 1px solid var(--line-strong); transform: translateY(-0.3em); }
  .chapter b { font-weight: 400; }

  /* ---------- ligne d'horizon et rose des vents ---------- */
  .horizon { position: relative; block-size: 20px; display: grid; place-items: center; color: var(--color-laiton); }
  .horizon::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; border-block-start: 1px solid var(--color-laiton); opacity: 0.7; transform-origin: left center; }
  .horizon .rose { position: relative; inline-size: 20px; block-size: 20px; background: var(--bg); padding-inline: 6px; box-sizing: content-box; }
  .rose { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .horizon--trace::before { animation: trace linear forwards; animation-timeline: view(); animation-range: entry 10% cover 45%; }
      @keyframes trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    }
  }

  /* ---------- en-tête ---------- */
  .site-header {
    position: sticky; inset-block-start: 0; z-index: 100; min-block-size: var(--header-h);
    background: rgb(246 237 224 / .97);
    border-block-end: 1px solid var(--line);
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .header__in { display: flex; align-items: center; gap: var(--space-4); min-block-size: var(--header-h); flex-wrap: wrap; padding-block: 0.5rem; }
  .logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; flex: none; }
  .logo__mark { inline-size: 34px; block-size: 34px; fill: none; stroke: var(--color-laiton); stroke-width: 1.6; stroke-linecap: round; }
  .logo__text { display: grid; line-height: 1; }
  .logo__word { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: 0.18em; }
  .logo__sub { display: none; font-weight: 600; font-size: 9px; letter-spacing: 0.16em; margin-block-start: 5px; opacity: 0.85; white-space: nowrap; }
  @media (min-width: 30em) { .logo__sub { display: block; } }
  .nav { order: 5; inline-size: 100%; }
  .nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; padding: 0; }
  .nav a { display: inline-flex; align-items: center; min-block-size: 44px; font-size: 0.9rem; font-weight: 500; text-decoration: none; position: relative; }
  .nav a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 8px; border-block-start: 1px solid var(--color-laiton); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease); }
  .nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
  .nav a[aria-current] { font-weight: 600; }
  .header__actions { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }
  .lang { display: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; align-items: center; gap: 0.15rem; }
  .lang a { display: inline-grid; place-items: center; min-inline-size: 36px; min-block-size: 36px; padding-inline: 0.3rem; text-decoration: none; opacity: 0.75; }
  .lang a:hover { opacity: 1; }
  .lang [aria-current="true"] { opacity: 1; border-block-end: 1px solid var(--color-laiton); }
  .lang span.sep { opacity: 0.4; }
  .menu-toggle { display: none; align-items: center; gap: 0.5rem; min-block-size: 44px; padding-inline: 0.5rem; font-weight: 600; font-size: 0.875rem; }
  .menu-toggle .bars { inline-size: 22px; block-size: 14px; position: relative; }
  .menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; inset-inline: 0; block-size: 1.5px; background: currentColor; transition: transform var(--dur-2) var(--ease), inset-block-start var(--dur-2) var(--ease); }
  .menu-toggle .bars::before { inset-block-start: 3px; }
  .menu-toggle .bars::after { inset-block-start: 10px; }
  .menu-toggle[aria-expanded="true"] .bars::before { inset-block-start: 6.5px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .bars::after { inset-block-start: 6.5px; transform: rotate(-45deg); }
  .nav__extra { display: none; }

  @media (max-width: 63.99em) {
    .js .menu-toggle { display: inline-flex; }
    .js .nav { display: none; }
    .js .nav.is-open {
      display: flex; flex-direction: column; justify-content: space-between; position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
      background-color: var(--color-nuit); color: var(--color-sable); padding: var(--space-6) var(--gutter) calc(var(--space-6) + var(--demo-offset)); overflow-y: auto; order: 0; inline-size: auto;
      background-image: var(--wood); --focus: var(--color-laiton-clair);
      animation: menu-in var(--dur-3) var(--ease) both;
    }
    .js .nav.is-open ul { flex-direction: column; gap: 0; }
    .js .nav.is-open li { border-block-end: 1px solid var(--line); }
    .js .nav.is-open a { font-family: var(--font-display); font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 300; min-block-size: 3.6rem; inline-size: 100%; --line: rgb(216 181 110 / .3); }
    .js .nav.is-open a::after { display: none; }
    .js .nav.is-open .nav__extra { display: grid; gap: var(--space-4); padding-block-start: var(--space-6); font-size: 0.95rem; color: var(--color-brume); }
    .js .nav.is-open .nav__extra a { font-family: var(--font-body); font-size: 0.95rem; min-block-size: 44px; display: inline-flex; inline-size: auto; color: var(--color-laiton-clair); }
    .js .nav .lang--panel { display: flex; }
    .js .nav .lang--panel a { color: var(--color-sable); font-family: var(--font-body); font-size: 0.9rem; min-block-size: 40px; inline-size: auto; }
    @keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  }
  @media (min-width: 64em) {
    .header__in { flex-wrap: nowrap; gap: 1.5rem; }
    .nav { order: 0; inline-size: auto; margin-inline-start: auto; }
    .nav ul { flex-wrap: nowrap; gap: 0 1.25rem; }
    .nav a { font-size: 0.875rem; }
    .header__actions { margin-inline-start: 0; }
    .lang { display: flex; }
    .nav .lang--panel { display: none; }
  }
  @media (min-width: 80em) { .nav ul { gap: 0 1.6rem; } .nav a { font-size: 0.9rem; } }

  /* en-tête transparent au-dessus du héros (accueil, JS seulement) */
  .js .site-header[data-over]:not(.is-solid):not(.is-menu) { position: fixed; inset-inline: 0; background: transparent; border-color: transparent; color: var(--color-sable); --focus: var(--color-laiton-clair); --btn-bg: var(--color-laiton); --btn-fg: var(--color-nuit); --btn-hover: var(--color-laiton-clair); }
  .js .site-header[data-over]:not(.is-solid) .nav a { text-shadow: 0 1px 12px rgb(8 23 38 / .5); }
  .js .site-header[data-over]:not(.is-solid) .logo__word { text-shadow: 0 1px 12px rgb(8 23 38 / .5); }
  .js .site-header[data-over].is-solid { position: fixed; inset-inline: 0; }
  .js .site-header[data-over].is-menu { background: var(--color-nuit); color: var(--color-sable); }

  /* ---------- fil d'Ariane et en-tête de page ---------- */
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; padding: 0; font-size: 0.8125rem; color: var(--fg-soft); }
  .crumbs li + li::before { content: "›"; margin-inline-end: 0.5rem; color: var(--color-laiton); }
  .crumbs a { text-decoration: none; color: inherit; display: inline-block; padding-block: 0.4rem; }
  .crumbs a:hover { color: var(--fg); text-decoration: underline; }
  .page-head { position: relative; padding-block: clamp(2rem, 1.5rem + 3vw, 4.5rem) clamp(2.5rem, 2rem + 3vw, 5rem); background: var(--bg); }
  .page-head h1 { margin-block: var(--space-4) var(--space-4); max-inline-size: 20ch; }
  .page-head__lede { font-size: var(--step-1); line-height: 1.5; color: var(--fg-soft); max-inline-size: 52ch; }
  .page-head__meta { margin-block-start: var(--space-5); display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: var(--step--1); color: var(--fg-soft); }
  .page-head--photo { color: var(--color-sable); background: var(--color-nuit-profonde); isolation: isolate; padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(3.5rem, 3rem + 5vw, 7rem); --fg: var(--color-sable); --fg-soft: #D7DEE7; --accent: var(--color-laiton-clair); --focus: var(--color-laiton-clair); --line: rgb(216 181 110 / .35); }
  .page-head--photo .page-head__bg { position: absolute; inset: 0; z-index: -2; }
  .page-head--photo .page-head__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.92) sepia(.06); }
  .page-head--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(8 23 38 / .88), rgb(8 23 38 / .5) 60%, rgb(8 23 38 / .62)); }
  .page-head--photo .crumbs { color: #D7DEE7; }

  /* ---------- pied de page ---------- */
  .site-footer { background: var(--color-nuit-profonde); color: var(--color-sable); --fg: var(--color-sable); --fg-soft: var(--color-brume); --accent: var(--color-laiton-clair); --focus: var(--color-laiton-clair); --line: rgb(216 181 110 / .28); padding-block: clamp(3rem, 2.5rem + 3vw, 5.5rem) 1.5rem; background-image: var(--wood); background-blend-mode: soft-light; position: relative; isolation: isolate; }
  .site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-nuit-profonde); opacity: 0.955; }
  .footer__grid { display: grid; gap: var(--space-7) var(--space-6); }
  @media (min-width: 48em) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64em) { .footer__grid { grid-template-columns: 1.35fr 1fr 1fr 1fr; } }
  .footer__brand .logo__word { font-size: 1.6rem; }
  .footer__brand p { margin-block-start: var(--space-4); color: var(--fg-soft); font-size: 0.95rem; }
  .footer__coords { margin-block-start: var(--space-4); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
  .footer__col h2 { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-block-end: var(--space-4); }
  .footer__col ul { list-style: none; padding: 0; display: grid; gap: 0; }
  .footer__col li { color: var(--fg-soft); font-size: 0.95rem; }
  .footer__col a { text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 36px; color: var(--color-sable); }
  .footer__col a:hover { color: var(--color-laiton-clair); text-decoration: underline; }
  .footer__col address { font-style: normal; color: var(--fg-soft); font-size: 0.95rem; line-height: 1.7; }
  .footer__time { margin-block-start: var(--space-4); padding: 0.75rem 1rem; border: 1px solid var(--line); font-size: 0.9rem; color: var(--fg-soft); }
  .footer__time output { color: var(--color-sable); font-weight: 600; }
  .footer__pay { margin-block-start: var(--space-4); font-size: 0.85rem; color: var(--fg-soft); }
  .footer__legal { margin-block-start: var(--space-8); padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); display: grid; gap: var(--space-3); font-size: 0.85rem; color: var(--fg-soft); }
  .footer__legal ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
  .footer__legal a { color: var(--color-sable); display: inline-flex; min-block-size: 36px; align-items: center; }
  .footer__legal p { max-inline-size: none; }
  .footer__legal .lang { display: flex; } /* bascule de langue toujours visible dans le pied, y compris sur mobile et sans JS */
  .footer__demo a { color: var(--color-laiton-clair); }

  /* ---------- barre d'actions mobile ---------- */
  .action-bar { position: fixed; inset-inline: 0; inset-block-end: var(--demo-offset); z-index: 90; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 0.4rem; padding: 0.5rem var(--gutter) max(0.5rem, env(safe-area-inset-bottom)); background: rgb(8 23 38 / .97); border-block-start: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform var(--dur-2) var(--ease); }
  /* barres fixes affichées une fois le décalage du bandeau de démonstration connu (main.js) : aucun saut visible */
  .js:not(.demo-placed):not(.no-reveal) :is(.action-bar, .recap-bar) { visibility: hidden; }
  .action-bar .btn { min-block-size: 48px; padding-inline: 0.35rem; gap: 0.35rem; font-size: 0.85rem; min-inline-size: 0; }
  .action-bar.is-hidden { transform: translateY(110%); }
  @media (min-width: 48em) { .action-bar { display: none; } }
  @media (max-width: 47.99em) { :root { --bar-h: 4.5rem; } body { padding-block-end: calc(var(--bar-h) + var(--demo-offset)); } }
}


@layer components {
  /* ---------- boutons et liens ---------- */
  .section--nuit, .page-head--photo, .site-footer, .hero, .dialog--nuit { --btn-bg: var(--color-laiton); --btn-fg: var(--color-nuit); --btn-hover: var(--color-laiton-clair); }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-block-size: 48px; padding: 0.7rem 1.5rem;
    border: 1px solid transparent; border-radius: var(--radius); background: var(--btn-bg, var(--color-nuit)); color: var(--btn-fg, var(--color-sable));
    font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.02em; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), scale var(--dur-1) var(--ease);
  }
  .btn:hover { background: var(--btn-hover, var(--color-nuit-2)); }
  .btn:active { scale: 0.98; }
  .btn svg.i { transition: translate var(--dur-2) var(--ease); }
  .btn:hover svg.i--arrow { translate: 3px 0; }
  .btn--ghost, .section--nuit .btn--ghost, .page-head--photo .btn--ghost, .site-footer .btn--ghost { background: transparent; color: var(--fg); border-color: color-mix(in srgb, currentColor 55%, transparent); }
  .btn--ghost:hover, .section--nuit .btn--ghost:hover, .page-head--photo .btn--ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); border-color: currentColor; }
  .btn--sm { min-block-size: 44px; padding: 0.45rem 1rem; font-size: 0.875rem; }
  .btn--wa { --btn-bg: #1F5A3E; --btn-fg: #fff; --btn-hover: #174630; }
  .btn[aria-disabled="true"], .btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
  .link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.9375rem; color: var(--accent); text-decoration: none; min-block-size: 44px; }
  .link-arrow span { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.25em; }
  .link-arrow:hover span { text-decoration-color: currentColor; }
  .link-arrow svg.i { transition: translate var(--dur-2) var(--ease); }
  .link-arrow:hover svg.i { translate: 3px 0; }

  /* ---------- pastilles, étiquettes ---------- */
  .pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.65rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; border-radius: 99px; background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); line-height: 1.4; }
  .pill--ok { background: color-mix(in srgb, var(--color-foret) 14%, var(--color-ecume)); color: var(--color-foret); }
  .pill--brass { background: var(--color-saison-haute); color: var(--color-nuit); }
  .pill--lagune { background: var(--color-saison-basse); color: var(--color-nuit); }
  .tag-fictive { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border: 1px dashed var(--color-laiton); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
  .score { display: inline-grid; place-items: center; min-inline-size: 2.6rem; padding: 0.15rem 0.5rem; border-radius: 99px; background: var(--color-nuit); color: var(--color-sable); font-weight: 600; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
  .section--nuit .score { background: var(--color-laiton); color: var(--color-nuit); }

  /* ---------- cartes, arche ---------- */
  .card { background: var(--surface); border: 1px solid var(--line); padding: clamp(1.25rem, 1rem + 1vw, 2rem); position: relative; }
  .card--flat { background: transparent; }
  .card h3 { font-size: var(--step-1); }
  .arch { display: block; position: relative; margin: 0 8px 8px 0; aspect-ratio: 4 / 5; isolation: isolate; }
  .arch::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--color-laiton); border-radius: 999px 999px 0 0; translate: 8px 8px; transition: translate var(--dur-3) var(--ease); }
  .arch__img { display: block; position: relative; inline-size: 100%; block-size: 100%; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--color-sable-2); }
  .arch__img img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.92) sepia(.06); transition: scale 600ms var(--ease); }
  a:hover > .arch .arch__img img, .arch:hover .arch__img img { scale: 1.04; }
  a:hover > .arch::before, .arch:hover::before { translate: 11px 11px; }
  .photo { position: relative; overflow: hidden; background: var(--color-sable-2); margin: 0; }
  .photo img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.92) sepia(.06); }
  .photo--16x9 { aspect-ratio: 16 / 9; } .photo--4x5 { aspect-ratio: 4 / 5; }
  .photo--nuit img { filter: saturate(.85) sepia(.05) brightness(.9); }
  .photo--nuit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(8 23 38 / .55), transparent 60%); }
  figcaption { font-size: var(--step--1); color: var(--fg-soft); margin-block-start: 0.5rem; }
  .amenities { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.25rem 1.5rem; }
  .amenities li { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.65rem; border-block-end: 1px solid var(--line); font-size: 0.95rem; }
  .amenities svg.i { color: var(--accent); inline-size: 1.5rem; block-size: 1.5rem; }
  .ticks { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
  .ticks li { display: flex; gap: 0.7rem; align-items: baseline; }
  .ticks svg.i { color: var(--color-foret); position: relative; inset-block-start: 0.2em; }
  .section--nuit .ticks svg.i { color: var(--color-laiton-clair); }
  .stat { display: grid; gap: 0.25rem; align-content: start; }
  .stat__n { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
  .stat__n small { font-size: 0.45em; letter-spacing: 0; font-weight: 400; margin-inline-start: 0.15em; }
  .stat__l { font-size: 0.9rem; color: var(--fg-soft); max-inline-size: 22ch; }
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-6) var(--space-5); }
  .callout { border-inline-start: 2px solid var(--color-laiton); padding: 0.5rem 0 0.5rem 1.25rem; }
  .note { padding: 1rem 1.25rem; border: 1px solid var(--line); background: color-mix(in srgb, var(--color-lagune) 7%, var(--surface)); font-size: 0.95rem; }
  noscript > .note { max-inline-size: none; margin-block-end: 1.25rem; }

  /* ---------- tableaux ---------- */
  .table-wrap { position: relative; overflow-x: auto; max-inline-size: 100%; border: 1px solid var(--line); background: var(--surface); -webkit-overflow-scrolling: touch; }
  .table-wrap:focus-visible { outline-offset: -2px; }
  .table { inline-size: 100%; font-size: 0.9375rem; }
  .table caption { text-align: start; padding: 1rem 1rem 0.5rem; font-family: var(--font-display); font-size: var(--step-1); caption-side: top; }
  .table th, .table td { padding: 0.75rem 1rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--line); }
  .table thead th { background: var(--bg-alt); font-weight: 600; font-size: 0.85rem; vertical-align: bottom; }
  .table tbody th { font-weight: 600; background: color-mix(in srgb, var(--bg-alt) 45%, var(--surface)); }
  .table td.num, .table th.num { text-align: end; white-space: nowrap; }
  .table tbody tr:last-child > * { border-block-end: 0; }
  .table small { color: var(--fg-soft); display: block; font-weight: 400; }
  .table--sticky th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; }
  .yes svg.i { color: var(--color-foret); }

  /* ---------- formulaires ---------- */
  .form { display: grid; gap: var(--space-5); }
  .form-grid { display: grid; gap: var(--space-5); }
  @media (min-width: 40em) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } }
  .field { display: grid; gap: 0.4rem; align-content: start; }
  .label, .field > legend, fieldset.field > legend { font-weight: 600; font-size: 0.9rem; }
  .label .req, legend .req { color: var(--color-corail); margin-inline-start: 0.15em; }
  .hint { font-size: 0.85rem; color: var(--fg-soft); }
  .input, .select, .textarea {
    inline-size: 100%; min-block-size: 48px; padding: 0.65rem 0.85rem; background: var(--color-ecume); color: var(--color-nuit);
    border: 1px solid #6B7787; border-radius: var(--radius); font-size: 1rem; line-height: 1.4;
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .textarea { min-block-size: 8rem; resize: vertical; }
  .select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D2339' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.1rem; }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--color-nuit); }
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--color-laiton-profond); outline-offset: 1px; border-color: var(--color-nuit); }
  .field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--color-corail); box-shadow: inset 0 0 0 1px var(--color-corail); }
  .field__error { display: flex; gap: 0.4rem; align-items: flex-start; color: var(--color-corail); font-size: 0.875rem; font-weight: 500; }
  .field__error:empty { display: none; }
  .field__error::before { content: ""; flex: none; inline-size: 1rem; block-size: 1rem; margin-block-start: 0.15em; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat; }
  .check { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; min-block-size: 44px; padding-block: 0.35rem; }
  .check input { inline-size: 1.4rem; block-size: 1.4rem; flex: none; margin-block-start: 0.1rem; accent-color: var(--color-nuit); cursor: pointer; }
  .check span { font-size: 0.95rem; line-height: 1.45; }
  .choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
  .choice { position: relative; display: inline-flex; }
  .choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; inline-size: 100%; block-size: 100%; }
  .choice span { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 44px; padding: 0.4rem 1rem; border: 1px solid #6B7787; border-radius: var(--radius); background: var(--color-ecume); font-size: 0.95rem; font-weight: 500; transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
  .choice:hover span { border-color: var(--color-nuit); }
  .choice input:checked + span { background: var(--color-nuit); color: var(--color-sable); border-color: var(--color-nuit); }
  .choice input:focus-visible + span { outline: 2px solid var(--color-laiton-profond); outline-offset: 2px; }
  .honey { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
  .error-summary { border: 1px solid var(--color-corail); border-inline-start-width: 4px; background: color-mix(in srgb, var(--color-corail) 6%, var(--color-ecume)); padding: 1rem 1.25rem; }
  .error-summary h3 { font-size: var(--step-1); color: var(--color-corail); font-family: var(--font-body); font-weight: 600; }
  .error-summary ul { margin: 0.5rem 0 0; padding-inline-start: 1.1rem; display: grid; gap: 0.25rem; }
  .error-summary a { color: var(--color-corail); font-weight: 500; }

  /* ---------- dialogues ---------- */
  .dialog { border: 0; padding: 0; background: var(--color-ecume); color: var(--color-nuit); inline-size: min(100% - 1.5rem, 64rem); max-block-size: calc(100dvh - 1.5rem); overflow: auto; border-radius: 4px; box-shadow: var(--shadow-2); --fg: var(--color-nuit); --fg-soft: var(--color-ardoise); --accent: var(--color-laiton-profond); overscroll-behavior: contain; }
  .dialog::backdrop { background: rgb(8 23 38 / .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  @media (prefers-reduced-motion: no-preference) {
    .dialog[open] { animation: dlg-in var(--dur-3) var(--ease) both; }
    .dialog[open]::backdrop { animation: fade-in var(--dur-3) ease both; }
    @keyframes dlg-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0; } }
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  }
  .icon-btn { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; transition: background-color var(--dur-1); color: inherit; }
  .icon-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
  .icon-btn:disabled { opacity: .35; cursor: not-allowed; }
  .carousel__btn { inline-size: 48px; block-size: 48px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: background-color var(--dur-2), color var(--dur-2), opacity var(--dur-2); }
  .carousel__btn:hover:not(:disabled) { background: var(--color-nuit); color: var(--color-sable); }
  .section--nuit .carousel__btn:hover:not(:disabled) { background: var(--color-laiton); color: var(--color-nuit); }
  .carousel__btn:disabled { opacity: 0.3; cursor: default; }

  /* ---------- avis ---------- */
  .review { position: relative; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border: 1px solid var(--line); background: var(--surface); display: grid; gap: 1rem; align-content: start; }
  .review blockquote { margin: 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35; font-weight: 300; }
  .review blockquote p { max-inline-size: none; }
  .review footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.875rem; color: var(--fg-soft); flex-wrap: wrap; }
  .review footer strong { color: var(--fg); display: block; font-weight: 600; }
  .review .trans { font-size: 0.78rem; font-style: italic; color: var(--fg-soft); }
  .seasons li.s-basse::before { background: var(--color-saison-basse); border-color: var(--color-lagune); }
  .seasons li.s-moyenne::before { background: var(--color-sable-2); border-color: color-mix(in srgb, var(--color-laiton) 40%, transparent); }
  .seasons li.s-ferme::before { background: repeating-linear-gradient(135deg, var(--color-sable-2) 0 4px, #d6c7ae 4px 8px); border-color: var(--color-desactive); }
  .legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; padding: 0; margin-block-start: 1rem; font-size: 0.85rem; color: var(--fg-soft); }
  .legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
  .legend i { display: inline-block; inline-size: 1.25rem; block-size: 0.8rem; border-block-start: 3px solid var(--color-laiton); background: var(--color-saison-haute); }
  .legend i.s-basse { background: var(--color-saison-basse); border-color: var(--color-lagune); }
  .legend i.s-moyenne { background: var(--color-sable-2); border-color: color-mix(in srgb, var(--color-laiton) 40%, transparent); }
  .legend i.s-ferme { background: repeating-linear-gradient(135deg, var(--color-sable-2) 0 3px, #d6c7ae 3px 6px); border-color: var(--color-desactive); }
  .climat .bar { position: absolute; inset-block-end: 0; inset-inline: 0; margin-inline: auto; inline-size: 100%; max-inline-size: 2.2rem; block-size: calc(var(--h) * 1%); min-block-size: 4px; background: var(--color-lagune); }
  .climat li.is-best .bar { background: var(--color-laiton); }

  /* ---------- toasts / annonces ---------- */
  .live { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

  /* ---------- apparition au défilement (amélioration progressive) ---------- */
  /* main.js ne met en attente (is-pending) que les éléments hors de l'écran au chargement : rien n'est caché au premier affichage */
  @media (prefers-reduced-motion: no-preference) {
    .reveal.is-pending:not(.is-in) { opacity: 0; transform: translateY(20px); }
    .reveal.is-pending { transition: opacity 500ms var(--ease), transform 500ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
  }

  /* ---------- sujets utilitaires ---------- */
  .text-soft { color: var(--fg-soft); }
  .nowrap { white-space: nowrap; }
  .center { text-align: center; }
  .mt-4 { margin-block-start: var(--space-4); } .mt-5 { margin-block-start: var(--space-5); } .mt-6 { margin-block-start: var(--space-6); }
  .mb-5 { margin-block-end: var(--space-5); }
  .cal__top-title { font-weight: 600; font-size: 0.9rem; color: var(--fg-soft); }
  .cal__day.s-haute { border-block-start-color: var(--color-laiton); }
  .cal__day.s-basse { border-block-start-color: var(--color-lagune); }
  .cal__day.s-moyenne { border-block-start-color: color-mix(in srgb, var(--color-laiton) 28%, transparent); }
  .cal__day.is-in, .cal__day.is-prev { background: color-mix(in srgb, var(--color-laiton-clair) 38%, var(--color-ecume)); }
  .cal__day.is-closed { background: repeating-linear-gradient(135deg, transparent 0 4px, rgb(140 143 148 / .22) 4px 6px); }
  .cal .legend { margin-block-start: 0.75rem; font-size: 0.78rem; }
  .cal .legend i.full { border-block-start: 0; background: none; }
  .cal .legend i.full::after { content: "12"; text-decoration: line-through; font-size: 0.78rem; line-height: 1; display: block; }
  .fb__btn svg.i:first-child { color: var(--color-laiton-profond); }
  .proofs svg.i { color: var(--color-laiton-profond); }
  .step.is-open { border-color: var(--line-strong); }
  .step:not(.is-done) .step__edit, .step.is-open .step__edit { display: none; }
  .step:not(.is-done) .step__sum, .step.is-open .step__sum { display: none; }
  .step__foot .btn--ghost { order: -1; }
  .js-only { display: none; }
  .js .js-only { display: block; }
  .room-opt .photo { display: block; aspect-ratio: 4 / 3; }
  .room-opt__alt { grid-column: 1 / -1; }
  .room-opt__check svg.i { inline-size: 1rem; block-size: 1rem; stroke-width: 2.2; }
  .opt__why.is-ok { color: var(--color-foret); }
  .choice-row--sm .choice span { min-block-size: 40px; padding: 0.25rem 0.8rem; font-size: 0.875rem; }
  .recap__room .photo { aspect-ratio: 1; }
  .recap__total .amt { font-family: var(--font-display); font-size: var(--step-4); font-weight: 400; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
  .recap__total .amt small { font-size: 0.4em; font-family: var(--font-body); font-weight: 500; letter-spacing: 0; color: var(--color-ardoise); }
  .promo__row .input { min-block-size: 44px; }
  .promo__msg.is-ok { color: var(--color-foret); font-weight: 500; }
  .promo__msg.is-ko { color: var(--color-corail); }
  .recap-bar .btn { --btn-bg: var(--color-laiton); --btn-fg: var(--color-nuit); --btn-hover: var(--color-laiton-clair); flex: none; }
  html[data-page="reserver"] { --bar-h: 4.5rem; }
  @media (min-width: 64em) { html[data-page="reserver"] { --bar-h: 0px; } html[data-page="reserver"] body { padding-block-end: 0; } }
  .best { font-weight: 600; }
  .best::after { content: "+"; display: inline-grid; place-items: center; inline-size: 1.15rem; block-size: 1.15rem; margin-inline-start: 0.4rem; border-radius: 50%; background: var(--color-foret); color: #fff; font-size: 0.78rem; line-height: 1; vertical-align: 0.05em; }
}

@layer pages {
  .js .site-header[data-over] + main > .hero { margin-block-start: calc(var(--header-h) * -1); }
  .hero .eyebrow { color: var(--color-laiton-clair); }
  .intro-grid .prose p { font-size: var(--step-0); }
  .perk svg.i { inline-size: 1.75rem; block-size: 1.75rem; color: var(--color-laiton-profond); grid-row: 1 / span 2; }
  .room-slide .eyebrow { margin: 0; }
  .room-slide__stay.is-ko { border-color: var(--color-corail); background: color-mix(in srgb, var(--color-corail) 8%, transparent); color: var(--color-corail); }
  .xp { position: relative; min-block-size: 22rem; display: grid; align-content: end; padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
  .xp .eyebrow { color: var(--color-laiton-clair); margin: 0; }
  .xp h3 { font-size: var(--step-2); }
  .xp h3 a { text-decoration: none; }
  .xp h3 a::after { content: ""; position: absolute; inset: -9999px; inset: 0; }
  .xp .btn { position: relative; z-index: 3; }
  .panel .hours { font-size: 0.9rem; color: var(--fg-soft); display: flex; align-items: center; gap: 0.5rem; }
  .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .chip { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 44px; padding: 0.4rem 1.1rem; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 99px; font-size: 0.9rem; font-weight: 500; transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
  .chip:hover { border-color: currentColor; }
  .chip[aria-pressed="true"] { background: var(--color-nuit); color: var(--color-sable); border-color: var(--color-nuit); }
  .section--nuit .chip[aria-pressed="true"] { background: var(--color-laiton); color: var(--color-nuit); border-color: var(--color-laiton); }
  .chip svg.i { inline-size: 1.1em; block-size: 1.1em; }
  .js-chips { display: none; } .js .js-chips { display: flex; }
  .eng-grid .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-5); }
  .eng-grid .stat__n { color: var(--color-laiton-clair); }
  .offer .photo { aspect-ratio: 3 / 2; block-size: 100%; min-block-size: 16rem; min-inline-size: 0; }
  .offer .photo img { position: absolute; inset: 0; }
  @media (min-width: 48em) { .offer .photo { aspect-ratio: auto; } }
  .offer__price .amt { font-family: var(--font-display); font-size: var(--step-4); font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
  .info-card svg.i { inline-size: 1.75rem; block-size: 1.75rem; color: var(--color-laiton-profond); }
  .cta-final { position: relative; isolation: isolate; text-align: center; color: var(--color-sable); padding-block: clamp(5rem, 4rem + 6vw, 10rem); background: var(--color-nuit-profonde); overflow: hidden; --fg: var(--color-sable); --accent: var(--color-laiton-clair); --focus: var(--color-laiton-clair); }
  .cta-final > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -2; filter: saturate(.9) sepia(.08); }
  .cta-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(8 23 38 / .85), rgb(8 23 38 / .55)); }
  .cta-final .wrap { display: grid; gap: var(--space-5); justify-items: center; }
  .cta-final h2 { font-size: var(--step-4); font-weight: 300; max-inline-size: 16ch; }
  .cta-final p { color: #E3E8EE; }
  .cta-final .btn-row { justify-content: center; }
  .cta-final .btn { --btn-bg: var(--color-laiton); --btn-fg: var(--color-nuit); --btn-hover: var(--color-laiton-clair); }
  .cta-final .btn--ghost { --btn-bg: transparent; color: var(--color-sable); }
  .filters__count { font-weight: 600; font-size: 0.95rem; }
  .room-card.is-hidden { display: none; }
  .drawer { position: fixed; inset-inline: 0; inset-block-end: calc(var(--demo-offset) + var(--bar-h)); z-index: 89; padding: 0.75rem var(--gutter); background: var(--color-nuit); color: var(--color-sable); border-block-start: 1px solid var(--line-strong); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; box-shadow: 0 -10px 30px rgb(8 23 38 / .25); --btn-bg: var(--color-laiton); --btn-fg: var(--color-nuit); --btn-hover: var(--color-laiton-clair); --focus: var(--color-laiton-clair); }
  .drawer p { font-size: 0.95rem; max-inline-size: none; } .drawer strong { font-weight: 600; }
  .drawer .btn-row { gap: 0.5rem; }
  .drawer .btn--ghost { color: var(--color-sable); }
  .cmp-table th[scope="col"] .photo img { aspect-ratio: 3 / 2; inline-size: 100%; block-size: auto; }
  .cmp-table th[scope="col"] .photo { aspect-ratio: 3 / 2; margin-block-end: 0.5rem; }
  .cmp-table.is-diff tr.is-same { display: none; }
  .fiche-gallery .g { position: relative; display: block; overflow: hidden; background: var(--color-sable-2); }
  .fiche-gallery .g img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.92) sepia(.06); transition: scale 600ms var(--ease); }
  .fiche-gallery .g:hover img { scale: 1.03; }
  .other .photo { aspect-ratio: 4 / 3; }
  .plan { max-inline-size: 28rem; }
  .xcard.is-hidden { display: none; }
  .xcard .photo { aspect-ratio: 16 / 10; }
  .xcard__status { font-size: 0.875rem; font-weight: 500; display: flex; gap: 0.5rem; align-items: flex-start; min-block-size: 1.4em; }
  .xcard__status.is-ok { color: var(--color-foret); } .xcard__status.is-ko { color: var(--color-corail); }
  .xcard .btn { justify-self: start; }
  .xcard .btn[aria-pressed="true"] { background: var(--color-foret); }
  .diet svg.i { inline-size: 1rem; block-size: 1rem; } .tasting .amt { font-family: var(--font-display); font-size: var(--step-3); color: var(--color-laiton-clair); }
  .trio .photo { aspect-ratio: 1; }

  /* ================= ENGAGEMENT ================= */
  .chapters { display: grid; gap: 0; counter-reset: ch; }
  .gestures svg.i { color: var(--color-foret); margin-block-start: 0.15em; }
  .pack { container-type: inline-size; display: grid; gap: 0.9rem; align-content: start; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border: 1px solid var(--line); background: var(--surface); position: relative; }
  .pack h3 { font-size: var(--step-2); }
  .pack__price .amt { white-space: nowrap; font-family: var(--font-display); font-size: min(var(--step-3), 13.5cqi); font-weight: 400; line-height: 1.05; }
  .pack .ticks { font-size: 0.92rem; }
  .pack .btn { align-self: end; }
  .gift-amounts .choice span { min-block-size: 56px; flex-direction: column; align-items: flex-start; gap: 0; padding-block: 0.4rem; justify-content: center; }
  .gift-amounts .choice small { font-size: 0.78rem; opacity: 0.8; font-weight: 400; }
  .grid > .info-sec + .info-sec { margin-block-start: 0; }
  .two-col { display: grid; gap: clamp(2rem, 4vw, 4rem); }
  @media (min-width: 64em) { .two-col { grid-template-columns: 5fr 7fr; align-items: start; } .two-col--even { grid-template-columns: 1fr 1fr; } }
  .routes { display: grid; gap: 0.75rem; list-style: none; padding: 0; }
  .routes li { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line); background: var(--surface); }
  .routes svg.i { grid-row: 1 / span 2; inline-size: 1.6rem; block-size: 1.6rem; color: var(--color-laiton-profond); }
  .routes strong { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; }
  .routes span { font-size: 0.9rem; color: var(--fg-soft); }
  .map { position: relative; border: 1px solid var(--line-strong); background: #E9E2D2; overflow: hidden; }
  .map svg { inline-size: 100%; block-size: auto; }
  .channel svg.i { inline-size: 1.8rem; block-size: 1.8rem; color: var(--color-laiton-profond); }
  .status-open.is-closed::before { background: var(--color-laiton); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-laiton) 25%, transparent); }
  .assurances svg.i { color: var(--color-laiton-clair); }
  .legal .prose { max-inline-size: 46rem; }
  .legal .prose section { scroll-margin-block-start: calc(var(--header-h) + 1rem); }
  .legal .prose h2 { margin-block-start: 0; }
  .legal .prose section + section { margin-block-start: 2.5rem; padding-block-start: 2rem; border-block-start: 1px solid var(--line); }
  .legal .prose table { font-size: 0.9rem; }
  ::view-transition-old(lb-photo), ::view-transition-new(lb-photo) { animation-duration: 300ms; }

  /* ================= 404 / divers ================= */
  .lost { min-block-size: 70vh; display: grid; place-items: center; text-align: center; padding-block: var(--section); }
  .lost .rose { inline-size: 56px; block-size: 56px; color: var(--color-laiton); margin-inline: auto; }
  .lost h1 { margin-block: 1rem 0.5rem; font-size: var(--step-4); max-inline-size: 18ch; margin-inline: auto; }
  .lost p { margin-inline: auto; }

  /* ================= IMPRESSION ================= */
  @media print {
    :root { --bg: #fff; }
    .site-header, .site-footer, .action-bar, .recap-bar, .drawer, .btn, .btn-row, .skip-link, .cal, .progress, .book-bar, .menu-toggle, .crumbs, .toc, .msd-badge, .msd-toasts, .step__head, .promo, .recap__reset, .no-print { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; padding: 0 !important; }
    .section, .page-head { padding-block: 1rem; background: #fff !important; color: #000 !important; }
    .engine { display: block; }
    .recap, .recap--aside { position: static; max-block-size: none; border: 1px solid #000; break-inside: avoid; }
    .step__panel[hidden] { display: none; }
    .confirm__actions { display: none; }
    a { text-decoration: none; color: inherit; }
    .print-only { display: block !important; }
  }
  .print-only { display: none; }
}

@layer utilities {
  .text-soft { color: var(--fg-soft); }
  .nowrap { white-space: nowrap; }
  .center { text-align: center; }
  .mt-4 { margin-block-start: var(--space-4); } .mt-5 { margin-block-start: var(--space-5); } .mt-6 { margin-block-start: var(--space-6); }
  .mb-5 { margin-block-end: var(--space-5); }
  .hide-sm { display: none; } @media (min-width: 48em) { .hide-sm { display: initial; } }
  .only-sm { display: initial; } @media (min-width: 48em) { .only-sm { display: none; } }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}


@layer components {
  .room-opt__main .pill { justify-self: start; }
  .js-btn { display: none; }
  .js .js-btn { display: inline-flex; }
  .js .js-btn[hidden] { display: none; }
  .footer__address { font-style: normal; margin-block-start: 1rem; color: var(--fg-soft); font-size: 0.95rem; line-height: 1.7; }
  .footer__hours { list-style: none; padding: 0; display: grid; gap: 0.15rem; font-size: 0.9rem; color: var(--fg-soft); }

  /* en-têtes de page sombres : fil d'Ariane lisible */
  .section--nuit .crumbs a:hover { color: var(--color-sable); }
  .page-head--photo .crumbs li + li::before { color: var(--color-laiton-clair); }
  .page-head .toc { margin-block-start: var(--space-5); }

  /* barre d'actions : boutons lisibles sur fond nuit */
  .action-bar { --btn-bg: var(--color-laiton); --btn-fg: var(--color-nuit); --btn-hover: var(--color-laiton-clair); }
  .action-bar .btn--ghost { color: var(--color-sable); border-color: rgb(216 181 110 / .55); background: transparent; }
  .action-bar .btn--ghost:hover { background: rgb(216 181 110 / .15); }
  .drawer .btn--ghost { color: var(--color-sable); }

  /* champs et pastilles de choix */
  .choice span small { display: block; font-weight: 400; font-size: 0.78rem; opacity: 0.8; }
  .gift-amounts .choice span { flex-direction: column; align-items: flex-start; gap: 0; justify-content: center; min-block-size: 56px; }
  fieldset.field { border: 0; padding: 0; margin: 0; }
  .field.is-invalid .choice span { border-color: var(--color-corail); }
  .step .form-grid--2 { gap: 1rem; }
  .cmp-table tbody tr.is-same { color: var(--fg-soft); }
  .table small { display: block; font-weight: 400; }
  .table tbody th small { margin-block-start: 0.15rem; }
  .table .yes svg.i { inline-size: 1.15rem; block-size: 1.15rem; }
  .table caption.visually-hidden { padding: 0; }

  /* zone des fiches */
  .fiche-gallery .g[hidden] { display: none; }
  .page-head--photo .eyebrow { color: var(--color-laiton-clair); }
  .split__media .photo { border-radius: 0; }
  .review .trans { display: block; margin-block-start: 0.5rem; }
}

@layer pages {
  /* le rendu des sections hors écran est différé (style et mise en page) : gain mesuré sur mobile */
  html:not([data-page="reserver"]) main > .section ~ .section, html:not([data-page="reserver"]) main > .cta-final, html:not([data-page="reserver"]) .site-footer { content-visibility: auto; contain-intrinsic-size: auto 38rem; }
}

.u-fs-step-2_mbe-1p5rem { font-size:var(--step-2);margin-block-end:1.5rem; }
.u-m-0 { margin:0; }
.u-mbs-p75rem { margin-block-start:.75rem; }
.u-pbs-0 { padding-block-start:0; }