/* ========================================================= Sébastien Nolin — feuille de style partagée Une seule source pour toutes les pages du site. ========================================================= */ :root{ --bg:#FBFAF7; --surface:#FFFFFF; --ink:#14161A; --ink-soft:#4E5862; --ink-dim:#8A939C; --line:rgba(0,0,0,.11); --line-soft:rgba(0,0,0,.06); --accent:#0B8F58; --accent-soft:#E6F4ED; --fill:#F1EFE9; --cta-bg:#14161A; --cta-ink:#FFFFFF; --glass:rgba(255,255,255,.58); --glass-solid:#F6F5F1; --glass-brd:rgba(0,0,0,.07); --glass-hi:rgba(255,255,255,.9); --cur-1:#8B5CF6; --cur-2:#0EA5A0; --cur-3:#E11D74; --cur-4:#2563EB; --cur-ink:#FFFFFF; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; --max:1080px; } :root[data-theme="dark"]{ --bg:#0C0D10; --surface:#141619; --ink:#F2F4F5; --ink-soft:#A8B1B9; --ink-dim:#727C85; --line:rgba(255,255,255,.13); --line-soft:rgba(255,255,255,.07); --accent:#43E39B; --accent-soft:rgba(67,227,155,.10); --fill:#191C20; --cta-bg:#F2F4F5; --cta-ink:#0C0D10; --glass:rgba(24,27,32,.55); --glass-solid:#16181C; --glass-brd:rgba(255,255,255,.10); --glass-hi:rgba(255,255,255,.10); --cur-1:#A78BFA; --cur-2:#2DD4BF; --cur-3:#F472B6; --cur-4:#60A5FA; --cur-ink:#0B0C0F; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--sans);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased; } .wrap{max-width:var(--max);margin:0 auto;padding:0 32px} a{color:inherit} /* ---------- menu flottant, effet verre ---------- */ .bar{ position:sticky;top:0;z-index:70; display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px; padding:18px 16px 0;pointer-events:none } .pill{ pointer-events:auto;position:relative; display:flex;align-items:center; padding:6px;border-radius:999px; background:var(--glass); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-brd), 0 2px 6px -2px rgba(0,0,0,.10), 0 12px 30px -12px rgba(0,0,0,.28) } /* repli si le navigateur ne sait pas flouter l'arrière-plan */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .pill{background:var(--glass-solid)} } /* zone des sections : colonne du milieu, donc centrée sur la page quelle que soit la largeur des contrôles */ .nav-pill{grid-column:2;justify-self:center;min-width:0;overflow:hidden} .nav-pill a{ position:relative;z-index:1;display:inline-flex;align-items:center;white-space:nowrap; padding:13px 22px;border-radius:999px;font-size:16px;line-height:1; color:var(--ink-soft);text-decoration:none;transition:color .25s ease } .nav-pill a:hover{color:var(--ink)} .nav-pill a.on{color:var(--cta-ink)} .nav-pill a:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* indicateur qui glisse sous l'onglet actif */ .nav-ind{ position:absolute;top:6px;left:0;height:calc(100% - 12px); border-radius:999px;background:var(--cta-bg); opacity:0;transform:translateX(0);width:0; transition:transform .34s cubic-bezier(.22,1.1,.34,1), width .34s cubic-bezier(.22,1.1,.34,1), opacity .18s ease } @media (prefers-reduced-motion:reduce){.nav-ind{transition:opacity .2s ease}} /* zone des contrôles : collée à droite, insensible au changement de langue */ .ctl-pill{grid-column:3;justify-self:end;gap:2px} .ctl-sep{width:1px;height:24px;background:var(--glass-brd);margin:0 5px;flex:none} .tbtn{ width:40px;height:40px;border:0;border-radius:999px;background:none; color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none; transition:color .18s } .tbtn svg{width:18px;height:18px} .tbtn:hover{color:var(--ink)} .tbtn .moon{display:none} :root[data-theme="dark"] .tbtn .sun{display:none} :root[data-theme="dark"] .tbtn .moon{display:block} .lang{display:flex;gap:2px;flex:none} .lang button{ font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;background:none;border:0; color:var(--ink-dim);cursor:pointer;padding:11px 14px;border-radius:999px;transition:color .18s } .lang button:hover{color:var(--ink)} .lang button.on{background:var(--cta-bg);color:var(--cta-ink);font-weight:600} /* ---------- curseurs de collaborateurs ---------- */ .crew{position:absolute;inset:0;pointer-events:none;overflow:hidden} .cur{position:absolute;display:flex;align-items:flex-start;gap:3px;opacity:0;animation:curIn .5s ease forwards} .cur svg{width:15px;height:15px;flex:none;margin-top:1px} .cur span{ font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--cur-ink); padding:3px 8px;border-radius:6px;white-space:nowrap;line-height:1.4 } .cur.f{animation:curIn .5s ease forwards, curFloat 7s ease-in-out infinite 1s} @keyframes curIn{from{opacity:0;transform:translate(-8px,-8px) scale(.92)}to{opacity:1;transform:none}} @keyframes curFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-9px)}} @media (prefers-reduced-motion:reduce){.cur,.cur.f{animation:none;opacity:1}} /* ---------- curseurs contextuels et parallaxe ---------- */ /* Le conteneur couvre la section sans jamais intercepter les clics. */ .crew-sec{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0} section{position:relative} /* Deux couches : l'exterieur derive au defilement, l'interieur gere l'entree. Les separer evite que la transition d'entree freine la derive. */ .cur.ctx{ position:absolute;display:block;opacity:1;animation:none; transform:translate3d(var(--dxs,0px),var(--dy,0px),0);will-change:transform } .cur.ctx .cur-in{ display:flex;align-items:flex-start;gap:3px; opacity:0;transform:translate3d(var(--dx,30px),0,0); transition:opacity .55s ease,transform .8s cubic-bezier(.22,1,.36,1) } .cur.ctx.in .cur-in{opacity:1;--dx:0px} .cur.ctx svg{width:15px;height:15px;flex:none;margin-top:1px} .cur.ctx span{ font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--cur-ink); padding:3px 8px;border-radius:6px;white-space:nowrap;line-height:1.4 } /* Sous 1180 px la colonne de texte rejoint le bord : plus de place pour eux. */ /* Pas de seuil sur les écrans courants : le script replie les curseurs sous le titre quand la place manque. Sous 620 px la colonne occupe toute la largeur, il n'y a plus de repli honnête possible. */ @media (max-width:620px){.crew-sec,.crew{display:none}} @media (prefers-reduced-motion:reduce){ .cur.ctx{transform:none} .cur.ctx .cur-in{transition:none;opacity:1;transform:none} } /* parallaxe : confinee a l'interieur du cadre, jamais sous du texte */ .hero-visual img.px,.figure img.px,.band-visual img.px{ transform:translate3d(0,var(--py,0px),0) scale(1.06);will-change:transform } /* la parallaxe remplace le zoom au survol : deux transformations concurrentes sur le meme element se battraient a chaque image */ .band:hover a.band-visual img.px{transform:translate3d(0,var(--py,0px),0) scale(1.06)} @media (prefers-reduced-motion:reduce){ .hero-visual img.px,.figure img.px,.band-visual img.px{transform:none} } /* ---------- typographie ---------- */ .eyebrow{ font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);margin:0 0 12px } h1{font-size:clamp(38px,5.4vw,62px);line-height:1.06;letter-spacing:-.035em;font-weight:800;margin:0 0 26px} h2{font-size:clamp(27px,3.2vw,37px);line-height:1.14;letter-spacing:-.028em;font-weight:800;margin:0 0 22px;max-width:22ch} h3{font-size:21px;line-height:1.25;letter-spacing:-.018em;margin:0 0 10px} p{margin:0 0 18px;color:var(--ink-soft);max-width:66ch} p strong{color:var(--ink);font-weight:600} .lede{font-size:20px;line-height:1.6;color:var(--ink-soft);max-width:62ch} .pull{ border-left:2px solid var(--accent);padding-left:22px;margin:34px 0; font-size:20px;line-height:1.5;color:var(--ink);max-width:52ch;font-weight:500 } section{padding:72px 0;scroll-margin-top:124px} .rule{border:0;border-top:1px solid var(--line-soft);margin:0} /* ---------- chiffres d'ampleur ---------- */ .scale{ display:grid;grid-template-columns:repeat(4,1fr);align-items:start; border-top:1px solid var(--line);border-bottom:1px solid var(--line) } .scale > div{padding:26px 30px 26px 0} .scale > div + div{border-left:1px solid var(--line-soft);padding-left:30px} .scale .n{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:8px} .scale .l{font-size:13.5px;color:var(--ink-dim);line-height:1.45;max-width:24ch} /* ---------- étiquettes ---------- */ .tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px} .tag{ font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft); background:var(--fill);padding:5px 12px;border-radius:999px } /* ---------- tuiles de projet ---------- */ .tiles{display:grid;gap:22px} .tile-case{ display:block;text-decoration:none;border-radius:18px; background:var(--fill);overflow:hidden;transition:transform .18s } .tile-case:hover{transform:translateY(-2px)} .tile-visual{aspect-ratio:16/9;background:var(--fill);display:flex;align-items:center;justify-content:center} .tile-visual img{width:100%;height:100%;object-fit:cover} .tile-body{padding:26px 28px 28px} .tile-body h3{margin-bottom:8px;max-width:26ch} .tile-body p{font-size:15px;margin-bottom:16px;max-width:60ch} .tile-scale{display:flex;gap:26px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--ink-dim)} .tile-scale b{display:block;font-family:var(--sans);font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.02em} .more{font-size:14.5px;color:var(--accent);font-weight:600;margin-top:18px;display:inline-block} /* ---------- listes deux colonnes ---------- */ .two{display:grid;grid-template-columns:1fr 1fr;gap:20px} .item{border-top:1px solid var(--line);padding-top:18px} .item h4{margin:0 0 7px;font-size:16.5px;letter-spacing:-.012em} .item p{margin:0;font-size:14.5px;max-width:none} .tile{border-radius:14px;padding:22px;background:var(--fill)} .tile h4{margin:0 0 8px;font-size:16.5px;letter-spacing:-.012em} .tile p{margin:0;font-size:14.5px;max-width:none} /* ---------- témoignages ---------- */ .quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px} .quote{border-radius:16px;padding:26px;background:var(--fill)} .quote blockquote{margin:0 0 18px;font-size:18px;line-height:1.5;color:var(--ink)} .who{display:flex;align-items:center;gap:12px} .avatar{ width:38px;height:38px;border-radius:999px;background:var(--accent-soft);color:var(--accent); display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none } .who .n{font-size:14.5px;font-weight:600} .who .r{font-size:13px;color:var(--ink-dim)} /* ---------- parcours ---------- */ .roles{border-top:1px solid var(--line)} .role{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:22px 0;border-bottom:1px solid var(--line-soft)} .role time{font-family:var(--mono);font-size:12.5px;color:var(--ink-dim)} .role h4{margin:0 0 5px;font-size:17px;letter-spacing:-.015em} .role p{margin:0;font-size:14.5px} /* ---------- placeholders visuels ---------- */ .ph{text-align:center;padding:30px} .ph .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-dim);margin-bottom:9px} .ph p{margin:0;color:var(--ink-dim);font-size:14px;max-width:38ch} .figure{border-radius:14px;background:var(--fill);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;margin:30px 0;overflow:hidden} /* ---------- page d'étude de cas ---------- */ .case-head{padding:80px 0 0;position:relative} .standfirst{font-size:20px;line-height:1.6;color:var(--ink-soft);max-width:60ch;margin:0 0 48px} .hero-visual{border-radius:18px;background:var(--fill);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;margin:48px 0;overflow:hidden} .hero-visual img{width:100%;height:100%;object-fit:cover} .meta{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:80px} .meta > div{border-radius:12px;padding:16px 18px;background:var(--fill)} .meta .k{font-size:12.5px;color:var(--ink-dim);margin-bottom:5px} .meta .v{font-size:15px;font-weight:600;letter-spacing:-.01em} .body{display:grid;grid-template-columns:214px 1fr;gap:64px;padding-bottom:110px} .toc{position:sticky;top:124px;align-self:start} .toc a{display:block;font-size:14.5px;color:var(--ink-dim);text-decoration:none;padding:7px 0 7px 14px;border-left:2px solid transparent;margin-left:-16px} .toc a:hover{color:var(--ink-soft)} .toc a.on{color:var(--ink);font-weight:600;border-left-color:var(--accent)} .body section{padding:0;margin-bottom:70px} ul.checks{list-style:none;padding:0;margin:0 0 22px} ul.checks li{position:relative;padding-left:30px;margin-bottom:11px;color:var(--ink-soft);max-width:64ch} ul.checks li::before{ content:"";position:absolute;left:0;top:6px;width:18px;height:18px; background:var(--accent); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M8.5%2012.2l2.4%202.4%204.6-4.9%22%2F%3E%3C%2Fsvg%3E") center/18px 18px no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M8.5%2012.2l2.4%202.4%204.6-4.9%22%2F%3E%3C%2Fsvg%3E") center/18px 18px no-repeat } .cap{font-size:13.5px;color:var(--ink-dim);margin:-16px 0 30px} /* ========================================================= Transitions entre les pages Un simple fondu croisé, sans déplacement d'élément. Un morphisme du visuel a été essayé puis retiré : les deux pages n'ont pas la même position de défilement, l'image traversait donc tout l'écran. ========================================================= */ @media (prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} ::view-transition-old(root){animation:vtSortie .16s ease-in both} ::view-transition-new(root){animation:vtEntree .26s ease-out both} } @keyframes vtSortie{to{opacity:0}} @keyframes vtEntree{from{opacity:0}} /* repli pour les navigateurs sans View Transitions */ body{transition:opacity .2s ease} body.sortie{opacity:0} @media (prefers-reduced-motion:reduce){ body{transition:none} body.sortie{opacity:1} } /* ---------- pied ---------- */ footer{border-top:1px solid var(--line);padding:34px 0 64px} footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--ink-dim)} footer a{color:var(--ink-soft);text-decoration:none} /* ---------- apparition ---------- */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}} @media (max-width:880px){ .crew .cur span{font-size:9.5px;padding:2px 6px} .crew .cur svg{width:12px;height:12px} body{font-size:16px} .bar{padding:12px 10px 0;gap:8px;grid-template-columns:minmax(0,1fr) auto} .nav-pill{grid-column:1;justify-self:stretch} .ctl-pill{grid-column:2} .nav-pill{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .nav-pill::-webkit-scrollbar{display:none} .nav-pill a{padding:11px 15px;font-size:14.5px} .tbtn{width:36px;height:36px} .lang button{padding:9px 12px;font-size:11.5px} .ctl-pill{flex:none} /* l'indicateur ne suit pas un conteneur qui defile : fond porte par le lien */ .nav-ind{display:none} .nav-pill a.on{background:var(--cta-bg)} .scale{grid-template-columns:1fr 1fr} .scale > div{padding:22px 20px 22px 0} .scale > div + div{padding-left:20px} .scale > div:nth-child(odd){border-left:0;padding-left:0} .scale > div:nth-child(-n+2){border-bottom:1px solid var(--line-soft)} .two,.quotes{grid-template-columns:1fr} .meta{grid-template-columns:1fr 1fr} .role{grid-template-columns:1fr;gap:6px} .body{grid-template-columns:1fr;gap:0} .toc{position:static;display:flex;gap:16px;overflow-x:auto;padding-bottom:14px;margin-bottom:34px;border-bottom:1px solid var(--line-soft)} .toc a{white-space:nowrap;border-left:0;padding-left:0;margin-left:0;border-bottom:2px solid transparent} .toc a.on{border-left:0;border-bottom-color:var(--accent)} } /* ========================================================= Bandes pleine largeur, bandeau du héros, navigation retour ========================================================= */ /* ---------- bandeau du héros ---------- Le bloc HTML a été retiré de index.html en attendant un visuel. Ces règles restent prêtes : il suffit de remettre le