.pose.chalet { height: auto; }
.pose.chalet .scene { background: #15181B; }
.pose.chalet.en-film { height: 2400vh; }
.pose.chalet.en-fixe { height: auto; }
.pose.chalet.en-fixe .scene { position: relative; }
.pose.chalet .repli { object-fit: cover; }
.pose.chalet .maison-etapes.visuellement-cache { display: block; margin: 0; padding: 0; }
.pose.chalet .mention-runway { display: block; position: absolute; left: auto; right: 24px; bottom: calc(92px + var(--sous)); z-index: 3; margin: 0;
padding: 2px 8px; border-radius: 2px; background: rgba(14, 16, 18, .66); font: 400 11px/1.5 var(--titre); color: rgba(255, 255, 255, .92); }
.pose.chalet .bas-pose { display: block; left: auto; right: var(--marge); bottom: calc(128px + var(--sous)); z-index: 3;
width: min(340px, 30vw); padding: 14px 16px 15px; border-radius: 4px; background: rgba(14, 16, 18, .7); color: #F2EFE9; }
.pose.chalet:not(.en-film) .bas-pose { display: none; }
.pose.chalet .etapes-film { display: flex; gap: 4px; list-style: none; margin: 0 0 12px; padding: 0; }
.pose.chalet .etapes-film li { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .26); transition: background-color .3s; }
.pose.chalet .etapes-film li.passee { background: rgba(255, 255, 255, .8); }
.pose.chalet .etapes-film li.actuelle { background: #4FD0EE; }
.pose.chalet .compteur { display: block; color: #F2EFE9; }
.pose.chalet .compteur .nb { display: block; font: 500 12px/1.4 var(--titre); color: #9FE3F3; }
.pose.chalet .compteur .nb b { display: inline; font: inherit; letter-spacing: inherit; color: inherit; }
.pose.chalet .compteur #nom-etape { display: block; margin: 4px 0 0; font: 600 21px/1.15 var(--titre); color: #FFFFFF; }
.pose.chalet:not(.commence) .compteur #nom-etape { color: #FFFFFF; }
.pose.chalet .phrase-etape { display: block; margin: 6px 0 0; font: 400 14.5px/1.45 var(--titre); color: rgba(255, 255, 255, .88); }
.pose.chalet .scene::after { content: ""; position: absolute; inset: auto 0 0; height: 48%; z-index: 1; pointer-events: none;
background: linear-gradient(to top, rgba(14, 16, 18, .9) 0%, rgba(14, 16, 18, .84) 50%, rgba(14, 16, 18, 0) 100%);
-webkit-mask-image: linear-gradient(to right, #000 55%, rgba(0, 0, 0, .4) 85%); mask-image: linear-gradient(to right, #000 55%, rgba(0, 0, 0, .4) 85%); }
@media (min-width: 1024px) { .pose.chalet.en-fixe .scene::after { display: none; } }
.pose.chalet.faits-scene .faits-pose { width: min(calc(100vw - 2 * var(--marge) - min(340px, 30vw) - 40px), 1080px); }
@media (max-width: 1023px) {
.pose.chalet.en-film { height: 1800vh; }
.pose.chalet .tete { position: absolute; left: 0; right: 0; bottom: calc(var(--barre-bas) + 18px); z-index: 2; display: grid;
grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: none; margin: 0; padding: 0 var(--marge); color: #FFFFFF; }
.pose.chalet .tete .etiquette { display: none; }
.pose.chalet h1 { margin: 0; max-width: 13ch; color: #FFFFFF; font-size: clamp(30px, 8.8vw, 64px); }
.pose.chalet .sous { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .9); }
.pose.chalet .actions { display: none; }
.pose.chalet .actions-tel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; max-width: 520px; }
.pose.chalet .actions-tel .bouton { flex: 1 1 auto; min-height: 48px; padding: 0 8px; font-size: 14.5px; white-space: nowrap; }
.pose.chalet .actions-tel .bouton.creux { color: #FFFFFF; border-color: rgba(255, 255, 255, .85); background: rgba(14, 16, 18, .3); }
.pose.chalet.en-film .tete > div + div { transition: opacity .3s .3s, visibility 0s .3s; }
.pose.chalet.en-film.commence .tete > div + div { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.pose.chalet.faits-scene .faits-pose { left: var(--marge); right: var(--marge); width: auto; bottom: calc(var(--barre-bas) + 18px); transition: opacity .3s .3s, visibility 0s .3s; }
.pose.chalet.faits-scene:not(.commence) .faits-pose { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.pose.chalet.faits-scene .fait { padding: 0; border-top: 0; }
.pose.chalet.faits-scene .fait-grand { font-size: clamp(24px, 6.6vw, 34px); line-height: 1.05; }
.pose.chalet.faits-scene .fait-ligne { margin-top: 8px; max-width: 36ch; font-size: 15px; line-height: 1.4; font-weight: 500; }
.pose.chalet.faits-scene .fait-valider { margin-top: 8px; font-size: 12px; }
.pose.chalet .bas-pose { left: var(--marge); right: auto; top: calc(var(--bande-bas, 50vh) - 44px); bottom: auto; width: auto;
max-width: calc(100% - 2 * var(--marge) - 92px); padding: 5px 10px 6px; border-radius: 3px; }
.pose.chalet .etapes-film, .pose.chalet .phrase-etape { display: none; }
.pose.chalet .compteur { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.pose.chalet .compteur .nb { font-size: 11px; }
.pose.chalet .compteur #nom-etape { margin: 0; font-size: 15px; white-space: normal; }
.pose.chalet .mention-runway { right: 8px; bottom: auto; top: calc(var(--bande-bas, 50vh) - 30px); font-size: 10.5px; }
.pose.chalet .scene::after { content: ""; position: absolute; inset: auto 0 0; height: 72%; z-index: 1; pointer-events: none;
background: linear-gradient(to top, rgba(14, 16, 18, .92) 0%, rgba(14, 16, 18, .84) 45%, rgba(14, 16, 18, 0)); -webkit-mask-image: none; mask-image: none; }
.pose.chalet.en-bande .scene::after { top: calc(var(--bande-bas, 50vh) - 90px); height: auto;
background: linear-gradient(to bottom, rgba(14, 16, 18, 0), rgba(14, 16, 18, .86) 90px); }
}
@media (max-width: 1023px) and (max-height: 520px) {
.pose.chalet h1 { font-size: clamp(24px, 7.4vh, 34px); max-width: none; }
.pose.chalet .sous { display: none; }
.pose.chalet .actions-tel .bouton { min-height: 44px; }
.pose.chalet .tete { right: auto; max-width: 52vw; }
.pose.chalet.faits-scene .fait-grand { font-size: 22px; }
.pose.chalet.faits-scene .fait-ligne { margin-top: 4px; font-size: 13.5px; line-height: 1.35; }
.pose.chalet.faits-scene .fait-valider { margin-top: 6px; }
.pose.chalet.faits-scene .faits-pose { left: auto; right: var(--marge); width: min(42vw, 400px); bottom: calc(var(--barre-bas) + 16px); }
.pose.chalet .bas-pose { left: auto; right: calc(var(--marge) + 104px); top: calc(var(--haut-fixe) + var(--entete) + 10px); }
.pose.chalet .mention-runway { left: auto; right: var(--marge); top: calc(var(--haut-fixe) + var(--entete) + 17px); }
}
@media (min-width: 700px) and (max-width: 1023px) {
.pose.chalet.faits-scene .faits-pose { right: calc(var(--marge) + 190px); }
}
@media (min-width: 700px) and (max-width: 1023px) and (max-height: 520px) {
.pose.chalet.faits-scene .faits-pose { right: var(--marge); bottom: calc(var(--sous) + 96px); }
}
@media (max-width: 699px) and (max-height: 520px) {
.pose.chalet .tete { max-width: 50vw; }
.pose.chalet h1 { font-size: 22px; }
.pose.chalet .bas-pose { max-width: calc(50vw - var(--marge) - 112px); }
.pose.chalet .compteur { white-space: normal; }
.pose.chalet .compteur .nb { display: none; }
}
@media (min-width: 1024px) {
.pose.chalet:not(.pas-a-pas) .tete::before { content: none; }
.pose.chalet .tete > div { position: relative; }
.pose.chalet .tete > div::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
inset: -48px -110px -60px -110px;
background: linear-gradient(to bottom, rgba(14, 16, 18, 0) 0, rgba(14, 16, 18, .45) 48px, rgba(14, 16, 18, .45) calc(100% - 60px), rgba(14, 16, 18, 0) 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%); }
.pose.chalet .scene::after { inset: auto auto 0 0; width: calc(var(--marge) + min(1180px, 70vw)); height: calc(var(--sous) + 300px);
background: linear-gradient(to top, rgba(14, 16, 18, .76) 0%, rgba(14, 16, 18, .62) 55%, rgba(14, 16, 18, 0) 100%);
-webkit-mask-image: linear-gradient(to right, #000 0, #000 78%, transparent 100%);
mask-image: linear-gradient(to right, #000 0, #000 78%, transparent 100%); }
}
.pose.chalet .tete { transition: opacity .35s, visibility 0s .35s; }
.pose.chalet.en-film.commence .tete { opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.pose.chalet .scene::after { transition: opacity .35s; }
.pose.chalet.en-film.commence .scene::after { opacity: 0; }
.pose.chalet .compteur { display: none; }
.pose.chalet .etapes-film { display: flex; margin: 0; }
.pose.chalet .bas-pose { padding: 10px 12px; background: rgba(14, 16, 18, .55); }
@media (min-width: 1024px) {
.pose.chalet .scene::after { display: none; }
}
@media (max-width: 1023px) {
.pose.chalet .actions { display: flex; margin-top: 4px; }
.pose.chalet .actions .bouton { min-height: 48px; }
.pose.chalet .bas-pose { width: calc(100% - 2 * var(--marge) - 100px); max-width: 420px; top: calc(var(--bande-bas, 50vh) - 34px); padding: 8px 10px; }
}
@media (max-width: 1023px) and (max-height: 520px) {
.pose.chalet .bas-pose { width: min(36vw, 300px); }
}
.pose.chalet .histoire { position: relative; z-index: 3; display: grid; gap: 12px; margin: 0;
padding: clamp(36px, 5vw, 72px) var(--marge); background: #15181B; }
.pose.chalet .histoire-ligne { margin: 0; color: #FFFFFF; font-size: clamp(26px, 3vw, 44px); max-width: 24ch; }
.pose.chalet.en-film .histoire { --bas: calc(var(--sous) + 112px); position: absolute; left: var(--marge); bottom: var(--bas); display: block;
width: min(60vw, 820px); height: 0; padding: 0; background: none; pointer-events: none; transition: opacity .3s .35s; }
.pose.chalet.en-film.au-repos .histoire, .pose.chalet.en-film.fin-visible .histoire { opacity: 0; transition: opacity .2s; }
.pose.chalet.en-film .histoire::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
left: calc(-1 * var(--marge)); bottom: calc(-1 * var(--bas)); width: min(1150px, 92vw); height: min(560px, 70vh);
background: radial-gradient(farthest-side at 0 100%, rgba(14, 16, 18, .72) 0%, rgba(14, 16, 18, .68) 45%, rgba(14, 16, 18, .54) 66%,
rgba(14, 16, 18, .3) 82%, rgba(14, 16, 18, .1) 93%, rgba(14, 16, 18, 0) 100%); }
.pose.chalet.en-film .histoire-ligne { position: absolute; left: 0; bottom: 0; opacity: 0;
will-change: transform, opacity; font-size: clamp(34px, 3.4vw, 58px); max-width: 16ch; }
.pose.chalet .histoire-mots .mot { display: inline-block; vertical-align: top; overflow: hidden;
padding: .12em .04em .2em; margin: -.12em -.04em -.2em; }
.pose.chalet .histoire-mots .mot > span { display: inline-block; }
.pose.chalet.en-film .histoire-ligne { transform: translate3d(0, -14px, 0);
transition: opacity .32s cubic-bezier(.4, 0, .2, 1), transform .45s cubic-bezier(.4, 0, .2, 1); }
.pose.chalet.en-film .histoire-ligne.vue { opacity: 1; transform: none; transition: opacity .12s linear, transform 0s; }
.pose.chalet.en-film .histoire-mots .mot > span { will-change: transform; transform: translate3d(0, calc(100% + .32em), 0);
transition: transform 0s linear .5s; }
.pose.chalet.en-film .histoire-ligne.vue .mot > span { transform: none;
transition: transform .8s cubic-bezier(.16, 1, .3, 1) calc(var(--attente, 0s) + var(--i, 0) * 65ms); }
:root.doux .pose.chalet.en-film .histoire-ligne { transform: none; }
:root.doux .pose.chalet.en-film .histoire-mots .mot > span { transform: none; transition: none; }
@media (max-width: 1023px) {
.pose.chalet.en-film .histoire { --bas: calc(var(--barre-bas, 0px) + 28px); right: var(--marge); width: auto; }
.pose.chalet.en-film .histoire-ligne { font-size: clamp(28px, 7.6vw, 40px); max-width: 15ch; }
.pose.chalet.en-film .histoire::before { left: calc(-1 * var(--marge)); right: calc(-1 * var(--marge)); width: auto; height: calc(var(--bas) + 230px);
background: linear-gradient(to top, rgba(14, 16, 18, .78) 0%, rgba(14, 16, 18, .7) 55%, rgba(14, 16, 18, 0) 100%); }
}
@media (max-width: 1023px) and (max-height: 520px) {
.pose.chalet.en-film .histoire { --bas: calc(var(--barre-bas, 0px) + 16px); right: auto; width: min(56vw, 460px); }
.pose.chalet.en-film .histoire-ligne { font-size: 24px; max-width: none; }
.pose.chalet.en-film .histoire::before { right: auto; width: min(720px, 86vw); height: min(250px, 72vh);
background: radial-gradient(farthest-side at 0 100%, rgba(14, 16, 18, .82) 0%, rgba(14, 16, 18, .8) 50%, rgba(14, 16, 18, .6) 70%,
rgba(14, 16, 18, .3) 85%, rgba(14, 16, 18, 0) 100%); }
}
.pose.chalet .invitation { position: absolute; z-index: 4; left: 50%; bottom: calc(26px + var(--sous)); margin: 0;
display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; white-space: nowrap;
transform: translateX(-50%); font: 500 14px/1.3 var(--titre); letter-spacing: .02em; color: #FFFFFF;
transition: opacity .35s, visibility 0s; }
.pose.chalet .invitation::before { content: ""; position: absolute; z-index: -1; inset: -34px -96px -26px; pointer-events: none;
background: radial-gradient(closest-side, rgba(14, 16, 18, .62) 0%, rgba(14, 16, 18, .62) 55%, rgba(14, 16, 18, .4) 72%,
rgba(14, 16, 18, .16) 87%, rgba(14, 16, 18, 0) 100%); }
.pose.chalet.en-film:not(.au-repos) .invitation { opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.pose.chalet .invitation-trait { position: relative; display: block; width: 2px; height: 36px; overflow: hidden; border-radius: 1px;
background: rgba(255, 255, 255, .3); }
.pose.chalet .invitation-trait::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 45%; border-radius: 1px;
background: #FFFFFF; transform: translate3d(0, -100%, 0); animation: invitation-descend 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes invitation-descend {
0% { transform: translate3d(0, -100%, 0); }
75%, 100% { transform: translate3d(0, 225%, 0); }
}
.pose.chalet.en-film:not(.au-repos) .invitation-trait::after { animation-play-state: paused; }
:root.doux .pose.chalet .invitation-trait::after { animation: none; transform: translate3d(0, 60%, 0); }
@media (prefers-reduced-motion: reduce) { .pose.chalet .invitation-trait::after { animation: none; transform: translate3d(0, 60%, 0); } }
@media (max-width: 1023px) {
.pose.chalet .invitation { bottom: calc(var(--barre-bas, 0px) + 12px); gap: 6px; font-size: 13px; }
.pose.chalet .invitation-trait { height: 22px; }
.pose.chalet .scene .premier-texte:not(.fin-texte) { bottom: calc(var(--barre-bas, 0px) + 72px); }
}
@media (max-width: 1023px) and (max-height: 520px) {
.pose.chalet .invitation { left: auto; right: calc(var(--marge) + 6px); bottom: calc(var(--barre-bas, 0px) + 96px); transform: none; }
.pose.chalet .scene .premier-texte:not(.fin-texte) { bottom: calc(var(--barre-bas, 0px) + 16px); }
}
.pose.chalet .fin-bas { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 40%; pointer-events: none;
background: linear-gradient(to bottom, rgba(21, 24, 27, 0) 0%, rgba(21, 24, 27, .2) 22%, rgba(21, 24, 27, .52) 46%,
rgba(21, 24, 27, .82) 70%, rgba(21, 24, 27, .96) 86%, #15181B 100%); }
.pose.chalet.en-film .fin-bas { transform: translate3d(0, calc((1 - var(--fin-bas, 0)) * 101%), 0); will-change: transform; }
.pose.chalet.en-fixe .fin-bas { height: 24%; }
.pose.chalet:not(.en-film):not(.en-fixe) .fin-bas { display: none; }
.pose.chalet .scene .premier-texte { z-index: 4; }
:root:has(#pose.chalet) { --info: 0px; }
:root:has(#pose.chalet) .bande-info { display: none; }
.marius { transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s, visibility 0s; }
body.film-en-cours:has(#pose.en-film, #pose.en-fixe) .marius:not(.ouvert) {
transform: translate3d(0, calc(100% + 40px + var(--sous)), 0); visibility: hidden; pointer-events: none;
transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .3s, visibility 0s .4s; }
:root.doux .marius { transition: opacity .25s, visibility 0s; }
:root.doux body.film-en-cours:has(#pose.en-film, #pose.en-fixe) .marius:not(.ouvert) {
transform: none; opacity: 0; transition: opacity .25s, visibility 0s .25s; }
body.texte-large .marius:not(.ouvert) {
transform: translate3d(0, calc(100% + 40px + var(--sous)), 0); visibility: hidden; pointer-events: none;
transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .3s, visibility 0s .4s; }
:root.doux body.texte-large .marius:not(.ouvert) { transform: none; opacity: 0; transition: opacity .25s, visibility 0s .25s; }
@media (prefers-reduced-motion: reduce) {
.marius { transition: opacity .25s, visibility 0s; }
body.film-en-cours:has(#pose.en-film, #pose.en-fixe) .marius:not(.ouvert) {
transform: none; opacity: 0; transition: opacity .25s, visibility 0s .25s; }
}
.pose.chalet .premier-texte:not(.fin-texte) h1 { margin-bottom: 0; }
@media (max-width: 1023px) {
.pose.chalet.en-film .bas-pose { width: calc(100% - 2 * var(--marge)); }
.pose.chalet .invitation { bottom: calc(var(--sous) + 22px); }
.pose.chalet .scene .premier-texte:not(.fin-texte) { bottom: calc(var(--sous) + 22px + 45px + 28px); }
}
@media (max-width: 1023px) and (max-height: 520px) {
.pose.chalet.en-film .bas-pose { right: var(--marge); width: min(36vw, 300px); }
.pose.chalet .invitation { bottom: calc(var(--sous) + 16px); }
.pose.chalet .scene .premier-texte:not(.fin-texte) { bottom: calc(var(--sous) + 16px); }
}
.mention-film { position: relative; z-index: 2; margin: 0; height: 54px;
background: linear-gradient(to bottom, #15181B, var(--nuit, #121314)); }
@media (max-width: 1023px) and (max-height: 520px) {
.pose.chalet.au-repos .scene::after { height: calc(var(--sous) + 84px + 30%);
background: linear-gradient(to top, rgba(14, 16, 18, .92) 0, rgba(14, 16, 18, .88) calc(var(--sous) + 84px), rgba(14, 16, 18, 0) 100%); }
}