/* labonnereno — encre ardoise sur plâtre, jaune chantier pour l'action */
:root {
  --platre: #f2f3ee; --papier: #ffffff; --ardoise: #1d2b36; --ardoise-2: #4a5965;
  --trait: #d6dad0; --chantier: #ffcf33; --vert: #17683e; --vert-fond: #e3f3e9;
  --orange-fond: #ffe9c2; --rouge: #b3361f;
  --r-s: 8px; --r-m: 14px; --r-l: 28px;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --texte: "Atkinson Hyperlegible", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--platre); color: var(--ardoise); font: 400 16px/1.5 var(--texte); }
button, input, select { font: inherit; color: inherit; }
a { color: var(--ardoise); }
:focus-visible { outline: 3px solid var(--chantier); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1380px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

.barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 0; }
.logo { display: flex; align-items: center; gap: 10px; font: 700 21px/1 var(--display); letter-spacing: -0.02em; text-decoration: none; }
.logo-marque { display: grid; gap: 2px; }
.logo-marque i { display: block; height: 5px; border-radius: 0 3px 3px 0; }
.logo-marque i:nth-child(1) { width: 12px; background: #009c6d; }
.logo-marque i:nth-child(2) { width: 17px; background: #f4e70f; }
.logo-marque i:nth-child(3) { width: 22px; background: #d7221f; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn-jaune { background: var(--chantier); color: var(--ardoise); }
.btn-ardoise { background: var(--ardoise); color: #fff; }
.btn-blanc { background: #fff; color: var(--ardoise); box-shadow: inset 0 0 0 1.5px var(--trait); }
.btn[disabled] { opacity: .6; cursor: default; }

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-weight: 700; font-size: 15px; }
.champ input, .champ select { height: 52px; border-radius: var(--r-s); border: 1.5px solid var(--trait); background: #fff; padding: 0 14px; font-size: 16px; }
.champ input:focus, .champ select:focus { border-color: var(--ardoise); outline: none; }

.message { padding: 12px 16px; border-radius: var(--r-m); font-size: 15px; }
.message.ok { background: var(--vert-fond); color: var(--vert); }
.message.erreur { background: #fbe8e4; color: var(--rouge); }

.pied { padding-top: 32px; padding-bottom: 48px; color: var(--ardoise-2); font-size: 14px; display: flex; gap: 18px; flex-wrap: wrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }