:root { --ink:#080808; --paper:#f5f3ef; --quiet:#a29f99; --line:rgba(8,8,8,.17); --accent:#b68a45; --radius:18px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; font-size:16px; -webkit-font-smoothing:antialiased; } img,video { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } button { font:inherit; } .container { width:min(1320px,calc(100% - 72px)); margin:0 auto; } .section { padding:144px 0; } .skip-link { position:fixed; z-index:50; left:16px; top:-80px; padding:10px 14px; color:#fff; background:#000; } .skip-link:focus { top:16px; }
.site-header { height:78px; position:fixed; inset:0 0 auto; z-index:20; padding:0 36px; display:flex; align-items:center; justify-content:space-between; color:#fff; transition:background .3s, color .3s, border .3s; } .site-header.scrolled { color:var(--ink); background:rgba(245,243,239,.94); backdrop-filter:blur(13px); border-bottom:1px solid var(--line); } .brand { width:148px; height:46px; overflow:hidden; display:block; mix-blend-mode:screen; } .scrolled .brand { mix-blend-mode:multiply; } .brand img { width:168px; max-width:none; height:168px; object-fit:contain; margin-top:-61px; margin-left:-10px; } .desktop-nav { display:flex; gap:31px; margin-left:80px; font-size:12px; font-weight:700; } .desktop-nav a,.header-contact { opacity:.9; transition:opacity .2s; } .desktop-nav a:hover,.header-contact:hover { opacity:.55; } .header-contact { font-size:12px; font-weight:700; } .header-contact span,.text-link span,.contact-email span { padding-left:7px; font-size:1.12em; } .menu-button { display:none; border:0; background:transparent; color:inherit; width:42px; height:42px; padding:10px; } .menu-button span { display:block; width:21px; border-top:1.5px solid currentColor; margin:5px auto; }
.mobile-menu { display:none; }
.hero { min-height:100svh; position:relative; color:#fff; overflow:hidden; background:#0c0e0e; } .hero-media,.hero-media video,.hero-fallback,.hero-shade { position:absolute; inset:0; width:100%; height:100%; } .hero-media video { object-fit:cover; z-index:1; } .hero-fallback { z-index:0; background-image:url('https://images.unsplash.com/photo-1519608487953-e999c86e7453?auto=format&fit=crop&w=2400&q=85'); background-size:cover; background-position:center; filter:saturate(.65); } .hero-shade { z-index:2; background:linear-gradient(90deg,rgba(5,5,5,.73),rgba(5,5,5,.1) 70%),linear-gradient(0deg,rgba(0,0,0,.65),transparent 40%); } .hero-content { position:relative; z-index:3; padding-top:clamp(180px,25vh,275px); } .eyebrow { margin:0; font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:.07em; font-size:10px; font-weight:400; } .light { color:rgba(255,255,255,.72); } h1,h2,p { margin-top:0; } h1,h2 { letter-spacing:-.074em; font-weight:700; } h1 { max-width:1080px; margin:29px 0 0; font-size:clamp(3.15rem,7vw,7.5rem); line-height:.97; } h1 em,h2 em { font-family:Georgia,serif; font-weight:400; letter-spacing:-.075em; } .hero-bottom { margin-top:clamp(48px,11vh,150px); display:flex; align-items:end; justify-content:space-between; gap:40px; } .hero-bottom p { width:345px; margin:0; color:rgba(255,255,255,.78); font-size:14px; line-height:1.65; } .button { display:inline-flex; gap:37px; align-items:center; padding:15px 18px; border:1px solid; border-radius:99px; font-size:12px; font-weight:700; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-3px); } .button-light { border-color:rgba(255,255,255,.7); color:#111; background:#fff; } .hero-index { position:absolute; z-index:3; bottom:35px; left:36px; margin:0; font-family:'DM Mono',monospace; font-size:10px; color:rgba(255,255,255,.7); } .scroll-hint { position:absolute; z-index:3; bottom:33px; right:36px; margin:0; text-transform:uppercase; letter-spacing:.08em; font-family:'DM Mono',monospace; font-size:9px; color:rgba(255,255,255,.7); display:flex; align-items:center; gap:12px; } .scroll-hint span { display:block; width:44px; border-top:1px solid currentColor; }
.section-kicker { display:flex; gap:15px; align-items:center; margin-bottom:35px; text-transform:uppercase; font-family:'DM Mono',monospace; letter-spacing:.06em; font-size:10px; } .section-kicker span { color:var(--accent); } .section-kicker p { margin:0; } .manifesto { padding-bottom:180px; } .manifesto-grid { display:grid; grid-template-columns:1.13fr .63fr; gap:100px; align-items:center; } h2 { margin:0; font-size:clamp(3rem,6vw,6.6rem); line-height:.95; } .manifesto-copy { max-width:430px; padding-bottom:6px; } .manifesto-copy p { font-size:16px; line-height:1.65; } .manifesto-copy .small-copy { margin:34px 0 0; padding-top:21px; border-top:1px solid var(--line); color:#66625c; font-size:12px; }
.ecosystem { color:#f5f3ef; background:#101010; overflow:hidden; } .ecosystem-intro { display:grid; grid-template-columns:1.2fr .8fr; align-items:end; padding-bottom:66px; } .ecosystem-intro .section-kicker { grid-column:1 / -1; } .ecosystem-intro h2 { font-size:clamp(3.1rem,6vw,6.5rem); } .ecosystem-intro > p { max-width:345px; justify-self:end; margin:0; color:#b6b4b0; line-height:1.6; font-size:14px; } .ecosystem-track { width:max-content; display:flex; gap:15px; padding:0 max(36px,calc((100vw - 1320px)/2)) 10px; } .activity-card { position:relative; width:315px; height:472px; overflow:hidden; border-radius:var(--radius); color:#111; background:#eeece8; flex:0 0 auto; } .activity-card:nth-child(2n) { background:#dedbd4; } .activity-card:nth-child(3n) { background:#f7f5f1; } .activity-card img.logo { position:absolute; top:0; left:30px; width:245px; max-width:none; height:245px; object-fit:contain; mix-blend-mode:multiply; z-index:2; } .activity-card .card-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(100%); opacity:.6; transition:transform .65s ease,opacity .65s; } .activity-card::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(245,243,239,.84),transparent 48%,rgba(0,0,0,.68)); } .activity-card:hover .card-photo { transform:scale(1.06); opacity:.84; } .activity-card .card-bottom { position:absolute; z-index:2; left:28px; right:26px; bottom:27px; color:#fff; } .activity-card h3 { margin:0; font-size:27px; letter-spacing:-.06em; } .activity-card p { margin:8px 0 0; font-size:11px; line-height:1.5; color:rgba(255,255,255,.77); } .activity-card .arrow { position:absolute; z-index:3; top:27px; right:25px; width:37px; height:37px; display:grid; place-items:center; border:1px solid rgba(0,0,0,.45); border-radius:50%; font-size:15px; }
.quote-break { position:relative; overflow:hidden; min-height:620px; display:grid; place-content:center; text-align:center; color:#f5f3ef; background:#312e27; } .quote-break > *:not(.quote-orb) { position:relative; z-index:2; } .quote-break h2 { font-size:clamp(3.5rem,7.8vw,9rem); } .quote-break .eyebrow { margin-bottom:31px; } .quote-orb { position:absolute; border-radius:50%; filter:blur(1px); background:radial-gradient(circle at 35% 35%,#ded6c9,#aa7c3d 46%,#463423 72%); } .orb-left { width:55vw; height:55vw; top:-35vw; left:-15vw; } .orb-right { width:37vw; height:37vw; bottom:-25vw; right:-7vw; }
.works-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:60px; } .works-heading h2 { font-size:clamp(3.5rem,6.8vw,7.5rem); } .text-link { border-bottom:1px solid currentColor; padding-bottom:7px; font-size:12px; font-weight:700; transition:opacity .2s; } .text-link:hover { opacity:.55; } .works-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; } .work-card { position:relative; min-height:515px; display:flex; overflow:hidden; align-items:end; padding:31px; color:#fff; background:#1e1e1e; } .work-card:first-child { grid-row:span 2; min-height:1047px; } .work-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: grayscale(100%) saturate(.8) transition:transform, filter .7s ease; filter:saturate(.8); } .work-card::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 58%); } .work-card:hover img { transform:scale(1.045); filter: grayscale(0%) saturate(1);} .work-meta { position:relative; z-index:1; } .work-meta p { margin:0 0 11px; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.7); } .work-meta h3 { margin:0; font-size:clamp(1.6rem,2.6vw,2.75rem); letter-spacing:-.06em; } .works-note { max-width:360px; margin:35px 0 0 auto; color:#6b6861; font-size:12px; line-height:1.6; }
.about-section { display:grid; grid-template-columns:1fr 1fr; gap:clamp(55px,11vw,160px); align-items:center; } .about-image { position:relative; height:625px; overflow:hidden; border-radius:var(--radius); background:#ddd; } .about-image img { width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.1); } .about-image::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.35),transparent); } .about-image span { position:absolute; z-index:1; bottom:22px; left:25px; color:#fff; font-family:Georgia,serif; font-size:63px; font-style:italic; letter-spacing:-.1em; } .about-text h2 { margin:25px 0 38px; font-size:clamp(3.15rem,5.5vw,6.2rem); } .about-text > p:not(.eyebrow) { max-width:450px; margin-bottom:34px; line-height:1.7; color:#5d5a55; font-size:14px; }
.contact { padding:clamp(125px,18vw,260px) 0; color:#f5f3ef; background:#080808; text-align:center; } .contact h2 { margin:28px 0 33px; font-size:clamp(3.8rem,8vw,9.4rem); } .contact-lead { max-width:390px; margin:0 auto 39px; color:#aaa7a2; line-height:1.65; font-size:14px; } .contact-email { display:inline-block; border-bottom:1px solid #f5f3ef; padding-bottom:9px; font-size:clamp(1rem,2vw,1.55rem); font-weight:600; }
.site-footer { padding:45px 36px 20px; color:#f5f3ef; background:#080808; border-top:1px solid #3a3935; } .footer-top { display:flex; align-items:start; justify-content:space-between; padding-bottom:95px; } .footer-logo { width:168px; height:60px; display:block; overflow:hidden; filter:invert(1); } .footer-logo img { width:215px; max-width:none; height:215px; object-fit:contain; margin-top:-78px; margin-left:-12px; } .footer-top p { margin:0; text-align:right; color:#aaa7a2; font-size:12px; line-height:1.6; } .footer-bottom { display:flex; gap:28px; justify-content:space-between; color:#85827c; font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:.04em; font-size:9px; } .footer-bottom p { margin:0; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease,transform .75s ease; } .reveal.visible { opacity:1; transform:none; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } .hero-media video { display:none; } .reveal { opacity:1; transform:none; } }
@media (max-width:760px) { .container { width:min(100% - 40px,1320px); } .section { padding:88px 0; } .site-header { height:67px; padding:0 20px; } .brand { width:120px; height:40px; } .brand img { width:143px; height:143px; margin-top:-52px; margin-left:-8px; } .desktop-nav,.header-contact { display:none; } .menu-button { display:block; position:relative; z-index:25; } .mobile-menu { position:fixed; z-index:19; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:112px 21px 31px; background:#f5f3ef; color:#080808; transform:translateY(-100%); transition:transform .45s cubic-bezier(.77,0,.18,1); } .mobile-menu.open { transform:translateY(0); } .mobile-menu nav { display:flex; flex-direction:column; gap:15px; } .mobile-menu nav a { font-size:clamp(2.4rem,12vw,4.6rem); font-weight:700; letter-spacing:-.08em; } .mobile-menu p { margin:0; font-size:13px; line-height:1.5; color:#6c6962; } body.menu-open { overflow:hidden; } .hero-content { padding-top:169px; } h1 { font-size:clamp(3.3rem,14vw,5.1rem); line-height:.94; } .hero-bottom { margin-top:54px; align-items:start; flex-direction:column; gap:28px; } .hero-bottom p { width:auto; max-width:315px; font-size:13px; } .hero-index { left:20px; bottom:25px; } .scroll-hint { display:none; } .manifesto { padding-bottom:105px; } .manifesto-grid,.ecosystem-intro,.about-section { grid-template-columns:1fr; gap:33px; } .manifesto h2 { font-size:clamp(3.35rem,14vw,5rem); } .manifesto-copy { max-width:none; } .ecosystem-intro { padding-bottom:39px; } .ecosystem-intro > p { justify-self:start; max-width:310px; } .ecosystem-track { gap:12px; padding:0 20px 8px; } .activity-card { width:275px; height:421px; } .activity-card img.logo { width:230px; height:230px; left:23px; } .quote-break { min-height:455px; } .quote-break h2 { font-size:clamp(3.2rem,14vw,5.2rem); } .orb-left { width:100vw; height:100vw; top:-60vw; left:-37vw; } .orb-right { width:90vw; height:90vw; bottom:-64vw; } .works-heading { align-items:start; flex-direction:column; gap:28px; margin-bottom:33px; } .works-heading h2 { font-size:clamp(3.5rem,14vw,5.3rem); } .works-grid { grid-template-columns:1fr; gap:12px; } .work-card,.work-card:first-child { min-height:430px; grid-row:auto; padding:23px; } .work-card:first-child { min-height:540px; } .about-section { gap:48px; } .about-image { height:440px; } .about-text h2 { font-size:clamp(3.4rem,14vw,5rem); margin-bottom:28px; } .contact { padding:125px 0; } .contact h2 { font-size:clamp(3.7rem,15vw,5.7rem); } .site-footer { padding:35px 20px 18px; } .footer-top { padding-bottom:60px; } .footer-top p { font-size:10px; } .footer-bottom { flex-wrap:wrap; gap:12px 20px; line-height:1.5; } }

/* Défilement continu des sept univers Akiba. */
.ecosystem-marquee { overflow:hidden; cursor:grab; }
.ecosystem-marquee:active { cursor:grabbing; }
.ecosystem-track { width:max-content; display:flex; gap:0; padding:0; animation:ecosystem-marquee 52s linear infinite; will-change:transform; }
.ecosystem-set { display:flex; gap:15px; padding:0 15px 10px; }
.ecosystem-set:first-child { padding-left:15px; }
.ecosystem-marquee:hover .ecosystem-track,.ecosystem-marquee:focus-within .ecosystem-track { animation-play-state:paused; }
@keyframes ecosystem-marquee { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .ecosystem-marquee { overflow-x:auto; } .ecosystem-track { animation:none; } }

/* Logo clair sur les fonds sombres ; version noire dès que la navigation devient claire. */
.brand-logo--dark { display:none; }
.site-header.scrolled .brand-logo--white { display:none; }
.site-header.scrolled .brand-logo--dark { display:block; }
.footer-logo { filter:none; }

/* Le verre reste très discret : profondeur, reflet et transparence sans masquer les logos. */
.activity-card { isolation:isolate; border:1px solid rgba(255,255,255,.34); background:rgba(245,243,239,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.48),inset 0 -1px 0 rgba(255,255,255,.12),0 22px 42px rgba(0,0,0,.2); }
.activity-card .card-photo { z-index:0; opacity:.7; }
.activity-card::before { content:''; position:absolute; z-index:1; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(128deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.13) 25%,rgba(255,255,255,.035) 53%,rgba(255,255,255,.17) 100%); backdrop-filter:blur(5px) saturate(118%); -webkit-backdrop-filter:blur(5px) saturate(118%); }
.activity-card::after { z-index:1; background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.02) 48%,rgba(0,0,0,.55)); }
.activity-card img.logo,.activity-card .card-bottom { z-index:2; }
.activity-card:hover { border-color:rgba(255,255,255,.64); box-shadow:inset 0 1px 0 rgba(255,255,255,.63),inset 0 -1px 0 rgba(255,255,255,.18),0 28px 52px rgba(0,0,0,.3); }

/* Barre de navigation sombre et translucide, inspirée d'un traitement cinéma. */
.site-header { background:rgba(5,5,5,.64); color:#fff; backdrop-filter:blur(15px) saturate(115%); -webkit-backdrop-filter:blur(15px) saturate(115%); border-bottom:1px solid rgba(255,255,255,.12); }
.site-header.scrolled { background:rgba(5,5,5,.82); color:#fff; border-bottom-color:rgba(255,255,255,.16); }
.site-header.scrolled .brand { mix-blend-mode:screen; }
.site-header.scrolled .brand-logo--white { display:block; }
.site-header.scrolled .brand-logo--dark { display:none; }
.header-identity { display:flex; align-items:center; gap:21px; }
.social-nav { display:flex; align-items:center; gap:10px; }
.social-nav a { display:grid; width:23px; height:23px; place-items:center; color:rgba(255,255,255,.92); opacity:.8; transition:opacity .2s,transform .2s; }
.social-nav a:hover,.social-nav a:focus-visible { opacity:1; transform:translateY(-2px); outline:none; }
.social-nav svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.social-nav .social-fill,.social-nav .social-dot { fill:currentColor; stroke:none; }

/* Bouton transparent, avec profondeur de verre, au-dessus de la vidéo. */
.button { gap:15px; transition:transform .2s,background .2s,border-color .2s,box-shadow .2s; }
.button-light { color:#fff; border-color:rgba(255,255,255,.62); background:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 9px 25px rgba(0,0,0,.18); backdrop-filter:blur(11px); -webkit-backdrop-filter:blur(11px); }
.button-light:hover,.button-light:focus-visible { background:rgba(255,255,255,.23); border-color:rgba(255,255,255,.9); outline:none; }

/* Chaque carte révèle uniquement sa propre image, sans modifier les six autres. */
.activity-card .card-photo { filter:grayscale(100%) saturate(.28) brightness(.82); opacity:.62; transition:transform .65s ease,filter .45s ease,opacity .45s ease; }
.activity-card:hover .card-photo,.activity-card:focus-visible .card-photo { transform:scale(1.07); filter:grayscale(0%) saturate(1.28) contrast(1.06) brightness(1.04); opacity:.98; }
.activity-card:focus-visible { outline:2px solid rgba(255,255,255,.95); outline-offset:4px; }

.back-to-top { appearance:none; border:0; padding:0; color:inherit; background:transparent; font:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; transition:color .2s,transform .2s; }
.back-to-top:hover,.back-to-top:focus-visible { color:#fff; transform:translateY(-2px); outline:none; }

@media (max-width:760px) {
  .header-identity { gap:13px; }
  .social-nav { gap:4px; }
  .social-nav a { width:19px; height:25px; }
  .social-nav svg { width:15px; height:15px; }
  .mobile-menu { background:#080808; color:#f5f3ef; }
  .mobile-menu p { color:#aaa7a2; }
}

/* Logo : l'image conserve désormais son ratio complet, sans découpe. */
.brand { width:142px; height:auto; overflow:visible; mix-blend-mode:normal; }
.brand img { width:100%; max-width:100%; height:auto; margin:0; object-fit:contain; }
.site-header.scrolled .brand { mix-blend-mode:normal; }
.footer-logo { width:160px; height:auto; overflow:visible; }
.footer-logo img { width:100%; max-width:100%; height:auto; margin:0; object-fit:contain; }

/* Image de fond éditable : remplacez cette URL par le chemin ou l'URL de votre image. */
:root { --ecosystem-background:url('assets/media/ecosystem.webp'); }
.work-card img { filter:none; transition:transform .7s ease,filter .7s ease; }
.work-card:hover img { filter:none; }
.quote-break { background-color:#15120f; background-image:linear-gradient(90deg,rgba(8,8,8,.78),rgba(8,8,8,.36)),linear-gradient(0deg,rgba(8,8,8,.62),rgba(8,8,8,.08)),var(--ecosystem-background); background-size:cover; background-position:center; background-attachment:fixed; }
.quote-orb { display:none; }

@media (max-width:760px) {
  .site-header { min-height:68px; }
  .brand { width:126px; }
  .footer-logo { width:142px; }
  .hero-bottom .button { width:min(100%,340px); min-height:48px; justify-content:space-between; padding:13px 18px; }
  .button { min-height:46px; justify-content:center; }
  .menu-button { width:48px; height:48px; padding:12px; }
  .mobile-menu nav a { display:flex; align-items:center; min-height:54px; }
  .activity-card { touch-action:pan-y; }
  .activity-card .arrow { width:44px; height:44px; top:20px; right:20px; }
  .text-link,.contact-email { display:inline-flex; align-items:center; min-height:44px; }
  .back-to-top { min-height:44px; text-align:left; }
  .quote-break { background-attachment:scroll; background-position:center; }
}