/* ============================================================
   Vasile Intérim — Design System
   Modern SaaS workforce-management style
   ============================================================ */

:root {
    /* Polices du système : aucune requête vers un tiers (l'IP du visiteur ne
       part plus chez Google), aucune feuille distante qui bloque le premier affichage
       sur mobile. C'est déjà la pile de la vitrine. */
    --police:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --brand:        #2563eb;
    --brand-600:    #1d4ed8;
    --brand-700:    #1e40af;
    --brand-soft:   #eff6ff;

    --sidebar:      #0f172a;
    --sidebar-2:    #1e293b;
    --sidebar-text: #94a3b8;
    --sidebar-active:#e2e8f0;

    --bg:           #f6f8fb;
    --card:         #ffffff;
    --text:         #0f172a;
    --muted:        #64748b;
    --border:       #e5e9f0;

    --green:        #059669;
    --green-soft:   #d1fae5;
    --amber:        #d97706;
    --amber-soft:   #fef3c7;
    --red:          #dc2626;
    --red-soft:     #fee2e2;

    --radius:       14px;
    --radius-sm:    9px;
    --shadow:       0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
    --shadow-sm:    0 1px 2px rgba(16,24,40,.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    font-family: var(--police);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

/* Focus clavier visible sur les liens, boutons et champs, y compris dans le
   tiroir mobile. Le contour reste hors du layout et ne provoque aucun saut. */
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--brand);
    outline: 3px solid color-mix(in srgb, var(--brand) 72%, #fff);
    outline-offset: 3px;
}

/* ─── App shell ─────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    background: var(--sidebar);
    color: var(--sidebar-text);
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    z-index: 20;
    border-right: 1px solid var(--sb-edge, transparent);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 104px;
    padding: 18px 20px;
    margin: -20px -14px 8px;
    background: #fff;
    border-bottom: 1px solid #e5e9f0;
}
.brand-text { min-width: 0; overflow: hidden; }
.brand-mark {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    display: grid; place-items: center;
    color: #fff; font-weight: 800; font-size: 15px;
    box-shadow: 0 4px 12px rgba(37,99,235,.45);
    flex-shrink: 0;
}
.brand-text b { color: #0f172a; font-size: 15px; font-weight: 700; display: block; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-text span { font-size: 11px; color: #64748b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.nav { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; }
.nav-label {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
    color: var(--sb-label, #475569); font-weight: 700; padding: 8px 10px 6px;
}
.nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: 9px;
    font-weight: 500; font-size: 13.5px;
    color: var(--sidebar-text);
    transition: background .15s, color .15s;
}
.nav-item svg { width: 18px; height: 18px; opacity: .85; flex-shrink: 0; }
.nav-item .nav-badge {
    margin-left: auto; flex-shrink: 0;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--red); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
    box-shadow: 0 1px 4px rgba(220,38,38,.4);
}
.nav-item span { flex: 1; }
.nav-item:hover { background: var(--sb-hover, rgba(255,255,255,.05)); color: var(--sb-fg-strong, #e2e8f0); }
.nav-item.active {
    background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(37,99,246,.14));
    color: var(--sb-active-fg, #fff);
    box-shadow: inset 0 0 0 1px rgba(96,165,250,.25);
}
.nav-item.active svg { opacity: 1; }

.sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--sb-border, rgba(255,255,255,.07)); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg,#334155,#475569);
    color: #fff; font-weight: 700; font-size: 13px;
    display: grid; place-items: center; flex-shrink: 0;
}
.user-chip .u-name { color: var(--sb-fg-strong, #e2e8f0); font-size: 13px; font-weight: 600; line-height: 1.2; }
.user-chip .u-role { color: var(--sidebar-text); font-size: 11px; text-transform: capitalize; }
.logout {
    display: flex; align-items: center; gap: 9px;
    margin-top: 6px; padding: 9px 11px; border-radius: 9px;
    color: var(--sidebar-text, #cbd5e1); font-size: 13px; font-weight: 500;
}
.logout:hover { background: rgba(239,68,68,.14); color: #fca5a5; }
.logout svg { width: 17px; height: 17px; }

/* ─── Main ──────────────────────────────────────────────── */
.main { margin-left: 250px; flex: 1; min-width: 0; }

.topbar {
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    padding: 18px 34px;
    position: sticky; top: 0; z-index: 10;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.topbar h1 { font-size: 20px; font-weight: 700; letter-spacing: -.4px; }
.topbar .subtitle { color: var(--muted); font-size: 13px; margin-top: 2px; }
.topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.content { padding: 28px 34px 60px; max-width: 1180px; }

/* ─── Buttons ───────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border-radius: 10px;
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .05s, box-shadow .15s, background .15s;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,.28); }
.btn-primary:hover { background: var(--brand-600); }
.btn-success { background: var(--green); color: #fff; box-shadow: 0 2px 8px rgba(5,150,105,.25); }
.btn-success:hover { background: #047857; }
.btn-danger  { background: var(--red); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-ghost   { background: #fff; color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { background: #f8fafc; border-color: #cbd5e1; }
.btn-block { width: 100%; justify-content: center; padding: 13px; font-size: 14.5px; }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 8px; }

/* ─── Cards ─────────────────────────────────────────────── */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 22px;
    overflow: hidden;
}
.card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-header h2 { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.card-header .hint { color: var(--muted); font-size: 12.5px; }
.card-body { padding: 22px 24px; }

/* ─── Stats ─────────────────────────────────────────────── */
.stat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 18px; margin-bottom: 26px;
}
.stat {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 18px 20px;
    display: flex; align-items: center; gap: 15px;
}
.stat-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center; flex-shrink: 0;
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-icon.blue  { background: var(--brand-soft);  color: var(--brand); }
.stat-icon.amber { background: var(--amber-soft);  color: var(--amber); }
.stat-icon.green { background: var(--green-soft);  color: var(--green); }
.stat-icon.slate { background: #eef2f7;            color: #475569; }
.stat-value { font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
.stat-label { color: var(--muted); font-size: 12.5px; margin-top: 4px; }

/* ─── Tables ────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th {
    text-align: left; font-size: 11.5px; letter-spacing: .03em;
    text-transform: uppercase; color: var(--muted); font-weight: 600;
    padding: 10px 12px; border-bottom: 1px solid var(--border); background: #fbfcfe;
}
.table td { padding: 12px; border-bottom: 1px solid #f1f5f9; font-size: 13.5px; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #fafbfe; }
.table .num { font-variant-numeric: tabular-nums; }

/* ─── Grilles (listes améliorées) ───────────────────────── */
.grid-barre {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 0 0 14px; position: relative;
}
.grid-recherche {
    flex: 1; min-width: 180px; max-width: 320px;
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px;
    font-size: 14px; background: #fff;
}
.grid-recherche:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.grid-compteur { font-size: 12.5px; color: var(--muted); }
.grid-actions { margin-left: auto; display: flex; gap: 8px; }
.grid-menu {
    position: absolute; top: 44px; right: 0; z-index: 20;
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15,23,42,.12); padding: 8px; min-width: 180px;
    max-height: 300px; overflow-y: auto;
}
.grid-menu label {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    font-size: 13.5px; border-radius: 6px; cursor: pointer;
}
.grid-menu label:hover { background: var(--brand-soft); }
th.grid-triable { cursor: pointer; user-select: none; white-space: nowrap; }
th.grid-triable:hover { color: var(--brand); }
th.grid-triable::after { content: '↕'; opacity: .35; margin-left: 5px; font-size: 10px; }
th.grid-triable[data-sens="asc"]::after { content: '↑'; opacity: 1; }
th.grid-triable[data-sens="desc"]::after { content: '↓'; opacity: 1; }

/* ─── Badges ────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    text-transform: capitalize;
}
.badge::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.en_attente { background: var(--amber-soft); color: var(--amber); }
.badge.valide     { background: var(--green-soft); color: var(--green); }
.badge.refuse     { background: var(--red-soft);   color: var(--red); }
.badge.vide       { background: #f1f5f9; color: #94a3b8; }
.badge.plain::before { display: none; }

/* ─── Forms ─────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 7px; }
.input, select.input, input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=tel], input[type=search], select, textarea {
    width: 100%; padding: 11px 13px;
    border: 1px solid var(--border); border-radius: 10px;
    font-family: inherit; font-size: 14px; color: var(--text);
    background: #fff; outline: none;
    transition: border .15s, box-shadow .15s;
}
.input:focus, input:focus, select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
textarea { line-height: 1.5; resize: vertical; min-height: 84px; }
.form-grid { display: grid; gap: 14px; }

/* ─── Modèle de relevé propre à l'agence ─────────────────── */
.modele-propre { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.modele-propre h3 { font-size: 14px; margin: 0; }
.modele-propre .hint { margin: 0; }
.modele-propre .alert { margin: 0; }
.modele-depose { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.modele-depose .field-hint { display: block; }
.modele-note, .modele-reponse { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.modele-reponse { color: var(--text); }
.modele-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.modele-formulaire { display: grid; gap: 10px; }
.modele-formulaire .form-group { margin: 0; }
.modele-formulaire .btn { justify-self: start; }
.modele-traitement { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.modele-traitement select { width: auto; }
.modele-traitement input[type=text] { flex: 1; min-width: 180px; }

/* ─── Missions et heures par semaine (entreprise, intérimaire) ── */
.mission-semaines .mission-entete { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 18px 20px 10px; }
.mission-semaines h2 { font-size: 16px; margin: 0 0 3px; }
.mission-semaines .mission-entete p { margin: 0; font-size: 13px; color: var(--muted); }
.mission-chiffres { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0 20px 14px; font-size: 13px; color: var(--muted); }
.mission-chiffres b { color: var(--text); font-variant-numeric: tabular-nums; }
.semaines-mission { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.semaine-ligne {
    display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(80px, .6fr) minmax(170px, 1.4fr) auto;
    gap: 10px 16px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.semaine-ligne:last-child { border-bottom: 0; }
.semaine-quand, .semaine-heures, .semaine-etat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.semaine-quand span, .semaine-heures span { font-size: 12.5px; color: var(--muted); }
.semaine-heures strong { font-variant-numeric: tabular-nums; }
.semaine-etat .badge { align-self: flex-start; }
.semaine-action { text-align: right; }
.mission-vide { margin: 0; padding: 4px 20px 18px; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
    .semaine-ligne { grid-template-columns: 1fr auto; padding: 12px 16px; }
    .semaine-heures { text-align: right; align-items: flex-end; }
    .semaine-etat { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
    .semaine-action { grid-column: 1 / -1; }
    .semaine-action .btn { width: 100%; justify-content: center; }
    .mission-semaines .mission-entete { padding: 16px 16px 8px; }
    .mission-chiffres { padding: 0 16px 12px; }
}

/* ─── Demandes : conversation ───────────────────────────── */
.demande { display: grid; gap: 20px; align-items: start; }
.demande.avec-traitement { grid-template-columns: minmax(0, 1fr) 300px; }
.demande-fil { display: flex; flex-direction: column; margin-bottom: 0; }
.demande-etat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.demande-puce { font-size: 12px; font-weight: 600; color: var(--muted); background: #f1f5f9; border-radius: 999px; padding: 3px 10px; }
.fil-messages { display: flex; flex-direction: column; gap: 16px; padding: 20px; max-height: 60vh; overflow-y: auto; background: #fafbfd; }
.bulle { display: flex; gap: 10px; align-items: flex-end; max-width: 78%; }
.bulle.moi { flex-direction: row-reverse; align-self: flex-end; }
.bulle-avatar {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: #e2e8f0; color: #334155; font-size: 12px; font-weight: 700;
}
.bulle.agence .bulle-avatar { background: var(--brand-soft); color: var(--brand); }
.bulle-contenu { min-width: 0; }
.bulle-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 12px; color: var(--muted); margin: 0 4px 4px; }
.bulle.moi .bulle-meta { justify-content: flex-end; }
.bulle-meta strong { color: var(--text); font-size: 13px; }
.bulle-role { font-weight: 600; }
.bulle-texte {
    white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55;
    background: #fff; border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 11px 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.bulle.moi .bulle-texte { background: var(--brand); border-color: var(--brand); color: #fff; border-radius: 14px 14px 4px 14px; }
.demande-close { display: flex; gap: 8px; align-items: center; margin: 0 20px; padding: 10px 14px; border-radius: 10px; background: var(--green-soft); color: #065f46; font-size: 13px; }
.demande-close svg { width: 18px; height: 18px; flex-shrink: 0; }
.composeur { padding: 16px 20px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.composeur-titre { font-size: 13px; font-weight: 700; }
.composeur textarea { min-height: 96px; max-height: 320px; font-size: 14.5px; background: #fff; }
.composeur-pied { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.composeur-actions { display: flex; gap: 8px; margin-left: auto; }
.composeur-actions .btn svg { width: 16px; height: 16px; }
.demande-traitement { margin-bottom: 0; }
.demande-auteur { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border); display: grid; gap: 4px; font-size: 13px; }
.demande-auteur dt { color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.demande-auteur dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 960px) {
    .demande.avec-traitement { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .bulle { max-width: 94%; }
    .fil-messages { padding: 14px; max-height: none; }
    .composeur { padding: 14px; }
    .composeur-actions { width: 100%; }
    .composeur-actions .btn { flex: 1; justify-content: center; }
}

/* ─── Champ de fichier en français (static/js/actions.js) ── */
.fichier { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.fichier-nom { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.fichier.choisi .fichier-nom { color: var(--text); font-weight: 600; }
.fichier input.fichier-origine {
    position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none;
}

/* ─── Liste avec recherche (static/js/liste-recherche.js) ── */
.lr { position: relative; display: block; width: 100%; }
.lr .lr-champ { padding-right: 38px; }
.lr-fleche {
    position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; margin-top: -7px; pointer-events: none;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg);
}
/* La liste d'origine reste présente (formulaire, scripts, tests) mais invisible. */
.lr select.lr-origine {
    position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0;
    opacity: 0; pointer-events: none;
}
.lr-liste {
    position: fixed; z-index: 1000; max-height: 320px; overflow-y: auto;
    margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 18px 40px -12px rgba(15,23,42,.28), 0 2px 6px rgba(15,23,42,.06);
}
.lr-groupe { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.lr-option { padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.lr-option.actif { background: var(--brand-soft); color: var(--brand); }
.lr-option[aria-selected="true"] { font-weight: 700; }
.lr-option[aria-disabled="true"] { color: #cbd5e1; cursor: not-allowed; }
.lr-vide { padding: 12px 10px; color: var(--muted); font-size: 13.5px; }

/* ─── Calendrier français (static/js/calendrier.js) ─────── */
.cal { position: relative; display: block; width: 100%; }
label > .cal, .cal-en-ligne .cal { display: inline-block; width: auto; min-width: 176px; vertical-align: middle; }
.cal .cal-champ { padding-right: 42px; }
.cal-bouton {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent;
    color: var(--muted); display: grid; place-items: center; cursor: pointer;
}
.cal-bouton:hover { background: var(--brand-soft); color: var(--brand); }
.cal-bouton svg { width: 19px; height: 19px; }
.cal-fenetre {
    position: fixed; z-index: 1000; width: 296px;
    background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px;
    box-shadow: 0 18px 40px -12px rgba(15,23,42,.28), 0 2px 6px rgba(15,23,42,.06);
    font-size: 14px; color: var(--text);
}
.cal-tete { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cal-nav, .cal-titre { border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; }
.cal-nav { width: 34px; height: 34px; font-size: 20px; line-height: 1; color: var(--muted); }
.cal-titre { flex: 1; height: 34px; font-weight: 700; font-size: 15px; }
.cal-nav:hover, .cal-titre:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand); }
.cal-titre:disabled { cursor: default; color: var(--text); }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-jour-nom { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 4px 0 6px; }
.cal-jour, .cal-mois {
    border: 0; background: transparent; border-radius: 9px; cursor: pointer; font: inherit; color: inherit;
    font-variant-numeric: tabular-nums;
}
.cal-jour { height: 36px; }
.cal-jour.week-end { color: #64748b; }
.cal-jour.autre-mois { color: #cbd5e1; }
.cal-jour:hover:not(:disabled), .cal-mois:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand); }
.cal-jour.actuel, .cal-mois.actuel { box-shadow: inset 0 0 0 1.5px var(--brand); font-weight: 700; }
.cal-jour.choisi, .cal-mois.choisi { background: var(--brand); color: #fff; font-weight: 700; }
.cal-jour:focus-visible, .cal-mois:focus-visible, .cal-nav:focus-visible, .cal-titre:focus-visible, .cal-lien:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 1px;
}
.cal-jour:disabled, .cal-mois:disabled { color: #e2e8f0; cursor: not-allowed; }
.cal-grille-mois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cal-mois { height: 42px; font-weight: 600; }
.cal-pied { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.cal-pied .cal-lien:only-child { margin-left: auto; }
.cal-lien { border: 0; background: transparent; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.cal-lien:hover:not(:disabled) { background: var(--brand-soft); }
.cal-lien:disabled { color: #cbd5e1; cursor: not-allowed; }
@media (max-width: 520px) {
    /* Sur téléphone : une feuille en bas de l'écran, à portée de pouce. */
    .cal-fenetre {
        top: auto; bottom: 0; left: 0; right: 0; width: auto;
        border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    }
    .cal-jour { height: 44px; font-size: 15px; }
    .cal-mois { height: 48px; }
}

/* ─── Alerts ────────────────────────────────────────────── */
.alert {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 15px; border-radius: 11px;
    font-size: 13px; margin-bottom: 20px; line-height: 1.45;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-info    { background: var(--brand-soft); color: #1e40af; }
.alert-warning { background: #fffbeb; color: #92400e; }
.alert-success { background: var(--green-soft); color: #065f46; }
.alert-error   { background: var(--red-soft);   color: #991b1b; }
.candidate-page { display: flex; flex-direction: column; }

/* ─── Empty state ───────────────────────────────────────── */
.empty { text-align: center; padding: 54px 20px; color: var(--muted); }
.empty svg { width: 44px; height: 44px; opacity: .4; margin-bottom: 12px; }
.empty p { font-size: 14px; }

/* ─── Week navigation bar ───────────────────────────────── */
.week-nav {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 14px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.week-nav .week-title { font-weight: 700; font-size: 15px; letter-spacing: -.2px; }
.week-nav .week-title span { color: var(--muted); font-weight: 500; font-size: 13px; }
.week-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f1f5f9; color: var(--brand); padding: 8px 13px;
    border-radius: 9px; font-size: 13px; font-weight: 600;
}
.week-btn:hover { background: #e2e8f0; }

/* ─── Day accordion (intérimaire) ───────────────────────── */
.day {
    border: 1px solid var(--border); border-radius: 12px;
    margin-bottom: 10px; overflow: hidden; background: #fff;
    transition: box-shadow .15s;
}
.day:hover { box-shadow: var(--shadow-sm); }

/* ─── Login ─────────────────────────────────────────────── */
.auth-wrap {
    min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background:
        radial-gradient(900px 500px at 15% -10%, rgba(37,99,235,.14), transparent),
        radial-gradient(700px 500px at 100% 110%, rgba(5,150,105,.10), transparent),
        var(--bg);
}
.auth-card {
    background: #fff; border: 1px solid var(--border);
    border-radius: 20px; box-shadow: 0 20px 60px rgba(15,23,42,.12);
    width: 100%; max-width: 400px; padding: 40px 36px;
}
.auth-brand { text-align: center; margin-bottom: 28px; }
.auth-brand .brand-mark { width: 54px; height: 54px; border-radius: 14px; font-size: 20px; margin: 0 auto 14px; }
.auth-brand .auth-logo {
    width: min(200px, 76%); height: 88px; margin: 0 auto 16px;
    position: relative; display: block;
    border: 0; border-radius: 0; padding: 0; overflow: hidden;
    box-shadow: none !important;
}
.auth-brand .auth-logo img {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%;
    max-width: none; max-height: none; object-fit: contain;
}
.auth-brand h1 { font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: 0; }
.auth-brand p { max-width: 300px; color: var(--muted); font-size: 13px; line-height: 1.45; margin: 5px auto 0; }
.auth-hint { text-align: center; margin-top: 22px; font-size: 12px; color: var(--muted); }

/* ─── Timesheet (pointage semaine) ──────────────────────── */
.ts-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.ts-toolbar .client-pick { flex: 1; min-width: 260px; }
.ts-toolbar .client-pick label { font-size: 12px; font-weight: 600; color: #334155; display: block; margin-bottom: 6px; }

.ts-head, .ts-row {
    display: grid;
    grid-template-columns: 190px 1.1fr 1.1fr 1.1fr 1.7fr 84px 116px;
    gap: 12px; align-items: center;
}
.ts-head {
    padding: 0 12px 10px; border-bottom: 1px solid var(--border);
    font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
    color: var(--muted); font-weight: 600;
}
.ts-head .r { text-align: right; }
.ts-row {
    padding: 11px 12px; border-radius: 10px;
    border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.ts-row + .ts-row { margin-top: 2px; }
.ts-row:hover { background: #fbfcfe; }
.ts-row.active { background: #f8fbff; border-color: #e0ecff; }
.ts-row.weekend { opacity: .62; }
.ts-row.weekend.active { opacity: 1; }
.ts-row.locked { background: #f8fafc; opacity: 1; }
.ts-row.locked input, .ts-row.locked select { background: #f1f5f9; color: #64748b; cursor: not-allowed; }

.ts-day { display: flex; align-items: center; gap: 10px; }
.ts-day input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; flex-shrink: 0; }
.ts-day .d-name { font-weight: 700; font-size: 13.5px; line-height: 1.1; }
.ts-day .d-date { font-size: 11.5px; color: var(--muted); }
.ts-row select, .ts-row input[type=text] { padding: 9px 10px; font-size: 13px; border-radius: 8px; }
.ts-hours { text-align: right; font-weight: 800; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ts-hours.zero { color: #cbd5e1; }
.ts-status { display: flex; justify-content: flex-end; }

/* Sticky submit / transmission bar */
.submit-bar {
    position: sticky; bottom: 0; z-index: 8;
    margin: 18px -2px 0; padding: 14px 20px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 -2px 16px rgba(16,24,40,.08);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.submit-bar .recap { display: flex; align-items: center; gap: 22px; }
.submit-bar .recap .val { font-size: 20px; font-weight: 800; line-height: 1; }
.submit-bar .recap .lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.submit-bar .recap .sep { width: 1px; height: 30px; background: var(--border); }

/* Étiquettes de champ : masquées en desktop, révélées en mobile (voir @media) */
.ts-flabel { display: none; }

/* Une section par mission (P0-2). L'en-tête porte le nom de l'entreprise, le
   sous-total, et le report du lundi — ce dernier est propre à la mission :
   recopier le lundi d'un chantier sur les jours d'un autre inventerait des
   heures. */
.ts-mission + .ts-mission { margin-top: 16px; }
.ts-mission .card-header { flex-wrap: wrap; row-gap: 8px; }

@media (max-width: 860px) {
    /* Grille de pointage : chaque jour devient une carte lisible au doigt */
    .ts-head { display: none; }
    .ts-row {
        grid-template-columns: 1fr 1fr;
        column-gap: 12px; row-gap: 12px;
        border: 1px solid var(--border); background: #fff;
        padding: 14px; margin-top: 10px;
    }
    .ts-row.active { background: #f8fbff; border-color: #cfe0ff; }
    .ts-row .ts-day {
        grid-column: 1 / -1;
        padding-bottom: 10px; border-bottom: 1px solid var(--border);
    }
    .ts-day input[type=checkbox] { width: 22px; height: 22px; }
    /* étiquette du champ (masquée en desktop, révélée en mobile) */
    .ts-flabel {
        display: block; font-size: 11px; font-weight: 600; color: var(--muted);
        text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px;
    }
    .ts-cell.wide { grid-column: 1 / -1; }
    /* champs plein largeur + hauteur tactile ; 16px évite le zoom auto iOS */
    .ts-row select, .ts-row input[type=text] {
        width: 100%; font-size: 16px; padding: 12px 11px; border-radius: 9px;
    }
    .ts-hours, .ts-status { justify-content: flex-start; text-align: left; align-items: flex-start; }
    .ts-hours { font-size: 18px; }
    /* barre d'outils : sélection client + copie empilées et pleines */
    .ts-toolbar { flex-direction: column; align-items: stretch; }
    .ts-toolbar .client-pick { min-width: 0; }
    .ts-toolbar > .btn { width: 100%; justify-content: center; }
    /* En-tête de mission : le report du lundi passe sous le titre et prend la
       largeur. Laissé sur la même ligne, il dépassait de l'écran à 390 px —
       la moitié droite du libellé était hors cadre, et le bouton coupé. */
    .ts-mission .card-header > div:last-child {
        flex-direction: column; align-items: stretch; width: 100%; gap: 8px;
    }
    .ts-mission .card-header .btn { width: 100%; justify-content: center; }
}

/* ─── Poste rows (fiche client) ─────────────────────────── */
.poste-card {
    border: 1px solid var(--border); border-radius: 12px;
    padding: 16px; margin-bottom: 14px; background: #fbfcfe;
    position: relative;
}
.poste-card .poste-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.poste-card .poste-num {
    width: 24px; height: 24px; border-radius: 7px; background: var(--brand-soft);
    color: var(--brand); font-weight: 700; font-size: 12px;
    display: grid; place-items: center; flex-shrink: 0;
}
.poste-remove {
    margin-left: auto; background: #fff; border: 1px solid var(--border);
    color: var(--red); width: 30px; height: 30px; border-radius: 8px;
    cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center;
}
.poste-remove:hover { background: var(--red-soft); border-color: #fca5a5; }
.section-note { font-size: 12.5px; color: var(--muted); margin: -6px 0 16px; }
.field-hint { font-size: 11.5px; color: var(--muted); font-weight: 400; }

/* ─── Profil candidat (vue client) ──────────────────────── */
.cprofil-head { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.cprofil-head .cp-photo {
    width: 96px; height: 112px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg,#e2e8f0,#cbd5e1); color: #64748b;
    display: grid; place-items: center; font-size: 34px; font-weight: 800;
    background-size: cover; background-position: center; overflow: hidden; border: 1px solid var(--border);
}
.cprofil-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
.cprofil-head .cp-poste { color: var(--brand); font-weight: 700; font-size: 15px; text-transform: uppercase; margin-top: 2px; }
.cprofil-head .cp-exp { color: var(--muted); font-size: 13px; margin-top: 3px; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pill { background: var(--brand-soft); color: var(--brand); padding: 4px 11px; border-radius: 20px; font-size: 12.5px; font-weight: 600; }
.plist { list-style: none; }
.plist li { position: relative; padding-left: 17px; margin-bottom: 7px; font-size: 13.5px; color: #33415a; line-height: 1.45; }
.plist li:last-child { margin-bottom: 0; }
.plist li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.plist li b { color: var(--text); }
.col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .col-2 { grid-template-columns: 1fr; } }

/* ─── Tiroir de filtres ─────────────────────────────────── */
.drawer-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.45);
    z-index: 70; opacity: 0; pointer-events: none; transition: opacity .2s;
}
body.filters-open .drawer-overlay { opacity: 1; pointer-events: auto; }
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 90vw;
    background: #fff; z-index: 71; box-shadow: -8px 0 40px rgba(15,23,42,.18);
    transform: translateX(100%); transition: transform .25s ease;
    display: flex; flex-direction: column;
}
body.filters-open .drawer { transform: none; }
.drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.drawer-head h2 { font-size: 16px; font-weight: 700; }
.drawer-close { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 22px; line-height: 1; }
.drawer-body { padding: 20px; overflow-y: auto; flex: 1; }
.drawer-foot { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
.filter-count {
    background: #fff; color: var(--brand); border-radius: 20px; font-size: 11px;
    font-weight: 700; padding: 1px 7px; margin-left: 4px;
}

/* ─── Dashboards de rôle ────────────────────────────────── */
.hero {
    background: linear-gradient(135deg, #1e293b, #0f172a); color: #fff;
    border-radius: var(--radius); padding: 26px 28px; margin-bottom: 22px;
}
.hero h2 { font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.hero p { color: #cbd5e1; font-size: 13.5px; margin-top: 4px; }
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.module {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 6px;
}
.module .m-ico {
    width: 42px; height: 42px; border-radius: 11px; background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center; margin-bottom: 6px;
}
.module .m-ico svg { width: 21px; height: 21px; }
.module h3 { font-size: 15px; font-weight: 700; }
.module p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 860px) { .modules { grid-template-columns: 1fr; } }

/* ─── Calendrier mensuel (pointages) ────────────────────── */
.profile-section { margin-bottom: 22px; }
.profile-section > summary {
    cursor: pointer; padding: 18px; border: 1px solid var(--border);
    border-radius: 12px; background: #fff; font-weight: 600;
}
.profile-section[open] > summary { margin-bottom: 12px; }
.cal-weekdays {
    display: grid; grid-template-columns: 172px repeat(7, 1fr);
    gap: 8px; padding: 0 6px 8px; margin-top: 4px;
}
.cal-weekdays > div {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); font-weight: 600; text-align: center;
}
.cal-weekdays > div:first-child { text-align: left; }
.cal-week {
    display: grid; grid-template-columns: 172px repeat(7, 1fr);
    gap: 8px; padding: 8px 6px; border-radius: 12px;
    transition: background .12s; margin-bottom: 2px;
}
.cal-week:hover { background: #f4f8ff; }
.cal-rail {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: 6px 12px; border-radius: 10px; background: #f8fafc;
    border: 1px solid var(--border);
}
.cal-rail .r-sem { font-weight: 800; font-size: 13.5px; letter-spacing: -.2px; }
.cal-rail .r-total { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-week:hover .cal-rail { border-color: #bfdbfe; }

.cal-day {
    min-height: 62px; border-radius: 10px; border: 1px solid var(--border);
    background: #fff; padding: 7px 9px; display: flex; flex-direction: column;
    position: relative;
}
.cal-day .d-num { font-size: 12.5px; font-weight: 600; color: #334155; }
.cal-day .d-h { margin-top: auto; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cal-day.out { background: #fafbfc; }
.cal-day.out .d-num { color: #cbd5e1; }
.cal-day.weekend { background: #f8fafc; }
.cal-day.today { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.cal-day .dot {
    position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
}
.cal-day .dot.valide { background: var(--green); }
.cal-day .dot.en_attente { background: var(--amber); }
.cal-day .dot.refuse { background: var(--red); }
.cal-day .dot.modifie { background: var(--amber); }
.cal-day .d-h.valide { color: var(--green); }
.cal-day .d-h.en_attente { color: var(--amber); }
.cal-day .d-h.refuse { color: var(--red); }

.cal-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cal-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

@media (max-width: 860px) {
    .cal-weekdays { display: none; }
    .cal-week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 8px 0; }
    .cal-rail { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
    .cal-day { align-items: center; min-height: 66px; padding: 5px 1px; border-radius: 7px; }
    .cal-day .d-num { text-align: center; }
    .cal-day .d-num::before { content: attr(data-weekday); display: block; color: var(--muted); font-size: 10px; font-weight: 600; }
    .cal-day .d-h { font-size: 10px; }
    .cal-day .dot { top: auto; bottom: 2px; right: 2px; width: 4px; height: 4px; }
}

/* ─── Rapports & graphiques ─────────────────────────────── */
.chart-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
@media (max-width: 860px) { .chart-grid { grid-template-columns: 1fr; } }

/* Bar chart (6 mois) */
.barchart { display: flex; align-items: flex-end; gap: 14px; height: 200px; padding: 6px 4px 0; }
.barchart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.barchart .bar {
    width: 100%; max-width: 46px; border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, var(--brand), var(--brand-600));
    min-height: 3px; transition: height .3s; position: relative;
}
.barchart .bar-val { font-size: 11px; font-weight: 700; color: var(--text); }
.barchart .bar-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: capitalize; }

/* Donut */
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.donut { transform: rotate(-90deg); flex-shrink: 0; }
.donut-center { font-size: 22px; font-weight: 800; fill: var(--text); }
.donut-legend { display: flex; flex-direction: column; gap: 9px; }
.donut-legend .lg { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.donut-legend .lg i { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.donut-legend .lg b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Barres horizontales (top) */
.hbar { margin-bottom: 12px; }
.hbar:last-child { margin-bottom: 0; }
.hbar .hb-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.hbar .hb-top .hb-nom { font-weight: 600; }
.hbar .hb-top .hb-val { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.hbar .hb-track { height: 9px; background: var(--brand-soft); border-radius: 6px; overflow: hidden; }
.hbar .hb-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--brand), var(--brand-600)); }

/* ─── Personnalisation (logo & thèmes) ──────────────────── */
/* Les logos conservent leurs proportions sans cadre décoratif. */
.brand-logo {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
    display: grid; place-items: center;
}
.brand-logo img {
    width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}
.sidebar-logo {
    width: 40px; height: 40px; border-radius: 7px;
    padding: 3px; border: 1px solid #e2e8f0;
    background: #f8fafc !important;
}

/* ─── Studio de marque ─────────────────────────────────── */
.brand-studio { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(340px,.8fr); gap: 22px; align-items: start; --preview-brand: var(--brand); }
.brand-editor, .brand-preview-panel { background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
.brand-section { padding: 26px 28px; }
.brand-section + .brand-section { border-top: 1px solid var(--border); }
.brand-section-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; }
.brand-section-head h2 { font-size: 15px; letter-spacing: 0; line-height: 1.3; }
.brand-section-head p { color: var(--muted); font-size: 12px; margin-top: 3px; }
.section-index { color: var(--brand); font-size: 10px; line-height: 20px; font-weight: 800; flex: 0 0 22px; }
.asset-list-premium { border-top: 1px solid var(--border); }
.asset-premium { display: grid; grid-template-columns: 124px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 14px 0; }
.asset-premium + .asset-premium { border-top: 1px solid var(--border); }
.asset-canvas { background: #f8fafc; border: 1px solid var(--border); border-radius: 7px; display: grid; place-items: center; overflow: hidden; color: var(--brand); }
.asset-canvas-wide { width: 124px; height: 64px; padding: 5px; }
.asset-canvas-square { width: 58px; height: 58px; padding: 5px; margin-left: 33px; }
.asset-canvas img { width: auto; height: auto; max-width: 100%; object-fit: contain; display: block; }
.asset-canvas-wide img { max-height: 54px; }
.asset-canvas-square img { max-height: 46px; }
.asset-canvas b { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-copy { min-width: 0; }
.asset-copy b, .asset-copy span, .asset-copy small { display: block; }
.asset-copy b { font-size: 13px; color: var(--text); }
.asset-copy span { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.asset-copy small { font-size: 10.5px; color: #94a3b8; margin-top: 5px; }
.asset-controls { display: flex; gap: 5px; align-items: center; }
.asset-controls form { display: flex; }
.icon-action { width: 36px; height: 36px; border-radius: 7px; border: 1px solid var(--border); background: #fff; color: #64748b; display: grid; place-items: center; cursor: pointer; transition: background .15s,color .15s,border-color .15s; }
.icon-action:hover { color: var(--brand); border-color: #cbd5e1; background: #f8fafc; }
.icon-action.danger { color: #94a3b8; }
.icon-action.danger:hover { color: var(--red); border-color: #fecaca; background: var(--red-soft); }
.icon-action svg { width: 17px; height: 17px; }
.brand-color-layout { display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.brand-color-field { display: flex; align-items: center; gap: 10px; }
.brand-color-field input { width: 46px; height: 46px; padding: 3px; border: 1px solid var(--border); border-radius: 7px; background: #fff; cursor: pointer; }
.brand-color-field label, .brand-color-field b { display: block; }
.brand-color-field label { font-size: 11px; color: var(--muted); }
.brand-color-field b { font-size: 12px; margin-top: 1px; text-transform: uppercase; }
.premium-swatches { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.premium-swatches button { width: 25px; height: 25px; border-radius: 6px; border: 2px solid #fff; outline: 1px solid var(--border); background: var(--swatch); cursor: pointer; }
.premium-swatches button:hover { outline-color: #94a3b8; transform: translateY(-1px); }
.theme-premium { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.theme-premium label { cursor: pointer; }
.theme-premium input { position: absolute; opacity: 0; pointer-events: none; }
.theme-premium label > span { width: 68px; height: 42px; padding: 8px; border-radius: 7px; border: 2px solid transparent; background: var(--theme-bg); display: block; transition: border-color .15s,box-shadow .15s; }
.theme-premium label > span i { display: block; width: 22px; height: 4px; border-radius: 2px; background: rgba(148,163,184,.5); }
.theme-premium input:checked + span { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.theme-premium small { display: block; color: var(--muted); font-size: 10px; text-align: center; margin-top: 5px; }
.brand-save { border-top: 1px solid var(--border); padding: 18px 28px; background: #fbfcfe; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-save b, .brand-save span { display: block; }
.brand-save b { font-size: 12px; }
.brand-save span { color: var(--muted); font-size: 10.5px; margin-top: 2px; }

.brand-preview-panel { position: sticky; top: 100px; }
.preview-toolbar { min-height: 62px; padding: 13px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preview-toolbar > div:first-child { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px #d1fae5; }
.preview-tabs { display: flex; align-items: center; padding: 3px; background: #f1f5f9; border-radius: 7px; }
.preview-tabs button { border: 0; background: transparent; color: #64748b; padding: 6px 8px; border-radius: 5px; font: 600 10px/1 var(--police); cursor: pointer; }
.preview-tabs button.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.preview-stage { display: none; padding: 16px; background: #f8fafc; min-height: 432px; }
.preview-stage.active { display: block; }
.preview-note { border-top: 1px solid var(--border); color: #94a3b8; font-size: 10px; padding: 11px 16px; }

.mini-app { height: 400px; background: #fff; border: 1px solid #dfe4eb; border-radius: 7px; overflow: hidden; display: grid; grid-template-columns: 92px 1fr; box-shadow: 0 12px 24px rgba(15,23,42,.08); }
.mini-sidebar { background: var(--sidebar); padding: 15px 10px; transition: background .2s; }
.mini-brand { display: flex; gap: 7px; align-items: center; min-height: 52px; padding: 10px; margin: -15px -10px 16px; background: #fff; border-bottom: 1px solid #e5e9f0; }
.mini-mark { width: 24px; height: 24px; flex: 0 0 24px; padding: 2px; display: grid; place-items: center; color: var(--preview-brand); background: #f8fafc; border: 1px solid #e5e9f0; font-size: 7px; font-weight: 800; overflow: hidden; border-radius: 4px; }
.mini-mark img { width: 100%; height: 100%; object-fit: contain; }
.mini-brand > div:last-child { min-width: 0; }
.mini-brand b, .mini-brand span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-brand b { color: #0f172a; font-size: 7px; }
.mini-brand span { color: #64748b; font-size: 4.5px; margin-top: 2px; }
.mini-sidebar.light .mini-brand b { color: #0f172a; }
.mini-sidebar.light .mini-brand span { color: #64748b; }
.mini-sidebar.light .mini-brand { border-color: #e5e9f0; }
.mini-sidebar.light .mini-nav { background: #f1f5f9; }
.mini-nav { display: block; width: 100%; height: 20px; border-radius: 4px; margin-bottom: 6px; background: rgba(148,163,184,.08); }
.mini-nav.active { background: color-mix(in srgb,var(--preview-brand) 25%,transparent); border-left: 2px solid var(--preview-brand); }
.mini-nav.short { width: 72%; }
.mini-main { min-width: 0; background: #f7f8fb; }
.mini-top { height: 45px; background: #fff; border-bottom: 1px solid #e5e9f0; }
.mini-content { padding: 22px 18px; }
.mini-heading { width: 45%; height: 10px; background: #cbd5e1; border-radius: 3px; margin-bottom: 18px; }
.mini-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.mini-stats span { height: 52px; background: #fff; border: 1px solid #e5e9f0; border-radius: 5px; box-shadow: 0 2px 6px rgba(15,23,42,.03); }
.mini-table { margin-top: 12px; background: #fff; border: 1px solid #e5e9f0; border-radius: 5px; padding: 11px; }
.mini-table i { display: block; height: 7px; border-bottom: 1px solid #eef1f5; margin-bottom: 11px; }
.mini-table i:last-child { width: 68%; }

.mini-login { height: 400px; border: 1px solid #dfe4eb; border-radius: 7px; background: #eef2f7; display: grid; place-items: center; }
.mini-login-card { width: 72%; background: #fff; border: 1px solid #e5e9f0; border-radius: 8px; padding: 28px 22px; text-align: center; box-shadow: 0 12px 24px rgba(15,23,42,.08); }
.mini-login-card img { width: 110px; height: 42px; object-fit: contain; margin-bottom: 10px; }
.mini-login-card > b, .mini-login-card > span { display: block; }
.mini-login-card > b { font-size: 12px; }
.mini-login-card > span { color: #94a3b8; font-size: 7px; margin: 3px 0 14px; }
.mini-login-card i { display: block; height: 27px; border: 1px solid #e5e9f0; border-radius: 5px; margin: 7px 0; }
.mini-login-card .mini-login-button { display: flex; width: 100%; height: 28px; border-radius: 5px; background: var(--preview-brand); color: #fff; font-size: 8px; font-weight: 700; margin-top: 4px; align-items: center; justify-content: center; }

.mini-doc { min-height: 400px; background: #fff; border: 1px solid #dfe4eb; border-top: 3px solid var(--preview-brand); border-radius: 3px; padding: 22px; box-shadow: 0 12px 24px rgba(15,23,42,.08); }
.mini-doc-head { height: 48px; margin: -22px -22px 22px; padding: 9px 14px; background: #fff; border-bottom: 1px solid #e5e9f0; display: flex; align-items: center; justify-content: space-between; color: var(--preview-brand); font-size: 8px; font-weight: 700; }
.mini-doc-head img { width: auto; height: auto; max-width: 78px; max-height: 28px; object-fit: contain; }
.mini-doc h4 { font-size: 12px; letter-spacing: 0; margin-bottom: 17px; }
.mini-doc-grid { display: grid; grid-template-columns: 34% 1fr; gap: 18px; }
.mini-doc-grid aside { min-height: 245px; padding: 12px; background: #f1f5f9; }
.mini-doc-grid i { display: block; height: 5px; background: #dbe2ea; border-radius: 2px; margin: 8px 0; }
.mini-doc-grid main b { display: block; color: var(--preview-brand); font-size: 7px; margin: 12px 0 7px; }
.mini-doc-grid main b:first-child { margin-top: 0; }

/* ─── Photo de profil ───────────────────────────────────── */
.photo-widget { display: flex; align-items: center; gap: 20px; }
.photo-preview {
    width: 92px; height: 92px; border-radius: 20px; flex-shrink: 0;
    background: linear-gradient(135deg,#e2e8f0,#cbd5e1); color: #64748b;
    display: grid; place-items: center; font-size: 30px; font-weight: 800;
    background-size: cover; background-position: center; overflow: hidden;
    border: 1px solid var(--border);
}
.photo-actions .field-hint { display: block; margin-top: 6px; }
.file-input { position: relative; overflow: hidden; display: inline-flex; }
.file-input input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

/* ─── Documents ─────────────────────────────────────────── */
.doc-cat { margin-bottom: 22px; }
.doc-cat-title {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
    color: #334155; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .03em;
}
.doc-cat-title .count {
    background: var(--brand-soft); color: var(--brand); font-size: 11px;
    padding: 1px 8px; border-radius: 20px; font-weight: 700;
}
.doc-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border: 1px solid var(--border); border-radius: 11px;
    margin-bottom: 8px; background: #fff;
}
.doc-item:hover { border-color: #cbd5e1; }
.doc-ico {
    width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
    background: var(--brand-soft); color: var(--brand); display: grid; place-items: center;
}
.doc-ico svg { width: 19px; height: 19px; }
.doc-meta { min-width: 0; flex: 1; }
.doc-meta .name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta .sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.doc-item .actions { display: flex; gap: 6px; flex-shrink: 0; }
.upload-box {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    padding: 16px; background: #fbfcfe; border: 1px dashed var(--border); border-radius: 12px;
}
.upload-box .form-group { margin-bottom: 0; }

/* ─── Cockpit commercial KAM ───────────────────────────── */
.text-link { color: var(--brand-700); font-size: 12.5px; font-weight: 700; }
.text-link:hover { text-decoration: underline; }
.kam-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.kam-kpi { min-width: 0; padding: 16px 17px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: var(--shadow-sm); }
.kam-kpi span, .kam-kpi small { display: block; color: var(--muted); }
.kam-kpi span { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.kam-kpi strong { display: block; margin: 6px 0 3px; font-size: 23px; line-height: 1.1; }
.kam-kpi small { font-size: 11px; }
a.kam-kpi:hover { border-color: #cbd5e1; box-shadow: var(--shadow); }
/* UI-0A : un compteur qui appelle une décision se distingue de ceux qui ne font
   que mesurer. Le focus reste visible : ces KPI sont devenus des liens. */
.kam-kpi-attention strong { color: #b45309; }
a.kam-kpi:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.kam-atone { color: var(--muted); }
.kam-dashboard-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; }
.kam-action-list { padding: 4px 0; }
.kam-action-row { display: grid; grid-template-columns: 10px minmax(0,1fr) auto 18px; align-items: center; gap: 11px; min-height: 48px; padding: 8px 20px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.kam-action-row:last-child { border-bottom: 0; }
.kam-action-row:hover { background: #f8fafc; }
.kam-action-row strong { font-size: 14px; }
.kam-action-row svg { width: 16px; color: #94a3b8; }
.kam-action-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.kam-action-dot.amber { background: var(--amber); }
.kam-action-dot.blue { background: var(--brand); }
.kam-action-dot.red { background: var(--red); }
.kam-pipeline { display: grid; grid-template-columns: repeat(4,1fr); min-height: 132px; }
.kam-pipeline-step { position: relative; padding: 25px 16px; border-right: 1px solid var(--border); }
.kam-pipeline-step:last-child { border-right: 0; }
.kam-pipeline-step::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 18px; height: 4px; border-radius: 2px; background: #cbd5e1; }
.kam-pipeline-step.en_discussion::after { background: var(--amber); }
.kam-pipeline-step.offre_envoyee::after { background: var(--brand); }
.kam-pipeline-step.gagne::after { background: var(--green); }
.kam-pipeline-step.en_cours::after { background: var(--brand); }
.kam-pipeline-step.cloturee::after { background: var(--green); }
.kam-pipeline-step span { display: block; min-height: 34px; color: var(--muted); font-size: 11px; }
.kam-pipeline-step strong { font-size: 24px; }
.kam-portfolio-head, .kam-portfolio-row { display: grid; grid-template-columns: minmax(220px,2fr) .75fr .65fr .8fr .9fr 34px; align-items: center; gap: 12px; }
.kam-portfolio-head { padding: 9px 20px; color: var(--muted); background: #fbfcfe; border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.kam-portfolio-row { min-height: 68px; padding: 10px 20px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.kam-portfolio-row:last-child { border-bottom: 0; }
.kam-portfolio-row:hover { background: #fbfcfe; }
.kam-client-cell strong, .kam-client-cell span, .kam-portfolio-row small { display: block; }
.kam-client-cell span, .kam-portfolio-row small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.mobile-label { display: none; }
.completion { display: inline-flex; min-width: 48px; justify-content: center; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.completion.good { color: #047857; background: #d1fae5; }
.completion.medium { color: #a16207; background: #fef3c7; }
.completion.low { color: #b91c1c; background: #fee2e2; }
.kam-empty-portfolio { padding: 42px 24px; text-align: center; }
.kam-empty-portfolio h3 { font-size: 15px; }
.kam-empty-portfolio p { margin: 6px auto 16px; color: var(--muted); font-size: 12.5px; }
.kam-empty-portfolio > div { display: flex; justify-content: center; gap: 8px; }

/* ─── Portefeuille clients KAM ──────────────────────────── */
.kam-client-stats { display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 16px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: var(--shadow-sm); }
.kam-client-stats > div { padding: 15px 18px; border-right: 1px solid var(--border); }
.kam-client-stats > div:last-child { border-right: 0; }
.kam-client-stats span { display: block; color: var(--muted); font-size: 11px; }
.kam-client-stats strong { display: block; margin-top: 3px; font-size: 19px; }
.portfolio-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.segmented { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: #eef2f7; }
.segmented a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 7px 11px; border-radius: 6px; color: #475569; font-size: 12px; font-weight: 600; white-space: nowrap; }
.segmented a.active { color: var(--text); background: #fff; box-shadow: var(--shadow-sm); }
.segmented b { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--amber-soft); color: var(--amber); font-size: 10px; line-height: 19px; text-align: center; }
.portfolio-search { position: relative; width: min(330px,100%); }
.portfolio-search > svg { position: absolute; left: 12px; top: 50%; width: 17px; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.portfolio-search input[type=search] { width: 100%; min-height: 42px; padding: 10px 42px 10px 38px; border: 1px solid var(--border); border-radius: 8px; font: inherit; outline: none; }
.portfolio-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.portfolio-search .icon-btn { position: absolute; right: 5px; top: 5px; }
.portfolio-card { border-radius: 8px; }
.client-list-head, .client-list-row { display: grid; grid-template-columns: minmax(260px,1.7fr) minmax(130px,.85fr) minmax(190px,1.05fr) 85px minmax(160px,auto); align-items: center; gap: 14px; }
.client-list-head { padding: 9px 20px; color: var(--muted); background: #fbfcfe; border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.client-list-row { min-height: 78px; padding: 11px 20px; border-bottom: 1px solid #f1f5f9; }
.client-list-row:last-child { border-bottom: 0; }
.client-list-row:hover { background: #fbfcfe; }
.client-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.client-monogram { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 7px; background: #eef2f7; color: #475569; font-weight: 800; }
.client-identity > div:last-child { min-width: 0; }
.client-identity a, .client-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-identity a { color: var(--brand-700); font-size: 13px; font-weight: 700; }
.client-identity span, .client-owner > span:not(.badge), .client-activity small, .completion-label { color: var(--muted); font-size: 11px; }
.client-activity { display: flex; gap: 11px; flex-wrap: wrap; font-size: 12px; }
.client-activity small { flex-basis: 100%; }
.completion-label { display: block; margin-top: 2px; }
.client-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.client-actions form { margin: 0; }

/* ─── Création client KAM ───────────────────────────────── */
.client-create-layout { display: grid; grid-template-columns: minmax(0,1fr) 245px; align-items: start; gap: 18px; }
.client-create-form .card { border-radius: 8px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.client-create-form .card-header > div { display: flex; align-items: center; gap: 10px; }
.section-index { color: var(--brand); font-size: 10px; font-weight: 800; }
.client-create-primary { grid-template-columns: 2fr 1fr; }
.client-create-three { grid-template-columns: repeat(3,1fr); }
.client-create-address { grid-template-columns: 2fr .7fr; }
.client-create-two { grid-template-columns: repeat(2,1fr); }
.client-create-submit { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 -4px 18px rgba(15,23,42,.08); }
.client-create-submit strong, .client-create-submit span { display: block; }
.client-create-submit strong { font-size: 12.5px; }
.client-create-submit span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.client-create-aside { position: sticky; top: 92px; display: grid; gap: 12px; }
.create-checklist, .prospect-shortcut { border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: var(--shadow-sm); }
.create-checklist { padding: 18px; }
.create-checklist h3 { margin-bottom: 14px; font-size: 13px; }
.create-checklist ol { list-style: none; }
.create-checklist li { display: flex; align-items: center; gap: 9px; min-height: 38px; color: var(--muted); font-size: 11.5px; }
.create-checklist li span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #eef2f7; font-size: 10px; font-weight: 700; }
.create-checklist li.active { color: var(--text); font-weight: 700; }
.create-checklist li.active span { color: #fff; background: var(--brand); }
.prospect-shortcut { padding: 14px 16px; }
.prospect-shortcut strong, .prospect-shortcut span { display: block; }
.prospect-shortcut strong { font-size: 12px; }
.prospect-shortcut span { margin-top: 3px; color: var(--brand-700); font-size: 11px; font-weight: 700; }
.readonly-fieldset { min-width: 0; border: 0; }
.readonly-fieldset:disabled { opacity: .78; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ─── Offres KAM : rémunération, pipeline et médias ─────── */
.offer-main-grid { grid-template-columns: 2fr .7fr .9fr; }
.offer-two-grid { grid-template-columns: 1fr 1fr; }
.offer-three-grid { grid-template-columns: 1fr 1fr 1.35fr; }
.offer-pay-panel {
    margin: 4px 0 20px; padding: 18px; border: 1px solid var(--border);
    border-left: 3px solid var(--brand); border-radius: 8px; background: #f8fafc;
}
.offer-section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.offer-section-title h3 { margin: 0; font-size: 14px; color: var(--text); }
.offer-section-title p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.offer-pay-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.offer-pay-grid .form-group { margin-bottom: 0; }
.pay-estimate { min-width: 190px; text-align: right; }
.pay-estimate small { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.pay-estimate strong { display: block; margin-top: 2px; color: var(--brand-700); font-size: 18px; }
.input-suffix { position: relative; }
.input-suffix input { width: 100%; padding-right: 45px; }
.input-suffix span { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); font-weight: 700; pointer-events: none; }
.offer-list-heading { display: flex; align-items: end; justify-content: space-between; margin: 28px 2px 12px; }
.offer-list-heading h2 { margin: 0; font-size: 17px; }
.offer-list-heading p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.offer-list { display: grid; gap: 14px; }
.offer-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
.offer-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.offer-card-title { min-width: 0; }
.offer-eyebrow { margin-bottom: 3px; color: var(--brand-700); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.offer-card-title h3 { margin: 0; font-size: 18px; }
.offer-meta { display: flex; gap: 0; flex-wrap: wrap; margin-top: 7px; color: var(--muted); font-size: 12px; }
.offer-meta span + span::before { content: '·'; margin: 0 8px; color: #cbd5e1; }
.offer-status-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.offer-status-actions form { margin: 0; }
.danger-text { color: var(--red) !important; }
.offer-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 1px solid var(--border); }
.offer-metric { min-height: 78px; padding: 15px 20px; border-right: 1px solid var(--border); }
.offer-metric:last-child { border-right: 0; }
.offer-metric small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.offer-metric strong { display: block; font-size: 14px; }
.offer-metric span { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.offer-metric-highlight { background: var(--brand-soft); }
.offer-metric-highlight strong { color: var(--brand-700); font-size: 16px; }
.offer-metrics-compact { margin-bottom: 14px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.offer-progress { display: flex; gap: 7px; flex-wrap: wrap; padding: 14px 20px 0; }
.offer-description { padding: 12px 20px 2px; font-size: 13px; color: #475569; }
.offer-description p { margin: 0 0 8px; line-height: 1.55; }
.offer-media { margin-top: 12px; padding: 18px 20px 20px; border-top: 1px solid var(--border); background: #fbfcfe; }
.offer-media-readonly { padding: 16px 0 0; background: transparent; }
.offer-media-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.offer-media-head h4 { margin: 0; font-size: 13px; }
.offer-media-head p { margin: 3px 0 0; font-size: 11.5px; color: var(--muted); }
.offer-media-head > span { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.offer-gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 10px; margin-bottom: 14px; }
.offer-photo { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: #fff; }
.offer-photo > img, .offer-photo > a { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #eef2f7; }
.offer-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.offer-photo figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 9px; }
.offer-photo figcaption div { min-width: 0; }
.offer-photo figcaption b, .offer-photo figcaption span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer-photo figcaption b { font-size: 11px; }
.offer-photo figcaption span { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.icon-btn:hover { background: #fef2f2; }
.icon-btn svg { width: 17px; height: 17px; }
.offer-upload { display: grid; grid-template-columns: 150px minmax(220px,1fr) minmax(230px,1fr) auto; align-items: end; gap: 10px; }
.offer-upload .form-group { min-width: 0; margin-bottom: 0; }
.offer-upload input[type=file] { width: 100%; min-height: 42px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 12px; }
.offer-upload .btn { min-height: 42px; }

/* ─── Tableau de bord : relevés de la semaine close ─────── */
.suivi-semaine { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 18px; color: inherit; text-decoration: none; }
.suivi-semaine.attention { border-left: 4px solid var(--amber); }
.suivi-semaine-titre { display: flex; flex-direction: column; min-width: 190px; }
.suivi-semaine-titre strong { font-size: 15px; }
.suivi-semaine-titre span { font-size: 12.5px; color: var(--muted); }
.suivi-semaine-chiffres { display: flex; gap: 18px; flex-wrap: wrap; flex: 1; font-size: 13px; color: var(--muted); }
.suivi-semaine-chiffres b { color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; }

/* ─── Utilities ─────────────────────────────────────────── */
.strong { font-weight: 700; }
.muted { color: var(--muted); }

/* Bouton menu mobile (masqué sur desktop) */
.hamburger {
    display: none; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 10px;
    background: #fff; border: 1px solid var(--border); color: var(--text);
    align-items: center; justify-content: center; cursor: pointer;
}
.hamburger svg { width: 21px; height: 21px; }
.nav-overlay { display: none; }

/* ─── Responsive : menu tiroir + mise en page mobile ────── */
@media (max-width: 860px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 0 0 50px rgba(15,23,42,.35);
        z-index: 60;
    }
    body.nav-open .sidebar { transform: none; }
    .nav-overlay {
        display: block; position: fixed; inset: 0;
        background: rgba(15,23,42,.45); z-index: 50;
        opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
    .main { margin-left: 0; }
    .hamburger { display: inline-flex; }

    /* Le tiroir doit rester au-dessus du contenu, mais son contenu ne doit
       jamais élargir la page ni produce scroll horizontal. */
    .sidebar { width: min(286px, 86vw); overflow-y: auto; overflow-x: hidden; }
    body.nav-open { overflow: hidden; }
    .topbar { padding: 13px 16px; gap: 12px; }
    .topbar h1 { font-size: 17px; }
    .topbar .subtitle { display: none; }
    .content { padding: 18px 16px 90px; }

    /* Tout formulaire multi-colonnes repasse sur une seule colonne */
    .form-grid { grid-template-columns: 1fr !important; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }

    /* Tables larges : défilement horizontal plutôt que débordement */
    .card > table, .card .card-body > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card > table::-webkit-scrollbar, .card .card-body > table::-webkit-scrollbar { height: 7px; }
    .card > table::-webkit-scrollbar-thumb, .card .card-body > table::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }

    /* Les listes opérationnelles deviennent de vraies fiches tactiles sur téléphone. */
    .mobile-card-table, .mobile-card-table tbody, .mobile-card-table tr, .mobile-card-table td {
        display: block; width: 100%;
    }
    .mobile-card-table { overflow: visible !important; padding: 0 12px 12px; }
    .mobile-card-table thead { display: none; }
    .mobile-card-table tr { margin: 12px 0 0; padding: 13px; border: 1px solid var(--border); border-radius: 7px; background: #fff; }
    .mobile-card-table td { display: grid !important; grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr); gap: 12px; padding: 6px 0; border: 0; text-align: right !important; overflow-wrap: anywhere; }
    .mobile-card-table td::before { content: attr(data-label); color: var(--muted); font-size: 10px; font-weight: 700; text-align: left; text-transform: uppercase; }
    .mobile-card-table td.row-actions { display: flex !important; grid-template-columns: none; justify-content: flex-end; gap: 8px; margin-top: 7px; padding-top: 11px; border-top: 1px solid #eef2f7; }
    .mobile-card-table td.row-actions::before { display: none; }
    .mobile-card-table td.row-actions > div { width: 100%; justify-content: flex-end !important; }
    .mobile-card-table td.row-actions form { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
    .mobile-card-table td.row-actions input[name="nouveau_mdp"] { width: min(100%, 210px) !important; min-height: 42px; }
    .mobile-card-table .btn { min-height: 42px; }
    .candidate-page .candidate-pool-card { order: 1; }
    .candidate-page .candidate-create-card { order: 2; scroll-margin-top: 90px; }

    /* L'equipe est une action frequente sur mobile : lignes en fiches, sans colonnes masquees. */
    .team-table, .team-table tbody, .team-table tr, .team-table td { display: block !important; width: 100%; }
    .team-table { overflow: visible !important; padding: 0 12px 12px; }
    .team-table thead { display: none; }
    .team-table tr { margin: 12px 0 0; padding: 13px; border: 1px solid var(--border); border-radius: 7px; background: #fff; }
    .team-table td { padding: 6px 0; border: 0; text-align: left !important; }
    .team-table td:nth-child(2)::before, .team-table td:nth-child(3)::before { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
    .team-table td:nth-child(2)::before { content: 'Role'; }
    .team-table td:nth-child(3)::before { content: 'E-mail'; }
    .team-table td:last-child { padding-top: 10px; border-top: 1px solid #eef2f7; }
    .team-table td:last-child > div { display: flex !important; justify-content: flex-start !important; }
    .team-table td:last-child form[style] { width: 100%; flex-wrap: wrap; }
    .team-table td:last-child input[name="nouveau_mdp"] { width: min(100%, 210px) !important; }

    /* Barre de transmission empilée */
    .submit-bar { flex-direction: column; align-items: stretch; }
    .submit-bar .recap { justify-content: space-around; }
    .submit-bar .btn { width: 100%; justify-content: center; }
    .topbar-actions { gap: 6px; }
    .topbar-actions .btn { padding: 8px 11px; font-size: 12.5px; }
    .offer-pay-grid, .offer-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .offer-metric:nth-child(2) { border-right: 0; }
    .offer-metric:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .offer-upload { grid-template-columns: 1fr 1fr; }
    .offer-upload-caption { grid-column: span 1; }
    .offer-upload-file { grid-column: 1 / -1; }
    .kam-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .kam-dashboard-grid { grid-template-columns: 1fr; }
    .kam-portfolio-head, .client-list-head { display: none; }
    .kam-portfolio-row { grid-template-columns: 1fr auto auto; gap: 8px 12px; padding: 14px 16px; }
    .kam-client-cell { grid-column: 1 / -1; }
    .kam-portfolio-row .mobile-label { display: inline; color: var(--muted); font-size: 11px; }
    .portfolio-toolbar { align-items: stretch; flex-direction: column; }
    .segmented { align-self: flex-start; max-width: 100%; overflow-x: auto; }
    .portfolio-search { width: 100%; }
    .client-list-row { grid-template-columns: 1fr auto; gap: 10px; padding: 15px 16px; }
    .client-identity { grid-column: 1 / -1; }
    .client-owner { align-self: start; }
    .client-activity { grid-column: 1 / -1; padding: 9px 0; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; }
    .client-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .client-create-layout { grid-template-columns: 1fr; }
    .client-create-aside { position: static; grid-row: 1; grid-template-columns: 1fr 1fr; }
    .create-checklist ol { display: grid; grid-template-columns: repeat(4,1fr); }
    .create-checklist li { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
    .topbar { flex-wrap: wrap; }
    /* La ligne d'actions prend la ligne entière par `flex-basis`, sans largeur
       ni marge à additionner. `width: calc(100% - 52px)` + `margin-left: 52px`
       occupait exactement la largeur du contenu : zéro jeu, donc le moindre
       dépassement d'un enfant sortait de la page. */
    .topbar-actions { flex: 1 1 100%; }
    /* Le vrai coupable : `flex: 1` vaut `flex: 1 1 0%`, et avec `min-width: 0`
       le bouton descendait sous la largeur de son propre texte. `.btn` étant en
       `white-space: nowrap`, le libellé ne se tronquait pas — il débordait, et
       la fiche de lot défilait de 5 px à 390 px. `flex-shrink: 0` l'interdit :
       les boutons s'étirent pour remplir la ligne, jamais en deçà de leur
       libellé ; à deux, ils passent à la ligne plutôt que de couper. */
    .topbar-actions .btn { flex: 1 0 auto; min-width: max-content; justify-content: center; }
    .stat-grid { grid-template-columns: 1fr !important; }
    .stat { min-height: 74px; }
    .card-header { align-items: flex-start; }
    .week-nav { gap: 4px; overflow-x: hidden; flex-wrap: nowrap !important; padding: 8px; }
    .week-nav .week-title { min-width: 0; text-align: center; font-size: 13px; }
    .week-nav .week-btn { min-width: 0; flex: 0 1 auto; padding: 7px 6px; font-size: 11px; white-space: nowrap; }
    .offer-pay-panel { margin-left: -4px; margin-right: -4px; padding: 15px; }
    .offer-section-title { flex-direction: column; gap: 10px; }
    .pay-estimate { min-width: 0; text-align: left; }
    .offer-pay-grid, .offer-metrics { grid-template-columns: 1fr; }
    .offer-card-head { padding: 16px; flex-direction: column; }
    .offer-status-actions { width: 100%; justify-content: space-between; }
    .offer-metric { min-height: 68px; padding: 13px 16px; border-right: 0; border-bottom: 1px solid var(--border); }
    .offer-metric:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .offer-metric:last-child { border-bottom: 0; }
    .offer-progress, .offer-description { padding-left: 16px; padding-right: 16px; }
    .offer-media { padding: 16px; }
    .offer-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .offer-upload { grid-template-columns: 1fr; }
    .offer-upload-file, .offer-upload-caption { grid-column: auto; }
    .offer-upload .btn { width: 100%; justify-content: center; }
    .kam-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
    .kam-kpi { padding: 13px; }
    .kam-kpi strong { font-size: 20px; }
    .kam-kpis .kam-kpi:nth-child(3) { grid-column: 1 / -1; }
    .kam-pipeline { grid-template-columns: 1fr 1fr; }
    .kam-pipeline-step { min-height: 105px; border-bottom: 1px solid var(--border); }
    .kam-pipeline-step:nth-child(2) { border-right: 0; }
    .kam-client-stats { grid-template-columns: 1fr 1fr; }
    .kam-client-stats > div:nth-child(2) { border-right: 0; }
    .kam-client-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .segmented { width: 100%; }
    .segmented a { flex: 1 0 auto; justify-content: center; }
    .client-create-aside { grid-template-columns: 1fr; }
    .create-checklist { display: none; }
    .client-create-primary, .client-create-three, .client-create-address, .client-create-two { grid-template-columns: 1fr; }
    .client-create-submit { align-items: stretch; flex-direction: column; }
    .client-create-submit .btn { width: 100%; justify-content: center; }
}

@media (max-width: 1100px) {
    .brand-studio { grid-template-columns: 1fr; }
    .brand-preview-panel { position: static; }
    .preview-stage { min-height: 390px; }
    .mini-app, .mini-login { height: 360px; }
    .mini-doc { min-height: 360px; }
}

@media (max-width: 560px) {
    .brand-section { padding: 22px 18px; }
    .asset-premium { grid-template-columns: 72px minmax(0,1fr) auto; gap: 10px; }
    .asset-canvas-wide { width: 72px; height: 52px; }
    .asset-canvas-wide img { max-height: 42px; }
    .asset-canvas-square { width: 52px; height: 52px; margin-left: 10px; }
    .asset-copy span { display: none; }
    .asset-copy small { line-height: 1.35; }
    .brand-color-layout { align-items: flex-start; flex-direction: column; }
    .premium-swatches { justify-content: flex-start; }
    .brand-save { padding: 16px 18px; align-items: stretch; flex-direction: column; }
    .brand-save .btn { width: 100%; justify-content: center; }
    .preview-toolbar { align-items: flex-start; flex-direction: column; }
    .preview-tabs { width: 100%; }
    .preview-tabs button { flex: 1; }
    .preview-stage { padding: 10px; min-height: 350px; }
    .mini-app, .mini-login { height: 330px; }
    .mini-doc { min-height: 330px; padding: 17px; }
    .mini-doc-head { margin: -17px -17px 17px; }
}

/* KAM commercial pipeline */
.prospect-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}
.prospect-kpi { min-width: 0; padding: 16px 18px; border-right: 1px solid var(--border); }
.prospect-kpi:last-child { border-right: 0; }
.prospect-kpi > span, .prospect-kpi small { display: block; color: var(--muted); font-size: 11.5px; }
.prospect-kpi strong { display: block; margin: 4px 0 2px; color: var(--ink); font-size: 22px; line-height: 1.15; }
.prospect-kpi.is-alert { box-shadow: inset 3px 0 0 var(--amber); }
.prospect-kpi.is-alert strong { color: #b45309; }
.prospect-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.prospect-filters { display: flex; gap: 5px; min-width: 0; overflow-x: auto; padding: 3px; background: #eaf0f7; border-radius: 8px; scrollbar-width: none; }
.prospect-filters::-webkit-scrollbar { display: none; }
.prospect-filters a { flex: 0 0 auto; padding: 8px 11px; color: #52647e; border-radius: 6px; font-size: 12px; font-weight: 700; text-decoration: none; }
.prospect-filters a b { margin-left: 4px; color: #7b8ba3; }
.prospect-filters a.active { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.prospect-filters a.active b { color: inherit; }
.prospect-create { margin-bottom: 18px; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); }
.prospect-create > summary { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; cursor: pointer; list-style: none; }
.prospect-create > summary::-webkit-details-marker { display: none; }
.prospect-create > summary span, .prospect-create > summary strong, .prospect-create > summary small { display: block; }
.prospect-create > summary strong { color: var(--ink); font-size: 14px; }
.prospect-create > summary small { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.prospect-create > summary svg { width: 18px; height: 18px; transition: transform .2s ease; }
.prospect-create[open] > summary svg { transform: rotate(180deg); }
.prospect-create-form { padding: 0 18px 18px; border-top: 1px solid var(--border); }
.prospect-create-form fieldset { min-width: 0; padding: 17px 0 0; border: 0; }
.prospect-create-form fieldset + fieldset { margin-top: 4px; border-top: 1px solid var(--border); }
.prospect-create-form legend { padding: 0; color: var(--ink); font-size: 12px; font-weight: 800; }
.prospect-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prospect-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prospect-span-2 { grid-column: span 2; }
.prospect-span-full { grid-column: 1 / -1; }
.prospect-form-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 34px; }
.input-suffix span { position: absolute; top: 50%; right: 12px; color: var(--muted); font-size: 12px; transform: translateY(-50%); }
.prospect-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: start; padding-bottom: 8px; }
.prospect-board.is-filtered { grid-template-columns: minmax(0, 1fr); overflow: visible; }
.prospect-column { min-width: 0; background: #edf2f7; border: 1px solid #dce4ee; border-radius: 8px; }
.prospect-column > header { display: flex; align-items: center; justify-content: space-between; min-height: 49px; padding: 0 13px; border-bottom: 1px solid #dce4ee; }
.prospect-column > header div { display: flex; align-items: center; gap: 8px; }
.prospect-column > header h2 { font-size: 12.5px; }
.prospect-column > header b { display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 6px; background: #fff; border: 1px solid #dce4ee; border-radius: 12px; color: #64748b; font-size: 11px; }
.prospect-stage-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.prospect-column-en_discussion .prospect-stage-dot { background: #0ea5e9; }
.prospect-column-offre_envoyee .prospect-stage-dot { background: #f59e0b; }
.prospect-column-gagne .prospect-stage-dot { background: #10b981; }
.prospect-column-perdu .prospect-stage-dot { background: #ef4444; }
.prospect-column-body { display: grid; gap: 10px; padding: 10px; }
.prospect-card { min-width: 0; padding: 13px; background: #fff; border: 1px solid #dce4ee; border-radius: 7px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.prospect-card.is-overdue { border-color: #f2b98f; box-shadow: inset 3px 0 0 #ea580c; }
.prospect-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.prospect-card-head h3 { overflow-wrap: anywhere; color: var(--ink); font-size: 14px; line-height: 1.25; }
.prospect-card-head p { margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.prospect-priority { flex: 0 0 auto; padding: 3px 6px; background: #f1f5f9; border-radius: 4px; color: #64748b; font-size: 9.5px; font-weight: 800; text-transform: uppercase; }
.prospect-priority.priority-haute { background: #fff7ed; color: #c2410c; }
.prospect-priority.priority-urgente { background: #fef2f2; color: #dc2626; }
.prospect-priority.priority-basse { background: #f0fdf4; color: #15803d; }
.prospect-contact { display: grid; gap: 5px; margin: 12px 0; }
.prospect-contact span, .prospect-contact a { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; color: #53637a; font-size: 10.5px; text-decoration: none; }
.prospect-contact svg { flex: 0 0 auto; width: 13px; height: 13px; stroke-width: 1.8; }
.prospect-value-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; border-top: 1px solid #edf1f5; }
.prospect-value-row div:last-child { text-align: right; }
.prospect-value-row span, .prospect-value-row strong { display: block; }
.prospect-value-row span { color: var(--muted); font-size: 9.5px; text-transform: uppercase; }
.prospect-value-row strong { margin-top: 2px; font-size: 12px; }
.prospect-progress { height: 3px; margin-top: 7px; overflow: hidden; background: #e6ebf1; border-radius: 3px; }
.prospect-progress span { display: block; height: 100%; max-width: 100%; background: var(--brand); }
.prospect-offer { margin-top: 12px; color: #475569; font-size: 11px; line-height: 1.45; }
.prospect-offer span { display: block; margin-bottom: 2px; color: var(--muted); font-size: 9.5px; font-weight: 800; text-transform: uppercase; }
.prospect-next-action { display: flex; gap: 8px; margin-top: 12px; padding: 9px; background: #f6f8fb; border-radius: 6px; }
.prospect-next-action > svg { flex: 0 0 auto; width: 15px; height: 15px; color: #64748b; stroke-width: 1.8; }
.prospect-next-action div, .prospect-next-action span, .prospect-next-action strong, .prospect-next-action small { display: block; min-width: 0; }
.prospect-next-action span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.prospect-next-action strong { margin: 2px 0; overflow-wrap: anywhere; color: #334155; font-size: 10.5px; }
.prospect-next-action small { color: #7b8ba3; font-size: 9.5px; }
.prospect-next-action.overdue { background: #fff7ed; }
.prospect-next-action.overdue svg, .prospect-next-action.overdue small { color: #c2410c; }
.prospect-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; color: #8996a9; font-size: 9px; }
.prospect-meta span { overflow-wrap: anywhere; }
.prospect-edit-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 11px; padding: 10px 0 0; background: transparent; border: 0; border-top: 1px solid #edf1f5; color: var(--brand); cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 800; text-align: left; }
.prospect-edit-trigger svg { width: 14px; height: 14px; }
.prospect-dialog { width: min(680px, calc(100vw - 32px)); max-height: min(820px, calc(100vh - 32px)); margin: auto; padding: 0; overflow: hidden; background: #fff; border: 0; border-radius: 8px; box-shadow: 0 24px 60px rgba(15,23,42,.28); color: var(--ink); }
.prospect-dialog::backdrop { background: rgba(15,23,42,.52); backdrop-filter: blur(2px); }
.prospect-dialog[open] { display: flex; flex-direction: column; }
.prospect-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.prospect-dialog-head span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.prospect-dialog-head h2 { font-size: 17px; }
.prospect-dialog-close { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; background: #f5f7fa; border: 1px solid var(--border); border-radius: 6px; color: #64748b; cursor: pointer; }
.prospect-dialog-close svg { width: 17px; height: 17px; }
.prospect-dialog-form { min-height: 0; overflow-y: auto; padding: 18px 20px 20px; }
.prospect-edit-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.prospect-dialog .form-group { min-width: 0; margin: 0; }
.prospect-dialog label { font-size: 11px; }
.prospect-dialog input, .prospect-dialog select, .prospect-dialog textarea { width: 100%; min-width: 0; max-width: 100%; padding: 9px 10px; font-size: 12px; }
.prospect-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.prospect-card-action { width: 100%; justify-content: center; margin-top: 10px; }
.prospect-warning { margin-top: 9px; color: #b45309; font-size: 10px; }
.prospect-empty { display: grid; place-items: center; min-height: 112px; padding: 18px; border: 1px dashed #cbd5e1; border-radius: 7px; color: #64748b; text-align: center; }
.prospect-empty strong, .prospect-empty span { display: block; }
.prospect-empty strong { font-size: 11px; }
.prospect-empty span { margin-top: 3px; font-size: 9.5px; }

@media (max-width: 1280px) {
    .prospect-kpis { grid-template-columns: repeat(2, 1fr); }
    .prospect-kpi:nth-child(2) { border-right: 0; }
    .prospect-kpi:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .prospect-board { grid-template-columns: repeat(5, minmax(250px, 1fr)); overflow-x: auto; }
}
@media (min-width: 721px) and (max-width: 860px) {
    .prospect-dialog .prospect-edit-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 720px) {
    .prospect-kpis { grid-template-columns: 1fr 1fr; }
    .prospect-kpi { padding: 13px; }
    .prospect-kpi strong { font-size: 18px; }
    .prospect-toolbar { align-items: stretch; flex-direction: column-reverse; }
    .prospect-toolbar > .btn { width: 100%; justify-content: center; }
    .prospect-filters { width: 100%; }
    .prospect-create-form { padding: 0 13px 14px; }
    .prospect-grid-3, .prospect-grid-4 { grid-template-columns: 1fr !important; }
    .prospect-span-2, .prospect-span-full { grid-column: auto; }
    .prospect-board, .prospect-board.is-filtered { grid-template-columns: 1fr; overflow: visible; }
    .prospect-column { min-width: 0; }
    .prospect-column-body { padding: 8px; }
    .prospect-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
    .prospect-dialog-head { padding: 14px; }
    .prospect-dialog-form { padding: 14px; }
    .prospect-edit-grid { grid-template-columns: 1fr !important; }
    .prospect-dialog .prospect-span-full { grid-column: auto; }
    .prospect-dialog-actions { align-items: stretch; flex-direction: column-reverse; }
    .prospect-dialog-actions .btn { width: 100%; justify-content: center; }
}

/* ─── Afficher / masquer le mot de passe (bouton œil) ─────── */
.pwd-wrap { position: relative; display: block; }
.pwd-wrap input { width: 100%; padding-right: 42px; }
.pwd-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: #94a3b8;
    padding: 6px; display: inline-flex; align-items: center; border-radius: 8px;
}
.pwd-eye:hover { color: #334155; background: #f1f5f9; }
.pwd-eye svg { width: 18px; height: 18px; }

/* Journal du dossier candidat (timeline) */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-item { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--border, #e2e8f0); }
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-dot { position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand, #2563eb); box-shadow: 0 0 0 3px var(--brand-soft, #eff4ff); }
.timeline-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.timeline-date { font-size: 12px; color: var(--muted, #64748b); }
.timeline-detail { font-size: 13px; color: var(--muted, #475569); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   GATE 0 — feuille d'heures mobile, boîtes de dialogue, valeurs figées

   Trois défauts corrigés ici :
     - la feuille de l'intérimaire dépassait 4 000 px de haut sur un 390 px :
       tout était déplié en permanence ;
     - la barre collante de total masquait les champs pendant le défilement,
       parce qu'elle était semi-transparente et qu'aucune place ne lui était
       réservée en bas de page ;
     - le refus et l'ajustement se saisissaient au milieu du contenu, sans
       obliger à motiver.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sur grand écran, .ts-fields s'efface : la ligne reste le tableau à 7 colonnes
   déjà en place. Le repli n'existe qu'en mobile. */
.ts-fields { display: contents; }
.ts-fixe { font-size: 13px; font-weight: 600; color: #475569; }
.ts-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 0; background: none; border: 0; font: inherit; color: inherit;
    text-align: left; cursor: default;
}
.ts-chevron { display: none; }
.submit-actions { display: flex; align-items: center; gap: 10px; }

/* Boîtes de dialogue : le motif se saisit là, et le bouton d'envoi est dans le
   même formulaire — impossible de refuser sans écrire pourquoi. */
.dlg {
    padding: 0; border: 0; border-radius: 14px; max-width: 460px; width: calc(100% - 32px);
    box-shadow: 0 24px 60px rgba(16,24,40,.24);
}
.dlg::backdrop { background: rgba(15,23,42,.45); }
.dlg-corps { padding: 22px; }
.dlg-corps h2 { font-size: 17px; margin: 0 0 6px; }
.dlg-corps .muted { font-size: 13.5px; line-height: 1.55; margin: 0 0 16px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

@media (max-width: 860px) {
    /* Une seule journée ouverte à la fois. */
    .ts-fields {
        display: grid; grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 12px;
    }
    .ts-row:not(.is-open) .ts-fields { display: none; }
    .ts-row .ts-day { padding-bottom: 0; border-bottom: 0; }
    .ts-row.is-open .ts-day { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
    .ts-toggle { justify-content: space-between; cursor: pointer; min-height: 44px; }
    .ts-chevron {
        display: block; width: 9px; height: 9px; margin-right: 2px;
        border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
        transform: rotate(45deg); transition: transform .15s;
    }
    .ts-row.is-open .ts-chevron { transform: rotate(-135deg) translate(-2px,-2px); }

    /* La barre reste atteignable sans recouvrir la saisie : fond opaque, place
       réservée sous le formulaire, et le défilement au focus s'arrête au-dessus. */
    /* --barre-h est mesuree en JS (base.html) : la barre grandit quand les
       actions s'empilent sous 380 px, une valeur en dur laisserait un champ
       dessous. Le repli couvre le cas ou le script n'a pas encore tourne. */
    html { scroll-padding-bottom: calc(var(--barre-h, 150px) + 16px); }
    .submit-bar {
        background: #fff; border-radius: 14px 14px 0 0;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .submit-actions { flex-direction: column-reverse; align-items: stretch; width: 100%; }
    .submit-actions .btn { width: 100%; justify-content: center; }
    #form-semaine, #form-valider { padding-bottom: 6px; }
    .content { padding-bottom: calc(var(--barre-h, 150px) + 28px); }
    .ts-row { scroll-margin-bottom: calc(var(--barre-h, 150px) + 16px); }
}

/* Écrans très étroits (360 px) : rien ne doit déborder ni se tasser. */
@media (max-width: 380px) {
    .ts-fields { grid-template-columns: 1fr; }
    .submit-bar .recap { gap: 14px; flex-wrap: wrap; }
    .submit-bar .recap .val { font-size: 18px; }
    .dlg { width: calc(100% - 20px); }
    .dlg-corps { padding: 18px; }
    .dlg-actions { flex-direction: column-reverse; }
    .dlg-actions .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GATE 0.2 — file des changements sensibles, tableaux comptables, photo

   Trois écrans se lisaient encore en tableau large : la décision, la
   navigation mensuelle et les actions de la photo se retrouvaient hors de
   l'écran sur un téléphone. Une commande qu'il faut aller chercher derrière
   un défilement horizontal n'existe pas pour celui qui l'utilise debout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Décision d'une demande sensible. Le champ de motif s'étire au lieu
   d'imposer une largeur fixe : c'est lui qui débordait de la carte. */
.decision-sensible {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; flex-wrap: wrap; min-width: 0;
}
.refus-sensible { display: flex; align-items: center; gap: 6px; flex: 1 1 200px; min-width: 0; }
.refus-sensible input { flex: 1 1 auto; min-width: 0; width: 100%; }
.demandes-sensibles td.row-actions { min-width: 320px; }
.demandes-sensibles .valeur-demandee { overflow-wrap: anywhere; }

@media (max-width: 860px) {
    /* La décision passe sous la fiche, en pleine largeur : les deux issues
       restent visibles sans défilement latéral. */
    .demandes-sensibles td.row-actions { display: block !important; min-width: 0; }
    .decision-sensible { flex-direction: column; align-items: stretch; gap: 10px; }
    .refus-sensible { flex: 1 1 auto; flex-wrap: wrap; }
    .refus-sensible input { min-height: 42px; font-size: 16px; }
    .decision-sensible .btn { width: 100%; justify-content: center; min-height: 42px; }

    /* Barre de recherche / colonnes / export : elle s'empile au lieu de
       pousser les boutons hors du cadre. */
    .grid-barre { gap: 8px; }
    .grid-recherche { flex: 1 1 100%; max-width: none; min-height: 42px; font-size: 16px; }
    .grid-actions { margin-left: 0; width: 100%; }
    .grid-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
    .grid-menu { left: 0; right: 0; min-width: 0; }

    /* Actions de la photo de profil : elles étaient coupées à 375 px, la
       vignette et deux boutons ne tenant pas sur une ligne. */
    .photo-widget { align-items: flex-start; flex-wrap: wrap; gap: 14px; }
    .photo-actions { flex: 1 1 100%; min-width: 0; }
    .photo-actions > div { flex-wrap: wrap; width: 100%; }
    .photo-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 42px; }
}

@media (max-width: 430px) {
    .photo-widget .photo-preview { width: 72px; height: 72px; font-size: 24px; }
}

/* ── Signature du relevé (templates/_signature.html, static/js/signature.js) ──
   Le canevas occupe toute la largeur : sur téléphone, on signe au doigt. */
.signature-bloc { margin-top: 18px; }
.signature-entete { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 10px; }
.signature-zone { position: relative; max-width: 560px; }
.signature-canevas {
    display: block; width: 100%; height: 150px; touch-action: none;
    background: #fff; border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
    cursor: crosshair;
}
.signature-zone.a-trace .signature-canevas { border-style: solid; border-color: var(--brand); }
.signature-invite {
    position: absolute; left: 0; right: 0; top: 60px; text-align: center; pointer-events: none;
    color: var(--muted); font-size: 13px; opacity: .7;
}
.signature-zone.a-trace .signature-invite { display: none; }
.signature-outils { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.signature-memo { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; }
.signature-apercu { display: block; max-width: 260px; max-height: 90px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; }
.signature-autre { margin-top: 10px; }
.signature-autre summary { cursor: pointer; font-size: 13px; color: var(--brand); margin-bottom: 8px; }
.signature-mention { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.releve-signe { display: flex; flex-direction: column; gap: 4px; }

/* ── Choix du modèle de relevé (paramètres) ── */
.modeles-releve { display: grid; gap: 10px; }
.modele-releve { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.modele-releve:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.modele-releve input { margin-top: 3px; }
.modele-releve span { display: flex; flex-direction: column; gap: 3px; }
.modele-releve small { color: var(--muted); font-size: 12.5px; }
.modele-releve a { font-size: 12.5px; }