/* Polices hébergées sur le site (aucun appel à Google) — licences SIL Open Font License */
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin.woff2) format("woff2");font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Permanent Marker";src:url(fonts/permanent-marker-latin.woff2) format("woff2");font-weight:400;font-display:swap}
body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: a light-grey sheet like the Instagram posts; one view at a time (home split, studio, pezzi, à propos, contact, project) */
/* Single light look on purpose: AMO's identity lives on its pale grey paper. */
:root{
  color-scheme:light;
  --paper:#eeeeeb; --sheet:#f7f7f5; --ink:#14173f; --muted:#5f6283; --line:#d6d6d2;
  --navy:#1c2a8e; --marker:#2b30cf; --orange:#ff7a30; --pink:#f3a3c7;
  --salmon:#e2825c; --bordeaux:#6b1320; --cream:#ecebc6; --sage:#9ea98a;
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --logo:"Fredoka","Arial Rounded MT Bold","Helvetica Rounded",sans-serif;
  --hand:"Permanent Marker","Marker Felt","Comic Sans MS",cursive;
}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.55;font-variation-settings:"wdth" 100}
.in{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1}
p{margin:0;max-width:64ch}
a{color:inherit}
:focus-visible{outline:2px solid var(--marker);outline-offset:3px}
.caps{font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.01em;line-height:1.05}
.spaced{text-transform:uppercase;letter-spacing:.42em;font-size:11px;font-weight:500}
.hand{font-family:var(--hand);color:var(--marker);display:inline-block;transform:rotate(-8deg);font-weight:400}
.wobble{filter:url(#wobble)}
.todo{background:color-mix(in srgb,var(--marker) 14%,transparent);border-radius:3px;padding:0 4px;font-style:italic}
.muted{color:var(--muted)}

/* header, Yzé-like grid menu in condensed caps */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper)}
.top .in{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-block:18px}
.logo{display:inline-flex;text-decoration:none;color:var(--navy)}
.logo svg{width:112px;height:auto}
.menu{display:grid;grid-template-columns:repeat(3,auto);gap:4px 56px;font-size:12px}
.menu a{text-decoration:none}
.menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.menu{grid-template-columns:repeat(2,auto);gap:4px 28px}.logo svg{width:88px}}

/* signature blurred blobs */
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.blobs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.9}

/* home */
/* home: two full-bleed doors; the one under the pointer widens, the other fades back */
.split{display:flex;height:clamp(460px,calc(100vh - 130px),880px)}
.door{position:relative;flex:1 1 0;overflow:hidden;background:var(--sheet);display:grid;place-items:center;align-content:center;gap:14px;text-decoration:none;isolation:isolate;transition:flex-grow .8s cubic-bezier(.2,.8,.2,1),opacity .6s ease,filter .6s ease}
.door+.door{border-left:1px solid var(--line)}
.door .word{position:relative;font-size:clamp(44px,8vw,120px);color:var(--ink);transition:transform .8s cubic-bezier(.2,.8,.2,1),color .4s}
.door .disc{position:relative;font-size:12px;letter-spacing:.3em;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.door .blobs i{transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.door .sub{position:absolute;left:max(20px,env(safe-area-inset-left,0px));right:max(20px,env(safe-area-inset-right,0px));bottom:18px;display:flex;justify-content:space-between;align-items:flex-end;font-size:13px;color:var(--ink)}
@media (hover:hover){
  .split:hover .door,.split:focus-within .door{opacity:.7;filter:saturate(.4)}
  .split .door:hover,.split .door:focus-visible{flex-grow:1.8;opacity:1;filter:none}
  .door:hover .word,.door:focus-visible .word{transform:scale(1.08);color:var(--navy)}
  .door:hover .disc,.door:focus-visible .disc{opacity:1;transform:none}
  .door:hover .blobs i,.door:focus-visible .blobs i{transform:scale(1.3)}
}
@media (hover:none){.door .disc{opacity:1;transform:none}}
@media (max-width:720px){.split{flex-direction:column;height:auto}.door{min-height:320px}.door+.door{border-left:0;border-top:1px solid var(--line)}}
@media (prefers-reduced-motion:reduce){.door,.door *{transition:none!important}}
.intro{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;padding-block:40px 72px;align-items:end}
.intro p{font-size:20px}
@media (max-width:820px){.intro{grid-template-columns:1fr}}

/* page titles */
.ptitle{padding-block:36px 28px}
.ptitle h1{font-size:clamp(56px,11vw,150px)}

/* studio list */
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;padding-bottom:80px}
@media (max-width:720px){.projects{grid-template-columns:1fr}}
.card{display:grid;gap:10px;text-decoration:none}
.visual{position:relative;overflow:hidden;aspect-ratio:4/5;max-width:100%;background:var(--sheet);border-radius:3px;display:grid;place-items:center;isolation:isolate}
.card .visual{aspect-ratio:1/1}
.visual .tag{position:absolute;left:14px;bottom:12px;font-size:12px;background:var(--paper);padding:3px 9px;border-radius:999px}
.corner{position:absolute;right:16px;bottom:12px;display:grid;justify-items:center;gap:2px;color:var(--navy);font:700 11px var(--logo);letter-spacing:.06em}
.corner svg{width:26px;height:26px}
.meta{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.meta b,.mname{margin:0;font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:15px;line-height:1.3}

/* project titles, one treatment per project like the posts */
.pname{position:relative;text-align:center;display:grid;justify-items:center}
.pname .hand{font-size:clamp(20px,3vw,34px);margin-bottom:-.35em;justify-self:start;margin-left:8%}
.pname .n{font-size:clamp(54px,10vw,128px)}
/* title colours darkened from the Instagram posts so they keep at least 3:1 contrast on the light visuals */
.t-nima .n{font-weight:900;font-variation-settings:"wdth" 110;color:#b4502f;letter-spacing:-.02em}
.t-dina .n{font-weight:900;font-variation-settings:"wdth" 62;color:var(--bordeaux);font-size:clamp(80px,15vw,190px);transform:scaleY(1.15)}
.t-dina .hand{color:var(--bordeaux)}
.t-desvosges .n{font-weight:900;font-variation-settings:"wdth" 90;color:var(--navy);text-shadow:3px 3px 0 var(--cream);font-size:clamp(40px,7vw,96px)}
.t-solacea .n{font-weight:900;font-variation-settings:"wdth" 95;color:var(--marker);font-size:clamp(44px,8vw,104px)}
.card .pname .n{font-size:clamp(44px,7vw,92px)}
.card .t-dina .n{font-size:clamp(64px,10vw,130px)}

/* project page */
.proj{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;padding-bottom:40px}
.proj .txt{display:grid;gap:18px;align-content:start;min-width:0}
@media (max-width:860px){.proj{grid-template-columns:1fr}}
.cartouche{border:1.5px solid var(--ink);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));font-size:14px}
.cartouche div{padding:8px 12px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);display:grid;gap:2px;min-width:0}
.cartouche div:nth-child(2n){border-right:0}
.cartouche div:nth-last-child(-n+2){border-bottom:0}
.cartouche{margin:0}
.cartouche dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cartouche dd{margin:0}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:64px}
.gallery .visual{aspect-ratio:3/4}
@media (max-width:640px){.gallery{grid-template-columns:1fr 1fr}}
.back{display:inline-block;font-size:13px;margin-bottom:8px}
.next{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-block:20px 72px;font-size:13px}

/* pezzi */
.pezzi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;padding-bottom:80px}
@media (max-width:620px){.pezzi{grid-template-columns:1fr}}

/* à propos */
.about{display:grid;gap:72px;padding-bottom:88px}
.story{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:820px){.story{grid-template-columns:1fr}}
.story h2,.love h2,.team h2{font-size:clamp(26px,3.6vw,42px)}
.story .lead{font-size:clamp(22px,2.6vw,30px);line-height:1.3;font-weight:500;font-variation-settings:"wdth" 92}
.story .lead em{font-style:normal;color:var(--navy);font-family:var(--logo)}
.love{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px}
@media (max-width:820px){.love{grid-template-columns:1fr}}
.love .cols{display:grid;gap:16px}
.quote{text-align:center;display:grid;gap:14px;justify-items:center;padding-block:24px}
.quote{margin:0}
.quote blockquote{margin:0;font-family:var(--logo);font-size:clamp(34px,6vw,72px);color:var(--navy);line-height:1.05}
.quote figcaption{font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.team .people{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:32px}
@media (max-width:760px){.team .people{grid-template-columns:1fr}}
.person{display:grid;gap:12px}
.person .visual{aspect-ratio:4/5}
.person h3{font-size:22px}

/* contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;padding-bottom:88px;align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.contact h1{font-size:clamp(44px,6.6vw,88px)}
form{display:grid;gap:18px}
fieldset{border:0;margin:0;padding:0;display:grid;gap:10px}
legend{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;inset:0}
.chips span{display:inline-block;border:1.5px solid var(--ink);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;font-variation-settings:"wdth" 80;text-transform:uppercase;cursor:pointer}
.chips input:checked+span{background:var(--ink);color:var(--paper)}
.chips input:focus-visible+span{outline:2px solid var(--marker);outline-offset:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.f{display:grid;gap:4px;min-width:0}
.f span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.f input,.f select,.f textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--ink);padding:8px 0;width:100%;box-sizing:border-box;border-radius:0}
.f textarea{min-height:110px;resize:vertical}
.send{justify-self:start;background:var(--navy);color:#fff;border:0;border-radius:999px;padding:12px 26px;font:800 14px var(--ui);font-variation-settings:"wdth" 80;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.ok{background:var(--sheet);border-radius:6px;padding:12px 14px}
.direct{display:grid;gap:8px;margin-top:28px;font-size:15px}
.direct code{font:inherit;user-select:all}

footer{border-top:1px solid var(--line)}
footer .in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:22px;font-size:12px}
[data-view]{display:none}
[data-view].on{display:block}

/* formulaire et pages légales */
.trap{position:absolute;left:-10000px;width:1px;height:1px;opacity:0}
.consent{font-size:13px;color:var(--muted)}
.send:disabled{opacity:.6;cursor:default}
.legal{display:grid;gap:14px;padding-bottom:88px;max-width:760px}
.legal .ptitle h1{font-size:clamp(44px,7vw,96px)}
.legal h2{font-size:20px;font-weight:800;font-variation-settings:"wdth" 80;text-transform:uppercase;margin-top:18px}
.legal-links{display:flex;flex-wrap:wrap;gap:18px}

/* accessibilité */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:20;background:var(--navy);color:#fff;padding:10px 16px;border-radius:6px;font-weight:700}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px))}
h1:focus{outline:none}
/* light behind every title: the coloured blobs stay soft so text keeps its contrast */
.visual .blobs i{opacity:.35!important}
.projects{list-style:none;margin:0;padding:0 0 80px}
.projects li{min-width:0}
.pz{position:relative}
.pz-wood{font-size:clamp(30px,4.4vw,56px);color:var(--bordeaux)}
.pz-flower{font-family:var(--logo);font-weight:700;font-size:clamp(40px,6vw,76px);color:#b4502f;text-shadow:3px 3px 0 var(--cream)}
.pz-art{font-size:clamp(48px,7vw,92px);color:var(--ink)}
.slogan{display:grid;justify-items:end;gap:6px}
.slogan .hand{font-size:clamp(24px,3vw,36px);transform:rotate(-5deg)}
.slogan .fr{font-size:13px;color:var(--muted)}
.pt{font-size:clamp(36px,5vw,64px)}
.req-note{font-size:13px}
.f b{color:var(--bordeaux)}
.f [aria-invalid="true"]{border-bottom-color:var(--bordeaux);border-bottom-width:2.5px}
::placeholder{color:var(--muted);opacity:1}
.legal ul{margin:0;padding-left:20px;display:grid;gap:6px;max-width:64ch}
.tbl{overflow-x:auto}
.tbl table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl th{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* images */
.logo img{width:112px;height:auto;display:block}
@media (max-width:640px){.logo img{width:88px}}
.visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .visual{aspect-ratio:4/5}
.person .visual{aspect-ratio:1/1}
.gallery{list-style:none;margin:0;padding:0 0 64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:3px;background:var(--sheet)}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* portraits are small source files: keep them at a size they stay sharp */
.person .visual{aspect-ratio:4/5;max-width:340px}
.person .visual img{object-position:50% 25%}
/* Scoperte: one wide card closing the Pezzi grid */
.card.wide{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.wide-txt{display:grid;gap:14px;align-content:center}
.disc-link{font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:620px){.card.wide{grid-template-columns:1fr}}
.sel-title{font-size:clamp(24px,3vw,36px);padding-bottom:20px}
.boards figure{margin:0;display:grid;gap:8px}
.boards figcaption{font-size:13px}
/* images shown whole: square posts and real photos keep their own proportions */
.gallery.natural{align-items:start}
.gallery.natural img{aspect-ratio:auto;height:auto}
/* shortcut: images are capped near their source size (500 px for the N posts) so none is stretched; widen again once HD exports arrive */
.projects,.pezzi{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.projects,.pezzi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.projects,.pezzi{grid-template-columns:1fr}}
.meta{flex-wrap:wrap;gap:2px 12px}
.proj{grid-template-columns:minmax(0,500px) minmax(0,1fr)}
@media (max-width:860px){.proj{grid-template-columns:1fr}.proj .visual{max-width:500px}}
/* main images and portraits keep their own proportions: a square file in a 4:5 frame would be enlarged to fill it */
.proj .visual{aspect-ratio:auto;display:block}
.proj .visual img{position:static;height:auto}
.person .visual{aspect-ratio:1/1}
/* home photo test: remove the "photos" class on .split to go back to the colour blobs */
.door-img{display:none}
.split.photos .door-img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.split.photos .blobs{display:none}
.split.photos .door::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(10,12,40,.58),rgba(10,12,40,.58) 70%,rgba(10,12,40,.72))}
.split.photos .door .word,.split.photos .door .disc,.split.photos .door .sub,.split.photos .door .corner{color:#fff}
.split.photos .door:hover .word,.split.photos .door:focus-visible .word{color:#fff}
.split.photos .door:hover .door-img,.split.photos .door:focus-visible .door-img{transform:scale(1.05)}
.split.photos .door .corner{display:none} /* the photos already carry the AMO corner mark */

/* home: full screen and dark like the photos, header floating over them (other pages keep the light paper) */
body.home{--home:#0d0f24;background:var(--home);color:#eef0fb}
body.home::before{background:var(--home)}
body.home .top{position:absolute;top:env(safe-area-inset-top,0px);left:0;right:0;background:transparent}
body.home .logo img{filter:brightness(0) invert(1)}
body.home .menu a{color:#fff}
body.home .split{height:100vh;height:100svh}
body.home .door{background:var(--home)}
body.home .door+.door{border-color:rgba(255,255,255,.14)}
body.home .intro .muted,body.home .slogan .fr{color:#b9bcd8}
body.home .slogan .hand{color:var(--pink)}
body.home footer{border-color:rgba(255,255,255,.14)}
body.home footer a,body.home footer span{color:#d6d8ec}
@media (max-width:720px){body.home .split{height:auto}body.home .door{min-height:50svh}}

/* brand blue: the exact ink of the AMO logo, used for every title, name, link and the menu */
:root{--navy:#001478}
h1,h2,h3,.mname,.meta b,.menu a,.back,.next a,.legal-links a,.disc-link{color:var(--navy)}
body.home h1,body.home .menu a,body.home footer a{color:#fff}

/* home: the line under STUDIO / PEZZI says plainly what each side is */
.lead-door{position:relative;text-align:center;font-size:clamp(16px,1.5vw,21px);line-height:1.35;font-weight:500;color:var(--ink);max-width:22em;padding-inline:16px}
.split.photos .lead-door{color:#fff}

/* cards: name on its own line, the kind of work right under it, so every card lines up */
.card .meta{flex-direction:column;align-items:flex-start;gap:2px}

/* team: name, role and first paragraph start on the same line for both founders */
.team .people{grid-template-rows:auto auto auto auto auto}
.team .person{display:grid;grid-row:span 5;grid-template-rows:subgrid}
.card{align-content:start} /* a taller neighbour must not spread this card's rows apart */

/* Pezzi: image, name+kind and description sit on shared rows, so every description starts on the same line */
.pezzi .card:not(.wide){grid-row:span 3;grid-template-rows:subgrid;row-gap:10px}
.intro-txt{display:grid;gap:12px;margin-top:14px;max-width:64ch}
.client-quote{margin:0;border-left:3px solid var(--navy);padding-left:16px;display:grid;gap:6px}
.client-quote p{font-size:18px;line-height:1.45;font-style:italic}
.client-quote footer{font-size:13px;color:var(--muted)}

/* Nima, the finished place: three portraits in identical frames, then the wide bar photo large next to the neon */
.gallery.livre{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery.livre img{aspect-ratio:3/4}
.gallery.livre li.big{grid-column:span 2}
.gallery.livre li.big img{aspect-ratio:1024/674}
.gallery.livre li.side img{height:100%;aspect-ratio:auto}
@media (max-width:640px){.gallery.livre{grid-template-columns:1fr}.gallery.livre li.big{grid-column:auto}.gallery.livre li.side img{height:auto;aspect-ratio:3/4}}
.proj .visual img{display:block} /* an inline image leaves a light text-line gap under it */
.proj .visual{align-self:start;background:none} /* the frame hugs the image instead of stretching to the text column */
.story{grid-template-columns:minmax(0,820px)} /* text only: the founders' portraits are further down */