.loc-film { position: relative; padding-top: var(--haut-fixe); background: #15171A; }
.loc-film-cadre.photo-vivante { position: relative; width: 100%; height: min(56.25vw, calc(100svh - var(--haut-fixe) - 168px)); min-height: 420px;
margin: 0; overflow: hidden; background: #15171A; --pv-pos: 50% 42%; }
.loc-voile { position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(180deg, rgba(12, 13, 15, .55) 0, rgba(12, 13, 15, .18) 150px, rgba(12, 13, 15, 0) 240px),
linear-gradient(0deg, rgba(12, 13, 15, .80) 0, rgba(12, 13, 15, .62) 190px, rgba(12, 13, 15, .30) 300px, rgba(12, 13, 15, 0) 420px),
radial-gradient(120% 90% at 0% 100%, rgba(12, 13, 15, .45) 0, rgba(12, 13, 15, 0) 60%); }
.loc-film-texte { position: absolute; left: 0; right: 0; bottom: 92px; margin-inline: auto; z-index: 2; color: #FFFFFF; }
.loc-film-texte h1 { margin: 0; color: #FFFFFF; font-size: clamp(46px, 6.4vw, 104px); max-width: 9.5em; }
.loc-sous { margin: 14px 0 0; max-width: 34em; color: #FFFFFF; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; }
.loc-reserver { position: relative; z-index: 3; background: var(--fond); padding: 0 0 clamp(48px, 7vh, 88px); }
.loc-feuille { position: relative; margin-top: -56px; background: #FFFFFF; border: 1px solid #E1E5E8; box-shadow: 0 30px 70px rgba(30, 40, 50, .10);
padding: clamp(24px, 3vw, 44px) clamp(20px, 3.4vw, 52px) clamp(24px, 3vw, 40px); }
.loc-feuille-grille { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 80px); align-items: start; }
.loc-feuille .choix-dates-titre { font-size: clamp(34px, 3.4vw, 54px); margin: 0 0 14px; }
.loc-feuille .cal { border: 0; box-shadow: none; padding: 0; }
.loc-droite { padding-top: clamp(4px, 1vw, 14px); }
.loc-droite .cal-bilan { padding: 0 0 26px; border-bottom: 1px solid var(--trait); }
.loc-droite .cal-periode { margin: 8px 0 18px; }
.loc-droite .cal-demander { width: 100%; }
.loc-points { margin: 0; border-top: 0; }
.loc-points > div { grid-template-columns: 7.5em 1fr; }
.loc-points dd { font-size: 16px; }
.page-nacelles .location { padding: clamp(56px, 8vh, 96px) 0; }
.page-nacelles .questions-location { padding: clamp(56px, 9vh, 110px) 0; background: var(--fond); }
.page-nacelles .questions-location .cadre { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); }
.page-nacelles .questions-location .cadre > .etiquette, .page-nacelles .questions-location h2 { grid-column: 1 / -1; }
.page-nacelles .questions-location h2 { margin: 12px 0 clamp(26px, 4vh, 40px); font-size: clamp(34px, 4vw, 60px); }
.page-nacelles .reponse-rapide { margin: 0; padding: 18px 0 20px; border-top: 1px solid var(--trait); color: var(--doux); font-size: 16px; line-height: 1.55; }
.page-nacelles .reponse-rapide b { display: block; margin-bottom: 6px; color: var(--texte); font: 600 18px/1.4 var(--titre); }
@media (min-width: 1024px) { .loc-droite { padding-right: clamp(0px, 7vw, 110px); } }
@media (max-width: 1023px) {
.loc-feuille-grille { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.page-nacelles .questions-location .cadre { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
.loc-film-cadre.photo-vivante { height: min(118vw, calc(100svh - var(--haut-fixe) - 300px)); min-height: 360px; --pv-pos: 50% 40%; }
.loc-film-texte { bottom: 22px; }
.loc-film-texte h1 { font-size: 44px; }
.loc-sous { margin-top: 8px; font-size: 16px; }
.loc-reserver .cadre { width: calc(100% - 2 * var(--marge)); }
.loc-feuille { margin: 0 calc(-1 * var(--marge)); border-left: 0; border-right: 0; box-shadow: none; padding: 22px var(--marge) 26px; }
.loc-feuille .choix-dates-titre { font-size: 32px; margin-bottom: 6px; }
.loc-points > div { grid-template-columns: 6.5em 1fr; gap: 12px; }
}
@media (min-width: 700px) {
.page-nacelles { --sous-bulle: max(0px, calc(220px - (100vw - min(var(--large), 100vw - 2 * var(--marge))) / 2)); }
.page-nacelles .location-coord, .page-nacelles .location-form,
.page-nacelles .questions-location .cadre { padding-right: var(--sous-bulle); }
}
.loc-machine { padding: 0; overflow: hidden; }
.lm { --gout: clamp(40px, 5vw, 96px); --vig: clamp(150px, min(14vw, 22vh), 236px); --vy: clamp(110px, 28vh, 300px);
display: grid; grid-template-columns: minmax(0, 46vw) minmax(0, 1fr); column-gap: var(--gout);
grid-template-areas: "photo tete" "photo offre" "photo faits"; grid-template-rows: auto auto 1fr;
padding-right: calc(max(var(--marge), (100vw - var(--large)) / 2) + var(--sous-bulle, 0px)); }
.lm > * { min-width: 0; }
.lm-grande { grid-area: photo; position: relative; margin: 0; min-height: min(calc(100svh - var(--haut-fixe, 0px)), 980px); border-radius: 0; }
.lm-grande img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.lm-grande .etiq-photo { position: absolute; z-index: 1; top: 16px; left: 16px; padding: 4px 10px; border-radius: 999px;
background: #0E0F10; color: #FFFFFF; font: 600 12px/1.3 var(--titre); }
.lm-grande figcaption { position: absolute; z-index: 1; left: 16px; right: auto; bottom: 16px; max-width: calc(100% - 32px); padding: 9px 14px;
border-left: 3px solid var(--cyan); background: #1B1C1D; color: #FFFFFF; font-size: 15px; line-height: 1.4; }
.lm-tete { grid-area: tete; padding-top: clamp(56px, 9vh, 104px); }
.lm-tete h2 { margin: 10px 0 0; color: #FFFFFF; font-size: clamp(56px, 7.2vw, 124px); line-height: .9; letter-spacing: -.01em; }
.loc-machine-phrase { margin: 16px 0 0; color: #F1F3F4; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; }
.lm-offre { grid-area: offre; position: relative; margin-top: calc(clamp(26px, 4vh, 40px) + 30px); border: 1px solid rgba(255, 255, 255, .16); border-radius: 0 3px 3px 3px;
background: #2C2D2E; }
.lm-onglet { position: absolute; left: -1px; bottom: 100%; margin: 0; padding: 7px 14px 6px; border: 1px solid rgba(255, 255, 255, .16); border-bottom: 0;
border-radius: 3px 3px 0 0; background: #2C2D2E; color: #9FE3F3; font: 600 12px/1.3 var(--titre); letter-spacing: .06em; text-transform: uppercase; }
.loc-machine-prix { margin: 0; padding: 0; list-style: none; }
.loc-machine-prix li { display: flex; align-items: baseline; gap: 14px; padding: 16px 22px; border-top: 1px solid rgba(255, 255, 255, .12); }
.loc-machine-prix li:first-child { border-top: 0; }
.loc-machine-prix li::after { content: ""; order: 1; flex: 1; min-width: 24px; border-bottom: 1px dotted rgba(255, 255, 255, .34); transform: translateY(-.3em); }
.loc-machine-prix span { order: 0; color: #D9D4CC; font: 500 16px/1.3 var(--titre); letter-spacing: .02em; }
.loc-machine-prix b { order: 2; color: #FFFFFF; font: 600 clamp(32px, 3vw, 50px)/1 var(--affiche); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.lm-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 16px 22px;
border-top: 1px solid rgba(255, 255, 255, .16); background: #26333A; }
.loc-machine-taxes { margin: 0; color: #D9D4CC; font-size: 15px; }
.lm-reserver span { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.lm-reserver:hover span { transform: translateX(4px); }
.lm-faits { grid-area: faits; margin-top: clamp(22px, 3vh, 34px); padding-bottom: clamp(56px, 9vh, 104px); }
.lm-faits li { border-top-color: rgba(255, 255, 255, .14); color: #E4E0D9; font-size: 16px; line-height: 1.5; }
.lm-faits li:first-child { border-top: 0; }
.lm-faits li::before { border-color: #9FE3F3; }
.lm-v { grid-area: photo; z-index: 2; align-self: start; justify-self: end; width: var(--vig); margin: 0 calc(-1 * var(--gout) / 2) 0 0;
border: 6px solid var(--anthracite); background: var(--anthracite); }
.lm-v img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.lm-v figcaption { position: static; background: none; padding: 7px 4px 2px; color: #E4E0D9; font-size: 13px; line-height: 1.35; }
.lm-v1 { margin-top: var(--vy); transform: translateX(calc(-1 * var(--vig) * .18)); }
.lm-v2 { margin-top: calc(var(--vy) + var(--vig) * .75 + 80px); }
@media (max-width: 899px) {
.lm { width: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; padding: 0 var(--marge);
grid-template-areas: "photo photo" "v1 v2" "tete tete" "offre offre" "faits faits"; grid-template-rows: none; }
.lm-grande { min-height: 0; aspect-ratio: 4 / 5; margin: 0 calc(-1 * var(--marge)); }
.lm { padding-right: calc(var(--marge) + var(--sous-bulle, 0px)); }
.lm-grande { margin-right: calc(-1 * (var(--marge) + var(--sous-bulle, 0px))); }
.lm-grande figcaption { left: var(--marge); bottom: 72px; max-width: calc(100% - 2 * var(--marge)); }
.lm-v { width: auto; margin: -56px 0 0; transform: none; align-self: start; border: 5px solid var(--anthracite); }
.lm-v1 { grid-area: v1; } .lm-v2 { grid-area: v2; }
.lm-tete { padding: 36px 0 0; display: block; }
.lm-offre { display: block; margin: 56px 0 0; }
.lm-faits { padding: 0 0 64px; }
}
@media (max-width: 699px) {
.loc-machine-prix li { padding: 14px 16px; }
.lm-pied { padding: 14px 16px; }
.lm-reserver { flex: 1 1 100%; }
.lm-v figcaption { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .lm-reserver span { transition: none; } }