/* ==========================================================================
   MutuCash — Grille de connexion des mutuelles (identité Sapin & Papier)
   Variables : tokens.css (--mc-*)
   ========================================================================== */

.provider-card {
  background: var(--mc-blanc-chaud);
  border: 1px solid var(--mc-brume);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.provider-card:hover {
  border-color: var(--mc-bordure-verte);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -22px rgba(16, 23, 17, 0.28);
}

/* Organisme non disponible : carte grisée (logo désaturé, textes atténués),
   comme les enseignes « Bientôt » de La Pince. */
.provider-card.unavailable {
  background: var(--mc-papier);
}

.provider-card.unavailable:hover {
  border-color: var(--mc-brume);
  transform: none;
  box-shadow: none;
}

.provider-card.unavailable .provider-logo {
  filter: grayscale(1);
  opacity: 0.55;
}

.provider-card.unavailable .provider-name {
  color: var(--mc-texte-3);
}

.provider-card.unavailable .provider-action {
  border-color: var(--mc-brume);
  color: var(--mc-texte-3);
}

.provider-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Tuile logo : image réelle si dispo (assets/logos/<id>.svg), sinon monogramme */
.provider-logo {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mc-brume);
}

.provider-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.provider-logo .monogram {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mc-font-titre);
  font-weight: 700;
  font-size: 1.1em;
  color: #fff;
  letter-spacing: 0.02em;
}

.provider-name {
  font: 600 15.5px var(--mc-font-texte);
  color: var(--mc-encre);
  line-height: 1.25;
}

.provider-name .kind {
  display: block;
  color: var(--mc-texte-3);
  font-size: 0.72em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

.provider-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

/* Pastille de statut (à la manière des enseignes de La Pince) */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 0.74em var(--mc-font-texte);
  padding: 4px 11px;
  border-radius: 99px;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status.connected {
  background: var(--mc-vert-pastel);
  color: var(--mc-vert-texte);
}

.status.disconnected {
  background: var(--mc-sable);
  color: var(--mc-texte-2);
}

.status.soon {
  background: var(--mc-sable);
  color: var(--mc-texte-3);
}

/* Bouton d'action de la carte */
.provider-action {
  border: 1.5px solid var(--mc-sapin);
  background: transparent;
  color: var(--mc-sapin);
  font: 600 0.82em var(--mc-font-texte);
  padding: 7px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.provider-action:hover:not(:disabled) {
  background: var(--mc-survol-sapin);
}

.provider-action.primary {
  background: var(--mc-sapin);
  border-color: var(--mc-sapin);
  color: var(--mc-papier);
}

.provider-action.primary:hover:not(:disabled) {
  background: var(--mc-sapin-fonce);
}

.provider-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==========================================================================
   Accueil — groupes « Mutuelles connectées » / « Bientôt disponibles »
   Sélecteurs additifs : ils n'existent que dans la grille de l'accueil
   (connexions.js), les cartes de l'espace ne sont pas affectées.
   ========================================================================== */

.connexions-group-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.connexions-group-titleline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.connexions-group-title {
  margin: 0;
  font: 700 22px/1.2 var(--mc-font-titre);
  color: var(--mc-sapin);
  letter-spacing: -0.2px;
}

.connexions-group-count {
  font: 600 13px var(--mc-font-texte);
  color: var(--mc-texte-2);
  background: var(--mc-sable);
  border-radius: var(--mc-r-pastille);
  padding: 2px 11px;
}

.connexions-group-note {
  margin: 0;
  font: 400 14.5px/1.55 var(--mc-font-texte);
  color: var(--mc-texte-2);
  max-width: 620px;
}

/* Tuile logo élargie (accueil uniquement).
   Beaucoup de marques mutualistes sont des logotypes très horizontaux
   (Matmut 5,5:1, Malakoff 6,8:1…) : dans un carré de 46 px elles se réduisent
   à une bande de 5 px illisible. 96 x 46 les rend lisibles, et les logos
   carrés restent centrés sans déformation grâce à object-fit: contain. */
.connexions-group .provider-logo {
  width: 96px;
  border-radius: 12px;
}

.connexions-group .provider-logo img {
  padding: 5px 9px;
}

/* Le monogramme de repli (logo absent) reste un carré : une pastille colorée
   de 96 px de large déséquilibrerait la carte. */
.connexions-group .provider-logo .monogram {
  width: 46px;
  flex: none;
  border-radius: 11px;
}

/* Groupe « bientôt disponibles » : lecture immédiate « pas encore connectée ».
   Cartes plus claires, contour pointillé, logos désaturés — mais textes
   maintenus à un contraste suffisant (pas d'opacité globale sur la carte). */
.connexions-group.is-soon .connexions-group-title { color: var(--mc-texte-2); }

.connexions-group.is-soon .provider-card {
  background: transparent;
  border: 1px dashed var(--mc-bordure-champ);
  box-shadow: none;
}

.connexions-group.is-soon .provider-card:hover {
  border-color: var(--mc-bordure-tiret);
  transform: none;
  box-shadow: none;
}

/* Atténuation choisie après comparaison de 5 réglages sur les logos les plus
   fragiles (Alan, April, Harmonie, AG2R) : un grayscale(1) à 0.68 effaçait
   les marques dont la couleur est déjà claire. Une saturation résiduelle de
   0.2 + un léger gain de contraste gardent le logo lisible tout en restant
   nettement « éteint » face au groupe connecté, qui est en pleine couleur.
   Le contour pointillé et les textes gris portent le reste du signal. */
.connexions-group.is-soon .provider-logo {
  filter: saturate(0.2) contrast(1.1);
  opacity: 0.9;
  background: var(--mc-blanc-chaud);
}

.connexions-group.is-soon .provider-name { color: var(--mc-texte-2); }

.connexions-group.is-soon .status.soon {
  background: var(--mc-sable);
  color: var(--mc-texte-2);
  border: 1px solid var(--mc-brume);
}

@media (max-width: 520px) {
  .connexions-group-title { font-size: 19px; }
}