/* ============================================================
   anim.css — styles communs aux animations archéologiques
   Gommecourt et environs. Générique : ne connaît aucun sujet.
   ============================================================ */

.anim {
  /* Palette. Redéfinissable par le thème ou par page. */
  --anim-craie:        #EFE8D6;
  --anim-craie-creuse: #DED3B8;
  --anim-encre:        #2B2621;
  --anim-encre-douce:  #6B6154;
  --anim-ocre:         #B0742C;
  --anim-terre:        #8C4526;
  --anim-seine:        #5C7C69;
  --anim-fond:         var(--anim-craie);
  --anim-surface:      #F6F1E4;
  --anim-filet:        #C9BC9C;
  --anim-texte:        var(--anim-encre);
  --anim-texte-doux:   var(--anim-encre-douce);

  /* Polices : celles du thème d'abord, repli ensuite. */
  --anim-titre: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  --anim-corps: var(--font-body, system-ui, -apple-system, sans-serif);
  --anim-mono:  var(--font-mono, "IBM Plex Mono", ui-monospace, "SF Mono", monospace);

  margin: 2.5rem 0;
  font-family: var(--anim-corps);
  font-size: 15px;
  line-height: 1.55;
  color: var(--anim-texte);
}

@media (prefers-color-scheme: dark) {
  .anim:not([data-theme="light"]) {
    --anim-craie:#E3D9C0; --anim-craie-creuse:#8E8266;
    --anim-encre:#EDE6D4; --anim-encre-douce:#A79C89;
    --anim-ocre:#D69B4E;  --anim-terre:#C4714A; --anim-seine:#84A791;
    --anim-fond:#1B1814;  --anim-surface:#231F1A; --anim-filet:#4A4238;
    --anim-texte:#EDE6D4; --anim-texte-doux:#A79C89;
  }
}
.anim[data-theme="dark"] {
  --anim-craie:#E3D9C0; --anim-craie-creuse:#8E8266;
  --anim-encre:#EDE6D4; --anim-encre-douce:#A79C89;
  --anim-ocre:#D69B4E;  --anim-terre:#C4714A; --anim-seine:#84A791;
  --anim-fond:#1B1814;  --anim-surface:#231F1A; --anim-filet:#4A4238;
  --anim-texte:#EDE6D4; --anim-texte-doux:#A79C89;
}

.anim * { box-sizing: border-box; }

/* ---------- mise en page ---------- */
.anim-scene { display: grid; grid-template-columns: 1fr 290px; gap: 22px; align-items: start; }
@media (max-width: 820px) { .anim-scene { grid-template-columns: 1fr; } }

.anim-planche {
  position: relative; container-type: inline-size;
  background: var(--anim-surface); border: 1px solid var(--anim-filet); padding: 12px;
}
.anim-planche svg { display: block; width: 100%; height: auto; }
.anim-coupe[hidden], .anim-plan[hidden] { display: none; }

.anim-panneau {
  background: var(--anim-surface); border: 1px solid var(--anim-filet); padding: 18px 18px 20px;
}
.anim-num {
  font-family: var(--anim-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--anim-ocre); text-transform: uppercase;
}
.anim-titre {
  font-family: var(--anim-titre); font-size: 1.55rem; font-weight: 600;
  margin: 2px 0; line-height: 1.15; color: var(--anim-texte);
}
.anim-date {
  font-family: var(--anim-mono); font-size: 11.5px; color: var(--anim-texte-doux);
  margin: 0 0 12px; font-variant-numeric: tabular-nums;
}
.anim-texte { font-size: 13.8px; margin: 0 0 14px; }
.anim-cotes {
  margin: 0; padding: 12px 0 0; border-top: 1px solid var(--anim-filet);
  font-size: 12.5px; display: grid; grid-template-columns: 1fr auto; gap: 5px 12px;
}
.anim-cotes dt { color: var(--anim-texte-doux); }
.anim-cotes dd {
  margin: 0; font-family: var(--anim-mono); font-size: 12px;
  color: var(--anim-ocre); text-align: right; font-variant-numeric: tabular-nums;
}

/* ---------- commandes ---------- */
.anim-barre { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.anim button {
  font: inherit; font-size: 13px; cursor: pointer; background: var(--anim-surface);
  color: var(--anim-texte); border: 1px solid var(--anim-filet); padding: 7px 15px;
}
.anim button:hover { border-color: var(--anim-ocre); }
.anim button:focus-visible { outline: 2px solid var(--anim-ocre); outline-offset: 2px; }
.anim-frise { display: flex; flex: 1 1 320px; min-width: 240px; }
.anim-frise button {
  flex: 1; border-left: none; text-align: center; padding: 7px 4px;
  font-family: var(--anim-mono); font-size: 11px; letter-spacing: .06em;
}
.anim-frise button:first-child { border-left: 1px solid var(--anim-filet); }
.anim-frise button[aria-current="true"] {
  background: var(--anim-ocre); color: var(--anim-craie); border-color: var(--anim-ocre);
}
.anim-frise button.en-coupe { outline: 2px solid var(--anim-terre); outline-offset: -2px; }

/* ---------- ouverture sur la photo ---------- */
.anim-survol {
  position: absolute; inset: 12px; z-index: 2; overflow: hidden;
  display: flex; align-items: flex-end; background: var(--anim-surface);
}
.anim-survol img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 2.6s cubic-bezier(.4,0,.2,1), opacity 1.1s ease 1.5s;
}
.anim-survol-txt {
  position: relative; z-index: 1; padding: 18px 20px 20px; max-width: 46ch; width: 100%;
  background: linear-gradient(to top, rgba(20,17,14,.88), rgba(20,17,14,.6) 70%, transparent);
  color: #F2EADA; transition: opacity .5s ease;
}
.anim-survol-t { font-family: var(--anim-titre); font-size: 1.5rem; margin: 0 0 6px; font-weight: 600; }
.anim-survol-p { font-size: 13.2px; margin: 0 0 14px; line-height: 1.5; }
.anim-survol button {
  background: rgba(242,234,218,.14); color: #F2EADA; border: 1px solid rgba(242,234,218,.5);
}
.anim-survol button:hover { background: rgba(242,234,218,.26); border-color: #F2EADA; }

.anim-regle {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  padding: 7px 9px; background: rgba(20,17,14,.55);
  transition: opacity .7s ease 2.5s;
}
.anim-regle-barre { display: block; height: 3px; background: #F2EADA; box-shadow: 0 0 0 1px rgba(20,17,14,.5); }
.anim-regle-lab { font-family: var(--anim-mono); font-size: 10px; letter-spacing: .1em; color: #F2EADA; }

.anim-survol[data-zoom="1"] img { opacity: 0; }
.anim-survol.parti { pointer-events: none; }
.anim-survol.parti .anim-survol-txt,
.anim-survol.parti .anim-regle { opacity: 0; transition: opacity .4s ease; }
.anim-survol.parti:not(.retour) { opacity: 0; transition: opacity .9s ease; }
.anim-survol.parti.retour { opacity: .5; transition: opacity 1.6s ease; }
.anim-survol.parti.retour img { opacity: .8; transition: opacity 1.6s ease; }

/* ---------- clé, notes ---------- */
.anim-cle {
  margin-top: 26px; padding: 16px 18px;
  background: var(--anim-surface); border: 1px solid var(--anim-filet);
}
.anim-cle h3 {
  font-family: var(--anim-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--anim-texte-doux); margin: 0 0 12px; font-weight: 500;
}
.anim-cle ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 22px; margin: 0; padding: 0; list-style: none; font-size: 13px;
}
.anim-cle li { display: flex; gap: 9px; align-items: flex-start; }
.anim-cle svg { flex: 0 0 auto; margin-top: 2px; }

.anim-note {
  margin-top: 26px; padding: 13px 16px; border-left: 3px solid var(--anim-terre);
  background: var(--anim-surface); font-size: 13.3px;
}
.anim-credit {
  font-family: var(--anim-mono); font-size: 10.5px;
  color: var(--anim-texte-doux); margin: 8px 0 0; letter-spacing: .04em;
}
/* La ligne de source est un <figcaption>, et les thèmes l'habillent presque toujours :
   centré, plus gros, parfois en italique. Résultat, elle jure avec le crédit juste
   au-dessus, qui porte pourtant la même classe. Ce sélecteur est volontairement plus
   spécifique pour reprendre la main, et un filet sépare les deux mentions. */
.anim figcaption.anim-credit {
  text-align: left; font-style: normal; font-size: 10.5px; line-height: 1.55;
  color: var(--anim-texte-doux);
  margin: 13px 0 0; padding-top: 10px; border-top: 1px solid var(--anim-filet);
}

/* ---------- états des structures ---------- */
.anim .lot { transition: opacity .9s ease; }
@media (prefers-reduced-motion: reduce) { .anim .lot { transition: none; } }
.anim .lot[data-etat="futur"]  { opacity: 0; }
.anim .lot[data-etat="passe"]  { opacity: .28; }
.anim .lot[data-etat="actuel"] { opacity: 1; }
.anim .lot[data-etat="passe"] .trame { fill: none; stroke-dasharray: 1.2 1.4; }
.anim .lot[data-etat="passe"] .fosse-ext,
.anim .lot[data-etat="passe"] .fosse-int { fill: none; stroke-dasharray: 1.2 1.4; }
.anim .lot[data-etat="passe"] .cailloutis,
.anim .lot[data-etat="passe"] .degres { opacity: 0; }

/* ---------- vocabulaire de dessin : plans ---------- */
.anim .trame       { fill: url(#anim-tr); stroke: var(--anim-encre); stroke-width: .45; }
.anim .fosse-ext   { fill: var(--anim-craie-creuse); stroke: var(--anim-encre); stroke-width: .4; }
.anim .fosse-int   { fill: var(--anim-surface); stroke: var(--anim-encre); stroke-width: .35; }
.anim .entree      { fill: var(--anim-surface); stroke: none; }
.anim .cailloutis  { fill: var(--anim-craie-creuse); opacity: .35; stroke: none; }
.anim .creux       { fill: var(--anim-encre-douce); opacity: .75; }
.anim .degres      { fill: var(--anim-craie-creuse); stroke: var(--anim-encre-douce); stroke-width: .25; }
.anim .foyer       { fill: var(--anim-terre); opacity: .6; stroke: none; }
.anim .palis       { stroke: var(--anim-encre-douce); stroke-width: .45; stroke-dasharray: 1 1.1; fill: none; }
.anim .palis-per   { fill: none; stroke: var(--anim-encre-douce); stroke-width: .8; stroke-dasharray: 1.8 1.4; }
.anim .perib-restitue { fill: none; stroke: var(--anim-encre-douce); stroke-width: .5; stroke-dasharray: 1.2 2.2; opacity: .5; }
.anim .perib-perdu { fill: none; stroke: var(--anim-encre-douce); stroke-width: .4; stroke-dasharray: .6 3.2; opacity: .3; }
.anim .disparu     { fill: none; stroke: var(--anim-encre-douce); stroke-width: .4; stroke-dasharray: 1.2 2.4; opacity: .5; }
.anim .chemin      { stroke: var(--anim-craie-creuse); stroke-width: 1.4; opacity: .8; fill: none; }
.anim .circul      { fill: var(--anim-craie-creuse); opacity: .75; stroke: none; }
.anim .voie        { fill: var(--anim-craie-creuse); opacity: .55; stroke: none; }
.anim .poteau      { fill: var(--anim-encre-douce); }
.anim .marqueur    { fill: none; stroke: var(--anim-encre-douce); stroke-width: .4; stroke-dasharray: .9 .9; }
.anim .recup       { fill: none; stroke: var(--anim-terre); stroke-width: .45; stroke-dasharray: 1.5 1.5; }
.anim .silex       { fill: var(--anim-craie-creuse); stroke: var(--anim-encre-douce); stroke-width: .3; }
.anim .fosse-K     { fill: var(--anim-craie-creuse); stroke: var(--anim-encre); stroke-width: .4; opacity: .9; }
.anim .podium      { fill: var(--anim-craie); stroke: var(--anim-encre); stroke-width: .3; }
.anim .eau         { fill: var(--anim-seine); opacity: .8; stroke: none; }
.anim .hypo        { fill: none; stroke: var(--anim-terre); stroke-width: .4; stroke-dasharray: 1 .9; }
.anim .terrasse    { fill: var(--anim-craie-creuse); opacity: .32; stroke: none; }
.anim .terrasse-cour { fill: var(--anim-craie-creuse); opacity: .1; stroke: none; }
.anim .mur-per     { fill: none; stroke: var(--anim-encre); stroke-width: .75; stroke-linecap: square; }
.anim .mur-per.faible { stroke-width: .5; opacity: .6; }
.anim .cabane      { fill: var(--anim-terre); opacity: .5; stroke: var(--anim-terre); stroke-width: .05; }
.anim .amas        { fill: var(--anim-craie-creuse); stroke: var(--anim-encre-douce); stroke-width: .25; opacity: .8; }
.anim .annot       { stroke: var(--anim-encre-douce); stroke-width: .3; fill: none; }
.anim .annot text  { font-family: var(--anim-mono); font-size: 3px; fill: var(--anim-texte-doux); stroke: none; }
.anim .fleche      { fill: var(--anim-encre-douce); stroke: none; }

/* ---------- vocabulaire de dessin : coupes ---------- */
.anim .c-sol      { stroke: var(--anim-encre-douce); stroke-width: .06; }
.anim .c-creux    { fill: var(--anim-craie-creuse); stroke: var(--anim-encre-douce); stroke-width: .05; }
.anim .c-degre    { fill: none; stroke: var(--anim-encre-douce); stroke-width: .05; }
.anim .c-neg      { fill: var(--anim-craie-creuse); stroke: var(--anim-encre-douce); stroke-width: .04; opacity: .9; }
.anim .c-bois     { stroke: var(--anim-terre); stroke-width: .16; }
.anim .c-cloison  { fill: none; stroke: var(--anim-terre); stroke-width: .12; }
.anim .c-toit-h,
.anim .c-chaume   { fill: var(--anim-terre); opacity: .3; stroke: var(--anim-terre); stroke-width: .06; stroke-dasharray: .28 .2; }
.anim .c-remblai  { fill: var(--anim-craie-creuse); opacity: .55; }
.anim .c-torchis  { fill: var(--anim-craie); stroke: var(--anim-terre); stroke-width: .05; }
.anim .c-foyer    { fill: var(--anim-terre); opacity: .65; }
.anim .c-mur      { fill: url(#anim-trc); stroke: var(--anim-encre); stroke-width: .07; }
.anim .c-semelle  { fill: var(--anim-craie-creuse); }
.anim .c-craie    { fill: var(--anim-craie); stroke: none; }
.anim .c-podium   { fill: var(--anim-craie-creuse); stroke: var(--anim-encre); stroke-width: .05; }
.anim .c-tuiles   { fill: var(--anim-terre); opacity: .38; stroke: var(--anim-terre); stroke-width: .06; }
.anim .c-dosane   { fill: none; stroke: var(--anim-encre-douce); stroke-width: .07; }
.anim .c-eau      { fill: var(--anim-seine); opacity: .85; }
.anim .c-hypo     { fill: none; stroke: var(--anim-terre); stroke-width: .06; stroke-dasharray: .2 .18; }
.anim .c-hypo-l   { fill: none; stroke: var(--anim-terre); stroke-width: .08; stroke-dasharray: .3 .24; }
.anim .c-eboulis  { fill: var(--anim-terre); opacity: .5; }
.anim .c-cabane   { fill: var(--anim-terre); opacity: .5; stroke: var(--anim-terre); stroke-width: .05; }
.anim .c-disparu  { fill: none; stroke: var(--anim-encre-douce); stroke-width: .07; stroke-dasharray: .3 .26; opacity: .65; }
.anim .c-charbon  { fill: var(--anim-encre); opacity: .62; }
.anim .c-clayon   { stroke: var(--anim-terre); stroke-width: .05; opacity: .8; }
.anim .c-toise    { stroke: var(--anim-encre-douce); stroke-width: .045; fill: none; }
.anim .c-toise text,
.anim .c-lab      { font-family: var(--anim-mono); font-size: .42px; fill: var(--anim-texte-doux); stroke: none; }