:root{ --bg:#000; --fg:#f3f3f3; --muted:#a7a7a7; --frame:#0a0a0a; --accent:#ff6a00; --accent-2:#ffa600; --card:#0b0b0b; --card-b:#1c1c1c; --radius:16px; } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;line-height:1.55} img{max-width:100%;height:auto;display:block} a{color:#fff;text-decoration:none} .container{width:min(1120px,92%);margin:auto} .header,.footer{background:#000;border-top:1px solid #121212;border-bottom:1px solid #121212} .nav{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 0} .nav a{color:#ddd;padding:8px 10px;border-radius:10px} .nav a:hover, .nav a[aria-current="page"]{background:#111;color:#fff} .brand{font-weight:700} .hero{position:relative;overflow:hidden;background:#000} .hero-frame{} @media(min-width:1024px){.hero-frame{}} .hero-bleed picture{display:block;width:100%} .hero-img{display:block;width:100%;height:auto} /* Overlay visible et positionné correctement */ .hero .hero-info{ position:absolute;left:0;right:0; bottom: clamp(6vh, 10vw, 18vh); padding: clamp(16px, 2vw, 40px) 0; z-index:2; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.65) 100%); } /* Titres et pills */ h1{font-size:clamp(1.9rem, 2.8vw, 3rem);margin:0 0 6px} h3{margin:0 0 10px;font-size:1.25rem} .pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .pill{border:1px solid #333;padding:6px 10px;border-radius:999px;background:#0b0b0b;color:#eee;box-shadow:inset 0 0 0 1px #111} main{padding:24px 0} @media(min-width:1024px){main{padding:32px 0}} .card{background:var(--card);border:1px solid var(--card-b);border-radius:var(--radius);padding:18px;box-shadow:0 8px 30px rgba(0,0,0,.25)} .clean{list-style:none;padding:0;margin:0} .mb-0{margin-bottom:0} .mt-3{margin-top:14px} .small{font-size:.9rem;color:var(--muted)} .btn-primary{display:inline-block;border:0;border-radius:12px;padding:10px 14px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#000;font-weight:700} .hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} /* Animations visibles : on load + on scroll */ @keyframes slideUpIn{from{transform:translateY(28px);opacity:0}to{transform:translateY(0);opacity:1}} .reveal-up{opacity:0;transform:translateY(28px)} .ready .reveal-up.is-in{animation:slideUpIn 750ms cubic-bezier(.22,1,.36,1) both} /* Hero: animation immédiate pour le bloc d’info */ .ready .hero .hero-info .container{animation:slideUpIn 700ms cubic-bezier(.22,1,.36,1) 60ms both} /* Motion safety */ @media (prefers-reduced-motion: reduce){ .reveal-up,.hero .hero-info .container{opacity:1;transform:none;animation:none} } /* Footer */ .footer{color:#bbb} .footer .cols{display:grid;gap:12px;grid-template-columns:1fr} @media(min-width:768px){.footer .cols{grid-template-columns:1fr 1fr 1fr}} /* ===== Centered stage for page content with slide-in animation ===== */ .stage{ min-height: 100vh; min-height: 100dvh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 3vw, 40px) 0; } .stage-inner{max-width: 1100px; width: min(92vw, 1100px);} .reveal-in{opacity:0; transform: translateY(48px);} /* Animate on first paint; JS already toggles .ready on */ .ready .reveal-in{animation: glideUpIn 720ms cubic-bezier(.22,1,.36,1) 80ms both;} @keyframes glideUpIn{ from{opacity:0; transform: translateY(48px);} to{opacity:1; transform: none;} } /* Subpages: hide the hero strip so the content is immediately centered */ /* ===== Stage centered and slide-in animation (robust) ===== */ .stage{ min-height: 100vh; min-height: 100dvh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 3vw, 40px) 0; } .stage-inner{max-width: 1100px; width: min(92vw, 1100px);} .reveal-in{opacity:0; transform: translateY(48px);} .ready .reveal-in{animation: glideUpIn 720ms cubic-bezier(.22,1,.36,1) 80ms both;} @keyframes glideUpIn{ from{opacity:0; transform: translateY(48px);} to{opacity:1; transform: none;} } @media (prefers-reduced-motion: reduce){ .reveal-in{opacity:1; transform:none;} .ready .reveal-in{animation:none;} } /* Subpages keep hero out of the flow so content is always mid-screen */ /* ===== Subpages: keep hero visible but compact, center main in remaining viewport ===== */ .body--subpage{ --heroH: clamp(30vh, 42vh, 48vh); } .body--subpage .hero{position:relative; overflow:hidden;} .body--subpage .hero-bleed picture, .body--subpage .hero-bleed .hero-img{ display:block; width:100%; height: var(--heroH); object-fit: cover; } /* Ensure overlay info remains visible on subpages too */ .body--subpage /* Main content occupies the rest of the viewport and is vertically centered */ .body--subpage main.stage{ min-height: calc(100vh - var(--heroH)); min-height: calc(100dvh - var(--heroH)); min-height: calc(100svh - var(--heroH)); display:flex; align-items:center; justify-content:center; } /* Slide-in stays the same (already defined) */ /* === Refactor 2025-09-14 === */ .hero{ position: relative; overflow: hidden; background: #000; } .hero-bleed{position:relative} .hero-bleed .hero-img{ width: 100%; height: clamp(420px, 56vh, 720px); object-fit: cover; object-position: 50% 60%; display:block; } /* Info overlay centered */ .hero .hero-info{ position:absolute; inset:0; display:flex; align-items:center; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.70) 100%); } .hero .hero-info .container{will-change: transform, opacity} /* Home and subpages share the same centering */ .body--subpage .hero .hero-info{background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.75) 100%);} /* Ensure characters are visible on subpages by lowering focal point slightly */ .body--subpage .hero-bleed .hero-img{object-position: 50% 65%} /* Remove black strip below hero (no frame border) */ .hero-frame{border:0} /* Stage: center main content vertically and animate in */ .stage{ min-height: calc(100vh - 0px); min-height: calc(100dvh - 0px); min-height: calc(100svh - 0px); display:flex; align-items:center; justify-content:center; padding: clamp(16px, 4vw, 48px) 0; } .stage .stage-inner{width:min(92vw, 1100px)} .reveal-in{opacity:0; transform: translateY(48px)} .ready .reveal-in{animation: glideUpIn 700ms cubic-bezier(.22,1,.36,1) both} @keyframes glideUpIn{from{transform:translateY(48px);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion: reduce){ .reveal-in{opacity:1;transform:none;animation:none} } /* Pills minor tweak */ .pill{border-color:#2a2a2a; background:#0e0e0e} /* Unified hero overlay */ .hero-bleed{position:relative} .hero-bleed::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.75) 100%); pointer-events:none; } /* Unified hero overlay v1 */ .hero-bleed{position:relative} .hero-bleed::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.75) 100%); pointer-events:none; } /* Responsive hero safety */ .hero-bleed .hero-img{ width: 100%; height: auto; object-fit: cover; aspect-ratio: 16/9; } @media (max-width: 640px){ .hero .hero-info h1{ font-size: clamp(22px, 6vw, 28px); } .pills .pill{ font-size: 14px; padding: 8px 10px; } } /* === KMDS Adjustments v1.1 === */ /* Position préférentielle du cadrage pour éviter de couper les têtes */ :root{ --hero-focus-home: 50% 45%; --hero-focus-sub: 50% 42%; } /* Home: centrer légèrement plus bas */ body:not(.body--subpage) .hero-bleed .hero-img{ object-position: var(--hero-focus-home); } /* Sous-pages: montrer plus le haut du cadre (évite coupes de têtes) */ .body--subpage .hero-bleed .hero-img{ object-position: var(--hero-focus-sub); } /* Home: placer le bloc d'info plus bas (en dessous des visages) */ body:not(.body--subpage) .hero .hero-info{ bottom: clamp(2vh, 4vw, 8vh); background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.6) 100%); } /* Header: descendre légèrement la marque (logo/texte) pour qu'elle apparaisse bien */ .header .brand{ margin-top: 6px; } @media (min-width: 1024px){ .header .brand{ margin-top: 8px; } } /* Bouton hero */ .btn-hero{ display:inline-block; margin-top: 16px; } /* === KMDS Adjustments v2 === */ /* 1) Header: give a bit more breathing room to show the brand/logo */ .header{ padding-top: 8px; padding-bottom: 8px; } @media (min-width: 1024px){ .header{ padding-top: 10px; padding-bottom: 10px; } } /* 2) Home: hero caption must be below the faces, not overlayed */ .body--home .hero .hero-info{ display:none !important; } /* hide overlay on home */ .body--home .hero-caption{ padding: clamp(18px, 4vw, 40px) 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%); } .body--home .hero-caption .container{ animation: slideUpIn 700ms cubic-bezier(.22,1,.36,1) 60ms both; } /* 3) Object-position tuning to avoid cutting heads */ .body--home .hero-bleed .hero-img{ object-position: 50% 45%; } /* show a bit more top on home */ .body--subpage .hero-bleed .hero-img{ object-position: 50% 60%; } /* push focus downward on subpages */ /* 4) Subpage hero height slightly reduced to limit cropping */ .body--subpage{ --heroH: clamp(34vh, 40vh, 46vh); } /* 5) CTA style refinement */ .btn-hero{ display:inline-block; margin-top: 16px; } /* === KMDS Full Refactor v2 (strong overrides) === */ main.stage{ min-height: auto !important; display: block !important; align-items: initial !important; justify-content: initial !important; padding: clamp(20px, 3vw, 40px) 0; } .header{ padding-top: 10px; padding-bottom: 10px; } @media (min-width: 1024px){ .header{ padding-top: 12px; padding-bottom: 12px; } } :root{ --heroH-home: clamp(340px, 62vh, 780px); --heroH-sub: clamp(280px, 52vh, 680px); --focus-home: 50% 55%; --focus-sub: 50% 45%; } .hero-bleed .hero-img{ width: 100% !important; height: var(--heroH-home) !important; object-fit: cover !important; object-position: var(--focus-home) !important; display:block; } .body--subpage .hero-bleed .hero-img{ height: var(--heroH-sub) !important; object-position: var(--focus-sub) !important; } @media (max-width: 480px){ :root{ --heroH-home: clamp(260px, 58vh, 640px); --heroH-sub: clamp(220px, 48vh, 560px); --focus-home: 50% 58%; --focus-sub: 50% 48%; } } .hero .hero-info{ display:none !important; } .body--home .hero-caption{ padding: clamp(18px, 4vw, 40px) 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,0) 100%); } .btn-hero{ display:inline-block; margin-top: 16px; } /* --- FIXED HERO BACKGROUND --- */ .hero { min-height: 100svh; background-image: image-set( url("../img/hero-unified-1920.webp") type("image/webp") 1x, url("../img/hero-unified-3840.webp") type("image/webp") 2x, url("../img/hero-unified-1920.jpg") type("image/jpeg") 1x, url("../img/hero-unified-3840.jpg") type("image/jpeg") 2x ); background-position: center; background-size: cover; background-repeat: no-repeat; background-color: #000; }