/* ============================================================================
   LOGEMENT — Fiche logement premium
   Chargé après components.css (dépendance déclarée dans logement.php).
   Préfixe .logement-* pour isolation ; .logement-page comme scope général.
   ============================================================================ */

/* ── 1. En-tête ── */

.logement-header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.logement-header .eyebrow {
  margin-bottom: .65rem;
}

.logement-titre {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--titre);
  line-height: 1.08;
  margin: 0;
}

/* ── 2. Ligne de métadonnées ── */

.logement-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem .8rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

/* Filet vertical entre attributs */
.logement-meta-sep {
  display: inline-block;
  width: 1px;
  height: .9em;
  background: var(--line);
  vertical-align: middle;
  margin-inline: .2rem;
}

/* Prix : typo display, pas d'uppercase */
.logement-meta-price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--titre);
  text-transform: none;
  letter-spacing: 0;
}

/* ── 3. Description + Sophie (grille 2 colonnes) ── */

.logement-intro-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  align-items: start;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

/* Texte de description */
.logement-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

.logement-desc p { margin: 0; }

/* Portrait Sophie — sidebar droite */
.logement-sophie {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  /* Légère rotation pour effet éditorial */
  transform: rotate(1.2deg);
}

.logement-sophie picture,
.logement-sophie img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: top center;
}

/* ── 4. Galerie — surcharges sur .article-gallery de components.css ── */

/* Hero 3:2 au lieu de 16:9 */
.logement-page .article-gallery .gallery-item:first-child {
  aspect-ratio: 3 / 2;
}

/* Curseur zoom-in (JS ajoute le handler click) */
.logement-page .gallery-item {
  cursor: zoom-in;
}

/* Dernier item seul sur sa ligne → pleine largeur pour équilibre visuel */
.logement-page .article-gallery .gallery-item:nth-child(4):last-child,
.logement-page .article-gallery .gallery-item:nth-child(6):last-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 7;
}

/* ── 5. Tarifs — table premium ── */

.logement-body section.tarifs {
  max-width: 640px;
  margin-inline: auto;
  margin-top: clamp(2.5rem, 6vw, 5rem);
}

/* Titre : même style que .logement-tarifs-head (lignes + label centré) */
.logement-body section.tarifs h2 {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--accent);
  margin-bottom: 1.4rem;
  line-height: 1;
}

.logement-body section.tarifs h2::before,
.logement-body section.tarifs h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Table : reset + style premium */
.logement-body section.tarifs table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.logement-body section.tarifs thead th {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
  padding: 0 .5rem .65rem 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

/* Header dernière colonne : aligné à droite (sans border-right) */
.logement-body section.tarifs thead th:last-child {
  text-align: right;
  padding-right: 0;
}

/* Lignes de tarif */
.logement-body section.tarifs tbody tr {
  border-bottom: 1px solid var(--line);
}

.logement-body section.tarifs tbody td {
  padding: .85rem .5rem .85rem 0;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--ink);
  vertical-align: baseline;
}

/* Colonne période (descriptive, plus discrète) */
.logement-body section.tarifs tbody td:nth-child(2) {
  color: var(--ink-soft);
  font-size: .84rem;
}

/* ── Colonnes prix : style Cormorant, alignement centré ── */

/* Variante APPARTS (Saison | Période | Standard | Flexible) — cols 3 & 4 */
.logement-body section.tarifs:not(.tarifs--bateau) thead th:nth-child(3),
.logement-body section.tarifs:not(.tarifs--bateau) thead th:nth-child(4) {
  text-align: center;
}
.logement-body section.tarifs:not(.tarifs--bateau) tbody td:nth-child(3) {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--titre);
  text-align: center;
  white-space: nowrap;
}
.logement-body section.tarifs:not(.tarifs--bateau) tbody td:nth-child(4) {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent);
  text-align: center;
  white-space: nowrap;
}

/* Variante BATEAU Zéphyr (Saison | Standard | Flexible | +Extra) — cols 2, 3, 4 */
.logement-body section.tarifs--bateau thead th:nth-child(2),
.logement-body section.tarifs--bateau thead th:nth-child(3),
.logement-body section.tarifs--bateau thead th:nth-child(4) {
  text-align: center;
}
/* Override le style "période" italic discret de col 2 sur variante bateau */
.logement-body section.tarifs--bateau tbody td:nth-child(2) {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--titre);
  text-align: center;
  white-space: nowrap;
}
.logement-body section.tarifs--bateau tbody td:nth-child(3) {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent);
  text-align: center;
  white-space: nowrap;
}
.logement-body section.tarifs--bateau tbody td:nth-child(4) {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
}

/* Notes sous la table (ul/li) */
.logement-body section.tarifs ul {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
}

.logement-body section.tarifs ul li {
  position: relative;
  padding-left: 1.2em;
  padding-block: .25rem;
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.logement-body section.tarifs ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Paragraphe de réduction longue durée */
.logement-body section.tarifs > p {
  margin-top: .75rem;
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--ink-soft);
}

.logement-body section.tarifs > p strong {
  color: var(--ink);
  font-weight: 500;
}

/* ── 5.bis Bloc résa direct (calendrier + formulaire) ── */

/* Conteneur de section : séparation visuelle nette avec les tarifs au-dessus
   sans créer de vide démesuré. La filet supérieur fait écho au filet sous
   thead/tbody des tarifs pour une cohérence éditoriale. */
.logement-resa {
  max-width: 760px;
  margin-inline: auto;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(.5rem, 2vw, 1rem);
  border-top: 1px solid var(--line);
}

.logement-resa-head {
  text-align: center;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* Titre : même grammaire visuelle que .tarifs h2 — eyebrow uppercase
   + filets décoratifs ::before/::after. */
.logement-resa-titre {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--accent);
  margin: 0 0 .8rem;
  line-height: 1;
}

.logement-resa-titre::before,
.logement-resa-titre::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Sous-titre : ton calme, Cormorant pour le rythme éditorial */
.logement-resa-sub {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 300;
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .logement-resa {
    margin-top: clamp(1.5rem, 3vw, 2rem);
    padding-top: 1.5rem;
  }
  .logement-resa-titre {
    font-size: .64rem;
    letter-spacing: .22em;
    gap: .9rem;
  }
}

/* ── 6. CTA réservation ── */

.logement-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

/* ── Lightbox overlay ── */

.logement-lb {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 49, 83, .9);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.logement-lb.is-open {
  display: flex;
  animation: lb-fade .22s var(--ease);
}

@keyframes lb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.logement-lb-img {
  max-width: min(90vw, 1200px);
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5);
  animation: lb-zoom .25s var(--ease);
}

@keyframes lb-zoom {
  from { transform: scale(.93); }
  to   { transform: scale(1); }
}

.logement-lb-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  padding: .3rem .7rem;
  cursor: pointer;
  opacity: .85;
  transition: opacity .2s, background .2s;
}

.logement-lb-close:hover { opacity: 1; background: rgba(255, 255, 255, .22); }

/* ── Responsive — 980px (tablette) ── */

@media (max-width: 980px) {
  .logement-intro-grid {
    grid-template-columns: 1fr;
  }
  /* Sophie passe sous la description, petite et centrée */
  .logement-sophie {
    max-width: 180px;
    transform: none;
  }
}

/* ── Responsive — 640px (mobile) ── */

@media (max-width: 640px) {
  .logement-meta {
    flex-direction: column;
    gap: .3rem;
  }
  .logement-meta-sep { display: none; }
  .logement-sophie {
    max-width: 140px;
  }

  /* Mobile : appartements — colonne Période cachée, prix Cormorant compact */
  .logement-body section.tarifs:not(.tarifs--bateau) thead th:nth-child(2),
  .logement-body section.tarifs:not(.tarifs--bateau) tbody td:nth-child(2) {
    display: none;
  }
  .logement-body section.tarifs thead th {
    font-size: .58rem;
    letter-spacing: .05em;
    padding-right: .25rem;
  }
  /* Tarifs apparts : cols 3+4 compactes */
  .logement-body section.tarifs:not(.tarifs--bateau) tbody td:nth-child(3),
  .logement-body section.tarifs:not(.tarifs--bateau) tbody td:nth-child(4) {
    font-size: 1.05rem;
    padding-left: .3rem;
    padding-right: .35rem;
  }
  /* Tarifs Zéphyr : cols 2+3+4 compactes */
  .logement-body section.tarifs--bateau tbody td:nth-child(2),
  .logement-body section.tarifs--bateau tbody td:nth-child(3) {
    font-size: 1rem;
    padding-left: .2rem;
    padding-right: .25rem;
  }
  .logement-body section.tarifs--bateau tbody td:nth-child(4) {
    font-size: .85rem;
    padding-left: .2rem;
    padding-right: 0;
  }
  /* Cellule Saison : padding minimal */
  .logement-body section.tarifs tbody td:nth-child(1) {
    padding-right: .25rem;
    padding-left: 0;
  }

  .logement-cta {
    flex-direction: column;
  }
  .logement-cta .btn {
    text-align: center;
    width: 100%;
  }
}

/* ── Responsive — 980px (table tarifs) ── */

@media (max-width: 980px) {
  /* Sur tablette, la 2e colonne de la table peut prendre moins de place */
  .logement-body section.tarifs tbody td:nth-child(2) {
    font-size: .78rem;
  }
}

/* ── prefers-reduced-motion ── */

@media (prefers-reduced-motion: reduce) {
  .logement-lb.is-open,
  .logement-lb-img {
    animation: none;
  }
  .logement-lb-close {
    transition: none;
  }
}