.studio-a-propos{--about-panel:#141814;--about-paper:#EDE9DF;--about-paper-ink:#20251E} .studio-a-propos .about-hero{padding-bottom:64px} .studio-a-propos .about-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.75fr);gap:clamp(40px,6vw,88px);align-items:center} .studio-a-propos .about-hero-copy{min-width:0} .studio-a-propos .about-hero h1{max-width:780px;font-size:clamp(42px,4.4vw,66px);line-height:1.08} .studio-a-propos .about-hero h1 em{color:var(--or);max-width:720px} .studio-a-propos .about-hero-location{color:var(--muted);font-size:14px;margin-top:22px;line-height:1.7} .studio-a-propos .about-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px} .studio-a-propos .about-person{position:relative;max-width:370px;justify-self:end;background:var(--about-panel);padding:14px 14px 22px;border:1px solid var(--filet)} .studio-a-propos .about-person::before{content:"";position:absolute;top:-8px;right:24px;width:50px;height:6px;background:var(--corail)} .studio-a-propos .about-portrait{aspect-ratio:1/1.08;overflow:hidden;background:#29302A} .studio-a-propos .about-portrait picture,.studio-a-propos .about-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%} .studio-a-propos .about-person-copy{padding:18px 12px 0} .studio-a-propos .about-person-name{font-size:22px;line-height:1.25;color:var(--ink);font-weight:650} .studio-a-propos .about-person-copy>p:not(.about-person-name){font-size:13px;color:var(--muted);margin-top:7px} .studio-a-propos .about-person-copy>a{display:inline-flex;align-items:center;min-height:44px;color:var(--corail);font-size:18px;font-weight:600;margin-top:8px;text-decoration:underline;text-underline-offset:4px} .studio-a-propos .about-person-copy>span{display:block;font-size:13px;color:var(--muted)} .studio-a-propos .about-story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(36px,6vw,88px)} .studio-a-propos .about-story-grid h2{margin-top:18px;max-width:510px} .studio-a-propos .about-story-copy{max-width:650px} .studio-a-propos .about-story-copy>p+p{margin-top:18px} .studio-a-propos .about-story-copy .lien-texte{margin-top:20px} .studio-a-propos .about-section-heading{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:end} .studio-a-propos .about-section-heading h2{margin-top:18px} .studio-a-propos .about-section-heading>p{color:var(--muted);max-width:530px} .studio-a-propos .about-method{list-style:none;padding:0;margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px} .studio-a-propos .about-method li{position:relative;min-width:0;padding-top:20px;border-top:1px solid var(--filet)} .studio-a-propos .about-step{font-family:var(--serif);font-style:italic;font-size:38px;color:var(--or);line-height:1} .studio-a-propos .about-method h3{font-size:19px;margin-top:24px;min-height:52px} .studio-a-propos .about-method p{color:var(--muted);font-size:15px;margin-top:12px} .studio-a-propos .about-delivered{background:var(--about-panel)} .studio-a-propos .about-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:36px} .studio-a-propos .about-project{min-width:0;border:1px solid var(--filet);background:var(--bg)} .studio-a-propos .about-project-image{aspect-ratio:1.53;overflow:hidden;background:#202820;border-bottom:1px solid var(--filet)} .studio-a-propos .about-project-image picture,.studio-a-propos .about-project-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center} .studio-a-propos .about-project-copy{padding:24px 26px 26px} .studio-a-propos .about-project-copy h3{font-size:24px;margin-top:10px} .studio-a-propos .about-project-copy>p:not(.cartouche){font-size:15px;color:var(--muted);margin-top:12px} .studio-a-propos .about-project-copy .lien-texte{margin-top:18px} .studio-a-propos .about-portfolio-link{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin-top:24px;color:var(--muted);font-size:14px} .studio-a-propos .about-portfolio-link a{display:inline-flex;align-items:center;min-height:44px;gap:8px;color:var(--corail);text-decoration:underline;text-underline-offset:4px} .studio-a-propos .about-nabyte .lien-texte{color:var(--corail)} .studio-a-propos .about-follow-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.8fr);gap:70px;align-items:start} .studio-a-propos .about-follow h2{margin-top:18px} .studio-a-propos .about-follow-grid>div>p:not(.cartouche){max-width:640px;color:var(--muted);margin-top:22px} .studio-a-propos .about-follow .lien-texte{margin-top:20px} .studio-a-propos .about-contact{padding:30px;background:var(--about-panel);border:1px solid var(--filet);border-top:3px solid var(--corail)} .studio-a-propos .about-contact h3{margin-top:14px;font-size:23px} .studio-a-propos .about-contact>p:not(.cartouche){color:var(--muted);font-size:15px;margin-top:16px} .studio-a-propos .about-contact>a{display:flex;align-items:center;min-height:44px;color:var(--corail);text-decoration:underline;text-underline-offset:4px;font-size:15px;overflow-wrap:anywhere} .studio-a-propos .about-contact>a:first-of-type{margin-top:20px} .studio-a-propos .about-contact>small{display:block;color:var(--muted);font-size:13px;margin-top:4px} .studio-a-propos :is(.about-person-copy,.about-contact,.about-portfolio-link) a:hover{color:var(--ink)} .studio-a-propos :is(.about-person-copy,.about-contact,.about-portfolio-link) a:focus-visible{outline:2px solid var(--corail);outline-offset:4px} @media(min-width:681px) and (max-width:1024px){ .studio-a-propos .about-hero-grid{grid-template-columns:minmax(0,1fr) 250px;gap:32px;align-items:start} .studio-a-propos .about-person{max-width:250px} .studio-a-propos .about-person-copy{padding-inline:4px} .studio-a-propos .about-hero h1{font-size:42px} .studio-a-propos .about-story-grid{grid-template-columns:1fr;gap:28px} .studio-a-propos .about-story-copy{max-width:850px;columns:2;column-gap:32px} .studio-a-propos .about-story-copy>p{break-inside:avoid} .studio-a-propos .about-section-heading{grid-template-columns:1fr;gap:22px} .studio-a-propos .about-section-heading>p{max-width:750px} .studio-a-propos .about-method{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px} .studio-a-propos .about-method h3{min-height:0;margin-top:16px} .studio-a-propos .about-follow-grid{grid-template-columns:1fr;gap:32px} .studio-a-propos .about-contact{display:grid;grid-template-columns:1fr 1fr;gap:0 26px} .studio-a-propos .about-contact .cartouche,.studio-a-propos .about-contact h3,.studio-a-propos .about-contact>p:not(.cartouche){grid-column:1;grid-row:auto} .studio-a-propos .about-contact>a:first-of-type{grid-column:2;grid-row:1/3;margin-top:0;align-self:start} .studio-a-propos .about-contact>a:nth-of-type(2){grid-column:2;grid-row:3;align-self:start} .studio-a-propos .about-contact>small{grid-column:2;grid-row:4} } @media(max-width:680px){ .studio-a-propos .section{padding-block:48px} .studio-a-propos .about-hero{padding-bottom:36px} .studio-a-propos .about-hero-grid{display:flex;flex-direction:column;gap:28px;align-items:stretch} .studio-a-propos .about-hero h1{font-size:clamp(34px,8.8vw,46px);line-height:1.1;margin-top:16px} .studio-a-propos .about-hero .interne-lead{font-size:16px;margin-top:20px} .studio-a-propos .about-hero-location{font-size:13px;margin-top:16px} .studio-a-propos .about-hero-actions{margin-top:14px;gap:0} .studio-a-propos .about-hero-actions .bouton,.studio-a-propos .interne-cta .bouton{display:none} .studio-a-propos .about-person{max-width:none;width:100%;display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;padding:14px;justify-self:auto;align-items:center} .studio-a-propos .about-person::before{width:32px;height:4px;top:-4px;right:18px} .studio-a-propos .about-portrait{aspect-ratio:.85;width:112px;height:132px} .studio-a-propos .about-person-copy{padding:0} .studio-a-propos .about-person-name{font-size:18px} .studio-a-propos .about-person-copy>p:not(.about-person-name){font-size:12px;line-height:1.45} .studio-a-propos .about-person-copy>a{font-size:16px;margin-top:2px} .studio-a-propos .about-person-copy>span{font-size:12px;line-height:1.4} .studio-a-propos .about-story-grid,.studio-a-propos .about-section-heading,.studio-a-propos .about-follow-grid{grid-template-columns:1fr;gap:26px} .studio-a-propos .about-story-grid h2,.studio-a-propos .about-section-heading h2,.studio-a-propos .about-follow h2{font-size:30px;margin-top:14px} .studio-a-propos .about-story-copy,.studio-a-propos .about-section-heading>p{font-size:16px} .studio-a-propos .about-method{grid-template-columns:1fr;margin-top:26px;gap:0} .studio-a-propos .about-method li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;padding:22px 0} .studio-a-propos .about-method li:last-child{padding-bottom:0} .studio-a-propos .about-step{font-size:29px;margin-top:3px} .studio-a-propos .about-method h3{font-size:19px;margin-top:0;min-height:0} .studio-a-propos .about-method p{margin-top:8px;font-size:15px} .studio-a-propos .about-projects{grid-template-columns:1fr;gap:22px;margin-top:26px} .studio-a-propos .about-project-copy{padding:20px} .studio-a-propos .about-project-copy h3{font-size:23px} .studio-a-propos .about-project-image{aspect-ratio:1.65} .studio-a-propos .about-portfolio-link{display:block;font-size:14px;line-height:1.6} .studio-a-propos .about-contact{padding:22px} .studio-a-propos .about-contact>a{font-size:14px} .studio-a-propos .about-follow-grid>div>p:not(.cartouche){font-size:16px;margin-top:18px} }