/* ==========================================================================
   NIANTEO — feuille de style principale
   Palette « papier / encre / brûlé » — d'après la maquette v3 (Proposition C)
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --papier:#F3EFE6;
  --papier-2:#EBE6D8;
  --encre:#161310;
  --encre-60:#5C564B;
  --brule:oklch(0.62 0.16 45);
  --brule-fort:oklch(0.55 0.17 42);
  --hairline:rgba(22,19,16,.16);

  --font-display:"Archivo","Helvetica Neue",sans-serif;
  --font-body:"Instrument Sans","Helvetica Neue",sans-serif;
  --font-serif:"Instrument Serif",serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",monospace;

  --ease-luxe:cubic-bezier(.22,1,.36,1);
}

/* Fallback pour les navigateurs sans oklch() */
@supports not (color: oklch(0.62 0.16 45)){
  :root{--brule:#C2410C;--brule-fort:#A83A05}
}

html{scroll-behavior:smooth}

body{
  background:var(--papier);
  color:var(--encre);
  font:400 16px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--encre);text-decoration:none;transition:color .18s var(--ease-luxe)}
a:hover{color:var(--brule)}

img{max-width:100%;display:block}

.serif{font-family:var(--font-serif);font-weight:400}
.mono{font:500 11px/1.4 var(--font-mono);letter-spacing:.18em;text-transform:uppercase}

.wrap{max-width:1280px;margin:0 auto;padding:0 48px}

/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 32px;
  font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;border:1px solid var(--encre);
  cursor:pointer;transition:all .18s var(--ease-luxe);
}
.btn-p{background:var(--encre);color:var(--papier)}
.btn-p:hover{background:var(--brule-fort);border-color:var(--brule-fort);color:#fff}
.btn-s{background:transparent;color:var(--encre)}
.btn-s:hover{background:var(--encre);color:var(--papier)}
.btn[disabled]{opacity:.55;cursor:wait}

/* ── En-tête ─────────────────────────────────────────────────────────── */
header .wrap{display:flex;align-items:center;height:84px;gap:40px}

.brand{display:inline-flex;align-items:baseline;gap:3px}
.brand-name{
  font:600 24px/1 var(--font-display);
  font-stretch:115%;letter-spacing:-.02em;text-transform:uppercase;
}
.brand svg{align-self:center}

header nav{display:flex;gap:32px;margin-left:auto}

.lang-switch{display:inline-flex;gap:2px;align-items:center}
.lang-switch a{padding:4px 6px}
.lang-switch .active{color:var(--brule)}
.lang-switch .sep{color:var(--hairline)}

header .btn{padding:12px 24px}

/* ── Héro ────────────────────────────────────────────────────────────── */
.hero{padding:72px 0 88px}
.hero .wrap{display:flex;flex-direction:column;gap:40px}
.hero h1{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(52px,8.5vw,124px);line-height:1.02;letter-spacing:-.015em;
  max-width:20ch;
}
.hero h1 em{color:var(--brule)}
.hero-row{display:flex;align-items:flex-end;gap:64px;flex-wrap:wrap}
.hero-row p{font-size:19px;color:var(--encre-60);max-width:46ch}
.hero-cta{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap}

/* ── Marquee ─────────────────────────────────────────────────────────── */
.marquee{
  overflow:hidden;white-space:nowrap;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.marquee-inner{display:inline-block;animation:mq 28s linear infinite;padding:18px 0;color:var(--encre-60)}
.marquee .dot{color:var(--brule)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .marquee-inner{animation:none}
  html{scroll-behavior:auto}
}

/* ── Sections ────────────────────────────────────────────────────────── */
section{padding:88px 0}

.sec-head{display:flex;align-items:baseline;gap:20px;margin-bottom:56px;flex-wrap:wrap}
.sec-head .num{color:var(--brule)}
.sec-head h2{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(38px,5vw,52px);letter-spacing:-.01em;line-height:1.05;
}
.sec-head .aside{color:rgba(243,239,230,.55);margin-left:auto;max-width:34ch;font-size:14.5px}

/* ── Services ────────────────────────────────────────────────────────── */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.svc3{
  display:flex;flex-direction:column;gap:14px;
  padding:36px 32px;border-left:1px solid var(--hairline);
}
.svc3:last-child{border-right:1px solid var(--hairline)}
.svc3:hover .star{transform:rotate(90deg)}
.star{
  color:var(--brule);font-size:18px;line-height:1;display:inline-block;
  transition:transform .35s var(--ease-luxe);
}
.svc3 .t{font-size:21px;font-weight:600;letter-spacing:-.01em}
.svc3 .d{color:var(--encre-60);font-size:14.5px}

/* ── Produits ────────────────────────────────────────────────────────── */
.produits{background:var(--encre);color:var(--papier);padding:96px 0}
.prod-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(243,239,230,.2);border:1px solid rgba(243,239,230,.2);
}
.prod{background:var(--encre);padding:48px;display:flex;flex-direction:column;gap:18px}
.prod-head{display:flex;align-items:baseline;justify-content:space-between}
.prod-name{font-family:var(--font-serif);font-size:40px}
.prod-badge{color:var(--brule)}
.prod p{color:rgba(243,239,230,.65);max-width:44ch}
.prod a{color:var(--papier);margin-top:auto}
.prod a:hover{color:var(--brule)}

/* ── Méthode ─────────────────────────────────────────────────────────── */
.methode{padding:96px 0}
.methode .wrap{display:flex;flex-direction:column;gap:32px;align-items:center;text-align:center}
.methode .num{color:var(--brule)}
.methode blockquote{
  font-family:var(--font-serif);
  font-size:clamp(32px,4vw,52px);line-height:1.15;letter-spacing:-.01em;
  max-width:26ch;
}
.methode blockquote em{color:var(--brule)}
.methode .note{color:var(--encre-60);max-width:52ch}

/* ── Contact ─────────────────────────────────────────────────────────── */
.contact{border-top:1px solid var(--hairline);padding:88px 0;background:var(--papier-2)}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.contact-info{display:flex;flex-direction:column;gap:20px}
.contact-info .kicker{color:var(--brule)}
.contact-info h2{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(38px,5vw,52px);line-height:1.05;letter-spacing:-.01em;
}
.contact-info p{color:var(--encre-60);max-width:42ch}
.contact-info .coords{color:var(--encre-60);line-height:2.2}

form{display:flex;flex-direction:column;gap:18px}

.lbl{
  font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-60);display:block;margin-bottom:10px;
}
input,textarea{
  background:#fff;color:var(--encre);font:inherit;
  padding:16px;border-radius:2px;border:1px solid rgba(22,19,16,.2);
  outline:none;width:100%;
}
input:focus,textarea:focus{border-color:var(--brule)}

.form-status{display:none}
.form-status.err{display:block;color:var(--brule-fort);letter-spacing:.1em;margin-top:14px}

/* Panneau de confirmation — remplace le formulaire après envoi */
.form-success{
  display:flex;flex-direction:column;gap:18px;
  background:var(--encre);color:var(--papier);
  padding:56px 48px;
  animation:success-in .5s var(--ease-luxe) both;
}
.form-success[hidden]{display:none}
.form-success .star{font-size:26px}
.form-success .title{
  font-family:var(--font-serif);
  font-size:clamp(32px,3.5vw,44px);line-height:1.1;letter-spacing:-.01em;
}
.form-success .sub{color:rgba(243,239,230,.65);max-width:38ch}
.form-success .meta{color:var(--brule)}
@keyframes success-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .form-success{animation:none}
}
@media (max-width: 640px){
  .form-success{padding:36px 24px}
}

/* Piège à robots — jamais visible pour un humain */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── Pied de page ────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--hairline)}
footer .wrap{display:flex;align-items:center;gap:24px;padding-top:28px;padding-bottom:28px;flex-wrap:wrap}
footer .copy{color:var(--encre-60)}
footer .links{margin-left:auto;display:flex;gap:24px}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 980px){
  .wrap{padding:0 32px}
  .svc-grid{grid-template-columns:1fr 1fr}
  .svc3:nth-child(2n){border-right:1px solid var(--hairline)}
  .svc3{border-top:1px solid var(--hairline)}
  .prod-grid{grid-template-columns:1fr}
  .contact .wrap{grid-template-columns:1fr;gap:48px}
  .sec-head .aside{margin-left:0;max-width:100%}
}

@media (max-width: 640px){
  .wrap{padding:0 20px}
  header .wrap{gap:16px;height:72px}
  header nav{gap:16px}
  header nav .nav-link{display:none}
  .hero{padding:48px 0 64px}
  .hero-row{gap:28px}
  .hero-cta{margin-left:0}
  section{padding:64px 0}
  .produits,.methode{padding:64px 0}
  .svc-grid{grid-template-columns:1fr}
  .svc3{border-right:1px solid var(--hairline)}
  .prod{padding:32px 24px}
  .sec-head{margin-bottom:36px}
}