/* Pages articles (modèles 3D, visuels) : identité de la page d'accueil « Synthèse LAZ modernisée ».
   Encre, papier, écru et anthracite ; Space Grotesk et DM Sans ; bouton principal écru sur fond sombre, encre sur fond clair. */
:root{
  --ink:#16171a;--atelier:#1c1d21;--panel:#232429;--line-dark:#34363c;
  --paper:#f3f3f1;--stone:#dddcd7;--line-light:#d5d4cf;--surface:#fbfbfa;
  --ecru:#dcd6c8;--ecru-hover:#e9e4d8;
  --text-on-dark:#f1f0ec;--muted-on-dark:#b8bac0;--muted-on-light:#55575e;
  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;--body:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  --gutter:clamp(20px,5vw,64px);--ease-out:cubic-bezier(.23,1,.32,1)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
::selection{background:var(--ecru);color:var(--ink)}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.035em;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--gutter)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.top,.hero,.cta,.footer{--muted:var(--muted-on-dark)}
.top :focus-visible,.hero :focus-visible,.cta :focus-visible,.footer :focus-visible,.art :focus-visible{outline-color:var(--ecru)}

/* En-tête commun avec l'accueil */
.top{background:var(--ink);color:var(--text-on-dark)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{width:104px}
.nav-links{display:flex;gap:32px;align-items:center;font-size:15px}
.nav-links a:not(.button){text-decoration:none;color:var(--muted-on-dark);transition:color 150ms ease}
.nav-links a[aria-current="page"]{color:var(--text-on-dark)}

/* Boutons et liens */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;white-space:nowrap;background:var(--ink);color:var(--paper);transition:transform 160ms var(--ease-out),background-color 150ms ease,border-color 150ms ease}
.button:active{transform:scale(.97)}
.top .button,.hero .button,.cta .button{background:var(--ecru);color:var(--ink)}
.nav .button{min-height:42px;padding:0 18px;font-size:14px;background:none;color:var(--text-on-dark);border-color:rgba(241,240,236,.45)}
.plain{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid rgba(241,240,236,.45);font-weight:600;font-size:15px;text-decoration:none;transition:transform 160ms var(--ease-out),border-color 150ms ease}
.plain:active{transform:scale(.97)}
.link{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .nav-links a:not(.button):hover{color:var(--text-on-dark)}
  .button:hover{background:#2a2b30}
  .top .button:hover,.nav .button:hover{border-color:var(--text-on-dark);background:none}
  .hero .button:hover,.cta .button:hover{background:var(--ecru-hover)}
  .plain:hover{border-color:var(--text-on-dark)}
}

/* Premier écran */
.hero{background:var(--ink);color:var(--text-on-dark);padding-block:48px 72px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 8px;font-size:14px;color:var(--muted-on-dark);margin-bottom:28px}
.crumbs a{text-underline-offset:3px}
.crumbs [aria-current]{color:var(--text-on-dark)}
.hero h1{font-size:clamp(40px,5.2vw,72px);line-height:1.02;max-width:17ch}
.lead{font-size:18px;color:var(--muted-on-dark);max-width:58ch;margin:24px 0 32px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Sections */
.section{padding-block:72px}
.section.white{background:var(--surface)}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.grid.flip .art{order:2}
h2{font-size:clamp(30px,3.4vw,46px);line-height:1.06;margin-bottom:20px}
h3{font-size:22px;line-height:1.15;margin-bottom:8px}
.copy p{color:var(--muted-on-light);margin-bottom:16px;max-width:60ch}
.copy .button{margin-top:8px}
.copy .next{margin-top:24px}
.copy .soon-tag{display:inline-flex;align-items:center;gap:8px;margin:-4px 0 18px;padding:5px 12px;border:1px solid var(--line-light);border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);background:var(--paper)}
.copy .soon-tag::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid currentColor}
.bullets{list-style:none;margin:20px 0 0;padding:0}
.bullets li{padding:12px 0;border-top:1px solid var(--line-light);color:var(--muted-on-light)}
.bullets strong{color:var(--ink);font-weight:600}

/* Illustrations : fond sombre de la démo, qui convient aux vêtements 3D détourés. */
.art{margin:0;background:radial-gradient(circle at 50% 40%,#3a3b40 0%,#26272c 58%,#1c1d21 100%);border-radius:16px;overflow:hidden;color:var(--muted-on-dark)}
.art img{width:100%;height:clamp(300px,34vw,440px);object-fit:cover}
.art.contain img{object-fit:contain;padding:28px;filter:drop-shadow(2px 12px 16px rgba(0,0,0,.35))}
.art figcaption{font-size:14px;line-height:1.4;padding:0 18px 16px}

/* Étapes */
.band{padding-block:72px;background:var(--paper);border-top:1px solid var(--line-light)}
.band p{max-width:62ch;color:var(--muted-on-light)}
.triptych{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;counter-reset:etape}
.step{position:relative;padding-top:52px;border-top:1px solid var(--ink);counter-increment:etape}
.step::before{content:counter(etape);position:absolute;top:-16px;left:0;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid var(--ink);font:600 14px/1 var(--display);font-variant-numeric:tabular-nums}
.step small{display:block;font-size:14px;color:var(--muted-on-light);margin-bottom:6px}
.step p{margin:0;color:var(--muted-on-light)}
.usages .step{padding-top:20px}
.usages .step::before{content:none}

/* Appel à l'action et pied de page */
.cta{background:var(--ink);color:var(--text-on-dark);padding-block:72px}
.cta p{color:var(--muted-on-dark);max-width:56ch;margin:0 0 28px}
.footer{background:var(--ink);color:var(--muted-on-dark);padding-block:28px 32px}
.footer-inner{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;font-size:14px;border-top:1px solid var(--line-dark);padding-top:28px}
.footer-inner img{width:84px}
.footer-inner > a:first-child{margin-right:auto}
.footer a{text-underline-offset:3px}

@media (max-width:900px){
  body{font-size:16px}
  .nav{height:64px}.logo img{width:92px}
  .nav-links a:not(.button){display:none}
  .hero{padding-block:32px 48px}
  .hero h1{font-size:40px}
  .lead{font-size:16px;margin:16px 0 24px}
  .hero-actions{display:grid}
  .section,.band,.cta{padding-block:48px}
  .grid{grid-template-columns:1fr}
  .grid.flip .art{order:0}
  .art img{height:280px}
  .triptych{grid-template-columns:1fr;gap:28px;margin-top:28px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .button,.plain{transition:none}
  .button:active,.plain:active{transform:none}
}