:root{ /* Palette relevee sur la reference : noir #050505, blanc, cyan #3b5bfd. */ --ink:#ffffff; /* texte : blanc */ --paper:#0b0b10; /* sol : noir de la reference */ --paper-2:#14141b; /* surfaces relevees : cartes, jetons, encarts */ --line:#24242e; /* filets */ --accent:#3b5bfd; /* cyan, accent unique */ --accent-2:#6bd490; /* signal « en ligne » */ --muted:#9d9ca6; /* texte secondaire */ --shadow:rgba(0,0,0,.5); --or:#3b5bfd; /* alias historique de l'accent */ --nav-h:88px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;color-scheme:dark;background:var(--paper)} body{ background:var(--paper); color:var(--ink); font-family:"Inter",system-ui,sans-serif; font-size:17px; font-weight:500; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } .wrap{max-width:1040px;margin:0 auto;padding:0 28px} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ---- nav ---- */ /* Barre transparente posee sur la page, comme la reference : le texte passe au noir au-dessus des sections claires (html.nav-clair, main.js). */ .nav-bar{position:fixed;top:0;left:0;right:0;z-index:40;background:transparent;color:#fff;pointer-events:none;transition:color .3s ease} .nav-bar .wrap{max-width:none;padding:0 40px} nav{display:flex;justify-content:space-between;align-items:center;height:88px;padding:0} nav a,nav button{pointer-events:auto} html.nav-clair .nav-bar{color:#15151a} /* des qu'on a defile, un voile flou derriere la barre : lisible sur la photo, le bois, le blanc */ .nav-bar::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,11,16,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .3s ease} html.nav-defile .nav-bar::before{opacity:1} html.nav-clair .nav-bar::before{background:rgba(255,255,255,.72)} /* Signature : le wordmark de la marque, puis le nom de la personne. Les deux, parce que le site est celui de Carte Blanche mais qu'un recruteur doit pouvoir mettre un nom dessus sans scroller. */ .sig{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;min-width:0} /* ---- logo : la carte a onglet, puis le nom en Manrope ---- */ .logo{display:inline-flex;align-items:center;gap:12px;color:inherit;white-space:nowrap} .marque-svg{width:42px;height:42px;flex:none;display:block;overflow:visible} .marque-svg .ev1,.marque-svg .ev3{transform-origin:32px 46px;transition:transform .5s var(--expo)} .marque-svg .ev1{transform:rotate(-28deg)} .marque-svg .ev3{transform:rotate(28deg)} .logo:hover .marque-svg .ev1,.sig:hover .marque-svg .ev1{transform:rotate(-40deg) translateY(-3px)} .logo:hover .marque-svg .ev3,.sig:hover .marque-svg .ev3{transform:rotate(40deg) translateY(-3px)} .logo-texte{font-family:"Syne",system-ui,sans-serif;font-weight:800;font-size:21px;letter-spacing:-.02em;line-height:1} .logo-menu{margin-bottom:40px} .logo-pied{color:var(--ink)} .sig-nom{font-family:"Inter",system-ui,sans-serif;font-size:12.5px;letter-spacing:.04em; color:var(--muted);padding-left:14px;border-left:1px solid var(--line);white-space:nowrap} .sig:hover .sig-nom{color:var(--ink)} .nav-cta{ display:inline-flex;align-items:center;gap:10px;height:48px;padding:6px 24px 6px 6px;border-radius:999px; font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:13px;white-space:nowrap; text-decoration:none;color:#fff;background:linear-gradient(180deg,#6f8bff,#2440d6); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);transition:filter .18s ease; } .nav-cta .ic{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:#fff;color:#2440d6;flex:none} .nav-cta:hover{filter:brightness(1.08)} /* ---- hero ---- */ header{position:relative;padding:150px 0 0;overflow:clip;isolation:isolate;background:#0b0b10} /* ---- hero cinema : le produit sur un vrai ecran, dans un vrai decor ---- */ .hero-photo{position:relative;z-index:1;width:100%;aspect-ratio:1344/752;margin-top:-170px} .hero-photo::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(180deg,#0b0b10 0%,rgba(11,11,16,.72) 26%,rgba(11,11,16,0) 52%)} .hero-photo-fond{display:block;width:100%;height:100%;object-fit:cover} /* le rectangle de l'ecran, mesure sur la photo (en pourcentages, il suit le redimensionnement) */ .hero-ecran{position:absolute;left:31.03%;top:26.33%;width:37.87%;height:38.96%;overflow:hidden;background:#0b1117;z-index:1} .hero-ecran img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left} .hero-grid{position:relative;z-index:3} h1{ font-family:"Manrope",system-ui,sans-serif;font-weight:700; font-size:clamp(44px,6.7vw,96px);line-height:1;letter-spacing:-1px; margin-bottom:36px; } h1 em{font-style:normal;color:var(--accent)} /* Le titre : chaque mot est un bloc (pour l'animer), la 2e ligne ne casse jamais, quel que soit le mot tapé par le typewriter. */ .hero-h1{white-space:nowrap} .hero-h1 .w{display:inline-block} .hero-key-wrap{position:relative} .lede{font-size:clamp(18px,2.4vw,21px);color:var(--muted);max-width:54ch;line-height:1.5} .lede b{color:var(--ink);font-weight:500} /* ---- section heads ---- */ .sec{padding:72px 0} .sec-label{font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:15px;color:var(--muted);margin-bottom:36px;display:flex;align-items:center;gap:12px} /* ---- product cards ---- */ .grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)} .card{ background:var(--paper);padding:34px 32px;display:flex;flex-direction:column; position:relative; } .card:hover{background:var(--paper-2)} .card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px} .card h3{font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:27px;letter-spacing:-.01em} .badge{ font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.05em; color:var(--accent-2);border:1px solid var(--accent-2);border-radius:2px; padding:3px 8px;white-space:nowrap;display:flex;align-items:center;gap:6px; } .badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-2)} .card p{color:var(--muted);font-size:15.5px;line-height:1.5;margin-bottom:18px;flex:1} .tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px} .tag{font-family:"Inter",system-ui,sans-serif;font-size:12.5px;font-weight:500;color:var(--muted);background:var(--paper-2);padding:5px 10px;border-radius:999px} .card:hover .tag{background:var(--paper)} .card a.visit{ font-family:"Inter",system-ui,sans-serif;font-size:13px;text-decoration:none; color:var(--ink);align-self:flex-start;border-bottom:1px solid var(--accent); padding-bottom:2px;transition:gap .2s;display:inline-flex;align-items:center;gap:6px; } .card a.visit:hover{gap:11px} .card a.visit .arrow{color:var(--accent);transition:transform .2s} .card a.visit:hover .arrow{transform:translateX(2px)} /* demo access block */ .access{margin-top:18px;border-top:1px dashed var(--line);padding-top:16px;display:flex;flex-direction:column;gap:12px} .demo-creds{font-family:"JetBrains Mono",monospace;font-size:12.5px;background:var(--paper-2);color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:11px 13px;line-height:1.7} .demo-creds .lbl{color:var(--accent);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:5px} .demo-creds .row{display:flex;justify-content:space-between;gap:10px} .demo-creds .row span:first-child{opacity:.55} .access-links{display:flex;flex-wrap:wrap;gap:18px;align-items:center} .access-links a{ font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:14px;text-decoration:none;color:var(--ink); display:inline-flex;align-items:center;gap:7px;border-bottom:1px solid var(--accent);padding-bottom:2px;transition:gap .2s; } .access-links a:hover{gap:11px} .access-links a .ic{color:var(--accent)} .access-note{font-family:"Inter",system-ui,sans-serif;font-size:11px;color:var(--muted);font-style:normal} /* ---- how I work : manifeste épinglé ---- */ .manifeste{padding:0;height:200vh} .manifeste-sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center; padding-top:calc(var(--nav-h) + 24px);padding-bottom:40px} .manifeste-text{font-family:"Inter",system-ui,sans-serif;font-weight:700;font-size:clamp(22px,2.8vw,40px);line-height:1.45;letter-spacing:-1px;max-width:40ch} .manifeste-text p+p{margin-top:.9em} /* ---- background ---- */ .bg-text{max-width:62ch;font-size:18px;line-height:1.6} .bg-text b{font-weight:500} .bg-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px} .chip{font-family:"Inter",system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--muted);border:1px solid var(--line);padding:6px 12px;border-radius:999px} /* ---- contact ---- */ .contact{padding:120px 0 120px;text-align:center} .contact .btns{justify-content:center} .contact h2{font-family:"Roboto",system-ui,sans-serif;font-weight:700;font-size:clamp(28px,2.5vw,36px);line-height:1.1;letter-spacing:-.9px;margin:0 auto 24px;max-width:none} .contact h2 em{font-style:normal;color:var(--accent)} .contact p{color:var(--muted);font-size:18px;line-height:1.6;max-width:42em;margin:0 auto 34px} .btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .btn{font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:15px;text-decoration:none;height:52px;display:inline-flex;align-items:center;border-radius:999px} /* Pilule : pastille claire à gauche qui porte la flèche, liseré intérieur */ .btn-primary{gap:12px;padding:5px 24px 5px 5px;background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1px rgba(8,7,6,.18)} .btn-primary .ic{display:flex;align-items:center;justify-content:center;width:52px;height:42px;border-radius:999px;background:var(--paper);color:var(--ink);flex-shrink:0} .btn-primary:hover{background:var(--accent)} .btn-ghost{padding:0 24px;border:1px solid var(--ink);color:var(--ink);transition:background .18s ease,color .18s ease} .btn-ghost:hover{background:var(--ink);color:var(--paper)} footer{border-top:1px solid var(--line);padding:28px 0;font-family:"Inter",system-ui,sans-serif;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} @media(max-width:720px){ body{font-size:16px} .wrap{padding:0 20px} .nav-bar .wrap{padding:0 16px} .nav-bar nav{height:72px} .nav-bar .logo-texte{font-size:18px} .nav-bar .marque-svg{width:32px;height:32px} .nav-bar .son{display:none} .nav-bar .nav-cta{height:40px;font-size:12px;padding:4px 14px 4px 4px;gap:8px} .nav-bar .nav-cta .ic{width:32px;height:32px} .nav-bar .burger{width:36px;gap:5px} .nav-bar .nav-actions{gap:8px} .grid{grid-template-columns:1fr} } /* Sous 700 px le typewriter est coupé (typewriter.js) : le titre peut casser librement, le mot-clé redevient du texte en ligne. */ @media(max-width:699px){ .hero-h1{white-space:normal} .hero-key-wrap,#hero-key{display:inline} .hero-period{display:none} } /* hero with portrait */ .hero-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0} .hero-text{display:flex;flex-direction:column;align-items:center;min-width:0;width:100%} @media(max-width:560px){ header{padding:124px 0 0} .hero-photo{margin-top:-40px;width:150%;margin-left:-25%} } /* product logo marks */ .card-id{display:flex;align-items:center;gap:12px;min-width:0} .logo-img{width:40px;height:40px;display:block;object-fit:cover;flex-shrink:0;border-radius:9px} /* pending walkthrough */ .pending{font-family:"Inter",system-ui,sans-serif;font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:7px;cursor:default} .pending .ic{color:var(--muted)} .soon{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 7px} /* ============================================================ Blocs ajoutes : bandeau technique, collage, scene, mot geant, menu plein ecran, bouton son. ============================================================ */ /* ---- bandeau technique qui defile ---- */ /* ---- collage 3D epingle (reference : maquettes posees autour du titre) ---- Le transform de base est ici ; collage3d.js ne pilote que --tx, --ty, --drz. Etat par defaut = maquettes a leur place : sans JS et en mouvement reduit. */ .collage3d{position:relative;height:220vh;background:#14141b} .collage3d-sticky{position:sticky;top:0;height:100vh;overflow:hidden} .collage3d-scene{position:absolute;top:var(--nav-h);left:0;right:0;bottom:0;perspective:1800px} .collage3d-centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3; width:min(640px,90vw);display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center} .collage3d-sur{margin:0;font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:15px;color:var(--muted)} .collage3d-titre{margin:0;font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:clamp(40px,6.7vw,96px);line-height:1;letter-spacing:-1px} .collage3d-titre em{font-style:normal;color:inherit} .maquette{position:absolute;z-index:1;display:block;width:var(--w);text-decoration:none;transform-style:preserve-3d; transform:translate3d(var(--tx,0px),var(--ty,0px),0) rotateX(42deg) rotateZ(calc(var(--rz) + var(--drz,0deg))); filter:drop-shadow(0 50px 40px rgba(0,0,0,.65));will-change:transform,opacity} .m1{--w:27vw;--rz:-12deg;left:2vw;top:2vh;--surface:linear-gradient(145deg,#eceffd,#c9d2fb)} .m2{--w:26vw;--rz:10deg;right:2vw;top:0;--surface:linear-gradient(145deg,#a8202c,#6a1118)} .m3{--w:32vw;--rz:-7deg;left:34vw;bottom:-8vh;--surface:linear-gradient(145deg,#f0762a,#b5460e)} .maquette-surface{position:relative;display:block;padding:6% 6% 9%;border-radius:18px;background:var(--surface); transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .25s ease-out} .maquette img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.35)} .maquette-nom{position:absolute;left:6%;bottom:2.6%;font-family:"Inter",system-ui,sans-serif;font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:rgba(0,0,0,.6)} .m2 .maquette-nom,.m3 .maquette-nom{color:rgba(255,255,255,.8)} .maquette:hover .maquette-surface,.maquette:focus-visible .maquette-surface{transform:translateZ(40px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))} html:not(.js) .collage3d{height:auto} html:not(.js) .collage3d-sticky{position:relative} @media (prefers-reduced-motion:reduce){ .collage3d{height:auto} .collage3d-sticky{position:relative} .maquette-surface{transition:none} } /* mobile : pas d'epinglage, titre puis maquettes empilees, bascule adoucie */ @media(max-width:860px){ .collage3d{height:auto} .collage3d-sticky{position:relative;height:auto;overflow:visible;padding:64px 0 80px} .collage3d-scene{position:relative;top:auto;display:flex;flex-direction:column;align-items:center;gap:44px;perspective:1400px} .collage3d-centre{position:relative;left:auto;top:auto;transform:none;order:-1} .maquette,.m1,.m2,.m3{position:relative;left:auto;right:auto;top:auto;bottom:auto;--w:84vw; transform:rotateX(22deg) rotateZ(var(--rzm,0deg))} .m1{--rzm:-3deg} .m2{--rzm:3deg} .m3{--rzm:-2deg} } /* ---- scene de points, fond du manifeste ---- */ .manifeste-sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center; padding-top:calc(var(--nav-h) + 24px);padding-bottom:40px} /* PIEGE : est un element remplace. En position absolue, inset:0 ne l'etire PAS (sa taille intrinseque 300x150 l'emporte et le right est ignore), il faut donc des largeurs explicites. Et left + width doivent toujours faire 100 % : avec left:44% et width:100%, la boite debordait de 626 px a droite, ce qui elargit la fenetre de mise en page sur mobile et decale toutes les scenes calees en vh (le piege documente chez Ikovaline). */ #scene{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;color:var(--ink)} .manifeste-sticky .wrap{position:relative;z-index:1} @media(min-width:861px){ /* La sphere se tient a droite du texte, qui fait 40ch. Elle le frolait a 44 % : les dernieres lettres de chaque ligne passaient dans le nuage. left + width doivent toujours totaliser 100 %. */ #scene{left:58%;width:42%} } /* ---- mot geant qui grossit ---- */ .zoom{position:relative;height:190vh;background:#22222b} .zoom-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center; overflow:clip} /* Centre par un translate, jamais par un scale : c'est zoom.js qui fait grossir la font-size, pour que le trace reste net a n'importe quelle taille. Position absolue pour que ce changement de taille a chaque frame ne fasse rien bouger autour. nowrap : le mot ne doit jamais se couper en grossissant. */ .zoom-mot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); white-space:nowrap;font-family:"Manrope",system-ui,sans-serif;font-weight:700; font-size:clamp(44px,11vw,150px);line-height:1;letter-spacing:-.03em; color:var(--ink);will-change:font-size,opacity} /* L'etoile du logo, en SVG et dimensionnee en em : elle grossit avec le mot et reste nette, la ou un PNG aurait bavé des le premier agrandissement. */ .etoile{display:inline-block;width:.42em;height:.42em;overflow:visible;fill:var(--ink); vertical-align:.12em;margin:0 .2em} .zoom-legende{position:absolute;left:0;right:0;bottom:44px;text-align:center; font-family:"Inter",system-ui,sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted)} /* ---- barre de nav : bouton menu et bouton son ---- */ .nav-actions{display:flex;align-items:center;gap:12px} .son{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:999px; background:linear-gradient(180deg,#6f8bff,#2440d6);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); cursor:pointer;transition:filter .18s ease} .son:hover{filter:brightness(1.08)} .son[aria-pressed="false"]{background:none;box-shadow:inset 0 0 0 1.5px currentColor;color:inherit} .son svg{width:20px;height:20px;flex:none} .son-texte{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:56px;height:40px; padding:0 2px;background:none;border:0;cursor:pointer;color:inherit} .burger i{display:block;height:2px;width:100%;background:currentColor;transition:transform .3s var(--expo),opacity .2s ease} .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)} .burger[aria-expanded="true"] i:nth-child(2){opacity:0} .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* ---- menu plein ecran ---- */ .burger[aria-expanded="true"]{color:#fff;position:relative;z-index:70} .menu{position:fixed;inset:0;z-index:60;background:var(--paper-2);color:var(--ink); display:flex;flex-direction:column;justify-content:center;visibility:hidden} .menu a{color:inherit;text-decoration:none} .menu-liens{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0} .menu-lien{font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:clamp(34px,7vw,68px); line-height:1.12;letter-spacing:-.02em;display:block;width:max-content;max-width:100%; transition:color .2s ease} .menu-lien:hover{color:var(--accent)} .menu-lien .num{font-family:"Inter",system-ui,sans-serif;font-size:12px;letter-spacing:.1em; color:var(--muted);vertical-align:super;margin-right:14px} .menu-pied{margin-top:52px;display:flex;flex-wrap:wrap;gap:20px; font-family:"Inter",system-ui,sans-serif;font-size:13px;color:var(--muted)} .menu-pied a{border-bottom:1px solid rgba(243,239,230,.3);padding-bottom:2px} .menu-pied a:hover{border-color:var(--accent);color:var(--accent)} .menu-fermer{position:absolute;top:26px;right:28px;background:none;border:1px solid rgba(243,239,230,.35); border-radius:2px;color:var(--ink);cursor:pointer;padding:8px 14px; font-family:"Inter",system-ui,sans-serif;font-size:12px} .menu-fermer:hover{border-color:var(--paper)} @media(max-width:720px){ .son span[data-son-etat]{display:none} .son{padding:8px 10px} /* Le nom disparait de la barre, le wordmark reste. Le nom est toujours lisible dans le pied de page et dans le texte du hero. */ .sig-nom{display:none} .marque{height:16px} } /* ---- bloc video sous le hero (reference : juste sous le titre, grand, arrondi) ---- */ .reel{padding:24px 0 40px} .reel .wrap{max-width:1180px} .reel-cadre{position:relative;isolation:isolate} /* halo dore derriere le cadre, comme la lueur de marque de la reference */ .reel-halo{position:absolute;inset:14% 10%;z-index:-1;border-radius:60px;background:rgba(59,91,253,.2);filter:blur(90px)} .reel-video{position:relative;overflow:hidden;border-radius:40px;background:#0b0b0b; border:1px solid rgba(243,239,230,.06);box-shadow:0 40px 80px -30px rgba(0,0,0,.9)} .reel-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;cursor:pointer} .reel-controles{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:20px; padding:72px 28px 22px;pointer-events:none;transition:opacity .3s ease; background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.45) 45%,transparent)} /* Pendant la lecture, les controles s'effacent : la video porte son propre bandeau en bas, les deux se superposaient. Ils reviennent au survol, au clavier, et restent affiches tant que la video est en pause. */ .reel-video.is-lecture:not(.is-actif) .reel-controles{opacity:0} .reel-video.is-lecture:not(.is-actif) .reel-controles > *{pointer-events:none} .reel-controles > *{pointer-events:auto} .reel-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none; border:0;background:none;color:rgba(243,239,230,.8);cursor:pointer;transition:color .18s ease} .reel-btn:hover{color:var(--ink)} .reel-btn svg{width:18px;height:18px;display:block} .reel-barre{position:relative;flex:1;height:3px;border-radius:999px;background:rgba(243,239,230,.2);cursor:pointer} .reel-barre::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px} .reel-barre i{position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform:scaleX(0);transform-origin:left center} .reel-temps{flex:none;font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.04em; color:rgba(243,239,230,.55);font-variant-numeric:tabular-nums} .ic-pause{display:none!important} .is-lecture .ic-play{display:none!important} .is-lecture .ic-pause{display:block!important} /* lignes « signal » en entonnoir sous la video */ .signal{display:block;width:min(900px,80vw);height:auto;margin:40px auto 0;overflow:visible} .signal line{stroke:var(--ink);stroke-width:.2;stroke-linecap:round;opacity:.6} @media(max-width:860px){.reel-video{border-radius:28px}} @media(max-width:560px){ .reel{padding-top:36px} .reel-video{border-radius:22px} .reel-controles{gap:10px;padding:40px 12px 10px} .reel-temps{display:none} } /* ---- scene epinglee « au pixel pres » : trame de points + lentille ---- */ .pixel{position:relative;height:240vh} .pixel-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center} /* canvas = element remplace : largeur ET hauteur explicites, qui font 100 % */ #pixel-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block} .pixel-titre{position:relative;z-index:1;text-align:center;padding:0 20px; font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:clamp(40px,6.7vw,96px);line-height:1;letter-spacing:-1px; will-change:transform,opacity} .pixel-titre em{font-style:normal;color:inherit} /* sans JS, pas de course de scroll : la scene tient un ecran */ html:not(.js) .pixel{height:auto} html:not(.js) .pixel-sticky{position:relative} @media (prefers-reduced-motion:reduce){ .pixel{height:auto} .pixel-sticky{position:relative} } /* ---- scene epinglee : cercles concentriques + texte revele dans une pilule ---- Etat par defaut = etat final (pilule pleine, texte visible, barres rentrees) : c'est ce que voient le visiteur sans JS et le mouvement reduit. cercles.js recalcule --D, --g, --pl a la taille reelle et pilote le reste au scroll. */ .cercles{position:relative;height:220vh} .cercles-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding-top:var(--nav-h)} .cercles-scene{--D:min(460px,56vh);--g:55px;--pl:221px;position:relative;width:min(1080px,92vw);height:var(--D);will-change:transform,opacity} .pilule{position:absolute;top:0;left:var(--pl);right:0;height:var(--D);border-radius:999px; background:linear-gradient(90deg,#2440d6,#3b5bfd);will-change:clip-path,transform,opacity} /* les contours passent PAR-DESSUS la pilule, comme sur la reference */ .cercle{position:absolute;top:0;left:calc(var(--k) * var(--g));width:var(--D);height:var(--D);border-radius:50%; border:1.5px solid rgba(59,91,253,.55);will-change:transform,opacity} .cercles-texte{position:absolute;top:0;bottom:0;left:var(--pl);right:0;margin:0;padding:0 1em;z-index:1; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.08em;text-align:center; font-family:"Manrope",system-ui,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02; font-size:clamp(22px,3.9vw,56px);color:var(--ink)} .cligne{position:relative;display:block;width:max-content;max-width:100%} .cbarre{position:absolute;top:-.04em;bottom:-.02em;left:-.18em;right:-.18em;display:block; background:var(--ink);transform:scaleX(0);transform-origin:left center} @media(max-width:600px){.cercles-scene{--D:220px;--g:26px;--pl:0px}} html:not(.js) .cercles{height:auto} html:not(.js) .cercles-sticky{position:relative} @media (prefers-reduced-motion:reduce){ .cercles{height:auto} .cercles-sticky{position:relative} } /* ---- scene epinglee : trois pictos au trait ---- Etat par defaut = pictos deja traces (dashoffset 0) : c'est ce que voient le visiteur sans JS et le mouvement reduit. pictos.js pilote le trace. */ .pictos{position:relative;height:170vh} .pictos-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:var(--nav-h) 20px 0} .pictos-groupe{width:min(960px,100%);text-align:center;will-change:transform,opacity} .pictos-titre{font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:clamp(40px,6.7vw,96px);line-height:1;letter-spacing:-1px;margin:0 0 clamp(40px,8vh,84px)} .pictos-titre em{display:block;font-style:normal;color:inherit} .pictos-rangee{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,5vw,72px)} .picto{margin:0;display:flex;flex-direction:column;align-items:center;gap:22px} .picto-visuel{width:clamp(96px,13vw,190px);aspect-ratio:1;border-radius:22%;background:#fff;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)} .picto-illu{display:block;width:100%;height:100%;object-fit:cover} .picto svg *{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke} .t-creme{stroke:var(--ink)} .t-or{stroke:var(--accent)} .picto figcaption{display:flex;flex-direction:column;gap:6px} .picto figcaption b{font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:clamp(14px,1.3vw,18px);color:var(--ink)} .picto figcaption span{font-family:"Inter",system-ui,sans-serif;font-size:clamp(12px,1.1vw,14px);color:var(--muted)} html:not(.js) .pictos{height:auto} html:not(.js) .pictos-sticky{position:relative} @media (prefers-reduced-motion:reduce){ .pictos{height:auto} .pictos-sticky{position:relative} } /* ---- scene epinglee : un nom qui se tape, chacun dans sa couleur ---- data-actif pilote les tuiles de logos (0 Meritly, 1 Adequo, 2 StockChef, 3 aucun). Par defaut, la phrase complete en or : sans JS et mouvement reduit. */ .noms{position:relative;height:240vh;background:#14141b} .noms-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between; padding:calc(var(--nav-h) + 7vh) 8vw 9vh} .noms-tuiles{display:flex;justify-content:space-between;align-items:center} .noms-bas{justify-content:space-evenly} .noms-tuile{position:relative;width:64px;height:64px;flex:none} .noms-tuile img{position:absolute;inset:0;width:64px;height:64px;border-radius:14px;display:block; opacity:0;transform:scale(.85);transition:opacity .35s var(--expo),transform .35s var(--expo)} .noms-sticky[data-actif="0"] .nl-0, .noms-sticky[data-actif="1"] .nl-1, .noms-sticky[data-actif="2"] .nl-2{opacity:.92;transform:none} .noms-ligne{margin:0;text-align:center;font-family:"Manrope",system-ui,sans-serif;font-weight:700; font-size:clamp(34px,5.4vw,76px);line-height:1.12;letter-spacing:-.02em} .noms-nom{color:var(--accent)} @media(max-width:600px){ .noms-nom{display:block} .noms-tuiles{justify-content:center} .noms-tuiles .noms-tuile:nth-child(n+2){display:none} } html:not(.js) .noms{height:auto} html:not(.js) .noms-sticky{position:relative;min-height:60vh} @media (prefers-reduced-motion:reduce){ .noms{height:auto} .noms-sticky{position:relative;min-height:60vh} } /* ---- bascule vers le clair, apres le mot geant (reference : tout est blanc ensuite) ---- .clair redefinit les jetons localement : toutes les regles qui passent par var() s'inversent d'elles-memes. L'or passe au bronze, sinon illisible sur creme. */ .clair{--ink:#15151a;--paper:#f8f7f3;--paper-2:#efeeea;--line:#e2e1dc;--muted:#5f5e66;--accent:#2440d6; background:var(--paper);color:var(--ink);color-scheme:light} /* ---- etapes reliees par un fil trace ---- */ .etapes{padding:16px 0 110px} .etapes-sur{margin:0;text-align:center;font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:15px;color:var(--accent)} .etapes-titre{margin:14px 0 0;text-align:center;font-family:"Roboto",system-ui,sans-serif;font-weight:700;font-size:clamp(34px,3.9vw,56px);line-height:1.05;letter-spacing:-1.4px} .etapes-titre em{font-style:normal;color:var(--accent)} /* ---- suite : grand titre clair et bouton, premiere section claire ---- */ .suite{padding:200px 0 190px;text-align:center} .suite-illu{display:block;width:240px;height:240px;margin:0 auto 4px;mix-blend-mode:multiply} .suite-titre{margin:0 0 40px;font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:clamp(40px,6.7vw,96px);line-height:1;letter-spacing:-1px;color:#000} .etapes-grille{display:grid;grid-template-columns:1fr 120px 1fr;margin:64px auto 0;max-width:940px} .etape{min-width:0} .etape-decalee{margin-top:64px} .etape-tete{display:flex;align-items:flex-end;gap:14px;padding-left:4px} .etape-num{font-family:"Roboto",system-ui,sans-serif;font-weight:800;font-size:56px;line-height:.8;color:#d4d4d4} .etape-label{padding-bottom:4px;font-family:"Inter",system-ui,sans-serif;font-weight:500;font-size:14px;color:var(--muted)} /* bordure en degrade : un cadre de 10 px dont le fond degrade fait le liseré */ .etape-cadre{margin-top:14px;padding:10px;border-radius:30px;background:linear-gradient(to top right,rgba(59,91,253,.45),#eceffd 55%,#f5f5f5)} .etape-decalee .etape-cadre{background:linear-gradient(to top left,rgba(59,91,253,.45),#eceffd 55%,#f5f5f5)} .etape-carte{border-radius:22px;background:#ffffff;padding:22px 26px 28px} .etape-illu{width:120px;height:120px;display:block;margin:0 0 2px -8px;mix-blend-mode:multiply} .etape-carte h3{margin:0;font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:22px;letter-spacing:-.55px} .etape-carte p{margin:8px 0 0;font-size:15.5px;line-height:1.5;color:var(--muted)} .fil{overflow:visible;color:#3b5bfd} .fil path{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke} .fil circle{fill:currentColor} .fil-court{align-self:center;display:block;width:120px;height:90px} .fil-long-case{grid-column:1 / -1;position:relative;height:120px} .fil-long{position:absolute;left:0;top:0;width:100%;height:181px} @media(max-width:760px){ .etapes-grille{grid-template-columns:1fr;gap:40px;margin-top:48px} .etape-decalee{margin-top:0} .fil-court,.fil-long-case{display:none} } /* ---- FAQ (reference : grand titre fixe a gauche, questions en accordeon a droite) ----
natif, stylise : marche sans JS et au clavier. name="faq" en fait un accordeon exclusif (une seule reponse ouverte) la ou le navigateur le gere. */ .faq{padding:110px 0 120px;border-bottom:1px solid var(--line)} .faq-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start} .faq-gauche{position:sticky;top:calc(var(--nav-h) + 32px)} .faq-titre{margin:0;font-family:"Roboto",system-ui,sans-serif;font-weight:800;font-size:clamp(72px,10vw,144px);line-height:.9;letter-spacing:-3.6px} .faq-sous{margin:20px 0 0;max-width:17ch;font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1.2;color:var(--muted)} .faq-sous b{font-weight:400;color:var(--ink)} .faq-intro{margin:0 0 34px;max-width:48ch;font-size:18px;line-height:1.55} .faq-intro a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px} .faq-liste{border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px; padding:22px 2px;font-size:17px;font-weight:500;transition:color .18s ease} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--accent)} /* le « + » dessine en CSS, qui tourne en « x » a l'ouverture */ .faq-ic{position:relative;flex:none;width:14px;height:14px;transition:transform .3s var(--expo)} .faq-ic::before,.faq-ic::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor} .faq-ic::after{transform:rotate(90deg)} .faq-item[open] .faq-ic{transform:rotate(45deg)} .faq-reponse{padding:0 2px 24px;max-width:56ch;font-size:16px;line-height:1.6;color:var(--muted)} .faq-reponse p{margin:0} @media(max-width:760px){ .faq{padding:80px 0 90px} .faq-grille{grid-template-columns:1fr;gap:30px} .faq-gauche{position:static} } /* ---- pied de page (reference : marque, colonnes de liens, ligne legale, vague lumineuse) ---- */ .pied{position:relative;overflow:hidden} /* .pied-grille l'emporte sur l'ancienne regle « footer » (flex, mono, filet) */ .pied-grille{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(2,minmax(0,1fr));gap:40px; padding:72px 0 0;border-top:none;font-family:inherit;font-size:inherit;color:inherit} .pied-marque p{margin:16px 0 12px;max-width:34ch;font-size:14px;line-height:1.55;color:var(--muted)} .pied-marque a{font-family:"Inter",system-ui,sans-serif;font-size:13px;color:var(--ink); text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px} .pied-liens{display:flex;flex-direction:column;gap:10px;font-size:14px} /* ces