/* Empan, jetons de la charte (identité A, la main cotée). Version du 9 octobre 2026.
   Polices : Fraunces et IBM Plex Mono, licence SIL Open Font License, fichiers dans fonts/.
   Aucune requête externe. Empan rassemble des outils édités par Caillou SARL. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --empan-papier: #F7F2E8;
  --empan-surface: #FFFDF8;
  --empan-encre: #14304A;
  --empan-encre-douce: #55606B;
  --empan-crayon: #AE3628;
  --empan-ligne: #E2D9C8;
  --empan-plongee: #0A6676;
  --empan-curseurs: #38702E;
  --empan-voile: #5D43A6;

  /* typographies */
  --empan-police-mot: 'Fraunces', Georgia, serif;          /* mot Empan, noms d'outils, titres : 600 */
  --empan-police-texte: 'Fraunces', Georgia, serif;        /* texte courant : 400 */
  --empan-police-cote: 'IBM Plex Mono', ui-monospace, monospace; /* cotes, repères, étiquettes : 400 et 500 */
  --empan-graisse-mot: 600;
  --empan-graisse-texte: 400;
  --empan-taille-texte: 1.0625rem;   /* 17 px */
  --empan-taille-petit: 0.875rem;    /* 14 px */
  --empan-taille-titre: clamp(1.75rem, 4vw, 2.75rem);
  --empan-interligne: 1.55;

  /* espacements (base 4 px) */
  --empan-esp-1: 4px;
  --empan-esp-2: 8px;
  --empan-esp-3: 12px;
  --empan-esp-4: 16px;
  --empan-esp-5: 24px;
  --empan-esp-6: 32px;
  --empan-esp-7: 48px;
  --empan-esp-8: 64px;

  /* rayons */
  --empan-rayon-s: 4px;
  --empan-rayon-m: 8px;
  --empan-rayon-l: 12px;
  --empan-rayon-pilule: 999px;

  /* trait de la cote */
  --empan-trait: 2px;
  --empan-focus: 3px solid var(--empan-crayon);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  --empan-papier: #0F1F2E;
  --empan-surface: #16293B;
  --empan-encre: #F1EADC;
  --empan-encre-douce: #A9B4BE;
  --empan-crayon: #F28C7C;
  --empan-ligne: #28405A;
  --empan-plongee: #5CCFD6;
  --empan-curseurs: #99D488;
  --empan-voile: #B9A8F3;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --empan-papier: #0F1F2E;
  --empan-surface: #16293B;
  --empan-encre: #F1EADC;
  --empan-encre-douce: #A9B4BE;
  --empan-crayon: #F28C7C;
  --empan-ligne: #28405A;
  --empan-plongee: #5CCFD6;
  --empan-curseurs: #99D488;
  --empan-voile: #B9A8F3;
}

/* produit courant : la cote prend sa couleur */
:root { --empan-cote: var(--empan-crayon); }
[data-produit="plongee"]  { --empan-cote: var(--empan-plongee); }
[data-produit="curseurs"] { --empan-cote: var(--empan-curseurs); }
[data-produit="voile"]    { --empan-cote: var(--empan-voile); }