.studio-page { --studio-orange:#ff4b1b; background:#080808; color:#fff; overflow:clip; }
.studio-page .wrap { width:min(1280px,calc(100% - 40px)); margin-inline:auto; }
.studio-page h1,.studio-page h2 { font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-weight:1000; line-height:.87; letter-spacing:-.065em; text-transform:uppercase; overflow-wrap:anywhere; }
.studio-page h1 { font-size:clamp(4rem,8vw,8.5rem); margin:25px 0 35px; }
.studio-page h2 { font-size:clamp(3rem,5.7vw,6.5rem); margin:0 0 35px; }
.studio-page h2 > span { color:#ff4b1b; }
.studio-page .studio-outline { color:transparent; -webkit-text-stroke:1.5px currentColor; -webkit-text-stroke-color:#ff4b1b; }
.studio-page p { line-height:1.8; }
.studio-kicker { color:#ff4b1b; font-size:.72rem; line-height:1.6; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin:0 0 24px; }
.studio-lead { max-width:540px; color:#bcbcbc; font-size:1.04rem; }
.studio-page .studio-button { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:52px; padding:18px 25px; border:1px solid #ff4b1b !important; border-radius:50px; background:#ff4b1b; color:#111; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background .2s,transform .2s; text-decoration:none; }
.studio-page .studio-button:hover { background:#fff; transform:translateY(-3px); }
.studio-page :is(a,button,input,textarea,select,summary):focus-visible { outline:1px solid #ff4b1b; outline-offset:0px; }
.studio-section { padding:clamp(75px,9vw,130px) 0; }
.about-hero { padding:165px 0 70px; background:radial-gradient(ellipse at 75% 30%,#ff4b1b20,transparent 55%),#080808; }
.about-hero-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:75px; align-items:center; }
.about-hero-copy .studio-button { margin-top:20px; }
.about-portrait { position:relative; margin:0 15px 40px; rotate:3deg; }
.about-portrait > img,.portrait-placeholder { display:block; width:100%; height:530px; object-fit:cover; border-radius:2px; }
.portrait-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(ellipse at center,#ff4b1b30,transparent 65%),#191919; border:1px solid #ffffff30; }
.portrait-placeholder svg { width:60%; height:70%; stroke:#ff4b1b; stroke-width:1; }
.portrait-placeholder > span { color:#aaa; font-size:.75rem; letter-spacing:.08em; }
.about-portrait figcaption { position:absolute; bottom:-30px; left:-25px; right:25px; rotate:-6deg; background:#ff4b1b; padding:23px 28px; color:#111; }
.about-portrait figcaption span { display:block; font-size:1.35rem; font-weight:800; letter-spacing:-.04em; }
.about-portrait figcaption strong { font-size:.75rem; font-weight:500; }
.about-story { background:#f5f3ee; color:#111; }
.about-story-grid { display:grid; grid-template-columns:1fr 3fr; gap:50px; }
.about-bio { max-width:760px; color:#555; font-size:1.08rem; }
.about-signature { padding-top:22px; border-top:1px solid #ccc; margin-top:35px; font-weight:750; }
.about-skills-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:55px; }
.about-skills article { border-top:1px solid #555; padding-top:25px; transition:transform .25s; }
.about-skills article:hover { transform:translateY(-7px); }
.skill-top { display:flex; justify-content:space-between; align-items:center; color:#ff4b1b; }
.skill-top svg { width:44px; height:44px; }
.skill-top > span { color:#888; font-size:.73rem; }
.about-skills h3 { margin:40px 0 15px; font-size:1.6rem; letter-spacing:-.045em; }
.about-skills p { font-size:.9rem; }
.about-skills a { font-size:.75rem; color:#ff4b1b; }
.about-approach { background:#ff4b1b; color:#111; }
.about-approach .studio-kicker { color:#111; }
.about-approach .studio-outline { -webkit-text-stroke-color:#111; }
.about-approach-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.about-approach ol { padding:0; margin:0; list-style:none; }
.about-approach li { display:flex; gap:25px; border-top:1px solid #1115; padding:26px 0; }
.about-approach li > span { font-size:.73rem; padding-top:8px; }
.about-approach h3 { font-size:1.4rem; letter-spacing:-.04em; margin:0 0 12px; }
.about-approach p { margin:0; font-size:.93rem; }
/* Contact : carnet clair sur fond noir, choix de sujet et champs larges. */
.studio-contact { background:radial-gradient(ellipse at 0 15%,#ff4b1b15,transparent 50%),#080808; }
.contact-layout { padding:165px 0 100px; display:grid; grid-template-columns:1fr 1.08fr; gap:65px; align-items:start; }
.contact-intro { position:sticky; top:135px; }
.contact-intro h1 { font-size:clamp(4rem,7.4vw,7.6rem); }
.contact-next { display:flex; gap:20px; border-top:1px solid #ffffff30; margin-top:45px; padding-top:30px; }
.contact-next > span { color:#ff4b1b; font-size:34px; }
.studio-page .contact-next h2 { font-size:1.15rem; text-transform:none; line-height:1.3; letter-spacing:-.03em; margin:0; }
.contact-next p { font-size:.88rem; color:#aaa; }
.contact-direct { display:inline-block; color:#fff; text-decoration:underline; text-underline-offset:6px; margin-top:20px; overflow-wrap:anywhere; }
.contact-note { font-size:.75rem; color:#777; margin-top:45px; }
.contact-paper { background: #f3f3f1; color:#111; padding:38px; border-top:5px solid #ff4b1b; }
.contact-form-heading { display:flex; justify-content:space-between; gap:20px; align-items:start; border-bottom:1px solid #ccc; margin-bottom:30px; }
.contact-form-heading > span { font-size:.7rem; color:#666; padding-top:3px; }
.contact-paper fieldset { border:0; padding:0; margin:0 0 32px; min-width:0; }
.contact-paper legend { display:block; margin:0 0 20px; padding:0; font-size:1.3rem; font-weight:750; letter-spacing:-.04em; }
.contact-paper legend > span { color:#ff4b1b; font-size:.7rem; margin-right:12px; letter-spacing:0; }
.contact-services { display:flex; flex-wrap:wrap; gap:9px; }
.contact-services label { position:relative; cursor:pointer; }
.contact-services input { position:absolute; width:1px; height:1px; opacity:0; }
.contact-services label > span { display:flex; align-items:center; gap:18px; padding:12px 15px; border:1px solid #bbb; border-radius:30px; font-size:.76rem; transition:background .2s,color .2s; }
.contact-services b { font-size:13px; font-weight:500; }
.contact-services input:checked + span { background:#111; color:#fff; border-color:#111; }
.contact-services input:checked + span b { color:#ff4b1b; }
.contact-services input:focus-visible + span { outline:1px solid #ff4b1b; outline-offset:0px; }
.contact-services label:hover > span { border-color:#ff4b1b; }
.contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contact-fields label,.contact-label { display:block; font-size:.77rem; font-weight:650; }
.contact-label > span { color:#777; font-weight:400; }
.contact-paper input:not([type=radio]):not([type=checkbox]):not([type=hidden]),.contact-paper textarea,.contact-paper select { display:block; width:100%; min-width:0; border:0; border-bottom:1px solid #aaa; border-radius:0; background:transparent; color:#111; padding:14px 0; font:400 .9rem/1.5 inherit; font-family:inherit; font-size:.9rem; }
.contact-paper textarea { resize:vertical; min-height:145px; }
.contact-paper input::placeholder,.contact-paper textarea::placeholder { color:#777; opacity:1; }
.contact-paper [aria-invalid=true] { border-color:#b92c0b!important; }
.field-error { display:block; color:#a52b12; font-size:.72rem; font-weight:500; line-height:1.5; margin-top:5px; }
.field-error:empty { display:none; }
.message-footer { display:flex; justify-content:space-between; gap:15px; margin:8px 0 24px; }
[data-message-count] { color:#777; font-size:.67rem; margin-left:auto; white-space:nowrap; }
.contact-consent { display:flex; gap:12px; align-items:start; font-size:.75rem; line-height:1.5; }
.contact-consent input { margin-top:3px; width:17px; height:17px; flex-shrink:0; accent-color:#ff4b1b; }
.contact-privacy { font-size:.68rem; color:#666; }
.contact-privacy a { text-decoration:underline; }
.contact-submit { width:100%; margin-top:15px; }
.contact-submit:disabled { opacity:.65; cursor:wait; }
.contact-feedback { font-size:.86rem; margin:20px 0 0; }
.contact-feedback:empty { display:none; }
.contact-feedback.is-success { border-left:3px solid #ff4b1b; padding-left:15px; }
.contact-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
@media(max-width:1000px) {
 .about-hero-grid,.contact-layout { gap:35px; }
 .about-portrait > img,.portrait-placeholder { height:440px; }
 .about-skills-grid { grid-template-columns:1fr 1fr; }
 .contact-paper { padding:28px; }
 .contact-fields { grid-template-columns:1fr; }
}
@media(max-width:760px) {
 .studio-page h1,.contact-intro h1 { font-size:clamp(3.5rem,14vw,5.5rem); }
 .studio-page h2 { font-size:clamp(2.8rem,11vw,4.5rem); }
 .about-hero { padding-top:125px; }
 .about-hero-grid,.about-story-grid,.about-approach-grid,.contact-layout { grid-template-columns:1fr; gap:40px; }
 .about-portrait { margin:25px 15px 30px; }
 .about-skills-grid { gap:30px; }
 .about-skills h3 { font-size:1.3rem; }
 .about-skills p { font-size:.8rem; }
 .contact-layout { padding-top:125px; }
 .contact-intro { position:static; }
 .contact-next { margin-top:25px; }
 .contact-note { display:none; }
 .contact-paper { padding:25px 20px; }
}
@media(max-width:380px) { .about-skills-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .studio-page * { transition:none!important; } }
@media(forced-colors:active) { .studio-page .studio-outline { color:CanvasText; -webkit-text-stroke:0; } }
.about-career { background:#f5f3ee; color:#111; }
.career-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.career-heading { position:sticky; top:125px; }
.about-career .studio-outline { -webkit-text-stroke-color:#111; }
.career-heading > p:not(.studio-kicker) { color:#666; }
.career-cv { margin-top:20px; }
.career-cv svg { width:22px; height:22px; }
.career-cv > span { font-size:.65rem; }
.career-timeline { list-style:none; margin:0; padding:0; }
.career-timeline li { display:grid; grid-template-columns:60px 1fr; gap:25px; padding-bottom:35px; position:relative; }
.career-timeline li:not(:last-child)::before { content:''; position:absolute; top:60px; bottom:0; left:29px; width:1px; background:#bbb; }
.career-icon { width:60px; height:60px; display:grid; place-items:center; background:#111; color:#ff4b1b; border-radius:50%; }
.career-icon svg { width:28px; height:28px; }
.career-entry { border-bottom:1px solid #ccc; padding-bottom:30px; }
.career-entry .career-date { margin:0 0 12px; color:#b8320e; font-size:.73rem; font-weight:750; letter-spacing:.06em; }
.career-entry h3 { margin:0 0 15px; font-size:1.45rem; letter-spacing:-.035em; }
.career-entry p { color:#666; font-size:.92rem; margin:0; }
@media(max-width:760px) { .career-grid { grid-template-columns:1fr; gap:40px; } .career-heading { position:static; } .career-timeline li { grid-template-columns:48px 1fr; gap:20px; } .career-icon { width:48px; height:48px; } .career-timeline li:not(:last-child)::before { top:48px; left:23px; } }