/* Module Recrutement / ATS — feuille de style dediee (P0.6, 23/08/2026).
 *
 * ⚠️ TOUT LE CSS DE CE MODULE VIT ICI, aucun bloc <style> inline dans les
 * 3 pages. Motif mesure, pas une preference : ce depot a connu NEUF incidents
 * CSP ou une modification d'un bloc inline sans `supervisorctl restart`
 * laissait la page cassee en silence. Un fichier externe est servi sous
 * `script-src/style-src 'self'` — aucun hash, aucun redemarrage.
 *
 * ⚠️ AUCUNE CLASSE COMBINEE AVEC `.hidden` NE DECLARE `display`. Cinq fois sur
 * ce depot (`.form-row`, `.modal-overlay`, `.history-error`,
 * `.nav-item-unsubscribed`, `a.card`) une regle posee APRES `.hidden` l'a
 * emporte a specificite egale et laisse visible un element masque.
 * `tests/test_hidden_specificity.py` verrouille desormais la classe entiere.
 */

/* ─────────────────────────────────────────────────────────────────────────
 * HABILLAGE DE BASE (26/08/2026)
 *
 * ⚠️ SANS CE BLOC, LA PAGE S'AFFICHAIT EN TIMES NEW ROMAN, sans fond et avec
 * la marge de 8px du navigateur — mesure en production : `font-family:
 * "Times New Roman"`, `background-color: rgba(0,0,0,0)`, `margin: 8px`.
 *
 * Cause : `client-recruitment.html` est, avec `client-help.html`, l'une des
 * deux seules pages client sans bloc <style> inline. Mais `cpx-help.css`
 * definit `body`/`header`/`main`, alors que cette feuille ne portait que les
 * regles `.rec-*` du module. Les 12 autres pages tiennent leur base de leur
 * bloc inline — celle-ci ne la tenait de nulle part.
 *
 * ⚠️ NE PAS "regler" ce defaut en ajoutant un bloc <style> inline : la page
 * n'en a deliberement aucun (voir l'en-tete de ce fichier), et lui en donner
 * un imposerait de l'inscrire dans `_build_csp_hashes` — donc un redemarrage
 * a chaque retouche de style, et une dixieme occasion d'incident CSP.
 *
 * Valeurs reprises telles quelles de `cpx-help.css`, l'autre page a la meme
 * structure (<header> + #nav-root + <main> + #key-form + #content) — jamais
 * une charte inventee pour cette page.
 * ───────────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  margin: 0;
  padding: 0;
  color: #1f2937;
}

header { background: var(--cpx-blue); color: #fff; padding: 24px 32px; }
header h1 { margin: 0; font-size: 22px; font-weight: 600; }
header p { margin: 4px 0 0; opacity: .8; font-size: 14px; }

main { max-width: 1400px; margin: 0 auto; padding: 24px 20px 60px; }

#key-form { max-width: 420px; margin: 60px auto; text-align: center; }
#key-form input {
  width: 100%; padding: 10px 12px; border: 1px solid #d1d5db;
  border-radius: 6px; font-family: monospace; font-size: 13px; margin: 12px 0;
}
#key-form button {
  background: var(--cpx-green); color: #fff; border: none;
  padding: 10px 20px; border-radius: 6px; font-weight: 600; cursor: pointer;
}

/* ⚠️ `.hidden` N'EST PAS REDECLAREE ICI : elle l'est deja plus bas dans ce
 * meme fichier, avec la note qui explique pourquoi. Une seconde declaration
 * serait inoffensive aujourd'hui (valeur identique) et deviendrait un piege
 * le jour ou l'une des deux changerait. */

.rec-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 20px;
}

.rec-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 15px;
  color: #4b5563;
}

.rec-tab:hover { color: #111827; }

.rec-tab.rec-tab-active {
  border-bottom-color: #1d7a5c;
  color: #111827;
  font-weight: 600;
}

/* ⚠️ `.hidden` EST DECLAREE ICI, ET CE N'ETAIT PAS LE CAS. Les 3 pages
 * portent `class="hidden"` sur leur formulaire de cle, leur contenu, leurs
 * messages et leur bouton de retrait — mais aucune des feuilles qu'elles
 * chargent (cpx-tokens, cpx-nav, cpx-ux-p1) ne declare cette classe : elle
 * ne vivait que dans le <style> inline des 14 pages historiques. Resultat
 * mesure : tout ce qui devait etre masque s'affichait au chargement.
 *
 * Defaut trouve en suivant un garde-fou, jamais a la relecture — le HTML est
 * valide, la classe est bien posee, et rien ne signale qu'elle ne designe
 * aucune regle. C'est le pendant du piege de specificite deja paye cinq fois :
 * la ici, `.hidden` ne perdait pas la cascade, elle n'y entrait pas. */
.hidden { display: none; }

.rec-panel { display: block; }
.rec-panel.hidden { display: none; }

.rec-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.rec-kpi {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px 16px;
  background: #fff;
}

.rec-kpi-value { font-size: 26px; font-weight: 600; color: #111827; }
.rec-kpi-label { font-size: 13px; color: #6b7280; margin-top: 4px; }

.rec-table { width: 100%; border-collapse: collapse; }
.rec-table th,
.rec-table td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
}
.rec-table th { color: #6b7280; font-weight: 600; }

/* Conteneur defilant : une table large ne doit jamais faire defiler la PAGE
 * horizontalement. */
.rec-scroll { overflow-x: auto; }

.rec-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  background: #f3f4f6;
  color: #374151;
}
.rec-badge-ok { background: #dcfce7; color: #14532d; }
.rec-badge-warn { background: #fef3c7; color: #78350f; }
.rec-badge-off { background: #f3f4f6; color: #6b7280; }

.rec-note {
  font-size: 13px;
  color: #6b7280;
  margin: 8px 0 16px;
}

.rec-error {
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 14px;
}

.rec-empty {
  color: #6b7280;
  font-style: italic;
  padding: 14px 0;
  font-size: 14px;
}

.rec-form-row { margin-bottom: 12px; }
.rec-form-row label { display: block; font-size: 13px; color: #374151; margin-bottom: 4px; }
.rec-form-row input,
.rec-form-row select,
.rec-form-row textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.rec-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* Page publique candidat — volontairement sobre : elle est vue par des tiers
 * qui ne sont clients de personne, sur tous types d'appareils. */
.rec-public {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 18px 60px;
}
.rec-public h1 { font-size: 24px; margin-bottom: 6px; }
.rec-public-meta { color: #6b7280; font-size: 14px; margin-bottom: 22px; }
.rec-public-section { margin-bottom: 26px; }
/* Confirmation de candidature : message en vert fonce, code de suivi en
 * rouge gras pour que le candidat le remarque et le conserve. */
.rec-apply-success-body {
  color: #14532d;
  background: #dcfce7;
  border-left: 4px solid #15803d;
  border-radius: 6px;
  padding: 12px 14px;
}
.rec-apply-tracking {
  display: inline-block;
  color: #b91c1c;
  font-weight: 700;
  font-size: 16px;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 6px 10px;
  word-break: break-all;
}

/* Honeypot : invisible pour un humain, rempli par un bot. ⚠️ `display:none`
 * suffit ici et ne peut pas entrer en conflit avec `.hidden` — cette classe
 * n'est jamais combinee avec elle. */
/* ⚠️ `left: -9999px` A ETE RETIRE — DEFAUT REEL MESURE EN RTL (27/08/2026).
 * Inoffensif en LTR, ce decalage rendait la page ARABE visuellement VIDE :
 * le navigateur calcule `scrollWidth` depuis le bord droit en RTL, donc un
 * element a -10168px portait le `<html>` a 11 520 px de large pour un viewport
 * de 1536. La page s'ouvrait sur la zone vide, alors meme que
 * `getBoundingClientRect` et `elementFromPoint` situaient correctement le
 * contenu — d'ou un defaut invisible a toute mesure du DOM.
 *
 * Remplace par le patron « visually hidden » standard : le champ reste dans le
 * DOM et remplissable par un bot (c'est sa raison d'etre), occupe 1px, et ne
 * cree aucun debordement dans l'une ou l'autre direction. */
.rec-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Encart de quotas du tableau de bord (23/08/2026). Aucun `display` declare
   sur une classe combinable avec `.hidden` : le piege de cascade a deja ete
   paye cinq fois sur ce depot. */
.rec-quotas { margin: 0 0 20px; }
.rec-quota-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.rec-quota { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; }
.rec-quota-value { font-size: 1.35rem; font-weight: 600; }
.rec-quota-full { color: var(--cpx-red, #b91c1c); }
.rec-quota-label { font-size: 0.85rem; opacity: 0.75; margin-top: 2px; }

/* ── Actions d'ecriture sur les annonces (R1, 26/08/2026) ─────────────────
 *
 * ⚠️ AUCUNE de ces classes n'est combinable avec `.hidden`, et aucune ne
 * declare `display` sur un selecteur qui pourrait l'etre. Le panneau de
 * formulaire est VIDE plutot que masque (voir ouvrirFormulaire) : un
 * conteneur qu'on vide n'a pas d'etat masque, donc pas de cascade a perdre —
 * c'est ce qui evite le piege paye cinq fois sur ce depot. */
.rec-btn {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  background: none;
}
.rec-btn:disabled { opacity: 0.55; cursor: progress; }

.rec-btn-primary { background: #1d7a5c; color: #fff; }
.rec-btn-primary:hover:not(:disabled) { background: #17654c; }

.rec-btn-link { color: #1d4ed8; border-color: #e5e7eb; }
.rec-btn-link:hover:not(:disabled) { background: #f3f4f6; }

/* Le rouge signale l'irreversible (cloture, revocation) — mais la couleur ne
 * porte jamais l'information seule : ces deux actions demandent en plus une
 * confirmation explicite qui NOMME leur consequence. */
.rec-btn-danger { color: var(--cpx-red, #b91c1c); border-color: #fecdca; }
.rec-btn-danger:hover:not(:disabled) { background: #fef3f2; }

.rec-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.rec-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 18px;
  margin: 0 0 18px;
  background: #fff;
}
.rec-card h3 { margin: 0 0 14px; font-size: 16px; }

.rec-link-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  font-family: monospace;
}

.rec-ok {
  color: #17654c;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 14px;
}

/* ── Pipeline de candidatures (R2, 26/08/2026) ────────────────────────────
 *
 * ⚠️ Meme discipline que R1 : aucune de ces classes n'est combinee avec
 * `.hidden` (les panneaux sont VIDES, pas masques), donc aucune ne peut lui
 * disputer la cascade. */
.rec-kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;      /* la planche defile SEULE, jamais la page entiere */
  padding-bottom: 8px;
  align-items: flex-start;
}

.rec-kanban-col {
  flex: 0 0 232px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
}

.rec-kanban-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}
.rec-kanban-count { color: #6b7280; font-weight: 400; }

.rec-card-kanban {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
}
.rec-card-name { font-size: 14px; font-weight: 600; }
.rec-card-meta { font-size: 12px; color: #6b7280; margin-bottom: 6px; }

.rec-card-stage {
  width: 100%;
  padding: 5px 6px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 6px;
}

/* Un <button> depuis R2.1 (telechargement fetch+blob) : on neutralise le style
 * UA du bouton pour garder l'apparence de lien qu'avait l'ancre. */
.rec-doc-link { display: block; color: #1d4ed8; font-size: 14px; margin: 4px 0;
  background: none; border: none; padding: 0; cursor: pointer;
  text-align: left; font-family: inherit; text-decoration: underline; }
.rec-doc-link:disabled { color: #9ca3af; cursor: wait; }

/* ── Vivier : barre de filtres (R3) ────────────────────────────────────────
 *
 * ⚠️ AUCUNE de ces classes ne declare `display` : elles cohabitent avec des
 * elements que le JS masque, et une regle `display` posee apres `.hidden`
 * l'emporterait a specificite egale — piege paye cinq fois sur ce depot
 * (`.form-row`, `.modal-overlay`, `.history-error`, `.nav-item-unsubscribed`,
 * `a.card`). `.rec-toolbar` en pose un, mais sur un conteneur qui n'est
 * JAMAIS masque : il est vide, jamais cache. */
.rec-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.rec-toolbar input[type="search"] {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.rec-toolbar select {
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.rec-check {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: #374151;
}
.rec-check input { margin: 0; }

/* Score d'adequation CV (R2.2) — un tri, jamais une decision. */
.rec-score-zone { margin: 8px 0 12px; }
.rec-score { display: inline-flex; align-items: baseline; gap: 10px;
  padding: 6px 12px; border-radius: 8px; margin-bottom: 10px; }
.rec-score-num { font-size: 20px; font-weight: 700; line-height: 1; }
.rec-score-lbl { font-size: 12px; opacity: .85; }
.rec-score-good   { background: #e7f6ec; color: var(--cpx-green, #1b7f3b); }
.rec-score-medium { background: #fdf2e2; color: var(--cpx-amber, #92600a); }
.rec-score-poor   { background: #fdecec; color: var(--cpx-red, var(--cpx-red, #b91c1c)); }
/* ── Fiche d'offre publique (27/08/2026) ────────────────────────────────────
 * Rubriques rendues par public/js/cpx-job-offer.js. Aucune de ces regles ne
 * declare `display` sur une classe susceptible de porter `.hidden` : voir
 * tests/test_hidden_specificity.py — a specificite egale, une declaration
 * posterieure l'emporterait et rendrait l'element inmasquable. */
.rec-offer-salary {
  font-size: 17px;
  font-weight: 600;
  color: #1d7a5c;
  margin: 0 0 22px;
}
.rec-offer-section { margin-bottom: 24px; }
.rec-offer-section h2 {
  font-size: 16px;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}
.rec-offer-section p { margin: 0 0 10px; line-height: 1.6; }
.rec-offer-list { margin: 0 0 10px; padding-left: 20px; line-height: 1.6; }
.rec-offer-list li { margin-bottom: 4px; }
.rec-offer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rec-offer-tag {
  background: #eef2f7;
  color: #374151;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 13px;
  line-height: 1.4;
}
.rec-offer-facts {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  line-height: 1.6;
}
.rec-offer-facts dt { color: #6b7280; font-size: 14px; }
.rec-offer-facts dd { margin: 0; }
/* Sous 520px la grille a deux colonnes ecrase les libelles : on empile. */
@media (max-width: 520px) {
  .rec-offer-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .rec-offer-facts dd { margin-bottom: 8px; }
}

/* ── Champ fichier : bouton traduisible (27/08/2026) ────────────────────────
 * Le widget natif est masque VISUELLEMENT, jamais retire du flux : son texte
 * vient de la langue du NAVIGATEUR et ne peut pas etre traduit, mais il reste
 * le controle reel (soumission, validation, accessibilite).
 *
 * ⚠️ NI `display: none` NI `left: -9999px` :
 *   - `display: none` sortirait l'input de l'ordre de tabulation et le rendrait
 *     inatteignable au clavier ;
 *   - `left: -9999px` est l'anti-patron qui a rendu cette page VISUELLEMENT
 *     BLANCHE en arabe (voir `.rec-hp` plus haut) — le reintroduire ici
 *     reproduirait le meme defaut de debordement RTL.
 * D'ou le patron « visually hidden » par clip, qui ne deborde dans aucune
 * direction et conserve le focus clavier. */
/* ⚠️ SELECTEURS SCOPES `.rec-form-row input.` / `.rec-form-row label.`, ET CE
 * N'EST PAS DU ZELE : `.rec-form-row input { width: 100% }` et
 * `.rec-form-row label { display: block }` (specificite 0,1,1) BATTENT une
 * classe seule (0,1,0), quel que soit l'ordre dans le fichier. Mesure en
 * production avec les selecteurs non scopes : l'input gardait `width: 100%` et
 * DEBORDAIT de 403 px — `clip-path` masque la PEINTURE, jamais la boite de
 * mise en page. Sixieme occurrence du piege de cascade sur ce depot. */
.rec-form-row input.rec-file-native {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.rec-form-row label.rec-file-button {
  display: inline-block;
  background: #eef2f7;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  color: #1f2937;
  cursor: pointer;
}
.rec-form-row label.rec-file-button:hover { background: #e2e8f0; }
/* Le focus clavier vit sur l'input masque : sans ce relais, un candidat au
 * clavier ne verrait jamais ou il se trouve. */
.rec-form-row input.rec-file-native:focus ~ label.rec-file-button {
  outline: 2px solid #1d7a5c;
  outline-offset: 2px;
}
.rec-file-status {
  display: inline-block;
  margin-inline-start: 10px;
  font-size: 13px;
  color: #6b7280;
}

/* ── Telephone international (27/08/2026) ───────────────────────────────────
 * ⚠️ SELECTEURS SCOPES `.rec-form-row select.` / `.rec-form-row input.`, meme
 * raison que le champ fichier juste au-dessus : `.rec-form-row select
 * { width: 100% }` (specificite 0,1,1) BAT une classe seule (0,1,0), quel que
 * soit l'ordre dans le fichier. Non scopees, les deux commandes s'empileraient
 * a 100 % chacune au lieu de se partager la ligne.
 * `flex` s'inverse tout seul sous `dir="rtl"` : l'indicatif passe a droite en
 * arabe, ce qui est la lecture attendue — aucune regle RTL a ajouter. */
.rec-phone-group { display: flex; gap: 8px; align-items: stretch; }
.rec-form-row select.rec-phone-country { width: auto; flex: 0 0 auto; max-width: 45%; }
/* `min-width: 0` est obligatoire : sans lui la largeur minimale intrinseque
 * d'un champ flex l'empeche de retrecir, et le groupe deborde de sa colonne. */
.rec-form-row input.rec-phone-number { width: auto; flex: 1 1 auto; min-width: 0; }

/* Avertissement sur l'indicatif PROPOSE (28/08/2026).
 * ⚠️ NE DECLARE JAMAIS `display` : l'element porte `.hidden` quand le candidat
 * a choisi son pays lui-meme, et `.hidden` (0,1,0) perdrait la cascade a
 * specificite egale face a une declaration posee plus bas. Piege deja paye
 * cinq fois sur ce depot. */
.rec-note-defaut { color: #92400e; }

/* ── Evaluation metier independante (calibration humaine, 29/08/2026) ────────
 *
 * ⚠️ AUCUNE de ces classes ne declare `display`, et c'est deliberé : aucune ne
 * cohabite avec `.hidden` aujourd'hui, mais l'y ajouter demain suffirait a
 * reproduire le piege de cascade deja paye cinq fois sur ce depot (`.form-row`,
 * `.modal-overlay`, `.history-error`, `a.card`). Un element `class="X hidden"`
 * doit rester masque.
 *
 * ⚠️ Les champs sont scopes `.rec-calib-table input` plutot que laisses en
 * regle nue : le tableau vit dans le meme document que `.rec-form-row input`,
 * dont la specificite (0,1,1) battrait une classe seule (0,1,0) quel que soit
 * l'ordre du fichier. */

.rec-calib-open,
.rec-calib-select,
.rec-calib-summary,
.rec-calib-actions {
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.rec-calib-open,
.rec-calib-select,
.rec-calib-actions { display: flex; }

.rec-calib-summary {
  display: flex;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.rec-calib-open input { width: 120px; }

.rec-calib-frozen {
  color: #1d7a5c;
  font-weight: 600;
}

/* ⚠️ Ce n'est pas une erreur : une reference incomplete est un ETAT DE TRAVAIL
 * normal, jamais une panne. La teinte reste informative, pas alarmante. */
.rec-calib-todo { color: #92400e; }

.rec-scroll .rec-table input[type="number"] { width: 80px; }
.rec-scroll .rec-table input[type="text"] { width: 100%; min-width: 160px; }

/* ⚠️ SEPTIEME OCCURRENCE DU PIEGE DE CASCADE decrit plus haut, et signalee par
 * un recruteur testant son propre lien public : les deux radios « Oui / Non »
 * d'une question de prequalification s'empilaient l'une sous l'autre au lieu
 * de suivre le texte de la question.
 *
 * La cause n'etait pas une regle manquante mais une regle PERDANTE :
 * `.rec-radio` et `.rec-radio-group` n'existaient dans AUCUNE feuille, si bien
 * que `.rec-form-row label { display: block }` (0,1,1) s'appliquait a chaque
 * etiquette de radio, et `.rec-form-row input { width: 100% }` (0,1,1) etirait
 * chaque bouton sur toute la largeur. Une classe seule (0,1,0) n'y peut rien,
 * quel que soit son rang dans le fichier.
 *
 * D'ou des selecteurs SCOPES qui passent devant :
 *   .rec-form-row label.rec-radio                    -> 0,2,1
 *   .rec-form-row .rec-radio-group input[type=radio] -> 0,3,1
 * `gap` et `flex-wrap` valent dans les deux directions d'ecriture : rien a
 * reprendre pour l'arabe. */
.rec-form-row .rec-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
}

.rec-form-row label.rec-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  cursor: pointer;
}

.rec-form-row .rec-radio-group input[type="radio"] {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  /* Le champ de saisie generique porte une bordure et un rayon : sur un radio,
   * ils ecraseraient le rendu natif du navigateur. */
  border: 0;
  border-radius: 0;
}

/* ⚠️ HUITIEME OCCURRENCE DU PIEGE DE CASCADE, signalee par le meme recruteur
 * sur la meme page, une heure apres la septieme : la case de consentement
 * s'affichait etiree sur toute la largeur, au-dessus de son texte au lieu
 * d'etre devant lui.
 *
 * ⚠️ ET LA CLASSE `.rec-check` EXISTAIT DEJA — inutilisee dans tout le HTML.
 * L'y poser seule n'aurait rien change : `.rec-check` (0,1,0) perd contre
 * `.rec-form-row label { display: block }` (0,1,1), et `.rec-check input`
 * (0,1,1) ne declare aucune largeur, laissant `width: 100%` s'appliquer.
 * Une classe presente mais perdante ressemble a un correctif et n'en est pas.
 * D'ou, encore, des selecteurs SCOPES :
 *   .rec-form-row label.rec-check                        -> 0,2,1
 *   .rec-form-row label.rec-check input[type=checkbox]   -> 0,3,1 */
.rec-form-row label.rec-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  cursor: pointer;
}

.rec-form-row label.rec-check input[type="checkbox"] {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  flex: 0 0 auto;
}

/* ── Tableau de bord actionnable (28/10/2026) ───────────────────────────────
 * ⚠️ Couleurs : UNIQUEMENT les jetons du portail (--cpx-blue, --cpx-green,
 * --cpx-amber, --cpx-red), jamais une palette propre a cette page. Les
 * marges utilisent les proprietes LOGIQUES (inline-start/end) : elles
 * s'inversent seules en arabe. */
.rec-alertes { list-style: none; padding: 0; margin: 0 0 24px; }
.rec-alerte {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;
  border-inline-start: 4px solid var(--cpx-amber);
}
.rec-alerte-interview_without_evaluation { border-inline-start-color: var(--cpx-red); }
.rec-alerte-opening_closing_soon { border-inline-start-color: var(--cpx-blue); }
.rec-alerte-type { font-weight: 600; color: #111827; }
.rec-alerte-objet { color: #4b5563; flex: 1 1 200px; }

.rec-chart-zone { margin-bottom: 24px; }
.rec-chart-row {
  display: grid; grid-template-columns: minmax(120px, 220px) 1fr;
  gap: 12px; align-items: center; margin-bottom: 6px;
}
.rec-chart-label { font-size: 14px; color: #374151; }
.rec-chart-bars { display: flex; flex-direction: column; gap: 3px; }
.rec-chart-track { display: flex; align-items: center; gap: 8px; }
.rec-chart-bar { height: 14px; min-width: 2px; border-radius: 3px; background: var(--cpx-blue); }
.rec-chart-serie-1 { background: var(--cpx-green); }
.rec-chart-value { font-size: 13px; color: #374151; font-variant-numeric: tabular-nums; }
.rec-chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: 13px; }
.rec-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.rec-chart-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
@media (max-width: 600px) {
  .rec-chart-row { grid-template-columns: 1fr; }
}
.rec-chart-serie-0 { background: var(--cpx-blue); }


/* Case « suivre l'annonce » : memes selecteurs scopes que `.rec-file-native`,
 * `.rec-form-row input` et `.rec-form-row label` gagneraient sinon la cascade. */
.rec-form-row input.rec-q-link-case { width: auto; margin-right: 6px; }
.rec-form-row label.rec-q-link-label { display: inline; }

/* Libelle complet d'une evaluation : il ne doit pas elargir la page. */
.rec-calib-select select { max-width: 100%; min-width: 0; }

/* Modeles d'e-mails (14/10/2026). ⚠️ AUCUNE de ces classes ne declare
 * `display` sur un element qui peut porter `.hidden` : l'onglet se masque
 * par son panneau (`.rec-panel.hidden`), jamais par ces classes. */
.rec-emails-choix { gap: 12px; }
.rec-emails-choix .rec-form-row { min-width: 200px; }
.rec-emails-etat { font-size: 13px; font-weight: 600; margin: 4px 0 10px; }
.rec-emails-perso { color: #1d7a5c; }
.rec-emails-defaut { color: #6b7280; }
.rec-emails-jamais { border-inline-start: 3px solid var(--cpx-red, #b91c1c); padding-inline-start: 8px; }
.rec-emails-case { cursor: pointer; }
.rec-emails-variables { margin: 8px 0 12px; }
.rec-emails-variables-titre { font-size: 13px; color: #374151; margin-inline-end: 6px; }
.rec-emails-var { margin: 0 6px 6px 0; font-size: 12px; }
.rec-emails-apercu {
  border: 1px dashed #d1d5db; border-radius: 8px; padding: 12px 14px;
  background: #fafafa; overflow-wrap: anywhere;
}
.rec-emails-apercu-titre { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.rec-emails-apercu-sujet { font-weight: 600; margin-bottom: 8px; }
.rec-emails-apercu p { margin: 0 0 8px; }
@media (min-width: 640px) {
  .rec-emails-choix { display: flex; flex-wrap: wrap; }
}