/* Double authentification (assets/js/deuxfacteurs.js) : tableau de bord et backoffice. */
.df { display: flex; flex-direction: column; gap: 12px; }
.df-etat { margin: 0; line-height: 1.6; }
.df-etat--ok { padding: 12px 14px; border-radius: 10px; color: #2f8a12; background: #e6f5dc; font-weight: 600; }
.df-etapes { margin: 0; padding-left: 20px; line-height: 1.6; }
.df-etapes li { margin-bottom: 12px; }
.df-qr { margin: 10px 0 6px; }
.df-qr svg { display: block; width: 200px; height: 200px; border-radius: 10px; background: #fff; }
.df-cle { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #eef2ea; color: #14210f; font-size: 0.95em; letter-spacing: 0.04em; word-break: break-all; }
.df-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.df-champ { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.df-champ input { width: 12ch; padding: 10px 12px; border: 1px solid #c9d6c0; border-radius: 9px; font: inherit; font-size: 1.15rem; letter-spacing: 0.18em; }
.df-btn { padding: 10px 16px; border: 1px solid #c9d6c0; border-radius: 10px; font: inherit; font-weight: 600; color: #14210f; background: #fff; cursor: pointer; }
.df-btn--plein { color: #fff; background: #12501a; border-color: #12501a; }
.df-btn:disabled { opacity: 0.55; cursor: progress; }
.df-msg { margin: 0; padding: 10px 12px; border-radius: 9px; color: #a80a28; background: #fdeef1; font-size: 0.9rem; }
.df-note { color: #5b6b53; font-size: 0.85rem; }
/* Le libellé sur sa ligne ; le champ et ses boutons côte à côte, dessous. */
.df-form { align-items: center; }
.df-form .df-champ { display: contents; }
.df-form .df-champ > span { flex-basis: 100%; }