/* ============================================================ V2 — Refonte "maquette optimisée" (structure Claude Design) Palette OR (#E6C36B) accent principal + rose survol + violet secondaire. Polices Sora + Plus Jakarta Sans (css/fonts.css). Moteur 3D : js/main.js. ============================================================ */ :root { /* Fonds */ --bg: #0a0718; --bg-2: #0B0718; /* Accents */ --gold: #E6C36B; /* accent PRINCIPAL : titres forts, chiffres, liens */ --gold-2: #C98A3C; --gold-3: #B8924A; --violet: #8B6BFF; /* secondaire : halos, lampe nav, icônes, accents décor */ --violet-btn: #5B3FD0; /* boutons à texte blanc : contraste AA (>=4.5:1) */ --violet-txt: #A78BFF; /* violet pour TEXTE sur fond sombre : contraste renforcé */ --blue: #4B93FF; --blue-2: #2E4A86; --magenta: #E05CFF; --pink: #FF5CA8; /* survol des cartes */ --cyan: #46E0FF; --green: #8fd06f; /* wordmark 87 */ /* Texte */ --text: #F7F8FC; --text-soft: #EAECF3; --text-mut: #C2C6D2; --text-dim: #8890a6; /* Surfaces verre — valeurs EXACTES de la maquette (semi-transparent : le fond transparaît, pas de démarcation) */ --glass: rgba(11,7,24,.72); --glass-2: rgba(11,7,24,.5); --glass-3: rgba(11,7,24,.55); --brd: rgba(160,140,255,.16); --brd-2: rgba(160,140,255,.4); --brd-soft: rgba(160,140,255,.12); /* Dégradés */ --grad-gold: linear-gradient(100deg, #FFE7A6, #E6C36B 55%, #C98A3C); --chrome: linear-gradient(180deg,#ffffff 0%,#e0e6f3 13%,#9aa4bb 32%,#f4f7ff 48%,#828da4 61%,#c6cede 79%,#737d91 100%); --grad-brd: linear-gradient(140deg, rgba(139,107,255,.7), rgba(255,92,168,.55) 55%, rgba(230,195,107,.4)); /* Typo */ /* Une SEULE famille de texte (Montserrat variable 400-800) : voir l'en-tête de fonts.css. Les trois variables restent distinctes pour garder les rôles lisibles dans le CSS. */ --font-display: "Montserrat", system-ui, "Segoe UI", sans-serif; /* Typo « impact » (référence client 25/07 : display condensé ultra-bold, capitales) : réservée aux GROS éléments (h1/h2, gros chiffres, prix, wordmark). Les petits éléments d'interface (nav, boutons, badges) restent en Sora, plus lisible à petite taille. */ --font-impact: "Montserrat", system-ui, "Segoe UI", sans-serif; --font-body: "Montserrat", system-ui, "Segoe UI", sans-serif; /* Rythme */ --r-sm: 20px; --r: 26px; --r-lg: 30px; --wrap: 1180px; --ease: cubic-bezier(.22, 1, .36, 1); --z-canvas: -1; --z-header: 90; --z-nav: 100; --z-progress: 120; } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; background: var(--bg); color: var(--text-soft); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.6; } ::selection { background: var(--violet); color: var(--bg); } a { color: var(--gold); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--violet); } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-display); } input, textarea { font-family: var(--font-body); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--violet); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 999; } .skip-link:focus { left: 0; } /* Focus clavier net et cohérent (a11y WCAG 2.4.7) */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; } .btn:focus-visible, .tube-link:focus-visible, .devis-nav:focus-visible, .reel:focus-visible, .soc-btn:focus-visible { outline-offset: 3px; } /* Révélation au scroll (main.js ajoute .is-in) — jamais bloquant */ /* RÈGLE DE SÛRETÉ : le contenu est VISIBLE par défaut. L'animation d'apparition n'est activée que si main.js a pris la main (classe .js-reveal posée sur dès sa première ligne). Avant, `.reveal { opacity: 0 }` s'appliquait toujours : si le script ne se chargeait pas (réseau instable, script bloqué, erreur), TOUTE la page restait invisible. */ .js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .js-reveal .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } } /* APPARITION DU HERO — même animation que .reveal, mais en CSS pur. Le hero est ce qu'on veut peindre au plus vite : tant qu'il portait .reveal il restait à opacité 0 jusqu'à ce que main.js s'exécute PUIS que l'IntersectionObserver déclenche. Ici l'animation part dès le premier rendu, sans script. Durée et courbe identiques. */ .hero-entree { animation: hero-apparition .6s var(--ease) both; } @keyframes hero-apparition { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hero-entree { animation: none; } } /* RENDU DIFFÉRÉ DES SECTIONS HORS ÉCRAN. Le document fait 15 600 px de haut sur mobile, dont 1350 px visibles à l'arrivée. Sans cette règle le navigateur calcule le style et la mise en page des 14 250 px restants AVANT de pouvoir peindre le hero : 1334 ms de fil principal, mesurés, et autant de retard sur le LCP. content-visibility saute ce travail tant que la section n'approche pas de l'écran. `contain-intrinsic-size: auto 1200px` donne une estimation de départ, puis le navigateur mémorise la hauteur réelle après le premier rendu : la barre de défilement se corrige seule et aucune section ne saute. Le hero est exclu : c'est lui qu'on veut peindre au plus vite. */ main > section:not(#accueil), .site-footer { content-visibility: auto; contain-intrinsic-size: auto 1200px; } /* Apparition douce du canvas 3D (engine.js pose .is-ready) */ #scene { opacity: 0; transition: opacity .7s ease; } #scene.is-ready { opacity: 1; } /* ---------- Animations (de la maquette) ---------- */ @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } @keyframes lev { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } } @keyframes lampBounce { 0% { transform: scaleX(.6); } 60% { transform: scaleX(1.12); } 100% { transform: scaleX(1); } } /* ---------- Fond cosmique de la maquette, un peu animé (sous le canvas 3D) ---------- */ #scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: var(--z-canvas); display: block; } /* Voile violet ambiant façon Cosmy : grand halo doux centré, coins qui restent sombres. z-index 0 + placé avant
dans le DOM => passe AU-DESSUS du canvas 3D (z -1) mais SOUS le contenu. « screen » ajoute de la lumière violette au lieu de masquer la 3D. */ .violet-veil { position: fixed; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(115% 85% at 50% 42%, rgba(126,88,226,.30), rgba(88,58,178,.13) 48%, rgba(20,10,45,0) 78%), /* voile violet uniforme leger : adoucit tout le fond en liftant les noirs trop durs */ linear-gradient(180deg, rgba(139,107,255,.07), rgba(110,82,205,.05) 58%, rgba(139,107,255,.07)); } /* Quand la 3D tourne, le voile est produit par le shader du fond : sinon il repasserait par-dessus les écrans des mockups et laverait les vidéos. */ .has-3d .violet-veil { display: none; } /* ---------- Repli des mockups ---------- Le moteur 3D ne démarre pas partout : navigateur sans WebGL2, « Réduire les animations » activé (très courant sur iPhone), mode économie de données, ou processeur à moins de 4 cœurs. Sans cette image, la bande réservée aux mockups restait DÉSESPÉRÉMENT VIDE. Elle disparaît dès que la 3D prend la main. */ .mockups-repli { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .mockups-repli img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)); animation: repliFlotte 7s ease-in-out infinite; } .has-3d .mockups-repli { display: none; } @keyframes repliFlotte { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .mockups-repli img { animation: none; } } .cosmos-fallback { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; background: radial-gradient(72% 60% at 82% 6%, rgba(139,107,255,.46), transparent 60%), radial-gradient(64% 62% at 12% 94%, rgba(96,72,196,.36), transparent 62%), radial-gradient(95% 85% at 50% 60%, rgba(84,58,168,.26), transparent 72%), linear-gradient(180deg, #0a0718 0%, #0d0a22 55%, #140d2e 100%); } /* Aura nébuleuse qui dérive et respire lentement (« un peu animé ») */ .cosmos-fallback::before, .cosmos-fallback::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; opacity: .5; } .cosmos-fallback::before { width: 55vw; height: 55vw; top: -10vw; right: -8vw; background: radial-gradient(circle, rgba(139,107,255,.5), rgba(139,107,255,0) 66%); animation: aura1 34s ease-in-out infinite; } .cosmos-fallback::after { width: 48vw; height: 48vw; bottom: -12vw; left: -6vw; background: radial-gradient(circle, rgba(70,224,255,.32), rgba(230,195,107,.14) 40%, rgba(70,224,255,0) 68%); animation: aura2 44s ease-in-out infinite; } @keyframes aura1 { 0%,100% { transform: translate(0,0) scale(1); opacity: .5; } 50% { transform: translate(-4vw,3vw) scale(1.14); opacity: .72; } } @keyframes aura2 { 0%,100% { transform: translate(0,0) scale(1.05); opacity: .42; } 50% { transform: translate(5vw,-3vw) scale(.92); opacity: .6; } } .cosmos-stars { position: fixed; inset: -8%; z-index: -2; opacity: .34; pointer-events: none; will-change: transform; background-image: radial-gradient(1.4px 1.4px at 40px 60px, #fff, transparent), radial-gradient(1.2px 1.2px at 160px 120px, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 90px 200px, rgba(255,255,255,.6), transparent), radial-gradient(1.6px 1.6px at 220px 40px, #fff, transparent), radial-gradient(1.1px 1.1px at 320px 300px, rgba(255,255,255,.7), transparent); background-size: 260px 260px, 300px 300px, 220px 220px, 340px 340px, 400px 400px; animation: twinkle 6s ease-in-out infinite; /* plus de dérive : le fond étoilé est immobile */ } @keyframes twinkle { 0%,100% { opacity: .6; } 50% { opacity: .38; } } @media (prefers-reduced-motion: reduce) { .cosmos-fallback::before, .cosmos-fallback::after, .cosmos-stars { animation: none; } } /* ---------- Barre de progression (main.js ajoute .scroll-progress, pilote --scroll-p sur ) ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; z-index: var(--z-progress); width: 100%; transform-origin: 0 0; transform: scaleX(var(--scroll-p, 0)); background: linear-gradient(90deg, var(--violet), var(--gold)); box-shadow: 0 0 14px rgba(139,107,255,.8); pointer-events: none; } /* ---------- Header : wordmark à GAUCHE, sur la même ligne que la nav (demande client 25/07) ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); display: flex; justify-content: flex-start; align-items: center; height: 84px; padding: 0 26px; pointer-events: none; } /* Scrim haut : le contenu qui défile derrière le logo/nav reste lisible */ .site-header::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 158px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(7,5,20,.92) 0%, rgba(7,5,20,.55) 42%, transparent 100%); } /* Wordmark-logo : Fredoka ronde épaisse (réf. « KOFI »), O étiré dessiné en SVG (brand-oo) */ .brand { display: inline-flex; align-items: center; gap: 10px; pointer-events: auto; font-family: 'Fredoka', var(--font-impact); font-weight: 700; font-size: 24px; letter-spacing: .015em; text-transform: uppercase; color: var(--text); text-shadow: 0 2px 12px rgba(5,3,15,.6); } /* Le O étiré et basculé du logo : hérite de la couleur du texte (currentColor) */ .brand-oo { height: .68em; width: 1.28em; display: inline-block; vertical-align: -.01em; margin: 0 .05em; } /* Desktop : le logo vit DANS le groupe de nav, collé à la pilule ; la copie du header disparaît */ .brand-nav { margin-right: 8px; } @media (min-width: 1121px) { .site-header .brand { display: none; } } /* Mobile/tablette : la nav devient un dock en bas -> le logo du groupe se cache, celui du header reste en haut */ @media (max-width: 1120px) { .brand-nav { display: none; } .brand { font-size: 21px; } } /* le mot-symbole est UN seul element flex : sinon le gap de .brand ecartait « Brocoli » et « 87 » */ .brand-txt { white-space: nowrap; } /* etoiles dorees scintillantes autour du wordmark (decoratives, hors flux) */ .brand { position: relative; } .brand::before, .brand::after { content: '\2726'; position: absolute; color: var(--gold, #FFD479); text-shadow: 0 0 11px rgba(255,212,121,.95); pointer-events: none; animation: statTwinkle 2.6s ease-in-out infinite; } .brand::before { top: -9px; left: -13px; font-size: 12px; } .brand::after { bottom: -7px; right: -15px; font-size: 9px; animation-delay: 1.2s; } /* ---------- Nav tubelight (hooks main.js : .tube-pill contient les liens + .tube-lamp) ---------- */ .tube-nav { /* top 12px : la pilule (~60px de haut) se centre sur la ligne du wordmark (header de 84px) */ position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: var(--z-nav); display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 999px; background: rgba(11,7,24,.72); border: 1px solid rgba(160,140,255,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 50px -18px rgba(0,0,0,.85); } .tube-pill { position: relative; display: flex; align-items: center; gap: 2px; } /* lampe unique : main.js pose left/width sur le lien actif */ .tube-lamp { position: absolute; top: 2px; bottom: 2px; left: 0; width: 40px; border-radius: 999px; opacity: 0; background: radial-gradient(60% 120% at 50% -10%, rgba(139,107,255,.55), rgba(139,107,255,.12) 70%, transparent); transition: left .5s cubic-bezier(.34,1.56,.64,1), width .5s cubic-bezier(.34,1.56,.64,1), opacity .3s var(--ease); pointer-events: none; } .tube-lamp.is-on { opacity: 1; } .lamp-bar { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 34px; height: 4px; border-radius: 4px; background: var(--violet); box-shadow: 0 0 16px 3px rgba(139,107,255,.9); } .tube-link { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 9px 13px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--text-mut); transition: color .3s var(--ease); white-space: nowrap; } .tube-link.is-active { color: #fff; } .tube-link svg { width: 16px; height: 16px; flex: none; } /* CTA nav « Demander un devis » : doré + texte BLANC (permanent), lueur dorée, push/surélèvement */ .devis-nav { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 11px 18px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: #0b0812; background: var(--gold); box-shadow: 0 10px 26px -8px rgba(230,195,107,.5); white-space: nowrap; transition: transform .18s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease); } /* Lueur dorée pulsée via opacity d'un pseudo (compositable) plutôt que box-shadow animée (repeint chaque frame) */ .devis-nav::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 12px 40px -6px rgba(230,195,107,.9); opacity: .55; animation: pulseGoldOp 2.8s ease-in-out infinite; pointer-events: none; } .devis-nav:hover { transform: translateY(-2px); background: #f0d488; } .devis-nav:active { transform: translateY(1px) scale(.97); } .devis-nav .spark { color: #0b0812; } @keyframes pulseGoldOp { 0%,100% { opacity: .5; } 50% { opacity: 1; } } /* ---------- Boutons ---------- */ /* Boutons PLATS (pas de relief), survol = doré + texte noir + surélèvement, clic = push */ /* padding/corps resserrés : Montserrat est plus large que l'ancienne Sora, les deux boutons du hero passaient à la ligne. On récupère la largeur sans descendre sous 44 px de haut. */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; padding: 15px 22px; border-radius: 999px; cursor: pointer; border: 0; transition: transform .18s var(--ease), background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); white-space: nowrap; } .btn:hover { transform: translateY(-3px); } .btn:active { transform: translateY(1px) scale(.97); } .btn-primary { color: #fff; background: var(--violet-btn); box-shadow: 0 12px 30px -12px rgba(91,63,208,.7); } .btn-primary:hover { background: var(--gold); color: #0b0812; box-shadow: 0 16px 40px -12px rgba(230,195,107,.75); } .btn-ghost { color: var(--text-soft); background: var(--glass-2); border: 1px solid rgba(160,140,255,.22); } .btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: var(--glass-3); } .btn-gold { color: #0b0812; background: var(--gold); box-shadow: 0 12px 30px -12px rgba(230,195,107,.6); } .btn-gold:hover { background: #f0d488; color: #0b0812; } /* ---------- Verre / cartes ---------- */ /* Pas de backdrop-filter ici : à 72% d'opacité le flou est invisible mais serait recalculé à chaque frame par-dessus le canvas 3D animé (coût GPU inutile). Le blur n'est gardé que sur les surfaces à faible alpha (hero-card, nav, contact-left). */ .glass { position: relative; background: var(--glass); border: 1px solid var(--brd); border-radius: var(--r); box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); } /* Halo rose interactif : suit la souris (main.js pose --mx/--my) */ .glass::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255,92,168,.20), transparent 65%); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; } .glass:hover::after { opacity: 1; } .card { position: relative; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } /* Halo sombre autour des cartes : occulte le fond 3D lumineux dans les interstices (plus de « traits ») */ .card, .step, .pack, .collab-card, .about-card, .hero-card, .faq-item, .mediakit { box-shadow: 0 24px 60px -30px rgba(0,0,0,.85); } .card:hover { transform: translateY(-6px); border-color: rgba(255,92,168,.85); box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), 0 0 22px rgba(255,92,168,.5), inset 0 0 0 1px rgba(255,92,168,.35); } /* ---------- Typo utilitaire ---------- */ .eyebrow { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .22em; font-size: 12.5px; margin: 0 0 18px; color: var(--gold); text-shadow: 0 1px 10px rgba(5,3,15,.7); } .eyebrow--violet { color: var(--violet-txt); } .h-sec { font-family: var(--font-impact); font-weight: 800; font-size: clamp(25px, 3.4vw, 42px); line-height: 1.14; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; margin: 0 0 44px; max-width: 760px; color: var(--text); text-shadow: 0 2px 20px rgba(5,3,15,.7), 0 0 3px rgba(5,3,15,.5); } .accent { color: var(--gold); } /* Chevauchement sans/serif (demande client 25/07) : dans les titres, le mot accentué passe en Times New Roman ITALIQUE bas de casse, face aux capitales Montserrat. Police système : rien à télécharger. Mise en valeur par SUPERPOSITION : nettement plus grand que les capitales, interligne resserré et marges négatives -> le mot serif mord sur ses voisins et passe DEVANT eux (z-index). L'interligne reste > 0 : un accent de plusieurs mots peut passer à la ligne sans que ses propres lignes se recouvrent. */ .hero-h1 .accent, .h-sec .accent, .about-h2 .accent { font-family: "Times New Roman", Times, Georgia, serif; font-style: italic; font-weight: 400; text-transform: none; font-size: 1.55em; letter-spacing: 0; line-height: .85; position: relative; z-index: 1; margin-inline: -.06em -.04em; padding-right: .06em; } .sub { color: var(--text-mut); } /* Lisibilité au-dessus des objets 3D lumineux (comète, Saturne, Terre) */ .hero-h1, .about-h2 { text-shadow: 0 2px 20px rgba(5,3,15,.7), 0 0 3px rgba(5,3,15,.5); } .hero-lede, .about-grid p, .contact-lede { text-shadow: 0 1px 12px rgba(5,3,15,.55); } /* ---------- Shell de section ---------- */ .section { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 80px 32px; scroll-margin-top: 120px; } /* Rythmes verticaux spécifiques (maquette) : pourquoi resserré sous services, contact aéré avant footer */ #pourquoi { padding-top: 40px; } #contact { padding-bottom: 100px; } /* ---------- Grilles ---------- */ .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } /* Voile sombre doux derrière les grilles de cartes : les interstices ne laissent plus transparaître un fond 3D plus clair (plus de « traits »), sans contour par carte. */ .g2, .g3, .g4, .steps, .packs, .collab-grid { position: relative; z-index: 0; } /* Nuage sombre TRÈS diffus derrière les grilles : les cartes reposent sur une base sombre (comme le fond dark de la maquette) quelle que soit la 3D lumineuse derrière, SANS bord net (flou 30px + dégradé qui s'éteint doucement) → plus de « bloc violet » ni de « traits ». */ .g2::before, .g3::before, .g4::before, .steps::before, .packs::before, .collab-grid::before { content: ""; position: absolute; inset: -70px; z-index: -1; pointer-events: none; /* Rayons (58%/54%) volontairement < 50%/stop-transparent (84%) : le dégradé atteint VRAIMENT 0 avant les bords de la boîte (50/54 = 92% > 84%), sinon il reste ~25% d'opacité au bord -> coupure nette = délimitation visible. Flou léger en sécurité. */ background: radial-gradient(ellipse 58% 54% at 50% 50%, rgba(6,4,15,.92) 0%, rgba(6,4,15,.78) 38%, rgba(6,4,15,.4) 62%, transparent 84%); filter: blur(18px); } /* ============================================================ HERO ============================================================ */ .hero { scroll-margin-top: 120px; position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: center; } /* Halo violet ambiant du hero. Il s'éteint (alpha 0) AVANT les bords de sa boîte : sinon son point le plus lumineux tombait sur le bord bas de .hero (overflow:hidden) et était coupé net -> trait horizontal sur toute la largeur. */ .hero-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 0; pointer-events: none; background: radial-gradient(58% 62% at 50% 52%, rgba(139,107,255,.42), rgba(139,107,255,.12) 46%, rgba(139,107,255,0) 72%); filter: blur(30px); } /* Ce halo est en z-index 0, donc AU-DESSUS du canvas 3D (z -1) : il deteignait en violet sur les ecrans des mockups. Quand la 3D tourne, l'ambiance violette vient deja du shader du fond. */ .has-3d .hero-glow { display: none; } /* padding haut : la nav est fixe a top:60px et fait ~62px -> il faut degager sous elle */ .hero-grid { position: relative; z-index: 5; width: 100%; max-width: 1300px; margin: 0 auto; padding: 178px 40px 100px; display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr); grid-template-areas: "head visual" "card visual"; column-gap: 44px; row-gap: 20px; align-items: center; } /* 3 temps de lecture : accroche (hors carte) -> mockups -> bloc d'action. Même IA desktop/mobile. */ .hero-head { grid-area: head; } .hero-visual { grid-area: visual; } .hero-card { grid-area: card; } .hero-card { background: rgba(11,7,24,.5); border: 1px solid rgba(160,140,255,.18); border-radius: var(--r); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); padding: 40px; } .hero-h1 { font-family: var(--font-impact); font-weight: 800; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.14; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; margin: 0; color: var(--text); } .hero-lede { font-size: 18px; line-height: 1.65; color: var(--text-soft); max-width: 50ch; margin: 22px 0 0; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } /* dl.stats : main.js anime les compteurs (.stats dt) */ .stats { display: flex; gap: 26px; margin: 34px 0 0; flex-wrap: wrap; } .stats > div { display: flex; flex-direction: column; } .stats dt { font-family: var(--font-impact); font-weight: 800; font-size: 25px; letter-spacing: .01em; color: var(--gold, #FFD479); margin: 0; text-shadow: 0 0 18px rgba(255,212,121,.28); } .stats dt .star { font-size: 15px; color: var(--violet); vertical-align: super; } .stats dd { color: var(--text-mut); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 4px 0 0; } .stats .divider { width: 1px; align-self: stretch; background: rgba(160,140,255,.18); } .stats-note { margin: 14px 0 0; font-size: 12px; color: var(--text-mut); text-shadow: 0 1px 8px rgba(5,3,15,.7); } /* petite etoile jaune qui scintille a cote de chaque chiffre (fait ressortir) */ .stats dt::after { content: '\2726'; margin-left: 6px; font-size: 12px; color: var(--gold, #FFD479); vertical-align: super; display: inline-block; text-shadow: 0 0 10px rgba(255,212,121,.9); animation: statTwinkle 1.9s ease-in-out infinite; } .stats > div:nth-child(3) dt::after { animation-delay: .5s; } .stats > div:nth-child(5) dt::after { animation-delay: 1s; } @keyframes statTwinkle { 0%,100% { opacity: .3; transform: scale(.8) rotate(0deg); } 50% { opacity: 1; transform: scale(1.18) rotate(90deg); } } @media (prefers-reduced-motion: reduce) { .stats dt::after, .tags li::after, .brand::before, .brand::after { animation: none; opacity: .9; } } /* ligne source sous les encadres du bloc "Pourquoi" */ .card-src { font-size: 11px; color: var(--text-dim); margin: 16px 0 0; padding-top: 11px; border-top: 1px solid rgba(160,140,255,.12); font-style: italic; letter-spacing: .01em; } /* ligne collaboration reseaux (offres) */ .offer-collab { text-align: center; margin: 24px auto 0; max-width: 660px; font-size: 15px; color: var(--text-soft); line-height: 1.6; } .offer-collab b { color: var(--gold); } /* Espace réservé pour les 3 iPhones 3D (rendus par le moteur dans le canvas) */ .hero-visual { position: relative; height: 540px; } .scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; color: var(--text-mut); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-family: var(--font-display); font-weight: 600; z-index: 5; white-space: nowrap; text-shadow: 0 1px 8px rgba(5,3,15,.85); } .scroll-cue .mouse { width: 24px; height: 38px; border-radius: 14px; border: 2px solid rgba(160,140,255,.4); display: flex; justify-content: center; padding-top: 7px; } .scroll-cue .mouse i { width: 4px; height: 8px; border-radius: 4px; background: var(--violet); animation: wheel 1.8s infinite; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ============================================================ CARTES (services, pourquoi) — icône chip + titre + texte + tags ============================================================ */ .card-pad { padding: 32px; } .ic-chip { width: 52px; height: 52px; border-radius: 15px; background: rgba(139,107,255,.16); border: 1px solid rgba(160,140,255,.22); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .ic-chip svg { width: 26px; height: 26px; } .ic-chip--gold { background: rgba(230,195,107,.14); border-color: rgba(230,195,107,.3); } .card h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; margin: 0 0 8px; color: var(--text); } .card > p { color: var(--text-mut); font-size: 14.5px; line-height: 1.6; margin: 0; } .card > p b { color: var(--text); font-weight: 700; } /* Source des statistiques : présente (crédibilité + citabilité IA) mais discrète */ .src { color: var(--text-dim); font-size: .82em; white-space: nowrap; } .tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 18px 0 0; } .tags li, .chip { font-size: 13px; padding: 7px 14px; border-radius: 999px; background: rgba(139,107,255,.14); border: 1px solid rgba(160,140,255,.2); color: var(--text-soft); } /* petite etoile doree qui scintille au coin de chaque qualite (meme langage que les chiffres du hero) */ .tags li { position: relative; } .tags li::after { content: '\2726'; position: absolute; top: -5px; right: -2px; font-size: 10px; color: var(--gold, #FFD479); text-shadow: 0 0 9px rgba(255,212,121,.9); pointer-events: none; animation: statTwinkle 2.2s ease-in-out infinite; } .tags li:nth-child(2)::after { animation-delay: .44s; } .tags li:nth-child(3)::after { animation-delay: .88s; } .tags li:nth-child(4)::after { animation-delay: 1.32s; } .tags li:nth-child(5)::after { animation-delay: 1.76s; } .g4 .card-pad { padding: 30px; } .g4 .card { border-radius: 24px; } .g4 .card h3 { font-size: 19px; } .g4 .ic-chip { width: 50px; height: 50px; border-radius: 14px; margin-bottom: 18px; } .g4 .ic-chip svg { width: 24px; height: 24px; } .section-cta { margin: 36px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 15px; } /* Rembourrage vertical sur un lien EN LIGNE : la zone tactile passe de 19 à ~47 px sans décaler la mise en page (le padding vertical d'un inline ne compte pas dans la ligne). Google exige ~48 px ; en dessous il signale « éléments tactiles trop rapprochés ». */ .section-cta a { color: var(--gold); padding: 14px 0; } .section-cta a:hover { color: var(--violet); } /* ============================================================ À PROPOS (glass card 2 colonnes : bio+tags / stats or) ============================================================ */ .about-card { padding: 52px; overflow: hidden; border-radius: var(--r-lg); } .about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } /* Hiérarchie de lecture : un chapô qui accroche, puis le détail en retrait. Sans ça, les 3 paragraphes gris identiques se lisent comme un mur. */ /* texte a-propos uniformise : meme taille intermediaire + meme couleur pour tous les paragraphes */ .about-grid p, .about-grid .about-lede { color: var(--text-soft); font-size: 16.5px; line-height: 1.72; margin: 0 0 14px; max-width: 56ch; } .about-grid p:last-of-type { margin-bottom: 26px; } .about-h2 { font-family: var(--font-impact); font-weight: 800; font-size: clamp(25px,3.1vw,38px); line-height: 1.14; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; margin: 0 0 22px; color: var(--text); } .about-glow { position: absolute; top: -60px; right: -40px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(70,224,255,.16), transparent 65%); filter: blur(40px); pointer-events: none; } /* colonne droite : 3 stats + téléphone vidéo (comme la maquette) */ .about-right { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; perspective: 1200px; } .stat-cards { display: flex; flex-direction: column; gap: 11px; flex: 1; min-width: 132px; } /* Téléphone vidéo (maquette) : dimensions maquette + flottement doux (lev) */ .about-phone { flex: none; margin-inline: auto; width: 248px; aspect-ratio: 9 / 19.5; border-radius: 44px; padding: 3px; background: linear-gradient(145deg,#eaeaf2,#9a9aa8 42%,#d2d2dc 60%,#7c7c8a); box-shadow: 0 40px 80px -24px rgba(0,0,0,.72), 0 0 60px rgba(139,107,255,.22); animation: lev 6.8s ease-in-out infinite; will-change: transform; } .about-phone-screen { position: relative; width: 100%; height: 100%; border-radius: 41px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(72% 50% at 50% 42%, rgba(139,107,255,.22), transparent 70%), #0b0b14; } .about-phone-screen::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 46px; height: 13px; background: #08080e; border-radius: 9px; } /* le mockup « A propos » joue la vraie video et renvoie vers sa fiche du portfolio */ .about-phone { border: 0; cursor: pointer; } .about-phone-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 41px; } .about-phone-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.94); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(139,107,255,.5); transition: transform .2s var(--ease); } .about-phone:hover .about-phone-play { transform: translate(-50%,-50%) scale(1.09); } /* compteur de vues de la video : element du site (charte or/verre), pas une copie d'interface TikTok */ .about-phone-vues { position: absolute; z-index: 1; left: 14px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border-radius: 999px; font-family: var(--font-display); font-size: 12.5px; letter-spacing: .01em; color: rgba(255,255,255,.86); background: rgba(8,5,20,.62); border: 1px solid rgba(255,212,121,.34); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); box-shadow: 0 6px 20px -8px rgba(0,0,0,.8); } .about-phone-vues svg { width: 15px; height: 15px; color: var(--gold, #FFD479); flex: none; } .about-phone-vues b { font-weight: 700; font-size: 14px; color: var(--gold, #FFD479); } .about-phone-play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #17131f; margin-left: 4px; } .about-phone-label { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--text-soft); } .stat-cards .abt-stat { padding: 15px 17px; border-radius: 15px; background: rgba(255,255,255,.03); border: 1px solid rgba(160,140,255,.12); } .stat-cards .abt-stat dt { font-family: var(--font-impact); font-weight: 800; font-size: 22px; letter-spacing: .01em; color: var(--gold); margin: 0; line-height: 1.1; } .stat-cards .abt-stat dd { color: var(--text-mut); font-size: 12.5px; margin: 3px 0 0; } /* ============================================================ PROCESS (3 étapes, gros numéros or) ============================================================ */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .step { padding: 34px; } .step-k { font-family: var(--font-impact); font-weight: 800; font-size: 46px; line-height: 1; color: var(--gold); margin-bottom: 16px; } .step h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 0 0 8px; color: var(--text); } .step p { color: var(--text-mut); font-size: 15px; line-height: 1.65; margin: 0; } /* ============================================================ PORTFOLIO (grille de vignettes verticales, clic -> vidéo) ============================================================ */ .pf-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; } .reel { position: relative; flex: 0 0 228px; width: 228px; aspect-ratio: 9/16; border-radius: 20px; overflow: hidden; border: 0; cursor: pointer; padding: 0; color: #fff; display: block; box-shadow: 0 20px 44px -22px rgba(0,0,0,.7); transition: transform .22s var(--ease), box-shadow .3s var(--ease); } .reel:hover { transform: translateY(-6px); box-shadow: 0 26px 54px -20px rgba(0,0,0,.7), 0 0 22px rgba(255,92,168,.5); } /* ÉTALONNAGE PAR VIDÉO. Certaines sources sont surexposées et les fichiers d'origine ne sont plus disponibles : on corrige donc à l'affichage. Les trois variables valent 1 par défaut, donc AUCUNE vidéo n'est touchée tant qu'on ne lui donne pas ses propres valeurs (voir plus bas, une ligne par vidéo). Le filtre porte sur la balise