/* ==========================================================================
   Composants. Un composant = un bloc commenté, dans l'ordre où il apparaît
   sur le site : en-tête, hero, contenu, pied de page.
   ========================================================================== */

/* ==========================================================================
   1. Boutons
   Trois niveaux seulement. Le doré est réservé au bouton principal :
   « Réserver en direct », et rien d'autre. Airbnb reste visible mais en
   second, en contour (cadrage, section 1 : on ne dénigre jamais Airbnb).
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.82em 1.5em;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out);
}

/* Sur petit écran, un libellé long doit pouvoir passer à la ligne : à 320 px,
   « Voir les 12 prochains mois et les tarifs » faisait 397 px et élargissait
   toute la page (défilement horizontal). */
@media (max-width: 479px) {
  .btn { white-space: normal; text-wrap: balance; }
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 60ms; }

.btn .icon { width: 1.15em; height: 1.15em; }

/* Principal — l'unique usage du doré. */
.btn--primary {
  background: var(--c-action);
  color: var(--c-on-action);
  box-shadow: var(--sh-sm);
}

.btn--primary:hover {
  background: var(--c-action-hover);
  color: var(--c-on-action);
  box-shadow: var(--sh-md);
}

/* Secondaire — contour, sur fond clair comme sur photo. */
.btn--ghost {
  background: transparent;
  border-color: var(--c-line);
  color: var(--c-ink);
}

.btn--ghost:hover {
  background: var(--c-surface);
  border-color: var(--c-brand);
  color: var(--c-brand);
}

/* Sur photo : bordure et texte clairs, léger fond translucide pour rester
   lisible quelle que soit la photo dessous. */
.btn--on-photo {
  background: rgb(255 255 255 / 12%);
  border-color: rgb(255 255 255 / 55%);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn--on-photo:hover {
  background: rgb(255 255 255 / 92%);
  border-color: #fff;
  color: var(--c-ink);
}

/* Airbnb — plein, blanc dessus. Un contour transparent devenait illisible
   sur photo. Un filet clair le détache d'un bandeau sombre. */
.btn--airbnb {
  background: var(--c-airbnb);
  border-color: rgb(255 255 255 / 30%);
  color: #fff;
  box-shadow: var(--sh-sm);
}

.btn--airbnb:hover {
  background: var(--c-airbnb-hover);
  border-color: rgb(255 255 255 / 45%);
  color: #fff;
  box-shadow: var(--sh-md);
}

/* Le logo est dessiné en contour, pas en aplat. */
.icon--outline { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }

.btn--brand {
  background: var(--c-brand);
  color: #fdfbf6;
}

.btn--brand:hover {
  background: var(--c-brand-deep);
  color: #fff;
}

.btn--lg { padding: 1em 1.9em; font-size: 1.1rem; }
.btn--sm { padding: 0.6em 1.1em; font-size: var(--t-small); }
.btn--block { width: 100%; }

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Lien fléché, pour les « voir tout » en fin de section. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  /* Rembourrage vertical : sans lui, la zone cliquable fait 29 px de haut,
     sous les 40 px confortables au doigt. */
  padding-block: 0.55em;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-accent-strong);
}

.link-arrow .icon {
  transition: transform var(--d-base) var(--e-out);
}

.link-arrow:hover { color: var(--c-ink); }
.link-arrow:hover .icon { transform: translateX(0.25rem); }

/* ==========================================================================
   2. Groupe de réservation
   Les deux boutons, plus la mention « meilleur tarif en direct » qui est
   l'argument central du site (cadrage, section 5).
   ========================================================================== */

.book {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: flex-start;
}

.book__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.book__note {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--t-small);
  color: var(--c-muted);
  margin: 0;
}

.book__note .icon { color: var(--c-action); }

.book--center { align-items: center; text-align: center; }
.book--center .book__buttons { justify-content: center; }

.book--on-photo .book__note { color: rgb(255 255 255 / 88%); }
.book--on-photo .book__note .icon { color: var(--c-action); }

/* Version compacte de l'en-tête : pas de mention, boutons plus petits, sur
   UNE seule ligne. Avant, ils passaient l'un sous l'autre dès 900-1100 px et
   collaient au haut et au bas de l'en-tête. Sur écran étroit, les mots en
   trop disparaissent (« en direct », « Voir sur ») plutôt que de passer à la ligne. */
.book--compact .book__buttons { gap: var(--s-2); flex-wrap: nowrap; }
.book--compact .book__note { display: none; }
.book--compact .btn { padding: 0.6em 1.05em; font-size: var(--t-small); }
.book--compact .book__extra { display: none; }

@media (min-width: 1140px) {
  .book--compact .book__extra { display: inline; }
}

/* ==========================================================================
   3. En-tête
   Transparent par-dessus le hero, il se solidifie au défilement. Sur les
   pages sans hero, il est solide dès le départ (.site-header--solid).
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition:
    background-color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out);
  border-bottom: 1px solid transparent;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header-h);
}

/* Marque : nom en Fraunces + commune en petit. */
.brand {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  text-decoration: none;
  color: var(--c-ink);
  line-height: 1.15;
  padding-block: 0.4rem;
}

.brand__name {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 24;
}

.brand__place {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

@media (min-width: 560px) {
  .brand__name { font-size: 1.3rem; }
}

/* Navigation bureau */
.site-nav { display: none; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav li { margin: 0; }

.site-nav a {
  position: relative;
  display: block;
  padding: 0.5rem 0.25rem;
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  color: var(--c-ink);
  white-space: nowrap;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--c-action);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }

.site-nav a[aria-current="page"] { color: var(--c-brand); font-weight: 600; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

.site-header__actions { display: none; }

/* Au-dessus d'un hero photo, tout passe en clair tant que la page n'a pas
   défilé. */
.site-header--over-photo:not(.is-stuck) .brand,
.site-header--over-photo:not(.is-stuck) .site-nav a {
  color: #fff;
  text-shadow: 0 1px 12px rgb(30 26 16 / 45%);
}

.site-header--over-photo:not(.is-stuck) .brand__place { color: rgb(255 255 255 / 80%); }
.site-header--over-photo:not(.is-stuck) .site-nav a[aria-current="page"] { color: #fff; }
.site-header--over-photo:not(.is-stuck) .nav-toggle { color: #fff; border-color: rgb(255 255 255 / 45%); }

.site-header.is-stuck,
.site-header--solid {
  background: rgb(253 251 246 / 92%);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom-color: var(--c-line-soft);
  box-shadow: var(--sh-xs);
}

/* Entre 900 et 1140 px, marque, sept liens et deux boutons se disputent la
   largeur : le nom du site s'écrasait sur cinq lignes. On le fige sur une
   ligne et on resserre un peu la navigation. */
@media (min-width: 900px) and (max-width: 1139px) {
  .brand { flex: 0 0 auto; }
  .brand__name { font-size: 1.1rem; white-space: nowrap; }
  .brand__place { white-space: nowrap; }
  .site-nav ul { gap: 0.15rem; }
  .site-nav a { padding-inline: 0.3rem; font-size: 0.85rem; }
}

/* Au plus juste, à 900 px : quelques pixels de moins partout. */
@media (min-width: 900px) and (max-width: 999px) {
  .site-nav a { padding-inline: 0.2rem; font-size: 0.8rem; }
  .book--compact .btn { padding-inline: 0.85em; }
  .site-header__bar { gap: var(--s-3); }
}

@media (min-width: 900px) {
  .site-nav { display: block; }
  .site-header__actions { display: flex; align-items: center; gap: var(--s-3); }
  .mobile-menu { display: none; }
}

/* --- Menu mobile -----------------------------------------------------------
   En <details> : fonctionne sans JavaScript. ui.js ne fait qu'ajouter la
   fermeture à la touche Échap et au clic à l'extérieur.
   --------------------------------------------------------------------------- */

.mobile-menu { position: relative; }

.mobile-menu summary {
  list-style: none;
  cursor: pointer;
}

.mobile-menu summary::-webkit-details-marker { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-pill);
  background: rgb(253 251 246 / 70%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--c-ink);
  transition: border-color var(--d-fast) var(--e-out);
}

.nav-toggle__close { display: none; }
.mobile-menu[open] .nav-toggle__open { display: none; }
.mobile-menu[open] .nav-toggle__close { display: inline-flex; }
.mobile-menu[open] .nav-toggle { border-color: var(--c-brand); }

.mobile-menu__panel {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  max-height: calc(100dvh - var(--header-h) - var(--mobile-bar-h));
  overflow-y: auto;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--sh-lg);
  padding: var(--s-5) var(--gutter) var(--s-6);
  animation: menu-drop var(--d-base) var(--e-out);
}

@keyframes menu-drop {
  from { opacity: 0; transform: translateY(-0.75rem); }
  to { opacity: 1; transform: none; }
}

.mobile-menu__panel ul {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: grid;
  gap: 0;
}

.mobile-menu__panel li { margin: 0; }

.mobile-menu__panel a:not(.btn) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--c-line-soft);
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-ink);
}

/* `:not(.btn)` partout ici : le panneau contient les liens de
   navigation ET les deux boutons de réservation. Une règle de lien
   descendante est plus spécifique qu'une classe de bouton. */
.mobile-menu__panel a:not(.btn) .icon { color: var(--c-line); }
.mobile-menu__panel a:not(.btn)[aria-current="page"] { color: var(--c-brand); }
.mobile-menu__panel a:not(.btn)[aria-current="page"] .icon { color: var(--c-action); }

/* ==========================================================================
   4. Barre d'action mobile
   « Appeler » et « Demander les dates » : la majorité du trafic vient de
   Facebook, donc du mobile (cadrage, section 3).
   ========================================================================== */

.mobile-bar {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4)
    calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: rgb(253 251 246 / 94%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 20px -8px rgb(74 66 46 / 18%);
}

.mobile-bar .btn { padding: 0.75em 0.5em; font-size: var(--t-small); }

@media (min-width: 900px) {
  .mobile-bar { display: none; }
}

/* ==========================================================================
   5. Hero
   Photo plein écran, Ken Burns lent, voile dégradé pour la lisibilité.
   Armelle veut « estival, très lumineux » : le voile reste léger en haut et
   ne s'assombrit qu'en bas, là où se trouve le texte.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(88svh, 52rem);
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-brand-deep);
}

.hero--short { min-height: min(56svh, 32rem); }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

/* Pas de zoom lent : l'animation d'une image plein écran de 2000 px
   saccadait (retour d'Armelle, 2026-09-30). Le hero reste fixe. */

/* Trois voiles superposés. Le vertical porte le texte du bas, le léger
   voile du haut rend l'en-tête lisible, et l'horizontal assombrit la
   colonne de gauche — sans lui, le titre passe sur la pelouse en plein
   soleil et devient illisible. La photo reste claire à droite, ce qui
   préserve l'effet « estival, très lumineux » qu'Armelle demande. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to right,
      rgb(26 26 16 / 62%) 0%,
      rgb(26 26 16 / 34%) 38%,
      rgb(26 26 16 / 0%) 72%
    ),
    linear-gradient(
      to top,
      rgb(26 26 16 / 72%) 0%,
      rgb(26 26 16 / 46%) 26%,
      rgb(26 26 16 / 12%) 55%,
      rgb(26 26 16 / 6%) 72%,
      /* Le dernier palier porte l'en-tête transparent : sans lui, la
         navigation blanche passe sur un ciel en plein soleil. */
      rgb(26 26 16 / 42%) 100%
    );
}

/* Sur mobile, la colonne de texte occupe toute la largeur : le dégradé
   horizontal n'a plus de sens, on renforce le vertical à la place. */
@media (max-width: 719px) {
  .hero__scrim {
    background: linear-gradient(
      to top,
      rgb(26 26 16 / 80%) 0%,
      rgb(26 26 16 / 62%) 30%,
      rgb(26 26 16 / 26%) 62%,
      rgb(26 26 16 / 34%) 100%
    );
  }
}

.hero__inner {
  position: relative;
  width: 100%;
  padding-block: var(--s-8) calc(var(--s-8) + var(--s-5));
  color: #fff;
}

.hero__content { max-width: 40rem; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-bottom: var(--s-4);
  padding: 0.4em 1em 0.4em 0.75em;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 14%);
  border: 1px solid rgb(255 255 255 / 26%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.hero__eyebrow .icon { color: var(--c-action); width: 1.05em; height: 1.05em; }

.hero__title {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  color: #fff;
  margin-bottom: var(--s-4);
  text-shadow: 0 2px 30px rgb(24 20 10 / 40%);
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 144;
}

.hero__lead {
  font-size: var(--t-lead);
  color: rgb(255 255 255 / 92%);
  max-width: 34rem;
  margin-bottom: var(--s-6);
  text-shadow: 0 1px 16px rgb(24 20 10 / 45%);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--s-4);
  translate: -50% 0;
  display: none;
  color: rgb(255 255 255 / 75%);
}

@media (min-width: 900px) and (min-height: 700px) {
  .hero__scroll { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__scroll .icon { animation: nudge 2.4s var(--e-in-out) infinite; }
}

@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(0.45rem); opacity: 1; }
}

/* --- Hero court des pages intérieures -------------------------------------- */

.page-hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: var(--s-8);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-brand-deep);
  color: #fff;
}

.page-hero__media { position: absolute; inset: 0; z-index: -2; }

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(28 28 18 / 80%) 0%,
    rgb(28 28 18 / 52%) 50%,
    rgb(28 28 18 / 34%) 100%
  );
}

.page-hero__inner { max-width: 44rem; }

.page-hero h1 { color: #fff; margin-bottom: var(--s-3); }

.page-hero__lead {
  font-size: var(--t-lead);
  color: rgb(255 255 255 / 90%);
  margin-bottom: 0;
}

.page-hero .sec-head__eyebrow { color: rgb(255 255 255 / 85%); }

/* Fil d'Ariane */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  font-size: var(--t-tiny);
  color: rgb(255 255 255 / 75%);
}

.crumbs li { margin: 0; display: inline-flex; align-items: center; gap: 0.5em; }
.crumbs a { color: rgb(255 255 255 / 88%); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs .icon { width: 0.9em; height: 0.9em; opacity: 0.6; }

/* ==========================================================================
   6. Bande de faits
   Les six chiffres clés, juste sous le hero. Ce sont exactement les mots
   qu'Armelle dit que ses clients cherchent (cadrage, section 2).
   ========================================================================== */

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-line-soft);
  border-block: 1px solid var(--c-line-soft);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) { .facts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .facts { grid-template-columns: repeat(6, 1fr); } }

.facts li {
  margin: 0;
  background: var(--c-bg);
  padding: var(--s-5) var(--s-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  text-align: center;
}

.facts .icon {
  width: 1.65rem;
  height: 1.65rem;
  color: var(--c-brand);
  stroke-width: 1.5;
}

.facts__value {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 24;
}

.facts__label {
  font-size: var(--t-tiny);
  color: var(--c-muted);
  line-height: 1.35;
}

/* ==========================================================================
   7. Cartes
   ========================================================================== */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-xs);
  transition:
    box-shadow var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out);
}

.card--flat { box-shadow: none; }
.card--pad-lg { padding: var(--s-6); }

/* Carte cliquable : le survol se joue sur l'ombre, pas sur la couleur. */
.card--link { display: block; text-decoration: none; color: inherit; }

.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--c-line);
}

.card__title {
  font-family: var(--font-title);
  font-size: var(--t-h3);
  font-weight: 600;
  margin: 0 0 var(--s-2);
}

.card__text { color: var(--c-muted); margin: 0; }

/* --- Prestation : un picto, un mot, une phrase -----------------------------
   Repris de l'idée « Nos prestations » de Côté Sud Ardèche, qu'Armelle a
   explicitement demandée (cadrage, section 3).
   --------------------------------------------------------------------------- */

/* Sept prestations : un nombre premier, qui laisse toujours une ligne
   orpheline dans une grille à colonnes fixes. Un conteneur flex centré
   place cette dernière ligne au milieu, ce qui se lit comme un choix et
   non comme un reste. */
.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--s-4);
}

.features > * {
  flex: 1 1 14rem;
  max-width: 17rem;
}

@media (max-width: 479px) {
  .features > * { flex-basis: 100%; max-width: none; }
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  transition:
    transform var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out);
}

.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

.feature__badge {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-pill);
  background: var(--c-brand-soft);
  color: var(--c-brand);
  transition: background-color var(--d-base) var(--e-out);
}

.feature:hover .feature__badge { background: var(--c-action-soft); color: var(--c-action-hover); }

.feature__badge .icon { width: 1.6rem; height: 1.6rem; stroke-width: 1.5; }

.feature__name {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 24;
}

.feature__text {
  font-size: var(--t-small);
  color: var(--c-muted);
  margin: 0;
  line-height: 1.5;
}

/* --- Liste à pictos, alignée à gauche -------------------------------------- */

.icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0;
}

.icon-list .icon {
  margin-top: 0.15em;
  color: var(--c-brand);
  stroke-width: 1.6;
}

.icon-list--check .icon { color: var(--c-success); }
.icon-list--gold .icon { color: var(--c-action-hover); }

/* --- Pastilles -------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0.85em;
  border-radius: var(--r-pill);
  background: var(--c-brand-soft);
  color: var(--c-brand);
  font-size: var(--t-tiny);
  font-weight: 600;
  line-height: 1.4;
}

.pill--accent { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.pill--action { background: var(--c-action-soft); color: var(--c-action-ink); }
.pill--outline { background: transparent; border: 1px solid var(--c-line); color: var(--c-muted); }

.pill .icon { width: 0.95em; height: 0.95em; }

/* --- Encadrés d'information ------------------------------------------------ */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  border-left: 3px solid var(--c-brand);
  background: var(--c-brand-soft);
  color: var(--c-ink);
  font-size: var(--t-small);
  line-height: 1.6;
}

.notice > .icon {
  flex: 0 0 auto;
  margin-top: 0.1em;
  width: 1.3rem;
  height: 1.3rem;
  color: var(--c-brand);
}

.notice p { margin-bottom: var(--s-2); }
.notice p:last-child { margin-bottom: 0; }

.notice--warn { border-left-color: var(--c-action-hover); background: var(--c-action-soft); }
.notice--warn > .icon { color: var(--c-action-ink); }

.notice--accent { border-left-color: var(--c-accent); background: var(--c-accent-soft); }
.notice--accent > .icon { color: var(--c-accent-strong); }

.notice--error { border-left-color: var(--c-danger); background: var(--c-danger-soft); }
.notice--error > .icon { color: var(--c-danger); }

/* --- État vide : une section sans données ---------------------------------
   Jamais une phrase d'excuse en italique gris : un encadré assumé, avec le
   téléphone, pour que la page reste utile même incomplète.
   --------------------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
  padding: var(--s-7) var(--s-5);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-muted);
}

.empty-state .icon { width: 2rem; height: 2rem; color: var(--c-line); stroke-width: 1.4; }
.empty-state__title { font-family: var(--font-title); font-size: var(--t-h3); color: var(--c-ink); margin: 0; }
.empty-state p { margin: 0; max-width: 36rem; }

/* ==========================================================================
   8. Figures et bandes photo
   ========================================================================== */

.figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-sand);
  box-shadow: var(--sh-sm);
}

.figure img { width: 100%; height: 100%; object-fit: cover; }

.figure--tall { aspect-ratio: 3 / 4; }
.figure--square { aspect-ratio: 1; }
.figure--wide { aspect-ratio: 16 / 10; }
.figure--pano { aspect-ratio: 21 / 9; }

.figure__caption {
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-tiny);
  color: var(--c-muted);
  background: var(--c-surface);
}

/* Paire de photos décalées — l'idée « deux photos » de Côté Sud Ardèche
   qu'Armelle a trouvée jolie (notes d'appel, site 1). */
.photo-pair {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  aspect-ratio: 4 / 4.2;
}

.photo-pair > :first-child {
  grid-column: 1 / 10;
  grid-row: 1 / 10;
  z-index: 1;
}

.photo-pair > :last-child {
  grid-column: 6 / 13;
  grid-row: 5 / 13;
  z-index: 2;
  box-shadow: var(--sh-lg);
  border: 5px solid var(--c-bg);
  border-radius: var(--r-lg);
}

/* Bande photo pleine largeur avec texte superposé. */
.photo-band {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(60svh, 30rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-brand-deep);
  text-align: center;
  color: #fff;
}

.photo-band__media { position: absolute; inset: 0; z-index: -2; }

.photo-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgb(28 28 18 / 42%),
    rgb(28 28 18 / 62%)
  );
}

.photo-band__inner {
  max-width: 44rem;
  padding: var(--s-8) var(--gutter);
}

.photo-band h2 { color: #fff; }
.photo-band p { color: rgb(255 255 255 / 92%); font-size: var(--t-lead); }

/* ==========================================================================
   9. Avis
   Encart qui défile lentement, avec pause, flèches et clavier
   (cadrage, section 7 : repris de Mas Saint Antoine).
   ========================================================================== */

.reviews { position: relative; }

.reviews__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block: var(--s-2) var(--s-5);
}

.reviews__viewport::-webkit-scrollbar { display: none; }

.reviews__track {
  display: flex;
  gap: var(--s-5);
  align-items: stretch;
}

.review {
  scroll-snap-align: start;
  flex: 0 0 min(21rem, 86%);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--sh-xs);
}

/* Tablette et bureau : des cartes entières, jamais coupées. Deux puis trois
   par rangée, calculées sur la largeur réelle du carrousel. Sur téléphone on
   garde un bout de la carte suivante, pour montrer qu'on peut faire glisser. */
@media (min-width: 620px) {
  .reviews__viewport { margin-inline: 0; padding-inline: var(--s-1); }
  .review { flex-basis: calc((100% - var(--s-5)) / 2); }
}

@media (min-width: 960px) {
  .review { flex-basis: calc((100% - 2 * var(--s-5)) / 3); }
}

.review__stars {
  display: inline-flex;
  gap: 0.15rem;
  color: var(--c-action);
}

.review__stars .icon { width: 1.05rem; height: 1.05rem; fill: currentColor; stroke-width: 0; }

.review__text {
  font-family: var(--font-title);
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 24;
  margin: 0;
  flex: 1;
}

/* Texte limité à six lignes, « Lire la suite » quand il déborde. Seulement si
   le JavaScript est là (classe js-anim) : sans lui, l'avis reste entier. */
.js-anim .review__text {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.js-anim .review.is-open .review__text {
  display: block;
  -webkit-line-clamp: unset;
}

.review__more {
  align-self: flex-start;
  margin-top: calc(var(--s-1) * -1);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--c-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.review__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--t-small);
}

.review__avatar {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--c-brand-soft);
  color: var(--c-brand);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.05rem;
}

.review__who { font-weight: 600; line-height: 1.3; }
.review__when { color: var(--c-muted); font-size: var(--t-tiny); }

.carousel-controls[hidden] { display: none; }

.carousel-controls {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.carousel-controls__dots {
  display: flex;
  gap: 0.4rem;
  margin-inline: var(--s-3);
}

.carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-line);
  cursor: pointer;
  transition: width var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}

.carousel-dot[aria-current="true"] { width: 1.5rem; background: var(--c-action); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink);
  cursor: pointer;
  transition:
    border-color var(--d-fast) var(--e-out),
    background-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out);
}

.icon-btn:hover { border-color: var(--c-brand); color: var(--c-brand); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.icon-btn .icon { width: 1.2rem; height: 1.2rem; }

/* Mention obligatoire sous les avis (cadrage, section 8). */
.reviews__disclaimer {
  font-size: var(--t-tiny);
  color: var(--c-muted);
  margin: var(--s-4) 0 0;
}

/* ==========================================================================
   10. Galerie
   Une photo à la fois, fondu lent, vignettes dessous, agrandissement au
   clic. Armelle a rejeté les mosaïques (« fouillis ») et les carrousels
   agressifs : les transitions sont longues et il y a un bouton pause.
   ========================================================================== */

.gallery { position: relative; }

.gallery__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-brand-deep);
  box-shadow: var(--sh-md);
}

@media (max-width: 599px) {
  .gallery__stage { aspect-ratio: 4 / 3; }
}

.gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--d-photo) var(--e-in-out);
  pointer-events: none;
}

.gallery__slide.is-active { opacity: 1; pointer-events: auto; }

.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery__slide img.is-portrait { object-fit: contain; }

/* Sans JavaScript, les diapositives s'empilent verticalement : toutes les
   photos restent accessibles. */
.gallery:not([data-ready]) .gallery__stage { aspect-ratio: auto; background: none; box-shadow: none; }
.gallery:not([data-ready]) .gallery__slide { position: static; opacity: 1; margin-bottom: var(--s-3); border-radius: var(--r-md); overflow: hidden; }
.gallery:not([data-ready]) .gallery__controls,
.gallery:not([data-ready]) .gallery__thumbs { display: none; }

.gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s-7) var(--s-5) var(--s-4);
  background: linear-gradient(to top, rgb(24 22 14 / 78%), transparent);
  color: #fff;
  font-size: var(--t-small);
  pointer-events: none;
}

.gallery__controls {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  display: flex;
  gap: var(--s-2);
}

.gallery__controls .icon-btn {
  background: rgb(253 251 246 / 88%);
  border-color: transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.gallery__controls .icon-btn:hover { background: #fff; }

.gallery__counter {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  padding: 0.3em 0.8em;
  border-radius: var(--r-pill);
  background: rgb(24 22 14 / 55%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--t-tiny);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.gallery__thumbs {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: var(--s-2);
}

.gallery__thumb {
  flex: 0 0 auto;
  width: 5.5rem;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-sand);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}

.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 0.85; }
.gallery__thumb[aria-current="true"] { opacity: 1; border-color: var(--c-action); }

/* --- Agrandissement -------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  border: 0;
  padding: 0;
  width: min(94vw, 68rem);
  max-width: none;
  height: fit-content;
  max-height: 94dvh;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--sh-lg);
}

/* Fond grisé : un clic dessus ferme la fenêtre. */
.lightbox::backdrop { background: rgb(40 40 40 / 62%); }

.lightbox__inner {
  position: relative;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
}

.lightbox__close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 1;
  background: rgb(253 251 246 / 92%);
}

.lightbox__figure {
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--c-sand);
  border-radius: var(--r-md);
  overflow: hidden;
}

.lightbox__body { display: grid; gap: var(--s-3); min-height: 0; }

.lightbox__text {
  max-height: 24dvh;
  overflow-y: auto;
  padding: 0 var(--s-2);
}

.lightbox__title {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 var(--s-2);
  padding-right: 3rem;
}

.lightbox__text p { margin: 0 0 var(--s-3); line-height: 1.6; }
.lightbox__text p:last-child { margin-bottom: 0; }

/* Avec texte : sur grand écran, la photo à gauche et le texte à droite ;
   sur petit écran, le texte sous la photo, qui défile s'il est long. */
@media (min-width: 900px) {
  .lightbox--with-text .lightbox__body {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
  .lightbox--with-text .lightbox__text { max-height: calc(94dvh - 8.5rem); padding-top: var(--s-4); }
}

.lightbox--with-text .lightbox__figure img { max-height: 46dvh; }

@media (min-width: 900px) {
  .lightbox--with-text .lightbox__figure img { max-height: calc(94dvh - 8.5rem); }
}

.lightbox__figure img {
  display: block;
  max-width: 100%;
  max-height: calc(94dvh - 8.5rem);
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-small);
}

.lightbox__caption { flex: 1; margin: 0; text-align: center; color: var(--c-muted); }

/* Une seule photo : pas de flèches. */
.lightbox[data-single] [data-lightbox-prev],
.lightbox[data-single] [data-lightbox-next] { visibility: hidden; }

/* Carte ou chambre cliquable : le bouton du titre couvre toute la carte
   (bouton « étiré »), sans imbriquer un bouton autour du contenu. */
.stretched-btn {
  all: unset;
  cursor: pointer;
}

.stretched-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.stretched-btn:focus-visible::after {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.feature--photos {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}

/* La photo se révèle derrière le texte, à la place du fond blanc, sous un
   voile sombre qui garde le texte lisible. z-index négatif + isolation :
   elle passe sous le contenu sans avoir à le repositionner. */
.feature__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--d-slow) var(--e-out);
}

.feature__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  transition: transform 1400ms var(--e-out);
}

.feature__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(26 26 16 / 80%), rgb(26 26 16 / 42%));
}

.feature--photos .feature__name,
.feature--photos .feature__text,
.feature--photos .feature__badge {
  transition: color var(--d-slow) var(--e-out), background-color var(--d-slow) var(--e-out);
}

/* Sur écran tactile il n'y a pas de survol : un petit repère discret dit
   que la carte s'ouvre. Il n'apparaît pas à la souris. */
.feature__mark { display: none; }

@media (hover: none) {
  .feature__mark {
    display: grid;
    place-items: center;
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--r-pill);
    background: var(--c-brand-soft);
    color: var(--c-brand);
  }
  .feature__mark .icon { width: 1rem; height: 1rem; }
}

@media (hover: hover) {
  .feature--photos:hover .feature__bg { opacity: 1; }
  .feature--photos:hover .feature__bg img { transform: scale(1); }
  .feature--photos:hover .feature__name,
  .feature--photos:hover .feature__text { color: #fff; }
  .feature--photos:hover .feature__badge { background: rgb(255 255 255 / 20%); color: #fff; }
}

/* Clavier : même effet que le survol, mais seulement si le focus vient du
   clavier (le retour du focus après fermeture de la fenêtre, fait à la
   souris, ne doit pas laisser la carte allumée). */
.feature--photos:has(:focus-visible) .feature__bg { opacity: 1; }
.feature--photos:has(:focus-visible) .feature__bg img { transform: scale(1); }
.feature--photos:has(:focus-visible) .feature__name,
.feature--photos:has(:focus-visible) .feature__text { color: #fff; }
.feature--photos:has(:focus-visible) .feature__badge { background: rgb(255 255 255 / 20%); color: #fff; }

/* ==========================================================================
   11. Calendrier
   Douze mois rendus côté serveur. Sans JavaScript ils s'empilent ; avec, on
   en affiche une fenêtre avec des flèches (cadrage : le gros calendrier de
   Vignabulle, sans les demi-journées de Mas Saint Antoine).
   ========================================================================== */

.calendar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-small);
  color: var(--c-muted);
}

.calendar__legend li { display: flex; align-items: center; gap: 0.5em; margin: 0; }

.calendar__swatch {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
}

/* Les nuits prises se distinguent par la trame ET par le libellé accessible,
   jamais par la couleur seule (doc de dev, section 8). */
.calendar__swatch--busy {
  background:
    repeating-linear-gradient(
      -45deg,
      var(--c-sand-deep) 0 3px,
      var(--c-sand) 3px 6px
    );
  border-color: var(--c-sand-deep);
}

.calendar__nav { display: none; }

.calendar__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .calendar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .calendar__grid { grid-template-columns: repeat(3, 1fr); } }

.month { min-width: 0; }

.month__name {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  margin: 0 0 var(--s-3);
  text-transform: capitalize;
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 24;
}

.month table { table-layout: fixed; }

.month th {
  padding-bottom: var(--s-2);
  font-size: var(--t-tiny);
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.month td { padding: 2px; text-align: center; }

.day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--r-xs);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

.day--out { color: transparent; }

.day--free { background: var(--c-surface); border: 1px solid var(--c-line-soft); }

.day--busy {
  background:
    repeating-linear-gradient(
      -45deg,
      var(--c-sand-deep) 0 3px,
      var(--c-sand) 3px 6px
    );
  border: 1px solid var(--c-sand-deep);
  color: var(--c-muted);
}

/* Les dates passées restent lisibles (4,6:1) : elles se distinguent des
   nuits libres par l'absence de cadre blanc, pas seulement par la teinte. */
.day--past { background: transparent; border: 1px solid transparent; color: var(--c-faint); }

.day--today {
  box-shadow: inset 0 0 0 2px var(--c-action);
  font-weight: 700;
}

/* Le jour de départ est libre : une demi-case hachurée le montre, ce qui
   répond au modèle « on compte des nuits » (doc de dev, section 7.4) sans
   revenir aux demi-journées grisées qu'Armelle a rejetées. */
.day--checkout {
  background: linear-gradient(
    135deg,
    var(--c-sand-deep) 0 48%,
    var(--c-surface) 52% 100%
  );
  border: 1px solid var(--c-line-soft);
}

.calendar__note {
  margin-top: var(--s-5);
  font-size: var(--t-small);
}

@media (min-width: 640px) {
  .calendar__nav { display: flex; align-items: center; gap: var(--s-2); }

  /* Avec JavaScript, on masque les mois hors fenêtre. */
  .calendar[data-ready] .month[hidden] { display: none; }
}

/* ==========================================================================
   12. Tarifs
   ========================================================================== */

.pricing {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

@media (min-width: 860px) { .pricing { grid-template-columns: repeat(2, 1fr); } }

.price-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}

.price-card--highlight { border-color: var(--c-action); box-shadow: var(--sh-md); }

.price-card__head {
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--c-brand-soft);
  border-bottom: 1px solid var(--c-line-soft);
}

.price-card--highlight .price-card__head { background: var(--c-action-soft); }

.price-card__season {
  font-family: var(--font-title);
  font-size: var(--t-h3);
  font-weight: 600;
  margin: 0 0 var(--s-1);
}

.price-card__period { font-size: var(--t-small); color: var(--c-muted); margin: 0; }

.price-card__body { padding: var(--s-3) var(--s-5) var(--s-5); flex: 1; }

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--c-line-soft);
}

.price-row:last-child { border-bottom: 0; }

.price-row__label { font-weight: 500; }
.price-row__note { display: block; font-size: var(--t-tiny); color: var(--c-muted); font-weight: 400; }

.price-row__value {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 600;
  white-space: nowrap;
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 32;
}

.price-row__value--ask {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--c-accent-strong);
}

/* ==========================================================================
   13. FAQ
   ========================================================================== */

.faq { display: grid; gap: var(--s-3); }

.faq-item {
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
  transition: border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}

.faq-item[open] { border-color: var(--c-line); box-shadow: var(--sh-sm); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.05rem;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--c-brand); }

.faq-item__chevron {
  flex: 0 0 auto;
  color: var(--c-accent);
  transition: transform var(--d-base) var(--e-out);
}

.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }

.faq-item__body {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--c-muted);
  max-width: 60ch;
}

.faq-item__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   14. Carte
   ========================================================================== */

.map-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-sm);
  background: var(--c-sand);
}

.map {
  height: clamp(20rem, 55vh, 34rem);
  width: 100%;
  background: var(--c-sand);
}

.map:focus-visible { outline-offset: -3px; }

.map-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--s-6);
  text-align: center;
  color: var(--c-muted);
}

.map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.95em;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--c-muted);
  cursor: pointer;
  transition:
    border-color var(--d-fast) var(--e-out),
    background-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out);
}

.chip:hover { border-color: var(--c-brand); color: var(--c-brand); }

.chip[aria-pressed="true"] {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fdfbf6;
}

/* Marqueur maison : une pastille olive, plus propre que l'épingle bleue par
   défaut de Leaflet et cohérente avec la charte. */
.map-pin {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-pill) var(--r-pill) 2px var(--r-pill);
  rotate: 45deg;
  background: var(--c-brand);
  border: 2px solid #fdfbf6;
  box-shadow: var(--sh-sm);
  color: #fdfbf6;
}

.map-pin .icon { rotate: -45deg; width: 1rem; height: 1rem; }

.leaflet-container { font: inherit; }

.leaflet-popup-content-wrapper {
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}

.leaflet-popup-content { margin: var(--s-4); font-size: var(--t-small); line-height: 1.55; }
.leaflet-popup-content h3 { font-size: 1.05rem; margin-bottom: var(--s-1); }
.leaflet-container a.leaflet-popup-close-button { color: var(--c-muted); }

/* ==========================================================================
   15. Lieux à découvrir
   ========================================================================== */

.place {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line-soft);
  background: var(--c-surface);
  box-shadow: var(--sh-xs);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}

.place:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }

.place__media { position: relative; aspect-ratio: 16 / 10; background: var(--c-sand); overflow: hidden; }
.place__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--e-out); }
.place:hover .place__media img { transform: scale(1.04); }

.place__badges {
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.place__badges .pill {
  background: rgb(253 251 246 / 92%);
  color: var(--c-ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.place__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.place__name { font-family: var(--font-title); font-size: var(--t-h3); font-weight: 600; margin: 0; }

/* La phrase d'Armelle, à la première personne, façon témoignage. */
.place__quote {
  margin: 0;
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-action);
  font-style: italic;
  color: var(--c-muted);
  line-height: 1.6;
}

.place__foot {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line-soft);
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--t-small);
  color: var(--c-muted);
}

.place__foot .icon { color: var(--c-brand); }

/* --- Recommandations par saison -------------------------------------------- */

.seasons { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }

@media (min-width: 640px) { .seasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .seasons { grid-template-columns: repeat(4, 1fr); } }

.season {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.season__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
}

.season__name { font-family: var(--font-title); font-size: 1.1rem; font-weight: 600; margin: 0; }
.season p { font-size: var(--t-small); color: var(--c-muted); margin: 0; line-height: 1.6; }

/* ==========================================================================
   16. Formulaire
   ========================================================================== */

.form { display: grid; gap: var(--s-5); }

.field { display: grid; gap: var(--s-2); }

.field__label {
  font-size: var(--t-small);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
}

.field__req { color: var(--c-danger); font-weight: 400; }
.field__opt { color: var(--c-muted); font-weight: 400; font-size: var(--t-tiny); }

.field__hint { font-size: var(--t-tiny); color: var(--c-muted); }

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.75em 1em;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--t-body);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}

.input:hover, .textarea:hover, .select:hover { border-color: var(--c-sand-deep); }

.input:focus, .textarea:focus, .select:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgb(94 107 57 / 14%);
  outline: none;
}

.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }

.select {
  appearance: none;
  padding-right: 2.5em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6250' stroke-width='2' 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.9em center;
  background-size: 1.1em;
}

.field--invalid .input,
.field--invalid .textarea,
.field--invalid .select { border-color: var(--c-danger); }

.field__error {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--t-tiny);
  color: var(--c-danger);
  font-weight: 500;
}

.field__error .icon { width: 1em; height: 1em; }

.field-group { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }

@media (min-width: 560px) { .field-group--2 { grid-template-columns: repeat(2, 1fr); } }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-small);
  line-height: 1.55;
  cursor: pointer;
}

.checkbox input {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.18em;
  accent-color: var(--c-brand);
}

.radio-cards { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.radio-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.6em 1.1em;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--t-small);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}

.radio-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-card:hover { border-color: var(--c-brand); }

.radio-card:has(input:checked) {
  border-color: var(--c-brand);
  background: var(--c-brand-soft);
  color: var(--c-brand);
  font-weight: 600;
}

.radio-card:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.char-count { font-size: var(--t-tiny); color: var(--c-muted); text-align: right; font-variant-numeric: tabular-nums; }
.char-count.is-near { color: var(--c-danger); }

/* Champ piège de l'anti-spam : hors écran plutôt que display:none, que
   certains robots savent détecter (doc de dev, section 9.2). */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Bloc téléphone, mis en avant sur la page contact ---------------------- */

.phone-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--c-brand-deep);
  color: #fdfbf6;
}

.phone-card__label {
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(253 251 246 / 72%);
  margin: 0;
}

.phone-card__number {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 60;
}

/* Version pleine largeur, centrée (page Questions) : le numéro reste sur une
   seule ligne. */
.phone-card--wide {
  align-items: center;
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
}

.phone-card--wide .phone-card__number { white-space: nowrap; }

.phone-card__number:hover { color: var(--c-action); }
.phone-card__number .icon { width: 0.8em; height: 0.8em; color: var(--c-action); }
.phone-card p { color: rgb(253 251 246 / 86%); font-size: var(--t-small); margin: 0; }

/* ==========================================================================
   17. Pied de page
   ========================================================================== */

.site-footer {
  background: var(--c-brand-deepest);
  color: #ece8dc;
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--t-small);
}

.site-footer a:not(.btn) { color: #ece8dc; text-decoration: none; }
/* --c-dark-brand et non --c-action : dans la palette « Soleil et
   lavande », l'action est une lavande foncée, illisible sur le brun
   profond du pied de page (2,2:1). Ce jeton-là est conçu pour être
   clair sur fond sombre dans les cinq palettes. */
.site-footer a:not(.btn):hover { color: var(--c-dark-brand); text-decoration: underline; }

.site-footer__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  padding-bottom: var(--s-6);
  border-bottom: 1px solid rgb(236 232 220 / 16%);
}

@media (min-width: 680px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(236 232 220 / 62%);
  margin: 0 0 var(--s-4);
}

.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer li { margin: 0; }

.footer-brand__name {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 var(--s-2);
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 32;
}

.footer-brand p { color: rgb(236 232 220 / 78%); max-width: 32ch; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-5);
  font-size: var(--t-tiny);
  color: rgb(236 232 220 / 62%);
}

.footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.footer-contact .icon { color: var(--c-action); width: 1.05em; height: 1.05em; }

/* ==========================================================================
   18. Retour en haut
   ========================================================================== */

.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--mobile-bar-h) + var(--s-4));
  z-index: 80;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: rgb(253 251 246 / 92%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--c-ink);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition:
    opacity var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out),
    visibility var(--d-base);
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--c-brand); color: var(--c-brand); }

/* Le picto est un chevron vers le bas, retourné : un seul dessin à
   maintenir dans le jeu d'icônes. */
.to-top .icon { transform: rotate(180deg); }

/* ==========================================================================
   19. Sélecteur de palette — OUTIL DE PRÉVISUALISATION

   Affiché seulement si `preview.palette_picker` vaut true dans la
   configuration. Il sert à faire choisir Armelle sur son téléphone, puis il
   disparaît. Volontairement neutre en gris : s'il empruntait les couleurs
   du site, il changerait d'aspect à chaque essai et brouillerait la
   comparaison.
   ========================================================================== */

.palette-picker {
  position: fixed;
  left: var(--gutter);
  /* Au-dessus de la barre d'action mobile, jamais par-dessus. */
  bottom: calc(var(--mobile-bar-h) + var(--s-4));
  z-index: 85;
  width: min(17rem, calc(100vw - var(--gutter) * 2));
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid #d7d2c6;
  background: rgb(255 255 255 / 96%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sh-lg);
  color: #2c2a26;
  font-size: var(--t-small);
}

.palette-picker[hidden] { display: none; }

.palette-picker__form { display: grid; gap: var(--s-3); }

.palette-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.palette-picker__title {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6a655c;
}

.palette-picker__hide,
.palette-picker__show {
  display: grid;
  place-items: center;
  /* 2,5 rem = 40 px : la taille en dessous de laquelle une cible devient
     pénible au doigt. Le flex-shrink empêche le bouton de s'écraser quand
     le titre à côté est long. */
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid #d7d2c6;
  border-radius: var(--r-pill);
  background: #fff;
  color: #6a655c;
  cursor: pointer;
}

.palette-picker__hide:hover,
.palette-picker__show:hover { border-color: #9c968a; color: #2c2a26; }

/* Le <select> n'hérite pas de .select : il doit rester identique d'une
   palette à l'autre pour ne pas fausser la comparaison. */
.palette-picker__select {
  width: 100%;
  padding: 0.6em 2.4em 0.6em 0.8em;
  border: 1.5px solid #d7d2c6;
  border-radius: var(--r-sm);
  background-color: #fff;
  color: #2c2a26;
  font-size: var(--t-small);
  font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a655c' stroke-width='2' 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.7em center;
  background-size: 1.1em;
}

.palette-picker__note {
  margin: 0;
  font-size: var(--t-tiny);
  line-height: 1.5;
  color: #6a655c;
}

.palette-picker__swatches { display: flex; gap: var(--s-2); }

.palette-picker__swatches span {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--r-pill);
  border: 1px solid rgb(0 0 0 / 12%);
}

.palette-picker__show {
  position: fixed;
  left: var(--gutter);
  bottom: calc(var(--mobile-bar-h) + var(--s-4));
  z-index: 85;
  width: 2.75rem;
  height: 2.75rem;
  box-shadow: var(--sh-md);
}

.palette-picker__show[hidden] { display: none; }

/* Sur grand écran, le sélecteur ne doit pas croiser le bouton de retour en
   haut, qui est fixé à droite. */
@media (min-width: 900px) {
  .palette-picker,
  .palette-picker__show { bottom: var(--s-5); }
}

@media print {
  .palette-picker, .palette-picker__show { display: none !important; }
}