/* ---------- Pages « Les gîtes » et fiche d'un gîte (modèle fiche logement Airbnb du DESIGN.md) ---------- */

/* Emplacement d'une information à fournir par Annie : visible tant qu'elle manque */

/* ---------- Fiche : en-tête et galerie ---------- */
.fiche-gite { padding-top: var(--md); }
.fiche-gite__entete { display: grid; gap: var(--xs); margin-bottom: var(--md); }
.fiche-gite__lieu { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 20px; }
.fiche-gite__lieu .icone { width: 16px; height: 16px; }
.fiche-gite__mention { padding: var(--sm) 0 0; }

.galerie { position: relative; display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: minmax(0, 1fr); gap: 8px; height: clamp(320px, 36vw, 500px); border-radius: var(--r-lg); overflow: hidden; }
.galerie > * { min-width: 0; }
.galerie__principale { position: relative; height: 100%; }
.galerie__principale img, .galerie__vignette img { width: 100%; height: 100%; object-fit: cover; }
.galerie__cote { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 8px; height: 100%; }
.galerie__cote--3, .galerie__cote--4 { grid-template-columns: 1fr 1fr; }
.galerie__cote--3 > :first-child { grid-column: 1 / -1; }
.galerie__vignette { position: relative; height: 100%; min-height: 0; overflow: hidden; }
.galerie__plan { display: block; width: 100%; padding: 0; border: 0; background: var(--surface-dim); cursor: zoom-in; }
.galerie__plan img { object-fit: contain; transition: var(--transition); }
.galerie__plan:hover img { transform: scale(1.03); }
.galerie__tout { position: absolute; right: var(--md); bottom: var(--md); background: var(--surface); }
.galerie__tout:hover { background: var(--surface-dim); }
.galerie__liste { display: grid; gap: var(--sm); }
.galerie__liste img { width: 100%; height: auto; border-radius: var(--r-md); }
.dialogue--photos { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* ---------- Fiche : résumé, carte de réservation collante, contenu ---------- */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "resume reservation" "contenu reservation"; column-gap: var(--xl); align-items: start; margin-top: var(--lg); }
.fiche__resume { grid-area: resume; display: grid; gap: var(--sm); padding-bottom: var(--lg); border-bottom: 1px solid var(--surface-variant); }
.fiche__chiffres { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: var(--sm); }
.fiche__reservation { grid-area: reservation; position: sticky; top: 104px; display: grid; gap: var(--sm); padding: var(--md); border-radius: var(--r-xl); box-shadow: var(--elev-lg); }
.fiche__reservation .recherche { margin-top: 0; }
.fiche__reservation .assurance { margin-top: 0; }
.fiche__prix { font-size: 18px; line-height: 28px; }
.fiche__prix strong { font-size: 22px; font-weight: 700; }
.fiche__note { font-size: 12px; line-height: 16px; }
.fiche__contenu { grid-area: contenu; min-width: 0; }
.fiche__bloc { display: grid; gap: var(--md); margin: 0; padding-block: var(--lg); border-top: 0; border-bottom: 1px solid var(--surface-variant); }
.fiche__bloc:last-child { border-bottom: 0; }
.fiche__description p + p { margin-top: calc(var(--sm) - var(--md)); }
.fiche__equipements, .fiche__activites { grid-template-columns: repeat(2, 1fr); }
.fiche__equipements li, .fiche__activites li { font-size: 16px; line-height: 24px; }
.fiche__plan { justify-self: start; }
.fiche__chapeau { margin-top: calc(var(--sm) - var(--md)); }
.fiche__domaine { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sm); }
.fiche__domaine .carte { display: grid; gap: var(--xs); align-content: start; }
.fiche__acces { justify-self: start; padding: 2px 10px; border-radius: var(--r-full); background: color-mix(in srgb, var(--secondary) 12%, var(--surface)); color: var(--on-secondary-container); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.02em; }
.fiche__savoir { display: grid; gap: var(--sm); }
.fiche__savoir li { display: grid; gap: 2px; font-size: 16px; line-height: 24px; }
.fiche__savoir .a-confirmer { justify-self: start; display: inline-block; }

/* ---------- Page « Les gîtes » ---------- */
.liste-gites { margin-top: var(--lg); }
.liste-gites__chapeau { max-width: 720px; }
.liste-gites__voir { justify-self: start; margin-top: var(--sm); }
.comparatif { margin-top: var(--md); overflow-x: auto; border: 1px solid var(--surface-variant); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--elev-sm); }
.comparatif__table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.comparatif__table th, .comparatif__table td { padding: var(--sm) var(--md); text-align: left; border-bottom: 1px solid var(--surface-variant); }
.comparatif__table tbody tr:last-child > * { border-bottom: 0; }
.comparatif__table thead th { font-size: 18px; font-weight: 600; }
.comparatif__table thead a { text-decoration: none; }
.comparatif__table thead a:hover { text-decoration: underline; }
.comparatif__table tbody th { font-weight: 500; color: var(--on-surface-variant); }

@media (max-width: 1128px) {
    .fiche { grid-template-columns: minmax(0, 1fr) 340px; column-gap: var(--lg); }
    .fiche__domaine, .fiche__equipements, .fiche__activites { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .galerie { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; border-radius: var(--r-lg); }
    .galerie__principale { aspect-ratio: 3 / 2; height: auto; }
    .galerie__cote { height: auto; grid-auto-rows: auto; }
    .galerie__cote { grid-template-columns: 1fr 1fr; }
    .galerie__cote--3 > :first-child { grid-column: auto; }
    .galerie__cote--3 > :last-child { grid-column: 1 / -1; }
    .galerie__vignette { aspect-ratio: 3 / 2; height: auto; }
    .galerie__tout { right: var(--sm); bottom: var(--sm); height: 40px; padding: 8px 16px; }
    .fiche { grid-template-columns: 1fr; grid-template-areas: "resume" "reservation" "contenu"; margin-top: var(--md); }
    .fiche__resume { padding-bottom: var(--md); border-bottom: 0; }
    .fiche__reservation { position: static; box-shadow: var(--elev-sm); }
    .fiche__chiffres { grid-template-columns: repeat(2, 1fr); }
    .comparatif__table th, .comparatif__table td { padding: var(--sm); font-size: 14px; line-height: 20px; }
}