:root {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    color: #111;
    background: #eeeae3;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #161616; }
body { margin: 0; }
button, a { font: inherit; }
a { color: inherit; }

.labbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    min-height: 58px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: .65rem clamp(1rem, 3vw, 2.5rem);
    color: #111;
    background: rgba(246, 243, 237, .92);
    border-bottom: 1px solid rgba(0, 0, 0, .14);
    backdrop-filter: blur(18px);
}

.labbar__brand { font-size: .75rem; font-weight: 800; letter-spacing: .24em; text-decoration: none; }
.labbar p { margin: 0; font-size: .72rem; letter-spacing: .04em; }
.labbar nav { justify-self: end; display: flex; gap: .35rem; }
.switcher { padding: .55rem .7rem; color: #444; background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-size: .69rem; }
.switcher:hover, .switcher:focus-visible { border-color: #999; outline: none; }
.switcher.is-active { color: #fff; background: #111; }
.concept { min-height: 100svh; padding-top: 58px; }
.concept[hidden] { display: none; }
.eyebrow { margin: 0 0 1.2rem; font-size: clamp(.68rem, 1vw, .82rem); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.lead { max-width: 32rem; font-size: clamp(1rem, 1.8vw, 1.35rem); line-height: 1.45; }
.cta { display: inline-flex; align-items: center; gap: 1.8rem; margin-top: 1.2rem; padding: .9rem 1rem; border-radius: 999px; text-decoration: none; font-size: .82rem; font-weight: 650; }
.cta span { font-size: 1.1rem; }
.cta--light { color: #111; background: #fff; }
.cta--dark { color: #fff; background: #111; }

/* 01 — Road: continuité directe avec la page d'accueil. */
.concept--road { color: #fff; background: #222; }
.road__hero { position: relative; min-height: 100svh; overflow: hidden; }
.road__photo, .road__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.road__photo { object-fit: cover; object-position: center 44%; }
.road__shade { background: linear-gradient(90deg, rgba(0,0,0,.76) 0, rgba(0,0,0,.28) 50%, rgba(0,0,0,.15)), linear-gradient(0deg, rgba(0,0,0,.48), transparent 50%); }
.road__content { position: relative; z-index: 2; width: min(70rem, 100%); padding: clamp(3rem, 9vw, 8rem) clamp(1.2rem, 6vw, 5rem) 11rem; }
.road__content h1 { max-width: 9ch; margin: 0; font-size: clamp(4.1rem, 10.5vw, 9.8rem); font-weight: 760; line-height: .83; letter-spacing: -.075em; }
.road__ad { position: absolute; z-index: 3; right: clamp(1.2rem, 5vw, 4rem); bottom: clamp(3rem, 5vw, 5rem); width: min(23rem, calc(100% - 2.4rem)); padding: 1.2rem; color: #111; background: #f2e452; }
.road__ad span, .road__ad strong, .road__ad a { display: block; }
.road__ad span { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.road__ad strong { margin: 1.5rem 0 2.2rem; font-size: 1.45rem; line-height: 1.05; letter-spacing: -.035em; }
.road__ad a { font-size: .8rem; font-weight: 700; }
.road__scroll { display: inline-flex; align-items: center; gap: 1rem; margin-top: 1.5rem; color: #fff; text-decoration: none; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.road__scroll i { width: 2.8rem; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; font-size: 1.05rem; font-style: normal; animation: scroll-cue 1.8s ease-in-out infinite; }
@keyframes scroll-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.42rem); } }

.road-products { padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 5vw, 4rem) 8rem; color: #111; background: #f4f1eb; }
.road-products__intro { display: grid; grid-template-columns: .5fr 1fr .6fr; align-items: end; gap: 3vw; margin-bottom: clamp(4rem, 8vw, 7rem); }
.road-products__intro .eyebrow { align-self: start; }
.road-products__intro h2 { margin: 0; font-size: clamp(3.8rem, 9vw, 9rem); font-weight: 760; line-height: .82; letter-spacing: -.075em; }
.road-products__intro > p:last-child { max-width: 18rem; margin: 0; font-size: 1rem; line-height: 1.5; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); }
.product-card { min-height: 43rem; display: grid; grid-template-rows: minmax(17rem, 1fr) auto; overflow: hidden; color: #111; background: #ded8cd; text-decoration: none; }
.product-card--wide { grid-column: 1 / -1; grid-template-columns: 1.15fr .85fr; grid-template-rows: minmax(35rem, 68vh); }
.product-card--yellow { background: #f2e452; }
.product-card--coral { background: #ff6b4a; }
.product-card figure { min-height: 0; margin: 0; overflow: hidden; }
.product-card figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.product-card:hover figure img { transform: scale(1.035); }
.product-card__copy { min-height: 19rem; display: flex; flex-direction: column; padding: clamp(1.2rem, 2.5vw, 2.2rem); }
.product-card--wide .product-card__copy { min-height: 0; }
.product-card__number { align-self: flex-start; min-width: 2.4rem; padding: .35rem .5rem; color: #fff; background: #111; border-radius: 999px; text-align: center; font-size: .65rem; font-weight: 750; }
.product-card h3 { margin: auto 0 1rem; font-size: clamp(2.6rem, 5vw, 5.5rem); font-weight: 760; line-height: .83; letter-spacing: -.07em; }
.product-card:not(.product-card--wide) h3 { font-size: clamp(2.3rem, 4vw, 4rem); }
.product-card p { margin: 0 0 2.5rem; font-size: clamp(1rem, 1.5vw, 1.2rem); }
.product-card footer { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.28); font-size: .72rem; }
.product-card footer b { font-size: .72rem; }
.road-products__all { margin-top: clamp(3rem, 7vw, 6rem); display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-top: 2px solid #111; border-bottom: 2px solid #111; text-decoration: none; font-size: clamp(2rem, 5vw, 5rem); font-weight: 750; letter-spacing: -.055em; }
.road-products__all b { width: clamp(3rem, 7vw, 6rem); aspect-ratio: 1; display: grid; place-items: center; color: #fff; background: #111; border-radius: 50%; font-size: .35em; }

/* 02 — Studio: calme, précis, très lisible. */
.concept--studio { padding: clamp(7rem, 12vw, 10rem) clamp(1.2rem, 5vw, 4rem) 7rem; background: #f4f1eb; }
.studio__intro { display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 4vw; align-items: end; }
.studio__intro .eyebrow { grid-row: span 3; align-self: start; }
.studio__intro h1 { margin: 0; font-size: clamp(4.5rem, 11vw, 10.5rem); font-weight: 580; line-height: .82; letter-spacing: -.078em; }
.studio__visual { position: relative; margin: 5rem 0 1rem 28%; height: min(55vw, 42rem); overflow: hidden; background: #bbb; }
.studio__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: saturate(.82); }
.studio__visual span { position: absolute; top: 1rem; left: 1rem; padding: .65rem .75rem; background: #f4f1eb; font-size: .75rem; font-weight: 700; line-height: 1.2; }
.studio__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 4rem; background: #aaa; border: 1px solid #aaa; }
.studio__cards a { min-height: 14rem; display: flex; flex-direction: column; padding: 1.2rem; background: #f4f1eb; text-decoration: none; transition: background .2s, color .2s; }
.studio__cards a:hover { color: #fff; background: #111; }
.studio__cards small { font-size: .67rem; text-transform: uppercase; letter-spacing: .1em; }
.studio__cards strong { max-width: 13ch; margin: auto 0; font-size: clamp(1.35rem, 2.5vw, 2.5rem); line-height: 1; letter-spacing: -.05em; }
.studio__cards span { font-size: .75rem; font-weight: 700; }

/* 03 — Poster: énergie fanzine, typographie tenue. */
.concept--poster { min-height: 100svh; padding-bottom: 6rem; overflow: hidden; color: #101010; background: #ff5f3d; }
.poster__ticker { margin-top: 2.5rem; padding: .6rem 0; overflow: hidden; color: #fff; background: #111; font-size: clamp(1.4rem, 3vw, 3rem); font-weight: 800; letter-spacing: -.04em; white-space: nowrap; transform: rotate(-2deg) scale(1.03); }
.poster__ticker span { display: inline-block; min-width: 200%; animation: ticker 16s linear infinite; }
.poster__grid { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; padding: clamp(3.5rem, 7vw, 7rem) clamp(1.2rem, 5vw, 4rem); }
.poster__copy h1 { margin: 0; font-size: clamp(4rem, 10vw, 10rem); font-weight: 900; line-height: .78; letter-spacing: -.085em; text-transform: uppercase; }
.poster__copy .lead { font-weight: 750; }
.poster__grid figure { align-self: start; margin: 0; transform: rotate(3deg); }
.poster__grid figure img { display: block; width: 100%; max-height: 58vh; object-fit: cover; object-position: center 35%; border: .7rem solid #f4f1eb; }
.poster__grid figcaption { display: inline-block; padding: .45rem .6rem; background: #f4f1eb; font-size: .7rem; font-weight: 750; }
.poster__sticker { position: absolute; right: 38%; top: 48%; width: 10rem; aspect-ratio: 1; display: grid; place-items: center; color: #111; background: #f2e452; border: 3px solid #111; border-radius: 50%; text-align: center; text-decoration: none; font-size: 1.2rem; font-weight: 850; line-height: .95; transform: rotate(-11deg); box-shadow: 7px 7px 0 #111; }
.poster__sticker b { position: absolute; right: 1.5rem; bottom: 1.2rem; }
.poster__ad { grid-column: 1 / -1; display: grid; grid-template-columns: .35fr 1fr auto; align-items: end; gap: 2rem; margin-top: 2rem; padding: 1.4rem; background: #f4f1eb; border: 3px solid #111; text-decoration: none; box-shadow: 9px 9px 0 #111; }
.poster__ad small { align-self: start; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.poster__ad strong { max-width: 18ch; font-size: clamp(1.7rem, 4vw, 4rem); line-height: .94; letter-spacing: -.06em; }
.poster__ad span { font-size: .78rem; font-weight: 750; }
@keyframes ticker { to { transform: translateX(-50%); } }

.labnote { position: fixed; z-index: 60; inset: auto 0 0; padding: .45rem 1rem; color: #aaa; background: #161616; text-align: center; font-size: .62rem; letter-spacing: .04em; }

@media (max-width: 760px) {
    .labbar { grid-template-columns: 1fr auto; }
    .labbar p { display: none; }
    .switcher { padding-inline: .55rem; }
    .road__content { padding-top: 22vh; }
    .road__content h1 { font-size: clamp(4rem, 20vw, 7rem); }
    .road__ad { bottom: 2.8rem; }
    .road-products__intro { display: block; }
    .road-products__intro h2 { margin-bottom: 2rem; font-size: clamp(3.7rem, 18vw, 6rem); }
    .product-grid { grid-template-columns: 1fr; }
    .product-card, .product-card--wide { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: 24rem auto; min-height: 0; }
    .product-card__copy, .product-card--wide .product-card__copy { min-height: 20rem; }
    .studio__intro { display: block; }
    .studio__intro h1 { font-size: clamp(4rem, 20vw, 7rem); }
    .studio__visual { margin: 4rem 0 1rem 12%; height: 70vh; }
    .studio__cards { grid-template-columns: 1fr; }
    .studio__cards a { min-height: 10rem; }
    .poster__grid { grid-template-columns: 1fr; }
    .poster__copy h1 { font-size: clamp(3.5rem, 18vw, 7rem); }
    .poster__grid figure { width: 78%; justify-self: end; }
    .poster__sticker { right: auto; left: 5%; top: 52%; width: 8rem; }
    .poster__ad { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .poster__ticker span, .road__scroll i { animation: none; }
}

.production .concept { padding-top: 0; }
.production .road__hero { min-height: 100svh; }