/* ============================================================
   Socle Pixelbrute — polices, jetons, base, en-tête, pied.
   FICHIER GÉNÉRÉ — ne pas éditer à la main.
   Source : public/artifact-index.html · Régénérer : node scripts/build-socle.mjs
   ============================================================ */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/artifact/fonts2/pb-sans.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300;font-display:swap;src:url(/artifact/fonts2/pb-serif-300.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(/artifact/fonts2/pb-serif-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/artifact/fonts2/pb-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/artifact/fonts2/pb-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#f5f4f2;
  --paper:#faf9f7;
  --ink:#1b1a18;
  --ink-2:#56534e;
  --subtle:#8a857d;
  --line:#d8d5d0;
  --line-soft:#e6e3de;

  --accent:#4a5c4f;
  --accent-hi:#5c7263;
  --accent-soft:#e7ebe6;

  --dark:#1b1a18;
  --dark-fg:#f0eeea;
  --dark-2:#262521;
  --dark-3:#3a3833;
  --dark-line:#39362f;
  --dark-muted:#8f8a81;

  --font-sans:'Archivo',Helvetica,Arial,sans-serif;
  --font-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --maxw:1240px;
  --pad:clamp(20px,4vw,40px);
  --sec:clamp(72px,8vw,124px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.section{padding:var(--sec) 0}
.section.dark{background:var(--dark);color:var(--dark-fg)}

/* ---------- Typo ---------- */
.display,h1,h2{font-family:var(--font-serif);font-weight:300;letter-spacing:-.02em;text-wrap:pretty;margin:0}
h1{font-size:clamp(38px,5.2vw,74px);line-height:1.02}
h2{font-size:clamp(30px,3.6vw,50px);line-height:1.08}
h3{font-family:var(--font-sans);font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0}
.overline{
  font-family:var(--font-mono);font-size:11.5px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--subtle);margin:0 0 18px;
}
.dark .overline{color:var(--dark-muted)}
.lede{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:62ch;margin:0}
.dark .lede{color:#c9c4ba}
.muted{color:var(--ink-2)}
.mono{font-family:var(--font-mono)}

.section-head{margin-bottom:clamp(40px,5vw,72px)}
.section-head h2{max-width:24ch}
.section-head .lede{margin-top:22px}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border:1px solid transparent;border-radius:2px;
  font-family:var(--font-sans);font-size:15px;font-weight:600;
  text-decoration:none;cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--accent);color:#f5f4f2}
.btn-primary:hover{background:var(--accent-hi)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--ink)}
.btn-light{background:var(--dark-fg);color:var(--dark)}
.btn-light:hover{background:#fff}
.link-u{
  font-size:15px;font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--ink);padding-bottom:2px;
}
.link-u:hover{border-color:transparent}

/* ---------- Reveal ----------
   L'opacité de départ n'est appliquée que si le JS a répondu (.js sur <html>).
   Sans JS, la page reste entièrement lisible. */
@keyframes pb-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js .reveal{opacity:0}
.js .reveal.in{animation:pb-rise .7s cubic-bezier(.16,1,.3,1) both}
.js .reveal.in[data-d="2"]{animation-delay:.09s}
.js .reveal.in[data-d="3"]{animation-delay:.18s}
.js .reveal.in[data-d="4"]{animation-delay:.27s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1}
  .js .reveal.in{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Header ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(245,244,242,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__in{
  max-width:var(--maxw);margin:0 auto;padding:18px var(--pad);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 32px;
}
.brand{text-decoration:none;font-weight:700;letter-spacing:-.02em;font-size:19px}
.nav__links{display:flex;gap:26px;font-size:15px;margin-left:auto}
.nav__links a{text-decoration:none;color:var(--ink-2)}
.nav__links a:hover{color:var(--ink)}
.nav__tel{
  font-family:var(--font-mono);font-size:14px;text-decoration:none;
  border:1px solid var(--line);border-radius:2px;padding:9px 16px;
}
.nav__tel:hover{border-color:var(--ink)}
@media (max-width:760px){.nav__links{display:none}}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:clamp(48px,5vw,72px) 0 34px}
.footer__top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(28px,3vw,48px)}
@media (max-width:760px){.footer__top{grid-template-columns:1fr}}
.footer p{margin:14px 0 0;color:var(--ink-2);font-size:15px;max-width:46ch}
.footer h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);margin:0 0 14px;font-weight:400}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px}
.footer ul a{text-decoration:none;color:var(--ink-2)}
.footer ul a:hover{color:var(--ink)}
.footer__bottom{
  margin-top:clamp(36px,4vw,56px);padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-family:var(--font-mono);font-size:11.5px;color:var(--subtle);
}