/* ================================================== ÆKOZ - INDEX.CSS Styles spécifiques à la landing page. Structure mobile-first : - styles mobiles par défaut - adaptations desktop via media queries ================================================== */ /* ================================================== 1. HEADER / NAVIGATION ================================================== */ .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(5, 20, 27, 0.62); border-bottom: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(16px); } .landing-nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; } /* ================================================== HEADER — LOGO ================================================== */ .landing-nav__logo { display: flex; align-items: center; flex: 0 0 auto; font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: 0.18em; color: var(--color-text); } .landing-nav__logo-image { height: auto; display: block; } .landing-nav__logo-image--desktop { width: 80px; } .landing-nav__logo-image--mobile { display: none; width: 40px; } /* ================================================== HEADER — LIENS ================================================== */ .landing-nav__links { display: flex; align-items: center; justify-content: center; gap: 32px; flex: 1; } .landing-nav__links a { font-size: var(--text-sm); color: var(--color-text); } /* ================================================== HEADER — DROPDOWN PRODUITS Ce sous-menu s'affiche au survol sur ordinateur. (Le comportement spécial pour mobile est plus bas, dans la media query "max-width: 899px".) ================================================== */ /* Désactive totalement le dropdown Produits (desktop + mobile) tant que body porte la classe ajoutée par le flag JS DROPDOWN_PRODUITS_ACTIF dans index.js */ body.dropdown-produits-inactif .landing-nav__dropdown-menu { display: none !important; } /* .landing-nav__dropdown est juste un conteneur invisible : "position: relative" lui permet de servir de point de repère pour positionner le sous-menu juste en-dessous. */ .landing-nav__dropdown { position: relative; } /* Le sous-menu lui-même. Par défaut il est invisible (opacity: 0) et ne réagit pas aux clics (pointer-events: none), pour qu'on ne puisse pas cliquer "à travers" un menu qu'on ne voit pas. */ .landing-nav__dropdown-menu { position: absolute; /* On colle le sous-menu juste sous le lien (top: 100%, sans espace), et on utilise un padding-top transparent pour créer la marge visuelle de 16px à la place. Pourquoi ce changement : avec un espace vide entre le lien et le menu (l'ancien "calc(100% + 16px)"), la souris traverse une zone qui n'est ni sur le lien ni sur le menu en se déplaçant vers le bas — et le survol CSS s'interrompt pendant ce court trajet, ce qui referme le menu avant même d'avoir pu cliquer dessus. En supprimant cet espace mort (le menu touche directement le lien), la souris reste continuellement "dans" l'un ou l'autre. */ top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 160px; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 10; } /* Le rendu visuel (fond, bordure, arrondi) est maintenant sur un élément interne plutôt que sur .landing-nav__dropdown-menu directement, car ce dernier porte le padding-top invisible utilisé pour la zone de survol — on ne veut pas que ce padding fasse aussi partie de la carte visible. */ .landing-nav__dropdown-menu-inner { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: rgba(5, 20, 27, 0.96); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; backdrop-filter: blur(18px); } /* Règle clé : quand la souris survole .landing-nav__dropdown (le conteneur), OU quand la classe "is-open" lui est ajoutée par le JavaScript (cas du mobile), on rend le sous-menu visible et cliquable, et on le fait légèrement glisser vers le bas pour une petite animation d'apparition. */ .landing-nav__dropdown:hover .landing-nav__dropdown-menu, .landing-nav__dropdown.is-open .landing-nav__dropdown-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .landing-nav__dropdown-link { font-size: var(--text-sm); font-weight: var(--weight-semibold); } /* Chaque lien du sous-menu reprend la couleur de marque de sa formule, pour qu'on reconnaisse Origin/Business/Care au premier coup d'œil, ici comme ailleurs sur le site. */ .landing-nav__dropdown-link--origin { color: #E74F01; } .landing-nav__dropdown-link--business { color: #245BFF; } .landing-nav__dropdown-link--care { color: #18C9B7; } /* ================================================== HEADER — CTA DESKTOP ================================================== */ .landing-nav__demo-desktop { flex: 0 0 auto; } /* Bouton mobile caché sur desktop */ .landing-nav__demo-mobile { display: none; } /* ================================================== HEADER — BURGER Caché sur desktop. ================================================== */ .landing-nav__toggle { display: none; } /* ================================================== HEADER — MOBILE ================================================== */ @media (max-width: 899px) { .landing-nav { justify-content: space-between; gap: 16px; } .landing-nav__logo-image--desktop { display: none; } .landing-nav__logo-image--mobile { display: block; } .landing-nav__demo-desktop { display: none; } .landing-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--color-text); font-size: 24px; } .landing-nav__links { position: absolute; top: 100%; left: 0; width: 100%; display: none; flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px; background: rgba(5, 20, 27, 0.96); border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(18px); } .landing-nav.is-open .landing-nav__links { display: flex; } .landing-nav__links a { font-size: var(--text-md); color: var(--color-text); } .landing-nav__demo-mobile { display: inline-flex; padding: 0; color: var(--color-orange); font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1.4; background: transparent; border: 0; cursor: pointer; } .landing-nav.is-open .landing-nav__toggle { color: var(--color-orange); } /* ================================================== DROPDOWN PRODUITS — VERSION MOBILE Sur desktop, le sous-menu flotte au-dessus du contenu (position: absolute) et apparaît au survol. Sur mobile il n'y a pas de survol, donc on change complètement sa façon de s'afficher : - "position: static" : il prend sa place normale dans la page, comme un paragraphe de texte, au lieu de flotter par-dessus. - "display: none" par défaut, "display: flex" quand le JavaScript ajoute la classe "is-open" (au clic). ================================================== */ .landing-nav__dropdown-menu { position: static; transform: none; /* Le padding-top de 16px servait uniquement à éviter la zone morte au survol sur desktop (voir plus haut). Sur mobile il n'y a pas de survol à gérer : on le remet à 0 pour ne pas laisser un espace vide inutile au-dessus du sous-menu déplié. */ padding-top: 0; width: 100%; margin-top: 8px; opacity: 1; pointer-events: auto; display: none; } .landing-nav__dropdown.is-open .landing-nav__dropdown-menu { display: flex; } } /* ================================================== 2. LANDING SECTIONS ================================================== */ .landing-section { position: relative; overflow: hidden; } /* ================================================== 3. HERO ================================================== */ .hero-section { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding-top: 96px; padding-bottom: 96px; text-align: center; background: var(--color-bg); position: relative; overflow: hidden; } /* ================================================== HERO — VIDEO BACKGROUND ================================================== */ .hero-section__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* ================================================== HERO — GLOBAL OVERLAY Couche principale au-dessus de la vidéo. Permet d’assombrir la vidéo avec le token "Background Deep" + dégradés atmosphériques. ================================================== */ .hero-section__overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient( circle at center, rgba(255,255,255,0.04), transparent 42% ), linear-gradient( 180deg, rgba(5,20,27,0.52) 0%, rgba(5,20,27,0.32) 36%, rgba(5,20,27,0.92) 100% ), rgba(5,20,27,0.5); } /* ================================================== HERO — CONTENT Toujours au-dessus des overlays. ================================================== */ .hero-section__content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; } /* ================================================== HERO — TITLE ================================================== */ .hero-section__title { max-width: 980px; font-size: clamp(44px, 13vw, 72px); line-height: 0.96; letter-spacing: -0.055em; } /* ================================================== HERO — TEXT ================================================== */ .hero-section__text { max-width: 720px; margin-top: var(--space-md); font-size: clamp(16px, 4vw, 20px); line-height: 1.65; color: var(--color-text-soft); } .hero-section__text span { color: var(--color-text); } /* ================================================== HERO — ACTIONS ================================================== */ .hero-section__actions { display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%; max-width: 360px; margin-top: var(--space-lg); } .hero-section__button { width: 100%; } /* ================================================== 4. HERO - HORIZON PLANÉTAIRE ================================================== */ .aekoz-hero-planet::before { content: ""; position: absolute; left: 50%; bottom: -24vw; width: 94vw; height: 32vw; transform: translateX(-50%); border-radius: 50% 50% 0 0; border-top: 2px solid rgba(210,235,255,0.68); background: transparent; box-shadow: 0 -1px 12px rgba(255,255,255,0.35), 0 -8px 34px rgba(73,91,105,0.55), 0 -22px 90px rgba(36,54,68,0.70), 0 -36px 130px rgba(16,32,45,0.80); pointer-events: none; z-index: 2; } .aekoz-hero-planet::after { content: ""; position: absolute; left: 50%; bottom: 1.2vw; width: 65vw; height: 90px; transform: translateX(-50%); background: radial-gradient( ellipse at center, rgba(210,235,255,0.18) 0%, rgba(36,54,68,0.24) 28%, rgba(231,79,1,0.06) 46%, rgba(0,0,0,0) 76% ); filter: blur(28px); pointer-events: none; z-index: 1; } /* ================================================== HERO — SCROLL INDICATOR Chevron fixé en bas du viewport. ================================================== */ .hero-scroll-indicator { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 20; opacity: 0.72; pointer-events: none; animation: heroScrollFloat 2.2s ease-in-out infinite; } /* ================================================== HERO — SCROLL INDICATOR HIDDEN STATE ================================================== */ .hero-scroll-indicator { transition: opacity 0.35s ease, transform 0.35s ease; } .hero-scroll-indicator.is-hidden { opacity: 0 !important; transform: translateX(-50%) translateY(12px); pointer-events: none; animation: none; } /* ================================================== HERO — SCROLL INDICATOR MOBILE ================================================== */ @media (max-width: 767px) { .hero-scroll-indicator { bottom: 18px; } } .hero-scroll-indicator span { display: block; width: 18px; height: 18px; border-right: 2px solid rgba(255,255,255,0.82); border-bottom: 2px solid rgba(255,255,255,0.82); transform: rotate(45deg); box-shadow: 0 0 12px rgba(255,255,255,0.08); } @keyframes heroScrollFloat { 0% { transform: translateX(-50%) translateY(0); opacity: 0.38; } 50% { transform: translateX(-50%) translateY(8px); opacity: 1; } 100% { transform: translateX(-50%) translateY(0); opacity: 0.38; } } /* ================================================== 5. MEMORY LOSS SECTION ================================================== */ .memory-loss-section { min-height: 100svh; padding-top: 120px; background: radial-gradient( circle at top right, rgba(73,91,105,0.24), transparent 36% ), var(--color-bg); } .memory-loss-section__inner { display: flex; flex-direction: column; gap: 56px; } .memory-loss-section__header { max-width: 900px; } .memory-loss-section__title { font-size: clamp(44px, 12vw, 72px); line-height: 1; letter-spacing: -0.055em; } .memory-loss-section__title span { color: var(--color-orange); } .memory-loss-section__intro { max-width: 620px; margin-top: var(--space-md); color: var(--color-text-soft); } .memory-loss-grid { display: grid; grid-template-columns: 1fr; gap: 32px; } .memory-loss-card { position: relative; aspect-ratio: 16 / 9; min-height: 280px; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid rgba(153,167,170,0.22); background: rgba(255,255,255,0.03); box-shadow: 0 0 42px rgba(0,0,0,0.36); transition: transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium), filter 0.2s linear, opacity 0.2s linear; } .memory-loss-card:hover { transform: translateY(-4px); border-color: rgba(231,79,1,0.30); box-shadow: 0 0 48px rgba(231,79,1,0.12); } .memory-loss-card__image { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88) contrast(1.04); transition: transform var(--transition-slow), filter var(--transition-medium); } .memory-loss-card:hover .memory-loss-card__image { transform: scale(1.035); filter: saturate(1) contrast(1.08); } .memory-hotspot { position: absolute; right: 22px; bottom: 22px; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--color-orange); box-shadow: 0 0 0 8px rgba(231,79,1,0.10), 0 0 24px rgba(231,79,1,0.55); z-index: 3; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .memory-hotspot::before { content: ""; position: absolute; inset: -10px; border-radius: inherit; border: 1px solid rgba(231,79,1,0.28); animation: memoryPulse 2.8s ease-in-out infinite; } .memory-hotspot:hover { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(231,79,1,0.14), 0 0 34px rgba(231,79,1,0.75); } @keyframes memoryPulse { 0% { transform: scale(0.76); opacity: 0.7; } 70%, 100% { transform: scale(1.35); opacity: 0; } } .memory-popover { position: absolute; left: 18px; right: 18px; bottom: 18px; width: auto; max-width: min(420px, calc(100% - 36px)); min-width: 0; padding: 18px 20px; box-sizing: border-box; border-radius: var(--radius-md); background: linear-gradient( 135deg, rgba(255,255,255,0.18), rgba(231,79,1,0.10) ); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,0.28); opacity: 0; transform: translateY(12px); pointer-events: none; z-index: 4; transition: opacity var(--transition-fast), transform var(--transition-fast); } .memory-loss-card.is-open .memory-popover { opacity: 1; transform: translateY(0); } .memory-popover p { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--color-text); } .memory-loss-section__statement { margin-top: 96px; padding: 28px 24px; background: var(--color-orange); text-align: center; } .memory-loss-section__statement p { max-width: 1100px; margin-inline: auto; color: var(--color-text); font-size: clamp(16px, 3.8vw, 22px); line-height: 1.45; } /* ================================================== 6. HOW SECTION ================================================== */ .how-section { min-height: 100svh; display: flex; align-items: center; padding-top: 120px; padding-bottom: 120px; background: radial-gradient( circle at center, rgba(73,91,105,0.16), transparent 42% ), var(--color-bg); } .how-section__inner { display: flex; flex-direction: column; align-items: center; gap: 64px; text-align: center; } .how-section__title { font-size: clamp(44px, 12vw, 72px); line-height: 1; letter-spacing: -0.055em; } .how-steps { display: grid; grid-template-columns: 1fr; gap: 56px; width: 100%; } .how-step { display: flex; flex-direction: column; align-items: center; max-width: 280px; margin-inline: auto; } .how-step__title { margin-top: 28px; font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-text); } .how-step__text { margin-top: 18px; font-size: var(--text-md); line-height: 1.55; color: var(--color-text-soft); } .how-step__icon { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin-inline: auto; } .how-step__icon-image { max-width: 86px; transition: transform var(--transition-medium), filter var(--transition-medium); } .how-step__icon-image--capture { max-width: 92px; } .how-step:hover .how-step__icon-image { transform: translateY(-4px) scale(1.06); filter: drop-shadow(0 0 18px rgba(231,79,1,0.28)); } .how-section__actions { display: flex; justify-content: center; } /* ================================================== 7. GROWTH SECTION ================================================== */ .growth-section { min-height: 100svh; display: flex; align-items: center; padding-top: 120px; padding-bottom: 120px; background: radial-gradient( circle at bottom right, rgba(153,167,170,0.18), transparent 38% ), var(--color-bg); } .growth-section__inner { display: grid; grid-template-columns: 1fr; gap: 72px; } .growth-section__title { font-size: clamp(44px, 12vw, 72px); line-height: 1; letter-spacing: -0.055em; text-align: center; } .growth-section__content { width: 100%; text-align: left; } .growth-section__blocks { margin-top: 48px; } .growth-block { padding-block: 20px; } .growth-section__phones { display: grid; grid-template-columns: 1fr; gap: 40px; justify-items: center; } .aekoz-phone { width: 250px; height: 510px; justify-self: center; } /* ================================================== 8. SECTION RÉSEAU — TÉLÉPHONES ÆKOZ ================================================== Cette section gère les deux téléphones CSS : - téléphone vide - téléphone galaxie remplie ================================================== */ /* -------------------------------------------------- 8.1 TÉLÉPHONE — COQUE EXTERNE Taille contrôlée pour une grille en 3 colonnes. -------------------------------------------------- */ .aekoz-phone { width: 250px; height: 510px; margin: 0 auto; padding: 14px; position: relative; border-radius: 48px; background: linear-gradient( 180deg, #2A2D35 0%, #12141B 100% ); box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 1px rgba(255,255,255,0.08); } /* -------------------------------------------------- 8.2 TÉLÉPHONE — ÉCRAN INTERNE Fond spatial sombre et coins internes. -------------------------------------------------- */ .phone-screen { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 36px; background: radial-gradient( circle at top, rgba(36,54,68,0.35), rgba(0,0,0,0) 45% ), linear-gradient( 180deg, #071018 0%, #02060B 100% ); } /* -------------------------------------------------- 8.3 TÉLÉPHONE — ENCOCHE / DYNAMIC ISLAND -------------------------------------------------- */ .phone-notch { width: 120px; height: 30px; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 10; background: #000; border-radius: 0 0 18px 18px; } /* -------------------------------------------------- 8.4 TÉLÉPHONE — HEADER INTERNE -------------------------------------------------- */ .phone-header { display: flex; justify-content: space-between; align-items: center; padding: 58px 22px 0; color: rgba(255,255,255,0.75); font-size: 15px; } /* -------------------------------------------------- 8.5 TÉLÉPHONE — LOGO CENTRAL -------------------------------------------------- */ .phone-header .logo { color: #FFFFFF; font-size: 20px; font-weight: 500; letter-spacing: -0.03em; } /* -------------------------------------------------- 8.6 TÉLÉPHONE — ZONE CENTRALE Positionne l'anneau mémoire, le titre et le texte. -------------------------------------------------- */ .phone-center { position: absolute; top: 49%; left: 50%; width: 100%; padding: 0 20px; transform: translate(-50%, -50%); text-align: center; } /* -------------------------------------------------- 8.7 TÉLÉPHONE VIDE — ANNEAU MÉMOIRE Cercle abstrait de première mémoire. -------------------------------------------------- */ .memory-ring { width: 140px; height: 140px; margin: 0 auto 28px; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.18); } .memory-ring::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(231,79,1,0.08); } /* -------------------------------------------------- 8.8 TÉLÉPHONE VIDE — ICÔNE UTILISATEUR -------------------------------------------------- */ .memory-user { width: 48px; height: 48px; position: relative; border-radius: 50%; border: 2px solid rgba(255,255,255,0.65); } .memory-user::before { content: ""; width: 18px; height: 18px; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); border-radius: 50%; border: 2px solid rgba(255,255,255,0.65); } /* -------------------------------------------------- 8.9 TÉLÉPHONE — TITRE ET TEXTE -------------------------------------------------- */ .phone-center h3 { margin-bottom: 14px; color: #FFF; font-size: 21px; font-weight: 700; line-height: 1.12; } .phone-center p { margin: 0; color: rgba(255,255,255,0.58); font-size: 12px; line-height: 1.45; } /* -------------------------------------------------- 8.10 TÉLÉPHONE — BOUTON + -------------------------------------------------- */ .memory-add { width: 58px; height: 58px; position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); border: none; border-radius: 50%; background: linear-gradient( 180deg, #10202D 0%, #0B131C 100% ); color: #FFFFFF; font-size: 32px; font-weight: 300; box-shadow: 0 0 25px rgba(231,79,1,0.12), inset 0 1px 1px rgba(255,255,255,0.08); cursor: pointer; } /* -------------------------------------------------- 8.11 TÉLÉPHONE GALAXIE — FOND ÉCRAN Différencie l'état rempli de l'état vide. -------------------------------------------------- */ .aekoz-phone-galaxy .phone-screen { background: radial-gradient( circle at 50% 34%, rgba(36,54,68,0.42), rgba(0,0,0,0) 46% ), linear-gradient( 180deg, #071018 0%, #02060B 100% ); } /* -------------------------------------------------- 8.12 TÉLÉPHONE GALAXIE — ZONE GALAXIE Schéma abstrait de mémoire relationnelle. -------------------------------------------------- */ .galaxy-map { width: 164px; height: 164px; position: absolute; top: 100px; left: 50%; transform: translateX(-50%); border-radius: 50%; filter: drop-shadow(0 0 18px rgba(231,79,1,0.10)); } .galaxy-map::before { content: ""; width: 136px; height: 136px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dotted rgba(255,255,255,0.10); } .galaxy-map::after { content: ""; width: 190px; height: 190px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, rgba(231,79,1,0.08) 0%, rgba(231,79,1,0.03) 32%, rgba(0,0,0,0) 70% ); pointer-events: none; } /* -------------------------------------------------- 8.13 TÉLÉPHONE GALAXIE — ORBITES Cercles schématiques de la galaxie. -------------------------------------------------- */ .galaxy-orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(255,255,255,0.10); } .orbit-1 { width: 72px; height: 72px; } .orbit-2 { width: 112px; height: 112px; border-style: dashed; border-color: rgba(255,255,255,0.13); } .orbit-3 { width: 142px; height: 142px; border-color: rgba(231,79,1,0.18); } /* -------------------------------------------------- 8.14 TÉLÉPHONE GALAXIE — NŒUDS / ÉTOILES Points de relation dans la galaxie. -------------------------------------------------- */ .galaxy-node { width: 6px; height: 6px; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.72); box-shadow: 0 0 8px rgba(255,255,255,0.24); z-index: 2; } .node-main { width: 28px; height: 28px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: transparent; border: 2px solid rgba(255,255,255,0.70); box-shadow: 0 0 18px rgba(255,255,255,0.12); } .node-1 { left: 24px; top: 72px; background: #E74F01; box-shadow: 0 0 8px rgba(231,79,1,0.95), 0 0 18px rgba(231,79,1,0.45); } .node-2 { right: 34px; top: 42px; background: rgba(255,255,255,0.82); box-shadow: 0 0 8px rgba(255,255,255,0.36); } .node-3 { right: 24px; top: 92px; background: #E74F01; box-shadow: 0 0 8px rgba(231,79,1,0.95), 0 0 20px rgba(231,79,1,0.48); } .node-4 { left: 50px; bottom: 32px; background: rgba(255,255,255,0.72); } .node-5 { left: 76px; top: 18px; background: rgba(255,255,255,0.55); } .node-6 { right: 60px; bottom: 34px; background: #243644; box-shadow: 0 0 12px rgba(36,54,68,0.9); } /* -------------------------------------------------- 8.15 TÉLÉPHONE GALAXIE — MICRO-ÉTOILES Ajoute de nombreux points sans HTML supplémentaire. -------------------------------------------------- */ .node-main::after { content: ""; width: 3px; height: 3px; position: absolute; left: -46px; top: -36px; border-radius: 50%; background: rgba(255,255,255,0.75); box-shadow: 34px -18px 0 rgba(255,255,255,0.45), 72px -8px 0 rgba(255,255,255,0.60), 94px 22px 0 rgba(231,79,1,0.85), 62px 54px 0 rgba(255,255,255,0.38), 18px 68px 0 rgba(255,255,255,0.50), -18px 42px 0 rgba(231,79,1,0.80), -34px 8px 0 rgba(255,255,255,0.38), 112px 64px 0 rgba(255,255,255,0.32), 86px 84px 0 rgba(231,79,1,0.70), -8px 88px 0 rgba(255,255,255,0.28); } .node-main::before { content: ""; width: 4px; height: 4px; position: absolute; left: 48px; top: 76px; border-radius: 50%; background: rgba(231,79,1,0.95); box-shadow: 0 0 10px rgba(231,79,1,0.85), -112px -34px 0 rgba(231,79,1,0.75), -112px -34px 12px rgba(231,79,1,0.35), -46px -96px 0 rgba(231,79,1,0.65), -46px -96px 12px rgba(231,79,1,0.30); } /* -------------------------------------------------- 8.16 TÉLÉPHONE GALAXIE — TEXTE Descend le texte sous la carte abstraite. -------------------------------------------------- */ .aekoz-phone-galaxy .galaxy-text { top: 66.3%; padding: 0 20px; } .aekoz-phone-galaxy .galaxy-text h3 { margin-bottom: 14px; font-size: 21px; line-height: 1.12; } .aekoz-phone-galaxy .galaxy-text p { font-size: 12px; line-height: 1.45; } /* -------------------------------------------------- 8.17 TÉLÉPHONE GALAXIE — BOUTON + ACTIF -------------------------------------------------- */ .aekoz-phone-galaxy .memory-add { box-shadow: 0 0 22px rgba(231,79,1,0.20), inset 0 1px 1px rgba(255,255,255,0.08); } /* ================================================== GROWTH — MOBILE STACK FIX Sur mobile, les téléphones reviennent en pile centrée. ================================================== */ .growth-section__phones { display: grid; grid-template-columns: 1fr; gap: 40px; justify-items: center; width: 100%; } .growth-section__phones .aekoz-phone { width: min(78vw, 250px); height: 510px; margin-inline: auto; grid-area: auto; transform: none; } .growth-section__phones .aekoz-phone:first-child, .growth-section__phones .aekoz-phone-galaxy { grid-area: auto; transform: none; } /* ================================================== 9.PERSONAS SECTION ================================================== */ .personas-section { position: relative; padding-top: 140px; padding-bottom: 140px; overflow: hidden; } .personas-section__inner { position: relative; } /* ================================================== HEADER ================================================== */ .personas-section__header { text-align: center; margin-bottom: 72px; } .personas-section__title { font-size: clamp(44px, 8vw, 72px); line-height: 1; letter-spacing: -0.05em; margin-bottom: 24px; } .personas-section__intro { max-width: 720px; margin: 0 auto; font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,0.72); } /* ================================================== LISTE DES PERSONAS ================================================== */ .personas-list { display: flex; flex-direction: column; gap: 48px; } /* ================================================== CARD PERSONA ================================================== */ .persona-panel { display: grid; grid-template-columns: 420px 1fr; background: linear-gradient( 180deg, rgba(5, 7, 15, 0.94) 0%, rgba(2, 4, 10, 0.98) 100% ); border: 1px solid rgba(72, 92, 108, 0.45); border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.015), 0 0 40px rgba(0,0,0,0.28); transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease; opacity: 0; transform: translateY(42px); } .persona-panel.is-visible { opacity: 1; transform: translateY(0); } .persona-panel.is-visible:hover { transform: translateY(-4px); border-color: rgba(231, 79, 1, 0.25); box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 0 60px rgba(231, 79, 1, 0.08); } /* ================================================== VERSION INVERSÉE ================================================== */ .persona-panel--reverse { grid-template-columns: 1fr 420px; } /* ================================================== CONTENU TEXTE ================================================== */ .persona-panel__content { padding: 42px 42px; display: flex; flex-direction: column; justify-content: center; } .persona-panel__content h3 { font-size: 2rem; line-height: 1.1; margin-bottom: 42px; letter-spacing: -0.03em; } .persona-panel__content p { margin: 0 0 28px 0; font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,0.86); } .persona-panel__content strong { display: inline-block; margin-bottom: 8px; color: #FFFFFF; } /* ================================================== IMAGE ================================================== */ .persona-panel__image { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 420px; filter: saturate(0.92) contrast(1.02); } /* ================================================== PERSONAS — INDICATEUR DE PROGRESSION Les points restent visibles pendant le scroll et le JS active le point du persona courant. ================================================== */ .personas-progress { position: fixed; left: clamp(28px, calc(50vw - 820px), 120px); top: 50%; display: flex; flex-direction: column; gap: 14px; transform: translateY(-50%); opacity: 0; pointer-events: none; z-index: 20; transition: opacity 0.25s ease; } .personas-section.is-progress-visible .personas-progress { opacity: 1; } .personas-progress__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.22); transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .personas-progress__dot.is-active { background: var(--color-orange); box-shadow: 0 0 12px rgba(231,79,1,0.75), 0 0 28px rgba(231,79,1,0.28); transform: scale(1.2); } /* ================================================== RESPONSIVE TABLET ================================================== */ @media (max-width: 1100px) { .persona-panel, .persona-panel--reverse { grid-template-columns: 1fr; } .persona-panel--reverse .persona-panel__image { order: -1; } .persona-panel__image { min-height: 420px; } .persona-panel__content { padding: 42px 32px; } .personas-progress { display: none; } } /* ================================================== RESPONSIVE MOBILE Adaptations pour écrans étroits. ================================================== */ @media (max-width: 768px) { .personas-section { padding-top: 110px; padding-bottom: 110px; } .personas-section__header { margin-bottom: 52px; } .personas-section__title { font-size: clamp(38px, 12vw, 56px); } .personas-section__intro { font-size: 1rem; line-height: 1.5; } .personas-list { gap: 32px; } .persona-panel__content { padding: 34px 24px; } .persona-panel__content h3 { font-size: 1.65rem; margin-bottom: 30px; } .persona-panel__content p { font-size: 0.98rem; line-height: 1.6; margin-bottom: 24px; } .persona-panel__image { min-height: 300px; } /* ================================================== MEMORY LOSS — MOBILE POPOVER FIX Empêche le popover de sortir de la card sans écraser le transform vertical d’apparition. ================================================== */ .memory-popover { left: 12px; right: 12px; width: auto; max-width: none; min-width: 0; padding: 14px 16px; } .memory-popover p { font-size: 13px; line-height: 1.45; overflow-wrap: break-word; } /* ================================================== MEMORY LOSS — MOBILE CARD WIDTH FIX Empêche les cards 16/9 de forcer une largeur supérieure au viewport. ================================================== */ .memory-loss-grid { min-width: 0; } .memory-loss-card { width: 100%; max-width: 100%; min-width: 0; min-height: 0; aspect-ratio: 16 / 9; } .memory-loss-card__image { width: 100%; max-width: 100%; } } /* ================================================== LANDING — MOTS ACCENTUÉS DANS LES TITRES Spécifique à la page index pour ne pas impacter le UI kit. ================================================== */ .title-accent { color: var(--color-orange) !important; } /* ================================================== 10. GALAXY SECTION Téléphone central + 24 souvenirs orbitaux. ================================================== */ .galaxy-section { min-height: 100svh; padding-top: 120px; padding-bottom: 150px; background: radial-gradient( circle at center, rgba(153,167,170,0.16), transparent 42% ), var(--color-bg); } .galaxy-section__header { text-align: center; margin-bottom: 64px; } .galaxy-section__title { font-size: clamp(44px, 8vw, 76px); line-height: 1; letter-spacing: -0.055em; } .galaxy-stage { position: relative; width: min(100%, 1480px); min-height: 980px; margin-inline: auto; overflow: visible; } /* ================================================== GALAXY — ORBITES ================================================== */ .galaxy-orbits { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .galaxy-orbits__arc { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 2px solid transparent; transform: translate(-50%, -50%); opacity: 0.72; } .galaxy-orbits__arc--one { width: 520px; height: 520px; border-right-color: rgba(231,79,1,0.82); border-bottom-color: rgba(231,79,1,0.62); transform: translate(-50%, -50%) rotate(18deg); } .galaxy-orbits__arc--two { width: 710px; height: 710px; border-left-color: rgba(153,167,170,0.34); border-bottom-color: rgba(231,79,1,0.62); transform: translate(-50%, -50%) rotate(-22deg); } .galaxy-orbits__arc--three { width: 900px; height: 900px; border-top-color: rgba(231,79,1,0.72); border-right-color: rgba(153,167,170,0.30); transform: translate(-50%, -50%) rotate(42deg); } .galaxy-orbits__arc--four { width: 1120px; height: 1120px; border-left-color: rgba(153,167,170,0.22); border-top-color: rgba(231,79,1,0.40); transform: translate(-50%, -50%) rotate(-54deg); } /* ================================================== GALAXY — TÉLÉPHONE CENTRAL ================================================== */ .galaxy-phone { position: absolute; left: 50%; top: 50%; width: 260px; height: 540px; transform: translate(-50%, -50%); border-radius: 42px; padding: 10px; background: linear-gradient( 180deg, rgba(153,167,170,0.40), rgba(18,20,27,0.95) ); box-shadow: 0 24px 80px rgba(0,0,0,0.48), 0 0 70px rgba(73,91,105,0.20); z-index: 5; } .galaxy-phone__video { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 34px; } /* ================================================== GALAXY — IMAGES ORBITALES Chaque memory peut être déplacée via sa classe --XX. ================================================== */ .galaxy-memory { position: absolute; width: 140px; aspect-ratio: 16 / 9; margin: 0; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 12px 40px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.06); z-index: 3; opacity: var(--memory-opacity, 1); --absorb-x: 0px; --absorb-y: 0px; --absorb-scale: 1; --hover-y: 0px; --hover-scale: 1; transform: translate(var(--absorb-x), var(--absorb-y)) translateY(var(--hover-y)) scale(calc(var(--absorb-scale) * var(--hover-scale))); filter: blur(var(--memory-blur, 4px)); transition: box-shadow 0.35s ease, border-color 0.35s ease; } .galaxy-memory:hover { --hover-y: -4px; --hover-scale: 1.04; border-color: rgba(255,255,255,0.22); box-shadow: 0 18px 50px rgba(0,0,0,0.42), 0 0 28px rgba(231,79,1,0.16); } .galaxy-memory img { width: 100%; height: 100%; display: block; object-fit: cover; filter: contrast(1.1) saturate(0.92); } /* ================================================== GALAXY — POSITIONS DESKTOP 24 images éparses autour du téléphone. ================================================== */ /* Gauche — haut */ .galaxy-memory--01 { left: 16%; top: 5%; width: 120px; } .galaxy-memory--02 { left: 5%; top: 17%; width: 92px; } .galaxy-memory--03 { left: 23%; top: 20%; width: 150px; } .galaxy-memory--04 { left: 1%; top: 36%; width: 115px; } /* Gauche — centre */ .galaxy-memory--05 { left: 12%; top: 43%; width: 165px; } .galaxy-memory--06 { left: 28%; top: 38%; width: 150px; } .galaxy-memory--07 { left: 4%; top: 58%; width: 130px; } .galaxy-memory--08 { left: 24%; top: 61%; width: 105px; } /* Gauche — bas */ .galaxy-memory--09 { left: 14%; bottom: 18%; width: 145px; } .galaxy-memory--10 { left: 31%; bottom: 12%; width: 170px; } .galaxy-memory--11 { left: 2%; bottom: 6%; width: 100px; } .galaxy-memory--12 { left: 22%; bottom: 0%; width: 135px; } /* Droite — haut */ .galaxy-memory--13 { right: 16%; top: 4%; width: 125px; } .galaxy-memory--14 { right: 4%; top: 14%; width: 95px; } .galaxy-memory--15 { right: 25%; top: 22%; width: 155px; } .galaxy-memory--16 { right: 8%; top: 31%; width: 150px; } /* Droite — centre */ .galaxy-memory--17 { right: 1%; top: 45%; width: 170px; } .galaxy-memory--18 { right: 22%; top: 48%; width: 130px; } .galaxy-memory--19 { right: 11%; top: 60%; width: 145px; } .galaxy-memory--20 { right: 30%; top: 65%; width: 110px; } /* Droite — bas */ .galaxy-memory--21 { right: 5%; bottom: 20%; width: 170px; } .galaxy-memory--22 { right: 26%; bottom: 13%; width: 140px; } .galaxy-memory--23 { right: 14%; bottom: 2%; width: 160px; } .galaxy-memory--24 { right: 34%; bottom: 0%; width: 105px; } /* ================================================== GALAXY — RESPONSIVE TABLETTE / MOBILE On garde moins d’images pour éviter le chaos visuel. ================================================== */ @media (max-width: 900px) { .galaxy-section { padding-top: 110px; padding-bottom: 120px; } .galaxy-section__header { margin-bottom: 48px; } .galaxy-stage { min-height: 760px; } .galaxy-phone { width: 220px; height: 460px; } .galaxy-orbits__arc--one { width: 360px; height: 360px; } .galaxy-orbits__arc--two { width: 500px; height: 500px; } .galaxy-orbits__arc--three { width: 620px; height: 620px; } .galaxy-orbits__arc--four { width: 760px; height: 760px; } .galaxy-memory { width: 88px; } .galaxy-memory--02, .galaxy-memory--04, .galaxy-memory--07, .galaxy-memory--08, .galaxy-memory--11, .galaxy-memory--12, .galaxy-memory--14, .galaxy-memory--17, .galaxy-memory--20, .galaxy-memory--22, .galaxy-memory--24 { display: none; } .galaxy-memory--01 { left: 2%; top: 8%; } .galaxy-memory--03 { left: 5%; top: 25%; width: 108px; } .galaxy-memory--05 { left: 1%; top: 46%; width: 116px; } .galaxy-memory--06 { left: 8%; bottom: 18%; width: 96px; } .galaxy-memory--09 { left: 22%; bottom: 4%; width: 110px; } .galaxy-memory--10 { left: 38%; bottom: 0%; width: 115px; } .galaxy-memory--13 { right: 4%; top: 9%; } .galaxy-memory--15 { right: 2%; top: 29%; width: 112px; } .galaxy-memory--16 { right: 6%; top: 45%; width: 104px; } .galaxy-memory--18 { right: 2%; bottom: 24%; width: 104px; } .galaxy-memory--19 { right: 16%; bottom: 10%; width: 96px; } .galaxy-memory--21 { right: 2%; bottom: 2%; width: 116px; } .galaxy-memory--23 { right: 28%; bottom: 6%; width: 100px; } } .galaxy-memory { position: absolute; width: 140px; aspect-ratio: 16 / 9; margin: 0; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.04); /* ================================================== LISERÉ BLANC DISCRET ================================================== */ border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 12px 40px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.04); z-index: 3; opacity: 0.72; transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } /* ================================================== 11. RESPONSIVE DESKTOP ================================================== */ /* ================================================== DESKTOP OVERRIDES Toutes les adaptations desktop centralisées ici. ================================================== */ @media (min-width: 900px) { .landing-nav { min-height: 88px; } .landing-nav__toggle { display: none; } .landing-nav__links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 48px; font-size: var(--text-sm); color: var(--color-text-muted); } .landing-nav__links a { position: relative; display: inline-flex; align-items: center; height: 48px; transition: color var(--transition-fast); } .landing-nav__links a::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 0; height: 2px; transform: translateX(-50%); border-radius: var(--radius-full); background: var(--color-orange); opacity: 0; box-shadow: 0 0 14px rgba(231,79,1,0.85); transition: width var(--transition-fast), opacity var(--transition-fast); } .landing-nav__links a:hover::after, .landing-nav__links a.is-active::after { width: 28px; opacity: 1; } .landing-nav__links a:hover, .landing-nav__links a.is-active { color: var(--color-text); } .landing-nav__cta { display: inline-flex; } .hero-section { min-height: 100vh; padding-top: 120px; padding-bottom: 120px; } .hero-section__actions { display: flex; justify-content: center; max-width: none; } .hero-section__button { width: auto; } .hero-section .btn-secondary { color: var(--color-text); border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); box-shadow: none; } .hero-section .btn-secondary:hover { border-color: rgba(231,79,1,0.45); color: var(--color-text); box-shadow: var(--glow-orange); } .memory-loss-section { min-height: 120vh; padding-top: 150px; } .memory-loss-section__header { margin-inline: auto; text-align: center; } .memory-loss-section__intro { margin-inline: auto; } .memory-loss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1380px; margin-inline: auto; gap: 52px; } .memory-loss-card { min-height: 360px; } .memory-hotspot { right: 28px; bottom: 28px; } .memory-popover { left: 24px; right: 24px; bottom: 24px; max-width: none; padding: 22px 26px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--transition-fast), transform var(--transition-fast); background: linear-gradient( 135deg, rgba(255,255,255,0.16), rgba(231,79,1,0.08) ); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 20px 60px rgba(0,0,0,0.34); } .memory-loss-card.is-open .memory-popover { opacity: 1; transform: translateY(0); } .memory-loss-section__statement { margin-top: 120px; padding: 34px 24px; } .how-section { min-height: 100vh; padding-top: 140px; padding-bottom: 140px; } .how-section__inner { gap: 88px; } .how-steps { grid-template-columns: repeat(3, 1fr); gap: 80px; max-width: 1100px; margin-inline: auto; } .how-step { max-width: 260px; } .how-step__icon-image { max-width: 86px; } .how-step__icon-image--capture { max-width: 112px; } .how-section__actions { margin-top: -16px; } /* ================================================== GROWTH SECTION - DESKTOP Titre centré au-dessus, puis 3 colonnes : texte à gauche, téléphone vide au centre, téléphone galaxie à droite. ================================================== */ .growth-section { min-height: 100vh; padding-top: 110px; padding-bottom: 120px; } .growth-section__inner { grid-template-columns: minmax(320px, 0.9fr) 250px 250px; grid-template-areas: "title title title" "text phone-one phone-two"; align-items: center; gap: 56px 72px; justify-items: start; } .growth-section__title { grid-area: title; max-width: 1180px; margin: 0 auto 24px; text-align: center; width: 100%; justify-self: stretch; } .growth-section__content { grid-area: text; } .growth-section__phones { display: contents; } .aekoz-phone { width: 250px; height: 510px; justify-self: center; } .aekoz-phone:first-child { grid-area: phone-one; transform: translateY(16px); } .aekoz-phone-galaxy { grid-area: phone-two; transform: translateY(16px); } .growth-section__blocks { max-width: 520px; margin-top: 0; } .growth-block { padding-block: 34px; } .growth-block:first-child { padding-top: 0; } } /* ================================================== MODAL — DEMO ÆKOZ Iframe fullscreen immersive. ================================================== */ .demo-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; z-index: 4000; transition: opacity 0.3s ease; } /* ================================================== ÉTAT OUVERT ================================================== */ .demo-modal.is-open { opacity: 1; pointer-events: auto; } /* ================================================== BACKDROP ================================================== */ .demo-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.78); backdrop-filter: blur(12px); } /* ================================================== CONTENU ================================================== */ .demo-modal__content { position: relative; width: min(1600px, 100%); height: min(92vh, 920px); border-radius: 22px; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 120px rgba(0,0,0,0.6), 0 0 80px rgba(231,79,1,0.08); z-index: 2; } /* ================================================== IFRAME ================================================== */ .demo-modal__iframe { width: 100%; height: 100%; border: none; background: #000; } /* ================================================== BOUTON FERMETURE ================================================== */ .demo-modal__close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,0.58); color: #FFF; font-size: 28px; line-height: 1; z-index: 10; transition: background 0.2s ease, transform 0.2s ease; } .demo-modal__close:hover { background: rgba(231,79,1,0.92); transform: scale(1.05); } /* ================================================== RESPONSIVE MOBILE ================================================== */ @media (max-width: 768px) { .demo-modal { padding: 0; } .demo-modal__content { width: 100%; height: 100vh; border-radius: 0; } .demo-modal__close { top: 14px; right: 14px; } } /* ================================================== VIDEO STRIPS SECTION — DESKTOP ONLY 5 vidéos en enfilade avec logo central. ================================================== */ .video-strips-section { position: relative; display: none; width: 100%; height: 100vh; padding: 0; overflow: hidden; background: #000; } /* ================================================== VISIBLE UNIQUEMENT DESKTOP ================================================== */ @media (min-width: 1024px) { .video-strips-section { display: block; } } /* ================================================== GRID VIDÉOS ================================================== */ .video-strips-section__grid { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; height: 100%; } .video-strip { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.95); opacity: 0.94; } /* ================================================== VOILE CINÉMATIQUE Assure une meilleure lisibilité du logo. ================================================== */ .video-strips-section::after { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at center, rgba(5,20,27,0.08), rgba(5,20,27,0.42) 72% ); pointer-events: none; z-index: 1; } /* ================================================== LOGO CENTRAL ================================================== */ .video-strips-section__logo { position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); z-index: 2; opacity: 0.4; pointer-events: none; } /* ================================================== LOGO CENTRAL — IMAGE Réglage indépendant desktop/mobile. ================================================== */ .video-strips-section__logo-image { /* Taille desktop */ width: 250px; /* OU hauteur fixe si tu préfères */ /* height: 120px; */ /* width: auto; */ height: auto; filter: drop-shadow(0 0 26px rgba(0,0,0,0.46)); } /* ================================================== MOBILE / TABLETTE Même si section cachée actuellement, tu gardes une base propre si un jour tu l’actives. ================================================== */ @media (max-width: 768px) { .video-strips-section__logo-image { width: 100px; } } /* ================================================== FINAL DOWNLOAD CTA ================================================== */ .final-download-cta { position: relative; min-height: 100svh; display: flex; align-items: flex-start; justify-content: center; padding-top: 180px; background: var(--color-bg-secondary); overflow: hidden; } .final-download-cta__primary { margin-top: 32px; margin-bottom: 20px; } /* ================================================== INNER ================================================== */ .final-download-cta__inner { display: flex; flex-direction: column; align-items: center; text-align: center; } /* ================================================== TITLE ================================================== */ .final-download-cta__title { max-width: 1100px; font-size: clamp(52px, 9vw, 120px); line-height: 0.92; letter-spacing: -0.06em; margin-bottom: 32px; } /* ================================================== TEXT ================================================== */ .final-download-cta__text { max-width: 760px; font-size: clamp(16px, 2vw, 22px); line-height: 1.6; color: rgba(255,255,255,0.78); margin-bottom: 52px; } /* ================================================== STORES ================================================== */ .final-download-cta__stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; margin-bottom: 72px; } .final-download-cta__stores a { display: inline-flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.88); text-decoration: none; transition: opacity 0.25s ease, transform 0.25s ease; } .final-download-cta__stores a:hover { opacity: 1; transform: translateY(-2px); } .final-download-cta__stores img { width: 22px; height: 22px; object-fit: contain; } /* ================================================== ACTIONS ================================================== */ .final-download-cta__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; } /* ================================================== RESPONSIVE ================================================== */ @media (max-width: 768px) { .final-download-cta { padding-top: 110px; padding-bottom: 110px; } .final-download-cta__stores { gap: 22px; } .final-download-cta__actions { flex-direction: column; width: 100%; } .final-download-cta__actions .button { width: 100%; max-width: 320px; } } /* ================================================== FOOTER REVEAL Le CTA apparaît juste après les vidéos. Au scroll, il monte pour révéler le footer placé dessous. ================================================== */ .footer-reveal { position: relative; min-height: 150svh; background: var(--color-bg); overflow: hidden; padding-top: 0px; } .final-download-cta--reveal { position: sticky; top: 0; z-index: 2; min-height: 100svh; will-change: transform; } .site-footer { position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; min-height: 100svh; display: flex; align-items: center; justify-content: center; background: var(--color-bg); } /* ================================================== SITE FOOTER Footer révélé sous le CTA final. ================================================== */ .site-footer { position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 120px 0 48px; background: var(--color-bg); color: var(--color-text); overflow: hidden; } /* ================================================== FOOTER INNER ================================================== */ .site-footer__inner { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } /* ================================================== FOOTER BRAND ================================================== */ .site-footer__brand { max-width: 720px; display: flex; flex-direction: column; align-items: center; } .site-footer__logo { width: 100px; height: auto; margin-bottom: 36px; } .site-footer__baseline { max-width: 720px; margin: 0 0 42px; color: var(--color-text-soft); font-size: clamp(16px, 2vw, 20px); line-height: 1.6; } /* ================================================== FOOTER NEWSLETTER ================================================== */ .site-footer__newsletter { width: min(100%, 640px); display: flex; align-items: center; gap: 14px; margin-bottom: 96px; } .site-footer__newsletter input { flex: 1; min-height: 54px; padding: 0 22px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.045); color: var(--color-text); font-size: var(--text-sm); outline: none; } .site-footer__newsletter input::placeholder { color: rgba(255,255,255,0.48); } .site-footer__newsletter input:focus { border-color: rgba(231,79,1,0.55); box-shadow: 0 0 0 4px rgba(231,79,1,0.12); } .site-footer__newsletter button { min-height: 54px; padding: 0 28px; border-radius: var(--radius-full); background: #000; color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-bold); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 10px 34px rgba(0,0,0,0.28); transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast); } .site-footer__newsletter button:hover { transform: translateY(-2px); background: var(--color-orange); color: #000; } /* ================================================== FOOTER NAV ================================================== */ .site-footer__nav { width: min(100%, 980px); display: grid; /* On est passé de 3 à 4 colonnes pour faire de la place à la nouvelle colonne "Produits" (Origin/Business/Care). */ grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 92px; text-align: center; } .site-footer__column { display: flex; flex-direction: column; gap: 14px; } /* Les liens du footer reprennent eux aussi la couleur de marque de chaque formule, comme partout ailleurs sur le site (menu Produits, modal de choix...). Pourquoi ".site-footer__column a.site-footer__product-link--origin" et pas juste ".site-footer__product-link--origin" : la règle générale ".site-footer__column a" (et son ".site-footer__column a:hover" qui met tout en orange) est plus "précise" aux yeux du navigateur si on ne fait pas pareil ici. En répétant ".site-footer__column a" devant nos propres classes, on devient au moins aussi précis, donc nos couleurs gagnent, au repos ET au survol. */ .site-footer__column a.site-footer__product-link--origin { color: #E74F01; } .site-footer__column a.site-footer__product-link--origin:hover { color: #E74F01; } .site-footer__column a.site-footer__product-link--business { color: #245BFF; } .site-footer__column a.site-footer__product-link--business:hover { color: #245BFF; } .site-footer__column a.site-footer__product-link--care { color: #18C9B7; } .site-footer__column a.site-footer__product-link--care:hover { color: #18C9B7; } .site-footer__column h3 { margin: 0 0 20px; color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-bold); } .site-footer__column a { color: var(--color-text-soft); font-size: var(--text-sm); line-height: 1.4; text-decoration: none; transition: color var(--transition-fast), transform var(--transition-fast); } .site-footer__column a:hover { color: var(--color-orange); transform: translateX(4px); } /* ================================================== FOOTER BOTTOM ================================================== */ .site-footer__bottom { display: flex; flex-direction: column; gap: 6px; color: rgba(255,255,255,0.52); font-size: var(--text-xs); line-height: 1.5; } .site-footer__bottom p { margin: 0; } /* ================================================== FOOTER — TABLETTE / MOBILE ================================================== */ @media (max-width: 900px) { .site-footer { min-height: 100svh; padding: 96px 0 44px; padding-top: 140px; } .site-footer__inner { align-items: center; text-align: center; } .site-footer__brand { width: 100%; max-width: 520px; margin-bottom: 72px; } .site-footer__logo { width: 80px; margin-bottom: 32px; } .site-footer__baseline { margin-bottom: 34px; font-size: 18px; line-height: 1.55; } .site-footer__newsletter { width: 100%; max-width: 360px; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 0; } .site-footer__newsletter input { width: 100%; min-height: 54px; text-align: left; } .site-footer__newsletter button { width: auto; min-width: 150px; min-height: 50px; } .site-footer__nav { width: 100%; max-width: 520px; display: grid; grid-template-columns: 1fr; gap: 42px; margin-bottom: 72px; text-align: center; } .site-footer__column { align-items: center; gap: 16px; } .site-footer__column h3 { margin-bottom: 18px; font-size: 16px; } .site-footer__column a { font-size: 16px; line-height: 1.45; } .site-footer__bottom { align-items: center; text-align: center; font-size: 14px; } } /* ================================================== FOOTER — PETIT MOBILE ================================================== */ @media (max-width: 560px) { .site-footer { min-height: auto; padding: 84px 24px 38px; } .site-footer__logo { width: 60px; } .site-footer__baseline { font-size: 17px; } .site-footer__nav { grid-template-columns: 1fr; gap: 42px; text-align: center; } .site-footer__column { align-items: center; } .site-footer__column a:hover { transform: none; } } /* ================================================== FOOTER REVEAL — MOBILE FIX Sur mobile, le footer est plus haut que le viewport. On le place sous le CTA au lieu de l'accrocher au bottom. ================================================== */ @media (max-width: 768px) { .footer-reveal { min-height: 230svh; overflow: hidden; } .site-footer { top: 100svh; bottom: auto; min-height: auto; height: auto; align-items: flex-start; padding-top: 96px; padding-bottom: 72px; } .site-footer__inner { padding-inline: 24px; } } /* ================================================== FOOTER REVEAL — MOBILE CTA CONTENT HEIGHT Sur mobile, le CTA ne prend plus tout le viewport. Il s'adapte à son contenu. ================================================== */ @media (max-width: 768px) { .footer-reveal { min-height: auto; overflow: visible; } .final-download-cta { min-height: auto; padding-top: 96px; padding-bottom: 96px; } .final-download-cta--reveal { position: relative; top: auto; min-height: auto; transform: none !important; } .site-footer { position: relative; top: auto; bottom: auto; min-height: auto; padding-top: 96px; padding-bottom: 72px; } } /* ================================================== MODAL MOBILE — SAFE TOP REAL DEVICE Évite que l’iframe soit mordue par la barre navigateur mobile. ================================================== */ @media (max-width: 768px) { .demo-modal { align-items: flex-start; padding-top: 48px; padding-inline: 12px; padding-bottom: 16px; overflow-y: auto; } .demo-modal__content { width: 100%; height: calc(100dvh - 96px); max-height: none; border-radius: 22px; overflow: hidden; } .demo-modal__iframe { width: 100%; height: 100%; } .demo-modal__close { position: fixed; top: 56px; right: 40px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 999px; background: rgba(5, 20, 27, 0.92); border: 1px solid rgba(255, 255, 255, 0.18); color: #FFFFFF; font-size: 32px; line-height: 1; z-index: 99999; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42); } } /* ================================================== ACCESS MODAL ================================================== */ .access-modal { position: fixed; inset: 0; display: none; place-items: center; z-index: 99998; } .access-modal.is-open { display: grid; } .access-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(10px); } .access-modal__content { position: relative; z-index: 2; width: min(420px, 90vw); padding: 32px; border-radius: 24px; background: #10202D; border: 1px solid rgba(255,255,255,0.08); text-align: center; } .access-modal__content h2 { margin-bottom: 12px; } .access-modal__content input { width: 100%; margin-top: 24px; margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); color: #FFF; } .access-modal__error { display: none; margin-bottom: 16px; color: #ff6565; } .access-modal__error.is-visible { display: block; } /* ================================================== CHOICE MODAL — CHOIX DE LA DÉMO API Cette fenêtre s'ouvre juste après que le mot de passe a été validé. Elle reprend volontairement le même style que .access-modal juste au-dessus (même fond sombre, mêmes coins arrondis), simplement en plus large, pour pouvoir aligner 3 boutons côte à côte. ================================================== */ /* Le fond translucide + flou derrière la fenêtre. "display: none" par défaut : la fenêtre entière est invisible et ne prend aucune place, jusqu'à ce que le JavaScript lui ajoute la classe "is-open". */ .choice-modal { position: fixed; inset: 0; display: none; place-items: center; z-index: 99998; } .choice-modal.is-open { display: grid; } .choice-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(10px); } /* La carte blanche (ici sombre) au centre de l'écran, qui contient le titre et les 3 boutons. */ .choice-modal__content { position: relative; z-index: 2; width: min(720px, 90vw); padding: 40px; border-radius: 24px; background: #10202D; border: 1px solid rgba(255,255,255,0.08); text-align: center; } .choice-modal__content h2 { margin-bottom: 28px; } /* Petit bouton rond "×" en haut à droite pour fermer la fenêtre sans avoir à choisir une démo. */ .choice-modal__close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.06); color: #FFF; font-size: 22px; line-height: 1; transition: background 0.2s ease, transform 0.2s ease; } .choice-modal__close:hover { background: rgba(231,79,1,0.92); transform: scale(1.05); } /* Les 3 cartes de choix, alignées côte à côte sur 3 colonnes égales grâce à "repeat(3, 1fr)". Sur petit écran (voir la media query plus bas), elles repassent en une seule colonne. */ .choice-modal__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .choice-modal__option { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 16px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.2s ease, transform 0.2s ease; } .choice-modal__option:hover { transform: translateY(-3px); } .choice-modal__option-label { font-size: 14px; color: var(--color-text-muted); line-height: 1.4; } .choice-modal__option-button { /* "margin-top: auto" est l'astuce qui résout l'alignement : dans une carte en "display: flex; flex-direction: column", ça pousse cet élément aussi loin que possible vers le bas, en mangeant tout l'espace vide disponible au-dessus de lui. Résultat : peu importe que le texte de la carte fasse 1 ligne ou 4 lignes, le bouton Origin/Business/Care reste toujours collé au bas de sa carte, donc aligné avec les boutons des 2 autres cartes. */ margin-top: auto; padding: 10px 24px; border-radius: 999px; font-weight: var(--weight-semibold); border: 1.5px solid currentColor; } /* Chaque carte reprend la couleur de marque de sa formule, exactement comme dans le menu "Produits" et le footer. */ .choice-modal__option--origin { color: #E74F01; } .choice-modal__option--origin:hover { border-color: rgba(231,79,1,0.6); } .choice-modal__option--business { color: #245BFF; } .choice-modal__option--business:hover { border-color: rgba(36,91,255,0.6); } .choice-modal__option--care { color: #18C9B7; } .choice-modal__option--care:hover { border-color: rgba(24,201,183,0.6); } /* Sur petit écran, les 3 cartes ne tiennent plus côte à côte : on les empile verticalement (une seule colonne). */ @media (max-width: 640px) { .choice-modal__options { grid-template-columns: 1fr; } .choice-modal__content { padding: 28px 20px; } }