/* Le choix d'un service de courrier — Paramètres → Courrier électronique.
 *
 * Sorti de `composants.css` le 28 octobre 2026 : celui-ci passait les 400
 * lignes du §14. La coupure tombe bien — ces règles ne servent qu'à un écran,
 * là où `composants.css` porte ce qui se retrouve partout. */

/* --- Intégrations : le choix d'un service ---------------------------------- */

/* La rangée de cartes des Paramètres → Courrier électronique. Des boutons et
   non des onglets : chacune porte un état (connectée ou non, principale ou
   non) que des onglets n'auraient pas su montrer, et on les lit avant de
   cliquer. */
.integrations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: calc(var(--pas) * 3);
}

.integration {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--pas) * 1);
  padding: calc(var(--pas) * 4);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  background: var(--carte);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.integration:hover { border-color: var(--primaire); background: var(--survol); }
.integration--actif { border-color: var(--primaire); border-width: 2px; padding: calc(var(--pas) * 4 - 1px); }
.integration svg { width: 1.6rem; height: 1.6rem; color: var(--primaire); }

.integration__nom { font-weight: 600; }
.integration__marque { font-size: 0.78rem; color: var(--texte-tenu); }

/* ⚠️ La pastille dit « connectée », pas « sélectionnée » : les deux états sont
   indépendants, et on peut très bien ouvrir la fiche d'un service qui n'est
   pas connecté — c'est même la raison d'ouvrir la fiche. */
.integration__pastille {
  position: absolute;
  top: calc(var(--pas) * 3);
  right: calc(var(--pas) * 3);
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--r-pill);
  background: var(--bordure);
}
.integration__pastille--connecte { background: var(--succes); }