/* Gabarit commun des sites du réseau (design propre, couleurs modifiables via les variables). */
:root {
  --fond: #f6f5f1; --surface: #fff; --texte: #1c2321; --sec: #5f6b68; --bord: #e2e0d8;
  --prim: #0f5c55; --prim-clair: #e3efed; --action: #e8833a; --action-fonce: #c96a24;
  --note: #0f5c55; --etoile: #e0a526;
  --rayon: 12px; --ombre: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04);
  --police: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.55 var(--police); }
img { max-width: 100%; display: block; }
a { color: var(--prim); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
.conteneur { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.sec { color: var(--sec); }

.bandeau-apercu { background: #fff4cc; color: #6b5300; text-align: center; font-size: 14px; padding: 6px; }

/* ---- en-tête */
.entete { background: var(--surface); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 50; }
.entete__int { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--texte); text-decoration: none; }
.marque svg { width: 30px; height: 30px; fill: var(--prim); }
.menu { display: flex; gap: 20px; margin-left: auto; }
.menu a { color: var(--texte); text-decoration: none; font-weight: 500; }
.menu a:hover { color: var(--prim); }
.langues { position: relative; }
.langues summary { cursor: pointer; list-style: none; font-weight: 600; padding: 6px 10px; border: 1px solid var(--bord); border-radius: 8px; }
.langues ul { position: absolute; right: 0; top: 110%; margin: 0; padding: 6px; list-style: none; background: var(--surface);
  border: 1px solid var(--bord); border-radius: 10px; box-shadow: var(--ombre); max-height: 60vh; overflow: auto; min-width: 180px; }
.langues a { display: block; padding: 6px 10px; border-radius: 6px; text-decoration: none; color: var(--texte); }
.langues a:hover, .langues a[aria-current] { background: var(--prim-clair); }

/* ---- bandeau d'accueil */
.hero { background: linear-gradient(135deg, var(--prim) 0%, #12423e 100%); color: #fff; padding: 40px 0; }
.hero__int { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: center; }
.hero__intro { font-size: 1.1rem; opacity: .92; max-width: 60ch; }

/* ---- formulaire de dates */
.recherche { background: var(--surface); color: var(--texte); border-radius: var(--rayon); padding: 18px; box-shadow: var(--ombre); border: 1px solid var(--bord); }
.recherche__titre { font-weight: 700; margin: 0 0 10px; }
.recherche__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.recherche label { font-size: 13px; color: var(--sec); display: flex; flex-direction: column; gap: 4px; }
.recherche input, .recherche select, .tri select { font: inherit; color: var(--texte); padding: 8px 10px; border: 1px solid var(--bord); border-radius: 8px; background: #fff; width: 100%; }

.bouton { display: inline-block; text-align: center; padding: 10px 18px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--prim); color: #fff; font: inherit; font-weight: 600; text-decoration: none; }
.bouton:hover { filter: brightness(1.08); }
.bouton--action { background: var(--action); width: 100%; }
.bouton--action:hover { background: var(--action-fonce); filter: none; }
.bouton--contour { background: none; color: var(--prim); border: 1px solid var(--prim); width: 100%; margin-top: 10px; }

/* ---- grille principale */
.grille { display: grid; grid-template-columns: 270px 1fr; gap: 28px; padding-top: 24px; padding-bottom: 48px; align-items: start; }
.grille--fiche { grid-template-columns: 1fr 330px; }
.contenu { min-width: 0; }
.fil { font-size: 14px; color: var(--sec); padding-top: 16px; }
.fil a { color: var(--sec); }

/* ---- filtres */
.filtres { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 6px 16px; position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; }
.filtres__ouvrir { display: none; width: 100%; margin: 10px 0; }
.filtres section { padding: 12px 0; border-bottom: 1px solid var(--bord); }
.filtres section:last-child { border: 0; }
.filtres h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--sec); margin-bottom: 6px; }
.filtres ul { list-style: none; margin: 0; padding: 0; }
.filtres a { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; margin: 0 -8px; border-radius: 6px; color: var(--texte); text-decoration: none; font-size: 15px; }
.filtres a:hover { background: var(--prim-clair); }
.filtres a[aria-current] { background: var(--prim); color: #fff; }
.filtres a[aria-current] .compteur { color: #fff; }
.compteur { color: var(--sec); font-size: 13px; font-variant-numeric: tabular-nums; }
.repliable.replie li:nth-child(n+7) { display: none; }
.voir-plus { background: none; border: 0; color: var(--prim); cursor: pointer; padding: 6px 0 0; font: inherit; font-size: 14px; }

/* ---- blocs et cartes */
.bloc { margin-bottom: 36px; }
.bloc__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.bloc__tete a { white-space: nowrap; font-weight: 600; text-decoration: none; }
.carte { display: grid; grid-template-columns: 240px 1fr 170px; background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); overflow: hidden; margin-bottom: 16px; box-shadow: var(--ombre); }
.carte__photo { background: var(--prim-clair); min-height: 180px; }
.carte__photo img { width: 100%; height: 100%; object-fit: cover; }
.carte__corps { padding: 14px 18px; min-width: 0; }
.carte__type { font-size: 13px; color: var(--sec); margin: 0 0 2px; text-transform: uppercase; letter-spacing: .03em; }
.carte__nom { font-size: 1.15rem; margin: 0 0 4px; }
.carte__nom a { color: var(--texte); text-decoration: none; }
.carte__nom a:hover { color: var(--prim); }
.carte__adresse { font-size: 14px; color: var(--sec); margin: 0 0 8px; }
.carte__texte { font-size: 14px; margin: 8px 0 0; color: #3b4542; }
.carte__cote { padding: 14px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 12px; border-left: 1px solid var(--bord); }
.etoiles { color: var(--etoile); letter-spacing: 1px; }
.carte__prix { margin: auto 0 0; text-align: right; line-height: 1.2; }
.carte__prix strong { font-size: 1.35rem; color: var(--texte); }
.carte__prix small { color: var(--sec); font-size: 12px; }
.pastilles { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pastilles li { font-size: 12px; background: var(--prim-clair); color: var(--prim); padding: 2px 8px; border-radius: 20px; }
.pastilles--grandes li { font-size: 14px; padding: 4px 12px; }
.note { display: flex; align-items: center; gap: 8px; text-align: right; }
.note__val { background: var(--note); color: #fff; font-weight: 700; border-radius: 8px 8px 8px 0; padding: 6px 8px; min-width: 42px; text-align: center; }
.note__txt { display: flex; flex-direction: column; font-weight: 600; font-size: 15px; }
.note__txt small { font-weight: 400; color: var(--sec); font-size: 12px; }
.note--grande { justify-content: flex-start; text-align: left; margin-bottom: 14px; }
.note--grande .note__val { font-size: 1.3rem; padding: 8px 12px; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.tuiles a { display: block; padding: 12px 14px; background: var(--surface); border: 1px solid var(--bord); border-radius: 10px; text-decoration: none; color: var(--texte); font-weight: 500; }
.tuiles a:hover { border-color: var(--prim); color: var(--prim); }

.barre-liste { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; color: var(--sec); }
.barre-liste p { margin: 0; }
.tri label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tri select { width: auto; }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 24px; }
.pagination a, .pagination span { min-width: 40px; padding: 8px 12px; text-align: center; border-radius: 8px; background: var(--surface); border: 1px solid var(--bord); text-decoration: none; color: var(--texte); }
.pagination a[aria-current] { background: var(--prim); border-color: var(--prim); color: #fff; }

/* ---- pictogrammes */
.ico { width: 20px; height: 20px; flex: none; vertical-align: -4px; }
.ico--grand { width: 36px; height: 36px; }

/* ---- fiche hôtel : en-tête et onglets */
.fiche__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.fiche__tete h1 { margin-bottom: 4px; }
.fiche__adresse { color: var(--sec); margin: 0 0 8px; }
.fiche__adresse .ico { color: var(--prim); }
.fiche__note { flex: none; }
.onglets { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--bord); margin: 0 0 16px;
  position: sticky; top: 64px; background: var(--fond); z-index: 20; }
.onglets::-webkit-scrollbar { display: none; }
.onglets a { padding: 12px 14px; white-space: nowrap; text-decoration: none; color: var(--sec); font-weight: 600; font-size: 15px;
  border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.onglets a:hover { color: var(--texte); }
.onglets a[aria-current] { color: var(--prim); border-color: var(--prim); }

/* ---- carrousel photos */
.carrousel { margin-bottom: 18px; scroll-margin-top: 120px; }
.carrousel__scene { position: relative; border-radius: var(--rayon); overflow: hidden; background: #142624; }
.carrousel__piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; aspect-ratio: 3 / 2; max-height: 520px; outline: none; }
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__diapo { flex: 0 0 100%; margin: 0; scroll-snap-align: center; cursor: zoom-in; }
.carrousel__diapo img { width: 100%; height: 100%; object-fit: cover; }
.carrousel__fleche { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--texte); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.carrousel__fleche:hover { background: #fff; }
.carrousel__fleche--g { left: 14px; } .carrousel__fleche--d { right: 14px; }
.carrousel__note { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.95); padding: 6px 10px 6px 6px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.carrousel__compte { position: absolute; bottom: 14px; right: 14px; display: flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  background: rgba(20,38,36,.8); color: #fff; font: inherit; font-size: 14px; padding: 6px 12px; border-radius: 20px; }
.carrousel__vignettes { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: thin; }
.carrousel__vignettes button { flex: none; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--prim-clair); opacity: .65; transition: opacity .15s; }
.carrousel__vignettes button:hover, .carrousel__vignettes button[aria-current] { opacity: 1; border-color: var(--prim); }
.carrousel__vignettes img { width: 96px; height: 64px; object-fit: cover; }

/* ---- sections */
.section { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 22px; margin-bottom: 18px; scroll-margin-top: 120px; }
.section--nue { background: none; border: 0; padding: 8px 0 0; }
.section__tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.section__tete h2 { margin: 0; }
.section__sous-titre { margin-top: 22px; }
.texte { color: #333d3a; }
.depliable.replie { max-height: 11.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.lien-depli { background: none; border: 0; padding: 8px 0 0; color: var(--prim); font: inherit; font-weight: 600; cursor: pointer; }
.atouts { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.atouts li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; font-size: 15px; font-weight: 500; }
.atouts .ico { color: var(--prim); width: 22px; height: 22px; }
.jauges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 28px; }
.jauges li { display: grid; grid-template-columns: 1fr 110px 34px; align-items: center; gap: 10px; font-size: 15px; }
.jauge { height: 8px; background: var(--prim-clair); border-radius: 4px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--prim); }

/* ---- calendrier des prix */
.calendrier { --bas: #1a7f4b; --moyen: #b7791f; --haut: #c0392b; }
.calendrier__barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.calendrier__etat { margin: 0; color: var(--sec); font-size: 14px; text-align: center; flex: 1; }
.calendrier__nav { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bord); background: var(--surface); color: var(--texte); cursor: pointer; display: grid; place-items: center; }
.calendrier__nav:disabled { opacity: .35; cursor: default; }
.calendrier__mois { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; min-height: 120px; }
.calendrier__titre { text-align: center; font-weight: 700; margin: 0 0 8px; text-transform: capitalize; }
.calendrier__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendrier__jsem { text-align: center; font-size: 12px; color: var(--sec); font-weight: 600; padding: 4px 0; text-transform: uppercase; }
.jour { aspect-ratio: 1 / 1.05; border: 1px solid transparent; border-radius: 8px; background: none; padding: 2px; font: inherit; color: var(--texte);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; min-width: 0; }
.jour__num { font-size: 14px; font-weight: 600; }
.jour__prix { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.jour:hover:not(:disabled) { border-color: var(--prim); }
.jour:disabled { cursor: default; color: #a7b0ad; }
.jour--complet { background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(0,0,0,.04) 5px 7px); }
.jour--complet .jour__prix { color: #a7b0ad; font-weight: 400; }
.jour--vide { visibility: hidden; }
.prix-bas .jour__prix { color: var(--bas); } .prix-moyen .jour__prix { color: var(--moyen); } .prix-haut .jour__prix { color: var(--haut); }
.jour--sejour { background: var(--prim-clair); border-radius: 0; }
.jour--arrivee, .jour--depart { background: var(--prim); color: #fff; }
.jour--arrivee .jour__prix, .jour--depart .jour__prix { color: #fff; }
.jour--arrivee { border-radius: 8px 0 0 8px; } .jour--depart { border-radius: 0 8px 8px 0; }
.jour--arrivee.jour--depart { border-radius: 8px; }
.calendrier__mois.chargement .jour__prix { background: var(--prim-clair); color: transparent; border-radius: 4px; min-width: 28px; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.calendrier__resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px;
  padding: 14px 16px; border-radius: 10px; background: var(--prim-clair); }
.calendrier__resume p { margin: 0; }
.calendrier__resume .bouton--action { width: auto; display: inline-flex; align-items: center; gap: 8px; }
.calendrier__resume .lien-depli { padding: 0; }
.calendrier__releve { margin: 12px 0 0; font-size: 13px; color: var(--sec); text-align: right; }
.calendrier__legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 12px; }
.pastille-prix { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: 6px; }
.pastille-prix.prix-bas { background: var(--bas, #1a7f4b); } .pastille-prix.prix-moyen { background: var(--moyen, #b7791f); } .pastille-prix.prix-haut { background: var(--haut, #c0392b); }

/* ---- activités */
.grille-act { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.carte-act { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.carte-act__photo { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--prim-clair); }
.carte-act__photo img { width: 100%; height: 100%; object-fit: cover; }
.carte-act__badge { position: absolute; left: 10px; top: 10px; background: var(--action); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 12px; }
.carte-act__corps { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.carte-act__corps h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.carte-act__corps h3 a { color: var(--texte); text-decoration: none; }
.carte-act__corps h3 a:hover { color: var(--prim); }
.carte-act__corps .carte__type { margin: 0; }
.carte-act__prix { margin: auto 0 0; }
.carte-act__prix strong { font-size: 1.2rem; }
.carte-act__prix small { color: var(--sec); font-size: 12px; }
.puce-note { color: #b7791f; font-weight: 700; }
.act-photo { margin: 0 0 18px; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 3 / 2; max-height: 480px; background: var(--prim-clair); }
.act-photo img { width: 100%; height: 100%; object-fit: cover; }

.liste-coches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.liste-coches li { display: flex; gap: 10px; align-items: flex-start; }
.liste-coches .ico { color: var(--prim); margin-top: 2px; }
.liste-coches--petite { margin: 10px 0 14px; font-size: 14px; gap: 6px; }
.liste-coches--non .croix { color: var(--haut, #c0392b); font-weight: 700; width: 20px; text-align: center; flex: none; }
.inclus { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; }
.inclus h3, .billets__offre h3 { font-size: 1rem; margin-bottom: 8px; }
.billets { display: grid; gap: 14px; margin-bottom: 10px; }

/* ---- chambres */
.chambres { display: grid; gap: 14px; }
.chambre { display: grid; grid-template-columns: 240px 1fr; border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; }
.chambre__photo { position: relative; background: var(--prim-clair); min-height: 170px; }
.chambre__photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.chambre__photo--vide { display: grid; place-items: center; color: var(--prim); opacity: .5; }
.chambre__nb-photos { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  background: rgba(20,38,36,.8); color: #fff; font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 16px; }
.chambre__corps { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.chambre__corps h3 { margin: 0; font-size: 1.1rem; }
.chambre__lits { margin: 0; font-weight: 500; display: flex; gap: 6px; align-items: flex-start; }
.chambre__lits .ico { color: var(--prim); }
.chambre__desc { margin: 0; color: var(--sec); font-size: 14px; }
.chambre__cta { width: auto; align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; }
.chambre__cta .ico { width: 16px; height: 16px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.puces li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; background: var(--fond); border: 1px solid var(--bord); padding: 3px 10px; border-radius: 16px; }
.puces .ico { width: 16px; height: 16px; color: var(--prim); }

/* ---- équipements */
.resume { background: var(--prim-clair); padding: 10px 14px; border-radius: 8px; }
.equipements { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px 28px; }
.equipements.replie .equipements__groupe:nth-child(n+7) { display: none; }
.equipements__groupe h3 { font-size: 1rem; margin-bottom: 6px; }
.equipements__groupe ul { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.equipements__groupe li { display: flex; gap: 8px; padding: 3px 0; }
.equipements__groupe .ico { width: 18px; height: 18px; color: var(--prim); margin-top: 2px; }
.gratuit { color: #1a7f4b; font-weight: 600; }

/* ---- infos pratiques, carte */
.regles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.regles li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--bord); border-radius: 10px; }
.regles .ico { width: 24px; height: 24px; color: var(--prim); }
.regles strong { display: block; font-size: 14px; color: var(--sec); font-weight: 600; }
.carte-geo { height: 360px; border-radius: 10px; background: var(--prim-clair); margin-bottom: 16px; z-index: 0; }
.lieux { list-style: none; margin: 0; padding: 0; columns: 2 260px; column-gap: 28px; }
.lieux li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--bord); break-inside: avoid; }
.mini-carte { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px; border-radius: var(--rayon); text-decoration: none; color: var(--texte);
  border: 1px solid var(--bord); background: var(--surface) linear-gradient(135deg, var(--prim-clair), transparent 70%); }
.mini-carte .ico { color: var(--prim); }
.mini-carte span { display: flex; flex-direction: column; }
.mini-carte small { color: var(--sec); }
.mini-carte:hover { border-color: var(--prim); }
.bouton--contour { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.bouton--contour .ico { width: 16px; height: 16px; }
.retour-haut { position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bord); background: var(--surface);
  color: var(--prim); display: grid; place-items: center; cursor: pointer; box-shadow: var(--ombre); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s; }
.retour-haut.visible { opacity: 1; pointer-events: auto; }
.faq { border-bottom: 1px solid var(--bord); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin: 8px 0 0; color: #333d3a; }
.fiche__cote .collant { position: sticky; top: 80px; }
.barre-mobile { display: none; }

/* ---- photo introuvable : fond neutre avec pictogramme (cartes, galerie) */
.img-ko { background: var(--prim-clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230f5c55' opacity='.35'%3E%3Cpath d='M3 21V9l9-6 9 6v12h-6v-7H9v7z'/%3E%3C/svg%3E") center / 56px no-repeat; }
.img-ko img { visibility: hidden; }
.intro-fiche { font-size: 1.05rem; line-height: 1.65; margin: 0 0 16px; }

/* ---- visionneuse photos */
.visionneuse { position: fixed; inset: 0; background: rgba(10,14,13,.94); z-index: 100; display: flex; align-items: center; justify-content: center; }
.visionneuse img { max-width: 92vw; max-height: 86vh; }
.visionneuse button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; font-size: 2rem; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; }
.visionneuse .v-prec { left: 16px; } .visionneuse .v-suiv { right: 16px; } .visionneuse .v-fermer { top: 16px; right: 16px; font-size: 1.5rem; }
.visionneuse .v-compte { position: absolute; bottom: 16px; color: #fff; font-size: 14px; }

/* ---- pied de page */
.pied { background: #142624; color: #cfd8d6; padding: 36px 0 20px; font-size: 14px; }
.pied__int { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px 40px; }
.pied li { padding: 3px 0; }
.pied li a { text-decoration: none; }
.pied li a:hover { text-decoration: underline; color: #fff; }
.pied strong { color: #fff; }
.pied a { color: #cfd8d6; }
.pied ul { list-style: none; padding: 0; margin: 8px 0 0; }
.pied__mention { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; margin: 0; opacity: .8; }
.vide-404 { padding: 80px 16px; text-align: center; }

/* ---- responsive */
@media (max-width: 1000px) {
  .grille, .grille--fiche { grid-template-columns: 1fr; }
  .hero__int { grid-template-columns: 1fr; }
  .filtres { position: static; max-height: none; }
  .filtres__ouvrir { display: block; }
  .filtres__liste[hidden] { display: none; }
  .fiche__cote { order: -1; }
  .fiche__cote .collant { position: static; }
  .fiche__cote .recherche, .fiche__cote .bouton--contour, .fiche__cote .mini-carte { display: none; }
  .barre-mobile { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto; z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
  .pied { padding-bottom: 80px; }
}
@media (max-width: 700px) {
  .menu { display: none; }
  .langues { margin-left: auto; }
  .carte { grid-template-columns: 1fr; }
  .carte__photo { min-height: 0; aspect-ratio: 3 / 2; }
  .carte__cote { border-left: 0; border-top: 1px solid var(--bord); flex-direction: row; align-items: center; }
  .pied__int { grid-template-columns: 1fr; }
  .fiche__tete { flex-direction: column; gap: 6px; }
  .carrousel { margin-left: -16px; margin-right: -16px; }
  .carrousel__scene { border-radius: 0; }
  .carrousel__fleche { display: none; }
  .carrousel__vignettes { padding-left: 16px; padding-right: 16px; }
  .chambre { grid-template-columns: 1fr; }
  .chambre__photo { aspect-ratio: 3 / 2; min-height: 0; }
  .chambre__cta { width: 100%; justify-content: center; }
  .retour-haut { bottom: 80px; }
  .section { padding: 16px; }
}

/* ================================================================== fiche : améliorations visuelles */

/* ---- mosaïque de photos sur ordinateur (le carrousel reste sur mobile ; moins de 5 photos : carrousel) */
.cc-bureau { display: none; }
@media (min-width: 1001px) {
  .carrousel:not(.carrousel--peu) .carrousel__scene { background: none; }
  .carrousel:not(.carrousel--peu) .carrousel__piste {
    display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 205px 205px; gap: 6px;
    overflow: visible; aspect-ratio: auto; max-height: none; scroll-snap-type: none; }
  .carrousel:not(.carrousel--peu) .carrousel__diapo { overflow: hidden; }
  .carrousel:not(.carrousel--peu) .carrousel__diapo:first-child { grid-row: span 2; }
  .carrousel:not(.carrousel--peu) .carrousel__diapo:nth-child(n+6) { display: none; }
  .carrousel:not(.carrousel--peu) .carrousel__diapo img { transition: transform .3s ease; }
  .carrousel:not(.carrousel--peu) .carrousel__diapo:hover img { transform: scale(1.04); }
  .carrousel:not(.carrousel--peu) .carrousel__fleche,
  .carrousel:not(.carrousel--peu) .carrousel__vignettes { display: none; }
  .carrousel:not(.carrousel--peu) .carrousel__compte { background: #fff; color: var(--texte); font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
  .carrousel:not(.carrousel--peu) .cc-mobile { display: none; }
  .carrousel:not(.carrousel--peu) .cc-bureau { display: inline; }
}

/* ---- bouton « Voir les prix » au bout des onglets */
.onglets__cta { margin-left: auto; align-self: center; padding: 7px 14px !important; border-bottom: 0 !important;
  background: var(--action); color: #fff !important; border-radius: 8px; white-space: nowrap; }
.onglets__cta:hover { background: var(--action-fonce); }

/* ---- synthèse des notes */
.synthese { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.synthese li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 14px; }
.synthese .ico { width: 16px; height: 16px; }
.synthese__plus { background: #e6f4ec; color: #1a5e3a; }
.synthese__moins { background: #fdf0dc; color: #7a4a00; }
.synthese__ico { font-weight: 800; width: 16px; text-align: center; }

/* ---- listes plus compactes */
.lieux.replie li:nth-child(n+11) { display: none; }
.chambre__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- petites cartes « Autres hébergements » */
.grille-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.carte-mini { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  overflow: hidden; text-decoration: none; color: var(--texte); box-shadow: var(--ombre); transition: transform .15s, box-shadow .15s; }
.carte-mini:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.carte-mini__photo { position: relative; aspect-ratio: 3 / 2; background: var(--prim-clair); }
.carte-mini__photo img { width: 100%; height: 100%; object-fit: cover; }
.carte-mini__note { position: absolute; left: 8px; bottom: 8px; background: var(--note); color: #fff; font-weight: 700; font-size: 13px;
  padding: 3px 7px; border-radius: 6px 6px 6px 0; }
.carte-mini__corps { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.carte-mini__corps .carte__type { margin: 0; font-size: 12px; }
.carte-mini__corps strong { font-size: 15px; line-height: 1.3; }
.carte-mini__prix { font-size: 14px; margin-top: auto; }
.carte-mini__prix small { color: var(--sec); }

/* ---- résumé de la colonne de droite (prix, note, atouts) */
.resume-cote { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; margin-bottom: 12px;
  box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 10px; }
.resume-cote__prix { margin: 0; }
.resume-cote__prix strong { font-size: 1.6rem; }
.resume-cote__prix small { color: var(--sec); }
.resume-cote__note { justify-content: flex-start; text-align: left; }
.resume-cote__atouts { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--bord); display: grid; gap: 6px; font-size: 14px; }
.resume-cote__atouts li { display: flex; gap: 8px; align-items: center; }
.resume-cote__atouts .ico { color: var(--prim); width: 18px; height: 18px; }

/* ---- location de voiture */
.encart-voiture { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: var(--rayon);
  background: var(--prim-clair); border: 1px solid var(--bord); }
.encart-voiture > .ico { color: var(--prim); flex: none; }
.encart-voiture p { margin: 2px 0 0; font-size: 14px; color: var(--sec); }
.encart-voiture .bouton { width: auto; margin: 0 0 0 auto; flex: none; white-space: nowrap; background: var(--surface); }
.lien-voiture { flex-basis: 100%; font-size: 14px; font-weight: 600; text-decoration: none; }
.lien-voiture:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .encart-voiture { flex-wrap: wrap; }
  .encart-voiture .bouton { width: 100%; margin: 4px 0 0; }
}

/* ---- barre de réservation mobile avec le prix */
@media (max-width: 1000px) {
  .barre-mobile.barre-mobile--prix { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    left: 0; right: 0; bottom: 0; border-radius: 0; padding: 10px 16px; background: var(--surface);
    border-top: 1px solid var(--bord); box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
  .barre-mobile--prix .bouton { width: auto; flex: 1; max-width: 240px; }
  .barre-mobile__prix { display: flex; flex-direction: column; line-height: 1.15; }
  .barre-mobile__prix strong { font-size: 1.2rem; }
  .barre-mobile__prix small { color: var(--sec); font-size: 12px; }
  .resume-cote, .onglets__cta { display: none; }
}