/* Métallerie Clément — feuille de style unique (mobile d'abord) */
@font-face{font-family:"Big Shoulders Display";font-weight:600;font-display:swap;src:url(../fonts/big-shoulders-display-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url(../fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-weight:400;font-display:swap;src:url(../fonts/public-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-weight:600;font-display:swap;src:url(../fonts/public-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Josefin Sans";font-weight:400;font-display:swap;src:url(../fonts/josefin-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Mrs Saint Delafield";font-weight:400;font-display:swap;src:url(../fonts/mrs-saint-delafield-latin-400-normal.woff2) format("woff2")}

:root{
  --bg:#ECEDEE; --surface:#F7F7F6; --ink:#141719; --text:#2C3236; --muted:#4E565C;
  --line:#C9CDD0; --chip:#9AA2A8; --steel:#1C2227; --steel-text:#B7BEC3; --brass:#9C7A45; --brass-light:#C9A86E; --photo:#2A3238;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --wrap:1240px; --gutter:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body)}
img{max-width:100%;display:block}
a{color:var(--ink)}
a:hover{color:var(--brass)}
:focus-visible{outline:2px solid #2F5D8A;outline-offset:2px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.section{padding-block:64px}
.section--surface{background:var(--surface);border-block:1px solid var(--line)}
.section--steel{background:var(--steel);color:#F2F2F0}
.section--ink{background:var(--ink);color:#F2F2F0}
.stack{display:flex;flex-direction:column;gap:20px}
.eyebrow{font:400 13px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.h1{font:800 clamp(52px,9vw,100px)/.92 var(--display);text-transform:uppercase}
.h2{font:800 clamp(38px,5.5vw,56px)/1 var(--display);text-transform:uppercase}
.h3{font:800 28px/1 var(--display);text-transform:uppercase}
.lead{font-size:19px;color:var(--text);max-width:52ch}
.muted{color:var(--text)}
.mono{font-family:var(--mono);font-size:14px}
.caption{font:400 12px/1.4 var(--mono);color:var(--muted)}
.section--steel .muted,.section--ink .muted{color:var(--steel-text)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 24px;background:var(--ink);color:#F2F2F0;font:600 15px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:#2C3236;color:#F2F2F0}
.btn--light{background:#F2F2F0;color:var(--ink)}
.btn--light:hover{background:#FFFFFF;color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* En-tête */
.site-header{background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:5}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;text-decoration:none;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo__word{font:400 19px/1 "Josefin Sans","Century Gothic",sans-serif;letter-spacing:.16em}
.logo__sign{font:400 38px/1 "Mrs Saint Delafield","Brush Script MT",cursive;margin:-6px 0 0 34px}
.menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--chip);background:transparent;font:600 14px var(--body);color:var(--ink);cursor:pointer}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:8px max(var(--gutter),env(safe-area-inset-right)) 20px max(var(--gutter),env(safe-area-inset-left))}
.nav.is-open{display:flex;flex-direction:column}
.nav a{padding:12px 0;text-decoration:none;font-size:17px;border-bottom:1px solid var(--line)}
.nav a[aria-current="page"]{font-weight:600}
.nav .btn{margin-top:16px;border:0}

/* Héro */
.hero{display:grid;gap:40px;padding-block:48px 64px;align-items:end}
.photo{position:relative;overflow:hidden;background:var(--photo);aspect-ratio:4/5}
.photo img{width:100%;height:100%;object-fit:cover}
.photo--square{aspect-ratio:1/1}
.photo--wide{aspect-ratio:21/9}
.figure{margin:0;display:flex;flex-direction:column;gap:8px}

/* Grilles */
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px}
.card{display:flex;flex-direction:column;gap:12px;text-decoration:none}
.card .h3{color:var(--ink)}
.pro-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:24px;align-items:center;padding:20px;background:var(--surface);border:1px solid var(--line);text-decoration:none}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px}

/* Listes */
.rows{display:flex;flex-direction:column}
.rows>div{padding:18px 0;border-top:1px solid var(--line)}
.rows>div:last-child{border-bottom:1px solid var(--line)}
.rows strong{font-weight:600}
.rows p{margin-top:4px;font-size:15px;color:var(--text)}
.spec{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.spec:last-child{border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--chip);padding:7px 13px;font-size:14px}
.chip--strong{border-color:var(--ink);font-family:var(--mono)}
.steps{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.step{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--brass);padding-top:18px}
.step__n{font:400 13px var(--mono);color:var(--brass-light)}
.step__t{font:600 24px/1.1 var(--display);text-transform:uppercase}
.crumbs{font:400 13px var(--mono);color:var(--muted)}
.crumbs a{color:var(--muted)}

/* Formulaire */
.form-card{background:var(--surface);border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:22px;min-width:0}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{min-height:44px;padding:10px 16px;border:1px solid var(--chip);background:transparent;font:600 14px var(--body);color:var(--ink);cursor:pointer}
.tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#F2F2F0}
.fields{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));border:0;padding:0;margin:0;min-width:0}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
label{font-size:14px;font-weight:600}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:#FFFFFF;border:1px solid var(--chip);border-radius:0;padding:12px 14px;width:100%}
textarea{min-height:120px;resize:vertical}
.drop{border:1px dashed var(--chip);background:#FFFFFF;padding:14px}
.drop input{border:0;padding:0}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400}
.consent input{width:auto;margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}

/* Pied de page */
.site-footer{background:var(--ink);color:var(--steel-text);border-top:1px solid #2E363C;font-size:14px}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-block:28px}
.site-footer a{color:var(--steel-text)}
.footer-links{display:flex;flex-wrap:wrap;gap:20px}

/* Desktop */
@media (min-width:900px){
  :root{--gutter:32px}
  .section{padding-block:88px}
  .hero{grid-template-columns:1fr 1fr;gap:56px;padding-block:72px 88px}
  .menu-btn{display:none}
  .nav{display:flex;position:static;flex-direction:row;align-items:center;gap:26px;padding:0;border:0;background:none}
  .nav a{padding:0;border:0;font-size:15px}
  .nav .btn{margin:0;font-size:14px;min-height:44px;padding:12px 20px}
  .logo__word{font-size:24px}
  .logo__sign{font-size:46px;margin:-8px 0 0 44px}
  .form-card{padding:32px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}