:root{ --bg: #0b0f18; --white: #ffffff; --muted: rgba(255,255,255,.75); --line: rgba(255,255,255,.45); --chip: rgba(0,0,0,.30); --note: #08a24a; --shadow: 0 12px 40px rgba(0,0,0,.35); --radius: 18px; } .bg, .bg-image, .bg-dim{ pointer-events: none; } *{ box-sizing: border-box; } html,body{ height:100%; } body{ margin:0; font-family: "NouvelR"; color: var(--white); background: var(--bg); overflow:hidden; } @font-face { font-family: "NouvelR"; src: url("./fonts/nouvelRBold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } .bg{ position:fixed; inset:0; z-index:-2; } .bg-video{ width:100%; height:100%; object-fit:cover; } .bg-image{ position:absolute; inset:0; background-size: cover; background-position: center; background-repeat: no-repeat; } .bg-dim{ position:absolute; inset:0; } .topbar{ position:fixed; top:0; left:0; right:0; padding: 28px 24px 18px; display:flex; justify-content:center; pointer-events:none; } .title{ margin:0; letter-spacing: .10em; font-weight: 600; font-size: clamp(22px, 4vw, 56px); text-transform: uppercase; opacity:.95; } .btn-outline{ display:inline-flex; align-items:center; justify-content:center; padding: 16px 26px; border-radius: 14px; border: 2px solid var(--line); color: var(--white); text-decoration:none; background: rgba(0,0,0,.25); font-weight: 600; letter-spacing: .06em; } .btn-solid{ display:inline-flex; align-items:center; justify-content:center; padding: 12px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0); color: var(--white); background: rgba(255,255,255,0); font-weight: 600; } .lang{ display:flex; gap:12px; } /* Désactive l'ancien footer si tu le gardes */ .bottombar { display:none; } /* ===== Positionnement comme maquette ===== */ /* Bouton exploration bas gauche */ .btn-explore{ position: fixed; left: 260px; /* ajuste si besoin */ bottom:69px; /* ajuste si besoin */ z-index: 10; display:flex; align-items:center; justify-content:center; min-width: 385px; height: 125px; padding-top: 28px; padding-bottom: 32px; padding-left: 28px; padding-right: 28px; border-radius: 28px; border: 4pt solid rgba(255,255,255,1); background: transparent; color: #fff; text-decoration:none; font-family: "NouvelR", sans-serif; font-weight: 700; font-size: 60px; line-height: 1.05; text-align: center; text-transform: lowercase; /* comme "exploration" */ letter-spacing: .02em; } /* Couche qui couvre tout l'écran */ .hotspots{ position: fixed; inset: 0; z-index: 5; /* au-dessus du fond, en dessous des boutons fixed si tu veux */ } /* Boutons invisibles */ .hotspot{ position: absolute; background: transparent; border: none; padding: 0; cursor: pointer; /* utile sur borne */ outline: none; -webkit-tap-highlight-color: transparent; } /* DEBUG : active pour voir tes zones -> ajoute la classe debug à : */ body.debug .hotspot{ border: 4px dashed rgba(255,255,255,.7); background: rgba(255,255,255,.08); border-radius: 18px; } /* ============================= ZONES 4K (3840x2160) ============================= */ /* Batterie (zone autour du bloc à gauche) */ .hs-battery{ left: 170px; top: 880px; width: 1250px; height: 1200px; } /* Chargeur (zone autour du bloc en bas à droite) */ .hs-charger{ left: 2150px; top: 1330px; width: 1500px; height: 730px; } /* Moteur (zone autour du bloc en haut à droite) */ .hs-motor{ left: 2250px; top: 280px; width: 1450px; height: 720px; } .btn-cross{ position: fixed; right: 140px; /* ajuste si besoin */ top:69px; /* ajuste si besoin */ z-index: 10; display:flex; align-items:center; justify-content:center; width: 125px; height: 125px; padding-top: 28px; padding-bottom: 32px; padding-left: 28px; padding-right: 28px; border-radius: 28px; border: 4pt solid rgba(255,255,255,1); background: transparent; color: #fff; text-decoration:none; font-family: "NouvelR", sans-serif; font-weight: 700; font-size: 60px; line-height: 1.05; text-align: center; } /* Bloc langue bas droite */ .lang-fixed{ position: fixed; right: 140px; /* ajuste si besoin */ bottom: 69px; /* ajuste si besoin */ z-index: 10; display:flex; gap: 26px; } .lang-square{ width: 125px; height: 125px; border-radius: 28px; border: 4pt solid rgba(255,255,255,1); background: transparent; color:#fff; font-family: "NouvelR"; font-weight: 700; font-size: 60px; letter-spacing: .02em; display:flex; align-items:center; justify-content:center; } /* état sélectionné (ex: EN actif) */ .lang-square.is-active{ background: rgba(255,255,255,.95); border-color: rgba(255,255,255,.95); color:#111; } .content{ position:fixed; inset: 120px 24px 110px; display:flex; align-items:flex-start; justify-content:center; } .menu{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; padding-top: 40px; } .chip{ padding: 14px 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--chip); color: var(--white); font-weight: 700; letter-spacing:.04em; cursor:pointer; } /* MODAL */ .modal{ position:fixed; inset:0; display:none; z-index:50; } .modal.is-open{ display:block; } .modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.65); } .modal-panel{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; /* calc(100vw - 100px);*/ height: 100vh;/*calc(100vh - 100px);*/ display: flex; z-index: 60; } .modal-close{ position: fixed; right: 140px; /* ajuste si besoin */ top:69px; /* ajuste si besoin */ z-index: 10; display:flex; align-items:center; justify-content:center; width: 125px; height: 125px; padding-top: 28px; padding-bottom: 32px; padding-left: 28px; padding-right: 28px; border-radius: 28px; border: 4pt solid rgba(255,255,255,1); background: transparent; color: #fff; text-decoration:none; font-family: "NouvelR", sans-serif; font-weight: 700; font-size: 60px; line-height: 1.05; text-align: center; } .modal-video{ width: 100%; height: 100%; object-fit:cover; flex: 1; } .modal-controls{ position: fixed; justify-content:center; padding-top: 12px; } .btn-playpause{ position: fixed; left: 50%; transform: translateX(-50%); bottom: 69px; /* ajuste si besoin */ width: 125px; height: 125px; padding: 0; /* important */ display:flex; align-items:center; justify-content:center; } .btn-playpause img{ display:block; /* important */ width: 125px; height: 125px; }