/* ========================================================================= EPICVIEW — Page d'accueil (home.css) Thème sombre, néon blanc/noir, animations dynamiques, responsive full. ========================================================================= */ :root { --ev-bg: #050506; --ev-bg-soft: #0d0d10; --ev-panel: #111114; --ev-white: #ffffff; --ev-grey: #b7b7c2; --ev-grey-dim: #6e6e79; --ev-line: rgba(255, 255, 255, 0.12); --ev-red: #A40000; /* Rouge de marque */ --ev-red-lite: #ff5b5b; /* Rouge clair (dégradés) */ --ev-cm: #A40000; /* Community management */ --ev-audio: #A40000; /* Audiovisuel */ --ev-cyber: #d8b400; /* Cybersécurité */ --ev-dev: #7500de; /* Développement */ --ev-font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; --ev-max: 1240px; --ev-ease: cubic-bezier(.22, 1, .36, 1); /* Gouttière latérale minimale : jamais moins que ça entre le contenu et le bord de l'écran. Utilisée par .ev-wrap et les sections pleine largeur. */ --ev-gutter: 1.375rem; /* 22 px */ } /* ---------- Base ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } .ev-home { background: var(--ev-bg); color: var(--ev-white); font-family: var(--ev-font); /* Anti-défilement horizontal fantôme (bug « je descends et ça remonte »). overflow-x: hidden rendait le viewport *scrollable* horizontalement : sur mobile, un swipe légèrement oblique déclenchait un pan latéral puis un rebond qui ramenait vers le haut. `clip` coupe le débord sans créer de conteneur de défilement (et préserve position: sticky). NB : on ne met rien sur — la propagation de l'overflow de vers le viewport doit rester intacte, c'est elle qui fait fonctionner les verrous de scroll .ev-modal-open / .ev-gal-locked. */ overflow-x: clip; overscroll-behavior-x: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ev-home img { max-width: 100%; display: block; } .ev-home a { color: inherit; text-decoration: none; } .ev-wrap { width: 100%; max-width: var(--ev-max); margin-inline: auto; /* Gouttière mobile : 1.1rem (17.6 px) collait le texte au bord de l'écran. Le plancher passe à --ev-gutter (22 px) — inchangé au-delà de ~560 px. */ padding-inline: clamp(var(--ev-gutter), 4vw, 2.5rem); } /* Bloc pleine largeur (sans marge ni contrainte) */ .ev-full { width: 100%; } /* Bruit / grain de fond subtil sur toute la page */ .ev-home::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1100px 600px at 50% -10%, rgba(164,0,0,0.14), transparent 60%), radial-gradient(900px 500px at 100% 20%, rgba(164,0,0,0.09), transparent 55%), radial-gradient(900px 600px at 0% 80%, rgba(255,60,60,0.06), transparent 55%); } .ev-home > * { position: relative; z-index: 1; } /* ========================================================================= COMPOSANT GLOBAL — Interrupteur (toggle) néomorphique ------------------------------------------------------------------------- Piste creusée dans la surface (relief « soft UI », lumière en haut-gauche), pastille bombée, LED témoin en haut-gauche (orange = off, vert = on) et anneau néon dégradé vert → turquoise à l'état activé. Markup à réutiliser pour TOUT futur interrupteur du site : LibelléDescription facultative L'input doit rester le frère PRÉCÉDENT immédiat de .ev-switch (sélecteur +). Couleurs surchargeables via --sw-on-a / --sw-on-b / --sw-led-off. ========================================================================= */ .ev-switch { --sw-w: 3.5rem; /* largeur de la piste */ --sw-h: 2.05rem; /* hauteur de la piste */ --sw-pad: .2rem; /* jeu entre la pastille et le bord */ --sw-on-a: #5fe08a; /* vert (gauche de l'anneau) */ --sw-on-b: #5fe0d0; /* turquoise (droite de l'anneau) */ --sw-led-off: #ff6a3d; /* LED témoin à l'arrêt */ position: relative; flex: 0 0 auto; width: var(--sw-w); height: var(--sw-h); border: 2px solid transparent; border-radius: 999px; /* Deux couches : le fond s'arrête au padding-box, le dégradé de bordure occupe le border-box → bordure dégradée sans élément supplémentaire. */ background: linear-gradient(160deg, #1a1c20, #212429) padding-box, linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02)) border-box; box-shadow: inset 3px 3px 7px rgba(0,0,0,.85), /* creux : ombre haut-gauche */ inset -2px -2px 6px rgba(255,255,255,.045), /* rebond lumineux bas-droite */ 0 1px 0 rgba(255,255,255,.05); transition: background .38s var(--ev-ease), box-shadow .38s var(--ev-ease); } /* LED témoin, flottant juste au-dessus à gauche de la piste */ .ev-switch::before { content: ""; position: absolute; top: -.5rem; left: -.15rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--sw-led-off); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--sw-led-off) 70%, transparent); transition: background .38s var(--ev-ease), box-shadow .38s var(--ev-ease); } /* Pastille bombée */ .ev-switch::after { content: ""; position: absolute; top: var(--sw-pad); left: var(--sw-pad); width: calc(var(--sw-h) - var(--sw-pad) * 2 - 4px); height: calc(var(--sw-h) - var(--sw-pad) * 2 - 4px); border-radius: 50%; background: radial-gradient(115% 115% at 32% 26%, #4b4f57 0%, #34373d 46%, #232629 100%); box-shadow: 0 3px 7px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 2px rgba(0,0,0,.55); transition: transform .4s cubic-bezier(.3, 1.35, .5, 1); } /* L'input reste accessible au clavier mais invisible */ .ev-switch__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ---------- État activé ---------- */ .ev-switch__input:checked + .ev-switch { background: linear-gradient(160deg, #141619, #1b1e22) padding-box, linear-gradient(100deg, var(--sw-on-a), var(--sw-on-b)) border-box; box-shadow: inset 3px 3px 8px rgba(0,0,0,.9), inset -2px -2px 6px rgba(255,255,255,.04), /* halo : vert décalé à gauche, turquoise à droite → dégradé perçu */ -7px 0 20px -5px color-mix(in srgb, var(--sw-on-a) 60%, transparent), 7px 0 20px -5px color-mix(in srgb, var(--sw-on-b) 60%, transparent), 0 0 26px 2px color-mix(in srgb, var(--sw-on-a) 28%, transparent); } .ev-switch__input:checked + .ev-switch::after { transform: translateX(calc(var(--sw-w) - var(--sw-h))); } .ev-switch__input:checked + .ev-switch::before { background: var(--sw-on-a); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--sw-on-a) 75%, transparent); } /* ---------- Focus clavier ---------- */ .ev-switch__input:focus-visible + .ev-switch { outline: 2px solid var(--sw-on-a); outline-offset: 3px; } /* ---------- Verrouillé (ex. cookies « Nécessaires ») ---------- */ .ev-switch__input:disabled + .ev-switch { opacity: .55; } .ev-switch__input:disabled + .ev-switch::after { box-shadow: 0 2px 4px rgba(0,0,0,.6); } /* ---------- Ligne libellé + interrupteur ---------- */ .ev-switch-row { display: flex; align-items: center; gap: 1rem; padding: .7rem .85rem; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--ev-line); cursor: pointer; } .ev-switch-row--locked { cursor: default; } .ev-switch-row__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ev-switch-row__text strong { color: var(--ev-white); font-size: .92rem; font-weight: 700; } .ev-switch-row__text small { color: var(--ev-grey-dim); font-size: .75rem; line-height: 1.35; } @media (prefers-reduced-motion: reduce) { .ev-switch, .ev-switch::after, .ev-switch::before { transition: none; } } /* Repli si color-mix() n'est pas supporté (Safari < 16.2) : halo monochrome. */ @supports not (color: color-mix(in srgb, red 50%, transparent)) { .ev-switch::before { box-shadow: 0 0 6px 1px rgba(255,106,61,.7); } .ev-switch__input:checked + .ev-switch { box-shadow: inset 3px 3px 8px rgba(0,0,0,.9), 0 0 20px 2px rgba(95,224,138,.5); } .ev-switch__input:checked + .ev-switch::before { box-shadow: 0 0 8px 2px rgba(95,224,138,.75); } } /* ========================================================================= 1. HERO — vidéo du logo 3D (lecture unique, muet, autoplay, sans contrôles) ========================================================================= */ .ev-hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(closest-side at 50% 45%, #101014 0%, var(--ev-bg) 78%); } .ev-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* écrans plus larges que la vidéo (16/9) */ pointer-events: none; opacity: 0; transform: scale(1.03); transition: opacity 1.2s var(--ev-ease), transform 1.4s var(--ev-ease); z-index: 0; } /* La vidéo du logo 3D est en 16/9. Dès que l'écran est plus étroit que ce ratio (donc quasiment tout le responsive, et déjà le 16/10 de bureau), `cover` rognait fortement les bords : sur un 390×844 on ne voyait plus que ~26 % de la largeur, le logo était coupé. `contain` garantit que l'animation est visible à 100 %. Le létterboxing est invisible : le fond de la vidéo et celui du hero sont tous deux noirs. */ @media (max-aspect-ratio: 16 / 9) { .ev-hero__video { object-fit: contain; } } /* Sur les formats nettement plus hauts que larges (tablette portrait, mobile), un hero à 100svh laisserait la vidéo « contain » flotter au milieu d'une immense bande noire. On sort donc la vidéo du flux absolu : le hero se règle sur sa hauteur réelle (16/9 pleine largeur) + une respiration verticale. */ @media (max-aspect-ratio: 4 / 3) { .ev-hero { min-height: auto; /* le padding bas doit dégager la hauteur de .ev-scroll-cue (~70px + 26px de décalage) pour qu'il ne chevauche pas le bas de la vidéo */ padding-block: clamp(4.5rem, 15vh, 7rem) clamp(6rem, 14vh, 8rem); } .ev-hero__video { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; } } .ev-hero__video.is-ready { opacity: 1; transform: scale(1); } /* léger vignettage bas pour fondre la vidéo dans la page */ .ev-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 68%, rgba(5,5,6,.55) 100%); } /* Indice de scroll */ .ev-scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; color: var(--ev-grey-dim); z-index: 2; } .ev-scroll-cue span { width: 1px; height: 46px; background: linear-gradient(var(--ev-grey-dim), transparent); position: relative; overflow: hidden; } .ev-scroll-cue span::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: linear-gradient(var(--ev-white), transparent); animation: evScroll 1.8s var(--ev-ease) infinite; } @keyframes evScroll { 0% { top: -50%; } 100% { top: 120%; } } /* ========================================================================= Séparateur néon blanc/noir — pleine largeur, dynamique ========================================================================= */ .ev-neon-sep { position: relative; width: 100%; height: 3px; margin: clamp(2.4rem, 6vw, 4.5rem) 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.10) 12%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.10) 88%, transparent 100%); /* La comète (::after) balaie jusqu'à left:103% + width:22% : sans clip horizontal elle porte le scrollWidth du document à ~125 % du viewport (scroll latéral fantôme + « shrink to fit » sur mobile). overflow-x: clip coupe ce débord SANS créer de conteneur de défilement (contrairement à hidden) et laisse le halo vertical du ::before visible. */ overflow-x: clip; overflow-y: visible; } .ev-neon-sep::before { /* halo diffus */ content: ""; position: absolute; inset: -9px 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); filter: blur(9px); } .ev-neon-sep::after { /* comète lumineuse qui balaie */ content: ""; position: absolute; top: 50%; left: 0; width: 22%; height: 3px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 14px 4px rgba(255,255,255,.75), 0 0 40px 10px rgba(255,255,255,.35); border-radius: 4px; animation: evSweep 5.5s var(--ev-ease) infinite; } @keyframes evSweep { 0% { left: -25%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 103%; opacity: 0; } } /* ========================================================================= Intro — H1 + description ========================================================================= */ .ev-intro { text-align: center; padding-block: clamp(1rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3rem); } .ev-intro__eyebrow { display: inline-block; font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; color: var(--ev-grey-dim); margin-bottom: 1.1rem; padding: .4rem .9rem; border: 1px solid var(--ev-line); border-radius: 100px; } .ev-intro h1 { font-size: clamp(2rem, 6.4vw, 4.4rem); font-weight: 800; line-height: 1.03; letter-spacing: -0.02em; background: linear-gradient(180deg, #ffffff 30%, #9a9aa6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ev-intro h1 .ev-accent { background: linear-gradient(95deg, var(--ev-red-lite) 0%, var(--ev-red) 55%, #6d0000 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ev-intro__desc { max-width: 720px; margin: 1.4rem auto 0; font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.7; color: var(--ev-grey); } /* ========================================================================= 2. SLIDER — repris de rose.html (1 image / slide, design identique partout) ========================================================================= */ /* --- Géométrie de l'arc ------------------------------------------------ Les 4 visuels (1920×1080) partagent la même composition : un objectif photo centré en bas, de centre (50 %, 100 %) et de rayon ≈ 21,5 % de la largeur de l'image. Le demi-cercle doit être CONCENTRIQUE à cet objectif. .ev-slider__stage est en ratio 16/9 fixe : le visuel le remplit exactement, donc « centre-bas du stage » == « centre de l'objectif », à toutes les tailles d'écran. Arc voulu : centre (50 %, 100 % du stage), rayon = 30 % de la largeur (assez large pour dégager l'objectif, assez court pour passer sous le bouton « Découvrir » en superposition desktop). Le viewBox 900×450 place son centre d'arc à (450, 400), rayon 400 : largeur SVG = (900/400) × 30 % = 67.5 % de la largeur du stage bottom = −(450−400)/450 × h_svg = −6.6667 % de la hauteur du stage (le calcul en % de hauteur n'est exact que parce que le ratio est figé.) */ .ev-slider { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; background: #050506; isolation: isolate; } .ev-slider__stage { position: relative; width: 100%; aspect-ratio: 16 / 9; /* ratio exact des visuels : aucun létterbox */ overflow: hidden; order: 2; /* mobile : le visuel passe sous le texte */ } .ev-slide-bg { position: absolute; inset: 0; background-size: cover; /* stage au ratio de l'image => aucun crop */ background-repeat: no-repeat; background-position: center; opacity: 0; transition: opacity 1.2s var(--ev-ease); /* transition fluide, aucun mouvement */ z-index: 0; } .ev-slide-bg.ev-active { opacity: 1; } /* voile léger : assombrit seulement le haut (titre) et le bas (arc) */ .ev-slider__stage::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,5,6,.55) 0%, rgba(5,5,6,0) 26%, rgba(5,5,6,0) 68%, rgba(5,5,6,.6) 100%); pointer-events: none; } .ev-slide-content { position: relative; z-index: 5; order: 1; padding: clamp(1.6rem, 5vw, 2.4rem) var(--ev-gutter) clamp(1.4rem, 4vw, 2rem); display: flex; flex-direction: column; align-items: center; transition: opacity .5s var(--ev-ease), transform .5s var(--ev-ease); opacity: 1; } /* À partir du moment où le visuel est assez haut, on repasse en superposition : le texte se pose sur le haut de l'image, comme sur la maquette d'origine. */ @media (min-width: 900px) { .ev-slider { display: grid; } .ev-slider__stage, .ev-slide-content { grid-area: 1 / 1; } .ev-slide-content { align-self: start; justify-self: center; padding-top: clamp(2.6rem, 8vh, 5rem); } } .ev-slide-content.ev-fade-out { opacity: 0; transform: translateY(12px); } .ev-slide-title { font-size: clamp(1.6rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: .01em; line-height: 1.1; margin: 0 0 1.1rem; text-shadow: 0 4px 30px rgba(0,0,0,.6); } .ev-slide-desc { font-size: clamp(.92rem, 1.5vw, 1.08rem); color: rgba(255,255,255,.88); margin: 0 auto 2.6rem; /* respiration avant le bouton */ max-width: 560px; line-height: 1.65; } .ev-slide-btn { background: none; border: none; cursor: pointer; color: #fff; font-family: inherit; font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; padding: 0; /* sans bordure, sans fond */ transition: color .32s var(--ev-ease); } .ev-slide-btn .ev-arrow { font-size: 1.3rem; transition: transform .3s var(--ev-ease); } .ev-slide-btn:hover .ev-arrow { transform: translateX(6px); } .ev-btn-0:hover { color: #ff6b6b; } .ev-btn-1:hover { color: #ff8a8a; } .ev-btn-2:hover { color: #ffe066; } .ev-btn-3:hover { color: #c39bff; } /* Flèches */ .ev-arrow-btn { position: absolute; top: 50%; transform: translateY(-50%); font-size: clamp(2rem, 5vw, 3.4rem); color: rgba(255,255,255,.4); background: none; border: none; cursor: pointer; z-index: 10; transition: color .3s, transform .3s; line-height: 1; padding: .3rem; } .ev-arrow-btn:hover { color: #fff; } .ev-prev { left: clamp(6px, 2vw, 34px); } .ev-next { right: clamp(6px, 2vw, 34px); } /* Arc SVG + titres — demi-cercle concentrique à l'objectif (cf. bloc ci-dessus) */ .ev-arc-svg { position: absolute; left: 50%; transform: translateX(-50%); width: 67.5%; /* => rayon d'arc = 30 % de la largeur du stage */ height: auto; bottom: -6.6667%; /* => centre de l'arc sur le bord bas du stage */ overflow: visible; z-index: 6; } .ev-arc-title { cursor: pointer; user-select: none; fill: rgba(255,255,255,.5); /* unités du viewBox : le SVG étant mis à l'échelle, on remonte la valeur sur petit écran pour garder un texte lisible (≈13 px rendus). */ font-size: 17px; font-weight: 600; transition: fill .3s, filter .3s; } @media (max-width: 1100px) { .ev-arc-title { font-size: 21px; } } @media (max-width: 900px) { .ev-arc-title { font-size: 24px; } } /* Sous ~640 px l'arc est trop court pour 4 libellés : ils se chevaucheraient. On garde l'arc et son curseur, la navigation se fait au swipe / aux flèches. */ @media (max-width: 640px) { .ev-arc-title { display: none; } } .ev-arc-title:hover { fill: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,.7)); } .ev-arc-title.ev-active { fill: #fff; filter: drop-shadow(0 0 8px rgba(255,255,255,.6)); } #ev-arcIndicator { fill: #fff; pointer-events: none; filter: drop-shadow(0 0 6px #fff); } /* Animation lettres (slot machine) */ @keyframes evLetterFlip { 0% { transform: rotateX(90deg); opacity: 0; } 55% { transform: rotateX(-18deg); opacity: .8; } 100% { transform: rotateX(0); opacity: 1; } } .ev-letter { display: inline-block; animation: evLetterFlip .55s var(--ev-ease) forwards; transform-origin: center; } /* Groupe insécable : la ligne ne peut se couper qu'entre deux mots. */ .ev-word { display: inline-block; white-space: nowrap; } /* ========================================================================= 3. MINI-BOOKS — repris de microflip.html (3 cartes -> 3 contenus) ========================================================================= */ .ev-section-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.2rem); } .ev-section-head h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.01em; } .ev-section-head p { color: var(--ev-grey); margin-top: .7rem; font-size: 1.02rem; } .ev-books { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: clamp(2rem, 5vw, 3.6rem); } .ev-book-link { perspective: 2000px; display: block; } .ev-book { position: relative; width: 240px; height: 320px; color: #0b0b0d; background: #fff; border-top-right-radius: 12px; border-bottom-right-radius: 12px; cursor: pointer; box-shadow: 12px 0 24px rgba(0,0,0,.45), inset 320px 0 60px rgba(0,0,0,.42); transform-style: preserve-3d; transition: transform 1s var(--ev-ease), box-shadow 1s var(--ev-ease); } .ev-book::before { /* légère lueur blanche */ content: ""; position: absolute; inset: -4px; border-radius: inherit; background: #ffffff; filter: blur(11px); opacity: .16; z-index: -1; transition: opacity .5s var(--ev-ease); } .ev-book-link:hover .ev-book::before { opacity: .34; } .ev-book__cover { position: absolute; inset: 0; z-index: 2; /* AU-DESSUS du verso : plus de texte visible à travers */ background: #0b0b0d; border-top-right-radius: 12px; border-bottom-right-radius: 12px; transform-origin: left; transform-style: preserve-3d; transition: transform 1s var(--ev-ease), box-shadow 1s var(--ev-ease); } .ev-book__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; } .ev-book__cover img:nth-child(1) { border-top-right-radius: 12px; border-bottom-right-radius: 12px; } .ev-book__cover img:nth-child(2) { transform: rotateY(180deg); border-top-left-radius: 12px; border-bottom-left-radius: 12px; } .ev-book__body { position: absolute; inset: 0; z-index: 1; /* verso : révélé seulement quand la couverture s'ouvre */ padding: 1.4rem 1.2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border-radius: 12px; background: #fff; } .ev-book__body h3 { font-size: .92rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .7rem; } .ev-book__body p { font-size: .74rem; line-height: 1.55; color: #2a2a30; } .ev-book__tag { margin-top: 1rem; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ev-red); font-weight: 700; } .ev-book-link:hover .ev-book { transform: rotateZ(-9deg); box-shadow: 14px 0 30px rgba(0,0,0,.5), inset 20px 0 50px rgba(0,0,0,.4); } .ev-book-link:hover .ev-book__cover { transform: rotateY(-128deg); box-shadow: 14px 0 30px rgba(0,0,0,.45); } /* ========================================================================= 4. PARTENAIRES — marquee infini ========================================================================= */ .ev-partners { padding-block: clamp(1rem, 3vw, 2rem); } .ev-partners__label { text-align: center; color: var(--ev-grey-dim); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 1.8rem; } .ev-marquee { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ev-marquee__track { display: flex; width: max-content; gap: clamp(2.4rem, 6vw, 5rem); animation: evMarquee 32s linear infinite; will-change: transform; } .ev-marquee:hover .ev-marquee__track { animation-play-state: paused; } @keyframes evMarquee { to { transform: translateX(-50%); } } .ev-marquee__item { flex: 0 0 auto; display: grid; place-items: center; height: 60px; opacity: .45; filter: grayscale(1) brightness(1.4); transition: opacity .35s var(--ev-ease), filter .35s var(--ev-ease), transform .35s var(--ev-ease); } .ev-marquee__item img { height: 42px; width: auto; } .ev-marquee__item:hover { opacity: 1; filter: grayscale(0) brightness(1); transform: translateY(-3px); } /* ========================================================================= 5. RÉSEAUX SOCIAUX — cubes 3D posés au sol ========================================================================= */ .ev-social { padding-block: clamp(2rem, 6vw, 4rem) clamp(3rem, 8vw, 6rem); text-align: center; } .ev-social__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2.6rem, 7vw, 5.5rem); perspective: 900px; margin-top: clamp(2.6rem, 6vw, 4rem); } .ev-cube-stage { width: 116px; height: 150px; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; transform-style: preserve-3d; } .ev-cube-scene { width: 92px; height: 92px; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(0deg); animation: evCubeSpin 14s linear infinite; } .ev-cube-stage:nth-child(2) .ev-cube-scene { animation-duration: 16s; animation-direction: reverse; } .ev-cube-stage:nth-child(3) .ev-cube-scene { animation-duration: 18s; } .ev-cube-stage:nth-child(4) .ev-cube-scene { animation-duration: 15s; animation-direction: reverse; } @keyframes evCubeSpin { 0% { transform: rotateX(-22deg) rotateY(0deg); } 100% { transform: rotateX(-22deg) rotateY(360deg); } } .ev-cube-face { position: absolute; inset: 0; display: grid; place-items: center; width: 92px; height: 92px; background: linear-gradient(155deg, rgba(24,24,28,.96), rgba(10,10,12,.96)); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; box-shadow: inset 0 0 22px rgba(255,255,255,.06); backface-visibility: visible; } .ev-cube-face svg { width: 42px; height: 42px; fill: #fff; filter: drop-shadow(0 0 8px rgba(255,255,255,.35)); } .ev-cube-face--front { transform: translateZ(46px); } .ev-cube-face--back { transform: rotateY(180deg) translateZ(46px); } .ev-cube-face--right { transform: rotateY(90deg) translateZ(46px); } .ev-cube-face--left { transform: rotateY(-90deg) translateZ(46px); } .ev-cube-face--top { transform: rotateX(90deg) translateZ(46px); } .ev-cube-face--bottom { transform: rotateX(-90deg) translateZ(46px); } /* ombre au sol (relief 3D posé) */ .ev-cube-floor { width: 96px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,.20), rgba(255,255,255,0) 68%); filter: blur(3px); transform: rotateX(62deg); animation: evFloorPulse 14s ease-in-out infinite; } @keyframes evFloorPulse { 0%,100% { opacity: .55; transform: rotateX(62deg) scale(1); } 50% { opacity: .85; transform: rotateX(62deg) scale(1.06); } } .ev-cube-label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ev-grey); transition: color .3s var(--ev-ease); } .ev-cube-stage:hover .ev-cube-scene { animation-play-state: paused; } .ev-cube-stage:hover .ev-cube-label { color: #fff; } .ev-cube-stage:hover .ev-cube-face { border-color: rgba(255,255,255,.5); box-shadow: inset 0 0 26px rgba(255,255,255,.12), 0 0 24px rgba(255,255,255,.14); } /* ========================================================================= Reveal au scroll (dynamique) ========================================================================= */ .ev-reveal { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--ev-ease), transform .9s var(--ev-ease); transition-delay: var(--ev-delay, 0s); } .ev-reveal.is-visible { opacity: 1; transform: none; } .ev-reveal--scale { transform: translateY(38px) scale(.96); } .ev-reveal--scale.is-visible { transform: none; } @media (prefers-reduced-motion: reduce) { .ev-reveal { opacity: 1; transform: none; transition: none; } .ev-marquee__track, .ev-cube-scene, .ev-cube-floor, .ev-neon-sep::after, .ev-scroll-cue span::after { animation: none !important; } .ev-hero__video { opacity: 1; transform: none; } } /* ========================================================================= Responsive ========================================================================= */ @media (max-width: 1024px) { .ev-book { width: 210px; height: 288px; } } @media (max-width: 767px) { /* la hauteur du slider vient du stage 16/9 — plus de height: 100vh, qui laissait l'image « contain » perdue dans une immense boîte noire */ .ev-slide-title { font-size: 1.35rem; } /* retour à la ligne propre */ .ev-slide-desc { font-size: .9rem; max-width: 92%; margin-bottom: 1.4rem; } .ev-book { width: 200px; height: 270px; } /* même design, juste adapté */ .ev-social__grid { gap: 3rem 2.4rem; } .ev-cube-scene, .ev-cube-face { width: 82px; height: 82px; } .ev-cube-face--front { transform: translateZ(41px); } .ev-cube-face--back { transform: rotateY(180deg) translateZ(41px); } .ev-cube-face--right { transform: rotateY(90deg) translateZ(41px); } .ev-cube-face--left { transform: rotateY(-90deg) translateZ(41px); } .ev-cube-face--top { transform: rotateX(90deg) translateZ(41px); } .ev-cube-face--bottom{ transform: rotateX(-90deg) translateZ(41px); } }