/* ==========================================================================
   Réglages propres à une page. Tout ce qui sert deux fois vit dans
   components.css ; ce fichier reste volontairement court.
   ========================================================================== */

/* --- Accueil --------------------------------------------------------------- */

/* La ligne sur les petites attentions (boissons fraîches, bouteille de vin).
   Le cadrage insiste : une ligne, sobrement, sans en faire un argument
   commercial (section 2). */
.welcome-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--t-small);
  color: var(--c-muted);
}

.welcome-note .icon { color: var(--c-action-hover); margin-top: 0.15em; }

/* Signature manuscrite d'Armelle sous le texte d'accueil : le site parle à
   la première personne (cadrage, section 2). */
.signature {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.signature__mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  background: var(--c-action-soft);
  color: var(--c-action-ink);
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 600;
}

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

/* Aperçu « aux alentours » sur l'accueil : trois lieux + un lien. */
.around-preview { display: grid; gap: var(--s-5); }

@media (min-width: 900px) {
  .around-preview { grid-template-columns: repeat(3, 1fr); }
}

/* --- Le gîte --------------------------------------------------------------- */

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

@media (min-width: 720px) { .rooms { grid-template-columns: repeat(3, 1fr); } }

.room {
  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);
}

.room--photos { position: relative; padding-top: 0; overflow: hidden; cursor: pointer; }

.room__photo {
  margin: 0 calc(var(--s-5) * -1);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-sand);
}

.room__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--e-out); }
.room--photos:hover .room__photo img { transform: scale(1.04); }

.room__head { display: flex; align-items: center; gap: var(--s-3); }

.room__index {
  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: 1rem;
}

.room__name { font-family: var(--font-title); font-size: 1.1rem; font-weight: 600; margin: 0; }
.room__note { margin: calc(var(--s-1) * -1) 0 0; font-size: var(--t-small); color: var(--c-muted); line-height: 1.45; }
.room__beds { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.room__beds li { display: flex; align-items: center; gap: 0.6em; margin: 0; font-size: var(--t-small); }
.room__beds .icon { color: var(--c-muted); }

/* Équipements par catégorie */
.equip { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }

@media (min-width: 760px) { .equip { grid-template-columns: repeat(3, 1fr); } }

.equip__col { display: flex; flex-direction: column; gap: var(--s-4); }

.equip__title {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--c-action);
}

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

/* --- Disponibilités et tarifs ---------------------------------------------- */

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

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

.inclusion {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
}

.inclusion__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--c-brand-soft);
  color: var(--c-brand);
}

.inclusion__name { font-weight: 600; margin: 0 0 0.15rem; }
.inclusion__detail { font-size: var(--t-small); color: var(--c-muted); margin: 0; }

/* --- Contact ---------------------------------------------------------------- */

.contact-layout { display: grid; gap: var(--s-7); grid-template-columns: 1fr; }

@media (min-width: 960px) {
  .contact-layout { grid-template-columns: 1fr 1.25fr; gap: var(--s-8); align-items: start; }
  .contact-layout__aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

/* --- Mentions légales, page de texte long ---------------------------------- */

.prose { max-width: 44rem; }
.prose h2 { margin-top: var(--s-7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-5); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: var(--s-2); }

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

.legal-list li {
  display: grid;
  gap: 0.15rem;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line-soft);
  margin: 0;
}

.legal-list dt,
.legal-list__label {
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* --- 404 -------------------------------------------------------------------- */

.error-page {
  display: grid;
  place-items: center;
  min-height: 60svh;
  text-align: center;
  padding-block: var(--section-y);
}

.error-page__code {
  font-family: var(--font-title);
  font-size: clamp(4rem, 2rem + 12vw, 9rem);
  font-weight: 600;
  line-height: 1;
  color: var(--c-sand-deep);
  margin: 0 0 var(--s-3);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
}

/* --- Merci ------------------------------------------------------------------ */

.thanks {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 55svh;
  padding-block: var(--section-y);
}

.thanks__mark {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto var(--s-5);
  border-radius: var(--r-pill);
  background: var(--c-success-soft);
  color: var(--c-success);
}

.thanks__mark .icon { width: 2.2rem; height: 2.2rem; }