/* ============================================================
   Karnet — base design system  ·  « Ardoise & inox »
   Accent: ambre (#E3A41F) + argent/acier. Red=écart, green=conforme.
   Fonts (load in HTML): Young Serif, Hanken Grotesk, Spline Sans Mono
   ============================================================ */
:root{
  /* LIGHT — béton / inox / charbon */
  --canvas:#EAE7DF; --surface:#F3F1EA; --raised:#FCFBF5; --line:#D6D2C7;
  --steel-2:#C5C1B5; --steel-3:#A8A398; --steel-4:#928D80; --steel-6:#5E5A4F;
  --charcoal:#211F1A; --charcoal-2:#45423A;
  --sodium:#E3A41F; --sodium-700:#B07C12; --sodium-100:#F6E7C1; --sodium-50:#FBF2DC;
  --ok:#2F6B53; --ok-100:#D4E3DA;
  --danger:#C0341A; --danger-100:#F1D7CD;

  /* DARK — ardoise */
  --d-canvas:#16130E; --d-surface:#201C15; --d-raised:#2A251C; --d-line:#37301F;
  --craie:#ECE6D6; --craie-muted:#A89A84;
  --d-sodium:#EAC254; --d-ok:#6FBF94; --d-danger:#F0795A;

  --r:7px; --r-lg:12px;
  --shadow:0 1px 0 var(--line), 0 16px 34px -22px rgba(33,31,26,.5);
  --shadow-lg:0 2px 0 var(--line), 0 40px 70px -34px rgba(33,31,26,.55);
  --serif:"Young Serif",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,monospace;
  --maxw:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--canvas); color:var(--charcoal); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; letter-spacing:-.01em; margin:0;}
a{color:inherit;}
img{max-width:100%; display:block;}

/* paper grain */
.grain{position:relative;}
.grain::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:multiply;}
.grain-d::after{mix-blend-mode:soft-light; opacity:.1;}
.grain > *{position:relative; z-index:1;}

/* layout */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--sodium-700);}

/* logo lockup */
.kmark{height:.86em; width:auto; transform:translateY(.07em); margin-right:.02em;}
.wm{font-family:var(--serif); font-weight:400; letter-spacing:-.005em; display:inline-flex; align-items:baseline; line-height:.9;}

/* buttons */
.btn{font-family:var(--sans); font-weight:600; font-size:16px; border-radius:var(--r); border:none; cursor:pointer; padding:14px 22px; min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:transform .12s, filter .12s; text-decoration:none; white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--sodium); color:var(--charcoal); box-shadow:0 1px 0 var(--sodium-700);}
.btn-primary:hover{filter:brightness(1.04);}
.btn-dark{background:var(--charcoal); color:var(--canvas);}
.btn-dark:hover{filter:brightness(1.15);}
.btn-secondary{background:transparent; color:var(--charcoal); border:1.5px solid var(--charcoal);}
.btn-secondary:hover{background:var(--charcoal); color:var(--canvas);}
.btn-ghost{background:var(--raised); color:var(--charcoal); border:1px solid var(--line);}
.btn-ok{background:var(--ok); color:#fff;}
.btn-danger{background:var(--danger); color:#fff;}
.btn-big{font-size:18px; padding:18px 26px; min-height:62px;}
.btn-block{width:100%;}

/* badges */
.badge{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12.5px; font-weight:500; padding:7px 12px; border-radius:6px;}
.badge .dot{width:8px; height:8px; border-radius:50%;}
.badge-ok{background:var(--ok-100); color:var(--ok);} .badge-ok .dot{background:var(--ok);}
.badge-warn{background:var(--sodium-100); color:var(--sodium-700);} .badge-warn .dot{background:var(--sodium);}
.badge-alert{background:var(--danger-100); color:var(--danger);} .badge-alert .dot{background:var(--danger);}

/* fields */
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-size:13px; font-weight:600; color:var(--charcoal-2);}
.field .hint{font-size:12px; color:var(--steel-4);}
.input{font-family:var(--sans); font-size:17px; padding:14px 15px; border-radius:var(--r); border:1.5px solid var(--steel-2); background:var(--raised); color:var(--charcoal); min-height:54px; width:100%;}
.input:focus{outline:none; border-color:var(--sodium); box-shadow:0 0 0 3px var(--sodium-100);}

/* relevé card */
.releve{border:1px solid var(--line); border-radius:9px; padding:18px; background:var(--raised); display:flex; flex-direction:column; gap:12px;}
.releve-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.releve-eq{display:flex; gap:12px; align-items:center;}
.eq-ico{width:46px; height:46px; border-radius:9px; background:var(--ok-100); display:flex; align-items:center; justify-content:center; color:var(--ok); flex-shrink:0;}
.releve-eq b{font-size:16px; display:block;} .releve-eq span{font-size:12.5px; color:var(--steel-6); font-family:var(--mono);}
.releve-temp{font-family:var(--mono); font-size:34px; line-height:1; font-weight:500;}
.releve-foot{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--steel-4); font-family:var(--mono);}

/* utility */
.mono{font-family:var(--mono);}
.amber{color:var(--sodium-700);}
.section{padding:84px 0;}
@media(max-width:720px){.section{padding:56px 0;}}