/* Atlas des mots.
   Papier gris-bleu froid, encre ardoise ; une seule famille, Archivo, dont la largeur porte l'information
   (étroite pour les étiquettes et les données, normale pour le texte). Chaque motif garde sa teinte dans
   toutes les vues. Le nom du corpus fait partie du titre : c'est lui qu'on change. */

:root {
  color-scheme: light;
  --papier: #F3F5F7;
  --fond-graphe: #FBFCFD;
  --encre: #1B2430;
  --encre-douce: #5B6573;
  --trait: #D3D9E0;
  --regime: #E6EAEF;
  --accent: #1F4E79;
  --decollage: #1F4E79;
  --marche-montante: #2E7D9A;
  --montee-lente: #8FB3D3;
  --effondrement: #B3261E;
  --marche-descendante: #D9653B;
  --declin-lent: #E3A396;
  --pic: #6B4C9A;
  --cycle-de-vie: #B39DD3;
  --creneau: #B07D1A;
  --saison: #3E7D4A;
  --pic-court: #8E3B6E;
  --artefact: #9AA3AD;
  --comparaison: #B07D1A;
  --texte: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --etroit: "Archivo Narrow", "Arial Narrow", "Archivo", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --papier: #141A21;
    --fond-graphe: #18202A;
    --encre: #E4E9EE;
    --encre-douce: #9AA6B3;
    --trait: #2C3743;
    --regime: #1D2631;
    --accent: #8DB8E3;
    --decollage: #6FA3D6;
    --marche-montante: #5CB3C9;
    --montee-lente: #4E6F8E;
    --effondrement: #EF6B60;
    --marche-descendante: #F09A6C;
    --declin-lent: #8E5A52;
    --pic: #B194E0;
    --cycle-de-vie: #6E5A92;
    --creneau: #E0AE4A;
    --saison: #6DBF7C;
    --pic-court: #D98BBE;
    --artefact: #6B7682;
    --comparaison: #E0AE4A;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 15px;
  line-height: 1.45;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Barre : titre et corpus, recherche, filtres — une seule ligne qui se replie */
.barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  padding: 14px 24px 10px;
}
.titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.titre h1 {
  margin: 0; font-size: 22px; font-weight: 600; font-stretch: 88%; letter-spacing: -0.01em;
}
.choix-corpus {
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 0 22px 1px 0; font: inherit; font-size: 22px; font-weight: 600; font-stretch: 88%;
  letter-spacing: -0.01em; color: var(--accent); cursor: pointer;
  border: 0; border-bottom: 2px solid var(--accent); border-radius: 0;
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  max-width: 100%;
}
.choix-corpus option, .choix-corpus optgroup { font-size: 15px; font-weight: 400; color: var(--encre); background: var(--fond-graphe); }
.choix-corpus:disabled { color: var(--encre-douce); border-bottom-color: var(--trait); cursor: wait; }
.titre .periode { font-size: 22px; font-weight: 400; color: var(--encre-douce); font-stretch: 75%; }

.note-corpus { margin: -4px 24px 8px; max-width: 80ch; color: var(--encre-douce); font-family: var(--etroit); font-size: 14px; }

.recherche { position: relative; }
.recherche input {
  width: 15rem; padding: 6px 10px; font: inherit; color: var(--encre);
  background: var(--fond-graphe); border: 1px solid var(--trait); border-radius: 3px;
}
.suggestions {
  position: absolute; z-index: 10; top: 100%; left: 0; min-width: 100%; margin: 2px 0 0; padding: 4px 0;
  list-style: none; background: var(--fond-graphe); border: 1px solid var(--trait); border-radius: 3px;
}
.suggestions li { padding: 3px 10px; cursor: pointer; font-stretch: 88%; white-space: nowrap; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--regime); }
.suggestions .indice { color: var(--encre-douce); font-family: var(--etroit); font-size: 13px; }

.filtres { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; border: 0; }
.filtres legend {
  float: left; margin-right: 6px; color: var(--encre-douce); font-family: var(--etroit); font-size: 13px;
}
.filtres label { display: inline-flex; align-items: center; gap: 5px; font-family: var(--etroit); font-size: 14px; cursor: pointer; }
.filtres input { margin: 0; accent-color: var(--accent); }
.pastille { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.reglage { display: flex; align-items: center; gap: 8px; font-family: var(--etroit); font-size: 14px; }
.reglage label { color: var(--encre-douce); }
.reglage input { accent-color: var(--accent); }
.reglage output { min-width: 7.5em; }

/* Onglets */
.onglets {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px;
  padding: 0 24px; border-bottom: 1px solid var(--trait);
}
.onglets button {
  padding: 8px 0 7px; font: inherit; font-weight: 500; color: var(--encre-douce); background: none;
  border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.onglets button[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--encre); }
.onglets button[hidden] { display: none; }
.axe-y { display: flex; gap: 6px; align-items: baseline; margin-left: auto; font-family: var(--etroit); font-size: 14px; }
.axe-y[hidden] { display: none; }
.axe-y label { color: var(--encre-douce); }
.axe-y select, .comparer select {
  font: inherit; color: var(--encre); background: var(--fond-graphe); border: 1px solid var(--trait); border-radius: 3px;
}
.compte { margin: 0; color: var(--encre-douce); font-family: var(--etroit); font-size: 14px; }

/* Vue principale */
.vue { position: relative; padding: 8px 16px 0; }
.graphe-vue { width: 100%; height: min(62vh, 640px); }
.message { color: var(--encre-douce); max-width: 60ch; }
.vue .message { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; margin: 0; }

/* Détail : fiche, et colonne des mots proches */
.detail {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 24px;
  padding: 12px 24px 32px; border-top: 1px solid var(--trait);
}
.fiche h2 { margin: 4px 0 2px; font-size: 26px; font-weight: 600; font-stretch: 88%; }
.fiche .nature { margin: 0 0 6px; color: var(--encre-douce); font-family: var(--etroit); }
.fiche .phrases { margin: 0 0 8px; padding: 0; list-style: none; max-width: 75ch; }
.fiche .phrases li { margin: 2px 0; }
.fiche .phrases .marque { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.fiche .graphe-mot { height: 300px; }
.fiche .graphes-secondaires { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fiche .graphes-secondaires > div { height: 170px; }
.fiche .pied { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin: 8px 0 0; font-family: var(--etroit); }
.fiche a { color: var(--accent); }
.comparer { display: flex; gap: 6px; align-items: baseline; font-size: 14px; }
.comparer label { color: var(--encre-douce); }
.comparer .absent { color: var(--encre-douce); }

.voisins h3 { margin: 6px 0 2px; font-size: 15px; font-weight: 600; }
.voisins .explication { margin: 0 0 8px; color: var(--encre-douce); font-family: var(--etroit); font-size: 13px; max-width: 40ch; }
.voisins ol { margin: 0; padding: 0; list-style: none; }
.voisins li { display: grid; grid-template-columns: 1fr 96px; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--trait); }
.voisins button {
  padding: 0; font: inherit; text-align: left; color: var(--encre); background: none; border: 0; cursor: pointer;
}
.voisins button:hover { color: var(--accent); }
.voisins .motif { display: block; font-family: var(--etroit); font-size: 13px; color: var(--encre-douce); }
.voisins svg { width: 96px; height: 26px; }

@media (max-width: 860px) {
  .barre { padding: 12px 14px 8px; }
  .note-corpus { margin: -4px 14px 8px; }
  .onglets { padding: 0 14px; }
  .axe-y { margin-left: 0; }
  .detail { grid-template-columns: 1fr; padding: 12px 14px 28px; }
  .fiche .graphes-secondaires { grid-template-columns: 1fr; }
  .graphe-vue { height: 55vh; }
  .titre h1, .choix-corpus, .titre .periode { font-size: 19px; }
}

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