/* ===========================================================
   OBSERVATOIRE DU BAILLEUR — système de design
   Ton : extrait cadastral / dossier d'expert. Encre pin foncée
   sur papier parchemin, laiton pour la donnée qui a une valeur.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:      #EDEEE4;
  --paper-2:    #E4E4D6;
  --ink:        #1E2B22;
  --ink-soft:   #445045;
  --line:       #B9B2A0;
  --line-soft:  #D7D2C2;
  --brass:      #A9791F;
  --brass-deep: #8A6118;
  --white:      #FBFAF6;

  --serif:  'Newsreader', Georgia, serif;
  --sans:   'IBM Plex Sans', -apple-system, sans-serif;
  --mono:   'IBM Plex Mono', ui-monospace, monospace;

  --content-w: 760px;
  --wide-w: 1080px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--ink); }
::selection{ background:var(--brass); color:var(--white); }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--ink);
}
p{ margin:0 0 1.1em; max-width:62ch; }
.lede{ font-size:1.15rem; color:var(--ink-soft); max-width:56ch; }

.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ---------- document frame : coins d'arpentage ---------- */
.frame{
  position:relative;
  max-width:1280px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,56px);
}
.tick{ position:fixed; width:14px; height:14px; pointer-events:none; z-index:5; opacity:.55; }
.tick::before,.tick::after{ content:""; position:absolute; background:var(--ink); }
.tick::before{ width:100%; height:1px; top:50%; }
.tick::after{ height:100%; width:1px; left:50%; }
.tick.tl{ top:18px; left:18px; } .tick.tr{ top:18px; right:18px; }
.tick.bl{ bottom:18px; left:18px; } .tick.br{ bottom:18px; right:18px; }
@media (max-width:640px){ .tick{ display:none; } }

/* ---------- entête ---------- */
.site-header{
  padding:22px clamp(20px,4vw,56px) 20px;
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.brand{
  font-family:var(--serif); font-size:1.28rem; font-weight:500;
  text-decoration:none; color:var(--ink); letter-spacing:.01em;
  display:flex; align-items:baseline; gap:.5em;
}
.brand .mark{ font-family:var(--mono); font-size:.62em; color:var(--brass-deep); border:1px solid var(--brass); padding:.15em .45em; border-radius:2px; }
.site-nav{ display:flex; gap:28px; font-size:.94rem; flex-wrap:wrap; }
.site-nav a{ text-decoration:none; color:var(--ink-soft); border-bottom:1px solid transparent; padding-bottom:2px; }
.site-nav a:hover, .site-nav a[aria-current]{ color:var(--ink); border-color:var(--brass); }

/* ---------- sections ---------- */
section{ padding:clamp(48px,7vw,96px) 0; }
.section-narrow{ max-width:var(--content-w); margin:0 auto; padding-left:clamp(20px,4vw,56px); padding-right:clamp(20px,4vw,56px); }
.section-wide{ max-width:var(--wide-w); margin:0 auto; padding-left:clamp(20px,4vw,56px); padding-right:clamp(20px,4vw,56px); }
.rule{ border:0; border-top:1px solid var(--line); margin:0; }

.kicker{
  font-family:var(--mono); font-size:.8rem; color:var(--brass-deep);
  margin:0 0 .9em; display:block;
}

/* ---------- héros accueil ---------- */
.hero{
  padding-top:clamp(56px,9vw,120px);
  display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:end;
}
.hero h1{ font-size:clamp(2.3rem,4.4vw,3.4rem); max-width:14ch; }
.hero .fact{
  border-left:2px solid var(--brass);
  padding:2px 0 2px 20px;
  font-family:var(--mono); font-size:.92rem; color:var(--ink-soft);
  max-width:34ch;
}
@media (max-width:840px){ .hero{ grid-template-columns:1fr; gap:28px; } }

.plot{ width:100%; height:auto; }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-weight:500; font-size:.96rem;
  padding:.85em 1.4em; border:1px solid var(--ink); border-radius:2px;
  text-decoration:none; color:var(--ink); background:transparent;
  cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--brass-deep); border-color:var(--brass-deep); }
.btn-brass{ border-color:var(--brass); color:var(--brass-deep); }
.btn-brass:hover{ background:var(--brass); color:var(--white); border-color:var(--brass); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }
.btn[disabled]:hover{ background:transparent; color:var(--ink); }

/* ---------- fiches (outils) ---------- */
.dossier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px; }
.dossier{ background:var(--paper); padding:28px 26px; display:flex; flex-direction:column; gap:.6em; text-decoration:none; color:var(--ink); }
.dossier:hover{ background:var(--white); }
.dossier .tag{ font-family:var(--mono); font-size:.72rem; color:var(--brass-deep); text-transform:uppercase; letter-spacing:.04em; }
.dossier h3{ font-size:1.18rem; margin:0; }
.dossier p{ font-size:.93rem; color:var(--ink-soft); margin:0; }
.dossier .go{ margin-top:auto; font-family:var(--mono); font-size:.8rem; color:var(--ink-soft); padding-top:.6em; }
@media (max-width:900px){ .dossier-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .dossier-grid{ grid-template-columns:1fr; } }

/* ---------- preuves ---------- */
.proofs{ display:flex; flex-wrap:wrap; gap:36px 48px; align-items:flex-start; }
.proof dt{ font-family:var(--mono); font-size:.78rem; color:var(--brass-deep); margin-bottom:.3em; }
.proof dd{ margin:0; font-size:.95rem; color:var(--ink-soft); max-width:26ch; }

/* ---------- simulateur ---------- */
.sim{
  background:var(--white); border:1px solid var(--line);
  padding:clamp(24px,4vw,40px); margin-top:20px;
}
.sim-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; }
@media (max-width:640px){ .sim-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.4em; }
.field label{ font-size:.85rem; color:var(--ink-soft); }
.field select, .field input{
  font-family:var(--sans); font-size:1rem; padding:.65em .7em;
  border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:2px;
}
.field select:focus, .field input:focus{ outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass); }

.result{ margin-top:28px; padding-top:24px; border-top:1px dashed var(--line); }
.result[hidden]{ display:none; }
.result-label{ font-family:var(--mono); font-size:.8rem; color:var(--ink-soft); margin-bottom:.35em; }
.result-value{ font-family:var(--mono); font-size:clamp(1.8rem,4vw,2.6rem); color:var(--brass-deep); font-weight:500; }
.result-sub{ font-size:.92rem; color:var(--ink-soft); margin-top:.5em; max-width:52ch; }

.gate{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.gate-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.gate .field{ flex:1 1 220px; }
.consent{ display:flex; gap:.6em; align-items:flex-start; font-size:.85rem; color:var(--ink-soft); margin-top:14px; }
.consent input{ margin-top:.3em; }
.form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:10px; }
.form-status{ font-size:.9rem; margin-top:12px; }
.form-status.ok{ color:#3B6B3E; }
.form-status.err{ color:#9B3B2E; }

/* ---------- contenu long (a propos / légal) ---------- */
.prose h2{ font-size:1.4rem; margin-top:1.6em; }
.prose h3{ font-size:1.08rem; font-family:var(--sans); font-weight:600; margin-top:1.4em; }
.prose ul{ padding-left:1.2em; }
.prose li{ margin-bottom:.5em; max-width:60ch; }
.credential-list{ list-style:none; padding:0; margin:1.4em 0; border-top:1px solid var(--line); }
.credential-list li{ display:flex; gap:18px; padding:.9em 0; border-bottom:1px solid var(--line); max-width:none; }
.credential-list .y{ font-family:var(--mono); font-size:.85rem; color:var(--brass-deep); flex:0 0 90px; }

/* ---------- pied ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:40px clamp(20px,4vw,56px) 32px;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  font-size:.86rem; color:var(--ink-soft);
}
.site-footer a{ color:var(--ink-soft); }
.foot-links{ display:flex; gap:18px; flex-wrap:wrap; }

/* ---------- focus visible partout ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; transition:none !important; } }