/* ============================================================================
   INTERIM HUB — Feuille de style
   ----------------------------------------------------------------------------
   Palette « violet Power Apps » : la maquette est conçue pour être reconstruite
   dans Power Apps, on reprend donc la couleur de marque de l'outil.
     #F7F5F8  brume   — fond d'application (gris légèrement rosé)
     #4E9F6E  vert    — accent secondaire (succès, validation, disponibilité)
     #8A3B8A  prune   — accent principal (actions, sélection, données)
     #2B2B2B  encre   — texte et titres

   WHY sur les couleurs dérivées : chaque variante ci-dessous est calculée pour
   respecter un contraste AA (4,5:1 minimum pour le texte courant, 3:1 pour les
   éléments d'interface et les grands chiffres) :
     - la prune sur fond blanc atteint 6,8:1 -> utilisable partout ;
     - --prune-fonce (#742774, violet Power Apps) atteint 9,2:1 en blanc sur
       violet -> c'est lui qui porte les boutons et les liens ;
     - le vert sur fond blanc plafonne à 3,2:1 -> il reste réservé aux
       remplissages ; le texte vert et les boutons de validation utilisent
       --vert-fonce (#2F7048, 5,9:1 avec du blanc).
   ============================================================================ */

/* ---------- 1. Variables ------------------------------------------------- */
:root {
  /* Charte */
  --brume: #F7F5F8;
  --vert: #4E9F6E;
  --prune: #8A3B8A;
  --encre: #2B2B2B;

  /* Dérivées prune */
  --prune-fonce: #742774;   /* texte et boutons — contraste AA garanti */
  --prune-100: #EBD9EB;
  --prune-50: #F6EEF6;

  /* Dérivées vert */
  --vert-fonce: #2F7048;  /* texte sur fond clair */
  --vert-100: #DCEEE2;
  --vert-50: #EEF7F1;

  /* Statuts — teintes chaudes, bien distinctes du violet et du vert */
  --alerte: #B04832;       /* critique / retard */
  --alerte-50: #FBEBE7;
  --attention: #A06A16;    /* vigilance / moyenne priorité */
  --attention-50: #FBF1E1;

  /* Neutres */
  --surface: #FFFFFF;
  --fond: var(--brume);
  --bordure: #E4DEE6;      /* gris mauve, dérivé du fond */
  --bordure-claire: #EFEAF0;
  --texte-doux: #625E66;
  --texte-faible: #857F89;

  /* Élévation */
  --ombre-1: 0 1px 2px rgba(43, 43, 43, .05), 0 1px 3px rgba(43, 43, 43, .04);
  --ombre-2: 0 2px 6px rgba(43, 43, 43, .06), 0 8px 20px rgba(43, 43, 43, .06);
  --ombre-3: 0 10px 40px rgba(43, 43, 43, .14);

  --rayon: 12px;
  --rayon-s: 8px;

  --rail: 252px;    /* largeur du volet de navigation */
  --copilot: 340px; /* largeur du panneau Copilot */
}

/* ---------- 2. Base ------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', 'Segoe UI Variable', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  background: var(--fond);
  color: var(--encre);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; }
b, strong { font-weight: 600; }
ul { list-style: none; }

/* ---------- 3. Structure générale ---------------------------------------- */
.app { display: flex; min-height: 100vh; }

/* --- Volet de navigation gauche --- */
.rail {
  width: var(--rail);
  flex: 0 0 var(--rail);
  background: var(--surface);
  border-right: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.rail__marque {
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--bordure-claire);
}
.rail__logo { display: flex; align-items: center; gap: 10px; }
.rail__pastille {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--prune);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 15px;
  flex: 0 0 34px;
}
.rail__nom { font-size: 15px; font-weight: 700; letter-spacing: .3px; }
.rail__tagline { font-size: 11px; color: var(--texte-faible); margin-top: 6px; letter-spacing: .2px; }

.rail__section {
  padding: 16px 20px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--texte-faible);
}

.rail__nav { flex: 1; overflow-y: auto; padding-bottom: 12px; }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  width: calc(100% - 16px);
  margin: 1px 8px;
  padding: 9px 12px;
  border-radius: var(--rayon-s);
  color: var(--encre);
  text-align: left;
  font-size: 13.5px;
  position: relative;
}
.nav-item:hover { background: var(--prune-50); }
.nav-item--actif { background: var(--prune-50); color: var(--prune-fonce); font-weight: 600; }
.nav-item--actif::before {
  content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--prune);
}
.nav-item svg { flex: 0 0 18px; opacity: .8; }
.nav-item--actif svg { opacity: 1; }
.nav-item__badge {
  margin-left: auto; background: var(--alerte); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
}

/* Carte utilisateur en pied de volet */
.rail__pied { border-top: 1px solid var(--bordure-claire); padding: 14px 16px; }
.rail__pied label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--texte-faible); margin-bottom: 7px;
}
.select-role {
  width: 100%; padding: 8px 10px; border-radius: var(--rayon-s);
  border: 1px solid var(--bordure); background: var(--fond);
  font-size: 13px; font-weight: 600; color: var(--prune-fonce);
}
.utilisateur { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--prune-100); color: var(--prune-fonce);
  display: grid; place-items: center; font-weight: 700; font-size: 12.5px;
  flex: 0 0 34px;
}
.avatar--vert { background: var(--vert-100); color: var(--vert-fonce); }
.utilisateur__nom { font-size: 13px; font-weight: 600; }
.utilisateur__role { font-size: 11px; color: var(--texte-doux); }

/* --- Zone principale --- */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  padding: 16px 28px;
  display: flex; align-items: center; gap: 18px;
  position: sticky; top: 0; z-index: 20;
}
.entete__titre { font-size: 19px; }
.entete__sous { font-size: 12.5px; color: var(--texte-doux); margin-top: 2px; }
.entete__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.recherche { position: relative; }
.recherche input {
  width: 250px; padding: 8px 12px 8px 34px;
  border: 1px solid var(--bordure); border-radius: var(--rayon-s);
  background: var(--fond);
}
.recherche input:focus { outline: 2px solid var(--prune); outline-offset: -1px; background: var(--surface); }
.recherche svg { position: absolute; left: 10px; top: 9px; opacity: .45; }

.contenu { padding: 24px 28px 48px; flex: 1; }
.ecran { display: none; }
.ecran--actif { display: block; }

/* ---------- 4. Composants génériques ------------------------------------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-1);
}
.carte__entete {
  padding: 15px 18px;
  border-bottom: 1px solid var(--bordure-claire);
  display: flex; align-items: center; gap: 10px;
}
.carte__titre { font-size: 14.5px; font-weight: 600; }
.carte__lien { margin-left: auto; font-size: 12.5px; color: var(--prune-fonce); font-weight: 600; }
.carte__corps { padding: 16px 18px; }
.carte__corps--serre { padding: 6px 0; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--rayon-s);
  font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
.btn--principal { background: var(--prune-fonce); color: #fff; }
.btn--principal:hover { background: #2F52A6; }
.btn--secondaire { background: var(--surface); color: var(--encre); border-color: var(--bordure); }
.btn--secondaire:hover { background: var(--fond); border-color: var(--prune); }
.btn--vert { background: var(--vert-fonce); color: #fff; }
.btn--vert:hover { background: #255A39; }
.btn--alerte { background: var(--surface); color: var(--alerte); border-color: #E4C4BA; }
.btn--alerte:hover { background: var(--alerte-50); }
.btn--petit { padding: 6px 11px; font-size: 12.5px; }

/* Puces de statut et de priorité */
.puce {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.puce::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.puce--sansPoint::before { display: none; }

.puce--critique   { background: var(--alerte-50);    color: var(--alerte); }
.puce--haute      { background: var(--attention-50); color: var(--attention); }
.puce--moyenne    { background: var(--prune-50);      color: var(--prune-fonce); }
.puce--basse      { background: #EFEDF0;             color: var(--texte-doux); }

.puce--ouverte    { background: #EFEDF0;             color: var(--texte-doux); }
.puce--sourcing   { background: var(--prune-50);      color: var(--prune-fonce); }
.puce--entretiens { background: var(--attention-50); color: var(--attention); }
.puce--pourvue    { background: var(--vert-50);     color: var(--vert-fonce); }
.puce--cloturee   { background: #EFEDF0;             color: var(--texte-faible); }
.puce--refuse     { background: var(--alerte-50);    color: var(--alerte); }
.puce--valide     { background: var(--vert-50);     color: var(--vert-fonce); }
.puce--demarre    { background: var(--vert-100);    color: var(--vert-fonce); }

/* Tableaux (rendus par des galeries Power Apps dans l'app réelle) */
table.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th {
  text-align: left; padding: 9px 18px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--texte-faible);
  border-bottom: 1px solid var(--bordure);
  background: var(--fond);
  white-space: nowrap;
}
.tbl tbody td { padding: 11px 18px; border-bottom: 1px solid var(--bordure-claire); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr.cliquable { cursor: pointer; }
.tbl tbody tr.cliquable:hover { background: var(--prune-50); }
.tbl .num { font-variant-numeric: tabular-nums; }
.ref { font-weight: 600; color: var(--prune-fonce); font-variant-numeric: tabular-nums; }
.secondaire { color: var(--texte-doux); font-size: 12.5px; }

/* Barre de progression des CV reçus */
.jauge { display: flex; align-items: center; gap: 8px; }
.jauge__piste { width: 54px; height: 6px; border-radius: 3px; background: var(--bordure-claire); overflow: hidden; }
.jauge__valeur { height: 100%; border-radius: 3px; background: var(--prune); }
.jauge__valeur--ok { background: var(--vert); }
.jauge__valeur--bas { background: var(--alerte); }
.jauge__texte { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--texte-doux); }

/* ---------- 5. Écran 1 — Tableau de bord --------------------------------- */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) var(--copilot); gap: 20px; align-items: start; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.kpi {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 15px 16px; box-shadow: var(--ombre-1);
  position: relative; overflow: hidden;
}
.kpi::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--prune);
}
.kpi--vert::after { background: var(--vert); }
.kpi--alerte::after { background: var(--alerte); }
.kpi__libelle {
  font-size: 11.5px; font-weight: 600; color: var(--texte-doux);
  display: flex; align-items: center; gap: 7px;
}
.kpi__valeur { font-size: 30px; font-weight: 700; line-height: 1.1; margin: 7px 0 3px; font-variant-numeric: tabular-nums; }
.kpi__unite { font-size: 15px; font-weight: 600; color: var(--texte-doux); margin-left: 2px; }
.kpi__delta { font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.delta--haut { color: var(--vert-fonce); }
.delta--bas { color: var(--alerte); }
.delta--neutre { color: var(--texte-faible); }

.dash__colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dash__pleine { grid-column: 1 / -1; }

/* Liste des prises de poste à venir */
.liste-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid var(--bordure-claire);
}
.liste-item:last-child { border-bottom: none; }
.liste-item__principal { flex: 1; min-width: 0; }
.liste-item__titre { font-size: 13.5px; font-weight: 600; }
.liste-item__meta { font-size: 12px; color: var(--texte-doux); margin-top: 1px; }

.date-pastille {
  flex: 0 0 46px; text-align: center; border-radius: var(--rayon-s);
  background: var(--prune-50); padding: 5px 0; line-height: 1.15;
}
.date-pastille__jour { font-size: 16px; font-weight: 700; color: var(--prune-fonce); }
.date-pastille__mois { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--prune-fonce); opacity: .75; }
.date-pastille--proche { background: var(--alerte-50); }
.date-pastille--proche .date-pastille__jour,
.date-pastille--proche .date-pastille__mois { color: var(--alerte); }

/* Fil d'activité */
.activite { display: flex; gap: 11px; padding: 10px 18px; }
.activite__icone {
  flex: 0 0 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--prune-50); color: var(--prune-fonce);
}
.activite__icone--valide { background: var(--vert-50); color: var(--vert-fonce); }
.activite__icone--refus { background: var(--alerte-50); color: var(--alerte); }
.activite__icone--flux { background: var(--attention-50); color: var(--attention); }
.activite__texte { font-size: 13px; }
.activite__heure { font-size: 11.5px; color: var(--texte-faible); margin-top: 1px; }

/* Panneau Copilot */
.copilot {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre-1);
  position: sticky; top: 92px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 120px);
}
.copilot__entete {
  padding: 14px 16px; border-bottom: 1px solid var(--bordure-claire);
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--prune-50), var(--surface));
  border-radius: var(--rayon) var(--rayon) 0 0;
}
.copilot__pastille {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px;
  background: var(--prune); display: grid; place-items: center; color: #fff;
}
.copilot__titre { font-size: 14px; font-weight: 600; }
.copilot__etat { font-size: 11px; color: var(--vert-fonce); font-weight: 600; }
.copilot__fil { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.bulle { border-radius: 10px; padding: 11px 13px; font-size: 13px; }
.bulle--assistant { background: var(--fond); border: 1px solid var(--bordure-claire); }
.bulle--utilisateur { background: var(--prune-fonce); color: #fff; align-self: flex-end; max-width: 88%; font-weight: 500; }
.bulle p + p, .bulle p + ul, .bulle ul + p { margin-top: 8px; }
.bulle ul { padding-left: 2px; }
.bulle li { position: relative; padding-left: 14px; margin-bottom: 4px; }
.bulle li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--prune); }
.copilot__suggestions { padding: 12px 16px; border-top: 1px solid var(--bordure-claire); display: flex; flex-wrap: wrap; gap: 7px; }
.suggestion {
  border: 1px solid var(--prune-100); background: var(--prune-50); color: var(--prune-fonce);
  border-radius: 16px; padding: 6px 12px; font-size: 12.5px; font-weight: 500; text-align: left;
}
.suggestion:hover { background: var(--prune-100); }
.copilot__avertissement {
  padding: 9px 16px; border-top: 1px solid var(--bordure-claire);
  font-size: 10.5px; color: var(--texte-faible); background: var(--fond);
  border-radius: 0 0 var(--rayon) var(--rayon);
}

/* ---------- 6. Écran 2 — Mes demandes ------------------------------------ */
.filtres { display: flex; gap: 7px; margin-bottom: 16px; flex-wrap: wrap; }
.filtre {
  padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--bordure); background: var(--surface); color: var(--texte-doux);
}
.filtre:hover { border-color: var(--prune); color: var(--prune-fonce); }
.filtre--actif { background: var(--prune-fonce); border-color: var(--prune-fonce); color: #fff; }
.filtre__compte {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px;
  background: var(--fond); color: var(--texte-doux); font-size: 11px;
}
.filtre--actif .filtre__compte { background: rgba(255, 255, 255, .22); color: #fff; }

.barre-info {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--texte-doux); margin-bottom: 12px;
}

/* ---------- 7. Écran 3 — Formulaire -------------------------------------- */
.form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-size: 12.5px; font-weight: 600; }
.champ .obligatoire { color: var(--alerte); margin-left: 2px; }
.champ input, .champ select, .champ textarea {
  padding: 9px 11px; border: 1px solid var(--bordure); border-radius: var(--rayon-s);
  background: var(--surface); width: 100%;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 2px solid var(--prune); outline-offset: -1px;
}
.champ textarea { resize: vertical; min-height: 84px; }
.champ__aide { font-size: 11.5px; color: var(--texte-faible); }

.form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--bordure-claire);
}

/* Aperçu du flux Power Automate */
.flux { display: flex; flex-direction: column; gap: 0; }
.flux__etape {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--bordure);
  border-radius: var(--rayon-s); background: var(--surface);
}
.flux__num {
  flex: 0 0 26px; height: 26px; border-radius: 7px;
  background: var(--prune-50); color: var(--prune-fonce);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.flux__titre { font-size: 13.5px; font-weight: 600; }
.flux__detail { font-size: 12px; color: var(--texte-doux); margin-top: 2px; }
.flux__connecteur {
  height: 18px; width: 2px; background: var(--bordure); margin-left: 27px;
  position: relative;
}
.flux__connecteur::after {
  content: ''; position: absolute; bottom: -1px; left: -3px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--bordure);
}

/* Bandeau de confirmation */
.notification {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--vert-50); border: 1px solid var(--vert-100);
  border-left: 3px solid var(--vert);
  border-radius: var(--rayon-s); padding: 13px 15px; margin-bottom: 20px;
}
.notification__icone { flex: 0 0 22px; color: var(--vert-fonce); }
.notification__titre { font-weight: 600; font-size: 13.5px; }
.notification__texte { font-size: 12.5px; color: var(--texte-doux); margin-top: 2px; }

/* ---------- 8. Écran 4 — Détail de la demande ---------------------------- */
.detail-grille { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 20px; }
.fiche__ligne { display: flex; flex-direction: column; gap: 2px; }
.fiche__cle { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--texte-faible); }
.fiche__valeur { font-size: 13.5px; }

.stats-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-mini { background: var(--fond); border-radius: var(--rayon-s); padding: 12px; text-align: center; }
.stat-mini__valeur { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-mini__libelle { font-size: 11.5px; color: var(--texte-doux); margin-top: 2px; }

/* Chronologie du cycle de vie */
.chrono { padding: 4px 0; }
.chrono__etape { display: flex; gap: 13px; position: relative; padding-bottom: 18px; }
.chrono__etape:last-child { padding-bottom: 0; }
.chrono__etape::before {
  content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--bordure);
}
.chrono__etape:last-child::before { display: none; }
.chrono__etape--fait::before { background: var(--vert); }
.chrono__point {
  flex: 0 0 24px; height: 24px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--bordure); color: var(--texte-faible);
}
.chrono__etape--fait .chrono__point { background: var(--vert); border-color: var(--vert); color: #fff; }
.chrono__etape--encours .chrono__point { background: var(--surface); border-color: var(--prune); color: var(--prune); }
.chrono__titre { font-size: 13.5px; font-weight: 600; }
.chrono__etape--attente .chrono__titre { color: var(--texte-faible); font-weight: 500; }
.chrono__meta { font-size: 12px; color: var(--texte-doux); margin-top: 1px; }
.chrono__badge {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px;
  background: var(--prune-50); color: var(--prune-fonce); font-size: 10.5px; font-weight: 700;
}

/* Encart agence */
.agence-encart { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.agence-logo {
  width: 42px; height: 42px; border-radius: 10px; flex: 0 0 42px;
  background: var(--prune-fonce); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.score-anneau { position: relative; width: 54px; height: 54px; flex: 0 0 54px; }
.score-anneau__texte {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------- 9. Écran 5 — Candidats --------------------------------------- */
.grille-candidats { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.carte-candidat {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre-1);
  padding: 15px 16px; display: flex; flex-direction: column; gap: 12px;
}
.carte-candidat:hover { box-shadow: var(--ombre-2); border-color: var(--prune-100); }
.carte-candidat__haut { display: flex; gap: 12px; align-items: flex-start; }
.photo {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 46px;
  background: var(--prune-100); color: var(--prune-fonce);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--bordure);
}
.photo--grande { width: 68px; height: 68px; flex: 0 0 68px; font-size: 22px; }
.carte-candidat__nom { font-size: 14.5px; font-weight: 600; }
.carte-candidat__poste { font-size: 12.5px; color: var(--texte-doux); }
.carte-candidat__agence { font-size: 11.5px; color: var(--texte-faible); margin-top: 3px; }
.carte-candidat__pied { display: flex; gap: 7px; padding-top: 12px; border-top: 1px solid var(--bordure-claire); }
.carte-candidat__pied .btn { flex: 1; justify-content: center; }

.score-barre { display: flex; align-items: center; gap: 9px; }
.score-barre__piste { flex: 1; height: 6px; border-radius: 3px; background: var(--bordure-claire); overflow: hidden; }
.score-barre__valeur { height: 100%; border-radius: 3px; background: var(--vert); }
.score-barre__valeur--moyen { background: var(--prune); }
.score-barre__valeur--faible { background: var(--attention); }
.score-barre__chiffre { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }
.score-barre__legende { font-size: 11px; color: var(--texte-faible); }

.etiquettes { display: flex; flex-wrap: wrap; gap: 5px; }
.etiquette {
  font-size: 11px; padding: 2px 8px; border-radius: 5px;
  background: var(--fond); border: 1px solid var(--bordure); color: var(--texte-doux);
}

/* ---------- 10. Écran 6 — Fiche candidat --------------------------------- */
.profil-grille { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.profil-identite { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 18px; }
.profil-identite__nom { font-size: 18px; font-weight: 700; }
.profil-identite__poste { font-size: 13px; color: var(--texte-doux); }

.experience { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--bordure-claire); }
.experience:last-child { border-bottom: none; padding-bottom: 0; }
.experience__periode {
  flex: 0 0 92px; font-size: 12px; font-weight: 600; color: var(--prune-fonce);
  font-variant-numeric: tabular-nums;
}
.experience__poste { font-size: 13.5px; font-weight: 600; }
.experience__entreprise { font-size: 12.5px; color: var(--texte-doux); }
.experience__detail { font-size: 12.5px; color: var(--texte-doux); margin-top: 4px; }

.note { background: var(--fond); border-radius: var(--rayon-s); padding: 12px 14px; margin-bottom: 10px; }
.note:last-child { margin-bottom: 0; }
.note__entete { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.note__auteur { font-size: 12.5px; font-weight: 600; }
.note__date { font-size: 11.5px; color: var(--texte-faible); margin-left: auto; }
.note__texte { font-size: 13px; }

.document {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border: 1px solid var(--bordure); border-radius: var(--rayon-s); margin-bottom: 8px;
}
.document:last-child { margin-bottom: 0; }
.document__icone {
  flex: 0 0 30px; height: 30px; border-radius: 6px;
  background: var(--alerte-50); color: var(--alerte);
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.document__nom { font-size: 13px; font-weight: 500; }
.document__meta { font-size: 11.5px; color: var(--texte-faible); }

.panneau-validation { background: var(--vert-50); border-color: var(--vert-100); }
.panneau-validation .carte__entete { border-bottom-color: var(--vert-100); }

/* ---------- 11. Écran 7 — Centre d'opérations ---------------------------- */
.colonnes-flux { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.colonne-flux {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre-1); overflow: hidden;
}
.colonne-flux__entete { padding: 13px 15px; border-bottom: 1px solid var(--bordure-claire); border-top: 3px solid var(--prune); }
.colonne-flux--nouvelle .colonne-flux__entete { border-top-color: var(--texte-faible); }
.colonne-flux--sourcing .colonne-flux__entete { border-top-color: var(--prune); }
.colonne-flux--entretiens .colonne-flux__entete { border-top-color: var(--attention); }
.colonne-flux--prete .colonne-flux__entete { border-top-color: var(--vert); }
.colonne-flux__titre { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.colonne-flux__compte {
  margin-left: auto; background: var(--fond); border: 1px solid var(--bordure);
  border-radius: 10px; padding: 0 8px; font-size: 11.5px; font-weight: 700; color: var(--texte-doux);
}
.colonne-flux__sous { font-size: 11.5px; color: var(--texte-faible); margin-top: 3px; }
.colonne-flux__corps { padding: 11px; display: flex; flex-direction: column; gap: 10px; max-height: 620px; overflow-y: auto; }

.carte-flux {
  border: 1px solid var(--bordure); border-radius: var(--rayon-s);
  padding: 11px 12px; background: var(--surface); text-align: left; width: 100%;
  display: flex; flex-direction: column; gap: 7px;
}
.carte-flux:hover { border-color: var(--prune); box-shadow: var(--ombre-1); }
.carte-flux__ref { font-size: 11.5px; font-weight: 700; color: var(--prune-fonce); font-variant-numeric: tabular-nums; }
.carte-flux__poste { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.carte-flux__meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--texte-doux); flex-wrap: wrap; }
.carte-flux__pied {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 7px; border-top: 1px solid var(--bordure-claire); font-size: 11.5px; color: var(--texte-doux);
}
.carte-flux--critique { border-left: 3px solid var(--alerte); }

/* ---------- 12. Écran 8 — Performance et analytics ----------------------- */
.grille-scorecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 20px; }
.scorecard { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 16px; box-shadow: var(--ombre-1); }
.scorecard__entete { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.scorecard__nom { font-size: 14.5px; font-weight: 700; }
.scorecard__rang { font-size: 11.5px; color: var(--texte-doux); }
.scorecard__metriques { display: flex; flex-direction: column; gap: 9px; }
.metrique { display: grid; grid-template-columns: 88px 1fr 42px; align-items: center; gap: 9px; }
.metrique__libelle { font-size: 11.5px; color: var(--texte-doux); }
.metrique__piste { height: 5px; border-radius: 3px; background: var(--bordure-claire); overflow: hidden; }
.metrique__valeur { height: 100%; border-radius: 3px; background: var(--prune); }
.metrique__chiffre { font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.rang-medaille {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--fond); border: 1px solid var(--bordure); color: var(--texte-doux);
}
.rang-medaille--1 { background: var(--vert); border-color: var(--vert); color: var(--encre); }
.rang-medaille--2 { background: var(--vert-100); border-color: var(--vert-100); color: var(--vert-fonce); }
.rang-medaille--3 { background: var(--prune-100); border-color: var(--prune-100); color: var(--prune-fonce); }

.graphiques { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.graphique { width: 100%; height: auto; display: block; }
.legende { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.legende__item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texte-doux); }
.legende__pastille { width: 10px; height: 10px; border-radius: 3px; }

/* Feuille de route */
.roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.roadmap__phase {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 14px; background: var(--surface); position: relative;
}
.roadmap__phase--termine { background: var(--vert-50); border-color: var(--vert-100); }
.roadmap__phase--encours { border-color: var(--prune); box-shadow: 0 0 0 1px var(--prune); }
.roadmap__num {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: var(--fond); border: 1px solid var(--bordure);
  font-size: 11.5px; font-weight: 700; color: var(--texte-doux); margin-bottom: 9px;
}
.roadmap__phase--termine .roadmap__num { background: var(--vert); border-color: var(--vert); color: var(--encre); }
.roadmap__phase--encours .roadmap__num { background: var(--prune); border-color: var(--prune); color: #fff; }
.roadmap__titre { font-size: 13px; font-weight: 600; line-height: 1.3; }
.roadmap__periode { font-size: 11.5px; color: var(--texte-faible); margin: 4px 0 7px; font-weight: 600; }
.roadmap__detail { font-size: 12px; color: var(--texte-doux); }

/* ---------- 13. Modale et carte Teams ------------------------------------ */
.voile {
  position: fixed; inset: 0; background: rgba(43, 43, 43, .42);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px;
}
.voile--visible { display: flex; }
.modale {
  background: var(--surface); border-radius: var(--rayon);
  box-shadow: var(--ombre-3); width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
}
.modale--large { max-width: 620px; }
.modale__entete { padding: 16px 20px; border-bottom: 1px solid var(--bordure-claire); display: flex; align-items: center; gap: 10px; }
.modale__titre { font-size: 15.5px; font-weight: 600; }
.modale__fermer { margin-left: auto; color: var(--texte-doux); padding: 4px; border-radius: 6px; }
.modale__fermer:hover { background: var(--fond); }
.modale__corps { padding: 20px; }
.modale__pied { padding: 14px 20px; border-top: 1px solid var(--bordure-claire); display: flex; justify-content: flex-end; gap: 10px; }

/* Rendu d'une carte adaptative dans Microsoft Teams.
   WHY : la carte est volontairement rendue avec les codes visuels de Teams
   (violet #5B5FC7, fond #F5F5F5) et non avec la charte maison — c'est ce que
   l'utilisateur verra réellement dans son client Teams. */
.teams-fenetre { background: #F5F5F5; border-radius: var(--rayon-s); padding: 16px; }
.teams-canal { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; font-size: 12.5px; color: #424242; }
.teams-canal__pastille {
  width: 26px; height: 26px; border-radius: 5px; background: #5B5FC7; color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: 0 0 26px;
}
.teams-message { display: flex; gap: 11px; }
.teams-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px;
  background: #5B5FC7; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.teams-bulle { flex: 1; }
.teams-auteur { font-size: 13px; font-weight: 600; color: #242424; }
.teams-auteur span { font-weight: 400; color: #616161; font-size: 11.5px; margin-left: 7px; }
.carte-adaptative {
  background: #fff; border: 1px solid #E1E1E1; border-radius: 6px;
  margin-top: 7px; overflow: hidden; max-width: 420px;
}
.carte-adaptative__bandeau { height: 4px; background: #5B5FC7; }
.carte-adaptative__corps { padding: 15px; }
.carte-adaptative__titre { font-size: 14.5px; font-weight: 700; color: #242424; }
.carte-adaptative__sous { font-size: 12px; color: #616161; margin-top: 2px; }
.carte-adaptative__faits { margin-top: 13px; display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; font-size: 13px; }
.carte-adaptative__cle { color: #616161; font-weight: 600; }
.carte-adaptative__valeur { color: #242424; }
.carte-adaptative__actions { padding: 0 15px 15px; display: flex; gap: 8px; }
.btn-teams {
  padding: 7px 14px; border-radius: 4px; font-size: 13px; font-weight: 600;
  background: #5B5FC7; color: #fff;
}
.btn-teams--secondaire { background: #fff; color: #242424; border: 1px solid #D1D1D1; }

/* ---------- 14. Divers ---------------------------------------------------- */
.fil-ariane { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--texte-doux); margin-bottom: 14px; }
.fil-ariane button { color: var(--prune-fonce); font-weight: 600; }
.fil-ariane button:hover { text-decoration: underline; }

.encart-info {
  display: flex; gap: 10px; padding: 11px 14px; border-radius: var(--rayon-s);
  background: var(--prune-50); border: 1px solid var(--prune-100);
  font-size: 12.5px; color: var(--encre); margin-bottom: 16px;
}
.encart-info svg { flex: 0 0 16px; color: var(--prune-fonce); margin-top: 2px; }

.vide { padding: 40px 20px; text-align: center; color: var(--texte-faible); font-size: 13px; }

.section-titre {
  font-size: 15px; font-weight: 700; margin: 26px 0 13px;
  display: flex; align-items: center; gap: 9px;
}
.section-titre:first-child { margin-top: 0; }
.section-titre__compte { font-size: 12px; font-weight: 600; color: var(--texte-faible); }

.pile { display: flex; flex-direction: column; gap: 20px; }
.rangee { display: flex; align-items: center; gap: 10px; }
.pousse { margin-left: auto; }

/* Bandeau de rappel du contexte maquette. */
.bandeau-demo {
  background: var(--encre); color: #fff; font-size: 11.5px;
  padding: 6px 28px; display: flex; align-items: center; gap: 9px;
}
.bandeau-demo b { color: var(--vert); }

/* ---------- 15. Adaptation tablette -------------------------------------- */
@media (max-width: 1400px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1200px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .copilot { position: static; max-height: none; }
  .detail-grille, .profil-grille { grid-template-columns: minmax(0, 1fr); }
  .colonnes-flux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roadmap { grid-template-columns: repeat(2, 1fr); }
  .graphiques { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --rail: 68px; }
  .rail__nom, .rail__tagline, .rail__section, .nav-item span, .rail__pied .utilisateur div { display: none; }
  .nav-item { justify-content: center; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .dash__colonnes, .form-grille, .fiche { grid-template-columns: 1fr; }
  .recherche input { width: 160px; }
}

/* ---------- 16. Impression ------------------------------------------------ */
@media print {
  .rail, .entete__actions, .copilot__suggestions { display: none; }
  .ecran { display: block !important; page-break-after: always; }
}