/* ============================================================
   FICHE ETABLISSEMENT — nouveau design (2026)
   Complements de nouveau.css, specifiques a la page fiche.
   ============================================================ */

body#fiche { background: var(--fond); }

#fiche .fil-ariane { font-size: 13px; color: var(--gris); margin: 18px 0; }
#fiche .fil-ariane a { color: var(--gris); text-decoration: none; }
#fiche .fil-ariane a:hover { text-decoration: underline; }

/* ---------- Galerie photos (variantes selon le nombre) ---------- */
.galerie {
	display: grid; gap: 10px; border-radius: calc(var(--radius) + 4px); overflow: hidden;
}
.galerie.g1 { grid-template-columns: 1fr; grid-template-rows: 440px; }
.galerie.g2 { grid-template-columns: 1fr 1fr; grid-template-rows: 400px; }
.galerie.g3 { grid-template-columns: 2fr 1fr; grid-template-rows: 195px 195px; }
.galerie.g3 .g-cell:first-child { grid-row: span 2; }
.galerie.g4 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 195px 195px; }
.galerie.g4 .g-cell:first-child { grid-row: span 2; grid-column: 1; }
.galerie.g4 .g-cell:nth-child(2) { grid-column: 2 / span 2; }
.galerie.g5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; }
.galerie.g5 .g-cell:first-child { grid-row: span 2; }

/* Cellule : l'image remplit son conteneur (cover). Pour les photos
   trop petites (detectees en JS -> classe .petite), on bascule en
   image entiere sur fond flou pour eviter une bouillie de pixels. */
.g-cell {
	position: relative; display: block; overflow: hidden;
	background-image: var(--bg); background-size: cover; background-position: center;
}
.g-cell img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.g-cell:hover img { transform: scale(1.02); }
.g-cell.petite { display: flex; align-items: center; justify-content: center; }
/* Fond : la meme photo floutee, debordante pour cacher les bords adoucis du blur */
.g-cell.petite::before {
	content: ''; position: absolute; inset: -24px;
	background-image: var(--bg); background-size: cover; background-position: center;
	filter: blur(18px) brightness(.92);
}
/* La photo garde (presque) sa taille reelle : agrandissement plafonne en JS
   (max-width/max-height poses par fiche.js), le fond flou comble le vide */
.g-cell.petite img { object-fit: contain; }
.g-cell .voile {
	position: absolute; inset: 0; background: rgba(20, 30, 29, .55); color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.g-cachee { display: none; }

/* ---------- Disposition ---------- */
.fiche-disposition { display: grid; grid-template-columns: 1fr 380px; gap: 44px; align-items: start; margin-top: 28px; }
.fiche-titre h1 { font-size: 30px; font-weight: 800; letter-spacing: -.7px; margin: 0; color: var(--ink); font-family: inherit; }
.fiche-titre .lieu { color: var(--gris); margin: 6px 0 0; font-size: 15px; }
.fiche-titre .ouverture { color: var(--teal-dark); font-weight: 600; font-size: 14px; margin: 8px 0 0; }
.etiquettes { display: flex; gap: 8px; margin: 16px 0 6px; flex-wrap: wrap; }
.etiquette {
	background: var(--teal-light); color: var(--teal-dark); font-size: 13px; font-weight: 700;
	padding: 5px 13px; border-radius: 999px; display: inline-block;
}

.alerte-promo {
	background: #fdf3e3; border: 1.5px solid #f3ce93; color: #8a5a00;
	border-radius: var(--radius); padding: 14px 18px; margin: 20px 0 0; font-size: 15px;
}

.fiche-section { padding: 26px 0 0; border-top: 1px solid #dfe8e7; margin-top: 26px; }
.fiche-section:first-of-type { border-top: none; margin-top: 8px; }
.fiche-section h2 { font-size: 20px; margin: 0 0 16px; letter-spacing: -.3px; color: var(--ink); font-family: inherit; font-weight: 700; }
.fiche-section p { font-size: 15px; line-height: 1.7; }

.equipements { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.equipement { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.equipement .ok { color: var(--teal-dark); font-weight: 700; }
.equipement.non { color: #b9c5c4; text-decoration: line-through; }

/* ---------- Chambres depliables ---------- */
.chambres-liste { display: grid; gap: 14px; }
.chambre-item { background: var(--blanc); border-radius: var(--radius); box-shadow: var(--ombre); overflow: hidden; }
.chambre-resume { padding: 18px 20px; display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.chambre-resume .nom { font-weight: 700; font-size: 16px; }
.chambre-resume .detail { color: var(--gris); font-size: 14px; }
.chambre-resume .droite { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.chambre-resume .prix { font-weight: 800; white-space: nowrap; text-align: right; }
.chambre-resume .prix .a-partir { display: block; font-weight: 500; color: var(--gris); font-size: 12px; }
.chambre-toggle { background: none; border: none; color: var(--teal-dark); font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; padding: 0; }
.chambre-detail { display: none; padding: 0 20px 20px; border-top: 1px solid var(--gris-clair); }
.chambre-item.ouvert .chambre-detail { display: block; }
.chambre-detail p { color: var(--gris); font-size: 14.5px; margin: 14px 0; }
.chambre-detail .photos-detail { display: flex; gap: 8px; flex-wrap: wrap; }
.chambre-detail .photos-detail img { width: 110px; height: 80px; object-fit: cover; border-radius: 8px; }
.tableau-prix { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; background: transparent; }
.tableau-prix td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--gris-clair); }
.tableau-prix td:first-child { font-weight: 600; white-space: nowrap; }

/* ---------- Situation ---------- */
.distances { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.distance { background: var(--gris-clair); border-radius: 999px; padding: 7px 15px; font-size: 14px; font-weight: 500; }
.distance b { color: var(--teal-dark); }
.activites-liste { color: var(--gris); font-size: 14.5px; }

/* ---------- Carte ---------- */
.alerte-map {
	background: #fdf3e3; border: 1.5px solid #f3ce93; color: #8a5a00;
	border-radius: var(--radius); padding: 12px 16px; margin: 0 0 12px; font-size: 14px;
}
#map { width: 100%; height: 380px; border-radius: var(--radius); box-shadow: var(--ombre); }

/* ---------- Panneau contact (sticky) ---------- */
.panneau-resa {
	position: sticky; top: 96px; background: var(--blanc); border-radius: calc(var(--radius) + 4px);
	box-shadow: var(--ombre-hover); padding: 26px;
}
.panneau-resa .a-partir { font-size: 13px; color: var(--gris); font-weight: 600; }
.panneau-resa .prix-ligne { display: flex; align-items: baseline; gap: 8px; }
.panneau-resa .prix { font-size: 28px; font-weight: 800; color: var(--ink); }
.panneau-resa .prix-unite { color: var(--gris); font-size: 14px; }
.panneau-resa .note { font-size: 13px; color: var(--gris); margin: 4px 0 18px; }
.panneau-resa .bouton { width: 100%; margin-bottom: 10px; padding: 14px; font-size: 16px; }
.panneau-resa .reassurance { font-size: 13px; color: var(--gris); text-align: center; margin-top: 10px; }
.panneau-resa .reassurance b { color: var(--teal-dark); }
.proprio { display: flex; gap: 12px; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--gris-clair); }
.proprio .avatar {
	width: 46px; height: 46px; border-radius: 50%; background: var(--teal-light);
	display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--teal-dark); flex: none;
}
.proprio .nom { font-weight: 700; font-size: 15px; }
.proprio .infos { font-size: 13px; color: var(--gris); }

/* ---------- Modales (contact / telephone) ---------- */
.modale-fond {
	display: none; position: fixed; inset: 0; background: rgba(20, 30, 29, .6);
	z-index: 1100; align-items: center; justify-content: center; padding: 20px;
}
.modale-fond.ouvert { display: flex; }
.modale {
	background: #fff; border-radius: calc(var(--radius) + 4px); max-width: 540px; width: 100%;
	padding: 32px; position: relative; max-height: 90vh; overflow: auto;
}
.modale h3 { font-size: 20px; margin: 0 0 4px; font-family: inherit; }
.modale .sous { color: var(--gris); font-size: 14px; margin: 0 0 20px; }
.modale-fermer { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--gris); }
.modale .champ { margin-bottom: 14px; }
.modale .champ label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.modale .champ input, .modale .champ textarea {
	width: 100%; padding: 11px 14px; border: 1.5px solid #d9e2e1; border-radius: 10px;
	font-family: inherit; font-size: 15px; outline: none; box-sizing: border-box;
}
.modale .champ input:focus, .modale .champ textarea:focus { border-color: var(--teal); }
.modale .anti-spam { background: var(--gris-clair); border-radius: 10px; padding: 14px; margin-bottom: 14px; font-size: 14px; }
.modale .anti-spam img { display: inline-block; }
.modale .tel { font-size: 20px; font-weight: 700; margin: 10px 0; }
.modale .erreur { color: #c0392b; font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.fiche-disposition { grid-template-columns: 1fr; gap: 24px; }
	.panneau-resa { position: static; }
	.galerie.g5, .galerie.g4 { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px; }
	.galerie.g5 .g-cell:first-child, .galerie.g4 .g-cell:first-child { grid-column: span 2; grid-row: auto; }
	.galerie.g4 .g-cell:nth-child(2) { grid-column: auto; }
	.galerie.g1 { grid-template-rows: 280px; }
	.galerie.g2 { grid-template-rows: 220px; }
}