/* Mon compte › Appareils connectés (js/components/connected-devices.js) */

.cd-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cd-device {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
}

.cd-current { border-color: var(--color-border-strong); }

.cd-icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

/* Pas d'icône tablette dédiée : le smartphone, couché. */
.cd-icon-tablet svg { transform: rotate(90deg); }

.cd-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cd-title {
  font-weight: 600;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.cd-badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--color-success-light);
  color: var(--color-success);
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
}

.cd-meta {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Icônes posées dans le fil du texte (pas de flex : il découperait la
   phrase et le lien en colonnes). */
.cd-meta svg,
.cd-coplanning svg { vertical-align: -2px; }

.cd-approx { opacity: 0.8; }

.cd-revoke { flex: none; }

.cd-coplanning {
  margin: var(--space-4) 0 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.cd-footnote {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

@media (max-width: 480px) {
  .cd-device { flex-wrap: wrap; }
  .cd-revoke { width: 100%; }
}