/* Base commune des maquettes « Projets réalisés » — style B (nuit premium). */
:root { --navy: #082b40; --deep: #03111a; --gold: #fdad2d; --ice: #eef3f8; --mist: #8fa8b8; --line: rgba(255, 255, 255, .1); --ease: cubic-bezier(.16, 1, .3, 1); --accent: #fdad2d; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--deep); color: var(--ice); font-family: 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }

.section { position: relative; min-height: 100vh; overflow: hidden; padding: 84px 64px 64px; }
.section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% -10%, rgba(46, 108, 150, .45), transparent 70%), linear-gradient(180deg, #06202f 0%, var(--deep) 55%); }
.section > * { position: relative; }

.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; max-width: 1360px; margin: 0 auto 44px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid rgba(253, 173, 45, .3); border-radius: 999px; background: rgba(253, 173, 45, .08); font-size: 13px; color: #f3d9ab; }
.eyebrow b { padding: 3px 10px; border-radius: 999px; background: var(--gold); color: var(--navy); font-size: 11.5px; font-weight: 700; }
.title { margin-top: 18px; font-size: clamp(40px, 4.4vw, 68px); font-weight: 600; line-height: 1; letter-spacing: -.05em; background: linear-gradient(180deg, #fff 30%, #a9c2d2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title em { background: linear-gradient(90deg, #ffd58a, var(--gold) 60%, #f08f1f); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.sub { max-width: 400px; font-size: 16.5px; line-height: 1.55; color: var(--mist); }

.btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: transform .4s var(--ease), background .3s, box-shadow .4s; }
.btn svg { width: 16px; height: 16px; }
.btn-gold { background: var(--gold); color: var(--navy); box-shadow: 0 14px 34px -12px rgba(253, 173, 45, .55); }
.btn-gold:hover { transform: translateY(-2px); }
.btn-glass { border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); backdrop-filter: blur(10px); color: #fff; }
.btn-glass:hover { background: rgba(255, 255, 255, .1); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .04); font-size: 12.5px; color: #d3e0e8; }

.dbc { position: relative; display: grid; place-items: center; width: 100%; height: 100%; aspect-ratio: 2.05; background: radial-gradient(60% 70% at 50% 60%, rgba(253, 173, 45, .25), transparent 70%), #0b2a3c; }
.dbc svg { width: 22%; height: auto; fill: none; stroke: #eef3f8; stroke-width: 2; stroke-linecap: round; }
.dbc svg .f { fill: #eef3f8; stroke: none; }
.dbc svg .g { fill: rgba(253, 173, 45, .35); stroke: var(--gold); }
.dbc span { position: absolute; right: 14px; bottom: 12px; font: 500 10.5px 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
@keyframes rise { from { opacity: 0; translate: 0 30px; } }