/* B3 tâche 012 (AC24.2), puis #4282 — panneau « Mon compte » des paramètres
   recruteur. Cette feuille servait le panneau « Sécurité » ; la maquette de
   Tatianna (ticket #4282) fond la 2FA et les appareils dans « Mon compte »,
   avec la carte « Votre identité » dont les règles `idy` sont ajoutées
   ci-dessous depuis la même maquette (lignes 432-440).

   Portée LITTÉRALEMENT depuis la maquette canonique
   `app/views/mockups/recruiter/settings.html.erb` (bloc <style>, lignes
   400-430 : les cartes `prof-card`, les liens `prof-link` et les lignes
   `cred` des blocs « Double authentification » et « Appareils connectés »).
   Sélecteurs, valeurs, points de rupture : identiques.

   La coque, les cartes, les boutons et les jetons dorés viennent de
   `recruiter_settings_establishments.css` (base commune de l'écran) : rien
   n'est recopié ici. Aucun doré en dur non plus, garde-fou du design system
   (`test/assets/design_system_test.rb`).

   Les trois seules règles qui n'existent pas dans la maquette sont en bas de
   fichier : elles habillent des <form> que la maquette n'avait pas (ses liens
   étaient des `onclick="return false"`, ici ce sont de vraies requêtes). */

/* ── Cartes de compte ── */
.page-recruiter-settings .prof-card { margin-bottom:16px; padding:22px 24px; }
.page-recruiter-settings .prof-h { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.page-recruiter-settings .prof-h .grp-h { margin:0; }
.page-recruiter-settings .prof-link { font-size:12.5px; font-weight:600; color:var(--gold-700); cursor:pointer; white-space:nowrap; }
.page-recruiter-settings .prof-link:hover { text-decoration:underline; }
.page-recruiter-settings .prof-link.danger { color:var(--red); }

/* ── Identité (#4282, maquette lignes 432-440) ── */
.page-recruiter-settings .idy { display:flex; align-items:center; gap:15px; }
.page-recruiter-settings .idy-av { width:62px; height:62px; border-radius:999px; background:var(--gold-satin); color:var(--on-gold); text-shadow:var(--on-gold-shadow); display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:700; flex-shrink:0; }
.page-recruiter-settings .idy-n { font-size:17px; font-weight:700; }
.page-recruiter-settings .idy-r { font-size:12.5px; color:var(--n-500); margin-top:2px; }
.page-recruiter-settings .idy-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; margin-top:20px; padding-top:20px; border-top:1px solid var(--n-100); }
.page-recruiter-settings .idy-f label { display:block; font-size:10.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--n-500); margin-bottom:6px; }
.page-recruiter-settings .idy-f div { font-size:14px; color:var(--n-900); }
@media (max-width:560px) { .page-recruiter-settings .idy-grid { grid-template-columns:1fr; } }

/* ── Lignes identifiants / appareils ── */
.page-recruiter-settings .cred { display:flex; align-items:center; gap:14px; padding:15px 0; border-top:1px solid var(--n-100); }
.page-recruiter-settings .cred.first, .page-recruiter-settings .cred:first-of-type { border-top:none; }
.page-recruiter-settings .cred-ic { width:42px; height:42px; border-radius:11px; background:var(--gold-50); border:1px solid var(--gold-200); display:grid; place-items:center; color:var(--gold-700); flex-shrink:0; }
.page-recruiter-settings .cred-ic svg { width:18px; height:18px; }
.page-recruiter-settings .cred-ic.neutral { background:var(--n-50); border-color:var(--n-200); color:var(--n-700); }
.page-recruiter-settings .cred-b { flex:1; min-width:0; }
.page-recruiter-settings .cred-n { font-size:14px; font-weight:700; color:var(--n-900); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.page-recruiter-settings .cred-s { font-size:12.5px; color:var(--n-500); margin-top:2px; line-height:1.5; }
.page-recruiter-settings .cred-btn { padding:9px 20px; font-size:12.5px; flex-shrink:0; }

/* ── Ce que la maquette n'avait pas : de vrais formulaires ──

   Un `button_to` rend son propre <form>, qui serait un bloc au milieu d'une
   ligne flex : ces deux règles le remettent à sa place, rien de plus. */
.page-recruiter-settings .cred-form { display:inline-flex; margin:0; flex-shrink:0; }
.page-recruiter-settings .cred-form button { font-size:12.5px; font-weight:600; }

/* L'enrôlement : le QR, le secret à recopier, les codes de secours. Une seule
   colonne à 390 px comme partout ailleurs sur cet écran. */
.page-recruiter-settings .enroll { margin-top:14px; padding-top:16px; border-top:1px solid var(--n-100); display:grid; grid-template-columns:168px 1fr; gap:22px; align-items:start; }
.page-recruiter-settings .enroll-qr { width:168px; height:168px; background:var(--n-0); border:1px solid var(--n-200); border-radius:12px; padding:9px; }
.page-recruiter-settings .enroll-qr svg { width:100%; height:100%; display:block; }
.page-recruiter-settings .enroll-steps { font-size:13px; color:var(--n-700); line-height:1.6; margin:0 0 12px; padding-left:18px; }
.page-recruiter-settings .enroll-secret { font-family:'Geist Mono',ui-monospace,Menlo,monospace; font-size:13px; letter-spacing:1.5px; color:var(--n-900); background:var(--n-50); border:1px solid var(--n-200); border-radius:9px; padding:9px 12px; word-break:break-all; display:inline-block; }
.page-recruiter-settings .enroll-form { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.page-recruiter-settings .enroll-code { width:150px; font-family:'Geist Mono',ui-monospace,Menlo,monospace; font-size:15px; letter-spacing:3px; text-align:center; border:1px solid var(--n-200); border-radius:9px; padding:10px 12px; background:var(--n-0); color:var(--n-900); }
.page-recruiter-settings .enroll-code:focus { outline:none; border-color:var(--gold-300); }
@media (max-width:560px) { .page-recruiter-settings .enroll { grid-template-columns:1fr; } }

/* Les codes de secours, affichés une seule fois. */
.page-recruiter-settings .backup-codes { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0 0; padding:0; list-style:none; }
.page-recruiter-settings .backup-codes li { font-family:'Geist Mono',ui-monospace,Menlo,monospace; font-size:13px; letter-spacing:1px; text-align:center; background:var(--n-50); border:1px solid var(--n-200); border-radius:8px; padding:9px 4px; }
@media (max-width:640px) { .page-recruiter-settings .backup-codes { grid-template-columns:repeat(2,1fr); } }

/* ── #4282 — ce que la maquette n'avait pas : la photo et la saisie ──

   La photo réelle prend la place du rond d'initiales, recadrée. « Changer la
   photo » est un <label> qui porte un champ fichier invisible : un clic sur
   le lien ouvre le sélecteur, sans JavaScript. */
.page-recruiter-settings .idy-photo { object-fit:cover; background:var(--n-100); }
.page-recruiter-settings .idy-who { flex:1; min-width:0; }
.page-recruiter-settings .idy-photo-form { margin:0; flex-shrink:0; }
.page-recruiter-settings .idy-photo-link { position:relative; display:inline-block; }
.page-recruiter-settings .idy-file { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.page-recruiter-settings .idy-photo-link:focus-within { text-decoration:underline; }

/* Les formulaires ouverts par « Modifier » : mêmes libellés que la lecture,
   le champ `.inp` de la base commune à la place de la valeur. */
.page-recruiter-settings .idy-f .inp { display:block; }
.page-recruiter-settings .inp-invalid { border-color:var(--red); }
.page-recruiter-settings .fld-err { font-size:12px; color:var(--red); margin:6px 0 0; }
.page-recruiter-settings .fld-hint { font-size:12px; color:var(--n-500); margin:6px 0 0; line-height:1.5; }
.page-recruiter-settings .cred-edit { padding:0 0 16px 56px; }
.page-recruiter-settings .cred-edit .idy-grid { margin-top:0; padding-top:0; border-top:none; }
.page-recruiter-settings .pw-grid { grid-template-columns:1fr 1fr 1fr; }
.page-recruiter-settings .card-actions { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:18px; }
.page-recruiter-settings .card-actions .btn-outline { text-decoration:none; }
@media (max-width:760px) { .page-recruiter-settings .pw-grid { grid-template-columns:1fr; } }
@media (max-width:560px) {
  .page-recruiter-settings .cred-edit { padding-left:0; }
  .page-recruiter-settings .idy { flex-wrap:wrap; }
  .page-recruiter-settings .idy-photo-form { width:100%; padding-left:77px; }
}