:root {
  --bleu-pale: #E5F2FF;
  --bleu-bord: #CCE5FF;
  --bleu-texte: #0062C4;
  --choisie: #99CCFF;
  --gris-clair: #F5F5FA;
  --point: #A9A5BA;
  --survol: #D5D3E6;
  --ombre-barre: 0 1px 3px rgba(28, 22, 41, .07);
  --colonne: #E9EFF4;
  --colonne-bleue: #E5F1FC;
  --ligne-bleue: #F7FBFF;
  --ligne-survol: #FAFBFD;
  --ombre-menu: 0 12px 30px rgba(28, 22, 41, .16);
}

.crm-page { font-size: 15px; line-height: 1.45; }
:where(.crm, .annonce, .dialogue) p, :where(.crm) dl, :where(.crm) dd { margin: 0; }
:where(.crm) ul, :where(.crm) ol { margin: 0; padding: 0; list-style: none; }
.crm button, .dialogue button { font-family: var(--texte); }
.masque, .appeler-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono, .score { font-family: var(--mono); font-weight: 400; }
.chargement { padding: 40px 24px; color: var(--gris); }

.ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ico-oui { stroke: var(--bleu); stroke-width: 2.6; }
.ico-non { stroke: var(--point); stroke-width: 2.6; }
.symbole { height: 22px; width: auto; flex: none; color: var(--encre); }
.eligible { display: inline-flex; }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--bordure);
  border-radius: 8px; background: var(--carte); color: var(--encre); font: 600 14px/1.1 var(--texte); text-decoration: none; white-space: nowrap; cursor: pointer; }
.bouton:hover { border-color: var(--survol); }
.bouton[disabled] { opacity: .5; cursor: default; }
.bouton-plein { background: var(--bouton); border-color: var(--bouton); color: #fff; }
.bouton-plein:hover { background: var(--bleu-survol); border-color: var(--bleu-survol); }
.bouton-discret { border-color: transparent; background: transparent; color: var(--gris); }
.bouton-discret:hover { border-color: var(--bordure); color: var(--encre); }
.bouton-petit { min-height: 30px; padding: 0 10px; font-size: 13px; }
.bouton-inerte { color: var(--gris); cursor: default; }
.pastille { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border: 1px solid var(--bordure); border-radius: 999px;
  background: var(--gris-clair); color: var(--encre); font: 600 13px/1 var(--texte); white-space: nowrap; }
button.pastille { cursor: pointer; }
.pastille-bleue { background: var(--bleu-pale); border-color: var(--bleu-bord); color: var(--bleu-texte); }
.point { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--point); }
.pastille-bleue .point, .point-bleu { background: var(--bleu); }
.pastille-pleine .point { background: var(--encre); }

.barre { position: relative; z-index: 2; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "marque selecteur recherche moi";
  align-items: center; gap: 10px 20px; padding: 10px 24px; background: var(--carte); box-shadow: var(--ombre-barre); }
.barre-marque { grid-area: marque; display: flex; align-items: center; gap: 10px; }
.barre-titre { font: 700 17px/1 var(--titre); }
.selecteur { grid-area: selecteur; justify-self: start; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--fond); }
.selecteur button { min-height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--gris);
  font: 600 14px/1 var(--texte); white-space: nowrap; cursor: pointer; }
.selecteur button[aria-pressed="true"] { border-color: var(--bordure); background: var(--carte); color: var(--encre); }
.barre-recherche { grid-area: recherche; display: flex; justify-content: flex-end; gap: 8px; min-width: 0; }
.recherche { display: flex; align-items: center; gap: 8px; width: min(340px, 100%); height: 38px; padding: 0 12px; border: 1px solid var(--bordure); border-radius: 8px;
  background: var(--gris-clair); color: var(--gris); }
.recherche:focus-within { border-color: var(--bleu); background: var(--carte); box-shadow: 0 0 0 3px var(--bleu-pale); }
.recherche input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--encre); font: 400 15px/1 var(--texte); }
.recherche input::placeholder { color: var(--gris); opacity: 1; }
.bouton-filtres { display: none; }
.bouton-filtres.actif { border-color: var(--bleu-bord); background: var(--bleu-pale); color: var(--bleu-texte); }
.barre-moi { grid-area: moi; display: flex; align-items: center; gap: 8px; }
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--encre); color: #fff; font: 600 13px/1 var(--texte); }
.moi-nom { font-weight: 600; }

.filtres { max-width: 1440px; margin: 0 auto; padding: 14px 24px 0; }
.filtres-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filtre { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.filtre select { max-width: 100%; height: 34px; padding: 0 32px 0 12px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--carte); color: var(--encre);
  font: 600 13.5px/1 var(--texte); appearance: none; -webkit-appearance: none; cursor: pointer; }
.filtre .ico-bas { position: absolute; right: 10px; width: 14px; height: 14px; color: var(--gris); pointer-events: none; }
.filtre.actif select { border-color: var(--bleu-bord); background: var(--bleu-pale); color: var(--bleu-texte); }
.filtre.actif .ico-bas { color: var(--bleu-texte); }

.bandeau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; max-width: 1392px; margin: 14px auto 0;
  padding: 10px 10px 10px 14px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--carte); font-weight: 600; }
#bandeau { padding: 0 24px; }

.ecran { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; max-width: 1440px; margin: 0 auto; padding: 16px 24px 48px; }
.ecran.avec-fiche { grid-template-columns: minmax(0, 1fr) 380px; }
.vue { container: vue / inline-size; min-width: 0; }

.chiffres { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.chiffre { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--carte); }
.chiffre-libelle { overflow: hidden; color: var(--gris); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.chiffre-valeur { font: 800 26px/1.15 var(--titre); font-variant-numeric: tabular-nums; }

.sauts { display: none; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.section { margin-top: 22px; }
.section-carte { padding: 14px 16px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--carte); }
.section-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 10px; font: 700 16px/1.3 var(--titre); }
.compte { color: var(--gris); font: 400 13px/1 var(--mono); }
.section-aide { color: var(--gris); font: 400 13.5px/1.3 var(--texte); }
.vide { color: var(--gris); }
.section:not(.section-carte) > .vide { padding: 16px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--carte); }
.vide-filtres { display: grid; justify-items: start; gap: 12px; margin-top: 22px; padding: 18px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--carte); }

.appels { display: grid; gap: 8px; }
.appel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) auto minmax(84px, auto) auto;
  grid-template-areas: "qui profil score etat actions" "note note note note note"; align-items: center; gap: 6px 16px; padding: 14px 16px;
  border: 1px solid var(--bordure); border-radius: 12px; background: var(--carte); cursor: pointer; }
.appel:hover { border-color: var(--survol); }
.appel.choisie { border-color: var(--choisie); box-shadow: 0 0 0 3px var(--bleu-pale); }
.appel-qui { grid-area: qui; min-width: 0; }
.appel-nom { font: 700 15.5px/1.3 var(--titre); }
.nom-lien { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.nom-lien:hover { text-decoration: underline; text-underline-offset: 2px; }
.appel-role { margin-top: 2px; color: var(--gris); font-size: 14px; overflow-wrap: anywhere; }
.appel-profil { grid-area: profil; display: flex; flex-direction: column; min-width: 0; color: var(--gris); font-size: 14px; overflow-wrap: anywhere; }
.appel-quand { color: var(--encre); }
.appel-score { grid-area: score; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.score { font-size: 13px; }
.appel-etat { grid-area: etat; }
.appel-actions { grid-area: actions; display: flex; gap: 6px; }
.bouton-appeler { position: relative; }
.appel-note { grid-area: note; display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--gris); font-size: 14px; }
.appel-note .ico { width: 14px; height: 14px; }
.appel-note-texte { min-width: 0; overflow: hidden; color: var(--encre); white-space: nowrap; text-overflow: ellipsis; }
.appel-note-qui { flex: none; white-space: nowrap; }

.liste-rdv { display: grid; gap: 1px; background: var(--bordure); }
.ligne-rdv { display: flex; align-items: center; gap: 12px; padding: 10px 0; background: var(--carte); cursor: pointer; }
.ligne-rdv.choisie .rdv-nom { color: var(--bleu-texte); }
.rdv-ico { display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; border: 1px solid var(--bordure); border-radius: 8px; }
.rdv-texte { min-width: 0; }
.rdv-titre { font-weight: 600; overflow-wrap: anywhere; }
.rdv-nom { font-weight: 600; }
.rdv-sous { margin-top: 2px; color: var(--gris); font-size: 14px; overflow-wrap: anywhere; }

.liens-tableau { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 18px; }
.lien-tableau { display: inline-flex; align-items: center; gap: 2px; padding: 8px 0; border: 0; background: none; color: var(--gris); font: 600 14px/1.2 var(--texte); cursor: pointer; }
.lien-tableau:hover { color: var(--encre); }
.lien-tableau .ico { width: 14px; height: 14px; }

@container vue (max-width: 999px) {
  .appel { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "qui qui etat actions" "score profil profil actions" "note note note note";
    gap: 4px 12px; }
  .appel-etat { align-self: start; justify-self: end; }
  .appel-profil { display: block; }
  .appel-quand::before { content: "\00a0· "; color: var(--gris); }
  .appel-note { margin-top: 4px; }
}

@container vue (max-width: 680px) {
  .chiffres { gap: 1px; overflow: hidden; border: 1px solid var(--bordure); border-radius: 12px; background: var(--bordure); }
  .chiffre { align-items: center; padding: 10px 4px; border: 0; border-radius: 0; text-align: center; }
  .chiffre-libelle { order: 2; font-size: 12px; }
  .chiffre-valeur { font-size: 21px; }
  .sauts { display: flex; }
  .appel { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "qui etat" "score score" "profil profil" "note note" "actions actions";
    align-items: start; gap: 4px 10px; padding: 14px; }
  .appel-nom { font-size: 16.5px; }
  .appel-profil { display: flex; }
  .appel-quand::before { content: none; }
  .appel-note { margin-top: 0; }
  .appel-score { margin-top: 4px; }
  .appel-actions { margin-top: 8px; }
  .appel-actions .bouton { min-height: 44px; font-size: 15px; }
  .bouton-appeler { flex: 1; }
  .appeler-numero { display: none; }
  .appeler-mot { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

.bouton-menu { grid-area: menu; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 26px; height: 26px; margin: -3px -6px 0 0;
  padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--gris); font: 600 14px/1 var(--texte); cursor: pointer; }
.bouton-menu:hover, .bouton-menu[aria-expanded="true"] { border-color: var(--bordure); background: var(--gris-clair); color: var(--encre); }
.bouton-menu[disabled] { opacity: .5; cursor: default; }
.bouton-menu-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pastille-menu { font-family: var(--texte); }
.pastille-menu .ico-bas { width: 13px; height: 13px; margin-right: -3px; }
.pastille-menu[aria-expanded="true"], .pastille-menu:hover { border-color: var(--survol); }
.pastille-bleue.pastille-menu:hover, .pastille-bleue.pastille-menu[aria-expanded="true"] { border-color: var(--choisie); }
.menu-etape-panneau { display: grid; gap: 2px; padding: 4px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--carte); cursor: default; }
.menu-etape-choix { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px 0 34px; border: 0; border-radius: 7px; background: transparent;
  color: var(--encre); font: 600 14px/1.2 var(--texte); text-align: left; cursor: pointer; }
.menu-etape-choix:hover { background: var(--bleu-pale); color: var(--bleu-texte); }
.menu-etape-choix.actuelle { padding-left: 10px; color: var(--gris); cursor: default; }
.menu-etape-choix.actuelle:hover { background: transparent; color: var(--gris); }
.menu-etape-boite { position: relative; display: inline-flex; }
.menu-etape-boite .menu-etape-panneau { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; width: 220px; box-shadow: var(--ombre-menu); }

.onglets { display: none; }
.pipeline-aide { margin-top: 18px; color: var(--gris); font-size: 14px; }
.pipeline { display: flex; align-items: stretch; gap: 12px; margin-top: 10px; padding-bottom: 6px; overflow-x: auto; }
.colonne { display: flex; flex: 1 1 0; flex-direction: column; gap: 8px; min-width: 200px; min-height: 380px; padding: 8px; border: 2px solid transparent;
  border-radius: 12px; background: var(--colonne); }
.colonne-bleue { background: var(--colonne-bleue); }
.colonne.cible { border-color: var(--bleu); background: var(--bleu-pale); }
.colonne-titre { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px 2px; font: 700 15px/1.3 var(--titre); }
.colonne-cartes { display: grid; align-content: start; gap: 8px; }
.colonne-vide { padding: 2px 4px; color: var(--gris); font-size: 14px; }
.colonne-deplier { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.colonne-deplier .ico { width: 14px; height: 14px; color: var(--gris); }
.rail { display: flex; flex: none; flex-direction: column; gap: 12px; width: 54px; }
.colonne.repliee { flex: 1 1 0; min-width: 0; min-height: 150px; padding: 0; }
.colonne.repliee .colonne-cartes { display: none; }
.colonne.repliee .colonne-titre { display: flex; flex: 1; padding: 0; }
.colonne.repliee .colonne-deplier { flex: 1; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 12px 0; writing-mode: vertical-rl; }
.colonne.repliee:hover .colonne-deplier .ico { color: var(--encre); }

.carte-pipe { container: carte-pipe / inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "nom score menu" "sous sous sous" "bas bas bas" "actions actions actions" "panneau panneau panneau";
  align-items: start; gap: 2px 8px; padding: 11px 11px 12px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--carte); cursor: pointer;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.carte-pipe:hover { border-color: var(--survol); }
.carte-pipe.choisie { border-color: var(--choisie); box-shadow: 0 0 0 3px var(--bleu-pale); }
.carte-pipe.souleve { opacity: .35; }
.cp-nom { grid-area: nom; min-width: 0; font: 700 14.5px/1.3 var(--titre); }
.cp-score { grid-area: score; color: var(--gris); font: 400 12.5px/1.6 var(--mono); }
.cp-sous { grid-area: sous; color: var(--gris); font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.cp-bas { grid-area: bas; min-width: 0; margin-top: 6px; font-size: 13.5px; line-height: 1.4; }
.cp-quand { color: var(--gris); }
.cp-rdv { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.cp-rdv .ico, .cp-note .ico { width: 14px; height: 14px; }
.cp-note { display: flex; align-items: flex-start; gap: 6px; color: var(--gris); }
.cp-note .ico { margin-top: 2px; }
.cp-note-texte { display: -webkit-box; min-width: 0; overflow: hidden; color: var(--encre); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cp-actions { grid-area: actions; display: flex; gap: 6px; margin-top: 10px; }
.cp-actions .bouton { min-height: 32px; padding: 0 9px; font-size: 13px; }
.cp-actions .bouton-plein { flex: 1; min-width: 0; }
.cp-actions .ico { width: 14px; height: 14px; }
.carte-pipe .menu-etape-panneau { grid-area: panneau; margin-top: 10px; background: var(--gris-clair); }
@container carte-pipe (max-width: 168px) {
  .cp-actions .bouton-plein .ico { display: none; }
}
.fantome { position: fixed; z-index: 40; top: 0; left: 0; margin: 0; border-color: var(--choisie); box-shadow: 0 18px 40px rgba(28, 22, 41, .22); pointer-events: none; }
.glisse-en-cours, .glisse-en-cours * { cursor: grabbing; }

.tableau-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 20px; }
.pastilles-etape { display: flex; flex-wrap: wrap; gap: 6px; }
.pastilles-etape .pastille[aria-pressed="true"], .onglets .pastille[aria-pressed="true"] { border-color: var(--encre); background: var(--encre); color: #fff; }
.tableau-cadre { margin-top: 12px; padding: 1px; border-radius: 12px; background: var(--bordure); }
.tableau { width: 100%; margin: -1px 0; border-collapse: separate; border-spacing: 0 1px; font-size: 14px; }
.tableau th, .tableau td { padding: 9px 12px; background: var(--carte); text-align: left; vertical-align: middle; }
.tableau thead th { padding: 0; color: var(--gris); font: 600 12.5px/1.2 var(--texte); white-space: nowrap; }
.tableau thead th:first-child { border-top-left-radius: 11px; }
.tableau thead th:last-child { border-top-right-radius: 11px; }
.tableau tbody tr:last-child td:first-child { border-bottom-left-radius: 11px; }
.tableau tbody tr:last-child td:last-child { border-bottom-right-radius: 11px; }
.tri { display: inline-flex; align-items: center; gap: 4px; width: 100%; min-height: 38px; padding: 0 12px; border: 0; background: none; color: inherit; font: inherit;
  white-space: nowrap; cursor: pointer; }
.tri:hover, th[aria-sort] .tri { color: var(--encre); }
.tri .ico { width: 13px; height: 13px; }
.tableau tbody tr { cursor: pointer; }
.tableau tr.a-rappeler td { background: var(--ligne-bleue); }
.tableau tbody tr:hover td { background: var(--ligne-survol); }
.tableau tr.choisie td { background: var(--bleu-pale); }
.col-nom .nom-lien { font-weight: 600; }
.tableau .sous { display: block; margin-top: 1px; color: var(--gris); font-size: 12.5px; }
.tableau td.col-score, .tableau td.col-lettre { font-family: var(--mono); font-size: 13px; }
.tableau td.col-cree_le { color: var(--gris); white-space: nowrap; }
.tableau td.col-effectif, .tableau td.col-statut, .tableau td.col-prochaine { white-space: nowrap; }
.tableau .col-appel { width: 1%; text-align: right; }
.bouton-icone { width: 36px; min-height: 32px; padding: 0; }
.tableau-vide { margin-top: 16px; }
.liste-outils { display: none; }

@container vue (max-width: 1120px) {
  .tableau .col-effectif, .tableau .col-lettre { display: none; }
}
@container vue (max-width: 900px) {
  .tableau .col-cree_le, .tableau .col-eligible { display: none; }
}

.fiche { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding: 18px;
  border: 1px solid var(--bordure); border-radius: 14px; background: var(--carte); }
.fiche-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fiche-surtitre { color: var(--gris); font: 600 11.5px/1 var(--texte); letter-spacing: .06em; text-transform: uppercase; }
.fiche-fermer { margin-right: -8px; }
.fiche-nom { margin-top: 4px; font: 800 22px/1.2 var(--titre); overflow-wrap: anywhere; }
.fiche-nom:focus { outline: none; }
.fiche-sous { margin-top: 2px; color: var(--gris); overflow-wrap: anywhere; }
.fiche-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fiche-actions { display: flex; gap: 8px; margin-top: 14px; }
.fiche-actions .bouton-plein { flex: 1; }
.fiche-venu { margin-top: 10px; color: var(--gris); font-size: 14px; }
.fiche-champs { display: grid; gap: 1px; margin-top: 14px; background: var(--bordure); }
.fiche-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 0; background: var(--carte); }
.fiche-ligne dt { flex: none; color: var(--gris); }
.fiche-ligne dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.fiche-ligne a { color: var(--encre); text-decoration-color: var(--survol); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fiche-ligne a:hover { text-decoration-color: currentColor; }
.fiche-liens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.fiche-bloc { margin-top: 20px; }
.fiche-bloc h3 { margin-bottom: 6px; font: 700 15px/1.3 var(--titre); }
.fiche-bloc .fiche-champs { margin-top: 0; }
.fiche-note { display: grid; gap: 8px; }
.fiche-note label { font-size: 14px; font-weight: 600; }
.fiche-note textarea { width: 100%; min-height: 76px; padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--gris-clair); color: var(--encre);
  font: 400 15px/1.45 var(--texte); resize: vertical; }
.fiche-note textarea:focus { border-color: var(--bleu); outline: none; background: var(--carte); box-shadow: 0 0 0 3px var(--bleu-pale); }
.fiche-note .bouton { justify-self: start; }
.fiche-notes { display: grid; gap: 8px; margin-top: 12px; }
.fiche-notes li { padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--gris-clair); }
.note-texte { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-qui { margin-top: 4px; color: var(--gris); font-size: 13px; }
.fiche-historique { display: grid; gap: 4px; color: var(--gris); font-size: 14px; line-height: 1.5; }
.fiche-attente { color: var(--gris); font-size: 14px; }

.dialogue { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--bordure); border-radius: 16px; background: var(--carte); color: var(--encre);
  box-shadow: 0 24px 60px rgba(28, 22, 41, .22); }
.dialogue::backdrop { background: rgba(28, 22, 41, .4); }
.dialogue-corps { display: grid; gap: 16px; padding: 22px 20px 20px; }
.dialogue-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dialogue-titre { font: 800 21px/1.2 var(--titre); }
.dialogue-fermer { display: inline-grid; flex: none; place-items: center; width: 44px; height: 44px; margin: -12px -12px 0 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--gris); cursor: pointer; }
.dialogue-fermer:hover { background: var(--gris-clair); color: var(--encre); }
.dialogue-fermer .ico { width: 20px; height: 20px; }
.dialogue-titre:focus { outline: none; }
.dialogue-champ { display: grid; gap: 6px; color: var(--gris); font-size: 14px; font-weight: 600; }
.dialogue-champ input { width: 100%; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--carte); color: var(--encre);
  font: 400 16px/1 var(--texte); }
.dialogue-champ input:focus { border-color: var(--bleu); outline: none; box-shadow: 0 0 0 3px var(--bleu-pale); }
.dialogue-erreur { margin-top: -6px; font-size: 14px; font-weight: 600; }
.dialogue-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.dialogue-boutons .bouton { flex: 1 1 auto; min-height: 44px; }

.annonce { position: fixed; z-index: 30; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px;
  width: max-content; max-width: calc(100% - 32px); padding: 10px 8px 10px 16px; border-radius: 12px; background: var(--encre); color: #fff;
  box-shadow: 0 12px 32px rgba(28, 22, 41, .28); transform: translateX(-50%); }
.annonce-texte { font-size: 15px; font-weight: 600; }
.annonce-fermer { display: inline-grid; flex: none; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
.annonce-fermer:hover { background: rgba(255, 255, 255, .12); }

.connexion { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px; }
.connexion-carte { display: grid; justify-items: start; gap: 16px; width: min(440px, 100%); padding: 28px 24px; border: 1px solid var(--bordure); border-radius: 16px; background: var(--carte); }
.connexion-marque { display: flex; align-items: center; gap: 8px; color: var(--encre); }
.connexion-marque .logotype { height: 17px; width: auto; }
.connexion-titre { font: 800 26px/1.2 var(--titre); }
.connexion-texte { font-size: 16px; line-height: 1.5; }
.connexion-echec { padding: 12px 14px; border: 1px solid var(--bleu-bord); border-radius: 10px; background: var(--bleu-pale); color: var(--bleu-texte); font-weight: 600; }
.connexion .bouton-plein { min-height: 46px; padding: 0 18px; font-size: 15px; }

@media (max-width: 767.98px) {
  .barre { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "marque . moi" "selecteur selecteur selecteur" "recherche recherche recherche";
    gap: 10px; padding: 10px 16px 12px; }
  .selecteur { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; }
  .selecteur button { min-height: 38px; padding: 0 6px; }
  .recherche { flex: 1; gap: 6px; width: auto; height: 44px; padding: 0 10px; }
  .recherche input { font-size: 16px; }
  .bouton { min-height: 44px; }
  .bouton-petit { min-height: 36px; }
  .bouton-filtres { display: inline-flex; }
  .moi-nom { display: none; }
  .filtres { display: none; padding: 12px 16px 0; }
  .filtres.ouverts { display: block; }
  .filtres-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtres-liste .bouton-discret { grid-column: 1 / -1; }
  .filtre { display: flex; }
  .filtre select { width: 100%; height: 44px; font-size: 16px; }
  #bandeau { padding: 0 16px; }
  .ecran { padding: 14px 16px 40px; }
  .ecran.avec-fiche { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .fiche-ouverte .barre, .fiche-ouverte .filtres, .fiche-ouverte #bandeau, .fiche-ouverte .vue { display: none; }
  .fiche { position: static; min-height: 100vh; max-height: none; overflow: visible; padding: 0 16px 40px; border: 0; border-radius: 0; }
  .fiche-tete { position: sticky; top: 0; z-index: 1; margin: 0 -16px 6px; padding: 6px 16px; background: var(--carte); box-shadow: var(--ombre-barre); }
  .fiche-nom { margin-top: 10px; }
  .fiche-note textarea, .fiche-etape select { font-size: 16px; }

  .onglets, .pastilles-etape { display: flex; flex-wrap: nowrap; gap: 6px; margin: 14px -16px 0; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
  .onglets::-webkit-scrollbar, .pastilles-etape::-webkit-scrollbar { display: none; }
  .onglets .pastille, .pastilles-etape .pastille { flex: none; min-height: 36px; padding: 0 12px; font-size: 14px; }
  .pipeline-aide, .colonne-titre, .colonne.repliee .colonne-titre { display: none; }
  .pipeline { display: block; margin-top: 12px; padding: 0; overflow: visible; }
  .rail { display: contents; }
  .colonne, .colonne.repliee { display: none; width: auto; min-width: 0; min-height: 0; padding: 0; border: 0; background: none; }
  .colonne.courante { display: block; }
  .colonne.courante .colonne-cartes { display: grid; gap: 10px; }
  .colonne-vide { padding: 16px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--carte); }
  .carte-pipe { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom score" "sous sous" "bas bas" "actions actions" "menu menu" "panneau panneau";
    padding: 14px; border-radius: 12px; touch-action: auto; -webkit-user-select: auto; user-select: auto; }
  .cp-nom { font-size: 16.5px; }
  .cp-score { font-size: 13px; }
  .cp-sous, .cp-bas { font-size: 14.5px; }
  .cp-actions .bouton, .bouton-menu { min-height: 44px; font-size: 15px; }
  .cp-actions .ico { width: 16px; height: 16px; }
  .bouton-menu { width: auto; height: auto; margin: 10px 0 0; padding: 0 12px; border-color: var(--bordure); background: var(--carte); color: var(--encre); }
  .bouton-menu-texte { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .carte-pipe .menu-etape-panneau { gap: 1px; padding: 0; overflow: hidden; background: var(--bordure); }
  .carte-pipe .menu-etape-choix { min-height: 44px; border-radius: 0; background: var(--carte); font-size: 15px; }
  .carte-pipe .menu-etape-choix:not(.actuelle):active { background: var(--bleu-pale); }

  .tableau-outils { display: block; margin-top: 0; }
  .liste-outils { display: flex; gap: 8px; margin-top: 12px; }
  .filtre-tri { flex: 1; min-width: 0; }
  .liste-compacte { display: grid; gap: 1px; margin-top: 12px; overflow: hidden; border: 1px solid var(--bordure); border-radius: 12px; background: var(--bordure); }
  .lc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--carte); cursor: pointer; }
  .lc.choisie { background: var(--bleu-pale); }
  .lc-texte { flex: 1; min-width: 0; }
  .lc-nom { font: 700 16px/1.3 var(--titre); }
  .lc-sous { margin-top: 1px; color: var(--gris); font-size: 14px; overflow-wrap: anywhere; }
  .lc-action { margin-top: 2px; font-size: 14px; }
  .lc-note { overflow: hidden; color: var(--gris); white-space: nowrap; text-overflow: ellipsis; }
  .lc > .pastille { flex: none; }
  .lc .bouton-icone { flex: none; width: 44px; min-height: 44px; }
  .lc .bouton-icone .ico { width: 18px; height: 18px; }
}