/* =====================================================================
   CRM Batiment — feuille de style
   Concue pour le telephone d'abord : les techniciens consultent
   leurs interventions sur chantier, souvent d'une seule main.
   ===================================================================== */

/* ---- Jetons de couleur --------------------------------------------- */
:root {
    --navy-900: #0f1f36;
    --navy-800: #16294a;
    --navy-700: #1e3a5f;
    --navy-600: #2a4d7a;

    --accent:      #f97316;
    --accent-dark: #ea580c;
    --accent-soft: #fff1e6;

    --bg:          #f1f5f9;
    --surface:     #ffffff;
    --surface-2:   #f8fafc;
    --border:      #e2e8f0;
    --border-2:    #cbd5e1;

    --text:        #0f172a;
    --text-muted:  #64748b;
    --text-faint:  #94a3b8;

    --green:  #16a34a;  --green-soft:  #dcfce7;
    --red:    #dc2626;  --red-soft:    #fee2e2;
    --amber:  #d97706;  --amber-soft:  #fef3c7;
    --blue:   #2563eb;  --blue-soft:   #dbeafe;
    --violet: #7c3aed;  --violet-soft: #ede9fe;

    --radius:    12px;
    --radius-sm: 8px;
    --radius-lg: 18px;

    --shadow-sm: 0 1px 2px rgba(15, 31, 54, .06);
    --shadow:    0 2px 8px rgba(15, 31, 54, .08);
    --shadow-lg: 0 12px 32px rgba(15, 31, 54, .16);

    --header-h: 58px;
    --nav-h:    62px;

    /* Zones sures de l'iPhone : encoche / Dynamic Island en haut, barre
       d'accueil en bas. Nulles ailleurs. Indispensables sur l'ecran
       d'accueil, ou la page passe SOUS la barre d'etat
       (apple-mobile-web-app-status-bar-style = black-translucent). */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --sidebar-w: 236px;

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

/* ---- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
p  { margin: 0 0 .75rem; }

a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--accent-dark); }

img { max-width: 100%; }

/* L'attribut hidden ne pose qu'un display:none, que la moindre règle
   explicite annule. Cette ligne lui redonne le dernier mot. */
[hidden] { display: none !important; }

/* ---- Icônes --------------------------------------------------------
   Les SVG sont écrits sans width/height : sans cette règle ils
   s'afficheraient à leur taille par défaut de 300x150 px. La taille
   suit celle du texte environnant ; les contextes ci-dessous ajustent. */
.ico {
    width: 1.15em; height: 1.15em;
    flex: 0 0 auto;
    vertical-align: -.15em;
}

.header__action .ico      { width: 20px; height: 20px; }
.page-head .ico           { width: 18px; height: 18px; }
.card__head > .ico        { width: 17px; height: 17px; color: var(--text-muted); }
.item__time .ico          { width: 18px; height: 18px; }
.detail-list .ico,
.timeline .ico            { width: 15px; height: 15px; }
.badge .ico,
.status .ico              { width: 12px; height: 12px; }
.filters .ico             { width: 14px; height: 14px; }
.suggest__list .ico       { width: 14px; height: 14px; color: var(--text-faint); }

/* Cible tactile confortable, gants compris */
button, input, select, textarea { font: inherit; color: inherit; }

/* =====================================================================
   Structure
   ===================================================================== */

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

/* ---- En-tete ------------------------------------------------------- */
.header {
    position: sticky; top: 0; z-index: 50;
    height: calc(var(--header-h) + var(--safe-top));
    display: flex; align-items: center; gap: .6rem;
    padding: var(--safe-top) .85rem 0;
    background: var(--navy-700);
    color: #fff;
    box-shadow: var(--shadow);
}

.header__brand {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 700; letter-spacing: -.01em; color: #fff;
    white-space: nowrap;
}
.header__brand img { width: 26px; height: 26px; border-radius: 6px; }
.header__brand span { display: none; }

.header__spacer { flex: 1; }

.header__action {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    color: #fff; cursor: pointer;
    transition: background .15s;
}
.header__action:hover { background: rgba(255, 255, 255, .22); }

.badge-dot {
    position: absolute; top: 5px; right: 5px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* Selecteur de societe */
.company-switch { position: relative; }
.company-switch select {
    appearance: none;
    max-width: 40vw;
    padding: .42rem 1.7rem .42rem .7rem;
    border: 0; border-radius: 9px;
    background: rgba(255, 255, 255, .14);
    color: #fff; font-size: .85rem; font-weight: 600;
    cursor: pointer;
    text-overflow: ellipsis;
}
.company-switch select option { color: var(--text); background: #fff; }
.company-switch::after {
    content: ""; position: absolute; right: .62rem; top: 50%;
    width: 6px; height: 6px; margin-top: -4px;
    border-right: 2px solid rgba(255,255,255,.8);
    border-bottom: 2px solid rgba(255,255,255,.8);
    transform: rotate(45deg); pointer-events: none;
}

/* Quand les deux sélecteurs cohabitent, on resserre celui des sociétés */
.header:has(.role-switch) .company-switch:not(.role-switch) select { max-width: 30vw; }
.role-switch select { background: rgba(255, 255, 255, .22); font-weight: 700; }

/* ---- Corps --------------------------------------------------------- */
.body { flex: 1; display: flex; min-height: 0; }

.sidebar { display: none; }

.main {
    flex: 1; min-width: 0;
    padding: 1rem .85rem calc(var(--nav-h) + var(--safe-bottom) + 1.4rem);
}

/* ---- Navigation basse (mobile) ------------------------------------- */
.tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    height: calc(var(--nav-h) + var(--safe-bottom));
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
}
/* Entree « Plus » : ouvre les pages absentes de la barre du bas
   (Depenses, Corps de metier, Techniciens, Export...), inaccessibles
   sur telephone puisque la barre laterale y est masquee. */
.tabbar__more { flex: 1; display: flex; min-width: 0; }
.tabbar__more > summary {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    font-size: .68rem; font-weight: 600;
    color: var(--text-faint);
    cursor: pointer;
    list-style: none;
}
.tabbar__more > summary::-webkit-details-marker { display: none; }
.tabbar__more > summary .ico { width: 21px; height: 21px; stroke: var(--text-faint); }
.tabbar__more[open] > summary,
.tabbar__more[open] > summary .ico { color: var(--navy-700); stroke: var(--navy-700); }

.more-sheet {
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--nav-h) + var(--safe-bottom));
    z-index: 59;
    display: flex; flex-direction: column;
    max-height: 62vh; overflow-y: auto;
    padding: .5rem .5rem .7rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -10px 28px rgba(15, 31, 54, .18);
}
.more-sheet__label {
    padding: .55rem .7rem .3rem;
    font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-faint);
}
.more-sheet a {
    display: flex; align-items: center; gap: .65rem;
    min-height: 46px;
    padding: 0 .7rem;
    border-radius: var(--radius-sm);
    font-size: .92rem; font-weight: 600;
    color: var(--text);
}
.more-sheet a.is-active { background: var(--navy-700); color: #fff; }
.more-sheet a.is-active .ico { stroke: #fff; }
.more-sheet a .ico { width: 18px; height: 18px; stroke: var(--text-faint); }
.more-sheet__count {
    margin-left: auto;
    min-width: 20px; padding: 0 .35rem;
    border-radius: 999px;
    background: var(--accent); color: #fff;
    font-size: .7rem; line-height: 20px; text-align: center;
}

/* Six entrees sur un ecran de 375 px : chaque libelle doit pouvoir
   retrecir plutot que de pousser la barre hors de l'ecran. */
.tabbar__label {
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    /* « Interventions » et « Commissions » doivent tenir en entier dans
       leur cinquieme d'ecran : un corps un peu plus petit, resserre. */
    font-size: .62rem; letter-spacing: -.01em;
}
/* L'administrateur a une case de plus : sur les telephones les plus
   etroits, « Interventions » a besoin d'un demi-point de moins. */
.tabbar--six .tabbar__label { font-size: .58rem; }

.tabbar a {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    font-size: .68rem; font-weight: 600;
    color: var(--text-faint);
}
.tabbar a.is-active { color: var(--navy-700); }
.tabbar a.is-active .ico { stroke: var(--navy-700); }
.tabbar .ico { width: 21px; height: 21px; stroke: var(--text-faint); }

/* Bouton flottant de saisie rapide */
.fab {
    position: fixed; right: 1rem; z-index: 61;
    bottom: calc(var(--nav-h) + var(--safe-bottom) + 1rem);
    width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: var(--accent); color: #fff;
    box-shadow: 0 6px 18px rgba(249, 115, 22, .45);
    cursor: pointer;
}
.fab .ico { width: 26px; height: 26px; }

/* =====================================================================
   Composants
   ===================================================================== */

/* ---- Cartes -------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: .85rem;
    overflow: hidden;
}
.card__head {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem .9rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.card__head h2, .card__head h3 { flex: 1; min-width: 0; }
.card__body { padding: .9rem; }
.card__body--flush { padding: 0; }

/* ---- Titre de page ------------------------------------------------- */
.page-head {
    display: flex; align-items: flex-start; gap: .7rem;
    margin-bottom: .9rem;
}
.page-head__text { flex: 1; min-width: 0; }
.page-head p { margin: .15rem 0 0; color: var(--text-muted); font-size: .85rem; }

/* ---- Statistiques -------------------------------------------------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
    margin-bottom: .9rem;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem .8rem;
    box-shadow: var(--shadow-sm);
}
.stat__label {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-faint);
    display: block; margin-bottom: .3rem;
}
.stat__value { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.stat__hint  { font-size: .74rem; color: var(--text-muted); margin-top: .15rem; }

.stat--accent { border-left: 3px solid var(--accent); }
.stat--green  { border-left: 3px solid var(--green); }
.stat--blue   { border-left: 3px solid var(--blue); }
.stat--red    { border-left: 3px solid var(--red); }

.stat__value--green { color: var(--green); }
.stat__value--red   { color: var(--red); }

/* ---- Pastilles ----------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .18rem .5rem;
    border-radius: 999px;
    font-size: .72rem; font-weight: 650; line-height: 1.4;
    white-space: nowrap;
}
.badge--soft { background: var(--surface-2); color: var(--text-muted); }
.badge--green  { background: var(--green-soft);  color: #15803d; }
.badge--red    { background: var(--red-soft);    color: #b91c1c; }
.badge--amber  { background: var(--amber-soft);  color: #b45309; }
.badge--blue   { background: var(--blue-soft);   color: #1d4ed8; }
.badge--violet { background: var(--violet-soft); color: #6d28d9; }

.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Pastille de statut coloree par la valeur de l'Excel */
.status {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .73rem; font-weight: 650;
    background: color-mix(in srgb, var(--status-color) 14%, transparent);
    color: var(--status-color);
}
.status::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--status-color);
}

/* Repli si color-mix n'est pas supporte */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .status { background: var(--surface-2); }
}

/* Légende expliquant le sens de chaque statut */
.status-legend { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .4rem; }
.status-legend li { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--text-muted); }
.status-legend li .status { flex: 0 0 auto; min-width: 92px; justify-content: center; }

/* ---- Boutons ------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 42px;
    padding: .5rem .95rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: .88rem; font-weight: 650;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .05s;
    text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn .ico { width: 16px; height: 16px; }

.btn--primary { background: var(--navy-700); color: #fff; }
.btn--primary:hover { background: var(--navy-800); color: #fff; }

.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); color: #fff; }

.btn--ghost { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--text-faint); }

.btn--danger { background: var(--red-soft); color: #b91c1c; }
.btn--danger:hover { background: #fecaca; color: #991b1b; }

.btn--sm { min-height: 34px; padding: .3rem .65rem; font-size: .8rem; }
.btn--block { width: 100%; }

.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- Formulaires --------------------------------------------------- */
.field { margin-bottom: .85rem; }
.field > label {
    display: block;
    margin-bottom: .3rem;
    font-size: .8rem; font-weight: 650; color: var(--text-muted);
}
.field__hint { font-size: .75rem; color: var(--text-faint); margin-top: .25rem; }
.field__error { font-size: .78rem; color: var(--red); margin-top: .25rem; font-weight: 600; }

/* Sur iPhone, les champs date/heure imposent leur largeur native et
   debordent de leur conteneur : on neutralise l'habillage systeme et on
   autorise le retrecissement. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;
}
/* Un enfant de grille ne retrecit pas sous sa taille intrinseque
   sans cette regle : c'est ce qui faisait deborder la ligne. */
.field, .field-row > * { min-width: 0; }

.input, .select, .textarea {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: .55rem .7rem;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 16px;              /* 16px : evite le zoom automatique sur iPhone */
    transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: 0;
    border-color: var(--navy-600);
    box-shadow: 0 0 0 3px rgba(42, 77, 122, .14);
}
.input--error { border-color: var(--red); }
.textarea { min-height: 86px; resize: vertical; line-height: 1.5; }

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    padding-right: 2rem;
}

.field-row { display: grid; gap: .65rem; grid-template-columns: 1fr; }

/* Groupe de boutons radio en pastilles : saisie rapide au pouce */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.chips label {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem .8rem;
    border: 1.5px solid var(--border-2);
    border-radius: 999px;
    font-size: .84rem; font-weight: 600;
    background: var(--surface);
    cursor: pointer;
    transition: all .12s;
    user-select: none;
}
.chips input:checked + label {
    border-color: var(--chip-color, var(--navy-700));
    background: var(--chip-color, var(--navy-700));
    color: #fff;
}
.chips input:focus-visible + label { box-shadow: 0 0 0 3px rgba(42, 77, 122, .2); }

/* Bandeau de calcul en direct sous les montants */
.calc-strip {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;
    padding: .7rem .8rem;
    background: var(--accent-soft);
    border: 1px solid #fed7aa;
    border-radius: var(--radius-sm);
    margin-bottom: .85rem;
}
.calc-strip div { min-width: 0; }
.calc-strip dt {
    font-size: .7rem; font-weight: 650; text-transform: uppercase;
    letter-spacing: .03em; color: #9a3412;
}
.calc-strip dd { margin: .1rem 0 0; font-size: 1rem; font-weight: 700; color: #7c2d12; }

/* ---- Listes d'interventions ---------------------------------------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li + li { border-top: 1px solid var(--border); }

.item {
    display: flex; gap: .7rem;
    padding: .8rem .9rem;
    color: var(--text);
    transition: background .12s;
}
.item:hover { background: var(--surface-2); color: var(--text); }

.item__time {
    flex-shrink: 0; width: 52px;
    text-align: center;
}
.item__time strong { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.item__time span   { display: block; font-size: .68rem; color: var(--text-faint); text-transform: uppercase; }

.item__main { flex: 1; min-width: 0; }
.item__title {
    font-weight: 650; font-size: .93rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem;
    margin-top: .22rem;
    font-size: .78rem; color: var(--text-muted);
}
.item__meta > span { display: inline-flex; align-items: center; gap: .22rem; }

.item__tech { font-weight: 700; color: var(--text); }
.item__societe { font-weight: 700; text-transform: uppercase; font-size: .64rem; letter-spacing: .03em; }
.item__side { flex-shrink: 0; text-align: right; }
.item__amount { font-weight: 700; font-size: .9rem; }

.item--late { border-left: 3px solid var(--red); }
.item--soon { border-left: 3px solid var(--amber); }
.item__tech--renfort { font-weight: 600; color: var(--text-muted); }

/* Sur telephone, un nom de client long ne tient pas sur une ligne a
   cote de la pastille de statut : on lui accorde deux lignes plutot
   que de le tronquer. */
@media (max-width: 640px) {
    .item__title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.25;
        word-break: break-word;
    }
}

/* ---- Tableaux (desktop) -------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.table th {
    position: sticky; top: 0;
    padding: .6rem .7rem;
    text-align: left; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

/* Tableaux sur telephone : de la place perdue en marges rendait le
   contenu a l'etroit et poussait les colonnes hors de la carte. */
@media (max-width: 640px) {
    .table { font-size: .8rem; }
    .table th, .table td { padding: .45rem .4rem; }
    .table th { font-size: .64rem; letter-spacing: .02em; }
    /* La premiere colonne peut revenir a la ligne — entre les mots, pas
       entre les lettres. Elle garde une largeur minimale : un tableau
       trop large pour l'ecran defile de cote au lieu de l'ecraser. */
    .table td:first-child, .table th:first-child {
        min-width: 9rem;
        white-space: normal; word-break: normal; overflow-wrap: anywhere;
    }
    .table td.num, .table th.num { white-space: nowrap; }
}

/* Corps de metier : le formulaire de renommage tient dans sa cellule.
   Sur telephone il se replie, le bouton passant sous le champ. */
.svc-form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.svc-form__couleur {
    width: 32px; height: 32px; padding: 0; flex-shrink: 0;
    border: 1px solid var(--border-2); border-radius: 6px;
}
.svc-form__nom {
    flex: 1 1 8rem; min-width: 8rem; max-width: 180px;
    min-height: 34px; padding: .25rem .5rem; font-size: .86rem;
}
.svc-form .btn { white-space: nowrap; }
@media (max-width: 640px) {
    .table td.svc-cell { min-width: 13rem; }
}

/* Ligne de total : la somme doit se verifier d'un coup d'oeil */
.table tfoot th {
    border-top: 2px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: .85rem;
}
.table td {
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .nowrap { white-space: nowrap; }

/* ---- Messages ------------------------------------------------------ */
.alert {
    display: flex; gap: .55rem; align-items: flex-start;
    padding: .7rem .85rem;
    border-radius: var(--radius-sm);
    font-size: .87rem;
    margin-bottom: .8rem;
    border: 1px solid transparent;
}
.alert--success { background: var(--green-soft); color: #14532d; border-color: #bbf7d0; }
.alert--error   { background: var(--red-soft);   color: #7f1d1d; border-color: #fecaca; }
.alert--warning { background: var(--amber-soft); color: #78350f; border-color: #fde68a; }
.alert--info    { background: var(--blue-soft);  color: #1e3a8a; border-color: #bfdbfe; }
.alert .ico { width: 18px; height: 18px; margin-top: 1px; }

.empty {
    padding: 2.2rem 1rem;
    text-align: center;
    color: var(--text-muted);
}
.empty .ico { width: 38px; height: 38px; stroke: var(--border-2); margin-bottom: .6rem; }
.empty p { margin: 0 0 .2rem; font-weight: 600; color: var(--text); }
.empty span { font-size: .85rem; }

/* ---- Barre de filtres ---------------------------------------------- */
.filters {
    display: flex; gap: .45rem;
    overflow-x: auto;
    padding-bottom: .3rem;
    margin-bottom: .8rem;
    scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filters a {
    flex-shrink: 0;
    padding: .4rem .8rem;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    background: var(--surface);
    font-size: .82rem; font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.filters a.is-active {
    background: var(--navy-700); border-color: var(--navy-700); color: #fff;
}

/* Champ rendu obligatoire par le statut choisi */
.field--required > label::after {
    content: " *";
    color: var(--accent-dark);
    font-weight: 700;
}
.field--required .input,
.field--required .select { border-color: var(--accent); }

/* ---- Assistant pas à pas -------------------------------------------
   Une question par écran : la barre indique où l'on en est.
   Les étapes sont masquées dès le rendu serveur, pour qu'aucune ne
   s'affiche avant que le script ne prenne la main. */
.wz-hidden { display: none; }

.wz-progress { margin-bottom: .85rem; }
.wz-progress__bar {
    height: 6px; border-radius: 3px;
    background: var(--border);
    overflow: hidden;
}
.wz-progress__bar span {
    display: block; height: 100%; width: 0;
    border-radius: 3px;
    background: var(--accent);
    transition: width .25s ease;
}
.wz-progress__label {
    margin-top: .35rem;
    font-size: .78rem; font-weight: 650; color: var(--text-muted);
}

.wz-step > .field > label,
.wz-step > .field > label[for] {
    font-size: 1.02rem; font-weight: 650; color: var(--text);
    margin-bottom: .5rem;
}
.wz-step .chips label { font-size: .9rem; padding: .55rem .9rem; }

.wz-nav {
    display: flex; gap: .5rem;
    position: sticky; bottom: calc(var(--nav-h) + var(--safe-bottom) + .5rem);
    z-index: 40;
    margin-bottom: 1rem;
}
.wz-nav .btn { min-height: 48px; }

@media (min-width: 1000px) {
    .wz-nav { position: static; }
}

/* ---- Bandeau de fiche d'intervention --------------------------------
   Le nom du client, sa référence et sa date doivent se lire d'un coup
   d'œil : fond sombre, texte blanc, liseré à la couleur du statut. */
.hero {
    background: var(--navy-700);            /* couleur unie, sans degrade */
    border-left: 5px solid var(--hero-color, var(--accent));
    border-radius: var(--radius-lg);
    padding: .95rem 1rem 1.05rem;
    margin-bottom: .85rem;
    box-shadow: var(--shadow);
    color: #fff;
}
.hero__top { display: flex; align-items: flex-start; gap: .65rem; }
.hero__back {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
.hero__back:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.hero__title { flex: 1; min-width: 0; }
.hero h1 {
    color: #fff; font-size: 1.3rem;
    letter-spacing: -.015em; word-break: break-word;
}
.hero__sub {
    display: flex; flex-wrap: wrap; gap: .25rem .85rem;
    margin-top: .35rem;
    font-size: .82rem; font-weight: 600;
}
.hero__sub span { display: inline-flex; align-items: center; gap: .3rem; color: #fff; opacity: .95; }
.hero__ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .01em; }
/* La pastille porte la couleur reelle du statut, comme dans les listes.
   Le fond blanc garantit la lisibilite sur le bandeau fonce, et le
   melange assombrit les teintes claires (jaune, ambre) qui passeraient
   mal en texte : a 55 % tous les statuts depassent le contraste 4.5:1.
   Le point garde la teinte pure, c'est lui qui porte la couleur.
   Si color-mix manque, la 1re declaration tient. */
.hero .status {
    background: #fff;
    color: var(--status-color);
    color: color-mix(in srgb, var(--status-color) 55%, #0f172a);
    box-shadow: 0 1px 4px rgba(15, 31, 54, .28);
}
.hero .status::before { background: var(--status-color); }

.hero__facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .9rem;
    margin: .85rem 0 0; padding-top: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero__facts > div { min-width: 0; }
.hero__facts dt {
    font-size: .65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; opacity: .68;
}
.hero__facts dd {
    margin: .12rem 0 0; font-size: .9rem; font-weight: 650;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero__facts a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* Barre d'actions immédiates sous le bandeau */
.quick-bar { display: flex; gap: .5rem; margin-bottom: .85rem; }
.quick-bar .btn { flex: 1; }

/* Carte « prochaine étape » : ce qu'il reste à faire, mis en avant */
.next-step { border-color: var(--accent); border-width: 1.5px; }
.next-step .card__head { background: var(--accent-soft); }
.next-step .card__head h2 { color: #9a3412; }
.next-step__hint { font-size: .85rem; color: var(--text-muted); margin-bottom: .7rem; }

.done-note {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem .9rem;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: .87rem;
    margin-bottom: .85rem;
}

@media (min-width: 640px) {
    .hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hero h1 { font-size: 1.5rem; }
}

/* Panneau de filtres replié, ouvert d'un clic */
.filters-panel { margin-top: .7rem; }
.filters-panel > summary {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .8rem;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    background: var(--surface);
    font-size: .84rem; font-weight: 650; color: var(--text-muted);
    cursor: pointer; list-style: none; user-select: none;
}
.filters-panel > summary::-webkit-details-marker { display: none; }
.filters-panel > summary::after {
    content: ""; width: 6px; height: 6px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); margin-left: .2rem; margin-top: -3px;
    transition: transform .15s;
}
.filters-panel[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.filters-panel > summary:hover { border-color: var(--text-faint); color: var(--text); }

/* ---- Detail / fiche ------------------------------------------------ */
.detail-list { margin: 0; }
.detail-list > div {
    display: flex; gap: .8rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--border);
}
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt {
    flex-shrink: 0; width: 42%;
    font-size: .82rem; color: var(--text-muted); font-weight: 600;
}
.detail-list dd { flex: 1; margin: 0; font-size: .88rem; font-weight: 550; word-break: break-word; }

/* ---- Chronologie --------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--border); }
.timeline li { position: relative; padding: 0 0 .9rem .3rem; }
.timeline li::before {
    content: ""; position: absolute; left: -1.42rem; top: .35rem;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--border-2); border: 2px solid var(--surface);
}
/* La dernière étape, en bas du fil, porte la pastille de couleur */
.timeline--recent li:last-child::before { background: var(--accent); }
.timeline time { display: block; font-size: .73rem; color: var(--text-faint); }
.timeline strong { font-size: .86rem; font-weight: 650; }
.timeline p { margin: .15rem 0 0; font-size: .84rem; color: var(--text-muted); }

/* Historique replié : « voir plus » ouvre les étapes antérieures */
.timeline-more { margin-bottom: .2rem; }
.timeline-more > summary {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .7rem;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    background: var(--surface);
    font-size: .8rem; font-weight: 650; color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.timeline-more > summary::-webkit-details-marker { display: none; }
.timeline-more > summary::after {
    content: ""; width: 6px; height: 6px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); margin-left: .15rem; margin-top: -3px;
    transition: transform .15s;
}
.timeline-more[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.timeline-more > summary:hover { border-color: var(--text-faint); color: var(--text); }

/* ---- Planning ------------------------------------------------------ */
.planning-day { margin-bottom: .85rem; }
.planning-day__head {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .45rem .2rem;
    font-size: .82rem; font-weight: 700;
    text-transform: capitalize;
    color: var(--navy-700);
    border-bottom: 2px solid var(--border);
    margin-bottom: .3rem;
    position: sticky; top: calc(var(--header-h) + var(--safe-top)); z-index: 10;
    background: var(--bg);
}
.planning-day__head small { font-weight: 500; color: var(--text-faint); text-transform: none; }
.planning-day--today .planning-day__head { color: var(--accent-dark); border-bottom-color: var(--accent); }

/* ---- Agenda du jour, sous le champ date ------------------------------ */
.agenda-jour {
    margin-top: .5rem;
    padding: .5rem .6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.agenda-jour__titre, .agenda-jour__vide {
    margin: 0 0 .3rem;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-faint);
}
.agenda-jour__vide { margin-bottom: 0; text-transform: none; letter-spacing: 0; font-weight: 500; }
.agenda-jour ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .18rem; }
.agenda-jour li {
    display: flex; align-items: baseline; gap: .45rem;
    padding: .2rem .35rem;
    border-radius: 4px;
    font-size: .78rem;
}
/* Un rendez-vous a moins d'une heure de celui qu'on saisit merite l'oeil */
.agenda-jour li.est-proche { background: var(--amber-soft); color: #b45309; font-weight: 600; }
.agenda-jour__heure  { font-weight: 700; font-variant-numeric: tabular-nums; }
.agenda-jour__client { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-jour__tech   { font-size: .7rem; color: var(--text-faint); }

/* Champ « aller a une date » de la barre du planning */
.planning-date { display: flex; }
.planning-date .input {
    width: auto; min-height: 32px;
    padding: .25rem .45rem;
    font-size: .8rem;
}

/* Bandeau de la semaine, vue « jour » du planning */
.bandeau {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: .75rem;
}
.bandeau__jour {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: .4rem .1rem .3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    min-width: 0;
}
.bandeau__jour:hover { border-color: var(--accent); }
.bandeau__nom {
    font-size: .65rem; text-transform: uppercase;
    color: var(--text-muted); letter-spacing: .02em;
}
.bandeau__num { font-size: 1rem; font-weight: 700; line-height: 1.1; }
/* La pastille garde sa place meme vide : les sept cases restent alignees.
   Le chiffre est centre par flex : cale a gauche, il debordait de l'arrondi. */
.bandeau__pastille {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 3px;
    border-radius: 999px;
    font-size: .62rem; font-weight: 700; line-height: 1;
    color: transparent;
}
.bandeau__pastille:not(:empty) { background: var(--navy-700); color: #fff; }
.bandeau__jour--aujourdhui {
    background: var(--accent-soft); border-color: var(--accent);
}
.bandeau__jour--aujourdhui .bandeau__num { color: var(--accent-dark); }
.bandeau__jour--actif {
    background: var(--navy-700); border-color: var(--navy-700);
}
.bandeau__jour--actif .bandeau__nom,
.bandeau__jour--actif .bandeau__num { color: #fff; }
.bandeau__jour--actif .bandeau__pastille:not(:empty) {
    background: #fff; color: var(--navy-700);
}

/* ---- Techniciens supplementaires (formulaire) --------------------------- */
.renforts { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .5rem; }
.renfort  { display: flex; gap: .4rem; align-items: center; }
.renfort .select { flex: 1; min-width: 0; }
.renfort__retirer { flex-shrink: 0; padding: .35rem .5rem; color: var(--text-faint); }
.renfort__retirer:hover { color: var(--red); }
.renfort__retirer .ico { width: 15px; height: 15px; }

/* ---- Pose au planning ---------------------------------------------------- */
/* Une pose se reconnait a son etiquette et a son liseret pointille :
   meme fiche, autre rendez-vous. */
.agenda__item--pose { border-left-style: dashed; }
.agenda__heure em {
    font-style: normal; font-weight: 700; text-transform: uppercase;
    font-size: .58rem; letter-spacing: .04em;
    color: var(--accent-dark);
}

/* ---- Photos jointes aux notes ---------------------------------------- */
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: .5rem;
    margin: .2rem 0 .6rem;
}
.galerie__item { margin: 0; }
.galerie__item > a,
.galerie--fil a {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-2);
}
.galerie__item > a:hover,
.galerie--fil a:hover { border-color: var(--accent); }
.galerie img {
    display: block;
    width: 100%; height: 92px;
    object-fit: cover;
}
.galerie figcaption {
    display: flex; align-items: center; justify-content: space-between;
    gap: .3rem; margin-top: .2rem;
}
.galerie__lien {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .7rem; font-weight: 600;
    color: var(--text-muted);
}
.galerie__lien:hover { color: var(--accent-dark); }
.galerie__lien .ico { width: 13px; height: 13px; }
.galerie__croix {
    display: inline-flex; padding: 2px;
    border: 0; background: none; cursor: pointer;
    color: var(--text-faint);
}
.galerie__croix:hover { color: var(--red); }
.galerie__croix .ico { width: 14px; height: 14px; }
.galerie figcaption form { margin: 0; }

/* Dans le fil d'historique les vignettes restent discretes */
.galerie--fil {
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: .3rem; margin: .35rem 0 0;
}
.galerie--fil img { height: 56px; }

/* Le bouton « Ajouter des photos » : le champ natif est illisible,
   c'est le label qui porte l'apparence. */
.joindre {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .5rem; margin-bottom: .5rem;
}
.joindre label { margin: 0; cursor: pointer; }
.joindre input[type="file"]:focus-visible + span { outline: 2px solid var(--accent); }

.apercu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: .35rem; margin-bottom: .6rem;
}
.apercu img {
    display: block;
    width: 100%; height: 64px;
    object-fit: cover;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}

/* ---- Choix de la date a la prise d'intervention ----------------------- */
/* Meme grille que le planning : on voit d'un coup d'oeil les journees
   deja chargees avant de poser un rendez-vous. */
.choix-date { margin-top: .5rem; }
.choix-date__barre {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-bottom: .4rem;
}
.choix-date__mois { font-size: .9rem; text-transform: capitalize; }
.choix-date__grille {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.choix-jour {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; min-height: 46px; padding: .3rem .1rem;
    border: 0; background: var(--surface); color: var(--text);
    font: inherit; cursor: pointer;
}
.choix-jour:hover { background: var(--surface-2); }
.choix-jour__num { font-size: .85rem; font-weight: 600; line-height: 1; }
/* La pastille garde sa place meme vide : les colonnes restent alignees.
   Le chiffre est centre par flex : cale a gauche, il debordait de l'arrondi. */
.choix-jour__pastille {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 3px;
    border-radius: 999px;
    font-size: .62rem; font-weight: 700; line-height: 1;
    color: transparent;
}
.choix-jour__pastille:not(:empty) { background: var(--navy-700); color: #fff; }
.choix-jour--hors  { opacity: .4; }
.choix-jour--passe .choix-jour__num { color: var(--text-faint); }
.choix-jour--auj   { background: var(--accent-soft); }
.choix-jour--auj .choix-jour__num { color: var(--accent-dark); font-weight: 800; }
.choix-jour--actif { background: var(--navy-700); }
.choix-jour--actif .choix-jour__num { color: #fff; }
.choix-jour--actif .choix-jour__pastille:not(:empty) { background: #fff; color: var(--navy-700); }

.choix-date__heure {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .4rem; margin-top: .6rem;
}
.choix-date__heure label { margin: 0; font-size: .8rem; font-weight: 600; }
.choix-date__heure .input { width: auto; min-width: 7.5rem; }

@media (max-width: 640px) {
    .choix-jour { min-height: 48px; }
    .choix-date__heure .input { flex: 1 1 100%; width: 100%; }
}

/* ---- Agenda mensuel -------------------------------------------------- */
.agenda {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: .85rem;
}
.agenda__jour {
    padding: .4rem .3rem;
    background: var(--surface-2);
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-faint); text-align: center;
}
.agenda__case {
    display: flex; flex-direction: column; gap: 2px;
    min-height: 92px;
    padding: .25rem .25rem .35rem;
    background: var(--surface);
}
.agenda__case--weekend { background: var(--surface-2); }
.agenda__case--hors    { opacity: .45; }
.agenda__case--aujourdhui { background: var(--accent-soft); }

.agenda__date {
    align-self: flex-start;
    min-width: 22px; padding: 1px 5px;
    border-radius: 999px;
    font-size: .74rem; font-weight: 700;
    color: var(--text-muted); text-align: center;
}
.agenda__date:hover { background: var(--surface-2); color: var(--text); }
.agenda__case--aujourdhui .agenda__date { background: var(--accent); color: #fff; }

.agenda__item {
    display: flex; flex-direction: column; gap: 0;
    padding: 2px 4px;
    border-left: 3px solid var(--status-color, var(--border-2));
    border-radius: 3px;
    background: var(--surface-2);
    font-size: .66rem; line-height: 1.25;
    color: var(--text);
    overflow: hidden;
}
.agenda__item:hover { background: var(--border); color: var(--text); }
.agenda__heure  { font-weight: 700; color: var(--text-muted); }
.agenda__client { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Le technicien ressort en gras : c'est lui qu'on cherche d'abord du regard */
.agenda__tech {
    font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--navy-700);
}
.agenda__plus {
    padding: 1px 4px;
    font-size: .64rem; font-weight: 600;
    color: var(--text-faint);
}

/* La semaine dispose de sept colonnes pour une seule ligne : les cases
   respirent, et rien n'y est tronque. */
/* La colonne d'une journee ne s'interpose pas dans la grille : ses deux
   enfants — en-tete et case — s'y placent directement. */
.agenda__col { display: contents; }
.agenda--semaine .agenda__case { min-height: 200px; padding: .35rem .3rem .5rem; }
.agenda--semaine .agenda__item  { font-size: .68rem; padding: 3px 5px; }
.agenda__jour--aujourdhui { color: var(--accent-dark); background: var(--accent-soft); }
.agenda__jour strong { display: block; font-size: .95rem; color: var(--text); }
.agenda__jour--aujourdhui strong { color: var(--accent-dark); }
a.agenda__jour:hover { background: var(--border); color: var(--text); }
a.agenda__jour:hover strong { color: var(--text); }

/* Sur telephone la grille reste lisible en reduisant le detail */
@media (max-width: 640px) {
    /* Sept colonnes sur un telephone deviennent illisibles : la semaine
       s'empile, chaque journee gardant son en-tete au-dessus de sa case. */
    .agenda--semaine { grid-template-columns: 1fr; gap: 0; }
    .agenda__col     { display: block; border-bottom: 1px solid var(--border); }
    .agenda--semaine .agenda__jour {
        display: flex; align-items: baseline; gap: .35rem;
        text-align: left; padding: .45rem .7rem;
    }
    .agenda--semaine .agenda__jour strong { display: inline; font-size: .88rem; }
    .agenda--semaine .agenda__case { min-height: 0; padding: .3rem .5rem .5rem; }
    /* Une journee vide n'a pas besoin d'occuper de la hauteur */
    .agenda--semaine .agenda__case:empty { display: none; }
    .agenda--semaine .agenda__heure { display: inline; }
    .agenda--semaine .agenda__item  { font-size: .74rem; }

    .agenda__case { min-height: 62px; padding: .2rem .15rem; }
    .agenda__heure { display: none; }
    .agenda__tech  { font-size: .58rem; }
    .agenda__item { font-size: .6rem; padding: 1px 3px; }
    .agenda__jour { font-size: .6rem; }
}

/* ---- Priorites du tableau de bord ----------------------------------- */
.priorites {
    display: grid; gap: .5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: .85rem;
}
.priorite {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .7rem .8rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--border-2);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: transform .12s, box-shadow .12s;
}
.priorite:hover { transform: translateY(-1px); box-shadow: var(--shadow); color: var(--text); }
.priorite__nb {
    font-size: 1.6rem; font-weight: 800; line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--navy-700);
}
.priorite__label {
    display: flex; align-items: center; gap: .35rem;
    font-size: .84rem; font-weight: 650;
}
.priorite__label .ico { width: 15px; height: 15px; }
.priorite__hint { font-size: .7rem; color: var(--text-faint); }

/* Rien ne peut avancer sans technicien : cette case passe devant. */
.priorite--alerte { border-left-color: var(--red); }
.priorite--alerte .priorite__nb { color: var(--red); }
.priorite--jour { border-left-color: var(--accent); }
.priorite--jour .priorite__nb { color: var(--accent-dark); }

@media (min-width: 700px) {
    .priorites { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Interventions groupees par journee ----------------------------- */
/* L'en-tete se place HORS de la carte : « .card » porte overflow:hidden,
   qui empecherait position:sticky de fonctionner. */
.jour-groupe__tete {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    padding: .45rem .2rem .35rem;
    margin-bottom: .35rem;
    font-size: .82rem; font-weight: 700;
    text-transform: capitalize;
    color: var(--navy-700);
    border-bottom: 2px solid var(--border);
    background: var(--bg);
    position: sticky; top: calc(var(--header-h) + var(--safe-top)); z-index: 10;
}
.jour-groupe__tete small {
    margin-left: auto;
    font-weight: 500; text-transform: none;
    color: var(--text-faint);
}
.jour-groupe--aujourdhui .jour-groupe__tete {
    color: var(--accent-dark);
    border-bottom-color: var(--accent);
}

/* ---- Barres de repartition ----------------------------------------- */
.bars { display: grid; gap: .55rem; }
.bar__top { display: flex; justify-content: space-between; gap: .5rem; font-size: .83rem; margin-bottom: .22rem; }
.bar__top strong { font-weight: 650; }
.bar__track { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 4px; background: var(--navy-600); transition: width .3s; }

/* ---- Pagination ---------------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 0; }
.pagination span { font-size: .82rem; color: var(--text-muted); }

/* ---- Divers -------------------------------------------------------- */
.muted   { color: var(--text-muted); }
.faint   { color: var(--text-faint); }
.small   { font-size: .8rem; }
.tiny    { font-size: .73rem; }
.strong  { font-weight: 700; }
.num     { font-variant-numeric: tabular-nums; }
.right   { text-align: right; }
.center  { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; }
.hide { display: none !important; }
.divider { height: 1px; background: var(--border); margin: .9rem 0; }

.copy-field { display: flex; gap: .4rem; }
.copy-field input {
    flex: 1; min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Liste de suggestions du champ client */
.suggest { position: relative; }
.suggest__list {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 3px);  /* recalculé en JS */
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    max-height: 220px; overflow-y: auto;
    list-style: none; margin: 0; padding: .25rem;
}
.suggest__list li {
    padding: .5rem .6rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .86rem;
}
.suggest__list li:hover, .suggest__list li.is-active { background: var(--surface-2); }
.suggest__list small { display: block; color: var(--text-faint); font-size: .75rem; }
.suggest__label { display: block; font-weight: 550; }
.suggest__badge {
    display: inline-block; margin-top: .15rem;
    padding: .05rem .35rem;
    border-radius: 4px;
    background: var(--accent-soft); color: var(--accent-dark);
    font-size: .68rem; font-weight: 700; font-style: normal;
}

/* =====================================================================
   Ecrans larges
   ===================================================================== */
@media (min-width: 640px) {
    .stat-grid { grid-template-columns: repeat(4, 1fr); }
    .field-row { grid-template-columns: 1fr 1fr; }
    .field-row--3 { grid-template-columns: repeat(3, 1fr); }
    .calc-strip { grid-template-columns: repeat(4, 1fr); }
    .header__brand span { display: inline; }
    .main { padding: 1.25rem 1.25rem calc(var(--nav-h) + var(--safe-bottom) + 1.5rem); }
    h1 { font-size: 1.5rem; }
}

@media (min-width: 1000px) {
    .tabbar { display: none; }
    .fab { display: none; }
    .more-sheet { display: none; }
    .main { padding: 1.5rem 1.75rem 2.5rem; max-width: 1400px; }

    .sidebar {
        display: flex; flex-direction: column;
        width: var(--sidebar-w); flex-shrink: 0;
        padding: .9rem .7rem;
        background: var(--surface);
        border-right: 1px solid var(--border);
        position: sticky; top: calc(var(--header-h) + var(--safe-top));
        height: calc(100vh - var(--header-h) - var(--safe-top));
        overflow-y: auto;
    }
    .sidebar__group + .sidebar__group { margin-top: 1.1rem; }
    .sidebar__label {
        padding: 0 .6rem .35rem;
        font-size: .68rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .06em; color: var(--text-faint);
    }
    .sidebar a {
        display: flex; align-items: center; gap: .6rem;
        padding: .52rem .6rem;
        border-radius: var(--radius-sm);
        font-size: .875rem; font-weight: 600;
        color: var(--text-muted);
    }
    .sidebar a:hover { background: var(--surface-2); color: var(--text); }
    .sidebar a.is-active { background: var(--navy-700); color: #fff; }
    .sidebar a.is-active .ico { stroke: #fff; }
    .sidebar .ico { width: 18px; height: 18px; stroke: var(--text-faint); }
    .sidebar a:hover .ico { stroke: var(--text-muted); }
    .sidebar__count {
        margin-left: auto;
        background: var(--accent); color: #fff;
        font-size: .68rem; font-weight: 700;
        padding: .05rem .4rem; border-radius: 999px;
    }

    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; align-items: start; }
    .grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: .85rem; align-items: start; }
}

/* =====================================================================
   Impression
   ===================================================================== */
@media print {
    .header, .sidebar, .tabbar, .fab, .btn, .filters { display: none !important; }
    .main { padding: 0; }
    .card { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
    body { background: #fff; font-size: 11pt; }
}

/* =====================================================================
   Mode sombre — suit le reglage du telephone
   ===================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:        #0b1220;
        --surface:   #131c2e;
        --surface-2: #1a2438;
        --border:    #253048;
        --border-2:  #33415c;

        --text:       #e2e8f0;
        --text-muted: #94a3b8;
        --text-faint: #64748b;

        --navy-700: #1e3a5f;
        --accent-soft: #2a1c0f;

        --green-soft:  #052e16;
        --red-soft:    #3f1212;
        --amber-soft:  #3a2609;
        --blue-soft:   #10254d;
        --violet-soft: #2a1a4d;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow:    0 2px 8px rgba(0, 0, 0, .45);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6);
    }
    .alert--success { color: #86efac; border-color: #14532d; }
    .alert--error   { color: #fca5a5; border-color: #7f1d1d; }
    .alert--warning { color: #fcd34d; border-color: #78350f; }
    .alert--info    { color: #93c5fd; border-color: #1e3a8a; }
    .calc-strip { border-color: #7c2d12; }
    .next-step .card__head h2 { color: #fdba74; }
    .calc-strip dt { color: #fdba74; }
    .calc-strip dd { color: #fed7aa; }
    .badge--green { color: #86efac; } .badge--red { color: #fca5a5; }
    .badge--amber { color: #fcd34d; } .badge--blue { color: #93c5fd; }
    .badge--violet { color: #c4b5fd; }
}