/* Polices auto-hébergées — sous-ensemble latin uniquement (suffisant pour le
   français). Fraunces et Space Grotesk, sous licence SIL Open Font License.

   Pourquoi les auto-héberger : cela supprime deux connexions tierces
   (fonts.googleapis.com puis fonts.gstatic.com) avant le premier affichage, et
   surtout cela permet de PRÉCHARGER les fichiers. C'est ce préchargement qui
   élimine le décalage de mise en page dû à la bascule police système ->
   police finale, qui pesait à lui seul 0,10 de CLS sur la page d'accueil. */

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/fraunces-italic-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: 300 900;
  font-display: swap;
  src: url('/fonts/fraunces-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-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;
}

/* Feuille de style partagée par les pages de listes de mots.
   Reprend les tokens de ana.html — un seul fichier, mis en cache
   une fois puis réutilisé par les 15 pages. */

:root {
  --bg: #F6EFDC;
  --bg-2: #EDE3C8;
  --paper: #FFFBF0;
  --ink: #161210;
  --ink-2: #4A4338;
  --ink-3: #8A8170;
  --accent: #E63946;
  --accent-2: #B82B36;
  --gold: #F4C20D;
  --green: #2A9D8F;
  --line: #DDD2B6;
  --shadow-sm: 0 2px 8px rgba(22, 18, 16, 0.06);
  --shadow: 0 10px 32px rgba(22, 18, 16, 0.08);
  --r-sm: 10px;
  --r: 16px;
  --container: 1100px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--accent); color: #fff; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }

/* ── En-tête ─────────────────────────────────────────────── */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.header-inner {
  max-width: var(--container); margin: 0 auto; padding: 0.9rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: none;
}
.logo-tile {
  display: grid; place-items: center; width: 32px; height: 32px;
  background: var(--accent); color: var(--paper); border-radius: 8px;
  font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 1.1rem;
}
.header-cta {
  background: var(--ink); color: var(--paper); text-decoration: none;
  padding: 0.5rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem;
  white-space: nowrap;
}
.header-cta:hover { background: var(--accent); }

/* ── Fil d'Ariane ────────────────────────────────────────── */
.breadcrumb { padding: 1.25rem 0 0; font-size: 0.85rem; color: var(--ink-3); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.breadcrumb li:not(:last-child)::after { content: '›'; margin-left: 0.45rem; color: var(--line); }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

/* ── Intro ───────────────────────────────────────────────── */
.page-head { padding: 1.5rem 0 2.5rem; }
h1 {
  font-family: Fraunces, Georgia, serif; font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08;
  letter-spacing: -0.02em; margin-bottom: 0.9rem;
}
h1 em { font-style: italic; color: var(--accent); }
.lede { font-size: 1.1rem; color: var(--ink-2); max-width: 62ch; }
.lede + .lede { margin-top: 0.8rem; }
.lede strong { color: var(--ink); }

/* ── Bandeau de chiffres ─────────────────────────────────── */
.stats {
  display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem;
}
.stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0.7rem 1.1rem; box-shadow: var(--shadow-sm);
}
.stat b {
  display: block; font-family: Fraunces, Georgia, serif;
  font-size: 1.5rem; line-height: 1.1; color: var(--accent);
}
.stat span { font-size: 0.78rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Encadré ─────────────────────────────────────────────── */
.callout {
  background: var(--paper); border-left: 4px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 1.1rem 1.3rem;
  margin: 2rem 0; box-shadow: var(--shadow-sm); font-size: 0.97rem; color: var(--ink-2);
}
.callout h2 { font-size: 1.05rem; margin-bottom: 0.4rem; color: var(--ink); }

/* ── Navigation alphabétique ─────────────────────────────── */
.alpha-nav {
  position: sticky; top: 61px; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  background: var(--bg); padding: 0.9rem 0; border-bottom: 1px solid var(--line);
}
.alpha-nav a {
  display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 0.4rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.88rem;
}
.alpha-nav a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Groupes de mots ─────────────────────────────────────── */
.letter-group { padding-top: 2.25rem; }
.letter-group > h2 {
  font-family: Fraunces, Georgia, serif; font-size: 1.6rem;
  border-bottom: 2px solid var(--line); padding-bottom: 0.4rem; margin-bottom: 1rem;
}
.letter-group > h2 span { font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; font-weight: 400; color: var(--ink-3); }

.word-grid {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.4rem;
}
.word-grid li {
  background: var(--paper); border: 1px solid var(--line); border-radius: 7px;
  padding: 0.38rem 0.5rem; text-align: center;
  font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em;
}

/* ── Tableau des mieux cotés ─────────────────────────────── */
.score-table { width: 100%; border-collapse: collapse; margin-top: 1rem; background: var(--paper); border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.score-table th, .score-table td { padding: 0.55rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.score-table th { background: var(--bg-2); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.score-table td:first-child { font-weight: 700; letter-spacing: 0.05em; }
.score-table td:last-child { font-family: Fraunces, Georgia, serif; font-weight: 700; color: var(--accent); }
.score-table tr:last-child td { border-bottom: none; }

/* ── Bloc de rappel vers l'outil ─────────────────────────── */
.tool-cta {
  margin: 3rem 0 0; padding: 2rem; text-align: center;
  background: var(--ink); color: var(--paper); border-radius: var(--r);
}
.tool-cta h2 { font-family: Fraunces, Georgia, serif; font-size: 1.6rem; margin-bottom: 0.5rem; }
.tool-cta p { color: #C9C0B0; margin-bottom: 1.2rem; }
.tool-cta a {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  padding: 0.8rem 1.8rem; border-radius: 999px; font-weight: 700;
}
.tool-cta a:hover { background: var(--accent-2); }

/* ── Pages voisines ──────────────────────────────────────── */
.related { margin-top: 3rem; }
.related h2 { font-family: Fraunces, Georgia, serif; font-size: 1.5rem; margin-bottom: 1rem; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; list-style: none; }
.related-grid a {
  display: block; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 0.85rem 1rem; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.related-grid a:hover { border-color: var(--accent); transform: translateY(-2px); }
.related-grid b { display: block; font-size: 0.97rem; }
.related-grid span { font-size: 0.82rem; color: var(--ink-3); }

/* ── Pied de page ────────────────────────────────────────── */
.site-footer { margin-top: 4rem; background: var(--paper); border-top: 1px solid var(--line); padding: 2rem 0; font-size: 0.88rem; color: var(--ink-3); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }

main { padding-bottom: 1rem; }

@media (max-width: 600px) {
  .word-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .alpha-nav { top: 57px; }
}