/* 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; grid-template-columns: 1fr 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); }
.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); white-space: pre-wrap; }
.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);
}
.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; }

/* --- 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); }