@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Jost:wght@300;400;500&display=swap'); :root{ --wine-1: #401a29; --wine-2: #210d15; --violet: #3b1338; --black: #000000; --white: #ffffff; --muted: rgba(255,255,255,0.72); --header-h: 90px; --pad: 48px; --radius: 14px; } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } /* ---------------- TRANSITION ENTRE LES PAGES ---------------- */ /* voile plein écran, présent dès le premier rendu (CSS bloquant, pas de flash) : chaque page arrive et repart en fondu, plutôt qu'en coupure sèche */ body::before{ content:""; position:fixed; inset:0; z-index:9999; background:#170812; /* même teinte que le coup de projecteur */ opacity:1; pointer-events:none; transition:opacity .5s ease; } body.veil-hidden::before{ opacity:0; } @media (prefers-reduced-motion: reduce){ body::before{ transition:none; } } /* ---------------- DÉFILEMENT À ANCRAGE ---------------- */ /* chaque section plein écran est un point d'ancrage : la souris, le trackpad et les boutons "suivant" mènent tous exactement au même résultat, jamais à mi-chemin entre deux sections */ .screen, .reel, .contact-screen{ scroll-snap-align:start; scroll-snap-stop:always; /* on ne saute jamais une section, même en défilement rapide */ } @media (min-width:901px) and (prefers-reduced-motion:no-preference){ html{ scroll-snap-type:y mandatory; } } body{ font-family:'Jost', Arial, sans-serif; font-weight:300; background:var(--black); color:var(--white); overflow-x:hidden; } h1,h2,h3{ font-family:'Syne', Arial, sans-serif; font-weight:700; text-transform:lowercase; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } /* ---------------- HEADER ---------------- */ .site-header{ position:fixed; top:0; left:0; right:0; height:var(--header-h); display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad); z-index:10000; /* au-dessus du voile de transition (9999) : jamais recouvert */ mix-blend-mode:difference; /* réagit à ce qu'il y a dessous */ transition:opacity .5s ease; /* même durée que le voile, pour rester en phase */ } /* retour vers l'accueil : le header s'efface avec le reste, emporté par le fondu de sortie, plutôt que de disparaître d'un coup à la navigation */ .veil-closing-home .site-header{ opacity:0; } /* EXPÉRIMENTAL — accueil uniquement : pas de menu au premier écran, il apparaît (superposé sur la vidéo) une fois arrivé sur la 2e section. Pour revenir en arrière : supprimer ce bloc + la classe "page-home" sur + le bloc JS correspondant dans script.js. */ .page-home .site-header{ opacity:0; pointer-events:none; transition:opacity .5s ease; } .page-home.nav-visible .site-header{ opacity:1; pointer-events:auto; } .site-header .logo img{ width:132px; height:auto; } .main-nav ul{ list-style:none; display:flex; gap:40px; } .main-nav a{ font-size:13px; letter-spacing:1.5px; text-transform:uppercase; padding-bottom:6px; border-bottom:1px solid transparent; transition:border-color .25s ease; } .main-nav a:hover, .main-nav a.active{ border-color:var(--white); } .nav-toggle{ display:none; background:none; border:none; color:var(--white); font-size:13px; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; } /* ---------------- COUP DE PROJECTEUR ---------------- */ /* voile noir-violet posé sur chaque section : opaque quand la section s'éloigne du centre de l'écran, transparent quand elle est consultée */ .spot{ position:absolute; inset:0; z-index:5; pointer-events:none; background:#170812; /* noir violacé, pas de noir pur */ opacity:0; will-change:opacity; } /* ---------------- BLOCS PLEIN ÉCRAN ---------------- */ .screen{ position:relative; height:100vh; height:100svh; overflow:hidden; } .bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } /* ---------------- SECTION 1 : ACCUEIL ---------------- */ .hero-video{ display:flex; align-items:center; justify-content:center; } .hero-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.10) 45%, rgba(0,0,0,.55) 100%); } .hero-center{ position:relative; z-index:2; text-align:left; width:min(36vw, 434px); /* décalé à gauche du centre, et légèrement au-dessus */ transform:translate(-17.19vw, -6.35vh); } .hero-logo{ width:100%; margin:0; } .hero-eyebrow{ margin-top:-4px; margin-left:1.6%; /* compense le blanc interne du SVG */ font-size:clamp(10px, 1.02vw, 13px); letter-spacing:.26em; text-transform:uppercase; white-space:nowrap; color:rgba(255,255,255,.92); } .hero-cta{ position:absolute; z-index:2; left:50%; bottom:82px; transform:translateX(-50%); } /* ---------------- SECTION 2 : SPLIT 50/50 ---------------- */ /* 60/40 : la vidéo gagne 20% d'espace par rapport au 50/50 d'origine */ .split{ display:grid; grid-template-rows:3fr 2fr; } .split-top{ position:relative; overflow:hidden; --text-w:min(62%, 720px); /* largeur du bloc de texte, partagée avec le bouton */ } .split-top::after{ /* léger voile pour la lisibilité du texte */ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 45%); } .split-text{ position:absolute; z-index:2; top:50%; right:0; transform:translateY(-50%); width:var(--text-w); padding-right:clamp(56px, 6vw, 96px); /* décollé du bord droit */ padding-left:24px; } .split-text h2{ font-size:clamp(20px, 2.45vw, 34px); white-space:nowrap; /* « nous créons vos contenus » sur une ligne */ margin-bottom:16px; } .split-text p{ font-size:clamp(14px, 1.12vw, 16px); line-height:1.7; color:#fff; /* blanc franc */ max-width:44ch; } /* « Regardez nos vidéos » : aligné à gauche sur le paragraphe, juste au-dessus de la limite des deux moitiés */ .split-watch{ position:absolute; left:calc(100% - var(--text-w) + 24px); /* 24px = padding-left du bloc texte */ bottom:28px; z-index:3; } /* ---------------- BOUTON PASTILLE (style commun) ---------------- */ .btn-pill{ display:inline-flex; align-items:center; gap:11px; padding:11px 22px; font-family:'Jost', sans-serif; font-size:13px; letter-spacing:.15em; text-transform:uppercase; white-space:nowrap; color:#fff; /* texte et flèche en blanc franc */ border:.75px solid rgba(255,255,255,.8); /* contour blanc à 80 %, trait fin */ border-radius:999px; background:transparent; /* aucun fond */ } .btn-pill svg{ width:13px; height:13px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } /* au repos : oscillation très douce */ .btn-pill--down svg{ animation:nudge-down 3s ease-in-out infinite; } .btn-pill--right svg{ animation:nudge-right 3s ease-in-out infinite; } /* au survol : même mouvement, à peine plus ample et plus soutenu */ .btn-pill--down:hover svg{ animation:nudge-down 1.5s ease-in-out infinite; animation-name:glide-down; } .btn-pill--right:hover svg{ animation:nudge-right 1.5s ease-in-out infinite; animation-name:glide-right; } @keyframes nudge-down{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(2px); } } @keyframes nudge-right{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(2px); } } @keyframes glide-down{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } } @keyframes glide-right{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } } /* moitié basse : clients */ .split-bottom{ background:var(--wine-1); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(28px, 4vh, 56px); padding:40px var(--pad); } .trust-title{ font-family:'Jost', sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.22em; font-size:clamp(11px, 1.05vw, 13px); color:var(--muted); } .trust-logos{ width:min(92%, 1100px); height:auto; filter:brightness(0) invert(1); /* SVG noir -> blanc */ opacity:.92; } /* ---------------- SHOWREEL ---------------- */ .reel{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding:calc(var(--header-h) + 48px) var(--pad) 100px; } /* la vidéo solo est dimensionnée en hauteur pour tenir dans un écran */ .reel-media-wrap.solo .reel-media{ height:var(--media-h); width:100%; } .reel-bg{ position:absolute; top:-20%; left:0; /* 140 % : assez de marge pour la parallaxe, sans trop zoomer l'image */ width:100%; height:140%; background-size:cover; background-position:center; z-index:0; will-change:transform; } .reel-inner{ position:relative; z-index:2; width:100%; max-width:1280px; margin:0 auto; } /* nom de marque : gros, blanc, majuscules, centré */ .reel-brand{ text-align:center; text-transform:uppercase; font-size:clamp(30px, 4.4vw, 58px); line-height:1.05; letter-spacing:.02em; margin-bottom:clamp(24px, 3.5vh, 44px); text-shadow:0 2px 24px rgba(0,0,0,.55); } /* titre de vidéo : discret, majuscules, centré au-dessus de sa vidéo */ .reel-vtitle{ font-size:clamp(10px, .92vw, 12px); letter-spacing:.24em; text-transform:uppercase; text-align:center; color:rgba(255,255,255,.8); margin-bottom:12px; text-shadow:0 1px 12px rgba(0,0,0,.6); } .reel-media-wrap{ display:grid; gap:26px 20px; } .reel-media-wrap.solo{ --media-h:min(54vh, 540px); grid-template-columns:1fr; /* la largeur du bloc = celle de la vidéo, pour que le titre s'aligne dessus */ width:min(1000px, calc(var(--media-h) * 16 / 9), 100%); margin:0 auto; /* vidéo centrée horizontalement */ } .reel-media-wrap.trio{ grid-template-columns:repeat(3, 1fr); } /* le nom de marque remonte quand les vidéos sont en trio (section NRJ) */ .reel--trio .reel-brand{ margin-bottom:clamp(60px, 21vh, 200px); } /* bouton « section suivante » : ancré en bas de la section, sous les vidéos */ .reel-next{ position:absolute; left:50%; bottom:44px; transform:translateX(-50%); z-index:3; border:1px solid rgba(255,255,255,.8); /* contour repris sur le showreel */ } .reel-media{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; background:#111; box-shadow:0 24px 60px rgba(0,0,0,.45); } .reel-media video{ width:100%; height:100%; object-fit:cover; display:block; } /* VERSION PRÉCÉDENTE — conservée pour revenir en arrière facilement : remplacer le bloc "VERSION ACTIVE" ci-dessous par celui-ci pour restaurer le cercle flouté/assombri. .reel-media .play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border:1px solid rgba(255,255,255,.85); border-radius:50%; background:rgba(0,0,0,.28); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:background .3s ease; } .reel-media:hover .play{ background:rgba(0,0,0,.5); } */ /* VERSION ACTIVE — épurée : cercle blanc, rien à l'intérieur */ .reel-media .play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border:1px solid #fff; border-radius:50%; background:none; } .reel-media:hover .play{ background:none; } .reel-media .play::before{ content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%); border-left:15px solid var(--white); border-top:9px solid transparent; border-bottom:9px solid transparent; } /* ---------------- LECTEUR EN SUPERPOSITION ---------------- */ .video-lightbox{ position:fixed; inset:0; z-index:20000; /* au-dessus du header (10000) et du voile de transition (9999) */ display:flex; align-items:center; justify-content:center; padding:32px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; } .video-lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .3s ease; } .video-lightbox__backdrop{ position:absolute; inset:0; background:rgba(9,4,8,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .video-lightbox__box{ position:relative; z-index:1; width:100%; max-width:1100px; } .video-lightbox__frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#000; box-shadow:0 30px 90px rgba(0,0,0,.6); } .video-lightbox__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .video-lightbox__close{ position:absolute; top:-48px; right:0; width:36px; height:36px; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:transparent; color:#fff; font-size:22px; line-height:1; cursor:pointer; transition:opacity .2s ease; } .video-lightbox__close:hover{ opacity:.7; } @media (max-width:900px){ .video-lightbox{ padding:16px; } .video-lightbox__close{ top:-40px; width:32px; height:32px; font-size:19px; } } /* ---------------- CONTACT ---------------- */ .contact-screen{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:calc(var(--header-h) + 60px) var(--pad) 80px; overflow:hidden; } .contact-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; } .contact-veil{ position:absolute; inset:0; z-index:1; /* même teinte que « ils nous ont fait confiance », un cran plus sombre et moins opaque */ background: linear-gradient(180deg, rgba(48,19,31,.76) 0%, rgba(45,18,29,.80) 55%, rgba(26,10,17,.86) 100%); } .contact-inner{ position:relative; z-index:2; width:100%; max-width:560px; text-align:center; } .contact-inner h2{ font-size:clamp(28px, 4vw, 42px); margin-bottom:28px; } .contact-info{ list-style:none; display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:48px; font-size:15px; color:var(--muted); } .contact-info li{ display:flex; align-items:center; gap:12px; } .contact-info a{ text-decoration:underline; text-underline-offset:3px; } .ico{ width:19px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.9; } .contact-form{ display:flex; flex-direction:column; gap:22px; text-align:left; } .contact-form label{ display:block; font-size:13px; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; } .contact-form input, .contact-form textarea{ width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.35); border-radius:8px; padding:14px 16px; color:var(--white); font-family:'Jost', sans-serif; font-size:15px; } .contact-form textarea{ min-height:130px; resize:vertical; } .contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--white); } .contact-form button{ margin-top:6px; background:var(--white); color:var(--black); border:none; border-radius:8px; padding:16px; font-family:'Jost', sans-serif; font-size:14px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:opacity .2s ease; } .contact-form button:hover{ opacity:.85; } /* ---------------- FOOTER ---------------- */ footer{ background:var(--black); padding:64px var(--pad) 40px; text-align:center; /* point d'ancrage final : sans lui, le mandatory snap empêche d'atteindre le pied de page après la dernière section plein écran */ scroll-snap-align:end; } .footer-links{ display:flex; justify-content:center; gap:44px; flex-wrap:wrap; margin-bottom:28px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; } .footer-links a{ color:var(--muted); padding-bottom:5px; border-bottom:1px solid transparent; transition:color .25s ease, border-color .25s ease; } .footer-links a:hover{ color:var(--white); border-color:var(--white); } .footer-bottom{ font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.45); } /* ---------------- RESPONSIVE ---------------- */ @media (max-width: 1024px){ .reel-media-wrap.trio{ grid-template-columns:repeat(2, 1fr); } } @media (max-width: 900px){ :root{ --pad:24px; --header-h:72px; } .site-header .logo img{ width:104px; } /* le menu (Showreel / Contact) reste toujours affiché : plus de bouton burger */ .main-nav{ display:flex; } .main-nav ul{ gap:20px; } .main-nav a{ font-size:12px; letter-spacing:1px; } .nav-toggle{ display:none; } /* accueil, mobile uniquement : le header est visible dès le 1er écran et le reste sur tout le site, sans le petit logo. Le desktop garde son comportement "révélé au scroll" (voir plus haut) — inchangé. */ .page-home .site-header{ opacity:1; pointer-events:auto; } .page-home .site-header .logo{ visibility:hidden; } /* retour vers l'accueil, mobile uniquement : le header ne disparaît plus dans le fondu de sortie (règle desktop) puisqu'il reste visible sur l'accueil mobile — il doit rester au-dessus du voile comme partout ailleurs sur le site, sans clignoter en disparaissant/réapparaissant */ .veil-closing-home .site-header{ opacity:1; } /* en revanche le logo, lui, est absent de l'accueil mobile : sur la page qu'on quitte, rien ne le masquait jusqu'ici, donc il restait visible jusqu'au bout puis disparaissait d'un coup au chargement de la page suivante. On l'efface ici au même rythme que le voile. */ .site-header .logo{ transition:opacity .5s ease; } .veil-closing-home .site-header .logo{ opacity:0; } .hero-center{ text-align:center; width:min(64.6vw, 357px); /* -15% par rapport à la taille mobile précédente */ transform:none; /* entièrement centré, plus de décalage */ } .hero-eyebrow{ margin-left:0; /* ne s'aligne plus sur le bord du logo */ white-space:normal; /* on laisse passer à la ligne plutôt que déborder */ font-size:11px; /* +10% (plancher du clamp desktop = 10px sur mobile) */ letter-spacing:.2em; line-height:1.5; } .hero-cta{ bottom:64px; } /* encore un peu remonté, détaché du bas */ .btn-pill{ font-size:11.5px; padding:10px 18px; gap:9px; letter-spacing:.13em; } /* la vidéo n'est plus assez large : on empile texte sous vidéo */ .split{ grid-template-rows:3fr 2fr; } .split-top::after{ background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.72) 100%); } .split-text{ top:auto; bottom:0; transform:none; width:100%; /* on dégage la place du bouton, posé juste en dessous */ padding:0 var(--pad) 84px; text-align:center; } /* le titre peut passer à la ligne (fini le débordement du nowrap desktop), et le paragraphe — plus étroit que son parent — est recentré comme bloc */ .split-text h2{ white-space:normal; } .split-text p{ margin-left:auto; margin-right:auto; } /* sur mobile le texte est centré : le bouton le reste aussi */ .split-watch{ left:50%; transform:translateX(-50%); bottom:22px; } .split-bottom{ gap:24px; padding:32px var(--pad); } .trust-logos{ width:100%; } /* section plein écran comme sur desktop (on ne force plus min-height:auto) : colonne centrée verticalement, pour empiler proprement titre / vidéo(s) / bouton */ .reel{ padding:calc(var(--header-h) + 40px) var(--pad) 40px; flex-direction:column; justify-content:center; gap:28px; } .reel-media-wrap.trio{ grid-template-columns:1fr; } .reel-media-wrap.solo{ width:100%; } .reel-media-wrap.solo .reel-media{ height:auto; width:100%; aspect-ratio:16/9; } .reel-bg{ top:-12%; height:124%; } /* plus besoin du grand espace réservé aux 3 vidéos côte à côte du desktop : sur mobile elles sont empilées en une seule colonne */ .reel--trio .reel-brand{ margin-bottom:clamp(24px, 3.5vh, 44px); } /* Disneyland / Cartier (sections à une seule vidéo) : hauteur réservée pour la marque et le sous-titre, qu'ils tiennent sur 1 ou 2 lignes — sinon la vidéo ne tombe pas exactement à la même hauteur d'une section à l'autre. NRJ (3 vidéos) n'est pas concernée. */ .reel:not(.reel--trio) .reel-brand{ min-height:63px; } .reel:not(.reel--trio) .reel-vtitle{ min-height:29px; } /* le bloc (texte + vidéo) est centré comme un tout par le flex column, ce qui pousse la vidéo sous le centre réel de l'écran (d'autant plus que le padding du haut, qui réserve la place du header, est plus grand que celui du bas) ; on corrige les deux écarts pour que ce soit la vidéo elle-même — pas l'ensemble du bloc — qui tombe au milieu de l'écran */ .reel:not(.reel--trio) .reel-inner{ transform:translateY(calc((-1 * var(--header-h) - 104px - clamp(24px, 3.5vh, 44px)) / 2)); } /* bouton "suivant" (sections à une seule vidéo) : même emplacement que le CTA "Découvrez nos créations" de l'accueil */ .reel-next{ position:absolute; left:50%; bottom:64px; transform:translateX(-50%); } /* section NRJ (3 vidéos empilées, hauteur variable) : bouton laissé dans le flux, sous les vidéos, pour ne jamais risquer de les recouvrir */ .reel--trio .reel-next{ position:static; transform:none; } .footer-links{ gap:20px; flex-direction:column; } } /* accueil : le retour à la ligne forcé ne s'active que sous ~453px (testé et mesuré : 452px = 2 lignes naturellement, 453px = 1 ligne) — au-delà, .eyebrow-break reste un
inerte (display:none) et le texte tient sur une seule ligne avec son point-séparateur. */ .eyebrow-break{ display:none; } @media (max-width: 452px){ /* le point ne sert qu'à séparer les deux segments sur une même ligne : inutile, et disgracieux, une fois empilés — on le retire et on force le retour à la ligne à sa place (sans quoi le texte, plus court une fois le point enlevé, retombe parfois sur une seule ligne sans aucun séparateur, ce qui est pire) */ .eyebrow-dot{ display:none; } .eyebrow-break{ display:inline; } } /* Accessibilité : respecter la préférence système */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; scroll-snap-type:none; } .reel-bg{ transform:none !important; } .page-home .site-header{ transition:none; } }