/* B3 tâche 013 (AC24.3) — panneau « Notifications » des paramètres recruteur.

   Portée LITTÉRALEMENT depuis la maquette canonique
   `app/views/mockups/recruiter/settings.html.erb` (bloc <style>, ligne 313 pour
   la carte, 402 pour `.prof-card`, 443-460 pour la matrice de canaux) et
   `app/views/mockups/recruiter/notifications.html.erb` (bloc « Rythme des
   emails », `.opt`). Sélecteurs, valeurs, points de rupture : identiques.

   La BASE (`.page-recruiter-settings` : tokens, `.wrap`, `.cols`, `.panel`,
   `.grp-h`, `.help`, `.tog`, boutons) vient de
   `recruiter_settings_establishments.css` ; cette feuille n'ajoute que ce que
   la maquette dessine EN PLUS pour ce panneau.

   Aucune couleur en dur : la feuille est déclarée dans TOKENISED_SHEETS
   (`test/assets/design_system_test.rb`). Les quatre états que la tâche ajoute à
   la maquette (case inactive, tiret, « Toujours envoyé », pastille de brique)
   n'introduisent aucune teinte nouvelle : ils réutilisent --n-300 et --n-500,
   l'encre secondaire déjà en place sur cet écran. */

/* ── Cartes (maquette `settings.html.erb:313` et `:402`) ── */
.page-recruiter-settings .card { background:var(--n-0); border:1px solid var(--n-200); border-radius:16px; padding:20px 22px; margin-bottom:18px; }
.page-recruiter-settings .prof-card { margin-bottom:16px; padding:22px 24px; }

/* ── Matrice type x canal (maquette `settings.html.erb:443-450`) ── */
.page-recruiter-settings .ntf-head { display:grid; grid-template-columns:1fr 76px 76px 76px; align-items:center; padding:4px 0 12px; border-bottom:1px solid var(--n-100); }
.page-recruiter-settings .ntf-head .ch { justify-self:center; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--n-500); text-align:center; line-height:1.5; }
.page-recruiter-settings .ntf-row { display:grid; grid-template-columns:1fr 76px 76px 76px; align-items:center; padding:14px 0; border-bottom:1px solid var(--n-100); }
.page-recruiter-settings .ntf-row:last-child { border-bottom:none; }
.page-recruiter-settings .ntf-t { font-size:13.5px; font-weight:600; color:var(--n-900); }
.page-recruiter-settings .ntf-d { font-size:12px; color:var(--n-500); margin-top:2px; line-height:1.45; max-width:400px; }
.page-recruiter-settings .ntf-grp { margin:20px 0 2px; }
.page-recruiter-settings .ntf-cell { justify-self:center; display:flex; align-items:center; justify-content:center; }
.page-recruiter-settings .ntf-actions { display:flex; justify-content:flex-end; margin-top:8px; }

/* Ce que la maquette n'avait pas, parce qu'elle ne distinguait pas un
   interrupteur réel d'un interrupteur décoratif :
     .ntf-na     — le canal n'existe pas sur cette ligne (aucune surface qui
                   lise le `kind`, ou message non coupable) ;
     .ntf-always — « Toujours envoyé », sur les lignes que rien ne coupe ;
     .ntf-badge  — la pastille de brique, en tête de colonne ou sur la ligne. */
.page-recruiter-settings .ntf-na { color:var(--n-300); font-size:14px; }
.page-recruiter-settings .ntf-always { display:inline-block; margin-left:8px; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--gold-700); background:var(--gold-50); border:1px solid var(--gold-200); border-radius:999px; padding:2px 8px; vertical-align:middle; }
.page-recruiter-settings .ntf-badge { display:inline-block; margin-left:8px; font-size:10px; font-weight:600; letter-spacing:.3px; color:var(--n-500); background:var(--n-100); border-radius:999px; padding:2px 8px; vertical-align:middle; }
/* La pastille d'en-tete de colonne tient sur UNE ligne. Les colonnes de
   bascules font 76 px (52 sous 900 px) : c'est la largeur d'un interrupteur,
   pas celle d'un libelle. Tant que la pastille disait « Post-MVP » elle y
   entrait ; « Brique a venir », qui l'a remplacee le 22/09 pour sortir le
   jargon des ecrans, la faisait passer sur deux lignes et descendre toute la
   ligne d'en-tete d'une douzaine de pixels.
   Elle deborde donc symetriquement sur la gouttiere (`margin-inline`), ce qui
   ne coute rien : sur cette ligne, EMAIL et DANS L'APP n'ont pas de pastille,
   la place est libre des deux cotes. */
.page-recruiter-settings .ntf-head .ch .ntf-badge { display:block; margin:3px -14px 0; width:auto; letter-spacing:0; text-transform:none; white-space:nowrap; font-size:9px; padding:2px 6px; }

/* Une case inactive doit SE VOIR inactive : sans ça, le recruteur la clique et
   croit à une panne. */
.page-recruiter-settings .tog input:disabled + .sw { opacity:.45; }
.page-recruiter-settings .tog:has(input:disabled) { cursor:not-allowed; }

/* ── Rythme des emails (maquette `notifications.html.erb`, bloc `.opt`) ── */
.page-recruiter-settings .opt { display:flex; align-items:flex-start; gap:13px; border:1px solid var(--n-200); border-radius:13px; padding:15px 16px; margin-bottom:10px; cursor:pointer; transition:var(--t); }
.page-recruiter-settings .opt:hover { border-color:var(--gold-300); }
.page-recruiter-settings .opt.on { border-color:var(--gold-300); background:var(--gold-50); }
.page-recruiter-settings .opt.opt-off { cursor:not-allowed; }
.page-recruiter-settings .opt.opt-off:hover { border-color:var(--n-200); }
.page-recruiter-settings .opt input { position:absolute; opacity:0; width:0; height:0; }
.page-recruiter-settings .opt .rd { width:19px; height:19px; border-radius:50%; border:2px solid var(--n-300); flex-shrink:0; margin-top:1px; position:relative; transition:var(--t); }
.page-recruiter-settings .opt.on .rd { border-color:var(--gold-500); }
.page-recruiter-settings .opt.on .rd::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--gold-fill-deep); }
.page-recruiter-settings .opt-t { font-size:14px; font-weight:600; }
.page-recruiter-settings .opt.on .opt-t { color:var(--gold-700); }
.page-recruiter-settings .opt-d { font-size:12.5px; color:var(--n-500); margin-top:3px; line-height:1.45; }

/* ── Mobile (maquette `settings.html.erb:456-460`, mesuré à 390 px) ── */
@media (max-width:560px) {
  .page-recruiter-settings .ntf-head, .page-recruiter-settings .ntf-row { grid-template-columns:1fr 52px 52px 52px; }
  .page-recruiter-settings .ntf-head .ch { font-size:9px; letter-spacing:.4px; }
  .page-recruiter-settings .tog .sw { width:38px; }
  .page-recruiter-settings .tog input:checked + .sw .kb { transform:translateX(14px); }
  .page-recruiter-settings .ntf-actions .btn-gold { width:100%; text-align:center; }
}