/*
 * CRM Rafa (crm.rafa-hr.tech), 02/10/2026.
 * Le « cousin calme » de la marque (design-system/README.md §1) : surfaces bone
 * et chaudes, texte charcoal, lime réservé aux accents (sélection, action
 * principale). Barre latérale sombre : dégradé + grain, comme toute surface sombre.
 * Aucune couleur en dur : uniquement les jetons du système.
 */

.crm {
  --crm-bord: var(--line-soft);
  --crm-fond: var(--neutral-50);
  --crm-surface: var(--neutral-0);
  min-height: 100vh;
  background: var(--crm-fond);
  color: var(--rafa-charcoal);
  font-family: Manrope, system-ui, sans-serif;
}

.crm h1, .crm h2, .crm h3 { font-family: "Plus Jakarta Sans", Manrope, sans-serif; letter-spacing: -0.01em; }

/* ── Barre latérale ── */
.crm-barre {
  position: fixed; inset: 0 auto 0 0; width: 248px; z-index: 30;
  display: flex; flex-direction: column;
  background: var(--rafa-dark-gradient);
  color: var(--rafa-bone);
  overflow: hidden;
}
.crm-barre::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.15; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.crm-barre > * { position: relative; }
.crm-lien {
  display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; margin: 2px 0;
  border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--fg-muted-on-dark);
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.crm-lien:hover { color: var(--rafa-bone); background: color-mix(in srgb, var(--rafa-bone) 8%, transparent); }
.crm-lien[aria-current="page"] { color: var(--rafa-charcoal); background: var(--rafa-lime); font-weight: 600; }
.crm-lien svg { width: 20px; height: 20px; stroke-width: 1.5; flex-shrink: 0; }
.crm-compteur {
  margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: color-mix(in srgb, var(--rafa-bone) 14%, transparent); color: var(--rafa-bone);
}
.crm-lien[aria-current="page"] .crm-compteur { background: var(--rafa-charcoal); color: var(--rafa-lime); }

/* ── Zone de travail ── */
.crm-travail { margin-left: 248px; min-height: 100vh; display: flex; flex-direction: column; }
.crm-entete {
  position: sticky; top: 0; z-index: 20; height: 68px; padding: 0 32px;
  display: flex; align-items: center; gap: 16px;
  background: var(--crm-fond); border-bottom: 1.5px solid var(--crm-bord);
}
.crm-page { padding: 28px 32px 64px; max-width: 1440px; width: 100%; }

/* ── Boutons « touches de machine à écrire », version tableau de bord (Laura, 26/09) ── */
.crm-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px;
  border: 1.5px solid var(--rafa-charcoal); background: var(--crm-surface); color: var(--rafa-charcoal);
  font-family: "Plus Jakarta Sans", Manrope, sans-serif; font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 3px 0 var(--rafa-charcoal);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.crm-bouton:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--rafa-charcoal); }
.crm-bouton:active { transform: translateY(3px); box-shadow: 0 0 0 var(--rafa-charcoal); }
.crm-bouton:focus-visible { outline: 2px solid var(--rafa-lime); outline-offset: 3px; }
.crm-bouton:disabled { opacity: 0.4; pointer-events: none; }
.crm-bouton svg { width: 18px; height: 18px; stroke-width: 1.5; }
.crm-bouton--principal { background: var(--rafa-lime); }
.crm-bouton--petit { height: 34px; padding: 0 12px; font-size: 13.5px; box-shadow: 0 2px 0 var(--rafa-charcoal); }
.crm-bouton--petit:active { transform: translateY(2px); }
.crm-bouton--discret {
  border-color: var(--crm-bord); box-shadow: none; background: transparent;
}
.crm-bouton--discret:hover { transform: none; box-shadow: none; background: var(--crm-surface); border-color: var(--neutral-300); }
.crm-bouton--discret:active { transform: none; }

/* ── Cartes, champs ── */
.crm-carte { background: var(--crm-surface); border: 1.5px solid var(--crm-bord); border-radius: 14px; }
/* `clip` et non `hidden` : arrondit les coins sans casser l'en-tête collant des tableaux. */
.crm-carte--tableau { overflow: clip; }
.crm-champ {
  width: 100%; height: 42px; padding: 0 12px; border-radius: 10px;
  border: 1.5px solid var(--crm-bord); background: var(--crm-surface); color: var(--rafa-charcoal); font-size: 15px;
}
.crm-champ--icone { padding-left: 38px; }
.crm-champ--auto { width: auto; }
.crm-champ:focus { outline: 2px solid var(--rafa-lime); outline-offset: 1px; border-color: var(--rafa-charcoal); }
textarea.crm-champ { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.crm-etiquette { display: block; font-size: 14px; font-weight: 500; color: var(--fg2); margin-bottom: 6px; }
.crm .eyebrow { color: var(--fg2); }

/* ── Pastilles (ce qui informe : forme pilule) ── */
.crm-pastille {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--neutral-50); color: var(--fg2);
  border: 1px solid var(--crm-bord);
}
.crm-pastille--vente { background: color-mix(in srgb, var(--rafa-cornflower) 16%, var(--crm-surface)); color: var(--rafa-charcoal); border-color: color-mix(in srgb, var(--rafa-cornflower) 45%, transparent); }
.crm-pastille--client { background: color-mix(in srgb, var(--rafa-lime) 45%, var(--crm-surface)); color: var(--rafa-charcoal); border-color: var(--rafa-charcoal); }
.crm-pastille--perdu { background: var(--neutral-100); color: var(--fg2); }
.crm-pastille--levee { background: var(--rafa-bone); color: var(--rafa-charcoal); border-color: var(--rafa-charcoal); border-style: dashed; }
.crm-pastille--partenaire { background: color-mix(in srgb, var(--rafa-cornflower) 8%, var(--crm-surface)); color: var(--rafa-charcoal); border-color: var(--rafa-cornflower); border-style: dashed; }
.crm-pastille--alerte { background: var(--danger-bg, var(--neutral-50)); color: var(--danger, var(--rafa-charcoal)); border-color: transparent; }

/* ── Pipeline ── */
.crm-colonnes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; }
.crm-colonne { background: var(--neutral-100); border-radius: 14px; padding: 10px; min-height: 420px; transition: background-color 150ms ease-out, outline-color 150ms; outline: 2px dashed transparent; }
.crm-colonne[data-survol="1"] { outline: 2px solid var(--rafa-charcoal); background: color-mix(in srgb, var(--rafa-lime) 30%, var(--neutral-100)); }
.crm-ticket {
  display: block; background: var(--crm-surface); border: 1.5px solid var(--crm-bord); border-radius: 12px; padding: 12px 14px;
  cursor: grab; transition: box-shadow 150ms ease-out, border-color 150ms ease-out;
}
.crm-ticket:hover { border-color: var(--neutral-300); box-shadow: var(--shadow-sm); }
.crm-ticket[data-glisse="1"] { opacity: 0.45; }
.crm-depot {
  border: 2px dashed var(--neutral-300); border-radius: 14px; padding: 18px; text-align: center;
  font-weight: 600; color: var(--fg2); transition: all 150ms ease-out;
}
.crm-depot[data-survol="1"] { border-style: solid; border-color: var(--rafa-charcoal); background: var(--rafa-lime); color: var(--rafa-charcoal); }

/* ── Tableaux ── */
.crm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.crm-table th {
  position: sticky; top: 68px; z-index: 1; background: var(--crm-fond); text-align: left;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg2);
  padding: 10px 14px; border-bottom: 1.5px solid var(--crm-bord); white-space: nowrap;
}
.crm-table td { padding: 12px 14px; border-bottom: 1px solid var(--crm-bord); vertical-align: middle; }
.crm-table tbody tr { cursor: pointer; transition: background-color 150ms; }
.crm-table tbody tr:hover td { background: var(--crm-surface); }
.crm-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--rafa-lime); }

/* ── Ligne d'action (Ma journée) ── */
.crm-action { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 18px; }
.crm-action + .crm-action { border-top: 1px solid var(--crm-bord); }
.crm-action:hover { background: color-mix(in srgb, var(--neutral-50) 60%, var(--crm-surface)); }
.crm-pictogramme { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--neutral-50); }
.crm-pictogramme svg { width: 20px; height: 20px; stroke-width: 1.5; }
.crm-pictogramme--urgent { background: var(--rafa-lime); }

/* ── Filtres en pastilles cliquables (contrôles = carrés arrondis) ── */
.crm-filtre {
  height: 34px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500;
  border: 1.5px solid var(--crm-bord); background: var(--crm-surface); color: var(--fg2);
}
.crm-filtre[aria-pressed="true"] { border-color: var(--rafa-charcoal); color: var(--rafa-charcoal); background: color-mix(in srgb, var(--rafa-lime) 35%, var(--crm-surface)); font-weight: 600; }

.crm-onglet { height: 44px; padding: 0 4px; margin-right: 22px; font-size: 15px; font-weight: 600; color: var(--fg2); border-bottom: 3px solid transparent; }
.crm-onglet[aria-selected="true"] { color: var(--rafa-charcoal); border-bottom-color: var(--rafa-lime); }

.crm-chiffre { font-family: "Plus Jakarta Sans", Manrope, sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; }

@media (max-width: 1024px) {
  .crm-barre { width: 76px; }
  .crm-barre .crm-texte-large { display: none; }
  .crm-travail { margin-left: 76px; }
  .crm-entete, .crm-page { padding-left: 20px; padding-right: 20px; }
}

/* « À trier » : les quatre espaces où ranger une personne (fusion, 07/10/2026). */
.crm-tri { display: inline-flex; border: 1.5px solid var(--rafa-charcoal); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 0 var(--rafa-charcoal); background: var(--crm-surface); }
.crm-tri > button { display: inline-flex; align-items: center; gap: 6px; height: 31px; padding: 0 11px; font-size: 13.5px; font-weight: 700; color: var(--rafa-charcoal); }
.crm-tri > button + button { border-left: 1.5px solid var(--rafa-charcoal); }
.crm-tri > button:hover { background: var(--rafa-lime); }
.crm-tri > button svg { width: 15px; height: 15px; stroke-width: 1.75; }

/* « Ma journée » simple (Jean, 14/10/2026) : cinq choses à faire, le reste plié. Maquette : bilan-edifice/ma-journee-6f82037c. */
.mj { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; max-width: 1180px; margin: 0 auto; padding-bottom: 40px; }
.mj-bonjour { display: flex; gap: 18px; align-items: center; margin-bottom: 26px; }
.mj-surligne { background: var(--rafa-lime); padding: 0 6px; border-radius: 6px; }
.mj-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 12px; }
.mj-titre h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.mj-titre span { color: var(--fg2); font-size: 13px; }
.mj-carte { background: var(--crm-surface); border: 1.5px solid var(--crm-bord); border-radius: 16px; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; }
.mj-etiquette { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--neutral-100); color: var(--fg2); }
.mj-etiquette--vive { background: var(--rafa-lime); color: var(--rafa-charcoal); }
.mj-etiquette--rdv { background: color-mix(in srgb, var(--rafa-cornflower) 30%, var(--neutral-0)); color: var(--rafa-charcoal); }
.mj-pj { font-size: 12.5px; border: 1.5px solid var(--crm-bord); border-radius: 8px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 6px; }
.mj-pj::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--rafa-cornflower); }
.mj-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.mj-bloc { background: var(--crm-surface); border: 1.5px solid var(--crm-bord); border-radius: 16px; padding: 18px 20px; }
.mj-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mj-etapes li { border: 1.5px solid var(--crm-bord); border-radius: 10px; padding: 10px; font-size: 13.5px; }
.mj-etapes b { display: block; font-family: "Plus Jakarta Sans", Manrope, sans-serif; font-size: 14px; }
.mj-liste { border: 1.5px solid var(--crm-bord); border-radius: 14px; background: var(--crm-surface); overflow: hidden; }
.mj-liste li { display: flex; align-items: center; gap: 12px; padding: 11px 16px; }
.mj-liste li + li { border-top: 1.5px solid var(--crm-bord); }
.mj-liste b { font-family: "Plus Jakarta Sans", Manrope, sans-serif; font-size: 15px; min-width: 180px; }
.mj-liste span { color: var(--fg2); flex: 1; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-liste .crm-bouton { margin-left: auto; }
.mj-pli { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border: 1.5px solid var(--crm-bord); border-radius: 14px; background: var(--crm-surface); color: var(--fg2); }
.mj-pli b { color: var(--rafa-charcoal); }
.mj-pli svg { width: 18px; height: 18px; flex-shrink: 0; }
.mj-cote { display: flex; flex-direction: column; gap: 16px; }
.mj-nuit { background: var(--rafa-dark-gradient); color: var(--rafa-bone); border-radius: 16px; padding: 18px; }
.mj-nuit h3, .mj-encart h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; }
.mj-nuit h3 { color: var(--rafa-lime); }
.mj-nuit ul { list-style: disc; padding-left: 18px; display: grid; gap: 8px; font-size: 14.5px; }
.mj-encart { background: var(--crm-surface); border: 1.5px solid var(--crm-bord); border-radius: 16px; padding: 18px; }
.mj-jour { display: flex; gap: 12px; padding: 8px 0; font-size: 14px; }
.mj-jour + .mj-jour { border-top: 1.5px solid var(--crm-bord); }
.mj-jour b { min-width: 56px; font-family: "Plus Jakarta Sans", Manrope, sans-serif; font-size: 13px; }
.mj-commencer { display: none; }
@media (max-width: 1180px) { .mj { grid-template-columns: minmax(0, 1fr); gap: 0; } .mj-cote { margin-top: 28px; } }
@media (max-width: 640px) {
  /* Sur téléphone, la journée prend tout l'écran : la barre latérale et les états de synchronisation s'effacent. */
  .crm-barre { display: none; }
  .crm-travail { margin-left: 0; }
  .crm-entete, .crm-page { padding-left: 14px; padding-right: 14px; }
  .crm-entete { gap: 10px; }
  .crm-entete > button:first-child { min-width: 0; flex: 1; }
  .mj-carte { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .mj-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mj-liste b { min-width: 0; flex: 1; }
  .mj-liste span { display: none; }
  .mj { padding-bottom: 96px; }
  .mj-commencer { display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--rafa-charcoal); color: var(--rafa-bone); font-size: 14.5px; white-space: nowrap; }
  .mj-commencer b { color: var(--rafa-lime); }
}

/* « Relance groupée » (Jean, 15/10/2026) : un envoi = l'offre, le visuel, la page en direct, les contrôles, le mail. */
.rel-envoi { background: var(--crm-surface); border: 1.5px solid var(--crm-bord); border-radius: 16px; padding: 18px 20px; }
.rel-envoi--rouge { border-color: var(--danger); }
.rel-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rel-grille { display: grid; grid-template-columns: 220px 448px minmax(220px, 1fr); gap: 18px; margin-top: 14px; align-items: start; }
.rel-grille figcaption { margin-top: 6px; font-size: 13px; color: var(--fg2); }
.rel-visuel img { width: 220px; border-radius: 12px; border: 1.5px solid var(--crm-bord); }
.rel-page { position: relative; width: 448px; height: 315px; overflow: hidden; border-radius: 12px; border: 1.5px solid var(--crm-bord); background: var(--neutral-0); }
.rel-page iframe { width: 1280px; height: 900px; border: 0; transform: scale(0.35); transform-origin: 0 0; pointer-events: none; }
.rel-page-etat { position: absolute; inset: auto 8px 8px auto; display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--crm-surface); font-size: 12.5px; }
.rel-apercu { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--rafa-charcoal) 55%, transparent); }
.rel-barre { position: sticky; bottom: 12px; z-index: 10; margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 14px; border: 1.5px solid var(--rafa-charcoal); background: var(--crm-surface); box-shadow: 0 6px 20px -10px rgba(50, 50, 50, .45); }
@media (max-width: 1280px) { .rel-grille { grid-template-columns: 220px minmax(0, 1fr); } .rel-grille > div:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .rel-grille { grid-template-columns: minmax(0, 1fr); } .rel-page { width: 100%; } }