/* Page de pilotage du robot de prospection AMESS : maquette du 4 novembre 2026 (dossier client, 05 - Conception).
   Colonne latérale sarcelle + contenu en cartes blanches sur fond gris-vert ; titres et chiffres en Poppins, texte en
   Inter (polices auto-hébergées, aucun appel réseau). Points de rupture : 1100 (une colonne), 900 (colonne en icônes),
   600 (barre en haut, navigation horizontale défilante). Règle anti-débordement : tout texte de longueur variable est
   borné et tronqué avec points de suspension, les conteneurs flex posent min-width: 0, les tableaux larges défilent
   dans `.tableau-defilant`, rien ne déborde à 360 px. */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sarcelle: #126C6C;
  --sarcelle-profond: #0C4D4D;
  --sarcelle-nuit: #083A3A;
  --sarcelle-pale: #E3F0EF;
  --framboise: #DD0C53;
  --framboise-pale: #FCE6EE;
  --ambre: #C7871A;
  --ambre-pale: #FBF0DC;
  --fond: #F3F6F6;
  --carte: #FFFFFF;
  --encre: #142526;
  --encre-douce: #5C6C6D;
  --trait: #DCE5E4;
  --rayon: 12px;
  --ombre: 0 1px 2px rgba(12, 77, 77, 0.06), 0 8px 24px -12px rgba(12, 77, 77, 0.18);
  --display: "Poppins", "Segoe UI", Arial, sans-serif;
  --texte: "Inter", "Segoe UI", Arial, sans-serif;
  --barre: 248px;
}
* { box-sizing: border-box; }
html { background: var(--fond); color: var(--encre); font-family: var(--texte); font-size: 15px; line-height: 1.5; }
body { margin: 0; min-width: 320px; }
a { color: var(--sarcelle); }
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
h1 { font-size: 1.5rem; font-weight: 600; }
h2 { font-size: 1.02rem; font-weight: 600; }
p { margin: 0 0 10px; }
button { font: inherit; }
code { font-family: Consolas, "Courier New", monospace; font-size: 0.9em; }

/* Œil-de-bœuf : petit libellé en capitales espacées. */
.oeil { font-family: var(--texte); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); font-weight: 600; }

/* ---------- Coque : colonne latérale + contenu ---------- */
.coque { display: grid; grid-template-columns: var(--barre) minmax(0, 1fr); min-height: 100vh; }
.laterale { background: linear-gradient(180deg, var(--sarcelle-profond) 0%, var(--sarcelle-nuit) 100%); color: #fff; display: flex; flex-direction: column; padding: 22px 18px; position: sticky; top: 0; height: 100vh; min-width: 0; }
.laterale > * { min-width: 0; }
.laterale .logo { display: block; width: 176px; max-width: 100%; height: auto; margin: 2px 0 6px 4px; }
.laterale .picto { display: none; width: 40px; height: auto; }
.laterale .sous-logo { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); margin: 0 0 26px 6px; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.82); text-decoration: none; padding: 10px 12px; border-radius: 10px; font-weight: 500; min-width: 0; }
.nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav a svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav a[aria-current="page"] { background: #fff; color: var(--sarcelle-profond); box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.nav .pastille { margin-left: auto; background: var(--framboise); color: #fff; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; flex-shrink: 0; }
.etat-robot { margin-top: auto; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.etat-robot .titre { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 6px; }
.etat-robot .ligne { display: flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; }
.etat-robot .ligne span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etat-robot .voyant { width: 9px; height: 9px; border-radius: 50%; background: #7ED9C3; box-shadow: 0 0 0 4px rgba(126,217,195,.22); flex-shrink: 0; }
.etat-robot .voyant.pause { background: #FFB3CB; box-shadow: 0 0 0 4px rgba(221,12,83,.3); }
.etat-robot .detail { font-size: 12.5px; color: rgba(255,255,255,.65); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etat-robot form { margin: 0; }
.etat-robot .pause { margin-top: 10px; width: 100%; background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 8px; padding: 7px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etat-robot .pause.reprendre { background: var(--framboise); border-color: var(--framboise); }
.etat-robot .pause:hover { background: rgba(255,255,255,.12); }
.etat-robot .pause.reprendre:hover { background: #c20a49; }
.laterale .compte { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.7); min-width: 0; }
.laterale .compte .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--framboise); color: #fff; display: grid; place-items: center; font-weight: 600; font-family: var(--display); flex-shrink: 0; }
.laterale .compte .nom-compte { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.laterale .compte form { margin: 0; flex-shrink: 0; }
.laterale .compte .deconnexion { background: transparent; border: 0; color: rgba(255,255,255,.7); width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.laterale .compte .deconnexion:hover { background: rgba(255,255,255,.12); color: #fff; }
.laterale .compte .deconnexion svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.texte-court { display: none; }

main { padding: 26px 32px 48px; min-width: 0; }
.entete-page { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.entete-page > * { min-width: 0; }
.entete-page h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.entete-page .date { color: var(--encre-douce); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete-page .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.entete-page .actions form { margin: 0; }
.entete-page .actions select { min-height: 38px; }

/* ---------- Boutons : .bouton (plein sarcelle), .secondaire (contour), .danger (framboise), .succes (plein), .discret ---------- */
.bouton, button.bouton { font: inherit; font-weight: 500; font-size: 0.93rem; border-radius: 9px; padding: 9px 14px; border: 1px solid var(--sarcelle); background: var(--sarcelle); color: #fff; cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-decoration: none; display: inline-block; line-height: 1.3; }
.bouton:hover { background: var(--sarcelle-profond); border-color: var(--sarcelle-profond); }
.bouton.secondaire { background: var(--carte); border-color: var(--trait); color: var(--encre); }
.bouton.secondaire:hover { background: var(--sarcelle-pale); border-color: var(--sarcelle-pale); }
.bouton.danger { background: var(--framboise); border-color: var(--framboise); color: #fff; }
.bouton.danger:hover { background: #c20a49; border-color: #c20a49; }
.bouton.succes { background: var(--sarcelle); border-color: var(--sarcelle); color: #fff; }
.bouton.discret { border-color: transparent; background: transparent; color: var(--encre-douce); }
.bouton.discret:hover { background: var(--sarcelle-pale); color: var(--encre); }
.bouton.discret.framboise { color: var(--framboise); }
.bouton.compact { padding: 6px 10px; font-size: 0.86rem; }
.bouton[disabled] { opacity: 0.5; cursor: default; }
.bouton:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .chip:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
/* Dans la page, les libellés de boutons sont fixes : ils passent à la ligne plutôt que d'être tronqués. */
main .bouton { white-space: normal; text-align: center; }

/* ---------- Cartes ---------- */
.carte, .section { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px 20px; min-width: 0; margin-bottom: 16px; }
.carte h2, .section h2 { display: flex; align-items: baseline; gap: 6px 10px; margin-bottom: 12px; flex-wrap: wrap; min-width: 0; }
.carte h2 > *, .section h2 > * { min-width: 0; }
.carte h2 .oeil, .section h2 .oeil { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.carte h2 .badge, .section h2 .badge { margin-left: 0; }
.carte.serree { padding: 6px 8px; }
.vide { color: var(--encre-douce); font-style: italic; padding: 8px 0; margin: 0; }

/* ---------- Tableau de bord ---------- */
.grille-haut { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.grille-haut > .carte { margin-bottom: 0; }
.a-faire { background: linear-gradient(135deg, var(--sarcelle) 0%, var(--sarcelle-profond) 100%); color: #fff; position: relative; overflow: hidden; }
.a-faire::after { content: ""; position: absolute; right: -40px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 28px solid rgba(255,255,255,.07); pointer-events: none; }
.a-faire::before { content: ""; position: absolute; right: 10px; top: -10px; width: 140px; height: 140px; border-radius: 50%; border: 18px solid rgba(221,12,83,.35); pointer-events: none; }
.a-faire h2 { color: #fff; position: relative; }
.a-faire .items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; }
.a-faire .item { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 12px 14px; text-decoration: none; color: #fff; min-width: 0; display: block; }
.a-faire .item:hover { background: rgba(255,255,255,.18); }
.a-faire .item .n { font-family: var(--display); font-size: 2rem; font-weight: 600; line-height: 1; }
.a-faire .item .l { font-size: 13px; color: rgba(255,255,255,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-faire .item.alerte .n { color: #FFB3CB; }
.a-faire .pied { position: relative; margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.75); }

.cadence h2 { margin-bottom: 6px; }
.cadence .gros { font-family: var(--display); font-size: 2.4rem; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cadence .gros small { font-size: 1rem; color: var(--encre-douce); font-weight: 500; }
.jauge { height: 10px; border-radius: 999px; background: var(--sarcelle-pale); overflow: hidden; margin: 10px 0 8px; }
.jauge > span { display: block; height: 100%; background: linear-gradient(90deg, var(--sarcelle), #2FA39A); border-radius: 999px; min-width: 2%; }
.cadence .legende { display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 12.5px; color: var(--encre-douce); gap: 4px 8px; }
.cadence .legende span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cadence dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 14px; margin: 14px 0 0; font-size: 13.5px; }
.cadence dt { color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cadence dd { margin: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Signature : la chaîne de prospection, cinq paliers reliés */
.chaine .paliers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.chaine .palier { position: relative; padding: 14px 14px 12px 16px; min-width: 0; border-left: 1px dashed var(--trait); }
.chaine .palier:first-child { border-left: 0; padding-left: 0; }
.chaine .palier .n { font-family: var(--display); font-size: 1.7rem; font-weight: 600; line-height: 1.1; color: var(--sarcelle-profond); }
.chaine .palier .l { font-size: 13px; color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chaine .palier .b { height: 6px; border-radius: 999px; background: var(--sarcelle-pale); margin-top: 10px; overflow: hidden; }
.chaine .palier .b span { display: block; height: 100%; background: var(--sarcelle); border-radius: 999px; }
.chaine .palier.final .n { color: var(--framboise); }
.chaine .palier.final .b span { background: var(--framboise); }

.grille-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.grille-bas > .carte { margin-bottom: 0; }
.carte h2.suite { margin-top: 18px; }

/* ---------- Tableaux : défilement horizontal interne plutôt que débordement de page ---------- */
.tableau-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; color: var(--encre-douce); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--trait); vertical-align: middle; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.libre { white-space: normal; max-width: 640px; min-width: 320px; overflow-wrap: anywhere; }
.tableau-journal td:nth-child(4) { max-width: 220px; }
td a { color: var(--encre); text-decoration: none; }
td a:hover { color: var(--sarcelle); text-decoration: underline; }
/* Réponses par cible : colonnes fixes, jamais de défilement. */
table.cibles { table-layout: fixed; }
table.cibles td { max-width: 0; }
table.cibles th:nth-child(1) { width: 36%; }
table.cibles th:nth-child(2), table.cibles th:nth-child(3) { width: 19%; }
table.cibles th:nth-child(4) { width: 26%; }
.taux { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.taux i { display: inline-block; width: 40px; height: 6px; background: var(--sarcelle-pale); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.taux i b { display: block; height: 100%; background: var(--sarcelle); }

/* ---------- Listes ---------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--trait); min-width: 0; }
.liste li:last-child { border-bottom: 0; }
.liste li > * { min-width: 0; }
.liste .principal { font-weight: 500; color: var(--encre); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 35%; }
.liste a.principal:hover { color: var(--sarcelle); }
.liste .secondaire { color: var(--encre-douce); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; max-width: 45%; }
.liste .quand { margin-left: auto; color: var(--encre-douce); font-size: 12.5px; white-space: nowrap; flex-shrink: 0; }

/* ---------- Pastilles de statut (.badge <statut>) et pastilles libres (.pill couleur) ---------- */
.badge, .pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; background: #EEF1F1; color: var(--encre-douce); line-height: 1.5; }
.pill.sarcelle, .badge.envoye, .badge.relance, .badge.en_file, .badge.reponse { background: var(--sarcelle-pale); color: var(--sarcelle-profond); }
.pill.ambre, .badge.a_valider, .badge.avertissement, .badge.absence, .badge.rejet_temporaire { background: var(--ambre-pale); color: #8A5A0B; }
.pill.framboise, .badge.adresse_invalide, .badge.liste_noire, .badge.quarantaine, .badge.erreur, .badge.stop, .badge.rejet_definitif { background: var(--framboise-pale); color: #A5063C; }
.pill.gris { background: #EEF1F1; color: var(--encre-douce); }
.pill.plein, .badge.a_repondu, .badge.repris_par_eli { background: var(--sarcelle); color: #fff; }

/* ---------- Prospects ---------- */
.filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; min-width: 0; }
.filtres > * { min-width: 0; }
.filtres .groupe { color: var(--encre-douce); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin-right: 2px; white-space: nowrap; }
.chip { border: 1px solid var(--trait); background: var(--carte); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; cursor: pointer; white-space: nowrap; color: var(--encre); text-decoration: none; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip:hover { border-color: var(--sarcelle); }
.chip[aria-pressed="true"] { background: var(--sarcelle); color: #fff; border-color: var(--sarcelle); }
.chip .n { color: inherit; opacity: .75; font-variant-numeric: tabular-nums; }
.filtres .recherche { margin-left: auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--trait); background: var(--carte); border-radius: 999px; padding: 6px 12px; min-width: 0; max-width: 100%; }
.filtres .recherche input { border: 0; outline: 0; font: inherit; min-width: 0; width: 220px; max-width: 100%; background: transparent; padding: 2px 0; min-height: 0; }
.filtres .recherche input:focus-visible { outline: 0; }
.filtres .recherche:focus-within { border-color: var(--sarcelle); box-shadow: 0 0 0 3px var(--sarcelle-pale); }
.filtres .recherche svg { width: 16px; height: 16px; stroke: var(--encre-douce); fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.tableau-prospects td:first-child { font-weight: 500; max-width: 280px; }
.tableau-prospects td:nth-child(2) { max-width: 170px; }
.score { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.score i { width: 44px; height: 5px; background: var(--sarcelle-pale); border-radius: 999px; overflow: hidden; display: inline-block; flex-shrink: 0; }
.score i b { display: block; height: 100%; background: var(--sarcelle); }
.pagination { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; color: var(--encre-douce); font-size: 13.5px; flex-wrap: wrap; padding: 0 4px 4px; }
.pagination .bouton { padding: 6px 10px; }
.pagination .bouton:first-child { margin-left: auto; }

/* ---------- Fiche prospect ---------- */
.fil { font-size: 13px; color: var(--encre-douce); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil a { color: var(--encre-douce); text-decoration: none; }
.fil a:hover { color: var(--sarcelle); }
.titre-fiche { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.titre-fiche > * { min-width: 0; }
.titre-fiche h1 { max-width: 100%; }
.titre-fiche .meta { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.barre-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; position: sticky; top: 0; background: var(--fond); padding: 8px 0; z-index: 5; min-width: 0; }
.barre-actions > * { min-width: 0; }
.barre-actions .espace { flex: 1; }
.barre-actions form { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.barre-actions .champ { display: flex; align-items: center; gap: 6px; flex-direction: row; }
.barre-actions .champ label { font-weight: 400; font-size: 12.5px; color: var(--encre-douce); white-space: nowrap; }
.barre-actions .champ input { min-height: 38px; width: 160px; max-width: 100%; }
.barre-actions .champ input[type="number"] { width: 72px; }
.barre-actions .htmx-indicator { display: none; }
.barre-actions .htmx-request .htmx-indicator, .barre-actions .htmx-indicator.htmx-request { display: inline; }
.grille-fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; margin-bottom: 16px; }
.grille-fiche > .carte { margin-bottom: 0; }
.identite dl { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 14px; }
.identite dt { color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.identite dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lu p { margin: 0 0 8px; font-size: 14px; }
.lu .etiquette { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); font-weight: 600; margin: 10px 0 2px; }
.lu ul { margin: 0 0 8px; padding-left: 18px; font-size: 14px; }
.lu .source, .sources a { font-size: 12px; color: var(--sarcelle); overflow-wrap: anywhere; }
.lu .pourquoi { background: var(--sarcelle-pale); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-top: 12px; overflow-wrap: anywhere; }
.mail { margin-bottom: 14px; }
.mail .entete-mail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; min-width: 0; }
.mail .entete-mail > * { min-width: 0; }
.mail .entete-mail .objet { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 200px; }
.mail .entete-mail .oeil { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mail .relire { border-left: 3px solid var(--ambre); background: var(--ambre-pale); padding: 6px 10px; border-radius: 0 8px 8px 0; font-size: 13px; margin-bottom: 10px; overflow-wrap: anywhere; }
.mail form.fiche { max-width: none; gap: 8px; }
.mail .champ label { font-weight: 400; font-size: 12.5px; color: var(--encre-douce); }
.mail textarea { min-height: 150px; line-height: 1.5; resize: vertical; background: #FBFCFC; }
.mail input[type="text"] { background: #FBFCFC; }
.mail .champ .aide, .mail .pied-mail { font-size: 12px; color: var(--encre-douce); margin-top: 2px; }
.mail .actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.mail pre { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: 14px; }
.mail details { margin-top: 6px; font-size: 14px; }
.mail details summary { cursor: pointer; color: var(--sarcelle); }

/* ---------- Formulaires (réglages, saisie manuelle, connexion) ---------- */
form { margin: 0; }
form.fiche { display: grid; gap: 14px; max-width: 760px; }
.champ { display: grid; gap: 4px; min-width: 0; }
.champ label { font-weight: 500; font-size: 0.92rem; }
.champ .aide, .aide { color: var(--encre-douce); font-size: 0.85rem; }
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="time"], input[type="search"], select, textarea { font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--trait); border-radius: 8px; background: #FBFCFC; color: var(--encre); width: 100%; min-height: 42px; min-width: 0; }
input[type="file"] { font: inherit; font-size: 14px; min-width: 0; max-width: 100%; }
select { background: var(--carte); }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--sarcelle); }
.champ.erreur input, .champ.erreur textarea, .champ.erreur select { border-color: var(--framboise); }
.champ .message-erreur { color: var(--framboise); font-size: 0.88rem; }
.cases { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cases label { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; min-height: 40px; }
.cases input { accent-color: var(--sarcelle); }
.rangee { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; min-width: 0; }
form.fiche .rangee { align-items: start; }
form.fiche .champ > .oeil { margin-top: 6px; }
.rangee > * { min-width: 0; flex: 1 1 140px; }
.rangee > .bouton { flex: 0 1 auto; }
.section form.rangee { margin-bottom: 12px; }
.fiche > .rangee:last-child { margin-top: 4px; }

/* ---------- Avis ---------- */
.avis { padding: 10px 14px; border-left: 3px solid var(--sarcelle); background: var(--carte); border-radius: 0 10px 10px 0; box-shadow: var(--ombre); margin-bottom: 14px; overflow-wrap: anywhere; }
.avis.erreur { border-left-color: var(--framboise); background: var(--framboise-pale); }
.avis.succes { border-left-color: var(--sarcelle); background: var(--sarcelle-pale); }
.avis.attention { border-left-color: var(--ambre); background: var(--ambre-pale); }

/* ---------- Correspondants : une carte par ligne ---------- */
.carte .entete { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.carte .entete > * { min-width: 0; }
.carte .adresse { font-weight: 600; overflow-wrap: anywhere; }
.carte .nom { color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.carte .boutons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
article.carte { padding: 12px 16px; margin-bottom: 10px; }
.intro { color: var(--encre-douce); max-width: 900px; margin-bottom: 16px; }

/* ---------- Page de connexion ---------- */
body.page-connexion { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.connexion { width: 100%; max-width: 400px; background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.connexion .bandeau { background: linear-gradient(135deg, var(--sarcelle) 0%, var(--sarcelle-profond) 100%); padding: 26px 24px 22px; }
.connexion .bandeau img { display: block; width: 176px; max-width: 100%; height: auto; }
.connexion .bandeau p { margin: 10px 0 0; color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.connexion .corps { padding: 22px 24px 26px; }
.connexion h1 { margin-bottom: 6px; }
.connexion .corps > p { color: var(--encre-douce); }
.connexion .bouton { width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grille-haut, .grille-bas, .grille-fiche { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  :root { --barre: 76px; }
  .laterale { padding: 16px 12px; align-items: center; }
  .laterale .logo, .laterale .sous-logo { display: none; }
  .laterale .picto { display: block; margin: 0 0 18px; }
  .nav { width: 100%; }
  .nav a { justify-content: center; padding: 12px 0; }
  .nav a span, .nav .pastille { display: none; }
  /* Le bloc Robot garde le voyant et le bouton Pause (icône) : la pause reste à portée de main. */
  .etat-robot { background: transparent; border: 0; padding: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .etat-robot .titre, .etat-robot .detail, .etat-robot .ligne span:last-child { display: none; }
  .etat-robot .pause { width: 40px; height: 40px; padding: 0; margin: 0; display: grid; place-items: center; }
  .texte-large { display: none; }
  .texte-court { display: inline; }
  .laterale .compte { margin-top: 14px; flex-direction: column; gap: 8px; }
  .laterale .compte .nom-compte { display: none; }
  main { padding: 20px 18px 40px; }
}
@media (max-width: 600px) {
  .coque { grid-template-columns: minmax(0, 1fr); }
  .laterale { position: sticky; top: 0; height: auto; flex-direction: row; padding: 10px 12px; gap: 6px; z-index: 10; align-items: center; }
  .laterale .picto { width: 34px; margin: 0 6px 0 0; }
  .nav { flex-direction: row; gap: 2px; overflow-x: auto; flex: 1; min-width: 0; width: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 8px 10px; flex-shrink: 0; }
  .etat-robot { width: auto; flex-direction: row; gap: 6px; margin: 0; }
  .etat-robot .pause { width: 36px; height: 36px; }
  .laterale .compte { margin: 0 0 0 4px; flex-direction: row; gap: 4px; }
  .laterale .compte .avatar { display: none; }
  main { padding: 16px 14px 36px; }
  .entete-page .actions { margin-left: 0; width: 100%; }
  .a-faire .items { grid-template-columns: 1fr 1fr; }
  .chaine .paliers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chaine .palier { border-left: 0; padding-left: 0; border-top: 1px dashed var(--trait); }
  .chaine .palier:nth-child(-n+2) { border-top: 0; }
  .filtres .recherche { margin-left: 0; width: 100%; }
  .filtres .recherche input { width: 100%; }
  .identite dl { grid-template-columns: 80px minmax(0, 1fr); }
  .liste .secondaire { display: none; }
  .carte, .section { padding: 14px 14px; }
  .barre-actions .champ input { width: 140px; }
  .taux i { display: none; }
  table.cibles th { padding: 8px 6px; letter-spacing: .02em; }
  table.cibles td { padding: 10px 6px; }
  table.cibles th:nth-child(1) { width: 46%; }
  table.cibles th:nth-child(2), table.cibles th:nth-child(3) { width: 18%; }
  table.cibles th:nth-child(4) { width: 18%; }
  .large-mobile { display: none; }
}
@media (min-width: 601px) { .court-mobile { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .nav a, .bouton, .chip { transition: background-color .15s ease, color .15s ease; }
  .htmx-settling .etat-robot { transition: background-color 0.4s; }
}
/* Correspondants : classement affiché en pastille. */
.badge.client { background: var(--sarcelle); color: #fff; }
.badge.contact_actuel { background: var(--framboise-pale); color: #A5063C; }
.groupe-cartes { margin-bottom: 8px; }