/* ============================================================================ tour-lk.css — décor cinématographique en arrière-plan de la landing LK Studio À charger APRÈS css/style.css. ========================================================================== */ /* --- La vidéo occupe tout l'écran, derrière le contenu -------------------- object-fit: cover reproduit le cadrage plein écran quel que soit le ratio de la fenêtre. z-index -2 la place sous tout le contenu de la page. */ #tour-lk-video { position: fixed; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; pointer-events: none; } #tour-lk-video.pret { opacity: 1; } /* --- Voile : retiré --------------------------------------------------------- Un voile sombre (body::after, variable --voile) assombrissait le décor pour garder le texte clair lisible. Retiré à la demande : le coucher de soleil sort maintenant à sa luminosité réelle. Pour le remettre, réintroduire : :root { --voile: .58; } body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: linear-gradient(180deg, rgba(5,5,8,calc(var(--voile) + .12)) 0%, rgba(5,5,8,var(--voile)) 35%, rgba(5,5,8,var(--voile)) 65%, rgba(5,5,8,calc(var(--voile) + .10)) 100%); } ::after et non ::before : index.html pose déjà body.studio-home::before. */ /* --- Laisser passer le décor ---------------------------------------------- */ html, body { background: transparent !important; } /* Les sections ne doivent pas masquer le décor. */ main, section, .section, .hero-content { background: transparent; } footer { background: rgba(2, 2, 4, .82); } /* ============================================================================ LES TROIS PLANS Chaque plan occupe l'écran et n'apparaît que sur son étape. Le pilotage se fait entièrement par l'attribut data-etape posé sur par tour-lk.js : aucun JavaScript de plus à écrire ici. ========================================================================== */ .plan { position: fixed; inset: 0; z-index: 2; display: grid; padding: clamp(1.75rem, 4.2vw, 4rem); opacity: 0; visibility: hidden; pointer-events: none; /* Durée de DISPARITION : c'est l'état vers lequel on transite quand le plan cesse d'être actif. Volontairement court — sinon, le mouvement de caméra retour étant devenu rapide, on voyait encore le plan précédent s'effacer alors qu'on était déjà arrivé sur le suivant. */ transition: opacity .12s ease, visibility .12s; } /* Durée d'APPARITION, portée par l'état actif : plus posée. */ body[data-etape="tour"] .plan-tour, body[data-etape="atelier"] .plan-atelier, body[data-etape="flightledger"] .plan-fl { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .45s ease, visibility .45s; } /* Apparition : montée + net progressif, décalée élément par élément via --d. L'état de repos est porté par [data-anim], l'état d'arrivée par le plan actif — donc tout se rejoue à chaque passage, dans les deux sens. */ .plan [data-anim] { opacity: 0; transform: translateY(26px); filter: blur(7px); transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1), filter .75s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0s); } body[data-etape="tour"] .plan-tour [data-anim], body[data-etape="atelier"] .plan-atelier [data-anim], body[data-etape="flightledger"] .plan-fl [data-anim] { opacity: 1; transform: none; filter: none; } /* ---- Transit : écran nu pendant le mouvement de caméra ------------------- tour-lk.js pose .en-transit sur dès le geste et l'enlève quand la caméra se pose. Le plan courant s'efface donc immédiatement, sans attendre le changement de data-etape qui n'intervient qu'à l'arrivée. Ces règles doivent rester APRÈS celles ci-dessus : elles ont la même spécificité, c'est l'ordre de la feuille qui les fait gagner. */ body.en-transit .plan { opacity: 0; visibility: hidden; pointer-events: none; transition-duration: .12s; } /* remise à l'état de départ, pour que l'entrée se rejoue entièrement */ body.en-transit .plan [data-anim] { opacity: 0; transform: translateY(26px); filter: blur(7px); transition-duration: .12s; transition-delay: 0s; } /* Exception : le carnet 3D ne se coupe pas. Il se referme et ressort du cadre pendant le mouvement de caméra, il faut donc que le plan 3 reste affiché le temps de cette sortie. Uniquement quand on QUITTE l'étape flightledger — d'où le sélecteur d'attribut, sans lequel le plan 3 apparaîtrait pendant toutes les autres transitions. */ body.en-transit[data-etape="flightledger"] .plan-fl { opacity: 1; visibility: visible; } body.en-transit[data-etape="flightledger"] .plan-fl .carnet-legende { opacity: 0; } /* --- Plan 1 : la tour ----------------------------------------------------- */ .plan-tour { grid-template-rows: 1fr auto; gap: clamp(1.5rem, 3vw, 3rem); } .plan-tour .plan-gauche { align-self: center; max-width: min(48vw, 640px); /* la tour occupe le centre : on reste à gauche */ } .plan-tour .marque { display: block; margin-bottom: clamp(1rem, 2vw, 1.75rem); font-family: 'DM Mono', monospace; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } /* Typographie reprise du grand titre d'origine : même graisse 500, même chasse très resserrée (-.07em), même interligne compact (.85), capitales. Seule la couleur change — blanc plutôt que crème. */ .plan-tour .titre-tour { margin: 0; font-family: var(--hero-sans); font-weight: 500; font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .85; letter-spacing: -.07em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 40px rgba(0, 0, 0, .45); } .plan-tour .texte-ludens { margin: clamp(1.2rem, 2.4vw, 2rem) 0 0; max-width: 34em; font-family: var(--hero-sans); font-size: clamp(.86rem, 1.02vw, 1rem); line-height: 1.62; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 22px rgba(0, 0, 0, .55); } .plan-tour .texte-ludens strong { color: #fff; font-weight: 600; } .plan-tour .trois-textes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3.4vw, 4rem); max-width: 1500px; } .plan-tour .trois-textes .num { display: block; padding-bottom: .55rem; margin-bottom: .8rem; border-bottom: 1px solid rgba(255, 255, 255, .28); font-family: 'DM Mono', monospace; font-size: .64rem; letter-spacing: .17em; text-transform: uppercase; color: rgba(255, 255, 255, .68); } .plan-tour .trois-textes h2 { margin: 0 0 .5rem; font-family: var(--hero-sans); font-weight: 600; font-size: clamp(1rem, 1.35vw, 1.3rem); letter-spacing: -.015em; color: #fff; text-shadow: 0 1px 20px rgba(0, 0, 0, .5); } .plan-tour .trois-textes p { margin: 0; font-family: var(--hero-sans); font-size: clamp(.8rem, .92vw, .9rem); line-height: 1.55; color: rgba(255, 255, 255, .84); text-shadow: 0 1px 18px rgba(0, 0, 0, .55); } /* Les deux appels à l'action du plan 1, empilés : « Convoquer un agent » en plein, « Nous contacter » en contour juste dessous. */ .plan-tour-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; margin-top: clamp(1.4rem, 2.6vw, 2.2rem); } /* Bouton secondaire du plan 1 : contour seul, pour ne pas concurrencer l'appel à l'action plein juste au-dessus. */ .bouton-contact, .bouton-agent { display: inline-flex; align-items: center; gap: .8rem; padding: .68rem 1.5rem; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; background: transparent; color: #fff; font-family: var(--hero-sans); font-size: clamp(.82rem, .95vw, .94rem); font-weight: 500; cursor: pointer; transition: background .35s ease, color .35s ease, gap .35s ease, border-color .35s ease; } .bouton-contact:hover, .bouton-agent:hover { background: #fff; border-color: #fff; color: #101010; gap: 1.1rem; } /* « Convoquer un agent » est un et non un