/* B3 tâche 006 (AC22.1 à AC22.6) — panneau « Établissements & pôles » des
   paramètres recruteur.

   Portée LITTÉRALEMENT depuis la maquette canonique
   `app/views/mockups/recruiter/settings.html.erb` (bloc <style>, lignes
   172-269 pour la coque et le bloc établissement, 315-399 pour les champs, les
   boutons et la modale). Sélecteurs, valeurs, points de rupture : identiques.

   Deux seuls écarts, imposés par le garde-fou du design system
   (`test/assets/design_system_test.rb`, « aucune nouvelle feuille n'introduit
   un doré en dur ») :

     - l'échelle `--gold-50 → --gold-800` n'est plus recopiée ici, elle vient de
       `design_tokens.css` où elle a EXACTEMENT les mêmes valeurs ;
     - les deux dorés du dégradé de titre et ceux de `--gold-satin` passent par
       les jetons, comme sur tous les autres écrans déjà portés
       (`recruiter_dashboard.css .grad`, `recruiter_positions.css`).

   Le panneau est la seule feuille de cet écran : les autres panneaux
   (accès, facturation, notifications) sont portés par la tâche 011 et
   ajouteront leurs blocs ici. */

.page-recruiter-settings, .page-recruiter-settings *, .page-recruiter-settings *::before, .page-recruiter-settings *::after { box-sizing: border-box; }
.page-recruiter-settings {
  --cream:#FBF7EE;
  --green-bg:var(--green-50); --green-line:var(--green-200);
  --orange-bg:#FBEFE2; --orange-tx:#C0651F; --orange-line:#EBC9A6;
  --red-bg:#FBEDED; --red-line:#EFC9C9;
  --gold-satin:linear-gradient(135deg,var(--gold-400) 0%,var(--gold-500) 50%,var(--gold-600) 100%);
  --shadow-sm:0 1px 2px rgba(44,44,44,.05); --t:150ms ease;
  font-family:'Geist',system-ui,sans-serif; color:var(--n-900); background:var(--n-0);
}
.page-recruiter-settings a { text-decoration:none; color:inherit; }
.page-recruiter-settings button { font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
.page-recruiter-settings .serif { font-family:'Playfair Display',Georgia,serif; }
/* #4287 : `background-clip:text` peint le texte dans la boîte de l'élément ; la
   dernière lettre d'un italique déborde de cette boîte et sortait coupée (le « n »
   de « facturation »). Un peu de padding agrandit la zone peinte, la marge
   négative rend la place : la mise en page ne bouge pas. */
.page-recruiter-settings .grad-g { font-style:italic; background:var(--gold-text-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; padding-right:.16em; margin-right:-.16em; }
.page-recruiter-settings .wrap { max-width:1240px; margin:0 auto; padding:30px 26px 96px; }

/* ── En-tête ── */
.page-recruiter-settings .p-head { margin-bottom:26px; }
.page-recruiter-settings h1 { font-size:32px; font-weight:700; letter-spacing:-.01em; margin:0 0 4px; }
.page-recruiter-settings .p-sub { font-size:13.5px; color:var(--n-500); }

/* ── Layout deux colonnes ── */
.page-recruiter-settings .cols { display:grid; grid-template-columns:236px 1fr; gap:30px; align-items:start; }
@media (max-width:860px) { .page-recruiter-settings .cols { grid-template-columns:1fr; } .page-recruiter-settings .cols > * { min-width:0; } }

/* ── Nav latérale ── */
.page-recruiter-settings .side { position:sticky; top:110px; display:flex; flex-direction:column; gap:3px; }
.page-recruiter-settings .side-i { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px; cursor:pointer; font-size:13.5px; font-weight:500; color:var(--n-700); transition:var(--t); border:1px solid transparent; }
.page-recruiter-settings .side-i:hover { background:var(--gold-50); }
.page-recruiter-settings .side-i.on { background:var(--gold-50); border-color:var(--gold-200); color:var(--gold-700); font-weight:600; }
.page-recruiter-settings .side-i svg { width:16px; height:16px; flex-shrink:0; color:var(--gold-600); }
.page-recruiter-settings .side-i .ext { margin-left:auto; width:13px; height:13px; color:var(--n-300); }
@media (max-width:860px) { .page-recruiter-settings .side { position:static; flex-direction:row; flex-wrap:wrap; } }

/* ── Panneaux ── */
.page-recruiter-settings .panel { display:none; }
.page-recruiter-settings .panel.on { display:block; }
.page-recruiter-settings .panel-head { margin-bottom:6px; }
.page-recruiter-settings .panel-title { font-size:24px; font-weight:700; margin:0 0 4px; }
.page-recruiter-settings .panel-sub { font-size:13.5px; color:var(--n-500); margin-bottom:22px; max-width:640px; line-height:1.55; }
.page-recruiter-settings .grp-h { font-size:10.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--gold-600); margin:0 0 12px; }

/* ── Bandeau compte ── */
.page-recruiter-settings .acct { display:flex; align-items:center; gap:18px; background:linear-gradient(135deg,#2A1E0E 0%,var(--gold-800) 100%); color:var(--n-0); border-radius:15px; padding:16px 20px 16px 24px; margin-bottom:22px; flex-wrap:wrap; box-shadow:0 8px 24px rgba(42,30,14,.24); position:relative; overflow:hidden; }
.page-recruiter-settings .acct::before { content:""; position:absolute; top:0; left:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--gold-300),var(--gold-600)); }
.page-recruiter-settings .acct-l { font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--gold-300); flex-shrink:0; }
.page-recruiter-settings .acct-r { display:flex; align-items:center; gap:14px; flex:1; flex-wrap:wrap; }
.page-recruiter-settings .acct-r b { font-size:14.5px; display:block; }
.page-recruiter-settings .acct-r span { font-size:12px; color:#C9C0A8; }
.page-recruiter-settings .acct .tag-ok { margin-left:auto; flex-shrink:0; background:rgba(191,224,204,.16); color:#BFE0CC; border:1px solid rgba(191,224,204,.35); }

/* ── Bloc établissement ── */
.page-recruiter-settings .etab { border:1px solid var(--n-200); border-radius:16px; margin-bottom:16px; overflow:hidden; background:var(--n-0); }
.page-recruiter-settings .etab-h { display:flex; align-items:flex-start; gap:12px; padding:17px 18px; }
.page-recruiter-settings .etab-tog { width:28px; height:28px; border-radius:8px; border:1px solid var(--n-200); background:var(--n-0); color:var(--n-700); display:grid; place-items:center; cursor:pointer; flex-shrink:0; transition:var(--t); }
.page-recruiter-settings .etab-tog svg { width:14px; height:14px; transition:transform .18s; }
.page-recruiter-settings .etab.closed .etab-tog svg { transform:rotate(-90deg); }
.page-recruiter-settings .etab-b { flex:1; min-width:0; }
.page-recruiter-settings .etab-n { font-size:16px; font-weight:700; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.page-recruiter-settings .etab-a { font-size:12.5px; color:var(--n-500); margin-top:3px; }
.page-recruiter-settings .etab-legal { font-size:11.5px; color:var(--gold-700); font-weight:600; margin-top:6px; }
.page-recruiter-settings .etab-act { display:flex; align-items:center; gap:10px; flex-shrink:0; }
/* Recette Loïc 28/09 (parité Owner, n° 8) — le lien « Vérifier » ajouté en
   brique 3 dans la ligne de titre laissait environ 65 px au nom et à l'adresse à
   390 px : un mot par ligne. Sur téléphone, les actions passent sous le nom,
   alignées sur son texte (flèche 28 px + écart 12 px). */
@media (max-width:560px) {
  .page-recruiter-settings .etab-h { flex-wrap:wrap; }
  .page-recruiter-settings .etab-act { flex-basis:100%; flex-wrap:wrap; padding-left:40px; }
}
.page-recruiter-settings .tool-s { width:30px; height:30px; border-radius:999px; border:1px solid var(--gold-200); background:var(--n-0); color:var(--gold-700); display:grid; place-items:center; cursor:pointer; transition:var(--t); }
.page-recruiter-settings .tool-s:hover { background:var(--gold-50); }
.page-recruiter-settings .tool-s svg { width:14px; height:14px; }
.page-recruiter-settings .etab-poles { padding:0 18px 16px 58px; }
.page-recruiter-settings .etab.closed .etab-poles { display:none; }
.page-recruiter-settings .etab-warn { margin:0 18px 14px 58px; }
.page-recruiter-settings .link-g { font-size:12.5px; font-weight:600; color:var(--gold-700); cursor:pointer; }
.page-recruiter-settings .link-g:hover { text-decoration:underline; }

.page-recruiter-settings .tag-ok { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; background:var(--green-bg); color:var(--green); border:1px solid var(--green-line); border-radius:999px; padding:4px 10px; }
.page-recruiter-settings .tag-todo { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; background:var(--orange-bg); color:var(--orange-tx); border:1px solid var(--orange-line); border-radius:999px; padding:4px 10px; }
.page-recruiter-settings .warn-v { display:flex; gap:8px; align-items:flex-start; background:var(--orange-bg); border:1px solid var(--orange-line); color:#7A4A1E; border-radius:10px; padding:10px 13px; font-size:12px; line-height:1.5; }
.page-recruiter-settings .warn-v svg { width:15px; height:15px; flex-shrink:0; margin-top:1px; }

/* ── Tuiles de pôles (cartes image plein cadre) ── */
.page-recruiter-settings .ptiles { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.page-recruiter-settings .ptile { position:relative; height:132px; border-radius:14px; overflow:hidden; background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:13px 14px; cursor:pointer; transition:.18s; border:1px solid rgba(163,133,67,.25); }
.page-recruiter-settings .ptile:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(44,44,44,.16); }
.page-recruiter-settings .ptile.pt-warn { filter:grayscale(.55) brightness(.92); }
.page-recruiter-settings .pt-edit { position:absolute; top:9px; right:9px; width:28px; height:28px; border-radius:999px; background:rgba(255,255,255,.92); border:none; color:#4A4640; display:grid; place-items:center; cursor:pointer; opacity:0; transition:.18s; z-index:2; }
.page-recruiter-settings .ptile:hover .pt-edit { opacity:1; }
.page-recruiter-settings .pt-edit svg { width:13px; height:13px; }
.page-recruiter-settings .pt-b { position:relative; z-index:1; color:var(--n-0); width:100%; }
.page-recruiter-settings .pt-type { display:inline-block; font-size:9px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; background:rgba(255,255,255,.18); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.28); border-radius:5px; padding:3px 8px; margin-bottom:7px; }
.page-recruiter-settings .pt-n { font-size:15px; font-weight:700; line-height:1.15; }
.page-recruiter-settings .pt-m { font-size:11px; color:#E3DCD0; margin-top:3px; line-height:1.4; }
.page-recruiter-settings .add-pole { grid-column:1/-1; border:1.5px dashed var(--gold-200); background:var(--gold-50); color:var(--gold-700); border-radius:11px; padding:11px; font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; text-align:center; transition:var(--t); }
.page-recruiter-settings .add-pole:hover { border-color:var(--gold-500); }
@media (max-width:1100px) { .page-recruiter-settings .ptiles { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .page-recruiter-settings .ptiles { grid-template-columns:1fr; } }
.page-recruiter-settings .add-etab-btn { width:100%; border:1.5px dashed var(--n-200); background:var(--n-50); color:var(--n-700); border-radius:14px; padding:16px; font-size:13.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:var(--t); }
.page-recruiter-settings .add-etab-btn:hover { border-color:var(--gold-300); background:var(--gold-50); color:var(--gold-700); }
.page-recruiter-settings .add-etab-btn svg { width:16px; height:16px; }

/* ── Champs, boutons, aide ── */
.page-recruiter-settings .inp { border:1px solid var(--n-200); background:#FCFAF6; border-radius:11px; padding:12px 14px; font-family:inherit; font-size:13.5px; color:var(--n-900); width:100%; }
.page-recruiter-settings .inp::placeholder { color:var(--n-300); }
.page-recruiter-settings .btn-gold { border:none; border-radius:999px; font-family:inherit; font-size:13.5px; font-weight:600; padding:12px 22px; cursor:pointer; background:var(--gold-satin); color:var(--on-gold); text-shadow:var(--on-gold-shadow); box-shadow:0 2px 8px rgba(163,133,67,.28); transition:var(--t); }
.page-recruiter-settings .btn-gold:hover { filter:brightness(1.05); transform:translateY(-1px); }
.page-recruiter-settings .btn-gold:disabled { opacity:.5; cursor:not-allowed; transform:none; filter:none; }
.page-recruiter-settings .btn-outline { border:1px solid var(--n-200); background:var(--n-0); border-radius:999px; font-family:inherit; font-size:13.5px; font-weight:600; padding:12px 20px; cursor:pointer; color:var(--n-700); transition:var(--t); }
.page-recruiter-settings .btn-outline:hover { border-color:var(--gold-300); color:var(--gold-700); }
.page-recruiter-settings .btn-outline.danger { color:var(--red); border-color:var(--red-line); }
.page-recruiter-settings .btn-outline.danger:hover { border-color:var(--red); color:var(--red); background:var(--red-bg); }
.page-recruiter-settings .help { font-size:12px; color:var(--n-500); display:flex; align-items:flex-start; gap:7px; margin-top:20px; padding-top:18px; border-top:1px solid var(--n-100); }
/* #4280 — la légende sous le titre « Inviter une personne » : pas de filet entre les deux. */
.page-recruiter-settings .grp-h + .help { margin-top:0; padding-top:0; border-top:0; margin-bottom:10px; }
.page-recruiter-settings .help svg { width:14px; height:14px; color:var(--gold-600); flex-shrink:0; margin-top:2px; }
/* La maquette pose ces trois valeurs en style en ligne sur l'aide de la modale
   d'ajout d'etablissement (`settings.html.erb:1043`) ; le depot n'ecrit pas de
   CSS en ligne, la regle devient une classe. Rendu identique. */
.page-recruiter-settings .help.help-flush { margin-top:0; padding-top:0; border-top:none; }

/* Interrupteur (maquette, bloc Notifications `settings.html.erb:451-455`) :
   l'etat ouvert/ferme d'un pole le reutilise. */
.page-recruiter-settings .tog { display:inline-flex; cursor:pointer; }
.page-recruiter-settings .tog input { position:absolute; opacity:0; width:0; height:0; }
.page-recruiter-settings .tog .sw { width:42px; height:24px; border-radius:999px; background:#D8D3C8; position:relative; transition:var(--t); display:block; }
.page-recruiter-settings .tog .kb { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--n-0); box-shadow:0 1px 2px rgba(44,44,44,.28); transition:var(--t); }
.page-recruiter-settings .tog input:checked + .sw { background:var(--gold-satin); }
.page-recruiter-settings .tog input:checked + .sw .kb { transform:translateX(18px); }

/* ── Modale ── */
.page-recruiter-settings .modal-bd { position:fixed; inset:0; background:rgba(30,24,16,.42); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; padding:24px; z-index:200; }
.page-recruiter-settings .modal-bd.on { display:flex; }
.page-recruiter-settings .modal-c { background:var(--n-0); border-radius:20px; box-shadow:0 24px 70px rgba(30,24,16,.34); width:100%; max-width:560px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden; }
.page-recruiter-settings .mc-top { padding:24px 28px 10px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.page-recruiter-settings .mc-t { font-family:'Geist',system-ui,sans-serif; font-size:21px; font-weight:700; }
.page-recruiter-settings .mc-x { width:30px; height:30px; border-radius:999px; border:none; background:var(--n-100); color:var(--n-500); cursor:pointer; font-size:14px; flex-shrink:0; }
/* #4371 : la croix était posée sur la ligne de base du bouton, décalée en haut
   à gauche de sa pastille. Grille centrée, sans marge interne du navigateur. */
.page-recruiter-settings .mc-x { display:inline-grid; place-items:center; padding:0; line-height:0; align-self:center; }
.page-recruiter-settings .mc-x svg { display:block; }
.page-recruiter-settings .mc-x:hover { background:var(--n-200); }
.page-recruiter-settings .mc-body { overflow:auto; padding:6px 28px 6px; }
.page-recruiter-settings .mc-foot { padding:14px 28px 24px; border-top:1px solid var(--n-100); display:flex; gap:10px; justify-content:flex-end; margin-top:10px; }
.page-recruiter-settings .fld { margin-bottom:16px; }
.page-recruiter-settings .fld label { font-size:10.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--n-500); display:block; margin-bottom:7px; }
.page-recruiter-settings .type-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
.page-recruiter-settings .ty { display:flex; flex-direction:column; align-items:center; gap:7px; border:1.5px solid var(--n-200); border-radius:12px; padding:13px 10px; font-size:12px; font-weight:600; cursor:pointer; transition:var(--t); text-align:center; }
.page-recruiter-settings .ty svg { width:18px; height:18px; color:var(--gold-700); }
.page-recruiter-settings .ty:hover { border-color:var(--gold-300); }
.page-recruiter-settings .ty.on { border-color:var(--gold-500); background:var(--gold-50); color:var(--gold-700); }
/* #4361 : la tuile est un <label> (radio réel), et `.fld label` la passait en
   bloc, en capitales, avec la marge d'un intitulé : l'icône partait en haut à
   gauche, loin de son nom. La tuile reprend le dessin de la maquette (une
   <div> en colonne centrée). */
.page-recruiter-settings .fld .ty { display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0; text-transform:none; letter-spacing:0; font-size:12px; font-weight:600; color:var(--n-700); line-height:1.3; }
.page-recruiter-settings .fld .ty.on { color:var(--gold-700); }
.page-recruiter-settings .ty svg { width:22px; height:22px; flex-shrink:0; }
@media (max-width:480px) { .page-recruiter-settings .type-grid { grid-template-columns:1fr 1fr; } }
.page-recruiter-settings .custom-add { display:flex; gap:9px; margin-top:11px; }
.page-recruiter-settings .custom-add input { flex:1; border:1px dashed var(--gold-200); background:var(--gold-50); border-radius:999px; padding:11px 16px; font-family:inherit; font-size:13px; color:var(--n-900); }
.page-recruiter-settings .custom-add input::placeholder { color:var(--n-300); }
.page-recruiter-settings .custom-add input:focus { outline:none; border-color:var(--gold-500); border-style:solid; background:var(--n-0); }
.page-recruiter-settings .custom-add button { background:var(--gold-satin); color:var(--on-gold); text-shadow:var(--on-gold-shadow); border:none; border-radius:999px; padding:11px 18px; font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.page-recruiter-settings .rad { border:1px solid var(--n-200); border-radius:11px; padding:12px 14px; margin-bottom:8px; }
.page-recruiter-settings .rad label { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--n-900); cursor:pointer; font-weight:500; margin:0; text-transform:none; letter-spacing:0; }
.page-recruiter-settings .rad input { width:16px; height:16px; accent-color:var(--gold-500); }
.page-recruiter-settings .rad span { font-size:11.5px; color:var(--n-500); margin-left:auto; text-align:right; }

/* #4372 (Tatianna 02/10) — la carte SIREN d'une autre société : recherche par
   nom (annuaire des entreprises) et SIRET vérifié au registre, obligatoire. */
.page-recruiter-settings .siren-card { border:1px solid var(--gold-200); background:var(--gold-50); border-radius:12px; padding:14px 14px 12px; margin:-6px 0 16px; }
.page-recruiter-settings .siren-card[hidden] { display:none; }
.page-recruiter-settings .sc-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.page-recruiter-settings .sc-t { font-size:13.5px; font-weight:600; color:var(--n-900); }
.page-recruiter-settings .sc-req { font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--gold-700); border:1px solid var(--gold-300); border-radius:999px; padding:2px 8px; background:var(--n-0); }
.page-recruiter-settings .sc-sub { font-size:12px; color:var(--n-500); line-height:1.5; margin:0 0 10px; }
.page-recruiter-settings .sc-search { position:relative; }
.page-recruiter-settings .sc-search .inp { background:var(--n-0); }
.page-recruiter-settings .sc-list { display:none; margin-top:6px; border:1px solid var(--n-200); border-radius:10px; background:var(--n-0); overflow:hidden; }
.page-recruiter-settings .sc-list.on { display:block; }
.page-recruiter-settings .sc-row { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; padding:9px 12px; border:0; border-bottom:1px solid var(--n-100); background:none; font-family:inherit; cursor:pointer; }
.page-recruiter-settings .sc-row:last-child { border-bottom:0; }
.page-recruiter-settings .sc-row:hover { background:var(--gold-50); }
.page-recruiter-settings .sc-row b { font-size:13px; font-weight:600; color:var(--n-900); }
.page-recruiter-settings .sc-row i { font-style:normal; font-size:11.5px; color:var(--n-500); }
.page-recruiter-settings .sc-none { margin:0; padding:9px 12px; font-size:12px; color:var(--n-500); }
.page-recruiter-settings .sc-hint { font-size:12px; color:var(--n-500); line-height:1.5; margin:6px 0 0; min-height:0; }
.page-recruiter-settings .sc-hint:empty { display:none; }
.page-recruiter-settings .sc-hint.ok { color:var(--green); }
.page-recruiter-settings .sc-hint.ko { color:var(--amber-strong); }

/* ── Champ image d'un pôle (réanalyse du 18/09 : `RecruitmentPole.image` était
   affichée sans jamais être saisie). Même grammaire que `.custom-add` : un
   champ de fichier dans la modale, et l'aperçu de l'image déjà posée. ── */
.page-recruiter-settings .pole-img { display:flex; align-items:center; gap:12px; }
.page-recruiter-settings .pole-img-prev { width:72px; height:48px; border-radius:10px; object-fit:cover; flex-shrink:0; border:1px solid var(--n-200); }
.page-recruiter-settings .pole-img-prev[hidden] { display:none; }
.page-recruiter-settings .pole-img input[type=file] { flex:1; min-width:0; font-family:inherit; font-size:12.5px; color:var(--n-700); }

/* ── État vide honnête : une Maison sans aucun établissement, un établissement
   sans aucun pôle. Aucun compteur à zéro décoratif, une phrase. ── */
.page-recruiter-settings .etab-empty { border:1px dashed var(--n-200); border-radius:16px; padding:28px 22px; text-align:center; color:var(--n-500); font-size:13px; line-height:1.55; margin-bottom:16px; background:var(--n-50); }
.page-recruiter-settings .ptiles-empty { grid-column:1/-1; font-size:12.5px; color:var(--n-500); line-height:1.5; padding:2px 0 6px; }

/* ═══════ B3 tâche 044 — MODE DISCRÉTION (AC38.1) ═══════

   Portée depuis la carte `.disc` de la maquette d'onboarding
   (`mockups/recruiter/onboarding.html.erb`, bloc « MODE DISCRÉTION »,
   l. 427-468 et sa reprise espresso l. 2104-2129) : c'est le seul endroit où
   le client a dessiné cet interrupteur, et la tâche 034 demande de le rendre
   AUSSI après l'onboarding, dans le panneau de la fiche Maison.

   Mêmes classes, mêmes valeurs. Les dorés en dur du <style> de la maquette
   passent par les jetons (`design_tokens.css`), comme les deux écarts déjà
   consignés en tête de cette feuille : le garde-fou du design system refuse
   une feuille neuve qui réintroduirait un doré littéral.

   « C'est la COULEUR DU FOND qui porte l'état » (commentaire de la maquette) :
   au repos une carte parmi d'autres, active elle passe en espresso et se lit
   d'un coup d'œil. Le sombre dit littéralement ce que fait la fonction. */
.panel .disc{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:15px;margin-top:12px;
  position:relative;overflow:hidden;
  background:linear-gradient(118deg,#1C1609,#2A210E 52%,#3A301A);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 22px rgba(28,22,9,.26);
  transition:border-color .18s ease,box-shadow .18s ease}
.panel .disc.on{border-color:rgba(200,170,106,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 3px rgba(163,133,67,.16),
             0 10px 26px rgba(28,22,9,.3)}

/* pastille cadenas : l'icône dit la nature, la couleur dit l'état */
.panel .disc-ic{width:34px;height:34px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);transition:all .18s ease}
.panel .disc-ic svg{width:16px;height:16px;stroke:rgba(246,238,221,.7);stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s ease}
.panel .disc.on .disc-ic{background:rgba(200,170,106,.18);border-color:rgba(200,170,106,.42)}
.panel .disc.on .disc-ic svg{stroke:var(--gold-200)}

.panel .disc-tx{flex:1;min-width:0}
.panel .disc-tx b{display:block;font-size:12.5px;font-weight:700;color:#FEFCF7}
.panel .disc-tx span{display:block;font-size:11.5px;color:rgba(246,238,221,.66);margin-top:3px;line-height:1.45}
.panel .disc.on .disc-tx span{color:rgba(246,238,221,.74)}

/* #4283 — « Ma visibilité » : la visibilité de la fiche, puis le mode
   Discrétion, sous un même titre de groupe, détaché du bouton qui précède. */
.page-recruiter-settings .vis-grp { margin-top:26px; margin-bottom:0; }

/* interrupteur */
.panel .disc .tgl{flex-shrink:0;width:44px;height:25px;border-radius:999px;padding:3px;position:relative;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  cursor:pointer;transition:all .18s ease}
.panel .disc .tgl i{display:block;width:17px;height:17px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(28,22,9,.2);transition:transform .18s ease,background .18s ease}
.panel .disc.on .tgl{background:linear-gradient(135deg,var(--gold-400),var(--gold-500) 52%,var(--gold-700));
  border-color:transparent;box-shadow:0 3px 10px rgba(20,15,6,.4)}
.panel .disc.on .tgl i{transform:translateX(19px)}

/* À 390 px la carte s'empile : le texte garde sa largeur, l'interrupteur passe
   dessous et reste au pouce. Sans ça, `disc-tx` tombe sous 120 px et la phrase
   d'état déborde. */
@media (max-width:560px){
  .panel .disc{flex-wrap:wrap}
  .panel .disc-tx{flex:1 1 100%;order:2}
  .panel .disc .tgl{order:1;margin-left:auto}
}

/* #4411 (Tatianna 05/10) — renommer un établissement depuis le panneau. */
.etab-rename { margin-top:8px; }
.etab-rename > summary { list-style:none; display:inline-block; font-size:12.5px; font-weight:600; color:var(--gold-700); cursor:pointer; }
.etab-rename > summary::-webkit-details-marker { display:none; }
.etab-rename-form { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.etab-rename-form label { flex-basis:100%; font-size:10.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--n-500); }
.etab-rename-form input[type=text] { flex:1 1 220px; min-width:0; padding:9px 12px; border:1px solid var(--n-200, #e5ded2); border-radius:9px; font:inherit; font-size:14px; }
.etab-rename-form input[type=submit] { padding:9px 16px; border:none; border-radius:9px; font-size:12px; font-weight:700; color:#fff; background:var(--gold-fill); cursor:pointer; }