@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { --ink:#191919; --paper:#f4f0e8; --orange:#ff5526; --line:rgba(25,25,25,.2); font-family:'Space Grotesk',sans-serif; color:var(--ink); background:var(--paper); } *{box-sizing:border-box} body{margin:0} a{color:inherit;text-decoration:none}.site-header{max-width:1280px;margin:auto;padding:26px 5vw;display:flex;align-items:center;justify-content:space-between}.logo{font-weight:700;letter-spacing:-.06em}.logo span,.eyebrow{color:var(--orange)}.back{font:.65rem 'DM Mono',monospace;text-transform:uppercase}.back:hover{color:var(--orange)}.shell{max-width:1280px;margin:auto;padding:0 5vw}.eyebrow{font: .62rem 'DM Mono',monospace;text-transform:uppercase;margin:0 0 26px}.hero{min-height:650px;padding-top:90px;padding-bottom:100px;display:flex;align-items:center;justify-content:space-between;gap:8vw}.hero-copy{max-width:650px}.hero h1{font-size:clamp(4rem,9vw,9rem);line-height:.82;letter-spacing:-.1em;margin:0 0 36px}.hero h1 em{font-style:normal;color:var(--orange)}.intro{font-size:1.1rem;line-height:1.45;max-width:400px}.visual{width:39vw;max-width:460px;height:470px;overflow:hidden}.visual img{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}.button{display:inline-flex;margin-top:28px;border:1px solid var(--orange);padding:16px 20px;font-size:.78rem;font-weight:600}.button:hover{background:var(--orange)}.button span{margin-left:14px;color:var(--orange)}.button:hover span{color:var(--ink)}.band{background:var(--ink);color:var(--paper);padding:80px 5vw}.band-inner{max-width:1280px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:8vw}.band h2{font-size:clamp(2.8rem,5vw,5.2rem);line-height:.9;letter-spacing:-.08em;margin:0}.band h2 em{font-style:normal;color:var(--orange)}.details{padding-top:110px;padding-bottom:120px;display:grid;grid-template-columns:1fr 1fr;gap:8vw}.details h2{font-size:2.2rem;letter-spacing:-.07em}.list{border-top:1px solid var(--line)}.list div{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);font-size:.85rem}.footer{border-top:1px solid var(--line);padding:25px 5vw;display:flex;justify-content:space-between;font:.62rem 'DM Mono',monospace;color:#77736a}.footer .logo{font:700 1rem 'Space Grotesk',sans-serif;color:var(--ink)}
.flow{--paper:#111;--ink:#f5f1e8;--orange:#baff4a; background:var(--paper);color:var(--ink)}.flow .logo span,.flow .eyebrow,.flow .button span{color:var(--orange)}.flow .site-header{border-bottom:1px solid #444}.flow .back:hover{color:var(--orange)}.flow .hero{min-height:670px}.flow .hero h1{font-size:clamp(4.5rem,10vw,10rem)}.flow .visual{background:var(--orange);display:grid;place-content:center;color:#111}.flow .visual-mark{font-size:15rem;line-height:.6;font-weight:700;transform:rotate(12deg)}.flow .band{background:var(--orange);color:#111}.flow .band h2 em{color:#111}.flow .list div{border-color:#444}.flow .footer{border-color:#444;color:#aaa}.flow .footer .logo{color:var(--ink)}
@media(max-width:760px){.site-header{padding-top:20px}.hero{display:block;min-height:auto;padding-top:75px;padding-bottom:75px}.hero h1{font-size:clamp(4.3rem,20vw,7rem)}.visual{width:82%;height:380px;margin:60px 0 0 auto}.band-inner,.details{display:block}.band h2{margin-bottom:35px}.details{padding-top:80px;padding-bottom:80px}.details .list{margin-top:45px}.footer{flex-wrap:wrap;gap:15px}.footer p:last-child{width:100%}.flow .hero h1{font-size:clamp(4.5rem,21vw,7.5rem)}.flow .visual{width:100%;height:300px}.flow .visual-mark{font-size:10rem}}
body:has(img[src*="1515003197210"]) { --paper: #f1e9dc; --ink: #291d1a; --orange: #b96f45; --line: rgba(41,29,26,.22); font-family: Georgia, serif; }
body:has(img[src*="1515003197210"]) .site-header, body:has(img[src*="1515003197210"]) .footer { font-family: 'DM Mono', monospace; }
body:has(img[src*="1515003197210"]) .hero h1, body:has(img[src*="1515003197210"]) .band h2, body:has(img[src*="1515003197210"]) .details h2 { font-weight: 400; }
body:has(img[src*="1515003197210"]) .visual { border-radius: 48% 48% 0 0; }
body:has(img[src*="1515003197210"]) .band { background: #291d1a; }
body:has(img[src*="1515003197210"]) .button { border-radius: 30px; }
body:has(img[src*="1528698827591"]) { --paper: #e4e4d6; --ink: #25372e; --orange: #b85b39; --line: rgba(37,55,46,.22); font-family: 'Trebuchet MS', sans-serif; }
body:has(img[src*="1528698827591"]) .hero { align-items: end; }
body:has(img[src*="1528698827591"]) .hero h1 { font-weight: 400; letter-spacing: -.12em; }
body:has(img[src*="1528698827591"]) .visual { border-radius: 0 0 45% 45%; transform: rotate(3deg); box-shadow: 18px 18px 0 rgba(184,91,57,.2); }
body:has(img[src*="1528698827591"]) .band { background: #25372e; }
body:has(img[src*="1528698827591"]) .button { border-radius: 4px 22px 4px 22px; }
body.flow { --paper: #101827; --ink: #edf4ff; --orange: #62d7ff; --line: rgba(237,244,255,.24); background-image: linear-gradient(rgba(98,215,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(98,215,255,.06) 1px, transparent 1px); background-size: 32px 32px; }
body.flow .visual { background: #62d7ff; border-radius: 24px; box-shadow: 16px 16px 0 #3a4cff; }
body.flow .band { background: #3a4cff; }
body.flow .band h2 em { color: #101827; }
body.flow .button { border-radius: 5px; }
body .button { transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
body .button:hover { transform: translateY(-4px); box-shadow: 0 10px 18px rgba(25,25,25,.14); }
body .button span { transition: transform .3s ease, color .3s ease; }
body .button:hover span { transform: translateX(5px); }
html { scroll-behavior: smooth; }
html [id] { scroll-margin-top: 28px; }
.site-header .back { display: inline-flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1px solid var(--orange); background: var(--ink); color: var(--paper); transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
.site-header .back:hover { background: var(--orange); color: var(--ink); transform: translateY(-3px); box-shadow: 0 9px 16px rgba(25,25,25,.16); }
.sidebar-bottom a[href*="#exemples"] { display: flex; align-items: center; gap: 9px; margin: 12px; padding: 12px; border: 1px solid var(--orange); color: var(--orange); transition: background .3s ease, color .3s ease, transform .3s ease; }
.sidebar-bottom a[href*="#exemples"]:hover { background: var(--orange); color: var(--ink); transform: translateX(4px); }
body { overflow-x: hidden; animation: secondary-page-in .85s cubic-bezier(.2,.7,.2,1) both; }
body > .site-header, body > .sidebar { animation: secondary-header-in .7s cubic-bezier(.2,.7,.2,1) both; }
body > main { animation: secondary-content-in .95s .08s cubic-bezier(.2,.7,.2,1) both; }
body > main > section:first-child { animation-delay: .18s; }
body > main > section:nth-child(2) { animation-delay: .28s; }
body > main > section:nth-child(3) { animation-delay: .38s; }
.hero-photo img, .visual img { transform: scale(1.05); transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .8s; }
.hero-photo:hover img, .visual:hover img { transform: scale(1.12); filter: saturate(1.05) contrast(1.05); }
.hero-photo, .visual, .atelier-shape { transition: transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .7s; }
.hero-photo:hover { transform: rotate(1deg) scale(1.015); box-shadow: 14px 18px 0 rgba(180,95,61,.15); }
.atelier-shape:hover, .visual:hover { transform: translateY(-8px) rotate(1deg); }
@keyframes secondary-page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes secondary-header-in { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes secondary-content-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { body, body > .site-header, body > .sidebar, body > main { animation: none; }.hero-photo img, .visual img { transition: none; transform: none; } }
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--orange); background: transparent; color: inherit; padding: 9px 11px; font: .6rem 'DM Mono', monospace; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s, transform .25s; }
.theme-toggle:hover { background: var(--orange); color: var(--ink); transform: translateY(-2px); }.theme-icon { color: var(--orange); font-size: .9rem; line-height: 1; }.theme-toggle:hover .theme-icon { color: var(--ink); }
html[data-theme="dark"] body:not(.flow) { --paper: #171719; --ink: #f4f1ea; --line: rgba(244,241,234,.24); background: var(--paper); color: var(--ink); }
html[data-theme="dark"] body:not(.flow) .band { background: #080809; }.flow-dashboard { transition: background .35s, color .35s; }
html[data-theme="light"] .flow-dashboard { --paper: #f4f0e8; --ink: #191919; --orange: #ff5526; --line: rgba(25,25,25,.2); background: var(--paper); color: var(--ink); }
html[data-theme="light"] .flow-dashboard .sidebar { background: var(--ink); color: var(--paper); }
@media (max-width: 760px) { .theme-toggle { margin-left: 10px; }.dashboard-header .theme-toggle { margin: 15px 0 0; }.site-header .theme-toggle { margin-left: auto; } }