@font-face { font-family: 'Bricolage'; src: url('../fonts/bricolage-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Bricolage'; src: url('../fonts/bricolage-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --vert: #1E4A3B;        /* tuile verte : structure, boutons */
  --vert-clair: #DCE6DF;
  --ocre: #D4A017;        /* tuile ocre : changements de dimension validés, sélection */
  --ocre-clair: #F6E7B8;
  --lie: #7A2E2A;         /* alertes et refus */
  --fond: #F2F4EE;
  --carte: #FFFFFF;
  --encre: #17221D;
  --neutre: #8A948E;
  --trait: #C9D0CB;
  --titre: 'Bricolage', system-ui, sans-serif;
  --texte: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r: 10px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 17px/1.45 var(--texte);
}
h1, h2, h3 { font-family: var(--titre); font-weight: 800; line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ocre); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Bande de losanges (tuiles vernissées) */
.tuiles { height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14'%3E%3Crect width='56' height='14' fill='%23D4A017'/%3E%3Cpath d='M0 7 7 0 14 7 7 14Z' fill='%231E4A3B'/%3E%3Cpath d='M14 7 21 0 28 7 21 14Z' fill='%2317221D'/%3E%3Cpath d='M28 7 35 0 42 7 35 14Z' fill='%237A2E2A'/%3E%3Cpath d='M42 7 49 0 56 7 49 14Z' fill='%2317221D'/%3E%3C/svg%3E") 0 0 / 56px 14px repeat-x; }
.tuiles.fine { height: 7px; background-size: 28px 7px; }

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