/* La modale d'import de captures.

   Chaque ligne du récapitulatif est une carte plutôt qu'une rangée de tableau :
   sur mobile, un tableau à cinq colonnes déborde, et c'est justement sur mobile
   que les captures se prennent. */

.import-captures-modal{
  max-width:min(640px, 94vw);
}

.import-captures-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:60vh;
  overflow-y:auto;
  padding:4px 2px;
}

.import-captures-aide{
  margin:0;
  color:var(--muted, #9aa);
  font-size:.92rem;
  line-height:1.45;
}

/* Un seul seuil pour les trois gestes : le champ fichier transparent couvre
   tout le cadre, tandis que drop et paste rejoignent le même traitement JS. */
.import-captures-depot{
  position:relative;
  isolation:isolate;
  display:grid;
  justify-items:center;
  align-content:center;
  gap:7px;
  min-height:188px;
  padding:28px 22px 18px;
  overflow:hidden;
  border:1px dashed rgba(217,164,65,.64);
  border-radius:14px;
  background:
    linear-gradient(135deg, rgba(217,164,65,.08), transparent 42%),
    var(--obsidian-2);
  text-align:center;
  box-shadow:inset 0 0 0 1px rgba(240,198,116,.04);
  transition:border-color .16s ease, box-shadow .16s ease,
    transform .16s ease, background-color .16s ease;
}

/* Les quatre angles évoquent un cadre de capture sans ajouter d'illustration
   étrangère au vocabulaire obsidienne/or de NOVA. */
.import-captures-depot::before{
  content:"";
  position:absolute;
  inset:10px;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(var(--gold),var(--gold)) left top/22px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left top/1px 22px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top/22px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top/1px 22px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left bottom/22px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left bottom/1px 22px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom/22px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom/1px 22px no-repeat;
  opacity:.38;
}

.import-captures-depot.is-dragging{
  transform:translateY(-1px);
  border-color:var(--gold-bright);
  background-color:rgba(217,164,65,.08);
  box-shadow:0 0 0 3px rgba(217,164,65,.12),
    inset 0 0 34px rgba(217,164,65,.08);
}

.import-captures-depot:focus-within{
  outline:2px solid var(--gold-bright);
  outline-offset:2px;
}

.import-captures-depot-icone{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid var(--gold-deep);
  border-radius:50%;
  color:var(--gold-bright);
  font-family:var(--display);
  font-size:25px;
  line-height:1;
  background:radial-gradient(circle at 50% 30%, #2a2114, #110e09);
}

.import-captures-depot strong{
  color:var(--parchment);
  font-family:var(--display);
  font-size:1rem;
  letter-spacing:.035em;
}

.import-captures-depot-raccourci{
  color:var(--muted);
  font-size:.88rem;
}

.import-captures-depot-bouton{
  margin-top:3px;
  padding:7px 13px;
  border:1px solid var(--gold-deep);
  border-radius:999px;
  color:var(--gold-bright);
  font-size:.82rem;
  font-weight:700;
}

.import-captures-depot-message{
  min-height:1.25em;
  color:#e4a1a1;
  font-size:.82rem;
}

.import-captures-fichiers{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}

.import-captures-progression{
  margin:0;
  padding:14px 0;
  text-align:center;
  color:var(--muted, #9aa);
}

.import-captures-ligne{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 10px;
  padding:10px 12px;
  border:1px solid var(--line, #2c2c38);
  border-radius:10px;
}

/* L'état est ce qu'on lit en premier : il décide si la ligne demande une
   action. La couleur seule ne suffirait pas — le mot est toujours écrit. */
.import-captures-etat{
  flex:0 0 auto;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid currentColor;
}
.import-captures-ligne[data-statut="unique"] .import-captures-etat{ color:#5fbf7f; }
.import-captures-ligne[data-statut="ambigu"] .import-captures-etat{ color:#d8a748; }
.import-captures-ligne[data-statut="echec"] .import-captures-etat{ color:#c96a6a; }

.import-captures-piece{
  flex:1 1 200px;
  font-weight:600;
}

.import-captures-detail,
.import-captures-raison,
.import-captures-remplace{
  flex:1 1 100%;
  font-size:.88rem;
  color:var(--muted, #9aa);
}

/* Ce qui va être écrasé doit se voir sans être alarmant : le membre l'a voulu,
   mais il doit pouvoir s'en apercevoir avant de valider. */
.import-captures-remplace{ font-style:italic; }

.import-captures-conflit{
  flex:1 1 100%;
  font-size:.88rem;
  color:#d8a748;
}

.import-captures-choix{
  flex:1 1 100%;
  min-height:44px;
}

.import-captures-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:14px;
}

/* Le bouton d'ouverture vit parmi les commandes d'équipement de l'éditeur. */
.import-captures-open{
  width:100%;
  margin-bottom:8px;
}

@media (max-width:480px){
  .import-captures-depot{
    min-height:164px;
    padding:22px 16px 14px;
  }
}

@media (prefers-reduced-motion:reduce){
  .import-captures-depot{transition:none}
}