/* ChronoMaps — registre du relevé géodésique : encre indigo sur papier froid.
   Le vermillon est réservé à l'incertitude et n'est jamais décoratif. */

@font-face {
  font-family: "Spectral";
  src: url("/vendor/spectral-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("/vendor/spectral-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("/vendor/spectral-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/vendor/archivo-variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --encre:        #16213b;
  --encre-douce:  #45536f;
  --encre-tenue:  #7b869b;
  --papier:       #d9e0e2;
  --papier-haut:  #e6ebec;
  --eau:          #afc4c9;
  --terre:        #c9c3b4;
  --vermillon:    #a52e1f;
  --or:           #b5892b;
  --trait:        #b3bdc0;

  --serif: "Spectral", Georgia, serif;
  --grotesque: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --rail: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --encre:       #e3e8ec;
    --encre-douce: #a9b4c4;
    --encre-tenue: #74808f;
    --papier:      #111a2b;
    --papier-haut: #1a2538;
    --eau:         #0d1420;
    --terre:       #2c3243;
    --vermillon:   #d9654f;
    --or:          #d7a948;
    --trait:       #2b374d;
  }
}
:root[data-theme="dark"] {
  --encre: #e3e8ec; --encre-douce: #a9b4c4; --encre-tenue: #74808f;
  --papier: #111a2b; --papier-haut: #1a2538; --eau: #0d1420;
  --terre: #2c3243; --vermillon: #d9654f; --or: #d7a948; --trait: #2b374d;
}

* { box-sizing: border-box; }

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

/* L'atelier occupe exactement une hauteur d'écran : carte ET frise doivent être
   visibles sans défiler, puisque la frise est la commande principale.
   Les réserves viennent ensuite, délibérément sous la ligne de flottaison. */
.application {
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

a { color: inherit; text-decoration-color: var(--encre-tenue); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--or); }

:is(button, select, input, svg, a):focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

/* ---------- bandeau ---------- */

.bandeau {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.7rem var(--rail);
  border-bottom: 1px solid var(--trait);
  background: var(--papier-haut);
}

.marque {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  margin: 0;
}

/* L'année est le seul chiffre qui gouverne toute la page : elle a droit à la taille. */
.annee-courante {
  margin: 0 auto 0 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.provenance {
  margin: 0;
  font-size: 0.78rem;
  color: var(--encre-douce);
  text-align: right;
}

/* ---------- atelier ---------- */

.atelier {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr) 19rem;
  min-height: 0;
}

.panneau {
  padding: 0.9rem var(--rail);
  overflow-y: auto;
  border-right: 1px solid var(--trait);
}
.panneau.mesures { border-right: 0; border-left: 1px solid var(--trait); }

.panneau h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  margin: 0 0 0.7rem;
  color: var(--encre-douce);
}
.panneau h2.titre-second { margin-top: 1.6rem; }

.champ { margin-bottom: 1.1rem; }
.champ > label {
  display: block;
  font-size: 0.8rem;
  color: var(--encre-douce);
  margin-bottom: 0.25rem;
}

select, input[type="number"] {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  color: var(--encre);
  background: var(--papier-haut);
  border: 1px solid var(--trait);
  border-radius: 2px;
  padding: 0.3rem 0.4rem;
}

.note {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--encre-tenue);
  margin: 0.3rem 0 0;
  max-width: 34ch;
}

.bascule label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.bascule input { accent-color: var(--or); }

.lecture { display: flex; flex-direction: column; gap: 0.45rem; }

button {
  font: inherit;
  font-size: 0.85rem;
  color: var(--encre);
  background: var(--papier-haut);
  border: 1px solid var(--trait);
  border-radius: 2px;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}
button:hover { border-color: var(--encre-douce); }

#lecture { font-weight: 600; }
#lecture[data-actif="oui"] { background: var(--encre); color: var(--papier-haut); border-color: var(--encre); }

.vitesses { display: flex; gap: 0.3rem; }
.vitesses button { flex: 1; font-size: 0.78rem; padding: 0.25rem 0; }
.vitesses button.actif { background: var(--encre); color: var(--papier-haut); border-color: var(--encre); }

.lien-reserves { font-size: 0.8rem; margin: 1.5rem 0 0; }

/* ---------- carte ---------- */

.carte-zone { position: relative; min-width: 0; }
#carte { position: absolute; inset: 0; }

.legende {
  position: absolute;
  left: 0.6rem; bottom: 0.6rem;
  background: color-mix(in srgb, var(--papier-haut) 88%, transparent);
  border: 1px solid var(--trait);
  border-radius: 2px;
  padding: 0.4rem 0.55rem;
  font-size: 0.74rem;
  color: var(--encre-douce);
}
.legende p { margin: 0.12rem 0; display: flex; align-items: center; gap: 0.4rem; }
.echantillon { width: 17px; height: 11px; display: inline-block; border: 1px solid var(--encre-tenue); }
.echantillon.terre { background: var(--terre); }
.echantillon.hachure {
  background: repeating-linear-gradient(45deg,
    var(--encre-douce) 0 1px, transparent 1px 4px);
}

/* ---------- classement ---------- */

.classement { list-style: none; margin: 0; padding: 0; }

.classement li {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr);
  gap: 0 0.4rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--trait) 55%, transparent);
  cursor: pointer;
}
.classement li:hover .nom { text-decoration: underline; text-decoration-color: var(--or); }

.classement .rang {
  font-size: 0.78rem;
  color: var(--encre-tenue);
  font-variant-numeric: tabular-nums;
  padding-top: 0.1rem;
}
.classement .nom {
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 1.25;
}
.classement .barre {
  grid-column: 2;
  height: 6px;
  margin: 0.25rem 0 0.1rem;
  background: var(--encre-douce);
  transition: width 320ms ease;
}
.classement li[data-resolution="grossiere"] .barre {
  background: repeating-linear-gradient(45deg,
    var(--encre-douce) 0 2px, color-mix(in srgb, var(--encre-douce) 35%, transparent) 2px 5px);
}
.classement li[data-choisi="oui"] .barre { background: var(--or); }
.classement .valeur {
  grid-column: 2;
  font-size: 0.76rem;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}
.classement .valeur .intervalle { color: var(--encre-tenue); }
.classement li[data-resolution="grossiere"] .valeur .intervalle { color: var(--vermillon); }

.fiabilite { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; }
.fiabilite dt { font-size: 0.95rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.fiabilite dd { margin: 0; font-size: 0.8rem; color: var(--encre-douce); align-self: center; }
.fiabilite dt[data-alerte="oui"] { color: var(--vermillon); }

/* ---------- frise ---------- */

.frise {
  border-top: 1px solid var(--trait);
  background: var(--papier-haut);
  padding: 0.5rem var(--rail) 0.7rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1rem;
  align-items: end;
}

.frise-commandes { display: flex; gap: 0.25rem; align-items: center; }
.frise-commandes button { width: 1.9rem; text-align: center; padding: 0.25rem 0; }
.frise-commandes input { width: 5.4rem; text-align: center; font-variant-numeric: tabular-nums; }

.grain { margin: 0; min-width: 0; }
.grain figcaption {
  font-size: 0.74rem;
  color: var(--encre-tenue);
  margin-bottom: 0.2rem;
  max-width: 72ch;
}

#ruban {
  display: block;
  width: 100%;
  height: 62px;
  cursor: ew-resize;
  background: color-mix(in srgb, var(--papier) 60%, transparent);
  border: 1px solid var(--trait);
  border-radius: 2px;
  touch-action: none;
}
#aire-total { fill: var(--encre-douce); }
#aire-grossiere { fill: var(--vermillon); }
#tete { stroke: var(--or); stroke-width: 3; }
#reperes line { stroke: var(--trait); stroke-width: 1; }
#reperes text {
  fill: var(--encre-tenue);
  font-family: var(--grotesque);
  font-size: 13px;
}

/* ---------- réserves ---------- */

.reserves {
  padding: 1.6rem var(--rail) 2rem;
  border-top: 1px solid var(--trait);
}
.reserves h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 0.9rem;
}
.colonnes { columns: 2 24rem; column-gap: 2rem; }
.colonnes p {
  margin: 0 0 0.8rem;
  font-size: 0.86rem;
  max-width: 62ch;
  break-inside: avoid;
}
.colonnes p::before {
  content: "";
  display: inline-block;
  width: 0.5rem; height: 0.5rem;
  margin-right: 0.45rem;
  background: var(--vermillon);
  vertical-align: 0.05rem;
}
.citation {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--encre-douce);
  max-width: 78ch;
  margin: 0.6rem 0 0;
}

/* ---------- fiche d'entité ---------- */

.fiche {
  position: fixed;
  right: 1rem; bottom: 1rem;
  width: min(26rem, calc(100vw - 2rem));
  max-height: 60vh;
  overflow-y: auto;
  background: var(--papier-haut);
  border: 1px solid var(--encre-douce);
  border-radius: 2px;
  padding: 0.9rem 1rem;
  z-index: 20;
}
.fiche .fermer {
  float: right;
  border: 0; background: none;
  font-size: 1.25rem; line-height: 1;
  padding: 0 0 0 0.5rem;
  color: var(--encre-douce);
}
.fiche h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 0.1rem;
}
.fiche .periode {
  font-size: 0.82rem;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.7rem;
}
.fiche dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.7rem; margin: 0 0 0.7rem; }
.fiche dt { font-size: 0.76rem; color: var(--encre-tenue); }
.fiche dd { margin: 0; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.fiche .alerte {
  background: color-mix(in srgb, var(--vermillon) 12%, transparent);
  border-left: 3px solid var(--vermillon);
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  margin: 0 0 0.7rem;
}
.fiche .source {
  font-size: 0.74rem;
  color: var(--encre-tenue);
  border-top: 1px solid var(--trait);
  padding-top: 0.5rem;
  margin: 0;
}

/* ---------- vide et erreur ---------- */

.vide {
  font-size: 0.84rem;
  color: var(--encre-douce);
  font-family: var(--serif);
  font-style: italic;
}

/* ---------- entrée en scène, une seule fois ---------- */

@media (prefers-reduced-motion: no-preference) {
  #aire-total, #aire-grossiere {
    clip-path: inset(0 100% 0 0);
    animation: devoiler 900ms 120ms ease-out forwards;
  }
  @keyframes devoiler { to { clip-path: inset(0 0 0 0); } }
}

/* ---------- écrans étroits ---------- */

@media (max-width: 62rem) {
  .application { height: auto; }
  .atelier { grid-template-columns: 1fr; }
  .panneau { border: 0; border-bottom: 1px solid var(--trait); overflow: visible; }
  .panneau.mesures { border-left: 0; border-bottom: 1px solid var(--trait); }
  .carte-zone { height: 58vh; order: -1; }
  #carte { position: relative; height: 100%; }
  .frise { grid-template-columns: 1fr; gap: 0.5rem; }
  .frise-commandes { justify-content: center; }
  .colonnes { columns: 1; }
  .annee-courante { font-size: 1.6rem; }
}