/* Suivi des prospects — charte Nexus Core (#0F1E3D / #0CA8BE, IBM Plex Sans). */
:root {
  --fond: #F7F9FC; --fond-alt: #EFF3F9; --carte: #FFFFFF; --bord: #E1E7F0;
  --encre: #0F1E3D; --attenue: #5C6B85; --accent: #0CA8BE; --accent-fonce: #076B7D; --accent-doux: #E1F7FA;
  --erreur: #C0392B; --erreur-doux: #FDEDEC; --ok: #1E7B4F; --ok-doux: #E6F4EC; --retard: #FFF6E0;
  --police: 'IBM Plex Sans', -apple-system, 'system-ui', 'Segoe UI', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--attenue); font-family: var(--police); font-size: 1rem; line-height: 1.5; }
a { color: var(--encre); }
a:hover { color: var(--accent-fonce); }

.enveloppe { max-width: 1100px; margin: 0 auto; padding-inline: 1.25rem; }
main.enveloppe { padding-block: 1.5rem 3rem; }

.entete { background: var(--carte); border-bottom: 1px solid var(--bord); }
.entete-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding-block: 0.75rem; }
.marque { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 800; color: var(--encre); }
nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; flex: 1; }
nav a { text-decoration: none; font-weight: 600; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.deconnexion { margin: 0; }

h1 { color: var(--encre); font-weight: 800; font-size: clamp(1.4rem, 3.5vw, 1.9rem); letter-spacing: -0.01em; margin: 0 0 1rem; }
h2 { color: var(--encre); font-size: 1.15rem; margin: 2rem 0 0.75rem; }

.flash { padding: 0.65rem 0.9rem; border-radius: 8px; margin: 0 0 1rem; }
.flash-ok { background: var(--ok-doux); color: var(--ok); }
.flash-erreur { background: var(--erreur-doux); color: var(--erreur); }
.encart { background: var(--accent-doux); color: var(--accent-fonce); padding: 0.65rem 0.9rem; border-radius: 8px; }
.encart a { color: var(--accent-fonce); font-weight: 700; }
.vide, .note { font-size: 0.92rem; }

.defilement { overflow-x: auto; background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tr.en-retard td { background: var(--retard); }
table.chiffres td:nth-child(n+3) { font-variant-numeric: tabular-nums; color: var(--encre); }

label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--encre); margin-bottom: 0.25rem; }
input, select, textarea { width: 100%; padding: 0.55em 0.7em; border: 1px solid var(--bord); border-radius: 8px; font-family: var(--police); font-size: 1rem; background: var(--carte); color: var(--encre); }
button, .bouton { font-family: var(--police); font-weight: 600; font-size: 0.95rem; background: var(--encre); color: #fff; border: none; padding: 0.6em 1.1em; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .bouton:hover { background: #1a2e54; color: #fff; }
.bouton-discret { background: transparent; color: var(--attenue); border: 1px solid var(--bord); }
.bouton-discret:hover { background: var(--fond-alt); color: var(--encre); }

/* Mise en page des formulaires : grille qui passe sur une colonne en étroit. */
.grille, .filtres { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem 1rem; align-items: end; margin: 0 0 1.25rem; }
.grille .large, .filtres .large { grid-column: span 2; }
.grille .pleine { grid-column: 1 / -1; }
@media (max-width: 480px) { .grille .large, .filtres .large { grid-column: 1 / -1; } }
.case { display: flex; align-items: center; gap: 0.5rem; }
.case input { width: auto; margin: 0; }
.case label { margin: 0; }
.encadre { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 1rem; }
form.en-ligne { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.15rem 0.35rem 0.15rem 0; }
form.en-ligne input { width: auto; min-width: 9rem; }

.chapeau { font-size: 0.95rem; margin: -0.5rem 0 1.25rem; }
.fiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem 1.5rem; margin: 0 0 1.5rem; }
.fiche dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.fiche dd { margin: 0.1rem 0 0; color: var(--encre); overflow-wrap: anywhere; }
.liste { padding-left: 1.1rem; margin: 0 0 1rem; }
.liste li { margin-bottom: 0.3rem; }
.note { font-size: 0.85rem; color: var(--attenue); }

.pastille { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.1em 0.5em; border-radius: 999px; background: var(--accent-doux); color: var(--accent-fonce); white-space: nowrap; }
.pastille.alerte { background: var(--erreur-doux); color: var(--erreur); }
.bouton-danger { background: var(--erreur); }
.bouton-danger:hover { background: #962d22; }
.encadre.en-retard { background: var(--retard); }

details { margin: 0 0 1rem; }
details > summary { cursor: pointer; font-weight: 600; color: var(--encre); padding: 0.4rem 0; }
details[open] > summary { margin-bottom: 0.5rem; }

.page-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-inline: 1rem; }
.carte-connexion { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 2rem; width: 100%; max-width: 340px; }
.carte-connexion h1 { font-size: 1.25rem; }
.carte-connexion input { margin-bottom: 1rem; }
.carte-connexion button { width: 100%; }