/* ============================================================
   KronoFix — thèmes sombre (défaut) & clair doux
   Les composants ne consomment que des variables : le thème
   se bascule en surchargeant les tokens sous [data-theme].
   ============================================================ */

:root {
    /* Sombre = valeurs par défaut */
    --bg: #0b1020;
    --surface: rgba(23, 29, 48, .88);
    --surface-solid: #171d30;
    --border: #262f4a;
    --text: #e9edf6;
    --text-soft: #97a1ba;
    --accent: #5b86ff;
    --accent-2: #8a63ff;
    --accent-soft: rgba(91, 134, 255, .16);
    --accent-strong: #7da0ff;
    --danger: #ff7b6e;
    --danger-soft: rgba(255, 99, 88, .16);
    --success: #4fd6a4;
    --success-soft: rgba(61, 214, 152, .14);
    --warning: #ffc46b;
    --warning-soft: rgba(255, 183, 77, .14);
    --radius: 14px;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .35);

    /* Tokens de surface (remplacent les couleurs jadis codées en dur) */
    --body-grad:
        radial-gradient(900px 500px at 85% -10%, rgba(124, 91, 255, .22), transparent 60%),
        radial-gradient(700px 400px at -10% 20%, rgba(47, 107, 255, .18), transparent 55%),
        linear-gradient(165deg, #0d1226 0%, #0b1020 45%, #141026 100%);
    --topbar-bg: rgba(13, 18, 34, .75);
    --hover: rgba(255, 255, 255, .06);
    --raise: rgba(255, 255, 255, .08);
    --input-bg: rgba(10, 14, 28, .6);
    --sunken: rgba(10, 14, 28, .5);
    --accent-tint: rgba(91, 134, 255, .09);
    --placeholder: #5d6680;
}

/* Clair doux — slate reposant, jamais de blanc pur */
:root[data-theme="light"] {
    --bg: #e6e9f2;
    --surface: rgba(246, 247, 251, .86);
    --surface-solid: #f1f3f9;
    --border: #d3d8e6;
    --text: #222838;
    --text-soft: #5a6178;
    --accent: #4568d8;
    --accent-2: #6d4fc8;
    --accent-soft: rgba(69, 104, 216, .12);
    --accent-strong: #3a5fd0;
    --danger: #c8372b;
    --danger-soft: rgba(200, 55, 43, .1);
    --success: #12805c;
    --success-soft: rgba(18, 128, 92, .12);
    --warning: #b26a00;
    --warning-soft: rgba(178, 106, 0, .14);
    --shadow: 0 1px 2px rgb(30 40 70 / .06), 0 10px 30px rgb(30 40 70 / .1);

    --body-grad:
        radial-gradient(900px 500px at 85% -10%, rgba(138, 99, 255, .1), transparent 60%),
        radial-gradient(700px 400px at -10% 20%, rgba(91, 134, 255, .12), transparent 55%),
        linear-gradient(165deg, #edeff6 0%, #e6e9f2 45%, #efe9f6 100%);
    --topbar-bg: rgba(238, 240, 247, .82);
    --hover: rgba(30, 40, 80, .05);
    --raise: rgba(30, 40, 80, .045);
    --input-bg: #edf0f7;
    --sunken: rgba(30, 40, 80, .035);
    --accent-tint: rgba(69, 104, 216, .08);
    --placeholder: #98a0b2;
}

/* ============================================================
   Palettes d'accent — choisies dans Réglages › Apparence.
   Le mode clair/sombre reste indépendant : chaque palette définit
   ses accents pour les deux modes. Sans data-palette : « Horloger »
   (le bleu de la marque, valeurs ci-dessus).
   ============================================================ */

/* Cuivre — l'atelier, chaleureux */
:root[data-palette="cuivre"] {
    --accent: #e39a5f; --accent-2: #c97b3f; --accent-strong: #edaf7c;
    --accent-soft: rgba(224, 147, 84, .16); --accent-tint: rgba(224, 147, 84, .09);
}
:root[data-palette="cuivre"][data-theme="light"] {
    --accent: #a65e22; --accent-2: #8a4a1b; --accent-strong: #8f4f1d;
    --accent-soft: rgba(166, 94, 34, .12); --accent-tint: rgba(166, 94, 34, .08);
}

/* Émeraude — calme, végétal */
:root[data-palette="emeraude"] {
    --accent: #45c89a; --accent-2: #2aa184; --accent-strong: #66d8b0;
    --accent-soft: rgba(69, 200, 154, .15); --accent-tint: rgba(69, 200, 154, .09);
}
:root[data-palette="emeraude"][data-theme="light"] {
    --accent: #0f7e5b; --accent-2: #0b6853; --accent-strong: #0c6e51;
    --accent-soft: rgba(15, 126, 91, .12); --accent-tint: rgba(15, 126, 91, .08);
}

/* Améthyste — feutré, précieux */
:root[data-palette="amethyste"] {
    --accent: #a78bfa; --accent-2: #8464e8; --accent-strong: #bca5fc;
    --accent-soft: rgba(167, 139, 250, .16); --accent-tint: rgba(167, 139, 250, .09);
}
:root[data-palette="amethyste"][data-theme="light"] {
    --accent: #6d4fc8; --accent-2: #5940a8; --accent-strong: #5e43b8;
    --accent-soft: rgba(109, 79, 200, .12); --accent-tint: rgba(109, 79, 200, .08);
}

/* Minuit — acier bleuté, très reposant */
:root[data-palette="minuit"] {
    --accent: #7fa6cc; --accent-2: #5e86ad; --accent-strong: #98badd;
    --accent-soft: rgba(127, 166, 204, .16); --accent-tint: rgba(127, 166, 204, .09);
}
:root[data-palette="minuit"][data-theme="light"] {
    --accent: #3a6285; --accent-2: #2b4d6b; --accent-strong: #33587a;
    --accent-soft: rgba(58, 98, 133, .12); --accent-tint: rgba(58, 98, 133, .08);
}

/* Sable — chaud, neutre, doux pour les yeux */
:root[data-palette="sable"] {
    --accent: #d9bc8f; --accent-2: #bc9c68; --accent-strong: #e5cca5;
    --accent-soft: rgba(217, 188, 143, .16); --accent-tint: rgba(217, 188, 143, .09);
}
:root[data-palette="sable"][data-theme="light"] {
    --accent: #8a6f3e; --accent-2: #6f5a32; --accent-strong: #7a6238;
    --accent-soft: rgba(138, 111, 62, .12); --accent-tint: rgba(138, 111, 62, .08);
}

/* Contraste — pensée pour le daltonisme (base Okabe-Ito) :
   accent bleu univoque, et les sémantiques (succès / alerte / danger)
   restent distinguables quel que soit le type de vision des couleurs. */
:root[data-palette="contraste"] {
    --accent: #56b4e9; --accent-2: #0072b2; --accent-strong: #7cc4ee;
    --accent-soft: rgba(86, 180, 233, .18); --accent-tint: rgba(86, 180, 233, .1);
    --success: #00c48f; --success-soft: rgba(0, 196, 143, .15);
    --warning: #e69f00; --warning-soft: rgba(230, 159, 0, .15);
    --danger: #e97132; --danger-soft: rgba(233, 113, 50, .16);
}
:root[data-palette="contraste"][data-theme="light"] {
    --accent: #0072b2; --accent-2: #005a8f; --accent-strong: #005f96;
    --accent-soft: rgba(0, 114, 178, .12); --accent-tint: rgba(0, 114, 178, .08);
    --success: #007a59; --success-soft: rgba(0, 122, 89, .12);
    --warning: #9a6b00; --warning-soft: rgba(154, 107, 0, .14);
    --danger: #c24f00; --danger-soft: rgba(194, 79, 0, .12);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--body-grad);
    background-attachment: fixed;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: color .2s, background-color .2s;
}

/* ---------- Barre du haut ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 28px;
    background: var(--topbar-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}

.brand-mark {
    display: inline-flex;
    width: 40px;
    height: 40px;
}

.brand-mark svg { width: 100%; height: 100%; display: block; }

.brand-name { font-weight: 650; }

.brand-by {
    font-size: 12px;
    color: var(--text-soft);
    align-self: flex-end;
    padding-bottom: 2px;
}

.topnav { display: flex; align-items: center; gap: 6px; }

.topnav a {
    text-decoration: none;
    color: var(--text-soft);
    font-weight: 550;
    padding: 9px 16px;
    border-radius: 10px;
    transition: background .15s, color .15s;
}

.topnav a:hover { background: var(--hover); color: var(--text); }
.topnav a.active { background: var(--accent-soft); color: var(--accent-strong); }

.topnav .logout { font-size: 17px; padding: 9px 12px; }

/* Bascule de thème */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--text-soft);
    padding: 9px 11px;
    border-radius: 10px;
    transition: background .15s;
}

.theme-toggle:hover { background: var(--hover); }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: inline; }

/* ---------- Barre de sélection du technicien ---------- */
.techbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 28px;
    background: var(--sunken);
    border-bottom: 1px solid var(--border);
}

.techbar-lbl { font-size: 13px; font-weight: 600; color: var(--text-soft); margin-right: 4px; }

.techbar form { display: inline; }

/* Bandeau de dépannage super-admin : volontairement voyant, on ne doit
   jamais oublier qu'on agit sur la boutique d'un autre. */
.depannage-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 28px;
    font-size: 14px;
    color: #7a3e00;
    background: repeating-linear-gradient(45deg, #ffe4b3, #ffe4b3 12px, #ffd894 12px, #ffd894 24px);
    border-bottom: 2px solid #e8a33d;
}
.depannage-bar .btn {
    background: #7a3e00;
    color: #fff;
    border: none;
}
:root[data-theme="dark"] .depannage-bar { color: #ffdca6; background: #4a2f0a; }

.techbtn {
    padding: 6px 15px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-soft);
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s;
}

.techbtn:hover { color: var(--text); border-color: var(--text-soft); }

.techbtn.active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
}

/* ---------- Conteneur ---------- */
.container {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 20px 80px;
}

.container-wide { max-width: 1100px; }

/* ---------- Flashs ---------- */
.flash {
    padding: 13px 18px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-weight: 500;
    border: 1px solid transparent;
}

.flash-error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); }
.flash-success { background: var(--success-soft); color: var(--success); border-color: var(--success-soft); }

/* Invitation à monter de formule : informative, pas punitive. */
.flash-upsell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: rgba(255, 196, 107, .12);
    color: var(--warning);
    border-color: rgba(255, 196, 107, .35);
}
.flash-upsell .btn { flex-shrink: 0; }

/* ---------- Étapes du parcours ---------- */
.steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 36px;
    flex-wrap: wrap;
}

.step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 550;
    padding: 6px 12px;
    border-radius: 999px;
}

.step .dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--raise);
    color: var(--text-soft);
    font-size: 12.5px;
    font-weight: 700;
}

.step.done .dot { background: var(--success-soft); color: var(--success); }
.step.current { background: var(--accent-soft); color: var(--accent-strong); }
.step.current .dot { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }

/* ---------- Cartes ---------- */
.card {
    background: var(--surface);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
}

.card + .card { margin-top: 20px; }

.card h1, .card h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.card .subtitle {
    color: var(--text-soft);
    margin: 0 0 26px;
}

/* ---------- Formulaires ---------- */
.field { margin-bottom: 20px; }

.field label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 7px;
}

.field .hint { color: var(--text-soft); font-size: 13px; margin-top: 6px; }

input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="password"], select, textarea {
    width: 100%;
    padding: 13px 15px;
    font-size: 16px;
    font-family: inherit;
    border: 1.5px solid var(--border);
    border-radius: 11px;
    background: var(--input-bg);
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}

input::placeholder, textarea::placeholder { color: var(--placeholder); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

select option { background: var(--surface-solid); color: var(--text); }

textarea { resize: vertical; min-height: 110px; }

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

.tiers-block {
    border: 1.5px dashed var(--border);
    border-radius: var(--radius);
    padding: 18px 20px 6px;
    margin-bottom: 20px;
}

.tiers-block h3 { margin: 0 0 6px; font-size: 15.5px; }

/* ---------- Saisie IMEI (étape 1) ---------- */
.imei-hero { text-align: center; padding: 48px 32px; }

.imei-hero h1 { font-size: 27px; margin-bottom: 8px; }

.imei-input {
    font-size: 27px !important;
    letter-spacing: 5px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 18px !important;
    border-radius: 14px !important;
}

.imei-help {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--text-soft);
    font-size: 14px;
    background: var(--hover);
    padding: 8px 14px;
    border-radius: 999px;
}

.imei-help code {
    background: var(--input-bg);
    border: 1px solid var(--border);
    padding: 1px 8px;
    border-radius: 6px;
    font-weight: 700;
    color: var(--accent-strong);
}

/* ---------- Déverrouillage (code / schéma / mot de passe) ---------- */
[hidden] { display: none !important; }

.unlock-methods { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.unlock-methods button {
    padding: 10px 16px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-soft);
    background: var(--input-bg);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s;
}

.unlock-methods button:hover { color: var(--text); border-color: var(--text-soft); }

.unlock-methods button.active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(91, 134, 255, .3);
}

.unlock-panel { margin: 6px 0 4px; }

/* Clavier téléphone */
.code-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
    min-height: 30px;
}

.code-dots { font-size: 20px; letter-spacing: 6px; color: var(--accent-strong); }
.code-value { font-size: 15px; color: var(--text-soft); font-variant-numeric: tabular-nums; }

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 76px);
    gap: 10px;
    justify-content: center;
}

.keypad button {
    height: 58px;
    font-size: 22px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text);
    background: var(--raise);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: background .12s, transform .05s;
}

.keypad button:hover { background: var(--accent-soft); }
.keypad button:active { transform: scale(.95); }
.keypad .keypad-alt { font-size: 19px; color: var(--text-soft); }

/* Grille de schéma 3×3 */
.pattern-wrap {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    place-items: center;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: 18px;
}

.pattern-wrap svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pattern-dot {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--raise);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .12s;
    padding: 0;
}

.pattern-dot::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-soft);
    position: absolute;
}

.pattern-dot span {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--accent-2);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    display: grid;
    place-items: center;
    opacity: 0;
}

.pattern-dot.on { border-color: var(--accent-2); background: var(--accent-soft); }
.pattern-dot.on::after { background: #b9a2ff; }
.pattern-dot.on span { opacity: 1; }

.pattern-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.pattern-actions .btn { padding: 8px 14px; font-size: 14px; }

/* ---------- Appareil déjà connu ---------- */
.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 6px;
}

@media (max-width: 640px) { .choice-grid { grid-template-columns: 1fr; } }

.choice {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .15s;
}

.choice:hover { border-color: var(--accent); }

.choice-icon { font-size: 30px; }

.choice h3 { margin: 0; font-size: 17px; }

.choice p { margin: 0 0 12px; flex: 1; font-size: 14px; }

/* ---------- Suggestions du champ unique ---------- */
.suggest-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    text-align: left;
}

.suggest-client {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, background .15s;
}

.suggest-client:hover { border-color: var(--accent); background: var(--accent-tint); }

.suggest-avatar { font-size: 22px; }

.suggest-main { flex: 1; display: flex; flex-direction: column; }

.suggest-name { font-weight: 700; }

.suggest-go { color: var(--accent-strong); font-weight: 800; font-size: 18px; }

/* ---------- Résultat du check IMEI ---------- */
.device-result {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--radius);
    margin-bottom: 26px;
    border: 1px solid transparent;
}

.device-result.found { background: var(--success-soft); color: var(--success); border-color: var(--success-soft); }
.device-result.unknown { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-soft); }
.device-result.blacklist { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); }

.device-result .icon { font-size: 26px; }
.device-result strong { display: block; font-size: 17px; }
.device-result span { font-size: 14px; opacity: .85; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    font-size: 16px;
    font-weight: 650;
    font-family: inherit;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s, transform .05s, background .15s;
}

.btn:active { transform: scale(.98); }

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    box-shadow: 0 6px 20px rgba(91, 134, 255, .3);
}
.btn-primary:hover { filter: brightness(1.12); }

.btn-ghost { background: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--hover); color: var(--text); }

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--border);
}
.btn-outline:hover { border-color: var(--text-soft); }

.btn-lg { padding: 16px 34px; font-size: 17px; }
.btn-block { width: 100%; }

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    gap: 12px;
}

/* ---------- Récapitulatif ---------- */
.recap-section { margin-bottom: 26px; }

.recap-section h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-soft);
    margin: 0 0 10px;
}

.recap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px 24px;
}

.recap-item .k { font-size: 13px; color: var(--text-soft); }
.recap-item .v { font-weight: 600; }

/* ---------- Connexion ---------- */
.login-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8vh;
}

.login-card { width: 100%; max-width: 400px; }

/* Rappel compact des 3 formules sous le formulaire de connexion. */
.login-formules {
    width: 100%;
    max-width: 400px;
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.login-formule {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.login-formule.is-reco { border-color: var(--accent); }
.lf-nom { font-weight: 750; font-size: 14px; }
.lf-slogan { font-size: 11px; color: var(--text-soft); line-height: 1.3; min-height: 28px; }
.lf-prix { font-weight: 700; font-size: 13.5px; margin-top: 2px; }
.lf-prix small { font-weight: 500; color: var(--text-soft); font-size: 10.5px; }
.login-formules-lien {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 13px;
    color: var(--text-soft);
    text-decoration: none;
    padding-top: 2px;
}
.login-formules-lien:hover { color: var(--text); }

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 30px;
}

.login-logo {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
}

.login-logo svg { width: 100%; height: 100%; display: block; }

.login-brand > div { text-align: left; }

.login-title { font-size: 27px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
.login-title-accent { color: var(--accent-strong); }

/* Case « se souvenir de moi » */
.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: var(--text-soft);
    cursor: pointer;
    margin: 4px 0 22px;
    user-select: none;
}

.check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.check-row:hover { color: var(--text); }

/* ---------- Réglages ---------- */
.subnav { display: flex; gap: 8px; margin-bottom: 20px; }

.subnav a {
    text-decoration: none;
    color: var(--text-soft);
    font-weight: 600;
    font-size: 14.5px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    transition: all .15s;
}

.subnav a:hover { color: var(--text); border-color: var(--text-soft); }
.subnav a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
}

.add-forms { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }

.add-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.add-form strong { min-width: 90px; font-size: 14px; }
.add-form select, .add-form input[type="text"] { width: auto; flex: 1; min-width: 140px; padding: 10px 13px; }

.price-form { display: flex; align-items: center; gap: 7px; }
.price-input { width: 90px !important; text-align: right; padding: 8px 10px !important; font-variant-numeric: tabular-nums; }

.btn-sm { padding: 8px 11px; font-size: 14px; }

.logo-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.logo-preview img {
    max-height: 54px;
    max-width: 160px;
    background: #fff;
    border-radius: 8px;
    padding: 6px;
}

input[type="file"] {
    width: 100%;
    color: var(--text-soft);
    font-size: 14px;
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 9px 16px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--raise);
    color: var(--text);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* ---------- Données / export ---------- */
.export-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 24px;
    background: var(--raise);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 6px;
}

.export-count { font-size: 34px; font-weight: 800; line-height: 1; }

.legal-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.legal-list li { font-size: 14px; }

/* ---------- Catalogue en arborescence ---------- */
.marque-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }

.marque-pills a {
    text-decoration: none;
    color: var(--text-soft);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    transition: all .15s;
}

.marque-pills a:hover { color: var(--text); border-color: var(--text-soft); }
.marque-pills a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
}

.marque-section { margin-bottom: 18px; }

.marque-titre {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-soft);
    margin: 18px 0 10px;
}

.acc {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
}

.acc summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    cursor: pointer;
    font-weight: 650;
    list-style: none;
    transition: background .12s;
}

.acc summary::-webkit-details-marker { display: none; }

.acc summary::before {
    content: '▸';
    color: var(--text-soft);
    margin-right: 2px;
    transition: transform .15s;
    flex-shrink: 0;
}

.acc[open] > summary::before { transform: rotate(90deg); }

.acc summary > span:first-of-type { flex: 1; }

.acc summary:hover { background: var(--accent-tint); }

.acc-famille > summary { background: var(--sunken); }

.acc-count {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--accent-strong);
    background: var(--accent-soft);
    padding: 3px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

.acc-modele {
    margin: 8px 12px;
    border-radius: 10px;
}

.acc-modele > summary { font-weight: 600; padding: 11px 14px; }

.acc-meta { white-space: nowrap; font-weight: 500; }

.acc-table {
    width: 100%;
    border-collapse: collapse;
}

.acc-table td {
    padding: 8px 16px;
    border-top: 1px solid var(--border);
}

/* ---------- Recherche client instantanée ---------- */
.search-live {
    position: relative;
    margin-bottom: 18px;
}

.search-live-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: .7;
    pointer-events: none;
}

.search-live input {
    width: 100%;
    padding: 16px 18px 16px 50px !important;
    font-size: 17px;
    border-radius: 14px !important;
}

.is-searching .search-fallback { display: none; }

.search-results { display: flex; flex-direction: column; gap: 12px; }

.search-empty {
    color: var(--text-soft);
    padding: 26px;
    text-align: center;
}

.search-client {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.search-client-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    background: var(--sunken);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.search-client-name { font-weight: 700; font-size: 15.5px; }

a.search-client-link { text-decoration: none; color: var(--text); }
a.search-client-link:hover { background: var(--accent-tint); }

.search-dossier {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}

.search-dossier:last-child { border-bottom: none; }
.search-dossier:hover { background: var(--accent-tint); }

.search-dossier-appareil { flex: 1; font-weight: 550; }

@media (max-width: 640px) {
    .search-dossier { flex-wrap: wrap; gap: 6px 10px; }
    .search-dossier-appareil { flex-basis: 100%; order: 3; }
}

/* ---------- Petits gestes (copie, liens, stats client) ---------- */
[data-controller="copy"] {
    cursor: copy;
    border-bottom: 1px dashed var(--text-soft);
    transition: color .15s;
}

[data-controller="copy"]:hover { color: var(--accent-strong); }
[data-controller="copy"].copied { color: var(--success); border-bottom-color: transparent; }

.link-soft { color: inherit; text-decoration: none; }
.link-soft:hover { color: var(--accent-strong); }

/* Bandeau client : identité + coordonnées + QR, pleine largeur */
.client-header {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    padding: 22px 26px;
    margin-bottom: 16px;
}

.ch-identity { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }

.ch-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 27px;
    background: var(--raise);
    flex-shrink: 0;
}

.ch-identity h1 { margin: 0 0 2px; font-size: 23px; font-weight: 800; letter-spacing: -.4px; white-space: nowrap; }
.ch-identity .muted { font-size: 13px; }

.ch-contacts {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex: 1;
    flex-wrap: nowrap;
    min-width: 240px;
}

/* Téléphone + e-mail empilés (e-mail sous le numéro) */
.ch-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 2 1 300px;
    min-width: 250px;
}

.ch-stack .ch-item { flex: 0 0 auto; }
.ch-stack .ch-val-sm { white-space: normal; overflow: visible; overflow-wrap: anywhere; }

.ch-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 15px;
    background: var(--raise);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, background .15s;
    flex: 1 1 auto;
    min-width: 0;
}

a.ch-item:hover { border-color: var(--accent); background: var(--accent-tint); }

.ch-ico { font-size: 19px; flex-shrink: 0; }

.ch-body { display: flex; flex-direction: column; min-width: 0; }

.ch-lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text-soft);
    font-weight: 650;
    white-space: nowrap;
}

.ch-val {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-val-sm { font-size: 13.5px; font-weight: 600; letter-spacing: 0; }

.ch-sub {
    font-size: 11.5px;
    color: var(--text-soft);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-qr { text-align: center; flex-shrink: 0; }

.ch-qr img {
    width: 88px;
    height: 88px;
    display: block;
    background: #fff;
    border-radius: 10px;
    padding: 6px;
}

.ch-qr span { display: block; font-size: 10.5px; color: var(--text-soft); margin-top: 6px; }

@media (max-width: 900px) {
    .ch-contacts { flex-wrap: wrap; }
    .ch-val, .ch-lbl { white-space: normal; overflow: visible; }
    .ch-item { flex: 1 1 190px; }
}

.stat-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

.stat-chip {
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 18px;
}

.stat-num { font-size: 18px; font-weight: 800; }
.stat-lbl { font-size: 13px; color: var(--text-soft); }

.stat-chip-accent .stat-num { color: var(--accent-strong); }
.stat-chip-warn .stat-num { color: var(--warning); }

/* ---------- QR code (fiche dossier / client) ---------- */
.qr-card {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.qr-box {
    width: 118px;
    height: 118px;
    padding: 8px;
    background: #fff;
    border-radius: 12px;
    flex-shrink: 0;
}

.qr-box img { width: 100%; height: 100%; display: block; }

.qr-card > div:last-child { flex: 1; min-width: 220px; }

/* ---------- En-tête de prise en charge (lecture « document ») ---------- */
.pec-header { padding: 26px 30px; margin-bottom: 16px; }

.ph-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.ph-lbl {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--text-soft);
    font-weight: 650;
    margin-bottom: 4px;
}

.ph-num {
    display: block;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.6px;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}

.ph-date { text-align: right; margin-left: auto; }
.ph-val { display: block; font-size: 18px; font-weight: 700; }

.ph-tech {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 7px 14px;
    background: var(--accent-soft);
    border-radius: 999px;
    font-size: 14px;
    color: var(--text);
}
.ph-tech strong { font-weight: 750; }
.ph-tech.is-empty { background: transparent; border: 1px dashed var(--border); color: var(--text-soft); }

.ph-qr img {
    width: 92px;
    height: 92px;
    display: block;
    background: #fff;
    border-radius: 10px;
    padding: 6px;
}

.ph-row { padding: 16px 0; border-bottom: 1px solid var(--border); }
.ph-row:last-child { border-bottom: none; padding-bottom: 0; }

.ph-big { display: block; font-size: 21px; font-weight: 750; letter-spacing: -.3px; }
.ph-sub { display: block; font-size: 14.5px; color: var(--text-soft); margin-top: 3px; }

/* Coordonnées client : lisibles au comptoir */
.ph-contact {
    display: flex;
    align-items: center;
    gap: 8px 20px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 17px;
    font-weight: 600;
}

/* Personne à prévenir — isolée à droite, éditable en un clic */
.ph-row-split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.ph-client { flex: 1; min-width: 260px; }

.ph-tiers {
    min-width: 250px;
    padding: 12px 16px;
    background: var(--raise);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.ph-tiers > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ph-tiers > summary::-webkit-details-marker { display: none; }

.ph-tiers-nom { font-size: 16px; font-weight: 700; }
.ph-tiers-tel { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ph-tiers-vide { color: var(--text-soft); font-style: italic; }

.ph-tiers-edit {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--accent-strong);
}

.ph-tiers[open] .ph-tiers-edit { opacity: .5; }

.ph-tiers-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.ph-tiers-form .field { margin-bottom: 12px; }
.ph-tiers-form input { padding: 9px 12px; font-size: 14.5px; }

@media (max-width: 640px) {
    .pec-header { padding: 20px 18px; }
    .ph-date { text-align: left; margin-left: 0; }
}

/* Statut d'identification IMEI (formulaire devis) */
.imei-status { font-size: 13.5px; font-weight: 600; margin-top: 6px; min-height: 18px; }
.imei-status-ok { color: var(--success); }
.imei-status-warn { color: var(--warning); }

/* ---------- Chiffrage / devis ---------- */
.devis-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.devis-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .12s;
}

.devis-row:last-child { border-bottom: none; }
.devis-row:hover { background: var(--accent-tint); }

.devis-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.devis-nom { flex: 1; font-weight: 550; }

.devis-prix {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.devis-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding: 13px 16px;
    background: var(--accent-soft);
    border-radius: 12px;
    font-size: 15px;
}

.devis-total strong { font-size: 21px; color: var(--accent-strong); font-variant-numeric: tabular-nums; }

/* Recherche de réparations à ajouter au devis */
.devis-add { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.devis-add > label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; }
.devis-add .search-live { margin-bottom: 0; }
.devis-add .search-live input { padding: 12px 16px 12px 46px !important; font-size: 15px; }

.ds-results {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.ds-results:empty { display: none; }

.ds-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 11px 15px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}

.ds-row:last-child { border-bottom: none; }
.ds-row:hover { background: var(--accent-tint); }

.ds-nom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 550; }
.ds-modele { font-size: 12px; color: var(--text-soft); }
.ds-prix { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-empty { padding: 16px; color: var(--text-soft); font-size: 14px; text-align: center; }

.ds-close {
    width: 100%;
    padding: 9px;
    background: var(--sunken);
    border: none;
    border-top: 1px solid var(--border);
    color: var(--text-soft);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color .12s;
}

.ds-close:hover { color: var(--text); }

/* Devis sur la fiche dossier */
.devis-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.devis-table td { padding: 10px 4px; border-bottom: 1px solid var(--border); }
.devis-table tr:last-child td { border-bottom: none; }
.devis-table .amount { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.devis-table .act { width: 44px; text-align: right; }

.devis-recap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.devis-recap div { display: flex; justify-content: space-between; gap: 16px; }
.devis-recap .grand { font-size: 19px; font-weight: 800; }
.devis-recap .grand span:last-child { color: var(--accent-strong); font-variant-numeric: tabular-nums; }

/* ---------- Pièces ---------- */
.pieces-card { border-color: var(--accent-soft); }

.piece-list { display: flex; flex-direction: column; margin-top: 12px; }

.piece-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.piece-row:last-child { border-bottom: none; }

.piece-libelle { flex: 1; font-weight: 550; min-width: 140px; }

.piece-actions { display: flex; gap: 8px; align-items: center; }

/* ---------- Bloc « À suivre » ---------- */
.attn-card { border-color: var(--warning-soft); }

.attn-list { display: flex; flex-direction: column; margin-top: 12px; }

.attn-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    flex-wrap: wrap;
}

.attn-row:hover { background: var(--warning-soft); }

.attn-what { flex: 1; font-weight: 550; }

.attn-delay { font-size: 13px; color: var(--warning); font-weight: 600; white-space: nowrap; }

/* ---------- Tableau de bord ---------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 920px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .kpi-grid { grid-template-columns: 1fr; } }

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
}

.kpi-value { font-size: 32px; font-weight: 800; letter-spacing: -.5px; }
.kpi-label { font-weight: 650; margin-top: 2px; }
.kpi-sub { font-size: 13px; color: var(--text-soft); margin-top: 2px; }

.kpi-warn .kpi-value { color: var(--warning); }
.kpi-good .kpi-value { color: var(--success); }

.cards-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

/* Annule l'espacement vertical .card + .card entre cartes côte à côte. */
.cards-2 > .card { margin-top: 0; }

@media (max-width: 720px) { .cards-2 { grid-template-columns: 1fr; } }

.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 200px;
    margin-top: 20px;
}

.chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    gap: 6px;
    min-width: 0;
}

.chart-bar {
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    border-radius: 6px 6px 3px 3px;
    min-height: 3px;
    opacity: .9;
    transition: opacity .15s;
}

.chart-col:hover .chart-bar { opacity: 1; }

.chart-x {
    font-size: 10.5px;
    color: var(--text-soft);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.chart-col:nth-child(even) .chart-x { visibility: hidden; }

.statut-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.statut-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.statut-count { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Le Sceau de Kronos (partial _sceau.html.twig) : aligné sur le texte. */
.sceau { display: inline-block; vertical-align: -3px; }
.badge-sceau { display: inline-flex; align-items: center; gap: 6px; }
.badge-sceau .sceau { vertical-align: initial; }

/* Champ mot de passe avec bouton « œil » pour afficher / masquer. */
.pw-field { position: relative; display: block; }
.pw-field > input { width: 100%; padding-right: 40px; }
.pw-eye {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 4px 6px;
    opacity: .6;
}
.pw-eye:hover { opacity: 1; }

/* Zone sensible (fiche boutique) : actions destructives isolées visuellement. */
.danger-zone { border: 1px solid var(--danger); }
.danger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}
.danger-row:first-of-type { border-top: none; }
.danger-delete { border-top-color: var(--danger); }
.btn-danger { background: var(--danger); color: #fff; border: none; }
.btn-danger:hover { filter: brightness(1.05); }

/* Retour en direct sur l'unicité du code boutique. */
.code-feedback { font-size: 13px; margin-top: 6px; min-height: 18px; font-weight: 600; }
.code-feedback[data-ton="ok"] { color: var(--success); }
.code-feedback[data-ton="ko"] { color: var(--danger); }
.code-feedback[data-ton="muted"] { color: var(--text-soft); font-weight: 400; }

/* Grille de saisie du catalogue : les champs occupent toute la cellule. */
.grille-table input[type="text"] { width: 100%; }
.grille-table td { padding-top: 8px; padding-bottom: 8px; }

/* ---------- Liste des dossiers ---------- */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.page-head h1 { margin: 0; font-size: 24px; }

.searchbar { display: flex; gap: 10px; flex: 1; max-width: 420px; }

.pec-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.pec-table th {
    text-align: left;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-soft);
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--sunken);
}

.pec-table td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.pec-table tr:last-child td { border-bottom: none; }

.pec-table tbody tr { cursor: pointer; transition: background .12s; }
.pec-table tbody tr:hover { background: var(--accent-tint); }

.table-wrap { overflow-x: auto; border-radius: var(--radius); }

.ref { font-weight: 700; font-variant-numeric: tabular-nums; }

.muted { color: var(--text-soft); font-size: 14px; }

/* ---------- Badges de statut ---------- */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.badge-gray { background: rgba(255, 255, 255, .09); color: #b9c1d4; }
.badge-blue { background: var(--accent-soft); color: var(--accent-strong); }
.badge-orange { background: var(--warning-soft); color: var(--warning); }
.badge-purple { background: rgba(158, 110, 255, .16); color: #bfa0ff; }
.badge-green { background: var(--success-soft); color: var(--success); }
.badge-slate { background: rgba(120, 160, 200, .14); color: #9fc0dd; }
.badge-danger { background: var(--danger-soft); color: var(--danger); }

:root[data-theme="light"] .badge-gray { background: rgba(30, 40, 80, .08); color: #4b5568; }
:root[data-theme="light"] .badge-purple { background: rgba(122, 79, 206, .13); color: #6a3fce; }
:root[data-theme="light"] .badge-slate { background: rgba(51, 82, 107, .12); color: #33526b; }

/* ---------- Ligne tutos (fiche dossier) ---------- */
.tuto-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.tuto-line em { font-style: normal; color: var(--text); font-weight: 600; }

.tuto-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text);
    background: var(--raise);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: border-color .15s, background .15s;
}

.tuto-btn:hover { border-color: var(--accent); background: var(--accent-tint); }

/* ---------- Fiche détail ---------- */
.show-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.show-head h1 { margin: 0 0 4px; font-size: 26px; }

.show-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Sélecteur de statut : reste sur une ligne à côté de son bouton */
.statut-form { flex-wrap: nowrap; flex-shrink: 0; }
.statut-form select { min-width: 190px; }

.empty {
    text-align: center;
    padding: 70px 20px;
    color: var(--text-soft);
}

.empty .big { font-size: 44px; margin-bottom: 12px; }

/* ---------- Réglages › Apparence ---------- */
.mode-choix { display: flex; gap: 14px; flex-wrap: wrap; }

.mode-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font: inherit;
    font-weight: 650;
    color: var(--text);
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.mode-btn:hover { border-color: var(--text-soft); }
.mode-btn.on { border-color: var(--accent); background: var(--accent-tint); }

.mode-apercu { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); }
.mode-apercu-sombre { background: linear-gradient(135deg, #0b1020 60%, #171d30); }
.mode-apercu-clair { background: linear-gradient(135deg, #e6e9f2 60%, #f6f7fb); }

.pal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.pal-pastille {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px 12px;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .15s, transform .1s, background .15s;
}

.pal-pastille:hover { border-color: var(--text-soft); transform: translateY(-1px); }
.pal-pastille.on { border-color: var(--accent); background: var(--accent-tint); }
.pal-pastille.on .pal-rond { box-shadow: 0 0 0 3px var(--accent-soft); }

.pal-rond { width: 40px; height: 40px; border-radius: 50%; }
.pal-nom { font-weight: 700; font-size: 14.5px; }
.pal-note { font-size: 11.5px; color: var(--text-soft); text-align: center; line-height: 1.3; }

/* ---------- Avatars (partial _avatar.html.twig) ---------- */
.avatar {
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    background: var(--sunken);
    flex-shrink: 0;
}

.avatar-initiales {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 750;
    letter-spacing: .3px;
    color: #fff;
    background: hsl(var(--h) 55% 46%);
    user-select: none;
}

/* La barre technicien du comptoir : des visages, plus seulement des noms. */
.techbtn { display: inline-flex; align-items: center; gap: 7px; }
.techbtn .avatar { margin-left: -6px; }

/* Grille de choix d'un avatar (Réglages › Utilisateurs) */
.avatar-choix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.avatar-choix label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.avatar-choix label:hover { border-color: var(--text-soft); }
.avatar-choix input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-choix input:checked + .avatar,
.avatar-choix label:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }

/* ---------- Panneau « Gérer » d'un utilisateur (pleine largeur) ---------- */
.btn-gerer.on { background: var(--accent-soft); color: var(--accent-strong); }

.tr-gestion > td {
    background: var(--sunken);
    padding: 20px 22px !important;
    border-top: 2px solid var(--accent-soft);
    border-bottom: 2px solid var(--accent-soft);
}

.gestion-grille {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(260px, 1.2fr) minmax(230px, 1fr);
    gap: 12px 26px;
    align-items: start;
}

.gestion-col h4,
.gestion-pouvoirs h4 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-soft);
}

.gestion-pouvoirs {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.gestion-pouvoirs h4 { margin: 0 0 4px; }
.gestion-pouvoirs > .hint { margin: 0 0 10px; }

/* ── Interrupteurs des pouvoirs : une tuile par pouvoir, switch à droite ── */
.pouvoirs-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
}
.pouvoir-tuile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .25s, background .25s;
}
.pouvoir-tuile:hover { border-color: var(--accent); }
.pouvoir-tuile:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.pouvoir-tuile input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pouvoir-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pouvoir-txt b { font-size: 13.5px; font-weight: 650; }
.pouvoir-txt small { font-size: 12px; color: var(--text-soft); line-height: 1.4; }
.sw {
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--border);
    position: relative;
    flex-shrink: 0;
    transition: background .3s;
}
.sw::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .3s;
}
.pouvoir-tuile input:checked ~ .sw { background: var(--accent); }
.pouvoir-tuile input:checked ~ .sw::after { transform: translateX(16px); }
.pouvoir-tuile input:focus-visible ~ .sw {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .sw, .sw::after, .pouvoir-tuile { transition: none; }
}

.gestion-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
    .gestion-grille { grid-template-columns: 1fr; }
}