/* ── Talent Settings (R5) — pixel-perfect copy of /mockups/talent/settings.
   All styling lives here so the view carries zero inline CSS. ── */
.ts-main{display:flex;max-width:960px;margin:0 auto;padding:24px 0;gap:24px;}

/* Sidebar */
.ts-sidebar{width:200px;flex-shrink:0;}
.ts-sb-title{font-family:'Geist',system-ui,sans-serif;font-size:18px;font-weight:700;margin-bottom:14px;}
.ts-sb-nav{display:flex;flex-direction:column;gap:2px;}
.ts-sb-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-sm);font-size:11px;font-weight:600;color:#888;cursor:pointer;transition:all .15s;border:none;background:none;font-family:inherit;text-align:left;width:100%;text-decoration:none;}
.ts-sb-item:hover{color:var(--gold-400);background:rgba(184,151,90,.03);}
.ts-sb-item.ts-on{color:var(--gold-400);background:rgba(184,151,90,.06);font-weight:700;}
.ts-sb-item-icon{width:20px;display:flex;align-items:center;justify-content:center;}

/* Content */
.ts-content{flex:1;min-width:0;}

/* Section show/hide + animation */
.ts-section{display:none;animation:tsFadeUp .3s ease both;}
.ts-section.ts-active{display:block;}
@keyframes tsFadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* Section title */
.ts-sec-title{font-family:'Geist',system-ui,sans-serif;font-size:20px;font-weight:700;margin-bottom:4px;}
.ts-sec-title em{font-style:italic;color:var(--gold-400);font-weight:400;}
.ts-sec-sub{font-size:10px;color:#888;margin-bottom:20px;}

/* Card */
.ts-card{
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,244,194,0.06) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(189,151,51,0.04) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFAF7 60%, #F6F4EE 100%);
  border-radius:14px;border:1px solid rgba(0,0,0,0.05);padding:18px;margin-bottom:14px;
  box-shadow:0 1px 0 rgba(255,255,255,0.9) inset,0 0 0 1px rgba(255,255,255,0.5) inset,0 1px 2px rgba(20,16,8,0.03),0 6px 20px -10px rgba(120,98,40,0.08);
  transition:all .2s;
}
.ts-card:hover{
  box-shadow:0 1px 0 rgba(255,255,255,0.9) inset,0 0 0 1px rgba(255,255,255,0.6) inset,0 2px 4px rgba(20,16,8,0.04),0 14px 32px -14px rgba(120,98,40,0.14);
}
.ts-card-title{font-size:11px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.ts-card-title-icon{color:var(--gold-500);display:flex;align-items:center;}

/* Future-brick (grayed) cards + rows */
.ts-soon{opacity:.55;}
.ts-soon-badge{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:var(--r-pill);font-size:7px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--gold-500);background:rgba(184,151,90,.1);border:1px solid rgba(184,151,90,.2);}

/* Form rows */
.ts-form-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.03);}
/* #4330 — les trois positions de visibilité (Visible / Off-market / En veille). */
.ts-vis-opts{border:0;margin:0;padding:0 0 6px;display:grid;gap:8px}
.ts-vis-opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--n-200);border-radius:12px;cursor:pointer;background:#fff}
.ts-vis-opt:has(input:checked){border-color:var(--gold-500);background:#FBF7EE}
.ts-vis-opt input{margin-top:3px;accent-color:var(--gold-600);flex-shrink:0}
.ts-vis-opt .ts-fr-left{display:flex;flex-direction:column;gap:2px}
.ts-vis-note{font-size:12px;color:var(--n-500);margin:4px 0 0}
.ts-form-row:last-child{border-bottom:none;}
.ts-fr-left{flex:1;}
.ts-fr-label{font-size:11px;font-weight:600;color:#1a1a1a;}
.ts-fr-desc{font-size:9px;color:#999;margin-top:1px;}

/* Form grid */
.ts-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ts-field-label{font-size:8px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.3px;display:block;margin-bottom:3px;}

/* Toggle switch (checkbox-driven, no JS needed for visual state) */
.ts-toggle{width:38px;height:20px;border-radius:10px;background:rgba(0,0,0,.08);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;display:inline-block;}
.ts-toggle.ts-toggle-on{background:var(--gold-400);}
.ts-toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);transition:transform .2s;}
.ts-toggle.ts-toggle-on::after{transform:translateX(18px);}

/* Checkbox-backed toggle: hidden input drives the visual pill via :checked. */
.ts-switch{position:relative;display:inline-block;width:38px;height:20px;flex-shrink:0;cursor:pointer;}
.ts-switch input{position:absolute;opacity:0;width:0;height:0;margin:0;}
.ts-switch-pill{position:absolute;inset:0;border-radius:10px;background:rgba(0,0,0,.08);transition:background .2s;}
.ts-switch-pill::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);transition:transform .2s;}
.ts-switch input:checked + .ts-switch-pill{background:var(--gold-400);}
.ts-switch input:checked + .ts-switch-pill::after{transform:translateX(18px);}
.ts-switch input:focus-visible + .ts-switch-pill{outline:2px solid var(--gold-primary);outline-offset:2px;}

/* Input */
.ts-fi{width:100%;padding:8px 12px;border-radius:7px;border:1.5px solid rgba(0,0,0,.06);font-size:11px;outline:none;transition:border .15s;font-family:'Geist',sans-serif;}
.ts-fi:focus{border-color:var(--gold-primary);}

/* Select */
.ts-sel{width:100%;padding:8px 12px;border-radius:7px;border:1.5px solid rgba(0,0,0,.06);font-size:11px;outline:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 8px center/12px no-repeat;padding-right:28px;font-family:'Geist',sans-serif;}

/* Notification grid */
.ts-notif-grid{display:grid;grid-template-columns:1fr 50px 50px 50px;gap:0;align-items:center;}


/* La mention « ces deux canaux arrivent plus tard » vit ici, sous la grille,
   et non en pastille dans les en-tetes de colonne : celles-ci font 50 px et le
   libelle en demande 74 (mesure du 22/09). */
.ts-notif-soon{ margin:6px 0 0; font-size:11px; line-height:1.5; color:var(--gold-600); }
.ts-notif-header{margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.04);}
.ts-notif-col-label{text-align:center;font-size:7px;font-weight:700;color:#bbb;text-transform:uppercase;letter-spacing:.3px;}
.ts-notif-rows{gap:6px 0;}
.ts-notif-toggle-cell{text-align:center;}
.ts-notif-toggle-cell .ts-switch{margin:0 auto;display:inline-block;}

/* Danger zone */
.ts-danger{padding:14px;border-radius:14px;border:1.5px solid rgba(192,57,43,.1);background:rgba(192,57,43,.02);}
.ts-danger-title{font-size:10px;font-weight:700;color:#C0392B;margin-bottom:4px;}
.ts-danger-desc{font-size:9px;color:#888;margin-bottom:8px;}
.ts-danger-actions{display:flex;gap:8px;}
.ts-danger-btn{padding:7px 14px;border-radius:7px;font-size:9px;font-weight:700;border:1.5px solid rgba(192,57,43,.15);color:#C0392B;transition:all .15s;cursor:pointer;background:none;font-family:inherit;}
.ts-danger-btn:hover{background:rgba(192,57,43,.05);}

/* Save bar */
.ts-save-bar{padding:14px 0;display:flex;justify-content:flex-end;gap:8px;}
.ts-btn-save{padding:10px 20px;border-radius:var(--r-sm);font-size:11px;font-weight:700;background:var(--gold-fill);color:#fff;box-shadow:0 3px 12px rgba(150,120,62,.18);text-shadow:0 1px 1px rgba(0,0,0,.08);transition:all .15s;cursor:pointer;border:none;font-family:inherit;}
.ts-btn-save:hover{transform:translateY(-1px);}
.ts-btn-save:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}
.ts-btn-save:disabled:hover{transform:none;}
.ts-btn-cancel{padding:10px 20px;border-radius:var(--r-sm);font-size:11px;font-weight:700;border:1.5px solid rgba(0,0,0,.06);color:#888;cursor:pointer;background:none;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;}

/* Action buttons (inline) */
.ts-action-gold{font-size:10px;font-weight:700;color:var(--gold-400);border:none;background:none;cursor:pointer;font-family:inherit;padding:0;}
.ts-action-muted{font-size:10px;font-weight:700;color:#888;border:none;background:none;cursor:pointer;font-family:inherit;padding:0;}

/* Inline password change form (revealed inside Sécurité card) */
.ts-pw-form{display:none;margin-top:10px;padding-top:12px;border-top:1px solid rgba(0,0,0,.04);}
.ts-pw-form.ts-pw-open{display:block;}
.ts-pw-grid{display:grid;grid-template-columns:1fr;gap:10px;}

/* Responsive */
@media(max-width:768px){
  .ts-main{flex-direction:column;}
  .ts-sidebar{width:100%;}
  .ts-sb-nav{flex-direction:row;overflow-x:auto;gap:4px;}
  /* B3 tâche 058 — le `width:100%` de l'entrée de menu est fait pour la colonne
     de gauche ; en bandeau horizontal, il demandait à CHAQUE entrée toute la
     largeur de l'écran. Avec quatre onglets ça ne se voyait presque pas, avec
     six panneaux la barre faisait 671 px de contenu à 390 px de fenêtre.
     L'entrée prend sa largeur de texte, et c'est le bandeau (et lui seul) qui
     défile. Mesuré à 390 px par `talent_account_deactivation_test`. */
  .ts-sb-item{width:auto;flex:0 0 auto;white-space:nowrap;}
  .ts-form-grid{grid-template-columns:1fr;}
}

/* ── Erreurs de validation, affichées sous le champ concerné (pages de
   paramètres recruteur et expert, shared/_account_settings). Le design system
   `ts-*` de cette feuille est commun aux trois espaces. ── */
.ts-fi-invalid{border-color:#C0392B;}
.ts-fi-invalid:focus{border-color:#C0392B;}
.ts-field-error{margin-top:4px;font-size:9px;font-weight:600;color:#C0392B;}
.ts-field-hint{margin-top:4px;font-size:9px;color:#888;}

/* ── B3 tâche 058 — panneau « Sécurité » : enrôlement du second facteur,
   codes de secours, appareils. Mêmes tokens que le reste de la feuille ; rien
   d'inline dans les vues. ── */
.ts-tag-ok{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:var(--r-pill);font-size:7px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#1E7B4F;background:rgba(30,123,79,.08);border:1px solid rgba(30,123,79,.18);}
.ts-enroll{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:start;margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.04);}
.ts-enroll-single{grid-template-columns:1fr;}
.ts-enroll-qr{width:140px;}
.ts-enroll-qr svg{width:100%;height:auto;display:block;}
.ts-enroll-steps{margin:0 0 8px 14px;padding:0;font-size:10px;color:#666;}
.ts-enroll-steps li{margin-bottom:3px;}
.ts-enroll-secret{display:inline-block;margin:4px 0 10px;padding:5px 9px;border-radius:6px;background:rgba(0,0,0,.04);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:1px;word-break:break-all;}
.ts-enroll-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;}
.ts-enroll-code{width:120px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:3px;}
.ts-backup-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;margin:8px 0 0;padding:0;list-style:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;}
.ts-card-title-action{margin-left:auto;}

/* ── B3 tâche 058 — panneau « Confidentialité » : le sélecteur de blocage. ── */
.ts-block-form{padding:10px 0;border-bottom:1px solid rgba(0,0,0,.03);}
.ts-block-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.ts-block-row .ts-sel{flex:1;min-width:160px;}
.ts-card-help{margin-top:8px;}

/* ── B3 tâche 058 — panneau « Mon compte » : les conséquences, énumérées.
   Désactiver et supprimer ne disent pas la même chose ; la liste est ce qui
   rend les deux gestes comparables à l'œil. ── */
.ts-consequences{margin:8px 0 0 14px;padding:0;font-size:9px;color:#888;}
.ts-consequences li{margin-bottom:2px;}

@media(max-width:768px){
  .ts-enroll{grid-template-columns:1fr;}
  .ts-enroll-qr{width:120px;}
  .ts-backup-codes{grid-template-columns:1fr;}
}

/* Retour Tatianna 01/10 (#4243) — suggestions de la saisie « Bloquer des
   établissements » : une liste sous le champ, chaque ligne bloque au clic. */
.ts-block-search{position:relative;}
.ts-block-sugg{margin-top:6px;border:1.5px solid rgba(0,0,0,.06);border-radius:9px;background:#fff;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.06);}
.ts-block-sugg-form{display:block;margin:0;}
.ts-block-sugg-item{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 12px;border:0;background:none;text-align:left;cursor:pointer;font-family:'Geist',sans-serif;}
.ts-block-sugg-form + .ts-block-sugg-form .ts-block-sugg-item{border-top:1px solid rgba(0,0,0,.04);}
.ts-block-sugg-item:hover,.ts-block-sugg-item:focus-visible{background:rgba(184,151,90,.06);}
.ts-block-sugg-name{font-size:12px;font-weight:600;color:#1a1a1a;}
.ts-block-sugg-meta{font-size:10px;color:#999;white-space:nowrap;}
.ts-block-sugg-empty{margin:0;padding:10px 12px;font-size:11px;color:#999;}

/* #4386 — Mon compte › Statut professionnel (maquette du 04/10, #statSec). */
.ts-statut .ts-card-title{align-items:center;}
.ts-statut-mk{margin-left:auto;padding:3px 10px;border-radius:999px;background:#220a38;color:#e8d5ff;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}
.ts-statut-choice{display:inline-flex;gap:4px;padding:3px;border-radius:999px;border:1px solid #EFE8DA;background:#fff;}
.ts-statut-choice form{margin:0;}
.ts-statut-opt{border:0;background:none;font:inherit;font-size:11px;padding:6px 12px;border-radius:999px;color:#4A3F35;cursor:pointer;}
.ts-statut-opt.is-on{background:linear-gradient(135deg,var(--gold-600),var(--gold-primary),var(--gold-600));color:#fff;}
.ts-statut-tag{display:inline-flex;margin-left:6px;padding:2px 7px;border-radius:999px;font-size:8px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;}
.ts-statut-tag.is-ok{color:#1E7B4F;background:rgba(30,123,79,.08);border:1px solid rgba(30,123,79,.18);}
.ts-statut-tag.is-wait{color:var(--gold-600);background:rgba(163,133,67,.08);border:1px solid rgba(163,133,67,.35);}
.ts-statut-tag.is-ko{color:#B5452F;background:rgba(181,69,47,.06);border:1px solid rgba(181,69,47,.3);}
.ts-statut-num{font-family:"Geist Mono",monospace;letter-spacing:.06em;}
.ts-statut-edit{margin-top:10px;}
.ts-statut-edit > summary{list-style:none;display:inline-block;cursor:pointer;}
.ts-statut-edit > summary::-webkit-details-marker{display:none;}
.ts-statut-form{margin-top:10px;max-width:360px;}
.ts-statut-form .siren-find{max-width:none;}
@media (max-width:640px){
  .ts-statut .ts-form-row{flex-wrap:wrap;gap:10px;}
  .ts-statut-choice{width:100%;}
  .ts-statut-choice form{flex:1;}
  .ts-statut-opt{width:100%;}
}