:root {
--mli-ink: #1b211d;
--mli-ink-soft: #545b50;
--mli-ink-faint: #8b9186;
--mli-bg: #faf8f3;
--mli-card-bg: #ffffff;
--mli-line: #e7e2d3;
--mli-primary: #1f3a2e; --mli-primary-soft: #3c5c49;
--mli-primary-bg: #eef1e9;
--mli-accent: #b1592f; --mli-accent-soft: #c97a4f;
--mli-accent-bg: #f7e9e0;
--mli-shadow: 0 16px 40px -10px rgba(27, 33, 29, 0.18);
--mli-shadow-sm: 0 4px 14px -4px rgba(27, 33, 29, 0.10);
} body.single-hebergement,
body.tax-destination,
body.tax-type-hebergement,
body.tax-experience,
body.tax-categorie-sejour {
background: var(--mli-bg) !important;
}
.mli-fiche, .mli-archive {
max-width: 1160px;
margin: 0 auto;
padding: 32px 24px 100px;
color: var(--mli-ink);
font-family: "Work Sans", sans-serif;
background: var(--mli-bg);
}
.mli-breadcrumb {
font-size: 13px;
color: var(--mli-ink-faint);
margin-bottom: 18px;
letter-spacing: .01em;
}
.mli-breadcrumb a { color: var(--mli-ink-faint); text-decoration: none; }
.mli-breadcrumb a:hover { color: var(--mli-primary); }
.mli-breadcrumb .sep { margin: 0 8px; color: var(--mli-line); }
.mli-breadcrumb .current { color: var(--mli-ink); } .mli-hero { margin-bottom: 14px; }
.mli-hero-main {
position: relative;
width: 100%;
max-width: 720px;
aspect-ratio: 4/3;
max-height: 400px;
margin: 0 auto;
border-radius: 18px;
overflow: hidden;
box-shadow: var(--mli-shadow);
background: var(--mli-primary-bg);
}
.mli-hero-main img {
width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block;
cursor: zoom-in;
transition: opacity .2s ease;
}
.mli-hero-scrim {
position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(10,14,11,0.75) 0%, rgba(10,14,11,0.22) 48%, rgba(10,14,11,0) 66%);
pointer-events: none;
}
.mli-hero-counter {
position: absolute;
top: 14px; right: 14px;
background: rgba(10,14,11,0.5);
color: #fff;
font-size: 12px;
font-weight: 500;
letter-spacing: .02em;
padding: 5px 11px;
border-radius: 99px;
backdrop-filter: blur(3px);
} .mli-hero-actions {
position: absolute;
top: 14px; left: 14px;
display: flex;
gap: 8px;
z-index: 2;
}
.mli-hero-action {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border-radius: 50%;
border: none;
background: rgba(10,14,11,0.45);
color: #fff !important;
cursor: pointer;
backdrop-filter: blur(3px);
transition: background .15s ease, transform .1s ease;
}
.mli-hero-action:hover { background: rgba(10,14,11,0.7); color: #fff !important; }
.mli-hero-action:active { transform: scale(0.92); }
.mli-hero-action svg { flex-shrink: 0; }
.mli-hero-action.is-copied::after {
content: "Lien copié";
position: absolute;
top: 42px;
left: 0;
background: rgba(10,14,11,0.85);
color: #fff;
font-size: 11px;
font-weight: 500;
padding: 5px 10px;
border-radius: 6px;
white-space: nowrap;
}
.mli-hero-content {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 22px 24px 20px;
}
.mli-fiche-badges { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.mli-badge {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
padding: 6px 13px;
border-radius: 99px;
background: var(--mli-accent);
color: #fff !important;
text-decoration: none;
transition: background .15s ease;
}
.mli-badge:hover { background: var(--mli-accent-soft); color: #fff !important; }
.mli-badge-outline {
background: rgba(255,255,255,0.12);
color: #fff !important;
border: 1.5px solid rgba(255,255,255,0.7);
padding: 4.5px 13px;
backdrop-filter: blur(3px);
}
.mli-badge-outline:hover { background: rgba(255,255,255,0.24); color: #fff !important; }
.mli-hero-content h1 {
font-family: "Belleza", serif;
font-weight: 400;
font-size: clamp(24px, 3.2vw, 32px);
line-height: 1.15;
letter-spacing: -.01em;
margin: 0 0 8px;
color: #fff;
text-wrap: balance;
text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.mli-fiche-location {
display: flex;
align-items: center;
gap: 6px;
color: rgba(255,255,255,0.92);
font-size: 14px;
margin: 0;
}
.mli-fiche-location svg { color: #fff; flex-shrink: 0; } .mli-hero-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
border-radius: 50%;
border: none;
background: rgba(10,14,11,0.45);
color: #fff !important;
cursor: pointer;
opacity: 0;
transition: opacity .15s ease, background .15s ease;
}
.mli-hero-main:hover .mli-hero-nav,
.mli-hero-nav:focus-visible { opacity: 1; }
.mli-hero-nav svg { flex-shrink: 0; width: 12px; height: 12px; }
.mli-hero-nav:hover { background: rgba(10,14,11,0.7); color: #fff !important; }
.mli-hero-nav-prev { left: 10px; }
.mli-hero-nav-next { right: 10px; }
@media (hover: none) { .mli-hero-nav { opacity: 1; background: rgba(10,14,11,0.35); }
} .mli-hero-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 12px;
}
.mli-hero-dot {
width: 8px; height: 8px;
border-radius: 50%;
border: none;
padding: 0;
background: var(--mli-line);
cursor: pointer;
transition: background .15s ease, transform .15s ease;
}
.mli-hero-dot:hover { background: var(--mli-accent-soft); }
.mli-hero-dot.is-active { background: var(--mli-accent); transform: scale(1.25); }
@media (max-width: 780px) {
.mli-hero-main { aspect-ratio: 4/3.3; max-height: 340px; border-radius: 14px; }
.mli-hero-content { padding: 18px 18px 16px; }
} .mli-quickfacts {
display: flex;
flex-wrap: wrap;
background: var(--mli-card-bg);
border-radius: 16px;
box-shadow: var(--mli-shadow-sm);
margin-bottom: 40px;
overflow: hidden;
}
.mli-quickfact {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 22px;
flex: 1 1 145px;
min-width: 0;
white-space: normal;
}
.mli-quickfact svg { color: var(--mli-accent); flex-shrink: 0; }
.mli-quickfact div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.mli-quickfact strong {
font-family: "Belleza", serif;
font-weight: 400;
font-size: 16.5px;
color: var(--mli-ink);
overflow-wrap: break-word;
}
.mli-quickfact span { font-size: 12px; color: var(--mli-ink-faint); text-transform: uppercase; letter-spacing: .03em; }  @media (min-width: 1040px) {
.mli-fiche-grid {
display: grid;
grid-template-columns: 1fr 320px;
grid-template-areas:
"photo   side"
"content side";
column-gap: 40px;
row-gap: 24px;
}
.mli-hero-row { grid-area: photo; margin: 0; }
.mli-fiche-body { grid-area: content; }
.mli-hero-side { grid-area: side; position: relative; }
.mli-hero-side-inner {
position: sticky;
top: 32px;
display: flex;
flex-direction: column;
gap: 14px;
overflow-y: auto; transform: translateY(var(--mli-side-offset, 0px));
}
.mli-hero-side .mli-quickfacts {
flex-direction: column;
margin-bottom: 0;
overflow-x: visible;
}
.mli-hero-side .mli-quickfact {
flex: 0 0 auto;
min-width: 0;
white-space: normal;
padding: 13px 18px;
border-right: none;
border-bottom: 1px solid var(--mli-line);
}
.mli-hero-side .mli-quickfact:last-child { border-bottom: none; }
}
@media (max-width: 1039px) {
.mli-hero-side .mli-booking-card { margin-top: 20px; }
}  .mli-fiche-body { max-width: 760px; }
.mli-section { margin-bottom: 48px; } .mli-fiche-main > .mli-section:last-child { margin-bottom: 0; }
.mli-section h2 {
font-family: "Belleza", serif;
font-weight: 400;
font-size: 25px;
color: var(--mli-ink);
margin: 0 0 20px;
position: relative;
padding-bottom: 12px;
}
.mli-section h2::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 44px; height: 3px;
background: var(--mli-accent);
border-radius: 3px;
}
.mli-description { line-height: 1.8; color: var(--mli-ink-soft); font-size: 15.5px; }
.mli-description p { margin: 0 0 14px; }
.mli-description p:first-of-type::first-letter {
font-family: "Belleza", serif;
font-size: 44px;
float: left;
line-height: .85;
padding: 4px 8px 0 0;
color: var(--mli-accent);
} .mli-feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.mli-feature-card {
display: flex;
align-items: flex-start;
gap: 14px;
background: var(--mli-card-bg);
border-radius: 14px;
padding: 18px 20px;
box-shadow: var(--mli-shadow-sm);
}
.mli-feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
border-radius: 50%;
background: var(--mli-accent-bg);
color: var(--mli-accent);
flex-shrink: 0;
}
.mli-feature-icon svg { flex-shrink: 0; }
.mli-feature-card p { margin: 0; font-size: 14.5px; color: var(--mli-ink-soft); line-height: 1.5; padding-top: 8px; }
@media (max-width: 560px) { .mli-feature-grid { grid-template-columns: 1fr; } } .mli-equip-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.mli-equip-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 14.5px;
color: var(--mli-ink-soft);
background: var(--mli-card-bg);
border: 1px solid var(--mli-line);
border-radius: 12px;
padding: 13px 16px;
}
.mli-equip-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: 9px;
background: var(--mli-primary-bg);
color: var(--mli-primary);
flex-shrink: 0;
}
.mli-equip-icon svg { flex-shrink: 0; }
@media (max-width: 560px) { .mli-equip-grid { grid-template-columns: 1fr; } }
.mli-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.mli-tag {
font-size: 13px;
font-weight: 500;
padding: 8px 16px;
border-radius: 99px;
background: var(--mli-primary-bg);
color: var(--mli-primary);
text-decoration: none;
transition: all .15s ease;
}
.mli-tag:hover { background: var(--mli-primary); color: #fff !important; }
.mli-map-card {
background: var(--mli-card-bg);
border-radius: 16px;
padding: 14px;
box-shadow: var(--mli-shadow-sm); isolation: isolate;
position: relative;
z-index: 0;
}
.mli-map {
width: 100%;
aspect-ratio: 16/7;
border-radius: 12px;
background: var(--mli-primary-bg);
margin-bottom: 14px;
overflow: hidden;
}
.mli-address {
display: flex; align-items: center; gap: 8px;
color: var(--mli-ink-soft); font-size: 14px; margin: 0; padding: 0 4px 4px;
}
.mli-address svg { color: var(--mli-accent); flex-shrink: 0; } .mli-booking-card {
background: var(--mli-card-bg);
border-radius: 18px;
padding: 18px;
border-top: 4px solid var(--mli-accent);
}
.mli-price { font-size: 13px; color: var(--mli-ink-faint); margin: 0 0 10px; letter-spacing: .01em; }
.mli-price span {
font-family: "Belleza", serif;
font-size: 26px;
color: var(--mli-accent);
margin-right: 5px;
display: inline-block;
}
.mli-cta-reserver {
display: block;
text-align: center;
background: var(--mli-accent);
color: #fff !important;
font-weight: 600;
font-size: 15px;
padding: 13px 18px;
border-radius: 12px;
text-decoration: none;
transition: background .15s ease, transform .1s ease;
box-shadow: 0 8px 20px -6px rgba(177, 89, 47, 0.5);
}
.mli-cta-reserver:hover { background: var(--mli-accent-soft); color: #fff !important; }
.mli-cta-reserver:active { transform: scale(0.98); } .mli-sticky-cta { display: none; }
@media (max-width: 900px) {
.mli-hero-side .mli-booking-card { display: none; }
.mli-sticky-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 999;
background: var(--mli-card-bg);
padding: 14px 18px;
padding-bottom: max(14px, env(safe-area-inset-bottom));
box-shadow: 0 -8px 24px -8px rgba(27,33,29,0.18);
} body.single-hebergement #ast-scroll-top {
bottom: 84px !important;
}
.mli-sticky-cta-price { font-size: 14.5px; color: var(--mli-ink-soft); white-space: nowrap; }
.mli-sticky-cta-price strong { font-family: "Belleza", serif; font-size: 19px; color: var(--mli-accent); }
.mli-sticky-cta a {
flex: 1;
max-width: 220px;
text-align: center;
background: var(--mli-accent);
color: #fff !important;
font-weight: 600;
font-size: 14.5px;
padding: 13px 18px;
border-radius: 10px;
text-decoration: none;
} .mli-fiche { padding-bottom: 40px; }
body.single-hebergement { padding-bottom: 90px; }
} .mli-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.mli-card-grid-archive { grid-template-columns: repeat(3, 1fr); margin-bottom: 40px; }
@media (max-width: 900px) { .mli-card-grid, .mli-card-grid-archive { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mli-card-grid, .mli-card-grid-archive { grid-template-columns: 1fr; } }
.mli-card {
display: flex;
flex-direction: column;
background: var(--mli-card-bg);
border-radius: 16px;
overflow: hidden;
box-shadow: var(--mli-shadow-sm);
border-top: 4px solid var(--mli-accent);
transition: transform .18s ease, box-shadow .18s ease;
}
.mli-card:hover { transform: translateY(-4px); box-shadow: var(--mli-shadow); }
.mli-card-media { display: block; text-decoration: none; padding: 10px 10px 0; }
.mli-card-image {
position: relative;
aspect-ratio: 4/3;
background: var(--mli-primary-bg);
overflow: hidden;
border-radius: 11px;
}
.mli-card-image img {
width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
transition: transform .35s ease;
}
.mli-card:hover .mli-card-image img { transform: scale(1.05); }
.mli-card-image::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
background: linear-gradient(0deg, rgba(10,14,11,0.65) 0%, rgba(10,14,11,0) 100%);
pointer-events: none;
}
.mli-card-badge {
position: absolute;
top: 12px; left: 12px;
z-index: 1;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
background: rgba(255,255,255,0.92);
color: var(--mli-ink);
padding: 6px 12px;
border-radius: 99px;
}
.mli-card-price-on-image {
position: absolute;
left: 14px; bottom: 12px;
z-index: 1;
color: #fff;
font-size: 13.5px;
font-weight: 600;
text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.mli-card-price-on-image strong { font-family: "Belleza", serif; font-size: 17px; font-weight: 400; }
.mli-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.mli-card-title-link { text-decoration: none; color: inherit; }
.mli-card-body h3 { font-family: "Belleza", serif; font-weight: 400; font-size: 18px; margin: 0 0 8px; line-height: 1.25; color: var(--mli-ink); }
.mli-card-title-link:hover h3 { color: var(--mli-primary-soft); }
.mli-card-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.mli-card-location, .mli-card-capacity {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12.5px; color: var(--mli-ink-faint);
}
.mli-card-location svg, .mli-card-capacity svg { color: var(--mli-accent); flex-shrink: 0; }
.mli-card-price { font-size: 13.5px; color: var(--mli-accent); font-weight: 600; margin: 8px 0 0; }
.mli-card-actions { display: flex; gap: 8px; margin-top: 14px; }
.mli-card-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
text-decoration: none;
font-size: 12.5px;
font-weight: 600;
padding: 10px 10px;
border-radius: 9px;
transition: background .15s ease;
}
.mli-card-btn svg { flex-shrink: 0; }
.mli-card-btn-secondary {
background: var(--mli-primary-bg);
color: var(--mli-primary) !important;
}
.mli-card-btn-secondary:hover { background: #e1e8da; color: var(--mli-primary) !important; }
.mli-card-btn-primary {
background: var(--mli-accent);
color: #fff !important;
}
.mli-card-btn-primary:hover { background: #8f4726; color: #fff !important; }
.mli-similar-more {
text-align: center;
margin: 24px 0 0;
}
.mli-similar-more a {
color: var(--mli-accent);
font-weight: 600;
font-size: 14.5px;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .15s ease;
}
.mli-similar-more a:hover { border-bottom-color: var(--mli-accent); }
.mli-similar { margin-top: 16px; border-top: 1px solid var(--mli-line); padding-top: 48px; } .mli-filter-bar {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
background: var(--mli-card-bg);
border: 1px solid var(--mli-line);
border-radius: 14px;
padding: 16px 20px;
margin-bottom: 36px;
box-shadow: var(--mli-shadow-sm);
}
.mli-filter-bar label {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--mli-primary);
}
.mli-filter-bar select {
flex: 1;
min-width: 180px;
padding: 11px 14px;
border-radius: 9px;
border: 1px solid var(--mli-line);
background: var(--mli-bg);
color: var(--mli-ink);
font-family: inherit;
font-size: 14px;
}
.mli-filter-btn {
padding: 11px 22px;
border-radius: 9px;
border: none;
background: var(--mli-accent);
color: #fff;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background .15s ease;
}
.mli-filter-btn:hover { background: var(--mli-accent-soft); } .mli-archive-header { margin-bottom: 36px; }
.mli-archive-header h1 {
font-family: "Belleza", serif;
font-weight: 400;
font-size: clamp(32px, 4.2vw, 48px);
color: var(--mli-ink);
margin: 0 0 12px;
}
.mli-archive-intro { color: var(--mli-ink-soft); line-height: 1.75; max-width: 70ch; font-size: 15.5px; }
.mli-empty-state {
background: var(--mli-card-bg);
border: 1px dashed var(--mli-line);
border-radius: 14px;
padding: 40px 32px;
text-align: center;
color: var(--mli-ink-soft);
}
.mli-empty-state p:first-child { font-size: 15.5px; margin: 0 0 10px; }
.mli-empty-state a { color: var(--mli-accent); font-weight: 600; text-decoration: none; }
.mli-empty-state a:hover { text-decoration: underline; }
.mli-pagination { display: flex; gap: 10px; justify-content: center; margin-top: 24px; }
.mli-pagination .page-numbers {
padding: 9px 15px;
border-radius: 9px;
text-decoration: none;
color: var(--mli-ink-soft);
border: 1px solid var(--mli-line);
font-size: 14px;
} .mli-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
background: rgba(20, 22, 18, 0.92);
}
.mli-lightbox.is-open { display: flex; }
html.mli-lightbox-locked { overflow: hidden; }
.mli-lightbox-img {
max-width: min(90vw, 1100px);
max-height: 86vh;
width: auto;
height: auto;
border-radius: 6px;
box-shadow: var(--mli-shadow);
}
.mli-lightbox-close,
.mli-lightbox-nav {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.12);
border: none;
color: #fff !important;
border-radius: 50%;
cursor: pointer;
transition: background .15s ease;
}
.mli-lightbox-close:hover,
.mli-lightbox-nav:hover { background: rgba(255, 255, 255, 0.24); }
.mli-lightbox-close svg,
.mli-lightbox-nav svg { flex-shrink: 0;
width: 18px !important;
height: 18px !important;
stroke: #ffffff !important;
fill: none !important;
pointer-events: none;
}
.mli-lightbox-close { top: 20px; right: 20px; width: 40px; height: 40px; }
.mli-lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.mli-lightbox-prev { left: 16px; }
.mli-lightbox-next { right: 16px; }
.mli-lightbox-counter {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 13px;
background: rgba(255, 255, 255, 0.12);
padding: 4px 12px;
border-radius: 999px;
}
@media (max-width: 600px) {
.mli-lightbox-nav { width: 40px; height: 40px; }
.mli-lightbox-prev { left: 6px; }
.mli-lightbox-next { right: 6px; }
} .mli-faq { display: flex; flex-direction: column; gap: 10px; }
.mli-faq-item {
background: var(--mli-card-bg);
border: 1px solid var(--mli-line);
border-radius: 10px;
padding: 14px 18px;
}
.mli-faq-item summary {
cursor: pointer;
font-weight: 600;
color: var(--mli-ink);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.mli-faq-item summary::-webkit-details-marker { display: none; }
.mli-faq-item summary::after {
content: "+";
font-size: 20px;
font-weight: 400;
color: var(--mli-ink-faint);
margin-left: 12px;
}
.mli-faq-item[open] summary::after { content: "–"; }
.mli-faq-item p { margin: 10px 0 0; color: var(--mli-ink-soft); line-height: 1.7; font-size: 14.5px; }
.mli-pagination .page-numbers.current { background: var(--mli-primary); color: #fff; border-color: var(--mli-primary); }