:root {
    --color-bg: #f3f5f6;
    --color-surface: #ffffff;
    --color-surface-2: #f1f4f5;
    --color-border: #eaedef;
    --color-text: #00394a;
    --color-muted: #6b7876;
    --color-primary: #0d3a48;
    --color-primary-dark: #082a35;
    --color-accent-gold: #e0a828;
    --color-danger: #b3261e;
    --color-warning: #a15c00;

    /* Accent unique et vif pour les chiffres-héros (au lieu du teal sombre, trop discret en
       grand format) — le teal Re-uz reste la couleur de marque (topbar, boutons). */
    --color-hero: #00394a;
    --color-good: #0d8a4f;
    --color-good-soft: #e6f6ee;
    --color-critical: #cc3333;
    --color-critical-soft: #fbeaea;
    --color-attention: #c2760a;
    --color-attention-soft: #fdf1de;

    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(15, 35, 32, 0.04);
    --shadow-md: 0 1px 1px rgba(15, 35, 32, 0.03), 0 14px 28px -16px rgba(15, 35, 32, 0.16);
    --shadow-lift: 0 6px 16px -6px rgba(15, 35, 32, 0.24);

    font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

.kpi-tile .value, .status-tile .value, .gauge-value, .progress-values,
.pyramid-tier, .month-count, .stat-hero .stat-hero-value {
    font-variant-numeric: tabular-nums;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-primary);
    color: #fff;
    padding: 0.75rem 1.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 3px solid var(--color-accent-gold);
}

.topbar-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; flex-wrap: wrap; }
.topbar-logo { height: 22px; width: auto; display: block; }
.topbar-welcome { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; opacity: 0.85; font-size: 0.9em; padding-left: 0.6rem; border-left: 1px solid rgba(255, 255, 255, 0.3); color: #fff; text-decoration: none; }
.topbar-welcome:hover { opacity: 1; text-decoration: underline; }

/* Photo affichée devant le titre de chaque page (4x la taille de l'ancien avatar de la barre du
   haut, retiré) : flotte à gauche pour que le h1 vienne s'aligner à côté, "clear" appliqué aux
   premiers blocs de contenu usuels pour qu'ils démarrent toujours sous la photo, jamais à côté. */
.page-avatar { float: left; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 1.25rem 0.75rem 0; border: 2px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); }

/* Bouton retour universel (history.back()), affiche en tete de chaque page connectee. */
.page-back-link {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--color-muted); font-size: 0.85em; font-weight: 600;
    margin-bottom: 0.6rem;
}
.page-back-link:hover { color: var(--color-primary); text-decoration: underline; }

.page-record-nav { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 0.75rem; }
.page-record-nav a, .page-record-nav span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none;
    font-weight: 700;
}
.page-record-nav a:hover { background: var(--color-surface-2, #f2f4f6); }
.page-record-nav span { color: var(--color-border); cursor: default; }
.container h1, .container-full h1 { margin-top: 0.3rem; }
/* Titre vertical-centré sur la hauteur de la photo (88px) quand il la suit directement, ou quand
   il est le premier titre d'un conteneur qui la suit (ex: le bloc flex titre+bouton du dashboard). */
.page-avatar + h1, .page-avatar + div > h1:first-child { line-height: 88px; margin-top: 0; margin-bottom: 0; }
.card, .kpi-row, .grid-2, .dashboard-layout, form.filters, .settings-grid, .map-layout, .filters-bar, .results, .page-nav-row { clear: left; }

.topbar-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.topbar-nav a { color: #fff; text-decoration: none; opacity: 0.9; }
.topbar-nav a:hover { text-decoration: underline; }
.topbar-nav a.active { font-weight: 800; opacity: 1; }
.topbar-logout { display: flex; align-items: center; opacity: 0.85; }
.topbar-logout:hover { opacity: 1; text-decoration: none !important; }

.container {
    max-width: 1100px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

.container-full {
    max-width: 1600px;
    margin: 1.5rem auto;
    padding: 0 2.5rem;
}

.map-layout { display: flex; gap: 1.25rem; align-items: stretch; }
.map-sidebar { flex: 0 0 280px; }
.map-sidebar .field { margin-bottom: 0.7rem; }
.map-wrap { flex: 1; min-width: 0; }
#carte { position: relative; width: 100%; height: 72vh; min-height: 480px; border-radius: 8px; border: 1px solid var(--color-border); }
.map-legend { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; font-size: 0.85em; }
.map-legend span.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.3rem; vertical-align: middle; }
.search-results { border: 1px solid var(--color-border); border-radius: 6px; max-height: 220px; overflow-y: auto; margin-top: 0.3rem; background: var(--color-surface); }
.search-results div { padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.88em; border-bottom: 1px solid var(--color-border); }
.search-results div:last-child { border-bottom: none; }
.search-results div:hover { background: #f0f4f2; }
@media (max-width: 900px) {
    .map-layout { flex-direction: column; }
    .map-sidebar { flex-basis: auto; width: 100%; }
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-md);
}

/* Chiffre-héros : gros nombre + barre de progression fine + légende "X% de Y", en remplacement
   du speedometre pour les objectifs — plus direct a lire, plus dans l'air du temps. */
.stat-hero { padding-top: 0.2rem; }
.stat-hero-label { font-size: 0.78em; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.stat-hero-value { font-family: "Manrope", "Inter", sans-serif; font-size: 2.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--color-hero); }
.stat-hero-track { background: var(--color-surface-2); border-radius: 8px; height: 8px; margin-top: 1rem; overflow: hidden; }
.stat-hero-fill { height: 100%; border-radius: 8px; background: var(--color-hero); transition: width 0.5s ease; }
.stat-hero-caption { margin-top: 0.6rem; font-size: 0.85em; color: var(--color-muted); }
.stat-hero-caption strong { color: var(--color-text); font-weight: 700; }

h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 0; }

.kpi-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.kpi-tile {
    flex: 1; min-width: 170px; background: var(--color-surface);
    border: none; border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s, transform 0.15s;
}
a.kpi-tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.kpi-tile .value { font-family: "Manrope", "Inter", sans-serif; font-size: 2.1rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; color: var(--color-hero); }
.kpi-tile .label { color: var(--color-muted); font-size: 0.76em; font-weight: 600; margin-top: 0.35rem; text-transform: uppercase; letter-spacing: 0.03em; }
.kpi-tile-c3 { background: var(--color-attention-soft); box-shadow: 0 4px 10px -3px rgba(194, 118, 10, 0.25); }
.kpi-tile-c3 .value { color: var(--color-attention); }
.kpi-tile-c3 .label { color: var(--color-attention); }

.tile-alert { background: var(--color-critical-soft); box-shadow: 0 4px 10px -3px rgba(204, 51, 51, 0.3); }
.tile-alert .value { color: var(--color-critical); }
.tile-alert .label { color: var(--color-critical); }
.alarm-icon { display: inline-block; font-size: 0.7em; animation: alarm-blink 1.6s ease-in-out infinite; }
@keyframes alarm-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.pyramid { max-width: 500px; margin: 0 auto; }
.pyramid-row { display: flex; align-items: center; gap: 0.75rem; }
.pyramid-row-link { color: inherit; text-decoration: none; border-radius: 8px; padding: 0.15rem 0.3rem; margin: 0 -0.3rem; transition: background 0.15s; }
.pyramid-row-link:hover { background: #f2f4f6; }
.pyramid-row-link:hover .pyramid-tier { filter: brightness(1.08); }
.pyramid-label { width: 150px; flex-shrink: 0; color: var(--color-muted); line-height: 1.2; }
.pyramid-label-code { display: block; font-weight: 800; font-size: 1.5em; color: var(--color-text); letter-spacing: -0.01em; }
.pyramid-label-desc { display: block; font-weight: 600; font-size: 0.78em; }
.pyramid-tier-wrap { flex: 1; }
.pyramid-tier {
    width: 100%;
    height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.2em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.08));
    transition: clip-path 0.3s;
}
.pyramid-ca { font-size: 0.62em; font-weight: 600; opacity: 0.92; }
.pyramid-conversion-side { width: 84px; text-align: left; flex-shrink: 0; line-height: 1.3; }
.pyramid-conversion-side strong { display: block; font-size: 1em; }
.pyramid-conversion-side .muted { font-size: 0.72em; }
.pyramid-lost-info {
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85em;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
}
a.pyramid-lost-info:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.pyramid-lost-info .label { color: var(--color-muted); font-weight: 600; }
.pyramid-lost-info .value { font-family: "Manrope", "Inter", sans-serif; font-weight: 800; color: var(--color-muted); }

.status-tiles { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.status-tile {
    flex: 1; min-width: 190px; border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem; display: block; text-decoration: none;
    background: var(--tile-soft, var(--color-surface));
    box-shadow: var(--shadow-sm);
    border: none;
}
.status-tile-link { transition: transform 0.15s, box-shadow 0.15s; }
.status-tile-link:hover { box-shadow: var(--tile-shadow-lift, var(--shadow-lift)); transform: translateY(-3px); }
.status-tile-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; margin-bottom: 0.7rem;
    background: var(--tile-ink, var(--color-surface-2)); color: #fff;
    box-shadow: 0 4px 10px -3px var(--tile-shadow-color, transparent);
}
.status-tile-icon svg { width: 19px; height: 19px; stroke-width: 2.4; }
.status-tile .value { font-family: "Manrope", "Inter", sans-serif; font-size: 2.3rem; font-weight: 800; margin: 0.1rem 0 0.2rem; color: var(--tile-ink, var(--color-text)); letter-spacing: -0.02em; }
.status-tile .count { font-size: 0.84em; color: var(--tile-ink, var(--color-muted)); font-weight: 700; }
.status-tile .label { font-size: 0.76em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text); }
.status-tile.tile-good { --tile-soft: var(--color-good-soft); --tile-ink: var(--color-good); --tile-shadow-color: rgba(13, 138, 79, 0.35); }
.status-tile.tile-critical { --tile-soft: var(--color-critical-soft); --tile-ink: var(--color-critical); --tile-shadow-color: rgba(204, 51, 51, 0.35); }
.status-tile.tile-attention { --tile-soft: var(--color-attention-soft); --tile-ink: var(--color-attention); --tile-shadow-color: rgba(194, 118, 10, 0.35); }

@media (max-width: 480px) {
    /* Pyramide illisible en colonnes fixes (label 150px + conversion 84px) sur un ecran
       de telephone : la barre elle-meme n'a alors presque plus de place. On empile
       chaque ligne et on reduit la police pour que tout reste lisible sur iPhone. */
    .pyramid { max-width: 100%; }
    .pyramid-row { flex-direction: column; align-items: stretch; gap: 0.3rem; margin-bottom: 0.85rem; }
    .pyramid-row:last-child { margin-bottom: 0; }
    .pyramid-label { width: auto; display: flex; align-items: baseline; gap: 0.4rem; }
    .pyramid-label-code { font-size: 1.15em; }
    .pyramid-label-desc { font-size: 0.72em; }
    .pyramid-tier-wrap { width: 100%; }
    .pyramid-tier { height: 46px; font-size: 1em; }
    .pyramid-ca { font-size: 0.65em; }
    .pyramid-conversion-side { width: auto; display: flex; align-items: baseline; gap: 0.35rem; }
    .pyramid-conversion-side strong { font-size: 0.92em; }
    .pyramid-conversion-side .muted { font-size: 0.75em; }
    .pyramid-lost-info { flex-wrap: wrap; font-size: 0.8em; }

    .kpi-tile { min-width: 140px; padding: 0.75rem 0.9rem; }
    .kpi-tile .value { font-size: 1.35rem; }
    .kpi-tile .label { font-size: 0.76em; }

    .status-tile { min-width: 110px; padding: 0.7rem 0.8rem; }
    .status-tile .value { font-size: 1.05rem; }
}

.bar-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.bar-label { width: 44px; font-size: 0.85em; font-weight: 600; flex-shrink: 0; }
.bar-track { flex: 1; background: #eef1f4; border-radius: 4px; height: 18px; }
.bar-fill { height: 100%; border-radius: 4px; min-width: 3px; transition: width 0.3s; }
.bar-value { width: 200px; text-align: right; font-size: 0.8em; color: var(--color-muted); flex-shrink: 0; }
.bar-row-link { color: inherit; text-decoration: none; border-radius: 6px; padding: 0.15rem 0.3rem; margin-left: -0.3rem; transition: background 0.15s; }
.bar-row-link:hover { background: #f2f4f6; }
.bar-row-link:hover .bar-label { text-decoration: underline; }

.stacked-bar { display: flex; height: 16px; border-radius: 4px; overflow: hidden; width: 160px; background: #eef1f4; }

.gauge-row { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.gauge { width: 200px; text-align: center; }
.gauge-svg { width: 100%; height: auto; }
.gauge-label { font-weight: 600; font-size: 0.85em; margin-top: -0.5rem; }
.gauge-value { font-family: "Manrope", "Inter", sans-serif; font-size: 1.15em; font-weight: 800; }
.gauge-restant { font-size: 0.8em; color: var(--color-muted); }

.progress-item { width: 100%; }
.progress-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; }
.progress-label { font-weight: 600; font-size: 0.85em; }
.progress-pct { font-family: "Manrope", "Inter", sans-serif; font-weight: 800; font-size: 0.9em; white-space: nowrap; }
.progress-track { background: var(--color-surface-2); border-radius: 8px; height: 10px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 8px; min-width: 3px; transition: width 0.4s ease; }
.progress-values { font-family: "Manrope", "Inter", sans-serif; font-size: 0.95em; font-weight: 700; margin-top: 0.4rem; }
.progress-restant { font-size: 0.8em; color: var(--color-muted); }

.month-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 180px; }
.month-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.month-count { font-family: "Manrope", "Inter", sans-serif; font-size: 0.76em; font-weight: 700; color: var(--color-muted); min-height: 1.1em; }
.month-bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; background: var(--color-surface-2); border-radius: 5px 5px 0 0; }
.month-bar { width: 100%; background: linear-gradient(180deg, #1a5a6e, var(--color-primary)); border-radius: 5px 5px 0 0; min-height: 2px; transition: height 0.4s ease; }
.month-label { font-size: 0.72em; color: var(--color-muted); margin-top: 0.4rem; font-weight: 500; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--color-border); font-size: 0.9em; }
th { color: var(--color-muted); font-weight: 600; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.04em; }
tr:hover td { background: var(--color-surface-2); }
.portefeuille-table { margin-top: 1.1rem; }
.portefeuille-row { cursor: pointer; }

a.sort-header { color: inherit; text-decoration: none; white-space: nowrap; }
a.sort-header:hover { color: var(--color-primary); text-decoration: underline; }
.sort-arrow { font-size: 0.75em; color: var(--color-primary); }

a.button, button, input[type=submit] {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 0.55rem 1.05rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.92em;
    font-weight: 600;
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
a.button:hover, button:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
button.secondary, a.button.secondary { background: var(--color-surface); color: var(--color-primary); border: 1px solid var(--color-border); }
button.secondary:hover, a.button.secondary:hover { background: var(--color-surface-2); }

.resource-table td, .resource-table th { vertical-align: middle; }
.resource-table td:first-child { font-weight: 600; }
.badge-version { background: #eef1f4; color: var(--color-muted); font-weight: 600; white-space: nowrap; }
.resource-action { text-align: right; white-space: nowrap; }
.resource-name { display: flex; align-items: center; gap: 0.75rem; }
.resource-thumb { width: 44px; height: 62px; object-fit: cover; border-radius: 4px; border: 1px solid var(--color-border); flex-shrink: 0; background: #fff; }

@media (max-width: 640px) {
    .resource-table thead { display: none; }
    .resource-table, .resource-table tbody, .resource-table tr, .resource-table td { display: block; width: 100%; }
    .resource-table tr { border-bottom: 1px solid var(--color-border); padding: 0.75rem 0; }
    .resource-table tr:last-child { border-bottom: none; }
    .resource-table td { border: none; padding: 0.15rem 0; }
    .resource-table td[data-label]::before { content: attr(data-label); display: block; color: var(--color-muted); font-size: 0.75em; }
    .resource-table td[data-label=""]::before { display: none; }
    .resource-table td.resource-name { display: flex; align-items: center; }
    .resource-table td.resource-name::before { display: none; }
    .resource-action { text-align: left; margin-top: 0.4rem; }
    .resource-action .button { display: block; text-align: center; }
}

form.filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 1rem; }
form.filters select, form.filters input { width: auto; flex: 1 1 150px; min-width: 130px; }
form.filters button, form.filters a.button { flex-shrink: 0; white-space: nowrap; }

input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], select, textarea {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.95em;
    width: 100%;
}

.field { margin-bottom: 0.85rem; }
.field label { display: block; font-size: 0.85em; color: var(--color-muted); margin-bottom: 0.25rem; }

/* Barre de filtres horizontale en haut de page (remplace la colonne latérale) : les champs
   s'enroulent proprement sur plusieurs lignes si la largeur manque, toujours alignés à gauche,
   jamais étirés sur toute la largeur de la carte. */
.filters-bar-form { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; justify-content: flex-start; }
.filters-bar-form .field { margin-bottom: 0; flex: 1 1 170px; min-width: 150px; max-width: 220px; }
.filters-bar-form .field select, .filters-bar-form .field input { width: 100%; }
.filters-bar-actions { flex: 0 0 auto; max-width: none; min-width: 0; }
.filters-bar-actions label { visibility: hidden; }

.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 12px; font-size: 0.78em; font-weight: 600; }
.badge-warning { background: #fdf0dc; color: var(--color-warning); }
.badge-tier-grand { background: #fbf0da; color: #8a6512; }
.badge-tier-standard { background: #eef1f4; color: var(--color-muted); }
.badge-stage { background: #e5f3ec; color: var(--color-primary-dark); }
.badge-prospect { background: #e8eef4; color: #3d5a75; }
.badge-ancien { background: #fdf0dc; color: #8a6512; }

.flash { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.flash-success { background: #e5f3ec; color: var(--color-primary-dark); }
.flash-error { background: #fbe9e7; color: var(--color-danger); }

/* Chevrons de progression C0-C4 : une teinte par étape, du bleu Re-uz (C0) au vert affaire
   signée (C4). Étapes futures atténuées ; étape courante mise en avant par un contour. */
.chevron-steps { display: flex; width: 100%; margin-bottom: 1rem; }
.chevron-step {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    color: #fff;
    font-weight: 600;
    font-size: 0.9em;
    letter-spacing: 0.02em;
    margin-left: -18px;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
}
.chevron-step:first-child { margin-left: 0; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
.chevron-step.future { opacity: 0.62; }
.chevron-step.current {
    opacity: 1;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9);
    transform: scale(1.08);
    z-index: 2;
}
.chevron-markers { display: flex; margin-top: 0.35rem; }
.chevron-marker { flex: 1; height: 5px; border-radius: 3px; background: transparent; }
.chevron-marker.active { background: var(--color-accent-gold); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* Grille responsive pour les cartes de Paramètres : autant de colonnes que la largeur le permet
   (chaque carte garde une largeur minimale lisible), une seule colonne sur mobile. Les cartes de
   la grille perdent leur margin-bottom individuelle, le "gap" de la grille gère l'espacement. */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.settings-grid .card { margin-bottom: 0; }
@media (max-width: 640px) { .settings-grid { grid-template-columns: 1fr; } }

.dashboard-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.filters-sidebar { flex: 0 0 240px; position: sticky; top: 1.5rem; }
.filters-sidebar h2 { margin-bottom: 0.75rem; }
.filters-sidebar form button, .filters-sidebar form a.button { width: 100%; margin-top: 0.3rem; text-align: center; }
.results { flex: 1; min-width: 0; }
@media (max-width: 800px) {
    .dashboard-layout { flex-direction: column; }
    .filters-sidebar { flex-basis: auto; width: 100%; position: static; }
}

.pagination { display: flex; align-items: center; gap: 0.4rem; margin-top: 1rem; flex-wrap: wrap; }
.pagination-ellipsis { padding: 0 0.2rem; color: var(--color-muted); }
.pagination a.disabled { opacity: 0.4; pointer-events: none; }
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: max-content; }

/* Deux premières colonnes figées pendant le défilement horizontal (tableaux très larges comme
   "Mes comptes") : la 1re a une largeur fixe pour que la 2e connaisse son décalage "left" exact ;
   fond opaque explicite (sinon le contenu défilé transparaît derrière), séparateur visuel à droite
   de la zone figée. */
.table-frozen-2 th:nth-child(1), .table-frozen-2 td:nth-child(1) { position: sticky; left: 0; z-index: 2; width: 44px; background: var(--color-surface); }
.table-frozen-2 th:nth-child(2), .table-frozen-2 td:nth-child(2) { position: sticky; left: 44px; z-index: 2; background: var(--color-surface); box-shadow: 3px 0 6px -3px rgba(0, 0, 0, 0.2); }
.table-frozen-2 thead th:nth-child(1), .table-frozen-2 thead th:nth-child(2) { z-index: 3; }
.table-frozen-2 tr:hover td:nth-child(1), .table-frozen-2 tr:hover td:nth-child(2) { background: #fafbfc; }
@media (max-width: 640px) {
    /* La colonne "Nom du compte" figée peut depasser 400px de large (badges + nom qui
       retombent a la ligne) : sur un ecran de telephone, la zone figee seule deborde
       alors toute la largeur visible et le defilement horizontal devient inutilisable.
       On desactive le figeage en dessous de 640px et on revient a un scroll classique. */
    .table-frozen-2 th:nth-child(1), .table-frozen-2 td:nth-child(1),
    .table-frozen-2 th:nth-child(2), .table-frozen-2 td:nth-child(2) {
        position: static;
        box-shadow: none;
    }
    .table-frozen-2 td:nth-child(2) { max-width: 55vw; }
}
.login-wrap { max-width: 380px; margin: 4rem auto; }
.muted { color: var(--color-muted); font-size: 0.9em; }

.rappel-status { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.5rem; border-radius: 12px; font-size: 0.78em; font-weight: 600; white-space: nowrap; }
.rappel-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.rappel-status-retard { background: #fbe9e7; color: var(--color-danger); }
.rappel-status-retard::before { background: var(--color-danger); }
.rappel-status-proche { background: #fdf0dc; color: var(--color-warning); }
.rappel-status-proche::before { background: var(--color-warning); }
.rappel-status-ok { background: #e5f3ec; color: #0c891b; }
.rappel-status-ok::before { background: #0c891b; }
.rappel-status-fait { background: #eef1f4; color: var(--color-muted); }
.rappel-status-fait::before { background: var(--color-muted); }

.rappel-week-group { border-bottom: 1px solid var(--color-border); padding: 0.5rem 0; }
.rappel-week-group:last-child { border-bottom: none; }
.rappel-week-header { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.9em; }
.rappel-week-items { margin: 0.3rem 0 0; padding: 0; list-style: none; font-size: 0.85em; }
.rappel-week-items li { padding: 0.15rem 0; color: var(--color-muted); display: flex; justify-content: space-between; gap: 0.5rem; }
.rappel-week-items a { color: inherit; }

.photo-cropper-viewport {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: #eef1f4;
    border: 1px solid var(--color-border);
    cursor: grab;
    touch-action: none;
}
.photo-cropper-viewport img { position: absolute; top: 0; left: 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.photo-cropper-viewport:active { cursor: grabbing; }

@media print {
    .topbar, .no-print { display: none !important; }
    .container, .container-full { max-width: none; margin: 0; }
    .card { border: none; box-shadow: none; padding: 0; margin-bottom: 1.5rem; break-inside: avoid; }
    body { background: #fff; }
}

/* ---- Tchat interne (widget flottant haut-droite, sous le menu Paramètres) ---- */
.chat-widget { position: fixed; top: 4.5rem; right: 1.5rem; z-index: 2000; display: flex; align-items: flex-start; gap: 0.5rem; }
.chat-widget-bar { display: flex; align-items: center; gap: 0.5rem; }
.chat-widget-avatars { display: flex; }
.chat-online-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--color-surface); margin-left: -10px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.25); overflow: hidden; }
.chat-online-avatar:first-child { margin-left: 0; }
.chat-online-more { display: flex; align-items: center; justify-content: center; background: var(--color-muted); color: #fff; font-size: 0.7em; font-weight: 700; }
.chat-widget-toggle { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: #fff; border: none; font-size: 1.2em; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; }
.chat-unread-badge { position: absolute; top: -4px; right: -4px; background: var(--color-danger); color: #fff; border-radius: 50%; min-width: 18px; height: 18px; font-size: 0.65em; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

/* Clignotement de la bulle tant qu'un message n'a pas ete lu : pulsation de l'anneau +
   variation d'opacite du bouton, s'arrete des que badgeEl repasse a hidden (poll toutes les 4s). */
@keyframes chat-widget-blink {
    0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 0 0 0 rgba(208, 59, 59, 0.55); opacity: 1; }
    50% { box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 0 0 8px rgba(208, 59, 59, 0); opacity: 0.82; }
}
.chat-widget-toggle-unread { animation: chat-widget-blink 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .chat-widget-toggle-unread { animation: none; }
}
.chat-panel { position: fixed; top: 8rem; right: 1.5rem; width: 320px; max-width: calc(100vw - 2rem); height: 440px; max-height: calc(100vh - 10rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); display: flex; flex-direction: column; overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-panel-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--color-border); background: var(--color-primary); color: #fff; }
.chat-panel-title { flex: 1; font-size: 0.9em; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-panel-back { background: none; border: none; color: #fff; font-size: 1.1em; cursor: pointer; line-height: 1; padding: 0 0.2rem; }
.chat-panel-close { background: none; border: none; color: #fff; font-size: 1.3em; cursor: pointer; line-height: 1; }
.chat-thread-list { flex: 1; overflow-y: auto; }
.chat-thread-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.6rem; cursor: pointer; border-bottom: 1px solid var(--color-border); position: relative; }
.chat-thread-item:hover { background: var(--color-bg); }
.chat-thread-avatar { flex-shrink: 0; }
.chat-thread-info { flex: 1; min-width: 0; }
.chat-thread-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; }
.chat-thread-name { font-weight: 700; font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread-time { font-size: 0.7em; color: var(--color-muted); flex-shrink: 0; }
.chat-thread-preview { font-size: 0.78em; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.1rem; }
.chat-thread-badge { position: absolute; top: 0.5rem; right: 0.6rem; background: var(--color-danger); color: #fff; border-radius: 50%; min-width: 18px; height: 18px; font-size: 0.65em; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.chat-thread-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chat-panel-messages { flex: 1; overflow-y: auto; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.chat-message { display: flex; gap: 0.4rem; align-items: flex-end; max-width: 88%; }
.chat-message-mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-message-content { background: var(--color-bg); border-radius: 10px; padding: 0.4rem 0.6rem; font-size: 0.85em; }
.chat-message-mine .chat-message-content { background: var(--color-primary); color: #fff; }
.chat-message-sender { font-weight: 700; font-size: 0.85em; margin-bottom: 0.15rem; }
.chat-message-time { font-size: 0.72em; opacity: 0.65; margin-top: 0.2rem; text-align: right; }
.chat-message-image { max-width: 180px; max-height: 140px; border-radius: 6px; display: block; margin-top: 0.3rem; }
.chat-message-file { color: inherit; text-decoration: underline; display: inline-block; margin-top: 0.3rem; }
.chat-panel-form { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem; border-top: 1px solid var(--color-border); }
.chat-panel-form input[type="text"] { flex: 1; border-radius: 6px; border: 1px solid var(--color-border); padding: 0.4rem 0.6rem; font-size: 0.85em; }
.chat-attach-btn { cursor: pointer; font-size: 1.1em; }
.chat-attachment-preview { padding: 0.3rem 0.6rem; font-size: 0.75em; color: var(--color-muted); border-top: 1px solid var(--color-border); }

@media (max-width: 640px) {
    .chat-panel { left: 0.5rem; right: 0.5rem; width: auto; }
}