/* Zenkolor — jetons de design pour le site vitrine et le back-office (cahier des charges, section 17).
   Police Instrument Serif auto-hébergée sur le serveur OVH (licence SIL OFL 1.1), pas d'appel à Google Fonts. */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
}

:root {
  --paper: #F6F2EA;
  --card: #FFFDF8;
  --ink: #1F1C18;
  --ink2: #5F584E;
  --line: #E4DCCD;
  --chip: #ECE5D8;
  --sel: rgba(31, 28, 24, 0.07);
  --mat: #ECE6DA;
  --glass: rgba(255, 253, 248, 0.74);
  --glass-line: rgba(255, 255, 255, 0.85);
  --shadow: rgba(70, 50, 30, 0.12);
  --drawing-paper: #FFFEFB;
  --line-art: #2A2620;
  --on-accent: #FFFFFF;

  /* Accent : terre cuite par défaut ; bleu de Prusse = #2E5A8A / texte sombre #8DB3DE */
  --accent: #B4532F;
  --accent-text: #B4532F;

  --badge-free-bg: #E3EDD6;
  --badge-free-fg: #33502A;
  --device-frame: #141312;

  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius-thumb-s: 14px; --radius-thumb: 20px; --radius-drawing: 22px; --radius-card: 28px; --radius-panel: 32px;

  --shadow-card: 0 0 0 1px var(--line), 0 14px 34px var(--shadow);
  --shadow-thumb: 0 0 0 1px var(--line), 0 6px 16px var(--shadow);
  --shadow-floating: 0 10px 30px var(--shadow);

  --container: 1200px;
  --gutter: 24px;
  --section-gap: 96px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1B1A19;
    --card: #262422;
    --ink: #EEE9E0;
    --ink2: #ABA498;
    --line: #38352F;
    --chip: #302D29;
    --sel: rgba(255, 255, 255, 0.09);
    --mat: #121110;
    --glass: rgba(46, 43, 40, 0.72);
    --glass-line: rgba(255, 255, 255, 0.10);
    --shadow: rgba(0, 0, 0, 0.45);
    --accent-text: #E8916C;
    --badge-free-bg: #2F3A2C;
    --badge-free-fg: #CFE3B8;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.h1-home { font-family: var(--font-serif); font-weight: 400; font-size: clamp(48px, 6.4vw, 92px); line-height: 0.98; letter-spacing: -0.015em; text-wrap: balance; }
.h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 4.8vw, 64px); line-height: 1; }
.overline { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }

.glass {
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-floating);
}

.btn-primary {
  display: inline-flex; align-items: center; height: 54px; padding: 0 26px;
  border-radius: 27px; background: var(--accent); color: var(--on-accent);
  font-size: 17px; font-weight: 600; text-decoration: none;
}
.btn-primary:active { opacity: 0.85; }

.chip { height: 44px; padding: 0 18px; border-radius: 22px; border: none; background: var(--chip); color: var(--ink); font: 500 15px/1 var(--font-sans); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }

.grid-drawings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 28px 20px; }
.drawing-card img { width: 100%; aspect-ratio: 1; border-radius: var(--radius-drawing); box-shadow: var(--shadow-thumb); background: var(--drawing-paper); }
.badge-free { padding: 5px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: var(--badge-free-bg); color: var(--badge-free-fg); }
.badge-app { padding: 5px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: var(--chip); color: var(--ink); }

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