/* ═══════════════════════════════════════════════════════════════════════
   Strata Archeo — habillage « v2 »

   Chargé par-dessus style.css, actif seulement sous <html data-peau="v2">.
   L'ancien thème n'est pas touché : on bascule de l'un à l'autre dans
   Réglages, et l'on compare pour de vrai plutôt que de se souvenir.

   ── Ce qu'on cherche ──────────────────────────────────────────────────
   L'ancien thème était juste mais éteint : tout au même niveau, aucun
   relief, rien qui réponde au geste. On prend aux menus de jeu ce qui
   se transpose — la profondeur, la réponse au survol, l'entrée en scène,
   un accent qui rayonne — et on laisse ce qui ne se transpose pas.

   ── Ce qu'on refuse, et pourquoi ──────────────────────────────────────
   Un jeu vend une émotion ; cet outil vend un jugement. Trois règles
   tiennent tout le reste :

   1. AUCUN EFFET SUR LA DONNÉE. La carte, les vues de relief, les
      pictogrammes des découvertes ne reçoivent ni lueur, ni teinte, ni
      saturation ajoutée. Un archéologue doit pouvoir croire ce qu'il voit.
      Les effets s'arrêtent au cadre.
   2. RIEN QUI CLIGNOTE EN PERMANENCE. Une animation appelle l'œil ; une
      animation qui ne s'arrête pas le retient pour rien. Tout mouvement
      ici est déclenché par une action et se termine.
   3. LA VITESSE PLUTÔT QUE LA DURÉE. 120 à 260 ms. Au-delà, on attend
      l'interface au lieu de l'utiliser — et cet outil s'emploie huit
      heures d'affilée, pas dix minutes.

   `prefers-reduced-motion` supprime tout mouvement : ce n'est pas une
   politesse, certains ne peuvent pas travailler autrement.
   ═══════════════════════════════════════════════════════════════════════ */

[data-peau="v2"] {
  /* Le fond descend d'un cran et se teinte très légèrement de bleu : c'est
     ce qui permet aux panneaux de paraître posés dessus plutôt que découpés
     dedans. */
  --bg:        #090c11;
  --panel:     #121821;
  --panel-2:   #182029;
  --line:      #26313f;
  --line-soft: #1b232e;

  --amber:     #f0b45f;
  --amber-vif: #ffc978;

  /* Une seule lueur, déclinée. Les mêmes trois valeurs partout : c'est ce
     qui fait tenir l'ensemble comme un système plutôt qu'un empilement
     d'idées. */
  --lueur-faible: 0 0 0 1px rgba(240, 180, 95, .18);
  --lueur-nette:  0 0 0 1px rgba(240, 180, 95, .42), 0 0 18px -4px rgba(240, 180, 95, .38);
  --ombre-carte:  0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px -10px rgba(0, 0, 0, .8);

  --vite:  120ms cubic-bezier(.2, .8, .3, 1);
  --moyen: 190ms cubic-bezier(.2, .8, .3, 1);
  --ample: 260ms cubic-bezier(.16, 1, .3, 1);
}

/* ── Le fond ────────────────────────────────────────────────────────────
   Deux halos très étalés, fixes. Ils ne bougent pas et ne se remarquent
   pas ; ils empêchent seulement l'aplat de paraître mort. */
[data-peau="v2"] body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1100px 620px at 12% -8%,  rgba(240, 180, 95, .055), transparent 62%),
    radial-gradient(900px  520px at 96% 108%, rgba(94, 170, 168, .045), transparent 60%);
}
[data-peau="v2"] #app { position: relative; z-index: 1; }

/* ── Colonnes ──────────────────────────────────────────────────────────
   Un dégradé d'un point de luminosité suffit à donner une verticale. Plus
   serait perceptible, donc décoratif. */
[data-peau="v2"] #sidebar {
  background: linear-gradient(178deg, #141b25 0%, #10161e 100%);
  box-shadow: 1px 0 0 var(--line), 8px 0 24px -18px #000;
}
[data-peau="v2"] #details {
  background: linear-gradient(182deg, #141b25 0%, #10161e 100%);
  box-shadow: -1px 0 0 var(--line), -8px 0 24px -18px #000;
}

/* ── Marque ────────────────────────────────────────────────────────────
   Le nom reste d'une seule couleur. Un dégradé sur un logotype se lit comme
   un effet de traitement de texte : il fait bricolé là où il voulait faire
   soigné, et il affaiblit ce qui doit être le repère le plus stable de
   l'écran. Le relief vient de la pastille du repère et du trait de séparation
   — pas des lettres. */
[data-peau="v2"] .brand {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--line), transparent 78%) 1;
}
[data-peau="v2"] .brand-mark .brand-find {
  filter: drop-shadow(0 0 5px rgba(240, 180, 95, .55));
}
[data-peau="v2"] .brand-mark { transition: transform var(--ample); }
[data-peau="v2"] .brand:hover .brand-mark { transform: rotate(-4deg) scale(1.04); }

/* ── Onglets ───────────────────────────────────────────────────────────
   Le trait de l'onglet actif glisse d'un onglet à l'autre au lieu de
   sauter. C'est le détail qui coûte le moins et qui se sent le plus :
   l'œil suit le trait et sait d'où il vient. */
[data-peau="v2"] .tab {
  position: relative; overflow: hidden;
  transition: color var(--vite), background var(--vite);
}
[data-peau="v2"] .tab::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform var(--moyen);
}
[data-peau="v2"] .tab:hover { background: rgba(255, 255, 255, .022); }
[data-peau="v2"] .tab.is-active { border-bottom-color: transparent; }
[data-peau="v2"] .tab.is-active::after { transform: scaleX(1); }
[data-peau="v2"] .tab.is-active {
  text-shadow: 0 0 14px rgba(240, 180, 95, .35);
}

/* ── Boutons ───────────────────────────────────────────────────────────
   Trois états franchement distincts — repos, survol, appui. Un bouton qui
   ne s'enfonce pas laisse un doute d'un dixième de seconde sur le fait
   qu'on a bien cliqué, et ce doute fait cliquer deux fois. */
[data-peau="v2"] .btn {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #1d2530, #161d26);
  transition: border-color var(--vite), background var(--vite),
              transform var(--vite), box-shadow var(--vite);
}
[data-peau="v2"] .btn:hover:not(:disabled) {
  border-color: #3d4b5c;
  background: linear-gradient(180deg, #26313e, #1b232e);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -6px #000;
}
[data-peau="v2"] .btn:active:not(:disabled) {
  transform: translateY(0) scale(.985);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
}

/* Un trait de lumière traverse le bouton au survol. Une fois, pas en
   boucle : il souligne le passage de la souris, il n'attire pas. */
[data-peau="v2"] .btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%,
                              rgba(255, 255, 255, .07) 50%, transparent 62%);
  transform: translateX(-110%);
  transition: transform 520ms cubic-bezier(.2, .7, .3, 1);
  pointer-events: none;
}
[data-peau="v2"] .btn:hover:not(:disabled)::before { transform: translateX(110%); }

[data-peau="v2"] .btn-primary {
  background: linear-gradient(180deg, #4b3a20, #33281a);
  border-color: #6b5230;
}
[data-peau="v2"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #5d4726, #3d2f1d);
  border-color: var(--amber-dim);
  box-shadow: 0 0 20px -6px rgba(240, 180, 95, .45), 0 4px 12px -6px #000;
}

/* ── Fiches ────────────────────────────────────────────────────────────
   C'est l'objet le plus manipulé du logiciel : c'est là que le relief
   compte le plus. */
[data-peau="v2"] .card {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, #1a222c, #151c25);
  box-shadow: var(--ombre-carte);
  transition: border-color var(--vite), transform var(--vite),
              box-shadow var(--vite), background var(--vite);
}
/* Barre d'accent à gauche, qui se déplie de haut en bas. */
[data-peau="v2"] .card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--amber-vif), var(--amber-dim));
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform var(--moyen);
}
[data-peau="v2"] .card:hover {
  transform: translateX(2px);
  border-color: #3a4757;
  box-shadow: 0 2px 4px rgba(0,0,0,.5), 0 10px 26px -14px #000;
}
[data-peau="v2"] .card:hover::before { transform: scaleY(1); }

[data-peau="v2"] .card.is-active {
  background: linear-gradient(168deg, #241f16, #1b1811);
  border-color: var(--amber-dim);
  box-shadow: var(--lueur-nette), var(--ombre-carte);
}
[data-peau="v2"] .card.is-active::before { transform: scaleY(1); }

/* ── Entrée en scène ───────────────────────────────────────────────────
   Les fiches arrivent l'une après l'autre, décalées de 22 ms. Le décalage
   est plafonné : au-delà de dix, il tiendrait la liste en otage. */
@keyframes v2-entree {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
[data-peau="v2"] .card { animation: v2-entree var(--ample) both; }
[data-peau="v2"] .card:nth-child(1)  { animation-delay: 0ms; }
[data-peau="v2"] .card:nth-child(2)  { animation-delay: 22ms; }
[data-peau="v2"] .card:nth-child(3)  { animation-delay: 44ms; }
[data-peau="v2"] .card:nth-child(4)  { animation-delay: 66ms; }
[data-peau="v2"] .card:nth-child(5)  { animation-delay: 88ms; }
[data-peau="v2"] .card:nth-child(6)  { animation-delay: 110ms; }
[data-peau="v2"] .card:nth-child(7)  { animation-delay: 132ms; }
[data-peau="v2"] .card:nth-child(8)  { animation-delay: 154ms; }
[data-peau="v2"] .card:nth-child(n+9) { animation-delay: 176ms; }

/* ── Sections repliables ───────────────────────────────────────────────*/
[data-peau="v2"] .section-tete {
  position: relative;
  transition: background var(--vite), color var(--vite);
}
[data-peau="v2"] .section-tete:hover { background: rgba(255, 255, 255, .028); }
[data-peau="v2"] .section-tete::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--amber); opacity: 0;
  transition: opacity var(--vite);
}
[data-peau="v2"] .section-tete:hover::after { opacity: .8; }
[data-peau="v2"] .chevron { transition: transform var(--moyen); }

/* ── Chiffres ──────────────────────────────────────────────────────────
   Les grands nombres sont ce qu'on lit en premier dans le panneau de
   droite. Un dégradé les détache du libellé sans changer leur valeur. */
[data-peau="v2"] .stat {
  background: linear-gradient(168deg, #1a222c, #151c25);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: border-color var(--vite), transform var(--vite);
}
[data-peau="v2"] .stat:hover { border-color: #33404f; transform: translateY(-1px); }
[data-peau="v2"] .stat b {
  background: linear-gradient(180deg, #ffffff, #a9b8c9);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Étoiles ───────────────────────────────────────────────────────────
   C'est l'indicateur de confiance : il doit se voir de loin. Les étoiles
   pleines rayonnent, les vides restent franchement éteintes — l'écart
   entre les deux est l'information. */
[data-peau="v2"] .etoiles .est-plein {
  filter: drop-shadow(0 0 6px rgba(240, 180, 95, .5));
}
[data-peau="v2"] .etoiles .est-vide { color: #2a3441; }

/* ── En-têtes du panneau de droite ─────────────────────────────────────*/
[data-peau="v2"] .detail-section h3 {
  position: relative; padding-left: 11px;
}
[data-peau="v2"] .detail-section h3::before {
  content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 3px; height: 11px; border-radius: 2px;
  background: linear-gradient(180deg, var(--amber-vif), var(--amber-dim));
}

/* ── Messages ──────────────────────────────────────────────────────────
   Le message entre par la droite et se retire de même. Il n'apparaît plus
   d'un coup au milieu de nulle part. */
@keyframes v2-message {
  from { opacity: 0; transform: translateX(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
[data-peau="v2"] .toast {
  animation: v2-message var(--ample) both;
  box-shadow: 0 8px 28px -12px #000, var(--lueur-faible);
  backdrop-filter: blur(8px);
  background: rgba(24, 32, 41, .92);
}

/* ── Champs ────────────────────────────────────────────────────────────*/
[data-peau="v2"] .search input,
[data-peau="v2"] input[type="text"],
[data-peau="v2"] input[type="search"],
[data-peau="v2"] textarea,
[data-peau="v2"] select {
  transition: border-color var(--vite), box-shadow var(--vite),
              background var(--vite);
}
[data-peau="v2"] .search input:focus,
[data-peau="v2"] input[type="text"]:focus,
[data-peau="v2"] input[type="search"]:focus,
[data-peau="v2"] textarea:focus,
[data-peau="v2"] select:focus {
  border-color: var(--amber-dim);
  box-shadow: 0 0 0 3px rgba(240, 180, 95, .1);
  outline: none;
}

/* ── Boutons d'action des fiches ───────────────────────────────────────*/
[data-peau="v2"] .action-carte {
  transition: background var(--vite), color var(--vite), transform var(--vite);
}
[data-peau="v2"] .action-carte:hover { transform: scale(1.12); }
[data-peau="v2"] .action-carte:active { transform: scale(.94); }

/* ── Bascule de panneau ────────────────────────────────────────────────
   Le panneau de droite entre par la droite : on comprend d'où il vient,
   donc où il retournera. */
@keyframes v2-panneau-droit {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: none; }
}
[data-peau="v2"] #details:not(.hidden) {
  animation: v2-panneau-droit var(--ample) both;
}

/* ── Ce qui reste intouché ─────────────────────────────────────────────
   La carte et tout ce qu'elle porte. Aucune lueur, aucune ombre, aucun
   filtre : ce serait mentir sur la donnée, et c'est la donnée qu'on vend.
   La règle est écrite ici pour que la prochaine idée décorative s'y
   heurte avant d'être ajoutée.

   Une seule exception, nommée : le socle. C'est le plan du monde posé sous
   les fonds pour que la carte ne s'arrête pas au bord de la couverture, et
   il s'efface quand un autre fond le recouvre. Il ne porte rien de ce qui
   est analysé — sans quoi il n'aurait pas le droit d'être filtré non plus.
   Les descendants du socle restent visés par la règle : un filtre posé sur
   un plan s'applique à tout son contenu, et le remettre à `none` en dessous
   ne l'annule pas. */
[data-peau="v2"] #map,
[data-peau="v2"] #map *:not(.leaflet-socle-pane) {
  filter: none;
}

/* ── Mouvement réduit ──────────────────────────────────────────────────
   Réglage système. Tout s'arrête : il reste le relief, les dégradés et
   les couleurs, c'est-à-dire l'essentiel de ce que la v2 apporte. */
@media (prefers-reduced-motion: reduce) {
  [data-peau="v2"] *,
  [data-peau="v2"] *::before,
  [data-peau="v2"] *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
}