/* ============================================================
   Étapes de la double vérification : liens d'action, bouton
   secondaire, paire de boutons, QR code et clé du téléphone à
   relier, liste des codes de secours. Chaque étape tient sur un
   écran (1366 × 768 et 375 × 667, interface-web.md).
   ============================================================ */

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Liens d'action discrets (« Utiliser un code de secours », « Recommencer ») --- */
.autres-choix { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.autres-choix form { margin: 0; }
.autres-choix__aide { color: var(--texte-doux); font-size: 0.875rem; }
.lien {
  display: inline-block; /* même boîte pour un lien et un bouton : alignés au pixel */
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 0.875rem/1.3 var(--police);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.lien:hover { color: var(--accent-survol); }
.lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.lien[hidden] { display: none; }

/* --- Bouton secondaire (contour) et deux boutons côte à côte, jamais empilés --- */
.bouton--secondaire { border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent); }
.bouton--secondaire:hover { border-color: var(--accent-survol); background: var(--fond-page); color: var(--accent-survol); }
.deux-boutons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.deux-boutons[hidden], .bouton[hidden] { display: none; }
.deux-boutons .bouton { padding: 0 8px; }

/* --- Après un code de secours : chaque choix sur sa ligne, texte à gauche, lien à droite --- */
.choix-secours { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--rayon); background: var(--fond-page); }
.choix-secours__ligne { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 0.875rem; }

/* --- Relier le téléphone : QR code et clé côte à côte --- */
.relier { display: flex; align-items: flex-start; gap: 12px; }
.relier__qr { flex: none; width: var(--taille-qr); height: var(--taille-qr); }
.relier__infos { display: grid; gap: 6px; min-width: 0; }
.relier__consigne { display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; font-weight: 700; line-height: 1.3; }
.relier__numero {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--marine);
  color: var(--sur-marine);
  font-size: 0.75rem;
  line-height: 1;
}
.relier__cle { color: var(--marine); font: 700 0.9375rem/1.35 var(--police-chasse-fixe); }
/* Groupes de 4 espacés par le style : aucune espace dans le texte de la clé */
.relier__cle span { margin-right: 0.6em; }
.relier__liens { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.relier__nom { color: var(--texte-doux); font-size: 0.8125rem; line-height: 1.3; }

/* --- Les 10 codes de secours : une colonne sur téléphone, deux sur ordinateur --- */
.codes-secours {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 12px;
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--bord-champ);
  border-radius: var(--rayon);
  background: var(--fond-page);
  list-style: none;
}
.codes-secours__code { color: var(--texte); font: 600 0.8125rem/1.6 var(--police-chasse-fixe); text-align: center; white-space: nowrap; }

/* --- Téléphone : tout tient sur un écran de 375 × 667 --- */
@media (max-width: 959px) {
  .carte--relier { gap: 12px; }
  .carte--relier .carte__chapo { font-size: 0.875rem; line-height: 1.4; }
  .carte--relier .formulaire { gap: 10px; }
  .carte--relier .carte__pied,
  .carte--codes .carte__pied { display: none; }
  .carte--codes { gap: 14px; }
}

/* --- Ordinateur : le lien « Ouvrir l'appli » ne sert que sur le téléphone même --- */
@media (min-width: 960px) {
  .relier { gap: 20px; }
  .relier__ouvrir { display: none; }
  .codes-secours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .codes-secours__code { font-size: 0.875rem; }
}