/* B3 tâche 011 — la coque des paramètres recruteur et le panneau « Accès &
   rôles ».

   Portée LITTÉRALEMENT depuis `app/views/mockups/recruiter/settings.html.erb`
   (bloc <style>, sections « Nav latérale », « Accès », « Matrice de
   permissions », « Bas de page ») : mêmes valeurs, mêmes points de rupture.

   La BASE (`.page-recruiter-settings` : tokens, `.wrap`, `.cols`, `.panel`,
   `.grp-h`, `.help`, `.card`, boutons) vit dans
   `recruiter_settings_establishments.css`, portée par la tâche 006. Les deux
   feuilles sont chargées ensemble par `recruiter/settings/show`.

   Ce qui n'est PAS ici, et c'est voulu : le bandeau de sièges, l'encart
   « sièges pleins » et les blocs de facturation de la maquette. Ils n'ont
   aucune source avant l'abonnement (tâches 016 à 025) ; leur CSS arrivera avec
   leur markup. */

/* ── Nav latérale (maquette, « 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); }
@media (max-width:860px) { .page-recruiter-settings .side { position:static; flex-direction:row; flex-wrap:wrap; } }

/* Le menu passe en bandeau horizontal sous 860 px : il ENROULE, il ne
   déborde pas (R3-MOB.10, mesuré à 390 px). */
.page-recruiter-settings .panels { min-width:0; }

/* ── Accès (maquette, « Accès ») ── */
.page-recruiter-settings .acc-row { display:flex; align-items:flex-start; gap:13px; border:1px solid var(--n-200); border-radius:13px; padding:14px 16px; margin-bottom:9px; }
.page-recruiter-settings .acc-row.pending { background:var(--n-50); border-style:dashed; }
.page-recruiter-settings .acc-av { width:38px; height:38px; border-radius:999px; background:var(--gold-satin); color:#fff; text-shadow:0 1px 2px rgba(60,44,10,.45); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.page-recruiter-settings .acc-av.wait { background:var(--n-100); color:var(--n-500); }
.page-recruiter-settings .acc-b { flex:1; min-width:0; }
.page-recruiter-settings .acc-n { font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; overflow-wrap:anywhere; }
.page-recruiter-settings .you-pill { font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; background:var(--gold-100); color:var(--gold-700); border:1px solid var(--gold-200); border-radius:999px; padding:2px 7px; }
.page-recruiter-settings .acc-e { font-size:12px; color:var(--n-500); margin-top:1px; overflow-wrap:anywhere; }
.page-recruiter-settings .acc-scope { font-size:11.5px; color:var(--n-500); margin-top:6px; }
.page-recruiter-settings .acc-scope b { color:var(--n-700); font-weight:600; }
.page-recruiter-settings .acc-meta { font-size:11.5px; color:var(--n-500); margin-top:4px; }
.page-recruiter-settings .acc-acts { display:flex; gap:16px; margin-top:10px; flex-wrap:wrap; }
.page-recruiter-settings .acc-act { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--gold-700); }
.page-recruiter-settings .acc-act svg { width:14px; height:14px; flex-shrink:0; }
.page-recruiter-settings .acc-act:hover { text-decoration:underline; }
.page-recruiter-settings .acc-act.del { color:var(--red); }
.page-recruiter-settings .acc-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.page-recruiter-settings .role-pill { display:inline-flex; align-items:center; border-radius:7px; padding:5px 11px; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; }
/* La maquette écrit un doré clair de plus pour le texte de la pastille Owner ;
   le garde-fou du design system (`test/assets/design_system_test.rb`) interdit
   un 10e doré en dur, et `--gold-200` en est à quatre points sur chaque canal :
   invisible sur le texte d'une pastille, et une variante de moins en
   circulation. Même arbitrage que la tâche 006 sur cette même maquette. */
.page-recruiter-settings .role-owner { background:#2C2A25; color:var(--gold-200); }
.page-recruiter-settings .role-admin { background:var(--gold-100); color:var(--gold-700); border:1px solid var(--gold-200); }
/* La maquette nomme ses pastilles en français (`role-recruteur`,
   `role-membre`) ; le HTML livré porte la valeur de l'énumération
   (`recruiter`, `member`), parce qu'une classe traduite se désynchronise du
   modèle à la première relecture. Les deux noms mènent au même style. */
.page-recruiter-settings .role-recruteur,
.page-recruiter-settings .role-recruiter { background:#EFF1EA; color:#5B6B4A; border:1px solid #D9DFCC; }
.page-recruiter-settings .role-membre,
.page-recruiter-settings .role-member { background:var(--n-100); color:var(--n-500); border:1px solid var(--n-200); }
.page-recruiter-settings .role-defs { display:grid; gap:10px; margin-bottom:16px; }
.page-recruiter-settings .role-def { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.page-recruiter-settings .role-def .role-pill { flex-shrink:0; }
.page-recruiter-settings .role-def p { margin:0; flex:1; min-width:180px; font-size:12.5px; line-height:1.55; color:var(--n-700); }
.page-recruiter-settings .role-select { border:1px solid var(--n-200); border-radius:7px; padding:6px 10px; font-family:inherit; font-size:12px; background:#FCFAF6; color:var(--n-900); }

/* ── Ce que la tâche 011 ajoute à la maquette ──
   Le formulaire de rôle (la maquette avait un `<select>` inerte, qui ne
   pouvait pas porter le périmètre), les états vides honnêtes, et la ligne
   d'accès retiré. */
.page-recruiter-settings .acc-form { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.page-recruiter-settings .acc-act-f { display:inline; }
.page-recruiter-settings .acc-save { border:1px solid var(--gold-200); background:var(--gold-50); color:var(--gold-700); border-radius:999px; padding:5px 13px; font-family:inherit; font-size:11.5px; font-weight:600; cursor:pointer; }
.page-recruiter-settings .acc-save:hover { background:var(--gold-100); }
.page-recruiter-settings .acc-poles { font-size:11.5px; max-width:230px; }
.page-recruiter-settings .acc-poles summary { cursor:pointer; color:var(--gold-700); font-weight:600; text-align:right; }
.page-recruiter-settings .acc-pole-opt { display:flex; align-items:center; gap:7px; padding:4px 0; color:var(--n-700); }
.page-recruiter-settings .acc-pole-opt input { width:14px; height:14px; accent-color:var(--gold-500); }
.page-recruiter-settings .acc-poles-hint { margin:4px 0 0; font-size:10.5px; color:var(--n-500); }
.page-recruiter-settings .acc-empty { font-size:12.5px; color:var(--n-500); border:1px dashed var(--n-200); border-radius:11px; padding:14px; text-align:center; margin-bottom:9px; }
.page-recruiter-settings .acc-grp-spaced { margin-top:22px; }
.page-recruiter-settings .acc-row.revoked { background:var(--n-50); opacity:.85; }
.page-recruiter-settings .acc-out { color:var(--red); font-weight:600; }
.page-recruiter-settings .acc-err { color:var(--orange-tx); font-weight:600; }
.page-recruiter-settings .acc-warn { color:var(--orange-tx); font-weight:600; }
/* Recette Loïc 28/09 (parité Owner, n° 1) — la note « Ce rôle porte tout
   l'établissement » (23/09) vit dans `.acc-right`, qui ne rétrécit pas : sans
   largeur bornée, la colonne prenait la longueur de la phrase. À 390 px la page
   débordait de 148 px et le nom d'un Admin s'écrivait une lettre par ligne. On
   borne la note, et sous 640 px le rôle passe sous le nom, pleine largeur. */
.page-recruiter-settings .acc-right .acc-warn { margin:0; max-width:220px; font-size:11px; line-height:1.4; text-align:right; }
@media (max-width:640px) {
  .page-recruiter-settings .acc-row { flex-wrap:wrap; }
  .page-recruiter-settings .acc-right { flex-basis:100%; align-items:flex-start; padding-left:51px; }
  .page-recruiter-settings .acc-right .acc-warn { max-width:none; text-align:left; }
}
.page-recruiter-settings .ownership-card { border-color:var(--gold-200); }
.page-recruiter-settings .ownership-desc { font-size:12.5px; color:var(--n-700); line-height:1.55; margin:0 0 12px; }
.page-recruiter-settings .ownership-form { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.page-recruiter-settings .ownership-form .inv-inp { flex:1 1 240px; }

/* ── Matrice de permissions (maquette) ── */
.page-recruiter-settings .mx { border:1px solid var(--n-200); border-radius:14px; overflow:hidden; margin-bottom:18px; }
.page-recruiter-settings .mx-head, .page-recruiter-settings .mx-r { display:grid; grid-template-columns:1fr 92px 92px 108px 92px; align-items:center; gap:8px; padding:12px 16px; }
.page-recruiter-settings .mx-head { background:var(--n-50); border-bottom:1px solid var(--n-200); }
.page-recruiter-settings .mx-head .role-pill { justify-self:center; }
.page-recruiter-settings .mx-r { border-bottom:1px solid var(--n-100); font-size:13px; color:var(--n-700); }
.page-recruiter-settings .mx-r:last-child { border-bottom:none; }
.page-recruiter-settings .mx-r i { justify-self:center; width:20px; height:20px; border-radius:999px; display:grid; place-items:center; }
.page-recruiter-settings .mx-r i.y { background:var(--green-bg); border:1px solid var(--green-line); }
.page-recruiter-settings .mx-r i.y::after { content:""; width:8px; height:4.5px; border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:translateY(-1px) rotate(-45deg); }
.page-recruiter-settings .mx-r i.n { background:var(--n-100); border:1px solid var(--n-200); }
.page-recruiter-settings .mx-r i.n::after { content:""; width:9px; height:2px; border-radius:1px; background:var(--n-500); }
@media (max-width:640px) {
  .page-recruiter-settings .mx-head, .page-recruiter-settings .mx-r { grid-template-columns:minmax(0,1fr) 42px 42px 52px 46px; padding:12px 6px; font-size:11px; gap:3px; }
  .page-recruiter-settings .mx-head .role-pill { padding:4px 6px; font-size:8.5px; letter-spacing:.2px; }
}

/* ── Bas de page (maquette) ── */
.page-recruiter-settings .settings-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:6px; }
.page-recruiter-settings .settings-links { display:flex; align-items:center; gap:16px; font-size:12.5px; flex-wrap:wrap; }
.page-recruiter-settings .settings-links a { color:var(--gold-700); font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.page-recruiter-settings .settings-links a:hover { text-decoration:underline; }
.page-recruiter-settings .settings-links a svg { width:14px; height:14px; vertical-align:-2px; }
.page-recruiter-settings .settings-inline-link { font-weight:600; color:var(--gold-700); text-decoration:underline; }

/* ── Les trois panneaux du COMPTE ──
   Ils rendent l'écran partagé avec l'expert (`shared/_account_settings`, design
   `ts-*`). Embarqué dans un panneau, cet écran n'a plus ni colonne de menu ni
   largeur propre : le panneau les porte déjà. */
.page-recruiter-settings .ts-main { display:block; max-width:none; margin:0; padding:0; }
.page-recruiter-settings .ts-content { width:100%; }

/* ── Panneau « Données personnelles » (B3 tâche 014) ──
   Portées telles quelles depuis la maquette canonique
   (`mockups/recruiter/settings.html.erb:402-429, 366-367`). Elles servent aussi
   au panneau « Mon profil » de la maquette, que la tâche 012 portera : elles
   vivent donc dans la feuille de la coque, pas dans une feuille de panneau. */
.page-recruiter-settings .prof-card { margin-bottom:16px; padding:22px 24px; }
.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-ic.warn-ic { background:var(--orange-bg); border-color:var(--orange-line); color:var(--orange-tx); }
.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; }
/* `button_to` enveloppe le bouton dans un formulaire : sans cette ligne, le
   formulaire deviendrait l'élément flexible de la rangée et pousserait le
   bouton hors de son alignement. La maquette avait un `<button>` nu. */
.page-recruiter-settings .cred-form { flex-shrink:0; margin:0; }
/* #4283 — le cadre commun aux panneaux, à 390 px. La maquette laissait le
   bouton d'une ligne (« Demander l'export », « Supprimer ») écraser son texte
   jusqu'à un mot par ligne, et une adresse longue déborder sous « Modifier ».
   Sous 560 px, la ligne passe à la ligne quand le texte tomberait sous 120 px :
   l'action descend, à droite ; une action courte (« Modifier ») reste sur la
   ligne. */
.page-recruiter-settings .cred-s { overflow-wrap:anywhere; }
@media (max-width:560px) {
  .page-recruiter-settings .cred { flex-wrap:wrap; }
  .page-recruiter-settings .cred > .cred-b { flex:1 1 0; min-width:120px; }
  .page-recruiter-settings .cred > :last-child:not(.cred-b) { margin-left:auto; }
}

/* ── B3 tâche 017 — le panneau « Abonnement & facturation » ─────────────────
 *
 * Portées de `app/views/mockups/recruiter/billing.html.erb` (bloc <style>,
 * l.118-129), mêmes classes et mêmes valeurs : le bloc « Informations de
 * facturation » de la maquette de facturation vit dans ce panneau tant que
 * l'écran complet (tâche 018) n'existe pas. Le `.link-g` est celui de
 * `recruiter_settings_establishments.css`, déjà servi sur cette page. */
.page-recruiter-settings .bi-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 32px; }
.page-recruiter-settings .bi-f { min-width:0; }
.page-recruiter-settings .bi-f.full { grid-column:1 / -1; }
/* Le mono de la maquette (`--font-mono`) n'est pas servi sur la page des
   paramètres : on s'aligne sur son propre `.grp-h`, même graisse et même
   interlettrage, plutôt que d'importer une famille pour deux libellés. */
.page-recruiter-settings .bi-k { font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--n-500); display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.page-recruiter-settings .bi-v { font-size:15px; color:var(--n-900); line-height:1.4; word-break:break-word; }
.page-recruiter-settings .bi-v.empty { font-style:italic; color:var(--n-400); font-size:14px; }
/* Mesure du 22/09 a 1440 px : « Voir la facturation », « Changer de formule »
   et « Capital de Tellers » sortaient a 3 px l'un de l'autre — l'espace inter-mots
   qu'Erubi laisse, pas une separation. Le conteneur etait en `display:block` et
   n'avait que sa marge haute. La regle qui convient existait deja, mais sous
   `.page-recruiter-billing` (recruiter_billing.css) : elle ne pouvait pas
   s'appliquer ici, ou la racine de page est `.page-recruiter-settings`. Memes
   valeurs, pour que les deux ecrans se ressemblent. */
.page-recruiter-settings .bi-actions { display:flex; flex-wrap:wrap; gap:18px; margin-top:20px; }
.page-recruiter-settings .bi-actions .link-g { flex-shrink:0; }
@media(max-width:700px){ .page-recruiter-settings .bi-grid { grid-template-columns:1fr; } }

/* ── Sièges de la formule ──
 * Porté de `mockups/recruiter/settings.html.erb` (bloc <style>, `.seats*` et
 * `.full-box`), mêmes valeurs. Absent du portage initial parce qu'aucun
 * abonnement n'existait alors ; posé le 25/09/2026 avec la campagne de parité.
 */
.page-recruiter-settings .seats { border: 1px solid var(--gold-200); background: linear-gradient(135deg, #FFFDF7, #F8F0DC); border-radius: 15px; padding: 16px 18px 16px 22px; margin-bottom: 22px; position: relative; overflow: hidden; }
.page-recruiter-settings .seats::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); }
.page-recruiter-settings .seats-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13.5px; color: var(--n-700); flex-wrap: wrap; }
.page-recruiter-settings .seats-top b { color: var(--n-900); font-weight: 700; }
.page-recruiter-settings .plan-pill { font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; background:var(--gold-100); color:var(--gold-700); border:1px solid var(--gold-200); border-radius:999px; padding:4px 10px; }
.page-recruiter-settings .seats-track { height: 8px; background: #F0E9D8; border-radius: 99px; overflow: hidden; margin: 12px 0 9px; border: 1px solid rgba(163, 133, 67, .14); }
.page-recruiter-settings .seats-fill { height: 100%; background: var(--gold-satin); border-radius: 99px; }
.page-recruiter-settings .seats-note { font-size: 11.5px; color: var(--n-500); }

/* ── Encart sièges pleins ── */
.page-recruiter-settings .full-box { border: 1px solid var(--gold-200); background: linear-gradient(180deg, #FFFDF7, #FBF3E1); border-radius: 14px; padding: 17px 19px; margin-bottom: 18px; }
.page-recruiter-settings .fb-h { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; margin-bottom: 7px; }
.page-recruiter-settings .fb-h svg { width: 18px; height: 18px; color: var(--gold-700); flex-shrink: 0; }
.page-recruiter-settings .full-box p { font-size: 12.5px; color: var(--n-700); margin-bottom: 14px; line-height: 1.55; }
.page-recruiter-settings .fb-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.page-recruiter-settings .fb-acts a { padding: 12px 16px; font-size: 13px; text-align: center; }
@media (max-width: 480px) { .page-recruiter-settings .fb-acts { grid-template-columns: 1fr; } }

/* ── Abonnement & facturation (résumé in-page) ──
   Recette Loïc 28/09 — la carte « Votre plan » de la maquette
   (`mockups/recruiter/settings.html.erb:455-462`), qui n'avait pas été portée :
   le panneau affichait une grille à la place. Valeurs de la source. */
.page-recruiter-settings .bill-plan { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border:1.5px solid var(--gold-500); background:linear-gradient(180deg,#FFFDF9,#FDF7EA); border-radius:16px; padding:24px 24px 22px; margin-bottom:16px; }
.page-recruiter-settings .bill-badge { position:absolute; top:-11px; left:22px; background:var(--gold-satin); color:#fff; text-shadow:0 1px 2px rgba(60,44,10,.45); font-size:9.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; padding:4px 12px; border-radius:999px; }
.page-recruiter-settings .bill-plan-n { font-size:24px; font-weight:700; }
.page-recruiter-settings .bill-plan-price { margin-top:6px; font-size:13px; color:var(--n-500); }
.page-recruiter-settings .bill-plan-price b { font-size:26px; font-weight:700; color:var(--n-900); }
.page-recruiter-settings .bill-plan-price s { color:var(--n-400); margin-right:4px; }
.page-recruiter-settings .bill-plan-next { font-size:12.5px; color:var(--n-500); margin-top:8px; }
.page-recruiter-settings .bill-plan-next b { color:var(--n-900); }
@media (max-width:480px) { .page-recruiter-settings .bill-plan .btn-outline { width:100%; text-align:center; } }
/* Le `style="margin-bottom:8px"` des titres de carte de la source, sans CSS en ligne. */
.page-recruiter-settings .bill-grp-h { margin-bottom:8px; }
/* « Modifier » ouvre le portail Stripe : c'est un POST (`button_to`), rendu comme
   le `.prof-link` de la maquette. */
.page-recruiter-settings .bill-link-form { margin:0; }
.page-recruiter-settings .bill-link-btn { background:none; border:0; padding:0; font-family:inherit; }
/* La pastille « Founding Member » à côté du nom du plan : même dessin que sur la
   page de facturation (`recruiter_billing.css`, `.owner-pill`), dont la règle est
   portée par `.page-recruiter-billing` et ne s'applique donc pas ici. */
.page-recruiter-settings .bill-plan-n .owner-pill { display:inline-block; vertical-align:middle; margin-left:8px; font-size:9px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; background:var(--n-100); color:var(--n-500); border-radius:5px; padding:3px 7px; }

/* #4487 (Talent, Mon compte › Mes données) et #4504 (Maison, Confidentialité)
   — Tatianna 05/10 : la carte « Suppression du compte » porte un fond
   légèrement rouge et un filet rouge pâle pour marquer la zone de danger.
   Jetons globaux du rouge de refus (`design_tokens.css`). */
.page-recruiter-settings .card.is-danger { background:var(--red-50); border-color:var(--red-200); }
.page-recruiter-settings .card.is-danger .grp-h { color:var(--red); }
.page-recruiter-settings .card.is-danger .cred-ic.warn-ic { background:var(--n-0); border-color:var(--red-200); color:var(--red); }

/* #4233 (recette navigateur du 13/10) — une ancre des Paramètres (talent et
   Maison partagent cette coque) s'alignait à y = 0, sous l'en-tête flottant
   (`.ntv2-frame`, bas à 82 px sur ordinateur, 86 px à 390 avec ses marges) :
   le titre « Par qui être contacté » de `#univers` était masqué. Toute cible
   d'ancre réserve la hauteur de l'en-tête plus une respiration (elle
   remplace les 90 px que seules les cartes de Confidentialité avaient).
   Sur ordinateur, `.wrap` est à `zoom:.86` (demande du 04/10) et la marge
   se zoome avec la cible : 120 px y valent 103. */
.page-recruiter-settings [id] { scroll-margin-top: 104px; }
@media (min-width:861px) { .page-recruiter-settings .wrap [id] { scroll-margin-top: 120px; } }