/*
 * Système visuel « modernist », d'après le design canvas CRM Rooftop.
 *
 * Trois règles portent tout : une seule famille (Archivo), aucune ombre en
 * dehors des surfaces flottantes, et des filets d'un pixel plutôt que des
 * cartes. Les sept couleurs de statut ne sont pas ici : elles viennent des
 * données (src/types.ts), parce qu'elles appartiennent au métier.
 *
 * Les valeurs de --color-accent et de l'échelle de gris ont été reconstituées :
 * le bundle du design system n'était pas fourni avec le canvas. L'accent est
 * ancré sur le #8C2513 présent en dur dans le design.
 */

:root {
  --font-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --color-text: #201e1d;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-sidebar: #fbfbfa;
  --color-rule: rgba(32, 30, 29, 0.11);
  --color-divider: rgba(32, 30, 29, 0.07);

  --color-neutral-100: #f4f3f2;
  --color-neutral-200: #e8e6e4;
  --color-neutral-300: #d6d3d0;
  --color-neutral-400: #b5b1ad;
  --color-neutral-500: #8c8783;
  --color-neutral-600: #6b6763;
  --color-neutral-700: #4a4644;

  --color-accent-100: #faebe7;
  --color-accent-200: #f4d7cf;
  --color-accent: #b03a22;
  --color-accent-700: #8c2513;

  --color-ok: #6aa877;

  /* Les quelques teintes qui ne dérivent pas des gris : elles ont leur
     équivalent sombre plus bas. */
  --color-primaire-survol: #000000;
  --color-jour-courant: #fdf6f3;
  --color-avis-ok-bg: #f2f8f3;
  --color-avis-ok-fg: #22512b;
  --color-avis-alerte-bg: #fdf7e7;
  --color-avis-alerte-fg: #5c4708;
  --ombre-flottante: 0 12px 40px rgba(15, 15, 14, .18);

  --rail: 32px;
  --teinte-survol: color-mix(in srgb, var(--color-text) 5%, transparent);
  --teinte-entete: color-mix(in srgb, var(--color-text) 3%, transparent);
}

/* ------------------------------------------------------------ thème sombre
 * Même squelette, gris inversés, accent éclairci pour rester lisible sur
 * fond foncé. Les pastilles de statut gardent leurs couleurs pastel, texte
 * foncé : elles restent lisibles telles quelles sur un fond sombre.
 */
:root[data-theme="sombre"] {
  color-scheme: dark;

  --color-text: #ecebe9;
  --color-bg: #151413;
  --color-surface: #1b1a19;
  --color-sidebar: #161514;
  --color-rule: rgba(236, 235, 233, 0.14);
  --color-divider: rgba(236, 235, 233, 0.08);

  --color-neutral-100: #242220;
  --color-neutral-200: #2e2c29;
  --color-neutral-300: #3b3835;
  --color-neutral-400: #5b5754;
  --color-neutral-500: #8c8783;
  --color-neutral-600: #a9a49f;
  --color-neutral-700: #cdc8c3;

  --color-accent-100: #3a2019;
  --color-accent-200: #4e2b21;
  --color-accent: #d9573c;
  --color-accent-700: #ef8f78;

  --color-ok: #7fbf8c;

  --color-primaire-survol: #ffffff;
  --color-jour-courant: #2a1f1b;
  --color-avis-ok-bg: #1d2b20;
  --color-avis-ok-fg: #a9dcb4;
  --color-avis-alerte-bg: #2e2712;
  --color-avis-alerte-fg: #e8d18a;
  --ombre-flottante: 0 12px 40px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

/* Sans cette ligne, un élément masqué par le script resterait visible : nos
   propres règles d'affichage passent devant celle du navigateur. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--color-surface);
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
  -webkit-text-size-adjust: 100%;
}

h1 { font-family: var(--font-heading); font-size: 32px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
h2 { font-family: var(--font-heading); font-size: 20px; font-weight: 600; margin: 0; }
h3 { font-family: var(--font-heading); font-size: 16px; font-weight: 600; margin: 0; }
a { color: var(--color-accent-700); }
p { margin: 0 0 10px; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  background: var(--color-neutral-100);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------- ossature */

.app { display: flex; min-height: 100vh; }

.rail-lateral {
  width: 250px; flex: 0 0 250px;
  border-right: 1px solid var(--color-rule);
  background: var(--color-sidebar);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.marque {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--color-rule);
  text-decoration: none; color: inherit;
}
.marque-sigle {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 5px;
  background: var(--color-text); color: var(--color-bg);
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.marque-nom {
  display: block; font-weight: 600; font-size: 14px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marque-sous { display: block; font-size: 12px; color: var(--color-neutral-600); }

.rail-titre {
  padding: 14px 16px 6px;
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.rail-titre.separe { border-top: 1px solid var(--color-rule); padding-top: 12px; }

.rail-nav { display: flex; flex-direction: column; padding: 0 8px 10px; }
.rail-lien {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border-radius: 4px; border: 0;
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--color-text); text-decoration: none;
}
.rail-lien:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.rail-lien.actif { background: color-mix(in srgb, var(--color-text) 7%, transparent); font-weight: 600; }
.rail-lien svg { flex: 0 0 16px; color: var(--color-neutral-700); }
.rail-compte { margin-left: auto; font-size: 12px; color: var(--color-neutral-600); }
.rail-pastille {
  margin-left: auto; font-size: 11px; font-weight: 700;
  color: var(--color-bg); background: var(--color-accent);
  padding: 1px 6px; border-radius: 8px;
}

.rail-pied { margin-top: auto; padding: 10px 8px; border-top: 1px solid var(--color-rule); }
.rail-user { font-size: 12.5px; color: var(--color-neutral-600); padding: 0 8px 6px; }

.zone { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.fil {
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--rail); border-bottom: 1px solid var(--color-rule);
  font-size: 12.5px; color: var(--color-neutral-600);
}
.fil-actuel { color: var(--color-text); }

.entete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding: 24px var(--rail) 18px; border-bottom: 1px solid var(--color-rule);
}
.entete.sans-filet { border-bottom: 0; padding-bottom: 14px; }
.entete-sous { font-size: 13.5px; color: var(--color-neutral-600); margin: 6px 0 0; }
.entete-actions { display: flex; gap: 8px; flex-shrink: 0; }

.section { padding: 24px var(--rail); }
.section + .section { border-top: 1px solid var(--color-rule); }
.section-titre {
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 14px;
}
.duo { display: grid; grid-template-columns: 1.25fr 1fr; }
.duo > * + * { border-left: 1px solid var(--color-rule); }
.duo .section + .section { border-top: 0; }

/* ------------------------------------------------------------------- bande */

.bande {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-bottom: 1px solid var(--color-rule);
}
.bande-cellule { padding: 22px 24px; border-right: 1px solid var(--color-rule); }
.bande-cellule:last-child { border-right: 0; }
.bande-label {
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.bande-valeur {
  font-family: var(--font-heading); font-weight: 800; font-size: 36px;
  line-height: 1.1; margin-top: 8px; letter-spacing: -0.02em; white-space: nowrap;
}
.bande-note { font-size: 13px; color: var(--color-neutral-700); margin-top: 4px; }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--color-rule); }
.trio > div { padding: 22px var(--rail); border-right: 1px solid var(--color-rule); }
.trio > div:last-child { border-right: 0; }
.trio-jour {
  font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--color-accent);
}
.trio-titre { font-weight: 600; font-size: 14px; margin-top: 6px; }
.trio-note { font-size: 13.5px; color: var(--color-neutral-700); margin-top: 6px; }

/* --------------------------------------------------------------- controles */

.btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  padding: 8px 14px; border-radius: 5px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--color-rule); background: var(--color-surface); color: var(--color-text);
}
.btn:hover { background: var(--color-neutral-100); }
/* Le secondaire est l'aspect de base ; la classe existe pour le dire au balisage. */
.btn-secondary { background: var(--color-surface); border-color: var(--color-rule); }
.btn-primary { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-primaire-survol); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--teinte-survol); }
.btn-danger {
  border-color: var(--color-accent); background: transparent; color: var(--color-accent-700);
}
.btn-danger:hover { background: var(--color-accent-100); }
.btn-large { width: 100%; justify-content: center; padding: 11px; }

.input, select, textarea {
  width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--color-text);
  padding: 8px 11px; background: var(--color-surface);
  border: 1px solid var(--color-rule); border-radius: 5px;
}
textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
button:focus-visible, .btn:focus-visible, .input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}

.label { display: block; font-size: 12.5px; color: var(--color-neutral-600); margin-bottom: 5px; }
.champ-bloc { margin-bottom: 14px; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 20px; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline { display: inline; }

.case { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.case input { width: auto; }
.cases { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }

/* ------------------------------------------------------------- barre outils */

.outils {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px var(--rail); border-bottom: 1px solid var(--color-rule);
}
.outils .input { width: 220px; }
/* Les listes de tri se calent sur leur contenu, la recherche garde sa largeur. */
.outils .input.auto { width: auto; }
.outils-fin { margin-left: auto; font-size: 12.5px; color: var(--color-neutral-600); }

.onglets {
  display: flex; gap: 20px; padding: 0 var(--rail);
  border-bottom: 1px solid var(--color-rule); align-items: flex-end;
}
.onglet {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -2px; padding: 11px 2px; cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--color-neutral-700);
}
.onglet.actif { border-bottom-color: var(--color-text); font-weight: 600; color: var(--color-text); }
.onglets-fin { display: flex; gap: 8px; margin-left: auto; padding-bottom: 8px; }

.filtres-statut { display: flex; gap: 6px; flex-wrap: wrap; }
.filtre-statut {
  cursor: pointer; white-space: nowrap; border-radius: 4px; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  padding: 5px 9px; border: 1px solid var(--color-rule);
  background: transparent; color: var(--color-neutral-700);
}
.filtre-statut.actif { border-color: var(--color-neutral-500); }

/* --------------------------------------------------------------- tableaux */

.table-enveloppe { overflow-x: auto; }
.table-min { min-width: 1080px; }

.tr {
  display: grid; grid-template-columns: 1.6fr 112px 1.4fr 122px 104px 190px 158px 80px;
  padding: 0 var(--rail); border-bottom: 1px solid var(--color-rule);
  align-items: center; font-size: 14px; text-decoration: none; color: inherit;
}
/* Le lien de fond couvre la ligne ; ce qui se règle sur place passe devant. */
.tr-corps { position: relative; }
.tr-lien { position: absolute; inset: 0; z-index: 1; }
.tr-corps .menu-statut, .tr-corps .relance-inline { position: relative; z-index: 2; }
.tr-entete {
  font-size: 12.5px; color: var(--color-neutral-600); background: var(--teinte-entete);
}
.tr-entete > div { padding: 11px 12px; display: flex; align-items: center; gap: 7px; }
.tr-entete > div:first-child { padding-left: 0; }
.tr-entete svg { flex: 0 0 14px; color: var(--color-neutral-600); }
.tr-corps { cursor: pointer; }
.tr-corps:hover { background: var(--teinte-survol); }
.tr-corps > div { padding: 15px 12px; }
.tr-corps > div:first-child { padding-left: 0; }
.td-fin { display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-size: 12.5px; color: var(--color-neutral-600); padding-right: 0 !important; }
.td-principal { font-weight: 600; }
.td-secondaire { font-size: 12.5px; color: var(--color-neutral-600); }

.ligne-ajout {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 14px var(--rail); border: 0; border-bottom: 1px solid var(--color-rule);
  background: transparent; cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-size: 14px; color: var(--color-neutral-600); text-align: left;
}
.ligne-ajout:hover { background: var(--teinte-survol); color: var(--color-text); }

.totaux { display: flex; gap: 24px; padding: 14px var(--rail) 40px; font-size: 12.5px; color: var(--color-neutral-600); }
.totaux strong { color: var(--color-text); font-weight: 600; }

.liste { }
.liste-ligne {
  display: grid; grid-template-columns: 108px 1fr auto; gap: 14px; align-items: center;
  padding: 13px 0; border-top: 1px solid var(--color-rule);
  text-decoration: none; color: inherit;
}
.liste-ligne:hover { background: var(--teinte-survol); }
/* Sans cette ligne, une adresse mail longue refuse de se comprimer et pousse
   la colonne de droite hors de l'écran. */
.liste-ligne > * { min-width: 0; }
.liste-nom { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.liste-detail { font-size: 12.5px; color: var(--color-neutral-700); }
.liste-quand { font-size: 13px; font-weight: 600; text-align: right; }

.tag {
  font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700; padding: 4px 8px; border-radius: 3px;
  text-align: center; white-space: nowrap;
}
.chip {
  display: inline-block; border-radius: 4px; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 600; font-size: 12px; padding: 4px 9px;
}
.puce-statut { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 3px; display: inline-block; }

/* ------------------------------------------------------------------ barres */

.barre-ligne { padding: 7px 0; text-decoration: none; color: inherit; display: block; }
.barre-tete { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.barre-compte { margin-left: auto; font-family: var(--font-heading); font-weight: 700; }
.barre-fond { height: 8px; background: color-mix(in srgb, var(--color-text) 8%, transparent); margin-top: 5px; }
.barre-jauge { height: 100%; }

.stat-ligne {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  font-size: 13.5px; border-bottom: 1px solid var(--color-rule);
}
.stat-ligne strong { margin-left: auto; font-weight: 600; }

/* --------------------------------------------------------------- kanban */

.kanban { display: flex; overflow-x: auto; align-items: stretch; }
.kanban-col { flex: 1 0 210px; border-right: 1px solid var(--color-rule); min-height: 60vh; }
.kanban-tete {
  padding: 12px 14px; border-bottom: 1px solid var(--color-rule);
  display: flex; align-items: center; gap: 8px;
}
.kanban-label { font-family: var(--font-heading); font-weight: 600; font-size: 13px; }
.kanban-compte { margin-left: auto; font-size: 12px; color: var(--color-neutral-600); }
.kanban-corps { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.kanban-carte {
  border: 1px solid var(--color-rule); border-radius: 6px; background: var(--color-sidebar);
  padding: 12px; text-decoration: none; color: inherit; display: block;
}
.kanban-carte:hover { border-color: var(--color-accent); }
.kanban-carte { position: relative; }
.kanban-carte .menu-statut { position: relative; z-index: 2; }
.kanban-statut { margin-top: 8px; }
.liste-commentaire { margin-top: 3px; font-style: italic; white-space: pre-wrap; }
.kanban-nom { font-weight: 600; font-size: 14px; }
.kanban-meta { font-size: 12.5px; color: var(--color-neutral-700); margin-top: 2px; }
.kanban-pied { font-size: 12.5px; margin-top: 6px; display: flex; justify-content: space-between; }

/* ------------------------------------------------------------- calendrier */

.legende { display: flex; gap: 16px; margin-left: auto; font-size: 12.5px; align-items: center; padding-bottom: 10px; }
.legende span { display: flex; align-items: center; gap: 6px; }
.legende i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.calendrier {
  /* minmax(0, 1fr) et non 1fr : sinon une pastille longue élargit sa colonne
     et le mois déborde de l'écran. */
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-left: 1px solid var(--color-rule); border-top: 1px solid var(--color-rule);
}
.cal-dow {
  padding: 12px 14px; border-right: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule);
  font-size: 15px; font-weight: 600; color: var(--color-neutral-700); background: var(--teinte-entete);
  text-transform: capitalize;
}
.cal-jour {
  position: relative; min-width: 0; min-height: 158px; padding: 12px 14px;
  border-right: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule);
}
.cal-jour.est-aujourdhui { background: var(--color-jour-courant); }
.cal-jour-lien { position: absolute; inset: 0; z-index: 0; }
.cal-jour-lien:hover { background: var(--teinte-survol); }
.cal-num, .cal-items { position: relative; z-index: 1; }
.cal-jour.hors { background: var(--color-neutral-100); }
.cal-num {
  font-family: var(--font-heading); font-weight: 700; font-size: 20px;
  line-height: 1.1; color: var(--color-text); text-decoration: none;
}
.cal-num:hover { text-decoration: underline; }
.cal-num.aujourdhui {
  color: var(--color-bg); background: var(--color-accent);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; border-radius: 999px; padding: 0 7px;
}
.cal-items { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.cal-item {
  font-size: 13px; line-height: 1.35; padding: 5px 8px; border-radius: 4px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}

/* -------------------------------------------------------------- boite mail */

.mail-vue { display: grid; grid-template-columns: 360px 1fr; min-height: calc(100vh - 96px); }
.mail-liste { border-right: 1px solid var(--color-rule); }
.mail-ligne {
  display: block; padding: 14px 18px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--color-rule); border-left: 4px solid transparent;
}
.mail-ligne:hover { background: var(--teinte-survol); }
.mail-ligne.actif { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-left-color: var(--color-accent); }
.mail-tete { display: flex; align-items: center; gap: 8px; }
.mail-point {
  width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%;
  background: var(--color-accent); border: 1px solid var(--color-accent);
}
.mail-point.lu { background: transparent; border-color: var(--color-neutral-400); }
.mail-de { font-weight: 600; font-size: 14px; }
.mail-quand { margin-left: auto; font-size: 12px; color: var(--color-neutral-600); }
.mail-objet { font-size: 13.5px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-meta { font-size: 12px; color: var(--color-neutral-600); margin-top: 4px; }
.mail-corps {
  padding: 24px var(--rail); font-size: 14px; line-height: 1.7;
  white-space: pre-wrap; max-width: 760px; word-break: break-word; margin: 0;
  font-family: var(--font-body);
}

/* ----------------------------------------------------------------- divers */

.encadre {
  border: 1px solid var(--color-rule); background: var(--color-neutral-100);
  padding: 18px; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap;
  font-family: var(--font-body); margin: 0;
}
.variable { background: var(--color-accent-200); padding: 0 4px; font-weight: 600; }

.avis { padding: 12px var(--rail); font-size: 13.5px; border-bottom: 1px solid var(--color-rule); }
.avis-ok { background: var(--color-avis-ok-bg); color: var(--color-avis-ok-fg); }
.avis-alerte { background: var(--color-avis-alerte-bg); color: var(--color-avis-alerte-fg); }
.avis-erreur { background: var(--color-accent-100); color: var(--color-accent-700); }

.paire { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 10px; padding: 7px 0; }
.paire-label { font-size: 13.5px; color: var(--color-neutral-600); }
.paire + .paire { border-top: 1px solid var(--color-divider); }

.vide { color: var(--color-neutral-600); padding: 22px 0; font-size: 14px; }
.discret { color: var(--color-neutral-600); font-size: 12.5px; }
.compteur { font-size: 12.5px; color: var(--color-neutral-600); margin-top: 6px; }
.compteur-alerte { color: var(--color-accent-700); }
.etat-ok { color: var(--color-avis-ok-fg); font-size: 13.5px; }
.etat-ko { color: var(--color-accent-700); font-size: 13.5px; }

.histo { padding: 12px 0; border-top: 1px solid var(--color-rule); }
.histo-tete { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.histo-canal { font-family: var(--font-heading); font-weight: 600; }
.histo-texte { margin: 4px 0 0; font-size: 14px; white-space: pre-wrap; }

.ecran-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.carte-auth {
  width: 100%; max-width: 380px; border: 1px solid var(--color-rule);
  border-radius: 8px; padding: 28px;
}
.carte-auth h1 { font-size: 26px; }
.carte-auth .entete-sous { margin-bottom: 20px; }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 900px) {
  :root { --rail: 16px; }
  .app { flex-direction: column; }
  .rail-lateral {
    width: 100%; flex: none; height: auto; position: static;
    border-right: 0; border-bottom: 1px solid var(--color-rule);
  }
  .rail-titre, .rail-user { display: none; }
  .rail-nav { flex-direction: row; overflow-x: auto; padding: 6px 8px; gap: 4px; }
  .rail-lien { width: auto; white-space: nowrap; }
  .rail-pied { margin-top: 0; }
  .duo, .trio, .mail-vue { grid-template-columns: 1fr; }
  .duo > * + *, .trio > div { border-left: 0; border-right: 0; }
  .duo > * + * { border-top: 1px solid var(--color-rule); }
  .mail-liste { border-right: 0; border-bottom: 1px solid var(--color-rule); }
  /* Empilées, les deux moitiés n'ont plus à remplir la hauteur de l'écran :
     sinon un vide d'un écran entier sépare la liste du message. */
  .mail-vue { min-height: 0; }
  .entete { flex-direction: column; align-items: stretch; }
  .grille { grid-template-columns: 1fr; }
  .paire { grid-template-columns: 1fr; gap: 4px; }
  .cal-jour { min-height: 76px; padding: 5px; }
  .cal-item { font-size: 10.5px; }
  .outils .input { width: 100%; }
}

/* -------------------------------------------------------- tableau simple */

.tableau-compte { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau-compte th {
  text-align: left; padding: 10px 12px 10px 0;
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-neutral-600); border-bottom: 1px solid var(--color-rule); white-space: nowrap;
}
.tableau-compte td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--color-rule); }
.tableau-compte tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------ appels du jour */

.appel-ligne {
  display: grid; grid-template-columns: minmax(280px, 1fr) 140px max-content;
  gap: 16px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--color-rule);
}
.appel-identite { min-width: 0; }
.appel-statut { flex-shrink: 0; }
.appel-actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.appel-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.appel-champ { display: flex; flex-direction: column; }
.appel-form .label { margin-bottom: 3px; white-space: nowrap; }
.appel-form .input { width: 150px; }

@media (max-width: 900px) {
  .appel-ligne { grid-template-columns: 1fr; gap: 10px; }
  .appel-actions, .appel-form, .appel-champ { width: 100%; }
  .appel-form .input { width: 100%; }
  .appel-actions .btn { flex: 1; justify-content: center; }
}

.etiquette-demo {
  display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 3px;
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--color-neutral-200); color: var(--color-neutral-700);
}

/* ------------------------------------------------------------ statistiques */

.indice-glisser { display: none; }
.tableau-stats { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 820px; }
.tableau-stats th, .tableau-stats td { padding: 9px 12px; border-bottom: 1px solid var(--color-rule); }
.tableau-stats thead th {
  text-align: left; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-neutral-600); background: var(--teinte-entete); white-space: nowrap;
}
.tableau-stats .num { text-align: right; font-variant-numeric: tabular-nums; }
.tableau-stats .mois { text-align: left; font-weight: 600; white-space: nowrap; }
.tableau-stats .repartition { width: 22%; }
.tableau-stats .repartition .barre-fond { margin-top: 0; }
.tableau-stats tbody tr:hover { background: var(--teinte-survol); }
.tableau-stats .ligne-vide { color: var(--color-neutral-600); }
.tableau-stats tfoot th, .tableau-stats tfoot td {
  border-top: 2px solid var(--color-rule); border-bottom: 0; background: var(--teinte-entete);
}

/* ------------------------------------------------------------ champ de date */

.datefield { position: relative; display: block; }
.datefield-saisie { padding-right: 38px; font-variant-numeric: tabular-nums; }
.datefield-bouton {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--color-neutral-600); cursor: pointer;
}
.datefield-bouton:hover { background: var(--color-neutral-200); color: var(--color-text); }
.datefield-saisie.invalide { border-color: var(--color-accent); }

.cal-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: 322px; padding: 14px;
  background: var(--color-surface); border: 1px solid var(--color-bordure, var(--color-rule));
  border-radius: 8px; box-shadow: var(--ombre-flottante);
}
.cal-pop[hidden] { display: none; }
.cal-pop-tete {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.cal-pop-tete select {
  width: auto; flex: 1; padding: 6px 8px; font-family: var(--font-heading); font-weight: 600;
}
.cal-nav {
  width: 30px; height: 30px; flex: 0 0 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-rule); border-radius: 5px;
  background: var(--color-surface); cursor: pointer; font-size: 15px; line-height: 1;
}
.cal-nav:hover { background: var(--color-neutral-100); }
.cal-pop-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-pop-dow {
  text-align: center; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-neutral-600); padding-bottom: 4px;
}
.cal-pop-jour {
  height: 38px; border: 0; border-radius: 5px; background: transparent;
  font-family: var(--font-body); font-size: 14px; color: var(--color-text); cursor: pointer;
}
.cal-pop-jour:hover { background: var(--color-neutral-200); }
.cal-pop-jour.aujourdhui { box-shadow: inset 0 0 0 1px var(--color-neutral-400); font-weight: 700; }
.cal-pop-jour.choisi { background: var(--color-text); color: var(--color-bg); font-weight: 700; }
.cal-pop-pied {
  display: flex; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--color-rule);
}
.cal-pop-pied button {
  flex: 1; padding: 7px; border: 1px solid var(--color-rule); border-radius: 5px;
  background: var(--color-surface); font-family: var(--font-body); font-size: 13px; cursor: pointer;
}
.cal-pop-pied button:hover { background: var(--color-neutral-100); }

@media (max-width: 900px) {
  .cal-pop { width: min(322px, calc(100vw - 40px)); }
}

/* ------------------------------------------------- agenda, niveaux de zoom */

/* Repérage collant : la barre du haut, puis l'en-tête de chaque mois, restent
   visibles pendant qu'on déroule. On sait toujours où on se trouve. */
.barre-reperage {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 11px var(--rail);
  background: var(--color-surface); border-bottom: 1px solid var(--color-rule);
}
.periode-courante {
  font-family: var(--font-heading); font-weight: 800; font-size: 21px;
  letter-spacing: -0.01em; text-transform: capitalize;
}
.reperage-vues { display: flex; gap: 2px; margin-left: auto; }
.vue-onglet {
  padding: 6px 13px; border-radius: 6px; text-decoration: none;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--color-neutral-700);
}
.vue-onglet:hover { background: var(--color-neutral-100); color: var(--color-text); }
.vue-onglet.actif { background: var(--color-text); color: var(--color-bg); font-weight: 600; }

.filtres-agenda-barre {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 var(--rail) 16px;
}
.filtres-agenda-barre .legende { margin-left: auto; padding-bottom: 0; }

.flux-bloc { scroll-margin-top: 80px; }
.flux-entete {
  display: flex; align-items: baseline; gap: 12px;
  padding: 26px var(--rail) 12px;
}
.flux-titre {
  font-family: var(--font-heading); font-weight: 800; font-size: 30px;
  letter-spacing: -0.02em; text-transform: capitalize; margin: 0;
}
.flux-compte { font-size: 14.5px; color: var(--color-neutral-600); }
.flux-bloc .calendrier, .flux-bloc .semaine { margin: 0 var(--rail) 34px; }


/* Jour */
.jour-entree-fin { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.jour-entree {
  display: grid; grid-template-columns: 4px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--color-rule);
  text-decoration: none; color: inherit;
}

.jour-entree-barre { align-self: stretch; border-radius: 2px; min-height: 40px; }

/* Semaine */
.semaine {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-left: 1px solid var(--color-rule); border-top: 1px solid var(--color-rule);
}
.semaine-col {
  border-right: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule);
  min-width: 0; min-height: 200px; display: flex; flex-direction: column;
}
.semaine-col.aujourdhui .semaine-tete { background: var(--color-accent); color: var(--color-bg); }
.semaine-tete {
  display: flex; align-items: baseline; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid var(--color-rule); background: var(--teinte-entete);
  text-decoration: none; color: inherit;
}
.semaine-tete:hover { background: var(--color-neutral-200); }
.semaine-dow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.semaine-num { font-family: var(--font-heading); font-weight: 800; font-size: 22px; margin-left: auto; }
.semaine-corps { display: flex; flex-direction: column; gap: 4px; padding: 8px; }

.cal-plus {
  font-size: 12px; color: var(--color-neutral-600); text-decoration: none; padding: 1px 3px;
}
.cal-plus:hover { color: var(--color-text); text-decoration: underline; }

/* Année */
.annee {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 28px;
}
.mini-mois { min-width: 0; }
.mini-titre {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 17px;
  text-transform: capitalize; text-decoration: none; color: inherit;
}
.mini-titre:hover { text-decoration: underline; }
.mini-compte {
  margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px;
  background: var(--color-neutral-200); color: var(--color-neutral-700);
}
.mini-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mini-dow {
  text-align: center; font-size: 11.5px; color: var(--color-neutral-600);
  text-transform: uppercase; padding-bottom: 2px;
}
.mini-jour {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 5px; font-size: 14px;
  color: var(--color-neutral-700); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.mini-jour:hover { background: var(--color-neutral-200); color: var(--color-text); }
.mini-jour.rempli { font-weight: 700; }
.mini-jour.today { box-shadow: inset 0 0 0 1px var(--color-accent); font-weight: 700; }

@media (max-width: 900px) {
  .semaine { grid-template-columns: 1fr; }
  .semaine-col { min-height: 0; }
  .legende-barre { justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
  .annee { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
}


/* ------------------------------------------------ audit mobile, complements
 * Les écrans ajoutés au fil des retours d'Oliver n'avaient pas encore leurs
 * règles étroites. Sur un téléphone, la barre de repérage passait sur deux
 * lignes en écrasant le nom du mois, et les cases de l'agenda gardaient une
 * hauteur de bureau.
 */
@media (max-width: 900px) {
  .barre-reperage {
    flex-direction: column; align-items: stretch; gap: 10px; padding: 10px var(--rail);
  }
  .periode-courante { font-size: 18px; }
  .reperage-vues { margin-left: 0; overflow-x: auto; }
  .vue-onglet { flex: 1; text-align: center; white-space: nowrap; padding: 7px 10px; }

  .flux-entete { padding: 20px var(--rail) 10px; flex-wrap: wrap; gap: 8px; }
  .flux-titre { font-size: 23px; }
  .flux-bloc .calendrier, .flux-bloc .semaine { margin: 0 var(--rail) 26px; }

  .filtres-agenda-barre { padding: 0 var(--rail) 12px; }
  .filtres-agenda-barre .legende { margin-left: 0; width: 100%; }

  .cal-jour { min-height: 92px; padding: 6px 5px; }
  .cal-num { font-size: 15px; }
  .cal-num.aujourdhui { min-width: 26px; height: 26px; }
  .cal-dow { font-size: 12px; padding: 8px 5px; }
  .cal-item { font-size: 11px; padding: 3px 5px; }
  .cal-items { margin-top: 4px; gap: 3px; }

  .jour-entree { grid-template-columns: 4px 1fr; }
  .jour-entree .liste-quand { grid-column: 2; text-align: left; }

  .annee { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .mini-titre { font-size: 15px; }
  .mini-jour { font-size: 12px; }

  .tableau-compte { display: block; overflow-x: auto; white-space: nowrap; }
  /* Un tableau qui glisse ne le dit pas de lui-même sur un écran tactile. */
  .indice-glisser { display: block; margin-top: 10px; }
  .datefield-saisie { font-size: 16px; }
}

/* Sur un vrai téléphone, une police de moins de 16px dans un champ déclenche
   le zoom automatique d'iOS à chaque frappe. */
@media (max-width: 560px) {
  .input, select, textarea { font-size: 16px; }
  /* « Tous les évènements » ne tient pas dans une demi-largeur de téléphone,
     et un menu tronqué ne dit plus sur quoi on filtre. */
  .outils { grid-template-columns: 1fr; }
  .marque-nom { display: none; }
  .cal-jour { min-height: 78px; }
  .cal-item { font-size: 10.5px; }
  .reperage-vues { gap: 0; }
  .vue-onglet { padding: 7px 6px; font-size: 13px; }
}


/* ---------------------------------------------- suggestions et champ filtré
 *
 * Deux ajouts pour le formulaire de l'agenda : des vignettes qui remplissent
 * l'intitulé d'un doigt, et un champ de recherche qui remplace la liste des
 * prospects dès qu'il y en a plus d'une poignée.
 */

.pleine-largeur { grid-column: 1 / -1; }

.suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.suggestion {
  font-family: var(--font-body); font-size: 13px; line-height: 1;
  padding: 7px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-rule); background: var(--color-surface);
  color: var(--color-neutral-700); white-space: nowrap;
}
.suggestion:hover { background: var(--color-neutral-100); color: var(--color-text); }
.suggestion.choisie {
  background: var(--color-text); border-color: var(--color-text);
  color: var(--color-bg); font-weight: 600;
}

.combo { position: relative; display: block; }
.combo .input { padding-right: 34px; }
.combo-fleche {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%) rotate(90deg);
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--color-neutral-600); cursor: pointer;
  font-size: 18px; line-height: 1;
}
.combo-fleche:hover { background: var(--color-neutral-200); color: var(--color-text); }

.combo-liste {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 4px; list-style: none;
  max-height: 292px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-surface); border: 1px solid var(--color-rule);
  border-radius: 8px; box-shadow: var(--ombre-flottante);
}
.combo-liste[hidden] { display: none; }
.combo-item {
  padding: 9px 10px; border-radius: 5px; font-size: 14px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combo-item:hover { background: var(--color-neutral-100); }
.combo-item.actif { background: var(--color-text); color: var(--color-bg); }
.combo-vide { padding: 9px 10px; font-size: 13px; color: var(--color-neutral-600); }


/* ====================================================================
 * Téléphone
 *
 * Oliver travaille debout dans la salle, pas devant un écran large. Trois
 * partis pris : une seule barre de navigation qui défile latéralement, le
 * tableau des prospects qui se replie en fiches empilées plutôt que de
 * réclamer un défilement horizontal, et un calendrier qui montre des points
 * de couleur là où le texte devient illisible.
 * ==================================================================== */

@media (max-width: 900px) {

  /* --- navigation : une seule ligne, pas quatre --- */
  .rail-lateral {
    flex-direction: row; align-items: center; flex-wrap: nowrap;
    gap: 2px; padding: 5px 10px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .rail-lateral::-webkit-scrollbar { display: none; }
  .marque { flex: 0 0 auto; border-bottom: 0; padding: 4px 10px 4px 0; gap: 8px; }
  .marque-sous { display: none; }
  /* Une seule zone défile, celle du rail : sans ce retour à visible, chaque
     groupe de liens garderait sa propre barre de défilement. */
  .rail-nav { flex: 0 0 auto; flex-direction: row; padding: 0; gap: 2px; overflow: visible; }
  .rail-pied {
    flex: 0 0 auto; display: flex; align-items: center; gap: 2px;
    margin-top: 0; padding: 0; border-top: 0;
  }
  .rail-lien { width: auto; white-space: nowrap; padding: 8px 10px; }
  .rail-compte, .rail-pastille { margin-left: 4px; }

  /* --- titres et en-têtes --- */
  h1 { font-size: 26px; }
  .entete { padding: 18px var(--rail) 14px; }
  .entete-actions { flex-wrap: wrap; }
  .entete-actions .btn { flex: 1 1 auto; justify-content: center; }
  .section { padding: 20px var(--rail); }

  .bande-cellule { border-right: 0; border-bottom: 1px solid var(--color-rule); padding: 18px var(--rail); }
  .bande-cellule:last-child { border-bottom: 0; }
  .bande-valeur { font-size: 30px; }
  .trio > div + div { border-top: 1px solid var(--color-rule); }

  /* --- barre d'outils : deux colonnes plutôt qu'une pile --- */
  .outils {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 10px var(--rail);
  }
  .outils .input, .outils .input.auto { width: 100%; }
  .outils [data-filtre-recherche],
  .outils select[name="source"],
  .outils .btn,
  .outils .filtres-statut,
  .outils-fin { grid-column: 1 / -1; }
  .outils .btn { justify-content: center; }
  .outils-fin { margin-left: 0; }

  .filtre-statut { font-size: 13px; padding: 8px 11px; }

  /* La colonne d'étiquette et l'écart se resserrent : c'est le nom qui compte. */
  .liste-ligne { grid-template-columns: 78px 1fr auto; gap: 10px; }
  .tag { font-size: 10px; padding: 4px 5px; letter-spacing: 0.04em; }
  .liste-quand { font-size: 12.5px; }
  .liste-detail { overflow-wrap: anywhere; }

  /* --- listes et kanban --- */
  .kanban-col { min-height: 0; }
  .kanban { scroll-snap-type: x proximity; }
  .kanban-col { scroll-snap-align: start; }

  /* --- formulaires --- */
  .grille { gap: 0; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
  .combo-liste { max-height: 46vh; }
  .suggestion { font-size: 13.5px; padding: 9px 12px; }

  /* --- agenda : la ligne du jour avait sa dernière colonne écrasée --- */
  .jour-entree-fin {
    grid-column: 2; flex-direction: row; align-items: center; gap: 14px;
    margin-top: 2px;
  }
  .jour-entree .liste-quand { text-align: left; }
}

/* ------------------------------------ le tableau des prospects en fiches */

@media (max-width: 760px) {
  .table-min { min-width: 0; }
  .tr-entete { display: none; }

  .tr.tr-corps {
    display: block; padding: 14px var(--rail);
  }
  .tr-corps > div { padding: 0; }
  .tr-corps > .td-identite { padding: 0 0 6px; }
  .td-principal { font-size: 15.5px; }

  .tr-corps > div[data-col] { display: block; padding: 3px 0; font-size: 13.5px; }
  .tr-corps > div[data-col]::before {
    content: attr(data-col);
    display: inline-block; min-width: 108px;
    font-size: 12.5px; color: var(--color-neutral-600);
  }
  .tr-corps > div[data-col] .td-secondaire { padding-left: 108px; }

  /* La fiche entière est déjà un lien : « Ouvrir » ne sert plus à rien. */
  .tr-corps .td-fin { display: none; }

  .totaux { flex-direction: column; gap: 4px; padding-bottom: 28px; }
}

/* ------------------------- le calendrier du mois, en points de couleur */

@media (max-width: 640px) {
  .cal-jour { min-height: 70px; padding: 5px 4px; }
  .cal-num { font-size: 14px; }
  .cal-num.aujourdhui { min-width: 24px; height: 24px; }
  .cal-dow { font-size: 11px; padding: 7px 4px; }

  /* Sept colonnes sur un téléphone ne laissent pas la place d'un mot. Chaque
     évènement devient un point de sa couleur, et c'est la case entière qui
     ouvre la journée. */
  .cal-items {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 3px; margin-top: 5px; pointer-events: none;
  }
  .cal-items .cal-item {
    flex: 0 0 9px; width: 9px; height: 9px; padding: 0;
    border-radius: 50%; font-size: 0; line-height: 0;
  }
  .cal-items .cal-plus { font-size: 10px; line-height: 1; padding: 0; }

  /* Douze mois en pleine largeur font une page interminable : deux colonnes
     redonnent à la vue Année son intérêt, celui de tout voir d'un coup. */
  .annee { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .mini-titre { font-size: 14px; margin-bottom: 6px; gap: 4px; }
  .mini-compte { font-size: 10px; padding: 1px 5px; }
  .mini-dow { font-size: 9.5px; padding-bottom: 1px; }
  .mini-jour { font-size: 11px; border-radius: 4px; }
}


/* ------------------------------------------------------- menu de statut
 * La pastille s'ouvre en liste des six statuts. Sur un écran large la liste
 * se pose sous la pastille (le script la sort du tableau, qui rogne tout ce
 * qui dépasse) ; sur un téléphone elle monte du bas de l'écran, sous le pouce.
 */
.menu-statut { display: inline-block; position: relative; }
.menu-statut[open], .tr-corps .menu-statut[open] { z-index: 80; }
.menu-statut > summary { list-style: none; cursor: pointer; }
.menu-statut > summary::-webkit-details-marker { display: none; }
.menu-statut-ouvrir { display: inline-flex; align-items: center; gap: 5px; }
.menu-statut-ouvrir:hover { filter: brightness(0.96); }
.menu-statut-fleche {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .7;
}
.menu-statut-liste {
  position: absolute; z-index: 70; top: calc(100% + 4px); left: 0;
  display: flex; flex-direction: column; gap: 3px; min-width: 210px;
  margin: 0; padding: 6px;
  background: var(--color-surface); border: 1px solid var(--color-rule);
  border-radius: 8px; box-shadow: var(--ombre-flottante);
}
.menu-statut-liste.fixe { position: fixed; top: auto; left: auto; }
.menu-statut-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  padding: 8px 11px; border-radius: 5px; border: 1px solid transparent;
}
.menu-statut-item:hover { filter: brightness(0.95); }
.menu-statut-item.actuel { border-color: var(--color-text); }

/* La date de prochain contact, réglable dans la liste sans ouvrir la fiche.
   Au repos elle ressemble à du texte ; au survol le champ se révèle. */
.relance-inline { display: block; max-width: 150px; }
.relance-inline .datefield-saisie {
  padding: 5px 30px 5px 7px; font-size: 14px;
  border-color: transparent; background: transparent;
}
.relance-inline .datefield-saisie::placeholder { color: var(--color-neutral-500); }
.relance-inline .datefield-saisie:hover,
.relance-inline .datefield-saisie:focus { border-color: var(--color-rule); background: var(--color-surface); }
.relance-inline .datefield-bouton { right: 2px; opacity: .6; }
.relance-inline:hover .datefield-bouton { opacity: 1; }
.relance-due .datefield-saisie { color: var(--color-accent-700); font-weight: 600; }
.cal-pop.fixe { position: fixed; top: auto; left: auto; }

/* Ce qu'on sait du dossier, lisible dans la liste des appels du jour. */
.appel-commentaire {
  margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--color-neutral-300);
  background: var(--color-neutral-100); border-radius: 0 5px 5px 0;
  font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; max-width: 620px;
}

@media (max-width: 760px) {
  .tr-corps > div[data-col="Statut"], .tr-corps > div[data-col="Relance"] { display: flex; align-items: center; }
  .tr-corps > div[data-col="Statut"]::before, .tr-corps > div[data-col="Relance"]::before { flex: 0 0 108px; }
  .relance-inline { max-width: none; flex: 1; }
  .relance-inline .datefield-saisie { border-color: var(--color-rule); background: var(--color-surface); }
}

@media (max-width: 560px) {
  /* Sur un téléphone, la liste des statuts monte du bas de l'écran. */
  .menu-statut[open] > summary::before {
    content: ''; position: fixed; inset: 0; z-index: 69;
    background: rgba(0, 0, 0, .35);
  }
  .menu-statut-liste, .menu-statut-liste.fixe {
    position: fixed; top: auto !important; left: 0 !important; right: 0; bottom: 0;
    border-radius: 14px 14px 0 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    gap: 6px; min-width: 0;
  }
  .menu-statut-item { padding: 13px 14px; font-size: 15px; text-align: center; }
}