/* Console super-admin.
   Palette et échelles : /design.css (bloc :root[data-console="admin"]).
   Composants communs (boutons, tableaux, champs, cartes, badges) :
   /composants.css. Ici, uniquement ce qui n'existe que dans cette console. */

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); }

[hidden] { display: none !important; }

/* --- Caractéristiques d'une fiche vin --- */
.carac-famille { margin-bottom: var(--esp-3); }
.carac-famille h4 { margin: var(--esp-1) 0 var(--esp-2); font-size: var(--txt-sm); color: var(--accent-fort); }
.carac-options { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); }
.carac-options label { display: flex; align-items: center; gap: var(--esp-1); color: var(--ink); font-weight: 400; margin: 0; }
.carac-options input { width: auto; }

/* --- Sélection multiple dans la liste des vins --- */
.bulk-bar {
  display: flex; align-items: center; gap: var(--esp-3);
  background: var(--erreur-fond); border: 1px solid color-mix(in srgb, var(--erreur) 25%, transparent);
  border-radius: var(--r-sm); padding: var(--esp-2) var(--esp-3); margin-bottom: var(--esp-3);
  font-size: var(--txt-sm);
}
.icon-del {
  border: none; background: transparent; cursor: pointer; font-size: 1rem;
  padding: var(--esp-1) var(--esp-2); border-radius: var(--r-sm); color: var(--muted);
}
.icon-del:hover { background: var(--erreur-fond); color: var(--erreur); }

/* --- En-têtes de tableau triables (liste des vins) --- */
.th-tri { cursor: pointer; user-select: none; white-space: nowrap; }
.th-tri:hover { background: var(--line); color: var(--accent-fort); }
.th-tri:focus-visible { outline: 2px solid var(--accent-fort); outline-offset: -2px; }
.th-tri.on { color: var(--accent-fort); }
.tri-fleche { display: inline-block; width: .9em; margin-left: var(--esp-1); font-size: .85em; }

/* --- Importation : cartes source et fiche proposée --- */
.ing-card {
  display: grid;
  /* minmax(0, 1fr) et non 1fr : par défaut une colonne de grille ne descend
     pas sous la largeur de son contenu, si bien qu'un nom de vin long
     poussait la colonne et faisait sortir les boutons de la carte. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--esp-3);
}
.ing-source, .ing-fiche {
  background: var(--surface); padding: var(--esp-4);
  /* Un nom sans espace, une URL, un texte source brut : rien ne doit
     déborder. On coupe le mot en dernier recours seulement. */
  min-width: 0; overflow-wrap: anywhere;
}
.ing-source { background: var(--tint); }
.ing-label {
  font-size: var(--txt-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; margin-bottom: var(--esp-2);
}
.ing-raw {
  font-family: var(--police-mono); font-size: var(--txt-sm);
  /* pre-wrap seul garde les longues suites de points d'une carte imprimée
     sur une seule ligne : il faut autoriser la coupure. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.kv { font-size: var(--txt-sm); color: var(--ink); margin-top: var(--esp-1); }
.ing-actions { margin-top: var(--esp-3); display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.flags { margin-top: var(--esp-2); display: flex; gap: var(--esp-1); flex-wrap: wrap; }
.flag {
  background: var(--attention-fond); color: var(--attention);
  font-size: var(--txt-xs); padding: .1rem var(--esp-2); border-radius: var(--r-plein);
}


/* --- Sous-onglets (suivi commercial) --- */
.subtabs { display: flex; gap: var(--esp-1); flex-wrap: wrap; margin-bottom: var(--esp-4); border-bottom: 1px solid var(--line); }
.subtab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: var(--esp-2) var(--esp-4); cursor: pointer; color: var(--muted);
  font: inherit; font-size: var(--txt-sm);
}
.subtab:hover { color: var(--ink); }
.subtab.on { color: var(--accent-fort); border-bottom-color: var(--accent-fort); font-weight: 600; }
.suivi-sec { margin-bottom: var(--esp-6); }
.suivi-sec h3 { font-size: var(--txt-md); margin: 0 0 var(--esp-2); }
.pill-renew {
  background: var(--attention-fond); color: var(--attention); border-radius: var(--r-plein);
  padding: .05rem var(--esp-2); font-size: var(--txt-xs); font-weight: 600;
}

/* --- Panneau d'enrichissement IA --- */
.enrich-panel {
  margin-top: var(--esp-3); padding: var(--esp-3);
  border: 1px dashed var(--accent); border-radius: var(--r-sm); background: var(--tint-soft);
}
/* Progression de l'enrichissement. Le même cadre que le panneau de résultat,
   puisque l'un remplace l'autre au même endroit : l'attente occupe la place
   que prendra la réponse, rien ne saute à l'arrivée. */
.enrich-progres {
  margin-top: var(--esp-3); padding: var(--esp-3);
  border: 1px dashed var(--line); border-radius: var(--r-sm); background: var(--tint-soft);
}
/* L'étape en cours se lit en premier ; les précédentes restent visibles, en
   retrait, pour montrer le chemin parcouru. */
.enrich-etape { margin: 0; display: flex; align-items: center; gap: var(--esp-2); font-size: var(--txt-sm); }
.enrich-point {
  width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent);
  animation: enrich-battement 1.2s ease-in-out infinite;
}
@keyframes enrich-battement { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Un téléphone qui demande moins d'animation ne doit pas voir ce point clignoter. */
@media (prefers-reduced-motion: reduce) { .enrich-point { animation: none; } }
.enrich-journal {
  margin: var(--esp-2) 0 0; padding-left: calc(8px + var(--esp-2));
  list-style: none; color: var(--muted); font-size: var(--txt-xs);
}
.enrich-journal li { padding: 1px 0; }
.enrich-garde { margin-bottom: var(--esp-2); }
.enrich-table { width: 100%; border-collapse: collapse; margin: var(--esp-2) 0; font-size: var(--txt-sm); }
.enrich-table th, .enrich-table td { text-align: left; padding: var(--esp-1) var(--esp-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.enrich-table th { position: static; background: none; }
.enrich-table td.av { color: var(--muted); }
.enrich-table td.ap { color: var(--ink); font-weight: 600; }

/* Compteur de la file d'enrichissement. Discret : il dit ce qui se passe en
   arrière-plan sans prendre la place du tableau. Il disparaît quand la file
   est vide, parce qu'un compteur à zéro n'apprend rien. */
.file-compteur {
  display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
  margin-bottom: var(--esp-3); padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--tint-soft); color: var(--muted); font-size: var(--txt-sm);
}
.file-lien { color: var(--accent); font-weight: 600; }
/* Une file en pause n'est pas une file lente : elle doit se distinguer. */
.file-pause { color: var(--erreur); font-weight: 600; }

/* Certification bio ou biodynamie : la case, puis le label quand elle est
   cochée. Le label se replie sous la case plutôt qu'à côté, pour que la grille
   ne se déforme pas selon qu'il est visible ou non. */
.certif-champ { display: flex; flex-direction: column; gap: var(--esp-1); }
.certif-champ .field-check { align-self: start; }

/* --- Photo de référence d'une fiche vin --- */
.bo-photo { display: flex; align-items: center; gap: var(--esp-3); margin-top: var(--esp-3); flex-wrap: wrap; }
.bo-thumb { height: 48px; border-radius: var(--r-sm); border: 1px solid var(--line); object-fit: cover; }

/* --- Connexion --- */
.login-wrap { max-width: 400px; margin: 4rem auto; padding: 0 var(--esp-4); }
.login-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--ombre-2); padding: var(--esp-6);
}
.login-card h1 { margin: 0 0 var(--esp-1); font-size: var(--txt-xl); }
.login-card .brand-line { color: var(--accent-sombre); font-weight: 700; letter-spacing: .5px; margin-bottom: var(--esp-5); }
.login-card .brand-line span { font-weight: 300; }
.login-card .field { margin-bottom: var(--esp-4); }
.login-card .btn { width: 100%; margin-top: var(--esp-2); }

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  th.hide-sm, td.hide-sm { display: none; }
}

/* Cartes proposées au client : trois branches exclusives, pas deux
   interrupteurs. Chaque option porte son cas d'usage, pour qu'on choisisse
   sans avoir à deviner. */
.cartes-choix { display: flex; flex-direction: column; gap: .5rem; margin-top: .3rem; }
.cartes-option { display: flex; align-items: flex-start; gap: .6rem; margin: 0;
  padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; font-weight: 400; }
.cartes-option:hover { border-color: var(--accent-fort); }
.cartes-option input { width: auto; margin: .15rem 0 0; accent-color: var(--accent-fort); }
.cartes-option b { display: block; font-size: var(--txt-sm); }
.cartes-option small { display: block; color: var(--muted); font-size: var(--txt-xs); margin-top: .1rem; }
.cartes-option:has(input:checked) { border-color: var(--accent-fort); background: var(--tint); }

/* Bandeau d'une fiche en brouillon. Il dit ce qui manque, nommément : une
   fiche « incomplète » sans préciser quoi oblige à chercher. */
.bandeau-brouillon {
  margin-bottom: var(--esp-3); padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--information); border-radius: var(--r-sm);
  background: var(--information-fond); color: var(--information);
  font-size: var(--txt-sm);
}
.manque-brouillon { color: var(--information); }

/* Écran de la file d'enrichissement. Quatre tuiles d'état, cliquables : le
   chiffre et le filtre sont la même chose, inutile de les séparer. */
.enr-tuiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--esp-3); margin-bottom: var(--esp-3);
}
.enr-tuile {
  display: flex; flex-direction: column; gap: var(--esp-1);
  padding: var(--esp-3); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.enr-tuile:hover { border-color: var(--accent); }
.enr-tuile strong { font-size: var(--txt-xl); line-height: 1; }
.enr-tuile span { font-size: var(--txt-sm); color: var(--muted); }
.enr-tuile.enr-erreur strong { color: var(--erreur); }
.enr-tuile.enr-propose strong { color: var(--attention); }
.enr-tuile.enr-en_cours strong { color: var(--information); }
.enr-h2 { font-size: var(--txt-md); margin: var(--esp-6) 0 var(--esp-2); }
/* Une cause d'échec est une phrase entière, parfois longue : elle se coupe
   plutôt que de pousser la colonne des actions hors du tableau. */
.enr-cause {
  color: var(--muted); font-size: var(--txt-sm);
  max-width: 34ch; overflow-wrap: anywhere;
}

/* --- Le sas d'import : sélection, doublons, colonnes non reprises --- */
.sas-explication { color: var(--muted); margin: 0 0 var(--esp-3); }
.sas-selection {
  display: flex; align-items: center; gap: var(--esp-4);
  margin-bottom: var(--esp-3); font-size: var(--txt-sm);
}
.sas-selection label { display: flex; align-items: center; gap: var(--esp-2); margin: 0; font-weight: 400; }
.sas-selection input { width: auto; }
/* La case vit dans l'étiquette de la colonne source : elle est au bord de la
   carte, là où l'oeil descend pour cocher une colonne entière. */
.ing-select { display: inline-flex; vertical-align: middle; margin-right: var(--esp-2); }
.ing-select input { width: auto; margin: 0; }
/* Une ligne rejetée reste lisible, mais cesse d'attirer l'oeil : elle n'est
   plus du travail à faire. */
.ing-rejetee { opacity: .62; }
.badge.sas-rejete { background: var(--erreur-fond); color: var(--erreur); }
.badge.sas-valide { background: var(--succes-fond); color: var(--succes); }
.badge.sas-non { background: var(--tint); color: var(--muted); }

.sas-doublon, .sas-ressemble {
  margin-top: var(--esp-2); padding: var(--esp-2) var(--esp-3);
  border-radius: var(--r-sm); font-size: var(--txt-sm);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2);
}
.sas-doublon { background: var(--attention-fond); color: var(--attention); }
.sas-ressemble { background: var(--tint); color: var(--muted); }
.sas-doublon .kv, .sas-ressemble .kv { margin: 0; color: inherit; }

.rapport-import {
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--esp-4); margin-bottom: var(--esp-4);
}
.rapport-liste { margin: var(--esp-2) 0 0; padding-left: var(--esp-4); font-size: var(--txt-sm); }
.rapport-liste li { margin-bottom: var(--esp-1); }
.rapport-coches { color: var(--attention); font-weight: 600; }

/* Les cinq étapes du parcours, un badge par étape. */
.badge.etape-importe { background: var(--tint); color: var(--muted); }
.badge.etape-enrichissement { background: var(--information-fond); color: var(--information); }
.badge.etape-proposition { background: var(--attention-fond); color: var(--attention); }
.badge.etape-valide { background: var(--succes-fond); color: var(--succes); }
.badge.etape-rejete { background: var(--erreur-fond); color: var(--erreur); }