/* Loupe (magnifier) – page carte uniquement */
.history-loupe{ position:relative; display:inline-block; touch-action:none; cursor: crosshair; }
.history-loupe img{ display:block; width:100%; height:auto; }

.history-lens{
  position:absolute;
  width:var(--lens-size, 220px); height:var(--lens-size, 220px);
  border-radius:50%;
  border:1px solid rgba(0,0,0,.25);
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0,0,0,.35), 0 6px 24px rgba(0,0,0,.25);
  pointer-events:none; display:none;
  background-repeat:no-repeat; background-position:0 0;
  image-rendering:auto;
  will-change: left, top, background-position;
}
.history-loupe.is-active .history-lens{ display:block; }

@media (max-width: 700px){
  .history-lens{ width:160px; height:160px; }
}

/* Optionnels (utiles pour la page plan) */
.history-notice{
  max-width: none;
  padding: 12px 16px;
  background: var(--fond-alt, #f7f9fc);
  border: 1px solid var(--bordure, #d9e2ec);
  border-radius: 8px;
  line-height: 1.55;
  width: min(100%, var(--plan-w, var(--content-width, 1400px)));
  margin-inline: auto;
}
.history-notice h3{ margin: 0 0 .5rem; font-size: clamp(1.1rem, 2.2vw, 1.3rem); }
.history-notice .history-refs{ margin-top: .35rem; font-size: .95em; color: var(--muted, #555); }

/* Légende alternative si tu l’utilises sur cette page */
.history-figure .history-legend{
  margin-top: 8px;
  font-size: .95em;
  color: var(--muted, #555);
}

/* ====== Histoire : adoucir le fond des encarts texte ====== */

/* 1) Variables locales (dans le bloc existant main.history-page) */
main.history-page {
  /* garde tes autres variables... */
  /* On calcule le fond des boîtes à partir de --fond en l’éclaircissant légèrement */
  --history-box-bg: color-mix(in oklch, var(--fond, #f2f4f7) 88%, white);
  --history-border: 1px solid color-mix(in oklch, var(--fond, #f2f4f7) 70%, black 7%);
  --history-radius: 12px; /* au besoin */
  --history-gap: 16px;    /* au besoin */
}

/* 2) Application aux encarts de texte */
.history-box {
  background: var(--history-box-bg);
  border: var(--history-border);
  border-radius: var(--history-radius, 10px);
  padding: 12px 14px;
}

/* 3) Fallback si color-mix n’est pas supporté (vieux navigateurs) */
@supports not (color: color-mix(in oklch, white, black)) {
  main.history-page {
    --history-box-bg: #f6f8fb;         /* choisis une teinte proche de ton fond global */
    --history-border: 1px solid #e6ebf2;
  }
}

/* 4) Optionnel : léger ajustement en mode sombre pour garder du contraste */
@media (prefers-color-scheme: dark) {
  main.history-page {
    /* on garde un encart un peu plus clair que le fond, mais pas blanc éclatant */
    --history-box-bg: color-mix(in oklch, var(--fond, #0f172a) 92%, white 8%);
    --history-border: 1px solid color-mix(in oklch, var(--fond, #0f172a) 75%, white 18%);
  }
}