/* ========================================================================== Pages de contenu refaites (Privatisation, puis Polarfront, l'agence…) — préfixe lb-p-. Complète accueil.css (bases lb-a-*) et destination.css (FAQ, appel à l'action) ; animations : latitude-blanche.js. ========================================================================== */ /* html, body (overflow-x: hidden) et #wrap_all (overflow: hidden) deviennent des zones de défilement, ce qui empêche tout effet « sticky » (récit au défilement, titres de FAQ) : clip rogne de la même façon sans en créer. */ html, html body { overflow-x: clip !important; overflow-y: visible !important; } html body #wrap_all { overflow: clip !important; } /* ---------- Hero ---------- */ #top .lb-p-hero.avia-section { min-height: 780px; } /* ---------- Le yachting polaire à la française + compteur ---------- */ #top .lb-p-intro.avia-section { position: relative; overflow: hidden; padding: 120px 0 110px; background: radial-gradient(circle at 10% 92%, rgba(135, 188, 196, .16), transparent 34%), #f3f5f5; } #top .lb-p-intro .lb-a-filigrane { top: -20px; } #top .lb-p-intro-grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(240px, .7fr); align-items: center; gap: 60px 100px; } #top .lb-p-intro-lead { margin: 0 0 38px; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(28px, 3.1vw, 46px); line-height: 1.2; color: #112534; } #top .lb-p-intro-lead em, #top .lb-p-citation em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; color: #5f9098; } #top .lb-p-intro-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; padding-top: 30px; border-top: 1px solid rgba(17, 37, 52, .14); } #top .lb-p-intro-colonnes p { font-size: 15px; line-height: 1.8; color: #56656c; } #top .lb-p-intro-colonnes strong { font-weight: 600; color: #112534; } #top .lb-p-compteur { margin: 0; text-align: center; } #top .lb-p-compteur-cercle { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(270px, 100%); aspect-ratio: 1; margin: 0 auto 26px; } #top .lb-p-compteur-cercle svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; transform: rotate(-90deg); overflow: visible; } #top .lb-p-compteur-cercle circle { stroke: rgba(17, 37, 52, .12); stroke-width: 1; } #top .lb-p-compteur-cercle .lb-p-compteur-trace { stroke: #112534; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .1; } .lb-js #top .lb-p-compteur.lb-a-revele .lb-p-compteur-trace { stroke-dashoffset: 1; } .lb-js #top .lb-p-compteur.lb-a-revele.is-visible .lb-p-compteur-trace { stroke-dashoffset: .1; transition: stroke-dashoffset 2.4s cubic-bezier(.45, 0, .2, 1) .2s; } #top .lb-p-compteur b { position: relative; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(76px, 7vw, 104px); line-height: 1; color: #112534; font-variant-numeric: tabular-nums; } #top .lb-p-compteur-cercle span { position: relative; margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: #5f9098; } #top .lb-p-compteur figcaption { max-width: 270px; margin: 0 auto; font-size: 14px; line-height: 1.7; color: #65757b; } /* ---------- Tout commence par vos envies (panneau interactif) ---------- */ #top .lb-p-envies-section.avia-section { position: relative; overflow: hidden; padding: 110px 0 120px; background: radial-gradient(circle at 88% 8%, rgba(168, 212, 216, .1), transparent 34%), #0d1d29; } #top .lb-p-envies-section .lb-a-surtitre, #top .lb-p-echelle .lb-a-surtitre, #top .lb-p-projet .lb-a-surtitre { color: #a8d4d8; } #top .lb-p-envies-section .lb-a-surtitre::before, #top .lb-p-echelle .lb-a-surtitre::before, #top .lb-p-projet .lb-a-surtitre::before { background: #a8d4d8; } #top .lb-p-envies-section .lb-a-h2 { color: #ffffff; } #top .lb-p-envies-section .lb-a-h2 span { color: #a8d4d8; } #top .lb-p-inclus-titre .lb-a-h2 span { color: #6f9fae; } #top .lb-p-envies-entete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 30px 90px; margin-bottom: 56px; } #top .lb-p-envies-chapo { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .18); } #top .lb-p-envies-chapo p { font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, .72); } #top .lb-p-envies-chapo p + p { margin-top: 12px; } #top .lb-p-envies-chapo strong { font-weight: 600; color: #ffffff; } #top .lb-p-envies { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-height: 580px; background: #112534; box-shadow: 0 40px 90px rgba(0, 0, 0, .35); } #top .lb-p-envies-visuel { position: relative; min-height: 460px; overflow: hidden; background: #081621; } #top .lb-p-envies-visuel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(8, 22, 33, .72) 0%, rgba(8, 22, 33, 0) 42%); pointer-events: none; } #top .lb-p-envies-photo { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; } #top .lb-p-envies-photo.is-active { opacity: 1; } #top .lb-p-envies-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 8s cubic-bezier(.2, .6, .3, 1); } #top .lb-p-envies-photo.is-active img { transform: scale(1); } #top .lb-p-envies-mot { position: absolute; left: 36px; bottom: 30px; z-index: 2; font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(34px, 3.4vw, 52px); line-height: 1; color: #ffffff; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-envies-mot.is-change { opacity: 0; transform: translateY(14px); } #top .lb-p-envies-liste { display: flex; flex-direction: column; justify-content: center; padding: 14px 0; } #top .lb-p-envie { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 0 22px; width: 100%; margin: 0; padding: 26px 40px 26px 38px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 0; background: transparent; color: rgba(255, 255, 255, .62); font: inherit; text-align: left; cursor: pointer; transition: background .4s ease, color .4s ease; } #top .lb-p-envie:last-child { border-bottom: 0; } #top .lb-p-envie:hover, #top .lb-p-envie:focus-visible, #top .lb-p-envie.is-active { color: #ffffff; } #top .lb-p-envie.is-active { background: rgba(255, 255, 255, .04); } #top .lb-p-envie:focus-visible { outline: 1px solid #a8d4d8; outline-offset: -1px; } #top .lb-p-envie-icone { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; transition: background .4s ease, border-color .4s ease, color .4s ease; } #top .lb-p-envie-icone svg, #top .lb-p-inclus-icone svg, #top .lb-p-etape-icone svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } #top .lb-p-envie-icone svg { width: 32px; height: 32px; } #top .lb-p-envie-icone path, #top .lb-p-inclus-icone path, #top .lb-p-etape-icone path { stroke-dasharray: 1; stroke-dashoffset: 0; } #top .lb-p-envie.is-active .lb-p-envie-icone { border-color: #a8d4d8; background: #a8d4d8; color: #112534; } #top .lb-p-envie.is-active .lb-p-envie-icone path { animation: lb-trace 1.2s cubic-bezier(.45, 0, .2, 1); } #top .lb-p-envie small { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: #a8d4d8; } #top .lb-p-envie strong { display: block; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 25px; line-height: 1.15; text-transform: uppercase; color: inherit; } #top .lb-p-envie-plus { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2, .8, .2, 1), margin .55s ease; } #top .lb-p-envie-plus > span { min-height: 0; overflow: hidden; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .76); } #top .lb-p-envie.is-active .lb-p-envie-plus { grid-template-rows: 1fr; margin-top: 10px; } #top .lb-p-envie-barre { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: rgba(255, 255, 255, .06); } #top .lb-p-envie-barre::after { content: ""; position: absolute; inset: 0; background: #a8d4d8; transform: scaleY(0); transform-origin: top; } #top .lb-p-envie.is-active .lb-p-envie-barre::after { transform: scaleY(1); } #top .lb-p-envies.is-auto .lb-p-envie.is-active .lb-p-envie-barre::after { animation: lb-p-progression var(--lb-duree, 6.5s) linear both; } @keyframes lb-p-progression { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* ---------- Bandeau immersif (photo fixe, texte à droite pour laisser voir le navire) ---------- */ #top .lb-p-echelle.avia-section { min-height: 660px; border: 0; } #top .lb-p-echelle .av-section-color-overlay { opacity: 1 !important; background: linear-gradient(270deg, rgba(8, 22, 33, .9) 0%, rgba(8, 22, 33, .62) 40%, rgba(8, 22, 33, .05) 72%) !important; } #top .lb-p-echelle .av-section-color-overlay-wrap { display: flex; align-items: center; min-height: inherit; } #top .lb-p-echelle .container { width: 100%; } #top .lb-p-echelle-contenu { max-width: 540px; margin-left: auto; padding: 120px 0; color: #ffffff; } #top .lb-p-echelle h2 { margin: 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; text-transform: uppercase; color: #ffffff; } #top .lb-p-echelle h2 span { color: #a8d4d8; } #top .lb-p-echelle-contenu > p { margin-top: 24px; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .84); } /* ---------- Ce qui est inclus ---------- */ #top .lb-p-inclus.avia-section { padding: 110px 0; background: #f3f5f5; } #top .lb-p-inclus-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); align-items: start; gap: 50px 90px; } #top .lb-p-inclus-titre { position: sticky; top: 140px; } #top .lb-p-inclus-titre > p { max-width: 360px; margin-top: 20px; font-size: 15px; line-height: 1.75; color: #56656c; } #top .lb-p-inclus-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid #dfe5e6; list-style: none; } #top .lb-p-inclus-liste li { position: relative; display: flex; align-items: flex-start; gap: 20px; margin: 0; padding: 30px 28px 30px 0; border-bottom: 1px solid #dfe5e6; } #top .lb-p-inclus-liste li:nth-child(odd) { padding-right: 34px; border-right: 1px solid #dfe5e6; } #top .lb-p-inclus-liste li:nth-child(even) { padding-left: 34px; } #top .lb-p-inclus-liste li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #112534; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-inclus-liste li:hover::after { transform: scaleX(1); } #top .lb-p-inclus-icone { flex: 0 0 54px; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: #ffffff; color: #112534; box-shadow: 0 10px 24px rgba(17, 37, 52, .08); transition: background .35s ease, color .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); } #top .lb-p-inclus-icone svg { width: 30px; height: 30px; } .lb-js #top .lb-p-inclus-liste li.lb-a-revele .lb-p-inclus-icone path { stroke-dashoffset: 1; } .lb-js #top .lb-p-inclus-liste li.lb-a-revele.is-visible .lb-p-inclus-icone path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .2, 1); transition-delay: calc(var(--lb-delai, 0s) + .3s); } #top .lb-p-inclus-liste li:hover .lb-p-inclus-icone { background: #112534; color: #a8d4d8; transform: rotate(-8deg) scale(1.06); } #top .lb-p-inclus-liste li:hover .lb-p-inclus-icone path { animation: lb-trace 1.1s cubic-bezier(.45, 0, .2, 1); } #top .lb-p-inclus-liste h3 { margin: 4px 0 6px; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 19px; line-height: 1.25; color: #112534; } #top .lb-p-inclus-liste p { font-size: 14px; line-height: 1.65; color: #65757b; } /* ---------- La vie à bord en mosaïque ---------- */ #top .lb-p-bord.avia-section { padding: 110px 0; background: #ffffff; } #top .lb-p-bord-mosaique { display: grid; grid-template-columns: 1.6fr .9fr 1fr 1fr; grid-template-rows: 250px 250px; gap: 12px; } #top .lb-p-bord-photo { position: relative; margin: 0; overflow: hidden; background: #112534; } #top .lb-p-bord-photo:nth-child(1), #top .lb-p-bord-photo:nth-child(2) { grid-row: span 2; } #top .lb-p-bord-photo:nth-child(5) { grid-column: span 2; } #top .lb-p-bord-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-bord-photo:hover img { transform: scale(1.06); } #top .lb-p-bord-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 22, 33, .7) 0%, rgba(8, 22, 33, 0) 45%); transition: opacity .5s ease; pointer-events: none; } #top .lb-p-bord-photo figcaption { position: absolute; right: 20px; bottom: 18px; left: 22px; z-index: 2; font-family: 'Lato', sans-serif; font-size: 19px; line-height: 1.2; color: #ffffff; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-bord-photo figcaption small { display: block; margin-bottom: 6px; font-family: 'Work Sans', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #a8d4d8; } #top .lb-p-bord-photo:hover figcaption { transform: translateY(-6px); } #top .lb-p-bord-photo:not(:nth-child(1)) .lb-ancre { --lb-ancre-l: 26px; } #top .lb-p-bord-liens { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 38px; } /* ---------- Votre projet : citation, occasions, du projet au départ ---------- */ #top .lb-p-projet.avia-section { position: relative; overflow: hidden; padding: 120px 0 110px; background: radial-gradient(circle at 92% 100%, rgba(168, 212, 216, .1), transparent 36%), #112534; color: #ffffff; } #top .lb-p-projet-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 50px 90px; } #top .lb-p-citation { margin: 0; padding: 0; border: 0; background: transparent; } #top .lb-p-citation p { position: relative; margin: 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.12; color: #ffffff; } #top .lb-p-citation p::before { content: "\201C"; position: absolute; top: -.62em; left: -.06em; font-family: 'Fraunces', serif; font-size: 2.4em; line-height: 1; color: rgba(168, 212, 216, .22); } #top .lb-p-citation em { color: #a8d4d8; } #top .lb-p-projet-texte > p { font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, .78); } #top .lb-p-occasions { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; } #top .lb-p-occasions li { margin: 0; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; font-size: 13px; color: #ffffff; transition: background .25s ease, color .25s ease, border-color .25s ease; } #top .lb-p-occasions li:hover { border-color: #a8d4d8; background: #a8d4d8; color: #112534; } #top .lb-p-etapes { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 96px 0 0; padding: 0; list-style: none; } #top .lb-p-etapes::before { content: ""; position: absolute; top: 32px; left: calc((100% - 80px) / 6); right: calc((100% - 80px) / 6); height: 1px; background: rgba(168, 212, 216, .5); transform-origin: left; } .lb-js #top .lb-p-etapes.lb-a-revele::before { transform: scaleX(0); } .lb-js #top .lb-p-etapes.lb-a-revele.is-visible::before { transform: scaleX(1); transition: transform 1.8s cubic-bezier(.45, 0, .2, 1) .3s; } #top .lb-p-etapes li { position: relative; margin: 0; text-align: center; } .lb-js #top .lb-p-etapes.lb-a-revele li { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); } .lb-js #top .lb-p-etapes.lb-a-revele.is-visible li { opacity: 1; transform: none; } .lb-js #top .lb-p-etapes.lb-a-revele.is-visible li:nth-child(2) { transition-delay: .7s; } .lb-js #top .lb-p-etapes.lb-a-revele.is-visible li:nth-child(3) { transition-delay: 1.4s; } #top .lb-p-etape-icone { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 26px; border: 1px solid rgba(168, 212, 216, .55); border-radius: 50%; background: #112534; color: #ffffff; transition: background .4s ease, color .4s ease; } #top .lb-p-etape-icone svg { width: 34px; height: 34px; } #top .lb-p-etapes li:hover .lb-p-etape-icone { background: #a8d4d8; color: #112534; } #top .lb-p-etapes li:hover .lb-p-etape-icone path { animation: lb-trace 1.1s cubic-bezier(.45, 0, .2, 1); } #top .lb-p-etapes h3 { margin: 0 0 12px; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 23px; line-height: 1.2; text-transform: uppercase; color: #ffffff; } #top .lb-p-etapes p { max-width: 340px; margin: 0 auto; font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, .72); } /* ---------- Demande de privatisation ---------- */ #top .lb-p-cta-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 26px; font-size: 14px; color: rgba(255, 255, 255, .7); } #top .lb-p-cta-contacts a { color: #ffffff; border-bottom: 1px solid rgba(255, 255, 255, .3); transition: border-color .25s ease, color .25s ease; } #top .lb-p-cta-contacts a:hover { color: #a8d4d8; border-color: #a8d4d8; } /* ========================================================================== Page Polarfront (le navire) — préfixe lb-p-pf- ========================================================================== */ /* Repères du hero (mêmes règles que lb-v2.css du plugin, qui n'est pas chargé sur toutes les pages) */ #top .lb-p-hero .lb-chiffres { display: flex; flex-wrap: wrap; margin: 0; } #top .lb-p-hero .lb-chiffres > div { margin: 0 28px 12px 0; padding: 4px 28px 4px 0; border-right: 1px solid rgba(255, 255, 255, .25); } #top .lb-p-hero .lb-chiffres > div:last-child { margin-right: 0; padding-right: 0; border-right: 0; } #top .lb-p-hero .lb-chiffres dt { margin: 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 26px; line-height: 1.1; color: #ffffff; } #top .lb-p-hero .lb-chiffres dd { margin: 4px 0 0; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255, 255, 255, .72); } /* Hero centré : le titre dans le ciel, les boutons et repères sur l'eau, le navire entre les deux */ #top .lb-p-hero--centre.avia-section { min-height: 820px; } #top .lb-p-hero--centre .av-section-color-overlay { background: linear-gradient(180deg, rgba(8, 22, 33, .66) 0%, rgba(8, 22, 33, .2) 34%, rgba(8, 22, 33, 0) 50%, rgba(8, 22, 33, .45) 68%, rgba(8, 22, 33, .9) 100%) !important; } #top .lb-p-hero--centre .av-section-color-overlay-wrap { align-items: stretch; } #top .lb-p-hero--centre .container, #top .lb-p-hero--centre .template-page, #top .lb-p-hero--centre .post-entry, #top .lb-p-hero--centre .entry-content-wrapper { display: flex; flex: 1 1 auto; flex-direction: column; } #top .lb-p-hero--centre .entry-content-wrapper { justify-content: space-between; } #top .lb-p-hero--centre .container::before, #top .lb-p-hero--centre .container::after, #top .lb-p-hero--centre .entry-content-wrapper::before, #top .lb-p-hero--centre .entry-content-wrapper::after { display: none; } /* clearfix d'Enfold : sinon ils prennent le haut et le bas */ #top .lb-p-hero--centre .lb-a-hero-contenu { padding: 46px 0 0; text-align: center; } #top .lb-p-hero--centre .lb-a-hero-surtitre { justify-content: center; } #top .lb-p-hero--centre .lb-a-hero-surtitre::after { content: ""; width: 42px; height: 1px; background: #a8d4d8; } #top .lb-p-hero--centre h1 { max-width: none; font-size: clamp(40px, 11vw, 176px); line-height: .9; letter-spacing: .04em; text-shadow: 0 10px 40px rgba(8, 22, 33, .35); } #top .lb-p-hero--centre h1 span { animation: lb-p-titre 1.6s cubic-bezier(.2, .75, .2, 1) .1s both; } #top .lb-p-hero-sous { margin: 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(18px, 1.8vw, 26px); letter-spacing: .5px; color: rgba(255, 255, 255, .9); animation: lb-a-arrivee 1.1s cubic-bezier(.2, .75, .2, 1) .6s both; } #top .lb-p-hero--centre .lb-a-hero-boutons { justify-content: center; margin-top: 26px; } #top .lb-p-hero-bas { padding: 0 0 42px; text-align: center; } #top .lb-p-hero-bas .lb-chiffres { margin-top: 38px; animation: lb-a-arrivee 1.1s cubic-bezier(.2, .75, .2, 1) .85s both; } #top .lb-p-hero--centre .lb-chiffres { justify-content: center; } @keyframes lb-p-titre { from { opacity: 0; letter-spacing: .32em; filter: blur(6px); } to { opacity: 1; letter-spacing: .04em; filter: blur(0); } } /* Explorer autrement */ #top .lb-p-pf-intro.avia-section { position: relative; overflow: hidden; padding: 120px 0 110px; background: radial-gradient(circle at 92% 90%, rgba(135, 188, 196, .16), transparent 34%), #f3f5f5; } #top .lb-p-pf-intro .lb-a-filigrane { top: -20px; } #top .lb-p-pf-intro-grille { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); align-items: start; gap: 50px 90px; } #top .lb-p-pf-intro-titre .lb-a-h2 span { color: #6f9fae; } #top .lb-p-pf-intro-titre .lb-a-pf { margin-top: 40px; } #top .lb-p-pf-intro-texte .lb-a-lead em { font-family: 'Fraunces', serif; font-style: italic; color: #5f9098; } #top .lb-p-pf-intro-texte p:not(.lb-a-lead) { font-size: 15px; line-height: 1.85; color: #56656c; } #top .lb-p-pf-intro-texte p:not(.lb-a-lead) + p { margin-top: 16px; } /* Fiche technique sur la vue du ciel : les cotes se tracent */ #top .lb-p-pf-fiche.avia-section { padding: 110px 0; background: radial-gradient(circle at 18% 30%, rgba(168, 212, 216, .09), transparent 42%), #0d1d29; color: #ffffff; } #top .lb-p-pf-fiche .lb-a-surtitre, #top .lb-p-pf-autrement .lb-a-surtitre { color: #a8d4d8; } #top .lb-p-pf-fiche .lb-a-surtitre::before, #top .lb-p-pf-autrement .lb-a-surtitre::before { background: #a8d4d8; } #top .lb-p-pf-fiche .lb-a-h2 { color: #ffffff; } #top .lb-p-pf-fiche .lb-a-h2 span { color: #a8d4d8; } #top .lb-p-pf-fiche-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); align-items: center; gap: 50px 90px; } #top .lb-p-pf-plan { margin: 0; } #top .lb-p-pf-plan-cadre { position: relative; max-width: 440px; margin: 0 auto; box-shadow: 0 40px 90px rgba(0, 0, 0, .45); } #top .lb-p-pf-plan-cadre img { display: block; width: 100%; height: auto; } #top .lb-p-pf-cotes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } #top .lb-p-pf-cotes path { fill: none; stroke: #a8d4d8; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; } #top .lb-p-pf-cotes .lb-p-pf-rappel { stroke: rgba(168, 212, 216, .55); stroke-width: 1.4; } #top .lb-p-pf-cotes text { fill: #ffffff; font-family: 'Lato', sans-serif; font-size: 32px; letter-spacing: 1px; } .lb-js #top .lb-p-pf-plan.lb-a-revele .lb-p-pf-cotes path { stroke-dashoffset: 1; } .lb-js #top .lb-p-pf-plan.lb-a-revele .lb-p-pf-cotes text { opacity: 0; } .lb-js #top .lb-p-pf-plan.lb-a-revele.is-visible .lb-p-pf-cotes path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .2, 1) .5s; } .lb-js #top .lb-p-pf-plan.lb-a-revele.is-visible .lb-p-pf-cote--large path { transition-delay: 1.7s; } .lb-js #top .lb-p-pf-plan.lb-a-revele.is-visible .lb-p-pf-cotes text { opacity: 1; transition: opacity .7s ease 1.9s; } .lb-js #top .lb-p-pf-plan.lb-a-revele.is-visible .lb-p-pf-cote--large text { transition-delay: 3s; } #top .lb-p-pf-plan figcaption { margin-top: 18px; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-align: center; text-transform: uppercase; color: rgba(255, 255, 255, .5); } #top .lb-p-pf-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; margin: 40px 0 0; } #top .lb-p-pf-specs > div { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 17px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); } #top .lb-p-pf-specs > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #a8d4d8; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-pf-specs > div:hover::after { transform: scaleX(1); } #top .lb-p-pf-specs dt { font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255, 255, 255, .56); } #top .lb-p-pf-specs dd { margin: 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 21px; text-align: right; color: #ffffff; } #top .lb-p-pf-specs dd b { font-weight: 300; color: inherit; font-variant-numeric: tabular-nums; } /* Position en direct */ #top .lb-p-pf-position.avia-section { padding: 110px 0; background: #f3f5f5; } #top .lb-p-pf-position-grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 50px 80px; } #top .lb-p-pf-position-texte .lb-a-h2 span { color: #6f9fae; } #top .lb-p-pf-position-texte p { max-width: 460px; margin: 22px 0 30px; font-size: 15px; line-height: 1.8; color: #56656c; } #top .lb-p-pf-position-texte small { display: block; margin-top: 16px; font-size: 11px; letter-spacing: .4px; color: #8a979c; } #top .lb-p-pf-radar { position: relative; display: block; overflow: hidden; box-shadow: 0 30px 70px rgba(17, 37, 52, .2); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; } #top .lb-p-pf-radar:hover { transform: translateY(-4px); box-shadow: 0 40px 90px rgba(17, 37, 52, .28); } #top .lb-p-pf-radar svg { display: block; width: 100%; height: auto; } #top .lb-p-pf-radar-grille path { fill: none; stroke: rgba(168, 212, 216, .08); stroke-width: 1; } #top .lb-p-pf-radar-cercles circle { fill: none; stroke: rgba(168, 212, 216, .2); stroke-width: 1; stroke-dasharray: 3 6; } #top .lb-p-pf-radar-balayage { transform-box: view-box; transform-origin: 322px 186px; animation: lb-p-balayage 7s linear infinite; } #top .lb-p-pf-radar-balayage path { fill: rgba(168, 212, 216, .1); } #top .lb-p-pf-radar-route { fill: none; stroke: #a8d4d8; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; } .lb-js #top .lb-p-pf-radar.lb-a-revele .lb-p-pf-radar-route { stroke-dashoffset: 1; } .lb-js #top .lb-p-pf-radar.lb-a-revele.is-visible .lb-p-pf-radar-route { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.45, 0, .2, 1) .4s; } #top .lb-p-pf-radar-onde { fill: none; stroke: #a8d4d8; stroke-width: 1.5; transform-box: view-box; transform-origin: 322px 186px; animation: lb-p-onde 2.8s ease-out infinite; } #top .lb-p-pf-radar-onde--2 { animation-delay: 1.4s; } #top .lb-p-pf-radar-point { fill: #ffffff; stroke: #a8d4d8; stroke-width: 3; } #top .lb-p-pf-radar-depart { fill: rgba(168, 212, 216, .6); } #top .lb-p-pf-radar-etiquette { position: absolute; left: 20px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid rgba(168, 212, 216, .3); background: rgba(8, 22, 33, .65); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: #ffffff; } #top .lb-p-pf-radar-etiquette i { width: 8px; height: 8px; border-radius: 50%; background: #5fd38d; animation: lb-p-pouls 2s ease-out infinite; } @keyframes lb-p-balayage { to { transform: rotate(360deg); } } @keyframes lb-p-onde { from { transform: scale(1); opacity: .9; } to { transform: scale(5.5); opacity: 0; } } @keyframes lb-p-pouls { 0% { box-shadow: 0 0 0 0 rgba(95, 211, 141, .6); } 100% { box-shadow: 0 0 0 10px rgba(95, 211, 141, 0); } } /* Naviguer autrement : la remotorisation en chiffres */ #top .lb-p-pf-autrement.avia-section { min-height: 660px; } #top .lb-p-pf-autrement .av-section-color-overlay { opacity: 1 !important; background: linear-gradient(90deg, rgba(8, 22, 33, .88) 0%, rgba(8, 22, 33, .6) 50%, rgba(8, 22, 33, .78) 100%) !important; } #top .lb-p-pf-autrement .av-section-color-overlay-wrap { display: flex; align-items: center; min-height: inherit; } #top .lb-p-pf-autrement .container { width: 100%; } #top .lb-p-pf-autrement-contenu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 50px 90px; padding: 120px 0; color: #ffffff; } #top .lb-p-pf-autrement h2 { margin: 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; text-transform: uppercase; color: #ffffff; } #top .lb-p-pf-autrement h2 span { color: #a8d4d8; } #top .lb-p-pf-autrement-texte > p { margin: 22px 0 28px; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .84); } #top .lb-a-lien--clair { color: #ffffff; } #top .lb-a-lien--clair:hover { color: #a8d4d8; } #top .lb-p-pf-compteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .22); } #top .lb-p-pf-compteurs figure { margin: 0; padding: 30px 22px 0 0; } #top .lb-p-pf-compteurs figure + figure { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .12); } #top .lb-p-pf-compteurs figure > span { display: block; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(36px, 3.4vw, 54px); line-height: 1; white-space: nowrap; color: #ffffff; } #top .lb-p-pf-compteurs figure > span i { font-style: normal; font-size: .62em; color: #a8d4d8; } #top .lb-p-pf-compteurs b { font-weight: 300; color: inherit; font-variant-numeric: tabular-nums; } #top .lb-p-pf-compteurs figcaption { margin-top: 12px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .74); } #top .lb-p-pf-autrement-note { grid-column: 1 / -1; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .74); } /* La visite : quatre portes d'entrée en cartes photo décalées */ #top .lb-p-pf-visite.avia-section { padding: 110px 0 150px; background: #ffffff; } #top .lb-p-pf-visite-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } #top .lb-p-pf-salle { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 500px; overflow: hidden; isolation: isolate; background: #112534; color: #ffffff; box-shadow: 0 24px 56px rgba(17, 37, 52, .14); transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s ease; } #top .lb-p-pf-salle:nth-child(even) { margin-top: 44px; margin-bottom: -44px; } #top .lb-p-pf-salle img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-pf-salle::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(7, 19, 28, .05) 30%, rgba(7, 19, 28, .88) 100%); } #top .lb-p-pf-salle:hover { transform: translateY(-6px); box-shadow: 0 34px 70px rgba(17, 37, 52, .24); color: #ffffff; } #top .lb-p-pf-salle:hover img { transform: scale(1.07); } #top .lb-p-pf-salle-texte { position: relative; z-index: 1; padding: 0 28px 30px; } #top .lb-p-pf-salle small { display: block; margin-bottom: 10px; font-size: 10px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: #a8d4d8; } #top .lb-p-pf-salle strong { display: block; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 30px; line-height: 1.05; text-transform: uppercase; color: #ffffff; } #top .lb-p-pf-salle-plus { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease, margin .5s ease; } #top .lb-p-pf-salle-plus > span { min-height: 0; overflow: hidden; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .86); } #top .lb-p-pf-salle:hover .lb-p-pf-salle-plus, #top .lb-p-pf-salle:focus-visible .lb-p-pf-salle-plus { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; } #top .lb-p-pf-salle-fleche { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-top: 20px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; transition: background .3s ease, color .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-pf-salle:hover .lb-p-pf-salle-fleche { border-color: #ffffff; background: #ffffff; color: #112534; transform: translateX(6px); } @media (hover: none) { #top .lb-p-pf-salle-plus { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; } } /* Page Polarfront : tablette et mobile */ @media (max-width: 989px) { #top .lb-p-hero--centre.avia-section { min-height: 700px; } #top .lb-p-hero--centre .lb-a-hero-contenu { padding-top: 40px; } #top .lb-p-pf-intro.avia-section, #top .lb-p-pf-fiche.avia-section, #top .lb-p-pf-position.avia-section, #top .lb-p-pf-visite.avia-section { padding: 80px 0; } #top .lb-p-pf-intro-grille, #top .lb-p-pf-fiche-grille, #top .lb-p-pf-position-grille, #top .lb-p-pf-autrement-contenu { grid-template-columns: minmax(0, 1fr); } #top .lb-p-pf-autrement-contenu { padding: 90px 0; } #top .lb-p-pf-visite-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } #top .lb-p-pf-salle { min-height: 400px; } #top .lb-p-pf-salle:nth-child(even) { margin: 0; } } @media (max-width: 640px) { #top .lb-p-hero .lb-chiffres > div { margin-right: 16px; padding-right: 16px; } #top .lb-p-hero .lb-chiffres dt { font-size: 20px; } #top .lb-p-pf-specs, #top .lb-p-pf-visite-grille, #top .lb-p-pf-compteurs { grid-template-columns: minmax(0, 1fr); } #top .lb-p-pf-compteurs figure, #top .lb-p-pf-compteurs figure + figure { padding: 24px 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); } #top .lb-p-pf-salle { min-height: 340px; } } /* ========================================================================== Page La vie à bord — préfixe lb-p-vie- ========================================================================== */ /* Voyager autrement : les douze passagers s'allument un à un */ #top .lb-p-vie-concept.avia-section { padding: 120px 0 110px; background: radial-gradient(circle at 8% 10%, rgba(135, 188, 196, .14), transparent 32%), #f3f5f5; } #top .lb-p-vie-concept-grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .8fr); align-items: center; gap: 50px 100px; } #top .lb-p-vie-concept-texte .lb-a-h2 span, #top .lb-p-vie-table-texte .lb-a-h2 span, #top .lb-p-vie-chaud-texte .lb-a-h2 span, #top .lb-p-vie-livret-texte .lb-a-h2 span { color: #6f9fae; } #top .lb-p-vie-concept-texte .lb-a-lead { margin: 26px 0 20px; } #top .lb-p-vie-concept-texte p:not(.lb-a-lead) { font-size: 15px; line-height: 1.85; color: #56656c; } #top .lb-p-vie-concept-texte p:not(.lb-a-lead) + p { margin-top: 14px; } #top .lb-p-vie-douze { margin: 0; padding: 40px 38px 34px; background: #ffffff; box-shadow: 0 26px 60px rgba(17, 37, 52, .1); } #top .lb-p-vie-douze-grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; } #top .lb-p-vie-douze-grille i { display: block; } #top .lb-p-vie-douze-grille svg { display: block; width: 100%; height: auto; fill: #112534; transition: fill .5s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); } .lb-js #top .lb-p-vie-douze.lb-a-revele svg { fill: #dfe5e6; transform: translateY(6px); } .lb-js #top .lb-p-vie-douze.lb-a-revele.is-visible svg { fill: #112534; transform: none; transition-delay: calc(.4s + var(--n) * .11s); } #top .lb-p-vie-douze-grille i:hover svg { fill: #5f9098; transform: translateY(-5px); transition-delay: 0s; } #top .lb-p-vie-douze figcaption { display: flex; align-items: center; gap: 16px; margin-top: 30px; padding-top: 24px; border-top: 1px solid #e3e8e9; } #top .lb-p-vie-douze figcaption b { font-family: 'Lato', sans-serif; font-weight: 300; font-size: 64px; line-height: 1; color: #112534; } #top .lb-p-vie-douze figcaption span { max-width: 150px; font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: 2.2px; text-transform: uppercase; color: #5f9098; } /* Les espaces intérieurs : récit au défilement */ #top .lb-p-vie-espaces-section.avia-section { padding: 110px 0 60px; background: radial-gradient(circle at 90% 6%, rgba(168, 212, 216, .08), transparent 34%), #0d1d29; color: #ffffff; } #top .lb-p-vie-espaces-section .lb-a-surtitre, #top .lb-p-vie-ponts .lb-a-surtitre, #top .lb-p-suite .lb-a-surtitre { color: #a8d4d8; } #top .lb-p-vie-espaces-section .lb-a-surtitre::before, #top .lb-p-vie-ponts .lb-a-surtitre::before, #top .lb-p-suite .lb-a-surtitre::before { background: #a8d4d8; } #top .lb-p-vie-espaces-section .lb-a-h2 { color: #ffffff; } #top .lb-p-vie-espaces-section .lb-a-h2 span { color: #a8d4d8; } #top .lb-p-vie-espaces-entete { margin-bottom: 50px; } #top .lb-p-vie-espaces { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); align-items: start; gap: 0 80px; } #top .lb-p-vie-espaces-visuel { position: sticky; top: 130px; height: min(70vh, 620px); overflow: hidden; background: #081621; box-shadow: 0 40px 90px rgba(0, 0, 0, .4); } #top .lb-p-vie-espaces-visuel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(8, 22, 33, .55), rgba(8, 22, 33, 0) 35%); pointer-events: none; } #top .lb-p-vie-espaces-photo { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.07); transition: opacity 1s ease, transform 1.8s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-vie-espaces-photo.is-active { opacity: 1; transform: none; } #top .lb-p-vie-espaces-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-vie-espaces-visuel:hover .is-active img { transform: scale(1.05); } #top .lb-p-vie-espaces-visuel .lb-ancre, #top .lb-p-envies-visuel .lb-ancre { z-index: 3; } #top .lb-p-vie-chaud-photo--petite .lb-ancre { --lb-ancre-l: 24px; top: 14px; right: 14px; } #top .lb-p-vie-espaces-reperes { position: absolute; left: 26px; bottom: 24px; z-index: 2; display: flex; gap: 8px; } #top .lb-p-vie-espaces-reperes i { width: 26px; height: 2px; background: rgba(255, 255, 255, .35); transition: width .5s cubic-bezier(.2, .8, .2, 1), background .5s ease; } #top .lb-p-vie-espaces-reperes i.is-active { width: 58px; background: #a8d4d8; } #top .lb-p-vie-espaces-textes { padding: 4vh 0 18vh; } #top .lb-p-vie-espace { display: flex; flex-direction: column; justify-content: center; min-height: 62vh; opacity: .25; transition: opacity .6s ease; } #top .lb-p-vie-espace.is-active { opacity: 1; } #top .lb-p-vie-espace small { font-size: 10px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: #a8d4d8; } #top .lb-p-vie-espace h3 { margin: 12px 0 18px; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; text-transform: uppercase; color: #ffffff; } #top .lb-p-vie-espace p { font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, .76); } #top .lb-p-vie-espace p + p { margin-top: 12px; } #top .lb-p-vie-espace-img { display: none; } /* La gastronomie : deux photos décalées */ #top .lb-p-vie-table.avia-section { padding: 120px 0 190px; background: #ffffff; } #top .lb-p-vie-table-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 50px 90px; } #top .lb-p-vie-table-texte > p { margin-top: 22px; font-size: 15px; line-height: 1.85; color: #56656c; } #top .lb-p-vie-table-citation { margin: 30px 0 0; padding: 4px 0 4px 26px; border: 0; border-left: 2px solid #a8d4d8; background: none; } #top .lb-p-vie-table-citation p { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; color: #112534; } #top .lb-p-vie-table-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } #top .lb-p-vie-table-photo { margin: 0; overflow: hidden; aspect-ratio: 2 / 3; background: #112534; box-shadow: 0 30px 70px rgba(17, 37, 52, .18); } #top .lb-p-vie-table-photo:nth-child(2) { transform: translateY(80px); } #top .lb-p-vie-table-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-vie-table-photo:hover img { transform: scale(1.06); } /* Les ponts extérieurs (photo) */ #top .lb-p-vie-ponts.avia-section { min-height: 620px; border: 0; } #top .lb-p-vie-ponts .av-section-color-overlay { opacity: 1 !important; background: linear-gradient(90deg, rgba(8, 22, 33, .88) 0%, rgba(8, 22, 33, .5) 42%, rgba(8, 22, 33, 0) 72%) !important; } #top .lb-p-vie-ponts .av-section-color-overlay-wrap { display: flex; align-items: center; min-height: inherit; } #top .lb-p-vie-ponts .container { width: 100%; } #top .lb-p-vie-ponts-contenu { max-width: 520px; padding: 120px 0; color: #ffffff; } #top .lb-p-vie-ponts h2 { margin: 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; text-transform: uppercase; color: #ffffff; } #top .lb-p-vie-ponts h2 span { color: #a8d4d8; } #top .lb-p-vie-ponts-contenu > p { margin-top: 24px; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .86); } /* Le sauna et le bain nordique : grande photo, vignette qui la chevauche, texte à droite */ #top .lb-p-vie-chaud.avia-section { padding: 110px 0 120px; background: #ffffff; } #top .lb-p-vie-chaud-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 50px 90px; } #top .lb-p-vie-chaud-photos { position: relative; padding-bottom: 90px; } #top .lb-p-vie-chaud-photo { position: relative; margin: 0; overflow: hidden; background: #112534; } #top .lb-p-vie-chaud-photo--grande { width: 84%; aspect-ratio: 4 / 3; box-shadow: 0 30px 70px rgba(17, 37, 52, .16); } #top .lb-p-vie-chaud-photo--petite { position: absolute; right: 0; bottom: 0; z-index: 2; width: 38%; aspect-ratio: 3 / 4; border: 8px solid #ffffff; box-shadow: 0 30px 70px rgba(17, 37, 52, .28); transition: transform .7s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-vie-chaud-photos:hover .lb-p-vie-chaud-photo--petite { transform: translate(10px, 10px) rotate(1.5deg); } #top .lb-p-vie-chaud-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-vie-chaud-photo:hover img { transform: scale(1.06); } #top .lb-p-vie-chaud-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 22, 33, .6), rgba(8, 22, 33, 0) 40%); pointer-events: none; } #top .lb-p-vie-chaud-photo figcaption { position: absolute; left: 20px; bottom: 16px; z-index: 1; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #ffffff; } #top .lb-p-vie-chaud-photo--petite figcaption { left: 14px; bottom: 12px; } #top .lb-p-vie-chaud-texte > p { margin-top: 20px; font-size: 15px; line-height: 1.85; color: #56656c; } #top .lb-p-vapeur { display: block; width: 76px; height: 52px; margin: 0 0 16px -8px; fill: none; stroke: #83b9c1; stroke-width: 2.2; stroke-linecap: round; overflow: visible; } #top .lb-p-vapeur path { animation: lb-p-vapeur 3.6s ease-in-out infinite; } #top .lb-p-vapeur path:nth-child(2) { animation-delay: .7s; } #top .lb-p-vapeur path:nth-child(3) { animation-delay: 1.4s; } @keyframes lb-p-vapeur { 0% { opacity: 0; transform: translateY(10px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } } /* Le livret de bienvenue : couverture en volume, pages en éventail, sommaire */ #top .lb-p-livret-section.avia-section { padding: 120px 0; overflow: hidden; background: radial-gradient(circle at 75% 45%, rgba(135, 188, 196, .22), transparent 40%), #f3f5f5; } #top .lb-p-livret { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 60px 90px; } #top .lb-p-livret-texte .lb-a-h2 span { color: #6f9fae; } #top .lb-p-livret-texte > p { margin-top: 20px; font-size: 15px; line-height: 1.85; color: #56656c; } #top .lb-p-livret-sommaire { margin: 30px 0 0; padding: 0; border-top: 1px solid #dfe5e6; list-style: none; counter-reset: none; } #top .lb-p-livret-sommaire li { margin: 0; padding: 0; border-bottom: 1px solid #dfe5e6; } #top .lb-p-livret-sommaire a { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 14px 4px; color: #112534; transition: padding .35s cubic-bezier(.2, .8, .2, 1), color .3s ease; } #top .lb-p-livret-sommaire a::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: #112534; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-livret-sommaire a span { font-family: 'Lato', sans-serif; font-size: 17px; } #top .lb-p-livret-sommaire a i { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; color: #5f9098; } #top .lb-p-livret-sommaire a:hover { padding-left: 14px; color: #5f9098; } #top .lb-p-livret-sommaire a:hover::before { transform: scaleX(1); } #top .lb-p-livret-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } #top .lb-p-livret-info { display: block; margin-top: 14px; font-size: 11px; letter-spacing: 1px; color: #8a979c; } #top .lb-p-livret-objet { position: relative; display: block; width: min(330px, 70%); aspect-ratio: 778 / 1100; margin: 0 auto; perspective: 1800px; } #top .lb-p-livret-page, #top .lb-p-livret-couverture { position: absolute; inset: 0; display: block; overflow: hidden; background: #ffffff; transform-origin: 50% 100%; transition: transform 1s cubic-bezier(.2, .8, .2, 1), box-shadow 1s ease; } #top .lb-p-livret-page img, #top .lb-p-livret-couverture img { display: block; width: 100%; height: 100%; object-fit: cover; } #top .lb-p-livret-page { box-shadow: 0 18px 40px rgba(17, 37, 52, .18); } #top .lb-p-livret-page--1 { transform: rotate(-5deg) translate(-26px, 4px); } #top .lb-p-livret-page--2 { transform: rotate(-10deg) translate(-50px, 12px); } #top .lb-p-livret-page--3 { transform: rotate(6deg) translate(30px, 8px); } #top .lb-p-livret-couverture { z-index: 3; transform: rotateY(-16deg) rotateX(3deg); box-shadow: 30px 40px 70px rgba(17, 37, 52, .32); } #top .lb-p-livret-couverture::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 14px; background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)); } #top .lb-p-livret-couverture i { position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .45) 48%, rgba(255, 255, 255, 0) 62%); transform: translateX(-120%); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); pointer-events: none; } /* Arrivée : les pages s'écartent de la couverture */ .lb-js #top .lb-p-livret-objet.lb-a-revele .lb-p-livret-page { transform: none; } .lb-js #top .lb-p-livret-objet.lb-a-revele.is-visible .lb-p-livret-page--1 { transform: rotate(-5deg) translate(-26px, 4px); transition-delay: .4s; } .lb-js #top .lb-p-livret-objet.lb-a-revele.is-visible .lb-p-livret-page--2 { transform: rotate(-10deg) translate(-50px, 12px); transition-delay: .55s; } .lb-js #top .lb-p-livret-objet.lb-a-revele.is-visible .lb-p-livret-page--3 { transform: rotate(6deg) translate(30px, 8px); transition-delay: .7s; } /* Survol : la couverture se redresse, l'éventail s'ouvre, un reflet passe */ #top .lb-p-livret-objet:hover .lb-p-livret-couverture, #top .lb-p-livret-objet:focus-visible .lb-p-livret-couverture { transform: translateY(-12px) scale(1.02); box-shadow: 0 50px 90px rgba(17, 37, 52, .35); } #top .lb-p-livret-objet:hover .lb-p-livret-couverture i { transform: translateX(120%); } .lb-js #top .lb-p-livret-objet.lb-a-revele.is-visible:hover .lb-p-livret-page--1, #top .lb-p-livret-objet:hover .lb-p-livret-page--1 { transform: rotate(-11deg) translate(-105px, 14px); transition-delay: 0s; } .lb-js #top .lb-p-livret-objet.lb-a-revele.is-visible:hover .lb-p-livret-page--2, #top .lb-p-livret-objet:hover .lb-p-livret-page--2 { transform: rotate(-20deg) translate(-180px, 46px); transition-delay: .05s; } .lb-js #top .lb-p-livret-objet.lb-a-revele.is-visible:hover .lb-p-livret-page--3, #top .lb-p-livret-objet:hover .lb-p-livret-page--3 { transform: rotate(13deg) translate(150px, 26px); transition-delay: .1s; } /* Poursuivre la visite : panneaux photo pleine largeur, celui survolé s'élargit (commun aux pages Polarfront) */ #top .lb-p-suite.avia-section { padding: 90px 0 0; background: #112534; } #top .lb-p-suite .lb-a-h2 { color: #ffffff; } #top .lb-p-suite .lb-a-h2 span { color: #a8d4d8; } #top .lb-p-suite-entete { margin-bottom: 44px; } #top .lb-p-suite-panneaux { display: flex; width: 100vw; height: 500px; margin-left: calc(50% - 50vw); } #top .lb-p-suite-panneau { position: relative; flex: 1 1 0; display: flex; align-items: flex-end; min-width: 0; overflow: hidden; isolation: isolate; color: #ffffff; transition: flex 0.9s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-suite-panneau + .lb-p-suite-panneau { border-left: 1px solid rgba(255, 255, 255, .14); } #top .lb-p-suite-panneaux:hover .lb-p-suite-panneau { flex-grow: .8; } #top .lb-p-suite-panneaux .lb-p-suite-panneau:hover, #top .lb-p-suite-panneaux .lb-p-suite-panneau:focus-visible { flex-grow: 1.9; } #top .lb-p-suite-panneau img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.85); transform: scale(1.08); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), filter .8s ease; } #top .lb-p-suite-panneau::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 19, 28, 0) 35%, rgba(7, 19, 28, .85) 100%); } #top .lb-p-suite-panneau:hover img, #top .lb-p-suite-panneau:focus-visible img { filter: brightness(.88) saturate(1); transform: scale(1); } #top .lb-p-suite-panneau-texte { display: block; width: 100%; max-width: 520px; padding: 0 40px 42px; } #top .lb-p-suite-panneau small { display: block; margin-bottom: 10px; font-size: 10px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: #a8d4d8; } #top .lb-p-suite-panneau strong { display: block; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.05; text-transform: uppercase; white-space: nowrap; color: #ffffff; } #top .lb-p-suite-panneau-plus { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s cubic-bezier(.2, .8, .2, 1), opacity .4s ease, margin .6s ease; } #top .lb-p-suite-panneau-plus > span { min-height: 0; overflow: hidden; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .86); } #top .lb-p-suite-panneau:hover .lb-p-suite-panneau-plus, #top .lb-p-suite-panneau:focus-visible .lb-p-suite-panneau-plus { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; transition-delay: .15s; } #top .lb-p-suite-panneau-fleche { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-top: 22px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-suite-panneau:hover .lb-p-suite-panneau-fleche { border-color: #ffffff; background: #ffffff; color: #112534; transform: translateX(6px); } @media (hover: none) { #top .lb-p-suite-panneau-plus { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; } } /* Page La vie à bord : tablette et mobile */ @media (max-width: 989px) { #top .lb-p-vie-concept.avia-section, #top .lb-p-vie-espaces-section.avia-section, #top .lb-p-vie-chaud.avia-section, #top .lb-p-livret-section.avia-section { padding: 80px 0; } #top .lb-p-vie-table.avia-section { padding: 80px 0 140px; } #top .lb-p-vie-concept-grille, #top .lb-p-vie-espaces, #top .lb-p-vie-table-grille, #top .lb-p-livret, #top .lb-p-vie-chaud-grille { grid-template-columns: minmax(0, 1fr); } #top .lb-p-vie-espaces-visuel { display: none; } #top .lb-p-vie-espaces-textes { padding: 0; } #top .lb-p-vie-espace { min-height: 0; padding-bottom: 54px; opacity: 1; } #top .lb-p-vie-espace-img { display: block; width: 100%; aspect-ratio: 3 / 2; margin-bottom: 22px; object-fit: cover; } #top .lb-p-vie-ponts .av-section-color-overlay { background: rgba(8, 22, 33, .6) !important; } #top .lb-p-suite-panneaux { flex-direction: column; height: auto; } #top .lb-p-suite-panneau { flex: none; min-height: 240px; } #top .lb-p-suite-panneau + .lb-p-suite-panneau { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); } #top .lb-p-suite-panneau-texte { padding: 0 24px 28px; } #top .lb-p-livret-objet { margin-top: 20px; } } @media (max-width: 640px) { #top .lb-p-vie-douze { padding: 30px 24px; } #top .lb-p-vie-chaud-photos { padding-bottom: 60px; } #top .lb-p-vie-chaud-photo--grande { width: 88%; } #top .lb-p-vie-chaud-photo--petite { width: 44%; border-width: 5px; } } /* ========================================================================== Page Les cabines — préfixe lb-p-cab- ========================================================================== */ #top .lb-p-cab-categorie--armateur, #top .lb-p-cab-zone--armateur, #top .lb-p-cab-puce--armateur, #top .lb-p-cab-fiche--armateur { --c: #c9a06e; } #top .lb-p-cab-categorie--mike, #top .lb-p-cab-zone--mike, #top .lb-p-cab-puce--mike, #top .lb-p-cab-fiche--mike { --c: #6fa3ab; } #top .lb-p-cab-categorie--loomis, #top .lb-p-cab-zone--loomis, #top .lb-p-cab-puce--loomis, #top .lb-p-cab-fiche--loomis { --c: #a8d4d8; } /* Vivre Polarfront depuis sa suite : le front polaire se dessine */ #top .lb-p-cab-ambiance.avia-section { padding: 120px 0 100px; background: radial-gradient(circle at 8% 100%, rgba(135, 188, 196, .16), transparent 34%), radial-gradient(circle at 96% 0%, rgba(201, 139, 94, .1), transparent 30%), #f3f5f5; } #top .lb-p-cab-ambiance-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; gap: 40px 90px; } #top .lb-p-cab-ambiance-titre .lb-a-h2 span, #top .lb-p-cab-refuge-texte .lb-a-h2 span { color: #6f9fae; } #top .lb-p-cab-ambiance-texte .lb-a-lead { margin-bottom: 16px; } #top .lb-p-cab-ambiance-texte p:not(.lb-a-lead) { font-size: 15px; line-height: 1.85; color: #56656c; } #top .lb-p-cab-front-bloc { max-width: 980px; margin: 64px auto 0; } #top .lb-p-cab-front { display: block; width: 100%; height: auto; overflow: visible; } #top .lb-p-cab-front-ligne { fill: none; stroke: #112534; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; } #top .lb-p-cab-froid { fill: #83b9c1; } #top .lb-p-cab-chaud { fill: #c98b5e; } .lb-js #top .lb-p-cab-front-bloc.lb-a-revele .lb-p-cab-front-ligne { stroke-dashoffset: 1; } .lb-js #top .lb-p-cab-front-bloc.lb-a-revele.is-visible .lb-p-cab-front-ligne { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.45, 0, .2, 1) .2s; } .lb-js #top .lb-p-cab-front-bloc.lb-a-revele .lb-p-cab-froid, .lb-js #top .lb-p-cab-front-bloc.lb-a-revele .lb-p-cab-chaud { opacity: 0; } .lb-js #top .lb-p-cab-front-bloc.lb-a-revele.is-visible .lb-p-cab-froid, .lb-js #top .lb-p-cab-front-bloc.lb-a-revele.is-visible .lb-p-cab-chaud { opacity: 1; transition: opacity .5s ease; transition-delay: calc(.5s + var(--n) * .18s); } #top .lb-p-cab-front-bloc figcaption { display: grid; grid-template-columns: 1fr minmax(0, 640px) 1fr; align-items: start; gap: 20px 40px; margin-top: 26px; } #top .lb-p-cab-front-legende { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #112534; } #top .lb-p-cab-front-legende--chaud { justify-self: end; } #top .lb-p-cab-front-legende i { display: inline-block; width: 18px; height: 16px; } #top .lb-p-cab-front-legende--froid i { background: #83b9c1; clip-path: polygon(50% 0, 100% 100%, 0 100%); } #top .lb-p-cab-front-legende--chaud i { height: 9px; border-radius: 0 0 18px 18px; background: #c98b5e; } #top .lb-p-cab-front-texte { font-size: 15px; line-height: 1.85; text-align: center; color: #56656c; } /* L'explorateur des suites : barre des catégories, plan (zones vectorielles), barre des suites, fiche */ #top .lb-p-cab-plan-section.avia-section { padding: 110px 0 120px; background: radial-gradient(circle at 10% 0%, rgba(168, 212, 216, .08), transparent 36%), radial-gradient(circle at 92% 100%, rgba(201, 160, 110, .07), transparent 32%), #0d1d29; color: #ffffff; } #top .lb-p-cab-plan-section .lb-a-surtitre { color: #a8d4d8; } #top .lb-p-cab-plan-section .lb-a-surtitre::before { background: #a8d4d8; } #top .lb-p-cab-plan-section .lb-a-h2 { color: #ffffff; } #top .lb-p-cab-plan-section .lb-a-h2 span { color: #a8d4d8; } #top .lb-p-cab-plan-section .lb-a-chapo { border-left-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .7); } #top .lb-p-cab-plan-section .lb-p-cab-plan-entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 60px; margin-bottom: 40px; } #top .lb-p-cab-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; margin-bottom: 16px; } #top .lb-p-cab-categories { display: flex; flex-wrap: wrap; gap: 10px; } #top .lb-p-cab-categorie { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 18px 10px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: transparent; color: #ffffff; font: inherit; cursor: pointer; scroll-margin-top: 140px; transition: background .3s ease, border-color .3s ease, color .3s ease; } #top .lb-p-cab-categorie i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); } #top .lb-p-cab-categorie strong { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 15px; color: inherit; } #top .lb-p-cab-categorie small { font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255, 255, 255, .5); transition: color .3s ease; } #top .lb-p-cab-categorie:hover { border-color: var(--c); } #top .lb-p-cab-categorie[aria-pressed="true"] { border-color: var(--c); background: var(--c); color: #112534; } #top .lb-p-cab-categorie[aria-pressed="true"] small { color: rgba(17, 37, 52, .7); } #top .lb-p-cab-categorie[aria-pressed="true"] i { background: #112534; box-shadow: none; } #top .lb-p-cab-proue { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .45); } #top .lb-p-cab-proue i { width: 70px; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .5)); } #top .lb-p-cab-plan { margin: 0; padding: 16px 24px; background: #fafbfb; box-shadow: 0 30px 70px rgba(0, 0, 0, .4); } #top .lb-p-cab-plan-cadre { position: relative; } #top .lb-p-cab-plan-fond { display: block; width: 100%; height: auto; } #top .lb-p-cab-zones { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } #top .lb-p-cab-zone { cursor: pointer; } #top .lb-p-cab-zone-fond { fill: var(--c); fill-opacity: .42; mix-blend-mode: multiply; transition: fill-opacity .45s ease; } #top .lb-p-cab-zone-trait { fill: none; stroke: #112534; stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; pointer-events: none; transition: stroke-dashoffset 1s cubic-bezier(.45, 0, .2, 1); } #top .lb-p-cab-zone-pastille { fill: #112534; stroke: #fafbfb; stroke-width: 4; transform-box: fill-box; transform-origin: center; transition: fill .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); } #top .lb-p-cab-zone text { fill: #ffffff; font: 600 26px/1 'Work Sans', sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; transition: fill .3s ease; } #top .lb-p-cab-zone:hover .lb-p-cab-zone-fond { fill-opacity: .7; } #top .lb-p-cab-zone:hover .lb-p-cab-zone-pastille { transform: scale(1.15); } #top .lb-p-cab-zone.is-active .lb-p-cab-zone-fond { fill-opacity: .92; } #top .lb-p-cab-zone.is-active .lb-p-cab-zone-trait { stroke-dashoffset: 0; } #top .lb-p-cab-zone.is-active .lb-p-cab-zone-pastille { fill: #fafbfb; stroke: #112534; transform: scale(1.3); } #top .lb-p-cab-zone.is-active text { fill: #112534; } #top .lb-p-cab-zone.is-eteint .lb-p-cab-zone-fond { fill-opacity: .08; } #top .lb-p-cab-zone.is-eteint .lb-p-cab-zone-pastille { fill: #9aa6ab; } /* Arrivée : les suites s'allument une à une */ .lb-js #top .lb-p-cab-plan.lb-a-revele .lb-p-cab-zone { opacity: 0; transition: opacity .6s ease; } .lb-js #top .lb-p-cab-plan.lb-a-revele.is-visible .lb-p-cab-zone { opacity: 1; transition-delay: calc(.5s + var(--n) * .12s); } #top .lb-p-cab-puces { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid rgba(255, 255, 255, .12); scrollbar-width: none; } #top .lb-p-cab-puces::-webkit-scrollbar { display: none; } #top .lb-p-cab-puce { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 15px 14px; border: 0; background: transparent; color: rgba(255, 255, 255, .55); font: inherit; cursor: pointer; transition: color .3s ease, opacity .3s ease; } #top .lb-p-cab-puce::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--c); transform: scaleX(0); transition: transform .45s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-cab-puce b { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--c); border-radius: 50%; font-size: 11px; font-weight: 600; color: var(--c); transition: background .3s ease, color .3s ease; } #top .lb-p-cab-puce span { font-family: 'Lato', sans-serif; font-size: 15px; letter-spacing: .3px; } #top .lb-p-cab-puce:hover { color: #ffffff; } #top .lb-p-cab-puce.is-active { color: #ffffff; } #top .lb-p-cab-puce.is-active::after { transform: scaleX(1); } #top .lb-p-cab-puce.is-active b { background: var(--c); color: #112534; } #top .lb-p-cab-puce.is-eteint { opacity: .35; } #top .lb-p-cab-puce:focus-visible { outline: 1px solid #a8d4d8; outline-offset: -4px; } /* La fiche de la suite choisie */ #top .lb-p-cab-fiches { position: relative; margin-top: 24px; } .lb-js #top .lb-p-cab-fiches { display: grid; } .lb-js #top .lb-p-cab-fiche { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility 0s linear .55s; } .lb-js #top .lb-p-cab-fiche.is-active { opacity: 1; visibility: visible; transition: opacity .55s ease; } #top .lb-p-cab-fiche { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 0 56px; } #top .lb-p-cab-fiche + .lb-p-cab-fiche { margin-top: 40px; } .lb-js #top .lb-p-cab-fiche + .lb-p-cab-fiche { margin-top: 0; } #top .lb-p-cab-fiche-visuel { position: relative; align-self: start; width: 100%; overflow: hidden; aspect-ratio: 16 / 9; background: #112534; } #top .lb-p-cab-fiche-photos { position: absolute; inset: 0; } #top .lb-p-cab-fiche-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .8s ease, transform 6s cubic-bezier(.2, .6, .3, 1); } #top .lb-p-cab-fiche-photo.is-active { opacity: 1; transform: scale(1); } #top .lb-p-cab-fiche-visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 22, 33, .55), rgba(8, 22, 33, 0) 35%); pointer-events: none; } #top .lb-p-cab-fiche-vignettes { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: flex; gap: 8px; } #top .lb-p-cab-fiche-vignette { width: 64px; height: 46px; margin: 0; padding: 0; overflow: hidden; border: 2px solid rgba(255, 255, 255, .45); border-radius: 0; background: #112534; cursor: pointer; opacity: .75; transition: opacity .3s ease, border-color .3s ease, transform .3s ease; } #top .lb-p-cab-fiche-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; } #top .lb-p-cab-fiche-vignette:hover { opacity: 1; transform: translateY(-3px); } #top .lb-p-cab-fiche-vignette.is-active { border-color: #ffffff; opacity: 1; } #top .lb-p-cab-fiche-texte { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 6px 0 64px; } #top .lb-p-cab-fiche-numero { position: absolute; top: -10px; right: 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 170px; line-height: 1; letter-spacing: -6px; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .14); pointer-events: none; } #top .lb-p-cab-fiche-texte small { position: relative; font-size: 11px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--c); } #top .lb-p-cab-fiche-texte h3 { position: relative; margin: 10px 0 14px; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(38px, 3.6vw, 56px); line-height: 1; text-transform: uppercase; color: #ffffff; } #top .lb-p-cab-fiche-texte p { position: relative; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .84); } #top .lb-p-cab-fiche-texte .lb-p-cab-fiche-categorie { margin: 12px 0 22px; padding-left: 16px; border-left: 2px solid var(--c); font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .6); } #top .lb-p-cab-fiche-texte .lb-a-bouton { position: relative; align-self: flex-start; } /* Le texte arrive ligne à ligne quand la fiche change */ .lb-js #top .lb-p-cab-fiche-texte > * { opacity: 0; translate: 0 18px; transition: opacity .5s ease, translate .7s cubic-bezier(.2, .8, .2, 1); } .lb-js #top .lb-p-cab-fiche.is-active .lb-p-cab-fiche-texte > * { opacity: 1; translate: 0 0; } .lb-js #top .lb-p-cab-fiche.is-active .lb-p-cab-fiche-texte > :nth-child(2) { transition-delay: .08s; } .lb-js #top .lb-p-cab-fiche.is-active .lb-p-cab-fiche-texte > :nth-child(3) { transition-delay: .16s; } .lb-js #top .lb-p-cab-fiche.is-active .lb-p-cab-fiche-texte > :nth-child(4) { transition-delay: .24s; } .lb-js #top .lb-p-cab-fiche.is-active .lb-p-cab-fiche-texte > :nth-child(5) { transition-delay: .32s; } .lb-js #top .lb-p-cab-fiche.is-active .lb-p-cab-fiche-texte > :nth-child(6) { transition-delay: .4s; } .lb-js #top .lb-p-cab-fiche-numero { translate: 30px 0 !important; } .lb-js #top .lb-p-cab-fiche.is-active .lb-p-cab-fiche-numero { opacity: 1; translate: 0 0 !important; transition: opacity .8s ease, translate 1.2s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-cab-fiches-nav { position: absolute; left: calc((100% - 56px) * 1.35 / 2.35 + 56px); bottom: 6px; z-index: 3; display: flex; align-items: center; gap: 14px; } .lb-p-cab-fiches:not(.lb-p-cab-fiches--js) .lb-p-cab-fiches-nav { display: none; } .lb-js #top .lb-p-cab-fiches .lb-p-cab-fiches-nav { display: flex; } #top .lb-p-cab-fiches-nav button { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: transparent; color: #ffffff; cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease; } #top .lb-p-cab-fiches-nav button:hover { border-color: #ffffff; background: #ffffff; color: #112534; } #top .lb-p-cab-fiches-compte { font-size: 12px; letter-spacing: 1.6px; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; } #top .lb-p-cab-fiches-compte b { font-weight: 600; color: #ffffff; } /* Un refuge élégant */ #top .lb-p-cab-refuge.avia-section { padding: 120px 0; background: #ffffff; } #top .lb-p-cab-refuge-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: 50px 90px; } #top .lb-p-cab-refuge-texte .lb-a-lead { margin: 24px 0 18px; } #top .lb-p-cab-refuge-texte .lb-a-lead em { font-family: 'Fraunces', serif; font-style: italic; color: #5f9098; } #top .lb-p-cab-moments { margin: 0 0 22px; padding: 0; border-top: 1px solid #e3e8e9; list-style: none; } #top .lb-p-cab-moments li { position: relative; margin: 0; padding: 13px 0 13px 34px; border-bottom: 1px solid #e3e8e9; font-family: 'Lato', sans-serif; font-size: 17px; color: #112534; } #top .lb-p-cab-moments li::before { content: ""; position: absolute; top: 50%; left: 0; width: 18px; height: 1px; background: #83b9c1; transition: width .4s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-cab-moments li:hover::before { width: 26px; } #top .lb-p-cab-refuge-texte > p:not(.lb-a-lead) { margin-bottom: 30px; font-size: 15px; line-height: 1.85; color: #56656c; } #top .lb-p-cab-refuge-photo { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: #112534; box-shadow: 0 34px 80px rgba(17, 37, 52, .18); } #top .lb-p-cab-refuge-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-cab-refuge-photo:hover img { transform: scale(1.05); } /* Page Les cabines : tablette et mobile */ @media (max-width: 989px) { #top .lb-p-cab-ambiance.avia-section, #top .lb-p-cab-plan-section.avia-section, #top .lb-p-cab-refuge.avia-section { padding: 80px 0; } #top .lb-p-cab-ambiance-grille, #top .lb-p-cab-refuge-grille, #top .lb-p-cab-fiche { grid-template-columns: minmax(0, 1fr); } #top .lb-p-cab-front-bloc figcaption { grid-template-columns: 1fr 1fr; } #top .lb-p-cab-front-texte { grid-column: 1 / -1; grid-row: 2; text-align: left; } #top .lb-p-cab-proue { display: none; } #top .lb-p-cab-plan { padding: 14px; overflow-x: auto; } #top .lb-p-cab-plan-cadre { min-width: 660px; } #top .lb-p-cab-puce { flex: 0 0 auto; } #top .lb-p-cab-fiche-visuel { aspect-ratio: 4 / 3; } #top .lb-p-cab-fiche-texte { padding: 26px 0 80px; } #top .lb-p-cab-fiche-numero { top: 10px; font-size: 110px; } #top .lb-p-cab-fiches-nav { right: auto; left: 0; } } @media (max-width: 640px) { #top .lb-p-cab-categorie { padding: 8px 14px 8px 12px; } #top .lb-p-cab-categorie small { display: none; } #top .lb-p-cab-fiche-vignette { width: 52px; height: 38px; } } /* ========================================================================== Pages des suites (portfolio /polarfront/cabine-nX/) — préfixe lb-p-su- ========================================================================== */ #top.single-portfolio .avia-post-nav { display: none; } /* flèches « portfolio précédent / suivant » d'Enfold */ #top .lb-p-su-zone--armateur, #top .lb-p-su-carte--armateur { --c: #c9a06e; } #top .lb-p-su-zone--mike, #top .lb-p-su-carte--mike { --c: #6fa3ab; } #top .lb-p-su-zone--loomis, #top .lb-p-su-carte--loomis { --c: #a8d4d8; } /* Hero : fil d'Ariane */ #top .lb-p-su-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 26px; font-size: 12px; letter-spacing: .6px; color: rgba(255, 255, 255, .7); animation: lb-a-arrivee 1s cubic-bezier(.2, .75, .2, 1) both; } #top .lb-p-su-ariane a { color: rgba(255, 255, 255, .85); border-bottom: 1px solid rgba(255, 255, 255, .3); transition: color .25s ease, border-color .25s ease; } #top .lb-p-su-ariane a:hover { color: #a8d4d8; border-color: #a8d4d8; } #top .lb-p-su-ariane i { font-style: normal; color: rgba(255, 255, 255, .35); } #top .lb-p-su-ariane span { color: #a8d4d8; } /* La suite sur le plan */ #top .lb-p-su-plan-section.avia-section { padding: 110px 0; background: radial-gradient(circle at 90% 0%, rgba(135, 188, 196, .16), transparent 34%), #f3f5f5; } #top .lb-p-su-plan-entete { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: end; gap: 30px 90px; margin-bottom: 44px; } #top .lb-p-su-plan-entete .lb-a-h2 span { color: #6f9fae; } #top .lb-p-su-plan-intro p { font-size: 16px; line-height: 1.85; color: #56656c; } #top .lb-p-su-plan-intro p:first-child { font-family: 'Lato', sans-serif; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: #112534; } #top .lb-p-su-plan-intro p + p { margin-top: 14px; } #top .lb-p-su-plan { margin: 0; padding: 34px 30px 18px; background: #fafbfb; box-shadow: 0 30px 70px rgba(17, 37, 52, .14); } #top .lb-p-su-plan-cadre { position: relative; } #top .lb-p-su-plan-fond { display: block; width: 100%; height: auto; } #top .lb-p-su-zones { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } #top .lb-p-su-zone-fond { fill: var(--c); fill-opacity: .2; mix-blend-mode: multiply; transition: fill-opacity .4s ease; } #top .lb-p-su-zone-trait { fill: none; stroke: #112534; stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.45, 0, .2, 1); } #top .lb-p-su-zone circle { fill: #8fa1a8; stroke: #fafbfb; stroke-width: 4; transform-box: fill-box; transform-origin: center; transition: fill .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); } #top .lb-p-su-zone text { fill: #ffffff; font: 600 26px/1 'Work Sans', sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; } #top a.lb-p-su-zone { cursor: pointer; } #top a.lb-p-su-zone:hover .lb-p-su-zone-fond, #top a.lb-p-su-zone:focus .lb-p-su-zone-fond { fill-opacity: .6; } #top a.lb-p-su-zone:hover circle, #top a.lb-p-su-zone:focus circle { fill: #112534; transform: scale(1.15); } #top a.lb-p-su-zone:hover .lb-p-su-zone-trait { stroke-dashoffset: 0; stroke-width: 3; } #top .lb-p-su-zone.is-ici .lb-p-su-zone-fond { fill-opacity: .92; } #top .lb-p-su-zone.is-ici circle { fill: #112534; transform: scale(1.25); } .lb-js #top .lb-p-su-plan.lb-a-revele .lb-p-su-zone.is-ici .lb-p-su-zone-fond { fill-opacity: .2; } .lb-js #top .lb-p-su-plan.lb-a-revele.is-visible .lb-p-su-zone.is-ici .lb-p-su-zone-fond { fill-opacity: .92; transition: fill-opacity .8s ease 1.4s; } .lb-js #top .lb-p-su-plan.lb-a-revele.is-visible .lb-p-su-zone.is-ici .lb-p-su-zone-trait { stroke-dashoffset: 0; transition-delay: .5s; transition-duration: 1.4s; } #top .lb-p-su-plan:not(.lb-a-revele) .lb-p-su-zone.is-ici .lb-p-su-zone-trait, html:not(.lb-js) #top .lb-p-su-zone.is-ici .lb-p-su-zone-trait { stroke-dashoffset: 0; } #top .lb-p-su-ici { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 10px; background: #112534; color: #ffffff; font-size: 10px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, calc(-100% - 30px)); box-shadow: 0 12px 26px rgba(17, 37, 52, .3); pointer-events: none; } #top .lb-p-su-ici::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 1px; height: 16px; background: #112534; } #top .lb-p-su-ici i { width: 8px; height: 8px; border-radius: 50%; background: #a8d4d8; animation: lb-p-pouls-glace 2s ease-out infinite; } @keyframes lb-p-pouls-glace { 0% { box-shadow: 0 0 0 0 rgba(168, 212, 216, .7); } 100% { box-shadow: 0 0 0 9px rgba(168, 212, 216, 0); } } .lb-js #top .lb-p-su-plan.lb-a-revele .lb-p-su-ici { opacity: 0; transform: translate(-50%, calc(-100% - 60px)); } .lb-js #top .lb-p-su-plan.lb-a-revele.is-visible .lb-p-su-ici { opacity: 1; transform: translate(-50%, calc(-100% - 30px)); transition: opacity .5s ease 1.9s, transform .8s cubic-bezier(.34, 1.56, .64, 1) 1.9s; } #top .lb-p-su-bord { position: absolute; left: 0; font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #8a979c; } #top .lb-p-su-bord--babord { top: -24px; } #top .lb-p-su-bord--tribord { bottom: -8px; } #top .lb-p-su-plan figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 30px; margin-top: 22px; padding-top: 14px; border-top: 1px solid #e3e8e9; font-size: 13px; color: #65757b; } #top .lb-p-su-plan .lb-p-cab-proue { color: #8a979c; } #top .lb-p-su-plan .lb-p-cab-proue i { background: linear-gradient(90deg, rgba(17, 37, 52, .08), rgba(17, 37, 52, .4)); } /* La suite en un coup d'œil */ #top .lb-p-su-chiffres.avia-section { padding: 110px 0; background: radial-gradient(circle at 12% 100%, rgba(168, 212, 216, .08), transparent 36%), #0d1d29; color: #ffffff; } #top .lb-p-su-chiffres .lb-a-surtitre, #top .lb-p-su-autres .lb-a-surtitre, #top .lb-p-su-citation .lb-a-surtitre { color: #a8d4d8; } #top .lb-p-su-chiffres .lb-a-surtitre::before, #top .lb-p-su-autres .lb-a-surtitre::before, #top .lb-p-su-citation .lb-a-surtitre::before { background: #a8d4d8; } #top .lb-p-su-chiffres .lb-a-h2, #top .lb-p-su-autres .lb-a-h2 { color: #ffffff; } #top .lb-p-su-chiffres .lb-a-h2 span, #top .lb-p-su-autres .lb-a-h2 span { color: #a8d4d8; } #top .lb-p-su-chiffres-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .14); } #top .lb-p-su-chiffres-grille--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } #top .lb-p-su-chiffre { position: relative; padding: 36px 28px 10px 0; } #top .lb-p-su-chiffre + .lb-p-su-chiffre { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .1); } #top .lb-p-su-chiffre-icone { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 22px; border: 1px solid rgba(168, 212, 216, .4); border-radius: 50%; color: #a8d4d8; transition: background .35s ease, color .35s ease; } #top .lb-p-su-chiffre-icone svg, #top .lb-p-su-espace-icone svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } #top .lb-p-su-chiffre-icone path, #top .lb-p-su-espace-icone path { stroke-dasharray: 1; stroke-dashoffset: 0; } .lb-js #top .lb-p-su-chiffre.lb-a-revele .lb-p-su-chiffre-icone path, .lb-js #top .lb-p-su-espaces-liste li.lb-a-revele .lb-p-su-espace-icone path { stroke-dashoffset: 1; } .lb-js #top .lb-p-su-chiffre.lb-a-revele.is-visible .lb-p-su-chiffre-icone path, .lb-js #top .lb-p-su-espaces-liste li.lb-a-revele.is-visible .lb-p-su-espace-icone path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .2, 1); transition-delay: calc(var(--lb-delai, 0s) + .3s); } #top .lb-p-su-chiffre:hover .lb-p-su-chiffre-icone { background: #a8d4d8; color: #112534; } #top .lb-p-su-chiffre:hover .lb-p-su-chiffre-icone path, #top .lb-p-su-espaces-liste li:hover .lb-p-su-espace-icone path { animation: lb-trace 1.1s cubic-bezier(.45, 0, .2, 1); } #top .lb-p-su-chiffre-valeur { display: block; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(38px, 3.6vw, 58px); line-height: 1; white-space: nowrap; color: #ffffff; } #top .lb-p-su-chiffre-valeur b { font-weight: 300; color: inherit; font-variant-numeric: tabular-nums; } #top .lb-p-su-chiffre-valeur i { font-style: normal; font-size: .5em; color: #a8d4d8; } #top .lb-p-su-chiffres-grille--5 .lb-p-su-chiffre-valeur { font-size: clamp(30px, 2.8vw, 46px); } #top .lb-p-su-chiffre strong { display: block; margin: 14px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #a8d4d8; } #top .lb-p-su-chiffre p { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .66); } /* Visite en images */ #top .lb-p-su-galerie.avia-section { padding: 110px 0; background: #ffffff; } #top .lb-p-su-mosaique { display: grid; grid-template-columns: 1.25fr 1fr .62fr; grid-template-rows: 250px 250px; gap: 12px; } #top .lb-p-su-mosaique--3 { grid-template-rows: 500px; } #top .lb-p-su-mosaique--4 .lb-p-su-photo--1 { grid-row: span 2; } #top .lb-p-su-mosaique--4 .lb-p-su-photo--4 { grid-column: 3; grid-row: 1 / span 2; } #top .lb-p-su-photo { position: relative; display: block; overflow: hidden; background: #112534; } #top .lb-p-su-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), filter .6s ease; } #top .lb-p-su-photo:hover img { transform: scale(1.06); } #top .lb-p-su-photo > i { position: absolute; left: 18px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: rgba(8, 22, 33, .35); color: #ffffff; font-style: normal; font-size: 22px; font-weight: 300; line-height: 1; opacity: 0; transform: scale(.8); transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); } #top .lb-p-su-photo:hover > i { opacity: 1; transform: none; } /* Une cabine, plusieurs espaces */ #top .lb-p-su-espaces.avia-section { padding: 110px 0; background: #f3f5f5; } #top .lb-p-su-espaces-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } #top .lb-p-su-espaces-liste--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } #top .lb-p-su-espaces-liste li { position: relative; margin: 0; padding: 34px 30px 32px; overflow: hidden; background: #ffffff; box-shadow: 0 18px 44px rgba(17, 37, 52, .07); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; } #top .lb-p-su-espaces-liste li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #a8d4d8; transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-su-espaces-liste li:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(17, 37, 52, .12); } #top .lb-p-su-espaces-liste li:hover::after { transform: scaleX(1); } #top .lb-p-su-espace-icone { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 24px; border-radius: 50%; background: #112534; color: #a8d4d8; } /* Le pictogramme de l'espace en grand filigrane dans le coin : il pivote et se redessine au survol */ #top .lb-p-su-espace-filigrane { position: absolute; top: -18px; right: -22px; width: 130px; height: 130px; color: #e3eaeb; transform: rotate(-8deg); transition: transform .9s cubic-bezier(.2, .8, .2, 1), color .5s ease; pointer-events: none; } #top .lb-p-su-espace-filigrane svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } #top .lb-p-su-espace-filigrane path { stroke-dasharray: 1; stroke-dashoffset: 0; } #top .lb-p-su-espaces-liste li:hover .lb-p-su-espace-filigrane { color: #cfe3e5; transform: rotate(0deg) scale(1.08); } #top .lb-p-su-espaces-liste li:hover .lb-p-su-espace-filigrane path { animation: lb-trace 1.4s cubic-bezier(.45, 0, .2, 1); } #top .lb-p-su-espace-icone, #top .lb-p-su-espaces-liste h3, #top .lb-p-su-espaces-liste p { position: relative; } #top .lb-p-su-espaces-liste h3 { margin: 0 0 10px; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 21px; line-height: 1.2; color: #112534; } #top .lb-p-su-espaces-liste p { font-size: 14px; line-height: 1.7; color: #65757b; } /* Citation sur photo */ #top .lb-p-su-citation.avia-section { min-height: 560px; border: 0; } #top .lb-p-su-citation .av-section-color-overlay { opacity: 1 !important; background: radial-gradient(circle at 50% 50%, rgba(8, 22, 33, .25), rgba(8, 22, 33, .72)) !important; } #top .lb-p-su-citation .av-section-color-overlay-wrap { display: flex; align-items: center; min-height: inherit; } #top .lb-p-su-citation .container { width: 100%; } #top .lb-p-su-citation-contenu { max-width: 760px; margin: 0 auto; padding: 120px 0; text-align: center; color: #ffffff; } #top .lb-p-su-citation .lb-a-surtitre { justify-content: center; } #top .lb-p-su-citation h2 { margin: 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(36px, 4.6vw, 66px); line-height: 1.04; color: #ffffff; } #top .lb-p-su-citation-contenu > p { max-width: 560px; margin: 24px auto 0; font-family: 'Fraunces', serif; font-style: italic; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, .88); } /* Les autres suites */ #top .lb-p-su-autres.avia-section { padding: 110px 0; background: #112534; } #top .lb-p-su-autres .lb-a-chapo { border-left-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .7); } #top .lb-p-su-autres .lb-a-chapo a { display: inline-block; margin-top: 8px; color: #a8d4d8; border-bottom: 1px solid rgba(168, 212, 216, .4); } #top .lb-p-su-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } #top .lb-p-su-carte { position: relative; display: flex; flex-direction: column; overflow: hidden; border-top: 3px solid var(--c); background: #0d1d29; color: #ffffff; transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; } #top a.lb-p-su-carte:hover { color: #ffffff; transform: translateY(-6px); box-shadow: 0 26px 56px rgba(0, 0, 0, .35); } #top .lb-p-su-carte-photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; } #top .lb-p-su-carte-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), filter .6s ease; } #top a.lb-p-su-carte:hover .lb-p-su-carte-photo img { transform: scale(1.06); filter: brightness(1); } #top .lb-p-su-carte-texte { display: block; padding: 16px 18px 20px; } #top .lb-p-su-carte small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--c); } #top .lb-p-su-carte strong { display: block; margin: 6px 0 6px; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 24px; line-height: 1.1; text-transform: uppercase; color: #ffffff; } #top .lb-p-su-carte-texte > span { font-size: 13px; color: rgba(255, 255, 255, .6); } #top .lb-p-su-carte-fleche { position: absolute; right: 16px; bottom: 18px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; transition: background .3s ease, color .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1); } #top a.lb-p-su-carte:hover .lb-p-su-carte-fleche { border-color: #ffffff; background: #ffffff; color: #112534; transform: translateX(4px); } #top .lb-p-su-carte.is-ici { box-shadow: inset 0 0 0 1px var(--c); } #top .lb-p-su-carte.is-ici .lb-p-su-carte-photo img { filter: brightness(.55) saturate(.6); } #top .lb-p-su-carte.is-ici::after { content: "Vous êtes ici"; position: absolute; top: 14px; left: 14px; padding: 6px 10px; background: var(--c); color: #112534; font-size: 9px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; } /* Hero : la photo avance lentement (écrans larges : la photo couvre en largeur) */ @media (min-width: 990px) { #top .lb-p-su-hero.avia-section { background-size: 112% auto !important; background-position: center 40% !important; animation: lb-p-su-avance 14s cubic-bezier(.2, .6, .3, 1) both; } } @keyframes lb-p-su-avance { from { background-size: 118% auto; } to { background-size: 104% auto; } } /* Filigrane du nom de la suite */ #top .lb-p-su-chiffres.avia-section { position: relative; overflow: hidden; } #top .lb-p-su-filigrane { top: auto; bottom: -60px; color: rgba(255, 255, 255, .035); } /* Visite en images : chaque photo s'ouvre comme un rideau */ .lb-js #top .lb-p-su-mosaique.lb-a-revele { opacity: 1; translate: none; } .lb-js #top .lb-p-su-mosaique.lb-a-revele .lb-p-su-photo { clip-path: inset(0 0 100% 0); } .lb-js #top .lb-p-su-mosaique.lb-a-revele .lb-p-su-photo img { transform: scale(1.18); } .lb-js #top .lb-p-su-mosaique.lb-a-revele.is-visible .lb-p-su-photo { clip-path: inset(0 0 0 0); transition: clip-path 1.3s cubic-bezier(.7, 0, .2, 1); } .lb-js #top .lb-p-su-mosaique.lb-a-revele.is-visible .lb-p-su-photo img { transform: scale(1); transition: transform 2s cubic-bezier(.2, .8, .2, 1); } .lb-js #top .lb-p-su-mosaique.lb-a-revele.is-visible .lb-p-su-photo--2, .lb-js #top .lb-p-su-mosaique.lb-a-revele.is-visible .lb-p-su-photo--2 img { transition-delay: .18s; } .lb-js #top .lb-p-su-mosaique.lb-a-revele.is-visible .lb-p-su-photo--3, .lb-js #top .lb-p-su-mosaique.lb-a-revele.is-visible .lb-p-su-photo--3 img { transition-delay: .36s; } .lb-js #top .lb-p-su-mosaique.lb-a-revele.is-visible .lb-p-su-photo--4, .lb-js #top .lb-p-su-mosaique.lb-a-revele.is-visible .lb-p-su-photo--4 img { transition-delay: .54s; } .lb-js #top .lb-p-su-mosaique.lb-a-revele.is-visible .lb-p-su-photo:hover img { transform: scale(1.06); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); transition-delay: 0s; } /* Le hublot : cerclage, rivets, reflet ; la vue glisse au défilement (latitude-blanche.js, hublots()) */ #top .lb-p-su-hublot-section.avia-section { position: relative; overflow: hidden; padding: 120px 0; background: radial-gradient(circle at 28% 50%, rgba(168, 212, 216, .14), transparent 40%), #0d1d29; color: #ffffff; } #top .lb-p-su-hublot-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 60px 100px; } /* Cerclage en laiton : reflets en conique, biseau intérieur, filet doré autour du verre */ #top .lb-p-su-hublot { position: relative; width: min(500px, 100%); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255, 244, 205, .55), rgba(255, 244, 205, 0) 34%), conic-gradient(from 200deg, #7a5a24, #e9c97f 9%, #a17a35 20%, #5e4318 33%, #c9a457 47%, #f4dd9c 56%, #8d6b2f 68%, #5a4117 82%, #b8914a 93%, #7a5a24); box-shadow: 0 50px 100px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 236, 190, .45), inset 0 -10px 24px rgba(60, 38, 8, .55), inset 0 10px 18px rgba(255, 240, 200, .25); } #top .lb-p-su-hublot::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: #120c04; box-shadow: inset 0 6px 14px rgba(0, 0, 0, .7), 0 0 0 2px #5a4117, 0 -2px 0 3px rgba(255, 236, 190, .35); } #top .lb-p-su-hublot::after { content: ""; position: absolute; inset: 8.4%; z-index: 3; border-radius: 50%; border: 4px solid transparent; background: conic-gradient(from 30deg, #8a6a2e, #f1d891, #9c7733, #5e4318, #d9b46a, #8a6a2e) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); pointer-events: none; } #top .lb-p-su-hublot-vue { position: absolute; inset: 9%; overflow: hidden; border-radius: 50%; } #top .lb-p-su-hublot-vue img { position: absolute; left: -15%; top: -15%; width: 130%; max-width: none; height: 130%; object-fit: cover; transform: translate3d(var(--lb-hx, 0), var(--lb-hy, 0), 0) rotate(var(--lb-hr, 0deg)); will-change: transform; } #top .lb-p-su-hublot-reflet { position: absolute; inset: 9%; z-index: 2; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, 0) 45%), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 62%, rgba(8, 22, 33, .45) 100%); pointer-events: none; } #top .lb-p-su-hublot-rivets i { position: absolute; top: 50%; left: 50%; z-index: 3; width: 3.2%; height: 3.2%; margin: -1.6% 0 0 -1.6%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4d2, #d8b262 45%, #6b4e1f 90%); box-shadow: 0 1px 2px rgba(40, 24, 4, .7), inset 0 -1px 1px rgba(60, 38, 8, .5); transform: rotate(var(--a)) translateY(-1460%); } .lb-js #top .lb-p-su-hublot.lb-a-revele { opacity: 0; translate: 0 0; transform: scale(.92) rotate(-8deg); transition: opacity 1s ease, transform 1.6s cubic-bezier(.2, .8, .2, 1); } .lb-js #top .lb-p-su-hublot.lb-a-revele.is-visible { opacity: 1; transform: none; } #top .lb-p-su-hublot-texte .lb-a-surtitre { color: #a8d4d8; } #top .lb-p-su-hublot-texte .lb-a-surtitre::before { background: #a8d4d8; } #top .lb-p-su-hublot-texte h2 { margin: 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(36px, 4vw, 60px); line-height: 1.06; text-transform: uppercase; color: #ffffff; } #top .lb-p-su-hublot-texte > p { margin-top: 24px; font-family: 'Fraunces', serif; font-style: italic; font-size: 20px; line-height: 1.6; color: rgba(255, 255, 255, .86); } #top .lb-p-su-hublot-note { display: flex; align-items: center; gap: 18px; margin-top: 36px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .66); } #top .lb-p-su-hublot-note b { flex: 0 0 auto; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 64px; line-height: 1; color: #d9b46a; } #top .lb-p-su-hublot-section.avia-section { background: radial-gradient(circle at 28% 50%, rgba(217, 180, 106, .12), transparent 40%), #0d1d29; } /* Appel final : le texte en haut, Polarfront au mouillage dégagé dessous */ @media (min-width: 990px) { #top .lb-p-su-cta.avia-section { min-height: 760px; background-position: center 60% !important; } #top .lb-p-su-cta .av-section-color-overlay { background: linear-gradient(180deg, rgba(8, 22, 33, .78) 0%, rgba(8, 22, 33, .45) 45%, rgba(8, 22, 33, .05) 75%) !important; } #top .lb-p-su-cta .av-section-color-overlay-wrap { align-items: flex-start; } #top .lb-p-su-cta .lb-d-cta2-contenu { padding: 90px 0 0; } } /* Pages des suites : tablette et mobile */ @media (max-width: 989px) { #top .lb-p-su-plan-section.avia-section, #top .lb-p-su-chiffres.avia-section, #top .lb-p-su-galerie.avia-section, #top .lb-p-su-espaces.avia-section, #top .lb-p-su-autres.avia-section { padding: 80px 0; } #top .lb-p-su-plan-entete { grid-template-columns: minmax(0, 1fr); } #top .lb-p-su-plan { padding: 64px 14px 16px; overflow-x: auto; } #top .lb-p-su-plan-cadre { min-width: 660px; } #top .lb-p-su-chiffres-grille, #top .lb-p-su-chiffres-grille--5, #top .lb-p-su-espaces-liste, #top .lb-p-su-espaces-liste--3, #top .lb-p-su-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } #top .lb-p-su-chiffre, #top .lb-p-su-chiffre + .lb-p-su-chiffre { padding: 28px 18px 18px 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); } #top .lb-p-su-mosaique, #top .lb-p-su-mosaique--3 { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 170px; } #top .lb-p-su-mosaique--4 { grid-template-columns: 1fr 1fr 1fr; } #top .lb-p-su-mosaique .lb-p-su-photo--1 { grid-column: 1 / -1; grid-row: span 2; } #top .lb-p-su-mosaique--4 .lb-p-su-photo--4 { grid-column: auto; grid-row: auto; } #top .lb-p-su-carte strong { font-size: 16px; letter-spacing: .2px; } #top .lb-p-su-photo > i { opacity: 1; transform: none; } #top .lb-p-su-hublot-section.avia-section { padding: 80px 0; } #top .lb-p-su-hublot-grille { grid-template-columns: minmax(0, 1fr); } #top .lb-p-su-hublot { width: min(380px, 86%); } } @media (max-width: 640px) { #top .lb-p-su-espaces-liste, #top .lb-p-su-espaces-liste--3 { grid-template-columns: minmax(0, 1fr); } #top .lb-p-su-chiffre-valeur { font-size: 34px; } } /* ========================================================================== Page Polarfront, son histoire — préfixe lb-p-hi- (le chapitre écologie est en vert) ========================================================================== */ #top .lb-p-hi-ancre { display: block; height: 0; } #top .lb-p-hi-texte .lb-a-h2 span { color: #6f9fae; } #top .lb-p-hi-texte > p { margin-top: 18px; font-size: 15px; line-height: 1.85; color: #56656c; } #top .lb-p-hi-texte > p.lb-a-lead { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.4; color: #112534; } #top .lb-p-hi-annee { top: -30px; bottom: auto; } #top .lb-p-hi-photo { position: relative; margin: 0; overflow: hidden; background: #112534; } #top .lb-p-hi-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-hi-photo:hover img { transform: scale(1.05); } #top .lb-p-hi-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; background: linear-gradient(0deg, rgba(8, 22, 33, .82), rgba(8, 22, 33, 0)); font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .9); } #top .lb-p-hi-photo--archive { margin-top: 30px; } #top .lb-p-hi-photo--archive img { filter: sepia(.18) saturate(.9); } /* Hero : les grandes dates en bas */ #top .lb-p-hi-hero.avia-section { min-height: 820px; } #top .lb-p-hi-hero .lb-a-hero-contenu { padding-bottom: 190px; } #top .lb-p-hi-coord { margin: 26px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #a8d4d8; animation: lb-a-arrivee 1.1s cubic-bezier(.2, .75, .2, 1) .6s both; } #top .lb-p-hi-citation-hero { max-width: 480px; margin: 22px 0 0; padding: 0 0 0 20px; border: 0; border-left: 1px solid rgba(168, 212, 216, .6); background: none; animation: lb-a-arrivee 1.1s cubic-bezier(.2, .75, .2, 1) .75s both; } #top .lb-p-hi-citation-hero p { margin: 0; font-family: 'Fraunces', serif; font-style: italic; font-size: 20px; line-height: 1.5; color: #ffffff; } #top .lb-p-hi-citation-hero cite { display: block; margin-top: 6px; font-style: normal; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .6); } #top .lb-p-hi-frise { position: absolute; left: 0; right: 0; bottom: 60px; display: flex; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .3); animation: lb-a-arrivee 1.2s cubic-bezier(.2, .75, .2, 1) 1s both; } #top .lb-p-hi-frise a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255, 255, 255, .78); font-family: 'Lato', sans-serif; font-size: 15px; transition: color .25s ease; } #top .lb-p-hi-frise a i { position: absolute; top: -23px; width: 9px; height: 9px; border: 1px solid #ffffff; border-radius: 50%; background: #0d1d29; transition: background .25s ease, transform .3s ease; } #top .lb-p-hi-frise a:hover { color: #a8d4d8; } #top .lb-p-hi-frise a:hover i { background: #a8d4d8; transform: scale(1.4); } /* Frise qui suit la lecture (écrans larges, dans la marge gauche) */ #top .lb-p-hi-rail { position: fixed; left: 26px; top: 50%; z-index: 50; display: flex; flex-direction: column; gap: 16px; padding: 14px 0; opacity: 0; transform: translate(-14px, -50%); pointer-events: none; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-hi-rail.is-visible { opacity: 1; transform: translate(0, -50%); pointer-events: auto; } #top .lb-p-hi-rail-fil { position: absolute; left: 4px; top: 20px; bottom: 20px; width: 1px; background: rgba(17, 37, 52, .18); } #top .lb-p-hi-rail-fil span { display: block; width: 100%; height: var(--lb-avance, 0%); background: #5f9098; transition: height .4s ease; } #top .lb-p-hi-rail a { position: relative; display: flex; align-items: center; gap: 12px; color: #8a979c; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; white-space: nowrap; transition: color .3s ease; } #top .lb-p-hi-rail a i { width: 9px; height: 9px; border: 1px solid #8a979c; border-radius: 50%; background: #ffffff; transition: background .3s ease, border-color .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); } #top .lb-p-hi-rail a span { opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; } #top .lb-p-hi-rail:hover a span, #top .lb-p-hi-rail a.is-active span { opacity: 1; transform: none; } #top .lb-p-hi-rail a.is-active { color: #112534; } #top .lb-p-hi-rail a.is-active i { border-color: #5f9098; background: #5f9098; transform: scale(1.35); } #top .lb-p-hi-rail.is-sombre a { color: rgba(255, 255, 255, .55); } #top .lb-p-hi-rail.is-sombre a i { border-color: rgba(255, 255, 255, .55); background: transparent; } #top .lb-p-hi-rail.is-sombre a.is-active { color: #ffffff; } #top .lb-p-hi-rail.is-sombre a.is-active i { border-color: #a8d4d8; background: #a8d4d8; } #top .lb-p-hi-rail.is-vert a.is-active i { border-color: #8fd1b0; background: #8fd1b0; } #top .lb-p-hi-rail.is-sombre .lb-p-hi-rail-fil { background: rgba(255, 255, 255, .18); } @media (max-width: 1379px) { #top .lb-p-hi-rail { display: none; } } /* 1976 : la fiche de construction (registre) et le dessin de profil */ #top .lb-p-hi-naissance.avia-section { position: relative; overflow: hidden; padding: 120px 0 110px; background: #f3f5f5; } #top .lb-p-hi-naissance-grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 50px 90px; } #top .lb-p-hi-registre { position: relative; padding: 34px 36px 30px; background: #fbf8f1; color: #2e2a22; box-shadow: 0 30px 70px rgba(17, 37, 52, .14), inset 0 0 0 1px rgba(120, 100, 60, .14); transform: rotate(-1.2deg); } #top .lb-p-hi-registre::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(120, 100, 60, .2); pointer-events: none; } #top .lb-p-hi-registre-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 2px solid #2e2a22; } #top .lb-p-hi-registre-tete small { font-size: 10px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: #7a6a4a; } #top .lb-p-hi-registre-tete strong { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; font-size: 26px; color: #2e2a22; } #top .lb-p-hi-registre dl { margin: 0; } #top .lb-p-hi-registre dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed rgba(120, 100, 60, .3); } #top .lb-p-hi-registre dt { font-family: 'Courier New', Courier, monospace; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #7a6a4a; } #top .lb-p-hi-registre dd { margin: 0; font-family: 'Courier New', Courier, monospace; font-size: 15px; font-weight: 700; text-align: right; color: #2e2a22; } #top .lb-p-hi-tampon { position: absolute; right: 26px; bottom: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 118px; height: 118px; border: 3px double rgba(176, 52, 40, .75); border-radius: 50%; color: rgba(176, 52, 40, .8); font-family: 'Courier New', Courier, monospace; font-size: 12px; font-weight: 700; letter-spacing: 1px; transform: rotate(-16deg); mix-blend-mode: multiply; pointer-events: none; } #top .lb-p-hi-tampon b { font-size: 17px; letter-spacing: 3px; text-transform: uppercase; } #top .lb-p-hi-tampon small { margin-top: 2px; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; } .lb-js #top .lb-p-hi-registre.lb-a-revele .lb-p-hi-tampon { opacity: 0; transform: rotate(-16deg) scale(1.8); } .lb-js #top .lb-p-hi-registre.lb-a-revele.is-visible .lb-p-hi-tampon { opacity: 1; transform: rotate(-16deg) scale(1); transition: opacity .2s ease 1.1s, transform .35s cubic-bezier(.5, 0, .3, 1.4) 1.1s; } #top .lb-p-hi-dessin { position: relative; max-width: 980px; margin: 80px auto 0; } #top .lb-p-hi-dessin img { display: block; width: 100%; height: auto; } .lb-js #top .lb-p-hi-dessin.lb-a-revele { opacity: 1; translate: none; } .lb-js #top .lb-p-hi-dessin.lb-a-revele img { clip-path: inset(0 100% 0 0); } .lb-js #top .lb-p-hi-dessin.lb-a-revele.is-visible img { clip-path: inset(0 0 0 0); transition: clip-path 3s cubic-bezier(.45, 0, .2, 1) .2s; } #top .lb-p-hi-dessin figcaption { margin-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-align: center; text-transform: uppercase; color: #8a979c; } /* Station M : la carte */ #top .lb-p-hi-station.avia-section { padding: 110px 0; background: radial-gradient(circle at 25% 40%, rgba(168, 212, 216, .1), transparent 40%), #0d1d29; color: #ffffff; } #top .lb-p-hi-station .lb-a-surtitre, #top .lb-p-hi-conversion .lb-a-surtitre { color: #a8d4d8; } #top .lb-p-hi-station .lb-a-surtitre::before, #top .lb-p-hi-conversion .lb-a-surtitre::before { background: #a8d4d8; } #top .lb-p-hi-station .lb-a-h2, #top .lb-p-hi-conversion .lb-a-h2 { color: #ffffff; } #top .lb-p-hi-station .lb-a-h2 span, #top .lb-p-hi-conversion .lb-a-h2 span { color: #a8d4d8; } #top .lb-p-hi-station .lb-p-hi-texte > p, #top .lb-p-hi-conversion .lb-p-hi-texte > p { color: rgba(255, 255, 255, .76); } #top .lb-p-hi-station .lb-p-hi-texte strong { color: #ffffff; } #top .lb-p-hi-station-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 50px 70px; } #top .lb-p-hi-carte-cadre { margin: 0 0 0 -40px; } #top .lb-p-hi-carte { display: block; width: 100%; height: auto; overflow: visible; } #top .lb-p-hi-carte-terre { fill: #1d3a50; stroke: #5f9098; stroke-width: .8; } #top .lb-p-hi-carte-grille path { fill: none; stroke: rgba(168, 212, 216, .1); stroke-width: 1; } #top .lb-p-hi-carte-grille text { fill: rgba(168, 212, 216, .5); font: 600 12px 'Work Sans', sans-serif; letter-spacing: 1px; } #top .lb-p-hi-carte-pays { fill: rgba(255, 255, 255, .32); font: 300 26px 'Lato', sans-serif; letter-spacing: 8px; } #top .lb-p-hi-carte-ville { fill: #a8d4d8; } #top .lb-p-hi-carte-nom { fill: rgba(255, 255, 255, .8); font: 14px 'Work Sans', sans-serif; } #top .lb-p-hi-carte-distance { fill: none; stroke: #a8d4d8; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; } #top .lb-p-hi-carte-km { fill: #ffffff; font: 300 20px 'Lato', sans-serif; text-anchor: middle; } #top .lb-p-hi-carte-station { fill: #ffffff; stroke: #a8d4d8; stroke-width: 4; } #top .lb-p-hi-carte-onde { fill: none; stroke: #a8d4d8; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: lb-p-onde 3s ease-out infinite; } #top .lb-p-hi-carte-onde--2 { animation-delay: 1.5s; } #top .lb-p-hi-carte-titre { fill: #ffffff; font: 600 15px 'Work Sans', sans-serif; letter-spacing: 3px; text-anchor: middle; } #top .lb-p-hi-carte-coord { fill: #a8d4d8; font: 14px 'Work Sans', sans-serif; letter-spacing: 1px; text-anchor: middle; } .lb-js #top .lb-p-hi-carte-cadre.lb-a-revele .lb-p-hi-carte-distance { stroke-dashoffset: 1; } .lb-js #top .lb-p-hi-carte-cadre.lb-a-revele .lb-p-hi-carte-km { opacity: 0; } .lb-js #top .lb-p-hi-carte-cadre.lb-a-revele.is-visible .lb-p-hi-carte-distance { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.45, 0, .2, 1) .6s; } .lb-js #top .lb-p-hi-carte-cadre.lb-a-revele.is-visible .lb-p-hi-carte-km { opacity: 1; transition: opacity .6s ease 2.6s; } #top .lb-p-hi-mesures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 70px; border-top: 1px solid rgba(255, 255, 255, .14); } #top .lb-p-hi-mesures > div { padding: 30px 24px 0 0; } #top .lb-p-hi-mesures > div + div { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .1); } #top .lb-p-hi-mesures span, #top .lb-p-hi-gains span { display: block; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(38px, 3.6vw, 58px); line-height: 1; white-space: nowrap; color: #ffffff; } #top .lb-p-hi-mesures span i, #top .lb-p-hi-gains span i { font-style: normal; font-size: .55em; color: #a8d4d8; } #top .lb-p-hi-mesures b, #top .lb-p-hi-gains b { font-weight: 300; color: inherit; font-variant-numeric: tabular-nums; } #top .lb-p-hi-mesures small, #top .lb-p-hi-gains small { display: block; margin-top: 12px; font-size: 12px; line-height: 1.55; letter-spacing: .6px; color: rgba(255, 255, 255, .66); } /* 2010 : le dernier témoin */ #top .lb-p-hi-temoin.avia-section { position: relative; overflow: hidden; padding: 120px 0; background: #ffffff; } #top .lb-p-hi-temoin-grille { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 50px 90px; } #top .lb-p-hi-photo--carree { aspect-ratio: 1; } #top .lb-p-hi-photo--carree img { filter: grayscale(.35) contrast(1.05); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), filter 1.2s ease; } #top .lb-p-hi-photo--carree:hover img { filter: none; } #top .lb-p-hi-dates { margin: 24px 0 6px; padding: 0; list-style: none; } #top .lb-p-hi-dates li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; margin: 0; padding: 14px 0; border-top: 1px solid #e3e8e9; } #top .lb-p-hi-dates li:last-child { border-bottom: 1px solid #e3e8e9; } #top .lb-p-hi-dates b { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 17px; color: #112534; } #top .lb-p-hi-dates span { font-size: 15px; line-height: 1.6; color: #56656c; } #top .lb-p-hi-silence { position: relative; max-width: 900px; margin: 90px auto 0; padding: 0; border: 0; background: none; text-align: center; } #top .lb-p-hi-silence p { margin: 0; font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(28px, 3vw, 44px); line-height: 1.3; color: #112534; } .lb-js #top .lb-p-hi-silence.lb-a-revele.is-visible p { animation: lb-p-hi-silence 2.6s ease both; } @keyframes lb-p-hi-silence { 0% { letter-spacing: .08em; opacity: 0; } 100% { letter-spacing: 0; opacity: 1; } } /* 2017 : une seconde vie (chronologie) */ #top .lb-p-hi-seconde.avia-section { padding: 120px 0; background: #f3f5f5; } #top .lb-p-hi-seconde-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 50px 90px; } #top .lb-p-hi-chrono { position: relative; margin: 0; padding: 0 0 0 40px; list-style: none; } #top .lb-p-hi-chrono::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 7px; width: 1px; background: linear-gradient(180deg, #a8d4d8, #5f9098); } #top .lb-p-hi-chrono li { position: relative; margin: 0; padding: 0 0 34px; } #top .lb-p-hi-chrono li::before { content: ""; position: absolute; top: 6px; left: -40px; width: 15px; height: 15px; border: 2px solid #5f9098; border-radius: 50%; background: #f3f5f5; transition: background .3s ease; } #top .lb-p-hi-chrono li:last-child::before { border-color: #112534; background: #112534; box-shadow: 0 0 0 6px rgba(17, 37, 52, .1); } #top .lb-p-hi-chrono li:hover::before { background: #a8d4d8; } #top .lb-p-hi-chrono b { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #5f9098; } #top .lb-p-hi-chrono p { font-family: 'Lato', sans-serif; font-size: 18px; line-height: 1.5; color: #112534; } #top .lb-p-hi-chrono li:last-child p { font-size: 22px; } /* 2018 : la conversion */ #top .lb-p-hi-conversion.avia-section { padding: 120px 0 110px; background: #0d1d29; color: #ffffff; } #top .lb-p-hi-conversion-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 50px 90px; } #top .lb-p-hi-photo--haute { aspect-ratio: 7 / 9.9; } #top .lb-p-hi-mission { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 30px; } #top .lb-p-hi-mission > span { padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .16); font-family: 'Lato', sans-serif; font-size: 17px; color: #ffffff; } #top .lb-p-hi-mission > span:last-child { border-color: #a8d4d8; background: rgba(168, 212, 216, .08); } #top .lb-p-hi-mission small, #top .lb-p-hi-pavillon small, #top .lb-p-hi-partenaires small { display: block; margin-bottom: 4px; font-family: 'Work Sans', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: #a8d4d8; } #top .lb-p-hi-mission i { display: flex; justify-content: center; color: #a8d4d8; } #top .lb-p-hi-mission i svg { width: 22px; height: 22px; } #top .lb-p-hi-pavillon { display: flex; gap: 40px; margin-top: 24px; font-family: 'Lato', sans-serif; font-size: 19px; color: #ffffff !important; } #top .lb-p-hi-chantier { margin-top: 80px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .14); } #top .lb-p-hi-chantier h3 { margin: 0 0 26px; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 26px; text-transform: uppercase; color: #ffffff; } #top .lb-p-hi-chantier ul, #top .lb-p-hi-engagements ul { margin: 0; padding: 0; list-style: none; } #top .lb-p-hi-chantier ul { columns: 3; column-gap: 40px; } #top .lb-p-hi-chantier li, #top .lb-p-hi-engagements li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0 0 16px; break-inside: avoid; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .8); } #top .lb-p-hi-chantier li svg, #top .lb-p-hi-engagements li svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: #a8d4d8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #top .lb-p-hi-chantier li svg path, #top .lb-p-hi-engagements li svg path { stroke-dasharray: 1; stroke-dashoffset: 0; } .lb-js #top .lb-p-hi-chantier.lb-a-revele li svg path, .lb-js #top .lb-p-hi-engagements .lb-a-revele li svg path { stroke-dashoffset: 1; } .lb-js #top .lb-p-hi-chantier.lb-a-revele.is-visible li svg path, .lb-js #top .lb-p-hi-engagements .lb-a-revele.is-visible li svg path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease; } .lb-js #top .lb-p-hi-chantier.lb-a-revele.is-visible li:nth-child(n) svg path { transition-delay: calc(.3s + var(--k, 0) * .09s); } /* Avant / après le chantier */ #top .lb-p-hi-avantapres.avia-section { padding: 120px 0; background: #ffffff; } #top .lb-p-hi-avantapres-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 50px 80px; } #top .lb-p-hi-bascule-boutons { position: relative; display: inline-flex; margin-bottom: 18px; padding: 4px; border-radius: 999px; background: #eef2f2; } #top .lb-p-hi-bascule-boutons button { position: relative; z-index: 1; margin: 0; padding: 11px 22px; border: 0; border-radius: 999px; background: transparent; color: #56656c; font: 600 11px 'Work Sans', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; transition: color .3s ease; } #top .lb-p-hi-bascule-boutons button.is-active { color: #ffffff; } #top .lb-p-hi-bascule-curseur { position: absolute; top: 4px; bottom: 4px; left: 4px; width: var(--l, 50%); border-radius: 999px; background: #112534; transform: translateX(var(--x, 0)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), width .5s cubic-bezier(.2, .8, .2, 1); } #top .lb-p-hi-bascule-images { position: relative; aspect-ratio: 1000 / 754; overflow: hidden; background: #112534; box-shadow: 0 30px 70px rgba(17, 37, 52, .16); } #top .lb-p-hi-bascule-images img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; clip-path: inset(0 0 0 100%); transition: opacity .2s ease .6s, clip-path .9s cubic-bezier(.7, 0, .2, 1); } #top .lb-p-hi-bascule-images img.is-active { z-index: 1; opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1); } #top .lb-p-hi-premiers { display: flex; align-items: baseline; gap: 18px; margin-top: 26px; padding-top: 20px; border-top: 1px solid #e3e8e9; } #top .lb-p-hi-premiers b { flex: 0 0 auto; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 30px; color: #112534; } #top .lb-p-hi-premiers span { font-size: 15px; line-height: 1.6; color: #56656c; } /* 2024 : la remotorisation — en vert */ #top .lb-p-hi-vert.avia-section { position: relative; overflow: hidden; padding: 120px 0 110px; background: radial-gradient(circle at 80% 10%, rgba(143, 209, 176, .14), transparent 40%), radial-gradient(circle at 10% 100%, rgba(95, 174, 138, .12), transparent 40%), #0e2a23; color: #ffffff; } #top .lb-p-hi-vert .lb-a-filigrane { color: rgba(143, 209, 176, .05); } #top .lb-p-hi-vert .lb-a-surtitre { color: #8fd1b0; } #top .lb-p-hi-vert .lb-a-surtitre::before { background: #8fd1b0; } #top .lb-p-hi-vert .lb-a-h2 { color: #ffffff; } #top .lb-p-hi-vert .lb-a-h2 span { color: #8fd1b0; } #top .lb-p-hi-vert .lb-p-hi-texte > p { color: rgba(255, 255, 255, .78); } #top .lb-p-hi-vert .lb-p-hi-texte > p.lb-a-lead { color: #ffffff; } #top .lb-p-hi-remoto-grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 50px 90px; } #top .lb-p-hi-remoto .lb-p-hi-photo--haute { aspect-ratio: 4 / 5; } #top .lb-p-hi-gains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 70px; border-top: 1px solid rgba(143, 209, 176, .25); } #top .lb-p-hi-gains > div { padding: 30px 24px 0 0; } #top .lb-p-hi-gains > div + div { padding-left: 24px; border-left: 1px solid rgba(143, 209, 176, .16); } #top .lb-p-hi-gains span i { color: #8fd1b0; } #top .lb-p-hi-gains small { color: rgba(255, 255, 255, .7); } #top .lb-p-hi-vert-clair.avia-section { padding: 110px 0; background: radial-gradient(circle at 90% 20%, rgba(143, 209, 176, .25), transparent 40%), #eef5f0; } #top .lb-p-hi-vert-clair .lb-a-surtitre { color: #2f7d5b; } #top .lb-p-hi-vert-clair .lb-a-surtitre::before { background: #5fae8a; } #top .lb-p-hi-vert-clair .lb-a-h2 { color: #163a30; } #top .lb-p-hi-vert-clair .lb-a-h2 span { color: #2f7d5b; } #top .lb-p-hi-bilan-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); align-items: center; gap: 50px 80px; } #top .lb-p-hi-barres { display: grid; gap: 30px; margin-top: 36px; } #top .lb-p-hi-barre h3 { margin: 0 0 12px; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 18px; color: #163a30; } #top .lb-p-hi-barre p { display: grid; grid-template-columns: 60px minmax(0, 1fr) 80px; align-items: center; gap: 14px; margin: 0 0 8px; } #top .lb-p-hi-barre p span { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #5b7a6e; } #top .lb-p-hi-barre p i { display: block; height: 14px; border-radius: 999px; background: #c9d9d0; transform-origin: left; width: var(--l); } #top .lb-p-hi-barre p.is-apres i { background: linear-gradient(90deg, #2f7d5b, #5fae8a); } #top .lb-p-hi-barre p b { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 18px; text-align: right; color: #163a30; } #top .lb-p-hi-barre em { display: inline-block; margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: #2f7d5b; color: #ffffff; font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .6px; } .lb-js #top .lb-p-hi-bilan-chiffres.lb-a-revele .lb-p-hi-barre p i { transform: scaleX(0); } .lb-js #top .lb-p-hi-bilan-chiffres.lb-a-revele.is-visible .lb-p-hi-barre p i { transform: scaleX(1); transition: transform 1.6s cubic-bezier(.2, .8, .2, 1) .4s; } .lb-js #top .lb-p-hi-bilan-chiffres.lb-a-revele.is-visible .lb-p-hi-barre p.is-apres i { transition-delay: .9s; } #top .lb-p-hi-arbres { padding: 44px 36px; background: #163a30; color: #ffffff; text-align: center; box-shadow: 0 30px 70px rgba(22, 58, 48, .25); } #top .lb-p-hi-arbres-icone { display: inline-flex; width: 74px; height: 74px; color: #8fd1b0; } #top .lb-p-hi-arbres-icone svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } #top .lb-p-hi-arbres-icone path { stroke-dasharray: 1; stroke-dashoffset: 0; } .lb-js #top .lb-p-hi-arbres.lb-a-revele .lb-p-hi-arbres-icone path { stroke-dashoffset: 1; } .lb-js #top .lb-p-hi-arbres.lb-a-revele.is-visible .lb-p-hi-arbres-icone path { stroke-dashoffset: 0; transition: stroke-dashoffset 2s cubic-bezier(.45, 0, .2, 1) .3s; } #top .lb-p-hi-arbres b { display: block; margin: 14px 0 10px; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(54px, 5vw, 76px); line-height: 1; color: #ffffff; font-variant-numeric: tabular-nums; } #top .lb-p-hi-arbres p { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .78); } #top .lb-p-hi-engagements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 60px; margin-top: 70px; padding-top: 40px; border-top: 1px solid rgba(22, 58, 48, .15); } #top .lb-p-hi-engagements h3 { margin: 0 0 18px; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 22px; text-transform: uppercase; color: #163a30; } #top .lb-p-hi-engagements li { color: #3e5a50; } #top .lb-p-hi-engagements li svg { stroke: #2f7d5b; } #top .lb-p-hi-bilan-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 60px; } #top .lb-p-hi-bilan-photos .lb-p-hi-photo { aspect-ratio: 3 / 2; } /* La science */ #top .lb-p-hi-science.avia-section { padding: 120px 0; background: #f3f5f5; } #top .lb-p-hi-science-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 50px 90px; } #top .lb-p-hi-science .lb-p-hi-photo { aspect-ratio: 1402 / 799; box-shadow: 0 30px 70px rgba(17, 37, 52, .16); } #top .lb-p-hi-partenaires { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } #top .lb-p-hi-partenaires span { padding: 14px 20px; border: 1px solid #cfd8da; background: #ffffff; font-family: 'Lato', sans-serif; font-size: 19px; color: #112534; } #top .lb-p-hi-partenaires small { color: #5f9098; } /* Aujourd'hui */ #top .lb-p-hi-aujourdhui.avia-section { min-height: 720px; border: 0; } #top .lb-p-hi-aujourdhui .av-section-color-overlay { opacity: 1 !important; background: linear-gradient(90deg, rgba(8, 22, 33, .85) 0%, rgba(8, 22, 33, .55) 45%, rgba(8, 22, 33, .1) 75%) !important; } #top .lb-p-hi-aujourdhui .av-section-color-overlay-wrap { display: flex; align-items: center; min-height: inherit; } #top .lb-p-hi-aujourdhui .container { width: 100%; } #top .lb-p-hi-aujourdhui-contenu { max-width: 600px; padding: 120px 0; color: #ffffff; } #top .lb-p-hi-aujourdhui .lb-a-surtitre { color: #a8d4d8; } #top .lb-p-hi-aujourdhui .lb-a-surtitre::before { background: #a8d4d8; } #top .lb-p-hi-aujourdhui h2 { margin: 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: clamp(36px, 4.2vw, 62px); line-height: 1.04; text-transform: uppercase; color: #ffffff; } #top .lb-p-hi-aujourdhui h2 span { color: #a8d4d8; } #top .lb-p-hi-aujourdhui-contenu > p { margin-top: 22px; font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, .86); } #top .lb-p-hi-aujourdhui-contenu > p.lb-p-hi-aujourdhui-fin { font-family: 'Fraunces', serif; font-style: italic; font-size: 20px; line-height: 1.5; color: #ffffff; } #top .lb-p-hi-aujourdhui .lb-d-cta2-boutons { justify-content: flex-start; } /* Page Histoire : tablette et mobile */ @media (max-width: 989px) { #top .lb-p-hi-naissance.avia-section, #top .lb-p-hi-station.avia-section, #top .lb-p-hi-temoin.avia-section, #top .lb-p-hi-seconde.avia-section, #top .lb-p-hi-conversion.avia-section, #top .lb-p-hi-avantapres.avia-section, #top .lb-p-hi-vert.avia-section, #top .lb-p-hi-vert-clair.avia-section, #top .lb-p-hi-science.avia-section { padding: 80px 0; } #top .lb-p-hi-naissance-grille, #top .lb-p-hi-station-grille, #top .lb-p-hi-temoin-grille, #top .lb-p-hi-seconde-grille, #top .lb-p-hi-conversion-grille, #top .lb-p-hi-avantapres-grille, #top .lb-p-hi-remoto-grille, #top .lb-p-hi-bilan-grille, #top .lb-p-hi-science-grille, #top .lb-p-hi-engagements { grid-template-columns: minmax(0, 1fr); } #top .lb-p-hi-hero.avia-section { min-height: 760px; } #top .lb-p-hi-frise { flex-wrap: wrap; gap: 26px 18px; justify-content: flex-start; bottom: 36px; } #top .lb-p-hi-frise a i { display: none; } #top .lb-p-hi-hero .lb-a-hero-contenu { padding-bottom: 210px; } #top .lb-p-hi-mesures, #top .lb-p-hi-gains { grid-template-columns: repeat(2, minmax(0, 1fr)); } #top .lb-p-hi-mesures > div, #top .lb-p-hi-mesures > div + div, #top .lb-p-hi-gains > div, #top .lb-p-hi-gains > div + div { padding: 24px 16px 18px 0; border-left: 0; } #top .lb-p-hi-chantier ul { columns: 1; } #top .lb-p-hi-registre { transform: none; } #top .lb-p-hi-carte-cadre { margin: 0; } #top .lb-p-hi-dessin { margin-top: 50px; } #top .lb-p-hi-photo--haute, #top .lb-p-hi-remoto .lb-p-hi-photo--haute { aspect-ratio: 4 / 3; } #top .lb-p-hi-aujourdhui .av-section-color-overlay { background: rgba(8, 22, 33, .65) !important; } } @media (max-width: 640px) { #top .lb-p-hi-registre { padding: 26px 22px; } #top .lb-p-hi-tampon { width: 90px; height: 90px; right: 14px; bottom: 30px; font-size: 10px; } #top .lb-p-hi-dates li { grid-template-columns: minmax(0, 1fr); gap: 4px; } #top .lb-p-hi-bilan-photos { grid-template-columns: minmax(0, 1fr); } #top .lb-p-hi-barre p { grid-template-columns: 52px minmax(0, 1fr) 64px; gap: 10px; } #top .lb-p-hi-mission { grid-template-columns: minmax(0, 1fr); } #top .lb-p-hi-mission i { transform: rotate(90deg); } } /* ---------- Tablette et mobile ---------- */ @media (max-width: 989px) { #top .lb-p-hero.avia-section { min-height: 640px; } #top .lb-p-intro.avia-section, #top .lb-p-envies-section.avia-section, #top .lb-p-inclus.avia-section, #top .lb-p-bord.avia-section, #top .lb-p-projet.avia-section { padding: 80px 0; } #top .lb-p-intro-grille, #top .lb-p-envies-entete, #top .lb-p-envies, #top .lb-p-inclus-grille, #top .lb-p-projet-grille { grid-template-columns: minmax(0, 1fr); } #top .lb-p-envies-visuel { min-height: 340px; } #top .lb-p-envie { padding: 22px 24px 22px 26px; } #top .lb-p-inclus-titre { position: static; } #top .lb-p-echelle .av-section-color-overlay { background: rgba(8, 22, 33, .62) !important; } #top .lb-p-echelle-contenu { margin-left: 0; padding: 90px 0; } #top .lb-p-bord-mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 210px; } #top .lb-p-bord-photo:nth-child(1) { grid-column: span 2; grid-row: span 2; } #top .lb-p-bord-photo:nth-child(2) { grid-row: span 2; } #top .lb-p-bord-photo:nth-child(5) { grid-column: auto; } #top .lb-p-etapes { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 64px; } #top .lb-p-etapes::before { top: 32px; bottom: 32px; left: 32px; right: auto; width: 1px; height: auto; transform-origin: top; } .lb-js #top .lb-p-etapes.lb-a-revele::before { transform: scaleY(0); } .lb-js #top .lb-p-etapes.lb-a-revele.is-visible::before { transform: scaleY(1); } #top .lb-p-etapes li { padding-left: 90px; text-align: left; } #top .lb-p-etapes p { margin: 0; } #top .lb-p-etape-icone { position: absolute; top: 0; left: 0; } } @media (max-width: 640px) { #top .lb-p-intro-colonnes, #top .lb-p-inclus-liste { grid-template-columns: minmax(0, 1fr); } #top .lb-p-inclus-liste li:nth-child(odd), #top .lb-p-inclus-liste li:nth-child(even) { padding: 24px 0; border-right: 0; } #top .lb-p-envie { grid-template-columns: 46px minmax(0, 1fr); gap: 0 16px; } #top .lb-p-envie-icone { width: 46px; height: 46px; } #top .lb-p-envie strong { font-size: 21px; } #top .lb-p-bord-mosaique { grid-auto-rows: 170px; } }